/* base.scss */
body {
  font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'texgyreherosregular', "Helvetica", "Arial", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  color: #26391e; }

a, a:link, a:visited {
  text-decoration: none;
  color: #26391e; }

a:hover {
  color: #9aa18a; }

a img, a:link img, a:visited img {
  opacity: 1; }

a:hover img {
  opacity: 0.9; }

b, .bold {
  font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "Helvetica", "texgyreherosbold", "Arial", sans-serif;
  font-weight: 600;
  font-stretch: normal; }

#main {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto; }
  @media all and (min-width: 737px) {
    #main {
      min-width: 1320px; } }

#intro {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  z-index: 4;
  cursor: pointer; }

.align {
  position: absolute;
  top: 50%; }
  @media all and (min-width: 737px) {
    .align {
      width: 500px;
      height: 700px;
      left: 50%;
      margin-left: -250px;
      margin-top: -350px; } }
  @media only screen and (max-device-width: 736px) {
    .align {
      width: 100%;
      height: 300px;
      margin-top: -150px; } }

.intro-title {
  text-transform: uppercase;
  text-align: center; }
  @media all and (min-width: 737px) {
    .intro-title {
      font-size: 120px;
      line-height: 200px; } }
  @media only screen and (max-device-width: 736px) {
    .intro-title {
      font-size: 60px;
      line-height: 100px; } }

#header {
  position: absolute;
  overflow: visible;
  z-index: 3; }
  @media all and (min-width: 737px) {
    #header {
      top: 40px;
      left: 50px; } }
  @media only screen and (max-device-width: 736px) {
    #header {
      top: 10px;
      left: 0px;
      width: 100%; } }

#header .title {
  text-transform: uppercase; }
  @media all and (min-width: 737px) {
    #header .title {
      font-size: 50px;
      line-height: 65px; } }
  @media only screen and (max-device-width: 736px) {
    #header .title {
      font-size: 25px;
      font-size: 7.6vw;
      line-height: 10vw;
      padding-left: 10px; } }

#header .subtitle {
  padding-top: 6px; }
  @media all and (min-width: 737px) {
    #header .subtitle {
      font-size: 14px;
      line-height: 17px;
      text-align: center; } }
  @media only screen and (max-device-width: 736px) {
    #header .subtitle {
      font-size: 13px;
      line-height: 16px;
      padding-left: 10px; } }

@media all and (min-width: 737px) {
  #header .navigation {
    display: none; } }
@media only screen and (max-device-width: 736px) {
  #header .navigation {
    position: relative;
    width: 24px;
    width: 8vw;
    height: 24px;
    height: 8vw;
    margin: 10px;
    margin-top: 10px;
    font-size: 24px;
    font-size: 7vw;
    line-height: 8vw;
    float: left;
    color: #26391e;
    text-align: center;
    border: 1px solid  #26391e;
    background-color: white;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    z-index: 100; } }

#menu {
  position: absolute;
  overflow: visible;
  z-index: 3; }
  @media all and (min-width: 737px) {
    #menu {
      top: 180px;
      left: 50px; } }
  @media only screen and (max-device-width: 736px) {
    #menu {
      top: 120px;
      top: 35vw;
      left: -140px;
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      -moz-transition: -moz-transform 0.3s ease-in-out;
      -ms-transition: -ms-transform 0.3s ease-in-out;
      -o-transition: -o-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -o-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px); } }

.menu-item {
  font-size: 14px;
  line-height: 17px; }

#content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden; }
  @media all and (min-width: 737px) {
    #content {
      padding-left: 270px; } }
  @media only screen and (max-device-width: 736px) {
    #content {
      padding-left: 0px;
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      -moz-transition: -moz-transform 0.3s ease-in-out;
      -ms-transition: -ms-transform 0.3s ease-in-out;
      -o-transition: -o-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -o-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px); } }

@media only screen and (max-device-width: 736px) {
  .navigate #menu {
    -webkit-transform: translateX(150px);
    -moz-transform: translateX(150px);
    -o-transform: translateX(150px);
    -ms-transform: translateX(150px);
    transform: translateX(150px); } }

@media only screen and (max-device-width: 736px) {
  .navigate #content {
    -webkit-transform: translateX(150px);
    -moz-transform: translateX(150px);
    -o-transform: translateX(150px);
    -ms-transform: translateX(150px);
    transform: translateX(150px); } }

#content-scroller {
  padding-top: 0px;
  position: relative;
  height: auto;
  overflow: visible; }
  @media all and (min-width: 737px) {
    #content-scroller {
      width: 1080px; } }
  @media only screen and (max-device-width: 736px) {
    #content-scroller {
      width: 100%; } }

