/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

@font-face {
  font-family: "ABC Camera Plain Unlicensed Trial";
  src: url("../fonts/ABCCameraPlain-MediumItalic.woff2") format("woff2"), url("../fonts/ABCCameraPlain-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ABC Camera Plain Unlicensed Trial";
  src: url("../fonts/ABCCameraPlain-Medium.woff2") format("woff2"), url("../fonts/ABCCameraPlain-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Camera Plain Unlicensed Trial";
  src: url("../fonts/ABCCameraPlain-Regular.woff2") format("woff2"), url("../fonts/ABCCameraPlain-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Camera Plain Unlicensed Trial";
  src: url("../fonts/ABCCameraPlain-RegularItalic.woff2") format("woff2"), url("../fonts/ABCCameraPlain-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
/**
  !!!! note: use font-weight: 500 for bolder titles, links, etc
**/
body {
  color: #000;
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-weight: 100;
  transition: background-color 0.2s ease-in-out;
}

/***
  Typography
***/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

h1 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.0666rem;
  text-transform: uppercase;
}

h2 {
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.0666rem;
  text-transform: uppercase;
  margin: 0;
}

h2.h1 {
  margin: 0.67em 0;
}

h2.tall {
  text-transform: none;
  font-weight: normal;
  font-size: 2.125rem;
  letter-spacing: -0.1rem;
}

h2.lg-bold {
  font-weight: 500;
  font-size: 4.125rem;
  letter-spacing: -0.175rem;
}
@media all and (max-width: 1024px) {
  h2.lg-bold {
    font-size: 3rem;
  }
}
@media all and (max-width: 600px) {
  h2.lg-bold {
    font-size: 2.333rem;
  }
}

p, li {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02rem;
  line-height: 1.333;
}

a {
  color: black;
}

.page-title {
  padding-top: 9rem;
}

span.short-heading {
  display: block;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: -0.02rem;
}

.centered-title-wrap {
  width: 100%;
  text-align: center;
  padding-top: 9rem;
}
.centered-title-wrap h1 {
  font-size: 3rem;
  line-height: 0.9;
  text-align: center;
  letter-spacing: -0.175rem;
  margin-bottom: 0;
  margin-top: 0;
}

@media all and (max-width: 1024px) {
  .centered-title-wrap h1 {
    font-size: 2.666rem;
  }
}
@media all and (max-width: 800px) {
  .centered-title-wrap h1 {
    font-size: 2.333rem;
  }
}
@media all and (max-width: 600px) {
  .centered-title-wrap h1 {
    font-size: 2rem;
  }
}
@media all and (max-width: 600px) {
  .centered-title-wrap h1 {
    font-size: 1.666rem;
  }
}
span.big-number {
  font-size: 4.125rem;
  font-weight: 500;
  letter-spacing: -0.2rem;
}

.hero-section {
  margin-bottom: 6rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/***
  Sections & Containers & utilities
***/
.section-yellow {
  background: #E7F043;
}

.contain {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 93.75rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.full-w-contain {
  padding-left: 2rem;
  padding-right: 2rem;
}

.contain.contain-tight {
  width: 80%;
  max-width: 66rem;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Adding the black curtain effect with :after */
.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  transform: translateY(0); /* Start with the curtain covering the image */
  transition: transform 0.6s ease-in; /* Smooth transition on hover */
}

/* Triggering the animation on hover */
.image-wrapper.visible::after {
  transform: translateY(-101%); /* Move the curtain up on hover */
}

.image-wrapper.delay-1.visible:after {
  transition-delay: 0.2s;
}

.image-wrapper:not(.visible)::after {
  transform: translateY(0); /* Curtain moves back down when the element is out of view */
}

.video-js {
  pointer-events: none;
}
.video-js.vjs-playing {
  pointer-events: auto;
}
.video-js button {
  pointer-events: auto;
}
.video-js .vjs-poster {
  background: #fff;
}

.video-js .vjs-poster {
  background: #fff;
  background-size: cover;
}

.presentation-rows-wrapper {
  position: relative;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

.row-component {
  margin-top: 8.75rem;
}
.row-component:first-child {
  margin-top: 0;
}

body[data-invert] {
  background: black;
  color: white;
}
body[data-invert] a {
  color: #ffffff;
}
body[data-invert] h1 {
  color: white;
}
body[data-invert] .header-mark img {
  filter: invert(1);
}
body[data-invert] span.who-circle {
  border-color: #fff !important;
}
body[data-invert] .hamburger.is-active .hamburger-inner,
body[data-invert] .hamburger.is-active .hamburger-inner::before,
body[data-invert] .hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}
body[data-invert] .hamburger-inner,
body[data-invert] .hamburger-inner::before,
body[data-invert] .hamburger-inner::after {
  background-color: #fff;
}
body[data-invert] .sm-menu {
  background: #000 !important;
}
body[data-invert] #site-footer-wrapper {
  background-color: #000;
}
body[data-invert] #site-footer {
  background-color: #000;
  transition: all 0.2s ease-in-out;
}

/***

  HOME PAGE

***/
.video-player-wrapper {
  display: grid;
  grid-template-columns: [video] 12fr;
}

.video-player-container {
  grid-area: video;
  position: relative;
}
.video-player-container video {
  width: 100%;
}

.video-player-controls {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
}
.video-player-controls button {
  border: none;
  background: transparent;
  cursor: pointer;
}

.home-more-than-wrapper {
  display: grid;
  margin-top: 9rem;
  margin-bottom: 9rem;
  grid-template-columns: [spacer] 1fr [more] 10fr [spacer] 1fr;
}
@media all and (max-width: 1024px) {
  .home-more-than-wrapper {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
}
@media all and (max-width: 1200px) {
  .home-more-than-wrapper {
    grid-template-columns: [more] 12fr;
  }
}

.home-more-than {
  grid-area: more;
}
.home-more-than img {
  width: 100%;
}

.home-manifesto {
  padding: 2rem 2rem 10rem 0;
}
.home-manifesto p {
  font-size: 3.6vw;
  letter-spacing: -0.18vw;
  line-height: 1.1;
}
@media all and (max-width: 1024px) {
  .home-manifesto {
    padding: 2rem 0 6rem;
  }
}
@media all and (max-width: 767px) {
  .home-manifesto p {
    font-size: 1.666rem;
  }
}

span.big-yellow {
  position: absolute;
  color: yellow;
  width: 100%;
  font-size: 6vw;
  font-weight: 500;
  letter-spacing: -0.175rem;
  text-align: center;
  text-transform: uppercase;
}

.home-buckets {
  display: grid;
  grid-template-columns: [bucket-1] 1fr [bucket-2] 1fr;
  gap: 1.333rem;
  padding-bottom: 1.333rem;
  margin-bottom: 6rem;
}
@media all and (max-width: 767px) {
  .home-buckets {
    display: block;
  }
  .home-buckets span.big-yellow {
    font-size: 11vw;
  }
  .home-buckets .exhibition-bucket {
    margin-bottom: 2rem;
  }
  .home-buckets .community-bucket {
    margin-bottom: 2rem;
  }
}

.exhibition-bucket {
  grid-column: bucket-1;
}

.community-bucket {
  grid-column: bucket-2;
}

.calendar-row {
  border-top: 1px solid #949597;
  padding: 2rem 0 6rem;
}
.calendar-row:last-child {
  border-bottom: 1px solid #949597;
}

.home-calendar-wrapper .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.home-calendar-wrapper .div1 {
  grid-area: 1/1/3/2;
}
.home-calendar-wrapper .div2 {
  grid-area: 1/2/2/3;
}
.home-calendar-wrapper .div3 {
  grid-area: 1/3/2/5;
}
.home-calendar-wrapper .div4 {
  grid-area: 1/8/-1/13;
}
.home-calendar-wrapper .div5 {
  grid-area: 2/2/3/8;
}
@media (max-width: 1024px) {
  .home-calendar-wrapper .div1 {
    grid-area: 1/1/2/5; /* Move div1 to first row, span across 4 columns */
  }
  .home-calendar-wrapper .div2 {
    grid-area: 1/5/2/9; /* Move div2 to first row, span across 4 columns */
  }
  .home-calendar-wrapper .div3 {
    grid-area: 1/9/2/13; /* Move div3 to first row, span across 4 columns */
  }
  .home-calendar-wrapper .div4 {
    grid-area: 2/1/3/13; /* Move div4 to second row, span across all columns */
  }
  .home-calendar-wrapper .div5 {
    grid-area: 3/1/4/13; /* Move div5 to third row, span across all columns */
  }
}

.calendar-more {
  text-align: center;
}
.calendar-more p {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 500;
}

/***

  EXHIBITIONS

***/
.showcase-item {
  position: relative;
}

.showcase-banner {
  box-sizing: border-box;
  padding: 0.5rem;
  position: absolute;
  background-color: #E7F043;
  top: 2rem;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Defines the 3 columns */
  grid-gap: 1rem;
}

.sb-name span {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 3vw;
  line-height: 0.9;
  letter-spacing: -0.175rem;
}

.sb-dates span {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.0666rem;
  text-transform: uppercase;
}

.sb-learn-more {
  text-align: right;
}
.sb-learn-more a {
  font-size: 1rem;
  letter-spacing: -0.0666rem;
  text-transform: uppercase;
  text-decoration: underline;
}

.showcased {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Creates two equal-width columns */
  gap: 2rem; /* Adjust the gap between columns as needed */
}

.showcase-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.past-exhibitions-wrapper, #project-wrapper {
  padding-top: 2rem;
}
.past-exhibitions-wrapper h2.h1, #project-wrapper h2.h1 {
  margin-bottom: 1rem;
}

.project-item {
  margin-bottom: 4rem;
}
.project-item a {
  text-decoration: none;
}
.project-item.hide {
  display: none;
}

.project-item-thumb {
  aspect-ratio: 384/215;
  overflow: hidden;
}
.project-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publication-item-thumb {
  aspect-ratio: 25/14;
  overflow: hidden;
}
.publication-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exhibit-type {
  display: block;
  margin-top: 1rem;
  margin-bottom: 1.333rem;
  letter-spacing: -0.02rem;
  text-transform: uppercase;
}

.exhibit-artist {
  display: block;
  text-transform: uppercase;
  letter-spacing: -0.02rem;
}

@media (max-width: 800px) {
  /* For smaller screens, stack the items in a single column */
  .showcased {
    grid-template-columns: 1fr;
  }
  .sb-name span {
    font-size: 2rem;
  }
}
/***

  Publications

***/
.publication-item {
  margin-bottom: 4rem;
}
.publication-item a {
  text-decoration: none;
}
.publication-item span {
  display: block;
}
.publication-item span.item-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  min-height: 2.5rem;
  letter-spacing: -0.05rem;
}
.publication-item span.item-outlet {
  font-size: 0.9rem;
  letter-spacing: -0.02rem;
  display: block;
  text-transform: uppercase;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.publication-item span.item-date {
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-size: 0.9rem;
  letter-spacing: -0.02rem;
  display: inline-block;
  text-transform: uppercase;
}

.press-hero-caption {
  color: #949597;
}

/*** 

   Community

 ***/
.community-wrapper .page-hero-wrapper {
  margin-bottom: 6rem;
}
.community-wrapper #community-intro {
  display: grid;
  grid-template-columns: 5fr 6fr 1fr;
  margin-bottom: 6rem;
}
@media all and (max-width: 800px) {
  .community-wrapper #community-intro {
    display: block;
  }
}
.community-wrapper .community-subtitle {
  grid-column: 1;
}
.community-wrapper .community-intro {
  grid-column: 2;
}
.community-wrapper #community-main .community-row {
  display: grid;
  grid-template-columns: [image] 6fr [desc] 5fr [spacer] 1fr;
  margin-bottom: 2rem;
  gap: 1rem;
}
.community-wrapper #community-main .community-row > *:first-child {
  margin-left: 0; /* Remove margin on the first item */
}
.community-wrapper #community-main .community-row > *:last-child {
  margin-right: 0; /* Remove margin on the last item */
}
.community-wrapper #community-main .community-image {
  grid-area: image;
}
.community-wrapper #community-main .community-info {
  grid-area: desc;
}
.community-wrapper #community-main span.community-event-type {
  display: block;
  margin-bottom: 2rem;
}
.community-wrapper #community-main h2 {
  margin-bottom: 2rem;
}
.community-wrapper #community-main .calendar-item-description {
  margin-bottom: 2rem;
}
@media all and (max-width: 1200px) {
  .community-wrapper #community-main .community-row {
    grid-template-columns: [image] 6fr [desc] 5fr [spacer] 1fr;
  }
}
@media all and (max-width: 800px) {
  .community-wrapper #community-main .community-row {
    display: block;
    margin-bottom: 6rem;
  }
  .community-wrapper #community-main .community-image {
    margin-bottom: 1rem;
  }
}

