@charset "UTF-8";
@font-face {
  font-family: 'authentic';
  src: url(/fonts/AUTHENTIC-Sans.woff); }

html {
  background-color: white; }

body {
  background-color: white;
  font-size: 16px; }
  body.menu--open {
    overflow: hidden; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'authentic';
  line-height: 1.3;
  font-weight: normal; }

a {
  color: inherit;
  text-decoration: none; }

ul {
  list-style: none; }

img {
  width: 100%;
  display: block; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

@media (min-width: 769px) {
  .filter {
    display: flex;
    justify-content: center; }
    .filter--none .filter--none {
      background-color: black; }
    .filter--outline .filter--outline {
      background-color: black; }
    .filter--blur .filter--blur {
      background-color: black; }
    .filter--inverse .filter--inverse {
      background-color: black; }
    .filter--tilt .filter--tilt {
      background-color: black; }
    .filter--shadow .filter--shadow {
      background-color: black; }
    .filter--rotate .filter--rotate {
      background-color: black; }
    .filter--blackout .filter--blackout {
      background-color: white; }
    .filter__item {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      border: 1px solid black;
      margin: .25em 5px 0 5px;
      cursor: pointer; }
      .filter__item:hover {
        background: white; }
      .filter__item--on {
        background: white; }
    .filter--outline .projects__item img, .filter--outline .projects__item iframe,
    .filter--outline .project__item img,
    .filter--outline .project__item iframe,
    .filter--outline .design__image img,
    .filter--outline .design__image iframe,
    .filter--outline .about__image img,
    .filter--outline .about__image iframe {
      opacity: 0; }
    .filter--outline .projects__item:hover img, .filter--outline .projects__item:hover iframe,
    .filter--outline .project__item:hover img,
    .filter--outline .project__item:hover iframe,
    .filter--outline .design__image:hover img,
    .filter--outline .design__image:hover iframe,
    .filter--outline .about__image:hover img,
    .filter--outline .about__image:hover iframe {
      opacity: 1; }
    .filter--outline .project img {
      opacity: 0; }
      .filter--outline .project img:hover {
        opacity: 1; }
    .filter--blur .projects__item img, .filter--blur .projects__item iframe,
    .filter--blur .project__item img,
    .filter--blur .project__item iframe,
    .filter--blur .design__image img,
    .filter--blur .design__image iframe,
    .filter--blur .about__image img,
    .filter--blur .about__image iframe {
      filter: blur(30px); }
    .filter--blur .projects__item:hover img, .filter--blur .projects__item:hover iframe,
    .filter--blur .project__item:hover img,
    .filter--blur .project__item:hover iframe,
    .filter--blur .design__image:hover img,
    .filter--blur .design__image:hover iframe,
    .filter--blur .about__image:hover img,
    .filter--blur .about__image:hover iframe {
      filter: blur(0); }
    .filter--blur .project img {
      filter: blur(30px); }
      .filter--blur .project img:hover {
        filter: blur(0); }
    .filter--inverse .projects__item img, .filter--inverse .projects__item iframe,
    .filter--inverse .project__item img,
    .filter--inverse .project__item iframe,
    .filter--inverse .design__image img,
    .filter--inverse .design__image iframe,
    .filter--inverse .about__image img,
    .filter--inverse .about__image iframe {
      filter: invert(1); }
    .filter--inverse .projects__item:hover img, .filter--inverse .projects__item:hover iframe,
    .filter--inverse .project__item:hover img,
    .filter--inverse .project__item:hover iframe,
    .filter--inverse .design__image:hover img,
    .filter--inverse .design__image:hover iframe,
    .filter--inverse .about__image:hover img,
    .filter--inverse .about__image:hover iframe {
      filter: invert(0); }
    .filter--inverse .project img {
      filter: invert(1); }
      .filter--inverse .project img:hover {
        filter: invert(0); }
    .filter--tilt .projects__item img, .filter--tilt .projects__item iframe,
    .filter--tilt .design__image img,
    .filter--tilt .design__image iframe,
    .filter--tilt .project__item img,
    .filter--tilt .project__item iframe,
    .filter--tilt .about__image img,
    .filter--tilt .about__image iframe {
      transform: perspective(75vw) rotateY(35deg) rotateX(-35deg) rotateZ(-5deg); }
    .filter--tilt .projects__item:hover img, .filter--tilt .projects__item:hover iframe,
    .filter--tilt .design__image:hover img,
    .filter--tilt .design__image:hover iframe,
    .filter--tilt .project__item:hover img,
    .filter--tilt .project__item:hover iframe,
    .filter--tilt .about__image:hover img,
    .filter--tilt .about__image:hover iframe {
      transform: none; }
    .filter--tilt .project img {
      transform: perspective(75vw) rotateY(35deg) rotateX(-35deg) rotateZ(-5deg); }
      .filter--tilt .project img:hover {
        transform: none; }
    .filter--tilt .project__header img {
      pointer-events: none;
      transform: perspective(75vw) rotateY(35deg) rotateX(-35deg) rotateZ(-5deg); }
    .filter--tilt .project__header:hover img {
      transform: none; }
    .filter--shadow .projects__item img, .filter--shadow .projects__item iframe,
    .filter--shadow .project__item img,
    .filter--shadow .project__item iframe,
    .filter--shadow .design__image img,
    .filter--shadow .design__image iframe,
    .filter--shadow .about__image img,
    .filter--shadow .about__image iframe {
      box-shadow: 0px 0px 100px 0px black; }
    .filter--shadow .projects__item:hover img, .filter--shadow .projects__item:hover iframe,
    .filter--shadow .project__item:hover img,
    .filter--shadow .project__item:hover iframe,
    .filter--shadow .design__image:hover img,
    .filter--shadow .design__image:hover iframe,
    .filter--shadow .about__image:hover img,
    .filter--shadow .about__image:hover iframe {
      box-shadow: none; }
    .filter--shadow .project__header img {
      pointer-events: none;
      box-shadow: 0px 0px 100px 0px black; }
    .filter--shadow .project__header:hover img {
      box-shadow: none; }
    .filter--shadow .project img {
      box-shadow: 0px 0px 100px 0px black; }
      .filter--shadow .project img:hover {
        box-shadow: none; }
    .filter--rotate .projects__item img, .filter--rotate .projects__item iframe,
    .filter--rotate .project__item img,
    .filter--rotate .project__item iframe,
    .filter--rotate .design__image img,
    .filter--rotate .design__image iframe,
    .filter--rotate .about__image img,
    .filter--rotate .about__image iframe {
      transform: rotate(180deg); }
    .filter--rotate .projects__item:hover img, .filter--rotate .projects__item:hover iframe,
    .filter--rotate .project__item:hover img,
    .filter--rotate .project__item:hover iframe,
    .filter--rotate .design__image:hover img,
    .filter--rotate .design__image:hover iframe,
    .filter--rotate .about__image:hover img,
    .filter--rotate .about__image:hover iframe {
      transform: none; }
    .filter--rotate .project img {
      transform: rotate(180deg); }
      .filter--rotate .project img:hover {
        transform: none; }
    .filter--rotate .project__header img {
      pointer-events: none;
      transform: rotate(180deg); }
    .filter--rotate .project__header:hover img {
      transform: none; }
    .filter--blackout div {
      background-color: black; }
    .filter--blackout .nav {
      background-color: black; }
    .filter--blackout img, .filter--blackout iframe {
      opacity: 0; }
      .filter--blackout img:hover, .filter--blackout iframe:hover {
        opacity: 1; }
    .filter--blackout .filter__item {
      border: 1px solid white; } }

main {
  background-color: white;
  position: relative; }

.nav {
  width: 100%;
  position: fixed;
  margin: 10px;
  padding: 10px 1em 8px 1em;
  width: calc(100% - 20px);
  display: flex;
  background-color: white;
  mix-blend-mode: difference;
  z-index: 101; }
  .nav__left a, .nav__center a, .nav__right a {
    color: black; }
    @media (max-width: 768px) {
      .nav__left a, .nav__center a, .nav__right a {
        display: block; } }
    .nav__left a:hover, .nav__center a:hover, .nav__right a:hover {
      color: blue; }
  .nav__center {
    width: 20%; }
  .nav__left, .nav__right {
    width: 40%; }
  .nav__center {
    text-align: center; }
    @media (max-width: 768px) {
      .nav__center {
        display: none; } }
  .nav__right {
    text-align: right; }
    .nav__right a {
      margin-left: 1em; }
  .nav__mobile {
    display: none; }
  @media (max-width: 768px) {
    .nav__left {
      width: 50%;
      z-index: 101; }
    .nav__right {
      display: none; }
    .nav__mobile {
      display: block; } }

.mobile-nav__button, .mobile-nav__list {
  position: fixed;
  padding: 12px 10px 7px 10px; }

.mobile-nav__button {
  display: none;
  color: white;
  mix-blend-mode: difference;
  top: 10px;
  right: 10px;
  padding: 9px 10px 7px 10px;
  z-index: 101; }
  @media (max-width: 768px) {
    .mobile-nav__button {
      display: block; } }
  .mobile-nav__button::before {
    content: "⬤"; }
  .menu--open .mobile-nav__button {
    padding: 10px 10px 7px 10px;
    mix-blend-mode: normal; }
    .menu--open .mobile-nav__button::before {
      content: "◯";
      font-size: 1.1em; }

.mobile-nav__list {
  visibility: hidden;
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  transition: opacity .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch; }
  .menu--open .mobile-nav__list {
    visibility: visible;
    opacity: 1; }
  .mobile-nav__list a {
    color: white;
    flex-grow: 1;
    display: block;
    border: 1px solid white;
    padding: 12px 10px 9px 10px;
    margin-bottom: 6px; }
    .mobile-nav__list a:first-of-type {
      margin-top: 43px; }
    .mobile-nav__list a.bottom {
      text-align: right; }

.projects__image,
.project__image,
.project__video,
.project__header,
.design__image,
.about__image {
  border: 1px solid black; }

.projects,
.project,
.about,
.design {
  padding: 52px 5px 5px 5px; }

.projects {
  display: flex;
  flex-wrap: wrap; }
  .projects__item {
    display: block;
    width: 50%;
    padding: 5px; }
    .projects__item:nth-of-type(even) {
      text-align: right; }
    @media (max-width: 768px) {
      .projects__item {
        width: 100%; } }
  .projects__title {
    padding-top: 10px; }
  .projects__image {
    height: 35vw; }
    @media (max-width: 768px) {
      .projects__image {
        height: 70vw; } }
    .projects__image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.project__header {
  margin: 5px 5px 10px 5px;
  height: 90vh; }
  @media (max-width: 768px) {
    .project__header {
      height: 55vh; } }
  .project__header img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.project__info {
  display: flex;
  margin: 5px; }
  @media (max-width: 768px) {
    .project__info {
      flex-direction: column;
      padding: 1rem; } }

.project__video {
  height: 56.5vw;
  padding-bottom: 1px; }

.project__images {
  display: flex;
  flex-wrap: wrap; }

.project__item {
  width: 50%;
  padding: 5px; }
  .project__item--video {
    width: 100%; }
    .project__item--video iframe {
      display: block;
      width: 100%;
      height: 100%; }
      @media (min-width: 769px) {
        .project__item--video iframe {
          object-fit: cover; } }
  @media (max-width: 768px) {
    .project__item {
      width: 100%; } }

.project__info {
  border: 1px solid black; }

.project__title, .project__description {
  width: 50%;
  margin: 1rem 1rem 3em 1rem;
  font-size: 2em; }
  @media (max-width: 768px) {
    .project__title, .project__description {
      margin: 10px 0 1em 0;
      width: 100%;
      font-size: 1.25em; } }

.design {
  display: flex;
  flex-wrap: wrap; }
  .design__item {
    display: block;
    width: 33.33333%;
    padding: 5px; }
    @media (max-width: 768px) {
      .design__item {
        width: 100%; } }

.about {
  display: flex; }
  @media (max-width: 768px) {
    .about {
      flex-direction: column; } }
  .about__image {
    width: 50%;
    margin: 5px; }
  .about__info {
    width: 50%;
    margin: 5px;
    display: flex;
    flex-direction: column; }
    .about__info > div {
      flex: 1; }
  .about__image, .about__info {
    width: calc(100% - 10px);
    flex: 1; }
  .about__description {
    margin-bottom: 1rem; }
  .about__description, .about__links {
    border: 1px solid black;
    padding: 1rem; }
  .about__image img {
    object-fit: cover; }
  .about__links li:not(:last-of-type) {
    margin-bottom: 1em; }