* {
  box-sizing: border-box; }

html {
  background-color: black;
  font-size: 16px; }

body {
  margin: 0;
  padding: 0;
  font-family: "Source Code Pro", Arial;
  text-transform: uppercase; }

section {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: white;
  display: flex;
  border-bottom: 4px solid black;
  position: relative; }
  @media only screen and (max-width: 650px) {
    section {
      flex-wrap: wrap; } }

img {
  width: 100vw;
  height: 100vh;
  object-fit: cover; }

p {
  padding: 4vw;
  font-size: 1rem;
  line-height: 1.6rem;
  background-color: black; }
  @media only screen and (max-width: 1054px) {
    p {
      font-size: 1.1rem;
      line-height: 1.5rem; } }
  @media only screen and (max-width: 650px) {
    p {
      font-size: 1rem; } }

@media only screen and (max-width: 1054px) {
  .section-one {
    height: 200vh; } }
.section-one img {
  width: 70vw;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 1054px) {
    .section-one img {
      width: 100vw; } }
.section-one svg {
  height: 100vh;
  position: absolute;
  right: 20vw;
  z-index: 2; }
  @media only screen and (max-width: 1054px) {
    .section-one svg {
      width: 80vw;
      right: 10vw; } }
.section-one .intro-lede {
  position: relative;
  z-index: 3;
  width: 25vw;
  padding: 5vh 5vh;
  margin: 8vh auto;
  border-left: 1px solid white; }
  @media only screen and (max-width: 1054px) {
    .section-one .intro-lede {
      position: absolute;
      top: 100vh;
      left: 10vw;
      width: 80vw;
      padding: 0 0;
      border-left: none; } }
  .section-one .intro-lede p {
    padding: 0; }
  .section-one .intro-lede .small {
    padding-top: 5px;
    font-size: 0.8rem;
    border-top: 1px solid white; }
    @media only screen and (max-width: 1054px) {
      .section-one .intro-lede .small {
        padding: 20px 0;
        font-size: 0.7rem; } }

.section-four p {
  position: absolute;
  top: -20px; }
  @media only screen and (max-width: 650px) {
    .section-four p {
      position: relative; } }

.section-six img {
  width: 60vw; }
  @media only screen and (max-width: 650px) {
    .section-six img {
      width: 100vw; } }
  @media only screen and (max-width: 1054px) {
    .section-six img {
      object-position: 60% 50%; } }

@media only screen and (max-width: 1054px) {
  .section-seven img {
    object-position: 65% 50%; } }

@media only screen and (max-width: 650px) {
  .section-eight img {
    object-position: top left; } }
@media only screen and (max-width: 1054px) {
  .section-eight img {
    object-position: 10% 50%; } }

.section-ten p {
  position: absolute;
  bottom: -20px;
  padding-top: 40px; }
  @media only screen and (max-width: 650px) {
    .section-ten p {
      position: relative;
      bottom: 200px; } }

.section-twelve p {
  position: absolute; }

@media only screen and (max-width: 650px) {
  .section-fourteen {
    min-height: 230vh; }
    .section-fourteen p {
      margin-top: -180px; } }
.section-fourteen img {
  width: 60vw; }
  @media only screen and (max-width: 650px) {
    .section-fourteen img {
      width: 100vw; } }

.w40 {
  width: 40vw; }
  @media only screen and (max-width: 650px) {
    .w40 {
      width: 100vw;
      padding: 10vh 10vw; } }

.w20 {
  width: 20vw; }
  @media only screen and (max-width: 1054px) {
    .w20 {
      width: 40vw; } }
  @media only screen and (max-width: 650px) {
    .w20 {
      width: 100vw;
      padding: 10vh 10vw; } }

.h40 {
  height: calc(40vh + 20px); }
  @media only screen and (max-width: 1054px) {
    .h40.w40 {
      height: 35vh;
      width: 100vw; } }
  @media only screen and (max-width: 1054px) {
    .h40.vertical-center {
      width: 40vw; } }
  @media only screen and (max-width: 650px) {
    .h40.vertical-center {
      width: 100vw; } }

.h100 {
  height: 100vh; }

.left {
  left: 0; }

.right {
  right: 0; }

.vertical-center {
  top: calc(50vh - (20vh + 10px)); }
  @media only screen and (max-width: 650px) {
    .vertical-center {
      top: calc(90vh - (20vh + 10px)); } }

@media only screen and (max-width: 650px) {
  .text-section {
    height: 200vh; } }

#mute-button {
  position: fixed;
  right: 30px;
  top: 30px;
  opacity: 0.4;
  z-index: 4; }
  #mute-button:hover {
    opacity: 1;
    cursor: pointer; }
  #mute-button svg {
    width: 30px;
    height: 30px;
    padding: 5px;
    display: none;
    border: 1px solid white; }

.visible {
  display: block !important; }