*/
/* 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; }
/* 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
- Mobile First
- Breakpoint: not-small
- Breakpoint: medium
- Breakpoint: 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%; }
.dtc {
display: table-cell; }
.dtcol {
display: table-column; }
.dtcolg {
display: table-column-group; }
@media screen and (min-width: 48em) {
.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%; }
.dtc-ns {
display: table-cell; }
.dtcol-ns {
display: table-column; }
.dtcolg-ns {
display: table-column-group; } }
@media screen and (min-width: 48em) 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%; }
.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%; }
.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.
Legend
f = float
l = left
r = right
n = none
*/
.fl {
float: left;
display: inline; }
.fr {
float: right;
display: inline; }
.fn {
float: none; }
@media screen and (min-width: 48em) {
.fl-ns {
float: left;
display: inline; }
.fr-ns {
float: right;
display: inline; }
.fn-ns {
float: none; } }
@media screen and (min-width: 48em) 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
*/
body, .sans-serif {
font-family: 'avenir next', avenir, helvetica, 'helvetica neue', arial, sans-serif; }
.open-sans {
font-family: "Open sans", sans-serif; }
.serif {
font-family: "Calisto MT", georgia, serif; }
.code, code {
font-family: Consolas, monaco, monospace; }
.serif-bodini {
font-family: "Bodoni 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; }
/*
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: 48em) {
.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: 48em) 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 screen and (min-width: 48em) { }
@media screen and (min-width: 48em) 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: 48em) {
.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: 48em) 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: 0.16em; }
.tracked-tight {
letter-spacing: -0.1em; }
.mega-tracked {
letter-spacing: 0.3em; }
@media screen and (min-width: 48em) {
.tracked-ns {
letter-spacing: 0.16em; }
.tracked-tight-ns {
letter-spacing: -0.1em; }
.mega-tracked-ns {
letter-spacing: 0.3em; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.tracked-m {
letter-spacing: 0.16em; }
.tracked-tight-m {
letter-spacing: -0.1em; }
.mega-tracked-m {
letter-spacing: 0.3em; } }
@media screen and (min-width: 64em) {
.tracked-l {
letter-spacing: 0.16em; }
.tracked-tight-l {
letter-spacing: -0.1em; }
.mega-tracked-l {
letter-spacing: 0.3em; } }
/*
LINE HEIGHT
*/
.lh {
line-height: 1; }
.lh-title {
line-height: 1.3; }
.lh-copy {
line-height: 1.6; }
@media screen and (min-width: 48em) {
.lh-ns {
line-height: 1; }
.lh-title-ns {
line-height: 1.3; }
.lh-copy-ns {
line-height: 1.6; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.lh-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-l {
line-height: 1; }
.lh-title-l {
line-height: 1.3; }
.lh-copy-l {
line-height: 1.6; } }
/*
LINKS
*/
.link {
text-decoration: none;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in; }
.link:link, .link:visited {
color: #2D243B;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in; }
.link:hover {
color: #999999;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in; }
.link:active {
color: #C4E3E0;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in; }
.link:focus {
color: #2D243B;
-webkit-transition: color 0.15s ease-in;
transition: color 0.15s ease-in; }
.underline {
text-decoration: underline; }
.underline-hover:hover {
text-decoration: underline; }
/*
LISTS
*/
.list {
list-style-type: none; }
@media screen and (min-width: 48em) {
.list-ns {
list-style-type: none; } }
@media screen and (min-width: 48em) 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: 48em) {
.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: 48em) 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
*/
/* Width Scale */
.wi1 {
width: 1rem; }
.wi2 {
width: 2rem; }
.wi3 {
width: 4rem; }
.wi4 {
width: 8rem; }
.wi5 {
width: 16rem; }
.wi-10 {
width: 10%; }
.wi-20 {
width: 20%; }
.wi-25 {
width: 25%; }
.wi-40 {
width: 40%; }
.wi-50 {
width: 50%; }
.wi-60 {
width: 60%; }
.wi-75 {
width: 75%; }
.wi-80 {
width: 80%; }
.wi-100 {
width: 100%; }
.wi-at {
width: auto; }
@media screen and (min-width: 48em) {
.wi1-ns {
width: 1rem; }
.wi2-ns {
width: 2rem; }
.wi3-ns {
width: 4rem; }
.wi4-ns {
width: 8rem; }
.wi5-ns {
width: 16rem; }
.wi-10-ns {
width: 10%; }
.wi-20-ns {
width: 20%; }
.wi-25-ns {
width: 25%; }
.wi-40-ns {
width: 40%; }
.wi-50-ns {
width: 50%; }
.wi-60-ns {
width: 60%; }
.wi-75-ns {
width: 75%; }
.wi-80-ns {
width: 80%; }
.wi-100-ns {
width: 100%; }
.wi-at-ns {
width: auto; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.wi1-m {
width: 1rem; }
.wi2-m {
width: 2rem; }
.wi3-m {
width: 4rem; }
.wi4-m {
width: 8rem; }
.wi5-m {
width: 16rem; }
.wi-10-m {
width: 10%; }
.wi-20-m {
width: 20%; }
.wi-25-m {
width: 25%; }
.wi-40-m {
width: 40%; }
.wi-50-m {
width: 50%; }
.wi-60-m {
width: 60%; }
.wi-75-m {
width: 75%; }
.wi-80-m {
width: 80%; }
.wi-100-m {
width: 100%; }
.wi-at-m {
width: auto; } }
@media screen and (min-width: 64em) {
.wi1-l {
width: 1rem; }
.wi2-l {
width: 2rem; }
.wi3-l {
width: 4rem; }
.wi4-l {
width: 8rem; }
.wi5-l {
width: 16rem; }
.wi-10-l {
width: 10%; }
.wi-20-l {
width: 20%; }
.wi-25-l {
width: 25%; }
.wi-40-l {
width: 40%; }
.wi-50-l {
width: 50%; }
.wi-60-l {
width: 60%; }
.wi-75-l {
width: 75%; }
.wi-80-l {
width: 80%; }
.wi-100-l {
width: 100%; }
.wi-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: 48em) {
.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: 48em) 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: 48em) {
.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: 48em) 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 {
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; }
.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; }
.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;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out; }
.dim:hover {
opacity: 0.6;
-webkit-transition: opacity 0.15s ease-in;
transition: opacity 0.15s ease-in; }
.dim:active, .dim:focus {
opacity: 0.8;
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out; }
.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; }
.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: 0.25rem; }
.pas {
padding: 0.5rem; }
.pam {
padding: 1rem; }
.pal {
padding: 2rem; }
.pax {
padding: 4rem; }
.paxl {
padding: 8rem; }
.paxxl {
padding: 16rem; }
.pln {
padding-left: 0; }
.plxs {
padding-left: 0.25rem; }
.pls {
padding-left: 0.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: 0.25rem; }
.prs {
padding-right: 0.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: 0.25rem; }
.pbs {
padding-bottom: 0.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: 0.25rem; }
.pts {
padding-top: 0.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: 0.25rem;
padding-bottom: 0.25rem; }
.pvs {
padding-top: 0.5rem;
padding-bottom: 0.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: 0.25rem;
padding-right: 0.25rem; }
.phs {
padding-left: 0.5rem;
padding-right: 0.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: 0.25rem; }
.mas {
margin: 0.5rem; }
.mam {
margin: 1rem; }
.mal {
margin: 2rem; }
.max {
margin: 4rem; }
.maxl {
margin: 8rem; }
.maxxl {
margin: 16rem; }
.mln {
margin-left: 0; }
.mlxs {
margin-left: 0.25rem; }
.mls {
margin-left: 0.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: 0.25rem; }
.mrs {
margin-right: 0.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: 0.25rem; }
.mbs {
margin-bottom: 0.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: 0.25rem; }
.mts {
margin-top: 0.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: 0.25rem;
margin-bottom: 0.25rem; }
.mvs {
margin-top: 0.5rem;
margin-bottom: 0.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: 0.5rem;
margin-right: 0.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: 48em) {
.pan-ns {
padding: 0; }
.paxs-ns {
padding: 0.25rem; }
.pas-ns {
padding: 0.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: 0.25rem; }
.pls-ns {
padding-left: 0.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: 0.25rem; }
.prs-ns {
padding-right: 0.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: 0.25rem; }
.pbs-ns {
padding-bottom: 0.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: 0.25rem; }
.pts-ns {
padding-top: 0.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: 0.25rem;
padding-bottom: 0.25rem; }
.pvs-ns {
padding-top: 0.5rem;
padding-bottom: 0.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: 0.25rem;
padding-right: 0.25rem; }
.phs-ns {
padding-left: 0.5rem;
padding-right: 0.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: 0.25rem; }
.mas-ns {
margin: 0.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: 0.25rem; }
.mls-ns {
margin-left: 0.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: 0.25rem; }
.mrs-ns {
margin-right: 0.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: 0.25rem; }
.mbs-ns {
margin-bottom: 0.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: 0.25rem; }
.mts-ns {
margin-top: 0.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: 0.25rem;
margin-bottom: 0.25rem; }
.mvs-ns {
margin-top: 0.5rem;
margin-bottom: 0.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: 0.5rem;
margin-right: 0.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: 48em) and (max-width: 64em) {
.pan-m {
padding: 0; }
.paxs-m {
padding: 0.25rem; }
.pas-m {
padding: 0.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: 0.25rem; }
.pls-m {
padding-left: 0.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: 0.25rem; }
.prs-m {
padding-right: 0.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: 0.25rem; }
.pbs-m {
padding-bottom: 0.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: 0.25rem; }
.pts-m {
padding-top: 0.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: 0.25rem;
padding-bottom: 0.25rem; }
.pvs-m {
padding-top: 0.5rem;
padding-bottom: 0.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: 0.25rem;
padding-right: 0.25rem; }
.phs-m {
padding-left: 0.5rem;
padding-right: 0.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: 0.25rem; }
.mas-m {
margin: 0.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: 0.25rem; }
.mls-m {
margin-left: 0.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: 0.25rem; }
.mrs-m {
margin-right: 0.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: 0.25rem; }
.mbs-m {
margin-bottom: 0.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: 0.25rem; }
.mts-m {
margin-top: 0.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: 0.25rem;
margin-bottom: 0.25rem; }
.mvs-m {
margin-top: 0.5rem;
margin-bottom: 0.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: 0.25rem;
margin-right: 0.25rem; }
.mhs-m {
margin-left: 0.5rem;
margin-right: 0.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 {
margin-left: 8rem;
margin-right: 8rem; }
.mhxxl {
margin-left: 16rem;
margin-right: 16rem; } }
@media screen and (min-width: 64em) {
.pan-l {
padding: 0; }
.paxs-l {
padding: 0.25rem; }
.pas-l {
padding: 0.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: 0.25rem; }
.pls-l {
padding-left: 0.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: 0.25rem; }
.prs-l {
padding-right: 0.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: 0.25rem; }
.pbs-l {
padding-bottom: 0.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: 0.25rem; }
.pts-l {
padding-top: 0.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: 0.25rem;
padding-bottom: 0.25rem; }
.pvs-l {
padding-top: 0.5rem;
padding-bottom: 0.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: 0.25rem;
padding-right: 0.25rem; }
.phs-l {
padding-left: 0.5rem;
padding-right: 0.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: 0.25rem; }
.mas-l {
margin: 0.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: 0.25rem; }
.mls-l {
margin-left: 0.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: 0.25rem; }
.mrs-l {
margin-right: 0.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: 0.25rem; }
.mbs-l {
margin-bottom: 0.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: 0.25rem; }
.mts-l {
margin-top: 0.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: 0.25rem;
margin-bottom: 0.25rem; }
.mvs-l {
margin-top: 0.5rem;
margin-bottom: 0.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: 0.25rem;
margin-right: 0.25rem; }
.mhs-l {
margin-left: 0.5rem;
margin-right: 0.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: 48em) {
.under-ns {
text-decoration: underline; }
.none-ns {
text-decoration: none; } }
@media screen and (min-width: 48em) 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: 48em) {
.tl-ns {
text-align: left; }
.tr-ns {
text-align: right; }
.tc-ns {
text-align: center; } }
@media screen and (min-width: 48em) 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; }
.ttu {
text-transform: uppercase;
letter-spacing: 0.2em; }
@media screen and (min-width: 48em) {
.ttc-ns {
text-transform: capitalize; }
.ttu-ns {
text-transform: uppercase;
letter-spacing: 0.2em; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.ttc-m {
text-transform: capitalize; }
.ttu-m {
text-transform: uppercase;
letter-spacing: 0.2em; } }
@media screen and (min-width: 64em) {
.ttc-l {
text-transform: capitalize; }
.ttu-l {
text-transform: uppercase;
letter-spacing: 0.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: 0.85rem; }
@media screen and (min-width: 48em) {
.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: 0.85rem; } }
@media screen and (min-width: 48em) 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: 0.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: 0.85rem; } }
/*
UTILITIES
*/
/*
* The Media Object
* Built by @stubornella
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*
*
*/
/*
* The Flag Object
* Built by @csswizzrdry
* http://csswizardry.com/2013/05/the-flag-object/
*
*
* Use to vertically center text against an image.
*
*
*
*
![]()
*
*
*
*
*
*