html {
  background: #000;
}
body {
  font-size: 100%;
  font-family: 'PT Sans', sans-serif;
  line-height: 1.5;
  background: #000;
  color: rgba(255,255,255,0.7);
}
body h1,
body h2,
body h3,
body h4,
body h5 {
  color: #fff;
  font-family: 'Lora';
}
body h1 {
  font-size: 90px;
  line-height: 1.1;
}
@media screen and (max-width: 40em) {
  body h1 {
    font-size: 50px;
    line-height: 1.25;
  }
}
body h2 {
  font-size: 40px;
  line-height: 1.3;
}
@media screen and (max-width: 40em) {
  body h2 {
    font-size: 28px;
    line-height: 1.4;
  }
}
body h4 {
  font-size: 24px;
  margin-bottom: 0.3em;
}
body p {
  font-size: 20px;
  line-height: 1.5;
}
.container {
  width: 100%;
  padding-top: 130px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 1s 2s;
}
.container.out {
  opacity: 0;
}
.container > h1,
.container > h2,
.container > p {
  position: relative;
  z-index: 2;
  width: 80%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.fade {
  transition: all 0.6s;
}
.fade.out {
  opacity: 0;
  transform: translateY(20px);
}
.flow {
  transition: all 0.8s;
}
.flow.out {
  opacity: 0;
}
.flowcontent {
  position: relative;
}
.flowcontent:before {
  display: table;
  content: '';
  width: 1px;
  height: 1200px;
}
.flowcontent .caption {
  position: absolute;
  border-radius: 3px;
  padding: 20px;
  display: block;
  top: 50%;
  left: 10%;
  z-index: 1;
  transform: translateY(-50%);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.flowcontent .caption.right {
  left: auto;
  right: 10%;
}
.flowcontent .imageholder {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
.flowcontent .imageholder.img1 {
  background-image: url("https://dl.dropboxusercontent.com/u/8254962/rihanna-smoke.gif");
}
.flowcontent .imageholder.img2 {
  background-image: url("https://dl.dropboxusercontent.com/u/8254962/pexels-photo-234078%401600px.jpeg");
}
.flowcontent video {
  position: fixed;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
}