@charset "UTF-8";
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
  margin: 0.15em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
  font-family: 'BBFnt';
  src: url("/fonts/BBFnt.eot");
  src: local("Ôÿ║"), url("/fonts/BBFnt.woff") format("woff"), url("/fonts/BBFnt.ttf") format("truetype"), url("/fonts/BBFnt.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'BBFnt';
  src: url("/fonts/BBFnt.eot");
  src: local("Ôÿ║"), url("/fonts/BBFnt.woff") format("woff"), url("/fonts/BBFnt.ttf") format("truetype"), url("/fonts/BBFnt.svg") format("svg");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'BBFntBody';
  src: url("/fonts/BBFntBody.eot");
  src: local("Ôÿ║"), url("/fonts/BBFntBody.woff") format("woff"), url("/fonts/BBFntBody.ttf") format("truetype"), url("/fonts/BBFntBody.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'BBFntBody';
  src: url("/fonts/BBFntBodyBld.eot");
  src: local("Ôÿ║"), url("/fonts/BBFntBodyBld.woff") format("woff"), url("/fonts/BBFntBodyBld.ttf") format("truetype"), url("/fonts/BBFntBodyBld.svg") format("svg");
  font-weight: bold;
  font-style: normal; }
/* ===================================================================
// ============================================   mixins
*/
.ratio-169 {
  position: relative;
  width: 100%;
  padding-top: 56%; }
  .ratio-169 > img, .ratio-169 > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.fake-img {
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat; }
  .fake-img img {
    opacity: 0;
    width: 100%; }

.thick-underline {
  position: relative; }
  .thick-underline:after {
    height: 1vw;
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1vw;
    border-bottom-width: 0.7vw;
    border-bottom-style: solid; }

.thick-underline-words span {
  position: relative; }
  .thick-underline-words span:after {
    height: 1vw;
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1vw;
    border-bottom-width: 0.7vw;
    border-bottom-style: solid; }

/* ===================================================================
/  ============================================   globals
*/
*, *:before, *:after {
  box-sizing: inherit; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: border-box; }

/* ===================================================================
/  ============================================   layout
*/
html, body {
  padding: 0;
  margin: 0;
  background-color: #c7cdcd;
  width: 100%; }

#page-container {
  width: 100%;
  overflow: hidden;
  height: auto; }

img {
  vertical-align: middle; }

/* -------------------------------   z-index
*/
.active-videoframe {
  z-index: 90; }

#lightbox-underlay {
  z-index: 85; }

#site-header {
  z-index: 50; }

#masthead-content {
  z-index: 40; }

#masthead {
  z-index: 40; }

#site-footer {
  z-index: 35; }

#content {
  z-index: 30; }

.thumb img {
  z-index: 31; }
.thumb h2 {
  z-index: 32; }
.thumb .thumb-links {
  z-index: 33; }

.masthead-img {
  z-index: 35; }

#masthead-bg-video {
  z-index: 36; }

.masthead-video {
  z-index: 37; }

.masthead-video-panel {
  z-index: 60; }

.masthead-controls {
  z-index: 60; }

/* -------------------------------   grid system
*/
.grid {
  padding: 0.49vw; }
  .grid:before, .grid:after {
    /* clearfix */
    content: " ";
    display: table; }
  .grid:after {
    /* clearfix */
    clear: both; }

.col {
  margin: 0.5vw;
  float: left;
  overflow: hidden;
  position: relative; }

.grid-2 .col {
  width: 48.5vw; }
  .grid-2 .col:nth-child(2n+1) {
    clear: left; }
.grid-2 .thumb, .grid-2 .cell {
  height: 27vw; }

.column .grid-2 .col,
.column.grid-2 .col {
  width: 32vw; }
.column .grid-2 .thumb, .column .grid-2 .cell,
.column.grid-2 .thumb,
.column.grid-2 .cell {
  height: 18vw; }

.grid-3 .col {
  width: 32vw; }
.grid-3 .thumb, .grid-3 .cell {
  height: 18vw; }

.column .grid-3 .col,
.column.grid-3 .col {
  width: 21vw; }
.column .grid-3 .thumb, .column .grid-3 .cell,
.column.grid-3 .thumb,
.column.grid-3 .cell {
  height: 12vw; }

