* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: inherit;
  color: inherit;
  grid-gap: var(--gap);
}

body {
  margin: 0 auto;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font: var(--body);
  color: black;
  --body: 18px/1.3 Helvetica, sans-serif;
  --small: 14px/1.2 Helvetica, sans-serif;
  --bio: 16px/1.2 Helvetica, sans-serif;
  --instruction: 20px/1.2 Helvetica, sans-serif;
  --text: 20px/1.2 Helvetica, sans-serif;
  --title: 45px/1.05 Helvetica, sans-serif;
  --orange: #ff7800;
  --delay: 0.05s;
  --gap: 12px;
}

:focus { outline: none }

a, .span-link, section blockquote { transition: color .3s; text-decoration: none }
a:hover, .span-link:hover, .collection blockquote:hover { color: var(--orange); cursor: pointer }

h3 { font: var(--small); font-weight: normal }

table { border-spacing: 0; margin-bottom: 6px }

img, video, .plyr { width: 100% }

nav, #wrapper {
  opacity: 0;
}
#wrapper { transition: opacity 1s }

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrapper { height: 100vh; overflow-x: hidden; overflow-y: hidden; scroll-snap-type: y mandatory }
section {
  width: 100vw;
  height: 100vh;
  padding: 60px var(--gap);
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  scroll-snap-align: start;
  flex: none;
}

/* nav */
nav ul {
  width: 100vw;
  position: fixed;
  top: 60px;
  padding: 0 var(--gap);
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  z-index: 100;
}
nav ul li { display: inline; font: var(--small) }
nav .home { grid-column: 2 / span 3 }
nav .catalogue { grid-column: 5 / span 3 }
nav .contents { grid-column: 15; text-align: right }

/* cover */
.cover {
  background: var(--orange);
  position: relative;
  z-index: 101;
}
.cover a {
  position: absolute;
  cursor: s-resize;
  top: 50vh;
  left: 50vw;
  transform: translateX(-50%);
}
.cover:hover { cursor: s-resize }
.cover--logo { grid-column: 2 / span 7; margin-left: -7% }
.cover--catalogue { grid-column: 9 / span 7 }
/* .cover img:hover { transform: scale(1)!important; cursor: inherit!important} */
.welcome { grid-column: 9 / span 7; margin-top: auto }
.welcome blockquote { font-size: 30px }
.welcome blockquote:hover { color: white; cursor:pointer }
.welcome p:not(:first-child) { text-indent: 7% }
.welcome .caption {
  text-indent: 0!important;
  margin-top: 4px;
  font: var(--small);
}
.welcome .plyr--audio {
  max-width: 41ch;
  margin-bottom: var(--gap);
  --plyr-color-main: #fff;
  --plyr-audio-control-color-hover: white;
  --plyr-range-thumb-background: white;
  --plyr-audio-progress-buffered-background: #000;
}
.welcome .plyr__tooltip { display: none }

/* collections */
.collection .visible { opacity: 1; transform: translateY(0%) }
.collection figure {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(5%);
  transition: opacity 2s, transform 1s;
  pointer-events: none;
}
.collection figure img, .collection figure video, .collection figure blockquote, .collection figure .plyr--video { pointer-events: auto }
.collection video, .collection img { transition: transform .2s; animation-timing-function: ease }
.collection video:hover, .collection img:hover, .collection figure .plyr--video:hover { cursor: pointer; transform: scale(1.02) }
.collection figcaption { display: inline-block; font: var(--small) }

