*/
/* 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; } }
/*
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; }
.dbf {
display: block;
width: 100%; }
/*
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; }
.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; }
.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; }
.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; }
.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, 'avenir next', helvetica, 'helvetica neue', arial, 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
*/
.fwn {
font-weight: normal; }
.b {
font-weight: bold; }
.fw1 {
font-weight: 100; }
.fw4 {
font-weight: 400; }
.fw9 {
font-weight: 900; }
@media screen and (min-width: 48em) {
.fwn-ns {
font-weight: normal; }
.b-ns {
font-weight: bold; }
.fw1-ns {
font-weight: 100; }
.fw4-ns {
font-weight: 400; }
.fw9-ns {
font-weight: 900; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.fwn-m {
font-weight: normal; }
.b-m {
font-weight: bold; }
.fw1-m {
font-weight: 100; }
.fw4-m {
font-weight: 400; }
.fw9-m {
font-weight: 900; } }
@media screen and (min-width: 64em) {
.fwn-l {
font-weight: normal; }
.b-l {
font-weight: bold; }
.fw1-l {
font-weight: 100; }
.fw4-l {
font-weight: 400; }
.fw9-l {
font-weight: 900; } }
/* Forms */
.input {
outline: 0;
border: 1px solid #999; }
@media screen and (min-width: 48em) { }
@media screen and (min-width: 48em) and (max-width: 64em) { }
@media screen and (min-width: 64em) { }
/*
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: all 0.4s;
transition: all 0.4s; }
.link:link {
color: #30BBDB; }
.link:visited {
color: #2D243B; }
.link:hover {
color: #004EAB; }
.link:active {
color: #C4E3E0; }
/*
LISTS
*/
.list {
list-style-type: none; }
.list--h {
list-style-type: none; }
.list--h .list--h-item {
display: inline-block; }
@media screen and (min-width: 48em) {
.list--h-ns {
list-style-type: none; }
.list--h-ns .list--h-item-ns {
display: inline-block; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.list-m {
list-style: none; }
.list--h-m {
list-style-type: none; }
.list--h-m .list--h-item {
display: inline-block; } }
@media screen and (min-width: 64em) {
.list-l {
list-style-type: none; }
.list--h-l {
list-style-type: none; }
.list--h-l .list--h-item {
display: inline-block; } }
/*
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; } }
/*
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: 0 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: 0 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: 0 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: 0 auto; } }
/*
SKINS
*/
/* Grays */
.black {
color: #111; }
.dark-gray {
color: #333; }
.mid-gray {
color: #666; }
.gray {
color: #888; }
.silver {
color: #999; }
.light-silver {
color: #aaa; }
.light-gray {
color: #ccc; }
.near-white {
color: #eee; }
.white {
color: #fff !important; }
/* Text colors */
.aqua {
color: #7FDBFF; }
.blue {
color: #0074D9; }
.navy {
color: #001F3F; }
.teal {
color: #39CCCC; }
.green {
color: #2ECC40; }
.olive {
color: #3D9970; }
.lime {
color: #01FF70; }
.yellow {
color: #FFDC00; }
.orange {
color: #FF851B; }
.red {
color: #FF4136; }
.fuchsia {
color: #F012BE; }
.purple {
color: #B10DC9; }
.maroon {
color: #85144B; }
/* Background colors */
.bg-black {
background-color: #111; }
.bg-dark-gray {
background-color: #333; }
.bg-mid-gray {
background-color: #666; }
.bg-gray {
background-color: #888; }
.bg-silver {
background-color: #999; }
.bg-light-silver {
background-color: #aaa; }
.bg-light-gray {
background-color: #ccc; }
.bg-near-white {
background-color: #eee; }
.bg-white {
background-color: #fff !important; }
.bg-aqua {
background-color: #7FDBFF; }
.bg-blue {
background-color: #0074D9; }
.bg-navy {
background-color: #001F3F; }
.bg-teal {
background-color: #39CCCC; }
.bg-green {
background-color: #2ECC40; }
.bg-olive {
background-color: #3D9970; }
.bg-lime {
background-color: #01FF70; }
.bg-yellow {
background-color: #FFDC00; }
.bg-orange {
background-color: #FF851B; }
.bg-red {
background-color: #FF4136; }
.bg-fuchsia {
background-color: #F012BE; }
.bg-purple {
background-color: #B10DC9; }
.bg-maroon {
background-color: #85144B; }
/*
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; }
.pvxs {
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
========================================================================== */
.f1 {
font-size: 2rem; }
.f2 {
font-size: 1.5rem; }
.f3 {
font-size: 1.2rem; }
.f4 {
font-size: 1.2rem; }
.f5 {
font-size: 1rem; }
.f6, .small {
font-size: 0.85rem; }
@media screen and (min-width: 48em) {
.mega-ns {
font-size: 3rem; }
.f1-ns {
font-size: 2rem; }
.f2-ns {
font-size: 1.5rem; }
.f3-ns {
font-size: 1.2rem; }
.f4-ns {
font-size: 1.2rem; }
.f5-ns {
font-size: 1rem; }
.f6-ns {
font-size: 0.85rem; } }
@media screen and (min-width: 48em) and (max-width: 64em) {
.mega-m {
font-size: 3rem; }
.f1-m {
font-size: 2rem; }
.f2-m {
font-size: 1.5rem; }
.f3-m {
font-size: 1.2rem; }
.f4-m {
font-size: 1.2rem; }
.f5-m {
font-size: 1rem; }
.f6-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: 1.2rem; }
.f5-l {
font-size: 1rem; }
.f6-l {
font-size: 1rem; } }
/*
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.
*
*
*
*
![]()
*
*
*
*
*
*