Repository: cbracco/cardinal
Branch: master
Commit: 647fb8a4fe63
Files: 60
Total size: 365.4 KB

Directory structure:
gitextract_ng7ldxh_/

├── .csscomb.json
├── .editorconfig
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── base/
│   ├── README.md
│   ├── anchors.less
│   ├── blockquotes.less
│   ├── code.less
│   ├── debug.less
│   ├── embedded-content.less
│   ├── form-elements.less
│   ├── headings.less
│   ├── horizontal-rules.less
│   ├── lists.less
│   ├── mixins/
│   │   ├── antialiasing.less
│   │   ├── clearing.less
│   │   ├── font-face.less
│   │   ├── media-queries.less
│   │   ├── momentum-scrolling.less
│   │   ├── text-truncate.less
│   │   ├── to-rem.less
│   │   └── vertically-centered.less
│   ├── normalize.less
│   ├── print.less
│   ├── reset.less
│   ├── root.less
│   ├── tables.less
│   ├── text-elements.less
│   └── variables.less
├── bower.json
├── cardinal.css
├── cardinal.less
├── components/
│   ├── README.md
│   ├── boxes.less
│   ├── buttons.less
│   ├── forms.less
│   ├── lists.less
│   └── tables.less
├── gulpfile.js
├── index.html
├── layout/
│   ├── README.md
│   ├── grids.less
│   └── wrappers.less
├── package.json
└── utilities/
    ├── README.md
    ├── display.less
    ├── floats.less
    ├── font-sizes.less
    ├── margins.less
    ├── paddings.less
    ├── positions.less
    ├── text-alignment.less
    ├── vertical-alignment.less
    ├── visually-hidden.less
    ├── widths.less
    └── z-index.less

================================================
FILE CONTENTS
================================================

================================================
FILE: .csscomb.json
================================================
// http://csscomb.com/config
{
  // Whether to add a semicolon after the last value/mixin.
  "always-semicolon": true,

  // Set indent for code inside blocks, including media queries and nested rules.
  "block-indent": "  ",

  // Unify case of hexadecimal colors.
  "color-case": "lower",

  // Whether to expand hexadecimal colors or use shorthands.
  "color-shorthand": true,

  // Unify case of element selectors.
  "element-case": "lower",

  // Add/remove line break at EOF.
  "eof-newline": true,

  // Add/remove leading zero in dimensions.
  "leading-zero": true,

  // Unify quotes style.
  "quotes": "double",

  // Remove all rulesets that contain nothing but spaces.
  "remove-empty-rulesets": true,

  // Sort unknown properties alphabetically
  "sort-order-fallback": "abc",

  // Sort properties in particular order.
  "sort-order": [
    [
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "line-height",
      "position",
      "z-index",
      "top",
      "right",
      "bottom",
      "left",
      "display",
      "visibility",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "-ms-overflow-x",
      "-ms-overflow-y",
      "-webkit-overflow-scrolling",
      "clip",
      "zoom",
      "flex-direction",
      "flex-order",
      "flex-pack",
      "flex-align",
      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",
      "content",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "cursor",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "-webkit-transition",
      "-moz-transition",
      "-ms-transition",
      "-o-transition",
      "transition",
      "-webkit-transition-delay",
      "-moz-transition-delay",
      "-ms-transition-delay",
      "-o-transition-delay",
      "transition-delay",
      "-webkit-transition-timing-function",
      "-moz-transition-timing-function",
      "-ms-transition-timing-function",
      "-o-transition-timing-function",
      "transition-timing-function",
      "-webkit-transition-duration",
      "-moz-transition-duration",
      "-ms-transition-duration",
      "-o-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "-moz-transition-property",
      "-ms-transition-property",
      "-o-transition-property",
      "transition-property",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-webkit-animation",
      "-moz-animation",
      "-ms-animation",
      "-o-animation",
      "animation",
      "-webkit-animation-name",
      "-moz-animation-name",
      "-ms-animation-name",
      "-o-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "-moz-animation-duration",
      "-ms-animation-duration",
      "-o-animation-duration",
      "animation-duration",
      "-webkit-animation-play-state",
      "-moz-animation-play-state",
      "-ms-animation-play-state",
      "-o-animation-play-state",
      "animation-play-state",
      "-webkit-animation-timing-function",
      "-moz-animation-timing-function",
      "-ms-animation-timing-function",
      "-o-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "-moz-animation-delay",
      "-ms-animation-delay",
      "-o-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "-moz-animation-iteration-count",
      "-ms-animation-iteration-count",
      "-o-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "-moz-animation-direction",
      "-ms-animation-direction",
      "-o-animation-direction",
      "animation-direction",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "vertical-align",
      "white-space",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "-ms-text-justify",
      "text-justify",
      "letter-spacing",
      "word-spacing",
      "-ms-writing-mode",
      "text-outline",
      "text-transform",
      "text-wrap",
      "text-overflow",
      "-ms-text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "-ms-word-wrap",
      "word-wrap",
      "word-break",
      "-ms-word-break",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "pointer-events",
      "opacity",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "-ms-interpolation-mode",
      "color",
      "fill",
      "border",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "-webkit-border-radius",
      "-moz-border-radius",
      "border-radius",
      "-webkit-border-top-left-radius",
      "-moz-border-radius-topleft",
      "border-top-left-radius",
      "-webkit-border-top-right-radius",
      "-moz-border-radius-topright",
      "border-top-right-radius",
      "-webkit-border-bottom-right-radius",
      "-moz-border-radius-bottomright",
      "border-bottom-right-radius",
      "-webkit-border-bottom-left-radius",
      "-moz-border-radius-bottomleft",
      "border-bottom-left-radius",
      "-webkit-border-image",
      "-moz-border-image",
      "-o-border-image",
      "border-image",
      "-webkit-border-image-source",
      "-moz-border-image-source",
      "-o-border-image-source",
      "border-image-source",
      "-webkit-border-image-slice",
      "-moz-border-image-slice",
      "-o-border-image-slice",
      "border-image-slice",
      "-webkit-border-image-width",
      "-moz-border-image-width",
      "-o-border-image-width",
      "border-image-width",
      "-webkit-border-image-outset",
      "-moz-border-image-outset",
      "-o-border-image-outset",
      "border-image-outset",
      "-webkit-border-image-repeat",
      "-moz-border-image-repeat",
      "-o-border-image-repeat",
      "border-image-repeat",
      "stroke",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-position-x",
      "-ms-background-position-x",
      "background-position-y",
      "-ms-background-position-y",
      "-webkit-background-clip",
      "-moz-background-clip",
      "background-clip",
      "background-origin",
      "-webkit-background-size",
      "-moz-background-size",
      "-o-background-size",
      "background-size",
      "box-decoration-break",
      "-webkit-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "text-shadow",
      "text-rendering",
      "-webkit-font-smoothing",
      "-moz-osx-font-smoothing",
      "-webkit-backface-visibility",
      "-moz-backface-visibility",
      "backface-visibility"
    ]
  ],

  // Set space after `:` in declarations.
  "space-after-colon": " ",

  // Set space after combinator (for example, in selectors like `p > a`).
  "space-after-combinator": " ",

  // Set space after `{`.
  "space-after-opening-brace": "\n",

  // Set space after selector delimiter.
  "space-after-selector-delimiter": "\n",

  // Set space before `}`.
  "space-before-closing-brace": "\n",

  // Set space before `:` in declarations.
  "space-before-colon": "",

  // Set space before combinator (for example, in selectors like `p > a`).
  "space-before-combinator": " ",

  // Set space before `{`.
  "space-before-opening-brace": " ",

  // Set space before selector delimiter.
  "space-before-selector-delimiter": "",

  // Set space between declarations (i.e. `color: tomato`).
  "space-between-declarations": "\n",

  // Whether to trim trailing spaces.
  "strip-spaces": false,

  // Replace hard tabs with spaces
  "tab-size": true,

  // Whether to remove units in zero-valued dimensions.
  "unitless-zero": true,

  // Whether to align prefixes in properties and values.
  "vendor-prefix-align": true
}


================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent coding
# styles between different editors and IDEs
# editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false


================================================
FILE: .gitattributes
================================================
* text=auto


================================================
FILE: .gitignore
================================================
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
bower_components/
node_modules/
npm-debug.log
*.map


================================================
FILE: CHANGELOG.md
================================================
# 3.7.0 (March 24, 2016)

- Add `.breakpoint-prefixes()` mixin (thanks @lukechilds!).

# 3.6.1 (February 10, 2016)

- Fix `@font-face` mixin.

# 3.5.1 (January 18, 2016)

- Remove `outline: 0 none;` from form components.

# 3.5.0 (January 18, 2016)

- Hardcode the value of `@to-rem-font-size` to 16 so that `@font-size` can be overridden.

# 3.4.1 (January 11, 2016)

- Fix incorrect variable used in the grid system.
- Fix `height: auto !important;` from preventing `<textarea>` resizing in latest Chrome, Safari, and Firefox.

# 3.3.1 (January 7, 2016)

- Add back `max-width` mixins removed in 3.3.0 because they caused major breaking changes.
- Add deprecation messages to `max-width` mixins (thanks @lukechilds).
- Deprecate v3.3.0.

# 3.3.0 (December 21, 2015)

- Remove mixins that are not aligned with the “mobile-first” methodology (thanks @mrmrs for calling me out).

# 3.2.9 (December 19, 2015)

- fix incorrect URL (typo) in `README.md`.

# 3.2.8 (December 19, 2015)

- Had to bump version number because I pushed 3.2.7 to npm too soon, and had to unpublish it since version numbers in the CSS files were incorrect.

# 3.2.7 (December 19, 2015)

- Adding credit where credit is due. I cannot believe I forgot to do this (thank you @mrmrs for calling me out).
- Updated code comments.
- Removed some commented-out code.
- Add npm/Bower badges to `README.md`.

# 3.2.6 (September 29, 2015)

- Update `gulp-less` to latest version.
- Update `gulpfile.js`.

# 3.2.5 (August 5, 2015)

- Update some variables to use the `@spacing-*` equivalent value set previously, instead of hard-coded integers.

# 3.2.4 (May 28, 2015)

