* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --deepBlack: #211e1f;
  --ylw: #fabc13;
  --lightgry: #e6e7e8;
  --darkgry: #939598;
  --power3: 0.24s cubic-bezier(0.84, 0, 0.15, 1) all;
  --linear: 0.2s ease-in-out all;
  --unit: 12.5%;
  --gutter: clamp(1rem, calc(1rem + ((1vw - 0.285rem) * 2.7972)), 3rem);
  --widthOne: calc((var(--unit) * 1) - var(--gutter));
  --widthTwo: calc((var(--unit) * 2) - var(--gutter));
  --widthThree: calc((var(--unit) * 3) - var(--gutter));
  --widthFour: calc((var(--unit) * 4) - var(--gutter));
  --widthFive: calc((var(--unit) * 5) - var(--gutter));
  --widthSix: calc(var(--unit) * 6);
  --widthSeven: calc(var(--unit) * 7);
  --widthEight: calc(var(--unit) * 8);
  font-family: "Lato", Tahoma, sans-serif;
  font-size: 87.5%;
  font-kerning: normal;
  overflow-x: hidden;
  background: var(--deepBlack);
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

h1 {
  font-size: clamp(32px, calc(1.5rem + ((1vw - 3.5px) * 3.4862)), 64px);
  text-transform: uppercase;
  line-height: 1;
  font-weight: 900;
  color: white;
  perspective: 200px;
  backface-visibility: visible;
  transform-style: preserve-3d;
  transform-origin: "center bottom";
}

.marker {
  background-color: red;
  width: 50px;
  background-size: cover;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

h1 * {
  perspective: 500px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

h1 {
  perspective: 500px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

h1 em,
.ylw {
  color: var(--ylw);
  font-style: normal;
}

header {
  position: relative;
  padding-top: 57px;
  height: 60vh;
  margin-bottom: 5rem;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

#quoteHeader {
  display: flex;
  width: 90%;
  margin-right: 5px;
  flex-wrap: wrap-reverse;
  margin-left: var(--gutter);
}

#quoteHeader p {
  margin-top: 1rem;
}

header #headerTagline {
  width: 110px;
  color: white;
  position: absolute;
  left: 4.5%;
  z-index: 3;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  top: 0;
  top: 4.65%;
}

a.scrollLink {
  position: absolute;
  top: -130px;
  left: 0;
  opacity: 0;
}

#quoteHeader p {
  color: white;
  font-size: clamp(
    1.14rem,
    calc(1.14rem + ((1vw - 0.35rem) * 0.8615)),
    1.42rem
  );
  margin-top: 0;
  font-weight: 700;
  line-height: 1.6;
}

#quoteHeader .pullquote {
  font-weight: 700;
  color: white;
  letter-spacing: 0.07em;
  font-size: 14px;
  /* width: var(--widthFour); */
  margin-bottom: 24px;
}

header #headerTagline * {
  perspective: 200px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

#topBar {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  text-transform: uppercase;
  font-size: 18px;
  z-index: 200;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: white;
  text-align: center;
  padding: 1.2rem 0;
  width: 100%;
  background-color: var(--deepBlack);
}

header video {
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -1;
  object-fit: cover;
}

h2 {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.013em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

h3,
nav a {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}

nav > span {
  color: white;
  text-transform: uppercase;
  font-style: 18px;
  font-weight: 900;
  display: none;
  letter-spacing: 0.1em;
}

#navLinks {
  display: flex;
}

img {
  object-fit: cover;
}

nav a {
  font-size: 11px;
  letter-spacing: 0.06em;
}

li {
  list-style-type: none;
  margin-bottom: 0.3rem;
}

li em {
  font-weight: 700;
  text-transform: capitalize;
  font-style: normal;
}

p {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

a#toTopButton {
  display: none;
}

a#toTopButtonMobile {
  background: var(--ylw);
  display: inline-block;
  position: fixed;
  right: 4.9%;
  bottom: 10%;
  z-index: 200;
  padding: 1rem 1rem 0.8rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  color: white;
}