/***

  Take Part

***/
div#take-part-pillars-section {
  padding-bottom: 6rem;
}

.pillar-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: start;
}

.pillar-col-1 {
  display: flex;
  flex-direction: column; /* Stack children (header and accordion) vertically */
  justify-content: space-between; /* Space between header and accordion */
  height: 100%; /* Ensure it takes the full height of its container */
}

#take-part-programming-section {
  border-top: 1px solid #000000;
  padding-top: 1rem;
  margin-bottom: 6rem;
}

.hero-image {
  position: relative;
}

.hero-button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.hero-button {
  padding: 12px 24px;
  background-color: #E7F043;
  color: #000;
  font-weight: 500;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  font-size: 1.666rem;
  text-transform: uppercase;
}

.tp-programming-intro-row {
  display: grid;
  grid-template-columns: 6fr 5fr 1fr;
  align-items: start;
  padding-bottom: 6rem;
}
@media all and (max-width: 800px) {
  .tp-programming-intro-row {
    display: block;
  }
}

.triple-row {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  align-items: start;
  gap: 2rem;
}

.triple-item-image {
  margin-bottom: 1rem;
}

@media all and (max-width: 800px) {
  .triple-row {
    grid-template-columns: 1fr;
  }
  .triple-item {
    margin-bottom: 4rem;
  }
}
/***

  Upcoming Exhibitons Single

***/
.upcoming-title-wrapper {
  max-width: 66.6667%;
  margin: 0 auto;
  text-align: center;
  padding-top: 7rem;
}
.upcoming-title-wrapper h1 {
  font-size: 3rem;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 0.9;
}

