@charset "UTF-8";
/* ============================================================
/* KEY VALUES
/* ============================================================

Gold: #936C35;
Cool Gray: #efefef;
Off-White: #FBFAF6;
Green 1: #141408;
Green 2: #212316;
Green 3: #2F301A;
Green 4: #5A5F41;

*/
/* ============================================================
/* Font Declarations
/* ============================================================ */
@font-face {
  font-family: "PitchWeb";
  src: url("/assets/fonts/PitchWeb-Medium.woff2") format("woff2"),
    url("/assets/fonts/PitchWeb-Medium.woff") format("woff");
}
@font-face {
  font-family: "DiaWeb";
  src: url("/assets/fonts/Dia-Regular.woff") format("woff");
}
@font-face {
  font-family: "DiaWeb";
  font-weight: bold;
  src: url("/assets/fonts/Dia-Black.woff") format("woff");
}
/* ============================================================
/* General Ruleset
/* ============================================================ */
/* ------------------------------------------------------------
/* General Declarations
/* ------------------------------------------------------------ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: #936c35;
  color: #efefef;
}

::-moz-selection {
  background-color: #936c35;
  color: #fbfaf6;
}

html,
body {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: DiaWeb, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1em;
  color: #212316;
  background-color: #fbfaf6;
  overflow-x: hidden !important;
  background-size: 100px 100px;
}

main,
div.footerimgwrap,
div.abouthero {
  background-image: url("/assets/images/bg.jpg");
  background-size: 100px 100px;
}

/* ------------------------------------------------------------
/* Typography
/* ------------------------------------------------------------ */
h2 {
  text-transform: uppercase;
  margin: 1rem 0 0 0;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-family: DiaWeb, Helvetica, Arial, sans-serif;
  font-weight: bold;
}

a {
  color: #212316;
}

a:hover {
  color: #936c35;
}

body.project main a {
  color: #fbfaf6;
}

body.project ul.credits span.nametext a {
  -webkit-font-smoothing: subpixel-antialiased;
}

/* ============================================================
/* LAYOUT
/* ============================================================ */
/* ------------------------------------------------------------
/* The Gutter
/* ------------------------------------------------------------ */
div.gutter {
  display: none;
}

div.gutter.mid {
  display: block;
  margin: 0 auto;
  padding: 4rem 0;
  font-family: PitchWeb, Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  width: 100%;
  height: 20rem;
  background: url("/assets/images/h-bare.svg") no-repeat 50% 50%;
  background-size: calc(30vh - 5rem);
  text-align: center;
  display: flex;
  align-items: center;
}

div.gutter.mid div {
  max-width: 20em;
  margin: 0 auto;
}

@media (min-width: 700px) {
  div.gutter,
  div.gutter.mid {
    display: block;
    font-family: PitchWeb, Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    position: sticky;
    position: -webkit-sticky;
    width: 30vw;
    height: 30vw;
    left: calc(50% - 15vw);
    /* top: calc(50% - 15vw - 2rem); */
    top: calc(50% - 180px);
    background: url("/assets/images/h-bare.svg") no-repeat 50% 50%;
    background-size: calc(40vh - 8rem);
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
  }

  /* Accommodate the vertical space occupied by middle column */
  ul.thumbgrid {
    margin-top: -28vw !important;
  }

  div.gutter div {
    transform: rotate(90deg);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
  }

  div.gutter div p {
    text-align: center;
    width: 100%;
  }
}
/* Hide all gutter contents if window is short */
@media (max-height: 300px) {
  div.gutter {
    display: none;
  }
}
/* Hide caption if window is not tall enough for rotated text */
@media (max-height: 500px) {
  div.gutter p {
    display: none;
  }
}
/* Limit H in background and caption if window is very wide */
@media (min-height: 600px), (min-width: 1400px) {
  div.gutter,
  div.gutter.mid {
    background-size: 175px;
  }
}
@media (min-width: 1400px) {
  ul.thumbgrid {
    margin-top: -330px !important;
  }

  div.gutter,
  div.gutter.mid {
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px + 2rem);
  }
}
/* ------------------------------------------------------------
/* Navigation
/* ------------------------------------------------------------ */
header[role="banner"] {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 999;
}

