/*! AXION v1.0.0 | Fork of Tachyons (http://tachyons.io) for Veritas Labs */
/*
 *
 *  ░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓███████▓▒░  
 * ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 * ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 * ░▒▓████████▓▒░░▒▓██████▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 * ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 * ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░ 
 * ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░░▒▓█▓▒░ 
 *                                                           
 *    TABLE OF CONTENTS
 *
 *    1. External Library Includes
 *       - Normalize.css | http://normalize.css.github.io
 *    2. Axion Modules
 *    3. 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; }

/* 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

*/
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; }
/* Responsive images! */
img { max-width: 100%; }
/*
   POINTER EVENTS
*/
.pen { pointer-events: none; }
.noselect { user-select: none }
.pointer:hover { cursor: pointer; }
.grab:hover { cursor: grab; }
.cursor-arrow:hover { cursor: default; }
.cursor-text:hover { cursor: text; }
.not-allowed:hover { cursor: not-allowed; }
/*
  Often used in combination with background image set as an inline style
  on an html element.
*/
.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:
      -ns = not-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 */
.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
/* 
    BORDERS

    Base:
      b = border

    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
      n = none
*/
.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.

   Base:
     b = border

   Modifiers:
   --color-name = each color variable name is also a border color name

*/
.b--black { border-color: #000; }
.b--neutral-50  { border-color: var(--neutral-50);  }
.b--neutral-100 { border-color: var(--neutral-100); }
.b--neutral-150 { border-color: var(--neutral-150); }
.b--neutral-200 { border-color: var(--neutral-200); }
.b--neutral-300 { border-color: var(--neutral-300); }
.b--neutral-400 { border-color: var(--neutral-400); }
.b--neutral-500 { border-color: var(--neutral-500); }
.b--neutral-600 { border-color: var(--neutral-600); }
.b--neutral-700 { border-color: var(--neutral-700); }
.b--neutral-800 { border-color: var(--neutral-800); }
.b--neutral-900 { border-color: var(--neutral-900); }
.b--neutral-950 { border-color: var(--neutral-950); }

.b--green     { border-color: var(--green);     }
.b--green-50  { border-color: var(--green-50);  }
.b--green-100 { border-color: var(--green-100); }
.b--green-150 { border-color: var(--green-150); }
.b--green-200 { border-color: var(--green-200); }
.b--green-300 { border-color: var(--green-300); }
.b--green-400 { border-color: var(--green-400); }
.b--green-500 { border-color: var(--green-500); }
.b--green-600 { border-color: var(--green-600); }
.b--green-700 { border-color: var(--green-700); }
.b--green-800 { border-color: var(--green-800); }
.b--green-900 { border-color: var(--green-900); }
.b--green-950 { border-color: var(--green-950); }

.b--color-red { border-color: var(--color-red); }
.b--color-red-50 { border-color: var(--color-red-50); }
.b--color-red-100 { border-color: var(--color-red-100); }
.b--color-red-150 { border-color: var(--color-red-150); }
.b--color-red-600 { border-color: var(--color-red-600); }
.b--color-red-900 { border-color: var(--color-red-900); }
.b--color-red-950 { border-color: var(--color-red-950); }

.b--color-yellow-50 { border-color: var(--color-yellow-50); }
.b--color-yellow-300 { border-color: var(--color-yellow-300); }
.b--color-yellow-700 { border-color: var(--color-yellow-700); }

.b--gold-50  { border-color: var(--gold-50);  }
.b--gold-100 { border-color: var(--gold-100); }
.b--gold-150 { border-color: var(--gold-150); }
.b--gold-200 { border-color: var(--gold-200); }
.b--gold-300 { border-color: var(--gold-300); }
.b--gold-400 { border-color: var(--gold-400); }
.b--gold-500 { border-color: var(--gold-500); }
.b--gold-600 { border-color: var(--gold-600); }
.b--gold-700 { border-color: var(--gold-700); }
.b--gold-800 { border-color: var(--gold-800); }
.b--gold-900 { border-color: var(--gold-900); }
.b--gold-950 { border-color: var(--gold-950); }

.b--color-blue-600 { border-color: var(--color-blue-600); }
.b--green-600 { border-color: var(--green-600); }

.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }
.b--radius { border-radius: 6px; }
/*

   BORDER STYLES

   Depends on base border module in _borders.css

   Base:
     b = border-style

   Modifiers:
     --none   = none
     --dotted = dotted
     --dashed = dashed
     --solid  = solid



 */
