/*

Dynamic Responsive Image

*/
/*

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: 'Avenir Next Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_1.eot');
  /* IE9 Compat Modes */
  src: local('Avenir Next Regular'), local('Avenir-Next-Regular'), url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_1_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_1_0.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_1_0.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_1_0.ttf') format('truetype'), /* Safari, Android, iOS */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_1_0.svg#CWM_Regular') format('svg');
  /* Legacy iOS */
}
@font-face {
  font-family: 'Avenir Next Bold';
  font-style: normal;
  font-weight: 700;
  src: url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.eot');
  /* IE9 Compat Modes */
  src: local('Avenir Next Bold'), local('Avenir-Next-Bold'), url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.ttf') format('truetype'), /* Safari, Android, iOS */ url('/wp-content/themes/carmack/resources/fonts/Avenir_Next/39DFC4_0_0.svg#CWM_Regular') format('svg');
  /* Legacy iOS */
}
@font-face {
  font-family: 'Cold War';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.eot');
  /* IE9 Compat Modes */
  src: local('Cold War Regular'), local('Cold-War-Regular'), url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.ttf') format('truetype'), /* Safari, Android, iOS */ url('/wp-content/themes/carmack/resources/fonts/CMW/CWM-Light_N.svg#CWM_Regular') format('svg');
  /* Legacy iOS */
}
/*

Font Classes

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

*/
.styles__avenir-regular,
body,
.styles__body-text,
.styles__tag,
.styles__tag--small {
  font-family: "Avenir Next Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 400;
}
.styles__avenir-bold,
h1,
h2,
h3,
h4,
h5,
h6,
.styles__primary-heading,
a,
.links__link,
ol .largeNumberedList__item:before,
ol.wysiwyg__large-list li:before,
ol .wysiwyg__large-list li:before {
  font-family: "Avenir Next Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 700;
}
.styles__cold-war {
  font-family: "Cold War", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-weight: 400;
}
/*

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.25rem;
}
h1,
.styles__primary-heading {
  color: #002639;
}
h2,
.styles__secondary-heading {
  color: #002639;
}
h3,
.styles__tertiary-heading {
  color: #002639;
}
h4,
.styles__quaternary-heading {
  color: #002639;
}
h5,
.styles__quinary-heading {
  color: #002639;
}
.styles__tag,
.styles__tag--small {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.88888889;
  letter-spacing: -0.00833333em;
  letter-spacing: -0.00555556em;
  text-transform: uppercase;
}
.styles__tag--small {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
  letter-spacing: 0.13357143em;
}
/*

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

*/
/*

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

*/
.styles__blockquote {
  padding-left: 0.9375rem;
}
.styles__blockquote blockquote {
  padding: 0;
}
.styles__blockquote-cite {
  display: block;
}
.styles__blockquote-cite:before {
  content: "\2014";
}
.styles__label {
  text-transform: uppercase;
  font-weight: normal;
}
.styles__smallcaps {
  font-variant-caps: petite-caps;
}
/*

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,
body,
.styles__body-text {
  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,
h1,
.styles__primary-heading,
.hierarchy__tertia-text--long {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1.20833333;
  letter-spacing: -0.00833333em;
}
/*

Paragon Text

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

Columbian Text

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

Great Text

*/
.hierarchy__great-text,
h4,
.styles__quaternary-heading,
.hierarchy__great-text--long {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.0085em;
}
/*

Primer Text

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

Normal Text

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

Petite Text

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

Minion Text

*/
.hierarchy__minion-text,
.hierarchy__minion-text--long {
  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;
}
/*

Interactive Elements

*/
/*

button

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.

````button
<a class="button__btn" href="#">Default</a>
<a class="button__primary" href="#">Primary</a>
<a class="button__danger" href="#">Danger</a>
````

*/
button {
  font-size: 100%;
  margin: 0;
  -webkit-appearance: button;
  display: inline-block;
  cursor: pointer;
  line-height: normal;
}
button[disabled] {
  cursor: default;
  pointer-events: none;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.button__base,
[class*="button__"],
.button__primary,
.button__secondary,
.button__tertiary {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.875;
  letter-spacing: -0.008125em;
  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;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  background: #636363;
  color: #000000;
  padding: 8px 1.875rem;
  margin-top: 1.25rem;
  border-radius: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
@media all and (min-width: 30em) {
  .button__base,
  [class*="button__"],
  .button__primary,
  .button__secondary,
  .button__tertiary {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.0085em;
  }
}
.button__base:before,
[class*="button__"]:before,
.button__primary:before,
.button__secondary:before,
.button__tertiary: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);
  width: 100%;
}
p > .button__base,
p > [class*="button__"],
p > .button__primary,
p > .button__secondary,
p > .button__tertiary {
  margin-top: 0;
}
.button__base:hover,
[class*="button__"]:hover,
.button__base.is-current,
[class*="button__"].is-current,
.button__base:focus,
[class*="button__"]:focus,
.button__primary:hover,
.button__primary.is-current,
.button__primary:focus,
.button__secondary:hover,
.button__secondary.is-current,
.button__secondary:focus,
.button__tertiary:hover,
.button__tertiary.is-current,
.button__tertiary:focus {
  background: #000000;
  color: #FFFFFF;
  text-decoration: underline;
  border-color: #000000;
}
.button__base:focus,
[class*="button__"]:focus,
.button__primary:focus,
.button__secondary:focus,
.button__tertiary:focus {
  outline: 0;
}
.button__base[disabled],
[class*="button__"][disabled],
.button__primary[disabled],
.button__secondary[disabled],
.button__tertiary[disabled] {
  cursor: initial;
  pointer-events: none;
}
.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,
.button__tertiary[disabled]:hover,
.button__tertiary[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,
.button__tertiary[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,
.button__tertiary[disabled]:active:after {
  transform: none;
}
@media all and (max-width: 29.9375em) {
  .button__base,
  [class*="button__"],
  .button__primary,
  .button__secondary,
  .button__tertiary {
    width: 100%;
  }
}
/*

Button Variations

 */
.button__primary,
.button__tertiary {
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  background: #00681B;
  color: #FFFFFF;
  border: 3px solid #00681B;
  padding-right: 1.875rem;
}
.button__primary:hover,
.button__primary.is-current,
.button__primary:focus,
.button__tertiary:hover,
.button__tertiary.is-current,
.button__tertiary:focus {
  background: #002639;
  color: #FFFFFF;
  text-decoration: underline;
  border-color: #002639;
}
.button__primary:active,
.button__tertiary:active {
  background: #002639;
  color: #FFFFFF;
  border-color: #002639;
  text-decoration: none;
}
.button__primary[disabled],
.button__tertiary[disabled] {
  background: #636363;
  border-color: #636363;
  color: #FFFFFF;
  pointer-events: none;
}
.button__secondary {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.85714286;
  background: #FFFFFF;
  color: #002639;
  border: 3px solid #002639;
  white-space: initial;
  padding: 4px 0.9375rem 1px;
}
@media all and (min-width: 30em) {
  .button__secondary {
    white-space: nowrap;
  }
}
.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;
  pointer-events: none;
}
.button__tertiary {
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  background: #00681B;
  border-color: #00681B;
  padding-right: 1.875rem !important;
  box-shadow: none;
}
.button__tertiary:hover,
.button__tertiary.is-current {
  background: #002639;
  border-color: #002639;
  color: #FFFFFF;
  text-decoration: none;
}
.button__tertiary:focus {
  background: #002639;
  border-color: #002639;
  color: #FFFFFF;
}
.button__tertiary:active {
  background: #002639;
  border-color: #002639;
  color: #FFFFFF;
  text-decoration: none;
}
.button__tertiary[disabled] {
  background: #BBBBBB;
  border-color: #636363;
  color: #636363;
  pointer-events: none;
}
.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;
}
.button__disabled {
  background: #636363 !important;
  border-color: #636363 !important;
  color: #FFFFFF !important;
  pointer-events: none!important;
}
/*

````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,
.button__tertiary {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.875;
  letter-spacing: -0.008125em;
  letter-spacing: 0.06875em;
  padding: 0 0.9375rem;
}
.button__large {
  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 {
  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:focus,
a:active,
a:hover {
  outline: 0;
}
a,
.links__link {
  color: #00681B;
}
a:hover,
.links__link:hover,
a:focus,
.links__link:focus,
a.is-current,
.links__link.is-current {
  color: #002639;
}
.links__link {
  box-shadow: inset 0 0 0 #FFFFFF, inset 0 -2px 0 #00681B;
  padding-bottom: 1px;
  text-decoration: none;
  position: relative;
}
.links__link:before {
  content: '';
  position: absolute;
  opacity: 0;
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
  border: 3px solid #00681B;
}
.links__link:hover,
.links__link.is-current {
  color: #002639;
  box-shadow: inset 0 0 0 #FFFFFF, inset 0 -2px 0 #002639;
  text-decoration: none;
}
.links__link:focus {
  color: #00681B;
  box-shadow: inset 0 0 0 #FFFFFF, inset 0 -2px 0 #00681B;
}
.links__link:focus:before {
  opacity: 1;
}
.links__link:active {
  color: #002639;
  box-shadow: inset 0 0 0 #FFFFFF, inset 0 -2px 0 #002639;
}
.links__link[disabled]:focus:before {
  opacity: 0;
}
.links__icon {
  position: relative;
  margin-left: 18px;
}
.links__icon:before {
  left: -26px;
}
.links__icon svg:first-child {
  fill: currentColor;
  position: absolute;
  left: -20px;
  top: 3px;
}
.links__arrow {
  position: relative;
  margin-right: 14px;
}
.links__arrow:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #00681B;
  display: block;
}
.links__arrow:hover:after,
.links__arrow.is-current:after {
  border-left-color: #002639;
}
.links__arrow:focus:after {
  border-left-color: #00681B;
}
.links__arrow:active:after {
  border-left-color: #002639;
}
.links__arrow[disabled]:after {
  border-left-color: #636363;
}
/*

Unlink

Basic class to remove some link styling.

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

*/
.links__unlink {
  text-decoration: none;
}
/*

Skip-To Link

*/
.links__skip-to {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}
.links__skip-to:not(:focus) {
  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;
}
.links__skip-to:not(:focus).focusable:active,
.links__skip-to:not(:focus).focusable:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  position: static;
}
body:hover .links__skip-to:not(:focus) a,
body:hover .links__skip-to:not(:focus) input,
body:hover .links__skip-to:not(:focus) button {
  display: none;
}
/*

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 {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (max-width: 47.9375em) {
  .wrappers__wrapper {
    width: 90%;
  }
}
@media all and (min-width: 62em) {
  .wrappers__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);
  }
}
/*

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`, `x`, `n`                =   small (~`5px`), medium (~`10px`), large (~`20px`), x-large (~`40px`) none (`0`)

For example: `.spacing__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`.

*/
.spacing__ptn,
.spacing__pvn,
.spacing__pan {
  padding-top: 0 !important;
}
.spacing__pts,
.spacing__pvs,
.spacing__pas {
  padding-top: 0.3125rem !important;
}
.spacing__ptm,
.spacing__pvm,
.spacing__pam {
  padding-top: 0.625rem !important;
}
.spacing__ptl,
.spacing__pvl,
.spacing__pal {
  padding-top: 1.25rem !important;
}
.spacing__ptx,
.spacing__pvx,
.spacing__pax {
  padding-top: 2.5rem !important;
}
.spacing__prn,
.spacing__phn,
.spacing__pan {
  padding-right: 0 !important;
}
.spacing__prs,
.spacing__phs,
.spacing__pas {
  padding-right: 0.3125rem !important;
}
.spacing__prm,
.spacing__phm,
.spacing__pam {
  padding-right: 0.625rem !important;
}
.spacing__prl,
.spacing__phl,
.spacing__pal {
  padding-right: 1.25rem !important;
}
.spacing__prx,
.spacing__phx,
.spacing__pax {
  padding-right: 2.5rem !important;
}
.spacing__pbn,
.spacing__pvn,
.spacing__pan {
  padding-bottom: 0 !important;
}
.spacing__pbs,
.spacing__pvs,
.spacing__pas {
  padding-bottom: 0.3125rem !important;
}
.spacing__pbm,
.spacing__pvm,
.spacing__pam {
  padding-bottom: 0.625rem !important;
}
.spacing__pbl,
.spacing__pvl,
.spacing__pal {
  padding-bottom: 1.25rem !important;
}
.spacing__pbx,
.spacing__pvx,
.spacing__pax {
  padding-bottom: 2.5rem !important;
}
.spacing__pln,
.spacing__phn,
.spacing__pan {
  padding-left: 0 !important;
}
.spacing__pls,
.spacing__phs,
.spacing__pas {
  padding-left: 0.3125rem !important;
}
.spacing__plm,
.spacing__phm,
.spacing__pam {
  padding-left: 0.625rem !important;
}
.spacing__pll,
.spacing__phl,
.spacing__pal {
  padding-left: 1.25rem !important;
}
.spacing__plx,
.spacing__phx,
.spacing__pax {
  padding-left: 2.5rem !important;
}
.spacing__mtn,
.spacing__mvn,
.spacing__man {
  margin-top: 0 !important;
}
.spacing__mts,
.spacing__mvs,
.spacing__mas {
  margin-top: 0.3125rem !important;
}
.spacing__mtm,
.spacing__mvm,
.spacing__mam {
  margin-top: 0.625rem !important;
}
.spacing__mtl,
.spacing__mvl,
.spacing__mal {
  margin-top: 1.25rem !important;
}
.spacing__mtx,
.spacing__mvx,
.spacing__max {
  margin-top: 2.5rem !important;
}
.spacing__mrn,
.spacing__mhn,
.spacing__man {
  margin-right: 0 !important;
}
.spacing__mrs,
.spacing__mhs,
.spacing__mas {
  margin-right: 0.3125rem !important;
}
.spacing__mrm,
.spacing__mhm,
.spacing__mam {
  margin-right: 0.625rem !important;
}
.spacing__mrl,
.spacing__mhl,
.spacing__mal {
  margin-right: 1.25rem !important;
}
.spacing__mrx,
.spacing__mhx,
.spacing__max {
  margin-right: 2.5rem !important;
}
.spacing__mbn,
.spacing__mvn,
.spacing__man {
  margin-bottom: 0 !important;
}
.spacing__mbs,
.spacing__mvs,
.spacing__mas {
  margin-bottom: 0.3125rem !important;
}
.spacing__mbm,
.spacing__mvm,
.spacing__mam {
  margin-bottom: 0.625rem !important;
}
.spacing__mbl,
.spacing__mvl,
.spacing__mal {
  margin-bottom: 1.25rem !important;
}
.spacing__mbx,
.spacing__mvx,
.spacing__max {
  margin-bottom: 2.5rem !important;
}
.spacing__mln,
.spacing__mhn,
.spacing__man {
  margin-left: 0 !important;
}
.spacing__mls,
.spacing__mhs,
.spacing__mas {
  margin-left: 0.3125rem !important;
}
.spacing__mlm,
.spacing__mhm,
.spacing__mam {
  margin-left: 0.625rem !important;
}
.spacing__mll,
.spacing__mhl,
.spacing__mal {
  margin-left: 1.25rem !important;
}
.spacing__mlx,
.spacing__mhx,
.spacing__max {
  margin-left: 2.5rem !important;
}
/**
 * Block Spacing
 */