.grid-4 .col,
.grid-2 .grid-2 .col {
  width: 23.75vw; }
.grid-4 .thumb, .grid-4 .cell,
.grid-2 .grid-2 .thumb,
.grid-2 .grid-2 .cell {
  height: 13vw; }

.column .grid-4 .col,
.column.grid-4 .col,
.column .grid-2 .grid-2 .col,
.grid-2.column .grid-2 .col {
  width: 15.5vw; }
.column .grid-4 .thumb, .column .grid-4 .cell,
.column.grid-4 .thumb,
.column.grid-4 .cell,
.column .grid-2 .grid-2 .thumb,
.column .grid-2 .grid-2 .cell,
.grid-2.column .grid-2 .thumb,
.grid-2.column .grid-2 .cell {
  height: 9vw; }

.mini-col {
  width: 15.5vw;
  margin-left: 1vw;
  float: left;
  -ms-flex-align: center;
      align-items: center;
  text-align: right; }
  .mini-col:first-child {
    margin-left: 0; }

.grid .grid {
  margin-left: -0.5vw;
  margin-right: -0.5vw;
  margin-bottom: -1vw;
  margin-top: -1vw;
  float: left; }

.grid + .grid {
  margin-top: -2vw; }

.grid + .hover-row {
  margin-top: 0; }

@media (max-width: 800px) {
  .grid.grid-3:not(.grid-force-multi) .col, .grid.grid-2:not(.grid-force-multi) .col {
    width: 98vw; }
  .grid.grid-3:not(.grid-force-multi) .thumb, .grid.grid-3:not(.grid-force-multi) .cell, .grid.grid-2:not(.grid-force-multi) .thumb, .grid.grid-2:not(.grid-force-multi) .cell {
    height: 55vw; }

  .column .grid-2.grid-force-multi
  .column.grid-2.grid-force-multi .col {
    width: 48.5vw; }
    .column .grid-2.grid-force-multi
    .column.grid-2.grid-force-multi .col:nth-child(2n+1) {
      clear: left; }
  .column .grid-2.grid-force-multi
  .column.grid-2.grid-force-multi .thumb, .column .grid-2.grid-force-multi
  .column.grid-2.grid-force-multi .cell {
    height: 27vw; }
  .column .grid-2.grid-force-multi
  .column.grid-2.grid-force-multi .col {
    width: 47vw; } }
/* -------------------------------   header
*/
#site-header {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 14vw;
  line-height: 13vw;
  transition: height 0.4s ease, border-color 0.4s ease, opacity 3s ease;
  pointer-events: none; }
  #site-header a {
    transition: opacity 3s ease; }

#site-nav {
  position: absolute;
  width: 100%;
  top: 0;
  font-size: 1.5vw;
  letter-spacing: 0.1em; }
  #site-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    pointer-events: auto; }
    #site-nav ul:nth-child(1) {
      float: right;
      left: -50%;
      margin-right: 7.5vw; }
    #site-nav ul:nth-child(2) {
      float: left;
      left: 50%;
      margin-left: 7.5vw; }
  #site-nav li {
    transition: line-height 0.4s ease;
    font-size: 1.5vw;
    position: relative;
    float: left; }
    #site-nav li a {
      padding: 0 2vw;
      display: block;
      height: 100%; }

#site-logo {
  position: relative;
  display: block;
  height: 9vw;
  width: 9vw;
  margin: 2vw auto;
  transition: margin 0.4s ease;
  pointer-events: auto; }
  #site-logo img {
    width: 100%;
    height: 100%;
    position: absolute; }
  #site-logo .bg-logo {
    opacity: 1;
    transition: opacity 0.4s ease; }

/*#header-bg{
	transition: opacity $transition-duration $transition-timing;
	height: 100%;
	//height: $header-height-mini;
	width: 100%;
	background-attachment: fixed;
	position: absolute;
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
	opacity: 0;
} */
.header-solid #site-header #header-bg {
  opacity: 1; }
.header-solid #masthead-content {
  opacity: 0; }

.header-faded #site-header a {
  opacity: 0.3; }
  .header-faded #site-header a:hover {
    opacity: 1;
    transition: opacity 500ms ease; }

