/* Reset ======= */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Base ======== */
body {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet', sans-serif;
  background: #efebe3;
  color: #52463c;
}

p {
  font-size: 2.5em;
  width: 22.5em;
  text-align: justify;
}

p {
  line-height: 1.5em;
}

p span, .ext-link {
  white-space: pre;
  color: #52463c;
  background: #dad2c2;
  padding: 0 0.1em;
  border-radius: 0.1em;
  text-decoration: none;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
}

p span:hover, .contact p span, .ext-link:hover {
  cursor: pointer;
  background: #52463c;
  color: #fcfcfc;
}

::selection {
  background: #52463c;
  color: #f0f0f0;
}

::-moz-selection {
  background: #52463c;
  color: #f0f0f0;
}

/*p span::-moz-selection, 
.ext-link::-moz-selection,*/
.icon::-moz-selection,
.icon-social::-moz-selection
 {
  background: rgba(0,0,0,0);
  color: inherit;
}

/* Layout ====== */
body, html {
  overflow-x: hidden;
}

.wrapper {  
  position: relative;
  width: 150%;
  height: 100%;
}

.nav-wrapper {
  float: left;
  margin-left: -14em;
  margin-right: -1.0em;

  width: 15em;
  height: 4000px;

  z-index: 10;

  font-weight: 400;  

  -webkit-transition: margin 0.5s ease;
  -moz-transition: margin 0.5s ease;
  -o-transition: margin 0.3s ease;
  transition: margin 0.5s ease;
}

.nav-wrapper:hover, .open {
  margin-left: 0;
}

.content {
  float: left;
  position: relative;
  width: 66.666667%;  /*  = 100 * 100 / 150  */  
}

/* Module */
.nav {
  position: fixed;
  z-index: 20;
  width: 15em;
  height: 100%;

  background: #dad2c2;

  -webkit-transition: left 0.5s ease;
  -moz-transition: left 0.5s ease;
  -o-transition: left 0.3s ease;
  transition: left 0.5s ease;
}

.nav a {
  display: block;
  text-decoration: none;
  color: #111;
}

.nav .sub-nav h4 {
  padding-left: 1.5em;
}