a#toTopButtonMobile img {
  filter: brightness(10) saturate(0);
  transform: rotate(-90deg) scale(1.5);
}

nav {
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--deepBlack);
  position: fixed;
  z-index: 100;
  bottom: 0;
  margin: auto;
  left: 0;
  padding: 1.5rem var(--gutter);
}

nav a {
  color: white;
  display: grid;
  line-height: 1;
}

nav a span {
  grid-column: 1;
  grid-row: 1;
}

nav a span:last-child {
  color: var(--ylw);
}

nav a + nav a > * {
  transform: perspective(100px);
  transform-style: preserve-3d;
}

nav a:not(:last-child) {
  margin-right: 3rem;
}

#loaderContainer {
  width: 100vw;
  padding-bottom: calc(var(--gutter) * 4);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  z-index: 400;
  display: flex;
}

#loaderAnimContainer {
  width: var(--widthSix);
  margin-right: var(--gutter);
  z-index: 500;
}

.loadCover {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 520;
  width: 100%;
}

#tagline {
  color: white;
  z-index: 405;
  align-self: flex-end;
  transform: translateX(-1.5rem);
  margin-bottom: calc(var(--gutter) * 4);
}

#tagline h2 {
  font-size: clamp(
    1.14rem,
    calc(1.14rem + ((1vw - 0.35rem) * 0.4308)),
    1.42rem
  );
  font-weight: 900;
  text-transform: capitalize;
  line-height: 1.4;
}

.loadCover {
  z-index: 405;
  background: var(--deepBlack);
}

.loadCover.ylw {
  background: var(--ylw);
  z-index: 399;
}

footer {
  position: relative;
  margin: 8rem var(--gutter) 6.5rem var(--gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--darkgry);
}

footer #fsuLink {
  border: none;
}

footer::before {
  content: "";
  background: var(--lightgry);
  height: 1.5px;
  width: 100%;
  top: -1.5rem;
  display: block;
  position: absolute;
}

footer svg {
  width: 200px;
  /* margin-bottom: 1rem; */
  opacity: 0.46;
}

footer br {
  margin-bottom: 0.25rem;
}

#fsuLink {
  display: block;
}

footer p {
  /* width: 100%; */
  line-height: 1.4;
  font-size: 0.85rem;
  max-width: 420px;
}

footer a {
  border-bottom: 1px solid var(--darkgry);
  color: var(--darkgry);
  text-decoration: none;
}

.workImageContainer {
  will-change: transform;
  perspective: 200px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

.workImageContainer.col {
  overflow: hidden;
}

img {
  height: 100%;
}

.workImageContainer.col img {
  object-fit: cover;
  will-change: transform;
  perspective: 200px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

.col {
  width: 40%;
}

.visitcol {
  width: 100%;
  flex-direction: row;
}

.gallerymaprow {
  display: flex;
  flex-grow: 1;
  width: 100%;
  flex-direction: row;
}

a.caratLink {
  display: inline-block;
  text-decoration: none;
  color: var(--ylw);
  font-weight: 700;
  position: relative;
  transition: all 0.2s ease-in-out;
}

a.caratLink::after {
  content: "";
  background: url("./../img/caratIcon.svg");
  height: 13px;
  width: 13px;
  right: -1.25rem;
  top: 2px;
  background-size: 100%;
  display: block;
  position: absolute;
}

blockquote {
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  color: white;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  position: relative;
}

#upjohn {
  height: 100vh;
  max-height: 1400px;
  position: relative;
}

#titleUpjohn h1:not(.ylw) {
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.35rem) * 2.3077)), 2.5rem);
}

#companyContainer {
  margin-bottom: 12rem;
  position: relative;
}

/* #companyContainer img {
  perspective: 200px;
  backface-visibility: visible;
  transform-style: preserve-3d;
} */

#companyContainer .companySection:not(#upjohn) h1:not(.ylw) {
  color: white;
}