.header-shrunk header#site-header {
  height: 6vw;
  line-height: 7vw; }
  .header-shrunk header#site-header a {
    opacity: 1; }
  .header-shrunk header#site-header #site-logo {
    margin: -1.5vw auto; }
    .header-shrunk header#site-header #site-logo .bg-logo {
      opacity: 0; }

/* -------------------------------   masthead
*/
#masthead {
  position: fixed;
  height: 45vw;
  top: 0;
  width: 100vw;
  overflow: hidden;
  border-bottom: 1vw #eee solid;
  box-sizing: content-box; }
  #masthead > img {
    width: 100%; }
  #masthead > .masthead-img-old {
    height: 100%;
    width: 100%;
    background-attachment: fixed;
    position: absolute;
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat; }

.masthead {
  background-color: black; }

#masthead-spacer {
  position: absolute;
  height: 45vw;
  top: 0;
  width: 100vw;
  overflow: hidden;
  border-bottom: 1vw #eee solid;
  box-sizing: content-box; }

.hero {
  font-size: 5vw;
  text-align: center;
  line-height: 1.5;
  margin-right: -0.25em;
  letter-spacing: 0.25em;
  margin-bottom: 3vw; }
  .hero span {
    position: relative; }
    .hero span:after {
      height: 1vw;
      content: ' ';
      position: absolute;
      left: 0;
      right: 0.25em;
      bottom: -1vw;
      border-bottom-width: 0.7vw;
      border-bottom-style: solid; }

#masthead-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  transition: opacity 1.6s ease;
  overflow: hidden;
  padding-bottom: 3vw; }

#masthead.fixed {
  position: fixed;
  height: 6vw; }

#play-reel {
  letter-spacing: 0.1em; }
  #play-reel:hover {
    text-decoration: none !important; }

#play-triangle {
  stroke: #eee;
  stroke-width: 10px;
  width: 5vw;
  fill: transparent;
  display: block;
  margin: 0 auto 1vw;
  height: 5vw;
  width: 5vw; }

.intro {
  margin: 0 17.5vw 1vw; }

#masthead-videos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden; }

#masthead-videos video, .masthead-img {
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  transition: opacity 2s ease;
  will-change: transform; }

.masthead-img {
  opacity: 1; }

video#masthead-bg-video {
  opacity: 1; }

.masthead-video-panel {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 2s ease;
  padding: 0 2vw;
  height: 6vw;
  line-height: 7vw;
  pointer-events: none;
  transition: opacity 0.4s ease; }
  .masthead-video-panel.muted .unmuted {
    display: none; }
  .masthead-video-panel.unmuted .muted {
    display: none; }
  .masthead-video-panel.playing .paused {
    display: none; }
  .masthead-video-panel.paused .playing {
    display: none; }

.masthead-controls {
  float: right;
  pointer-events: none; }
  .masthead-controls a {
    width: 3vw;
    display: inline-block;
    text-align: center; }

.masthead-video-title {
  float: left; }

.masthead-video-active #masthead-content {
  opacity: 0;
  pointer-events: none; }

.masthead-video-panel.active {
  opacity: 0.8; }
  .masthead-video-panel.active .masthead-controls {
    pointer-events: auto; }

.masthead-video-panel.autoplay {
  opacity: 0; }
  .masthead-video-panel.autoplay .masthead-controls {
    pointer-events: none; }

.can-autoplay .masthead-video-panel.autoplay.active {
  opacity: 0.8; }
  .can-autoplay .masthead-video-panel.autoplay.active .masthead-controls {
    pointer-events: auto; }

.masthead-video-panel.for-masthead-bg-video .playp-video {
  opacity: 0.4; }
  .masthead-video-panel.for-masthead-bg-video .playp-video:hover {
    opacity: 0.9; }

.masthead-video-playing #masthead-content {
  opacity: 0; }

.masthead-invisible #masthead-content {
  opacity: 0; }
.masthead-invisible .masthead-video-title {
  opacity: 0; }
.masthead-invisible .masthead-controls a {
  opacity: 0.4; }
  .masthead-invisible .masthead-controls a:hover {
    opacity: 0.8; }

