@font-face {
  font-family: 'Oracle Book';
  src: url("../fonts/oracle-book-webfont.woff2") format("woff2"), url("../fonts/oracle-book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Reset CSS */
html, body {
  background: #fff;
  font-family: 'Oracle Book';
  z-index: 1;
  font-size: 16px;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0.5vw;
  font-size: 3.5vw;
  line-height: 3.75vw;
}

a, button, input, label {
  cursor: pointer;
}

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

a, a:active, a:focus, a:visited {
  color: black;
  text-decoration: none;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

sub {
  display: inline-block;
  vertical-align: baseline;
  font-size: 1.45vw;
  line-height: 1.4vw;
}

.wrapper, .booking {
  margin-top: 1vw;
  margin-bottom: 2vw;
}

.wrapper.lig .inner, .booking.lig .inner {
  padding: 1vw;
}

.wrapper.lig .inner p, .booking.lig .inner p {
  display: block;
}

.legals {
  margin-bottom: 1vw;
}

.cv {
  text-align: left;
  font-size: 3.5vw;
  line-height: 3.75vw;
  max-width: 87vw;
  margin-right: 1vw;
  margin-bottom: 1vw;
  vertical-align: top;
  display: inline-block;
  color: white;
}

.project, .about, .booking, .legal, .data, .date, .legal {
  height: 0;
  overflow: hidden;
  transition: height .25s linear;
  background: black;
}

.project a, .about a, .booking a, .legal a, .data a, .date a, .legal a {
  color: white;
}

.project .inner, .about .inner, .booking .inner, .legal .inner, .data .inner, .date .inner, .legal .inner {
  padding: 1vw;
  padding-bottom: 0;
  padding-right: 0;
  font-size: 0;
  line-height: 0;
}

.project .inner p, .about .inner p, .booking .inner p, .legal .inner p, .data .inner p, .date .inner p, .legal .inner p {
  color: white;
  margin-bottom: 0.5vw;
  font-size: 1.5vw;
  line-height: 1.75vw;
  display: inline-block;
}

.project .inner p a, .about .inner p a, .booking .inner p a, .legal .inner p a, .data .inner p a, .date .inner p a, .legal .inner p a {
  text-decoration: underline;
  text-decoration-thickness: 0.165vw;
}

.project .inner div, .project .inner .video, .about .inner div, .about .inner .video, .booking .inner div, .booking .inner .video, .legal .inner div, .legal .inner .video, .data .inner div, .data .inner .video, .date .inner div, .date .inner .video, .legal .inner div, .legal .inner .video {
  margin-right: 1vw;
  margin-bottom: 1vw;
  vertical-align: top;
  display: inline-block;
  color: white;
}

.project .inner div img, .project .inner .video img, .about .inner div img, .about .inner .video img, .booking .inner div img, .booking .inner .video img, .legal .inner div img, .legal .inner .video img, .data .inner div img, .data .inner .video img, .date .inner div img, .date .inner .video img, .legal .inner div img, .legal .inner .video img {
  width: 100%;
}

.project .inner div.w100, .project .inner .video.w100, .about .inner div.w100, .about .inner .video.w100, .booking .inner div.w100, .booking .inner .video.w100, .legal .inner div.w100, .legal .inner .video.w100, .data .inner div.w100, .data .inner .video.w100, .date .inner div.w100, .date .inner .video.w100, .legal .inner div.w100, .legal .inner .video.w100 {
  width: 96vw;
}

.project .inner div.w100.video, .project .inner .video.w100.video, .about .inner div.w100.video, .about .inner .video.w100.video, .booking .inner div.w100.video, .booking .inner .video.w100.video, .legal .inner div.w100.video, .legal .inner .video.w100.video, .data .inner div.w100.video, .data .inner .video.w100.video, .date .inner div.w100.video, .date .inner .video.w100.video, .legal .inner div.w100.video, .legal .inner .video.w100.video {
  height: calc(96vw / 1.75);
}

.project .inner div.w50, .project .inner .video.w50, .about .inner div.w50, .about .inner .video.w50, .booking .inner div.w50, .booking .inner .video.w50, .legal .inner div.w50, .legal .inner .video.w50, .data .inner div.w50, .data .inner .video.w50, .date .inner div.w50, .date .inner .video.w50, .legal .inner div.w50, .legal .inner .video.w50 {
  width: 47.5vw;
}

.project .inner div.w33, .project .inner .video.w33, .about .inner div.w33, .about .inner .video.w33, .booking .inner div.w33, .booking .inner .video.w33, .legal .inner div.w33, .legal .inner .video.w33, .data .inner div.w33, .data .inner .video.w33, .date .inner div.w33, .date .inner .video.w33, .legal .inner div.w33, .legal .inner .video.w33 {
  width: 31.33vw;
}

.project .inner div::-webkit-media-controls-fullscreen-button, .project .inner .video::-webkit-media-controls-fullscreen-button, .about .inner div::-webkit-media-controls-fullscreen-button, .about .inner .video::-webkit-media-controls-fullscreen-button, .booking .inner div::-webkit-media-controls-fullscreen-button, .booking .inner .video::-webkit-media-controls-fullscreen-button, .legal .inner div::-webkit-media-controls-fullscreen-button, .legal .inner .video::-webkit-media-controls-fullscreen-button, .data .inner div::-webkit-media-controls-fullscreen-button, .data .inner .video::-webkit-media-controls-fullscreen-button, .date .inner div::-webkit-media-controls-fullscreen-button, .date .inner .video::-webkit-media-controls-fullscreen-button, .legal .inner div::-webkit-media-controls-fullscreen-button, .legal .inner .video::-webkit-media-controls-fullscreen-button {
  display: none;
}

.project .inner div.sound, .project .inner .video.sound, .about .inner div.sound, .about .inner .video.sound, .booking .inner div.sound, .booking .inner .video.sound, .legal .inner div.sound, .legal .inner .video.sound, .data .inner div.sound, .data .inner .video.sound, .date .inner div.sound, .date .inner .video.sound, .legal .inner div.sound, .legal .inner .video.sound {
  font-size: 0;
  line-height: 0;
  margin-bottom: 0.25vw;
  width: 98vw;
}

.project .inner div.sound *, .project .inner .video.sound *, .about .inner div.sound *, .about .inner .video.sound *, .booking .inner div.sound *, .booking .inner .video.sound *, .legal .inner div.sound *, .legal .inner .video.sound *, .data .inner div.sound *, .data .inner .video.sound *, .date .inner div.sound *, .date .inner .video.sound *, .legal .inner div.sound *, .legal .inner .video.sound * {
  display: inline-block;
}

.project .inner div.sound sub, .project .inner .video.sound sub, .about .inner div.sound sub, .about .inner .video.sound sub, .booking .inner div.sound sub, .booking .inner .video.sound sub, .legal .inner div.sound sub, .legal .inner .video.sound sub, .data .inner div.sound sub, .data .inner .video.sound sub, .date .inner div.sound sub, .date .inner .video.sound sub, .legal .inner div.sound sub, .legal .inner .video.sound sub {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5vw;
  margin-right: 1vw;
}

.project .inner div.sound sub p, .project .inner .video.sound sub p, .about .inner div.sound sub p, .about .inner .video.sound sub p, .booking .inner div.sound sub p, .booking .inner .video.sound sub p, .legal .inner div.sound sub p, .legal .inner .video.sound sub p, .data .inner div.sound sub p, .data .inner .video.sound sub p, .date .inner div.sound sub p, .date .inner .video.sound sub p, .legal .inner div.sound sub p, .legal .inner .video.sound sub p {
  line-height: 1.4vw;
  margin-bottom: 0;
}

.project .inner div.sound .playwrap, .project .inner .video.sound .playwrap, .about .inner div.sound .playwrap, .about .inner .video.sound .playwrap, .booking .inner div.sound .playwrap, .booking .inner .video.sound .playwrap, .legal .inner div.sound .playwrap, .legal .inner .video.sound .playwrap, .data .inner div.sound .playwrap, .data .inner .video.sound .playwrap, .date .inner div.sound .playwrap, .date .inner .video.sound .playwrap, .legal .inner div.sound .playwrap, .legal .inner .video.sound .playwrap {
  height: 3vw;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  overflow: visible;
  cursor: pointer;
}

.project .inner div.sound .playwrap img, .project .inner .video.sound .playwrap img, .about .inner div.sound .playwrap img, .about .inner .video.sound .playwrap img, .booking .inner div.sound .playwrap img, .booking .inner .video.sound .playwrap img, .legal .inner div.sound .playwrap img, .legal .inner .video.sound .playwrap img, .data .inner div.sound .playwrap img, .data .inner .video.sound .playwrap img, .date .inner div.sound .playwrap img, .date .inner .video.sound .playwrap img, .legal .inner div.sound .playwrap img, .legal .inner .video.sound .playwrap img {
  margin-top: 0.25vw;
  height: 3vw;
}

.project .inner div.sound img, .project .inner .video.sound img, .about .inner div.sound img, .about .inner .video.sound img, .booking .inner div.sound img, .booking .inner .video.sound img, .legal .inner div.sound img, .legal .inner .video.sound img, .data .inner div.sound img, .data .inner .video.sound img, .date .inner div.sound img, .date .inner .video.sound img, .legal .inner div.sound img, .legal .inner .video.sound img {
  width: auto;
  height: 3vw;
  margin-top: -0.35vw;
}

.project .inner div.sound span, .project .inner div.sound .audiotitle p, .project .inner .video.sound span, .project .inner .video.sound .audiotitle p, .about .inner div.sound span, .about .inner div.sound .audiotitle p, .about .inner .video.sound span, .about .inner .video.sound .audiotitle p, .booking .inner div.sound span, .booking .inner div.sound .audiotitle p, .booking .inner .video.sound span, .booking .inner .video.sound .audiotitle p, .legal .inner div.sound span, .legal .inner div.sound .audiotitle p, .legal .inner .video.sound span, .legal .inner .video.sound .audiotitle p, .data .inner div.sound span, .data .inner div.sound .audiotitle p, .data .inner .video.sound span, .data .inner .video.sound .audiotitle p, .date .inner div.sound span, .date .inner div.sound .audiotitle p, .date .inner .video.sound span, .date .inner .video.sound .audiotitle p, .legal .inner div.sound span, .legal .inner div.sound .audiotitle p, .legal .inner .video.sound span, .legal .inner .video.sound .audiotitle p {
  text-align: left;
  font-size: 3.5vw;
  line-height: 3.75vw;
  max-width: 87vw;
}

.project .inner div.sound audio, .project .inner .video.sound audio, .about .inner div.sound audio, .about .inner .video.sound audio, .booking .inner div.sound audio, .booking .inner .video.sound audio, .legal .inner div.sound audio, .legal .inner .video.sound audio, .data .inner div.sound audio, .data .inner .video.sound audio, .date .inner div.sound audio, .date .inner .video.sound audio, .legal .inner div.sound audio, .legal .inner .video.sound audio {
  display: none;
}

.project .inner div p, .project .inner .video p, .about .inner div p, .about .inner .video p, .booking .inner div p, .booking .inner .video p, .legal .inner div p, .legal .inner .video p, .data .inner div p, .data .inner .video p, .date .inner div p, .date .inner .video p, .legal .inner div p, .legal .inner .video p {
  color: white;
  margin-bottom: 0.5vw;
  font-size: 1.5vw;
  line-height: 1.75vw;
  display: inline-block;
}

.project .inner div p a, .project .inner .video p a, .about .inner div p a, .about .inner .video p a, .booking .inner div p a, .booking .inner .video p a, .legal .inner div p a, .legal .inner .video p a, .data .inner div p a, .data .inner .video p a, .date .inner div p a, .date .inner .video p a, .legal .inner div p a, .legal .inner .video p a {
  text-decoration: underline;
  text-decoration-thickness: 0.165vw;
}

/* Your CSS */
main {
  min-height: calc(100vh);
}

.span {
  display: inline-block;
  cursor: pointer;
  margin-right: 1vw;
}

.span .playwrap {
  height: 3vw;
  vertical-align: top;
  overflow: hidden;
  overflow: visible;
  display: none;
}

.span .playwrap:first-of-type {
  display: inline-block;
}

.span .playwrap img {
  margin-top: 0.3vw;
  height: 3vw;
}

.span .previmg {
  vertical-align: baseline;
  max-height: 2.4vw;
  display: none;
}

.span .previmg:first-of-type {
  display: inline-block;
}

.span:first-of-type {
  margin-right: 0.5vw;
}

.underline {
  position: relative;
}

.underline canvas {
  transition: margin .25s ease;
  pointer-events: auto;
  position: absolute;
  top: 0.95vw;
  left: 0 !important;
  /* background-color: rgba(222, 222, 222, 0.1); */
  z-index: 5;
  overflow: visible;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  cursor: pointer !important;
}

.open canvas {
  margin-top: -1.25vw;
}

.caption {
  margin-bottom: 0 !important;
  margin-top: 0.25vw;
}

.legal p {
  color: white;
  margin-bottom: 0.5vw;
  font-size: 1.5vw;
  line-height: 1.75vw;
  display: block;
}

.legal a {
  text-decoration: underline;
}

.legal .inner {
  padding: 1vw;
}

/* Media Queries */
@media screen and (max-width: 500px) {
  body, .cv {
    font-size: 7vw;
    line-height: 7.25vw;
  }
  .span .previmg {
    max-height: 5vw;
  }
  .span .playwrap {
    height: 6.5vw !important;
  }
  .span .playwrap img {
    margin-top: .4vw !important;
    height: 6vw !important;
  }
  sub {
    display: inline-block;
    vertical-align: baseline;
    font-size: 3.2vw !important;
    line-height: 3vw !important;
  }
  .project .inner div.sound sub, .project .inner .video.sound sub, .about .inner div.sound sub, .booking .inner div.sound sub, .about .inner .video.sound sub, .booking .inner .video.sound sub, .legal .inner div.sound sub, .legal .inner .video.sound sub, .data .inner div.sound sub, .data .inner .video.sound sub, .date .inner div.sound sub, .date .inner .video.sound sub {
    margin-top: 0.5vw;
  }
  .project .inner div.sound sub p, .project .inner .video.sound sub p, .about .inner div.sound sub p, .booking .inner div.sound sub p, .about .inner .video.sound sub p, .booking .inner .video.sound sub p, .legal .inner div.sound sub p, .legal .inner .video.sound sub p, .data .inner div.sound sub p, .data .inner .video.sound sub p, .date .inner div.sound sub p, .date .inner .video.sound sub p {
    font-size: 2.9vw !important;
    line-height: 2.5vw !important;
  }
  .underline canvas {
    top: 2vw;
  }
  .open canvas {
    margin-top: -2.5vw;
  }
  .wrapper, .about, .booking {
    margin-top: 1vw;
    margin-bottom: 7vw;
  }
  .w50, .w33, .w100 {
    width: calc(100% - 1vw) !important;
  }
  .project .inner div p, .project .inner .video p, .about .inner div p, .booking .inner div p, .booking .inner .video p, .about .inner .video p, .legal .inner div p, .legal .inner .video p, .data .inner div p, .data .inner .video p, .date .inner div p, .date .inner .video p {
    margin-bottom: 2vw;
    font-size: 4vw;
    line-height: 4.5vw;
  }
  .audiotitle p {
    font-size: 7vw !important;
    line-height: 7.25vw !important;
  }
}