@font-face {
  font-family: "Sabon_n7";
  src: url("../fonts/715e0d80-e882-47bb-8c8f-f741c701f43f.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Sabon";
  src: url("../fonts/715e0d80-e882-47bb-8c8f-f741c701f43f.eot?#iefix");
  src: url("../fonts/715e0d80-e882-47bb-8c8f-f741c701f43f.eot?#iefix") format("eot"), url("../fonts/95b1e5f7-abb3-4a8d-9565-de2d74d6cb98.woff") format("woff"), url("../fonts/e87f6725-3ee0-4447-93d6-6323a452d273.ttf") format("truetype"), url("../fonts/bb1e6ff9-4f2a-4e71-8755-7c1704c0016c.svg#bb1e6ff9-4f2a-4e71-8755-7c1704c0016c") format("svg");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "Futura_n3";
  src: url("../fonts/2c660b2f-8645-4b31-89fe-1c017eeb5e85.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/2c660b2f-8645-4b31-89fe-1c017eeb5e85.eot?#iefix");
  src: url("../fonts/2c660b2f-8645-4b31-89fe-1c017eeb5e85.eot?#iefix") format("eot"), url("../fonts/e80a3257-e0b2-4f7c-b4e8-0167c9adb7c0.woff") format("woff"), url("../fonts/5426d3ca-532d-4e71-a700-0a22917df569.ttf") format("truetype"), url("../fonts/67fb5232-0944-4965-8594-ed2972b84950.svg#67fb5232-0944-4965-8594-ed2972b84950") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "Futura_o4";
  src: url("../fonts/012343a3-dfcf-47cb-a171-b6562b97cd14.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/012343a3-dfcf-47cb-a171-b6562b97cd14.eot?#iefix");
  src: url("../fonts/012343a3-dfcf-47cb-a171-b6562b97cd14.eot?#iefix") format("eot"), url("../fonts/5fa88c9e-299a-498c-8ddf-5dbcde40259f.woff") format("woff"), url("../fonts/7a20f98f-c2a2-4899-819d-30535f0434c0.ttf") format("truetype"), url("../fonts/c8dbed6c-5c46-48bf-ac93-386f24720591.svg#c8dbed6c-5c46-48bf-ac93-386f24720591") format("svg");
  font-weight: 400;
  font-style: oblique; }

@font-face {
  font-family: "Futura_o5";
  src: url("../fonts/8f76015c-aba7-43cd-abd7-29232fdf55db.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/8f76015c-aba7-43cd-abd7-29232fdf55db.eot?#iefix");
  src: url("../fonts/8f76015c-aba7-43cd-abd7-29232fdf55db.eot?#iefix") format("eot"), url("../fonts/ea7214b2-6c5b-4a62-89df-594ba0d45149.woff") format("woff"), url("../fonts/80472e52-6fc5-47d3-a433-23eb82a4805d.ttf") format("truetype"), url("../fonts/c4b00a23-6dcd-4ac3-9c83-07e77640bdd4.svg#c4b00a23-6dcd-4ac3-9c83-07e77640bdd4") format("svg");
  font-weight: 500;
  font-style: oblique; }

@font-face {
  font-family: "Sabon_i4";
  src: url("../fonts/72d35842-98bb-422e-8e0a-686bfbabb630.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Sabon";
  src: url("../fonts/72d35842-98bb-422e-8e0a-686bfbabb630.eot?#iefix");
  src: url("../fonts/72d35842-98bb-422e-8e0a-686bfbabb630.eot?#iefix") format("eot"), url("../fonts/a9baeb23-afc5-4d93-bf9f-b83fd44a2220.woff") format("woff"), url("../fonts/bc89f8d2-4ac8-4c99-aa40-a31cea6d7b5a.ttf") format("truetype"), url("../fonts/6bde6158-cef2-4c4f-b120-4e8b482c742d.svg#6bde6158-cef2-4c4f-b120-4e8b482c742d") format("svg");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Sabon_n4";
  src: url("../fonts/d30018fa-c2be-4921-a779-0a9b8db54fe7.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Sabon";
  src: url("../fonts/d30018fa-c2be-4921-a779-0a9b8db54fe7.eot?#iefix");
  src: url("../fonts/d30018fa-c2be-4921-a779-0a9b8db54fe7.eot?#iefix") format("eot"), url("../fonts/d93bebe4-cefa-455e-8b51-eaae50be173e.woff") format("woff"), url("../fonts/7849e7c1-08a0-4e13-a6cd-d2900c236af5.ttf") format("truetype"), url("../fonts/d1246e5a-1d35-4bc9-b785-d05e0408a757.svg#d1246e5a-1d35-4bc9-b785-d05e0408a757") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Futura_o3";
  src: url("../fonts/3df40436-6074-4f91-b510-d634b2151e8a.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/3df40436-6074-4f91-b510-d634b2151e8a.eot?#iefix");
  src: url("../fonts/3df40436-6074-4f91-b510-d634b2151e8a.eot?#iefix") format("eot"), url("../fonts/1d09eebb-0bae-4073-881b-7a0e0e8e88ef.woff") format("woff"), url("../fonts/cd531335-acc1-4537-a7bf-95f8d4ccdf95.ttf") format("truetype"), url("../fonts/46a3f4db-5fa7-4322-bb01-8427b461fd8c.svg#46a3f4db-5fa7-4322-bb01-8427b461fd8c") format("svg");
  font-weight: 300;
  font-style: oblique; }

@font-face {
  font-family: "Futura_n4";
  src: url("../fonts/57a6731b-fa5c-4c8a-bea8-e2f1a287f309.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/57a6731b-fa5c-4c8a-bea8-e2f1a287f309.eot?#iefix");
  src: url("../fonts/57a6731b-fa5c-4c8a-bea8-e2f1a287f309.eot?#iefix") format("eot"), url("../fonts/4d0e252c-d811-4a5d-a7f3-6ad72c6b76f2.woff") format("woff"), url("../fonts/54250d43-02be-4ff9-b802-a4ea104a0611.ttf") format("truetype"), url("../fonts/15c556fc-4608-4b01-8a0d-9c8631c8bd74.svg#15c556fc-4608-4b01-8a0d-9c8631c8bd74") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Futura_n5";
  src: url("../fonts/f0052336-792e-4fcf-8750-fe6d7d5dccba.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/f0052336-792e-4fcf-8750-fe6d7d5dccba.eot?#iefix");
  src: url("../fonts/f0052336-792e-4fcf-8750-fe6d7d5dccba.eot?#iefix") format("eot"), url("../fonts/1b696b29-a6bd-4411-a50f-37fd8a209b36.woff") format("woff"), url("../fonts/a3931c31-5998-4dbd-b7d5-d310e4ed3d60.ttf") format("truetype"), url("../fonts/6779412d-2ea7-4f1a-acfd-f6a527baaee7.svg#6779412d-2ea7-4f1a-acfd-f6a527baaee7") format("svg");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: "Futura_n6";
  src: url("../fonts/23ba0be3-70bf-4659-a442-531d2a2d21e1.eot?#iefix") format("eot"); }

@font-face {
  font-family: "Futura";
  src: url("../fonts/23ba0be3-70bf-4659-a442-531d2a2d21e1.eot?#iefix");
  src: url("../fonts/23ba0be3-70bf-4659-a442-531d2a2d21e1.eot?#iefix") format("eot"), url("../fonts/3f319b0c-7b7f-4315-b8d0-2f4af7d033dd.woff") format("woff"), url("../fonts/6f62d6f4-b1d5-442c-b7f4-a00598f1b20c.ttf") format("truetype"), url("../fonts/19a28699-af7e-410b-8ae3-5330873504bd.svg#19a28699-af7e-410b-8ae3-5330873504bd") format("svg");
  font-weight: 600;
  font-style: normal; }

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  margin: 0 auto;
  background: white;
  overflow-y: scroll; }

body {
  font-family: Futura, sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin: 0 auto;
  max-width: 1220px;
  padding: 10px;
  zoom: 1; }
  body:before, body:after {
    content: "";
    display: table; }
  body:after {
    clear: both; }

h1, h2, h3, h4, b, strong {
  font-weight: normal; }

hr {
  clear: both;
  border: 1px solid;
  border-bottom: none;
  margin: 44px 0; }

p {
  margin: 0; }

p + p {
  margin-top: 22px; }

p + ul {
  margin-top: 22px; }

h1, h2, h3 {
  margin: 0;
  font-size: 14px;
  font-family: Sabon, serif; }

h2 {
  margin: 22px 0 0; }

p + h1, p + h2 {
  margin-top: 22px; }


a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid black; }

body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none; }