.masthead-shrunk #masthead {
  height: 6vw; }

/* -------------------------------   main
*/
#main {
  width: 100vw;
  margin-top: 45vw; }
  #main:before, #main:after {
    /* clearfix */
    content: " ";
    display: table; }
  #main:after {
    /* clearfix */
    clear: both; }

#content {
  position: relative;
  background-color: #eee; }

.column {
  padding: 1vw 17.5vw; }
  @media (max-width: 800px) {
    .column {
      padding: 2vw; } }
  .column .grid {
    padding-left: 0;
    padding-right: 0; }

#content.column .grid,
.column.grid {
  margin-left: -0.5vw;
  margin-right: -0.5vw; }

/* -------------------------------   footer
*/
#site-footer {
  width: 100vw;
  height: 18vw;
  background-color: #c7cdcd; }

#colophon {
  height: 5vw;
  background-color: #8a9191;
  padding: 0 2vw; }
  #colophon:before, #colophon:after {
    /* clearfix */
    content: " ";
    display: table; }
  #colophon:after {
    /* clearfix */
    clear: both; }

#copyright {
  float: left; }

#footer-logo {
  clear: both;
  padding-top: 2vw;
  margin: 0 auto;
  width: 9vw; }
  #footer-logo img {
    width: 9vw;
    height: 9vw; }

#footer-nav {
  float: right; }
  #footer-nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin-right: -1vw; }
    #footer-nav ul:before, #footer-nav ul:after {
      /* clearfix */
      content: " ";
      display: table; }
    #footer-nav ul:after {
      /* clearfix */
      clear: both; }
  #footer-nav li {
    display: inline-block; }
  #footer-nav a {
    padding: 0 1vw;
    height: 5vw;
    display: block; }

/* -------------------------------   divider
*/
.divider {
  padding: 1vw 17.5vw;
  color: white; }

.column .divider {
  padding: 1vw 0; }

/* -------------------------------   article / single
*/
.column .graphic {
  margin-top: 1vw; }

/* -------------------------------   thumbs
*/
.thumb {
  float: left;
  overflow: hidden;
  position: relative;
  color: #eee;
  width: 100%; }
  .thumb img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }
  .thumb h2, .thumb h3, .thumb p {
    position: relative;
    margin-top: 1vw;
    text-align: center;
    width: 100%;
    font-weight: normal;
    z-index: 41; }

.thumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }

.text-blur-hover {
  transition: text-shadow 0.5s 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  text-shadow: 0 0 0px #eee;
  color: rgba(238, 238, 238, 0); }
  .text-blur-hover:hover {
    transition: text-shadow 0.25s 0s cubic-bezier(0.645, 0.045, 0.355, 1);
    text-shadow: 0 0 1vw #eee;
    color: rgba(238, 238, 238, 0); }

.hover-clear h2, .hover-clear h3, .hover-clear p {
  transition: opacity 0.8s ease; }
.hover-clear:hover h2, .hover-clear:hover h3, .hover-clear:hover p {
  opacity: 0; }

.thumb-description {
  display: inline-block;
  padding-top: 1vw; }

.thumb-links {
  position: absolute;
  bottom: 1vw;
  right: 1vw;
  color: #eee;
  opacity: 0;
  transition: opacity 0.8s ease; }

.thumb:hover .thumb-links {
  opacity: 0.8; }

.thumb.overlay > img {
  opacity: 0.8; }