.spacing__block-spacing {
  margin-top: 2.5rem;
}
.the-content > .spacing__block-spacing:first-child {
  margin-top: 0;
}
@media all and (min-width: 48em) {
  .spacing__block-spacing {
    margin-top: 5rem;
  }
}
.spacing__block-spacing-small {
  margin-top: 0.15625rem;
}
.the-content > .spacing__block-spacing-small:first-child {
  margin-top: 0;
}
@media all and (min-width: 48em) {
  .spacing__block-spacing-small {
    margin-top: 0.625rem;
  }
}
/*

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

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;
  }
}
.largeNumberedList__list,
.wysiwyg__large-list {
  position: relative;
  margin-top: 1.875rem;
  padding-left: 0.9375rem;
  counter-reset: largeNumberedList;
  list-style: none;
}
.largeNumberedList__list:before,
.wysiwyg__large-list:before {
  content: '';
  background: #3D98C8;
  width: 8px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
@media all and (min-width: 48em) {
  .largeNumberedList__list,
  .wysiwyg__large-list {
    padding-left: 1.875rem;
  }
}
.largeNumberedList__item,
.wysiwyg__large-list li {
  counter-increment: largeNumberedList;
  display: block;
  position: relative;
  margin-top: 1.875rem;
  margin-left: 0;
}
ol .largeNumberedList__item:before,
ol .wysiwyg__large-list li:before {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1;
  content: counter(largeNumberedList);
  line-height: 0.8;
  color: #30A09A;
}
@media all and (min-width: 48em) {
  ol .largeNumberedList__item:before,
  ol .wysiwyg__large-list li:before {
    font-size: 90px;
    font-size: 5.625rem;
    line-height: 1;
    line-height: 0.8;
  }
}
ol .largeNumberedList__item:first-child,
ol .wysiwyg__large-list li:first-child {
  margin-top: 0;
}
ol .largeNumberedList__item:nth-child(2):before,
ol .largeNumberedList__item:nth-child(6):before,
ol .wysiwyg__large-list li:nth-child(2):before,
ol .wysiwyg__large-list li:nth-child(6):before {
  color: #D96FA7;
}
ol .largeNumberedList__item:nth-child(3):before,
ol .largeNumberedList__item:nth-child(7):before,
ol .wysiwyg__large-list li:nth-child(3):before,
ol .wysiwyg__large-list li:nth-child(7):before {
  color: #E97029;
}
ol .largeNumberedList__item:nth-child(4):before,
ol .largeNumberedList__item:nth-child(8):before,
ol .wysiwyg__large-list li:nth-child(4):before,
ol .wysiwyg__large-list li:nth-child(8):before {
  color: #794293;
}
.largeNumberedList__content {
  padding-left: 0.9375rem;
}
@media all and (min-width: 48em) {
  .largeNumberedList__content {
    padding-left: 1.875rem;
  }
}
.largeNumberedList__content-newLines {
  display: block !important;
  padding-left: 0px !important;
}
.largeNumberedList__content-newLines * {
  display: block !important;
}
hr {
  border-style: solid;
  border-width: 3px 0 0 0;
  border-color: #002639;
}
.custom-panel {
  padding: 1.25rem 0.9375rem;
  border: 2px solid #BBBBBB;
  background: #FFFFFF;
}
.custom-panel > :first-child {
  margin-top: 0;
}
.wysiwyg__large-list li:first-child {
  margin-top: 0;
}
.wysiwyg__large-list li:nth-child(2):before,
.wysiwyg__large-list li:nth-child(6):before {
  color: #D96FA7;
}
.wysiwyg__large-list li:nth-child(3):before,
.wysiwyg__large-list li:nth-child(7):before {
  color: #E97029;
}
.wysiwyg__large-list li:nth-child(4):before,
.wysiwyg__large-list li:nth-child(8):before {
  color: #794293;
}
.wysiwyg__large-list li:after {
  content: none;
}
ol.wysiwyg__large-list li:before {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1;
  content: counter(largeNumberedList);
  line-height: 0.8;
  color: #30A09A;
  margin-right: 0.9375rem;
}
@media all and (min-width: 48em) {
  ol.wysiwyg__large-list li:before {
    font-size: 90px;
    font-size: 5.625rem;
    line-height: 1;
    line-height: 0.8;
    margin-right: 1.875rem;
  }
}
/*# sourceMappingURL=motif.css.map */