@font-face {
  font-family: Pitchfork;
  src: url("../fonts/pitchfork.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/pitchfork.eot?#iefix") format("embedded-opentype"), url("../fonts/pitchfork.otf");
  /* Modern browsers */
}

body, html {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: #F9F9ED;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#bg img.active {
  opacity: 1;
}

#menu {
  position: fixed;
  width: 100%;
}
#menu .trigger {
  position: relative;
  margin: 0 150px 0 0;
  height: 50px;
  z-index: 100;
}
#menu .trigger .content {
  height: 0;
}
#menu .trigger:hover .content, #menu .trigger.active .content {
  height: 76px;
}
#menu .content {
  color: white;
  position: fixed;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  overflow: hidden;
  font-family: colfax-web, sans-serif;
  -webkit-transition: height 250ms ease-in-out;
  -moz-transition: height 250ms ease-in-out;
  -ms-transition: height 250ms ease-in-out;
  transition: height 250ms ease-in-out;
}
#menu .content .pitchfork {
  position: absolute;
  top: 12px;
  left: 24px;
  width: 50px;
  height: 50px;
  line-height: 42px;
  font-size: 72px;
  font-family: Pitchfork;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
#menu .content .version {
  position: absolute;
  top: 10px;
  right: 150px;
  text-decoration: uppercase;
  font-size: 10px;
}
#menu .content a {
  color: white;
  text-decoration: none;
}
#menu .content a:hover {
  text-decoration: underline;
}
#menu .content > ul {
  list-style: none;
  font-size: 10px;
  margin: 10px 150px 0 150px;
  padding: 0;
}
#menu .content > ul > li {
  float: left;
  margin: 0;
  padding: 0;
  width: 30%;
  height: 56px;
  border-right: 1px solid #fff;
}
#menu .content > ul > li.last {
  border-right: 0;
}
#menu .content > ul .buffer {
  margin-left: 20px;
}
#menu .content > ul .back, #menu .content > ul .download {
  font-weight: 700;
}
#menu .content > ul .sections ul, #menu .content > ul .share ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  width: 49%;
}

#header {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  left: 0;
}
#header .pitchfork {
  position: absolute;
  top: 12px;
  left: 24px;
  width: 50px;
  height: 50px;
  line-height: 42px;
  font-size: 72px;
  font-family: Pitchfork;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
#header .bar {
  position: absolute;
  bottom: 24px;
  width: 100%;
  height: 1px;
  opacity: 0.2;
  background: #000;
}
#header .player {
  z-index: 80;
  position: absolute;
  right: 24px;
  top: 26px;
  line-height: 24px;
  font-weight: normal;
  font-family: colfax-web;
  font-size: 14px;
}
#header .player.disabled {
  opacity: 0.25;
}
#header .player.first .prev {
  opacity: 0.25;
}
#header .player.last .next {
  opacity: 0.25;
}
#header .player.playing .play {
  display: none;
}
#header .player.playing .pause {
  display: inline-block;
}
#header .player .controls * {
  width: 24px;
  text-align: center;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
#header .player .stop {
  display: none;
}
#header .player .pause {
  display: none;
}
#header .player * {
  vertical-align: top;
  display: inline-block;
}
#header .player .label {
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 12px;
}
#header .player .info {
  margin-right: 12px;
}
#header .player .controls {
  cursor: pointer;
  line-height: 18px;
  font-size: 24px;
  font-family: Pitchfork;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

#nav {
  font-family: Pitchfork;
  font-size: 40px;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
#nav .prev, #nav .next {
  position: absolute;
  bottom: 12px;
  cursor: pointer;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#nav .prev.invert, #nav .next.invert {
  color: #fff;
}
#nav .prev.disabled, #nav .next.disabled {
  opacity: 0;
}
#nav .prev {
  left: 24px;
}
#nav .next {
  right: 24px;
}

.tablet #nav {
  display: none;
}

#footer {
  z-index: 105;
  position: fixed;
  height: 60px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.placeholder {
  float: left;
}

