vtex-tachyons
Version:
A custom Tachyons for VTEX
1,177 lines (1,149 loc) • 198 kB
CSS
/* TACHYONS v0.0.1 | https://github.com/tachyons-css/tachyons */
/*
*
* ________ ______
* ___ __/_____ _________ /______ ______________________
* __ / _ __ / ___/_ __ _ / / / __ _ __ _ ___/
* _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
* /_/ __,_/ ___/ /_/ /_/___, / ____//_/ /_//____/
* /____/
*
* 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 v7.0.0 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: .35em .75em .625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
.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; }
.bg-rebel-pink { background-color: #f71963; }
.bg-heavy-rebel-pink { background-color: #dd1659; }
.bg-elite-purple { background-color: #8914cc; }
.bg-near-black { background-color: #3f3f40; }
.bg-dark-gray { background-color: #585959; }
.bg-mid-gray { background-color: #727273; }
.bg-gray { background-color: #979899; }
.bg-silver { background-color: #cacbcc; }
.bg-light-gray { background-color: #e3e4e6; }
.bg-light-silver { background-color: #f2f4f5; }
.bg-near-white { background-color: #f7f9fa; }
.bg-white { background-color: #fff; }
.bg-washed-blue { background-color: #edf4fa; }
.bg-light-blue { background-color: #cce8ff; }
.bg-blue { background-color: #368df7; }
.bg-heavy-blue { background-color: #2a6dbf; }
.bg-light-marine { background-color: #3d5980; }
.bg-marine { background-color: #25354d; }
.bg-serious-black { background-color: #142032; }
.bg-green { background-color: #8bc34a; }
.bg-washed-green { background-color: #eafce3; }
.bg-red { background-color: #ff4c4c; }
.bg-washed-red { background-color: #ffe6e6; }
.bg-yellow { background-color: #ffb100; }
.bg-washed-yellow { background-color: #fff6e0; }
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
.bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); }
.bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); }
.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); }
.bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); }
.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-black-025 { background-color: rgba( 0, 0, 0, .025 ); }
.bg-black-0125 { background-color: rgba( 0, 0, 0, .0125 ); }
.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); }
.bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); }
.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); }
.bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); }
.bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); }
.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); }
.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
.bg-white-05 { background-color: rgba( 255, 255, 255, .05 ); }
.bg-white-025 { background-color: rgba( 255, 255, 255, .025 ); }
.bg-white-0125 { background-color: rgba( 255, 255, 255, .0125 ); }
.bg-transparent { background-color: transparent; }
.bg-base { background-color: #fff; }
.bg-base--inverted { background-color: #3f3f40; }
.bg-action-primary { background-color: #134cd8; }
.bg-action-secondary { background-color: #eef3f7; }
.bg-emphasis { background-color: #f71963; }
.bg-disabled { background-color: #f2f4f5; }
.bg-success { background-color: #8bc34a; }
.bg-success--faded { background-color: #eafce3; }
.bg-danger { background-color: #ff4c4c; }
.bg-danger--faded { background-color: #ffe6e6; }
.bg-warning { background-color: #ffb100; }
.bg-warning--faded { background-color: #fff6e0; }
.bg-muted-1 { background-color: #727273; }
.bg-muted-2 { background-color: #979899; }
.bg-muted-3 { background-color: #cacbcc; }
.bg-muted-4 { background-color: #e3e4e6; }
.bg-muted-5 { background-color: #f2f4f5; }
.bg-transparent { background-color: transparent; }
.cover { background-size: cover !important; }
.contain { background-size: contain !important; }
.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; }
.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; }
.b--rebel-pink { border-color: #f71963; }
.b--heavy-rebel-pink { border-color: #dd1659; }
.b--elite-purple { border-color: #8914cc; }
.b--near-black { border-color: #3f3f40; }
.b--dark-gray { border-color: #585959; }
.b--mid-gray { border-color: #727273; }
.b--gray { border-color: #979899; }
.b--silver { border-color: #cacbcc; }
.b--light-gray { border-color: #e3e4e6; }
.b--light-silver { border-color: #f2f4f5; }
.b--near-white { border-color: #f7f9fa; }
.b--white { border-color: #fff; }
.b--washed-blue { border-color: #edf4fa; }
.b--light-blue { border-color: #cce8ff; }
.b--blue { border-color: #368df7; }
.b--heavy-blue { border-color: #2a6dbf; }
.b--light-marine { border-color: #3d5980; }
.b--marine { border-color: #25354d; }
.b--serious-black { border-color: #142032; }
.b--green { border-color: #8bc34a; }
.b--washed-green { border-color: #eafce3; }
.b--red { border-color: #ff4c4c; }
.b--washed-red { border-color: #ffe6e6; }
.b--yellow { border-color: #ffb100; }
.b--washed-yellow { border-color: #fff6e0; }
.b--black-90 { border-color: rgba( 0, 0, 0, .9 ); }
.b--black-80 { border-color: rgba( 0, 0, 0, .8 ); }
.b--black-70 { border-color: rgba( 0, 0, 0, .7 ); }
.b--black-60 { border-color: rgba( 0, 0, 0, .6 ); }
.b--black-50 { border-color: rgba( 0, 0, 0, .5 ); }
.b--black-40 { border-color: rgba( 0, 0, 0, .4 ); }
.b--black-30 { border-color: rgba( 0, 0, 0, .3 ); }
.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--white-90 { border-color: rgba( 255, 255, 255, .9 ); }
.b--white-80 { border-color: rgba( 255, 255, 255, .8 ); }
.b--white-70 { border-color: rgba( 255, 255, 255, .7 ); }
.b--white-60 { border-color: rgba( 255, 255, 255, .6 ); }
.b--white-50 { border-color: rgba( 255, 255, 255, .5 ); }
.b--white-40 { border-color: rgba( 255, 255, 255, .4 ); }
.b--white-30 { border-color: rgba( 255, 255, 255, .3 ); }
.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--transparent { border-color: transparent; }
.b--action-primary { border-color: #134cd8; }
.b--action-secondary { border-color: #eef3f7; }
.b--emphasis { border-color: #f71963; }
.b--disabled { border-color: #e3e4e6; }
.b--success { border-color: #79b03a; }
.b--success--faded { border-color: #eafce3; }
.b--danger { border-color: #ff4c4c; }
.b--danger--faded { border-color: #ffe6e6; }
.b--warning { border-color: #ffb100; }
.b--warning--faded { border-color: #fff6e0; }
.b--muted-1 { border-color: #727273; }
.b--muted-2 { border-color: #979899; }
.b--muted-3 { border-color: #cacbcc; }
.b--muted-4 { border-color: #e3e4e6; }
.b--muted-5 { border-color: #f2f4f5; }
.b--transparent { border-color: transparent; }
/*
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 = 20em
-ns = 40em
-m = 40em
-l = 64em
-xl = 80em
*/
.br0 { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.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; }
.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 = 20em
-ns = 40em
-m = 40em
-l = 64em
-xl = 80em
*/
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
.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 ); }
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; }
.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
An eight step powers of two scale ranging from 0 to 16rem.
Base:
p = padding
m = margin
Modifiers:
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
0 = 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
8 = 8th step in spacing scale
9 = 9th step in spacing scale
10 = 10th step in spacing scale
11 = 11st step in spacing scale
Media Query Extensions:
-s = 20em
-ns = 40em
-m = 40em
-l = 64em
-xl = 80em
*/
.pa0 { padding: 0; }
.ma0 { margin: 0; }
.na0 { margin: 0; }
.pl0 { padding-left: 0; }
.ml0 { margin-left: 0; }
.nl0 { margin-left: 0; }
.pr0 { padding-right: 0; }
.mr0 { margin-right: 0; }
.nr0 { margin-right: 0; }
.pt0 { padding-top: 0; }
.mt0 { margin-top: 0; }
.nt0 { margin-top: 0; }
.pb0 { padding-bottom: 0; }
.mb0 { margin-bottom: 0; }
.nb0 { margin-bottom: 0; }
.pv0 { padding-top: 0; padding-bottom: 0; }
.mv0 { margin-top: 0; margin-bottom: 0; }
.nv0 { margin-top: 0; margin-bottom: 0; }
.ph0 { padding-left: 0; padding-right: 0; }
.mh0 { margin-left: 0; margin-right: 0; }
.nh0 { margin-left: 0; margin-right: 0; }
.pa1 { padding: .125rem; }
.ma1 { margin: .125rem; }
.na1 { margin: -0.125rem; }
.pl1 { padding-left: .125rem; }
.ml1 { margin-left: .125rem; }
.nl1 { margin-left: -0.125rem; }
.pr1 { padding-right: .125rem; }
.mr1 { margin-right: .125rem; }
.nr1 { margin-right: -0.125rem; }
.pt1 { padding-top: .125rem; }
.mt1 { margin-top: .125rem; }
.nt1 { margin-top: -0.125rem; }
.pb1 { padding-bottom: .125rem; }
.mb1 { margin-bottom: .125rem; }
.nb1 { margin-bottom: -0.125rem; }
.pv1 { padding-top: .125rem; padding-bottom: .125rem; }
.mv1 { margin-top: .125rem; margin-bottom: .125rem; }
.nv1 { margin-top: -0.125rem; margin-bottom: -0.125rem; }
.ph1 { padding-left: .125rem; padding-right: .125rem; }
.mh1 { margin-left: .125rem; margin-right: .125rem; }
.nh1 { margin-left: -0.125rem; margin-right: -0.125rem; }
.pa2 { padding: .25rem; }
.ma2 { margin: .25rem; }
.na2 { margin: -0.25rem; }
.pl2 { padding-left: .25rem; }
.ml2 { margin-left: .25rem; }
.nl2 { margin-left: -0.25rem; }
.pr2 { padding-right: .25rem; }
.mr2 { margin-right: .25rem; }
.nr2 { margin-right: -0.25rem; }
.pt2 { padding-top: .25rem; }
.mt2 { margin-top: .25rem; }
.nt2 { margin-top: -0.25rem; }
.pb2 { padding-bottom: .25rem; }
.mb2 { margin-bottom: .25rem; }
.nb2 { margin-bottom: -0.25rem; }
.pv2 { padding-top: .25rem; padding-bottom: .25rem; }
.mv2 { margin-top: .25rem; margin-bottom: .25rem; }
.nv2 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.ph2 { padding-left: .25rem; padding-right: .25rem; }
.mh2 { margin-left: .25rem; margin-right: .25rem; }
.nh2 { margin-left: -0.25rem; margin-right: -0.25rem; }
.pa3 { padding: .5rem; }
.ma3 { margin: .5rem; }
.na3 { margin: -0.5rem; }
.pl3 { padding-left: .5rem; }
.ml3 { margin-left: .5rem; }
.nl3 { margin-left: -0.5rem; }
.pr3 { padding-right: .5rem; }
.mr3 { margin-right: .5rem; }
.nr3 { margin-right: -0.5rem; }
.pt3 { padding-top: .5rem; }
.mt3 { margin-top: .5rem; }
.nt3 { margin-top: -0.5rem; }
.pb3 { padding-bottom: .5rem; }
.mb3 { margin-bottom: .5rem; }
.nb3 { margin-bottom: -0.5rem; }
.pv3 { padding-top: .5rem; padding-bottom: .5rem; }
.mv3 { margin-top: .5rem; margin-bottom: .5rem; }
.nv3 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.ph3 { padding-left: .5rem; padding-right: .5rem; }
.mh3 { margin-left: .5rem; margin-right: .5rem; }
.nh3 { margin-left: -0.5rem; margin-right: -0.5rem; }
.pa4 { padding: .75rem; }
.ma4 { margin: .75rem; }
.na4 { margin: -0.75rem; }
.pl4 { padding-left: .75rem; }
.ml4 { margin-left: .75rem; }
.nl4 { margin-left: -0.75rem; }
.pr4 { padding-right: .75rem; }
.mr4 { margin-right: .75rem; }
.nr4 { margin-right: -0.75rem; }
.pt4 { padding-top: .75rem; }
.mt4 { margin-top: .75rem; }
.nt4 { margin-top: -0.75rem; }
.pb4 { padding-bottom: .75rem; }
.mb4 { margin-bottom: .75rem; }
.nb4 { margin-bottom: -0.75rem; }
.pv4 { padding-top: .75rem; padding-bottom: .75rem; }
.mv4 { margin-top: .75rem; margin-bottom: .75rem; }
.nv4 { margin-top: -0.75rem; margin-bottom: -0.75rem; }
.ph4 { padding-left: .75rem; padding-right: .75rem; }
.mh4 { margin-left: .75rem; margin-right: .75rem; }
.nh4 { margin-left: -0.75rem; margin-right: -0.75rem; }
.pa5 { padding: 1rem; }
.ma5 { margin: 1rem; }
.na5 { margin: -1rem; }
.pl5 { padding-left: 1rem; }
.ml5 { margin-left: 1rem; }
.nl5 { margin-left: -1rem; }
.pr5 { padding-right: 1rem; }
.mr5 { margin-right: 1rem; }
.nr5 { margin-right: -1rem; }
.pt5 { padding-top: 1rem; }
.mt5 { margin-top: 1rem; }
.nt5 { margin-top: -1rem; }
.pb5 { padding-bottom: 1rem; }
.mb5 { margin-bottom: 1rem; }
.nb5 { margin-bottom: -1rem; }
.pv5 { padding-top: 1rem; padding-bottom: 1rem; }
.mv5 { margin-top: 1rem; margin-bottom: 1rem; }
.nv5 { margin-top: -1rem; margin-bottom: -1rem; }
.ph5 { padding-left: 1rem; padding-right: 1rem; }
.mh5 { margin-left: 1rem; margin-right: 1rem; }
.nh5 { margin-left: -1rem; margin-right: -1rem; }
.pa6 { padding: 1.5rem; }
.ma6 { margin: 1.5rem; }
.na6 { margin: -1.5rem; }
.pl6 { padding-left: 1.5rem; }
.ml6 { margin-left: 1.5rem; }
.nl6 { margin-left: -1.5rem; }
.pr6 { padding-right: 1.5rem; }
.mr6 { margin-right: 1.5rem; }
.nr6 { margin-right: -1.5rem; }
.pt6 { padding-top: 1.5rem; }
.mt6 { margin-top: 1.5rem; }
.nt6 { margin-top: -1.5rem; }
.pb6 { padding-bottom: 1.5rem; }
.mb6 { margin-bottom: 1.5rem; }
.nb6 { margin-bottom: -1.5rem; }
.pv6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mv6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.nv6 { margin-top: -1.5rem; margin-bottom: -1.5rem; }
.ph6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.mh6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.nh6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.pa7 { padding: 2rem; }
.ma7 { margin: 2rem; }
.na7 { margin: -2rem; }
.pl7 { padding-left: 2rem; }
.ml7 { margin-left: 2rem; }
.nl7 { margin-left: -2rem; }
.pr7 { padding-right: 2rem; }
.mr7 { margin-right: 2rem; }
.nr7 { margin-right: -2rem; }
.pt7 { padding-top: 2rem; }
.mt7 { margin-top: 2rem; }
.nt7 { margin-top: -2rem; }
.pb7 { padding-bottom: 2rem; }
.mb7 { margin-bottom: 2rem; }
.nb7 { margin-bottom: -2rem; }
.pv7 { padding-top: 2rem; padding-bottom: 2rem; }
.mv7 { margin-top: 2rem; margin-bottom: 2rem; }
.nv7 { margin-top: -2rem; margin-bottom: -2rem; }
.ph7 { padding-left: 2rem; padding-right: 2rem; }
.mh7 { margin-left: 2rem; margin-right: 2rem; }
.nh7 { margin-left: -2rem; margin-right: -2rem; }
.pa8 { padding: 3rem; }
.ma8 { margin: 3rem; }
.na8 { margin: -3rem; }
.pl8 { padding-left: 3rem; }
.ml8 { margin-left: 3rem; }
.nl8 { margin-left: -3rem; }
.pr8 { padding-right: 3rem; }
.mr8 { margin-right: 3rem; }
.nr8 { margin-right: -3rem; }
.pt8 { padding-top: 3rem; }
.mt8 { margin-top: 3rem; }
.nt8 { margin-top: -3rem; }
.pb8 { padding-bottom: 3rem; }
.mb8 { margin-bottom: 3rem; }
.nb8 { margin-bottom: -3rem; }
.pv8 { padding-top: 3rem; padding-bottom: 3rem; }
.mv8 { margin-top: 3rem; margin-bottom: 3rem; }
.nv8 { margin-top: -3rem; margin-bottom: -3rem; }
.ph8 { padding-left: 3rem; padding-right: 3rem; }
.mh8 { margin-left: 3rem; margin-right: 3rem; }
.nh8 { margin-left: -3rem; margin-right: -3rem; }
.pa9 { padding: 4rem; }
.ma9 { margin: 4rem; }
.na9 { margin: -4rem; }
.pl9 { padding-left: 4rem; }
.ml9 { margin-left: 4rem; }
.nl9 { margin-left: -4rem; }
.pr9 { padding-right: 4rem; }
.mr9 { margin-right: 4rem; }
.nr9 { margin-right: -4rem; }
.pt9 { padding-top: 4rem; }
.mt9 { margin-top: 4rem; }
.nt9 { margin-top: -4rem; }
.pb9 { padding-bottom: 4rem; }
.mb9 { margin-bottom: 4rem; }
.nb9 { margin-bottom: -4rem; }
.pv9 { padding-top: 4rem; padding-bottom: 4rem; }
.mv9 { margin-top: 4rem; margin-bottom: 4rem; }
.nv9 { margin-top: -4rem; margin-bottom: -4rem; }
.ph9 { padding-left: 4rem; padding-right: 4rem; }
.mh9 { margin-left: 4rem; margin-right: 4rem; }
.nh9 { margin-left: -4rem; margin-right: -4rem; }
.pa10 { padding: 8rem; }
.ma10 { margin: 8rem; }
.na10 { margin: -8rem; }
.pl10 { padding-left: 8rem; }
.ml10 { margin-left: 8rem; }
.nl10 { margin-left: -8rem; }
.pr10 { padding-right: 8rem; }
.mr10 { margin-right: 8rem; }
.nr10 { margin-right: -8rem; }
.pt10 { padding-top: 8rem; }
.mt10 { margin-top: 8rem; }
.nt10 { margin-top: -8rem; }
.pb10 { padding-bottom: 8rem; }
.mb10 { margin-bottom: 8rem; }
.nb10 { margin-bottom: -8rem; }
.pv10 { padding-top: 8rem; padding-bottom: 8rem; }
.mv10 { margin-top: 8rem; margin-bottom: 8rem; }
.nv10 { margin-top: -8rem; margin-bottom: -8rem; }
.ph10 { padding-left: 8rem; padding-right: 8rem; }
.mh10 { margin-left: 8rem; margin-right: 8rem; }
.nh10 { margin-left: -8rem; margin-right: -8rem; }
.pa11 { padding: 16rem; }
.ma11 { margin: 16rem; }
.na11 { margin: -16rem; }
.pl11 { padding-left: 16rem; }
.ml11 { margin-left: 16rem; }
.nl11 { margin-left: -16rem; }
.pr11 { padding-right: 16rem; }
.mr11 { margin-right: 16rem; }
.nr11 { margin-right: -16rem; }
.pt11 { padding-top: 16rem; }
.mt11 { margin-top: 16rem; }
.nt11 { margin-top: -16rem; }
.pb11 { padding-bottom: 16rem; }
.mb11 { margin-bottom: 16rem; }
.nb11 { margin-bottom: -16rem; }
.pv11 { padding-top: 16rem; padding-bottom: 16rem; }
.mv11 { margin-top: 16rem; margin-bottom: 16rem; }
.nv11 { margin-top: -16rem; margin-bottom: -16rem; }
.ph11 { padding-left: 16rem; padding-right: 16rem; }
.mh11 { margin-left: 16rem; margin-right: 16rem; }
.nh11 { margin-left: -16rem; margin-right: -16rem; }
.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; }
.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; }
.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; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
.dt--fixed { table-layout: fixed; width: 100%; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0; }
.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; }
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
body, button, input, optgroup, select, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }
.sans-serif { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; }
code, .code { font-family: Consolas, monaco, monospace; }
.i { font-style: italic; }
.fs-normal { font-style: normal; }
.input-reset { -webkit-appearance: none; -moz-appearance: none; }
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
.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; }
.list { list-style-type: none; }
/*
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 = 20em
-ns = 40em
-m = 40em
-l = 64em
-xl = 80em
*/
.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
.h-auto { height: auto; }
.h-inherit { height: inherit; }
/*
SIZES
Base:
h = height
min-h = min-height
Modifiers
-small = 2rem
-regular = 2.5rem
-large = 3rem
Media Query Extensions:
-s = 20em
-ns = 40em
-m = 40em
-l = 64em
-xl = 80em
*/
.h-small { height: 2rem; box-sizing: border-box; }
.min-h-small { min-height: 2rem; box-sizing: border-box; }
.h-regular { height: 2.5rem; box-sizing: border-box; }
.min-h-regular { min-height: 2.5rem; box-sizing: border-box; }
.h-large { height: 3rem; box-sizing: border-box; }
.min-h-large { min-height: 3rem; box-sizing: border-box; }
.rebel-pink { color: #f71963; }
.heavy-rebel-pink { color: #dd1659; }
.elite-purple { color: #8914cc; }
.near-black { color: #3f3f40; }
.dark-gray { color: #585959; }
.mid-gray { color: #727273; }
.gray { color: #979899; }
.silver { color: #cacbcc; }
.light-gray { color: #e3e4e6; }
.light-silver { color: #f2f4f5; }
.near-white { color: #f7f9fa; }
.white { color: #fff; }
.washed-blue { color: #edf4fa; }
.light-blue { color: #cce8ff; }
.blue { color: #368df7; }
.heavy-blue { color: #2a6dbf; }
.light-marine { color: #3d5980; }
.marine { color: #25354d; }
.serious-black { color: #142032; }
.green { color: #8bc34a; }
.washed-green { color: #eafce3; }
.red { color: #ff4c4c; }
.washed-red { color: #ffe6e6; }
.yellow { color: #ffb100; }
.washed-yellow { color: #fff6e0; }
.black-90 { color: rgba( 0, 0, 0, .9 ); }
.black-80 { color: rgba( 0, 0, 0, .8 ); }
.black-70 { color: rgba( 0, 0, 0, .7 ); }
.black-60 { color: rgba( 0, 0, 0, .6 ); }
.black-50 { color: rgba( 0, 0, 0, .5 ); }
.black-40 { color: rgba( 0, 0, 0, .4 ); }
.black-30 { color: rgba( 0, 0, 0, .3 ); }
.black-20 { color: rgba( 0, 0, 0, .2 ); }
.black-10 { color: rgba( 0, 0, 0, .1 ); }
.black-05 { color: rgba( 0, 0, 0, .05 ); }
.black-025 { color: rgba( 0, 0, 0, .025 ); }
.black-0125 { color: rgba( 0, 0, 0, .0125 ); }
.white-90 { color: rgba( 255, 255, 255, .9 ); }
.white-80 { color: rgba( 255, 255, 255, .8 ); }
.white-70 { color: rgba( 255, 255, 255, .7 ); }
.white-60 { color: rgba( 255, 255, 255, .6 ); }
.white-50 { color: rgba( 255, 255, 255, .5 ); }
.white-40 { color: rgba( 255, 255, 255, .4 ); }
.white-30 { color: rgba( 255, 255, 255, .3 ); }
.white-20 { color: rgba( 255, 255, 255, .2 ); }
.white-10 { color: rgba( 255, 255, 255, .1 ); }
.white-05 { color: rgba( 255, 255, 255, .05 ); }
.white-025 { color: rgba( 255, 255, 255, .025 ); }
.white-0125 { color: rgba( 255, 255, 255, .0125 ); }
.c-action-primary { color: #134cd8; }
.c-action-secondary { color: #eef3f7; }
.c-link { color: #134cd8; }
.c-emphasis { color: #f71963; }
.c-disabled { color: #979899; }
.c-success { color: #79b03a; }
.c-success--faded { color: #eafce3; }
.c-danger { color: #ff4c4c; }
.c-danger--faded { color: #ffe6e6; }
.c-warning { color: #e19d00; }
.c-warning--faded { color: #fff6e0; }
.c-muted-1 { color: #727273; }
.c-muted-2 { color: #979899; }
.c-muted-3 { color: #cacbcc; }
.c-muted-4 { color: #e3e4e6; }
.c-muted-5 { color: #f2f4f5; }
.c-on-base { color: #3f3f40; }
.c-on-base--inverted { color: #fff; }
.c-on-action-primary { color: #fff; }
.c-on-action-secondary { color: #134cd8; }
.c-on-emphasis { color: #fff; }
.c-on-disabled { color: #979899; }
.c-on-success { color: #fff; }
.c-on-success--faded { color: #3f3f40; }
.c-on-danger { color: #fff; }
.c-on-danger--faded { color: #3f3f40; }
.c-on-warning { color: #fff; }
.c-on-warning--faded { color: #1a1a1a; }
.c-on-muted-1 { color: #fff; }
.c-on-muted-2 { color: #fff; }
.c-on-muted-3 { color: #3f3f40; }
.c-on-muted-4 { color: #3f3f40; }
.c-on-muted-5 { color: #3f3f40; }
.hover-rebel-pink:focus { color: #f71963; }
.hover-rebel-pink:hover { color: #f71963; }
.hover-heavy-rebel-pink:focus { color: #dd1659; }
.hover-heavy-rebel-pink:hover { color: #dd1659; }
.hover-elite-purple:focus { color: #8914cc; }
.hover-elite-purple:hover { color: #8914cc; }
.hover-near-black:focus { color: #3f3f40; }
.hover-near-black:hover { color: #3f3f40; }
.hover-dark-gray:focus { color: #585959; }
.hover-dark-gray:hover { color: #585959; }
.hover-mid-gray:focus { color: #727273; }
.hover-mid-gray:hover { color: #727273; }
.hover-gray:focus { color: #979899; }
.hover-gray:hover { color: #979899; }
.hover-silver:focus { color: #cacbcc; }
.hover-silver:hover { color: #cacbcc; }
.hover-light-gray:focus { color: #e3e4e6; }
.hover-light-gray:hover { color: #e3e4e6; }
.hover-light-silver:focus { color: #f2f4f5; }
.hover-light-silver:hover { color: #f2f4f5; }
.hover-near-white:focus { color: #f7f9fa; }
.hover-near-white:hover { color: #f7f9fa; }
.hover-white:focus { color: #fff; }
.hover-white:hover { color: #fff; }
.hover-washed-blue:focus { color: #edf4fa; }
.hover-washed-blue:hover { color: #edf4fa; }
.hover-light-blue:focus { color: #cce8ff; }
.hover-light-blue:hover { color: #cce8ff; }
.hover-blue:focus { color: #368df7; }
.hover-blue:hover { color: #368df7; }
.hover-heavy-blue:focus { color: #2a6dbf; }
.hover-heavy-blue:hover { color: #2a6dbf; }
.hover-light-marine:focus { color: #3d5980; }
.hover-light-marine:hover { color: #3d5980; }
.hover-marine:focus { color: #25354d; }
.hover-marine:hover { color: #25354d; }
.hover-serious-black:focus { color: #142032; }
.hover-serious-black:hover { color: #142032; }
.hover-green:focus { color: #8bc34a; }
.hover-green:hover { color: #8bc34a; }
.hover-washed-green:focus { color: #eafce3; }
.hover-washed-green:hover { color: #eafce3; }
.hover-red:focus { color: #ff4c4c; }
.hover-red:hover { color: #ff4c4c; }
.hover-washed-red:focus { color: #ffe6e6; }
.hover-washed-red:hover { color: #ffe6e6; }
.hover-yellow:focus { color: #ffb100; }
.hover-yellow:hover { color: #ffb100; }
.hover-washed-yellow:focus { color: #fff6e0; }
.hover-washed-yellow:hover { color: #fff6e0; }
.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); }
.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); }
.hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); }
.hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); }
.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); }
.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); }
.hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); }
.hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); }
.hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); }
.hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); }
.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); }
.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); }
.hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); }
.hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); }
.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); }
.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); }
.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); }
.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); }
.hover-black-05:focus { color: rgba( 0, 0, 0, .05 ); }
.hover-black-05:hover { color: rgba( 0, 0, 0, .05 ); }
.hover-black-025:focus { color: rgba( 0, 0, 0, .025 ); }
.hover-black-025:hover { color: rgba( 0, 0, 0, .025 ); }
.hover-black-0125:focus { color: rgba( 0, 0, 0, .0125 ); }
.hover-black-0125:hover { color: rgba( 0, 0, 0, .0125 ); }
.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); }
.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); }
.hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); }
.hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); }
.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); }
.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); }
.hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); }
.hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); }
.hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); }
.hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); }
.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); }
.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); }
.hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); }
.hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); }
.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); }
.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
.hover-white-05:focus { color: rgba( 255, 255, 255, .05 ); }
.hover-white-05:hover { color: rgba( 255, 255, 255, .05 ); }
.hover-white-025:focus { color: rgba( 255, 255, 255, .025 ); }
.hover-white-025:hover { color: rgba( 255, 255, 255, .025 ); }
.hover-white-0125:focus { color: rgba( 255, 255, 255, .0125 ); }
.hover-white-0125:hover { color: rgba( 255, 255, 255, .0125 ); }
.hover-bg-rebel-pink:focus { background-color: #f71963; }
.hover-bg-rebel-pink:hover { background-color: #f71963; }
.hover-b--rebel-pink:focus { border-color: #f71963; }
.hover-b--rebel-pink:hover { border-color: #f71963; }
.hover-bg-heavy-rebel-pink:focus { background-color: #dd1659; }
.hover-bg-heavy-rebel-pink:hover { background-color: #dd1659; }
.hover-b--heavy-rebel-pink:focus { border-color: #dd1659; }
.hover-b--heavy-rebel-pink:hover { border-color: #dd1659; }
.hover-bg-elite-purple:focus { background-color: #8914cc; }
.hover-bg-elite-purple:hover { background-color: #8914cc; }
.hover-b--elite-purple:focus { border-color: #8914cc; }
.hover-b--elite-purple:hover { border-color: #8914cc; }
.hover-bg-near-black:focus { background-color: #3f3f40; }
.hover-bg-near-black:hover { background-color: #3f3f40; }
.hover-b--near-black:focus { border-color: #3f3f40; }
.hover-b--near-black:hover { border-color: #3f3f40; }
.hover-bg-dark-gray:focus { background-color: #585959; }
.hover-bg-dark-gray:hover { background-color: #585959; }
.hover-b--dark-gray:focus { border-color: #585959; }
.hover-b--dark-gray:hover { border-color: #585959; }
.hover-bg-mid-gray:focus { background-color: #727273; }
.hover-bg-mid-gray:hover { background-color: #727273; }
.hover-b--mid-gray:focus { border-color: #727273; }
.hover-b--mid-gray:hover { border-color: #727273; }
.hover-bg-gray:focus { background-color: #979899; }
.hover-bg-gray:hover { background-color: #979899; }
.hover-b--gray:focus { border-color: #979899; }
.hover-b--gray:hover { border-color: #979899; }
.hover-bg-silver:focus { background-color: #cacbcc; }
.hover-bg-silver:hover { background-color: #cacbcc; }
.hover-b--silver:focus { border-color: #cacbcc; }
.hover-b--silver:hover { border-color: #cacbcc; }
.hover-bg-light-gray:focus { background-color: #e3e4e6; }
.hover-bg-light-gray:hover { background-color: #e3e4e6; }
.hover-b--light-gray:focus { border-color: #e3e4e6; }
.hover-b--light-gray:hover { border-color: #e3e4e6; }
.hover-bg-light-silver:focus { background-color: #f2f4f5; }
.hover-bg-light-silver:hover { background-color: #f2f4f5; }
.hover-b--light-silver:focus { border-color: #f2f4f5; }
.hover-b--light-silver:hover { border-color: #f2f4f5; }
.hover-bg-near-white:focus { background-color: #f7f9fa; }
.hover-bg-near-white:hover { background-color: #f7f9fa; }
.hover-b--near-white:focus { border-color: #f7f9fa; }
.hover-b--near-white:hover { border-color: #f7f9fa; }
.hover-bg-white:focus { background-color: #fff; }
.hover-bg-white:hover { background-color: #fff; }
.hover-b--white:focus { border-color: #fff; }
.hover-b--white:hover { border-color: #fff; }
.hover-bg-washed-blue:focus { background-color: #edf4fa; }
.hover-bg-washed-blue:hover { background-color: #edf4fa; }
.hover-b--washed-blue:focus { border-color: #edf4fa; }
.hover-b--washed-blue:hover { border-color: #edf4fa; }
.hover-bg-light-blue:focus { background-color: #cce8ff; }
.hover-bg-light-blue:hover { background-color: #cce8ff; }
.hover-b--light-blue:focus { border-color: #cce8ff; }
.hover-b--light-blue:hover { border-color: #cce8ff; }
.hover-bg-blue:focus { background-color: #368df7; }
.hover-bg-blue:hover { background-color: #368df7; }
.hover-b--blue:focus { border-color: #368df7; }
.hover-b--blue:hover { border-color: #368df7; }
.hover-bg-heavy-blue:focus { background-color: #2a6dbf; }
.hover-bg-heavy-blue:hover { background-color: #2a6dbf; }
.hover-b--heavy-blue:focus { border-color: #2a6dbf; }
.hover-b--heavy-blue:hover { border-color: #2a6dbf; }
.hover-bg-light-marine:focus { background-color: #3d5980; }
.hover-bg-light-marine:hover { background-color: #3d5980; }
.hover-b--light-marine:focus { border-color: #3d5980; }
.hover-b--light-marine:hover { border-color: #3d5980; }
.hover-bg-marine:focus { background-color: #25354d; }
.hover-bg-marine:hover { background-color: #25354d; }
.hover-b--marine:focus { border-color: #25354d; }
.hover-b--marine:hover { border-color: #25354d; }
.hover-bg-serious-black:focus { background-color: #142032; }
.hover-bg-serious-black:hover { background-color: #142032; }
.hover-b--serious-black:focus { border-color: #142032; }
.hover-b--serious-black:hover { border-color: #142032; }
.hover-bg-green:focus { background-color: #8bc34a; }
.hover-bg-green:hover { background-color: #8bc34a; }
.hover-b--green:focus { border-color: #8bc34a; }
.hover-b--green:hover { border-color: #8bc34a; }
.hover-bg-washed-green:focus { background-color: #eafce3; }
.hover-bg-washed-green:hover { background-color: #eafce3; }
.hover-b--washed-green:focus { border-color: #eafce3; }
.hover-b--washed-green:hover { border-color: #eafce3; }
.hover-bg-red:focus { background-color: #ff4c4c; }
.hover-bg-red:hover { background-color: #ff4c4c; }
.hover-b--red:focus { border-color: #ff4c4c; }
.hover-b--red:hover { border-color: #ff4c4c; }
.hover-bg-washed-red:focus { background-color: #ffe6e6; }
.hover-bg-washed-red:hover { background-color: #ffe6e6; }
.hover-b--washed-red:focus { border-color: #ffe6e6; }
.hover-b--washed-red:hover { border-color: #ffe6e6; }
.hover-bg-yellow:focus { background-color: #ffb100; }
.hover-bg-yellow:hover { background-color: #ffb100; }
.hover-b--yellow:focus { border-color: #ffb100; }
.hover-b--yellow:hover { border-color: #ffb100; }
.hover-bg-washed-yellow:focus { background-color: #fff6e0; }
.hover-bg-washed-yellow:hover { background-color: #fff6e0; }
.hover-b--washed-yellow:focus { border-color: #fff6e0; }
.hover-b--washed-yellow:hover { border-color: #fff6e0; }
.hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); }
.hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); }
.hover-b--black-90:focus { border-color: rgba( 0, 0, 0, .9 ); }
.hover-b--black-90:hover { border-color: rgba( 0, 0, 0, .9 ); }
.hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); }
.hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); }
.hover-b--black-80:focus { border-color: rgba( 0, 0, 0, .8 ); }
.hover-b--black-80:hover { border-color: rgba( 0, 0, 0, .8 ); }
.hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); }
.hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); }
.hover-b--black-70:focus { border-color: rgba( 0, 0, 0, .7 ); }
.hover-b--black-70:hover { border-color: rgba( 0, 0, 0, .7 ); }
.hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); }
.hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); }
.hover-b--black-60:focus { border-color: rgba( 0, 0, 0, .6 ); }
.hover-b--black-60:hover { border-color: rgba( 0, 0, 0, .6 ); }
.hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); }
.hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); }
.hover-b--black-50:focus { border-color: rgba( 0, 0, 0, .5 ); }
.hover-b--black-50:hover { border-color: rgba( 0, 0, 0, .5 ); }
.hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); }
.hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); }
.hover-b--black-40:focus { border-color: rgba( 0, 0, 0, .4 ); }
.hover-b--black-40:hover { border-color: rgba( 0, 0, 0, .4 ); }
.hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); }
.hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); }
.hover-b--black-30:focus { border-color: rgba( 0, 0, 0, .3 ); }
.hover-b--black-30:hover { border-color: rgba( 0, 0, 0, .3 ); }
.hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); }
.hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); }
.hover-b--black-20:focus { border-color: rgba( 0, 0, 0, .2 ); }
.hover-b--black-20:hover { border-color: rgba( 0, 0, 0, .2 ); }
.hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); }
.hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); }
.hover-b--black-10:focus { border-color: rgba( 0, 0, 0, .1 ); }
.hover-b--black-10:hover { border-color: rgba( 0, 0, 0, .1 ); }
.hover-bg-black-05:focus { background-color: rgba( 0, 0, 0, .05 ); }
.hover-bg-black-05:hover { background-color: rgba( 0, 0, 0, .05 ); }
.hover-b--black-05:focus { border-color: rgba( 0, 0, 0, .05 ); }
.hover-b--black-05:hover { border-color: rgba( 0, 0, 0, .05 ); }
.hover-bg-black-025:focus { background-color: rgba( 0, 0, 0, .025 ); }
.hover-bg-black-025:hover { background-color: rgba( 0, 0, 0, .025 ); }
.hover-b--black-025:focus { border-color: rgba( 0, 0, 0, .025 ); }
.hover-b--black-025:hover { border-color: rgba( 0, 0, 0, .025 ); }
.hover-bg-black-0125:focus { background-color: rgba( 0, 0, 0, .0125 ); }
.hover-bg-black-0125:hover { background-color: rgba( 0, 0, 0, .0125 ); }
.hover-b--black-0125:focus { border-color: rgba( 0, 0, 0, .0125 ); }
.hover-b--black-0125:hover { border-color: rgba( 0, 0, 0, .0125 ); }
.hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); }
.hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); }
.hover-b--white-90:focus { border-color: rgba( 255, 255, 255, .9 ); }
.hover-b--white-90:hover { border-color: rgba( 255, 255, 255, .9 ); }
.hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); }
.hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); }
.hover-b--white-80:focus { border-color: rgba( 255, 255, 255, .8 ); }
.hover-b--white-80:hover { border-color: rgba( 255, 255, 255, .8 ); }
.hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); }
.hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); }
.hover-b--white-70:focus { border-color: rgba( 255, 255, 255, .7 ); }
.hover-b--white-70:hover { border-color: rgba( 255, 255, 255, .7 ); }
.hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); }
.hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); }
.hover-b--white-60:focus { border-color: rgba( 255, 255, 255, .6 ); }
.hover-b--white-60:hover { border-color: rgba( 255, 255, 255, .6 ); }
.hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); }
.hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); }
.hover-b--white-50:focus { border-color: rgba( 255, 255, 255, .5 ); }
.hover-b--white-50:hover { border-color: rgba( 255, 255, 255, .5 ); }
.hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); }
.hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); }
.hover-b--white-40:focus { border-color: rgba( 255, 255, 255, .4 ); }
.hover-b--white-40:hover { border-color: rgba( 255, 255, 255, .4 ); }
.hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); }
.hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); }
.hover-b--white-30:focus { border-color: rgba( 255, 255, 255, .3 ); }
.hover-b--white-30:hover { border-color: rgba( 255, 255, 255, .3 ); }
.hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); }
.hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); }
.hover-b--white-20:focus { border-color: rgba( 255, 255, 255, .2 ); }
.hover-b--white-20:hover { border-color: rgba( 255, 255, 255, .2 ); }
.hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); }
.hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); }
.hover-b--white-10:focus { border-color: rgba( 255, 255, 255, .1 ); }
.hover-b--white-10:hover { border-color: rgba( 255, 255, 255, .1 ); }
.hover-bg-white-05:focus { background-color: rgba( 255, 255, 255, .05 ); }
.hover-bg-white-05:hover { background-color: rgba( 255, 255, 255, .05 ); }
.hover-b--white-05:focus { border-color: rgba( 255, 255, 255, .05 ); }
.hover-b--white-05:hover { border-color: rgba( 255, 255, 255, .05 ); }
.hover-bg-white-025:focus { background-color: rgba( 255, 255, 255, .025 ); }
.hover-bg-white-025:hover { background-color: rgba( 255, 255, 255, .025 ); }
.hover-b--white-025:focus { border-color: rgba( 255, 255, 255, .025 ); }
.hover-b--white-025:hover { border-color: rgba( 255, 255, 255, .025 ); }
.hover-bg-white-0125:focus { background-color: rgba( 255, 255, 255, .0125 ); }
.hover-bg-white-0125:hover { background-color: rgba( 255, 255, 255, .0125 ); }
.hover-b--white-0125:focus { border-color: rgba( 255, 255, 255, .0125 ); }
.hover-b--white-0125:hover { border-color: rgba( 255, 255, 255, .0125 ); }
.hover-bg-transparent:focus { background-color: transparent; }
.hover-bg-transparent:hover { background-color: transparent; }
.hover-b--transparent:focus { border-color: transparent; }
.hover-b--transparent:hover { border-color: transparent; }
.hover-c-action-primary:focus { color: #0c389f; }
.hover-c-action-primary:hover { color: #0c389f; }
.hover-c-action-secondary:focus { color: #dbe9fd; }
.hover-c-action-secondary:hover { color: #dbe9fd; }
.hover-c-link:focus { color: #0c389f; }
.hover-c-link:hover { color: #0c389f; }
.hov