/**
 * Motif v3.3.0
 * A responsive front-end framework to tell *your* story
 * http://getmotif.com
 */
/**
 * Global Stylesheet
 * The site's main (and perhaps only) stylesheet. All supporting stylesheet
 * files are imported into and compiled from here.
 */
/**
 * Normalize
 * Using the Normalize.css (http://necolas.github.io/normalize.css/) with only minor modification.
 */
/*

HTML5 Display Definitions

Set the appropriate `display` definitions for new HTML5 elements.

The majority will be displayed `block`.

*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/*

Some, however, need to be `inline-block` with an IE7 fallback.

*/
audio,
canvas,
video {
  display: inline-block;
}
.lte7 audio,
.lte7 canvas,
.lte7 video {
  display: inline;
  zoom: 1;
}
/*

Audio

From Normalize.css:

> Prevents modern browsers from displaying `audio` without controls.
> Remove excess height in iOS5 devices.

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

Type

*/
/*

HTML Font Size Adjust

1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
   `em` units.
2. Prevents iOS text size adjust after orientation change, without disabling
   user zoom.

*/
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
abbr[title] {
  border: none;
}
i,
cite,
address {
  font-style: normal;
}
dfn {
  font-style: italic;
}
b {
  font-weight: normal;
}
strong {
  font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
menu,
ul,
ol,
dl,
table,
figure {
  /* Display & Box Model */
  margin: 1.42857143em 0 0 0;
  /* Other */
  font-size: 1em;
}
menu,
ol,
ul {
  padding-left: 2.5em;
}
li ul,
li ol {
  margin-top: 0.7142857142857143em;
  margin-bottom: 0.7142857142857143em;
}
dd {
  margin-left: 2.5em;
}
blockquote {
  padding: 1.25em 2.5em;
}
blockquote > :first-child {
  margin-top: 0;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
small {
  font-size: 1em;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
a:focus,
a:active,
a:hover {
  outline: 0;
}
img {
  max-width: 100%;
  border: 0;
}
.lte7 img {
  -ms-interpolation-mode: bicubic;
}
svg:not(:root) {
  overflow: hidden;
}
form {
  margin: 0;
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  width: 100%;
  border: 0;
  padding: 0;
  display: block;
  white-space: normal;
}
.lte7 legend {
  margin-left: -7px;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  display: block;
}
button .lte7,
input .lte7,
select .lte7,
textarea .lte7 {
  vertical-align: middle;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  display: inline-block;
  cursor: pointer;
}
button .lte7,
html input[type="button"] .lte7,
input[type="reset"] .lte7,
input[type="submit"] .lte7 {
  overflow: visible;
  display: inline;
  zoom: 1;
}
button,
input {
  line-height: normal;
}
button[disabled],
input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  margin: 3px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  vertical-align: top;
}
input[type="checkbox"] .lte7,
input[type="radio"] .lte7 {
  width: 13px;
  height: 13px;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-spacing: 0;
}
/* 

Spacing Helpers

Spacing helpers are quick but powerful classes that add margin or padding to 
any given element. These classes are `!important`, so they override all other 
styles.

* `p`, `m`                          =   padding, margin  
* `a`, `t`, `r`, `b`, `l`, `h`, `v` =   all, top, right, bottom, left, horizontal, vertical  
* `s`, `m`, `l`, `n`                =   small (~`5px`), medium (~`10px`), large (~`20px`), none (`0`)

For example: `.pam` means "padding, all, medium".

**Note:** These are all based on the current element's font size and the 
project's vertical rhythm (even on the sides, to provide uniform spacing). 
As such, they require `_vars.less`.

*/
.ptn,
.pvn,
.pan {
  padding-top: 0 !important;
}
.pts,
.pvs,
.pas {
  padding-top: 0.35714286em !important;
}
.ptm,
.pvm,
.pam {
  padding-top: 0.71428571em !important;
}
.ptl,
.pvl,
.pal {
  padding-top: 1.42857143em !important;
}
.prn,
.phn,
.pan {
  padding-right: 0 !important;
}
.prs,
.phs,
.pas {
  padding-right: 0.35714286em !important;
}
.prm,
.phm,
.pam {
  padding-right: 0.71428571em !important;
}
.prl,
.phl,
.pal {
  padding-right: 1.42857143em !important;
}
.pbn,
.pvn,
.pan {
  padding-bottom: 0 !important;
}
.pbs,
.pvs,
.pas {
  padding-bottom: 0.35714286em !important;
}
.pbm,
.pvm,
.pam {
  padding-bottom: 0.71428571em !important;
}
.pbl,
.pvl,
.pal {
  padding-bottom: 1.42857143em !important;
}
.pln,
.phn,
.pan {
  padding-left: 0 !important;
}
.pls,
.phs,
.pas {
  padding-left: 0.35714286em !important;
}
.plm,
.phm,
.pam {
  padding-left: 0.71428571em !important;
}
.pll,
.phl,
.pal {
  padding-left: 1.42857143em !important;
}
.mtn,
.mvn,
.man {
  margin-top: 0 !important;
}
.mts,
.mvs,
.mas {
  margin-top: 0.35714286em !important;
}
.mtm,
.mvm,
.mam {
  margin-top: 0.71428571em !important;
}
.mtl,
.mvl,
.mal {
  margin-top: 1.42857143em !important;
}
.mrn,
.mhn,
.man {
  margin-right: 0 !important;
}
.mrs,
.mhs,
.mas {
  margin-right: 0.35714286em !important;
}
.mrm,
.mhm,
.mam {
  margin-right: 0.71428571em !important;
}
.mrl,
.mhl,
.mal {
  margin-right: 1.42857143em !important;
}
.mbn,
.mvn,
.man {
  margin-bottom: 0 !important;
}
.mbs,
.mvs,
.mas {
  margin-bottom: 0.35714286em !important;
}
.mbm,
.mvm,
.mam {
  margin-bottom: 0.71428571em !important;
}
.mbl,
.mvl,
.mal {
  margin-bottom: 1.42857143em !important;
}
.mln,
.mhn,
.man {
  margin-left: 0 !important;
}
.mls,
.mhs,
.mas {
  margin-left: 0.35714286em !important;
}
.mlm,
.mhm,
.mam {
  margin-left: 0.71428571em !important;
}
.mll,
.mhl,
.mal {
  margin-left: 1.42857143em !important;
}
/*

Text Align

Simple classes to adjust your text alignment. They can be added to individual elements or on wrapping elements (an outer `div`, perhaps) to adjust the alignment of all the child elements.

*/
.align--left {
  text-align: left;
}
.align--center {
  text-align: center;
}
.align--right {
  text-align: right;
}
.align--sub {
  vertical-align: sub;
}
.align--middle {
  vertical-align: middle;
}
.align--top {
  vertical-align: top;
}
/*

Floats

Next, we have classes for floating elements.

*/
.float--left {
  float: left;
}
.float--center {
  margin-left: auto;
  margin-right: auto;
}
.float--right {
  float: right;
}
.float--none {
  float: none;
}
.clear {
  clear: both;
}
/*

"New Line"

Turns an `inline` or `inline-block` element into a `block` one.

*/
.new-line,
.media-object,
.media-object > *,
.media-object > :first-child img,
.media-object__figure img,
.media-object__desc,
.figure > a,
[class*="figure--"] > a,
.figure img,
[class*="figure--"] img,
[class*="ratio"]:before,
.input-label,
.input-hint,
.input-desc {
  display: block;
}
.group,
.breadcrumb,
.media-object--checkbox {
  /* Mixins */
}
.group:before,
.group:after,
.media-object--checkbox:before,
.media-object--checkbox:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.group:after,
.media-object--checkbox:after {
  clear: both;
}
/*

"Is Hidden"

Visually hides content in a way that leaves it accessible to screen readers. 
Like more magic, makes the visible invisible.

*/
.is-hidden,
.js .reveal__target {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  overflow: hidden;
}
.is-hidden.focusable:active,
.is-hidden.focusable:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  position: static;
}
body:hover .is-hidden a,
body:hover .is-hidden input,
body:hover .is-hidden button {
  display: none;
}
@media all and (max-width: 47.9375em) {
  .is-hidden-small {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    overflow: hidden;
  }
  .is-hidden-small.focusable:active,
  .is-hidden-small.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .is-hidden-small a,
  body:hover .is-hidden-small input,
  body:hover .is-hidden-small button {
    display: none;
  }
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  .is-hidden-medium {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    overflow: hidden;
  }
  .is-hidden-medium.focusable:active,
  .is-hidden-medium.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .is-hidden-medium a,
  body:hover .is-hidden-medium input,
  body:hover .is-hidden-medium button {
    display: none;
  }
}
@media all and (min-width: 62em) {
  .is-hidden-large {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    overflow: hidden;
  }
  .is-hidden-large.focusable:active,
  .is-hidden-large.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .is-hidden-large a,
  body:hover .is-hidden-large input,
  body:hover .is-hidden-large button {
    display: none;
  }
}
/*

"Isn't Hidden"

Undoes `.is-hidden`.

*/
.isnt-hidden,
.js .reveal__target.is-revealed {
  /* Mixins */
  width: auto;
  height: auto;
  margin: 0;
  position: relative;
  clip: auto;
}
body:hover .isnt-hidden a,
body:hover .isnt-hidden input,
body:hover .isnt-hidden button {
  display: inline-block;
}
.lte7 body:hover .isnt-hidden a,
.lte7 body:hover .isnt-hidden input,
.lte7 body:hover .isnt-hidden button {
  display: inline;
  zoom: 1;
}
/*

"Relative Container"

Exactly what it sounds like.

*/
.relative-container,
[class*="ratio"],
.js .expand__target,
.js .fade__target,
[class*="input-alert"],
.js .canvas__primary,
.js .canvas__secondary,
.main-nav {
  position: relative;
}
/*

Horizontal List

The basic `.list--x` module simply removes bullets from lists and inlines the list 
items, making the link `inline-block`. The idea is to give the skeleton of a 
horizontal list/navigation without adding too much style (yet).

*/
[class*="list--x"] li {
  display: inline;
}
[class*="list--x"] a {
  display: inline-block;
}
/*

Horizontal List (Forceful)

Rather than making the list `inline-block`, it floats the list elements 
(except on the smallest screen sizes, where it remains vertical). More precise
than the default Horizontal List.

*/
[class*="list--x--forceful"] li,
[class*="list--x--forceful"] a {
  display: block;
}
@media all and (min-width: 30em) {
  [class*="list--x--forceful"]:before,
  [class*="list--x--forceful"]:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="list--x--forceful"]:after {
    clear: both;
  }
  [class*="list--x--forceful"] li {
    float: left;
  }
}
/*

Link List

A basic extension of the Horizontal List, this adds some margin to the links in
the list for a more pleasant looking list of links.

**Note:** Because we are using the `[class*=""]` attribute selector, using the 
`.link-list--x` class takes advantage of the `list--x` module we declared 
earlier, as well as the Forceful variation (`.link-list--x--forceful`) 
without having to declare *both* `.list--x` and `.link-list--x` in our HTML.

````link-list
<ul class="link-list--x">
    <li>
        <a href="#">Basic Link</a>
    </li>
    <li>
        <a href="#">Basic Link</a>
    </li>
    <li>
        <a href="#">Basic Link</a>
    </li>
</ul>
````

*/
[class*="link-list--x"] a {
  margin-right: 2.14285714em;
}
[class*="link-list--x"] li:last-child a {
  margin-right: 0;
}
/*

Pagination

An extension of the basic `.list--x` module that simply adds enough padding on
the links for pagination.

*/
.list--x--pgs a {
  padding: 0 0.625em;
}
.list--x--pgs a,
.list--x--pgs a:hover,
.list--x--pgs a:focus {
  color: inherit;
}
/*

Breadcrumb

Another extension of the `.list--x` module, adding a breadcrumb `label` 
and floating it and the ordered list.

````breadcrumb
<nav class="breadcrumb" role="navigation">
    <ol class="breadcrumb__list--x">
        <li>
            <a href="#">Breadcrumb Link</a>
        </li>
        <li>
            <a href="#">Breadcrumb Link</a>
        </li>
        <li>
            <a>Breadcrumb Link</a>
        </li>
    </ol>
</nav>
````

*/
.breadcrumb {
  margin-top: 1.4285714285714286em;
}
.breadcrumb__label {
  margin: 0 0.64285714em 0 0;
  float: left;
}
.breadcrumb__list--x {
  margin: 0;
  float: left;
}
.breadcrumb li {
  margin-right: 0.64285714em;
}
/*

Button List

````button-list
<ul class="button-list--x">
    <li>
        <a class="btn--primary" href="#">Button</a>
    </li>
    <li>
        <a class="btn--primary is-current" href="#">Button</a>
    </li>
    <li>
        <a class="btn--primary" href="#">Button</a>
    </li>
</ul>
````

*/
[class*="button-list--x"] {
  margin-top: 0;
  overflow: hidden;
}
[class*="button-list--x"] li,
[class*="button-list--x"] a {
  display: block;
}
[class*="button-list--x"] li {
  float: left;
}
/*

Media Object

The Media Object is an image (or media-type) to the left with (typically) 
descriptive content to the right. The media object can be whatever size it 
wants, the basic format will remain the same. (Text will **not** wrap.)  This 
has any number of applications, such as a checkbox next to a label with lots 
of text.

See: [The Media Object Saves Hundreds of Lines of Code][1]

  [1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/


````media-object
<div class="media-object">
    <figure>
        <img src="http://placehold.it/213" alt="A media object image">
    </figure>
    <div>
        <p>He is here. No! Alderaan is peaceful. We have no weapons. You can't possibly&hellip; Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. I'm surprised you had the courage to take the responsibility yourself. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.</p>
    </div>
</div>
````

*/
.media-object,
.media-object > *,
.media-object__desc {
  overflow: hidden;
}
.media-object--checkbox {
  /* Display & Box Model */
  display: inline-block;
  overflow: visible;
}
.media-object--checkbox > :first-child,
.media-object--checkbox .media-object__figure {
  /* Display & Box Model */
  margin-right: 0.32142857em;
}
@media all and (min-width: 30em) {
  .media-object > :first-child,
  .media-object__figure {
    max-width: 40%;
    margin-top: 0;
    margin-right: 1.28571429em;
    float: left;
  }
  .media-object > * > :first-child,
  .media-object__desc > :first-child {
    margin-top: 0;
  }
}
@media all and (min-width: 48em) {
  .media-object > :first-child,
  .media-object__figure {
    max-width: 50%;
  }
}
/*

Figures

Great for integrating images into bodies of text, the `.figure` class is 
modified by the `--left` and `--right` keywords depending on where you would 
like it placed.

````plain-media
<figure class="figure">
    <img src="http://placehold.it/800x444" alt="A full-width photo">
</figure>
````

````captioned-media
<figure class="figure">
    <img src="http://placehold.it/800x444" alt="A full-width photo with a caption">
    <figcaption class="figcaption">This caption enhances the photo above. It should only be a brief sentence or two long.</figcaption>
</figure>
````

*/
.figure,
[class*="figure--"] {
  margin-top: 1.4285714285714286em;
}
@media all and (min-width: 30em) {
  [class*="figure--"] {
    margin-top: 0;
    max-width: 50%;
  }
  .figure--left,
  .figure--right {
    padding-bottom: 0.71428571em;
  }
  .figure--left {
    float: left;
    padding-right: 2.57142857em;
  }
  .figure--right {
    float: right;
    padding-left: 2.57142857em;
  }
}
/*

Ratios

Ratios are used primarily for objects that must scale in both width and height
proportionally, such as embedded videos.

See: (http://daverupert.com/2012/04/uncle-daves-ol-padded-box/)

The `.ratio` class (and its modifier) are placed on a wrapping element, with 
its child contents wrapped by the `.ratio__content` class.

    <div class="ratio--square">
        <div class="ratio__content">
            ...
        </div>
    </div>

For embedded videos, use the `.ratio--video` class, and it will assume an 
`iframe` is the direct child:

    <div class="ratio--video">
        <iframe src="http://youtube.com/myVidEmbed"></iframe>
    </div>

*/
[class*="ratio"]:before {
  /* Pretty */
  content: "";
}
.ratio--video:before {
  /* Display & Box Model */
  padding-top: 56.25%;
}
.ratio--1x1:before,
.ratio--square:before {
  padding-top: 100%;
}
.ratio--2x1:before {
  padding-top: 50%;
}
.ratio--1x2:before {
  padding-top: 200%;
}
.ratio__content,
.ratio--video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*

Wrapper

This is the site-wide containing class. Put it around anything you want to be
contained in the "site width". By default, caps off at `1150px`.