#cover {
  position: relative;
  z-index: 90;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-box-shadow: 0 0 100px #c7c3b7;
  /* -moz-box-shadow: 0 0 100px #c7c3b7; */
  -ms-box-shadow: 0 0 100px #c7c3b7;
  -o-box-shadow: 0 0 100px #c7c3b7;
  /* box-shadow: 0 0 100px #c7c3b7; */
}
#cover img.fill {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
}
#cover .parallax {
  position: relative;
  width: 100%;
  height: 100%;
}
#cover .abstract {
  position: absolute;
  bottom: 100px;
  right: 0;
  padding-right: 90px;
  text-align: center;
  font-family: colfax-web, sans-serif;
  color: #fff;
  -webkit-text-shadow: 0 0 10px #242424;
  -moz-text-shadow: 0 0 10px #242424;
  -ms-text-shadow: 0 0 10px #242424;
  -o-text-shadow: 0 0 10px #242424;
  text-shadow: 0 0 10px #242424;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
#cover .spinner {
  display: none;
}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotator {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotator {
  0% {
    -ms-transform: rotate(0deg);
  }

  100% {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotator {
  0% {
    -o-transform: rotate(0deg);
  }

  100% {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading {
  overflow: hidden;
}

.loading #cover {
  background-color: #F9F9ED;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.loading #cover .slime {
  display: none;
}
.loading #cover img {
  display: none;
}
.loading #cover .abstract {
  display: none;
}
.loading #cover .spinner {
  display: block;
  position: absolute;
  width: 200px;
  height: 1px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  background: #000;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation: rotator 5s infinite linear;
  -moz-transform-origin: 50% 50%;
  -moz-animation: rotator 5s infinite linear;
  -ms-transform-origin: 50% 50%;
  -ms-animation: rotator 5s infinite linear;
  -o-transform-origin: 50% 50%;
  -o-animation: rotator 5s infinite linear;
  transform-origin: 50% 50%;
  animation: rotator 5s infinite linear;
}
.loading #cover .spinner .fill {
  width: 200px;
  height: 1px;
}

#frame {
  float: left;
  overflow: hidden;
  height: 100%;
}

* {
  /* -webkit-backface-visibility: hidden; */
  /* -moz-backface-visibility: hidden; */
  /* -ms-backface-visibility: hidden; */
  /* -o-backface-visibility: hidden; */
  /* backface-visibility: hidden; */
}

.br {
  white-space: normal;
  font-size: 0.01;
  content: ".";
  visibility: hidden;
}

.editorial {
  position: relative;
  height: 36em;
  font-size: 16px;
  margin-top: 100px;
}

.column {
  position: relative;
  float: left;
  width: 24em;
  height: 36em;
  text-align: justify;
  white-space: nowrap;
  line-height: 1.5em;
  margin-right: 1.5em;
  font-family: elena-web-basic, Georgia, serif;
}
.column:first-child {
  margin-left: 1.5em;
}
.column p {
  padding: 0;
  margin: 0;
}
.column p:last-of-type {
  margin: 0;
}
.column p.indent {
  text-indent: 2.25em;
}
.column .lead {
  font-family: colfax-web, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.75em;
  line-height: 1.333333333333333333333333em;
}
.column .spacer {
  display: inline-block;
}
.column .end {
  display: inline-block;
  width: 24em;
}

.interstitial {
  z-index: 85;
  overflow: hidden;
  position: relative;
  float: left;
  margin-top: -100px;
  margin-right: 1.5em;
  height: 100%;
}
.interstitial.nomargin {
  margin: 0;
}
.interstitial img.fill {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
}
.interstitial .parallax {
  position: relative;
  width: 100%;
  height: 100%;
}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotator {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotator {
  0% {
    -ms-transform: rotate(0deg);
  }

  100% {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotator {
  0% {
    -o-transform: rotate(0deg);
  }

  100% {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.parallax {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.quote {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}

.bg-marker {
  position: absolute;
  left: 50%;
  top: 50%;
}

.player-yt, .player-vm {
  position: fixed;
  top: -500px;
}