/*

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

*/
/*
    Copyright (C) Youssef Habchi Fonts
    License: 6VM39115HR208784UAMOUNT
*/
@import url("https://hello.myfonts.net/count/42cca1");
@font-face {
  font-family: "Antro Vectra Bolder";
  src: url("/wp-content/themes/lbcore/resources/fonts/antro-vectra/Antro_Vectra_Bolder.eot");
  src: url("/wp-content/themes/lbcore/resources/fonts/antro-vectra/Antro_Vectra_Bolder.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/lbcore/resources/fonts/antro-vectra/Antro_Vectra_Bolder.woff2") format("woff2"), url("/wp-content/themes/lbcore/resources/fonts/antro-vectra/Antro_Vectra_Bolder.woff") format("woff"), url("/wp-content/themes/lbcore/resources/fonts/antro-vectra/Antro_Vectra_Bolder.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/**
 * @license
 * MyFonts Webfont Build ID 4377761, 2022-02-22T09:02:28-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: UniversLTPro-45Light by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-45-light/
 * Copyright: Copyright © 2014 Monotype GmbH. All rights reserved.
 * 
 * Webfont: UniversLTPro-55Roman by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-55-roman/
 * Copyright: Copyright © 2017 Monotype GmbH. All rights reserved.
 * 
 * Webfont: UniversLTPro-65Bold by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-65-bold/
 * Copyright: Copyright © 2014 Monotype GmbH. All rights reserved.
 * 
 * 
 * 
 * © 2022 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: "UniversLTPro-55Roman";
  src: url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro55Roman.woff2') format('woff2'), url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro55Roman.woff') format('woff');
}
@font-face {
  font-family: "UniversLTPro-65Bold";
  src: url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro65Bold.woff2') format('woff2'), url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro65Bold.woff') format('woff');
}
@font-face {
  font-family: "UniversLTPro-45Light";
  src: url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro45Light.woff2') format('woff2'), url('/wp-content/themes/lbcore/resources/fonts/univers/UniversLTPro45Light.woff') format('woff');
}
/*

Font Classes

In order to best support themeing between SUTH and PERN, font-specific classes
have been ditched in favor of generic class names (i.e. primary, secondary, etc.).

Font families are now assigned to CSS custom properties in our theme files
(default.less and suth.less). 

*/
.styles__primary {
  font-family: var(--fonts-primary);
  font-weight: var(--fonts-primary-weight);
  font-style: normal;
}
.styles__primary-light,
.links__unlink {
  font-family: var(--fonts-primary-light);
  font-weight: var(--fonts-primary-light-weight);
  font-style: normal;
}
.styles__primary-bold {
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
}
.styles__secondary {
  font-family: var(--fonts-secondary);
  font-weight: var(--fonts-secondary-weight);
  font-style: normal;
}
/* START LEGACY FONT CLASSES
  To-Do: Remove after further QA of our new font classes above.
*/
.styles__dm-serif {
  font-family: "DM Serif Display", 'Times New Roman',Times,Georgia,serif;
  font-weight: 400;
}
.styles__poppins-semi-bold {
  font-family: "Poppins", Helvetica,Arial,'Arial Unicode','Lucida Sans Unicode',sans-serif;
  font-weight: 600;
}
.styles__poppins-light {
  font-family: "Poppins", Helvetica,Arial,'Arial Unicode','Lucida Sans Unicode',sans-serif;
  font-weight: 300;
}
.styles__antro-vectra-bolder,
.styles__blockquote-byline,
.styles__accent,
.wysiwyg__blockquote-byline {
  font-family: "Antro Vectra Bolder", "Brush Script MT", cursive;
}
/* END LEGACY FONT CLASSES */
/*

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.

*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 2.5rem;
}
h1,
.styles__primary-heading {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-size: var(--h1-size-rems);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  color: var(--h1-color);
}
h2,
.styles__secondary-heading {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-size: var(--h2-size-rems);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  color: var(--h2-color);
}
h3,
.styles__tertiary-heading {
  letter-spacing: 0.05555556em;
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-size: var(--h3-size-rems);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  text-transform: uppercase;
  color: var(--h3-color);
}
.themes__sutherland h3,
.themes__sutherland .styles__tertiary-heading {
  text-transform: none;
  letter-spacing: normal;
}
h4,
.styles__quaternary-heading {
  letter-spacing: 0.00714286em;
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-size: var(--h4-size-rems);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  color: var(--h4-color);
}
.themes__sutherland h4,
.themes__sutherland .styles__quaternary-heading {
  letter-spacing: normal;
}
h5,
.styles__quinary-heading {
  letter-spacing: 0.04166667em;
  font-family: var(--h5-font);
  font-size: var(--h5-size);
  font-size: var(--h5-size-rems);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  color: var(--h5-color);
}
.themes__sutherland h5,
.themes__sutherland .styles__quinary-heading {
  letter-spacing: normal;
}
h6,
.styles__senary-heading {
  letter-spacing: 0.01111111em;
  font-family: var(--h6-font);
  font-size: var(--h6-size);
  font-size: var(--h6-size-rems);
  font-weight: var(--h6-weight);
  line-height: var(--h6-line-height);
  color: var(--h6-color);
}
.themes__sutherland h6,
.themes__sutherland .styles__senary-heading {
  letter-spacing: 0.17142857em;
  text-transform: uppercase;
}
/*

Body & Paragraph 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>
````

*/
body,
.styles__body-text {
  font-family: var(--fonts-primary);
  color: var(--body-color);
}
.styles__paragraph-text--large {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.7;
  margin-top: 34px;
}
.styles__paragraph-text--small {
  letter-spacing: 0.03571429em;
  margin-top: 18px;
}
.styles__paragraph-text--caption {
  letter-spacing: 0.04166667em;
  margin-top: 14px;
}
.styles__blockquote,
.wysiwyg__blockquote {
  margin-bottom: 3.75rem;
  border-style: solid;
  border-color: #535909;
  border-width: 1px 0 0 0;
  padding-top: 1.875rem;
}
@media all and (min-width: 48em) {
  .styles__blockquote,
  .wysiwyg__blockquote {
    border-width: 0 0 0 1px;
    padding-top: 0;
    padding-left: 1.875rem;
  }
  .styles__blockquote[data-align="right"],
  .wysiwyg__blockquote[data-align="right"] {
    border-width: 0 1px 0 0;
    padding-right: 1.875rem;
    text-align: right;
  }
}
.styles__blockquote-copy,
.wysiwyg__blockquote-copy {
  font-family: var(--fonts-primary-light);
  font-weight: var(--fonts-primary-light-weight);
  font-style: normal;
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.5;
  text-transform: none;
}
.styles__blockquote-byline,
.wysiwyg__blockquote-byline {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1;
  margin-top: 2.5rem;
}
/*

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__inch-text--long,
.hierarchy__canon-text--long,
.hierarchy__meridian-text--long,
.hierarchy__tertia-text--long,
.hierarchy__paragon-text--long,
.hierarchy__columbian-text--long,
.hierarchy__normal-text--long,
.hierarchy__primer-text--long,
.hierarchy__petite-text--long,
.hierarchy__minion-text--long,
body,
.styles__body-text,
.styles__paragraph-text--small,
.styles__paragraph-text--caption {
  line-height: 1.5;
}
/*

Inch Text

*/
.hierarchy__inch-text,
.hierarchy__inch-text--long {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1.1;
}
/*

Canon Text

*/
.hierarchy__canon-text,
.hierarchy__canon-text--long {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1.125;
}
/*

Meridian Text

*/
.hierarchy__meridian-text,
.hierarchy__meridian-text--long {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.22222222;
}
/*

Tertia Text

*/
.hierarchy__tertia-text,
.hierarchy__tertia-text--long {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
}
/*

Paragon Text

*/
.hierarchy__paragon-text,
.hierarchy__paragon-text--long {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.16666667;
}
/*

Columbian Text

*/
.hierarchy__columbian-text,
.hierarchy__columbian-text--long {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.77777778;
}
/*

Normal Text

*/
.hierarchy__normal-text,
.hierarchy__normal-text--long,
body,
.styles__body-text {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.0125em;
}
/*

Primer Text

*/
.hierarchy__primer-text,
.hierarchy__primer-text--long,
.styles__paragraph-text--small {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.57142857;
}
/*

Petite Text

*/
.hierarchy__petite-text,
.hierarchy__petite-text--long,
.styles__paragraph-text--caption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
/*

Minion Text

*/
.hierarchy__minion-text,
.hierarchy__minion-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 {
  position: relative;
  font-size: 100%;
  margin: 0;
  -webkit-appearance: button;
  display: inline-block;
  cursor: pointer;
  line-height: normal;
  font-family: inherit;
}
button[disabled] {
  cursor: default;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.button__strip {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  outline: 0;
  border: none;
  overflow: visible;
  font-size: 100%;
  font-family: inherit;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-clip: padding-box;
  vertical-align: middle;
  background: transparent;
}
.button__base,
.button__primary,
.button__secondary,
.button__toggle {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  outline: 0;
  border: none;
  overflow: visible;
  font-size: 100%;
  font-family: inherit;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-clip: padding-box;
  vertical-align: middle;
  background: transparent;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.42857143;
  letter-spacing: 0.21428571em;
  padding: 10px 30px;
  position: relative;
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  border: 1px solid var(--button-primary-border-color);
  font-family: var(--button-font);
  font-weight: var(--button-weight);
  text-transform: uppercase;
  text-align: center;
  z-index: 0;
  /* necessary for hover effect */
}
.themes__sutherland .button__base,
.themes__sutherland .button__primary,
.themes__sutherland .button__secondary,
.themes__sutherland .button__toggle {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.21428571;
  letter-spacing: 0.25em;
  padding: 20.5px 61.5px;
}
.themes__default .button__base,
.themes__default .button__primary,
.themes__default .button__secondary,
.themes__default .button__toggle {
  transition: padding 0.4s ease;
}
.themes__default .button__base:after,
.themes__default .button__primary:after,
.themes__default .button__secondary:after,
.themes__default .button__toggle:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background-image: url("/wp-content/themes/lbcore/resources/icons/arrow-right-light.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.themes__default .button__base:hover:not([disabled]):not(.is-disabled),
.themes__default .button__primary:hover:not([disabled]):not(.is-disabled),
.themes__default .button__secondary:hover:not([disabled]):not(.is-disabled),
.themes__default .button__toggle:hover:not([disabled]):not(.is-disabled) {
  padding-left: 15px;
  padding-right: 45px;
}
.themes__default .button__base:hover:not([disabled]):not(.is-disabled):before,
.themes__default .button__base:hover:not([disabled]):not(.is-disabled):after,
.themes__default .button__primary:hover:not([disabled]):not(.is-disabled):before,
.themes__default .button__primary:hover:not([disabled]):not(.is-disabled):after,
.themes__default .button__secondary:hover:not([disabled]):not(.is-disabled):before,
.themes__default .button__secondary:hover:not([disabled]):not(.is-disabled):after,
.themes__default .button__toggle:hover:not([disabled]):not(.is-disabled):before,
.themes__default .button__toggle:hover:not([disabled]):not(.is-disabled):after {
  opacity: 1;
}
.themes__default .button__base:focus-visible,
.themes__default .button__base:active,
.themes__default .button__primary:focus-visible,
.themes__default .button__primary:active,
.themes__default .button__secondary:focus-visible,
.themes__default .button__secondary:active,
.themes__default .button__toggle:focus-visible,
.themes__default .button__toggle:active {
  outline: 1px solid #C5C7A7;
  border-color: #fff;
  box-shadow: 0 0 6px 2px #C5C7A7;
}
.themes__sutherland .button__base,
.themes__sutherland .button__primary,
.themes__sutherland .button__secondary,
.themes__sutherland .button__toggle {
  transition: background 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 3px;
  line-height: 1;
  padding: 26px 40px 16px;
}
.themes__sutherland .button__base svg,
.themes__sutherland .button__primary svg,
.themes__sutherland .button__secondary svg,
.themes__sutherland .button__toggle svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
}
.themes__sutherland .button__base.button--icon-right svg,
.themes__sutherland .button__primary.button--icon-right svg,
.themes__sutherland .button__secondary.button--icon-right svg,
.themes__sutherland .button__toggle.button--icon-right svg {
  margin: 0 0 0 10px;
}
.themes__sutherland .button__base.button--icon-large svg,
.themes__sutherland .button__primary.button--icon-large svg,
.themes__sutherland .button__secondary.button--icon-large svg,
.themes__sutherland .button__toggle.button--icon-large svg {
  width: 30px;
  height: 30px;
}
.themes__sutherland .button__base.button--small,
.themes__sutherland .button__primary.button--small,
.themes__sutherland .button__secondary.button--small,
.themes__sutherland .button__toggle.button--small {
  padding: 13px 26px;
}
.themes__sutherland .button__base:hover:not([disabled]):not(.is-disabled),
.themes__sutherland .button__primary:hover:not([disabled]):not(.is-disabled),
.themes__sutherland .button__secondary:hover:not([disabled]):not(.is-disabled),
.themes__sutherland .button__toggle:hover:not([disabled]):not(.is-disabled) {
  box-shadow: 0 8px 14px rgba(141, 142, 122, 0.5);
}
.themes__sutherland .button__base:focus-visible,
.themes__sutherland .button__base:active,
.themes__sutherland .button__primary:focus-visible,
.themes__sutherland .button__primary:active,
.themes__sutherland .button__secondary:focus-visible,
.themes__sutherland .button__secondary:active,
.themes__sutherland .button__toggle:focus-visible,
.themes__sutherland .button__toggle:active {
  outline: 1px solid #6E6259;
  outline-offset: 4px;
}
.button__base[disabled],
.button__base .is-disabled,
.button__base.is-disabled,
.button__primary[disabled],
.button__primary .is-disabled,
.button__primary.is-disabled,
.button__secondary[disabled],
.button__secondary .is-disabled,
.button__secondary.is-disabled,
.button__toggle[disabled],
.button__toggle .is-disabled,
.button__toggle.is-disabled {
  transition: none;
  cursor: not-allowed;
}
.button__base[disabled]:before,
.button__base .is-disabled:before,
.button__base.is-disabled:before,
.button__base[disabled]:after,
.button__base .is-disabled:after,
.button__base.is-disabled:after,
.button__primary[disabled]:before,
.button__primary .is-disabled:before,
.button__primary.is-disabled:before,
.button__primary[disabled]:after,
.button__primary .is-disabled:after,
.button__primary.is-disabled:after,
.button__secondary[disabled]:before,
.button__secondary .is-disabled:before,
.button__secondary.is-disabled:before,
.button__secondary[disabled]:after,
.button__secondary .is-disabled:after,
.button__secondary.is-disabled:after,
.button__toggle[disabled]:before,
.button__toggle .is-disabled:before,
.button__toggle.is-disabled:before,
.button__toggle[disabled]:after,
.button__toggle .is-disabled:after,
.button__toggle.is-disabled:after {
  display: none;
}
/*

Button Icon Classes (defaults to right arrow)

*/
.button__icon--plus:after {
  background-image: url("/wp-content/themes/lbcore/resources/icons/plus-icon.svg");
}
.button__icon--minus:after {
  background-image: url("/wp-content/themes/lbcore/resources/icons/minus-icon.svg");
}
.button__icon--check:after {
  background-image: url("/wp-content/themes/lbcore/resources/icons/checkmark.svg") !important;
}
/*

Button Variations

*/
.themes__default .button__primary:before {
  background-image: linear-gradient(224deg, #767676 0%, #0F1002 100%);
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.themes__default .button__primary:focus {
  background: #767676;
}
.themes__sutherland .button__primary:hover {
  background: #31261D;
}
.themes__sutherland .button__primary:hover[disabled],
.themes__sutherland .button__primary:hover .is-disabled,
.themes__sutherland .button__primary:hover.is-disabled {
  background: var(--button-primary-disabled-background);
}
.button__primary[disabled],
.button__primary .is-disabled,
.button__primary.is-disabled {
  border-color: transparent;
  background: var(--button-primary-disabled-background);
}
.button__primary[disabled].is-loading,
.button__primary .is-disabled.is-loading,
.button__primary.is-disabled.is-loading {
  border-color: #767676;
  color: #767676;
  background: #fff;
}
.button__secondary {
  color: var(--button-secondary-color);
  background: var(--button-secondary-background);
}
.themes__default .button__secondary:before {
  border-image: linear-gradient(224deg, #C5C7A7 0%, #0F1002 100%) 1;
  border-style: solid;
  border-width: 1px;
  content: "";
  opacity: 0;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: block;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.themes__default .button__secondary:after {
  background-image: url("/wp-content/themes/lbcore/resources/icons/arrow-right-dark.svg");
}
.button__secondary[disabled],
.button__secondary .is-disabled,
.button__secondary.is-disabled {
  border-color: rgba(15, 16, 2, 0.3);
  color: rgba(15, 16, 2, 0.3);
}
.button__no-button {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  outline: 0;
  border: none;
  overflow: visible;
  font-size: 100%;
  font-family: inherit;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-clip: padding-box;
  vertical-align: middle;
  background: transparent;
}
.button__no-icon:hover {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.button__no-icon.button__small:hover {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.button__no-icon:after {
  display: none;
}
.button__utility {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #C5C7A7;
  font-size: 24px;
  border: 1px solid transparent;
  background: transparent;
  position: relative;
  transform: translateY(-18px);
}
.themes__sutherland .button__utility {
  color: #6E6259;
}
.button__utility--round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: #C5C7A7;
  font-size: 24px;
  border: 1px solid transparent;
  background: transparent;
  position: relative;
  transform: translateY(-18px);
  border-radius: 50%;
}
.themes__sutherland .button__utility--round {
  color: #6E6259;
}
.button__toggle {
  color: var(--button-secondary-color);
  background: var(--button-secondary-background);
  will-change: background-color, color;
  transition: padding 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}
.button__toggle.is-current,
.button__toggle:hover:not([disabled]):not(.is-disabled),
.button__toggle:focus {
  color: var(--button-primary-color);
  background-color: var(--button-primary-background);
}
.button__toggle.is-current:before,
.button__toggle:hover:not([disabled]):not(.is-disabled):before,
.button__toggle:focus:before,
.button__toggle.is-current:after,
.button__toggle:hover:not([disabled]):not(.is-disabled):after,
.button__toggle:focus:after {
  opacity: 0;
}
.button__toggle.is-current,
.button__toggle:hover:not([disabled]):not(.is-disabled) {
  padding-left: 15px;
  padding-right: 45px;
}
.themes__sutherland .button__toggle.is-current,
.themes__sutherland .button__toggle:hover:not([disabled]):not(.is-disabled) {
  padding-left: 25px;
  padding-right: 55px;
}
.button__toggle[disabled],
.button__toggle .is-disabled,
.button__toggle.is-disabled {
  border-color: rgba(15, 16, 2, 0.3);
  background-color: #fff;
  color: rgba(15, 16, 2, 0.3);
}
.themes__sutherland .button__toggle[disabled],
.themes__sutherland .button__toggle .is-disabled,
.themes__sutherland .button__toggle.is-disabled {
  border-color: rgba(110, 98, 89, 0.3);
  color: rgba(110, 98, 89, 0.3);
}
.button__toggle[disabled].is-current,
.button__toggle .is-disabled.is-current,
.button__toggle.is-disabled.is-current,
.button__toggle[disabled]:focus,
.button__toggle .is-disabled:focus,
.button__toggle.is-disabled:focus {
  color: #fff;
  border-color: transparent;
  background: rgba(15, 16, 2, 0.3);
}
.themes__sutherland .button__toggle[disabled].is-current,
.themes__sutherland .button__toggle .is-disabled.is-current,
.themes__sutherland .button__toggle.is-disabled.is-current,
.themes__sutherland .button__toggle[disabled]:focus,
.themes__sutherland .button__toggle .is-disabled:focus,
.themes__sutherland .button__toggle.is-disabled:focus {
  background: rgba(110, 98, 89, 0.3);
}
.button__no-button {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}
.button__no-button:hover,
.button__no-button:focus,
.button__no-button.is-current {
  background: transparent;
  color: inherit;
}
.button__full-width {
  width: 100%;
}
.button__small {
  padding-left: 20px;
  padding-right: 20px;
}
.button__small:after {
  display: none;
}
.button__small.button__no-icon:hover:not([disabled]):not(.is-disabled) {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
summary[class*="button__"] svg {
  position: absolute;
  top: 50%;
  right: 1.875rem;
  transform: translateY(-50%) rotate(0);
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
details[open] summary[class*="button__"] svg {
  transform: translateY(-50%) rotate(-180deg);
}
/*

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;
}
.links__link,
.links__link--inverse,
.links__link--inverted,
.wysiwyg a:not([class*="button"]),
.wysiwyg__gutenberg > p a:not([class*="button"]) {
  font-family: var(--link-font);
  font-weight: var(--link-weight);
  color: var(--link-color);
  text-decoration: none;
  letter-spacing: var(--link-letter-spacing);
  padding-bottom: 3px;
  position: relative;
}
.themes__default .links__link:after,
.themes__default .links__link--inverse:after,
.themes__default .links__link--inverted:after,
.themes__default .wysiwyg a:not([class*="button"]):after,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]):after {
  content: "";
  position: absolute;
  background: #C5C7A7;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  transition: left 0.25s, right 0.25s;
}
.themes__default .links__link:hover:after,
.themes__default .links__link--inverse:hover:after,
.themes__default .links__link--inverted:hover:after,
.themes__default .wysiwyg a:not([class*="button"]):hover:after,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]):hover:after {
  left: 25%;
  right: 25%;
  background: #535909;
}
.themes__default .links__link:focus,
.themes__default .links__link.is-current,
.themes__default .links__link--inverse:focus,
.themes__default .links__link--inverse.is-current,
.themes__default .links__link--inverted:focus,
.themes__default .links__link--inverted.is-current,
.themes__default .wysiwyg a:not([class*="button"]):focus,
.themes__default .wysiwyg a:not([class*="button"]).is-current,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]):focus,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]).is-current {
  color: #001433;
}
.themes__default .links__link[disabled],
.themes__default .links__link .is-disabled,
.themes__default .links__link.is-disabled,
.themes__default .links__link--inverse[disabled],
.themes__default .links__link--inverse .is-disabled,
.themes__default .links__link--inverse.is-disabled,
.themes__default .links__link--inverted[disabled],
.themes__default .links__link--inverted .is-disabled,
.themes__default .links__link--inverted.is-disabled,
.themes__default .wysiwyg a:not([class*="button"])[disabled],
.themes__default .wysiwyg a:not([class*="button"]) .is-disabled,
.themes__default .wysiwyg a:not([class*="button"]).is-disabled,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"])[disabled],
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]) .is-disabled,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]).is-disabled {
  cursor: not-allowed;
  color: rgba(15, 16, 2, 0.3);
}
.themes__default .links__link[disabled]:hover:after,
.themes__default .links__link .is-disabled:hover:after,
.themes__default .links__link.is-disabled:hover:after,
.themes__default .links__link--inverse[disabled]:hover:after,
.themes__default .links__link--inverse .is-disabled:hover:after,
.themes__default .links__link--inverse.is-disabled:hover:after,
.themes__default .links__link--inverted[disabled]:hover:after,
.themes__default .links__link--inverted .is-disabled:hover:after,
.themes__default .links__link--inverted.is-disabled:hover:after,
.themes__default .wysiwyg a:not([class*="button"])[disabled]:hover:after,
.themes__default .wysiwyg a:not([class*="button"]) .is-disabled:hover:after,
.themes__default .wysiwyg a:not([class*="button"]).is-disabled:hover:after,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"])[disabled]:hover:after,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]) .is-disabled:hover:after,
.themes__default .wysiwyg__gutenberg > p a:not([class*="button"]).is-disabled:hover:after {
  left: 0;
  right: 0;
  background: #C5C7A7;
}
.themes__sutherland .links__link,
.themes__sutherland .links__link--inverse,
.themes__sutherland .links__link--inverted,
.themes__sutherland .wysiwyg a:not([class*="button"]),
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]) {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.14285714;
  display: flex;
  align-items: center;
  border-radius: 3px;
  text-transform: uppercase;
}
.themes__sutherland .links__link::after,
.themes__sutherland .links__link--inverse::after,
.themes__sutherland .links__link--inverted::after,
.themes__sutherland .wysiwyg a:not([class*="button"])::after,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"])::after {
  content: none;
}
.themes__sutherland .links__link .icons__icon,
.themes__sutherland .links__link--inverse .icons__icon,
.themes__sutherland .links__link--inverted .icons__icon,
.themes__sutherland .wysiwyg a:not([class*="button"]) .icons__icon,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]) .icons__icon {
  margin-top: -2px;
  margin-left: 0.625rem;
}
.themes__sutherland .links__link:hover,
.themes__sutherland .links__link--inverse:hover,
.themes__sutherland .links__link--inverted:hover,
.themes__sutherland .wysiwyg a:not([class*="button"]):hover,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]):hover {
  text-decoration: underline;
}
.themes__sutherland .links__link:hover .icons__icon,
.themes__sutherland .links__link--inverse:hover .icons__icon,
.themes__sutherland .links__link--inverted:hover .icons__icon,
.themes__sutherland .wysiwyg a:not([class*="button"]):hover .icons__icon,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]):hover .icons__icon {
  transform: translateX(5px);
}
.themes__sutherland .links__link:focus-visible,
.themes__sutherland .links__link--inverse:focus-visible,
.themes__sutherland .links__link--inverted:focus-visible,
.themes__sutherland .wysiwyg a:not([class*="button"]):focus-visible,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]):focus-visible {
  outline: 1px solid #6E6259;
  outline-offset: 4px;
}
.themes__sutherland .links__link[disabled],
.themes__sutherland .links__link .is-disabled,
.themes__sutherland .links__link.is-disabled,
.themes__sutherland .links__link--inverse[disabled],
.themes__sutherland .links__link--inverse .is-disabled,
.themes__sutherland .links__link--inverse.is-disabled,
.themes__sutherland .links__link--inverted[disabled],
.themes__sutherland .links__link--inverted .is-disabled,
.themes__sutherland .links__link--inverted.is-disabled,
.themes__sutherland .wysiwyg a:not([class*="button"])[disabled],
.themes__sutherland .wysiwyg a:not([class*="button"]) .is-disabled,
.themes__sutherland .wysiwyg a:not([class*="button"]).is-disabled,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"])[disabled],
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]) .is-disabled,
.themes__sutherland .wysiwyg__gutenberg > p a:not([class*="button"]).is-disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.links__link--inverse {
  color: #fff;
}
.links__link--inverse:focus,
.links__link--inverse.is-current {
  color: #fff;
}
.links__link--inverse:focus:after,
.links__link--inverse.is-current:after,
.links__link--inverse:hover:after {
  background: #C5C7A7;
}
.links__link--inverse[disabled] {
  color: rgba(255, 255, 255, 0.3);
}
.links__inline {
  display: inline !important;
}
.links__small {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.57142857;
}
.themes__sutherland .links__small {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.links__link--inverted {
  color: #fff;
}
.links__link--inverted:hover,
.links__link--inverted:focus {
  color: #C5C7A7;
}
.links__link--inverted[disabled] {
  cursor: not-allowed;
  color: rgba(15, 16, 2, 0.3);
}
.links__link--inverted[disabled]:hover:after {
  left: 0;
  right: 0;
  background: #C5C7A7;
}
/*

Unlink

Basic class to remove some link styling.

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

*/
.links__unlink {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  padding: 0;
  position: relative;
}
.links__unlink:after {
  display: none;
}
.links__unlink:hover:after {
  display: none;
}
.links__unlink:focus,
.links__unlink.is-current {
  color: inherit;
}
/*

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

Link Overlay

Useful when you need an anchor tag to be clickable around an group of elements and you'd prefer the anchor tag not be the container for those elements.

Example:
===
<div class="presentational__relative-container">
  <a class="links__overlay" href="#"></a>
  <figure>
    <img src="http://placehold.it/500x500" alt="Descriptive alt text.">
    <figcaption>
      This is the caption for my image.
    </figcaption>
  </figure>
</div>

*/
.links__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.links__overlay:after {
  display: none;
}
/* large links */
.links__large {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 0.88888889;
  letter-spacing: 2.25px;
}
/*
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,
.wysiwyg__gutenberg {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 62em) {
  .wrappers__wrapper,
  .wysiwyg__gutenberg {
    max-width: 1240px;
  }
}
.wrappers__break-out {
  width: calc(100% + (8.139534883720932% * 2));
  position: relative;
  left: -8.139534883720932%;
}
@media all and (min-width: 90.11627906976744em) {
  .wrappers__break-out {
    width: calc(100% + ((100vw - 1240px)));
    left: calc(((100vw - 1240px)) / -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;
}
/*

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,
.button__primary.loaded {
  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,
.button__primary.loaded.focusable:active,
.button__primary.loaded.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,
body:hover .button__primary.loaded a,
body:hover .button__primary.loaded input,
body:hover .button__primary.loaded button {
  display: none;
}
.presentational__is-hidden-short {
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
.presentational__is-hidden-test {
  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-test.focusable:active,
.presentational__is-hidden-test.focusable:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  position: static;
}
body:hover .presentational__is-hidden-test a,
body:hover .presentational__is-hidden-test input,
body:hover .presentational__is-hidden-test 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;
}
.presentational__display-none {
  display: none;
}
.presentational__display-block {
  display: block;
}
.presentational__absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*

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.75rem;
  margin-right: -0.75rem;
  /* 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.75rem;
  padding-right: 0.75rem;
  /* 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.75rem;
    margin-right: -0.75rem;
  }
  [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.75rem;
    padding-right: 0.75rem;
  }
  .grid__sm-quarter,
  .grid__sm-quarters > * {
    width: 25%;
  }
  .grid__sm-third,
  .grid__sm-thirds > * {
    width: 33.33333%;
  }
  .grid__sm-half,
  .grid__sm-halves > * {
    width: 50%;
  }
  .grid__sm-two-thirds {
    width: 66.66667%;
  }
  .grid__sm-three-quarters {
    width: 75%;
  }
  .grid__sm-full {
    width: 100%;
  }
  .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;
  }
  .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-2of8"],
  .grid__med-quarters > * {
    width: 25%;
  }
  .grid__med-third,
  [class*="grid__med-3of9"],
  [class*="grid__med-2of6"],
  .grid__med-thirds > * {
    width: 33.33333%;
  }
  .grid__med-half,
  [class*="grid__med-4of8"],
  [class*="grid__med-3of6"],
  .grid__med-halves > * {
    width: 50%;
  }
  .grid__med-two-thirds,
  [class*="grid__med-6of9"],
  [class*="grid__med-4of6"] {
    width: 66.66667%;
  }
  .grid__med-three-quarters,
  [class*="grid__med-6of8"] {
    width: 75%;
  }
  .grid__med-full {
    width: 100%;
  }
  [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;
  }
}
.wysiwyg h1 {
  color: var(--h1-color);
}
.wysiwyg h2 {
  color: var(--h2-color);
}
.wysiwyg h3 {
  color: var(--h3-color);
}
.wysiwyg h4 {
  color: var(--h4-color);
}
.wysiwyg h5 {
  color: var(--h5-color);
}
.wysiwyg h6 {
  color: var(--h6-color);
}
.wysiwyg a:not([class*="button"]) {
  color: #535909;
}
.wysiwyg a:not([class*="button"]):hover,
.wysiwyg a:not([class*="button"]):active,
.wysiwyg a:not([class*="button"]):focus {
  color: #535909;
}
.wysiwyg br {
  display: none;
}
.wysiwyg img.alignright,
.wysiwyg figure.alignright {
  float: right;
}
.wysiwyg img.alignleft,
.wysiwyg figure.alignleft {
  float: left;
}
@media all and (min-width: 48em) {
  .wysiwyg__blockquote {
    width: 50%;
    margin-right: 1.875rem;
    float: left;
  }
  .textImage__wysiwyg .wysiwyg__blockquote {
    width: 100%;
    margin-right: 0;
  }
  .wysiwyg__blockquote[data-float="right"] {
    float: right;
    margin-right: 0;
    margin-left: 1.875rem;
  }
  .textImage__wysiwyg .wysiwyg__blockquote[data-float="right"] {
    margin-left: 0;
  }
}
@media all and (min-width: 48em) {
  .wysiwyg__gutenberg > h1,
  .wysiwyg__gutenberg > h2,
  .wysiwyg__gutenberg > h3,
  .wysiwyg__gutenberg > h4,
  .wysiwyg__gutenberg > h5,
  .wysiwyg__gutenberg > h5,
  .wysiwyg__gutenberg > p,
  .wysiwyg__gutenberg > ul,
  .wysiwyg__gutenberg > ol,
  .wysiwyg__gutenberg > .ctaButtons,
  .wysiwyg__gutenberg > .blockquote__wrapper {
    padding-left: calc(((100% + 1.875rem) / 12) * 1);
    padding-right: calc(((100% + 1.875rem) / 12) * 1);
  }
}
@media all and (min-width: 62em) {
  .wysiwyg__gutenberg > h1,
  .wysiwyg__gutenberg > h2,
  .wysiwyg__gutenberg > h3,
  .wysiwyg__gutenberg > h4,
  .wysiwyg__gutenberg > h5,
  .wysiwyg__gutenberg > h5,
  .wysiwyg__gutenberg > p,
  .wysiwyg__gutenberg > ul,
  .wysiwyg__gutenberg > ol,
  .wysiwyg__gutenberg > .ctaButtons,
  .wysiwyg__gutenberg > .blockquote__wrapper {
    padding-left: calc(((100% + 1.875rem) / 12) * 2);
    padding-right: calc(((100% + 1.875rem) / 12) * 2);
  }
}
.wysiwyg__gutenberg > .wp-block-table td {
  border: none;
}
.wysiwyg__gutenberg > .wp-block-image {
  padding: 0 !important;
}
.wysiwyg__gutenberg > .wp-block-image img {
  display: block;
}
.wysiwyg__gutenberg > .wp-block-image figcaption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.wysiwyg__gutenberg > .wp-block-image figcaption:after {
  content: "";
  display: block;
  flex: 1 0 25%;
  min-width: 25%;
  height: 1px;
  margin-left: 0.9375rem;
  margin-top: 10px;
  background: #C5C7A7;
}
.wysiwyg__gutenberg > .wp-block-image.aligncenter {
  display: block;
}
.wysiwyg__gutenberg > .wp-block-image.aligncenter img {
  margin: 0 auto;
}
.wysiwyg__gutenberg > .wp-block-image.alignright,
.wysiwyg__gutenberg > .wp-block-image.alignleft,
.wysiwyg__gutenberg > .wp-block-image img.alignright,
.wysiwyg__gutenberg > .wp-block-image img.alignleft {
  float: none;
  margin: 2.5rem 0 1.25rem;
}
@media all and (min-width: 48em) {
  .wysiwyg__gutenberg > .wp-block-image.alignright,
  .wysiwyg__gutenberg > .wp-block-image.alignleft,
  .wysiwyg__gutenberg > .wp-block-image img.alignright,
  .wysiwyg__gutenberg > .wp-block-image img.alignleft {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media all and (min-width: 48em) {
  .wysiwyg__gutenberg > .wp-block-image.alignright,
  .wysiwyg__gutenberg > .wp-block-image img.alignright {
    float: right;
    margin-left: 1.875rem;
    margin-right: calc(((100% + 1.875rem) / 12) * 1);
  }
}
.wysiwyg__gutenberg > .wp-block-image.alignright figcaption,
.wysiwyg__gutenberg > .wp-block-image img.alignright figcaption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.wysiwyg__gutenberg > .wp-block-image.alignright figcaption:after,
.wysiwyg__gutenberg > .wp-block-image img.alignright figcaption:after {
  content: "";
  display: block;
  flex: 1 0 25%;
  min-width: 25%;
  height: 1px;
  margin-left: 0.9375rem;
  margin-top: 10px;
  background: #C5C7A7;
}
@media all and (min-width: 48em) {
  .wysiwyg__gutenberg > .wp-block-image.alignright figcaption,
  .wysiwyg__gutenberg > .wp-block-image img.alignright figcaption {
    flex-direction: row-reverse;
    text-align: right;
  }
  .wysiwyg__gutenberg > .wp-block-image.alignright figcaption:after,
  .wysiwyg__gutenberg > .wp-block-image img.alignright figcaption:after {
    margin-right: 0.9375rem;
    margin-left: 0;
  }
}
@media all and (min-width: 48em) {
  .wysiwyg__gutenberg > .wp-block-image.alignleft,
  .wysiwyg__gutenberg > .wp-block-image img.alignleft {
    float: left;
    margin-right: 1.875rem;
    margin-left: calc(((100% + 1.875rem) / 12) * 1);
  }
}
.wysiwyg__gutenberg > .wp-block-image.alignleft figcaption,
.wysiwyg__gutenberg > .wp-block-image img.alignleft figcaption {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.wysiwyg__gutenberg > .wp-block-image.alignleft figcaption:after,
.wysiwyg__gutenberg > .wp-block-image img.alignleft figcaption:after {
  content: "";
  display: block;
  flex: 1 0 25%;
  min-width: 25%;
  height: 1px;
  margin-left: 0.9375rem;
  margin-top: 10px;
  background: #C5C7A7;
}
.wysiwyg__gutenberg > .wp-block-image.alignleft,
.wysiwyg__gutenberg > .wp-block-image.alignright {
  margin-bottom: 1.25rem;
}
.wysiwyg__gutenberg [class*="wp-block"] {
  padding: 2.5rem 0;
}
.wysiwyg__gutenberg [class*="wp-block"] + [class*="wp-block"] {
  padding-top: 1.25rem;
}
/*

Unstyled List

A basic stripping of list styles.

*/
.lists__unstyled,
.lists__horizontal {
  padding-left: 0;
  list-style: none outside none;
}
/* Perennials list styles */
.lists__ordered,
.wysiwyg ol,
.wysiwyg__gutenberg > ol,
ol {
  list-style: none;
  counter-reset: lists__ordered-list;
  padding: 0;
}
.lists__ordered li,
.wysiwyg ol li,
.wysiwyg__gutenberg > ol li,
ol li {
  counter-increment: lists__ordered-list;
  padding-left: 30px;
  margin-top: 1.25rem;
  position: relative;
}
.lists__ordered li:before,
.wysiwyg ol li:before,
.wysiwyg__gutenberg > ol li:before,
ol li:before {
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
  content: counter(lists__ordered-list);
  color: #535909;
  position: absolute;
  left: 0;
}
.lists__ordered--nested-alpha li > ol {
  list-style: none;
  padding: 0;
  counter-reset: lists__ordered-list-alpha;
}
.lists__ordered--nested-alpha li > ol li {
  counter-increment: lists__ordered-list-alpha;
  padding-left: 30px;
  margin-top: 1.25rem;
  position: relative;
}
.lists__ordered--nested-alpha li > ol li:before {
  font-family: var(--fonts-primary-bold);
  font-weight: var(--fonts-primary-bold-weight);
  font-style: normal;
  content: counter(lists__ordered-list-alpha, lower-alpha);
  color: #535909;
  position: absolute;
  left: 0;
}
.lists__unordered,
.wysiwyg ul,
.wysiwyg__gutenberg > ul,
ul {
  list-style: none;
  padding: 0;
}
.lists__unordered li,
.wysiwyg ul li,
.wysiwyg__gutenberg > ul li,
ul li {
  margin-top: 1.25rem;
  padding-left: 30px;
  position: relative;
}
.lists__unordered li:before,
.wysiwyg ul li:before,
.wysiwyg__gutenberg > ul li:before,
ul li:before {
  content: "";
  color: #535909;
  display: block;
  position: absolute;
  height: 15px;
  width: 15px;
  background-image: url("/wp-content/themes/lbcore/resources/icons/asterisk.svg");
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  top: 5px;
}
/*

Horizontal List

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

*/
.lists__horizontal li {
  display: inline;
}
.lists__horizontal a {
  display: inline-block;
}
.lists__definition {
  margin: 0;
}
.lists__definition dd,
.lists__definition dt {
  display: inline-block;
}
.lists__definition dd {
  margin-left: 0;
}
/*# sourceMappingURL=perennials.css.map */