mirror of
https://github.com/crowdstart/crowdstart.com.git
synced 2026-10-30 19:26:18 +00:00
10419 lines
117 KiB
CSS
10419 lines
117 KiB
CSS
/*
|
|
|
|
HANZO
|
|
|
|
*/
|
|
|
|
/* Variables */
|
|
|
|
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
|
|
|
|
/* ==========================================================================
|
|
HTML5 display definitions
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Correct `block` display not defined in IE 8/9.
|
|
*/
|
|
|
|
article,
|
|
aside,
|
|
details,
|
|
figcaption,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
main,
|
|
nav,
|
|
section,
|
|
summary {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* Correct `inline-block` display not defined in IE 8/9.
|
|
*/
|
|
|
|
audio,
|
|
canvas,
|
|
video {
|
|
display: inline-block;
|
|
}
|
|
|
|
/**
|
|
* Prevent modern browsers from displaying `audio` without controls.
|
|
* Remove excess height in iOS 5 devices.
|
|
*/
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
/**
|
|
* Address `[hidden]` styling not present in IE 8/9.
|
|
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
|
*/
|
|
|
|
[hidden],
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Base
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Set default font family to sans-serif.
|
|
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
|
* user zoom.
|
|
*/
|
|
|
|
html {
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
/* 1 */
|
|
-ms-text-size-adjust: 100%;
|
|
/* 2 */
|
|
-webkit-text-size-adjust: 100%;
|
|
/* 2 */
|
|
}
|
|
|
|
/**
|
|
* Remove default margin.
|
|
*/
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Links
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the gray background color from active links in IE 10.
|
|
*/
|
|
|
|
a {
|
|
background: transparent;
|
|
}
|
|
|
|
/**
|
|
* Address `outline` inconsistency between Chrome and other browsers.
|
|
*/
|
|
|
|
a:focus {
|
|
outline: thin dotted;
|
|
}
|
|
|
|
/**
|
|
* Improve readability when focused and also mouse hovered in all browsers.
|
|
*/
|
|
|
|
a:active,
|
|
a:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Typography
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address variable `h1` font-size and margin within `section` and `article`
|
|
* contexts in Firefox 4+, Safari 5, and Chrome.
|
|
*/
|
|
|
|
h1 {
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
|
*/
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
}
|
|
|
|
/**
|
|
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
|
*/
|
|
|
|
b,
|
|
strong {
|
|
font-weight: 400;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in Safari 5 and Chrome.
|
|
*/
|
|
|
|
dfn {
|
|
font-style: italic;
|
|
}
|
|
|
|
/**
|
|
* Address differences between Firefox and other browsers.
|
|
*/
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
|
|
/**
|
|
* Address styling not present in IE 8/9.
|
|
*/
|
|
|
|
mark {
|
|
background: #ff0;
|
|
color: #333;
|
|
}
|
|
|
|
/**
|
|
* Correct font family set oddly in Safari 5 and Chrome.
|
|
*/
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: monospace, serif;
|
|
font-size: 1em;
|
|
}
|
|
|
|
/**
|
|
* Improve readability of pre-formatted text in all browsers.
|
|
*/
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/**
|
|
* Set consistent quote types.
|
|
*/
|
|
|
|
q {
|
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
|
}
|
|
|
|
/**
|
|
* Address inconsistent and variable font size in all browsers.
|
|
*/
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/**
|
|
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
*/
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Embedded content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove border when inside `a` element in IE 8/9.
|
|
*/
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
/**
|
|
* Correct overflow displayed oddly in IE 9.
|
|
*/
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Figures
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Address margin not present in IE 8/9 and Safari 5.
|
|
*/
|
|
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Forms
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Define consistent border, margin, and padding.
|
|
*/
|
|
|
|
fieldset {
|
|
border: 1px solid #c0c0c0;
|
|
margin: 0 2px;
|
|
padding: 0.35em 0.625em 0.75em;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct `color` not being inherited in IE 8/9.
|
|
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
|
*/
|
|
|
|
legend {
|
|
border: 0;
|
|
/* 1 */
|
|
padding: 0;
|
|
/* 2 */
|
|
}
|
|
|
|
/**
|
|
* 1. Correct font family not being inherited in all browsers.
|
|
* 2. Correct font size not being inherited in all browsers.
|
|
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
|
*/
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
/* 1 */
|
|
font-size: 100%;
|
|
/* 2 */
|
|
margin: 0;
|
|
/* 3 */
|
|
}
|
|
|
|
/**
|
|
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
|
* the UA stylesheet.
|
|
*/
|
|
|
|
button,
|
|
input {
|
|
line-height: normal;
|
|
}
|
|
|
|
/**
|
|
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
* All other form control elements do not inherit `text-transform` values.
|
|
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
|
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
|
*/
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
/**
|
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
* and `video` controls.
|
|
* 2. Correct inability to style clickable `input` types in iOS.
|
|
* 3. Improve usability and consistency of cursor style between image-type
|
|
* `input` and others.
|
|
*/
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
-webkit-appearance: button;
|
|
/* 2 */
|
|
cursor: pointer;
|
|
/* 3 */
|
|
}
|
|
|
|
/**
|
|
* Re-set default cursor for disabled elements.
|
|
*/
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
/**
|
|
* 1. Address box sizing set to `content-box` in IE 8/9.
|
|
* 2. Remove excess padding in IE 8/9.
|
|
*/
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
box-sizing: border-box;
|
|
/* 1 */
|
|
padding: 0;
|
|
/* 2 */
|
|
}
|
|
|
|
/**
|
|
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
|
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
|
* (include `-moz` to future-proof).
|
|
*/
|
|
|
|
input[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
/* 1 */
|
|
/* 2 */
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
/**
|
|
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
|
* on OS X.
|
|
*/
|
|
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/**
|
|
* Remove inner padding and border in Firefox 4+.
|
|
*/
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* 1. Remove default vertical scrollbar in IE 8/9.
|
|
* 2. Improve readability and alignment in all browsers.
|
|
*/
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
/* 1 */
|
|
vertical-align: top;
|
|
/* 2 */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Tables
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove most spacing between table cells.
|
|
*/
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/*
|
|
|
|
CUSTOM MEDIA QUERIES
|
|
|
|
Media query values can be changed to fit your own content.
|
|
There are no magic bullets when it comes to media query width values.
|
|
They should be declared in em units - and they should be set to meet
|
|
the needs of your content.
|
|
|
|
These media queries can be referenced like so:
|
|
|
|
@media (--breakpoint-not-small) {
|
|
.medium-and-larger-specific-style {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
@media (--breakpoint-medium) {
|
|
.medium-screen-specific-style {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
@media (--breakpoint-large) {
|
|
.large-screen-specific-style {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
@media (--breakpoint-extra-large) {
|
|
.extra-large-screen-specific-style {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
*/
|
|
|
|
/*
|
|
|
|
COLOR VARIABLES
|
|
|
|
Variables to set colors for
|
|
color, background-color, and border-color
|
|
|
|
*/
|
|
|
|
/* variables */
|
|
|
|
|
|
|
|
/* Fallbacks */
|
|
|
|
/*
|
|
SPACING FALLBACK
|
|
|
|
For px based fallback for rem units in _spacing.css module
|
|
|
|
*/
|
|
|
|
.pan {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs {
|
|
padding: 4px;
|
|
}
|
|
|
|
.pas {
|
|
padding: 8px;
|
|
}
|
|
|
|
.pam {
|
|
padding: 16px;
|
|
}
|
|
|
|
.pal {
|
|
padding: 32px;
|
|
}
|
|
|
|
.paxl {
|
|
padding: 64px;
|
|
}
|
|
|
|
.paxxl {
|
|
padding: 128px;
|
|
}
|
|
|
|
.paxxxl {
|
|
padding: 256px;
|
|
}
|
|
|
|
.pln {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.pls {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.plm {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.pll {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.plxl {
|
|
padding-left: 64px;
|
|
}
|
|
|
|
.plxxl {
|
|
padding-left: 128px;
|
|
}
|
|
|
|
.plxxxl {
|
|
padding-left: 256px;
|
|
}
|
|
|
|
.prn {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.prs {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.prm {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.prl {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.prxl {
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.prxxl {
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.prxxxl {
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.pbn {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pbs {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pbm {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pbl {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pbxl {
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pbxxl {
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pbxxxl {
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.ptn {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.pts {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.ptm {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ptl {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.ptxl {
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.ptxxl {
|
|
padding-top: 128px;
|
|
}
|
|
|
|
.ptxxxl {
|
|
padding-top: 256px;
|
|
}
|
|
|
|
.pvn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pvs {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pvm {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pvl {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pvxl {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pvxxl {
|
|
padding-top: 128px;
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pvxxxl {
|
|
padding-top: 256px;
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.phn {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.phxs {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.phs {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.phm {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.phl {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phxl {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.phxxl {
|
|
padding-left: 128px;
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.phxxxl {
|
|
padding-left: 256px;
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.man {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs {
|
|
margin: 4px;
|
|
}
|
|
|
|
.mas {
|
|
margin: 8px;
|
|
}
|
|
|
|
.mam {
|
|
margin: 16px;
|
|
}
|
|
|
|
.mal {
|
|
margin: 32px;
|
|
}
|
|
|
|
.maxl {
|
|
margin: 64px;
|
|
}
|
|
|
|
.maxxl {
|
|
margin: 128px;
|
|
}
|
|
|
|
.maxxxl {
|
|
margin: 256px;
|
|
}
|
|
|
|
.mln {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.mls {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.mlm {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.mll {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.mlxl {
|
|
margin-left: 64px;
|
|
}
|
|
|
|
.mlxxl {
|
|
margin-left: 128px;
|
|
}
|
|
|
|
.mlxxxl {
|
|
margin-left: 256px;
|
|
}
|
|
|
|
.mrn {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mrs {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mrm {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mrl {
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mrxl {
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mrxxl {
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mrxxxl {
|
|
margin-right: 256px;
|
|
}
|
|
|
|
.mbn {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mbs {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mbm {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mbl {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mbxl {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mbxxl {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mbxxxl {
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mtn {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.mts {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.mtm {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mtl {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.mtxl {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.mtxxl {
|
|
margin-top: 128px;
|
|
}
|
|
|
|
.mtxxxl {
|
|
margin-top: 256px;
|
|
}
|
|
|
|
.mvn {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mvs {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mvm {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mvl {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mvxl {
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mvxxl {
|
|
margin-top: 128px;
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mvxxxl {
|
|
margin-top: 256px;
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mhn {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhs {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mhm {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mhl {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mhxl {
|
|
margin-left: 64px;
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mhxxl {
|
|
margin-left: 128px;
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mhxxxl {
|
|
margin-left: 256px;
|
|
margin-right: 256px;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.pan-ns {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-ns {
|
|
padding: 4px;
|
|
}
|
|
|
|
.pas-ns {
|
|
padding: 8px;
|
|
}
|
|
|
|
.pam-ns {
|
|
padding: 16px;
|
|
}
|
|
|
|
.pal-ns {
|
|
padding: 32px;
|
|
}
|
|
|
|
.paxl-ns {
|
|
padding: 64px;
|
|
}
|
|
|
|
.paxxl-ns {
|
|
padding: 128px;
|
|
}
|
|
|
|
.paxxxl-ns {
|
|
padding: 256px;
|
|
}
|
|
|
|
.pln-ns {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-ns {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.pls-ns {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.plm-ns {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.pll-ns {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.plxl-ns {
|
|
padding-left: 64px;
|
|
}
|
|
|
|
.plxxl-ns {
|
|
padding-left: 128px;
|
|
}
|
|
|
|
.plxxxl-ns {
|
|
padding-left: 256px;
|
|
}
|
|
|
|
.prn-ns {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-ns {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.prs-ns {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.prm-ns {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.prl-ns {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.prxl-ns {
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.prxxl-ns {
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.prxxxl-ns {
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.pbn-ns {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-ns {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pbs-ns {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pbm-ns {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pbl-ns {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pbxl-ns {
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pbxxl-ns {
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pbxxxl-ns {
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.ptn-ns {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-ns {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.pts-ns {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.ptm-ns {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ptl-ns {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.ptxl-ns {
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.ptxxl-ns {
|
|
padding-top: 128px;
|
|
}
|
|
|
|
.ptxxxl-ns {
|
|
padding-top: 256px;
|
|
}
|
|
|
|
.pvn-ns {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-ns {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pvs-ns {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pvm-ns {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pvl-ns {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pvxl-ns {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pvxxl-ns {
|
|
padding-top: 128px;
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pvxxxl-ns {
|
|
padding-top: 256px;
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.phn-ns {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.pvxs-ns {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.phs-ns {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.phm-ns {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.phl-ns {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phxl-ns {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.phxxl-ns {
|
|
padding-left: 128px;
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.phxxxl-ns {
|
|
padding-left: 256px;
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.man-ns {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-ns {
|
|
margin: 4px;
|
|
}
|
|
|
|
.mas-ns {
|
|
margin: 8px;
|
|
}
|
|
|
|
.mam-ns {
|
|
margin: 16px;
|
|
}
|
|
|
|
.mal-ns {
|
|
margin: 32px;
|
|
}
|
|
|
|
.maxl-ns {
|
|
margin: 64px;
|
|
}
|
|
|
|
.maxxl-ns {
|
|
margin: 128px;
|
|
}
|
|
|
|
.maxxxl-ns {
|
|
margin: 256px;
|
|
}
|
|
|
|
.mln-ns {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-ns {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.mls-ns {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.mlm-ns {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.mll-ns {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.mlxl-ns {
|
|
margin-left: 64px;
|
|
}
|
|
|
|
.mlxxl-ns {
|
|
margin-left: 128px;
|
|
}
|
|
|
|
.mlxxxl-ns {
|
|
margin-left: 256px;
|
|
}
|
|
|
|
.mrn-ns {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-ns {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mrs-ns {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mrm-ns {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mrl-ns {
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mrxl-ns {
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mrxxl-ns {
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mrxxxl-ns {
|
|
margin-right: 256px;
|
|
}
|
|
|
|
.mbn-ns {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-ns {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mbs-ns {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mbm-ns {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mbl-ns {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mbxl-ns {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mbxxl-ns {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mbxxxl-ns {
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mtn-ns {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-ns {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.mts-ns {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.mtm-ns {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mtl-ns {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.mtxl-ns {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.mtxxl-ns {
|
|
margin-top: 128px;
|
|
}
|
|
|
|
.mtxxxl-ns {
|
|
margin-top: 256px;
|
|
}
|
|
|
|
.mvn-ns {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-ns {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mvs-ns {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mvm-ns {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mvl-ns {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mvxl-ns {
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mvxxl-ns {
|
|
margin-top: 128px;
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mvxxxl-ns {
|
|
margin-top: 256px;
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mhn-ns {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhs-ns {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mhm-ns {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mhl-ns {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mhxl-ns {
|
|
margin-left: 64px;
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mhxxl-ns {
|
|
margin-left: 128px;
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mhxxxl-ns {
|
|
margin-left: 256px;
|
|
margin-right: 256px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.pan-m {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-m {
|
|
padding: 4px;
|
|
}
|
|
|
|
.pas-m {
|
|
padding: 8px;
|
|
}
|
|
|
|
.pam-m {
|
|
padding: 16px;
|
|
}
|
|
|
|
.pal-m {
|
|
padding: 32px;
|
|
}
|
|
|
|
.paxl-m {
|
|
padding: 64px;
|
|
}
|
|
|
|
.paxxl-m {
|
|
padding: 128px;
|
|
}
|
|
|
|
.paxxxl-m {
|
|
padding: 256px;
|
|
}
|
|
|
|
.pln-m {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-m {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.pls-m {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.plm-m {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.pll-m {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.plxl-m {
|
|
padding-left: 64px;
|
|
}
|
|
|
|
.plxxl-m {
|
|
padding-left: 128px;
|
|
}
|
|
|
|
.plxxxl-m {
|
|
padding-left: 256px;
|
|
}
|
|
|
|
.prn-m {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-m {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.prs-m {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.prm-m {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.prl-m {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.prxl-m {
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.prxxl-m {
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.prxxxl-m {
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.pbn-m {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-m {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pbs-m {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pbm-m {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pbl-m {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pbxl-m {
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pbxxl-m {
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pbxxxl-m {
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.ptn-m {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-m {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.pts-m {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.ptm-m {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ptl-m {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.ptxl-m {
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.ptxxl-m {
|
|
padding-top: 128px;
|
|
}
|
|
|
|
.ptxxxl-m {
|
|
padding-top: 256px;
|
|
}
|
|
|
|
.pvn-m {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-m {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pvs-m {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pvm-m {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pvl-m {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pvxl-m {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pvxxl-m {
|
|
padding-top: 128px;
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pvxxxl-m {
|
|
padding-top: 256px;
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.phn-m {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.pvxs-m {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.phs-m {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.phm-m {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.phl-m {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phxl-m {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.phxxl-m {
|
|
padding-left: 128px;
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.phxxxl-m {
|
|
padding-left: 256px;
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.man-m {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-m {
|
|
margin: 4px;
|
|
}
|
|
|
|
.mas-m {
|
|
margin: 8px;
|
|
}
|
|
|
|
.mam-m {
|
|
margin: 16px;
|
|
}
|
|
|
|
.mal-m {
|
|
margin: 32px;
|
|
}
|
|
|
|
.maxl-m {
|
|
margin: 64px;
|
|
}
|
|
|
|
.maxxl-m {
|
|
margin: 128px;
|
|
}
|
|
|
|
.maxxxl-m {
|
|
margin: 256px;
|
|
}
|
|
|
|
.mln-m {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-m {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.mls-m {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.mlm-m {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.mll-m {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.mlxl-m {
|
|
margin-left: 64px;
|
|
}
|
|
|
|
.mlxxl-m {
|
|
margin-left: 128px;
|
|
}
|
|
|
|
.mlxxxl-m {
|
|
margin-left: 256px;
|
|
}
|
|
|
|
.mrn-m {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-m {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mrs-m {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mrm-m {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mrl-m {
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mrxl-m {
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mrxxl-m {
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mrxxxl-m {
|
|
margin-right: 256px;
|
|
}
|
|
|
|
.mbn-m {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-m {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mbs-m {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mbm-m {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mbl-m {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mbxl-m {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mbxxl-m {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mbxxxl-m {
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mtn-m {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-m {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.mts-m {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.mtm-m {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mtl-m {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.mtxl-m {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.mtxxl-m {
|
|
margin-top: 128px;
|
|
}
|
|
|
|
.mtxxxl-m {
|
|
margin-top: 256px;
|
|
}
|
|
|
|
.mvn-m {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-m {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mvs-m {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mvm-m {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mvl-m {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mvxl-m {
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mvxxl-m {
|
|
margin-top: 128px;
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mvxxxl-m {
|
|
margin-top: 256px;
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mhn-m {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhxs-m {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mhs-m {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mhm-m {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mhl-m {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mhxl-m {
|
|
margin-left: 64px;
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mhxxl-m {
|
|
margin-left: 128px;
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mhxxxl-m {
|
|
margin-left: 256px;
|
|
margin-right: 256px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.pan-l {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-l {
|
|
padding: 4px;
|
|
}
|
|
|
|
.pas-l {
|
|
padding: 8px;
|
|
}
|
|
|
|
.pam-l {
|
|
padding: 16px;
|
|
}
|
|
|
|
.pal-l {
|
|
padding: 32px;
|
|
}
|
|
|
|
.paxl-l {
|
|
padding: 64px;
|
|
}
|
|
|
|
.paxxl-l {
|
|
padding: 128px;
|
|
}
|
|
|
|
.paxxxl-l {
|
|
padding: 256px;
|
|
}
|
|
|
|
.pln-l {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-l {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.pls-l {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.plm-l {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.pll-l {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.plxl-l {
|
|
padding-left: 64px;
|
|
}
|
|
|
|
.plxxl-l {
|
|
padding-left: 128px;
|
|
}
|
|
|
|
.plxxxl-l {
|
|
padding-left: 256px;
|
|
}
|
|
|
|
.prn-l {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-l {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.prs-l {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.prm-l {
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.prl-l {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.prxl-l {
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.prxxl-l {
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.prxxxl-l {
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.pbn-l {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-l {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pbs-l {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pbm-l {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pbl-l {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pbxl-l {
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pbxxl-l {
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pbxxxl-l {
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.ptn-l {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-l {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.pts-l {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.ptm-l {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ptl-l {
|
|
padding-top: 32px;
|
|
}
|
|
|
|
.ptxl-l {
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.ptxxl-l {
|
|
padding-top: 128px;
|
|
}
|
|
|
|
.ptxxxl-l {
|
|
padding-top: 256px;
|
|
}
|
|
|
|
.pvn-l {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-l {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.pvs-l {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.pvm-l {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.pvl-l {
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.pvxl-l {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.pvxxl-l {
|
|
padding-top: 128px;
|
|
padding-bottom: 128px;
|
|
}
|
|
|
|
.pvxxxl-l {
|
|
padding-top: 256px;
|
|
padding-bottom: 256px;
|
|
}
|
|
|
|
.phn-l {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.phxs-l {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.phs-l {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.phm-l {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.phl-l {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phxl-l {
|
|
padding-left: 64px;
|
|
padding-right: 64px;
|
|
}
|
|
|
|
.phxxl-l {
|
|
padding-left: 128px;
|
|
padding-right: 128px;
|
|
}
|
|
|
|
.phxxxl-l {
|
|
padding-left: 256px;
|
|
padding-right: 256px;
|
|
}
|
|
|
|
.man-l {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-l {
|
|
margin: 4px;
|
|
}
|
|
|
|
.mas-l {
|
|
margin: 8px;
|
|
}
|
|
|
|
.mam-l {
|
|
margin: 16px;
|
|
}
|
|
|
|
.mal-l {
|
|
margin: 32px;
|
|
}
|
|
|
|
.maxl-l {
|
|
margin: 64px;
|
|
}
|
|
|
|
.maxxl-l {
|
|
margin: 128px;
|
|
}
|
|
|
|
.maxxxl-l {
|
|
margin: 256px;
|
|
}
|
|
|
|
.mln-l {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-l {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.mls-l {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.mlm-l {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.mll-l {
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.mlxl-l {
|
|
margin-left: 64px;
|
|
}
|
|
|
|
.mlxxl-l {
|
|
margin-left: 128px;
|
|
}
|
|
|
|
.mlxxxl-l {
|
|
margin-left: 256px;
|
|
}
|
|
|
|
.mrn-l {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-l {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mrs-l {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mrm-l {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mrl-l {
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mrxl-l {
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mrxxl-l {
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mrxxxl-l {
|
|
margin-right: 256px;
|
|
}
|
|
|
|
.mbn-l {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-l {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mbs-l {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mbm-l {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mbl-l {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mbxl-l {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mbxxl-l {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mbxxxl-l {
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mtn-l {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-l {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.mts-l {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.mtm-l {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.mtl-l {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.mtxl-l {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.mtxxl-l {
|
|
margin-top: 128px;
|
|
}
|
|
|
|
.mtxxxl-l {
|
|
margin-top: 256px;
|
|
}
|
|
|
|
.mvn-l {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-l {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mvs-l {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mvm-l {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mvl-l {
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.mvxl-l {
|
|
margin-top: 64px;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.mvxxl-l {
|
|
margin-top: 128px;
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
.mvxxxl-l {
|
|
margin-top: 256px;
|
|
margin-bottom: 256px;
|
|
}
|
|
|
|
.mhn-l {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhxs-l {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mhs-l {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.mhm-l {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mhl-l {
|
|
margin-left: 32px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.mhxl-l {
|
|
margin-left: 64px;
|
|
margin-right: 64px;
|
|
}
|
|
|
|
.mhxxl-l {
|
|
margin-left: 128px;
|
|
margin-right: 128px;
|
|
}
|
|
|
|
.mhxxxl-l {
|
|
margin-left: 256px;
|
|
margin-right: 256px;
|
|
}
|
|
}
|
|
|
|
/* Modules */
|
|
|
|
/*
|
|
|
|
BASE
|
|
|
|
*/
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
|
|
BOX SIZING
|
|
|
|
A saner box-model.
|
|
Only applied to unqualified elements where this model makes sense.
|
|
|
|
Apply .border-box where needed.
|
|
|
|
*/
|
|
|
|
nav,
|
|
main,
|
|
section,
|
|
article,
|
|
aside,
|
|
header,
|
|
footer,
|
|
div,
|
|
details,
|
|
summary,
|
|
form,
|
|
fieldset,
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="tel"],
|
|
input[type="url"],
|
|
input[type="email"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
nav:before,
|
|
main:before,
|
|
section:before,
|
|
article:before,
|
|
aside:before,
|
|
header:before,
|
|
footer:before,
|
|
div:before,
|
|
details:before,
|
|
summary:before,
|
|
form:before,
|
|
fieldset:before,
|
|
textarea:before,
|
|
input[type="text"]:before,
|
|
input[type="tel"]:before,
|
|
input[type="url"]:before,
|
|
input[type="email"]:before,
|
|
input[type="search"]:before,
|
|
input[type="number"]:before,
|
|
input[type="password"]:before,
|
|
nav:after,
|
|
main:after,
|
|
section:after,
|
|
article:after,
|
|
aside:after,
|
|
header:after,
|
|
footer:after,
|
|
div:after,
|
|
details:after,
|
|
summary:after,
|
|
form:after,
|
|
fieldset:after,
|
|
textarea:after,
|
|
input[type="text"]:after,
|
|
input[type="tel"]:after,
|
|
input[type="url"]:after,
|
|
input[type="email"]:after,
|
|
input[type="search"]:after,
|
|
input[type="number"]:after,
|
|
input[type="password"]:after,
|
|
.border-box,
|
|
.border-box:before,
|
|
.border-box:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
|
|
BACKGROUND SIZE
|
|
|
|
Base:
|
|
bg = background-size
|
|
|
|
Modifiers:
|
|
cv = cover
|
|
cn = contain
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.bg-cv {
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-cn {
|
|
background-size: contain;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.bg-cv-ns {
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-cn-ns {
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.bg-cv-m {
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-cn-m {
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.bg-cv-l {
|
|
background-size: cover;
|
|
}
|
|
|
|
.bg-cn-l {
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
BORDER BASE
|
|
|
|
Use border-base in combination with setting text color
|
|
or by using extensions from border-color module.
|
|
|
|
Examples:
|
|
To set a border of blue on all sides:
|
|
<div class="ba b--blue"></div>
|
|
|
|
To set a border on top of orange
|
|
<div class="bt b--orange"></div>
|
|
|
|
Base:
|
|
b = border
|
|
|
|
Modifiers:
|
|
n = none, no border-style or border-width
|
|
a = all
|
|
t = top
|
|
r = right
|
|
b = bottom
|
|
l = left
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
/* The extra `.bn` is required to boost the specificity, which is needed
|
|
* sometimes if you are setting the border to 0. */
|
|
|
|
.bn {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.ba {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bt {
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.br {
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bb {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bl {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.bda {
|
|
border-style: dotted;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bdt {
|
|
border-top-style: dotted;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.bdr {
|
|
border-right-style: dotted;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bdb {
|
|
border-bottom-style: dotted;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bdl {
|
|
border-left-style: dotted;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.bn-ns {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.ba-ns {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bt-ns {
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.br-ns {
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bb-ns {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bl-ns {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.bda-ns {
|
|
border-style: dotted;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bdt-ns {
|
|
border-top-style: dotted;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.bdr-ns {
|
|
border-right-style: dotted;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bdb-ns {
|
|
border-bottom-style: dotted;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bdl-ns {
|
|
border-left-style: dotted;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.bn-m {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.ba-m {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bt-m {
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.br-m {
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bb-m {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bl-m {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.bda-m {
|
|
border-style: dotted;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bdt-m {
|
|
border-top-style: dotted;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.bdr-m {
|
|
border-right-style: dotted;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bdb-m {
|
|
border-bottom-style: dotted;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bdl-m {
|
|
border-left-style: dotted;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.bn-l {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.ba-l {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bt-l {
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.br-l {
|
|
border-right-style: solid;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bb-l {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bl-l {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.bda-l {
|
|
border-style: dotted;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.bdt-l {
|
|
border-top-style: dotted;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.bdr-l {
|
|
border-right-style: dotted;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.bdb-l {
|
|
border-bottom-style: dotted;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.bdl-l {
|
|
border-left-style: dotted;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
BORDER COLORS
|
|
|
|
Use in cobmination with the _borders.css module
|
|
Or for more flexibility the _border-styles.css and _border-widths.css modules
|
|
|
|
Base:
|
|
b-- = border
|
|
|
|
Modifiers:
|
|
Add a border color. There is a one to one mapping of color values
|
|
in the _colors.css module.
|
|
|
|
*/
|
|
|
|
.b--black {
|
|
border-color: #333;
|
|
}
|
|
|
|
.b--near-black {
|
|
border-color: #111;
|
|
}
|
|
|
|
.b--dark-gray {
|
|
border-color: #333;
|
|
}
|
|
|
|
.b--mid-gray {
|
|
border-color: #555;
|
|
}
|
|
|
|
.b--gray {
|
|
border-color: #777;
|
|
}
|
|
|
|
.b--silver {
|
|
border-color: #999;
|
|
}
|
|
|
|
.b--light-silver {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.b--light-gray {
|
|
border-color: #d7f5f5;
|
|
}
|
|
|
|
.b--near-white {
|
|
border-color: #f4f4f4;
|
|
}
|
|
|
|
.b--white {
|
|
border-color: #fff;
|
|
}
|
|
|
|
.b--white-10 {
|
|
border-color: hsla(0, 0, 100%, .1);
|
|
}
|
|
|
|
.b--white-20 {
|
|
border-color: hsla(0, 0, 100%, .2);
|
|
}
|
|
|
|
.b--white-25 {
|
|
border-color: hsla(0, 0, 100%, .25);
|
|
}
|
|
|
|
.b--white-30 {
|
|
border-color: hsla(0, 0, 100%, .3);
|
|
}
|
|
|
|
.b--white-40 {
|
|
border-color: hsla(0, 0, 100%, .4);
|
|
}
|
|
|
|
.b--white-50 {
|
|
border-color: hsla(0, 0, 100%, .5);
|
|
}
|
|
|
|
.b--white-60 {
|
|
border-color: hsla(0, 0, 100%, .6);
|
|
}
|
|
|
|
.b--white-70 {
|
|
border-color: hsla(0, 0, 100%, .7);
|
|
}
|
|
|
|
.b--white-75 {
|
|
border-color: hsla(0, 0, 100%, .75);
|
|
}
|
|
|
|
.b--white-80 {
|
|
border-color: hsla(0, 0, 100%, .8);
|
|
}
|
|
|
|
.b--white-90 {
|
|
border-color: hsla(0, 0, 100%, .9);
|
|
}
|
|
|
|
.b--black-10 {
|
|
border-color: hsla(0, 0, 0, .1);
|
|
}
|
|
|
|
.b--black-20 {
|
|
border-color: hsla(0, 0, 0, .2);
|
|
}
|
|
|
|
.b--black-25 {
|
|
border-color: hsla(0, 0, 0, .25);
|
|
}
|
|
|
|
.b--black-30 {
|
|
border-color: hsla(0, 0, 0, .3);
|
|
}
|
|
|
|
.b--black-40 {
|
|
border-color: hsla(0, 0, 0, .4);
|
|
}
|
|
|
|
.b--black-50 {
|
|
border-color: hsla(0, 0, 0, .5);
|
|
}
|
|
|
|
.b--black-60 {
|
|
border-color: hsla(0, 0, 0, .6);
|
|
}
|
|
|
|
.b--black-70 {
|
|
border-color: hsla(0, 0, 0, .7);
|
|
}
|
|
|
|
.b--black-75 {
|
|
border-color: hsla(0, 0, 0, .75);
|
|
}
|
|
|
|
.b--black-80 {
|
|
border-color: hsla(0, 0, 0, .8);
|
|
}
|
|
|
|
.b--black-90 {
|
|
border-color: hsla(0, 0, 0, .9);
|
|
}
|
|
|
|
.b--blue {
|
|
border-color: #0074D9;
|
|
}
|
|
|
|
.b--light-blue {
|
|
border-color: #64a8ff;
|
|
}
|
|
|
|
.b--lightest-blue {
|
|
border-color: #a2dfff;
|
|
}
|
|
|
|
.b--dark-blue {
|
|
border-color: #0045a1;
|
|
}
|
|
|
|
.b--darkest-blue {
|
|
border-color: #002f86;
|
|
}
|
|
|
|
.b--yellow {
|
|
border-color: #fff93c;
|
|
}
|
|
|
|
.b--light-yellow {
|
|
border-color: #fffa60;
|
|
}
|
|
|
|
.b--lightest-yellow {
|
|
border-color: #fffca6;
|
|
}
|
|
|
|
.b--dark-yellow {
|
|
border-color: #e2c100;
|
|
}
|
|
|
|
.b--darkest-yellow {
|
|
border-color: #c4a600;
|
|
}
|
|
|
|
.b--orange {
|
|
border-color: #FF851B;
|
|
}
|
|
|
|
.b--light-orange {
|
|
border-color: #ffa942;
|
|
}
|
|
|
|
.b--lightest-orange {
|
|
border-color: #ffc55d;
|
|
}
|
|
|
|
.b--dark-orange {
|
|
border-color: #d05e00;
|
|
}
|
|
|
|
.b--darkest-orange {
|
|
border-color: #b14400;
|
|
}
|
|
|
|
.b--red {
|
|
border-color: #d82c2c;
|
|
}
|
|
|
|
.b--light-red {
|
|
border-color: #f94f44;
|
|
}
|
|
|
|
.b--lightest-red {
|
|
border-color: #ff6c5c;
|
|
}
|
|
|
|
.b--dark-red {
|
|
border-color: #bd001a;
|
|
}
|
|
|
|
.b--darkest-red {
|
|
border-color: #9d0003;
|
|
}
|
|
|
|
.b--teal {
|
|
border-color: #27bfa8;
|
|
}
|
|
|
|
.b--light-teal {
|
|
border-color: #4eddc5;
|
|
}
|
|
|
|
.b--lightest-teal {
|
|
border-color: #6ffae0;
|
|
}
|
|
|
|
.b--dark-teal {
|
|
border-color: #25a28f;
|
|
}
|
|
|
|
.b--darkest-teal {
|
|
border-color: #008876;
|
|
}
|
|
|
|
.b--green {
|
|
border-color: #3D9970;
|
|
}
|
|
|
|
.b--light-green {
|
|
border-color: #5ab48a;
|
|
}
|
|
|
|
.b--lightest-green {
|
|
border-color: #75d0a4;
|
|
}
|
|
|
|
.b--dark-green {
|
|
border-color: #1e7f58;
|
|
}
|
|
|
|
.b--darkest-green {
|
|
border-color: #006540;
|
|
}
|
|
|
|
.b--pink {
|
|
border-color: #F012BE;
|
|
}
|
|
|
|
.b--light-pink {
|
|
border-color: #ff57e8;
|
|
}
|
|
|
|
.b--lightest-pink {
|
|
border-color: #ff81ff;
|
|
}
|
|
|
|
.b--dark-pink {
|
|
border-color: #d100a3;
|
|
}
|
|
|
|
.b--darkest-pink {
|
|
border-color: #b20088;
|
|
}
|
|
|
|
.b--purple {
|
|
border-color: #980bc6;
|
|
}
|
|
|
|
.b--light-purple {
|
|
border-color: #b536e2;
|
|
}
|
|
|
|
.b--lightest-purple {
|
|
border-color: #d355ff;
|
|
}
|
|
|
|
.b--dark-purple {
|
|
border-color: #7b00a9;
|
|
}
|
|
|
|
.b--darkest-purple {
|
|
border-color: #5f008e;
|
|
}
|
|
|
|
/*
|
|
|
|
BORDER RADIUS
|
|
|
|
Base:
|
|
br = border-radius
|
|
|
|
Modifiers:
|
|
n = none
|
|
1 = 1st step in scale
|
|
2 = 2nd step in scale
|
|
3 = 3rd step in scale
|
|
4 = 4th step in scale
|
|
5 = 5th step in scale
|
|
circ = circle
|
|
-100 = 100%
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.brn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.br1 {
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
.br2 {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.br3 {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.br4 {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.br5 {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.br-circ {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.br-100 {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.brn-ns {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.br1-ns {
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
.br2-ns {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.br3-ns {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.br4-ns {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.br5-ns {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.br-circ-ns {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.br-100-ns {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.brn-m {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.br1-m {
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
.br2-m {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.br3-m {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.br4-m {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.br5-m {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.br-circ-m {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.br-100-m {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.brn-l {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.br1-l {
|
|
border-radius: .125rem;
|
|
}
|
|
|
|
.br2-l {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.br3-l {
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.br4-l {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.br5-l {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.br-circ-l {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.br-100-l {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
BORDER STYLES
|
|
|
|
Base:
|
|
bs = border-style
|
|
|
|
Modifiers:
|
|
none = none
|
|
dotted = dotted
|
|
solid = solid
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.bs-none {
|
|
border-style: none;
|
|
}
|
|
|
|
.bs-dotted {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.bs-solid {
|
|
border-style: solid;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.bs-none-ns {
|
|
border-style: none;
|
|
}
|
|
|
|
.bs-dotted-ns {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.bs-solid-ns {
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.bs-none-m {
|
|
border-style: none;
|
|
}
|
|
|
|
.bs-dotted-m {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.bs-solid-m {
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.bs-none-l {
|
|
border-style: none;
|
|
}
|
|
|
|
.bs-dotted-l {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.bs-solid-l {
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
BORDER WIDTHS
|
|
|
|
Base:
|
|
bw = border-width
|
|
|
|
Modifiers:
|
|
0 = 0 width border
|
|
1 = 1st step in border-width scale
|
|
2 = 2nd step in border-width scale
|
|
3 = 3rd step in border-width scale
|
|
4 = 4th step in border-width scale
|
|
5 = 5th step in border-width scale
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.bw0 {
|
|
border-width: 0;
|
|
}
|
|
|
|
.bw1 {
|
|
border-width: .125rem;
|
|
}
|
|
|
|
.bw2 {
|
|
border-width: .25rem;
|
|
}
|
|
|
|
.bw3 {
|
|
border-width: .5rem;
|
|
}
|
|
|
|
.bw4 {
|
|
border-width: .75rem;
|
|
}
|
|
|
|
.bw5 {
|
|
border-width: 1rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.bw0-ns {
|
|
border-width: 0;
|
|
}
|
|
|
|
.bw1-ns {
|
|
border-width: .125rem;
|
|
}
|
|
|
|
.bw2-ns {
|
|
border-width: .25rem;
|
|
}
|
|
|
|
.bw3-ns {
|
|
border-width: .5rem;
|
|
}
|
|
|
|
.bw4-ns {
|
|
border-width: .75rem;
|
|
}
|
|
|
|
.bw5-ns {
|
|
border-width: 1rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.bw0-m {
|
|
border-width: 0;
|
|
}
|
|
|
|
.bw1-m {
|
|
border-width: .125rem;
|
|
}
|
|
|
|
.bw2-m {
|
|
border-width: .25rem;
|
|
}
|
|
|
|
.bw3-m {
|
|
border-width: .5rem;
|
|
}
|
|
|
|
.bw4-m {
|
|
border-width: .75rem;
|
|
}
|
|
|
|
.bw5-m {
|
|
border-width: 1rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.bw0-l {
|
|
border-width: 0;
|
|
}
|
|
|
|
.bw1-l {
|
|
border-width: .125rem;
|
|
}
|
|
|
|
.bw2-l {
|
|
border-width: .25rem;
|
|
}
|
|
|
|
.bw3-l {
|
|
border-width: .5rem;
|
|
}
|
|
|
|
.bw4-l {
|
|
border-width: .75rem;
|
|
}
|
|
|
|
.bw5-l {
|
|
border-width: 1rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
CODE
|
|
|
|
*/
|
|
|
|
.pre {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.code {
|
|
white-space: pre;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* COORDINATES */
|
|
|
|
.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;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
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;
|
|
}
|
|
|
|
/*
|
|
|
|
DISPLAY
|
|
|
|
Base:
|
|
d = display
|
|
|
|
Modifiers:
|
|
n = none
|
|
b = block
|
|
ib = inline-block
|
|
it = inline-table
|
|
t = table
|
|
tc = table-cell
|
|
tr = table-row
|
|
tcol = table-column
|
|
tcolg = table-column-group
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.dn {
|
|
display: none;
|
|
}
|
|
|
|
.di {
|
|
display: inline;
|
|
}
|
|
|
|
.db {
|
|
display: block;
|
|
}
|
|
|
|
.dib {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dit {
|
|
display: inline-table;
|
|
}
|
|
|
|
.dt {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.dtr {
|
|
display: table-row;
|
|
}
|
|
|
|
.dtc {
|
|
display: table-cell;
|
|
}
|
|
|
|
.dtcol {
|
|
display: table-column;
|
|
}
|
|
|
|
.dtcolg {
|
|
display: table-column-group;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.dn-ns {
|
|
display: none;
|
|
}
|
|
|
|
.di-ns {
|
|
display: inline;
|
|
}
|
|
|
|
.db-ns {
|
|
display: block;
|
|
}
|
|
|
|
.dib-ns {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dit-ns {
|
|
display: inline-table;
|
|
}
|
|
|
|
.dt-ns {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.dtr-ns {
|
|
display: table-row;
|
|
}
|
|
|
|
.dtc-ns {
|
|
display: table-cell;
|
|
}
|
|
|
|
.dtcol-ns {
|
|
display: table-column;
|
|
}
|
|
|
|
.dtcolg-ns {
|
|
display: table-column-group;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.dn-m {
|
|
display: none;
|
|
}
|
|
|
|
.di-m {
|
|
display: inline;
|
|
}
|
|
|
|
.db-m {
|
|
display: block;
|
|
}
|
|
|
|
.dib-m {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dit-m {
|
|
display: inline-table;
|
|
}
|
|
|
|
.dt-m {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.dtr-m {
|
|
display: table-row;
|
|
}
|
|
|
|
.dtc-m {
|
|
display: table-cell;
|
|
}
|
|
|
|
.dtcol-m {
|
|
display: table-column;
|
|
}
|
|
|
|
.dtcolg-m {
|
|
display: table-column-group;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.dn-l {
|
|
display: none;
|
|
}
|
|
|
|
.di-l {
|
|
display: inline;
|
|
}
|
|
|
|
.db-l {
|
|
display: block;
|
|
}
|
|
|
|
.dib-l {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dit-l {
|
|
display: inline-table;
|
|
}
|
|
|
|
.dt-l {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.dtr-l {
|
|
display: table-row;
|
|
}
|
|
|
|
.dtc-l {
|
|
display: table-cell;
|
|
}
|
|
|
|
.dtcol-l {
|
|
display: table-column;
|
|
}
|
|
|
|
.dtcolg-l {
|
|
display: table-column-group;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
FLOATS
|
|
|
|
1. Floated elements are automatically rendered as block level elements.
|
|
Setting floats to display inline will fix the double margin bug in
|
|
ie6. You know... just in case.
|
|
|
|
2. Don't forget to clearfix your floats with .cf
|
|
|
|
Base:
|
|
f = float
|
|
|
|
Modifiers:
|
|
l = left
|
|
r = right
|
|
n = none
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
.fl {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.fr {
|
|
float: right;
|
|
display: inline;
|
|
}
|
|
|
|
.fn {
|
|
float: none;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.fl-ns {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.fr-ns {
|
|
float: right;
|
|
display: inline;
|
|
}
|
|
|
|
.fn-ns {
|
|
float: none!important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.fl-m {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.fr-m {
|
|
float: right;
|
|
display: inline;
|
|
}
|
|
|
|
.fn-m {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.fl-l {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.fr-l {
|
|
float: right;
|
|
display: inline;
|
|
}
|
|
|
|
.fn-l {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
FONT FAMILY GROUPS
|
|
|
|
*/
|
|
|
|
.serif {
|
|
font-family: times, TimesNewRoman, "Times New Roman",
|
|
georgia,
|
|
serif;
|
|
}
|
|
|
|
/* From http://cssfontstack.com */
|
|
|
|
code,
|
|
.code {
|
|
font-family: Consolas,
|
|
monaco,
|
|
monospace;
|
|
}
|
|
|
|
.helvetica {
|
|
font-family: helvetica, 'helvetica neue',
|
|
arial,
|
|
sans-serif;
|
|
}
|
|
|
|
.bodoni {
|
|
font-family: "Bodoni MT",
|
|
Didot,
|
|
"Didot LT STD",
|
|
"Hoefler Text",
|
|
Garamond,
|
|
Times,
|
|
"Times New Roman",
|
|
serif;
|
|
}
|
|
|
|
.calisto {
|
|
font-family: "Calisto MT",
|
|
"Bookman Old Style", Bookman,
|
|
"Goudy Old Style",
|
|
Garamond,
|
|
"Hoefler Text",
|
|
"Bitstream Charter",
|
|
Georgia,
|
|
serif;
|
|
}
|
|
|
|
.garamond {
|
|
font-family: Garamond,
|
|
Baskerville, "Baskerville Old Face",
|
|
"Hoefler Text",
|
|
"Times New Roman",
|
|
serif;
|
|
}
|
|
|
|
.times {
|
|
font-family: Times, TimesNewRoman, "Times New Roman",
|
|
Baskerville,
|
|
Georgia,
|
|
serif;
|
|
}
|
|
|
|
/*
|
|
|
|
FONT STYLE
|
|
|
|
*/
|
|
|
|
.fsn {
|
|
font-style: normal;
|
|
}
|
|
|
|
.i {
|
|
font-style: italic;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.fsn-ns {
|
|
font-style: normal;
|
|
}
|
|
|
|
.i-ns {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.fsn-m {
|
|
font-style: normal;
|
|
}
|
|
|
|
.i-m {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.fsn-l {
|
|
font-style: normal;
|
|
}
|
|
|
|
.i-l {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
FONT WEIGHT
|
|
|
|
*/
|
|
|
|
.normal {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.b {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.thin {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.book {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.semibold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heavy {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ultrabold {
|
|
font-weight: 900;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.normal-ns {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.b-ns {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.thin-ns {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.book-ns {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.semibold-ns {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bold-ns {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heavy-ns {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ultrabold-ns {
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.normal-m {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.b-m {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.thin-m {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.book-m {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.semibold-m {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bold-m {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heavy-m {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ultrabold-m {
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.normal-l {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.b-l {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.thin-l {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.book-l {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.semibold-l {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bold-l {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heavy-l {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ultrabold-l {
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
FORMS
|
|
|
|
*/
|
|
|
|
.input-text {
|
|
outline: 0;
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
.input-invisible {
|
|
outline: 0;
|
|
border: 0;
|
|
}
|
|
|
|
/*
|
|
|
|
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-30 {
|
|
height: 30%;
|
|
}
|
|
|
|
.h-40 {
|
|
height: 40%;
|
|
}
|
|
|
|
.h-50 {
|
|
height: 50%;
|
|
}
|
|
|
|
.h-60 {
|
|
height: 60%;
|
|
}
|
|
|
|
.h-70 {
|
|
height: 70%;
|
|
}
|
|
|
|
.h-75 {
|
|
height: 75%;
|
|
}
|
|
|
|
.h-80 {
|
|
height: 80%;
|
|
}
|
|
|
|
.h-90 {
|
|
height: 90%;
|
|
}
|
|
|
|
.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: 30em) {
|
|
.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-30-ns {
|
|
height: 30%;
|
|
}
|
|
|
|
.h-40-ns {
|
|
height: 40%;
|
|
}
|
|
|
|
.h-50-ns {
|
|
height: 50%;
|
|
}
|
|
|
|
.h-60-ns {
|
|
height: 60%;
|
|
}
|
|
|
|
.h-70-ns {
|
|
height: 70%;
|
|
}
|
|
|
|
.h-75-ns {
|
|
height: 75%;
|
|
}
|
|
|
|
.h-80-ns {
|
|
height: 80%;
|
|
}
|
|
|
|
.h-90-ns {
|
|
height: 90%;
|
|
}
|
|
|
|
.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: 30em) and (max-width: 60em) {
|
|
.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-30-m {
|
|
height: 30%;
|
|
}
|
|
|
|
.h-40-m {
|
|
height: 40%;
|
|
}
|
|
|
|
.h-50-m {
|
|
height: 50%;
|
|
}
|
|
|
|
.h-60-m {
|
|
height: 60%;
|
|
}
|
|
|
|
.h-70-m {
|
|
height: 70%;
|
|
}
|
|
|
|
.h-75-m {
|
|
height: 75%;
|
|
}
|
|
|
|
.h-80-m {
|
|
height: 80%;
|
|
}
|
|
|
|
.h-90-m {
|
|
height: 90%;
|
|
}
|
|
|
|
.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: 60em) {
|
|
.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-30-l {
|
|
height: 30%;
|
|
}
|
|
|
|
.h-40-l {
|
|
height: 40%;
|
|
}
|
|
|
|
.h-50-l {
|
|
height: 50%;
|
|
}
|
|
|
|
.h-60-l {
|
|
height: 60%;
|
|
}
|
|
|
|
.h-70-l {
|
|
height: 70%;
|
|
}
|
|
|
|
.h-75-l {
|
|
height: 75%;
|
|
}
|
|
|
|
.h-80-l {
|
|
height: 80%;
|
|
}
|
|
|
|
.h-90-l {
|
|
height: 90%;
|
|
}
|
|
|
|
.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
|
|
|
|
*/
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/*
|
|
|
|
LETTER SPACING
|
|
|
|
*/
|
|
|
|
.tracked {
|
|
letter-spacing: .16em;
|
|
}
|
|
|
|
.tracked-tight {
|
|
letter-spacing: -.05em;
|
|
}
|
|
|
|
.tracked-mega {
|
|
letter-spacing: .3em;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.tracked-ns {
|
|
letter-spacing: .16em;
|
|
}
|
|
|
|
.tracked-tight-ns {
|
|
letter-spacing: -.1em;
|
|
}
|
|
|
|
.tracked-mega-ns {
|
|
letter-spacing: .3em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.tracked-m {
|
|
letter-spacing: .16em;
|
|
}
|
|
|
|
.tracked-tight-m {
|
|
letter-spacing: -.1em;
|
|
}
|
|
|
|
.tracked-mega-m {
|
|
letter-spacing: .3em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.tracked-l {
|
|
letter-spacing: .16em;
|
|
}
|
|
|
|
.tracked-tight-l {
|
|
letter-spacing: -.1em;
|
|
}
|
|
|
|
.tracked-mega-l {
|
|
letter-spacing: .3em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
LINE HEIGHT / LEADING
|
|
|
|
*/
|
|
|
|
.lh-solid {
|
|
line-height: 1;
|
|
}
|
|
|
|
.lh-title {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.lh-copy {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.lh-solid-ns {
|
|
line-height: 1;
|
|
}
|
|
|
|
.lh-title-ns {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.lh-copy-ns {
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.lh-solid-m {
|
|
line-height: 1;
|
|
}
|
|
|
|
.lh-title-m {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.lh-copy-m {
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.lh-solid-l {
|
|
line-height: 1;
|
|
}
|
|
|
|
.lh-title-l {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.lh-copy-l {
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
LINKS
|
|
|
|
*/
|
|
|
|
.link {
|
|
text-decoration: none;
|
|
transition: color .15s ease-in;
|
|
}
|
|
|
|
.link:link,
|
|
.link:visited {
|
|
transition: color .15s ease-in;
|
|
}
|
|
|
|
.link:hover {
|
|
transition: color .15s ease-in;
|
|
}
|
|
|
|
.link:active {
|
|
transition: color .15s ease-in;
|
|
}
|
|
|
|
.link:focus {
|
|
transition: color .15s ease-in;
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.underline-hover:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*
|
|
|
|
LISTS
|
|
|
|
*/
|
|
|
|
.list {
|
|
list-style-type: none;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.list-ns {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.list-m {
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.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: 30em) {
|
|
.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: 30em) and (max-width: 60em) {
|
|
.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: 60em) {
|
|
.mw-100-l {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mw-75-l {
|
|
max-width: 75%;
|
|
}
|
|
|
|
.mw-50-l {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.mw-25-l {
|
|
max-width: 25%;
|
|
}
|
|
|
|
.mw1-l {
|
|
max-width: 1rem;
|
|
}
|
|
|
|
.mw2-l {
|
|
max-width: 2rem;
|
|
}
|
|
|
|
.mw3-l {
|
|
max-width: 4rem;
|
|
}
|
|
|
|
.mw4-l {
|
|
max-width: 8rem;
|
|
}
|
|
|
|
.mw5-l {
|
|
max-width: 16rem;
|
|
}
|
|
|
|
.mw6-l {
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.mw7-l {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.mw8-l {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.mw9-l {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.mw10-l {
|
|
max-width: 128rem;
|
|
}
|
|
|
|
.mw-none-l {
|
|
max-width: none;
|
|
}
|
|
|
|
.mw-max-l {
|
|
max-width: -webkit-max-content;
|
|
max-width: -moz-max-content;
|
|
max-width: max-content;
|
|
}
|
|
|
|
.mw-min-l {
|
|
max-width: -webkit-min-content;
|
|
max-width: -moz-min-content;
|
|
max-width: min-content;
|
|
}
|
|
|
|
.mw-fit-l {
|
|
max-width: -webkit-fit-content;
|
|
max-width: -moz-fit-content;
|
|
max-width: fit-content;
|
|
}
|
|
|
|
.mw-fill-l {
|
|
max-width: -webkit-fill-available;
|
|
max-width: -moz-available;
|
|
max-width: fill-available;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
WIDTHS
|
|
|
|
Base:
|
|
w = width
|
|
|
|
Modifiers
|
|
1 = 1st step in width scale
|
|
2 = 2nd step in width scale
|
|
3 = 3rd step in width scale
|
|
4 = 4th step in width scale
|
|
5 = 5th step in width scale
|
|
|
|
-10 = literal value 10%
|
|
-20 = literal value 20%
|
|
-25 = literal value 25%
|
|
-33 = literal value 33%
|
|
-34 = literal value 34%
|
|
-40 = literal value 40%
|
|
-50 = literal value 50%
|
|
-60 = literal value 60%
|
|
-75 = literal value 75%
|
|
-80 = literal value 80%
|
|
-100 = literal value 100%
|
|
|
|
-auto = string value auto
|
|
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
/* Width Scale */
|
|
|
|
.w1 {
|
|
width: 1rem;
|
|
}
|
|
|
|
.w2 {
|
|
width: 2rem;
|
|
}
|
|
|
|
.w3 {
|
|
width: 4rem;
|
|
}
|
|
|
|
.w4 {
|
|
width: 8rem;
|
|
}
|
|
|
|
.w5 {
|
|
width: 16rem;
|
|
}
|
|
|
|
.w-10 {
|
|
width: 10%;
|
|
}
|
|
|
|
.w-20 {
|
|
width: 20%;
|
|
}
|
|
|
|
.w-25 {
|
|
width: 25%;
|
|
}
|
|
|
|
.w-33 {
|
|
width: 33%;
|
|
}
|
|
|
|
.w-34 {
|
|
width: 34%;
|
|
}
|
|
|
|
.w-40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.w-60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-75 {
|
|
width: 75%;
|
|
}
|
|
|
|
.w-80 {
|
|
width: 80%;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.w-auto {
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.w1-ns {
|
|
width: 1rem;
|
|
}
|
|
|
|
.w2-ns {
|
|
width: 2rem;
|
|
}
|
|
|
|
.w3-ns {
|
|
width: 4rem;
|
|
}
|
|
|
|
.w4-ns {
|
|
width: 8rem;
|
|
}
|
|
|
|
.w5-ns {
|
|
width: 16rem;
|
|
}
|
|
|
|
.w-10-ns {
|
|
width: 10%;
|
|
}
|
|
|
|
.w-20-ns {
|
|
width: 20%;
|
|
}
|
|
|
|
.w-25-ns {
|
|
width: 25%;
|
|
}
|
|
|
|
.w-33-ns {
|
|
width: 33%;
|
|
}
|
|
|
|
.w-34-ns {
|
|
width: 34%;
|
|
}
|
|
|
|
.w-40-ns {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-50-ns {
|
|
width: 50%;
|
|
}
|
|
|
|
.w-60-ns {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-75-ns {
|
|
width: 75%;
|
|
}
|
|
|
|
.w-80-ns {
|
|
width: 80%;
|
|
}
|
|
|
|
.w-100-ns {
|
|
width: 100%;
|
|
}
|
|
|
|
.w-auto-ns {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.w1-m {
|
|
width: 1rem;
|
|
}
|
|
|
|
.w2-m {
|
|
width: 2rem;
|
|
}
|
|
|
|
.w3-m {
|
|
width: 4rem;
|
|
}
|
|
|
|
.w4-m {
|
|
width: 8rem;
|
|
}
|
|
|
|
.w5-m {
|
|
width: 16rem;
|
|
}
|
|
|
|
.w-10-m {
|
|
width: 10%;
|
|
}
|
|
|
|
.w-20-m {
|
|
width: 20%;
|
|
}
|
|
|
|
.w-25-m {
|
|
width: 25%;
|
|
}
|
|
|
|
.w-33-m {
|
|
width: 33%;
|
|
}
|
|
|
|
.w-34-m {
|
|
width: 34%;
|
|
}
|
|
|
|
.w-40-m {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-50-m {
|
|
width: 50%;
|
|
}
|
|
|
|
.w-60-m {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-75-m {
|
|
width: 75%;
|
|
}
|
|
|
|
.w-80-m {
|
|
width: 80%;
|
|
}
|
|
|
|
.w-100-m {
|
|
width: 100%;
|
|
}
|
|
|
|
.w-auto-m {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.w1-l {
|
|
width: 1rem;
|
|
}
|
|
|
|
.w2-l {
|
|
width: 2rem;
|
|
}
|
|
|
|
.w3-l {
|
|
width: 4rem;
|
|
}
|
|
|
|
.w4-l {
|
|
width: 8rem;
|
|
}
|
|
|
|
.w5-l {
|
|
width: 16rem;
|
|
}
|
|
|
|
.w-10-l {
|
|
width: 10%;
|
|
}
|
|
|
|
.w-20-l {
|
|
width: 20%;
|
|
}
|
|
|
|
.w-25-l {
|
|
width: 25%;
|
|
}
|
|
|
|
.w-33-l {
|
|
width: 33%;
|
|
}
|
|
|
|
.w-34-l {
|
|
width: 34%;
|
|
}
|
|
|
|
.w-40-l {
|
|
width: 40%;
|
|
}
|
|
|
|
.w-50-l {
|
|
width: 50%;
|
|
}
|
|
|
|
.w-60-l {
|
|
width: 60%;
|
|
}
|
|
|
|
.w-75-l {
|
|
width: 75%;
|
|
}
|
|
|
|
.w-80-l {
|
|
width: 80%;
|
|
}
|
|
|
|
.w-100-l {
|
|
width: 100%;
|
|
}
|
|
|
|
.w-auto-l {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
OVERFLOWS
|
|
|
|
*/
|
|
|
|
.of-vis {
|
|
overflow: visible;
|
|
}
|
|
|
|
.of-hid,
|
|
.oh {
|
|
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: 30em) {
|
|
.of-vis-ns {
|
|
overflow: visible;
|
|
}
|
|
|
|
.of-hid-ns,
|
|
.oh {
|
|
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: 30em) and (max-width: 60em) {
|
|
.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: 60em) {
|
|
.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;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.pos-stat-ns {
|
|
position: static;
|
|
}
|
|
|
|
.pos-rel-ns {
|
|
position: relative;
|
|
}
|
|
|
|
.pos-abs-ns {
|
|
position: absolute;
|
|
}
|
|
|
|
.pos-fix-ns {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.pos-stat-m {
|
|
position: static;
|
|
}
|
|
|
|
.pos-rel-m {
|
|
position: relative;
|
|
}
|
|
|
|
.pos-abs-m {
|
|
position: absolute;
|
|
}
|
|
|
|
.pos-fix-m {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.pos-stat-l {
|
|
position: static;
|
|
}
|
|
|
|
.pos-rel-l {
|
|
position: relative;
|
|
}
|
|
|
|
.pos-abs-l {
|
|
position: absolute;
|
|
}
|
|
|
|
.pos-fix-l {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
SKINS
|
|
|
|
*/
|
|
|
|
/* Text colors */
|
|
|
|
.black-100 {
|
|
color: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
.black-90 {
|
|
color: rgba(0, 0, 0, .9);
|
|
}
|
|
|
|
.black-80 {
|
|
color: rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.black-70 {
|
|
color: rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
.black-60 {
|
|
color: rgba(0, 0, 0, .6);
|
|
}
|
|
|
|
.black-50 {
|
|
color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.black-40 {
|
|
color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.black-30 {
|
|
color: rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.black-20 {
|
|
color: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.black-10 {
|
|
color: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.black-05 {
|
|
color: rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
.bg-black-100 {
|
|
background-color: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
.bg-black-90 {
|
|
background-color: rgba(0, 0, 0, .9);
|
|
}
|
|
|
|
.bg-black-80 {
|
|
background-color: rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.bg-black-70 {
|
|
background-color: rgba(0, 0, 0, .7);
|
|
}
|
|
|
|
.bg-black-60 {
|
|
background-color: rgba(0, 0, 0, .6);
|
|
}
|
|
|
|
.bg-black-50 {
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.bg-black-40 {
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.bg-black-30 {
|
|
background-color: rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.bg-black-20 {
|
|
background-color: rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.bg-black-10 {
|
|
background-color: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.bg-black-05 {
|
|
background-color: rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
.white-100 {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.white-90 {
|
|
color: rgba(255, 255, 255, .9);
|
|
}
|
|
|
|
.white-80 {
|
|
color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
.white-70 {
|
|
color: rgba(255, 255, 255, .7);
|
|
}
|
|
|
|
.white-60 {
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.white-50 {
|
|
color: rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.white-40 {
|
|
color: rgba(255, 255, 255, .4);
|
|
}
|
|
|
|
.white-30 {
|
|
color: rgba(255, 255, 255, .3);
|
|
}
|
|
|
|
.white-20 {
|
|
color: rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
.white-10 {
|
|
color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
.bg-white-100 {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.bg-white-90 {
|
|
background-color: rgba(255, 255, 255, .9);
|
|
}
|
|
|
|
.bg-white-80 {
|
|
background-color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
.bg-white-70 {
|
|
background-color: rgba(255, 255, 255, .7);
|
|
}
|
|
|
|
.bg-white-60 {
|
|
background-color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.bg-white-50 {
|
|
background-color: rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.bg-white-40 {
|
|
background-color: rgba(255, 255, 255, .4);
|
|
}
|
|
|
|
.bg-white-30 {
|
|
background-color: rgba(255, 255, 255, .3);
|
|
}
|
|
|
|
.bg-white-20 {
|
|
background-color: rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
.bg-white-10 {
|
|
background-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
.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: rgba(185, 237, 218, 0.65);
|
|
}
|
|
|
|
.bg-near-white {
|
|
background-color: rgba(218, 255, 243, 0.51);
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.bg-blue {
|
|
background-color: #0074D9;
|
|
}
|
|
|
|
.bg-light-blue {
|
|
background-color: #64a8ff;
|
|
}
|
|
|
|
.bg-lightest-blue {
|
|
background-color: #a2dfff;
|
|
}
|
|
|
|
.bg-dark-blue {
|
|
background-color: #0045a1;
|
|
}
|
|
|
|
.bg-darkest-blue {
|
|
background-color: #002f86;
|
|
}
|
|
|
|
.bg-yellow {
|
|
background-color: #fff93c;
|
|
}
|
|
|
|
.bg-light-yellow {
|
|
background-color: #fffa60;
|
|
}
|
|
|
|
.bg-lightest-yellow {
|
|
background-color: #fffca6;
|
|
}
|
|
|
|
.bg-dark-yellow {
|
|
background-color: #e2c100;
|
|
}
|
|
|
|
.bg-darkest-yellow {
|
|
background-color: #c4a600;
|
|
}
|
|
|
|
.bg-orange {
|
|
background-color: #FF851B;
|
|
}
|
|
|
|
.bg-light-orange {
|
|
background-color: #ffa942;
|
|
}
|
|
|
|
.bg-lightest-orange {
|
|
background-color: #ffc55d;
|
|
}
|
|
|
|
.bg-dark-orange {
|
|
background-color: #d05e00;
|
|
}
|
|
|
|
.bg-darkest-orange {
|
|
background-color: #b14400;
|
|
}
|
|
|
|
.bg-red {
|
|
background-color: #d82c2c;
|
|
}
|
|
|
|
.bg-light-red {
|
|
background-color: #f94f44;
|
|
}
|
|
|
|
.bg-lightest-red {
|
|
background-color: #ff6c5c;
|
|
}
|
|
|
|
.bg-dark-red {
|
|
background-color: #bd001a;
|
|
}
|
|
|
|
.bg-darkest-red {
|
|
background-color: #9d0003;
|
|
}
|
|
|
|
.bg-teal {
|
|
background-color: #27bfa8;
|
|
}
|
|
|
|
.bg-light-teal {
|
|
background-color: #4eddc5;
|
|
}
|
|
|
|
.bg-lightest-teal {
|
|
background-color: #6ffae0;
|
|
}
|
|
|
|
.bg-dark-teal {
|
|
background-color: #25a28f;
|
|
}
|
|
|
|
.bg-darkest-teal {
|
|
background-color: #008876;
|
|
}
|
|
|
|
.bg-green {
|
|
background-color: #3D9970;
|
|
}
|
|
|
|
.bg-light-green {
|
|
background-color: #5ab48a;
|
|
}
|
|
|
|
.bg-lightest-green {
|
|
background-color: #75d0a4;
|
|
}
|
|
|
|
.bg-dark-green {
|
|
background-color: #1e7f58;
|
|
}
|
|
|
|
.bg-darkest-green {
|
|
background-color: #006540;
|
|
}
|
|
|
|
.bg-pink {
|
|
background-color: #F012BE;
|
|
}
|
|
|
|
.bg-light-pink {
|
|
background-color: #ff57e8;
|
|
}
|
|
|
|
.bg-lightest-pink {
|
|
background-color: #ff81ff;
|
|
}
|
|
|
|
.bg-dark-pink {
|
|
background-color: #d100a3;
|
|
}
|
|
|
|
.bg-darkest-pink {
|
|
background-color: #b20088;
|
|
}
|
|
|
|
.bg-purple {
|
|
background-color: #980bc6;
|
|
}
|
|
|
|
.bg-light-purple {
|
|
background-color: #b536e2;
|
|
}
|
|
|
|
.bg-lightest-purple {
|
|
background-color: #d355ff;
|
|
}
|
|
|
|
.bg-dark-purple {
|
|
background-color: #7b00a9;
|
|
}
|
|
|
|
.bg-darkest-purple {
|
|
background-color: #5f008e;
|
|
}
|
|
|
|
/* Skins for specific pseudoclasses */
|
|
|
|
.focus-black:focus {
|
|
color: #333;
|
|
}
|
|
|
|
.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: #333;
|
|
}
|
|
|
|
.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: #333;
|
|
}
|
|
|
|
.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: #333;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
|
|
SVG FILLS
|
|
|
|
*/
|
|
|
|
.fill-black {
|
|
fill: #333;
|
|
}
|
|
|
|
.fill-near-black {
|
|
fill: #111;
|
|
}
|
|
|
|
.fill-dark-gray {
|
|
fill: #333;
|
|
}
|
|
|
|
.fill-mid-gray {
|
|
fill: #555;
|
|
}
|
|
|
|
.fill-gray {
|
|
fill: #777;
|
|
}
|
|
|
|
.fill-silver {
|
|
fill: #999;
|
|
}
|
|
|
|
.fill-light-silver {
|
|
fill: #aaa;
|
|
}
|
|
|
|
.fill-moon-gray {
|
|
fill: #ccc;
|
|
}
|
|
|
|
.fill-light-gray {
|
|
fill: #eee;
|
|
}
|
|
|
|
.fill-near-white {
|
|
fill: #f4f4f4;
|
|
}
|
|
|
|
.fill-white {
|
|
fill: #fff;
|
|
}
|
|
|
|
.fill-blue {
|
|
fill: #0074D9;
|
|
}
|
|
|
|
.fill-light-blue {
|
|
fill: #64a8ff;
|
|
}
|
|
|
|
.fill-lightest-blue {
|
|
fill: #a2dfff;
|
|
}
|
|
|
|
.fill-dark-blue {
|
|
fill: #0045a1;
|
|
}
|
|
|
|
.fill-darkest-blue {
|
|
fill: #002f86;
|
|
}
|
|
|
|
.fill-yellow {
|
|
fill: #fff93c;
|
|
}
|
|
|
|
.fill-light-yellow {
|
|
fill: #fffa60;
|
|
}
|
|
|
|
.fill-lightest-yellow {
|
|
fill: #fffca6;
|
|
}
|
|
|
|
.fill-dark-yellow {
|
|
fill: #e2c100;
|
|
}
|
|
|
|
.fill-darkest-yellow {
|
|
fill: #c4a600;
|
|
}
|
|
|
|
.fill-orange {
|
|
fill: #FF851B;
|
|
}
|
|
|
|
.fill-light-orange {
|
|
fill: #ffa942;
|
|
}
|
|
|
|
.fill-lightest-orange {
|
|
fill: #ffc55d;
|
|
}
|
|
|
|
.fill-dark-orange {
|
|
fill: #d05e00;
|
|
}
|
|
|
|
.fill-darkest-orange {
|
|
fill: #b14400;
|
|
}
|
|
|
|
.fill-red {
|
|
fill: #d82c2c;
|
|
}
|
|
|
|
.fill-light-red {
|
|
fill: #f94f44;
|
|
}
|
|
|
|
.fill-lightest-red {
|
|
fill: #ff6c5c;
|
|
}
|
|
|
|
.fill-dark-red {
|
|
fill: #bd001a;
|
|
}
|
|
|
|
.fill-darkest-red {
|
|
fill: #9d0003;
|
|
}
|
|
|
|
.fill-teal {
|
|
fill: #27bfa8;
|
|
}
|
|
|
|
.fill-light-teal {
|
|
fill: #4eddc5;
|
|
}
|
|
|
|
.fill-lightest-teal {
|
|
fill: #6ffae0;
|
|
}
|
|
|
|
.fill-dark-teal {
|
|
fill: #25a28f;
|
|
}
|
|
|
|
.fill-darkest-teal {
|
|
fill: #008876;
|
|
}
|
|
|
|
.fill-green {
|
|
fill: #3D9970;
|
|
}
|
|
|
|
.fill-light-green {
|
|
fill: #5ab48a;
|
|
}
|
|
|
|
.fill-lightest-green {
|
|
fill: #75d0a4;
|
|
}
|
|
|
|
.fill-dark-green {
|
|
fill: #1e7f58;
|
|
}
|
|
|
|
.fill-darkest-green {
|
|
fill: #006540;
|
|
}
|
|
|
|
.fill-pink {
|
|
fill: #F012BE;
|
|
}
|
|
|
|
.fill-light-pink {
|
|
fill: #ff57e8;
|
|
}
|
|
|
|
.fill-lightest-pink {
|
|
fill: #ff81ff;
|
|
}
|
|
|
|
.fill-dark-pink {
|
|
fill: #d100a3;
|
|
}
|
|
|
|
.fill-darkest-pink {
|
|
fill: #b20088;
|
|
}
|
|
|
|
.fill-purple {
|
|
fill: #980bc6;
|
|
}
|
|
|
|
.fill-light-purple {
|
|
fill: #b536e2;
|
|
}
|
|
|
|
.fill-lightest-purple {
|
|
fill: #d355ff;
|
|
}
|
|
|
|
.fill-dark-purple {
|
|
fill: #7b00a9;
|
|
}
|
|
|
|
.fill-darkest-purple {
|
|
fill: #5f008e;
|
|
}
|
|
|
|
/*
|
|
|
|
SVG STROKES
|
|
|
|
*/
|
|
|
|
.sw-4 {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.stroke-black {
|
|
stroke: #333;
|
|
}
|
|
|
|
.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
|
|
xl = extra large
|
|
xxxl = extra extra large
|
|
xxxxl = extra extra extra large
|
|
|
|
*/
|
|
|
|
.pan {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs {
|
|
padding: .25rem;
|
|
}
|
|
|
|
.pas {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.pam {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pal {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.paxl {
|
|
padding: 4rem;
|
|
}
|
|
|
|
.paxxl {
|
|
padding: 8rem;
|
|
}
|
|
|
|
.paxxxl {
|
|
padding: 16rem;
|
|
}
|
|
|
|
.pln {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs {
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
.pls {
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.plm {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.pll {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.plxl {
|
|
padding-left: 4rem;
|
|
}
|
|
|
|
.plxxl {
|
|
padding-left: 8rem;
|
|
}
|
|
|
|
.plxxxl {
|
|
padding-left: 16rem;
|
|
}
|
|
|
|
.prn {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs {
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.prs {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.prm {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.prl {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.prxl {
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.prxxl {
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.prxxxl {
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.pbn {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs {
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pbs {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pbm {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pbl {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pbxl {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pbxxl {
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pbxxxl {
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.ptn {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs {
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.pts {
|
|
padding-top: .5rem;
|
|
}
|
|
|
|
.ptm {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.ptl {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.ptxl {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.ptxxl {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
.ptxxxl {
|
|
padding-top: 16rem;
|
|
}
|
|
|
|
.pvn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs {
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pvs {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pvm {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pvl {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pvxl {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pvxxl {
|
|
padding-top: 8rem;
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pvxxxl {
|
|
padding-top: 16rem;
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.phn {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.phxs {
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.phs {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.phm {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.phl {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.phxl {
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.phxxl {
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.phxxxl {
|
|
padding-left: 16rem;
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.man {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs {
|
|
margin: .25rem;
|
|
}
|
|
|
|
.mas {
|
|
margin: .5rem;
|
|
}
|
|
|
|
.mam {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.mal {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.maxl {
|
|
margin: 4rem;
|
|
}
|
|
|
|
.maxxl {
|
|
margin: 8rem;
|
|
}
|
|
|
|
.maxxxl {
|
|
margin: 16rem;
|
|
}
|
|
|
|
.mln {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs {
|
|
margin-left: .25rem;
|
|
}
|
|
|
|
.mls {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.mlm {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mll {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.mlxl {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.mlxxl {
|
|
margin-left: 8rem;
|
|
}
|
|
|
|
.mlxxxl {
|
|
margin-left: 16rem;
|
|
}
|
|
|
|
.mrn {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs {
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mrs {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mrm {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mrl {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mrxl {
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mrxxl {
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mrxxxl {
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
.mbn {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mbs {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mbm {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mbl {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mbxl {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mbxxl {
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mbxxxl {
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mtn {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.mts {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.mtm {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.mtl {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mtxl {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.mtxxl {
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.mtxxxl {
|
|
margin-top: 16rem;
|
|
}
|
|
|
|
.mvn {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs {
|
|
margin-top: .25rem;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mvs {
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mvm {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mvl {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mvxl {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mvxxl {
|
|
margin-top: 8rem;
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mvxxxl {
|
|
margin-top: 16rem;
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mhn {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhs {
|
|
margin-left: .5rem;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mhm {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mhl {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mhxl {
|
|
margin-left: 4rem;
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mhxxl {
|
|
margin-left: 8rem;
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mhxxxl {
|
|
margin-left: 16rem;
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.pan-ns {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-ns {
|
|
padding: .25rem;
|
|
}
|
|
|
|
.pas-ns {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.pam-ns {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pal-ns {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.paxl-ns {
|
|
padding: 4rem;
|
|
}
|
|
|
|
.paxxl-ns {
|
|
padding: 8rem;
|
|
}
|
|
|
|
.paxxxl-ns {
|
|
padding: 16rem;
|
|
}
|
|
|
|
.pln-ns {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-ns {
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
.pls-ns {
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.plm-ns {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.pll-ns {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.plxl-ns {
|
|
padding-left: 4rem;
|
|
}
|
|
|
|
.plxxl-ns {
|
|
padding-left: 8rem;
|
|
}
|
|
|
|
.plxxxl-ns {
|
|
padding-left: 16rem;
|
|
}
|
|
|
|
.prn-ns {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-ns {
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.prs-ns {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.prm-ns {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.prl-ns {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.prxl-ns {
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.prxxl-ns {
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.prxxxl-ns {
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.pbn-ns {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-ns {
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pbs-ns {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pbm-ns {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pbl-ns {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pbxl-ns {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pbxxl-ns {
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pbxxxl-ns {
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.ptn-ns {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-ns {
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.pts-ns {
|
|
padding-top: .5rem;
|
|
}
|
|
|
|
.ptm-ns {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.ptl-ns {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.ptxl-ns {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.ptxxl-ns {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
.ptxxxl-ns {
|
|
padding-top: 16rem;
|
|
}
|
|
|
|
.pvn-ns {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-ns {
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pvs-ns {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pvm-ns {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pvl-ns {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pvxl-ns {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pvxxl-ns {
|
|
padding-top: 8rem;
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pvxxxl-ns {
|
|
padding-top: 16rem;
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.phn-ns {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.pvxs-ns {
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.phs-ns {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.phm-ns {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.phl-ns {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.phxl-ns {
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.phxxl-ns {
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.phxxxl-ns {
|
|
padding-left: 16rem;
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.man-ns {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-ns {
|
|
margin: .25rem;
|
|
}
|
|
|
|
.mas-ns {
|
|
margin: .5rem;
|
|
}
|
|
|
|
.mam-ns {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.mal-ns {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.maxl-ns {
|
|
margin: 4rem;
|
|
}
|
|
|
|
.maxxl-ns {
|
|
margin: 8rem;
|
|
}
|
|
|
|
.maxxxl-ns {
|
|
margin: 16rem;
|
|
}
|
|
|
|
.mln-ns {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-ns {
|
|
margin-left: .25rem;
|
|
}
|
|
|
|
.mls-ns {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.mlm-ns {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mll-ns {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.mlxl-ns {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.mlxxl-ns {
|
|
margin-left: 8rem;
|
|
}
|
|
|
|
.mlxxxl-ns {
|
|
margin-left: 16rem;
|
|
}
|
|
|
|
.mrn-ns {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-ns {
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mrs-ns {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mrm-ns {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mrl-ns {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mrxl-ns {
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mrxxl-ns {
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mrxxxl-ns {
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
.mbn-ns {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-ns {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mbs-ns {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mbm-ns {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mbl-ns {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mbxl-ns {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mbxxl-ns {
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mbxxxl-ns {
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mtn-ns {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-ns {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.mts-ns {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.mtm-ns {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.mtl-ns {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mtxl-ns {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.mtxxl-ns {
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.mtxxxl-ns {
|
|
margin-top: 16rem;
|
|
}
|
|
|
|
.mvn-ns {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-ns {
|
|
margin-top: .25rem;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mvs-ns {
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mvm-ns {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mvl-ns {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mvxl-ns {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mvxxl-ns {
|
|
margin-top: 8rem;
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mvxxxl-ns {
|
|
margin-top: 16rem;
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mhn-ns {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhs-ns {
|
|
margin-left: .5rem;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mhm-ns {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mhl-ns {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mhxl-ns {
|
|
margin-left: 4rem;
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mhxxl-ns {
|
|
margin-left: 8rem;
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mhxxxl-ns {
|
|
margin-left: 16rem;
|
|
margin-right: 16rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.pan-m {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-m {
|
|
padding: .25rem;
|
|
}
|
|
|
|
.pas-m {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.pam-m {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pal-m {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.paxl-m {
|
|
padding: 4rem;
|
|
}
|
|
|
|
.paxxl-m {
|
|
padding: 8rem;
|
|
}
|
|
|
|
.paxxxl-m {
|
|
padding: 16rem;
|
|
}
|
|
|
|
.pln-m {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-m {
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
.pls-m {
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.plm-m {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.pll-m {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.plxl-m {
|
|
padding-left: 4rem;
|
|
}
|
|
|
|
.plxxl-m {
|
|
padding-left: 8rem;
|
|
}
|
|
|
|
.plxxxl-m {
|
|
padding-left: 16rem;
|
|
}
|
|
|
|
.prn-m {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-m {
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.prs-m {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.prm-m {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.prl-m {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.prxl-m {
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.prxxl-m {
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.prxxxl-m {
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.pbn-m {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-m {
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pbs-m {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pbm-m {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pbl-m {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pbxl-m {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pbxxl-m {
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pbxxxl-m {
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.ptn-m {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-m {
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.pts-m {
|
|
padding-top: .5rem;
|
|
}
|
|
|
|
.ptm-m {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.ptl-m {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.ptxl-m {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.ptxxl-m {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
.ptxxxl-m {
|
|
padding-top: 16rem;
|
|
}
|
|
|
|
.pvn-m {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-m {
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pvs-m {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pvm-m {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pvl-m {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pvxl-m {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pvxxl-m {
|
|
padding-top: 8rem;
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pvxxxl-m {
|
|
padding-top: 16rem;
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.phn-m {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.pvxs-m {
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.phs-m {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.phm-m {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.phl-m {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.phxl-m {
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.phxxl-m {
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.phxxxl-m {
|
|
padding-left: 16rem;
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.man-m {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-m {
|
|
margin: .25rem;
|
|
}
|
|
|
|
.mas-m {
|
|
margin: .5rem;
|
|
}
|
|
|
|
.mam-m {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.mal-m {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.maxl-m {
|
|
margin: 4rem;
|
|
}
|
|
|
|
.maxxl-m {
|
|
margin: 8rem;
|
|
}
|
|
|
|
.maxxxl-m {
|
|
margin: 16rem;
|
|
}
|
|
|
|
.mln-m {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-m {
|
|
margin-left: .25rem;
|
|
}
|
|
|
|
.mls-m {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.mlm-m {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mll-m {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.mlxl-m {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.mlxxl-m {
|
|
margin-left: 8rem;
|
|
}
|
|
|
|
.mlxxxl-m {
|
|
margin-left: 16rem;
|
|
}
|
|
|
|
.mrn-m {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-m {
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mrs-m {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mrm-m {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mrl-m {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mrxl-m {
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mrxxl-m {
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mrxxxl-m {
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
.mbn-m {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-m {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mbs-m {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mbm-m {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mbl-m {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mbxl-m {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mbxxl-m {
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mbxxxl-m {
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mtn-m {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-m {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.mts-m {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.mtm-m {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.mtl-m {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mtxl-m {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.mtxxl-m {
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.mtxxxl-m {
|
|
margin-top: 16rem;
|
|
}
|
|
|
|
.mvn-m {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-m {
|
|
margin-top: .25rem;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mvs-m {
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mvm-m {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mvl-m {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mvxl-m {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mvxxl-m {
|
|
margin-top: 8rem;
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mvxxxl-m {
|
|
margin-top: 16rem;
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mhn-m {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhxs-m {
|
|
margin-left: .25rem;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mhs-m {
|
|
margin-left: .5rem;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mhm-m {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mhl-m {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mhxl-m {
|
|
margin-left: 4rem;
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mhxxl-m {
|
|
margin-left: 8rem;
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mhxxxl-m {
|
|
margin-left: 16rem;
|
|
margin-right: 16rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.pan-l {
|
|
padding: 0;
|
|
}
|
|
|
|
.paxs-l {
|
|
padding: .25rem;
|
|
}
|
|
|
|
.pas-l {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.pam-l {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pal-l {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.paxl-l {
|
|
padding: 4rem;
|
|
}
|
|
|
|
.paxxl-l {
|
|
padding: 8rem;
|
|
}
|
|
|
|
.paxxxl-l {
|
|
padding: 16rem;
|
|
}
|
|
|
|
.pln-l {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.plxs-l {
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
.pls-l {
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
.plm-l {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.pll-l {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.plxl-l {
|
|
padding-left: 4rem;
|
|
}
|
|
|
|
.plxxl-l {
|
|
padding-left: 8rem;
|
|
}
|
|
|
|
.plxxxl-l {
|
|
padding-left: 16rem;
|
|
}
|
|
|
|
.prn-l {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prxs-l {
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.prs-l {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.prm-l {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.prl-l {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.prxl-l {
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.prxxl-l {
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.prxxxl-l {
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.pbn-l {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbxs-l {
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pbs-l {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pbm-l {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pbl-l {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pbxl-l {
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pbxxl-l {
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pbxxxl-l {
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.ptn-l {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ptxs-l {
|
|
padding-top: .25rem;
|
|
}
|
|
|
|
.pts-l {
|
|
padding-top: .5rem;
|
|
}
|
|
|
|
.ptm-l {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.ptl-l {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.ptxl-l {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.ptxxl-l {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
.ptxxxl-l {
|
|
padding-top: 16rem;
|
|
}
|
|
|
|
.pvn-l {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pvxs-l {
|
|
padding-top: .25rem;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
.pvs-l {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.pvm-l {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.pvl-l {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.pvxl-l {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.pvxxl-l {
|
|
padding-top: 8rem;
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.pvxxxl-l {
|
|
padding-top: 16rem;
|
|
padding-bottom: 16rem;
|
|
}
|
|
|
|
.phn-l {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.phxs-l {
|
|
padding-left: .25rem;
|
|
padding-right: .25rem;
|
|
}
|
|
|
|
.phs-l {
|
|
padding-left: .5rem;
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
.phm-l {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.phl-l {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.phxl-l {
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
.phxxl-l {
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
}
|
|
|
|
.phxxxl-l {
|
|
padding-left: 16rem;
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.man-l {
|
|
margin: 0;
|
|
}
|
|
|
|
.maxs-l {
|
|
margin: .25rem;
|
|
}
|
|
|
|
.mas-l {
|
|
margin: .5rem;
|
|
}
|
|
|
|
.mam-l {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.mal-l {
|
|
margin: 2rem;
|
|
}
|
|
|
|
.maxl-l {
|
|
margin: 4rem;
|
|
}
|
|
|
|
.maxxl-l {
|
|
margin: 8rem;
|
|
}
|
|
|
|
.maxxxl-l {
|
|
margin: 16rem;
|
|
}
|
|
|
|
.mln-l {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mlxs-l {
|
|
margin-left: .25rem;
|
|
}
|
|
|
|
.mls-l {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.mlm-l {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.mll-l {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.mlxl-l {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
.mlxxl-l {
|
|
margin-left: 8rem;
|
|
}
|
|
|
|
.mlxxxl-l {
|
|
margin-left: 16rem;
|
|
}
|
|
|
|
.mrn-l {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrxs-l {
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mrs-l {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mrm-l {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mrl-l {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mrxl-l {
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mrxxl-l {
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mrxxxl-l {
|
|
margin-right: 16rem;
|
|
}
|
|
|
|
.mbn-l {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbxs-l {
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mbs-l {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mbm-l {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mbl-l {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mbxl-l {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mbxxl-l {
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mbxxxl-l {
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mtn-l {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mtxs-l {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.mts-l {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.mtm-l {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.mtl-l {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mtxl-l {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.mtxxl-l {
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.mtxxxl-l {
|
|
margin-top: 16rem;
|
|
}
|
|
|
|
.mvn-l {
|
|
margin-top: 0;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.mvxs-l {
|
|
margin-top: .25rem;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.mvs-l {
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.mvm-l {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.mvl-l {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.mvxl-l {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.mvxxl-l {
|
|
margin-top: 8rem;
|
|
margin-bottom: 8rem;
|
|
}
|
|
|
|
.mvxxxl-l {
|
|
margin-top: 16rem;
|
|
margin-bottom: 16rem;
|
|
}
|
|
|
|
.mhn-l {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mhxs-l {
|
|
margin-left: .25rem;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.mhs-l {
|
|
margin-left: .5rem;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.mhm-l {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.mhl-l {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.mhxl-l {
|
|
margin-left: 4rem;
|
|
margin-right: 4rem;
|
|
}
|
|
|
|
.mhxxl-l {
|
|
margin-left: 8rem;
|
|
margin-right: 8rem;
|
|
}
|
|
|
|
.mhxxxl-l {
|
|
margin-left: 16rem;
|
|
margin-right: 16rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
TEXT DECORATION
|
|
|
|
*/
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-underline {
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.underline-ns {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-underline-ns {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.underline-m {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-underline-m {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.underline-l {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-underline-l {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
TEXT ALIGN
|
|
|
|
*/
|
|
|
|
.tl {
|
|
text-align: left;
|
|
}
|
|
|
|
.tr {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc {
|
|
text-align: center;
|
|
}
|
|
|
|
.tj {
|
|
text-align: justify;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.tl-ns {
|
|
text-align: left;
|
|
}
|
|
|
|
.tr-ns {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-ns {
|
|
text-align: center;
|
|
}
|
|
|
|
.tj-ns {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.tl-m {
|
|
text-align: left;
|
|
}
|
|
|
|
.tr-m {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-m {
|
|
text-align: center;
|
|
}
|
|
|
|
.tj-m {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.tl-l {
|
|
text-align: left;
|
|
}
|
|
|
|
.tr-l {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-l {
|
|
text-align: center;
|
|
}
|
|
|
|
.tj-l {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
TEXT TRANSFORM
|
|
|
|
*/
|
|
|
|
.ttc {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ttl {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.ttn {
|
|
text-transform: none;
|
|
}
|
|
|
|
.ttu {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.caps {
|
|
text-transform: uppercase;
|
|
letter-spacing: .15em;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.ttc-ns {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ttl-ns {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.ttn-ns {
|
|
text-transform: none;
|
|
}
|
|
|
|
.ttu-ns {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.caps-ns {
|
|
text-transform: uppercase;
|
|
letter-spacing: .15em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.ttc-m {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ttl-m {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.ttn-m {
|
|
text-transform: none;
|
|
}
|
|
|
|
.ttu-m {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.caps-m {
|
|
text-transform: uppercase;
|
|
letter-spacing: .15em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.ttc-l {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ttl-l {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.ttn-l {
|
|
text-transform: none;
|
|
}
|
|
|
|
.ttu-l {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.caps-l {
|
|
text-transform: uppercase;
|
|
letter-spacing: .15em;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
TYPE SCALE
|
|
|
|
*/
|
|
|
|
.mega {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.f1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.f2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.f3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.f4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.f5,
|
|
.small {
|
|
font-size: .85rem;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.mega-ns {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.f1-ns {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.f2-ns {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.f3-ns {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.f4-ns {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.f5-ns {
|
|
font-size: .85rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.mega-m {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.f1-m {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.f2-m {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.f3-m {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.f4-m {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.f5-m {
|
|
font-size: .85rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.mega-l {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.f1-l {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.f2-l {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.f3-l {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.f4-l {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.f5-l {
|
|
font-size: .85rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
TYPOGRAPHY
|
|
|
|
*/
|
|
|
|
.measure {
|
|
max-width: 30em;
|
|
}
|
|
|
|
.indent {
|
|
text-indent: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.measure-ns {
|
|
max-width: 30em;
|
|
}
|
|
|
|
.indent-ns {
|
|
text-indent: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.measure-m {
|
|
max-width: 30em;
|
|
}
|
|
|
|
.indent-m {
|
|
text-indent: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.measure-l {
|
|
max-width: 30em;
|
|
}
|
|
|
|
.indent-l {
|
|
text-indent: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
UTILITIES
|
|
|
|
*/
|
|
|
|
.aspect-ratio {
|
|
height: 0;
|
|
padding-top: 56.25%;
|
|
position: relative;
|
|
}
|
|
|
|
.aspect-ratio--object {
|
|
bottom: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 100;
|
|
}
|
|
|
|
.overflow-container {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.center {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/*
|
|
|
|
VISIBILITY
|
|
|
|
*/
|
|
|
|
/*
|
|
Text that is hidden but accessible
|
|
Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
*/
|
|
|
|
.clip {
|
|
position: fixed !important;
|
|
_position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px);
|
|
/* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.clip-ns {
|
|
position: fixed !important;
|
|
_position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px);
|
|
/* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.clip-m {
|
|
position: fixed !important;
|
|
_position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px);
|
|
/* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.clip-l {
|
|
position: fixed !important;
|
|
_position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px);
|
|
/* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
WHITE SPACE
|
|
|
|
*/
|
|
|
|
.ws-norm {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ws-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ws-pre {
|
|
white-space: pre;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.ws-norm-ns {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ws-nowrap-ns {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ws-pre-ns {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.ws-norm-m {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ws-nowrap-m {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ws-pre-m {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.ws-norm-l {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ws-nowrap-l {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ws-pre-l {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
|
|
/*
|
|
|
|
STYLES
|
|
|
|
Add custom styles here.
|
|
|
|
*/
|
|
|
|
/*
|
|
|
|
VERTICAL ALIGN
|
|
|
|
*/
|
|
|
|
.v-base {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.v-sub {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.v-sup {
|
|
vertical-align: super;
|
|
}
|
|
|
|
.v-txt-top {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.v-txt-btm {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.v-mid {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.v-top {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.v-btm {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
.v-base-ns {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.v-sub-ns {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.v-sup-ns {
|
|
vertical-align: super;
|
|
}
|
|
|
|
.v-txt-top-ns {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.v-txt-btm-ns {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.v-mid-ns {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.v-top-ns {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.v-btm-ns {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
.v-base-m {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.v-sub-m {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.v-sup-m {
|
|
vertical-align: super;
|
|
}
|
|
|
|
.v-txt-top-m {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.v-txt-btm-m {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.v-mid-m {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.v-top-m {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.v-btm-m {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) {
|
|
.v-base-l {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.v-sub-l {
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.v-sup-l {
|
|
vertical-align: super;
|
|
}
|
|
|
|
.v-txt-top-l {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.v-txt-btm-l {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.v-mid-l {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.v-top-l {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.v-btm-l {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
/*
|
|
HOVER EFFECTS
|
|
|
|
Put the hide-child class on a parent element and any nested element with the
|
|
child class will be hidden and displayed on hover or focus.
|
|
|
|
<div class="hide-child">
|
|
<div class="child"> Hidden until hover or focus </div>
|
|
<div class="child"> Hidden until hover or focus </div>
|
|
<div class="child"> Hidden until hover or focus </div>
|
|
<div class="child"> Hidden until hover or focus </div>
|
|
</div>
|
|
|
|
*/
|
|
|
|
.dim {
|
|
opacity: 1;
|
|
transition: opacity .15s ease-in;
|
|
}
|
|
|
|
.dim:hover {
|
|
opacity: .5;
|
|
transition: opacity .15s ease-in;
|
|
}
|
|
|
|
.dim:active,
|
|
.dim:focus {
|
|
opacity: .8;
|
|
transition: opacity .15s ease-out;
|
|
}
|
|
|
|
.hide-child .child {
|
|
opacity: 0;
|
|
transition: opacity .15s ease-in;
|
|
}
|
|
|
|
.hide-child:hover .child,
|
|
.hide-child:focus .child,
|
|
.hide-child:active .child {
|
|
opacity: 1;
|
|
transition: opacity .15s ease-in;
|
|
}
|
|
|
|
/*
|
|
|
|
DEBUG CHILDREN
|
|
|
|
*/
|
|
|
|
.debug * {
|
|
outline: 1px solid gold;
|
|
}
|
|
|
|
/* Uncomment out this line if you want to debug your layout */
|
|
|
|
/* @import './_debug'; */
|
|
.shuriken img {
|
|
margin-bottom: -6px;
|
|
width: 60px;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.shuriken img {
|
|
margin-bottom: -2px;
|
|
width: 20px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
.shuriken {
|
|
display: block;
|
|
}
|
|
.shuriken img {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
}
|