#upcoming-highlights {
  padding-top: 10rem;
  margin-top: -7.5rem;
  padding-bottom: 3rem;
}

.upcoming-meta-wrapper {
  border-top: 1px solid #949597;
  padding-top: 1rem;
}

.upcoming-meta-row {
  display: grid;
  grid-template-columns: 2fr 2fr 8fr;
  gap: 2rem;
  margin-bottom: 1rem;
}
.upcoming-meta-row span {
  display: block;
  text-transform: uppercase;
}

.upcoming-intro p {
  font-size: 3vw;
  font-size: 3vw;
  line-height: 1;
  letter-spacing: -0.1vw;
}

#showcase-presentation-rows-wrapper {
  margin-top: 3rem;
}
#showcase-presentation-rows-wrapper .contain-copy-row {
  text-align: left;
}

@media all and (max-width: 800px) {
  .upcoming-meta-row {
    grid-template-columns: 2fr 5fr 5fr;
    gap: 1rem;
  }
  .upcoming-meta-row span {
    font-size: 0.8rem;
  }
  .upcoming-intro p {
    font-size: 1.6rem;
  }
}
@media all and (max-width: 600px) {
  .upcoming-intro p {
    font-size: 1.333rem;
  }
}
#events-wrapper {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
#events-wrapper .location-sm {
  display: none;
}
#events-wrapper .right-title-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [spacer] 7fr [title] 5fr;
}
#events-wrapper .right-title-grid .right-title {
  grid-area: title;
}
#events-wrapper .events-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [spacer] 1fr [col-1] 3fr [col-2] 3fr [col-3] 2fr [spacer] 3fr;
}
#events-wrapper .events-grid .col-1 {
  grid-area: col-1;
}
#events-wrapper .events-grid .col-2 {
  grid-area: col-2;
}
#events-wrapper .events-grid .col-3 {
  grid-area: col-3;
}
#events-wrapper .events-grid h2 {
  font-size: 2rem;
}
@media all and (max-width: 960px) {
  #events-wrapper .events-grid {
    grid-template-columns: [spacer] 1fr [col-1] 5fr [spacer] 1fr [col-2] 4fr [spacer] 1fr;
  }
  #events-wrapper .col-3 {
    display: none;
    grid-area: none;
  }
  #events-wrapper .location-sm {
    display: grid;
    grid-template-columns: [spacer] 1fr [location] 11fr;
    column-gap: 1rem;
  }
  #events-wrapper .location-sm-inside {
    grid-area: location;
    padding: 2rem 0;
  }
}
@media all and (max-width: 600px) {
  #events-wrapper .events-grid {
    display: block;
  }
  #events-wrapper .location-sm {
    display: block;
  }
}

