@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Arizonia&family=Fira+Sans:wght@300;400;500;600&display=swap");

html,
body {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Fira Sans", sans-serif;
  color: white;
}

#map {
  top: 0;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 0;
  background-image: url("pics/d2.jpg");
  background-size: cover;
  transition: background-image 0.8s ease-in-out,
    background-position 0.8s ease-in-out;
  background-position: 30% bottom;
}

#video-container {
  top: 0;
  bottom: 0;
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 1;
  background-color: black;
}

@keyframes bouncingdown {
  0% {
    left: -100%;
    animation-timing-function: cubic-bezier(1, 0, 1, 1);
  }
  40% {
    left: 0;
    animation-timing-function: cubic-bezier(0, 1, 0, 1);
  }
  60% {
    left: -7%;
    animation-timing-function: cubic-bezier(0.38, 0.01, 1, 1);
  }
  100% {
    left: 0;
  }
}

#video-container.off {
  left: -100%;
  transition: left 0.8s cubic-bezier(0.8, 0, 0.1, 1);
}

#video-container.on {
  left: 0;
  animation: bouncingdown 2s ease-out;
}

#video-container #agnoplay {
  height: 0;
  padding-bottom: 56%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: border 7s ease;
}

#video-container #agnoplay.on {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

#video-container #agnoplay.off {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.video-js .vjs-big-play-button {
  opacity: 0;
}

.video-js .vjs-control-bar {
  visibility: hidden;
  transform: translateY(3em);
}

.video-js .vjs-control-bar > div:not(.vjs-play-progress),
.video-js .vjs-control-bar > button {
  visibility: hidden;
}

.video-js .vjs-play-progress {
  visibility: visible;
}

#controls_container {
  position: fixed;
  width: 200px;
  height: 70px;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 2;
}

#controls {
  right: 15px;
  position: absolute;
  z-index: 5;
  transition: bottom 0.4s 0.8s ease-in-out;
}

#controls.off {
  bottom: -200px;
}

#controls.on {
  bottom: 15px;
}

#controls button {
  cursor: pointer;
  padding: 2em;
  background-color: transparent;
  background-size: cover;
  border: none;
}

#controls button#btnpl {
  background-image: url("pics/controls/play.svg");
}

#controls button#btnfb {
  background-image: url("pics/controls/fb.svg");
}

#controls button#btnff {
  background-image: url("pics/controls/ff.svg");
}

section {
  width: 100%;
  padding: 0;
  background-color: white;
}

header {
  margin: 0;
  width: 100%;
  height: 100vh;
  padding: 34vh 2vh 0 2vh;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  background-color: black;
  overflow: hidden;
  background-image: url("pics/d1.jpg");
  background-size: cover;
  background-position: 75% bottom;
}

@media screen and (min-width: 1200px) {
  header {
    padding-top: 34vh;
  }
}

header::after {
  position: absolute;
  width: 360px;
  height: 200px;
  color: #ff9903;
  bottom: -130px;
  left: 90%;
  transform: translateX(-50%);
  font: 400 2em "Arizonia", cursive;
  content: "\21E3";
  line-height: 2em;
  animation: breathe 4s infinite;
}

header div#byline {
  position: absolute;
  bottom: 1em;
  left: 1em;
  font: 300 1em "Fira Sans", sans-serif;
  text-align: left;
}

header div#byline h5 {
  font: 600 1em "Fira Sans", sans-serif;
  padding: 0;
  margin: 0;
}

header div#byline p {
  font: 300 1em "Fira Sans", sans-serif;
  padding: 0.2em 0 0 0.5em;
  text-transform: uppercase;
  margin: 0;
}

@keyframes breathe {
  0% {
    color: #ddd9c5;
  }
  33% {
    color: #ddd9c5;
  }
  66% {
    color: #363635;
  }
  100% {
    color: #363635;
  }
}

header h1 {
  font: normal 3em "Bebas Neue", sans-serif;
  margin: 0 auto;
  text-align: center;
}

header h3 {
  font: 400 1.6em "Bebas Neue", sans-serif;
  padding: 0 0 0.5em 0;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

footer {
  position: relative;
  width: 100%;
  background-color: black;
  padding: 1em 1em 10em 1em;
  box-sizing: border-box;
}

#features {
  padding: 10vh 0;
  width: 90vw;
  margin: 0 auto;
}

#features h3 {
  font: 600 1rem "Fira Sans", sans-serif;
}

#features h4 {
  font: 400 1.3rem "Julius Sans One", sans-serif;
  text-transform: uppercase;
}

