@charset "UTF-8";
/*variables*/
:root {
  --color:white;
  --bg:black;
  --graph-line:50px;
  --line:2px;
  --graph-border:solid var(--line) white;
  --cell-height:40px; }

@font-face {
  font-family: myfont;
  src: url(../fonts/Augusta.ttf); }
* {
  box-sizing: border-box;
  color: var(--color); }

html, body {
  position: relative;
  background-color: var(--bg);
  overflow: hidden; }

img {
  width: 100%;
  height: 100%;
  display: none; }

#graph-wrapper {
  width: 38vw;
  height: 100vh;
  overflow: hidden;
  float: left;
  position: relative; }

.graph {
  position: absolute;
  width: calc(100% + 30px);
  padding-right: 30px;
  height: 100vh;
  overflow-y: scroll;
  float: left; }
  .graph .folder {
    width: calc(100% - 50px);
    float: right;
    position: relative; }
    .graph .folder .item {
      width: calc(100% - 50px);
      height: var(--cell-height);
      position: relative;
      display: block;
      float: right;
      margin-right: 0;
      /*background-color: #666;*/
      /*border-bottom:var(--graph-border);*/
      border-right: var(--graph-border);
      transition: margin-right .1s;
      padding-left: 4px;
      text-transform: uppercase;
      font-family: "Helvetica", sans-serif;
      font-size: 8px;
      text-shadow: 0px 0px 6	px white; }
    .graph .folder .item:hover {
      cursor: pointer;
      background-color: #FD0; }
    .graph .folder .item:last-child {
      border-bottom: none; }
    .graph .folder .item::after {
      content: ' ';
      display: block;
      position: absolute;
      bottom: 0px;
      height: var(--line);
      width: calc(100% - 2px);
      background: linear-gradient(to left, white, rgba(255, 255, 255, 0)); }
    .graph .folder .item:nth-child(2n+2)::after {
      background: linear-gradient(to right, white, rgba(255, 255, 255, 0)); }
    .graph .folder .folder-title {
      display: block;
      width: 50%;
      height: var(--cell-height);
      margin-left: calc(50% - 4px);
      border: none;
      border-bottom: var(--graph-border);
      border-left: var(--graph-border);
      background-color: transparent; }
    .graph .folder .folder-title:hover {
      background-color: transparent; }
    .graph .folder .folder-title::after {
      display: none; }
  .graph .folder:last-child {
    margin-bottom: 2px; }
  .graph .folder-title {
    border-top: var(--graph-border);
    text-align: left;
    height: 40px !important; }
    .graph .folder-title h3 {
      padding-left: 4px;
      text-transform: uppercase;
      font-family: "Helvetica", sans-serif;
      font-size: 8px;
      text-shadow: 0px 0px 6	px white; }
  .graph .exhibition {
    width: calc(100% + 30px); }
    .graph .exhibition p {
      padding-left: 4px;
      text-transform: uppercase;
      font-family: "Helvetica", sans-serif;
      font-size: 8px;
      text-shadow: 0px 0px 6	px white;
      display: block;
      position: absolute;
      right: 0; }
  .graph .exhibition::before {
    content: ' ';
    display: block;
    height: 60px;
    width: calc(100% - 50px);
    float: right;
    border-left: var(--graph-border);
    border-bottom: var(--graph-border); }

#graph-media {
  left: 38vw; }
  #graph-media .folder {
    width: 100%; }
    #graph-media .folder .item {
      height: calc(var(--cell-height) / 2); }

nav {
  display: block;
  position: fixed;
  left: 38%;
  height: 100vh;
  width: 140px;
  text-align: center;
  text-justify: distribute;
  /*-moz-text-align-last: justify; 
  /*text-align-last: justify;*/ }
  nav #title {
    display: inline-block;
    color: black;
    /*transform:rotate(90deg);*/
    transform-origin: top left;
    pointer-events: none;
    margin: calc(.5 * var(--cell-height)) 0; }
    nav #title h2 {
      font-family: sans-serif;
      font-weight: lighter;
      margin: 0;
      font-size: 20px;
      line-height: 16px;
      text-transform: uppercase;
      text-shadow: 0px 0px 10px white;
      /*white-space: nowrap;*/
      transform-origin: top left;
      transform: scale(1, 4); }
  nav img, nav div a img {
    display: block;
    width: 80%;
    margin: 0 auto;
    height: auto; }
  nav img:hover {
    cursor: pointer; }
  nav #bottom {
    display: block;
    position: absolute;
    bottom: 4px;
    width: 100%; }
    nav #bottom svg {
      width: 40%;
      height: auto;
      float: left;
      padding: 20px 10px; }
    nav #bottom svg:last-of-type {
      float: right; }
    nav #bottom svg:hover .cls-1 {
      cursor: pointer;
      fill: #ff97a1; }
    nav #bottom img.arrow .cls-1:hover {
      fill: #F00; }
    nav #bottom a {
      width: 80%;
      display: inline-block;
      padding: 10px 0;
      border-top: none;
      border-bottom: var(--graph-border);
      margin: 0 auto; }
      nav #bottom a img {
        width: 100%; }
    nav #bottom a:first-child {
      border-top: var(--graph-border); }