/* overlays */
menu {
  position: fixed;
  top: 0;
  right: -100vw;
  z-index: 103;
  width: calc(((100vw) / 16) * 7);
  height: 100vh;
  padding: 60px var(--gap) 0 var(--gap);
  transition: right .3s;
  background-color: white;
  border-left: 3px solid var(--orange);
  display: grid;
  grid-template-columns: repeat(7,1fr);
  overflow-y: scroll;
}
.overlay__menu {
  position: sticky;
  top: 0px;
  grid-column: 1 / span 7;
  height: auto;
  pointer-events: none;
}
.overlay__menu > h3 { display: inline-block }
.overlay__menu span { pointer-events: all;}
.overlay__menu .type { float: left }
.overlay__menu .close { float: right }
.overlay__content { padding-bottom: 60px }
.overlay__content h1, .overlay__content h2 { color: var(--orange); font-weight: normal }
.overlay__content .plyr--audio { padding: calc(var(--gap)*2) 0 }
.overlay__content hr {
  border: none;
  border-top: 1.5px solid black;
  width: 10ch;
  margin: calc(23.4px*2) auto;
}

.overlay__content--text, .overlay__content--instruction {
  grid-column: 2 / span 5;
  position: absolute;
  top: 88px;
  height: auto;
  display: grid;
  grid-auto-rows: max-content;
}
.overlay__content--text p:not(:last-of-type), .overlay__content--instruction p:not(:last-of-type) { margin-bottom: 23.4px }

.overlay__content--text { font: var(--text) }
.overlay__content--text h1, .overlay__content--text h2 { font: var(--title) }
.overlay__content--text h1 { margin-top: -12px; margin-bottom: 30px; padding-left: 50px;}
.overlay__content--text h2 { font-style: italic; margin: 0; }
.overlay__content--text > div > p > a, .overlay__content--text > div > p > em a {
  text-decoration: none;
  border-bottom: 1.75px solid;
  display: inline-block;
  line-height: .95;
}
.overlay__content--text blockquote { padding-left: 40px; margin: 24px 40px 24px 0 }
.overlay__content--text .email, .overlay__content--text sup, .overlay__content--text .footnotes { font: var(--small); }
.overlay__content--text .email { margin-bottom: calc(16.8px*2) }
.overlay__content--text .email ul { padding-left: 16px }
.overlay__content--text table { margin-bottom: 16.8px!important }
.overlay__content--text sup {
  vertical-align: baseline;
  position: relative;
  top: -5px;
  margin-left: 1px;
}
.overlay__content--text sup a { text-decoration: none!important }
.overlay__content--text .footnotes hr { border: none; margin:0; }
.overlay__content--text .footnotes li:not(:last-of-type) { margin-bottom: calc(16.8px/2) }
.overlay__content--text .footnote-backref {
  text-decoration: none!important;
  vertical-align: baseline;
  position: relative;
  top: 2px;
}

.overlay__content--instruction { font: var(--instruction) }
.overlay__content--instruction h1 { font-weight: bold }
.overlay__content--instruction h2 { margin-top: -12px }
.overlay__content--instruction > div:first-of-type { margin-top: calc(var(--gap)*2)}
.overlay__content--instruction p:not(:last-of-type) { margin-bottom: 23.4px }
.overlay__content--instruction figure { text-align: center }
.overlay__content--instruction figure:not(:first-child) { margin-top: calc(var(--gap)*3) }
.overlay__content--instruction .artistBio { font: var(--bio); margin-top: calc(var(--gap)*3) }
.overlay__content--instruction .artistBio p { margin-bottom: var(--gap)}

