@font-face {
  font-family: 'Circular';
  src: url("./fonts/CircularStd-Book.otf") format("opentype"); }

@font-face {
  font-family: 'Circular';
  font-style: italic;
  src: url("./fonts/CircularStd-BookItalic.otf") format("opentype"); }

@font-face {
  font-family: 'Circular';
  font-weight: bold;
  src: url("./fonts/CircularStd-Bold.otf") format("opentype"); }

@font-face {
  font-family: 'Circular';
  font-weight: bold;
  font-style: italic;
  src: url("./fonts/CircularStd-BoldItalic.otf") format("opentype"); }

* {
  vertical-align: top;
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: inherit;
  line-height: inherit;
  color: inherit; }

html,
body {
  margin: 0;
  padding: 0;
  color: #000000;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 16px; }

@media (min-resolution: 2dppx) {
  html,
  body {
    font-size: 20px; } }

@media (min-resolution: 3dppx) {
  html,
  body {
    font-size: 24px; } }

.clearfix:before {
  display: table;
  content: " "; }

.nowrap {
  white-space: nowrap; }

.hyphenate {
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }

.inline-block {
  display: inline-block; }

a {
  text-decoration: none; }

p {
  margin: 0 0 1.2em 0; }
  p:last-child {
    margin-bottom: 0; }

h1, h2, h3, h4 {
  font-weight: normal;
  margin: 0 0 12px 0; }

h1 {
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1ex;
  line-height: 1.3;
  margin: 0;
  padding: 13px 0; }

h2 {
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: 1.375rem;
  letter-spacing: 0.1ex;
  line-height: 1.3;
  margin: 0;
  padding: 0 0 8px 0; }

.page-sub h2 {
  padding: 0 0 8px 0; }

h3 {
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1ex;
  line-height: 1.3; }

h4 {
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: 1.375rem;
  letter-spacing: 0.1ex;
  line-height: 1.1;
  margin: 13px 0; }

/*
h4.collapse-toggle {
    cursor: pointer;
    display: table;
    span {
        display: inline-block;
    }
    span:last-child {
        display: none;
        font-size: 24px;
        line-height: 20px;
        margin-left: 8px;
    }
    &.active{
        span:last-child {
            display: inline;
        }
        span:first-child:after {
            content: "";
            display: block;
            height: 2px;
            background-color: #000000;
            margin-top: -2px;
        }
    }
}

div.collapse:before,
div.collapse:after {
    content: ' ';
    display: table;
}
*/
table {
  width: auto;
  border-collapse: collapse;
  border: none; }

tr td {
  width: auto;
  padding-right: 0.27rem;
  border: none;
  padding-bottom: 0.625rem; }
  tr td:first-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap; }
  tr td:last-child {
    padding-right: 0; }
  tr td p {
    margin: 0; }

.tabular-nums {
  font-variant-numeric: tabular-nums; }

header#site_head {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0.5rem;
  right: 0.5rem;
  width: auto;
  white-space: nowrap;
  overflow: visible;
  pointer-events: none; }

main#content_wrap {
  position: absolute;
  z-index: 5;
  top: calc(3rem + 3px);
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  width: auto; }

div#head_center {
  margin: 0.5rem auto 0 auto;
  border: 3px solid #000000;
  height: 2.5rem; }

nav#nav_top {
  position: relative; }

a#top_home {
  pointer-events: all;
  padding: 0.5rem;
  width: 18.125rem;
  display: inline-block;
  border-right: 3px solid #000000;
  /*
    @include bm-font-large;
    display: inline-block;
    padding: 0;
*/ }
  a#top_home h1 {
    font-family: 'Circular', Helvetica, sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.1ex;
    line-height: 1.1;
    margin: 0;
    padding: 0; }
  a#top_home:hover {
    background-color: #000000;
    color: #ffffff; }

nav#menu_left {
  pointer-events: all;
  position: absolute;
  z-index: 20;
  top: 0;
  left: calc(19.125rem);
  right: calc(15.5rem + 6px);
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  background-color: #ffffff;
  display: inline-block; }
  nav#menu_left div.items {
    max-width: calc(100vw - 19.625rem); }

div#nav_top_right {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  height: 0;
  white-space: nowrap; }

nav#menu_right {
  pointer-events: all;
  position: relative;
  display: inline-block;
  width: 10.5rem;
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  background-color: #ffffff;
  display: inline-block; }