.post {
  position: relative;
  float: left; }
  @media all and (min-width: 737px) {
    .post {
      margin: 0px 10px 20px 10px; } }
  @media only screen and (max-device-width: 736px) {
    .post {
      margin: 0px;
      padding: 0px 10px 20px 10px;
      box-sizing: border-box; } }

@media all and (min-width: 737px) {
  .post:first-child, .post.first-post {
    margin-top: 180px; } }
@media only screen and (max-device-width: 736px) {
  .post:first-child, .post.first-post {
    margin-top: 120px;
    margin-top: 35vw; } }

.post.paragraph {
  overflow: visible;
  z-index: 2; }
  @media all and (min-width: 737px) {
    .post.paragraph {
      margin-right: -150px;
      width: 600px;
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2; } }
  @media only screen and (max-device-width: 736px) {
    .post.paragraph {
      width: 100%; } }

.post.quote {
  overflow: visible;
  z-index: 2; }
  @media all and (min-width: 737px) {
    .post.quote {
      margin-right: -150px;
      width: 600px; } }
  @media only screen and (max-device-width: 736px) {
    .post.quote {
      width: 100%; } }

.post.quote div:first-child {
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 9px; }

.post.image {
  overflow: visible;
  z-index: 1; }

@media all and (min-width: 737px) {
  .post.image-290 {
    width: 27%;
    width: calc(290/1080 * 100%); } }
@media only screen and (max-device-width: 736px) {
  .post.image-290 {
    width: 33%;
    width: calc(100% / 3); } }

@media all and (min-width: 737px) {
  .post.image-600 {
    width: 55%;
    width: calc(600/1080 * 100%); } }
@media only screen and (max-device-width: 736px) {
  .post.image-600 {
    width: 100%; } }

@media all and (min-width: 737px) {
  .post.vimeo {
    width: 600px; } }
@media only screen and (max-device-width: 736px) {
  .post.vimeo {
    width: 100%; } }

.post.vimeo:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: ''; }

.post .vimeo-container {
  position: absolute;
  top: 0;
  bottom: 0; }
  @media all and (min-width: 737px) {
    .post .vimeo-container {
      right: 0;
      left: 0; } }
  @media only screen and (max-device-width: 736px) {
    .post .vimeo-container {
      right: 10px;
      left: 10px; } }

@media all and (min-width: 737px) {
  .post.spacer {
    width: 55%;
    width: calc(600/1080 * 100%);
    height: 200px; } }
@media only screen and (max-device-width: 736px) {
  .post.spacer {
    display: none; } }

@media all and (min-width: 737px) {
  .post.smallspacer {
    width: 27%;
    width: calc(290/1080 * 100%);
    height: 180px; } }
@media only screen and (max-device-width: 736px) {
  .post.smallspacer {
    display: none; } }

#content.blog .post {
  overflow: none; }
  @media all and (min-width: 737px) {
    #content.blog .post {
      margin: 0px 10px 20px 10px; } }
  @media only screen and (max-device-width: 736px) {
    #content.blog .post {
      margin: 0px; } }

@media only screen and (max-device-width: 736px) {
  #content.blog .post.attachment {
    width: 100%; } }

#content.artwork .post.paragraph, #content.screenings .post.paragraph, #content.press .post.paragraph, #content.contact .post.paragraph, #content.downloads .post.paragraph {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1; }

@media all and (min-width: 737px) {
  #content.blog #content-scroller {
    padding-top: 180px;
    width: 660px; } }
@media only screen and (max-device-width: 736px) {
  #content.blog #content-scroller {
    padding-top: 120px;
    padding-top: 35vw;
    width: 100%; } }

@media all and (min-width: 737px) {
  #content.artwork .post.paragraph {
    width: 600px; } }
@media only screen and (max-device-width: 736px) {
  #content.artwork .post.paragraph {
    width: 100%; } }

@media all and (min-width: 737px) {
  #content.artwork .post.paragraph:first-child {
    width: 600px; } }
@media only screen and (max-device-width: 736px) {
  #content.artwork .post.paragraph:first-child {
    width: 100%; } }

@media all and (min-width: 737px) {
  #content.artwork .post.image {
    width: 600px; } }
@media only screen and (max-device-width: 736px) {
  #content.artwork .post.image {
    width: 100%; } }

.image-subtitle {
  padding-top: 5px;
  width: 200px; }

.thumbnail {
  width: 200px; }

.hidden {
  display: none; }

.speaker-icon {
  margin-top: 4px;
  margin-left: 2px;
  width: 18px;
  height: 14px;
  background-image: url(../imgs/speaker-on.png);
  background-size: cover;
  cursor: pointer; }

.speaker-icon.speaker-off {
  background-image: url(../imgs/speaker-off.png); }

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