.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }
/*

   BORDER WIDTHS

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale



*/
.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; }
/*

   CODE

*/
.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
.pre-wrap { white-space: pre-wrap; }
/*

   COORDINATES

   Use in combination with the position module.

   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



*/
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.right-50 { right: 50%; }
.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; }
/*

   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



*/
.dn { display: none !important; }
.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; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
  This will set table to full width and then
  all cells will be equal width
*/
.dt--fixed { table-layout: fixed; width: 100%; }
/*

  FLEXBOX

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/
.flex { display: flex; }
.inline-flex { display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
.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-last { order: 99999; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1, .fg1 { flex-grow: 1; }
.flex-grow-2, .fg2 { flex-grow: 2; }
.flex-grow-3, .fg3 { flex-grow: 3; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.fb-100 { flex-basis: 100%; }
.fb-75 { flex-basis: 75%; }
.fb-50 { flex-basis: 50%; }
.fb-49 { flex-basis: 49%; }
.fb-48 { flex-basis: 48%; }
.fb-33 { flex-basis: 33%; }
.fb-30 { flex-basis: 30%; }
.fb-25 { flex-basis: 25%; }
.flex-spread {
  display: flex;
  justify-content: space-between;
  & > *:not(:last-child) {
    flex-grow: 1;
    margin-right: var(--base-spacing);
  }
}
/*

   FLOATS

   1. Floated elements are automatically rendered as block level elements.
      Setting floats to display inline will fix the double margin bug in
      ie6. You know... just in case.

   2. Don't forget to clearfix your floats with .cf

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none



*/
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
/*

   FONT FAMILY GROUPS

*/
.font-system { font-family: var(--font-system); }
.font-serif { font-family: var(--font-serif); }
.font-monospace { font-family: var(--font-monospace); }
.font-heading { font-family: var(--font-heading); }
.font-system-sans-serif { font-family: sans-serif; }
.font-system-serif { font-family: serif; }

/* FONT STYLE */
.i { font-style: italic; }
.fs-normal { font-style: normal; }
/*

   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

*/
.normal { font-weight: normal; }
.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
   
*/
.input-reset { -webkit-appearance: none; -moz-appearance: none; }
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
/*

   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

*/
/* 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-30 { height: 30vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-80 { height: 80vh; }
.vh-90 { height: 90vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
/* String Properties */
.h-auto { height: auto; }
.h-inherit { height: inherit; }
.min-h5 { min-height: 16rem; }


/* LINE HEIGHT / LEADING */
.lh-1 { line-height: 1; }
.lh-1-25 { line-height: 1.25; }
.lh-1-5 { line-height: 1.5; }
.lh-2 { line-height: 2; }
.lh-2-5 { line-height: 2.5; }
.lh-3 { line-height: 3; }
/*

   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

*/
/* 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: 64rem; }
.mw9 { max-width: 96rem; }
/* Max Width String Properties */
.mw-none { max-width: none; }
/*

   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%
     -33  = literal value 33%
     -34  = literal value 34%
     -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




*/
/* 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-33 { width: 33%; }
.w-34 { width: 34%; }
.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

    Media Query Extensions:
      -ns = not-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 */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }


/* OPACITY */
.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; }


/* Text colors */
.neutral-50  { color: var(--neutral-50);  }
.neutral-100 { color: var(--neutral-100); }
.neutral-150 { color: var(--neutral-150); }
.neutral-200 { color: var(--neutral-200); }
.neutral-300 { color: var(--neutral-300); }
.neutral-400 { color: var(--neutral-400); }
.neutral-500 { color: var(--neutral-500); }
.neutral-600 { color: var(--neutral-600); }
.neutral-700 { color: var(--neutral-700); }
.neutral-900 { color: var(--neutral-900); }
.neutral-950 { color: var(--neutral-950); }

.green     { color: var(--green);     }
.green-50  { color: var(--green-50);  }
.green-100 { color: var(--green-100); }
.green-150 { color: var(--green-150); }
.green-200 { color: var(--green-200); }
.green-300 { color: var(--green-300); }
.green-400 { color: var(--green-400); }
.green-500 { color: var(--green-500); }
.green-600 { color: var(--green-600); }
.green-700 { color: var(--green-700); }
.green-800 { color: var(--green-800); }
.green-900 { color: var(--green-900); }
.green-950 { color: var(--green-950); }

.red     { color: var(--red); }
.red-50  { color: var(--color-red-50); }
.red-100 { color: var(--color-red-100); }
.red-150 { color: var(--color-red-150); }
.red-600 { color: var(--color-red-600); }
.red-900 { color: var(--color-red-900); }
.red-950 { color: var(--color-red-950); }