#features p {
  font: 400 1.2rem "Fira Sans", sans-serif;
  line-height: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

div#windowed {
  position: relative;
  height: 25vh;
  background-image: url("pics/d15.jpg");
  background-position-x: 30%;
  background-position-y: 100%;
  background-size: cover;
}

.step {
  opacity: 0.9;
  margin: 0 0 80vh 0;
}

.step:nth-of-type(1) {
  margin-top: 40em;
}

.step:nth-of-type(8) {
  visibility: hidden;
}

.step > div {
  padding: 1em 2em;
  background-color: rgba(0, 0, 0, 0.3);
}

.step.transp {
  visibility: hidden;
}

.hidediv {
  display: none;
}

article {
  position: relative;
  background-color: white;
  color: black;
}

article h1 {
  font: 500 2em "Fira Sans", sans-serif;
  text-align: center;
  margin: auto;
  max-width: 700px;
  padding: 1em;
}

article h2 {
  font: 400 1.4em "Fira Sans", sans-serif;
  text-align: center;
  margin: auto;
  max-width: 700px;
  padding: 1em;
}

article h3,
footer h3 {
  font: 300 2em "Fira Sans", sans-serif;
  text-align: center;
  margin: 0;
  padding: 1em;
}

article p,
footer p {
  padding: 1em;
  font: 300 1.1em "Fira Sans", sans-serif;
  line-height: 1.6em;
  margin: auto;
  max-width: 700px;
}

article > img {
  display: block;
  max-width: 100%;
  height: auto;
}

#box0 > section:nth-of-type(1) {
  background-image: url("pics/d10.jpg");
  background-size: cover;
  background-position: left 30% center;
}

#box1 > section:nth-of-type(1) {
  background-color: black;
  background-repeat: no-repeat;
  background-image: url("pics/d11.jpg");
  background-size: contain;
  background-position: left center;
}

#box2 > section:nth-of-type(1) {
  background-image: url("pics/d12.jpg");
  background-size: cover;
  background-position: right 20% center;
}

div.box_container {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

div.box_container > section {
  position: absolute;
  height: 100vh;
}

div.box_container > section > p {
  margin: 0;
  padding: 4em;
}

div.box_container section.b {
  z-index: 2;
  position: absolute;
}

div.box_container section.c {
  background-color: transparent;
  z-index: 3;
  top: 100%;
  position: absolute;
}

div.box_container section.c h1 {
  font: 500 1.5em "Fira Sans", sans-serif;
  margin: auto 20px auto auto;
  text-align: right;
}

div.box_container section.c p {
  font: 500 1.1em "Fira Sans", sans-serif;
  margin: 0;
  line-height: 1.6em;
  text-align: right;
  padding: 1em 0.5em;
  box-sizing: border-box;
}

div.box_container section.c.opa p {
  background-color: rgba(0, 0, 0, 0.3);
}

div#box2 section.c p {
  text-align: left;
}

aside {
  margin: 1em auto;
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  padding: 1em;
  border-radius: 10px;
  border: 1px solid white;
  background-color: rgba(0, 156, 210, 0.6);
  color: white;
  font: 300 1em "Fira Sans", sans-serif;
}

aside h1 {
  padding: 0;
  margin: 0 0 1em 0;
  font-size: 1.2em;
}

@media screen and (min-width: 700px) {
  header h1 {
    font: normal 4em "Bebas Neue", sans-serif;
  }

  #features {
    width: 50vw;
    margin: 0 auto;
  }

  #features p {
    font: 400 1.5rem "Fira Sans", sans-serif;
    line-height: 2rem;
  }

  header::after {
    left: 50%;
    transform: translateX(-50%);
  }

  div#windowed {
    height: 40vh;
  }

  div.box_container section.c p {
    max-width: 370px;
    margin: auto 0 auto auto;
    padding: 1em;
  }

  div#box2 section.c p {
    max-width: 370px;
    margin: auto auto auto 0;
  }
}

@media screen and (min-width: 1050px) {
  div.box_container section.c h1,
  div.box_container section.c p {
    max-width: 40%;
    margin: auto 10% auto auto;
    padding: 1em;
    text-align: center;
  }

  div#box1 section.c h1,
  div#box1 section.c p {
    max-width: 35%;
    margin: auto 5% auto auto;
  }
}

@media screen and (min-width: 1200px) {
  div#box1 section.c h1,
  div#box1 section.c p {
    max-width: 35%;
    margin: auto 10% auto auto;
  }
}