/* Container for the accordion */
/* Style each individual accordion item */
.accordion-item {
  border-top: 1px solid #eaeaea;
}

/* Style the accordion headers */
.accordion-header {
  display: grid;
  grid-template-columns: 11fr 1fr;
  cursor: pointer;
  padding: 10px 2rem;
}

/* Style the "+" or "-" symbols in the header */
.accordion-header span {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 3rem;
  font-weight: normal;
  transition: transform 0.3s ease; /* Smooth animation for symbol change */
}

/* Rotate the "-" when open (optional visual effect) */
.accordion-header span.open {
  transform: rotate(180deg);
}

/* Style for the accordion content when collapsed */
.accordion-content {
  max-height: 0; /* Initially collapsed */
  overflow: hidden; /* Hide content when collapsed */
  transition: max-height 0.4s ease; /* Smooth transition for opening/closing */
  padding: 0 20px; /* Initial padding */
}

/* Style the accordion content when open */
.accordion-content.open {
  max-height: 1000px; /* Arbitrary large value to allow expansion */
  padding: 0 20px 1.5rem; /* Adjust padding when opened */
}

/* Style for paragraphs inside accordion content */
.accordion-content p {
  margin: 10px 0;
  line-height: 1.5;
}

/* Style for unordered lists inside accordion content */
.accordion-content ul {
  padding-left: 20px;
  margin: 10px 0;
}

.accordion-content ul li {
  margin-bottom: 5px;
}

.accordion-header h2 {
  text-transform: none;
  font-weight: normal;
  font-size: 2.875rem;
  letter-spacing: -0.175rem;
}

.pillar-accordion-wrapper .accordion-header {
  padding-left: 0;
}
.pillar-accordion-wrapper .accordion-content, .pillar-accordion-wrapper .accordion-content.open {
  padding-left: 0;
}

span.plusminus {
  justify-self: right;
}

.tp-levels-accordion-wrapper .accordion {
  background-color: #E7F043;
}
.tp-levels-accordion-wrapper .accordion-header {
  grid-template-columns: 2fr 9fr 1fr;
}
.tp-levels-accordion-wrapper .accordion-item {
  border-top: 1px solid #000000;
}
.tp-levels-accordion-wrapper .accordion-item h2 {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 500;
}
.tp-levels-accordion-wrapper .accordion-content-row {
  display: grid;
  grid-template-columns: [spacer] 2fr [desc] 9fr [spacer] 1fr;
}
.tp-levels-accordion-wrapper .accordion-content-row > div {
  grid-area: desc;
}
.tp-levels-accordion-wrapper div.level span {
  font-size: 1.75rem;
  text-align: left;
}

@media all and (max-width: 1024px) {
  .tp-levels-accordion-wrapper div.level span {
    font-size: 1.25rem;
    text-align: left;
  }
  .tp-levels-accordion-wrapper .accordion-item h2 {
    font-size: 2rem;
    letter-spacing: -1.333px;
  }
  .tp-levels-accordion-wrapper .accordion-header span {
    font-size: 2rem;
  }
}
@media all and (max-width: 600px) {
  .tp-levels-accordion-wrapper div.level span {
    font-size: 0.7rem;
    text-align: left;
  }
  .tp-levels-accordion-wrapper .accordion-item h2 {
    font-size: 1.3333rem;
    letter-spacing: -1.333px;
  }
  .tp-levels-accordion-wrapper .accordion-header span {
    font-size: 1.3333rem;
  }
}
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  outline: none;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger.is-active:hover {
  opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
  perspective: 80px;
}

.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx .hamburger-inner::before,
.hamburger--3dx .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(180deg);
}

.hamburger--3dx.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DX Reverse
   */
.hamburger--3dx-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r .hamburger-inner::before,
.hamburger--3dx-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(-180deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY
   */
.hamburger--3dy .hamburger-box {
  perspective: 80px;
}

.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy .hamburger-inner::before,
.hamburger--3dy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg);
}

.hamburger--3dy.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY Reverse
   */
.hamburger--3dy-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r .hamburger-inner::before,
.hamburger--3dy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY
   */
.hamburger--3dxy .hamburger-box {
  perspective: 80px;
}

.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy .hamburger-inner::before,
.hamburger--3dxy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg);
}

.hamburger--3dxy.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY Reverse
   */
.hamburger--3dxy-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r .hamburger-inner::before,
.hamburger--3dxy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * Arrow
   */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Arrow Right
   */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Alt
   */
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Alt Right
   */
.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Turn
   */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Turn Right
   */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Boring
   */
.hamburger--boring .hamburger-inner,
.hamburger--boring .hamburger-inner::before,
.hamburger--boring .hamburger-inner::after {
  transition-property: none;
}

