*,
*::after,
a::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

@font-face {
  font-family: 'calibre';
  src: url("/fonts/Calibre-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'calibre';
  src: url("/fonts/Calibre-Semibold.otf") format("opentype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'burgess';
  src: url("/fonts/burgess-regular-pro.otf") format("opentype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'burgess';
  src: url("/fonts/burgess-italic-pro.otf") format("opentype");
  font-weight: normal;
  font-style: italic; }

::-moz-selection {
  background: rgba(0, 0, 0, 0.99);
  color: #FFF; }

::selection {
  background: rgba(0, 0, 0, 0.99);
  color: #FFF; }

h1, h2 {
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 1em 0; }

.launch-date,
.subtitle {
  font-size: 1.3rem;
  position: absolute;
  font-family: "calibre";
  font-weight: normal; }

.launch-date {
  text-align: left;
  top: 1em;
  left: 1em; }

.subtitle {
  text-align: left;
  bottom: 1em;
  right: 1em; }

h3 {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: "calibre";
  font-weight: bold;
  text-align: center; }

p {
  margin-bottom: 1em; }

.interviewer,
.interviewee,
p {
  position: relative;
  z-index: 50; }

.caption {
  padding-top: 1em;
  font-size: 0.75em;
  text-align: center; }

body {
  background: #FFF;
  color: #000;
  font-family: "burgess";
  font-weight: normal;
  min-height: 100vh;
  font-size: 14pt;
  line-height: 16.5pt; }

a, a:link, a:visited {
  color: #000;
  text-decoration: underline; }

a:hover {
  text-decoration: none; }

#menu {
  list-style-type: none; }

#menu > li,
#interview-space > li {
  height: calc(100vh/8);
  max-height: calc(100vh/8);
  transition: max-height 0.15s ease-out, height 0.15s ease-out;
  overflow: hidden; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes spin-reverse {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-360deg); } }

#intro {
  position: fixed;
  top: 0;
  width: calc(100% - 20px);
  background: #FFF;
  z-index: 10; }

.disabled .name {
  color: rgba(0, 0, 0, 0.3); }

.disabled .title:hover {
  background: #FFF;
  color: #000;
  border-color: #000; }

.disabled .name:hover {
  color: rgba(0, 0, 0, 0.3); }

#menu li.active {
  height: auto;
  max-height: 50000px;
  transition: max-height 0.25s ease-in; }

.title {
  font-family: "burgess";
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
  height: calc(100vh/8);
  max-height: calc(100vh/8);
  font-size: 36px;
  position: relative;
  text-align: center;
  background: #FFF;
  border-bottom: 2px solid #000; }
  .active .title, .title:hover {
    color: #FFF;
    background: #000;
    border-color: #FFF; }

.title-sans {
  font-family: "calibre"; }

.name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; }

.an {
  font-family: "burgess"; }

.contents {
  margin: auto;
  font-size: 15pt;
  line-height: 18pt;
  max-width: 1000px;
  padding: 1em 0.5em; }

#web .contents {
  font-size: 24px;
  line-height: 1.3em; }

.main-carousel {
  margin: 0 0 2em;
  z-index: 50; }

.flickity-prev-next-button {
  top: 100%; }

.flickity-button-icon {
  fill: #D72727; }

.flickity-page-dots .dot {
  background: #D72727; }

.carousel-cell {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center; }

.flickity-button {
  background: rgba(255, 255, 255, 0); }

.interview-pic {
  float: left;
  max-width: 40%;
  margin-right: 1em; }

.carousel-cell img {
  max-width: 100vw;
  max-height: 80vh; }

#interview-space .title {
  position: relative; }

.question {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
  letter-spacing: 0.05em;
  text-indent: 33pt; }

.indent {
  margin-left: 33pt; }

.footer {
  position: absolute;
  top: 7.625in;
  padding-top: 8.25pt;
  width: 4.5in;
  text-align: center;
  border-top: 1px solid #000;
  font-size: 14pt; }

img {
  max-width: 100%; }

.url {
  word-break: break-all; }

.thumbnail img {
  max-width: 100%; }

#control {
  background: black;
  color: white;
  position: fixed;
  bottom: -4rem;
  width: 100%;
  z-index: 10;
  transition: all 0.2s;
  text-align: center;
  border-top: 1px solid #FFF; }
  #control.active {
    bottom: 0; }
  #control .close {
    font-family: "calibre";
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem 0.5rem 0.25rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 80; }
    #control .close:hover {
      color: #D72727; }

