@font-face {
  font-family: "RWC";
  src: url("rwc-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  background: #fff;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.clicktag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}

.banner {
  font-family: "RWC", Arial, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: normal;
  color: #00000b;
  background-color: #095060;
  line-height: 1.1;
  width: 100%;
  max-width: 1024px;
  height: 250px;
  position: relative;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
}
@media all and (min-height: 122px) {
  .banner {
    height: 500px;
  }
}
.banner.hidden {
  opacity: 0;
}
.banner.hidden #main-bg {
  opacity: 0;
  transform: scale(1);
}
.banner.hidden #text1 {
  opacity: 0;
  transform: scale(0.75);
}
.banner #main-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-image: url("images/main-bg2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(2);
  transition: all 1500ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
  z-index: 2;
}
@media all and (min-height: 122px) {
  .banner #main-bg {
    transform: scale(1);
  }
}
.banner #dust1 {
  position: absolute;
  top: 270px;
  left: 0;
  width: 100%;
  height: 350px;
  overflow: hidden;
  z-index: 22;
  background-image: url("images/dust1-tiled2.webp");
  background-repeat: repeat-x;
  background-size: 456px 350px;
  background-position: 0 50%;
  animation: dust-bg 15s linear infinite;
  will-change: background-position;
  transform: scale(5);
  opacity: 0;
  transition: all 2000ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media all and (min-height: 122px) {
  .banner #dust1 {
    transform: scale(1);
    opacity: 1;
  }
}
.banner #dust2 {
  position: absolute;
  top: 190px;
  left: 90%;
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(2.5);
  opacity: 0;
  transition: all 2500ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
  z-index: 3;
}
@media all and (min-height: 122px) {
  .banner #dust2 {
    left: 0;
    transform: scale(1);
    opacity: 1;
  }
}
.banner #cloud {
  position: absolute;
  top: 0;
  left: -200px;
  width: 1280px;
  height: 500px;
  background: url("images/cloud.webp") no-repeat center;
  background-size: cover;
  pointer-events: none;
  opacity: 0.75;
  z-index: 5;
  animation: cloudFloat 45s linear infinite;
}
@keyframes cloudFloat {
  from {
    transform: translateX(calc(100vw + 0px));
  }
  to {
    transform: translateX(-1480px);
  }
}
.banner #sky-loop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  overflow: hidden;
  z-index: 3;
  transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 65%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 65%, rgba(0, 0, 0, 0) 100%);
}
@media all and (min-height: 122px) {
  .banner #sky-loop {
    opacity: 0;
  }
}
.banner #sky1,
.banner #sky2 {
  position: absolute;
  top: 0;
  width: 1851px;
  height: 160px;
  background: url("images/sky-loop3.webp") no-repeat;
  background-size: 1851px 240px;
  background-position: center bottom;
  animation: skyScroll 90s linear infinite;
  z-index: 1;
}
.banner #sky1 {
  left: 0;
}
.banner #sky2 {
  left: 1850px;
}
@keyframes skyScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1850px);
  }
}
.banner #text1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  transition: all 1500ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
  z-index: 20;
  color: #fff;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media all and (min-height: 122px) {
  .banner #text1 {
    top: -16px;
    transform: scale(0.85);
  }
}
.banner #text1 .copy {
  text-align: center;
}
.banner #text1 .copy span {
  display: block;
}
.banner #text2 {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 120px;
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeInOutCubic */
  z-index: 20;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition-delay: 1.3s;
}
@media all and (min-height: 122px) {
  .banner #text2 {
    top: 50px;
    transform: scale(1);
    opacity: 1;
  }
}
.banner #text2 .copy {
  text-align: center;
}
.banner #text2 .copy span {
  display: block;
}
.banner #logo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 44px;
  height: 57px;
  background-image: url("images/rwc-logo.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.banner #players {
  position: absolute;
  left: 50%;
  top: 250px;
  transform: translate(-50%, 0px) scale(1.5);
  width: 420px;
  height: 422px;
  z-index: 19;
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1200ms cubic-bezier(0.835, 0, 0.2, 1.005); /* easeInOutCubic */
}
@media all and (min-height: 122px) {
  .banner #players {
    opacity: 1;
    top: 200px;
    transform: translate(-50%, 0px) scale(1);
  }
}
.banner #players > div {
  transition: transform 1200ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1200ms cubic-bezier(0.835, 0, 0.2, 1.005); /* easeInOutCubic */
}
.banner #players #player1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/player1.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(0px, 50%);
  z-index: 10;
}
@media all and (min-height: 122px) {
  .banner #players #player1 {
    transform: none;
  }
}
.banner #players #player2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/player2.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-100%, 0px);
  z-index: 9;
}
@media all and (min-height: 122px) {
  .banner #players #player2 {
    transform: none;
  }
}
.banner #players #player3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/player3.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(100%, 0px);
  z-index: 8;
}
@media all and (min-height: 122px) {
  .banner #players #player3 {
    transform: none;
  }
}
.banner #players #player4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/player4.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 7;
}
@media all and (min-height: 122px) {
  .banner #players #player4 {
    transform: none;
  }
}
.banner #btn {
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translate(-50%, 0px) scale(1);
  width: 234px;
  height: 38px;
  background-image: url("images/btn-bg.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 21;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeInOutCubic */
  opacity: 0;
  transition-delay: 1.4s;
}
@media all and (min-height: 122px) {
  .banner #btn {
    top: 150px;
    opacity: 1;
    transform: translate(-50%, 0px) scale(1);
  }
}
.banner #orange-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 147px;
  background-image: url("images/orange-frame@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  z-index: 30;
  transform: translate(0px, 100%);
  transition: all 1500ms cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutCubic */
  transition-delay: 0.5s;
}
@media all and (min-height: 122px) {
  .banner #orange-bar {
    transform: none;
  }
}

@keyframes dust-bg {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 456px 50%;
  }
}
#dust1 > div {
  position: absolute;
  top: 0;
  width: 456px;
  height: 350px;
  background-image: url("images/dust1-tiled2.webp");
  background-repeat: no-repeat;
  background-size: 456px 350px;
  background-position: left center;
  will-change: transform;
}

#dust2 > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background-image: url("images/dust2.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left center;
  will-change: transform;
}

#dust-loop1 {
  left: 0;
  animation: dust-move 15s linear infinite;
}

#dust-loop2 {
  left: 455.999px;
  animation: dust-move 15s linear infinite;
}

@keyframes dust-move {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-456px, 0, 0);
  }
}
@keyframes dust-move-1 {
  from {
    transform: translate3d(0px, 0, 0);
  }
  to {
    transform: translate3d(456px, 0, 0);
  }
}
@keyframes dust-move-2 {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
/* Loop 3 starts ON screen, moves left offscreen */
#dust-loop3 {
  animation: dust-move-rtl-1 18s linear infinite;
}

/* Loop 4 starts OFF screen to the right, moves into place */
#dust-loop4 {
  animation: dust-move-rtl-2 18s linear infinite;
}

@keyframes dust-move-rtl-1 {
  from {
    transform: translate3d(0%, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes dust-move-rtl-2 {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}

/*# sourceMappingURL=styles.css.map */