.dropdown span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100%); }

.dropdown div.items {
  position: absolute;
  z-index: 19;
  top: 2.5rem;
  height: 0;
  left: -3px;
  min-width: 100%;
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  background-color: #ffffff;
  transition: height 0.3s linear;
  overflow-x: hidden;
  overflow-y: auto; }
  .dropdown div.items div.inner {
    position: relative;
    border-top: 3px solid #000000;
    min-height: calc(100% - 3px);
    background: repeating-linear-gradient(to bottom, white, white 2.5rem, #000000 2.5rem, #000000 calc(2.5rem + 3px)); }
    .dropdown div.items div.inner a {
      font-family: 'Circular', Helvetica, sans-serif;
      font-size: 1.375rem;
      letter-spacing: 0.1ex;
      line-height: 1.1;
      line-height: 1;
      height: 2rem;
      padding: 0.5rem 0.5rem 0 0.5rem;
      overflow: hidden;
      display: block;
      border-bottom: 3px solid #000000; }

.dropdown div.button {
  font-family: 'Circular', Helvetica, sans-serif;
  font-size: 1.375rem;
  letter-spacing: 0.1ex;
  line-height: 1.1;
  position: absolute;
  z-index: 20;
  left: -3px;
  right: -3px;
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  top: 0;
  height: 2rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-bottom: 3px solid #000000; }
  .dropdown div.button:focus {
    outline-width: 0;
    outline: none;
    -webkit-appearance: none; }
  .dropdown div.button:hover + div.items, .dropdown div.button:focus + div.items {
    display: block; }

.dropdown:hover div.items {
  height: calc(100vh - 3rem - 3px); }

a#top_home a:hover, a#top_home a.active, nav#menu_left a:hover, nav#menu_left a.active, nav#menu_right a:hover, nav#menu_right a.active {
  background-color: #000000;
  color: #ffffff; }

div#controls {
  pointer-events: none;
  width: auto;
  display: inline-block; }
  div#controls > * {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-left: 3px solid #000000; }
    div#controls > *:first-child {
      border-left: none; }
  div#controls > a {
    pointer-events: all;
    text-align: center; }
    div#controls > a:before {
      font-family: 'Circular', Helvetica, sans-serif;
      font-size: 2rem;
      letter-spacing: 0.1ex;
      line-height: 1.1;
      padding: 0.5rem; }
    div#controls > a:hover {
      background-color: #000000;
      color: #ffffff; }
    div#controls > a.disabled {
      pointer-events: none; }
    div#controls > a.disabled:before {
      color: #aaaaaa; }
  div#controls a#ctrl_prev:before {
    content: "<"; }
  div#controls a#ctrl_next:before {
    content: ">"; }
  div#controls div#ctrl_plus {
    pointer-events: none;
    opacity: 0;
    /*
        &:before {
            content: "+";
        }
*/ }
  div#controls div#ctrl_nums, div#controls a#ctrl_nums {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-left: 3px solid #000000; }
    div#controls div#ctrl_nums > div, div#controls a#ctrl_nums > div {
      font-family: 'Circular', Helvetica, sans-serif;
      font-size: 1rem;
      letter-spacing: 0.1ex;
      line-height: 1.5;
      line-height: 1.1;
      text-align: center;
      display: block;
      height: 1.125rem; }
      div#controls div#ctrl_nums > div:first-child, div#controls a#ctrl_nums > div:first-child {
        border-bottom: 3px solid #000000; }

/*
a#proj_prev,
a#proj_next {
    position: fixed;
    top: calc(50% - 24px);
    bottom: 0;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    &:after {
        content: "\2190";
        font-size: 24px;
        vertical-align: -48%;
    }
    transition: top 0.3s ease-in-out;
}
a#proj_prev {
    left: 0;
    &:after {
        content: "\2190";
    }
}
a#proj_next {
    right: 0;
    &:after {
        content: "\2192";
    }
}

@media all and (max-width: 1120px) {
    a#proj_prev, a#proj_next {
        width: 32px;
        height: 32px;
    }
}
@media all and (max-width: 960px) {
    a#proj_prev, a#proj_next {
        display: none;
    }
}
*/
div#page_content,
div#part_content {
  position: relative;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 3px solid #000000; }