.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger--boring.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--boring.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Collapse Reverse
   */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse-r .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic .hamburger-inner::before {
  top: 10px;
  transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic .hamburger-inner::after {
  top: 20px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s;
}

.hamburger--elastic.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}

.hamburger--elastic.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-270deg);
  transition-delay: 0.075s;
}

/*
   * Elastic Reverse
   */
.hamburger--elastic-r .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r .hamburger-inner::before {
  top: 10px;
  transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic-r .hamburger-inner::after {
  top: 20px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-135deg);
  transition-delay: 0.075s;
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(270deg);
  transition-delay: 0.075s;
}

/*
   * Emphatic
   */
.hamburger--emphatic {
  overflow: hidden;
}

.hamburger--emphatic .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}

.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -80px;
  top: -80px;
  transform: translate3d(80px, 80px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -80px;
  top: -80px;
  transform: translate3d(-80px, 80px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Emphatic Reverse
   */
.hamburger--emphatic-r {
  overflow: hidden;
}

.hamburger--emphatic-r .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
  left: -80px;
  top: 80px;
  transform: translate3d(80px, -80px, 0) rotate(-45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
  right: -80px;
  top: 80px;
  transform: translate3d(-80px, -80px, 0) rotate(45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Minus
   */
.hamburger--minus .hamburger-inner::before,
.hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
}

.hamburger--minus.is-active .hamburger-inner::before,
.hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
}

.hamburger--minus.is-active .hamburger-inner::before {
  top: 0;
}

.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0;
}

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
  top: 2px;
}

.hamburger--slider .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/*
   * Slider Reverse
   */
.hamburger--slider-r .hamburger-inner {
  top: 2px;
}

.hamburger--slider-r .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

.hamburger--slider-r .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-45deg);
}

.hamburger--slider-r.is-active .hamburger-inner::before {
  transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(90deg);
}

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spin Reverse
   */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin-r .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear;
}

.hamburger--spring .hamburger-inner::before {
  top: 10px;
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring .hamburger-inner::after {
  top: 20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important;
}

.hamburger--spring.is-active .hamburger-inner::before {
  top: 0;
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--spring.is-active .hamburger-inner::after {
  top: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(-45deg);
}

/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
}

.hamburger--spring-r .hamburger-inner::before {
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spring-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
}

.hamburger--spring-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand
   */
.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand Reverse
   */
.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand-r .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Vortex
   */
.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex .hamburger-inner::before,
.hamburger--vortex .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}

.hamburger--vortex .hamburger-inner::before {
  transition-property: top, opacity;
}

.hamburger--vortex .hamburger-inner::after {
  transition-property: bottom, transform;
}

.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex.is-active .hamburger-inner::before,
.hamburger--vortex.is-active .hamburger-inner::after {
  transition-delay: 0s;
}

.hamburger--vortex.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--vortex.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
}

/*
   * Vortex Reverse
   */
.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r .hamburger-inner::before,
.hamburger--vortex-r .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}

.hamburger--vortex-r .hamburger-inner::before {
  transition-property: top, opacity;
}

.hamburger--vortex-r .hamburger-inner::after {
  transition-property: bottom, transform;
}

.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r.is-active .hamburger-inner::before,
.hamburger--vortex-r.is-active .hamburger-inner::after {
  transition-delay: 0s;
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

#site-sub-footer-wrapper {
  padding: 9rem 0 10rem;
}
#site-sub-footer-wrapper input#mce-EMAIL {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  border-bottom: 1px solid #000000;
  margin-bottom: 0.5rem;
  width: 100%;
}
#site-sub-footer-wrapper .clear {
  display: block;
  text-align: right;
}
#site-sub-footer-wrapper input#mc-embedded-subscribe {
  background: transparent;
  border: none;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

#site-footer-wrapper {
  border-top: 1px solid #000;
  padding-bottom: 3rem;
}

.sub-footer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.sub-footer-col-1 {
  padding-top: 0.8rem;
}
.sub-footer-col-1 img {
  width: 100%;
  max-width: 500px;
}

.mailing-list-copy {
  margin-bottom: 2rem;
  max-width: 550px;
}
.mailing-list-copy p {
  font-size: 1.5rem;
  margin-top: 0;
}

@media all and (max-width: 1200px) {
  .sub-footer-row {
    grid-template-columns: 5fr 7fr;
  }
}
@media all and (max-width: 820px) {
  .sub-footer-row {
    grid-template-columns: 1fr;
  }
  .sub-footer-col-1 {
    justify-self: center;
    margin-bottom: 3rem;
  }
}
#site-footer {
  background-color: white;
  display: grid;
  position: relative;
  grid-template-columns: [footer-1] 1fr [footer-2] 1fr [footer-3] 1fr [footer-4] 1fr;
  z-index: 99;
}
#site-footer h3 {
  font-weight: bold;
  font-size: 0.9rem;
}
#site-footer .footer-col-1 {
  grid-area: footer-1;
}
#site-footer .footer-col-2 {
  grid-area: footer-2;
}
#site-footer .footer-col-3 {
  grid-area: footer-3;
}
#site-footer .footer-col-4 {
  grid-area: footer-4;
}
#site-footer .footer-item a {
  text-decoration: none;
}
#site-footer .footer-item p {
  line-height: 1;
  margin-bottom: 0.5rem;
  margin-top: 0;
}
@media all and (max-width: 1024px) {
  #site-footer {
    grid-template-columns: 1fr 1fr;
  }
  #site-footer .footer-col-1,
  #site-footer .footer-col-2,
  #site-footer .footer-col-3,
  #site-footer .footer-col-4 {
    grid-area: auto;
  }
}
@media all and (max-width: 600px) {
  #site-footer {
    display: block;
    padding: 2rem 0 4rem;
  }
  #site-footer .footer-item {
    text-align: center;
    margin-bottom: 2rem;
  }
}

