tachyons.css

/* Tachyons */

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
  Custom Media Queries
  These custom media queries can be referenced like so:

  @media (--breakpoint-medium) {
    .bg-red { background-color: red; }
  }

*/

/*

   COLOR VARIABLES

   Variables to set colors for
   color, background-color, and border-color

*/

/* variables */



html,
body {
  height: 100%;
}

/*

  BOX SIZING

  A saner box-model.
  Only applied to unqualified elements where this model makes sense.

  Apply .border-box where needed.

*/

nav,
main,
section,
article,
aside,
header,
footer,
div,
details,
summary,
form,
fieldset,
textarea,
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
nav:before,
main:before,
section:before,
article:before,
aside:before,
header:before,
footer:before,
div:before,
details:before,
summary:before,
form:before,
fieldset:before,
textarea:before,
input[type="text"]:before,
input[type="tel"]:before,
input[type="url"]:before,
input[type="email"]:before,
input[type="search"]:before,
input[type="number"]:before,
input[type="password"]:before,
nav:after,
main:after,
section:after,
article:after,
aside:after,
header:after,
footer:after,
div:after,
details:after,
summary:after,
form:after,
fieldset:after,
textarea:after,
input[type="text"]:after,
input[type="tel"]:after,
input[type="url"]:after,
input[type="email"]:after,
input[type="search"]:after,
input[type="number"]:after,
input[type="password"]:after,
.border-box,
.border-box:before,
.border-box:after {
  box-sizing: border-box;
}

/*

   BACKGROUND SIZE

*/

.bg-cv {
  background-size: cover;
}

.bg-cn {
  background-size: contain;
}

