mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 13:36:50 +00:00
2831 lines
97 KiB
CSS
2831 lines
97 KiB
CSS
/* ========================================================================== QUERIES ========================================================================== */
|
|
/* Mixing for mobile first queries. Two breakpoints. Use like @include break(medium) { ***Styles*** } */
|
|
/* ========================================================================== COLORS ========================================================================== */
|
|
/* variables */
|
|
/* ========================================================================== BACKGROUND REPEAT ========================================================================== */
|
|
.bg-norep { background-repeat: no-repeat; }
|
|
|
|
.bg-x { background-repeat: repeat-x; }
|
|
|
|
.bg-y { background-repeat: repeat-y; }
|
|
|
|
.bg-rep { background-repeat: repeat; }
|
|
|
|
@media screen and (min-width: 48em) { .bg-norep-ns { background-repeat: no-repeat; }
|
|
.bg-x-ns { background-repeat: repeat-x; }
|
|
.bg-y-ns { background-repeat: repeat-y; }
|
|
.bg-rep-ns { background-repeat: repeat; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .bg-norep-m { background-repeat: no-repeat; }
|
|
.bg-x-m { background-repeat: repeat-x; }
|
|
.bg-y-m { background-repeat: repeat-y; }
|
|
.bg-rep-m { background-repeat: repeat; } }
|
|
@media screen and (min-width: 64em) { .bg-norep-l { background-repeat: no-repeat; }
|
|
.bg-x-l { background-repeat: repeat-x; }
|
|
.bg-y-l { background-repeat: repeat-y; }
|
|
.bg-rep-l { background-repeat: repeat; } }
|
|
/* ========================================================================== BACKGROUND SIZE ========================================================================== */
|
|
.bg-cv { -webkit-background-size: cover; background-size: cover; }
|
|
|
|
.bg-cn { -webkit-background-size: contain; background-size: contain; }
|
|
|
|
.bg-quarter { -webkit-background-size: 25%; background-size: 25%; }
|
|
|
|
.bg-half { -webkit-background-size: 50%; background-size: 50%; }
|
|
|
|
.bg-three-quarters { -webkit-background-size: 75%; background-size: 75%; }
|
|
|
|
.bg-full { -webkit-background-size: 100%; background-size: 100%; }
|
|
|
|
.bg-auto { -webkit-background-size: auto; background-size: auto; }
|
|
|
|
@media screen and (min-width: 48em) { .bg-cv-ns { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-ns { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-quarter-ns { -webkit-background-size: 25%; background-size: 25%; }
|
|
.bg-half-ns { -webkit-background-size: 50%; background-size: 50%; }
|
|
.bg-three-quarters-ns { -webkit-background-size: 75%; background-size: 75%; }
|
|
.bg-full-ns { -webkit-background-size: 100%; background-size: 100%; }
|
|
.bg-auto-ns { -webkit-background-size: auto; background-size: auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .bg-cv-m { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-m { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-quarter-m { -webkit-background-size: 25%; background-size: 25%; }
|
|
.bg-half-m { -webkit-background-size: 50%; background-size: 50%; }
|
|
.bg-three-quarters-m { -webkit-background-size: 75%; background-size: 75%; }
|
|
.bg-full-m { -webkit-background-size: 100%; background-size: 100%; }
|
|
.bg-auto-m { -webkit-background-size: auto; background-size: auto; } }
|
|
@media screen and (min-width: 64em) { .bg-cv-l { -webkit-background-size: cover; background-size: cover; }
|
|
.bg-cn-l { -webkit-background-size: contain; background-size: contain; }
|
|
.bg-quarter-l { -webkit-background-size: 25%; background-size: 25%; }
|
|
.bg-half-l { -webkit-background-size: 50%; background-size: 50%; }
|
|
.bg-three-quarters-l { -webkit-background-size: 75%; background-size: 75%; }
|
|
.bg-full-l { -webkit-background-size: 100%; background-size: 100%; }
|
|
.bg-auto-l { -webkit-background-size: auto; background-size: auto; } }
|
|
/* ========================================================================== BORDER COLORS ========================================================================== */
|
|
.black { border-color: black; }
|
|
|
|
.near-black { border-color: #111111; }
|
|
|
|
.dark-gray { border-color: #333333; }
|
|
|
|
.mid-gray { border-color: #666666; }
|
|
|
|
.gray { border-color: #888888; }
|
|
|
|
.silver { border-color: #999999; }
|
|
|
|
.light-silver { border-color: #aaaaaa; }
|
|
|
|
.light-gray { border-color: #cccccc; }
|
|
|
|
.near-white { border-color: #eeeeee; }
|
|
|
|
.white { border-color: white; }
|
|
|
|
.aqua { border-color: #7fdbff; }
|
|
|
|
.blue { border-color: #0074d9; }
|
|
|
|
.navy { border-color: #001f3f; }
|
|
|
|
.teal { border-color: #39cccc; }
|
|
|
|
.green { border-color: #2ecc40; }
|
|
|
|
.olive { border-color: #3d9970; }
|
|
|
|
.lime { border-color: #01ff70; }
|
|
|
|
.yellow { border-color: #ffdc00; }
|
|
|
|
.orange { border-color: #ff851b; }
|
|
|
|
.red { border-color: #ff4136; }
|
|
|
|
.fuchsia { border-color: #f012be; }
|
|
|
|
.purple { border-color: #b10dc9; }
|
|
|
|
.maroon { border-color: #85144b; }
|
|
|
|
/* ========================================================================== BORDER RADIUS ========================================================================== */
|
|
.brn { border-radius: 0; }
|
|
|
|
.br { 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: 48em) { .brn-ns { border-radius: 0; }
|
|
.br-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: 48em) and (max-width: 64em) { .brn-m { border-radius: 0; }
|
|
.br-m { border-radius: .125rem; }
|
|
.br2-m { border-radius: .25rem; }
|
|
.br3-m { border-radius: .5rem; }
|
|
.br4-m { border-radius: 1rem; }
|
|
.br5-m { border-radius: 2rem; }
|
|
.br-circ-m { border-radius: 9999px; }
|
|
.br-100-m { border-radius: 100%; } }
|
|
@media screen and (min-width: 64em) { .brn-l { border-radius: 0; }
|
|
.br-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 ========================================================================== */
|
|
.ba-none { border-style: none; }
|
|
|
|
.ba-hidden { border-style: hidden; }
|
|
|
|
.ba-dotted { border-style: dotted; }
|
|
|
|
.ba-dashed { border-style: dashed; }
|
|
|
|
.ba-solid { border-style: solid; }
|
|
|
|
/* ========================================================================== BORDER WIDTHS
|
|
LEGEND
|
|
b = border
|
|
a = all t = top b = bottom l = left r = right
|
|
w = width
|
|
0-5 = step in sizing scale
|
|
========================================================================== */
|
|
.baw0 { border-width: 0; }
|
|
|
|
.baw1 { border-width: .125rem; }
|
|
|
|
.baw2 { border-width: .25rem; }
|
|
|
|
.baw3 { border-width: .5rem; }
|
|
|
|
.baw4 { border-width: .75rem; }
|
|
|
|
.baw5 { border-width: 1rem; }
|
|
|
|
/* ========================================================================== BORDER BASE ========================================================================== */
|
|
.ba { border-style: solid; border-width: 1px; }
|
|
|
|
.bt { border-style: solid; border-left-width: 1px; }
|
|
|
|
.br { border-style: solid; border-right-width: 1px; }
|
|
|
|
.bb { border-style: solid; border-bottom-width: 1px; }
|
|
|
|
.bl { border-style: solid; border-left-width: 1px; }
|
|
|
|
@media screen and (min-width: 48em) { .ba-ns { border-style: solid; border-width: 1px; }
|
|
.bt-ns { border-style: solid; border-left-width: 1px; }
|
|
.br-ns { border-style: solid; border-right-width: 1px; }
|
|
.bb-ns { border-style: solid; border-bottom-width: 1px; }
|
|
.bl-ns { border-style: solid; border-left-width: 1px; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ba-m { border-style: solid; border-width: 1px; }
|
|
.bt-m { border-style: solid; border-left-width: 1px; }
|
|
.br-m { border-style: solid; border-right-width: 1px; }
|
|
.bb-m { border-style: solid; border-bottom-width: 1px; }
|
|
.bl-m { border-style: solid; border-left-width: 1px; } }
|
|
@media screen and (min-width: 64em) { .ba-l { border-style: solid; border-width: 1px; }
|
|
.bt-l { border-style: solid; border-left-width: 1px; }
|
|
.br-l { border-style: solid; border-right-width: 1px; }
|
|
.bb-l { border-style: solid; border-bottom-width: 1px; }
|
|
.bl-l { border-style: solid; border-left-width: 1px; } }
|
|
/* ========================================================================== CLEARS ========================================================================== */
|
|
.cn { clear: none; }
|
|
|
|
.cl { clear: left; }
|
|
|
|
.cr { clear: right; }
|
|
|
|
.cb { clear: both; }
|
|
|
|
/* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
|
.cf:before, .cf:after { content: " "; display: table; }
|
|
|
|
.cf:after { clear: both; }
|
|
|
|
.cf { *zoom: 1; }
|
|
|
|
/* ========================================================================== DIMENSION UTILITIES ========================================================================== */
|
|
.auto-wrap { display: block; width: auto !important; }
|
|
|
|
.auto-fill { display: block; overflow: hidden; width: auto !important; }
|
|
|
|
.dbf { display: block; width: 100%; }
|
|
|
|
/* ==========================================================================
|
|
DISPLAY
|
|
- Mobile First - Breakpoint: not-small - Breakpoint: medium - Breakpoint: large
|
|
========================================================================== */
|
|
.dn { display: none; }
|
|
|
|
.di { display: inline; }
|
|
|
|
.db { display: block; }
|
|
|
|
.dib { display: inline-block; }
|
|
|
|
.dli { display: list-item; }
|
|
|
|
.dit { display: inline-table; }
|
|
|
|
.dt { display: table; }
|
|
|
|
.dtc { display: table-cell; }
|
|
|
|
.dtcol { display: table-column; }
|
|
|
|
.dtcolg { display: table-column-group; }
|
|
|
|
.dtfg { display: table-footer-group; }
|
|
|
|
.dthg { display: table-header-group; }
|
|
|
|
.dtr { display: table-row; }
|
|
|
|
.dtrg { display: table-row-group; }
|
|
|
|
.df { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }
|
|
|
|
.dif { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; }
|
|
|
|
.dg { display: grid; }
|
|
|
|
.dig { display: inline-grid; }
|
|
|
|
.dri { display: run-in; }
|
|
|
|
@media screen and (min-width: 48em) { .dn-ns { display: none; }
|
|
.di-ns { display: inline; }
|
|
.db-ns { display: block; }
|
|
.dib-ns { display: inline-block; }
|
|
.dli-ns { display: list-item; }
|
|
.dit-ns { display: inline-table; }
|
|
.dt-ns { display: table; }
|
|
.dtc-ns { display: table-cell; }
|
|
.dtcol-ns { display: table-column; }
|
|
.dtcolg-ns { display: table-column-group; }
|
|
.dtfg-ns { display: table-footer-group; }
|
|
.dthg-ns { display: table-header-group; }
|
|
.dtr-ns { display: table-row; }
|
|
.dtrg-ns { display: table-row-group; }
|
|
.df-ns { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }
|
|
.dif-ns { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; }
|
|
.dg-ns { display: grid; }
|
|
.dig-ns { display: inline-grid; }
|
|
.dri-ns { display: run-in; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .dn-m { display: none; }
|
|
.di-m { display: inline; }
|
|
.db-m { display: block; }
|
|
.dib-m { display: inline-block; }
|
|
.dli-m { display: list-item; }
|
|
.dit-m { display: inline-table; }
|
|
.dt-m { display: table; }
|
|
.dtc-m { display: table-cell; }
|
|
.dtcol-m { display: table-column; }
|
|
.dtcolg-m { display: table-column-group; }
|
|
.dtfg-m { display: table-footer-group; }
|
|
.dthg-m { display: table-header-group; }
|
|
.dtr-m { display: table-row; }
|
|
.dtrg-m { display: table-row-group; }
|
|
.df-m { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }
|
|
.dif-m { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; }
|
|
.dg-m { display: grid; }
|
|
.dig-m { display: inline-grid; }
|
|
.dri-m { display: run-in; } }
|
|
@media screen and (min-width: 64em) { .dn-l { display: none; }
|
|
.di-l { display: inline; }
|
|
.db-l { display: block; }
|
|
.dib-l { display: inline-block; }
|
|
.dli-l { display: list-item; }
|
|
.dit-l { display: inline-table; }
|
|
.dt-l { display: table; }
|
|
.dtc-l { display: table-cell; }
|
|
.dtcol-l { display: table-column; }
|
|
.dtcolg-l { display: table-column-group; }
|
|
.dtfg-l { display: table-footer-group; }
|
|
.dthg-l { display: table-header-group; }
|
|
.dtr-l { display: table-row; }
|
|
.dtrg-l { display: table-row-group; }
|
|
.df-l { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }
|
|
.dif-l { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; }
|
|
.dg-l { display: grid; }
|
|
.dig-l { display: inline-grid; }
|
|
.dri-l { display: run-in; } }
|
|
/* ========================================================================== FLOATS ========================================================================== */
|
|
.fl { float: left; display: inline; }
|
|
|
|
.fr { float: right; display: inline; }
|
|
|
|
.fn { float: none; }
|
|
|
|
@media screen and (min-width: 48em) { .fl-ns { float: left; display: inline; }
|
|
.fr-ns { float: right; display: inline; }
|
|
.fn-ns { float: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .fl-m { float: left; display: inline; }
|
|
.fr-m { float: right; display: inline; }
|
|
.fn-m { float: none; } }
|
|
@media screen and (min-width: 64em) { .fl-l { float: left; display: inline; }
|
|
.fr-l { float: right; display: inline; }
|
|
.fn-l { float: none; } }
|
|
/* Font Family Groups */
|
|
.serif { font-family: georgia, serif; }
|
|
|
|
.sans-serif { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
|
|
|
.font-mono { font-family: monospace; }
|
|
|
|
@media screen and (min-width: 48em) { .serif-ns { font-family: georgia, serif; }
|
|
.sans-serif-ns { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
|
.font-mono-ns { font-family: monospace; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .serif-m { font-family: georgia, serif; }
|
|
.sans-serif-m { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
|
.font-mono-m { font-family: monospace; } }
|
|
@media screen and (min-width: 64em) { .serif-l { font-family: georgia, serif; }
|
|
.sans-serif-l { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
|
.font-mono-l { font-family: monospace; } }
|
|
/* Font Style */
|
|
.fsn { font-style: normal; }
|
|
|
|
.i { font-style: italic; }
|
|
|
|
/* ========================================================================== FONT WEIGHT ========================================================================== */
|
|
.fwn { font-weight: normal; }
|
|
|
|
.b { font-weight: bold; }
|
|
|
|
.fw-light { font-weight: lighter; }
|
|
|
|
.fw-bolder { font-weight: bolder; }
|
|
|
|
.fw1 { font-weight: 100; }
|
|
|
|
.fw2 { font-weight: 200; }
|
|
|
|
.fw3 { font-weight: 300; }
|
|
|
|
.fw4 { font-weight: 400; }
|
|
|
|
.fw5 { font-weight: 500; }
|
|
|
|
.fw6 { font-weight: 600; }
|
|
|
|
.fw7 { font-weight: 700; }
|
|
|
|
.fw8 { font-weight: 800; }
|
|
|
|
.fw9 { font-weight: 900; }
|
|
|
|
@media screen and (min-width: 48em) { .fwn-ns { font-weight: normal; }
|
|
.b-ns { font-weight: bold; }
|
|
.fw-light-ns { font-weight: lighter; }
|
|
.fw-bolder-ns { font-weight: bolder; }
|
|
.fw1-ns { font-weight: 100; }
|
|
.fw2-ns { font-weight: 200; }
|
|
.fw3-ns { font-weight: 300; }
|
|
.fw4-ns { font-weight: 400; }
|
|
.fw5-ns { font-weight: 500; }
|
|
.fw6-ns { font-weight: 600; }
|
|
.fw7-ns { font-weight: 700; }
|
|
.fw8-ns { font-weight: 800; }
|
|
.fw9-ns { font-weight: 900; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .fwn-m { font-weight: normal; }
|
|
.b-m { font-weight: bold; }
|
|
.fw-light-m { font-weight: lighter; }
|
|
.fw-bolder-m { font-weight: bolder; }
|
|
.fw1-m { font-weight: 100; }
|
|
.fw2-m { font-weight: 200; }
|
|
.fw3-m { font-weight: 300; }
|
|
.fw4-m { font-weight: 400; }
|
|
.fw5-m { font-weight: 500; }
|
|
.fw6-m { font-weight: 600; }
|
|
.fw7-m { font-weight: 700; }
|
|
.fw8-m { font-weight: 800; }
|
|
.fw9-m { font-weight: 900; } }
|
|
@media screen and (min-width: 64em) { .fwn-l { font-weight: normal; }
|
|
.b-l { font-weight: bold; }
|
|
.fw-light-l { font-weight: lighter; }
|
|
.fw-bolder-l { font-weight: bolder; }
|
|
.fw1-l { font-weight: 100; }
|
|
.fw2-l { font-weight: 200; }
|
|
.fw3-l { font-weight: 300; }
|
|
.fw4-l { font-weight: 400; }
|
|
.fw5-l { font-weight: 500; }
|
|
.fw6-l { font-weight: 600; }
|
|
.fw7-l { font-weight: 700; }
|
|
.fw8-l { font-weight: 800; }
|
|
.fw9-l { font-weight: 900; } }
|
|
/* ========================================================================== HEIGHTS ========================================================================== */
|
|
.hi-10, .tenth { height: 10%; }
|
|
|
|
.hi-25, .quarter { height: 25%; }
|
|
|
|
.hi-50, .half { height: 50%; }
|
|
|
|
.hi-75, .three-quarters { height: 75%; }
|
|
|
|
.hi-100, .full { height: 100%; }
|
|
|
|
.ht1 { height: 1rem; }
|
|
|
|
.ht2 { height: 2rem; }
|
|
|
|
.ht3 { height: 4rem; }
|
|
|
|
.ht4 { height: 8rem; }
|
|
|
|
.ht5 { height: 16rem; }
|
|
|
|
.ht6 { height: 32rem; }
|
|
|
|
.ht7 { height: 48rem; }
|
|
|
|
.ht8 { height: 64rem; }
|
|
|
|
.ht9 { height: 96rem; }
|
|
|
|
.ht10 { height: 128rem; }
|
|
|
|
.ht-auto { height: auto; }
|
|
|
|
@media screen and (min-width: 48em) { .hi-10-ns, .tenth-ns { height: 10%; }
|
|
.hi-25-ns, .quarter-ns { height: 25%; }
|
|
.hi-50-ns, .half-ns { height: 50%; }
|
|
.hi-75-ns, .three-quarters-ns { height: 75%; }
|
|
.hi-100-ns, .full-ns { height: 100%; }
|
|
.ht1-ns { height: 1rem; }
|
|
.ht2-ns { height: 2rem; }
|
|
.ht3-ns { height: 4rem; }
|
|
.ht4-ns { height: 8rem; }
|
|
.ht5-ns { height: 16rem; }
|
|
.ht6-ns { height: 32rem; }
|
|
.ht7-ns { height: 48rem; }
|
|
.ht8-ns { height: 64rem; }
|
|
.ht9-ns { height: 96rem; }
|
|
.ht10-ns { height: 128rem; }
|
|
.ht-auto-ns { height: auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .hi-10-m, .tenth-m { height: 10%; }
|
|
.hi-25-m, .quarter-m { height: 25%; }
|
|
.hi-50-m, .half-m { height: 50%; }
|
|
.hi-75-m, .three-quarters-m { height: 75%; }
|
|
.hi-100-m, .full-m { height: 100%; }
|
|
.ht1-m { height: 1rem; }
|
|
.ht2-m { height: 2rem; }
|
|
.ht3-m { height: 4rem; }
|
|
.ht4-m { height: 8rem; }
|
|
.ht5-m { height: 16rem; }
|
|
.ht6-m { height: 32rem; }
|
|
.ht7-m { height: 48rem; }
|
|
.ht8-m { height: 64rem; }
|
|
.ht9-m { height: 96rem; }
|
|
.ht10-m { height: 128rem; }
|
|
.ht-auto-m { height: auto; } }
|
|
@media screen and (min-width: 64em) { .hi-10-l, .tenth-l { height: 10%; }
|
|
.hi-25-l, .quarter-l { height: 25%; }
|
|
.hi-50-l, .half-l { height: 50%; }
|
|
.hi-75-l, .three-quarters-l { height: 75%; }
|
|
.hi-100-l, .full-l { height: 100%; }
|
|
.ht1-l { height: 1rem; }
|
|
.ht2-l { height: 2rem; }
|
|
.ht3-l { height: 4rem; }
|
|
.ht4-l { height: 8rem; }
|
|
.ht5-l { height: 16rem; }
|
|
.ht6-l { height: 32rem; }
|
|
.ht7-l { height: 48rem; }
|
|
.ht8-l { height: 64rem; }
|
|
.ht9-l { height: 96rem; }
|
|
.ht10-l { height: 128rem; }
|
|
.ht-auto-l { height: auto; } }
|
|
/* ========================================================================== IMAGES ========================================================================== */
|
|
/* Responsive images! */
|
|
img { max-width: 100%; }
|
|
|
|
/* ========================================================================== LETTER SPACING ========================================================================== */
|
|
.tracked { letter-spacing: .1em; }
|
|
|
|
.tracked-tight { letter-spacing: -.1em; }
|
|
|
|
.mega-tracked { letter-spacing: .2em; }
|
|
|
|
@media screen and (min-width: 48em) { .tracked-ns { letter-spacing: .1em; }
|
|
.tracked-tight-ns { letter-spacing: -.1em; }
|
|
.mega-tracked-ns { letter-spacing: .2em; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .tracked-m { letter-spacing: .1em; }
|
|
.tracked-tight-m { letter-spacing: -.1em; }
|
|
.mega-tracked-m { letter-spacing: .2em; } }
|
|
@media screen and (min-width: 64em) { .tracked-l { letter-spacing: .1em; }
|
|
.tracked-tight-l { letter-spacing: -.1em; }
|
|
.mega-tracked-l { letter-spacing: .2em; } }
|
|
/* ========================================================================== LINE HEIGHT ========================================================================== */
|
|
.lh { line-height: 1; }
|
|
|
|
.lh-title { line-height: 1.3; }
|
|
|
|
.lh-copy { line-height: 1.6; }
|
|
|
|
@media screen and (min-width: 48em) { .lh-ns { line-height: 1; }
|
|
.lh-title-ns { line-height: 1.3; }
|
|
.lh-copy-ns { line-height: 1.6; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .lh-m { line-height: 1; }
|
|
.lh-title-m { line-height: 1.3; }
|
|
.lh-copy-m { line-height: 1.6; } }
|
|
@media screen and (min-width: 64em) { .lh-l { line-height: 1; }
|
|
.lh-title-l { line-height: 1.3; }
|
|
.lh-copy-l { line-height: 1.6; } }
|
|
/* ========================================================================== LINKS ========================================================================== */
|
|
.link { text-decoration: none; }
|
|
|
|
@media screen and (min-width: 48em) { .link-ns { text-decoration: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .link-m { text-decoration: none; } }
|
|
@media screen and (min-width: 64em) { .link-l { text-decoration: none; } }
|
|
/* ========================================================================== LISTS ========================================================================== */
|
|
/* List Style Types */
|
|
.disc { list-style-type: disc; }
|
|
|
|
.circle { list-style-type: circle; }
|
|
|
|
.square { list-style-type: square; }
|
|
|
|
.decimal { list-style-type: decimal; }
|
|
|
|
/* Horizontal list: can be used on ol or ul */
|
|
.list { list-style-type: none; }
|
|
|
|
.list--h { list-style-type: none; }
|
|
.list--h .list-item { display: inline-block; }
|
|
|
|
@media screen and (min-width: 48em) { .disc-ns { list-style-type: disc; }
|
|
.circle-ns { list-style-type: circle; }
|
|
.square-ns { list-style-type: square; }
|
|
.decimal-ns { list-style-type: decimal; }
|
|
.list-ns { list-style-type: none; }
|
|
.list--h-ns { list-style-type: none; }
|
|
.list--h-ns .list-item-ns { display: inline-block; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .disc-m { list-style-type: disc; }
|
|
.circle-m { list-style-type: circle; }
|
|
.square-m { list-style-type: square; }
|
|
.decimal-m { list-style-type: decimal; }
|
|
.list-m { list-style: none; }
|
|
.list--h-m { list-style-type: none; }
|
|
.list--h-m .list-item { display: inline-block; } }
|
|
@media screen and (min-width: 64em) { .disc-l { list-style-type: disc; }
|
|
.circle-l { list-style-type: circle; }
|
|
.square-l { list-style-type: square; }
|
|
.decimal-l { list-style-type: decimal; }
|
|
.leading-zero-l { list-style-type: decimal-leading-zero; }
|
|
.lower-roman-l { list-style-type: lower-roman; }
|
|
.upper-roman-l { list-style-type: upper-roman; }
|
|
.lower-greek-l { list-style-type: lower-greek; }
|
|
.lower-latin-l { list-style-type: lower-latin; }
|
|
.upper-latin-l { list-style-type: upper-latin; }
|
|
.lower-alpha-l { list-style-type: lower-alpha; }
|
|
.upper-alpha-l { list-style-type: upper-alpha; }
|
|
.list-l { list-style-type: none; }
|
|
.list--h-l { list-style-type: none; }
|
|
.list--h-l .list-item { display: inline-block; } }
|
|
/* ========================================================================== MAX HEIGHT ========================================================================== */
|
|
.mxhi1 { max-height: 1rem; }
|
|
|
|
.mxhi2 { max-height: 2rem; }
|
|
|
|
.mxhi3 { max-height: 4rem; }
|
|
|
|
.mxhi4 { max-height: 8rem; }
|
|
|
|
.mxhi5 { max-height: 16rem; }
|
|
|
|
.mxhi6 { max-height: 32rem; }
|
|
|
|
.mxhi7 { max-height: 48rem; }
|
|
|
|
.mxhi8 { max-height: 64rem; }
|
|
|
|
.mxhi9 { max-height: 96rem; }
|
|
|
|
.mxhi10 { max-height: 128rem; }
|
|
|
|
.mxhi-none { max-height: none; }
|
|
|
|
.mxhi-max { max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; }
|
|
|
|
.mxhi-min { max-height: -webkit-min-content; max-height: -moz-min-content; max-height: min-content; }
|
|
|
|
.mxhi-fit { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; }
|
|
|
|
.mxhi-fill { max-height: -webkit-fill-available; max-height: -moz-available; max-height: fill-available; }
|
|
|
|
@media screen and (min-width: 48em) { .mxhi1-ns { max-height: 1rem; }
|
|
.mxhi2-ns { max-height: 2rem; }
|
|
.mxhi3-ns { max-height: 4rem; }
|
|
.mxhi4-ns { max-height: 8rem; }
|
|
.mxhi5-ns { max-height: 16rem; }
|
|
.mxhi6-ns { max-height: 32rem; }
|
|
.mxhi7-ns { max-height: 48rem; }
|
|
.mxhi8-ns { max-height: 64rem; }
|
|
.mxhi9-ns { max-height: 96rem; }
|
|
.mxhi10-ns { max-height: 128rem; }
|
|
.mxhi-none-ns { max-height: none; }
|
|
.mxhi-max-ns { max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; }
|
|
.mxhi-min-ns { max-height: -webkit-min-content; max-height: -moz-min-content; max-height: min-content; }
|
|
.mxhi-fit-ns { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; }
|
|
.mxhi-fill-ns { max-height: -webkit-fill-available; max-height: -moz-available; max-height: fill-available; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mxhi1-m { max-height: 1rem; }
|
|
.mxhi2-m { max-height: 2rem; }
|
|
.mxhi3-m { max-height: 4rem; }
|
|
.mxhi4-m { max-height: 8rem; }
|
|
.mxhi5-m { max-height: 16rem; }
|
|
.mxhi6-m { max-height: 32rem; }
|
|
.mxhi7-m { max-height: 48rem; }
|
|
.mxhi8-m { max-height: 64rem; }
|
|
.mxhi9-m { max-height: 96rem; }
|
|
.mxhi10-m { max-height: 128rem; }
|
|
.mxhi-none-m { max-height: none; }
|
|
.mxhi-max-m { max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; }
|
|
.mxhi-min-m { max-height: -webkit-min-content; max-height: -moz-min-content; max-height: min-content; }
|
|
.mxhi-fit-m { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; }
|
|
.mxhi-fill-m { max-height: -webkit-fill-available; max-height: -moz-available; max-height: fill-available; } }
|
|
@media screen and (min-width: 64em) { .mxhi1-l { max-height: 1rem; }
|
|
.mxhi2-l { max-height: 2rem; }
|
|
.mxhi3-l { max-height: 4rem; }
|
|
.mxhi4-l { max-height: 8rem; }
|
|
.mxhi5-l { max-height: 16rem; }
|
|
.mxhi6-l { max-height: 32rem; }
|
|
.mxhi7-l { max-height: 48rem; }
|
|
.mxhi8-l { max-height: 64rem; }
|
|
.mxhi9-l { max-height: 96rem; }
|
|
.mxhi10-l { max-height: 128rem; }
|
|
.mxhi-none-l { max-height: none; }
|
|
.mxhi-max-l { max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; }
|
|
.mxhi-min-l { max-height: -webkit-min-content; max-height: -moz-min-content; max-height: min-content; }
|
|
.mxhi-fit-l { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; }
|
|
.mxhi-fill-l { max-height: -webkit-fill-available; max-height: -moz-available; max-height: fill-available; } }
|
|
/* ========================================================================== MAX WIDTHS ========================================================================== */
|
|
.mx-wi-100 { max-width: 100%; }
|
|
|
|
.mx-wi-75 { max-width: 75%; }
|
|
|
|
.mx-wi-50 { max-width: 50%; }
|
|
|
|
.mx-wi-25 { max-width: 25%; }
|
|
|
|
.mx-wi1 { max-width: 1rem; }
|
|
|
|
.mx-wi2 { max-width: 2rem; }
|
|
|
|
.mx-wi3 { max-width: 4rem; }
|
|
|
|
.mx-wi4 { max-width: 8rem; }
|
|
|
|
.mx-wi5 { max-width: 16rem; }
|
|
|
|
.mx-wi6 { max-width: 32rem; }
|
|
|
|
.mx-wi7 { max-width: 48rem; }
|
|
|
|
.mx-wi8 { max-width: 64rem; }
|
|
|
|
.mx-wi9 { max-width: 96rem; }
|
|
|
|
.mx-wi10 { max-width: 128rem; }
|
|
|
|
.mx-wi-none { max-width: none; }
|
|
|
|
.mx-wi-max { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
|
|
.mx-wi-min { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
|
|
.mx-wi-fit { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
|
|
.mx-wi-fill { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; }
|
|
|
|
@media screen and (min-width: 48em) { .mx-wi-100-ns { max-width: 100%; }
|
|
.mx-wi-75-ns { max-width: 75%; }
|
|
.mx-wi-50-ns { max-width: 50%; }
|
|
.mx-wi-25-ns { max-width: 25%; }
|
|
.mx-wi1-ns { max-width: 1rem; }
|
|
.mx-wi2-ns { max-width: 2rem; }
|
|
.mx-wi3-ns { max-width: 4rem; }
|
|
.mx-wi4-ns { max-width: 8rem; }
|
|
.mx-wi5-ns { max-width: 16rem; }
|
|
.mx-wi6-ns { max-width: 32rem; }
|
|
.mx-wi7-ns { max-width: 48rem; }
|
|
.mx-wi8-ns { max-width: 64rem; }
|
|
.mx-wi9-ns { max-width: 96rem; }
|
|
.mx-wi10-ns { max-width: 128rem; }
|
|
.mx-wi-none-ns { max-width: none; }
|
|
.mx-wi-max-ns { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-ns { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-ns { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-ns { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mx-wi-100-m { max-width: 100%; }
|
|
.mx-wi-75-m { max-width: 75%; }
|
|
.mx-wi-50-m { max-width: 50%; }
|
|
.mx-wi-25-m { max-width: 25%; }
|
|
.mx-wi1-m { max-width: 1rem; }
|
|
.mx-wi2-m { max-width: 2rem; }
|
|
.mx-wi3-m { max-width: 4rem; }
|
|
.mx-wi4-m { max-width: 8rem; }
|
|
.mx-wi5-m { max-width: 16rem; }
|
|
.mx-wi6-m { max-width: 32rem; }
|
|
.mx-wi7-m { max-width: 48rem; }
|
|
.mx-wi8-m { max-width: 64rem; }
|
|
.mx-wi9-m { max-width: 96rem; }
|
|
.mx-wi10-m { max-width: 128rem; }
|
|
.mx-wi-none-m { max-width: none; }
|
|
.mx-wi-max-m { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-m { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-m { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-m { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
@media screen and (min-width: 64em) { .mx-wi-100-l { max-width: 100%; }
|
|
.mx-wi-75-l { max-width: 75%; }
|
|
.mx-wi-50-l { max-width: 50%; }
|
|
.mx-wi-25-l { max-width: 25%; }
|
|
.mx-wi1-l { max-width: 1rem; }
|
|
.mx-wi2-l { max-width: 2rem; }
|
|
.mx-wi3-l { max-width: 4rem; }
|
|
.mx-wi4-l { max-width: 8rem; }
|
|
.mx-wi5-l { max-width: 16rem; }
|
|
.mx-wi6-l { max-width: 32rem; }
|
|
.mx-wi7-l { max-width: 48rem; }
|
|
.mx-wi8-l { max-width: 64rem; }
|
|
.mx-wi9-l { max-width: 96rem; }
|
|
.mx-wi10-l { max-width: 128rem; }
|
|
.mx-wi-none-l { max-width: none; }
|
|
.mx-wi-max-l { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; }
|
|
.mx-wi-min-l { max-width: -webkit-min-content; max-width: -moz-min-content; max-width: min-content; }
|
|
.mx-wi-fit-l { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
|
|
.mx-wi-fill-l { max-width: -webkit-fill-available; max-width: -moz-available; max-width: fill-available; } }
|
|
/* ========================================================================== MIN HEIGHTS ========================================================================== */
|
|
.mn-hi-100 { min-height: 100%; }
|
|
|
|
.mn-hi-75 { min-height: 75%; }
|
|
|
|
.mn-hi-50 { min-height: 50%; }
|
|
|
|
.mn-hi-25 { min-height: 25%; }
|
|
|
|
.mn-hi1 { min-height: 1rem; }
|
|
|
|
.mn-hi2 { min-height: 2rem; }
|
|
|
|
.mn-hi3 { min-height: 4rem; }
|
|
|
|
.mn-hi4 { min-height: 8rem; }
|
|
|
|
.mn-hi5 { min-height: 16rem; }
|
|
|
|
.mn-hi6 { min-height: 32rem; }
|
|
|
|
.mn-hi7 { min-height: 48rem; }
|
|
|
|
.mn-hi8 { min-height: 64rem; }
|
|
|
|
.mn-hi9 { min-height: 96rem; }
|
|
|
|
.mn-hi10 { min-height: 128rem; }
|
|
|
|
.mn-hi-max { min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; }
|
|
|
|
.mn-hi-min { min-height: -webkit-min-content; min-height: -moz-min-content; min-height: min-content; }
|
|
|
|
.mn-hi-fit { min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; }
|
|
|
|
.mn-hi-fill { min-height: -webkit-fill-available; min-height: -moz-available; min-height: fill-available; }
|
|
|
|
@media screen and (min-width: 48em) { .mn-hi-100-ns { min-height: 100%; }
|
|
.mn-hi-75-ns { min-height: 75%; }
|
|
.mn-hi-50-ns { min-height: 50%; }
|
|
.mn-hi-25-ns { min-height: 25%; }
|
|
.mn-hi1-ns { min-height: 1rem; }
|
|
.mn-hi2-ns { min-height: 2rem; }
|
|
.mn-hi3-ns { min-height: 4rem; }
|
|
.mn-hi4-ns { min-height: 8rem; }
|
|
.mn-hi5-ns { min-height: 16rem; }
|
|
.mn-hi6-ns { min-height: 32rem; }
|
|
.mn-hi7-ns { min-height: 48rem; }
|
|
.mn-hi8-ns { min-height: 64rem; }
|
|
.mn-hi9-ns { min-height: 96rem; }
|
|
.mn-hi10-ns { min-height: 128rem; }
|
|
.mn-hi-max-ns { min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; }
|
|
.mn-hi-min-ns { min-height: -webkit-min-content; min-height: -moz-min-content; min-height: min-content; }
|
|
.mn-hi-fit-ns { min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; }
|
|
.mn-hi-fill-ns { min-height: -webkit-fill-available; min-height: -moz-available; min-height: fill-available; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mn-hi-100-m { min-height: 100%; }
|
|
.mn-hi-75-m { min-height: 75%; }
|
|
.mn-hi-50-m { min-height: 50%; }
|
|
.mn-hi-25-m { min-height: 25%; }
|
|
.mn-hi1-m { min-height: 1rem; }
|
|
.mn-hi2-m { min-height: 2rem; }
|
|
.mn-hi3-m { min-height: 4rem; }
|
|
.mn-hi4-m { min-height: 8rem; }
|
|
.mn-hi5-m { min-height: 16rem; }
|
|
.mn-hi6-m { min-height: 32rem; }
|
|
.mn-hi7-m { min-height: 48rem; }
|
|
.mn-hi8-m { min-height: 64rem; }
|
|
.mn-hi9-m { min-height: 96rem; }
|
|
.mn-hi10-m { min-height: 128rem; }
|
|
.mn-hi-max-m { min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; }
|
|
.mn-hi-min-m { min-height: -webkit-min-content; min-height: -moz-min-content; min-height: min-content; }
|
|
.mn-hi-fit-m { min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; }
|
|
.mn-hi-fill-m { min-height: -webkit-fill-available; min-height: -moz-available; min-height: fill-available; } }
|
|
@media screen and (min-width: 64em) { .mn-hi-100-l { min-height: 100%; }
|
|
.mn-hi-75-l { min-height: 75%; }
|
|
.mn-hi-50-l { min-height: 50%; }
|
|
.mn-hi-25-l { min-height: 25%; }
|
|
.mn-hi1-l { min-height: 1rem; }
|
|
.mn-hi2-l { min-height: 2rem; }
|
|
.mn-hi3-l { min-height: 4rem; }
|
|
.mn-hi4-l { min-height: 8rem; }
|
|
.mn-hi5-l { min-height: 16rem; }
|
|
.mn-hi6-l { min-height: 32rem; }
|
|
.mn-hi7-l { min-height: 48rem; }
|
|
.mn-hi8-l { min-height: 64rem; }
|
|
.mn-hi9-l { min-height: 96rem; }
|
|
.mn-hi10-l { min-height: 128rem; }
|
|
.mn-hi-max-l { min-height: -webkit-max-content; min-height: -moz-max-content; min-height: max-content; }
|
|
.mn-hi-min-l { min-height: -webkit-min-content; min-height: -moz-min-content; min-height: min-content; }
|
|
.mn-hi-fit-l { min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; }
|
|
.mn-hi-fill-l { min-height: -webkit-fill-available; min-height: -moz-available; min-height: fill-available; } }
|
|
/* ========================================================================== MIN WIDTHS ========================================================================== */
|
|
.mn-wi-1 { min-width: 1%; }
|
|
|
|
.mn-wi-2 { min-width: 2%; }
|
|
|
|
.mn-wi-3 { min-width: 3%; }
|
|
|
|
.mn-wi-4 { min-width: 4%; }
|
|
|
|
.mn-wi-5 { min-width: 5%; }
|
|
|
|
.mn-wi-6 { min-width: 6%; }
|
|
|
|
.mn-wi-7 { min-width: 7%; }
|
|
|
|
.mn-wi-8 { min-width: 8%; }
|
|
|
|
.mn-wi-9 { min-width: 9%; }
|
|
|
|
.mn-wi-10 { min-width: 10%; }
|
|
|
|
.mn-wi-11 { min-width: 11%; }
|
|
|
|
.mn-wi-12 { min-width: 12%; }
|
|
|
|
.mn-wi-13 { min-width: 13%; }
|
|
|
|
.mn-wi-14 { min-width: 14%; }
|
|
|
|
.mn-wi-15 { min-width: 15%; }
|
|
|
|
.mn-wi-16 { min-width: 16%; }
|
|
|
|
.mn-wi-17 { min-width: 17%; }
|
|
|
|
.mn-wi-18 { min-width: 18%; }
|
|
|
|
.mn-wi-19 { min-width: 19%; }
|
|
|
|
.mn-wi-20 { min-width: 20%; }
|
|
|
|
.mn-wi-21 { min-width: 21%; }
|
|
|
|
.mn-wi-22 { min-width: 22%; }
|
|
|
|
.mn-wi-23 { min-width: 23%; }
|
|
|
|
.mn-wi-24 { min-width: 24%; }
|
|
|
|
.mn-wi-25 { min-width: 25%; }
|
|
|
|
.mn-wi-26 { min-width: 26%; }
|
|
|
|
.mn-wi-27 { min-width: 27%; }
|
|
|
|
.mn-wi-28 { min-width: 28%; }
|
|
|
|
.mn-wi-29 { min-width: 29%; }
|
|
|
|
.mn-wi-30 { min-width: 30%; }
|
|
|
|
.mn-wi-31 { min-width: 31%; }
|
|
|
|
.mn-wi-32 { min-width: 32%; }
|
|
|
|
.mn-wi-33 { min-width: 33%; }
|
|
|
|
.mn-wi-34 { min-width: 34%; }
|
|
|
|
.mn-wi-35 { min-width: 35%; }
|
|
|
|
.mn-wi-36 { min-width: 36%; }
|
|
|
|
.mn-wi-37 { min-width: 37%; }
|
|
|
|
.mn-wi-38 { min-width: 38%; }
|
|
|
|
.mn-wi-39 { min-width: 39%; }
|
|
|
|
.mn-wi-40 { min-width: 40%; }
|
|
|
|
.mn-wi-41 { min-width: 41%; }
|
|
|
|
.mn-wi-42 { min-width: 42%; }
|
|
|
|
.mn-wi-43 { min-width: 43%; }
|
|
|
|
.mn-wi-44 { min-width: 44%; }
|
|
|
|
.mn-wi-45 { min-width: 45%; }
|
|
|
|
.mn-wi-46 { min-width: 46%; }
|
|
|
|
.mn-wi-47 { min-width: 47%; }
|
|
|
|
.mn-wi-48 { min-width: 48%; }
|
|
|
|
.mn-wi-49 { min-width: 49%; }
|
|
|
|
.mn-wi-50 { min-width: 50%; }
|
|
|
|
.mn-wi-51 { min-width: 51%; }
|
|
|
|
.mn-wi-52 { min-width: 52%; }
|
|
|
|
.mn-wi-53 { min-width: 53%; }
|
|
|
|
.mn-wi-54 { min-width: 54%; }
|
|
|
|
.mn-wi-55 { min-width: 55%; }
|
|
|
|
.mn-wi-56 { min-width: 56%; }
|
|
|
|
.mn-wi-57 { min-width: 57%; }
|
|
|
|
.mn-wi-58 { min-width: 58%; }
|
|
|
|
.mn-wi-59 { min-width: 59%; }
|
|
|
|
.mn-wi-60 { min-width: 60%; }
|
|
|
|
.mn-wi-61 { min-width: 61%; }
|
|
|
|
.mn-wi-62 { min-width: 62%; }
|
|
|
|
.mn-wi-63 { min-width: 63%; }
|
|
|
|
.mn-wi-64 { min-width: 64%; }
|
|
|
|
.mn-wi-65 { min-width: 65%; }
|
|
|
|
.mn-wi-66 { min-width: 66%; }
|
|
|
|
.mn-wi-67 { min-width: 67%; }
|
|
|
|
.mn-wi-68 { min-width: 68%; }
|
|
|
|
.mn-wi-69 { min-width: 69%; }
|
|
|
|
.mn-wi-70 { min-width: 70%; }
|
|
|
|
.mn-wi-71 { min-width: 71%; }
|
|
|
|
.mn-wi-72 { min-width: 72%; }
|
|
|
|
.mn-wi-73 { min-width: 73%; }
|
|
|
|
.mn-wi-74 { min-width: 74%; }
|
|
|
|
.mn-wi-75 { min-width: 75%; }
|
|
|
|
.mn-wi-76 { min-width: 76%; }
|
|
|
|
.mn-wi-77 { min-width: 77%; }
|
|
|
|
.mn-wi-78 { min-width: 78%; }
|
|
|
|
.mn-wi-79 { min-width: 79%; }
|
|
|
|
.mn-wi-80 { min-width: 80%; }
|
|
|
|
.mn-wi-81 { min-width: 81%; }
|
|
|
|
.mn-wi-82 { min-width: 82%; }
|
|
|
|
.mn-wi-83 { min-width: 83%; }
|
|
|
|
.mn-wi-84 { min-width: 84%; }
|
|
|
|
.mn-wi-85 { min-width: 85%; }
|
|
|
|
.mn-wi-86 { min-width: 86%; }
|
|
|
|
.mn-wi-87 { min-width: 87%; }
|
|
|
|
.mn-wi-88 { min-width: 88%; }
|
|
|
|
.mn-wi-89 { min-width: 89%; }
|
|
|
|
.mn-wi-90 { min-width: 90%; }
|
|
|
|
.mn-wi-91 { min-width: 91%; }
|
|
|
|
.mn-wi-92 { min-width: 92%; }
|
|
|
|
.mn-wi-93 { min-width: 93%; }
|
|
|
|
.mn-wi-94 { min-width: 94%; }
|
|
|
|
.mn-wi-95 { min-width: 95%; }
|
|
|
|
.mn-wi-96 { min-width: 96%; }
|
|
|
|
.mn-wi-97 { min-width: 97%; }
|
|
|
|
.mn-wi-98 { min-width: 98%; }
|
|
|
|
.mn-wi-99 { min-width: 99%; }
|
|
|
|
.mn-wi-100 { min-width: 100%; }
|
|
|
|
.mn-wi1 { min-width: 1rem; }
|
|
|
|
.mn-wi2 { min-width: 2rem; }
|
|
|
|
.mn-wi3 { min-width: 4rem; }
|
|
|
|
.mn-wi4 { min-width: 8rem; }
|
|
|
|
.mn-wi5 { min-width: 16rem; }
|
|
|
|
.mn-wi6 { min-width: 32rem; }
|
|
|
|
.mn-wi7 { min-width: 48rem; }
|
|
|
|
.mn-wi8 { min-width: 64rem; }
|
|
|
|
.mn-wi9 { min-width: 96rem; }
|
|
|
|
.mn-wi10 { min-width: 128rem; }
|
|
|
|
.mn-wi-max { min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; }
|
|
|
|
.mn-wi-min { min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; }
|
|
|
|
.mn-wi-fit { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; }
|
|
|
|
.mn-wi-fill { min-width: -webkit-fill-available; min-width: -moz-available; min-width: fill-available; }
|
|
|
|
@media screen and (min-width: 48em) { .mn-wi-1-ns { min-width: 1%; }
|
|
.mn-wi-2-ns { min-width: 2%; }
|
|
.mn-wi-3-ns { min-width: 3%; }
|
|
.mn-wi-4-ns { min-width: 4%; }
|
|
.mn-wi-5-ns { min-width: 5%; }
|
|
.mn-wi-6-ns { min-width: 6%; }
|
|
.mn-wi-7-ns { min-width: 7%; }
|
|
.mn-wi-8-ns { min-width: 8%; }
|
|
.mn-wi-9-ns { min-width: 9%; }
|
|
.mn-wi-10-ns { min-width: 10%; }
|
|
.mn-wi-11-ns { min-width: 11%; }
|
|
.mn-wi-12-ns { min-width: 12%; }
|
|
.mn-wi-13-ns { min-width: 13%; }
|
|
.mn-wi-14-ns { min-width: 14%; }
|
|
.mn-wi-15-ns { min-width: 15%; }
|
|
.mn-wi-16-ns { min-width: 16%; }
|
|
.mn-wi-17-ns { min-width: 17%; }
|
|
.mn-wi-18-ns { min-width: 18%; }
|
|
.mn-wi-19-ns { min-width: 19%; }
|
|
.mn-wi-20-ns { min-width: 20%; }
|
|
.mn-wi-21-ns { min-width: 21%; }
|
|
.mn-wi-22-ns { min-width: 22%; }
|
|
.mn-wi-23-ns { min-width: 23%; }
|
|
.mn-wi-24-ns { min-width: 24%; }
|
|
.mn-wi-25-ns { min-width: 25%; }
|
|
.mn-wi-26-ns { min-width: 26%; }
|
|
.mn-wi-27-ns { min-width: 27%; }
|
|
.mn-wi-28-ns { min-width: 28%; }
|
|
.mn-wi-29-ns { min-width: 29%; }
|
|
.mn-wi-30-ns { min-width: 30%; }
|
|
.mn-wi-31-ns { min-width: 31%; }
|
|
.mn-wi-32-ns { min-width: 32%; }
|
|
.mn-wi-33-ns { min-width: 33%; }
|
|
.mn-wi-34-ns { min-width: 34%; }
|
|
.mn-wi-35-ns { min-width: 35%; }
|
|
.mn-wi-36-ns { min-width: 36%; }
|
|
.mn-wi-37-ns { min-width: 37%; }
|
|
.mn-wi-38-ns { min-width: 38%; }
|
|
.mn-wi-39-ns { min-width: 39%; }
|
|
.mn-wi-40-ns { min-width: 40%; }
|
|
.mn-wi-41-ns { min-width: 41%; }
|
|
.mn-wi-42-ns { min-width: 42%; }
|
|
.mn-wi-43-ns { min-width: 43%; }
|
|
.mn-wi-44-ns { min-width: 44%; }
|
|
.mn-wi-45-ns { min-width: 45%; }
|
|
.mn-wi-46-ns { min-width: 46%; }
|
|
.mn-wi-47-ns { min-width: 47%; }
|
|
.mn-wi-48-ns { min-width: 48%; }
|
|
.mn-wi-49-ns { min-width: 49%; }
|
|
.mn-wi-50-ns { min-width: 50%; }
|
|
.mn-wi-51-ns { min-width: 51%; }
|
|
.mn-wi-52-ns { min-width: 52%; }
|
|
.mn-wi-53-ns { min-width: 53%; }
|
|
.mn-wi-54-ns { min-width: 54%; }
|
|
.mn-wi-55-ns { min-width: 55%; }
|
|
.mn-wi-56-ns { min-width: 56%; }
|
|
.mn-wi-57-ns { min-width: 57%; }
|
|
.mn-wi-58-ns { min-width: 58%; }
|
|
.mn-wi-59-ns { min-width: 59%; }
|
|
.mn-wi-60-ns { min-width: 60%; }
|
|
.mn-wi-61-ns { min-width: 61%; }
|
|
.mn-wi-62-ns { min-width: 62%; }
|
|
.mn-wi-63-ns { min-width: 63%; }
|
|
.mn-wi-64-ns { min-width: 64%; }
|
|
.mn-wi-65-ns { min-width: 65%; }
|
|
.mn-wi-66-ns { min-width: 66%; }
|
|
.mn-wi-67-ns { min-width: 67%; }
|
|
.mn-wi-68-ns { min-width: 68%; }
|
|
.mn-wi-69-ns { min-width: 69%; }
|
|
.mn-wi-70-ns { min-width: 70%; }
|
|
.mn-wi-71-ns { min-width: 71%; }
|
|
.mn-wi-72-ns { min-width: 72%; }
|
|
.mn-wi-73-ns { min-width: 73%; }
|
|
.mn-wi-74-ns { min-width: 74%; }
|
|
.mn-wi-75-ns { min-width: 75%; }
|
|
.mn-wi-76-ns { min-width: 76%; }
|
|
.mn-wi-77-ns { min-width: 77%; }
|
|
.mn-wi-78-ns { min-width: 78%; }
|
|
.mn-wi-79-ns { min-width: 79%; }
|
|
.mn-wi-80-ns { min-width: 80%; }
|
|
.mn-wi-81-ns { min-width: 81%; }
|
|
.mn-wi-82-ns { min-width: 82%; }
|
|
.mn-wi-83-ns { min-width: 83%; }
|
|
.mn-wi-84-ns { min-width: 84%; }
|
|
.mn-wi-85-ns { min-width: 85%; }
|
|
.mn-wi-86-ns { min-width: 86%; }
|
|
.mn-wi-87-ns { min-width: 87%; }
|
|
.mn-wi-88-ns { min-width: 88%; }
|
|
.mn-wi-89-ns { min-width: 89%; }
|
|
.mn-wi-90-ns { min-width: 90%; }
|
|
.mn-wi-91-ns { min-width: 91%; }
|
|
.mn-wi-92-ns { min-width: 92%; }
|
|
.mn-wi-93-ns { min-width: 93%; }
|
|
.mn-wi-94-ns { min-width: 94%; }
|
|
.mn-wi-95-ns { min-width: 95%; }
|
|
.mn-wi-96-ns { min-width: 96%; }
|
|
.mn-wi-97-ns { min-width: 97%; }
|
|
.mn-wi-98-ns { min-width: 98%; }
|
|
.mn-wi-99-ns { min-width: 99%; }
|
|
.mn-wi-100-ns { min-width: 100%; }
|
|
.mn-wi1-ns { min-width: 1rem; }
|
|
.mn-wi2-ns { min-width: 2rem; }
|
|
.mn-wi3-ns { min-width: 4rem; }
|
|
.mn-wi4-ns { min-width: 8rem; }
|
|
.mn-wi5-ns { min-width: 16rem; }
|
|
.mn-wi6-ns { min-width: 32rem; }
|
|
.mn-wi7-ns { min-width: 48rem; }
|
|
.mn-wi8-ns { min-width: 64rem; }
|
|
.mn-wi9-ns { min-width: 96rem; }
|
|
.mn-wi10-ns { min-width: 128rem; }
|
|
.mn-wi-max-ns { min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; }
|
|
.mn-wi-min-ns { min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; }
|
|
.mn-wi-fit-ns { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; }
|
|
.mn-wi-fill-ns { min-width: -webkit-fill-available; min-width: -moz-available; min-width: fill-available; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mn-wi-1-m { min-width: 1%; }
|
|
.mn-wi-2-m { min-width: 2%; }
|
|
.mn-wi-3-m { min-width: 3%; }
|
|
.mn-wi-4-m { min-width: 4%; }
|
|
.mn-wi-5-m { min-width: 5%; }
|
|
.mn-wi-6-m { min-width: 6%; }
|
|
.mn-wi-7-m { min-width: 7%; }
|
|
.mn-wi-8-m { min-width: 8%; }
|
|
.mn-wi-9-m { min-width: 9%; }
|
|
.mn-wi-10-m { min-width: 10%; }
|
|
.mn-wi-11-m { min-width: 11%; }
|
|
.mn-wi-12-m { min-width: 12%; }
|
|
.mn-wi-13-m { min-width: 13%; }
|
|
.mn-wi-14-m { min-width: 14%; }
|
|
.mn-wi-15-m { min-width: 15%; }
|
|
.mn-wi-16-m { min-width: 16%; }
|
|
.mn-wi-17-m { min-width: 17%; }
|
|
.mn-wi-18-m { min-width: 18%; }
|
|
.mn-wi-19-m { min-width: 19%; }
|
|
.mn-wi-20-m { min-width: 20%; }
|
|
.mn-wi-21-m { min-width: 21%; }
|
|
.mn-wi-22-m { min-width: 22%; }
|
|
.mn-wi-23-m { min-width: 23%; }
|
|
.mn-wi-24-m { min-width: 24%; }
|
|
.mn-wi-25-m { min-width: 25%; }
|
|
.mn-wi-26-m { min-width: 26%; }
|
|
.mn-wi-27-m { min-width: 27%; }
|
|
.mn-wi-28-m { min-width: 28%; }
|
|
.mn-wi-29-m { min-width: 29%; }
|
|
.mn-wi-30-m { min-width: 30%; }
|
|
.mn-wi-31-m { min-width: 31%; }
|
|
.mn-wi-32-m { min-width: 32%; }
|
|
.mn-wi-33-m { min-width: 33%; }
|
|
.mn-wi-34-m { min-width: 34%; }
|
|
.mn-wi-35-m { min-width: 35%; }
|
|
.mn-wi-36-m { min-width: 36%; }
|
|
.mn-wi-37-m { min-width: 37%; }
|
|
.mn-wi-38-m { min-width: 38%; }
|
|
.mn-wi-39-m { min-width: 39%; }
|
|
.mn-wi-40-m { min-width: 40%; }
|
|
.mn-wi-41-m { min-width: 41%; }
|
|
.mn-wi-42-m { min-width: 42%; }
|
|
.mn-wi-43-m { min-width: 43%; }
|
|
.mn-wi-44-m { min-width: 44%; }
|
|
.mn-wi-45-m { min-width: 45%; }
|
|
.mn-wi-46-m { min-width: 46%; }
|
|
.mn-wi-47-m { min-width: 47%; }
|
|
.mn-wi-48-m { min-width: 48%; }
|
|
.mn-wi-49-m { min-width: 49%; }
|
|
.mn-wi-50-m { min-width: 50%; }
|
|
.mn-wi-51-m { min-width: 51%; }
|
|
.mn-wi-52-m { min-width: 52%; }
|
|
.mn-wi-53-m { min-width: 53%; }
|
|
.mn-wi-54-m { min-width: 54%; }
|
|
.mn-wi-55-m { min-width: 55%; }
|
|
.mn-wi-56-m { min-width: 56%; }
|
|
.mn-wi-57-m { min-width: 57%; }
|
|
.mn-wi-58-m { min-width: 58%; }
|
|
.mn-wi-59-m { min-width: 59%; }
|
|
.mn-wi-60-m { min-width: 60%; }
|
|
.mn-wi-61-m { min-width: 61%; }
|
|
.mn-wi-62-m { min-width: 62%; }
|
|
.mn-wi-63-m { min-width: 63%; }
|
|
.mn-wi-64-m { min-width: 64%; }
|
|
.mn-wi-65-m { min-width: 65%; }
|
|
.mn-wi-66-m { min-width: 66%; }
|
|
.mn-wi-67-m { min-width: 67%; }
|
|
.mn-wi-68-m { min-width: 68%; }
|
|
.mn-wi-69-m { min-width: 69%; }
|
|
.mn-wi-70-m { min-width: 70%; }
|
|
.mn-wi-71-m { min-width: 71%; }
|
|
.mn-wi-72-m { min-width: 72%; }
|
|
.mn-wi-73-m { min-width: 73%; }
|
|
.mn-wi-74-m { min-width: 74%; }
|
|
.mn-wi-75-m { min-width: 75%; }
|
|
.mn-wi-76-m { min-width: 76%; }
|
|
.mn-wi-77-m { min-width: 77%; }
|
|
.mn-wi-78-m { min-width: 78%; }
|
|
.mn-wi-79-m { min-width: 79%; }
|
|
.mn-wi-80-m { min-width: 80%; }
|
|
.mn-wi-81-m { min-width: 81%; }
|
|
.mn-wi-82-m { min-width: 82%; }
|
|
.mn-wi-83-m { min-width: 83%; }
|
|
.mn-wi-84-m { min-width: 84%; }
|
|
.mn-wi-85-m { min-width: 85%; }
|
|
.mn-wi-86-m { min-width: 86%; }
|
|
.mn-wi-87-m { min-width: 87%; }
|
|
.mn-wi-88-m { min-width: 88%; }
|
|
.mn-wi-89-m { min-width: 89%; }
|
|
.mn-wi-90-m { min-width: 90%; }
|
|
.mn-wi-91-m { min-width: 91%; }
|
|
.mn-wi-92-m { min-width: 92%; }
|
|
.mn-wi-93-m { min-width: 93%; }
|
|
.mn-wi-94-m { min-width: 94%; }
|
|
.mn-wi-95-m { min-width: 95%; }
|
|
.mn-wi-96-m { min-width: 96%; }
|
|
.mn-wi-97-m { min-width: 97%; }
|
|
.mn-wi-98-m { min-width: 98%; }
|
|
.mn-wi-99-m { min-width: 99%; }
|
|
.mn-wi-100-m { min-width: 100%; }
|
|
.mn-wi1-m { min-width: 1rem; }
|
|
.mn-wi2-m { min-width: 2rem; }
|
|
.mn-wi3-m { min-width: 4rem; }
|
|
.mn-wi4-m { min-width: 8rem; }
|
|
.mn-wi5-m { min-width: 16rem; }
|
|
.mn-wi6-m { min-width: 32rem; }
|
|
.mn-wi7-m { min-width: 48rem; }
|
|
.mn-wi8-m { min-width: 64rem; }
|
|
.mn-wi9-m { min-width: 96rem; }
|
|
.mn-wi10-m { min-width: 128rem; }
|
|
.mn-wi-max-m { min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; }
|
|
.mn-wi-min-m { min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; }
|
|
.mn-wi-fit-m { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; }
|
|
.mn-wi-fill-m { min-width: -webkit-fill-available; min-width: -moz-available; min-width: fill-available; } }
|
|
@media screen and (min-width: 64em) { .mn-wi-1-l { min-width: 1%; }
|
|
.mn-wi-2-l { min-width: 2%; }
|
|
.mn-wi-3-l { min-width: 3%; }
|
|
.mn-wi-4-l { min-width: 4%; }
|
|
.mn-wi-5-l { min-width: 5%; }
|
|
.mn-wi-6-l { min-width: 6%; }
|
|
.mn-wi-7-l { min-width: 7%; }
|
|
.mn-wi-8-l { min-width: 8%; }
|
|
.mn-wi-9-l { min-width: 9%; }
|
|
.mn-wi-10-l { min-width: 10%; }
|
|
.mn-wi-11-l { min-width: 11%; }
|
|
.mn-wi-12-l { min-width: 12%; }
|
|
.mn-wi-13-l { min-width: 13%; }
|
|
.mn-wi-14-l { min-width: 14%; }
|
|
.mn-wi-15-l { min-width: 15%; }
|
|
.mn-wi-16-l { min-width: 16%; }
|
|
.mn-wi-17-l { min-width: 17%; }
|
|
.mn-wi-18-l { min-width: 18%; }
|
|
.mn-wi-19-l { min-width: 19%; }
|
|
.mn-wi-20-l { min-width: 20%; }
|
|
.mn-wi-21-l { min-width: 21%; }
|
|
.mn-wi-22-l { min-width: 22%; }
|
|
.mn-wi-23-l { min-width: 23%; }
|
|
.mn-wi-24-l { min-width: 24%; }
|
|
.mn-wi-25-l { min-width: 25%; }
|
|
.mn-wi-26-l { min-width: 26%; }
|
|
.mn-wi-27-l { min-width: 27%; }
|
|
.mn-wi-28-l { min-width: 28%; }
|
|
.mn-wi-29-l { min-width: 29%; }
|
|
.mn-wi-30-l { min-width: 30%; }
|
|
.mn-wi-31-l { min-width: 31%; }
|
|
.mn-wi-32-l { min-width: 32%; }
|
|
.mn-wi-33-l { min-width: 33%; }
|
|
.mn-wi-34-l { min-width: 34%; }
|
|
.mn-wi-35-l { min-width: 35%; }
|
|
.mn-wi-36-l { min-width: 36%; }
|
|
.mn-wi-37-l { min-width: 37%; }
|
|
.mn-wi-38-l { min-width: 38%; }
|
|
.mn-wi-39-l { min-width: 39%; }
|
|
.mn-wi-40-l { min-width: 40%; }
|
|
.mn-wi-41-l { min-width: 41%; }
|
|
.mn-wi-42-l { min-width: 42%; }
|
|
.mn-wi-43-l { min-width: 43%; }
|
|
.mn-wi-44-l { min-width: 44%; }
|
|
.mn-wi-45-l { min-width: 45%; }
|
|
.mn-wi-46-l { min-width: 46%; }
|
|
.mn-wi-47-l { min-width: 47%; }
|
|
.mn-wi-48-l { min-width: 48%; }
|
|
.mn-wi-49-l { min-width: 49%; }
|
|
.mn-wi-50-l { min-width: 50%; }
|
|
.mn-wi-51-l { min-width: 51%; }
|
|
.mn-wi-52-l { min-width: 52%; }
|
|
.mn-wi-53-l { min-width: 53%; }
|
|
.mn-wi-54-l { min-width: 54%; }
|
|
.mn-wi-55-l { min-width: 55%; }
|
|
.mn-wi-56-l { min-width: 56%; }
|
|
.mn-wi-57-l { min-width: 57%; }
|
|
.mn-wi-58-l { min-width: 58%; }
|
|
.mn-wi-59-l { min-width: 59%; }
|
|
.mn-wi-60-l { min-width: 60%; }
|
|
.mn-wi-61-l { min-width: 61%; }
|
|
.mn-wi-62-l { min-width: 62%; }
|
|
.mn-wi-63-l { min-width: 63%; }
|
|
.mn-wi-64-l { min-width: 64%; }
|
|
.mn-wi-65-l { min-width: 65%; }
|
|
.mn-wi-66-l { min-width: 66%; }
|
|
.mn-wi-67-l { min-width: 67%; }
|
|
.mn-wi-68-l { min-width: 68%; }
|
|
.mn-wi-69-l { min-width: 69%; }
|
|
.mn-wi-70-l { min-width: 70%; }
|
|
.mn-wi-71-l { min-width: 71%; }
|
|
.mn-wi-72-l { min-width: 72%; }
|
|
.mn-wi-73-l { min-width: 73%; }
|
|
.mn-wi-74-l { min-width: 74%; }
|
|
.mn-wi-75-l { min-width: 75%; }
|
|
.mn-wi-76-l { min-width: 76%; }
|
|
.mn-wi-77-l { min-width: 77%; }
|
|
.mn-wi-78-l { min-width: 78%; }
|
|
.mn-wi-79-l { min-width: 79%; }
|
|
.mn-wi-80-l { min-width: 80%; }
|
|
.mn-wi-81-l { min-width: 81%; }
|
|
.mn-wi-82-l { min-width: 82%; }
|
|
.mn-wi-83-l { min-width: 83%; }
|
|
.mn-wi-84-l { min-width: 84%; }
|
|
.mn-wi-85-l { min-width: 85%; }
|
|
.mn-wi-86-l { min-width: 86%; }
|
|
.mn-wi-87-l { min-width: 87%; }
|
|
.mn-wi-88-l { min-width: 88%; }
|
|
.mn-wi-89-l { min-width: 89%; }
|
|
.mn-wi-90-l { min-width: 90%; }
|
|
.mn-wi-91-l { min-width: 91%; }
|
|
.mn-wi-92-l { min-width: 92%; }
|
|
.mn-wi-93-l { min-width: 93%; }
|
|
.mn-wi-94-l { min-width: 94%; }
|
|
.mn-wi-95-l { min-width: 95%; }
|
|
.mn-wi-96-l { min-width: 96%; }
|
|
.mn-wi-97-l { min-width: 97%; }
|
|
.mn-wi-98-l { min-width: 98%; }
|
|
.mn-wi-99-l { min-width: 99%; }
|
|
.mn-wi-100-l { min-width: 100%; }
|
|
.mn-wi1-l { min-width: 1rem; }
|
|
.mn-wi2-l { min-width: 2rem; }
|
|
.mn-wi3-l { min-width: 4rem; }
|
|
.mn-wi4-l { min-width: 8rem; }
|
|
.mn-wi5-l { min-width: 16rem; }
|
|
.mn-wi6-l { min-width: 32rem; }
|
|
.mn-wi7-l { min-width: 48rem; }
|
|
.mn-wi8-l { min-width: 64rem; }
|
|
.mn-wi9-l { min-width: 96rem; }
|
|
.mn-wi10-l { min-width: 128rem; }
|
|
.mn-wi-max-l { min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; }
|
|
.mn-wi-min-l { min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; }
|
|
.mn-wi-fit-l { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; }
|
|
.mn-wi-fill-l { min-width: -webkit-fill-available; min-width: -moz-available; min-width: fill-available; } }
|
|
/* normalize.css v2.1.2 | MIT License | git.io/normalize */
|
|
/* ========================================================================== HTML5 display definitions ========================================================================== */
|
|
/** Correct `block` display not defined in IE 8/9. */
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
|
|
|
|
/** Correct `inline-block` display not defined in IE 8/9. */
|
|
audio, canvas, video { display: inline-block; }
|
|
|
|
/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
|
|
audio:not([controls]) { display: none; height: 0; }
|
|
|
|
/** Address `[hidden]` styling not present in IE 8/9. Hide the `template` element in IE, Safari, and Firefox < 22. */
|
|
[hidden], template { display: none; }
|
|
|
|
/* ========================================================================== Base ========================================================================== */
|
|
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
|
|
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
|
|
|
|
/** Remove default margin. */
|
|
body { margin: 0; }
|
|
|
|
/* ========================================================================== Links ========================================================================== */
|
|
/** Remove the gray background color from active links in IE 10. */
|
|
a { background: transparent; }
|
|
|
|
/** Address `outline` inconsistency between Chrome and other browsers. */
|
|
a:focus { outline: thin dotted; }
|
|
|
|
/** Improve readability when focused and also mouse hovered in all browsers. */
|
|
a:active, a:hover { outline: 0; }
|
|
|
|
/* ========================================================================== Typography ========================================================================== */
|
|
/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome. */
|
|
h1 { margin: 0.67em 0; }
|
|
|
|
/** Address styling not present in IE 8/9, Safari 5, and Chrome. */
|
|
abbr[title] { border-bottom: 1px dotted; }
|
|
|
|
/** Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
|
|
b, strong { font-weight: bold; }
|
|
|
|
/** Address styling not present in Safari 5 and Chrome. */
|
|
dfn { font-style: italic; }
|
|
|
|
/** Address differences between Firefox and other browsers. */
|
|
hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }
|
|
|
|
/** Address styling not present in IE 8/9. */
|
|
mark { background: #ff0; color: #000; }
|
|
|
|
/** Correct font family set oddly in Safari 5 and Chrome. */
|
|
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
|
|
|
|
/** Improve readability of pre-formatted text in all browsers. */
|
|
pre { white-space: pre-wrap; }
|
|
|
|
/** Set consistent quote types. */
|
|
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
|
|
|
|
/** Address inconsistent and variable font size in all browsers. */
|
|
small { font-size: 80%; }
|
|
|
|
/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
|
|
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
|
|
|
sup { top: -0.5em; }
|
|
|
|
sub { bottom: -0.25em; }
|
|
|
|
/* ========================================================================== Embedded content ========================================================================== */
|
|
/** Remove border when inside `a` element in IE 8/9. */
|
|
img { border: 0; }
|
|
|
|
/** Correct overflow displayed oddly in IE 9. */
|
|
svg:not(:root) { overflow: hidden; }
|
|
|
|
/* ========================================================================== Figures ========================================================================== */
|
|
/** Address margin not present in IE 8/9 and Safari 5. */
|
|
figure { margin: 0; }
|
|
|
|
/* ========================================================================== Forms ========================================================================== */
|
|
/** Define consistent border, margin, and padding. */
|
|
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
|
|
|
|
/** 1. Correct `color` not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
|
|
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
|
|
|
|
/** 1. Correct font family not being inherited in all browsers. 2. Correct font size not being inherited in all browsers. 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
|
|
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }
|
|
|
|
/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
|
|
button, input { line-height: normal; }
|
|
|
|
/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. Correct `select` style inheritance in Firefox 4+ and Opera. */
|
|
button, select { text-transform: none; }
|
|
|
|
/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
|
|
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }
|
|
|
|
/** Re-set default cursor for disabled elements. */
|
|
button[disabled], html input[disabled] { cursor: default; }
|
|
|
|
/** 1. Address box sizing set to `content-box` in IE 8/9. 2. Remove excess padding in IE 8/9. */
|
|
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 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; }
|
|
|
|
/* ========================================================================== OPACITY ========================================================================== */
|
|
/* Opacity */
|
|
.o-10 { opacity: .1; }
|
|
|
|
.o-20 { opacity: .2; }
|
|
|
|
.o-30 { opacity: .3; }
|
|
|
|
.o-40 { opacity: .4; }
|
|
|
|
.o-50 { opacity: .5; }
|
|
|
|
.o-60 { opacity: .6; }
|
|
|
|
.o-70 { opacity: .7; }
|
|
|
|
.o-80 { opacity: .8; }
|
|
|
|
.o-90 { opacity: .9; }
|
|
|
|
.o-full { opacity: 1; }
|
|
|
|
@media screen and (min-width: 48em) { .o-10-ns { opacity: .1; }
|
|
.o-20-ns { opacity: .2; }
|
|
.o-30-ns { opacity: .3; }
|
|
.o-40-ns { opacity: .4; }
|
|
.o-50-ns { opacity: .5; }
|
|
.o-60-ns { opacity: .6; }
|
|
.o-70-ns { opacity: .7; }
|
|
.o-80-ns { opacity: .8; }
|
|
.o-90-ns { opacity: .9; }
|
|
.o-full-ns { opacity: 1; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .o-10-m { opacity: .1; }
|
|
.o-20-m { opacity: .2; }
|
|
.o-30-m { opacity: .3; }
|
|
.o-40-m { opacity: .4; }
|
|
.o-50-m { opacity: .5; }
|
|
.o-60-m { opacity: .6; }
|
|
.o-70-m { opacity: .7; }
|
|
.o-80-m { opacity: .8; }
|
|
.o-90-m { opacity: .9; }
|
|
.o-full-m { opacity: 1; } }
|
|
@media screen and (min-width: 64em) { .o-10-l { opacity: .1; }
|
|
.o-20-l { opacity: .2; }
|
|
.o-30-l { opacity: .3; }
|
|
.o-40-l { opacity: .4; }
|
|
.o-50-l { opacity: .5; }
|
|
.o-60-l { opacity: .6; }
|
|
.o-70-l { opacity: .7; }
|
|
.o-80-l { opacity: .8; }
|
|
.o-90-l { opacity: .9; }
|
|
.o-full-l { opacity: 1; } }
|
|
/* ========================================================================== OVERFLOWS ========================================================================== */
|
|
.of-vis { overflow: visible; }
|
|
|
|
.of-hid { overflow: hidden; }
|
|
|
|
.of-scr { overflow: scroll; }
|
|
|
|
.of-aut { overflow: auto; }
|
|
|
|
@media screen and (min-width: 48em) { .of-vis-ns { overflow: visible; }
|
|
.of-hid-ns { overflow: hidden; }
|
|
.of-scr-ns { overflow: scroll; }
|
|
.of-aut-ns { overflow: auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .of-vis-m { overflow: visible; }
|
|
.of-hid-m { overflow: hidden; }
|
|
.of-scr-m { overflow: scroll; }
|
|
.of-aut-m { overflow: auto; } }
|
|
@media screen and (min-width: 64em) { .of-vis-l { overflow: visible; }
|
|
.of-hid-l { overflow: hidden; }
|
|
.of-scr-l { overflow: scroll; }
|
|
.of-aut-l { overflow: auto; } }
|
|
/* ========================================================================== POSITIONING ========================================================================== */
|
|
.pos-stat { position: static; }
|
|
|
|
.pos-rel { position: relative; }
|
|
|
|
.pos-abs { position: absolute; }
|
|
|
|
.pos-fix { position: fixed; }
|
|
|
|
/* Values */
|
|
.top-0 { top: 0; }
|
|
|
|
.left-0 { left: 0; }
|
|
|
|
.right-0 { right: 0; }
|
|
|
|
.bottom-0 { bottom: 0; }
|
|
|
|
.top-1 { top: 1rem; }
|
|
|
|
.left-1 { left: 1rem; }
|
|
|
|
.right-1 { right: 1rem; }
|
|
|
|
.bottom-1 { bottom: 1rem; }
|
|
|
|
.top-2 { top: 2rem; }
|
|
|
|
.left-2 { left: 2rem; }
|
|
|
|
.right-2 { right: 2rem; }
|
|
|
|
.bottom-2 { bottom: 2rem; }
|
|
|
|
.top-4 { top: 4rem; }
|
|
|
|
.left-4 { left: 4rem; }
|
|
|
|
.right-4 { right: 4rem; }
|
|
|
|
.bottom-4 { bottom: 4rem; }
|
|
|
|
/* Top Percentage based scale */
|
|
.top-10 { top: 10%; }
|
|
|
|
.top-20 { top: 20%; }
|
|
|
|
.top-30 { top: 30%; }
|
|
|
|
.top-40 { top: 40%; }
|
|
|
|
.top-50 { top: 50%; }
|
|
|
|
.top-60 { top: 60%; }
|
|
|
|
.top-70 { top: 70%; }
|
|
|
|
.top-80 { top: 80%; }
|
|
|
|
.top-90 { top: 90%; }
|
|
|
|
.top-100 { top: 100%; }
|
|
|
|
.top-auto { top: auto; }
|
|
|
|
.top-i { top: inherit; }
|
|
|
|
.center { margin: 0 auto; }
|
|
|
|
@media screen and (min-width: 48em) { .pos-stat-ns { position: static; }
|
|
.pos-rel-ns { position: relative; }
|
|
.pos-abs-ns { position: absolute; }
|
|
.pos-fix-ns { position: fixed; }
|
|
.top-0-ns { top: 0; }
|
|
.left-0-ns { left: 0; }
|
|
.right-0-ns { right: 0; }
|
|
.bottom-0-ns { bottom: 0; }
|
|
.top-1-ns { top: 1rem; }
|
|
.left-1-ns { left: 1rem; }
|
|
.right-1-ns { right: 1rem; }
|
|
.bottom-1-ns { bottom: 1rem; }
|
|
.top-2-ns { top: 2rem; }
|
|
.left-2-ns { left: 2rem; }
|
|
.right-2-ns { right: 2rem; }
|
|
.bottom-2-ns { bottom: 2rem; }
|
|
.top-4-ns { top: 4rem; }
|
|
.left-4-ns { left: 4rem; }
|
|
.right-4-ns { right: 4rem; }
|
|
.bottom-4-ns { bottom: 4rem; }
|
|
.top-10-ns { top: 10%; }
|
|
.top-20-ns { top: 20%; }
|
|
.top-30-ns { top: 30%; }
|
|
.top-40-ns { top: 40%; }
|
|
.top-50-ns { top: 50%; }
|
|
.top-60-ns { top: 60%; }
|
|
.top-70-ns { top: 70%; }
|
|
.top-80-ns { top: 80%; }
|
|
.top-90-ns { top: 90%; }
|
|
.top-100-ns { top: 100%; }
|
|
.top-auto-ns { top: auto; }
|
|
.top-i-ns { top: inherit; }
|
|
.center-ns { margin: 0 auto; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .pos-stat-m { position: static; }
|
|
.pos-rel-m { position: relative; }
|
|
.pos-abs-m { position: absolute; }
|
|
.pos-fix-m { position: fixed; }
|
|
.top-0-m { top: 0; }
|
|
.left-0-m { left: 0; }
|
|
.right-0-m { right: 0; }
|
|
.bottom-0-m { bottom: 0; }
|
|
.top-1-m { top: 1rem; }
|
|
.left-1-m { left: 1rem; }
|
|
.right-1-m { right: 1rem; }
|
|
.bottom-1-m { bottom: 1rem; }
|
|
.top-2-m { top: 2rem; }
|
|
.left-2-m { left: 2rem; }
|
|
.right-2-m { right: 2rem; }
|
|
.bottom-2-m { bottom: 2rem; }
|
|
.top-4-m { top: 4rem; }
|
|
.left-4-m { left: 4rem; }
|
|
.right-4-m { right: 4rem; }
|
|
.bottom-4-m { bottom: 4rem; }
|
|
.top-10-m { top: 10%; }
|
|
.top-20-m { top: 20%; }
|
|
.top-30-m { top: 30%; }
|
|
.top-40-m { top: 40%; }
|
|
.top-50-m { top: 50%; }
|
|
.top-60-m { top: 60%; }
|
|
.top-70-m { top: 70%; }
|
|
.top-80-m { top: 80%; }
|
|
.top-90-m { top: 90%; }
|
|
.top-100-m { top: 100%; }
|
|
.top-auto-m { top: auto; }
|
|
.top-i-m { top: inherit; }
|
|
.center-m { margin: 0 auto; } }
|
|
@media screen and (min-width: 64em) { .pos-stat-l { position: static; }
|
|
.pos-rel-l { position: relative; }
|
|
.pos-abs-l { position: absolute; }
|
|
.pos-fix-l { position: fixed; }
|
|
.top-0-l { top: 0; }
|
|
.left-0-l { left: 0; }
|
|
.right-0-l { right: 0; }
|
|
.bottom-0-l { bottom: 0; }
|
|
.top-1-l { top: 1rem; }
|
|
.left-1-l { left: 1rem; }
|
|
.right-1-l { right: 1rem; }
|
|
.bottom-1-l { bottom: 1rem; }
|
|
.top-2-l { top: 2rem; }
|
|
.left-2-l { left: 2rem; }
|
|
.right-2-l { right: 2rem; }
|
|
.bottom-2-l { bottom: 2rem; }
|
|
.top-4-l { top: 4rem; }
|
|
.left-4-l { left: 4rem; }
|
|
.right-4-l { right: 4rem; }
|
|
.bottom-4-l { bottom: 4rem; }
|
|
.top-10-l { top: 10%; }
|
|
.top-20-l { top: 20%; }
|
|
.top-30-l { top: 30%; }
|
|
.top-40-l { top: 40%; }
|
|
.top-50-l { top: 50%; }
|
|
.top-60-l { top: 60%; }
|
|
.top-70-l { top: 70%; }
|
|
.top-80-l { top: 80%; }
|
|
.top-90-l { top: 90%; }
|
|
.top-100-l { top: 100%; }
|
|
.top-auto-l { top: auto; }
|
|
.top-i-l { top: inherit; }
|
|
.center-l { margin: 0 auto; } }
|
|
/* ========================================================================== SKINS ========================================================================== */
|
|
/* Grays */
|
|
.blk { color: #111111; }
|
|
|
|
.dk-gry { color: #333333; }
|
|
|
|
.md-gry { color: #666666; }
|
|
|
|
.gray { color: #888888; }
|
|
|
|
.silver { color: #999999; }
|
|
|
|
.lt-slvr { color: #aaaaaa; }
|
|
|
|
.lt-gry { color: #cccccc; }
|
|
|
|
.near-wht { color: #eeeeee; }
|
|
|
|
.wht { color: white; }
|
|
|
|
/* Text colors */
|
|
.aqua { color: #7fdbff; }
|
|
|
|
.blue { color: #0074d9; }
|
|
|
|
.navy { color: #001f3f; }
|
|
|
|
.teal { color: #39cccc; }
|
|
|
|
.green { color: #2ecc40; }
|
|
|
|
.olive { color: #3d9970; }
|
|
|
|
.lime { color: #01ff70; }
|
|
|
|
.yellow { color: #ffdc00; }
|
|
|
|
.orange { color: #ff851b; }
|
|
|
|
.red { color: #ff4136; }
|
|
|
|
.fuchsia { color: #f012be; }
|
|
|
|
.purple { color: #b10dc9; }
|
|
|
|
.maroon { color: #85144b; }
|
|
|
|
/* Background colors */
|
|
.bg-aqua { background-color: #7fdbff; }
|
|
|
|
.bg-blue { background-color: #0074d9; }
|
|
|
|
.bg-navy { background-color: #001f3f; }
|
|
|
|
.bg-teal { background-color: #39cccc; }
|
|
|
|
.bg-green { background-color: #2ecc40; }
|
|
|
|
.bg-olive { background-color: #3d9970; }
|
|
|
|
.bg-lime { background-color: #01ff70; }
|
|
|
|
.bg-yellow { background-color: #ffdc00; }
|
|
|
|
.bg-orange { background-color: #ff851b; }
|
|
|
|
.bg-red { background-color: #ff4136; }
|
|
|
|
.bg-fuchsia { background-color: #f012be; }
|
|
|
|
.bg-purple { background-color: #b10dc9; }
|
|
|
|
.bg-maroon { background-color: #85144b; }
|
|
|
|
/* ========================================================================== SPACING
|
|
An eight step powers of two scale ranging from 0 to 16rem.
|
|
Legend:
|
|
p = padding m = margin
|
|
a = all h = horizontal v = vertical t = top r = right b = bottom l = left
|
|
n = none xs = extra small s = small m = medium l = large x = extra xl = extra large xxl = extra extra large
|
|
========================================================================== */
|
|
.pan { padding: 0; }
|
|
|
|
.paxs { padding: .25rem; }
|
|
|
|
.pas { padding: .5rem; }
|
|
|
|
.pam { padding: 1rem; }
|
|
|
|
.pal { padding: 2rem; }
|
|
|
|
.pax { padding: 4rem; }
|
|
|
|
.paxl { padding: 8rem; }
|
|
|
|
.paxxl { padding: 16rem; }
|
|
|
|
.pln { padding-left: 0; }
|
|
|
|
.plxs { padding-left: .25rem; }
|
|
|
|
.pls { padding-left: .5rem; }
|
|
|
|
.plm { padding-left: 1rem; }
|
|
|
|
.pll { padding-left: 2rem; }
|
|
|
|
.plx { padding-left: 4rem; }
|
|
|
|
.plxl { padding-left: 8rem; }
|
|
|
|
.plxxl { padding-left: 16rem; }
|
|
|
|
.prn { padding-right: 0; }
|
|
|
|
.prxs { padding-right: .25rem; }
|
|
|
|
.prs { padding-right: .5rem; }
|
|
|
|
.prm { padding-right: 1rem; }
|
|
|
|
.prl { padding-right: 2rem; }
|
|
|
|
.prx { padding-right: 4rem; }
|
|
|
|
.prxl { padding-right: 8rem; }
|
|
|
|
.prxxl { padding-right: 16rem; }
|
|
|
|
.pbn { padding-bottom: 0; }
|
|
|
|
.pbxs { padding-bottom: .25rem; }
|
|
|
|
.pbs { padding-bottom: .5rem; }
|
|
|
|
.pbm { padding-bottom: 1rem; }
|
|
|
|
.pbl { padding-bottom: 2rem; }
|
|
|
|
.pbx { padding-bottom: 4rem; }
|
|
|
|
.pbxl { padding-bottom: 8rem; }
|
|
|
|
.pbxxl { padding-bottom: 16rem; }
|
|
|
|
.ptn { padding-top: 0; }
|
|
|
|
.ptxs { padding-top: .25rem; }
|
|
|
|
.pts { padding-top: .5rem; }
|
|
|
|
.ptm { padding-top: 1rem; }
|
|
|
|
.ptl { padding-top: 2rem; }
|
|
|
|
.ptx { padding-top: 4rem; }
|
|
|
|
.ptxl { padding-top: 8rem; }
|
|
|
|
.ptxxl { padding-top: 16rem; }
|
|
|
|
.pvn { padding-top: 0; padding-bottom: 0; }
|
|
|
|
.pvxs { padding-top: .25rem; padding-bottom: .25rem; }
|
|
|
|
.pvs { padding-top: .5rem; padding-bottom: .5rem; }
|
|
|
|
.pvm { padding-top: 1rem; padding-bottom: 1rem; }
|
|
|
|
.pvl { padding-top: 2rem; padding-bottom: 2rem; }
|
|
|
|
.pvx { padding-top: 4rem; padding-bottom: 4rem; }
|
|
|
|
.pvxl { padding-top: 8rem; padding-bottom: 8rem; }
|
|
|
|
.pvxxl { padding-top: 16rem; padding-bottom: 16rem; }
|
|
|
|
.phn { padding-left: 0; padding-right: 0; }
|
|
|
|
.pvxs { padding-left: .25rem; padding-right: .25rem; }
|
|
|
|
.phs { padding-left: .5rem; padding-right: .5rem; }
|
|
|
|
.phm { padding-left: 1rem; padding-right: 1rem; }
|
|
|
|
.phl { padding-left: 2rem; padding-right: 2rem; }
|
|
|
|
.phx { padding-left: 4rem; padding-right: 4rem; }
|
|
|
|
.phxl { padding-left: 8rem; padding-right: 8rem; }
|
|
|
|
.phxxl { padding-left: 16rem; padding-right: 16rem; }
|
|
|
|
.man { margin: 0; }
|
|
|
|
.maxs { margin: .25rem; }
|
|
|
|
.mas { margin: .5rem; }
|
|
|
|
.mam { margin: 1rem; }
|
|
|
|
.mal { margin: 2rem; }
|
|
|
|
.max { margin: 4rem; }
|
|
|
|
.maxl { margin: 8rem; }
|
|
|
|
.maxxl { margin: 16rem; }
|
|
|
|
.mln { margin-left: 0; }
|
|
|
|
.mlxs { margin-left: .25rem; }
|
|
|
|
.mls { margin-left: .5rem; }
|
|
|
|
.mlm { margin-left: 1rem; }
|
|
|
|
.mll { margin-left: 2rem; }
|
|
|
|
.mlx { margin-left: 4rem; }
|
|
|
|
.mlxl { margin-left: 8rem; }
|
|
|
|
.mlxxl { margin-left: 16rem; }
|
|
|
|
.mrn { margin-right: 0; }
|
|
|
|
.mrxs { margin-right: .25rem; }
|
|
|
|
.mrs { margin-right: .5rem; }
|
|
|
|
.mrm { margin-right: 1rem; }
|
|
|
|
.mrl { margin-right: 2rem; }
|
|
|
|
.mrx { margin-right: 4rem; }
|
|
|
|
.mrxl { margin-right: 8rem; }
|
|
|
|
.mrxxl { margin-right: 16rem; }
|
|
|
|
.mbn { margin-bottom: 0; }
|
|
|
|
.mbxs { margin-bottom: .25rem; }
|
|
|
|
.mbs { margin-bottom: .5rem; }
|
|
|
|
.mbm { margin-bottom: 1rem; }
|
|
|
|
.mbl { margin-bottom: 2rem; }
|
|
|
|
.mbx { margin-bottom: 4rem; }
|
|
|
|
.mbxl { margin-bottom: 8rem; }
|
|
|
|
.mbxxl { margin-bottom: 16rem; }
|
|
|
|
.mtn { margin-top: 0; }
|
|
|
|
.mtxs { margin-top: .25rem; }
|
|
|
|
.mts { margin-top: .5rem; }
|
|
|
|
.mtm { margin-top: 1rem; }
|
|
|
|
.mtl { margin-top: 2rem; }
|
|
|
|
.mtx { margin-top: 4rem; }
|
|
|
|
.mtxl { margin-top: 8rem; }
|
|
|
|
.mtxxl { margin-top: 16rem; }
|
|
|
|
.mvn { margin-top: 0; margin-bottom: 0rem; }
|
|
|
|
.mvxs { margin-top: .25rem; margin-bottom: .25rem; }
|
|
|
|
.mvs { margin-top: .5rem; margin-bottom: .5rem; }
|
|
|
|
.mvm { margin-top: 1rem; margin-bottom: 1rem; }
|
|
|
|
.mvl { margin-top: 2rem; margin-bottom: 2rem; }
|
|
|
|
.mvx { margin-top: 4rem; margin-bottom: 4rem; }
|
|
|
|
.mvxl { margin-top: 8rem; margin-bottom: 8rem; }
|
|
|
|
.mvxl { margin-top: 16rem; margin-bottom: 16rem; }
|
|
|
|
.mhn { margin-left: 0; margin-right: 0; }
|
|
|
|
.mhs { margin-left: .5rem; margin-right: .5rem; }
|
|
|
|
.mhm { margin-left: 1rem; margin-right: 1rem; }
|
|
|
|
.mhl { margin-left: 2rem; margin-right: 2rem; }
|
|
|
|
.mhx { margin-left: 4rem; margin-right: 4rem; }
|
|
|
|
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
|
|
|
.mhxxl { margin-left: 16rem; margin-right: 16rem; }
|
|
|
|
@media screen and (min-width: 48em) { .pan-ns { padding: 0; }
|
|
.paxs-ns { padding: .25rem; }
|
|
.pas-ns { padding: .5rem; }
|
|
.pam-ns { padding: 1rem; }
|
|
.pal-ns { padding: 2rem; }
|
|
.pax-ns { padding: 4rem; }
|
|
.paxl-ns { padding: 8rem; }
|
|
.paxxl-ns { padding: 16rem; }
|
|
.pln-ns { padding-left: 0; }
|
|
.plxs-ns { padding-left: .25rem; }
|
|
.pls-ns { padding-left: .5rem; }
|
|
.plm-ns { padding-left: 1rem; }
|
|
.pll-ns { padding-left: 2rem; }
|
|
.plx-ns { padding-left: 4rem; }
|
|
.plxl-ns { padding-left: 8rem; }
|
|
.plxxl-ns { padding-left: 16rem; }
|
|
.prn-ns { padding-right: 0; }
|
|
.prxs-ns { padding-right: .25rem; }
|
|
.prs-ns { padding-right: .5rem; }
|
|
.prm-ns { padding-right: 1rem; }
|
|
.prl-ns { padding-right: 2rem; }
|
|
.prx-ns { padding-right: 4rem; }
|
|
.prxl-ns { padding-right: 8rem; }
|
|
.prxxl-ns { padding-right: 16rem; }
|
|
.pbn-ns { padding-bottom: 0; }
|
|
.pbxs-ns { padding-bottom: .25rem; }
|
|
.pbs-ns { padding-bottom: .5rem; }
|
|
.pbm-ns { padding-bottom: 1rem; }
|
|
.pbl-ns { padding-bottom: 2rem; }
|
|
.pbx-ns { padding-bottom: 4rem; }
|
|
.pbxl-ns { padding-bottom: 8rem; }
|
|
.pbxxl-ns { padding-bottom: 16rem; }
|
|
.ptn-ns { padding-top: 0; }
|
|
.ptxs-ns { padding-top: .25rem; }
|
|
.pts-ns { padding-top: .5rem; }
|
|
.ptm-ns { padding-top: 1rem; }
|
|
.ptl-ns { padding-top: 2rem; }
|
|
.ptx-ns { padding-top: 4rem; }
|
|
.ptxl-ns { padding-top: 8rem; }
|
|
.ptxxl-ns { padding-top: 16rem; }
|
|
.pvn-ns { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-ns { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-ns { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-ns { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-ns { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-ns { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-ns { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-ns { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-ns { padding-left: 0; padding-right: 0; }
|
|
.pvxs-ns { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-ns { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-ns { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-ns { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-ns { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-ns { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-ns { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-ns { margin: 0; }
|
|
.maxs-ns { margin: .25rem; }
|
|
.mas-ns { margin: .5rem; }
|
|
.mam-ns { margin: 1rem; }
|
|
.mal-ns { margin: 2rem; }
|
|
.max-ns { margin: 4rem; }
|
|
.maxl-ns { margin: 8rem; }
|
|
.maxxl-ns { margin: 16rem; }
|
|
.mln-ns { margin-left: 0; }
|
|
.mlxs-ns { margin-left: .25rem; }
|
|
.mls-ns { margin-left: .5rem; }
|
|
.mlm-ns { margin-left: 1rem; }
|
|
.mll-ns { margin-left: 2rem; }
|
|
.mlx-ns { margin-left: 4rem; }
|
|
.mlxl-ns { margin-left: 8rem; }
|
|
.mlxxl-ns { margin-left: 16rem; }
|
|
.mrn-ns { margin-right: 0; }
|
|
.mrxs-ns { margin-right: .25rem; }
|
|
.mrs-ns { margin-right: .5rem; }
|
|
.mrm-ns { margin-right: 1rem; }
|
|
.mrl-ns { margin-right: 2rem; }
|
|
.mrx-ns { margin-right: 4rem; }
|
|
.mrxl-ns { margin-right: 8rem; }
|
|
.mrxxl-ns { margin-right: 16rem; }
|
|
.mbn-ns { margin-bottom: 0; }
|
|
.mbxs-ns { margin-bottom: .25rem; }
|
|
.mbs-ns { margin-bottom: .5rem; }
|
|
.mbm-ns { margin-bottom: 1rem; }
|
|
.mbl-ns { margin-bottom: 2rem; }
|
|
.mbx-ns { margin-bottom: 4rem; }
|
|
.mbxl-ns { margin-bottom: 8rem; }
|
|
.mbxxl-ns { margin-bottom: 16rem; }
|
|
.mtn-ns { margin-top: 0; }
|
|
.mtxs-ns { margin-top: .25rem; }
|
|
.mts-ns { margin-top: .5rem; }
|
|
.mtm-ns { margin-top: 1rem; }
|
|
.mtl-ns { margin-top: 2rem; }
|
|
.mtx-ns { margin-top: 4rem; }
|
|
.mtxl-ns { margin-top: 8rem; }
|
|
.mtxxl-ns { margin-top: 16rem; }
|
|
.mvn-ns { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-ns { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-ns { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-ns { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-ns { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-ns { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-ns { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-ns { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-ns { margin-left: 0; margin-right: 0; }
|
|
.mhs-ns { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-ns { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-ns { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-ns { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl-ns { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl-ns { margin-left: 16rem; margin-right: 16rem; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .pan-m { padding: 0; }
|
|
.paxs-m { padding: .25rem; }
|
|
.pas-m { padding: .5rem; }
|
|
.pam-m { padding: 1rem; }
|
|
.pal-m { padding: 2rem; }
|
|
.pax-m { padding: 4rem; }
|
|
.paxl-m { padding: 8rem; }
|
|
.paxxl-m { padding: 16rem; }
|
|
.pln-m { padding-left: 0; }
|
|
.plxs-m { padding-left: .25rem; }
|
|
.pls-m { padding-left: .5rem; }
|
|
.plm-m { padding-left: 1rem; }
|
|
.pll-m { padding-left: 2rem; }
|
|
.plx-m { padding-left: 4rem; }
|
|
.plxl-m { padding-left: 8rem; }
|
|
.plxxl-m { padding-left: 16rem; }
|
|
.prn-m { padding-right: 0; }
|
|
.prxs-m { padding-right: .25rem; }
|
|
.prs-m { padding-right: .5rem; }
|
|
.prm-m { padding-right: 1rem; }
|
|
.prl-m { padding-right: 2rem; }
|
|
.prx-m { padding-right: 4rem; }
|
|
.prxl-m { padding-right: 8rem; }
|
|
.prxxl-m { padding-right: 16rem; }
|
|
.pbn-m { padding-bottom: 0; }
|
|
.pbxs-m { padding-bottom: .25rem; }
|
|
.pbs-m { padding-bottom: .5rem; }
|
|
.pbm-m { padding-bottom: 1rem; }
|
|
.pbl-m { padding-bottom: 2rem; }
|
|
.pbx-m { padding-bottom: 4rem; }
|
|
.pbxl-m { padding-bottom: 8rem; }
|
|
.pbxxl-m { padding-bottom: 16rem; }
|
|
.ptn-m { padding-top: 0; }
|
|
.ptxs-m { padding-top: .25rem; }
|
|
.pts-m { padding-top: .5rem; }
|
|
.ptm-m { padding-top: 1rem; }
|
|
.ptl-m { padding-top: 2rem; }
|
|
.ptx-m { padding-top: 4rem; }
|
|
.ptxl-m { padding-top: 8rem; }
|
|
.ptxxl-m { padding-top: 16rem; }
|
|
.pvn-m { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-m { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-m { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-m { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-m { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-m { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-m { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-m { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-m { padding-left: 0; padding-right: 0; }
|
|
.pvxs-m { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-m { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-m { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-m { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-m { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-m { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-m { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-m { margin: 0; }
|
|
.maxs-m { margin: .25rem; }
|
|
.mas-m { margin: .5rem; }
|
|
.mam-m { margin: 1rem; }
|
|
.mal-m { margin: 2rem; }
|
|
.max-m { margin: 4rem; }
|
|
.maxl-m { margin: 8rem; }
|
|
.maxxl-m { margin: 16rem; }
|
|
.mln-m { margin-left: 0; }
|
|
.mlxs-m { margin-left: .25rem; }
|
|
.mls-m { margin-left: .5rem; }
|
|
.mlm-m { margin-left: 1rem; }
|
|
.mll-m { margin-left: 2rem; }
|
|
.mlx-m { margin-left: 4rem; }
|
|
.mlxl-m { margin-left: 8rem; }
|
|
.mlxxl-m { margin-left: 16rem; }
|
|
.mrn-m { margin-right: 0; }
|
|
.mrxs-m { margin-right: .25rem; }
|
|
.mrs-m { margin-right: .5rem; }
|
|
.mrm-m { margin-right: 1rem; }
|
|
.mrl-m { margin-right: 2rem; }
|
|
.mrx-m { margin-right: 4rem; }
|
|
.mrxl-m { margin-right: 8rem; }
|
|
.mrxxl-m { margin-right: 16rem; }
|
|
.mbn-m { margin-bottom: 0; }
|
|
.mbxs-m { margin-bottom: .25rem; }
|
|
.mbs-m { margin-bottom: .5rem; }
|
|
.mbm-m { margin-bottom: 1rem; }
|
|
.mbl-m { margin-bottom: 2rem; }
|
|
.mbx-m { margin-bottom: 4rem; }
|
|
.mbxl-m { margin-bottom: 8rem; }
|
|
.mbxxl-m { margin-bottom: 16rem; }
|
|
.mtn-m { margin-top: 0; }
|
|
.mtxs-m { margin-top: .25rem; }
|
|
.mts-m { margin-top: .5rem; }
|
|
.mtm-m { margin-top: 1rem; }
|
|
.mtl-m { margin-top: 2rem; }
|
|
.mtx-m { margin-top: 4rem; }
|
|
.mtxl-m { margin-top: 8rem; }
|
|
.mtxxl-m { margin-top: 16rem; }
|
|
.mvn-m { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-m { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-m { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-m { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-m { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-m { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-m { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-m { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-m { margin-left: 0; margin-right: 0; }
|
|
.mhxs-m { margin-left: .25rem; margin-right: .25rem; }
|
|
.mhs-m { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-m { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-m { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-m { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl { margin-left: 16rem; margin-right: 16rem; } }
|
|
@media screen and (min-width: 64em) { .pan-l { padding: 0; }
|
|
.paxs-l { padding: .25rem; }
|
|
.pas-l { padding: .5rem; }
|
|
.pam-l { padding: 1rem; }
|
|
.pal-l { padding: 2rem; }
|
|
.pax-l { padding: 4rem; }
|
|
.paxl-l { padding: 8rem; }
|
|
.paxxl-l { padding: 16rem; }
|
|
.pln-l { padding-left: 0; }
|
|
.plxs-l { padding-left: .25rem; }
|
|
.pls-l { padding-left: .5rem; }
|
|
.plm-l { padding-left: 1rem; }
|
|
.pll-l { padding-left: 2rem; }
|
|
.plx-l { padding-left: 4rem; }
|
|
.plxl-l { padding-left: 8rem; }
|
|
.plxxl-l { padding-left: 16rem; }
|
|
.prn-l { padding-right: 0; }
|
|
.prxs-l { padding-right: .25rem; }
|
|
.prs-l { padding-right: .5rem; }
|
|
.prm-l { padding-right: 1rem; }
|
|
.prl-l { padding-right: 2rem; }
|
|
.prx-l { padding-right: 4rem; }
|
|
.prxl-l { padding-right: 8rem; }
|
|
.prxxl-l { padding-right: 16rem; }
|
|
.pbn-l { padding-bottom: 0; }
|
|
.pbxs-l { padding-bottom: .25rem; }
|
|
.pbs-l { padding-bottom: .5rem; }
|
|
.pbm-l { padding-bottom: 1rem; }
|
|
.pbl-l { padding-bottom: 2rem; }
|
|
.pbx-l { padding-bottom: 4rem; }
|
|
.pbxl-l { padding-bottom: 8rem; }
|
|
.pbxxl-l { padding-bottom: 16rem; }
|
|
.ptn-l { padding-top: 0; }
|
|
.ptxs-l { padding-top: .25rem; }
|
|
.pts-l { padding-top: .5rem; }
|
|
.ptm-l { padding-top: 1rem; }
|
|
.ptl-l { padding-top: 2rem; }
|
|
.ptx-l { padding-top: 4rem; }
|
|
.ptxl-l { padding-top: 8rem; }
|
|
.ptxxl-l { padding-top: 16rem; }
|
|
.pvn-l { padding-top: 0; padding-bottom: 0; }
|
|
.pvxs-l { padding-top: .25rem; padding-bottom: .25rem; }
|
|
.pvs-l { padding-top: .5rem; padding-bottom: .5rem; }
|
|
.pvm-l { padding-top: 1rem; padding-bottom: 1rem; }
|
|
.pvl-l { padding-top: 2rem; padding-bottom: 2rem; }
|
|
.pvx-l { padding-top: 4rem; padding-bottom: 4rem; }
|
|
.pvxl-l { padding-top: 8rem; padding-bottom: 8rem; }
|
|
.pvxxl-l { padding-top: 16rem; padding-bottom: 16rem; }
|
|
.phn-l { padding-left: 0; padding-right: 0; }
|
|
.pvxs-l { padding-left: .25rem; padding-right: .25rem; }
|
|
.phs-l { padding-left: .5rem; padding-right: .5rem; }
|
|
.phm-l { padding-left: 1rem; padding-right: 1rem; }
|
|
.phl-l { padding-left: 2rem; padding-right: 2rem; }
|
|
.phx-l { padding-left: 4rem; padding-right: 4rem; }
|
|
.phxl-l { padding-left: 8rem; padding-right: 8rem; }
|
|
.phxxl-l { padding-left: 16rem; padding-right: 16rem; }
|
|
.man-l { margin: 0; }
|
|
.maxs-l { margin: .25rem; }
|
|
.mas-l { margin: .5rem; }
|
|
.mam-l { margin: 1rem; }
|
|
.mal-l { margin: 2rem; }
|
|
.max-l { margin: 4rem; }
|
|
.maxl-l { margin: 8rem; }
|
|
.maxxl-l { margin: 16rem; }
|
|
.mln-l { margin-left: 0; }
|
|
.mlxs-l { margin-left: .25rem; }
|
|
.mls-l { margin-left: .5rem; }
|
|
.mlm-l { margin-left: 1rem; }
|
|
.mll-l { margin-left: 2rem; }
|
|
.mlx-l { margin-left: 4rem; }
|
|
.mlxl-l { margin-left: 8rem; }
|
|
.mlxxl-l { margin-left: 16rem; }
|
|
.mrn-l { margin-right: 0; }
|
|
.mrxs-l { margin-right: .25rem; }
|
|
.mrs-l { margin-right: .5rem; }
|
|
.mrm-l { margin-right: 1rem; }
|
|
.mrl-l { margin-right: 2rem; }
|
|
.mrx-l { margin-right: 4rem; }
|
|
.mrxl-l { margin-right: 8rem; }
|
|
.mrxxl-l { margin-right: 16rem; }
|
|
.mbn-l { margin-bottom: 0; }
|
|
.mbxs-l { margin-bottom: .25rem; }
|
|
.mbs-l { margin-bottom: .5rem; }
|
|
.mbm-l { margin-bottom: 1rem; }
|
|
.mbl-l { margin-bottom: 2rem; }
|
|
.mbx-l { margin-bottom: 4rem; }
|
|
.mbxl-l { margin-bottom: 8rem; }
|
|
.mbxxl-l { margin-bottom: 16rem; }
|
|
.mtn-l { margin-top: 0; }
|
|
.mtxs-l { margin-top: .25rem; }
|
|
.mts-l { margin-top: .5rem; }
|
|
.mtm-l { margin-top: 1rem; }
|
|
.mtl-l { margin-top: 2rem; }
|
|
.mtx-l { margin-top: 4rem; }
|
|
.mtxl-l { margin-top: 8rem; }
|
|
.mtxxl-l { margin-top: 16rem; }
|
|
.mvn-l { margin-top: 0; margin-bottom: 0rem; }
|
|
.mvxs-l { margin-top: .25rem; margin-bottom: .25rem; }
|
|
.mvs-l { margin-top: .5rem; margin-bottom: .5rem; }
|
|
.mvm-l { margin-top: 1rem; margin-bottom: 1rem; }
|
|
.mvl-l { margin-top: 2rem; margin-bottom: 2rem; }
|
|
.mvx-l { margin-top: 4rem; margin-bottom: 4rem; }
|
|
.mvxl-l { margin-top: 8rem; margin-bottom: 8rem; }
|
|
.mvxxl-l { margin-top: 16rem; margin-bottom: 16rem; }
|
|
.mhn-l { margin-left: 0; margin-right: 0; }
|
|
.mhxs-l { margin-left: .25rem; margin-right: .25rem; }
|
|
.mhs-l { margin-left: .5rem; margin-right: .5rem; }
|
|
.mhm-l { margin-left: 1rem; margin-right: 1rem; }
|
|
.mhl-l { margin-left: 2rem; margin-right: 2rem; }
|
|
.mhx-l { margin-left: 4rem; margin-right: 4rem; }
|
|
.mhxl-l { margin-left: 8rem; margin-right: 8rem; }
|
|
.mhxxl-l { margin-left: 16rem; margin-right: 16rem; } }
|
|
/* ========================================================================== SQUARES ========================================================================== */
|
|
.sq1 { width: 1rem; height: 1rem; }
|
|
|
|
.sq2 { width: 2rem; height: 2rem; }
|
|
|
|
.sq3 { width: 4rem; height: 4rem; }
|
|
|
|
.sq4 { width: 8rem; height: 8rem; }
|
|
|
|
.sq5 { width: 16rem; height: 16rem; }
|
|
|
|
.sq6 { width: 32rem; height: 32rem; }
|
|
|
|
.sq7 { width: 48rem; height: 48rem; }
|
|
|
|
.sq8 { width: 64rem; height: 64rem; }
|
|
|
|
.sq9 { width: 96rem; height: 96rem; }
|
|
|
|
@media screen and (min-width: 48em) { .sq1-ns { width: 1rem; height: 1rem; }
|
|
.sq2-ns { width: 2rem; height: 2rem; }
|
|
.sq3-ns { width: 4rem; height: 4rem; }
|
|
.sq4-ns { width: 8rem; height: 8rem; }
|
|
.sq5-ns { width: 16rem; height: 16rem; }
|
|
.sq6-ns { width: 32rem; height: 32rem; }
|
|
.sq7-ns { width: 48rem; height: 48rem; }
|
|
.sq8-ns { width: 64rem; height: 64rem; }
|
|
.sq9-ns { width: 96rem; height: 96rem; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .sq1-m { width: 1rem; height: 1rem; }
|
|
.sq2-m { width: 2rem; height: 2rem; }
|
|
.sq3-m { width: 4rem; height: 4rem; }
|
|
.sq4-m { width: 8rem; height: 8rem; }
|
|
.sq5-m { width: 16rem; height: 16rem; }
|
|
.sq6-m { width: 32rem; height: 32rem; }
|
|
.sq7-m { width: 48rem; height: 48rem; }
|
|
.sq8-m { width: 64rem; height: 64rem; }
|
|
.sq9-m { width: 96rem; height: 96rem; } }
|
|
@media screen and (min-width: 64em) { .sq1-l { width: 1rem; height: 1rem; }
|
|
.sq2-l { width: 2rem; height: 2rem; }
|
|
.sq3-l { width: 4rem; height: 4rem; }
|
|
.sq4-l { width: 8rem; height: 8rem; }
|
|
.sq5-l { width: 16rem; height: 16rem; }
|
|
.sq6-l { width: 32rem; height: 32rem; }
|
|
.sq7-l { width: 48rem; height: 48rem; }
|
|
.sq8-l { width: 64rem; height: 64rem; }
|
|
.sq9-l { width: 96rem; height: 96rem; } }
|
|
/* ========================================================================== TEXT DECORAION ========================================================================== */
|
|
.under { text-decoration: underline; }
|
|
|
|
.over { text-decoration: overline; }
|
|
|
|
.strike { text-decoration: line-through; }
|
|
|
|
.blink { text-decoration: blink; }
|
|
|
|
.none { text-decoration: none; }
|
|
|
|
@media screen and (min-width: 48em) { .under-ns { text-decoration: underline; }
|
|
.over-ns { text-decoration: overline; }
|
|
.strike-ns { text-decoration: line-through; }
|
|
.blink-ns { text-decoration: blink; }
|
|
.none-ns { text-decoration: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .under-m { text-decoration: underline; }
|
|
.over-m { text-decoration: overline; }
|
|
.strike-m { text-decoration: line-through; }
|
|
.blink-m { text-decoration: blink; }
|
|
.none-m { text-decoration: none; } }
|
|
@media screen and (min-width: 64em) { .under-l { text-decoration: underline; }
|
|
.over-l { text-decoration: overline; }
|
|
.strike-l { text-decoration: line-through; }
|
|
.blink-l { text-decoration: blink; }
|
|
.none-l { text-decoration: none; } }
|
|
/* Text Align */
|
|
.tl { text-align: left; }
|
|
|
|
.tr { text-align: right; }
|
|
|
|
.tc { text-align: center; }
|
|
|
|
@media screen and (min-width: 48em) { .tl-ns { text-align: left; }
|
|
.tr-ns { text-align: right; }
|
|
.tc-ns { text-align: center; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .tl-m { text-align: left; }
|
|
.tr-m { text-align: right; }
|
|
.tc-m { text-align: center; } }
|
|
@media screen and (min-width: 64em) { .tl-l { text-align: left; }
|
|
.tr-l { text-align: right; }
|
|
.tc-l { text-align: center; } }
|
|
/* ========================================================================== TEXT TRANSFORM ========================================================================== */
|
|
.ttc { text-transform: capitalize; }
|
|
|
|
.ttu { text-transform: uppercase; word-spacing: .2em; }
|
|
|
|
.ttl { text-transform: lowercase; }
|
|
|
|
.ttn { text-transform: none; }
|
|
|
|
@media screen and (min-width: 48em) { .ttc-ns { text-transform: capitalize; }
|
|
.ttu-ns { text-transform: uppercase; word-spacing: .2em; }
|
|
.ttl-ns { text-transform: lowercase; }
|
|
.ttn-ns { text-transform: none; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ttc-m { text-transform: capitalize; }
|
|
.ttu-m { text-transform: uppercase; word-spacing: .2em; }
|
|
.ttl-m { text-transform: lowercase; }
|
|
.ttn-m { text-transform: none; } }
|
|
@media screen and (min-width: 64em) { .ttc-l { text-transform: capitalize; }
|
|
.ttu-l { text-transform: uppercase; word-spacing: .2em; }
|
|
.ttl-l { text-transform: lowercase; }
|
|
.ttn-l { text-transform: none; } }
|
|
/* ========================================================================== TYPE SCALE ========================================================================== */
|
|
.f1 { font-size: 2rem; }
|
|
|
|
.f2 { font-size: 1.5rem; }
|
|
|
|
.f3 { font-size: 1.2rem; }
|
|
|
|
.f4 { font-size: 1.2rem; }
|
|
|
|
.f5 { font-size: 1rem; }
|
|
|
|
.f6, .small { font-size: .85rem; }
|
|
|
|
@media screen and (min-width: 48em) { .mega-ns { font-size: 3rem; }
|
|
.f1-ns { font-size: 2rem; }
|
|
.f2-ns { font-size: 1.5rem; }
|
|
.f3-ns { font-size: 1.2rem; }
|
|
.f4-ns { font-size: 1.2rem; }
|
|
.f5-ns { font-size: 1rem; }
|
|
.f6-ns { font-size: .85rem; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .mega-m { font-size: 3rem; }
|
|
.f1-m { font-size: 2rem; }
|
|
.f2-m { font-size: 1.5rem; }
|
|
.f3-m { font-size: 1.2rem; }
|
|
.f4-m { font-size: 1.2rem; }
|
|
.f5-m { font-size: 1rem; }
|
|
.f6-m { font-size: .85rem; } }
|
|
@media screen and (min-width: 64em) { .mega-l { font-size: 4rem; }
|
|
.f1-l { font-size: 3rem; }
|
|
.f2-l { font-size: 2rem; }
|
|
.f3-l { font-size: 1.5rem; }
|
|
.f4-l { font-size: 1.2rem; }
|
|
.f5-l { font-size: 1rem; }
|
|
.f6-l { font-size: 1rem; } }
|
|
/* ========================================================================== UTILITIES ========================================================================== */
|
|
/* The Media Object Built by @stubornella http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> */
|
|
/* The Flag Object Built by @csswizzrdry http://csswizardry.com/2013/05/the-flag-object/ Use to vertically center text against an image. <div class="flag"> <div class="flag__image"> <img src="" alt=""> </div> <div class="flag__body"> <p></p> </div> </div> */
|
|
.flag { display: table; width: 100%; }
|
|
|
|
.flag__image, .flag__body { display: table-cell; vertical-align: middle; }
|
|
.flag--top .flag__image, .flag--top .flag__body { vertical-align: top; }
|
|
.flag--bottom .flag__image, .flag--bottom .flag__body { vertical-align: bottom; }
|
|
|
|
.flag__image { padding-right: 10px; }
|
|
.flag__image > img { display: block; max-width: none; }
|
|
.flag--rev .flag__image { padding-right: 0; padding-left: 10px; }
|
|
|
|
.flag__body { width: 100%; }
|
|
|
|
/* ========================================================================== 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: 48em) { .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: 48em) and (max-width: 64em) { .v-base-m { vertical-align: baseline; }
|
|
.v-sub-m { vertical-align: sub; }
|
|
.v-sup-m { vertical-align: super; }
|
|
.v-txt-top-m { vertical-align: text-top; }
|
|
.v-txt-btm-m { vertical-align: text-bottom; }
|
|
.v-mid-m { vertical-align: middle; }
|
|
.v-top-m { vertical-align: top; }
|
|
.v-btm-m { vertical-align: bottom; } }
|
|
@media screen and (min-width: 64em) { .v-base-l { vertical-align: baseline; }
|
|
.v-sub-l { vertical-align: sub; }
|
|
.v-sup-l { vertical-align: super; }
|
|
.v-txt-top-l { vertical-align: text-top; }
|
|
.v-txt-btm-l { vertical-align: text-bottom; }
|
|
.v-mid-l { vertical-align: middle; }
|
|
.v-top-l { vertical-align: top; }
|
|
.v-btm-l { vertical-align: bottom; } }
|
|
/* ========================================================================== VISIBILITY ========================================================================== */
|
|
.vis { visibility: visible; }
|
|
|
|
.vis-hidden { visibility: hidden; }
|
|
|
|
.vis-collapse { visibility: collapse; }
|
|
|
|
.vis-bf-vis { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; }
|
|
|
|
.vis-bf-hid { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
|
|
|
|
/* 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: 48em) { .vis-ns { visibility: visible; }
|
|
.vis-hidden-ns { visibility: hidden; }
|
|
.vis-collapse-ns { visibility: collapse; }
|
|
.vis-bf-vis-ns { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; }
|
|
.vis-bf-hid-ns { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
|
|
.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: 48em) and (max-width: 64em) { .vis-m { visibility: visible; }
|
|
.vis-hidden-m { visibility: hidden; }
|
|
.vis-collapse-m { visibility: collapse; }
|
|
.vis-bf-vis-m { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; }
|
|
.vis-bf-hid-m { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
|
|
.clip-m { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } }
|
|
@media screen and (min-width: 64em) { .vis-l { visibility: visible; }
|
|
.vis-hidden-l { visibility: hidden; }
|
|
.vis-collapse-l { visibility: collapse; }
|
|
.vis-bf-vis-l { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; }
|
|
.vis-bf-hid-l { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }
|
|
.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: 48em) { .ws-norm-ns { white-space: normal; }
|
|
.ws-nowrap-ns { white-space: nowrap; }
|
|
.ws-pre-ns { white-space: pre; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .ws-norm-m { white-space: normal; }
|
|
.ws-nowrap-m { white-space: nowrap; }
|
|
.ws-pre-m { white-space: pre; } }
|
|
@media screen and (min-width: 64em) { .ws-norm-l { white-space: normal; }
|
|
.ws-nowrap-l { white-space: nowrap; }
|
|
.ws-pre-l { white-space: pre; } }
|
|
/* ========================================================================== WIDTHS ========================================================================== */
|
|
/* Width Scale */
|
|
.wi1 { width: 1rem; }
|
|
|
|
.wi2 { width: 2rem; }
|
|
|
|
.wi3 { width: 4rem; }
|
|
|
|
.wi4 { width: 8rem; }
|
|
|
|
.wi5 { width: 16rem; }
|
|
|
|
.wi6 { width: 32rem; }
|
|
|
|
.wi7 { width: 48rem; }
|
|
|
|
.wi8 { width: 64rem; }
|
|
|
|
.wi9 { width: 96rem; }
|
|
|
|
.wi10 { width: 128rem; }
|
|
|
|
.wi-10 { width: 10%; }
|
|
|
|
.wi-20 { width: 20%; }
|
|
|
|
.wi-25 { width: 25%; }
|
|
|
|
.wi-40 { width: 40%; }
|
|
|
|
.wi-50 { width: 50%; }
|
|
|
|
.wi-60 { width: 60%; }
|
|
|
|
.wi-75 { width: 75%; }
|
|
|
|
.wi-80 { width: 80%; }
|
|
|
|
.wi-100 { width: 100%; }
|
|
|
|
/* Width String Properties */
|
|
.wi-bb { width: border-box; }
|
|
|
|
.wi-cb { width: content-box; }
|
|
|
|
.wi-mx { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
|
|
.wi-mn { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
|
|
.wi-av { width: available; }
|
|
|
|
.wi-fc { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
|
|
.wi-at { width: auto; }
|
|
|
|
.wi-i { width: inherit; }
|
|
|
|
@media screen and (min-width: 48em) { .wi1-ns { width: 1rem; }
|
|
.wi2-ns { width: 2rem; }
|
|
.wi3-ns { width: 4rem; }
|
|
.wi4-ns { width: 8rem; }
|
|
.wi5-ns { width: 16rem; }
|
|
.wi6-ns { width: 32rem; }
|
|
.wi7-ns { width: 48rem; }
|
|
.wi8-ns { width: 64rem; }
|
|
.wi9-ns { width: 96rem; }
|
|
.wi10-ns { width: 128rem; }
|
|
.wi-10-ns { width: 10%; }
|
|
.wi-20-ns { width: 20%; }
|
|
.wi-25-ns { width: 25%; }
|
|
.wi-40-ns { width: 40%; }
|
|
.wi-50-ns { width: 50%; }
|
|
.wi-60-ns { width: 60%; }
|
|
.wi-75-ns { width: 75%; }
|
|
.wi-80-ns { width: 80%; }
|
|
.wi-100-ns { width: 100%; }
|
|
.wi-bb-ns { width: border-box; }
|
|
.wi-cb-ns { width: content-box; }
|
|
.wi-mx-ns { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-ns { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-ns { width: available; }
|
|
.wi-fc-ns { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-ns { width: auto; }
|
|
.wi-i-ns { width: inherit; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .wi1-m { width: 1rem; }
|
|
.wi2-m { width: 2rem; }
|
|
.wi3-m { width: 4rem; }
|
|
.wi4-m { width: 8rem; }
|
|
.wi5-m { width: 16rem; }
|
|
.wi6-m { width: 32rem; }
|
|
.wi7-m { width: 48rem; }
|
|
.wi8-m { width: 64rem; }
|
|
.wi9-m { width: 96rem; }
|
|
.wi10-m { width: 128rem; }
|
|
.wi-10-m { width: 10%; }
|
|
.wi-20-m { width: 20%; }
|
|
.wi-25-m { width: 25%; }
|
|
.wi-40-m { width: 40%; }
|
|
.wi-50-m { width: 50%; }
|
|
.wi-60-m { width: 60%; }
|
|
.wi-75-m { width: 75%; }
|
|
.wi-80-m { width: 80%; }
|
|
.wi-100-m { width: 100%; }
|
|
.wi-bb-m { width: border-box; }
|
|
.wi-cb-m { width: content-box; }
|
|
.wi-mx-m { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-m { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-m { width: available; }
|
|
.wi-fc-m { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-m { width: auto; }
|
|
.wi-i-m { width: inherit; } }
|
|
@media screen and (min-width: 64em) { .wi1-l { width: 1rem; }
|
|
.wi2-l { width: 2rem; }
|
|
.wi3-l { width: 4rem; }
|
|
.wi4-l { width: 8rem; }
|
|
.wi5-l { width: 16rem; }
|
|
.wi6-l { width: 32rem; }
|
|
.wi7-l { width: 48rem; }
|
|
.wi8-l { width: 64rem; }
|
|
.wi9-l { width: 96rem; }
|
|
.wi10-l { width: 128rem; }
|
|
.wi-10-l { width: 10%; }
|
|
.wi-20-l { width: 20%; }
|
|
.wi-25-l { width: 25%; }
|
|
.wi-40-l { width: 40%; }
|
|
.wi-50-l { width: 50%; }
|
|
.wi-60-l { width: 60%; }
|
|
.wi-75-l { width: 75%; }
|
|
.wi-80-l { width: 80%; }
|
|
.wi-100-l { width: 100%; }
|
|
.wi-bb-l { width: border-box; }
|
|
.wi-cb-l { width: content-box; }
|
|
.wi-mx-l { width: -webkit-max-content; width: -moz-max-content; width: max-content; }
|
|
.wi-mn-l { width: -webkit-min-content; width: -moz-min-content; width: min-content; }
|
|
.wi-av-l { width: available; }
|
|
.wi-fc-l { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }
|
|
.wi-at-l { width: auto; }
|
|
.wi-i-l { width: inherit; } }
|
|
/* ========================================================================== WORD SPACING ========================================================================== */
|
|
.wsn { word-spacing: normal; }
|
|
|
|
.wsib { word-spacing: -0.43em; }
|
|
|
|
/* For eliminating space between inline-block elements */
|
|
@media screen and (min-width: 48em) { .wsn-ns { word-spacing: normal; }
|
|
.wsib-ns { word-spacing: -0.43em; } }
|
|
@media screen and (min-width: 48em) and (max-width: 64em) { .wsn-m { word-spacing: normal; }
|
|
.wsib-m { word-spacing: -0.43em; } }
|
|
@media screen and (min-width: 64em) { .wsn-l { word-spacing: normal; }
|
|
.wsib-l { word-spacing: -0.43em; } }
|