#content {
  display: block;
  float: left;
  width: calc(62% - 145px);
  margin: calc(2 * var(--line)) 5px var(--line) 140px;
  padding: 0 10px;
  height: calc(100vh - (4 * var(--line)));
  overflow: hidden;
  position: relative;
  background-color: var(--bg);
  white-space: nowrap;
  font-size: 0px;
  transition: height 1s;
  will-change: scroll-position;
  border-top: 8px;
  border-bottom: 8px;
  border-style: double;
  border-color: white; }
  #content .item-wrapper {
    vertical-align: top;
    width: var(--line);
    display: inline-block;
    height: 100%;
    margin: 0 5px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), white);
    background-color: var(--bg);
    transition-property: width;
    transition-duration: .2s;
    -webkit-transition-property: width;
    -webkit-transition-duration: .2s;
    font-size: 22px; }
    #content .item-wrapper .item {
      position: relative;
      width: 100%;
      height: 100%; }
      #content .item-wrapper .item img {
        display: block;
        visibility: hidden;
        transition: height .2s; }
    #content .item-wrapper .item:hover {
      cursor: pointer; }
    #content .item-wrapper .meta {
      display: block;
      position: absolute;
      font-size: 22px;
      padding: 0 10px;
      bottom: 0;
      transform: scale(1, 4); }
  #content .item-wrapper.text .item {
    width: 90%;
    overflow-y: auto;
    padding: 20px; }
    #content .item-wrapper.text .item p {
      margin: 0;
      text-indent: var(--cell-height); }
    #content .item-wrapper.text .item p:last-of-type {
      margin-bottom: var(--cell-height); }
    #content .item-wrapper.text .item h3.title {
      text-align: center;
      font-size: 1em;
      font-weight: inherit;
      border: var(--graph-border);
      padding: 5px;
      margin-bottom: 25px; }
  #content .item-wrapper.video iframe {
    visibility: hidden; }
  #content .item-wrapper:nth-child(2n + 2) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), white); }
  #content .item-wrapper.landscape img {
    width: 100%;
    height: auto; }
  #content .item-wrapper.portrait img {
    height: 0;
    width: auto; }
  #content .item-wrapper.highlight {
    height: 100%;
    background: none;
    background-color: black; }
    #content .item-wrapper.highlight .item img {
      visibility: visible; }
  #content .item-wrapper.landscape.highlight,
  #content .item-wrapper.landscape.focus,
  #content .item-wrapper.video.highlight,
  #content .item-wrapper.video.focus {
    white-space: normal;
    width: 90%; }
    #content .item-wrapper.landscape.highlight .item,
    #content .item-wrapper.landscape.focus .item,
    #content .item-wrapper.video.highlight .item,
    #content .item-wrapper.video.focus .item {
      width: 100%; }
      #content .item-wrapper.landscape.highlight .item .video-wrapper,
      #content .item-wrapper.landscape.focus .item .video-wrapper,
      #content .item-wrapper.video.highlight .item .video-wrapper,
      #content .item-wrapper.video.focus .item .video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        /* 16:9 */
        height: 0; }
        #content .item-wrapper.landscape.highlight .item .video-wrapper iframe,
        #content .item-wrapper.landscape.focus .item .video-wrapper iframe,
        #content .item-wrapper.video.highlight .item .video-wrapper iframe,
        #content .item-wrapper.video.focus .item .video-wrapper iframe {
          visibility: visible;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0; }
  #content .item-wrapper.text.highlight,
  #content .item-wrapper.text.focus {
    white-space: normal;
    width: 90%; }
    #content .item-wrapper.text.highlight .item,
    #content .item-wrapper.text.focus .item {
      background-color: var(--bg);
      width: 100%; }
  #content .item-wrapper.portrait.highlight,
  #content .item-wrapper.portrait.focus {
    width: auto; }
    #content .item-wrapper.portrait.highlight img,
    #content .item-wrapper.portrait.focus img {
      height: 100%; }
  #content .item-wrapper.focus {
    background: linear-gradient(to top, rgba(0, 0, 0, 0), white); }
    #content .item-wrapper.focus .item img {
      visibility: visible; }

#bio {
  position: relative;
  display: block;
  float: left;
  width: calc(62% - 145px);
  height: 0;
  margin: calc(2 * var(--line)) 5px var(--line) 140px;
  transition: height 1s;
  overflow: scroll;
  font-size: 25px;
  font-weight: lighter; }
  #bio h3 {
    text-align: center;
    font-size: 1em;
    font-weight: lighter;
    border: var(--graph-border);
    padding: 5px; }
  #bio p {
    text-indent: var(--cell-height);
    margin: 0; }
  #bio p.year {
    margin-top: 20px; }
  #bio ul {
    padding: 0; }
  #bio li.ex::before {
    content: '⊙';
    margin-right: 10px; }

#bio:after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: var(--graph-border);
  margin-bottom: 2px;
  position: fixed;
  bottom: 2px; }

#bio.open {
  height: calc(100vh - 65px); }

@media screen and (max-width: 1024px) {
  :root {
    --cell-height:20px; }

  #graph-wrapper {
    width: 20%; }

  nav {
    left: 20%; }

  #content {
    width: calc(80vw - 145px);
    /*#items{	*/
    /*}*/ }
    #content .item-wrapper.portrait.highlight,
    #content .item-wrapper.portrait.focus {
      max-width: calc(75vw - 145px); }
      #content .item-wrapper.portrait.highlight .item img,
      #content .item-wrapper.portrait.focus .item img {
        width: 100%;
        height: auto;
        max-height: 100%; } }

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