/**
 * Motif v4.0.0
 * A responsive front-end framework to tell *your* story
 * http://getmotif.com
 */
/**
 * Global Stylesheet
 * The site's main (and perhaps only) stylesheet. All supporting stylesheet 
 * files are imported into and compiled from here.
 */
/*

Dynamic Responsive Image

*/
@import url("https://use.typekit.net/tcl4dol.css");
.m-images__image-as-bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
.no-objectfit .m-images__image-as-bg {
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.js-rellax {
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.m-animate__remove {
  opacity: 1;
}
.m-animate__remove.in-view {
  -webkit-animation-name: none;
          animation-name: none;
  -webkit-animation-duration: 0ms;
          animation-duration: 0ms;
  -webkit-animation-timing-function: unset;
          animation-timing-function: unset;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}
.in-view .m-animate__remove {
  -webkit-animation-name: none;
          animation-name: none;
  -webkit-animation-duration: 0ms;
          animation-duration: 0ms;
  -webkit-animation-timing-function: unset;
          animation-timing-function: unset;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}
@-webkit-keyframes animate__in {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes animate__in {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes animate__in--left {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes animate__in--left {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes animate__in--right {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes animate__in--right {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes animate__in--scale-up {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes animate__in--scale-up {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes animate__bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate__bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
/**
 * Normalize
 * Using the Normalize.css (http://necolas.github.io/normalize.css/) with only minor modification.
 */
/*

HTML5 Display Definitions

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

The majority will be displayed `block`.

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

Type

*/
/*

HTML Font Size Adjust

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

*/
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
abbr[title] {
  border: none;
}
i,
cite,
address {
  font-style: normal;
}
dfn {
  font-style: italic;
}
b {
  font-weight: normal;
}
strong {
  font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
menu,
ul,
ol,
dl,
table,
figure {
  /* Display & Box Model */
  margin: 1.25rem 0 0 0;
  /* Other */
  font-size: 1em;
}
menu,
ol,
ul {
  padding-left: 2.5em;
}
li ul,
li ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
dd {
  margin-left: 2.5em;
}
blockquote {
  padding: 1.25em 2.5em;
}
blockquote > :first-child {
  margin-top: 0;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
small {
  font-size: 1em;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/*

Unstyled List

A basic stripping of list styles.

*/
.lists__unstyled,
.lists__horizontal,
.lists__horizontal--forceful,
.lists__horizontal--links,
.lists__horizontal--pgs,
.lists__breadcrumb-list,
.lists__horizontal--buttons {
  padding-left: 0;
  list-style: none outside none;
}
.lists__unstyled dd {
  margin-left: 0;
}
/*

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,
.lists__horizontal--links li,
.lists__horizontal--pgs li,
.lists__breadcrumb-list li,
.lists__horizontal--buttons li {
  display: inline;
}
.lists__horizontal a,
.lists__horizontal--links a,
.lists__horizontal--pgs a,
.lists__breadcrumb-list a,
.lists__horizontal--buttons a {
  display: inline-block;
}
/*

Horizontal List (Forceful)

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

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

Link List

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

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

*/
.lists__horizontal--links a {
  margin-right: 30px;
}
.lists__horizontal--links li:last-child a {
  margin-right: 0;
}
/*

Pagination

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

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

Breadcrumb

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

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

*/
.lists__breadcrumb {
  margin-top: 1em;
}
.lists__breadcrumb-label {
  margin: 0 0.625rem 0 0;
  float: left;
}
.lists__breadcrumb-list {
  margin: 0;
  float: left;
}
.lists__breadcrumb-list li {
  margin-right: 0.625rem;
}
/*

Button List

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

*/
.lists__horizontal--buttons {
  margin-top: 0;
  overflow: hidden;
}
.lists__horizontal--buttons li {
  display: block;
  float: left;
}
.lists__horizontal--buttons a {
  display: block;
}
/*

Ratios

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

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

The `.ratios__` dimension class is placed on a wrapping element, with 
its child contents wrapped by the `.ratios__content` class.

    <div class="ratios__square">
        <div class="ratios__content">
            ...
        </div>
    </div>

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

    <div class="ratios__video">
        <iframe src="http://youtube.com/myVidEmbed"></iframe>
    </div>

*/
.ratios__base:before,
.ratios__video:before,
.ratios__1x1:before,
.ratios__square:before,
.ratios__2x1:before,
.ratios__3x2:before,
.ratios__1x2:before,
.ratios__4x3:before,
.ratios__16x9:before,
.ratios__9x16:before,
.ratios__map:before,
.steppedContent__step-figure:before,
.imageSlider__controls:before,
.carousel__slide-img-wrap:before,
.carousel__controls:before,
.headerPerson__figure:before,
.eventsSlider__slide .dropdownContent__featured-card:before,
.card__figure:before,
.cardProfileModal__figure:before,
.calCardFull__figure:before,
.cardProfile__ratio:before,
.profileModalContent__headshot-ratio:before,
.pageModalContent__headshot-ratio:before,
[data-media-size="half"] .calendarHeader__figure:before {
  content: "";
}
.ratios__video:before {
  padding-top: 56.25%;
}
.ratios__1x1:before,
.ratios__square:before {
  padding-top: 100%;
}
.ratios__2x1:before {
  padding-top: 50%;
}
.ratios__3x2:before {
  padding-top: 66.66666667%;
}
.ratios__1x2:before {
  padding-top: 200%;
}
.ratios__4x3:before {
  padding-top: 75%;
}
.ratios__16x9:before {
  padding-top: 56.25%;
}
.ratios__9x16:before {
  padding-top: 177.77777778%;
}
.ratios__content,
.ratios__video > iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.ratios__map:before {
  padding-top: 73.33333333%;
}
/*

Figures

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

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

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

*/
.media__figure,
[class*="media__figure--"] {
  margin-top: 1em;
}
@media all and (min-width: 30em) {
  [class*="media__figure--"] {
    margin-top: 0;
    max-width: 50%;
  }
  .media__figure--left,
  .media__figure--right {
    padding-bottom: 0.625rem;
  }
  .media__figure--left {
    float: left;
    padding-right: 2.5rem;
  }
  .media__figure--right {
    float: right;
    padding-left: 2.5rem;
  }
}
.icons__icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: text-bottom;
  fill: currentColor;
}
.no-svg .icons__icon {
  display: none;
}
svg.is-round {
  border-radius: 50%;
}
svg:not(:root) {
  overflow: hidden;
}
img {
  max-width: 100%;
  border: 0;
}
.lte7 img {
  -ms-interpolation-mode: bicubic;
}
.images__figure-ratio {
  position: relative;
  width: 100%;
  margin: 0;
}
.images__figure-ratio:before {
  content: '';
  width: 100%;
  display: block;
}
.images__image-as-bg,
.images__figure-ratio img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
.no-objectfit .images__image-as-bg,
.no-objectfit .images__figure-ratio img {
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.images__figure-as-bg--contain,
.images__figure-as-bg--bottom,
.images__figure-as-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  margin: 0;
}
.images__figure-as-bg--contain img,
.images__figure-as-bg--bottom img,
.images__figure-as-bg img,
.images__figure-as-bg--contain video,
.images__figure-as-bg--bottom video,
.images__figure-as-bg video,
.images__figure-as-bg--contain .video,
.images__figure-as-bg--bottom .video,
.images__figure-as-bg .video,
.images__figure-as-bg--contain iframe,
.images__figure-as-bg--bottom iframe,
.images__figure-as-bg iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}
.no-objectfit .images__figure-as-bg--contain img,
.no-objectfit .images__figure-as-bg--bottom img,
.no-objectfit .images__figure-as-bg img,
.no-objectfit .images__figure-as-bg--contain video,
.no-objectfit .images__figure-as-bg--bottom video,
.no-objectfit .images__figure-as-bg video,
.no-objectfit .images__figure-as-bg--contain .video,
.no-objectfit .images__figure-as-bg--bottom .video,
.no-objectfit .images__figure-as-bg .video,
.no-objectfit .images__figure-as-bg--contain iframe,
.no-objectfit .images__figure-as-bg--bottom iframe,
.no-objectfit .images__figure-as-bg iframe {
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.images__figure-as-bg--contain img {
  -o-object-fit: contain;
     object-fit: contain;
}
.images__figure-as-bg--contain img {
  background-position: center bottom;
}
figure img.js-dynamic-image {
  transition: opacity 250ms ease-in-out;
}
figure img.lazyload {
  opacity: 0;
}
figure img.lazyloaded {
  opacity: 1;
}
audio,
canvas,
video {
  display: inline-block;
}
.lte7 audio,
.lte7 canvas,
.lte7 video {
  display: inline;
  zoom: 1;
}
/*

Audio

From Normalize.css:

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

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

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

*/
/* Imported Google Fonts
==========================*/
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v19/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhcMWUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v19/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v19/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduh8MKUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v19/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhycKUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v19/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhh8KUBw.ttf) format('truetype');
}
/* Imported Typekit Fonts
- Source Serif Pro
- Trade Gothic Next Compressed
- Trade Gothic Next Condensed
==========================*/
@font-face {
  font-family: 'Bodoni Std';
  src: url('https://cmhof.imgix.net/fonts/BodoniStd/BodoniStd-PosterItalic.woff2') format('woff2'), url('https://cmhof.imgix.net/fonts/BodoniStd/BodoniStd-PosterItalic.woff') format('woff'), url('https://cmhof.imgix.net/fonts/BodoniStd/BodoniStd-PosterItalic.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sequel100Wide';
  src: url('https://cmhof.imgix.net/fonts/Sequel100Wide/Sequel100Wide-75.woff2') format('woff2'), url('https://cmhof.imgix.net/fonts/Sequel100Wide/Sequel100Wide-75.woff') format('woff'), url('https://cmhof.imgix.net/fonts/Sequel100Wide/Sequel100Wide-75.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/*

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__primary,
.styles__primary--bold,
body,
.styles__body-text,
.styles__paragraph--large,
.styles__paragraph--regular,
.styles__paragraph--small,
.links__inline,
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select,
.wysiwyg p,
.wysiwyg--small p,
p a:not(.button__primary):not(.button__secondary):not(.links__link),
.elements__input-hint,
.elements__input-desc,
[class*="messaging__input-alert"],
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link),
.museumInfo__hours-label,
.museumInfo__hours-time {
  font-family: source-serif-pro, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-style: normal;
}
.styles__primary,
body,
.styles__body-text,
.styles__paragraph--large,
.styles__paragraph--regular,
.styles__paragraph--small,
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select,
.wysiwyg p,
.wysiwyg--small p,
.elements__input-hint,
.elements__input-desc,
[class*="messaging__input-alert"],
.museumInfo__hours-label,
.museumInfo__hours-time {
  font-weight: 400;
}
.styles__primary--bold,
.links__inline,
p a:not(.button__primary):not(.button__secondary):not(.links__link),
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link) {
  font-weight: 700;
}
.styles__heading,
.styles__secondary--compressed,
.styles__secondary--condensed,
h1,
h2,
h3,
h4,
h5,
.styles__h1,
.styles__h1--long,
.styles__h2,
.styles__h2--long,
.styles__h3,
.styles__h4,
.styles__h5,
.styles__h6,
.styles__h7,
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6,
.fullImage__figure:not([data-overlay=""]):after {
  font-weight: 800;
  font-style: normal;
}
.styles__secondary--compressed {
  font-family: trade-gothic-next-compressed, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.styles__heading,
.styles__secondary--condensed,
h1,
h2,
h3,
h4,
h5,
.styles__h1,
.styles__h1--long,
.styles__h2,
.styles__h2--long,
.styles__h3,
.styles__h4,
.styles__h5,
.styles__h6,
.styles__h7,
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6,
.fullImage__figure:not([data-overlay=""]):after {
  font-family: trade-gothic-next-condensed, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.styles__tertiary,
.button__primary,
.button__secondary,
.links__link,
.lists__horizontal--pgs a[href] {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: uppercase;
}
.styles__tertiary--proper {
  text-transform: none;
}
.styles__accent {
  font-family: 'Bodoni Std';
  font-weight: 400;
}
.styles__transform--none {
  text-transform: none;
}
.styles__transform--uppercase {
  text-transform: uppercase;
}
.styles__transform--lowercase {
  text-transform: lowercase;
}
/*


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

*/
.styles__h1,
.styles__h1--long,
.styles__h2--long,
.wysiwyg h1,
.fullImage__figure:not([data-overlay=""]):after {
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .styles__h2,
  .wysiwyg h2 {
    text-transform: none;
  }
}
.styles__h1,
.wysiwyg h1 {
  font-size: 34px;
  font-size: 2.125rem;
  line-height: 1.11764706;
  letter-spacing: 0.025em;
}
@media all and (min-width: 48em) {
  .styles__h1,
  .wysiwyg h1 {
    font-size: 90px;
    font-size: 5.625rem;
    line-height: 0.91111111;
    letter-spacing: 0.01777778em;
  }
}
.styles__h1--long,
.fullImage__figure:not([data-overlay=""]):after {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1.13636364;
  letter-spacing: 0.02272727em;
}
@media all and (min-width: 48em) {
  .styles__h1--long,
  .fullImage__figure:not([data-overlay=""]):after {
    font-size: 100px;
    font-size: 6.25rem;
    line-height: 0.9;
    letter-spacing: 0.016em;
  }
}
.styles__h2,
.wysiwyg h2 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.02857143em;
}
@media all and (min-width: 48em) {
  .styles__h2,
  .wysiwyg h2 {
    font-size: 52px;
    font-size: 3.25rem;
    line-height: 1.07692308;
    letter-spacing: 0.03076923em;
  }
}
.styles__h2--long {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.02857143em;
}
@media all and (min-width: 48em) {
  .styles__h2--long {
    font-size: 64px;
    font-size: 4rem;
    line-height: 1.125;
    letter-spacing: 0.02692308em;
  }
}
.styles__h3,
.wysiwyg h3 {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.09090909;
  letter-spacing: 0.03636364em;
}
@media all and (min-width: 48em) {
  .styles__h3,
  .wysiwyg h3 {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 1.13636364;
    letter-spacing: 0.02272727em;
  }
}
.styles__h4,
.wysiwyg h4 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media all and (min-width: 48em) {
  .styles__h4,
  .wysiwyg h4 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.14285714;
    letter-spacing: 0.03571429em;
  }
}
.styles__h5,
.wysiwyg h5 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
  letter-spacing: 0.03333333em;
}
@media all and (min-width: 48em) {
  .styles__h5,
  .wysiwyg h5 {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }
}
.styles__h6,
.wysiwyg h6 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
}
@media all and (min-width: 48em) {
  .styles__h6,
  .wysiwyg h6 {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.55555556;
  }
}
.styles__h7 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
}
/*

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

*/
/* 

Paragraph 

*/
.styles__paragraph--large {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media all and (min-width: 48em) {
  .styles__paragraph--large {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.14285714;
  }
}
.styles__paragraph--regular {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
@media all and (min-width: 48em) {
  .styles__paragraph--regular {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
  }
}
.styles__paragraph--small,
.museumInfo__hours-label,
.museumInfo__hours-time {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
.styles__paragraph--caption,
.museumInfo__hours-desc {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
@media all and (min-width: 48em) {
  .styles__paragraph--caption,
  .museumInfo__hours-desc {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.375;
  }
}
.styles__paragraph-accent {
  position: relative;
  margin-top: 1.875rem;
  padding-top: 1.875rem;
}
.styles__paragraph-accent:before {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: #F0B23A;
  width: 150px;
}
/*

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: 1.25rem;
}
.styles__blockquote blockquote {
  padding: 0;
}
.styles__blockquote-cite {
  display: block;
}
.styles__blockquote-cite:before {
  content: "\2014";
}
/*

Text Alignment 

*/
.styles__align-center {
  text-align: center;
}
.is-protected .styles__blurred {
  filter: blur(5px);
}
.styles__strikethrough {
  position: relative;
  text-align: center;
  z-index: 0;
}
.styles__strikethrough:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: -1;
  height: 2px;
  background-color: #141414;
}
.styles__strikethrough span {
  display: inline-block;
  padding: 0 2.5rem;
  max-width: 80%;
}
.styles__strikethrough--light:before {
  background-color: #fff;
}
.styles__strikethrough--brand:before {
  background-color: #F0B23A;
}
@media all and (max-width: 47.9375em) {
  .sponsors .styles__strikethrough span {
    max-width: 100%;
    padding: 0;
  }
  .sponsors .styles__strikethrough:before {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .styles__intro {
    width: calc((100% / 12) * 8);
    margin: 0 auto;
  }
}
@media all and (min-width: 100em) {
  .styles__intro {
    width: calc((100% / 12) * 8);
  }
}
/*

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__super-canon-text--long,
.hierarchy__canon-text--long,
.hierarchy__meridian-text--long,
.hierarchy__paragon-text--long,
.hierarchy__tertia-text--long,
.hierarchy__columbian-text--long,
.hierarchy__primer-text--long,
.hierarchy__normal-text--long,
.hierarchy__petite-text--long,
.hierarchy__non-pariel-text--long,
.hierarchy__minion-text--long,
.hierarchy__micro-text--long,
body,
.styles__body-text,
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select,
.elements__input-hint,
.elements__input-desc,
[class*="messaging__input-alert"] {
  line-height: 1.5;
}
.hierarchy__inch-text,
.hierarchy__inch-text--long {
  font-size: 100px;
  font-size: 6.25rem;
  line-height: 1;
}
.hierarchy__super-canon-text,
.hierarchy__super-canon-text--long {
  font-size: 90px;
  font-size: 5.625rem;
  line-height: 0.88888889;
}
.hierarchy__canon-text,
.hierarchy__canon-text--long {
  font-size: 80px;
  font-size: 5rem;
  line-height: 1.1125;
}
.hierarchy__meridian-text,
.hierarchy__meridian-text--long {
  font-size: 64px;
  font-size: 4rem;
  line-height: 0.8125;
}
.hierarchy__paragon-text,
.hierarchy__paragon-text--long {
  font-size: 52px;
  font-size: 3.25rem;
  line-height: 0.84615385;
}
.hierarchy__tertia-text,
.hierarchy__tertia-text--long {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 0.90909091;
}
.hierarchy__columbian-text,
.hierarchy__columbian-text--long {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 0.94444444;
}
.hierarchy__primer-text,
.hierarchy__primer-text--long {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
}
.hierarchy__normal-text,
.hierarchy__normal-text--long,
body,
.styles__body-text,
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select,
.elements__input-hint,
.elements__input-desc,
[class*="messaging__input-alert"] {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.hierarchy__petite-text,
.hierarchy__petite-text--long {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333333;
}
.hierarchy__non-pariel-text,
.hierarchy__non-pariel-text--long {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
}
.hierarchy__minion-text,
.hierarchy__minion-text--long {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.28571429;
}
.hierarchy__micro-text,
.hierarchy__micro-text--long {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
}
/*

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: not-allowed;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Button : No Button
 * 
 * Remove basic button styles
 */
.button__no-button,
.lightboxModal__open {
  background: transparent;
  padding: 0;
  color: inherit;
  border: 0;
}
.button__no-button:hover,
.button__no-button:focus,
.button__no-button.is-current,
.lightboxModal__open:hover,
.lightboxModal__open:focus,
.lightboxModal__open.is-current {
  background: transparent;
  color: inherit;
}
.button__base,
.button__primary,
.button__secondary,
.button__close,
.imageSlider__control-btn,
.lightboxModal__zoom-btn {
  width: auto;
  height: auto;
  margin: 0;
  line-height: normal;
  text-decoration: none;
  position: relative;
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  overflow: visible;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  background: transparent;
  color: #141414;
  text-align: center;
  padding: 15px 20px;
  margin-top: 1em;
}
p > .button__base,
p > .button__primary,
p > .button__secondary,
p > .button__close,
p > .imageSlider__control-btn,
p > .lightboxModal__zoom-btn {
  margin-top: 0;
}
.button__base.is-disabled,
.button__base:disabled,
.button__primary.is-disabled,
.button__primary:disabled,
.button__secondary.is-disabled,
.button__secondary:disabled,
.button__close.is-disabled,
.button__close:disabled,
.imageSlider__control-btn.is-disabled,
.imageSlider__control-btn:disabled,
.lightboxModal__zoom-btn.is-disabled,
.lightboxModal__zoom-btn:disabled {
  cursor: not-allowed;
  background: #909090;
  color: #2B2B2B;
  opacity: 0.4;
}
.button__base.is-disabled:hover,
.button__base:disabled:hover,
.button__base.is-disabled:focus,
.button__base:disabled:focus,
.button__primary.is-disabled:hover,
.button__primary:disabled:hover,
.button__primary.is-disabled:focus,
.button__primary:disabled:focus,
.button__secondary.is-disabled:hover,
.button__secondary:disabled:hover,
.button__secondary.is-disabled:focus,
.button__secondary:disabled:focus,
.button__close.is-disabled:hover,
.button__close:disabled:hover,
.button__close.is-disabled:focus,
.button__close:disabled:focus,
.imageSlider__control-btn.is-disabled:hover,
.imageSlider__control-btn:disabled:hover,
.imageSlider__control-btn.is-disabled:focus,
.imageSlider__control-btn:disabled:focus,
.lightboxModal__zoom-btn.is-disabled:hover,
.lightboxModal__zoom-btn:disabled:hover,
.lightboxModal__zoom-btn.is-disabled:focus,
.lightboxModal__zoom-btn:disabled:focus {
  background: #909090;
  color: #2B2B2B;
}
/**
 * Button Primary
 */
.button__primary {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 2px;
  background: #F0B23A;
  color: #141414;
  border: 2px solid transparent;
}
.button__primary:hover,
.button__primary:focus,
.button__primary.is-current {
  background: #C88700;
  color: #2B2B2B;
}
.button__primary:active {
  background: #A76816;
  color: #fff;
}
.button__primary:focus {
  outline: 2px solid #141414;
}
/**
* Button Secondary
 */
.button__secondary {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 2px;
  background: transparent;
  color: #141414;
  border: 2px solid #C88700;
}
.button__secondary:hover,
.button__secondary:focus,
.button__secondary.is-current {
  background: #C88700;
  color: #2B2B2B;
  border-color: transparent;
}
.button__secondary:active {
  background: #A76816;
  color: #fff;
}
.button__secondary:focus {
  outline: 2px solid #141414;
}
.button__secondary--dark {
  color: #fff;
}
.button__secondary--dark svg {
  color: #F0B23A;
}
.button__secondary--dark:hover {
  color: #fff;
}
.button__secondary--dark:hover svg {
  color: #fff;
}
/** 
 * Button sizes: small, regular, large
 * 
 * To be added in addition to other button classes.
 */
.button__small {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.07142857em;
  padding: 14px 18px;
}
.button__full-width {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/**
 * Close Button 
 */
.button__close,
.lightboxModal__zoom-btn {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid #A76816;
  background-color: #F7F5F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button__close .icons__icon,
.lightboxModal__zoom-btn .icons__icon {
  width: 16px;
}
.button__close:hover,
.button__close:active,
.lightboxModal__zoom-btn:hover,
.lightboxModal__zoom-btn:active {
  background-color: #F7F5F0;
}
.button__close:focus,
.lightboxModal__zoom-btn:focus {
  background-color: #F0B23A;
  color: #141414;
  outline: 2px solid #141414;
}
.button__close:focus .icons__icon,
.lightboxModal__zoom-btn:focus .icons__icon {
  color: #141414;
}
.button__close--small {
  width: 24px;
  height: 24px;
}
.button__close--small .icons__icon {
  width: 12px;
}
/*

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:hover {
  cursor: pointer;
}
a:disabled {
  color: #909090;
  cursor: not-allowed;
}
/** 
  * Links__link: Standard Hyperlinks
 */
.links__link,
.lists__horizontal--pgs a[href] {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 2px;
  color: #141414;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.links__link:focus,
.lists__horizontal--pgs a[href]:focus {
  outline-offset: 2px;
  outline: 2px dashed #A76816;
}
.links__link:hover,
.lists__horizontal--pgs a[href]:hover {
  color: #A76816;
  cursor: pointer;
}
.links__ticket {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.03125em;
  font-family: 'Sequel100Wide';
  font-weight: 400;
  position: relative;
  display: inline-block;
  padding: 15px;
  background: #F0B23A;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
}
.links__ticket--proper {
  text-transform: none;
}
.links__ticket:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  bottom: 0;
  transform: translateX(-100%);
  background: #F0B23A;
  border-right: 4px dashed #000;
}
.links__ticket:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(calc(-50% - 20px), -50%);
  width: 16px;
  height: 16px;
  background: black;
  border-radius: 100%;
}
.links__ticket:focus {
  background: #C88700;
  color: #fff;
}
.links__ticket:focus:before {
  background: #C88700;
}
.links__ticket--sm {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.08333333em;
  background: transparent;
  border-style: solid;
  border-color: #F0B23A;
  border-width: 1.5px 1.5px 1.5px 0;
  padding: 12px 15px;
  color: #fff;
}
.links__ticket--sm:before {
  width: 15px;
  background: transparent;
  border-width: 1.5px 2px 1.5px 1.5px;
  border-color: #F0B23A;
  border-style: solid dashed solid solid;
  top: -1.5px;
  height: calc(100% + 3px);
}
.links__ticket--sm:after {
  width: 12px;
  height: 12px;
  transform: translate(calc(-50% - 15px), -50%);
  border: 1.5px solid #F0B23A;
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
          clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.links__no-icon:hover svg {
  transform: none;
}
.links__link--large {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 3.6px;
}
.links__link--small {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.0625;
  text-transform: none;
  letter-spacing: 1px;
}
.links--minion {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.42857143;
  letter-spacing: 0.02142857em;
  text-decoration: underline;
  -webkit-text-decoration-color: #F0B23A;
          text-decoration-color: #F0B23A;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.links__link--dark {
  color: #fff;
}
.links__link--dark:focus {
  outline-offset: 2px;
  color: #fff;
  outline: 2px dashed #fff;
}
.links__link--dark:hover {
  color: #F0B23A;
}
.links__link--brand {
  color: #F0B23A;
}
.links__link--brand:focus,
.links__link--brand:hover {
  color: #C88700;
}
.links__link--brand:focus {
  outline: 2px dashed #fff;
}
/**
  * Inline Links
 */
.links__inline,
p a:not(.button__primary):not(.button__secondary):not(.links__link),
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link) {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: underline;
  -webkit-text-decoration-color: #F0B23A;
          text-decoration-color: #F0B23A;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.links__inline:focus,
.links__inline:hover,
p a:not(.button__primary):not(.button__secondary):not(.links__link):focus,
p a:not(.button__primary):not(.button__secondary):not(.links__link):hover,
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link):focus,
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link):hover {
  color: #F0B23A;
}
.background--gold .links__inline,
.background--gold p a:not(.button__primary):not(.button__secondary):not(.links__link),
.background--gold .wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link) {
  -webkit-text-decoration-color: inherit;
          text-decoration-color: inherit;
}
.background--gold .links__inline:focus,
.background--gold .links__inline:hover,
.background--gold p a:not(.button__primary):not(.button__secondary):not(.links__link):focus,
.background--gold p a:not(.button__primary):not(.button__secondary):not(.links__link):hover,
.background--gold .wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link):focus,
.background--gold .wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link):hover {
  color: inherit;
}
.links__inline:focus,
p a:not(.button__primary):not(.button__secondary):not(.links__link):focus,
.wysiwyg a:not(.button__primary):not(.button__secondary):not(.links__link):focus {
  outline: 2px dashed #A76816;
  outline-offset: 2px;
  -webkit-text-decoration-color: #fff;
          text-decoration-color: #fff;
}
.links__inline--large {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
}
.links__inline--normal {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.links__inline--small {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.75;
}
.links__inline--tiny {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2.33333333;
}
.links__inline--dark {
  color: #fff;
}
.links__inline--dark:hover {
  color: #F0B23A;
}
.links__inline--dark:focus {
  outline: 2px dashed #A76816;
  outline-offset: 2px;
}
/**
 * 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;
}
/**
 * Links Overlay 
 */
.links__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.links__overlay:focus {
  outline-offset: 2px;
  color: #fff;
  outline: 2px dashed #fff;
}
.links__overlay:after {
  display: none;
}
.links__cta {
  position: relative;
}
.links__cta:after {
  content: '';
  position: relative;
  display: inline-block;
  transform: translate(10px, 2px);
  background-image: url('/images/nav-right-primary.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
}
/**
 * Unlink
 * Basic class to remove some link styling.
 */
.links__unlink {
  text-decoration: none;
}
/* Links in paragraphs */
/*

Forms

*/
form {
  margin: 0;
}
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
legend {
  width: 100%;
  border: 0;
  padding: 0;
  display: block;
  white-space: normal;
}
/*

Basic Form Elements

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

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

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

*/
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  display: block;
}
input,
textarea {
  width: 100%;
  font-size: 1em;
  padding: 0.3125rem 0.25rem;
  outline: none;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus,
input:active,
textarea:active,
input.is-current,
textarea.is-current {
  z-index: 1;
}
input {
  line-height: normal;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  display: inline-block;
  cursor: pointer;
}
input[disabled] {
  cursor: default;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
  margin: 3px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  vertical-align: top;
  width: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
  height: 5rem;
}
select {
  width: auto;
  max-width: 100%;
  font-size: 0.8125em;
}
/*

Input Label Elements

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

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

*/
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border: 2px solid #C88700;
  padding: 0.625rem 0.625rem;
}
.elements__input-alert-msg {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.33333333;
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  color: #D0401A;
  margin-top: 10px;
  padding: 5px;
}
/*

Input Widths

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

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

*/
.elements__input--eighth {
  width: 12.5%;
}
.elements__input--quarter {
  width: 25%;
}
.elements__input--half {
  width: 50%;
}
.elements__input--xxxs {
  max-width: 30px;
}
.elements__input--xxs {
  max-width: 50px;
}
.elements__input--xs {
  max-width: 100px;
}
.elements__input--s {
  max-width: 175px;
}
.elements__input--m {
  max-width: 250px;
}
.elements__input--l {
  max-width: 350px;
}
/*

Form Modules

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

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

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

````attached-label-submit
<form class="elements__attached-label">
    <label class="is-hidden" for="attached-label-submit">Search</label>
    <input type="search" id="attached-label-submit" required>
    <div>
        <button type="submit" class="button__primary">
            <svg class="icon"><use xlink:href="#search"></svg>
            <b class="is-hidden">Submit</b>
        </button>
    </div>
</form>
````

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

Input Label

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

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

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

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

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

*/
.elements__input-label {
  padding-top: 1em;
}
.elements__input-hint {
  color: #6a6a6a;
  margin-top: 0.25em;
}
.elements__input-desc {
  margin-top: 0em;
}
/*

Fieldset

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

*/
.elements__fieldset {
  margin-top: 1em;
  padding-bottom: 1em;
}
/*

Checkbox List

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

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

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

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

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

*/
.elements__checkbox-list {
  margin-top: 0.5em;
}
legend + .elements__checkbox-list {
  margin-top: 0em;
}
legend .elements__input-label {
  padding-bottom: 0.25em;
}
legend + .elements__input-desc {
  /* Positioning */
  position: relative;
  top: -0.3125rem;
}
.elements__select svg {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}
.elements__select-field {
  font-family: source-serif-pro, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  font-style: normal;
  font-weight: 400;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #fff;
  padding: 10px 30px 10px 10px;
  color: #fff;
  background: transparent;
  width: 100%;
  /* For IE <= 11 */
}
.elements__select-field select::-ms-expand {
  display: none;
}
.elements__select-field option {
  background-color: #29282b;
}
.elements__search {
  position: relative;
}
@media all and (min-width: 48em) {
  .elements__search {
    width: 280px;
  }
}
.elements__search-input {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 800;
  font-style: normal;
  font-family: trade-gothic-next-condensed, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: 1.5px solid #7f7f7f;
  border-radius: 3px;
  padding: 15px;
  color: #fff;
  background: transparent;
}
.elements__search-input::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1;
  /* Firefox */
}
.elements__search-input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1;
  /* Firefox */
}
.elements__search-input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff;
}
.elements__search-input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #fff;
}
.elements__search-clear,
.elements__search-submit {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.elements__search-clear {
  display: none;
}
.search-results .elements__search-clear {
  display: block;
}
.search-results .elements__search-submit {
  display: none;
}
.loadingButton__reset {
  font-size: 1em;
  line-height: 1em;
}
.is-loading .loadingButton__reset {
  display: none;
}
.loadingButton__loader {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: loading-button 2s infinite linear;
          animation: loading-button 2s infinite linear;
  background: #909090;
  display: none;
  font-size: 0.75em;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  text-indent: -9999em;
  transform: translate3d(-50%, -50%, 0);
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.loadingButton__loader-relative {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}
.loadingButton__loader--large {
  width: 50px;
  height: 50px;
}
.is-loading .loadingButton__loader {
  display: block;
}
.loadingButton__loader:before {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: loading-button 2s infinite linear;
          animation: loading-button 2s infinite linear;
  background: #909090;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%) translateX(-5px);
}
.loadingButton__loader:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: loading-button 2s infinite linear;
          animation: loading-button 2s infinite linear;
  background: #909090;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%) translateX(5px);
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@-webkit-keyframes loading-button {
  0%,
  100% {
    background-color: #909090;
  }
  50% {
    background-color: transparent;
  }
}
@keyframes loading-button {
  0%,
  100% {
    background-color: #909090;
  }
  50% {
    background-color: transparent;
  }
}
/*

Form Validation

*/
/*

Input States

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

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

*/
.messaging__is-successful input,
.messaging__is-successful textarea,
.messaging__is-successful select {
  border-color: #008D52;
}
.messaging__is-erroneous input,
.messaging__is-erroneous textarea,
.messaging__is-erroneous select {
  border-color: #D0401A;
}
/*

Form Messaging

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

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

*/
[class*="messaging__input-alert"] {
  /* Display & Box Model */
  display: inline-block;
  /* Pretty */
  color: #13496d;
}
.messaging__input-alert--warning {
  color: #ec8e04;
}
.messaging__input-alert--error {
  color: #D0401A;
}
.messaging__input-alert--success {
  color: #008D52;
}
.customSelect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.customSelect__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  cursor: pointer;
  outline: none;
  border: 2px solid #7f7f7f;
  border-radius: 3px;
}
.customSelect__value:after {
  content: '';
  pointer-events: none;
  height: 0;
  width: 0;
  z-index: 2;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #C88700;
  margin-left: 25px;
  transform: rotate(0deg);
  transition: all 0.35s linear;
}
.customSelect__value span {
  color: #000;
}
.customSelect__value:not(.is-revealed):before,
.customSelect__value:not(.is-expanded):before {
  transform: rotate(180deg);
}
.customSelect__value:hover,
.customSelect__value:focus {
  border-color: #C88700;
}
.customSelect__dropdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 8px;
  z-index: 100;
  background: #fff;
  box-shadow: 7px 10px 34px 0 rgba(0, 0, 0, 0.26);
}
.customSelect__dropdown--top {
  bottom: 100%;
  top: auto;
}
.customSelect__list:not(.is-expanded) .customSelect__dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.customSelect__option-list {
  list-style: none;
  width: 100%;
  max-height: 80vw;
  overflow: auto;
}
.customSelect__option {
  color: #000;
  outline: 0;
  display: block;
  cursor: pointer;
  padding: 10px;
}
.customSelect__option:hover,
.customSelect__option:focus,
.customSelect__option[data-selected="true"]:hover,
.customSelect__option[data-selected="true"]:focus {
  background: #F0B23A;
  color: #fff;
}
.customSelect__option[data-selected="true"] {
  color: #C88700;
}
.calendar__sidebar-header  .customSelect__dropdown,
.calendar__filter  .customSelect__dropdown {
  top: auto;
}
@media all and (min-width: 48em) {
  .calendar__sidebar-header  .customSelect__dropdown,
  .calendar__filter  .customSelect__dropdown {
    right: -50%;
  }
}
@media all and (min-width: 48em) {
  .calendar__sidebar-header  .customSelect__option-list,
  .calendar__filter  .customSelect__option-list {
    -moz-column-count: 2;
         column-count: 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;
}
.spacing__block {
  padding: 40px 0;
}
@media all and (min-width: 48em) {
  .spacing__block {
    padding: 80px 0;
  }
}
.spacing__block--t {
  padding-top: 40px;
}
@media all and (min-width: 48em) {
  .spacing__block--t {
    padding-top: 80px;
  }
}
.spacing__block--b {
  padding-bottom: 40px;
}
@media all and (min-width: 48em) {
  .spacing__block--b {
    padding-bottom: 80px;
  }
}
[data-offset="true"] + [data-offset="true"] .spacing__block {
  padding-top: 0;
}
@media all and (min-width: 48em) {
  [data-offset="true"] + [data-offset="true"] .spacing__block {
    padding-top: 0;
  }
}
@media all and (min-width: 48em) {
  .spacing__block-small {
    padding: 40px 0;
  }
}
@media all and (min-width: 48em) {
  .spacing__block-small--t {
    padding-top: 40px;
  }
}
@media all and (min-width: 48em) {
  .spacing__block-small--b {
    padding-bottom: 40px;
  }
}
/*

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,
.ratios__base:before,
.media__figure > a,
[class*="media__figure--"] > a,
.media__figure img,
[class*="media__figure--"] img,
.elements__input-label,
.elements__input-hint,
.elements__input-desc,
.headerImage__figure:before,
.headerImage__illustration:before,
.ratios__video:before,
.ratios__1x1:before,
.ratios__square:before,
.ratios__2x1:before,
.ratios__3x2:before,
.ratios__1x2:before,
.ratios__4x3:before,
.ratios__16x9:before,
.ratios__9x16:before,
.ratios__map:before,
.steppedContent__step-figure:before,
.imageSlider__controls:before,
.carousel__slide-img-wrap:before,
.carousel__controls:before,
.headerPerson__figure:before,
.eventsSlider__slide .dropdownContent__featured-card:before,
.card__figure:before,
.cardProfileModal__figure:before,
.calCardFull__figure:before,
.cardProfile__ratio:before,
.profileModalContent__headshot-ratio:before,
.pageModalContent__headshot-ratio:before,
[data-media-size="half"] .calendarHeader__figure:before {
  display: block;
}
.presentational__inline-block {
  display: inline-block;
}
.presentational__group,
.lists__breadcrumb {
  /* 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,
.js .reveal__target {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  overflow: hidden;
}
.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: 64.6875em) {
  .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: 64.75em) {
  .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,
.js .reveal__target.is-revealed {
  /* 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,
.ratios__base,
[class*="messaging__input-alert"],
.js .expand__target,
.headerImage__figure,
.headerImage__illustration,
.ratios__video,
.ratios__1x1,
.ratios__square,
.ratios__2x1,
.ratios__3x2,
.ratios__1x2,
.ratios__4x3,
.ratios__16x9,
.ratios__9x16,
.ratios__map,
.steppedContent__step-figure,
.imageSlider__controls,
.carousel__slide-img-wrap,
.carousel__controls,
.headerPerson__figure,
.eventsSlider__slide .dropdownContent__featured-card,
.card__figure,
.cardProfileModal__figure,
.calCardFull__figure,
.cardProfile__ratio,
.profileModalContent__headshot-ratio,
.pageModalContent__headshot-ratio,
[data-media-size="half"] .calendarHeader__figure {
  position: relative;
}
/*

"No Scroll"

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

*/
html.presentational__no-scroll,
body.presentational__no-scroll {
  height: 100vh;
  height: var(--app-height);
  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.59375rem;
  margin-right: -0.59375rem;
  /* 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.59375rem;
  padding-right: 0.59375rem;
  /* 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.59375rem;
    margin-right: -0.59375rem;
  }
  [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.59375rem;
    padding-right: 0.59375rem;
  }
  .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: 64.6875em) {
  [class*="grid__med-row"],
  .grid__med-quarters,
  .grid__med-thirds,
  .grid__med-halves {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  [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: 1.25rem;
    padding-right: 1.25rem;
  }
  .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: 64.75em) {
  [class*="grid__lg-row"],
  .grid__lg-quarters,
  .grid__lg-thirds,
  .grid__lg-halves {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  [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: 1.25rem;
    padding-right: 1.25rem;
  }
  .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;
  }
}
/*
FLEX UTILITIES
@author Enid Soto <enid@lifeblue.com>

Create a parent flex element by applying the class `.flex`, and add flex items with the class `.flex__col`. You can also use the grid system's column classes, i.e. `grid__lg-half`.
    <div class="flex">
        <div class="flex__col">...</div>
        <div class="flex__col">...</div>
    </div>

    Add gutters to the columns by adding the class `.flex__gutters` to the parent flex container:
    <div class="flex flex__gutters">
        <div class="flex__col">...</div>
        <div class="flex__col">...</div>
    </div>

    .m-flex__element()
    --------------------
    This mixin will set the display to flex, and also set the flex-direction and flex-wrap to their default values (row and nowrap, respectively). If you are using the standard motif column classes (i.e. grid__sm-half), you must set the gutters to true.
    You can set new values with the variables `@direction` and `@wrap`, like so: 
    .m-flex__element(@direction: column, @wrap: wrap);

.m-flex__order(@number)
-------------------------
Use this mixin to set the order of each flex item within a parent flex element. Accepts a unitless value only. 

.m-flex(@grow, @shrink, @basis)
--------------------------------
This mixin sets the shorthand `flex` property, which combines flex-grow, flex-shrink and flex-basis.
    @grow: specifies how much a flex item will grow relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid. 
    @shrink: specifies how much a flex item will shrink relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid.
    @basis: specifies the initial length of a flexible item. Accepts a length (20%, 5rem, etc) or a keyword.
Note: IE 9 and earlier do not support the flex property.

*/
.flex {
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
}
.flex--inline {
  flex-direction: row;
  flex-wrap: nowrap;
  display: inline-flex;
}
.flex__col {
  width: 100%;
}
.flex__gutters {
  margin-left: -0.59375rem;
  margin-right: -0.59375rem;
}
.flex__gutters:before,
.flex__gutters:after {
  content: "\0020";
  height: 0;
  display: block;
  overflow: hidden;
}
.flex__gutters:after {
  clear: both;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .flex__gutters {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .flex__gutters:before,
  .flex__gutters:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .flex__gutters:after {
    clear: both;
  }
}
@media all and (min-width: 64.75em) {
  .flex__gutters {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .flex__gutters:before,
  .flex__gutters:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .flex__gutters:after {
    clear: both;
  }
}
.flex__gutters .flex__col {
  padding-left: 0.59375rem;
  padding-right: 0.59375rem;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .flex__gutters .flex__col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media all and (min-width: 64.75em) {
  .flex__gutters .flex__col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .flex__gutters--med-up {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .flex__gutters--med-up:before,
  .flex__gutters--med-up:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .flex__gutters--med-up:after {
    clear: both;
  }
}
@media all and (min-width: 64.75em) {
  .flex__gutters--med-up {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .flex__gutters--med-up:before,
  .flex__gutters--med-up:after {
    content: "\0020";
    height: 0;
    display: block;
    overflow: hidden;
  }
  .flex__gutters--med-up:after {
    clear: both;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .flex__gutters--med-up .flex__col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media all and (min-width: 64.75em) {
  .flex__gutters--med-up .flex__col {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.flex__push--left {
  margin-right: auto;
}
.flex__push--right {
  margin-left: auto;
}
.flex__push--top {
  margin-bottom: auto;
}
.flex__push--bottom {
  margin-top: auto;
}
/* The `flex-direction` helper classes are:
    .flex__dir--row
    .flex__dir--row-reverse
    .flex__dir--column
    .flex__dir--column-reverse
*/
.flex__dir--row {
  flex-direction: row;
}
.flex__dir--row-reverse {
  flex-direction: row-reverse;
}
.flex__dir--column {
  flex-direction: column;
}
.flex__dir--column-reverse {
  flex-direction: column-reverse;
}
/* The `flex-wrap` helper classes are:
    .flex__wrp--nowrap
    .flex__wrp--wrap
    .flex__wrp--wrap-reverse
*/
.flex__wrp--nowrap {
  flex-wrap: nowrap;
}
.flex__wrp--wrap {
  flex-wrap: wrap;
}
.flex__wrp--wrap-reverse {
  flex-wrap: wrap-reverse;
}
/* The `justify-content` helper classes are:
    .flex__jc--flex-start
    .flex__jc--flex-end
    .flex__jc--center
    .flex__jc--space-between
    .flex__jc--space-around
    .flex__jc--space-evenly
*/
.flex__jc--flex-start {
  justify-content: flex-start;
}
.flex__jc--flex-end {
  justify-content: flex-end;
}
.flex__jc--center {
  justify-content: center;
}
.flex__jc--space-between {
  justify-content: space-between;
}
.flex__jc--space-around {
  justify-content: space-around;
}
.flex__jc--space-evenly {
  justify-content: space-evenly;
}
/* The `justify-self` helper classes are:
    .flex__js--auto
    .flex__js--flex-start
    .flex__js--flex-end
    .flex__js--center
    .flex__js--baseline
    .flex__js--stretch
*/
.flex__js--auto {
  justify-self: auto;
}
.flex__js--flex-start {
  justify-self: flex-start;
}
.flex__js--flex-end {
  justify-self: flex-end;
}
.flex__js--center {
  justify-self: center;
}
.flex__js--baseline {
  justify-self: baseline;
}
.flex__js--stretch {
  justify-self: stretch;
}
/* The `align-items` helper classes are:
    .flex__ai--flex-start
    .flex__ai--flex-end
    .flex__ai--center
    .flex__ai--stretch
    .flex__ai--baseline
*/
.flex__ai--flex-start {
  align-items: flex-start;
}
.flex__ai--flex-end {
  align-items: flex-end;
}
.flex__ai--center {
  align-items: center;
}
.flex__ai--stretch {
  align-items: stretch;
}
.flex__ai--baseline {
  align-items: baseline;
}
/* The `align-content` helper classes are:
    .flex__ac--normal
    .flex__ac--flex-start
    .flex__ac--flex-end
    .flex__ac--center
    .flex__ac--space-between
    .flex__ac--space-around
    .flex__ac--space-evenly
    .flex__ac--stretch
    NOTE: These properties ONLY take effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse
*/
.flex__ac--normal {
  align-content: normal;
}
.flex__ac--flex-start {
  align-content: flex-start;
}
.flex__ac--flex-end {
  align-content: flex-end;
}
.flex__ac--center {
  align-content: center;
}
.flex__ac--space-between {
  align-content: space-between;
}
.flex__ac--space-around {
  align-content: space-around;
}
.flex__ac--space-evenly {
  align-content: space-evenly;
}
.flex__ac--stretch {
  align-content: stretch;
}
/* The `align-self` helper classes are:
    .flex__as--auto
    .flex__as--flex-start
    .flex__as--flex-end
    .flex__as--center
    .flex__as--baseline
    .flex__as--stretch
*/
.flex__as--auto {
  align-self: auto;
}
.flex__as--flex-start {
  align-self: flex-start;
}
.flex__as--flex-end {
  align-self: flex-end;
}
.flex__as--center {
  align-self: center;
}
.flex__as--baseline {
  align-self: baseline;
}
.flex__as--stretch {
  align-self: stretch;
}
@media all and (max-width: 47.9375em) {
  .flex__stack--sm {
    flex-direction: column;
  }
}
@media all and (max-width: 47.9375em) {
  .flex__stack--sm-reverse {
    flex-direction: column-reverse;
  }
}
@media all and (max-width: 64.6875em) {
  .flex__stack--med {
    flex-direction: column;
  }
}
@media all and (max-width: 64.6875em) {
  .flex__stack--med-reverse {
    flex-direction: column-reverse;
  }
}
.flex__gap--s {
  gap: 0.625rem;
}
.flex__gap--m {
  gap: 1.25rem;
}
.flex__gap--l {
  gap: 2.5rem;
}
/*

Off-Canvas Trigger (Small Screens Only)

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

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

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

*/
.off-canvas__shift-base,
.js .off-canvas__shift--left,
.js .off-canvas__shift--right,
.js .off-canvas__shift--top,
.js .off-canvas__shift--bottom {
  position: relative;
  overflow: hidden;
}
.js .off-canvas__primary-base,
.js .off-canvas__primary {
  position: relative;
  width: 100%;
  z-index: 1;
}
.off-canvas__shift-base.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--left.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--right.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--top.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--bottom.is-active > .off-canvas__primary-base,
.off-canvas__shift-base.is-active > .off-canvas__primary {
  transform: translate3d(0, 0, 0);
  height: 100vh;
  overflow: hidden;
}
.off-canvas__shift-base.is-active > .off-canvas__primary-base,
.off-canvas__shift-base.was-active > .off-canvas__primary-base,
.js .off-canvas__shift--left.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--left.was-active > .off-canvas__primary-base,
.js .off-canvas__shift--right.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--right.was-active > .off-canvas__primary-base,
.js .off-canvas__shift--top.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--top.was-active > .off-canvas__primary-base,
.js .off-canvas__shift--bottom.is-active > .off-canvas__primary-base,
.js .off-canvas__shift--bottom.was-active > .off-canvas__primary-base,
.off-canvas__shift-base.is-active > .off-canvas__primary,
.off-canvas__shift-base.was-active > .off-canvas__primary {
  transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media all and (min-width: 48em) {
  .off-canvas__shift-base.is-active > .off-canvas__primary-base,
  .off-canvas__shift-base.was-active > .off-canvas__primary-base,
  .js .off-canvas__shift--left.is-active > .off-canvas__primary-base,
  .js .off-canvas__shift--left.was-active > .off-canvas__primary-base,
  .js .off-canvas__shift--right.is-active > .off-canvas__primary-base,
  .js .off-canvas__shift--right.was-active > .off-canvas__primary-base,
  .js .off-canvas__shift--top.is-active > .off-canvas__primary-base,
  .js .off-canvas__shift--top.was-active > .off-canvas__primary-base,
  .js .off-canvas__shift--bottom.is-active > .off-canvas__primary-base,
  .js .off-canvas__shift--bottom.was-active > .off-canvas__primary-base,
  .off-canvas__shift-base.is-active > .off-canvas__primary,
  .off-canvas__shift-base.was-active > .off-canvas__primary {
    transition-duration: 0.25s;
  }
}
.js .off-canvas__secondary-base,
.js .off-canvas__secondary {
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 100%;
  z-index: 2;
}
.off-canvas__shift-base.is-active > .off-canvas__secondary-base,
.off-canvas__shift-base.was-active > .off-canvas__secondary-base,
.js .off-canvas__shift--left.is-active > .off-canvas__secondary-base,
.js .off-canvas__shift--left.was-active > .off-canvas__secondary-base,
.js .off-canvas__shift--right.is-active > .off-canvas__secondary-base,
.js .off-canvas__shift--right.was-active > .off-canvas__secondary-base,
.js .off-canvas__shift--top.is-active > .off-canvas__secondary-base,
.js .off-canvas__shift--top.was-active > .off-canvas__secondary-base,
.js .off-canvas__shift--bottom.is-active > .off-canvas__secondary-base,
.js .off-canvas__shift--bottom.was-active > .off-canvas__secondary-base,
.off-canvas__shift-base.is-active > .off-canvas__secondary,
.off-canvas__shift-base.was-active > .off-canvas__secondary {
  transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media all and (min-width: 48em) {
  .off-canvas__shift-base.is-active > .off-canvas__secondary-base,
  .off-canvas__shift-base.was-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--left.is-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--left.was-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--right.is-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--right.was-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--top.is-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--top.was-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--bottom.is-active > .off-canvas__secondary-base,
  .js .off-canvas__shift--bottom.was-active > .off-canvas__secondary-base,
  .off-canvas__shift-base.is-active > .off-canvas__secondary,
  .off-canvas__shift-base.was-active > .off-canvas__secondary {
    transition-duration: 0.25s;
  }
}
.js .off-canvas__shift--left.is-active {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas__shift--right.is-active {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas__shift--top {
  min-height: 100vh;
}
.js .off-canvas__shift--top.is-active {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas__shift--bottom {
  min-height: 100vh;
}
.js .off-canvas__shift--bottom.is-active {
  height: 100vh;
  overflow: hidden;
}
.js .off-canvas__shift--left > .off-canvas__primary,
.js .off-canvas__shift--right > .off-canvas__primary {
  min-height: 100vh;
}
.js .off-canvas__shift--left > .off-canvas__primary {
  transform: translate3d(-100%, 0, 0);
  float: right;
  margin-right: -100%;
}
.js .off-canvas__shift--right > .off-canvas__primary {
  transform: translate3d(100%, 0, 0);
  float: left;
  margin-left: -100%;
}
@media all and (min-width: 48em) {
  .js .off-canvas__shift--right.is-active > .off-canvas__primary {
    transform: translate3d(30%, 0, 0);
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__shift--right.is-active > .off-canvas__primary {
    transform: translate3d(40%, 0, 0);
  }
}
@media all and (min-width: 48em) {
  .js .off-canvas__shift--left.is-active > .off-canvas__primary {
    transform: translate3d(-30%, 0, 0);
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__shift--left.is-active > .off-canvas__primary {
    transform: translate3d(-40%, 0, 0);
  }
}
.js .off-canvas__shift--top.is-active > .off-canvas__primary,
.js .off-canvas__shift--bottom.is-active > .off-canvas__primary {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.js .off-canvas__shift--top.is-active > .off-canvas__primary {
  transform: translate3d(0, 80vh, 0);
}
.js .off-canvas__shift--bottom.is-active > .off-canvas__primary {
  transform: translate3d(0, -80vh, 0);
}
.js .off-canvas__shift--left > .off-canvas__secondary,
.js .off-canvas__shift--right > .off-canvas__secondary {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
}
@media all and (min-width: 48em) {
  .js .off-canvas__shift--left > .off-canvas__secondary,
  .js .off-canvas__shift--right > .off-canvas__secondary {
    width: 70%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__shift--left > .off-canvas__secondary,
  .js .off-canvas__shift--right > .off-canvas__secondary {
    width: 60%;
  }
}
.js .off-canvas__shift--left > .off-canvas__secondary {
  transform: translate3d(0, 0, 0);
  float: left;
  margin-left: -100%;
}
@media all and (min-width: 48em) {
  .js .off-canvas__shift--left > .off-canvas__secondary {
    margin-left: -70%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__shift--left > .off-canvas__secondary {
    margin-left: -60%;
  }
}
.js .off-canvas__shift--right > .off-canvas__secondary {
  transform: translate3d(0, 0, 0);
  float: right;
  margin-right: -100%;
}
@media all and (min-width: 48em) {
  .js .off-canvas__shift--right > .off-canvas__secondary {
    margin-right: -70%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__shift--right > .off-canvas__secondary {
    margin-right: -60%;
  }
}
.js .off-canvas__shift--left.is-active > .off-canvas__secondary {
  transform: translate3d(100%, 0, 0);
}
.js .off-canvas__shift--right.is-active > .off-canvas__secondary {
  transform: translate3d(-100%, 0, 0);
}
.js .off-canvas__shift--top > .off-canvas__secondary,
.js .off-canvas__shift--bottom > .off-canvas__secondary {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.js .off-canvas__shift--top > .off-canvas__secondary {
  transform: translate3d(0, -100%, 0);
  top: 0;
}
.js .off-canvas__shift--bottom > .off-canvas__secondary {
  transform: translate3d(0, 100%, 0);
  bottom: 0;
}
.js .off-canvas__shift--top.is-active > .off-canvas__secondary,
.js .off-canvas__shift--bottom.is-active > .off-canvas__secondary {
  transform: translate3d(0, 0, 0);
  overflow: auto;
}
.off-canvas__slide-base,
.js .off-canvas__slide--left,
.js .off-canvas__slide--right,
.js .off-canvas__slide--top,
.js .off-canvas__slide--bottom {
  position: fixed;
  z-index: 110;
  overflow: auto;
  overflow-x: hidden;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.off-canvas__slide-base.is-revealed,
.js .off-canvas__slide--left.is-revealed,
.js .off-canvas__slide--right.is-revealed,
.js .off-canvas__slide--top.is-revealed,
.js .off-canvas__slide--bottom.is-revealed {
  transform: translate3d(0, 0, 0);
}
.js .off-canvas__slide--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  transform: translate3d(-100%, 0, 0);
}
@media all and (min-width: 48em) {
  .js .off-canvas__slide--left {
    width: 33%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__slide--left {
    width: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .off-canvas__slide--left {
    width: 20%;
  }
}
.js .off-canvas__slide--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  transform: translate3d(100%, 0, 0);
}
@media all and (min-width: 48em) {
  .js .off-canvas__slide--right {
    width: 33%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__slide--right {
    width: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .off-canvas__slide--right {
    width: 20%;
  }
}
.js .off-canvas__slide--top {
  top: 0;
  right: 0;
  left: 0;
  height: 90%;
  transform: translate3d(0, -100%, 0);
}
@media all and (min-width: 48em) {
  .js .off-canvas__slide--top {
    height: 33%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__slide--top {
    height: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .off-canvas__slide--top {
    height: 20%;
  }
}
.js .off-canvas__slide--bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 90%;
  transform: translate3d(0, 100%, 0);
}
@media all and (min-width: 48em) {
  .js .off-canvas__slide--bottom {
    height: 33%;
  }
}
@media all and (min-width: 64.75em) {
  .js .off-canvas__slide--bottom {
    height: 25%;
  }
}
@media all and (min-width: 77.5em) {
  .js .off-canvas__slide--bottom {
    height: 20%;
  }
}
.overflow-list {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.overflow-list__item {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  position: relative;
}
@media all and (min-width: 48em) {
  .overflow-list--until-medium {
    overflow: visible;
    white-space: normal;
  }
}
@media all and (min-width: 64.75em) {
  .overflow-list--until-large {
    overflow: visible;
    white-space: normal;
  }
}
@media all and (min-width: 77.5em) {
  .overflow-list--until-x-large {
    overflow: visible;
    white-space: normal;
  }
}
/*

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: 87.5%;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 64.75em) {
  .wrappers__wrapper {
    max-width: 1400px;
  }
}
@media all and (min-width: 48em) {
  .wrappers__med-up {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 100em) {
  .wrappers__med-up,
  .wrappers__lg-up {
    max-width: 1400px;
  }
}
@media all and (min-width: 64.75em) {
  .wrappers__lg-up {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (max-width: 47.9375em) {
  .wrappers__sm {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
.wrappers__wrapper-vw {
  padding: 0 6.25vw;
}
@media all and (min-width: 100em) {
  .wrappers__wrapper-vw {
    padding: 0 calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset {
  padding: 0 6.25%;
}
@media all and (min-width: 100em) {
  .wrappers__offset {
    padding: 0 calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset--left {
  padding-left: 6.25%;
}
@media all and (min-width: 100em) {
  .wrappers__offset--left {
    padding-left: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset--right {
  padding-right: 6.25%;
}
@media all and (min-width: 100em) {
  .wrappers__offset--right {
    padding-right: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset-vw--left {
  padding-left: 6.25vw;
}
@media all and (min-width: 100em) {
  .wrappers__offset-vw--left {
    padding-left: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset-vw--right {
  padding-right: 6.25vw;
}
@media all and (min-width: 100em) {
  .wrappers__offset-vw--right {
    padding-right: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset-m--left {
  margin-left: 6.25%;
}
@media all and (min-width: 100em) {
  .wrappers__offset-m--left {
    margin-left: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__offset-m--right {
  margin-right: 6.25%;
}
@media all and (min-width: 100em) {
  .wrappers__offset-m--right {
    margin-right: calc((100vw - 1400px) * 0.5);
  }
}
.wrappers__wrapper-max {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.wrappers__full-bleed {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.wrappers__break-out {
  width: calc(100% + (7.142857142857142% * 2));
  position: relative;
  left: -7.142857142857142%;
}
@media all and (min-width: 100em) {
  .wrappers__break-out {
    width: calc(100% + ((100vw - 1400px)));
    left: calc(((100vw - 1400px)) / -2);
  }
}
.zi--0 {
  z-index: 0 !important;
}
.zi--1 {
  z-index: 1 !important;
}
.zi--10 {
  z-index: 10 !important;
}
.zi--100 {
  z-index: 100 !important;
}
.zi--neg-1 {
  z-index: -1 !important;
}
.zi--neg-10 {
  z-index: -10 !important;
}
.zi--neg-100 {
  z-index: -100 !important;
}
/*

Tables

*/
/*

Default Tables

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

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

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

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

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

panel

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

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

*/
.panel,
[class*="panel"],
[class*="panel__"] {
  margin-top: 1em;
  padding: 1.25rem;
  background-color: #ffffff;
}
.panel > :first-child,
[class*="panel"] > :first-child,
[class*="panel__"] > :first-child {
  margin-top: 0;
}
.panel h1,
[class*="panel"] h1,
[class*="panel__"] h1,
.panel h2,
[class*="panel"] h2,
[class*="panel__"] h2,
.panel h3,
[class*="panel"] h3,
[class*="panel__"] h3,
.panel h4,
[class*="panel"] h4,
[class*="panel__"] h4,
.panel h5,
[class*="panel"] h5,
[class*="panel__"] h5,
.panel h6,
[class*="panel"] h6,
[class*="panel__"] h6 {
  color: inherit;
}
[class*="panel--thin"] {
  padding: 0.625rem;
}
/*

Alert Panel

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

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

*/
/*

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

*/
/*

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

*/
[class*="panel__alert"] {
  color: #fff;
}
.panel__alert {
  background: #13496d;
}
.panel__alert--error {
  background: #D0401A;
}
.panel__alert--success {
  background: #008D52;
}
/*

WYSIWYG

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

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

If you want the first letter of our paragraphs to be Large and Styled, add class 'wysiwyg__first-letter'

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

*/
@media all and (min-width: 48em) {
  .wysiwyg__wrapper {
    width: calc((100% / 12) * 10);
    margin: 0 auto;
  }
  .wysiwyg__wrapper p,
  .wysiwyg__wrapper ol,
  .wysiwyg__wrapper ul {
    margin-left: calc(calc((100% / 10) * 1) / 2);
    margin-right: calc(calc((100% / 10) * 1) / 2);
  }
}
@media all and (min-width: 64.75em) {
  .wysiwyg__wrapper {
    width: calc((100% / 12) * 8);
  }
}
@media all and (min-width: 48em) {
  .calendarEntry[data-sidebar="true"] .wysiwyg__wrapper {
    width: auto;
    margin-left: calc((100% / 7) * 1);
  }
  .calendarEntry[data-sidebar="true"] .wysiwyg__wrapper p,
  .calendarEntry[data-sidebar="true"] .wysiwyg__wrapper ul {
    margin-left: 0;
    margin-right: 0;
  }
}
@media all and (min-width: 64.75em) {
  .calendarEntry[data-sidebar="true"] .wysiwyg__wrapper {
    width: auto;
    margin-left: calc((100% / 7) * 1);
  }
}
.wysiwyg h1 {
  margin-top: 0;
}
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  margin-top: 1.5em;
}
.wysiwyg--light {
  color: #AAA9AB;
}
.wysiwyg__cutoff {
  position: relative;
  height: 56px;
  overflow: hidden;
}
.wysiwyg__cutoff:before {
  content: '';
  position: absolute;
  top: 28px;
  right: 0;
  color: inherit;
  padding-left: 50px;
  width: 100px;
  height: 28px;
  text-align: right;
  background: linear-gradient(to right, rgba(41, 40, 43, 0) 0, #29282b 50px, #29282b 100%);
}
.wysiwyg {
  /* Headings & Paragraphs */
  /* Links */
  /* First element should have no top margin */
  /* Lists */
  /* Images */
}
.wysiwyg p {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
@media all and (min-width: 48em) {
  .wysiwyg p {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
  }
}
.wysiwyg--small p {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
.wysiwyg--tiny p {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.55555556;
}
@media all and (min-width: 48em) {
  .wysiwyg--tiny p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.375;
  }
}
.wysiwyg--light h1,
.wysiwyg--light h2,
.wysiwyg--light h3,
.wysiwyg--light h4,
.wysiwyg--light h5,
.wysiwyg--light h6 {
  color: #fff;
}
.wysiwyg--light p,
.wysiwyg--light ul,
.wysiwyg--light ol {
  color: #AAA9AB;
}
.wysiwyg a.button__primary,
.wysiwyg a.button__secondary {
  position: relative;
  padding-right: 56px;
}
.wysiwyg a.button__primary:after,
.wysiwyg a.button__secondary:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}
.wysiwyg a.links__link,
.wysiwyg a.lists__horizontal--pgs a[href] {
  position: relative;
  padding-right: 35px;
}
.wysiwyg a.links__link:after,
.wysiwyg a.lists__horizontal--pgs a[href]:after {
  content: '';
  position: relative;
  display: inline-block;
  transform: translate(10px, 2px);
  background-image: url('/images/nav-right-primary.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}
.wysiwyg a.button__primary:after {
  background-image: url('/images/nav-right.svg');
}
.wysiwyg a.links__link:after,
.wysiwyg a.button__secondary:after,
.wysiwyg a.lists__horizontal--pgs a[href]:after {
  background-image: url('/images/nav-right-primary.svg');
}
.wysiwyg a.button__secondary:hover:after {
  background-image: url('/images/nav-right-white.svg');
}
.wysiwyg :first-child {
  margin-top: 0;
}
.wysiwyg ul,
.wysiwyg ol {
  padding-left: 1.25rem;
}
.wysiwyg ul li:not(:first-of-type),
.wysiwyg ol li:not(:first-of-type) {
  margin-top: 1.25rem;
}
.wysiwyg ul {
  list-style: none;
}
.wysiwyg ul li {
  position: relative;
}
.wysiwyg ul li::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 5px;
  width: 0;
  height: 0;
  border-bottom: 7px solid transparent;
  /* left arrow slant */
  border-top: 7px solid transparent;
  /* right arrow slant */
  border-left: 11px solid #C88700;
  /* bottom, set background color here */
  font-size: 0;
  line-height: 0;
}
.wysiwyg ol li::marker {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: uppercase;
  color: #C88700;
}
.wysiwyg ol li::marker--proper {
  text-transform: none;
}
@media all and (min-width: 30em) {
  .wysiwyg .wysiwyg__img.alignright,
  .wysiwyg .wp-caption.alignright {
    float: right;
    margin: 1.875rem 0 1.875rem 1.875rem;
  }
  .wysiwyg .wysiwyg__img.alignleft,
  .wysiwyg .wp-caption.alignleft {
    float: left;
    margin: 1.875rem 1.875rem 1.875rem 0;
  }
}
@media all and (max-width: 29.9375em) {
  .wysiwyg .wysiwyg__img,
  .wysiwyg .wp-caption {
    display: block;
    margin: 20px auto;
  }
  .wysiwyg .wysiwyg__img img,
  .wysiwyg .wp-caption img {
    width: 100%;
    height: auto;
  }
}
.wysiwyg figure.aligncenter {
  margin-right: auto;
  margin-left: auto;
}
.wysiwyg figure img {
  width: 100%;
  height: auto;
}
@media all and (max-width: 47.9375em) {
  .wysiwyg figure {
    max-width: 100% !important;
  }
}
.wysiwyg figcaption {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  color: #3E3E3E;
}
.wysiwyg img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* first letter styling */
[data-first-letter="true"] .wysiwyg__first-letter {
  padding-top: 1.25rem;
}
[data-first-letter="true"] .wysiwyg__first-letter:first-letter {
  font-family: 'Bodoni Std';
  color: #C88700;
  float: left;
  font-size: 76px;
  line-height: 0.45;
  margin-top: -12px;
  padding-top: 30px;
  padding-right: 8px;
  padding-left: 3px;
  padding-bottom: 0;
}
@media all and (max-width: 47.9375em) {
  [data-first-letter="true"] .wysiwyg__first-letter:first-letter {
    margin-top: -26px;
  }
}
@media all and (min-width: 48em) {
  [data-first-letter="true"] .wysiwyg__first-letter:first-letter {
    font-size: 90px;
    line-height: 0.35;
  }
}
/*

Animated Revealing/Hiding Block Modules

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

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

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

*/
.js .reveal__target.is-revealed {
  overflow: visible;
}
/*

Animated Revealing/Hiding Block Modules

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

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

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

*/
.js .expand__target {
  max-height: 0;
  overflow: hidden;
}
.js .expand__target.is-expanded {
  max-height: 999px;
}
.js .expand__target.is-expanded,
.js .expand__target.was-expanded {
  transition: all 0.65s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*

Animated Revealing/Hiding Block Modules

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

Fade Target

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

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

*/
.js .fade__target {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.js .fade__target.is-faded {
  opacity: 1;
  max-height: 999px;
}
.js .fade__target.is-faded,
.js .fade__target.was-faded {
  transition: all 0.65s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*

Main Nav Module

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

    <nav class="nav-bar--menu" role="navigation">
        <h3 class="menu__title js-expand" id="reveal-main-nav">
            <svg class="icon"><use xlink:href="#rows"></svg>
            Main Menu
        </h3>
        <ul class="menu__list expand__target" id="main-nav-list">
            ...
        </ul>
    </nav>

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

Tabs

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

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

*/
.js .tabs > nav + *,
.js .tabs__section {
  position: relative;
  overflow: hidden;
}
.js .tabs > nav + * > *,
.js .tabs .tab {
  display: none;
}
.js .tabs > nav + * > *.is-current,
.js .tabs .tab.is-current {
  display: block;
}
.carousel {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.carousel__slide {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  top: 0;
  left: 0;
}
.background--black {
  background-color: #000;
}
.background--charcoal {
  background-color: #141414;
}
.background--slate {
  background-color: #29282b;
}
.background--slate-light {
  background-color: #363434;
}
.background--soft-black {
  background-color: #2B2B2B;
}
.background--caption-black {
  background-color: #3E3E3E;
}
.background--grey {
  background-color: #909090;
}
.background--light-grey {
  background-color: #EBEBEB;
}
.background--white {
  background-color: #fff;
}
.background--dark-gold {
  background-color: #A76816;
}
.background--medium-gold {
  background-color: #C88700;
}
.background--gold {
  background-color: #F0B23A;
}
.background--red {
  background-color: #D0401A;
}
.background--light-rust {
  background-color: #FF683F;
}
.background--blue {
  background-color: #0090AF;
}
.background--green {
  background-color: #008D52;
}
.background--dark-green {
  background-color: #004126;
}
.background--texture-light {
  background: url('https://cmhof.imgix.net/resources/texture_light.jpeg') #fff;
}
.background--texture-cream {
  background: url('https://cmhof.imgix.net/resources/texture_cream.jpeg') #fff;
}
.background--texture-dark {
  background: url('https://cmhof.imgix.net/resources/texture_dark.jpeg') #29282b;
}
.background--texture-gold {
  background: url('https://cmhof.imgix.net/resources/texture_gold.jpeg') #F0B23A;
}
.background--texture-gold-dark {
  background: url('https://cmhof.imgix.net/resources/texture_gold.jpeg') #F0B23A;
  position: relative;
  z-index: 0;
}
.background--texture-gold-dark:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.background--brand-primary {
  background: #F0B23A;
}
.background--brand-primary-dark {
  background: #C88700;
}
.background--brand-secondary {
  background: #A76816;
}
.background--gradient-overlay {
  position: relative;
}
.background--gradient-overlay::before {
  background: #000000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000000 100%);
  content: '';
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.color--black {
  color: #000;
}
.color--charcoal {
  color: #141414;
}
.color--slate {
  color: #29282b;
}
.color--caption-black {
  color: #3E3E3E;
}
.color--grey {
  color: #909090;
}
.color--white {
  color: #fff;
}
.color--dark-gold {
  color: #A76816;
}
.color--medium-gold {
  color: #C88700;
}
.color--gold {
  color: #F0B23A;
}
.color--red {
  color: #D0401A;
}
.color--light-rust {
  color: #FF683F;
}
.color--blue {
  color: #0090AF;
}
.color--teal {
  color: #009988;
}
.color--light-teal {
  color: #52DFBD;
}
.color--green {
  color: #008D52;
}
.color--brand-primary {
  color: #F0B23A;
}
.color--brand-primary-dark {
  color: #C88700;
}
.color--brand-secondary {
  color: #A76816;
}
.color--body-light {
  color: #AAA9AB;
}
.color--body-light-grey {
  color: #727274;
}
/**
 * Shared
 */
.gridlines {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.gridlines:not(.is-revealed) {
  display: none;
}
.gridlines__line {
  display: block;
  width: 100%;
  position: relative;
  background: rgba(31, 117, 174, 0.25);
  border: 0.0625rem solid #46D2EF;
  border-width: 0px 0.0625rem;
  pointer-events: none;
}
.gridlines__line:before {
  content: attr(data-count);
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0.625rem);
  color: #46D2EF;
}
.gridlines__row {
  display: flex;
  align-items: stretch;
  height: 100%;
  pointer-events: none;
}
@media all and (max-width: 64.6875em) {
  .gridlines__lg {
    display: none;
  }
}
@media all and (max-width: 47.9375em) {
  .gridlines__med {
    display: none;
  }
}
@media all and (min-width: 64.75em) {
  .gridlines__med {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .gridlines__sm {
    display: none;
  }
}
.gridlines__col {
  display: flex !important;
  align-items: stretch;
  pointer-events: none;
}
.gridlines__button {
  position: fixed;
  top: 0;
  left: 0;
}
@media all and (max-width: 47.9375em) {
  .globalHeader {
    display: flex;
    flex-direction: column;
  }
}
.navigation {
  position: relative;
}
@media all and (max-width: 64.6875em) {
  .navigation {
    overflow: hidden;
  }
}
@media all and (max-width: 47.9375em) {
  .navigation {
    height: 100px;
  }
}
@media all and (max-width: 47.9375em) {
  .navigation--sm {
    -o-box-shadow: 0 0 10px #141414;
    box-shadow: 0 0 10px #141414;
    position: fixed;
    top: var(--alert-height);
    transform: none;
    width: 100%;
    transition: transform 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    z-index: 10000;
  }
}
@media all and (min-width: 64.75em) {
  .navigation--sm {
    display: none;
  }
}
.navigation--sm-flex {
  display: flex;
  flex-direction: column-reverse;
}
@media all and (max-width: 64.6875em) {
  .navigation--sm-flex {
    height: calc(var(--app-height) - var(--header-height));
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100vw;
    z-index: 10;
    background: #141414;
    padding: 0 6.25%;
  }
}
@media all and (min-width: 64.75em) {
  .navigation--sm-flex {
    display: block;
    padding-top: 1.25rem;
  }
}
@media all and (min-width: 77.5em) {
  .navigation--sm-flex {
    padding-left: 170px;
  }
}
#navigation-main {
  display: none;
}
#navigation-main.is-revealed {
  display: block;
}
@media all and (min-width: 64.75em) {
  #navigation-main {
    display: block;
  }
}
.navigation__controls-open,
.navigation__controls-close {
  pointer-events: none;
}
.is-revealed > .navigation__controls-open {
  display: none;
}
.navigation__controls-close {
  display: none;
}
.is-revealed > .navigation__controls-close {
  display: block;
}
.navigation__controls-cart {
  line-height: 0;
  padding: 2px;
}
@media all and (max-width: 64.6875em) {
  .navigation__primary {
    position: relative;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__primary {
    display: flex;
    align-items: center;
    padding-left: 170px;
  }
}
@media all and (min-width: 77.5em) {
  .navigation__primary {
    padding-left: 0;
  }
}
.navigation__branding {
  display: none;
}
@media all and (min-width: 64.75em) {
  .navigation__branding {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(30px);
    display: block;
  }
}
.navigation__branding--simple {
  transform: translateY(30px);
}
.navigation__branding-figure {
  width: 80px;
  transition: width 150ms ease-in-out;
  line-height: 0;
}
@media all and (max-width: 47.9375em) {
  .is-small .navigation__branding-figure {
    width: 53.33333333px;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__branding-figure {
    width: 140px;
  }
  .navigationSimple .navigation__branding-figure {
    width: 80px;
  }
}
.navigation__branding-figure img {
  width: 100%;
  height: 100%;
}
@media all and (max-width: 64.6875em) {
  .navigation__branding-figure img {
    margin: 0.625rem 0;
  }
}
.navigation__primary-list {
  width: 100%;
  padding-bottom: 0;
}
@media all and (min-width: 48em) {
  .navigation__primary-list {
    border-top: 1px solid #7f7f7f;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__primary-list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__primary-item.has-icon {
    border-style: solid;
    border-width: 0 0 0 1px;
    border-color: #7f7f7f;
  }
}
@media all and (min-width: 77.5em) {
  .navigation__primary-item.has-icon {
    border-width: 0 1px 0;
  }
}
.navigation__primary-item--cta {
  display: none;
}
@media all and (min-width: 77.5em) {
  .navigation__primary-item--cta {
    margin-left: 10px;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
}
.navigation__primary-item-reveal {
  position: relative;
}
.navigation__primary-item-reveal:focus {
  outline: none;
}
.navigation__primary-item-reveal:focus:before {
  content: '';
  position: absolute;
  inset: 15px 0 12px;
  outline: 2px dashed #A76816;
}
.navigation__primary-item--link {
  letter-spacing: 0.04em;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 20px 0 25px;
  border-bottom: 1px solid #7f7f7f;
  color: #fff;
  text-decoration: none;
  transition: color 250ms ease-in-out;
  width: 100%;
  text-align: left;
}
.navigation__primary-item--link:hover,
.navigation__primary-item--link:focus {
  color: #fff;
}
@media all and (min-width: 100em) {
  .navigation__primary-item--link {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.22727273;
    letter-spacing: 0.06363636em;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .navigation__primary-item--link {
    margin-right: 20px;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__primary-item--link {
    margin-top: 0;
    padding: 30px 13px 25px;
    height: 100%;
    width: auto;
    text-align: center;
    border: none;
  }
  .is-hovering > .navigation__primary-item--link:after {
    display: block;
  }
  .is-open .navigation__primary-item--link {
    color: #7f7f7f;
  }
  .is-open .is-hovering .navigation__primary-item--link {
    color: #fff;
  }
}
@media all and (min-width: 64.75em) {
  .has-icon .navigation__primary-item--link {
    padding-right: 13px;
    padding-left: 13px;
  }
}
.has-icon .navigation__primary-item--link svg:first-of-type {
  width: 22px;
  height: 22px;
  margin-left: 10px;
}
.navigation__primary-item--link:after {
  display: none;
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #29282b;
  z-index: 11;
}
.navigation__primary-item--link[data-caret="slate-light"]:after {
  border-bottom-color: #363434;
}
.navigation__secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--app-height) - var(--header-height));
  padding: 1.25rem 0 0 0;
  transform: translateX(100%);
  transition: transform 250ms ease-in-out;
}
@media all and (max-width: 64.6875em) {
  .navigation__secondary {
    overflow-y: scroll;
  }
  .navigation__secondary::-webkit-scrollbar {
    width: 0.5rem;
  }
  .navigation__secondary::-webkit-scrollbar-track,
  .navigation__secondary::-webkit-scrollbar-thumb {
    background: transparent;
  }
  .navigation__secondary::-webkit-scrollbar-thumb {
    background: #A76816;
  }
}
.is-revealed + .navigation__secondary {
  transform: none;
}
@media all and (max-width: 64.6875em) {
  .is-revealed + .navigation__secondary {
    transform: translateX(-6.25vw);
  }
}
@media all and (min-width: 64.75em) {
  .navigation__secondary {
    height: auto;
    display: none;
    padding: 0;
    transform: none;
    transition: none;
    width: auto;
  }
  .navigation__secondary.is-revealed,
  .is-hovering > .navigation__secondary,
  .navigation__secondary:hover,
  .navigation__secondary:focus-within {
    display: block;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translateY(calc(100% - 1px));
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .navigation__secondary:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: #29282b;
    z-index: -1;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__secondary-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
  }
  .navigation__secondary-grid[data-grid="full"] {
    display: block;
    gap: 0;
  }
}
.navigation__secondary-content {
  padding: 30px 6.25%;
  background: #29282b;
}
@media all and (min-width: 64.75em) {
  .navigation__secondary-content {
    padding-left: 0;
    padding-right: 0;
  }
  [data-grid="three"] .navigation__secondary-content {
    grid-column: 4 / span 9;
  }
  [data-grid="seven"] .navigation__secondary-content {
    grid-column: 8 / span 5;
  }
}
.navigation__secondary-nav {
  padding: 0 6.25%;
}
@media all and (min-width: 64.75em) {
  .navigation__secondary-nav {
    background: #363434;
  }
  [data-grid="three"] .navigation__secondary-nav {
    grid-column: 1 / span 3;
  }
  [data-grid="seven"] .navigation__secondary-nav {
    grid-column: 1 / span 7;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__secondary-content,
  .navigation__secondary-nav {
    height: 100%;
    padding: 50px 0 40px;
    flex: 1 1 auto;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__eyebrow {
    align-items: center;
    padding-bottom: 1.25rem;
  }
}
@media all and (min-width: 77.5em) {
  .navigation__eyebrow {
    padding-bottom: 0;
  }
}
.navigation__eyebrow-list {
  margin: 0;
  padding-top: 1.25rem;
}
@media all and (min-width: 64.75em) {
  .navigation__eyebrow-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0 auto;
    padding-top: 0;
  }
}
.navigation__eyebrow-item {
  margin: 0 0 20px 0;
}
@media all and (max-width: 64.6875em) {
  .navigation__eyebrow-item[data-name="cart"] {
    display: none;
  }
}
@media all and (min-width: 64.75em) {
  .navigation__eyebrow-item {
    margin: 0 0 0 26px;
    line-height: 1;
  }
}
.navigation__eyebrow-item--link {
  font-size: 16px;
  font-size: 1rem;
  line-height: 0.0625;
  letter-spacing: 0.09375em;
  color: #F0B23A;
  padding: 0.75rem 0;
  text-decoration: none;
  text-transform: uppercase;
}
.navigation__eyebrow-item--link svg {
  width: 20px;
  height: 20px;
}
.navigation__eyebrow-item--link:focus {
  outline-offset: 2px;
  color: #fff;
  outline: 2px dashed #fff;
}
.navigation__eyebrow-item--cta {
  display: block;
  margin: 0 0 0 15px;
}
@media all and (min-width: 48em) {
  .navigation__eyebrow-item--cta {
    margin: 0 0 0 40px;
  }
}
@media all and (min-width: 77.5em) {
  .navigation__eyebrow-item--cta {
    display: none;
  }
}
.navigation__search {
  min-width: 90px;
}
@media all and (max-width: 64.6875em) {
  .navigation__search {
    margin: 1.25rem 0 2.5rem;
  }
}
.navigation__search-submit {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  line-height: 0;
}
.navigation__search-submit svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.navigation__search-label {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.09375em;
  position: absolute;
  top: 50%;
  left: 40px;
  text-transform: uppercase;
  transform: translateY(-50%);
}
.navigation__search-field:focus + .navigation__search-label,
.navigation__search-field.isnt-empty + .navigation__search-label {
  display: none;
}
.navigation__search-field {
  color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  padding: 8px 10px 8px 40px;
}
.navigation__search-field:focus {
  box-shadow: 0 0 0 2px #F0B23A;
}
@media all and (max-width: 64.6875em) {
  .navigation__search-field {
    outline: 2px solid #7f7f7f;
    transition: outline 250ms ease-in-out;
  }
}
.lb-tnew .navigation__eyebrow-item--link {
  letter-spacing: 0.09375em;
  font-size: 16px;
  line-height: 1;
  padding: 0.75rem 0;
}
@media all and (max-width: 47.9375em) {
  .globalAlerts {
    position: fixed;
    top: 0;
    z-index: 10;
  }
}
.footer {
  overflow: hidden;
}
.footer__flex {
  padding: 90px 0;
}
@media all and (min-width: 48em) {
  .footer__flex {
    display: flex;
    flex-wrap: wrap;
    padding: 90px 0;
    row-gap: 2.5rem;
  }
}
.footer__icon-list-text {
  letter-spacing: 0.05555556em;
}
.footer__brand-icons {
  display: flex;
  gap: 1.25rem;
}
.footer__brand-icons .icons__icon {
  min-width: 80px;
  min-height: 80px;
}
@media all and (min-width: 48em) {
  .footer__links {
    padding-left: 40px;
  }
}
.footer__links-item {
  line-height: 20px;
  margin-top: 0.625rem;
}
.footer__links-item:first-of-type {
  margin-top: none;
}
.footer__link {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.footer__link:focus,
.footer__link:hover {
  text-decoration: underline;
}
.footer__social {
  margin-top: 40px;
}
@media all and (min-width: 64.75em) {
  .footer__social {
    margin-top: 0;
  }
}
.footer__social-heading {
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
.footer__social-list {
  margin: 0 -0.625rem;
}
.footer__social-item {
  margin-left: 0.625rem;
}
.footer__social-item--link {
  color: #909090;
}
.footer__social-item--link:hover,
.footer__social-item--link:focus {
  color: #fff;
}
.footer__social-item svg {
  width: 30px;
  height: 30px;
}
.footer__map {
  position: relative;
  margin: 0 auto;
}
.footer__map picture {
  display: block;
  line-height: 0;
  width: 100%;
}
.footer__map picture img {
  display: block;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 767px;
}
@media all and (min-width: 48em) {
  .footer__map picture img {
    width: 1400px;
  }
}
@media all and (max-width: 47.9375em) {
  .breadcrumb {
    display: none;
  }
}
.footer__branding-figure {
  flex: 0 0 auto;
}
.lb-tnew .footer__endcap-branding,
.lb-tnew .footer__branding-name {
  font-size: 16px;
  line-height: 1.25;
}
.lb-tnew .footer__icon-list-text {
  font-size: 18px;
  line-height: 1.33333333;
}
.footer__cta svg {
  flex: 0 0 auto;
}
.gdpr {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10002;
}
.gdpr:before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
  opacity: 0;
  -webkit-animation-name: bg_fade_in;
          animation-name: bg_fade_in;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.gdpr.is-closing:before {
  -webkit-animation-name: bg_fade_out;
          animation-name: bg_fade_out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.gdpr__content {
  padding: 2.5rem 0;
  transform: translate3d(0, 100%, 0);
  -webkit-animation-name: toaster_up;
          animation-name: toaster_up;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
          animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.is-closing .gdpr__content {
  -webkit-animation-name: toaster_down;
          animation-name: toaster_down;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
@media all and (min-width: 48em) {
  .gdpr__content {
    padding: 60px 0 2.5rem;
  }
}
@media all and (min-width: 48em) {
  .gdpr__flex {
    width: calc((100% / 12) * 10);
    margin: 0 auto;
  }
}
.gdpr__copy {
  margin-top: 1.25rem;
  padding-right: 2.5rem;
}
@media all and (min-width: 48em) {
  .gdpr__copy {
    margin-top: 0;
    padding-left: 2.5rem;
  }
}
@media all and (min-width: 64.75em) {
  .gdpr__copy {
    padding-right: 0;
  }
}
.gdpr__icon svg {
  width: 40px;
  height: 40px;
}
@media all and (min-width: 48em) {
  .gdpr__icon {
    width: calc((100% / 12) * 1);
  }
}
.gdpr__accept {
  margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
  .gdpr__accept {
    flex: 1 0 auto;
    margin-top: 1.25rem;
    margin-left: 2.5rem;
  }
}
@media all and (min-width: 64.75em) {
  .gdpr__accept {
    margin-top: 0;
  }
}
.gdpr__close {
  position: absolute;
  top: 0;
  right: 0;
}
@media all and (min-width: 48em) {
  .gdpr__close {
    transform: translateY(-100%);
  }
}
@-webkit-keyframes toaster_up {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes toaster_up {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes toaster_down {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes toaster_down {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes bg_fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bg_fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bg_fade_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bg_fade_out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media all and (min-width: 64.75em) {
  .dropdownContent {
    padding-left: 2.5rem;
  }
  .dropdownContent[data-type="explore-history"] {
    padding-left: 0;
  }
}
.dropdownContent img.js-dynamic-image {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.dropdownContent img.js-dynamic-image.lazyloaded {
  opacity: 1;
}
.dropdownContent__section--hr {
  margin-top: 1.25rem;
  border-top: 1px solid #7f7f7f;
  padding-top: 1.25rem;
}
.dropdownContent__cards {
  padding: 1.25rem 0;
  margin: -1.25rem 0;
}
@media all and (min-width: 48em) {
  .dropdownContent__cards {
    margin: -0.625rem -0.625rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.dropdownContent__cards a {
  text-decoration: none;
  display: block;
}
.dropdownContent__cards a:focus {
  outline-offset: 4px;
  outline: 2px dashed #fff;
}
.dropdownContent__card {
  padding: 1.25rem 0;
}
@media all and (min-width: 48em) {
  .dropdownContent__card {
    padding: 0.625rem 0.625rem;
    flex: 0 0 auto;
  }
  [data-cols="half"] .dropdownContent__card {
    width: 50%;
  }
  [data-cols="thirds"] .dropdownContent__card {
    width: 33.33333%;
  }
}
.dropdownContent__card-figure {
  position: relative;
}
@media all and (min-width: 48em) {
  [data-cols="half"] .dropdownContent__card-figure {
    display: flex;
  }
}
.dropdownContent__card-img-wrap:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  [data-cols="half"] .dropdownContent__card-img-wrap {
    width: 45%;
    flex: 0 0 auto;
  }
  [data-cols="half"] .dropdownContent__card-img-wrap:before {
    padding-top: 100%;
  }
}
.dropdownContent__card-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  flex: 0 0 auto;
  padding: 30px 15px;
}
@media all and (min-width: 48em) {
  .dropdownContent__card-caption {
    width: 55%;
  }
}
[data-cols="thirds"] .dropdownContent__card-caption {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}
.dropdownContent__card-caption:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('https://cmhof.imgix.net/resources/texture_gold.jpeg') #A76816;
  z-index: -1;
}
.dropdownContent__name--first,
.dropdownContent__name--last {
  text-transform: uppercase;
}
.dropdownContent__name--first {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.025em;
}
@media all and (min-width: 48em) {
  .dropdownContent__name--first {
    font-size: clamp(1.25rem, 2.73vw, 2.25rem);
  }
}
.dropdownContent__name--last {
  font-size: 54px;
  font-size: 3.375rem;
  line-height: 1;
  letter-spacing: 0.01333333em;
}
@media all and (min-width: 48em) {
  .dropdownContent__name--last {
    font-size: clamp(1.5rem, 4.27vw, 3rem);
  }
}
.dropdownContent__featured-card {
  position: relative;
  overflow: hidden;
}
.dropdownContent__featured-card::after {
  background: #000000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000000 100%);
  content: '';
  position: absolute;
  height: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .dropdownContent .dropdownContent__featured-card {
    width: 50%;
  }
}
.dropdownContent__featured-card-caption {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.07142857;
  letter-spacing: 0.04285714em;
  position: absolute;
  bottom: 8%;
  left: 8%;
  z-index: 1;
  pointer-events: none;
  transition: bottom 250ms ease-in-out;
}
.links__overlay:hover ~ .dropdownContent__featured-card-caption,
.links__overlay:focus ~ .dropdownContent__featured-card-caption {
  bottom: 10%;
}
.dropdownContent__background-card-overlay {
  background-color: rgba(41, 40, 43, 0.8);
  background-size: cover;
  background-blend-mode: multiply;
}
.dropdownContent__background-card-overlay:before {
  content: '';
  opacity: 1;
  background-color: #141414;
  inset: 0;
  display: block;
  z-index: 2;
  transition: opacity 250ms ease-in-out;
}
.dropdownContent__background-card-overlay.lazyloaded:before {
  opacity: 0;
}
.dropdownContent__background-card-overlay:after {
  opacity: 0;
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  border: 2px solid #F0B23A;
  z-index: 1;
  transition: opacity 250ms ease-in-out;
}
.links__overlay:focus ~ .dropdownContent__background-card-overlay:after,
.links__overlay:hover ~ .dropdownContent__background-card-overlay:after {
  opacity: 1;
}
.dropdownContent__background-card-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 0 40px;
  width: 100%;
}
.dropdownContent__background-card-caption svg {
  display: block;
  width: 45px;
  height: 45px;
  margin: 0 auto;
}
.dropdownContent__disclaimer {
  padding: 26px 30px;
  background: #141414;
}
.dropdownContent__disclaimer .wysiwyg {
  flex: 1 1 auto;
  color: #AAA9AB;
}
.dropdownContent__disclaimer .wysiwyg strong {
  color: #fff;
}
.dropdownContent__disclaimer .wysiwyg em {
  color: #F0B23A;
  font-style: normal;
}
.dropdownContent__disclaimer-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #29282b;
}
.dropdownContent__disclaimer-icon svg {
  width: 60%;
  height: 60%;
}
.dropdownContent__heading {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.1;
}
@media all and (min-width: 48em) {
  .dropdownContent__flex {
    gap: 1.25rem;
  }
}
@media all and (min-width: 64.75em) {
  .dropdownContent__flex {
    gap: 2.5rem;
  }
}
@media all and (min-width: 48em) {
  .dropdownContent[data-type="experiences"] .dropdownContent__col {
    flex: 0 1 auto;
  }
  .dropdownContent[data-type="experiences"] .dropdownContent__col:first-of-type {
    width: 60%;
    flex: 0 1 auto;
  }
  .dropdownContent[data-type="experiences"] .dropdownContent__col:last-of-type {
    width: 40%;
    flex: 0 1 auto;
  }
}
.dropdownContent__hours {
  margin-top: 5rem;
}
.dropdownContent__active-hours {
  border-top: 1px solid #7f7f7f;
  padding-top: 1.25rem;
}
.dropdownContent__icon-item a {
  color: #fff;
  text-decoration: none;
}
.dropdownLinks,
.dropdownLinks__primary {
  height: 100%;
}
[data-grid="two-thirds"] .dropdownLinks__primary {
  gap: 2.5rem;
  row-gap: 0;
}
@media all and (min-width: 48em) {
  .dropdownLinks__primary-item {
    flex: 0 1 auto;
  }
}
@media all and (min-width: 48em) {
  .dropdownLinks__cols .dropdownLinks__primary-item {
    padding-right: 2.5rem;
  }
}
.dropdownLinks__primary-link {
  position: relative;
  display: block;
  margin-bottom: 20px;
  border-bottom: 1px solid #7f7f7f;
  padding-bottom: 20px;
}
.dropdownLinks__primary-link:after {
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url('/images/nav-right-primary.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  bottom: 23px;
  transform: translateX(10px);
}
.has-children .dropdownLinks__primary-link {
  margin: 0;
  border: none;
  padding: 0;
}
.has-children .dropdownLinks__primary-link:after {
  bottom: 1.5px;
}
.dropdownContent .dropdownLinks__primary-link {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.dropdownContent .dropdownLinks__primary-link:after {
  bottom: 1.5px;
}
.dropdownLinks__children {
  margin-top: 10px;
  border-top: 1px solid #7f7f7f;
  padding: 20px 0;
}
@media all and (min-width: 64.75em) {
  .dropdownLinks__children {
    margin: 20px 0 0 0;
    padding: 30px 0 40px 0;
  }
}
.dropdownLinks__children-item {
  margin-top: calc(0.625rem - 1px);
}
.dropdownLinks__children-link {
  text-decoration: none;
}
.dropdownLinks__children-link:focus {
  outline-offset: 2px;
  outline: 2px dashed #A76816;
  color: #F0B23A;
}
.dropdownLinks__secondary-link {
  font-size: 16px;
  font-size: 1rem;
  line-height: 0.875;
  letter-spacing: 0.09375em;
  text-transform: uppercase;
  text-decoration: none;
}
.dropdownLinks__secondary-link:focus {
  outline-offset: 2px;
  color: #fff;
  outline: 2px dashed #fff;
}
.dropdownLinks__back {
  display: block;
  margin-bottom: 1.25rem;
}
@media all and (min-width: 64.75em) {
  .dropdownLinks__back {
    display: none;
  }
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(35, 31, 32, 0.75);
  z-index: 500;
  overflow: scroll;
}
.modal__close {
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
  margin-left: auto;
}
.modal__content {
  position: absolute;
  padding: 1.25rem 2.5rem 2.5rem;
  top: 2.5rem;
  left: 50%;
  background: #fff;
  transform: translateX(-50%);
  width: 100%;
}
@media all and (min-width: 48em) {
  .modal__content {
    width: 87.5%;
  }
}
@media all and (min-width: 64.75em) {
  .modal__content {
    max-width: 1400px;
  }
}
.modal__content--dark {
  background-color: #141414;
}
.legoBlocks__jumplinks-label {
  flex: 0 0 auto;
}
.legoBlocks__jumplinks-label label {
  display: inline-block;
  pointer-events: none;
}
.legoBlocks__jumplinks-reveal {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  text-align: right;
}
@media all and (min-width: 48em) {
  .legoBlocks__jumplinks-reveal {
    display: none;
  }
}
.legoBlocks__jumplinks-reveal svg {
  transform: none;
  transition: transform 250ms ease-in-out;
}
.legoBlocks__jumplinks-reveal.is-revealed svg {
  transform: rotate(180deg);
}
@media all and (max-width: 47.9375em) {
  .legoBlocks__jumplinks-list {
    margin-left: -0.625rem;
    margin-right: -0.625rem;
  }
  .legoBlocks__jumplinks-list:not(.is-revealed) {
    display: none;
  }
}
.legoBlocks__jumplink {
  display: inline-block;
}
@media all and (min-width: 48em) {
  .legoBlock[data-spacing="small"] > div:first-child,
  .legoBlock[data-spacing="small"] > section:first-child {
    padding: 40px 0;
  }
}
.legoBlock[data-spacing="medium"] > div:first-child,
.legoBlock[data-spacing="medium"] > section:first-child {
  padding: 40px 0;
}
@media all and (min-width: 48em) {
  .legoBlock[data-spacing="medium"] > div:first-child,
  .legoBlock[data-spacing="medium"] > section:first-child {
    padding: 80px 0;
  }
}
.legoBlock[data-offset="true"] + .legoBlock[data-offset="true"] > div:first-child,
.legoBlock[data-offset="true"] + .legoBlock[data-offset="true"] > section:first-child {
  padding-top: 0;
}
@media all and (min-width: 48em) {
  .legoBlock[data-offset="true"] + .legoBlock[data-offset="true"] > div:first-child,
  .legoBlock[data-offset="true"] + .legoBlock[data-offset="true"] > section:first-child {
    padding-top: 0;
  }
}
.sliderControls__nav {
  padding: 30px;
}
.sliderControls__nav-btn {
  background: #F0B23A;
  color: #000;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
[data-size="small"] .sliderControls__nav-btn {
  width: 30px;
  height: 30px;
}
[data-size="small"] .sliderControls__nav-btn svg {
  width: 15px;
  height: 15px;
}
[data-theme="gold"] .sliderControls__nav-btn {
  background: #000;
  color: #fff;
}
.sliderControls__nav-btn[data-slider-prev] svg {
  margin-right: 5px;
}
.sliderControls__nav-btn[data-slider-next] {
  margin-left: 0.625rem;
}
.sliderControls__nav-btn[data-slider-next] svg {
  margin-left: 5px;
}
.sliderControls__nav-btn svg {
  width: 22px;
  height: 22px;
}
.sliderControls__progress {
  margin: 0 -0.3125rem;
  width: 100%;
}
.sliderControls__indicator {
  margin: 0 0.3125rem;
  width: 20%;
  flex: 1 1 auto;
}
.sliderControls__indicator-btn {
  height: 2px;
  width: 100%;
  background: rgba(127, 127, 127, 0.5);
}
.sliderControls__indicator-btn.is-current {
  background: #F0B23A;
}
[data-theme="gold"] .sliderControls__indicator-btn {
  background: #000;
}
[data-theme="gold"] .sliderControls__indicator-btn.is-current {
  background: #fff;
}
.shareSocialsButton {
  --tooltip-width: 8px;
  --horizontal-spacing: 1rem;
  --vertical-spacing: 1rem;
  --icon-size: 30px;
}
.shareSocialsButton .shareSocialsButton__button {
  cursor: pointer;
}
.shareSocialsButton .shareSocialsButton__content {
  position: absolute;
  background: #141414;
  width: 120%;
  padding: calc(var(--vertical-spacing) / 2) var(--horizontal-spacing);
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  top: calc(100% + var(--vertical-spacing));
}
.shareSocialsButton .shareSocialsButton__content:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-left: var(--tooltip-width) solid transparent;
  border-bottom: var(--tooltip-width) solid #141414;
  border-top: var(--tooltip-width) solid transparent;
  border-right: var(--tooltip-width) solid transparent;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--vertical-spacing) * -1);
}
.shareSocialsButton .shareSocialsButton__content .icons__icon {
  height: var(--icon-size);
  width: var(--icon-size);
}
@media all and (min-width: 30em) {
  .shareSocialsButton .shareSocialsButton__content {
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + var(--horizontal-spacing));
  }
  .shareSocialsButton .shareSocialsButton__content:before {
    border-left: var(--tooltip-width) solid transparent;
    border-bottom: var(--tooltip-width) solid transparent;
    border-top: var(--tooltip-width) solid transparent;
    border-right: var(--tooltip-width) solid #141414;
    left: calc(var(--horizontal-spacing) * -1);
    transform: translateY(-50%);
    top: 50%;
  }
}
.hero {
  position: relative;
  min-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
@media all and (min-width: 48em) {
  .hero {
    position: relative;
  }
  .hero::before {
    background: #000000;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000000 100%);
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
@media all and (min-width: 48em) {
  .hero__container {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 64.75em) {
  .hero__container {
    max-width: 1400px;
  }
}
.hero__wrapper {
  padding: 300px 0 40px;
  z-index: 1;
}
@media all and (max-width: 47.9375em) {
  .hero__wrapper {
    position: relative;
  }
  .hero__wrapper::before {
    background: #000000;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000000 100%);
    content: '';
    position: absolute;
    height: 80%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
@media all and (min-width: 48em) {
  .hero__wrapper {
    padding: 90px 0 60px;
    width: calc(((100% - 2.5rem) / 12) * 8);
  }
}
@media all and (min-width: 64.75em) {
  .hero__wrapper {
    width: calc(((100% + 2.5rem) / 12) * 7);
  }
}
@media all and (min-width: 77.5em) {
  .hero__wrapper {
    width: calc(((100% + 2.5rem) / 12) * 6);
  }
}
.hero__lead-in {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
  letter-spacing: 0.0125em;
  padding-right: 25%;
}
@media all and (min-width: 48em) {
  .hero__lead-in {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }
}
@media all and (min-width: 64.75em) {
  .hero__lead-in {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: 0.0125em;
    padding-right: 0;
  }
}
.hero__lead-in span {
  display: inline-block;
}
.hero__title {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.01675em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .hero__title {
    font-size: 52px;
    font-size: 3.25rem;
    line-height: 1.07692308;
    letter-spacing: 0.03076923em;
  }
}
@media all and (min-width: 64.75em) {
  .hero__title {
    font-size: 90px;
    font-size: 5.625rem;
    line-height: 0.91111111;
    letter-spacing: 0.01777778em;
  }
}
.hero__media-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@media all and (max-width: 47.9375em) {
  .hero__media-wrapper {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .hero__media--sm {
    display: none;
  }
}
@media all and (max-width: 47.9375em) {
  .hero__cta--secondary {
    display: none;
  }
}
@media all and (max-width: 47.9375em) {
  .cta[data-illustration="illustration-plaques"] .textMedia__media:before {
    padding-top: 80%;
  }
}
.cta__wrapper {
  border: 1px solid #F0B23A;
}
[data-centered="true"] .cta__wrapper:after,
[data-centered="true"] .cta__wrapper:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #F0B23A;
}
[data-centered="true"] .cta__wrapper:before {
  top: 20px;
}
[data-centered="true"] .cta__wrapper:after {
  bottom: 20px;
}
.cta__heading {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1.13636364;
  letter-spacing: 0.02272727em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .cta__heading {
    font-size: 64px;
    font-size: 4rem;
    line-height: 1.125;
    letter-spacing: 0.021875em;
  }
}
@media all and (min-width: 48em) {
  .cta__heading [data-centered="true"] {
    font-size: 90px;
    font-size: 5.625rem;
    line-height: 0.91111111;
    letter-spacing: 0.01777778em;
  }
}
.cta__content {
  padding: 30px 35px;
  text-align: center;
}
@media all and (min-width: 48em) {
  .cta__content {
    margin: 0 calc(((100% / 12) * 1) - 1.25rem);
    padding: 60px 0 80px;
    text-align: left;
  }
}
@media all and (min-width: 64.75em) {
  .cta__content {
    margin: 0 calc(((100% / 12) * 1) - 1.25rem);
    padding: 90px 0 100px;
  }
}
[data-centered="true"] .cta__content {
  padding: 60px 35px;
}
@media all and (min-width: 48em) {
  [data-centered="true"] .cta__content {
    margin: 0 auto;
    padding: 100px 0;
    width: calc((100% / 12) * 10);
  }
}
@media all and (min-width: 64.75em) {
  [data-centered="true"] .cta__content {
    margin: 0 auto;
    padding: 120px 0;
    width: calc((100% / 12) * 10);
  }
}
[data-illustration="guitar"] .cta__figure {
  background-repeat: no-repeat;
  background-position-y: center;
}
@media all and (max-width: 47.9375em) {
  [data-illustration="guitar"] .cta__figure {
    background-position: 0 25px;
    background-size: calc(100% - 25px);
  }
}
[data-illustration="illustration-tower"] .cta__figure {
  border-bottom: 1px solid #F0B23A;
}
.cta__illustration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
[data-illustration="illustration-tower"] .cta__illustration {
  transform: translateY(10%) scale(1.5);
}
@media all and (min-width: 48em) {
  [data-illustration="illustration-tower"] .cta__illustration {
    transform: translateY(10%);
  }
}
@media all and (max-width: 47.9375em) {
  [data-illustration="illustration-plaques"] .cta__illustration {
    right: auto;
    left: 0;
    width: 80%;
  }
}
@media all and (min-width: 48em) {
  [data-centered="true"] .cta__desc {
    margin-right: calc((100% / 10) * 2);
    margin-left: calc((100% / 10) * 2);
    text-align: center;
  }
}
.ctaContact__heading {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.02857143em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .ctaContact__heading {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1.05555556;
    letter-spacing: 0.02361111em;
  }
}
.ctaContact__info {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.27272727;
  letter-spacing: 0.06272727em;
}
@media all and (max-width: 47.9375em) {
  .ctaContact__content {
    text-align: left;
  }
}
.highlights {
  position: relative;
  padding: 40px 0 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .highlights {
    display: flex;
    flex-direction: column;
    padding: 80px 0 0;
    min-height: 100vh;
  }
  .highlights:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 100px;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #141414 10%, rgba(20, 20, 20, 0) 100%);
  }
}
.highlights[data-theme="gold"] {
  background: url('https://cmhof.imgix.net/resources/texture_gold.jpeg') #F0B23A;
}
.highlights[data-theme="gold"]:after {
  background: linear-gradient(to top, #a76816 10%, rgba(167, 104, 22, 0) 100%);
}
.highlights[data-theme="white"] {
  background: url('https://cmhof.imgix.net/resources/texture_cream.jpeg') #fff;
}
.highlights[data-theme="white"]:after {
  background: linear-gradient(to top, #f8f4f1 10%, rgba(248, 244, 241, 0) 100%);
}
.highlights__intro {
  padding-left: 6.25%;
  padding-right: 6.25%;
}
@media all and (min-width: 48em) {
  .highlights__intro {
    width: calc((100% / 12) * 8);
    padding-right: 0;
  }
}
@media all and (min-width: 100em) {
  .highlights__intro {
    width: calc((100% / 12) * 8);
    padding-left: calc((100vw - 1400px) * 0.5);
  }
}
@media all and (max-width: 47.9375em) {
  .highlights__cta {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 2px;
    color: #141414;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.0625;
    text-transform: none;
    letter-spacing: 1px;
    margin-top: 0.625rem;
  }
  .highlights__cta:focus {
    outline-offset: 2px;
    outline: 2px dashed #A76816;
  }
  .highlights__cta:hover {
    color: #A76816;
    cursor: pointer;
  }
  [data-theme="black"] .highlights__cta,
  [data-theme="gold"] .highlights__cta {
    color: #fff;
  }
  [data-theme="black"] .highlights__cta:focus,
  [data-theme="gold"] .highlights__cta:focus {
    outline-offset: 2px;
    color: #fff;
    outline: 2px dashed #fff;
  }
  [data-theme="black"] .highlights__cta:hover,
  [data-theme="gold"] .highlights__cta:hover {
    color: #F0B23A;
  }
}
@media all and (min-width: 48em) {
  .highlights__cta {
    width: auto;
    height: auto;
    margin: 0;
    line-height: normal;
    text-decoration: none;
    position: relative;
    -webkit-appearance: none;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    overflow: visible;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    padding: 15px 20px;
    margin-top: 1em;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 2px;
    background: transparent;
    color: #141414;
    border: 2px solid #C88700;
  }
  p > .highlights__cta {
    margin-top: 0;
  }
  .highlights__cta.is-disabled,
  .highlights__cta:disabled {
    cursor: not-allowed;
    background: #909090;
    color: #2B2B2B;
    opacity: 0.4;
  }
  .highlights__cta.is-disabled:hover,
  .highlights__cta:disabled:hover,
  .highlights__cta.is-disabled:focus,
  .highlights__cta:disabled:focus {
    background: #909090;
    color: #2B2B2B;
  }
  .highlights__cta:hover,
  .highlights__cta:focus,
  .highlights__cta.is-current {
    background: #C88700;
    color: #2B2B2B;
    border-color: transparent;
  }
  .highlights__cta:active {
    background: #A76816;
    color: #fff;
  }
  .highlights__cta:focus {
    outline: 2px solid #141414;
  }
  .highlights__cta--dark {
    color: #fff;
  }
  .highlights__cta--dark svg {
    color: #F0B23A;
  }
  .highlights__cta--dark:hover {
    color: #fff;
  }
  .highlights__cta--dark:hover svg {
    color: #fff;
  }
  [data-theme="black"] .highlights__cta,
  [data-theme="gold"] .highlights__cta {
    color: #fff;
  }
  .highlights__cta svg {
    color: #F0B23A;
  }
}
.highlights__overlay {
  position: relative;
}
@media all and (min-width: 48em) {
  .highlights__overlay {
    flex: 1 0 auto;
    overflow: hidden;
    margin-top: 80px;
    height: var(--slider-height);
    transition: height 250ms ease-in-out;
  }
}
.highlights__slides {
  --slidesOffset: 0px;
  display: flex;
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.35s ease-out;
  transform: translate3d(var(--slidesOffset), 0, 0);
}
.highlights__slides.is-dragging {
  transition-duration: 0.05s;
  transition-easing: linear;
}
@media all and (max-width: 47.9375em) {
  .highlights__slides {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: var(--slider-height);
    width: 100%;
    transition: height 0.35s ease-in-out, transform 0.35s ease-out;
  }
}
@media all and (min-width: 48em) {
  .highlights__slides {
    width: calc(50% - (150px / 2));
    flex-direction: column;
    transform: translate3d(0, var(--slidesOffsetY), 0);
  }
}
.highlights__nav {
  position: absolute;
  top: 0;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
}
@media all and (max-width: 47.9375em) {
  .highlights__nav {
    display: none;
  }
}
.highlights__nav:before,
.highlights__nav:after {
  content: '';
  width: 2px;
  background: #fff;
  height: calc(50% - 60px);
}
[data-theme="white"] .highlights__nav:before,
[data-theme="white"] .highlights__nav:after {
  background: #F0B23A;
}
@media all and (min-width: 48em) {
  .highlights__nav--sm {
    display: none;
  }
}
.highlights__nav-btn {
  letter-spacing: 0.07142857em;
  width: 54px;
  height: 54px;
  border-radius: 100%;
  background: #F0B23A;
  color: #141414;
  flex: 0 0 auto;
}
.highlights__nav-btn:hover,
.highlights__nav-btn:focus {
  background: #141414;
  color: #fff;
}
[data-theme="black"] .highlights__nav-btn:hover,
[data-theme="black"] .highlights__nav-btn:focus {
  background: #C88700;
}
.highlights__nav-btn svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}
.highlights__nav-btn:disabled {
  background: #B6B6B6;
  opacity: 0.5;
  color: #7f7f7f;
}
.highlights__nav-btn:disabled:hover,
.highlights__nav-btn:disabled:focus {
  background: #B6B6B6;
  color: #7f7f7f;
}
@media all and (max-width: 47.9375em) {
  .highlights__list-item {
    width: 100%;
    flex: 1 0 auto;
    margin: 0 1.25rem;
  }
  .highlights__list-item:last-of-type {
    margin-right: 6.25%;
  }
}
@media all and (min-width: 48em) {
  .highlight__item-image {
    display: none;
  }
}
@media all and (max-width: 47.9375em) {
  .highlights__item-title {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.09090909;
    letter-spacing: 0.04545455em;
    margin-top: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .highlights__item-title {
    margin-top: 0;
  }
}
.highlights__item-copy {
  margin: 1.25rem 0 0 0;
}
@media all and (min-width: 48em) {
  .highlights__item-copy {
    margin: 2.5rem 0;
  }
}
.highlights__img-wrapper {
  display: none;
}
@media all and (min-width: 48em) {
  .highlights__img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    margin-left: auto;
    z-index: 1;
    display: block;
    padding-left: 75px;
  }
  .highlights__img-wrapper img {
    height: 100%;
  }
}
@media all and (min-width: 48em) {
  .highlights__heading {
    align-items: center;
  }
}
.highlights__title {
  flex: 1 0 auto;
}
@media all and (max-width: 47.9375em) {
  .highlights__title {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.07142857;
    letter-spacing: 0.04285714em;
  }
}
.highlights__list-item:not(.is-current) .highlights__cta--primary,
.highlights__list-item:not(.is-current) .highlights__cta--secondary {
  pointer-events: none;
}
@-webkit-keyframes is-fading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes is-fading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.highlights__details {
  overflow-x: auto;
}
@media all and (min-width: 48em) {
  .highlights__details {
    border-top: 2px solid #141414;
  }
}
.highlights__detail {
  border-top: 2px solid #141414;
  padding: 1.25rem 1.25rem;
}
@media all and (min-width: 48em) {
  .highlights__detail {
    border-top: none;
    border-left: 2px solid #141414;
    border-bottom: 2px solid #141414;
    flex: 0 0 33%;
  }
  .highlights__detail:first-of-type,
  .highlights__detail:nth-of-type(4) {
    border-left: none;
  }
  [data-count="2"] .highlights__detail[data-key="curricular_connections"],
  .highlights__detail[data-key="select_standards"] {
    flex: 1 1 66%;
  }
  [data-count="4"] .highlights__detail:last-of-type {
    flex: 1 0 100%;
  }
}
.cardGrid__card {
  transform: translateY(50px);
  opacity: 0;
  margin: 1.25rem 0;
}
.cardGrid__card.in-view {
  -webkit-animation-name: animate__in;
          animation-name: animate__in;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
          animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.no-js .cardGrid__card {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cardGrid__card {
    transform: translateY(0);
    opacity: 1;
  }
  .cardGrid__card.in-view {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
  .in-view .cardGrid__card {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
}
.no-csstransitions .cardGrid__card,
.no-js .cardGrid__card {
  opacity: 1;
  transform: none;
}
@media all and (min-width: 48em) {
  .cardGrid__card {
    margin: 2.5rem 0;
  }
}
.cardGridSimple.is-condensed {
  padding: 20px 0 !important;
}
@media all and (min-width: 48em) {
  .cardGridSimple.is-condensed {
    padding: 40px 0 !important;
  }
}
.cardGridSimple__subtitle {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.14285714;
}
@media all and (min-width: 64.75em) {
  .steppedContent__intro {
    width: 75%;
    margin: 0 auto;
    text-align: center;
  }
}
.steppedContent__flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 60px;
}
@media all and (min-width: 48em) {
  .steppedContent__flex {
    margin-top: 120px;
  }
}
.steppedContent__step {
  opacity: 0;
  transform: translateX(20px);
  display: flex;
  margin-top: 40px;
}
.steppedContent__step.in-view {
  -webkit-animation-name: animate__in--left;
          animation-name: animate__in--left;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
          animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .steppedContent__step {
    transform: translateX(0);
    opacity: 1;
  }
  .steppedContent__step.in-view {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
  .in-view .steppedContent__step {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
}
.no-csstransitions .steppedContent__step,
.no-js .steppedContent__step {
  transform: translateX(0);
  opacity: 1;
}
@media all and (max-width: 47.9375em) {
  .steppedContent__step {
    flex-direction: column;
    gap: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .steppedContent__step {
    width: calc((100% / 12) * 11);
    margin-top: 120px;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .steppedContent__step {
    gap: 1.25rem;
  }
}
@media all and (min-width: 64.75em) {
  .steppedContent__step {
    width: calc((100% / 12) * 10);
    gap: 2.5rem;
  }
}
.steppedContent__step:nth-of-type(even) {
  opacity: 0;
  transform: translateX(-20px);
  align-self: flex-end;
}
.steppedContent__step:nth-of-type(even).in-view {
  -webkit-animation-name: animate__in--right;
          animation-name: animate__in--right;
  -webkit-animation-name: animate__in--left;
          animation-name: animate__in--left;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
          animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .steppedContent__step:nth-of-type(even) {
    transform: translateX(0);
    opacity: 1;
  }
  .steppedContent__step:nth-of-type(even).in-view {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
  .in-view .steppedContent__step:nth-of-type(even) {
    -webkit-animation-name: none;
            animation-name: none;
    -webkit-animation-duration: 0ms;
            animation-duration: 0ms;
    -webkit-animation-timing-function: unset;
            animation-timing-function: unset;
    -webkit-animation-delay: 0ms;
            animation-delay: 0ms;
    -webkit-animation-fill-mode: none;
            animation-fill-mode: none;
  }
}
.no-csstransitions .steppedContent__step:nth-of-type(even),
.no-js .steppedContent__step:nth-of-type(even) {
  transform: translateX(0);
  opacity: 1;
}
.steppedContent__step-label {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.02857143em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .steppedContent__step-label {
    flex: 0 1 auto;
    text-align: right;
    width: calc(50% - 200px);
  }
}
@media all and (min-width: 64.75em) {
  .steppedContent__step-label {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 1.13636364;
    letter-spacing: 0.02272727em;
  }
}
@media all and (min-width: 48em) {
  .steppedContent__step-content {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.45454545;
    width: 50%;
    flex: 0 1 auto;
    margin-top: 4px;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .steppedContent__step-content {
    padding-left: 1.25rem;
  }
}
@media all and (min-width: 64.75em) {
  .steppedContent__step-content {
    padding-left: 2.5rem;
  }
}
.steppedContent__step-figure:before {
  padding-top: 66.66666667%;
}
@media all and (min-width: 48em) {
  .steppedContent__step-figure:before {
    padding-top: 50%;
  }
}
@media all and (min-width: 48em) {
  .steppedContent__step-video .video {
    min-width: 200px;
  }
}
.steppedContent__step-media + .steppedContent__step-wysiwyg {
  margin-top: 1.875rem;
}
@media all and (min-width: 48em) {
  .textMedia {
    padding: 60px 0;
  }
}
.textMedia__flex {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column-reverse;
}
@media all and (min-width: 48em) {
  .textMedia__flex {
    flex-direction: row;
    margin: 0 6.25%;
  }
}
@media all and (min-width: 100em) {
  .textMedia__flex {
    margin: 0 calc((100vw - 1400px) * 0.5);
  }
}
@media all and (min-width: 48em) {
  .textMedia__flex[data-media-align="left"] {
    flex-direction: row-reverse;
  }
}
.textMedia__text {
  padding: 60px calc(6.25% + 30px) 60px 6.25%;
}
@media all and (min-width: 48em) {
  .textMedia__text {
    flex: 1 1 auto;
    align-self: center;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .textMedia__text {
    padding: 90px;
  }
}
@media all and (min-width: 64.75em) {
  .textMedia__text {
    padding: 120px;
  }
}
.textMedia__text:before {
  content: '';
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 0;
  left: 0;
  border-style: solid;
  border-color: #F0B23A;
  border-width: 1.5px 1.5px 0 0;
  pointer-events: none;
}
@media all and (min-width: 48em) {
  .textMedia__text:before {
    top: 40px;
    right: 40px;
    bottom: 40px;
    border-width: 1.5px 1.5px 1.5px 0;
  }
  [data-media-align="right"] .textMedia__text:before {
    left: 40px;
    right: 0;
    border-width: 1.5px 0 1.5px 1.5px;
  }
}
.textMedia__heading {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.07142857;
  letter-spacing: 0.04285714em;
}
@media all and (min-width: 48em) {
  .textMedia__heading {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 1.13636364;
    letter-spacing: 0.02681818em;
  }
}
@media all and (max-width: 47.9375em) {
  .textMedia__media:before {
    content: '';
    display: block;
    padding-top: 56.25%;
  }
}
@media all and (min-width: 48em) {
  .textMedia__media {
    flex: 0 0 auto;
    width: calc((100% / 12) * 5);
  }
  .textMedia__media:before {
    content: '';
    position: absolute;
    display: block;
    top: 40px;
    bottom: 40px;
    width: 100%;
    border-width: 1.5px 0;
    border-style: solid;
    border-color: #F0B23A;
  }
  .cta .textMedia__media:before {
    display: none;
  }
}
@media all and (min-width: 64.75em) {
  .textMedia__media {
    width: calc((100% / 12) * 5);
  }
}
[data-media-type="video"] .textMedia__figure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
}
@media all and (min-width: 48em) {
  [data-media-type="video"] .textMedia__figure {
    top: 50%;
    transform: translateY(-50%);
  }
}
@media all and (min-width: 48em) {
  .textMediaSimple__flex[data-media-align="left"] {
    flex-direction: row-reverse;
  }
}
@media all and (min-width: 77.5em) {
  .textMediaSimple__flex {
    margin: 0 0 0 calc(((100% + 2.5rem) / 12) * 1);
  }
  .textMediaSimple__flex[data-media-align="left"] {
    margin: 0 calc(((100% + 2.5rem) / 12) * 1) 0 0;
  }
}
@media all and (min-width: 48em) {
  .textMediaSimple__text {
    flex: 0 1 auto;
    padding: 0 1.25rem 0 0;
  }
  [data-media-align="left"] .textMediaSimple__text {
    padding: 0 0 0 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .textMediaSimple__media {
    flex: 0 0 auto;
    width: calc((100% / 12) * 5);
    padding: 0 0 0 calc(((100% / 12) * 1) - 1.25rem);
  }
  [data-media-align="left"] .textMediaSimple__media {
    padding: 0 calc(((100% / 12) * 1) - 1.25rem) 0 0;
  }
}
@media all and (min-width: 77.5em) {
  .textMediaSimple__media {
    width: calc((100% / 11) * 5);
    padding: 0 0 0 calc(((100% / 11) * 1) - 1.25rem);
  }
  [data-media-align="left"] .textMediaSimple__media {
    padding: 0 calc(((100% / 11) * 1) - 1.25rem) 0 0;
  }
}
.accordion {
  position: relative;
  padding: 60px 0 80px;
}
@media all and (min-width: 48em) {
  .accordion {
    padding: 80px 0 120px;
  }
}
[data-offset="true"] + [data-offset="true"] .accordion {
  padding-top: 0;
}
.accordion__group {
  padding: 1.25rem 0;
}
[data-accordion=true] .accordion__group {
  border-top: 2px solid #141414;
}
[data-accordion=true] .accordion__group:first-of-type {
  border-top: none;
}
.accordion__label {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.03571429em;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.accordion__label-icon {
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
}
.accordion__label.is-revealed .accordion__label-icon {
  transform: rotate(180deg);
}
.accordion__content:not(.is-revealed) {
  display: none;
}
.accordion__content-figure {
  flex: 20%;
}
.fullImage {
  position: relative;
}
.fullImage__figure {
  max-height: 70vh;
}
.fullImage__figure:not([data-overlay=""]):after {
  content: 'HONOR THY MUSIC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.fullImage__figure[data-overlay="gold"]:after {
  background: rgba(185, 124, 5, 0.6);
}
@supports (-webkit-text-stroke: 1px black) {
  .fullImage__figure[data-overlay="negative"]:after {
    color: transparent;
    -webkit-text-stroke: 3px black;
  }
}
.fullImage__figure[data-overlay="repeated"]:after {
  content: 'HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC HONOR THY MUSIC';
  line-height: 100px;
  color: #A76816;
}
.sponsors {
  position: relative;
}
.sponsors__border {
  padding: 2.5rem;
  border: 3px solid #F0B23A;
}
.sponsors__images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}
@media all and (max-width: 47.9375em) {
  .sponsors__images {
    gap: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .sponsors__images {
    margin: 0 calc(((100% / 12) * 1) - 1.25rem);
    padding-top: 2.5rem;
  }
}
@media all and (min-width: 64.75em) {
  .sponsors__images {
    margin: 0 calc(((100% / 12) * 1) - 1.25rem);
  }
}
.sponsors__figure {
  flex: 0 0 calc(25% - 2.5rem);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
@media all and (max-width: 47.9375em) {
  .sponsors__figure {
    flex-basis: calc(50% - 1.25rem);
  }
}
@media all and (min-width: 48em) {
  .sponsors__wysiwyg {
    margin: 80px calc(((100% / 10) * 1) - 1.25rem);
  }
}
@media all and (min-width: 64.75em) {
  .sponsors__wysiwyg {
    margin-right: calc(((100% / 10) * 1) - 1.25rem);
    margin-left: calc(((100% / 10) * 1) - 1.25rem);
  }
}
@media all and (min-width: 48em) {
  .sponsors__list-wrap {
    width: calc((100% / 12) * 10);
    margin: 0 auto;
  }
}
@media all and (min-width: 64.75em) {
  .sponsors__list-wrap {
    width: calc((100% / 12) * 10);
  }
}
.lessonDetails {
  position: relative;
  border-top: 2px solid #fff;
  padding-bottom: 20px;
}
.lessonDetails__item {
  flex: 1 1 auto;
}
@media all and (max-width: 47.9375em) {
  .lessonDetails__item {
    padding: 30px 0;
  }
  .lessonDetails__item:not(:first-of-type) {
    border-top: 2px solid #fff;
  }
}
@media all and (min-width: 48em) {
  .lessonDetails__item {
    max-width: 33%;
    padding: 1.25rem 1.25rem;
  }
  .lessonDetails__item:not(:first-of-type) {
    border-left: 2px solid #fff;
  }
  .lessonDetails__item:first-of-type {
    padding-left: 0;
  }
  .lessonDetails__item:last-of-type {
    padding-right: 0;
  }
}
.lessonDetails__item--label {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: capitalize;
}
@media all and (min-width: 48em) {
  .lessonHeader[data-image="true"] .lessonCategories {
    max-width: 60%;
  }
  .lessonHeader[data-image="true"] .lessonCategories .lessonCategories__list {
    gap: 0;
  }
  .lessonHeader[data-image="true"] .lessonCategories .lessonCategories__item {
    width: 50%;
    margin: 15px 0;
  }
  .lessonHeader[data-image="true"] .lessonCategories .lessonCategories__item:nth-of-type(2) {
    margin-top: 0;
  }
}
@media all and (min-width: 48em) {
  .lessonCategories__list {
    gap: 2.5rem;
  }
}
.lessonCategories__item {
  margin: 10px 0;
}
.lessonCategories__item:first-of-type {
  margin-top: 0;
}
@media all and (min-width: 48em) {
  .lessonCategories__item {
    flex: 0 1 auto;
    margin: 0;
  }
}
.lessonCategories__item-text {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: uppercase;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
}
.lessonCategories__item-text--proper {
  text-transform: none;
}
.lessonCategories__item-text,
.lessonCategories__item .links__link,
.lessonCategories__item .lists__horizontal--pgs a[href] {
  text-transform: capitalize;
}
.lessonCategories__item svg {
  width: 25px;
  height: 25px;
}
.brands {
  height: 100vh;
}
@media all and (min-width: 48em) {
  .brands:after {
    content: '';
    display: block;
    padding-top: 75%;
  }
}
.brands__title--sm {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.brands__title--lg {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.025em;
}
@media all and (min-width: 48em) {
  .brands__title--sm {
    font-size: 80px;
    font-size: 5rem;
    line-height: 1;
    letter-spacing: 0.025em;
  }
  .brands__title--lg {
    font-size: 80px;
    font-size: 5rem;
    line-height: 0.85;
    letter-spacing: 0.025em;
  }
}
.brands__copy {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
}
@media all and (min-width: 48em) {
  .brands__copy {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.54545455;
  }
}
.brands__wrapper {
  position: absolute;
  padding-right: 6.25%;
  bottom: 40px;
}
@media all and (min-width: 48em) {
  .brands__wrapper {
    width: 50%;
    bottom: 100px;
    padding-right: 0;
  }
}
.brands__logo-list {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brands__logo {
  position: relative;
}
.brands__logo .icons__icon {
  position: relative;
  width: 80px;
  height: 80px;
  fill: #000;
  transition: fill 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
@media all and (min-width: 48em) {
  .brands__logo .icons__icon {
    width: 100px;
    height: 100px;
  }
}
.brands__logo-badge {
  position: relative;
  transform: scale(1);
  transition: transform 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.brands__logo-badge:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  background-color: #fff;
  border-radius: 50%;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  z-index: 0;
}
.brands__logo-link:hover .brands__logo-badge,
.brands__logo-link:focus .brands__logo-badge {
  transform: scale(1.1);
}
.brands__logo-link:hover [data-color="red"] .icons__icon,
.brands__logo-link:focus [data-color="red"] .icons__icon {
  fill: #CF142B;
}
.brands__logo-link:hover [data-color="teal"] .icons__icon,
.brands__logo-link:focus [data-color="teal"] .icons__icon {
  fill: #009988;
}
.brands__logo-link:hover [data-color="gold"] .icons__icon,
.brands__logo-link:focus [data-color="gold"] .icons__icon {
  fill: #A76816;
}
.quote {
  padding: 2.5rem 0;
}
@media all and (min-width: 48em) {
  .quote {
    padding: 150px 0;
  }
}
.quote__lead-in {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.00833333em;
}
@media all and (min-width: 48em) {
  .quote__lead-in {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.0125em;
  }
}
.quote__copy {
  margin-top: 1.25rem;
}
@media all and (min-width: 48em) {
  .quote__copy {
    margin-top: 2.5rem;
  }
}
.quote__copy strong {
  color: #F0B23A;
  font-weight: unset;
}
.quote__cta:last-of-type {
  margin: 1.25rem 0 0 0;
}
.quote__cta-wrapper {
  margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
  .quote__cta-wrapper {
    display: flex;
    margin-top: 5rem;
  }
  .quote__cta:last-of-type {
    margin: 0 0 0 1.25rem;
  }
}
.imageSlider {
  overflow: hidden;
  padding: 40px 0;
}
@media all and (min-width: 48em) {
  .imageSlider {
    padding: 80px 0;
  }
}
.imageSlider__wrapper {
  margin-top: 40px;
}
@media all and (min-width: 48em) {
  .imageSlider__wrapper {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media all and (min-width: 64.75em) {
  .imageSlider__wrapper {
    max-width: 1400px;
  }
}
.imageSlider__slides-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  height: var(--slider-height);
  transition: height 250ms ease-in-out;
  overflow: visible;
}
@media all and (min-width: 48em) {
  .imageSlider__slides-wrapper {
    width: calc((100% / 12) * 10);
    margin: 0 auto;
  }
}
@media all and (min-width: 64.75em) {
  .imageSlider__slides-wrapper {
    width: calc((100% / 12) * 10);
  }
}
.imageSlider__slide-list {
  --slidesOffset: 0px;
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.35s ease-out;
  transform: translate3d(var(--slidesOffset), 0, 0);
  position: relative;
  height: auto;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.imageSlider__slide-list.is-dragging {
  transition-duration: 0.05s;
  transition-easing: linear;
}
.imageSlider__slide {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
}
.imageSlider__slide-figcaption {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.33;
}
@media all and (min-width: 48em) {
  .imageSlider__slide-figcaption {
    text-align: center;
    width: 70%;
  }
}
.is-current .imageSlider__slide-figcaption {
  opacity: 1;
}
.imageSlider__controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.imageSlider__controls:before {
  padding-top: 50%;
}
.imageSlider__controls:before {
  position: relative;
  width: 100%;
}
@media all and (min-width: 48em) {
  .imageSlider__controls {
    left: 50%;
    transform: translateX(-50%);
    width: calc((100% / 12) * 10);
  }
}
@media all and (min-width: 64.75em) {
  .imageSlider__controls {
    width: calc((100% / 12) * 10);
  }
}
.imageSlider__control-btn {
  width: 45px;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.imageSlider__control-btn[data-control="prev"] {
  left: 0.625rem;
}
@media all and (min-width: 48em) {
  .imageSlider__control-btn[data-control="prev"] {
    transform: translate(calc(-100% - 20px), -50%);
    text-align: right;
  }
}
.imageSlider__control-btn[data-control="next"] {
  right: 0.625rem;
}
@media all and (min-width: 48em) {
  .imageSlider__control-btn[data-control="next"] {
    transform: translate(calc(100% + 20px), -50%);
    text-align: left;
  }
}
@media all and (min-width: 48em) {
  .imageSlider__control-btn {
    width: 200px;
    padding: 0 2.5rem;
  }
  .imageSlider__control-btn[data-control="prev"] {
    left: 0;
  }
  .imageSlider__control-btn[data-control="next"] {
    right: 0;
  }
}
.imageSlider__control-btn.is-disabled {
  display: none;
}
.imageSlider__control-btn-circle {
  width: 45px;
  height: 45px;
  padding: 0;
  border: 2px solid #A76816;
  outline: 5px solid rgba(20, 20, 20, 0.8);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.8);
  color: #fff;
  transition: all 250ms ease-in-out;
}
.imageSlider__control-btn-circle svg {
  width: 18px;
  height: 18px;
}
@media all and (min-width: 48em) {
  .imageSlider__control-btn-circle {
    background: transparent;
    outline-color: transparent;
  }
}
@media all and (min-width: 64.75em) {
  .imageSlider__control-btn-circle {
    width: 60px;
    height: 60px;
  }
  .imageSlider__control-btn-circle svg {
    width: 30px;
    height: 30px;
  }
}
.imageSlider__control-btn:hover .imageSlider__control-btn-circle,
.imageSlider__control-btn:focus .imageSlider__control-btn-circle {
  background: rgba(167, 104, 22, 0.8);
  border-color: #fff;
  outline-color: rgba(167, 104, 22, 0.8);
}
.imageSlider__slide-ratio:before {
  position: relative;
  transition: opacity 250ms ease-in-out;
  opacity: 0;
  background: rgba(20, 20, 20, 0.8);
  z-index: 1;
}
.imageSlider__slide:not(.is-current) .imageSlider__slide-ratio:before {
  opacity: 1;
}
@media all and (min-width: 48em) {
  .carousel__intro {
    width: 50%;
    flex: 0 1 auto;
  }
}
@media all and (min-width: 77.5em) {
  .carousel__intro {
    width: calc((100% / 12) * 5);
  }
}
.carousel__wrapper {
  margin-top: 40px;
}
@media all and (min-width: 48em) {
  .carousel__wrapper {
    margin-top: 60px;
    margin-left: calc((100% / 12) * 1);
    width: 33%;
  }
}
@media all and (min-width: 64.75em) {
  .carousel__wrapper {
    margin-left: calc((100% / 12) * 3);
  }
}
.carousel__slides {
  transition: height 250ms ease-in-out;
  height: var(--slider-height);
}
.carousel__slides-list {
  --slidesOffset: 0px;
  display: flex;
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.35s ease-out;
  transform: translate3d(var(--slidesOffset), 0, 0);
  align-items: flex-start;
}
.carousel__slides-list.is-dragging {
  transition-duration: 0.05s;
  transition-easing: linear;
}
.carousel__slide:not(.is-current) .carousel__slide-figcaption {
  opacity: 0.33;
}
.carousel__slide.is-prev .carousel__slide-figcaption {
  opacity: 0;
}
@media all and (min-width: 48em) {
  .carousel__slide {
    margin-right: 2.5rem;
  }
}
.carousel__slide-figcaption {
  transition: opacity 250ms ease-in-out;
}
@media all and (max-width: 47.9375em) {
  .carousel__slide-figcaption {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
.carousel__slide-img-wrap:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .carousel__slide-img-wrap:before {
    padding-top: 75%;
  }
}
.carousel__controls {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.carousel__controls:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .carousel__controls {
    justify-content: center;
    margin-top: 40px;
    display: block;
    transform: translateX(-100%);
    padding-right: 2.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .carousel__controls:before {
    padding-top: 75%;
  }
}
@media all and (max-width: 47.9375em) {
  .carousel__button {
    width: 45px;
    height: 100%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .carousel__button[data-direction="prev"] {
    left: 0.625rem;
  }
  .carousel__button[data-direction="next"] {
    right: 0.625rem;
  }
  .carousel__button .carousel__button-circle {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #A76816;
    outline: 5px solid rgba(20, 20, 20, 0.8);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.8);
    color: #fff;
    transition: all 250ms ease-in-out;
  }
  .carousel__button .carousel__button-circle svg {
    width: 18px;
    height: 18px;
  }
  .carousel__button.is-disabled {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .carousel__button {
    position: relative;
    transform: translateY(calc(100% + 2.5rem));
  }
  .carousel__button.is-disabled {
    opacity: 0.3;
  }
}
.carousel__button svg {
  width: 32px;
  height: 32px;
}
.videoPlayer__figure {
  margin-top: 60px;
}
.videoPlayer__cta {
  margin-top: 100px;
}
.videoPlayer__download {
  line-height: 1;
  display: inline-block;
  padding-left: 40%;
}
.videoPlayer__download svg {
  color: #000;
}
.videoPlayer__download:hover svg,
.videoPlayer__download:focus svg {
  color: #C88700;
}
.videoPlayer__single {
  width: 100%;
}
@media all and (min-width: 48em) {
  .videoPlayer__single {
    margin: 0 auto;
    width: calc((100% / 12) * 10);
  }
}
@media all and (min-width: 64.75em) {
  .videoPlayer__single {
    width: calc((100% / 12) * 8);
  }
}
.museumInfo {
  position: relative;
}
.museumInfo__hours-status {
  color: #fff;
  background: #008D52;
}
.museumInfo__hours-status[data-status="closed"] {
  background: #D0401A;
}
.museumInfo__hours-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.625rem;
  max-width: 400px;
}
.museumInfo__hours-label {
  margin: 0;
}
.museumInfo__hours-time {
  margin: 0;
  text-align: right;
}
.imageGallery {
  position: relative;
  padding: 80px 0;
}
@media all and (min-width: 48em) {
  .imageGallery {
    padding: 140px 0 80px;
  }
}
.imageGallery__masonry {
  margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
  .imageGallery__masonry {
    margin-top: 60px;
  }
}
.imageGallery__list-item {
  flex: 0 0 30%;
}
.imageGallery__figure {
  background: #fff;
}
.imageGallery__figure img {
  display: block;
}
.imageGallery__figure-footer {
  position: relative;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
.imageGallery__figure-footer::before {
  background: #29282b;
  background: linear-gradient(to bottom, rgba(41, 40, 43, 0) 0, #29282b 100%);
  content: '';
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.imageGallery__figure-footer svg {
  margin: 20px;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}
.imageGallery__expand:focus ~ .imageGallery__figure-footer,
.imageGallery__expand:hover ~ .imageGallery__figure-footer {
  opacity: 1;
}
@media all and (min-width: 48em) {
  .imageGalleryModal__figure {
    width: 50%;
    flex: 0 0 auto;
  }
}
@media all and (min-width: 48em) {
  .imageGalleryModal__content {
    width: 50%;
    flex: 0 0 auto;
    padding-right: calc( ( 100% / 12 ) * 1 );
  }
}
.imageGallerlyModal__heading {
  border-bottom: 1px solid #F0B23A;
}
@media all and (max-width: 47.9375em) {
  .imageGallerlyModal__heading {
    margin-top: 2.5rem;
  }
}
.featured__cards {
  margin-top: 30px;
}
@media all and (min-width: 48em) {
  .featured__cards {
    margin-top: 64px;
  }
}
.featured__cards-flex {
  flex-direction: column;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .featured__cards-flex {
    flex-direction: row;
    margin: 0 -0.625rem;
  }
}
.featured__card {
  position: relative;
  margin-top: 2.5rem;
  padding: 0;
}
@media all and (min-width: 48em) {
  .featured__card {
    height: 100%;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .featured__card {
    width: 50%;
    flex: 0 1 auto;
    margin: 1.25rem 0.625rem 0;
  }
}
@media all and (min-width: 64.75em) {
  .featured__card:first-of-type {
    margin-top: 0;
  }
}
.featured__card-title {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.07142857;
  letter-spacing: 0.04285714em;
}
.announcements .featured__card-title {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.09090909;
  padding: 30px 15px 10px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0.08%, rgba(20, 20, 20, 0.98) 99.93%);
}
@media all and (min-width: 48em) {
  .announcements .featured__card-title {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.07142857;
    letter-spacing: 0.04285714em;
    padding: 60px 30px 10px;
  }
}
.featured__card-cta {
  display: inline-block;
}
.typeform.is-loading .typeform__loader {
  display: block;
  position: relative;
  height: 100vh;
  background: #141414;
}
.typeform.is-loading .typeform__form {
  display: none;
}
.typeform__loader {
  display: none;
}
@media all and (min-width: 48em) {
  .typeform__intro {
    width: 50%;
    margin: 0 auto;
  }
}
.audiogrid--full {
  padding: 60px 0 80px;
}
@media all and (min-width: 48em) {
  .audiogrid--full {
    padding: 80px 0 120px;
  }
}
[data-offset="true"] + [data-offset="true"] .audiogrid--full {
  padding-top: 0;
}
@media all and (min-width: 48em) {
  .audiogrid--full .audiogrid__container {
    margin: 0 auto;
  }
  .audiogrid--full .audiogrid__container[data-cols="2"] {
    width: calc((100% / 12) * 10);
  }
}
@media all and (min-width: 64.75em) {
  .audiogrid--full .audiogrid__container[data-cols="2"] {
    width: calc((100% / 12) * 8);
  }
}
@media all and (min-width: 77.5em) {
  .audiogrid--full .audiogrid__container[data-cols="3"] {
    width: calc((100% / 12) * 10);
  }
}
.audiogrid--full .audiogrid__heading {
  border-bottom: 2px solid #7f7f7f;
  padding-bottom: 30px;
}
@media all and (min-width: 48em) {
  .audiogrid__grid {
    display: grid;
  }
  [data-cols="2"] .audiogrid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-cols="3"] .audiogrid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.audiogrid--full .audiogrid__col {
  padding: 2.5rem 0;
}
.profileModalContent .audiogrid {
  margin-bottom: 66px;
}
@media all and (max-width: 47.9375em) {
  .profileModalContent .audiogrid {
    margin-bottom: 33px;
  }
}
.profileModalContent .audiogrid .audiogrid__heading {
  margin-top: 0;
}
.columnedContent__flex {
  margin-left: -30px;
  margin-right: -30px;
}
.columnedContent__col {
  flex: 0 0 auto;
  padding: 25px 30px;
  width: 100%;
}
@media all and (min-width: 48em) {
  .columnedContent__col {
    width: 50%;
  }
}
@media all and (min-width: 64.75em) {
  [data-cols="2"] .columnedContent__col {
    width: 50%;
  }
  [data-cols="3"] .columnedContent__col {
    width: 33.33333%;
  }
  [data-cols="4"] .columnedContent__col {
    width: 25%;
  }
  [data-cols="5"] .columnedContent__col {
    width: 20%;
  }
}
.columnedContent__col img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.columnedContent__grid-col {
  padding: 25px 0;
}
.columnedContent__map {
  position: relative;
  margin: 0 auto;
  min-height: 400px;
}
@media all and (max-width: 47.9375em) {
  [data-block="cmhfMap"] .columnedContent__grid-col .wysiwyg {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.exhibit__main .columnedContent__col img {
  -o-object-fit: inherit;
     object-fit: inherit;
}
.eventGrid__description {
  text-align: center;
}
.eventGrid__cta {
  text-align: center;
}
.eventGrid__item {
  display: flex !important;
}
.header__spacing {
  padding: 2.5rem 0;
}
.header__spacing--s .headerSimple__title {
  margin-bottom: 1.25rem;
}
@media all and (min-width: 48em) {
  .header__spacing {
    padding: 75px 0;
  }
  .header__spacing--s {
    padding: 60px 0;
  }
  .header__spacing--s .headerSimple__title {
    margin-bottom: 2.5rem;
  }
}
.headerTexture {
  position: relative;
  min-height: 50vh;
}
.headerTexture__content {
  padding: 60px 0 120px;
}
.headerTexture__content[data-image="true"] {
  width: 55%;
}
.headerTexture__content[data-image="false"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerTexture__content:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
[data-texture="paper"] .headerTexture__content:before {
  background: url('https://cmhof.imgix.net/resources/background-notebook-paper.png') #29282b;
  background-position: bottom;
}
.headerTexture__figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
}
.headerTexture__figure--sm {
  margin-right: calc(((100% + 2.5rem) / 12) * 1);
  margin-top: 60px;
  flex: 0 0 auto;
  width: 350px;
  height: 350px;
}
.headerFull[data-type="full_width_img"] {
  padding-top: 0;
}
@media all and (min-width: 48em) {
  .headerFull[data-type="full_width_img"] {
    padding-top: 0;
    padding-bottom: 2.5rem;
  }
}
@media all and (min-width: 48em) {
  .headerFull__copy {
    margin-left: 2.5rem;
    border-left: 1px solid #F0B23A;
    padding-left: 2.5rem;
  }
}
[data-type="full_width_img"] .headerFull__copy {
  margin-top: 0;
}
@media all and (min-width: 48em) {
  [data-type="full_width_img"] .headerFull__copy {
    margin-top: 2.5rem;
  }
}
[data-type="full_width_img"] .headerFull__title {
  margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
  [data-type="full_width_img"] .headerFull__title {
    margin-top: 2.5rem;
  }
}
.headerImage {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
@media all and (max-width: 47.9375em) {
  .headerImage {
    padding: 0;
  }
}
@media all and (min-width: 48em) {
  .headerImage[data-type="texture"] {
    padding-bottom: 200px;
  }
}
.headerImage__figure {
  position: relative;
}
.headerImage__figure:before {
  content: "";
}
.headerImage__figure:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .headerImage__figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 40%;
  }
  .headerImage__figure:before {
    padding-top: 200%;
  }
  [data-type="texture"] .headerImage__figure {
    width: 50%;
  }
}
.headerImage__illustration {
  width: 100%;
  margin: 0;
  background-image: url('https://cmhof.imgix.net/resources/illustration-tower-gold.svg');
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
}
.headerImage__illustration:before {
  content: "";
}
.headerImage__illustration:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .headerImage__illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    background-size: 170%;
    background-position: left 25%;
  }
  .headerImage__illustration:before {
    display: none;
  }
}
@media all and (min-width: 64.75em) {
  .headerImage__illustration {
    background-size: 70%;
    background-position-x: center;
  }
}
.headerImage__texture {
  display: none;
}
@media all and (min-width: 48em) {
  .headerImage__texture {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 40%;
    z-index: -1;
    display: block;
  }
  .headerImage__texture[data-size="full"] {
    right: 0;
  }
}
.headerImage__texture img {
  -o-object-position: right center;
     object-position: right center;
}
.headerImage__texture[data-texture="notebook-paper"] img {
  -o-object-position: left bottom;
     object-position: left bottom;
}
@media all and (min-width: 48em) {
  .headerImage__texture--sm {
    display: none;
  }
}
.headerImage__content {
  padding-top: 1.25rem;
  padding-bottom: 40px;
}
@media all and (min-width: 48em) {
  .headerImage__content {
    padding: 0;
    max-width: 60%;
  }
  [data-type="texture"][data-size="half"] .headerImage__content {
    width: 50%;
  }
  [data-texture="sleeve"] + .headerImage__content {
    padding-right: 80px;
  }
}
@media all and (min-width: 48em) {
  .headerImage__cta-wrapper {
    align-items: center;
  }
}
.headerImage__cta--primary + .headerImage__cta--secondary {
  margin: 1.25rem 0 0 0;
}
@media all and (min-width: 48em) {
  .headerImage__cta--primary + .headerImage__cta--secondary {
    margin: 0 0 0 1.25rem;
  }
}
.headerImage__badge {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.headerPerson {
  position: relative;
  background-image: url('https://cmhof.imgix.net/resources/background-member-plaque.jpeg');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}
.headerPerson__heading-flex {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media all and (min-width: 48em) {
  .headerPerson__heading-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 6.25%;
  }
}
@media all and (min-width: 100em) {
  .headerPerson__heading-flex {
    margin-left: calc((100vw - 1400px) * 0.5);
  }
}
.headerPerson__heading {
  padding-top: 60px;
}
@media all and (min-width: 48em) {
  .headerPerson__heading {
    flex: 0 0 auto;
    width: calc(((100% - 6.25%) / 12) * 7);
    padding: 130px 0 200px;
  }
}
@media all and (min-width: 100em) {
  .headerPerson__heading {
    width: calc(((100% - calc((100vw - 1400px) * 0.5)) / 12) * 7);
  }
}
.headerPerson__desc {
  padding-right: 80px;
}
@media all and (max-width: 47.9375em) {
  .headerPerson__desc {
    padding-right: 0;
  }
}
.hofMember .headerPerson__heading .headerPerson__back-link {
  position: absolute;
  top: 15px;
}
@media all and (min-width: 48em) {
  .hofMember .headerPerson__heading .headerPerson__back-link {
    top: 15px;
  }
}
@media all and (min-width: 64.75em) {
  .hofMember .headerPerson__heading .headerPerson__back-link {
    top: 45px;
  }
}
.headerPerson__figure {
  margin-top: 1.25rem;
}
.headerPerson__figure:before {
  padding-top: 100%;
}
@media all and (min-width: 48em) {
  .headerPerson__figure {
    flex: 0 1 auto;
    margin-top: 0;
  }
  .headerPerson__figure:before {
    padding-top: 100%;
  }
}
.headerPerson__details-flex {
  display: flex;
  gap: 2.5rem;
}
@media all and (max-width: 47.9375em) {
  .headerPerson__details-flex {
    flex-direction: column;
    gap: 1.25rem;
  }
}
.headerPerson__details-item svg {
  width: 30px;
  height: 30px;
}
.headerPerson__details-item--term {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.02142857em;
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: uppercase;
  color: #F0B23A;
}
.headerPerson__details-item--term--proper {
  text-transform: none;
}
.headerPerson__details-item--def {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.07142857;
  letter-spacing: 0.04285714em;
  font-weight: 800;
  font-style: normal;
  font-family: trade-gothic-next-condensed, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  color: #fff;
}
.headerPodcasts__figcaption {
  margin-top: 1.25rem;
}
.headerPodcasts__cta {
  font-size: 16px;
  font-size: 1rem;
  line-height: 0.0625;
  padding: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
}
.headerPodcasts__cta:hover,
.headerPodcasts__cta:focus {
  color: #000;
}
.headerPodcasts__cta--primary {
  border-color: #fff;
}
.headerPodcasts__cta--primary:hover,
.headerPodcasts__cta--primary:focus {
  background: #fff;
}
.headerPodcasts__cta--secondary {
  border-color: #F0B23A;
}
.headerPodcasts__cta--secondary:hover,
.headerPodcasts__cta--secondary:focus {
  background: #F0B23A;
}
@media all and (max-width: 47.9375em) {
  .headerSimple[data-hasImage="true"] {
    padding-top: 0;
  }
}
.calendarTime svg {
  width: 22px;
  height: 22px;
  margin-right: 15px;
  flex: 0 0 auto;
}
.calendarTime__time {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.04535714em;
  text-transform: uppercase;
}
.calendarTime__time:hover,
.calendarTime__time:focus {
  color: #C88700;
}
.calendarTime__duration {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: capitalize;
}
.calendarTime__select svg {
  transform: none;
  transition: transform 250ms ease-in-out;
}
.calendarTime__select.is-revealed svg {
  transform: rotate(180deg);
}
.calendarTime__select-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  padding: 0.625rem 0.625rem;
  background: #3E3E3E;
}
.calendarTime__select-list:not(.is-revealed) {
  display: none;
}
.calendarTime__select-link {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.11111111;
  font-weight: 800;
  font-style: normal;
  font-family: trade-gothic-next-condensed, Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
  color: #fff;
  padding: 0.3125rem 0.3125rem;
  border-top: 1px solid #fff;
}
.calendarTime__select-link:first-of-type {
  border-top: none;
}
.calendarTime__select-link:hover,
.calendarTime__select-link:focus {
  color: #F0B23A;
}
.calendarDate + .calendarDate {
  margin-top: 2.5rem;
}
.calendarDate__number {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.025em;
  margin-right: 10px;
}
.calendarDate__month {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.04545455em;
  text-transform: uppercase;
}
@media all and (min-width: 64.75em) {
  .calendarHeader[data-media-size="full"] .calendarDate__month {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.14285714;
    letter-spacing: 0.03571429em;
  }
}
.calendarDate__weekday {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.08333333em;
}
.calendarTags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.calendarTags__tag {
  font-family: 'Sequel100Wide';
  font-weight: 400;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.18181818;
  letter-spacing: 1.57px;
  text-transform: uppercase;
  background: #3E3E3E;
  color: #fff;
  padding: 5px 11.5px;
}
.calendarTags__tag--proper {
  text-transform: none;
}
.calendarTags__tag--red {
  background: #D0401A;
}
.eventsSlider {
  position: relative;
  overflow: hidden;
  height: 100%;
  z-index: 1;
  width: 100%;
}
@media all and (min-width: 48em) {
  .hero .eventsSlider {
    position: absolute;
    bottom: 0;
    right: 0;
    height: auto;
    width: calc(((100% - 2.5rem) / 12) * 4);
  }
}
@media all and (min-width: 64.75em) {
  .hero .eventsSlider {
    width: 25%;
  }
}
.eventsSlider__list {
  --slidesOffset: 0px;
  display: flex;
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.35s ease-out;
  transform: translate3d(var(--slidesOffset), 0, 0);
  transition: height 250ms ease-in-out;
  height: var(--slider-height);
  position: relative;
  align-items: flex-start;
}
.eventsSlider__list.is-dragging {
  transition-duration: 0.05s;
  transition-easing: linear;
}
@media all and (max-width: 47.9375em) {
  .hero .eventsSlider__list {
    width: 100vw;
  }
}
.eventsSlider__slide {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
  border-style: solid;
  border-color: #F0B23A;
  border-width: 1.5px 0;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  transition-delay: 250ms;
}
.eventsSlider__slide.is-current {
  opacity: 1;
}
.eventsSlider__slide .dropdownContent__featured-card:before {
  padding-top: 100%;
}
@media all and (max-width: 47.9375em) {
  .navigation .eventsSlider__slide .dropdownContent__featured-card:before {
    padding-top: 50%;
  }
}
.eventsSlider__figure {
  max-height: 200px;
}
.eventsSlider__cta {
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.eventsSlider__cta:hover,
.eventsSlider__cta:focus {
  background: transparent;
}
.eventsSlider__heading {
  padding: 30px 1.25rem;
}
.eventsSlider__heading-cta {
  flex: 1 0 auto;
}
.calWidget {
  position: relative;
  z-index: 10;
}
@media all and (min-width: 48em) {
  .calWidget {
    max-width: 360px;
  }
}
.calWidget__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calWidget__current-month {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.calWidget__month-btn span,
.calWidget__month-btn svg {
  pointer-events: none;
}
.calWidget__row {
  display: flex;
  flex-wrap: wrap;
  align-items: strech;
  margin: 0;
}
.calWidget__row--weekday {
  border-bottom: 2px solid #EBEBEB;
}
.calWidget__col {
  width: 14.28571429%;
  margin: 6px 0;
  text-align: center;
}
.calWidget__date-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.is-active-date .calWidget__date-text {
  background: #F0B23A;
  color: #141414;
}
.is-active-date .calWidget__date-text:hover {
  background: #C88700;
  color: #fff;
}
.calWidget__input[disabled] ~ .calWidget__date-text {
  opacity: 0.4;
}
.disabled .calWidget__date-text:hover,
.calWidget__input[disabled]:hover ~ .calWidget__date-text {
  opacity: 0.4;
}
.calWidget__input:focus ~ .calWidget__date-text {
  outline: 2px solid #0090AF;
}
.calWidget__label {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
}
.calWidget__label.disabled {
  cursor: not-allowed;
}
.calWidget__input {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
}
.disabled .calWidget__input {
  cursor: not-allowed;
}
.calWidget__label:not(.is-active-date) .calWidgetEntry .calWidget__label,
.calWidget__label:not(.is-active-date) .calWidgetEntry .calWidget__input {
  cursor: not-allowed;
}
.calWidgetEntry .calWidgetEntry__details {
  position: absolute;
  top: 34px;
  z-index: 20;
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.calWidgetEntry .calWidgetEntry__details:not(.is-revealed) {
  visibility: hidden;
}
@media all and (min-width: 48em) {
  .event__details {
    border-top: 1px solid #7f7f7f;
  }
}
.event__details-col {
  border-color: #7f7f7f;
  border-style: solid;
  padding: 20px;
}
@media all and (max-width: 64.6875em) {
  .event__details-col {
    border-width: 1px 0;
  }
  .event__details-col:last-of-type {
    border-bottom: 0;
  }
}
@media all and (min-width: 48em) {
  .event__details-col {
    border-width: 0 1px 0 0;
    padding: 15px;
    flex: 1 1 auto;
  }
  .calCardHalf .event__details-col {
    padding: 20px;
  }
  .event__details-col:first-of-type {
    padding-left: 0;
  }
  .event__details-col:last-of-type {
    border-width: 0;
  }
}
.event__duration {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
}
.card {
  overflow: hidden;
  position: relative;
}
.card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: var(--overlay-transform);
  transition: all 250ms ease-in-out;
  background: rgba(167, 104, 22, 0.8);
  display: flex;
  flex-direction: column;
}
.is-hovering .card__overlay {
  transform: none;
  background: rgba(20, 20, 20, 0.8);
  overflow-y: auto;
}
.card__overlay::-webkit-scrollbar {
  width: 0.5rem;
}
.card__overlay::-webkit-scrollbar-track,
.card__overlay::-webkit-scrollbar-thumb {
  background: transparent;
}
.is-hovering .card__overlay::-webkit-scrollbar-thumb {
  background: #A76816;
}
.card__figure {
  position: relative;
}
.card__figure:before {
  padding-top: 135.66666667%;
}
@media all and (min-width: 48em) {
  .card__figure:before {
    padding-top: 126.36363636%;
  }
}
.card__heading {
  padding: 30px;
}
.card__subtitle {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
  letter-spacing: 0.0125em;
}
.card__title {
  font-size: 34px;
  font-size: 2.125rem;
  line-height: 1.11764706;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.card__desc {
  padding: 0 30px 30px;
}
.card__cta-wrapper {
  padding: 0 30px 30px;
  margin-top: auto;
}
.card__cta--secondary {
  padding: 0.75rem 0.4rem;
}
.cardHorizontal {
  position: relative;
}
.cardHorizontal__overlay:hover ~ .cardHorizontal__flex {
  background-color: #29282b;
}
.cardHorizontal__overlay:hover ~ .cardHorizontal__flex .cardHorizontal__title {
  color: #F0B23A;
}
.cardHorizontal__flex {
  display: flex;
  flex-direction: column-reverse;
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media all and (min-width: 48em) {
  .cardHorizontal__flex {
    flex-direction: row;
  }
}
.cardHorizontal__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 100%;
}
@media all and (min-width: 48em) {
  .cardHorizontal__content {
    flex: 0 0 60%;
  }
}
.cardHorizontal__title {
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cardHorizontal__figure {
  flex: 100%;
}
@media all and (min-width: 48em) {
  .cardHorizontal__figure {
    flex: 0 0 40%;
  }
}
.cardProfileModal {
  position: relative;
}
@media all and (max-width: 47.9375em) {
  .cardProfileModal {
    margin-top: 1.25rem;
  }
}
.cardProfileModal__file {
  z-index: 2;
}
.cardProfileModal__name--first {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: 0.025em;
}
.cardProfileModal__name--last {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.cardProfileModal__short-description {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.28571429;
}
.cardProfileModal__cta-link {
  justify-content: center;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.21428571;
  letter-spacing: 0.07142857em;
  color: #fff;
}
.cardProfileModal__cta-link svg {
  width: 16px;
  height: 16px;
}
@media all and (min-width: 48em) {
  .cardProfileModal__cta {
    gap: 1.25rem;
  }
}
.cardProfileModal__figure:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .cardProfileModal__figure:before {
    padding-top: 100%;
  }
}
.cardSquare {
  position: relative;
}
.cardSquare__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.cardSquare__figcaption {
  position: relative;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 25%;
  z-index: 1;
}
.cardSquare__figcaption::before {
  background: #000000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000000 100%);
  content: '';
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.calCardFull {
  position: relative;
  background: #29282b;
}
.calCardFull[data-entry-type="featured"] {
  background: #141414;
}
.calCardFull__content {
  padding: 20px;
}
@media all and (min-width: 64.75em) {
  .calCardFull__content {
    flex: 1 0 auto;
    width: 67%;
    padding: 20px 25px;
  }
}
.calCardFull__title {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.27272727;
}
.calCardFull__desc {
  position: relative;
  height: 48px;
  overflow: hidden;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71428571;
}
.calCardFull__desc:before {
  content: '';
  position: absolute;
  top: 24px;
  right: 0;
  color: inherit;
  padding-left: 50px;
  width: 100px;
  height: 24px;
  text-align: right;
  background: linear-gradient(to right, rgba(41, 40, 43, 0) 0, #29282b 50px, #29282b 100%);
}
.calCardFull__desc p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.71428571;
}
.calCardFull__tag {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.18181818;
  padding: 4.5px 11.5px;
  background: #141414;
  color: #fff;
  letter-spacing: 1.57px;
  /*.calCardFull:hover & {
        background: @charcoal;
    }*/
}
[data-entry-type="featured"] .calCardFull__tag {
  background: #3E3E3E;
}
.calCardFull__tag--limited {
  background: #D0401A;
}
.calCardFull__media {
  position: relative;
}
@media all and (min-width: 64.75em) {
  .calCardFull__media {
    flex: 0 1 auto;
    width: 33%;
  }
}
.calCardFull__illustration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: translateY(20%);
}
.calCardFull__logo {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 50px;
  height: 50px;
  z-index: 1;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  background: #fff;
}
@media all and (min-width: 48em) {
  .calCardFull__logo {
    width: 80px;
    height: 80px;
  }
}
.calCardFull__figure:before {
  padding-top: 50%;
}
@media all and (min-width: 64.75em) {
  .calCardFull__figure {
    position: relative;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
  }
  .calCardFull__figure:before {
    content: "";
    width: 100%;
    display: block;
    padding-top: 120%;
  }
  .calCardFull__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .no-objectfit .calCardFull__figure img {
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .calCardFull__figure img,
  .calCardFull__figure video,
  .calCardFull__figure .video,
  .calCardFull__figure iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .no-objectfit .calCardFull__figure img,
  .no-objectfit .calCardFull__figure video,
  .no-objectfit .calCardFull__figure .video,
  .no-objectfit .calCardFull__figure iframe {
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
@media all and (max-width: 64.6875em) {
  .calCardFull__figure:before {
    padding-top: 100%;
  }
}
.calCardHalf {
  position: relative;
}
.calCardHalf__content {
  padding: 20px;
}
@media all and (min-width: 48em) {
  .calCardHalf__content {
    padding: 20px 25px;
  }
}
.calCardHalf__title {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.27272727;
}
.calCardHalf__tag {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1.18181818;
  padding: 4.5px 11.5px;
  letter-spacing: 1.57px;
}
.calCardHalf__media {
  position: relative;
}
.calCardHalf__logo {
  position: absolute;
  right: 1.25rem;
  width: 90px;
  height: 90px;
  z-index: 1;
  transform: translateY(-50%);
}
.calCardHalf__figure {
  overflow: hidden;
}
.calCardHalf__illustration {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(30px, 20%);
  width: 50%;
  height: 120%;
}
.calCardMini {
  position: relative;
}
@media all and (max-width: 47.9375em) {
  .calCardMini .calCardMini__figure:before {
    padding-top: 100%;
  }
}
.calCardMini__when {
  display: flex;
  justify-content: space-between;
  border-color: #7f7f7f;
  border-style: solid;
  border-width: 1px 0 0 0;
}
.calCardMini__when-col {
  flex: 1 1 auto;
}
.calCardMini__date,
.calCardMini__time {
  padding: 10px;
}
.calCardMini__time {
  flex: 1 1 auto;
  border-color: #7f7f7f;
  border-style: solid;
  border-width: 0 0 0 1px;
}
.cardProfile__flex {
  row-gap: 1.1875rem;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .cardProfile__flex {
    row-gap: 2.5rem;
  }
}
@media all and (min-width: 64.75em) {
  .cardProfile__flex {
    row-gap: 2.5rem;
  }
}
@media all and (min-width: 30em) and (max-width: 47.9375em) {
  .cardProfile__col {
    width: 50%;
  }
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .cardProfile__col {
    width: 50%;
  }
}
@media all and (min-width: 64.75em) {
  .cardProfile__col {
    width: 33.33333%;
  }
}
@media all and (min-width: 77.5em) {
  [data-count="4"] .cardProfile__col {
    width: 25%;
  }
}
.cardProfile {
  height: 100%;
}
.cardProfile__figure {
  height: 100%;
}
.cardProfile__ratio:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .cardProfile__ratio:before {
    padding-top: 100%;
  }
}
.cardProfile__figcaption {
  padding: 1.25rem 1.25rem;
  flex: 1 0 auto;
}
@media all and (min-width: 64.75em) {
  .cardProfile__figcaption {
    padding: 0 2.5rem;
  }
}
.cardProfile__name--first {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02857143em;
}
@media all and (min-width: 48em) {
  .cardProfile__name--first {
    letter-spacing: 0.025em;
    font-size: clamp(1.25rem, 2.73vw, 2.25rem);
  }
}
@media all and (min-width: 64.75em) {
  .cardProfile__name--first {
    transform: translateY(-15px);
  }
}
.cardProfile__name--last {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: 0.02272727em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .cardProfile__name--last {
    letter-spacing: 0.01333333em;
    font-size: clamp(1.5rem, 4.27vw, 3.38rem);
  }
}
@media all and (min-width: 64.75em) {
  .cardProfile__name--last {
    transform: translateY(-20px);
  }
}
.cardProfile__cta {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.21428571;
  letter-spacing: 0.07142857em;
  text-transform: none;
}
.cardProfile__cta svg {
  width: 12px;
  height: 12px;
}
.links__overlay:hover + .cardProfile__figure .cardProfile__cta,
.links__overlay:focus + .cardProfile__figure .cardProfile__cta {
  text-decoration: underline;
  -webkit-text-decoration-color: #F0B23A;
          text-decoration-color: #F0B23A;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.calCardStrip__title {
  letter-spacing: 0.04em;
  padding: 15px 20px;
  text-decoration: none;
}
.calCardStrip__when {
  display: flex;
  justify-content: space-between;
  border-color: #7f7f7f;
  border-style: solid;
  border-width: 1px 0 0 0;
}
@media all and (min-width: 48em) {
  .calCardStrip__when {
    flex-direction: column;
    justify-content: center;
    margin-left: 25px;
    border-width: 0 0 0 1px;
    width: 30%;
    flex: 0 0 auto;
  }
}
.calCardStrip__date,
.calCardStrip__time {
  padding: 10px;
}
.calCardStrip__day {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.025em;
}
.calCardStrip__month {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.0125em;
  text-transform: uppercase;
}
.calCardStrip__time {
  flex: 1 1 auto;
  border-color: #7f7f7f;
  border-style: solid;
  border-width: 0 0 0 1px;
}
@media all and (min-width: 48em) {
  .calCardStrip__time {
    border-width: 1px 0 0 0;
  }
}
.calCardStrip__time-display {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.cardSquareBorder {
  position: relative;
}
.cardSquareBorder__figure {
  position: relative;
}
.cardSquareBorder__figure:after {
  content: '';
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  left: 0.625rem;
  border: 2px solid #CC8A00;
  z-index: -1;
}
.cardSkinny {
  position: relative;
}
@media all and (max-width: 47.9375em) {
  [data-post-type="podcasts"] .cardSkinny {
    margin-top: 30px;
  }
}
.cardSkinny__link {
  z-index: 2;
}
.cardSkinny__link:hover ~ .cardSkinny__flex .searchResults__title,
.cardSkinny__link:focus ~ .cardSkinny__flex .searchResults__title,
.cardSkinny__link:hover ~ .cardSkinny__flex .cardSkinny__title,
.cardSkinny__link:focus ~ .cardSkinny__flex .cardSkinny__title {
  color: #F0B23A;
}
.cardSkinny__link:hover ~ .cardSkinny__flex .cardSkinny__figure-ratio,
.cardSkinny__link:focus ~ .cardSkinny__flex .cardSkinny__figure-ratio {
  filter: grayscale(0);
  opacity: 1;
}
.cardSkinny__copy {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 1.25rem;
}
@media all and (max-width: 47.9375em) {
  [data-post-type="hof_members"] .cardSkinny__copy {
    padding-top: 200px;
  }
}
@media all and (min-width: 48em) {
  .cardSkinny__copy {
    padding-top: 2.5rem !important;
    padding-right: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 2.5rem !important;
  }
}
.searchResults__title,
.cardSkinny__title {
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cardSkinny__title {
  text-transform: uppercase;
}
.cardSkinny__title--small {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.16666667;
}
@media all and (max-width: 47.9375em) {
  [data-post-type="podcasts"] .cardSkinny__title {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }
}
.cardSkinny__subtitle {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.025em;
  margin-top: 0.625rem;
  color: #AAA9AB;
}
@media all and (min-width: 48em) {
  .cardSkinny__subtitle {
    margin-top: 1.25rem;
  }
}
@media all and (max-width: 47.9375em) {
  [data-post-type="podcasts"] .cardSkinny__subtitle {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.83333333;
    letter-spacing: 0.04em;
  }
}
[data-post-type="podcasts"] .cardSkinny__desc {
  position: relative;
  height: 54px;
  overflow: hidden;
}
[data-post-type="podcasts"] .cardSkinny__desc:before {
  content: '';
  position: absolute;
  top: 36px;
  right: 0;
  color: inherit;
  padding-left: 50px;
  width: 100px;
  height: 18px;
  text-align: right;
  -webkit-mask-image: linear-gradient(to right, rgba(41, 40, 43, 0) 0, #29282b 50px, #29282b 100%);
          mask-image: linear-gradient(to right, rgba(41, 40, 43, 0) 0, #29282b 50px, #29282b 100%);
}
[data-post-type="podcasts"] .cardSkinny__desc:before {
  background: url('https://cmhof.imgix.net/resources/texture_dark.jpeg');
}
@media all and (min-width: 48em) {
  [data-post-type="podcasts"] .cardSkinny__desc {
    height: 78px;
  }
  [data-post-type="podcasts"] .cardSkinny__desc:before {
    height: 26px;
    top: 52px;
  }
}
.cardSkinny__figure-ratio {
  filter: grayscale(1);
  opacity: 0.3;
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media all and (max-width: 47.9375em) {
  [data-post-type="hof_members"] .cardSkinny__figure {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: calc(100% + 6.25vw);
    transform: translateX(-6.25vw);
    border-top: 1px solid #fff;
  }
  [data-post-type="hof_members"] .cardSkinny__figure-ratio {
    opacity: 0.5;
  }
  [data-post-type="press-release"] .cardSkinny__figure {
    width: 100%;
  }
  [data-post-type="press-release"] .cardSkinny__figure-ratio,
  [data-post-type="podcasts"] .cardSkinny__figure-ratio {
    opacity: 1;
    filter: none;
  }
}
@media all and (min-width: 48em) {
  .cardSkinny__figure {
    flex: 0 0 auto;
    width: 45%;
  }
}
@media all and (min-width: 48em) {
  .cardSkinny[data-size="small"] .cardSkinny__figure {
    align-self: center;
    width: calc((100% / 12) * 3);
  }
}
@media all and (min-width: 100em) {
  .cardSkinny[data-size="small"] .cardSkinny__figure {
    width: calc((100% / 12) * 3);
  }
}
.cardSkinny[data-size="small"][data-ratio="square"] .cardSkinny__figure {
  width: 90px;
}
@media all and (min-width: 48em) {
  .cardSkinny[data-size="small"][data-ratio="square"] .cardSkinny__figure {
    margin-top: 0;
    width: 15%;
    align-self: center;
  }
}
@media all and (max-width: 47.9375em) {
  [data-post-type="hof_members"] .cardSkinny__figure-ratio {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 50px;
    left: 0;
  }
  [data-post-type="hof_members"] .cardSkinny__figure-ratio:before {
    display: none;
  }
  [data-post-type="hof_members"] .cardSkinny__figure-ratio:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #29282b 0%, rgba(41, 40, 43, 0) 30%);
  }
}
.cardText {
  position: relative;
}
.cardText__overlay:hover ~ .cardText__content {
  background-color: #29282b;
}
.cardText__overlay:hover ~ .cardText__content .cardText__title {
  color: #F0B23A;
}
.cardText__content {
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cardText__title {
  transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.featuredCard {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column-reverse;
}
.featuredCard[data-media-align="left"] {
  flex-direction: column;
}
@media all and (min-width: 64.75em) {
  .featuredCard {
    flex-direction: row;
    align-items: center;
  }
  .featuredCard[data-media-align="left"] {
    flex-direction: row-reverse;
  }
  .featured__cards .featuredCard {
    height: 100%;
  }
}
.featuredCard__media {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.featuredCard__media:before {
  padding-top: 100%;
}
.featuredCard__media:before {
  content: '';
  width: 100%;
  display: block;
}
.featuredCard__media .featuredCard__video {
  position: absolute;
  width: 100%;
  height: 100%;
}
@media all and (min-width: 64.75em) {
  .featuredCard__media.featuredCard__media-primary:before {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .featuredCard__media:before {
    padding-top: 67%;
  }
}
.featuredCard__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  z-index: 1;
}
@media all and (min-width: 64.75em) {
  .featuredCard__text:before {
    display: none;
  }
}
.featuredCard__heading {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.09090909;
  padding: 30px 15px 10px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0.08%, rgba(20, 20, 20, 0.98) 99.93%);
}
@media all and (min-width: 48em) {
  .featuredCard__heading {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1.1;
    padding: 60px 30px 10px;
  }
}
.featuredCard__cta-wrapper {
  padding: 0 15px 15px;
  background: rgba(20, 20, 20, 0.98);
}
@media all and (min-width: 48em) {
  .featuredCard__cta-wrapper {
    padding: 0 30px 30px;
  }
}
.featuredCard__cta--primary {
  padding: 0.2rem;
  text-transform: uppercase;
}
.featuredCard__video .video,
.featuredCard__video .video__embed {
  width: 100%;
  height: 100%;
}
.eventCard {
  position: relative;
  width: 100%;
}
.eventCard .eventCard__wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.eventCard .eventCard__media {
  position: relative;
}
.eventCard .eventCard__media .eventCard__icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #F0B23A;
  color: #000;
}
.eventCard .eventCard__content {
  display: flex;
  flex-flow: column;
  height: 100%;
  justify-content: space-between;
  padding: 20px;
}
.eventCard .eventCard__content .eventCard__title {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.1;
}
.eventCard .eventCard__content .eventCard__details {
  border-top: 1px solid #7f7f7f;
}
.eventCard .eventCard__content .eventCard__details .eventCard__details-col {
  border-right: 1px solid #7f7f7f;
  padding: 15px 20px;
  flex: 1 1 50%;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.16666667;
  text-transform: uppercase;
}
.eventCard .eventCard__content .eventCard__details .eventCard__details-col:first-child {
  padding-left: 0;
}
.eventCard .eventCard__content .eventCard__details .eventCard__details-col:last-child {
  border-right: none;
}
.fileList {
  position: relative;
}
.fileList__list-item {
  position: relative;
  border-bottom: 2px solid #F0B23A;
  padding: 1.25rem 0;
}
@media all and (min-width: 48em) {
  .fileList__list-item {
    flex: 0 0 48%;
  }
}
.fileList__list-item svg {
  color: #141414;
  width: 30px;
  height: 30px;
}
.fileList__name {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.36363636;
  letter-spacing: 0.04272727em;
}
.lightboxModal.is-open {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #141414;
  background-image: url('https://cmhof.imgix.net/resources/texture_dark.jpeg');
  cursor: default;
}
.lightboxModal__figure {
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
}
.lightboxModal__figure-img {
  position: relative;
  max-height: 94vh;
}
.lightboxModal__open {
  cursor: zoom-in;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
.lightboxModal__open:focus {
  outline: 2px dashed #141414;
}
.lightboxModal__close {
  display: none;
  position: absolute;
  top: 1.25rem;
  right: 2.5rem;
  z-index: 2;
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.is-open .lightboxModal__close {
  display: block;
}
.lightboxModal__close .icons__icon {
  color: #A76816;
}
.lightboxModal__zoom {
  position: absolute;
  bottom: 1.25rem;
  right: 2.5rem;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  z-index: 2;
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.lightboxModal__zoom-btn {
  display: none;
  border-radius: 0;
}
.is-open .lightboxModal__zoom-btn {
  display: block;
}
.lightboxModal__zoom-btn .icons__icon {
  color: #A76816;
}
.lightboxModal__zoom-btn[data-zoom="zoom-in"] {
  cursor: zoom-in;
  border-bottom: none;
}
.lightboxModal__zoom-btn[data-zoom="zoom-out"] {
  cursor: zoom-out;
  border-bottom: none;
}
.lightboxModal__zoom-btn:disabled {
  cursor: not-allowed;
}
@media all and (max-width: 64.6875em) {
  .profileModal.modal {
    top: 100px;
  }
}
.profileModal__content {
  padding: 0;
  top: 0;
  left: 0;
  transform: none;
  background: #fff;
}
.profileModal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}
@media all and (max-width: 47.9375em) {
  .profileModal__close {
    top: 0.625rem;
    right: 0.625rem;
  }
}
@media all and (min-width: 48em) {
  .profileModalContent__flex {
    display: flex;
    justify-content: space-between;
  }
}
.profileModalContent__name--first {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02857143em;
}
@media all and (min-width: 48em) {
  .profileModalContent__name--first {
    letter-spacing: 0.025em;
    font-size: clamp(2rem, 4.02vw, 3.75rem);
    transform: translateY(-25px);
  }
}
.profileModalContent__name--last {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: 0.02272727em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .profileModalContent__name--last {
    letter-spacing: 0.0125em;
    font-size: clamp(4rem, 8.03vw, 7.5rem);
    transform: translateY(-30px);
  }
}
.profileModalContent__nickname {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.03333333em;
  transform: translateY(5px);
}
@media all and (min-width: 48em) {
  .profileModalContent__nickname {
    letter-spacing: 0.025em;
    font-size: clamp(1rem, 2.16vw, 2rem);
    transform: translateY(-16px);
  }
}
.profileModalContent__short-description {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.28571429;
}
@media all and (max-width: 47.9375em) {
  .profileModalContent__short-description {
    margin-top: 1.25rem;
  }
}
.profileModalContent__col:last-of-type {
  padding: 40px 6.25%;
}
@media all and (min-width: 48em) {
  .profileModalContent__col:first-of-type {
    width: 33%;
  }
  .profileModalContent__col:last-of-type {
    width: 66%;
    flex: 1 0 auto;
    padding: 40px 2.5rem 80px;
  }
}
.profileModalContent__headshot-figure {
  display: flex;
  justify-content: space-between;
}
@media all and (max-width: 47.9375em) {
  .profileModalContent__headshot-figure img {
    -o-object-position: top center;
       object-position: top center;
  }
}
@media all and (min-width: 48em) {
  .profileModalContent__headshot-figure {
    align-items: stretch;
    flex-direction: column;
  }
}
.profileModalContent__headshot-ratio {
  width: 50%;
  flex: 0 0 auto;
}
.profileModalContent__headshot-ratio:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .profileModalContent__headshot-ratio {
    width: auto;
  }
  .profileModalContent__headshot-ratio:before {
    padding-top: 100%;
  }
}
.profileModalContent__headshot-figcaption {
  width: 50%;
  flex: 0 0 auto;
  padding: 2.5rem 1.25rem;
}
@media all and (min-width: 48em) {
  .profileModalContent__headshot-figcaption {
    width: auto;
    flex: 1 0 auto;
    padding: 0 2.5rem;
  }
}
@media all and (max-width: 64.6875em) {
  .pageModal.modal {
    top: 100px;
  }
}
.pageModal__content {
  background: #fff;
  max-width: 600px;
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2.5rem 2.5rem;
  border: 6px solid #fcb040;
}
.pageModal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}
@media all and (max-width: 47.9375em) {
  .pageModal__close {
    top: 0.625rem;
    right: 0.625rem;
  }
}
@media all and (min-width: 48em) {
  .pageModalContent__flex {
    display: flex;
    justify-content: space-between;
  }
}
.pageModalContent__name--first {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02857143em;
}
@media all and (min-width: 48em) {
  .pageModalContent__name--first {
    letter-spacing: 0.025em;
    font-size: clamp(2rem, 4.02vw, 3.75rem);
    transform: translateY(-25px);
  }
}
.pageModalContent__name--last {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: 0.02272727em;
  text-transform: uppercase;
}
@media all and (min-width: 48em) {
  .pageModalContent__name--last {
    letter-spacing: 0.0125em;
    font-size: clamp(4rem, 8.03vw, 7.5rem);
    transform: translateY(-30px);
  }
}
.pageModalContent__nickname {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.03333333em;
  transform: translateY(5px);
}
@media all and (min-width: 48em) {
  .pageModalContent__nickname {
    letter-spacing: 0.025em;
    font-size: clamp(1rem, 2.16vw, 2rem);
    transform: translateY(-16px);
  }
}
.pageModalContent__short-description {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.28571429;
}
@media all and (max-width: 47.9375em) {
  .pageModalContent__short-description {
    margin-top: 1.25rem;
  }
}
.pageModalContent__col:last-of-type {
  padding: 40px 6.25%;
}
@media all and (min-width: 48em) {
  .pageModalContent__col:first-of-type {
    width: 33%;
  }
  .pageModalContent__col:last-of-type {
    width: 66%;
    flex: 1 0 auto;
    padding: 40px 2.5rem 80px;
  }
}
.pageModalContent__headshot-figure {
  display: flex;
  justify-content: space-between;
}
@media all and (max-width: 47.9375em) {
  .pageModalContent__headshot-figure img {
    -o-object-position: top center;
       object-position: top center;
  }
}
@media all and (min-width: 48em) {
  .pageModalContent__headshot-figure {
    align-items: stretch;
    flex-direction: column;
  }
}
.pageModalContent__headshot-ratio {
  width: 50%;
  flex: 0 0 auto;
}
.pageModalContent__headshot-ratio:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  .pageModalContent__headshot-ratio {
    width: auto;
  }
  .pageModalContent__headshot-ratio:before {
    padding-top: 100%;
  }
}
.pageModalContent__headshot-figcaption {
  width: 50%;
  flex: 0 0 auto;
  padding: 2.5rem 1.25rem;
}
@media all and (min-width: 48em) {
  .pageModalContent__headshot-figcaption {
    width: auto;
    flex: 1 0 auto;
    padding: 0 2.5rem;
  }
}
.siteNotificationModal__content {
  background: url('https://cmhof.imgix.net/resources/texture_dark.jpeg') #29282b;
}
.siteNotificationModal__close {
  position: absolute;
  top: 15px;
  right: 15px;
}
.video {
  position: relative;
}
.video--responsive {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.video__upload {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video__iframe {
  -o-object-fit: cover;
     object-fit: cover;
}
.audioPlayer.is-small {
  border-color: #7f7f7f;
  border-style: solid;
  border-width: 2px 0;
  margin-top: 1.25rem;
  padding: 0.625rem 0;
}
.audiogrid--simple .audiogrid__col:nth-of-type(2n) .audioPlayer.is-small {
  margin-left: 2.5rem;
}
.audioPlayer__button {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.audioPlayer__button[data-control=play] {
  margin-right: 0.3125rem;
}
.audioPlayer__button.is-active .icons__icon,
.audioPlayer__button:hover .icons__icon,
.audioPlayer__button:focus .icons__icon {
  color: #F0B23A;
}
.audioPlayer__button:focus {
  outline: 2px dashed #141414;
  outline-offset: 2px;
}
.audioPlayer__button:not(:focus-visible) {
  outline: none;
}
.audioPlayer__button .icons__icon {
  width: 24px;
  height: 24px;
}
.audioPlayer__button[data-control="pause"] {
  display: none;
}
.audioPlayer__button[data-control="play"].is-active {
  display: none;
}
.audioPlayer__button[data-control="play"].is-active + .audioPlayer__button[data-control="pause"] {
  display: block;
}
.audioPlayer__progress {
  display: flex;
  flex: 70%;
  max-width: 300px;
  margin-top: 5px;
  margin-left: 0.625rem;
}
@media all and (max-width: 64.6875em) {
  .audioPlayer__progress {
    flex-wrap: wrap;
    margin-top: 8px;
  }
}
.audioPlayer__progress-time {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  flex: 0 0 30%;
  margin-top: 0;
  margin-left: 1.25rem;
}
@media all and (max-width: 64.6875em) {
  .audioPlayer__progress-time {
    flex: 100%;
    margin-top: 8px;
    margin-left: 4px;
  }
}
/* progress slider */
.audioPlayer__progress-input {
  /* variables */
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  background: transparent;
  /* Otherwise white in Chrome */
  flex: 0 1 100%;
  /* Special styling for WebKit/Blink */
  /* All the same stuff for Firefox */
  /* All the same stuff for IE */
}
.audioPlayer__progress-input::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.audioPlayer__progress-input:focus {
  outline: 2px dashed #141414;
}
.audioPlayer__progress-input::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.audioPlayer__progress-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -7px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2B2B2B;
  cursor: pointer;
}
@media all and (max-width: 64.6875em) {
  .audioPlayer__progress-input::-webkit-slider-thumb {
    margin-top: -6px;
    width: 14px;
    height: 14px;
  }
}
.audioPlayer__progress-input::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2B2B2B;
  cursor: pointer;
}
@media all and (max-width: 64.6875em) {
  .audioPlayer__progress-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
  }
}
.audioPlayer__progress-input::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2B2B2B;
  cursor: pointer;
}
@media all and (max-width: 64.6875em) {
  .audioPlayer__progress-input::-ms-thumb {
    width: 14px;
    height: 14px;
  }
}
.audioPlayer__progress-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background: #909090;
  cursor: pointer;
}
.audioPlayer__progress-input:focus::-webkit-slider-runnable-track {
  background: #909090;
}
.audioPlayer__progress-input::-moz-range-track {
  width: 100%;
  height: 2px;
  background: #909090;
  cursor: pointer;
}
.audioPlayer__progress-input::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
.audioPlayer__progress-input::-ms-fill-lower {
  background: #F0B23A;
}
.audioPlayer__progress-input:focus::-ms-fill-lower {
  background: #F0B23A;
}
.audioPlayer__progress-input::-ms-fill-upper {
  background: #F0B23A;
}
.audioPlayer__progress-input:focus::-ms-fill-upper {
  background: #F0B23A;
}
.audioPlayer__progress-input::-webkit-media-controls-timeline {
  background: pink;
}
@media all and (max-width: 64.6875em) {
  .profileModalContent .audiogrid--simple .audioPlayer.is-small {
    margin-top: 0;
    border-width: 0 0 2px 0;
  }
  .profileModalContent .audiogrid--simple .audiogrid__col:first-of-type .audioPlayer.is-small {
    border-top-width: 2px;
    margin-top: 1.25rem;
  }
  .profileModalContent .audiogrid--simple .audiogrid__col:nth-of-type(2n) .audioPlayer.is-small {
    margin-left: 0;
  }
}
@media all and (max-width: 47.9375em) {
  .globalAlerts {
    order: 2;
  }
}
.alert {
  position: relative;
  padding: 15px 0;
}
@media all and (min-width: 48em) {
  .alert {
    padding: 30px 0;
  }
}
@media all and (max-width: 47.9375em) {
  .alert {
    order: 3;
  }
}
.alert.is-closed {
  display: none;
}
.alert__icon {
  width: 30px;
  height: 30px;
  margin-right: 40px;
  flex: 0 0 auto;
}
@media all and (max-width: 47.9375em) {
  .alert__icon {
    margin-right: 20px;
  }
}
.alert__flex {
  display: flex;
  justify-content: center;
}
@media all and (min-width: 48em) {
  .alert__flex {
    width: 100%;
    margin: 0 auto;
  }
  .calendarEntry .alert__flex {
    width: 100%;
  }
}
@media all and (max-width: 47.9375em) {
  .alert__flex {
    width: 95%;
  }
}
.alert__close {
  position: absolute;
  top: 10px;
  right: 10px;
}
/**
 * Post Types
 */
.calendarEntry {
  position: relative;
}
.calendarEntry__columns {
  display: flex;
  flex-direction: column-reverse;
}
@media all and (min-width: 48em) {
  .calendarEntry__columns {
    flex-direction: row;
  }
}
@media all and (min-width: 48em) {
  .calendarEntry__column[data-column=left] {
    flex: 66%;
  }
}
@media all and (min-width: 48em) {
  .calendarEntry__column[data-column=right] {
    flex: 33%;
    padding: 0 6.25%;
    padding-left: 3%;
  }
}
@media all and (min-width: 48em) and all and (min-width: 100em) {
  .calendarEntry__column[data-column=right] {
    padding: 0 calc((100vw - 1400px) * 0.5);
  }
}
.calendarHeader {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.calendarHeader__content {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
@media all and (min-width: 48em) {
  [data-media-size="half"] .calendarHeader__content {
    max-width: 60%;
  }
}
@media all and (min-width: 64.75em) {
  [data-media-size="full"] .calendarHeader__content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.5rem;
  }
}
@media all and (max-width: 64.6875em) {
  .calendarHeader__content {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media all and (min-width: 64.75em) {
  [data-media-size="half"] .calendarHeader__heading {
    width: 75%;
  }
}
@media all and (min-width: 64.75em) {
  [data-media-size="full"] .calendarHeader__heading {
    width: 33%;
    flex: 0 1 auto;
  }
}
@media all and (min-width: 64.75em) {
  [data-media-size="full"] .calendarHeader__details-wrapper {
    width: 50%;
    flex: 1 1 auto;
  }
}
.calendarHeader__details-wrapper .event__details-col {
  flex: auto;
  gap: 30px;
}
@media all and (min-width: 48em) and (max-width: 64.6875em) {
  .calendarHeader__details-wrapper .event__details-col {
    border-width: 1px 0 0 0;
    padding: 20px 0;
  }
}
.calendarHeader__details-wrapper .event__date,
.calendarHeader__details-wrapper .event__time-wrapper {
  flex: 1 0 auto;
}
.calendarHeader__figure {
  position: relative;
}
[data-media-size="half"] .calendarHeader__figure:before {
  padding-top: 50%;
}
@media all and (min-width: 48em) {
  [data-media-size="half"] .calendarHeader__figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 40%;
  }
  [data-media-size="half"] .calendarHeader__figure:before {
    display: none;
  }
}
@media all and (max-width: 47.9375em) {
  [data-media-size="half"] .calendarHeader__figure:before {
    padding-top: 100%;
  }
}
[data-media-size="full"] .calendarHeader__figure:before {
  padding-top: 37.5%;
}
.calendarHeader__figure-video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.calendarHeader__figure-video .video,
.calendarHeader__figure-video .video__iframe {
  width: 100%;
  height: 100%;
}
.calendarHeader__figure[data-figure-type=illustration] {
  background: #29282b;
}
.calendarHeader__figure-illustration {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 92%;
  height: 92%;
}
.calendarHeader__cta {
  width: 100%;
}
.calendarHeader__cta--primary {
  max-width: 300px;
}
@media all and (max-width: 47.9375em) {
  .calendarHeader__cta {
    margin-bottom: 2rem;
  }
}
.calendarAdmission__desc {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
}
.calendarHeader__cta-admission {
  width: 100%;
}
.calendarAdmission__heading {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.09090909;
  margin-top: 1.25rem;
  border-top: 1px solid #7f7f7f;
  padding-top: 1.25rem;
  text-transform: uppercase;
}
.calendarHeader__cta-button {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.14272727em;
  color: #F0B23A;
  text-decoration: underline;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: all 250ms ease-in-out;
}
.calendarHeader__cta-button svg {
  width: 20px;
  height: 20px;
  color: #fff;
  transition: color 250ms ease-in-out;
}
.calendarHeader__cta-button:hover,
.calendarHeader__cta-button:focus {
  color: #fff;
  -webkit-text-decoration-color: #F0B23A;
          text-decoration-color: #F0B23A;
}
.calendarHeader__cta-button:hover svg,
.calendarHeader__cta-button:focus svg {
  color: #F0B23A;
}
.calendarHeader__share-popup {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0.625rem 0.625rem;
  background: #3E3E3E;
  transform: translate(calc(100% + 15px), -50%);
  transition: all 250ms ease-in-out;
}
.calendarHeader__share-popup:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  border-right: 10px solid #3E3E3E;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.calendarHeader__share-popup:not(.is-revealed) {
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(100% + 15px), calc(-50% + 10px));
}
.calendarHeader__share-popup .is-revealed {
  opacity: 1;
  transform: translate(calc(100% + 15px), -50%);
  pointer-events: auto;
}
.calendarHeader__share-popup .at-share-btn-elements {
  display: flex;
}
.calendarHeader__background {
  background-color: #7f7f7f;
  opacity: 0.5;
  z-index: -1;
}
@media all and (max-width: 47.9375em) {
  .calendarHeader__background {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .calendarHeader__background {
    width: 60%;
  }
}
.calendarHeader__background:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #000;
  mix-blend-mode: color;
  z-index: 1;
}
.calendarHeader__background:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
}
.calendarHeader__background img {
  mix-blend-mode: multiply;
  z-index: 0;
}
.calendarHeader__brand {
  position: absolute;
  right: 6.25vw;
  width: 90px;
  height: 90px;
  transform: translateY(-50%);
}
@media all and (min-width: 48em) {
  .calendarHeader__brand {
    bottom: 10px;
    right: 10px;
    width: 120px;
    height: 120px;
    transform: none;
  }
}
@media all and (min-width: 64.75em) {
  .calendarHeader__brand {
    bottom: 30px;
    right: 30px;
  }
}
.protected__content svg {
  width: 45px;
  height: 45px;
}
@media all and (min-width: 48em) {
  .protected__content svg {
    width: 60px;
    height: 60px;
  }
}
.protected__form label {
  flex: 1 1 auto;
}
.protected__wrapper .protected .flex {
  justify-content: center;
}
.turnstyle .modal__content {
  padding: 0;
}
@media all and (max-width: 64.6875em) {
  .turnstyle__branding {
    margin-right: 1.25rem;
  }
}
@media all and (max-width: 64.6875em) {
  .turnstyle__header {
    display: flex;
    margin-right: 60px;
  }
}
.turnstyle__cta {
  margin-top: 1.25rem;
}
@media all and (min-width: 64.75em) {
  .turnstyle__cta {
    margin-top: 2.5rem;
  }
}
.turnstyle__heading {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.14285714;
  letter-spacing: 0.03571429em;
}
@media all and (min-width: 64.75em) {
  .turnstyle__heading {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 1.13636364;
    letter-spacing: 0.02272727em;
    margin-top: 2.5rem;
  }
}
.turnstyle__close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 45px;
  height: 45px;
}
.turnstyle__close svg {
  width: 25px;
  height: 25px;
}
.turnstyle__close:focus,
.turnstyle__close:hover {
  color: #fff;
}
.turnstyle__col {
  padding-top: 40px;
  padding-bottom: 40px;
}
.turnstyle__col:first-of-type {
  padding-left: 0;
}
.turnstyle__col:nth-of-type(2) {
  padding-bottom: 60px;
  padding-right: 1.25rem;
}
@media all and (min-width: 64.75em) {
  .turnstyle__col {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .turnstyle__col:nth-of-type(2) {
    padding-bottom: 100px;
    padding-right: 2.5rem;
  }
}
.turnstyle__instructions {
  padding: 0 2.5rem;
}
@media all and (min-width: 64.75em) {
  .turnstyle__instructions {
    padding-left: calc((100% / 5) * 1);
  }
}
.turnstyle__steps-list {
  counter-reset: turnstyle-steps;
  padding: 0 2.5rem;
}
@media all and (min-width: 64.75em) {
  .turnstyle__steps-list {
    padding-left: calc((100% / 7) * 1);
    padding-right: calc((100% / 7) * 2);
  }
}
.turnstyle__step {
  position: relative;
  margin-top: 50px;
  padding-left: 66px;
}
.turnstyle__step:before {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  font-family: 'Sequel100Wide';
  font-weight: 400;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: turnstyle-steps;
  content: counter(turnstyle-steps);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F0B23A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #141414;
}
.turnstyle__step:before--proper {
  text-transform: none;
}
.turnstyle__step-desc {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.11111111;
}
@media all and (min-width: 64.75em) {
  .turnstyle__step-desc {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.09090909;
    letter-spacing: 0.04272727em;
  }
}
.turnstyle__step-content {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin-top: 0.625rem;
  border-top: 1px solid #7f7f7f;
  padding-top: 1.25rem;
}
@media all and (min-width: 64.75em) {
  .turnstyle__step-content {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.07142857;
    letter-spacing: 0.04285714em;
    margin-top: 15px;
    padding-top: 30px;
  }
}
.podcasts {
  padding: 40px 0;
}
@media all and (min-width: 48em) {
  .podcasts {
    padding: 80px 0;
  }
}
@media all and (min-width: 48em) {
  .podcasts__player {
    width: calc((100% / 12) * 8);
    margin: 0 auto;
  }
}
@media all and (min-width: 100em) {
  .podcasts__player {
    width: calc((100% / 12) * 8);
  }
}
.podcastsHeader__summary {
  margin-top: 1.25rem;
  border-top: 1px solid #7f7f7f;
  padding-top: 1.25rem;
}
[class*='podcastsHeader__link'] {
  border-width: 1px;
  border-style: solid;
  padding: 0.625rem 1.25rem;
  flex: 1 1 auto;
}
.podcastsHeader__link--brand {
  border-color: #F0B23A;
}
.podcastsHeader__link--white {
  border-color: #fff;
}
.podcastsHeader__link--logo {
  line-height: 0;
  flex: 0 0 auto;
}
.podcastsHeader__link--logo img {
  width: 85px;
}
.lessonHeader {
  overflow: hidden;
}
@media all and (max-width: 47.9375em) {
  .lessonHeader__content {
    padding-top: 30px;
    padding-bottom: 100px;
    background-image: url('https://cmhof.imgix.net/resources/background-notebook-paper.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
  }
}
@media all and (min-width: 48em) {
  .lessonHeader__content {
    padding-top: 75px;
    padding-bottom: 160px;
    max-width: 60%;
  }
  [data-image="false"] .lessonHeader__content {
    max-width: 75%;
  }
  [data-type="texture"][data-size="half"] .lessonHeader__content {
    width: 50%;
  }
}
.lessonHeader__subheading {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.21428571;
  margin-top: 0.625rem;
}
@media all and (min-width: 48em) {
  .lessonHeader__subheading {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 0.94444444;
    margin-top: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .lessonHeader__desc {
    margin-top: 2.5rem;
  }
}
/**
 * Pages
 */
.calendar {
  position: relative;
  /* set reveal states for tab targets */
}
.calendar [data-tab-target="week"] {
  display: none;
}
@media all and (min-width: 48em) {
  .calendar [data-tab-target="week"] {
    display: block;
  }
  .calendar [data-tab-target="week"]:not(.is-active) {
    display: none;
  }
}
.calendar [data-tab-target="all"] {
  display: block;
}
@media all and (min-width: 48em) {
  .calendar [data-tab-target="all"]:not(.is-active) {
    display: none;
  }
}
.calendar__header {
  margin-top: 2.5rem;
}
@media all and (min-width: 64.75em) {
  .calendar__header {
    margin-top: 0;
    align-items: flex-end;
  }
}
.calendar__heading {
  display: none;
}
@media all and (min-width: 48em) {
  .calendar__heading {
    display: block;
  }
}
.calendar__controls {
  margin: 0;
  gap: 0.625rem;
}
.calendar__controls .calendar__filter {
  width: 100%;
}
@media all and (max-width: 47.9375em) {
  .calendar__controls {
    display: none;
  }
}
@media all and (min-width: 64.75em) {
  .calendar__controls {
    gap: 1.25rem;
  }
  .calendar__controls .calendar__filter {
    margin: 0.625rem 0;
    width: 50%;
  }
}
.calendar__custom-select {
  flex: 1 1 auto;
}
@media all and (max-width: 47.9375em) {
  .calendar__custom-select .customSelect__value span {
    color: #fff;
  }
}
.calendar__controls-reset svg {
  width: 30px;
  height: 30px;
}
.calendar__controls-reset:hover svg,
.calendar__controls-reset:focus svg {
  color: #F0B23A;
}
.calendar__controls-reset:focus {
  outline: 2px dashed #29282b;
}
.calendar__tabs {
  display: none;
}
@media all and (min-width: 48em) {
  .calendar__tabs {
    display: flex;
  }
}
@media all and (max-width: 64.6875em) {
  .calendar__tabs {
    gap: 0.625rem;
  }
}
@media all and (min-width: 64.75em) {
  .calendar__tabs {
    row-gap: 0.625rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
.calendar__tab-btn.is-active {
  background: #F0B23A;
}
.contentFeed__sort .calendar__tab-btn:not(.is-revealed) {
  background: #A76816;
}
@media all and (max-width: 47.9375em) {
  .contentFeed__sort .calendar__tab-btn {
    flex: none;
    width: auto;
  }
}
@media all and (max-width: 64.6875em) {
  .calendar__tab-btn {
    flex: 1 1 auto;
    width: 100%;
  }
}
.calendar__featured-wrapper {
  display: none;
}
@media all and (min-width: 48em) {
  .calendar__featured-wrapper {
    display: block;
  }
}
.calendar__flex {
  display: flex;
  flex-direction: column-reverse;
}
@media all and (min-width: 48em) {
  .calendar__flex {
    flex-direction: row;
  }
}
.calendar__column[data-direction=left],
.calendar__column[data-direction=right] {
  padding: 0 6.25%;
}
@media all and (min-width: 48em) {
  .calendar__column[data-direction=left] {
    flex: 0 0 auto;
    padding: 0 2.5rem;
    width: 70%;
  }
  .calendar__column[data-direction=right] {
    display: block;
    flex: 1 0 auto;
    width: 30%;
    padding: 0 6.25% 0 2.5rem;
  }
}
@media all and (min-width: 100em) {
  .calendar__column[data-direction=left] {
    padding-left: calc((100vw - 1400px) * 0.5);
  }
  .calendar__column[data-direction=right] {
    padding-right: calc((100vw - 1400px) * 0.5);
  }
}
@media all and (min-width: 48em) {
  .calendar__sidebar-wrapper {
    top: 0;
    height: auto;
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    padding-right: 0;
    padding-left: 0;
  }
}
@media all and (min-width: 48em) {
  .calendar__sidebar-header {
    display: none;
  }
}
.calendar__sidebar-heading {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 0.93333333;
  text-transform: uppercase;
}
.calendar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  will-change: opacity;
  transition: opacity 0.25s linear;
  min-height: 300px;
  margin-top: 1.25rem;
}
@media all and (min-width: 48em) {
  .calendar__list {
    margin-top: 2.5rem;
  }
}
.calendar__list.is-loading {
  opacity: 0.5;
}
.calendar__list-item[data-size=full] {
  flex: 0 0 100%;
}
.calendar__list-item[data-size=half] {
  flex: 0 0 48%;
}
.calendar__week-link.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.calendar__widget-reveal {
  width: 100%;
}
@media all and (min-width: 48em) {
  .calendar__widget-reveal {
    display: none;
  }
}
.calendar__widget-reveal svg {
  transform: none;
  transition: transform 250ms ease-in-out;
  width: 14px;
  height: 14px;
}
.calendar__widget-reveal.is-revealed svg {
  transform: rotate(180deg);
}
@media all and (max-width: 47.9375em) {
  .calendar__widget-dropdown:not(.is-revealed) {
    display: none;
  }
}
.calendar__loading {
  display: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #ffffff 0, rgba(255, 255, 255, 0.9) 210px);
  padding: 40px 0 0 0;
}
.is-loading .calendar__loading {
  display: flex;
}
.calendar__container {
  position: relative;
}
.calendarWeek__day.is-past-day {
  opacity: 0.5;
}
.calendarWeek__day-title {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.03125em;
  text-transform: uppercase;
}
.calendarWeek__day-title svg {
  width: 25px;
  height: 25px;
  transition: transform 250ms ease-in-out;
  transform: rotate(0deg);
  transform-origin: center center;
}
.calendarWeek__day-title.is-revealed svg {
  transform: rotate(180deg);
}
.calendarWeek__day-mesasge[data-message="closed"] {
  color: #D0401A;
}
.calendarWeek__day-accordion:not(.is-revealed) {
  display: none;
}
@media all and (max-width: 47.9375em) {
  .calendarAll {
    padding-bottom: 40px;
  }
}
.calendarAll__load-more:disabled {
  display: none;
}
.calendarSidebar__button-container {
  border-top: 1px solid #7f7f7f;
}
@media all and (min-width: 48em) {
  .calendarSidebar__button-container {
    display: none;
  }
}
.calendarSidebar__button-container .calendarSidebar__reveal-button {
  text-decoration: none;
  text-transform: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.calendarSidebar__button-container .calendarSidebar__reveal-button svg {
  transform: rotate(90deg);
  transition: all 0.3s;
}
.calendarSidebar__button-container .calendarSidebar__reveal-button.is-revealed svg {
  transform: rotate(-90deg);
}
.calendarSidebar__button-container .calendarSidebar__reveal-button:hover {
  color: #fff;
}
.calendarSidebar__button-container .calendarSidebar__reveal-button:focus {
  outline: none;
}
@media all and (max-width: 47.9375em) {
  .calendarSidebar__container {
    display: none;
  }
  .calendarSidebar__container.is-revealed {
    display: block;
  }
  .calendarSidebar__container .calendarSidebar__section--location .calendarSidebar__heading {
    display: none;
  }
}
@media all and (min-width: 48em) {
  .calendarSidebar__wrapper {
    padding-top: 2.5rem;
  }
}
.calendarSidebar__heading {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
}
@media all and (min-width: 48em) {
  .calendarSidebar__heading {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1;
  }
}
.calendarSidebar__subheading {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.28571429;
  letter-spacing: 0.07142857em;
}
.calendarSidebar__address-link {
  text-transform: none;
}
.calendarSidebar__address-link svg {
  width: 15px;
  height: 15px;
  transition: none;
  flex: 0 0 auto;
}
.calendarSidebar__address-link:hover svg,
.calendarSidebar__address-link:focus svg {
  transform: none;
}
.calendarSidebar__section {
  margin-top: 40px;
  border-top: 1px solid #7f7f7f;
  padding-top: 40px;
}
.calendarSidebar__section:first-of-type {
  border-top: none;
}
.home {
  position: relative;
}
.home__wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #141414 url('https://cmhof.imgix.net/resources/texture_dark.jpeg');
  z-index: -1;
}
@media all and (min-width: 48em) {
  .homeSlider__header-copy {
    flex: 0 0 50%;
  }
}
.homeSlider__slides-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  height: auto;
}
.homeSlider__slide-list {
  --slidesOffset: 0px;
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.35s ease-out;
  transform: translate3d(var(--slidesOffset), 0, 0);
  position: relative;
  height: auto;
  display: flex;
  gap: 1.25rem;
}
.homeSlider__slide-list.is-dragging {
  transition-duration: 0.05s;
  transition-easing: linear;
}
.homeSlider__slide {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
}
.announcements {
  position: relative;
}
@media all and (min-width: 48em) {
  .announcements__list {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
  }
}
@media all and (min-width: 48em) {
  .announcements__list-item[data-annoucement="featured"] {
    flex: 66%;
  }
}
@media all and (min-width: 48em) {
  .annoucements__secondary {
    flex: 0 0 33%;
  }
}
@media all and (min-width: 48em) {
  .homeFeature__row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
}
.homeFeature__content-memoriam-icon {
  width: 100%;
  height: 100%;
  max-height: 113px;
}
.homeFeature__content-memoriam-icon.no-member {
  max-height: 70px;
}
.homeFeature__copy.wysiwyg--light h2 {
  color: #F0B23A;
  text-transform: uppercase;
}
.homeFeature__headline {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.01675em;
  color: #F0B23A;
  text-transform: uppercase;
}
@media all and (min-width: 64.75em) {
  .homeFeature__headline {
    font-size: 72px;
    font-size: 4.5rem;
    line-height: 0.83333333;
    letter-spacing: 0.01638889em;
  }
}
.homeFeature__subhead {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.125;
  letter-spacing: 0.05em;
}
@media all and (min-width: 64.75em) {
  .homeFeature__subhead {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.16666667;
    letter-spacing: 0.04166667em;
  }
}
.homeFeature__figure {
  border: 4px solid #fff;
}
.homeFeature__bg {
  background: #141414b3 url("/images/bg-memoriam.png") no-repeat center bottom;
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to top, #141414 0, #141414b3 100%), url("/images/bg-memoriam.png") no-repeat center bottom;
  /* W3C */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: bottom center;
  z-index: -1;
}
.contentFeed__sort.is-hidden {
  display: none;
}
@media all and (max-width: 47.9375em) {
  .contentFeed__sort {
    margin-top: 1.25rem;
  }
}
@media all and (min-width: 48em) {
  .contentFeed__sort {
    justify-content: flex-end;
  }
}
[data-show-sidebar="true"] .contentFeed__sort {
  width: 100%;
}
.contentFeed__sort-btn.is-revealed {
  background-color: #A76816;
}
.contentFeed__reset-btn.is-hidden {
  display: none;
}
.contentFeed__search {
  width: 100%;
}
@media all and (min-width: 48em) {
  .contentFeed__search {
    flex: 0 0 auto;
    width: 300px;
  }
}
.contentFeed__search .elements__search {
  width: 100%;
}
.contentFeed__search-copy.is-hidden {
  display: none;
}
.contentFeed__entry-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.contentFeed__entry-wrapper:not(.is-revealed) {
  display: none;
}
.contentFeed__entry-list {
  flex: 0 0 auto;
  width: 100%;
}
[data-show-sidebar="true"] .contentFeed__entry-list {
  width: calc(75% + 2.5rem);
}
@media all and (min-width: 48em) {
  [data-show-sidebar="true"] .contentFeed__entry-list {
    width: calc(((100% + 2.5rem) / 12) * 11);
  }
}
@media all and (min-width: 100em) {
  [data-show-sidebar="true"] .contentFeed__entry-list {
    width: calc(((100% + 2.5rem) / 12) * 11);
  }
}
.contentFeed__entry {
  border-top: 1px solid #fff;
}
.contentFeed__entry:last-of-type {
  border-bottom: 1px solid #fff;
}
@media all and (max-width: 47.9375em) {
  [data-post-type="hof_members"] .contentFeed__entry {
    border-top: none;
    border-bottom: none;
  }
}
.contentFeed__jumplinks-wrapper {
  position: -webkit-sticky;
  position: sticky;
  align-self: flex-start;
  top: 2.5rem;
  padding: 0;
  flex: 0 0 auto;
  width: calc(25% - 2.5rem);
}
.contentFeed__jumplinks-wrapper.is-hidden {
  display: none;
}
@media all and (min-width: 48em) {
  .contentFeed__jumplinks-wrapper {
    width: calc((((100% / 12) * 1) - 2.5rem) + 6.25vw);
  }
}
@media all and (min-width: 100em) {
  .contentFeed__jumplinks-wrapper {
    width: calc((((100% / 12) * 1) - 2.5rem) + ((100vw - 1400px) * 0.5));
  }
}
.contentFeed__jumplink-link {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  color: #f8f4f1;
  width: 100%;
  padding: 10px;
  transition: all 250ms ease-in-out;
}
.contentFeed__jumplink-link:not(.is-active) {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  padding: 5px 10px;
}
@media all and (min-width: 48em) {
  .contentFeed__jumplink-link {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1;
    padding: 10px 20px;
    text-align: left;
  }
  .contentFeed__jumplink-link:not(.is-active) {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1;
    padding: 10px 20px;
  }
}
.contentFeed__jumplink-link.is-active {
  background: url('https://cmhof.imgix.net/resources/texture_gold.jpeg');
}
.contentFeed__filter {
  position: relative;
}
@media all and (min-width: 48em) {
  [data-show-sidebar] .contentFeed__filters-wrapper {
    width: calc(((100% + 2.5rem) / 12) * 11);
  }
}
@media all and (min-width: 100em) {
  [data-show-sidebar] .contentFeed__filters-wrapper {
    width: calc(((100% + 2.5rem) / 12) * 11);
  }
}
.contentFeed__filter-btn {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  border: 1.5px solid #7f7f7f;
  border-radius: 3px;
  padding: 20px;
  background: transparent;
  color: #fff;
}
.contentFeed__filter-btn svg {
  width: 14px;
  height: 14px;
  margin-left: 40px;
  color: #F0B23A;
  transform: none;
  transition: transform 100ms ease-in-out;
}
.contentFeed__filter-btn:hover svg,
.contentFeed__filter-btn:focus svg {
  transform: rotate(180deg);
}
.contentFeed__filter-list {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 50px);
  transform: translate(0, 100%);
  background: #fff;
  z-index: 10;
  display: none;
}
.contentFeed__filter-list:hover,
.contentFeed__filter-list:focus,
.contentFeed__filter-list:focus-within,
.contentFeed__filter-btn:focus + .contentFeed__filter-list,
.contentFeed__filter-list.is-revealed {
  display: block;
}
.contentFeed__filter-item {
  border-bottom: 1px solid #7f7f7f;
}
.contentFeed__filter-item:last-of-type {
  border-bottom: none;
}
.contentFeed__filter-link {
  display: block;
  padding: 0.625rem 0.625rem 0.625rem 20px;
  color: #000;
  text-decoration: none;
}
.contentFeed__filter-link:hover,
.contentFeed__filter-link:focus {
  background: #F0B23A;
  text-decoration: underline;
}
.contentFeed__pagination-control {
  line-height: 1;
}
.contentFeed__pagination-link {
  margin: 0 0.625rem;
}
.contentFeed__pagination-link--active {
  pointer-events: none;
}
@media all and (max-width: 47.9375em) {
  .pressReleaseHeader__figure {
    position: relative;
    width: 100%;
    margin: 0;
  }
  .pressReleaseHeader__figure:before {
    content: '';
    width: 100%;
    display: block;
  }
  .pressReleaseHeader__figure:before {
    padding-top: 50%;
  }
  .pressReleaseHeader__figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .no-objectfit .pressReleaseHeader__figure img {
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
@media all and (min-width: 48em) {
  .pressReleaseHeader__figure {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
  }
  .pressReleaseHeader__figure img,
  .pressReleaseHeader__figure video,
  .pressReleaseHeader__figure .video,
  .pressReleaseHeader__figure iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .no-objectfit .pressReleaseHeader__figure img,
  .no-objectfit .pressReleaseHeader__figure video,
  .no-objectfit .pressReleaseHeader__figure .video,
  .no-objectfit .pressReleaseHeader__figure iframe {
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
@media all and (min-width: 48em) {
  .museumMap {
    padding: 80px 0;
  }
}
@media all and (min-width: 48em) {
  .museumMap__panzoom {
    cursor: default !important;
  }
}
.museumMap__controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.museumMap__controls button {
  width: 40px;
  height: 40px;
  background: #fff;
  color: #F0B23A;
  border: 1px solid #7f7f7f;
}
.museumMap__controls button:first-of-type {
  border-radius: 4px 4px 0 0;
}
.museumMap__controls button:last-of-type {
  border-radius: 0 0 4px 4px;
  border-top: none;
}
.museumMap__controls button:hover,
.museumMap__controls button:focus {
  background: #F0B23A;
  color: #fff;
}
.museumMap__controls button:disabled {
  cursor: not-allowed;
  background: #909090;
  color: #2B2B2B;
  opacity: 0.8;
}
.museumMap__controls button:disabled:hover,
.museumMap__controls button:disabled:focus {
  background: #909090;
  color: #2B2B2B;
}
@media all and (min-width: 48em) {
  .museumMap__controls {
    display: none;
  }
}
.haleyExhibits .grid__lg-third {
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}
.haleyExhibits .cardGrid__card {
  height: 100%;
}
.notFound__content {
  position: relative;
  padding: 0 60px 60px;
  z-index: 0;
}
@media all and (max-width: 47.9375em) {
  .notFound__content {
    padding: 0 40px 40px;
  }
}
.notFound__content .notFound__title {
  position: absolute;
  margin: 0;
}
.notFound__content .notFound__title-image {
  display: inline-block;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.notFound__content .notFound__title-image img {
  width: 380px;
  height: auto;
}
@media all and (max-width: 47.9375em) {
  .notFound__content .notFound__title-image img {
    width: 195px;
  }
}
@media all and (max-width: 47.9375em) {
  .notFound__content .notFound__title-image {
    display: block;
  }
}
.notFound__content:before {
  content: '';
  position: absolute;
  top: 138px;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-color: #F0B23A;
  border-width: 2px;
  z-index: -1;
}
@media all and (max-width: 47.9375em) {
  .notFound__content:before {
    top: 70px;
  }
}
/**
 * Print
 */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html {
    font: 12pt/1.5em Georgia, "Times New Roman", Times, serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    line-height: 1.1em;
    margin-bottom: 0.5em;
    margin-top: 1em;
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }
  li h1,
  li h2,
  li h3,
  li h4,
  li h5,
  li h6 {
    margin-top: 0;
  }
  h1 {
    font-size: 24pt;
  }
  h2 {
    font-size: 21pt;
  }
  h3 {
    font-size: 18pt;
  }
  h4 {
    font-size: 16pt;
  }
  h5 {
    font-size: 14pt;
  }
  h6 {
    font-size: 12pt;
  }
  blockquote,
  p,
  ul,
  ol,
  dl,
  figure,
  img {
    margin-bottom: 1em;
  }
  figure img {
    margin-bottom: 0;
  }
  ul,
  ol,
  dd {
    margin-left: 3em;
  }
  pre,
  blockquote {
    border-left: 0.5em solid #999;
    padding-left: 1.5em;
    page-break-inside: avoid;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  figcaption {
    text-transform: uppercase;
    font-size: 10pt;
  }
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  form,
  video,
  nav {
    display: none !important;
  }
  @page {
    margin: 2cm;
  }
}
/**
 * Prototype Styles
 * REMOVE WHEN BEGINNING PRODUCTION
 */
/*# sourceMappingURL=../../build/css/maps/motif.css.map */