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