.overlay__content--response {
  grid-column: 2 / span 5;
  display: flex;
  flex-direction: column;
}
.overlay__content--response > :not(:last-child) { margin-bottom: var(--gap)}
.overlay__content--response .info { margin-bottom: calc(23.4px - var(--gap)) }
.overlay__content--response .info--caption { margin-top: 23.4px }
.overlay__content--response .info--caption p:not(:last-of-type) { margin-bottom: 23.4px }
.overlay__content--response .reference span { color: var(--orange); transition: opacity .3s }
.overlay__content--response .reference span:hover { cursor: pointer; opacity: .7 }
.overlay__content--response .pagination {
  margin-top: calc((23.4px - var(--gap)) + 23.4px);
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.response--pdf-span {
  margin-top: -12px;
  padding-bottom: 12px;
  text-align: center;
  font: var(--small);
}

/* toc */
.collection__toc h3, .toc_about { font: var(--small) }
.collection__toc > div { margin-top: 60px }
.collection__toc ul { list-style-type: none }

.contentsMenu {
  grid-column: 1;
  position: fixed;
  top: -100vh;
  left: 0;
  background: white;
  transition: top .5s;
  z-index: 10;
}

.toc__about {
  grid-column: 2 / span 2;
  display: flex;
  flex-direction: column;
  font: var(--small);
  overflow: hidden;
}
.toc__about > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}
.toc__about .about { flex-grow: 1; overflow-y: auto}
.toc__about p:not(:last-of-type) { margin-bottom: 16.8px }
.toc__about .about a { text-decoration: underline }
.toc__about .links { display: flex; margin-top: 19.6px; min-height: min-content}
.toc__about .links ul { list-style-type: none; align-self: flex-end }
.toc__about .links img { height: 90px; width: auto; margin-top: var(--gap); display: block}

.toc__content {
  grid-column: 5 / span 5;
  font: var(--title);
  overflow-y: scroll;
}
.toc__content ul:first-of-type { margin-bottom: 60px }
.toc__content i { padding-right: 1ch}

.toc__responses {
  grid-column: 11 / span 5;
  font: var(--small);
  display: grid;
  /* grid-template-columns: repeat(4,1fr); */
  grid-template-columns: minmax(0,1fr)minmax(0,1fr)minmax(0,2fr)0;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}
.toc__responses h3:nth-of-type(2) { text-align: right }
.toc__responses select {
    grid-column: span 2;
  text-indent: 0.01px;
  text-overflow: '';
  -moz-appearance: none;
 	-webkit-appearance: none;
  font: var(--small);
  border: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/></svg>") no-repeat 100% center;
  background-size: auto 12px;
}
.responses-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: scroll;
}
.responses-grid .image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background-color: rgba(255, 120, 0, .8)
}
.responses-grid .image-wrapper img {
  position: absolute;
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
}
.responses-grid .image-wrapper:hover { background-color: var(--orange); cursor: pointer }
.responses-grid .image-wrapper img:hover { filter: grayscale(100%); mix-blend-mode: screen }
.notSelected { display: none!important }

.links__mobile {
  display: none;
}

.supporters {
  display: grid;
  row-gap: 30px;
  background-color: var(--orange);
  margin-top: 60px;
  padding: 60px var(--gap);
  scroll-snap-align: start;
}


/* specific */

/* plyr specific */
.plyr--audio, .plyr--video {
  --plyr-control-spacing: 0!important;
  --plyr-control-icon-size: 10px;
  --plyr-audio-controls-background: none;
  --plyr-audio-control-color: #000;
  --plyr-audio-control-background-hover: none;
  --plyr-audio-control-color-hover: var(--orange);
  --plyr-audio-progress-buffered-background: #dcdcdc;
  --plyr-range-track-height: 3.5px;
  --plyr-range-thumb-height: 10px;
  --plyr-range-thumb-background: var(--orange);
  --plyr-range-thumb-active-shadow-width: 0px;
  pointer-events: all;
}
.plyr__controls__item { padding-right: 4px}
.plyr--audio {
  --plyr-color-main: #dcdcdc;
}
.plyr--video {
  width: 100%;
  height: auto;
  background: none;
  --plyr-color-main: var(--orange)!important;
  --plyr-video-control-color-hover: var(--orange);
  --plyr-video-control-background-hover: none;
}
.plyr__video-wrapper { background: none }
figure .plyr--video:hover { cursor: pointer }
figure .plyr--video > .plyr__controls { display: none }
menu .plyr--video > .plyr__controls { padding: var(--gap) }