html.lightbox-open {
  overflow: hidden; }

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background: white;
  display: none; }

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal; }
  .lightbox .lb-image {
    display: block;
    max-width: inherit; }
  .lightbox a img {
    border: none; }
  .lightbox img {
    max-height: 80vh;
    width: auto !important; }

.lb-outerContainer {
  position: relative;
  background-color: white;
  width: 250px;
  height: 250px;
  margin: 0 auto; }

.lb-container {
  padding: 4px; }

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0; }
  .lb-loader a {
    display: none;
    border-bottom: none; }

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat; }

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10; }

.lb-container > .nav {
  left: 0; }

.lb-nav a {
  outline: none;
  border-bottom: none; }

.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
  font-size: 0.7125em; }

.lb-prev {
  float: left;
  text-align: left; }

.lb-next {
  float: right;
  text-align: right; }

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  width: 100%; }

.lb-data {
  padding: 0 4px; }
  .lb-data .lb-details {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 3.5em;
    font-size: 0.7125em; }
  .lb-data .lb-caption {
    font-size: 13px;
    font-weight: bold;
    line-height: 1em; }
  .lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em; }
  .lb-data .lb-close {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
    background: url(../img/close.png) top right no-repeat;
    text-align: right;
    outline: none;
    border-bottom: none; }
    .lb-data .lb-close:hover {
      cursor: pointer; }