.companySection {
  margin: clamp(7rem, calc(7rem + ((1vw - 0.35rem) * 2.3077)), 10rem) 0;
}

#quoteUpjohn {
  width: var(--widthSix);
  margin-left: calc(var(--gutter) + var(--gutter) + var(--widthTwo));
  padding-right: var(--gutter);
  margin-top: var(--gutter);
  margin-bottom: var(--gutter);
  transform: translateX(calc(var(--gutter) * -0.5));
}

#titleUpjohn {
  position: absolute;
  writing-mode: vertical-lr;
  text-align: right;
  top: 40%;
  transform: scale(-1, -1) translateX(47%);
}

#upjohn .col:nth-child(2) {
  display: flex;
  align-self: center;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: var(--gutter);
  padding-right: 6.6%;
  /* height: 42%; */
}

#clothespin {
  width: 40%;
  flex-grow: 1;
  align-self: flex-end;
  /* margin-left: calc(var(--gutter) / 2); */
  padding-right: calc(var(--gutter) / 2);
  height: 25%;
}

#yellowDot {
  width: 40%;
  flex-grow: 1;
  align-self: flex-end;
  padding-left: calc(var(--gutter) / 2);
  height: 40%;
}

#upjohn .col:nth-child(3) {
  display: flex;
  width: var(--widthSix);
  flex-wrap: wrap;
  height: 55%;
  margin-left: calc(var(--gutter) + var(--gutter) + var(--widthTwo));
}

#arm {
  width: 100%;
  margin-left: auto;
  height: 60%;
}

#egg {
  width: var(--widthSix);
  margin-top: var(--gutter);
  padding-right: var(--gutter);
  height: 35%;
}

#man {
  width: var(--widthTwo);
  margin-right: var(--gutter);
  margin-top: var(--gutter);
  height: 20%;
}

#autocam {
  display: flex;
  height: 110vh;
  max-height: 1400px;
  flex-direction: row;
  flex-wrap: wrap;
}

#autocam .col {
  display: flex;
  flex-direction: column;
}

#autocam .col:first-child {
  /* width: 50%; */
  width: var(--widthFour);
  height: 41%;
  padding-right: calc(var(--gutter) / 2);
}

#autocam .col:nth-child(2) {
  width: var(--widthFour);
  padding-top: var(--unit);
  height: 36%;
  align-self: flex-end;
  padding-left: calc(var(--gutter) / 2);
  margin-right: var(--gutter);
}

#titleAutocam {
  margin-bottom: 1rem;
}

#quoteAutocam {
  padding-right: var(--gutter);
}

#factory {
  height: 34%;
  margin-bottom: var(--gutter);
}

#copper {
  height: 31%;
}

#notebook {
  height: 64%;
  margin-left: calc(var(--gutter) * 3);
  margin-bottom: var(--gutter);
}

#apple {
  height: 63%;
}

#birds {
  height: 29%;
  margin-bottom: var(--gutter);
}

#autocam .col:nth-child(3) {
  width: 75%;
  margin-top: var(--gutter);
  margin-left: calc(var(--gutter) + var(--gutter) + var(--widthTwo));
}

#french {
  display: flex;
  height: 80vh;
  flex-wrap: wrap;
  max-height: 1400px;
  flex-direction: column;
}

#french .col {
  display: flex;
  flex-direction: column;
}

#french .col:first-child {
  height: 100%;
  width: calc(var(--widthFour) + var(--gutter) + var(--gutter));
  flex-grow: 1;
}

#dog {
  height: 40%;
}

#queen {
  height: 52%;
  padding-right: var(--gutter);
  margin-top: var(--gutter);
}

#french .col:nth-child(2) {
  height: 53%;
  flex-grow: 1;
  padding-right: var(--gutter);
  width: var(--widthFour);
  padding-left: var(--gutter);
}

#french .col:nth-child(3) {
  width: calc(var(--widthFour) - var(--gutter));
  height: 44%;
  flex-direction: column;
  margin-top: var(--gutter);
  margin-left: var(--gutter);
}