div#part_content div#project_info {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 100%; }
  div#part_content div#project_info div#plus_button {
    position: absolute;
    z-index: 100;
    top: calc(-2.5rem - 6px);
    right: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid transparent; }
    div#part_content div#project_info div#plus_button:before {
      content: "+";
      font-family: 'Circular', Helvetica, sans-serif;
      font-size: 2rem;
      letter-spacing: 0.1ex;
      line-height: 1.1;
      padding: 0.5rem 0.6875rem;
      pointer-events: none; }
    div#part_content div#project_info div#plus_button:hover {
      background-color: #000000;
      color: #ffffff; }
  div#part_content div#project_info div#info_container {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 33%;
    height: 0;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    transition: height 0.3s linear;
    background-color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto; }
    div#part_content div#project_info div#info_container:hover, div#part_content div#project_info div#info_container:focus {
      height: calc(100vh - 3.75rem - 3px); }
    div#part_content div#project_info div#info_container div#info_text {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap; }
      div#part_content div#project_info div#info_container div#info_text div {
        padding: 0.75rem 0.9375rem; }
        div#part_content div#project_info div#info_container div#info_text div:first-child {
          border-bottom: 3px solid #000000; }
  div#part_content div#project_info div#plus_button:focus {
    outline-width: 0;
    outline: none;
    -webkit-appearance: none; }
  div#part_content div#project_info div#plus_button:focus + div#info_container {
    height: calc(100vh - 3.5rem - 6px); }

div#page_content {
  overflow-x: hidden;
  overflow-y: auto; }
  div#page_content div.content-items {
    margin-right: -3px; }
  div#page_content div.content-item {
    width: calc(50% - 1.3125rem);
    display: inline-block;
    /*
        float: left;
        clear: none;
*/
    margin: -3px 0 0 -3px;
    outline: 3px solid #000000;
    outline-offset: -3px;
    padding: 0.75rem;
    white-space: normal;
    /*
        &:before, &:after {
            content: " ";
            display: table;
            clear: both;
        }
    */ }
  div#page_content div.text {
    margin-bottom: 0;
    font-family: 'Circular', Helvetica, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1ex;
    line-height: 1.5;
    columns: 18.75rem 2;
    column-gap: 20px; }
    div#page_content div.text * {
      font-family: 'Circular', Helvetica, sans-serif;
      font-size: 1rem;
      letter-spacing: 0.1ex;
      line-height: 1.5; }
    div#page_content div.text.inline-right {
      width: calc(100% - 17.5rem);
      float: right; }
    div#page_content div.text.inline-left {
      width: calc(100% - 17.5rem);
      float: left; }

/*
div.project-previews {
    display: flex;
    flex-flow: row wrap;

    justify-content: space-between;
    align-items: stretch;
    
    a.project-preview {
        width: calc(50% - 20px);
        
        margin-bottom: 32px;
        
        div.img-wrap {
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;

            &:before {
                content: "";
                padding-bottom: 75%;
                float: left;
            }
            &:after {
                content: "";
                display: table;
                clear: both;
            }
            
            img {
                width: 100%;
                height: auto;
            }
        }
        
        div.title {
            @include bm-font;
            margin: 6px 0 0 0;
            * {
                @include bm-font;
            }
            span.year {
                font-variant-numeric: tabular-nums;
            }
        }
        div.title-add {
            margin-top: 12px;
        }
    }
}

@media all and (max-width: 760px) {
    div.project-previews {
        a.project-preview {
            width: 100%;
            div.img-wrap {
                width: 100%;
                overflow: hidden;
                display: block;
                align-items: inherit;
    
                &:before {
                    padding-bottom: 0;
                }
                &:after {
                    content: "";
                    display: table;
                    clear: both;
                }
                
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}
@media all and (max-width: 600px) {
    div.project-previews {
        margin: 0 -20px;
        a.project-preview {
            div.title, div.title-add {
                margin-left: 20px;
                margin-right: 20px;
            }
        }
    }
}
*/
/*
div.parts-list {
    margin: 24px 0;
    div.list-item {
        margin: 20px 0;
        a.title {
            @include bm-font-large;
            * {
                @include bm-font-large;
            }
        }
        div.title {
            @include text-large;
            text-transform: uppercase;
            color: #999999;
            * {
                color: inherit;
            }
        }
        a.title, div.title {
            div.inline-block {
                width: calc(100% - 86px);
            }
            * {
                display: inline-block;
                padding: 0;
            }
        }
        div.tags {
            padding: 4px 0 8px 0;
            white-space: nowrap;
            span.tabular-nums {
                @include text-large;
                margin-right: 1px;
                color: transparent;
            }
            div.inline-block {
                width: calc(100% - 86px);
                white-space: normal;
            }
            a {
                margin-top: -10px;
                margin-right: 16px;
                display: inline-block;
                padding: 14px 0;
                @include text-nav;
            }
        }
    }
    a:hover {
        color: #999999;
        span, div {
            color: #999999;
        }
    }
}
*/
/*
    Content with Images or Slideshow...
*/
/*
div.images {
    margin-bottom: 20px;
    div.image {
        margin-bottom: 20px;
        img {
            width: 100%;
            height: auto;
        }
        div.caption {
            @include text-large;
            * {
                @include text-large;
            }
            p {
                margin: 0;
            }
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    &.small-right {
        width: 22.5rem;
        float: right;
    }
    &.small-left {
        width: 22.5rem;
        float: left;
    }
}
*/
/*
div#part_content {
    position: relative;
    margin: 0 auto 0 auto;
    padding: 0 2.5rem;

    div#part_head {
        background-color: #ffffff;
        a#top_back {
            position: absolute;
            top: 0;
            left: 2.5rem;
            display: table;
            @include text-nav;
            margin: 28px 0 16px 0;
            text-transform: uppercase;
            span.icon {
                display: none;
                position: relative;
                top: -12px;
                font-size: 28px;
                -webkit-tap-highlight-color: transparent;
            }
        }
        h1 {
            text-align: center;
        }
    }
    
    div.anchor {
        position: relative;
        top: -54px;
    }
    div.content-item {
        margin-bottom: 0;
        &:after {
            content: " ";
            display: table;
        }
    }
    h1 {
        padding: 16px 0 12px 0;
        margin: 0 200px;
    }
}
*/
@media all and (max-width: 760px) {
  /*
    div#part_content {
        div#part_head {
            a#top_back {
                span.title {
                    display: none;
                }
                span.icon {
                    display: inline;
                }
            }
            h1 {
                margin: 0 50px;
                -ms-hyphens: auto;
                -moz-hyphens: auto;
                -webkit-hyphens: auto;
                hyphens: auto;
            }
        }
    }
*/ }

div.slideshow div.slide {
  background-color: #ffffff;
  display: flex;
  flex-flow: row wrap; }
  div.slideshow div.slide div.image {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    text-align: center;
    /*
            div.caption {
                position: relative;
                padding: 12px 0 20px 0;
                div.number {
                    display: none;
                    position: absolute;
                    right: 0;
                    bottom: -38px;
                    margin: 13px 0;
                    letter-spacing: 0;
                    @include text-nav;
                }
                p {
                    margin: 0;
                }
                * {
                    @include text-large;
                }
            }
*/ }
    div.slideshow div.slide div.image img {
      width: auto;
      height: auto;
      max-height: calc(100vh - 10rem);
      max-width: calc(100% - 5rem);
      padding: 2.5rem;
      margin: auto; }
    div.slideshow div.slide div.image div.caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: auto;
      padding: 5px; }
      div.slideshow div.slide div.image div.caption * {
        font-family: 'Circular', Helvetica, sans-serif;
        font-size: 1rem;
        letter-spacing: 0.1ex;
        line-height: 1.5; }
  div.slideshow div.slide.slide-2 div.image, div.slideshow div.slide.slide-4 div.image {
    width: 50%; }
    div.slideshow div.slide.slide-2 div.image:nth-child(even):before, div.slideshow div.slide.slide-4 div.image:nth-child(even):before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      border-left: 3px solid #000000; }
  div.slideshow div.slide.slide-4 div.image img {
    max-height: calc(50vh - 10rem); }
  div.slideshow div.slide.slide-4 div.image:nth-child(3):before, div.slideshow div.slide.slide-4 div.image:nth-child(4):before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 3px solid #000000; }

div.slideshow div.overlay {
  position: absolute;
  z-index: 7;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }
  div.slideshow div.overlay div.left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    cursor: url("./img/cursor_prev_64.svg") 32 32, w-resize;
    -webkit-tap-highlight-color: transparent; }
  div.slideshow div.overlay div.right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    cursor: url("./img/cursor_next_64.svg") 32 32, e-resize;
    -webkit-tap-highlight-color: transparent; }

div.slideshow.js-done div.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: inherit; }

div.slideshow.js-done div.overlay {
  display: block; }

@media all and (max-width: 960px) {
  /*
    div#head_center {
        padding: 0 20px;
    }
    div#page_content,
    div#part_content {
        padding: 0 20px;
    }
    div#part_content {
        div#part_head {
            a#top_back {
                left: 20px;
            }
        }
    }
*/
  div.slideshow div.overlay div.left {
    left: -1.5rem; }
    div.slideshow div.overlay div.left:after {
      left: 0.375rem; }
  div.slideshow div.overlay div.right {
    right: -1.5rem; }
    div.slideshow div.overlay div.right:after {
      right: 0.375rem; } }

@media all and (max-width: 760px) {
  /*
    h1, h2, a#top_home, a#top_right {
        font-size: 19px;
    }
*/
  div.parts-list div.list-item a.title, div.parts-list div.list-item div.title {
    font-size: 1.1875rem; }
    div.parts-list div.list-item a.title *, div.parts-list div.list-item div.title * {
      font-size: 1.1875rem; }
  div.parts-list div.list-item .title div.inline-block {
    width: calc(100% - 4.25rem); }
  div.parts-list div.list-item div.tags span.tabular-nums {
    font-size: 1.1875rem; }
  div.parts-list div.list-item div.tags div.inline-block {
    width: calc(100% - 4.75rem); }
  /*
    div.slideshow {
        div.slide {
            div.caption * {
                font-size: 19px;
            }
        }
    }
*/
  div.images.small-right {
    float: none; }
  div.images.small-left {
    float: none; }
  div.text.inline-right {
    width: 100%;
    float: none;
    margin: 0 0 1.25rem 0; }
  div.text.inline-left {
    width: 100%;
    float: none;
    margin: 0 0 1.25rem 0; } }

@media all and (max-width: 600px) {
  /*
    nav#nav_top {
        padding: 8px 0;
        a {
            padding: 8px 0;
        }
    }
    div#page_content {
        div.anchor {
            position: relative;
            top: 0;
        }
    }
*/
  /*
    div#part_content {
        &.head-fixed {
            div#part_head {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                height: auto;
            }
        }
        div#part_head {
            a#top_back {
                left: 20px;
            }
        }
    }
*/
  td {
    display: block;
    padding-right: 0; }
    td:first-child {
      padding-bottom: 0; }
  div.slideshow {
    margin: 0 -1.25rem;
    width: calc(100% + 2.5rem); }
    div.slideshow div.slide div.caption {
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
      /*
                margin-left: 20px;
                margin-right: 20px;
                div.number {
                    padding-right: 16px;
                }
*/ }
    div.slideshow div.overlay div.left {
      left: 0; }
      div.slideshow div.overlay div.left:after {
        content: none; }
    div.slideshow div.overlay div.right {
      right: 0; }
      div.slideshow div.overlay div.right:after {
        content: none; } }

@media all and (max-width: 520px) {
  div.parts-list div.list-item a.title span.tabular-nums, div.parts-list div.list-item div.title span.tabular-nums {
    display: block; }
  div.parts-list div.list-item div.tags span.tabular-nums {
    display: none; }
  div.parts-list div.list-item div.tags div.inline-block {
    width: 100%; }
  /*
    div#part_content {
        div.content-item:last-child {
            margin-bottom: 13px;
            transition: margin-bottom 0.3s linear;
            .collapsed {
                margin-bottom: 20px;
            }
        }
    }
*/
  div.images {
    margin: 0 -1.25rem;
    width: calc(100% + 2.5rem); }
    div.images div.image div.caption {
      margin-left: 1.25rem;
      margin-right: 1.25rem; }
    div.images.small-right {
      width: 100%;
      float: none;
      margin: 0 0 1.25rem 0; }
    div.images.small-left {
      width: 100%;
      float: none;
      margin: 0 0 1.25rem 0; } }

a#preview_hint {
  position: fixed;
  z-index: 99;
  bottom: 8px;
  right: 8px;
  background-color: #ff2222;
  padding: 5px 8px 8px 8px;
  border: 1px solid #cc0000;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: M6-Pressura, sans-serif;
  text-align: center; }
  a#preview_hint div {
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7); }