/* .thumb:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; // Adjusts for spacing 
}
.thumb .beta {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
} */
/* -------------------------------   videoframe
*/
.active-videoframe {
  position: fixed;
  display: block !important;
  top: 50%;
  margin-top: -22vw;
  left: 10vw;
  width: 80vw;
  height: 45vw;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: videoframe 2s 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

@-webkit-keyframes videoframe {
  0% {
    top: 50%;
    margin-top: 0;
    height: 1px;
    left: 50%;
    width: 2px; }
  75% {
    top: 50%;
    margin-top: -22vw;
    height: 45vw;
    left: 50%;
    width: 2px; }
  100% {
    top: 50%;
    margin-top: -22vw;
    left: 10vw;
    width: 80vw;
    height: 45vw; } }
.videoframe {
  display: none; }
  .videoframe iframe {
    width: 100%;
    height: 100%; }

.active-videoframe iframe {
  -webkit-animation: videoframe_iframe 4s 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

@-webkit-keyframes videoframe_iframe {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 100%; } }
/* ===================================================================
/  ============================================   typography
*/
/* ------------------------------- 	basic
*/
html,
button,
input,
select,
textarea {
  color: #222; }

body {
  font-family: "BBFnt", Helvetica, sans-serif;
  font-size: 1.5vw;
  line-height: 1.4;
  color: #222;
  text-transform: uppercase; }

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: 1; }

p {
  font-size: 1.5vw; }
  @media (max-width: 800px) {
    p {
      font-size: 4vw; } }

h1, h2 {
  font-size: 3vw; }
  @media (max-width: 800px) {
    h1, h2 {
      font-size: 5vw; } }

h3, h4, h5, h6 {
  font-size: 2vw; }
  @media (max-width: 800px) {
    h3, h4, h5, h6 {
      font-size: 5vw; } }

strong {
  color: #000; }

::-moz-selection {
  background: #090;
  text-shadow: none; }

::selection {
  background: #090;
  text-shadow: none; }

p {
  font-family: "BBFntBody", Helvetica, sans-serif;
  line-height: 1.4;
  text-transform: none; }

h3, h4 {
  line-height: 1.4; }

p + h3, p + h4 {
  margin-top: 2.1vw; }

.no-kerning, .no-kerning .thumb h2 {
  letter-spacing: 0; }

.alpha {
  font-size: 5vw;
  letter-spacing: 0.25em; }

.beta {
  font-size: 4vw;
  letter-spacing: 0.25em; }

.gamma {
  font-size: 2vw;
  letter-spacing: 0.1em; }

.delta {
  font-size: 1.5vw;
  letter-spacing: 0.1em; }

.epsilon {
  font-size: 1vw; }

.intro {
  font-size: 2vw;
  font-family: "BBFnt", Helvetica, sans-serif; }

.thumb h2 {
  font-size: 4vw;
  letter-spacing: 0.25em; }
  .thumb h2 .play {
    font-size: 2vw;
    display: table;
    width: 100%; }

.thumb p {
  font-family: "BBFnt", Helvetica, sans-serif; }

.grid-3 .thumb h2, .grid-4 .thumb h2 {
  font-size: 2vw;
  letter-spacing: 0.1em; }

.colored-text {
  color: #1a939b; }

.divider h1, .divider h2, .divider h3 {
  font-size: 4vw; }

/* -------------------------------   header etc
*/
#site-header {
  color: #eee; }

#site-footer {
  color: #eee;
  font-size: 1vw;
  text-transform: none;
  font-weight: normal;
  line-height: 5vw; }

#masthead {
  color: #eee; }
  #masthead strong {
    color: #fff; }

.intro {
  text-align: left; }

.strapline {
  text-align: center; }

/* -------------------------------   links
*/
a, a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
  transition: text-shadow 500ms ease-out; }

a:hover, a:active {
  text-shadow: 0 0 1vw white; }

a.dont-blur:hover, a:active {
  text-shadow: 0 0 0 transparent; }

/* ===================================================================
/  ============================================   effects etc
*/
/* -------------------------------   overlay effect
*/
.overlay {
  background-color: #1a939b; }
  .overlay > img, .overlay > .fake-img {
    opacity: 0.3; }
  .overlay.black {
    background-color: black; }
    .overlay.black > img, .overlay.black > .fake-img {
      opacity: 0.7; }
  .overlay.hover-clear > img, .overlay.hover-clear > .fake-img {
    transition: opacity 0.8s ease;
    will-change: opacity; }
  .overlay.hover-clear:hover > img, .overlay.hover-clear:hover > .fake-img {
    opacity: 1; }

.overlay-bg {
  /* for overlaying on background image */
  position: relative; }
  .overlay-bg:before {
    background-color: #1a939b;
    opacity: 0.7;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    transition: opacity 0.4s ease; }
  .overlay-bg.black:before {
    background-color: black;
    opacity: 0.3; }
  .overlay-bg.hover-clear:hover:before {
    opacity: 0; }

/* -------------------------------   lightbox underlay
*/
#lightbox-underlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity 2s ease;
  background-color: #1a939b;
  opacity: 0;
  right: 0;
  left: 0;
  height: 0%;
  width: 100%; }

.has-lightbox #lightbox-underlay {
  opacity: 0.5;
  height: 100%; }

