@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Libre+Franklin");
@import url("https://use.typekit.net/qzu2kmq.css");
@import url("https://use.typekit.net/buj7whm.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=2.2.1.3");
@import url("https://use.fontawesome.com/releases/v5.8.0/css/all.css");
@import url("https://use.typekit.net/ihj7uav.css");
@import url("https://use.typekit.net/cjl8ulm.css");
:root {
--fonts-primary-heading: $IM-Fell-English;
--fonts-secondary-heading: $Sequel100Wide;
--fonts-accent: $Blackoak;
--exhibit-red: $nashville-red; }
/*
Dynamic Responsive Image
*/
/*
HTML5 Display Definitions
Set the appropriate `display` definitions for new HTML5 elements.
The majority will be displayed `block`.
*/
*,
*:before,
*:after {
-ms-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0; }
body.suiting-the-sound {
background: #fff; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
a {
text-decoration: none; }
figure {
margin: 0; }
img.lazyload {
opacity: 0; }
img.lazyloaded {
opacity: 1; }
/*
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 {
margin-top: 1.25rem;
margin-bottom: 0.625rem; }
p,
pre,
blockquote,
menu,
ul,
ol,
dl,
table {
/* Display & Box Model */
margin: 1.25rem 0 0 0;
/* Other */
font-size: 1em; }
menu,
ol,
ul {
padding-left: 2.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 {
padding-left: 0;
list-style: none outside none; }
/*
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.
For embedded videos, use the `.ratios__video` class, and it will assume an
`iframe` is the direct child:
VIDEO
*/
.ratios__base {
position: relative; }
.ratios__base:before {
content: "";
display: block; }
.ratios__video {
position: relative; }
.ratios__video:before {
content: "";
display: block; }
.ratios__video:before {
padding-top: 56.25%; }
.ratios__content,
.ratios__video > iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%; }
.icons__icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: text-bottom;
fill: currentColor; }
.no-svg .icons__icon {
display: none; }
svg:not(:root) {
overflow: hidden; }
img {
max-width: 100%;
border: 0; }
.lte7 img {
-ms-interpolation-mode: bicubic; }
/* Imported Google Fonts
==========================*/
/* Imported Typekit Fonts
==========================*/
/* LB Typekit fonts for Exhibits
==========================*/
/* Import FontAwesome Library */
/* Self Hosted Font Files
==========================*/
@font-face {
font-family: 'National';
src: url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/National-Bold.woff2") format("woff2"), url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/National-Bold.woff") format("woff");
font-weight: bold;
font-style: normal; }
@font-face {
font-family: 'Bodoni Std';
src: url("../../fonts/BodoniStd/BodoniStd-PosterItalic.woff2") format("woff2"), url("../../fonts/BodoniStd/BodoniStd-PosterItalic.woff") format("woff"), url("https://www.countrymusichalloffame.org:443/fonts/BodoniStd/BodoniStd-PosterItalic.eot?#iefix") format("embedded-opentype"), url("../../fonts/BodoniStd/BodoniStd-PosterItalic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
font-display: swap; }
@font-face {
font-family: 'CG Triumvirate';
src: url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/CGTriumvirate/CGTriumvirate-ExtraCompress.woff2") format("woff2"), url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/CGTriumvirate/CGTriumvirate-ExtraCompress.woff") format("woff"), url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/CGTriumvirate/CGTriumvirate-ExtraCompress.eot?#iefix") format("embedded-opentype"), url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/CGTriumvirate/CGTriumvirate-ExtraCompress.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap; }
@font-face {
font-family: 'Sequel100Wide';
src: url("../../fonts/Sequel100Wide/Sequel100Wide-75.woff2") format("woff2"), url("../../fonts/Sequel100Wide/Sequel100Wide-75.woff") format("woff"), url("https://www.countrymusichalloffame.org:443/fonts/Sequel100Wide/Sequel100Wide-75.eot?#iefix") format("embedded-opentype"), url("https://www.countrymusichalloffame.org:443/fonts/Sequel100Wide/Sequel100Wide-75.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap; }
@font-face {
font-family: 'Retromark Script Regular';
font-style: normal;
font-weight: normal;
src: local("Retromark Script Regular"), url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/Retromark-Script.woff") format("woff"); }
@font-face {
font-family: 'Base Twelve Sans B';
font-style: normal;
font-weight: normal;
src: url("https://www.countrymusichalloffame.org:443/cmhof-theme/assets/fonts/BaseTwelveSansB_6030.ttf") format("truetype"); }
@font-face {
font-family: "VoltaBold";
src: url("../../fonts/Volta/VoltaBold/font.woff2") format("woff2"), url("../../fonts/Volta/VoltaBold/font.woff") format("woff"); }
@font-face {
font-family: "VoltaMedium";
src: url("../../fonts/Volta/VoltaMedium/font.woff2") format("woff2"), url("../../fonts/Volta/VoltaMedium/font.woff") format("woff"); }
@font-face {
font-family: "VoltaMediumItalic";
src: url("../../fonts/Volta/VoltaMediumItalic/font.woff2") format("woff2"), url("../../fonts/Volta/VoltaMediumItalic/font.woff") format("woff"); }
@font-face {
font-family: "VoltaRegular";
src: url("../../fonts/Volta/VoltaRegular/font.woff2") format("woff2"), url("../../fonts/Volta/VoltaRegular/font.woff") format("woff"); }
/*
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
Canon Text (38px)
Paragon Text (30px)
Primer Text (24px)
Tertia Text (18px)
Normal Text (14px)
Petite Text (12px)
````
Long Modifiers
The type sizes are given the `--long` modifier, allowing you to use
each type size with varying line heights.
I'm just a small bit of text, my `line-height`
can be tight.
I'm a long paragraph, so my `line-height`
should be longer to enhance legibility. ...
*/
/*
Inch Text
*/
.hierarchy__inch-text {
font-size: 80px;
line-height: 1.5; }
/*
Canon Text
*/
.hierarchy__canon-text {
font-size: 60px;
line-height: 0.75; }
/*
Paragon Text
*/
.hierarchy__paragon-text {
font-size: 40px;
line-height: 0.875; }
/*
Primer Text
*/
.hierarchy__primer-text {
font-size: 22px;
line-height: 1.3636363636; }
/*
Tertia Text
*/
.hierarchy__tertia-text {
font-size: 34px;
line-height: 0.7352941176; }
/*
Normal Text
*/
.hierarchy__normal-text {
font-size: 18px;
line-height: 0.0555555556; }
/*
Petite Text
*/
.hierarchy__petite-text {
font-size: 16px;
line-height: 0.0625; }
/*
Font Classes
Each font family and weight used in the site is given its own LEGO-block class
to enable quick use and modularity.
*/
/*
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
Primary Heading
````
*/
h1,
h2,
h3,
h4,
h5,
h6,
.styles__primary-heading {
font-weight: normal; }
/*
Secondary Heading
````secondary-heading
Secondary Heading
````
*/
/*
Body Text
Another type style, but this mimicks the default body text of the site.
````body-text
This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised . Occasionally quoted text may be found within a paragraph …and of course a link 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.
````
*/
body,
.styles__body-text {
font-size: 18px;
line-height: 0.0555555556; }
.styles__h1, .exhibitFooter__ackonwledgements--content h1,
.styles__primary-heading {
font-size: 40px;
line-height: 1.15;
font-family: var(--fonts-primary-heading); }
.suiting-the-sound .styles__h1, .suiting-the-sound .exhibitFooter__ackonwledgements--content h1, .exhibitFooter__ackonwledgements--content .suiting-the-sound h1, .suiting-the-sound
.styles__primary-heading {
font-size: 60px;
line-height: 1.3333333333;
font-family: "Retromark Script Regular", cursive; }
@media all and (min-width: 48em) {
.suiting-the-sound .styles__h1, .suiting-the-sound .exhibitFooter__ackonwledgements--content h1, .exhibitFooter__ackonwledgements--content .suiting-the-sound h1, .suiting-the-sound
.styles__primary-heading {
font-size: 80px;
line-height: 0.875; } }
@media all and (min-width: 48em) {
.styles__h1, .exhibitFooter__ackonwledgements--content h1,
.styles__primary-heading {
font-size: 60px;
line-height: 1.1666666667; } }
.styles__h2, .exhibitFooter__ackonwledgements--content h2 {
font-size: 36px;
line-height: 1;
font-family: var(--fonts-primary-heading); }
.suiting-the-sound .styles__h2, .suiting-the-sound .exhibitFooter__ackonwledgements--content h2, .exhibitFooter__ackonwledgements--content .suiting-the-sound h2 {
font-size: 40px;
line-height: 1;
font-family: "Retromark Script Regular", cursive; }
@media all and (min-width: 48em) {
.suiting-the-sound .styles__h2, .suiting-the-sound .exhibitFooter__ackonwledgements--content h2, .exhibitFooter__ackonwledgements--content .suiting-the-sound h2 {
font-size: 60px;
line-height: 1; } }
@media all and (min-width: 48em) {
.styles__h2, .exhibitFooter__ackonwledgements--content h2 {
font-size: 40px;
line-height: 1.15; } }
.styles__h3, .exhibitFooter__ackonwledgements--header, .exhibitFooter__ackonwledgements--content h3,
.styles__secondary-heading {
font-size: 20px;
line-height: 1.1;
font-family: var(--fonts-secondary-heading);
font-family: "Sequel100Wide", sans-serif;
text-transform: uppercase; }
.suiting-the-sound .styles__h3, .suiting-the-sound .exhibitFooter__ackonwledgements--header, .suiting-the-sound .exhibitFooter__ackonwledgements--content h3, .exhibitFooter__ackonwledgements--content .suiting-the-sound h3, .suiting-the-sound
.styles__secondary-heading {
font-family: "Base Twelve Sans B", sans-serif; }
@media all and (min-width: 48em) {
.styles__h3, .exhibitFooter__ackonwledgements--header, .exhibitFooter__ackonwledgements--content h3,
.styles__secondary-heading {
font-size: 28px;
line-height: 1.1428571429; } }
.styles__h4, .exhibitFooter__ackonwledgements--content h4 {
font-size: 18px;
line-height: 1.1111111111;
font-family: var(--fonts-secondary-heading);
text-transform: uppercase; }
.suiting-the-sound .styles__h4, .suiting-the-sound .exhibitFooter__ackonwledgements--content h4, .exhibitFooter__ackonwledgements--content .suiting-the-sound h4 {
font-family: "Base Twelve Sans B", sans-serif; }
@media all and (min-width: 48em) {
.styles__h4, .exhibitFooter__ackonwledgements--content h4 {
font-size: 22px;
line-height: 1.1818181818; } }
.styles__h5, .exhibitFooter__social-title, .exhibitFooter__ackonwledgements--content h5 {
font-size: 16px;
line-height: 1.75;
font-family: var(--fonts-secondary-heading);
font-family: "Sequel100Wide", sans-serif;
text-transform: uppercase; }
.suiting-the-sound .styles__h5, .suiting-the-sound .exhibitFooter__social-title, .suiting-the-sound .exhibitFooter__ackonwledgements--content h5, .exhibitFooter__ackonwledgements--content .suiting-the-sound h5 {
font-family: "Base Twelve Sans B", sans-serif; }
@media all and (min-width: 48em) {
.styles__h5, .exhibitFooter__social-title, .exhibitFooter__ackonwledgements--content h5 {
font-size: 18px;
line-height: 1.5555555556; } }
.styles__accent {
font-family: var(--fonts-accent); }
.styles__paragraph--intro {
font-size: 20px;
line-height: 1.6;
font-family: var(--fonts-primary-heading); }
.suiting-the-sound .styles__paragraph--intro {
font-family: Arial, Helvetica, sans-serif; }
@media all and (min-width: 48em) {
.styles__paragraph--intro {
font-size: 28px;
line-height: 1.5714285714; } }
.styles__paragraph--large {
font-size: 20px;
line-height: 1.4;
font-family: var(--fonts-primary-heading); }
.suiting-the-sound .styles__paragraph--large {
font-family: Arial, Helvetica, sans-serif; }
@media all and (min-width: 48em) {
.styles__paragraph--large {
font-size: 22px;
line-height: 1.6363636364; } }
.styles__paragraph, .lb_styles, .exhibitFooter__ackonwledgements--content p {
font-size: 16px;
line-height: 1.625;
font-family: "IM Fell English", serif; }
.suiting-the-sound .styles__paragraph, .suiting-the-sound .lb_styles, .suiting-the-sound .exhibitFooter__ackonwledgements--content p, .exhibitFooter__ackonwledgements--content .suiting-the-sound p {
font-family: "Times New Roman", Times, Georgia, serif; }
@media all and (min-width: 48em) {
.styles__paragraph, .lb_styles, .exhibitFooter__ackonwledgements--content p {
font-size: 18px;
line-height: 1.5555555556; } }
.styles__caption-heading, .imageCaption__heading, .imageCaption__modal-heading, .imageGallery__modal-heading, .imageGallery__image-title {
font-size: 12px;
line-height: 1.5;
font-family: var(--fonts-secondary-heading);
text-transform: uppercase; }
.suiting-the-sound .styles__caption-heading, .suiting-the-sound .imageCaption__heading, .suiting-the-sound .imageCaption__modal-heading, .suiting-the-sound .imageGallery__modal-heading, .suiting-the-sound .imageGallery__image-title {
font-family: "Base Twelve Sans B", sans-serif; }
@media all and (min-width: 48em) {
.styles__caption-heading, .imageCaption__heading, .imageCaption__modal-heading, .imageGallery__modal-heading, .imageGallery__image-title {
font-size: 18px;
line-height: 1.1111111111; } }
.styles__caption, .imageCaption__caption, .imageCaption__modal-caption, .imageGallery__modal-caption, .imageGallery__image-caption {
font-size: 12px;
line-height: 1.5; }
.suiting-the-sound .styles__caption, .suiting-the-sound .imageCaption__caption, .suiting-the-sound .imageCaption__modal-caption, .suiting-the-sound .imageGallery__modal-caption, .suiting-the-sound .imageGallery__image-caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.5714285714; }
@media all and (min-width: 48em) {
.styles__caption, .imageCaption__caption, .imageCaption__modal-caption, .imageGallery__modal-caption, .imageGallery__image-caption {
font-size: 14px;
line-height: 1.5714285714; } }
.lb_styles {
color: #141414; }
.suiting-the-sound .lb_styles {
font-family: Arial, Helvetica, sans-serif; }
.lb_styles p {
margin-bottom: 0; }
/*
Interactive Elements
*/
/*
button
Default interactive button styles. This `.btn` class can be applied to ``,
``, or `Default
Primary
Danger
````
*/
button {
font-size: 100%;
margin: 0;
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
line-height: normal; }
button[disabled] {
cursor: default; }
button::-moz-focus-inner {
border: 0;
padding: 0; }
.button__primary,
[class*="button"] {
width: auto;
height: auto;
margin: 0;
line-height: normal;
text-align: center;
text-decoration: none;
position: relative;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: 0;
overflow: visible;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #C28100;
color: #29282B;
text-align: center;
font-family: "Sequel100Wide", sans-serif;
font-size: 18px;
line-height: 1.2222222222;
letter-spacing: 0.2em;
padding: 17px 24px;
outline: 2px solid transparent;
text-transform: uppercase; }
p > .button__primary, p >
[class*="button"] {
margin-top: 0; }
.button__primary:hover, .button__primary:focus, .is-current.button__primary,
[class*="button"]:hover,
[class*="button"]:focus,
[class*="button"].is-current {
background: #CC8A00;
color: #29282B;
text-decoration: none; }
.button__primary:active,
[class*="button"]:active {
background: #141414;
color: #fff; }
.button__primary:focus,
[class*="button"]:focus {
outline-color: #141414; }
.button__primary[disabled],
.button__primary .is-disabled,
[class*="button"][disabled],
[class*="button"] .is-disabled {
background: #909090; }
.button--small {
font-size: 16px;
line-height: 1.125;
letter-spacing: 0.125em;
padding: 14px 16px; }
.button--tiny {
font-size: 12px;
line-height: 1.1666666667;
letter-spacing: 0.125em;
padding: 14px 16px; }
.button--icon {
position: relative;
padding-left: 24px;
padding-right: 60px; }
.button--icon svg {
position: absolute;
width: 16px;
height: 16px;
top: 50%;
right: 0;
transform: translate(calc( ( 60px - 16px ) / -2), -50%); }
.button--icon[data-align="left"] {
padding-left: 60px;
padding-right: 24px; }
.button--icon[data-align="left"] svg {
right: auto;
left: 0;
transform: translate(calc( ( 60px - 16px ) / 2), -50%); }
.button--icon.button--small {
padding-left: 16px;
padding-right: 50px; }
.button--icon.button--small svg {
transform: translate(calc( ( 50px - 16px ) / -2), -50%); }
.button--icon.button--small[data-align="left"] {
padding-left: 50px;
padding-right: 16px; }
.button--icon.button--small[data-align="left"] svg {
transform: translate(calc( ( 50px - 16px ) / 2), -50%); }
.button__primary:focus, .button__no-button:focus, .simpleHeader__menu:focus, .imageCaption__modal-trigger:focus, .exhibitAudioPlayer__btn:focus, .exhibitAudioPlayer__track:focus, .imageGallery__control:focus, .button__primary:hover, .button__no-button:hover, .simpleHeader__menu:hover, .imageCaption__modal-trigger:hover, .exhibitAudioPlayer__btn:hover, .exhibitAudioPlayer__track:hover, .imageGallery__control:hover, .button__primary:active, .button__no-button:active, .simpleHeader__menu:active, .imageCaption__modal-trigger:active, .exhibitAudioPlayer__btn:active, .exhibitAudioPlayer__track:active, .imageGallery__control:active {
border-color: transparent;
top: auto !important; }
/*
Button Variations
*/
/*
.button__secondary {}
*/
.button__no-button, .simpleHeader__menu, .imageCaption__modal-trigger, .exhibitAudioPlayer__btn, .exhibitAudioPlayer__track, .imageGallery__control {
background: transparent;
color: inherit;
border: 0;
border-radius: 0;
min-width: initial; }
.button__no-button:hover, .simpleHeader__menu:hover, .imageCaption__modal-trigger:hover, .exhibitAudioPlayer__btn:hover, .exhibitAudioPlayer__track:hover, .imageGallery__control:hover, .button__no-button:focus, .simpleHeader__menu:focus, .imageCaption__modal-trigger:focus, .exhibitAudioPlayer__btn:focus, .exhibitAudioPlayer__track:focus, .imageGallery__control:focus, .button__no-button.is-current, .is-current.simpleHeader__menu, .is-current.imageCaption__modal-trigger, .is-current.exhibitAudioPlayer__btn, .is-current.exhibitAudioPlayer__track, .is-current.imageGallery__control {
background: transparent;
color: inherit; }
/*
````tiny-button
Tiny Button
Tiny Button Primary
Tiny Button Danger
````
*/
/*
````small-button
Small Button
Small Button Primary
Small Button Danger
````
*/
/*
````large-button
Large Button
Large Button Primary
Large Button Danger
````
*/
.button__full-width {
width: 100%;
padding-left: 0;
padding-right: 0; }
/*
Link Styles
Very basic stuff. The primary link color can be altered in the `config.less`
file. Hover, focus, and current states are accounted for.
*/
a:focus, a:active, a:hover {
outline: 0; }
a,
.links__link {
color: #1f75ae; }
a:hover, a:focus, a.is-current,
.links__link:hover,
.links__link:focus,
.links__link.is-current {
color: #13496d; }
/*
Unlink
Basic class to remove some link styling.
$TODO: Put in `presentational.less` file?
*/
.links__unlink {
text-decoration: none; }
/*
Skip-To Link
*/
.links__skip-to {
position: absolute;
top: 0;
left: 0;
display: inline-block; }
.links__skip-to:not(:focus) {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden; }
.links__skip-to:not(:focus).focusable:active, .links__skip-to:not(:focus).focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static; }
body:hover .links__skip-to:not(:focus) a,
body:hover .links__skip-to:not(:focus) input,
body:hover .links__skip-to:not(:focus) button {
display: none; }
/*
Spacing Helpers
Spacing helpers are quick but powerful classes that add margin or padding to
any given element. These classes are `!important`, so they override all other
styles.
* `p`, `m` = padding, margin
* `a`, `t`, `r`, `b`, `l`, `h`, `v` = all, top, right, bottom, left, horizontal, vertical
* `s`, `m`, `l`, `x`, `n` = small (~`5px`), medium (~`10px`), large (~`20px`), x-large (~`40px`) none (`0`)
For example: `.spacing__pam` means "padding, all, medium".
**Note:** These are all based on the current element's font size and the
project's vertical rhythm (even on the sides, to provide uniform spacing).
As such, they require `vars.less`.
*/
.spacing__ptn, .spacing__pvn, .spacing__pan {
padding-top: 0 !important; }
.spacing__pts, .spacing__pvs, .spacing__pas {
padding-top: 0.3125rem !important; }
.spacing__ptm, .spacing__pvm, .spacing__pam {
padding-top: 0.625rem !important; }
.spacing__ptl, .spacing__pvl, .spacing__pal {
padding-top: 1.25rem !important; }
.spacing__ptx, .spacing__pvx, .spacing__pax {
padding-top: 2.5rem !important; }
.spacing__prn, .spacing__phn, .spacing__pan {
padding-right: 0 !important; }
.spacing__prs, .spacing__phs, .spacing__pas {
padding-right: 0.3125rem !important; }
.spacing__prm, .spacing__phm, .spacing__pam {
padding-right: 0.625rem !important; }
.spacing__prl, .spacing__phl, .spacing__pal {
padding-right: 1.25rem !important; }
.spacing__prx, .spacing__phx, .spacing__pax {
padding-right: 2.5rem !important; }
.spacing__pbn, .spacing__pvn, .spacing__pan {
padding-bottom: 0 !important; }
.spacing__pbs, .spacing__pvs, .spacing__pas {
padding-bottom: 0.3125rem !important; }
.spacing__pbm, .spacing__pvm, .spacing__pam {
padding-bottom: 0.625rem !important; }
.spacing__pbl, .spacing__pvl, .spacing__pal {
padding-bottom: 1.25rem !important; }
.spacing__pbx, .spacing__pvx, .spacing__pax {
padding-bottom: 2.5rem !important; }
.spacing__pln, .spacing__phn, .spacing__pan {
padding-left: 0 !important; }
.spacing__pls, .spacing__phs, .spacing__pas {
padding-left: 0.3125rem !important; }
.spacing__plm, .spacing__phm, .spacing__pam {
padding-left: 0.625rem !important; }
.spacing__pll, .spacing__phl, .spacing__pal {
padding-left: 1.25rem !important; }
.spacing__plx, .spacing__phx, .spacing__pax {
padding-left: 2.5rem !important; }
.spacing__mtn, .spacing__mvn, .spacing__man {
margin-top: 0 !important; }
.spacing__mts, .spacing__mvs, .spacing__mas {
margin-top: 0.3125rem !important; }
.spacing__mtm, .spacing__mvm, .spacing__mam {
margin-top: 0.625rem !important; }
.spacing__mtl, .spacing__mvl, .spacing__mal {
margin-top: 1.25rem !important; }
.spacing__mtx, .spacing__mvx, .spacing__max {
margin-top: 2.5rem !important; }
.spacing__mrn, .spacing__mhn, .spacing__man {
margin-right: 0 !important; }
.spacing__mrs, .spacing__mhs, .spacing__mas {
margin-right: 0.3125rem !important; }
.spacing__mrm, .spacing__mhm, .spacing__mam {
margin-right: 0.625rem !important; }
.spacing__mrl, .spacing__mhl, .spacing__mal {
margin-right: 1.25rem !important; }
.spacing__mrx, .spacing__mhx, .spacing__max {
margin-right: 2.5rem !important; }
.spacing__mbn, .spacing__mvn, .spacing__man {
margin-bottom: 0 !important; }
.spacing__mbs, .spacing__mvs, .spacing__mas {
margin-bottom: 0.3125rem !important; }
.spacing__mbm, .spacing__mvm, .spacing__mam {
margin-bottom: 0.625rem !important; }
.spacing__mbl, .spacing__mvl, .spacing__mal {
margin-bottom: 1.25rem !important; }
.spacing__mbx, .spacing__mvx, .spacing__max {
margin-bottom: 2.5rem !important; }
.spacing__mln, .spacing__mhn, .spacing__man {
margin-left: 0 !important; }
.spacing__mls, .spacing__mhs, .spacing__mas {
margin-left: 0.3125rem !important; }
.spacing__mlm, .spacing__mhm, .spacing__mam {
margin-left: 0.625rem !important; }
.spacing__mll, .spacing__mhl, .spacing__mal {
margin-left: 1.25rem !important; }
.spacing__mlx, .spacing__mhx, .spacing__max {
margin-left: 2.5rem !important; }
/*
Text Align
Simple classes to adjust your text alignment. They can be added to individual elements or on wrapping elements (an outer `div`, perhaps) to adjust the alignment of all the child elements.
*/
.presentational__align-left {
text-align: left; }
.presentational__align-center {
text-align: center; }
.presentational__align-right {
text-align: right; }
.presentational__align-sub {
vertical-align: sub; }
.presentational__align-middle {
vertical-align: middle; }
.presentational__align-top {
vertical-align: top; }
/*
Floats
Next, we have classes for floating elements.
*/
.presentational__float-left {
float: left; }
.presentational__float-center {
margin-left: auto;
margin-right: auto; }
.presentational__float-right {
float: right; }
.presentational__float-none {
float: none; }
.presentational__clear {
clear: both; }
/*
"New Line"
Turns an `inline` or `inline-block` element into a `block` one.
*/
.presentational__new-line {
display: block; }
.presentational__group {
/* Mixins */ }
.presentational__group:before, .presentational__group:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden; }
.presentational__group:after {
clear: both; }
/*
"Is Hidden"
Visually hides content in a way that leaves it accessible to screen readers.
Like more magic, makes the visible invisible.
*/
.presentational__is-hidden {
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: 59.9375em) {
.presentational__is-hidden-medium {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden; }
.presentational__is-hidden-medium.focusable:active, .presentational__is-hidden-medium.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static; }
body:hover .presentational__is-hidden-medium a,
body:hover .presentational__is-hidden-medium input,
body:hover .presentational__is-hidden-medium button {
display: none; } }
@media all and (min-width: 60em) {
.presentational__is-hidden-large {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden; }
.presentational__is-hidden-large.focusable:active, .presentational__is-hidden-large.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static; }
body:hover .presentational__is-hidden-large a,
body:hover .presentational__is-hidden-large input,
body:hover .presentational__is-hidden-large button {
display: none; } }
/*
"Isn't Hidden"
Undoes `.is-hidden`.
*/
.presentational__isnt-hidden {
/* Mixins */
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto; }
body:hover .presentational__isnt-hidden a,
body:hover .presentational__isnt-hidden input,
body:hover .presentational__isnt-hidden button {
display: inline-block; }
.lte7 body:hover .presentational__isnt-hidden a, .lte7
body:hover .presentational__isnt-hidden input, .lte7
body:hover .presentational__isnt-hidden button {
display: inline;
zoom: 1; }
/*
"Relative Container"
Exactly what it sounds like.
*/
.presentational__relative-container {
position: relative; }
/*
"No Scroll"
Paired with "motif.utitlies.js" to make the page non-scrollable
*/
html.presentational__no-scroll,
body.presentational__no-scroll {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed; }
.grid__row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
width: 100%; }
.grid__row--reverse {
flex-direction: row-reverse; }
.grid__col-sm-1of6, .grid__col-sm-2of6, .grid__col-sm-3of6, .grid__col-sm-4of6, .grid__col-sm-5of6, .grid__col-sm-6of6, .grid__col-med-1of9, .grid__col-med-2of9, .grid__col-med-3of9, .grid__col-med-4of9, .grid__col-med-5of9, .grid__col-med-6of9, .grid__col-med-7of9, .grid__col-med-8of9, .grid__col-med-9of9, .grid__col-lg-1of12, .grid__col-lg-2of12, .grid__col-lg-3of12, .grid__col-lg-4of12, .grid__col-lg-5of12, .grid__col-lg-6of12, .grid__col-lg-7of12, .grid__col-lg-8of12, .grid__col-lg-9of12, .grid__col-lg-10of12, .grid__col-lg-11of12, .grid__col-lg-12of12 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px; }
@media all and (min-width: 30em) {
.grid__col-sm-1of6 {
width: 16.6666666667%;
max-width: 16.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 30em) {
.grid__col-sm-2of6 {
width: 33.3333333333%;
max-width: 33.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 30em) {
.grid__col-sm-3of6 {
width: 50%;
max-width: 50%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 30em) {
.grid__col-sm-4of6 {
width: 66.6666666667%;
max-width: 66.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 30em) {
.grid__col-sm-5of6 {
width: 83.3333333333%;
max-width: 83.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 30em) {
.grid__col-sm-6of6 {
width: 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-1of9 {
width: 11.1111111111%;
max-width: 11.1111111111%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-2of9 {
width: 22.2222222222%;
max-width: 22.2222222222%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-3of9 {
width: 33.3333333333%;
max-width: 33.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-4of9 {
width: 44.4444444444%;
max-width: 44.4444444444%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-5of9 {
width: 55.5555555556%;
max-width: 55.5555555556%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-6of9 {
width: 66.6666666667%;
max-width: 66.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-7of9 {
width: 77.7777777778%;
max-width: 77.7777777778%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-8of9 {
width: 88.8888888889%;
max-width: 88.8888888889%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 48em) {
.grid__col-med-9of9 {
width: 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-1of12 {
width: 8.3333333333%;
max-width: 8.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-2of12 {
width: 16.6666666667%;
max-width: 16.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-3of12 {
width: 25%;
max-width: 25%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-4of12 {
width: 33.3333333333%;
max-width: 33.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-5of12 {
width: 41.6666666667%;
max-width: 41.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-6of12 {
width: 50%;
max-width: 50%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-7of12 {
width: 58.3333333333%;
max-width: 58.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-8of12 {
width: 66.6666666667%;
max-width: 66.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-9of12 {
width: 75%;
max-width: 75%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-10of12 {
width: 83.3333333333%;
max-width: 83.3333333333%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-11of12 {
width: 91.6666666667%;
max-width: 91.6666666667%;
padding-right: 15px;
padding-left: 15px; } }
@media all and (min-width: 60em) {
.grid__col-lg-12of12 {
width: 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px; } }
/*
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, .exhibitAudioPlayer__wrapper {
width: 92%;
margin-left: auto;
margin-right: auto; }
@media all and (min-width: 60em) {
.wrappers__wrapper, .exhibitAudioPlayer__wrapper {
max-width: 1440px; } }
.wrappers__wrapper-max {
max-width: 1440px;
margin-left: auto;
margin-right: auto; }
.wrappers__full-bleed {
max-width: 1600px;
margin-left: auto;
margin-right: auto; }
.simpleHeader {
position: relative;
background: #141414;
z-index: 11; }
.simpleHeader .menu-main-navigation-container,
.simpleHeader #menu-mobile-select-site-navigation .menu-item,
.simpleHeader .mobile-member-links,
.simpleHeader .mobile-search-input {
max-width: 800px;
margin: 0 auto; }
.simpleHeader__flex {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px; }
.simpleHeader__inner {
display: flex;
align-items: center;
flex: 1 0 auto;
height: 100%; }
.simpleHeader__logo {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px; }
.simpleHeader__logo-link {
position: relative;
display: block;
height: 100%; }
.simpleHeader__button {
margin-left: 4.5rem;
padding-top: 0;
padding-bottom: 0;
height: 100%;
display: flex;
align-items: center; }
@media all and (max-width: 47.9375em) {
.simpleHeader__button {
font-size: 12px;
line-height: 1.1666666667;
margin-left: 2.25rem;
padding-left: 40px; } }
@media screen and (max-width: 1024px) {
.simpleHeader__button--tickets {
display: none; } }
.simpleHeader__menu {
color: #C28100;
transition: all .2s ease-in-out;
font-size: 20px;
padding-left: 20px; }
.simpleHeader__menu:hover, .simpleHeader__menu:focus, .simpleHeader__menu:active {
color: #fff; }
.exhibitFooter {
background-color: #141414;
padding-top: 80px;
padding-bottom: 80px; }
@media all and (max-width: 47.9375em) {
.exhibitFooter__info {
padding: 0 calc(((100% + 1.125rem) / 6) * 1); }
.exhibitFooter__info[data-promo="2"] {
margin-top: 2.5rem; } }
.exhibitFooter__info-figure {
position: relative;
margin: 0; }
.exhibitFooter__info-figure:before {
content: "";
width: 100%;
display: block;
padding-top: 100%; }
.exhibitFooter__info-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 .exhibitFooter__info-figure img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); }
.exhibitFooter__info--header {
font-size: 16px;
line-height: 1.5;
font-family: "Libre Franklin", sans-serif;
color: #fff;
margin-top: 1.25rem; }
.exhibitFooter__info--link {
font-size: 16px;
line-height: 1.375;
font-family: "Sequel100Wide", sans-serif;
color: #C28100;
letter-spacing: 3.6px;
text-transform: uppercase; }
.exhibitFooter__endcap {
margin-top: 5rem;
text-align: center; }
@media all and (min-width: 48em) {
.exhibitFooter__endcap {
margin-top: 0;
text-align: left; } }
.exhibitFooter__newsletter a {
font-size: 14px;
line-height: 1.2142857143;
color: #AAA9AB;
font-family: "Libre Franklin", sans-serif;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase; }
.exhibitFooter__newsletter svg {
color: #C28100; }
.exhibitFooter__social-title {
color: #C28100;
margin-top: 1.25rem; }
.exhibitFooter__social {
display: flex; }
@media all and (max-width: 47.9375em) {
.exhibitFooter__social {
justify-content: center; } }
.exhibitFooter__social-icon {
margin-right: 15px; }
.exhibitFooter__social-icon a {
display: block; }
.exhibitFooter__text {
font-size: 10px;
line-height: 2.4;
font-family: "Libre Franklin", sans-serif;
margin-top: 2.5rem;
color: #fff;
letter-spacing: 2px; }
.exhibitFooter__text a {
color: #C28100; }
.exhibitFooter__ackonwledgements {
text-align: center; }
.exhibitFooter__ackonwledgements--header {
color: #C28100;
margin-top: 1.25rem;
font-size: 24px;
line-height: 1;
letter-spacing: 0.125em; }
@media all and (min-width: 60em) {
.exhibitFooter__ackonwledgements--header {
font-size: 38px;
line-height: 1;
letter-spacing: 0.1315789474em; } }
.exhibitFooter__ackonwledgements--header a:hover {
text-decoration: underline; }
.exhibitFooter__ackonwledgements--content {
color: #fff;
border: 1px solid #fff;
border-width: 1px 0;
margin: 20px 0;
padding: 20px 0; }
@media all and (min-width: 48em) {
.exhibitFooter__ackonwledgements--content {
margin: 40px 0;
padding: 40px 0; } }
.exhibitFooter__ackonwledgements--content h1,
.exhibitFooter__ackonwledgements--content h2,
.exhibitFooter__ackonwledgements--content h3,
.exhibitFooter__ackonwledgements--content h4,
.exhibitFooter__ackonwledgements--content h5,
.exhibitFooter__ackonwledgements--content h6 {
color: #fff; }
.exhibitFooter__ackonwledgements--content p {
margin-bottom: 40px; }
.exhibit-template #menu-item-47 {
visibility: visible;
display: list-item; }
.imageCaption__figcaption {
margin-top: 0; }
.imageCaption__heading, .imageCaption__modal-heading, .imageGallery__modal-heading {
margin-top: 1.25rem; }
.imageCaption__caption, .imageCaption__modal-caption, .imageGallery__modal-caption {
margin-top: 1.25rem; }
.suiting-the-sound .imageCaption__caption, .suiting-the-sound .imageCaption__modal-caption, .suiting-the-sound .imageGallery__modal-caption {
font-family: Arial, Helvetica, sans-serif; }
.imageCaption__modal, .imageGallery__modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
padding: 5vw 0;
overflow-x: scroll;
z-index: 20; }
.imageCaption__modal:not(.is-revealed), .imageGallery__modal:not(.is-revealed) {
display: none; }
.imageCaption__modal-wrapper, .imageGallery__modal-wrapper {
width: 75%;
margin: 0 auto; }
.imageCaption__modal-trigger {
position: relative;
margin: 0;
display: block;
width: 100%;
padding: 0 !important;
border: none;
cursor: zoom-in; }
.imageCaption__modal-trigger:before {
content: "";
width: 100%;
display: block;
padding-top: 100%; }
.imageCaption__modal-trigger 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 .imageCaption__modal-trigger img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); }
.imageCaption__modal-trigger:focus, .imageCaption__modal-trigger:hover {
border: none; }
.imageCaption__modal-trigger[data-ratio="portrait"] {
position: relative;
margin: 0; }
.imageCaption__modal-trigger[data-ratio="portrait"]:before {
content: "";
width: 100%;
display: block;
padding-top: 150%; }
.imageCaption__modal-trigger[data-ratio="portrait"] 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 .imageCaption__modal-trigger[data-ratio="portrait"] img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); }
.imageCaption__modal-trigger[data-ratio="landscape"] {
position: relative;
margin: 0; }
.imageCaption__modal-trigger[data-ratio="landscape"]:before {
content: "";
width: 100%;
display: block;
padding-top: 66.6666666667%; }
.imageCaption__modal-trigger[data-ratio="landscape"] 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 .imageCaption__modal-trigger[data-ratio="landscape"] img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); }
.imageCaption__modal-figure, .imageGallery__modal-figure {
position: relative;
margin-top: 1.25rem; }
.imageCaption__modal-figcaption, .imageGallery__modal-figcaption {
margin: 0 100px;
color: #fff; }
.imageCaption__modal-header, .imageGallery__modal-header {
display: flex;
justify-content: flex-end; }
.imageCaption__modal-img-container, .imageGallery__modal-img-container {
position: relative;
height: 70vh;
background: #fff; }
.imageCaption__modal-img, .imageGallery__modal-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain; }
.exhibitAudioPlayer {
position: relative;
margin: 80px 0; }
@media all and (min-width: 48em) {
.exhibitAudioPlayer {
height: 60vh;
min-height: 380px; } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer {
height: 60vh;
min-height: 380px; } }
.exhibitAudioPlayer__vinyl {
position: absolute;
top: 0;
left: 0;
bottom: 0; }
@media all and (max-width: 47.9375em) {
.exhibitAudioPlayer__vinyl {
display: none; } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__vinyl {
width: calc( ( ( 100vw - 92% ) * 0.5 ) + (((92% + 1.125rem) / 12) * 2)); } }
@media all and (min-width: 97.8260869565em) {
.exhibitAudioPlayer__vinyl {
width: calc( ( ( 100vw - 1440px ) * 0.5 ) + (((1440px + 1.125rem) / 12) * 2)); } }
.exhibitAudioPlayer__vinyl img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
max-width: none;
width: auto;
height: auto;
-webkit-animation: turntable 10s infinite linear;
animation: turntable 10s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused; }
.exhibitAudioPlayer__wrapper {
height: 100%; }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__flex {
display: flex;
height: 100%;
justify-content: space-between;
padding-top: 60px;
padding-bottom: 60px;
padding-left: calc(((100% + 1.125rem) / 9) * 2);
padding-right: calc(((100% + 1.125rem) / 9) * 1); } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__flex {
padding-left: calc(((100% + 1.125rem) / 12) * 3);
padding-right: calc(((100% + 1.125rem) / 12) * 1); } }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__heading {
padding-left: calc(((100% + 1.125rem) / 9) * 2);
padding-right: calc(((100% + 1.125rem) / 9) * 1); } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__heading {
padding-left: calc(((100% + 1.125rem) / 12) * 3);
padding-right: calc(((100% + 1.125rem) / 12) * 1); } }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__player {
width: calc(((100% + 1.125rem) / 6) * 3);
flex: 0 0 auto; } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__player {
width: calc(((100% + 1.125rem) / 8) * 5); } }
.exhibitAudioPlayer__display {
display: flex;
flex-direction: row; }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__display {
flex-direction: column; } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__display {
flex-direction: row; } }
.exhibitAudioPlayer__display-figure {
margin: 0;
flex: 0 0 auto; }
.exhibitAudioPlayer__display-img {
width: 80px;
height: 80px; }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__display-img {
width: 150px;
height: 150px; } }
.exhibitAudioPlayer__display-meta {
margin-left: 2.25rem; }
.exhibitAudioPlayer__display-subhead {
font-size: 20px;
line-height: 1.6;
margin: 0.625rem 0;
font-family: "Bodoni Std";
font-weight: normal;
font-style: italic;
color: #983007;
color: var(--exhibit-red); }
.suiting-the-sound .exhibitAudioPlayer__display-subhead {
color: #781f1c; }
.exhibitAudioPlayer__display-track {
margin-top: 1.25rem; }
.exhibitAudioPlayer__display-artist {
margin-top: 0.625rem; }
.exhibitAudioPlayer__controls {
display: flex;
margin-left: -0.5625rem;
margin-right: -0.5625rem;
margin-top: 60px; }
.exhibitAudioPlayer__btn {
margin-left: 0.5625rem;
margin-right: 0.5625rem; }
.exhibitAudioPlayer__btn svg {
color: #983007;
color: var(--exhibit-red);
width: 20px;
height: 20px; }
.suiting-the-sound .exhibitAudioPlayer__btn svg {
color: #781f1c; }
.exhibitAudioPlayer__btn[data-action="prev"] svg {
transform: rotate(180deg);
transform-origin: center center; }
@media all and (min-width: 48em) {
.exhibitAudioPlayer__tracks {
width: calc(((100% + 1.125rem) / 6) * 3);
flex: 0 0 auto;
margin-left: 2.25rem; }
.is-overflowing .exhibitAudioPlayer__tracks {
position: relative; }
.is-overflowing .exhibitAudioPlayer__tracks:before {
content: '';
position: absolute;
bottom: 0;
left: -20px;
right: -20px;
height: 50px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); } }
@media all and (min-width: 60em) {
.exhibitAudioPlayer__tracks {
width: calc(((100% + 1.125rem) / 8) * 3); } }
.exhibitAudioPlayer__tracklist {
margin-top: 0; }
.is-overflowing .exhibitAudioPlayer__tracklist {
position: relative;
height: 100%;
overflow-y: scroll; }
.exhibitAudioPlayer__tracklist-item {
margin: 0;
border-bottom: 1px solid #7F7F7F;
width: 100%; }
.exhibitAudioPlayer__tracklist-item:first-of-type {
border-top: 1px solid #7F7F7F; }
.exhibitAudioPlayer__track {
font-size: 14px;
line-height: 1.1428571429;
display: flex;
align-items: center;
font-family: var(--fonts-secondary-heading);
text-align: left;
margin: 0;
padding: 15px 10px; }
.exhibitAudioPlayer__track.is-active {
color: #983007;
color: var(--exhibit-red); }
.suiting-the-sound .exhibitAudioPlayer__track.is-active {
color: #781f1c; }
.exhibitAudioPlayer__track.is-active svg[data-control="play"] {
display: none; }
.exhibitAudioPlayer__track.is-active svg[data-control="pause"] {
display: block; }
.exhibitAudioPlayer__track svg {
width: 15px;
height: 15px;
color: #983007;
color: var(--exhibit-red);
margin-right: 1.125rem;
flex: 1 0 auto; }
.suiting-the-sound .exhibitAudioPlayer__track svg {
color: #781f1c; }
.exhibitAudioPlayer__track svg[data-control="pause"] {
display: none; }
.suiting-the-sound .exhibitAudioPlayer__track svg {
color: #781f1c; }
@-webkit-keyframes turntable {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
@keyframes turntable {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
.imageGallery {
overflow: hidden; }
.imageGallery__overflow {
margin: 80px 0; }
@media all and (min-width: 48em) {
.imageGallery__heading {
margin-left: calc(((100% + 1.125rem) / 9) * 3);
transform: translateX(1.125rem); } }
@media all and (min-width: 60em) {
.imageGallery__heading {
margin-left: calc(((100% + 1.125rem) / 12) * 3); } }
@media all and (min-width: 48em) {
.imageGallery__wrapper {
margin-top: 1.25rem;
margin-left: calc(((100% + 1.125rem) / 9) * 3);
width: 287px; } }
@media all and (min-width: 60em) {
.imageGallery__wrapper {
margin-left: calc(((100% + 1.125rem) / 12) * 3); } }
.imageGallery__slide:focus {
outline: 0; }
.imageGallery__figure {
margin: 0 1.125rem; }
.imageGallery__img-wrap {
position: relative;
margin: 0; }
.imageGallery__img-wrap:before {
content: "";
width: 100%;
display: block;
padding-top: 125.43554007%; }
.imageGallery__img-wrap 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 .imageGallery__img-wrap img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0); }
.imageGallery__figcaption {
margin-top: 1.25rem;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease 0; }
.slick-current .imageGallery__figcaption {
transition-delay: .25s;
visibility: visible;
opacity: 1; }
.imageGallery__cta {
display: none; }
.slick-current .imageGallery__cta {
font-size: 14px;
line-height: 1.2857142857;
letter-spacing: 0.1714285714em;
display: flex;
align-items: center;
margin-top: 0.625rem;
padding: 0.625rem 0;
font-family: "Sequel100Wide", sans-serif;
color: #983007;
text-transform: uppercase; }
.slick-current .imageGallery__cta svg {
width: 15px;
height: 15px;
color: #983007;
margin-left: 2.25rem;
flex: 0 1 auto; }
.imageGallery__image-title {
font-weight: bold;
text-transform: uppercase;
color: #141414; }
.imageGallery__image-caption {
margin-top: 0.625rem; }
@media all and (min-width: 48em) {
.imageGallery__arrows {
position: absolute;
top: 1.25rem;
left: 1.125rem;
right: 1.125rem;
transform: translateX(calc(100% + (2.25rem))); }
.imageGallery__arrows:before {
content: '';
width: 100%;
display: block;
padding-top: 125.43554007%; } }
.imageGallery__controls {
margin: 0 -0.5625rem; }
.imageGallery__control {
color: #983007;
color: var(--exhibit-red);
padding: 0;
margin: 0 0.5625rem; }
.suiting-the-sound .imageGallery__control {
color: #781f1c; }
.imageGallery__control[data-control="prev"] svg {
transform: rotate(180deg);
transform-origin: center center; }
.imageGallery__control svg {
width: 45px;
height: 45px; }
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
@media all and (min-width: 48em) {
.slick-slide {
will-change: transform;
transform: scale(0.9);
transform-origin: top;
transition: transform .25s ease; }
.slick-slide.slick-active {
transform: scale(1); } }
.slick-arrow.slick-hidden {
display: none; }
.imageGallery__modal-trigger {
position: absolute;
width: 100%;
background: transparent;
color: inherit;
border: 0;
border-radius: 0;
min-width: initial;
z-index: 1;
cursor: zoom-in; }
.imageGallery__modal-trigger:hover, .imageGallery__modal-trigger:focus, .imageGallery__modal-trigger.is-current {
background: transparent;
color: inherit;
border: 0;
outline: none;
position: absolute;
top: auto; }
.imageGallery__modal-trigger:before {
content: '';
width: 100%;
display: block;
padding-top: 125.43554007%; }
@media all and (max-width: 47.9375em) {
.imageGallery__modal-trigger {
display: none; } }
@font-face {
font-family: 'cochin';
src: url("https://cmhof.imgix.net/fonts/Cochin/cochin.woff2") format("woff2"), url("https://cmhof.imgix.net/fonts/Cochin/cochin.woff") format("woff"), url("https://cmhof.imgix.net/fonts/Cochin/cochin.ttf") format("truetype");
font-weight: normal;
font-display: swap; }
body {
position: relative; }
body.themes__fwis {
background-color: #ffffff;
color: #141414;
font-family: "cochin";
font-size: 20px;
line-height: 1.6;
/* typography */ }
body.themes__fwis.fwis-quilt-purple, body.themes__fwis.fwis-purple {
--color-text: #693070;
--color-dark: #29282B;
--color-light: #897F71;
--color-accent: #076090; }
body.themes__fwis.fwis-quilt-brown, body.themes__fwis.fwis-brown {
--color-text: #853D16;
--color-dark: #29282B;
--color-light: #897F71;
--color-accent: #076090; }
body.themes__fwis.fwis-quilt-teal, body.themes__fwis.fwis-teal {
--color-text: #295A64;
--color-dark: #29282B;
--color-light: #897F71;
--color-accent: #076090; }
body.themes__fwis.fwis-quilt-blue, body.themes__fwis.fwis-blue {
--color-text: #076090;
--color-dark: #29282B;
--color-light: #897F71;
--color-accent: #076090; }
body.themes__fwis.fwis-red {
--color-text: #AE1B1F; }
body.themes__fwis.fwis-light-purple {
--color-text: #836982; }
body.themes__fwis h1:not([class*='exhibitFooter']),
body.themes__fwis h2:not([class*='exhibitFooter']),
body.themes__fwis h3:not([class*='exhibitFooter']),
body.themes__fwis h4:not([class*='exhibitFooter']),
body.themes__fwis h5:not([class*='exhibitFooter']) {
font-family: "ltc-nicholas-cochin-pro";
line-height: 1.2; }
body.themes__fwis h1,
body.themes__fwis h2,
body.themes__fwis h3 {
text-transform: uppercase; }
body.themes__fwis h1, body.themes__fwis .styles__h1, body.themes__fwis .exhibitFooter__ackonwledgements--content h1, .exhibitFooter__ackonwledgements--content body.themes__fwis h1 {
font-size: 2.2em; }
body.themes__fwis h2, body.themes__fwis .styles__h2, body.themes__fwis .exhibitFooter__ackonwledgements--content h2, .exhibitFooter__ackonwledgements--content body.themes__fwis h2 {
font-size: 1.8em; }
body.themes__fwis h3, body.themes__fwis .styles__h3, body.themes__fwis .exhibitFooter__ackonwledgements--header, body.themes__fwis .exhibitFooter__ackonwledgements--content h3, .exhibitFooter__ackonwledgements--content body.themes__fwis h3 {
font-size: 1.6em; }
body.themes__fwis h4, body.themes__fwis .styles__h4, body.themes__fwis .exhibitFooter__ackonwledgements--content h4, .exhibitFooter__ackonwledgements--content body.themes__fwis h4 {
font-size: 1.4em; }
body.themes__fwis h5, body.themes__fwis .styles__h5, body.themes__fwis .exhibitFooter__social-title, body.themes__fwis .exhibitFooter__ackonwledgements--content h5, .exhibitFooter__ackonwledgements--content body.themes__fwis h5 {
font-size: 1.1em; }
@media (min-width: 768px) {
body.themes__fwis h1, body.themes__fwis .styles__h1, body.themes__fwis .exhibitFooter__ackonwledgements--content h1, .exhibitFooter__ackonwledgements--content body.themes__fwis h1 {
font-size: 2.8em; }
body.themes__fwis h2, body.themes__fwis .styles__h2, body.themes__fwis .exhibitFooter__ackonwledgements--content h2, .exhibitFooter__ackonwledgements--content body.themes__fwis h2 {
font-size: 2.6em; }
body.themes__fwis h3, body.themes__fwis .styles__h3, body.themes__fwis .exhibitFooter__ackonwledgements--header, body.themes__fwis .exhibitFooter__ackonwledgements--content h3, .exhibitFooter__ackonwledgements--content body.themes__fwis h3 {
font-size: 2.2em; }
body.themes__fwis h4, body.themes__fwis .styles__h4, body.themes__fwis .exhibitFooter__ackonwledgements--content h4, .exhibitFooter__ackonwledgements--content body.themes__fwis h4 {
font-size: 1.8em; }
body.themes__fwis h5, body.themes__fwis .styles__h5, body.themes__fwis .exhibitFooter__social-title, body.themes__fwis .exhibitFooter__ackonwledgements--content h5, .exhibitFooter__ackonwledgements--content body.themes__fwis h5 {
font-size: 1.6em; } }
body.themes__fwis section {
position: relative; }
body.themes__fwis .procdected__wrapper {
padding: 160px 0;
background-color: #141414; }
body.themes__fwis .section-bg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1; }
body.themes__fwis .section-bg img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
-o-object-position: bottom;
object-position: bottom; }
body.themes__fwis .text-h1 {
font-size: 2.2em; }
@media (min-width: 768px) {
body.themes__fwis .text-h1 {
font-size: 2.8em; } }
body.themes__fwis .text-2xl {
font-size: 1.6em; }
body.themes__fwis .text-xl {
font-size: 1.2em; }
body.themes__fwis .text-lg {
font-size: 1.1em; }
body.themes__fwis .text-sm {
font-size: 1em; }
body.themes__fwis .text-cochin {
font-family: "cochin"; }
body.themes__fwis .text-cochin {
font-family: "ltc-nicholas-cochin-pro"; }
body.themes__fwis .bg-light-tan {
background-color: #D0BBA3; }
body.themes__fwis .text-purple {
color: #693070; }
body.themes__fwis .text-light-purple {
color: #836982; }
body.themes__fwis .text-marooned,
body.themes__fwis .text-red {
color: #AE1B1F !important; }
body.themes__fwis .text-blue {
color: #076090; }
body.themes__fwis .text-teal {
color: #295A64; }
body.themes__fwis .text-brown {
color: #853D16; }
body.themes__fwis .text-white {
color: #ffffff; }
body.themes__fwis .bg-fwis-marooned,
body.themes__fwis .bg-fwis-red {
background-color: #AE1B1F; }
body.themes__fwis .bg-fwis-purple {
background-color: #693070; }
body.themes__fwis .bg-fwis-brown {
background-color: #853D16; }
body.themes__fwis .bg-fwis-blue {
background-color: #076090; }
body.themes__fwis .bg-fwis-night-swim,
body.themes__fwis .bg-fwis-teal {
background-color: #295A64; }
body.themes__fwis .bg-fwis-light-purple {
background-color: #836982; }
body.themes__fwis .button__primary {
background: #076090;
color: #ffffff; }
body.themes__fwis .button__primary:hover {
background: #076090; }
body.themes__fwis .button__primary:not(.simpleHeader__button):after {
background-image: url("../../images/nav-right-white.svg");
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 1em;
margin-left: .625rem !important;
vertical-align: text-bottom;
width: 1em; }
body.themes__fwis .button--outline {
background: transparent;
border: 2px solid #fff; }
body.themes__fwis .button--outline:hover {
background: transparent; }
body.themes__fwis .h-full {
height: 100%; }
body.themes__fwis .w-full {
width: 100%; }
body.themes__fwis .m-auto {
margin: auto; }
body.themes__fwis .overflow-hidden {
overflow: hidden; }
body.themes__fwis .simpleHeader__menu svg g {
stroke: #fff; }
body.themes__fwis .fwis__hero {
padding: 3rem 1rem; }
body.themes__fwis .fwis__hero--logo {
max-width: 500px; }
body.themes__fwis .fwis__hero--secondary-logo {
max-width: 200px; }
@media all and (min-width: 48em) {
body.themes__fwis .fwis__hero {
padding: 5.5rem 2.222rem; }
body.themes__fwis .fwis__hero--secondary-logo {
margin: auto;
max-width: 400px; } }
body.themes__fwis .fwis__intro--image {
margin-top: -5rem; }
body.themes__fwis .fwis__intro figcaption {
color: #076090;
font-size: 1em;
margin-left: inherit;
max-width: 500px; }
@media all and (min-width: 48em) {
body.themes__fwis .fwis__intro figcaption {
margin-left: auto;
text-align: right; } }
body.themes__fwis .chapterHeader__copy p {
display: none;
font-size: 20px; }
@media all and (min-width: 48em) {
body.themes__fwis .chapterHeader__copy p {
display: block;
text-align: right; } }
body.themes__fwis .chapterHeader__figure-figcaption {
display: block;
color: var(--color-accent); }
body.themes__fwis .perspectives-links__container {
background-image: url("../../images/fwis-perspectives-texture.png");
background-repeat: no-repeat;
background-size: cover; }
@media (min-width: 768px) {
body.themes__fwis .perspectives-links__container {
background-size: 100% 100%; } }
body.themes__fwis .perspectives-links .icons__icon {
width: 33px;
height: 25px; }
body.themes__fwis .perspectives-links .perspectives-links__hover-icon {
display: none;
position: absolute;
top: 0;
right: 100%;
width: 65px;
height: 45px; }
body.themes__fwis .perspectives-links__link {
font-size: 24px;
line-height: 1.5;
position: relative;
font-family: "ltc-nicholas-cochin-pro";
text-transform: uppercase;
letter-spacing: 2px; }
body.themes__fwis .perspectives-links__link:hover .perspectives-links__hover-icon {
display: block; }
body.themes__fwis .perspectives-links__link:nth-child(2) {
grid-row-end: span 2; }
@media (min-width: 768px) {
body.themes__fwis .perspectives-links {
display: grid;
gap: 0 5rem;
grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 768px) {
body.themes__fwis .perspectives-links-2 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr); }
body.themes__fwis .perspectives-links-2 .perspectives-links-image-0 {
grid-area: 1 / 1 / 3 / 2; }
body.themes__fwis .perspectives-links-2 .perspectives-links-image-1 {
grid-area: 1 / 2 / 2 / 3; }
body.themes__fwis .perspectives-links-2 .perspectives-links-image-2 {
grid-area: 2 / 2 / 3 / 3; }
body.themes__fwis .perspectives-links-2 .perspectives-links-image-3 {
grid-area: 1 / 3 / 3 / 4; } }
body.themes__fwis .exhibitAudioPlayer__btn svg {
color: var(--color-text); }
@media (max-width: 767px) {
body.themes__fwis .exhibitAudioPlayer__btn {
margin-left: 0;
margin-right: 0; } }
body.themes__fwis .closing-chapters-links .icons__icon {
font-size: 34px; }
body.themes__fwis .closing-chapters-links__link {
margin-right: 1rem; }
body.themes__fwis .closing-chapters-links figure {
width: 100%; }
body.themes__fwis .closing-chapters-links figure:not(:first-child) {
margin-top: 2rem; }
@media (min-width: 768px) {
body.themes__fwis .closing-chapters-links {
display: grid;
gap: 2rem 1rem;
grid-template-columns: repeat(12, 1fr); }
body.themes__fwis .closing-chapters-links figure {
margin-top: inherit;
width: auto; }
body.themes__fwis .closing-chapters-links__link {
height: 90px; }
body.themes__fwis .closing-chapters-links__link:nth-child(1) {
grid-column-end: span 4; }
body.themes__fwis .closing-chapters-links__link:nth-child(2) {
grid-column-end: span 3;
justify-content: flex-end; }
body.themes__fwis .closing-chapters-links__link:nth-child(3) {
grid-column-end: span 5;
justify-content: center; }
body.themes__fwis .closing-chapters-links__link:nth-child(4) {
grid-column-end: span 5; } }
body.themes__fwis .quote {
padding: initial; }
body.themes__fwis .quote__box {
color: #ffffff;
font-size: 18px;
line-height: 1.4;
margin-bottom: 2rem;
padding: 2rem;
position: relative; }
body.themes__fwis .quote__box-attribute {
font-size: 20px; }
body.themes__fwis .quote__box:after {
content: '';
position: absolute;
left: 0;
top: -7rem;
background: #836982;
width: 100%;
height: 100%;
z-index: -1;
-webkit-clip-path: polygon(0 0, 90% 10%, 100% 94%, 0% 100%);
clip-path: polygon(0 0, 90% 10%, 100% 94%, 0% 100%);
transform: scaleX(1) scaleY(1.8); }
@media (min-width: 768px) {
body.themes__fwis .quote__box {
font-size: 1.778rem;
margin-bottom: 4rem;
padding: 0 6rem 0 1rem; }
body.themes__fwis .quote__box-attribute {
font-size: 1.6em; }
body.themes__fwis .quote__box:after {
-webkit-clip-path: polygon(0 0, 97% 10%, 100% 85%, 0% 100%);
clip-path: polygon(0 0, 97% 10%, 100% 85%, 0% 100%);
left: -3rem;
top: 0;
transform: scaleX(1.1) scaleY(1.4); } }
body.themes__fwis .fwis__footer-nav .styles__h5, body.themes__fwis .fwis__footer-nav .exhibitFooter__social-title, body.themes__fwis .fwis__footer-nav .exhibitFooter__ackonwledgements--content h5, .exhibitFooter__ackonwledgements--content body.themes__fwis .fwis__footer-nav h5 {
font-style: italic;
text-transform: none; }
body.themes__fwis .fwis__footer-nav__links {
display: grid;
gap: 50px; }
@media (min-width: 768px) {
body.themes__fwis .fwis__footer-nav__links {
grid-template-columns: 1fr 1fr; } }
@media (min-width: 1036px) {
body.themes__fwis .fwis__footer-nav__links {
grid-template-columns: 1fr 1fr 1fr 1fr; } }
body.themes__fwis .fwis__footer-nav ul {
list-style-type: none;
margin: 0;
padding: 0; }
body.themes__fwis .fwis__footer-nav li {
font-size: 1.1em; }
body.themes__fwis .fwis__footer-nav li:not(:first-child) {
margin-top: 1rem; }
body.themes__fwis .fwis__footer-nav li > a {
color: #ffffff; }
body.themes__fwis .simpleHeader {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
background: transparent;
transition: all .25s;
z-index: 10; }
body.themes__fwis .simpleHeader .simpleHeader__flex {
height: 150px;
justify-content: flex-start;
padding-top: 20px; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__flex {
flex-direction: row-reverse; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__flex {
height: 100px;
padding-top: 0; } }
body.themes__fwis .simpleHeader .simpleHeader__menu {
padding-left: 0;
padding-right: 30px; }
body.themes__fwis .simpleHeader .simpleHeader__menu svg {
filter: brightness(20);
height: 90px;
width: 90px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__menu svg {
width: 60px;
height: 60px; } }
body.themes__fwis .simpleHeader .simpleHeader__menu.mobile-nav-hamburger {
display: inline-block; }
body.themes__fwis .simpleHeader .simpleHeader__menu.mobile-nav-close {
display: none; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__menu {
padding-right: 0; } }
body.themes__fwis .simpleHeader .simpleHeader__logo {
width: 90px;
height: 90px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__logo {
width: 60px;
height: 60px; } }
body.themes__fwis .simpleHeader .simpleHeader__button {
height: 52px;
background: transparent;
border: 2px solid #ffffff; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeader .simpleHeader__button {
display: none; } }
body.themes__fwis .simpleHeader.active {
background: #141414;
transition: all .25s; }
body.themes__fwis .simpleHeader.active .simpleHeader__menu.mobile-nav-hamburger {
display: none; }
body.themes__fwis .simpleHeader.active .simpleHeader__menu.mobile-nav-close {
display: inline-block; }
body.themes__fwis .simpleHeader.active .simpleHeader__button {
color: #ffffff;
border-color: #ffffff; }
body.themes__fwis.fwis-parent .simpleHeader {
position: relative;
background: transparent;
transition: all .25s; }
body.themes__fwis.fwis-parent .simpleHeader.active {
background: #141414;
transition: all .25s; }
body.themes__fwis.fwis-parent main {
position: relative;
overflow: hidden; }
body.themes__fwis.fwis-parent .imageGallery__control {
color: #141414; }
body.themes__fwis .simpleHeaderNav {
position: absolute;
top: 150px;
left: 0;
right: 0;
width: 100%;
height: auto;
padding: 60px 0;
background: #141414;
color: white;
box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.5);
transform: translateY(-200%);
transition: all .25s;
z-index: 10; }
body.themes__fwis .simpleHeaderNav.open {
transform: translateY(0);
transition: all .25s; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeaderNav {
top: 100px; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__flex {
display: flex;
flex-wrap: wrap;
gap: 30px; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__flex {
flex-direction: column; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__col {
display: flex;
flex-direction: column;
row-gap: 30px;
width: calc(100% - 15px); }
@media all and (max-width: 59.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__col {
width: 100%; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-parent-link {
color: #F0B23A;
line-height: 1.25;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-parent-link:hover {
color: #CC8A00;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-children {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 30px;
column-gap: 30px; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-children-column {
width: calc(25% - 30px); }
@media all and (max-width: 59.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-children-column {
width: 100%; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-children ul {
margin: 0; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-children-title {
font-size: 36px;
line-height: 1;
font-family: trade-gothic-next-condensed, sans-serif;
font-weight: bold;
margin-bottom: 1.25rem; }
body.themes__fwis .simpleHeaderNav li {
line-height: 2rem;
margin-bottom: 30px; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-item-link {
color: #ffffff;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-item-link:hover {
color: #F0B23A;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-item-link.current {
color: #F0B23A; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-item-chapter {
font-family: "ltc-nicholas-cochin-pro";
font-size: 14px;
line-height: 1.1428571429;
margin-bottom: 10px; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__menu-item-title {
font-family: trade-gothic-next-condensed, sans-serif;
font-size: 22px;
line-height: 1.3636363636;
font-weight: 800;
font-style: normal;
letter-spacing: 0.63px; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__other-exhibits-parent-link {
color: #F0B23A;
line-height: 1.25;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__other-exhibits-parent-link:hover {
color: #CC8A00;
transition: all .25s; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card {
margin-bottom: 30px;
background-color: rgba(167, 104, 22, 0.65); }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-link {
display: flex;
color: #ffffff; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-link {
flex-direction: column; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-figure {
position: relative;
width: 33%; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-figure:before {
content: '';
display: block;
width: 100%;
padding-top: 67%; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-figure {
width: 100%; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-figure:before {
padding-top: 100%; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-figure-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-content {
padding: 20px; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-content.twoThirds {
width: 67%; }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-content.fullWidth {
width: 100%; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-content.twoThirds {
width: 100%; } }
body.themes__fwis .simpleHeaderNav .simpleHeaderNav__exhibit-card-title {
font-family: trade-gothic-next-condensed, sans-serif;
font-size: 20px;
line-height: 1.1;
font-weight: 800;
font-style: normal;
letter-spacing: 0.8px; }
body.themes__fwis .imageGallery__control {
color: var(--color-text); }
body.themes__fwis .largeHero {
position: relative;
display: flex;
justify-content: flex-end;
padding-bottom: 250px;
background-color: var(--color-light); }
body.themes__fwis .largeHero:not(.fwis-parent):before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../images/bg-texture-color-overlay.png");
opacity: .4; }
body.themes__fwis .largeHero.fwis-default .largeHero__chapter {
color: #ffffff; }
body.themes__fwis .largeHero.fwis-default .largeHero__headline {
color: #ffffff; }
body.themes__fwis .largeHero.fwis-default .largeHero__tagline {
color: #ffffff; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero {
flex-direction: column;
align-items: flex-end;
padding-top: 130px;
padding-bottom: 100px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero {
padding-top: 100px;
padding-bottom: 45px; } }
body.themes__fwis .largeHero .largeHero__oval {
position: absolute;
top: -512px;
left: -632px;
width: 1024px;
height: 1024px;
border-radius: 50%;
background-color: var(--color-dark);
opacity: .3;
z-index: 0; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__oval {
top: -20px;
left: -220px;
width: 480px;
height: 480px; } }
body.themes__fwis .largeHero .largeHero__logo {
align-items: center;
margin-bottom: 30px;
z-index: 1; }
body.themes__fwis .largeHero .largeHero__logo.largeHero__logo-mobile {
display: none;
margin-left: auto;
margin-right: auto; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__logo.largeHero__logo-mobile {
display: flex;
width: 300px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__logo.largeHero__logo-mobile {
width: 70%; } }
body.themes__fwis .largeHero .largeHero__logo.largeHero__logo-desktop {
display: flex;
width: 70%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__logo.largeHero__logo-desktop {
display: none; } }
body.themes__fwis .largeHero .largeHero__figure-container {
display: flex;
width: 67%;
z-index: 1; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__figure-container {
width: 100%;
padding-left: 30px;
padding-right: 30px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__figure-container {
padding-left: 15px;
padding-right: 15px; } }
body.themes__fwis .largeHero .largeHero__figure-container .largeHero__figure {
width: 100%;
height: auto;
padding-top: 67%; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__figure-container .largeHero__figure {
padding-top: 60%; }
body.themes__fwis .largeHero .largeHero__figure-container .largeHero__figure:before {
padding-top: 0; } }
body.themes__fwis .largeHero .largeHero__figure-container .largeHero__figure .largeHero__figure-img {
border-bottom-left-radius: 60%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__figure-container .largeHero__figure .largeHero__figure-img {
border-bottom-left-radius: 0; } }
body.themes__fwis .largeHero .largeHero__container {
position: absolute;
left: 0;
right: 0;
bottom: 100px;
width: 100%;
z-index: 1; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__container {
position: relative;
bottom: 0; } }
body.themes__fwis .largeHero .largeHero__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0; }
body.themes__fwis .largeHero .largeHero__col {
display: flex;
padding: 0 15px; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__col {
justify-content: flex-start;
width: 100%; } }
body.themes__fwis .largeHero .largeHero__col:first-child {
width: 40%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__col:first-child {
order: 2;
width: 100%;
padding-left: 0;
padding-right: 0; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__col:first-child {
padding-left: 0;
padding-right: 0; } }
body.themes__fwis .largeHero .largeHero__col:last-child {
width: 60%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero .largeHero__col:last-child {
order: 1;
width: 100%;
justify-content: flex-start;
padding-left: 0;
padding-right: 0; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero .largeHero__col:last-child {
padding-left: 0;
padding-right: 0; } }
body.themes__fwis .largeHero.fwis-parent {
padding-top: 0;
padding-bottom: 120px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent {
padding-bottom: 45px; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__container {
position: relative;
bottom: 0; }
body.themes__fwis .largeHero.fwis-parent .largeHero__row {
align-items: flex-start; }
body.themes__fwis .largeHero.fwis-parent .largeHero__col {
display: block;
position: relative;
padding-left: 15px;
padding-right: 15px; }
body.themes__fwis .largeHero.fwis-parent .largeHero__col:first-child {
width: 45%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__col:first-child {
width: 100%; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__col:nth-child(2) {
width: 50%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__col:nth-child(2) {
width: 100%; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__col {
padding-left: 0;
padding-right: 0; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__header {
margin-top: 0; }
body.themes__fwis .largeHero.fwis-parent .largeHero__logo.largeHero__logo-desktop {
width: 100%; }
body.themes__fwis .largeHero.fwis-parent .largeHero__logo.largeHero__logo-mobile {
margin-left: auto;
margin-right: auto; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__logo.largeHero__logo-mobile {
max-width: 300px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__logo.largeHero__logo-mobile {
max-width: 200px; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__headline {
font-size: 60px;
line-height: 0.9833333333;
letter-spacing: normal; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__headline {
font-size: 40px;
line-height: 1; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__tagline {
color: #5280BE;
margin-top: 5px; }
body.themes__fwis .largeHero.fwis-parent .largeHero__intro-text {
max-width: 60%;
margin: 25px 0 0;
padding: 0 15px;
font-family: "VoltaRegular";
font-size: 28px;
line-height: 1.4285714286; }
body.themes__fwis .largeHero.fwis-parent .largeHero__intro-text:first-letter {
float: left;
font-family: "VoltaBold";
font-size: 86px;
line-height: 0.3720930233;
color: #AA0534;
padding-top: 25px;
padding-bottom: 0;
padding-left: 0;
padding-right: 25px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__intro-text:first-letter {
font-size: 72px;
line-height: 0.4444444444;
padding-top: 20px;
padding-right: 5px; } }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__intro-text {
max-width: 100%; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__intro-text {
font-size: 24px;
line-height: 1.4166666667;
padding-left: 0;
padding-right: 0; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__figure-container {
width: 100%; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__figure-container {
padding-left: 0;
padding-right: 0; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__figure-container {
padding-left: 0;
padding-right: 0; } }
body.themes__fwis .largeHero.fwis-parent .largeHero__figure-container .largeHero__figure .largeHero__figure-img {
border-bottom-left-radius: 0; }
body.themes__fwis .largeHero.fwis-parent .largeHero__record {
position: absolute;
right: -10%;
bottom: -50%;
width: 75%;
max-width: 460px; }
body.themes__fwis .largeHero.fwis-parent .largeHero__record .largeHero__record-figure {
width: 100%;
max-width: 460px; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__record {
position: relative;
width: 100%;
right: 0;
bottom: 0;
margin-top: -115px;
margin-left: auto;
margin-right: auto; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__record {
margin-top: -75px; } }
@media all and (max-width: 59.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__record.no-cutout {
margin-top: 30px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .largeHero.fwis-parent .largeHero__record.no-cutout {
margin-top: 30px; } }
body.themes__fwis .landingContent {
position: relative;
background-image: none;
background-color: #E6E5E3;
padding: 100px 0; }
body.themes__fwis .landingContent:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../images/bg-texture-white-or-grey.png"); }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent {
padding: 45px 0; } }
body.themes__fwis .landingContent.fwis-parent .landingContent__text p:first-of-type:first-letter {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
padding: 0; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent.fwis-parent .landingContent__text p {
font-size: 20px;
line-height: 1.3;
margin: 0;
padding: 0; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent.fwis-parent .landingContent__text {
padding: 0 15px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent.fwis-parent {
padding: 45px 0; } }
body.themes__fwis .landingContent .landingContent__row {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%; }
body.themes__fwis .landingContent .landingContent__col {
margin: 0 auto;
padding: 0; }
body.themes__fwis .landingContent .landingContent__figure {
position: relative;
max-width: 100%; }
body.themes__fwis .landingContent .landingContent__figure:first-of-type {
top: 0; }
body.themes__fwis .landingContent .landingContent__figure.landingContent__figure-3 {
padding-top: 75px; }
body.themes__fwis .landingContent .landingContent__figcaption {
font-family: "Libre Franklin", sans-serif;
font-size: 14px;
line-height: 1.5714285714;
color: rgba(62, 62, 62, 0.9);
margin-top: 15px; }
body.themes__fwis .landingContent .landingContent__text {
padding: 0 75px; }
body.themes__fwis .landingContent .landingContent__text p {
font-family: "VoltaRegular";
font-size: 28px;
line-height: 1.4285714286;
color: #141414; }
body.themes__fwis .landingContent .landingContent__text p:first-of-type:first-letter {
font-family: "VoltaBold";
font-size: 86px;
line-height: 0.3720930233;
color: var(--color-text);
padding-top: 25px;
padding-bottom: 0;
padding-left: 0;
padding-right: 25px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent .landingContent__text p:first-of-type:first-letter {
font-size: 72px;
line-height: 0.4444444444;
padding-top: 15px;
padding-right: 5px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent .landingContent__text p {
font-size: 20px;
line-height: 1.6;
margin: 0;
padding: 0; } }
@media all and (max-width: 59.9375em) {
body.themes__fwis .landingContent .landingContent__text {
padding: 0 30px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .landingContent .landingContent__text {
padding: 0 15px; } }
body.themes__fwis .landingContent + .fullWidthGallery {
padding-top: 0; }
body.themes__fwis .exhibitAudioPlayer {
height: auto;
margin: 16px 0 40px 0;
min-height: unset;
padding-bottom: 100px; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__heading {
font-family: "ltc-nicholas-cochin-pro";
font-size: 60px;
line-height: 1.1666666667;
font-weight: bold;
text-transform: uppercase; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__display-figure:not(.landing) {
display: none; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__display-subhead {
font-size: 20px;
line-height: 1.2;
color: var(--color-text);
font-family: "cochin";
font-style: italic;
font-weight: bold; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__display-track {
font-family: "ltc-nicholas-cochin-pro";
font-size: 28px;
line-height: 1.1428571429;
color: #141414; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__display-track {
font-size: 22px;
line-height: 1.1363636364;
letter-spacing: 0.86px; } }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__controls {
justify-content: center;
margin: 60px auto 0; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__controls {
margin-top: 30px;
margin-bottom: 30px; } }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__btn {
color: var(--color-text); }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__btn.js-next svg, body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__btn.js-prev svg {
width: 33px;
height: 17px; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__track {
font-family: "ltc-nicholas-cochin-pro";
font-size: 18px;
line-height: 0.8888888889;
color: var(--color-text);
opacity: .9; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__track svg {
color: var(--color-text); }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__track.is-active {
color: var(--color-text);
opacity: 1; }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__track.is-active svg {
color: var(--color-text); }
body.themes__fwis .exhibitAudioPlayer .exhibitAudioPlayer__tracklist {
max-height: 300px;
overflow-y: scroll; }
body.themes__fwis .stories__wrapper {
position: relative; }
body.themes__fwis .stories__wrapper .guitar {
position: absolute;
top: -250px;
left: 0;
width: 320px;
z-index: 1; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .stories__wrapper .guitar {
top: -125px;
left: -100px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__wrapper .guitar {
top: -100px;
left: auto;
right: -100px;
width: 200px; } }
body.themes__fwis .stories__chapters {
display: grid;
gap: 2rem; }
@media all and (min-width: 48em) {
body.themes__fwis .stories__chapters {
grid-template-columns: 1fr 1fr; } }
body.themes__fwis .stories__chapters .stories__chapters-hover-icon {
display: none;
position: absolute;
top: 75px;
left: 5px;
width: 35px;
height: 45px;
color: #ffffff; }
body.themes__fwis .stories__chapters-link {
position: relative; }
body.themes__fwis .stories__chapters-link:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: transparent;
mix-blend-mode: soft-light;
transition: ease-in-out; }
body.themes__fwis .stories__chapters-link:hover .stories__chapters-hover-icon {
display: block; }
body.themes__fwis .stories__chapters-link:hover:after {
background-color: rgba(0, 0, 0, 0.6); }
body.themes__fwis .stories__slide {
display: flex;
justify-content: center;
-moz-column-gap: 60px;
column-gap: 60px;
transform: scale(1); }
body.themes__fwis .stories__slide.slick-active {
transform: scale(1); }
@media all and (max-width: 59.9375em) {
body.themes__fwis .stories__slide {
flex-direction: column;
row-gap: 60px; } }
body.themes__fwis .stories__col {
width: 40%; }
body.themes__fwis .stories__col:first-child {
margin-top: 92px; }
@media all and (max-width: 59.9375em) {
body.themes__fwis .stories__col {
width: 100%; } }
body.themes__fwis .stories__figure {
display: block;
position: relative;
width: 100%;
margin: 0; }
body.themes__fwis .stories__figure:before {
content: "";
width: 100%;
display: block;
padding-top: 67%; }
body.themes__fwis .stories__figure img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center; }
body.themes__fwis .stories__figcaption {
display: block;
margin-left: 165px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__figcaption {
margin-left: 0;
margin-right: 100px; } }
body.themes__fwis .stories__image-caption {
font-size: 14px;
line-height: 1.5714285714;
margin-top: 15px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__image-caption {
font-size: 12px;
line-height: 1.5; } }
body.themes__fwis .stories__title {
font-size: 60px;
line-height: 0.9833333333;
font-weight: bold;
text-transform: uppercase;
margin: 0; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__title {
font-size: 28px;
line-height: 1.0714285714;
letter-spacing: 0.75px; } }
body.themes__fwis .stories__text {
font-size: 20px;
line-height: 1.6;
margin-top: 25px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__text {
font-size: 16px;
line-height: 1.625; } }
body.themes__fwis .stories__arrows {
display: flex;
justify-content: flex-end;
margin-top: 40px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__arrows {
margin-top: 20px; } }
body.themes__fwis .stories__arrows .stories__col:first-child {
margin-top: 0; }
body.themes__fwis .stories__arrows .js-slider-arrows {
text-align: right; }
body.themes__fwis .stories__arrows .js-slider-arrows .imageGallery__control svg {
width: 62px;
height: 62px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .stories__arrows .js-slider-arrows .imageGallery__control svg {
width: 45px;
height: 45px; } }
body.themes__fwis .stories__arrows .js-slider-arrows .imageGallery__control[data-control="prev"] svg {
transform: rotate(180deg);
transform-origin: center center; }
body.themes__fwis .miniAudioPlayer .miniAudioPlayer__track {
font-family: "ltc-nicholas-cochin-pro";
font-size: 18px;
line-height: 0.8888888889;
color: var(--color-text);
opacity: .9; }
body.themes__fwis .miniAudioPlayer .miniAudioPlayer__track svg {
color: var(--color-text); }
body.themes__fwis .miniAudioPlayer .miniAudioPlayer__track.is-active {
color: var(--color-text);
opacity: 1; }
body.themes__fwis .miniAudioPlayer .miniAudioPlayer__track.is-active svg {
color: var(--color-text); }
body.themes__fwis .imageGallery {
padding: 0 0 80px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .imageGallery {
padding: 0; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .imageGallery .imageGallery__arrows {
margin-top: 20px; } }
body.themes__fwis .imageGallery .imageGallery__heading {
font-family: "ltc-nicholas-cochin-pro";
font-size: 60px;
line-height: 1.1666666667;
font-weight: bold;
text-transform: uppercase; }
body.themes__fwis .fullWidthGallery .fullWidthGallery__slide {
transform: scale(1); }
body.themes__fwis .fullWidthGallery .fullWidthGallery__slide.slick-active {
transform: scale(1); }
body.themes__fwis .fullWidthGallery .fullWidthGallery__figcaption {
display: block;
min-height: 64px;
padding: 0; }
@media all and (max-width: 77.4375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__figcaption {
max-width: 500px; } }
@media all and (max-width: 59.9375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__figcaption {
max-width: 300px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__figcaption {
max-width: 180px; } }
body.themes__fwis .fullWidthGallery .fullWidthGallery__image-title {
font-family: "ltc-nicholas-cochin-pro";
font-size: 34px;
line-height: 1; }
body.themes__fwis .fullWidthGallery .fullWidthGallery__image-caption {
font-family: "Libre Franklin", sans-serif;
font-size: 14px;
line-height: 1.5714285714;
color: rgba(62, 62, 62, 0.9); }
body.themes__fwis .fullWidthGallery .fullWidthGallery__arrows {
transform: translateY(-100%); }
@media all and (max-width: 47.9375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__arrows {
margin-top: -20px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__arrows .wrappers__wrapper, body.themes__fwis .fullWidthGallery .fullWidthGallery__arrows .exhibitAudioPlayer__wrapper {
width: 100%; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .fullWidthGallery .fullWidthGallery__arrows .js-slider-arrows {
display: flex;
justify-content: space-between; } }
body.themes__fwis .fullWidthGallery .imageGallery__control svg {
width: 64px;
height: 64px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .fullWidthGallery .imageGallery__control svg {
width: 45px;
height: 45px; } }
body.themes__fwis .fullWidthImage .fullWidthImage__figure {
flex-wrap: wrap; }
body.themes__fwis .fullWidthImage .fullWidthImage__figure-img {
width: 100%;
padding: 0; }
body.themes__fwis .fullWidthImage .fullWidthImage__figcaption {
flex: 1 1 auto; }
body.themes__fwis .fullWidthImage .fullWidthImage__caption {
font-size: 20px;
line-height: 1.6;
color: var(--color-accent);
font-family: "cochin";
width: 100%; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h1,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h2,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h3,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h4,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h5,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h6 {
font-family: "ltc-nicholas-cochin-pro";
font-weight: normal;
text-transform: uppercase; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h1,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h2,
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h3 {
text-transform: uppercase; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h2 {
font-size: 60px;
line-height: 1.1666666667; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h2 {
font-size: 28px;
line-height: 1.0714285714; } }
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg h3 {
font-size: 28px;
line-height: 1.6428571429; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__wysiwyg.wysiwyg p {
font-family: "VoltaRegular";
font-size: 20px;
line-height: 1.6;
color: #141414; }
body.themes__fwis .wysiwygFlex.is-first .wysiwygFlex__wysiwyg.wysiwyg p:first-of-type:first-letter {
float: none;
font-family: "VoltaRegular";
font-size: 34px;
line-height: 0.9411764706;
color: var(--color-text);
padding: 0; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageCaption__heading, body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageCaption__modal-heading, body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageGallery__modal-heading {
font-family: "ltc-nicholas-cochin-pro"; }
body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageCaption__caption, body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageCaption__modal-caption, body.themes__fwis .wysiwygFlex .wysiwygFlex__aside .imageGallery__modal-caption {
font-size: 20px;
line-height: 1.6;
font-family: "cochin";
color: var(--color-accent); }
body.themes__fwis .columnedContent,
body.themes__fwis .columnedContent .wysiwyg p {
font-family: "VoltaRegular"; }
body.themes__fwis .columnedContent img,
body.themes__fwis .columnedContent .wysiwyg p img {
-o-object-fit: contain;
object-fit: contain; }
body.themes__fwis .wysiwygFlex + .columnedContent {
padding-top: 0 !important; }
body.themes__fwis .pullquote {
margin-top: 48px;
margin-bottom: 48px;
padding: 0; }
body.themes__fwis .pullquote .pullquote__block {
padding: 0; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .pullquote .pullquote__block {
margin: 0; } }
body.themes__fwis .pullquote .pullquote__inner {
border-color: var(--color-accent);
border-top-width: 0;
border-bottom-width: 5px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .pullquote .pullquote__inner {
padding-top: 0; } }
body.themes__fwis .pullquote .pullquote__copy {
font-size: 28px;
line-height: 1.4285714286;
color: #141414;
font-style: italic;
font-weight: 500;
letter-spacing: -0.2px; }
body.themes__fwis .pullquote .pullquote__cite {
font-size: 40px;
line-height: 1.05;
color: #3E3E3E;
font-style: italic;
font-weight: 500;
letter-spacing: -0.16px;
text-transform: none;
font-family: "ltc-nicholas-cochin-pro"; }
body.themes__fwis .featuredImageText .featuredImageText__text {
font-family: "ltc-nicholas-cochin-pro";
font-size: 80px;
line-height: 1.5;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.2px; }
body.themes__fwis .doubleImageCallout .doubleImageCallout__figcaption p {
font-family: "Libre Franklin", sans-serif;
font-size: 14px;
line-height: 1.5714285714; }
body.themes__fwis .videoPlayer h2 {
font-family: "ltc-nicholas-cochin-pro";
font-size: 60px;
line-height: 1.1666666667;
font-weight: bold;
text-transform: uppercase; }
body.themes__fwis .videoPlayer h2 span {
background-color: #ffffff;
background-image: url("../../images/bg-texture-white-or-grey.png"); }
body.themes__fwis .videoPlayer .videoPlayer__title {
font-family: "ltc-nicholas-cochin-pro";
font-size: 28px;
line-height: 1.6428571429;
font-weight: bold;
text-transform: uppercase; }
body.themes__fwis .videoPlayer p {
font-family: "VoltaRegular";
font-size: 20px;
line-height: 1.6;
color: #141414; }
body.themes__fwis .videoPlayer a {
color: var(--color-accent); }
body.themes__fwis .videoPlayer a:hover {
color: var(--color-accent); }
body.themes__fwis .featuredVideo .featuredVideo__title {
font-family: "ltc-nicholas-cochin-pro";
font-size: 28px;
line-height: 1.6428571429;
font-weight: bold;
text-transform: uppercase;
margin: 0; }
body.themes__fwis .featuredVideo .featuredVideo__caption {
font-family: "VoltaRegular";
font-size: 20px;
line-height: 1.6;
color: var(--color-accent); }
body.themes__fwis .exhibitNextPrev {
position: relative;
background-image: none; }
body.themes__fwis .exhibitNextPrev:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../../images/fwis-footer-quilt-top.png");
background-repeat: no-repeat;
background-size: cover;
background-color: white;
background-position: top center; }
@media (min-width: 768px) {
body.themes__fwis .exhibitNextPrev {
padding: 350px 0 140px; } }
body.themes__fwis .exhibitNextPrev.fwis-default .exhibitNextPrev__nav-link--next,
body.themes__fwis .exhibitNextPrev.fwis-default .exhibitNextPrev__nav-link--prev {
font-family: "ltc-nicholas-cochin-pro" !important;
color: #ffffff !important; }
body.themes__fwis .exhibitNextPrev.fwis-default .exhibitNextPrev__cards-chapter {
color: #ffffff; }
body.themes__fwis .exhibitNextPrev.fwis-default .exhibitNextPrev__cards-heading {
color: #ffffff; }
body.themes__fwis .exhibitNextPrev.fwis-default .exhibitNextPrev__card-subheading {
color: #ffffff; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--next,
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--prev {
font-size: 22px;
line-height: 1.3181818182;
font-family: "ltc-nicholas-cochin-pro";
color: #ffffff;
z-index: 1; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--next span,
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--prev span {
border-color: #ffffff; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--next span {
transform: none; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--next:hover span {
transform: translateX(10px);
transition: all .25s; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--prev span {
transform: rotate(180deg); }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__nav-link--prev:hover span {
transform: rotate(180deg) translateX(10px);
transition: all .25s; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__cards {
display: flex; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__cards {
flex-direction: column; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card--prev {
order: 2;
margin-top: 40px; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card--next {
order: 1;
margin-top: 0; } }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card--next .exhibitNextPrev__nav-link--next {
flex-direction: row-reverse;
justify-content: flex-end;
-moz-column-gap: 18px;
column-gap: 18px; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card-figure {
flex-direction: column; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card-img {
width: 100%;
box-shadow: none; } }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card-img:before {
padding-top: 67%; } }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card-figcaption {
margin-left: 0; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__cards-chapter {
font-family: "ltc-nicholas-cochin-pro";
font-size: 14px;
line-height: 1.1428571429; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__cards-heading {
font-family: "ltc-nicholas-cochin-pro";
font-size: 40px;
line-height: 1;
font-weight: bold;
letter-spacing: 1.3px;
text-transform: uppercase; }
body.themes__fwis .exhibitNextPrev .exhibitNextPrev__card-subheading {
font-family: "ltc-nicholas-cochin-pro";
font-size: 28px;
line-height: 1.0714285714;
font-weight: bold;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--color-text); }
body.themes__fwis .exhibitPartsList .exhibitPartsList__link {
transition: all .25s; }
body.themes__fwis .exhibitPartsList .exhibitPartsList__link.current {
color: #C28100;
text-decoration: none; }
body.themes__fwis .exhibitPartsList .exhibitPartsList__link:hover {
color: #C28100;
text-decoration: none;
transition: all .25s; }
@media all and (max-width: 47.9375em) {
body.themes__fwis .exhibitFooter .exhibitFooter__ackonwledgements--header {
font-size: 20px; } }
body.themes__fwis .exhibitFooter .exhibitFooter__ackonwledgements--content h2 {
font-family: "source-serif-pro";
text-transform: none; }
body.themes__fwis:not(.night-train-parent) .fwis__footer-nav {
background-color: #141414; }
body.themes__fwis.page-track-list p:first-of-type:first-letter {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
padding: 0 !important; }
body.themes__fwis .imageCaption__gees figcaption {
font-size: 16px;
line-height: 1.1875;
color: #076090;
margin-left: inherit;
max-width: 500px;
font-family: "cochin"; }
@media all and (min-width: 48em) {
body.themes__fwis .imageCaption__gees figcaption {
margin-left: auto;
text-align: right; } }
/*# sourceMappingURL=../../build/css/maps/fwis.min.css.map */