@media screen and (min-width: 42em) {
  .bg-cv-ns {
    background-size: cover;
  }

  .bg-cn-ns {
    background-size: contain;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .bg-cv-m {
    background-size: cover;
  }

  .bg-cn-m {
    background-size: contain;
  }
}

@media screen and (min-width: 64em) {
  .bg-cv-l {
    background-size: cover;
  }

  .bg-cn-l {
    background-size: contain;
  }
}

/*

   BORDER BASE

   Use border-base in combination with setting text color
   or by using extensions from border-color module.

   Examples:
   To set a border of blue on all sides:
   <div class="ba b--blue"></div>

   To set a border on top of orange
   <div class="bt b--orange"></div>

   Base:
    b = border

   Modifiers:
     n = none, no border-style or border-width
     a = all
     t = top
     r = right
     b = bottom
     l = left

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

*/

/* The extra `.bn` is required to boost the specificity, which is needed
 * sometimes if you are setting the border to 0. */

.bn.bn {
  border-style: solid;
  border-width: 0;
}

.ba {
  border-style: solid;
  border-width: 1px;
}

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

.bda {
  border-style: dotted;
  border-width: 1px;
}

.bdt {
  border-top-style: dotted;
  border-top-width: 1px;
}

.bdr {
  border-right-style: dotted;
  border-right-width: 1px;
}

.bdb {
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}

.bdl {
  border-left-style: dotted;
  border-left-width: 1px;
}

@media screen and (min-width: 42em) {
  .bn-ns {
    border-style: solid;
    border-width: 0;
  }

  .ba-ns {
    border-style: solid;
    border-width: 1px;
  }

  .bt-ns {
    border-top-style: solid;
    border-top-width: 1px;
  }

  .br-ns {
    border-right-style: solid;
    border-right-width: 1px;
  }

  .bb-ns {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  .bl-ns {
    border-left-style: solid;
    border-left-width: 1px;
  }

  .bda-ns {
    border-style: dotted;
    border-width: 1px;
  }

  .bdt-ns {
    border-top-style: dotted;
    border-top-width: 1px;
  }

  .bdr-ns {
    border-right-style: dotted;
    border-right-width: 1px;
  }

  .bdb-ns {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
  }

  .bdl-ns {
    border-left-style: dotted;
    border-left-width: 1px;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .bn-m {
    border-style: solid;
    border-width: 0;
  }

  .ba-m {
    border-style: solid;
    border-width: 1px;
  }

  .bt-m {
    border-top-style: solid;
    border-top-width: 1px;
  }

  .br-m {
    border-right-style: solid;
    border-right-width: 1px;
  }

  .bb-m {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  .bl-m {
    border-left-style: solid;
    border-left-width: 1px;
  }

  .bda-m {
    border-style: dotted;
    border-width: 1px;
  }

  .bdt-m {
    border-top-style: dotted;
    border-top-width: 1px;
  }

  .bdr-m {
    border-right-style: dotted;
    border-right-width: 1px;
  }

  .bdb-m {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
  }

  .bdl-m {
    border-left-style: dotted;
    border-left-width: 1px;
  }
}

@media screen and (min-width: 64em) {
  .bn-l {
    border-style: solid;
    border-width: 0;
  }

  .ba-l {
    border-style: solid;
    border-width: 1px;
  }

  .bt-l {
    border-top-style: solid;
    border-top-width: 1px;
  }

  .br-l {
    border-right-style: solid;
    border-right-width: 1px;
  }

  .bb-l {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  .bl-l {
    border-left-style: solid;
    border-left-width: 1px;
  }

  .bda-l {
    border-style: dotted;
    border-width: 1px;
  }

  .bdt-l {
    border-top-style: dotted;
    border-top-width: 1px;
  }

  .bdr-l {
    border-right-style: dotted;
    border-right-width: 1px;
  }

  .bdb-l {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
  }

  .bdl-l {
    border-left-style: dotted;
    border-left-width: 1px;
  }
}

/*

   BORDER COLORS

 */

.b--black {
  border-color: #000;
}

.b--near-black {
  border-color: #111;
}

.b--dark-gray {
  border-color: #333;
}

.b--mid-gray {
  border-color: #555;
}

.b--gray {
  border-color: #777;
}

.b--silver {
  border-color: #999;
}

.b--light-silver {
  border-color: #aaa;
}

.b--light-gray {
  border-color: #eee;
}

.b--near-white {
  border-color: #f4f4f4;
}

.b--white {
  border-color: #fff;
}

.b--white-10 {
  border-color: hsla(0, 0, 100%, .1);
}

.b--white-20 {
  border-color: hsla(0, 0, 100%, .2);
}

.b--white-25 {
  border-color: hsla(0, 0, 100%, .25);
}

.b--white-30 {
  border-color: hsla(0, 0, 100%, .3);
}

.b--white-40 {
  border-color: hsla(0, 0, 100%, .4);
}

.b--white-50 {
  border-color: hsla(0, 0, 100%, .5);
}

.b--white-60 {
  border-color: hsla(0, 0, 100%, .6);
}

.b--white-70 {
  border-color: hsla(0, 0, 100%, .7);
}

.b--white-75 {
  border-color: hsla(0, 0, 100%, .75);
}

.b--white-80 {
  border-color: hsla(0, 0, 100%, .8);
}

.b--white-90 {
  border-color: hsla(0, 0, 100%, .9);
}

.b--black-10 {
  border-color: hsla(0, 0, 0,    .1);
}

.b--black-20 {
  border-color: hsla(0, 0, 0,    .2);
}

.b--black-25 {
  border-color: hsla(0, 0, 0,    .25);
}

.b--black-30 {
  border-color: hsla(0, 0, 0,    .3);
}

.b--black-40 {
  border-color: hsla(0, 0, 0,    .4);
}

.b--black-50 {
  border-color: hsla(0, 0, 0,    .5);
}

.b--black-60 {
  border-color: hsla(0, 0, 0,    .6);
}

.b--black-70 {
  border-color: hsla(0, 0, 0,    .7);
}

.b--black-75 {
  border-color: hsla(0, 0, 0,    .75);
}

.b--black-80 {
  border-color: hsla(0, 0, 0,    .8);
}

.b--black-90 {
  border-color: hsla(0, 0, 0,    .9);
}

.b--blue {
  border-color: #0074D9;
}

.b--light-blue {
  border-color: #64a8ff;
}

.b--lightest-blue {
  border-color: #a2dfff;
}

.b--dark-blue {
  border-color: #0045a1;
}

.b--darkest-blue {
  border-color: #002f86;
}

.b--yellow {
  border-color: #fff93c;
}

.b--light-yellow {
  border-color: #fffa60;
}

.b--lightest-yellow {
  border-color: #fffca6;
}

.b--dark-yellow {
  border-color: #e2c100;
}

.b--darkest-yellow {
  border-color: #c4a600;
}

.b--orange {
  border-color: #FF851B;
}

.b--light-orange {
  border-color: #ffa942;
}

.b--lightest-orange {
  border-color: #ffc55d;
}

.b--dark-orange {
  border-color: #d05e00;
}

.b--darkest-orange {
  border-color: #b14400;
}

.b--red {
  border-color: #d82c2c;
}

.b--light-red {
  border-color: #f94f44;
}

.b--lightest-red {
  border-color: #ff6c5c;
}

.b--dark-red {
  border-color: #bd001a;
}

.b--darkest-red {
  border-color: #9d0003;
}

.b--teal {
  border-color: #27bfa8;
}

.b--light-teal {
  border-color: #4eddc5;
}

.b--lightest-teal {
  border-color: #6ffae0;
}

.b--dark-teal {
  border-color: #25a28f;
}

.b--darkest-teal {
  border-color: #008876;
}

.b--green {
  border-color: #3D9970;
}

.b--light-green {
  border-color: #5ab48a;
}

.b--lightest-green {
  border-color: #75d0a4;
}

.b--dark-green {
  border-color: #1e7f58;
}

.b--darkest-green {
  border-color: #006540;
}

.b--pink {
  border-color: #F012BE;
}

.b--light-pink {
  border-color: #ff57e8;
}

.b--lightest-pink {
  border-color: #ff81ff;
}

.b--dark-pink {
  border-color: #d100a3;
}

.b--darkest-pink {
  border-color: #b20088;
}

.b--purple {
  border-color: #980bc6;
}

.b--light-purple {
  border-color: #b536e2;
}

.b--lightest-purple {
  border-color: #d355ff;
}

.b--dark-purple {
  border-color: #7b00a9;
}

.b--darkest-purple {
  border-color: #5f008e;
}

/*

   BORDER RADIUS

   Base:
     br   = border-radius

   Modifiers:
     n    = none
     1    = 1st step in scale
     2    = 2nd step in scale
     3    = 3rd step in scale
     4    = 4th step in scale
     5    = 5th step in scale
     circ = circle
     -100 = 100%

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

*/

.brn {
  border-radius: 0;
}

.br1 {
  border-radius: .125rem;
}

.br2 {
  border-radius: .25rem;
}

.br3 {
  border-radius: .5rem;
}

.br4 {
  border-radius: 1rem;
}

.br5 {
  border-radius: 2rem;
}

.br-circ {
  border-radius: 9999px;
}

.br-100 {
  border-radius: 100%;
}

@media screen and (min-width: 42em) {
  .brn-ns {
    border-radius: 0;
  }

  .br1-ns {
    border-radius: .125rem;
  }

  .br2-ns {
    border-radius: .25rem;
  }

  .br3-ns {
    border-radius: .5rem;
  }

  .br4-ns {
    border-radius: 1rem;
  }

  .br5-ns {
    border-radius: 2rem;
  }

  .br-circ-ns {
    border-radius: 9999px;
  }

  .br-100-ns {
    border-radius: 100%;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .brn-m {
    border-radius: 0;
  }

  .br1-m {
    border-radius: .125rem;
  }

  .br2-m {
    border-radius: .25rem;
  }

  .br3-m {
    border-radius: .5rem;
  }

  .br4-m {
    border-radius: 1rem;
  }

  .br5-m {
    border-radius: 2rem;
  }

  .br-circ-m {
    border-radius: 9999px;
  }

  .br-100-m {
    border-radius: 100%;
  }
}

@media screen and (min-width: 64em) {
  .brn-l {
    border-radius: 0;
  }

  .br1-l {
    border-radius: .125rem;
  }

  .br2-l {
    border-radius: .25rem;
  }

  .br3-l {
    border-radius: .5rem;
  }

  .br4-l {
    border-radius: 1rem;
  }

  .br5-l {
    border-radius: 2rem;
  }

  .br-circ-l {
    border-radius: 9999px;
  }

  .br-100-l {
    border-radius: 100%;
  }
}

/*

   BORDER STYLES

   Base:
     bs = border-style

   Modifiers:
     none   = none
     dotted = dotted
     solid  = solid

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

 */

.bs-none {
  border-style: none;
}

.bs-dotted {
  border-style: dotted;
}

.bs-solid {
  border-style: solid;
}

@media screen and (min-width: 42em) {
  .bs-none-ns {
    border-style: none;
  }

  .bs-dotted-ns {
    border-style: dotted;
  }

  .bs-solid-ns {
    border-style: solid;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .bs-none-m {
    border-style: none;
  }

  .bs-dotted-m {
    border-style: dotted;
  }

  .bs-solid-m {
    border-style: solid;
  }
}

@media screen and (min-width: 64em) {
  .bs-none-l {
    border-style: none;
  }

  .bs-dotted-l {
    border-style: dotted;
  }

  .bs-solid-l {
    border-style: solid;
  }
}

/*
   BORDER WIDTHS

   Base:
     bw = border-width

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

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

*/

.bw0 {
  border-width: 0;
}

.bw1 {
  border-width: .125rem;
}

.bw2 {
  border-width: .25rem;
}

.bw3 {
  border-width: .5rem;
}

.bw4 {
  border-width: .75rem;
}

.bw5 {
  border-width: 1rem;
}

/*
 *
 * btns.css
 * Simple css utilities for building responsive buttons
 * Author: mrmrs
 * License: MIT
 *
 *                */

/*

  Base .btn class

  Code:
  <a href="#" class="btn">Default button</a>

*/

.btn,
.btn:link,
.btn:visited {
  border-radius: .3em;
  border-style: solid;
  border-width: 1px;
  color: #111;
  display: inline-block;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .4s, background-color .4s, border .4s;
}

.btn:hover {
  color: #7FDBFF;
  border: 1px solid #7FDBFF;
  transition: background-color .3s, color .3s, border .3s;
}

.btn:active {
  color: #0074D9;
  border: 1px solid #0074D9;
  transition: background-color .3s, color .3s, border .3s;
}

/*

  Sizes

  Small  = .btn--s
  Medium = .btn--m
  Large  = .btn--l

  Code:
  <a href="#" class="btn btn--s">
  <a href="#" class="btn btn--m">
  <a href="#" class="btn btn--l">

*/

.btn--s {
  font-size: 12px;
}

.btn--m {
  font-size: 14px;
}

.btn--l {
  font-size: 20px;
  border-radius: .25em!important;
}

/*

  Layout utility for responsive buttons

  Code:
  <a href="#" class="btn btn--full">

*/

.btn--full,
.btn--full:link {
  border-radius: .25em;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 100%;
}

/*

  Skins

  * Black & White
  * Grays
  * Colors

  Code:
  <a href="#" class="btn btn--black">
  <a href="#" class="btn btn--white">
  <a href="#" class="btn btn--gray">
  <a href="#" class="btn btn--gray-dark">
  <a href="#" class="btn btn--gray-border">
  <a href="#" class="btn btn--blue">

*/

/* BLACK & WHITE */

.btn--black,
.btn--black:link,
.btn--black:visited {
  color: #fff;
  background-color: #000;
}

.btn--black:hover {
  color: #fff;
  background-color: #777;
  border-color: #777;
}

.btn--black:active {
  color: #fff;
  background-color: #999;
  border-color: #999;
}

.btn--black:hover {
  background-color: #444;
}

.btn--black {
  background-color: #000;
}

.btn--gray:link,
.btn--gray:visited,
 {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  color: #555;
}

.btn--gray:hover {
  background-color: #ddd;
  border-color: #ddd;
  color: #444;
}

.btn--gray:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444;
}

.btn--gray-border:link,
.btn--gray-border:visited,
 {
  background-color: #fff;
  border-color: #555;
  border-width: 2px;
  color: #555;
}

.btn--gray-border:hover {
  background-color: #fff;
  border-color: #ddd;
  color: #777;
}

.btn--gray-border:active {
  background-color: #ccc;
  border-color: #ccc;
  color: #444;
}

.btn--gray-dark:link,
.btn--gray-dark:visited {
  background-color: #555;
  color: #eee;
}

.btn--gray-dark:hover {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

.btn--gray-dark:active {
  background-color: #777;
  border-color: #777;
  color: #eee;
}

/* BLUES */

.btn--blue:link,
.btn--blue:visited {
  color: #fff;
  background-color: #0074D9;
}

.btn--blue:hover {
  color: #fff!important;
  background-color: #0063aa;
  border-color: #0063aa;
}

.btn--blue:active {
  color: #fff;
  background-color: #001F3F;
  border-color: #001F3F;
}

.btn--animated {
  background: #f9f9f9;
  color: #444;
  border: 4px solid #f1f1f1;
  padding: .5rem;
  transition: padding .4s ease-out;
  transition-delay: .1s;
}

.btn--animated:hover {
  background: #f9f9f9;
  border: 4px solid #f1f1f1;
  padding: .75rem;
  transition: padding .2s ease-in;
}

/* Keep it mobile-first and responsive */

@media screen and (min-width: 32em) {
  .btn--full {
    max-width: 16em!important;
  }
}

/*

   CODE

*/

.pre {
  overflow-x: auto;
  overflow-y: hidden;
  overflow: scroll;
}

.code {
  white-space: pre;
  font-size: 14px;
}

/*

   CLEARS

*/

.cn {
  clear: none;
}

.cl {
  clear: left;
}

.cr {
  clear: right;
}

.cb {
  clear: both;
}

/* Nicolas Gallaghers Clearfix solution
   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

/*

   DIMENSION UTILITIES

*/

.wrap {
  display: block;
  width: auto !important;
}

.fill {
  display: block;
  overflow: hidden;
  width: auto !important;
}

/*

   DISPLAY

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    tr    = table-row
    tcol  = table-column
    tcolg = table-column-group

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

*/

.dn {
  display: none;
}

.di {
  display: inline;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.dit {
  display: inline-table;
}

.dt {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.dtr {
  display: table-row;
}

.dtc {
  display: table-cell;
}

.dtcol {
  display: table-column;
}

.dtcolg {
  display: table-column-group;
}

@media screen and (min-width: 42em) {
  .dn-ns {
    display: none;
  }

  .di-ns {
    display: inline;
  }

  .db-ns {
    display: block;
  }

  .dib-ns {
    display: inline-block;
  }

  .dit-ns {
    display: inline-table;
  }

  .dt-ns {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .dtr-ns {
    display: table-row;
  }

  .dtc-ns {
    display: table-cell;
  }

  .dtcol-ns {
    display: table-column;
  }

  .dtcolg-ns {
    display: table-column-group;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .dn-m {
    display: none;
  }

  .di-m {
    display: inline;
  }

  .db-m {
    display: block;
  }

  .dib-m {
    display: inline-block;
  }

  .dit-m {
    display: inline-table;
  }

  .dt-m {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .dtr-m {
    display: table-row;
  }

  .dtc-m {
    display: table-cell;
  }

  .dtcol-m {
    display: table-column;
  }

  .dtcolg-m {
    display: table-column-group;
  }
}

@media screen and (min-width: 64em) {
  .dn-l {
    display: none;
  }

  .di-l {
    display: inline;
  }

  .db-l {
    display: block;
  }

  .dib-l {
    display: inline-block;
  }

  .dit-l {
    display: inline-table;
  }

  .dt-l {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .dtr-l {
    display: table-row;
  }

  .dtc-l {
    display: table-cell;
  }

  .dtcol-l {
    display: table-column;
  }

  .dtcolg-l {
    display: table-column-group;
  }
}

/*

   FLOATS

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

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

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none

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

*/

.fl {
  float: left;
  display: inline;
}

.fr {
  float: right;
  display: inline;
}

.fn {
  float: none;
}

@media screen and (min-width: 42em) {
  .fl-ns {
    float: left;
    display: inline;
  }

  .fr-ns {
    float: right;
    display: inline;
  }

  .fn-ns {
    float: none;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .fl-m {
    float: left;
    display: inline;
  }

  .fr-m {
    float: right;
    display: inline;
  }

  .fn-m {
    float: none;
  }
}

@media screen and (min-width: 64em) {
  .fl-l {
    float: left;
    display: inline;
  }

  .fr-l {
    float: right;
    display: inline;
  }

  .fn-l {
    float: none;
  }
}

/*

   Font Family Groups

*/

body,
.sans-serif {
  font-family: 'avenir next', avenir, helvetica, 'helvetica neue', arial, sans-serif;
}

.open-sans {
  font-family: "Open sans", sans-serif;
}

.serif {
  font-family: "Calisto MT", georgia, serif;
}

/* From http://cssfontstack.com */

.code,
code {
  font-family: Consolas, monaco, monospace;
}

.serif-bodini {
  font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

.serif-calisto {
  font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
}

.serif-garamond {
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

.serif-times {
  font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
}

/*

   Font Style

*/

.fsn {
  font-style: normal;
}

.i {
  font-style: italic;
}

/*

   FONT WEIGHT

*/

.normal {
  font-weight: normal;
}

.b {
  font-weight: bold;
}

.thin {
  font-weight: 100;
}

.book {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.heavy {
  font-weight: 900;
}

@media screen and (min-width: 42em) {
  .normal-ns {
    font-weight: normal;
  }

  .b-ns {
    font-weight: bold;
  }

  .thin-ns {
    font-weight: 100;
  }

  .book-ns {
    font-weight: 400;
  }

  .bold-ns {
    font-weight: 700;
  }

  .heavy-ns {
    font-weight: 900;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .normal-m {
    font-weight: normal;
  }

  .b-m {
    font-weight: bold;
  }

  .thin-m {
    font-weight: 100;
  }

  .book-m {
    font-weight: 400;
  }

  .bold-m {
    font-weight: 700;
  }

  .heavy-m {
    font-weight: 900;
  }
}

@media screen and (min-width: 64em) {
  .normal-l {
    font-weight: normal;
  }

  .b-l {
    font-weight: bold;
  }

  .thin-l {
    font-weight: 100;
  }

  .book-l {
    font-weight: 400;
  }

  .bold-l {
    font-weight: 700;
  }

  .heavy-l {
    font-weight: 900;
  }
}

/* Forms */

.input-text {
  outline: 0;
  border: 1px solid #999;
}

.input-invisible {
  outline: 0;
  border: 0;
}

@media screen and (min-width: 42em) {

}

@media screen and (min-width: 42em) and (max-width: 64em) {

}

@media screen and (min-width: 64em) {

}

/*

   Heights

*/

/* Height Scale */

.h1 {
  height: 1rem;
}

.h2 {
  height: 2rem;
}

.h3 {
  height: 4rem;
}

.h4 {
  height: 8rem;
}

.h5 {
  height: 16rem;
}

.h-10 {
  height: 10%;
}

.h-20 {
  height: 20%;
}

.h-25 {
  height: 25%;
}

.h-40 {
  height: 40%;
}

.h-50 {
  height: 50%;
}

.h-60 {
  height: 60%;
}

.h-75 {
  height: 75%;
}

.h-80 {
  height: 80%;
}

.h-100 {
  height: 100%;
}

/* String Properties */

.h-bb {
  height: border-box;
}

.h-cb {
  height: content-box;
}

.h-mx {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.h-mn {
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}

.h-av {
  height: available;
}

.h-fc {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.h-at {
  height: auto;
}

.h-i {
  height: inherit;
}

@media screen and (min-width: 42em) {
  .h-1-ns {
    height: 1rem;
  }

  .h-2-ns {
    height: 2rem;
  }

  .h-3-ns {
    height: 4rem;
  }

  .h-4-ns {
    height: 8rem;
  }

  .h-5-ns {
    height: 16rem;
  }

  .h-10-ns {
    height: 10%;
  }

  .h-20-ns {
    height: 20%;
  }

  .h-25-ns {
    height: 25%;
  }

  .h-40-ns {
    height: 40%;
  }

  .h-50-ns {
    height: 50%;
  }

  .h-60-ns {
    height: 60%;
  }

  .h-75-ns {
    height: 75%;
  }

  .h-80-ns {
    height: 80%;
  }

  .h-100-ns {
    height: 100%;
  }

  .h-bb-ns {
    height: border-box;
  }

  .h-cb-ns {
    height: content-box;
  }

  .h-mx-ns {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }

  .h-mn-ns {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }

  .h-av-ns {
    height: available;
  }

  .h-fc-ns {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-at-ns {
    height: auto;
  }

  .h-i-ns {
    height: inherit;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .h1-m {
    height: 1rem;
  }

  .h2-m {
    height: 2rem;
  }

  .h3-m {
    height: 4rem;
  }

  .h4-m {
    height: 8rem;
  }

  .h5-m {
    height: 16rem;
  }

  .h-10-m {
    height: 10%;
  }

  .h-20-m {
    height: 20%;
  }

  .h-25-m {
    height: 25%;
  }

  .h-40-m {
    height: 40%;
  }

  .h-50-m {
    height: 50%;
  }

  .h-60-m {
    height: 60%;
  }

  .h-75-m {
    height: 75%;
  }

  .h-80-m {
    height: 80%;
  }

  .h-100-m {
    height: 100%;
  }

  .h-bb-m {
    height: border-box;
  }

  .h-cb-m {
    height: content-box;
  }

  .h-mx-m {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }

  .h-mn-m {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }

  .h-av-m {
    height: available;
  }

  .h-fc-m {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-at-m {
    height: auto;
  }

  .h-i-m {
    height: inherit;
  }
}

@media screen and (min-width: 64em) {
  .h1-l {
    height: 1rem;
  }

  .h2-l {
    height: 2rem;
  }

  .h3-l {
    height: 4rem;
  }

  .h4-l {
    height: 8rem;
  }

  .h5-l {
    height: 16rem;
  }

  .h-10-l {
    height: 10%;
  }

  .h-20-l {
    height: 20%;
  }

  .h-25-l {
    height: 25%;
  }

  .h-40-l {
    height: 40%;
  }

  .h-50-l {
    height: 50%;
  }

  .h-60-l {
    height: 60%;
  }

  .h-75-l {
    height: 75%;
  }

  .h-80-l {
    height: 80%;
  }

  .h-100-l {
    height: 100%;
  }

  .h-bb-l {
    height: border-box;
  }

  .h-cb-l {
    height: content-box;
  }

  .h-mx-l {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }

  .h-mn-l {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }

  .h-av-l {
    height: available;
  }

  .h-fc-l {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-at-l {
    height: auto;
  }

  .h-i-l {
    height: inherit;
  }
}

/*

   IMAGES

*/

/* Responsive images! */

img {
  max-width: 100%;
}

/*

   LETTER SPACING

*/

.tracked {
  letter-spacing: .16em;
}

.tracked-tight {
  letter-spacing: -.1em;
}

.mega-tracked {
  letter-spacing: .3em;
}

@media screen and (min-width: 42em) {
  .tracked-ns {
    letter-spacing: .16em;
  }

  .tracked-tight-ns {
    letter-spacing: -.1em;
  }

  .mega-tracked-ns {
    letter-spacing: .3em;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .tracked-m {
    letter-spacing: .16em;
  }

  .tracked-tight-m {
    letter-spacing: -.1em;
  }

  .mega-tracked-m {
    letter-spacing: .3em;
  }
}

@media screen and (min-width: 64em) {
  .tracked-l {
    letter-spacing: .16em;
  }

  .tracked-tight-l {
    letter-spacing: -.1em;
  }

  .mega-tracked-l {
    letter-spacing: .3em;
  }
}

/*

   LINE HEIGHT

*/

.lh {
  line-height: 1;
}

.lh-title {
  line-height: 1.3;
}

.lh-copy {
  line-height: 1.6;
}

@media screen and (min-width: 42em) {
  .lh-ns {
    line-height: 1;
  }

  .lh-title-ns {
    line-height: 1.3;
  }

  .lh-copy-ns {
    line-height: 1.6;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .lh-m {
    line-height: 1;
  }

  .lh-title-m {
    line-height: 1.3;
  }

  .lh-copy-m {
    line-height: 1.6;
  }
}

@media screen and (min-width: 64em) {
  .lh-l {
    line-height: 1;
  }

  .lh-title-l {
    line-height: 1.3;
  }

  .lh-copy-l {
    line-height: 1.6;
  }
}

/*

   LINKS

*/

.link {
  text-decoration: none;
  transition: color .15s ease-in;
}

.link:link,
.link:visited {
  color: #2D243B;
  transition: color .15s ease-in;
}

.link:hover {
  color: #999999;
  transition: color .15s ease-in;
}

.link:active {
  color: #C4E3E0;
  transition: color .15s ease-in;
}

.link:focus {
  color: #2D243B;
  transition: color .15s ease-in;
}

.underline {
  text-decoration: underline;
}

.underline-hover:hover {
  text-decoration: underline;
}

/*

   LISTS

*/

.list {
  list-style-type: none;
}

@media screen and (min-width: 42em) {
  .list-ns {
    list-style-type: none;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .list-m {
    list-style: none;
  }
}

@media screen and (min-width: 64em) {
  .list-l {
    list-style-type: none;
  }
}

/*

   MAX WIDTHS

*/

.mw-100 {
  max-width: 100%;
}

.mw-75 {
  max-width: 75%;
}

.mw-50 {
  max-width: 50%;
}

.mw-25 {
  max-width: 25%;
}

.mw1 {
  max-width: 1rem;
}

.mw2 {
  max-width: 2rem;
}

.mw3 {
  max-width: 4rem;
}

.mw4 {
  max-width: 8rem;
}

.mw5 {
  max-width: 16rem;
}

.mw6 {
  max-width: 32rem;
}

.mw7 {
  max-width: 48rem;
}

.mw8 {
  max-width: 64rem;
}

.mw9 {
  max-width: 96rem;
}

.mw10 {
  max-width: 128rem;
}

.mw-none {
  max-width: none;
}

.mw-max {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.mw-min {
  max-width: -webkit-min-content;
  max-width: -moz-min-content;
  max-width: min-content;
}

.mw-fit {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.mw-fill {
  max-width: -webkit-fill-available;
  max-width: -moz-available;
  max-width: fill-available;
}

@media screen and (min-width: 42em) {
  .mw-100-ns {
    max-width: 100%;
  }

  .mw-75-ns {
    max-width: 75%;
  }

  .mw-50-ns {
    max-width: 50%;
  }

  .mw-25-ns {
    max-width: 25%;
  }

  .mw1-ns {
    max-width: 1rem;
  }

  .mw2-ns {
    max-width: 2rem;
  }

  .mw3-ns {
    max-width: 4rem;
  }

  .mw4-ns {
    max-width: 8rem;
  }

  .mw5-ns {
    max-width: 16rem;
  }

  .mw6-ns {
    max-width: 32rem;
  }

  .mw7-ns {
    max-width: 48rem;
  }

  .mw8-ns {
    max-width: 64rem;
  }

  .mw9-ns {
    max-width: 96rem;
  }

  .mw10-ns {
    max-width: 128rem;
  }

  .mw-none-ns {
    max-width: none;
  }

  .mw-max-ns {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .mw-min-ns {
    max-width: -webkit-min-content;
    max-width: -moz-min-content;
    max-width: min-content;
  }

  .mw-fit-ns {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .mw-fill-ns {
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    max-width: fill-available;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .mw-100-m {
    max-width: 100%;
  }

  .mw-75-m {
    max-width: 75%;
  }

  .mw-50-m {
    max-width: 50%;
  }

  .mw-25-m {
    max-width: 25%;
  }

  .mw1-m {
    max-width: 1rem;
  }

  .mw2-m {
    max-width: 2rem;
  }

  .mw3-m {
    max-width: 4rem;
  }

  .mw4-m {
    max-width: 8rem;
  }

  .mw5-m {
    max-width: 16rem;
  }

  .mw6-m {
    max-width: 32rem;
  }

  .mw7-m {
    max-width: 48rem;
  }

  .mw8-m {
    max-width: 64rem;
  }

  .mw9-m {
    max-width: 96rem;
  }

  .mw10-m {
    max-width: 128rem;
  }

  .mw-none-m {
    max-width: none;
  }

  .mw-max-m {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .mw-min-m {
    max-width: -webkit-min-content;
    max-width: -moz-min-content;
    max-width: min-content;
  }

  .mw-fit-m {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .mw-fill-m {
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    max-width: fill-available;
  }
}

@media screen and (min-width: 64em) {
  .mw-100-l {
    max-width: 100%;
  }

  .mw-75-l {
    max-width: 75%;
  }

  .mw-50-l {
    max-width: 50%;
  }

  .mw-25-l {
    max-width: 25%;
  }

  .mw1-l {
    max-width: 1rem;
  }

  .mw2-l {
    max-width: 2rem;
  }

  .mw3-l {
    max-width: 4rem;
  }

  .mw4-l {
    max-width: 8rem;
  }

  .mw5-l {
    max-width: 16rem;
  }

  .mw6-l {
    max-width: 32rem;
  }

  .mw7-l {
    max-width: 48rem;
  }

  .mw8-l {
    max-width: 64rem;
  }

  .mw9-l {
    max-width: 96rem;
  }

  .mw10-l {
    max-width: 128rem;
  }

  .mw-none-l {
    max-width: none;
  }

  .mw-max-l {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .mw-min-l {
    max-width: -webkit-min-content;
    max-width: -moz-min-content;
    max-width: min-content;
  }

  .mw-fit-l {
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .mw-fill-l {
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    max-width: fill-available;
  }
}

/*

   WIDTHS

*/

/* Width Scale */

.w1 {
  width: 1rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 4rem;
}

.w4 {
  width: 8rem;
}

.w5 {
  width: 16rem;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-100 {
  width: 100%;
}

.w-at {
  width: auto;
}

@media screen and (min-width: 42em) {
  .w1-ns {
    width: 1rem;
  }

  .w2-ns {
    width: 2rem;
  }

  .w3-ns {
    width: 4rem;
  }

  .w4-ns {
    width: 8rem;
  }

  .w5-ns {
    width: 16rem;
  }

  .w-10-ns {
    width: 10%;
  }

  .w-20-ns {
    width: 20%;
  }

  .w-25-ns {
    width: 25%;
  }

  .w-33-ns {
    width: 33%;
  }

  .w-34-ns {
    width: 34%;
  }

  .w-40-ns {
    width: 40%;
  }

  .w-50-ns {
    width: 50%;
  }

  .w-60-ns {
    width: 60%;
  }

  .w-75-ns {
    width: 75%;
  }

  .w-80-ns {
    width: 80%;
  }

  .w-100-ns {
    width: 100%;
  }

  .w-at-ns {
    width: auto;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .w1-m {
    width: 1rem;
  }

  .w2-m {
    width: 2rem;
  }

  .w3-m {
    width: 4rem;
  }

  .w4-m {
    width: 8rem;
  }

  .w5-m {
    width: 16rem;
  }

  .w-10-m {
    width: 10%;
  }

  .w-20-m {
    width: 20%;
  }

  .w-25-m {
    width: 25%;
  }

  .w-33-m {
    width: 33%;
  }

  .w-34-m {
    width: 34%;
  }

  .w-40-m {
    width: 40%;
  }

  .w-50-m {
    width: 50%;
  }

  .w-60-m {
    width: 60%;
  }

  .w-75-m {
    width: 75%;
  }

  .w-80-m {
    width: 80%;
  }

  .w-100-m {
    width: 100%;
  }

  .w-at-m {
    width: auto;
  }
}

@media screen and (min-width: 64em) {
  .w1-l {
    width: 1rem;
  }

  .w2-l {
    width: 2rem;
  }

  .w3-l {
    width: 4rem;
  }

  .w4-l {
    width: 8rem;
  }

  .w5-l {
    width: 16rem;
  }

  .w-10-l {
    width: 10%;
  }

  .w-20-l {
    width: 20%;
  }

  .w-25-l {
    width: 25%;
  }

  .w-33-l {
    width: 33%;
  }

  .w-34-l {
    width: 34%;
  }

  .w-40-l {
    width: 40%;
  }

  .w-50-l {
    width: 50%;
  }

  .w-60-l {
    width: 60%;
  }

  .w-75-l {
    width: 75%;
  }

  .w-80-l {
    width: 80%;
  }

  .w-100-l {
    width: 100%;
  }

  .w-at-l {
    width: auto;
  }
}

/*

    OVERFLOWS

 */

.of-vis {
  overflow: visible;
}

.of-hid {
  overflow: hidden;
}

.of-scr {
  overflow: scroll;
}

.of-aut {
  overflow: auto;
}

.ofx-vis {
  overflow-x: visible;
}

.ofx-hid {
  overflow-x: hidden;
}

.ofx-scr {
  overflow-x: scroll;
}

.ofx-aut {
  overflow-x: auto;
}

.ofy-vis {
  overflow-y: visible;
}

.ofy-hid {
  overflow-y: hidden;
}

.ofy-scr {
  overflow-y: scroll;
}

.ofy-aut {
  overflow-y: auto;
}

@media screen and (min-width: 42em) {
  .of-vis-ns {
    overflow: visible;
  }

  .of-hid-ns {
    overflow: hidden;
  }

  .of-scr-ns {
    overflow: scroll;
  }

  .of-aut-ns {
    overflow: auto;
  }

  .ofx-vis-ns {
    overflow-x: visible;
  }

  .ofx-hid-ns {
    overflow-x: hidden;
  }

  .ofx-scr-ns {
    overflow-x: scroll;
  }

  .ofx-aut-ns {
    overflow-x: auto;
  }

  .ofy-vis-ns {
    overflow-y: visible;
  }

  .ofy-hid-ns {
    overflow-y: hidden;
  }

  .ofy-scr-ns {
    overflow-y: scroll;
  }

  .ofy-aut-ns {
    overflow-y: auto;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .of-vis-m {
    overflow: visible;
  }

  .of-hid-m {
    overflow: hidden;
  }

  .of-scr-m {
    overflow: scroll;
  }

  .of-aut-m {
    overflow: auto;
  }

  .ofx-vis-m {
    overflow-x: visible;
  }

  .ofx-hid-m {
    overflow-x: hidden;
  }

  .ofx-scr-m {
    overflow-x: scroll;
  }

  .ofx-aut-m {
    overflow-x: auto;
  }

  .ofy-vis-m {
    overflow-y: visible;
  }

  .ofy-hid-m {
    overflow-y: hidden;
  }

  .ofy-scr-m {
    overflow-y: scroll;
  }

  .ofy-aut-m {
    overflow-y: auto;
  }
}

@media screen and (min-width: 64em) {
  .of-vis-l {
    overflow: visible;
  }

  .of-hid-l {
    overflow: hidden;
  }

  .of-scr-l {
    overflow: scroll;
  }

  .of-aut-l {
    overflow: auto;
  }

  .ofx-vis-l {
    overflow-x: visible;
  }

  .ofx-hid-l {
    overflow-x: hidden;
  }

  .ofx-scr-l {
    overflow-x: scroll;
  }

  .ofx-aut-l {
    overflow-x: auto;
  }

  .ofy-vis-l {
    overflow-y: visible;
  }

  .ofy-hid-l {
    overflow-y: hidden;
  }

  .ofy-scr-l {
    overflow-y: scroll;
  }

  .ofy-aut-l {
    overflow-y: auto;
  }
}

/*

    POSITIONING

 */

.pos-stat {
  position: static;
}

.pos-rel {
  position: relative;
}

.pos-abs {
  position: absolute;
}

.pos-fix {
  position: fixed;
}

/* Values */

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.top-1 {
  top: 1rem;
}

.left-1 {
  left: 1rem;
}

.right-1 {
  right: 1rem;
}

.bottom-1 {
  bottom: 1rem;
}

.top-2 {
  top: 2rem;
}

.left-2 {
  left: 2rem;
}

.right-2 {
  right: 2rem;
}

.bottom-2 {
  bottom: 2rem;
}

.top-4 {
  top: 4rem;
}

.left-4 {
  left: 4rem;
}

.right-4 {
  right: 4rem;
}

.bottom-4 {
  bottom: 4rem;
}

/* Top Percentage based scale */

.top-auto {
  top: auto;
}

.top-i {
  top: inherit;
}

.center {
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 42em) {
  .pos-stat-ns {
    position: static;
  }

  .pos-rel-ns {
    position: relative;
  }

  .pos-abs-ns {
    position: absolute;
  }

  .pos-fix-ns {
    position: fixed;
  }

  .top-0-ns {
    top: 0;
  }

  .left-0-ns {
    left: 0;
  }

  .right-0-ns {
    right: 0;
  }

  .bottom-0-ns {
    bottom: 0;
  }

  .top-1-ns {
    top: 1rem;
  }

  .left-1-ns {
    left: 1rem;
  }

  .right-1-ns {
    right: 1rem;
  }

  .bottom-1-ns {
    bottom: 1rem;
  }

  .top-2-ns {
    top: 2rem;
  }

  .left-2-ns {
    left: 2rem;
  }

  .right-2-ns {
    right: 2rem;
  }

  .bottom-2-ns {
    bottom: 2rem;
  }

  .top-4-ns {
    top: 4rem;
  }

  .left-4-ns {
    left: 4rem;
  }

  .right-4-ns {
    right: 4rem;
  }

  .bottom-4-ns {
    bottom: 4rem;
  }

  .top-auto-ns {
    top: auto;
  }

  .top-i-ns {
    top: inherit;
  }

  .center-ns {
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .pos-stat-m {
    position: static;
  }

  .pos-rel-m {
    position: relative;
  }

  .pos-abs-m {
    position: absolute;
  }

  .pos-fix-m {
    position: fixed;
  }

  .top-0-m {
    top: 0;
  }

  .left-0-m {
    left: 0;
  }

  .right-0-m {
    right: 0;
  }

  .bottom-0-m {
    bottom: 0;
  }

  .top-1-m {
    top: 1rem;
  }

  .left-1-m {
    left: 1rem;
  }

  .right-1-m {
    right: 1rem;
  }

  .bottom-1-m {
    bottom: 1rem;
  }

  .top-2-m {
    top: 2rem;
  }

  .left-2-m {
    left: 2rem;
  }

  .right-2-m {
    right: 2rem;
  }

  .bottom-2-m {
    bottom: 2rem;
  }

  .top-4-m {
    top: 4rem;
  }

  .left-4-m {
    left: 4rem;
  }

  .right-4-m {
    right: 4rem;
  }

  .bottom-4-m {
    bottom: 4rem;
  }

  .top-auto-m {
    top: auto;
  }

  .top-i-m {
    top: inherit;
  }

  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (min-width: 64em) {
  .pos-stat-l {
    position: static;
  }

  .pos-rel-l {
    position: relative;
  }

  .pos-abs-l {
    position: absolute;
  }

  .pos-fix-l {
    position: fixed;
  }

  .top-0-l {
    top: 0;
  }

  .left-0-l {
    left: 0;
  }

  .right-0-l {
    right: 0;
  }

  .bottom-0-l {
    bottom: 0;
  }

  .top-1-l {
    top: 1rem;
  }

  .left-1-l {
    left: 1rem;
  }

  .right-1-l {
    right: 1rem;
  }

  .bottom-1-l {
    bottom: 1rem;
  }

  .top-2-l {
    top: 2rem;
  }

  .left-2-l {
    left: 2rem;
  }

  .right-2-l {
    right: 2rem;
  }

  .bottom-2-l {
    bottom: 2rem;
  }

  .top-4-l {
    top: 4rem;
  }

  .left-4-l {
    left: 4rem;
  }

  .right-4-l {
    right: 4rem;
  }

  .bottom-4-l {
    bottom: 4rem;
  }

  .top-auto-l {
    top: auto;
  }

  .top-i-l {
    top: inherit;
  }

  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
}

/*

   SKINS

*/

/* Text colors */

.black-90 {
  color: rgba(0, 0, 0, .9);
}

.black-80 {
  color: rgba(0, 0, 0, .8);
}

.black-70 {
  color: rgba(0, 0, 0, .7);
}

.black-60 {
  color: rgba(0, 0, 0, .6);
}

.black-50 {
  color: rgba(0, 0, 0, .5);
}

.black-40 {
  color: rgba(0, 0, 0, .4);
}

.black-30 {
  color: rgba(0, 0, 0, .3);
}

.black-20 {
  color: rgba(0, 0, 0, .2);
}

.black-10 {
  color: rgba(0, 0, 0, .1);
}

.white-90 {
  color: rgba(255, 255, 255, .9);
}

.white-80 {
  color: rgba(255, 255, 255, .8);
}

.white-70 {
  color: rgba(255, 255, 255, .7);
}

.white-60 {
  color: rgba(255, 255, 255, .6);
}

.white-50 {
  color: rgba(255, 255, 255, .5);
}

.white-40 {
  color: rgba(255, 255, 255, .4);
}

.white-30 {
  color: rgba(255, 255, 255, .3);
}

.white-20 {
  color: rgba(255, 255, 255, .2);
}

.white-10 {
  color: rgba(255, 255, 255, .1);
}

.black {
  color: #111;
}

.dark-gray {
  color: #333;
}

.mid-gray {
  color: #555;
}

.gray {
  color: #777;
}

.silver {
  color: #999;
}

.light-silver {
  color: #aaa;
}

.light-gray {
  color: #eee;
}

.near-white {
  color: #f4f4f4;
}

.white {
  color: #fff;
}

.blue {
  color: #0074D9;
}

.light-blue {
  color: #64a8ff;
}

.lightest-blue {
  color: #a2dfff;
}

.dark-blue {
  color: #0045a1;
}

.darkest-blue {
  color: #002f86;
}

.yellow {
  color: #fff93c;
}

.light-yellow {
  color: #fffa60;
}

.lightest-yellow {
  color: #fffca6;
}

.dark-yellow {
  color: #e2c100;
}

.darkest-yellow {
  color: #c4a600;
}

.orange {
  color: #FF851B;
}

.light-orange {
  color: #ffa942;
}

.lightest-orange {
  color: #ffc55d;
}

.dark-orange {
  color: #d05e00;
}

.darkest-orange {
  color: #b14400;
}

.red {
  color: #d82c2c;
}

.light-red {
  color: #f94f44;
}

.lightest-red {
  color: #ff6c5c;
}

.dark-red {
  color: #bd001a;
}

.darkest-red {
  color: #9d0003;
}

.teal {
  color: #27bfa8;
}

.light-teal {
  color: #4eddc5;
}

.lightest-teal {
  color: #6ffae0;
}

.dark-teal {
  color: #25a28f;
}

.darkest-teal {
  color: #008876;
}

.green {
  color: #3D9970;
}

.light-green {
  color: #5ab48a;
}

.lightest-green {
  color: #75d0a4;
}

.dark-green {
  color: #1e7f58;
}

.darkest-green {
  color: #006540;
}

.pink {
  color: #F012BE;
}

.light-pink {
  color: #ff57e8;
}

.lightest-pink {
  color: #ff81ff;
}

.dark-pink {
  color: #d100a3;
}

.darkest-pink {
  color: #b20088;
}

.purple {
  color: #980bc6;
}

.light-purple {
  color: #b536e2;
}

.lightest-purple {
  color: #d355ff;
}

.dark-purple {
  color: #7b00a9;
}

.darkest-purple {
  color: #5f008e;
}

/* Background colors */

.bg-black {
  background-color: #111;
}

.bg-dark-gray {
  background-color: #333;
}

.bg-mid-gray {
  background-color: #555;
}

.bg-gray {
  background-color: #777;
}

.bg-silver {
  background-color: #999;
}

.bg-light-silver {
  background-color: #aaa;
}

.bg-light-gray {
  background-color: #eee;
}

.bg-near-white {
  background-color: #f4f4f4;
}

.bg-white {
  background-color: #fff;
}

.bg-blue {
  background-color: #0074D9;
}

.bg-light-blue {
  background-color: #64a8ff;
}

.bg-lightest-blue {
  background-color: #a2dfff;
}

.bg-dark-blue {
  background-color: #0045a1;
}

.bg-darkest-blue {
  background-color: #002f86;
}

.bg-yellow {
  background-color: #fff93c;
}

.bg-light-yellow {
  background-color: #fffa60;
}

.bg-lightest-yellow {
  background-color: #fffca6;
}

.bg-dark-yellow {
  background-color: #e2c100;
}

.bg-darkest-yellow {
  background-color: #c4a600;
}

.bg-orange {
  background-color: #FF851B;
}

.bg-light-orange {
  background-color: #ffa942;
}

.bg-lightest-orange {
  background-color: #ffc55d;
}

.bg-dark-orange {
  background-color: #d05e00;
}

.bg-darkest-orange {
  background-color: #b14400;
}

.bg-red {
  background-color: #d82c2c;
}

.bg-light-red {
  background-color: #f94f44;
}

.bg-lightest-red {
  background-color: #ff6c5c;
}

.bg-dark-red {
  background-color: #bd001a;
}

.bg-darkest-red {
  background-color: #9d0003;
}

.bg-teal {
  background-color: #27bfa8;
}

.bg-light-teal {
  background-color: #4eddc5;
}

.bg-lightest-teal {
  background-color: #6ffae0;
}

.bg-dark-teal {
  background-color: #25a28f;
}

.bg-darkest-teal {
  background-color: #008876;
}

.bg-green {
  background-color: #3D9970;
}

.bg-light-green {
  background-color: #5ab48a;
}

.bg-lightest-green {
  background-color: #75d0a4;
}

.bg-dark-green {
  background-color: #1e7f58;
}

.bg-darkest-green {
  background-color: #006540;
}

.bg-pink {
  background-color: #F012BE;
}

.bg-light-pink {
  background-color: #ff57e8;
}

.bg-lightest-pink {
  background-color: #ff81ff;
}

.bg-dark-pink {
  background-color: #d100a3;
}

.bg-darkest-pink {
  background-color: #b20088;
}

.bg-purple {
  background-color: #980bc6;
}

.bg-light-purple {
  background-color: #b536e2;
}

.bg-lightest-purple {
  background-color: #d355ff;
}

.bg-dark-purple {
  background-color: #7b00a9;
}

.bg-darkest-purple {
  background-color: #5f008e;
}

/* Skins for specific pseudoclasses */

.focus-black:focus {
  color: #000;
}

.focus-near-black:focus {
  color: #111;
}

.focus-dark-gray:focus {
  color: #333;
}

.focus-mid-gray:focus {
  color: #555;
}

.focus-gray:focus {
  color: #777;
}

.focus-silver:focus {
  color: #999;
}

.focus-light-silver:focus {
  color: #aaa;
}

.focus-moon-gray:focus {
  color: #ccc;
}

.focus-light-gray:focus {
  color: #eee;
}

.focus-near-white:focus {
  color: #f4f4f4;
}

.focus-white:focus {
  color: #fff;
}

.focus-blue:focus {
  color: #0074D9;
}

.focus-light-blue:focus {
  color: #64a8ff;
}

.focus-lightest-blue:focus {
  color: #a2dfff;
}

.focus-dark-blue:focus {
  color: #0045a1;
}

.focus-darkest-blue:focus {
  color: #002f86;
}

.focus-yellow:focus {
  color: #fff93c;
}

.focus-light-yellow:focus {
  color: #fffa60;
}

.focus-lightest-yellow:focus {
  color: #fffca6;
}

.focus-dark-yellow:focus {
  color: #e2c100;
}

.focus-darkest-yellow:focus {
  color: #c4a600;
}

.focus-orange:focus {
  color: #FF851B;
}

.focus-light-orange:focus {
  color: #ffa942;
}

.focus-lightest-orange:focus {
  color: #ffc55d;
}

.focus-dark-orange:focus {
  color: #d05e00;
}

.focus-darkest-orange:focus {
  color: #b14400;
}

.focus-red:focus {
  color: #d82c2c;
}

.focus-light-red:focus {
  color: #f94f44;
}

.focus-lightest-red:focus {
  color: #ff6c5c;
}

.focus-dark-red:focus {
  color: #bd001a;
}

.focus-darkest-red:focus {
  color: #9d0003;
}

.focus-teal:focus {
  color: #27bfa8;
}

.focus-light-teal:focus {
  color: #4eddc5;
}

.focus-lightest-teal:focus {
  color: #6ffae0;
}

.focus-dark-teal:focus {
  color: #25a28f;
}

.focus-darkest-teal:focus {
  color: #008876;
}

.focus-green:focus {
  color: #3D9970;
}

.focus-light-green:focus {
  color: #5ab48a;
}

.focus-lightest-green:focus {
  color: #75d0a4;
}

.focus-dark-green:focus {
  color: #1e7f58;
}

.focus-darkest-green:focus {
  color: #006540;
}

.focus-pink:focus {
  color: #F012BE;
}

.focus-light-pink:focus {
  color: #ff57e8;
}

.focus-lightest-pink:focus {
  color: #ff81ff;
}

.focus-dark-pink:focus {
  color: #d100a3;
}

.focus-darkest-pink:focus {
  color: #b20088;
}

.focus-purple:focus {
  color: #980bc6;
}

.focus-light-purple:focus {
  color: #b536e2;
}

.focus-lightest-purple:focus {
  color: #d355ff;
}

.focus-dark-purple:focus {
  color: #7b00a9;
}

.focus-darkest-purple:focus {
  color: #5f008e;
}

.bg-focus-black:focus {
  background-color: #000;
}

.bg-focus-near-black:focus {
  background-color: #111;
}

.bg-focus-dark-gray:focus {
  background-color: #333;
}

.bg-focus-mid-gray:focus {
  background-color: #555;
}

.bg-focus-gray:focus {
  background-color: #777;
}

.bg-focus-silver:focus {
  background-color: #999;
}

.bg-focus-light-silver:focus {
  background-color: #aaa;
}

.bg-focus-moon-gray:focus {
  background-color: #ccc;
}

.bg-focus-light-gray:focus {
  background-color: #eee;
}

.bg-focus-near-white:focus {
  background-color: #f4f4f4;
}

.bg-focus-white:focus {
  background-color: #fff;
}

.bg-focus-blue:focus {
  background-color: #0074D9;
}

.bg-focus-light-blue:focus {
  background-color: #64a8ff;
}

.bg-focus-lightest-blue:focus {
  background-color: #a2dfff;
}

.bg-focus-dark-blue:focus {
  background-color: #0045a1;
}

.bg-focus-darkest-blue:focus {
  background-color: #002f86;
}

.bg-focus-yellow:focus {
  background-color: #fff93c;
}

.bg-focus-light-yellow:focus {
  background-color: #fffa60;
}

.bg-focus-lightest-yellow:focus {
  background-color: #fffca6;
}

.bg-focus-dark-yellow:focus {
  background-color: #e2c100;
}

.bg-focus-darkest-yellow:focus {
  background-color: #c4a600;
}

.bg-focus-orange:focus {
  background-color: #FF851B;
}

.bg-focus-light-orange:focus {
  background-color: #ffa942;
}

.bg-focus-lightest-orange:focus {
  background-color: #ffc55d;
}

.bg-focus-dark-orange:focus {
  background-color: #d05e00;
}

.bg-focus-darkest-orange:focus {
  background-color: #b14400;
}

.bg-focus-red:focus {
  background-color: #d82c2c;
}

.bg-focus-light-red:focus {
  background-color: #f94f44;
}

.bg-focus-lightest-red:focus {
  background-color: #ff6c5c;
}

.bg-focus-dark-red:focus {
  background-color: #bd001a;
}

.bg-focus-darkest-red:focus {
  background-color: #9d0003;
}

.bg-focus-teal:focus {
  background-color: #27bfa8;
}

.bg-focus-light-teal:focus {
  background-color: #4eddc5;
}

.bg-focus-lightest-teal:focus {
  background-color: #6ffae0;
}

.bg-focus-dark-teal:focus {
  background-color: #25a28f;
}

.bg-focus-darkest-teal:focus {
  background-color: #008876;
}

.bg-focus-green:focus {
  background-color: #3D9970;
}

.bg-focus-light-green:focus {
  background-color: #5ab48a;
}

.bg-focus-lightest-green:focus {
  background-color: #75d0a4;
}

.bg-focus-dark-green:focus {
  background-color: #1e7f58;
}

.bg-focus-darkest-green:focus {
  background-color: #006540;
}

.bg-focus-pink:focus {
  background-color: #F012BE;
}

.bg-focus-light-pink:focus {
  background-color: #ff57e8;
}

.bg-focus-lightest-pink:focus {
  background-color: #ff81ff;
}

.bg-focus-dark-pink:focus {
  background-color: #d100a3;
}

.bg-focus-darkest-pink:focus {
  background-color: #b20088;
}

.bg-focus-purple:focus {
  background-color: #980bc6;
}

.bg-focus-light-purple:focus {
  background-color: #b536e2;
}

.bg-focus-lightest-purple:focus {
  background-color: #d355ff;
}

.bg-focus-dark-purple:focus {
  background-color: #7b00a9;
}

.bg-focus-darkest-purple:focus {
  background-color: #5f008e;
}

.hover-black:hover {
  color: #000;
}

.hover-near-black:hover {
  color: #111;
}

.hover-dark-gray:hover {
  color: #333;
}

.hover-mid-gray:hover {
  color: #555;
}

.hover-gray:hover {
  color: #777;
}

.hover-silver:hover {
  color: #999;
}

.hover-light-silver:hover {
  color: #aaa;
}

.hover-moon-gray:hover {
  color: #ccc;
}

.hover-light-gray:hover {
  color: #eee;
}

.hover-near-white:hover {
  color: #f4f4f4;
}

.hover-white:hover {
  color: #fff;
}

.hover-blue:hover {
  color: #0074D9;
}

.hover-light-blue:hover {
  color: #64a8ff;
}

.hover-lightest-blue:hover {
  color: #a2dfff;
}

.hover-dark-blue:hover {
  color: #0045a1;
}

.hover-darkest-blue:hover {
  color: #002f86;
}

.hover-yellow:hover {
  color: #fff93c;
}

.hover-light-yellow:hover {
  color: #fffa60;
}

.hover-lightest-yellow:hover {
  color: #fffca6;
}

.hover-dark-yellow:hover {
  color: #e2c100;
}

.hover-darkest-yellow:hover {
  color: #c4a600;
}

.hover-orange:hover {
  color: #FF851B;
}

.hover-light-orange:hover {
  color: #ffa942;
}

.hover-lightest-orange:hover {
  color: #ffc55d;
}

.hover-dark-orange:hover {
  color: #d05e00;
}

.hover-darkest-orange:hover {
  color: #b14400;
}

.hover-red:hover {
  color: #d82c2c;
}

.hover-light-red:hover {
  color: #f94f44;
}

.hover-lightest-red:hover {
  color: #ff6c5c;
}

.hover-dark-red:hover {
  color: #bd001a;
}

.hover-darkest-red:hover {
  color: #9d0003;
}

.hover-teal:hover {
  color: #27bfa8;
}

.hover-light-teal:hover {
  color: #4eddc5;
}

.hover-lightest-teal:hover {
  color: #6ffae0;
}

.hover-dark-teal:hover {
  color: #25a28f;
}

.hover-darkest-teal:hover {
  color: #008876;
}

.hover-green:hover {
  color: #3D9970;
}

.hover-light-green:hover {
  color: #5ab48a;
}

.hover-lightest-green:hover {
  color: #75d0a4;
}

.hover-dark-green:hover {
  color: #1e7f58;
}

.hover-darkest-green:hover {
  color: #006540;
}

.hover-pink:hover {
  color: #F012BE;
}

.hover-light-pink:hover {
  color: #ff57e8;
}

.hover-lightest-pink:hover {
  color: #ff81ff;
}

.hover-dark-pink:hover {
  color: #d100a3;
}

.hover-darkest-pink:hover {
  color: #b20088;
}

.hover-purple:hover {
  color: #980bc6;
}

.hover-light-purple:hover {
  color: #b536e2;
}

.hover-lightest-purple:hover {
  color: #d355ff;
}

.hover-dark-purple:hover {
  color: #7b00a9;
}

.hover-darkest-purple:hover {
  color: #5f008e;
}

.bg-hover-black:hover {
  background-color: #000;
}

.bg-hover-near-black:hover {
  background-color: #111;
}

.bg-hover-dark-gray:hover {
  background-color: #333;
}

.bg-hover-mid-gray:hover {
  background-color: #555;
}

.bg-hover-gray:hover {
  background-color: #777;
}

.bg-hover-silver:hover {
  background-color: #999;
}

.bg-hover-light-silver:hover {
  background-color: #aaa;
}

.bg-hover-moon-gray:hover {
  background-color: #ccc;
}

.bg-hover-light-gray:hover {
  background-color: #eee;
}

.bg-hover-near-white:hover {
  background-color: #f4f4f4;
}

.bg-hover-white:hover {
  background-color: #fff;
}

.bg-hover-blue:hover {
  background-color: #0074D9;
}

.bg-hover-light-blue:hover {
  background-color: #64a8ff;
}

.bg-hover-lightest-blue:hover {
  background-color: #a2dfff;
}

.bg-hover-dark-blue:hover {
  background-color: #0045a1;
}

.bg-hover-darkest-blue:hover {
  background-color: #002f86;
}

.bg-hover-yellow:hover {
  background-color: #fff93c;
}

.bg-hover-light-yellow:hover {
  background-color: #fffa60;
}

.bg-hover-lightest-yellow:hover {
  background-color: #fffca6;
}

.bg-hover-dark-yellow:hover {
  background-color: #e2c100;
}

.bg-hover-darkest-yellow:hover {
  background-color: #c4a600;
}

.bg-hover-orange:hover {
  background-color: #FF851B;
}

.bg-hover-light-orange:hover {
  background-color: #ffa942;
}

.bg-hover-lightest-orange:hover {
  background-color: #ffc55d;
}

.bg-hover-dark-orange:hover {
  background-color: #d05e00;
}

.bg-hover-darkest-orange:hover {
  background-color: #b14400;
}

.bg-hover-red:hover {
  background-color: #d82c2c;
}

.bg-hover-light-red:hover {
  background-color: #f94f44;
}

.bg-hover-lightest-red:hover {
  background-color: #ff6c5c;
}

.bg-hover-dark-red:hover {
  background-color: #bd001a;
}

.bg-hover-darkest-red:hover {
  background-color: #9d0003;
}

.bg-hover-teal:hover {
  background-color: #27bfa8;
}

.bg-hover-light-teal:hover {
  background-color: #4eddc5;
}

.bg-hover-lightest-teal:hover {
  background-color: #6ffae0;
}

.bg-hover-dark-teal:hover {
  background-color: #25a28f;
}

.bg-hover-darkest-teal:hover {
  background-color: #008876;
}

.bg-hover-green:hover {
  background-color: #3D9970;
}

.bg-hover-light-green:hover {
  background-color: #5ab48a;
}

.bg-hover-lightest-green:hover {
  background-color: #75d0a4;
}

.bg-hover-dark-green:hover {
  background-color: #1e7f58;
}

.bg-hover-darkest-green:hover {
  background-color: #006540;
}

.bg-hover-pink:hover {
  background-color: #F012BE;
}

.bg-hover-light-pink:hover {
  background-color: #ff57e8;
}

.bg-hover-lightest-pink:hover {
  background-color: #ff81ff;
}

.bg-hover-dark-pink:hover {
  background-color: #d100a3;
}

.bg-hover-darkest-pink:hover {
  background-color: #b20088;
}

.bg-hover-purple:hover {
  background-color: #980bc6;
}

.bg-hover-light-purple:hover {
  background-color: #b536e2;
}

.bg-hover-lightest-purple:hover {
  background-color: #d355ff;
}

.bg-hover-dark-purple:hover {
  background-color: #7b00a9;
}

.bg-hover-darkest-purple:hover {
  background-color: #5f008e;
}

.dim {
  opacity: 1;
  transition: opacity .15s ease-in;
}

.dim:hover {
  opacity: .6;
  transition: opacity .15s ease-in;
}

.dim:active,
.dim:focus {
  opacity: .8;
  transition: opacity .15s ease-out;
}

/* SVG Fills */

.fill-black {
  fill: #000;
}

.fill-near-black {
  fill: #111;
}

.fill-dark-gray {
  fill: #333;
}

.fill-mid-gray {
  fill: #555;
}

.fill-gray {
  fill: #777;
}

.fill-silver {
  fill: #999;
}

.fill-light-silver {
  fill: #aaa;
}

.fill-moon-gray {
  fill: #ccc;
}

.fill-light-gray {
  fill: #eee;
}

.fill-near-white {
  fill: #f4f4f4;
}

.fill-white {
  fill: #fff;
}

.fill-blue {
  fill: #0074D9;
}

.fill-light-blue {
  fill: #64a8ff;
}

.fill-lightest-blue {
  fill: #a2dfff;
}

.fill-dark-blue {
  fill: #0045a1;
}

.fill-darkest-blue {
  fill: #002f86;
}

.fill-yellow {
  fill: #fff93c;
}

.fill-light-yellow {
  fill: #fffa60;
}

.fill-lightest-yellow {
  fill: #fffca6;
}

.fill-dark-yellow {
  fill: #e2c100;
}

.fill-darkest-yellow {
  fill: #c4a600;
}

.fill-orange {
  fill: #FF851B;
}

.fill-light-orange {
  fill: #ffa942;
}

.fill-lightest-orange {
  fill: #ffc55d;
}

.fill-dark-orange {
  fill: #d05e00;
}

.fill-darkest-orange {
  fill: #b14400;
}

.fill-red {
  fill: #d82c2c;
}

.fill-light-red {
  fill: #f94f44;
}

.fill-lightest-red {
  fill: #ff6c5c;
}

.fill-dark-red {
  fill: #bd001a;
}

.fill-darkest-red {
  fill: #9d0003;
}

.fill-teal {
  fill: #27bfa8;
}

.fill-light-teal {
  fill: #4eddc5;
}

.fill-lightest-teal {
  fill: #6ffae0;
}

.fill-dark-teal {
  fill: #25a28f;
}

.fill-darkest-teal {
  fill: #008876;
}

.fill-green {
  fill: #3D9970;
}

.fill-light-green {
  fill: #5ab48a;
}

.fill-lightest-green {
  fill: #75d0a4;
}

.fill-dark-green {
  fill: #1e7f58;
}

.fill-darkest-green {
  fill: #006540;
}

.fill-pink {
  fill: #F012BE;
}

.fill-light-pink {
  fill: #ff57e8;
}

.fill-lightest-pink {
  fill: #ff81ff;
}

.fill-dark-pink {
  fill: #d100a3;
}

.fill-darkest-pink {
  fill: #b20088;
}

.fill-purple {
  fill: #980bc6;
}

.fill-light-purple {
  fill: #b536e2;
}

.fill-lightest-purple {
  fill: #d355ff;
}

.fill-dark-purple {
  fill: #7b00a9;
}

.fill-darkest-purple {
  fill: #5f008e;
}

/* SVG Strokes */

.sw-4 {
  stroke-width: 4;
}

.stroke-black {
  stroke: #000;
}

.stroke-near-black {
  stroke: #111;
}

.stroke-dark-gray {
  stroke: #333;
}

.stroke-mid-gray {
  stroke: #555;
}

.stroke-gray {
  stroke: #777;
}

.stroke-silver {
  stroke: #999;
}

.stroke-light-silver {
  stroke: #aaa;
}

.stroke-moon-gray {
  stroke: #ccc;
}

.stroke-light-gray {
  stroke: #eee;
}

.stroke-near-white {
  stroke: #f4f4f4;
}

.stroke-white {
  stroke: #fff;
}

.stroke-blue {
  stroke: #0074D9;
}

.stroke-light-blue {
  stroke: #64a8ff;
}

.stroke-lightest-blue {
  stroke: #a2dfff;
}

.stroke-dark-blue {
  stroke: #0045a1;
}

.stroke-darkest-blue {
  stroke: #002f86;
}

.stroke-yellow {
  stroke: #fff93c;
}

.stroke-light-yellow {
  stroke: #fffa60;
}

.stroke-lightest-yellow {
  stroke: #fffca6;
}

.stroke-dark-yellow {
  stroke: #e2c100;
}

.stroke-darkest-yellow {
  stroke: #c4a600;
}

.stroke-orange {
  stroke: #FF851B;
}

.stroke-light-orange {
  stroke: #ffa942;
}

.stroke-lightest-orange {
  stroke: #ffc55d;
}

.stroke-dark-orange {
  stroke: #d05e00;
}

.stroke-darkest-orange {
  stroke: #b14400;
}

.stroke-red {
  stroke: #d82c2c;
}

.stroke-light-red {
  stroke: #f94f44;
}

.stroke-lightest-red {
  stroke: #ff6c5c;
}

.stroke-dark-red {
  stroke: #bd001a;
}

.stroke-darkest-red {
  stroke: #9d0003;
}

.stroke-teal {
  stroke: #27bfa8;
}

.stroke-light-teal {
  stroke: #4eddc5;
}

.stroke-lightest-teal {
  stroke: #6ffae0;
}

.stroke-dark-teal {
  stroke: #25a28f;
}

.stroke-darkest-teal {
  stroke: #008876;
}

.stroke-green {
  stroke: #3D9970;
}

.stroke-light-green {
  stroke: #5ab48a;
}

.stroke-lightest-green {
  stroke: #75d0a4;
}

.stroke-dark-green {
  stroke: #1e7f58;
}

.stroke-darkest-green {
  stroke: #006540;
}

.stroke-pink {
  stroke: #F012BE;
}

.stroke-light-pink {
  stroke: #ff57e8;
}

.stroke-lightest-pink {
  stroke: #ff81ff;
}

.stroke-dark-pink {
  stroke: #d100a3;
}

.stroke-darkest-pink {
  stroke: #b20088;
}

.stroke-purple {
  stroke: #980bc6;
}

.stroke-light-purple {
  stroke: #b536e2;
}

.stroke-lightest-purple {
  stroke: #d355ff;
}

.stroke-dark-purple {
  stroke: #7b00a9;
}

.stroke-darkest-purple {
  stroke: #5f008e;
}

/*
   SPACING

   An eight step powers of two scale ranging from 0 to 16rem.

   Legend:

   p = padding
   m = margin

   a = all
   h = horizontal
   v = vertical
   t = top
   r = right
   b = bottom
   l = left

   n = none
   xs = extra small
   s = small
   m = medium
   l = large
   x = extra
   xl = extra large
   xxl = extra extra large

*/

.pan {
  padding: 0;
}

.paxs {
  padding: .25rem;
}

.pas {
  padding: .5rem;
}

.pam {
  padding: 1rem;
}

.pal {
  padding: 2rem;
}

.pax {
  padding: 4rem;
}

.paxl {
  padding: 8rem;
}

.paxxl {
  padding: 16rem;
}

.pln {
  padding-left: 0;
}

.plxs {
  padding-left: .25rem;
}

.pls {
  padding-left: .5rem;
}

.plm {
  padding-left: 1rem;
}

.pll {
  padding-left: 2rem;
}

.plx {
  padding-left: 4rem;
}

.plxl {
  padding-left: 8rem;
}

.plxxl {
  padding-left: 16rem;
}

.prn {
  padding-right: 0;
}

.prxs {
  padding-right: .25rem;
}

.prs {
  padding-right: .5rem;
}

.prm {
  padding-right: 1rem;
}

.prl {
  padding-right: 2rem;
}

.prx {
  padding-right: 4rem;
}

.prxl {
  padding-right: 8rem;
}

.prxxl {
  padding-right: 16rem;
}

.pbn {
  padding-bottom: 0;
}

.pbxs {
  padding-bottom: .25rem;
}

.pbs {
  padding-bottom: .5rem;
}

.pbm {
  padding-bottom: 1rem;
}

.pbl {
  padding-bottom: 2rem;
}

.pbx {
  padding-bottom: 4rem;
}

.pbxl {
  padding-bottom: 8rem;
}

.pbxxl {
  padding-bottom: 16rem;
}

.ptn {
  padding-top: 0;
}

.ptxs {
  padding-top: .25rem;
}

.pts {
  padding-top: .5rem;
}

.ptm {
  padding-top: 1rem;
}

.ptl {
  padding-top: 2rem;
}

.ptx {
  padding-top: 4rem;
}

.ptxl {
  padding-top: 8rem;
}

.ptxxl {
  padding-top: 16rem;
}

.pvn {
  padding-top: 0;
  padding-bottom: 0;
}

.pvxs {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.pvs {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.pvm {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pvl {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pvx {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pvxl {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.pvxxl {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.phn {
  padding-left: 0;
  padding-right: 0;
}

.phxs {
  padding-left: .25rem;
  padding-right: .25rem;
}

.phs {
  padding-left: .5rem;
  padding-right: .5rem;
}

.phm {
  padding-left: 1rem;
  padding-right: 1rem;
}

.phl {
  padding-left: 2rem;
  padding-right: 2rem;
}

.phx {
  padding-left: 4rem;
  padding-right: 4rem;
}

.phxl {
  padding-left: 8rem;
  padding-right: 8rem;
}

.phxxl {
  padding-left: 16rem;
  padding-right: 16rem;
}

.man {
  margin: 0;
}

.maxs {
  margin: .25rem;
}

.mas {
  margin: .5rem;
}

.mam {
  margin: 1rem;
}

.mal {
  margin: 2rem;
}

.max {
  margin: 4rem;
}

.maxl {
  margin: 8rem;
}

.maxxl {
  margin: 16rem;
}

.mln {
  margin-left: 0;
}

.mlxs {
  margin-left: .25rem;
}

.mls {
  margin-left: .5rem;
}

.mlm {
  margin-left: 1rem;
}

.mll {
  margin-left: 2rem;
}

.mlx {
  margin-left: 4rem;
}

.mlxl {
  margin-left: 8rem;
}

.mlxxl {
  margin-left: 16rem;
}

.mrn {
  margin-right: 0;
}

.mrxs {
  margin-right: .25rem;
}

.mrs {
  margin-right: .5rem;
}

.mrm {
  margin-right: 1rem;
}

.mrl {
  margin-right: 2rem;
}

.mrx {
  margin-right: 4rem;
}

.mrxl {
  margin-right: 8rem;
}

.mrxxl {
  margin-right: 16rem;
}

.mbn {
  margin-bottom: 0;
}

.mbxs {
  margin-bottom: .25rem;
}

.mbs {
  margin-bottom: .5rem;
}

.mbm {
  margin-bottom: 1rem;
}

.mbl {
  margin-bottom: 2rem;
}

.mbx {
  margin-bottom: 4rem;
}

.mbxl {
  margin-bottom: 8rem;
}

.mbxxl {
  margin-bottom: 16rem;
}

.mtn {
  margin-top: 0;
}

.mtxs {
  margin-top: .25rem;
}

.mts {
  margin-top: .5rem;
}

.mtm {
  margin-top: 1rem;
}

.mtl {
  margin-top: 2rem;
}

.mtx {
  margin-top: 4rem;
}

.mtxl {
  margin-top: 8rem;
}

.mtxxl {
  margin-top: 16rem;
}

.mvn {
  margin-top: 0;
  margin-bottom: 0rem;
}

.mvxs {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.mvs {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.mvm {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mvl {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mvx {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mvxl {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.mvxxl {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.mhn {
  margin-left: 0;
  margin-right: 0;
}

.mhs {
  margin-left: .5rem;
  margin-right: .5rem;
}

.mhm {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mhl {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mhx {
  margin-left: 4rem;
  margin-right: 4rem;
}

.mhxl {
  margin-left: 8rem;
  margin-right: 8rem;
}

.mhxxl {
  margin-left: 16rem;
  margin-right: 16rem;
}

@media screen and (min-width: 42em) {
  .pan-ns {
    padding: 0;
  }

  .paxs-ns {
    padding: .25rem;
  }

  .pas-ns {
    padding: .5rem;
  }

  .pam-ns {
    padding: 1rem;
  }

  .pal-ns {
    padding: 2rem;
  }

  .pax-ns {
    padding: 4rem;
  }

  .paxl-ns {
    padding: 8rem;
  }

  .paxxl-ns {
    padding: 16rem;
  }

  .pln-ns {
    padding-left: 0;
  }

  .plxs-ns {
    padding-left: .25rem;
  }

  .pls-ns {
    padding-left: .5rem;
  }

  .plm-ns {
    padding-left: 1rem;
  }

  .pll-ns {
    padding-left: 2rem;
  }

  .plx-ns {
    padding-left: 4rem;
  }

  .plxl-ns {
    padding-left: 8rem;
  }

  .plxxl-ns {
    padding-left: 16rem;
  }

  .prn-ns {
    padding-right: 0;
  }

  .prxs-ns {
    padding-right: .25rem;
  }

  .prs-ns {
    padding-right: .5rem;
  }

  .prm-ns {
    padding-right: 1rem;
  }

  .prl-ns {
    padding-right: 2rem;
  }

  .prx-ns {
    padding-right: 4rem;
  }

  .prxl-ns {
    padding-right: 8rem;
  }

  .prxxl-ns {
    padding-right: 16rem;
  }

  .pbn-ns {
    padding-bottom: 0;
  }

  .pbxs-ns {
    padding-bottom: .25rem;
  }

  .pbs-ns {
    padding-bottom: .5rem;
  }

  .pbm-ns {
    padding-bottom: 1rem;
  }

  .pbl-ns {
    padding-bottom: 2rem;
  }

  .pbx-ns {
    padding-bottom: 4rem;
  }

  .pbxl-ns {
    padding-bottom: 8rem;
  }

  .pbxxl-ns {
    padding-bottom: 16rem;
  }

  .ptn-ns {
    padding-top: 0;
  }

  .ptxs-ns {
    padding-top: .25rem;
  }

  .pts-ns {
    padding-top: .5rem;
  }

  .ptm-ns {
    padding-top: 1rem;
  }

  .ptl-ns {
    padding-top: 2rem;
  }

  .ptx-ns {
    padding-top: 4rem;
  }

  .ptxl-ns {
    padding-top: 8rem;
  }

  .ptxxl-ns {
    padding-top: 16rem;
  }

  .pvn-ns {
    padding-top: 0;
    padding-bottom: 0;
  }

  .pvxs-ns {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .pvs-ns {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .pvm-ns {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .pvl-ns {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .pvx-ns {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .pvxl-ns {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .pvxxl-ns {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }

  .phn-ns {
    padding-left: 0;
    padding-right: 0;
  }

  .pvxs-ns {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .phs-ns {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .phm-ns {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .phl-ns {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .phx-ns {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .phxl-ns {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .phxxl-ns {
    padding-left: 16rem;
    padding-right: 16rem;
  }

  .man-ns {
    margin: 0;
  }

  .maxs-ns {
    margin: .25rem;
  }

  .mas-ns {
    margin: .5rem;
  }

  .mam-ns {
    margin: 1rem;
  }

  .mal-ns {
    margin: 2rem;
  }

  .max-ns {
    margin: 4rem;
  }

  .maxl-ns {
    margin: 8rem;
  }

  .maxxl-ns {
    margin: 16rem;
  }

  .mln-ns {
    margin-left: 0;
  }

  .mlxs-ns {
    margin-left: .25rem;
  }

  .mls-ns {
    margin-left: .5rem;
  }

  .mlm-ns {
    margin-left: 1rem;
  }

  .mll-ns {
    margin-left: 2rem;
  }

  .mlx-ns {
    margin-left: 4rem;
  }

  .mlxl-ns {
    margin-left: 8rem;
  }

  .mlxxl-ns {
    margin-left: 16rem;
  }

  .mrn-ns {
    margin-right: 0;
  }

  .mrxs-ns {
    margin-right: .25rem;
  }

  .mrs-ns {
    margin-right: .5rem;
  }

  .mrm-ns {
    margin-right: 1rem;
  }

  .mrl-ns {
    margin-right: 2rem;
  }

  .mrx-ns {
    margin-right: 4rem;
  }

  .mrxl-ns {
    margin-right: 8rem;
  }

  .mrxxl-ns {
    margin-right: 16rem;
  }

  .mbn-ns {
    margin-bottom: 0;
  }

  .mbxs-ns {
    margin-bottom: .25rem;
  }

  .mbs-ns {
    margin-bottom: .5rem;
  }

  .mbm-ns {
    margin-bottom: 1rem;
  }

  .mbl-ns {
    margin-bottom: 2rem;
  }

  .mbx-ns {
    margin-bottom: 4rem;
  }

  .mbxl-ns {
    margin-bottom: 8rem;
  }

  .mbxxl-ns {
    margin-bottom: 16rem;
  }

  .mtn-ns {
    margin-top: 0;
  }

  .mtxs-ns {
    margin-top: .25rem;
  }

  .mts-ns {
    margin-top: .5rem;
  }

  .mtm-ns {
    margin-top: 1rem;
  }

  .mtl-ns {
    margin-top: 2rem;
  }

  .mtx-ns {
    margin-top: 4rem;
  }

  .mtxl-ns {
    margin-top: 8rem;
  }

  .mtxxl-ns {
    margin-top: 16rem;
  }

  .mvn-ns {
    margin-top: 0;
    margin-bottom: 0rem;
  }

  .mvxs-ns {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }

  .mvs-ns {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .mvm-ns {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .mvl-ns {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .mvx-ns {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .mvxl-ns {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .mvxxl-ns {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }

  .mhn-ns {
    margin-left: 0;
    margin-right: 0;
  }

  .mhs-ns {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .mhm-ns {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .mhl-ns {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .mhx-ns {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .mhxl-ns {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .mhxxl-ns {
    margin-left: 16rem;
    margin-right: 16rem;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .pan-m {
    padding: 0;
  }

  .paxs-m {
    padding: .25rem;
  }

  .pas-m {
    padding: .5rem;
  }

  .pam-m {
    padding: 1rem;
  }

  .pal-m {
    padding: 2rem;
  }

  .pax-m {
    padding: 4rem;
  }

  .paxl-m {
    padding: 8rem;
  }

  .paxxl-m {
    padding: 16rem;
  }

  .pln-m {
    padding-left: 0;
  }

  .plxs-m {
    padding-left: .25rem;
  }

  .pls-m {
    padding-left: .5rem;
  }

  .plm-m {
    padding-left: 1rem;
  }

  .pll-m {
    padding-left: 2rem;
  }

  .plx-m {
    padding-left: 4rem;
  }

  .plxl-m {
    padding-left: 8rem;
  }

  .plxxl-m {
    padding-left: 16rem;
  }

  .prn-m {
    padding-right: 0;
  }

  .prxs-m {
    padding-right: .25rem;
  }

  .prs-m {
    padding-right: .5rem;
  }

  .prm-m {
    padding-right: 1rem;
  }

  .prl-m {
    padding-right: 2rem;
  }

  .prx-m {
    padding-right: 4rem;
  }

  .prxl-m {
    padding-right: 8rem;
  }

  .prxxl-m {
    padding-right: 16rem;
  }

  .pbn-m {
    padding-bottom: 0;
  }

  .pbxs-m {
    padding-bottom: .25rem;
  }

  .pbs-m {
    padding-bottom: .5rem;
  }

  .pbm-m {
    padding-bottom: 1rem;
  }

  .pbl-m {
    padding-bottom: 2rem;
  }

  .pbx-m {
    padding-bottom: 4rem;
  }

  .pbxl-m {
    padding-bottom: 8rem;
  }

  .pbxxl-m {
    padding-bottom: 16rem;
  }

  .ptn-m {
    padding-top: 0;
  }

  .ptxs-m {
    padding-top: .25rem;
  }

  .pts-m {
    padding-top: .5rem;
  }

  .ptm-m {
    padding-top: 1rem;
  }

  .ptl-m {
    padding-top: 2rem;
  }

  .ptx-m {
    padding-top: 4rem;
  }

  .ptxl-m {
    padding-top: 8rem;
  }

  .ptxxl-m {
    padding-top: 16rem;
  }

  .pvn-m {
    padding-top: 0;
    padding-bottom: 0;
  }

  .pvxs-m {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .pvs-m {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .pvm-m {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .pvl-m {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .pvx-m {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .pvxl-m {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .pvxxl-m {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }

  .phn-m {
    padding-left: 0;
    padding-right: 0;
  }

  .pvxs-m {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .phs-m {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .phm-m {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .phl-m {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .phx-m {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .phxl-m {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .phxxl-m {
    padding-left: 16rem;
    padding-right: 16rem;
  }

  .man-m {
    margin: 0;
  }

  .maxs-m {
    margin: .25rem;
  }

  .mas-m {
    margin: .5rem;
  }

  .mam-m {
    margin: 1rem;
  }

  .mal-m {
    margin: 2rem;
  }

  .max-m {
    margin: 4rem;
  }

  .maxl-m {
    margin: 8rem;
  }

  .maxxl-m {
    margin: 16rem;
  }

  .mln-m {
    margin-left: 0;
  }

  .mlxs-m {
    margin-left: .25rem;
  }

  .mls-m {
    margin-left: .5rem;
  }

  .mlm-m {
    margin-left: 1rem;
  }

  .mll-m {
    margin-left: 2rem;
  }

  .mlx-m {
    margin-left: 4rem;
  }

  .mlxl-m {
    margin-left: 8rem;
  }

  .mlxxl-m {
    margin-left: 16rem;
  }

  .mrn-m {
    margin-right: 0;
  }

  .mrxs-m {
    margin-right: .25rem;
  }

  .mrs-m {
    margin-right: .5rem;
  }

  .mrm-m {
    margin-right: 1rem;
  }

  .mrl-m {
    margin-right: 2rem;
  }

  .mrx-m {
    margin-right: 4rem;
  }

  .mrxl-m {
    margin-right: 8rem;
  }

  .mrxxl-m {
    margin-right: 16rem;
  }

  .mbn-m {
    margin-bottom: 0;
  }

  .mbxs-m {
    margin-bottom: .25rem;
  }

  .mbs-m {
    margin-bottom: .5rem;
  }

  .mbm-m {
    margin-bottom: 1rem;
  }

  .mbl-m {
    margin-bottom: 2rem;
  }

  .mbx-m {
    margin-bottom: 4rem;
  }

  .mbxl-m {
    margin-bottom: 8rem;
  }

  .mbxxl-m {
    margin-bottom: 16rem;
  }

  .mtn-m {
    margin-top: 0;
  }

  .mtxs-m {
    margin-top: .25rem;
  }

  .mts-m {
    margin-top: .5rem;
  }

  .mtm-m {
    margin-top: 1rem;
  }

  .mtl-m {
    margin-top: 2rem;
  }

  .mtx-m {
    margin-top: 4rem;
  }

  .mtxl-m {
    margin-top: 8rem;
  }

  .mtxxl-m {
    margin-top: 16rem;
  }

  .mvn-m {
    margin-top: 0;
    margin-bottom: 0rem;
  }

  .mvxs-m {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }

  .mvs-m {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .mvm-m {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .mvl-m {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .mvx-m {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .mvxl-m {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .mvxxl-m {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }

  .mhn-m {
    margin-left: 0;
    margin-right: 0;
  }

  .mhxs-m {
    margin-left: .25rem;
    margin-right: .25rem;
  }

  .mhs-m {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .mhm-m {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .mhl-m {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .mhx-m {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .mhxl {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .mhxxl {
    margin-left: 16rem;
    margin-right: 16rem;
  }
}

@media screen and (min-width: 64em) {
  .pan-l {
    padding: 0;
  }

  .paxs-l {
    padding: .25rem;
  }

  .pas-l {
    padding: .5rem;
  }

  .pam-l {
    padding: 1rem;
  }

  .pal-l {
    padding: 2rem;
  }

  .pax-l {
    padding: 4rem;
  }

  .paxl-l {
    padding: 8rem;
  }

  .paxxl-l {
    padding: 16rem;
  }

  .pln-l {
    padding-left: 0;
  }

  .plxs-l {
    padding-left: .25rem;
  }

  .pls-l {
    padding-left: .5rem;
  }

  .plm-l {
    padding-left: 1rem;
  }

  .pll-l {
    padding-left: 2rem;
  }

  .plx-l {
    padding-left: 4rem;
  }

  .plxl-l {
    padding-left: 8rem;
  }

  .plxxl-l {
    padding-left: 16rem;
  }

  .prn-l {
    padding-right: 0;
  }

  .prxs-l {
    padding-right: .25rem;
  }

  .prs-l {
    padding-right: .5rem;
  }

  .prm-l {
    padding-right: 1rem;
  }

  .prl-l {
    padding-right: 2rem;
  }

  .prx-l {
    padding-right: 4rem;
  }

  .prxl-l {
    padding-right: 8rem;
  }

  .prxxl-l {
    padding-right: 16rem;
  }

  .pbn-l {
    padding-bottom: 0;
  }

  .pbxs-l {
    padding-bottom: .25rem;
  }

  .pbs-l {
    padding-bottom: .5rem;
  }

  .pbm-l {
    padding-bottom: 1rem;
  }

  .pbl-l {
    padding-bottom: 2rem;
  }

  .pbx-l {
    padding-bottom: 4rem;
  }

  .pbxl-l {
    padding-bottom: 8rem;
  }

  .pbxxl-l {
    padding-bottom: 16rem;
  }

  .ptn-l {
    padding-top: 0;
  }

  .ptxs-l {
    padding-top: .25rem;
  }

  .pts-l {
    padding-top: .5rem;
  }

  .ptm-l {
    padding-top: 1rem;
  }

  .ptl-l {
    padding-top: 2rem;
  }

  .ptx-l {
    padding-top: 4rem;
  }

  .ptxl-l {
    padding-top: 8rem;
  }

  .ptxxl-l {
    padding-top: 16rem;
  }

  .pvn-l {
    padding-top: 0;
    padding-bottom: 0;
  }

  .pvxs-l {
    padding-top: .25rem;
    padding-bottom: .25rem;
  }

  .pvs-l {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .pvm-l {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .pvl-l {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .pvx-l {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .pvxl-l {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .pvxxl-l {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }

  .phn-l {
    padding-left: 0;
    padding-right: 0;
  }

  .pvxs-l {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .phs-l {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .phm-l {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .phl-l {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .phx-l {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .phxl-l {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .phxxl-l {
    padding-left: 16rem;
    padding-right: 16rem;
  }

  .man-l {
    margin: 0;
  }

  .maxs-l {
    margin: .25rem;
  }

  .mas-l {
    margin: .5rem;
  }

  .mam-l {
    margin: 1rem;
  }

  .mal-l {
    margin: 2rem;
  }

  .max-l {
    margin: 4rem;
  }

  .maxl-l {
    margin: 8rem;
  }

  .maxxl-l {
    margin: 16rem;
  }

  .mln-l {
    margin-left: 0;
  }

  .mlxs-l {
    margin-left: .25rem;
  }

  .mls-l {
    margin-left: .5rem;
  }

  .mlm-l {
    margin-left: 1rem;
  }

  .mll-l {
    margin-left: 2rem;
  }

  .mlx-l {
    margin-left: 4rem;
  }

  .mlxl-l {
    margin-left: 8rem;
  }

  .mlxxl-l {
    margin-left: 16rem;
  }

  .mrn-l {
    margin-right: 0;
  }

  .mrxs-l {
    margin-right: .25rem;
  }

  .mrs-l {
    margin-right: .5rem;
  }

  .mrm-l {
    margin-right: 1rem;
  }

  .mrl-l {
    margin-right: 2rem;
  }

  .mrx-l {
    margin-right: 4rem;
  }

  .mrxl-l {
    margin-right: 8rem;
  }

  .mrxxl-l {
    margin-right: 16rem;
  }

  .mbn-l {
    margin-bottom: 0;
  }

  .mbxs-l {
    margin-bottom: .25rem;
  }

  .mbs-l {
    margin-bottom: .5rem;
  }

  .mbm-l {
    margin-bottom: 1rem;
  }

  .mbl-l {
    margin-bottom: 2rem;
  }

  .mbx-l {
    margin-bottom: 4rem;
  }

  .mbxl-l {
    margin-bottom: 8rem;
  }

  .mbxxl-l {
    margin-bottom: 16rem;
  }

  .mtn-l {
    margin-top: 0;
  }

  .mtxs-l {
    margin-top: .25rem;
  }

  .mts-l {
    margin-top: .5rem;
  }

  .mtm-l {
    margin-top: 1rem;
  }

  .mtl-l {
    margin-top: 2rem;
  }

  .mtx-l {
    margin-top: 4rem;
  }

  .mtxl-l {
    margin-top: 8rem;
  }

  .mtxxl-l {
    margin-top: 16rem;
  }

  .mvn-l {
    margin-top: 0;
    margin-bottom: 0rem;
  }

  .mvxs-l {
    margin-top: .25rem;
    margin-bottom: .25rem;
  }

  .mvs-l {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .mvm-l {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .mvl-l {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .mvx-l {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .mvxl-l {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .mvxxl-l {
    margin-top: 16rem;
    margin-bottom: 16rem;
  }

  .mhn-l {
    margin-left: 0;
    margin-right: 0;
  }

  .mhxs-l {
    margin-left: .25rem;
    margin-right: .25rem;
  }

  .mhs-l {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .mhm-l {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .mhl-l {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .mhx-l {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .mhxl-l {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .mhxxl-l {
    margin-left: 16rem;
    margin-right: 16rem;
  }
}

/*

   TEXT DECORATION

*/

.under {
  text-decoration: underline;
}

.none {
  text-decoration: none;
}

@media screen and (min-width: 42em) {
  .under-ns {
    text-decoration: underline;
  }

  .none-ns {
    text-decoration: none;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .under-m {
    text-decoration: underline;
  }

  .none-m {
    text-decoration: none;
  }
}

@media screen and (min-width: 64em) {
  .under-l {
    text-decoration: underline;
  }

  .none-l {
    text-decoration: none;
  }
}

/*

  Text Align

*/

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

@media screen and (min-width: 42em) {
  .tl-ns {
    text-align: left;
  }

  .tr-ns {
    text-align: right;
  }

  .tc-ns {
    text-align: center;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .tl-m {
    text-align: left;
  }

  .tr-m {
    text-align: right;
  }

  .tc-m {
    text-align: center;
  }
}

@media screen and (min-width: 64em) {
  .tl-l {
    text-align: left;
  }

  .tr-l {
    text-align: right;
  }

  .tc-l {
    text-align: center;
  }
}

/*

   TEXT TRANSFORM

*/

.ttc {
  text-transform: capitalize;
}

.ttl {
  text-transform: lowercase;
}

.ttn {
  text-transform: none;
}

.ttu,
.caps {
  text-transform: uppercase;
  letter-spacing: .2em;
}

@media screen and (min-width: 42em) {
  .ttc-ns {
    text-transform: capitalize;
  }

  .ttl-ns {
    text-transform: lowercase;
  }

  .ttn-ns {
    text-transform: none;
  }

  .ttu-ns,
  .caps-ns {
    text-transform: uppercase;
    letter-spacing: .2em;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .ttc-m {
    text-transform: capitalize;
  }

  .ttl-m {
    text-transform: lowercase;
  }

  .ttn-m {
    text-transform: none;
  }

  .ttu-m,
  .caps-m {
    text-transform: uppercase;
    letter-spacing: .2em;
  }
}

@media screen and (min-width: 64em) {
  .ttc-l {
    text-transform: capitalize;
  }

  .ttl-l {
    text-transform: lowercase;
  }

  .ttn-l {
    text-transform: none;
  }

  .ttu-l,
  .caps-l {
    text-transform: uppercase;
    letter-spacing: .2em;
  }
}

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */

.mega {
  font-size: 4rem;
}

.f1 {
  font-size: 3rem;
}

.f2 {
  font-size: 2rem;
}

.f3 {
  font-size: 1.5rem;
}

.f4 {
  font-size: 1rem;
}

.f5,
.small {
  font-size: .85rem;
}

@media screen and (min-width: 42em) {
  .mega-ns {
    font-size: 4rem;
  }

  .f1-ns {
    font-size: 3rem;
  }

  .f2-ns {
    font-size: 2rem;
  }

  .f3-ns {
    font-size: 1.5em;
  }

  .f4-ns {
    font-size: 1rem;
  }

  .f5-ns {
    font-size: .85rem;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .mega-m {
    font-size: 4rem;
  }

  .f1-m {
    font-size: 3rem;
  }

  .f2-m {
    font-size: 2rem;
  }

  .f3-m {
    font-size: 1.5rem;
  }

  .f4-m {
    font-size: 1rem;
  }

  .f5-m {
    font-size: .85rem;
  }
}

@media screen and (min-width: 64em) {
  .mega-l {
    font-size: 4rem;
  }

  .f1-l {
    font-size: 3rem;
  }

  .f2-l {
    font-size: 2rem;
  }

  .f3-l {
    font-size: 1.5rem;
  }

  .f4-l {
    font-size: 1rem;
  }

  .f5-l {
    font-size: .85rem;
  }
}

/*

   UTILITIES

*/

.aspect-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

.aspect-ratio--object {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}

.overflow-container {
  overflow-y: scroll;
}

/*

   VISIBILITY

*/

/*
    Text that is hidden but accessible
    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/

.clip {
  position: fixed !important;
  _position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

@media screen and (min-width: 42em) {
  .clip-ns {
    position: fixed !important;
    _position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .clip-m {
    position: fixed !important;
    _position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
}

@media screen and (min-width: 64em) {
  .clip-l {
    position: fixed !important;
    _position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
  }
}

/*

   WHITE SPACE

*/

.ws-norm {
  white-space: normal;
}

.ws-nowrap {
  white-space: nowrap;
}

.ws-pre {
  white-space: pre;
}

@media screen and (min-width: 42em) {
  .ws-norm-ns {
    white-space: normal;
  }

  .ws-nowrap-ns {
    white-space: nowrap;
  }

  .ws-pre-ns {
    white-space: pre;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .ws-norm-m {
    white-space: normal;
  }

  .ws-nowrap-m {
    white-space: nowrap;
  }

  .ws-pre-m {
    white-space: pre;
  }
}

@media screen and (min-width: 64em) {
  .ws-norm-l {
    white-space: normal;
  }

  .ws-nowrap-l {
    white-space: nowrap;
  }

  .ws-pre-l {
    white-space: pre;
  }
}

/*

  STYLES

  Add custom styles here.

*/

/*
   VERTICAL ALIGN
*/

.v-base {
  vertical-align: baseline;
}

.v-sub {
  vertical-align: sub;
}

.v-sup {
  vertical-align: super;
}

.v-txt-top {
  vertical-align: text-top;
}

.v-txt-btm {
  vertical-align: text-bottom;
}

.v-mid {
  vertical-align: middle;
}

.v-top {
  vertical-align: top;
}

.v-btm {
  vertical-align: bottom;
}

@media screen and (min-width: 42em) {
  .v-base-ns {
    vertical-align: baseline;
  }

  .v-sub-ns {
    vertical-align: sub;
  }

  .v-sup-ns {
    vertical-align: super;
  }

  .v-txt-top-ns {
    vertical-align: text-top;
  }

  .v-txt-btm-ns {
    vertical-align: text-bottom;
  }

  .v-mid-ns {
    vertical-align: middle;
  }

  .v-top-ns {
    vertical-align: top;
  }

  .v-btm-ns {
    vertical-align: bottom;
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .v-base-m {
    vertical-align: baseline;
  }

  .v-sub-m {
    vertical-align: sub;
  }

  .v-sup-m {
    vertical-align: super;
  }

  .v-txt-top-m {
    vertical-align: text-top;
  }

  .v-txt-btm-m {
    vertical-align: text-bottom;
  }

  .v-mid-m {
    vertical-align: middle;
  }

  .v-top-m {
    vertical-align: top;
  }

  .v-btm-m {
    vertical-align: bottom;
  }
}

@media screen and (min-width: 64em) {
  .v-base-l {
    vertical-align: baseline;
  }

  .v-sub-l {
    vertical-align: sub;
  }

  .v-sup-l {
    vertical-align: super;
  }

  .v-txt-top-l {
    vertical-align: text-top;
  }

  .v-txt-btm-l {
    vertical-align: text-bottom;
  }

  .v-mid-l {
    vertical-align: middle;
  }

  .v-top-l {
    vertical-align: top;
  }

  .v-btm-l {
    vertical-align: bottom;
  }
}