/* UI COLORS */
div.main {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 1680px;
  width: 100%;
  padding: 10px; }
  @media only screen and (max-width: 1300px) {
    div.main {
      width: 100%; } }

div.project_wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

div.img_wrap {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  div.img_wrap:first-child {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1; }
  div.img_wrap:last-child {
    margin-bottom: 0; }
  div.img_wrap > img {
    display: block;
    width: 100%;
    min-height: 4em;
    background-color: #e3e3e3; }

div.description_wrap {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  width: 100%;
  position: relative;
  padding: 6em 2em;
  text-align: center;
  background-color: #FFFFFF;
  margin-bottom: 10px; }
  @media (max-width: 500px) {
    div.description_wrap {
      padding: 4em 2em; } }
  div.description_wrap > div.description {
    max-width: 650px;
    margin: auto; }
    div.description_wrap > div.description h1, div.description_wrap > div.description h2 {
      font-size: 1.75em;
      line-height: 1.2em;
      text-transform: none;
      color: #1b1b1b;
      font-weight: 500; }
      @media (max-width: 500px) {
        div.description_wrap > div.description h1, div.description_wrap > div.description h2 {
          font-size: 1.5em; } }
    div.description_wrap > div.description p {
      font-size: 1.15em;
      font-weight: 300;
      color: #aaaaaa;
      margin-top: 2em;
      text-align: left;
      margin-bottom: 0; }
      @media (max-width: 500px) {
        div.description_wrap > div.description p {
          font-size: 1em; } }

div.sidebar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 100%;
  width: 127px; }
  @media (max-width: 1550px) {
    div.sidebar {
      display: none; } }

nav.project {
  position: relative;
  width: 127px; }
  nav.project > ul {
    text-align: center;
    font-size: 1em; }
    nav.project > ul > li {
      position: relative;
      display: block; }
      nav.project > ul > li > a {
        height: 127px;
        height: 127px;
        line-height: 127px;
        margin: 0;
        display: block;
        font-size: 0.9em;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        text-decoration: none;
        margin: 0;
        -webkit-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
        background-color: #FFFFFF;
        color: #aaaaaa; }
        nav.project > ul > li > a:focus {
          outline: none;
          box-shadow: none;
          -webkit-box-shadow: none; }
        nav.project > ul > li > a:hover {
          color: #1b1b1b; }
        nav.project > ul > li > a.active {
          background-color: #871b15; }