- Remove `text-rendering` property from headings ([more info](http://cbrac.co/1Fjv7IR)).
- Update `.gitignore` (exclude sourcemaps from repo).

# 3.2.3 (May 15, 2015)

- Update `README.md` to include customization docs.

# 3.2.2 (May 12, 2015)

- Add [Codepen demos](http://codepen.io/collection/nmrWQR/) to documentation.
- Fix typos in `index.html`.

# 3.2.1 (May 12, 2015)

- Add more documentation in the form of `README.md` files.
- Clean up `:focus` styles, move declarations to `root.less`.

# 3.2.0 (May 11, 2015)

- Remove `::selection` styles because they cause iOS 8 to crash in certain scenarios.
- Simplify directory structure for LESS partials
- Add `.list-reset` component modifier.

# 3.1.0 (March 8, 2015)

- Remove `@root-font-family`, `@root-font-size`, and `@root-line-height` variables because they were causing problems. Using `@font-family-*`, `@font-size`, and `@line-height` variables instead as root.
- Use `@font-size-0` variable in `layout/grids.less` instead of `font-size: 0;`

# 3.0.7 (March 8, 2015)

- Fix `.btn-round` bug for `input[type="button"]` and `input[type="submit"]` elements.

# 3.0.6 (February 25, 2015)

- Remove default margin for `.grid-item` elements on `li` elements (thanks, @bassjobsen!).

# 3.0.5 (February 18, 2015)

- Add `!important` to utility classes.

# 3.0.4 (February 16, 2015)

- Fix `@print` typo in `layout/wrappers.less`.

# 3.0.3 (February 9, 2015)

- Add `:disabled` to disabled button styles.

# 3.0.2 (February 9, 2015)

- Update `README.md`.
- Comment out `core/debug.less` by default.

# 3.0.1 (February 5, 2015)

- Update `bower.json` and `README.md`.

# 3.0.0 (February 5, 2015)

- Overhauled Cardinal (huzzah!) to function as a CSS framework only.
  - Removed all "boilerplate" files and folders.
  - Replaced Grunt with Gulp.
  - Moved `test.html` to `index.html`.
  - Updated dotfiles, `bower.json`, and `package.json`.
  - Moved CSS and LESS files up a level, beginning in the root directory.
  - Added a `.csscomb.json` file.
  - Changed maximum line length from 72 to 80 characters.
  - Added a bunch of useful utility classes.
  - Added a simple `debug.less` file to use while developing.
- Updated `README.md`.

# 2.4.5 (November 7, 2014)
- Removed `@viewport` CSS rules because they break Google Chrome’s "device mode" tool. They will be added back when they are needed, or when the bug has been fixed (whichever comes first).

# 2.4.4 (August 14, 2014)

- Added whole gutter styles that were missing in previous versions (via @nastasiu).

# 2.4.3 (August 13, 2014)

- Fixed parent grid gutter styles being applied to nested child grids that may need different gutter styles (via @nastasiu).

# 2.4.2 (July 31, 2014)

- Added missing width classes in `layout.less` (via @nastasiu).

# 2.4.1 (July 31, 2014)

- Added `node_modules/` to the `.gitignore` file (via @brandonb927).
- Added missing grunt dependency to `package.json` file (via @brandonb927).

# 2.4.0 (May 15, 2014)

- Update jQuery to 2.1.1.
- Update Modernizr to 2.8.1.

# 2.3.2 (April 9, 2014)

- Add stylesheet to `test.html`.
- Remove `<nav>` element from `test.html`.

# 2.3.1 (April 8, 2014)

- Updated `test.html` because it was missing many tests. Not sure how they disappeared, but they are back now.

# 2.3.0 (April 7, 2014)

- Added my [html5-test-page](https://github.com/cbracco/html5-test-page) so you can see how some common HTML elements react to Cardinal (thanks [@petsagouris](https://github.com/petsagouris) for getting this going).
- Added a `CONTRIBUTING.md` file with stricter guidelines on how to contribute in hopes that people will actually read it before submitting pull requests.
- Updated `README.md` to mention the new `CONTRIBUTING.md` file.
- Moved uncompressed assets into their own directory.
- Updated `.gitignore` file to ignore new `/dist` directory.
- Cleaned up `gruntfile.js`. It was missing some semicolons, and the default and watch tasks were separated (thanks [@petsagouris](https://github.com/petsagouris)).
- Added `@button-border-radius` LESS variable (thanks [brandonb927](https://github.com/brandonb927)).
- Added `font-weight: 700;` to buttons by default (thanks [brandonb927](https://github.com/brandonb927)).

# 2.2.6 (March 27, 2014)

- Updated normalize.css to 3.0.1.

# 2.2.5 (February 18, 2014)

- Changed headings to inherit the font stack from the body since it is identical (thanks @louisremi!).

# 2.2.4 (February 7, 2014)

- Updated normalize.css to 3.0.0.

# 2.1.4 (February 7, 2014)

- Added a `bower.json` file so Cardinal can be added to the bower registry (thanks [@progsource](https://github.com/progsource)!).

# 2.1.3 (February 2, 2014)

- Changed IE conditional classes to use hyphens instead of underscores.

# 2.1.2 (January 30, 2014)

- Fixed LESS button size referencing the wrong variable, because I’m a bonehead (thanks [@progsource](https://github.com/progsource)!).

# 2.1.1 (January 22, 2014)

- Fix duplicate LICENSE line in README

# 2.1.0 (January 22, 2014)

- Added LESS support (thanks [@brandonb927](https://github.com/brandonb927))! `master` now ships with a `/less` directory and a simple [Grunt](http://gruntjs.com/) build process.
- Added an empty `img/` folder since I usually end up creating one anyways.
- Updated the Table Of Contents heading to include example project information instead.
- Removed `@media` query for extra padding on `<kbd>` elements.
- Nested `caption` styles inside the `table` element.
- Changed some `px` values to `rem` here and there.

# 2.0.2  (January 21, 2014)

- Removed `word-break: break-all` from common typographical elements because it was causing weird wrapping issues in Firefox ([more info here](https://miketaylr.com/posts/2014/01/word-break-break-word.html))

# 2.0.1  (January 17, 2014)

- Changed hr.asterisks to `hr.symbol` for better semantics.
- Added a bottom margin to `hr.symbol`.

# 2.0.0 (January 16, 2014)

- Updated the [documentation website](http://cardinalcss.com)!
- Updated jQuery to 1.10.2.
- Updated Modernizr to 2.7.1.
- Removed minified version of Cardinal.
- Added Chrome Frame support to IE rendering `<meta>` tag.
- Removed `@media` queries on `html` element to resize the entire project.
- Re-ordered and re-grouped styles in `main.css`.
- Added 5 carriage returns in between sections in `main.css` so its easier to see section breaks when scrolling.
- Fixed some overflow issues with form elements.
- Removed the “Helpers” section as well as some unused classes.
- Added practical font-sizing classes for headings (`.h1`, `.h2`, etc).
- Switched indentation from tabs to spaces.
- Updated `<blockquote>` styles and structure.
- Renamed `.lap-*` to `.medium-*`, and `.desk-*` to `.large-*`.
- Removed rounded and hollow variations of `.island` and `.well` classes.
- Changed default styles for form elements, and added a `.fieldset-border` class.
- Added a `.flex-video` class.
- Changed naming conventions to all hyphens (fuck BEM).
- Added boilerplate `humans.txt` and `robots.txt` files to the root directory.
- Added some default HTML elements with appropriate ARIA roles to `index.html`.
- Removed a bunch of `.button` classes and variations.
- Decreased `.wrapper`’s maximum width to `1024px`.
- Added an alternative `.asterisks` style for `<hr>` elements.
- Added `.drop-cap`, `.run-in`, and `.small-caps` classes for some more variety in typographical hierarchy.

# 1.4.0 (November 8, 2013)

- Removed some helper classes for alignment, margins, and paddings. Classes were cluttering HTML markup, and it started to feel like inline styling.
- Moved `.width_auto` classes into the Grid section, where they belong.
- Reverted Google Analytics tracking code back to the version found in [HTML5BP](https://github.com/h5bp/html5-boilerplate/blob/master).

# 1.3.0 (October 21, 2013)

- Updates to make form styles more consistent with `.button` styles.

# 1.2.4 (October 15, 2013)

- Updated word wrapping and hyphenation declaration to include `caption` element and use [a more bulletproof solution](http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/) that works in IE8+, Firefox 6+, iOS 4.2+, Safari 5.1+, and Chrome 13+.

# 1.2.3 (October 11, 2013)

- Added some default styles for the caption element.

# 1.2.2 (October 7, 2013)

- Fixed class conflict with `.font_normal` being used twice (derp). Changed the font sizing helper class to `.font_regular` instead.

# 1.2.1 (October 1, 2013)

- Added more helper classes for font weights.
- Changed `.font_thin` to `.font_light` for consistency.

# 1.2.0 (September 27, 2013)

- Added `.width_auto` class in case you want to change a width class to `width: auto;` at some breakpoint.
- Changed class-naming conventions to avoid possible conflicts. All class names for block/element modifiers are now prefixed with the name of that block/element (eg. `.button_chunky` instead of `.button.chunky`).
- Changed `.table_border_all` to `.table_border_cells` because that makes more sense.
- Removed the `inherit` property from font sizing helper classes because it was causing inheritance issues.

# 1.1.2 (September 20, 2013)

- Added `Arial` to the font stack for headings.

# 1.1.1 (September 17, 2013)

- Added a DNS prefetch to the `<head>` of `index.html` for the version of jQuery being retrieved from Google’s CDN.

# 1.1.0 (August 30, 2013)

- Removed `.h1`, `.h2`, etc. classes. Use `.font_[size]` instead.
- Replaced `.subheading` and `.subheading.muted` with `.font_thin` and `.font_muted`, added `.lap-*` and `.desk-*` versions, and moved the classes to the "Helpers" section. They can be used on any element now, not just headings.

# 1.0 (August 23, 2013)

- Scaled back `.button` classes, removing glossy style and hover states.
- Added `.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6` classes.
- Picked apart [normalize.css](https://github.com/necolas/normalize.css) and placed declarations in their appropriate sections, instead of lazily including the whole thing up top.
- Fixed issues with color consistency, and added their hex values to the top comment block.
- Removed `.table` class, instead applying Cardinal’s default table styles directly on the `<table>` element.
- Changed `.float_*` classes to `.align_*`, and added the `.align_center` class.
- Changed `.text_[size]` classes to `.font_[size]` to better distinguish between the text alignment and font sizing helper classes.
- Re-ordered the `@print` style declarations alphabetically.
- Fixed font-sizing issues with `code`, `figcaption`, `small`, `sup`, and `sub` elements so that they work better in nested situations.

# 0.3.7 (July 23, 2013)

- moved `.text_*` classes to the helpers section so they can be used on `.grid-item` classes
- resized `<h6>` from `1rem` to `0.75rem`
- added `!important` to some helper classes that needed them.

# 0.3.6 (July 18, 2013)

- Added `lap-*` and `desk-*` queries for helper classes.
- Fixed a small comment issue.

# 0.3.5 (July 12, 2013)

- Removed `margin-bottom: 1rem;` from the `.strip` and `.grid-item` classes.

# 0.3.4 (June 25, 2013)

- Updated comment line length to have a maximum of 72 characters.

# 0.3.3 (June 13, 2013)

- Removed IE7 fix for input button outlines.

# 0.3.2 (June 10, 2013)

- Added `.grid_gutter_none` classes so that you can create grids with no gutters, if desired.

# 0.3.1 (June 10, 2013)

- Added Arial to the font stack on the `body` element, and beefed up the font stack for `blockquote` elements.
- Removed some more support for IE ≤ 8.

# 0.3.0 (June 7, 2013)

- **NEW!** Added classes for table styles.

# 0.2.1 (June 1, 2013)

- Word-wrapped/hyphenated more elements per @danielzilli’s [suggestion](https://github.com/cbracco/Cardinal/issues/1).

# 0.2.0 (June 1, 2013)

- **NEW!** Added classes for button styles.
- Added a bottom margin to `.well` and `.island` classes.
- Updated Google Analytics snippet.

# 0.1.4 (June 1, 2013)

- Added .editorconfig file.

# 0.1.3 (May 31, 2013)

- Added conditional classes on the `html` element for IE9.

# 0.1.2 (May 31, 2013)

- Added blank lines to the end of each file, because old habits die hard.

# 0.1.1 (May 30, 2013)

- Removed default border-radius from pre, .island, and .well.

# 0.1.0 (May 30, 2013)

- First stable release! Time for a beer...
- Added LICENSE.md and CHANGELOG.md to the project.
- Updated README.md content.
- Reverted back to jQuery 1.10.0.


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to this project

*This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*

Before making a contribution, please take a moment to review this document. It will make the process easier and more enjoyable for everyone involved.

Following the guidelines in this document shows that you respect the time of the maintainers of this open-source project. In return, maintainers should show their respect for you by addressing your requests, issues, and contributions in a timely fashion.

## Submitting issues

GitHub’s built-in issue tracker is the preferred channel for bug reports, feature requests, and submitting pull requests.

**Do not** use the issue tracker for personal support questions. They will probably not be addressed.
**Do not** derail or troll issues. Please try to keep things on topic and be respectful to others.

## Bug reports

*Demo or it didn’t happen.*

A bug is a problem that you can demonstrate to a maintainer on this open-source project. Good bug reports are very helpful, and encouraged!

If you are thinking about reporting a bug, please do the following:

1. **Search for existing issues** - it could have already been reported.
2. **Check for fixes** - try to reproduce the bug using the latest release on the `master` branch in the repository.
3. **If the bug persists**, submit an issue and create a live example of the bug using a public service like [jsFiddle](http://jsfiddle.net) or [Codepen](http://codepen.io). Link to your example in the issue that you submit.

Please be as detailed as possible. Ask yourself: What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome?

## Feature requests

Feel free to request whatever you like, but please take a moment to think about whether your request is within the scope of the project. You should make a strong case for your request, otherwise the maintaining developers will probably not consider it. Provide as much detail as you can.

## Pull requests

Good pull requests are awesome. Bad pull requests are a headache. They should always be limited by the scope of the request, and avoid including unrelated commits.

**Please file an issue first** before deciding to do a lot of work. Otherwise, you run the risk of wasting time working on something that might not get merged into the project.

Follow this process if you’d like your work to be considered for inclusion in the project:

1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
   and configure the remotes:

   ```bash
   # Clone your fork of the repo into the current directory
   git clone https://github.com/<your-username>/cardinal
   # Navigate to the newly cloned directory
   cd cardinal
   # Assign the original repo to a remote called "upstream"
   git remote add upstream https://github.com/cbracco/cardinal
   ```

2. If you cloned a while ago, get the latest changes from upstream:

   ```bash
   git checkout master
   git pull upstream master
   ```

3. **Never work directly on `master`**. Create a new topic branch (off the latest version of `master`) to contain your feature, change, or fix:

   ```bash
   git checkout -b <topic-branch-name>
   ```

4. Commit your changes in logical chunks. Please adhere to these [git commit
   message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
   or your code is unlikely be merged into the main project. Use Git’s
   [interactive rebase](https://help.github.com/articles/interactive-rebase)
   feature to tidy up your commits before making them public.

   Please add a test to the `test.html` file if appropriate, and test
   your change(s) in all supported browsers.

5. Locally rebase the upstream development branch into your topic branch:

   ```bash
   git pull --rebase upstream master
   ```

6. Push your topic branch up to your fork:

   ```bash
   git push origin <topic-branch-name>
   ```

10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description.

**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
license your work under the same license as that used by the project.

## Maintainers

If you have commit access, please follow this process for merging patches and
cutting new releases.

### Accepting patches

1. Check that a patch is within the scope and philosophy of the project.
2. Check that a patch has any necessary tests and a proper, descriptive commit
   message.
3. Test the patch locally.
4. Do not use GitHub’s merge button. Apply the patch to `master` locally
   (either via `git am` or by checking the whole branch out). Amend minor
   problems with the author’s original commit if necessary. Then push to GitHub.

### Releasing a new version

1. Run `gulp` to compile CSS assets, and use a dedicated commit for these changed files.
1. Add all new functional changes into the CHANGELOG.
2. Use a dedicated commit to increment the version. The version needs to be added to the `CHANGELOG.md` (inc. date), and `package.json` files.
3. The commit message must be of `v0.0.0` format.
4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`.
5. Push the changes and tags to GitHub: `git push --tags origin master`


================================================
FILE: LICENSE.md
================================================
Copyright (c) Chris Bracco

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Cardinal

[![npm version](https://badge.fury.io/js/cardinalcss.svg)](https://badge.fury.io/js/cardinalcss)
[![Bower version](https://badge.fury.io/bo/cardinal.svg)](https://badge.fury.io/bo/cardinal)

Build more with less.

⚠️ THIS REPO IS NO LONGER BEING ACTIVELY MAINTAINED. USE AT YOUR OWN RISK! ⚠️

- [Go to Website](http://cardinalcss.com)
- [Review the CHANGELOG](https://github.com/cbracco/cardinal/blob/master/CHANGELOG.md)

# Table of Contents

- [What is Cardinal?](#what-is-cardinal)
- [Features](#features)
- [Dependencies](#dependencies)
- [Getting Started](#getting-started)
  - [Package Managers](#package-managers)
    - [Updating Cardinal](#updating-cardinal)
  - [LESS Plugin](#less-plugin)
  - [Direct Download](#direct-download)
- [Customizing](#customizing)
  - [Including Partials](#including-partials)
  - [Modifying Variables](#modifying-variables)
- [Further Documentation](#further-documentation)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Credits](#credits)
- [License](#license)

# What is Cardinal?

Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.

The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often [UI toolkits, not frameworks](https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway)), leaving the design and creativity up to you.

# Features

- “Mobile-first” CSS written for the [LESS preprocessor](http://lesscss.org/)
- [normalize.css](https://github.com/necolas/normalize.css)
- Sensible global styles, variables, and useful mixins
- A flexible grid system and encapsulated styles for common UI objects (buttons, forms, tables, etc.)
- A collection of utility classes optimized for great gzip compression
- The entire framework, minified and gzipped, clocks in at a mere **11.27kB**

# Dependencies

If you would like to install Cardinal with the [Bower](http://bower.io/) package manager tool, you will first need to install [Node.js](http://nodejs.org/) on your machine or server. Once you have Node.js installed, make sure npm is installed ([info here](http://blog.npmjs.org/post/85484771375/how-to-install-npm)), and use it to install Bower, like so:

```
npm install -g bower
```

Also, Cardinal depends on the awesome tool [Autoprefixer](https://github.com/postcss/autoprefixer), which adds the proper vendor prefixes that provide the [specified browser support](#browser-support) for this project. This way, you don’t have to worry about manually including the correct prefixes while writing LESS/CSS. You are encouraged to incorporate Autoprefixer into your build process (this is easy to do with tools like [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/)).

# Getting Started

There are several ways that you can use Cardinal in your new and existing web projects.

## Package Managers

The fastest way to get up-and-running with Cardinal is by using a package manager, like so:

**Bower**

To install Cardinal with [Bower](http://bower.io/), run the following command(s) from your terminal:

```
cd your-project-directory
bower install --save cardinal
```
Once installed, you can find Cardinal here:

```
your-project-directory
│
└───bower_components
    │
    └───cardinal
```

**npm**

To install Cardinal with [npm](https://www.npmjs.com), run the following command(s) from your terminal:

```
cd your-project-directory
npm install --save cardinalcss
```
Once installed, you can find Cardinal here:

```
your-project-directory
│
└───node_modules
    │
    └───cardinalcss
```

### Updating Cardinal

You can grab the latest version of Cardinal by running the following command(s):

**Bower**

```
bower update cardinal
```

**npm**

```
npm update cardinal
```

## LESS Plugin

There is also a [LESS.js plugin available](https://github.com/bassjobsen/less-plugin-cardinal) for Cardinal, created and maintained by [@bassjobsen](https://github.com/bassjobsen). You can use this plugin to include Cardinal in your project before your custom project code.

**Installation**

```
npm install less
npm install less-plugin-cardinal
```

**Usage**

```
lessc custom.less --cardinal
```

## Direct Download

If you do not want to use a package manager to integrate Cardinal into your project, you can also download it directly:

**Build from Source**

To do so, you need to already have Node.js and npm installed on your machine. Cardinal uses Gulp to build and watch the CSS files.

```
git clone git@github.com:cbracco/cardinal.git
cd cardinal
npm install
gulp
```

**Download the Zip**

You can also download the `.zip` file and proceed however you wish. Include the minified CSS file in the `<head>` of your project, or modify the LESS files directly (not recommended, since it will be difficult to update to future versions). It’s your world!

- [Download the zip](https://github.com/cbracco/cardinal/archive/master.zip)

# Customizing

## Including Partials

The easiest way to include Cardinal in your project is to include the entire thing before your project files, like so:

```
//
// Vendor
//

@import url("../../path/to/bower_components/cardinal/cardinal.less");

//
// Project
//

@import url("project-file.less");
```

However, you don’t have to use the entire Cardinal framework. The only required partials are located in the `base/` directory:

```
//
// Vendor
//

//
// Base
//
// These variables, mixins, and styles are required if you want to use this
// framework, and they should be included in the following order.
//

// Base -> Variables

@import url("base/variables.less");

// Base -> Mixins

@import url("base/mixins/to-rem.less");
@import url("base/mixins/media-queries.less");
@import url("base/mixins/antialiasing.less");
@import url("base/mixins/clearing.less");
@import url("base/mixins/font-face.less");
@import url("base/mixins/momentum-scrolling.less");
@import url("base/mixins/text-truncate.less");
@import url("base/mixins/vertically-centered.less");

// Base -> Normalize

@import url("base/normalize.less");

// Base -> Reset

@import url("base/reset.less");

// Base -> Debug (DO NOT USE THIS STYLESHEET IN PRODUCTION!)

//@import url("base/debug.less");

// Base -> Default Styles

@import url("base/root.less");
@import url("base/anchors.less");
@import url("base/text-elements.less");
@import url("base/headings.less");
@import url("base/lists.less");
@import url("base/horizontal-rules.less");
@import url("base/blockquotes.less");
@import url("base/code.less");
@import url("base/embedded-content.less");
@import url("base/form-elements.less");
@import url("base/tables.less");
@import url("base/print.less");
```

Beyond that, you can use whatever grid system, components, and utilities you would like. The `base/` directory just sets some good base styles for the framework.

## Modifying Variables

After getting started and including Cardinal, you will probably want to begin customizing it to suit your project. Cardinal has a bunch of LESS variables located in the `base/variables.less` file that can be tweaked to your needs. **These variables should not be edited directly.** The recommended way to make changes to Cardinal LESS variables is to create your own project-specific variables file (e.g. `project-variables.less`), and override the default variables in this file, like so:

```
// project-variables.less

// Typography -> Font Sizes -> Base

$font-size: 17;

//
// Typography -> Line height
//

$line-height: 26;
```

This file should be included in your main LESS file after you’ve included Cardinal.

# Further Documentation

There is a `README.md` file included in each major directory of this project that further details the code located in those directories.

- [Base](https://github.com/cbracco/cardinal/tree/master/base)
- [Components](https://github.com/cbracco/cardinal/tree/master/components)
- [Layout](https://github.com/cbracco/cardinal/tree/master/layout)
- [Utilities](https://github.com/cbracco/cardinal/tree/master/utilities)

# Browser support

Cardinal supports most modern browsers:

* Google Chrome 25+
* Mozilla Firefox 19+
* Safari 6.0+
* iOS Safari 6.0+
* Opera 12.1+
* Android 4.2+
* Internet Explorer 9+

# Contributing

Is something broken? Do you have ideas or feature requests? Please [submit an issue](https://github.com/cbracco/cardinal/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!

**IMPORTANT**: Before doing a bunch of work, please consult the [CONTRIBUTING.md document](https://github.com/cbracco/cardinal/blob/master/CONTRIBUTING.md), which gives detailed instructions on how to contribute to this project. If you do not follow the instructions, your code will probably not make it into this project.

# Versioning

Cardinal will be maintained using the [Semantic Versioning](http://semver.org/) guidelines. From here on out, releases will be numbered using the following format:

`major.minor.patch`

* Breaking backwards compatibility increments `major`, while resetting `minor` and `patch`.
* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
* Bug fixes and other small changes increment `patch`.

# Credits

Cardinal is a project by [@cbracco](http://twitter.com/cbracco). Its principles and techniques are very influenced by the following projects, organizations, and individuals:

- [OOCSS](http://oocss.org/) ([@stubbornella](https://github.com/stubbornella/))
- [inuit.css](https://github.com/inuitcss/) ([@csswizardry](https://github.com/csswizardry/))
- [SUIT CSS](https://suitcss.github.io/) ([@necolas](https://github.com/necolas/))
- [TACHYONS](http://tachyons.io/) ([@mrmrs](https://github.com/mrmrs/))
- [Basscss](http://www.basscss.com/) ([@jxnblk](https://github.com/jxnblk/))
- [Scally](https://github.com/chris-pearce/scally/) ([@chris-pearce](https://github.com/chris-pearce/))
- [Atomic CSS](http://acss.io/) ([@yahoo](https://github.com/yahoo/))
- [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/) ([@h5bp](https://github.com/h5bp/))
- [Kraken](https://github.com/cferdinandi/kraken/) ([@cferdinandi](https://github.com/cferdinandi/))

...and any others I may have forgotten &mdash; let me know if I have, and I will certainly add them. 

Many thanks for your hard work and great ideas!

# License

Cardinal is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/cardinal/blob/master/LICENSE.md) file in this repository.


================================================
FILE: base/README.md
================================================
# Cardinal Base

The `base/` directory houses all of the essential styles that build the foundation for this framework.

Without `base/`, this framework **will not work correctly.** It is the only required part of Cardinal.

# Table of Contents

- [Overview](#overview)
- [Variables](#variables)
- [Mixins](#mixins)
    - [.to-rem()](#to-rem)
    - [Media Queries](#media-queries)
- [normalize.css](#normalize-css)
- [Reset](#reset)
- [Debug](#debug)
- [Default Styles](#default-styles)
    - [Root](#root)
    - [Anchors](#anchors)
    - [Text Elements](#text-elements)
    - [Headings](#headings)
    - [Lists](#lists)
    - [Horizontal Rules](#horizontal-rules)
    - [Code](#code)
    - [Embedded Content](#embedded-content)
    - [Form Elements](#form-elements)
    - [Tables](#tables)
    - [Print](#print)

# Overview

Cardinal Base provides a solid foundation for the framework, including things like:

- Useful LESS [variables](https://github.com/cbracco/cardinal/blob/master/base/variables.less) and [mixins](https://github.com/cbracco/cardinal/tree/master/base/mixins)
- [normalize.css](https://github.com/necolas/normalize.css)
- a [thin reset layer](https://github.com/cbracco/cardinal/blob/master/base/reset.less) on top of normalization
- Sensible default styles for common HTML elements

# Variables

Cardinal stores all of its LESS variables in a single file aptly named `variables.less`. These variables provide some good default settings for any project, but you can easily customize them to suit your needs.

The recommended way to include Cardinal in your project is by using the [Bower package manager](http://bower.io/). In doing so, you will never have to modify Cardinal directly (which makes updating the project as simple as `bower update --save cardinal`).

Instead, you should create your own `variables.less` file in your project’s LESS directory which includes the variables you would like to modify, and include it in your main LESS stylesheet **after** you include Cardinal, like so:

```css
// your-project.less

//
// Vendor
//

@import url("../../path/to/bower_components/cardinal/cardinal.less");

//
// Project
//

@import url("variables.less");
```

# Mixins

A handful of useful LESS mixins are included with Cardinal, several of which are **required** for this framework to function properly. The required mixins are outlined below:

## .to-rem()

The `.to-rem()` mixin is a simple yet powerful function that converts all unitless pixel values to REM units, with a pixel fallback version. The [base value](./mixins/to-rem.less#L5) used to calculate REM values from unitless values is 16. This mixin is used to convert unitless pixel values stored in `variables.less` to REM units.

**It’s strongly encouraged to use this mixin in your own CSS that you write on top of Cardinal.**

### Usage

```css
@unitless-pixel-value: 45;

.selector {
  .to-rem(left, @unitless-pixel-value);
  .to-rem(padding, 10 5 12);
  .to-rem(border, 1, solid green);
  .to-rem(box-shadow, 1 1 0 -1, rgba(0, 0, 0, 0.3));
  .to-rem(margin, 30 auto 0);
}
```

### Output

```css
.selector {
  /*px*/  left: 45px;
  /*rem*/ left: 2.8125rem;
  /*px*/ padding: 10px 5px 12px 5px;
  /*rem*/ padding: 0.625rem 0.3125rem 0.75rem 0.3125rem;
  /*px*/ border: 1px solid green;
  /*rem*/ border: 0.0625rem solid green;
  /*px*/ box-shadow: 1px 1px 0 -1px rgba(0, 0, 0, 0.3);
  /*rem*/ box-shadow: 0.0625rem 0.0625rem 0 -0.0625rem rgba(0, 0, 0, 0.3);
  /*px*/ margin: 30px auto 0;
  /*rem*/ margin: 1.875rem auto 0;
}
```

## Media Queries

The `media-queries.less` file includes a handful of useful mixins that speed up the writing and usage of `@media` queries in your project.

### .screen-\*()

These mixins correspond to the screen sizes declared in `variables.less`. Overriding those variables in your project will also change the values for these mixins.

There are mixins for both `min-width and up` query scenarios and specific intervals (e.g. "Small only").

**NOTE**: `max-width and down` mixins are still available for backwards compatibility, but they have been deprecated and will be removed in the next major version.

#### Usage

```css
/* Small only */
.screen-sm({
  .selector {
    color: blue;
  }
});

/* Medium and up */
.screen-md-min({
  .selector {
    color: red;
  }
});
```

#### Output

```css
/* Small only */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .selector {
    color: blue;
  }
}

/* Medium and up */
@media (min-width: @screen-md-min) {
  .selector {
    color: red;
  }
}
```

### .screens()

If you want to change the styles for a selector at all of the declared screen sizes, you can use the `.screens()` mixin to chain these `@media` queries together, like so:

#### Usage

```css
.my-element {
  .screens({
    color: red;    // xs and up
  },{
    color: green;  // sm and up
  },{
    color: yellow; // md and up
  },{
    color: purple; // lg and up
  },{
    color: blue;   // xl and up
  },{
    color: orange; // xxl and up
  });
}
```

#### Output

```css
@media (min-width: @screen-xs-min) {
  .my-element {
    color: red;
  }
}

@media (min-width: @screen-sm-min) {
  .my-element {
    color: green;
  }
}

@media (min-width: @screen-md-min) {
  .my-element {
    color: yellow;
  }
}

@media (min-width: @screen-lg-min) {
  .my-element {
    color: purple;
  }
}

@media (min-width: @screen-xl-min) {
  .my-element {
    color: blue;
  }
}

@media (min-width: @screen-xxl-min) {
  .my-element {
    color: orange;
  }
}
```

### .breakpoint-prefixes()

To generate classes prefixed with breakpoint names for your styles, use the `.breakpoint-prefixes()` mixin. It will generate classes prefixed with `xs-`, `sm-`, `md-`, `lg-`, `xl-` and `xxl-`, and any styles applied to those classes will only be applied at the corresponding @media queries. It will also generate a class with no prefix that can be used at any screen width.

#### Usage

```css
.breakpoint-prefixes({
  .@{breakpoint-prefix}my-class {
    background: red;
  }
});
```

#### Output

```css
.my-class {
  background: red;
}

@media (min-width: @screen-xs-min) {
  .xs-my-class {
    background: red;
  }
}

@media (min-width: @screen-sm-min) {
  .sm-my-class {
    background: red;
  }
}

@media (min-width: @screen-md-min) {
  .md-my-class {
    background: red;
  }
}

@media (min-width: @screen-lg-min) {
  .lg-my-class {
    background: red;
  }
}

@media (min-width: @screen-xl-min) {
  .xl-my-class {
    background: red;
  }
}

@media (min-width: @screen-xxl-min) {
  .xxl-my-class {
    background: red;
  }
}
```

# normalize.css

Cardinal includes the 3rd-party library [normalize.css](https://github.com/necolas/normalize.css), which makes browsers render all elements more consistently and in line with modern web standards.

# Reset

On top of [normalize.css](https://github.com/necolas/normalize.css), Cardinal includes a light reset layer to add even more consistency to the framework.

- All elements inherit `box-sizing: border-box;` property from the `<html>` element ([more info](http://cbrac.co/RQrDL5)).
- Remove margins, paddings, and borders from HTML elements ([more info](http://cbrac.co/1Ev9etR)).
- Remove default border for `<iframe>` elements ([more info](http://cbrac.co/1CVyNTj)).
- Remove `:focus` outline on links that cannoy be accessed via keyboard ([more info](http://cbrac.co/1Evazku)).

# Debug

**This stylesheet is for development use only.** Do not include it in your production code/build. It can help you visually detect any nesting issues, invalid markup, or inaccessible code in your project. It is commented out by default, so you will have to explicitly include it in your project’s main LESS file, like so:

```
// your-project.less

//
// Vendor
//

@import url("../../path/to/bower_components/cardinal/cardinal.less");
@import url("../../path/to/bower_components/cardinal/less/base/debug.less");

//
// Project
//

...
```

([more info](http://cbrac.co/1C01g8C))

# Default Styles

After [normalize.css](https://github.com/necolas/normalize.css) and a light reset, Cardinal sets some more default styles for common HTML elements.

## Root

Root defines core styles for the `<html>` element, such as default font family, font size, line height, background and text colors, forcing vertical scrollbars in IE, and more.

It also ensures the `<body>` element is at least the viewport height, sets a consistent margin for common elements to maintain a vertical rhythm, adds word-wrapping and basic hyphenation to common elements, and sets default `:focus` styles for the framework.

## Anchors

[View Demo](http://codepen.io/cbracco/pen/BNKNBo)

Default anchor link styles for this framework reside here.

## Text Elements

[View Demo](http://codepen.io/cbracco/pen/jPqPqm)

This file adds some opinionated default styles for inline text elements, such as adding the appropriate `cursor` styles to `<abbr>` elements, and adding `text-decoration: line-through` styles to `<del>` elements.

## Headings

[View Demo](http://codepen.io/cbracco/pen/PqNqzP)

Headings help break up blocks of text and visual content into consumable chunks, and Cardinal includes some default headings styles to facilitate better readability from the get-go.

## Lists

[View Demo](http://codepen.io/cbracco/pen/vOGOXB)

List elements like `<dl>`, `<ul>`, and `<ol>` also get their own default styles to provide a more consistent experience across browsers.

## Horizontal Rules

[View Demo](http://codepen.io/cbracco/pen/yNONaP)

`<hr>` elements also help break up text and visual content into consumable chunks, and Cardinal normalizes the styling of this element so it displays consistently across browsers.

```
hr {
  display: block;
  padding: 0;
  border: 0;
  .to-rem(border-top, @hr-border-width, @hr-border-style @hr-border-color);
}
```

## Blockquotes

[View Demo](http://codepen.io/cbracco/pen/doMopE)

Depending on the type of project, you may never have a use for the `<blockquote>` element, but Cardinal provides some light styling to this element just in case.

The styles are set up for the preferred use case for the `<blockquote>` element, demonstrated below ([more info](http://cbrac.co/18LWCOw)):

```
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nihil neque distinctio aliquid esse similique et placeat, consequatur hic quas earum sequi nulla voluptas facilis provident eos ab aperiam nisi!</p>
  <p>Aperiam tempora veritatis in, officia eos recusandae debitis culpa saepe quam, sapiente, asperiores quidem est nulla consequatur sint earum pariatur dolore neque ipsum. Eum earum possimus, voluptates, numquam veniam tempora!</p>
  <footer>
    <cite>
      <a href="#!">Citation Name</a>
    </cite>
  </footer>
</blockquote>
```

## Code

[View Demo](http://codepen.io/cbracco/pen/gprpLa)

Again, depending on your project, you may never have a use for basic code styles, but they are included just in case.

Cardinal provides some simple styling to common HTML elements that are used to display programming language code, such as `<kbd>`, `<code>`, and `<pre>`.

## Embedded Content

[View Demo](http://codepen.io/cbracco/pen/pJyJNW)

Cardinal also includes some basic fixes and styles for embedded content (e.g. images, HTML5 audio & video, iframe, canvas, and SVG).

Embedded content elements are responsive out-of-the-box, by simply declaring `width: 100%` on these elements. Images and several other elements can resize automatically, and images will maintain their aspect ratio by way the following:

```
embed,
img,
object,
video {
  max-width: 100%;
  height: auto;
}

embed,
object {
  height: 100%;
}
```

Some basic styles are also given to `<figure>` and `<figcaption>` elements, just in case you need it.

## Form Elements

[View Demo](http://codepen.io/cbracco/pen/xGVGqm)

Forms are notoriously finicky, so this base file aims to remove and normalize the form experience before any major aesthetic design decisions are made.

## Tables

[View Demo](http://codepen.io/cbracco/pen/QbNbvg)

Similarly to forms, tables can be difficult to style correctly. This file corrects some table oddities to make the basic table element behave more consistently across browsers.

## Print

A default `@print` stylesheet is also included in Cardinal, which is an almost-exact copy of the [HTML5 Boilerplate print styles](http://cbrac.co/1PgyYR2).

These styles are inlined to avoid an extra HTTP request.


================================================
FILE: base/anchors.less
================================================
/* ========================================================================== *\
   Base -> Anchors ($base-anchors)
\* ========================================================================== */

a {
  text-decoration: underline;
  color: @anchor-text-color;

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
}


================================================
FILE: base/blockquotes.less
================================================
/* ========================================================================== *\
   Base -> Blockquotes ($base-blockquotes)
\* ========================================================================== */

blockquote {
  color: @blockquote-text-color;
  font-family: @blockquote-font-family;
  font-style: @blockquote-font-style;
  .to-rem(font-size, @blockquote-font-size);
  .to-rem(margin-left, @blockquote-margin-left);
  .to-rem(padding-left, @blockquote-padding-left);
  .to-rem(border-left, @blockquote-border-width, @blockquote-border-style @blockquote-border-color);

  p {
    margin: 0;
    + p {
      .to-rem(margin-top, @spacing-base);
    }
  }

  /**
   * Use <cite> inside blockquotes.
   *
   * @link http://cbrac.co/18LWCOw
   */

  cite {
    font-family: @blockquote-cite-font-family;
    font-style: @blockquote-cite-font-style;
    .to-rem(font-size, @blockquote-cite-font-size);
    color: @blockquote-cite-text-color;

    /**
     * Add an m-dash character before the <cite> tag.
     */

    &:before {
      content: "\2014 \0020";
    }

    a {
      color: @blockquote-cite-anchor-color;
    }
  }
}


================================================
FILE: base/code.less
================================================
/* ========================================================================== *\
   Base -> Code ($base-code)
\* ========================================================================== */

/**
 * 1. Correct `font-family` set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
  font-family: @font-family-monospace; /* 1 */
  .to-rem(font-size, @code-font-size);
  font-style: @code-font-style;
  color: @code-text-color;
}

code {
  margin: 0;
  .to-rem(padding, @code-padding);
  white-space: nowrap;
  .to-rem(border, @code-border-width, @code-border-style @code-border-color);
  .to-rem(border-radius, @code-border-radius);
  background-color: @code-background-color;
}

kbd {
  position: relative;
  top: -1px;
  margin-bottom: 1px;
  .to-rem(padding, @code-padding);
  white-space: nowrap;
  .to-rem(border, @code-border-width, @code-border-style @code-border-color);
  .to-rem(border-radius, @code-border-radius);
  background-color: @code-background-color;
  box-shadow: 0 1px 0 @code-border-color, inset 0 0 0 1px @color-white;
}

pre {
  position: relative;
  overflow: auto;
  .to-rem(padding, @code-pre-padding);
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  tab-size: 4;
  hyphens: none;
  color: @code-pre-text-color;
  background: @code-pre-background-color;

  /**
   * Reset the above <code> styles when nested inside <pre> tags.
   */

  code {
    display: block;
    overflow: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    white-space: pre;
    color: inherit;
    border: none;
    border-radius: 0;
    background: transparent;
  }
}


================================================
FILE: base/debug.less
================================================
/* ========================================================================== *\
   Base -> Debug ($base-debug)
\* ========================================================================== */

//
// DO NOT USE THIS STYLESHEET IN PRODUCTION!
//
// This stylesheet is for developers only. It can help you visually detect any
// nesting issues, invalid markup, or inaccessible code in your project.
//
// @link http://cbrac.co/1C01g8C
//
// DO NOT USE THIS STYLESHEET IN PRODUCTION!
//

@debug-outline-width: 5px;
@debug-outline-style: solid;
@debug-outline-color-error: red;
@debug-outline-color-warning: yellow;

//
// Debug
//
// red    = error
// yellow = warning
// none   = no issues
//

/**
 * Images require `alt` attributes, empty `alt` is fine but should be
 * double-checked, no `alt` is bad.
 */

img {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}

img[alt] {
  outline: none !important;
}

img[alt=""] {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}

/**
 * Double-check any links whose `href` is something questionable.
 */

a[href=""],
a[href="#"],
a[href*="javascript"] {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}

/**
 * Try to avoid using the `target` attribute.
 */

a[target] {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}


/**
 * Ensure any lists only contain <li> as children.
 */

ul,
ol {
  > *:not(li) {
    outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
  }
}

/**
 * It's always nice to give <th> the `scope` attribute.
 */

th {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}

th[scope] {
  outline: none !important;
}


/**
 * <tr> as child of <table> ain't great, did you need a <thead> or <tbody>?
 */

table > tr {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}


/**
 * `tfoot` needs to come *before* `tbody`.
 */

tbody + tfoot {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}


/**
 * Forms require `action` attributes.
 */

form {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}

form[action] {
  outline: none !important;
}


/**
 * Various form-field types have required attributes. <input> needs a `type`
 * attribute, <textarea> needs `rows` and `cols` attributes, and submit buttons
 * need a `value` attribute.
 */

textarea,
input {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}

input[type] {
  outline: none !important;
}

textarea[rows][cols] {
  outline: none !important;
}

input[type=submit] {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}

input[type=submit][value] {
  outline: none !important;
}


/**
 * Avoid inline styles wherever possible.
 */

[style] {
  outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}


================================================
FILE: base/embedded-content.less
================================================
/* ========================================================================== *\
   Base -> Embedded Content ($base-embedded-content)
\* ========================================================================== */

/**
 * Remove the gap between audio, canvas, iframes, images, videos and the bottom
 * of their containers.
 *
 * @link http://cbrac.co/Q6smqV
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Fluid-width <audio>, <canvas>, & <video> elements.
 */

audio,
canvas,
video {
  width: 100%;
  &:focus {
    outline: 1px dotted @color-black;
  }
}

/**
 * Fluid-width media elements that maintain their aspect ratios.
 */

embed,
img,
object,
video {
  max-width: 100%;
  height: auto;
}

embed,
object {
  height: 100%;
}

/**
 * Reset `margin` for figure elements.
 */

figure {
  margin-right: auto;
  margin-left: auto;
}

/**
 * Set <img> elements as block-level inside <figure> elements.
 */

figure > img {
  display: block;
}

/**
 * Give <figcaption> elements some default styles.
 */

figcaption {
  .to-rem(font-size, @font-size-xx-small);
  font-style: italic;
  .to-rem(margin-top, @figcaption-margin-top);
  color: @figcaption-text-color;
}

/**
 * 1. If images do not load, the `alt` text will be visually offset and more
 *    noticeable.
 * 2. Improve image resize rendering in IE6/7.
 *
 *    @link http://cbrac.co/11ciIZL
 */

img {
  font-style: italic;              /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}


================================================
FILE: base/form-elements.less
================================================
/* ========================================================================== *\
   Base -> Form Elements ($base-form-elements)
\* ========================================================================== */

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where [2] destroys native
 *    <audio> and <video> controls.
 * 2. Improve usability and consistency of cursor style between
 *    image-type <input> and others.
 */

button,
html input[type="button"], /* 1 */
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
  cursor: pointer;         /* 2 */
}

/**
 * Fix vertical alignment inconsistencies with certain form inputs.
 */

input[type="color"],
input[type="range"] {
  vertical-align: middle;
}

/**
 * 1. Set `min-width` to 0 to avoid overflow issues in Chrome.
 * 2. Remove default `margin`, `padding`, and `border` across browsers.
 */

fieldset {
  min-width: 0; /* 1 */
  margin: 0;    /* 2 */
  padding: 0;   /* 2 */
  border: 0;    /* 2 */
}

/**
 * 1. Set checkbox, image, and radio inputs to `inline-block`, by default.
 */

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  display: inline-block; /* 1 */
  width: auto;
}

/**
 * 1. Constrict `max-width` for file inputs to avoid overflow issues.
 */

input[type="file"] {
  max-width: 100%; /* 1 */
  cursor: pointer;
}

/**
 * 1. Set search inputs to `border-box` by default. This overrides the
 *    `content-box` value set by normalize.css.
 * 2. Remove rounded corners from iOS search inputs by overriding `appearance:
 *    textfield` from normalize.css.
 *
 *    @link http://cbrac.co/1xgTke2
 */

input[type="search"] {
  box-sizing: border-box; /* 1 */
  appearance: none;       /* 2 */
}

/**
 * Remove rounded corners that iOS and Chrome apply to <input> buttons and
 * <select> menus.
 */

input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
select {
  border-radius: 0;
}

/**
 * 1. Force Safari to give <legend> elements 100% width.
 * 2. Remove `padding` so people aren't caught out if they zero out <fieldset>.
 * 3. Correct `color` not being inherited in IE 8/9.
 */

legend {
  font-weight: 700;
  width: 100%;                    /* 1 */
  padding: 0;                     /* 2 */
  color: @form-legend-text-color; /* 3 */
  border: 0;
}

/**
 * 1. Restrict width to 100% of its parent to avoid horizontal overflow issues.
 * 2. Force `height: auto;` for <textarea> across browsers.
 * 3. <textarea> elements should only resize vertically.
 */

textarea {
  max-width: 100%;  /* 1 */
  height: auto;     /* 2 */
  resize: vertical; /* 3 */
}




================================================
FILE: base/headings.less
================================================
/* ========================================================================== *\
   Base -> Headings ($base-headings)
\* ========================================================================== */

/**
 * NOTE: Use the `text-rendering` property with caution.
 *
 * @link http://cbrac.co/SJt8p1
 * @link http://cbrac.co/1Fjv7IR
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: @heading-font-family;
  font-weight: @heading-font-weight;
  color: @heading-text-color;
}

h1,
.h1 {
  .to-rem(font-size, @font-size-heading-1);
}

h2,
.h2 {
  .to-rem(font-size, @font-size-heading-2);
}

h3,
.h3 {
  .to-rem(font-size, @font-size-heading-3);
}

h4,
.h4 {
  .to-rem(font-size, @font-size-heading-4);
}

h5,
.h5 {
  .to-rem(font-size, @font-size-heading-5);
}

h6,
.h6 {
  .to-rem(font-size, @font-size-heading-6);
}


================================================
FILE: base/horizontal-rules.less
================================================
/* ========================================================================== *\
   Base -> Horizontal Rules ($base-horizontal-rules)
\* ========================================================================== */

hr {
  display: block;
  padding: 0;
  border: 0;
  .to-rem(border-top, @hr-border-width, @hr-border-style @hr-border-color);
}


================================================
FILE: base/lists.less
================================================
/* ========================================================================== *\
   Base -> Lists ($base-lists)
\* ========================================================================== */

/**
 * Set some basic styles for definition lists.
 */

dl {
  dt {
    font-weight: @definition-lists-font-weight;
    color: @definition-lists-text-color;
  }
  dd {
    margin: 0;
  }
}

/**
 * Reset the left margin for <ol> and <ul> elements.
 */

ol,
ul {
  li {
    .to-rem(margin-left, @list-item-margin-left);
  }
}

/**
 * Set nested `list-style` types for ordered lists.
 */

ol {
  list-style: decimal;
  & & {
    list-style: upper-alpha;
  }
  & & & {
    list-style: lower-roman;
  }
  & & & & {
    list-style: lower-alpha;
  }
}

/**
 * Remove `margin-bottom` on nested lists.
 */

ol,
ul {
  ol,
  ul {
    margin-bottom: 0;
  }
}


================================================
FILE: base/mixins/antialiasing.less
================================================
// =============================================================================
// Base -> Mixins -> Antialiasing
// =============================================================================

.antialiasing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


================================================
FILE: base/mixins/clearing.less
================================================
// =============================================================================
// Base -> Mixins -> Clearing
// =============================================================================

//
// Clearfix
//
// 1. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
// 2. The space content is one way to avoid an Opera bug when the
//    `contenteditable` attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
//
// @link http://cbrac.co/1FT6aqC
//

.clearfix() {
  &:before,
  &:after {
    display: table; // 1
    content: " ";   // 2
  }
  &:after {
    clear: both;
  }
}


================================================
FILE: base/mixins/font-face.less
================================================
// =============================================================================
// Base -> Mixins -> @font-face
// =============================================================================

//
// Bulletproof @font-face delcarations
//
// @link http://cbrac.co/1KgTgCb
//

.font-face(@ff-name, @ff-file, @ff-weight:normal, @ff-style:normal) {
  @font-face {
    font-family: "@{ff-name}";
    src: url("@{ff-file}.eot");
    src: url("@{ff-file}.eot?#iefix") format("embedded-opentype"),
         url("@{ff-file}.woff2") format("woff2"),
         url("@{ff-file}.woff") format("woff"),
         url("@{ff-file}.ttf") format("truetype"),
         url("@{ff-file}.svg#@{ff-name}") format("svg");
    font-weight: @ff-weight;
    font-style: @ff-style;
  }

  //
  // Chrome for Windows rendering fix
  //
  // @link http://cbrac.co/U4mSbc
  //

  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: "@{ff-name}";
      src: url("@{ff-file}.svg#@{ff-name}") format("svg");
    }
  }
}


================================================
FILE: base/mixins/media-queries.less
================================================
// =============================================================================
// Base -> Mixins -> Media Queries
// =============================================================================

//
// Media query mixins for various screen sizes.
//
// @link http://cbrac.co/1tB2TXR
//

// Extra-small and up
.screen-xs-min(@rules) {
  @media (min-width: @screen-xs-min) {
    @rules();
  }
}

// Extra-small and down (deprecated)
.screen-xs-max(@rules) {
  @media (max-width: @screen-xs-max) {
    @rules();
  }
}

// Extra-small only
.screen-xs(@rules) {
  @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
    @rules();
  }
}

// Small and up
.screen-sm-min(@rules) {
  @media (min-width: @screen-sm-min) {
    @rules();
  }
}

// Small and down (deprecated)
.screen-sm-max(@rules) {
  @media (max-width: @screen-sm-max) {
    @rules();
  }
}

// Small only
.screen-sm(@rules) {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    @rules();
  }
}

// Medium and up
.screen-md-min(@rules) {
  @media (min-width: @screen-md-min) {
    @rules();
  }
}

// Medium and down (deprecated)
.screen-md-max(@rules) {
  @media (max-width: @screen-md-max) {
    @rules();
  }
}

// Medium only
.screen-md(@rules) {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    @rules();
  }
}

// Large and up
.screen-lg-min(@rules) {
  @media (min-width: @screen-lg-min) {
    @rules();
  }
}

// Large and down (deprecated)
.screen-lg-max(@rules) {
  @media (max-width: @screen-lg-max) {
    @rules();
  }
}

// Large only
.screen-lg(@rules) {
  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
    @rules();
  }
}

// Extra-large and up
.screen-xl-min(@rules) {
  @media (min-width: @screen-xl-min) {
    @rules();
  }
}

// Extra-large and down (deprecated)
.screen-xl-max(@rules) {
  @media (max-width: @screen-xl-max) {
    @rules();
  }
}

// Extra-large only
.screen-xl(@rules) {
  @media (min-width: @screen-xl-min) and (max-width: @screen-xl-max) {
    @rules();
  }
}

// Extra-extra-large and up
.screen-xxl-min(@rules) {
  @media (min-width: @screen-xxl-min) {
    @rules();
  }
}

//
// Chain media queries together
//
// Usage:
//
// .my-element {
//   .screen({
//     color: red;    // xs and up
//   },{
//     color: green;  // sm and up
//   },{
//     color: yellow; // md and up
//   },{
//     color: purple; // lg and up
//   },{
//     color: blue;   // xl and up
//   },{
//     color: orange; // xxl and up
//   });
// }
//
// @link http://cbrac.co/1tB2TXR
//

.screens(@rules-xs, @rules-sm, @rules-md, @rules-lg, @rules-xl, @rules-xxl) {
  .screen-xs-min(@rules-xs);
  .screen-sm-min(@rules-sm);
  .screen-md-min(@rules-md);
  .screen-lg-min(@rules-lg);
  .screen-xl-min(@rules-xl);
  .screen-xxl-min(@rules-xxl);
}

//
// Generate breakpoint classes
//
// Usage:
//
// .breakpoint-prefixes({
//   .@{breakpoint-prefix}my-class{ background: red; }
// });
//

.breakpoint-prefixes(@rules) {
  @breakpoint-prefixes: xs, sm, md, lg, xl, xxl;
  .write-classes(@class, @rules) {
    & {
      @breakpoint-prefix: @class;
      @rules();
    }
  }
  .breakpoint-prefixes-iterate(@i: length(@breakpoint-prefixes), @rules) when (@i > 0) {
    .breakpoint-prefixes-iterate(@i - 1, @rules);
    @prefix: extract(@breakpoint-prefixes, @i);
    @prefix-class: ~"@{prefix}-";
    & when (@prefix = xs) {
      .screen-xs-min({ .write-classes(@prefix-class, @rules); })
    }
    & when (@prefix = sm) {
      .screen-sm-min({ .write-classes(@prefix-class, @rules); })
    }
    & when (@prefix = md) {
      .screen-md-min({ .write-classes(@prefix-class, @rules); })
    }
    & when (@prefix = lg) {
      .screen-lg-min({ .write-classes(@prefix-class, @rules); })
    }
    & when (@prefix = xl) {
      .screen-xl-min({ .write-classes(@prefix-class, @rules); })
    }
    & when (@prefix = xxl) {
      .screen-xxl-min({ .write-classes(@prefix-class, @rules); })
    }
  }
  .write-classes(~'', @rules);
  .breakpoint-prefixes-iterate(length(@breakpoint-prefixes), @rules);
}


================================================
FILE: base/mixins/momentum-scrolling.less
================================================
// =============================================================================
// Base -> Mixins -> Momentum Scrolling
// =============================================================================

.momentum-scrolling() {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


================================================
FILE: base/mixins/text-truncate.less
================================================
// =============================================================================
// Base -> Mixins -> Text Truncate
// =============================================================================

.text-truncate() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


================================================
FILE: base/mixins/to-rem.less
================================================
// =============================================================================
// Base -> Mixins -> to-REM
// =============================================================================

@to-rem-font-size: 16;

//
// Convert unitless pixel values to rem.
//
// Usage
//
// .selector {
//   .to-rem(left, 1);
//   .to-rem(padding, 10 5 12);
//   .to-rem(border, 1, solid green);
//   .to-rem(box-shadow, 1 1 0 -1, rgba(0, 0, 0, 0.3));
//   .to-rem(margin, 30 auto 0);
// }
//
// @link http://cbrac.co/15UAPWx
//

.to-rem(@property, @size-values, @rest-link-params : false) {

  @property-rem: ~'/*rem*/'@property;
  @property-px: ~'/*px*/'@property;

  .to-rem-loop();

  .to-rem-loop(@amount : length(@size-values), @i : 1) when (@i =< @amount) {

    @size-value: extract(@size-values, @i);

    & when (iskeyword(@size-value)) {
      @px-value  : @size-value;
      @rem-value : @size-value;
      @{property-px}+_ : ~"@{px-value}";
      @{property-rem}+_ : ~"@{rem-value}";
    }

    & when not (iskeyword(@size-value)) {

      @px-value  : @size-value;
      @rem-value : @size-value / @to-rem-font-size;

      & when not (@px-value = 0) {
        @{property-px}+_ : ~"@{px-value}px";
      }

      & when (@px-value = 0) {
        @{property-px}+_ : @px-value;
      }

      & when not (@rem-value = 0) {
        @{property-rem}+_ : ~"@{rem-value}rem";
      }

      & when (@rem-value = 0) {
        @{property-rem}+_ : @rem-value;
      }

    }

    .to-rem-loop(@amount, (@i + 1));

  }

  & when not (@rest-link-params = false) {
    @{property-px}+_ : @rest-link-params;
  }

  & when not (@rest-link-params = false) {
    @{property-rem}+_ : @rest-link-params;
  }

}


================================================
FILE: base/mixins/vertically-centered.less
================================================
// =============================================================================
// Base -> Mixins -> Vertically Centered
// =============================================================================

.vertically-centered() {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


================================================
FILE: base/normalize.less
================================================
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


================================================
FILE: base/print.less
================================================
/* ========================================================================== *\
   Base -> Print ($base-print)
\* ========================================================================== */

/**
 * Print styles extracted from HTML5-Boilerplate
 *
 * @link http://cbrac.co/1RvNULl
 */

@media print {
  /* 1. Black prints faster - http://cbrac.co/XvusCs */
  * {
    color: @print-text-color !important; /* 1 */
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  @page {
    margin: 0.5cm;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* Don’t show links for images, or javascript/internal links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  blockquote,
  pre {
    border: 1px solid @color-gray-dark;

    page-break-inside: avoid;
  }

  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  img,
  tr {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  /* 1. http://cbrac.co/Q6s1o2 */
  thead {
    display: table-header-group; /* 1 */
  }
}


================================================
FILE: base/reset.less
================================================
/* ========================================================================== *\
   Base -> Reset ($base-reset)
\* ========================================================================== */

//
// Styles
//

/**
 * `border-box`... ALL THE THINGS!
 *
 * @link http://cbrac.co/RQrDL5
 */

html {
  box-sizing: border-box;
}

/**
 * Inheriting the `box-sizing` property is a better practice.
 *
 * @link http://cbrac.co/1tqPFsy
 */

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

/**
 * Remove margins, paddings, and borders from HTML elements.
 *
 * @link http://cbrac.co/1Ev9etR
 */

a,
abbr,
acronym,
address,
applet,
article,
aside,
b,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
u,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
}

/**
 * Remove default border for <iframe> elements.
 *
 * @link http://cbrac.co/1CVyNTj
 */

iframe {
  border: 0;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 *
 * It is okay to use `!important` here because we always want this rule to take
 * precedence.
 *
 * @link http://cbrac.co/1Evazku
 */

[tabindex="-1"]:focus {
  outline: none !important;
}


================================================
FILE: base/root.less
================================================
/* ========================================================================== *\
   Base -> Root ($base-root)
\* ========================================================================== */

/**
 * The <html> element.
 *
 * 1. Set the default `font-size` and `line-height` for the project based on
      variables set previously. The `font-size` is represented in `rem`s, and
      the `line-height` is represented as a unitless value.
*
 * 2. Force a vertical scrollbar.
 *
 *    @link http://cbrac.co/163MspB
 *
 * 3. Ensure the <html> element's `height` is at least the viewport height.
 *
 * NOTES:
 *
 * - Use `text-rendering` with caution.
 *
 *   @link http://cbrac.co/SJt8p1
 *
 * - Avoid the webkit anti-aliasing trap.
 *
 *   @link http://cbrac.co/TAdhbH
 *
 * - IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the viewport
 *   <meta> tag is used.
 *
 *   @link http://cbrac.co/1cFrAvl
 */

html {
  font-family: @font-family-sans-serif;
  .to-rem(font-size, @font-size);  /* 1 */
  line-height: @line-height-ratio; /* 1 */
  overflow-y: scroll;              /* 2 */
  height: 100%;                    /* 3 */
  background-color: @root-background-color;
  color: @root-text-color;
}

/**
 * The <body> element.
 *
 * 1. Ensure the <body> element's `min-height` is at least the viewport height.
 */

body {
  min-height: 100%; /* 1 */
}

/**
 * Set a consistent margin for common elements to maintain vertical rhythm.
 */

blockquote,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
hr,
menu,
ol,
p,
pre,
summary,
table,
ul {
  .to-rem(margin-bottom, @spacing-base);
}

/**
 * Add word wrapping and basic hyphenation to common elements.
 */

caption,
p,
table,
td,
textarea,
th {
  word-wrap: break-word;
  hyphens: auto;
}

/**
 * NOTE: Do not remove :focus styles! It’s an accessibility no-no.
 *
 * @link http://cbrac.co/1cNYD2l
 */

:focus {
  .to-rem(outline, @root-focus-outline-fallback-width, @root-focus-outline-fallback-style @root-focus-outline-fallback-color);
  .to-rem(outline, @root-focus-outline-width, @root-focus-outline-style @root-focus-outline-color);
}


================================================
FILE: base/tables.less
================================================
/* ========================================================================== *\
   Base -> Tables ($base-tables)
\* ========================================================================== */

table {
  width: 100%;
  empty-cells: show;
}

th,
tfoot td {
  text-align: left;
}

th,
td {
  overflow: visible;
}


================================================
FILE: base/text-elements.less
================================================
/* ========================================================================== *\
   Base -> Text Elements ($base-text-elements)
\* ========================================================================== */

/**
 * Add a help cursor to elements that need one.
 */

abbr,
acronym,
dfn[title] {
  cursor: help;
}

/**
 * Remove `text-decoration` on links inside <abbr> elements, since there are
 * already border styles on the <abbr> element.
 */

abbr a {
  text-decoration: none;
}

/**
 * Set <acronym> elements to be uppercase by default.
 */

acronym {
  text-transform: uppercase;
}

/**
 * Set some basic styles for <del> tags.
 */

del {
  font-style: @text-del-font-style;
  text-decoration: @text-del-text-decoration;
  color: @text-del-text-color;
}

/**
 * Give <details> elements a pointer cursor.
 */

details {
  cursor: pointer;
}

/**
 * Set some basic styles for definition lists.
 */

dl {
  dt {
    font-weight: @text-dt-font-weight;
    color: @text-dt-text-color;
  }
  dd {
    margin: 0;
  }
}

/**
 * Ensure commonly italicized elements are italicized.
 */

em,
i,
cite {
  font-style: italic;
}

/**
 * Address styling not present in IE9.
 */

ins,
mark {
  text-decoration: none;
  color: @text-highlights-text-color;
  background: @text-highlights-bg-color;
}


================================================
FILE: base/variables.less
================================================
// =============================================================================
// Base -> Variables
// =============================================================================

//
// Variables
//
// This file contains all of the variables used in this framework. You should
// not modify these variables directly. Instead, you should create your own LESS
// file (e.g. `my-project.less`) that imports this framework, then create
// your own variable overrides file (e.g. `variables-custom.less`), and import
// your variables file after you've imported this framework so that LESS
// processes your variables overrides instead of the default variables.
//
// @link http://cbrac.co/1LNVWut
//

//
// Colors -> Grayscale
//

@color-black:         #000000;
@color-gray-darkest:  lighten(@color-black, 13.5%);  // #222222
@color-gray-darker:   lighten(@color-black, 26.5%);  // #444444
@color-gray-dark:     lighten(@color-black, 46.7%);  // #777777
@color-gray:          lighten(@color-black, 66.5%);  // #aaaaaa
@color-gray-light:    lighten(@color-black, 87%);    // #dedede
@color-gray-lighter:  lighten(@color-black, 93.75%); // #efefef
@color-gray-lightest: lighten(@color-black, 97.25%); // #f8f8f8
@color-white:         #ffffff;

//
// Colors -> Brand
//

@color-primary: #1fa3ec;

//
// Typography -> Font Sizes
//

// Typography -> Font Sizes -> Base

@font-size: 16;

// Typography -> Font Sizes -> Smaller

@font-size-small: (@font-size - 1);
@font-size-x-small: (@font-size - 2);
@font-size-xx-small: (@font-size - 3);
@font-size-xxx-small: (@font-size - 4);

// Typography -> Font Sizes -> Larger

@font-size-large: (@font-size + 1);
@font-size-x-large: (@font-size + 2);
@font-size-xx-large: (@font-size + 3);
@font-size-xxx-large: (@font-size + 4);

// Typography -> Font Sizes -> 100%

@font-size-100: 100%;

// Typography -> Font Sizes -> 0

@font-size-0: 0;

//
// Typography -> Headings
//

@font-size-heading-1: 36;
@font-size-heading-2: 30;
@font-size-heading-3: 24;
@font-size-heading-4: 20;
@font-size-heading-5: 16;
@font-size-heading-6: 14;

//
// Typography -> Line height
//

@line-height: 24;
@line-height-ratio: (@line-height / @font-size);

//
// Typography -> Fonts
//

@font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Consolas, "Liberation Mono", Courier, monospace;

//
// Spacing -> Base
//
// The base spacing unit is set equal to the `line-height` by default. This helps
// create a consistent vertical rhythm throughout the framework.
//

@spacing-base: @line-height;

//
// Spacing -> Smaller
//

// Spacing -> Half
@spacing-half: (@spacing-base / 2);

// Spacing -> Thirds
@spacing-third: (@spacing-base / 3);
@spacing-two-thirds: (@spacing-third * 2);

// Spacing -> Fourths
@spacing-fourth: (@spacing-base / 4);
@spacing-three-fourths: (@spacing-fourth * 3);

// Spacing -> Fifths
@spacing-fifth: (@spacing-base / 5);
@spacing-two-fifths: (@spacing-fifth * 2);
@spacing-three-fifths: (@spacing-fifth * 3);
@spacing-four-fifths: (@spacing-fifth * 4);

// Spacing -> Sixths
@spacing-sixth: (@spacing-base / 6);
@spacing-five-sixths: (@spacing-sixth * 5);

// Spacing -> Micro
@spacing-micro: 2;

// Spacing -> 1px

@spacing-1px: 1;

//
// Spacing -> Larger
//

// Spacing -> + Half
@spacing-base-plus-half: (@spacing-base + @spacing-half);

// Spacing -> + Thirds
@spacing-base-plus-third: (@spacing-base + @spacing-third);
@spacing-base-plus-two-thirds: (@spacing-base + (@spacing-third * 2));

// Spacing -> + Fourths
@spacing-base-plus-fourth: (@spacing-base + @spacing-fourth);
@spacing-base-plus-three-fourths: (@spacing-base + (@spacing-fourth * 3));

// Spacing -> + Fifths
@spacing-base-plus-fifth: (@spacing-base + @spacing-fifth);
@spacing-base-plus-two-fifths: (@spacing-base + (@spacing-fifth * 2));
@spacing-base-plus-three-fifths: (@spacing-base + (@spacing-fifth * 3));
@spacing-base-plus-four-fifths: (@spacing-base + (@spacing-fifth * 4));

// Spacing -> + Sixths
@spacing-base-plus-sixth: (@spacing-base + @spacing-sixth);
@spacing-base-plus-five-sixths: (@spacing-base + (@spacing-sixth * 5));

// Spacing -> + Micro
@spacing-base-plus-micro: (@spacing-base + 2);

// Spacing -> + 1px
@spacing-base-plus-1px: (@spacing-base + 1);

// Spacing -> Double
@spacing-double: (@spacing-base * 2);

// Spacing -> Triple
@spacing-triple: (@spacing-base * 3);

// Spacing -> Quadruple
@spacing-quadruple: (@spacing-base * 4);

// Spacing -> Macro
@spacing-macro: (@spacing-base * 8);

// Spacing -> None (0)
@spacing-none: 0;

//
// Breakpoints -> Base
//

@screen-xs: 480px;
@screen-sm: 600px;
@screen-md: 768px;
@screen-lg: 960px;
@screen-xl: 1140px;
@screen-xxl: 1380px;

//
// Breakpoints -> Min-width
//

@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xl-min: @screen-xl;
@screen-xxl-min: @screen-xxl;

//
// Breakpoints -> Max-width
//

@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-max: (@screen-xl-min - 1);
@screen-xl-max: (@screen-xxl-min - 1);

//
// Borders -> Border Radius
//

@border-radius-base: 3;

//
// Z-Index
//

@z-index-1: 100;
@z-index-2: 200;
@z-index-3: 300;
@z-index-4: 400;
@z-index-5: 500;
@z-index-6: 600;
@z-index-7: 700;
@z-index-8: 800;
@z-index-9: 900;
@z-index-10: 1000;

//
// Base -> Root
//

@root-background-color: @color-white;
@root-text-color: @color-gray-darker;
@root-focus-outline-fallback-width: @spacing-1px;
@root-focus-outline-fallback-style: dotted;
@root-focus-outline-fallback-color: @color-gray-darkest;
@root-focus-outline-width: 5;
@root-focus-outline-style: auto;
@root-focus-outline-color: -webkit-focus-ring-color;

//
// Base -> Selections
//

@selection-background-color: #b3d4fc;
@selection-inactive-background-color: @color-gray-light;

//
// Base -> Anchors
//

@anchor-text-color: #069;


//
// Base -> Text Elements
//

@text-del-font-style: italic;
@text-del-text-decoration: line-through;
@text-del-text-color: @color-gray-dark;
@text-dt-font-weight: 700;
@text-dt-text-color: @color-gray-darkest;
@text-highlights-bg-color: #ff9;
@text-highlights-text-color: @color-gray-darkest;

//
// Base -> Headings
//

@heading-font-family: @font-family-sans-serif;
@heading-font-weight: 700;
@heading-text-color: @color-gray-darkest;

//
// Base -> Blockquotes
//

@blockquote-font-family: @font-family-serif;
@blockquote-font-style: italic;
@blockquote-font-size: @font-size-heading-3;
@blockquote-text-color: @color-gray-dark;
@blockquote-margin-left: @spacing-base;
@blockquote-padding-left: @spacing-base;
@blockquote-border-width: @spacing-fourth;
@blockquote-border-style: solid;
@blockquote-border-color: @color-gray-light;
@blockquote-cite-font-family: @font-family-sans-serif;
@blockquote-cite-font-style: normal;
@blockquote-cite-font-size: @font-size-x-small;
@blockquote-cite-text-color: @color-gray-dark;
@blockquote-cite-anchor-color: @color-gray-dark;

//
// Base -> Lists
//

@definition-lists-font-weight: 700;
@definition-lists-text-color: @color-gray-darkest;
@list-item-margin-left: @spacing-base;

//
// Base -> Horizontal Rules
//

@hr-border-width: @spacing-1px;
@hr-border-style: solid;
@hr-border-color: @color-gray-light;

//
// Base -> Code
//

@code-font-size: @font-size-x-small;
@code-font-style: normal;
@code-text-color: @color-gray-darkest;
@code-background-color: @color-gray-lightest;
@code-border-width: @spacing-1px;
@code-border-style: solid;
@code-border-color: @color-gray-light;
@code-border-radius: @border-radius-base;
@code-padding: (@spacing-micro) (@spacing-fourth);
@code-pre-padding: @spacing-base;
@code-pre-text-color: @color-gray-darker;
@code-pre-background-color: @color-gray-lightest;

//
// Base -> Embedded Content
//

@figcaption-text-color: @color-gray-dark;
@figcaption-margin-top: @spacing-third;

//
// Base -> Form elements
//

@form-legend-text-color: @color-gray-darkest;

//
// Base -> Print
//

@print-text-color: @color-black;

//
// Layout -> Wrappers
//

@wrapper-width: 94%;
@wrapper-max-width: 1024;

//
// Layout -> Grids
//

@grid-gutter-base: @spacing-base;
@grid-gutter-half: @spacing-half;
@grid-gutter-double: @spacing-double;
@grid-gutter-1px: @spacing-1px;

//
// Layout -> Boxes
//

@box-padding: @spacing-base;
@box-bg-color: @color-gray-lighter;
@box-border-width: @spacing-1px;
@box-border-style: solid;
@box-border-color: @color-gray-light;
@box-border-radius: @border-radius-base;
@box-raise-box-shadow-blur: @spacing-third;
@box-sink-box-shadow-blur: @spacing-third;

//
// Objects -> Buttons
//

@btn-font-family: inherit;
@btn-font-weight: 700;
@btn-line-height: @line-height-ratio;
@btn-padding: 10 14;
@btn-text-color: @color-gray-darker;
@btn-background-color: @color-gray-light;
@btn-border-radius: @border-radius-base;
@btn-focus-outline-width: thin;
@btn-focus-outline-style: dotted;
@btn-focus-outline-color: @color-gray-darkest;
@btn-xs-font-size: @font-size-xxx-small;
@btn-xs-padding: @spacing-sixth @spacing-third;
@btn-sm-font-size: @font-size-xx-small;
@btn-sm-padding: @spacing-fourth 10;
@btn-lg-font-size: @font-size-xxx-large;
@btn-lg-padding: @spacing-two-thirds @spacing-base;
@btn-primary-text-color: @color-white;
@btn-primary-bg-color: @color-primary;
@btn-group-margin: @spacing-none @spacing-micro;
@btn-lg-group-margin: @spacing-none @spacing-sixth;

//
// Objects -> Forms
//

@form-label-margin: @spacing-sixth;
@form-input-line-height: @line-height-ratio;
@form-input-height: 44;
@form-input-padding: @spacing-third;
@form-input-text-color: @color-gray-darkest;
@form-input-border-width: @spacing-1px;
@form-input-border-style: solid;
@form-input-border-color: @color-gray-light;
@form-input-border-radius: @border-radius-base;
@form-input-focus-border-color: @color-primary;
@form-select-padding: 10;
@form-select-background-color: @color-gray-lightest;

//
// Objects -> Lists
//

@list-inline-delimiter-content: ",\00A0"; // Comma

//
// Objects -> Tables
//

@table-caption-font-style: italic;
@table-caption-font-weight: 700;
@table-header-footer-text-color: @color-gray-darkest;
@table-header-footer-bg-color: @color-gray-lighter;
@table-caption-padding-bottom: @spacing-sixth;
@table-cell-padding: @spacing-third;
@table-border-width: @spacing-1px;
@table-border-style: solid;
@table-border-color: @color-gray-light;
@table-stripe-background-color: @color-gray-lightest;


================================================
FILE: bower.json
================================================
{
  "name": "cardinal",
  "homepage": "http://cardinalcss.com",
  "main": "cardinal.css",
  "authors": [
    "Chris Bracco"
  ],
  "description": "Cardinal is a modular, 'mobile-first' CSS framework built with performance and scalability in mind.",
  "keywords": [
    "cardinal",
    "css",
    "less",
    "modular",
    "mobile-first",
    "framework",
    "responsive"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "package.json",
    "CONTRIBUTING.md"
  ]
}


================================================
FILE: cardinal.css
================================================
/*! cardinalcss v3.7.0 | MIT License | http://cardinalcss.com */
@charset "UTF-8";
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/* ========================================================================== *\
   Base -> Reset ($base-reset)
\* ========================================================================== */
/**
 * `border-box`... ALL THE THINGS!
 *
 * @link http://cbrac.co/RQrDL5
 */
html {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
/**
 * Inheriting the `box-sizing` property is a better practice.
 *
 * @link http://cbrac.co/1tqPFsy
 */
*,
*:before,
*:after {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
}
/**
 * Remove margins, paddings, and borders from HTML elements.
 *
 * @link http://cbrac.co/1Ev9etR
 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
b,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
u,
ul,
var {
  margin: 0;
  padding: 0;
  border: 0;
}
/**
 * Remove default border for <iframe> elements.
 *
 * @link http://cbrac.co/1CVyNTj
 */
iframe {
  border: 0;
}
/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 *
 * It is okay to use `!important` here because we always want this rule to take
 * precedence.
 *
 * @link http://cbrac.co/1Evazku
 */
[tabindex="-1"]:focus {
  outline: none !important;
}
/* ========================================================================== *\
   Base -> Root ($base-root)
\* ========================================================================== */
/**
 * The <html> element.
 *
 * 1. Set the default `font-size` and `line-height` for the project based on
      variables set previously. The `font-size` is represented in `rem`s, and
      the `line-height` is represented as a unitless value.
*
 * 2. Force a vertical scrollbar.
 *
 *    @link http://cbrac.co/163MspB
 *
 * 3. Ensure the <html> element's `height` is at least the viewport height.
 *
 * NOTES:
 *
 * - Use `text-rendering` with caution.
 *
 *   @link http://cbrac.co/SJt8p1
 *
 * - Avoid the webkit anti-aliasing trap.
 *
 *   @link http://cbrac.co/TAdhbH
 *
 * - IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the viewport
 *   <meta> tag is used.
 *
 *   @link http://cbrac.co/1cFrAvl
 */
html {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  /*px*/ font-size: 16px;
  /*rem*/ font-size: 1rem;
  /* 1 */
  line-height: 1.5;
  /* 1 */
  overflow-y: scroll;
  /* 2 */
  height: 100%;
  /* 3 */
  background-color: #ffffff;
  color: #444444;
}
/**
 * The <body> element.
 *
 * 1. Ensure the <body> element's `min-height` is at least the viewport height.
 */
body {
  min-height: 100%;
  /* 1 */
}
/**
 * Set a consistent margin for common elements to maintain vertical rhythm.
 */
blockquote,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
hr,
menu,
ol,
p,
pre,
summary,
table,
ul {
  /*px*/ margin-bottom: 24px;
  /*rem*/ margin-bottom: 1.5rem;
}
/**
 * Add word wrapping and basic hyphenation to common elements.
 */
caption,
p,
table,
td,
textarea,
th {
  word-wrap: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}
/**
 * NOTE: Do not remove :focus styles! It’s an accessibility no-no.
 *
 * @link http://cbrac.co/1cNYD2l
 */
:focus {
  /*px*/ outline: 1px dotted #222222 5px auto -webkit-focus-ring-color;
  /*rem*/ outline: 0.0625rem dotted #222222 0.3125rem auto -webkit-focus-ring-color;
}
/* ========================================================================== *\
   Base -> Anchors ($base-anchors)
\* ========================================================================== */
a {
  text-decoration: underline;
  color: #069;
}
a:hover,
a:active,
a:focus {
  text-decoration: none;
}
/* ========================================================================== *\
   Base -> Text Elements ($base-text-elements)
\* ========================================================================== */
/**
 * Add a help cursor to elements that need one.
 */
abbr,
acronym,
dfn[title] {
  cursor: help;
}
/**
 * Remove `text-decoration` on links inside <abbr> elements, since there are
 * already border styles on the <abbr> element.
 */
abbr a {
  text-decoration: none;
}
/**
 * Set <acronym> elements to be uppercase by default.
 */
acronym {
  text-transform: uppercase;
}
/**
 * Set some basic styles for <del> tags.
 */
del {
  font-style: italic;
  text-decoration: line-through;
  color: #777777;
}
/**
 * Give <details> elements a pointer cursor.
 */
details {
  cursor: pointer;
}
/**
 * Set some basic styles for definition lists.
 */
dl dt {
  font-weight: 700;
  color: #222222;
}
dl dd {
  margin: 0;
}
/**
 * Ensure commonly italicized elements are italicized.
 */
em,
i,
cite {
  font-style: italic;
}
/**
 * Address styling not present in IE9.
 */
ins,
mark {
  text-decoration: none;
  color: #222222;
  background: #ff9;
}
/* ========================================================================== *\
   Base -> Headings ($base-headings)
\* ========================================================================== */
/**
 * NOTE: Use the `text-rendering` property with caution.
 *
 * @link http://cbrac.co/SJt8p1
 * @link http://cbrac.co/1Fjv7IR
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 700;
  color: #222222;
}
h1,
.h1 {
  /*px*/ font-size: 36px;
  /*rem*/ font-size: 2.25rem;
}
h2,
.h2 {
  /*px*/ font-size: 30px;
  /*rem*/ font-size: 1.875rem;
}
h3,
.h3 {
  /*px*/ font-size: 24px;
  /*rem*/ font-size: 1.5rem;
}
h4,
.h4 {
  /*px*/ font-size: 20px;
  /*rem*/ font-size: 1.25rem;
}
h5,
.h5 {
  /*px*/ font-size: 16px;
  /*rem*/ font-size: 1rem;
}
h6,
.h6 {
  /*px*/ font-size: 14px;
  /*rem*/ font-size: 0.875rem;
}
/* ========================================================================== *\
   Base -> Lists ($base-lists)
\* ========================================================================== */
/**
 * Set some basic styles for definition lists.
 */
dl dt {
  font-weight: 700;
  color: #222222;
}
dl dd {
  margin: 0;
}
/**
 * Reset the left margin for <ol> and <ul> elements.
 */
ol li,
ul li {
  /*px*/ margin-left: 24px;
  /*rem*/ margin-left: 1.5rem;
}
/**
 * Set nested `list-style` types for ordered lists.
 */
ol {
  list-style: decimal;
}
ol ol {
  list-style: upper-alpha;
}
ol ol ol {
  list-style: lower-roman;
}
ol ol ol ol {
  list-style: lower-alpha;
}
/**
 * Remove `margin-bottom` on nested lists.
 */
ol ol,
ul ol,
ol ul,
ul ul {
  margin-bottom: 0;
}
/* ========================================================================== *\
   Base -> Horizontal Rules ($base-horizontal-rules)
\* ========================================================================== */
hr {
  display: block;
  padding: 0;
  border: 0;
  /*px*/ border-top: 1px solid #dedede;
  /*rem*/ border-top: 0.0625rem solid #dedede;
}
/* ========================================================================== *\
   Base -> Blockquotes ($base-blockquotes)
\* ========================================================================== */
blockquote {
  color: #777777;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-style: italic;
  /*px*/ font-size: 24px;
  /*rem*/ font-size: 1.5rem;
  /*px*/ margin-left: 24px;
  /*rem*/ margin-left: 1.5rem;
  /*px*/ padding-left: 24px;
  /*rem*/ padding-left: 1.5rem;
  /*px*/ border-left: 6px solid #dedede;
  /*rem*/ border-left: 0.375rem solid #dedede;
  /**
   * Use <cite> inside blockquotes.
   *
   * @link http://cbrac.co/18LWCOw
   */
}
blockquote p {
  margin: 0;
}
blockquote p + p {
  /*px*/ margin-top: 24px;
  /*rem*/ margin-top: 1.5rem;
}
blockquote cite {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-style: normal;
  /*px*/ font-size: 14px;
  /*rem*/ font-size: 0.875rem;
  color: #777777;
  /**
     * Add an m-dash character before the <cite> tag.
     */
}
blockquote cite:before {
  content: "\2014 \0020";
}
blockquote cite a {
  color: #777777;
}
/* ========================================================================== *\
   Base -> Code ($base-code)
\* ========================================================================== */
/**
 * 1. Correct `font-family` set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: Monaco, Consolas, "Liberation Mono", Courier, monospace;
  /* 1 */
  /*px*/ font-size: 14px;
  /*rem*/ font-size: 0.875rem;
  font-style: normal;
  color: #222222;
}
code {
  margin: 0;
  /*px*/ padding: 2px 6px;
  /*rem*/ padding: 0.125rem 0.375rem;
  white-space: nowrap;
  /*px*/ border: 1px solid #dedede;
  /*rem*/ border: 0.0625rem solid #dedede;
  /*px*/ border-radius: 3px;
  /*rem*/ border-radius: 0.1875rem;
  background-color: #f8f8f8;
}
kbd {
  position: relative;
  top: -1px;
  margin-bottom: 1px;
  /*px*/ padding: 2px 6px;
  /*rem*/ padding: 0.125rem 0.375rem;
  white-space: nowrap;
  /*px*/ border: 1px solid #dedede;
  /*rem*/ border: 0.0625rem solid #dedede;
  /*px*/ border-radius: 3px;
  /*rem*/ border-radius: 0.1875rem;
  background-color: #f8f8f8;
  box-shadow: 0 1px 0 #dedede, inset 0 0 0 1px #ffffff;
}
pre {
  position: relative;
  overflow: auto;
  /*px*/ padding: 24px;
  /*rem*/ padding: 1.5rem;
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  -webkit-hyphens: none;
     -moz-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
  color: #444444;
  background: #f8f8f8;
  /**
   * Reset the above <code> styles when nested inside <pre> tags.
   */
}
pre code {
  display: block;
  overflow: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: pre;
  color: inherit;
  border: none;
  border-radius: 0;
  background: transparent;
}
/* ========================================================================== *\
   Base -> Embedded Content ($base-embedded-content)
\* ========================================================================== */
/**
 * Remove the gap between audio, canvas, iframes, images, videos and the bottom
 * of their containers.
 *
 * @link http://cbrac.co/Q6smqV
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/**
 * Fluid-width <audio>, <canvas>, & <video> elements.
 */
audio,
canvas,
video {
  width: 100%;
}
audio:focus,
canvas:focus,
video:focus {
  outline: 1px dotted #000000;
}
/**
 * Fluid-width media elements that maintain their aspect ratios.
 */
embed,
img,
object,
video {
  max-width: 100%;
  height: auto;
}
embed,
object {
  height: 100%;
}
/**
 * Reset `margin` for figure elements.
 */
figure {
  margin-right: auto;
  margin-left: auto;
}
/**
 * Set <img> elements as block-level inside <figure> elements.
 */
figure > img {
  display: block;
}
/**
 * Give <figcaption> elements some default styles.
 */
figcaption {
  /*px*/ font-size: 13px;
  /*rem*/ font-size: 0.8125rem;
  font-style: italic;
  /*px*/ margin-top: 8px;
  /*rem*/ margin-top: 0.5rem;
  color: #777777;
}
/**
 * 1. If images do not load, the `alt` text will be visually offset and more
 *    noticeable.
 * 2. Improve image resize rendering in IE6/7.
 *
 *    @link http://cbrac.co/11ciIZL
 */
img {
  font-style: italic;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}
/* ========================================================================== *\
   Base -> Form Elements ($base-form-elements)
\* ========================================================================== */
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where [2] destroys native
 *    <audio> and <video> controls.
 * 2. Improve usability and consistency of cursor style between
 *    image-type <input> and others.
 */
button,
html input[type="button"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
  cursor: pointer;
  /* 2 */
}
/**
 * Fix vertical alignment inconsistencies with certain form inputs.
 */
input[type="color"],
input[type="range"] {
  vertical-align: middle;
}
/**
 * 1. Set `min-width` to 0 to avoid overflow issues in Chrome.
 * 2. Remove default `margin`, `padding`, and `border` across browsers.
 */
fieldset {
  min-width: 0;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 2 */
  border: 0;
  /* 2 */
}
/**
 * 1. Set checkbox, image, and radio inputs to `inline-block`, by default.
 */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  display: inline-block;
  /* 1 */
  width: auto;
}
/**
 * 1. Constrict `max-width` for file inputs to avoid overflow issues.
 */
input[type="file"] {
  max-width: 100%;
  /* 1 */
  cursor: pointer;
}
/**
 * 1. Set search inputs to `border-box` by default. This overrides the
 *    `content-box` value set by normalize.css.
 * 2. Remove rounded corners from iOS search inputs by overriding `appearance:
 *    textfield` from normalize.css.
 *
 *    @link http://cbrac.co/1xgTke2
 */
input[type="search"] {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  /* 1 */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* 2 */
}
/**
 * Remove rounded corners that iOS and Chrome apply to <input> buttons and
 * <select> menus.
 */
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
select {
  border-radius: 0;
}
/**
 * 1. Force Safari to give <legend> elements 100% width.
 * 2. Remove `padding` so people aren't caught out if they zero out <fieldset>.
 * 3. Correct `color` not being inherited in IE 8/9.
 */
legend {
  font-weight: 700;
  width: 100%;
  /* 1 */
  padding: 0;
  /* 2 */
  color: #222222;
  /* 3 */
  border: 0;
}
/**
 * 1. Restrict width to 100% of its parent to avoid horizontal overflow issues.
 * 2. Force `height: auto;` for <textarea> across browsers.
 * 3. <textarea> elements should only resize vertically.
 */
textarea {
  max-width: 100%;
  /* 1 */
  height: auto;
  /* 2 */
  resize: vertical;
  /* 3 */
}
/* ========================================================================== *\
   Base -> Tables ($base-tables)
\* ========================================================================== */
table {
  width: 100%;
  empty-cells: show;
}
th,
tfoot td {
  text-align: left;
}
th,
td {
  overflow: visible;
}
/* ========================================================================== *\
   Base -> Print ($base-print)
\* ========================================================================== */
/**
 * Print styles extracted from HTML5-Boilerplate
 *
 * @link http://cbrac.co/1RvNULl
 */
@media print {
  /* 1. Black prints faster - http://cbrac.co/XvusCs */
  * {
    color: #000000 !important;
    /* 1 */
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  @page {
    margin: 0.5cm;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Don’t show links for images, or javascript/internal links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  blockquote,
  pre {
    border: 1px solid #777777;
    page-break-inside: avoid;
  }
  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  img,
  tr {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  /* 1. http://cbrac.co/Q6s1o2 */
  thead {
    display: table-header-group;
    /* 1 */
  }
}
/* ========================================================================== *\
   Layout -> Boxes ($layout-boxes)
\* ========================================================================== */
.box {
  display: block;
  /*px*/ padding: 24px;
  /*rem*/ padding: 1.5rem;
  background-color: #efefef;
}
.box > *:last-child {
  margin-bottom: 0;
}
/**
 * Give `.box` a border style.
 */
.box-border {
  /*px*/ border: 1px solid #dedede;
  /*rem*/ border: 0.0625rem solid #dedede;
}
/**
 * Give `.box` rounded edges.
 */
.box-round {
  /*px*/ border-radius: 3px;
  /*rem*/ border-radius: 0.1875rem;
}
/**
 * Remove padding from default `.box`.
 */
.box-flush {
  padding: 0;
}
/**
 * Give `.box` the appearance of being raised above its surrounding area.
 */
.box-raise {
  /*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  /*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
}
/**
 * Give `.box` the appearance of being sunken beneath its surrounding area.
 */
.box-sink {
  /*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) inset;
  /*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15) inset;
}
/* ========================================================================== *\
   Objects -> Buttons ($objects-buttons)
\* ========================================================================== */
.btn {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  margin: 0;
  /*px*/ padding: 10px 14px;
  /*rem*/ padding: 0.625rem 0.875rem;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: #444444;
  border: 0 none;
  background-color: #dedede;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /**
   * States
   */
}
.btn:hover {
  background-color: #e3e3e3;
}
.btn:active,
.btn.is-active {
  background-color: #d9d9d9;
  /*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset;
  /*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25) inset;
}
.btn:active:focus {
  outline: 0 none;
}
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.50;
  box-shadow: none;
  text-shadow: none;
}
/**
 * Shapes
 */
.btn-round,
input[type="button"].btn-round,
input[type="submit"].btn-round {
  /*px*/ border-radius: 3px;
  /*rem*/ border-radius: 0.1875rem;
}
/**
 * Sizes
 */
.btn-xs {
  /*px*/ font-size: 12px;
  /*rem*/ font-size: 0.75rem;
  /*px*/ padding: 4px 8px;
  /*rem*/ padding: 0.25rem 0.5rem;
}
.btn-sm {
  /*px*/ font-size: 13px;
  /*rem*/ font-size: 0.8125rem;
  /*px*/ padding: 6px 10px;
  /*rem*/ padding: 0.375rem 0.625rem;
}
.btn-block {
  display: block;
}
@media (min-width: 960px) {
  .btn-lg,
  .btn-block {
    /*px*/ font-size: 20px;
    /*rem*/ font-size: 1.25rem;
    /*px*/ padding: 16px 24px;
    /*rem*/ padding: 1rem 1.5rem;
  }
}
/**
 * Colors
 */
.btn-primary {
  color: #ffffff;
  background-color: #1fa3ec;
}
.btn-primary:hover {
  background-color: #32abee;
}
.btn-primary:active,
.btn-primary.is-active {
  background-color: #1399e3;
}
/**
 * Groups
 */
.btn-group .btn {
  /*px*/ margin: 0 2px;
  /*rem*/ margin: 0 0.125rem;
}
.btn-group .btn.btn-lg {
  /*px*/ margin: 0 4px;
  /*rem*/ margin: 0 0.25rem;
}
.btn-group .btn:first-child {
  margin-left: 0;
}
.btn-group .btn:last-child {
  margin-right: 0;
}
/* ========================================================================== *\
   Objects -> Forms ($objects-forms)
\* ========================================================================== */
.form-label {
  display: inline-block;
}
.form-label + .form-input,
.form-label + .form-select,
.form-label + .form-textarea {
  /*px*/ margin-top: 4px;
  /*rem*/ margin-top: 0.25rem;
}
/**
 * Give certain <input>, <select>, and <textarea> elements some default
 * styles
 */
.form-input[type="date"],
.form-input[type="datetime"],
.form-input[type="datetime-local"],
.form-input[type="email"],
.form-input[type="month"],
.form-input[type="number"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="tel"],
.form-input[type="text"],
.form-input[type="time"],
.form-input[type="url"],
.form-input[type="week"],
.form-select,
.form-textarea {
  line-height: 1.5;
  display: block;
  width: 100%;
  /*px*/ height: 44px;
  /*rem*/ height: 2.75rem;
  /*px*/ padding: 8px;
  /*rem*/ padding: 0.5rem;
  color: #222222;
  /*px*/ border: 1px solid #dedede;
  /*rem*/ border: 0.0625rem solid #dedede;
}
.form-input[type="date"]:focus,
.form-input[type="datetime"]:focus,
.form-input[type="datetime-local"]:focus,
.form-input[type="email"]:focus,
.form-input[type="month"]:focus,
.form-input[type="number"]:focus,
.form-input[type="password"]:focus,
.form-input[type="search"]:focus,
.form-input[type="tel"]:focus,
.form-input[type="text"]:focus,
.form-input[type="time"]:focus,
.form-input[type="url"]:focus,
.form-input[type="week"]:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #1fa3ec;
}
/**
 * 1. Increase padding to correct line-height in Firefox
 * 2. Give <select> menus a solid background color
 */
.form-select {
  /*px*/ padding: 10px;
  /*rem*/ padding: 0.625rem;
  /* 1 */
  background: #f8f8f8;
  /* 2 */
}
.form-input-round {
  /*px*/ border-radius: 3px;
  /*rem*/ border-radius: 0.1875rem;
}
/* ========================================================================== *\
   Objects -> Lists ($objects-lists)
\* ========================================================================== */
/**
 * Bare Lists
 *
 * Use to remove default list styles from <ol> and <ul> elements.
 */
.list-bare {
  list-style: none;
}
.list-bare li {
  margin-left: 0;
}
/**
 * Reset Lists
 *
 * Use to remove all list styles from <ol> and <ul> elements.
 */
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-reset li {
  margin-left: 0;
}
/**
 * Inline Lists
 *
 * Create inline-style list items with <ol> and <ul> elements.
 */
.list-inline {
  list-style: none;
  padding: 0;
}
.list-inline li {
  display: inline;
  margin-left: 0;
}
/**
 * Delimited lists
 * Hat tip to @csswizardry for the technique.
 *
 * @link http://cbrac.co/1RvOzMU
 */
.list-inline-delimited > li + li:before {
  content: ",\00A0";
}
/* ========================================================================== *\
   Objects -> Tables ($objects-tables)
\* ========================================================================== */
/**
 * Wrap a <table> with a `.table-container` element to add horizontal scrolling
 * if the <table> contents overflow its grandparent.
 */
.table-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Default, borderless */
.table {
  width: 100%;
  max-width: 100%;
}
.table caption {
  font-weight: 700;
  font-style: italic;
  /*px*/ padding-bottom: 4px;
  /*rem*/ padding-bottom: 0.25rem;
}
.table th,
.table tfoot td {
  font-weight: 700;
  text-align: left;
  color: #222222;
}
.table thead th,
.table tfoot td {
  background-color: #efefef;
}
.table th,
.table td {
  /*px*/ padding: 8px;
  /*rem*/ padding: 0.5rem;
  vertical-align: top;
}
/**
 * Give the <table> element an outer border.
 */
.table-border {
  /*px*/ border: 1px solid #dedede;
  /*rem*/ border: 0.0625rem solid #dedede;
}
/**
 * Give the <table> element inner cell borders.
 */
.table-border-cells th,
.table-border-cells td {
  /*px*/ border-top: 1px solid #dedede;
  /*rem*/ border-top: 0.0625rem solid #dedede;
  /*px*/ border-left: 1px solid #dedede;
  /*rem*/ border-left: 0.0625rem solid #dedede;
}
/**
 * Give Give the <table> inner row borders.
 */
.table-border-rows th,
.table-border-rows td {
  /*px*/ border-top: 1px solid #dedede;
  /*rem*/ border-top: 0.0625rem solid #dedede;
}
/**
 * Remove border on 1st-row cells to avoid a double border.
 */
.table-border.table-border-cells thead:first-child tr:first-child th,
.table-border.table-border-cells thead:first-child tr:first-child td,
.table-border.table-border-rows thead:first-child tr:first-child th,
.table-border.table-border-rows thead:first-child tr:first-child td {
  border-top: 0;
}
/**
 * Remove border on 1st cells in every row to create a grid effect.
 */
.table-border-cells tr th:first-child,
.table-border-cells tr td:first-child {
  border-left: 0;
}
/**
 * Remove border on 1st-row cells to create a grid effect.
 */
.table-border-cells tr:first-child th,
.table-border-cells thead:first-child tr:first-child th {
  border-top: 0;
}
/**
 * Add a bottom border to the last row in the table.
 */
.table-border-rows tr:last-child td {
  /*px*/ border-bottom: 1px solid #dedede;
  /*rem*/ border-bottom: 0.0625rem solid #dedede;
}
/**
 * Alternate `background-color` for all table rows.
 */
.table-striped tbody > tr:nth-child(odd) > td {
  background-color: #f8f8f8;
}
/* ========================================================================== *\
   Layout -> Wrappers ($layout-wrappers)
\* ========================================================================== */
.wrapper {
  width: 94%;
  /*px*/ max-width: 1024px;
  /*rem*/ max-width: 64rem;
  margin: 0 auto;
}
@media print {
  .wrapper {
    width: auto;
  }
}
/**
 * Force `.wrapper` to sit flush with its parent.
 */
.wrapper-flush {
  width: 100%;
}
/**
 * Remove any width constraints from the `.wrapper`.
 */
.wrapper-full-bleed {
  width: auto;
  max-width: none;
}
/* ========================================================================== *\
   Layout -> Grids ($layout-grids)
\* ========================================================================== */
/**
 * Grid System
 * Hat tip to @csswizardry for the `display: inline-block` grid technique.
 *
 * @link http://cbrac.co/1RvPb53
 */
/**
 * Grid containers
 * 1. Remove default styles in case `.grid` is on a <ul> or <ol> element.
 * 2. Default gutter width.
 * 3. Hack to remove `inline-block` whitespace. This causes some issues on pre-
 *    Jellybean and Jellybean versions of Android
 *
 *    @link http://cbrac.co/1xh3hs0
 *    @link http://cbrac.co/16xcjcl
 */
.grid {
  margin: 0;
  /* 1 */
  /*px*/ margin-left: -24px;
  /*rem*/ margin-left: -1.5rem;
  /* 2 */
  padding: 0;
  /* 1 */
  list-style: none;
  /* 1 */
  font-size: 0;
  /* 3 */
}
/**
 * Grid items
 * 1. Remove default styles in case `.grid-item` is on an <li> element.
 * 2. `.grid-item` elements are 100% width by default.
 * 3. Default gutter width = @grid-gutter-base.
 * 4. Ensure `.grid-item` is aligned to the top of its container.
 * 5. Reset font size to the global default.
 */
.grid-item {
  display: inline-block;
  margin-left: 0;
  /* 1 */
  width: 100%;
  /* 2 */
  /*px*/ padding-left: 24px;
  /*rem*/ padding-left: 1.5rem;
  /* 3 */
  vertical-align: top;
  /* 4 */
  /*px*/ font-size: 16px;
  /*rem*/ font-size: 1rem;
  /* 5 */
}
/**
 * Grid items rendering order
 * .grid-ltr = left-to-right (default)
 * .grid-rtl = right-to-left
 */
.grid-ltr {
  direction: ltr;
  text-align: left;
}
.grid-ltr > .grid-item {
  direction: rtl;
  text-align: left;
}
.grid-rtl {
  direction: rtl;
  text-align: left;
}
.grid-rtl > .grid-item {
  direction: ltr;
  text-align: left;
}
@media (min-width: 480px) {
  .xs-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .xs-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .xs-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .xs-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
@media (min-width: 600px) {
  .sm-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .sm-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .sm-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .sm-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .md-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .md-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .md-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .md-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
@media (min-width: 960px) {
  .lg-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .lg-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .lg-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .lg-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
@media (min-width: 1140px) {
  .xl-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .xl-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .xl-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .xl-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
@media (min-width: 1380px) {
  .xxl-grid-ltr {
    direction: ltr;
    text-align: left;
  }
  .xxl-grid-ltr > .grid-item {
    direction: rtl;
    text-align: left;
  }
  .xxl-grid-rtl {
    direction: rtl;
    text-align: left;
  }
  .xxl-grid-rtl > .grid-item {
    direction: ltr;
    text-align: left;
  }
}
/**
 * Grid gutters
 */
.gutter-0,
.gutter-none {
  margin-left: 0;
}
.gutter-0 > .grid-item,
.gutter-none > .grid-item {
  padding-left: 0;
}
.gutter-1px {
  /*px*/ margin-left: -1px;
  /*rem*/ margin-left: -0.0625rem;
}
.gutter-1px > .grid-item {
  /*px*/ padding-left: 1px;
  /*rem*/ padding-left: 0.0625rem;
}
[class~="gutter-1/2"],
.gutter-half {
  /*px*/ margin-left: -12px;
  /*rem*/ margin-left: -0.75rem;
}
[class~="gutter-1/2"] > .grid-item,
.gutter-half > .grid-item {
  /*px*/ padding-left: 12px;
  /*rem*/ padding-left: 0.75rem;
}
.gutter-1,
.gutter-whole {
  /*px*/ margin-left: -24px;
  /*rem*/ margin-left: -1.5rem;
}
.gutter-1 > .grid-item,
.gutter-whole > .grid-item {
  /*px*/ padding-left: 24px;
  /*rem*/ padding-left: 1.5rem;
}
.gutter-2,
.gutter-double {
  /*px*/ margin-left: -48px;
  /*rem*/ margin-left: -3rem;
}
.gutter-2 > .grid-item,
.gutter-double > .grid-item {
  /*px*/ padding-left: 48px;
  /*rem*/ padding-left: 3rem;
}
@media (min-width: 480px) {
  .xs-gutter-0,
  .xs-gutter-none {
    margin-left: 0;
  }
  .xs-gutter-0 > .grid-item,
  .xs-gutter-none > .grid-item {
    padding-left: 0;
  }
  .xs-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .xs-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="xs-gutter-1/2"],
  .xs-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="xs-gutter-1/2"] > .grid-item,
  .xs-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .xs-gutter-1,
  .xs-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .xs-gutter-1 > .grid-item,
  .xs-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .xs-gutter-2,
  .xs-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .xs-gutter-2 > .grid-item,
  .xs-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
@media (min-width: 600px) {
  .sm-gutter-0,
  .sm-gutter-none {
    margin-left: 0;
  }
  .sm-gutter-0 > .grid-item,
  .sm-gutter-none > .grid-item {
    padding-left: 0;
  }
  .sm-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .sm-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="sm-gutter-1/2"],
  .sm-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="sm-gutter-1/2"] > .grid-item,
  .sm-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .sm-gutter-1,
  .sm-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .sm-gutter-1 > .grid-item,
  .sm-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .sm-gutter-2,
  .sm-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .sm-gutter-2 > .grid-item,
  .sm-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
@media (min-width: 768px) {
  .md-gutter-0,
  .md-gutter-none {
    margin-left: 0;
  }
  .md-gutter-0 > .grid-item,
  .md-gutter-none > .grid-item {
    padding-left: 0;
  }
  .md-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .md-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="md-gutter-1/2"],
  .md-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="md-gutter-1/2"] > .grid-item,
  .md-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .md-gutter-1,
  .md-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .md-gutter-1 > .grid-item,
  .md-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .md-gutter-2,
  .md-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .md-gutter-2 > .grid-item,
  .md-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
@media (min-width: 960px) {
  .lg-gutter-0,
  .lg-gutter-none {
    margin-left: 0;
  }
  .lg-gutter-0 > .grid-item,
  .lg-gutter-none > .grid-item {
    padding-left: 0;
  }
  .lg-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .lg-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="lg-gutter-1/2"],
  .lg-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="lg-gutter-1/2"] > .grid-item,
  .lg-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .lg-gutter-1,
  .lg-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .lg-gutter-1 > .grid-item,
  .lg-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .lg-gutter-2,
  .lg-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .lg-gutter-2 > .grid-item,
  .lg-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
@media (min-width: 1140px) {
  .xl-gutter-0,
  .xl-gutter-none {
    margin-left: 0;
  }
  .xl-gutter-0 > .grid-item,
  .xl-gutter-none > .grid-item {
    padding-left: 0;
  }
  .xl-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .xl-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="xl-gutter-1/2"],
  .xl-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="xl-gutter-1/2"] > .grid-item,
  .xl-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .xl-gutter-1,
  .xl-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .xl-gutter-1 > .grid-item,
  .xl-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .xl-gutter-2,
  .xl-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .xl-gutter-2 > .grid-item,
  .xl-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
@media (min-width: 1380px) {
  .xxl-gutter-0,
  .xxl-gutter-none {
    margin-left: 0;
  }
  .xxl-gutter-0 > .grid-item,
  .xxl-gutter-none > .grid-item {
    padding-left: 0;
  }
  .xxl-gutter-1px {
    /*px*/ margin-left: -1px;
    /*rem*/ margin-left: -0.0625rem;
  }
  .xxl-gutter-1px > .grid-item {
    /*px*/ padding-left: 1px;
    /*rem*/ padding-left: 0.0625rem;
  }
  [class~="xxl-gutter-1/2"],
  .xxl-gutter-half {
    /*px*/ margin-left: -12px;
    /*rem*/ margin-left: -0.75rem;
  }
  [class~="xxl-gutter-1/2"] > .grid-item,
  .xxl-gutter-half > .grid-item {
    /*px*/ padding-left: 12px;
    /*rem*/ padding-left: 0.75rem;
  }
  .xxl-gutter-1,
  .xxl-gutter-whole {
    /*px*/ margin-left: -24px;
    /*rem*/ margin-left: -1.5rem;
  }
  .xxl-gutter-1 > .grid-item,
  .xxl-gutter-whole > .grid-item {
    /*px*/ padding-left: 24px;
    /*rem*/ padding-left: 1.5rem;
  }
  .xxl-gutter-2,
  .xxl-gutter-double {
    /*px*/ margin-left: -48px;
    /*rem*/ margin-left: -3rem;
  }
  .xxl-gutter-2 > .grid-item,
  .xxl-gutter-double > .grid-item {
    /*px*/ padding-left: 48px;
    /*rem*/ padding-left: 3rem;
  }
}
/**
 * Grid item alignment
 */
.grid-align-top > .grid-item {
  vertical-align: top;
}
.grid-align-middle > .grid-item {
  vertical-align: middle;
}
.grid-align-bottom > .grid-item {
  vertical-align: bottom;
}
.grid-align-left {
  text-align: left;
}
.grid-align-left > .grid-item {
  text-align: left;
}
.grid-align-center {
  text-align: center;
}
.grid-align-center > .grid-item {
  text-align: left;
}
.grid-align-right {
  text-align: right;
}
.grid-align-right > .grid-item {
  text-align: left;
}
/**
 * Grid item "shrink wrap"
 *
 * Force `.grid-item` to be the width of its content.
 */
.grid-shrink-wrap > .grid-item {
  width: auto;
}
/* ========================================================================== *\
   Utilities -> Display ($utilities-display)
\* ========================================================================== */
.dn {
  display: none !important;
}
.di {
  display: inline !important;
}
.db {
  display: block !important;
}
/**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
.dib {
  display: inline-block !important;
  max-width: 100% !important;
  /* 1 */
}
.dit {
  display: inline-table !important;
}
.dt {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
}
.dtr {
  display: table-row !important;
}
.dtrg {
  display: table-row-group !important;
}
.dtc {
  display: table-cell !important;
}
.dtcol {
  display: table-column !important;
}
.dtcolg {
  display: table-column-group !important;
}
@media (min-width: 480px) {
  .xs-dn {
    display: none !important;
  }
  .xs-di {
    display: inline !important;
  }
  .xs-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .xs-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .xs-dit {
    display: inline-table !important;
  }
  .xs-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .xs-dtr {
    display: table-row !important;
  }
  .xs-dtrg {
    display: table-row-group !important;
  }
  .xs-dtc {
    display: table-cell !important;
  }
  .xs-dtcol {
    display: table-column !important;
  }
  .xs-dtcolg {
    display: table-column-group !important;
  }
}
@media (min-width: 600px) {
  .sm-dn {
    display: none !important;
  }
  .sm-di {
    display: inline !important;
  }
  .sm-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .sm-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .sm-dit {
    display: inline-table !important;
  }
  .sm-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .sm-dtr {
    display: table-row !important;
  }
  .sm-dtrg {
    display: table-row-group !important;
  }
  .sm-dtc {
    display: table-cell !important;
  }
  .sm-dtcol {
    display: table-column !important;
  }
  .sm-dtcolg {
    display: table-column-group !important;
  }
}
@media (min-width: 768px) {
  .md-dn {
    display: none !important;
  }
  .md-di {
    display: inline !important;
  }
  .md-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .md-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .md-dit {
    display: inline-table !important;
  }
  .md-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .md-dtr {
    display: table-row !important;
  }
  .md-dtrg {
    display: table-row-group !important;
  }
  .md-dtc {
    display: table-cell !important;
  }
  .md-dtcol {
    display: table-column !important;
  }
  .md-dtcolg {
    display: table-column-group !important;
  }
}
@media (min-width: 960px) {
  .lg-dn {
    display: none !important;
  }
  .lg-di {
    display: inline !important;
  }
  .lg-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .lg-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .lg-dit {
    display: inline-table !important;
  }
  .lg-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .lg-dtr {
    display: table-row !important;
  }
  .lg-dtrg {
    display: table-row-group !important;
  }
  .lg-dtc {
    display: table-cell !important;
  }
  .lg-dtcol {
    display: table-column !important;
  }
  .lg-dtcolg {
    display: table-column-group !important;
  }
}
@media (min-width: 1140px) {
  .xl-dn {
    display: none !important;
  }
  .xl-di {
    display: inline !important;
  }
  .xl-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .xl-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .xl-dit {
    display: inline-table !important;
  }
  .xl-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .xl-dtr {
    display: table-row !important;
  }
  .xl-dtrg {
    display: table-row-group !important;
  }
  .xl-dtc {
    display: table-cell !important;
  }
  .xl-dtcol {
    display: table-column !important;
  }
  .xl-dtcolg {
    display: table-column-group !important;
  }
}
@media (min-width: 1380px) {
  .xxl-dn {
    display: none !important;
  }
  .xxl-di {
    display: inline !important;
  }
  .xxl-db {
    display: block !important;
  }
  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */
  .xxl-dib {
    display: inline-block !important;
    max-width: 100% !important;
    /* 1 */
  }
  .xxl-dit {
    display: inline-table !important;
  }
  .xxl-dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .xxl-dtr {
    display: table-row !important;
  }
  .xxl-dtrg {
    display: table-row-group !important;
  }
  .xxl-dtc {
    display: table-cell !important;
  }
  .xxl-dtcol {
    display: table-column !important;
  }
  .xxl-dtcolg {
    display: table-column-group !important;
  }
}
/* ========================================================================== *\
   Utilities -> Font Sizes ($utilities-font-sizes)
\* ========================================================================== */
/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */
.fz--- {
  /*px*/ font-size: 12px !important;
  /*rem*/ font-size: 0.75rem !important;
}
.fz-- {
  /*px*/ font-size: 13px !important;
  /*rem*/ font-size: 0.8125rem !important;
}
.fz- {
  /*px*/ font-size: 14px !important;
  /*rem*/ font-size: 0.875rem !important;
}
.fz {
  /*px*/ font-size: 16px !important;
  /*rem*/ font-size: 1rem !important;
}
.fz\+ {
  /*px*/ font-size: 18px !important;
  /*rem*/ font-size: 1.125rem !important;
}
.fz\+\+ {
  /*px*/ font-size: 19px !important;
  /*rem*/ font-size: 1.1875rem !important;
}
.fz\+\+\+ {
  /*px*/ font-size: 20px !important;
  /*rem*/ font-size: 1.25rem !important;
}
.fz100 {
  font-size: 100% !important;
}
.fz0 {
  font-size: 0 !important;
}
@media (min-width: 480px) {
  .xs-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .xs-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .xs-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .xs-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .xs-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .xs-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .xs-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .xs-fz100 {
    font-size: 100% !important;
  }
  .xs-fz0 {
    font-size: 0 !important;
  }
}
@media (min-width: 600px) {
  .sm-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .sm-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .sm-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .sm-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .sm-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .sm-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .sm-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .sm-fz100 {
    font-size: 100% !important;
  }
  .sm-fz0 {
    font-size: 0 !important;
  }
}
@media (min-width: 768px) {
  .md-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .md-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .md-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .md-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .md-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .md-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .md-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .md-fz100 {
    font-size: 100% !important;
  }
  .md-fz0 {
    font-size: 0 !important;
  }
}
@media (min-width: 960px) {
  .lg-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .lg-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .lg-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .lg-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .lg-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .lg-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .lg-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .lg-fz100 {
    font-size: 100% !important;
  }
  .lg-fz0 {
    font-size: 0 !important;
  }
}
@media (min-width: 1140px) {
  .xl-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .xl-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .xl-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .xl-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .xl-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .xl-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .xl-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .xl-fz100 {
    font-size: 100% !important;
  }
  .xl-fz0 {
    font-size: 0 !important;
  }
}
@media (min-width: 1380px) {
  .xxl-fz--- {
    /*px*/ font-size: 12px !important;
    /*rem*/ font-size: 0.75rem !important;
  }
  .xxl-fz-- {
    /*px*/ font-size: 13px !important;
    /*rem*/ font-size: 0.8125rem !important;
  }
  .xxl-fz- {
    /*px*/ font-size: 14px !important;
    /*rem*/ font-size: 0.875rem !important;
  }
  .xxl-fz {
    /*px*/ font-size: 16px !important;
    /*rem*/ font-size: 1rem !important;
  }
  .xxl-fz\+ {
    /*px*/ font-size: 18px !important;
    /*rem*/ font-size: 1.125rem !important;
  }
  .xxl-fz\+\+ {
    /*px*/ font-size: 19px !important;
    /*rem*/ font-size: 1.1875rem !important;
  }
  .xxl-fz\+\+\+ {
    /*px*/ font-size: 20px !important;
    /*rem*/ font-size: 1.25rem !important;
  }
  .xxl-fz100 {
    font-size: 100% !important;
  }
  .xxl-fz0 {
    font-size: 0 !important;
  }
}
/* ========================================================================== *\
   Utilities -> Floats ($utilities-floats)
\* ========================================================================== */
.fl {
  float: left !important;
}
.fr {
  float: right !important;
}
.fn {
  float: none !important;
}
@media (min-width: 480px) {
  .xs-fl {
    float: left !important;
  }
  .xs-fr {
    float: right !important;
  }
  .xs-fn {
    float: none !important;
  }
}
@media (min-width: 600px) {
  .sm-fl {
    float: left !important;
  }
  .sm-fr {
    float: right !important;
  }
  .sm-fn {
    float: none !important;
  }
}
@media (min-width: 768px) {
  .md-fl {
    float: left !important;
  }
  .md-fr {
    float: right !important;
  }
  .md-fn {
    float: none !important;
  }
}
@media (min-width: 960px) {
  .lg-fl {
    float: left !important;
  }
  .lg-fr {
    float: right !important;
  }
  .lg-fn {
    float: none !important;
  }
}
@media (min-width: 1140px) {
  .xl-fl {
    float: left !important;
  }
  .xl-fr {
    float: right !important;
  }
  .xl-fn {
    float: none !important;
  }
}
@media (min-width: 1380px) {
  .xxl-fl {
    float: left !important;
  }
  .xxl-fr {
    float: right !important;
  }
  .xxl-fn {
    float: none !important;
  }
}
/**
 * Clearfix
 *
 * 1. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 * 2. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 *
 * @link http://cbrac.co/1FT6aqC
 */
.cf:before,
.cf:after {
  display: table;
  content: " ";
}
.cf:after {
  clear: both;
}
/**
 * Clear floats with an extra markup element.
 *
 * @link http://cbrac.co/SFv1Ua
 */
.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}
/* ========================================================================== *\
   Utilities -> Margins ($utilities-margins)
\* ========================================================================== */
/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */
.m {
  /*px*/ margin: 24px !important;
  /*rem*/ margin: 1.5rem !important;
}
.mt {
  /*px*/ margin-top: 24px !important;
  /*rem*/ margin-top: 1.5rem !important;
}
.mr {
  /*px*/ margin-right: 24px !important;
  /*rem*/ margin-right: 1.5rem !important;
}
.mb {
  /*px*/ margin-bottom: 24px !important;
  /*rem*/ margin-bottom: 1.5rem !important;
}
.ml {
  /*px*/ margin-left: 24px !important;
  /*rem*/ margin-left: 1.5rem !important;
}
.mh {
  /*px*/ margin-right: 24px !important;
  /*rem*/ margin-right: 1.5rem !important;
  /*px*/ margin-left: 24px !important;
  /*rem*/ margin-left: 1.5rem !important;
}
.mv {
  /*px*/ margin-top: 24px !important;
  /*rem*/ margin-top: 1.5rem !important;
  /*px*/ margin-bottom: 24px !important;
  /*rem*/ margin-bottom: 1.5rem !important;
}
.m-- {
  /*px*/ margin: 6px !important;
  /*rem*/ margin: 0.375rem !important;
}
.mt-- {
  /*px*/ margin-top: 6px !important;
  /*rem*/ margin-top: 0.375rem !important;
}
.mr-- {
  /*px*/ margin-right: 6px !important;
  /*rem*/ margin-right: 0.375rem !important;
}
.mb-- {
  /*px*/ margin-bottom: 6px !important;
  /*rem*/ margin-bottom: 0.375rem !important;
}
.ml-- {
  /*px*/ margin-left: 6px !important;
  /*rem*/ margin-left: 0.375rem !important;
}
.mh-- {
  /*px*/ margin-right: 6px !important;
  /*rem*/ margin-right: 0.375rem !important;
  /*px*/ margin-left: 6px !important;
  /*rem*/ margin-left: 0.375rem !important;
}
.mv-- {
  /*px*/ margin-top: 6px !important;
  /*rem*/ margin-top: 0.375rem !important;
  /*px*/ margin-bottom: 6px !important;
  /*rem*/ margin-bottom: 0.375rem !important;
}
.m- {
  /*px*/ margin: 12px !important;
  /*rem*/ margin: 0.75rem !important;
}
.mt- {
  /*px*/ margin-top: 12px !important;
  /*rem*/ margin-top: 0.75rem !important;
}
.mr- {
  /*px*/ margin-right: 12px !important;
  /*rem*/ margin-right: 0.75rem !important;
}
.mb- {
  /*px*/ margin-bottom: 12px !important;
  /*rem*/ margin-bottom: 0.75rem !important;
}
.ml- {
  /*px*/ margin-left: 12px !important;
  /*rem*/ margin-left: 0.75rem !important;
}
.mh- {
  /*px*/ margin-right: 12px !important;
  /*rem*/ margin-right: 0.75rem !important;
  /*px*/ margin-left: 12px !important;
  /*rem*/ margin-left: 0.75rem !important;
}
.mv- {
  /*px*/ margin-top: 12px !important;
  /*rem*/ margin-top: 0.75rem !important;
  /*px*/ margin-bottom: 12px !important;
  /*rem*/ margin-bottom: 0.75rem !important;
}
.m\+ {
  /*px*/ margin: 48px !important;
  /*rem*/ margin: 3rem !important;
}
.mt\+ {
  /*px*/ margin-top: 48px !important;
  /*rem*/ margin-top: 3rem !important;
}
.mr\+ {
  /*px*/ margin-right: 48px !important;
  /*rem*/ margin-right: 3rem !important;
}
.mb\+ {
  /*px*/ margin-bottom: 48px !important;
  /*rem*/ margin-bottom: 3rem !important;
}
.ml\+ {
  /*px*/ margin-left: 48px !important;
  /*rem*/ margin-left: 3rem !important;
}
.mh\+ {
  /*px*/ margin-right: 48px !important;
  /*rem*/ margin-right: 3rem !important;
  /*px*/ margin-left: 48px !important;
  /*rem*/ margin-left: 3rem !important;
}
.mv\+ {
  /*px*/ margin-top: 48px !important;
  /*rem*/ margin-top: 3rem !important;
  /*px*/ margin-bottom: 48px !important;
  /*rem*/ margin-bottom: 3rem !important;
}
.m\+\+ {
  /*px*/ margin: 96px !important;
  /*rem*/ margin: 6rem !important;
}
.mt\+\+ {
  /*px*/ margin-top: 96px !important;
  /*rem*/ margin-top: 6rem !important;
}
.mr\+\+ {
  /*px*/ margin-right: 96px !important;
  /*rem*/ margin-right: 6rem !important;
}
.mb\+\+ {
  /*px*/ margin-bottom: 96px !important;
  /*rem*/ margin-bottom: 6rem !important;
}
.ml\+\+ {
  /*px*/ margin-left: 96px !important;
  /*rem*/ margin-left: 6rem !important;
}
.mh\+\+ {
  /*px*/ margin-right: 96px !important;
  /*rem*/ margin-right: 6rem !important;
  /*px*/ margin-left: 96px !important;
  /*rem*/ margin-left: 6rem !important;
}
.mv\+\+ {
  /*px*/ margin-top: 96px !important;
  /*rem*/ margin-top: 6rem !important;
  /*px*/ margin-bottom: 96px !important;
  /*rem*/ margin-bottom: 6rem !important;
}
.m0 {
  /*px*/ margin: 0 !important;
  /*rem*/ margin: 0 !important;
}
.mt0 {
  /*px*/ margin-top: 0 !important;
  /*rem*/ margin-top: 0 !important;
}
.mr0 {
  /*px*/ margin-right: 0 !important;
  /*rem*/ margin-right: 0 !important;
}
.mb0 {
  /*px*/ margin-bottom: 0 !important;
  /*rem*/ margin-bottom: 0 !important;
}
.ml0 {
  /*px*/ margin-left: 0 !important;
  /*rem*/ margin-left: 0 !important;
}
.mh0 {
  /*px*/ margin-right: 0 !important;
  /*rem*/ margin-right: 0 !important;
  /*px*/ margin-left: 0 !important;
  /*rem*/ margin-left: 0 !important;
}
.mv0 {
  /*px*/ margin-top: 0 !important;
  /*rem*/ margin-top: 0 !important;
  /*px*/ margin-bottom: 0 !important;
  /*rem*/ margin-bottom: 0 !important;
}
@media (min-width: 480px) {
  .xs-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .xs-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .xs-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .xs-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xs-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xs-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xs-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xs-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .xs-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .xs-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .xs-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xs-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xs-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xs-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xs-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .xs-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .xs-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .xs-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xs-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xs-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xs-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xs-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .xs-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .xs-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .xs-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xs-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xs-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xs-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xs-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .xs-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .xs-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .xs-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xs-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xs-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xs-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xs-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .xs-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .xs-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .xs-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .xs-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xs-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xs-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
@media (min-width: 600px) {
  .sm-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .sm-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .sm-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .sm-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .sm-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .sm-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .sm-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .sm-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .sm-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .sm-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .sm-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .sm-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .sm-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .sm-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .sm-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .sm-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .sm-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .sm-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .sm-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .sm-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .sm-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .sm-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .sm-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .sm-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .sm-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .sm-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .sm-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .sm-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .sm-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .sm-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .sm-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .sm-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .sm-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .sm-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .sm-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .sm-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .sm-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .sm-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .sm-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .sm-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .sm-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .sm-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  .md-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .md-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .md-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .md-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .md-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .md-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .md-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .md-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .md-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .md-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .md-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .md-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .md-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .md-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .md-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .md-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .md-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .md-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .md-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .md-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .md-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .md-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .md-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .md-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .md-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .md-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .md-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .md-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .md-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .md-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .md-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .md-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .md-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .md-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .md-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .md-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .md-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .md-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .md-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .md-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .md-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .md-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
@media (min-width: 960px) {
  .lg-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .lg-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .lg-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .lg-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .lg-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .lg-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .lg-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .lg-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .lg-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .lg-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .lg-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .lg-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .lg-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .lg-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .lg-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .lg-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .lg-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .lg-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .lg-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .lg-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .lg-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .lg-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .lg-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .lg-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .lg-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .lg-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .lg-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .lg-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .lg-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .lg-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .lg-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .lg-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .lg-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .lg-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .lg-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .lg-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .lg-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .lg-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .lg-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .lg-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .lg-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .lg-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
@media (min-width: 1140px) {
  .xl-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .xl-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .xl-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .xl-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xl-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xl-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xl-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xl-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .xl-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .xl-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .xl-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xl-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xl-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xl-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xl-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .xl-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .xl-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .xl-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xl-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xl-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xl-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xl-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .xl-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .xl-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .xl-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xl-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xl-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xl-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xl-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .xl-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .xl-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .xl-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xl-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xl-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xl-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xl-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .xl-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .xl-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .xl-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .xl-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xl-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xl-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
@media (min-width: 1380px) {
  .xxl-m {
    /*px*/ margin: 24px !important;
    /*rem*/ margin: 1.5rem !important;
  }
  .xxl-mt {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
  }
  .xxl-mr {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
  }
  .xxl-mb {
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xxl-ml {
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xxl-mh {
    /*px*/ margin-right: 24px !important;
    /*rem*/ margin-right: 1.5rem !important;
    /*px*/ margin-left: 24px !important;
    /*rem*/ margin-left: 1.5rem !important;
  }
  .xxl-mv {
    /*px*/ margin-top: 24px !important;
    /*rem*/ margin-top: 1.5rem !important;
    /*px*/ margin-bottom: 24px !important;
    /*rem*/ margin-bottom: 1.5rem !important;
  }
  .xxl-m-- {
    /*px*/ margin: 6px !important;
    /*rem*/ margin: 0.375rem !important;
  }
  .xxl-mt-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
  }
  .xxl-mr-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
  }
  .xxl-mb-- {
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xxl-ml-- {
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xxl-mh-- {
    /*px*/ margin-right: 6px !important;
    /*rem*/ margin-right: 0.375rem !important;
    /*px*/ margin-left: 6px !important;
    /*rem*/ margin-left: 0.375rem !important;
  }
  .xxl-mv-- {
    /*px*/ margin-top: 6px !important;
    /*rem*/ margin-top: 0.375rem !important;
    /*px*/ margin-bottom: 6px !important;
    /*rem*/ margin-bottom: 0.375rem !important;
  }
  .xxl-m- {
    /*px*/ margin: 12px !important;
    /*rem*/ margin: 0.75rem !important;
  }
  .xxl-mt- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
  }
  .xxl-mr- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
  }
  .xxl-mb- {
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xxl-ml- {
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xxl-mh- {
    /*px*/ margin-right: 12px !important;
    /*rem*/ margin-right: 0.75rem !important;
    /*px*/ margin-left: 12px !important;
    /*rem*/ margin-left: 0.75rem !important;
  }
  .xxl-mv- {
    /*px*/ margin-top: 12px !important;
    /*rem*/ margin-top: 0.75rem !important;
    /*px*/ margin-bottom: 12px !important;
    /*rem*/ margin-bottom: 0.75rem !important;
  }
  .xxl-m\+ {
    /*px*/ margin: 48px !important;
    /*rem*/ margin: 3rem !important;
  }
  .xxl-mt\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
  }
  .xxl-mr\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
  }
  .xxl-mb\+ {
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xxl-ml\+ {
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xxl-mh\+ {
    /*px*/ margin-right: 48px !important;
    /*rem*/ margin-right: 3rem !important;
    /*px*/ margin-left: 48px !important;
    /*rem*/ margin-left: 3rem !important;
  }
  .xxl-mv\+ {
    /*px*/ margin-top: 48px !important;
    /*rem*/ margin-top: 3rem !important;
    /*px*/ margin-bottom: 48px !important;
    /*rem*/ margin-bottom: 3rem !important;
  }
  .xxl-m\+\+ {
    /*px*/ margin: 96px !important;
    /*rem*/ margin: 6rem !important;
  }
  .xxl-mt\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
  }
  .xxl-mr\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
  }
  .xxl-mb\+\+ {
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xxl-ml\+\+ {
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xxl-mh\+\+ {
    /*px*/ margin-right: 96px !important;
    /*rem*/ margin-right: 6rem !important;
    /*px*/ margin-left: 96px !important;
    /*rem*/ margin-left: 6rem !important;
  }
  .xxl-mv\+\+ {
    /*px*/ margin-top: 96px !important;
    /*rem*/ margin-top: 6rem !important;
    /*px*/ margin-bottom: 96px !important;
    /*rem*/ margin-bottom: 6rem !important;
  }
  .xxl-m0 {
    /*px*/ margin: 0 !important;
    /*rem*/ margin: 0 !important;
  }
  .xxl-mt0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
  }
  .xxl-mr0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
  }
  .xxl-mb0 {
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
  .xxl-ml0 {
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xxl-mh0 {
    /*px*/ margin-right: 0 !important;
    /*rem*/ margin-right: 0 !important;
    /*px*/ margin-left: 0 !important;
    /*rem*/ margin-left: 0 !important;
  }
  .xxl-mv0 {
    /*px*/ margin-top: 0 !important;
    /*rem*/ margin-top: 0 !important;
    /*px*/ margin-bottom: 0 !important;
    /*rem*/ margin-bottom: 0 !important;
  }
}
/* ========================================================================== *\
   Utilities -> Paddings ($utilities-paddings)
\* ========================================================================== */
/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */
.p {
  /*px*/ padding: 24px !important;
  /*rem*/ padding: 1.5rem !important;
}
.pt {
  /*px*/ padding-top: 24px !important;
  /*rem*/ padding-top: 1.5rem !important;
}
.pr {
  /*px*/ padding-right: 24px !important;
  /*rem*/ padding-right: 1.5rem !important;
}
.pb {
  /*px*/ padding-bottom: 24px !important;
  /*rem*/ padding-bottom: 1.5rem !important;
}
.pl {
  /*px*/ padding-left: 24px !important;
  /*rem*/ padding-left: 1.5rem !important;
}
.ph {
  /*px*/ padding-right: 24px !important;
  /*rem*/ padding-right: 1.5rem !important;
  /*px*/ padding-left: 24px !important;
  /*rem*/ padding-left: 1.5rem !important;
}
.pv {
  /*px*/ padding-top: 24px !important;
  /*rem*/ padding-top: 1.5rem !important;
  /*px*/ padding-bottom: 24px !important;
  /*rem*/ padding-bottom: 1.5rem !important;
}
.p-- {
  /*px*/ padding: 6px !important;
  /*rem*/ padding: 0.375rem !important;
}
.pt-- {
  /*px*/ padding-top: 6px !important;
  /*rem*/ padding-top: 0.375rem !important;
}
.pr-- {
  /*px*/ padding-right: 6px !important;
  /*rem*/ padding-right: 0.375rem !important;
}
.pb-- {
  /*px*/ padding-bottom: 6px !important;
  /*rem*/ padding-bottom: 0.375rem !important;
}
.pl-- {
  /*px*/ padding-left: 6px !important;
  /*rem*/ padding-left: 0.375rem !important;
}
.ph-- {
  /*px*/ padding-right: 6px !important;
  /*rem*/ padding-right: 0.375rem !important;
  /*px*/ padding-left: 6px !important;
  /*rem*/ padding-left: 0.375rem !important;
}
.pv-- {
  /*px*/ padding-top: 6px !important;
  /*rem*/ padding-top: 0.375rem !important;
  /*px*/ padding-bottom: 6px !important;
  /*rem*/ padding-bottom: 0.375rem !important;
}
.p- {
  /*px*/ padding: 12px !important;
  /*rem*/ padding: 0.75rem !important;
}
.pt- {
  /*px*/ padding-top: 12px !important;
  /*rem*/ padding-top: 0.75rem !important;
}
.pr- {
  /*px*/ padding-right: 12px !important;
  /*rem*/ padding-right: 0.75rem !important;
}
.pb- {
  /*px*/ padding-bottom: 12px !important;
  /*rem*/ padding-bottom: 0.75rem !important;
}
.pl- {
  /*px*/ padding-left: 12px !important;
  /*rem*/ padding-left: 0.75rem !important;
}
.ph- {
  /*px*/ padding-right: 12px !important;
  /*rem*/ padding-right: 0.75rem !important;
  /*px*/ padding-left: 12px !important;
  /*rem*/ padding-left: 0.75rem !important;
}
.pv- {
  /*px*/ padding-top: 12px !important;
  /*rem*/ padding-top: 0.75rem !important;
  /*px*/ padding-bottom: 12px !important;
  /*rem*/ padding-bottom: 0.75rem !important;
}
.p\+ {
  /*px*/ padding: 48px !important;
  /*rem*/ padding: 3rem !important;
}
.pt\+ {
  /*px*/ padding-top: 48px !important;
  /*rem*/ padding-top: 3rem !important;
}
.pr\+ {
  /*px*/ padding-right: 48px !important;
  /*rem*/ padding-right: 3rem !important;
}
.pb\+ {
  /*px*/ padding-bottom: 48px !important;
  /*rem*/ padding-bottom: 3rem !important;
}
.pl\+ {
  /*px*/ padding-left: 48px !important;
  /*rem*/ padding-left: 3rem !important;
}
.ph\+ {
  /*px*/ padding-right: 48px !important;
  /*rem*/ padding-right: 3rem !important;
  /*px*/ padding-left: 48px !important;
  /*rem*/ padding-left: 3rem !important;
}
.pv\+ {
  /*px*/ padding-top: 48px !important;
  /*rem*/ padding-top: 3rem !important;
  /*px*/ padding-bottom: 48px !important;
  /*rem*/ padding-bottom: 3rem !important;
}
.p\+\+ {
  /*px*/ padding: 96px !important;
  /*rem*/ padding: 6rem !important;
}
.pt\+\+ {
  /*px*/ padding-top: 96px !important;
  /*rem*/ padding-top: 6rem !important;
}
.pr\+\+ {
  /*px*/ padding-right: 96px !important;
  /*rem*/ padding-right: 6rem !important;
}
.pb\+\+ {
  /*px*/ padding-bottom: 96px !important;
  /*rem*/ padding-bottom: 6rem !important;
}
.pl\+\+ {
  /*px*/ padding-left: 96px !important;
  /*rem*/ padding-left: 6rem !important;
}
.ph\+\+ {
  /*px*/ padding-right: 96px !important;
  /*rem*/ padding-right: 6rem !important;
  /*px*/ padding-left: 96px !important;
  /*rem*/ padding-left: 6rem !important;
}
.pv\+\+ {
  /*px*/ padding-top: 96px !important;
  /*rem*/ padding-top: 6rem !important;
  /*px*/ padding-bottom: 96px !important;
  /*rem*/ padding-bottom: 6rem !important;
}
.p0 {
  /*px*/ padding: 0 !important;
  /*rem*/ padding: 0 !important;
}
.pt0 {
  /*px*/ padding-top: 0 !important;
  /*rem*/ padding-top: 0 !important;
}
.pr0 {
  /*px*/ padding-right: 0 !important;
  /*rem*/ padding-right: 0 !important;
}
.pb0 {
  /*px*/ padding-bottom: 0 !important;
  /*rem*/ padding-bottom: 0 !important;
}
.pl0 {
  /*px*/ padding-left: 0 !important;
  /*rem*/ padding-left: 0 !important;
}
.ph0 {
  /*px*/ padding-right: 0 !important;
  /*rem*/ padding-right: 0 !important;
  /*px*/ padding-left: 0 !important;
  /*rem*/ padding-left: 0 !important;
}
.pv0 {
  /*px*/ padding-top: 0 !important;
  /*rem*/ padding-top: 0 !important;
  /*px*/ padding-bottom: 0 !important;
  /*rem*/ padding-bottom: 0 !important;
}
@media (min-width: 480px) {
  .xs-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .xs-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .xs-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .xs-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xs-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xs-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xs-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xs-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .xs-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .xs-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .xs-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xs-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xs-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xs-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xs-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .xs-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .xs-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .xs-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xs-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xs-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xs-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xs-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .xs-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .xs-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .xs-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xs-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xs-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xs-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xs-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .xs-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .xs-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .xs-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xs-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xs-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xs-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xs-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .xs-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .xs-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .xs-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .xs-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xs-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xs-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
@media (min-width: 600px) {
  .sm-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .sm-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .sm-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .sm-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .sm-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .sm-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .sm-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .sm-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .sm-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .sm-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .sm-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .sm-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .sm-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .sm-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .sm-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .sm-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .sm-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .sm-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .sm-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .sm-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .sm-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .sm-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .sm-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .sm-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .sm-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .sm-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .sm-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .sm-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .sm-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .sm-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .sm-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .sm-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .sm-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .sm-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .sm-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .sm-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .sm-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .sm-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .sm-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .sm-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .sm-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .sm-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
@media (min-width: 768px) {
  .md-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .md-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .md-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .md-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .md-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .md-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .md-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .md-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .md-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .md-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .md-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .md-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .md-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .md-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .md-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .md-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .md-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .md-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .md-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .md-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .md-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .md-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .md-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .md-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .md-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .md-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .md-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .md-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .md-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .md-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .md-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .md-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .md-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .md-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .md-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .md-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .md-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .md-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .md-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .md-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .md-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .md-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
@media (min-width: 960px) {
  .lg-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .lg-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .lg-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .lg-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .lg-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .lg-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .lg-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .lg-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .lg-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .lg-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .lg-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .lg-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .lg-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .lg-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .lg-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .lg-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .lg-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .lg-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .lg-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .lg-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .lg-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .lg-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .lg-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .lg-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .lg-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .lg-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .lg-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .lg-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .lg-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .lg-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .lg-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .lg-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .lg-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .lg-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .lg-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .lg-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .lg-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .lg-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .lg-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .lg-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .lg-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .lg-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
@media (min-width: 1140px) {
  .xl-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .xl-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .xl-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .xl-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xl-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xl-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xl-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xl-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .xl-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .xl-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .xl-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xl-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xl-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xl-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xl-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .xl-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .xl-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .xl-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xl-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xl-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xl-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xl-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .xl-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .xl-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .xl-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xl-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xl-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xl-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xl-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .xl-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .xl-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .xl-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xl-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xl-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xl-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xl-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .xl-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .xl-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .xl-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .xl-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xl-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xl-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
@media (min-width: 1380px) {
  .xxl-p {
    /*px*/ padding: 24px !important;
    /*rem*/ padding: 1.5rem !important;
  }
  .xxl-pt {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
  }
  .xxl-pr {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
  }
  .xxl-pb {
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xxl-pl {
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xxl-ph {
    /*px*/ padding-right: 24px !important;
    /*rem*/ padding-right: 1.5rem !important;
    /*px*/ padding-left: 24px !important;
    /*rem*/ padding-left: 1.5rem !important;
  }
  .xxl-pv {
    /*px*/ padding-top: 24px !important;
    /*rem*/ padding-top: 1.5rem !important;
    /*px*/ padding-bottom: 24px !important;
    /*rem*/ padding-bottom: 1.5rem !important;
  }
  .xxl-p-- {
    /*px*/ padding: 6px !important;
    /*rem*/ padding: 0.375rem !important;
  }
  .xxl-pt-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
  }
  .xxl-pr-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
  }
  .xxl-pb-- {
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xxl-pl-- {
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xxl-ph-- {
    /*px*/ padding-right: 6px !important;
    /*rem*/ padding-right: 0.375rem !important;
    /*px*/ padding-left: 6px !important;
    /*rem*/ padding-left: 0.375rem !important;
  }
  .xxl-pv-- {
    /*px*/ padding-top: 6px !important;
    /*rem*/ padding-top: 0.375rem !important;
    /*px*/ padding-bottom: 6px !important;
    /*rem*/ padding-bottom: 0.375rem !important;
  }
  .xxl-p- {
    /*px*/ padding: 12px !important;
    /*rem*/ padding: 0.75rem !important;
  }
  .xxl-pt- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
  }
  .xxl-pr- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
  }
  .xxl-pb- {
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xxl-pl- {
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xxl-ph- {
    /*px*/ padding-right: 12px !important;
    /*rem*/ padding-right: 0.75rem !important;
    /*px*/ padding-left: 12px !important;
    /*rem*/ padding-left: 0.75rem !important;
  }
  .xxl-pv- {
    /*px*/ padding-top: 12px !important;
    /*rem*/ padding-top: 0.75rem !important;
    /*px*/ padding-bottom: 12px !important;
    /*rem*/ padding-bottom: 0.75rem !important;
  }
  .xxl-p\+ {
    /*px*/ padding: 48px !important;
    /*rem*/ padding: 3rem !important;
  }
  .xxl-pt\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
  }
  .xxl-pr\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
  }
  .xxl-pb\+ {
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xxl-pl\+ {
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xxl-ph\+ {
    /*px*/ padding-right: 48px !important;
    /*rem*/ padding-right: 3rem !important;
    /*px*/ padding-left: 48px !important;
    /*rem*/ padding-left: 3rem !important;
  }
  .xxl-pv\+ {
    /*px*/ padding-top: 48px !important;
    /*rem*/ padding-top: 3rem !important;
    /*px*/ padding-bottom: 48px !important;
    /*rem*/ padding-bottom: 3rem !important;
  }
  .xxl-p\+\+ {
    /*px*/ padding: 96px !important;
    /*rem*/ padding: 6rem !important;
  }
  .xxl-pt\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
  }
  .xxl-pr\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
  }
  .xxl-pb\+\+ {
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xxl-pl\+\+ {
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xxl-ph\+\+ {
    /*px*/ padding-right: 96px !important;
    /*rem*/ padding-right: 6rem !important;
    /*px*/ padding-left: 96px !important;
    /*rem*/ padding-left: 6rem !important;
  }
  .xxl-pv\+\+ {
    /*px*/ padding-top: 96px !important;
    /*rem*/ padding-top: 6rem !important;
    /*px*/ padding-bottom: 96px !important;
    /*rem*/ padding-bottom: 6rem !important;
  }
  .xxl-p0 {
    /*px*/ padding: 0 !important;
    /*rem*/ padding: 0 !important;
  }
  .xxl-pt0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
  }
  .xxl-pr0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
  }
  .xxl-pb0 {
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
  .xxl-pl0 {
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xxl-ph0 {
    /*px*/ padding-right: 0 !important;
    /*rem*/ padding-right: 0 !important;
    /*px*/ padding-left: 0 !important;
    /*rem*/ padding-left: 0 !important;
  }
  .xxl-pv0 {
    /*px*/ padding-top: 0 !important;
    /*rem*/ padding-top: 0 !important;
    /*px*/ padding-bottom: 0 !important;
    /*rem*/ padding-bottom: 0 !important;
  }
}
/* ========================================================================== *\
   Utilities -> Positions ($utilities-positions)
\* ========================================================================== */
.posa {
  position: absolute !important;
}
.posf {
  position: fixed !important;
}
.posr {
  position: relative !important;
}
.poss {
  position: static !important;
}
@media (min-width: 480px) {
  .xs-posa {
    position: absolute !important;
  }
  .xs-posf {
    position: fixed !important;
  }
  .xs-posr {
    position: relative !important;
  }
  .xs-poss {
    position: static !important;
  }
}
@media (min-width: 600px) {
  .sm-posa {
    position: absolute !important;
  }
  .sm-posf {
    position: fixed !important;
  }
  .sm-posr {
    position: relative !important;
  }
  .sm-poss {
    position: static !important;
  }
}
@media (min-width: 768px) {
  .md-posa {
    position: absolute !important;
  }
  .md-posf {
    position: fixed !important;
  }
  .md-posr {
    position: relative !important;
  }
  .md-poss {
    position: static !important;
  }
}
@media (min-width: 960px) {
  .lg-posa {
    position: absolute !important;
  }
  .lg-posf {
    position: fixed !important;
  }
  .lg-posr {
    position: relative !important;
  }
  .lg-poss {
    position: static !important;
  }
}
@media (min-width: 1140px) {
  .xl-posa {
    position: absolute !important;
  }
  .xl-posf {
    position: fixed !important;
  }
  .xl-posr {
    position: relative !important;
  }
  .xl-poss {
    position: static !important;
  }
}
@media (min-width: 1380px) {
  .xxl-posa {
    position: absolute !important;
  }
  .xxl-posf {
    position: fixed !important;
  }
  .xxl-posr {
    position: relative !important;
  }
  .xxl-poss {
    position: static !important;
  }
}
/* ========================================================================== *\
   Utilities -> Text Alignment ($utilities-text-alignment)
\* ========================================================================== */
.tl {
  text-align: left !important;
}
.tr {
  text-align: right !important;
}
.tc {
  text-align: center !important;
}
.tj {
  text-align: justify !important;
}
@media (min-width: 480px) {
  .xs-tl {
    text-align: left !important;
  }
  .xs-tr {
    text-align: right !important;
  }
  .xs-tc {
    text-align: center !important;
  }
  .xs-tj {
    text-align: justify !important;
  }
}
@media (min-width: 600px) {
  .sm-tl {
    text-align: left !important;
  }
  .sm-tr {
    text-align: right !important;
  }
  .sm-tc {
    text-align: center !important;
  }
  .sm-tj {
    text-align: justify !important;
  }
}
@media (min-width: 768px) {
  .md-tl {
    text-align: left !important;
  }
  .md-tr {
    text-align: right !important;
  }
  .md-tc {
    text-align: center !important;
  }
  .md-tj {
    text-align: justify !important;
  }
}
@media (min-width: 960px) {
  .lg-tl {
    text-align: left !important;
  }
  .lg-tr {
    text-align: right !important;
  }
  .lg-tc {
    text-align: center !important;
  }
  .lg-tj {
    text-align: justify !important;
  }
}
@media (min-width: 1140px) {
  .xl-tl {
    text-align: left !important;
  }
  .xl-tr {
    text-align: right !important;
  }
  .xl-tc {
    text-align: center !important;
  }
  .xl-tj {
    text-align: justify !important;
  }
}
@media (min-width: 1380px) {
  .xxl-tl {
    text-align: left !important;
  }
  .xxl-tr {
    text-align: right !important;
  }
  .xxl-tc {
    text-align: center !important;
  }
  .xxl-tj {
    text-align: justify !important;
  }
}
/* ========================================================================== *\
   Utilities -> Vertical Alignment ($utilities-vertical-alignment)
\* ========================================================================== */
.vat {
  vertical-align: top !important;
}
.vab {
  vertical-align: bottom !important;
}
.vam {
  vertical-align: middle !important;
}
@media (min-width: 480px) {
  .xs-vat {
    vertical-align: top !important;
  }
  .xs-vab {
    vertical-align: bottom !important;
  }
  .xs-vam {
    vertical-align: middle !important;
  }
}
@media (min-width: 600px) {
  .sm-vat {
    vertical-align: top !important;
  }
  .sm-vab {
    vertical-align: bottom !important;
  }
  .sm-vam {
    vertical-align: middle !important;
  }
}
@media (min-width: 768px) {
  .md-vat {
    vertical-align: top !important;
  }
  .md-vab {
    vertical-align: bottom !important;
  }
  .md-vam {
    vertical-align: middle !important;
  }
}
@media (min-width: 960px) {
  .lg-vat {
    vertical-align: top !important;
  }
  .lg-vab {
    vertical-align: bottom !important;
  }
  .lg-vam {
    vertical-align: middle !important;
  }
}
@media (min-width: 1140px) {
  .xl-vat {
    vertical-align: top !important;
  }
  .xl-vab {
    vertical-align: bottom !important;
  }
  .xl-vam {
    vertical-align: middle !important;
  }
}
@media (min-width: 1380px) {
  .xxl-vat {
    vertical-align: top !important;
  }
  .xxl-vab {
    vertical-align: bottom !important;
  }
  .xxl-vam {
    vertical-align: middle !important;
  }
}
/* ========================================================================== *\
   Utilities -> Visually Hidden ($utilities-visually-hidden)
\* ========================================================================== */
/**
 * Hide only visually, but have it available for screenreaders.
 *
 * @link http://cbrac.co/TUcUgH
 */
.vh {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
}
/**
 * Extends the `.vh` class to allow the element to be focusable when navigated
 * to via the keyboard.
 *
 * @link http://cbrac.co/RR8gO6
 */
.vh.focusable:active,
.vh.focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  margin: 0;
  width: auto;
  height: auto;
}
/* ========================================================================== *\
   Utilities -> Widths ($utilities-widths)
\* ========================================================================== */
/**
 * Hat tip to @csswizardry for the fraction classes technique.
 *
 * @link http://cbrac.co/1RvQXmS
 */
.width-auto {
  width: auto !important;
}
[class~="1/1"],
.one-whole {
  width: 100% !important;
}
[class~="1/2"],
.one-half,
[class~="2/4"],
.two-fourths,
[class~="3/6"],
.three-sixths,
[class~="4/8"],
.four-eighths,
[class~="5/10"],
.five-tenths,
[class~="6/12"],
.six-twelfths {
  width: 50% !important;
}
[class~="1/3"],
.one-third,
[class~="2/6"],
.two-sixths,
[class~="3/9"],
.three-ninths,
[class~="4/12"],
.four-twelfths {
  width: 33.3333333% !important;
}
[class~="2/3"],
.two-thirds,
[class~="4/6"],
.four-sixths,
[class~="6/9"],
.six-ninths,
[class~="8/12"],
.eight-twelfths {
  width: 66.6666666% !important;
}
[class~="1/4"],
.one-fourth,
[class~="2/8"],
.two-eighths,
[class~="3/12"],
.three-twelfths {
  width: 25% !important;
}
[class~="3/4"],
.three-fourths,
[class~="6/8"],
.six-eighths,
[class~="9/12"],
.nine-twelfths {
  width: 75% !important;
}
[class~="1/5"],
.one-fifth,
[class~="2/10"],
.two-tenths {
  width: 20% !important;
}
[class~="2/5"],
.two-fifths,
[class~="4/10"],
.four-tenths {
  width: 40% !important;
}
[class~="3/5"],
.three-fifths,
[class~="6/10"],
.six-tenths {
  width: 60% !important;
}
[class~="4/5"],
.four-fifths,
[class~="8/10"],
.eight-tenths {
  width: 80% !important;
}
[class~="1/6"],
.one-sixth,
[class~="2/12"],
.two-twelfths {
  width: 16.6666666% !important;
}
[class~="5/6"],
.five-sixths,
[class~="10/12"],
.ten-twelfths {
  width: 83.3333333% !important;
}
[class~="1/8"],
.one-eighth {
  width: 12.5% !important;
}
[class~="3/8"],
.three-eighths {
  width: 37.5% !important;
}
[class~="5/8"],
.five-eighths {
  width: 62.5% !important;
}
[class~="7/8"],
.seven-eighths {
  width: 87.5% !important;
}
[class~="1/9"],
.one-ninth {
  width: 11.1111111% !important;
}
[class~="2/9"],
.two-ninths {
  width: 22.2222222% !important;
}
[class~="4/9"],
.four-ninths {
  width: 44.4444444% !important;
}
[class~="5/9"],
.five-ninths {
  width: 55.5555555% !important;
}
[class~="7/9"],
.seven-ninths {
  width: 77.7777777% !important;
}
[class~="8/9"],
.eight-ninths {
  width: 88.8888888% !important;
}
[class~="1/10"],
.one-tenth {
  width: 10% !important;
}
[class~="3/10"],
.three-tenths {
  width: 30% !important;
}
[class~="7/10"],
.seven-tenths {
  width: 70% !important;
}
[class~="9/10"],
.nine-tenths {
  width: 90% !important;
}
[class~="1/12"],
.one-twelfth {
  width: 8.3333333% !important;
}
[class~="5/12"],
.five-twelfths {
  width: 41.6666666% !important;
}
[class~="7/12"],
.seven-twelfths {
  width: 58.3333333% !important;
}
[class~="11/12"],
.eleven-twelfths {
  width: 91.6666666% !important;
}
@media (min-width: 480px) {
  .xs-width-auto {
    width: auto !important;
  }
  [class~="xs-1/1"],
  .xs-one-whole {
    width: 100% !important;
  }
  [class~="xs-1/2"],
  .xs-one-half,
  [class~="xs-2/4"],
  .xs-two-fourths,
  [class~="xs-3/6"],
  .xs-three-sixths,
  [class~="xs-4/8"],
  .xs-four-eighths,
  [class~="xs-5/10"],
  .xs-five-tenths,
  [class~="xs-6/12"],
  .xs-six-twelfths {
    width: 50% !important;
  }
  [class~="xs-1/3"],
  .xs-one-third,
  [class~="xs-2/6"],
  .xs-two-sixths,
  [class~="xs-3/9"],
  .xs-three-ninths,
  [class~="xs-4/12"],
  .xs-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="xs-2/3"],
  .xs-two-thirds,
  [class~="xs-4/6"],
  .xs-four-sixths,
  [class~="xs-6/9"],
  .xs-six-ninths,
  [class~="xs-8/12"],
  .xs-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="xs-1/4"],
  .xs-one-fourth,
  [class~="xs-2/8"],
  .xs-two-eighths,
  [class~="xs-3/12"],
  .xs-three-twelfths {
    width: 25% !important;
  }
  [class~="xs-3/4"],
  .xs-three-fourths,
  [class~="xs-6/8"],
  .xs-six-eighths,
  [class~="xs-9/12"],
  .xs-nine-twelfths {
    width: 75% !important;
  }
  [class~="xs-1/5"],
  .xs-one-fifth,
  [class~="xs-2/10"],
  .xs-two-tenths {
    width: 20% !important;
  }
  [class~="xs-2/5"],
  .xs-two-fifths,
  [class~="xs-4/10"],
  .xs-four-tenths {
    width: 40% !important;
  }
  [class~="xs-3/5"],
  .xs-three-fifths,
  [class~="xs-6/10"],
  .xs-six-tenths {
    width: 60% !important;
  }
  [class~="xs-4/5"],
  .xs-four-fifths,
  [class~="xs-8/10"],
  .xs-eight-tenths {
    width: 80% !important;
  }
  [class~="xs-1/6"],
  .xs-one-sixth,
  [class~="xs-2/12"],
  .xs-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="xs-5/6"],
  .xs-five-sixths,
  [class~="xs-10/12"],
  .xs-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="xs-1/8"],
  .xs-one-eighth {
    width: 12.5% !important;
  }
  [class~="xs-3/8"],
  .xs-three-eighths {
    width: 37.5% !important;
  }
  [class~="xs-5/8"],
  .xs-five-eighths {
    width: 62.5% !important;
  }
  [class~="xs-7/8"],
  .xs-seven-eighths {
    width: 87.5% !important;
  }
  [class~="xs-1/9"],
  .xs-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="xs-2/9"],
  .xs-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="xs-4/9"],
  .xs-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="xs-5/9"],
  .xs-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="xs-7/9"],
  .xs-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="xs-8/9"],
  .xs-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="xs-1/10"],
  .xs-one-tenth {
    width: 10% !important;
  }
  [class~="xs-3/10"],
  .xs-three-tenths {
    width: 30% !important;
  }
  [class~="xs-7/10"],
  .xs-seven-tenths {
    width: 70% !important;
  }
  [class~="xs-9/10"],
  .xs-nine-tenths {
    width: 90% !important;
  }
  [class~="xs-1/12"],
  .xs-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="xs-5/12"],
  .xs-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="xs-7/12"],
  .xs-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="xs-11/12"],
  .xs-eleven-twelfths {
    width: 91.6666666% !important;
  }
}
@media (min-width: 600px) {
  .sm-width-auto {
    width: auto !important;
  }
  [class~="sm-1/1"],
  .sm-one-whole {
    width: 100% !important;
  }
  [class~="sm-1/2"],
  .sm-one-half,
  [class~="sm-2/4"],
  .sm-two-fourths,
  [class~="sm-3/6"],
  .sm-three-sixths,
  [class~="sm-4/8"],
  .sm-four-eighths,
  [class~="sm-5/10"],
  .sm-five-tenths,
  [class~="sm-6/12"],
  .sm-six-twelfths {
    width: 50% !important;
  }
  [class~="sm-1/3"],
  .sm-one-third,
  [class~="sm-2/6"],
  .sm-two-sixths,
  [class~="sm-3/9"],
  .sm-three-ninths,
  [class~="sm-4/12"],
  .sm-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="sm-2/3"],
  .sm-two-thirds,
  [class~="sm-4/6"],
  .sm-four-sixths,
  [class~="sm-6/9"],
  .sm-six-ninths,
  [class~="sm-8/12"],
  .sm-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="sm-1/4"],
  .sm-one-fourth,
  [class~="sm-2/8"],
  .sm-two-eighths,
  [class~="sm-3/12"],
  .sm-three-twelfths {
    width: 25% !important;
  }
  [class~="sm-3/4"],
  .sm-three-fourths,
  [class~="sm-6/8"],
  .sm-six-eighths,
  [class~="sm-9/12"],
  .sm-nine-twelfths {
    width: 75% !important;
  }
  [class~="sm-1/5"],
  .sm-one-fifth,
  [class~="sm-2/10"],
  .sm-two-tenths {
    width: 20% !important;
  }
  [class~="sm-2/5"],
  .sm-two-fifths,
  [class~="sm-4/10"],
  .sm-four-tenths {
    width: 40% !important;
  }
  [class~="sm-3/5"],
  .sm-three-fifths,
  [class~="sm-6/10"],
  .sm-six-tenths {
    width: 60% !important;
  }
  [class~="sm-4/5"],
  .sm-four-fifths,
  [class~="sm-8/10"],
  .sm-eight-tenths {
    width: 80% !important;
  }
  [class~="sm-1/6"],
  .sm-one-sixth,
  [class~="sm-2/12"],
  .sm-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="sm-5/6"],
  .sm-five-sixths,
  [class~="sm-10/12"],
  .sm-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="sm-1/8"],
  .sm-one-eighth {
    width: 12.5% !important;
  }
  [class~="sm-3/8"],
  .sm-three-eighths {
    width: 37.5% !important;
  }
  [class~="sm-5/8"],
  .sm-five-eighths {
    width: 62.5% !important;
  }
  [class~="sm-7/8"],
  .sm-seven-eighths {
    width: 87.5% !important;
  }
  [class~="sm-1/9"],
  .sm-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="sm-2/9"],
  .sm-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="sm-4/9"],
  .sm-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="sm-5/9"],
  .sm-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="sm-7/9"],
  .sm-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="sm-8/9"],
  .sm-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="sm-1/10"],
  .sm-one-tenth {
    width: 10% !important;
  }
  [class~="sm-3/10"],
  .sm-three-tenths {
    width: 30% !important;
  }
  [class~="sm-7/10"],
  .sm-seven-tenths {
    width: 70% !important;
  }
  [class~="sm-9/10"],
  .sm-nine-tenths {
    width: 90% !important;
  }
  [class~="sm-1/12"],
  .sm-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="sm-5/12"],
  .sm-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="sm-7/12"],
  .sm-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="sm-11/12"],
  .sm-eleven-twelfths {
    width: 91.6666666% !important;
  }
}
@media (min-width: 768px) {
  .md-width-auto {
    width: auto !important;
  }
  [class~="md-1/1"],
  .md-one-whole {
    width: 100% !important;
  }
  [class~="md-1/2"],
  .md-one-half,
  [class~="md-2/4"],
  .md-two-fourths,
  [class~="md-3/6"],
  .md-three-sixths,
  [class~="md-4/8"],
  .md-four-eighths,
  [class~="md-5/10"],
  .md-five-tenths,
  [class~="md-6/12"],
  .md-six-twelfths {
    width: 50% !important;
  }
  [class~="md-1/3"],
  .md-one-third,
  [class~="md-2/6"],
  .md-two-sixths,
  [class~="md-3/9"],
  .md-three-ninths,
  [class~="md-4/12"],
  .md-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="md-2/3"],
  .md-two-thirds,
  [class~="md-4/6"],
  .md-four-sixths,
  [class~="md-6/9"],
  .md-six-ninths,
  [class~="md-8/12"],
  .md-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="md-1/4"],
  .md-one-fourth,
  [class~="md-2/8"],
  .md-two-eighths,
  [class~="md-3/12"],
  .md-three-twelfths {
    width: 25% !important;
  }
  [class~="md-3/4"],
  .md-three-fourths,
  [class~="md-6/8"],
  .md-six-eighths,
  [class~="md-9/12"],
  .md-nine-twelfths {
    width: 75% !important;
  }
  [class~="md-1/5"],
  .md-one-fifth,
  [class~="md-2/10"],
  .md-two-tenths {
    width: 20% !important;
  }
  [class~="md-2/5"],
  .md-two-fifths,
  [class~="md-4/10"],
  .md-four-tenths {
    width: 40% !important;
  }
  [class~="md-3/5"],
  .md-three-fifths,
  [class~="md-6/10"],
  .md-six-tenths {
    width: 60% !important;
  }
  [class~="md-4/5"],
  .md-four-fifths,
  [class~="md-8/10"],
  .md-eight-tenths {
    width: 80% !important;
  }
  [class~="md-1/6"],
  .md-one-sixth,
  [class~="md-2/12"],
  .md-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="md-5/6"],
  .md-five-sixths,
  [class~="md-10/12"],
  .md-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="md-1/8"],
  .md-one-eighth {
    width: 12.5% !important;
  }
  [class~="md-3/8"],
  .md-three-eighths {
    width: 37.5% !important;
  }
  [class~="md-5/8"],
  .md-five-eighths {
    width: 62.5% !important;
  }
  [class~="md-7/8"],
  .md-seven-eighths {
    width: 87.5% !important;
  }
  [class~="md-1/9"],
  .md-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="md-2/9"],
  .md-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="md-4/9"],
  .md-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="md-5/9"],
  .md-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="md-7/9"],
  .md-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="md-8/9"],
  .md-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="md-1/10"],
  .md-one-tenth {
    width: 10% !important;
  }
  [class~="md-3/10"],
  .md-three-tenths {
    width: 30% !important;
  }
  [class~="md-7/10"],
  .md-seven-tenths {
    width: 70% !important;
  }
  [class~="md-9/10"],
  .md-nine-tenths {
    width: 90% !important;
  }
  [class~="md-1/12"],
  .md-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="md-5/12"],
  .md-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="md-7/12"],
  .md-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="md-11/12"],
  .md-eleven-twelfths {
    width: 91.6666666% !important;
  }
}
@media (min-width: 960px) {
  .lg-width-auto {
    width: auto !important;
  }
  [class~="lg-1/1"],
  .lg-one-whole {
    width: 100% !important;
  }
  [class~="lg-1/2"],
  .lg-one-half,
  [class~="lg-2/4"],
  .lg-two-fourths,
  [class~="lg-3/6"],
  .lg-three-sixths,
  [class~="lg-4/8"],
  .lg-four-eighths,
  [class~="lg-5/10"],
  .lg-five-tenths,
  [class~="lg-6/12"],
  .lg-six-twelfths {
    width: 50% !important;
  }
  [class~="lg-1/3"],
  .lg-one-third,
  [class~="lg-2/6"],
  .lg-two-sixths,
  [class~="lg-3/9"],
  .lg-three-ninths,
  [class~="lg-4/12"],
  .lg-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="lg-2/3"],
  .lg-two-thirds,
  [class~="lg-4/6"],
  .lg-four-sixths,
  [class~="lg-6/9"],
  .lg-six-ninths,
  [class~="lg-8/12"],
  .lg-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="lg-1/4"],
  .lg-one-fourth,
  [class~="lg-2/8"],
  .lg-two-eighths,
  [class~="lg-3/12"],
  .lg-three-twelfths {
    width: 25% !important;
  }
  [class~="lg-3/4"],
  .lg-three-fourths,
  [class~="lg-6/8"],
  .lg-six-eighths,
  [class~="lg-9/12"],
  .lg-nine-twelfths {
    width: 75% !important;
  }
  [class~="lg-1/5"],
  .lg-one-fifth,
  [class~="lg-2/10"],
  .lg-two-tenths {
    width: 20% !important;
  }
  [class~="lg-2/5"],
  .lg-two-fifths,
  [class~="lg-4/10"],
  .lg-four-tenths {
    width: 40% !important;
  }
  [class~="lg-3/5"],
  .lg-three-fifths,
  [class~="lg-6/10"],
  .lg-six-tenths {
    width: 60% !important;
  }
  [class~="lg-4/5"],
  .lg-four-fifths,
  [class~="lg-8/10"],
  .lg-eight-tenths {
    width: 80% !important;
  }
  [class~="lg-1/6"],
  .lg-one-sixth,
  [class~="lg-2/12"],
  .lg-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="lg-5/6"],
  .lg-five-sixths,
  [class~="lg-10/12"],
  .lg-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="lg-1/8"],
  .lg-one-eighth {
    width: 12.5% !important;
  }
  [class~="lg-3/8"],
  .lg-three-eighths {
    width: 37.5% !important;
  }
  [class~="lg-5/8"],
  .lg-five-eighths {
    width: 62.5% !important;
  }
  [class~="lg-7/8"],
  .lg-seven-eighths {
    width: 87.5% !important;
  }
  [class~="lg-1/9"],
  .lg-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="lg-2/9"],
  .lg-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="lg-4/9"],
  .lg-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="lg-5/9"],
  .lg-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="lg-7/9"],
  .lg-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="lg-8/9"],
  .lg-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="lg-1/10"],
  .lg-one-tenth {
    width: 10% !important;
  }
  [class~="lg-3/10"],
  .lg-three-tenths {
    width: 30% !important;
  }
  [class~="lg-7/10"],
  .lg-seven-tenths {
    width: 70% !important;
  }
  [class~="lg-9/10"],
  .lg-nine-tenths {
    width: 90% !important;
  }
  [class~="lg-1/12"],
  .lg-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="lg-5/12"],
  .lg-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="lg-7/12"],
  .lg-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="lg-11/12"],
  .lg-eleven-twelfths {
    width: 91.6666666% !important;
  }
}
@media (min-width: 1140px) {
  .xl-width-auto {
    width: auto !important;
  }
  [class~="xl-1/1"],
  .xl-one-whole {
    width: 100% !important;
  }
  [class~="xl-1/2"],
  .xl-one-half,
  [class~="xl-2/4"],
  .xl-two-fourths,
  [class~="xl-3/6"],
  .xl-three-sixths,
  [class~="xl-4/8"],
  .xl-four-eighths,
  [class~="xl-5/10"],
  .xl-five-tenths,
  [class~="xl-6/12"],
  .xl-six-twelfths {
    width: 50% !important;
  }
  [class~="xl-1/3"],
  .xl-one-third,
  [class~="xl-2/6"],
  .xl-two-sixths,
  [class~="xl-3/9"],
  .xl-three-ninths,
  [class~="xl-4/12"],
  .xl-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="xl-2/3"],
  .xl-two-thirds,
  [class~="xl-4/6"],
  .xl-four-sixths,
  [class~="xl-6/9"],
  .xl-six-ninths,
  [class~="xl-8/12"],
  .xl-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="xl-1/4"],
  .xl-one-fourth,
  [class~="xl-2/8"],
  .xl-two-eighths,
  [class~="xl-3/12"],
  .xl-three-twelfths {
    width: 25% !important;
  }
  [class~="xl-3/4"],
  .xl-three-fourths,
  [class~="xl-6/8"],
  .xl-six-eighths,
  [class~="xl-9/12"],
  .xl-nine-twelfths {
    width: 75% !important;
  }
  [class~="xl-1/5"],
  .xl-one-fifth,
  [class~="xl-2/10"],
  .xl-two-tenths {
    width: 20% !important;
  }
  [class~="xl-2/5"],
  .xl-two-fifths,
  [class~="xl-4/10"],
  .xl-four-tenths {
    width: 40% !important;
  }
  [class~="xl-3/5"],
  .xl-three-fifths,
  [class~="xl-6/10"],
  .xl-six-tenths {
    width: 60% !important;
  }
  [class~="xl-4/5"],
  .xl-four-fifths,
  [class~="xl-8/10"],
  .xl-eight-tenths {
    width: 80% !important;
  }
  [class~="xl-1/6"],
  .xl-one-sixth,
  [class~="xl-2/12"],
  .xl-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="xl-5/6"],
  .xl-five-sixths,
  [class~="xl-10/12"],
  .xl-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="xl-1/8"],
  .xl-one-eighth {
    width: 12.5% !important;
  }
  [class~="xl-3/8"],
  .xl-three-eighths {
    width: 37.5% !important;
  }
  [class~="xl-5/8"],
  .xl-five-eighths {
    width: 62.5% !important;
  }
  [class~="xl-7/8"],
  .xl-seven-eighths {
    width: 87.5% !important;
  }
  [class~="xl-1/9"],
  .xl-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="xl-2/9"],
  .xl-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="xl-4/9"],
  .xl-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="xl-5/9"],
  .xl-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="xl-7/9"],
  .xl-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="xl-8/9"],
  .xl-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="xl-1/10"],
  .xl-one-tenth {
    width: 10% !important;
  }
  [class~="xl-3/10"],
  .xl-three-tenths {
    width: 30% !important;
  }
  [class~="xl-7/10"],
  .xl-seven-tenths {
    width: 70% !important;
  }
  [class~="xl-9/10"],
  .xl-nine-tenths {
    width: 90% !important;
  }
  [class~="xl-1/12"],
  .xl-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="xl-5/12"],
  .xl-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="xl-7/12"],
  .xl-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="xl-11/12"],
  .xl-eleven-twelfths {
    width: 91.6666666% !important;
  }
}
@media (min-width: 1380px) {
  .xxl-width-auto {
    width: auto !important;
  }
  [class~="xxl-1/1"],
  .xxl-one-whole {
    width: 100% !important;
  }
  [class~="xxl-1/2"],
  .xxl-one-half,
  [class~="xxl-2/4"],
  .xxl-two-fourths,
  [class~="xxl-3/6"],
  .xxl-three-sixths,
  [class~="xxl-4/8"],
  .xxl-four-eighths,
  [class~="xxl-5/10"],
  .xxl-five-tenths,
  [class~="xxl-6/12"],
  .xxl-six-twelfths {
    width: 50% !important;
  }
  [class~="xxl-1/3"],
  .xxl-one-third,
  [class~="xxl-2/6"],
  .xxl-two-sixths,
  [class~="xxl-3/9"],
  .xxl-three-ninths,
  [class~="xxl-4/12"],
  .xxl-four-twelfths {
    width: 33.3333333% !important;
  }
  [class~="xxl-2/3"],
  .xxl-two-thirds,
  [class~="xxl-4/6"],
  .xxl-four-sixths,
  [class~="xxl-6/9"],
  .xxl-six-ninths,
  [class~="xxl-8/12"],
  .xxl-eight-twelfths {
    width: 66.6666666% !important;
  }
  [class~="xxl-1/4"],
  .xxl-one-fourth,
  [class~="xxl-2/8"],
  .xxl-two-eighths,
  [class~="xxl-3/12"],
  .xxl-three-twelfths {
    width: 25% !important;
  }
  [class~="xxl-3/4"],
  .xxl-three-fourths,
  [class~="xxl-6/8"],
  .xxl-six-eighths,
  [class~="xxl-9/12"],
  .xxl-nine-twelfths {
    width: 75% !important;
  }
  [class~="xxl-1/5"],
  .xxl-one-fifth,
  [class~="xxl-2/10"],
  .xxl-two-tenths {
    width: 20% !important;
  }
  [class~="xxl-2/5"],
  .xxl-two-fifths,
  [class~="xxl-4/10"],
  .xxl-four-tenths {
    width: 40% !important;
  }
  [class~="xxl-3/5"],
  .xxl-three-fifths,
  [class~="xxl-6/10"],
  .xxl-six-tenths {
    width: 60% !important;
  }
  [class~="xxl-4/5"],
  .xxl-four-fifths,
  [class~="xxl-8/10"],
  .xxl-eight-tenths {
    width: 80% !important;
  }
  [class~="xxl-1/6"],
  .xxl-one-sixth,
  [class~="xxl-2/12"],
  .xxl-two-twelfths {
    width: 16.6666666% !important;
  }
  [class~="xxl-5/6"],
  .xxl-five-sixths,
  [class~="xxl-10/12"],
  .xxl-ten-twelfths {
    width: 83.3333333% !important;
  }
  [class~="xxl-1/8"],
  .xxl-one-eighth {
    width: 12.5% !important;
  }
  [class~="xxl-3/8"],
  .xxl-three-eighths {
    width: 37.5% !important;
  }
  [class~="xxl-5/8"],
  .xxl-five-eighths {
    width: 62.5% !important;
  }
  [class~="xxl-7/8"],
  .xxl-seven-eighths {
    width: 87.5% !important;
  }
  [class~="xxl-1/9"],
  .xxl-one-ninth {
    width: 11.1111111% !important;
  }
  [class~="xxl-2/9"],
  .xxl-two-ninths {
    width: 22.2222222% !important;
  }
  [class~="xxl-4/9"],
  .xxl-four-ninths {
    width: 44.4444444% !important;
  }
  [class~="xxl-5/9"],
  .xxl-five-ninths {
    width: 55.5555555% !important;
  }
  [class~="xxl-7/9"],
  .xxl-seven-ninths {
    width: 77.7777777% !important;
  }
  [class~="xxl-8/9"],
  .xxl-eight-ninths {
    width: 88.8888888% !important;
  }
  [class~="xxl-1/10"],
  .xxl-one-tenth {
    width: 10% !important;
  }
  [class~="xxl-3/10"],
  .xxl-three-tenths {
    width: 30% !important;
  }
  [class~="xxl-7/10"],
  .xxl-seven-tenths {
    width: 70% !important;
  }
  [class~="xxl-9/10"],
  .xxl-nine-tenths {
    width: 90% !important;
  }
  [class~="xxl-1/12"],
  .xxl-one-twelfth {
    width: 8.3333333% !important;
  }
  [class~="xxl-5/12"],
  .xxl-five-twelfths {
    width: 41.6666666% !important;
  }
  [class~="xxl-7/12"],
  .xxl-seven-twelfths {
    width: 58.3333333% !important;
  }
  [class~="xxl-11/12"],
  .xxl-eleven-twelfths {
    width: 91.6666666% !important;
  }
}

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

================================================
FILE: cardinal.less
================================================
@charset "UTF-8";

//
// Base
//
// These variables, mixins, and styles are required if you want to use this
// framework, and they should be included in the following order.
//

// Base -> Variables

@import url("base/variables.less");

// Base -> Mixins

@import url("base/mixins/to-rem.less");
@import url("base/mixins/media-queries.less");
@import url("base/mixins/antialiasing.less");
@import url("base/mixins/clearing.less");
@import url("base/mixins/font-face.less");
@import url("base/mixins/momentum-scrolling.less");
@import url("base/mixins/text-truncate.less");
@import url("base/mixins/vertically-centered.less");

// Base -> Normalize

@import url("base/normalize.less");

// Base -> Reset

@import url("base/reset.less");

// Base -> Debug (DO NOT USE THIS STYLESHEET IN PRODUCTION!)

//@import url("base/debug.less");

// Base -> Default Styles

@import url("base/root.less");
@import url("base/anchors.less");
@import url("base/text-elements.less");
@import url("base/headings.less");
@import url("base/lists.less");
@import url("base/horizontal-rules.less");
@import url("base/blockquotes.less");
@import url("base/code.less");
@import url("base/embedded-content.less");
@import url("base/form-elements.less");
@import url("base/tables.less");
@import url("base/print.less");

//
// Components
//

@import url("components/boxes.less");
@import url("components/buttons.less");
@import url("components/forms.less");
@import url("components/lists.less");
@import url("components/tables.less");

//
// Layout
//

@import url("layout/wrappers.less");
@import url("layout/grids.less");

//
// Utilities
//

@import url("utilities/display.less");
@import url("utilities/font-sizes.less");
@import url("utilities/floats.less");
@import url("utilities/margins.less");
@import url("utilities/paddings.less");
@import url("utilities/positions.less");
@import url("utilities/text-alignment.less");
@import url("utilities/vertical-alignment.less");
@import url("utilities/visually-hidden.less");
@import url("utilities/widths.less");


================================================
FILE: components/README.md
================================================
# Cardinal Components

Components are the discrete, custom UI elements that consist of specific semantics and styling, and make up the bulk of a UI.

# Table of Contents

- [Overview](#overview)
- [Included Components](#included-components)

# Overview

Cardinal Components each represent a single part of a UI, and should never try to do too much. Components are designed to stand on their own, and be extremely portable and reusable.

They should also be encapsulated as much as possible, to prevent styles from leaking outside of the component. This isolation prevents unnecessary complexity and [side effects](http://cbrac.co/1KFudtE), and results in higher code reuse.

# Included Components

## Boxes

[View Demo](http://codepen.io/cbracco/pen/OVNVjR)

The [Box Component](https://github.com/cbracco/cardinal/blob/master/components/boxes.less) is a visual way to enclose content and make it stand out from its surroundings. There are a few different modifiers available for boxes to change border and shadow styles.

## Buttons

[View Demo](http://codepen.io/cbracco/pen/oXxXGr)

The [Button Component](https://github.com/cbracco/cardinal/blob/master/components/buttons.less) is a clickable item that usually causes a change in state or performs an action of some sort. There are several different modifiers available for changing sizes, colors, styles, and more.

## Forms

[View Demo](http://codepen.io/cbracco/pen/QbNbOM)

The [Form Component](https://github.com/cbracco/cardinal/blob/master/components/forms.less) introduces a very light design layer to default form elements.

## Lists

[View Demo](http://codepen.io/cbracco/pen/LVNVOK)

The [List Component](https://github.com/cbracco/cardinal/blob/master/components/lists.less) provides several different modifiers for manipulating default list styles.

## Tables

[View Demo](http://codepen.io/cbracco/pen/ZGWGvR)

The [Table Component](https://github.com/cbracco/cardinal/blob/master/components/tables.less) includes several modifiers for manipulating default table styles.



================================================
FILE: components/boxes.less
================================================
/* ========================================================================== *\
   Layout -> Boxes ($layout-boxes)
\* ========================================================================== */

.box {
  display: block;
  .to-rem(padding, @box-padding);
  background-color: @box-bg-color;

  > *:last-child {
    margin-bottom: 0;
  }
}

/**
 * Give `.box` a border style.
 */

.box-border {
  .to-rem(border, @box-border-width, @box-border-style @box-border-color);
}

/**
 * Give `.box` rounded edges.
 */

.box-round {
  .to-rem(border-radius, @box-border-radius);
}

/**
 * Remove padding from default `.box`.
 */

.box-flush {
  padding: 0;
}

/**
 * Give `.box` the appearance of being raised above its surrounding area.
 */

.box-raise {
  .to-rem(box-shadow, 0 0 @box-sink-box-shadow-blur, hsla(0, 0%, 0%, 0.15));
}

/**
 * Give `.box` the appearance of being sunken beneath its surrounding area.
 */

.box-sink {
  .to-rem(box-shadow, 0 0 @box-sink-box-shadow-blur, hsla(0, 0%, 0%, 0.15) inset);
}


================================================
FILE: components/buttons.less
================================================
/* ========================================================================== *\
   Objects -> Buttons ($objects-buttons)
\* ========================================================================== */

.btn {
  font-family: @btn-font-family;
  font-weight: @btn-font-weight;
  line-height: @btn-line-height;
  display: inline-block;
  margin: 0;
  .to-rem(padding, @btn-padding);
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
  color: @btn-text-color;
  border: 0 none;
  background-color: @btn-background-color;

  .antialiasing();

  /**
   * States
   */

  &:hover {
    background-color: lighten(@btn-background-color, 2%);
  }

  &:active,
  &.is-active {
    background-color: darken(@btn-background-color, 2%);
    .to-rem(box-shadow, 0 0 @spacing-third, hsla(0, 0%, 0%, 0.25) inset);
  }

  &:active:focus {
    outline: 0 none;
  }

  &:disabled,
  &[disabled],
  &.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.50;
    box-shadow: none;
    text-shadow: none;
  }
}

/**
 * Shapes
 */

.btn-round,
input[type="button"].btn-round,
input[type="submit"].btn-round {
  .to-rem(border-radius, @btn-border-radius);
}

/**
 * Sizes
 */

.btn-xs {
  .to-rem(font-size, @btn-xs-font-size);
  .to-rem(padding, @btn-xs-padding);
}

.btn-sm {
  .to-rem(font-size, @btn-sm-font-size);
  .to-rem(padding, @btn-sm-padding);
}

.btn-block {
  display: block;
}

.screen-lg-min({
  .btn-lg,
  .btn-block {
    .to-rem(font-size, @btn-lg-font-size);
    .to-rem(padding, @btn-lg-padding);
  }
});

/**
 * Colors
 */

.btn-primary {
  color: @btn-primary-text-color;
  background-color: @btn-primary-bg-color;
}

.btn-primary:hover {
  background-color: lighten(@btn-primary-bg-color, 4%);
}

.btn-primary:active,
.btn-primary.is-active {
  background-color: darken(@btn-primary-bg-color, 4%);
}

/**
 * Groups
 */

.btn-group .btn {
  .to-rem(margin, @btn-group-margin);

  &.btn-lg {
    .to-rem(margin, @btn-lg-group-margin);
  }

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}


================================================
FILE: components/forms.less
================================================
/* ========================================================================== *\
   Objects -> Forms ($objects-forms)
\* ========================================================================== */

.form-label {
  display: inline-block;
}

.form-label + .form-input,
.form-label + .form-select,
.form-label + .form-textarea {
  .to-rem(margin-top, @form-label-margin);
}

/**
 * Give certain <input>, <select>, and <textarea> elements some default
 * styles
 */

.form-input[type="date"],
.form-input[type="datetime"],
.form-input[type="datetime-local"],
.form-input[type="email"],
.form-input[type="month"],
.form-input[type="number"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="tel"],
.form-input[type="text"],
.form-input[type="time"],
.form-input[type="url"],
.form-input[type="week"],
.form-select,
.form-textarea {
  line-height: @form-input-line-height;
  display: block;
  width: 100%;
  .to-rem(height, @form-input-height);
  .to-rem(padding, @form-input-padding);
  color: @form-input-text-color;
  .to-rem(border, @form-input-border-width, @form-input-border-style @form-input-border-color);

  &:focus {
    border-color: @form-input-focus-border-color;
  }
}

/**
 * 1. Increase padding to correct line-height in Firefox
 * 2. Give <select> menus a solid background color
 */

.form-select {
  .to-rem(padding, @form-select-padding);    /* 1 */
  background: @form-select-background-color; /* 2 */
}

.form-input-round {
  .to-rem(border-radius, @form-input-border-radius);
}


================================================
FILE: components/lists.less
================================================
/* ========================================================================== *\
   Objects -> Lists ($objects-lists)
\* ========================================================================== */

/**
 * Bare Lists
 *
 * Use to remove default list styles from <ol> and <ul> elements.
 */

.list-bare {
  list-style: none;

  li {
    margin-left: 0;
  }
}

/**
 * Reset Lists
 *
 * Use to remove all list styles from <ol> and <ul> elements.
 */

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    margin-left: 0;
  }
}

/**
 * Inline Lists
 *
 * Create inline-style list items with <ol> and <ul> elements.
 */

.list-inline {
  list-style: none;
  padding: 0;

  li {
    display: inline;
    margin-left: 0;
  }
}

/**
 * Delimited lists
 * Hat tip to @csswizardry for the technique.
 *
 * @link http://cbrac.co/1RvOzMU
 */

.list-inline-delimited {
  > li + li {
    &:before {
      content: @list-inline-delimiter-content;
    }
  }
}


================================================
FILE: components/tables.less
================================================
/* ========================================================================== *\
   Objects -> Tables ($objects-tables)
\* ========================================================================== */

/**
 * Wrap a <table> with a `.table-container` element to add horizontal scrolling
 * if the <table> contents overflow its grandparent.
 */

.table-container {
  .momentum-scrolling();
}

/* Default, borderless */
.table {
  width: 100%;
  max-width: 100%;

  caption {
    font-weight: @table-caption-font-weight;
    font-style: @table-caption-font-style;
    .to-rem(padding-bottom, @table-caption-padding-bottom);
  }

  th,
  tfoot td {
    font-weight: 700;
    text-align: left;
    color: @table-header-footer-text-color;
  }

  thead th,
  tfoot td {
    background-color: @table-header-footer-bg-color;
  }

  th,
  td {
    .to-rem(padding, @table-cell-padding);
    vertical-align: top;
  }
}

/**
 * Give the <table> element an outer border.
 */

.table-border {
  .to-rem(border, @table-border-width, @table-border-style @table-border-color);
}

/**
 * Give the <table> element inner cell borders.
 */

.table-border-cells th,
.table-border-cells td {
  .to-rem(border-top, @table-border-width, @table-border-style @table-border-color);
  .to-rem(border-left, @table-border-width, @table-border-style @table-border-color);
}

/**
 * Give Give the <table> inner row borders.
 */

.table-border-rows th,
.table-border-rows td {
  .to-rem(border-top, @table-border-width, @table-border-style @table-border-color);
}

/**
 * Remove border on 1st-row cells to avoid a double border.
 */

.table-border.table-border-cells thead:first-child tr:first-child th,
.table-border.table-border-cells thead:first-child tr:first-child td,
.table-border.table-border-rows thead:first-child tr:first-child th,
.table-border.table-border-rows thead:first-child tr:first-child td {
  border-top: 0;
}

/**
 * Remove border on 1st cells in every row to create a grid effect.
 */

.table-border-cells tr th:first-child,
.table-border-cells tr td:first-child {
  border-left: 0;
}

/**
 * Remove border on 1st-row cells to create a grid effect.
 */

.table-border-cells tr:first-child th,
.table-border-cells thead:first-child tr:first-child th {
  border-top: 0;
}

/**
 * Add a bottom border to the last row in the table.
 */

.table-border-rows tr:last-child td {
  .to-rem(border-bottom, @table-border-width, @table-border-style @table-border-color);
}

/**
 * Alternate `background-color` for all table rows.
 */

.table-striped tbody > tr:nth-child(odd) > td {
  background-color: @table-stripe-background-color;
}


================================================
FILE: gulpfile.js
================================================
// Load dependencies
var browserSync = require('browser-sync')
    browserSyncReload = browserSync.reload,
    del = require('del'),
    gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

// Set browser support for gulp-autoprefixer
var browserSupport = [
  'last 2 versions',
  'Android >= 4.2',
  'Chrome >= 25',
  'Firefox >= 19',
  'ie >= 9',
  'iOS >= 6',
  'Opera >= 12.1',
  'Safari >= 6'
];

// Set paths
var paths = {
  css: {
    dir: './',
    main: './cardinal.css',
    all: './*.css'
  },
  less: {
    dir: './',
    main: './cardinal.less',
    all: './**/*.less'
  }
};

// Set banner
var pkg = require('./package.json'),
    banner = ['/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.license %> License | <%= pkg.homepage %> */\n'];

// Error handler
var onError = function(err) {
  plugins.util.beep(); // Trigger a system beep
  plugins.util.log(
    plugins.util.colors.underline(plugins.util.colors.red('ERROR:'))
    + ' '
    + plugins.util.colors.cyan(err.plugin)
    + ' - '
    + err.message
  ); // Log a readable error message
};

// Clean (gulp clean)
gulp.task('clean', function(cb) {
  del([paths.css.dir], cb);
});

// Styles (gulp styles)
gulp.task('styles', function() {
  return gulp.src([
    paths.less.main
  ])
  .pipe(plugins.plumber({
    errorHandler: onError
  }))
  .pipe(plugins.sourcemaps.init({
    loadMaps: true
  }))
  .pipe(plugins.less())
  .pipe(plugins.autoprefixer({
    browsers: browserSupport
  }))
  .pipe(plugins.header(banner, { pkg: pkg }))
  .pipe(plugins.sourcemaps.write("./"))
  .pipe(gulp.dest(paths.css.dir))
  .pipe(plugins.csscomb())
  .pipe(plugins.size({
    gzip: false,
    showFiles: true,
    title:'unminified css'
  }))
  .pipe(plugins.minifyCss({
    shorthandCompacting: false,
    processImport: false
  }))
  .pipe(plugins.size({
    gzip: false,
    showFiles: true,
    title:'minified css'
  }))
  .pipe(plugins.size({
    gzip: true,
    showFiles: true,
    title:'minified css'
  }))
  .pipe(plugins.rename({
    suffix: '.min'
  }))
  .pipe(gulp.dest(paths.css.dir))
  .pipe(browserSyncReload({
    stream: true
  }));
});

// Browser Sync (gulp browser-sync)
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "./"
    }
  });
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSyncReload();
});

// Default (gulp)
gulp.task('default', ['styles', 'browser-sync'], function() {
  gulp.watch(paths.less.all, ['styles']);
  gulp.watch('*.html', ['bs-reload']);
});


================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Test Page</title>
    <link rel="stylesheet" href="cardinal.css">

    <style>
      .page > header > h1,
      section > header > h1,
      article > header > h1,
      legend.h1 {
        padding: 0.5rem;
      }

      .page > header > h1 {
        background-color: #aaa;
        border-bottom: 3px solid #777;
      }

      section > header > h1 {
        background-color: #dedede;
        border-bottom: 3px solid #aaa;
      }

      article > header > h1,
      legend.h1 {
        background-color: #f8f8f8;
        border-bottom: 3px solid #dedede;
      }

      .ztest-container {
        position: relative;
        height: 50px;
      }

      .ztest {
        position: absolute;
        top: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

      .ztest:hover {
        z-index: 9999;
      }

      .ztest.z1 {
        left: 0;
        background-color: #000;
        color: #fff;
      }

      .ztest.z2 {
        left: 30px;
        background-color: #222;
        color: #fff;
      }

      .ztest.z3 {
        left: 60px;
        background-color: #444;
        color: #fff;
      }

      .ztest.z4 {
        left: 90px;
        background-color: #666;
        color: #fff;
      }

      .ztest.z5 {
        left: 120px;
        background-color: #888;
      }

      .ztest.z6 {
        left: 150px;
        background-color: #aaa;
      }

      .ztest.z7 {
        left: 180px;
        background-color: #ccc;
      }

      .ztest.z8 {
        left: 210px;
        background-color: #eee;
      }

      .ztest.z9 {
        left: 240px;
        background-color: red;
        color: #fff;
      }

      .ztest.z10 {
        left: 270px;
        background-color: blue;
        color: #fff;
      }

      .ztest:hover {
        background-color: yellow;
        color: #444;
      }
    </style>
  </head>
  <body>
    <div id="top" class="page" role="document">
      <header role="banner">
        <h1>HTML5 Test Page</h1>
        <p>This is a test page filled with common HTML elements to be used to provide visual feedback while building CSS frameworks.</p>
      </header>
      <nav role="navigation">
        <ul>
          <li>
            <a href="#text">Text</a>
            <ul>
              <li><a href="#text__headings">Headings</a></li>
              <li><a href="#text__paragraphs">Paragraphs</a></li>
              <li><a href="#text__blockquotes">Blockquotes</a></li>
              <li><a href="#text__lists">Lists</a></li>
              <li><a href="#text__hr">Horizontal rules</a></li>
              <li><a href="#text__tables">Tabular data</a></li>
              <li><a href="#text__code">Code</a></li>
              <li><a href="#text__inline">Inline elements</a></li>
            </ul>
          </li>
          <li>
            <a href="#embedded">Embedded content</a>
            <ul>
              <li><a href="#embedded__images">Images</a></li>
              <li><a href="#embedded__audio">Audio</a></li>
              <li><a href="#embedded__video">Video</a></li>
              <li><a href="#embedded__canvas">Canvas</a></li>
              <li><a href="#embedded__progress">Progress bars</a></li>
              <li><a href="#embedded__svg">Inline SVG</a></li>
              <li><a href="#embedded__iframes">IFrames</a></li>
            </ul>
          </li>
          <li>
            <a href="#forms">Form elements</a>
            <ul>
              <li><a href="#forms__text">Text fields</a></li>
              <li><a href="#forms__select">Select menus</a></li>
              <li><a href="#forms__checkbox">Checkboxes</a></li>
              <li><a href="#forms__radio">Radio buttons</a></li>
              <li><a href="#forms__html5">HTML5 inputs</a></li>
              <li><a href="#forms__action">Action buttons</a></li>
            </ul>
          </li>
          <li>
            <a href="#components">Components</a>
            <ul>
              <li><a href="#components__boxes">Boxes</a></li>
              <li><a href="#components__buttons">Buttons</a></li>
              <li><a href="#components__forms">Forms</a></li>
              <li><a href="#components__lists">Lists</a></li>
              <li><a href="#components__tables">Tables</a></li>
            </ul>
          </li>
          <li>
            <a href="#layout">Layout</a>
            <ul>
              <li><a href="#layout__wrappers">Wrappers</a></li>
              <li><a href="#layout__grids">Grids</a></li>
            </ul>
          </li>
          <li>
            <a href="#utilities">Utilities</a>
            <ul>
              <li><a href="#utilities__display">Display</a></li>
              <li><a href="#utilities__floats">Floats</a></li>
              <li><a href="#utilities__font-sizes">Font Sizes</a></li>
              <li><a href="#utilities__margins">Margins</a></li>
              <li><a href="#utilities__paddings">Paddings</a></li>
              <li><a href="#utilities__positions">Positions</a></li>
              <li><a href="#utilities__text-alignment">Text Alignment</a></li>
              <li><a href="#utilities__vertical-alignment">Vertical Alignment</a></li>
              <li><a href="#utilities__visually-hidden">Visually Hidden</a></li>
              <li><a href="#utilities__widths">Widths</a></li>
              <li><a href="#utilities__z-index">Z-Index</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      <main role="main">
        <section id="text">
          <header><h1>Text</h1></header>
          <article id="text__headings">
            <header>
              <h1>Headings</h1>
            </header>
            <div>
              <h1>Heading 1</h1>
              <h2>Heading 2</h2>
              <h3>Heading 3</h3>
              <h4>Heading 4</h4>
              <h5>Heading 5</h5>
              <h6>Heading 6</h6>
              <h1 class="h6">Heading 1 <code>.h6</code></h1>
              <h2 class="h5">Heading 2 <code>.h5</code></h2>
              <h3 class="h4">Heading 3 <code>.h4</code></h3>
              <h4 class="h3">Heading 4 <code>.h3</code></h4>
              <h5 class="h2">Heading 5 <code>.h2</code></h5>
              <h6 class="h1">Heading 6 <code>.h1</code></h6>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__paragraphs">
            <header><h1>Paragraphs</h1></header>
            <div>
              <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__blockquotes">
            <header><h1>Blockquotes</h1></header>
            <div>
              <blockquote>
                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
                <cite><a href="#!">Said no one, ever.</a></cite>
              </blockquote>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>

          <article id="text__lists">
            <header><h1>Lists</h1></header>
            <div>
              <h3>Definition list</h3>
              <dl>
                <dt>Definition List Title</dt>
                <dd>This is a definition list division.</dd>
              </dl>
              <h3>Ordered List</h3>
              <ol>
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ol>
                    <li>Child List Item 1</li>
                    <li>
                      Child List Item 2
                      <ol>
                        <li>Grandchild List Item 1</li>
                        <li>Grandchild List Item 2</li>
                        <li>Grandchild List Item 3</li>
                      </ol>
                    </li>
                    <li>Child List Item 3</li>
                  </ol>
                </li>
                <li>List Item 3</li>
              </ol>
              <h3>Unordered List</h3>
              <ul>
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ul>
                    <li>Child List Item 1</li>
                    <li>
                      Child List Item 2
                      <ul>
                        <li>Grandchild List Item 1</li>
                        <li>Grandchild List Item 2</li>
                        <li>Grandchild List Item 3</li>
                      </ul>
                    </li>
                    <li>Child List Item 3</li>
                  </ul>
                </li>
                <li>List Item 3</li>
              </ul>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__hr">
            <header><h1>Horizontal rules</h1></header>
            <div>
              <hr>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__tables">
            <header><h1>Tabular data</h1></header>
            <div class="table-container">
              <table>
                <caption>Table Caption</caption>
                <thead>
                  <tr>
                    <th scope="col">Table Heading 1</th>
                    <th scope="col">Table Heading 2</th>
                    <th scope="col">Table Heading 3</th>
                    <th scope="col">Table Heading 4</th>
                    <th scope="col">Table Heading 5</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th scope="col">Table Footer 1</th>
                    <th scope="col">Table Footer 2</th>
                    <th scope="col">Table Footer 3</th>
                    <th scope="col">Table Footer 4</th>
                    <th scope="col">Table Footer 5</th>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                    <td>Table Cell 4</td>
                    <td>Table Cell 5</td>
                  </tr>
                  <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                    <td>Table Cell 4</td>
                    <td>Table Cell 5</td>
                  </tr>
                  <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                    <td>Table Cell 4</td>
                    <td>Table Cell 5</td>
                  </tr>
                  <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                    <td>Table Cell 4</td>
                    <td>Table Cell 5</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__code">
            <header><h1>Code</h1></header>
            <div>
              <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
              <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
              <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
              <h2>Pre-formatted text</h2>
              <pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__inline">
            <header><h1>Inline elements</h1></header>
            <div>
              <p><a href="#!">This is a text link</a>.</p>
              <p><strong>Strong is used to indicate strong importance.</strong></p>
              <p><em>This text has added emphasis.</em></p>
              <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
              <p>The <i>i element</i> is text that is offset from the normal text.</p>
              <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
              <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
              <p><s>This text has a strikethrough</s>.</p>
              <p>Superscript<sup>®</sup>.</p>
              <p>Subscript for things like H<sub>2</sub>O.</p>
              <p><small>This small text is small for for fine print, etc.</small></p>
              <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
              <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
              <p><cite>This is a citation.</cite></p>
              <p>The <dfn>dfn element</dfn> indicates a definition.</p>
              <p>The <mark>mark element</mark> indicates a highlight.</p>
              <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
              <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="embedded">
          <header><h1>Embedded content</h1></header>
          <article id="embedded__images">
            <header><h1>Images</h1></header>
            <div>
              <h3>No <code>&lt;figure&gt;</code> element</h3>
              <p><img src="http://placekitten.com/420/420" alt="Image alt text"></p>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
              <figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
              <figure>
                <img src="http://placekitten.com/420/420" alt="Image alt text">
                <figcaption>Here is a caption for this image.</figcaption>
              </figure>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__audio">
            <header><h1>Audio</h1></header>
            <div><p><audio controls="">audio</audio></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__video">
            <header><h1>Video</h1></header>
            <div><p><video controls="">video</video></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__canvas">
            <header><h1>Canvas</h1></header>
            <div><p><canvas>canvas</canvas></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__progress">
            <header><h1>Progress bars</h1></header>
            <div><p><progress>progress</progress></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__svg">
            <header><h1>Inline SVG</h1></header>
            <div><p><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__iframes">
            <header><h1>IFrames</h1></header>
            <div><p><iframe src="http://www.google.com" width="100%" height="300" frameborder="0"></iframe></p></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="forms">
          <header><h1>Form elements</h1></header>
          <form action="">
            <fieldset id="forms__text">
              <legend class="h1">Text fields</legend>
              <p>
                <label for="textinput">Text Input <abbr title="Required">*</abbr></label>
                <input id="textinput" type="text" placeholder="Text Input">
              </p>
              <p>
                <label for="passwordinput">Password</label>
                <input id="passwordinput" type="password" placeholder="Type your Password">
              </p>
              <p>
                <label for="textarea">Textarea</label>
                <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__select">
              <legend class="h1">Select menus</legend>
              <p>
                <label for="selectinput">Select</label>
                <select id="selectinput">
                  <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                  </optgroup>
                </select>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__checkbox">
              <legend class="h1">Checkboxes</legend>
              <ul class="u-list-bare">
                <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
                <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
                <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
              </ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__radio">
              <legend class="h1">Radio buttons</legend>
              <ul class="u-list-bare">
                <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
                <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
                <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
              </ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__html5">
              <legend class="h1">HTML5 inputs</legend>
              <p>
                <label for="telinput">Telephone</label>
                <input id="telinput" type="tel" placeholder="(555) 555-5555">
              </p>
              <p>
                <label for="urlinput">Web Address</label>
                <input id="urlinput" type="url" placeholder="http://yoursite.com">
              </p>
              <p>
                <label for="emailinput">Email Address</label>
                <input id="emailinput" type="email" placeholder="name@email.com">
              </p>
              <p>
                <label for="searchinput">Search</label>
                <input id="searchinput" type="search" placeholder="Enter Search Term">
              </p>
              <p>
                <label for="numberinput">Number Input <abbr title="Required">*</abbr></label>
                <input id="numberinput" type="number" placeholder="Enter a Number" pattern="[0-9]*">
              </p>
              <p>
                <label for="dateinput">Date input</label>
                <input type="date" id="dateinput" value="1970-01-01">
              </p>
              <p>
                <label for="monthinput">Month input</label>
                <input type="month" id="monthinput" value="1970-01">
              </p>
              <p>
                <label for="weekinput">Week input</label>
                <input type="week" id="weekinput" value="1970-W01">
              </p>
              <p>
                <label for="datetimeinput">Datetime input</label>
                <input type="datetime" id="datetimeinput" value="1970-01-01T00:00:00Z">
              </p>
              <p>
                <label for="datetimelocalinput">Datetime-local input</label>
                <input type="datetime-local" id="datetimelocalinput" value="1970-01-01T00:00">
              </p>
              <p>
                <label for="colorinput">Color input</label>
                <input type="color" id="colorinput" value="#000000">
              </p>
              <p>
                <label for="rangeinput">Range input</label>
                <input type="range" id="rangeinput" value="10">
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__action">
              <legend class="h1">Action buttons</legend>
              <p>
                <input type="submit" value="Input">
                <button type="submit">Button</button>
                <input type="reset" value="Reset">
                <input type="submit" value="Disabled" disabled>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
          </form>
        </section>
        <section id="layout">
          <header><h1>Layout</h1></header>
          <article id="layout__wrappers">
            <header>
              <h1>Wrappers</h1>
            </header>
            <div>
              <div class="wrapper mb"><div class="box">This is a wrapper.</div></div>
              <div class="wrapper wrapper-flush mb"><div class="box">This is a flush wrapper.</div></div>
              <div class="wrapper wrapper-full-bleed mb"><div class="box">This is a full-bleed wrapper.</div></div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="layout__grids">
            <header>
              <h1>Grids</h1>
            </header>
            <div>
              <h2>Basic</h2>
              <div class="grid mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <h2>Basic, using <code>&lt;ul&gt;</code></h2>
              <ul class="grid mb">
                <li class="grid-item 1/12"><div class="box tc">1</div></li>
                <li class="grid-item 1/12"><div class="box tc">2</div></li>
                <li class="grid-item 1/12"><div class="box tc">3</div></li>
                <li class="grid-item 1/12"><div class="box tc">4</div></li>
                <li class="grid-item 1/12"><div class="box tc">5</div></li>
                <li class="grid-item 1/12"><div class="box tc">6</div></li>
                <li class="grid-item 1/12"><div class="box tc">7</div></li>
                <li class="grid-item 1/12"><div class="box tc">8</div></li>
                <li class="grid-item 1/12"><div class="box tc">9</div></li>
                <li class="grid-item 1/12"><div class="box tc">10</div></li>
                <li class="grid-item 1/12"><div class="box tc">11</div></li>
                <li class="grid-item 1/12"><div class="box tc">12</div></li>
              </ul>
              <h2>RTL</h2>
              <div class="grid grid-rtl mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <h2>Gutters</h2>
              <div class="grid gutter-0 mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <div class="grid gutter-1px mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <div class="grid gutter-1/2 mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <div class="grid gutter-2 mb">
                <div class="grid-item 1/12"><div class="box tc">1</div></div>
                <div class="grid-item 1/12"><div class="box tc">2</div></div>
                <div class="grid-item 1/12"><div class="box tc">3</div></div>
                <div class="grid-item 1/12"><div class="box tc">4</div></div>
                <div class="grid-item 1/12"><div class="box tc">5</div></div>
                <div class="grid-item 1/12"><div class="box tc">6</div></div>
                <div class="grid-item 1/12"><div class="box tc">7</div></div>
                <div class="grid-item 1/12"><div class="box tc">8</div></div>
                <div class="grid-item 1/12"><div class="box tc">9</div></div>
                <div class="grid-item 1/12"><div class="box tc">10</div></div>
                <div class="grid-item 1/12"><div class="box tc">11</div></div>
                <div class="grid-item 1/12"><div class="box tc">12</div></div>
              </div>
              <h2>Alignment</h2>
              <div class="grid grid-align-top mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat est adipisci sapiente quisquam sit earum libero obcaecati nobis, pariatur. Commodi placeat iure quidem enim, molestiae saepe cupiditate porro numquam nulla! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vitae soluta quis accusantium, praesentium modi non rem magni magnam deleniti laborum, cupiditate eligendi necessitatibus, esse sint a repudiandae repellat eos.</div></div>
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <div class="grid grid-align-middle mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat est adipisci sapiente quisquam sit earum libero obcaecati nobis, pariatur. Commodi placeat iure quidem enim, molestiae saepe cupiditate porro numquam nulla! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vitae soluta quis accusantium, praesentium modi non rem magni magnam deleniti laborum, cupiditate eligendi necessitatibus, esse sint a repudiandae repellat eos.</div></div>
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <div class="grid grid-align-bottom mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat est adipisci sapiente quisquam sit earum libero obcaecati nobis, pariatur. Commodi placeat iure quidem enim, molestiae saepe cupiditate porro numquam nulla! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vitae soluta quis accusantium, praesentium modi non rem magni magnam deleniti laborum, cupiditate eligendi necessitatibus, esse sint a repudiandae repellat eos.</div></div>
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <div class="grid grid-align-left mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <div class="grid grid-align-center mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <div class="grid grid-align-right mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <h2>Shrink Wrap</h2>
              <div class="grid grid-shrink-wrap mb">
                <div class="grid-item 1/2"><div class="box tc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque repellat adipisci dolorem earum aspernatur, aliquid.</div></div>
              </div>
              <h2>Responsive</h2>
              <div class="grid mb">
                <div class="grid-item xs-1/3"><div class="box mb tc">1</div></div>
                <div class="grid-item xs-1/3"><div class="box mb tc">2</div></div>
                <div class="grid-item xs-1/3"><div class="box mb tc">3</div></div>
                <div class="grid-item sm-1/4"><div class="box mb tc">4</div></div>
                <div class="grid-item sm-1/4"><div class="box mb tc">5</div></div>
                <div class="grid-item sm-1/4"><div class="box mb tc">6</div></div>
                <div class="grid-item sm-1/4"><div class="box mb tc">7</div></div>
                <div class="grid-item md-1/10"><div class="box mb tc">8</div></div>
                <div class="grid-item md-9/10"><div class="box mb tc">9</div></div>
                <div class="grid-item lg-3/5"><div class="box mb tc">10</div></div>
                <div class="grid-item lg-2/5"><div class="box mb tc">11</div></div>
                <div class="grid-item lg-1/1"><div class="box tc">12</div></div>
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="components">
          <header><h1>Components</h1></header>
          <article id="components__boxes">
            <header>
              <h1>Boxes</h1>
            </header>
            <div>
              <div class="box mb">This is a box.</div>
              <div class="box box-border mb">This is a box with a border.</div>
              <div class="box box-round mb">This is a round box.</div>
              <div class="box box-flush mb">This is a flush box.</div>
              <div class="box box-border box-raise mb">This is a raised box with a border.</div>
              <div class="box box-sink mb">This is a sunken box.</div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="components__buttons">
            <header>
              <h1>Buttons</h1>
            </header>
            <div>
              <p class="btn-group">
                <a href="#!" class="btn btn-xs">I’m a button</a>
                <a href="#!" class="btn btn-sm">I’m a button</a>
                <a href="#!" class="btn">I’m a button</a>
                <a href="#!" class="btn btn-lg">I’m a button</a>
                <a href="#!" class="btn btn-primary">I’m a button</a>
                <a href="#!" class="btn btn-sm">I’m a button</a>
                <a href="#!" class="btn btn-xs">I’m a button</a>
              </p>

              <p class="btn-group">
                <a href="#!" class="btn btn-round btn-xs">I’m a button</a>
                <a href="#!" class="btn btn-round btn-sm">I’m a button</a>
                <a href="#!" class="btn btn-round">I’m a button</a>
                <a href="#!" class="btn btn-round btn-lg">I’m a button</a>
                <a href="#!" class="btn btn-round btn-primary">I’m a button</a>
                <a href="#!" class="btn btn-round btn-sm">I’m a button</a>
                <a href="#!" class="btn btn-round btn-xs">I’m a button</a>
              </p>

              <p class="btn-group">
                <button class="btn btn-xs">I’m a button</button>
                <button class="btn btn-sm">I’m a button</button>
                <button class="btn">I’m a button</button>
                <button class="btn btn-lg">I’m a button</button>
                <button class="btn btn-primary">I’m a button</button>
                <button class="btn btn-sm">I’m a button</button>
                <button class="btn btn-xs">I’m a button</button>
              </p>

              <p class="btn-group">
                <button class="btn btn-round btn-xs">I’m a button</button>
                <button class="btn btn-round btn-sm">I’m a button</button>
                <button class="btn btn-round">I’m a button</button>
                <button class="btn btn-round btn-lg">I’m a button</button>
                <button class="btn btn-round btn-primary">I’m a button</button>
                <button class="btn btn-round btn-sm">I’m a button</button>
                <button class="btn btn-round btn-xs">I’m a button</button>
              </p>

              <p class="btn-group">
                <input type="submit" class="btn btn-xs" value="I’m a button">
                <input type="submit" class="btn btn-sm" value="I’m a button">
                <input type="submit" class="btn" value="I’m a button">
                <input type="submit" class="btn btn-lg" value="I’m a button">
                <input type="submit" class="btn btn-primary" value="I’m a button">
                <input type="submit" class="btn btn-sm" value="I’m a button">
                <input type="submit" class="btn btn-xs" value="I’m a button">
              </p>

              <p class="btn-group">
                <input type="submit" class="btn btn-round btn-xs" value="I’m a button">
                <input type="submit" class="btn btn-round btn-sm" value="I’m a button">
                <input type="submit" class="btn btn-round" value="I’m a button">
                <input type="submit" class="btn btn-round btn-lg" value="I’m a button">
                <input type="submit" class="btn btn-round btn-primary" value="I’m a button">
                <input type="submit" class="btn btn-round btn-sm" value="I’m a button">
                <input type="submit" class="btn btn-round btn-xs" value="I’m a button">
              </p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="components__forms">
            <header>
              <h1>Forms</h1>
            </header>
            <div>
              <form action="">
                <fieldset>
                  <legend class="h2">Basic</legend>
                  <p>
                    <label class="form-label" for="textinput2">Form Label</label>
                    <input class="form-input" id="textinput2" type="text" placeholder="Text Input">
                  </p>
                  <p>
                    <label class="form-label" for="textarea2">Form Label</label>
                    <textarea class="form-textarea" id="textarea2" rows="8" cols="48" placeholder="Enter your message here"></textarea>
                  </p>
                  <p>
                    <label class="form-label" for="selectinput2">Form Label</label>
                    <select class="form-select" id="selectinput2">
                      <optgroup label="Option Group">
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                      </optgroup>
                    </select>
                  </p>
                </fieldset>
                <fieldset>
                  <legend class="h2">Grid Layouts</legend>
                  <div class="grid">
                    <p class="grid-item md-one-half">
                      <label class="form-label" for="textinput3">Form Label</label>
                      <input class="form-input" id="textinput3" type="text" placeholder="Text Input">
                    </p>
                    <p class="grid-item md-one-half">
                      <label class="form-label" for="textinput4">Form Label</label>
                      <input class="form-input" id="textinput4" type="text" placeholder="Text Input">
                    </p>
                    <p class="grid-item">
                      <label class="form-label" for="textarea3">Form Label</label>
                      <textarea class="form-textarea" id="textarea3" rows="8" cols="48" placeholder="Enter your message here"></textarea>
                    </p>
                    <p class="grid-item two-thirds">
                      <input class="form-input form-input-round" id="textinput3" type="text" placeholder="Text Input">
                    </p>
                    <p class="grid-item one-third">
                      <button class="btn btn-primary btn-round one-whole">Submit</button>
                    </p>
                  </div>
                </fieldset>
              </form>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="components__lists">
            <header><h1>Lists</h1></header>
            <div>
              <h3>Bare List</h3>
              <p><code>.list-bare</code></p>
              <ul class="list-bare">
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ul>
                    <li>Child List Item 1</li>
                    <li>
                      Child List Item 2
                      <ul>
                        <li>Grandchild List Item 1</li>
                        <li>Grandchild List Item 2</li>
                        <li>Grandchild List Item 3</li>
                      </ul>
                    </li>
                    <li>Child List Item 3</li>
                  </ul>
                </li>
                <li>List Item 3</li>
              </ul>
              <h3>Reset List</h3>
              <p><code>.list-reset</code></p>
              <ul class="list-reset">
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ul>
                    <li>Child List Item 1</li>
                    <li>
                      Child List Item 2
                      <ul>
                        <li>Grandchild List Item 1</li>
                        <li>Grandchild List Item 2</li>
                        <li>Grandchild List Item 3</li>
                      </ul>
                    </li>
                    <li>Child List Item 3</li>
                  </ul>
                </li>
                <li>List Item 3</li>
              </ul>
              <br>
              <h3>Inline List</h3>
              <p><code>.list-inline</code></p>
              <ul class="list-inline">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              <h3>Inline, Delimited List</h3>
              <p><code>.list-inline.list-inline-delimited</code></p>
              <ul class="list-inline list-inline-delimited">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="components__tables">
            <header>
              <h1>Tables</h1>
            </header>
            <div>
              <div class="table-container">
                <table class="table">
                  <caption>.table</caption>
                  <tbody>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Thing 1</th>
                      <th scope="col">Thing 2</th>
                      <th scope="col">Thing 3</th>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>1246</td>
                      <td>Hello</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>4652</td>
                      <td>Goodbye</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>1657</td>
                      <td>Cheers</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>1498</td>
                      <td>Beers</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>3286</td>
                      <td>Awesome</td>
                      <td>true</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-container">
                <table class="table table-border">
                  <caption>.table-border</caption>
                  <tbody>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Thing 1</th>
                      <th scope="col">Thing 2</th>
                      <th scope="col">Thing 3</th>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>1246</td>
                      <td>Hello</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>4652</td>
                      <td>Goodbye</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>1657</td>
                      <td>Cheers</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>1498</td>
                      <td>Beers</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>3286</td>
                      <td>Awesome</td>
                      <td>true</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-container">
                <table class="table table-border-rows">
                  <caption>.table-border-rows</caption>
                  <tbody>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Thing 1</th>
                      <th scope="col">Thing 2</th>
                      <th scope="col">Thing 3</th>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>1246</td>
                      <td>Hello</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>4652</td>
                      <td>Goodbye</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>1657</td>
                      <td>Cheers</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>1498</td>
                      <td>Beers</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>3286</td>
                      <td>Awesome</td>
                      <td>true</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-container">
                <table class="table table-border-cells">
                  <caption>.table-border-cells</caption>
                  <tbody>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Thing 1</th>
                      <th scope="col">Thing 2</th>
                      <th scope="col">Thing 3</th>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td>1246</td>
                      <td>Hello</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>4652</td>
                      <td>Goodbye</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>1657</td>
                      <td>Cheers</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>1498</td>
                      <td>Beers</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>3286</td>
                      <td>Awesome</td>
                      <td>true</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-container">
                <table class="table table-border table-striped">
                  <caption>.table-border.table-striped, with <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code></caption>
                  <thead>
                    <th scope="col">#</th>
                    <th scope="col">Thing 1</th>
                    <th scope="col">Thing 2</th>
                    <th scope="col">Thing 3</th>
                  </thead>
                  <tfoot>
                    <th scope="col">#</th>
                    <th scope="col">Thing 1</th>
                    <th scope="col">Thing 2</th>
                    <th scope="col">Thing 3</th>
                  </tfoot>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>1246</td>
                      <td>Hello</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>4652</td>
                      <td>Goodbye</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>1657</td>
                      <td>Cheers</td>
                      <td>false</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>1498</td>
                      <td>Beers</td>
                      <td>true</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>3286</td>
                      <td>Awesome</td>
                      <td>true</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="utilities">
          <header><h1>Utilities</h1></header>
          <article id="utilities__display">
            <header>
              <h1>Display</h1>
            </header>
            <div>
              <div class="box dn md-db mb">This box is only visible on medium-sized devices and up.</div>
              <div class="box dib mb">This box is displayed inline-block.</div>

              <div class="dt mb">
                <div class="dtc one-half"><div class="box mr-">This box is displayed as  a table cell inside a parent table.</div></div>
                <div class="dtc one-half"><div class="box ml-">This box is displayed as  a table cell inside a parent table.</div></div>
              </div>

              <div class="dt mb">
                <div class="dtr"><div class="box">This is displayed as a table row inside a parent table.</div></div>
                <div class="dtr"><div class="box">This is displayed as a table row inside a parent table.</div></div>
                <div class="dtr"><div class="box">This is displayed as a table row inside a parent table.</div></div>
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__floats">
            <header>
              <h1>Floats</h1>
            </header>
            <div>
              <div class="cf">
                <div class="fl one-half mb"><div class="box">This box is floated to the left.</div></div>
                <div class="clear"></div>
                <div class="fr one-half mb"><div class="box">This box is floated to the right.</div></div>
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__font-sizes">
            <header>
              <h1>Font Sizes</h1>
            </header>
            <div>
              <h2><code>.fz*</code></h2>
              <div class="mb">
                <span class="fz---">A</span>
                <span class="fz--">A</span>
                <span class="fz-">A</span>
                <span class="fz">A</span>
                <span class="fz+">A</span>
                <span class="fz++">A</span>
                <span class="fz+++">A</span>
                <span class="fz100">A</span>
                <span class="fz0">A</span>
              </div>
              <h2><code>.h*</code></h2>
              <div class="mb">
                <span class="h1">A</span>
                <span class="h2">A</span>
                <span class="h3">A</span>
                <span class="h4">A</span>
                <span class="h5">A</span>
                <span class="h6">A</span>
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__margins">
            <header>
              <h1>Margins</h1>
            </header>
            <div>
              <div class="m--"><code>.m--</code></div>
              <div class="m-"><code>.m-</code></div>
              <div class="m"><code>.m</code></div>
              <div class="m+"><code>.m+</code></div>
              <div class="m++"><code>.m++</code></div>
              <div class="mv--"><code>.mv--</code></div>
              <div class="mv-"><code>.mv-</code></div>
              <div class="mv"><code>.mv</code></div>
              <div class="mv+"><code>.mv+</code></div>
              <div class="mv++"><code>.mv+</code></div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__paddings">
            <header>
              <h1>Paddings</h1>
            </header>
            <div>
              <div class="p--"><code>.p--</code></div>
              <div class="p-"><code>.p-</code></div>
              <div class="p"><code>.p</code></div>
              <div class="p+"><code>.p+</code></div>
              <div class="p++"><code>.p++</code></div>
              <div class="pv--"><code>.pv--</code></div>
              <div class="pv-"><code>.pv-</code></div>
              <div class="pv"><code>.pv</code></div>
              <div class="pv+"><code>.pv+</code></div>
              <div class="pv++"><code>.pv++</code></div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__text-alignment">
            <header>
              <h1>Text Alignment</h1>
            </header>
            <div>
              <div class="tl mb">This text is aligned to the left.</div>
              <div class="tc mb">This text is aligned to the center.</div>
              <div class="tr mb">This text is aligned to the right.</div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__vertical-alignment">
            <header>
              <h1>Vertical Alignment</h1>
            </header>
            <div>
              <div>
                <span class="dib vat">This text is top-aligned.</span>
                <img src="http://placekitten.com/220/220" alt="Image alt text">
              </div>
              <div>
                <span class="dib vam">This text is vertically-aligned.</span>
                <img src="http://placekitten.com/220/220" alt="Image alt text">
              </div>
              <div>
                <span class="dib vab">This text is bottom-aligned.</span>
                <img src="http://placekitten.com/220/220" alt="Image alt text">
              </div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__visually-hidden">
            <header>
              <h1>Visually Hidden</h1>
            </header>
            <div>
              <div class="vh mb">This text is hidden visually, but available for screenreaders.</div>
              <div class="vh focusable mb">This text is hidden visually, but available for screenreaders and is focusable with the keyboard.</div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__widths">
            <header>
              <h1>Widths</h1>
            </header>
            <div>
              <div class="box 1/12 mb"><code>.1/12</code></div>
              <div class="box 2/12 mb"><code>.2/12</code></div>
              <div class="box 3/12 mb"><code>.3/12</code></div>
              <div class="box 4/12 mb"><code>.4/12</code></div>
              <div class="box 5/12 mb"><code>.5/12</code></div>
              <div class="box 6/12 mb"><code>.6/12</code></div>
              <div class="box 7/12 mb"><code>.7/12</code></div>
              <div class="box 8/12 mb"><code>.8/12</code></div>
              <div class="box 9/12 mb"><code>.9/12</code></div>
              <div class="box 10/12 mb"><code>.10/12</code></div>
              <div class="box 11/12 mb"><code>.11/12</code></div>
              <div class="box 1/1 mb"><code>.1/1</code></div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="utilities__z-index">
            <header>
              <h1>Z-Index</h1>
            </header>
            <div class="ztest-container mb">
              <div class="z1 ztest">1</div>
              <div class="z2 ztest">2</div>
              <div class="z3 ztest">3</div>
              <div class="z4 ztest">4</div>
              <div class="z5 ztest">5</div>
              <div class="z6 ztest">6</div>
              <div class="z7 ztest">7</div>
              <div class="z8 ztest">8</div>
              <div class="z9 ztest">9</div>
              <div class="z10 ztest">10</div>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
      </main>
      <footer role="contentinfo">
        <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>.</p>
      </footer>
    </div>
  </body>
</html>


================================================
FILE: layout/README.md
================================================
# Cardinal Layout

The `layout/` directory is where all the style tools for creating UI layouts exist. These tools work in tandem with some of Cardinal’s utilities (e.g. widths) to make it easy for front-end developers to whip up fast, flexible UI layouts.

# Table of Contents

- [Overview](#overview)
- [Included Layout Tools](#included-layout-tools)
  - [Wrappers](#wrappers)
  - [Grids](#grids)

# Overview

Using a combination of `.wrapper` and `.grid` elements, you can create some very interesting and complex layouts. Each of these tools also include modifier classes to change their behavior, even across different device sizes using prefixed class names like `.lg-2/3`, which sets the width of the element to 2/3, or 66.667% for devices “large” and up.

# Included Layout Tools

## Wrappers

[View Demo](http://codepen.io/cbracco/pen/eNZNML)

The `.wrapper` class is a common CSS layout tool that sets a maximum width and centers the element inside its parent.

### Usage

```
<div class="wrapper">Hello World!</div>
```

It also includes a few modifier classes to force wrappers to either sit flush with its parent, or remove the maximum width, like so:

```
<div class="wrapper wrapper-flush">I am 100% the width of my parent!</div>
<div class="wrapper wrapper-full-bleed">I don’t have a maximum width or horizontal centering!</div>
```

## Grids

[View Demo](http://codepen.io/cbracco/pen/LVNVdw)

The `.grid` classes are used to create both simple and complex UI layouts. There are several modifier classes available for changing the order and alignment of `.grid-item` elements across various device sizes.

`.grid-item` classes are used alongside the [width utility classes](https://github.com/cbracco/cardinal/blob/master/utilities/widths.less) to help create layouts.

### Usage

```
<div class="grid">
  <div class="grid-item 1/12">1</div>
  <div class="grid-item 1/12">2</div>
  <div class="grid-item 1/12">3</div>
  <div class="grid-item 1/12">4</div>
  <div class="grid-item 1/12">5</div>
  <div class="grid-item 1/12">6</div>
  <div class="grid-item 1/12">7</div>
  <div class="grid-item 1/12">8</div>
  <div class="grid-item 1/12">9</div>
  <div class="grid-item 1/12">10</div>
  <div class="grid-item 1/12">11</div>
  <div class="grid-item 1/12">12</div>
</div>
```


================================================
FILE: layout/grids.less
================================================
/* ========================================================================== *\
   Layout -> Grids ($layout-grids)
\* ========================================================================== */

/**
 * Grid System
 * Hat tip to @csswizardry for the `display: inline-block` grid technique.
 *
 * @link http://cbrac.co/1RvPb53
 */

/**
 * Grid containers
 * 1. Remove default styles in case `.grid` is on a <ul> or <ol> element.
 * 2. Default gutter width.
 * 3. Hack to remove `inline-block` whitespace. This causes some issues on pre-
 *    Jellybean and Jellybean versions of Android
 *
 *    @link http://cbrac.co/1xh3hs0
 *    @link http://cbrac.co/16xcjcl
 */

.grid {
  margin: 0;                                /* 1 */
  .to-rem(margin-left, -@grid-gutter-base); /* 2 */
  padding: 0;                               /* 1 */
  list-style: none;                         /* 1 */
  font-size: @font-size-0;                  /* 3 */
}

/**
 * Grid items
 * 1. Remove default styles in case `.grid-item` is on an <li> element.
 * 2. `.grid-item` elements are 100% width by default.
 * 3. Default gutter width = @grid-gutter-base.
 * 4. Ensure `.grid-item` is aligned to the top of its container.
 * 5. Reset font size to the global default.
 */

.grid-item {
  display: inline-block;
  margin-left: 0;                           /* 1 */
  width: 100%;                              /* 2 */
  .to-rem(padding-left, @grid-gutter-base); /* 3 */
  vertical-align: top;                      /* 4 */
  .to-rem(font-size, @font-size);           /* 5 */
}

/**
 * Grid items rendering order
 * .grid-ltr = left-to-right (default)
 * .grid-rtl = right-to-left
 */

.breakpoint-prefixes({
  .@{breakpoint-prefix}grid-ltr {
    direction: ltr;
    text-align: left;

    > .grid-item {
      direction: rtl;
      text-align: left;
    }
  }

  .@{breakpoint-prefix}grid-rtl {
    direction: rtl;
    text-align: left;

    > .grid-item {
      direction: ltr;
      text-align: left;
    }
  }
});

/**
 * Grid gutters
 */

.breakpoint-prefixes({
  // No gutters
  .@{breakpoint-prefix}gutter-0,
  .@{breakpoint-prefix}gutter-none {
    margin-left: 0;
  }

  .@{breakpoint-prefix}gutter-0 > .grid-item,
  .@{breakpoint-prefix}gutter-none > .grid-item {
    padding-left: 0;
  }

  // 1px gutters
  .@{breakpoint-prefix}gutter-1px {
    .to-rem(margin-left, -@grid-gutter-1px);
  }

  .@{breakpoint-prefix}gutter-1px > .grid-item {
    .to-rem(padding-left, @grid-gutter-1px);
  }

  // Half gutters
  [class~="@{breakpoint-prefix}gutter-1/2"],
  .@{breakpoint-prefix}gutter-half {
    .to-rem(margin-left, -@grid-gutter-half);
  }

  [class~="@{breakpoint-prefix}gutter-1/2"] > .grid-item,
  .@{breakpoint-prefix}gutter-half > .grid-item {
    .to-rem(padding-left, @grid-gutter-half);
  }

  // Whole gutters
  .@{breakpoint-prefix}gutter-1,
  .@{breakpoint-prefix}gutter-whole {
    .to-rem(margin-left, -@grid-gutter-base);
  }

  .@{breakpoint-prefix}gutter-1 > .grid-item,
  .@{breakpoint-prefix}gutter-whole > .grid-item {
    .to-rem(padding-left, @grid-gutter-base);
  }

  // Double gutters
  .@{breakpoint-prefix}gutter-2,
  .@{breakpoint-prefix}gutter-double {
    .to-rem(margin-left, -@grid-gutter-double);
  }

  .@{breakpoint-prefix}gutter-2 > .grid-item,
  .@{breakpoint-prefix}gutter-double > .grid-item {
    .to-rem(padding-left, @grid-gutter-double);
  }
});


/**
 * Grid item alignment
 */

.grid-align-top > .grid-item {
  vertical-align: top;
}

.grid-align-middle > .grid-item {
  vertical-align: middle;
}

.grid-align-bottom > .grid-item {
  vertical-align: bottom;
}

.grid-align-left {
  text-align: left;

  > .grid-item {
    text-align: left;
  }
}

.grid-align-center {
  text-align: center;

  > .grid-item {
    text-align: left;
  }
}

.grid-align-right {
  text-align: right;

  > .grid-item {
    text-align: left;
  }
}

/**
 * Grid item "shrink wrap"
 *
 * Force `.grid-item` to be the width of its content.
 */

.grid-shrink-wrap > .grid-item {
  width: auto;
}


================================================
FILE: layout/wrappers.less
================================================
/* ========================================================================== *\
   Layout -> Wrappers ($layout-wrappers)
\* ========================================================================== */

.wrapper {
  width: @wrapper-width;
  .to-rem(max-width, @wrapper-max-width);
  margin: 0 auto;

  @media print {
    width: auto;
  }
}

/**
 * Force `.wrapper` to sit flush with its parent.
 */

.wrapper-flush {
  width: 100%;
}

/**
 * Remove any width constraints from the `.wrapper`.
 */

.wrapper-full-bleed {
  width: auto;
  max-width: none;
}


================================================
FILE: package.json
================================================
{
  "name": "cardinalcss",
  "version": "3.7.0",
  "homepage": "http://cardinalcss.com",
  "main": "cardinal.css",
  "author": {
    "name": "Chris Bracco"
  },
  "description": "Cardinal is a modular, 'mobile-first' CSS framework built with performance and scalability in mind.",
  "repository": {
    "type": "git",
    "url": "https://github.com/cbracco/cardinal.git"
  },
  "bugs": {
    "url": "https://github.com/cbracco/cardinal/issues"
  },
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "~2.0.0-rc3",
    "del": "~1.1.1",
    "gulp": "~3.8.10",
    "gulp-autoprefixer": "~2.1.0",
    "gulp-csscomb": "~3.0.3",
    "gulp-csslint": "~0.1.5",
    "gulp-header": "~1.2.2",
    "gulp-less": "~3.0.3",
    "gulp-load-plugins": "~0.8.0",
    "gulp-minify-css": "~0.4.3",
    "gulp-plumber": "~0.6.6",
    "gulp-rename": "~1.2.0",
    "gulp-size": "~1.2.0",
    "gulp-sourcemaps": "~1.3.0",
    "gulp-util": "~3.0.2",
    "gulp-watch": "~4.1.0",
    "l": "~0.0.1"
  }
}


================================================
FILE: utilities/README.md
================================================
# Cardinal Utilities

The `utilities/` directory houses all the helper classes included in Cardinal.

Utilities are typically used for rapid prototyping, or a last resort when needing to apply styles to an element.

# Table of Contents

- [Overview](#overview)
- [Included Utilities](#included-utilities)
  - [Display](#display)
  - [Floats](#floats)
  - [Font Sizes](#font-sizes)
  - [Margins](#margins)
  - [Paddings](#paddings)
  - [Positions](#positions)
  - [Text Alignment](#text-alignment)
  - [Vertical Alignment](#vertical-alignment)
  - [Visually Hidden](#visually-hidden)
  - [Font Sizes](#font-sizes)
  - [Widths](#widths)
  - [Z-Index](#z-index)
- [Credits](#credits)

# Overview

Utilities apply common CSS styles either as a single declaration or a very simple, common pattern of styles.

In Cardinal, all utilities are **optional** except for [width utility classes](https://github.com/cbracco/cardinal/blob/master/utilities/widths.less), but that is only if you plan on also using Cardinal’s [grid layout tools](https://github.com/cbracco/cardinal/blob/master/layout/grids.less), which depend on those utilities.

- Utilities should only ever affect one element.
- Utilities do not typically affect child elements.
- Utilities should follow the [single responsibility principle](http://cbrac.co/1KFzLUY) and the [open/closed principle](http://en.wikipedia.org/wiki/Open/closed_principle) whenever possible.

Cardinal utilities have a very simplistic and minimal naming convention that is pretty specific to itself. Each utility file includes a brief legend at the top of the file to help describe what each letter combination represents.

Many utilities also include breakpoint-specific modifer classes e.g. `.lg-dn`, `.xs-fl`, etc.

# Included Utilities

## Display

[View Demo](http://codepen.io/cbracco/pen/Xbdbqy)

Display utilities allow you to manipulate the `display` property of a given element.

### Usage

```
<!-- Hides the given element on devices large and up -->
<div class="lg-dn">You can’t see me on devices large and up!</div>
```

## Floats

[View Demo](http://codepen.io/cbracco/pen/doMojy)

Display utilities allow you to manipulate the `float` property of a given element.

### Usage

```
<!-- Floats the given element to the right on devices medium and up -->
<div class="md-fr">I am floated to the right on devices medium and up!</div>
```

## Font Sizes

[View Demo](http://codepen.io/cbracco/pen/WvwvKZ)

Font Size utilities allow you to manipulate the `font-size` property of a given element.

### Usage

```
<!-- Increase the given element’s font size -->
<div class="fz--- xs-fz-- sm-fz- md-fz lg-fz+ xl-fz++ xxl-fz+++">My font size changes from small to big depending on device size!</div>
```

## Margins

[View Demo](http://codepen.io/cbracco/pen/qdZdye)

Margin utilities allow you to manipulate the `margin` property of a given element.

### Usage

```
<!-- Increase the given element’s top margin on devices large and up -->
<div class="mt lg-mt++">My top margin increases on devices large and up!</div>
```

## Paddings

[View Demo](http://codepen.io/cbracco/pen/QbNbVa)

Padding utilities allow you to manipulate the `padding` property of a given element.

### Usage

```
<!-- Increase the given element’s left padding on devices medium and up -->
<div class="pl md-pl+">My left padding increases on devices medium and up!</div>
```

## Positions

[View Demo](http://codepen.io/cbracco/pen/EjKjeM)

Position utilities allow you to manipulate the `position` property of a given element.

### Usage

```
<!-- Change the given element’s positioning from static (default) to fixed on devices small and up -->
<div class="sm-pf">My positioning changes from static to fixed on devices small and up!</div>
```

## Text Alignment

[View Demo](http://codepen.io/cbracco/pen/KpzpGo)

Text Alignment utilities allow you to manipulate the `text-align` property of a given element.

### Usage

```
<!-- Change the given element’s text alignment from left (default) to center on devices extra-large and up -->
<div class="xl-tc">My text alignment changes from left to center on devices extra-large and up!</div>
```

## Vertical Alignment

[View Demo](http://codepen.io/cbracco/pen/aONORx)

Vertical Alignment utilities allow you to manipulate the `vertical-align` property of a given element.

### Usage

```
<!-- Change the given element’s vertical alignment from baseline (default) to middle on devices extra-small and up -->
<div class="xs-vam">My text alignment changes from left to center on devices extra-small and up!</div>
```

## Visually Hidden

[View Demo](http://codepen.io/cbracco/pen/RPaPqa)

Visually Hidden utilities allow you to manipulate the visibility of a given element.

### Usage

```
<!-- Hide only visually, but have it available for screenreaders. -->
<div class="vh">You cannot see me visually, but I am still accessible to screenreaders.</div>
<!-- Hide only visually, but have it available for screenreadersa and also focusable when navigating with the keyboard. -->
<div class="vh focusable">You cannot see me visually, but I am still accessible to screenreaders and also focusable when navigating with the keyboard.</div>
```

## Widths

[View Demo](http://codepen.io/cbracco/pen/MwywzB)

Width utilities allow you to manipulate the `width` property of a given element.

### Usage

```
<!-- Change the given element’s width from 100% (default) to 50% on devices extra-small and up -->
<div class="1/1 xs-1/2">My width changes from 100% to 50% on devices extra-small and up!</div>
```

## Z-Index

[View Demo](http://codepen.io/cbracco/pen/waGaRq)

Z-Index utilities allow you to manipulate the `z-index` property of a given element.

### Usage

```
<!-- Change the given element’s z-index from 1 to 7 on devices small and up -->
<div class="z1 sm-z7">My z-index changes from 1 to 7 on devices small and up!</div>
```

# Credits

Cardinal’s utilities are influenced by the following projects, organizations, and individuals:

- [inuit.css](https://github.com/inuitcss/) ([@csswizardry](https://github.com/csswizardry/))
- [TACHYONS](http://tachyons.io/) ([@mrmrs](https://github.com/mrmrs/))
- [Scally](https://github.com/chris-pearce/scally/) ([@chris-pearce](https://github.com/chris-pearce/))

Many thanks for your hard work and great ideas!


================================================
FILE: utilities/display.less
================================================
/* ========================================================================== *\
   Utilities -> Display ($utilities-display)
\* ========================================================================== */

//
// d    = display
// n    = none
// i    = inline
// b    = block
// ib   = inline-block
// it   = inline-table
// t    = table
// tr   = table-row
// trg  = table-row-group
// tc   = table-cell
// col  = table-column
// colg = table-column-group
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}dn {
    display: none !important;
  }

  .@{breakpoint-prefix}di {
    display: inline !important;
  }

  .@{breakpoint-prefix}db {
    display: block !important;
  }

  /**
  * 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
  *    parent styled `inline-block` displays at its default size, not 100% of the
  *    parent container.
  */

  .@{breakpoint-prefix}dib {
    display: inline-block !important;
    max-width: 100% !important; /* 1 */
  }

  .@{breakpoint-prefix}dit {
    display: inline-table !important;
  }

  .@{breakpoint-prefix}dt {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  .@{breakpoint-prefix}dtr {
    display: table-row !important;
  }

  .@{breakpoint-prefix}dtrg {
    display: table-row-group !important;
  }

  .@{breakpoint-prefix}dtc {
    display: table-cell !important;
  }

  .@{breakpoint-prefix}dtcol {
    display: table-column !important;
  }

  .@{breakpoint-prefix}dtcolg {
    display: table-column-group !important;
  }
});


================================================
FILE: utilities/floats.less
================================================
/* ========================================================================== *\
   Utilities -> Floats ($utilities-floats)
\* ========================================================================== */

//
// f = float
// l = left
// r = right
// n = none
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}fl {
    float: left !important;
  }

  .@{breakpoint-prefix}fr {
    float: right !important;
  }

  .@{breakpoint-prefix}fn {
    float: none !important;
  }
});

/**
 * Clearfix
 *
 * 1. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 * 2. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 *
 * @link http://cbrac.co/1FT6aqC
 */

.cf {
  &:before,
  &:after {
    display: table; // 1
    content: " ";   // 2
  }
  &:after {
    clear: both;
  }
}

/**
 * Clear floats with an extra markup element.
 *
 * @link http://cbrac.co/SFv1Ua
 */

.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}


================================================
FILE: utilities/font-sizes.less
================================================
/* ========================================================================== *\
   Utilities -> Font Sizes ($utilities-font-sizes)
\* ========================================================================== */

//
// fz  = font-size
// --- = smallest
// --  = smaller
// -   = small
// +   = large
// ++  = larger
// +++ = largest
// 100 = 100%
// 0   = none

/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */

.breakpoint-prefixes({
  .@{breakpoint-prefix}fz--- {
    .to-rem(font-size, @font-size-xxx-small, ~"!important");
  }

  .@{breakpoint-prefix}fz-- {
    .to-rem(font-size, @font-size-xx-small, ~"!important");
  }

  .@{breakpoint-prefix}fz- {
    .to-rem(font-size, @font-size-x-small, ~"!important");
  }

  .@{breakpoint-prefix}fz {
    .to-rem(font-size, @font-size, ~"!important");
  }

  .@{breakpoint-prefix}fz\+ {
    .to-rem(font-size, @font-size-x-large, ~"!important");
  }

  .@{breakpoint-prefix}fz\+\+ {
    .to-rem(font-size, @font-size-xx-large, ~"!important");
  }

  .@{breakpoint-prefix}fz\+\+\+ {
    .to-rem(font-size, @font-size-xxx-large, ~"!important");
  }

  .@{breakpoint-prefix}fz100 {
    font-size: @font-size-100 !important;
  }

  .@{breakpoint-prefix}fz0 {
    font-size: 0 !important;
  }
});


================================================
FILE: utilities/margins.less
================================================
/* ========================================================================== *\
   Utilities -> Margins ($utilities-margins)
\* ========================================================================== */

//
// m  = margin
// t  = top
// r  = right
// b  = bottom
// l  = left
// h  = horizontal
// v  = vertical
// -- = quarter
// -  = half
// +  = double
// ++ = quadruple
// 0  = none

/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */

.breakpoint-prefixes({
  // Whole
  .@{breakpoint-prefix}m {
    .to-rem(margin, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}mt {
    .to-rem(margin-top, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}mr {
    .to-rem(margin-right, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}mb {
    .to-rem(margin-bottom, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}ml {
    .to-rem(margin-left, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}mh {
    .to-rem(margin-right, @spacing-base, ~"!important");
    .to-rem(margin-left, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}mv {
    .to-rem(margin-top, @spacing-base, ~"!important");
    .to-rem(margin-bottom, @spacing-base, ~"!important");
  }

  // Quarter (--)
  .@{breakpoint-prefix}m-- {
    .to-rem(margin, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}mt-- {
    .to-rem(margin-top, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}mr-- {
    .to-rem(margin-right, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}mb-- {
    .to-rem(margin-bottom, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}ml-- {
    .to-rem(margin-left, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}mh-- {
    .to-rem(margin-right, @spacing-fourth, ~"!important");
    .to-rem(margin-left, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}mv-- {
    .to-rem(margin-top, @spacing-fourth, ~"!important");
    .to-rem(margin-bottom, @spacing-fourth, ~"!important");
  }

  // Half (-)
  .@{breakpoint-prefix}m- {
    .to-rem(margin, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}mt- {
    .to-rem(margin-top, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}mr- {
    .to-rem(margin-right, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}mb- {
    .to-rem(margin-bottom, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}ml- {
    .to-rem(margin-left, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}mh- {
    .to-rem(margin-right, @spacing-half, ~"!important");
    .to-rem(margin-left, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}mv- {
    .to-rem(margin-top, @spacing-half, ~"!important");
    .to-rem(margin-bottom, @spacing-half, ~"!important");
  }

  // Double (+)
  .@{breakpoint-prefix}m\+ {
    .to-rem(margin, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}mt\+ {
    .to-rem(margin-top, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}mr\+ {
    .to-rem(margin-right, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}mb\+ {
    .to-rem(margin-bottom, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}ml\+ {
    .to-rem(margin-left, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}mh\+ {
    .to-rem(margin-right, @spacing-double, ~"!important");
    .to-rem(margin-left, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}mv\+ {
    .to-rem(margin-top, @spacing-double, ~"!important");
    .to-rem(margin-bottom, @spacing-double, ~"!important");
  }

  // Quadruple (++)
  .@{breakpoint-prefix}m\+\+ {
    .to-rem(margin, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}mt\+\+ {
    .to-rem(margin-top, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}mr\+\+ {
    .to-rem(margin-right, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}mb\+\+ {
    .to-rem(margin-bottom, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}ml\+\+ {
    .to-rem(margin-left, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}mh\+\+ {
    .to-rem(margin-right, @spacing-quadruple, ~"!important");
    .to-rem(margin-left, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}mv\+\+ {
    .to-rem(margin-top, @spacing-quadruple, ~"!important");
    .to-rem(margin-bottom, @spacing-quadruple, ~"!important");
  }

  // None (0)
  .@{breakpoint-prefix}m0 {
    .to-rem(margin, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}mt0 {
    .to-rem(margin-top, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}mr0 {
    .to-rem(margin-right, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}mb0 {
    .to-rem(margin-bottom, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}ml0 {
    .to-rem(margin-left, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}mh0 {
    .to-rem(margin-right, @spacing-none, ~"!important");
    .to-rem(margin-left, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}mv0 {
    .to-rem(margin-top, @spacing-none, ~"!important");
    .to-rem(margin-bottom, @spacing-none, ~"!important");
  }
});


================================================
FILE: utilities/paddings.less
================================================
/* ========================================================================== *\
   Utilities -> Paddings ($utilities-paddings)
\* ========================================================================== */

//
// p  = padding
// t  = top
// r  = right
// b  = bottom
// l  = left
// h  = horizontal
// v  = vertical
// -- = quarter
// -  = half
// +  = double
// ++ = quadruple
// 0  = none
//

/**
 * Hat tip to @csswizardry for the +/- technique.
 *
 * @link http://cbrac.co/1Pd1ZKl
 */

.breakpoint-prefixes({
  // Whole
  .@{breakpoint-prefix}p {
    .to-rem(padding, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}pt {
    .to-rem(padding-top, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}pr {
    .to-rem(padding-right, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}pb {
    .to-rem(padding-bottom, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}pl {
    .to-rem(padding-left, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}ph {
    .to-rem(padding-right, @spacing-base, ~"!important");
    .to-rem(padding-left, @spacing-base, ~"!important");
  }

  .@{breakpoint-prefix}pv {
    .to-rem(padding-top, @spacing-base, ~"!important");
    .to-rem(padding-bottom, @spacing-base, ~"!important");
  }

  // Quarter (--)
  .@{breakpoint-prefix}p-- {
    .to-rem(padding, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}pt-- {
    .to-rem(padding-top, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}pr-- {
    .to-rem(padding-right, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}pb-- {
    .to-rem(padding-bottom, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}pl-- {
    .to-rem(padding-left, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}ph-- {
    .to-rem(padding-right, @spacing-fourth, ~"!important");
    .to-rem(padding-left, @spacing-fourth, ~"!important");
  }

  .@{breakpoint-prefix}pv-- {
    .to-rem(padding-top, @spacing-fourth, ~"!important");
    .to-rem(padding-bottom, @spacing-fourth, ~"!important");
  }

  // Half (-)
  .@{breakpoint-prefix}p- {
    .to-rem(padding, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}pt- {
    .to-rem(padding-top, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}pr- {
    .to-rem(padding-right, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}pb- {
    .to-rem(padding-bottom, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}pl- {
    .to-rem(padding-left, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}ph- {
    .to-rem(padding-right, @spacing-half, ~"!important");
    .to-rem(padding-left, @spacing-half, ~"!important");
  }

  .@{breakpoint-prefix}pv- {
    .to-rem(padding-top, @spacing-half, ~"!important");
    .to-rem(padding-bottom, @spacing-half, ~"!important");
  }

  // Double (+)
  .@{breakpoint-prefix}p\+ {
    .to-rem(padding, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}pt\+ {
    .to-rem(padding-top, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}pr\+ {
    .to-rem(padding-right, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}pb\+ {
    .to-rem(padding-bottom, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}pl\+ {
    .to-rem(padding-left, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}ph\+ {
    .to-rem(padding-right, @spacing-double, ~"!important");
    .to-rem(padding-left, @spacing-double, ~"!important");
  }

  .@{breakpoint-prefix}pv\+ {
    .to-rem(padding-top, @spacing-double, ~"!important");
    .to-rem(padding-bottom, @spacing-double, ~"!important");
  }

  // Quadruple (++)
  .@{breakpoint-prefix}p\+\+ {
    .to-rem(padding, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}pt\+\+ {
    .to-rem(padding-top, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}pr\+\+ {
    .to-rem(padding-right, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}pb\+\+ {
    .to-rem(padding-bottom, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}pl\+\+ {
    .to-rem(padding-left, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}ph\+\+ {
    .to-rem(padding-right, @spacing-quadruple, ~"!important");
    .to-rem(padding-left, @spacing-quadruple, ~"!important");
  }

  .@{breakpoint-prefix}pv\+\+ {
    .to-rem(padding-top, @spacing-quadruple, ~"!important");
    .to-rem(padding-bottom, @spacing-quadruple, ~"!important");
  }

  // None (0)
  .@{breakpoint-prefix}p0 {
    .to-rem(padding, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}pt0 {
    .to-rem(padding-top, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}pr0 {
    .to-rem(padding-right, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}pb0 {
    .to-rem(padding-bottom, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}pl0 {
    .to-rem(padding-left, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}ph0 {
    .to-rem(padding-right, @spacing-none, ~"!important");
    .to-rem(padding-left, @spacing-none, ~"!important");
  }

  .@{breakpoint-prefix}pv0 {
    .to-rem(padding-top, @spacing-none, ~"!important");
    .to-rem(padding-bottom, @spacing-none, ~"!important");
  }
});


================================================
FILE: utilities/positions.less
================================================
/* ========================================================================== *\
   Utilities -> Positions ($utilities-positions)
\* ========================================================================== */

//
// pos = position
// a   = absolute
// f   = fixed
// r   = relative
// s   = static
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}posa {
    position: absolute !important;
  }

  .@{breakpoint-prefix}posf {
    position: fixed !important;
  }

  .@{breakpoint-prefix}posr {
    position: relative !important;
  }

  .@{breakpoint-prefix}poss {
    position: static !important;
  }
});


================================================
FILE: utilities/text-alignment.less
================================================
/* ========================================================================== *\
   Utilities -> Text Alignment ($utilities-text-alignment)
\* ========================================================================== */

//
// Text alignment
//
// t = text-align
// l = left
// r = right
// c = center
// j = justify
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}tl {
    text-align: left !important;
  }

  .@{breakpoint-prefix}tr {
    text-align: right !important;
  }

  .@{breakpoint-prefix}tc {
    text-align: center !important;
  }

  .@{breakpoint-prefix}tj {
    text-align: justify !important;
  }
});


================================================
FILE: utilities/vertical-alignment.less
================================================
/* ========================================================================== *\
   Utilities -> Vertical Alignment ($utilities-vertical-alignment)
\* ========================================================================== */

//
// Vertical alignment
//
// va = vertical-align
// t  = top
// b  = bottom
// m  = middle
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}vat {
    vertical-align: top !important;
  }

  .@{breakpoint-prefix}vab {
    vertical-align: bottom !important;
  }

  .@{breakpoint-prefix}vam {
    vertical-align: middle !important;
  }
});


================================================
FILE: utilities/visually-hidden.less
================================================
/* ========================================================================== *\
   Utilities -> Visually Hidden ($utilities-visually-hidden)
\* ========================================================================== */

//
// Visually Hidden
//
// vh = visually hidden
//

/**
 * Hide only visually, but have it available for screenreaders.
 *
 * @link http://cbrac.co/TUcUgH
 */

.vh {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
}

/**
 * Extends the `.vh` class to allow the element to be focusable when navigated
 * to via the keyboard.
 *
 * @link http://cbrac.co/RR8gO6
 */

.vh.focusable:active,
.vh.focusable:focus {
    position: static;
    overflow: visible;
    clip: auto;
    margin: 0;
    width: auto;
    height: auto;
}


================================================
FILE: utilities/widths.less
================================================
/* ========================================================================== *\
   Utilities -> Widths ($utilities-widths)
\* ========================================================================== */

/**
 * Hat tip to @csswizardry for the fraction classes technique.
 *
 * @link http://cbrac.co/1RvQXmS
 */

.breakpoint-prefixes({
  // Auto
  .@{breakpoint-prefix}width-auto {
    width: auto !important;
  }

  // Whole
  [class~="@{breakpoint-prefix}1/1"],
  .@{breakpoint-prefix}one-whole {
    width: 100% !important;
  }

  // Halves
  [class~="@{breakpoint-prefix}1/2"],
  .@{breakpoint-prefix}one-half,
  [class~="@{breakpoint-prefix}2/4"],
  .@{breakpoint-prefix}two-fourths,
  [class~="@{breakpoint-prefix}3/6"],
  .@{breakpoint-prefix}three-sixths,
  [class~="@{breakpoint-prefix}4/8"],
  .@{breakpoint-prefix}four-eighths,
  [class~="@{breakpoint-prefix}5/10"],
  .@{breakpoint-prefix}five-tenths,
  [class~="@{breakpoint-prefix}6/12"],
  .@{breakpoint-prefix}six-twelfths {
    width: 50% !important;
  }

  // Thirds
  [class~="@{breakpoint-prefix}1/3"],
  .@{breakpoint-prefix}one-third,
  [class~="@{breakpoint-prefix}2/6"],
  .@{breakpoint-prefix}two-sixths,
  [class~="@{breakpoint-prefix}3/9"],
  .@{breakpoint-prefix}three-ninths,
  [class~="@{breakpoint-prefix}4/12"],
  .@{breakpoint-prefix}four-twelfths {
    width: 33.3333333% !important;
  }

  [class~="@{breakpoint-prefix}2/3"],
  .@{breakpoint-prefix}two-thirds,
  [class~="@{breakpoint-prefix}4/6"],
  .@{breakpoint-prefix}four-sixths,
  [class~="@{breakpoint-prefix}6/9"],
  .@{breakpoint-prefix}six-ninths,
  [class~="@{breakpoint-prefix}8/12"],
  .@{breakpoint-prefix}eight-twelfths {
    width: 66.6666666% !important;
  }

  // Fourths
  [class~="@{breakpoint-prefix}1/4"],
  .@{breakpoint-prefix}one-fourth,
  [class~="@{breakpoint-prefix}2/8"],
  .@{breakpoint-prefix}two-eighths,
  [class~="@{breakpoint-prefix}3/12"],
  .@{breakpoint-prefix}three-twelfths {
    width: 25% !important;
  }

  [class~="@{breakpoint-prefix}3/4"],
  .@{breakpoint-prefix}three-fourths,
  [class~="@{breakpoint-prefix}6/8"],
  .@{breakpoint-prefix}six-eighths,
  [class~="@{breakpoint-prefix}9/12"],
  .@{breakpoint-prefix}nine-twelfths {
    width: 75% !important;
  }

  // Fifths
  [class~="@{breakpoint-prefix}1/5"],
  .@{breakpoint-prefix}one-fifth,
  [class~="@{breakpoint-prefix}2/10"],
  .@{breakpoint-prefix}two-tenths {
    width: 20% !important;
  }

  [class~="@{breakpoint-prefix}2/5"],
  .@{breakpoint-prefix}two-fifths,
  [class~="@{breakpoint-prefix}4/10"],
  .@{breakpoint-prefix}four-tenths {
    width: 40% !important;
  }

  [class~="@{breakpoint-prefix}3/5"],
  .@{breakpoint-prefix}three-fifths,
  [class~="@{breakpoint-prefix}6/10"],
  .@{breakpoint-prefix}six-tenths {
    width: 60% !important;
  }

  [class~="@{breakpoint-prefix}4/5"],
  .@{breakpoint-prefix}four-fifths,
  [class~="@{breakpoint-prefix}8/10"],
  .@{breakpoint-prefix}eight-tenths {
    width: 80% !important;
  }

  // Sixths
  [class~="@{breakpoint-prefix}1/6"],
  .@{breakpoint-prefix}one-sixth,
  [class~="@{breakpoint-prefix}2/12"],
  .@{breakpoint-prefix}two-twelfths {
    width: 16.6666666% !important;
  }

  [class~="@{breakpoint-prefix}5/6"],
  .@{breakpoint-prefix}five-sixths,
  [class~="@{breakpoint-prefix}10/12"],
  .@{breakpoint-prefix}ten-twelfths {
    width: 83.3333333% !important;
  }

  // Eighths
  [class~="@{breakpoint-prefix}1/8"],
  .@{breakpoint-prefix}one-eighth {
    width: 12.5% !important;
  }

  [class~="@{breakpoint-prefix}3/8"],
  .@{breakpoint-prefix}three-eighths {
    width: 37.5% !important;
  }

  [class~="@{breakpoint-prefix}5/8"],
  .@{breakpoint-prefix}five-eighths {
    width: 62.5% !important;
  }

  [class~="@{breakpoint-prefix}7/8"],
  .@{breakpoint-prefix}seven-eighths {
    width: 87.5% !important;
  }

  // Ninths
  [class~="@{breakpoint-prefix}1/9"],
  .@{breakpoint-prefix}one-ninth {
    width: 11.1111111% !important;
  }

  [class~="@{breakpoint-prefix}2/9"],
  .@{breakpoint-prefix}two-ninths {
    width: 22.2222222% !important;
  }

  [class~="@{breakpoint-prefix}4/9"],
  .@{breakpoint-prefix}four-ninths {
    width: 44.4444444% !important;
  }

  [class~="@{breakpoint-prefix}5/9"],
  .@{breakpoint-prefix}five-ninths {
    width: 55.5555555% !important;
  }

  [class~="@{breakpoint-prefix}7/9"],
  .@{breakpoint-prefix}seven-ninths {
    width: 77.7777777% !important;
  }

  [class~="@{breakpoint-prefix}8/9"],
  .@{breakpoint-prefix}eight-ninths {
    width: 88.8888888% !important;
  }

  // Tenths
  [class~="@{breakpoint-prefix}1/10"],
  .@{breakpoint-prefix}one-tenth {
    width: 10% !important;
  }

  [class~="@{breakpoint-prefix}3/10"],
  .@{breakpoint-prefix}three-tenths {
    width: 30% !important;
  }

  [class~="@{breakpoint-prefix}7/10"],
  .@{breakpoint-prefix}seven-tenths {
    width: 70% !important;
  }

  [class~="@{breakpoint-prefix}9/10"],
  .@{breakpoint-prefix}nine-tenths {
    width: 90% !important;
  }

  // Twelfths
  [class~="@{breakpoint-prefix}1/12"],
  .@{breakpoint-prefix}one-twelfth {
    width:  8.3333333% !important;
  }

  [class~="@{breakpoint-prefix}5/12"],
  .@{breakpoint-prefix}five-twelfths {
    width: 41.6666666% !important;
  }

  [class~="@{breakpoint-prefix}7/12"],
  .@{breakpoint-prefix}seven-twelfths {
    width: 58.3333333% !important;
  }

  [class~="@{breakpoint-prefix}11/12"],
  .@{breakpoint-prefix}eleven-twelfths {
    width: 91.6666666% !important;
  }
});


================================================
FILE: utilities/z-index.less
================================================
/* ========================================================================== *\
   Utilities -> Z-Index ($utilities-z-index)
\* ========================================================================== */


//
// z = z-index
// # = value
//

.breakpoint-prefixes({
  .@{breakpoint-prefix}z1 {
    z-index: @z-index-1 !important;
  }

  .@{breakpoint-prefix}z2 {
    z-index: @z-index-2 !important;
  }

  .@{breakpoint-prefix}z3 {
    z-index: @z-index-3 !important;
  }

  .@{breakpoint-prefix}z4 {
    z-index: @z-index-4 !important;
  }

  .@{breakpoint-prefix}z5 {
    z-index: @z-index-5 !important;
  }

  .@{breakpoint-prefix}z6 {
    z-index: @z-index-6 !important;
  }

  .@{breakpoint-prefix}z7 {
    z-index: @z-index-7 !important;
  }

  .@{breakpoint-prefix}z8 {
    z-index: @z-index-8 !important;
  }

  .@{breakpoint-prefix}z9 {
    z-index: @z-index-9 !important;
  }

  .@{breakpoint-prefix}z10 {
    z-index: @z-index-10 !important;
  }
});