#site-footer-np {
  margin-top: 2rem;
  text-align: center;
}
#site-footer-np p {
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 0;
}

.hidden-input {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

/********

  RSVP 2022

**********/
#rsvp-form {
  font-family: lores-12, sans-serif;
  font-weight: 400;
  font-style: normal;
}
#rsvp-form label {
  color: #fcee21;
  display: block;
}
#rsvp-form input {
  margin-bottom: 20px;
  border: 2px solid #fcee21;
  color: #fcee21;
  padding: 10px;
  background: black;
}
#rsvp-form button {
  background: black;
  color: #fcee21;
  cursor: pointer;
  display: block;
  border: 2px solid #fcee21;
  padding: 10px;
  background: black;
}

body[data-case] #site-footer-wrapper {
  background-color: #000;
}
body[data-case] #site-footer {
  background: black;
  position: relative;
  color: white;
}
body[data-case] #site-footer a {
  color: white;
}

@media all and (max-width: 1024px) {
  #reel-wrap {
    height: 77vh;
  }
}
@media all and (max-width: 767px) {
  .row-component {
    margin-top: 4.375rem;
  }
}
/***
  Take Part
***/
.take-part-wrapper {
  padding: 4rem 2rem 8rem;
}

.take-part {
  text-align: center;
}
.take-part a {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
  padding: 0 2rem;
  border-bottom: 5px solid #000000;
}

@media all and (max-width: 767px) {
  .take-part-wrapper {
    padding: 3rem 1rem 6rem;
  }
  .take-part a {
    padding: 0 1.333rem;
    font-size: 2rem;
    border-bottom: 4px solid #000000;
  }
}
@media all and (max-width: 767px) {
  .take-part a {
    padding: 0 1rem;
    font-size: 1.666rem;
    border-bottom: 3px solid #000000;
  }
}
/***
  Upcoming / Current Exhibitions
***/
.featured-title-contain {
  display: grid;
  grid-template-columns: [spacer] 2fr [title] 10fr;
}
.featured-title-contain h2 {
  grid-area: title;
  font-size: 2rem;
  font-style: italic;
}
.featured-title-contain.past {
  display: block;
}
@media all and (max-width: 1200px) {
  .featured-title-contain {
    grid-template-columns: [title] 12fr;
  }
}
@media all and (max-width: 800px) {
  .featured-title-contain {
    display: block;
  }
}

/****
Gallery
****/
#gallery-wrap .hero-media-wrapper {
  grid-area: media;
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
#gallery-wrap .hero-media-grid {
  display: grid;
  grid-template-columns: [spacer] 1fr [media] 10fr [spacer] 1fr;
  column-gap: 1rem;
}

/****
Completed Donations
****/
.completed-donation-wrapper {
  padding-top: 5rem;
}
.completed-donation-wrapper h1 {
  text-align: center;
}
.completed-donation-wrapper .contain {
  max-width: 36rem;
}

/****
Georgina Tickets / After Party
****/
.georgina-wrapper {
  padding-bottom: 10rem;
}
.georgina-wrapper .contain {
  max-width: 52rem;
}
.georgina-wrapper .contain img {
  max-width: 100%;
}
.georgina-wrapper .contain .georgina-text {
  text-align: center;
  padding: 2rem 0;
}
.georgina-wrapper .contain .georgina-text h2 {
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-weight: bold;
  font-size: 3rem;
}
.georgina-wrapper .sm-contain {
  max-width: 34rem;
}

/****
Take Part
****/
.tp-title {
  display: grid;
  grid-template-columns: [spacer] 1fr [title] 11fr;
}
.tp-title h2 {
  grid-area: title;
  font-size: 2rem;
  font-style: italic;
}

.tp-section {
  margin-bottom: 6rem;
}

.tp-overview-grid {
  display: grid;
  grid-template-columns: [spacer] 1fr [overview] 6fr [spacer] 5fr;
}
.tp-overview-grid .tp-overview-text {
  grid-area: overview;
}
.tp-overview-grid p {
  font-size: 2rem;
}

.tp-support-grid {
  display: grid;
  grid-template-columns: [spacer] 3fr [support-1] 8fr [spacer] 3fr [support-2] 8fr [spacer] 3fr [support-3] 8fr [spacer] 3fr;
}

.tp-support-item {
  grid-area: support;
}

.tp-support-item-1 {
  grid-area: support-1;
}

.tp-support-item-2 {
  grid-area: support-2;
}

.tp-support-item-3 {
  grid-area: support-3;
}

.tp-donation-grid {
  display: grid;
  grid-template-columns: [spacer] 1fr [donation] 11fr;
}

.tp-donation-inside {
  grid-area: donation;
}

