.navigation {
  position: relative;
  margin: 0;
  height: 1.5em;
  padding: 0.75em 2em;
  padding-bottom: 0.5em;
  display: grid;
  grid-template-columns: 30% 70%;
  transition: all 0.25s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .navigation a {
    text-decoration: none;
    font-size: 1em;
    line-height: 1em;
    color: #ba41be;
    transition: color 0.35s ease-in-out 0.35s; }
  .navigation .page a:hover {
    text-decoration: underline; }
  .navigation .name {
    font-family: fira-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    /* bold */
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.25em;
    letter-spacing: 0.12em;
    cursor: pointer; }
  .navigation .inlineMenu {
    text-align: right;
    background: black; }
  .navigation .page {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding-top: 0.25em; }
  .navigation .menuToggle {
    display: none;
    text-align: right;
    cursor: pointer;
    padding: 0.25em 0; }
    .navigation .menuToggle svg {
      width: 1.25em;
      height: 1.25em; }
      .navigation .menuToggle svg line {
        stroke: black;
        transition: stroke 0.75s ease-in-out; }
  .navigation .menuToggle:hover {
    opacity: 0.75; }
  .navigation .menu {
    position: absolute;
    background: black;
    user-select: none;
    -webkit-user-select: none;
    top: 6.25em;
    left: 0;
    right: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out, padding 0.25s ease-in-out, top 0.25s ease-in-out; }
    .navigation .menu .page {
      position: relative;
      z-index: 10;
      display: block;
      text-align: left;
      padding: 0;
      background-color: black; }
      .navigation .menu .page a {
        width: 100%; }
    .navigation .menu .page:hover {
      background-color: #2b2b2b; }

@media screen and (max-width: 1024px) {
  .navigation {
    font-size: 0.9em; } }

@media screen and (max-width: 768px) {
  .navigation {
    font-size: 1.25em;
    grid-template-columns: 50% 50%; }
    .navigation .menuToggle {
      display: inline-block; } }

.projectThumb {
  min-width: 0;
  min-height: 0;
  cursor: pointer; }
  .projectThumb img {
    width: 100%;
    cursor: pointer;
    opacity: 1;
    outline: 4px solid rgba(0, 0, 0, 0);
    transition: opacity 0.25s ease-in-out, outline 0.25s ease-in-out, border 0.25s ease-in-out; }
    .projectThumb img:hover {
      opacity: 0.5; }
  .projectThumb .title {
    font-size: 0.75em;
    line-height: 1.25em; }

.projectThumb:hover .title {
  text-decoration: underline; }

.border {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.miniNav {
  position: -webkit-sticky;
  position: sticky;
  z-index: 101;
  transition: top 0.35s ease-in-out;
  overflow: hidden; }
  .miniNav img.rainbow {
    position: absolute;
    width: 100%;
    height: 0.25em;
    margin: 0;
    padding: 0; }
  .miniNav .tooltip {
    position: absolute;
    margin-top: 0.25em;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 0.25em;
    font-size: 0.65em;
    line-height: 1.25em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out; }
  .miniNav .carousel {
    width: 100vw;
    overflow: hidden;
    background-color: #000; }
    .miniNav .carousel .controls {
      position: absolute;
      display: block;
      top: 0;
      width: 100vw;
      overflow: hidden;
      pointer-events: none; }
      .miniNav .carousel .controls .control {
        position: absolute;
        top: 0;
        bottom: 0;
        display: block;
        line-height: 0;
        cursor: pointer;
        pointer-events: auto;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        background: black;
        opacity: 0.75;
        overflow: hidden;
        transition: background 0.35s ease-out, opacity 0.35s ease-out; }
        .miniNav .carousel .controls .control img {
          position: absolute;
          padding: 1vw;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          max-width: 5vw;
          max-height: 5vw;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          overflow: hidden; }
    .miniNav .carousel .control:hover {
      opacity: 1; }
    .miniNav .carousel .list {
      display: grid;
      transition: margin 1s cubic-bezier(0.76, 0, 0.24, 1); }
      .miniNav .carousel .list img {
        opacity: 1;
        display: block; }

@keyframes navTileIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media screen and (max-width: 1024px) {
  .miniNav .carousel .tooltip {
    font-size: 0.5em; } }

.project .column {
  width: 80vw;
  margin: 0 10vw;
  padding: 0;
  padding-top: 3em;
  padding-bottom: 6em; }

.project .name {
  display: block;
  font-size: 1.5em;
  line-height: 1.5em;
  font-family: fira-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  /* bold */
  padding-bottom: 0.5em;
  border-bottom: 1px solid #808080;
  margin-bottom: 1.5em; }

.project .slideContainer {
  max-width: 100vw;
  overflow: hidden;
  transition: height 0.25s ease-in-out; }

.project .slide {
  width: 200vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  transition: transform 0.5s ease-in-out; }

.project .image {
  display: flex;
  position: relative;
  overflow: hidden;
  max-height: 62.5vw;
  z-index: 100; }
  .project .image img,
  .project .image video {
    object-fit: cover;
    width: 100%; }

.project .image > img {
  width: 100%;
  display: block; }

.project .otherImages {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden; }

.project .otherImages img,
.project .otherImages video {
  width: 100%;
  display: block;
  object-fit: cover; }

.project .info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em 0; }

.project .info > .left {
  padding-right: 10vw; }

.project .info p {
  margin: 0; }

.project .info .section {
  margin-bottom: 0.5em; }

.project .info .section:last-of-type {
  margin-bottom: 0; }

.project .info .client {
  font-size: 1.5em;
  line-height: 1.25em; }

.project .info .section a {
  text-decoration: underline;
  opacity: 1;
  transition: opacity 0.25s ease-in-out; }
  .project .info .section a:hover {
    opacity: 0.5; }

.project .info .toggle a {
  display: block;
  text-align: right;
  cursor: pointer;
  text-decoration: none; }

.project .info .toggle a:hover {
  text-decoration: underline; }

.project .mediaGrid {
  display: grid;
  grid-gap: 0.25em;
  margin-top: 3em; }

@media screen and (max-width: 768px) {
  .project .info {
    grid-template-columns: 1fr; }
    .project .info > .left {
      padding-right: 0; }
    .project .info .toggle {
      order: -1; }
  .project .mediaGrid {
    grid-template-areas: unset !important; }
    .project .mediaGrid .otherImages {
      grid-area: unset !important; } }

.projects {
  width: 80vw;
  margin: 0 auto;
  padding: 0;
  padding-top: 3.75em;
  padding-bottom: 2em; }
  .projects .projectsLabel {
    margin-bottom: 2em; }
  .projects .projectsList {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1em;
    min-width: 0;
    min-height: 0; }
  .projects .toggle {
    text-align: right;
    margin-top: 1.25em;
    cursor: pointer; }
  .projects .toggle:hover {
    text-decoration: underline; }

.about .section {
  width: 80vw;
  margin: 0 auto;
  padding: 0;
  padding-top: 3em;
  padding-bottom: 6em; }

.about .section.team {
  padding-bottom: 0; }

.about .section h1,
.about .section h2 {
  font-family: fira-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  /* bold */
  font-size: 1.25em;
  line-height: 1.8em;
  margin: 0;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #808080;
  margin-bottom: 1.8em; }

.about .section.team h2 {
  margin-bottom: 3.2em; }

.about .section h3 {
  font-family: fira-sans, sans-serif;
  font-style: normal;
  font-weight: 700;
  /* bold */
  font-size: 1em;
  margin: 0.25em 0;
  margin-top: 0.75em; }

.about .section img {
  width: 100%; }

.about .section p {
  margin: 0.75em 0; }

.about .section .description p {
  margin: 0;
  margin-bottom: 1em; }

.about .section .description div:first-of-type p:first-of-type::first-letter {
  float: left;
  font-size: 5.5em;
  line-height: 0.65em;
  margin: 0;
  padding: 0;
  margin-top: 0.05em;
  margin-left: -0.1em;
  margin-right: 0.05em;
  font-family: fira-sans, sans-serif;
  font-weight: 300;
  font-style: normal; }

.about .section .description div:last-of-type p:last-of-type {
  margin-bottom: 0; }

.about .section .description {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2em; }

.about .section ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  column-count: 3; }

.about .member {
  display: grid;
  margin-bottom: 4em;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2em; }

.about .member:last-of-type {
  margin-bottom: 6em; }

.about .member > div {
  vertical-align: top; }

.about .member img {
  margin-top: 0.5em; }

.about .member p:last-of-type {
  margin-bottom: 0; }

.about .member h3 {
  margin-top: 0;
  vertical-align: top; }

@media screen and (max-width: 1024px) {
  .about .member {
    grid-template-columns: 1fr; }
  .about .member img {
    margin-bottom: 0.75em; }
  .about .section .description {
    grid-template-columns: 1fr; }
  .about .section ul {
    column-count: 2; } }

@media screen and (max-width: 768px) {
  .about .section ul {
    column-count: 1; } }

.contactContainer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: black; }

.contact {
  overflow: scroll;
  box-sizing: border-box;
  background: linear-gradient(black calc(100% - 100px), #181818);
  transition: width 0.7s ease-in-out, height 0.7s ease-in-out;
  z-index: 1000; }
  .contact h1,
  .contact h2 {
    font-family: fira-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    /* bold */
    font-size: 1.25em;
    margin: 0; }
  .contact h2 {
    line-height: 1.8em;
    margin: 0;
    padding-bottom: 0.6em;
    border-bottom: 1px solid #808080;
    margin-bottom: 1.4em; }
  .contact .info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
    max-height: 100vh;
    opacity: 1;
    background: black;
    color: white;
    overflow: hidden; }
  .contact a {
    color: white; }
  .contact a:hover {
    text-decoration: none; }
  .contact > div {
    color: white;
    padding-left: 10vw;
    padding-right: 2em;
    padding-top: 3em;
    padding-bottom: 1em; }
    .contact > div > .scaleText {
      font-size: 0.85em; }
  .contact > div:last-of-type {
    padding-left: 10vw;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 6em; }
  .contact .form {
    position: relative; }
    .contact .form .overlay {
      position: absolute;
      background-color: black;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding-left: 10vw;
      padding-right: 2em;
      padding-top: 3em;
      padding-bottom: 1em;
      color: white;
      cursor: pointer; }
      .contact .form .overlay .error, .contact .form .overlay .success {
        font-size: 0.85em;
        margin: 25% 0; }
      .contact .form .overlay .loading {
        width: 6em;
        height: 2em;
        margin: 25% auto; }
        .contact .form .overlay .loading .dot {
          display: inline-block;
          width: 2em;
          height: 2em;
          border-radius: 1em;
          background-color: white;
          animation: scaleInOut 1.5s infinite ease-in-out; }

@keyframes scaleInOut {
  0%, 80%, 100% {
    transform: scale(0); }
  50% {
    transform: scale(1); } }
  .contact .form-section {
    border: none;
    margin: 0.75em 0;
    padding: 0; }
  .contact .form-section .section-label {
    display: block;
    text-transform: uppercase;
    margin-bottom: 0.25em; }
  .contact .form-section .radio-group > input {
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    margin: 0;
    cursor: pointer; }
  .contact .form-section label.radio {
    text-transform: capitalize;
    display: inline-block;
    margin: 0 0.5em;
    margin-right: 0.75em;
    cursor: pointer; }
  .contact .form-section .text {
    font-family: fira-sans-2, sans-serif;
    font-style: normal;
    font-weight: 600;
    /* book */
    width: 100%;
    box-sizing: border-box;
    border: none;
    font-size: 1em;
    padding: 0.25em;
    resize: vertical;
    border-radius: 0; }
  .contact .form-message {
    max-height: 0;
    margin-top: -1em;
    overflow: hidden;
    color: black; }
  .contact .form-message.expanded {
    margin: 0;
    color: white;
    max-height: 100vh; }
  .contact span.bold {
    font-family: fira-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    /* bold */ }
  .contact .form-message p {
    margin: 0;
    margin-bottom: 0.5em;
    font-size: 0.85em; }
  .contact .form-message ul {
    font-size: 0.85em;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .contact .form-message ul li {
    margin-bottom: 0.5em; }
  .contact .form-message ul li:last-of-type {
    margin-bottom: 0; }
  .contact .submit {
    display: inline-block;
    color: white;
    background: black;
    font-size: 1em;
    line-height: 1.5em;
    border: none;
    padding: 0.25em 0.5em;
    text-transform: uppercase;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    cursor: pointer;
    transition: background 0.7s ease-in-out; }
  .contact .submit:hover {
    text-decoration: underline; }

.leaflet-top.leaflet-left {
  left: auto;
  right: 2.5vw;
  top: 1.5rem; }
  .leaflet-top.leaflet-left .leaflet-control-zoom.leaflet-bar.leaflet-control {
    margin: 0; }
  .leaflet-top.leaflet-left .leaflet-control-zoom.leaflet-bar.leaflet-control > a {
    color: black !important; }

.leaflet-control-attribution {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: white !important; }

.leaflet-control-attribution a {
  color: white !important; }

@media screen and (min-aspect-ratio: 4 / 3) {
  .contact.expanded .info {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0; } }

@media screen and (max-width: 1024px) {
  .contactContainer .contact > div > div.scaleText {
    font-size: 0.65em; }
  .leaflet-top.leaflet-left {
    right: 4vw; } }

@media screen and (max-width: 840px) {
  .contactContainer {
    grid-template-columns: unset; }
    .contactContainer .contact > div,
    .contactContainer .contact .form .overlay {
      padding-right: 10vw; }
    .contactContainer .contact > div > div.scaleText {
      font-size: 1em; }
  .leaflet-top.leaflet-left {
    display: none; }
  .leaflet-bottom.leaflet-right {
    right: 0;
    left: 0; }
    .leaflet-bottom.leaflet-right .leaflet-control-attribution {
      width: 100%;
      margin: 0;
      padding: 0;
      text-align: center; } }

@media screen and (max-width: 540px) {
  .contact .form-section .radio-group > input {
    width: 1em;
    height: 1em; } }

@media screen and (min-width: 1440px) {
  .contact .form-section .radio-group > input {
    width: 2em;
    height: 2em; } }

html {
  background: black;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

body {
  font-family: fira-sans-2, sans-serif;
  font-style: normal;
  font-weight: 600;
  /* book */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

a {
  color: #000;
  text-decoration: none; }

img, .project .column {
  animation: fadeIn 1s linear; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.container {
  margin: 0;
  padding: 0;
  font-size: 1.25vw;
  background: white; }

.container.night {
  background: black;
  color: white; }

.container.night a {
  color: #fff; }

.container.night .close img {
  filter: invert(100%); }

.gradient {
  background: linear-gradient(white calc(100% - 100px), #f2f2f2);
  border-bottom: 1px solid #f7f7f7; }

.night .gradient {
  background: linear-gradient(black calc(100% - 100px), #181818);
  border-bottom: 1px solid #0c0c0c; }

.header {
  border-top: 1px solid black;
  background: black;
  position: -webkit-sticky;
  position: sticky;
  z-index: 5;
  top: -1px; }

.column {
  margin: 0 auto;
  position: relative;
  z-index: 1; }

.miniCaps {
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 0.2em; }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  *zoom: 1; }

.footer {
  background: black; }
  .footer img {
    position: absolute;
    width: 100%;
    height: 0.33rem; }
  .footer .copyright {
    padding: 0.75em 2em;
    padding-bottom: 0.5em;
    text-align: right; }
    .footer .copyright span {
      color: white;
      transition: color 0.35s ease-in-out; }

@media screen and (max-width: 1024px) {
  .container {
    font-size: 2vw; } }

@media screen and (max-width: 768px) {
  .container {
    font-size: 2.5vw; } }

.callout {
  position: relative;
  height: calc(100vw * 9 / 21);
  max-height: 80vh;
  z-index: 2; }
  .callout .background {
    width: 100%;
    height: calc(100vw * 9 / 21);
    max-height: 80vh;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
    animation: fadeIn 2s linear; }
  .callout .tagline {
    width: 65vw;
    margin: 0 auto;
    text-align: center;
    line-height: 2em;
    font-size: 4vw;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .callout .tagline span {
      background-color: rgba(255, 255, 255, 0.7);
      color: #808080;
      display: inline;
      padding: 0.25rem;
      box-decoration-break: clone;
      text-align: center;
      -webkit-box-decoration-break: clone; }

.night .callout .tagline span {
  background-color: rgba(0, 0, 0, 0.7); }

.night .miniNav .tooltip {
  background-color: #000; }

.careers {
  width: 80vw;
  margin: 0 auto;
  padding: 0;
  padding-top: 3em;
  padding-bottom: 6em; }
  .careers h1 {
    font-family: fira-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.4em;
    margin: 0; }
  .careers strong {
    font-weight: bold;
    font-family: fira-sans, sans-serif; }