*/
.wrapper {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 77.5em) {
  .wrapper {
    width: 80%;
    max-width: 68.57142857em;
  }
}
/*

Animated Revealing/Hiding Block Modules

When JavaScript is enabled, these blocks are used (most easily in conjunction
with Motif jQuery plugins) to reveal and hide blocks of content, sometimes
accompanied by CSS3 animations.

*/
.js {
  /*

    Reveal Target

    `.reveal__target` is a simple class that is accessibly hidden by default.
    Add the `.is-revealed` class to show it.

        <div class="reveal__target">
            I am hidden.
        </div>
        <div class="reveal__target is-revealed">
            I am no longer hidden.
        </div>

    */
  /*

    Expand Target

    `.expand__target` has a maximum height of `0` by default, and once it
    receives the `.is-expanded` class, animates in height to its maximum value.
    This is the cheap CSS way of expanding animation, as in collapsible
    accordions. More precise timing most likely requires JS enhancement.

        <div class="expand__target">
            I am hidden from view.
        </div>
        <div class="expand__target is-expanded">
            I have expanded into view.
        </div>

    */
  /*

    Fade Target

    `.fade__target` is the same as `.expand__target` (in that it grows in
    height), but it adds opacity fading to the mix.

        <div class="fade__target">
            I am hidden.
        </div>
        <div class="fade__target is-faded">
            I have faded and expanded into view.
        </div>

    */
}
.js .reveal__target.is-revealed {
  /* Pretty */
  overflow: visible;
}
.js .expand__target,
.js .fade__target {
  max-height: 0;
  overflow: hidden;
}
.js .expand__target.is-expanded,
.js .fade__target.is-faded {
  max-height: 999px;
}
.js .expand__target.is-expanded,
.js .fade__target.is-faded,
.js .expand__target.was-expanded,
.js .fade__target.was-faded {
  -webkit-transition: all 0.65s ease-in-out;
  -moz-transition: all 0.65s ease-in-out;
  -o-transition: all 0.65s ease-in-out;
  transition: all 0.65s ease-in-out;
}
.js .fade__target {
  opacity: 0;
  filter: alpha(opacity=0);
}
.js .fade__target.is-faded {
  opacity: 1;
  filter: alpha(opacity=100);
}
.no-transition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
/*

Main Nav Module

A minor enhancement to the Reveal or Expand Target modules if added to the
main navigation bar. This snippet, on Medium screens and larger, makes sure
the expandable Nav (on smaller screens) is no longer hidden, and that the
Menu Title (be it "Main Menu", the hamburger icon, etc.) is hidden from view.

    <nav class="nav-bar--menu" role="navigation">
        <h3 class="nav-bar__title pre-icon--rows js-expand" id="reveal-main-nav">
            Main Menu
        </h3>
        <ul class="nav-bar__list--x--forceful expand__target" id="main-nav-list">
            ...
        </ul>
    </nav>

*/
@media all and (min-width: 48em) {
  .js .menu__list {
    max-height: 999px;
  }
  .menu__title {
    display: none;
  }
}
/*

Tabs

The tabs module (and accompanying plugin) creates a very basic widget that
allows embedding and basic styling.

````tabs
<section class="tabs js-tabs">
    <nav role="navigation">
        <ul>
            <li>
                <a href="#first-tab">
                    First Tab
                </a>
            </li>
            <li>
                <a href="#second-tab">
                    Second Tab
                </a>
            </li>
        </ul>
    </nav>
    <div>
        <section id="first-tab">
            <h3>First Tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
        <section id="second-tab">
            <h3>Second Tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </section>
    </div>
</section>
````

*/
.js .tabs > nav + *,
.js .tabs__section {
  position: relative;
  overflow: hidden;
}
.js .tabs > nav + * > *,
.js .tab {
  display: none;
}
.js .tabs > nav + * > *.is-current,
.js .tab.is-current {
  display: block;
}
/*

Font Declarations

Using the `.web-font` and `.web-font-svg` mixins, declare webfonts using the
"bulletproof" `@font-face` syntax.

See: (http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax/)

*/
@font-face {
  font-family: "Overpass";
  src: url("/resources/fonts/overpass/Overpass-Regular.eot");
  src: url("/resources/fonts/overpass/Overpass-Regular.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/overpass/Overpass-Regular.woff") format('woff'), url("/resources/fonts/overpass/Overpass-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Overpass Light";
  src: url("/resources/fonts/overpass/Overpass-Light.eot");
  src: url("/resources/fonts/overpass/Overpass-Light.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/overpass/Overpass-Light.woff") format('woff'), url("/resources/fonts/overpass/Overpass-Light.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Overpass Bold";
  src: url("/resources/fonts/overpass/Overpass-Bold.eot");
  src: url("/resources/fonts/overpass/Overpass-Bold.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/overpass/Overpass-Bold.woff") format('woff'), url("/resources/fonts/overpass/Overpass-Bold.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*

Font Classes

Each font family and weight used in the site is given its own LEGO-block class
to enable quick use and modularity.

*/
.overpass,
body,
.body-text,
.input-hint,
.input-desc,
[class*="input-alert"] {
  font-family: "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.overpass--light {
  font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.overpass--bold {
  font-family: "Overpass Bold", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
/*

Heading Styles

In Motif, typography is broken into pieces that separate skin from structure.
In this case, that means the font sizing (structure) is separate from the
styling (skin) -- which includes font family, color, etc.

Heading styles are some of the type skins, and we start out with
`.primary-heading` (which is also the `h`-tag default) and
`.secondary-heading`. Add as necessary.

````primary-heading
<h1 class="primary-heading">Primary Heading</h1>
````

*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1.75em;
}
h1,
h2,
h3,
h4,
h5,
h6,
.primary-heading {
  font-weight: normal;
}
/*

Secondary Heading

````secondary-heading
<h2 class="secondary-heading">Secondary Heading</h2>
````

*/
/*

Body Text

Another type style, but this mimicks the default body text of the site.

````body-text
<p>This is a paragraph of text. Some of the text may be <em>emphasised</em> and some it might even be <strong>strongly emphasised</strong>. Occasionally <q>quoted text</q> may be found within a paragraph &hellip;and of course <a href="#">a link</a> may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.</p>
````

*/
/*

Unstyled List

A basic stripping of list styles.

*/
.list--unstyled,
[class*="list--x"] {
  padding-left: 0;
  list-style: none outside none;
}
/*

Blockquote

A basic blockquote.

````blockquote
<figure class="blockquote">
    <blockquote>
        At last we will reveal ourselves to the the Jedi. At last we will have
        our revenge.
    </blockquote>
    <figcaption class="blockquote__cite">Darth Maul</figcaption>
</figure>
````

*/
.blockquote {
  padding-left: 1.28571429em;
}
.blockquote blockquote {
  padding: 0;
}
.blockquote__cite {
  display: block;
}
.blockquote__cite:before {
  content: "\2014";
}
/*

Text Colors

*/
.text--white {
  color: #ffffff;
}
/* ==========================================================================
   Media: Medium Screens Min
   ========================================================================== */
@media all and (min-width: 48em) {
  .bracketed {
    /* Display & Box Model */
    margin-bottom: 7px;
    padding: 0 10px;
    /* Positioning */
    position: relative;
  }
  .bracketed:before,
  .bracketed:after {
    /* Mixins */
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    /* Display & Box Model */
    content: "";
    height: 110%;
    width: 10px;
    /* Positioning */
    position: absolute;
    top: 50%;
    /* Other */
    border-top: 3px solid #e31b23;
    border-bottom: 3px solid #e31b23;
  }
  .bracketed:before {
    left: 0;
    border-left: 4px solid #e31b23;
  }
  .bracketed:after {
    border-right: 4px solid #e31b23;
  }
}
/*

Typographic Scale

The building blocks for the site's type sizes. Almost exclusively, an element's 
font size is assigned with one of these classes. If a new size is needed, a new 
class is created here so it can be used and reused elsewhere.

The list of type sizes can grow or shrink, but be vigilant in keeping the 
number of sizes to a minimum. A nice rule of thumb is that no two sizes can one 
pixel in difference (forcing you to choose one over the other, giving you one 
class where you previously had two).

````typographic-scale
<p class="canon-text">Canon Text (38px)</p>
<p class="paragon-text">Paragon Text (30px)</p>
<p class="primer-text">Primer Text (24px)</p>
<p class="tertia-text">Tertia Text (18px)</p>
<p class="normal-text">Normal Text (14px)</p>
<p class="petite-text">Petite Text (12px)</p>
````

*/
/*

Canon Text

*/
.canon-text,
.wysiwyg h1,
.wysiwyg .canon-text {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.18421053;
}
/*

Paragon Text

*/
.paragon-text,
.wysiwyg h2,
.wysiwyg .paragon-text {
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1.16666667;
}
/*

Primer Text

*/
[class*="primer-text"] {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}
/*

Tertia Text

*/
[class*="tertia-text"] {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.38888889;
}
/*

Normal Text

*/
[class*="normal-text"],
body,
.body-text,
.input-hint,
.input-desc,
[class*="input-alert"] {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.07142857;
}
/*

Petite Text

*/
[class*="petite-text"] {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.25;
}
/*

Long Modifiers

The smaller type sizes are given the `--long` modifier, allowing you to use
each type size with varying line heights.

    <p class="petite-text">I'm just a small bit of text, my `line-height` 
    can be tight.</p>

    <p class="petite-text--long">I'm a long paragraph, so my `line-height` 
    should be longer to enhance legibility. ... </p>

*/
.primer-text--long,
.tertia-text--long,
.normal-text--long,
.petite-text--long,
body,
.body-text,
.input-hint,
.input-desc,
[class*="input-alert"] {
  line-height: 1.5;
}
@font-face {
  font-family: "motif-icons";
  src: url("../fonts/motif-icons/motif-icons.eot");
  src: url("../fonts/perot-icons/perot-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/perot-icons/perot-icons.woff") format("woff"), url("../fonts/perot-icons/perot-icons.ttf") format("truetype"), url("../fonts/perot-icons/perot-icons.svg?#motif-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class*="pre-icon--"]:before,
[class*="icon--"]:before,
[class*="post-icon--"]:after,
.homepage-calendar__body .calendar__nav > :first-child a:after {
  display: inline-block;
  font-family: "motif-icons";
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  text-transform: none;
  speak: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.lte8 [class*="pre-icon--"]:before,
.lte8 [class*="icon--"]:before,
.lte8 [class*="post-icon--"]:after {
  font-size: 1;
}
[class*="pre-icon--"]:before {
  padding-right: 0.357em;
}
[class*="post-icon--"]:after,
.homepage-calendar__body .calendar__nav > :first-child a:after {
  padding-left: 0.357em;
}
.pre-icon--alert:before,
.icon--alert:before,
.post-icon--alert:after {
  content: "\f101";
}
.pre-icon--calendar:before,
.icon--calendar:before,
.post-icon--calendar:after {
  content: "\f102";
}
.pre-icon--check:before,
.icon--check:before,
.post-icon--check:after {
  content: "\f103";
}
.pre-icon--clock:before,
.icon--clock:before,
.post-icon--clock:after {
  content: "\f104";
}
.pre-icon--delete:before,
.icon--delete:before,
.post-icon--delete:after {
  content: "\f105";
}
.pre-icon--facebook-sq:before,
.icon--facebook-sq:before,
.post-icon--facebook-sq:after {
  content: "\f106";
}
.pre-icon--facebook:before,
.icon--facebook:before,
.post-icon--facebook:after {
  content: "\f107";
}
.pre-icon--flickr:before,
.icon--flickr:before,
.post-icon--flickr:after {
  content: "\f108";
}
.pre-icon--google-plus:before,
.icon--google-plus:before,
.post-icon--google-plus:after {
  content: "\f109";
}
.pre-icon--home:before,
.icon--home:before,
.post-icon--home:after {
  content: "\f10a";
}
.pre-icon--info:before,
.icon--info:before,
.post-icon--info:after {
  content: "\f10b";
}
.pre-icon--instagram:before,
.icon--instagram:before,
.post-icon--instagram:after {
  content: "\f10c";
}
.pre-icon--linkedin-sq:before,
.icon--linkedin-sq:before,
.post-icon--linkedin-sq:after {
  content: "\f10d";
}
.pre-icon--linkedin:before,
.icon--linkedin:before,
.post-icon--linkedin:after {
  content: "\f10e";
}
.pre-icon--list:before,
.icon--list:before,
.post-icon--list:after {
  content: "\f10f";
}
.pre-icon--location:before,
.icon--location:before,
.post-icon--location:after {
  content: "\f110";
}
.pre-icon--mail:before,
.icon--mail:before,
.post-icon--mail:after {
  content: "\f111";
}
.pre-icon--minus:before,
.icon--minus:before,
.post-icon--minus:after {
  content: "\f112";
}
.pre-icon--nav-down:before,
.icon--nav-down:before,
.post-icon--nav-down:after,
.homepage-calendar__body .calendar__nav > :first-child a:after {
  content: "\f113";
}
.pre-icon--nav-left:before,
.icon--nav-left:before,
.post-icon--nav-left:after {
  content: "\f114";
}
.pre-icon--nav-right:before,
.icon--nav-right:before,
.post-icon--nav-right:after {
  content: "\f115";
}
.pre-icon--nav-up:before,
.icon--nav-up:before,
.post-icon--nav-up:after,
.homepage-calendar__body .calendar__nav.is-dropping > :first-child a:after {
  content: "\f116";
}
.pre-icon--pinterest:before,
.icon--pinterest:before,
.post-icon--pinterest:after {
  content: "\f117";
}
.pre-icon--plus:before,
.icon--plus:before,
.post-icon--plus:after {
  content: "\f118";
}
.pre-icon--rows:before,
.icon--rows:before,
.post-icon--rows:after {
  content: "\f119";
}
.pre-icon--rss:before,
.icon--rss:before,
.post-icon--rss:after {
  content: "\f11a";
}
.pre-icon--search:before,
.icon--search:before,
.post-icon--search:after {
  content: "\f11b";
}
.pre-icon--settings:before,
.icon--settings:before,
.post-icon--settings:after {
  content: "\f11c";
}
.pre-icon--tumblr:before,
.icon--tumblr:before,
.post-icon--tumblr:after {
  content: "\f11d";
}
.pre-icon--twitter:before,
.icon--twitter:before,
.post-icon--twitter:after {
  content: "\f11e";
}
.pre-icon--vimeo:before,
.icon--vimeo:before,
.post-icon--vimeo:after {
  content: "\f11f";
}
.pre-icon--vine:before,
.icon--vine:before,
.post-icon--vine:after {
  content: "\f120";
}
.pre-icon--wordpress:before,
.icon--wordpress:before,
.post-icon--wordpress:after {
  content: "\f121";
}
.pre-icon--youtube:before,
.icon--youtube:before,
.post-icon--youtube:after {
  content: "\f122";
}
/*

Interactive Elements

*/
/*

Buttons

Default interactive button styles. This `.btn` class can be applied to `<a>`,
`<button>`, or `<input>` elements. Button color and style classes can be combined
with size classes, much like the type modules.

````buttons
<a class="btn" href="#">Default</a>
<a class="btn--primary" href="#">Primary</a>
<a class="btn--danger" href="#">Danger</a>
````

*/
.btn,
[class*="btn"] {
  width: auto;
  height: auto;
  margin: 0;
  line-height: normal;
  text-decoration: none;
  position: relative;
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  outline: 0;
  overflow: visible;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  background: #c9cacc;
  color: #262626;
  text-align: center;
  padding: 0.71428571em 1.28571429em;
  margin-top: 1.4285714285714286em;
}
p > .btn,
p > [class*="btn"] {
  margin-top: 0;
}
.btn:hover,
[class*="btn"]:hover,
.btn:focus,
[class*="btn"]:focus,
.btn.is-current,
[class*="btn"].is-current {
  background: #e3e4e5;
}
/*

````tiny-buttons
<a class="btn--tiny" href="#">Tiny Button</a>
<a class="btn--tiny btn--primary" href="#">Tiny Button Primary</a>
<a class="btn--tiny btn--danger" href="#">Tiny Button Danger</a>
````

*/
/*

````small-buttons
<a class="btn--small" href="#">Small Button</a>
<a class="btn--small btn--primary" href="#">Small Button Primary</a>
<a class="btn--small btn--danger" href="#">Small Button Danger</a>
````

*/
/*

````large-buttons
<a class="btn--large" href="#">Large Button</a>
<a class="btn--large btn--primary" href="#">Large Button Primary</a>
<a class="btn--large btn--danger" href="#">Large Button Danger</a>
````

*/
.btn--tiny {
  font-size: 12px;
  font-size: 0.75rem;
  padding: 0.35714286em 0.64285714em;
}
.btn--small {
  font-size: 12px;
  font-size: 0.75rem;
}
.btn--large {
  font-size: 18px;
  font-size: 1.125rem;
}
.btn--full-width {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/*

Link Styles

Very basic stuff. The primary link color can be altered in the `_config.less`
file. Hover, focus, and current states are accounted for.

*/
a,
.link,
.list--x--pgs a[href] {
  color: #1f75ae;
}
a:hover,
.link:hover,
a:focus,
.link:focus,
a.is-current,
.link.is-current,
.list--x--pgs a[href]:hover,
.list--x--pgs a[href]:focus,
.list--x--pgs a[href].is-current {
  color: #13496d;
}
/*

Unlink

Basic class to remove some link styling.

@TODO: Put in `_presentational.less` file?

*/
.unlink,
.eyebrow .eyebrow__nav a,
.main-nav__primary a,
.main-nav__secondary a,
.footer__nav a,
.main-footer .privacy-policy,
.sitewide-notice a,
.action-bar a,
.homepage-calendar__body .calendar__nav a {
  text-decoration: none;
}
/*

Link Colors

*/
.link--yellow {
  color: #ffe14f;
}
.link--yellow:hover,
a.link--yellow:focus {
  color: #e8c000;
}
/*

Link Types

*/
[class*="link-post--arrow"] {
  /* Positioning */
  position: relative;
}
[class*="link-post--arrow"]:after {
  /* Mixins */
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  /* Display & Box Model */
  content: "";
  display: inline-block;
  margin-left: 5px;
  /* Positioning */
  position: absolute;
  top: 50%;
  left: 100%;
  /* Other */
  border-left: 5px solid #ffe14f;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.link-post--arrow--red:after {
  border-left-color: #e31b23;
}
/*

Forms

*/
/*

Basic Form Elements

Inputs and textareas are set to `width: 100%` to adapt to the width of their
wrapper. (Great for grids.) Select boxes are set to the width of their content,
maxing out at `100%`.

Almost all the form elements in Motif are best used inside a `label`.

    <label>
        Text Field
        <input type="text" name="text" required>
    </label>

*/
input,
textarea {
  width: 100%;
  font-size: 1em;
  padding: 0.35714286em 0.28571429em;
  outline: none;
  -webkit-appearance: none;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus,
input:active,
textarea:active,
input.is-current,
textarea.is-current {
  z-index: 1;
}
input[type="checkbox"],
input[type="radio"] {
  width: auto;
}
.lte7 input[type="checkbox"],
.lte7 input[type="radio"] {
  width: 13px;
}
textarea {
  height: 5.71428571em;
}
select {
  width: auto;
  max-width: 100%;
  font-size: 0.8125em;
}
/*

Input Label Elements

Child form elements of the `.input-label` class are given a little bit of
spacing to separate them from the label text. (See also `.input-label` in the
form `_type.less` file.)

````input-label-elements
<label class="input-label">
    Text Field
    <input type="text" name="text" placeholder="Placeholder text" required>
</label>
<label class="input-label">
    Textarea
    <textarea placeholder="Placeholder text"></textarea>
</label>
<label class="input-label">
    Select
    <select>
        <option>Placeholder text</option>
    </select>
</label>
````

*/
.input-label input,
.input-label textarea,
.input-label select {
  margin-top: 0.7142857142857143em;
  margin-bottom: 0.7142857142857143em;
}
/*

Input Widths

While you are encouraged to use the responsive grid system in conjunction with
your form styles, sometimes it's useful to have form field widths that are
simply consistent across viewports. These are those.

    <label class="input-label">
        Text Field
        <input class="input--xs" type="text" name="text" required>
    </label>

*/
.input--eighth {
  width: 12.5%;
}
.input--quarter {
  width: 25%;
}
.input--half {
  width: 50%;
}
.input--xxxs {
  max-width: 2.14285714em;
}
.input--xxs {
  max-width: 3.57142857em;
}
.input--xs {
  max-width: 7.14285714em;
}
.input--s {
  max-width: 12.5em;
}
.input--m {
  max-width: 17.85714286em;
}
.input--l {
  max-width: 25em;
}
/*

Form Modules

````attached-label-before
<label class="attached-label">
    <small class="label">$</small>
    <input type="num" id="attached-label-before" required>
</label>
````

````attached-label-after
<label class="attached-label">
    <input type="text" id="attached-label-after" required>
    <small class="label">.com</small>
</label>
````

````attached-label-before-and-after
<label class="attached-label">
    <small class="label">www.</small>
    <input type="text" id="attached-label" placeholder="domain" required>
    <small class="label">.com</small>
</label>
````

````attached-label-submit
<form class="attached-label">
    <label class="is-hidden" for="attached-label-submit">Search</label>
    <input type="search" id="attached-label-submit" required>
    <div>
        <button type="submit" class="btn--primary icon--search">
            <b class="is-hidden">Submit</b>
        </button>
    </div>
</form>
````

*/
.attached-label {
  display: table;
  overflow: hidden;
}
.attached-label > * {
  margin-top: 0;
  display: table-cell;
  vertical-align: middle;
}
.attached-label > * > :first-child {
  margin-top: 0;
}
.attached-label [class*="btn"] {
  display: block;
  width: 100%;
}
/*

Input Label

The `.input-label` class should be added to form labels that want a little 
extra styling for the label text.

(You may need to do some fancy things with hidden or altered labels, which is
why these styles aren't added to the `label` element by default.)

    <label class="input-label">
        Text Field
        <input type="text" name="text" required>
    </label>

There are also input descriptions, which go directly underneath the label text,
and input hints that typically go underneath the input field.

    <label class="input-label">
        Text Field
        
        <small class="input-desc">
            This is a small description of the field.
        </small>
        
        <input type="text" name="text" required>
        
        <strong class="input-hint">
            This is an important hint.
        </strong>
    </label>

*/
.input-label {
  padding-top: 1.4285714285714286em;
}
.input-hint {
  color: #8a8585;
  margin-top: 0.35714285714285715em;
}
.input-desc {
  margin-top: 0em;
}
/*

Fieldset

A simple class to add to fieldsets that want a little more spacing.

*/
.fieldset {
  margin-top: 1.4285714285714286em;
  padding-bottom: 1.4285714285714286em;
}
/*

Checkbox List

Lists of radio or checkbox inputs should typically be just that: lists. In 
Motif, you're encouraged to mark up your input lists as semantically as 
possible, meaning a fieldset, with a legend, and a list of inputs:

    <fieldset>
        <legend>
            <b class="input-label">This is a question for a radio list?</b>
        </legend>

        <ul class="checkbox-list">
            <li>
                <label class="media-object">
                    <input class="media-object__figure"
                     type="radio"
                     name="radioList"
                     value="Yes">

                    <b class="media-object__desc">
                        Yes
                    </b>
                </label>
            </li>
            <li>
                <label class="media-object">
                    <input class="media-object__figure"
                     type="radio"
                     name="radioList"
                     value="No">

                    <b class="media-object__desc">
                        No
                    </b>
                </label>
            </li>
        </ul>
    </fieldset>

*/
.checkbox-list {
  margin-top: 0.7142857142857143em;
}
legend + .checkbox-list {
  margin-top: 0em;
}
legend .input-label {
  padding-bottom: 0.35714285714285715em;
}
legend + .input-desc {
  /* Positioning */
  position: relative;
  top: -0.35714286em;
}
/*

Form Validation

*/
/*

Input States

A couple of classes added to inputs (typically by a JS Validation plugin) that
alter the child elements to convey states of success and error.

    <label class="input-label is-erroneous">
        Text Field
        <input type="text" name="text" required>
    </label>

*/
.is-successful input,
.is-successful textarea,
.is-successful select {
  border-color: #72bc44;
}
.is-erroneous input,
.is-erroneous textarea,
.is-erroneous select {
  border-color: #e31b23;
}
/*

Form Messaging

Within labels, there are input alerts that apply to individual fields.

    <label class="input-label is-erroneous">
        Text Field
        <input type="text" name="text" required>
        <strong class="input-alert--error">
            This field is required.
        </strong>
    </label>

*/
[class*="input-alert"] {
  /* Display & Box Model */
  display: inline-block;
  /* Pretty */
  color: #13496d;
}
.input-alert--warning {
  color: #ffd402;
}
.input-alert--error {
  color: #e31b23;
}
.input-alert--success {
  color: #72bc44;
}
/*

Responsive Grid

The default responsive grid in Motif is built with a few rules in mind:

1. Each row of columns must be wrapped in a row element
2. There's no need to specify if a column is first or last

With that in mind, there is a basic syntax to learn for what classes to use.
Our breakpoints are classified as:

- Base
- Small
- Medium
- Large
- Extra Large

Our default responsive grid system only uses 3 grids to cover all of our bases:

- `grid, small` covers Base and Small viewports, but cuts off at Medium
- `grid, medium` covers only Medium
- `grid, large` starts at Large and covers Extra Large as well (there is no max
cutoff value for `grid, large`)

Understanding that, the syntax should be easy to understand. In these examples,
we will talk about `grid, small`:

- **Rows**: `.gs-row` (Grid, Small, Row)
- **Columns**: `.gcs` (Grid, Column, Small)
- **Column Width**: `.gs-half` (Grid, Small, Half-Width)

    <div class="gs-row">
        <div class="gcs gs-half">...</div>
        <div class="gcs gs-half">...</div>
    </div>

However, to be slightly more succinct, you can use the condensed column syntax:

- **Columns (Condensed)**: `.gcs-half` (Grid, Column, Small, Half-Width)

    <div class="gs-row">
        <div class="gcs-half">...</div>
        <div class="gcs-half">...</div>
    </div>

In brief, the way the grid works is that `.gcs` floats the element to the left
(by default), and adds padding to both the left and the right. `-half` gives
it a width of `50%`. The combined padding of the two columns bumped up against 
each other form the full "gutter". The `.gs-row` then clears the floats and has
a *negative* margin on both the left and the right that pops the columns out to
the sides the exact width of their paddings, meaning the column content lines 
up with the site boundaries on the left and right without the need to specify 
"first" or "last" column classes.

To use this responsively, then, you just add the classes by breakpoint:

    <div class="gs-row gm-row gl-row">
        <div class="gcs-half gcm-third gcl-quarter">
            ...
        </div>
        <div class="gcs-half gcm-two-thirds gcl-three-quarters">
            ...
        </div>
    </div>

By default, the column breakdown of each grid breakpoint:

- `grid, small`: 4 columns
- `grid, medium`: 9 columns
- `grid, large`: 12 columns

For the larger grids, the classes follow the numbers closely...

    - `.gcl-10of12
    - `.gcm-4of9`

...in just about every combination (based on their total column number), but 
all of the grids also have a few "fuzzy" shortcuts as well:

    - `half`
    - `third`
    - `quarter`
    - `three-quarters`
    - `two-thirds`

*/
.g-halves,
.g-thirds,
.g-quarters {
  margin-left: -0.85714286em;
  margin-right: -0.85714286em;
  /* Pretty */
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}
.g-halves:before,
.g-thirds:before,
.g-quarters:before,
.g-halves:after,
.g-thirds:after,
.g-quarters:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.g-halves:after,
.g-thirds:after,
.g-quarters:after {
  clear: both;
}
ul.g-halves,
ul.g-thirds,
ul.g-quarters {
  padding-left: 0;
  list-style: none outside none;
}
.g-halves > *,
.g-thirds > *,
.g-quarters > * {
  display: inline;
  float: left;
  padding-left: 0.85714286em;
  padding-right: 0.85714286em;
  /* Display & Box Model */
  display: inline-block;
  /* Positioning */
  float: none;
  /* Pretty */
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}
.g-halves > * {
  width: 50%;
}
.g-thirds > * {
  width: 33.33333%;
}
.g-quarters > * {
  width: 25%;
}
.opera-only :-o-prefocus,
.g-thirds {
  word-spacing: -0.43em;
}
/**
 * Mobile Grid
 */
@media all and (max-width: 47.9375em) {
  [class*="gs-row"],
  .gs-quarters,
  .gs-thirds,
  .gs-halves {
    margin-left: -0.85714286em;
    margin-right: -0.85714286em;
  }
  [class*="gs-row"]:before,
  [class*="gs-row"]:after,
  .gs-quarters:before,
  .gs-quarters:after,
  .gs-thirds:before,
  .gs-thirds:after,
  .gs-halves:before,
  .gs-halves:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="gs-row"]:after,
  .gs-quarters:after,
  .gs-thirds:after,
  .gs-halves:after {
    clear: both;
  }
  ul[class*="gs-row"],
  ul.gs-quarters,
  ul.gs-thirds,
  ul.gs-halves {
    padding-left: 0;
    list-style: none outside none;
  }
  .gs-row--rtl > [class*="gcs"] {
    float: right;
  }
  .gs-row--ltr > [class*="gcs"] {
    float: left;
  }
  [class*="gcs"],
  .gs-quarters > *,
  .gs-thirds > *,
  .gs-halves > * {
    display: inline;
    float: left;
    padding-left: 0.85714286em;
    padding-right: 0.85714286em;
  }
  .gs-quarter,
  .gcs-quarter,
  .gs-quarters > * {
    width: 25%;
  }
  .gs-third,
  .gcs-third,
  .gs-thirds > * {
    width: 33.33333%;
  }
  .gs-half,
  .gcs-half,
  .gs-halves > * {
    width: 50%;
  }
  .gs-two-thirds,
  .gcs-two-thirds {
    width: 66.66667%;
  }
  .gs-three-quarters,
  .gcs-three-quarters {
    width: 75%;
  }
  .gs-full,
  .gcs-full {
    width: 100%;
  }
  .gs-row--flex,
  .gs-quarters,
  .gs-thirds,
  .gs-halves {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
  }
  .gs-row--flex > [class*="gcs"],
  .gs-quarters > *,
  .gs-thirds > *,
  .gs-halves > * {
    float: none;
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
  .opera-only :-o-prefocus,
  .gs-row--flex,
  .gs-quarters,
  .gs-thirds,
  .gs-halves {
    word-spacing: -0.43em;
  }
}
/**
 * Tablet Grid
 */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  [class*="gm-row"],
  .gm-quarters,
  .gm-thirds,
  .gm-halves {
    margin-left: -1.14285714em;
    margin-right: -1.14285714em;
  }
  [class*="gm-row"]:before,
  [class*="gm-row"]:after,
  .gm-quarters:before,
  .gm-quarters:after,
  .gm-thirds:before,
  .gm-thirds:after,
  .gm-halves:before,
  .gm-halves:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="gm-row"]:after,
  .gm-quarters:after,
  .gm-thirds:after,
  .gm-halves:after {
    clear: both;
  }
  ul[class*="gm-row"],
  ul.gm-quarters,
  ul.gm-thirds,
  ul.gm-halves {
    padding-left: 0;
    list-style: none outside none;
  }
  .gm-row--rtl > [class*="gcm"] {
    float: right;
  }
  .gm-row--ltr > [class*="gcm"] {
    float: left;
  }
  [class*="gcm"],
  .gm-quarters > *,
  .gm-thirds > *,
  .gm-halves > * {
    display: inline;
    float: left;
    padding-left: 1.14285714em;
    padding-right: 1.14285714em;
  }
  .gm-quarter,
  .gcm-quarter,
  [class*="m-2of8"],
  .gm-quarters > * {
    width: 25%;
  }
  .gm-third,
  .gcm-third,
  [class*="m-3of9"],
  [class*="m-2of6"],
  .gm-thirds > * {
    width: 33.33333%;
  }
  .gm-half,
  .gcm-half,
  [class*="m-4of8"],
  [class*="m-3of6"],
  .gm-halves > * {
    width: 50%;
  }
  .gm-two-thirds,
  .gcm-two-thirds,
  [class*="m-6of9"],
  [class*="m-4of6"] {
    width: 66.66667%;
  }
  .gm-three-quarters,
  .gcm-three-quarters,
  [class*="m-6of8"] {
    width: 75%;
  }
  .gm-full,
  .gcm-full {
    width: 100%;
  }
  [class*="m-8of9"] {
    width: 88.88889%;
  }
  [class*="m-7of9"] {
    width: 77.77778%;
  }
  [class*="m-5of9"] {
    width: 55.55556%;
  }
  [class*="m-4of9"] {
    width: 44.44444%;
  }
  [class*="m-2of9"] {
    width: 22.22222%;
  }
  [class*="m-1of9"] {
    width: 11.11111%;
  }
  [class*="m-7of8"] {
    width: 87.5%;
  }
  [class*="m-5of8"] {
    width: 62.5%;
  }
  [class*="m-3of8"] {
    width: 37.5%;
  }
  [class*="m-1of8"] {
    width: 12.5%;
  }
  [class*="m-6of7"] {
    width: 85.71429%;
  }
  [class*="m-5of7"] {
    width: 71.42857%;
  }
  [class*="m-4of7"] {
    width: 57.14286%;
  }
  [class*="m-3of7"] {
    width: 42.85714%;
  }
  [class*="m-2of7"] {
    width: 28.57143%;
  }
  [class*="m-1of7"] {
    width: 14.28571%;
  }
  [class*="m-5of6"] {
    width: 83.33333%;
  }
  [class*="m-1of6"] {
    width: 16.66667%;
  }
  [class*="m-4of5"] {
    width: 80%;
  }
  [class*="m-3of5"] {
    width: 60%;
  }
  [class*="m-2of5"] {
    width: 40%;
  }
  [class*="m-1of5"] {
    width: 20%;
  }
  .gm-row--flex,
  .gm-quarters,
  .gm-thirds,
  .gm-halves {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
  }
  .gm-row--flex > [class*="gcm"],
  .gm-quarters > *,
  .gm-thirds > *,
  .gm-halves > * {
    float: none;
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
  .opera-only :-o-prefocus,
  .gm-row--flex,
  .gm-quarters,
  .gm-thirds,
  .gm-halves {
    word-spacing: -0.43em;
  }
}
/**
 * Desktop Grid
 */
/*

````desktop-grid
<div class="gl-quarters">
    <div>
        <div class="block">Quarter</div>
    </div>
    <div>
        <div class="block">Quarter</div>
    </div>
    <div>
        <div class="block">Quarter</div>
    </div>
    <div>
        <div class="block">Quarter</div>
    </div>
</div>
<div class="gl-thirds">
    <div>
        <div class="block">Third</div>
    </div>
    <div>
        <div class="block">Third</div>
    </div>
    <div>
        <div class="block">Third</div>
    </div>
</div>
<div class="gl-halves">
    <div>
        <div class="block">Half</div>
    </div>
    <div>
        <div class="block">Half</div>
    </div>
</div>
<div class="gl-row">
    <div class="gcl-two-thirds">
        <div class="block">Two Thirds</div>
    </div>
    <div class="gcl-third">
        <div class="block">Third</div>
    </div>
</div>
<div class="gl-row">
    <div class="gcl-three-quarters">
        <div class="block">Three Quarters</div>
    </div>
    <div class="gcl-quarter">
        <div class="block">Quarter</div>
    </div>
</div>
````

*/
@media all and (min-width: 62em) {
  [class*="gl-row"],
  .gl-quarters,
  .gl-thirds,
  .gl-halves {
    margin-left: -1.28571429em;
    margin-right: -1.28571429em;
  }
  [class*="gl-row"]:before,
  [class*="gl-row"]:after,
  .gl-quarters:before,
  .gl-quarters:after,
  .gl-thirds:before,
  .gl-thirds:after,
  .gl-halves:before,
  .gl-halves:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="gl-row"]:after,
  .gl-quarters:after,
  .gl-thirds:after,
  .gl-halves:after {
    clear: both;
  }
  ul[class*="gl-row"],
  ul.gl-quarters,
  ul.gl-thirds,
  ul.gl-halves {
    padding-left: 0;
    list-style: none outside none;
  }
  .gl-row--rtl > [class*="gcl"] {
    float: right;
  }
  .gl-row--ltr > [class*="gcl"] {
    float: left;
  }
  [class*="gcl"],
  .gl-quarters > *,
  .gl-thirds > *,
  .gl-halves > * {
    display: inline;
    float: left;
    padding-left: 1.28571429em;
    padding-right: 1.28571429em;
  }
  .gl-quarter,
  .gcl-quarter,
  [class*="l-3of12"],
  [class*="l-2of8"],
  .gl-quarters > * {
    width: 25%;
  }
  .gl-third,
  .gcl-third,
  [class*="l-4of12"],
  [class*="l-3of9"],
  [class*="l-2of6"],
  .gl-thirds > * {
    width: 33.33333%;
  }
  .gl-half,
  .gcl-half,
  [class*="l-6of12"],
  [class*="l-5of10"],
  [class*="l-4of8"],
  [class*="l-3of6"],
  .gl-halves > * {
    width: 50%;
  }
  .gl-two-thirds,
  .gcl-two-thirds,
  [class*="l-8of12"],
  [class*="l-6of9"],
  [class*="l-4of6"] {
    width: 66.66667%;
  }
  .gl-three-quarters,
  .gcl-three-quarters,
  [class*="l-9of12"],
  [class*="l-6of8"] {
    width: 75%;
  }
  .gl-full,
  .gcl-full {
    width: 100%;
  }
  [class*="l-11of12"] {
    width: 91.66667%;
  }
  [class*="l-10of12"] {
    width: 83.33333%;
  }
  [class*="l-7of12"] {
    width: 58.33333%;
  }
  [class*="l-5of12"] {
    width: 41.66667%;
  }
  [class*="l-2of12"] {
    width: 16.66667%;
  }
  [class*="l-1of12"] {
    width: 8.33333%;
  }
  [class*="l-10of11"] {
    width: 90.90909%;
  }
  [class*="l-9of11"] {
    width: 81.81818%;
  }
  [class*="l-8of11"] {
    width: 72.72727%;
  }
  [class*="l-7of11"] {
    width: 63.63636%;
  }
  [class*="l-6of11"] {
    width: 54.54545%;
  }
  [class*="l-5of11"] {
    width: 45.45455%;
  }
  [class*="l-4of11"] {
    width: 36.36364%;
  }
  [class*="l-3of11"] {
    width: 27.27273%;
  }
  [class*="l-2of11"] {
    width: 18.18182%;
  }
  [class*="l-1of11"] {
    width: 9.09091%;
  }
  [class*="l-9of10"] {
    width: 90%;
  }
  [class*="l-8of10"] {
    width: 80%;
  }
  [class*="l-7of10"] {
    width: 70%;
  }
  [class*="l-6of10"] {
    width: 60%;
  }
  [class*="l-4of10"] {
    width: 40%;
  }
  [class*="l-3of10"] {
    width: 30%;
  }
  [class*="l-2of10"] {
    width: 20%;
  }
  [class*="l-1of10"] {
    width: 10%;
  }
  [class*="l-8of9"] {
    width: 88.88889%;
  }
  [class*="l-7of9"] {
    width: 77.77778%;
  }
  [class*="l-5of9"] {
    width: 55.55556%;
  }
  [class*="l-4of9"] {
    width: 44.44444%;
  }
  [class*="l-2of9"] {
    width: 22.22222%;
  }
  [class*="l-1of9"] {
    width: 11.11111%;
  }
  [class*="l-7of8"] {
    width: 87.5%;
  }
  [class*="l-5of8"] {
    width: 62.5%;
  }
  [class*="l-3of8"] {
    width: 37.5%;
  }
  [class*="l-1of8"] {
    width: 12.5%;
  }
  [class*="l-6of7"] {
    width: 85.71429%;
  }
  [class*="l-5of7"] {
    width: 71.42857%;
  }
  [class*="l-4of7"] {
    width: 57.14286%;
  }
  [class*="l-3of7"] {
    width: 42.85714%;
  }
  [class*="l-2of7"] {
    width: 28.57143%;
  }
  [class*="l-1of7"] {
    width: 14.28571%;
  }
  [class*="l-5of6"] {
    width: 83.33333%;
  }
  [class*="l-1of6"] {
    width: 16.66667%;
  }
  [class*="l-4of5"] {
    width: 80%;
  }
  [class*="l-3of5"] {
    width: 60%;
  }
  [class*="l-2of5"] {
    width: 40%;
  }
  [class*="l-1of5"] {
    width: 20%;
  }
  /*

Media Grid

The Media Grid allows you to place a grid of photos or videos (catalog or 
retail products, etc.) without floating them, alleviating the need to concern 
yourself with clearing the floats with rows should an object extend further 
than another. Also, because they are not floating, it allows you to align 
the entire group center, making sure any "orphaned" grid entries are centered.

The syntax is simply the same as the regular responsive grid system, except
the row class has a `--flex` modifier.

````media-grid
<ul class="gs-halves gm-thirds gl-quarters">
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
            <figcaption>Alderaan is peaceful. We have no weapons.</figcaption>
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
            <figcaption>Alderaan is peaceful. We have no weapons.</figcaption>
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
            <figcaption>Alderaan is peaceful. We have no weapons.</figcaption>
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
        </figure>
    </li>
    <li>
        <figure class="figure">
            <img src="http://placehold.it/400">
        </figure>
    </li>
</ul>
````

*/
  .gl-row--flex,
  .gl-quarters,
  .gl-thirds,
  .gl-halves {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
  }
  .gl-row--flex > [class*="gcl"],
  .gl-quarters > *,
  .gl-thirds > *,
  .gl-halves > * {
    float: none;
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
  .opera-only :-o-prefocus,
  .gl-row--flex,
  .gl-quarters,
  .gl-thirds,
  .gl-halves {
    word-spacing: -0.43em;
  }
}
/*

Off-Canvas Trigger (Small Screens Only)

The Off-Canvas Trigger is a simple way of pushing a column of content
off-canvas and sliding it on upon trigger. In this case, the `is-active` 
class is placed on the `.off-canvas` wrapping element so that it can 
adjust both child elements.

@TODO: Adjust for IE9?
@TODO: Show better example w/ Reveal plugin

    <div class="off-canvas--left">
        <div class="canvas__primary">
            ...
        </div>
        <div class="canvas__secondary">
            ...
        </div>
    </div>

*/
.js [class*="off-canvas--"] {
  /* Positioning */
  position: relative;
  /* Display & Box Model */
  overflow: hidden;
}
.js [class*="off-canvas--"].is-active > .canvas__primary {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.js [class*="off-canvas--"].is-active > .canvas__primary,
.js [class*="off-canvas--"].was-active > .canvas__primary,
.js [class*="off-canvas--"].is-active > .canvas__secondary,
.js [class*="off-canvas--"].was-active > .canvas__secondary {
  -webkit-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js .canvas__secondary {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.js .off-canvas--left > .canvas__primary,
.js .off-canvas--right > .canvas__primary,
.js .off-canvas--left > .canvas__secondary,
.js .off-canvas--right > .canvas__secondary {
  min-height: 100vh;
}
.js .off-canvas--left > .canvas__secondary,
.js .off-canvas--right > .canvas__secondary {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
}
.js .off-canvas--left.is-active,
.js .off-canvas--right.is-active,
.js .off-canvas--left.is-active > .canvas_primary,
.js .off-canvas--right.is-active > .canvas_primary {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas--right.is-active > .canvas__secondary {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.js .off-canvas--right > .canvas__primary {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  /* Positioning */
  float: left;
  /* Display & Box Model */
  margin-left: -100%;
}
.js .off-canvas--right > .canvas__secondary {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Positioning */
  float: right;
  /* Display & Box Model */
  margin-right: -100%;
}
.js .off-canvas--left.is-active > .canvas__secondary {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.js .off-canvas--left > .canvas__primary {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  /* Positioning */
  float: right;
  /* Display & Box Model */
  margin-right: -100%;
}
.js .off-canvas--left > .canvas__secondary {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Positioning */
  float: left;
  /* Display & Box Model */
  margin-left: -100%;
}
.js .off-canvas--top,
.js .off-canvas--bottom {
  /* Positioning */
  position: relative;
  /* Display & Box Model */
  min-height: 100vh;
}
.js .off-canvas--top.is-active,
.js .off-canvas--bottom.is-active {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__primary,
.js .off-canvas--bottom.is-active > .canvas__primary {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  /* Display & Box Model */
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__secondary,
.js .off-canvas--bottom.is-active > .canvas__secondary {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Display & Box Model */
  overflow: auto;
}
.js .off-canvas--top > .canvas__secondary,
.js .off-canvas--bottom > .canvas__secondary {
  /* Positioning */
  position: absolute;
  left: 0;
  right: 0;
  /* Display & Box Model */
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__primary {
  -webkit-transform: translate3d(0, 80vh, 0);
  -moz-transform: translate3d(0, 80vh, 0);
  -o-transform: translate3d(0, 80vh, 0);
  -ms-transform: translate3d(0, 80vh, 0);
  transform: translate3d(0, 80vh, 0);
}
.js .off-canvas--top > .canvas__secondary {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  /* Positioning */
  top: 0;
}
.js .off-canvas--bottom.is-active > .canvas__primary {
  -webkit-transform: translate3d(0, -80vh, 0);
  -moz-transform: translate3d(0, -80vh, 0);
  -o-transform: translate3d(0, -80vh, 0);
  -ms-transform: translate3d(0, -80vh, 0);
  transform: translate3d(0, -80vh, 0);
}
.js .off-canvas--bottom > .canvas__secondary {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  /* Positioning */
  bottom: 0;
}
.js .canvas__primary,
.js .canvas__secondary {
  /* Display & Box Model */
  width: 100%;
}
.js .canvas__primary {
  z-index: 1;
}
.js .canvas__secondary {
  z-index: 2;
}
@media all and (min-width: 48em) {
  .js [class*="off-canvas--"].is-active > .canvas__primary,
  .js [class*="off-canvas--"].was-active > .canvas__primary,
  .js [class*="off-canvas--"].is-active > .canvas__secondary,
  .js [class*="off-canvas--"].was-active > .canvas__secondary {
    -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .js .off-canvas--right > .canvas__secondary,
  .js .off-canvas--left > .canvas__secondary {
    width: 70%;
  }
  .js .off-canvas--right.is-active > .canvas__primary {
    -webkit-transform: translate3d(30%, 0, 0);
    -moz-transform: translate3d(30%, 0, 0);
    -o-transform: translate3d(30%, 0, 0);
    -ms-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
  }
  .js .off-canvas--right > .canvas__secondary {
    margin-right: -70%;
  }
  .js .off-canvas--left.is-active > .canvas__primary {
    -webkit-transform: translate3d(-30%, 0, 0);
    -moz-transform: translate3d(-30%, 0, 0);
    -o-transform: translate3d(-30%, 0, 0);
    -ms-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0);
  }
  .js .off-canvas--left > .canvas__secondary {
    margin-left: -70%;
  }
}
@media all and (min-width: 62em) {
  .js .off-canvas--right > .canvas__secondary,
  .js .off-canvas--left > .canvas__secondary {
    width: 60%;
  }
  .js .off-canvas--right.is-active > .canvas__primary {
    -webkit-transform: translate3d(40%, 0, 0);
    -moz-transform: translate3d(40%, 0, 0);
    -o-transform: translate3d(40%, 0, 0);
    -ms-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
  }
  .js .off-canvas--right > .canvas__secondary {
    margin-right: -60%;
  }
  .js .off-canvas--left.is-active > .canvas__primary {
    -webkit-transform: translate3d(-40%, 0, 0);
    -moz-transform: translate3d(-40%, 0, 0);
    -o-transform: translate3d(-40%, 0, 0);
    -ms-transform: translate3d(-40%, 0, 0);
    transform: translate3d(-40%, 0, 0);
  }
  .js .off-canvas--left > .canvas__secondary {
    margin-left: -60%;
  }
}
.js [class*="slide-canvas--"] {
  -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  /* Positioning */
  position: fixed;
  z-index: 110;
  /* Display & Box Model */
  overflow: auto;
  overflow-x: hidden;
}
.js [class*="slide-canvas--"].is-revealed {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.js .slide-canvas--left,
.js .slide-canvas--right {
  /* Positioning */
  top: 0;
  bottom: 0;
  /* Display & Box Model */
  width: 80%;
}
@media all and (min-width: 48em) {
  .js .slide-canvas--left,
  .js .slide-canvas--right {
    width: 33%;
  }
}
@media all and (min-width: 62em) {
  .js .slide-canvas--left,
  .js .slide-canvas--right {
    width: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .slide-canvas--left,
  .js .slide-canvas--right {
    width: 20%;
  }
}
.js .slide-canvas--left {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  /* Positioning */
  left: 0;
}
.js .slide-canvas--right {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  /* Positioning */
  right: 0;
}
.js .slide-canvas--top,
.js .slide-canvas--bottom {
  /* Positioning */
  left: 0;
  right: 0;
  /* Display & Box Model */
  height: 90%;
}
@media all and (min-width: 48em) {
  .js .slide-canvas--top,
  .js .slide-canvas--bottom {
    height: 33%;
  }
}
@media all and (min-width: 62em) {
  .js .slide-canvas--top,
  .js .slide-canvas--bottom {
    height: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .slide-canvas--top,
  .js .slide-canvas--bottom {
    height: 20%;
  }
}
.js .slide-canvas--top {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  /* Positioning */
  top: 0;
}
.js .slide-canvas--bottom {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  /* Positioning */
  bottom: 0;
}
/*

Tables

*/
/*

Default Tables

Simple, clean default styles. Just mark it up like a normal table.

Undoes table to more of a definition list on smaller viewports.

See: http://codepen.io/aarongustafson/pen/ucJGv

````tables
<table>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="#">1</td>
            <td data-th="First Name">Some</td>
            <td data-th="Last Name">One</td>
            <td data-th="Language">English</td>
        </tr>
        <tr>
            <td data-th="#">2</td>
            <td data-th="First Name">Joe</td>
            <td data-th="Last Name">Sixpack</td>
            <td data-th="Language">English</td>
        </tr>
        <tr>
            <td data-th="#">3</td>
            <td data-th="First Name">Stu</td>
            <td data-th="Last Name">Dent</td>
            <td data-th="Language">Code</td>
        </tr>
    </tbody>
</table>
````

*/
table {
  width: 100%;
  max-width: 100%;
}
th,
td {
  padding: 0.71428571em 0.64285714em;
  text-align: left;
}
th {
  padding-top: 0.71428571em;
}
@media all and (max-width: 47.9375em) {
  table {
    display: block;
    width: 100%;
  }
  tbody,
  tr,
  th,
  td {
    border: 0;
    display: block;
    padding: 0;
    text-align: left;
    white-space: normal;
  }
  thead {
    display: none;
    visibility: hidden;
  }
  tr {
    margin-top: 1.4285714285714286em;
  }
  td[data-th]:before {
    content: attr(data-th) ":\00A0";
    display: inline-block;
    font-weight: bold;
  }
  td:empty {
    display: none;
  }
}
@media all and (min-width: 48em) {
  th,
  td {
    padding: 0.71428571em 1.28571429em;
  }
}
/*

Panel

Used to provide messaging to the user, whether it be direct or through calls to 
action. The panel typically indicates a visual separation and implied 
sub-grouping of its content.

```panels
<div class="panel">
    <h3>This is a Panel</h3>
    <p>This is a <a href="#">feedback message</a> for the user.</p>
    <p><a href="#" class="btn">User Action</a></p>
</div>
<div class="panel">
    <p>This is a feedback panel with no heading.</p>
</div>
````

*/
.panel,
[class*="panel-"],
[class*="-panel"] {
  margin-top: 1.4285714285714286em;
  padding: 1.42857143em;
  background-color: #eeeeef;
}
.panel > :first-child,
[class*="panel-"] > :first-child,
[class*="-panel"] > :first-child {
  margin-top: 0;
}
.panel h1,
[class*="panel-"] h1,
[class*="-panel"] h1,
.panel h2,
[class*="panel-"] h2,
[class*="-panel"] h2,
.panel h3,
[class*="panel-"] h3,
[class*="-panel"] h3,
.panel h4,
[class*="panel-"] h4,
[class*="-panel"] h4,
.panel h5,
[class*="panel-"] h5,
[class*="-panel"] h5,
.panel h6,
[class*="panel-"] h6,
[class*="-panel"] h6 {
  color: inherit;
}
[class*="panel--thin"] {
  padding: 0.71428571em;
}
/*

Alert Panel

This variation of the standard `.panel` is used specifically for delivering 
direct messages to the user, whether they be informative, complimentary, 
or preventative.

````info-alert-panels
<div class="alert-panel--info">
    <h3>This is a Panel</h3>
    <p>This is an <a href="#">alert message</a> for the user.</p>
    <p><a href="#" class="btn">User Action</a></p>
</div>
<div class="alert-panel--info">
    <p>This is an alert panel with no heading.</p>
</div>
````

*/
/*

````error-alert-panels
<div class="alert-panel--error">
    <h3>This is a Panel</h3>
    <p>This is an <a href="#">alert message</a> for the user.</p>
    <p><a href="#" class="btn">User Action</a></p>
</div>
<div class="alert-panel--error">
    <p>This is an alert panel with no heading.</p>
</div>
````

*/
/*

````success-alert-panels
<div class="alert-panel--success">
    <h3>This is a Panel</h3>
    <p>This is an <a href="#">alert message</a> for the user.</p>
    <p><a href="#" class="btn">User Action</a></p>
</div>
<div class="alert-panel--success">
    <p>This is an alert panel with no heading.</p>
</div>
````

*/
[class*="alert-panel"] {
  color: #ffffff;
}
.alert-panel {
  background: #13496d;
}
.alert-panel--error {
  background: #e31b23;
}
.alert-panel--success {
  background: #72bc44;
}
/*

WYSIWYG

Though we keep our styles as flexible and modular as possible, there may be 
times, as when using a WYSIWYG editor, when some styles need to be baked in. 
Here, we specify a `.wysiwyg` class that wraps around that content, and 
hardcode some of those styles

    <div class="wysiwyg">
        [WYSIWYG Content]
    </div>

*/
.wysiwyg h1 {
  margin-top: 0;
}
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  margin-top: 1.5em;
}
/* ==========================================================================
   Media Mobile through Tablet
   ========================================================================== */
@media all and (max-width: 61.9375em) {
  /* Newtons Laws
       ========================================================================== */
  .newtons-laws {
    display: none;
  }
}
body {
  background: #000000;
}
.global-hotspots {
  display: none;
}
.pangaea,
.moon-phase {
  display: none;
}
/* ==========================================================================
   Media Small Screens Max
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  body {
    background: #aca9bc url("../images/gradient-highlight.png") repeat-x left bottom;
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0, #010a18), color-stop(50%, #15325c), color-stop(100%, #aca9bc));
    background: -webkit-linear-gradient(#010a18 0, #15325c 50%, #aca9bc 100%);
    background: -moz-linear-gradient(center bottom, #010a18 0, #15325c 50%, #aca9bc 100%);
    background: -o-linear-gradient(center bottom, #010a18 0, #15325c 50%, #aca9bc 100%);
    background: linear-gradient(center bottom, #010a18 0, #15325c 50%, #aca9bc 100%);
  }
}
/* ==========================================================================
   Media Tablet
   ========================================================================== */
@media all and (min-width: 48em) {
  body {
    /* Other */
    background: #000000 url(/resources/images/bg-all.jpg) no-repeat center bottom;
    background-size: cover;
    background-attachment: fixed;
  }
}
/* ==========================================================================
   Media Desktop
   ========================================================================== */
@media all and (min-width: 62em) {
  /* Hotspots Bubbles
       ========================================================================== */
  .bubble {
    margin: 0;
    padding: 10px;
    background-color: #ffffff;
    position: relative;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }
  .bubble:after {
    position: absolute;
    border: 4px solid transparent;
    content: "";
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    display: block;
  }
  .bubble.left-wisp:after {
    top: 50%;
    margin-top: -4px;
    left: -8px;
    border-right-color: #ffffff;
  }
  .bubble.right-wisp:after {
    top: 50%;
    margin-top: -4px;
    right: -8px;
    border-left-color: #ffffff;
  }
  .bubble.bottom-wisp:after {
    left: 50%;
    margin-left: -4px;
    bottom: -8px;
    border-top-color: #ffffff;
  }
  .bubble.top-wisp:after {
    left: 50%;
    margin-left: -4px;
    top: -8px;
    border-bottom-color: #ffffff;
  }
  /* Global Hotspots
       ========================================================================== */
  .global-hotspots {
    display: block;
  }
  .global-hotspots {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 2546px;
    height: 633px;
    margin: 0 0 0 -1273px;
  }
  .global-hotspots .hotspots .acre {
    left: 463px;
    top: 498px;
  }
  .global-hotspots .hotspots .cistern {
    left: 675px;
    top: 538px;
  }
  .global-hotspots .hotspots .tall {
    left: 1817px;
    top: 68px;
  }
  .global-hotspots .hotspots .tall .bubble {
    margin: 0 0 -32px;
    bottom: 50%;
    left: 40px;
  }
  .global-hotspots .hotspots .escalator {
    left: 1882px;
    top: 204px;
  }
  .global-hotspots .hotspots .solar {
    left: 1924px;
    top: 428px;
  }
  .global-hotspots .hotspots .leds {
    left: 2011px;
    top: 481px;
  }
  .global-hotspots .hotspots .deck {
    left: 2098px;
    top: 415px;
  }
  .global-hotspots .hotspots .marker {
    background-color: transparent;
    cursor: pointer;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -200px -550px;
  }
  .global-hotspots .hotspots .marker.is-visited {
    background-color: transparent;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -200px -600px;
  }
  .hotspots {
    margin: 0;
  }
  .hotspots .marker {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .hotspots .marker .bubble {
    width: 150px;
    margin: 0 0 0 -75px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
  }
  .opacity .hotspots .marker .bubble {
    visibility: hidden;
    opacity: 0;
  }
  .opacity .hotspots .marker .bubble.is-current {
    visibility: visible;
    opacity: 1;
  }
  .no-opacity .hotspots .marker .bubble {
    display: none;
  }
  .no-opacity .hotspots .marker .bubble.is-current {
    display: block;
  }
  /* Moon Phases
       ========================================================================== */
  .pangaea,
  .moon-phase {
    display: block;
    width: 120px;
    padding: 197px 0 0 93px;
    color: #8a8585;
    position: fixed;
    top: 16%;
    left: 50%;
    margin-left: -790px;
    z-index: 10;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left top;
    box-sizing: initial;
    /*color: #ddd;
          text-shadow:#000 1px 1px;*/
  }
  .ie9 .pangaea,
  .ie9 .moon-phase {
    width: 200px;
  }
  .pangaea + .moon-phase {
    top: 5%;
    left: 46%;
    color: #dadada;
    padding: 90px 0 0 40px;
    background-size: auto 85px;
    background-position: left top;
  }
  .pangaea + .moon-phase .phase {
    color: #dadada;
  }
  .pangaea {
    background-image: url(/resources/images/pangaea.png);
    width: 133px;
    padding-left: 125px;
    padding-top: 275px;
    color: #fff;
  }
  .moon-phase.new-moon {
    background-image: url(/resources/images/moon-new.png);
  }
  .moon-phase.waxing-crescent-moon {
    background-image: url(/resources/images/moon-waxing-crescent.png);
  }
  .moon-phase.first-quarter-moon {
    background-image: url(/resources/images/moon-first-quarter.png);
  }
  .moon-phase.waxing-gibbous-moon {
    background-image: url(/resources/images/moon-waxing-gibbous.png);
  }
  .moon-phase.full-moon {
    background-image: url(/resources/images/moon-full.png);
  }
  .moon-phase.waning-gibbous-moon {
    background-image: url(/resources/images/moon-waning-gibbous.png);
  }
  .moon-phase.third-quarter-moon {
    background-image: url(/resources/images/moon-third-quarter.png);
  }
  .moon-phase.waning-crescent-moon {
    background-image: url(/resources/images/moon-waning-crescent.png);
  }
  .pangaea .date,
  .moon-phase .date {
    margin: 0;
    display: block;
  }
  .pangaea .phase,
  .moon-phase .phase {
    color: #8a8585;
    /*color: #ddd;*/
    margin: 0;
    text-transform: uppercase;
  }
  .pangaea .phase {
    color: #fff;
  }
}
/* ==========================================================================
   Media: Tablet Plus
   ========================================================================== */
@media all and (min-width: 48em) {
  [class*="ext-container"] {
    padding: 1.42857143em;
    margin-left: -1.42857143em;
    margin-right: -1.42857143em;
  }
  .ext-container--dark {
    background: rgba(30, 30, 30, 0.55);
  }
  .ext-container--light {
    background: rgba(255, 255, 255, 0.65);
  }
}
/* ==========================================================================
   Media: Desktop Plus
   ========================================================================== */
@media all and (min-width: 62em) {
  .homepage .wrapper {
    position: relative;
    z-index: 1;
  }
}
/* Main Header
   ========================================================================== */
.main-header {
  padding: 0;
}
.main-header .logo {
  /* Display & Box Model */
  display: block;
  width: 195px;
  height: 90px;
  /* Positioning */
  float: left;
  overflow: hidden;
  /* Other */
  background-image: url(../images/perot-logo-nav-white.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  text-indent: 100%;
  white-space: nowrap;
}
/* Main Navigation
   ========================================================================== */
.main-nav {
  margin-top: 25px;
  margin-bottom: 0;
}
/* ==========================================================================
   Media: Base to Tablet
   ========================================================================== */
@media all and (max-width: 61.9375em) {
  /* Main Header
       ========================================================================== */
  .main-header .header-logo {
    text-align: center;
    width: 100%;
  }
  .main-header a.logo {
    /* Display & Box Model */
    display: inline-block;
    height: 90px;
    margin: 0 auto;
    margin-left: 0;
    /* Positioning */
    float: none;
  }
}
/* ==========================================================================
   Media: Higher Resolution Devices
   ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .main-header .logo {
    /* Other */
    background-image: url(../images/perot-logo-nav-white-2x.png);
    background-size: 200px 100px;
  }
}
/* ==========================================================================
   Eyebrow:

   This code styles the eyebrow navigation located in:
   - TopNavigation.view
   - ResponsiveShell.view
   ========================================================================== */
.eyebrow {
  /* Display & Box Model */
  padding: 20px 0;
}
.eyebrow .main-logo {
  /* Display & Box Model */
  display: block;
}
.eyebrow button {
  display: none;
}
/* Eyebrow Navigation
   ========================================================================== */
.eyebrow__nav {
  /* Other */
  text-align: center;
}
.eyebrow__nav li {
  display: inline-block;
}
.eyebrow .eyebrow__nav a {
  /* Extends */
  /* Display & Box Model */
  display: inline-block;
  margin: 0 5px;
}
.eyebrow .eyebrow__nav a:hover,
.eyebrow .eyebrow__nav a:focus {
  color: #c9cacc;
}
.eyebrow__nav {
  /* Display & Box Model */
  margin-top: 10px;
}
.eyebrow__nav a {
  color: #ffffff;
}
.eyebrow__nav:first-of-type a {
  color: #8a8585;
}
.eyebrow .header-search {
  /* Display & Box Model */
  display: block;
}
.eyebrow .header-search form {
  /* Display & Box Model */
  margin-top: 10px;
}
/* Eyebrow Quick Info
   ========================================================================== */
.eyebrow .quick-info {
  /* Other */
  text-align: center;
}
.eyebrow .quick-info,
.eyebrow .quick-info .hours {
  color: #ffffff;
}
.eyebrow .quick-info .hours {
  /* Display & Box Model */
  display: inline-block;
  margin-top: 10px;
}
/* ==========================================================================
   Media: Base and Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .eyebrow {
    background: rgba(0, 0, 0, 0.5);
  }
  .eyebrow .main-logo {
    text-align: center;
  }
  .eyebrow .quick-info {
    text-align: right;
  }
  .eyebrow .quick-info b {
    /* Display & Box Model */
    display: block;
    /* Other */
    font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .eyebrow-nav-container {
    display: none;
  }
}
/* ==========================================================================
   Media: Tablet Plus
   ========================================================================== */
@media all and (min-width: 48em) {
  .eyebrow {
    /* Display & Box Model */
    padding: 35px 0 10px 0;
    /* Positioning */
    position: relative;
    /* Other */
    background: none;
  }
  .eyebrow:before {
    /* Mixins */
    background: transparent;
    background: -moz-linear-gradient(top, #000000 0, transparent 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(90%, transparent));
    background: -webkit-linear-gradient(top, #000000 0, transparent 90%);
    background: -o-linear-gradient(top, #000000 0, transparent 90%);
    background: -ms-linear-gradient(top, #000000 0, transparent 90%);
    background: linear-gradient(to bottom, #000000 0, transparent 90%);
    /* Display & Box Model */
    content: "";
    display: block;
    width: 100%;
    height: 105px;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .eyebrow .main-logo {
    /* Display & Box Model */
    max-width: 100%;
  }
  /* Eyebrow Navigation
       ========================================================================== */
  .eyebrow-nav-container {
    /* Positioning */
    float: right;
  }
  .eyebrow__nav {
    /* Display & Box Model */
    margin-top: 0;
    /* Positioning */
    float: left;
    /* Other */
    text-align: right;
  }
  .eyebrow__nav a {
    padding-left: 5px;
    padding-right: 5px;
  }
  .eyebrow__nav .pre-icon--mail:before {
    padding-top: 2px;
  }
  .eyebrow__nav .header-search {
    /* Display & Box Model */
    display: inline-block;
  }
  .eyebrow__nav .header-search form {
    /* Display & Box Model */
    margin-top: 0;
  }
  .eyebrow__nav .header-search input {
    display: none;
  }
  .eyebrow__nav .header-search .icon--search {
    /* Mixins */
    font-size: 16px;
    font-size: 1rem;
    /* Other */
    color: #ffffff;
    line-height: 1em;
  }
  .eyebrow__nav .header-search .icon--search:hover,
  .eyebrow__nav .header-search .icon--search:focus {
    /* Other */
    cursor: pointer;
  }
  .header-search.is-showing {
    /* Positioning */
    position: relative;
  }
  .header-search.is-showing input {
    /* Mixins */
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #c9cacc 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9cacc), color-stop(100%, #e5e5e5));
    background: -webkit-linear-gradient(top, #c9cacc 0%, #e5e5e5 100%);
    background: -o-linear-gradient(top, #c9cacc 0%, #e5e5e5 100%);
    background: -ms-linear-gradient(top, #c9cacc 0%, #e5e5e5 100%);
    background: linear-gradient(to bottom, #c9cacc 0%, #e5e5e5 100%);
    /* Display & Box Model */
    display: block;
    width: 300px;
    padding: 9px;
    /* Positioning */
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    /* Other */
    border: 0;
  }
  .header-search.is-showing button {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    /* Display & Box Model */
    display: block;
    width: 22px;
    height: 22px;
    margin-top: 5px;
    /* Positioning */
    position: absolute;
    top: 100%;
    right: 9px;
    z-index: 20;
    /* Other */
    background: #56b2c7;
    border: none;
  }
  .header-search.is-showing button:after {
    /* Mixins */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Display & Box Model */
    content: "";
    /* Positioning */
    position: inherit;
    top: 50%;
    left: 50%;
    /* Other */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #ffffff;
  }
  /* Eyebrow Quick Info
       ========================================================================== */
  .eyebrow .quick-info {
    /* Positioning */
    clear: both;
    /* Other */
    text-align: right;
  }
  .eyebrow .quick-info .hours {
    /* Display & Box Model */
    margin-top: 10px;
  }
}
/* ==========================================================================
   Media: Desktop Plus
   ========================================================================== */
@media all and (min-width: 62em) {
  .eyebrow__nav a {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* ==========================================================================
   Main Navigation

   This code styles the main navigation located in:
   - ResponsiveMainNavigation.view
   - ResponsiveShell.view
   ========================================================================== */
.main-nav {
  /* Extends */
  /* Display & Box Model */
  display: table;
  width: 100%;
  margin-top: 0;
}
.main-nav__primary,
.main-nav__secondary {
  /* Display & Box Model */
  display: table-cell;
  /* Other */
  text-align: center;
  vertical-align: middle;
}
.main-nav__primary ul,
.main-nav__secondary ul {
  margin-top: 0;
}
.main-nav__primary a,
.main-nav__secondary a {
  /* Extends */
  /* Display & Box Model */
  margin: auto 5px;
  /* Other */
  font-weight: 600;
}
/* Primary Navigation
   ========================================================================== */
.main-nav__primary {
  /* Other */
  background: #f2f2f2;
}
.main-nav__primary a {
  color: #262626;
}
/* Secondary Navigation
   ========================================================================== */
.main-nav__secondary {
  /* Other */
  background: #e31b23;
}
.main-nav__secondary a {
  color: #ffffff;
}
/* Perspective
   ========================================================================== */
[class*="main-nav"] .perspective {
  /* Display & Box Model */
  width: inherit;
  height: 7px;
  /* Positioning */
  position: absolute;
  bottom: 100%;
}
[class*="main-nav"] [class*="vantage--"] {
  /* Display & Box Model */
  display: block;
  height: inherit;
  /* Positioning */
  position: absolute;
  top: 0;
}
.main-nav__primary .vantage--left,
.main-nav__primary .vantage--right {
  /* Mixins */
  background: #a7a9ac;
  background: -moz-linear-gradient(top, #9c9ea2 0, #a7a9ac 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9c9ea2), color-stop(100%, #a7a9ac));
  background: -webkit-linear-gradient(top, #9c9ea2 0, #a7a9ac 100%);
  background: -o-linear-gradient(top, #9c9ea2 0, #a7a9ac 100%);
  background: -ms-linear-gradient(top, #9c9ea2 0, #a7a9ac 100%);
  background: linear-gradient(to bottom, #9c9ea2 0, #a7a9ac 100%);
}
.main-nav__primary .vantage--left {
  /* Mixins */
  -webkit-transform: skew(-56deg, 0);
  -moz-transform: skew(-56deg, 0);
  -o-transform: skew(-56deg, 0);
  -ms-transform: skew(-56deg, 0);
  transform: skew(-56deg, 0);
  /* Display & Box Model */
  width: 75%;
  /* Positioning */
  left: 4px;
}
.main-nav__primary .vantage--right {
  /* Mixins */
  -webkit-transform: skew(22deg, 0);
  -moz-transform: skew(22deg, 0);
  -o-transform: skew(22deg, 0);
  -ms-transform: skew(22deg, 0);
  transform: skew(22deg, 0);
  /* Display & Box Model */
  width: 50%;
  /* Positioning */
  right: 0;
}
.main-nav__secondary .perspective {
  top: -7px;
}
.main-nav__secondary .vantage--left,
.main-nav__secondary .vantage--right {
  /* Mixins */
  background: #831014;
  background: -moz-linear-gradient(top, #710d11 0, #831014 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #710d11), color-stop(100%, #831014));
  background: -webkit-linear-gradient(top, #710d11 0, #831014 100%);
  background: -o-linear-gradient(top, #710d11 0, #831014 100%);
  background: -ms-linear-gradient(top, #710d11 0, #831014 100%);
  background: linear-gradient(to bottom, #710d11 0, #831014 100%);
}
.main-nav__secondary .vantage--left {
  /* Mixins */
  -webkit-transform: skew(22deg, 0);
  -moz-transform: skew(22deg, 0);
  -o-transform: skew(22deg, 0);
  -ms-transform: skew(22deg, 0);
  transform: skew(22deg, 0);
  /* Display & Box Model */
  width: 75%;
  /* Positioning */
  left: -1px;
}
.main-nav__secondary .vantage--right {
  /* Mixins */
  -webkit-transform: skew(56deg, 0);
  -moz-transform: skew(56deg, 0);
  -o-transform: skew(56deg, 0);
  -ms-transform: skew(56deg, 0);
  transform: skew(56deg, 0);
  /* Display & Box Model */
  width: 50%;
  /* Positioning */
  right: 5px;
}
/* Navigation Search
   ========================================================================== */
.main-nav .header-search {
  display: none;
}
/* ==========================================================================
   Media: Base and Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  /* Trigger
       ========================================================================== */
  .main-nav__primary > button {
    /* Mixins */
    font-size: 18px;
    font-size: 1.125rem;
    /* Other */
    border: none;
    background: none;
  }
  .main-nav__primary > button:focus {
    /* Other */
    outline: none;
  }
  /* Navigation
       ========================================================================== */
  .main-nav__primary,
  .main-nav__secondary {
    /* Display & Box Model */
    position: relative;
  }
  .main-nav__primary li,
  .main-nav__secondary li {
    display: inline-block;
  }
  /* Primary Navigation
       ========================================================================== */
  .main-nav__primary {
    /* Display & Box Model */
    width: 15%;
  }
  .main-nav__primary li {
    display: block;
  }
  .main-nav__primary a {
    /* Display & Box Model */
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding: 6px 20px;
  }
  .main-nav__primary ul {
    /* Display & Box Model */
    display: none;
    width: 100%;
    padding: 0 0 0.71428571em 0;
    /* Positioning */
    position: absolute;
    top: 100%;
    left: 0;
    /* Other */
    background: #fff;
    text-align: left;
  }
  .main-nav__primary ul.is-showing,
  .main-nav__primary ul.is-showing li > ul {
    display: block;
    z-index: 100;
  }
  .main-nav__primary ul.is-showing li > ul {
    display: table;
  }
  .main-nav__primary li > ul {
    /* Display & Box Model */
    display: table;
    padding: 0;
    /* Positioning */
    position: relative;
    /* Other */
    background: #f2f2f2;
  }
  .main-nav__primary li > ul li {
    /* Display & Box Model */
    display: table-cell;
  }
  .main-nav__primary li > ul a {
    /* Positioning */
    padding-left: 0;
    padding-right: 0;
    /* Other */
    color: #7c7c7c;
    font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
    text-align: center;
  }
  /* Secondary Navigation
       ========================================================================== */
  .main-nav__secondary {
    /* Display & Box Model */
    width: 85%;
    /* Other */
    text-align: left;
  }
  .main-nav__secondary ul {
    padding: 0 ;
  }
  .main-nav__secondary li {
    padding: 0;
  }
  .main-nav__secondary li:first-of-type {
    display: none;
  }
  .main-nav__secondary li a {
    font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .main-nav__secondary a {
    margin: 0;
    display: block;
    padding: 15px 0 15px 12px;
  }
  /* Navigation Search
       ========================================================================== */
  .main-nav .icon--search,
  .main-nav [type="submit"],
  .main-nav .header-search,
  .main-nav .mobile-search {
    /* Positioning */
    position: absolute;
    right: 0;
  }
  .main-nav .header-search {
    /* Display & Box Model */
    display: block;
    width: 100%;
    height: 100%;
    /* Positioning */
    top: 100%;
  }
  .main-nav .mobile-search {
    /* Display & Box Model */
    width: 100%;
    /* Positioning */
    top: 0;
    z-index: 100;
  }
  .main-nav .mobile-search {
    /* Display & Box Model */
    display: none;
  }
  .main-nav .mobile-search.is-showing {
    display: block;
  }
  .main-nav .mobile-search input {
    /* Mixins */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    /* Display & Box Model */
    padding: 20px 55px 20px 20px;
    /* Other */
    border: none;
    background: #231f20;
    color: #7c7c7c;
    -webkit-appearance: none;
  }
  .main-nav button {
    background: transparent;
    border: none;
  }
  .main-nav button:focus {
    outline: none;
  }
  .main-nav .icon--search {
    /* Mixins */
    font-size: 24px;
    font-size: 1.5rem;
    /* Display & Box Model */
    height: 100%;
    padding: 0 12px;
    /* Positioning */
    top: -100%;
    /* Other */
    color: #ffffff;
  }
  .main-nav .icon--search.is-showing {
    background: #95161d;
  }
  .main-nav [type="submit"] {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    /* Display & Box Model */
    width: 30px;
    height: 30px;
    /* Positioning */
    top: 50%;
    right: 12px;
    /* Other */
    background: #5ab2c6;
  }
  .main-nav [type="submit"]:before {
    /* Mixins */
    -webkit-transform: translate(-30%, -50%);
    -moz-transform: translate(-30%, -50%);
    -o-transform: translate(-30%, -50%);
    -ms-transform: translate(-30%, -50%);
    transform: translate(-30%, -50%);
    /* Display & Box Model */
    content: "";
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Other */
    border-left: 7px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
  /* Perspective
       ========================================================================== */
  [class*="main-nav"] .perspective {
    width: 100%;
  }
}
/* ==========================================================================
   Media: Tablet Plus
   ========================================================================== */
@media all and (min-width: 48em) {
  /* Trigger
       ========================================================================== */
  .main-nav__primary > button {
    /* Display & Box Model */
    display: none;
  }
  /* Navigation Blocks
       ========================================================================== */
  .main-nav__primary,
  .main-nav__secondary {
    /* Positioning */
    position: relative;
  }
  .main-nav__primary a,
  .main-nav__secondary a {
    /* Display & Box Model */
    display: inline-block;
    padding: 10px 0;
  }
  /* Primary Navigation
       ========================================================================== */
  .main-nav__primary {
    /* Display & Box Model */
    width: 50%;
  }
  .main-nav__primary li {
    width: 20%;
  }
  /* Secondary Navigation
       ========================================================================== */
  .main-nav__secondary {
    /* Display & Box Model */
    width: 28%;
  }
  /* Perspective
       ========================================================================== */
  [class*="main-nav"] .perspective {
    width: 100%;
  }
}
/* ==========================================================================
   Media: Base Through Tablet
   ========================================================================== */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  /* Navigation
       ========================================================================== */
  .main-nav__primary li,
  .main-nav__secondary li {
    display: inline-block;
  }
}
/* ==========================================================================
   Media: Desktop Plus
   ========================================================================== */
@media all and (min-width: 62em) {
  /* Navigation Blocks
       ========================================================================== */
  .main-nav__primary > ul,
  .main-nav__secondary > ul {
    display: table-row;
  }
  .main-nav__primary li,
  .main-nav__secondary li {
    /* Display & Box Model */
    display: table-cell;
  }
  .main-nav__primary a,
  .main-nav__secondary a {
    /* Mixins */
    font-size: 16px;
    font-size: 1rem;
    line-height: 1;
    /* Display & Box Model */
    padding: 20px 0;
    /* Positioning */
    position: relative;
    /* Other */
    font-weight: 400;
  }
  .main-nav__primary a:hover:after,
  .main-nav__secondary a:hover:after,
  .main-nav__primary a:focus:after,
  .main-nav__secondary a:focus:after {
    /* Display & Box Model */
    content: "";
    width: 100%;
    height: 10px;
    /* Positioning */
    position: absolute;
    bottom: 0;
    left: 0;
  }
  /* Primary Navigation
       ========================================================================== */
  .main-nav__primary {
    width: 65%;
  }
  .main-nav__primary a:hover:after,
  .main-nav__primary a:focus:after {
    /* Other */
    background: #e31b23;
  }
  .main-nav__primary a.nav-hover {
    /* Display & Box Model */
    padding-top: 60px;
    margin-top: -60px;
    /* Positioning */
    position: relative;
    z-index: 100;
    /* Other */
    background: transparent url(/resources/images/sprite-nav-icons.png) no-repeat center top;
  }
  .main-nav__primary a.nav-hover-dino {
    background-position: center 0;
  }
  .main-nav__primary a.nav-hover-elephant {
    background-position: center -100px;
  }
  .main-nav__primary a.nav-hover-magnify {
    background-position: center -200px;
  }
  .main-nav__primary a.nav-hover-human {
    background-position: center -300px;
  }
  .main-nav__primary a.nav-hover-energy {
    background-position: center -400px;
  }
  .main-nav__primary a.nav-hover-bulb {
    background-position: center -500px;
  }
  .main-nav__primary a.nav-hover-deer {
    background-position: center -600px;
  }
  .main-nav__primary a.nav-hover-spider {
    background-position: center -700px;
  }
  .main-nav__primary a.nav-hover-nuclear {
    background-position: center -800px;
  }
  .main-nav__primary a.nav-hover-monkey {
    background-position: center -900px;
  }
  .main-nav__primary a.nav-hover-leaf {
    background-position: center -1000px;
  }
  .main-nav__primary a.nav-hover-spaceman {
    background-position: center -1100px;
  }
  .main-nav__primary a.nav-hover-bug {
    background-position: center -1200px;
  }
  .main-nav__primary a.nav-hover-spaceship {
    background-position: center -1300px;
  }
  .main-nav__primary a.nav-hover-butterfly {
    background-position: center -1400px;
  }
  .main-nav__primary a.nav-hover-leaves {
    background-position: center -1500px;
  }
  .main-nav__primary a.nav-hover-bird {
    background-position: center -1600px;
  }
  .main-nav__primary a.nav-hover-bonds {
    background-position: center -1700px;
  }
  .main-nav__primary a.nav-hover-chemistry {
    background-position: center -1800px;
  }
  .main-nav__primary a.nav-hover-brain {
    background-position: center -1900px;
  }
  /* Secondary Navigation
       ========================================================================== */
  .main-nav__secondary {
    width: 28%;
  }
  .main-nav__secondary li {
    width: 33.333333%;
  }
  .main-nav__secondary li:first-of-type {
    width: 23%;
  }
  .main-nav__secondary a:hover:after,
  .main-nav__secondary a:focus:after {
    /* Other */
    background: #ffffff;
  }
}
/* ==========================================================================
   Eyebrow:

   This code styles the eyebrow navigation located in:
   - Footer.view
   - ResponsiveShell.view
   ========================================================================== */
/* Main Footer
   ========================================================================== */
.main-footer {
  margin-top: 20px;
}
/* Stats
   ========================================================================== */
.footer__stats {
  display: none;
}
/* Footer Navigation
   ========================================================================== */
.footer__nav ul {
  /* Display & Box Model */
  margin-top: 0;
}
.footer__nav li {
  margin: 5px 0;
}
.footer__nav a {
  /* Extends */
  /* Other */
  color: #ffffff;
}
/* Copyright
   ========================================================================== */
.main-footer .copyright {
  /* Other */
  color: #c9cacc;
  text-align: center;
}
.main-footer .privacy-policy {
  /* Extends */
  /* Display & Box Model */
  margin-right: 12px;
  /* Other */
  color: #ffe14f;
}
/* Social
   ========================================================================== */
.footer-social {
  /* Other */
  text-align: center;
}
.footer-social li {
  /* Display & Box Model */
  margin: 0 5px;
}
.footer-social li,
.footer-social li a {
  /* Display & Box Model */
  display: inline-block;
}
.footer-social .facebook a {
  /* Mixins */
  background-image: url(/resources/images/sprite-global.png);
  background-repeat: no-repeat;
  background-position: -350px -250px;
  /* Display & Box Model */
  width: 31px;
  height: 31px;
}
.footer-social .facebook a:hover,
.footer-social .facebook a:focus,
.footer-social .facebook a.is-current {
  /* Mixins */
  background-image: url(/resources/images/sprite-global.png);
  background-repeat: no-repeat;
  background-position: -300px -200px;
}
.footer-social .twitter a {
  /* Mixins */
  background-image: url(/resources/images/sprite-global.png);
  background-repeat: no-repeat;
  background-position: -400px -250px;
  /* Display & Box Model */
  width: 31px;
  height: 31px;
}
.footer-social .twitter a:hover,
.footer-social .twitter a:focus,
.footer-social .twitter a.is-current {
  /* Mixins */
  background-image: url(/resources/images/sprite-global.png);
  background-repeat: no-repeat;
  background-position: -300px -250px;
}
/* ==========================================================================
   Media: Base and Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .main-footer {
    /* Display & Box Model */
    margin-bottom: 55px;
    /* Other */
    background: #969696;
  }
  .main-footer > .wrapper {
    display: none;
  }
  /* Footer Globe
       ========================================================================== */
  .footer-globe {
    display: none;
  }
  /* Mobile Footer
       ========================================================================== */
  .mobile-footer {
    /* Display & Box Model */
    padding-top: 215px;
    /* Positioning */
    position: relative;
    /* Other */
    background: rgba(35, 31, 32, 0.75);
  }
  .mobile-footer:before,
  .mobile-footer:after {
    /* Display & Box Model */
    content: "";
    width: 20%;
    height: 90%;
    /* Positioning */
    position: absolute;
    top: 10px;
    z-index: 5;
    /* Other */
    border-top: 20px solid #e31b23;
    border-bottom: 20px solid #e31b23;
  }
  .mobile-footer:before {
    left: 10px;
    border-left: 30px solid #e31b23;
  }
  .mobile-footer:after {
    right: 10px;
    border-right: 30px solid #e31b23;
  }
  .mobile-footer-earth-container {
    position: relative;
  }
  .mobile-globe {
    /* Mixins */
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    /* Positioning */
    position: absolute;
    top: -60%;
    left: 50%;
  }
  .mobile-footer-phone-container {
    /* Mixins */
    -webkit-transform: translate(-34%, 0);
    -moz-transform: translate(-34%, 0);
    -o-transform: translate(-34%, 0);
    -ms-transform: translate(-34%, 0);
    transform: translate(-34%, 0);
    /* Display & Box Model */
    width: 50%;
    /* Positioning */
    position: absolute;
    top: 10px;
    left: 50%;
    /* Other */
    color: #ffffff;
  }
  .mobile-footer-phone-container span {
    display: inline-block;
    margin-left: 5px;
    font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .mobile-footer-phone-container .phoneA {
    /* Mixins */
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1;
    /* Display & Box Model */
    display: block;
    margin-left: 0;
    /* Other */
    font-family: "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .mobile-footer-phone-container .phoneZ {
    margin-left: 0;
  }
  .mobile-footer-phone-icon-container {
    /* Display & Box Model */
    padding-right: 10px;
    float: left;
  }
  .mobile-footer-phone-icon-container + div {
    width: 75%;
    float: left;
  }
  .mobile-footer-copyright-container {
    /* Display & Box Model */
    padding: 10px 0;
    /* Positioning */
    position: relative;
    z-index: 10;
    /* Other */
    color: #ffffff;
    background: #1a1a1a;
  }
  .mobile-footer-social-container {
    /* Display & Box Model */
    width: 50%;
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    /* Other */
    text-align: right;
  }
  .mobile-footer-social-container a {
    text-decoration: none;
  }
  .mobile-footer-social-icon {
    /* Display & Box Model */
    display: inline-block;
    width: 40px;
    height: 40px;
    /* Positioning */
    position: relative;
  }
  .mobile-footer-social-icon:before {
    /* Display & Box Model */
    display: inline-block;
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Other */
    color: #ffffff;
    line-height: 1em;
  }
  .mobile-footer-facebook-icon {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    font-size: 30px;
    font-size: 1.875rem;
    /* Display & Box Model */
    margin-right: 10px;
    /* Other */
    background: #537bbd;
  }
  .mobile-footer-facebook-icon:before {
    /* Mixins */
    -webkit-transform: translate(-50%, -37%);
    -moz-transform: translate(-50%, -37%);
    -o-transform: translate(-50%, -37%);
    -ms-transform: translate(-50%, -37%);
    transform: translate(-50%, -37%);
  }
  .mobile-footer-twitter-icon {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    font-size: 24px;
    font-size: 1.5rem;
    /* Other */
    background: #78cdf0;
  }
  .mobile-footer-twitter-icon:before {
    /* Mixins */
    -webkit-transform: translate(-50%, -37%);
    -moz-transform: translate(-50%, -37%);
    -o-transform: translate(-50%, -37%);
    -ms-transform: translate(-50%, -37%);
    transform: translate(-50%, -37%);
  }
  .mobile-footer-copyright a {
    display: block;
  }
}
/* ==========================================================================
   Media: Tablet and Up
   ========================================================================== */
@media all and (min-width: 48em) {
  /* Main Footer
       ========================================================================== */
  .main-footer {
    margin-top: 35px;
  }
  /* Footer Stats
       ========================================================================== */
  .footer__stats {
    /* Display & Box Model */
    display: block;
    padding: 0 28%;
  }
  [class*="stat__"] {
    /* Display & Box Model */
    padding-left: 30px;
    /* Other */
    color: #ffffff;
  }
  [class*="stat__"] h5,
  [class*="stat__"] p {
    /* Mixins */
    font-size: 12px;
    font-size: 0.75rem;
    /* Display & Box Model */
    margin-top: 0;
  }
  [class*="stat__"] h5 {
    /* Other */
    text-transform: uppercase;
  }
  [class*="stat__"] b {
    /* Mixins */
    font-size: 22px;
    font-size: 1.375rem;
  }
  [class*="stat__"] {
    /* Positioning */
    position: relative;
  }
  [class*="stat__"]:after {
    /* Display & Box Model */
    content: "";
    width: 25px;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    /* Other */
    background-image: url(/resources/images/sprite-global.png);
  }
  .stat__inches:after {
    /* Mixins */
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -300px -300px;
    /* Display & Box Model */
    height: 50px;
    /* Positioning */
    top: 6px;
  }
  .stat__pixels:after {
    /* Mixins */
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -300px -400px;
    /* Display & Box Model */
    height: 50px;
    /* Positioning */
    top: 3px;
  }
  .stat__energy:after {
    /* Mixins */
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -450px -450px;
    /* Display & Box Model */
    height: 50px;
    /* Positioning */
    top: 4px;
  }
  /* Footer Navigation
       ========================================================================== */
  .footer__nav {
    /* Display & Box Model */
    padding: 10px 0 40px 112px;
    /* Positioning */
    float: left;
    position: relative;
    z-index: 10;
  }
  /* Footer Links
       ========================================================================== */
  .footer__nav a,
  .main-footer .privacy-policy {
    /* Positioning */
    position: relative;
    display: block;
  }
  .footer__nav a:after,
  .main-footer .privacy-policy:after {
    /* Mixins */
    /* Display & Box Model */
    content: "";
    display: inline-block;
    margin-left: 5px;
    /* Positioning */
    /* Other */
    border-left: 4px solid #ffe14f;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .main-footer .privacy-policy {
    padding: 5px 0;
  }
  .main-footer .privacy-policy:after {
    /* Other */
    border-left-color: #e31b23;
  }
  /* Footer Social
       ========================================================================== */
  .footer-social {
    /* Display & Box Model */
    max-width: 240px;
    padding: 20px 112px 40px 0;
    /* Positioning */
    float: right;
    position: relative;
    z-index: 10;
    /* Other */
    text-align: right;
  }
  .footer-social ul {
    /* Display & Box Model */
    margin-top: 0;
  }
  .footer-social .copyright {
    margin-top: 5px;
  }
  /* Footer Globe
       ========================================================================== */
  .footer-globe {
    /* Mixins */
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    /* Positioning */
    position: absolute;
    bottom: -50px;
    left: 50%;
  }
  /* Footer Brackets
       ========================================================================== */
  .main-footer .ext-container--dark {
    /* Positioning */
    position: relative;
    overflow: hidden;
  }
  [class*="footer-bracket"] {
    /* Display & Box Model */
    display: block;
    width: 25%;
    height: 100%;
    /* Positioning */
    position: absolute;
    top: 1.42857143em;
    /* Other */
    border-top: 70px solid #e31b23;
  }
  .footer-bracket--left {
    /* Positioning */
    left: 1.42857143em;
    /* Other */
    border-left: 100px solid #e31b23;
  }
  .footer-bracket--right {
    /* Positioning */
    right: 1.42857143em;
    /* Other */
    border-right: 100px solid #e31b23;
  }
  /* Mobile Footer
       ========================================================================== */
  .mobile-footer {
    display: none;
  }
}
/* ==========================================================================
   Media: Tablet Only
   ========================================================================== */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  /* Footer Stats
       ========================================================================== */
  .footer__stats {
    padding: 0 23%;
  }
  /* Footer Brackets
       ========================================================================== */
  [class*="footer-bracket"] {
    width: 20%;
  }
  /* Footer Globe
       ========================================================================== */
  .footer-globe {
    width: 50%;
  }
}
/* Hide The Google Conversion Frame
   ========================================================================== */
iframe[name="google_conversion_frame"] {
  display: none;
}
/* Obscured Banner Container
   ========================================================================== */
.obscured-banner {
  margin-top: 1.42857143em;
  margin-bottom: 1.42857143em;
}
/* Banner Boxes
   ========================================================================== */
.banner-box {
  /* Display & Box Model */
  margin-top: 10px;
}
.banner-box:first-of-type {
  margin-top: 0;
}
.banner-box > section {
  background-repeat: no-repeat;
  background-size: cover;
}
/* Banner Content
   ========================================================================== */
.banner-box__content {
  display: none;
}
/* ==========================================================================
   Media Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .obscured-banner {
    /* Positioning */
    position: relative;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .obscured-banner .tile-container {
    width: 750%;
  }
  .banner-box {
    /* Vars */
    /* Display & Box Model */
    width: 226px;
    margin-top: 0;
    margin-left: 20px;
    /* Positioning */
    float: left;
  }
  .banner-takeover + .banner-close-x {
    /* Display & Box Model */
    display: none;
    width: 55px;
    height: 56px;
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    /* Other */
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -900px -400px;
    font: 0px/0 a;
    color: rgba(0, 0, 0, 0);
    text-shadow: none;
  }
  .banner-takeover + .banner-close-x:hover {
    cursor: pointer;
  }
  .banner-takeover {
    /* Display & Box Model */
    display: none;
    width: 100%;
    height: 100%;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .banner-takeover.is-current {
    display: block;
  }
  .banner-takeover.is-current + .banner-close-x {
    display: block;
  }
}
/* ==========================================================================
   Media Base to Tablet
   ========================================================================== */
@media all and (max-width: 61.9375em) {
  .banner-box .slide-hover-text {
    display: none;
  }
  .banner-box .tablet-link {
    /* Display & Box Model */
    display: block;
    width: 100%;
    height: 100%;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* ==========================================================================
   Media Tablet and Up
   ========================================================================== */
@media all and (min-width: 48em) {
  .obscured-banner > .gm-row {
    margin-left: -0.71428571em;
    margin-right: -0.71428571em;
  }
  .obscured-banner .banner-box {
    padding-left: 0.71428571em;
    padding-right: 0.71428571em;
  }
  /* Banner Boxes
       ========================================================================== */
  .banner-box {
    /* Display & Box Model */
    margin-top: 20px;
  }
  .banner-box:first-of-type,
  .banner-box:first-of-type + .banner-box,
  .banner-box:first-of-type + .banner-box + .banner-box,
  .banner-box:first-of-type + .banner-box + .banner-box + .banner-box {
    margin-top: 0;
  }
}
/* ==========================================================================
   Media Desktop and Up
   ========================================================================== */
@media all and (min-width: 62em) {
  .obscured-banner {
    position: relative;
  }
  .obscured-banner .gl-row {
    /* Vars */
    /* Display & Box Model */
    margin: 0 -0.71428571em;
  }
  /* Banner Hover Text
       ========================================================================== */
  .banner-box .slide-hover-text,
  .banner-box .slide:after {
    /* Mixins */
    -webkit-transition: opacity 200ms ease 200ms;
    -moz-transition: opacity 200ms ease 200ms;
    -o-transition: opacity 200ms ease 200ms;
    transition: opacity 200ms ease 200ms;
    opacity: 0;
  }
  .banner-box:hover,
  .banner-box:focus {
    cursor: pointer;
  }
  .banner-box:hover .slide-hover-text,
  .banner-box:focus .slide-hover-text,
  .banner-box:hover .slide:after,
  .banner-box:focus .slide:after {
    opacity: 1;
  }
  .banner-box .slide-hover-text {
    /* Mixins */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Display & Box Model */
    width: 80%;
    margin-top: 0;
    padding: 15px 10px;
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    /* Other */
    color: #ffffff;
    text-align: center;
  }
  .banner-box .slide-hover-text:after {
    /* Mixins */
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    /* Display & Box Model */
    content: "";
    /* Positioning */
    position: absolute;
    top: 100%;
    left: 50%;
    /* Other */
    border-left: 7px solid #ffe14f;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
  .banner-box .slide:after {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /* Display & Box Model */
    content: "";
    width: 200px;
    height: 200px;
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    /* Other */
    background: rgba(0, 0, 0, 0.85);
  }
  /* Banner Box
       ========================================================================== */
  .banner-box,
  .banner-box > section {
    /* Vars */
    /* Display & Box Model */
    height: 17.14285714em;
    padding: 0 0.71428571em;
  }
  .banner-box__content {
    /* Display & Box Model */
    display: block;
    height: 100%;
    padding: 20px;
    /* Positioning */
    position: relative;
    /* Other */
    background: #231f20;
    color: #ffffff;
  }
  .banner-box__content h1 {
    /* Mixins */
    font-size: 18px;
    font-size: 1.125rem;
    /* Display & Box Model */
    margin-top: 0;
  }
  .banner-box__content p {
    margin-top: 5px;
    font-family: "Overpass Light", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .banner-box__content .actionable {
    /* Display & Box Model */
    padding: 5px 10px;
    /* Positioning */
    position: absolute;
    bottom: 20px;
    /* Other */
    color: #ffffff;
    background: #e31b23;
  }
  .banner-box__content .banner-close-x {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    font-size: 18px;
    font-size: 1.125rem;
    /* Display & Box Model */
    width: 20px;
    height: 20px;
    /* Positioning */
    position: absolute;
    top: 10px;
    right: 10px;
    /* Other */
    color: #b5161c;
    background: rgba(255, 255, 255, 0.6);
    line-height: 1.3em;
    text-align: center;
  }
  .banner-box__content .banner-close-x:hover,
  .banner-box__content .banner-close-x:focus {
    color: #e31b23;
    cursor: pointer;
    background: #ffffff;
  }
  .banner-box__content {
    /* Mixins */
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    /* Display & Box Model */
    opacity: 0;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .is-current .banner-box__content {
    /* Mixins */
    -webkit-transform: translate(109%, 0);
    -moz-transform: translate(109%, 0);
    -o-transform: translate(109%, 0);
    -ms-transform: translate(109%, 0);
    transform: translate(109%, 0);
    opacity: 1;
    z-index: 100;
  }
  .expands-left.is-current .banner-box__content {
    /* Mixins */
    -webkit-transform: translate(-109%, 0);
    -moz-transform: translate(-109%, 0);
    -o-transform: translate(-109%, 0);
    -ms-transform: translate(-109%, 0);
    transform: translate(-109%, 0);
  }
  .banner-box__content .button {
    /* Mixins */
    text-decoration: none;
    /* Display & Box Model */
    margin-top: 20px;
    /* Other */
    color: #ffffff;
    text-align: center;
  }
  .banner-box__content .leading-link {
    /* Positioning */
    position: relative;
  }
  .banner-box__content .leading-link:after {
    /* Mixins */
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    /* Display & Box Model */
    content: "";
    /* Positioning */
    position: absolute;
    top: 50%;
    right: 18%;
    /* Other */
    border-left: 6px solid #ffffff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  .banner-box__content .red {
    background: #e31b23;
  }
  .banner-box.featured .banner-box__content {
    display: none;
  }
  .banner-box.featured.is-current .slide {
    position: static;
  }
  .banner-box.featured.is-current .banner-box__content {
    /* Mixins */
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    /* Display & Box Model */
    display: block;
    width: 100%;
    height: 100%;
  }
  .banner-box.featured.is-current .banner-box__content img {
    /* Display & Box Model */
    width: 100% !important;
    height: 100% !important;
  }
  .banner-box.featured.is-current .banner-close-x {
    right: 22px;
  }
  /* Brackets
       ========================================================================== */
  .obscured-banner .bracket {
    width: 33px;
    height: 288px;
    margin-top: -24px;
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 100;
    background: #e31b23;
    -webkit-transition-property: top, left, margin-left;
    -moz-transition-property: top, left, margin-left;
    -o-transition-property: top, left, margin-left;
    transition-property: top, left, margin-left;
    -webkit-transition-duration: 0.15s, 0.15s, 0.15s;
    -moz-transition-duration: 0.15s, 0.15s, 0.15s;
    -o-transition-duration: 0.15s, 0.15s, 0.15s;
    transition-duration: 0.15s, 0.15s, 0.15s;
    -webkit-transition-timing-function: linear, linear, linear;
    -moz-transition-timing-function: linear, linear, linear;
    -o-transition-timing-function: linear, linear, linear;
    transition-timing-function: linear, linear, linear;
  }
  .obscured-banner .bracket.featured-bracket {
    -webkit-transition-duration: 0.3s, 0.3s, 0.3s;
    -moz-transition-duration: 0.3s, 0.3s, 0.3s;
    -o-transition-duration: 0.3s, 0.3s, 0.3s;
    transition-duration: 0.3s, 0.3s, 0.3s;
  }
  .obscured-banner .bracket .horizontal-bar {
    display: block;
    position: absolute;
    background: #e31b23;
    width: 74px;
    height: 24px;
  }
  .obscured-banner .bracket .horizontal-bar.top {
    top: 0;
  }
  .obscured-banner .bracket .horizontal-bar.bottom {
    bottom: 0;
  }
  .obscured-banner .bracket.left-bracket {
    margin-left: -13px;
  }
  .obscured-banner .bracket.left-bracket .horizontal-bar {
    left: 0;
  }
  .obscured-banner .bracket.right-bracket {
    margin-left: 246px;
  }
  .obscured-banner .bracket.right-bracket .horizontal-bar {
    right: 0;
  }
}
/* ==========================================================================
   Media: Large Screens and Up
   ========================================================================== */
@media all and (min-width: 62em) {
  .newtons-laws .first-law-toggle {
    position: absolute;
    right: -55px;
    top: 20px;
    z-index: 80;
  }
  .newtons-laws .toggle-title {
    width: 10px;
    height: 100px;
    margin: 0 0 0 8px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -450px -200px;
  }
  .newtons-laws button {
    border: none;
  }
  .newtons-laws button:focus {
    outline: none;
  }
  .newtons-laws .on.button {
    width: 23px;
    height: 22px;
    margin-top: 20px;
    display: block;
    text-indent: -9999em;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -500px -200px;
  }
  .newtons-laws .on.button:hover,
  .newtons-laws .on.button:focus,
  .newtons-laws .on.button.is-current {
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -550px -200px;
  }
  .newtons-laws .off.button {
    width: 23px;
    height: 22px;
    margin: 10px 0 0;
    display: block;
    text-indent: -9999em;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -500px -250px;
  }
  .newtons-laws .off.button:hover,
  .newtons-laws .off.button:focus,
  .newtons-laws .off.button.is-current {
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -550px -250px;
  }
  .newtons-laws .on.button,
  .newtons-laws .off.button {
    display: block;
    background-color: transparent;
  }
  .first-law-wrapper {
    position: absolute;
    top: 255px;
    left: 0;
    width: 100%;
    height: 326px;
    overflow: hidden;
    z-index: 100;
    display: none;
  }
  .newton-globe,
  .newton-brackets {
    width: 328px;
    height: 326px;
    display: none;
    position: fixed;
    top: 232px;
    left: 0%;
    z-index: 120;
    background: transparent url(/resources/images/newton-brackets.png) no-repeat left top;
    cursor: pointer;
  }
  .newton-globe {
    z-index: 115;
    background: transparent url(/resources/images/newton-globe.png) no-repeat center center;
  }
  .modal-desc {
    padding: 20px 30px;
    font-family: "Caslon", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
  }
  .modal-desc .title {
    color: #231f20;
  }
  .modal-desc strong {
    font-weight: normal;
  }
  .modal-desc em {
    font-style: normal;
  }
}
.sitewide-notice {
  /* Display & Box Model */
  padding-top: 10px;
  padding-bottom: 30px;
  /* Other */
  background: #fe8;
}
.sitewide-notice p {
  /* Mixins */
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.38461538;
  /* Display & Box Model */
  padding-left: 70px;
  padding-right: 25px;
  /* Positioning */
  position: relative;
}
.sitewide-notice-icon {
  /* Display & Box Model */
  display: inline-block;
  width: 67px;
  height: 67px;
  /* Positioning */
  position: absolute;
  top: -7px;
  left: 0;
  /* Other */
  background-size: contain;
  background: url(/resources/images//bracket-lightbulb.svg) no-repeat center center;
}
.sitewide-notice-close {
  /* Mixins */
  font-size: 18px;
  font-size: 1.125rem;
  /* Display & Box Model */
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  /* Positioning */
  position: absolute;
  top: 25px;
  left: 100%;
  /* Other */
  color: #fe8;
  cursor: pointer;
  background-color: #000;
  border: 2px solid #000;
  border-radius: 16px;
  border-width: 3px 2px 0px 2px;
  line-height: 1.2em;
  text-align: center;
  vertical-align: middle;
}
/* ==========================================================================
   Media Base & Small Screens Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .sitewide-notice p {
    padding-left: 40px;
    padding-right: 25px;
  }
  .sitewide-notice-icon {
    /* Display & Box Model */
    width: 37px;
    height: 37px;
    /* Positioning */
    top: 25px;
    left: 10px;
  }
  .sitewide-notice-close {
    /* Display & Box Model */
    width: 20px;
    height: 20px;
    /* Positioning */
    top: 30px;
    left: auto;
    right: 10px;
    /* Other */
    line-height: 0.9em;
  }
}
/* ==========================================================================
   Media Medium Screens Only
   ========================================================================== */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  .sitewide-notice-icon {
    top: 25px;
    left: 20px;
  }
  .sitewide-notice-close {
    left: auto;
    right: 20px;
  }
}
.block {
  /* Positioning */
  position: relative;
  /* Other */
  background: #f2f2f2;
}
.block .perspective {
  /* Display & Box Model */
  width: 100%;
  height: 6px;
  /* Positioning */
  position: absolute;
  top: -6px;
  left: 0;
  z-index: 50;
}
.block .left-vantage,
.block .right-vantage {
  /* Mixins */
  background: #cecfd1;
  background: -moz-linear-gradient(top, #c9accc 0, #cecfd1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c9accc), color-stop(100%, #cecfd1));
  background: -webkit-linear-gradient(top, #c9accc 0, #cecfd1 100%);
  background: -o-linear-gradient(top, #c9accc 0, #cecfd1 100%);
  background: -ms-linear-gradient(top, #c9accc 0, #cecfd1 100%);
  background: linear-gradient(to bottom, #c9accc 0, #cecfd1 100%);
  /* Display & Box Model */
  display: block;
  width: 60%;
  height: 6px;
  /* Positioning */
  position: absolute;
}
.block .left-vantage {
  /* Mixins */
  -webkit-transform: skew(-55deg, 0);
  -moz-transform: skew(-55deg, 0);
  -o-transform: skew(-55deg, 0);
  -ms-transform: skew(-55deg, 0);
  transform: skew(-55deg, 0);
  /* Positioning */
  left: 5px;
  bottom: 0;
}
.block .right-vantage {
  /* Mixins */
  -webkit-transform: skew(55deg, 0);
  -moz-transform: skew(55deg, 0);
  -o-transform: skew(55deg, 0);
  -ms-transform: skew(55deg, 0);
  transform: skew(55deg, 0);
  /* Positioning */
  right: 5px;
}
.action-bar {
  margin-top: 0.35714286em;
}
.action-bar li {
  /* Display & Box Model */
  padding: 10px;
}
.action-bar a,
.action-bar h4 {
  /* Mixins */
  font-size: 18px;
  font-size: 1.125rem;
}
.action-bar a {
  /* Extends */
  /* Other */
  color: #262626;
}
.action-bar p {
  /* Mixins */
  font-size: 14px;
  font-size: 0.875rem;
}
.action-bar li img {
  display: none;
}
.action-bar .sticky-text {
  display: none;
}
/* ==========================================================================
   Media: Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .action-bar {
    /* Display & Box Model */
    width: 100%;
    /* Positioning */
    position: fixed;
    bottom: 0;
    left: 0;
    /* Other */
    border: 1px solid #bcbdc0;
    z-index: 100;
  }
  .action-bar li {
    /* Display & Box Model */
    width: 33.33333%;
    height: 55px;
    padding: 0;
    /* Positioning */
    position: relative;
    float: left;
    /* Other */
    border-left: 1px solid #bcbdc0;
  }
  .action-bar li:first-of-type {
    border: none;
  }
  .action-bar a,
  .action-bar .charter-member {
    display: block;
    width: 100%;
    height: 100%;
  }
  .action-bar .display-text {
    /* Mixins */
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    overflow: hidden;
  }
  .action-bar .display-text.focusable:active,
  .action-bar .display-text.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .action-bar .display-text a,
  body:hover .action-bar .display-text input,
  body:hover .action-bar .display-text button {
    display: none;
  }
  .action-bar li img {
    /* Mixins */
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    /* Display & Box Model */
    display: block;
    max-width: 40%;
    max-height: 45%;
    /* Positioning */
    position: absolute;
    top: 5px;
    left: 50%;
  }
  .action-bar .perspective {
    display: none;
  }
  .action-bar .sticky-text {
    /* Mixins */
    font-size: 14px;
    font-size: 0.875rem;
    /* Display & Box Model */
    display: block;
    width: 100%;
    /* Positioning */
    position: absolute;
    bottom: 5px;
    /* Other */
    text-align: center;
    color: #34baca;
  }
  .action-bar .members-sticky-text {
    bottom: 2px;
  }
  .action-bar .discounts {
    /* Display & Box Model */
    display: none;
  }
}
/* ==========================================================================
   Media Tablet and Up
   ========================================================================== */
@media all and (min-width: 48em) {
  .action-bar li {
    /* Other */
    border-left: 1px solid #bcbdc0;
    vertical-align: middle;
  }
  .action-bar li:first-of-type {
    border-left: 0;
  }
}
/* ==========================================================================
   Media: Tablet Only
   ========================================================================== */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  .action-bar {
    width: 100%;
    display: table;
  }
  .action-bar > ul {
    display: table-row;
  }
  .action-bar li {
    display: table-cell;
    text-align: center;
  }
}
/* ==========================================================================
   Media Desktop and Up
   ========================================================================== */
@media all and (min-width: 62em) {
  .action-bar {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .action-bar li {
    /* Display & Box Model */
    padding: 0;
    /* Positioning */
    float: left;
  }
  .action-bar a {
    /* Display & Box Model */
    display: block;
    width: 228px;
    height: 69px;
    padding: 15px 20px 0 60px;
    /* Other */
    background: transparent url(/resources/images/sprite-bullets.png) no-repeat;
  }
  .action-bar a:hover,
  .action-bar a:focus {
    color: #e31b23;
    background-color: #e5e5e5;
  }
  .action-bar .buy-tickets {
    width: 220px;
    padding-top: 22px;
    background-position: -80px -635px;
  }
  .action-bar .military-tickets {
    width: 210px;
    background-position: -480px -620px;
  }
  .action-bar .directions-parking {
    width: 210px;
    background-position: 20px -735px;
  }
  .action-bar .join-perot {
    width: 272px;
    position: relative;
    pointer: cursor;
  }
  .action-bar .join-perot p {
    line-height: 1em;
  }
  .action-bar .build-perot-bookmark {
    display: block;
    position: absolute;
    top: -7px;
    left: 5px;
    z-index: 95;
    width: 52px;
    height: 60px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -600px -200px;
    font: 0px/0 a;
    color: rgba(0, 0, 0, 0);
    text-shadow: none;
  }
}
/* ==========================================================================
   Media Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  .social-callouts {
    display: none;
  }
}
/* Calendar
   ========================================================================== */
.homepage-calendar {
  /* Display & Box Model */
  margin-top: 20px;
  /* Other */
  background: #333;
}
.homepage-calendar__header,
.homepage-calendar__body {
  padding: 1.42857143em;
}
.homepage-calendar__header {
  /* Other */
  background: #231f20;
  color: #ffffff;
}
/* Calendar Navigation
   ========================================================================== */
.homepage-calendar__body .calendar__nav {
  /* Display & Box Model */
  margin-top: 0;
}
.homepage-calendar__body .calendar__nav a,
.homepage-calendar__body .calendar__nav li {
  display: inline-block;
}
.homepage-calendar__body .calendar__nav > :first-child a:after {
  /* Extends */
}
.homepage-calendar__body .calendar__nav.is-dropping > :first-child a:after {
  /* Extends */
}
/* Calendar Events
   ========================================================================== */
.event-calendar-day-wrapper::-webkit-scrollbar {
  display: none;
}
.event-calendar-day-wrapper {
  -ms-overflow-style: none;
}
.homepage-calendar .event-calendar-event:nth-child(4n+1) .calendar-event-content {
  /* Mixins */
  background: #538435;
  background: -moz-linear-gradient(top, #73b748 0, #538435 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #73b748), color-stop(100%, #538435));
  background: -webkit-linear-gradient(top, #73b748 0, #538435 100%);
  background: -o-linear-gradient(top, #73b748 0, #538435 100%);
  background: -ms-linear-gradient(top, #73b748 0, #538435 100%);
  background: linear-gradient(to bottom, #73b748 0, #538435 100%);
}
.homepage-calendar .event-calendar-event:nth-child(4n+2) .calendar-event-content {
  /* Mixins */
  background: #642478;
  background: -moz-linear-gradient(top, #783094 0, #642478 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #783094), color-stop(100%, #642478));
  background: -webkit-linear-gradient(top, #783094 0, #642478 100%);
  background: -o-linear-gradient(top, #783094 0, #642478 100%);
  background: -ms-linear-gradient(top, #783094 0, #642478 100%);
  background: linear-gradient(to bottom, #783094 0, #642478 100%);
}
.homepage-calendar .event-calendar-event:nth-child(4n+3) .calendar-event-content {
  /* Mixins */
  background: #055185;
  background: -moz-linear-gradient(top, #016bb5 0, #055185 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #016bb5), color-stop(100%, #055185));
  background: -webkit-linear-gradient(top, #016bb5 0, #055185 100%);
  background: -o-linear-gradient(top, #016bb5 0, #055185 100%);
  background: -ms-linear-gradient(top, #016bb5 0, #055185 100%);
  background: linear-gradient(to bottom, #016bb5 0, #055185 100%);
}
.homepage-calendar .event-calendar-event:nth-child(4n+4) .calendar-event-content {
  /* Mixins */
  background: #a52021;
  background: -moz-linear-gradient(top, #d43436 0, #a52021 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d43436), color-stop(100%, #a52021));
  background: -webkit-linear-gradient(top, #d43436 0, #a52021 100%);
  background: -o-linear-gradient(top, #d43436 0, #a52021 100%);
  background: -ms-linear-gradient(top, #d43436 0, #a52021 100%);
  background: linear-gradient(to bottom, #d43436 0, #a52021 100%);
}
.homepage-calendar .calendar-event-image img {
  display: block;
}
.homepage-calendar .calendar-event-content {
  /* Vars */
  /* Display & Box Model */
  padding: 1.14285714em;
}
.homepage-calendar .calendar-event-time,
.homepage-calendar .calendar-event-time + h4 {
  color: #ffffff;
}
.homepage-calendar .calendar-event-time + h4 {
  font-weight: bold;
  text-transform: uppercase;
}
/* Movies
   ========================================================================== */
.homepage--movies-container h5 {
  /* Display & Box Model */
  padding: 10px 15px;
  margin-top: 0;
  /* Other */
  background: #e8c000;
  text-transform: uppercase;
  font-weight: bold;
}
.homepage--movies-container .homepage--movies-posters-container {
  /* Other */
  background: #231f20;
  border: 5px solid #e8c000;
}
.homepage--movies-container .homepage--movies-posters-container > div {
  padding: 1.42857143em;
}
.homepage--movies-poster-container:first-of-type {
  margin-top: 0;
}
.homepage--movies-poster-container {
  margin-top: 10px;
}
.homepage--movies-poster-container:first-of-type,
.homepage--movies-poster-container:first-of-type + .homepage--movies-poster-container {
  margin-top: 0;
}
/* ==========================================================================
   Media Mobile Only
   ========================================================================== */
@media all and (max-width: 47.9375em) {
  /* Calendar Navigation
       ========================================================================== */
  .homepage-calendar__body {
    /* Display & Box Model */
    padding-top: 80px;
    /* Positioning */
    position: relative;
  }
  .homepage-calendar__body > nav {
    /* Display & Box Model */
    width: 100%;
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .homepage-calendar__body .calendar__nav li {
    display: none;
  }
  .homepage-calendar__body .calendar__nav :first-child {
    display: block;
  }
  .homepage-calendar__body .calendar__nav :first-child a {
    position: relative;
  }
  .homepage-calendar__body .calendar__nav :first-child a:after {
    /* Extends */
    /* Mixins */
    -webkit-transform: translate(0, -40%);
    -moz-transform: translate(0, -40%);
    -o-transform: translate(0, -40%);
    -ms-transform: translate(0, -40%);
    transform: translate(0, -40%);
    font-size: 30px;
    font-size: 1.875rem;
    /* Positioning */
    position: absolute;
    top: 50%;
    right: 15px;
  }
  .homepage-calendar__body .calendar__nav.is-dropping li {
    display: block;
  }
  .homepage-calendar__body .calendar__nav.is-dropping :first-child a {
    background: #1491ad;
  }
  .homepage-calendar__body .calendar__nav {
    /* Other */
    background: #1491ad;
  }
  .homepage-calendar__body .calendar__nav li {
    /* Display & Box Model */
    padding: 0;
    /* Other */
    border-bottom: 1px solid #175883;
  }
  .homepage-calendar__body .calendar__nav :last-child {
    border: 0;
  }
  .homepage-calendar__body .calendar__nav a {
    /* Mixins */
    font-size: 18px;
    font-size: 1.125rem;
    /* Display & Box Model */
    width: 100%;
    padding: 0.83333333em 1.11111111em;
    /* Other */
    color: #ffffff;
  }
  .homepage-calendar__body .calendar__nav .is-revealed {
    background: #175883;
  }
  /* Homepage Calendar Header
       ========================================================================== */
  .homepage-calendar__header {
    text-align: center;
  }
  /* Calendar Events
       ========================================================================== */
  .event-calendar-event {
    width: 225px;
    margin-top: 0 !important;
  }
  .homepage-calendar .calendar-event-image img {
    display: none;
  }
  /* Movies
       ========================================================================== */
  .homepage--movies-sponsor-line {
    /* Display & Box Model */
    display: block;
    padding: 15px 10px 0;
    /* Positioning */
    clear: both;
  }
}
/* ==========================================================================
   Media Custom
   ========================================================================== */
@media all and (min-width: 37.85714286em) and (max-width: 48em) {
  /* Calendar Events
       ========================================================================== */
  .homepage-calendar .event-calendar-day-list {
    /* Mixins */
    /* Mixins */
    /* Display & Box Model */
    margin-left: -0.71428571em;
    margin-right: -0.71428571em;
  }
  .homepage-calendar .event-calendar-day-list:before,
  .homepage-calendar .event-calendar-day-list:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .homepage-calendar .event-calendar-day-list:after {
    clear: both;
  }
  .homepage-calendar .event-calendar-event {
    /* Display & Box Model */
    width: 50%;
    padding-left: 0.71428571em;
    padding-right: 0.71428571em;
    /* Positioning */
    float: left;
  }
  .homepage-calendar .calendar-event-content {
    /* Display & Box Model */
    min-height: 150px;
  }
}
/* ==========================================================================
   Media Mobile Through Tablet
   ========================================================================== */
@media all and (max-width: 61.9375em) {
  /* Calendar Events
       ========================================================================== */
  .event-calendar-event {
    margin-top: 1.42857143em;
  }
  .homepage-calendar .calendar-event-hover {
    display: none;
  }
  /* Calendar Slider Buttons
       ========================================================================== */
  .homepage-calendar .event-calendar-next {
    display: none;
  }
  /* Event Calendar Day
       ========================================================================== */
  .event-calendar-day {
    position: relative;
    overflow: hidden;
  }
  .event-calendar-day-wrapper {
    position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .event-calendar-day-list {
    /* Mixins */
    /* Mixins */
    /* Display & Box Model */
    width: 1000%;
  }
  .event-calendar-day-list:before,
  .event-calendar-day-list:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .event-calendar-day-list:after {
    clear: both;
  }
  .event-calendar-event {
    /* Display & Box Model */
    max-width: 300px;
    /* Positioning */
    float: left;
  }
  .event-calendar-event:first-of-type {
    margin-left: 0;
  }
  .event-calendar-event:only-child {
    display: inline-block;
    float: none;
    width: auto;
  }
  .homepage-calendar .event-calendar-day-list {
    /* Display & Box Model */
    margin: 0 -5px 0;
  }
  .homepage-calendar .event-calendar-day-list li {
    /* Display & Box Model */
    padding-left: 10px;
    padding-right: 10px;
  }
  .homepage-calendar .calendar-event-content {
    /* Display & Box Model */
    min-height: 150px;
  }
}
/* ==========================================================================
   Media Tablet and Up
   ========================================================================== */
@media all and (min-width: 48em) {
  .homepage-calendar {
    background: transparent;
  }
  .homepage-calendar__body {
    background: #333;
  }
  /* Calendar Navigation
       ========================================================================== */
  .homepage-calendar .calendar__nav {
    /* Other */
    border-bottom: 5px solid #1491ad;
  }
  .homepage-calendar .calendar__nav > :first-child {
    display: none;
  }
  .homepage-calendar .calendar__nav a {
    /* Display & Box Model */
    padding: 0.71428571em;
    /* Other */
    color: #1491ad;
  }
  .homepage-calendar .calendar__nav .is-revealed {
    /* Other */
    background: #1491ad;
    color: #ffffff;
  }
  /* Homepage Calendar Header
       ========================================================================== */
  .homepage-calendar__header h3 {
    float: left;
  }
  .homepage-calendar__header h3 + div {
    margin-top: 0.5em;
    margin-right: 0.71428571em;
    float: right;
  }
  /* Movies
       ========================================================================== */
  .homepage--movies-container .homepage--movies-poster-container {
    margin-top: 0;
  }
  .homepage--movies-sponsor-line {
    /* Display & Box Model */
    display: block;
    padding-top: 18px;
    margin-left: 18px;
    /* Positioning */
    clear: both;
  }
}
/* ==========================================================================
   Media: Desktop and Up
   ========================================================================== */
@media all and (min-width: 62em) {
  /* Event Calendar Navigation
       ========================================================================== */
  .homepage-calendar .calendar__nav {
    margin-bottom: 20px;
  }
  .homepage-calendar .calendar__nav a {
    /* Mixins */
    font-size: 16px;
    font-size: 1rem;
    /* Display & Box Model */
    padding: 12px 16px;
  }
  /* Event Calendar
       ========================================================================== */
  .event-calendar-day-list {
    position: relative;
    height: 230px;
    overflow: hidden;
  }
  .event-calendar-day-wrapper {
    overflow: hidden;
  }
  /* Events
       ========================================================================== */
  .event-calendar-day .event-calendar-event {
    display: inline-block;
    width: 215px;
    height: 230px;
    margin-right: 5px;
    vertical-align: top;
    overflow: hidden;
    position: relative;
  }
  .event-calendar-event .calendar-event-content {
    height: 128px;
  }
  .calendar-event-hover {
    line-height: 1.2em;
  }
  .calendar-event-hover a {
    /* Mixins */
    font-size: 14px !important;
    font-size: 0.875rem !important;
    width: auto;
    height: auto;
    margin: 0;
    line-height: normal;
    text-decoration: none;
    position: relative;
    -webkit-appearance: none;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    outline: 0;
    overflow: visible;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    background: #c9cacc;
    color: #262626;
    text-align: center;
    padding: 0.71428571em 1.28571429em;
    margin-top: 1.4285714285714286em;
    /* Display & Box Model */
    padding: 5px 10px;
    /* Other */
    color: #ffffff;
    background: #e31b23;
  }
  p > .calendar-event-hover a {
    margin-top: 0;
  }
  .calendar-event-hover a:hover,
  .calendar-event-hover a:focus,
  .calendar-event-hover a.is-current {
    background: #e3e4e5;
  }
  .calendar-event-hover a--tiny {
    font-size: 12px;
    font-size: 0.75rem;
    padding: 0.35714286em 0.64285714em;
  }
  .calendar-event-hover a--small {
    font-size: 12px;
    font-size: 0.75rem;
  }
  .calendar-event-hover a--large {
    font-size: 18px;
    font-size: 1.125rem;
  }
  .calendar-event-hover a--full-width {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .calendar-event-hover a:hover,
  .calendar-event-hover a:focus {
    background: #b5161c;
  }
  /* Events Hover State
       ========================================================================== */
  .calendar-event-hover {
    /* Mixins */
    -webkit-transition: top 350ms ease-in-out;
    -moz-transition: top 350ms ease-in-out;
    -o-transition: top 350ms ease-in-out;
    transition: top 350ms ease-in-out;
    font-size: 16px;
    font-size: 1rem;
    /* Display & Box Model */
    display: block;
    width: 102%;
    padding: 16px;
    /* Positioning */
    position: absolute;
    left: -1%;
    top: 100%;
    bottom: -100%;
    /* Other */
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
  }
  .event-calendar-event:hover .calendar-event-hover {
    top: 0;
  }
  /* Calendar Buttons Next and Prev
       ========================================================================== */
  .event-calendar-prev,
  .event-calendar-next {
    display: none;
    background-color: #000;
    width: 50px;
    height: 150px;
    position: absolute;
    top: 50%;
    margin-top: -80px;
  }
  .event-calendar-prev:hover,
  .event-calendar-next:hover,
  .event-calendar-prev:focus,
  .event-calendar-next:focus {
    background-color: #000;
  }
  .event-calendar-prev.event-calendar-btn-show,
  .event-calendar-next.event-calendar-btn-show {
    display: block;
  }
  .event-calendar-prev {
    right: 100%;
    margin-right: 14px;
  }
  .event-calendar-next {
    left: 100%;
  }
  .event-calendar-prev b,
  .event-calendar-next b {
    background-image: url(/resources/images//sprite-global.png);
    background-repeat: no-repeat;
    width: 40px;
    height: 60px;
    left: 0;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -36px;
  }
  .event-calendar-prev b {
    background-position: -692px -220px;
  }
  .event-calendar-next b {
    background-position: -740px -220px;
  }
  /* Movies
       ========================================================================== */
  .homepage--movies-poster-container img {
    display: block;
  }
  .homepage--movies-poster-container a {
    /* Mixins */
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    /* Display & Box Model */
    display: block;
  }
  .homepage--movies-poster-container a:hover,
  .homepage--movies-poster-container a:focus {
    /* Mixins */
    -webkit-box-shadow: 0 0 10px #e8c000;
    -moz-box-shadow: 0 0 10px #e8c000;
    -o-box-shadow: 0 0 10px #e8c000;
    box-shadow: 0 0 10px #e8c000;
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -o-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
  }
}
/* ==========================================================================
   Media Tablet and Up
   ========================================================================== */
@media all and (min-width: 48em) {
  .social-callouts section {
    /* Display & Box Model */
    padding: 2.14285714em;
    /* Other */
    background: #231f20 url(/resources/images/home-social-bg.png) no-repeat center center;
  }
  .social-callouts section .bracketed {
    margin-bottom: 25px;
  }
  .social-hertz-list,
  .frequency-graph,
  .social-frequency-actions {
    /* Positioning */
    float: left;
  }
  /* Social Hertz List
       ========================================================================== */
  .social-hertz-list {
    /* Display & Box Model */
    width: 60px;
    padding: 0;
    /* Positioning */
    position: relative;
    float: left;
  }
  .social-hertz-list:after {
    /* Mixins */
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    /* Display & Box Model */
    content: "";
    width: 1px;
    height: 85%;
    /* Positioning */
    position: absolute;
    top: 50%;
    right: 2px;
    /* Other */
    background: #878484;
  }
  .social-hertz-list :first-child a {
    margin-top: 0;
  }
  .social-hertz-list a {
    /* Mixins */
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -o-border-radius: 1000px;
    border-radius: 1000px;
    /* Display & Box Model */
    display: block;
    width: 40px;
    height: 40px;
    padding-top: 10px;
    margin-top: 10px;
    /* Positioning */
    position: relative;
    /* Other */
    background-color: #f2f2f2;
    color: black;
    text-align: center;
    font-family: "Overpass Bold", "Overpass", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  }
  .social-hertz-list a:before,
  .social-hertz-list a:after {
    /* Mixins */
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    /* Display & Box Model */
    content: "";
    /* Positioning */
    position: absolute;
    top: 50%;
    right: -50%;
    /* Other */
    background: #878484;
  }
  .social-hertz-list a:before {
    /* Display & Box Model */
    width: 50%;
    height: 1px;
  }
  .social-hertz-list a:after {
    /* Mixins */
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -o-border-radius: 1000px;
    border-radius: 1000px;
    /* Display & Box Model */
    width: 5px;
    height: 5px;
  }
  .social-hertz-list a:hover {
    color: #f2f2f2;
  }
  .social-hertz-list a.blue:hover,
  .social-hertz-list a.blue.is-current {
    background-color: #2493ac;
  }
  .social-hertz-list a.green:hover,
  .social-hertz-list a.green.is-current {
    background-color: #94a54c;
  }
  .social-hertz-list a.yellow:hover,
  .social-hertz-list a.yellow.is-current {
    background-color: #d8b55e;
  }
  .social-hertz-list a.orange:hover,
  .social-hertz-list a.orange.is-current {
    background-color: #e8745b;
  }
  .social-hertz-list a.purple:hover,
  .social-hertz-list a.purple.is-current {
    background-color: #7b416c;
  }
  /* Social Graph
       ========================================================================== */
  .frequency-graph {
    /* Mixins */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    /* Display & Box Model */
    display: block;
    width: 240px;
    height: 240px;
    margin-left: 5px;
    /* Positioning */
    position: relative;
    left: 50%;
    overflow: hidden;
    float: left;
    /* Other */
    border-width: 10px;
    border-style: solid;
    border-color: #f2f2f2;
    background-image: url(/resources/images/sprite-frequency.png);
  }
  .frequency-lines-container {
    /* Display & Box Model */
    display: block;
    width: 201px;
    height: 70px;
    /* Positioning */
    position: absolute;
    overflow: hidden;
    top: 74px;
    left: 10px;
  }
  .frequency-lines {
    /* Display & Box Model */
    display: block;
    width: 220px;
    height: 800px;
    margin-top: -378px;
    /* Positioning */
    position: absolute;
    /* Other */
    background-image: url(/resources/images/social-frequency-lines.png);
    background-position: 0 0;
    -webkit-transition: background-position 5s linear, margin 0.75s ease-in-out;
    -moz-transition: background-position 5s linear, margin 0.75s ease-in-out;
    -o-transition: background-position 5s linear, margin 0.75s ease-in-out;
    transition: background-position 5s linear, margin 0.75s ease-in-out;
  }
  .frequency-legend {
    /* Display & Box Model */
    display: block;
    width: 220px;
    height: 1400px;
    margin-top: -1135px;
    margin-left: -2px;
    /* Positioning */
    position: absolute;
    /* Other */
    background-image: url(/resources/images/sprite-frequency.png);
    background-position: 0 0;
  }
  .frequency-lines-animated {
    /* Display & Box Model */
    display: block;
    width: 220px;
    height: 800px;
    /* Positioning */
    position: absolute;
    /* Other */
    background-image: url(/resources/images/social-frequency-lines.png);
    background-position: 0 0;
    opacity: .35;
    -webkit-transition: background-position 2s ease-out, margin 0.75s ease-in-out;
    -moz-transition: background-position 2s ease-out, margin 0.75s ease-in-out;
    -o-transition: background-position 2s ease-out, margin 0.75s ease-in-out;
    transition: background-position 2s ease-out, margin 0.75s ease-in-out;
    margin-top: -378px;
  }
  .frequency-lines-animated:hover {
    background-position: 20200px 0;
    -webkit-transition: background-position 100s linear;
    -moz-transition: background-position 100s linear;
    -o-transition: background-position 100s linear;
    transition: background-position 100s linear;
    cursor: pointer;
  }
  /* Social Frequency Actions
       ========================================================================== */
  .social-frequency-actions {
    float: left;
    overflow: hidden;
    height: 240px;
    font-family: "Overpass", Helvetica, sans-serif;
    font-weight: regular;
    color: white;
  }
  .social-frequency-actions h6,
  .social-frequency-actions a {
    /* Mixins */
    font-size: 22px;
    font-size: 1.375rem;
  }
  .social-frequency-action {
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .social-frequency-action.is-current {
    height: 100%;
    opacity: 1;
  }
  .social-frequency-follow {
    display: block;
    position: relative;
    padding-left: 70px;
    color: #1ca9c8;
    margin-bottom: 10px;
    padding-top: 10px;
  }
  .social-frequency-follow:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -950px -450px;
  }
  .social-frequency-like {
    display: block;
    position: relative;
    padding-left: 70px;
    color: #4166aa;
    margin-bottom: 30px;
    margin-top: 30px;
    padding-top: 10px;
  }
  .social-frequency-like:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -900px -550px;
  }
  .social-frequency-checkin {
    display: block;
    position: relative;
    padding-top: 100px;
    margin: 0;
  }
  .social-frequency-follow:hover {
    color: #1ca9c8;
    opacity: .85;
  }
  .social-frequency-like:hover {
    color: #4166aa;
    opacity: .85;
  }
  .social-frequency-checkin:before {
    content: "";
    position: absolute;
    display: block;
    left: 70px;
    top: 0;
    width: 80px;
    height: 80px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -650px -300px;
  }
  .social-frequency-flickr {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: 0 -1150px;
  }
  .social-frequency-share-pictures {
    display: block;
    position: relative;
    padding-top: 110px;
    margin: 0;
  }
  .social-frequency-share-pictures:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 170px;
    height: 80px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -100px -1150px;
  }
  .social-frequency-tweet {
    display: block;
    position: relative;
    padding: 15px 0 15px 70px;
    width: 160px;
    background-color: #1ca9c8;
    color: #fff;
    overflow: hidden;
  }
  .social-frequency-tweet:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -950px -450px;
  }
  .social-frequency-share {
    display: block;
    position: relative;
    padding: 15px 0 15px 70px;
    width: 160px;
    background-color: #4166aa;
    color: #fff;
    overflow: hidden;
    margin-top: 20px;
  }
  .social-frequency-share:hover,
  .social-frequency-tweet:hover {
    color: #fff;
    opacity: .85;
  }
  .social-frequency-share:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -900px -550px;
  }
  .fake-like-button {
    margin-bottom: 3px;
    vertical-align: middle;
    width: 68px;
    height: 25px;
    background-image: url(/resources/images/sprite-global.png);
    background-repeat: no-repeat;
    background-position: -600px -400px;
    font: 0px/0 a;
    color: transparent;
    text-shadow: none;
    display: inline-block;
  }
}
/* ==========================================================================
   Media Tablet Only
   ========================================================================== */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  /* Featured Marketing
       ========================================================================== */
  .featured-marketing {
    display: none;
  }
}
/* ==========================================================================
   Media: Desktop and Up
   ========================================================================== */
@media all and (min-width: 62em) {
  /* Social Graph
       ========================================================================== */
  .social-callouts .graph {
    width: 43%;
  }
  .social-callouts .social-frequency-actions {
    width: 46%;
  }
  /* Featured Marketing
       ========================================================================== */
  .featured-marketing {
    padding-right: 0;
    position: relative;
  }
  .featured-marketing .slide p,
  .featured-marketing .slide .figure {
    margin-top: 0;
  }
  .featured-marketing .slider-nav {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}
/* General Slider Navigaton
   ========================================================================== */
.slider-nav {
  margin: 0;
  padding: 2px;
  list-style: none outside none;
  background: transparent url(/resources/images/dark-hud.png) repeat left top;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -o-border-radius: 1000px;
  border-radius: 1000px;
  display: inline-block;
}
.slider-nav:before,
.slider-nav:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.slider-nav:after {
  clear: both;
}
.lte7 .slider-nav {
  display: inline;
  zoom: 1;
}
.no-borderradius .slider-nav {
  padding: 2px 4px;
}
.slider-nav li {
  margin: 0 0 0 8px;
  float: left;
}
.slider-nav li:first-child {
  margin-left: 0;
}
.slider-nav li.is-current a {
  background: #c9c0c0;
}
.no-rgba .slider-nav li.is-current a {
  opacity: 1;
  filter: alpha(opacity=100);
}
.slider-nav a {
  width: 10px;
  height: 10px;
  background: transparent url(/resources/images/light-hud.png) repeat left top;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -o-border-radius: 1000px;
  border-radius: 1000px;
}
.no-rgba .slider-nav a {
  opacity: 0.65;
  filter: alpha(opacity=65);
}
.no-rgba .slider-nav a:hover,
.no-rgba .slider-nav a:focus {
  opacity: 1;
  filter: alpha(opacity=100);
}
.slider-nav a:hover,
.slider-nav a:focus {
  background: #c9c0c0;
}
/**
 * Responsive Breakpoints
 */
/**
 * Base
 */
/**
 * Base & Small Only
 */
/**
 * Small
 */
/**
 * Medium Only
 */
/**
 * Medium
 */
/**
 * Large
 */
/**
 * Extra Large
 */
/**
 * Print
 */
/*# sourceMappingURL=perot.css.map */