nav {
  background-color: #fbfaf6;
  padding: 1rem;
  text-align: center;
}

nav a {
  font-family: PitchWeb, Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 23.5%;
  text-align: center;
  text-decoration: none;
  color: #212316;
}

nav a span {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

nav a.active span {
  padding-bottom: 3px;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.25);
}

body.project nav a.active span {
  border-color: rgba(255, 255, 255, 0.25);
}

nav a.logo {
  font-family: DiaWeb, Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #141408;
  /* Green 1 */
  text-decoration: none;
  font-size: 16px;
  width: 100%;
  margin-bottom: 0.5rem;
}

nav a:hover,
nav a.logo:hover {
  color: #936c35;
}

@media (min-width: 700px) {
  nav {
    padding: 1.5rem 2rem calc(1.5rem - 2px) 2rem;
  }

  nav div {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    max-width: 40rem;
  }

  nav a {
    font-size: 14px;
  }

  nav a:nth-child(1) {
    max-width: 8rem;
    font-size: 20px;
    order: 3;
  }

  nav a:nth-child(2) {
    order: 1;
  }

  nav a:nth-child(3) {
    order: 2;
  }

  nav a:nth-child(4) {
    order: 4;
  }

  nav a:nth-child(5) {
    order: 5;
  }
}
/* ------------------------------------------------------------
/* Thumbnail Grid (for staff list, projects, etc.)
/* ------------------------------------------------------------ */
ul.thumbgrid {
  list-style: none;
  padding: 2rem 0 0 0;
  margin: 0;
}

ul.thumbgrid a {
  text-decoration: none;
  color: #212316;
  transition: 0.2s all ease;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

ul.thumbgrid a img {
  transition: 0.2s all ease;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

ul.thumbgrid a:hover {
  color: #936c35;
}

ul.thumbgrid a:hover img {
  filter: brightness(0.4);
}

ul.thumbgrid img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

ul.thumbgrid strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  display: block;
}

ul.thumbgrid li {
  width: 70%;
  margin-bottom: 4rem;
}

ul.thumbgrid li:nth-child(odd) a > strong {
  padding-left: 2rem;
}

ul.thumbgrid li:nth-child(even) {
  margin-left: 30%;
}

ul.thumbgrid div.portraitimg {
  position: relative;
}

ul.thumbgrid div.portraitimg div.text {
  position: absolute;
  margin: 0;
  padding-left: 0 !important;
  text-align: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #fbfaf6;
  text-shadow: 0 0 5px #000;
  display: flex;
  align-items: center;
}

ul.thumbgrid div.portraitimg div.text strong {
  width: 100%;
}

ul.thumbgrid div.portraitimg div.text:after {
  content: "";
  border: 3px double #936c35;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: 12px;
}

ul.thumbgrid a:hover div.portraitimg div.text {
  opacity: 1;
}

ul.thumbgrid li.decor img {
  mix-blend-mode: multiply;
}

@media (min-width: 700px) {
  ul.thumbgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  ul.thumbgrid li {
    margin-bottom: 6rem;
  }

  ul.thumbgrid li:nth-child(odd),
  ul.thumbgrid li:nth-child(even) {
    width: 35%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
  }

  ul.thumbgrid li:nth-child(4n - 1),
  ul.thumbgrid li:nth-child(4n) {
    align-self: baseline;
  }

  ul.thumbgrid:not(.staff) li:nth-child(4n - 1),
  ul.thumbgrid:not(.staff) li:nth-child(4n) {
    margin-top: -10vw;
  }

  ul.thumbgrid li:nth-child(odd) a > strong {
    padding-left: 2rem;
  }

  ul.thumbgrid strong {
    font-size: 14px;
  }
}
@media (min-width: 1440px) {
  ul.thumbgrid {
    max-width: 1400px;
    margin: 0 auto;
  }

  ul.thumbgrid li:nth-child(odd) a > strong {
    padding-left: 0;
  }

  ul.thumbgrid:not(.staff) li:nth-child(4n - 1),
  ul.thumbgrid:not(.staff) li:nth-child(4n) {
    margin-top: -9rem;
  }
}
/* ------------------------------------------------------------
/* Section Divisions
/* ------------------------------------------------------------ */
section {
  padding: 2rem;
  margin: 0 auto;
  max-width: 1400px;
}

section.reverse {
  display: flex;
  flex-wrap: wrap;
}

section.reverse div {
  width: 100%;
}

section.reverse div:first-of-type {
  order: 2;
}

section h2 {
  font-size: 16px;
  color: #936c35;
}

section h3 {
  font-family: PitchWeb, Courier, monospace;
  font-size: 14px;
  font-weight: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  line-height: 1.5;
}

section p {
  font-size: 16px;
  line-height: 1.5;
}

section.block h2 {
  font-size: 12px;
  color: #212316;
  margin-bottom: 0;
}

section.block h2 + p {
  margin-top: 0.5rem;
}

section > div img {
  width: 100%;
}

section div p:first-of-type {
  text-indent: 0;
}

a.button {
  display: inline-block;
  background-color: #212316;
  color: #fbfaf6;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
}

a.button:hover {
  background-color: #936c35;
}

img.leftcolimg {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
}

@media (min-width: 700px) {
  section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  main section:first-of-type {
    margin-top: -25vw;
  }

  section.reverse {
    align-items: flex-end;
  }

  section.reverse div:first-of-type {
    order: 1;
  }

  section.reverse div:nth-of-type(2) {
    order: 2;
  }

  section > div {
    width: calc(50% - 15vw) !important;
    margin-bottom: 10rem;
  }

  section > div.only {
    margin-bottom: 0;
  }

  section > div:first-of-type:not(.notsticky) {
    position: sticky;
    position: -webkit-sticky;
    top: 7rem;
  }
}
@media (min-width: 1400px) {
  section > div {
    width: calc(50% - 160px) !important;
  }

  main section:first-of-type {
    margin-top: -20rem;
  }
}
/* ------------------------------------------------------------
/* Footer
/* ------------------------------------------------------------ */
footer {
  background-color: #fbfaf6;
  padding: 2rem;
  font-family: PitchWeb, Courier, monospace;
  font-size: 12px;
  line-height: 24px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

footer div {
  max-width: 1400px;
  margin: 0 auto;
}

footer div.copyright {
  background: url("/assets/images/h-green.svg") 0 0.25rem no-repeat;
  background-size: 2.5rem 2.5rem;
  padding-left: 4rem;
}

body.project footer div.copyright {
  background-image: url("/assets/images/h.svg");
}

footer p {
  margin: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

footer a {
  color: #212316;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

footer a:hover {
  color: #936c35;
}

@media (min-width: 800px) {
  footer {
    font-size: 14px;
  }

  footer > div {
    display: flex;
    align-items: baseline;
  }

  footer > div > div:first-child {
    width: 25%;
  }

  footer > div > div:last-child {
    width: 75%;
  }

  footer > div > div:nth-child(2) {
    display: flex;
    padding-right: 1rem;
  }

  h2 {
    font-size: 14px;
  }
}
@media (min-width: 1000px) {
  footer > div > div {
    width: 50% !important;
  }
}
/* ------------------------------------------------------------
/* Social Icons
/* ------------------------------------------------------------ */
div.social a {
  display: inline-block;
  margin-right: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem;
}

div.social a:first-of-type {
  margin-left: -0.5rem;
}

div.social a svg {
  width: 100%;
  max-width: 1rem;
}

/* ============================================================
/* PAGE SPECIFIC STYLES
/* ============================================================ */
/* ------------------------------------------------------------
/* Homepage
/* ------------------------------------------------------------ */
body.home div.hero {
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  height: calc(100vh - 5.25rem);
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #000;
  overflow: hidden;
  position: relative;
}

body.home div.hero img {
  margin: 0 auto;
  min-width: 120px;
  width: 20vw;
  max-width: 225px;
  z-index: 50;
}

body.home div.hero iframe.vidbg {
  box-sizing: border-box;
  height: 80vw;
  position: absolute;
  left: 50%;
  top: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
}

@media (max-width: 700px) {
  body.home div.hero img {
    width: 80px;
  }

  body.home ul.thumbgrid li.decor {
    display: none;
  }

  body.home ul.thumbgrid li,
  body.home ul.thumbgrid li:nth-child(odd) {
    width: 100%;
    max-width: 35rem;
    margin: 0 auto;
    padding: 2rem;
  }

  body.home ul.thumbgrid li:nth-child(odd) a > strong {
    padding-left: 0;
  }
}
@media (min-width: 700px) {
  body.home div.hero {
    height: calc(100vh - 4.5rem);
  }
}
/* ------------------------------------------------------------
/* Staff Page
/* ------------------------------------------------------------ */
ul.staff,
ul.staffprojectlist {
  padding-bottom: 1px;
  /* on small VPs, this prevents the footer from pulling too far up on profile pages
  without projects added. I have no clue why it works. */
}

ul.staffprojectlist li:first-child {
  margin: 0 auto 4rem auto;
  width: 100%;
  max-width: 30rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 700px) {
  ul.staffprojectlist li:first-child {
    padding-left: 2rem;
    padding-right: 0;
    width: 35%;
  }
}
ul.staffprojectlist li:first-child div.portrait {
  display: block;
  margin: 0 auto;
}

@media (min-width: 700px) {
  ul.staffprojectlist li:first-child {
    margin-left: 0;
    margin-right: 0;
  }

  ul.staffprojectlist li:first-child div.portrait {
    margin: 0;
  }

  ul.staffprojectlist li:nth-child(2):not(.decoration) {
    margin-top: 13.5rem;
  }
}
@media (min-width: 1440px) {
  ul.staffprojectlist li:first-child {
    padding-left: 0;
  }
}
/* Hide no-projects decoration image on small viewports, show on big ones */
ul.staffprojectlist li.decoration {
  display: none;
}

@media (min-width: 700px) {
  ul.staffprojectlist li.decoration {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 10rem;
  }
}
ul.staffprojectlist li:first-child p {
  font-size: 1rem;
  line-height: 1.5;
}

ul.staffprojectlist li:first-child h2 {
  color: #936c35;
  text-align: center;
}

@media (min-width: 700px) {
  ul.staffprojectlist li:first-child h2 {
    text-align: left;
  }
}
ul.staffprojectlist li:first-child div.portrait {
  max-width: 10rem;
  margin-bottom: 1.5rem;
  position: relative;
}

ul.staffprojectlist li:first-child div.portrait:after {
  content: "";
  border: 3px double #936c35;
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  top: 6px;
}

/* Specific styles to show title under name if device does not
support hovers (for example, iOS devices) */
ul.thumbgrid strong.nonhoverrole {
  display: none;
}

@media (hover: none) {
  ul.thumbgrid strong.nonhoverrole {
    display: block;
    font-size: 12px;
    color: rgba(33, 35, 22, 0.33);
  }

  ul.thumbgrid div.portraitimg div.text strong {
    display: none;
  }
}
@media (hover: hover) {
  ul.thumbgrid strong.nonhoverrole {
    display: none;
  }

  ul.thumbgrid div.portraitimg div.text strong {
    display: block;
  }
}
/* David's Audio Player styling */
@media (max-width: 700px) {
  ul.thumbgrid li.audio {
    width: 100%;
    margin: 4rem auto;
    z-index: 1;
  }

  strong {
    padding-left: 2rem;
  }
}
ul.thumbgrid li.audio .playlist-container {
  background-size: cover;
  background-position: top;
  padding: 15px;
}
ul.thumbgrid li.audio strong {
  margin-top: 1rem;
}

.playlist h3,
.playlist a {
  display: block;
  font-size: 1rem;
  margin: 10px auto;
}
.playlist .audio-track,
.playlist a {
  color: #fbfaf6;
  fill: #fbfaf6;
  text-decoration: none;
  font-family: PitchWeb, Courier, monospace;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.playlist .audio-track:hover,
.playlist a:hover {
  fill: #936c35;
  color: #936c35;
}
.playlist .audio-track:focus,
.playlist a:focus {
  text-decoration: none;
}
.playlist .audio-track:first-of-type,
.playlist a:first-of-type {
  margin-top: 4.5em;
}
.playlist .activeTrack {
  fill: #936c35;
  color: #936c35;
  -webkit-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.playlist .activeTrack:before {
  -webkit-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
  content: "";
  height: auto;
  top: -0.28em;
  left: -15px;
  right: -15px;
  position: absolute;
  height: 1.75em;
  background: url("/assets/images/white-bg-60.png");
  z-index: -1;
}
.playlist .activeTrack:hover {
  fill: #936c35;
  color: #936c35;
}

.footer-player {
  transform: translateZ(0);
  position: fixed;
  width: 100%;
  background: #fbfaf6;
  font-family: PitchWeb, Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  box-shadow: 0 -1px 0 0 #eae9e8;
  -webkit-transition: bottom 0.5s ease;
  -moz-transition: bottom 0.5s ease;
  -o-transition: bottom 0.5s ease;
  transition: bottom 0.5s ease;
}

@media (min-width: 700px) {
  .footer-player {
    padding: 1.5rem 2rem calc(1.5rem - 2px) 2rem;
    font-size: 14px;
  }
}
.track-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 1440px) {
  .track-info {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    height: 28px;
  }
}
@media (max-width: 700px) {
  .track-info {
    padding: 10px;
  }

  .title {
    margin-left: auto;
  }
}
.title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-family: DiaWeb, Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.title #currentTitle {
  margin: 0;
}

.controls {
  display: flex;
  height: 1rem;
  margin-right: 25px;
}
.controls svg:hover {
  fill: #936c35;
  cursor: pointer;
}
.controls img {
  max-height: 1rem;
  margin-right: 5px;
  width: 1rem;
}

@media (max-width: 700px) {
  .controls svg {
    height: 1.25rem;
  }
}
.track {
  display: flex;
  width: 66%;
  height: 1rem;
  margin-right: 25px;
}

@media (max-width: 700px) {
  .track {
    width: auto;
  }
}
audio#audioPlayer {
  width: 100%;
  display: none;
}

input[type="range"]#trackProgressBar {
  -webkit-appearance: none;
  margin: 18px 15px;
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 700px) {
  input[type="range"]#trackProgressBar {
    display: none;
  }
}
input[type="range"]#trackProgressBar:focus {
  outline: none;
  border: none;
}

input[type="range"]#trackProgressBar::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: white;
  border-radius: 1.3px;
  border: 10px solid white;
  border-right: none;
  border-left: none;
}

input[type="range"]#trackProgressBar::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 10px;
  border-radius: 0px;
  background: gray;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

input[type="range"]#trackProgressBar:focus::-webkit-slider-runnable-track {
  background: white;
}

input[type="range"]#trackProgressBar::-moz-range-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: white;
  border-radius: 1.3px;
  border: 10px solid white;
  border-right: none;
  border-left: none;
}

input[type="range"]#trackProgressBar::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 10px;
  border-radius: 0px;
  background: gray;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

input[type="range"]#trackProgressBar::-ms-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  animate: 0.2s;
  background: white;
  border-color: white;
  border-width: 10px 0;
  color: transparent;
}

input[type="range"]#trackProgressBar::-ms-fill-lower {
  background: white;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

input[type="range"]#trackProgressBar::-ms-fill-upper {
  background: white;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

input[type="range"]#trackProgressBar::-ms-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 10px;
  border-radius: 0px;
  background: gray;
  cursor: pointer;
  margin-top: 0px;
}

input[type="range"]#trackProgressBar:focus::-ms-fill-lower {
  background: white;
}

input[type="range"]#trackProgressBar:focus::-ms-fill-upper {
  background: white;
}