#titleFrench {
  margin-bottom: var(--gutter);
  display: flex;
  flex-direction: row;
}

#titleFrench h1 {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
}

#jerry {
  height: 36%;
  object-fit: contain;
  margin-bottom: var(--gutter);
}

#scatter {
  height: 20%;
}

#quoteFrench {
  padding-left: var(--gutter);
  margin-top: var(--gutter);
}

#meat {
  height: 47%;
  flex-grow: 1;
}

#opera {
  display: flex;
  height: 50vh;
  max-height: 1100px;
  min-height: 440px;
  flex-wrap: wrap;
  /* Make up for abs position */
  margin-bottom: calc(7rem + 100px);
  flex-direction: column;
}

#opera h1 {
  text-align: right;
}

#opera .col {
  display: flex;
  flex-direction: column;
  height: 50%;
}

#opera .col:nth-child(3) {
  height: 78.5%;
}

#headingOpera h1:not(:first-of-type) {
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.35rem) * 2.3077)), 2.5rem);
}

#quoteOpera,
#headingOpera {
  margin-bottom: var(--gutter);
}

#opera .col:first-child {
  width: var(--widthFour);
  height: 100%;
}

#sword {
  height: 21%;
  margin-bottom: 0;
  flex-grow: 1;
  padding-bottom: var(--gutter);
}

#opera .col:nth-child(2) {
  width: 50%;
  margin-bottom: var(--gutter);
  height: 68px;
  padding-right: var(--gutter);
  flex-direction: row;
}

#opera .col:nth-child(2) img {
  width: 50%;
}

#yellow {
  padding-right: calc(var(--gutter) / 2);
}

#green {
  padding-left: calc(var(--gutter) / 2);
}

#blue {
  margin-bottom: 0 !important;
}

#orange {
  margin-left: var(--gutter);
  margin-top: 10px;
  margin-bottom: var(--gutter);
  height: 47%;
}

#opera .col:first-child {
  margin-right: var(--gutter);
}

#opera .col:last-child {
  width: 50%;
  position: relative;
}

#quoteOpera {
  width: 100%;
  position: absolute;
  margin-left: var(--gutter);
  padding-right: var(--gutter);
  width: calc(100vw - var(--gutter));
  margin-bottom: 0;
  transform: translateY(100%);
  bottom: calc(var(--gutter) * -1);
  left: -50vw;
}

/* Herman Mobile Styles */

#herman {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  max-height: 1100px;
  height: 100vh;
  min-height: 800px;
}

#quoteHerman {
  margin-left: var(--gutter);
  width: 100%;
  padding-right: var(--gutter);
}

#red {
  height: 35%;
}

#fish {
  height: 57%;
}

#corn {
  height: 34%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

#thankyou {
  height: 46%;
}

#sofa {
  margin-left: var(--gutter);
  margin-bottom: var(--gutter);
  height: 46%;
}

#titleHerman {
  display: flex;
  margin-left: var(--gutter);
  margin-bottom: 1rem;
}

#herman .col {
  display: flex;
  height: unset;
  flex-direction: column;
}

#herman img {
  margin-bottom: var(--gutter);
}

#herman .col:first-child {
  width: 50%;
  padding-right: var(--gutter);
  height: 37%;
}

#herman .col:nth-child(2) {
  width: 50%;
  height: 37%;
}

#corn {
  margin-top: var(--gutter);
  height: 61%;
}

#herman .col:last-child {
  width: 100%;
  height: 56%;
}

#visitSectionContainer {
  margin: auto;
  display: flex;
  position: relative;
  flex-direction: column;
  color: var(--darkgry);
}

#visitSectionContainer > div {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

#visitHeading > *:not(em) {
  color: var(--darkgry);
}

#visitSectionContainer > div > div {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

#visitInfo .col:first-child {
  width: 100%;
}

#visitInfo .col {
  width: 100%;
}

#visitSectionContainer #visitInfo {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
}

#visitInfo .col:nth-child(2) {
  width: 100%;
}