/***
  HEADER (ported from styled-components Header.js)
***/
.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 2rem;
  z-index: 9999;
  pointer-events: none;
}
.site-header .header-contain {
  background: #E7F043;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 75%;
  margin: 0 auto;
  padding: 0.75rem 2rem;
}
.site-header .header-nav-lg span {
  display: inline-block;
  text-align: right;
  margin-right: 2rem;
  vertical-align: middle;
}
.site-header .header-nav-lg a {
  text-decoration: none;
  font-size: 0.9rem;
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-weight: normal;
  pointer-events: auto;
}
.site-header .header-nav-lg a.nav-cta-link {
  font-weight: 500;
  text-transform: uppercase;
}
.site-header .header-nav-lg a:hover {
  text-decoration: underline;
}
.site-header .header-nav-sm {
  display: none;
  pointer-events: auto;
}
.site-header .header-nav-lg {
  display: block;
}
.site-header .header-mark {
  pointer-events: auto;
  display: block;
  line-height: 0;
}
.site-header .header-mark img {
  height: 14px;
  width: auto;
}
@media all and (max-width: 1024px) {
  .site-header .header-contain {
    padding: 0 2rem;
  }
  .site-header .header-nav-lg {
    display: none;
  }
  .site-header .header-nav-sm {
    display: block;
    z-index: 2;
  }
  .site-header .header-mark img {
    height: 22px;
  }
}

.sm-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, z-index 0.2s ease-in-out;
  z-index: -1;
}
.sm-menu.is_active {
  opacity: 1;
  z-index: 999;
}
.sm-menu .sm-menu-primary {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sm-menu .sm-menu-primary .sm-menu-link {
  display: block;
  text-decoration: none;
  letter-spacing: 0.25px;
  font-size: 1.5rem;
  font-family: "ABC Camera Plain Unlicensed Trial";
  font-weight: normal;
  margin-bottom: 1.33rem;
  width: 100%;
  text-align: center;
}
.sm-menu .sm-menu-primary .sm-menu-link.ind-one-link {
  padding-top: 1rem;
}
.sm-menu .sm-menu-primary .sm-menu-link.ind-one-link img {
  width: 180px;
}
@media all and (min-width: 1025px) {
  .sm-menu.is_active {
    opacity: 0;
    z-index: -1;
  }
}

.io-slideshow {
  --swiper-navigation-color: #000;
  --swiper-pagination-color: #000;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.3;
}
.io-slideshow .swiper-slide img,
.io-slideshow .swiper-slide video {
  width: 100%;
  height: auto;
  display: block;
}
.io-slideshow .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 1rem;
}

/*** ROW COMPONENTS (ported from styled-components) ***/
/* CopyRow.js -> copy-row.php (.contain-copy-row) */
.contain-copy-row {
  text-align: center;
}
.contain-copy-row p {
  line-height: 1.333;
  margin-top: 0;
  font-size: 1.75rem;
  margin-bottom: 3rem;
}
.contain-copy-row p.small-for-device {
  font-size: 1.2rem;
  max-width: 700px;
  line-height: 1.3;
  margin-left: auto;
  margin-right: auto;
}
@media all and (max-width: 767px) {
  .contain-copy-row p {
    font-size: 1.3333rem;
  }
  .contain-copy-row p.small-for-device {
    font-size: 1rem;
  }
}

/* FramedImage.js -> framed-image.php (.row-component.gray-bkg wrapper) */
.row-component.gray-bkg {
  background-color: #f4f4f4;
}

.framed-image-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [spacer] 2fr [image] 8fr [spacer] 2fr;
}

.framed-image {
  grid-area: image;
}
.framed-image img {
  width: 100%;
  max-width: auto;
}

@media all and (max-width: 767px) {
  .framed-image-grid {
    grid-template-columns: [spacer] 1fr [image] 10fr [spacer] 1fr;
  }
}
/* FramedVideo.js -> framed-video.php */
.framed-video-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [spacer] 2fr [image] 8fr [spacer] 2fr;
}
.framed-video-grid.vertical {
  grid-template-columns: [spacer] 4fr [image] 4fr [spacer] 4fr;
}

.framed-video {
  grid-area: image;
}
.framed-video video {
  width: 100%;
  max-width: auto;
}

@media all and (max-width: 767px) {
  .framed-video-grid,
  .framed-video-grid.vertical {
    grid-template-columns: [spacer] 1fr [image] 10fr [spacer] 1fr;
  }
}
/* FramedVideoLoop.js -> framed-video-loop.php
   (reuses .framed-image-grid / .framed-image / .gray-bkg above) */
/* FullwidthGif.js -> fullwidth-gif.php */
/* FullwidthImage.js -> fullwidth-image.php */
/* FullwidthVideo.js -> fullwidth-video.php */
/* FullwidthVideoLoop.js -> fullwidth-video-loop.php
   These wrappers were just width:100% / img,video sizing on .row-component itself;
   .row-component is the shared base class already declared elsewhere, so we only add: */
.row-component video {
  max-width: 100%;
}

/* Image2Videoloop1.js -> image-2-videoloop-1.php */
.vid-one-third {
  grid-area: vid-1;
}

.img-two-third {
  grid-area: img-1-3;
}

.vid-23-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [vid-1] 2fr [img-1-3] 1fr;
}
.vid-23-grid.reverse {
  direction: rtl;
}
.vid-23-grid.space {
  grid-template-columns: [vid-1] 7fr [spacer] 1fr [img-1-3] 4fr;
}

/* ImageText.js -> image-text.php */
.image-text-grid {
  display: grid;
  grid-template-columns: [image] 6fr [spacer] 1fr [text] 4fr [spacer] 1fr;
}

.image-text-image {
  grid-area: image;
}
.image-text-image img {
  width: 100%;
  height: auto;
  display: block;
}

.image-text-text {
  grid-area: text;
}
.image-text-text p {
  font-size: 1.666rem;
}
.image-text-text p:first-child {
  margin-top: 0;
}