/* vimeo embed specific */
.video--landscape, .video--portrait { position: relative; height: 0; background-color: transparent }
.video--landscape { padding-bottom: calc((9 / 16) * 100%) }
.video--portrait { padding-bottom: calc((16 / 9) * 100%) }
.video--landscape iframe, .video--portrait iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* overlay instruction specific */
.Khaled img { max-width: 80%; margin-bottom: calc(var(--gap)*3)}
.Khaled ol, .Khaled ul { list-style: none }
.Khaled ol { counter-reset: steps; list-style-position: inside; margin-bottom: 36px }
.Khaled ol li:not(:first-of-type), .Khaled ul li:not(:first-of-type) { padding-top: 12px }
.Khaled ol li { counter-increment: steps; text-indent: -7ch; padding-left: 7ch }
.Khaled ol li::before { content: "Step " counter(steps); margin-right: 20px }
.Khaled ul li:first-of-type { margin-top: -12px }
.Khaled ul li { text-indent: -16px; }
.Khaled ul li:before { content:"· "; font: 30px/24px Helvetica, sans-serif; vertical-align: middle }
.Khaled p:last-of-type { margin-top: 12px }

.Milne .ninetythree {
  font-family: Courier, monospace;
  font-weight: bold;
  letter-spacing: -1.5px;
  color: #74f74d;
}
.Milne .footnote {
  font: var(--small);
  margin-top: 24px;
  padding-left: 5px;
  text-indent: -5px;
}
.Milne dl { width: 100%; overflow: hidden }
.Milne dt { float: left; width: 8ch }
.Milne dd { float: left; width: calc(100% - 8ch) }

/* collections specific */
.collection figure:nth-of-type(1) { transition-delay: calc(var(--delay) * 0) }
.collection figure:nth-of-type(2) { transition-delay: calc(var(--delay) * 1) }
.collection figure:nth-of-type(3) { transition-delay: calc(var(--delay) * 2) }
.collection figure:nth-of-type(4) { transition-delay: calc(var(--delay) * 3) }
.collection figure:nth-of-type(5) { transition-delay: calc(var(--delay) * 4) }
.collection figure:nth-of-type(6) { transition-delay: calc(var(--delay) * 5) }
.collection figure:nth-of-type(7) { transition-delay: calc(var(--delay) * 6) }
.collection figure:nth-of-type(8) { transition-delay: calc(var(--delay) * 7) }
.collection figure:nth-of-type(9) { transition-delay: calc(var(--delay) * 8) }
.collection figure:nth-of-type(10) { transition-delay: calc(var(--delay) * 9) }

/* loader specific */
.loader {
  margin: 100px auto;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
  }
}