.block {
  height: 600px;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.centered {
  display: inline-block;
  vertical-align: middle;
}

.nav-item, .filter-title {
  float: left;
  width: 100%;
  position: relative; 
}

.nav-item {
  
  opacity: 0.4;
  list-style: none;

  background: #eae2d2;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.nav .nav-item:hover {
  opacity: 1.0;
  cursor: pointer;
}

.item-title {
  padding: 1.0em;
}

progress {

  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;

  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  right: -3.0em;
  
  border: none;

  width: 3.0em;
  height: 20.0em;


  background: rgba(0,0,0,0);
  color: #52463c;  /* for IE */
  
  opacity: 0.8;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

progress::-ms-fill {
    border: none;
}

progress:hover {
  opacity: 0.2;
}

progress::-moz-progress-bar {
  background: #52463c; 
}

progress::-webkit-progress-bar {
  -webkit-appearance: none;
  background: rgba(0,0,0,0);
}

progress::-webkit-progress-value {
  background: #52463c; 
}

.filtered .nav-item, .filtered:hover .nav-item {
  opacity: 0.1;
  cursor: default;
}

.filtered .selected {
  opacity: 0.2;
}

.selected, 
.filtered:hover .highlighted:hover,
.filtered .projects-nav-item,
.filtered:hover .projects-nav-item {
  opacity: 1.0;
}

.filtered .highlighted, .filtered:hover .highlighted {
  opacity: 0.8;
  cursor: pointer;
}

.back {
  display: none;
}

.big-title {
  font-size: 3.0em;
  text-align: center;
  text-transform: uppercase;
}

.item-1 .item-title {
  color: #fcfcfc;
  background: #229dce;
}

.item-2 .item-title {
  color: #fcfcfc;
  background: #f78029;
}

.item-3 .item-title {
  color: #fcfcfc;
  background: #da2480;
}

.item-4 .item-title {
  color: #fcfcfc;
  background: #4722ce;
}

.item-5 .item-title {
  color: #fcfcfc;
  background: #f73029;
}

.item-6 .item-title {
  color: #fcfcfc;
  background: #a222ce;
}

.item-7 .item-title {
  color: #fcfcfc;
  background: #f7a829;
}

.item-8 .item-title {
  color: #fcfcfc;
  background: #2260ce;
}

.project-list {
  background: #fcfcfc;
  width: 100%;
}

.project-view {
  position: relative;
  margin: 0 auto;
  padding: 1.0em 0 6.0em 0;
  padding-top: 0;
  width: 100%;
 
  border-top-width: 1.0em;
  border-style: solid;
  font-size: 2.0em;
}

.photo-section {
  position: relative;
  width: 100%;
}

.fig-no {
  position: absolute;
  left: 1.0em;
  z-index: 10;
  display: block;
  width: 1.5em;
  line-height: 1.5em;
  
  color: #fff;
  background: #52463c;
  text-align: center;

  opacity: 0;
  -webkit-transition: 0.5s opacity ease;
  -moz-transition: 0.5s opacity ease;
  -o-transition: 0.5s opacity ease;
  transition: 0.5s opacity ease;
}

.project-view p, .project-view ul {
  display: block;
}

.project-view p, .project-view li {
  margin-bottom: 1.375em;
  font-size: 1.0em;
}

.project-view li {
  padding-left: 0.5em;
}

.project-view ul {
  width: 20.5em;
  list-style: disc;
}

.photo-section li {
  float: left;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.photo-section li img {
  width: 100%;
}

.fig-link {
  text-decoration: none;
}

.photo-section li:hover .fig-no, 
.selected-figure .fig-no,
.photo-section li:hover .caption, 
.selected-figure .caption,
.figure-selected .selected-figure:hover .fig-no,
.figure-selected .selected-figure:hover .caption {
  opacity: 1.0;
}

.figure-selected li:hover .fig-no,
.figure-selected li:hover .caption {
  opacity: 0;
}

.project-view .photo-section {
  margin: 2.0em 0;
  margin-top: 0;
}

.project-view .photo-section div {
  background: #efebe3;
}

.project-view .photo-section ul {
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  list-style: none;
  padding-left: 0;
}

.text-section {
  width: auto;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 3.0em 2.0em 3.0em;
  font-size: 0.8em;
}

.text-section p:first-child {
  padding-top: 0;
}

.text-section p, .text-section .heading, .text-section li {
  width: auto;
  padding: 0;
  
  line-height: 1.5em;
}

.two-col ul {
  width: auto;
}

.two-col li {
  width: auto;
  text-align: left;
  margin-left: 1.0em;
}

.two-col {
  margin: 2.0em auto;
  width: auto;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 2.0em;
  -moz-column-gap: 2.0em;
  -ms-column-gap: 2.0em;
  -o-column-gap: 2.0em;
  column-gap: 2.0em;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.two-col p {
  width: auto;
}

.two-col .heading {
  margin-top: 0;
  break-before: always;
  -webkit-column-break-before: always;
}


.two-col .heading:first-child {
  break-before: auto;
  -webkit-column-break-before: auto;
}

em {
  font-style: italic;
}

.photography {
  border-top: 2.0em solid #52463c;
}

.photography p, .contact p {
  margin-top: 6.0em;
}

.photography .photo-section {
  margin-top: 4.0em;
}

.project-view:nth-child(odd) {
  background: #f8f8f8;
}

.video-wrapper {
  position: relative;
  margin: 0 auto;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  background: #000;
}

.video-wrapper iframe {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left:3 0;
  top: 0;
}

.project-title {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 1.0em 2.0em 2.0em 2.0em;
  width: auto;
  max-width: 1280px;
  font-size: 1.2em;
  line-height: 1.0em;
  font-weight: 400;
}

.project-link {
  text-align: right;
  color: #f0f0f0;
  background: #aaa;

  text-decoration: none;
  border-radius: 0.125em;
  padding: 0.1em 0.225em;
  margin-left: 0.225em;
  font-size: 0.8em;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.project-link:hover {
}

.heading {
  margin: 2.0em auto 1.0em auto;
}

.project-1 .project-title, .project-1 .fig-link, .project-1 .heading {
  color: #229dce;
}

.project-1 {
  border-top-color: #229dce; 
}

.project-1 .fig-no, .project-1 .project-link {
  background: #229dce;
}

.project-2 .project-title, .project-2 .fig-link, .project-2 .heading {
  color: #f78029;
}

.project-2 {
  border-top-color: #f78029; 
}

.project-2 .fig-no, .project-2 .project-link {
  background: #f78029;
}

.project-3 .project-title, .project-3 .fig-link, .project-3 .heading {
  color: #da2480;
}

.project-3 {
  border-top-color: #da2480;
}

.project-3 .fig-no, .project-3 .project-link {
  background: #da2480;
}

.project-4 .project-title, .project-4 .fig-link, .project-4 .heading {
  color: #4722ce;
}

.project-4 {
  border-top-color: #4722ce;
}

.project-4 .fig-no, .project-4 .project-link {
  background: #4722ce;
}

.project-5 .project-title, .project-5 .fig-link, .project-5 .heading {
  color: #f73029;
}

.project-5 {
  border-top-color: #f73029;
}

.project-5 .fig-no, .project-5 .project-link {
  background: #f73029;
}

.project-6 .project-title, .project-6 .fig-link, .project-6 .heading {
  color: #a222ce;
}

.project-6 {
  border-top-color: #a222ce;
}

.project-6 .fig-no, .project-6 .project-link {
  background: #a222ce;
}

.project-7 .project-title, .project-7 .fig-link, .project-7 .heading {
  color: #f7a829;
}

.project-7 {
  border-top-color: #f7a829;
}

.project-7 .fig-no, .project-7 .project-link{
  background: #f7a829;
}

.project-8 .project-title, .project-8 .fig-link, .project-8 .heading {
  color: #2260ce;
}

.project-8 {
  border-top-color: #2260ce; 
}

.project-8 .fig-no, .project-8 .project-link {
  background: #2260ce;
}

.photo-section img {
  float: left;

  width: 100%;
  height: 66.6666%;
  opacity: 1.0;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.transparent, .photo-section .transparent {
  opacity: 0;
}

.filter-title {
  margin-top: -3.0em;
  left: -15.0em;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;

  font-size: 0.6em;
  line-height: 1.5em;

  padding: 1.5em 2.0em;

  min-height: 1.5em;

  background: #312f2c;
  color: #f0f0f0;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}



.filter-selected .filter-title {
  left: 0;
}

.filter-title .item-title {
  background: #312f2c;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
}

.filter-title .item-title, .filter-title .icon {
  color: #f0f0f0;
}

.filter-title .item-title:hover {
  background: #52463c;
}

/*
.filter-title .icon {
  position: absolute;
  right: 0.5555em;
  top: 0.5555em;
  font-size: 1.8em;
  line-height: 0.5555em;
}

.filter-title .icon:hover {
  color: #fff;
}
*/

.remove-filter {
  position: absolute;
  top: 0;
  right: 1.0em;
  height: 100%;
  width: 14px;
  background: url('../cross.png') no-repeat center right;
  text-indent: -10000px;
}


.contact {  
  height: 4.0em;
  height: 900px;
  background: #312F2C;

  
}

.contact-inner {
  border-top: 2.0em solid #52463c;
}

.contact p {
  color: #f0f0f0;
  color: #dad2c2;
}

.clear {
  clear: both;
  float: none;
}


.selected-highlighter, .selected-highlighter:hover {
  background: #312F2C;
  color: #fcfcfc; 
}


.ack {
  font-size: 1.25em;
  width: 45em;
  margin: 0 auto;
}


@media(min-width: 770px) {
  .photo-section img, .photo-section li {
    width: 50%;
  }
}

@media(min-width: 1540px) {
  .photo-section img {
    width: 33.3333%;
  }
}

@media(min-width: 2310px) {
  .photo-section img {
    width: 25%;
  } 
}

@media(min-width: 3080px) {
  .photo-section img {
    width: 20%;
  }
}


.nav-wrapper {
  font-size: 14px;
}

@media(min-height: 540px) {
  .nav-wrapper {
    font-size: 15px;
  }
}

@media(min-height: 577px) {
  .nav-wrapper {
    font-size: 16px;
  }
}

@media(min-height: 612px) {
  .nav-wrapper {
    font-size: 17px;
  }
}

@media(min-height: 648px) {
  .nav-wrapper {
    font-size: 18px;
  }
}

@media(min-height: 684px) {
  .nav-wrapper {
    font-size: 19px;
  }
}

@media(min-height: 720px) {
  .nav-wrapper {
    font-size: 20px;
  }
}

/*========================*/
@media(min-width: 750px) {

  .block {
    text-align: center;
    height:100vh;
  }

  .contact .block {
    height: auto;
  }
}

@media(max-width: 975px) {
  p {
    font-size: 2.0em;
  }

  .two-col {
    margin-top: 0;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -ms-column-count: 1;
    -o-column-count: 1;
    column-count: 1;
  }

  .two-col .heading {
    margin-top: 2.0em;
  }

  .ack {
    width: 36em;
  }
}

@media(max-width: 400px) {

  p, .project-view p {
    text-align: left;
  }
}

@media(max-width: 750px) {

  .big-title {
    width: 100%;
  }

  .wrapper {
    width: 100%;
  }

  .nav-wrapper {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .nav-wrapper:hover {
    width: 100%;
  }

  .nav {
    position: static;
    width: 100%;
  }

  .nav:hover {
    width: 100%;
  }

  .content {
    float: none;
    width: 100%;
  }

  .nav-item {
    float: none;
  }

  .filter-title {
    left: -100%;
  }

  .selected {
    opacity: 0.4;
  }

  .nav:hover .nav-item:hover {
    opacity: 1.0;
  }

  progress {
    display: none;
  }

  .project-view {
    border-top-width: 2.0em;
  }

  .project-view {
    font-size: 1.0em;
  }

  .back {
    float: right;
    display: block;
    margin-top: -1.5em;
    margin-right: 1.5em;
    color: #fcfcfc;
  }

  .project-view .back {
    margin-top: -1.5em;
  }

  .big-title {
    font-size: 2.0em;
  }

  .project-title {
    font-size: 1.5em;
    padding: 1.0em 1.0em 2.0em 1.0em;
  }

  p, .project-view p, .heading, .project-view ul {
    width: auto;
    font-size: 1.5em;
    margin-left: 1.0em;
    margin-right: 1.0em;
  }

  .project-view ul {
    margin-left: 2.0em;
  }

  .caption {
    position: static;
    opacity: 1.0;
    clear: both; 
  }

  .fig-no {
    font-size: 1.0em;
    opacity: 1.0;
  }

  .project-view img {
    max-width: 100%;
    width: auto;
  }

  .text-section {
    padding: 0 0.5em;
  }

  .video-wrapper {
    margin: 0 2.5%;
    padding-bottom: 54%;
    width: 95%;
  }

  .photo-section img {
    height: auto;
  }

  .ack {
    width: auto;
    margin: 0 1.0em;
  }

}

@media print {

  .nav-wrapper {
    display: none;
  }

  .wrapper {
    width: 100%;
  }

  .content {
    width: 100%;
  }

  body, .project-view, .project-view:nth-child(odd), .contact {
    background: #ffffff;
  }

  .contact p, .contact p span {
    color: #000;
  }

  p {
    margin-bottom: 0;
    padding-top: 1.0em;
  }

  p, h3 {
    color: #000000;
  }

  p span, .contact p span {
    background: #f0f0f0;
  }

  .big-title {
    display: none;
  }

  .project-view {
    page-break-before: always;
  }
}

@font-face {
  font-family: 'Entypo';
  src: url('entypo.eot') format('eot'), url('../entypo/entypo.woff') format('woff'), url('../entypo/entypo.ttf') format('truetype');
}

@font-face {
  font-family: 'Entypo Social';
  src: url('entypo.eot') format('eot'), url('../entypo-social/entypo-social.woff') format('woff'), url('../entypo-social/entypo-social.ttf') format('truetype');
}

.icon {
  font-family: 'Entypo';
  font-style: normal;
  font-size: 1.5em;
  line-height: 1.0em;
  margin: 0 0.1em 0 0;
}

.icon-social {
  font-family: 'Entypo Social';
  font-style: normal;
  font-size: 1.5em;
  line-height: 1.0em;
}