* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.white {
  color: white;
}
.blue {
  color: #003463;
}
.headline {
  font: normal normal bold 63px/73px Open Sans;
  text-align: center;
  margin-bottom: 30px;
}
@media (max-width: 1280px) {
  .headline {
    font: normal normal bold 48px/59px Open Sans;
    margin-bottom: 18px;
  }
}
@media (max-width: 599px) {
  .headline {
    font: normal normal bold 32px/42px Open Sans;
  }
}
.subline {
  font: normal normal bold 48px/59px Open Sans;
}
@media (max-width: 1280px) {
  .subline {
    font: normal normal bold 40px/50px Open Sans;
  }
}
@media (max-width: 599px) {
  .subline {
    font: normal normal bold 32px/42px Open Sans;
  }
}
.content-container {
  width: 100%;
  margin: 0 auto;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
html body {
  font: normal normal normal 16px/22px Open Sans;
  color: #E3E1D1;
  overflow-x: hidden;
}
html body header {
  position: relative;
  height: 100vh;
  min-height: 750px;
  padding: 0 36px;
}
html body header .logo-fixed {
  position: fixed;
  max-width: 320px;
  width: 100%;
  top: -1px;
  left: -1px;
  z-index: 99;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}
html body header .content-container {
  position: relative;
  z-index: 2;
  max-width: 570px;
  margin: 0 auto;
  padding-top: 28vh;
}
html body header .content-container .text-block {
  color: white;
  margin-bottom: 60px;
}
html body header .content-container .text-block .headline {
  margin-bottom: 39px;
  font-size: 46px;
  line-height: 59px;
  text-align: left;
}
html body header .content-container .text-block p {
  margin-bottom: 22px;
}
html body header .content-container .text-block p:last-child {
  margin-bottom: 0;
}
html body header .content-container #header-scroll-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10px;
  box-sizing: content-box;
  padding: 0 20px;
  margin: 0 auto;
  cursor: pointer;
  text-decoration: none;
}
html body header .content-container #header-scroll-down:after {
  content: "scroll";
  position: relative;
  text-transform: uppercase;
  font: normal normal bold 14px/14px Open Sans;
  margin-top: 15px;
  color: #9C9770;
}
@media (max-width: 1280px) {
  html body header .content-container {
    max-width: 484px;
    min-height: 560px;
  }
  html body header .content-container .text-block .headline {
    font-size: 38px;
    line-height: 51px;
  }
}
html body header .header-balls {
  position: absolute;
  top: 0;
}
html body header .header-balls#header-balls-left {
  left: 5vw;
  width: 25vw;
  transform: scaleX(-1);
}
html body header .header-balls#header-balls-right {
  right: 6vw;
  width: 28vw;
}
html body header .header-mask {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 101%;
}
html body header .background-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
html body header .background-video-wrap .background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html body header .background-video-wrap .gradient-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg,#01071E 0%,#01071E00 100%);
}
@media (max-width: 1099px) and (min-height: 1000px) {
  html body header .content-container {
    padding-top: 40vh;
  }
  html body header .header-balls#header-balls-left {
    left: 10vw;
    width: 32vw;
  }
  html body header .header-balls#header-balls-right {
    right: 8vw;
    width: 49vw;
  }
}
@media (max-width: 599px) {
  html body header {
    min-height: 850px;
  }
  html body header .logo-fixed {
    width: 320px;
  }
  html body header .content-container {
    padding-top: 83vw;
  }
  html body header .content-container .text-block {
    margin-bottom: 30px;
  }
  html body header .content-container .text-block .headline {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 16px;
  }
  html body header .header-balls#header-balls-left {
    left: 2vw;
    width: 48vw;
  }
  html body header .header-balls#header-balls-right {
    right: 2vw;
    width: 56vw;
  }
}
@media (min-width: 1099px) and (max-height: 999px) {
  html body header .content-container {
    padding-top: 22vh;
  }
}
@media (min-width: 1099px) and (max-height: 899px) {
  html body header .content-container {
    padding-top: 13vh;
  }
  html body header .header-balls#header-balls-left {
    width: 23vw;
  }
}
@media (min-width: 1099px) and (max-height: 799px) {
  html body header .content-container {
    padding-top: 4vh;
  }
  html body header .header-balls#header-balls-left {
    left: 6vw;
    width: 20vw;
  }
  html body header .header-balls#header-balls-right {
    width: 24vw;
  }
}
@media (min-width: 1099px) and (max-height: 730px) {
  html body header .content-container {
    padding-top: 30px;
  }
}
html body main .office-lights {
  position: relative;
  background-color: white;
  text-align: center;
  padding: 316px 37px 400px;
  transition: .9s ease-out;
}
html body main .office-lights #lights_switch {
  width: 77px;
  height: 77px;
  margin: 0 auto;
}
html body main .office-lights .content-container {
  max-width: 716px;
}
html body main .office-lights .content-container img {
  width: 55px;
  height: 55px;
  margin-top: 96px;
  margin-bottom: 6px;
}
@media (max-width: 1280px) {
  html body main .office-lights .content-container {
    max-width: 574px;
  }
}
html body main .office-lights.bg-blue {
  background-color: #01071e;
}
html body main .office-lights .lights-mask {
  position: absolute;
  bottom: -5px;
  left: -2px;
  width: 101%;
}
html body main .office-lights:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 460px;
  width: 100%;
  background: transparent linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 100%) 0% 0% no-repeat padding-box;
}
@media (min-width: 1280px) {
  html body main .office-lights:before {
    height: 592px;
  }
}
@media (max-width: 1280px) {
  html body main .office-lights {
    padding: 316px 37px 300px;
  }
}
@media (max-width: 599px) {
  html body main .office-lights {
    padding: 130px 37px 150px;
  }
}
html body main .jukeboxes {
  padding: 67px 37px 164px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
html body main .jukeboxes .header-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
html body main .jukeboxes #boxen {
  width: 143px;
  margin: 0 auto;
}
html body main .jukeboxes .content-container {
  max-width: 826px;
}
@media (max-width: 1280px) {
  html body main .jukeboxes .content-container {
    max-width: 574px;
  }
}
html body main .jukeboxes .jukebox-container {
  display: flex;
  justify-content: space-between;
  padding: 0 6vw;
  width: 75.3vw;
  min-width: 1110px;
  margin-top: 60px;
  background-image: url('/assets/images/background_jukebox.svg');
  background-repeat: no-repeat;
  background-position: top 90px center;
  background-size: contain;
}
@media (max-width: 1199px) {
  html body main .jukeboxes .jukebox-container {
    min-width: auto;
    width: 95vw;
  }
}
@media (max-width: 799px) {
  html body main .jukeboxes .jukebox-container {
    flex-direction: column;
    align-items: center;
    background-position: top center;
    padding: 20vw 35px 0;
  }
}
html body main .jukeboxes .jukebox-container .jukebox-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html body main .jukeboxes .jukebox-container .jukebox-box .animation {
  max-width: 400px;
  width: 100%;
}
html body main .jukeboxes .jukebox-container .jukebox-box .jukebox-style {
  font: normal normal bold 14px/18px Open Sans;
  text-align: center;
  text-transform: uppercase;
  color: #003463;
  margin-top: 25px;
  margin-bottom: 7px;
}
@media (max-width: 799px) {
  html body main .jukeboxes .jukebox-container .jukebox-box .jukebox-style {
    margin-top: 0;
  }
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container {
  background-color: #003463;
  transition: .3s;
  width: 148px;
  height: 47px;
  cursor: pointer;
  position: relative;
  box-shadow: 0px 3px 6px #00000029;
}
@media (max-width: 799px) {
  html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container {
    margin-bottom: 25px;
  }
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button,
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button {
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s;
  background-repeat: no-repeat;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  z-index: 0;
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button:after,
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button:after {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: #003463;
  opacity: 0;
  bottom: -23px;
  font: normal normal bold 14px/18px Open Sans;
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button.show,
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button.show {
  opacity: 1;
  z-index: 1;
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button.show:after,
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button.show:after {
  opacity: 1;
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button {
  background-image: url(/assets/images/play-button.svg);
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .play-button:after {
  content: "Play";
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button {
  background-image: url(/assets/images/pause-button.svg);
}
html body main .jukeboxes .jukebox-container .jukebox-box .play-pause-button-container .pause-button:after {
  content: "Pause";
}
html body main .facts {
  position: relative;
  background: transparent radial-gradient(closest-side at 50% 50%,#003463 0%,#01071E 100%) 0% 0% no-repeat padding-box;
  padding: 280px 0 300px;
}
html body main .facts #good_vibrations {
  width: 143px;
  margin: 0 auto;
}
html body main .facts .facts-mask-top {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 101%;
}
html body main .facts .content-container {
  max-width: 706px;
  text-align: center;
}
@media (max-width: 1280px) {
  html body main .facts .content-container {
    max-width: 574px;
  }
}
html body main .facts .facts-mask-bottom {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 101%;
}
@media (max-width: 1280px) {
  html body main .facts {
    padding: 240px 0 300px;
  }
}
@media (max-width: 1199px) {
  html body main .facts {
    padding: 160px 0 200px;
  }
}
@media (max-width: 599px) {
  html body main .facts {
    padding-bottom: 130px;
  }
}
html body main .centered-text {
  position: relative;
  text-align: center;
  padding: 187px 37px 250px;
}
html body main .centered-text .footer-logo {
  width: 147px;
  height: 76px;
  margin-bottom: 70px;
}
html body main .centered-text .headline {
  max-width: 852px;
  width: 100%;
  margin: 0 auto;
  color: white;
}
html body main .centered-text #rocket {
  position: absolute;
  width: 500px;
  top: 0;
  left: 50%;
  margin-left: -250px;
}
@media (max-width: 1280px) {
  html body main .centered-text {
    padding-top: 143px;
    padding-bottom: 112px;
  }
  html body main .centered-text .headline {
    max-width: 660px;
    margin: 14px auto 30px;
  }
  html body main .centered-text #rocket {
    width: 400px;
    margin-left: -200px;
  }
}
@media (max-width: 719px) {
  html body main .centered-text {
    padding-top: 130px;
    padding-bottom: 200px;
  }
  html body main .centered-text .headline {
    max-width: 450px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    font: normal normal bold 32px/42px Open Sans;
  }
  html body main .centered-text #rocket {
    width: 370px;
    margin-left: -185px;
  }
}
@media (max-width: 510px) {
  html body main .centered-text {
    padding-top: 26vw;
    padding-bottom: 39vw;
  }
  html body main .centered-text .footer-logo {
    margin-bottom: 6vw;
  }
  html body main .centered-text .headline {
    font-size: 6vw;
    line-height: 1.33em;
    margin-top: 6vw;
  }
  html body main .centered-text #rocket {
    width: 72vw;
    margin-left: -36vw;
  }
}
@media (max-width: 399px) {
  html body main .centered-text #rocket {
    width: 76vw;
    margin-left: -38vw;
  }
}
html body footer .content-container {
  max-width: 220px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
}
html body footer .content-container a {
  text-decoration: none;
  font-weight: bold;
}
html body footer .content-container a:hover {
  opacity: .8;
}
@media (max-width: 1199px) {
  html body footer .content-container {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 1280px) {
  html body {
    font: normal normal normal 14px/20px Open Sans;
  }
}