/*! TACHYONS v7.0.1-2 | http://tachyons.io */ /* * * ________ ______ * ___ __/_____ _________ /______ ______________________ * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ * /____/ * * TABLE OF CONTENTS * * 1. External Library Includes * - Normalize.css | http://normalize.css.github.io * 2. Tachyons Modules * 3. Variables * - Media Queries * - Colors * 4. Debugging * - Debug all * - Debug children * */ /* External Library Includes */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: .67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input {/* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select {/* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: .35em .75em .625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Modules */ /*!!! # BOX SIZING Box sizing doesn't use the `*` selector in order to improve performance. */ html, body, div, article, aside, section, main, nav, footer, header, form, fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, figure, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; } /*!!! # ASPECT RATIOS This is for fluid media that is embedded from third party sites like youtube, vimeo etc. Wrap the outer element in aspect-ratio and then extend it with the desired ratio. Make sure there are no height and width attributes on the embedded media. Adapted from: https://github.com/suitcss/components-flex-embed ### Docs https://tachyons.io/docs/layout/aspect-ratios ### Base - `aspect-ratio` = aspect ratio ### Modifiers - `--16x9` = 16x9 - `--9x16` = 9x16 - `--4x3` = 4x3 - `--3x4` = 3x4 - `--6x4` = 6x4 - `--4x6` = 4x6 - `--8x5` = 8x5 - `--5x8` = 5x8 - `--7x5` = 7x5 - `--5x7` = 5x7 - `--1x1` = 1x1 - `--object` = object ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large ### Example ```html
``` */ .aspect-ratio { height: 0; position: relative; } .aspect-ratio--16x9 { padding-bottom: 56.25%; } .aspect-ratio--9x16 { padding-bottom: 177.77%; } .aspect-ratio--4x3 { padding-bottom: 75%; } .aspect-ratio--3x4 { padding-bottom: 133.33%; } .aspect-ratio--6x4 { padding-bottom: 66.6%; } .aspect-ratio--4x6 { padding-bottom: 150%; } .aspect-ratio--8x5 { padding-bottom: 62.5%; } .aspect-ratio--5x8 { padding-bottom: 160%; } .aspect-ratio--7x5 { padding-bottom: 71.42%; } .aspect-ratio--5x7 { padding-bottom: 140%; } .aspect-ratio--1x1 { padding-bottom: 100%; } .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } /*!!! # IMAGES ### Docs http://tachyons.io/docs/elements/images/ */ /* Responsive images! */ img { max-width: 100%; } /*!!! # BACKGROUND SIZE Often used in combination with background image set as an inline style on an html element. ### Docs http://tachyons.io/docs/themes/background-size/ ### Base - cover = cover - contain = contain ### Media Query Extensions - `-s` = small - `-m` = medium - `-l`= large */ .cover { background-size: cover !important; } .contain { background-size: contain !important; } /*!!! # BACKGROUND POSITION ### Base - bg = background ### Modifiers - `-center` = center center - `-top` = top center - `-right` = center right - `-bottom` = bottom center - `-left` = center left ### Media Query Extensions - `-s` = small - `-m` = medium - `-l`= large */ .bg-center { background-repeat: no-repeat; background-position: center center; } .bg-top { background-repeat: no-repeat; background-position: top center; } .bg-right { background-repeat: no-repeat; background-position: center right; } .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } .bg-left { background-repeat: no-repeat; background-position: center left; } /*!!! # OUTLINES Set transparent outline on elements. ### Base - outline = outline ### Modifiers - `-0` = literal value 0 - `-transparent` = transparent outline ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .outline { outline: 1px solid; } .outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } /*!!! # BORDERS ### Docs http://tachyons.io/docs/themes/borders/ ### Base - b = border ### Modifiers - a = all - t = top - r = right - b = bottom - l = left - n = none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .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; } .bn { border-style: none; border-width: 0; } /*!!! # BORDER COLORS Border colors can be used to extend the base border classes ba,bt,bb,br,bl found in the _borders.css file. The base border class by default will set the color of the border to that of the current text color. These classes are for the cases where you desire for the text and border colors to be different. ### Docs http://tachyons.io/docs/themes/borders/ ### Base - b = border ### Modifiers - `--color-name` = black, white and their alpha colors are available */ .b--black { border-color: #000; } .b--white { border-color: #fff; } .b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } .b--white-80 { border-color: undefined; } .b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } .b--white-60 { border-color: undefined; } .b--white-50 { border-color: undefined; } .b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } .b--white-30 { border-color: undefined; } .b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } .b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } .b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } .b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } .b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } .b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } .b--black-80 { border-color: undefined; } .b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } .b--black-60 { border-color: undefined; } .b--black-50 { border-color: undefined; } .b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } .b--black-30 { border-color: undefined; } .b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } .b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } .b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } .b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } .b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } .b--transparent { border-color: transparent; } .b--inherit { border-color: inherit; } /*!!! # BORDER RADIUS ### Docs http://tachyons.io/docs/themes/border-radius/ ### Base - br = border-radius ### Modifiers - 0 = 0/none - 1 = 1st step in scale - 2 = 2nd step in scale - 3 = 3rd step in scale - 4 = 4th step in scale ### Literal values - `-100` = 100% - `-pill` = 9999px ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .br0 { border-radius: 0; } .br1 { border-radius: 3px; } .br2 { border-radius: 5px; } .br3 { border-radius: 9px; } .br4 { border-radius: 17px; } .br-100 { border-radius: 100%; } .br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } /*!!! # BORDER STYLES Depends on base border module in `_borders.css` ### Docs http://tachyons.io/docs/themes/borders/ ### Base - b = border-style ### Modifiers - `--none` = none - `--dotted` = dotted - `--dashed` = dashed - `--solid` = solid ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .b--dotted { border-style: dotted; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } .b--none { border-style: none; } /*!!! # BORDER WIDTHS ### Docs http://tachyons.io/docs/themes/borders/ ### 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 - `-s` = small - `-m` = medium - `-l` = large */ .bw0 { border-width: 0; } .bw1 { border-width: .125rem; } .bw2 { border-width: .25rem; } .bw3 { border-width: .5rem; } .bw4 { border-width: 1rem; } .bw5 { border-width: 2rem; } /* Resets */ .bt-0 { border-top-width: 0; } .br-0 { border-right-width: 0; } .bb-0 { border-bottom-width: 0; } .bl-0 { border-left-width: 0; } /*!!! # BOX SHADOW ### Docs http://tachyons.io/docs/themes/box-shadow/ ### Base - shadow ### Modifiers - `-1` = offset 0px 0px 4px 2px - `-2` = offset 0px 0px 8px 2px - `-3` = offset 2px 2px 4px 2px - `-4` = offset 2px 2px 8px 0px - `-5` = offset 4px 4px 8px 0px ### Literal Values - `-none` = none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-none { box-shadow: none; } /*!!! # CODE */ .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } /*!!! # COORDINATES Use in combination with the position module. ### Docs http://tachyons.io/docs/layout/position/ ### Base - top - bottom - right - left ### Modifiers - `-0` = literal value 0 - `-1` = literal value 1 - `-2` = literal value 2 - `--1` = literal value -1 - `--2` = literal value -2 ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-1 { top: 1rem; } .right-1 { right: 1rem; } .bottom-1 { bottom: 1rem; } .left-1 { left: 1rem; } .top-2 { top: 2rem; } .right-2 { right: 2rem; } .bottom-2 { bottom: 2rem; } .left-2 { left: 2rem; } .top--1 { top: -1rem; } .right--1 { right: -1rem; } .bottom--1 { bottom: -1rem; } .left--1 { left: -1rem; } .top--2 { top: -2rem; } .right--2 { right: -2rem; } .bottom--2 { bottom: -2rem; } .left--2 { left: -2rem; } .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } /*!!! # CLEARFIX ### Docs http://tachyons.io/docs/layout/clearfix/ ### Based on Nicolas Gallagher's clerfix solution http://nicolasgallagher.com/micro-clearfix-hack/ ### Base - c = clear ### Modifiers - f = clearfix - l = left - r = right - b = both - n = none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .cn { clear: none; } /*!!! # DISPLAY ### Docs http://tachyons.io/docs/layout/display ### Base - d = display ### Modifiers - n = none - b = block - ib = inline-block - it = inline-table - t = table - tc = table-cell - t-row = table-row - t-columm = table-column - t-column-group = table-column-group ### Media Query Extensions - `-s` = 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; } .dtc { display: table-cell; } .dt-row { display: table-row; } /* This will set table to full width and then all cells will be equal width */ .dt--fixed { table-layout: fixed; width: 100%; } /*!!! # FLEXBOX ### Docs http://tachyons.io/docs/layout/flexbox/ ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-1 { flex: 1; } .flex-auto { flex: 1 1 auto; } .flex-initial { flex: initial; } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-last { order: 99999; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } /*!!! # FLOATS 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. Don't forget to clearfix your floats with `.cf` ### Docs http://tachyons.io/docs/layout/floats/ ### Base - f = float ### Modifiers - l = left - r = right - n = none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fn { float: none; } /*!!! # FONT FAMILY GROUPS ### Docs http://tachyons.io/docs/typography/font-family/ ### Base - sans-serif - system-sans-serif - avenir - helvetica - serif - system-serif - athelas - baskerville - bodoni - calisto - garamond - georgia - times - code - courier */ .sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } .serif { font-family: georgia, times, serif; } .system-sans-serif { font-family: sans-serif; } .system-serif { font-family: serif; } /* Monospaced Typefaces (for code) */ /* From http://cssfontstack.com */ code, .code { font-family: Consolas, monaco, monospace; } .courier { font-family: 'Courier Next', courier, monospace; } /* Sans-Serif Typefaces */ .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } .avenir { font-family: 'avenir next', avenir, sans-serif; } /* Serif Typefaces */ .athelas { font-family: athelas, georgia, serif; } .georgia { font-family: georgia, serif; } .times { font-family: times, serif; } .bodoni { font-family: "Bodoni MT", serif; } .calisto { font-family: "Calisto MT", serif; } .garamond { font-family: garamond, serif; } .baskerville { font-family: baskerville, serif; } /*!!! # FONT STYLE ### Docs http://tachyons.io/docs/typography/font-style/ ### Base - i = italic - fs-normal = normal ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .i { font-style: italic; } .fs-normal { font-style: normal; } /*!!! # FONT WEIGHT ### Docs http://tachyons.io/docs/typography/font-weight/ ### Base - fw = font-weight ### Modifiers - 1 = literal value 100 - 2 = literal value 200 - 3 = literal value 300 - 4 = literal value 400 - 5 = literal value 500 - 6 = literal value 600 - 7 = literal value 700 - 8 = literal value 800 - 9 = literal value 900 ### Literal Values - b = bold ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .b { font-weight: bold; } .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; } /*!!! # FORMS ### Docs http://tachyons.io/docs/elements/forms/ */ .input-reset { -webkit-appearance: none; -moz-appearance: none; } .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } /*!!! # HEIGHTS ### Docs http://tachyons.io/docs/layout/heights/ ### Base - h = height - min-h = min-height - min-vh = min-height vertical screen height - vh = vertical screen height ### Modifiers - 1 = 1st step in height scale - 2 = 2nd step in height scale - 3 = 3rd step in height scale - 4 = 4th step in height scale - 5 = 5th step in height scale - `-25` = literal value 25% - `-50` = literal value 50% - `-75` = literal value 75% - `-100` = literal value 100% - `-auto` = string value of auto - `-inherit` = string value of inherit ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Height Scale */ .h1 { height: 1rem; } .h2 { height: 2rem; } .h3 { height: 4rem; } .h4 { height: 8rem; } .h5 { height: 16rem; } /* Height Percentages - Based off of height of parent */ .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .min-h-100 { min-height: 100%; } /* Screen Height Percentage */ .vh-25 { height: 25vh; } .vh-50 { height: 50vh; } .vh-75 { height: 75vh; } .vh-100 { height: 100vh; } .min-vh-100 { min-height: 100vh; } /* String Properties */ .h-auto { height: auto; } .h-inherit { height: inherit; } /*!!! # LETTER SPACING ### Docs http://tachyons.io/docs/typography/tracking/ ### Base - ls ### Modifiers - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .ls1 { letter-spacing: -.05em; } .ls2 { letter-spacing: .1em; } .ls3 { letter-spacing: .25em; } /*!!! # LINE HEIGHT / LEADING ### Docs http://tachyons.io/docs/typography/line-height ### Base - lh = line height ### Literal Values - `-solid` = literal value 1 - `-title` = literal value 1.25 - `-copy` = literal value 1.5 ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .lh-solid { line-height: 1; } .lh-title { line-height: 1.25; } .lh-copy { line-height: 1.5; } /*!!! # LINKS ### Docs http://tachyons.io/docs/elements/links/ ### Base - link */ .link { text-decoration: none; transition: color .15s ease-in; } .link:link, .link:visited { transition: color .15s ease-in; } .link:hover { transition: color .15s ease-in; } .link:active { transition: color .15s ease-in; } .link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; } /*!!! # LISTS ### Docs http://tachyons.io/docs/elements/lists/ ### Base - list */ .list { list-style-type: none; } /*!!! # MAX WIDTHS ### Docs http://tachyons.io/docs/layout/max-widths/ ### Base - mw = max-width ### Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - 6 = 6st step in width scale - 7 = 7nd step in width scale - 8 = 8rd step in width scale - 9 = 9th step in width scale - `-100` = literal value 100% - `-none` = string value none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Max Width Percentages */ .mw-100 { max-width: 100%; } /* Max Width Scale */ .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: 56rem; } .mw9 { max-width: 64rem; } .mw10 { max-width: 80rem; } /* Max Width String Properties */ .mw-none { max-width: none; } /*!!! # WIDTHS ### Docs http://tachyons.io/docs/layout/widths/ ### Base - w = width ### Modifiers - 1 = 1st step in width scale - 2 = 2nd step in width scale - 3 = 3rd step in width scale - 4 = 4th step in width scale - 5 = 5th step in width scale - -10 = literal value 10% - -20 = literal value 20% - -25 = literal value 25% - -30 = literal value 30% - -40 = literal value 40% - -50 = literal value 50% - -60 = literal value 60% - -70 = literal value 70% - -75 = literal value 75% - -80 = literal value 80% - -90 = literal value 90% - -100 = literal value 100% - `-third` = 100% / 3 (Not supported in opera mini or IE8) - `-two-thirds` = 100% / 1.5 (Not supported in opera mini or IE8) - `-auto` = string value auto ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Width Scale */ .w1 { width: 1rem; } .w2 { width: 2rem; } .w3 { width: 4rem; } .w4 { width: 8rem; } .w5 { width: 16rem; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; } .w-third { width: 33.33333%; } .w-two-thirds { width: 66.66667%; } .w-auto { width: auto; } /*!!! # OVERFLOW ### Base - overflow - overflow-x - overflow-y ### Modifiers - `-visible` - `-hidden` - `-scroll` - `-auto` ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .overflow-x-visible { overflow-x: visible; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-visible { overflow-y: visible; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-scroll { overflow-y: scroll; } .overflow-y-auto { overflow-y: auto; } /*!!! # POSITIONING ### Docs http://tachyons.io/docs/layout/position/ ### Base - static - relative - absolute - fixed - sticky ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: -webkit-sticky; position: sticky; } /*!!! # OPACITY ### Docs http://tachyons.io/docs/themes/opacity/ ### Base - o = opacity ### Modifiers - `-100` = literal value 1 - `-90` = literal value .9 - `-80` = literal value .8 - `-70` = literal value .7 - `-60` = literal value .6 - `-50` = literal value .5 - `-40` = literal value .4 - `-30` = literal value .3 - `-20` = literal value .2 - `-10` = literal value .1 - `-05` = literal value .05 - `-025` = literal value .025 - `-0` = literal value 0 */ .o-100 { opacity: 1; } .o-90 { opacity: .9; } .o-80 { opacity: .8; } .o-70 { opacity: .7; } .o-60 { opacity: .6; } .o-50 { opacity: .5; } .o-40 { opacity: .4; } .o-30 { opacity: .3; } .o-20 { opacity: .2; } .o-10 { opacity: .1; } .o-05 { opacity: .05; } .o-025 { opacity: .025; } .o-0 { opacity: 0; } /*!!! # ROTATIONS Rotate elements. ### Base - rotate ### Modifiers - `-45` = literal value 45deg - `-90` = literal value 90deg - `-135` = literal value 135deg - `-180` = literal value 180deg - `-225` = literal value 225deg - `-270` = literal value 270deg - `-315` = literal value 315deg ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } .rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } .rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } .rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } .rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } .rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } .rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } /*!!! # SKINS ### Docs http://tachyons.io/docs/themes/skins/ Classes for setting foreground and background colors on elements. If you haven't declared a border color, but set border on an element, it will be set to the current text color. */ /* Text colors */ .color-inherit { color: inherit; } .black-90 { color: rgba( 0, 0, 0, .9 ); } .black-80 { color: undefined; } .black-70 { color: rgba( 0, 0, 0, .7 ); } .black-60 { color: undefined; } .black-50 { color: undefined; } .black-40 { color: rgba( 0, 0, 0, .4 ); } .black-30 { color: undefined; } .black-20 { color: rgba( 0, 0, 0, .2 ); } .black-10 { color: rgba( 0, 0, 0, .1 ); } .black-05 { color: rgba( 0, 0, 0, .05 ); } .white-90 { color: rgba( 255, 255, 255, .9 ); } .white-80 { color: undefined; } .white-70 { color: rgba( 255, 255, 255, .7 ); } .white-60 { color: undefined; } .white-50 { color: undefined; } .white-40 { color: rgba( 255, 255, 255, .4 ); } .white-30 { color: undefined; } .white-20 { color: rgba( 255, 255, 255, .2 ); } .white-10 { color: rgba( 255, 255, 255, .1 ); } .black { color: #000; } .gray-0 { color: #161a1d; } .gray-1 { color: #242c34; } .gray-2 { color: #364049; } .gray-3 { color: #4b545c; } .gray-4 { color: #626a71; } .gray-5 { color: #798086; } .gray-6 { color: #91969b; } .gray-7 { color: #a9aeb1; } .gray-8 { color: #c3c5c8; } .gray-9 { color: #dddedf; } .gray-10 { color: #f7f7f7; } .white { color: #fff; } .green-0 { color: #044324; } .green-1 { color: #05532d; } .green-2 { color: #087640; } .green-3 { color: #098849; } .green-4 { color: #0b9b53; } .green-5 { color: #0cad5d; } .green-6 { color: #0ec167; } .green-7 { color: #0fd472; } .green-8 { color: #10e87c; } .green-9 { color: #78f5a6; } .green-10 { color: #c3fbdf; } .teal-0 { color: #003d37; } .teal-1 { color: #004e46; } .teal-2 { color: #007166; } .teal-3 { color: #008477; } .teal-4 { color: #009788; } .teal-5 { color: #00ab9a; } .teal-6 { color: #00bfac; } .teal-7 { color: #00d3be; } .teal-8 { color: #00e8d1; } .teal-9 { color: #00fde4; } .teal-10 { color: #ccfffa; } .cyan-0 { color: #015151; } .cyan-1 { color: #046064; } .cyan-2 { color: #0f7f8a; } .cyan-3 { color: #148f9f; } .cyan-4 { color: #19a0b3; } .cyan-5 { color: #1eb1c9; } .cyan-6 { color: #24c2de; } .cyan-7 { color: #29d3f4; } .cyan-8 { color: #64e2fd; } .cyan-9 { color: #9cf0fe; } .cyan-10 { color: #c7fefe; } .blue-0 { color: #002c52; } .blue-1 { color: #003a6c; } .blue-2 { color: #0057a2; } .blue-3 { color: #0066bf; } .blue-4 { color: #0076dc; } .blue-5 { color: #0086fb; } .blue-6 { color: #4d97ff; } .blue-7 { color: #72a9ff; } .blue-8 { color: #8fbbff; } .blue-9 { color: #a8ceff; } .blue-10 { color: #bfe1ff; } .indigo-0 { color: #2c0599; } .indigo-1 { color: #3706be; } .indigo-2 { color: #5c26ef; } .indigo-3 { color: #733ff1; } .indigo-4 { color: #8655f3; } .indigo-5 { color: #9769f5; } .indigo-6 { color: #a67df7; } .indigo-7 { color: #b491f9; } .indigo-8 { color: #c2a6fb; } .indigo-9 { color: #cebafc; } .indigo-10 { color: #dacefd; } .purple-0 { color: #500576; } .purple-1 { color: #630691; } .purple-2 { color: #8a09cb; } .purple-3 { color: #9f0ae9; } .purple-4 { color: #af2ef6; } .purple-5 { color: #bb4ef7; } .purple-6 { color: #c568f9; } .purple-7 { color: #d080fa; } .purple-8 { color: #d996fb; } .purple-9 { color: #e1acfb; } .purple-10 { color: #e9c2fc; } .pink-0 { color: #640233; } .pink-1 { color: #7c033f; } .pink-2 { color: #ae0459; } .pink-3 { color: #c80467; } .pink-4 { color: #e30574; } .pink-5 { color: #fb1d83; } .pink-6 { color: #fe5195; } .pink-7 { color: #ff73a7; } .pink-8 { color: #ff8fba; } .pink-9 { color: #ffa9cc; } .pink-10 { color: #fec1df; } .red-0 { color: #390408; } .red-1 { color: #520814; } .red-2 { color: #8a1223; } .red-3 { color: #a7172b; } .red-4 { color: #c61d33; } .red-5 { color: #e02e40; } .red-6 { color: #e95459; } .red-7 { color: #f17373; } .red-8 { color: #f68e8f; } .red-9 { color: #faa9ab; } .red-10 { color: #fbc3c8; } .orange-0 { color: #6f2601; } .orange-1 { color: #862e03; } .orange-2 { color: #b73f04; } .orange-3 { color: #d04704; } .orange-4 { color: #ea5003; } .orange-5 { color: #fe6018; } .orange-6 { color: #ff7e45; } .orange-7 { color: #ff9969; } .orange-8 { color: #ffb18b; } .orange-9 { color: #ffc7ac; } .orange-10 { color: #feddcd; } .yellow-0 { color: #806800; } .yellow-1 { color: #8e7300; } .yellow-2 { color: #aa8a00; } .yellow-3 { color: #b89600; } .yellow-4 { color: #c7a200; } .yellow-5 { color: #d6ae00; } .yellow-6 { color: #e5ba00; } .yellow-7 { color: #f4c700; } .yellow-8 { color: #ffd434; } .yellow-9 { color: #ffe483; } .yellow-10 { color: #fff3bf; } /* Background colors */ .bg-transparent { background-color: transparent; } .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } .bg-black-80 { background-color: undefined; } .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } .bg-black-60 { background-color: undefined; } .bg-black-50 { background-color: undefined; } .bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } .bg-black-30 { background-color: undefined; } .bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } .bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } .bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } .bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } .bg-white-80 { background-color: undefined; } .bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } .bg-white-60 { background-color: undefined; } .bg-white-50 { background-color: undefined; } .bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } .bg-white-30 { background-color: undefined; } .bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } .bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } .bg-black { background-color: #000; } .bg-gray-0 { background-color: #161a1d; } .bg-gray-1 { background-color: #242c34; } .bg-gray-2 { background-color: #364049; } .bg-gray-3 { background-color: #4b545c; } .bg-gray-4 { background-color: #626a71; } .bg-gray-5 { background-color: #798086; } .bg-gray-6 { background-color: #91969b; } .bg-gray-7 { background-color: #a9aeb1; } .bg-gray-8 { background-color: #c3c5c8; } .bg-gray-9 { background-color: #dddedf; } .bg-gray-10 { background-color: #f7f7f7; } .bg-white { background-color: #fff; } .bg-green-0 { background-color: #044324; } .bg-green-1 { background-color: #05532d; } .bg-green-2 { background-color: #087640; } .bg-green-3 { background-color: #098849; } .bg-green-4 { background-color: #0b9b53; } .bg-green-5 { background-color: #0cad5d; } .bg-green-6 { background-color: #0ec167; } .bg-green-7 { background-color: #0fd472; } .bg-green-8 { background-color: #10e87c; } .bg-green-9 { background-color: #78f5a6; } .bg-green-10 { background-color: #c3fbdf; } .bg-teal-0 { background-color: #003d37; } .bg-teal-1 { background-color: #004e46; } .bg-teal-2 { background-color: #007166; } .bg-teal-3 { background-color: #008477; } .bg-teal-4 { background-color: #009788; } .bg-teal-5 { background-color: #00ab9a; } .bg-teal-6 { background-color: #00bfac; } .bg-teal-7 { background-color: #00d3be; } .bg-teal-8 { background-color: #00e8d1; } .bg-teal-9 { background-color: #00fde4; } .bg-teal-10 { background-color: #ccfffa; } .bg-cyan-0 { background-color: #015151; } .bg-cyan-1 { background-color: #046064; } .bg-cyan-2 { background-color: #0f7f8a; } .bg-cyan-3 { background-color: #148f9f; } .bg-cyan-4 { background-color: #19a0b3; } .bg-cyan-5 { background-color: #1eb1c9; } .bg-cyan-6 { background-color: #24c2de; } .bg-cyan-7 { background-color: #29d3f4; } .bg-cyan-8 { background-color: #64e2fd; } .bg-cyan-9 { background-color: #9cf0fe; } .bg-cyan-10 { background-color: #c7fefe; } .bg-blue-0 { background-color: #002c52; } .bg-blue-1 { background-color: #003a6c; } .bg-blue-2 { background-color: #0057a2; } .bg-blue-3 { background-color: #0066bf; } .bg-blue-4 { background-color: #0076dc; } .bg-blue-5 { background-color: #0086fb; } .bg-blue-6 { background-color: #4d97ff; } .bg-blue-7 { background-color: #72a9ff; } .bg-blue-8 { background-color: #8fbbff; } .bg-blue-9 { background-color: #a8ceff; } .bg-blue-10 { background-color: #bfe1ff; } .bg-indigo-0 { background-color: #2c0599; } .bg-indigo-1 { background-color: #3706be; } .bg-indigo-2 { background-color: #5c26ef; } .bg-indigo-3 { background-color: #733ff1; } .bg-indigo-4 { background-color: #8655f3; } .bg-indigo-5 { background-color: #9769f5; } .bg-indigo-6 { background-color: #a67df7; } .bg-indigo-7 { background-color: #b491f9; } .bg-indigo-8 { background-color: #c2a6fb; } .bg-indigo-9 { background-color: #cebafc; } .bg-indigo-10 { background-color: #dacefd; } .bg-purple-0 { background-color: #500576; } .bg-purple-1 { background-color: #630691; } .bg-purple-2 { background-color: #8a09cb; } .bg-purple-3 { background-color: #9f0ae9; } .bg-purple-4 { background-color: #af2ef6; } .bg-purple-5 { background-color: #bb4ef7; } .bg-purple-6 { background-color: #c568f9; } .bg-purple-7 { background-color: #d080fa; } .bg-purple-8 { background-color: #d996fb; } .bg-purple-9 { background-color: #e1acfb; } .bg-purple-10 { background-color: #e9c2fc; } .bg-pink-0 { background-color: #640233; } .bg-pink-1 { background-color: #7c033f; } .bg-pink-2 { background-color: #ae0459; } .bg-pink-3 { background-color: #c80467; } .bg-pink-4 { background-color: #e30574; } .bg-pink-5 { background-color: #fb1d83; } .bg-pink-6 { background-color: #fe5195; } .bg-pink-7 { background-color: #ff73a7; } .bg-pink-8 { background-color: #ff8fba; } .bg-pink-9 { background-color: #ffa9cc; } .bg-pink-10 { background-color: #fec1df; } .bg-red-0 { background-color: #390408; } .bg-red-1 { background-color: #520814; } .bg-red-2 { background-color: #8a1223; } .bg-red-3 { background-color: #a7172b; } .bg-red-4 { background-color: #c61d33; } .bg-red-5 { background-color: #e02e40; } .bg-red-6 { background-color: #e95459; } .bg-red-7 { background-color: #f17373; } .bg-red-8 { background-color: #f68e8f; } .bg-red-9 { background-color: #faa9ab; } .bg-red-10 { background-color: #fbc3c8; } .bg-orange-0 { background-color: #6f2601; } .bg-orange-1 { background-color: #862e03; } .bg-orange-2 { background-color: #b73f04; } .bg-orange-3 { background-color: #d04704; } .bg-orange-4 { background-color: #ea5003; } .bg-orange-5 { background-color: #fe6018; } .bg-orange-6 { background-color: #ff7e45; } .bg-orange-7 { background-color: #ff9969; } .bg-orange-8 { background-color: #ffb18b; } .bg-orange-9 { background-color: #ffc7ac; } .bg-orange-10 { background-color: #feddcd; } .bg-yellow-0 { background-color: #806800; } .bg-yellow-1 { background-color: #8e7300; } .bg-yellow-2 { background-color: #aa8a00; } .bg-yellow-3 { background-color: #b89600; } .bg-yellow-4 { background-color: #c7a200; } .bg-yellow-5 { background-color: #d6ae00; } .bg-yellow-6 { background-color: #e5ba00; } .bg-yellow-7 { background-color: #f4c700; } .bg-yellow-8 { background-color: #ffd434; } .bg-yellow-9 { background-color: #ffe483; } .bg-yellow-10 { background-color: #fff3bf; } /*!!! # SKINS:PSEUDO Customize the color of an element when it is focused or hovered over. ### Docs http://tachyons.io/docs/themes/skins-pseudo/ */ /* Text colors */ .hover-color-inherit:hover, .hover-color-inherit:focus { color: inherit; } .hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); } .hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); } .hover-black-80:hover { color: undefined; } .hover-black-80:focus { color: undefined; } .hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); } .hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); } .hover-black-60:hover { color: undefined; } .hover-black-60:focus { color: undefined; } .hover-black-50:hover { color: undefined; } .hover-black-50:focus { color: undefined; } .hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); } .hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); } .hover-black-30:hover { color: undefined; } .hover-black-30:focus { color: undefined; } .hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); } .hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); } .hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); } .hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); } .hover-black-05:hover { color: rgba( 0, 0, 0, .05 ); } .hover-black-05:focus { color: rgba( 0, 0, 0, .05 ); } .hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); } .hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); } .hover-white-80:hover { color: undefined; } .hover-white-80:focus { color: undefined; } .hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); } .hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); } .hover-white-60:hover { color: undefined; } .hover-white-60:focus { color: undefined; } .hover-white-50:hover { color: undefined; } .hover-white-50:focus { color: undefined; } .hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); } .hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); } .hover-white-30:hover { color: undefined; } .hover-white-30:focus { color: undefined; } .hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); } .hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); } .hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); } .hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); } .hover-black:hover { color: #000; } .hover-black:focus { color: #000; } .hover-gray-0:hover { color: #161a1d; } .hover-gray-0:focus { color: #161a1d; } .hover-gray-1:hover { color: #242c34; } .hover-gray-1:focus { color: #242c34; } .hover-gray-2:hover { color: #364049; } .hover-gray-2:focus { color: #364049; } .hover-gray-3:hover { color: #4b545c; } .hover-gray-3:focus { color: #4b545c; } .hover-gray-4:hover { color: #626a71; } .hover-gray-4:focus { color: #626a71; } .hover-gray-5:hover { color: #798086; } .hover-gray-5:focus { color: #798086; } .hover-gray-6:hover { color: #91969b; } .hover-gray-6:focus { color: #91969b; } .hover-gray-7:hover { color: #a9aeb1; } .hover-gray-7:focus { color: #a9aeb1; } .hover-gray-8:hover { color: #c3c5c8; } .hover-gray-8:focus { color: #c3c5c8; } .hover-gray-9:hover { color: #dddedf; } .hover-gray-9:focus { color: #dddedf; } .hover-gray-10:hover { color: #f7f7f7; } .hover-gray-10:focus { color: #f7f7f7; } .hover-white:hover { color: #fff; } .hover-white:focus { color: #fff; } .hover-green-0:hover { color: #044324; } .hover-green-0:focus { color: #044324; } .hover-green-1:hover { color: #05532d; } .hover-green-1:focus { color: #05532d; } .hover-green-2:hover { color: #087640; } .hover-green-2:focus { color: #087640; } .hover-green-3:hover { color: #098849; } .hover-green-3:focus { color: #098849; } .hover-green-4:hover { color: #0b9b53; } .hover-green-4:focus { color: #0b9b53; } .hover-green-5:hover { color: #0cad5d; } .hover-green-5:focus { color: #0cad5d; } .hover-green-6:hover { color: #0ec167; } .hover-green-6:focus { color: #0ec167; } .hover-green-7:hover { color: #0fd472; } .hover-green-7:focus { color: #0fd472; } .hover-green-8:hover { color: #10e87c; } .hover-green-8:focus { color: #10e87c; } .hover-green-9:hover { color: #78f5a6; } .hover-green-9:focus { color: #78f5a6; } .hover-green-10:hover { color: #c3fbdf; } .hover-green-10:focus { color: #c3fbdf; } .hover-teal-0:hover { color: #003d37; } .hover-teal-0:focus { color: #003d37; } .hover-teal-1:hover { color: #004e46; } .hover-teal-1:focus { color: #004e46; } .hover-teal-2:hover { color: #007166; } .hover-teal-2:focus { color: #007166; } .hover-teal-3:hover { color: #008477; } .hover-teal-3:focus { color: #008477; } .hover-teal-4:hover { color: #009788; } .hover-teal-4:focus { color: #009788; } .hover-teal-5:hover { color: #00ab9a; } .hover-teal-5:focus { color: #00ab9a; } .hover-teal-6:hover { color: #00bfac; } .hover-teal-6:focus { color: #00bfac; } .hover-teal-7:hover { color: #00d3be; } .hover-teal-7:focus { color: #00d3be; } .hover-teal-8:hover { color: #00e8d1; } .hover-teal-8:focus { color: #00e8d1; } .hover-teal-9:hover { color: #00fde4; } .hover-teal-9:focus { color: #00fde4; } .hover-teal-10:hover { color: #ccfffa; } .hover-teal-10:focus { color: #ccfffa; } .hover-teal-0:hover { color: #015151; } .hover-teal-0:focus { color: #015151; } .hover-teal-1:hover { color: #046064; } .hover-teal-1:focus { color: #046064; } .hover-teal-2:hover { color: #0f7f8a; } .hover-teal-2:focus { color: #0f7f8a; } .hover-teal-3:hover { color: #148f9f; } .hover-teal-3:focus { color: #148f9f; } .hover-teal-4:hover { color: #19a0b3; } .hover-teal-4:focus { color: #19a0b3; } .hover-teal-5:hover { color: #1eb1c9; } .hover-teal-5:focus { color: #1eb1c9; } .hover-teal-6:hover { color: #24c2de; } .hover-teal-6:focus { color: #24c2de; } .hover-teal-7:hover { color: #29d3f4; } .hover-teal-7:focus { color: #29d3f4; } .hover-teal-8:hover { color: #64e2fd; } .hover-teal-8:focus { color: #64e2fd; } .hover-teal-9:hover { color: #9cf0fe; } .hover-teal-9:focus { color: #9cf0fe; } .hover-teal-10:hover { color: #c7fefe; } .hover-teal-10:focus { color: #c7fefe; } .hover-blue-0:hover { color: #002c52; } .hover-blue-0:focus { color: #002c52; } .hover-blue-1:hover { color: #003a6c; } .hover-blue-1:focus { color: #003a6c; } .hover-blue-2:hover { color: #0057a2; } .hover-blue-2:focus { color: #0057a2; } .hover-blue-3:hover { color: #0066bf; } .hover-blue-3:focus { color: #0066bf; } .hover-blue-4:hover { color: #0076dc; } .hover-blue-4:focus { color: #0076dc; } .hover-blue-5:hover { color: #0086fb; } .hover-blue-5:focus { color: #0086fb; } .hover-blue-6:hover { color: #4d97ff; } .hover-blue-6:focus { color: #4d97ff; } .hover-blue-7:hover { color: #72a9ff; } .hover-blue-7:focus { color: #72a9ff; } .hover-blue-8:hover { color: #8fbbff; } .hover-blue-8:focus { color: #8fbbff; } .hover-blue-9:hover { color: #a8ceff; } .hover-blue-9:focus { color: #a8ceff; } .hover-blue-10:hover { color: #bfe1ff; } .hover-blue-10:focus { color: #bfe1ff; } .hover-indigo-0:hover { color: #2c0599; } .hover-indigo-0:focus { color: #2c0599; } .hover-indigo-1:hover { color: #3706be; } .hover-indigo-1:focus { color: #3706be; } .hover-indigo-2:hover { color: #5c26ef; } .hover-indigo-2:focus { color: #5c26ef; } .hover-indigo-3:hover { color: #733ff1; } .hover-indigo-3:focus { color: #733ff1; } .hover-indigo-4:hover { color: #8655f3; } .hover-indigo-4:focus { color: #8655f3; } .hover-indigo-5:hover { color: #9769f5; } .hover-indigo-5:focus { color: #9769f5; } .hover-indigo-6:hover { color: #a67df7; } .hover-indigo-6:focus { color: #a67df7; } .hover-indigo-7:hover { color: #b491f9; } .hover-indigo-7:focus { color: #b491f9; } .hover-indigo-8:hover { color: #c2a6fb; } .hover-indigo-8:focus { color: #c2a6fb; } .hover-indigo-9:hover { color: #cebafc; } .hover-indigo-9:focus { color: #cebafc; } .hover-indigo-10:hover { color: #dacefd; } .hover-indigo-10:focus { color: #dacefd; } .hover-purple-0:hover { color: #500576; } .hover-purple-0:focus { color: #500576; } .hover-purple-1:hover { color: #630691; } .hover-purple-1:focus { color: #630691; } .hover-purple-2:hover { color: #8a09cb; } .hover-purple-2:focus { color: #8a09cb; } .hover-purple-3:hover { color: #9f0ae9; } .hover-purple-3:focus { color: #9f0ae9; } .hover-purple-4:hover { color: #af2ef6; } .hover-purple-4:focus { color: #af2ef6; } .hover-purple-5:hover { color: #bb4ef7; } .hover-purple-5:focus { color: #bb4ef7; } .hover-purple-6:hover { color: #c568f9; } .hover-purple-6:focus { color: #c568f9; } .hover-purple-7:hover { color: #d080fa; } .hover-purple-7:focus { color: #d080fa; } .hover-purple-8:hover { color: #d996fb; } .hover-purple-8:focus { color: #d996fb; } .hover-purple-9:hover { color: #e1acfb; } .hover-purple-9:focus { color: #e1acfb; } .hover-purple-10:hover { color: #e9c2fc; } .hover-purple-10:focus { color: #e9c2fc; } .hover-pink-0:hover { color: #640233; } .hover-pink-0:focus { color: #640233; } .hover-pink-1:hover { color: #7c033f; } .hover-pink-1:focus { color: #7c033f; } .hover-pink-2:hover { color: #ae0459; } .hover-pink-2:focus { color: #ae0459; } .hover-pink-3:hover { color: #c80467; } .hover-pink-3:focus { color: #c80467; } .hover-pink-4:hover { color: #e30574; } .hover-pink-4:focus { color: #e30574; } .hover-pink-5:hover { color: #fb1d83; } .hover-pink-5:focus { color: #fb1d83; } .hover-pink-6:hover { color: #fe5195; } .hover-pink-6:focus { color: #fe5195; } .hover-pink-7:hover { color: #ff73a7; } .hover-pink-7:focus { color: #ff73a7; } .hover-pink-8:hover { color: #ff8fba; } .hover-pink-8:focus { color: #ff8fba; } .hover-pink-9:hover { color: #ffa9cc; } .hover-pink-9:focus { color: #ffa9cc; } .hover-pink-10:hover { color: #fec1df; } .hover-pink-10:focus { color: #fec1df; } .hover-red-0:hover { color: #390408; } .hover-red-0:focus { color: #390408; } .hover-red-1:hover { color: #520814; } .hover-red-1:focus { color: #520814; } .hover-red-2:hover { color: #8a1223; } .hover-red-2:focus { color: #8a1223; } .hover-red-3:hover { color: #a7172b; } .hover-red-3:focus { color: #a7172b; } .hover-red-4:hover { color: #c61d33; } .hover-red-4:focus { color: #c61d33; } .hover-red-5:hover { color: #e02e40; } .hover-red-5:focus { color: #e02e40; } .hover-red-6:hover { color: #e95459; } .hover-red-6:focus { color: #e95459; } .hover-red-7:hover { color: #f17373; } .hover-red-7:focus { color: #f17373; } .hover-red-8:hover { color: #f68e8f; } .hover-red-8:focus { color: #f68e8f; } .hover-red-9:hover { color: #faa9ab; } .hover-red-9:focus { color: #faa9ab; } .hover-red-10:hover { color: #fbc3c8; } .hover-red-10:focus { color: #fbc3c8; } .hover-orange-0:hover { color: #6f2601; } .hover-orange-0:focus { color: #6f2601; } .hover-orange-1:hover { color: #862e03; } .hover-orange-1:focus { color: #862e03; } .hover-orange-2:hover { color: #b73f04; } .hover-orange-2:focus { color: #b73f04; } .hover-orange-3:hover { color: #d04704; } .hover-orange-3:focus { color: #d04704; } .hover-orange-4:hover { color: #ea5003; } .hover-orange-4:focus { color: #ea5003; } .hover-orange-5:hover { color: #fe6018; } .hover-orange-5:focus { color: #fe6018; } .hover-orange-6:hover { color: #ff7e45; } .hover-orange-6:focus { color: #ff7e45; } .hover-orange-7:hover { color: #ff9969; } .hover-orange-7:focus { color: #ff9969; } .hover-orange-8:hover { color: #ffb18b; } .hover-orange-8:focus { color: #ffb18b; } .hover-orange-9:hover { color: #ffc7ac; } .hover-orange-9:focus { color: #ffc7ac; } .hover-orange-10:hover { color: #feddcd; } .hover-orange-10:focus { color: #feddcd; } .hover-yellow-0:hover { color: #806800; } .hover-yellow-0:focus { color: #806800; } .hover-yellow-1:hover { color: #8e7300; } .hover-yellow-1:focus { color: #8e7300; } .hover-yellow-2:hover { color: #aa8a00; } .hover-yellow-2:focus { color: #aa8a00; } .hover-yellow-3:hover { color: #b89600; } .hover-yellow-3:focus { color: #b89600; } .hover-yellow-4:hover { color: #c7a200; } .hover-yellow-4:focus { color: #c7a200; } .hover-yellow-5:hover { color: #d6ae00; } .hover-yellow-5:focus { color: #d6ae00; } .hover-yellow-6:hover { color: #e5ba00; } .hover-yellow-6:focus { color: #e5ba00; } .hover-yellow-7:hover { color: #f4c700; } .hover-yellow-7:focus { color: #f4c700; } .hover-yellow-8:hover { color: #ffd434; } .hover-yellow-8:focus { color: #ffd434; } .hover-yellow-9:hover { color: #ffe483; } .hover-yellow-9:focus { color: #ffe483; } .hover-yellow-10:hover { color: #fff3bf; } .hover-yellow-10:focus { color: #fff3bf; } /* Background colors */ .hover-bg-transparent:hover { background-color: transparent; } .hover-bg-transparent:focus { background-color: transparent; } .hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); } .hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); } .hover-bg-black-80:hover { background-color: undefined; } .hover-bg-black-80:focus { background-color: undefined; } .hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); } .hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); } .hover-bg-black-60:hover { background-color: undefined; } .hover-bg-black-60:focus { background-color: undefined; } .hover-bg-black-50:hover { background-color: undefined; } .hover-bg-black-50:focus { background-color: undefined; } .hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); } .hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); } .hover-bg-black-30:hover { background-color: undefined; } .hover-bg-black-30:focus { background-color: undefined; } .hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); } .hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); } .hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); } .hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); } .hover-bg-black-05:hover { background-color: rgba( 0, 0, 0, .05 ); } .hover-bg-black-05:focus { background-color: rgba( 0, 0, 0, .05 ); } .bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); } .bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); } .bg-white-80:hover { background-color: undefined; } .bg-white-80:focus { background-color: undefined; } .bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); } .bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); } .bg-white-60:hover { background-color: undefined; } .bg-white-60:focus { background-color: undefined; } .bg-white-50:hover { background-color: undefined; } .bg-white-50:focus { background-color: undefined; } .bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); } .bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); } .bg-white-30:hover { background-color: undefined; } .bg-white-30:focus { background-color: undefined; } .bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); } .bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); } .bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); } .bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); } .hover-bg-black:hover { background-color: #000; } .hover-bg-black:focus { background-color: #000; } .hover-bg-gray-0:hover { background-color: #161a1d; } .hover-bg-gray-0:focus { background-color: #161a1d; } .hover-bg-gray-1:hover { background-color: #242c34; } .hover-bg-gray-1:focus { background-color: #242c34; } .hover-bg-gray-2:hover { background-color: #364049; } .hover-bg-gray-2:focus { background-color: #364049; } .hover-bg-gray-3:hover { background-color: #4b545c; } .hover-bg-gray-3:focus { background-color: #4b545c; } .hover-bg-gray-4:hover { background-color: #626a71; } .hover-bg-gray-4:focus { background-color: #626a71; } .hover-bg-gray-5:hover { background-color: #798086; } .hover-bg-gray-5:focus { background-color: #798086; } .hover-bg-gray-6:hover { background-color: #91969b; } .hover-bg-gray-6:focus { background-color: #91969b; } .hover-bg-gray-7:hover { background-color: #a9aeb1; } .hover-bg-gray-7:focus { background-color: #a9aeb1; } .hover-bg-gray-8:hover { background-color: #c3c5c8; } .hover-bg-gray-8:focus { background-color: #c3c5c8; } .hover-bg-gray-9:hover { background-color: #dddedf; } .hover-bg-gray-9:focus { background-color: #dddedf; } .hover-bg-gray-10:hover { background-color: #f7f7f7; } .hover-bg-gray-10:focus { background-color: #f7f7f7; } .hover-bg-white:hover { background-color: #fff; } .hover-bg-white:focus { background-color: #fff; } .hover-bg-green-0:hover { background-color: #044324; } .hover-bg-green-0:focus { background-color: #044324; } .hover-bg-green-1:hover { background-color: #05532d; } .hover-bg-green-1:focus { background-color: #05532d; } .hover-bg-green-2:hover { background-color: #087640; } .hover-bg-green-2:focus { background-color: #087640; } .hover-bg-green-3:hover { background-color: #098849; } .hover-bg-green-3:focus { background-color: #098849; } .hover-bg-green-4:hover { background-color: #0b9b53; } .hover-bg-green-4:focus { background-color: #0b9b53; } .hover-bg-green-5:hover { background-color: #0cad5d; } .hover-bg-green-5:focus { background-color: #0cad5d; } .hover-bg-green-6:hover { background-color: #0ec167; } .hover-bg-green-6:focus { background-color: #0ec167; } .hover-bg-green-7:hover { background-color: #0fd472; } .hover-bg-green-7:focus { background-color: #0fd472; } .hover-bg-green-8:hover { background-color: #10e87c; } .hover-bg-green-8:focus { background-color: #10e87c; } .hover-bg-green-9:hover { background-color: #78f5a6; } .hover-bg-green-9:focus { background-color: #78f5a6; } .hover-bg-green-10:hover { background-color: #c3fbdf; } .hover-bg-green-10:focus { background-color: #c3fbdf; } .hover-bg-teal-0:hover { background-color: #003d37; } .hover-bg-teal-0:focus { background-color: #003d37; } .hover-bg-teal-1:hover { background-color: #004e46; } .hover-bg-teal-1:focus { background-color: #004e46; } .hover-bg-teal-2:hover { background-color: #007166; } .hover-bg-teal-2:focus { background-color: #007166; } .hover-bg-teal-3:hover { background-color: #008477; } .hover-bg-teal-3:focus { background-color: #008477; } .hover-bg-teal-4:hover { background-color: #009788; } .hover-bg-teal-4:focus { background-color: #009788; } .hover-bg-teal-5:hover { background-color: #00ab9a; } .hover-bg-teal-5:focus { background-color: #00ab9a; } .hover-bg-teal-6:hover { background-color: #00bfac; } .hover-bg-teal-6:focus { background-color: #00bfac; } .hover-bg-teal-7:hover { background-color: #00d3be; } .hover-bg-teal-7:focus { background-color: #00d3be; } .hover-bg-teal-8:hover { background-color: #00e8d1; } .hover-bg-teal-8:focus { background-color: #00e8d1; } .hover-bg-teal-9:hover { background-color: #00fde4; } .hover-bg-teal-9:focus { background-color: #00fde4; } .hover-bg-teal-10:hover { background-color: #ccfffa; } .hover-bg-teal-10:focus { background-color: #ccfffa; } .hover-bg-cyan-0:hover { background-color: #015151; } .hover-bg-cyan-0:focus { background-color: #015151; } .hover-bg-cyan-1:hover { background-color: #046064; } .hover-bg-cyan-1:focus { background-color: #046064; } .hover-bg-cyan-2:hover { background-color: #0f7f8a; } .hover-bg-cyan-2:focus { background-color: #0f7f8a; } .hover-bg-cyan-3:hover { background-color: #148f9f; } .hover-bg-cyan-3:focus { background-color: #148f9f; } .hover-bg-cyan-4:hover { background-color: #19a0b3; } .hover-bg-cyan-4:focus { background-color: #19a0b3; } .hover-bg-cyan-5:hover { background-color: #1eb1c9; } .hover-bg-cyan-5:focus { background-color: #1eb1c9; } .hover-bg-cyan-6:hover { background-color: #24c2de; } .hover-bg-cyan-6:focus { background-color: #24c2de; } .hover-bg-cyan-7:hover { background-color: #29d3f4; } .hover-bg-cyan-7:focus { background-color: #29d3f4; } .hover-bg-cyan-8:hover { background-color: #64e2fd; } .hover-bg-cyan-8:focus { background-color: #64e2fd; } .hover-bg-cyan-9:hover { background-color: #9cf0fe; } .hover-bg-cyan-9:focus { background-color: #9cf0fe; } .hover-bg-cyan-10:hover { background-color: #c7fefe; } .hover-bg-cyan-10:focus { background-color: #c7fefe; } .hover-bg-blue-0:hover { background-color: #002c52; } .hover-bg-blue-0:focus { background-color: #002c52; } .hover-bg-blue-1:hover { background-color: #003a6c; } .hover-bg-blue-1:focus { background-color: #003a6c; } .hover-bg-blue-2:hover { background-color: #0057a2; } .hover-bg-blue-2:focus { background-color: #0057a2; } .hover-bg-blue-3:hover { background-color: #0066bf; } .hover-bg-blue-3:focus { background-color: #0066bf; } .hover-bg-blue-4:hover { background-color: #0076dc; } .hover-bg-blue-4:focus { background-color: #0076dc; } .hover-bg-blue-5:hover { background-color: #0086fb; } .hover-bg-blue-5:focus { background-color: #0086fb; } .hover-bg-blue-6:hover { background-color: #4d97ff; } .hover-bg-blue-6:focus { background-color: #4d97ff; } .hover-bg-blue-7:hover { background-color: #72a9ff; } .hover-bg-blue-7:focus { background-color: #72a9ff; } .hover-bg-blue-8:hover { background-color: #8fbbff; } .hover-bg-blue-8:focus { background-color: #8fbbff; } .hover-bg-blue-9:hover { background-color: #a8ceff; } .hover-bg-blue-9:focus { background-color: #a8ceff; } .hover-bg-blue-10:hover { background-color: #bfe1ff; } .hover-bg-blue-10:focus { background-color: #bfe1ff; } .hover-bg-indigo-0:hover { background-color: #2c0599; } .hover-bg-indigo-0:focus { background-color: #2c0599; } .hover-bg-indigo-1:hover { background-color: #3706be; } .hover-bg-indigo-1:focus { background-color: #3706be; } .hover-bg-indigo-2:hover { background-color: #5c26ef; } .hover-bg-indigo-2:focus { background-color: #5c26ef; } .hover-bg-indigo-3:hover { background-color: #733ff1; } .hover-bg-indigo-3:focus { background-color: #733ff1; } .hover-bg-indigo-4:hover { background-color: #8655f3; } .hover-bg-indigo-4:focus { background-color: #8655f3; } .hover-bg-indigo-5:hover { background-color: #9769f5; } .hover-bg-indigo-5:focus { background-color: #9769f5; } .hover-bg-indigo-6:hover { background-color: #a67df7; } .hover-bg-indigo-6:focus { background-color: #a67df7; } .hover-bg-indigo-7:hover { background-color: #b491f9; } .hover-bg-indigo-7:focus { background-color: #b491f9; } .hover-bg-indigo-8:hover { background-color: #c2a6fb; } .hover-bg-indigo-8:focus { background-color: #c2a6fb; } .hover-bg-indigo-9:hover { background-color: #cebafc; } .hover-bg-indigo-9:focus { background-color: #cebafc; } .hover-bg-indigo-10:hover { background-color: #dacefd; } .hover-bg-indigo-10:focus { background-color: #dacefd; } .hover-bg-purple-0:hover { background-color: #500576; } .hover-bg-purple-0:focus { background-color: #500576; } .hover-bg-purple-1:hover { background-color: #630691; } .hover-bg-purple-1:focus { background-color: #630691; } .hover-bg-purple-2:hover { background-color: #8a09cb; } .hover-bg-purple-2:focus { background-color: #8a09cb; } .hover-bg-purple-3:hover { background-color: #9f0ae9; } .hover-bg-purple-3:focus { background-color: #9f0ae9; } .hover-bg-purple-4:hover { background-color: #af2ef6; } .hover-bg-purple-4:focus { background-color: #af2ef6; } .hover-bg-purple-5:hover { background-color: #bb4ef7; } .hover-bg-purple-5:focus { background-color: #bb4ef7; } .hover-bg-purple-6:hover { background-color: #c568f9; } .hover-bg-purple-6:focus { background-color: #c568f9; } .hover-bg-purple-7:hover { background-color: #d080fa; } .hover-bg-purple-7:focus { background-color: #d080fa; } .hover-bg-purple-8:hover { background-color: #d996fb; } .hover-bg-purple-8:focus { background-color: #d996fb; } .hover-bg-purple-9:hover { background-color: #e1acfb; } .hover-bg-purple-9:focus { background-color: #e1acfb; } .hover-bg-purple-10:hover { background-color: #e9c2fc; } .hover-bg-purple-10:focus { background-color: #e9c2fc; } .hover-bg-pink-0:hover { background-color: #640233; } .hover-bg-pink-0:focus { background-color: #640233; } .hover-bg-pink-1:hover { background-color: #7c033f; } .hover-bg-pink-1:focus { background-color: #7c033f; } .hover-bg-pink-2:hover { background-color: #ae0459; } .hover-bg-pink-2:focus { background-color: #ae0459; } .hover-bg-pink-3:hover { background-color: #c80467; } .hover-bg-pink-3:focus { background-color: #c80467; } .hover-bg-pink-4:hover { background-color: #e30574; } .hover-bg-pink-4:focus { background-color: #e30574; } .hover-bg-pink-5:hover { background-color: #fb1d83; } .hover-bg-pink-5:focus { background-color: #fb1d83; } .hover-bg-pink-6:hover { background-color: #fe5195; } .hover-bg-pink-6:focus { background-color: #fe5195; } .hover-bg-pink-7:hover { background-color: #ff73a7; } .hover-bg-pink-7:focus { background-color: #ff73a7; } .hover-bg-pink-8:hover { background-color: #ff8fba; } .hover-bg-pink-8:focus { background-color: #ff8fba; } .hover-bg-pink-9:hover { background-color: #ffa9cc; } .hover-bg-pink-9:focus { background-color: #ffa9cc; } .hover-bg-pink-10:hover { background-color: #fec1df; } .hover-bg-pink-10:focus { background-color: #fec1df; } .hover-bg-red-0:hover { background-color: #390408; } .hover-bg-red-0:focus { background-color: #390408; } .hover-bg-red-1:hover { background-color: #520814; } .hover-bg-red-1:focus { background-color: #520814; } .hover-bg-red-2:hover { background-color: #8a1223; } .hover-bg-red-2:focus { background-color: #8a1223; } .hover-bg-red-3:hover { background-color: #a7172b; } .hover-bg-red-3:focus { background-color: #a7172b; } .hover-bg-red-4:hover { background-color: #c61d33; } .hover-bg-red-4:focus { background-color: #c61d33; } .hover-bg-red-5:hover { background-color: #e02e40; } .hover-bg-red-5:focus { background-color: #e02e40; } .hover-bg-red-6:hover { background-color: #e95459; } .hover-bg-red-6:focus { background-color: #e95459; } .hover-bg-red-7:hover { background-color: #f17373; } .hover-bg-red-7:focus { background-color: #f17373; } .hover-bg-red-8:hover { background-color: #f68e8f; } .hover-bg-red-8:focus { background-color: #f68e8f; } .hover-bg-red-9:hover { background-color: #faa9ab; } .hover-bg-red-9:focus { background-color: #faa9ab; } .hover-bg-red-10:hover { background-color: #fbc3c8; } .hover-bg-red-10:focus { background-color: #fbc3c8; } .hover-bg-orange-0:hover { background-color: #6f2601; } .hover-bg-orange-0:focus { background-color: #6f2601; } .hover-bg-orange-1:hover { background-color: #862e03; } .hover-bg-orange-1:focus { background-color: #862e03; } .hover-bg-orange-2:hover { background-color: #b73f04; } .hover-bg-orange-2:focus { background-color: #b73f04; } .hover-bg-orange-3:hover { background-color: #d04704; } .hover-bg-orange-3:focus { background-color: #d04704; } .hover-bg-orange-4:hover { background-color: #ea5003; } .hover-bg-orange-4:focus { background-color: #ea5003; } .hover-bg-orange-5:hover { background-color: #fe6018; } .hover-bg-orange-5:focus { background-color: #fe6018; } .hover-bg-orange-6:hover { background-color: #ff7e45; } .hover-bg-orange-6:focus { background-color: #ff7e45; } .hover-bg-orange-7:hover { background-color: #ff9969; } .hover-bg-orange-7:focus { background-color: #ff9969; } .hover-bg-orange-8:hover { background-color: #ffb18b; } .hover-bg-orange-8:focus { background-color: #ffb18b; } .hover-bg-orange-9:hover { background-color: #ffc7ac; } .hover-bg-orange-9:focus { background-color: #ffc7ac; } .hover-bg-orange-10:hover { background-color: #feddcd; } .hover-bg-orange-10:focus { background-color: #feddcd; } .hover-bg-yellow-0:hover { background-color: #806800; } .hover-bg-yellow-0:focus { background-color: #806800; } .hover-bg-yellow-1:hover { background-color: #8e7300; } .hover-bg-yellow-1:focus { background-color: #8e7300; } .hover-bg-yellow-2:hover { background-color: #aa8a00; } .hover-bg-yellow-2:focus { background-color: #aa8a00; } .hover-bg-yellow-3:hover { background-color: #b89600; } .hover-bg-yellow-3:focus { background-color: #b89600; } .hover-bg-yellow-4:hover { background-color: #c7a200; } .hover-bg-yellow-4:focus { background-color: #c7a200; } .hover-bg-yellow-5:hover { background-color: #d6ae00; } .hover-bg-yellow-5:focus { background-color: #d6ae00; } .hover-bg-yellow-6:hover { background-color: #e5ba00; } .hover-bg-yellow-6:focus { background-color: #e5ba00; } .hover-bg-yellow-7:hover { background-color: #f4c700; } .hover-bg-yellow-7:focus { background-color: #f4c700; } .hover-bg-yellow-8:hover { background-color: #ffd434; } .hover-bg-yellow-8:focus { background-color: #ffd434; } .hover-bg-yellow-9:hover { background-color: #ffe483; } .hover-bg-yellow-9:focus { background-color: #ffe483; } .hover-bg-yellow-10:hover { background-color: #fff3bf; } .hover-bg-yellow-10:focus { background-color: #fff3bf; } /*!!! # SPACING An eight step powers of two scale ranging from 0 to 16rem. ### Docs http://tachyons.io/docs/layout/spacing/ ### Base - p = padding - m = margin ### Modifiers - h = horizontal - v = vertical - t = top - r = right - b = bottom - l = left - 0 = none - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Variables */ .p0 { padding: 0; } .p1 { padding: .25rem; } .p2 { padding: .5rem; } .p3 { padding: 1rem; } .p4 { padding: 2rem; } .p5 { padding: 4rem; } .p6 { padding: 8rem; } .p7 { padding: 16rem; } .pl0 { padding-left: 0; } .pl1 { padding-left: .25rem; } .pl2 { padding-left: .5rem; } .pl3 { padding-left: 1rem; } .pl4 { padding-left: 2rem; } .pl5 { padding-left: 4rem; } .pl6 { padding-left: 8rem; } .pl7 { padding-left: 16rem; } .pr0 { padding-right: 0; } .pr1 { padding-right: .25rem; } .pr2 { padding-right: .5rem; } .pr3 { padding-right: 1rem; } .pr4 { padding-right: 2rem; } .pr5 { padding-right: 4rem; } .pr6 { padding-right: 8rem; } .pr7 { padding-right: 16rem; } .pb0 { padding-bottom: 0; } .pb1 { padding-bottom: .25rem; } .pb2 { padding-bottom: .5rem; } .pb3 { padding-bottom: 1rem; } .pb4 { padding-bottom: 2rem; } .pb5 { padding-bottom: 4rem; } .pb6 { padding-bottom: 8rem; } .pb7 { padding-bottom: 16rem; } .pt0 { padding-top: 0; } .pt1 { padding-top: .25rem; } .pt2 { padding-top: .5rem; } .pt3 { padding-top: 1rem; } .pt4 { padding-top: 2rem; } .pt5 { padding-top: 4rem; } .pt6 { padding-top: 8rem; } .pt7 { padding-top: 16rem; } .pv0 { padding-top: 0; padding-bottom: 0; } .pv1 { padding-top: .25rem; padding-bottom: .25rem; } .pv2 { padding-top: .5rem; padding-bottom: .5rem; } .pv3 { padding-top: 1rem; padding-bottom: 1rem; } .pv4 { padding-top: 2rem; padding-bottom: 2rem; } .pv5 { padding-top: 4rem; padding-bottom: 4rem; } .pv6 { padding-top: 8rem; padding-bottom: 8rem; } .pv7 { padding-top: 16rem; padding-bottom: 16rem; } .ph0 { padding-left: 0; padding-right: 0; } .ph1 { padding-left: .25rem; padding-right: .25rem; } .ph2 { padding-left: .5rem; padding-right: .5rem; } .ph3 { padding-left: 1rem; padding-right: 1rem; } .ph4 { padding-left: 2rem; padding-right: 2rem; } .ph5 { padding-left: 4rem; padding-right: 4rem; } .ph6 { padding-left: 8rem; padding-right: 8rem; } .ph7 { padding-left: 16rem; padding-right: 16rem; } .mt-auto { margin-top: auto; } .mr-auto { margin-right: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .m0 { margin: 0; } .m1 { margin: .25rem; } .m2 { margin: .5rem; } .m3 { margin: 1rem; } .m4 { margin: 2rem; } .m5 { margin: 4rem; } .m6 { margin: 8rem; } .m7 { margin: 16rem; } .ml0 { margin-left: 0; } .ml1 { margin-left: .25rem; } .ml2 { margin-left: .5rem; } .ml3 { margin-left: 1rem; } .ml4 { margin-left: 2rem; } .ml5 { margin-left: 4rem; } .ml6 { margin-left: 8rem; } .ml7 { margin-left: 16rem; } .mr0 { margin-right: 0; } .mr1 { margin-right: .25rem; } .mr2 { margin-right: .5rem; } .mr3 { margin-right: 1rem; } .mr4 { margin-right: 2rem; } .mr5 { margin-right: 4rem; } .mr6 { margin-right: 8rem; } .mr7 { margin-right: 16rem; } .mb0 { margin-bottom: 0; } .mb1 { margin-bottom: .25rem; } .mb2 { margin-bottom: .5rem; } .mb3 { margin-bottom: 1rem; } .mb4 { margin-bottom: 2rem; } .mb5 { margin-bottom: 4rem; } .mb6 { margin-bottom: 8rem; } .mb7 { margin-bottom: 16rem; } .mt0 { margin-top: 0; } .mt1 { margin-top: .25rem; } .mt2 { margin-top: .5rem; } .mt3 { margin-top: 1rem; } .mt4 { margin-top: 2rem; } .mt5 { margin-top: 4rem; } .mt6 { margin-top: 8rem; } .mt7 { margin-top: 16rem; } .mv0 { margin-top: 0; margin-bottom: 0; } .mv1 { margin-top: .25rem; margin-bottom: .25rem; } .mv2 { margin-top: .5rem; margin-bottom: .5rem; } .mv3 { margin-top: 1rem; margin-bottom: 1rem; } .mv4 { margin-top: 2rem; margin-bottom: 2rem; } .mv5 { margin-top: 4rem; margin-bottom: 4rem; } .mv6 { margin-top: 8rem; margin-bottom: 8rem; } .mv7 { margin-top: 16rem; margin-bottom: 16rem; } .mh0 { margin-left: 0; margin-right: 0; } .mh1 { margin-left: .25rem; margin-right: .25rem; } .mh2 { margin-left: .5rem; margin-right: .5rem; } .mh3 { margin-left: 1rem; margin-right: 1rem; } .mh4 { margin-left: 2rem; margin-right: 2rem; } .mh5 { margin-left: 4rem; margin-right: 4rem; } .mh6 { margin-left: 8rem; margin-right: 8rem; } .mh7 { margin-left: 16rem; margin-right: 16rem; } /*!!! # NEGATIVE MARGINS ### Base - n = negative ### Modifiers - a = all - t = top - r = right - b = bottom - l = left - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .na1 { margin: -.25rem; } .na2 { margin: -.5rem; } .na3 { margin: -1rem; } .na4 { margin: -2rem; } .na5 { margin: -4rem; } .na6 { margin: -8rem; } .na7 { margin: -16rem; } .nl1 { margin-left: -.25rem; } .nl2 { margin-left: -.5rem; } .nl3 { margin-left: -1rem; } .nl4 { margin-left: -2rem; } .nl5 { margin-left: -4rem; } .nl6 { margin-left: -8rem; } .nl7 { margin-left: -16rem; } .nr1 { margin-right: -.25rem; } .nr2 { margin-right: -.5rem; } .nr3 { margin-right: -1rem; } .nr4 { margin-right: -2rem; } .nr5 { margin-right: -4rem; } .nr6 { margin-right: -8rem; } .nr7 { margin-right: -16rem; } .nb1 { margin-bottom: -.25rem; } .nb2 { margin-bottom: -.5rem; } .nb3 { margin-bottom: -1rem; } .nb4 { margin-bottom: -2rem; } .nb5 { margin-bottom: -4rem; } .nb6 { margin-bottom: -8rem; } .nb7 { margin-bottom: -16rem; } .nt1 { margin-top: -.25rem; } .nt2 { margin-top: -.5rem; } .nt3 { margin-top: -1rem; } .nt4 { margin-top: -2rem; } .nt5 { margin-top: -4rem; } .nt6 { margin-top: -8rem; } .nt7 { margin-top: -16rem; } /*!!! # TABLES ### Docs http://tachyons.io/docs/elements/tables/ ### Base - collapse = border collapse - striped = striped table ### Modifiers - `-light` = light stripes - `-dark` = dark stripes - `--light-silver` = light-silver stripes - `--moon-gray` = moon-gray stripes - `--light-gray` = light-gray stripes - `--near-white` = near-white stripes */ .collapse { border-collapse: collapse; border-spacing: 0; } .striped--light-silver:nth-child(odd) { background-color: undefined; } .striped--moon-gray:nth-child(odd) { background-color: undefined; } .striped--light-gray:nth-child(odd) { background-color: undefined; } .striped--near-white:nth-child(odd) { background-color: undefined; } .stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); } .stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); } /*!!! # TEXT DECORATION ### Docs http://tachyons.io/docs/typography/text-decoration/ ### Base - strike = line-through - underline = underline - no-underline = string value 'none' ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } /*!!! # TEXT ALIGN ### Docs http://tachyons.io/docs/typography/text-align/ ### Base t = text-align ### Modifiers - l = left - r = right - c = center - j = justify ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .tj { text-align: justify; } /*!!! # TEXT TRANSFORM ### Docs http://tachyons.io/docs/typography/text-transform/ ### Base - tt = text-transform ### Modifiers - c = capitalize - l = lowercase - u = uppercase - n = none ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .ttc { text-transform: capitalize; } .ttl { text-transform: lowercase; } .ttu { text-transform: uppercase; } .ttn { text-transform: none; } /*!!! # TYPE SCALE ### Docs http://tachyons.io/docs/typography/scale/ ### Base - f = font-size ### Modifiers - 1 = 1st step in size scale - 2 = 2nd step in size scale - 3 = 3rd step in size scale - 4 = 4th step in size scale - 5 = 5th step in size scale - 6 = 6th step in size scale - 7 = 7th step in size scale - 8 = 8th step in size scale ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Type Scale */ .f0 { font-size: 6rem; } .f1 { font-size: 4rem; } .f2 { font-size: 3rem; } .f3 { font-size: 2rem; } .f4 { font-size: 1.5rem; } .f5 { font-size: 1rem; } .f6 { font-size: .875rem; } /* Small and hard to read for many people so use with extreme caution */ .f7 { font-size: .75rem; } /*!!! # TYPOGRAPHY ### Docs http://tachyons.io/docs/typography/measure/ ### Base - measure = max-width 30em - measure-wide = max-width 34em - measure-narrow = max-width 20em - indent = indent - small-caps = small caps - truncate = truncate ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Measure is limited to ~66 characters */ .measure { max-width: 30em; } /* Measure is limited to ~80 characters */ .measure-wide { max-width: 34em; } /* Measure is limited to ~45 characters */ .measure-narrow { max-width: 20em; } /* Book paragraph style - paragraphs are indented with no vertical spacing. */ .indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps { font-variant: small-caps; } /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*!!! # UTILITIES ### Base - `overflow-container` = horizontal scroll - `center` = margin auto - `mr-auto` = margin-right auto - `ml-auto` = margin-left auto ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* Equivalent to .overflow-y-scroll */ .overflow-container { overflow-y: scroll; } .center { margin-right: auto; margin-left: auto; } /*!!! # VISIBILITY ### Base - clip ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ /* 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 ); } /*!!! # WHITE SPACE ### Base - ws-normal = white-space normal ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .ws-normal { white-space: normal; } .ws-nowrap { white-space: nowrap; } .ws-pre { white-space: pre; } /*!!! # VERTICAL ALIGN ### Base - v = vertical-align ### Modifiers - `-base` = baseline - `-mid` = middle - `-top` = top - `-btm` = bottom ### Media Query Extensions - `-s` = small - `-m` = medium - `-l` = large */ .v-base { vertical-align: baseline; } .v-mid { vertical-align: middle; } .v-top { vertical-align: top; } .v-btm { vertical-align: bottom; } /*!!! # HOVER EFFECTS ### Docs http://tachyons.io/docs/themes/hovers/ ### Base - dim - Dim element on hover - glow - Animate opacity to 100% on hover - hide-child - Hide child & reveal on hover - underline-hover - Underline text on hover - grow - Grow element on hover - pointer - Show cursor: pointer on hover - shadow - Show shadow on hover - bg-animate - Animate background color on hover ### Examples ##### Hide child & reveal on hover Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus. ```html
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
``` */ /* Dim element on hover by adding the dim class. */ .dim { opacity: 1; transition: opacity .15s ease-in; } .dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; } .dim:active { opacity: .8; transition: opacity .15s ease-out; } /* Animate opacity to 100% on hover by adding the glow class. */ .glow { transition: opacity .15s ease-in; } .glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; } /* Hide child & reveal on hover: Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus.
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/ .hide-child .child { opacity: 0; transition: opacity .15s ease-in; } .hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; } .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; } .grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); } .grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); } .grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } .grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); } .grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); } /* Add pointer on hover */ .pointer:hover { cursor: pointer; } /* Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); } .shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); } .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; } /*!!! # Z-INDEX ### Base - z = z-index ### Modifiers - -0 = literal value 0 - -1 = literal value 1 - -2 = literal value 2 - -3 = literal value 3 - -4 = literal value 4 - -5 = literal value 5 - -999 = literal value 999 - -9999 = literal value 9999 - `-max` = largest accepted z-index value as integer - `-inherit` = string value inherit - `-initial` = string value initial - `-unset` = string value unset ### MDN https://developer.mozilla.org/en/docs/Web/CSS/z-index ### Spec http://www.w3.org/TR/CSS2/zindex.html ### Articles: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ ### Tips on extending There might be a time worth using negative z-index values. Or if you are using tachyons with another project, you might need to adjust these values to suit your needs. */ .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-999 { z-index: 999; } .z-9999 { z-index: 9999; } .z-max { z-index: 2147483647; } .z-inherit { z-index: inherit; } .z-initial { z-index: initial; } .z-unset { z-index: unset; } /*!!! # NESTED Tachyons module for styling nested elements that are generated by a cms. */ .nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { line-height: 1.5; } .nested-headline-line-height h1, .nested-headline-line-height h2, .nested-headline-line-height h3, .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; } .nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } .nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .nested-copy-separator p+p { margin-top: 1.5em; } .nested-copy-large-leading p:first-of-type { font-size: 1.25rem; } .nested-img img { width: 100%; max-width: 100%; display: block; } .nested-links a { color: undefined; transition: color .15s ease-in; } .nested-links a:hover { color: undefined; transition: color .15s ease-in; } .nested-links a:focus { color: undefined; transition: color .15s ease-in; } /*!!! # STYLES Add custom styles here. */ /* Variables */ /* Importing here will allow you to override any variables in the modules */ /*!!! # COLOR VARIABLES ### Grayscale - Solids - Transparencies for black and white, 0-100 - Custom colors based on palx */ /*!!! # CUSTOM MEDIA QUERIES Media query values can be changed to fit your own content. There are no magic bullets when it comes to media query width values. They should be declared in em units - and they should be set to meet the needs of your content. You can also add additional media queries, or remove some of the existing ones. The media queries are min-width based meaning that the medium breakpoints apply to all devices that are the medium min-width or larger. These media queries can be referenced like so: ```css @media (--breakpoint-small) { .bg-red-s { background-color: red; } } @media (--breakpoint-medium) { .bg-red-m { background-color: red; } } @media (--breakpoint-large) { .bg-red-l { background-color: red; } } ``` */ /* Media Queries */ /* Debugging */ /*!!! # DEBUG CHILDREN Add the debug class to any element to see outlines on its children. ### Docs http://tachyons.io/docs/debug/ ### Base - debug ### Modifiers - `-white` = white outline - `-black` = black outline */ .debug * { outline: 1px solid gold; } .debug-white * { outline: 1px solid white; } .debug-black * { outline: 1px solid black; } /*!!! # DEBUG GRID Can be useful for debugging layout issues or helping to make sure things line up perfectly. Just tack one of these classes onto a parent element. ### Docs http://tachyons.io/docs/debug-grid/ ### Base - debug-grid ### Modifiers - `-16` = 16px grid - `-8-solid` = solid 8px grid - `-16-solid` = solid 16px grid */ .debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; } .debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left; } .debug-grid-8-solid { background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left; } .debug-grid-16-solid { background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left; } /* Uncomment out the line below to help debug layout issues */ /* @import './_debug'; */ /* Addons */ /* Uncomment out any of the lines below to import the addon */ /* @import './_gradients'; */ /* @import './_nudge'; */ /* @import "./_animate"; */ @media screen and (min-width: 30em) { .aspect-ratio-s { height: 0; position: relative; } .aspect-ratio--16x9-s { padding-bottom: 56.25%; } .aspect-ratio--9x16-s { padding-bottom: 177.77%; } .aspect-ratio--4x3-s { padding-bottom: 75%; } .aspect-ratio--3x4-s { padding-bottom: 133.33%; } .aspect-ratio--6x4-s { padding-bottom: 66.6%; } .aspect-ratio--4x6-s { padding-bottom: 150%; } .aspect-ratio--8x5-s { padding-bottom: 62.5%; } .aspect-ratio--5x8-s { padding-bottom: 160%; } .aspect-ratio--7x5-s { padding-bottom: 71.42%; } .aspect-ratio--5x7-s { padding-bottom: 140%; } .aspect-ratio--1x1-s { padding-bottom: 100%; } .aspect-ratio--object-s { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .cover-s { background-size: cover !important; } .contain-s { background-size: contain !important; } .bg-center-s { background-repeat: no-repeat; background-position: center center; } .bg-top-s { background-repeat: no-repeat; background-position: top center; } .bg-right-s { background-repeat: no-repeat; background-position: center right; } .bg-bottom-s { background-repeat: no-repeat; background-position: bottom center; } .bg-left-s { background-repeat: no-repeat; background-position: center left; } .outline-s { outline: 1px solid; } .outline-transparent-s { outline: 1px solid transparent; } .outline-0-s { outline: 0; } .ba-s { border-style: solid; border-width: 1px; } .bt-s { border-top-style: solid; border-top-width: 1px; } .br-s { border-right-style: solid; border-right-width: 1px; } .bb-s { border-bottom-style: solid; border-bottom-width: 1px; } .bl-s { border-left-style: solid; border-left-width: 1px; } .bn-s { border-style: none; border-width: 0; } .br0-s { border-radius: 0; } .br1-s { border-radius: 3px; } .br2-s { border-radius: 5px; } .br3-s { border-radius: 9px; } .br4-s { border-radius: 17px; } .br-100-s { border-radius: 100%; } .br-pill-s { border-radius: 9999px; } .br--bottom-s { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-s { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-s { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-s { border-top-right-radius: 0; border-bottom-right-radius: 0; } .b--dotted-s { border-style: dotted; } .b--dashed-s { border-style: dashed; } .b--solid-s { border-style: solid; } .b--none-s { border-style: none; } .bw0-s { border-width: 0; } .bw1-s { border-width: .125rem; } .bw2-s { border-width: .25rem; } .bw3-s { border-width: .5rem; } .bw4-s { border-width: 1rem; } .bw5-s { border-width: 2rem; } .bt-0-s { border-top-width: 0; } .br-0-s { border-right-width: 0; } .bb-0-s { border-bottom-width: 0; } .bl-0-s { border-left-width: 0; } .shadow-1-s { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-2-s { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .shadow-3-s { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-4-s { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-5-s { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-none-s { box-shadow: none; } .top-0-s { top: 0; } .left-0-s { left: 0; } .right-0-s { right: 0; } .bottom-0-s { bottom: 0; } .top-1-s { top: 1rem; } .left-1-s { left: 1rem; } .right-1-s { right: 1rem; } .bottom-1-s { bottom: 1rem; } .top-2-s { top: 2rem; } .left-2-s { left: 2rem; } .right-2-s { right: 2rem; } .bottom-2-s { bottom: 2rem; } .top--1-s { top: -1rem; } .right--1-s { right: -1rem; } .bottom--1-s { bottom: -1rem; } .left--1-s { left: -1rem; } .top--2-s { top: -2rem; } .right--2-s { right: -2rem; } .bottom--2-s { bottom: -2rem; } .left--2-s { left: -2rem; } .absolute--fill-s { top: 0; right: 0; bottom: 0; left: 0; } .cl-s { clear: left; } .cr-s { clear: right; } .cb-s { clear: both; } .cn-s { clear: none; } .dn-s { display: none; } .di-s { display: inline; } .db-s { display: block; } .dib-s { display: inline-block; } .dit-s { display: inline-table; } .dt-s { display: table; } .dtc-s { display: table-cell; } .dt-row-s { display: table-row; } .dt--fixed-s { table-layout: fixed; width: 100%; } .flex-s { display: flex; } .inline-flex-s { display: inline-flex; } .flex-1-s { flex: 1; } .flex-auto-s { flex: 1 1 auto; } .flex-initial-s { flex: initial; } .flex-none-s { flex: none; } .flex-column-s { flex-direction: column; } .flex-row-s { flex-direction: row; } .flex-wrap-s { flex-wrap: wrap; } .flex-nowrap-s { flex-wrap: nowrap; } .flex-wrap-reverse-s { flex-wrap: wrap-reverse; } .flex-column-reverse-s { flex-direction: column-reverse; } .flex-row-reverse-s { flex-direction: row-reverse; } .items-start-s { align-items: flex-start; } .items-end-s { align-items: flex-end; } .items-center-s { align-items: center; } .items-baseline-s { align-items: baseline; } .items-stretch-s { align-items: stretch; } .self-start-s { align-self: flex-start; } .self-end-s { align-self: flex-end; } .self-center-s { align-self: center; } .self-baseline-s { align-self: baseline; } .self-stretch-s { align-self: stretch; } .justify-start-s { justify-content: flex-start; } .justify-end-s { justify-content: flex-end; } .justify-center-s { justify-content: center; } .justify-between-s { justify-content: space-between; } .justify-around-s { justify-content: space-around; } .content-start-s { align-content: flex-start; } .content-end-s { align-content: flex-end; } .content-center-s { align-content: center; } .content-between-s { align-content: space-between; } .content-around-s { align-content: space-around; } .content-stretch-s { align-content: stretch; } .order-0-s { order: 0; } .order-1-s { order: 1; } .order-2-s { order: 2; } .order-3-s { order: 3; } .order-4-s { order: 4; } .order-5-s { order: 5; } .order-6-s { order: 6; } .order-7-s { order: 7; } .order-8-s { order: 8; } .order-last-s { order: 99999; } .flex-grow-0-s { flex-grow: 0; } .flex-grow-1-s { flex-grow: 1; } .flex-shrink-0-s { flex-shrink: 0; } .flex-shrink-1-s { flex-shrink: 1; } .fl-s { float: left; _display: inline; } .fr-s { float: right; _display: inline; } .fn-s { float: none; } .i-s { font-style: italic; } .fs-normal-s { font-style: normal; } .b-s { font-weight: bold; } .fw1-s { font-weight: 100; } .fw2-s { font-weight: 200; } .fw3-s { font-weight: 300; } .fw4-s { font-weight: 400; } .fw5-s { font-weight: 500; } .fw6-s { font-weight: 600; } .fw7-s { font-weight: 700; } .fw8-s { font-weight: 800; } .fw9-s { font-weight: 900; } .h1-s { height: 1rem; } .h2-s { height: 2rem; } .h3-s { height: 4rem; } .h4-s { height: 8rem; } .h5-s { height: 16rem; } .h-25-s { height: 25%; } .h-50-s { height: 50%; } .h-75-s { height: 75%; } .h-100-s { height: 100%; } .min-h-100-s { min-height: 100%; } .vh-25-s { height: 25vh; } .vh-50-s { height: 50vh; } .vh-75-s { height: 75vh; } .vh-100-s { height: 100vh; } .min-vh-100-s { min-height: 100vh; } .h-auto-s { height: auto; } .h-inherit-s { height: inherit; } .ls1-s { letter-spacing: -.05em; } .ls2-s { letter-spacing: .1em; } .ls3-s { letter-spacing: .25em; } .lh-solid-s { line-height: 1; } .lh-title-s { line-height: 1.25; } .lh-copy-s { line-height: 1.5; } .mw-100-s { max-width: 100%; } .mw1-s { max-width: 1rem; } .mw2-s { max-width: 2rem; } .mw3-s { max-width: 4rem; } .mw4-s { max-width: 8rem; } .mw5-s { max-width: 16rem; } .mw6-s { max-width: 32rem; } .mw7-s { max-width: 48rem; } .mw8-s { max-width: 56rem; } .mw9-s { max-width: 64rem; } .mw10-s { max-width: 80rem; } .mw-none-s { max-width: none; } .w1-s { width: 1rem; } .w2-s { width: 2rem; } .w3-s { width: 4rem; } .w4-s { width: 8rem; } .w5-s { width: 16rem; } .w-10-s { width: 10%; } .w-20-s { width: 20%; } .w-25-s { width: 25%; } .w-30-s { width: 30%; } .w-40-s { width: 40%; } .w-50-s { width: 50%; } .w-60-s { width: 60%; } .w-70-s { width: 70%; } .w-75-s { width: 75%; } .w-80-s { width: 80%; } .w-90-s { width: 90%; } .w-100-s { width: 100%; } .w-third-s { width: 33.33333%; } .w-two-thirds-s { width: 66.66667%; } .w-auto-s { width: auto; } .overflow-visible-s { overflow: visible; } .overflow-hidden-s { overflow: hidden; } .overflow-scroll-s { overflow: scroll; } .overflow-auto-s { overflow: auto; } .overflow-x-visible-s { overflow-x: visible; } .overflow-x-hidden-s { overflow-x: hidden; } .overflow-x-scroll-s { overflow-x: scroll; } .overflow-x-auto-s { overflow-x: auto; } .overflow-y-visible-s { overflow-y: visible; } .overflow-y-hidden-s { overflow-y: hidden; } .overflow-y-scroll-s { overflow-y: scroll; } .overflow-y-auto-s { overflow-y: auto; } .static-s { position: static; } .relative-s { position: relative; } .absolute-s { position: absolute; } .fixed-s { position: fixed; } .sticky-s { position: -webkit-sticky; position: sticky; } .rotate-45-s { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } .rotate-90-s { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } .rotate-135-s { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } .rotate-180-s { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } .rotate-225-s { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } .rotate-270-s { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } .rotate-315-s { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } .p0-s { padding: 0; } .p1-s { padding: .25rem; } .p2-s { padding: .5rem; } .p3-s { padding: 1rem; } .p4-s { padding: 2rem; } .p5-s { padding: 4rem; } .p6-s { padding: 8rem; } .p7-s { padding: 16rem; } .pl0-s { padding-left: 0; } .pl1-s { padding-left: .25rem; } .pl2-s { padding-left: .5rem; } .pl3-s { padding-left: 1rem; } .pl4-s { padding-left: 2rem; } .pl5-s { padding-left: 4rem; } .pl6-s { padding-left: 8rem; } .pl7-s { padding-left: 16rem; } .pr0-s { padding-right: 0; } .pr1-s { padding-right: .25rem; } .pr2-s { padding-right: .5rem; } .pr3-s { padding-right: 1rem; } .pr4-s { padding-right: 2rem; } .pr5-s { padding-right: 4rem; } .pr6-s { padding-right: 8rem; } .pr7-s { padding-right: 16rem; } .pb0-s { padding-bottom: 0; } .pb1-s { padding-bottom: .25rem; } .pb2-s { padding-bottom: .5rem; } .pb3-s { padding-bottom: 1rem; } .pb4-s { padding-bottom: 2rem; } .pb5-s { padding-bottom: 4rem; } .pb6-s { padding-bottom: 8rem; } .pb7-s { padding-bottom: 16rem; } .pt0-s { padding-top: 0; } .pt1-s { padding-top: .25rem; } .pt2-s { padding-top: .5rem; } .pt3-s { padding-top: 1rem; } .pt4-s { padding-top: 2rem; } .pt5-s { padding-top: 4rem; } .pt6-s { padding-top: 8rem; } .pt7-s { padding-top: 16rem; } .pv0-s { padding-top: 0; padding-bottom: 0; } .pv1-s { padding-top: .25rem; padding-bottom: .25rem; } .pv2-s { padding-top: .5rem; padding-bottom: .5rem; } .pv3-s { padding-top: 1rem; padding-bottom: 1rem; } .pv4-s { padding-top: 2rem; padding-bottom: 2rem; } .pv5-s { padding-top: 4rem; padding-bottom: 4rem; } .pv6-s { padding-top: 8rem; padding-bottom: 8rem; } .pv7-s { padding-top: 16rem; padding-bottom: 16rem; } .ph0-s { padding-left: 0; padding-right: 0; } .ph1-s { padding-left: .25rem; padding-right: .25rem; } .ph2-s { padding-left: .5rem; padding-right: .5rem; } .ph3-s { padding-left: 1rem; padding-right: 1rem; } .ph4-s { padding-left: 2rem; padding-right: 2rem; } .ph5-s { padding-left: 4rem; padding-right: 4rem; } .ph6-s { padding-left: 8rem; padding-right: 8rem; } .ph7-s { padding-left: 16rem; padding-right: 16rem; } .mt-auto-s { margin-top: auto; } .mr-auto-s { margin-right: auto; } .mb-auto-s { margin-bottom: auto; } .ml-auto-s { margin-left: auto; } .m0-s { margin: 0; } .m1-s { margin: .25rem; } .m2-s { margin: .5rem; } .m3-s { margin: 1rem; } .m4-s { margin: 2rem; } .m5-s { margin: 4rem; } .m6-s { margin: 8rem; } .m7-s { margin: 16rem; } .ml0-s { margin-left: 0; } .ml1-s { margin-left: .25rem; } .ml2-s { margin-left: .5rem; } .ml3-s { margin-left: 1rem; } .ml4-s { margin-left: 2rem; } .ml5-s { margin-left: 4rem; } .ml6-s { margin-left: 8rem; } .ml7-s { margin-left: 16rem; } .mr0-s { margin-right: 0; } .mr1-s { margin-right: .25rem; } .mr2-s { margin-right: .5rem; } .mr3-s { margin-right: 1rem; } .mr4-s { margin-right: 2rem; } .mr5-s { margin-right: 4rem; } .mr6-s { margin-right: 8rem; } .mr7-s { margin-right: 16rem; } .mb0-s { margin-bottom: 0; } .mb1-s { margin-bottom: .25rem; } .mb2-s { margin-bottom: .5rem; } .mb3-s { margin-bottom: 1rem; } .mb4-s { margin-bottom: 2rem; } .mb5-s { margin-bottom: 4rem; } .mb6-s { margin-bottom: 8rem; } .mb7-s { margin-bottom: 16rem; } .mt0-s { margin-top: 0; } .mt1-s { margin-top: .25rem; } .mt2-s { margin-top: .5rem; } .mt3-s { margin-top: 1rem; } .mt4-s { margin-top: 2rem; } .mt5-s { margin-top: 4rem; } .mt6-s { margin-top: 8rem; } .mt7-s { margin-top: 16rem; } .mv0-s { margin-top: 0; margin-bottom: 0; } .mv1-s { margin-top: .25rem; margin-bottom: .25rem; } .mv2-s { margin-top: .5rem; margin-bottom: .5rem; } .mv3-s { margin-top: 1rem; margin-bottom: 1rem; } .mv4-s { margin-top: 2rem; margin-bottom: 2rem; } .mv5-s { margin-top: 4rem; margin-bottom: 4rem; } .mv6-s { margin-top: 8rem; margin-bottom: 8rem; } .mv7-s { margin-top: 16rem; margin-bottom: 16rem; } .mh0-s { margin-left: 0; margin-right: 0; } .mh1-s { margin-left: .25rem; margin-right: .25rem; } .mh2-s { margin-left: .5rem; margin-right: .5rem; } .mh3-s { margin-left: 1rem; margin-right: 1rem; } .mh4-s { margin-left: 2rem; margin-right: 2rem; } .mh5-s { margin-left: 4rem; margin-right: 4rem; } .mh6-s { margin-left: 8rem; margin-right: 8rem; } .mh7-s { margin-left: 16rem; margin-right: 16rem; } .na1-s { margin: -.25rem; } .na2-s { margin: -.5rem; } .na3-s { margin: -1rem; } .na4-s { margin: -2rem; } .na5-s { margin: -4rem; } .na6-s { margin: -8rem; } .na7-s { margin: -16rem; } .nl1-s { margin-left: -.25rem; } .nl2-s { margin-left: -.5rem; } .nl3-s { margin-left: -1rem; } .nl4-s { margin-left: -2rem; } .nl5-s { margin-left: -4rem; } .nl6-s { margin-left: -8rem; } .nl7-s { margin-left: -16rem; } .nr1-s { margin-right: -.25rem; } .nr2-s { margin-right: -.5rem; } .nr3-s { margin-right: -1rem; } .nr4-s { margin-right: -2rem; } .nr5-s { margin-right: -4rem; } .nr6-s { margin-right: -8rem; } .nr7-s { margin-right: -16rem; } .nb1-s { margin-bottom: -.25rem; } .nb2-s { margin-bottom: -.5rem; } .nb3-s { margin-bottom: -1rem; } .nb4-s { margin-bottom: -2rem; } .nb5-s { margin-bottom: -4rem; } .nb6-s { margin-bottom: -8rem; } .nb7-s { margin-bottom: -16rem; } .nt1-s { margin-top: -.25rem; } .nt2-s { margin-top: -.5rem; } .nt3-s { margin-top: -1rem; } .nt4-s { margin-top: -2rem; } .nt5-s { margin-top: -4rem; } .nt6-s { margin-top: -8rem; } .nt7-s { margin-top: -16rem; } .strike-s { text-decoration: line-through; } .underline-s { text-decoration: underline; } .no-underline-s { text-decoration: none; } .tl-s { text-align: left; } .tr-s { text-align: right; } .tc-s { text-align: center; } .tj-s { text-align: justify; } .ttc-s { text-transform: capitalize; } .ttl-s { text-transform: lowercase; } .ttu-s { text-transform: uppercase; } .ttn-s { text-transform: none; } .f0-s { font-size: 6rem; } .f1-s { font-size: 4rem; } .f2-s { font-size: 3rem; } .f3-s { font-size: 2rem; } .f4-s { font-size: 1.5rem; } .f5-s { font-size: 1rem; } .f6-s { font-size: .875rem; } .f7-s { font-size: .75rem; } .measure-s { max-width: 30em; } .measure-wide-s { max-width: 34em; } .measure-narrow-s { max-width: 20em; } .indent-s { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-s { font-variant: small-caps; } .truncate-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-s { margin-right: auto; margin-left: auto; } .clip-s { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } .ws-normal-s { white-space: normal; } .ws-nowrap-s { white-space: nowrap; } .ws-pre-s { white-space: pre; } .v-base-s { vertical-align: baseline; } .v-mid-s { vertical-align: middle; } .v-top-s { vertical-align: top; } .v-btm-s { vertical-align: bottom; } } @media screen and (min-width: 48em) { .aspect-ratio-m { height: 0; position: relative; } .aspect-ratio--16x9-m { padding-bottom: 56.25%; } .aspect-ratio--9x16-m { padding-bottom: 177.77%; } .aspect-ratio--4x3-m { padding-bottom: 75%; } .aspect-ratio--3x4-m { padding-bottom: 133.33%; } .aspect-ratio--6x4-m { padding-bottom: 66.6%; } .aspect-ratio--4x6-m { padding-bottom: 150%; } .aspect-ratio--8x5-m { padding-bottom: 62.5%; } .aspect-ratio--5x8-m { padding-bottom: 160%; } .aspect-ratio--7x5-m { padding-bottom: 71.42%; } .aspect-ratio--5x7-m { padding-bottom: 140%; } .aspect-ratio--1x1-m { padding-bottom: 100%; } .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .cover-m { background-size: cover !important; } .contain-m { background-size: contain !important; } .bg-center-m { background-repeat: no-repeat; background-position: center center; } .bg-top-m { background-repeat: no-repeat; background-position: top center; } .bg-right-m { background-repeat: no-repeat; background-position: center right; } .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } .bg-left-m { background-repeat: no-repeat; background-position: center left; } .outline-m { outline: 1px solid; } .outline-transparent-m { outline: 1px solid transparent; } .outline-0-m { outline: 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; } .bn-m { border-style: none; border-width: 0; } .br0-m { border-radius: 0; } .br1-m { border-radius: 3px; } .br2-m { border-radius: 5px; } .br3-m { border-radius: 9px; } .br4-m { border-radius: 17px; } .br-100-m { border-radius: 100%; } .br-pill-m { border-radius: 9999px; } .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } .b--dotted-m { border-style: dotted; } .b--dashed-m { border-style: dashed; } .b--solid-m { border-style: solid; } .b--none-m { border-style: none; } .bw0-m { border-width: 0; } .bw1-m { border-width: .125rem; } .bw2-m { border-width: .25rem; } .bw3-m { border-width: .5rem; } .bw4-m { border-width: 1rem; } .bw5-m { border-width: 2rem; } .bt-0-m { border-top-width: 0; } .br-0-m { border-right-width: 0; } .bb-0-m { border-bottom-width: 0; } .bl-0-m { border-left-width: 0; } .shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-none-m { box-shadow: none; } .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--1-m { top: -1rem; } .right--1-m { right: -1rem; } .bottom--1-m { bottom: -1rem; } .left--1-m { left: -1rem; } .top--2-m { top: -2rem; } .right--2-m { right: -2rem; } .bottom--2-m { bottom: -2rem; } .left--2-m { left: -2rem; } .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } .cl-m { clear: left; } .cr-m { clear: right; } .cb-m { clear: both; } .cn-m { clear: none; } .dn-m { display: none; } .di-m { display: inline; } .db-m { display: block; } .dib-m { display: inline-block; } .dit-m { display: inline-table; } .dt-m { display: table; } .dtc-m { display: table-cell; } .dt-row-m { display: table-row; } .dt-row-group-m { display: table-row-group; } .dt-column-m { display: table-column; } .dt-column-group-m { display: table-column-group; } .dt--fixed-m { table-layout: fixed; width: 100%; } .flex-m { display: flex; } .inline-flex-m { display: inline-flex; } .flex-1-m { flex: 1; } .flex-auto-m { flex: 1 1 auto; } .flex-initial-m { flex: initial; } .flex-none-m { flex: none; } .flex-column-m { flex-direction: column; } .flex-row-m { flex-direction: row; } .flex-wrap-m { flex-wrap: wrap; } .flex-nowrap-m { flex-wrap: nowrap; } .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } .flex-column-reverse-m { flex-direction: column-reverse; } .flex-row-reverse-m { flex-direction: row-reverse; } .items-start-m { align-items: flex-start; } .items-end-m { align-items: flex-end; } .items-center-m { align-items: center; } .items-baseline-m { align-items: baseline; } .items-stretch-m { align-items: stretch; } .self-start-m { align-self: flex-start; } .self-end-m { align-self: flex-end; } .self-center-m { align-self: center; } .self-baseline-m { align-self: baseline; } .self-stretch-m { align-self: stretch; } .justify-start-m { justify-content: flex-start; } .justify-end-m { justify-content: flex-end; } .justify-center-m { justify-content: center; } .justify-between-m { justify-content: space-between; } .justify-around-m { justify-content: space-around; } .content-start-m { align-content: flex-start; } .content-end-m { align-content: flex-end; } .content-center-m { align-content: center; } .content-between-m { align-content: space-between; } .content-around-m { align-content: space-around; } .content-stretch-m { align-content: stretch; } .order-0-m { order: 0; } .order-1-m { order: 1; } .order-2-m { order: 2; } .order-3-m { order: 3; } .order-4-m { order: 4; } .order-5-m { order: 5; } .order-6-m { order: 6; } .order-7-m { order: 7; } .order-8-m { order: 8; } .order-last-m { order: 99999; } .flex-grow-0-m { flex-grow: 0; } .flex-grow-1-m { flex-grow: 1; } .flex-shrink-0-m { flex-shrink: 0; } .flex-shrink-1-m { flex-shrink: 1; } .fl-m { float: left; _display: inline; } .fr-m { float: right; _display: inline; } .fn-m { float: none; } .i-m { font-style: italic; } .fs-normal-m { font-style: normal; } .b-m { font-weight: bold; } .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; } .h1-m { height: 1rem; } .h2-m { height: 2rem; } .h3-m { height: 4rem; } .h4-m { height: 8rem; } .h5-m { height: 16rem; } .h-25-m { height: 25%; } .h-50-m { height: 50%; } .h-75-m { height: 75%; } .h-100-m { height: 100%; } .min-h-100-m { min-height: 100%; } .vh-25-m { height: 25vh; } .vh-50-m { height: 50vh; } .vh-75-m { height: 75vh; } .vh-100-m { height: 100vh; } .min-vh-100-m { min-height: 100vh; } .h-auto-m { height: auto; } .h-inherit-m { height: inherit; } .ls1-m { letter-spacing: -.05em; } .ls2-m { letter-spacing: .1em; } .ls3-m { letter-spacing: .25em; } .lh-solid-m { line-height: 1; } .lh-title-m { line-height: 1.25; } .lh-copy-m { line-height: 1.5; } .mw-100-m { max-width: 100%; } .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: 56rem; } .mw9-m { max-width: 64rem; } .mw10-m { max-width: 80rem; } .mw-none-m { max-width: none; } .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-30-m { width: 30%; } .w-40-m { width: 40%; } .w-50-m { width: 50%; } .w-60-m { width: 60%; } .w-70-m { width: 70%; } .w-75-m { width: 75%; } .w-80-m { width: 80%; } .w-90-m { width: 90%; } .w-100-m { width: 100%; } .w-third-m { width: 33.33333%; } .w-two-thirds-m { width: 66.66667%; } .w-auto-m { width: auto; } .overflow-visible-m { overflow: visible; } .overflow-hidden-m { overflow: hidden; } .overflow-scroll-m { overflow: scroll; } .overflow-auto-m { overflow: auto; } .overflow-x-visible-m { overflow-x: visible; } .overflow-x-hidden-m { overflow-x: hidden; } .overflow-x-scroll-m { overflow-x: scroll; } .overflow-x-auto-m { overflow-x: auto; } .overflow-y-visible-m { overflow-y: visible; } .overflow-y-hidden-m { overflow-y: hidden; } .overflow-y-scroll-m { overflow-y: scroll; } .overflow-y-auto-m { overflow-y: auto; } .static-m { position: static; } .relative-m { position: relative; } .absolute-m { position: absolute; } .fixed-m { position: fixed; } .sticky-m { position: -webkit-sticky; position: sticky; } .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } .p0-m { padding: 0; } .p1-m { padding: .25rem; } .p2-m { padding: .5rem; } .p3-m { padding: 1rem; } .p4-m { padding: 2rem; } .p5-m { padding: 4rem; } .p6-m { padding: 8rem; } .p7-m { padding: 16rem; } .pl0-m { padding-left: 0; } .pl1-m { padding-left: .25rem; } .pl2-m { padding-left: .5rem; } .pl3-m { padding-left: 1rem; } .pl4-m { padding-left: 2rem; } .pl5-m { padding-left: 4rem; } .pl6-m { padding-left: 8rem; } .pl7-m { padding-left: 16rem; } .pr0-m { padding-right: 0; } .pr1-m { padding-right: .25rem; } .pr2-m { padding-right: .5rem; } .pr3-m { padding-right: 1rem; } .pr4-m { padding-right: 2rem; } .pr5-m { padding-right: 4rem; } .pr6-m { padding-right: 8rem; } .pr7-m { padding-right: 16rem; } .pb0-m { padding-bottom: 0; } .pb1-m { padding-bottom: .25rem; } .pb2-m { padding-bottom: .5rem; } .pb3-m { padding-bottom: 1rem; } .pb4-m { padding-bottom: 2rem; } .pb5-m { padding-bottom: 4rem; } .pb6-m { padding-bottom: 8rem; } .pb7-m { padding-bottom: 16rem; } .pt0-m { padding-top: 0; } .pt1-m { padding-top: .25rem; } .pt2-m { padding-top: .5rem; } .pt3-m { padding-top: 1rem; } .pt4-m { padding-top: 2rem; } .pt5-m { padding-top: 4rem; } .pt6-m { padding-top: 8rem; } .pt7-m { padding-top: 16rem; } .pv0-m { padding-top: 0; padding-bottom: 0; } .pv1-m { padding-top: .25rem; padding-bottom: .25rem; } .pv2-m { padding-top: .5rem; padding-bottom: .5rem; } .pv3-m { padding-top: 1rem; padding-bottom: 1rem; } .pv4-m { padding-top: 2rem; padding-bottom: 2rem; } .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } .pv6-m { padding-top: 8rem; padding-bottom: 8rem; } .pv7-m { padding-top: 16rem; padding-bottom: 16rem; } .ph0-m { padding-left: 0; padding-right: 0; } .ph1-m { padding-left: .25rem; padding-right: .25rem; } .ph2-m { padding-left: .5rem; padding-right: .5rem; } .ph3-m { padding-left: 1rem; padding-right: 1rem; } .ph4-m { padding-left: 2rem; padding-right: 2rem; } .ph5-m { padding-left: 4rem; padding-right: 4rem; } .ph6-m { padding-left: 8rem; padding-right: 8rem; } .ph7-m { padding-left: 16rem; padding-right: 16rem; } .mt-auto-m { margin-top: auto; } .mr-auto-m { margin-right: auto; } .mb-auto-m { margin-bottom: auto; } .ml-auto-m { margin-left: auto; } .m0-m { margin: 0; } .m1-m { margin: .25rem; } .m2-m { margin: .5rem; } .m3-m { margin: 1rem; } .m4-m { margin: 2rem; } .m5-m { margin: 4rem; } .m6-m { margin: 8rem; } .m7-m { margin: 16rem; } .ml0-m { margin-left: 0; } .ml1-m { margin-left: .25rem; } .ml2-m { margin-left: .5rem; } .ml3-m { margin-left: 1rem; } .ml4-m { margin-left: 2rem; } .ml5-m { margin-left: 4rem; } .ml6-m { margin-left: 8rem; } .ml7-m { margin-left: 16rem; } .mr0-m { margin-right: 0; } .mr1-m { margin-right: .25rem; } .mr2-m { margin-right: .5rem; } .mr3-m { margin-right: 1rem; } .mr4-m { margin-right: 2rem; } .mr5-m { margin-right: 4rem; } .mr6-m { margin-right: 8rem; } .mr7-m { margin-right: 16rem; } .mb0-m { margin-bottom: 0; } .mb1-m { margin-bottom: .25rem; } .mb2-m { margin-bottom: .5rem; } .mb3-m { margin-bottom: 1rem; } .mb4-m { margin-bottom: 2rem; } .mb5-m { margin-bottom: 4rem; } .mb6-m { margin-bottom: 8rem; } .mb7-m { margin-bottom: 16rem; } .mt0-m { margin-top: 0; } .mt1-m { margin-top: .25rem; } .mt2-m { margin-top: .5rem; } .mt3-m { margin-top: 1rem; } .mt4-m { margin-top: 2rem; } .mt5-m { margin-top: 4rem; } .mt6-m { margin-top: 8rem; } .mt7-m { margin-top: 16rem; } .mv0-m { margin-top: 0; margin-bottom: 0; } .mv1-m { margin-top: .25rem; margin-bottom: .25rem; } .mv2-m { margin-top: .5rem; margin-bottom: .5rem; } .mv3-m { margin-top: 1rem; margin-bottom: 1rem; } .mv4-m { margin-top: 2rem; margin-bottom: 2rem; } .mv5-m { margin-top: 4rem; margin-bottom: 4rem; } .mv6-m { margin-top: 8rem; margin-bottom: 8rem; } .mv7-m { margin-top: 16rem; margin-bottom: 16rem; } .mh0-m { margin-left: 0; margin-right: 0; } .mh1-m { margin-left: .25rem; margin-right: .25rem; } .mh2-m { margin-left: .5rem; margin-right: .5rem; } .mh3-m { margin-left: 1rem; margin-right: 1rem; } .mh4-m { margin-left: 2rem; margin-right: 2rem; } .mh5-m { margin-left: 4rem; margin-right: 4rem; } .mh6-m { margin-left: 8rem; margin-right: 8rem; } .mh7-m { margin-left: 16rem; margin-right: 16rem; } .na1-m { margin: -.25rem; } .na2-m { margin: -.5rem; } .na3-m { margin: -1rem; } .na4-m { margin: -2rem; } .na5-m { margin: -4rem; } .na6-m { margin: -8rem; } .na7-m { margin: -16rem; } .nl1-m { margin-left: -.25rem; } .nl2-m { margin-left: -.5rem; } .nl3-m { margin-left: -1rem; } .nl4-m { margin-left: -2rem; } .nl5-m { margin-left: -4rem; } .nl6-m { margin-left: -8rem; } .nl7-m { margin-left: -16rem; } .nr1-m { margin-right: -.25rem; } .nr2-m { margin-right: -.5rem; } .nr3-m { margin-right: -1rem; } .nr4-m { margin-right: -2rem; } .nr5-m { margin-right: -4rem; } .nr6-m { margin-right: -8rem; } .nr7-m { margin-right: -16rem; } .nb1-m { margin-bottom: -.25rem; } .nb2-m { margin-bottom: -.5rem; } .nb3-m { margin-bottom: -1rem; } .nb4-m { margin-bottom: -2rem; } .nb5-m { margin-bottom: -4rem; } .nb6-m { margin-bottom: -8rem; } .nb7-m { margin-bottom: -16rem; } .nt1-m { margin-top: -.25rem; } .nt2-m { margin-top: -.5rem; } .nt3-m { margin-top: -1rem; } .nt4-m { margin-top: -2rem; } .nt5-m { margin-top: -4rem; } .nt6-m { margin-top: -8rem; } .nt7-m { margin-top: -16rem; } .strike-m { text-decoration: line-through; } .underline-m { text-decoration: underline; } .no-underline-m { text-decoration: none; } .tl-m { text-align: left; } .tr-m { text-align: right; } .tc-m { text-align: center; } .tj-m { text-align: justify; } .ttc-m { text-transform: capitalize; } .ttl-m { text-transform: lowercase; } .ttu-m { text-transform: uppercase; } .ttn-m { text-transform: none; } .f0-m { font-size: 6rem; } .f1-m { font-size: 4rem; } .f2-m { font-size: 3rem; } .f3-m { font-size: 2rem; } .f4-m { font-size: 1.5rem; } .f5-m { font-size: 1rem; } .f6-m { font-size: .875rem; } .f7-m { font-size: .75rem; } .measure-m { max-width: 30em; } .measure-wide-m { max-width: 34em; } .measure-narrow-m { max-width: 20em; } .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-m { font-variant: small-caps; } .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-m { margin-right: auto; margin-left: auto; } .clip-m { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } .ws-normal-m { white-space: normal; } .ws-nowrap-m { white-space: nowrap; } .ws-pre-m { white-space: pre; } .v-base-m { vertical-align: baseline; } .v-mid-m { vertical-align: middle; } .v-top-m { vertical-align: top; } .v-btm-m { vertical-align: bottom; } } @media screen and (min-width: 60em) { .aspect-ratio-l { height: 0; position: relative; } .aspect-ratio--16x9-l { padding-bottom: 56.25%; } .aspect-ratio--9x16-l { padding-bottom: 177.77%; } .aspect-ratio--4x3-l { padding-bottom: 75%; } .aspect-ratio--3x4-l { padding-bottom: 133.33%; } .aspect-ratio--6x4-l { padding-bottom: 66.6%; } .aspect-ratio--4x6-l { padding-bottom: 150%; } .aspect-ratio--8x5-l { padding-bottom: 62.5%; } .aspect-ratio--5x8-l { padding-bottom: 160%; } .aspect-ratio--7x5-l { padding-bottom: 71.42%; } .aspect-ratio--5x7-l { padding-bottom: 140%; } .aspect-ratio--1x1-l { padding-bottom: 100%; } .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .cover-l { background-size: cover !important; } .contain-l { background-size: contain !important; } .bg-center-l { background-repeat: no-repeat; background-position: center center; } .bg-top-l { background-repeat: no-repeat; background-position: top center; } .bg-right-l { background-repeat: no-repeat; background-position: center right; } .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } .bg-left-l { background-repeat: no-repeat; background-position: center left; } .outline-l { outline: 1px solid; } .outline-transparent-l { outline: 1px solid transparent; } .outline-0-l { outline: 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; } .bn-l { border-style: none; border-width: 0; } .br0-l { border-radius: 0; } .br1-l { border-radius: 3px; } .br2-l { border-radius: 5px; } .br3-l { border-radius: 9px; } .br4-l { border-radius: 17px; } .br-100-l { border-radius: 100%; } .br-pill-l { border-radius: 9999px; } .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } .b--dotted-l { border-style: dotted; } .b--dashed-l { border-style: dashed; } .b--solid-l { border-style: solid; } .b--none-l { border-style: none; } .bw0-l { border-width: 0; } .bw1-l { border-width: .125rem; } .bw2-l { border-width: .25rem; } .bw3-l { border-width: .5rem; } .bw4-l { border-width: 1rem; } .bw5-l { border-width: 2rem; } .bt-0-l { border-top-width: 0; } .br-0-l { border-right-width: 0; } .bb-0-l { border-bottom-width: 0; } .bl-0-l { border-left-width: 0; } .shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-none-l { box-shadow: none; } .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--1-l { top: -1rem; } .right--1-l { right: -1rem; } .bottom--1-l { bottom: -1rem; } .left--1-l { left: -1rem; } .top--2-l { top: -2rem; } .right--2-l { right: -2rem; } .bottom--2-l { bottom: -2rem; } .left--2-l { left: -2rem; } .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } .cl-l { clear: left; } .cr-l { clear: right; } .cb-l { clear: both; } .cn-l { clear: none; } .dn-l { display: none; } .di-l { display: inline; } .db-l { display: block; } .dib-l { display: inline-block; } .dit-l { display: inline-table; } .dt-l { display: table; } .dtc-l { display: table-cell; } .dt-row-l { display: table-row; } .dt--fixed-l { table-layout: fixed; width: 100%; } .flex-l { display: flex; } .inline-flex-l { display: inline-flex; } .flex-1-l { flex: 1; } .flex-auto-l { flex: 1 1 auto; } .flex-initial-l { flex: initial; } .flex-none-l { flex: none; } .flex-column-l { flex-direction: column; } .flex-row-l { flex-direction: row; } .flex-wrap-l { flex-wrap: wrap; } .flex-nowrap-l { flex-wrap: nowrap; } .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } .flex-column-reverse-l { flex-direction: column-reverse; } .flex-row-reverse-l { flex-direction: row-reverse; } .items-start-l { align-items: flex-start; } .items-end-l { align-items: flex-end; } .items-center-l { align-items: center; } .items-baseline-l { align-items: baseline; } .items-stretch-l { align-items: stretch; } .self-start-l { align-self: flex-start; } .self-end-l { align-self: flex-end; } .self-center-l { align-self: center; } .self-baseline-l { align-self: baseline; } .self-stretch-l { align-self: stretch; } .justify-start-l { justify-content: flex-start; } .justify-end-l { justify-content: flex-end; } .justify-center-l { justify-content: center; } .justify-between-l { justify-content: space-between; } .justify-around-l { justify-content: space-around; } .content-start-l { align-content: flex-start; } .content-end-l { align-content: flex-end; } .content-center-l { align-content: center; } .content-between-l { align-content: space-between; } .content-around-l { align-content: space-around; } .content-stretch-l { align-content: stretch; } .order-0-l { order: 0; } .order-1-l { order: 1; } .order-2-l { order: 2; } .order-3-l { order: 3; } .order-4-l { order: 4; } .order-5-l { order: 5; } .order-6-l { order: 6; } .order-7-l { order: 7; } .order-8-l { order: 8; } .order-last-l { order: 99999; } .flex-grow-0-l { flex-grow: 0; } .flex-grow-1-l { flex-grow: 1; } .flex-shrink-0-l { flex-shrink: 0; } .flex-shrink-1-l { flex-shrink: 1; } .fl-l { float: left; _display: inline; } .fr-l { float: right; _display: inline; } .fn-l { float: none; } .i-l { font-style: italic; } .fs-normal-l { font-style: normal; } .b-l { font-weight: bold; } .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; } .h1-l { height: 1rem; } .h2-l { height: 2rem; } .h3-l { height: 4rem; } .h4-l { height: 8rem; } .h5-l { height: 16rem; } .h-25-l { height: 25%; } .h-50-l { height: 50%; } .h-75-l { height: 75%; } .h-100-l { height: 100%; } .min-h-100-l { min-height: 100%; } .vh-25-l { height: 25vh; } .vh-50-l { height: 50vh; } .vh-75-l { height: 75vh; } .vh-100-l { height: 100vh; } .min-vh-100-l { min-height: 100vh; } .h-auto-l { height: auto; } .h-inherit-l { height: inherit; } .ls1-l { letter-spacing: -.05em; } .ls2-l { letter-spacing: .1em; } .ls3-l { letter-spacing: .25em; } .lh-solid-l { line-height: 1; } .lh-title-l { line-height: 1.25; } .lh-copy-l { line-height: 1.5; } .mw-100-l { max-width: 100%; } .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: 56rem; } .mw9-l { max-width: 64rem; } .mw9-l { max-width: 80rem; } .mw-none-l { max-width: none; } .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-30-l { width: 30%; } .w-40-l { width: 40%; } .w-50-l { width: 50%; } .w-60-l { width: 60%; } .w-70-l { width: 70%; } .w-75-l { width: 75%; } .w-80-l { width: 80%; } .w-90-l { width: 90%; } .w-100-l { width: 100%; } .w-third-l { width: 33.33333%; } .w-two-thirds-l { width: 66.66667%; } .w-auto-l { width: auto; } .overflow-visible-l { overflow: visible; } .overflow-hidden-l { overflow: hidden; } .overflow-scroll-l { overflow: scroll; } .overflow-auto-l { overflow: auto; } .overflow-x-visible-l { overflow-x: visible; } .overflow-x-hidden-l { overflow-x: hidden; } .overflow-x-scroll-l { overflow-x: scroll; } .overflow-x-auto-l { overflow-x: auto; } .overflow-y-visible-l { overflow-y: visible; } .overflow-y-hidden-l { overflow-y: hidden; } .overflow-y-scroll-l { overflow-y: scroll; } .overflow-y-auto-l { overflow-y: auto; } .static-l { position: static; } .relative-l { position: relative; } .absolute-l { position: absolute; } .fixed-l { position: fixed; } .sticky-l { position: -webkit-sticky; position: sticky; } .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); } .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); } .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); } .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); } .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); } .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); } .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); } .p0-l { padding: 0; } .p1-l { padding: .25rem; } .p2-l { padding: .5rem; } .p3-l { padding: 1rem; } .p4-l { padding: 2rem; } .p5-l { padding: 4rem; } .p6-l { padding: 8rem; } .p7-l { padding: 16rem; } .pl0-l { padding-left: 0; } .pl1-l { padding-left: .25rem; } .pl2-l { padding-left: .5rem; } .pl3-l { padding-left: 1rem; } .pl4-l { padding-left: 2rem; } .pl5-l { padding-left: 4rem; } .pl6-l { padding-left: 8rem; } .pl7-l { padding-left: 16rem; } .pr0-l { padding-right: 0; } .pr1-l { padding-right: .25rem; } .pr2-l { padding-right: .5rem; } .pr3-l { padding-right: 1rem; } .pr4-l { padding-right: 2rem; } .pr5-l { padding-right: 4rem; } .pr6-l { padding-right: 8rem; } .pr7-l { padding-right: 16rem; } .pb0-l { padding-bottom: 0; } .pb1-l { padding-bottom: .25rem; } .pb2-l { padding-bottom: .5rem; } .pb3-l { padding-bottom: 1rem; } .pb4-l { padding-bottom: 2rem; } .pb5-l { padding-bottom: 4rem; } .pb6-l { padding-bottom: 8rem; } .pb7-l { padding-bottom: 16rem; } .pt0-l { padding-top: 0; } .pt1-l { padding-top: .25rem; } .pt2-l { padding-top: .5rem; } .pt3-l { padding-top: 1rem; } .pt4-l { padding-top: 2rem; } .pt5-l { padding-top: 4rem; } .pt6-l { padding-top: 8rem; } .pt7-l { padding-top: 16rem; } .pv0-l { padding-top: 0; padding-bottom: 0; } .pv1-l { padding-top: .25rem; padding-bottom: .25rem; } .pv2-l { padding-top: .5rem; padding-bottom: .5rem; } .pv3-l { padding-top: 1rem; padding-bottom: 1rem; } .pv4-l { padding-top: 2rem; padding-bottom: 2rem; } .pv5-l { padding-top: 4rem; padding-bottom: 4rem; } .pv6-l { padding-top: 8rem; padding-bottom: 8rem; } .pv7-l { padding-top: 16rem; padding-bottom: 16rem; } .ph0-l { padding-left: 0; padding-right: 0; } .ph1-l { padding-left: .25rem; padding-right: .25rem; } .ph2-l { padding-left: .5rem; padding-right: .5rem; } .ph3-l { padding-left: 1rem; padding-right: 1rem; } .ph4-l { padding-left: 2rem; padding-right: 2rem; } .ph5-l { padding-left: 4rem; padding-right: 4rem; } .ph6-l { padding-left: 8rem; padding-right: 8rem; } .ph7-l { padding-left: 16rem; padding-right: 16rem; } .mt-auto-l { margin-top: auto; } .mr-auto-l { margin-right: auto; } .mb-auto-l { margin-bottom: auto; } .ml-auto-l { margin-left: auto; } .m0-l { margin: 0; } .m1-l { margin: .25rem; } .m2-l { margin: .5rem; } .m3-l { margin: 1rem; } .m4-l { margin: 2rem; } .m5-l { margin: 4rem; } .m6-l { margin: 8rem; } .m7-l { margin: 16rem; } .ml0-l { margin-left: 0; } .ml1-l { margin-left: .25rem; } .ml2-l { margin-left: .5rem; } .ml3-l { margin-left: 1rem; } .ml4-l { margin-left: 2rem; } .ml5-l { margin-left: 4rem; } .ml6-l { margin-left: 8rem; } .ml7-l { margin-left: 16rem; } .mr0-l { margin-right: 0; } .mr1-l { margin-right: .25rem; } .mr2-l { margin-right: .5rem; } .mr3-l { margin-right: 1rem; } .mr4-l { margin-right: 2rem; } .mr5-l { margin-right: 4rem; } .mr6-l { margin-right: 8rem; } .mr7-l { margin-right: 16rem; } .mb0-l { margin-bottom: 0; } .mb1-l { margin-bottom: .25rem; } .mb2-l { margin-bottom: .5rem; } .mb3-l { margin-bottom: 1rem; } .mb4-l { margin-bottom: 2rem; } .mb5-l { margin-bottom: 4rem; } .mb6-l { margin-bottom: 8rem; } .mb7-l { margin-bottom: 16rem; } .mt0-l { margin-top: 0; } .mt1-l { margin-top: .25rem; } .mt2-l { margin-top: .5rem; } .mt3-l { margin-top: 1rem; } .mt4-l { margin-top: 2rem; } .mt5-l { margin-top: 4rem; } .mt6-l { margin-top: 8rem; } .mt7-l { margin-top: 16rem; } .mv0-l { margin-top: 0; margin-bottom: 0; } .mv1-l { margin-top: .25rem; margin-bottom: .25rem; } .mv2-l { margin-top: .5rem; margin-bottom: .5rem; } .mv3-l { margin-top: 1rem; margin-bottom: 1rem; } .mv4-l { margin-top: 2rem; margin-bottom: 2rem; } .mv5-l { margin-top: 4rem; margin-bottom: 4rem; } .mv6-l { margin-top: 8rem; margin-bottom: 8rem; } .mv7-l { margin-top: 16rem; margin-bottom: 16rem; } .mh0-l { margin-left: 0; margin-right: 0; } .mh1-l { margin-left: .25rem; margin-right: .25rem; } .mh2-l { margin-left: .5rem; margin-right: .5rem; } .mh3-l { margin-left: 1rem; margin-right: 1rem; } .mh4-l { margin-left: 2rem; margin-right: 2rem; } .mh5-l { margin-left: 4rem; margin-right: 4rem; } .mh6-l { margin-left: 8rem; margin-right: 8rem; } .mh7-l { margin-left: 16rem; margin-right: 16rem; } .na1-l { margin: -.25rem; } .na2-l { margin: -.5rem; } .na3-l { margin: -1rem; } .na4-l { margin: -2rem; } .na5-l { margin: -4rem; } .na6-l { margin: -8rem; } .na7-l { margin: -16rem; } .nl1-l { margin-left: -.25rem; } .nl2-l { margin-left: -.5rem; } .nl3-l { margin-left: -1rem; } .nl4-l { margin-left: -2rem; } .nl5-l { margin-left: -4rem; } .nl6-l { margin-left: -8rem; } .nl7-l { margin-left: -16rem; } .nr1-l { margin-right: -.25rem; } .nr2-l { margin-right: -.5rem; } .nr3-l { margin-right: -1rem; } .nr4-l { margin-right: -2rem; } .nr5-l { margin-right: -4rem; } .nr6-l { margin-right: -8rem; } .nr7-l { margin-right: -16rem; } .nb1-l { margin-bottom: -.25rem; } .nb2-l { margin-bottom: -.5rem; } .nb3-l { margin-bottom: -1rem; } .nb4-l { margin-bottom: -2rem; } .nb5-l { margin-bottom: -4rem; } .nb6-l { margin-bottom: -8rem; } .nb7-l { margin-bottom: -16rem; } .nt1-l { margin-top: -.25rem; } .nt2-l { margin-top: -.5rem; } .nt3-l { margin-top: -1rem; } .nt4-l { margin-top: -2rem; } .nt5-l { margin-top: -4rem; } .nt6-l { margin-top: -8rem; } .nt7-l { margin-top: -16rem; } .strike-l { text-decoration: line-through; } .underline-l { text-decoration: underline; } .no-underline-l { text-decoration: none; } .tl-l { text-align: left; } .tr-l { text-align: right; } .tc-l { text-align: center; } .tj-l { text-align: justify; } .ttc-l { text-transform: capitalize; } .ttl-l { text-transform: lowercase; } .ttu-l { text-transform: uppercase; } .ttn-l { text-transform: none; } .f0-l { font-size: 6rem; } .f1-l { font-size: 4rem; } .f2-l { font-size: 3rem; } .f3-l { font-size: 2rem; } .f4-l { font-size: 1.5rem; } .f5-l { font-size: 1rem; } .f6-l { font-size: .875rem; } .f7-l { font-size: .75rem; } .measure-l { max-width: 30em; } .measure-wide-l { max-width: 34em; } .measure-narrow-l { max-width: 20em; } .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-l { font-variant: small-caps; } .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-l { margin-right: auto; margin-left: auto; } .clip-l { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); } .ws-normal-l { white-space: normal; } .ws-nowrap-l { white-space: nowrap; } .ws-pre-l { white-space: pre; } .v-base-l { vertical-align: baseline; } .v-mid-l { vertical-align: middle; } .v-top-l { vertical-align: top; } .v-btm-l { vertical-align: bottom; } }