@media screen and (min-width: 800px) {
  .toc__about { max-height: calc(100% - 60px) }
  .supporters { grid-template-columns: repeat(16, 1fr) }
  .supporters > div {
    display: grid;
    grid-auto-rows: auto 1fr;
    padding-right: 30px;
  }
  .supporters > div:first-of-type { grid-column: span 1!important }
  .supporters > div:nth-of-type(2) { grid-row: span 2 }
  .supporters > div:not(:last-of-type) { grid-column: span 3 }
  .supporters h3 { grid-column: 1/-1 }
  .supporters img {
    /* align-self: center; */
    /* height: 100%; */
    /* object-fit: contain; */
    width: auto;
    max-width: 100%;
    max-height: 50px;
    grid-column: 1/-1;
  }
  /* .supporters--presenting { grid-column: 5 / span 6!important } */
  /* .supporters--presenting h3 { grid-column: span 3!important } */
  /* .supporters--project { grid-column: 11 / span 6!important } */
  /* .supporters--project img { margin-bottom: -6px;} */
  .supporters--presenting, .supporters--project {
    grid-column: span 6!important;
    grid-template-columns: repeat(6,1fr)
  }
  .supporters--lead, .supporters--philanthropic, .supporters--govt, .supporters--education {
    grid-column: span 3!important;
    grid-template-columns: repeat(3,1fr)
  }
  .supporters--presenting div, .supporters--project div, .supporters--lead div, .supporters--philanthropic div, .supporters--govt div, .supporters--education div {
    grid-column: 1/-1;
    height: 60px;
  }
  .supporters--presenting div {
    background: url('../images/presentingpartners.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--project div {
    background: url('../images/majorprojectpartner.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--lead div {
    background: url('../images/leadpatrons.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--philanthropic div {
    background: url('../images/philanthropicpartner.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--govt div {
    background: url('../images/govtpartners.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--education div {
    background: url('../images/educationsupporter.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--text {
    grid-row: 3;
    grid-column: 5 / span 12;
    font: var(--small);
    margin-top: var(--gap);
  }

  .collection__1 figure:nth-of-type(1){ grid-column: 12 / span 5; padding-top: 30px}
  .collection__1 figure:nth-of-type(1) .plyr--video { margin-bottom: auto }
  .collection__1 figure:nth-of-type(2){ grid-column: 1 / span 9 }
  .collection__1 figure:nth-of-type(2) .plyr--video { margin-bottom: auto; margin-top: 50px }
  .collection__1 figure:nth-of-type(3){ grid-column: 8 / span 6; }
  .collection__1 figure:nth-of-type(3) .plyr--video { margin-top: auto }
  .collection__1 figure:nth-of-type(4){ grid-column: 11 / span 2 }
  .collection__1 figure:nth-of-type(4) .plyr--video { margin-top: 150%;}
  .collection__1 figure:nth-of-type(5) { grid-column: 2 / span 5; padding-bottom: 50px }
  .collection__1 figure:nth-of-type(5) blockquote { margin-top: auto }

  .collection__2 figure:nth-of-type(1){ grid-column: 1 / span 4 }
  .collection__2 figure:nth-of-type(1) .plyr--video { margin-top: auto; }
  .collection__2 figure:nth-of-type(2){ grid-column: 10 / span 6 }
  .collection__2 figure:nth-of-type(2) img { margin: auto }
  .collection__2 figure:nth-of-type(3){ grid-column: 10 / span 2 }
  .collection__2 figure:nth-of-type(3) .plyr--video { margin-left: -150px; margin-top: 230%}
  .collection__2 figure:nth-of-type(4) { grid-column: 2 / span 5; padding-top: 50px }
  .collection__2 figure:nth-of-type(4) blockquote && figcaption { margin-bottom: auto }

  .collection__3 figure:nth-of-type(1){ grid-column: 2 / span 5 }
  .collection__3 figure:nth-of-type(1) .plyr--video { max-height: 80vh; margin-top: auto;}
  .collection__3 figure:nth-of-type(2){ grid-column: 6 / span 5 }
  .collection__3 figure:nth-of-type(2) .plyr--video { margin-top: auto; margin-bottom: 70px }
  .collection__3 figure:nth-of-type(3){ grid-column: 10 / span 6 }
  .collection__3 figure:nth-of-type(3) blockquote { padding-top: 125px}

  .collection__4 figure:nth-of-type(1) { grid-column: 11 / span 6 }
  .collection__4 figure:nth-of-type(1) .plyr--video { margin: auto }
  .collection__4 figure:nth-of-type(2) { grid-column: 8 / span 3; padding-right: 3vw }
  .collection__4 figure:nth-of-type(2) .plyr--video { margin-top: auto }
  .collection__4 figure:nth-of-type(3) { grid-column: 10 / span 2  }
  .collection__4 figure:nth-of-type(3) img { margin-bottom: auto }
  .collection__4 figure:nth-of-type(4) { grid-column: 3 / span 6  }
  .collection__4 figure:nth-of-type(4) .plyr--video { margin-bottom:auto; margin-top: 50px }
  .collection__4 figure:nth-of-type(5) { grid-column: 1 / span 3; padding-right: 3vw  }
  .collection__4 figure:nth-of-type(5) img { margin: auto }
  .collection__4 figure:nth-of-type(6) { grid-column: 2 / span 5; padding-bottom: 30px }
  .collection__4 figure:nth-of-type(6) blockquote { margin-top: auto }

  .collection__5 figure:nth-of-type(1){ grid-column: 1 / span 9 }
  .collection__5 figure:nth-of-type(1) .plyr--video { margin-bottom: auto; padding-top: 50px;}
  .collection__5 figure:nth-of-type(2){ grid-column: 12 / span 5; padding-top: 20px; }
  .collection__5 figure:nth-of-type(2) img { margin: auto; max-height: 82vh}
  .collection__5 figure:nth-of-type(3){ grid-column: 10 / span 3 }
  .collection__5 figure:nth-of-type(3) img { margin-top: 140%}
  .collection__5 figure:nth-of-type(4){ grid-column: 3 / span 6; margin-top: auto; margin-right:3vw; padding-bottom: 15px;}

  .collection__6 figure:nth-of-type(1){ grid-column: 7 / span 3 }
  .collection__6 figure:nth-of-type(1) img { margin: auto; max-height: calc(100vh - 120px); width: auto;}
  .collection__6 figure:nth-of-type(2){ grid-column: 2 / span 2 }
  .collection__6 figure:nth-of-type(2) img { margin: auto; }
  .collection__6 figure:nth-of-type(3){ grid-column: 4 / span 4 }
  .collection__6 figure:nth-of-type(3) .plyr--video { margin-top: 100%; }
  .collection__6 figure:nth-of-type(4){ grid-column: 10 / span 7 }
  .collection__6 figure:nth-of-type(4) .plyr--video { margin-top: 50px }
  .collection__6 figure:nth-of-type(5) { grid-column: 11 / span 5 }
  .collection__6 figure:nth-of-type(5) blockquote { margin-top: auto; padding-bottom: 50px}

  .collection__7 figure:nth-of-type(1){ grid-column: 1 / span 7;}
  .collection__7 figure:nth-of-type(1) .plyr--video { margin-top: 25px }
  .collection__7 figure:nth-of-type(2){ grid-column: 7 / span 10; }
  .collection__7 figure:nth-of-type(2) .plyr--video { margin-top: auto }
  .collection__7 figure:nth-of-type(3){ grid-column: 13 / span 2 }

  .collection__8 figure:nth-of-type(1){ grid-column: 1 / span 2; z-index: 2; }
  .collection__8 figure:nth-of-type(1) img { margin-top: 270px; width: 90%;}
  .collection__8 figure:nth-of-type(2){ grid-column: 2 / span 6; z-index: 1;}
  .collection__8 figure:nth-of-type(2) img { margin-top: 40px }
  .collection__8 figure:nth-of-type(3){ grid-column: 9 / span 6 }
  .collection__8 figure:nth-of-type(3) img { margin-top: auto }
  .collection__8 figure:nth-of-type(4){ grid-column: 14 / span 2 }
  .collection__8 figure:nth-of-type(4) .plyr--video { margin: auto}
  .collection__8 figure:nth-of-type(5){ grid-column: 10 / span 6 }
  .collection__8 figure:nth-of-type(5) blockquote { margin-top: 12vh; }

  .collection__9 figure:nth-of-type(1){ grid-column: 8 / span 7 }
  .collection__9 figure:nth-of-type(1) .plyr--video { margin:auto; padding-left: 3vw }
  .collection__9 figure:nth-of-type(2){ grid-column: 6 / span 3; padding-top: 10vh; }
  .collection__9 figure:nth-of-type(2) .plyr--video { margin:auto }
  .collection__9 figure:nth-of-type(3){ grid-column: 14 / span 2 }
  .collection__9 figure:nth-of-type(3) .plyr--video { margin-top: 100px }
  .collection__9 figure:nth-of-type(4){ grid-column: 3 / span 5 }
  .collection__9 figure:nth-of-type(4) blockquote { margin-top: 20vh }

}