/*

Dynamic Responsive Image

*/
/*

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="hierarchy__canon-text">Canon Text (38px)</p>
<p class="hierarchy__paragon-text">Paragon Text (30px)</p>
<p class="hierarchy__primer-text">Primer Text (24px)</p>
<p class="hierarchy__tertia-text">Tertia Text (18px)</p>
<p class="hierarchy__normal-text">Normal Text (14px)</p>
<p class="hierarchy__petite-text">Petite Text (12px)</p>
````

Long Modifiers

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

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

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

*/
.hierarchy__long-text,
.hierarchy__canon-text--long,
.hierarchy__meridian-text--long,
.hierarchy__tertia-text--long,
.hierarchy__paragon-text--long,
.hierarchy__columbian-text--long,
.hierarchy__great-text--long,
.hierarchy__primer-text--long,
.hierarchy__normal-text--long,
.hierarchy__petite-text--long,
.hierarchy__minion-text--long,
.hierarchy__non-pareil-text--long {
  line-height: 1.5;
}
/*

Canon Text

*/
.hierarchy__canon-text,
.hierarchy__canon-text--long {
  font-size: 116px;
  font-size: 7.25rem;
  line-height: 1.36206897;
  letter-spacing: -0.00836207em;
}
/*

Meridian Text

*/
.hierarchy__meridian-text,
.hierarchy__meridian-text--long {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1.5;
  letter-spacing: -0.00833333em;
}
/*

Tertia Text

*/
.hierarchy__tertia-text,
.hierarchy__tertia-text--long {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1.20833333;
  letter-spacing: -0.00833333em;
}
/*

Paragon Text

*/
.hierarchy__paragon-text,
.hierarchy__paragon-text--long {
  font-size: 34px;
  font-size: 2.125rem;
  line-height: 1.29411765;
  letter-spacing: -0.00823529em;
}
/*

Columbian Text

*/
.hierarchy__columbian-text,
.hierarchy__columbian-text--long,
.globalFooter__social-link {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.33333333;
  letter-spacing: -0.00833333em;
}
/*

Great Text

*/
.hierarchy__great-text,
.hierarchy__great-text--long,
.globalHeader__link,
.globalHeader__globalMessage,
.globalHeader__sub-link {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.0085em;
}
/*

Primer Text

*/
.hierarchy__primer-text,
.hierarchy__primer-text--long,
.button__tertiary,
.globalFooter__email-signup {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.88888889;
  letter-spacing: -0.00833333em;
}
/*

Normal Text

*/
.hierarchy__normal-text,
.hierarchy__normal-text--long {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.875;
  letter-spacing: -0.008125em;
}
/*

Petite Text

*/
.hierarchy__petite-text,
.hierarchy__petite-text--long {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
}
/*

Minion Text

*/
.hierarchy__minion-text,
.hierarchy__minion-text--long,
.globalHeader__sub-headline,
.globalHeader__side-link {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.33333333;
}
/*

Non-Pareil Text

*/
.hierarchy__non-pareil-text,
.hierarchy__non-pareil-text--long {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.4;
}
/*

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`.

*/
.wrappers__wrapper,
.globalHeader__wrapper {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (max-width: 47.9375em) {
  .wrappers__wrapper,
  .globalHeader__wrapper {
    width: 90%;
  }
}
@media all and (min-width: 62em) {
  .wrappers__wrapper,
  .globalHeader__wrapper {
    max-width: 1150px;
  }
}
.wrappers__wrapper-small {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (max-width: 47.9375em) {
  .wrappers__wrapper-small {
    width: 90%;
  }
}
@media all and (min-width: 62em) {
  .wrappers__wrapper-small {
    max-width: 970px;
  }
}
.wrappers__break-out {
  width: calc(100% + (4.34782608695652% * 2));
  position: relative;
  left: -4.34782608695652%;
}
@media all and (min-width: 78.125em) {
  .wrappers__break-out {
    width: calc(100% + ((100vw - 1150px)));
    left: calc(((100vw - 1150px)) / -2);
  }
}
/*

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**: `.grid__sm-row` (Grid, Small, Row)
- **Columns**: `.grid__sm` (Grid, Column, Small)
- **Column Width**: `.grid__sm-half` (Grid, Small, Half-Width)

    <div class="grid__sm-row">
        <div class="grid__sm-half">...</div>
        <div class="grid__sm-half">...</div>
    </div>

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

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

    <div class="grid__sm-row">
        <div class="grid__sm-half">...</div>
        <div class="grid__sm-half">...</div>
    </div>

In brief, the way the grid works is that `.grid__sm` 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 `.grid__sm-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="grid__sm-row grid__med-row grid__lg-row">
        <div class="grid__sm-half grid__med-third grid__lg-quarter">
            ...
        </div>
        <div class="grid__sm-half grid__med-two-thirds grid__lg-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...

    - `.grid__lg-10of12
    - `.grid__med-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`

*/
.grid__halves,
.grid__thirds,
.grid__quarters {
  margin-left: -0.3125rem;
  margin-right: -0.3125rem;
  /* Pretty */
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}
.grid__halves:before,
.grid__thirds:before,
.grid__quarters:before,
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
  clear: both;
}
ul.grid__halves,
ul.grid__thirds,
ul.grid__quarters {
  padding-left: 0;
  list-style: none outside none;
}
.grid__halves > *,
.grid__thirds > *,
.grid__quarters > * {
  display: inline;
  float: left;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  /* Display & Box Model */
  display: inline-block;
  /* Positioning */
  float: none;
  /* Pretty */
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}
.grid__halves > * {
  width: 50%;
}
.grid__thirds > * {
  width: 33.33333%;
}
.grid__quarters > * {
  width: 25%;
}
.opera-only :-o-prefocus,
.grid__thirds {
  word-spacing: -0.43em;
}
/**
 * Mobile Grid
 */
@media all and (max-width: 47.9375em) {
  [class*="grid__sm-row"],
  .grid__sm-quarters,
  .grid__sm-thirds,
  .grid__sm-halves {
    margin-left: -0.3125rem;
    margin-right: -0.3125rem;
  }
  [class*="grid__sm-row"]:before,
  [class*="grid__sm-row"]:after,
  .grid__sm-quarters:before,
  .grid__sm-quarters:after,
  .grid__sm-thirds:before,
  .grid__sm-thirds:after,
  .grid__sm-halves:before,
  .grid__sm-halves:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="grid__sm-row"]:after,
  .grid__sm-quarters:after,
  .grid__sm-thirds:after,
  .grid__sm-halves:after {
    clear: both;
  }
  ul[class*="grid__sm-row"],
  ul.grid__sm-quarters,
  ul.grid__sm-thirds,
  ul.grid__sm-halves {
    padding-left: 0;
    list-style: none outside none;
  }
  .grid__sm-row--rtl > [class*="grid__sm"] {
    float: right;
  }
  .grid__sm-row--ltr > [class*="grid__sm"] {
    float: left;
  }
  [class*="grid__sm"]:not([class*="grid__sm-row"]) {
    display: inline;
    float: left;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
  .grid__sm-quarter,
  .grid__sm-quarters > * {
    width: 25%;
  }
  .grid__sm-third,
  [class*="grid__sm-2of6"],
  .grid__sm-thirds > * {
    width: 33.33333%;
  }
  .grid__sm-half,
  [class*="grid__sm-3of6"],
  .grid__sm-halves > * {
    width: 50%;
  }
  .grid__sm-two-thirds,
  [class*="grid__sm-4of6"] {
    width: 66.66667%;
  }
  .grid__sm-three-quarters {
    width: 75%;
  }
  .grid__sm-full {
    width: 100%;
  }
  [class*="grid__sm-5of6"] {
    width: 83.33333%;
  }
  [class*="grid__sm-1of6"] {
    width: 16.66667%;
  }
  [class*="grid__sm-4of5"] {
    width: 80%;
  }
  [class*="grid__sm-3of5"] {
    width: 60%;
  }
  [class*="grid__sm-2of5"] {
    width: 40%;
  }
  [class*="grid__sm-1of5"] {
    width: 20%;
  }
  .grid__sm-row--flex,
  .grid__sm-quarters,
  .grid__sm-thirds,
  .grid__sm-halves {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
  }
  .grid__sm-row--flex > [class*="grid__sm"],
  .grid__sm-quarters > *,
  .grid__sm-thirds > *,
  .grid__sm-halves > * {
    float: none;
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
  .grid__sm-row--tight {
    margin-left: -0.15625rem;
    margin-right: -0.15625rem;
  }
  .grid__sm-row--tight:before,
  .grid__sm-row--tight:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .grid__sm-row--tight:after {
    clear: both;
  }
  .grid__sm-row--tight [class*="grid__sm"]:not([class*="grid__sm-row"]) {
    display: inline;
    float: left;
    padding-left: 0.15625rem;
    padding-right: 0.15625rem;
  }
  .opera-only :-o-prefocus,
  .grid__sm-row--flex,
  .grid__sm-quarters,
  .grid__sm-thirds,
  .grid__sm-halves {
    word-spacing: -0.43em;
  }
}
/**
 * Tablet Grid
 */
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  [class*="grid__med-row"],
  .grid__med-quarters,
  .grid__med-thirds,
  .grid__med-halves {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
  }
  [class*="grid__med-row"]:before,
  [class*="grid__med-row"]:after,
  .grid__med-quarters:before,
  .grid__med-quarters:after,
  .grid__med-thirds:before,
  .grid__med-thirds:after,
  .grid__med-halves:before,
  .grid__med-halves:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  [class*="grid__med-row"]:after,
  .grid__med-quarters:after,
  .grid__med-thirds:after,
  .grid__med-halves:after {
    clear: both;
  }
  ul[class*="grid__med-row"],
  ul.grid__med-quarters,
  ul.grid__med-thirds,
  ul.grid__med-halves {
    padding-left: 0;
    list-style: none outside none;
  }
  .grid__med-row--rtl > [class*="grid__med"] {
    float: right;
  }
  .grid__med-row--ltr > [class*="grid__med"] {
    float: left;
  }
  [class*="grid__med"]:not([class*="grid__med-row"]) {
    display: inline;
    float: left;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
  .grid__med-quarter,
  [class*="grid__med-3of12"],
  [class*="grid__med-2of8"],
  .grid__med-quarters > * {
    width: 25%;
  }
  .grid__med-third,
  [class*="grid__med-4of12"],
  [class*="grid__med-3of9"],
  [class*="grid__med-2of6"],
  .grid__med-thirds > * {
    width: 33.33333%;
  }
  .grid__med-half,
  [class*="grid__med-6of12"],
  [class*="grid__med-5of10"],
  [class*="grid__med-4of8"],
  [class*="grid__med-3of6"],
  .grid__med-halves > * {
    width: 50%;
  }
  .grid__med-two-thirds,
  [class*="grid__med-8of12"],
  [class*="grid__med-6of9"],
  [class*="grid__med-4of6"] {
    width: 66.66667%;
  }
  .grid__med-three-quarters,
  [class*="grid__med-9of12"],
  [class*="grid__med-6of8"] {
    width: 75%;
  }
  .grid__med-full {
    width: 100%;
  }
  [class*="grid__med-11of12"] {
    width: 91.66667%;
  }
  [class*="grid__med-10of12"] {
    width: 83.33333%;
  }
  [class*="grid__med-7of12"] {
    width: 58.33333%;
  }
  [class*="grid__med-5of12"] {
    width: 41.66667%;
  }
  [class*="grid__med-2of12"] {
    width: 16.66667%;
  }
  [class*="grid__med-1of12"] {
    width: 8.33333%;
  }
  [class*="grid__med-10of11"] {
    width: 90.90909%;
  }
  [class*="grid__med-9of11"] {
    width: 81.81818%;
  }
  [class*="grid__med-8of11"] {
    width: 72.72727%;
  }
  [class*="grid__med-7of11"] {
    width: 63.63636%;
  }
  [class*="grid__med-6of11"] {
    width: 54.54545%;
  }
  [class*="grid__med-5of11"] {
    width: 45.45455%;
  }
  [class*="grid__med-4of11"] {
    width: 36.36364%;
  }
  [class*="grid__med-3of11"] {
    width: 27.27273%;
  }
  [class*="grid__med-2of11"] {
    width: 18.18182%;
  }
  [class*="grid__med-1of11"] {
    width: 9.09091%;
  }
  [class*="grid__med-9of10"] {
    width: 90%;
  }
  [class*="grid__med-8of10"] {
    width: 80%;
  }
  [class*="grid__med-7of10"] {
    width: 70%;
  }
  [class*="grid__med-6of10"] {
    width: 60%;
  }
  [class*="grid__med-4of10"] {
    width: 40%;
  }
  [class*="grid__med-3of10"] {
    width: 30%;
  }
  [class*="grid__med-2of10"] {
    width: 20%;
  }
  [class*="grid__med-1of10"] {
    width: 10%;
  }
  [class*="grid__med-8of9"] {
    width: 88.88889%;
  }
  [class*="grid__med-7of9"] {
    width: 77.77778%;
  }
  [class*="grid__med-5of9"] {
    width: 55.55556%;
  }
  [class*="grid__med-4of9"] {
    width: 44.44444%;
  }
  [class*="grid__med-2of9"] {
    width: 22.22222%;
  }
  [class*="grid__med-1of9"] {
    width: 11.11111%;
  }
  [class*="grid__med-7of8"] {
    width: 87.5%;
  }
  [class*="grid__med-5of8"] {
    width: 62.5%;
  }
  [class*="grid__med-3of8"] {
    width: 37.5%;
  }
  [class*="grid__med-1of8"] {
    width: 12.5%;
  }
  [class*="grid__med-6of7"] {
    width: 85.71429%;
  }
  [class*="grid__med-5of7"] {
    width: 71.42857%;
  }
  [class*="grid__med-4of7"] {
    width: 57.14286%;
  }
  [class*="grid__med-3of7"] {
    width: 42.85714%;
  }
  [class*="grid__med-2of7"] {
    width: 28.57143%;
  }
  [class*="grid__med-1of7"] {
    width: 14.28571%;
  }
  [class*="grid__med-5of6"] {
    width: 83.33333%;
  }
  [class*="grid__med-1of6"] {
    width: 16.66667%;
  }
  [class*="grid__med-4of5"] {
    width: 80%;
  }
  [class*="grid__med-3of5"] {
    width: 60%;
  }
  [class*="grid__med-2of5"] {
    width: 40%;
  }
  [class*="grid__med-1of5"] {
    width: 20%;
  }
  .grid__med-row--flex,
  .grid__med-quarters,
  .grid__med-thirds,
  .grid__med-halves {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
  }
  .grid__med-row--flex > [class*="grid__med"],
  .grid__med-quarters > *,
  .grid__med-thirds > *,
  .grid__med-halves > * {
    float: none;
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
  }
  .opera-only :-o-prefocus,
  .grid__med-row--flex,
  .grid__med-quarters,
  .grid__med-thirds,
  .grid__med-halves {
    word-spacing: -0.43em;
  }
}
/**
 * Desktop Grid
 */
/*

````desktop-grid
<div class="grid__lg-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="grid__lg-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="grid__lg-halves">
    <div>
        <div class="block">Half</div>
    </div>
    <div>
        <div class="block">Half</div>
    </div>
</div>
<div class="grid__lg-row">
    <div class="grid__lg-two-thirds">
        <div class="block">Two Thirds</div>
    </div>
    <div class="grid__lg-third">
        <div class="block">Third</div>
    </div>
</div>
<div class="grid__lg-row">
    <div class="grid__lg-three-quarters">
        <div class="block">Three Quarters</div>
    </div>
    <div class="grid__lg-quarter">
        <div class="block">Quarter</div>
    </div>
</div>
````

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

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

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;
  overflow-x: hidden;
  min-width: auto;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
.svg-defs {
  display: none;
}
img {
  max-width: 100%;
  border: 0;
}
.lte7 img {
  -ms-interpolation-mode: bicubic;
}
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
.icons__icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.no-svg .icons__icon {
  display: none;
}
svg:not(:root) {
  overflow: hidden;
}
.button__base,
[class*="button__"],
.button__primary,
.button__secondary,
.globalHeader__calendar,
.button__tertiary,
.globalFooter__ticketButton,
.globalFooter__email-signup {
  font-size: 100%;
  display: inline-block;
  cursor: pointer;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.0085em;
  font-family: "Cold War", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
  width: auto;
  height: auto;
  margin: 0;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  position: relative;
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  outline: 0;
  overflow: visible;
  vertical-align: middle;
  background: #636363;
  color: #000000;
  padding: 8px 1.875rem;
  margin-top: 1.25rem;
  border-radius: 0;
  text-transform: uppercase;
}
.button__base[disabled],
[class*="button__"][disabled],
.button__primary[disabled],
.button__secondary[disabled],
.globalHeader__calendar[disabled],
.button__tertiary[disabled],
.globalFooter__ticketButton[disabled],
.globalFooter__email-signup[disabled] {
  cursor: default;
}
.button__base::-moz-focus-inner,
[class*="button__"]::-moz-focus-inner,
.button__primary::-moz-focus-inner,
.button__secondary::-moz-focus-inner,
.globalHeader__calendar::-moz-focus-inner,
.button__tertiary::-moz-focus-inner,
.globalFooter__ticketButton::-moz-focus-inner,
.globalFooter__email-signup::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.button__base:before,
[class*="button__"]:before,
.button__primary:before,
.button__secondary:before,
.globalHeader__calendar:before,
.button__tertiary:before,
.globalFooter__ticketButton:before,
.globalFooter__email-signup:before {
  content: '';
  position: absolute;
  opacity: 0;
  top: -9px;
  left: -9px;
  bottom: -9px;
  right: -9px;
  border: 3px solid #00681B;
  transition: opacity 140ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
p > .button__base,
p > [class*="button__"],
p > .button__primary,
p > .button__secondary,
p > .globalHeader__calendar,
p > .button__tertiary,
p > .globalFooter__ticketButton,
p > .globalFooter__email-signup {
  margin-top: 0;
}
.button__base:hover,
[class*="button__"]:hover,
.button__base.is-current,
[class*="button__"].is-current,
.button__primary:hover,
.button__primary.is-current,
.button__secondary:hover,
.button__secondary.is-current,
.globalHeader__calendar:hover,
.globalHeader__calendar.is-current,
.button__tertiary:hover,
.button__tertiary.is-current,
.globalFooter__ticketButton:hover,
.globalFooter__ticketButton.is-current,
.globalFooter__email-signup:hover,
.globalFooter__email-signup.is-current {
  background: #000000;
  color: #FFFFFF;
  text-decoration: underline;
  border-color: #000000;
}
.button__base:focus,
[class*="button__"]:focus,
.button__primary:focus,
.button__secondary:focus,
.globalHeader__calendar:focus,
.button__tertiary:focus,
.globalFooter__ticketButton:focus,
.globalFooter__email-signup:focus {
  outline: 0;
}
.button__base:focus:before,
[class*="button__"]:focus:before,
.button__primary:focus:before,
.button__secondary:focus:before,
.globalHeader__calendar:focus:before,
.button__tertiary:focus:before,
.globalFooter__ticketButton:focus:before,
.globalFooter__email-signup:focus:before {
  opacity: 1;
}
.button__base[disabled],
[class*="button__"][disabled],
.button__primary[disabled],
.button__secondary[disabled],
.globalHeader__calendar[disabled],
.button__tertiary[disabled],
.globalFooter__ticketButton[disabled],
.globalFooter__email-signup[disabled] {
  cursor: initial;
}
.button__base[disabled]:hover,
[class*="button__"][disabled]:hover,
.button__base[disabled].is-current,
[class*="button__"][disabled].is-current,
.button__primary[disabled]:hover,
.button__primary[disabled].is-current,
.button__secondary[disabled]:hover,
.button__secondary[disabled].is-current,
.globalHeader__calendar[disabled]:hover,
.globalHeader__calendar[disabled].is-current,
.button__tertiary[disabled]:hover,
.button__tertiary[disabled].is-current,
.globalFooter__ticketButton[disabled]:hover,
.globalFooter__ticketButton[disabled].is-current,
.globalFooter__email-signup[disabled]:hover,
.globalFooter__email-signup[disabled].is-current {
  text-decoration: none;
}
.button__base[disabled]:focus:before,
[class*="button__"][disabled]:focus:before,
.button__primary[disabled]:focus:before,
.button__secondary[disabled]:focus:before,
.globalHeader__calendar[disabled]:focus:before,
.button__tertiary[disabled]:focus:before,
.globalFooter__ticketButton[disabled]:focus:before,
.globalFooter__email-signup[disabled]:focus:before {
  opacity: 0;
}
.button__base[disabled]:active:after,
[class*="button__"][disabled]:active:after,
.button__primary[disabled]:active:after,
.button__secondary[disabled]:active:after,
.globalHeader__calendar[disabled]:active:after,
.button__tertiary[disabled]:active:after,
.globalFooter__ticketButton[disabled]:active:after,
.globalFooter__email-signup[disabled]:active:after {
  transform: none;
}
@media all and (max-width: 29.9375em) {
  .button__base,
  [class*="button__"],
  .button__primary,
  .button__secondary,
  .globalHeader__calendar,
  .button__tertiary,
  .globalFooter__ticketButton,
  .globalFooter__email-signup {
    width: 100%;
  }
}
/*

Button Variations

 */
.button__primary,
.button__tertiary,
.globalFooter__ticketButton,
.globalFooter__email-signup {
  background: #00681B;
  color: #FFFFFF;
  border: 3px solid #00681B;
}
.button__primary:hover,
.button__primary.is-current,
.button__tertiary:hover,
.button__tertiary.is-current,
.globalFooter__email-signup:hover,
.globalFooter__email-signup.is-current {
  background: #002639;
  color: #FFFFFF;
  text-decoration: underline;
  border-color: #002639;
}
.button__primary:focus,
.button__tertiary:focus,
.globalFooter__email-signup:focus {
  background: #00681B;
  color: #FFFFFF;
  border-color: #00681B;
}
.button__primary:active,
.button__tertiary:active,
.globalFooter__email-signup:active {
  background: #002639;
  color: #FFFFFF;
  border-color: #002639;
  text-decoration: none;
}
.button__primary[disabled],
.button__tertiary[disabled],
.globalFooter__email-signup[disabled] {
  background: #636363;
  border-color: #636363;
  color: #FFFFFF;
}
.button__secondary {
  background: #FFFFFF;
  color: #002639;
  border: 3px solid #002639;
}
.button__secondary:hover,
.button__secondary:focus,
.button__secondary.is-current {
  background: #002639;
  color: #FFFFFF;
  text-decoration: underline;
  border-color: #002639;
}
.button__secondary:active {
  background: #FFFFFF;
  color: #002639;
  border-color: #002639;
  text-decoration: none;
}
.button__secondary[disabled] {
  background: #FFFFFF;
  border-color: #636363;
  color: #636363;
}
.button__tertiary,
.globalFooter__email-signup {
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  background: #00681B;
  padding-right: 1.875rem;
}
.button__tertiary:hover,
.button__tertiary.is-current {
  background: #002639;
  color: #FFFFFF;
  text-decoration: none;
}
.button__tertiary:focus {
  background: #002639;
  color: #FFFFFF;
}
.button__tertiary:active {
  background: #002639;
  color: #FFFFFF;
  text-decoration: none;
}
.button__tertiary[disabled] {
  background: #BBBBBB;
  border-color: #636363;
  color: #636363;
}
.button__no-button {
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
}
.button__no-button:after {
  display: none;
}
.button__no-button:hover,
.button__no-button:focus,
.button__no-button.is-current {
  background: transparent;
  color: inherit;
}
/*

````tiny-button
<a class="button__tiny" href="#">Tiny Button</a>
<a class="button__tiny button__primary" href="#">Tiny Button Primary</a>
<a class="button__tiny button__danger" href="#">Tiny Button Danger</a>
````

*/
/*

````small-button
<a class="button__small" href="#">Small Button</a>
<a class="button__small button__primary" href="#">Small Button Primary</a>
<a class="button__small button__danger" href="#">Small Button Danger</a>
````

*/
/*

````large-button
<a class="button__large" href="#">Large Button</a>
<a class="button__large button__primary" href="#">Large Button Primary</a>
<a class="button__large button__danger" href="#">Large Button Danger</a>
````

*/
.button__tiny {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
  letter-spacing: 0.02857143em;
  line-height: 1;
  padding: 7px 0.9375rem 6px 0.9375rem;
}
.button__small,
.globalFooter__email-signup {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.875;
  letter-spacing: -0.008125em;
  letter-spacing: 0.025em;
  padding: 0 0.9375rem;
}
.button__large,
.globalFooter__ticketButton {
  padding: 19px 2.8125rem;
}
.button__massive {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.33333333;
  letter-spacing: -0.00833333em;
  letter-spacing: 0.025em;
  padding: 17px 3.75rem;
}
.button__full-width,
.globalFooter__ticketButton {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/*

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.

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

Floats

Next, we have classes for floating elements.

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

"New Line"

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

*/
.presentational__new-line {
  display: block;
}
.presentational__group {
  /* Mixins */
}
.presentational__group:before,
.presentational__group:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.presentational__group: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.

*/
.presentational__is-hidden {
  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;
}
.presentational__is-hidden.focusable:active,
.presentational__is-hidden.focusable:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  position: static;
}
body:hover .presentational__is-hidden a,
body:hover .presentational__is-hidden input,
body:hover .presentational__is-hidden button {
  display: none;
}
@media all and (max-width: 47.9375em) {
  .presentational__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;
  }
  .presentational__is-hidden-small.focusable:active,
  .presentational__is-hidden-small.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .presentational__is-hidden-small a,
  body:hover .presentational__is-hidden-small input,
  body:hover .presentational__is-hidden-small button {
    display: none;
  }
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
  .presentational__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;
  }
  .presentational__is-hidden-medium.focusable:active,
  .presentational__is-hidden-medium.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .presentational__is-hidden-medium a,
  body:hover .presentational__is-hidden-medium input,
  body:hover .presentational__is-hidden-medium button {
    display: none;
  }
}
@media all and (min-width: 62em) {
  .presentational__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;
  }
  .presentational__is-hidden-large.focusable:active,
  .presentational__is-hidden-large.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    position: static;
  }
  body:hover .presentational__is-hidden-large a,
  body:hover .presentational__is-hidden-large input,
  body:hover .presentational__is-hidden-large button {
    display: none;
  }
}
/*

"Isn't Hidden"

Undoes `.is-hidden`.

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

"Relative Container"

Exactly what it sounds like.

*/
.presentational__relative-container {
  position: relative;
}
/*

"No Scroll"

Paired with "motif.utitlies.js" to make the page non-scrollable

*/
html.presentational__no-scroll,
body.presentational__no-scroll {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
}
.tnew {
  background: #f6f7f2;
}
.tnew .form-field,
.tnew select.form-field {
  width: auto !important;
}
.tnew .btnStyle,
.tnew .primaryButton,
.tnew .community a.button-link,
.tnew .smallButton,
.tnew .register,
.tnew .login-widget-login,
.tnew #ucLoginWidget_lnk_needAccount,
.tnew #ucLoginWidget_lnk_continueShopping,
.tnew .tertiaryButton,
.tnew #lbtn_promo,
.tnew .primaryButton {
  border-radius: 0 !important;
  border: 0 !important;
}
.tnew main {
  width: auto;
  max-width: 940px;
}
.tnew table,
.tnew tbody,
.tnew table td,
.tnew table th,
.tnew table tr {
  width: 100%;
}
.tnew .contribute-form .header-image {
  max-width: 750px;
}
.tnew .contribute-form .column-wrapper {
  max-width: 750px;
}
.globalHeader {
  background: #FFFFFF;
  position: relative;
}
#wpadminbar {
  z-index: 20;
}
@media all and (min-width: 62em) {
  .globalHeader--has-secondary {
    margin-bottom: 50px;
  }
}
@media all and (min-width: 62em) {
  .globalHeader__wrapper {
    max-width: 1500px;
  }
}
.globalHeader__row {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "col-1 col-4";
}
@media all and (min-width: 62em) {
  .globalHeader__row {
    grid-template-columns: auto 1fr 150px;
    grid-gap: 30;
    grid-template-areas: "col-1 col-2 col-3";
  }
}
.globalHeader__row .no-cssgrid {
  display: flex;
  justify-content: space-between;
}
.globalHeader__logo-link {
  width: 70px;
  display: inline-block;
}
@media all and (min-width: 62em) {
  .globalHeader__logo-link {
    width: 130px;
  }
}
.globalHeader__col-1 {
  grid-area: col-1;
  white-space: nowrap;
}
.globalHeader__col-1 .no-cssgrid {
  margin-right: auto;
  flex-grow: 0;
}
@media all and (min-width: 62em) {
  .no-cssgrid .globalHeader__col-1 {
    width: 130px;
  }
}
.globalHeader__col-2 {
  grid-area: col-2;
  display: none;
}
@media all and (max-width: 61.9375em) {
  .is-revealed .globalHeader__col-2 {
    display: block;
    position: fixed;
    overflow-y: scroll;
    scroll-behavior: smooth;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #002639;
    color: #FFFFFF;
    z-index: 101;
    padding: 60px 4% 2.5rem 4%;
  }
}
@media all and (min-width: 62em) {
  .globalHeader__col-2 {
    text-align: center;
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .globalHeader__col-2 .no-cssgrid {
    flex-grow: 0;
  }
}
.globalHeader__col-3 {
  grid-area: col-3;
  display: none;
}
@media all and (min-width: 62em) {
  .globalHeader__col-3 {
    padding: 15px 0;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
  }
  .globalHeader__col-3 .no-cssgrid {
    width: 150px;
    flex-grow: 0;
    margin-left: auto;
  }
}
.globalHeader__col-4 {
  grid-area: col-4;
}
@media all and (min-width: 62em) {
  .globalHeader__col-4 {
    display: none;
  }
}
.globalHeader__figure {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.globalHeader__figure img {
  width: 100%;
  height: auto;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__figure {
    position: absolute;
    top: 34px;
    left: 4%;
    width: calc(100% - 4% - 4% - 60px);
  }
}
.globalHeader__logo-img--large {
  display: block;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__logo-img--large {
    display: none;
  }
}
.globalHeader__logo-img--small {
  display: block;
}
@media all and (min-width: 62em) {
  .globalHeader__logo-img--small {
    display: none;
  }
}
.globalHeader__logo-img--mobile {
  display: inline-block;
  max-width: 70%;
  margin-bottom: 1.25rem;
}
@media all and (min-width: 48em) {
  .globalHeader__logo-img--mobile {
    margin-bottom: 0.625rem;
  }
}
@media all and (min-width: 62em) {
  .globalHeader__logo-img--mobile {
    display: none;
  }
}
.globalHeader__subheading-box {
  text-align: right;
  margin-top: 0.3125rem;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__subheading-box {
    display: none;
  }
}
.globalHeader__sub-headline {
  font-family: "Avenir Next Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  text-transform: uppercase;
  color: #F04E30;
  text-decoration: none;
}
.globalHeader__nav {
  margin-top: 0;
  align-self: flex-end;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__nav {
    margin-bottom: 2.5rem;
  }
}
@media all and (max-width: 61.9375em) {
  .globalHeader__wrapper {
    width: 100%;
  }
}
.globalHeader__list,
.globalHeader__sub-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media all and (min-width: 62em) {
  .globalHeader__list,
  .globalHeader__sub-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }
}
.globalHeader__item,
.globalHeader__sub-item {
  margin: 0;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__item,
  .globalHeader__sub-item {
    width: 100%;
  }
}
.globalHeader__link,
.globalHeader__sub-link {
  text-transform: uppercase;
  padding: 5px 0 0 0.46875rem;
  margin-top: 1.25rem;
  text-decoration: none;
  background: transparent;
  color: #FFFFFF;
  display: block;
}
.globalHeader__link:hover,
.globalHeader__link:focus,
.globalHeader__sub-link:hover,
.globalHeader__sub-link:focus {
  color: #FFFFFF;
}
@media all and (min-width: 62em) {
  .globalHeader__link,
  .globalHeader__sub-link {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.875;
    letter-spacing: -0.008125em;
    color: #000000;
    text-align: center;
    padding: 10px 14px;
    margin-top: 0;
    transition: all 0s linear;
    transition-delay: 0.18s;
  }
  .globalHeader__item:hover .globalHeader__link,
  .globalHeader__link.globalHeader__link--current,
  .globalHeader__link.globalHeader__link--active,
  .globalHeader__link:focus,
  .globalHeader__sub-item:hover .globalHeader__link,
  .globalHeader__item:hover .globalHeader__sub-link,
  .globalHeader__sub-link.globalHeader__link--current,
  .globalHeader__sub-link.globalHeader__link--active,
  .globalHeader__sub-link:focus {
    transition-delay: 0.08s;
    background: #002639;
    color: #FFFFFF;
  }
  .globalHeader__item:first-child .globalHeader__link,
  .globalHeader__sub-item:first-child .globalHeader__link,
  .globalHeader__item:first-child .globalHeader__sub-link {
    margin-top: 0;
  }
}
.globalHeader__link--current,
.globalHeader__link--active,
.globalHeader__sub-link--current,
.globalHeader__sub-link--active {
  position: relative;
}
.globalHeader__link--current:after,
.globalHeader__link--active:after,
.globalHeader__sub-link--current:after,
.globalHeader__sub-link--active:after {
  content: '';
  position: absolute;
  right: 100%;
  top: 4px;
  bottom: 0;
  width: 6px;
  background: #3D98C8;
}
@media all and (min-width: 62em) {
  .globalHeader__link--current:after,
  .globalHeader__link--active:after,
  .globalHeader__sub-link--current:after,
  .globalHeader__sub-link--active:after {
    display: none;
  }
}
.globalHeader__sub-list-container {
  z-index: 1;
}
@media all and (min-width: 62em) {
  .globalHeader__sub-list-container {
    display: block;
    opacity: 0;
    transform: translateX(-99999px);
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 100%;
    background: #002639;
    transition: all 0s linear;
    transition-delay: 0.18s;
  }
  .globalHeader__sub-list-container:hover,
  .globalHeader__sub-list-container:focus-within,
  .globalHeader__link--current + .globalHeader__sub-list-container,
  .globalHeader__link--active + .globalHeader__sub-list-container {
    height: auto;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.08s;
    z-index: 2;
  }
  .globalHeader__item:hover .globalHeader__sub-list-container,
  .globalHeader__sub-item:hover .globalHeader__sub-list-container {
    z-index: 3;
  }
}
.globalHeader__sub-link {
  color: #FFFFFF;
}
@media all and (max-width: 61.9375em) {
  .globalHeader__sub-link {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.875;
    letter-spacing: -0.008125em;
    font-family: "Avenir Next Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
    letter-spacing: 0.03125em;
    text-transform: none;
    margin-top: 0;
    padding-left: 1.40625rem;
  }
}
@media all and (min-width: 62em) {
  .globalHeader__sub-item:first-child .globalHeader__sub-link {
    margin-top: 0;
  }
}
.globalHeader__sub-link--current,
.globalHeader__sub-link--active {
  position: relative;
}
.globalHeader__sub-link--current:after,
.globalHeader__sub-link--active:after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 0;
  width: 6px;
  background: #3D98C8;
}
@media all and (min-width: 62em) {
  .globalHeader__sub-link--current:after,
  .globalHeader__sub-link--active:after {
    left: 0;
    right: 0;
    top: auto;
    height: 8px;
    width: auto;
    display: block;
  }
}
.globalHeader__link-decoration {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.globalHeader__link-decoration:before {
  content: "";
  position: absolute;
  bottom: -5px;
  height: 3px;
  background: #3D98C8;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0s linear 0.18s;
  z-index: 1;
}
.globalHeader__link:hover .globalHeader__link-decoration:before,
.globalHeader__link:focus .globalHeader__link-decoration:before,
.globalHeader__sub-link:hover .globalHeader__link-decoration:before,
.globalHeader__sub-link:focus .globalHeader__link-decoration:before {
  opacity: 1;
  transition-delay: 0.08s;
}
.globalHeader__sub-link-decoration {
  position: relative;
}
.globalHeader__sub-link-decoration:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #FFFFFF;
  left: 0;
  right: 0;
  opacity: 0;
}
.globalHeader__sub-link:hover .globalHeader__sub-link-decoration:before,
.globalHeader__sub-link:focus .globalHeader__sub-link-decoration:before {
  opacity: 1;
}
.globalHeader__side-list {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: right;
  width: 100%;
}
.globalHeader__side-list--mobile {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  padding-left: 0;
}
@media all and (min-width: 62em) {
  .globalHeader__side-list--mobile {
    display: none;
  }
}
.globalHeader__side-item {
  margin: 0.625rem 0 0 0;
}
.globalHeader__side-item:first-child {
  margin-top: 0;
}
.globalHeader__side-list--mobile .globalHeader__side-item:first-child {
  margin-top: 0.625rem;
}
.globalHeader__side-link {
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  color: #000000;
  display: block;
  margin-left: auto;
}
.globalHeader__side-link:hover,
.globalHeader__side-link:focus {
  color: #00681B;
}
.globalHeader__side-link:hover span:before,
.globalHeader__side-link:focus span:before {
  opacity: 1;
}
.globalHeader__side-link span {
  position: relative;
}
.globalHeader__side-link span:before {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: #00681B;
  left: 0;
  right: 0;
  opacity: 0;
}
.globalHeader__side-link svg {
  margin-left: 0.46875rem;
  width: 16px;
}
.globalHeader__side-list--mobile .globalHeader__side-link {
  color: #FFFFFF;
}
.globalHeader__side-list--mobile .globalHeader__side-link:hover,
.globalHeader__side-list--mobile .globalHeader__side-link:focus {
  color: #FFFFFF;
}
.globalHeader__side-list--mobile .globalHeader__side-link span:before {
  background: #FFFFFF;
}
.globalHeader__calendar {
  text-transform: uppercase;
  margin-top: 0.625rem;
  margin-left: auto;
  border-color: #00681B;
  color: #00681B;
  align-self: flex-end;
}
.globalHeader__calendar:hover,
.globalHeader__calendar:focus {
  border-color: #000000;
  background: #000000;
  color: #FFFFFF;
  text-decoration: none;
}
.globalHeader__calendar:hover span,
.globalHeader__calendar:focus span {
  text-decoration: underline;
}
.globalHeader__calendar svg {
  margin-left: 0.46875rem;
  width: 19px;
  height: 20px;
}
.globalHeader__calendar--small {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: transparent;
  margin-top: 1.25rem;
}
@media all and (min-width: 62em) {
  .globalHeader__calendar--small {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .globalHeader__calendar:hover,
  .globalHeader__calendar:focus {
    border-color: #002639;
    background: #002639;
  }
}
.globalHeader__close-button {
  color: #FFFFFF;
  height: 40px;
  width: 50px;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: calc(4% - 10px);
}
.globalHeader__close-button svg {
  height: 30px;
  width: 30px;
}
@media all and (min-width: 62em) {
  .globalHeader__close-button {
    display: none;
  }
}
.globalHeader__globalMessage {
  padding: 0.625rem 0.9375rem;
  background: #F04E30;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 1px;
}
.globalHeader__globalMessage.low {
  background: #002639;
}
.globalHeader__globalMessage.medium {
  background: #E97029;
}
.globalHeader__globalMessage.high {
  background: #F04E30;
}
.screen-reader-text {
  margin: -1px;
}
.screen-reader-text:focus {
  padding: 15px 23px 14px;
  right: 5px;
}
.screen-reader-shortcut {
  padding: 15px 23px 14px;
  background: #f1f1f1;
  color: #0073aa;
  max-width: 200px;
  position: absolute;
  left: -300px;
  top: 7px;
  word-wrap: normal !important;
  text-align: center;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  word-wrap: normal;
}
.screen-reader-shortcut:focus {
  left: 6px;
  z-index: 100000;
}
#menu-overlay {
  display: none;
}
.single-nav {
  display: none;
}
.globalFooter {
  margin-bottom: 69px;
}
@media all and (min-width: 48em) {
  .globalFooter {
    margin-bottom: 0;
  }
}
.globalFooter__container {
  background: #3D98C8;
  color: #FFFFFF;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  position: relative;
  margin-top: 5rem;
}
.globalFooter__container:before {
  content: '';
  width: 100%;
  position: absolute;
  display: block;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 24px;
  background-image: url("/wp-content/themes/carmack/resources/icons/scallop-blue.svg");
  background-size: contain;
  background-repeat: repeat-x;
  background-position: bottom center;
  transform: translateY(6px);
}
.globalFooter__ticketButton {
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
  clip-path: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media all and (min-width: 48em) {
  .globalFooter__ticketButton {
    display: none;
  }
}
.globalFooter__location {
  text-align: center;
}
@media all and (min-width: 48em) {
  .globalFooter__location {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.88888889;
    letter-spacing: -0.00833333em;
  }
}
.globalFooter__title {
  font-family: "Avenir Next Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
  color: #FFFFFF;
}
@media all and (min-width: 48em) {
  .globalFooter__title {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.33333333;
    letter-spacing: -0.00833333em;
  }
}
.globalFooter__subtitle {
  text-transform: uppercase;
  margin-top: 0;
  color: #FFFFFF;
  text-decoration: none;
}
.globalFooter__subtitle:hover,
.globalFooter__subtitle:focus {
  color: #002639;
}
.globalFooter__info {
  margin-top: 0;
  color: #FFFFFF;
}
.globalFooter__email {
  color: #FFFFFF;
}
.globalFooter__email:hover,
.globalFooter__email:focus {
  color: #FFFFFF;
}
.globalFooter__main-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.globalFooter__main-nav-list li {
  margin: 0;
  display: block;
}
.globalFooter__main-nav-link,
.globalFooter__eyebrow-nav-link {
  font-family: "Avenir Next Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  margin-top: 0;
  text-decoration: none;
  color: white;
}
.globalFooter__main-nav-link:after,
.globalFooter__eyebrow-nav-link:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 6px;
  left: 0;
  width: 100%;
  right: 0;
  display: block;
  opacity: 0;
  background: #FFFFFF;
}
.globalFooter__main-nav-link:hover,
.globalFooter__main-nav-link:focus,
.globalFooter__eyebrow-nav-link:hover,
.globalFooter__eyebrow-nav-link:focus {
  color: #FFFFFF;
}
.globalFooter__main-nav-link:hover:after,
.globalFooter__main-nav-link:focus:after,
.globalFooter__eyebrow-nav-link:hover:after,
.globalFooter__eyebrow-nav-link:focus:after {
  opacity: 1;
}
@media all and (max-width: 47.9375em) {
  .globalFooter__row {
    text-align: center;
  }
}
@media all and (max-width: 47.9375em) {
  .globalFooter__col {
    margin-top: 2.5rem;
  }
  .globalFooter__col:first-child {
    margin-top: 0;
  }
}
.globalFooter__eyebrow {
  background: #002639;
  color: #FFFFFF;
  padding: 0.625rem 0;
  margin: 0;
}
.globalFooter__eyebrow-row {
  text-align: center;
}
@media all and (min-width: 48em) {
  .globalFooter__eyebrow-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }
}
@media all and (min-width: 48em) {
  .globalFooter__eyebrow-col:first-child {
    margin-right: auto;
  }
  .globalFooter__eyebrow-col:last-child {
    margin-left: auto;
  }
}
.globalFooter__eyebrow-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.globalFooter__eyebrow-nav-list li {
  display: inline-block;
}
@media all and (min-width: 48em) {
  .globalFooter__eyebrow-nav-list li {
    margin: 0 0.9375rem 0 0;
    float: left;
  }
}
.globalFooter__eyebrow-nav-link {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
}
.globalFooter__copyright {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
  margin: 0;
  font-style: italic;
  color: #FFFFFF;
}
@media all and (min-width: 48em) {
  .globalFooter__email-social {
    text-align: right;
  }
}
.globalFooter__email-signup {
  background: #3D98C8;
  border: 3px solid #FFFFFF;
  margin-top: 0;
  position: relative;
  padding-right: 1.875rem;
}
.globalFooter__email-signup:after {
  content: '';
  position: absolute;
  right: 4px;
  top: -5px;
  background: #FFFFFF;
  width: 3px;
  height: calc(100% + 8px);
  transform: rotate(23deg);
}
.globalFooter__email-signup:hover,
.globalFooter__email-signup:focus {
  background: #002639;
  border-color: #002639;
}
.globalFooter__email-signup:hover:after,
.globalFooter__email-signup:focus:after {
  background: #002639;
}
.globalFooter__email-signup .icons__icon {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: sub;
  margin-left: 0.234375rem;
}
.globalFooter__social {
  margin: auto;
  width: max-content;
}
@media all and (min-width: 48em) {
  .globalFooter__social {
    width: auto;
  }
}
.globalFooter__social-link {
  margin-top: 0.625rem;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  margin-left: 0.46875rem;
  margin-right: 0.46875rem;
}
.globalFooter__social-link:hover,
.globalFooter__social-link:focus {
  color: #002639;
}
@media all and (min-width: 48em) {
  .globalFooter__social-link {
    float: right;
    margin-right: 0.9375rem;
    margin-left: 0;
  }
}
/*# sourceMappingURL=motif.css.map */