.sub-point {
  display: block; }
  .sub-point code {
    padding: 1px; }

#page-header {
  padding-top: 22px;
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0; }
  @media only screen and (min-width: 1024px) {
    #page-header {
      padding-top: 44px; } }
  #page-header h1 {
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 22px;
    font-size: 48px;
    line-height: 48px; }
    #page-header h1 a {
      border: none;
      display: inline-block;
      text-align: left; }

nav {
  text-align: center; }
  nav h1 {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }

ul#navigation {
  text-align: center;
  padding: 22px 0;
  display: inline; }
  ul#navigation li {
    display: inline;
    margin-right: 12px; }
    ul#navigation li a {
      border-bottom: none; }
      ul#navigation li a:before {
        content: "—";
        color: white;
        color: rgba(255, 255, 255, 0); }
    ul#navigation li:last-child {
      margin-right: 0; }
    ul#navigation li.active a:before, .home ul#navigation li.work a:before {
      color: black; }
  ul#navigation .work {
    display: none; }
  @media only screen and (min-width: 1024px) {
    ul#navigation .about {
      position: absolute;
      top: 116.6px;
      left: 335px;
      left: calc(50% - 355px); }
    ul#navigation .news {
      position: absolute;
      top: 116.6px;
      right: 360px;
      right: calc(50% - 335px); } }
  ul#navigation ol.children {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }

.main .page {
  max-width: 505px;
  margin: 0 auto;
  text-align: left; }
  .main .page h1 {
    margin: 0;
    font-size: 14px;
    font-family: Sabon, serif;
    text-align: left;
    text-transform: uppercase;
    font-style: italic; }
    .main .page h1:before {
      content: "—";
      display: block; }

@media only screen and (min-width: 1024px) { }

.post {
  clear: left;
  text-align: left;
  max-width: 50em;
  margin: 0 auto 44px;
  zoom: 1; }
  .post:before, .post:after {
    content: "";
    display: table; }
  .post:after {
    clear: both; }
  .post h1 {
    margin: 0;
    font-size: 14px;
    font-family: Sabon, serif;
    text-align: left;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 22px; }
    .post h1:before {
      content: "—";
      display: block; }
  @media only screen and (min-width: 1024px) {
    .post .media {
      float: left;
      width: 50%;
      padding-right: 20px; }
    .post .content {
      float: left;
      width: 50%; } }

.project-page .main {
  max-width: 900px; }

.project h1 {
  margin: 0;
  font-size: 14px;
  font-family: Sabon, serif;
  text-align: left;
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 22px;
  max-width: 505px;
  margin: 0 auto; }
  .project h1:before {
    content: "—";
    display: block; }
.project .content {
  max-width: 505px;
  margin: 0 auto; }
.project .images {
  margin-top: 66px; }
.project .image-link {
  border-bottom: none; }
.project .image {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px; }
  .project .image:nth-child(3n+1) {
    clear: left; }
.project .media img {
  max-width: 280px; }

.siblings-nav {
  font-size: 3em;
  clear: left; }

.next-sibling {
  background: url('../img/next.png') top left no-repeat;
  color: rgba(0, 0, 0, 0);
  border-bottom: none;
  height: 50px;
  width: 30px; }

.previous-sibling {
  background: url('../img/prev.png') top right no-repeat;
  color: rgba(0, 0, 0, 0);
  border-bottom: none;
  height: 50px;
  width: 30px; }

@media only screen and (min-width: 1024px) {
  .next-sibling {
    position: fixed;
    top: 50%;
    right: 20px; }
  .previous-sibling {
    position: fixed;
    top: 50%;
    left: 20px; } }

.showcase {
  max-width: 1320px;
  margin-left: -100px; }

.showcase-project {
  margin-bottom: 100px;
  margin-left: 100px;
  position: relative;
  float: left; }
  .showcase-project .overlay {
    display: none; }
  .showcase-project:hover .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 400px;
    display: table;
    background: rgba(255, 255, 255, 0.6); }
  .showcase-project .content-link {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 22px;
    border-bottom: none; }
  .showcase-project .image img {
    max-width: 100%; }

.project-title {
  text-transform: uppercase;
  font-style: italic;
  margin-bottom: 22px; }

.project-blurb p {
  text-indent: 0; }

footer {
  margin: 66px 0 22px;
  text-align: center; }

.main {
  padding-top: 220px;
  margin: 0 auto;
  zoom: 1; }
  .main:before, .main:after {
    content: "";
    display: table; }
  .main:after {
    clear: both; }

.media ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  .media ul img {
    max-width: 100%; }