@font-face {
  font-family: "LA28 Display";
  src: url("LA28Display-Black.woff2") format("woff2"), url("LA28Display-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LA28 Text";
  src: url("LA28Text-Bold.woff2") format("woff2"), url("LA28Text-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LA28 Text";
  src: url("LA28Text-Regular.woff2") format("woff2"), url("LA28Text-Regular.woff") format("woff");
  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 {
  width: 100%;
  max-width: 1024px;
  height: 120px;
  position: relative;
  overflow: hidden;
  color: #000;
  font-family: "LA28 Text";
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
@media all and (min-height: 249px) {
  .banner {
    height: 250px;
  }
}
.banner:hover .copy-container .copy .btn .txt {
  transform: translate(0px, -80px);
}
.banner:hover .copy-container .copy .btn .txt2 {
  transform: translate(0px, 0px);
}
.banner:hover .copy-container .copy .btn .hover-bg {
  transform: translate(0px, 0px);
}
.banner.anim-out {
  opacity: 0;
}
.banner.hidden #logo {
  opacity: 0;
  transform: translate(30px, 0);
}
.banner.hidden .copy-container {
  opacity: 0;
  transform: translate(50px, 0);
}
.banner.hidden #players {
  opacity: 0;
  width: calc(100% + 60px);
  -webkit-mask-size: 1230px 598px;
  mask-size: 1230px 598px;
  -webkit-mask-position: 0px -140px;
  mask-position: 0px -140px;
}
@media all and (max-width: 960px) {
  .banner.hidden #players {
    -webkit-mask-size: 170%;
    mask-size: 170%;
    -webkit-mask-position: top -100px right;
    mask-position: top -100px right;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner.hidden #players {
    width: 120%;
    -webkit-mask-size: 240%;
    mask-size: 240%;
    -webkit-mask-position: center right -800px;
    mask-position: center right -800px;
    background-size: 200%;
  }
}
@media all and (max-height: 220px) {
  .banner.hidden #players {
    width: 100%;
    -webkit-mask-size: 110%;
    mask-size: 110%;
    -webkit-mask-position: center;
    mask-position: center;
    background-size: 200%;
    background-position: left 100px top -100px;
  }
}
@media all and (max-width: 767px) and (max-height: 220px) {
  .banner.hidden #players {
    -webkit-mask-size: 180%;
    mask-size: 180%;
    -webkit-mask-position: left 200px center;
    mask-position: left 200px center;
    background-size: 240%;
    background-position: left top -45vh;
  }
}
.banner.remove-anims #logo, .banner.remove-anims #logo2, .banner.remove-anims #players, .banner.remove-anims #copy-parent {
  transition: all 0ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s !important;
}
.banner #logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 71px;
  height: 101px;
  background-image: url("images/la28-badge.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  z-index: 10;
  display: block;
  transition: all 700ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 0.9s;
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner #logo {
    top: 8px;
    left: 8px;
    width: 61px;
    height: 87px;
  }
}
@media all and (max-height: 220px) {
  .banner #logo {
    top: 6px;
    left: 6px;
    width: 55px;
    height: 79px;
  }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .banner #logo {
    background-image: url("images/la28-badge@2x.webp");
  }
}
.banner #logo2 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 71px;
  height: 101px;
  background-image: url("images/la28-badge.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  z-index: 10;
  display: none;
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner #logo2 {
    bottom: 8px;
    right: 8px;
    width: 50px;
    height: 71px;
    display: block;
  }
}
@media all and (max-height: 220px) {
  .banner #logo2 {
    bottom: auto;
    top: 4px;
    right: 4px;
    width: 50px;
    height: 71px;
  }
}
@media all and (max-width: 767px) and (max-height: 220px) {
  .banner #logo2 {
    top: 6px;
    right: 6px;
    width: 38px;
    height: 54px;
    display: block;
  }
}
@media all and (max-width: 349px) and (max-height: 220px) {
  .banner #logo2 {
    top: 8px;
    width: 38px;
    height: 46px;
  }
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .banner #logo2 {
    background-image: url("images/la28-badge@2x.webp");
  }
}
.banner #big-28 {
  display: none;
}
.banner #players {
  position: absolute;
  top: 0;
  left: -57px;
  width: 745px;
  height: 483px;
  background-image: url("images/players.webp");
  background-repeat: no-repeat;
  background-position: left 57px top;
  background-size: 100%;
  z-index: 8;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='616' height='300' viewBox='0 0 616 300'%3E%3Cpath d='M185.273 111.608V95.9211L174.969 85.5999H107.036L96.7325 95.9211V112.429H0V46.8401L43.6399 3.12477H244.541L288.181 46.8401V141.688L258.941 170.979L132.149 207.277H288.181V291.804H0V187.487L29.2403 158.196L185.273 111.608Z' fill='white'/%3E%3Cpath d='M562.876 148.064C597.032 136.101 611.872 115.49 611.872 85.379C611.872 29.2908 562.876 0 456.659 0C350.442 0 301.446 29.2908 301.446 85.379C301.446 115.49 316.255 136.101 350.442 148.064C313.388 160.437 297.318 182.279 297.318 214.063C297.318 270.151 347.134 299.032 456.628 299.032C566.121 299.032 615.968 270.151 615.968 214.063C615.968 182.31 599.899 160.437 562.844 148.064H562.876ZM456.659 72.5958C485.899 72.5958 501.118 80.0132 501.118 94.4377C501.118 108.862 485.49 116.721 456.659 116.721C427.828 116.721 412.61 108.483 412.61 94.4377C412.61 80.392 428.679 72.5958 456.659 72.5958ZM456.659 224.763C426.6 224.763 410.562 217.346 410.562 202.921C410.562 188.497 426.631 180.637 456.659 180.637C486.687 180.637 503.166 188.055 503.166 202.921C503.166 217.787 487.538 224.763 456.659 224.763Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='616' height='300' viewBox='0 0 616 300'%3E%3Cpath d='M185.273 111.608V95.9211L174.969 85.5999H107.036L96.7325 95.9211V112.429H0V46.8401L43.6399 3.12477H244.541L288.181 46.8401V141.688L258.941 170.979L132.149 207.277H288.181V291.804H0V187.487L29.2403 158.196L185.273 111.608Z' fill='white'/%3E%3Cpath d='M562.876 148.064C597.032 136.101 611.872 115.49 611.872 85.379C611.872 29.2908 562.876 0 456.659 0C350.442 0 301.446 29.2908 301.446 85.379C301.446 115.49 316.255 136.101 350.442 148.064C313.388 160.437 297.318 182.279 297.318 214.063C297.318 270.151 347.134 299.032 456.628 299.032C566.121 299.032 615.968 270.151 615.968 214.063C615.968 182.31 599.899 160.437 562.844 148.064H562.876ZM456.659 72.5958C485.899 72.5958 501.118 80.0132 501.118 94.4377C501.118 108.862 485.49 116.721 456.659 116.721C427.828 116.721 412.61 108.483 412.61 94.4377C412.61 80.392 428.679 72.5958 456.659 72.5958ZM456.659 224.763C426.6 224.763 410.562 217.346 410.562 202.921C410.562 188.497 426.631 180.637 456.659 180.637C486.687 180.637 503.166 188.055 503.166 202.921C503.166 217.787 487.538 224.763 456.659 224.763Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 615px 299px;
  mask-size: 615px 299px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 8px -15px;
  mask-position: 8px -15px;
  transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 0.5s;
}
@media all and (max-width: 960px) {
  .banner #players {
    width: calc(100% - 300px);
    top: -10px;
    left: 0;
    height: calc(100% + 20px);
    -webkit-mask-size: 120%;
    mask-size: 120%;
    -webkit-mask-position: top right;
    mask-position: top right;
    background-position: left top 10px;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner #players {
    width: 140%;
    margin-left: -20%;
    -webkit-mask-size: 140%;
    mask-size: 100%;
    -webkit-mask-position: center right;
    mask-position: center right;
    background-position: left -20% top;
    background-size: 130%;
  }
}
@media all and (max-width: 389px) and (min-height: 221px) {
  .banner #players {
    width: 150%;
  }
}
@media all and (max-height: 220px) {
  .banner #players {
    width: 390px;
    height: calc(100% + 20px);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    background-size: 150%;
    background-position: left top -10px;
  }
}
@media all and (max-height: 220px) and (min-width: 961px) {
  .banner #players {
    width: 480px;
    left: 100px;
  }
}
@media all and (max-width: 767px) and (max-height: 220px) {
  .banner #players {
    width: 100%;
  }
}
@media all and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .banner #players {
    background-image: url("images/players@2x.webp");
  }
}
.banner .copy-container {
  position: absolute;
  top: 0;
  right: 16px;
  width: 350px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 1.3s;
}
@media all and (max-width: 960px) {
  .banner .copy-container {
    width: 250px;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner .copy-container {
    right: auto;
    left: 148px;
    width: 300px;
  }
}
@media all and (max-width: 680px) and (min-height: 221px) {
  .banner .copy-container {
    left: 108px;
  }
}
@media all and (max-width: 420px) and (min-height: 221px) {
  .banner .copy-container {
    left: 58px;
  }
}
@media all and (max-height: 220px) {
  .banner .copy-container {
    width: 300px;
  }
}
@media all and (max-width: 767px) and (max-height: 220px) {
  .banner .copy-container {
    right: auto;
    left: 64px;
    max-width: calc(100% - 60px);
  }
}
@media all and (max-width: 370px) and (max-height: 220px) {
  .banner .copy-container {
    left: 56px;
  }
}
@media all and (max-width: 349px) and (max-height: 220px) {
  .banner .copy-container {
    max-width: 100%;
    right: auto;
    left: 40px;
    width: calc(100% - 50px);
  }
}
.banner .copy-container .copy .subtitle {
  font-family: "LA28 Text";
  font-weight: normal;
  font-size: 16px;
  line-height: 1.2;
  color: #FF0080;
  margin: 0 0 12px;
}
@media all and (max-width: 960px) {
  .banner .copy-container .copy .subtitle {
    margin: 0 0 8px;
  }
}
@media all and (max-height: 220px) {
  .banner .copy-container .copy .subtitle {
    display: none;
  }
}
.banner .copy-container .copy .title {
  font-family: "LA28 Display";
  font-weight: 900;
  font-size: 42px;
  line-height: 0.92;
  color: #000000;
  margin: 0 0 12px;
  transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 1.4s;
}
@media all and (max-width: 960px) {
  .banner .copy-container .copy .title {
    font-size: 32px;
    margin: 0 0 8px;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner .copy-container .copy .title {
    font-size: 36px;
  }
}
@media all and (max-width: 360px) and (min-height: 221px) {
  .banner .copy-container .copy .title {
    font-size: 34px;
  }
}
@media all and (max-height: 220px) {
  .banner .copy-container .copy .title {
    font-size: 26px;
    margin: 0 0 4px;
  }
}
@media all and (max-width: 349px) and (max-height: 220px) {
  .banner .copy-container .copy .title {
    font-size: 24px;
  }
}
.banner .copy-container .copy .btn {
  position: relative;
  background-color: #FF0080;
  padding: 8px 16px;
  color: #fff;
  font-family: "LA28 Text";
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  margin: 0 0 40px;
  text-transform: uppercase;
  display: inline-block;
  overflow: hidden;
  transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 1.5s;
}
@media all and (max-width: 960px) {
  .banner .copy-container .copy .btn {
    font-size: 12px;
    margin: 0 0 20px;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner .copy-container .copy .btn {
    margin: 0 0 40px;
  }
}
@media all and (max-height: 220px) {
  .banner .copy-container .copy .btn {
    font-size: 11px;
    margin: 0 0 8px;
    padding: 6px 12px;
  }
}
.banner .copy-container .copy .btn .txt {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 5;
  transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
}
.banner .copy-container .copy .btn .txt2 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0px, 40px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 6;
  transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
}
.banner .copy-container .copy .btn .hover-bg {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0px, 100%);
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
  transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
}
.banner .copy-container .copy .terms {
  font-family: "LA28 Text";
  font-weight: bold;
  font-size: 9.5px;
  line-height: 1.2;
  color: #000;
  transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  transition-delay: 1.6s;
}
@media all and (max-width: 960px) {
  .banner .copy-container .copy .terms {
    font-size: 9px;
  }
}
@media all and (max-width: 767px) and (min-height: 221px) {
  .banner .copy-container .copy .terms {
    padding-right: 60px;
  }
}
@media all and (max-height: 220px) {
  .banner .copy-container .copy .terms {
    font-size: 8px;
  }
}
@media all and (max-width: 349px) and (max-height: 220px) {
  .banner .copy-container .copy .terms {
    width: calc(100% + 30px);
    font-size: 7px;
  }
}

#mobile-size, #mobile-size1, #mobile-size2, #mobile-size3 {
  display: none;
}

@media all and (max-width: 767px) and (min-height: 221px) {
  #mobile-size {
    display: block;
  }
}

@media all and (max-width: 389px) and (min-height: 221px) {
  #mobile-size1 {
    display: block;
  }
}

@media all and (max-width: 767px) and (max-height: 220px) {
  #mobile-size2 {
    display: block;
  }
}

@media all and (max-width: 349px) and (max-height: 220px) {
  #mobile-size3 {
    display: block;
  }
}

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