.yellow-50 { color: var(--color-yellow-50); }
.yellow-300 { color: var(--color-yellow-300); }
.yellow-700 { color: var(--color-yellow-700); }

.gold-50  { color: var(--gold-50);  }
.gold-100 { color: var(--gold-100); }
.gold-150 { color: var(--gold-150); }
.gold-200 { color: var(--gold-200); }
.gold-300 { color: var(--gold-300); }
.gold-400 { color: var(--gold-400); }
.gold-500 { color: var(--gold-500); }
.gold-600 { color: var(--gold-600); }
.gold-700 { color: var(--gold-700); }
.gold-800 { color: var(--gold-800); }
.gold-900 { color: var(--gold-900); }
.gold-950 { color: var(--gold-950); }

.blue-600 { color: var(--color-blue-600); }
.green-600 { color: var(--green-600); }
.black { color: #000; }
.white { color: #FFF; }
.color-inherit { color: inherit; }


/* Background colors */
.bg-black { background-color: #000; }
.bg-white { background-color: #FFF; }
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
.bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); }
.bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); }
.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); }
.bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); }
.bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); }
.bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); }
.bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); }
.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); }
.bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); }
.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); }
.bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); }
.bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); }
.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); }
.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }

.bg-neutral-50  { background-color: var(--neutral-50);  }
.bg-neutral-100 { background-color: var(--neutral-100); }
.bg-neutral-150 { background-color: var(--neutral-150); }
.bg-neutral-200 { background-color: var(--neutral-200); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-900 { background-color: var(--neutral-900); }
.bg-neutral-950 { background-color: var(--neutral-950); }

.bg-green     { background-color: var(--green);     }
.bg-green-50  { background-color: var(--green-50);  }
.bg-green-100 { background-color: var(--green-100); }
.bg-green-150 { background-color: var(--green-150); }
.bg-green-200 { background-color: var(--green-200); }
.bg-green-300 { background-color: var(--green-300); }
.bg-green-400 { background-color: var(--green-400); }
.bg-green-500 { background-color: var(--green-500); }
.bg-green-600 { background-color: var(--green-600); }
.bg-green-700 { background-color: var(--green-700); }
.bg-green-800 { background-color: var(--green-800); }
.bg-green-900 { background-color: var(--green-900); }
.bg-green-950 { background-color: var(--green-950); }

.bg-gold-50  { background-color: var(--gold-50);  }
.bg-gold-100 { background-color: var(--gold-100); }
.bg-gold-150 { background-color: var(--gold-150); }
.bg-gold-200 { background-color: var(--gold-200); }
.bg-gold-300 { background-color: var(--gold-300); }
.bg-gold-400 { background-color: var(--gold-400); }
.bg-gold-500 { background-color: var(--gold-500); }
.bg-gold-600 { background-color: var(--gold-600); }
.bg-gold-700 { background-color: var(--gold-700); }
.bg-gold-800 { background-color: var(--gold-800); }
.bg-gold-900 { background-color: var(--gold-900); }
.bg-gold-950 { background-color: var(--gold-950); }

.bg-color-red { background-color: var(--color-red); }
.bg-color-red-50 { background-color: var(--color-red-50); }
.bg-color-red-100 { background-color: var(--color-red-100); }
.bg-color-red-150 { background-color: var(--color-red-150); }
.bg-color-red-600 { background-color: var(--color-red-600); }
.bg-color-red-900 { background-color: var(--color-red-900); }
.bg-color-red-950 { background-color: var(--color-red-950); }

.bg-color-yellow-50 { background-color: var(--color-yellow-50); }
.bg-color-yellow-300 { background-color: var(--color-yellow-300); }
.bg-color-yellow-700 { background-color: var(--color-yellow-700); }

.bg-color-blue-600 { background-color: var(--color-blue-600); }
.bg-green-600 { background-color: var(--green-600); }
.bg-inherit { background-color: inherit; }


/*
   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 = 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

*/
.pa0 { padding: 0; }
.pa1 { padding: .25rem; }
.pa2 { padding: .5rem; }
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.pa5 { padding: 4rem; }
.pa6 { padding: 8rem; }
.pa7 { 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; }
.ma0 { margin: 0; }
.m0a { margin: 0 auto; }
.ma1 { margin: .25rem; }
.ma2 { margin: .5rem; }
.ma3 { margin: 1rem; }
.ma4 { margin: 2rem; }
.ma5 { margin: 4rem; }
.ma6 { margin: 8rem; }
.ma7 { 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; }


/* TABLES */
.collapse { border-collapse: collapse; border-spacing: 0; }
.striped--neutral-150:nth-child(odd) { background-color: var(--neutral-150); }


/* TEXT DECORATION */
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }


/*

  TEXT ALIGN

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center
    j = justify

  Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large

*/
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tj { text-align: justify; }


/*

   TEXT TRANSFORM

   Base:
     tt = text-transform

   Modifiers
     c = capitalize
     l = lowercase
     u = uppercase
     n = none

*/
.ttc, .capitalize {
  text-transform: capitalize;
  &::first-letter {
    text-transform: uppercase;
  }
}
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
/*

   TYPE 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
*/

/*
 * For Hero/Marketing Titles
 *
 * These generally are too large for mobile
 * so be careful using them on smaller screens.
 * */
.f-6, .f-headline { font-size: 6rem; }
.f-5, .f-subheadline { font-size: 5rem; }
/* Type Scale */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; }


/* UTILITIES */
/* Equivalent to .overflow-y-scroll */
.overflow-container { overflow-y: scroll; }
.center { margin-right: auto; margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }


/* VISIBILITY */
/*
    Text that is hidden but accessible
    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }


/* WHITE SPACE */
.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }


/* VERTICAL ALIGN */
.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }


/*

  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/
*/
.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; }


/* Debugging */
/*

  DEBUG CHILDREN

  Just add the debug class to any element to see outlines on its
  children.

*/
.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.

*/
.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; }

/* FLEX GAPS */
.gap1 { gap: 0.25rem; }
.gap2 { gap: 0.5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 2rem; }
.gap5 { gap: 4rem; }
.gap6 { gap: 8rem; }
.gap7 { gap: 16rem; }

/* MAX HEIGHT */
.maxh-viewport-33 { max-height: 33vh; }
.maxh-viewport-50 { max-height: 50vh; }
.maxh-viewport-100 { max-height: 100vh; }

/* BLUR */
.blur { filter: blur(4px); }
.grayscale { filter: grayscale(100%); }


/* Text colors */
.text-primary           { color: var(--bg-primary); }
.text-primary-dark      { color: var(--bg-primary-dark); }
.text-primary-half      { color: var(--bg-primary-half); }
.text-accent            { color: var(--bg-accent); }
.text-accent-half       { color: var(--bg-accent-half); }
.text-accent-dark       { color: var(--bg-accent-dark); }
.text-secondary         { color: var(--bg-secondary); }
.text-secondary-dark    { color: var(--bg-secondary-dark); }
.text-background        { color: var(--bg-background); }
.text-background-light  { color: var(--bg-background-light); }
.text-background-half   { color: var(--bg-background-half); }
.text-background-dark   { color: var(--bg-background-dark); }
.text-foreground        { color: var(--bg-foreground); }
.text-muted             { color: var(--bg-muted); }
.text-muted-foreground { color: var(--text-muted-foreground); }

/* Border colors */
.b--border         { border-color: var(--border-border); }
.b--border-light   { border-color: var(--border-border-light); }
.b--border-dark    { border-color: var(--border-border-dark); }
.b--border-darkest { border-color: var(--border-border-darkest); }

/* Background colors */
.bg-primary           { background-color: var(--bg-primary); }
.bg-primary-dark      { background-color: var(--bg-primary-dark); }
.bg-primary-half      { background-color: var(--bg-primary-half); }
.bg-accent            { background-color: var(--bg-accent); }
.bg-accent-half       { background-color: var(--bg-accent-half); }
.bg-accent-dark       { background-color: var(--bg-accent-dark); }
.bg-secondary         { background-color: var(--bg-secondary); }
.bg-secondary-dark    { background-color: var(--bg-secondary-dark); }
.bg-background        { background-color: var(--bg-background); }
.bg-background-light  { background-color: var(--bg-background-light); }
.bg-background-half   { background-color: var(--bg-background-half); }
.bg-background-dark   { background-color: var(--bg-background-dark); }
.bg-foreground        { background-color: var(--bg-foreground); }
.bg-muted             { background-color: var(--bg-muted); }

/* Opacity variants */
.bg-primary-90   { background-color: var(--bg-primary-90); }
.bg-primary-50   { background-color: var(--bg-primary-50); }
.bg-primary-20   { background-color: var(--bg-primary-20); }
.bg-primary-10   { background-color: var(--bg-primary-10); }
.bg-accent-90    { background-color: var(--bg-accent-90); }
.bg-accent-50    { background-color: var(--bg-accent-50); }
.bg-accent-10    { background-color: var(--bg-accent-10); }