/* -------------------------------   row hover
*/
.hover-row {
  transition: background-color 1s, color, 0.5s; }
  .hover-row:hover {
    background-color: black;
    color: white; }

/* ===================================================================
/  ============================================   other/misc
*/
/* -------------------------------   references
*/
#header-height, #header-height-mini, #vw-height {
  width: 0px;
  height: 13vw;
  opacity: 0;
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0; }

#header-height-mini {
  height: 6vw; }

#vw-height {
  height: 1vw; }

/* -------------------------------   misc
*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/* -------------------------------   forms
*/
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

	/* -------------------------------   perfect-scrollbar
	* /

	.custom-scroll{
		position: absolute;
		overflow: hidden;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.ps-container:hover .ps-scrollbar-x-rail,
	.ps-container.hover .ps-scrollbar-x-rail,
	.ps-container:hover .ps-scrollbar-y-rail,
	.ps-container.hover .ps-scrollbar-y-rail {
	    opacity: 0.4;
	}

	.ps-container .ps-scrollbar-x-rail:hover,
	.ps-container .ps-scrollbar-x-rail.hover,
	.ps-container .ps-scrollbar-y-rail:hover,
	.ps-container .ps-scrollbar-y-rail.hover {
	    background-color: #eee;
	    opacity: 0.6;
	}
	.ps-container .ps-scrollbar-x-rail.in-scrolling,
	.ps-container .ps-scrollbar-y-rail.in-scrolling {
	    background-color: #eee;
	    opacity: 0.6;
	}


	.ps-container .ps-scrollbar-x,
	.ps-container .ps-scrollbar-y{
	    background-color: #aaa;
	    opacity: 0.6;
	}

	.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
	.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x,
	.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
	.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
	    background-color: #eee;
	    opacity: 0.6
	}
	
/* ===================================================================
/  ============================================   responsivity
*/
@media (max-width: 800px) {
  body {
    font-size: 3vw; }

  .hero {
    font-size: 7vw; }

  .thumb h2 {
    font-size: 11vw; }

  #site-header {
    height: 20vw;
    line-height: 20vw; }

  #site-logo {
    width: 15vw;
    height: 15vw; }

  .header-shrunk header#site-header #site-logo {
    /* width: 11vw;
    height: 11vw;
    margin-top: -2vw; */ }

  #site-header, #masthead {
    position: absolute; }

  #site-nav li {
    font-size: 3vw; }
    #site-nav li a {
      padding: 0 4vw; }
  #site-nav ul:nth-child(1) {
    margin-right: 9.5vw; }
  #site-nav ul:nth-child(2) {
    margin-right: 9.5vw; }

  #main {
    margin-top: 56vw; }

  #masthead {
    height: 56vw; }

  #play-triangle {
    vertical-align: middle;
    display: inline-block;
    margin-right: 1vw; }

  #site-footer {
    height: 24vw;
    line-height: 10vw;
    font-size: 4vw; }

  #colophon {
    height: 9vw;
    padding: 0 3vw; }

  .masthead-video-panel {
    padding: 0vw 3vw;
    height: 7vw; }

  .masthead-controls {
    font-size: 4vw; }
    .masthead-controls a {
      width: 6vw;
      margin-right: -1vw;
      margin-left: 1vw; }

  .masthead-video-title {
    font-size: 4vw; } }
.no-autoplay .masthead-video-panel.for-masthead-bg-video {
  display: none !important; }
.no-autoplay #masthead-bg-video {
  display: none; }

/* ===================================================================
/  ============================================   debugging/testing
*/
/* */
#halfway-h {
  width: 2px;
  position: fixed;
  height: 100%;
  width: 2px;
  left: 50%;
  top: 0;
  z-index: 9999;
  display: none; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px; }

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%; }

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden; }

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.clearfix:after {
  clear: both; }

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group;
    /* h5bp.com/t */ }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }