@font-face { font-family: "JudeBold"; font-weight: normal; font-style: normal;
  src: url(./fonts/Jude-BoldLiningNumbersWeb.eot);
  src: url(./fonts/Jude-BoldLiningNumbersWeb.eot?#iefix) format('eot'),
       url(./fonts/Jude-BoldLiningNumbersWeb.ttf) format('truetype'); }
@font-face { font-family: "JudeMediumItalic"; font-weight: normal; font-style: normal;
  src: url(./fonts/Jude-MediumItalicWeb.eot);
  src: url(./fonts/Jude-MediumItalicWeb.eot?#iefix) format('eot'),
       url(./fonts/Jude-MediumItalicWeb.ttf) format('truetype'); }

html { overflow-x: hidden; }
body { background: #fff; color: #0D1D32; font-size: 2.9em; line-height: 1.35; margin: 1em 0em 0em;
  -webkit-text-size-adjust: 100%;
  font-family: "JudeBold", times, serif; }
@media screen and (max-width: 600px) {
  body { font-size: 2.4em; }
}
@media only screen and (max-device-width: 480px) {
  body { font-size: 1.5em; }
  body p a[data-url]:after { -webkit-transform-origin: 0% 80%; -webkit-transform: scale(0.75, 0.75); }
}
canvas { position: absolute; top: 0; left: 0; }

p { margin: 0em 0em 0.75em;
    -webkit-hyphenate-limit-after: 4;
       -moz-hyphenate-limit-after: 4;
        -ms-hyphenate-limit-after: 4;
            hyphenate-limit-after: 4;
    -webkit-hyphenate-limit-before: 4;
       -mox-hyphenate-limit-before: 4;
        -ms-hyphenate-limit-before: 4;
            hyphenate-limit-before: 4;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto; }
h2 { font-size: 0.5em; font-weight: normal; margin: 0em 0em 0.25em; color: #6A727C; }
h3 { opacity: 0.5; font-size: 0.5em; }
a { color: inherit; text-decoration: none; border-bottom: 0.1em solid;
  -webkit-transition: color 200ms ease-in-out;
     -moz-transition: color 200ms ease-in-out;
       -o-transition: color 200ms ease-in-out;
          transition: color 200ms ease-in-out; }
a:hover {
	color: rgb(0,204,255);
}
a[data-url] { position: relative; display: inline; padding-top: 0.1em; }
a[data-url]:after { content: "↪ " attr(data-url); position: absolute; top: -1em; left: 0; font-size: 0.275em; white-space: nowrap; opacity: 0.4;
  font-family: "JudeMediumItalic"; }

ul { list-style: none; padding: 0; margin: 0; display: inline; }
ul li { margin-bottom: 0.2em; white-space: nowrap; display: inline; }
hr { border-top: 0.1em solid; width: 2em; margin: 1.5em 0em 1.5em 0em; padding: 0em; opacity: 0.2; }

.wrapper { position: relative; z-index: 4; max-width: 17em; margin: 0 auto; padding: 0.25em 0.5em 0em;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 350ms ease-in-out, opacity 350ms ease-in-out;
     -moz-transition:    -moz-transform 350ms ease-in-out, opacity 350ms ease-in-out;
       -o-transition:      -o-transform 350ms ease-in-out, opacity 350ms ease-in-out;
          transition:         transform 350ms ease-in-out, opacity 350ms ease-in-out; }
/* body:after { content: " "; position: absolute; top: 0; height: 180%; margin-left: 3.5em; display: block; border-left: 1px solid #E2E2E2;  } */
.secondary,
.secondary .wrapper { z-index: 1; }

.projects > p > a[href^="#project"]{ counter-increment: project; margin-top: 0em; }
.projects > p > a[href^="#project"]:before { content: counter(project) "."; position: absolute; margin: 2.3em 0em 0em -3em; display: inline-block; font-size: 0.25em; width: 1.3em; height: 1.3em; line-height: 1.2em; text-align: center;
  font-family: "courier new", courier, monospace; font-weight: bold; }
.projects > p > a[href^="#project"]:after { position: absolute; margin-top: -0.3em; content: attr(data-url); font-size: 0.22; letter-spacing: 0.1em; }

.whoiam { line-height: 1.3; margin-top: -0.25em; }

.projects { counter-reset: project; padding: 0em 0em 0.5em; }
.projects h2 { margin-bottom: 0.5em; }
.projects p { margin: 0em 0em 0.5em; }
.projects a { position: relative; line-height: 1.5; padding-bottom: 0.1em; }

.project-navigation { display: block; border-top: 1px dashed #ccc; padding: 0.75em 0em; }
.projects .prev,
.projects .next,
.projects .last-project { float: left; width: 45%; margin-right: 5%; font-size: 0.7em; border-bottom: 0; }

.projects .prev { display: none; }

.projects .prev:hover,
.projects .next:hover { color: rgb(0, 255, 0); }
.projects .prev:before,
.projects .next:before { content: "↓"; position: absolute; margin: 0.5em 0em 0em -1.5em; font-size: 1em;
  font-family: "JudeBold"; }
.projects .prev:before { content: "↑"; }
.projects .prev:after,
.projects .next:after { content: ""; display: none; }

.project:before { content: attr(data-year); position: absolute; top: -7em; font-size: 0.275em; letter-spacing: 1px; color: #6A727C;
  font-family: "JudeMediumItalic"; }

body .back-holder { position: fixed; z-index: 3; top: 0%; left: -30%; height: 100%; width: 20%; cursor: pointer;
  -webkit-transition: left 0ms ease-in-out 0ms;
     -moz-transition: left 0ms ease-in-out 0ms;
       -o-transition: left 0ms ease-in-out 0ms;
          transition: left 0ms ease-in-out 0ms; }
body .back-holder .back { position: absolute; display: inline; top: 40%; left: 15%; font-size: 0.5em; border-bottom: 0; }
body .back-holder:hover .back { color: rgb(0, 255, 0); }
body.open-project .back-holder { left: 0%;
  -webkit-transition: left 250ms ease-in-out 250ms;
     -moz-transition: left 250ms ease-in-out 250ms;
       -o-transition: left 250ms ease-in-out 250ms;
          transition: left 250ms ease-in-out 250ms; }
@media screen and (max-width: 1000px) {
  body .back-holder { width: 12%; }
}
@media screen and (max-width: 810px) {
  body .back-holder { width: 1.2em; }
}

.project { position: absolute; z-index: 7; top: -3.07em; margin-left: 100%; width: 86%; padding-bottom: 1.5em;
  opacity: 0; height: 0; cursor: auto; pointer-events: none;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-transition: margin 200ms ease-in-out;
     -moz-transition: margin 200ms ease-in-out;
       -o-transition: margin 200ms ease-in-out;
          transition: margin 200ms ease-in-out; }
.next-in, .next-out {
  -webkit-transition: opacity 900ms ease-in-out;
     -moz-transition: opacity 900ms ease-in-out;
       -o-transition: opacity 900ms ease-in-out;
          transition: opacity 900ms ease-in-out; }
.project p { font-size: 0.6em; line-height: 1.5; }
.project a { padding-bottom: 0em; }
.project a[data-url]:after { font-size: 0.4em; top: -1.2em; }
.open-project .active-project { height: auto; pointer-events: all; opacity: 1; margin-left: 65%; }
/* iOS fixes */
@media screen and (max-device-width: 480px) {
  .project { display: none; }
  .open-project .active-project { display: block; }
}
@media screen and (max-device-width: 768px) {
  .project { display: none; }
  .open-project .active-project { display: block; }
}
.open-project p, .open-project h2 { opacity: 0.04; }
.open-project .active-project p { opacity: 1; }
.open-project a { pointer-events: none; }
.open-project .active-project a { pointer-events: all; }

.wrapper { max-width: 16.5em; margin: 0 auto;
  -webkit-transition: -webkit-transform 400ms;
     -moz-transition:    -moz-transform 400ms;
       -o-transition:      -o-transform 400ms;
          transition:         transform 400ms;
  -webkit-transition-timing-function: cubic-bezier(0.600,      0, 0.300, 1);
  -webkit-transition-timing-function: cubic-bezier(0.600, -0.300, 0.300, 1.300);
     -moz-transition-timing-function: cubic-bezier(0.600, -0.300, 0.300, 1.300);
      -ms-transition-timing-function: cubic-bezier(0.600, -0.300, 0.300, 1.300);
       -o-transition-timing-function: cubic-bezier(0.600, -0.300, 0.300, 1.300);
          transition-timing-function: cubic-bezier(0.600, -0.300, 0.300, 1.300); }
.open-project .wrapper { cursor: pointer;
  -webkit-transform: translate(-11.51em, 0em);
     -moz-transform: translate(-11.51em, 0em);
       -o-transform: translate(-11.51em, 0em);
          transform: translate(-11.51em, 0em); }

@media screen and (max-width: 1000px) {
  .wrapper { padding-left: 1em; }
  .open-project .active-project { margin-left: 70%; }
  .secondary .contact:before { left: 0.75em; }
}
@media screen and (max-width: 760px) {
  .open-project .wrapper {
    -webkit-transform: translate(-68.9%, 0em);
       -moz-transform: translate(-68.9%, 0em);
         -o-transform: translate(-68.9%, 0em);
            transform: translate(-68.9%, 0em); }
}

.secondary { border-top: 1px dashed #ccc; margin-top: 1em; padding: 0.75em 0em 0.1em; }
.open-project .secondary { border: 0; }
.contact:before { content: "\2709"; position: absolute; left: -0.4em; top: 3em; font-size: 0.45em; color: #6A727C; }
.footer { padding: 0.25em 0em; margin-top: 0.4em; }
.end-notes { width: 78%; margin: 0.5em 0em; padding-bottom: 1em; font-size: 0.3em; color: #6A727C; line-height: 1.8;
  font-family: "courier new", courier, monospace; }

.project video, .project img { width: 100%; border: 1px solid #dfdfdf; background: #dfdfdf; }
.project video.vertical { height: 500px; width: auto; } 

.video-wrapper { opacity: 0; position: relative; display: block; visibility: hidden; width: 112%; margin: 0em 0em 0.5em -5%; max-height: 12em;
  -webkit-transition: opacity 400ms ease-in-out, border 300ms ease-in-out;
     -moz-transition: opacity 400ms ease-in-out, border 300ms ease-in-out;
       -o-transition: opacity 400ms ease-in-out, border 300ms ease-in-out;
          transition: opacity 400ms ease-in-out, border 300ms ease-in-out; }
.play-videos .active-project .video-wrapper { visibility: visible; opacity: 1; }
@media screen and (max-width: 900px) {
  .project .video-wrapper { max-width: 100%; margin-left: 0%; }
}
.video-wrapper figcaption { position: absolute; margin-left: 104%; width: 40%; top: 0em; font-size: 0.275em; color: #9AA1A8;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: "courier new", courier, monospace; }
.video-wrapper figcaption a { border-bottom: 1px solid; }
@media screen and (max-width: 1245px) {
  .video-wrapper { margin-bottom: 1em; }
  .video-wrapper button.restart-video { margin-top: -4.25em; }
  .video-wrapper figcaption { position: static; margin-left: 0; width: auto; top: auto; }
}

@-webkit-keyframes restart {
  0%   { -webkit-transform: translate(0em, 0em); }
  20%  { -webkit-transform: translate(-0.2em, 0em); }
  50%  { -webkit-transform: translate(0.2em, 0em); }
  80%  { -webkit-transform: translate(-0.2em, 0em); }
  100% { -webkit-transform: translate(0em, 0em); }
}
@-moz-keyframes restart {
  0%   { -moz-transform: translate(0em, 0em); }
  20%  { -moz-transform: translate(-0.2em, 0em); }
  50%  { -moz-transform: translate(0.2em, 0em); }
  80%  { -moz-transform: translate(-0.2em, 0em); }
  100% { -moz-transform: translate(0em, 0em); }
}
@-o-keyframes restart {
  0%   { -o-transform: translate(0em, 0em); }
  20%  { -o-transform: translate(-0.2em, 0em); }
  50%  { -o-transform: translate(0.2em, 0em); }
  80%  { -o-transform: translate(-0.2em, 0em); }
  100% { -o-transform: translate(0em, 0em); }
}
@keyframes restart {
  0%   { transform: translate(0em, 0em); }
  20%  { transform: translate(-0.2em, 0em); }
  50%  { transform: translate(0.2em, 0em); }
  80%  { transform: translate(-0.2em, 0em); }
  100% { transform: translate(0em, 0em); }
}
.video-wrapper.bounce {
  -webkit-animation: restart 300ms 1;
     -moz-animation: restart 300ms 1;
       -o-animation: restart 300ms 1;
          animation: restart 300ms 1; }
.video-wrapper button { display: block; position: absolute; margin-top: -3.5em; margin-left: 1em; cursor: pointer; opacity: 0.5;
  background: rgba(0, 0, 0, 0.8); border-radius: 2px; font-size: 0.4em; padding: 0.3em 0.4em 0.1em; border: 0; color: #fff;
  font-family: "courier new", courier, monospace;
  -webkit-transition: opacity 400ms ease-in-out, background 200ms ease-in-out;
     -moz-transition: opacity 400ms ease-in-out, background 200ms ease-in-out;
       -o-transition: opacity 400ms ease-in-out, background 200ms ease-in-out;
          transition: opacity 400ms ease-in-out, background 200ms ease-in-out; }
.video-wrapper button:hover  { background: rgb(0, 255, 0); }
.video-wrapper:hover button { opacity: 1; }