.works-label, .tool_title {
  font-family: "burgess";
  border-bottom: 1px solid #000;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.5in; }

.questions ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 2em;
  margin-top: 0; }

.questions li {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #000; }

.artist {
  margin: 2em 0; }

.artist_name {
  text-decoration: underline; }

.artwork_title {
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em; }

.works, .location {
  margin-top: 2em; }

.interviewee-info {
  font-family: "calibre"; }

figure img {
  width: 100%;
  height: 100%; }

#t1logo {
  width: 6em;
  height: 7em; }

.contents img {
  display: block;
  margin: auto; }

h3 {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center; }

.person {
  font-size: 0.72em;
  text-transform: uppercase;
  color: red;
  letter-spacing: 0.15em;
  font-family: "calibre";
  font-weight: bold;
  vertical-align: text-top;
  padding-right: 1em;
  letter-spacing: 0.1em; }

#sectiontitle,
#section-colophon {
  width: 100vw;
  overflow-x: hidden;
  top: 0;
  overflow: hidden;
  height: calc(100vh/8);
  max-height: calc(100vh/8); }
  #sectiontitle .title,
  #section-colophon .title {
    background: #000;
    border-color: white !important; }
  #sectiontitle h1,
  #section-colophon h1 {
    position: absolute;
    text-align: center;
    width: 110vw;
    font-size: 5rem;
    top: 52%;
    left: -5vw;
    transform-origin: 0 0;
    transform: scaleY(2.4);
    text-transform: uppercase;
    font-weight: bold;
    color: #fff; }
  #sectiontitle h2,
  #section-colophon h2 {
    position: absolute;
    text-align: center;
    width: 110vw;
    font-size: 5rem;
    top: 52%;
    left: -5vw;
    transform-origin: 0 0;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff; }
  #sectiontitle:hover,
  #section-colophon:hover {
    background: #000; }

.rock {
  position: fixed;
  z-index: 20;
  top: 100px;
  mix-blend-mode: screen;
  animation: spin 354s infinite;
  animation-timing-function: linear;
  pointer-events: none; }

#rock2, #rock3, #rock5 {
  animation: spin-reverse 554s infinite;
  animation-timing-function: linear; }

#rock4 {
  width: 25vw; }

#rock3 {
  width: 30vw; }

#rock5 {
  width: 20vw; }

#rock1 {
  top: 0;
  left: 2vw; }

/* egg */
#rock2 {
  top: 25vh;
  right: 5vw; }

/* spike */
#rock4 {
  top: 2vw;
  right: 2vw; }

/* rock */
#rock3 {
  top: 30vw;
  right: 15vw; }

/* rock same as 4 */
#rock5 {
  top: 25vw;
  left: 5vw; }

#web .reverse {
  background: black;
  color: #FFF; }

.two-cols {
  column-count: 2;
  column-gap: 1em;
  margin-bottom: 1em; }

.two-cols p {
  margin-top: 0; }

#menu li.active {
  background: #FFF;
  border-bottom: 2px solid #000; }

#menu li.active:hover {
  background: #FFF; }

.image-cover {
  display: none; }

@media (max-width: 1000px) {
  #sectiontitle h1 {
    font-size: 2rem;
    transform: scale(1, 4);
    top: 30%; }
  .launch-date,
  .subtitle {
    font-size: 1.2rem;
    font-weight: normal; }
  .name {
    font-size: 30px; }
  .launch-date {
    top: 0.5em;
    left: 0.5em; }
  .subtitle {
    bottom: 0.5em;
    right: 0.5em; }
  body {
    font-size: 18px;
    line-height: 21px; }
  li#section-tools,
  li#section-2 {
    min-height: 53pt;
    height: 53pt; }
  #menu > li {
    height: calc(100vh/8);
    max-height: calc(100vh/8); }
  .preamble {
    font-size: 10pt; }
  .buttons {
    text-align: center; }
  .indent {
    margin-left: 10pt; }
  #web {
    margin: 0 1em;
    margin: 0; }
  .full-tool,
  #web .section-reverse {
    grid-template-columns: 1fr; }
  .two-cols {
    column-count: 1; }
  #web .contents {
    margin: 0em; } }