artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 18:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity
v7
tachyons/css/tachyons.css
John Otander 4c9fcc643a Run build
2018-07-13 14:13:22 -06:00

4224 lines
134 KiB
CSS
Raw Permalink Blame History

/*! TACHYONS v7.0.1-2 | http://tachyons.io */
/*
*
* ________ ______
* ___ __/_____ _________ /______ ______________________
* __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
* _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
* /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
* /____/
*
* TABLE OF CONTENTS
*
* 1. External Library Includes
* - Normalize.css | http://normalize.css.github.io
* 2. Tachyons Modules
* 3. Variables
* - Media Queries
* - Colors
* 4. Debugging
* - Debug all
* - Debug children
*
*/
/* External Library Includes */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body { margin: 0; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 { font-size: 2em; margin: .67em 0; }
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a { background-color: transparent; }
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b, strong { font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/**
* Add the correct font size in all browsers.
*/
small { font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img { border-style: none; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button, input {/* 1 */ overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button, select {/* 1 */ text-transform: none; }
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset { padding: .35em .75em .625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress { vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea { overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details { display: block; }
/*
* Add the correct display in all browsers.
*/
summary { display: list-item; }
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template { display: none; }
/**
* Add the correct display in IE 10.
*/
[hidden] { display: none; }
/* Modules */
/*!!!
# BOX SIZING
Box sizing doesn't use the `*` selector in order
to improve performance.
*/
html, body, div, article, aside, section, main, nav, footer, header, form,
fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt,
dd, blockquote, figcaption, figure, textarea, table, td, th, tr,
input[type="email"], input[type="number"], input[type="password"],
input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
/*!!!
# ASPECT RATIOS
This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
Wrap the outer element in aspect-ratio and then extend it with the desired ratio.
Make sure there are no height and width attributes on the embedded media.
Adapted from: https://github.com/suitcss/components-flex-embed
### Docs
https://tachyons.io/docs/layout/aspect-ratios
### Base
- `aspect-ratio` = aspect ratio
### Modifiers
- `--16x9` = 16x9
- `--9x16` = 9x16
- `--4x3` = 4x3
- `--3x4` = 3x4
- `--6x4` = 6x4
- `--4x6` = 4x6
- `--8x5` = 8x5
- `--5x8` = 5x8
- `--7x5` = 7x5
- `--5x7` = 5x7
- `--1x1` = 1x1
- `--object` = object
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
### Example
```html
<div class="aspect-ratio aspect-ratio--16x9">
<iframe class="aspect-ratio--object"></iframe>
</div>
```
*/
.aspect-ratio { height: 0; position: relative; }
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
.aspect-ratio--4x3 { padding-bottom: 75%; }
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
.aspect-ratio--4x6 { padding-bottom: 150%; }
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
.aspect-ratio--5x8 { padding-bottom: 160%; }
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
.aspect-ratio--5x7 { padding-bottom: 140%; }
.aspect-ratio--1x1 { padding-bottom: 100%; }
.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
/*!!!
# IMAGES
### Docs
http://tachyons.io/docs/elements/images/
*/
/* Responsive images! */
img { max-width: 100%; }
/*!!!
# BACKGROUND SIZE
Often used in combination with background image set as an inline style
on an html element.
### Docs
http://tachyons.io/docs/themes/background-size/
### Base
- cover = cover
- contain = contain
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l`= large
*/
.cover { background-size: cover !important; }
.contain { background-size: contain !important; }
/*!!!
# BACKGROUND POSITION
### Base
- bg = background
### Modifiers
- `-center` = center center
- `-top` = top center
- `-right` = center right
- `-bottom` = bottom center
- `-left` = center left
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l`= large
*/
.bg-center { background-repeat: no-repeat; background-position: center center; }
.bg-top { background-repeat: no-repeat; background-position: top center; }
.bg-right { background-repeat: no-repeat; background-position: center right; }
.bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
.bg-left { background-repeat: no-repeat; background-position: center left; }
/*!!!
# OUTLINES
Set transparent outline on elements.
### Base
- outline = outline
### Modifiers
- `-0` = literal value 0
- `-transparent` = transparent outline
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
/*!!!
# BORDERS
### Docs
http://tachyons.io/docs/themes/borders/
### Base
- b = border
### Modifiers
- a = all
- t = top
- r = right
- b = bottom
- l = left
- n = none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
/*!!!
# BORDER COLORS
Border colors can be used to extend the base border classes ba,bt,bb,br,bl found in the _borders.css file.
The base border class by default will set the color of the border
to that of the current text color. These classes are for the cases
where you desire for the text and border colors to be different.
### Docs
http://tachyons.io/docs/themes/borders/
### Base
- b = border
### Modifiers
- `--color-name` = black, white and their alpha colors are available
*/
.b--black { border-color: #000; }
.b--white { border-color: #f7f7f7; }
.b--white-90 { border-color: rgba( 255, 255, 255, .9 ); }
.b--white-80 { border-color: undefined; }
.b--white-70 { border-color: rgba( 255, 255, 255, .7 ); }
.b--white-60 { border-color: undefined; }
.b--white-50 { border-color: undefined; }
.b--white-40 { border-color: rgba( 255, 255, 255, .4 ); }
.b--white-30 { border-color: undefined; }
.b--white-20 { border-color: rgba( 255, 255, 255, .2 ); }
.b--white-10 { border-color: rgba( 255, 255, 255, .1 ); }
.b--white-05 { border-color: rgba( 255, 255, 255, .05 ); }
.b--white-025 { border-color: rgba( 255, 255, 255, .025 ); }
.b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); }
.b--black-90 { border-color: rgba( 0, 0, 0, .9 ); }
.b--black-80 { border-color: undefined; }
.b--black-70 { border-color: rgba( 0, 0, 0, .7 ); }
.b--black-60 { border-color: undefined; }
.b--black-50 { border-color: undefined; }
.b--black-40 { border-color: rgba( 0, 0, 0, .4 ); }
.b--black-30 { border-color: undefined; }
.b--black-20 { border-color: rgba( 0, 0, 0, .2 ); }
.b--black-10 { border-color: rgba( 0, 0, 0, .1 ); }
.b--black-05 { border-color: rgba( 0, 0, 0, .05 ); }
.b--black-025 { border-color: rgba( 0, 0, 0, .025 ); }
.b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); }
.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
/*!!!
# BORDER RADIUS
### Docs
http://tachyons.io/docs/themes/border-radius/
### Base
- br = border-radius
### Modifiers
- 0 = 0/none
- 1 = 1st step in scale
- 2 = 2nd step in scale
- 3 = 3rd step in scale
- 4 = 4th step in scale
### Literal values
- `-100` = 100%
- `-pill` = 9999px
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.br0 { border-radius: 0; }
.br1 { border-radius: 3px; }
.br2 { border-radius: 5px; }
.br3 { border-radius: 9px; }
.br4 { border-radius: 17px; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/*!!!
# BORDER STYLES
Depends on base border module in `_borders.css`
### Docs
http://tachyons.io/docs/themes/borders/
### Base
- b = border-style
### Modifiers
- `--none` = none
- `--dotted` = dotted
- `--dashed` = dashed
- `--solid` = solid
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }
/*!!!
# BORDER WIDTHS
### Docs
http://tachyons.io/docs/themes/borders/
### Base
- bw = border-width
### Modifiers
- 0 = 0 width border
- 1 = 1st step in border-width scale
- 2 = 2nd step in border-width scale
- 3 = 3rd step in border-width scale
- 4 = 4th step in border-width scale
- 5 = 5th step in border-width scale
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
/*!!!
# BOX SHADOW
### Docs
http://tachyons.io/docs/themes/box-shadow/
### Base
- shadow
### Modifiers
- `-1` = offset 0px 0px 4px 2px
- `-2` = offset 0px 0px 8px 2px
- `-3` = offset 2px 2px 4px 2px
- `-4` = offset 2px 2px 8px 0px
- `-5` = offset 4px 4px 8px 0px
### Literal Values
- `-none` = none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-none { box-shadow: none; }
/*!!!
# CODE
*/
.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
/*!!!
# COORDINATES
Use in combination with the position module.
### Docs
http://tachyons.io/docs/layout/position/
### Base
- top
- bottom
- right
- left
### Modifiers
- `-0` = literal value 0
- `-1` = literal value 1
- `-2` = literal value 2
- `--1` = literal value -1
- `--2` = literal value -2
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.left-1 { left: 1rem; }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
.top--1 { top: -1rem; }
.right--1 { right: -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1 { left: -1rem; }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2 { left: -2rem; }
.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; }
/*!!!
# CLEARFIX
### Docs
http://tachyons.io/docs/layout/clearfix/
### Based on
Nicolas Gallagher's clerfix solution
http://nicolasgallagher.com/micro-clearfix-hack/
### Base
- c = clear
### Modifiers
- f = clearfix
- l = left
- r = right
- b = both
- n = none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }
/*!!!
# DISPLAY
### Docs
http://tachyons.io/docs/layout/display
### Base
- d = display
### Modifiers
- n = none
- b = block
- ib = inline-block
- it = inline-table
- t = table
- tc = table-cell
- t-row = table-row
- t-columm = table-column
- t-column-group = table-column-group
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed { table-layout: fixed; width: 100%; }
/*!!!
# FLEXBOX
### Docs
http://tachyons.io/docs/layout/flexbox/
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: initial; }
.flex-none { flex: none; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-last { order: 99999; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
/*!!!
# FLOATS
Floated elements are automatically rendered as block level elements.
Setting floats to display inline will fix the double margin bug in
ie6. You know... just in case.
Don't forget to clearfix your floats with `.cf`
### Docs
http://tachyons.io/docs/layout/floats/
### Base
- f = float
### Modifiers
- l = left
- r = right
- n = none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
/*!!!
# FONT FAMILY GROUPS
### Docs
http://tachyons.io/docs/typography/font-family/
### Base
- sans-serif
- system-sans-serif
- avenir
- helvetica
- serif
- system-serif
- athelas
- baskerville
- bodoni
- calisto
- garamond
- georgia
- times
- code
- courier
*/
.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }
.serif { font-family: georgia, times, serif; }
.system-sans-serif { font-family: sans-serif; }
.system-serif { font-family: serif; }
/* Monospaced Typefaces (for code) */
/* From http://cssfontstack.com */
code, .code { font-family: Consolas, monaco, monospace; }
.courier { font-family: 'Courier Next', courier, monospace; }
/* Sans-Serif Typefaces */
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir { font-family: 'avenir next', avenir, sans-serif; }
/* Serif Typefaces */
.athelas { font-family: athelas, georgia, serif; }
.georgia { font-family: georgia, serif; }
.times { font-family: times, serif; }
.bodoni { font-family: "Bodoni MT", serif; }
.calisto { font-family: "Calisto MT", serif; }
.garamond { font-family: garamond, serif; }
.baskerville { font-family: baskerville, serif; }
/*!!!
# FONT STYLE
### Docs
http://tachyons.io/docs/typography/font-style/
### Base
- i = italic
- fs-normal = normal
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.i { font-style: italic; }
.fs-normal { font-style: normal; }
/*!!!
# FONT WEIGHT
### Docs
http://tachyons.io/docs/typography/font-weight/
### Base
- fw = font-weight
### Modifiers
- 1 = literal value 100
- 2 = literal value 200
- 3 = literal value 300
- 4 = literal value 400
- 5 = literal value 500
- 6 = literal value 600
- 7 = literal value 700
- 8 = literal value 800
- 9 = literal value 900
### Literal Values
- b = bold
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.b { font-weight: bold; }
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
/*!!!
# FORMS
### Docs
http://tachyons.io/docs/elements/forms/
*/
.input-reset { -webkit-appearance: none; -moz-appearance: none; }
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
/*!!!
# HEIGHTS
### Docs
http://tachyons.io/docs/layout/heights/
### Base
- h = height
- min-h = min-height
- min-vh = min-height vertical screen height
- vh = vertical screen height
### Modifiers
- 1 = 1st step in height scale
- 2 = 2nd step in height scale
- 3 = 3rd step in height scale
- 4 = 4th step in height scale
- 5 = 5th step in height scale
- `-25` = literal value 25%
- `-50` = literal value 50%
- `-75` = literal value 75%
- `-100` = literal value 100%
- `-auto` = string value of auto
- `-inherit` = string value of inherit
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Height Scale */
.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
/* Height Percentages - Based off of height of parent */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }
/* Screen Height Percentage */
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
/* String Properties */
.h-auto { height: auto; }
.h-inherit { height: inherit; }
/*!!!
# LETTER SPACING
### Docs
http://tachyons.io/docs/typography/tracking/
### Base
- ls
### Modifiers
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.ls1 { letter-spacing: -.05em; }
.ls2 { letter-spacing: .1em; }
.ls3 { letter-spacing: .25em; }
/*!!!
# LINE HEIGHT / LEADING
### Docs
http://tachyons.io/docs/typography/line-height
### Base
- lh = line height
### Literal Values
- `-solid` = literal value 1
- `-title` = literal value 1.25
- `-copy` = literal value 1.5
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }
/*!!!
# LINKS
### Docs
http://tachyons.io/docs/elements/links/
### Base
- link
*/
.link { text-decoration: none; transition: color .15s ease-in; }
.link:link, .link:visited { transition: color .15s ease-in; }
.link:hover { transition: color .15s ease-in; }
.link:active { transition: color .15s ease-in; }
.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
/*!!!
# LISTS
### Docs
http://tachyons.io/docs/elements/lists/
### Base
- list
*/
.list { list-style-type: none; }
/*!!!
# MAX WIDTHS
### Docs
http://tachyons.io/docs/layout/max-widths/
### Base
- mw = max-width
### Modifiers
- 1 = 1st step in width scale
- 2 = 2nd step in width scale
- 3 = 3rd step in width scale
- 4 = 4th step in width scale
- 5 = 5th step in width scale
- 6 = 6st step in width scale
- 7 = 7nd step in width scale
- 8 = 8rd step in width scale
- 9 = 9th step in width scale
- `-100` = literal value 100%
- `-none` = string value none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Max Width Percentages */
.mw-100 { max-width: 100%; }
/* Max Width Scale */
.mw1 { max-width: 1rem; }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
.mw4 { max-width: 8rem; }
.mw5 { max-width: 16rem; }
.mw6 { max-width: 32rem; }
.mw7 { max-width: 48rem; }
.mw8 { max-width: 56rem; }
.mw9 { max-width: 64rem; }
.mw10 { max-width: 80rem; }
/* Max Width String Properties */
.mw-none { max-width: none; }
/*!!!
# WIDTHS
### Docs
http://tachyons.io/docs/layout/widths/
### Base
- w = width
### Modifiers
- 1 = 1st step in width scale
- 2 = 2nd step in width scale
- 3 = 3rd step in width scale
- 4 = 4th step in width scale
- 5 = 5th step in width scale
- -10 = literal value 10%
- -20 = literal value 20%
- -25 = literal value 25%
- -30 = literal value 30%
- -40 = literal value 40%
- -50 = literal value 50%
- -60 = literal value 60%
- -70 = literal value 70%
- -75 = literal value 75%
- -80 = literal value 80%
- -90 = literal value 90%
- -100 = literal value 100%
- `-third` = 100% / 3 (Not supported in opera mini or IE8)
- `-two-thirds` = 100% / 1.5 (Not supported in opera mini or IE8)
- `-auto` = string value auto
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Width Scale */
.w1 { width: 1rem; }
.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
.w5 { width: 16rem; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.w-third { width: calc( 100% / 3 ); }
.w-two-thirds { width: calc( 100% / 1.5 ); }
.w-auto { width: auto; }
/*!!!
# OVERFLOW
### Base
- overflow
- overflow-x
- overflow-y
### Modifiers
- `-visible`
- `-hidden`
- `-scroll`
- `-auto`
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }
/*!!!
# POSITIONING
### Docs
http://tachyons.io/docs/layout/position/
### Base
- static
- relative
- absolute
- fixed
- sticky
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: -webkit-sticky; position: sticky; }
/*!!!
# OPACITY
### Docs
http://tachyons.io/docs/themes/opacity/
### Base
- o = opacity
### Modifiers
- `-100` = literal value 1
- `-90` = literal value .9
- `-80` = literal value .8
- `-70` = literal value .7
- `-60` = literal value .6
- `-50` = literal value .5
- `-40` = literal value .4
- `-30` = literal value .3
- `-20` = literal value .2
- `-10` = literal value .1
- `-05` = literal value .05
- `-025` = literal value .025
- `-0` = literal value 0
*/
.o-100 { opacity: 1; }
.o-90 { opacity: .9; }
.o-80 { opacity: .8; }
.o-70 { opacity: .7; }
.o-60 { opacity: .6; }
.o-50 { opacity: .5; }
.o-40 { opacity: .4; }
.o-30 { opacity: .3; }
.o-20 { opacity: .2; }
.o-10 { opacity: .1; }
.o-05 { opacity: .05; }
.o-025 { opacity: .025; }
.o-0 { opacity: 0; }
/*!!!
# ROTATIONS
Rotate elements.
### Base
- rotate
### Modifiers
- `-45` = literal value 45deg
- `-90` = literal value 90deg
- `-135` = literal value 135deg
- `-180` = literal value 180deg
- `-225` = literal value 225deg
- `-270` = literal value 270deg
- `-315` = literal value 315deg
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
/*!!!
# SKINS
### Docs
http://tachyons.io/docs/themes/skins/
Classes for setting foreground and background colors on elements.
If you haven't declared a border color, but set border on an element, it will
be set to the current text color.
*/
/* Text colors */
.color-inherit { color: inherit; }
.black-90 { color: rgba( 0, 0, 0, .9 ); }
.black-80 { color: undefined; }
.black-70 { color: rgba( 0, 0, 0, .7 ); }
.black-60 { color: undefined; }
.black-50 { color: undefined; }
.black-40 { color: rgba( 0, 0, 0, .4 ); }
.black-30 { color: undefined; }
.black-20 { color: rgba( 0, 0, 0, .2 ); }
.black-10 { color: rgba( 0, 0, 0, .1 ); }
.black-05 { color: rgba( 0, 0, 0, .05 ); }
.white-90 { color: rgba( 255, 255, 255, .9 ); }
.white-80 { color: undefined; }
.white-70 { color: rgba( 255, 255, 255, .7 ); }
.white-60 { color: undefined; }
.white-50 { color: undefined; }
.white-40 { color: rgba( 255, 255, 255, .4 ); }
.white-30 { color: undefined; }
.white-20 { color: rgba( 255, 255, 255, .2 ); }
.white-10 { color: rgba( 255, 255, 255, .1 ); }
.black { color: #000; }
.gray-0 { color: #161a1d; }
.gray-1 { color: #242c34; }
.gray-2 { color: #364049; }
.gray-3 { color: #4b545c; }
.gray-4 { color: #626a71; }
.gray-5 { color: #798086; }
.gray-6 { color: #91969b; }
.gray-7 { color: #a9aeb1; }
.gray-8 { color: #c3c5c8; }
.white { color: #f7f7f7; }
.green-0 { color: #044324; }
.green-1 { color: #05532d; }
.green-2 { color: #087640; }
.green-3 { color: #098849; }
.green-4 { color: #0b9b53; }
.green-5 { color: #0cad5d; }
.green-6 { color: #0ec167; }
.green-7 { color: #0fd472; }
.green-8 { color: #10e87c; }
.green-9 { color: #78f5a6; }
.green-10 { color: #c3fbdf; }
.teal-0 { color: #003d37; }
.teal-1 { color: #004e46; }
.teal-2 { color: #007166; }
.teal-3 { color: #008477; }
.teal-4 { color: #009788; }
.teal-5 { color: #00ab9a; }
.teal-6 { color: #00bfac; }
.teal-7 { color: #00d3be; }
.teal-8 { color: #00e8d1; }
.teal-9 { color: #00fde4; }
.teal-10 { color: #ccfffa; }
.cyan-0 { color: #015151; }
.cyan-1 { color: #046064; }
.cyan-2 { color: #0f7f8a; }
.cyan-3 { color: #148f9f; }
.cyan-4 { color: #19a0b3; }
.cyan-5 { color: #1eb1c9; }
.cyan-6 { color: #24c2de; }
.cyan-7 { color: #29d3f4; }
.cyan-8 { color: #64e2fd; }
.cyan-9 { color: #9cf0fe; }
.cyan-10 { color: #c7fefe; }
.blue-0 { color: #002c52; }
.blue-1 { color: #003a6c; }
.blue-2 { color: #0057a2; }
.blue-3 { color: #0066bf; }
.blue-4 { color: #0076dc; }
.blue-5 { color: #0086fb; }
.blue-6 { color: #4d97ff; }
.blue-7 { color: #72a9ff; }
.blue-8 { color: #8fbbff; }
.blue-9 { color: #a8ceff; }
.blue-10 { color: #bfe1ff; }
.indigo-0 { color: #2c0599; }
.indigo-1 { color: #3706be; }
.indigo-2 { color: #5c26ef; }
.indigo-3 { color: #733ff1; }
.indigo-4 { color: #8655f3; }
.indigo-5 { color: #9769f5; }
.indigo-6 { color: #a67df7; }
.indigo-7 { color: #b491f9; }
.indigo-8 { color: #c2a6fb; }
.indigo-9 { color: #cebafc; }
.indigo-10 { color: #dacefd; }
.purple-0 { color: #500576; }
.purple-1 { color: #630691; }
.purple-2 { color: #8a09cb; }
.purple-3 { color: #9f0ae9; }
.purple-4 { color: #af2ef6; }
.purple-5 { color: #bb4ef7; }
.purple-6 { color: #c568f9; }
.purple-7 { color: #d080fa; }
.purple-8 { color: #d996fb; }
.purple-9 { color: #e1acfb; }
.purple-10 { color: #e9c2fc; }
.pink-0 { color: #640233; }
.pink-1 { color: #7c033f; }
.pink-2 { color: #ae0459; }
.pink-3 { color: #c80467; }
.pink-4 { color: #e30574; }
.pink-5 { color: #fb1d83; }
.pink-6 { color: #fe5195; }
.pink-7 { color: #ff73a7; }
.pink-8 { color: #ff8fba; }
.pink-9 { color: #ffa9cc; }
.pink-10 { color: #fec1df; }
.red-0 { color: #390408; }
.red-1 { color: #520814; }
.red-2 { color: #8a1223; }
.red-3 { color: #a7172b; }
.red-4 { color: #c61d33; }
.red-5 { color: #e02e40; }
.red-6 { color: #e95459; }
.red-7 { color: #f17373; }
.red-8 { color: #f68e8f; }
.red-9 { color: #faa9ab; }
.red-10 { color: #fbc3c8; }
.orange-0 { color: #6f2601; }
.orange-1 { color: #862e03; }
.orange-2 { color: #b73f04; }
.orange-3 { color: #d04704; }
.orange-4 { color: #ea5003; }
.orange-5 { color: #fe6018; }
.orange-6 { color: #ff7e45; }
.orange-7 { color: #ff9969; }
.orange-8 { color: #ffb18b; }
.orange-9 { color: #ffc7ac; }
.orange-10 { color: #feddcd; }
.yellow-0 { color: #806800; }
.yellow-1 { color: #8e7300; }
.yellow-2 { color: #aa8a00; }
.yellow-3 { color: #b89600; }
.yellow-4 { color: #c7a200; }
.yellow-5 { color: #d6ae00; }
.yellow-6 { color: #e5ba00; }
.yellow-7 { color: #f4c700; }
.yellow-8 { color: #ffd434; }
.yellow-9 { color: #ffe483; }
.yellow-10 { color: #fff3bf; }
/* Background colors */
.bg-transparent { background-color: transparent; }
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
.bg-black-80 { background-color: undefined; }
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
.bg-black-60 { background-color: undefined; }
.bg-black-50 { background-color: undefined; }
.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); }
.bg-black-30 { background-color: undefined; }
.bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); }
.bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); }
.bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); }
.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); }
.bg-white-80 { background-color: undefined; }
.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); }
.bg-white-60 { background-color: undefined; }
.bg-white-50 { background-color: undefined; }
.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); }
.bg-white-30 { background-color: undefined; }
.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
.bg-black { background-color: #000; }
.bg-gray-0 { background-color: #161a1d; }
.bg-gray-1 { background-color: #242c34; }
.bg-gray-2 { background-color: #364049; }
.bg-gray-3 { background-color: #4b545c; }
.bg-gray-4 { background-color: #626a71; }
.bg-gray-5 { background-color: #798086; }
.bg-gray-6 { background-color: #91969b; }
.bg-gray-7 { background-color: #a9aeb1; }
.bg-gray-8 { background-color: #c3c5c8; }
.bg-white { background-color: #f7f7f7; }
.bg-green-0 { background-color: #044324; }
.bg-green-1 { background-color: #05532d; }
.bg-green-2 { background-color: #087640; }
.bg-green-3 { background-color: #098849; }
.bg-green-4 { background-color: #0b9b53; }
.bg-green-5 { background-color: #0cad5d; }
.bg-green-6 { background-color: #0ec167; }
.bg-green-7 { background-color: #0fd472; }
.bg-green-8 { background-color: #10e87c; }
.bg-green-9 { background-color: #78f5a6; }
.bg-green-10 { background-color: #c3fbdf; }
.bg-teal-0 { background-color: #003d37; }
.bg-teal-1 { background-color: #004e46; }
.bg-teal-2 { background-color: #007166; }
.bg-teal-3 { background-color: #008477; }
.bg-teal-4 { background-color: #009788; }
.bg-teal-5 { background-color: #00ab9a; }
.bg-teal-6 { background-color: #00bfac; }
.bg-teal-7 { background-color: #00d3be; }
.bg-teal-8 { background-color: #00e8d1; }
.bg-teal-9 { background-color: #00fde4; }
.bg-teal-10 { background-color: #ccfffa; }
.bg-cyan-0 { background-color: #015151; }
.bg-cyan-1 { background-color: #046064; }
.bg-cyan-2 { background-color: #0f7f8a; }
.bg-cyan-3 { background-color: #148f9f; }
.bg-cyan-4 { background-color: #19a0b3; }
.bg-cyan-5 { background-color: #1eb1c9; }
.bg-cyan-6 { background-color: #24c2de; }
.bg-cyan-7 { background-color: #29d3f4; }
.bg-cyan-8 { background-color: #64e2fd; }
.bg-cyan-9 { background-color: #9cf0fe; }
.bg-cyan-10 { background-color: #c7fefe; }
.bg-blue-0 { background-color: #002c52; }
.bg-blue-1 { background-color: #003a6c; }
.bg-blue-2 { background-color: #0057a2; }
.bg-blue-3 { background-color: #0066bf; }
.bg-blue-4 { background-color: #0076dc; }
.bg-blue-5 { background-color: #0086fb; }
.bg-blue-6 { background-color: #4d97ff; }
.bg-blue-7 { background-color: #72a9ff; }
.bg-blue-8 { background-color: #8fbbff; }
.bg-blue-9 { background-color: #a8ceff; }
.bg-blue-10 { background-color: #bfe1ff; }
.bg-indigo-0 { background-color: #2c0599; }
.bg-indigo-1 { background-color: #3706be; }
.bg-indigo-2 { background-color: #5c26ef; }
.bg-indigo-3 { background-color: #733ff1; }
.bg-indigo-4 { background-color: #8655f3; }
.bg-indigo-5 { background-color: #9769f5; }
.bg-indigo-6 { background-color: #a67df7; }
.bg-indigo-7 { background-color: #b491f9; }
.bg-indigo-8 { background-color: #c2a6fb; }
.bg-indigo-9 { background-color: #cebafc; }
.bg-indigo-10 { background-color: #dacefd; }
.bg-purple-0 { background-color: #500576; }
.bg-purple-1 { background-color: #630691; }
.bg-purple-2 { background-color: #8a09cb; }
.bg-purple-3 { background-color: #9f0ae9; }
.bg-purple-4 { background-color: #af2ef6; }
.bg-purple-5 { background-color: #bb4ef7; }
.bg-purple-6 { background-color: #c568f9; }
.bg-purple-7 { background-color: #d080fa; }
.bg-purple-8 { background-color: #d996fb; }
.bg-purple-9 { background-color: #e1acfb; }
.bg-purple-10 { background-color: #e9c2fc; }
.bg-pink-0 { background-color: #640233; }
.bg-pink-1 { background-color: #7c033f; }
.bg-pink-2 { background-color: #ae0459; }
.bg-pink-3 { background-color: #c80467; }
.bg-pink-4 { background-color: #e30574; }
.bg-pink-5 { background-color: #fb1d83; }
.bg-pink-6 { background-color: #fe5195; }
.bg-pink-7 { background-color: #ff73a7; }
.bg-pink-8 { background-color: #ff8fba; }
.bg-pink-9 { background-color: #ffa9cc; }
.bg-pink-10 { background-color: #fec1df; }
.bg-red-0 { background-color: #390408; }
.bg-red-1 { background-color: #520814; }
.bg-red-2 { background-color: #8a1223; }
.bg-red-3 { background-color: #a7172b; }
.bg-red-4 { background-color: #c61d33; }
.bg-red-5 { background-color: #e02e40; }
.bg-red-6 { background-color: #e95459; }
.bg-red-7 { background-color: #f17373; }
.bg-red-8 { background-color: #f68e8f; }
.bg-red-9 { background-color: #faa9ab; }
.bg-red-10 { background-color: #fbc3c8; }
.bg-orange-0 { background-color: #6f2601; }
.bg-orange-1 { background-color: #862e03; }
.bg-orange-2 { background-color: #b73f04; }
.bg-orange-3 { background-color: #d04704; }
.bg-orange-4 { background-color: #ea5003; }
.bg-orange-5 { background-color: #fe6018; }
.bg-orange-6 { background-color: #ff7e45; }
.bg-orange-7 { background-color: #ff9969; }
.bg-orange-8 { background-color: #ffb18b; }
.bg-orange-9 { background-color: #ffc7ac; }
.bg-orange-10 { background-color: #feddcd; }
.bg-yellow-0 { background-color: #806800; }
.bg-yellow-1 { background-color: #8e7300; }
.bg-yellow-2 { background-color: #aa8a00; }
.bg-yellow-3 { background-color: #b89600; }
.bg-yellow-4 { background-color: #c7a200; }
.bg-yellow-5 { background-color: #d6ae00; }
.bg-yellow-6 { background-color: #e5ba00; }
.bg-yellow-7 { background-color: #f4c700; }
.bg-yellow-8 { background-color: #ffd434; }
.bg-yellow-9 { background-color: #ffe483; }
.bg-yellow-10 { background-color: #fff3bf; }
/*!!!
# SKINS:PSEUDO
Customize the color of an element when
it is focused or hovered over.
### Docs
http://tachyons.io/docs/themes/skins-pseudo/
*/
/* Text colors */
.hover-color-inherit:hover, .hover-color-inherit:focus { color: inherit; }
.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); }
.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); }
.hover-black-80:hover { color: undefined; }
.hover-black-80:focus { color: undefined; }
.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); }
.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); }
.hover-black-60:hover { color: undefined; }
.hover-black-60:focus { color: undefined; }
.hover-black-50:hover { color: undefined; }
.hover-black-50:focus { color: undefined; }
.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); }
.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); }
.hover-black-30:hover { color: undefined; }
.hover-black-30:focus { color: undefined; }
.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); }
.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); }
.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); }
.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); }
.hover-black-05:hover { color: rgba( 0, 0, 0, .05 ); }
.hover-black-05:focus { color: rgba( 0, 0, 0, .05 ); }
.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); }
.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); }
.hover-white-80:hover { color: undefined; }
.hover-white-80:focus { color: undefined; }
.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); }
.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); }
.hover-white-60:hover { color: undefined; }
.hover-white-60:focus { color: undefined; }
.hover-white-50:hover { color: undefined; }
.hover-white-50:focus { color: undefined; }
.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); }
.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); }
.hover-white-30:hover { color: undefined; }
.hover-white-30:focus { color: undefined; }
.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); }
.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
.hover-black:hover { color: #000; }
.hover-black:focus { color: #000; }
.hover-gray-0:hover { color: #161a1d; }
.hover-gray-0:focus { color: #161a1d; }
.hover-gray-1:hover { color: #242c34; }
.hover-gray-1:focus { color: #242c34; }
.hover-gray-2:hover { color: #364049; }
.hover-gray-2:focus { color: #364049; }
.hover-gray-3:hover { color: #4b545c; }
.hover-gray-3:focus { color: #4b545c; }
.hover-gray-4:hover { color: #626a71; }
.hover-gray-4:focus { color: #626a71; }
.hover-gray-5:hover { color: #798086; }
.hover-gray-5:focus { color: #798086; }
.hover-gray-6:hover { color: #91969b; }
.hover-gray-6:focus { color: #91969b; }
.hover-gray-7:hover { color: #a9aeb1; }
.hover-gray-7:focus { color: #a9aeb1; }
.hover-gray-8:hover { color: #c3c5c8; }
.hover-gray-8:focus { color: #c3c5c8; }
.hover-white:hover { color: #f7f7f7; }
.hover-white:focus { color: #f7f7f7; }
.hover-green-0:hover { color: #044324; }
.hover-green-0:focus { color: #044324; }
.hover-green-1:hover { color: #05532d; }
.hover-green-1:focus { color: #05532d; }
.hover-green-2:hover { color: #087640; }
.hover-green-2:focus { color: #087640; }
.hover-green-3:hover { color: #098849; }
.hover-green-3:focus { color: #098849; }
.hover-green-4:hover { color: #0b9b53; }
.hover-green-4:focus { color: #0b9b53; }
.hover-green-5:hover { color: #0cad5d; }
.hover-green-5:focus { color: #0cad5d; }
.hover-green-6:hover { color: #0ec167; }
.hover-green-6:focus { color: #0ec167; }
.hover-green-7:hover { color: #0fd472; }
.hover-green-7:focus { color: #0fd472; }
.hover-green-8:hover { color: #10e87c; }
.hover-green-8:focus { color: #10e87c; }
.hover-green-9:hover { color: #78f5a6; }
.hover-green-9:focus { color: #78f5a6; }
.hover-green-10:hover { color: #c3fbdf; }
.hover-green-10:focus { color: #c3fbdf; }
.hover-teal-0:hover { color: #003d37; }
.hover-teal-0:focus { color: #003d37; }
.hover-teal-1:hover { color: #004e46; }
.hover-teal-1:focus { color: #004e46; }
.hover-teal-2:hover { color: #007166; }
.hover-teal-2:focus { color: #007166; }
.hover-teal-3:hover { color: #008477; }
.hover-teal-3:focus { color: #008477; }
.hover-teal-4:hover { color: #009788; }
.hover-teal-4:focus { color: #009788; }
.hover-teal-5:hover { color: #00ab9a; }
.hover-teal-5:focus { color: #00ab9a; }
.hover-teal-6:hover { color: #00bfac; }
.hover-teal-6:focus { color: #00bfac; }
.hover-teal-7:hover { color: #00d3be; }
.hover-teal-7:focus { color: #00d3be; }
.hover-teal-8:hover { color: #00e8d1; }
.hover-teal-8:focus { color: #00e8d1; }
.hover-teal-9:hover { color: #00fde4; }
.hover-teal-9:focus { color: #00fde4; }
.hover-teal-10:hover { color: #ccfffa; }
.hover-teal-10:focus { color: #ccfffa; }
.hover-teal-0:hover { color: #015151; }
.hover-teal-0:focus { color: #015151; }
.hover-teal-1:hover { color: #046064; }
.hover-teal-1:focus { color: #046064; }
.hover-teal-2:hover { color: #0f7f8a; }
.hover-teal-2:focus { color: #0f7f8a; }
.hover-teal-3:hover { color: #148f9f; }
.hover-teal-3:focus { color: #148f9f; }
.hover-teal-4:hover { color: #19a0b3; }
.hover-teal-4:focus { color: #19a0b3; }
.hover-teal-5:hover { color: #1eb1c9; }
.hover-teal-5:focus { color: #1eb1c9; }
.hover-teal-6:hover { color: #24c2de; }
.hover-teal-6:focus { color: #24c2de; }
.hover-teal-7:hover { color: #29d3f4; }
.hover-teal-7:focus { color: #29d3f4; }
.hover-teal-8:hover { color: #64e2fd; }
.hover-teal-8:focus { color: #64e2fd; }
.hover-teal-9:hover { color: #9cf0fe; }
.hover-teal-9:focus { color: #9cf0fe; }
.hover-teal-10:hover { color: #c7fefe; }
.hover-teal-10:focus { color: #c7fefe; }
.hover-blue-0:hover { color: #002c52; }
.hover-blue-0:focus { color: #002c52; }
.hover-blue-1:hover { color: #003a6c; }
.hover-blue-1:focus { color: #003a6c; }
.hover-blue-2:hover { color: #0057a2; }
.hover-blue-2:focus { color: #0057a2; }
.hover-blue-3:hover { color: #0066bf; }
.hover-blue-3:focus { color: #0066bf; }
.hover-blue-4:hover { color: #0076dc; }
.hover-blue-4:focus { color: #0076dc; }
.hover-blue-5:hover { color: #0086fb; }
.hover-blue-5:focus { color: #0086fb; }
.hover-blue-6:hover { color: #4d97ff; }
.hover-blue-6:focus { color: #4d97ff; }
.hover-blue-7:hover { color: #72a9ff; }
.hover-blue-7:focus { color: #72a9ff; }
.hover-blue-8:hover { color: #8fbbff; }
.hover-blue-8:focus { color: #8fbbff; }
.hover-blue-9:hover { color: #a8ceff; }
.hover-blue-9:focus { color: #a8ceff; }
.hover-blue-10:hover { color: #bfe1ff; }
.hover-blue-10:focus { color: #bfe1ff; }
.hover-indigo-0:hover { color: #2c0599; }
.hover-indigo-0:focus { color: #2c0599; }
.hover-indigo-1:hover { color: #3706be; }
.hover-indigo-1:focus { color: #3706be; }
.hover-indigo-2:hover { color: #5c26ef; }
.hover-indigo-2:focus { color: #5c26ef; }
.hover-indigo-3:hover { color: #733ff1; }
.hover-indigo-3:focus { color: #733ff1; }
.hover-indigo-4:hover { color: #8655f3; }
.hover-indigo-4:focus { color: #8655f3; }
.hover-indigo-5:hover { color: #9769f5; }
.hover-indigo-5:focus { color: #9769f5; }
.hover-indigo-6:hover { color: #a67df7; }
.hover-indigo-6:focus { color: #a67df7; }
.hover-indigo-7:hover { color: #b491f9; }
.hover-indigo-7:focus { color: #b491f9; }
.hover-indigo-8:hover { color: #c2a6fb; }
.hover-indigo-8:focus { color: #c2a6fb; }
.hover-indigo-9:hover { color: #cebafc; }
.hover-indigo-9:focus { color: #cebafc; }
.hover-indigo-10:hover { color: #dacefd; }
.hover-indigo-10:focus { color: #dacefd; }
.hover-purple-0:hover { color: #500576; }
.hover-purple-0:focus { color: #500576; }
.hover-purple-1:hover { color: #630691; }
.hover-purple-1:focus { color: #630691; }
.hover-purple-2:hover { color: #8a09cb; }
.hover-purple-2:focus { color: #8a09cb; }
.hover-purple-3:hover { color: #9f0ae9; }
.hover-purple-3:focus { color: #9f0ae9; }
.hover-purple-4:hover { color: #af2ef6; }
.hover-purple-4:focus { color: #af2ef6; }
.hover-purple-5:hover { color: #bb4ef7; }
.hover-purple-5:focus { color: #bb4ef7; }
.hover-purple-6:hover { color: #c568f9; }
.hover-purple-6:focus { color: #c568f9; }
.hover-purple-7:hover { color: #d080fa; }
.hover-purple-7:focus { color: #d080fa; }
.hover-purple-8:hover { color: #d996fb; }
.hover-purple-8:focus { color: #d996fb; }
.hover-purple-9:hover { color: #e1acfb; }
.hover-purple-9:focus { color: #e1acfb; }
.hover-purple-10:hover { color: #e9c2fc; }
.hover-purple-10:focus { color: #e9c2fc; }
.hover-pink-0:hover { color: #640233; }
.hover-pink-0:focus { color: #640233; }
.hover-pink-1:hover { color: #7c033f; }
.hover-pink-1:focus { color: #7c033f; }
.hover-pink-2:hover { color: #ae0459; }
.hover-pink-2:focus { color: #ae0459; }
.hover-pink-3:hover { color: #c80467; }
.hover-pink-3:focus { color: #c80467; }
.hover-pink-4:hover { color: #e30574; }
.hover-pink-4:focus { color: #e30574; }
.hover-pink-5:hover { color: #fb1d83; }
.hover-pink-5:focus { color: #fb1d83; }
.hover-pink-6:hover { color: #fe5195; }
.hover-pink-6:focus { color: #fe5195; }
.hover-pink-7:hover { color: #ff73a7; }
.hover-pink-7:focus { color: #ff73a7; }
.hover-pink-8:hover { color: #ff8fba; }
.hover-pink-8:focus { color: #ff8fba; }
.hover-pink-9:hover { color: #ffa9cc; }
.hover-pink-9:focus { color: #ffa9cc; }
.hover-pink-10:hover { color: #fec1df; }
.hover-pink-10:focus { color: #fec1df; }
.hover-red-0:hover { color: #390408; }
.hover-red-0:focus { color: #390408; }
.hover-red-1:hover { color: #520814; }
.hover-red-1:focus { color: #520814; }
.hover-red-2:hover { color: #8a1223; }
.hover-red-2:focus { color: #8a1223; }
.hover-red-3:hover { color: #a7172b; }
.hover-red-3:focus { color: #a7172b; }
.hover-red-4:hover { color: #c61d33; }
.hover-red-4:focus { color: #c61d33; }
.hover-red-5:hover { color: #e02e40; }
.hover-red-5:focus { color: #e02e40; }
.hover-red-6:hover { color: #e95459; }
.hover-red-6:focus { color: #e95459; }
.hover-red-7:hover { color: #f17373; }
.hover-red-7:focus { color: #f17373; }
.hover-red-8:hover { color: #f68e8f; }
.hover-red-8:focus { color: #f68e8f; }
.hover-red-9:hover { color: #faa9ab; }
.hover-red-9:focus { color: #faa9ab; }
.hover-red-10:hover { color: #fbc3c8; }
.hover-red-10:focus { color: #fbc3c8; }
.hover-orange-0:hover { color: #6f2601; }
.hover-orange-0:focus { color: #6f2601; }
.hover-orange-1:hover { color: #862e03; }
.hover-orange-1:focus { color: #862e03; }
.hover-orange-2:hover { color: #b73f04; }
.hover-orange-2:focus { color: #b73f04; }
.hover-orange-3:hover { color: #d04704; }
.hover-orange-3:focus { color: #d04704; }
.hover-orange-4:hover { color: #ea5003; }
.hover-orange-4:focus { color: #ea5003; }
.hover-orange-5:hover { color: #fe6018; }
.hover-orange-5:focus { color: #fe6018; }
.hover-orange-6:hover { color: #ff7e45; }
.hover-orange-6:focus { color: #ff7e45; }
.hover-orange-7:hover { color: #ff9969; }
.hover-orange-7:focus { color: #ff9969; }
.hover-orange-8:hover { color: #ffb18b; }
.hover-orange-8:focus { color: #ffb18b; }
.hover-orange-9:hover { color: #ffc7ac; }
.hover-orange-9:focus { color: #ffc7ac; }
.hover-orange-10:hover { color: #feddcd; }
.hover-orange-10:focus { color: #feddcd; }
.hover-yellow-0:hover { color: #806800; }
.hover-yellow-0:focus { color: #806800; }
.hover-yellow-1:hover { color: #8e7300; }
.hover-yellow-1:focus { color: #8e7300; }
.hover-yellow-2:hover { color: #aa8a00; }
.hover-yellow-2:focus { color: #aa8a00; }
.hover-yellow-3:hover { color: #b89600; }
.hover-yellow-3:focus { color: #b89600; }
.hover-yellow-4:hover { color: #c7a200; }
.hover-yellow-4:focus { color: #c7a200; }
.hover-yellow-5:hover { color: #d6ae00; }
.hover-yellow-5:focus { color: #d6ae00; }
.hover-yellow-6:hover { color: #e5ba00; }
.hover-yellow-6:focus { color: #e5ba00; }
.hover-yellow-7:hover { color: #f4c700; }
.hover-yellow-7:focus { color: #f4c700; }
.hover-yellow-8:hover { color: #ffd434; }
.hover-yellow-8:focus { color: #ffd434; }
.hover-yellow-9:hover { color: #ffe483; }
.hover-yellow-9:focus { color: #ffe483; }
.hover-yellow-10:hover { color: #fff3bf; }
.hover-yellow-10:focus { color: #fff3bf; }
/* Background colors */
.hover-bg-transparent:hover { background-color: transparent; }
.hover-bg-transparent:focus { background-color: transparent; }
.hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); }
.hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); }
.hover-bg-black-80:hover { background-color: undefined; }
.hover-bg-black-80:focus { background-color: undefined; }
.hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); }
.hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); }
.hover-bg-black-60:hover { background-color: undefined; }
.hover-bg-black-60:focus { background-color: undefined; }
.hover-bg-black-50:hover { background-color: undefined; }
.hover-bg-black-50:focus { background-color: undefined; }
.hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); }
.hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); }
.hover-bg-black-30:hover { background-color: undefined; }
.hover-bg-black-30:focus { background-color: undefined; }
.hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); }
.hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); }
.hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); }
.hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); }
.hover-bg-black-05:hover { background-color: rgba( 0, 0, 0, .05 ); }
.hover-bg-black-05:focus { background-color: rgba( 0, 0, 0, .05 ); }
.bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); }
.bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); }
.bg-white-80:hover { background-color: undefined; }
.bg-white-80:focus { background-color: undefined; }
.bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); }
.bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); }
.bg-white-60:hover { background-color: undefined; }
.bg-white-60:focus { background-color: undefined; }
.bg-white-50:hover { background-color: undefined; }
.bg-white-50:focus { background-color: undefined; }
.bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); }
.bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); }
.bg-white-30:hover { background-color: undefined; }
.bg-white-30:focus { background-color: undefined; }
.bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); }
.bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); }
.hover-bg-black:hover { background-color: #000; }
.hover-bg-black:focus { background-color: #000; }
.hover-bg-gray-0:hover { background-color: #161a1d; }
.hover-bg-gray-0:focus { background-color: #161a1d; }
.hover-bg-gray-1:hover { background-color: #242c34; }
.hover-bg-gray-1:focus { background-color: #242c34; }
.hover-bg-gray-2:hover { background-color: #364049; }
.hover-bg-gray-2:focus { background-color: #364049; }
.hover-bg-gray-3:hover { background-color: #4b545c; }
.hover-bg-gray-3:focus { background-color: #4b545c; }
.hover-bg-gray-4:hover { background-color: #626a71; }
.hover-bg-gray-4:focus { background-color: #626a71; }
.hover-bg-gray-5:hover { background-color: #798086; }
.hover-bg-gray-5:focus { background-color: #798086; }
.hover-bg-gray-6:hover { background-color: #91969b; }
.hover-bg-gray-6:focus { background-color: #91969b; }
.hover-bg-gray-7:hover { background-color: #a9aeb1; }
.hover-bg-gray-7:focus { background-color: #a9aeb1; }
.hover-bg-gray-8:hover { background-color: #c3c5c8; }
.hover-bg-gray-8:focus { background-color: #c3c5c8; }
.hover-bg-white:hover { background-color: #f7f7f7; }
.hover-bg-white:focus { background-color: #f7f7f7; }
.hover-bg-green-0:hover { background-color: #044324; }
.hover-bg-green-0:focus { background-color: #044324; }
.hover-bg-green-1:hover { background-color: #05532d; }
.hover-bg-green-1:focus { background-color: #05532d; }
.hover-bg-green-2:hover { background-color: #087640; }
.hover-bg-green-2:focus { background-color: #087640; }
.hover-bg-green-3:hover { background-color: #098849; }
.hover-bg-green-3:focus { background-color: #098849; }
.hover-bg-green-4:hover { background-color: #0b9b53; }
.hover-bg-green-4:focus { background-color: #0b9b53; }
.hover-bg-green-5:hover { background-color: #0cad5d; }
.hover-bg-green-5:focus { background-color: #0cad5d; }
.hover-bg-green-6:hover { background-color: #0ec167; }
.hover-bg-green-6:focus { background-color: #0ec167; }
.hover-bg-green-7:hover { background-color: #0fd472; }
.hover-bg-green-7:focus { background-color: #0fd472; }
.hover-bg-green-8:hover { background-color: #10e87c; }
.hover-bg-green-8:focus { background-color: #10e87c; }
.hover-bg-green-9:hover { background-color: #78f5a6; }
.hover-bg-green-9:focus { background-color: #78f5a6; }
.hover-bg-green-10:hover { background-color: #c3fbdf; }
.hover-bg-green-10:focus { background-color: #c3fbdf; }
.hover-bg-teal-0:hover { background-color: #003d37; }
.hover-bg-teal-0:focus { background-color: #003d37; }
.hover-bg-teal-1:hover { background-color: #004e46; }
.hover-bg-teal-1:focus { background-color: #004e46; }
.hover-bg-teal-2:hover { background-color: #007166; }
.hover-bg-teal-2:focus { background-color: #007166; }
.hover-bg-teal-3:hover { background-color: #008477; }
.hover-bg-teal-3:focus { background-color: #008477; }
.hover-bg-teal-4:hover { background-color: #009788; }
.hover-bg-teal-4:focus { background-color: #009788; }
.hover-bg-teal-5:hover { background-color: #00ab9a; }
.hover-bg-teal-5:focus { background-color: #00ab9a; }
.hover-bg-teal-6:hover { background-color: #00bfac; }
.hover-bg-teal-6:focus { background-color: #00bfac; }
.hover-bg-teal-7:hover { background-color: #00d3be; }
.hover-bg-teal-7:focus { background-color: #00d3be; }
.hover-bg-teal-8:hover { background-color: #00e8d1; }
.hover-bg-teal-8:focus { background-color: #00e8d1; }
.hover-bg-teal-9:hover { background-color: #00fde4; }
.hover-bg-teal-9:focus { background-color: #00fde4; }
.hover-bg-teal-10:hover { background-color: #ccfffa; }
.hover-bg-teal-10:focus { background-color: #ccfffa; }
.hover-bg-cyan-0:hover { background-color: #015151; }
.hover-bg-cyan-0:focus { background-color: #015151; }
.hover-bg-cyan-1:hover { background-color: #046064; }
.hover-bg-cyan-1:focus { background-color: #046064; }
.hover-bg-cyan-2:hover { background-color: #0f7f8a; }
.hover-bg-cyan-2:focus { background-color: #0f7f8a; }
.hover-bg-cyan-3:hover { background-color: #148f9f; }
.hover-bg-cyan-3:focus { background-color: #148f9f; }
.hover-bg-cyan-4:hover { background-color: #19a0b3; }
.hover-bg-cyan-4:focus { background-color: #19a0b3; }
.hover-bg-cyan-5:hover { background-color: #1eb1c9; }
.hover-bg-cyan-5:focus { background-color: #1eb1c9; }
.hover-bg-cyan-6:hover { background-color: #24c2de; }
.hover-bg-cyan-6:focus { background-color: #24c2de; }
.hover-bg-cyan-7:hover { background-color: #29d3f4; }
.hover-bg-cyan-7:focus { background-color: #29d3f4; }
.hover-bg-cyan-8:hover { background-color: #64e2fd; }
.hover-bg-cyan-8:focus { background-color: #64e2fd; }
.hover-bg-cyan-9:hover { background-color: #9cf0fe; }
.hover-bg-cyan-9:focus { background-color: #9cf0fe; }
.hover-bg-cyan-10:hover { background-color: #c7fefe; }
.hover-bg-cyan-10:focus { background-color: #c7fefe; }
.hover-bg-blue-0:hover { background-color: #002c52; }
.hover-bg-blue-0:focus { background-color: #002c52; }
.hover-bg-blue-1:hover { background-color: #003a6c; }
.hover-bg-blue-1:focus { background-color: #003a6c; }
.hover-bg-blue-2:hover { background-color: #0057a2; }
.hover-bg-blue-2:focus { background-color: #0057a2; }
.hover-bg-blue-3:hover { background-color: #0066bf; }
.hover-bg-blue-3:focus { background-color: #0066bf; }
.hover-bg-blue-4:hover { background-color: #0076dc; }
.hover-bg-blue-4:focus { background-color: #0076dc; }
.hover-bg-blue-5:hover { background-color: #0086fb; }
.hover-bg-blue-5:focus { background-color: #0086fb; }
.hover-bg-blue-6:hover { background-color: #4d97ff; }
.hover-bg-blue-6:focus { background-color: #4d97ff; }
.hover-bg-blue-7:hover { background-color: #72a9ff; }
.hover-bg-blue-7:focus { background-color: #72a9ff; }
.hover-bg-blue-8:hover { background-color: #8fbbff; }
.hover-bg-blue-8:focus { background-color: #8fbbff; }
.hover-bg-blue-9:hover { background-color: #a8ceff; }
.hover-bg-blue-9:focus { background-color: #a8ceff; }
.hover-bg-blue-10:hover { background-color: #bfe1ff; }
.hover-bg-blue-10:focus { background-color: #bfe1ff; }
.hover-bg-indigo-0:hover { background-color: #2c0599; }
.hover-bg-indigo-0:focus { background-color: #2c0599; }
.hover-bg-indigo-1:hover { background-color: #3706be; }
.hover-bg-indigo-1:focus { background-color: #3706be; }
.hover-bg-indigo-2:hover { background-color: #5c26ef; }
.hover-bg-indigo-2:focus { background-color: #5c26ef; }
.hover-bg-indigo-3:hover { background-color: #733ff1; }
.hover-bg-indigo-3:focus { background-color: #733ff1; }
.hover-bg-indigo-4:hover { background-color: #8655f3; }
.hover-bg-indigo-4:focus { background-color: #8655f3; }
.hover-bg-indigo-5:hover { background-color: #9769f5; }
.hover-bg-indigo-5:focus { background-color: #9769f5; }
.hover-bg-indigo-6:hover { background-color: #a67df7; }
.hover-bg-indigo-6:focus { background-color: #a67df7; }
.hover-bg-indigo-7:hover { background-color: #b491f9; }
.hover-bg-indigo-7:focus { background-color: #b491f9; }
.hover-bg-indigo-8:hover { background-color: #c2a6fb; }
.hover-bg-indigo-8:focus { background-color: #c2a6fb; }
.hover-bg-indigo-9:hover { background-color: #cebafc; }
.hover-bg-indigo-9:focus { background-color: #cebafc; }
.hover-bg-indigo-10:hover { background-color: #dacefd; }
.hover-bg-indigo-10:focus { background-color: #dacefd; }
.hover-bg-purple-0:hover { background-color: #500576; }
.hover-bg-purple-0:focus { background-color: #500576; }
.hover-bg-purple-1:hover { background-color: #630691; }
.hover-bg-purple-1:focus { background-color: #630691; }
.hover-bg-purple-2:hover { background-color: #8a09cb; }
.hover-bg-purple-2:focus { background-color: #8a09cb; }
.hover-bg-purple-3:hover { background-color: #9f0ae9; }
.hover-bg-purple-3:focus { background-color: #9f0ae9; }
.hover-bg-purple-4:hover { background-color: #af2ef6; }
.hover-bg-purple-4:focus { background-color: #af2ef6; }
.hover-bg-purple-5:hover { background-color: #bb4ef7; }
.hover-bg-purple-5:focus { background-color: #bb4ef7; }
.hover-bg-purple-6:hover { background-color: #c568f9; }
.hover-bg-purple-6:focus { background-color: #c568f9; }
.hover-bg-purple-7:hover { background-color: #d080fa; }
.hover-bg-purple-7:focus { background-color: #d080fa; }
.hover-bg-purple-8:hover { background-color: #d996fb; }
.hover-bg-purple-8:focus { background-color: #d996fb; }
.hover-bg-purple-9:hover { background-color: #e1acfb; }
.hover-bg-purple-9:focus { background-color: #e1acfb; }
.hover-bg-purple-10:hover { background-color: #e9c2fc; }
.hover-bg-purple-10:focus { background-color: #e9c2fc; }
.hover-bg-pink-0:hover { background-color: #640233; }
.hover-bg-pink-0:focus { background-color: #640233; }
.hover-bg-pink-1:hover { background-color: #7c033f; }
.hover-bg-pink-1:focus { background-color: #7c033f; }
.hover-bg-pink-2:hover { background-color: #ae0459; }
.hover-bg-pink-2:focus { background-color: #ae0459; }
.hover-bg-pink-3:hover { background-color: #c80467; }
.hover-bg-pink-3:focus { background-color: #c80467; }
.hover-bg-pink-4:hover { background-color: #e30574; }
.hover-bg-pink-4:focus { background-color: #e30574; }
.hover-bg-pink-5:hover { background-color: #fb1d83; }
.hover-bg-pink-5:focus { background-color: #fb1d83; }
.hover-bg-pink-6:hover { background-color: #fe5195; }
.hover-bg-pink-6:focus { background-color: #fe5195; }
.hover-bg-pink-7:hover { background-color: #ff73a7; }
.hover-bg-pink-7:focus { background-color: #ff73a7; }
.hover-bg-pink-8:hover { background-color: #ff8fba; }
.hover-bg-pink-8:focus { background-color: #ff8fba; }
.hover-bg-pink-9:hover { background-color: #ffa9cc; }
.hover-bg-pink-9:focus { background-color: #ffa9cc; }
.hover-bg-pink-10:hover { background-color: #fec1df; }
.hover-bg-pink-10:focus { background-color: #fec1df; }
.hover-bg-red-0:hover { background-color: #390408; }
.hover-bg-red-0:focus { background-color: #390408; }
.hover-bg-red-1:hover { background-color: #520814; }
.hover-bg-red-1:focus { background-color: #520814; }
.hover-bg-red-2:hover { background-color: #8a1223; }
.hover-bg-red-2:focus { background-color: #8a1223; }
.hover-bg-red-3:hover { background-color: #a7172b; }
.hover-bg-red-3:focus { background-color: #a7172b; }
.hover-bg-red-4:hover { background-color: #c61d33; }
.hover-bg-red-4:focus { background-color: #c61d33; }
.hover-bg-red-5:hover { background-color: #e02e40; }
.hover-bg-red-5:focus { background-color: #e02e40; }
.hover-bg-red-6:hover { background-color: #e95459; }
.hover-bg-red-6:focus { background-color: #e95459; }
.hover-bg-red-7:hover { background-color: #f17373; }
.hover-bg-red-7:focus { background-color: #f17373; }
.hover-bg-red-8:hover { background-color: #f68e8f; }
.hover-bg-red-8:focus { background-color: #f68e8f; }
.hover-bg-red-9:hover { background-color: #faa9ab; }
.hover-bg-red-9:focus { background-color: #faa9ab; }
.hover-bg-red-10:hover { background-color: #fbc3c8; }
.hover-bg-red-10:focus { background-color: #fbc3c8; }
.hover-bg-orange-0:hover { background-color: #6f2601; }
.hover-bg-orange-0:focus { background-color: #6f2601; }
.hover-bg-orange-1:hover { background-color: #862e03; }
.hover-bg-orange-1:focus { background-color: #862e03; }
.hover-bg-orange-2:hover { background-color: #b73f04; }
.hover-bg-orange-2:focus { background-color: #b73f04; }
.hover-bg-orange-3:hover { background-color: #d04704; }
.hover-bg-orange-3:focus { background-color: #d04704; }
.hover-bg-orange-4:hover { background-color: #ea5003; }
.hover-bg-orange-4:focus { background-color: #ea5003; }
.hover-bg-orange-5:hover { background-color: #fe6018; }
.hover-bg-orange-5:focus { background-color: #fe6018; }
.hover-bg-orange-6:hover { background-color: #ff7e45; }
.hover-bg-orange-6:focus { background-color: #ff7e45; }
.hover-bg-orange-7:hover { background-color: #ff9969; }
.hover-bg-orange-7:focus { background-color: #ff9969; }
.hover-bg-orange-8:hover { background-color: #ffb18b; }
.hover-bg-orange-8:focus { background-color: #ffb18b; }
.hover-bg-orange-9:hover { background-color: #ffc7ac; }
.hover-bg-orange-9:focus { background-color: #ffc7ac; }
.hover-bg-orange-10:hover { background-color: #feddcd; }
.hover-bg-orange-10:focus { background-color: #feddcd; }
.hover-bg-yellow-0:hover { background-color: #806800; }
.hover-bg-yellow-0:focus { background-color: #806800; }
.hover-bg-yellow-1:hover { background-color: #8e7300; }
.hover-bg-yellow-1:focus { background-color: #8e7300; }
.hover-bg-yellow-2:hover { background-color: #aa8a00; }
.hover-bg-yellow-2:focus { background-color: #aa8a00; }
.hover-bg-yellow-3:hover { background-color: #b89600; }
.hover-bg-yellow-3:focus { background-color: #b89600; }
.hover-bg-yellow-4:hover { background-color: #c7a200; }
.hover-bg-yellow-4:focus { background-color: #c7a200; }
.hover-bg-yellow-5:hover { background-color: #d6ae00; }
.hover-bg-yellow-5:focus { background-color: #d6ae00; }
.hover-bg-yellow-6:hover { background-color: #e5ba00; }
.hover-bg-yellow-6:focus { background-color: #e5ba00; }
.hover-bg-yellow-7:hover { background-color: #f4c700; }
.hover-bg-yellow-7:focus { background-color: #f4c700; }
.hover-bg-yellow-8:hover { background-color: #ffd434; }
.hover-bg-yellow-8:focus { background-color: #ffd434; }
.hover-bg-yellow-9:hover { background-color: #ffe483; }
.hover-bg-yellow-9:focus { background-color: #ffe483; }
.hover-bg-yellow-10:hover { background-color: #fff3bf; }
.hover-bg-yellow-10:focus { background-color: #fff3bf; }
/*!!!
# SPACING
An eight step powers of two scale ranging from 0 to 16rem.
### Docs
http://tachyons.io/docs/layout/spacing/
### Base
- p = padding
- m = margin
### Modifiers
- h = horizontal
- v = vertical
- t = top
- r = right
- b = bottom
- l = left
- 0 = none
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
- 4 = 4th step in spacing scale
- 5 = 5th step in spacing scale
- 6 = 6th step in spacing scale
- 7 = 7th step in spacing scale
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Variables */
.p0 { padding: 0; }
.p1 { padding: .25rem; }
.p2 { padding: .5rem; }
.p3 { padding: 1rem; }
.p4 { padding: 2rem; }
.p5 { padding: 4rem; }
.p6 { padding: 8rem; }
.p7 { padding: 16rem; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: .25rem; }
.pl2 { padding-left: .5rem; }
.pl3 { padding-left: 1rem; }
.pl4 { padding-left: 2rem; }
.pl5 { padding-left: 4rem; }
.pl6 { padding-left: 8rem; }
.pl7 { padding-left: 16rem; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: .25rem; }
.pr2 { padding-right: .5rem; }
.pr3 { padding-right: 1rem; }
.pr4 { padding-right: 2rem; }
.pr5 { padding-right: 4rem; }
.pr6 { padding-right: 8rem; }
.pr7 { padding-right: 16rem; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: .25rem; }
.pb2 { padding-bottom: .5rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 4rem; }
.pb6 { padding-bottom: 8rem; }
.pb7 { padding-bottom: 16rem; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: .25rem; }
.pt2 { padding-top: .5rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 4rem; }
.pt6 { padding-top: 8rem; }
.pt7 { padding-top: 16rem; }
.pv0 { padding-top: 0; padding-bottom: 0; }
.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.pv5 { padding-top: 4rem; padding-bottom: 4rem; }
.pv6 { padding-top: 8rem; padding-bottom: 8rem; }
.pv7 { padding-top: 16rem; padding-bottom: 16rem; }
.ph0 { padding-left: 0; padding-right: 0; }
.ph1 { padding-left: .25rem; padding-right: .25rem; }
.ph2 { padding-left: .5rem; padding-right: .5rem; }
.ph3 { padding-left: 1rem; padding-right: 1rem; }
.ph4 { padding-left: 2rem; padding-right: 2rem; }
.ph5 { padding-left: 4rem; padding-right: 4rem; }
.ph6 { padding-left: 8rem; padding-right: 8rem; }
.ph7 { padding-left: 16rem; padding-right: 16rem; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.m0 { margin: 0; }
.m1 { margin: .25rem; }
.m2 { margin: .5rem; }
.m3 { margin: 1rem; }
.m4 { margin: 2rem; }
.m5 { margin: 4rem; }
.m6 { margin: 8rem; }
.m7 { margin: 16rem; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: .25rem; }
.ml2 { margin-left: .5rem; }
.ml3 { margin-left: 1rem; }
.ml4 { margin-left: 2rem; }
.ml5 { margin-left: 4rem; }
.ml6 { margin-left: 8rem; }
.ml7 { margin-left: 16rem; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: .25rem; }
.mr2 { margin-right: .5rem; }
.mr3 { margin-right: 1rem; }
.mr4 { margin-right: 2rem; }
.mr5 { margin-right: 4rem; }
.mr6 { margin-right: 8rem; }
.mr7 { margin-right: 16rem; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .25rem; }
.mb2 { margin-bottom: .5rem; }
.mb3 { margin-bottom: 1rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 4rem; }
.mb6 { margin-bottom: 8rem; }
.mb7 { margin-bottom: 16rem; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
.mt2 { margin-top: .5rem; }
.mt3 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 4rem; }
.mt6 { margin-top: 8rem; }
.mt7 { margin-top: 16rem; }
.mv0 { margin-top: 0; margin-bottom: 0; }
.mv1 { margin-top: .25rem; margin-bottom: .25rem; }
.mv2 { margin-top: .5rem; margin-bottom: .5rem; }
.mv3 { margin-top: 1rem; margin-bottom: 1rem; }
.mv4 { margin-top: 2rem; margin-bottom: 2rem; }
.mv5 { margin-top: 4rem; margin-bottom: 4rem; }
.mv6 { margin-top: 8rem; margin-bottom: 8rem; }
.mv7 { margin-top: 16rem; margin-bottom: 16rem; }
.mh0 { margin-left: 0; margin-right: 0; }
.mh1 { margin-left: .25rem; margin-right: .25rem; }
.mh2 { margin-left: .5rem; margin-right: .5rem; }
.mh3 { margin-left: 1rem; margin-right: 1rem; }
.mh4 { margin-left: 2rem; margin-right: 2rem; }
.mh5 { margin-left: 4rem; margin-right: 4rem; }
.mh6 { margin-left: 8rem; margin-right: 8rem; }
.mh7 { margin-left: 16rem; margin-right: 16rem; }
/*!!!
# NEGATIVE MARGINS
### Base
- n = negative
### Modifiers
- a = all
- t = top
- r = right
- b = bottom
- l = left
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
- 4 = 4th step in spacing scale
- 5 = 5th step in spacing scale
- 6 = 6th step in spacing scale
- 7 = 7th step in spacing scale
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.na1 { margin: -.25rem; }
.na2 { margin: -.5rem; }
.na3 { margin: -1rem; }
.na4 { margin: -2rem; }
.na5 { margin: -4rem; }
.na6 { margin: -8rem; }
.na7 { margin: -16rem; }
.nl1 { margin-left: -.25rem; }
.nl2 { margin-left: -.5rem; }
.nl3 { margin-left: -1rem; }
.nl4 { margin-left: -2rem; }
.nl5 { margin-left: -4rem; }
.nl6 { margin-left: -8rem; }
.nl7 { margin-left: -16rem; }
.nr1 { margin-right: -.25rem; }
.nr2 { margin-right: -.5rem; }
.nr3 { margin-right: -1rem; }
.nr4 { margin-right: -2rem; }
.nr5 { margin-right: -4rem; }
.nr6 { margin-right: -8rem; }
.nr7 { margin-right: -16rem; }
.nb1 { margin-bottom: -.25rem; }
.nb2 { margin-bottom: -.5rem; }
.nb3 { margin-bottom: -1rem; }
.nb4 { margin-bottom: -2rem; }
.nb5 { margin-bottom: -4rem; }
.nb6 { margin-bottom: -8rem; }
.nb7 { margin-bottom: -16rem; }
.nt1 { margin-top: -.25rem; }
.nt2 { margin-top: -.5rem; }
.nt3 { margin-top: -1rem; }
.nt4 { margin-top: -2rem; }
.nt5 { margin-top: -4rem; }
.nt6 { margin-top: -8rem; }
.nt7 { margin-top: -16rem; }
/*!!!
# TABLES
### Docs
http://tachyons.io/docs/elements/tables/
### Base
- collapse = border collapse
- striped = striped table
### Modifiers
- `-light` = light stripes
- `-dark` = dark stripes
- `--light-silver` = light-silver stripes
- `--moon-gray` = moon-gray stripes
- `--light-gray` = light-gray stripes
- `--near-white` = near-white stripes
*/
.collapse { border-collapse: collapse; border-spacing: 0; }
.striped--light-silver:nth-child(odd) { background-color: undefined; }
.striped--moon-gray:nth-child(odd) { background-color: undefined; }
.striped--light-gray:nth-child(odd) { background-color: undefined; }
.striped--near-white:nth-child(odd) { background-color: undefined; }
.stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); }
.stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); }
/*!!!
# TEXT DECORATION
### Docs
http://tachyons.io/docs/typography/text-decoration/
### Base
- strike = line-through
- underline = underline
- no-underline = string value 'none'
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
/*!!!
# TEXT ALIGN
### Docs
http://tachyons.io/docs/typography/text-align/
### Base
t = text-align
### Modifiers
- l = left
- r = right
- c = center
- j = justify
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tj { text-align: justify; }
/*!!!
# TEXT TRANSFORM
### Docs
http://tachyons.io/docs/typography/text-transform/
### Base
- tt = text-transform
### Modifiers
- c = capitalize
- l = lowercase
- u = uppercase
- n = none
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
/*!!!
# TYPE SCALE
### Docs
http://tachyons.io/docs/typography/scale/
### Base
- f = font-size
### Modifiers
- 1 = 1st step in size scale
- 2 = 2nd step in size scale
- 3 = 3rd step in size scale
- 4 = 4th step in size scale
- 5 = 5th step in size scale
- 6 = 6th step in size scale
- 7 = 7th step in size scale
- 8 = 8th step in size scale
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Type Scale */
.f0 { font-size: 6rem; }
.f1 { font-size: 4rem; }
.f2 { font-size: 3rem; }
.f3 { font-size: 2rem; }
.f4 { font-size: 1.5rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
/* Small and hard to read for many people so use with extreme caution */
.f7 { font-size: .75rem; }
/*!!!
# TYPOGRAPHY
### Docs
http://tachyons.io/docs/typography/measure/
### Base
- measure = max-width 30em
- measure-wide = max-width 34em
- measure-narrow = max-width 20em
- indent = indent
- small-caps = small caps
- truncate = truncate
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Measure is limited to ~66 characters */
.measure { max-width: 30em; }
/* Measure is limited to ~80 characters */
.measure-wide { max-width: 34em; }
/* Measure is limited to ~45 characters */
.measure-narrow { max-width: 20em; }
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps { font-variant: small-caps; }
/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*!!!
# UTILITIES
### Base
- `overflow-container` = horizontal scroll
- `center` = margin auto
- `mr-auto` = margin-right auto
- `ml-auto` = margin-left auto
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/* Equivalent to .overflow-y-scroll */
.overflow-container { overflow-y: scroll; }
.center { margin-right: auto; margin-left: auto; }
/*!!!
# VISIBILITY
### Base
- clip
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
/*
Text that is hidden but accessible
Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
/*!!!
# WHITE SPACE
### Base
- ws-normal = white-space normal
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.ws-normal { white-space: normal; }
.ws-nowrap { white-space: nowrap; }
.ws-pre { white-space: pre; }
/*!!!
# VERTICAL ALIGN
### Base
- v = vertical-align
### Modifiers
- `-base` = baseline
- `-mid` = middle
- `-top` = top
- `-btm` = bottom
### Media Query Extensions
- `-s` = small
- `-m` = medium
- `-l` = large
*/
.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }
/*!!!
# HOVER EFFECTS
### Docs
http://tachyons.io/docs/themes/hovers/
### Base
- dim - Dim element on hover
- glow - Animate opacity to 100% on hover
- hide-child - Hide child & reveal on hover
- underline-hover - Underline text on hover
- grow - Grow element on hover
- pointer - Show cursor: pointer on hover
- shadow - Show shadow on hover
- bg-animate - Animate background color on hover
### Examples
##### Hide child & reveal on hover
Put the hide-child class on a parent element and any nested element with the
child class will be hidden and displayed on hover or focus.
```html
<div class="hide-child">
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
</div>
```
*/
/*
Dim element on hover by adding the dim class.
*/
.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
.dim:active { opacity: .8; transition: opacity .15s ease-out; }
/*
Animate opacity to 100% on hover by adding the glow class.
*/
.glow { transition: opacity .15s ease-in; }
.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
/*
Hide child & reveal on hover:
Put the hide-child class on a parent element and any nested element with the
child class will be hidden and displayed on hover or focus.
<div class="hide-child">
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
<div class="child"> Hidden until hover or focus </div>
</div>
*/
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
/* Add pointer on hover */
.pointer:hover { cursor: pointer; }
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
/*!!!
# Z-INDEX
### Base
- z = z-index
### Modifiers
- -0 = literal value 0
- -1 = literal value 1
- -2 = literal value 2
- -3 = literal value 3
- -4 = literal value 4
- -5 = literal value 5
- -999 = literal value 999
- -9999 = literal value 9999
- `-max` = largest accepted z-index value as integer
- `-inherit` = string value inherit
- `-initial` = string value initial
- `-unset` = string value unset
### MDN
https://developer.mozilla.org/en/docs/Web/CSS/z-index
### Spec
http://www.w3.org/TR/CSS2/zindex.html
### Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
### Tips on extending
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.z-max { z-index: 2147483647; }
.z-inherit { z-index: inherit; }
.z-initial { z-index: initial; }
.z-unset { z-index: unset; }
/*!!!
# NESTED
Tachyons module for styling nested elements
that are generated by a cms.
*/
.nested-copy-line-height p, .nested-copy-line-height ul,
.nested-copy-line-height ol { line-height: 1.5; }
.nested-headline-line-height h1, .nested-headline-line-height h2,
.nested-headline-line-height h3, .nested-headline-line-height h4,
.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }
.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.nested-copy-separator p+p { margin-top: 1.5em; }
.nested-copy-large-leading p:first-of-type { font-size: 1.25rem; }
.nested-img img { width: 100%; max-width: 100%; display: block; }
.nested-links a { color: undefined; transition: color .15s ease-in; }
.nested-links a:hover { color: undefined; transition: color .15s ease-in; }
.nested-links a:focus { color: undefined; transition: color .15s ease-in; }
/*!!!
# STYLES
Add custom styles here.
*/
/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*!!!
# COLOR VARIABLES
### Grayscale
- Solids
- Transparencies for black and white, 0-100
- Custom colors based on palx
*/
/*!!!
# CUSTOM MEDIA QUERIES
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
The media queries are min-width based meaning that the medium
breakpoints apply to all devices that are the medium min-width
or larger.
These media queries can be referenced like so:
```css
@media (--breakpoint-small) {
.bg-red-s {
background-color: red;
}
}
@media (--breakpoint-medium) {
.bg-red-m {
background-color: red;
}
}
@media (--breakpoint-large) {
.bg-red-l {
background-color: red;
}
}
```
*/
/* Media Queries */
/* Debugging */
/*!!!
# DEBUG CHILDREN
Add the debug class to any element to see outlines on its
children.
### Docs
http://tachyons.io/docs/debug/
### Base
- debug
### Modifiers
- `-white` = white outline
- `-black` = black outline
*/
.debug * { outline: 1px solid gold; }
.debug-white * { outline: 1px solid white; }
.debug-black * { outline: 1px solid black; }
/*!!!
# DEBUG GRID
Can be useful for debugging layout issues
or helping to make sure things line up perfectly.
Just tack one of these classes onto a parent element.
### Docs
http://tachyons.io/docs/debug-grid/
### Base
- debug-grid
### Modifiers
- `-16` = 16px grid
- `-8-solid` = solid 8px grid
- `-16-solid` = solid 16px grid
*/
.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; }
.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left; }
.debug-grid-8-solid { background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left; }
.debug-grid-16-solid { background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left; }
/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */
/* Addons */
/* Uncomment out any of the lines below to import the addon */
/* @import './_gradients'; */
/* @import './_nudge'; */
/* @import "./_animate"; */
@media screen and (min-width: 30em) {
.aspect-ratio-s { height: 0; position: relative; }
.aspect-ratio--16x9-s { padding-bottom: 56.25%; }
.aspect-ratio--9x16-s { padding-bottom: 177.77%; }
.aspect-ratio--4x3-s { padding-bottom: 75%; }
.aspect-ratio--3x4-s { padding-bottom: 133.33%; }
.aspect-ratio--6x4-s { padding-bottom: 66.6%; }
.aspect-ratio--4x6-s { padding-bottom: 150%; }
.aspect-ratio--8x5-s { padding-bottom: 62.5%; }
.aspect-ratio--5x8-s { padding-bottom: 160%; }
.aspect-ratio--7x5-s { padding-bottom: 71.42%; }
.aspect-ratio--5x7-s { padding-bottom: 140%; }
.aspect-ratio--1x1-s { padding-bottom: 100%; }
.aspect-ratio--object-s { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.cover-s { background-size: cover !important; }
.contain-s { background-size: contain !important; }
.bg-center-s { background-repeat: no-repeat; background-position: center center; }
.bg-top-s { background-repeat: no-repeat; background-position: top center; }
.bg-right-s { background-repeat: no-repeat; background-position: center right; }
.bg-bottom-s { background-repeat: no-repeat; background-position: bottom center; }
.bg-left-s { background-repeat: no-repeat; background-position: center left; }
.outline-s { outline: 1px solid; }
.outline-transparent-s { outline: 1px solid transparent; }
.outline-0-s { outline: 0; }
.ba-s { border-style: solid; border-width: 1px; }
.bt-s { border-top-style: solid; border-top-width: 1px; }
.br-s { border-right-style: solid; border-right-width: 1px; }
.bb-s { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-s { border-left-style: solid; border-left-width: 1px; }
.bn-s { border-style: none; border-width: 0; }
.br0-s { border-radius: 0; }
.br1-s { border-radius: 3px; }
.br2-s { border-radius: 5px; }
.br3-s { border-radius: 9px; }
.br4-s { border-radius: 17px; }
.br-100-s { border-radius: 100%; }
.br-pill-s { border-radius: 9999px; }
.br--bottom-s { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top-s { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-s { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-s { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.b--dotted-s { border-style: dotted; }
.b--dashed-s { border-style: dashed; }
.b--solid-s { border-style: solid; }
.b--none-s { border-style: none; }
.bw0-s { border-width: 0; }
.bw1-s { border-width: .125rem; }
.bw2-s { border-width: .25rem; }
.bw3-s { border-width: .5rem; }
.bw4-s { border-width: 1rem; }
.bw5-s { border-width: 2rem; }
.bt-0-s { border-top-width: 0; }
.br-0-s { border-right-width: 0; }
.bb-0-s { border-bottom-width: 0; }
.bl-0-s { border-left-width: 0; }
.shadow-1-s { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2-s { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3-s { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4-s { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5-s { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-none-s { box-shadow: none; }
.top-0-s { top: 0; }
.left-0-s { left: 0; }
.right-0-s { right: 0; }
.bottom-0-s { bottom: 0; }
.top-1-s { top: 1rem; }
.left-1-s { left: 1rem; }
.right-1-s { right: 1rem; }
.bottom-1-s { bottom: 1rem; }
.top-2-s { top: 2rem; }
.left-2-s { left: 2rem; }
.right-2-s { right: 2rem; }
.bottom-2-s { bottom: 2rem; }
.top--1-s { top: -1rem; }
.right--1-s { right: -1rem; }
.bottom--1-s { bottom: -1rem; }
.left--1-s { left: -1rem; }
.top--2-s { top: -2rem; }
.right--2-s { right: -2rem; }
.bottom--2-s { bottom: -2rem; }
.left--2-s { left: -2rem; }
.absolute--fill-s { top: 0; right: 0; bottom: 0; left: 0; }
.cl-s { clear: left; }
.cr-s { clear: right; }
.cb-s { clear: both; }
.cn-s { clear: none; }
.dn-s { display: none; }
.di-s { display: inline; }
.db-s { display: block; }
.dib-s { display: inline-block; }
.dit-s { display: inline-table; }
.dt-s { display: table; }
.dtc-s { display: table-cell; }
.dt-row-s { display: table-row; }
.dt--fixed-s { table-layout: fixed; width: 100%; }
.flex-s { display: flex; }
.inline-flex-s { display: inline-flex; }
.flex-1-s { flex: 1; }
.flex-auto-s { flex: 1 1 auto; }
.flex-initial-s { flex: initial; }
.flex-none-s { flex: none; }
.flex-column-s { flex-direction: column; }
.flex-row-s { flex-direction: row; }
.flex-wrap-s { flex-wrap: wrap; }
.flex-nowrap-s { flex-wrap: nowrap; }
.flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
.flex-column-reverse-s { flex-direction: column-reverse; }
.flex-row-reverse-s { flex-direction: row-reverse; }
.items-start-s { align-items: flex-start; }
.items-end-s { align-items: flex-end; }
.items-center-s { align-items: center; }
.items-baseline-s { align-items: baseline; }
.items-stretch-s { align-items: stretch; }
.self-start-s { align-self: flex-start; }
.self-end-s { align-self: flex-end; }
.self-center-s { align-self: center; }
.self-baseline-s { align-self: baseline; }
.self-stretch-s { align-self: stretch; }
.justify-start-s { justify-content: flex-start; }
.justify-end-s { justify-content: flex-end; }
.justify-center-s { justify-content: center; }
.justify-between-s { justify-content: space-between; }
.justify-around-s { justify-content: space-around; }
.content-start-s { align-content: flex-start; }
.content-end-s { align-content: flex-end; }
.content-center-s { align-content: center; }
.content-between-s { align-content: space-between; }
.content-around-s { align-content: space-around; }
.content-stretch-s { align-content: stretch; }
.order-0-s { order: 0; }
.order-1-s { order: 1; }
.order-2-s { order: 2; }
.order-3-s { order: 3; }
.order-4-s { order: 4; }
.order-5-s { order: 5; }
.order-6-s { order: 6; }
.order-7-s { order: 7; }
.order-8-s { order: 8; }
.order-last-s { order: 99999; }
.flex-grow-0-s { flex-grow: 0; }
.flex-grow-1-s { flex-grow: 1; }
.flex-shrink-0-s { flex-shrink: 0; }
.flex-shrink-1-s { flex-shrink: 1; }
.fl-s { float: left; _display: inline; }
.fr-s { float: right; _display: inline; }
.fn-s { float: none; }
.i-s { font-style: italic; }
.fs-normal-s { font-style: normal; }
.b-s { font-weight: bold; }
.fw1-s { font-weight: 100; }
.fw2-s { font-weight: 200; }
.fw3-s { font-weight: 300; }
.fw4-s { font-weight: 400; }
.fw5-s { font-weight: 500; }
.fw6-s { font-weight: 600; }
.fw7-s { font-weight: 700; }
.fw8-s { font-weight: 800; }
.fw9-s { font-weight: 900; }
.h1-s { height: 1rem; }
.h2-s { height: 2rem; }
.h3-s { height: 4rem; }
.h4-s { height: 8rem; }
.h5-s { height: 16rem; }
.h-25-s { height: 25%; }
.h-50-s { height: 50%; }
.h-75-s { height: 75%; }
.h-100-s { height: 100%; }
.min-h-100-s { min-height: 100%; }
.vh-25-s { height: 25vh; }
.vh-50-s { height: 50vh; }
.vh-75-s { height: 75vh; }
.vh-100-s { height: 100vh; }
.min-vh-100-s { min-height: 100vh; }
.h-auto-s { height: auto; }
.h-inherit-s { height: inherit; }
.ls1-s { letter-spacing: -.05em; }
.ls2-s { letter-spacing: .1em; }
.ls3-s { letter-spacing: .25em; }
.lh-solid-s { line-height: 1; }
.lh-title-s { line-height: 1.25; }
.lh-copy-s { line-height: 1.5; }
.mw-100-s { max-width: 100%; }
.mw1-s { max-width: 1rem; }
.mw2-s { max-width: 2rem; }
.mw3-s { max-width: 4rem; }
.mw4-s { max-width: 8rem; }
.mw5-s { max-width: 16rem; }
.mw6-s { max-width: 32rem; }
.mw7-s { max-width: 48rem; }
.mw8-s { max-width: 56rem; }
.mw9-s { max-width: 64rem; }
.mw10-s { max-width: 80rem; }
.mw-none-s { max-width: none; }
.w1-s { width: 1rem; }
.w2-s { width: 2rem; }
.w3-s { width: 4rem; }
.w4-s { width: 8rem; }
.w5-s { width: 16rem; }
.w-10-s { width: 10%; }
.w-20-s { width: 20%; }
.w-25-s { width: 25%; }
.w-30-s { width: 30%; }
.w-40-s { width: 40%; }
.w-50-s { width: 50%; }
.w-60-s { width: 60%; }
.w-70-s { width: 70%; }
.w-75-s { width: 75%; }
.w-80-s { width: 80%; }
.w-90-s { width: 90%; }
.w-100-s { width: 100%; }
.w-third-s { width: calc( 100% / 3 ); }
.w-two-thirds-s { width: calc( 100% / 1.5 ); }
.w-auto-s { width: auto; }
.overflow-visible-s { overflow: visible; }
.overflow-hidden-s { overflow: hidden; }
.overflow-scroll-s { overflow: scroll; }
.overflow-auto-s { overflow: auto; }
.overflow-x-visible-s { overflow-x: visible; }
.overflow-x-hidden-s { overflow-x: hidden; }
.overflow-x-scroll-s { overflow-x: scroll; }
.overflow-x-auto-s { overflow-x: auto; }
.overflow-y-visible-s { overflow-y: visible; }
.overflow-y-hidden-s { overflow-y: hidden; }
.overflow-y-scroll-s { overflow-y: scroll; }
.overflow-y-auto-s { overflow-y: auto; }
.static-s { position: static; }
.relative-s { position: relative; }
.absolute-s { position: absolute; }
.fixed-s { position: fixed; }
.sticky-s { position: -webkit-sticky; position: sticky; }
.rotate-45-s { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
.rotate-90-s { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
.rotate-135-s { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
.rotate-180-s { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
.rotate-225-s { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
.rotate-270-s { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
.rotate-315-s { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
.p0-s { padding: 0; }
.p1-s { padding: .25rem; }
.p2-s { padding: .5rem; }
.p3-s { padding: 1rem; }
.p4-s { padding: 2rem; }
.p5-s { padding: 4rem; }
.p6-s { padding: 8rem; }
.p7-s { padding: 16rem; }
.pl0-s { padding-left: 0; }
.pl1-s { padding-left: .25rem; }
.pl2-s { padding-left: .5rem; }
.pl3-s { padding-left: 1rem; }
.pl4-s { padding-left: 2rem; }
.pl5-s { padding-left: 4rem; }
.pl6-s { padding-left: 8rem; }
.pl7-s { padding-left: 16rem; }
.pr0-s { padding-right: 0; }
.pr1-s { padding-right: .25rem; }
.pr2-s { padding-right: .5rem; }
.pr3-s { padding-right: 1rem; }
.pr4-s { padding-right: 2rem; }
.pr5-s { padding-right: 4rem; }
.pr6-s { padding-right: 8rem; }
.pr7-s { padding-right: 16rem; }
.pb0-s { padding-bottom: 0; }
.pb1-s { padding-bottom: .25rem; }
.pb2-s { padding-bottom: .5rem; }
.pb3-s { padding-bottom: 1rem; }
.pb4-s { padding-bottom: 2rem; }
.pb5-s { padding-bottom: 4rem; }
.pb6-s { padding-bottom: 8rem; }
.pb7-s { padding-bottom: 16rem; }
.pt0-s { padding-top: 0; }
.pt1-s { padding-top: .25rem; }
.pt2-s { padding-top: .5rem; }
.pt3-s { padding-top: 1rem; }
.pt4-s { padding-top: 2rem; }
.pt5-s { padding-top: 4rem; }
.pt6-s { padding-top: 8rem; }
.pt7-s { padding-top: 16rem; }
.pv0-s { padding-top: 0; padding-bottom: 0; }
.pv1-s { padding-top: .25rem; padding-bottom: .25rem; }
.pv2-s { padding-top: .5rem; padding-bottom: .5rem; }
.pv3-s { padding-top: 1rem; padding-bottom: 1rem; }
.pv4-s { padding-top: 2rem; padding-bottom: 2rem; }
.pv5-s { padding-top: 4rem; padding-bottom: 4rem; }
.pv6-s { padding-top: 8rem; padding-bottom: 8rem; }
.pv7-s { padding-top: 16rem; padding-bottom: 16rem; }
.ph0-s { padding-left: 0; padding-right: 0; }
.ph1-s { padding-left: .25rem; padding-right: .25rem; }
.ph2-s { padding-left: .5rem; padding-right: .5rem; }
.ph3-s { padding-left: 1rem; padding-right: 1rem; }
.ph4-s { padding-left: 2rem; padding-right: 2rem; }
.ph5-s { padding-left: 4rem; padding-right: 4rem; }
.ph6-s { padding-left: 8rem; padding-right: 8rem; }
.ph7-s { padding-left: 16rem; padding-right: 16rem; }
.mt-auto-s { margin-top: auto; }
.mr-auto-s { margin-right: auto; }
.mb-auto-s { margin-bottom: auto; }
.ml-auto-s { margin-left: auto; }
.m0-s { margin: 0; }
.m1-s { margin: .25rem; }
.m2-s { margin: .5rem; }
.m3-s { margin: 1rem; }
.m4-s { margin: 2rem; }
.m5-s { margin: 4rem; }
.m6-s { margin: 8rem; }
.m7-s { margin: 16rem; }
.ml0-s { margin-left: 0; }
.ml1-s { margin-left: .25rem; }
.ml2-s { margin-left: .5rem; }
.ml3-s { margin-left: 1rem; }
.ml4-s { margin-left: 2rem; }
.ml5-s { margin-left: 4rem; }
.ml6-s { margin-left: 8rem; }
.ml7-s { margin-left: 16rem; }
.mr0-s { margin-right: 0; }
.mr1-s { margin-right: .25rem; }
.mr2-s { margin-right: .5rem; }
.mr3-s { margin-right: 1rem; }
.mr4-s { margin-right: 2rem; }
.mr5-s { margin-right: 4rem; }
.mr6-s { margin-right: 8rem; }
.mr7-s { margin-right: 16rem; }
.mb0-s { margin-bottom: 0; }
.mb1-s { margin-bottom: .25rem; }
.mb2-s { margin-bottom: .5rem; }
.mb3-s { margin-bottom: 1rem; }
.mb4-s { margin-bottom: 2rem; }
.mb5-s { margin-bottom: 4rem; }
.mb6-s { margin-bottom: 8rem; }
.mb7-s { margin-bottom: 16rem; }
.mt0-s { margin-top: 0; }
.mt1-s { margin-top: .25rem; }
.mt2-s { margin-top: .5rem; }
.mt3-s { margin-top: 1rem; }
.mt4-s { margin-top: 2rem; }
.mt5-s { margin-top: 4rem; }
.mt6-s { margin-top: 8rem; }
.mt7-s { margin-top: 16rem; }
.mv0-s { margin-top: 0; margin-bottom: 0; }
.mv1-s { margin-top: .25rem; margin-bottom: .25rem; }
.mv2-s { margin-top: .5rem; margin-bottom: .5rem; }
.mv3-s { margin-top: 1rem; margin-bottom: 1rem; }
.mv4-s { margin-top: 2rem; margin-bottom: 2rem; }
.mv5-s { margin-top: 4rem; margin-bottom: 4rem; }
.mv6-s { margin-top: 8rem; margin-bottom: 8rem; }
.mv7-s { margin-top: 16rem; margin-bottom: 16rem; }
.mh0-s { margin-left: 0; margin-right: 0; }
.mh1-s { margin-left: .25rem; margin-right: .25rem; }
.mh2-s { margin-left: .5rem; margin-right: .5rem; }
.mh3-s { margin-left: 1rem; margin-right: 1rem; }
.mh4-s { margin-left: 2rem; margin-right: 2rem; }
.mh5-s { margin-left: 4rem; margin-right: 4rem; }
.mh6-s { margin-left: 8rem; margin-right: 8rem; }
.mh7-s { margin-left: 16rem; margin-right: 16rem; }
.na1-s { margin: -.25rem; }
.na2-s { margin: -.5rem; }
.na3-s { margin: -1rem; }
.na4-s { margin: -2rem; }
.na5-s { margin: -4rem; }
.na6-s { margin: -8rem; }
.na7-s { margin: -16rem; }
.nl1-s { margin-left: -.25rem; }
.nl2-s { margin-left: -.5rem; }
.nl3-s { margin-left: -1rem; }
.nl4-s { margin-left: -2rem; }
.nl5-s { margin-left: -4rem; }
.nl6-s { margin-left: -8rem; }
.nl7-s { margin-left: -16rem; }
.nr1-s { margin-right: -.25rem; }
.nr2-s { margin-right: -.5rem; }
.nr3-s { margin-right: -1rem; }
.nr4-s { margin-right: -2rem; }
.nr5-s { margin-right: -4rem; }
.nr6-s { margin-right: -8rem; }
.nr7-s { margin-right: -16rem; }
.nb1-s { margin-bottom: -.25rem; }
.nb2-s { margin-bottom: -.5rem; }
.nb3-s { margin-bottom: -1rem; }
.nb4-s { margin-bottom: -2rem; }
.nb5-s { margin-bottom: -4rem; }
.nb6-s { margin-bottom: -8rem; }
.nb7-s { margin-bottom: -16rem; }
.nt1-s { margin-top: -.25rem; }
.nt2-s { margin-top: -.5rem; }
.nt3-s { margin-top: -1rem; }
.nt4-s { margin-top: -2rem; }
.nt5-s { margin-top: -4rem; }
.nt6-s { margin-top: -8rem; }
.nt7-s { margin-top: -16rem; }
.strike-s { text-decoration: line-through; }
.underline-s { text-decoration: underline; }
.no-underline-s { text-decoration: none; }
.tl-s { text-align: left; }
.tr-s { text-align: right; }
.tc-s { text-align: center; }
.tj-s { text-align: justify; }
.ttc-s { text-transform: capitalize; }
.ttl-s { text-transform: lowercase; }
.ttu-s { text-transform: uppercase; }
.ttn-s { text-transform: none; }
.f0-s { font-size: 6rem; }
.f1-s { font-size: 4rem; }
.f2-s { font-size: 3rem; }
.f3-s { font-size: 2rem; }
.f4-s { font-size: 1.5rem; }
.f5-s { font-size: 1rem; }
.f6-s { font-size: .875rem; }
.f7-s { font-size: .75rem; }
.measure-s { max-width: 30em; }
.measure-wide-s { max-width: 34em; }
.measure-narrow-s { max-width: 20em; }
.indent-s { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps-s { font-variant: small-caps; }
.truncate-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-s { margin-right: auto; margin-left: auto; }
.clip-s { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
.ws-normal-s { white-space: normal; }
.ws-nowrap-s { white-space: nowrap; }
.ws-pre-s { white-space: pre; }
.v-base-s { vertical-align: baseline; }
.v-mid-s { vertical-align: middle; }
.v-top-s { vertical-align: top; }
.v-btm-s { vertical-align: bottom; }
}
@media screen and (min-width: 48em) {
.aspect-ratio-m { height: 0; position: relative; }
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
.aspect-ratio--4x3-m { padding-bottom: 75%; }
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
.aspect-ratio--4x6-m { padding-bottom: 150%; }
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
.aspect-ratio--5x8-m { padding-bottom: 160%; }
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
.aspect-ratio--5x7-m { padding-bottom: 140%; }
.aspect-ratio--1x1-m { padding-bottom: 100%; }
.aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.cover-m { background-size: cover !important; }
.contain-m { background-size: contain !important; }
.bg-center-m { background-repeat: no-repeat; background-position: center center; }
.bg-top-m { background-repeat: no-repeat; background-position: top center; }
.bg-right-m { background-repeat: no-repeat; background-position: center right; }
.bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
.bg-left-m { background-repeat: no-repeat; background-position: center left; }
.outline-m { outline: 1px solid; }
.outline-transparent-m { outline: 1px solid transparent; }
.outline-0-m { outline: 0; }
.ba-m { border-style: solid; border-width: 1px; }
.bt-m { border-top-style: solid; border-top-width: 1px; }
.br-m { border-right-style: solid; border-right-width: 1px; }
.bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-m { border-left-style: solid; border-left-width: 1px; }
.bn-m { border-style: none; border-width: 0; }
.br0-m { border-radius: 0; }
.br1-m { border-radius: 3px; }
.br2-m { border-radius: 5px; }
.br3-m { border-radius: 9px; }
.br4-m { border-radius: 17px; }
.br-100-m { border-radius: 100%; }
.br-pill-m { border-radius: 9999px; }
.br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.b--dotted-m { border-style: dotted; }
.b--dashed-m { border-style: dashed; }
.b--solid-m { border-style: solid; }
.b--none-m { border-style: none; }
.bw0-m { border-width: 0; }
.bw1-m { border-width: .125rem; }
.bw2-m { border-width: .25rem; }
.bw3-m { border-width: .5rem; }
.bw4-m { border-width: 1rem; }
.bw5-m { border-width: 2rem; }
.bt-0-m { border-top-width: 0; }
.br-0-m { border-right-width: 0; }
.bb-0-m { border-bottom-width: 0; }
.bl-0-m { border-left-width: 0; }
.shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-none-m { box-shadow: none; }
.top-0-m { top: 0; }
.left-0-m { left: 0; }
.right-0-m { right: 0; }
.bottom-0-m { bottom: 0; }
.top-1-m { top: 1rem; }
.left-1-m { left: 1rem; }
.right-1-m { right: 1rem; }
.bottom-1-m { bottom: 1rem; }
.top-2-m { top: 2rem; }
.left-2-m { left: 2rem; }
.right-2-m { right: 2rem; }
.bottom-2-m { bottom: 2rem; }
.top--1-m { top: -1rem; }
.right--1-m { right: -1rem; }
.bottom--1-m { bottom: -1rem; }
.left--1-m { left: -1rem; }
.top--2-m { top: -2rem; }
.right--2-m { right: -2rem; }
.bottom--2-m { bottom: -2rem; }
.left--2-m { left: -2rem; }
.absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; }
.cl-m { clear: left; }
.cr-m { clear: right; }
.cb-m { clear: both; }
.cn-m { clear: none; }
.dn-m { display: none; }
.di-m { display: inline; }
.db-m { display: block; }
.dib-m { display: inline-block; }
.dit-m { display: inline-table; }
.dt-m { display: table; }
.dtc-m { display: table-cell; }
.dt-row-m { display: table-row; }
.dt-row-group-m { display: table-row-group; }
.dt-column-m { display: table-column; }
.dt-column-group-m { display: table-column-group; }
.dt--fixed-m { table-layout: fixed; width: 100%; }
.flex-m { display: flex; }
.inline-flex-m { display: inline-flex; }
.flex-1-m { flex: 1; }
.flex-auto-m { flex: 1 1 auto; }
.flex-initial-m { flex: initial; }
.flex-none-m { flex: none; }
.flex-column-m { flex-direction: column; }
.flex-row-m { flex-direction: row; }
.flex-wrap-m { flex-wrap: wrap; }
.flex-nowrap-m { flex-wrap: nowrap; }
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
.flex-column-reverse-m { flex-direction: column-reverse; }
.flex-row-reverse-m { flex-direction: row-reverse; }
.items-start-m { align-items: flex-start; }
.items-end-m { align-items: flex-end; }
.items-center-m { align-items: center; }
.items-baseline-m { align-items: baseline; }
.items-stretch-m { align-items: stretch; }
.self-start-m { align-self: flex-start; }
.self-end-m { align-self: flex-end; }
.self-center-m { align-self: center; }
.self-baseline-m { align-self: baseline; }
.self-stretch-m { align-self: stretch; }
.justify-start-m { justify-content: flex-start; }
.justify-end-m { justify-content: flex-end; }
.justify-center-m { justify-content: center; }
.justify-between-m { justify-content: space-between; }
.justify-around-m { justify-content: space-around; }
.content-start-m { align-content: flex-start; }
.content-end-m { align-content: flex-end; }
.content-center-m { align-content: center; }
.content-between-m { align-content: space-between; }
.content-around-m { align-content: space-around; }
.content-stretch-m { align-content: stretch; }
.order-0-m { order: 0; }
.order-1-m { order: 1; }
.order-2-m { order: 2; }
.order-3-m { order: 3; }
.order-4-m { order: 4; }
.order-5-m { order: 5; }
.order-6-m { order: 6; }
.order-7-m { order: 7; }
.order-8-m { order: 8; }
.order-last-m { order: 99999; }
.flex-grow-0-m { flex-grow: 0; }
.flex-grow-1-m { flex-grow: 1; }
.flex-shrink-0-m { flex-shrink: 0; }
.flex-shrink-1-m { flex-shrink: 1; }
.fl-m { float: left; _display: inline; }
.fr-m { float: right; _display: inline; }
.fn-m { float: none; }
.i-m { font-style: italic; }
.fs-normal-m { font-style: normal; }
.b-m { font-weight: bold; }
.fw1-m { font-weight: 100; }
.fw2-m { font-weight: 200; }
.fw3-m { font-weight: 300; }
.fw4-m { font-weight: 400; }
.fw5-m { font-weight: 500; }
.fw6-m { font-weight: 600; }
.fw7-m { font-weight: 700; }
.fw8-m { font-weight: 800; }
.fw9-m { font-weight: 900; }
.h1-m { height: 1rem; }
.h2-m { height: 2rem; }
.h3-m { height: 4rem; }
.h4-m { height: 8rem; }
.h5-m { height: 16rem; }
.h-25-m { height: 25%; }
.h-50-m { height: 50%; }
.h-75-m { height: 75%; }
.h-100-m { height: 100%; }
.min-h-100-m { min-height: 100%; }
.vh-25-m { height: 25vh; }
.vh-50-m { height: 50vh; }
.vh-75-m { height: 75vh; }
.vh-100-m { height: 100vh; }
.min-vh-100-m { min-height: 100vh; }
.h-auto-m { height: auto; }
.h-inherit-m { height: inherit; }
.ls1-m { letter-spacing: -.05em; }
.ls2-m { letter-spacing: .1em; }
.ls3-m { letter-spacing: .25em; }
.lh-solid-m { line-height: 1; }
.lh-title-m { line-height: 1.25; }
.lh-copy-m { line-height: 1.5; }
.mw-100-m { max-width: 100%; }
.mw1-m { max-width: 1rem; }
.mw2-m { max-width: 2rem; }
.mw3-m { max-width: 4rem; }
.mw4-m { max-width: 8rem; }
.mw5-m { max-width: 16rem; }
.mw6-m { max-width: 32rem; }
.mw7-m { max-width: 48rem; }
.mw8-m { max-width: 56rem; }
.mw9-m { max-width: 64rem; }
.mw10-m { max-width: 80rem; }
.mw-none-m { max-width: none; }
.w1-m { width: 1rem; }
.w2-m { width: 2rem; }
.w3-m { width: 4rem; }
.w4-m { width: 8rem; }
.w5-m { width: 16rem; }
.w-10-m { width: 10%; }
.w-20-m { width: 20%; }
.w-25-m { width: 25%; }
.w-30-m { width: 30%; }
.w-40-m { width: 40%; }
.w-50-m { width: 50%; }
.w-60-m { width: 60%; }
.w-70-m { width: 70%; }
.w-75-m { width: 75%; }
.w-80-m { width: 80%; }
.w-90-m { width: 90%; }
.w-100-m { width: 100%; }
.w-third-m { width: calc( 100% / 3 ); }
.w-two-thirds-m { width: calc( 100% / 1.5 ); }
.w-auto-m { width: auto; }
.overflow-visible-m { overflow: visible; }
.overflow-hidden-m { overflow: hidden; }
.overflow-scroll-m { overflow: scroll; }
.overflow-auto-m { overflow: auto; }
.overflow-x-visible-m { overflow-x: visible; }
.overflow-x-hidden-m { overflow-x: hidden; }
.overflow-x-scroll-m { overflow-x: scroll; }
.overflow-x-auto-m { overflow-x: auto; }
.overflow-y-visible-m { overflow-y: visible; }
.overflow-y-hidden-m { overflow-y: hidden; }
.overflow-y-scroll-m { overflow-y: scroll; }
.overflow-y-auto-m { overflow-y: auto; }
.static-m { position: static; }
.relative-m { position: relative; }
.absolute-m { position: absolute; }
.fixed-m { position: fixed; }
.sticky-m { position: -webkit-sticky; position: sticky; }
.rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
.rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
.rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
.rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
.rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
.rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
.rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
.p0-m { padding: 0; }
.p1-m { padding: .25rem; }
.p2-m { padding: .5rem; }
.p3-m { padding: 1rem; }
.p4-m { padding: 2rem; }
.p5-m { padding: 4rem; }
.p6-m { padding: 8rem; }
.p7-m { padding: 16rem; }
.pl0-m { padding-left: 0; }
.pl1-m { padding-left: .25rem; }
.pl2-m { padding-left: .5rem; }
.pl3-m { padding-left: 1rem; }
.pl4-m { padding-left: 2rem; }
.pl5-m { padding-left: 4rem; }
.pl6-m { padding-left: 8rem; }
.pl7-m { padding-left: 16rem; }
.pr0-m { padding-right: 0; }
.pr1-m { padding-right: .25rem; }
.pr2-m { padding-right: .5rem; }
.pr3-m { padding-right: 1rem; }
.pr4-m { padding-right: 2rem; }
.pr5-m { padding-right: 4rem; }
.pr6-m { padding-right: 8rem; }
.pr7-m { padding-right: 16rem; }
.pb0-m { padding-bottom: 0; }
.pb1-m { padding-bottom: .25rem; }
.pb2-m { padding-bottom: .5rem; }
.pb3-m { padding-bottom: 1rem; }
.pb4-m { padding-bottom: 2rem; }
.pb5-m { padding-bottom: 4rem; }
.pb6-m { padding-bottom: 8rem; }
.pb7-m { padding-bottom: 16rem; }
.pt0-m { padding-top: 0; }
.pt1-m { padding-top: .25rem; }
.pt2-m { padding-top: .5rem; }
.pt3-m { padding-top: 1rem; }
.pt4-m { padding-top: 2rem; }
.pt5-m { padding-top: 4rem; }
.pt6-m { padding-top: 8rem; }
.pt7-m { padding-top: 16rem; }
.pv0-m { padding-top: 0; padding-bottom: 0; }
.pv1-m { padding-top: .25rem; padding-bottom: .25rem; }
.pv2-m { padding-top: .5rem; padding-bottom: .5rem; }
.pv3-m { padding-top: 1rem; padding-bottom: 1rem; }
.pv4-m { padding-top: 2rem; padding-bottom: 2rem; }
.pv5-m { padding-top: 4rem; padding-bottom: 4rem; }
.pv6-m { padding-top: 8rem; padding-bottom: 8rem; }
.pv7-m { padding-top: 16rem; padding-bottom: 16rem; }
.ph0-m { padding-left: 0; padding-right: 0; }
.ph1-m { padding-left: .25rem; padding-right: .25rem; }
.ph2-m { padding-left: .5rem; padding-right: .5rem; }
.ph3-m { padding-left: 1rem; padding-right: 1rem; }
.ph4-m { padding-left: 2rem; padding-right: 2rem; }
.ph5-m { padding-left: 4rem; padding-right: 4rem; }
.ph6-m { padding-left: 8rem; padding-right: 8rem; }
.ph7-m { padding-left: 16rem; padding-right: 16rem; }
.mt-auto-m { margin-top: auto; }
.mr-auto-m { margin-right: auto; }
.mb-auto-m { margin-bottom: auto; }
.ml-auto-m { margin-left: auto; }
.m0-m { margin: 0; }
.m1-m { margin: .25rem; }
.m2-m { margin: .5rem; }
.m3-m { margin: 1rem; }
.m4-m { margin: 2rem; }
.m5-m { margin: 4rem; }
.m6-m { margin: 8rem; }
.m7-m { margin: 16rem; }
.ml0-m { margin-left: 0; }
.ml1-m { margin-left: .25rem; }
.ml2-m { margin-left: .5rem; }
.ml3-m { margin-left: 1rem; }
.ml4-m { margin-left: 2rem; }
.ml5-m { margin-left: 4rem; }
.ml6-m { margin-left: 8rem; }
.ml7-m { margin-left: 16rem; }
.mr0-m { margin-right: 0; }
.mr1-m { margin-right: .25rem; }
.mr2-m { margin-right: .5rem; }
.mr3-m { margin-right: 1rem; }
.mr4-m { margin-right: 2rem; }
.mr5-m { margin-right: 4rem; }
.mr6-m { margin-right: 8rem; }
.mr7-m { margin-right: 16rem; }
.mb0-m { margin-bottom: 0; }
.mb1-m { margin-bottom: .25rem; }
.mb2-m { margin-bottom: .5rem; }
.mb3-m { margin-bottom: 1rem; }
.mb4-m { margin-bottom: 2rem; }
.mb5-m { margin-bottom: 4rem; }
.mb6-m { margin-bottom: 8rem; }
.mb7-m { margin-bottom: 16rem; }
.mt0-m { margin-top: 0; }
.mt1-m { margin-top: .25rem; }
.mt2-m { margin-top: .5rem; }
.mt3-m { margin-top: 1rem; }
.mt4-m { margin-top: 2rem; }
.mt5-m { margin-top: 4rem; }
.mt6-m { margin-top: 8rem; }
.mt7-m { margin-top: 16rem; }
.mv0-m { margin-top: 0; margin-bottom: 0; }
.mv1-m { margin-top: .25rem; margin-bottom: .25rem; }
.mv2-m { margin-top: .5rem; margin-bottom: .5rem; }
.mv3-m { margin-top: 1rem; margin-bottom: 1rem; }
.mv4-m { margin-top: 2rem; margin-bottom: 2rem; }
.mv5-m { margin-top: 4rem; margin-bottom: 4rem; }
.mv6-m { margin-top: 8rem; margin-bottom: 8rem; }
.mv7-m { margin-top: 16rem; margin-bottom: 16rem; }
.mh0-m { margin-left: 0; margin-right: 0; }
.mh1-m { margin-left: .25rem; margin-right: .25rem; }
.mh2-m { margin-left: .5rem; margin-right: .5rem; }
.mh3-m { margin-left: 1rem; margin-right: 1rem; }
.mh4-m { margin-left: 2rem; margin-right: 2rem; }
.mh5-m { margin-left: 4rem; margin-right: 4rem; }
.mh6-m { margin-left: 8rem; margin-right: 8rem; }
.mh7-m { margin-left: 16rem; margin-right: 16rem; }
.na1-m { margin: -.25rem; }
.na2-m { margin: -.5rem; }
.na3-m { margin: -1rem; }
.na4-m { margin: -2rem; }
.na5-m { margin: -4rem; }
.na6-m { margin: -8rem; }
.na7-m { margin: -16rem; }
.nl1-m { margin-left: -.25rem; }
.nl2-m { margin-left: -.5rem; }
.nl3-m { margin-left: -1rem; }
.nl4-m { margin-left: -2rem; }
.nl5-m { margin-left: -4rem; }
.nl6-m { margin-left: -8rem; }
.nl7-m { margin-left: -16rem; }
.nr1-m { margin-right: -.25rem; }
.nr2-m { margin-right: -.5rem; }
.nr3-m { margin-right: -1rem; }
.nr4-m { margin-right: -2rem; }
.nr5-m { margin-right: -4rem; }
.nr6-m { margin-right: -8rem; }
.nr7-m { margin-right: -16rem; }
.nb1-m { margin-bottom: -.25rem; }
.nb2-m { margin-bottom: -.5rem; }
.nb3-m { margin-bottom: -1rem; }
.nb4-m { margin-bottom: -2rem; }
.nb5-m { margin-bottom: -4rem; }
.nb6-m { margin-bottom: -8rem; }
.nb7-m { margin-bottom: -16rem; }
.nt1-m { margin-top: -.25rem; }
.nt2-m { margin-top: -.5rem; }
.nt3-m { margin-top: -1rem; }
.nt4-m { margin-top: -2rem; }
.nt5-m { margin-top: -4rem; }
.nt6-m { margin-top: -8rem; }
.nt7-m { margin-top: -16rem; }
.strike-m { text-decoration: line-through; }
.underline-m { text-decoration: underline; }
.no-underline-m { text-decoration: none; }
.tl-m { text-align: left; }
.tr-m { text-align: right; }
.tc-m { text-align: center; }
.tj-m { text-align: justify; }
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
.f0-m { font-size: 6rem; }
.f1-m { font-size: 4rem; }
.f2-m { font-size: 3rem; }
.f3-m { font-size: 2rem; }
.f4-m { font-size: 1.5rem; }
.f5-m { font-size: 1rem; }
.f6-m { font-size: .875rem; }
.f7-m { font-size: .75rem; }
.measure-m { max-width: 30em; }
.measure-wide-m { max-width: 34em; }
.measure-narrow-m { max-width: 20em; }
.indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps-m { font-variant: small-caps; }
.truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-m { margin-right: auto; margin-left: auto; }
.clip-m { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
.ws-normal-m { white-space: normal; }
.ws-nowrap-m { white-space: nowrap; }
.ws-pre-m { white-space: pre; }
.v-base-m { vertical-align: baseline; }
.v-mid-m { vertical-align: middle; }
.v-top-m { vertical-align: top; }
.v-btm-m { vertical-align: bottom; }
}
@media screen and (min-width: 60em) {
.aspect-ratio-l { height: 0; position: relative; }
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
.aspect-ratio--4x3-l { padding-bottom: 75%; }
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
.aspect-ratio--4x6-l { padding-bottom: 150%; }
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
.aspect-ratio--5x8-l { padding-bottom: 160%; }
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
.aspect-ratio--5x7-l { padding-bottom: 140%; }
.aspect-ratio--1x1-l { padding-bottom: 100%; }
.aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.cover-l { background-size: cover !important; }
.contain-l { background-size: contain !important; }
.bg-center-l { background-repeat: no-repeat; background-position: center center; }
.bg-top-l { background-repeat: no-repeat; background-position: top center; }
.bg-right-l { background-repeat: no-repeat; background-position: center right; }
.bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
.bg-left-l { background-repeat: no-repeat; background-position: center left; }
.outline-l { outline: 1px solid; }
.outline-transparent-l { outline: 1px solid transparent; }
.outline-0-l { outline: 0; }
.ba-l { border-style: solid; border-width: 1px; }
.bt-l { border-top-style: solid; border-top-width: 1px; }
.br-l { border-right-style: solid; border-right-width: 1px; }
.bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-l { border-left-style: solid; border-left-width: 1px; }
.bn-l { border-style: none; border-width: 0; }
.br0-l { border-radius: 0; }
.br1-l { border-radius: 3px; }
.br2-l { border-radius: 5px; }
.br3-l { border-radius: 9px; }
.br4-l { border-radius: 17px; }
.br-100-l { border-radius: 100%; }
.br-pill-l { border-radius: 9999px; }
.br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.b--dotted-l { border-style: dotted; }
.b--dashed-l { border-style: dashed; }
.b--solid-l { border-style: solid; }
.b--none-l { border-style: none; }
.bw0-l { border-width: 0; }
.bw1-l { border-width: .125rem; }
.bw2-l { border-width: .25rem; }
.bw3-l { border-width: .5rem; }
.bw4-l { border-width: 1rem; }
.bw5-l { border-width: 2rem; }
.bt-0-l { border-top-width: 0; }
.br-0-l { border-right-width: 0; }
.bb-0-l { border-bottom-width: 0; }
.bl-0-l { border-left-width: 0; }
.shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-none-l { box-shadow: none; }
.top-0-l { top: 0; }
.left-0-l { left: 0; }
.right-0-l { right: 0; }
.bottom-0-l { bottom: 0; }
.top-1-l { top: 1rem; }
.left-1-l { left: 1rem; }
.right-1-l { right: 1rem; }
.bottom-1-l { bottom: 1rem; }
.top-2-l { top: 2rem; }
.left-2-l { left: 2rem; }
.right-2-l { right: 2rem; }
.bottom-2-l { bottom: 2rem; }
.top--1-l { top: -1rem; }
.right--1-l { right: -1rem; }
.bottom--1-l { bottom: -1rem; }
.left--1-l { left: -1rem; }
.top--2-l { top: -2rem; }
.right--2-l { right: -2rem; }
.bottom--2-l { bottom: -2rem; }
.left--2-l { left: -2rem; }
.absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; }
.cl-l { clear: left; }
.cr-l { clear: right; }
.cb-l { clear: both; }
.cn-l { clear: none; }
.dn-l { display: none; }
.di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
.dit-l { display: inline-table; }
.dt-l { display: table; }
.dtc-l { display: table-cell; }
.dt-row-l { display: table-row; }
.dt--fixed-l { table-layout: fixed; width: 100%; }
.flex-l { display: flex; }
.inline-flex-l { display: inline-flex; }
.flex-1-l { flex: 1; }
.flex-auto-l { flex: 1 1 auto; }
.flex-initial-l { flex: initial; }
.flex-none-l { flex: none; }
.flex-column-l { flex-direction: column; }
.flex-row-l { flex-direction: row; }
.flex-wrap-l { flex-wrap: wrap; }
.flex-nowrap-l { flex-wrap: nowrap; }
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
.flex-column-reverse-l { flex-direction: column-reverse; }
.flex-row-reverse-l { flex-direction: row-reverse; }
.items-start-l { align-items: flex-start; }
.items-end-l { align-items: flex-end; }
.items-center-l { align-items: center; }
.items-baseline-l { align-items: baseline; }
.items-stretch-l { align-items: stretch; }
.self-start-l { align-self: flex-start; }
.self-end-l { align-self: flex-end; }
.self-center-l { align-self: center; }
.self-baseline-l { align-self: baseline; }
.self-stretch-l { align-self: stretch; }
.justify-start-l { justify-content: flex-start; }
.justify-end-l { justify-content: flex-end; }
.justify-center-l { justify-content: center; }
.justify-between-l { justify-content: space-between; }
.justify-around-l { justify-content: space-around; }
.content-start-l { align-content: flex-start; }
.content-end-l { align-content: flex-end; }
.content-center-l { align-content: center; }
.content-between-l { align-content: space-between; }
.content-around-l { align-content: space-around; }
.content-stretch-l { align-content: stretch; }
.order-0-l { order: 0; }
.order-1-l { order: 1; }
.order-2-l { order: 2; }
.order-3-l { order: 3; }
.order-4-l { order: 4; }
.order-5-l { order: 5; }
.order-6-l { order: 6; }
.order-7-l { order: 7; }
.order-8-l { order: 8; }
.order-last-l { order: 99999; }
.flex-grow-0-l { flex-grow: 0; }
.flex-grow-1-l { flex-grow: 1; }
.flex-shrink-0-l { flex-shrink: 0; }
.flex-shrink-1-l { flex-shrink: 1; }
.fl-l { float: left; _display: inline; }
.fr-l { float: right; _display: inline; }
.fn-l { float: none; }
.i-l { font-style: italic; }
.fs-normal-l { font-style: normal; }
.b-l { font-weight: bold; }
.fw1-l { font-weight: 100; }
.fw2-l { font-weight: 200; }
.fw3-l { font-weight: 300; }
.fw4-l { font-weight: 400; }
.fw5-l { font-weight: 500; }
.fw6-l { font-weight: 600; }
.fw7-l { font-weight: 700; }
.fw8-l { font-weight: 800; }
.fw9-l { font-weight: 900; }
.h1-l { height: 1rem; }
.h2-l { height: 2rem; }
.h3-l { height: 4rem; }
.h4-l { height: 8rem; }
.h5-l { height: 16rem; }
.h-25-l { height: 25%; }
.h-50-l { height: 50%; }
.h-75-l { height: 75%; }
.h-100-l { height: 100%; }
.min-h-100-l { min-height: 100%; }
.vh-25-l { height: 25vh; }
.vh-50-l { height: 50vh; }
.vh-75-l { height: 75vh; }
.vh-100-l { height: 100vh; }
.min-vh-100-l { min-height: 100vh; }
.h-auto-l { height: auto; }
.h-inherit-l { height: inherit; }
.ls1-l { letter-spacing: -.05em; }
.ls2-l { letter-spacing: .1em; }
.ls3-l { letter-spacing: .25em; }
.lh-solid-l { line-height: 1; }
.lh-title-l { line-height: 1.25; }
.lh-copy-l { line-height: 1.5; }
.mw-100-l { max-width: 100%; }
.mw1-l { max-width: 1rem; }
.mw2-l { max-width: 2rem; }
.mw3-l { max-width: 4rem; }
.mw4-l { max-width: 8rem; }
.mw5-l { max-width: 16rem; }
.mw6-l { max-width: 32rem; }
.mw7-l { max-width: 48rem; }
.mw8-l { max-width: 56rem; }
.mw9-l { max-width: 64rem; }
.mw9-l { max-width: 80rem; }
.mw-none-l { max-width: none; }
.w1-l { width: 1rem; }
.w2-l { width: 2rem; }
.w3-l { width: 4rem; }
.w4-l { width: 8rem; }
.w5-l { width: 16rem; }
.w-10-l { width: 10%; }
.w-20-l { width: 20%; }
.w-25-l { width: 25%; }
.w-30-l { width: 30%; }
.w-40-l { width: 40%; }
.w-50-l { width: 50%; }
.w-60-l { width: 60%; }
.w-70-l { width: 70%; }
.w-75-l { width: 75%; }
.w-80-l { width: 80%; }
.w-90-l { width: 90%; }
.w-100-l { width: 100%; }
.w-third-l { width: calc( 100% / 3 ); }
.w-two-thirds-l { width: calc( 100% / 1.5 ); }
.w-auto-l { width: auto; }
.overflow-visible-l { overflow: visible; }
.overflow-hidden-l { overflow: hidden; }
.overflow-scroll-l { overflow: scroll; }
.overflow-auto-l { overflow: auto; }
.overflow-x-visible-l { overflow-x: visible; }
.overflow-x-hidden-l { overflow-x: hidden; }
.overflow-x-scroll-l { overflow-x: scroll; }
.overflow-x-auto-l { overflow-x: auto; }
.overflow-y-visible-l { overflow-y: visible; }
.overflow-y-hidden-l { overflow-y: hidden; }
.overflow-y-scroll-l { overflow-y: scroll; }
.overflow-y-auto-l { overflow-y: auto; }
.static-l { position: static; }
.relative-l { position: relative; }
.absolute-l { position: absolute; }
.fixed-l { position: fixed; }
.sticky-l { position: -webkit-sticky; position: sticky; }
.rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
.rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
.rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
.rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
.rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
.rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
.rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
.p0-l { padding: 0; }
.p1-l { padding: .25rem; }
.p2-l { padding: .5rem; }
.p3-l { padding: 1rem; }
.p4-l { padding: 2rem; }
.p5-l { padding: 4rem; }
.p6-l { padding: 8rem; }
.p7-l { padding: 16rem; }
.pl0-l { padding-left: 0; }
.pl1-l { padding-left: .25rem; }
.pl2-l { padding-left: .5rem; }
.pl3-l { padding-left: 1rem; }
.pl4-l { padding-left: 2rem; }
.pl5-l { padding-left: 4rem; }
.pl6-l { padding-left: 8rem; }
.pl7-l { padding-left: 16rem; }
.pr0-l { padding-right: 0; }
.pr1-l { padding-right: .25rem; }
.pr2-l { padding-right: .5rem; }
.pr3-l { padding-right: 1rem; }
.pr4-l { padding-right: 2rem; }
.pr5-l { padding-right: 4rem; }
.pr6-l { padding-right: 8rem; }
.pr7-l { padding-right: 16rem; }
.pb0-l { padding-bottom: 0; }
.pb1-l { padding-bottom: .25rem; }
.pb2-l { padding-bottom: .5rem; }
.pb3-l { padding-bottom: 1rem; }
.pb4-l { padding-bottom: 2rem; }
.pb5-l { padding-bottom: 4rem; }
.pb6-l { padding-bottom: 8rem; }
.pb7-l { padding-bottom: 16rem; }
.pt0-l { padding-top: 0; }
.pt1-l { padding-top: .25rem; }
.pt2-l { padding-top: .5rem; }
.pt3-l { padding-top: 1rem; }
.pt4-l { padding-top: 2rem; }
.pt5-l { padding-top: 4rem; }
.pt6-l { padding-top: 8rem; }
.pt7-l { padding-top: 16rem; }
.pv0-l { padding-top: 0; padding-bottom: 0; }
.pv1-l { padding-top: .25rem; padding-bottom: .25rem; }
.pv2-l { padding-top: .5rem; padding-bottom: .5rem; }
.pv3-l { padding-top: 1rem; padding-bottom: 1rem; }
.pv4-l { padding-top: 2rem; padding-bottom: 2rem; }
.pv5-l { padding-top: 4rem; padding-bottom: 4rem; }
.pv6-l { padding-top: 8rem; padding-bottom: 8rem; }
.pv7-l { padding-top: 16rem; padding-bottom: 16rem; }
.ph0-l { padding-left: 0; padding-right: 0; }
.ph1-l { padding-left: .25rem; padding-right: .25rem; }
.ph2-l { padding-left: .5rem; padding-right: .5rem; }
.ph3-l { padding-left: 1rem; padding-right: 1rem; }
.ph4-l { padding-left: 2rem; padding-right: 2rem; }
.ph5-l { padding-left: 4rem; padding-right: 4rem; }
.ph6-l { padding-left: 8rem; padding-right: 8rem; }
.ph7-l { padding-left: 16rem; padding-right: 16rem; }
.mt-auto-l { margin-top: auto; }
.mr-auto-l { margin-right: auto; }
.mb-auto-l { margin-bottom: auto; }
.ml-auto-l { margin-left: auto; }
.m0-l { margin: 0; }
.m1-l { margin: .25rem; }
.m2-l { margin: .5rem; }
.m3-l { margin: 1rem; }
.m4-l { margin: 2rem; }
.m5-l { margin: 4rem; }
.m6-l { margin: 8rem; }
.m7-l { margin: 16rem; }
.ml0-l { margin-left: 0; }
.ml1-l { margin-left: .25rem; }
.ml2-l { margin-left: .5rem; }
.ml3-l { margin-left: 1rem; }
.ml4-l { margin-left: 2rem; }
.ml5-l { margin-left: 4rem; }
.ml6-l { margin-left: 8rem; }
.ml7-l { margin-left: 16rem; }
.mr0-l { margin-right: 0; }
.mr1-l { margin-right: .25rem; }
.mr2-l { margin-right: .5rem; }
.mr3-l { margin-right: 1rem; }
.mr4-l { margin-right: 2rem; }
.mr5-l { margin-right: 4rem; }
.mr6-l { margin-right: 8rem; }
.mr7-l { margin-right: 16rem; }
.mb0-l { margin-bottom: 0; }
.mb1-l { margin-bottom: .25rem; }
.mb2-l { margin-bottom: .5rem; }
.mb3-l { margin-bottom: 1rem; }
.mb4-l { margin-bottom: 2rem; }
.mb5-l { margin-bottom: 4rem; }
.mb6-l { margin-bottom: 8rem; }
.mb7-l { margin-bottom: 16rem; }
.mt0-l { margin-top: 0; }
.mt1-l { margin-top: .25rem; }
.mt2-l { margin-top: .5rem; }
.mt3-l { margin-top: 1rem; }
.mt4-l { margin-top: 2rem; }
.mt5-l { margin-top: 4rem; }
.mt6-l { margin-top: 8rem; }
.mt7-l { margin-top: 16rem; }
.mv0-l { margin-top: 0; margin-bottom: 0; }
.mv1-l { margin-top: .25rem; margin-bottom: .25rem; }
.mv2-l { margin-top: .5rem; margin-bottom: .5rem; }
.mv3-l { margin-top: 1rem; margin-bottom: 1rem; }
.mv4-l { margin-top: 2rem; margin-bottom: 2rem; }
.mv5-l { margin-top: 4rem; margin-bottom: 4rem; }
.mv6-l { margin-top: 8rem; margin-bottom: 8rem; }
.mv7-l { margin-top: 16rem; margin-bottom: 16rem; }
.mh0-l { margin-left: 0; margin-right: 0; }
.mh1-l { margin-left: .25rem; margin-right: .25rem; }
.mh2-l { margin-left: .5rem; margin-right: .5rem; }
.mh3-l { margin-left: 1rem; margin-right: 1rem; }
.mh4-l { margin-left: 2rem; margin-right: 2rem; }
.mh5-l { margin-left: 4rem; margin-right: 4rem; }
.mh6-l { margin-left: 8rem; margin-right: 8rem; }
.mh7-l { margin-left: 16rem; margin-right: 16rem; }
.na1-l { margin: -.25rem; }
.na2-l { margin: -.5rem; }
.na3-l { margin: -1rem; }
.na4-l { margin: -2rem; }
.na5-l { margin: -4rem; }
.na6-l { margin: -8rem; }
.na7-l { margin: -16rem; }
.nl1-l { margin-left: -.25rem; }
.nl2-l { margin-left: -.5rem; }
.nl3-l { margin-left: -1rem; }
.nl4-l { margin-left: -2rem; }
.nl5-l { margin-left: -4rem; }
.nl6-l { margin-left: -8rem; }
.nl7-l { margin-left: -16rem; }
.nr1-l { margin-right: -.25rem; }
.nr2-l { margin-right: -.5rem; }
.nr3-l { margin-right: -1rem; }
.nr4-l { margin-right: -2rem; }
.nr5-l { margin-right: -4rem; }
.nr6-l { margin-right: -8rem; }
.nr7-l { margin-right: -16rem; }
.nb1-l { margin-bottom: -.25rem; }
.nb2-l { margin-bottom: -.5rem; }
.nb3-l { margin-bottom: -1rem; }
.nb4-l { margin-bottom: -2rem; }
.nb5-l { margin-bottom: -4rem; }
.nb6-l { margin-bottom: -8rem; }
.nb7-l { margin-bottom: -16rem; }
.nt1-l { margin-top: -.25rem; }
.nt2-l { margin-top: -.5rem; }
.nt3-l { margin-top: -1rem; }
.nt4-l { margin-top: -2rem; }
.nt5-l { margin-top: -4rem; }
.nt6-l { margin-top: -8rem; }
.nt7-l { margin-top: -16rem; }
.strike-l { text-decoration: line-through; }
.underline-l { text-decoration: underline; }
.no-underline-l { text-decoration: none; }
.tl-l { text-align: left; }
.tr-l { text-align: right; }
.tc-l { text-align: center; }
.tj-l { text-align: justify; }
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
.ttn-l { text-transform: none; }
.f0-l { font-size: 6rem; }
.f1-l { font-size: 4rem; }
.f2-l { font-size: 3rem; }
.f3-l { font-size: 2rem; }
.f4-l { font-size: 1.5rem; }
.f5-l { font-size: 1rem; }
.f6-l { font-size: .875rem; }
.f7-l { font-size: .75rem; }
.measure-l { max-width: 30em; }
.measure-wide-l { max-width: 34em; }
.measure-narrow-l { max-width: 20em; }
.indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps-l { font-variant: small-caps; }
.truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-l { margin-right: auto; margin-left: auto; }
.clip-l { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
.ws-normal-l { white-space: normal; }
.ws-nowrap-l { white-space: nowrap; }
.ws-pre-l { white-space: pre; }
.v-base-l { vertical-align: baseline; }
.v-mid-l { vertical-align: middle; }
.v-top-l { vertical-align: top; }
.v-btm-l { vertical-align: bottom; }
}
Reference in New Issue View Git Blame Copy Permalink