#visitHeading {
  margin-bottom: var(--gutter);
}

#galleryParking {
  max-width: 150px;
  margin-top: 2rem;
}

#visitInfo .col:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#visitInfo .col:nth-child(2) > div:last-of-type {
  display: flex;
  margin-top: var(--gutter);
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

#galleryParking {
  display: flex;
  flex-direction: column;
  order: 3;
}

#gallerymap {
  display: block;
  flex-grow: 1;
  width: 90%;
}

a.gallerymap {
  display: block;
  flex-grow: 1;
  width: 90%;
}

.gallerymaprow {
  display: flex;
  flex-grow: 1;
  flex-directon: row;
}

.hoursandparking {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding-left: 0px;
  width: 50%;
}

#behindExhibit {
  display: flex;
  margin-top: 10%;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

#galleryName {
  margin-top: 2.5rem;
  order: 0;
}

#galleryName p {
  margin-bottom: 0;
}

#galleryHours {
  margin-top: 0;
  order: 1;
  width: 300px;
}

#galleryName blockquote {
  color: var(--darkgry);
  font-weight: 700;
  font-size: clamp(1rem, calc(1rem + ((1vw - 0.35rem) * 0.4308)), 1.28rem);
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#behindExhibit #behindExhibitHeadingContainer {
  align-self: flex-start;
  flex-grow: 1;
  width: var(--widthSix);
  margin-top: 6rem;
  order: -1;
  flex-wrap: nowrap;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-end;
}

#behindExhibitHeadingContainer br {
  display: none;
}

#behindExhibit h1:last-of-type {
  color: var(--darkgry);
}

#behindExhibit #brightformatAbout {
  align-self: flex-start;
  width: 20%;
  flex-grow: 1;
}

#behindExhibit #brightformatAbout img {
  transition: var(--linear);
}

#behindExhibit #brightformatAbout img:hover {
  opacity: 0.5;
  transition: var(--linear);
}

#behindExhibit #ferrisAbout {
  width: 100%;
  flex-grow: 1;
  margin-bottom: 4rem;
}

#behindExhibit #ferrisAbout > div {
  width: 100%;
}

#behindExhibit #ferrisAbout > div p:first-of-type {
  margin-bottom: 10%;
}

#behindExhibit #ferrisAbout > div img {
  width: 100%;
}

#behindExhibit h1 {
  text-align: right;
  margin: 0;
}

#behindExhibit #archivesAbout {
  width: 20%;
  flex-grow: 1;
  min-width: 200px;
  margin-bottom: calc(var(--gutter) * 2);
}

#behindExhibit #archivesAbout img {
  width: 30%;
  min-width: 95px;
  max-width: 120px;
  margin-bottom: 1rem;
}

#behindExhibitHeadingContainer {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  margin-bottom: 2.5rem;
}

.quoteLine {
  background: var(--ylw);
  width: 120px;
  display: block;
  height: 2px;
}

.quoteLine:first-child {
  margin-bottom: 0.5rem;
}

.quoteLine:last-child {
  margin-top: 0.5rem;
}

.splitLine {
  overflow: hidden;
}

.mapboxgl-marker svg ellipse,
.mapboxgl-marker svg circle {
  display: none;
}

