UNPKG

vtex-tachyons

Version:
1,057 lines (1,029 loc) 236 kB
/* TACHYONS v0.0.1 | https://github.com/tachyons-css/tachyons */ /* * * ________ ______ * ___ __/_____ _________ /______ ______________________ * __ / _ __ / ___/_ __ _ / / / __ _ __ _ ___/ * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) * /_/ __,_/ ___/ /_/ /_/___, / ____//_/ /_//____/ * /____/ * * 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 v7.0.0 | MIT License | github.com/necolas/normalize.css */ .onda-v3 html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .onda-v3 body { margin: 0; } .onda-v3 article, .onda-v3 aside, .onda-v3 footer, .onda-v3 header, .onda-v3 nav, .onda-v3 section { display: block; } .onda-v3 h1 { font-size: 2em; margin: .67em 0; } .onda-v3 figcaption, .onda-v3 figure, .onda-v3 main { display: block; } .onda-v3 figure { margin: 1em 40px; } .onda-v3 hr { box-sizing: content-box; height: 0; overflow: visible; } .onda-v3 pre { font-family: monospace, monospace; font-size: 1em; } .onda-v3 a { background-color: transparent; -webkit-text-decoration-skip: objects; } .onda-v3 abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } .onda-v3 b, .onda-v3 strong { font-weight: inherit; } .onda-v3 b, .onda-v3 strong { font-weight: bolder; } .onda-v3 code, .onda-v3 kbd, .onda-v3 samp { font-family: monospace, monospace; font-size: 1em; } .onda-v3 dfn { font-style: italic; } .onda-v3 mark { background-color: #ff0; color: #000; } .onda-v3 small { font-size: 80%; } .onda-v3 sub, .onda-v3 sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .onda-v3 sub { bottom: -0.25em; } .onda-v3 sup { top: -0.5em; } .onda-v3 audio, .onda-v3 video { display: inline-block; } .onda-v3 audio:not([controls]) { display: none; height: 0; } .onda-v3 img { border-style: none; } .onda-v3 svg:not(:root) { overflow: hidden; } .onda-v3 button, .onda-v3 input, .onda-v3 optgroup, .onda-v3 select, .onda-v3 textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } .onda-v3 button, .onda-v3 input { overflow: visible; } .onda-v3 button, .onda-v3 select { text-transform: none; } .onda-v3 button, .onda-v3 html [type="button"], .onda-v3 [type="reset"], .onda-v3 [type="submit"] { -webkit-appearance: button; } .onda-v3 button::-moz-focus-inner, .onda-v3 [type="button"]::-moz-focus-inner, .onda-v3 [type="reset"]::-moz-focus-inner, .onda-v3 [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } .onda-v3 button:-moz-focusring, .onda-v3 [type="button"]:-moz-focusring, .onda-v3 [type="reset"]:-moz-focusring, .onda-v3 [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } .onda-v3 fieldset { padding: .35em .75em .625em; } .onda-v3 legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } .onda-v3 progress { display: inline-block; vertical-align: baseline; } .onda-v3 textarea { overflow: auto; } .onda-v3 [type="checkbox"], .onda-v3 [type="radio"] { box-sizing: border-box; padding: 0; } .onda-v3 [type="number"]::-webkit-inner-spin-button, .onda-v3 [type="number"]::-webkit-outer-spin-button { height: auto; } .onda-v3 [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } .onda-v3 [type="search"]::-webkit-search-cancel-button, .onda-v3 [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .onda-v3 ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } .onda-v3 details, .onda-v3 menu { display: block; } .onda-v3 summary { display: list-item; } .onda-v3 canvas { display: inline-block; } .onda-v3 template { display: none; } .onda-v3 [hidden] { display: none; } .onda-v3 .aspect-ratio { height: 0; position: relative; } .onda-v3 .aspect-ratio--16x9 { padding-bottom: 56.25%; } .onda-v3 .aspect-ratio--9x16 { padding-bottom: 177.77%; } .onda-v3 .aspect-ratio--4x3 { padding-bottom: 75%; } .onda-v3 .aspect-ratio--3x4 { padding-bottom: 133.33%; } .onda-v3 .aspect-ratio--6x4 { padding-bottom: 66.6%; } .onda-v3 .aspect-ratio--4x6 { padding-bottom: 150%; } .onda-v3 .aspect-ratio--8x5 { padding-bottom: 62.5%; } .onda-v3 .aspect-ratio--5x8 { padding-bottom: 160%; } .onda-v3 .aspect-ratio--7x5 { padding-bottom: 71.42%; } .onda-v3 .aspect-ratio--5x7 { padding-bottom: 140%; } .onda-v3 .aspect-ratio--1x1 { padding-bottom: 100%; } .onda-v3 .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .onda-v3 .bg-rebel-pink { background-color: #f71963; } .onda-v3 .bg-heavy-rebel-pink { background-color: #dd1659; } .onda-v3 .bg-elite-purple { background-color: #8914cc; } .onda-v3 .bg-near-black { background-color: #3f3f40; } .onda-v3 .bg-dark-gray { background-color: #585959; } .onda-v3 .bg-mid-gray { background-color: #727273; } .onda-v3 .bg-gray { background-color: #979899; } .onda-v3 .bg-silver { background-color: #cacbcc; } .onda-v3 .bg-light-gray { background-color: #e3e4e6; } .onda-v3 .bg-light-silver { background-color: #f2f4f5; } .onda-v3 .bg-near-white { background-color: #f7f9fa; } .onda-v3 .bg-white { background-color: #fff; } .onda-v3 .bg-washed-blue { background-color: #edf4fa; } .onda-v3 .bg-light-blue { background-color: #cce8ff; } .onda-v3 .bg-blue { background-color: #368df7; } .onda-v3 .bg-heavy-blue { background-color: #2a6dbf; } .onda-v3 .bg-light-marine { background-color: #3d5980; } .onda-v3 .bg-marine { background-color: #25354d; } .onda-v3 .bg-serious-black { background-color: #142032; } .onda-v3 .bg-green { background-color: #8bc34a; } .onda-v3 .bg-washed-green { background-color: #eafce3; } .onda-v3 .bg-red { background-color: #ff4c4c; } .onda-v3 .bg-washed-red { background-color: #ffe6e6; } .onda-v3 .bg-yellow { background-color: #ffb100; } .onda-v3 .bg-washed-yellow { background-color: #fff6e0; } .onda-v3 .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } .onda-v3 .bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); } .onda-v3 .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } .onda-v3 .bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); } .onda-v3 .bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); } .onda-v3 .bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } .onda-v3 .bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); } .onda-v3 .bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } .onda-v3 .bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } .onda-v3 .bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } .onda-v3 .bg-black-025 { background-color: rgba( 0, 0, 0, .025 ); } .onda-v3 .bg-black-0125 { background-color: rgba( 0, 0, 0, .0125 ); } .onda-v3 .bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } .onda-v3 .bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); } .onda-v3 .bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } .onda-v3 .bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); } .onda-v3 .bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); } .onda-v3 .bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } .onda-v3 .bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); } .onda-v3 .bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } .onda-v3 .bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } .onda-v3 .bg-white-05 { background-color: rgba( 255, 255, 255, .05 ); } .onda-v3 .bg-white-025 { background-color: rgba( 255, 255, 255, .025 ); } .onda-v3 .bg-white-0125 { background-color: rgba( 255, 255, 255, .0125 ); } .onda-v3 .bg-transparent { background-color: transparent; } .onda-v3 .bg-base { background-color: #fff; } .onda-v3 .bg-base--inverted { background-color: #3f3f40; } .onda-v3 .bg-action-primary { background-color: #134cd8; } .onda-v3 .bg-action-secondary { background-color: #eef3f7; } .onda-v3 .bg-emphasis { background-color: #f71963; } .onda-v3 .bg-disabled { background-color: #f2f4f5; } .onda-v3 .bg-success { background-color: #8bc34a; } .onda-v3 .bg-success--faded { background-color: #eafce3; } .onda-v3 .bg-danger { background-color: #ff4c4c; } .onda-v3 .bg-danger--faded { background-color: #ffe6e6; } .onda-v3 .bg-warning { background-color: #ffb100; } .onda-v3 .bg-warning--faded { background-color: #fff6e0; } .onda-v3 .bg-muted-1 { background-color: #727273; } .onda-v3 .bg-muted-2 { background-color: #979899; } .onda-v3 .bg-muted-3 { background-color: #cacbcc; } .onda-v3 .bg-muted-4 { background-color: #e3e4e6; } .onda-v3 .bg-muted-5 { background-color: #f2f4f5; } .onda-v3 .bg-transparent { background-color: transparent; } .onda-v3 .cover { background-size: cover !important; } .onda-v3 .contain { background-size: contain !important; } .onda-v3 .bg-center { background-repeat: no-repeat; background-position: center center; } .onda-v3 .bg-top { background-repeat: no-repeat; background-position: top center; } .onda-v3 .bg-right { background-repeat: no-repeat; background-position: center right; } .onda-v3 .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } .onda-v3 .bg-left { background-repeat: no-repeat; background-position: center left; } .onda-v3 .ba { border-style: solid; border-width: 1px; } .onda-v3 .bt { border-top-style: solid; border-top-width: 1px; } .onda-v3 .br { border-right-style: solid; border-right-width: 1px; } .onda-v3 .bb { border-bottom-style: solid; border-bottom-width: 1px; } .onda-v3 .bl { border-left-style: solid; border-left-width: 1px; } .onda-v3 .bn { border-style: none; border-width: 0; } .onda-v3 .b--rebel-pink { border-color: #f71963; } .onda-v3 .b--heavy-rebel-pink { border-color: #dd1659; } .onda-v3 .b--elite-purple { border-color: #8914cc; } .onda-v3 .b--near-black { border-color: #3f3f40; } .onda-v3 .b--dark-gray { border-color: #585959; } .onda-v3 .b--mid-gray { border-color: #727273; } .onda-v3 .b--gray { border-color: #979899; } .onda-v3 .b--silver { border-color: #cacbcc; } .onda-v3 .b--light-gray { border-color: #e3e4e6; } .onda-v3 .b--light-silver { border-color: #f2f4f5; } .onda-v3 .b--near-white { border-color: #f7f9fa; } .onda-v3 .b--white { border-color: #fff; } .onda-v3 .b--washed-blue { border-color: #edf4fa; } .onda-v3 .b--light-blue { border-color: #cce8ff; } .onda-v3 .b--blue { border-color: #368df7; } .onda-v3 .b--heavy-blue { border-color: #2a6dbf; } .onda-v3 .b--light-marine { border-color: #3d5980; } .onda-v3 .b--marine { border-color: #25354d; } .onda-v3 .b--serious-black { border-color: #142032; } .onda-v3 .b--green { border-color: #8bc34a; } .onda-v3 .b--washed-green { border-color: #eafce3; } .onda-v3 .b--red { border-color: #ff4c4c; } .onda-v3 .b--washed-red { border-color: #ffe6e6; } .onda-v3 .b--yellow { border-color: #ffb100; } .onda-v3 .b--washed-yellow { border-color: #fff6e0; } .onda-v3 .b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } .onda-v3 .b--black-80 { border-color: rgba( 0, 0, 0, .8 ); } .onda-v3 .b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } .onda-v3 .b--black-60 { border-color: rgba( 0, 0, 0, .6 ); } .onda-v3 .b--black-50 { border-color: rgba( 0, 0, 0, .5 ); } .onda-v3 .b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } .onda-v3 .b--black-30 { border-color: rgba( 0, 0, 0, .3 ); } .onda-v3 .b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } .onda-v3 .b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } .onda-v3 .b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } .onda-v3 .b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } .onda-v3 .b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } .onda-v3 .b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } .onda-v3 .b--white-80 { border-color: rgba( 255, 255, 255, .8 ); } .onda-v3 .b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } .onda-v3 .b--white-60 { border-color: rgba( 255, 255, 255, .6 ); } .onda-v3 .b--white-50 { border-color: rgba( 255, 255, 255, .5 ); } .onda-v3 .b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } .onda-v3 .b--white-30 { border-color: rgba( 255, 255, 255, .3 ); } .onda-v3 .b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } .onda-v3 .b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } .onda-v3 .b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } .onda-v3 .b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } .onda-v3 .b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } .onda-v3 .b--transparent { border-color: transparent; } .onda-v3 .b--action-primary { border-color: #134cd8; } .onda-v3 .b--action-secondary { border-color: #eef3f7; } .onda-v3 .b--emphasis { border-color: #f71963; } .onda-v3 .b--disabled { border-color: #e3e4e6; } .onda-v3 .b--success { border-color: #79b03a; } .onda-v3 .b--success--faded { border-color: #eafce3; } .onda-v3 .b--danger { border-color: #ff4c4c; } .onda-v3 .b--danger--faded { border-color: #ffe6e6; } .onda-v3 .b--warning { border-color: #ffb100; } .onda-v3 .b--warning--faded { border-color: #fff6e0; } .onda-v3 .b--muted-1 { border-color: #727273; } .onda-v3 .b--muted-2 { border-color: #979899; } .onda-v3 .b--muted-3 { border-color: #cacbcc; } .onda-v3 .b--muted-4 { border-color: #e3e4e6; } .onda-v3 .b--muted-5 { border-color: #f2f4f5; } .onda-v3 .b--transparent { border-color: transparent; } /* 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 = 20em -ns = 40em -m = 40em -l = 64em -xl = 80em */ .onda-v3 .br0 { border-radius: 0; } .onda-v3 .br1 { border-radius: .125rem; } .onda-v3 .br2 { border-radius: .25rem; } .onda-v3 .br3 { border-radius: .5rem; } .onda-v3 .br4 { border-radius: 1rem; } .onda-v3 .br-100 { border-radius: 100%; } .onda-v3 .br-pill { border-radius: 9999px; } .onda-v3 .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .onda-v3 .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .onda-v3 .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .onda-v3 .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } .onda-v3 .b--dotted { border-style: dotted; } .onda-v3 .b--dashed { border-style: dashed; } .onda-v3 .b--solid { border-style: solid; } .onda-v3 .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 = 20em -ns = 40em -m = 40em -l = 64em -xl = 80em */ .onda-v3 .bw0 { border-width: 0; } .onda-v3 .bw1 { border-width: .125rem; } .onda-v3 .bw2 { border-width: .25rem; } .onda-v3 .bw3 { border-width: .5rem; } .onda-v3 .bw4 { border-width: 1rem; } .onda-v3 .bw5 { border-width: 2rem; } .onda-v3 .bt-0 { border-top-width: 0; } .onda-v3 .br-0 { border-right-width: 0; } .onda-v3 .bb-0 { border-bottom-width: 0; } .onda-v3 .bl-0 { border-left-width: 0; } .onda-v3 .shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .onda-v3 .shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .onda-v3 .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .onda-v3 .shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .onda-v3 .shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } .onda-v3 html, .onda-v3 body, .onda-v3 div, .onda-v3 article, .onda-v3 aside, .onda-v3 section, .onda-v3 main, .onda-v3 nav, .onda-v3 footer, .onda-v3 header, .onda-v3 form, .onda-v3 fieldset, .onda-v3 legend, .onda-v3 pre, .onda-v3 code, .onda-v3 a, .onda-v3 h1, .onda-v3 h2, .onda-v3 h3, .onda-v3 h4, .onda-v3 h5, .onda-v3 h6, .onda-v3 p, .onda-v3 ul, .onda-v3 ol, .onda-v3 li, .onda-v3 dl, .onda-v3 dt, .onda-v3 dd, .onda-v3 blockquote, .onda-v3 figcaption, .onda-v3 figure, .onda-v3 textarea, .onda-v3 table, .onda-v3 td, .onda-v3 th, .onda-v3 tr, .onda-v3 input[type="email"], .onda-v3 input[type="number"], .onda-v3 input[type="password"], .onda-v3 input[type="tel"], .onda-v3 input[type="text"], .onda-v3 input[type="url"], .onda-v3 .border-box { box-sizing: border-box; } .onda-v3 .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } /* SPACING Docs: http://tachyons.io/docs/layout/spacing/ An eight step powers of two scale ranging from 0 to 16rem. Base: p = padding m = margin Modifiers: a = all h = horizontal v = vertical t = top r = right b = bottom l = left 0 = 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 8 = 8th step in spacing scale 9 = 9th step in spacing scale 10 = 10th step in spacing scale 11 = 11st step in spacing scale Media Query Extensions: -s = 20em -ns = 40em -m = 40em -l = 64em -xl = 80em */ .onda-v3 .pa0 { padding: 0; } .onda-v3 .ma0 { margin: 0; } .onda-v3 .na0 { margin: 0; } .onda-v3 .pl0 { padding-left: 0; } .onda-v3 .ml0 { margin-left: 0; } .onda-v3 .nl0 { margin-left: 0; } .onda-v3 .pr0 { padding-right: 0; } .onda-v3 .mr0 { margin-right: 0; } .onda-v3 .nr0 { margin-right: 0; } .onda-v3 .pt0 { padding-top: 0; } .onda-v3 .mt0 { margin-top: 0; } .onda-v3 .nt0 { margin-top: 0; } .onda-v3 .pb0 { padding-bottom: 0; } .onda-v3 .mb0 { margin-bottom: 0; } .onda-v3 .nb0 { margin-bottom: 0; } .onda-v3 .pv0 { padding-top: 0; padding-bottom: 0; } .onda-v3 .mv0 { margin-top: 0; margin-bottom: 0; } .onda-v3 .nv0 { margin-top: 0; margin-bottom: 0; } .onda-v3 .ph0 { padding-left: 0; padding-right: 0; } .onda-v3 .mh0 { margin-left: 0; margin-right: 0; } .onda-v3 .nh0 { margin-left: 0; margin-right: 0; } .onda-v3 .pa1 { padding: .125rem; } .onda-v3 .ma1 { margin: .125rem; } .onda-v3 .na1 { margin: -0.125rem; } .onda-v3 .pl1 { padding-left: .125rem; } .onda-v3 .ml1 { margin-left: .125rem; } .onda-v3 .nl1 { margin-left: -0.125rem; } .onda-v3 .pr1 { padding-right: .125rem; } .onda-v3 .mr1 { margin-right: .125rem; } .onda-v3 .nr1 { margin-right: -0.125rem; } .onda-v3 .pt1 { padding-top: .125rem; } .onda-v3 .mt1 { margin-top: .125rem; } .onda-v3 .nt1 { margin-top: -0.125rem; } .onda-v3 .pb1 { padding-bottom: .125rem; } .onda-v3 .mb1 { margin-bottom: .125rem; } .onda-v3 .nb1 { margin-bottom: -0.125rem; } .onda-v3 .pv1 { padding-top: .125rem; padding-bottom: .125rem; } .onda-v3 .mv1 { margin-top: .125rem; margin-bottom: .125rem; } .onda-v3 .nv1 { margin-top: -0.125rem; margin-bottom: -0.125rem; } .onda-v3 .ph1 { padding-left: .125rem; padding-right: .125rem; } .onda-v3 .mh1 { margin-left: .125rem; margin-right: .125rem; } .onda-v3 .nh1 { margin-left: -0.125rem; margin-right: -0.125rem; } .onda-v3 .pa2 { padding: .25rem; } .onda-v3 .ma2 { margin: .25rem; } .onda-v3 .na2 { margin: -0.25rem; } .onda-v3 .pl2 { padding-left: .25rem; } .onda-v3 .ml2 { margin-left: .25rem; } .onda-v3 .nl2 { margin-left: -0.25rem; } .onda-v3 .pr2 { padding-right: .25rem; } .onda-v3 .mr2 { margin-right: .25rem; } .onda-v3 .nr2 { margin-right: -0.25rem; } .onda-v3 .pt2 { padding-top: .25rem; } .onda-v3 .mt2 { margin-top: .25rem; } .onda-v3 .nt2 { margin-top: -0.25rem; } .onda-v3 .pb2 { padding-bottom: .25rem; } .onda-v3 .mb2 { margin-bottom: .25rem; } .onda-v3 .nb2 { margin-bottom: -0.25rem; } .onda-v3 .pv2 { padding-top: .25rem; padding-bottom: .25rem; } .onda-v3 .mv2 { margin-top: .25rem; margin-bottom: .25rem; } .onda-v3 .nv2 { margin-top: -0.25rem; margin-bottom: -0.25rem; } .onda-v3 .ph2 { padding-left: .25rem; padding-right: .25rem; } .onda-v3 .mh2 { margin-left: .25rem; margin-right: .25rem; } .onda-v3 .nh2 { margin-left: -0.25rem; margin-right: -0.25rem; } .onda-v3 .pa3 { padding: .5rem; } .onda-v3 .ma3 { margin: .5rem; } .onda-v3 .na3 { margin: -0.5rem; } .onda-v3 .pl3 { padding-left: .5rem; } .onda-v3 .ml3 { margin-left: .5rem; } .onda-v3 .nl3 { margin-left: -0.5rem; } .onda-v3 .pr3 { padding-right: .5rem; } .onda-v3 .mr3 { margin-right: .5rem; } .onda-v3 .nr3 { margin-right: -0.5rem; } .onda-v3 .pt3 { padding-top: .5rem; } .onda-v3 .mt3 { margin-top: .5rem; } .onda-v3 .nt3 { margin-top: -0.5rem; } .onda-v3 .pb3 { padding-bottom: .5rem; } .onda-v3 .mb3 { margin-bottom: .5rem; } .onda-v3 .nb3 { margin-bottom: -0.5rem; } .onda-v3 .pv3 { padding-top: .5rem; padding-bottom: .5rem; } .onda-v3 .mv3 { margin-top: .5rem; margin-bottom: .5rem; } .onda-v3 .nv3 { margin-top: -0.5rem; margin-bottom: -0.5rem; } .onda-v3 .ph3 { padding-left: .5rem; padding-right: .5rem; } .onda-v3 .mh3 { margin-left: .5rem; margin-right: .5rem; } .onda-v3 .nh3 { margin-left: -0.5rem; margin-right: -0.5rem; } .onda-v3 .pa4 { padding: .75rem; } .onda-v3 .ma4 { margin: .75rem; } .onda-v3 .na4 { margin: -0.75rem; } .onda-v3 .pl4 { padding-left: .75rem; } .onda-v3 .ml4 { margin-left: .75rem; } .onda-v3 .nl4 { margin-left: -0.75rem; } .onda-v3 .pr4 { padding-right: .75rem; } .onda-v3 .mr4 { margin-right: .75rem; } .onda-v3 .nr4 { margin-right: -0.75rem; } .onda-v3 .pt4 { padding-top: .75rem; } .onda-v3 .mt4 { margin-top: .75rem; } .onda-v3 .nt4 { margin-top: -0.75rem; } .onda-v3 .pb4 { padding-bottom: .75rem; } .onda-v3 .mb4 { margin-bottom: .75rem; } .onda-v3 .nb4 { margin-bottom: -0.75rem; } .onda-v3 .pv4 { padding-top: .75rem; padding-bottom: .75rem; } .onda-v3 .mv4 { margin-top: .75rem; margin-bottom: .75rem; } .onda-v3 .nv4 { margin-top: -0.75rem; margin-bottom: -0.75rem; } .onda-v3 .ph4 { padding-left: .75rem; padding-right: .75rem; } .onda-v3 .mh4 { margin-left: .75rem; margin-right: .75rem; } .onda-v3 .nh4 { margin-left: -0.75rem; margin-right: -0.75rem; } .onda-v3 .pa5 { padding: 1rem; } .onda-v3 .ma5 { margin: 1rem; } .onda-v3 .na5 { margin: -1rem; } .onda-v3 .pl5 { padding-left: 1rem; } .onda-v3 .ml5 { margin-left: 1rem; } .onda-v3 .nl5 { margin-left: -1rem; } .onda-v3 .pr5 { padding-right: 1rem; } .onda-v3 .mr5 { margin-right: 1rem; } .onda-v3 .nr5 { margin-right: -1rem; } .onda-v3 .pt5 { padding-top: 1rem; } .onda-v3 .mt5 { margin-top: 1rem; } .onda-v3 .nt5 { margin-top: -1rem; } .onda-v3 .pb5 { padding-bottom: 1rem; } .onda-v3 .mb5 { margin-bottom: 1rem; } .onda-v3 .nb5 { margin-bottom: -1rem; } .onda-v3 .pv5 { padding-top: 1rem; padding-bottom: 1rem; } .onda-v3 .mv5 { margin-top: 1rem; margin-bottom: 1rem; } .onda-v3 .nv5 { margin-top: -1rem; margin-bottom: -1rem; } .onda-v3 .ph5 { padding-left: 1rem; padding-right: 1rem; } .onda-v3 .mh5 { margin-left: 1rem; margin-right: 1rem; } .onda-v3 .nh5 { margin-left: -1rem; margin-right: -1rem; } .onda-v3 .pa6 { padding: 1.5rem; } .onda-v3 .ma6 { margin: 1.5rem; } .onda-v3 .na6 { margin: -1.5rem; } .onda-v3 .pl6 { padding-left: 1.5rem; } .onda-v3 .ml6 { margin-left: 1.5rem; } .onda-v3 .nl6 { margin-left: -1.5rem; } .onda-v3 .pr6 { padding-right: 1.5rem; } .onda-v3 .mr6 { margin-right: 1.5rem; } .onda-v3 .nr6 { margin-right: -1.5rem; } .onda-v3 .pt6 { padding-top: 1.5rem; } .onda-v3 .mt6 { margin-top: 1.5rem; } .onda-v3 .nt6 { margin-top: -1.5rem; } .onda-v3 .pb6 { padding-bottom: 1.5rem; } .onda-v3 .mb6 { margin-bottom: 1.5rem; } .onda-v3 .nb6 { margin-bottom: -1.5rem; } .onda-v3 .pv6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .onda-v3 .mv6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .onda-v3 .nv6 { margin-top: -1.5rem; margin-bottom: -1.5rem; } .onda-v3 .ph6 { padding-left: 1.5rem; padding-right: 1.5rem; } .onda-v3 .mh6 { margin-left: 1.5rem; margin-right: 1.5rem; } .onda-v3 .nh6 { margin-left: -1.5rem; margin-right: -1.5rem; } .onda-v3 .pa7 { padding: 2rem; } .onda-v3 .ma7 { margin: 2rem; } .onda-v3 .na7 { margin: -2rem; } .onda-v3 .pl7 { padding-left: 2rem; } .onda-v3 .ml7 { margin-left: 2rem; } .onda-v3 .nl7 { margin-left: -2rem; } .onda-v3 .pr7 { padding-right: 2rem; } .onda-v3 .mr7 { margin-right: 2rem; } .onda-v3 .nr7 { margin-right: -2rem; } .onda-v3 .pt7 { padding-top: 2rem; } .onda-v3 .mt7 { margin-top: 2rem; } .onda-v3 .nt7 { margin-top: -2rem; } .onda-v3 .pb7 { padding-bottom: 2rem; } .onda-v3 .mb7 { margin-bottom: 2rem; } .onda-v3 .nb7 { margin-bottom: -2rem; } .onda-v3 .pv7 { padding-top: 2rem; padding-bottom: 2rem; } .onda-v3 .mv7 { margin-top: 2rem; margin-bottom: 2rem; } .onda-v3 .nv7 { margin-top: -2rem; margin-bottom: -2rem; } .onda-v3 .ph7 { padding-left: 2rem; padding-right: 2rem; } .onda-v3 .mh7 { margin-left: 2rem; margin-right: 2rem; } .onda-v3 .nh7 { margin-left: -2rem; margin-right: -2rem; } .onda-v3 .pa8 { padding: 3rem; } .onda-v3 .ma8 { margin: 3rem; } .onda-v3 .na8 { margin: -3rem; } .onda-v3 .pl8 { padding-left: 3rem; } .onda-v3 .ml8 { margin-left: 3rem; } .onda-v3 .nl8 { margin-left: -3rem; } .onda-v3 .pr8 { padding-right: 3rem; } .onda-v3 .mr8 { margin-right: 3rem; } .onda-v3 .nr8 { margin-right: -3rem; } .onda-v3 .pt8 { padding-top: 3rem; } .onda-v3 .mt8 { margin-top: 3rem; } .onda-v3 .nt8 { margin-top: -3rem; } .onda-v3 .pb8 { padding-bottom: 3rem; } .onda-v3 .mb8 { margin-bottom: 3rem; } .onda-v3 .nb8 { margin-bottom: -3rem; } .onda-v3 .pv8 { padding-top: 3rem; padding-bottom: 3rem; } .onda-v3 .mv8 { margin-top: 3rem; margin-bottom: 3rem; } .onda-v3 .nv8 { margin-top: -3rem; margin-bottom: -3rem; } .onda-v3 .ph8 { padding-left: 3rem; padding-right: 3rem; } .onda-v3 .mh8 { margin-left: 3rem; margin-right: 3rem; } .onda-v3 .nh8 { margin-left: -3rem; margin-right: -3rem; } .onda-v3 .pa9 { padding: 4rem; } .onda-v3 .ma9 { margin: 4rem; } .onda-v3 .na9 { margin: -4rem; } .onda-v3 .pl9 { padding-left: 4rem; } .onda-v3 .ml9 { margin-left: 4rem; } .onda-v3 .nl9 { margin-left: -4rem; } .onda-v3 .pr9 { padding-right: 4rem; } .onda-v3 .mr9 { margin-right: 4rem; } .onda-v3 .nr9 { margin-right: -4rem; } .onda-v3 .pt9 { padding-top: 4rem; } .onda-v3 .mt9 { margin-top: 4rem; } .onda-v3 .nt9 { margin-top: -4rem; } .onda-v3 .pb9 { padding-bottom: 4rem; } .onda-v3 .mb9 { margin-bottom: 4rem; } .onda-v3 .nb9 { margin-bottom: -4rem; } .onda-v3 .pv9 { padding-top: 4rem; padding-bottom: 4rem; } .onda-v3 .mv9 { margin-top: 4rem; margin-bottom: 4rem; } .onda-v3 .nv9 { margin-top: -4rem; margin-bottom: -4rem; } .onda-v3 .ph9 { padding-left: 4rem; padding-right: 4rem; } .onda-v3 .mh9 { margin-left: 4rem; margin-right: 4rem; } .onda-v3 .nh9 { margin-left: -4rem; margin-right: -4rem; } .onda-v3 .pa10 { padding: 8rem; } .onda-v3 .ma10 { margin: 8rem; } .onda-v3 .na10 { margin: -8rem; } .onda-v3 .pl10 { padding-left: 8rem; } .onda-v3 .ml10 { margin-left: 8rem; } .onda-v3 .nl10 { margin-left: -8rem; } .onda-v3 .pr10 { padding-right: 8rem; } .onda-v3 .mr10 { margin-right: 8rem; } .onda-v3 .nr10 { margin-right: -8rem; } .onda-v3 .pt10 { padding-top: 8rem; } .onda-v3 .mt10 { margin-top: 8rem; } .onda-v3 .nt10 { margin-top: -8rem; } .onda-v3 .pb10 { padding-bottom: 8rem; } .onda-v3 .mb10 { margin-bottom: 8rem; } .onda-v3 .nb10 { margin-bottom: -8rem; } .onda-v3 .pv10 { padding-top: 8rem; padding-bottom: 8rem; } .onda-v3 .mv10 { margin-top: 8rem; margin-bottom: 8rem; } .onda-v3 .nv10 { margin-top: -8rem; margin-bottom: -8rem; } .onda-v3 .ph10 { padding-left: 8rem; padding-right: 8rem; } .onda-v3 .mh10 { margin-left: 8rem; margin-right: 8rem; } .onda-v3 .nh10 { margin-left: -8rem; margin-right: -8rem; } .onda-v3 .pa11 { padding: 16rem; } .onda-v3 .ma11 { margin: 16rem; } .onda-v3 .na11 { margin: -16rem; } .onda-v3 .pl11 { padding-left: 16rem; } .onda-v3 .ml11 { margin-left: 16rem; } .onda-v3 .nl11 { margin-left: -16rem; } .onda-v3 .pr11 { padding-right: 16rem; } .onda-v3 .mr11 { margin-right: 16rem; } .onda-v3 .nr11 { margin-right: -16rem; } .onda-v3 .pt11 { padding-top: 16rem; } .onda-v3 .mt11 { margin-top: 16rem; } .onda-v3 .nt11 { margin-top: -16rem; } .onda-v3 .pb11 { padding-bottom: 16rem; } .onda-v3 .mb11 { margin-bottom: 16rem; } .onda-v3 .nb11 { margin-bottom: -16rem; } .onda-v3 .pv11 { padding-top: 16rem; padding-bottom: 16rem; } .onda-v3 .mv11 { margin-top: 16rem; margin-bottom: 16rem; } .onda-v3 .nv11 { margin-top: -16rem; margin-bottom: -16rem; } .onda-v3 .ph11 { padding-left: 16rem; padding-right: 16rem; } .onda-v3 .mh11 { margin-left: 16rem; margin-right: 16rem; } .onda-v3 .nh11 { margin-left: -16rem; margin-right: -16rem; } .onda-v3 .top-0 { top: 0; } .onda-v3 .right-0 { right: 0; } .onda-v3 .bottom-0 { bottom: 0; } .onda-v3 .left-0 { left: 0; } .onda-v3 .top-1 { top: 1rem; } .onda-v3 .right-1 { right: 1rem; } .onda-v3 .bottom-1 { bottom: 1rem; } .onda-v3 .left-1 { left: 1rem; } .onda-v3 .top-2 { top: 2rem; } .onda-v3 .right-2 { right: 2rem; } .onda-v3 .bottom-2 { bottom: 2rem; } .onda-v3 .left-2 { left: 2rem; } .onda-v3 .top--1 { top: -1rem; } .onda-v3 .right--1 { right: -1rem; } .onda-v3 .bottom--1 { bottom: -1rem; } .onda-v3 .left--1 { left: -1rem; } .onda-v3 .top--2 { top: -2rem; } .onda-v3 .right--2 { right: -2rem; } .onda-v3 .bottom--2 { bottom: -2rem; } .onda-v3 .left--2 { left: -2rem; } .onda-v3 .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } .onda-v3 .cf:before, .onda-v3 .cf:after { content: " "; display: table; } .onda-v3 .cf:after { clear: both; } .onda-v3 .cf { *zoom: 1; } .onda-v3 .cl { clear: left; } .onda-v3 .cr { clear: right; } .onda-v3 .cb { clear: both; } .onda-v3 .cn { clear: none; } .onda-v3 .dn { display: none; } .onda-v3 .di { display: inline; } .onda-v3 .db { display: block; } .onda-v3 .dib { display: inline-block; } .onda-v3 .dit { display: inline-table; } .onda-v3 .dt { display: table; } .onda-v3 .dtc { display: table-cell; } .onda-v3 .dt-row { display: table-row; } .onda-v3 .dt-row-group { display: table-row-group; } .onda-v3 .dt-column { display: table-column; } .onda-v3 .dt-column-group { display: table-column-group; } .onda-v3 .dt--fixed { table-layout: fixed; width: 100%; } .onda-v3 .flex { display: flex; } .onda-v3 .inline-flex { display: inline-flex; } .onda-v3 .flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0; } .onda-v3 .flex-none { flex: none; } .onda-v3 .flex-column { flex-direction: column; } .onda-v3 .flex-row { flex-direction: row; } .onda-v3 .flex-wrap { flex-wrap: wrap; } .onda-v3 .flex-nowrap { flex-wrap: nowrap; } .onda-v3 .flex-wrap-reverse { flex-wrap: wrap-reverse; } .onda-v3 .flex-column-reverse { flex-direction: column-reverse; } .onda-v3 .flex-row-reverse { flex-direction: row-reverse; } .onda-v3 .items-start { align-items: flex-start; } .onda-v3 .items-end { align-items: flex-end; } .onda-v3 .items-center { align-items: center; } .onda-v3 .items-baseline { align-items: baseline; } .onda-v3 .items-stretch { align-items: stretch; } .onda-v3 .self-start { align-self: flex-start; } .onda-v3 .self-end { align-self: flex-end; } .onda-v3 .self-center { align-self: center; } .onda-v3 .self-baseline { align-self: baseline; } .onda-v3 .self-stretch { align-self: stretch; } .onda-v3 .justify-start { justify-content: flex-start; } .onda-v3 .justify-end { justify-content: flex-end; } .onda-v3 .justify-center { justify-content: center; } .onda-v3 .justify-between { justify-content: space-between; } .onda-v3 .justify-around { justify-content: space-around; } .onda-v3 .content-start { align-content: flex-start; } .onda-v3 .content-end { align-content: flex-end; } .onda-v3 .content-center { align-content: center; } .onda-v3 .content-between { align-content: space-between; } .onda-v3 .content-around { align-content: space-around; } .onda-v3 .content-stretch { align-content: stretch; } .onda-v3 .order-0 { order: 0; } .onda-v3 .order-1 { order: 1; } .onda-v3 .order-2 { order: 2; } .onda-v3 .order-3 { order: 3; } .onda-v3 .order-4 { order: 4; } .onda-v3 .order-5 { order: 5; } .onda-v3 .order-6 { order: 6; } .onda-v3 .order-7 { order: 7; } .onda-v3 .order-8 { order: 8; } .onda-v3 .order-last { order: 99999; } .onda-v3 .flex-grow-0 { flex-grow: 0; } .onda-v3 .flex-grow-1 { flex-grow: 1; } .onda-v3 .flex-shrink-0 { flex-shrink: 0; } .onda-v3 .flex-shrink-1 { flex-shrink: 1; } .onda-v3 .fl { float: left; _display: inline; } .onda-v3 .fr { float: right; _display: inline; } .onda-v3 .fn { float: none; } .onda-v3 body, .onda-v3 button, .onda-v3 input, .onda-v3 optgroup, .onda-v3 select, .onda-v3 textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; } .onda-v3 .sans-serif { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif; } .onda-v3 code, .onda-v3 .code { font-family: Consolas, monaco, monospace; } .onda-v3 .i { font-style: italic; } .onda-v3 .fs-normal { font-style: normal; } .onda-v3 .input-reset { -webkit-appearance: none; -moz-appearance: none; } .onda-v3 .button-reset::-moz-focus-inner, .onda-v3 .input-reset::-moz-focus-inner { border: 0; padding: 0; } .onda-v3 .link { text-decoration: none; transition: color .15s ease-in; } .onda-v3 .link:link, .onda-v3 .link:visited { transition: color .15s ease-in; } .onda-v3 .link:hover { transition: color .15s ease-in; } .onda-v3 .link:active { transition: color .15s ease-in; } .onda-v3 .link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; } .onda-v3 .list { list-style-type: none; } /* 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 = 20em -ns = 40em -m = 40em -l = 64em -xl = 80em */ .onda-v3 .h1 { height: 1rem; } .onda-v3 .h2 { height: 2rem; } .onda-v3 .h3 { height: 4rem; } .onda-v3 .h4 { height: 8rem; } .onda-v3 .h5 { height: 16rem; } .onda-v3 .h-25 { height: 25%; } .onda-v3 .h-50 { height: 50%; } .onda-v3 .h-75 { height: 75%; } .onda-v3 .h-100 { height: 100%; } .onda-v3 .min-h-100 { min-height: 100%; } .onda-v3 .vh-25 { height: 25vh; } .onda-v3 .vh-50 { height: 50vh; } .onda-v3 .vh-75 { height: 75vh; } .onda-v3 .vh-100 { height: 100vh; } .onda-v3 .min-vh-100 { min-height: 100vh; } .onda-v3 .h-auto { height: auto; } .onda-v3 .h-inherit { height: inherit; } /* SIZES Base: h = height min-h = min-height Modifiers -small = 2rem -regular = 2.5rem -large = 3rem Media Query Extensions: -s = 20em -ns = 40em -m = 40em -l = 64em -xl = 80em */ .onda-v3 .h-small { height: 2rem; box-sizing: border-box; } .onda-v3 .min-h-small { min-height: 2rem; box-sizing: border-box; } .onda-v3 .h-regular { height: 2.5rem; box-sizing: border-box; } .onda-v3 .min-h-regular { min-height: 2.5rem; box-sizing: border-box; } .onda-v3 .h-large { height: 3rem; box-sizing: border-box; } .onda-v3 .min-h-large { min-height: 3rem; box-sizing: border-box; } .onda-v3 .rebel-pink { color: #f71963; } .onda-v3 .heavy-rebel-pink { color: #dd1659; } .onda-v3 .elite-purple { color: #8914cc; } .onda-v3 .near-black { color: #3f3f40; } .onda-v3 .dark-gray { color: #585959; } .onda-v3 .mid-gray { color: #727273; } .onda-v3 .gray { color: #979899; } .onda-v3 .silver { color: #cacbcc; } .onda-v3 .light-gray { color: #e3e4e6; } .onda-v3 .light-silver { color: #f2f4f5; } .onda-v3 .near-white { color: #f7f9fa; } .onda-v3 .white { color: #fff; } .onda-v3 .washed-blue { color: #edf4fa; } .onda-v3 .light-blue { color: #cce8ff; } .onda-v3 .blue { color: #368df7; } .onda-v3 .heavy-blue { color: #2a6dbf; } .onda-v3 .light-marine { color: #3d5980; } .onda-v3 .marine { color: #25354d; } .onda-v3 .serious-black { color: #142032; } .onda-v3 .green { color: #8bc34a; } .onda-v3 .washed-green { color: #eafce3; } .onda-v3 .red { color: #ff4c4c; } .onda-v3 .washed-red { color: #ffe6e6; } .onda-v3 .yellow { color: #ffb100; } .onda-v3 .washed-yellow { color: #fff6e0; } .onda-v3 .black-90 { color: rgba( 0, 0, 0, .9 ); } .onda-v3 .black-80 { color: rgba( 0, 0, 0, .8 ); } .onda-v3 .black-70 { color: rgba( 0, 0, 0, .7 ); } .onda-v3 .black-60 { color: rgba( 0, 0, 0, .6 ); } .onda-v3 .black-50 { color: rgba( 0, 0, 0, .5 ); } .onda-v3 .black-40 { color: rgba( 0, 0, 0, .4 ); } .onda-v3 .black-30 { color: rgba( 0, 0, 0, .3 ); } .onda-v3 .black-20 { color: rgba( 0, 0, 0, .2 ); } .onda-v3 .black-10 { color: rgba( 0, 0, 0, .1 ); } .onda-v3 .black-05 { color: rgba( 0, 0, 0, .05 ); } .onda-v3 .black-025 { color: rgba( 0, 0, 0, .025 ); } .onda-v3 .black-0125 { color: rgba( 0, 0, 0, .0125 ); } .onda-v3 .white-90 { color: rgba( 255, 255, 255, .9 ); } .onda-v3 .white-80 { color: rgba( 255, 255, 255, .8 ); } .onda-v3 .white-70 { color: rgba( 255, 255, 255, .7 ); } .onda-v3 .white-60 { color: rgba( 255, 255, 255, .6 ); } .onda-v3 .white-50 { color: rgba( 255, 255, 255, .5 ); } .onda-v3 .white-40 { color: rgba( 255, 255, 255, .4 ); } .onda-v3 .white-30 { color: rgba( 255, 255, 255, .3 ); } .onda-v3 .white-20 { color: rgba( 255, 255, 255, .2 ); } .onda-v3 .white-10 { color: rgba( 255, 255, 255, .1 ); } .onda-v3 .white-05 { color: rgba( 255, 255, 255, .05 ); } .onda-v3 .white-025 { color: rgba( 255, 255, 255, .025 ); } .onda-v3 .white-0125 { color: rgba( 255, 255, 255, .0125 ); } .onda-v3 .c-action-primary { color: #134cd8; } .onda-v3 .c-action-secondary { color: #eef3f7; } .onda-v3 .c-link { color: #134cd8; } .onda-v3 .c-emphasis { color: #f71963; } .onda-v3 .c-disabled { color: #979899; } .onda-v3 .c-success { color: #79b03a; } .onda-v3 .c-success--faded { color: #eafce3; } .onda-v3 .c-danger { color: #ff4c4c; } .onda-v3 .c-danger--faded { color: #ffe6e6; } .onda-v3 .c-warning { color: #e19d00; } .onda-v3 .c-warning--faded { color: #fff6e0; } .onda-v3 .c-muted-1 { color: #727273; } .onda-v3 .c-muted-2 { color: #979899; } .onda-v3 .c-muted-3 { color: #cacbcc; } .onda-v3 .c-muted-4 { color: #e3e4e6; } .onda-v3 .c-muted-5 { color: #f2f4f5; } .onda-v3 .c-on-base { color: #3f3f40; } .onda-v3 .c-on-base--inverted { color: #fff; } .onda-v3 .c-on-action-primary { color: #fff; } .onda-v3 .c-on-action-secondary { color: #134cd8; } .onda-v3 .c-on-emphasis { color: #fff; } .onda-v3 .c-on-disabled { color: #979899; } .onda-v3 .c-on-success { color: #fff; } .onda-v3 .c-on-success--faded { color: #3f3f40; } .onda-v3 .c-on-danger { color: #fff; } .onda-v3 .c-on-danger--faded { color: #3f3f40; } .onda-v3 .c-on-warning { color: #fff; } .onda-v3 .c-on-warning--faded { color: #1a1a1a; } .onda-v3 .c-on-muted-1 { color: #fff; } .onda-v3 .c-on-muted-2 { color: #fff; } .onda-v3 .c-on-muted-3 { color: #3f3f40; } .onda-v3 .c-on-muted-4 { color: #3f3f40; } .onda-v3 .c-on-muted-5 { color: #3f3f40; } .onda-v3 .hover-rebel-pink:focus { color: #f71963; } .onda-v3 .hover-rebel-pink:hover { color: #f71963; } .onda-v3 .hover-heavy-rebel-pink:focus { color: #dd1659; } .onda-v3 .hover-heavy-rebel-pink:hover { color: #dd1659; } .onda-v3 .hover-elite-purple:focus { color: #8914cc; } .onda-v3 .hover-elite-purple:hover { color: #8914cc; } .onda-v3 .hover-near-black:focus { color: #3f3f40; } .onda-v3 .hover-near-black:hover { color: #3f3f40; } .onda-v3 .hover-dark-gray:focus { color: #585959; } .onda-v3 .hover-dark-gray:hover { color: #585959; } .onda-v3 .hover-mid-gray:focus { color: #727273; } .onda-v3 .hover-mid-gray:hover { color: #727273; } .onda-v3 .hover-gray:focus { color: #979899; } .onda-v3 .hover-gray:hover { color: #979899; } .onda-v3 .hover-silver:focus { color: #cacbcc; } .onda-v3 .hover-silver:hover { color: #cacbcc; } .onda-v3 .hover-light-gray:focus { color: #e3e4e6; } .onda-v3 .hover-light-gray:hover { color: #e3e4e6; } .onda-v3 .hover-light-silver:focus { color: #f2f4f5; } .onda-v3 .hover-light-silver:hover { color: #f2f4f5; } .onda-v3 .hover-near-white:focus { color: #f7f9fa; } .onda-v3 .hover-near-white:hover { color: #f7f9fa; } .onda-v3 .hover-white:focus { color: #fff; } .onda-v3 .hover-white:hover { color: #fff; } .onda-v3 .hover-washed-blue:focus { color: #edf4fa; } .onda-v3 .hover-washed-blue:hover { color: #edf4fa; } .onda-v3 .hover-light-blue:focus { color: #cce8ff; } .onda-v3 .hover-light-blue:hover { color: #cce8ff; } .onda-v3 .hover-blue:focus { color: #368df7; } .onda-v3 .hover-blue:hover { color: #368df7; } .onda-v3 .hover-heavy-blue:focus { color: #2a6dbf; } .onda-v3 .hover-heavy-blue:hover { color: #2a6dbf; } .onda-v3 .hover-light-marine:focus { color: #3d5980; } .onda-v3 .hover-light-marine:hover { color: #3d5980; } .onda-v3 .hover-marine:focus { color: #25354d; } .onda-v3 .hover-marine:hover { color: #25354d; } .onda-v3 .hover-serious-black:focus { color: #142032; } .onda-v3 .hover-serious-black:hover { color: #142032; } .onda-v3 .hover-green:focus { color: #8bc34a; } .onda-v3 .hover-green:hover { color: #8bc34a; } .onda-v3 .hover-washed-green:focus { color: #eafce3; } .onda-v3 .hover-washed-green:hover { color: #eafce3; } .onda-v3 .hover-red:focus { color: #ff4c4c; } .onda-v3 .hover-red:hover { color: #ff4c4c; } .onda-v3 .hover-washed-red:focus { color: #ffe6e6; } .onda-v3 .hover-washed-red:hover { color: #ffe6e6; } .onda-v3 .hover-yellow:focus { color: #ffb100; } .onda-v3 .hover-yellow:hover { color: #ffb100; } .onda-v3 .hover-washed-yellow:focus { color: #fff6e0; } .onda-v3 .hover-washed-yellow:hover { color: #fff6e0; } .onda-v3 .hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); } .onda-v3 .hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); } .onda-v3 .hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); } .onda-v3 .hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); } .onda-v3 .hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); } .onda-v3 .hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); } .onda-v3 .hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); } .onda-v3 .hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); } .onda-v3 .hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); } .onda-v3 .hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); } .onda-v3 .hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); } .onda-v3 .hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); } .onda-v3 .hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); } .onda-v3 .hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); } .onda-v3 .hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); } .onda-v3 .hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); } .onda-v3 .hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); } .onda-v3 .hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); } .onda-v3 .hover-black-05:focus { color: rgba( 0, 0, 0, .05 ); } .onda-v3 .hover-black-05:hover { color: rgba( 0, 0, 0, .05 ); } .onda-v3 .hover-black-025:focus { color: rgba( 0, 0, 0, .025 ); } .onda-v3 .hover-black-025:hover { color: rgba( 0, 0, 0, .025 ); } .onda-v3 .hover-black-0125:focus { color: rgba( 0, 0, 0, .0125 ); } .onda-v3 .hover-black-0125:hover { color: rgba( 0, 0, 0, .0125 ); } .onda-v3 .hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); } .onda-v3 .hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); } .onda-v3 .hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); } .onda-v3 .hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); } .onda-v3 .hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); } .onda-v3 .hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); } .onda-v3 .hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); } .onda-v3 .hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); } .onda-v3 .hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); } .onda-v3 .hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); } .onda-v3 .hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); } .onda-v3 .hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); } .onda-v3 .hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); } .onda-v3 .hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); } .onda-v3 .hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); } .onda-v3 .hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); } .onda-v3 .hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); } .onda-v3 .hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); } .onda-v3 .hover-white-05:focus { color: rgba( 255, 255, 255, .05 ); } .onda-v3 .hover-white-05:hover { color: rgba( 255, 255, 255, .05 ); } .onda-v3 .hover-white-025:focus { color: rgba( 255, 255, 255, .025 ); } .onda-v3 .hover-white-025:hover { color: rgba( 255, 255, 255, .025 ); } .onda-v3 .hover-white-0125:focus { color: rgba( 255, 255, 255, .0125 ); } .onda-v3 .hover-white-0125:hover { color: rgba( 255, 255, 255, .0125 ); } .onda-v3 .hover-bg-rebel-pink:focus { background-color: #f71963; } .onda-v3 .hover-bg-rebel-pink:hover { background-color: #f71963; } .onda-v3 .hover-b--rebel-pink:focus { border-color: #f71963; } .onda-v3 .hover-b--rebel-pink:hover { border-color: #f71963; } .onda-v3 .hover-bg-heavy-rebel-pink:focus { background-color: #dd1659; } .onda-v3 .hover-bg-heavy-rebel-pink:hover { background-color: #dd1659; } .onda-v3 .hover-b--heavy-rebel-pink:focus { border-color: #dd1659; } .onda-v3 .hover-b--heavy-rebel-pink:hover { border-color: #dd1659; } .onda-v3 .hover-bg-elite-purple:focus { background-color: #8914cc; } .onda-v3 .hover-bg-elite-purple:hover { background-color: #8914cc; } .onda-v3 .hover-b--elite-purple:focus { border-color: #8914cc; } .onda-v3 .hover-b--elite-purple:hover { border-color: #8914cc; } .onda-v3 .hover-bg-near-black:focus { background-color: #3f3f40; } .onda-v3 .hover-bg-near-black:hover { background-color: #3f3f40; } .onda-v3 .hover-b--near-black:focus { border-color: #3f3f40; } .onda-v3 .hover-b--near-black:hover { border-color: #3f3f40; } .onda-v3 .hover-bg-dark-gray:focus { background-color: #585959; } .onda-v3 .hover-bg-dark-gray:hover { background-color: #585959; } .onda-v3 .hover-b--dark-gray:focus { border-color: #585959; } .onda-v3 .hover-b--dark-gray:hover { border-color: #585959; } .onda-v3 .hover-bg-mid-gray:focus { background-color: #727273; } .onda-v3 .hover-bg-mid-gray:hover { background-color: #727273; } .onda-v3 .hover-b--mid-gray:focus { border-color: #727273; } .onda-v3 .hover-b--mid-gray:hover { border-color: #727273; } .onda-v3 .hover-bg-gray:focus { background-color: #979899; } .onda-v3 .hover-bg-gray:hover { background-color: #979899; } .onda-v3 .hover-b--gray:focus { border-color: #979899; } .onda-v3 .hover-b--gray:hover { border-color: #979899; } .onda-v3 .hover-bg-silver:focus { background-color: #cacbcc; } .onda-v3 .hover-bg-silver:hover { background-color: #cacbcc; } .onda-v3 .hover-b--silver:focus { border-color: #cacbcc; } .onda-v3 .hover-b--silver:hover { border-color: #cacbcc; } .onda-v3 .hover-bg-light-gray:focus { background-color: #e3e4e6; } .onda-v3 .hover-bg-light-gray:hover { background-color: #e3e4e6; } .onda-v3 .hover-b--light-gray:focus { border-color: #e3e4e6; } .onda-v3 .hover-b--light-gray:hover { border-color: #e3e4e6; } .onda-v3 .hover-bg-light-silver:focus { background-color: #f2f4f5; } .onda-v3 .hover-bg-light-silver:hover { background-color: #f2f4f5; } .onda-v3 .hover-b--light-silver:focus { border-color: #f2f4f5; } .onda-v3 .hover-b--light-silver:hover { border-color: #f2f4f5; } .onda-v3 .hover-bg-near-white:focus { background-color: #f7f9fa; } .onda-v3 .hover-bg-near-white:hover { background-color: #f7f9fa; } .onda-v3 .hover-b--near-white:focus { border-color: #f7f9fa; } .onda-v3 .hover-b--near-white:hover { border-color: #f7f9fa; } .onda-v3 .hover-bg-white:focus { background-color: #fff; } .onda-v3 .hover-bg-white:hover { background-color: #fff; } .onda-v3 .hover-b--white:focus { border-color: #fff; } .onda-v3 .hover-b--white:hover { border-color: #fff; } .onda-v3 .hover-bg-washed-blue:focus { background-color: #edf4fa; } .onda-v3 .hover-bg-washed-blue:hover { background-color: #edf4fa; } .onda-v3 .hover-b--washed-blue:focus { border-color: #edf4fa; } .onda-v3 .hover-b--washed-blue:hover { border-color: #edf4fa; } .onda-v3 .hover-bg-light-blue:focus { background-color: #cce8ff; } .onda-v3 .hover-bg-light-blue:hover { background-color: #cce8ff; } .onda-v3 .hover-b--light-blue:focus { border-color: #cce8ff; } .onda-v3 .hover-b--light-blue:hover { border-color: #cce8ff; } .onda-v3 .hover-bg-blue:focus { background-color: #368df7; } .onda-v3 .hover-bg-blue:hover { background-color: #368df7; } .onda-v3 .hover-b--blue:focus { border-color: #368df7; } .onda-v3 .hover-b--blue:hover { border-color: #368df7; } .onda-v3 .hover-bg-heavy-blue:focus { background-color: #2a6dbf; } .onda-v3 .hover-bg-heavy-blue:hover { background-color: #2a6dbf; } .onda-v3 .hover-b--heavy-blue:focus { border-color: #2a6dbf; } .onda-v3 .hover-b--heavy-blue:hover { border-color: #2a6dbf; } .onda-v3 .hover-bg-light-marine:focus { background-color: #3d5980; } .onda-v3 .hover-bg-light-marine:hover { background-color: #3d5980; } .onda-v3 .hover-b--light-marine:focus { border-color: #3d5980; } .onda-v3 .hover-b--light-marine:hover { border-color: #3d5980; } .onda-v3 .hover-bg-marine:focus { background-color: #25354d; } .onda-v3 .hover-bg-marine:hover { background-color: #25354d; } .onda-v3 .hover-b--marine:focus { border-color: #25354d; } .onda-v3 .hover-b--marine:hover { border-color: #25354d; } .onda-v3 .hover-bg-serious-black:focus { background-color: #142032; } .onda-v3 .hover-bg-serious-black:hover { background-color: #142032; } .onda-v3 .hover-b--serious-black:focus { border-color: #142032; } .onda-v3 .hover-b--serious