/* Tachyons */
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Custom Media Queries
These custom media queries can be referenced like so:
@media (--breakpoint-medium) {
.bg-red { background-color: red; }
}
*/
/*
COLOR VARIABLES
Variables to set colors for
color, background-color, and border-color
*/
/* variables */
/*
BASE
*/
html,
body {
height: 100%;
}
/*
BOX SIZING
A saner box-model.
Only applied to unqualified elements where this model makes sense.
Apply .border-box where needed.
*/
nav,
main,
section,
article,
aside,
header,
footer,
div,
details,
summary,
form,
fieldset,
textarea,
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
nav:before,
main:before,
section:before,
article:before,
aside:before,
header:before,
footer:before,
div:before,
details:before,
summary:before,
form:before,
fieldset:before,
textarea:before,
input[type="text"]:before,
input[type="tel"]:before,
input[type="url"]:before,
input[type="email"]:before,
input[type="search"]:before,
input[type="number"]:before,
input[type="password"]:before,
nav:after,
main:after,
section:after,
article:after,
aside:after,
header:after,
footer:after,
div:after,
details:after,
summary:after,
form:after,
fieldset:after,
textarea:after,
input[type="text"]:after,
input[type="tel"]:after,
input[type="url"]:after,
input[type="email"]:after,
input[type="search"]:after,
input[type="number"]:after,
input[type="password"]:after,
.border-box,
.border-box:before,
.border-box:after {
box-sizing: border-box;
}
/*
BACKGROUND SIZE
Base:
bg = background-size
Modifiers:
cv = cover
cn = contain
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-cv {
background-size: cover;
}
.bg-cn {
background-size: contain;
}
@media screen and (min-width: 42em) {
.bg-cv-ns {
background-size: cover;
}
.bg-cn-ns {
background-size: contain;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.bg-cv-m {
background-size: cover;
}
.bg-cn-m {
background-size: contain;
}
}
@media screen and (min-width: 64em) {
.bg-cv-l {
background-size: cover;
}
.bg-cn-l {
background-size: contain;
}
}
/*
BORDER BASE
Use border-base in combination with setting text color
or by using extensions from border-color module.
Examples:
To set a border of blue on all sides:
To set a border on top of orange
Base:
b = border
Modifiers:
n = none, no border-style or border-width
a = all
t = top
r = right
b = bottom
l = left
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/* The extra `.bn` is required to boost the specificity, which is needed
* sometimes if you are setting the border to 0. */
.bn {
border-style: solid;
border-width: 0;
}
.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;
}
.bda {
border-style: dotted;
border-width: 1px;
}
.bdt {
border-top-style: dotted;
border-top-width: 1px;
}
.bdr {
border-right-style: dotted;
border-right-width: 1px;
}
.bdb {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.bdl {
border-left-style: dotted;
border-left-width: 1px;
}
@media screen and (min-width: 42em) {
.bn-ns {
border-style: solid;
border-width: 0;
}
.ba-ns {
border-style: solid;
border-width: 1px;
}
.bt-ns {
border-top-style: solid;
border-top-width: 1px;
}
.br-ns {
border-right-style: solid;
border-right-width: 1px;
}
.bb-ns {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.bl-ns {
border-left-style: solid;
border-left-width: 1px;
}
.bda-ns {
border-style: dotted;
border-width: 1px;
}
.bdt-ns {
border-top-style: dotted;
border-top-width: 1px;
}
.bdr-ns {
border-right-style: dotted;
border-right-width: 1px;
}
.bdb-ns {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.bdl-ns {
border-left-style: dotted;
border-left-width: 1px;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.bn-m {
border-style: solid;
border-width: 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;
}
.bda-m {
border-style: dotted;
border-width: 1px;
}
.bdt-m {
border-top-style: dotted;
border-top-width: 1px;
}
.bdr-m {
border-right-style: dotted;
border-right-width: 1px;
}
.bdb-m {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.bdl-m {
border-left-style: dotted;
border-left-width: 1px;
}
}
@media screen and (min-width: 64em) {
.bn-l {
border-style: solid;
border-width: 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;
}
.bda-l {
border-style: dotted;
border-width: 1px;
}
.bdt-l {
border-top-style: dotted;
border-top-width: 1px;
}
.bdr-l {
border-right-style: dotted;
border-right-width: 1px;
}
.bdb-l {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.bdl-l {
border-left-style: dotted;
border-left-width: 1px;
}
}
/*
BORDER COLORS
Use in cobmination with the _borders.css module
Or for more flexibility the _border-styles.css and _border-widths.css modules
Base:
b-- = border
Modifiers:
Add a border color. There is a one to one mapping of color values
in the _colors.css module.
*/
.b--black {
border-color: #000;
}
.b--near-black {
border-color: #111;
}
.b--dark-gray {
border-color: #333;
}
.b--mid-gray {
border-color: #555;
}
.b--gray {
border-color: #777;
}
.b--silver {
border-color: #999;
}
.b--light-silver {
border-color: #aaa;
}
.b--light-gray {
border-color: #eee;
}
.b--near-white {
border-color: #f4f4f4;
}
.b--white {
border-color: #fff;
}
.b--white-10 {
border-color: hsla(0, 0, 100%, .1);
}
.b--white-20 {
border-color: hsla(0, 0, 100%, .2);
}
.b--white-25 {
border-color: hsla(0, 0, 100%, .25);
}
.b--white-30 {
border-color: hsla(0, 0, 100%, .3);
}
.b--white-40 {
border-color: hsla(0, 0, 100%, .4);
}
.b--white-50 {
border-color: hsla(0, 0, 100%, .5);
}
.b--white-60 {
border-color: hsla(0, 0, 100%, .6);
}
.b--white-70 {
border-color: hsla(0, 0, 100%, .7);
}
.b--white-75 {
border-color: hsla(0, 0, 100%, .75);
}
.b--white-80 {
border-color: hsla(0, 0, 100%, .8);
}
.b--white-90 {
border-color: hsla(0, 0, 100%, .9);
}
.b--black-10 {
border-color: hsla(0, 0, 0, .1);
}
.b--black-20 {
border-color: hsla(0, 0, 0, .2);
}
.b--black-25 {
border-color: hsla(0, 0, 0, .25);
}
.b--black-30 {
border-color: hsla(0, 0, 0, .3);
}
.b--black-40 {
border-color: hsla(0, 0, 0, .4);
}
.b--black-50 {
border-color: hsla(0, 0, 0, .5);
}
.b--black-60 {
border-color: hsla(0, 0, 0, .6);
}
.b--black-70 {
border-color: hsla(0, 0, 0, .7);
}
.b--black-75 {
border-color: hsla(0, 0, 0, .75);
}
.b--black-80 {
border-color: hsla(0, 0, 0, .8);
}
.b--black-90 {
border-color: hsla(0, 0, 0, .9);
}
.b--blue {
border-color: #0074D9;
}
.b--light-blue {
border-color: #64a8ff;
}
.b--lightest-blue {
border-color: #a2dfff;
}
.b--dark-blue {
border-color: #0045a1;
}
.b--darkest-blue {
border-color: #002f86;
}
.b--yellow {
border-color: #fff93c;
}
.b--light-yellow {
border-color: #fffa60;
}
.b--lightest-yellow {
border-color: #fffca6;
}
.b--dark-yellow {
border-color: #e2c100;
}
.b--darkest-yellow {
border-color: #c4a600;
}
.b--orange {
border-color: #FF851B;
}
.b--light-orange {
border-color: #ffa942;
}
.b--lightest-orange {
border-color: #ffc55d;
}
.b--dark-orange {
border-color: #d05e00;
}
.b--darkest-orange {
border-color: #b14400;
}
.b--red {
border-color: #d82c2c;
}
.b--light-red {
border-color: #f94f44;
}
.b--lightest-red {
border-color: #ff6c5c;
}
.b--dark-red {
border-color: #bd001a;
}
.b--darkest-red {
border-color: #9d0003;
}
.b--teal {
border-color: #27bfa8;
}
.b--light-teal {
border-color: #4eddc5;
}
.b--lightest-teal {
border-color: #6ffae0;
}
.b--dark-teal {
border-color: #25a28f;
}
.b--darkest-teal {
border-color: #008876;
}
.b--green {
border-color: #3D9970;
}
.b--light-green {
border-color: #5ab48a;
}
.b--lightest-green {
border-color: #75d0a4;
}
.b--dark-green {
border-color: #1e7f58;
}
.b--darkest-green {
border-color: #006540;
}
.b--pink {
border-color: #F012BE;
}
.b--light-pink {
border-color: #ff57e8;
}
.b--lightest-pink {
border-color: #ff81ff;
}
.b--dark-pink {
border-color: #d100a3;
}
.b--darkest-pink {
border-color: #b20088;
}
.b--purple {
border-color: #980bc6;
}
.b--light-purple {
border-color: #b536e2;
}
.b--lightest-purple {
border-color: #d355ff;
}
.b--dark-purple {
border-color: #7b00a9;
}
.b--darkest-purple {
border-color: #5f008e;
}
/*
BORDER RADIUS
Base:
br = border-radius
Modifiers:
n = none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
5 = 5th step in scale
circ = circle
-100 = 100%
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.brn {
border-radius: 0;
}
.br1 {
border-radius: .125rem;
}
.br2 {
border-radius: .25rem;
}
.br3 {
border-radius: .5rem;
}
.br4 {
border-radius: 1rem;
}
.br5 {
border-radius: 2rem;
}
.br-circ {
border-radius: 9999px;
}
.br-100 {
border-radius: 100%;
}
@media screen and (min-width: 42em) {
.brn-ns {
border-radius: 0;
}
.br1-ns {
border-radius: .125rem;
}
.br2-ns {
border-radius: .25rem;
}
.br3-ns {
border-radius: .5rem;
}
.br4-ns {
border-radius: 1rem;
}
.br5-ns {
border-radius: 2rem;
}
.br-circ-ns {
border-radius: 9999px;
}
.br-100-ns {
border-radius: 100%;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.brn-m {
border-radius: 0;
}
.br1-m {
border-radius: .125rem;
}
.br2-m {
border-radius: .25rem;
}
.br3-m {
border-radius: .5rem;
}
.br4-m {
border-radius: 1rem;
}
.br5-m {
border-radius: 2rem;
}
.br-circ-m {
border-radius: 9999px;
}
.br-100-m {
border-radius: 100%;
}
}
@media screen and (min-width: 64em) {
.brn-l {
border-radius: 0;
}
.br1-l {
border-radius: .125rem;
}
.br2-l {
border-radius: .25rem;
}
.br3-l {
border-radius: .5rem;
}
.br4-l {
border-radius: 1rem;
}
.br5-l {
border-radius: 2rem;
}
.br-circ-l {
border-radius: 9999px;
}
.br-100-l {
border-radius: 100%;
}
}
/*
BORDER STYLES
Base:
bs = border-style
Modifiers:
none = none
dotted = dotted
solid = solid
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bs-none {
border-style: none;
}
.bs-dotted {
border-style: dotted;
}
.bs-solid {
border-style: solid;
}
@media screen and (min-width: 42em) {
.bs-none-ns {
border-style: none;
}
.bs-dotted-ns {
border-style: dotted;
}
.bs-solid-ns {
border-style: solid;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.bs-none-m {
border-style: none;
}
.bs-dotted-m {
border-style: dotted;
}
.bs-solid-m {
border-style: solid;
}
}
@media screen and (min-width: 64em) {
.bs-none-l {
border-style: none;
}
.bs-dotted-l {
border-style: dotted;
}
.bs-solid-l {
border-style: solid;
}
}
/*
BORDER WIDTHS
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:
-ns = not-small
-m = medium
-l = large
*/
.bw0 {
border-width: 0;
}
.bw1 {
border-width: .125rem;
}
.bw2 {
border-width: .25rem;
}
.bw3 {
border-width: .5rem;
}
.bw4 {
border-width: .75rem;
}
.bw5 {
border-width: 1rem;
}
@media screen and (min-width: 42em) {
.bw0-ns {
border-width: 0;
}
.bw1-ns {
border-width: .125rem;
}
.bw2-ns {
border-width: .25rem;
}
.bw3-ns {
border-width: .5rem;
}
.bw4-ns {
border-width: .75rem;
}
.bw5-ns {
border-width: 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.bw0-m {
border-width: 0;
}
.bw1-m {
border-width: .125rem;
}
.bw2-m {
border-width: .25rem;
}
.bw3-m {
border-width: .5rem;
}
.bw4-m {
border-width: .75rem;
}
.bw5-m {
border-width: 1rem;
}
}
@media screen and (min-width: 64em) {
.bw0-l {
border-width: 0;
}
.bw1-l {
border-width: .125rem;
}
.bw2-l {
border-width: .25rem;
}
.bw3-l {
border-width: .5rem;
}
.bw4-l {
border-width: .75rem;
}
.bw5-l {
border-width: 1rem;
}
}
/*
*
* btns.css
* Simple css utilities for building responsive buttons
* Author: mrmrs
* License: MIT
*
* */
/*
Base .btn class
Code:
Default button
*/
/*evans changing tachyons btnborder color, may just have to make new classes*/
.btn,
.btn:link,
.btn:visited {
border-radius: 2em;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
color: #ffffff;
display: inline-block;
letter-spacing: .15em;
text-decoration: none;
text-transform: uppercase;
transition: color .4s, background-color .4s, border .4s;
}
.btn:hover {
color: #7FDBFF;
border: 1px solid #7FDBFF;
transition: background-color .3s, color .3s, border .3s;
}
.btn:active {
color: #0074D9;
border: 1px solid #0074D9;
transition: background-color .3s, color .3s, border .3s;
}
/*
Sizes
Small = .btn--s
Medium = .btn--m
Large = .btn--l
Code:
*/
.btn--s {
font-size: 12px;
}
.btn--m {
font-size: 14px;
}
.btn--l {
font-size: 20px;
border-radius: .25em!important;
}
/*
Layout utility for responsive buttons
Code:
*/
.btn--full,
.btn--full:link {
border-radius: .25em;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
/*
Skins
* Black & White
* Grays
* Colors
Code:
*/
/* BLACK & WHITE */
.btn--black,
.btn--black:link,
.btn--black:visited {
color: #fff;
background-color: #000;
}
.btn--black:hover {
color: #fff;
background-color: #777;
border-color: #777;
}
.btn--black:active {
color: #fff;
background-color: #999;
border-color: #999;
}
.btn--black:hover {
background-color: #444;
}
.btn--black {
background-color: #000;
}
.btn--gray:link,
.btn--gray:visited,
{
background-color: #f0f0f0;
border-color: #f0f0f0;
color: #555;
}
.btn--gray:hover {
background-color: #ddd;
border-color: #ddd;
color: #444;
}
.btn--gray:active {
background-color: #ccc;
border-color: #ccc;
color: #444;
}
.btn--gray-border:link,
.btn--gray-border:visited,
{
background-color: #fff;
border-color: #555;
border-width: 2px;
color: #555;
}
.btn--gray-border:hover {
background-color: #fff;
border-color: #ddd;
color: #777;
}
.btn--gray-border:active {
background-color: #ccc;
border-color: #ccc;
color: #444;
}
.btn--gray-dark:link,
.btn--gray-dark:visited {
background-color: #555;
color: #eee;
}
.btn--gray-dark:hover {
background-color: #333;
border-color: #333;
color: #eee;
}
.btn--gray-dark:active {
background-color: #777;
border-color: #777;
color: #eee;
}
/* BLUES */
.btn--blue:link,
.btn--blue:visited {
color: #fff;
background-color: #0074D9;
}
.btn--blue:hover {
color: #fff!important;
background-color: #0063aa;
border-color: #0063aa;
}
.btn--blue:active {
color: #fff;
background-color: #001F3F;
border-color: #001F3F;
}
.btn--animated {
background: #f9f9f9;
color: #444;
border: 4px solid #f1f1f1;
padding: .5rem;
transition: padding .4s ease-out;
transition-delay: .1s;
}
.btn--animated:hover {
background: #f9f9f9;
border: 4px solid #f1f1f1;
padding: .75rem;
transition: padding .2s ease-in;
}
/* Keep it mobile-first and responsive */
@media screen and (min-width: 32em) {
.btn--full {
max-width: 16em!important;
}
}
/*
CODE
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
}
.code {
white-space: pre;
font-size: 14px;
}
/*
CLEARS
*/
.cn {
clear: none;
}
.cl {
clear: left;
}
.cr {
clear: right;
}
.cb {
clear: both;
}
/* Nicolas Gallaghers Clearfix solution
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/*
DIMENSION UTILITIES
*/
.wrap {
display: block;
width: auto !important;
}
.fill {
display: block;
overflow: hidden;
width: auto !important;
}
/*
DISPLAY
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
tr = table-row
tcol = table-column
tcolg = table-column-group
Media Query Extensions:
-ns = not-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;
table-layout: fixed;
width: 100%;
}
.dtr {
display: table-row;
}
.dtc {
display: table-cell;
}
.dtcol {
display: table-column;
}
.dtcolg {
display: table-column-group;
}
@media screen and (min-width: 42em) {
.dn-ns {
display: none;
}
.di-ns {
display: inline;
}
.db-ns {
display: block;
}
.dib-ns {
display: inline-block;
}
.dit-ns {
display: inline-table;
}
.dt-ns {
display: table;
table-layout: fixed;
width: 100%;
}
.dtr-ns {
display: table-row;
}
.dtc-ns {
display: table-cell;
}
.dtcol-ns {
display: table-column;
}
.dtcolg-ns {
display: table-column-group;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.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;
table-layout: fixed;
width: 100%;
}
.dtr-m {
display: table-row;
}
.dtc-m {
display: table-cell;
}
.dtcol-m {
display: table-column;
}
.dtcolg-m {
display: table-column-group;
}
}
@media screen and (min-width: 64em) {
.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;
table-layout: fixed;
width: 100%;
}
.dtr-l {
display: table-row;
}
.dtc-l {
display: table-cell;
}
.dtcol-l {
display: table-column;
}
.dtcolg-l {
display: table-column-group;
}
}
/*
FLOATS
1. 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.
2. Don't forget to clearfix your floats with .cf
Base:
f = float
Modifiers:
l = left
r = right
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.fn {
float: none;
}
@media screen and (min-width: 42em) {
.fl-ns {
float: left;
display: inline;
}
.fr-ns {
float: right;
display: inline;
}
.fn-ns {
float: none;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.fl-m {
float: left;
display: inline;
}
.fr-m {
float: right;
display: inline;
}
.fn-m {
float: none;
}
}
@media screen and (min-width: 64em) {
.fl-l {
float: left;
display: inline;
}
.fr-l {
float: right;
display: inline;
}
.fn-l {
float: none;
}
}
/*
Font Family Groups
*/
.sans-serif {
font-family: 'avenir next', avenir,
helvetica, 'helvetica neue',
arial,
sans-serif;
}
.serif {
font-family: TimesNewRoman, "Times New Roman", times,
georgia,
serif;
}
/* From http://cssfontstack.com */
code,
.code {
font-family: Consolas,
monaco,
monospace;
}
.serif-bodini {
font-family: "Bodini MT",
Didot,
"Didot LT STD",
"Hoefler Text",
Garamond,
"Times New Roman",
serif;
}
.serif-calisto {
font-family: "Calisto MT",
"Bookman Old Style", Bookman,
"Goudy Old Style",
Garamond,
"Hoefler Text",
"Bitstream Charter",
Georgia,
serif;
}
.serif-garamond {
font-family: Garamond,
Baskerville, "Baskerville Old Face",
"Hoefler Text",
"Times New Roman",
serif;
}
.serif-times {
font-family: TimesNewRoman, "Times New Roman", Times,
Baskerville,
Georgia,
serif;
}
/*
Font Style
*/
.fsn {
font-style: normal;
}
.i {
font-style: italic;
}
@media screen and (min-width: 42em) {
.fsn-ns {
font-style: normal;
}
.i-ns {
font-style: italic;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.fsn-m {
font-style: normal;
}
.i-m {
font-style: italic;
}
}
@media screen and (min-width: 64em) {
.fsn-l {
font-style: normal;
}
.i-l {
font-style: italic;
}
}
/*
FONT WEIGHT
*/
.normal {
font-weight: normal;
}
.b {
font-weight: bold;
}
.thin {
font-weight: 100;
}
.book {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.heavy {
font-weight: 900;
}
@media screen and (min-width: 42em) {
.normal-ns {
font-weight: normal;
}
.b-ns {
font-weight: bold;
}
.thin-ns {
font-weight: 100;
}
.book-ns {
font-weight: 400;
}
.bold-ns {
font-weight: 700;
}
.heavy-ns {
font-weight: 900;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.normal-m {
font-weight: normal;
}
.b-m {
font-weight: bold;
}
.thin-m {
font-weight: 100;
}
.book-m {
font-weight: 400;
}
.bold-m {
font-weight: 700;
}
.heavy-m {
font-weight: 900;
}
}
@media screen and (min-width: 64em) {
.normal-l {
font-weight: normal;
}
.b-l {
font-weight: bold;
}
.thin-l {
font-weight: 100;
}
.book-l {
font-weight: 400;
}
.bold-l {
font-weight: 700;
}
.heavy-l {
font-weight: 900;
}
}
/* Forms */
.input-text {
outline: 0;
border: 1px solid #999;
}
.input-invisible {
outline: 0;
border: 0;
}
/* Media Queries */
/*
Use this scaffolding to create or extend your own modules with tachyons
style architecture.
*/
@media screen and (min-width: 42em) {
}
@media screen and (min-width: 42em) and (max-width: 64em) {
}
@media screen and (min-width: 64em) {
}
/*
Heights
*/
/* Height Scale */
.h1 {
height: 1rem;
}
.h2 {
height: 2rem;
}
.h3 {
height: 4rem;
}
.h4 {
height: 8rem;
}
.h5 {
height: 16rem;
}
.h-10 {
height: 10%;
}
.h-20 {
height: 20%;
}
.h-25 {
height: 25%;
}
.h-40 {
height: 40%;
}
.h-50 {
height: 50%;
}
.h-60 {
height: 60%;
}
.h-75 {
height: 75%;
}
.h-80 {
height: 80%;
}
.h-100 {
height: 100%;
}
/* String Properties */
.h-bb {
height: border-box;
}
.h-cb {
height: content-box;
}
.h-mx {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.h-mn {
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.h-av {
height: available;
}
.h-fc {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.h-at {
height: auto;
}
.h-i {
height: inherit;
}
@media screen and (min-width: 42em) {
.h-1-ns {
height: 1rem;
}
.h-2-ns {
height: 2rem;
}
.h-3-ns {
height: 4rem;
}
.h-4-ns {
height: 8rem;
}
.h-5-ns {
height: 16rem;
}
.h-10-ns {
height: 10%;
}
.h-20-ns {
height: 20%;
}
.h-25-ns {
height: 25%;
}
.h-40-ns {
height: 40%;
}
.h-50-ns {
height: 50%;
}
.h-60-ns {
height: 60%;
}
.h-75-ns {
height: 75%;
}
.h-80-ns {
height: 80%;
}
.h-100-ns {
height: 100%;
}
.h-bb-ns {
height: border-box;
}
.h-cb-ns {
height: content-box;
}
.h-mx-ns {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.h-mn-ns {
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.h-av-ns {
height: available;
}
.h-fc-ns {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.h-at-ns {
height: auto;
}
.h-i-ns {
height: inherit;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.h1-m {
height: 1rem;
}
.h2-m {
height: 2rem;
}
.h3-m {
height: 4rem;
}
.h4-m {
height: 8rem;
}
.h5-m {
height: 16rem;
}
.h-10-m {
height: 10%;
}
.h-20-m {
height: 20%;
}
.h-25-m {
height: 25%;
}
.h-40-m {
height: 40%;
}
.h-50-m {
height: 50%;
}
.h-60-m {
height: 60%;
}
.h-75-m {
height: 75%;
}
.h-80-m {
height: 80%;
}
.h-100-m {
height: 100%;
}
.h-bb-m {
height: border-box;
}
.h-cb-m {
height: content-box;
}
.h-mx-m {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.h-mn-m {
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.h-av-m {
height: available;
}
.h-fc-m {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.h-at-m {
height: auto;
}
.h-i-m {
height: inherit;
}
}
@media screen and (min-width: 64em) {
.h1-l {
height: 1rem;
}
.h2-l {
height: 2rem;
}
.h3-l {
height: 4rem;
}
.h4-l {
height: 8rem;
}
.h5-l {
height: 16rem;
}
.h-10-l {
height: 10%;
}
.h-20-l {
height: 20%;
}
.h-25-l {
height: 25%;
}
.h-40-l {
height: 40%;
}
.h-50-l {
height: 50%;
}
.h-60-l {
height: 60%;
}
.h-75-l {
height: 75%;
}
.h-80-l {
height: 80%;
}
.h-100-l {
height: 100%;
}
.h-bb-l {
height: border-box;
}
.h-cb-l {
height: content-box;
}
.h-mx-l {
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.h-mn-l {
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
}
.h-av-l {
height: available;
}
.h-fc-l {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.h-at-l {
height: auto;
}
.h-i-l {
height: inherit;
}
}
/*
IMAGES
*/
/* Responsive images! */
img {
max-width: 100%;
}
/*
LETTER SPACING
*/
.tracked {
letter-spacing: .16em;
}
.tracked-tight {
letter-spacing: -.1em;
}
.mega-tracked {
letter-spacing: .3em;
}
@media screen and (min-width: 42em) {
.tracked-ns {
letter-spacing: .16em;
}
.tracked-tight-ns {
letter-spacing: -.1em;
}
.mega-tracked-ns {
letter-spacing: .3em;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.tracked-m {
letter-spacing: .16em;
}
.tracked-tight-m {
letter-spacing: -.1em;
}
.mega-tracked-m {
letter-spacing: .3em;
}
}
@media screen and (min-width: 64em) {
.tracked-l {
letter-spacing: .16em;
}
.tracked-tight-l {
letter-spacing: -.1em;
}
.mega-tracked-l {
letter-spacing: .3em;
}
}
/*
LINE HEIGHT
*/
.lh-solid {
line-height: 1;
}
.lh-title {
line-height: 1.3;
}
.lh-copy {
line-height: 1.6;
}
@media screen and (min-width: 42em) {
.lh-solid-ns {
line-height: 1;
}
.lh-title-ns {
line-height: 1.3;
}
.lh-copy-ns {
line-height: 1.6;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.lh-solid-m {
line-height: 1;
}
.lh-title-m {
line-height: 1.3;
}
.lh-copy-m {
line-height: 1.6;
}
}
@media screen and (min-width: 64em) {
.lh-solid-l {
line-height: 1;
}
.lh-title-l {
line-height: 1.3;
}
.lh-copy-l {
line-height: 1.6;
}
}
/*
LINKS
*/
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link,
.link:visited {
color: #2D243B;
transition: color .15s ease-in;
}
.link:hover {
color: #999999;
transition: color .15s ease-in;
}
.link:active {
color: #C4E3E0;
transition: color .15s ease-in;
}
.link:focus {
color: #2D243B;
transition: color .15s ease-in;
}
.underline {
text-decoration: underline;
}
.underline-hover:hover {
text-decoration: underline;
}
/*
LISTS
*/
.list {
list-style-type: none;
}
@media screen and (min-width: 42em) {
.list-ns {
list-style-type: none;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.list-m {
list-style: none;
}
}
@media screen and (min-width: 64em) {
.list-l {
list-style-type: none;
}
}
/*
MAX WIDTHS
*/
.mw-100 {
max-width: 100%;
}
.mw-75 {
max-width: 75%;
}
.mw-50 {
max-width: 50%;
}
.mw-25 {
max-width: 25%;
}
.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: 64rem;
}
.mw9 {
max-width: 96rem;
}
.mw10 {
max-width: 128rem;
}
.mw-none {
max-width: none;
}
.mw-max {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.mw-min {
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
}
.mw-fit {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.mw-fill {
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: fill-available;
}
@media screen and (min-width: 42em) {
.mw-100-ns {
max-width: 100%;
}
.mw-75-ns {
max-width: 75%;
}
.mw-50-ns {
max-width: 50%;
}
.mw-25-ns {
max-width: 25%;
}
.mw1-ns {
max-width: 1rem;
}
.mw2-ns {
max-width: 2rem;
}
.mw3-ns {
max-width: 4rem;
}
.mw4-ns {
max-width: 8rem;
}
.mw5-ns {
max-width: 16rem;
}
.mw6-ns {
max-width: 32rem;
}
.mw7-ns {
max-width: 48rem;
}
.mw8-ns {
max-width: 64rem;
}
.mw9-ns {
max-width: 96rem;
}
.mw10-ns {
max-width: 128rem;
}
.mw-none-ns {
max-width: none;
}
.mw-max-ns {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.mw-min-ns {
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
}
.mw-fit-ns {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.mw-fill-ns {
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: fill-available;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.mw-100-m {
max-width: 100%;
}
.mw-75-m {
max-width: 75%;
}
.mw-50-m {
max-width: 50%;
}
.mw-25-m {
max-width: 25%;
}
.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: 64rem;
}
.mw9-m {
max-width: 96rem;
}
.mw10-m {
max-width: 128rem;
}
.mw-none-m {
max-width: none;
}
.mw-max-m {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.mw-min-m {
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
}
.mw-fit-m {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.mw-fill-m {
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: fill-available;
}
}
@media screen and (min-width: 64em) {
.mw-100-l {
max-width: 100%;
}
.mw-75-l {
max-width: 75%;
}
.mw-50-l {
max-width: 50%;
}
.mw-25-l {
max-width: 25%;
}
.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: 64rem;
}
.mw9-l {
max-width: 96rem;
}
.mw10-l {
max-width: 128rem;
}
.mw-none-l {
max-width: none;
}
.mw-max-l {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.mw-min-l {
max-width: -webkit-min-content;
max-width: -moz-min-content;
max-width: min-content;
}
.mw-fit-l {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.mw-fill-l {
max-width: -webkit-fill-available;
max-width: -moz-available;
max-width: fill-available;
}
}
/*
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%
-33 = literal value 33%
-34 = literal value 34%
-40 = literal value 40%
-50 = literal value 50%
-60 = literal value 60%
-75 = literal value 75%
-80 = literal value 80%
-100 = literal value 100%
Media Query Extensions:
-ns = not-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-33 {
width: 33%;
}
.w-34 {
width: 34%;
}
.w-40 {
width: 40%;
}
.w-50 {
width: 50%;
}
.w-60 {
width: 60%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.w-100 {
width: 100%;
}
.w-at {
width: auto;
}
@media screen and (min-width: 42em) {
.w1-ns {
width: 1rem;
}
.w2-ns {
width: 2rem;
}
.w3-ns {
width: 4rem;
}
.w4-ns {
width: 8rem;
}
.w5-ns {
width: 16rem;
}
.w-10-ns {
width: 10%;
}
.w-20-ns {
width: 20%;
}
.w-25-ns {
width: 25%;
}
.w-33-ns {
width: 33%;
}
.w-34-ns {
width: 34%;
}
.w-40-ns {
width: 40%;
}
.w-50-ns {
width: 50%;
}
.w-60-ns {
width: 60%;
}
.w-75-ns {
width: 75%;
}
.w-80-ns {
width: 80%;
}
.w-100-ns {
width: 100%;
}
.w-at-ns {
width: auto;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.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-33-m {
width: 33%;
}
.w-34-m {
width: 34%;
}
.w-40-m {
width: 40%;
}
.w-50-m {
width: 50%;
}
.w-60-m {
width: 60%;
}
.w-75-m {
width: 75%;
}
.w-80-m {
width: 80%;
}
.w-100-m {
width: 100%;
}
.w-at-m {
width: auto;
}
}
@media screen and (min-width: 64em) {
.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-33-l {
width: 33%;
}
.w-34-l {
width: 34%;
}
.w-40-l {
width: 40%;
}
.w-50-l {
width: 50%;
}
.w-60-l {
width: 60%;
}
.w-75-l {
width: 75%;
}
.w-80-l {
width: 80%;
}
.w-100-l {
width: 100%;
}
.w-at-l {
width: auto;
}
}
/*
OVERFLOWS
*/
.of-vis {
overflow: visible;
}
.of-hid {
overflow: hidden;
}
.of-scr {
overflow: scroll;
}
.of-aut {
overflow: auto;
}
.ofx-vis {
overflow-x: visible;
}
.ofx-hid {
overflow-x: hidden;
}
.ofx-scr {
overflow-x: scroll;
}
.ofx-aut {
overflow-x: auto;
}
.ofy-vis {
overflow-y: visible;
}
.ofy-hid {
overflow-y: hidden;
}
.ofy-scr {
overflow-y: scroll;
}
.ofy-aut {
overflow-y: auto;
}
@media screen and (min-width: 42em) {
.of-vis-ns {
overflow: visible;
}
.of-hid-ns {
overflow: hidden;
}
.of-scr-ns {
overflow: scroll;
}
.of-aut-ns {
overflow: auto;
}
.ofx-vis-ns {
overflow-x: visible;
}
.ofx-hid-ns {
overflow-x: hidden;
}
.ofx-scr-ns {
overflow-x: scroll;
}
.ofx-aut-ns {
overflow-x: auto;
}
.ofy-vis-ns {
overflow-y: visible;
}
.ofy-hid-ns {
overflow-y: hidden;
}
.ofy-scr-ns {
overflow-y: scroll;
}
.ofy-aut-ns {
overflow-y: auto;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.of-vis-m {
overflow: visible;
}
.of-hid-m {
overflow: hidden;
}
.of-scr-m {
overflow: scroll;
}
.of-aut-m {
overflow: auto;
}
.ofx-vis-m {
overflow-x: visible;
}
.ofx-hid-m {
overflow-x: hidden;
}
.ofx-scr-m {
overflow-x: scroll;
}
.ofx-aut-m {
overflow-x: auto;
}
.ofy-vis-m {
overflow-y: visible;
}
.ofy-hid-m {
overflow-y: hidden;
}
.ofy-scr-m {
overflow-y: scroll;
}
.ofy-aut-m {
overflow-y: auto;
}
}
@media screen and (min-width: 64em) {
.of-vis-l {
overflow: visible;
}
.of-hid-l {
overflow: hidden;
}
.of-scr-l {
overflow: scroll;
}
.of-aut-l {
overflow: auto;
}
.ofx-vis-l {
overflow-x: visible;
}
.ofx-hid-l {
overflow-x: hidden;
}
.ofx-scr-l {
overflow-x: scroll;
}
.ofx-aut-l {
overflow-x: auto;
}
.ofy-vis-l {
overflow-y: visible;
}
.ofy-hid-l {
overflow-y: hidden;
}
.ofy-scr-l {
overflow-y: scroll;
}
.ofy-aut-l {
overflow-y: auto;
}
}
/*
POSITIONING
*/
.pos-stat {
position: static;
}
.pos-rel {
position: relative;
}
.pos-abs {
position: absolute;
}
.pos-fix {
position: fixed;
}
/* Values */
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.top-1 {
top: 1rem;
}
.left-1 {
left: 1rem;
}
.right-1 {
right: 1rem;
}
.bottom-1 {
bottom: 1rem;
}
.top-2 {
top: 2rem;
}
.left-2 {
left: 2rem;
}
.right-2 {
right: 2rem;
}
.bottom-2 {
bottom: 2rem;
}
.top-4 {
top: 4rem;
}
.left-4 {
left: 4rem;
}
.right-4 {
right: 4rem;
}
.bottom-4 {
bottom: 4rem;
}
/* Top Percentage based scale */
.top-auto {
top: auto;
}
.top-i {
top: inherit;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 42em) {
.pos-stat-ns {
position: static;
}
.pos-rel-ns {
position: relative;
}
.pos-abs-ns {
position: absolute;
}
.pos-fix-ns {
position: fixed;
}
.top-0-ns {
top: 0;
}
.left-0-ns {
left: 0;
}
.right-0-ns {
right: 0;
}
.bottom-0-ns {
bottom: 0;
}
.top-1-ns {
top: 1rem;
}
.left-1-ns {
left: 1rem;
}
.right-1-ns {
right: 1rem;
}
.bottom-1-ns {
bottom: 1rem;
}
.top-2-ns {
top: 2rem;
}
.left-2-ns {
left: 2rem;
}
.right-2-ns {
right: 2rem;
}
.bottom-2-ns {
bottom: 2rem;
}
.top-4-ns {
top: 4rem;
}
.left-4-ns {
left: 4rem;
}
.right-4-ns {
right: 4rem;
}
.bottom-4-ns {
bottom: 4rem;
}
.top-auto-ns {
top: auto;
}
.top-i-ns {
top: inherit;
}
.center-ns {
margin-right: auto;
margin-left: auto;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.pos-stat-m {
position: static;
}
.pos-rel-m {
position: relative;
}
.pos-abs-m {
position: absolute;
}
.pos-fix-m {
position: fixed;
}
.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-4-m {
top: 4rem;
}
.left-4-m {
left: 4rem;
}
.right-4-m {
right: 4rem;
}
.bottom-4-m {
bottom: 4rem;
}
.top-auto-m {
top: auto;
}
.top-i-m {
top: inherit;
}
.center-m {
margin-right: auto;
margin-left: auto;
}
}
@media screen and (min-width: 64em) {
.pos-stat-l {
position: static;
}
.pos-rel-l {
position: relative;
}
.pos-abs-l {
position: absolute;
}
.pos-fix-l {
position: fixed;
}
.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-4-l {
top: 4rem;
}
.left-4-l {
left: 4rem;
}
.right-4-l {
right: 4rem;
}
.bottom-4-l {
bottom: 4rem;
}
.top-auto-l {
top: auto;
}
.top-i-l {
top: inherit;
}
.center-l {
margin-right: auto;
margin-left: auto;
}
}
/*
SKINS
*/
/* Text colors */
.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);
}
.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);
}
.black {
color: #111;
}
.dark-gray {
color: #333;
}
.mid-gray {
color: #555;
}
.gray {
color: #777;
}
.silver {
color: #999;
}
.light-silver {
color: #aaa;
}
.light-gray {
color: #eee;
}
.near-white {
color: #f4f4f4;
}
.white {
color: #fff;
}
.blue {
color: #0074D9;
}
.light-blue {
color: #64a8ff;
}
.lightest-blue {
color: #a2dfff;
}
.dark-blue {
color: #0045a1;
}
.darkest-blue {
color: #002f86;
}
.yellow {
color: #fff93c;
}
.light-yellow {
color: #fffa60;
}
.lightest-yellow {
color: #fffca6;
}
.dark-yellow {
color: #e2c100;
}
.darkest-yellow {
color: #c4a600;
}
.orange {
color: #FF851B;
}
.light-orange {
color: #ffa942;
}
.lightest-orange {
color: #ffc55d;
}
.dark-orange {
color: #d05e00;
}
.darkest-orange {
color: #b14400;
}
.red {
color: #d82c2c;
}
.light-red {
color: #f94f44;
}
.lightest-red {
color: #ff6c5c;
}
.dark-red {
color: #bd001a;
}
.darkest-red {
color: #9d0003;
}
.teal {
color: #27bfa8;
}
.light-teal {
color: #4eddc5;
}
.lightest-teal {
color: #6ffae0;
}
.dark-teal {
color: #25a28f;
}
.darkest-teal {
color: #008876;
}
.green {
color: #3D9970;
}
.light-green {
color: #5ab48a;
}
.lightest-green {
color: #75d0a4;
}
.dark-green {
color: #1e7f58;
}
.darkest-green {
color: #006540;
}
.pink {
color: #F012BE;
}
.light-pink {
color: #ff57e8;
}
.lightest-pink {
color: #ff81ff;
}
.dark-pink {
color: #d100a3;
}
.darkest-pink {
color: #b20088;
}
.purple {
color: #980bc6;
}
.light-purple {
color: #b536e2;
}
.lightest-purple {
color: #d355ff;
}
.dark-purple {
color: #7b00a9;
}
.darkest-purple {
color: #5f008e;
}
/* Background colors */
.bg-black {
background-color: #111;
}
.bg-dark-gray {
background-color: #333;
}
.bg-mid-gray {
background-color: #555;
}
.bg-gray {
background-color: #777;
}
.bg-silver {
background-color: #999;
}
.bg-light-silver {
background-color: #aaa;
}
.bg-light-gray {
background-color: #eee;
}
.bg-near-white {
background-color: #f4f4f4;
}
.bg-white {
background-color: #fff;
}
.bg-blue {
background-color: #0074D9;
}
.bg-light-blue {
background-color: #64a8ff;
}
.bg-lightest-blue {
background-color: #a2dfff;
}
.bg-dark-blue {
background-color: #0045a1;
}
.bg-darkest-blue {
background-color: #002f86;
}
.bg-yellow {
background-color: #fff93c;
}
.bg-light-yellow {
background-color: #fffa60;
}
.bg-lightest-yellow {
background-color: #fffca6;
}
.bg-dark-yellow {
background-color: #e2c100;
}
.bg-darkest-yellow {
background-color: #c4a600;
}
.bg-orange {
background-color: #FF851B;
}
.bg-light-orange {
background-color: #ffa942;
}
.bg-lightest-orange {
background-color: #ffc55d;
}
.bg-dark-orange {
background-color: #d05e00;
}
.bg-darkest-orange {
background-color: #b14400;
}
.bg-red {
background-color: #d82c2c;
}
.bg-light-red {
background-color: #f94f44;
}
.bg-lightest-red {
background-color: #ff6c5c;
}
.bg-dark-red {
background-color: #bd001a;
}
.bg-darkest-red {
background-color: #9d0003;
}
.bg-teal {
background-color: #27bfa8;
}
.bg-light-teal {
background-color: #4eddc5;
}
.bg-lightest-teal {
background-color: #6ffae0;
}
.bg-dark-teal {
background-color: #25a28f;
}
.bg-darkest-teal {
background-color: #008876;
}
.bg-green {
background-color: #3D9970;
}
.bg-light-green {
background-color: #5ab48a;
}
.bg-lightest-green {
background-color: #75d0a4;
}
.bg-dark-green {
background-color: #1e7f58;
}
.bg-darkest-green {
background-color: #006540;
}
.bg-pink {
background-color: #F012BE;
}
.bg-light-pink {
background-color: #ff57e8;
}
.bg-lightest-pink {
background-color: #ff81ff;
}
.bg-dark-pink {
background-color: #d100a3;
}
.bg-darkest-pink {
background-color: #b20088;
}
.bg-purple {
background-color: #980bc6;
}
.bg-light-purple {
background-color: #b536e2;
}
.bg-lightest-purple {
background-color: #d355ff;
}
.bg-dark-purple {
background-color: #7b00a9;
}
.bg-darkest-purple {
background-color: #5f008e;
}
/* Skins for specific pseudoclasses */
.focus-black:focus {
color: #000;
}
.focus-near-black:focus {
color: #111;
}
.focus-dark-gray:focus {
color: #333;
}
.focus-mid-gray:focus {
color: #555;
}
.focus-gray:focus {
color: #777;
}
.focus-silver:focus {
color: #999;
}
.focus-light-silver:focus {
color: #aaa;
}
.focus-moon-gray:focus {
color: #ccc;
}
.focus-light-gray:focus {
color: #eee;
}
.focus-near-white:focus {
color: #f4f4f4;
}
.focus-white:focus {
color: #fff;
}
.focus-blue:focus {
color: #0074D9;
}
.focus-light-blue:focus {
color: #64a8ff;
}
.focus-lightest-blue:focus {
color: #a2dfff;
}
.focus-dark-blue:focus {
color: #0045a1;
}
.focus-darkest-blue:focus {
color: #002f86;
}
.focus-yellow:focus {
color: #fff93c;
}
.focus-light-yellow:focus {
color: #fffa60;
}
.focus-lightest-yellow:focus {
color: #fffca6;
}
.focus-dark-yellow:focus {
color: #e2c100;
}
.focus-darkest-yellow:focus {
color: #c4a600;
}
.focus-orange:focus {
color: #FF851B;
}
.focus-light-orange:focus {
color: #ffa942;
}
.focus-lightest-orange:focus {
color: #ffc55d;
}
.focus-dark-orange:focus {
color: #d05e00;
}
.focus-darkest-orange:focus {
color: #b14400;
}
.focus-red:focus {
color: #d82c2c;
}
.focus-light-red:focus {
color: #f94f44;
}
.focus-lightest-red:focus {
color: #ff6c5c;
}
.focus-dark-red:focus {
color: #bd001a;
}
.focus-darkest-red:focus {
color: #9d0003;
}
.focus-teal:focus {
color: #27bfa8;
}
.focus-light-teal:focus {
color: #4eddc5;
}
.focus-lightest-teal:focus {
color: #6ffae0;
}
.focus-dark-teal:focus {
color: #25a28f;
}
.focus-darkest-teal:focus {
color: #008876;
}
.focus-green:focus {
color: #3D9970;
}
.focus-light-green:focus {
color: #5ab48a;
}
.focus-lightest-green:focus {
color: #75d0a4;
}
.focus-dark-green:focus {
color: #1e7f58;
}
.focus-darkest-green:focus {
color: #006540;
}
.focus-pink:focus {
color: #F012BE;
}
.focus-light-pink:focus {
color: #ff57e8;
}
.focus-lightest-pink:focus {
color: #ff81ff;
}
.focus-dark-pink:focus {
color: #d100a3;
}
.focus-darkest-pink:focus {
color: #b20088;
}
.focus-purple:focus {
color: #980bc6;
}
.focus-light-purple:focus {
color: #b536e2;
}
.focus-lightest-purple:focus {
color: #d355ff;
}
.focus-dark-purple:focus {
color: #7b00a9;
}
.focus-darkest-purple:focus {
color: #5f008e;
}
.bg-focus-black:focus {
background-color: #000;
}
.bg-focus-near-black:focus {
background-color: #111;
}
.bg-focus-dark-gray:focus {
background-color: #333;
}
.bg-focus-mid-gray:focus {
background-color: #555;
}
.bg-focus-gray:focus {
background-color: #777;
}
.bg-focus-silver:focus {
background-color: #999;
}
.bg-focus-light-silver:focus {
background-color: #aaa;
}
.bg-focus-moon-gray:focus {
background-color: #ccc;
}
.bg-focus-light-gray:focus {
background-color: #eee;
}
.bg-focus-near-white:focus {
background-color: #f4f4f4;
}
.bg-focus-white:focus {
background-color: #fff;
}
.bg-focus-blue:focus {
background-color: #0074D9;
}
.bg-focus-light-blue:focus {
background-color: #64a8ff;
}
.bg-focus-lightest-blue:focus {
background-color: #a2dfff;
}
.bg-focus-dark-blue:focus {
background-color: #0045a1;
}
.bg-focus-darkest-blue:focus {
background-color: #002f86;
}
.bg-focus-yellow:focus {
background-color: #fff93c;
}
.bg-focus-light-yellow:focus {
background-color: #fffa60;
}
.bg-focus-lightest-yellow:focus {
background-color: #fffca6;
}
.bg-focus-dark-yellow:focus {
background-color: #e2c100;
}
.bg-focus-darkest-yellow:focus {
background-color: #c4a600;
}
.bg-focus-orange:focus {
background-color: #FF851B;
}
.bg-focus-light-orange:focus {
background-color: #ffa942;
}
.bg-focus-lightest-orange:focus {
background-color: #ffc55d;
}
.bg-focus-dark-orange:focus {
background-color: #d05e00;
}
.bg-focus-darkest-orange:focus {
background-color: #b14400;
}
.bg-focus-red:focus {
background-color: #d82c2c;
}
.bg-focus-light-red:focus {
background-color: #f94f44;
}
.bg-focus-lightest-red:focus {
background-color: #ff6c5c;
}
.bg-focus-dark-red:focus {
background-color: #bd001a;
}
.bg-focus-darkest-red:focus {
background-color: #9d0003;
}
.bg-focus-teal:focus {
background-color: #27bfa8;
}
.bg-focus-light-teal:focus {
background-color: #4eddc5;
}
.bg-focus-lightest-teal:focus {
background-color: #6ffae0;
}
.bg-focus-dark-teal:focus {
background-color: #25a28f;
}
.bg-focus-darkest-teal:focus {
background-color: #008876;
}
.bg-focus-green:focus {
background-color: #3D9970;
}
.bg-focus-light-green:focus {
background-color: #5ab48a;
}
.bg-focus-lightest-green:focus {
background-color: #75d0a4;
}
.bg-focus-dark-green:focus {
background-color: #1e7f58;
}
.bg-focus-darkest-green:focus {
background-color: #006540;
}
.bg-focus-pink:focus {
background-color: #F012BE;
}
.bg-focus-light-pink:focus {
background-color: #ff57e8;
}
.bg-focus-lightest-pink:focus {
background-color: #ff81ff;
}
.bg-focus-dark-pink:focus {
background-color: #d100a3;
}
.bg-focus-darkest-pink:focus {
background-color: #b20088;
}
.bg-focus-purple:focus {
background-color: #980bc6;
}
.bg-focus-light-purple:focus {
background-color: #b536e2;
}
.bg-focus-lightest-purple:focus {
background-color: #d355ff;
}
.bg-focus-dark-purple:focus {
background-color: #7b00a9;
}
.bg-focus-darkest-purple:focus {
background-color: #5f008e;
}
.hover-black:hover {
color: #000;
}
.hover-near-black:hover {
color: #111;
}
.hover-dark-gray:hover {
color: #333;
}
.hover-mid-gray:hover {
color: #555;
}
.hover-gray:hover {
color: #777;
}
.hover-silver:hover {
color: #999;
}
.hover-light-silver:hover {
color: #aaa;
}
.hover-moon-gray:hover {
color: #ccc;
}
.hover-light-gray:hover {
color: #eee;
}
.hover-near-white:hover {
color: #f4f4f4;
}
.hover-white:hover {
color: #fff;
}
.hover-blue:hover {
color: #0074D9;
}
.hover-light-blue:hover {
color: #64a8ff;
}
.hover-lightest-blue:hover {
color: #a2dfff;
}
.hover-dark-blue:hover {
color: #0045a1;
}
.hover-darkest-blue:hover {
color: #002f86;
}
.hover-yellow:hover {
color: #fff93c;
}
.hover-light-yellow:hover {
color: #fffa60;
}
.hover-lightest-yellow:hover {
color: #fffca6;
}
.hover-dark-yellow:hover {
color: #e2c100;
}
.hover-darkest-yellow:hover {
color: #c4a600;
}
.hover-orange:hover {
color: #FF851B;
}
.hover-light-orange:hover {
color: #ffa942;
}
.hover-lightest-orange:hover {
color: #ffc55d;
}
.hover-dark-orange:hover {
color: #d05e00;
}
.hover-darkest-orange:hover {
color: #b14400;
}
.hover-red:hover {
color: #d82c2c;
}
.hover-light-red:hover {
color: #f94f44;
}
.hover-lightest-red:hover {
color: #ff6c5c;
}
.hover-dark-red:hover {
color: #bd001a;
}
.hover-darkest-red:hover {
color: #9d0003;
}
.hover-teal:hover {
color: #27bfa8;
}
.hover-light-teal:hover {
color: #4eddc5;
}
.hover-lightest-teal:hover {
color: #6ffae0;
}
.hover-dark-teal:hover {
color: #25a28f;
}
.hover-darkest-teal:hover {
color: #008876;
}
.hover-green:hover {
color: #3D9970;
}
.hover-light-green:hover {
color: #5ab48a;
}
.hover-lightest-green:hover {
color: #75d0a4;
}
.hover-dark-green:hover {
color: #1e7f58;
}
.hover-darkest-green:hover {
color: #006540;
}
.hover-pink:hover {
color: #F012BE;
}
.hover-light-pink:hover {
color: #ff57e8;
}
.hover-lightest-pink:hover {
color: #ff81ff;
}
.hover-dark-pink:hover {
color: #d100a3;
}
.hover-darkest-pink:hover {
color: #b20088;
}
.hover-purple:hover {
color: #980bc6;
}
.hover-light-purple:hover {
color: #b536e2;
}
.hover-lightest-purple:hover {
color: #d355ff;
}
.hover-dark-purple:hover {
color: #7b00a9;
}
.hover-darkest-purple:hover {
color: #5f008e;
}
.bg-hover-black:hover {
background-color: #000;
}
.bg-hover-near-black:hover {
background-color: #111;
}
.bg-hover-dark-gray:hover {
background-color: #333;
}
.bg-hover-mid-gray:hover {
background-color: #555;
}
.bg-hover-gray:hover {
background-color: #777;
}
.bg-hover-silver:hover {
background-color: #999;
}
.bg-hover-light-silver:hover {
background-color: #aaa;
}
.bg-hover-moon-gray:hover {
background-color: #ccc;
}
.bg-hover-light-gray:hover {
background-color: #eee;
}
.bg-hover-near-white:hover {
background-color: #f4f4f4;
}
.bg-hover-white:hover {
background-color: #fff;
}
.bg-hover-blue:hover {
background-color: #0074D9;
}
.bg-hover-light-blue:hover {
background-color: #64a8ff;
}
.bg-hover-lightest-blue:hover {
background-color: #a2dfff;
}
.bg-hover-dark-blue:hover {
background-color: #0045a1;
}
.bg-hover-darkest-blue:hover {
background-color: #002f86;
}
.bg-hover-yellow:hover {
background-color: #fff93c;
}
.bg-hover-light-yellow:hover {
background-color: #fffa60;
}
.bg-hover-lightest-yellow:hover {
background-color: #fffca6;
}
.bg-hover-dark-yellow:hover {
background-color: #e2c100;
}
.bg-hover-darkest-yellow:hover {
background-color: #c4a600;
}
.bg-hover-orange:hover {
background-color: #FF851B;
}
.bg-hover-light-orange:hover {
background-color: #ffa942;
}
.bg-hover-lightest-orange:hover {
background-color: #ffc55d;
}
.bg-hover-dark-orange:hover {
background-color: #d05e00;
}
.bg-hover-darkest-orange:hover {
background-color: #b14400;
}
.bg-hover-red:hover {
background-color: #d82c2c;
}
.bg-hover-light-red:hover {
background-color: #f94f44;
}
.bg-hover-lightest-red:hover {
background-color: #ff6c5c;
}
.bg-hover-dark-red:hover {
background-color: #bd001a;
}
.bg-hover-darkest-red:hover {
background-color: #9d0003;
}
.bg-hover-teal:hover {
background-color: #27bfa8;
}
.bg-hover-light-teal:hover {
background-color: #4eddc5;
}
.bg-hover-lightest-teal:hover {
background-color: #6ffae0;
}
.bg-hover-dark-teal:hover {
background-color: #25a28f;
}
.bg-hover-darkest-teal:hover {
background-color: #008876;
}
.bg-hover-green:hover {
background-color: #3D9970;
}
.bg-hover-light-green:hover {
background-color: #5ab48a;
}
.bg-hover-lightest-green:hover {
background-color: #75d0a4;
}
.bg-hover-dark-green:hover {
background-color: #1e7f58;
}
.bg-hover-darkest-green:hover {
background-color: #006540;
}
.bg-hover-pink:hover {
background-color: #F012BE;
}
.bg-hover-light-pink:hover {
background-color: #ff57e8;
}
.bg-hover-lightest-pink:hover {
background-color: #ff81ff;
}
.bg-hover-dark-pink:hover {
background-color: #d100a3;
}
.bg-hover-darkest-pink:hover {
background-color: #b20088;
}
.bg-hover-purple:hover {
background-color: #980bc6;
}
.bg-hover-light-purple:hover {
background-color: #b536e2;
}
.bg-hover-lightest-purple:hover {
background-color: #d355ff;
}
.bg-hover-dark-purple:hover {
background-color: #7b00a9;
}
.bg-hover-darkest-purple:hover {
background-color: #5f008e;
}
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover {
opacity: .6;
transition: opacity .15s ease-in;
}
.dim:active,
.dim:focus {
opacity: .8;
transition: opacity .15s ease-out;
}
/* SVG Fills */
.fill-black {
fill: #000;
}
.fill-near-black {
fill: #111;
}
.fill-dark-gray {
fill: #333;
}
.fill-mid-gray {
fill: #555;
}
.fill-gray {
fill: #777;
}
.fill-silver {
fill: #999;
}
.fill-light-silver {
fill: #aaa;
}
.fill-moon-gray {
fill: #ccc;
}
.fill-light-gray {
fill: #eee;
}
.fill-near-white {
fill: #f4f4f4;
}
.fill-white {
fill: #fff;
}
.fill-blue {
fill: #0074D9;
}
.fill-light-blue {
fill: #64a8ff;
}
.fill-lightest-blue {
fill: #a2dfff;
}
.fill-dark-blue {
fill: #0045a1;
}
.fill-darkest-blue {
fill: #002f86;
}
.fill-yellow {
fill: #fff93c;
}
.fill-light-yellow {
fill: #fffa60;
}
.fill-lightest-yellow {
fill: #fffca6;
}
.fill-dark-yellow {
fill: #e2c100;
}
.fill-darkest-yellow {
fill: #c4a600;
}
.fill-orange {
fill: #FF851B;
}
.fill-light-orange {
fill: #ffa942;
}
.fill-lightest-orange {
fill: #ffc55d;
}
.fill-dark-orange {
fill: #d05e00;
}
.fill-darkest-orange {
fill: #b14400;
}
.fill-red {
fill: #d82c2c;
}
.fill-light-red {
fill: #f94f44;
}
.fill-lightest-red {
fill: #ff6c5c;
}
.fill-dark-red {
fill: #bd001a;
}
.fill-darkest-red {
fill: #9d0003;
}
.fill-teal {
fill: #27bfa8;
}
.fill-light-teal {
fill: #4eddc5;
}
.fill-lightest-teal {
fill: #6ffae0;
}
.fill-dark-teal {
fill: #25a28f;
}
.fill-darkest-teal {
fill: #008876;
}
.fill-green {
fill: #3D9970;
}
.fill-light-green {
fill: #5ab48a;
}
.fill-lightest-green {
fill: #75d0a4;
}
.fill-dark-green {
fill: #1e7f58;
}
.fill-darkest-green {
fill: #006540;
}
.fill-pink {
fill: #F012BE;
}
.fill-light-pink {
fill: #ff57e8;
}
.fill-lightest-pink {
fill: #ff81ff;
}
.fill-dark-pink {
fill: #d100a3;
}
.fill-darkest-pink {
fill: #b20088;
}
.fill-purple {
fill: #980bc6;
}
.fill-light-purple {
fill: #b536e2;
}
.fill-lightest-purple {
fill: #d355ff;
}
.fill-dark-purple {
fill: #7b00a9;
}
.fill-darkest-purple {
fill: #5f008e;
}
/* SVG Strokes */
.sw-4 {
stroke-width: 4;
}
.stroke-black {
stroke: #000;
}
.stroke-near-black {
stroke: #111;
}
.stroke-dark-gray {
stroke: #333;
}
.stroke-mid-gray {
stroke: #555;
}
.stroke-gray {
stroke: #777;
}
.stroke-silver {
stroke: #999;
}
.stroke-light-silver {
stroke: #aaa;
}
.stroke-moon-gray {
stroke: #ccc;
}
.stroke-light-gray {
stroke: #eee;
}
.stroke-near-white {
stroke: #f4f4f4;
}
.stroke-white {
stroke: #fff;
}
.stroke-blue {
stroke: #0074D9;
}
.stroke-light-blue {
stroke: #64a8ff;
}
.stroke-lightest-blue {
stroke: #a2dfff;
}
.stroke-dark-blue {
stroke: #0045a1;
}
.stroke-darkest-blue {
stroke: #002f86;
}
.stroke-yellow {
stroke: #fff93c;
}
.stroke-light-yellow {
stroke: #fffa60;
}
.stroke-lightest-yellow {
stroke: #fffca6;
}
.stroke-dark-yellow {
stroke: #e2c100;
}
.stroke-darkest-yellow {
stroke: #c4a600;
}
.stroke-orange {
stroke: #FF851B;
}
.stroke-light-orange {
stroke: #ffa942;
}
.stroke-lightest-orange {
stroke: #ffc55d;
}
.stroke-dark-orange {
stroke: #d05e00;
}
.stroke-darkest-orange {
stroke: #b14400;
}
.stroke-red {
stroke: #d82c2c;
}
.stroke-light-red {
stroke: #f94f44;
}
.stroke-lightest-red {
stroke: #ff6c5c;
}
.stroke-dark-red {
stroke: #bd001a;
}
.stroke-darkest-red {
stroke: #9d0003;
}
.stroke-teal {
stroke: #27bfa8;
}
.stroke-light-teal {
stroke: #4eddc5;
}
.stroke-lightest-teal {
stroke: #6ffae0;
}
.stroke-dark-teal {
stroke: #25a28f;
}
.stroke-darkest-teal {
stroke: #008876;
}
.stroke-green {
stroke: #3D9970;
}
.stroke-light-green {
stroke: #5ab48a;
}
.stroke-lightest-green {
stroke: #75d0a4;
}
.stroke-dark-green {
stroke: #1e7f58;
}
.stroke-darkest-green {
stroke: #006540;
}
.stroke-pink {
stroke: #F012BE;
}
.stroke-light-pink {
stroke: #ff57e8;
}
.stroke-lightest-pink {
stroke: #ff81ff;
}
.stroke-dark-pink {
stroke: #d100a3;
}
.stroke-darkest-pink {
stroke: #b20088;
}
.stroke-purple {
stroke: #980bc6;
}
.stroke-light-purple {
stroke: #b536e2;
}
.stroke-lightest-purple {
stroke: #d355ff;
}
.stroke-dark-purple {
stroke: #7b00a9;
}
.stroke-darkest-purple {
stroke: #5f008e;
}
/*
SPACING
An eight step powers of two scale ranging from 0 to 16rem.
Legend:
p = padding
m = margin
a = all
h = horizontal
v = vertical
t = top
r = right
b = bottom
l = left
n = none
xs = extra small
s = small
m = medium
l = large
x = extra
xl = extra large
xxl = extra extra large
*/
.pan {
padding: 0;
}
.paxs {
padding: .25rem;
}
.pas {
padding: .5rem;
}
.pam {
padding: 1rem;
}
.pal {
padding: 2rem;
}
.pax {
padding: 4rem;
}
.paxl {
padding: 8rem;
}
.paxxl {
padding: 16rem;
}
.pln {
padding-left: 0;
}
.plxs {
padding-left: .25rem;
}
.pls {
padding-left: .5rem;
}
.plm {
padding-left: 1rem;
}
.pll {
padding-left: 2rem;
}
.plx {
padding-left: 4rem;
}
.plxl {
padding-left: 8rem;
}
.plxxl {
padding-left: 16rem;
}
.prn {
padding-right: 0;
}
.prxs {
padding-right: .25rem;
}
.prs {
padding-right: .5rem;
}
.prm {
padding-right: 1rem;
}
.prl {
padding-right: 2rem;
}
.prx {
padding-right: 4rem;
}
.prxl {
padding-right: 8rem;
}
.prxxl {
padding-right: 16rem;
}
.pbn {
padding-bottom: 0;
}
.pbxs {
padding-bottom: .25rem;
}
.pbs {
padding-bottom: .5rem;
}
.pbm {
padding-bottom: 1rem;
}
.pbl {
padding-bottom: 2rem;
}
.pbx {
padding-bottom: 4rem;
}
.pbxl {
padding-bottom: 8rem;
}
.pbxxl {
padding-bottom: 16rem;
}
.ptn {
padding-top: 0;
}
.ptxs {
padding-top: .25rem;
}
.pts {
padding-top: .5rem;
}
.ptm {
padding-top: 1rem;
}
.ptl {
padding-top: 2rem;
}
.ptx {
padding-top: 4rem;
}
.ptxl {
padding-top: 8rem;
}
.ptxxl {
padding-top: 16rem;
}
.pvn {
padding-top: 0;
padding-bottom: 0;
}
.pvxs {
padding-top: .25rem;
padding-bottom: .25rem;
}
.pvs {
padding-top: .5rem;
padding-bottom: .5rem;
}
.pvm {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pvl {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pvx {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pvxl {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pvxxl {
padding-top: 16rem;
padding-bottom: 16rem;
}
.phn {
padding-left: 0;
padding-right: 0;
}
.phxs {
padding-left: .25rem;
padding-right: .25rem;
}
.phs {
padding-left: .5rem;
padding-right: .5rem;
}
.phm {
padding-left: 1rem;
padding-right: 1rem;
}
.phl {
padding-left: 2rem;
padding-right: 2rem;
}
.phx {
padding-left: 4rem;
padding-right: 4rem;
}
.phxl {
padding-left: 8rem;
padding-right: 8rem;
}
.phxxl {
padding-left: 16rem;
padding-right: 16rem;
}
.man {
margin: 0;
}
.maxs {
margin: .25rem;
}
.mas {
margin: .5rem;
}
.mam {
margin: 1rem;
}
.mal {
margin: 2rem;
}
.max {
margin: 4rem;
}
.maxl {
margin: 8rem;
}
.maxxl {
margin: 16rem;
}
.mln {
margin-left: 0;
}
.mlxs {
margin-left: .25rem;
}
.mls {
margin-left: .5rem;
}
.mlm {
margin-left: 1rem;
}
.mll {
margin-left: 2rem;
}
.mlx {
margin-left: 4rem;
}
.mlxl {
margin-left: 8rem;
}
.mlxxl {
margin-left: 16rem;
}
.mrn {
margin-right: 0;
}
.mrxs {
margin-right: .25rem;
}
.mrs {
margin-right: .5rem;
}
.mrm {
margin-right: 1rem;
}
.mrl {
margin-right: 2rem;
}
.mrx {
margin-right: 4rem;
}
.mrxl {
margin-right: 8rem;
}
.mrxxl {
margin-right: 16rem;
}
.mbn {
margin-bottom: 0;
}
.mbxs {
margin-bottom: .25rem;
}
.mbs {
margin-bottom: .5rem;
}
.mbm {
margin-bottom: 1rem;
}
.mbl {
margin-bottom: 2rem;
}
.mbx {
margin-bottom: 4rem;
}
.mbxl {
margin-bottom: 8rem;
}
.mbxxl {
margin-bottom: 16rem;
}
.mtn {
margin-top: 0;
}
.mtxs {
margin-top: .25rem;
}
.mts {
margin-top: .5rem;
}
.mtm {
margin-top: 1rem;
}
.mtl {
margin-top: 2rem;
}
.mtx {
margin-top: 4rem;
}
.mtxl {
margin-top: 8rem;
}
.mtxxl {
margin-top: 16rem;
}
.mvn {
margin-top: 0;
margin-bottom: 0rem;
}
.mvxs {
margin-top: .25rem;
margin-bottom: .25rem;
}
.mvs {
margin-top: .5rem;
margin-bottom: .5rem;
}
.mvm {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mvl {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mvx {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mvxl {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mvxxl {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mhn {
margin-left: 0;
margin-right: 0;
}
.mhs {
margin-left: .5rem;
margin-right: .5rem;
}
.mhm {
margin-left: 1rem;
margin-right: 1rem;
}
.mhl {
margin-left: 2rem;
margin-right: 2rem;
}
.mhx {
margin-left: 4rem;
margin-right: 4rem;
}
.mhxl {
margin-left: 8rem;
margin-right: 8rem;
}
.mhxxl {
margin-left: 16rem;
margin-right: 16rem;
}
@media screen and (min-width: 42em) {
.pan-ns {
padding: 0;
}
.paxs-ns {
padding: .25rem;
}
.pas-ns {
padding: .5rem;
}
.pam-ns {
padding: 1rem;
}
.pal-ns {
padding: 2rem;
}
.pax-ns {
padding: 4rem;
}
.paxl-ns {
padding: 8rem;
}
.paxxl-ns {
padding: 16rem;
}
.pln-ns {
padding-left: 0;
}
.plxs-ns {
padding-left: .25rem;
}
.pls-ns {
padding-left: .5rem;
}
.plm-ns {
padding-left: 1rem;
}
.pll-ns {
padding-left: 2rem;
}
.plx-ns {
padding-left: 4rem;
}
.plxl-ns {
padding-left: 8rem;
}
.plxxl-ns {
padding-left: 16rem;
}
.prn-ns {
padding-right: 0;
}
.prxs-ns {
padding-right: .25rem;
}
.prs-ns {
padding-right: .5rem;
}
.prm-ns {
padding-right: 1rem;
}
.prl-ns {
padding-right: 2rem;
}
.prx-ns {
padding-right: 4rem;
}
.prxl-ns {
padding-right: 8rem;
}
.prxxl-ns {
padding-right: 16rem;
}
.pbn-ns {
padding-bottom: 0;
}
.pbxs-ns {
padding-bottom: .25rem;
}
.pbs-ns {
padding-bottom: .5rem;
}
.pbm-ns {
padding-bottom: 1rem;
}
.pbl-ns {
padding-bottom: 2rem;
}
.pbx-ns {
padding-bottom: 4rem;
}
.pbxl-ns {
padding-bottom: 8rem;
}
.pbxxl-ns {
padding-bottom: 16rem;
}
.ptn-ns {
padding-top: 0;
}
.ptxs-ns {
padding-top: .25rem;
}
.pts-ns {
padding-top: .5rem;
}
.ptm-ns {
padding-top: 1rem;
}
.ptl-ns {
padding-top: 2rem;
}
.ptx-ns {
padding-top: 4rem;
}
.ptxl-ns {
padding-top: 8rem;
}
.ptxxl-ns {
padding-top: 16rem;
}
.pvn-ns {
padding-top: 0;
padding-bottom: 0;
}
.pvxs-ns {
padding-top: .25rem;
padding-bottom: .25rem;
}
.pvs-ns {
padding-top: .5rem;
padding-bottom: .5rem;
}
.pvm-ns {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pvl-ns {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pvx-ns {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pvxl-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pvxxl-ns {
padding-top: 16rem;
padding-bottom: 16rem;
}
.phn-ns {
padding-left: 0;
padding-right: 0;
}
.pvxs-ns {
padding-left: .25rem;
padding-right: .25rem;
}
.phs-ns {
padding-left: .5rem;
padding-right: .5rem;
}
.phm-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.phl-ns {
padding-left: 2rem;
padding-right: 2rem;
}
.phx-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.phxl-ns {
padding-left: 8rem;
padding-right: 8rem;
}
.phxxl-ns {
padding-left: 16rem;
padding-right: 16rem;
}
.man-ns {
margin: 0;
}
.maxs-ns {
margin: .25rem;
}
.mas-ns {
margin: .5rem;
}
.mam-ns {
margin: 1rem;
}
.mal-ns {
margin: 2rem;
}
.max-ns {
margin: 4rem;
}
.maxl-ns {
margin: 8rem;
}
.maxxl-ns {
margin: 16rem;
}
.mln-ns {
margin-left: 0;
}
.mlxs-ns {
margin-left: .25rem;
}
.mls-ns {
margin-left: .5rem;
}
.mlm-ns {
margin-left: 1rem;
}
.mll-ns {
margin-left: 2rem;
}
.mlx-ns {
margin-left: 4rem;
}
.mlxl-ns {
margin-left: 8rem;
}
.mlxxl-ns {
margin-left: 16rem;
}
.mrn-ns {
margin-right: 0;
}
.mrxs-ns {
margin-right: .25rem;
}
.mrs-ns {
margin-right: .5rem;
}
.mrm-ns {
margin-right: 1rem;
}
.mrl-ns {
margin-right: 2rem;
}
.mrx-ns {
margin-right: 4rem;
}
.mrxl-ns {
margin-right: 8rem;
}
.mrxxl-ns {
margin-right: 16rem;
}
.mbn-ns {
margin-bottom: 0;
}
.mbxs-ns {
margin-bottom: .25rem;
}
.mbs-ns {
margin-bottom: .5rem;
}
.mbm-ns {
margin-bottom: 1rem;
}
.mbl-ns {
margin-bottom: 2rem;
}
.mbx-ns {
margin-bottom: 4rem;
}
.mbxl-ns {
margin-bottom: 8rem;
}
.mbxxl-ns {
margin-bottom: 16rem;
}
.mtn-ns {
margin-top: 0;
}
.mtxs-ns {
margin-top: .25rem;
}
.mts-ns {
margin-top: .5rem;
}
.mtm-ns {
margin-top: 1rem;
}
.mtl-ns {
margin-top: 2rem;
}
.mtx-ns {
margin-top: 4rem;
}
.mtxl-ns {
margin-top: 8rem;
}
.mtxxl-ns {
margin-top: 16rem;
}
.mvn-ns {
margin-top: 0;
margin-bottom: 0rem;
}
.mvxs-ns {
margin-top: .25rem;
margin-bottom: .25rem;
}
.mvs-ns {
margin-top: .5rem;
margin-bottom: .5rem;
}
.mvm-ns {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mvl-ns {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mvx-ns {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mvxl-ns {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mvxxl-ns {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mhn-ns {
margin-left: 0;
margin-right: 0;
}
.mhs-ns {
margin-left: .5rem;
margin-right: .5rem;
}
.mhm-ns {
margin-left: 1rem;
margin-right: 1rem;
}
.mhl-ns {
margin-left: 2rem;
margin-right: 2rem;
}
.mhx-ns {
margin-left: 4rem;
margin-right: 4rem;
}
.mhxl-ns {
margin-left: 8rem;
margin-right: 8rem;
}
.mhxxl-ns {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.pan-m {
padding: 0;
}
.paxs-m {
padding: .25rem;
}
.pas-m {
padding: .5rem;
}
.pam-m {
padding: 1rem;
}
.pal-m {
padding: 2rem;
}
.pax-m {
padding: 4rem;
}
.paxl-m {
padding: 8rem;
}
.paxxl-m {
padding: 16rem;
}
.pln-m {
padding-left: 0;
}
.plxs-m {
padding-left: .25rem;
}
.pls-m {
padding-left: .5rem;
}
.plm-m {
padding-left: 1rem;
}
.pll-m {
padding-left: 2rem;
}
.plx-m {
padding-left: 4rem;
}
.plxl-m {
padding-left: 8rem;
}
.plxxl-m {
padding-left: 16rem;
}
.prn-m {
padding-right: 0;
}
.prxs-m {
padding-right: .25rem;
}
.prs-m {
padding-right: .5rem;
}
.prm-m {
padding-right: 1rem;
}
.prl-m {
padding-right: 2rem;
}
.prx-m {
padding-right: 4rem;
}
.prxl-m {
padding-right: 8rem;
}
.prxxl-m {
padding-right: 16rem;
}
.pbn-m {
padding-bottom: 0;
}
.pbxs-m {
padding-bottom: .25rem;
}
.pbs-m {
padding-bottom: .5rem;
}
.pbm-m {
padding-bottom: 1rem;
}
.pbl-m {
padding-bottom: 2rem;
}
.pbx-m {
padding-bottom: 4rem;
}
.pbxl-m {
padding-bottom: 8rem;
}
.pbxxl-m {
padding-bottom: 16rem;
}
.ptn-m {
padding-top: 0;
}
.ptxs-m {
padding-top: .25rem;
}
.pts-m {
padding-top: .5rem;
}
.ptm-m {
padding-top: 1rem;
}
.ptl-m {
padding-top: 2rem;
}
.ptx-m {
padding-top: 4rem;
}
.ptxl-m {
padding-top: 8rem;
}
.ptxxl-m {
padding-top: 16rem;
}
.pvn-m {
padding-top: 0;
padding-bottom: 0;
}
.pvxs-m {
padding-top: .25rem;
padding-bottom: .25rem;
}
.pvs-m {
padding-top: .5rem;
padding-bottom: .5rem;
}
.pvm-m {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pvl-m {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pvx-m {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pvxl-m {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pvxxl-m {
padding-top: 16rem;
padding-bottom: 16rem;
}
.phn-m {
padding-left: 0;
padding-right: 0;
}
.pvxs-m {
padding-left: .25rem;
padding-right: .25rem;
}
.phs-m {
padding-left: .5rem;
padding-right: .5rem;
}
.phm-m {
padding-left: 1rem;
padding-right: 1rem;
}
.phl-m {
padding-left: 2rem;
padding-right: 2rem;
}
.phx-m {
padding-left: 4rem;
padding-right: 4rem;
}
.phxl-m {
padding-left: 8rem;
padding-right: 8rem;
}
.phxxl-m {
padding-left: 16rem;
padding-right: 16rem;
}
.man-m {
margin: 0;
}
.maxs-m {
margin: .25rem;
}
.mas-m {
margin: .5rem;
}
.mam-m {
margin: 1rem;
}
.mal-m {
margin: 2rem;
}
.max-m {
margin: 4rem;
}
.maxl-m {
margin: 8rem;
}
.maxxl-m {
margin: 16rem;
}
.mln-m {
margin-left: 0;
}
.mlxs-m {
margin-left: .25rem;
}
.mls-m {
margin-left: .5rem;
}
.mlm-m {
margin-left: 1rem;
}
.mll-m {
margin-left: 2rem;
}
.mlx-m {
margin-left: 4rem;
}
.mlxl-m {
margin-left: 8rem;
}
.mlxxl-m {
margin-left: 16rem;
}
.mrn-m {
margin-right: 0;
}
.mrxs-m {
margin-right: .25rem;
}
.mrs-m {
margin-right: .5rem;
}
.mrm-m {
margin-right: 1rem;
}
.mrl-m {
margin-right: 2rem;
}
.mrx-m {
margin-right: 4rem;
}
.mrxl-m {
margin-right: 8rem;
}
.mrxxl-m {
margin-right: 16rem;
}
.mbn-m {
margin-bottom: 0;
}
.mbxs-m {
margin-bottom: .25rem;
}
.mbs-m {
margin-bottom: .5rem;
}
.mbm-m {
margin-bottom: 1rem;
}
.mbl-m {
margin-bottom: 2rem;
}
.mbx-m {
margin-bottom: 4rem;
}
.mbxl-m {
margin-bottom: 8rem;
}
.mbxxl-m {
margin-bottom: 16rem;
}
.mtn-m {
margin-top: 0;
}
.mtxs-m {
margin-top: .25rem;
}
.mts-m {
margin-top: .5rem;
}
.mtm-m {
margin-top: 1rem;
}
.mtl-m {
margin-top: 2rem;
}
.mtx-m {
margin-top: 4rem;
}
.mtxl-m {
margin-top: 8rem;
}
.mtxxl-m {
margin-top: 16rem;
}
.mvn-m {
margin-top: 0;
margin-bottom: 0rem;
}
.mvxs-m {
margin-top: .25rem;
margin-bottom: .25rem;
}
.mvs-m {
margin-top: .5rem;
margin-bottom: .5rem;
}
.mvm-m {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mvl-m {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mvx-m {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mvxl-m {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mvxxl-m {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mhn-m {
margin-left: 0;
margin-right: 0;
}
.mhxs-m {
margin-left: .25rem;
margin-right: .25rem;
}
.mhs-m {
margin-left: .5rem;
margin-right: .5rem;
}
.mhm-m {
margin-left: 1rem;
margin-right: 1rem;
}
.mhl-m {
margin-left: 2rem;
margin-right: 2rem;
}
.mhx-m {
margin-left: 4rem;
margin-right: 4rem;
}
.mhxl-m {
margin-left: 8rem;
margin-right: 8rem;
}
.mhxxl-m {
margin-left: 16rem;
margin-right: 16rem;
}
}
@media screen and (min-width: 64em) {
.pan-l {
padding: 0;
}
.paxs-l {
padding: .25rem;
}
.pas-l {
padding: .5rem;
}
.pam-l {
padding: 1rem;
}
.pal-l {
padding: 2rem;
}
.pax-l {
padding: 4rem;
}
.paxl-l {
padding: 8rem;
}
.paxxl-l {
padding: 16rem;
}
.pln-l {
padding-left: 0;
}
.plxs-l {
padding-left: .25rem;
}
.pls-l {
padding-left: .5rem;
}
.plm-l {
padding-left: 1rem;
}
.pll-l {
padding-left: 2rem;
}
.plx-l {
padding-left: 4rem;
}
.plxl-l {
padding-left: 8rem;
}
.plxxl-l {
padding-left: 16rem;
}
.prn-l {
padding-right: 0;
}
.prxs-l {
padding-right: .25rem;
}
.prs-l {
padding-right: .5rem;
}
.prm-l {
padding-right: 1rem;
}
.prl-l {
padding-right: 2rem;
}
.prx-l {
padding-right: 4rem;
}
.prxl-l {
padding-right: 8rem;
}
.prxxl-l {
padding-right: 16rem;
}
.pbn-l {
padding-bottom: 0;
}
.pbxs-l {
padding-bottom: .25rem;
}
.pbs-l {
padding-bottom: .5rem;
}
.pbm-l {
padding-bottom: 1rem;
}
.pbl-l {
padding-bottom: 2rem;
}
.pbx-l {
padding-bottom: 4rem;
}
.pbxl-l {
padding-bottom: 8rem;
}
.pbxxl-l {
padding-bottom: 16rem;
}
.ptn-l {
padding-top: 0;
}
.ptxs-l {
padding-top: .25rem;
}
.pts-l {
padding-top: .5rem;
}
.ptm-l {
padding-top: 1rem;
}
.ptl-l {
padding-top: 2rem;
}
.ptx-l {
padding-top: 4rem;
}
.ptxl-l {
padding-top: 8rem;
}
.ptxxl-l {
padding-top: 16rem;
}
.pvn-l {
padding-top: 0;
padding-bottom: 0;
}
.pvxs-l {
padding-top: .25rem;
padding-bottom: .25rem;
}
.pvs-l {
padding-top: .5rem;
padding-bottom: .5rem;
}
.pvm-l {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pvl-l {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pvx-l {
padding-top: 4rem;
padding-bottom: 4rem;
}
.pvxl-l {
padding-top: 8rem;
padding-bottom: 8rem;
}
.pvxxl-l {
padding-top: 16rem;
padding-bottom: 16rem;
}
.phn-l {
padding-left: 0;
padding-right: 0;
}
.pvxs-l {
padding-left: .25rem;
padding-right: .25rem;
}
.phs-l {
padding-left: .5rem;
padding-right: .5rem;
}
.phm-l {
padding-left: 1rem;
padding-right: 1rem;
}
.phl-l {
padding-left: 2rem;
padding-right: 2rem;
}
.phx-l {
padding-left: 4rem;
padding-right: 4rem;
}
.phxl-l {
padding-left: 8rem;
padding-right: 8rem;
}
.phxxl-l {
padding-left: 16rem;
padding-right: 16rem;
}
.man-l {
margin: 0;
}
.maxs-l {
margin: .25rem;
}
.mas-l {
margin: .5rem;
}
.mam-l {
margin: 1rem;
}
.mal-l {
margin: 2rem;
}
.max-l {
margin: 4rem;
}
.maxl-l {
margin: 8rem;
}
.maxxl-l {
margin: 16rem;
}
.mln-l {
margin-left: 0;
}
.mlxs-l {
margin-left: .25rem;
}
.mls-l {
margin-left: .5rem;
}
.mlm-l {
margin-left: 1rem;
}
.mll-l {
margin-left: 2rem;
}
.mlx-l {
margin-left: 4rem;
}
.mlxl-l {
margin-left: 8rem;
}
.mlxxl-l {
margin-left: 16rem;
}
.mrn-l {
margin-right: 0;
}
.mrxs-l {
margin-right: .25rem;
}
.mrs-l {
margin-right: .5rem;
}
.mrm-l {
margin-right: 1rem;
}
.mrl-l {
margin-right: 2rem;
}
.mrx-l {
margin-right: 4rem;
}
.mrxl-l {
margin-right: 8rem;
}
.mrxxl-l {
margin-right: 16rem;
}
.mbn-l {
margin-bottom: 0;
}
.mbxs-l {
margin-bottom: .25rem;
}
.mbs-l {
margin-bottom: .5rem;
}
.mbm-l {
margin-bottom: 1rem;
}
.mbl-l {
margin-bottom: 2rem;
}
.mbx-l {
margin-bottom: 4rem;
}
.mbxl-l {
margin-bottom: 8rem;
}
.mbxxl-l {
margin-bottom: 16rem;
}
.mtn-l {
margin-top: 0;
}
.mtxs-l {
margin-top: .25rem;
}
.mts-l {
margin-top: .5rem;
}
.mtm-l {
margin-top: 1rem;
}
.mtl-l {
margin-top: 2rem;
}
.mtx-l {
margin-top: 4rem;
}
.mtxl-l {
margin-top: 8rem;
}
.mtxxl-l {
margin-top: 16rem;
}
.mvn-l {
margin-top: 0;
margin-bottom: 0rem;
}
.mvxs-l {
margin-top: .25rem;
margin-bottom: .25rem;
}
.mvs-l {
margin-top: .5rem;
margin-bottom: .5rem;
}
.mvm-l {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mvl-l {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mvx-l {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mvxl-l {
margin-top: 8rem;
margin-bottom: 8rem;
}
.mvxxl-l {
margin-top: 16rem;
margin-bottom: 16rem;
}
.mhn-l {
margin-left: 0;
margin-right: 0;
}
.mhxs-l {
margin-left: .25rem;
margin-right: .25rem;
}
.mhs-l {
margin-left: .5rem;
margin-right: .5rem;
}
.mhm-l {
margin-left: 1rem;
margin-right: 1rem;
}
.mhl-l {
margin-left: 2rem;
margin-right: 2rem;
}
.mhx-l {
margin-left: 4rem;
margin-right: 4rem;
}
.mhxl-l {
margin-left: 8rem;
margin-right: 8rem;
}
.mhxxl-l {
margin-left: 16rem;
margin-right: 16rem;
}
}
/*
TEXT DECORATION
*/
.under {
text-decoration: underline;
}
.none {
text-decoration: none;
}
@media screen and (min-width: 42em) {
.under-ns {
text-decoration: underline;
}
.none-ns {
text-decoration: none;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.under-m {
text-decoration: underline;
}
.none-m {
text-decoration: none;
}
}
@media screen and (min-width: 64em) {
.under-l {
text-decoration: underline;
}
.none-l {
text-decoration: none;
}
}
/*
Text Align
*/
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
@media screen and (min-width: 42em) {
.tl-ns {
text-align: left;
}
.tr-ns {
text-align: right;
}
.tc-ns {
text-align: center;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.tl-m {
text-align: left;
}
.tr-m {
text-align: right;
}
.tc-m {
text-align: center;
}
}
@media screen and (min-width: 64em) {
.tl-l {
text-align: left;
}
.tr-l {
text-align: right;
}
.tc-l {
text-align: center;
}
}
/*
TEXT TRANSFORM
*/
.ttc {
text-transform: capitalize;
}
.ttl {
text-transform: lowercase;
}
.ttn {
text-transform: none;
}
.ttu,
.caps {
text-transform: uppercase;
letter-spacing: .2em;
}
@media screen and (min-width: 42em) {
.ttc-ns {
text-transform: capitalize;
}
.ttl-ns {
text-transform: lowercase;
}
.ttn-ns {
text-transform: none;
}
.ttu-ns,
.caps-ns {
text-transform: uppercase;
letter-spacing: .2em;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.ttc-m {
text-transform: capitalize;
}
.ttl-m {
text-transform: lowercase;
}
.ttn-m {
text-transform: none;
}
.ttu-m,
.caps-m {
text-transform: uppercase;
letter-spacing: .2em;
}
}
@media screen and (min-width: 64em) {
.ttc-l {
text-transform: capitalize;
}
.ttl-l {
text-transform: lowercase;
}
.ttn-l {
text-transform: none;
}
.ttu-l,
.caps-l {
text-transform: uppercase;
letter-spacing: .2em;
}
}
/* ==========================================================================
TYPE SCALE
========================================================================== */
.mega {
font-size: 4rem;
}
.f1 {
font-size: 3rem;
}
.f2 {
font-size: 2rem;
}
.f3 {
font-size: 1.5rem;
}
.f4 {
font-size: 1rem;
}
.f5,
.small {
font-size: .85rem;
}
@media screen and (min-width: 42em) {
.mega-ns {
font-size: 4rem;
}
.f1-ns {
font-size: 3rem;
}
.f2-ns {
font-size: 2rem;
}
.f3-ns {
font-size: 1.5em;
}
.f4-ns {
font-size: 1rem;
}
.f5-ns {
font-size: .85rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.mega-m {
font-size: 4rem;
}
.f1-m {
font-size: 3rem;
}
.f2-m {
font-size: 2rem;
}
.f3-m {
font-size: 1.5rem;
}
.f4-m {
font-size: 1rem;
}
.f5-m {
font-size: .85rem;
}
}
@media screen and (min-width: 64em) {
.mega-l {
font-size: 4rem;
}
.f1-l {
font-size: 3rem;
}
.f2-l {
font-size: 2rem;
}
.f3-l {
font-size: 1.5rem;
}
.f4-l {
font-size: 1rem;
}
.f5-l {
font-size: .85rem;
}
}
/*
UTILITIES
*/
.aspect-ratio {
height: 0;
padding-top: 56.25%;
position: relative;
}
.aspect-ratio--object {
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 100;
}
.overflow-container {
overflow-y: scroll;
}
/*
VISIBILITY
*/
/*
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);
}
@media screen and (min-width: 42em) {
.clip-ns {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.clip-m {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}
@media screen and (min-width: 64em) {
.clip-l {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
}
/*
WHITE SPACE
*/
.ws-norm {
white-space: normal;
}
.ws-nowrap {
white-space: nowrap;
}
.ws-pre {
white-space: pre;
}
@media screen and (min-width: 42em) {
.ws-norm-ns {
white-space: normal;
}
.ws-nowrap-ns {
white-space: nowrap;
}
.ws-pre-ns {
white-space: pre;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.ws-norm-m {
white-space: normal;
}
.ws-nowrap-m {
white-space: nowrap;
}
.ws-pre-m {
white-space: pre;
}
}
@media screen and (min-width: 64em) {
.ws-norm-l {
white-space: normal;
}
.ws-nowrap-l {
white-space: nowrap;
}
.ws-pre-l {
white-space: pre;
}
}
/*
STYLES
Add custom styles here.
*/
/*
VERTICAL ALIGN
*/
.v-base {
vertical-align: baseline;
}
.v-sub {
vertical-align: sub;
}
.v-sup {
vertical-align: super;
}
.v-txt-top {
vertical-align: text-top;
}
.v-txt-btm {
vertical-align: text-bottom;
}
.v-mid {
vertical-align: middle;
}
.v-top {
vertical-align: top;
}
.v-btm {
vertical-align: bottom;
}
@media screen and (min-width: 42em) {
.v-base-ns {
vertical-align: baseline;
}
.v-sub-ns {
vertical-align: sub;
}
.v-sup-ns {
vertical-align: super;
}
.v-txt-top-ns {
vertical-align: text-top;
}
.v-txt-btm-ns {
vertical-align: text-bottom;
}
.v-mid-ns {
vertical-align: middle;
}
.v-top-ns {
vertical-align: top;
}
.v-btm-ns {
vertical-align: bottom;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.v-base-m {
vertical-align: baseline;
}
.v-sub-m {
vertical-align: sub;
}
.v-sup-m {
vertical-align: super;
}
.v-txt-top-m {
vertical-align: text-top;
}
.v-txt-btm-m {
vertical-align: text-bottom;
}
.v-mid-m {
vertical-align: middle;
}
.v-top-m {
vertical-align: top;
}
.v-btm-m {
vertical-align: bottom;
}
}
@media screen and (min-width: 64em) {
.v-base-l {
vertical-align: baseline;
}
.v-sub-l {
vertical-align: sub;
}
.v-sup-l {
vertical-align: super;
}
.v-txt-top-l {
vertical-align: text-top;
}
.v-txt-btm-l {
vertical-align: text-bottom;
}
.v-mid-l {
vertical-align: middle;
}
.v-top-l {
vertical-align: top;
}
.v-btm-l {
vertical-align: bottom;
}
}