@media all and (max-width: 767px) {
  .image-text-grid {
    display: block;
  }
  .image-text-text {
    padding-top: 1.25rem;
  }
  .image-text-text p {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.333rem;
    text-align: center;
  }
}
/* ImagesThirds.js -> images-thirds.php */
.img-one {
  grid-area: image-1;
}

.img-two {
  grid-area: image-2;
}

.img-one-two {
  display: grid;
  grid-template-columns: [image-1] 1fr [image-2] 2fr;
  column-gap: 1rem;
}
.img-one-two.reverse {
  direction: rtl;
}
.img-one-two.space {
  grid-template-columns: [image-1] 4fr [spacer] 1fr [image-2] 7fr;
  column-gap: 0;
}

/* ImagesThirdsSpace.js -> images-thirds-space.php
   (overrides .img-one-two grid-template-columns and adds img sizing in this context) */
.row-component .img-one-two img {
  width: 100%;
}

/* ImagesThreeUp.js -> images-three-up.php / VideoPlayer3up.js -> video-player-3up.php */
.image-3-grid {
  display: grid;
  grid-template-columns: [image-1] 4fr [image-2] 4fr [image-3] 4fr;
  column-gap: 1rem;
}

.image-3-1 {
  grid-area: image-1;
}

.image-3-2 {
  grid-area: image-2;
}

.image-3-3 {
  grid-area: image-3;
}

/* SlideShow.js -> slideshow.php (.ss-image)
   No dedicated styled-components CSS for .ss-image in source; sizing comes from generic img/video rules. */
/* StatsBlocks.js -> stats-blocks.php */
.stat-block-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.stat-block {
  width: 20%;
}

span.stat-title {
  display: block;
}

span.stat-data {
  display: block;
  font-size: 3rem;
}

@media all and (max-width: 1024px) {
  .stat-block {
    width: 33.333%;
    margin-bottom: 2rem;
  }
  span.stat-data {
    display: block;
    font-size: 2.666rem;
  }
}
@media all and (max-width: 767px) {
  .stat-block {
    width: 50%;
  }
  span.stat-data {
    display: block;
    font-size: 2rem;
  }
}
/* VideoLoop13.js -> video-loop-13.php (vid-one-third / img-two-third / vid-23-grid already above) */
/* VideoLoop23.js -> video-loop-23.php */
.vid-one {
  grid-area: vid-1;
}

.img-one-third {
  grid-area: img-1-3;
}

/* VideoLoop23Text.js -> video-loop-23-text.php */
.vid-23-text-grid {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: [vid-1] 7fr [spacer] 1fr [text] 4fr;
}
.vid-23-text-grid.reverse {
  direction: rtl;
}

.text-one-third {
  grid-area: text;
}
.text-one-third p {
  font-size: 1.666rem;
}
.text-one-third p:first-child {
  margin-top: 0;
}

@media all and (max-width: 767px) {
  .vid-23-text-grid {
    display: block;
  }
  .text-one-third {
    padding-top: 1.25rem;
  }
  .text-one-third p {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.333rem;
    text-align: center;
  }
}
/* VideoLoop23VideoLoop13.js -> video-loop-23-video-loop-13.php */
.vid-23 {
  grid-area: vid-23;
}

.vid-13 {
  grid-area: vid-13;
}

/* VideoPlayer23.js -> video-player-23.php */
/* VideoText.js -> video-text.php (reuses .image-text-grid/.image-text-image/.image-text-text above) */
.image-text-grid.video-text {
  grid-template-columns: [image] 4fr [spacer] 3fr [text] 4fr [spacer] 1fr;
}

.image-text-grid.half {
  grid-template-columns: [image] 6fr [spacer] 1fr [text] 4fr [spacer] 1fr;
}

/*** Video player: poster overlay + play/pause button ***/
.video-player-container {
  position: relative;
}
.video-player-container video {
  width: 100%;
  display: block;
}

.video-toggle-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  padding: 0;
}
.video-toggle-play svg {
  width: 100%;
  height: 100%;
}

.video-player-container.is-playing .video-toggle-play.is-paused .icon-play {
  display: block;
}
.video-player-container.is-playing .video-toggle-play.is-paused .icon-pause {
  display: none;
}

/*** Case study hero / info (ported from CaseStudyHero.js / CaseStudyInfo.js) ***/
.hero {
  z-index: 9;
  position: relative;
  margin-bottom: 4.375rem;
}
.hero .hero-media-wrapper {
  grid-area: media;
}
.hero .hero-media-grid {
  display: grid;
  grid-template-columns: [spacer] 1fr [media] 10fr [spacer] 1fr;
  column-gap: 1rem;
}

.work-info {
  position: relative;
  margin-bottom: 2.875rem;
}
.work-info .work-info-cols {
  display: grid;
  column-gap: 2rem;
  grid-template-columns: [spacer] 1fr [project-info] 2fr [spacer] 1fr [process-1] 4fr [process-2] 3fr [spacer] 1fr;
}
.work-info .project-info {
  grid-area: project-info;
}
.work-info .project-process-1 {
  grid-area: process-1;
}
.work-info .project-process-2 {
  grid-area: process-2;
}
.work-info .project-box {
  margin-bottom: 1.5rem;
}
.work-info .project-box p {
  margin-top: 0;
}
.work-info span.info-title-line {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;
  height: 1px;
  width: 5.5rem;
  background: black;
}
@media all and (max-width: 767px) {
  .work-info .work-info-cols {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .work-info .project-process-1 {
    margin-top: 2.5rem;
  }
}

.error-404-wrapper {
  padding: 6rem 0;
  text-align: center;
}