.mapboxgl-ctrl {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 1.5rem 1.5rem 0 !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-logo,
.mapboxgl-ctrl .mapboxgl-ctrl-attrib-inner,
.mapboxgl-ctrl .mapboxgl-ctrl-attrib.mapboxgl-compact {
  display: none !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-attrib.mapboxgl-compact {
  display: none !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-icon:hover {
  opacity: 0.87;
}

.mapboxgl-ctrl .mapboxgl-ctrl-zoom-in {
  background: var(--ylw);
  margin-bottom: 1rem;
}

.mapboxgl-ctrl .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("../img/zoomInIcon.svg") !important;
  background-size: 47%;
  background-position: center center;
}

.mapboxgl-ctrl .mapboxgl-ctrl-zoom-out {
  background: var(--ylw);
}

.mapboxgl-ctrl .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("../img/zoomOutIcon.svg") !important;
  background-size: 41%;
  background-position: center center;
}

@media only screen and (min-width: 660px) {
  .companyDescription {
    max-width: 330px;
  }

  #visitSectionContainer > div {
    margin-left: 0;
    margin-right: 0;
  }

  footer > p {
    margin-top: 0;
  }

  #loaderAnimContainer {
    width: var(--widthTwo);
  }

  nav > span {
    display: block;
  }

  #quoteHeader {
    color: white;
    margin-left: calc(var(--widthOne) + var(--gutter));
  }

  #quoteHeader .pullquote {
    width: calc(var(--widthOne) + var(--gutter));
    min-width: 300px;
    margin-left: calc(var(--gutter) + var(--widthOne));
  }

  #quoteHeader p {
    width: var(--widthFour);
  }

  #topBar {
    display: none;
  }

  a#toTopButtonMobile {
    display: none;
  }
  a#toTopButton {
    background: var(--ylw);
    display: inline-block;
    position: fixed;
    right: 4.9%;
    bottom: 10%;
    z-index: 200;
    padding: 1rem 2.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    color: white;
  }

  #behindExhibitHeadingContainer br {
    display: block;
  }

  nav {
    justify-content: space-between;
    top: 0;
    width: 100%;
    display: flex;
    margin: 0;
    align-items: center;
    height: 60px;
    left: 0;
  }

  header {
    height: 80vh;
    padding-top: 60px;
  }

  header #headerVideo {
    height: 83%;
  }
  header #headerVideo video {
    height: 100%;
    width: 100%;
  }
  header img {
    right: -17%;
    max-width: 460px;
    top: -3.5%;
  }

  .col {
    width: unset;
  }

  /* Autocam Desktop Styles */

  #autocam {
    height: 130vh;
    min-height: 860px;
  }

  #autocam .col {
    flex-grow: 1;
  }

  #autocam .col:not(:last-child) {
    margin: 0 var(--gutter) var(--gutter) 0;
  }

  #autocam .col:first-child img:first-of-type,
  #autocam .col:nth-child(2) img:first-of-type,
  #autocam .col:nth-child(3) img:first-of-type {
    margin-bottom: var(--gutter);
  }

  #notebook {
    height: 60%;
  }

  #copper {
    height: 33%;
  }

  #factory {
    height: 33%;
  }

  #birds {
    height: 60%;
  }

  #quoteAutocam {
    width: 100%;
  }

  #apple {
    height: 63%;
  }

  #autocam .col:first-child {
    width: var(--widthTwo);
    height: 70%;
    margin-bottom: 0;
    padding: 0;
    margin-right: var(--gutter);
  }

  #autocam .col:nth-child(2) {
    width: var(--widthTwo);
    align-self: flex-end;
    height: 70%;
    padding: 0;
    margin-bottom: 0;
    margin-right: var(--gutter);
  }

  #autocam .col:nth-child(3) {
    width: var(--widthThree);
    margin: 0;
    height: 70%;
  }

  #upjohn {
    display: flex;
    height: 130vh;
    flex-direction: row;
  }

  #titleUpjohn {
    width: var(--widthOne);
    position: relative;
    top: unset;
    align-self: center;
    height: 100%;
    margin-right: var(--gutter);
    transform: translate(0) scale(-1, -1);
    margin-left: calc(var(--widthOne) + var(--gutter));
  }

  #upjohn .col {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }

  #upjohn .col:nth-child(2) {
    flex-direction: column;
    height: 100% !important;
    flex-wrap: unset;
    width: var(--widthThree);
    padding-right: 0;
  }

  #quoteUpjohn {
    margin-left: auto;
    transform: none;
    margin-bottom: 0;
    padding-right: 0;
  }

  #clothespin {
    height: 30%;
    margin-bottom: var(--gutter);
    width: 100%;
    flex-grow: unset;
    padding: 0;
    margin-left: 0;
  }

  #yellowDot {
    padding: 0;
    height: 48%;
    width: 100%;
    flex-grow: unset;
    margin-right: 0;
  }

  #upjohn .col:nth-child(3) {
    flex-direction: row !important;
    width: var(--widthThree);
    margin-left: var(--gutter);
    height: 100%;
  }

  #arm {
    height: 55%;
    margin-top: 0;
    margin-bottom: var(--gutter);
  }

  #egg {
    height: 40%;
    margin-top: 0;
    padding: 0;
    flex-grow: 1;
    margin-right: var(--gutter);
  }

  #man {
    height: 16%;
    margin: 0;
  }

  /* Opera Desktop Styles */

  #opera {
    height: 100vh;
    flex-direction: row;
  }

  #opera .col {
    flex-grow: 1;
  }

  #opera .col:first-child {
    width: var(--widthTwo);
  }

  #opera .col:nth-child(2) {
    width: var(--widthTwo);
    padding: 0;
    margin-bottom: 0;
    flex-direction: column;
    height: 89%;
  }

  #opera .col:last-child {
    height: 100%;
  }

  #opera .col:nth-child(2) img {
    width: 100%;
  }

  #orange {
    width: 60%;
    height: 42%;
    flex-grow: 1;
    align-self: flex-end;
  }

  #yellow {
    padding: 0;
    height: 42%;
  }

  #green {
    padding: 0;
    height: 48%;
    flex-grow: 1;
    margin-top: var(--gutter);
    margin-bottom: 0 !important;
  }

  #sword {
    height: 26%;
    margin-bottom: 0 !important;
  }

  #quoteOpera {
    width: var(--widthTwo);
  }

  #blue {
    margin-bottom: var(--gutter);
    height: 67%;
  }

  #opera .col:not(:last-child) {
    margin-right: var(--gutter);
  }

  #headingOpera {
    margin-top: var(--gutter);
  }

  #opera .col:last-child {
    width: var(--widthThree);
  }

  #quoteOpera {
    position: relative;
    bottom: unset;
    margin-left: 0;
    transform: translate(0);
    margin-top: var(--gutter);
    width: var(--widthSix);
    left: unset;
    padding-right: 0;
  }

  /* Herman Desktop Styles */
  #herman {
    height: 100vh;
  }

  #fish,
  #red,
  #sofa,
  #thankyou {
    height: unset;
  }

  #corn {
    margin-bottom: 0 !important;
  }

  #sofa {
    margin-left: 0;
    height: 51% !important;
  }

  #herman .col {
    flex-direction: column;
    flex-grow: 1;
    height: 80%;
  }

  #thankyou {
    height: 42% !important;
  }

  #herman .col:not(:last-child) {
    margin-right: var(--gutter);
  }

  #quoteHerman {
    width: 50%;
    margin-top: 1rem;
    max-width: var(--widthSix);
    padding-right: 0;
  }

  #herman .col:first-child {
    width: var(--widthTwo);
    align-self: flex-end;
    height: 70%;
    padding: 0 !important;
  }

  #herman .col:first-child img {
    height: 100%;
  }

  #herman .col:nth-child(2) {
    width: var(--widthTwo);
    align-self: flex-start;
    height: 80%;
    margin-right: 0;
  }

  #herman .col:last-child {
    width: var(--widthFour);
    align-self: flex-end;
    height: 84%;
  }

  #fish {
    height: 52%;
  }

  #red {
    height: 42%;
  }

  #french {
    height: 130vh;
    min-height: 640px;
  }

  #french .col {
    flex-grow: 1;
  }

  #french .col:first-child {
    width: var(--widthThree);
    height: 100%;
    position: relative;
    padding: 0;
    justify-content: flex-end;
    align-self: flex-start;
  }

  #french .col:nth-child(2) {
    width: var(--widthTwo);
    height: 70%;
    align-self: center;
    padding-top: var(--gutter);
    padding: 0;
  }

  #french .col:nth-child(3) {
    width: var(--widthThree);
    flex-direction: column;
    margin-left: 0;
    height: 74%;
    align-self: flex-end;
    margin-right: 0;
    display: flex;
    justify-content: flex-end;
  }

  #quoteFrench {
    margin-left: auto;
    margin-top: var(--gutter);
  }

  #queen {
    width: var(--widthSix);
    height: 47%;
    margin-top: 0 !important;
    padding-right: 0;
  }

  #jerry {
    height: 44%;
    padding-top: 30%;
    margin: 0 0 var(--gutter) 0;
    align-self: center;
    transform: translateX(-18%) scale(1.6) !important;
    position: absolute;
    top: -10vh;
    left: 0;
    flex-grow: 1;
    width: calc(100% - (var(--gutter) * 2));
  }

  #meat {
    height: 100%;
    /* padding-bottom: calc(var(--unit) * 3); */
  }

  #scatter {
    height: 33%;
    /* width: var(--widthSix); */
    margin-left: calc(var(--gutter) + var(--widthOne));
  }

  #dog {
    padding-right: 0;
    width: unset;
    height: 47%;
    margin-bottom: var(--gutter);
  }

  #behindExhibit {
    display: flex;
    margin-top: calc(10% + 100px);
    flex-wrap: wrap;
    width: var(--widthSix);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }

  #behindExhibit #behindExhibitHeadingContainer {
    align-items: flex-start;
    margin-top: 0;
    flex-grow: unset;
    justify-content: flex-start;
    order: 0;
    margin-bottom: 0;
    width: calc(var(--gutter) + var(--widthOne));
    margin-right: var(--gutter);
    flex-direction: row;
  }

  #behindExhibit h1 {
    display: flex;
  }

  #behindExhibit h1.ylw .splitLine:first-child {
    transform: translateY(-0.304em);
  }

  #behindExhibit #brightformatAbout {
    align-self: flex-start;
    width: calc(var(--widthOne) + var(--gutter));
    flex-grow: 1;
    min-width: 200px;
    max-width: 375px;
  }

  #brightformatAbout p {
    margin-top: 0;
  }

  #behindExhibit #ferrisAbout {
    width: var(--widthTwo);
    margin-right: var(--gutter);
    margin-bottom: 10rem;
    flex-grow: 1;
    max-width: 375px;
  }
  #behindExhibit #ferrisAbout > div {
    width: 100%;
  }
  #behindExhibit #ferrisAbout > div img {
    width: 100%;
  }
  #behindExhibit h1 {
    writing-mode: vertical-rl;
    transform: scale(-1, -1);
    text-align: right;
  }

  #visitSectionContainer > div {
    width: unset;
  }

  #behindExhibit #archivesAbout {
    width: 20%;
    margin-right: var(--gutter);
    flex-grow: 1;
    display: flex;
    max-width: 355px;
  }
  #behindExhibit #archivesAbout > div {
    align-self: center;
  }
  #behindExhibit #archivesAbout img {
    width: 50%;
    max-width: 190px;
    margin-bottom: 1rem;
  }
  #visitSectionContainer {
    margin-top: 25rem;
  }

  #visitInfo .col:nth-child(2) {
    flex-wrap: nowrap;
  }

  #visitInfo {
    position: relative;
    /* margin-bottom: 230px; */
  }

  #visitInfo .col:nth-child(2) > div:last-of-type {
    margin-top: 0;
  }

  #galleryMap {
    width: var(--widthFive);
    margin-right: var(--gutter);
  }

  #visitSectionContainer #visitInfo {
    width: var(--widthSix);
    margin: 0 auto;
  }

  #galleryName {
    width: var(--widthFive);
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(calc(100px + 3rem));
    margin-right:10px;
  }

  #galleryHours {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  footer {
    /* margin: 0 calc(var(--widthOne) + var(--gutter)) 3rem
      calc(var(--widthOne) + var(--gutter)); */
    margin: 4rem auto var(--gutter) auto;
    width: var(--widthSix);
  }
}