:root {
  --bowiered: #d92f26;
  --shootingtime: 3s;
}

body {
  background: #d92f26;
  background: var(--bowiered);
  max-height: 100vh;
  overflow: hidden;
}

.bowie__mainwrapper--flex {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

@media screen and (width <= 575.98px) {
  .bowie__mainwrapper--flex {
    max-width: 96vw;
    min-height: 20vh;
  }
}

@media screen and (width >= 576.02px) and (orientation: landscape) {
  .bowie__mainwrapper--flex {
    max-width: 98vw;
  }
}

@media screen and (width >= 576.02px) and (width <= 767.98px) {
  .bowie__mainwrapper--flex {
    max-width: 98vw;
  }
}

@media screen and (width >= 1199.98px) {
  .bowie__mainwrapper--flex {
    margin: 0 auto;
  }
}

.bowie__innerwrapper--flex {
  height: 100vh;
  margin: 0 auto;
  transition: all 1s linear;
}

@media screen and (width <= 575.98px) {
  .bowie__innerwrapper--flex {
    height: 60vh;
  }
}

.signup__wrapper {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 94%;
  transition: all 1s linear;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 25%;
}

@media screen and (width <= 575.98px) {
  .signup__wrapper {
    width: 50%;
    height: 96%;
    transition: all 1s linear;
    bottom: -23%;
    left: 5%;
  }
}

@media screen and (width >= 576.02px) and (orientation: landscape) {
  .signup__wrapper {
    height: 94%;
    transition: all 1s linear;
  }
}

@media screen and (width >= 576.02px) and (width <= 767.98px) {
  .signup__wrapper {
    height: 94%;
    transition: all 1s linear;
  }
}

@media screen and (width >= 768.02px) and (width <= 1199.98px) {
  .signup__wrapper {
    transition: all 1s linear;
  }
}

@media screen and (width >= 1200.02px) {
  .signup__wrapper {
    width: 70%;
    height: 100%;
    transition: all 1s linear;
    bottom: -10%;
    left: 15%;
  }
}

.bowie--col1 {
  flex: 36%;
  padding: 50px 0 10px;
}

.bowie--col2 {
  flex: 30%;
  padding: 10px;
}

.bowie--col3 {
  flex: 36%;
  padding: 10px;
}

.bowie--bdyimg {
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 6;
  animation: 3s cubic-bezier(.47, 0, .745, .715) 1.5s both puff-in-center;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media screen and (width <= 575.98px) {
  .bowie--bdyimg {
    height: 86%;
    transition: all 1s linear;
    right: -45%;
  }
}

@media screen and (width >= 576.02px) and (orientation: landscape) {
  .bowie--bdyimg {
    width: auto;
    height: 94%;
    transition: all 1s linear;
  }
}

@media screen and (width >= 576.02px) and (width <= 767.98px) {
  .bowie--bdyimg {
    height: 94%;
    transition: all 1s linear;
    right: -27%;
  }
}

@media screen and (width >= 768.02px) and (width <= 1199.98px) {
  .bowie--bdyimg {
    width: auto;
    transition: all 1s linear;
    right: -8%;
  }
}

@media screen and (width >= 1200.02px) {
  .bowie--bdyimg {
    width: auto;
    height: 96%;
    transition: all 1s linear;
  }
}

.bowie--shoeimg {
  mix-blend-mode: multiply;
  width: 100%;
  max-width: 250px;
  height: auto;
}

.bowie__btn--shop {
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 1em 1.8em;
  font-family: franklin-gothic-atf, Arial Narrow Bold, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: all 1s linear;
}

.bowie-svg {
  z-index: 2;
  align-self: center;
  align-items: center;
  width: 100%;
  max-width: 650px;
  transition: all 1s linear;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

.bowie-svg path {
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1px;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000px;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation-name: draw-stroke, draw-fill, draw-stroke-opacity;
  animation-duration: 2s, 1s, .5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-delay: 1.5s, 2s, 2.5s;
  animation-fill-mode: forwards;
}

.bowie-svg path.bowie-path-lightning {
  animation-name: draw-stroke, draw-fill, draw-stroke-opacity;
  animation-duration: 2s, 1s, .5s;
  animation-delay: 1.5s, 2s, 2.5s;
}

.bowie-svg path.bowie-path-bowie {
  animation-name: draw-stroke, draw-fill, draw-stroke-opacity;
  animation-duration: 4s, 1s, .5s;
  animation-delay: 0s, 2s, 2.5s;
}

.bowie-svg path.bowie-path-vans, .bowie-svg path.bowie-path-vans.bowie-path-vans-stars-text {
  animation-name: draw-stroke, draw-fill, draw-stroke-opacity;
  animation-duration: 12s, 1s, .5s;
  animation-delay: 0s, 2s, 2.5s;
}

.cls-1 {
  fill: #fff;
}

.bowie--text {
  letter-spacing: .2em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 3px 5px #fff6;
  font-family: franklin-gothic-atf, Arial Narrow Bold, Arial, sans-serif;
  font-size: 28px;
  transition: font-size .2s;
}

@media screen and (width >= 2260px) {
  .bowie--text {
    font-size: 3.6vw;
  }
}

@media only screen and (width >= 451px) and (width <= 767px) {
  .bowie--text {
    font-size: 2.2vw;
  }
}

.bowie--copyright_DONOTREMOVE {
  color: #fff;
  letter-spacing: 0;
  writing-mode: vertical-lr;
  text-rendering: optimizespeed;
  opacity: .5;
  z-index: 5;
  font-family: franklin-gothic-atf, Arial Narrow Bold, Arial, sans-serif;
  font-size: 10px;
  position: absolute;
  right: 0;
}

@media only screen and (width >= 451px) and (width <= 767px) {
  .bowie--copyright_DONOTREMOVE {
    text-orientation: sideways;
    writing-mode: horizontal-tb;
    font-size: 8px;
    bottom: 0;
    right: 0;
  }
}

.star-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.night {
  z-index: 998;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100px;
  left: -500px;
  transform: rotateZ(110deg);
}

@media screen and (width <= 575.98px) {
  .night {
    top: 0;
    left: 66px;
  }
}

.star {
  --twinkle-duration: "";
  --twinkle-delay: "";
  --star-size: "";
  width: "";
  width: var(--star-size);
  height: "";
  height: var(--star-size);
  animation: infinite alternate twinkle;
  animation-duration: "";
  animation-duration: var(--twinkle-duration);
  animation-delay: "";
  animation-delay: var(--twinkle-delay);
  background: #fff;
  border-radius: 50%;
  position: absolute;
}

.shooting_star {
  filter: drop-shadow(0 0 6px #699bff);
  background: linear-gradient(-45deg, #fff, #00f0);
  border-radius: 999px;
  height: 2px;
  font-size: 1em;
  animation: 3s ease-in-out infinite tail, 3s ease-in-out infinite shooting;
  position: relative;
  top: 50%;
  left: 50%;
}

.shooting_star:before {
  content: "";
  background: linear-gradient(-45deg, #d92f2600, #fff, #d92f2600);
  border-radius: 100%;
  height: 2px;
  animation: 3s ease-in-out infinite shining;
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  transform: translateX(50%)rotateZ(110deg);
}

.shooting_star:after {
  content: "";
  background: linear-gradient(45deg, #00f0, #fff, #00f0);
  border-radius: 100%;
  height: 2px;
  animation: 3s ease-in-out infinite shining;
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  transform: translateX(50%)rotateZ(45deg);
}

.shooting_star:first-of-type {
  animation-delay: .663s;
  top: 63%;
  left: 8%;
}

.shooting_star:first-of-type:before, .shooting_star:first-of-type:after {
  animation-delay: .663s;
}

.shooting_star:nth-of-type(2) {
  animation-timing-function: linear;
  animation-delay: 1.135s;
  top: -21%;
  left: 19%;
}

.shooting_star:nth-of-type(2):before, .shooting_star:nth-of-type(2):after {
  animation-delay: 1.135s;
}

.shooting_star:nth-of-type(3) {
  animation-duration: 7.5s;
  animation-delay: 44ms;
  top: -79%;
  left: 1%;
}

.shooting_star:nth-of-type(3):before, .shooting_star:nth-of-type(3):after {
  animation-delay: 44ms;
}

.shooting_star:nth-of-type(4) {
  animation-delay: .177s;
  top: 5%;
  left: 30%;
}

.shooting_star:nth-of-type(4):before, .shooting_star:nth-of-type(4):after {
  animation-delay: .177s;
}

.shooting_star:nth-of-type(5), .shooting_star:nth-of-type(5):before, .shooting_star:nth-of-type(5):after {
  animation-delay: .887s;
}

.fa-stars {
  color: #fff;
}

.loader {
  z-index: 9999;
  width: 175px;
  height: 175px;
  animation: 2s ease-in-out infinite both ping;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.focus-in-contract {
  animation: 1s cubic-bezier(.25, .46, .45, .94) 6s both focus-in-contract;
}

.focus-in-contract-bck, .focus-in-contract-bck-delayed {
  animation: 3s cubic-bezier(.25, .46, .45, .94) both focus-in-contract-bck;
}

@keyframes draw-stroke {
  0% {
    color: #fff;
  }

  100% {
    stroke-dashoffset: 0;
    color: #fff;
  }
}

@keyframes draw-stroke-opacity {
  0% {
    stroke-opacity: 1;
  }

  100% {
    stroke-opacity: 0;
  }
}

@keyframes draw-fill {
  0% {
    fill-opacity: 0;
  }

  100% {
    fill-opacity: 1;
  }
}

@keyframes filter-animation {
  0% {
    filter: blur(1px);
  }

  50% {
    filter: blur(.75px);
  }

  100% {
    filter: none;
  }
}

@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    filter: blur();
    opacity: .75;
    text-shadow: 2px 0 #fff;
  }
}

@keyframes focus-in-contract-bck {
  0% {
    filter: blur(12px);
    opacity: 0;
    transform: translateZ(300px);
  }

  100% {
    filter: blur();
    opacity: 1;
    transform: translateZ(12px);
  }
}

@keyframes twinkle {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.5);
    box-shadow: 0 0 5px .5px #96969699;
  }
}

@keyframes ping {
  0% {
    opacity: .8;
    transform: scale(.2);
  }

  80% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes puff-in-center {
  0% {
    filter: blur(4px);
    opacity: 0;
    transform: scale(2);
  }

  100% {
    filter: blur();
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tail {
  0% {
    width: 0;
  }

  20% {
    width: 150px;
  }

  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@keyframes shooting {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translateX(500px);
  }
}