/* ------------------------------------------------------------
/* Project Page
/* ------------------------------------------------------------ */
/* Color invert for main elements */
body.project {
  /* background-image: url("/assets/images/bgdark.jpg"); */
  background-color: #141408;
  color: #fbfaf6;
}

body.project main {
  background-image: none;
}

body.project footer,
body.project footer a {
  background-color: transparent;
  color: #fbfaf6;
}

body.project footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.project div.gutter {
  background-image: url("/assets/images/h-bare-green.svg");
  background-position-y: 60%;
}

.videowrapper {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin: 5rem auto;
}

.videowrapper:first-of-type {
  margin-top: 0;
}

h2.projectname,
h2.otherprojects {
  font-size: 14px;
  color: #936c35;
  padding: 2rem;
  text-align: center;
}

h2.otherprojects {
  margin-top: 3rem;
  color: #fbfaf6;
}

ul.credits {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.credits li {
  text-align: center;
  padding: 0 2rem 1rem 2rem;
}

ul.credits span {
  display: block;
}

ul.credits span.roletext {
  letter-spacing: 0.05em;
  font-size: 12px;
  font-family: DiaWeb, Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

ul.credits span.nametext,
ul.credits span.nametext p {
  font-family: PitchWeb, Courier, monospace;
  font-size: 14px;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

@media (min-width: 700px) {
  div.projectinfo {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5rem 1rem;
  }

  h2.projectname {
    position: absolute;
    width: 30vw;
    padding: 0 2rem;
    left: calc(50% - 15vw);
    margin: 0;
  }

  h2.otherprojects {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 30vw;
    font-family: PitchWeb, Courier, monospace;
    letter-spacing: 0.1em;
  }

  main > h2.otherprojects {
    display: none;
  }

  ul.credits {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  ul.credits li {
    width: 50%;
  }

  ul.credits li:nth-child(odd) {
    text-align: right;
    padding-right: 15vw;
  }

  ul.credits li:nth-child(even) {
    text-align: left;
    padding-left: 15vw;
  }

  body.project div.gutter {
    margin-top: 3rem;
    padding-top: 2rem;
  }

  body.project ul.thumbgrid.projects {
    margin-top: -30vw !important;
  }
}
@media (min-width: 1400px) {
  ul.credits li:nth-child(odd) {
    padding-right: 210px;
  }

  ul.credits li:nth-child(even) {
    padding-left: 210px;
  }

  h2.projectname {
    left: calc(50% - 180px);
    width: 360px;
  }

  body.project ul.thumbgrid.projects {
    margin-top: -320px !important;
  }

  body.project nav {
    margin-bottom: 3rem;
  }
}
body.project ul.projects {
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

div.secondaryvideo {
  margin: 3rem 0 0 0;
}

body.project ul.thumbgrid a strong {
  color: #fbfaf6;
}

body.project ul.thumbgrid a:hover > strong {
  color: #936c35;
}

/* ------------------------------------------------------------
/* About Page
/* ------------------------------------------------------------ */
section div h2,
section div h3 {
  text-align: center;
}

div.aboutherowrap img {
  width: 100%;
  max-width: 1400px;
  display: block;
  margin: 0 auto;
}

div.footerimgwrap img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
}

@media (min-width: 700px) {
  section div h2,
  section div h3 {
    text-align: left;
  }

  div.aboutherowrap img {
    /*padding: 3rem; max-width: 700px;*/
    padding-bottom: 3rem;
  }
}
@media (min-width: 1400px) {
  div.aboutherowrap {
    padding-top: 3rem;
  }

  div.aboutherowrap img {
    padding-top: 0;
  }
}
/* ------------------------------------------------------------
/* Book Us
/* ------------------------------------------------------------ */
@media (max-width: 700px) {
  div.contactblurb,
  div.social {
    text-align: center;
  }
}
/* ------------------------------------------------------------
/* Video fixes on mobile
/*
/* Long story here, but basically there's an incompatibility where
   Plyr.js on mobile hides its controls to use the native iOS
   video player controls. Combine this with what it does to hide
   Vimeo embed’s controls and Vimeo's native suppression of those
   native iOS controls Plyr wants you to use and it all means that
   on mobile the user sees no controls at all. Bad.

   These styles are to adjust the size of the plyr box back to
   defaults so the Vimeo controls are visible on mobile.
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------
/* Homepage Nav @ Bottom Fixes for iOS devices
/*
/* This is a known bug and Apple has specified that they will
/* not fix it due to Safari’s functionality. (It changes the
/* viewport height to toggle Safari’s bottom toolbar.)
/*
/* To overcome this, create media queries that target the width
/* height, and orientation of iOS devices. Not optimal, but
/* really no other way to solve the problem.
/*
/* iOS Resolution Quick Reference: http://www.iosres.com/
/* ------------------------------------------------------------ */
/* iPhone X: Portrait */
@media all and (device-width: 375px) and (device-height: 812px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(812px - 16.4rem);
  }
}
/* iPhone X: Landscape */
@media all and (device-width: 812px) and (device-height: 375px) and (orientation: landscape) {
  body.home div.hero {
    opacity: 0.5;
    height: calc(375px - 16.4rem);
  }
}
/* iPhone 8 Plus: Portrait */
@media all and (device-width: 414px) and (device-height: 736px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(736px - 12.5rem);
  }
}
/* iPhone 8 Plus: Landscape */
@media all and (device-width: 736px) and (device-height: 414px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(414px - 12.5rem);
  }
}
/* iPhone 8: Portrait */
@media all and (device-width: 375px) and (device-height: 667px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(667px - 12.5rem);
  }
}
/* iPhone 8: Landscape */
@media all and (device-width: 667px) and (device-height: 375px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(375px - 12.5rem);
  }
}
/* iPhone SE: Portrait */
@media all and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(568px - 12.5rem);
  }
}
/* iPhone SE: Landscape */
@media all and (device-width: 568px) and (device-height: 320px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(320px - 12.5rem);
  }
}
/* iPad Mini, iPad Air, iPad Pro 9": Portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(1024px - 9rem);
  }
}
/* iPad Mini, iPad Air, iPad Pro 9": Landscape */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(768px - 9rem);
  }
}
/* iPad Pro 10.5": Portrait */
@media all and (device-width: 834px) and (device-height: 1112px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(1112px - 9rem);
  }
}
/* iPad Pro 10.5": Landscape */
@media all and (device-width: 834px) and (device-height: 1112px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(834px - 9rem);
  }
}
/* iPad Pro 12.9": Portrait */
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
  body.home div.hero {
    height: calc(1366px - 9rem);
  }
}
/* iPad Pro 12.9": Landscape */
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: landscape) {
  body.home div.hero {
    height: calc(1024px - 9rem);
  }
}
.hidden {
  display: none;
}

.show-mobile {
  display: none;
}

@media (max-width: 700px) {
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }
}

/*# sourceMappingURL=main.css.map */