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;
}

@keyframes logoStart {
  0% {
    width: 0;
  }
  20% {
    width: 430px;
  }
  60% {
    width: 430px;
  }
  80% {
    width: 215px;
  }
  100% {
    width: 215px;
  }
}
@keyframes titleOne {
  0% {
    height: 0;
    margin: 0;
  }
  10% {
    height: 35px;
    margin: -20px 0 0;
  }
  25% {
    height: 35px;
    margin: -20px 0 0;
  }
  35% {
    height: 110px;
    margin: -20px 0 0;
  }
  50% {
    height: 110px;
    margin: -20px 0 0;
  }
  55% {
    height: 160px;
    margin: -20px 0 0;
  }
  75% {
    height: 160px;
    margin: -20px 0 0;
  }
  80% {
    height: 192px;
    margin: -20px 0 0;
  }
  100% {
    height: 192px;
    margin: -20px 0 0;
  }
}
@keyframes background {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes saTeam {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes nzTeam {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes banner {
  0% {
    background: #000000;
  }
  100% {
    background: #3d1510;
  }
}
.banner {
  width: 100%;
  max-width: 970px;
  height: 250px;
  position: relative;
  overflow: hidden;
  background: #000000;
}
.banner .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eu-cdn.rugbypass.com/webp-images/images/banners/rp-space/sa-vs-nz-baltimore/bg.jpg.webp") no-repeat center -20px;
  background-size: cover;
  z-index: 1;
}
.banner .sa {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 205px;
  z-index: 11;
  opacity: 0;
}
.banner .nz {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  z-index: 12;
  opacity: 0;
}
.banner.start {
  animation-name: banner;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
.banner.start .bg {
  animation-name: background;
  animation-duration: 1s;
  animation-delay: 3.4s;
  animation-fill-mode: forwards;
}
.banner.start .sa {
  animation-name: saTeam;
  animation-duration: 0.4s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
.banner.start .nz {
  animation-name: nzTeam;
  animation-duration: 0.4s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

.details {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 970px;
  height: 250px;
  z-index: 2;
}
.details > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.details > div .logo {
  width: 0;
  margin: 20px 0;
}
.details > div .title-1-line {
  width: 460px;
  height: 0;
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.details > div .title-1-line img {
  position: absolute;
  top: 0;
  width: 100%;
}
.details > div .title-2-line {
  position: relative;
  display: none;
  width: 175px;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.details > div .title-2-line img {
  position: absolute;
  top: 0;
  width: 100%;
}
.details.start .logo {
  animation-name: logoStart;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
.details.start .title-1-line {
  animation-name: titleOne;
  animation-duration: 3s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
}
.details.start .title-2-line {
  animation-name: titleTwo;
  animation-duration: 3s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
}

@media all and (max-width: 950px) {
  @keyframes logoStart {
    0% {
      width: 0;
    }
    20% {
      width: 320px;
    }
    45% {
      width: 320px;
    }
    55% {
      width: 190px;
    }
    100% {
      width: 190px;
    }
  }
  @keyframes titleTwo {
    0% {
      height: 0;
      margin: 0;
    }
    5% {
      height: 0;
      margin: 0;
    }
    15% {
      height: 25px;
      margin: -12px 0 0;
    }
    25% {
      height: 25px;
    }
    40% {
      height: 130px;
    }
    50% {
      height: 130px;
    }
    60% {
      height: 170px;
    }
    75% {
      height: 170px;
    }
    85% {
      height: 205px;
    }
    100% {
      height: 205px;
      margin: -12px 0 0;
    }
  }
  .details > div .title-1-line {
    display: none;
  }
  .details > div .title-2-line {
    display: block;
  }
}
@media all and (max-height: 250px) and (max-width: 400px) {
  @keyframes logoStart {
    0% {
      width: 0;
      transform: translateY(0px);
    }
    3% {
      width: 320px;
      transform: translateY(0px);
    }
    5% {
      width: 320px;
      transform: translateY(0px);
    }
    8% {
      width: 190px;
      transform: translateY(-100px);
    }
    20% {
      width: 190px;
      transform: translateY(-100px);
    }
    23% {
      width: 190px;
      transform: translateY(0);
    }
    100% {
      width: 190px;
      transform: translateY(0);
    }
  }
  @keyframes titleTwo {
    0% {
      height: 0;
      margin: -12px 0 0;
      transform: translateY(0px);
    }
    10% {
      height: 0;
      margin: -12px 0 0;
      transform: translateY(0px);
    }
    20% {
      height: 0;
      margin: -12px 0 0;
      transform: translateY(0px);
    }
    22% {
      height: 25px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    30% {
      height: 25px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    33% {
      height: 130px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    40% {
      height: 130px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    42% {
      height: 170px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    50% {
      height: 170px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    52% {
      height: 205px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
    100% {
      height: 205px;
      margin: -12px 0 0;
      transform: translateY(-5px);
    }
  }
  @keyframes saTeam {
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    5% {
      opacity: 0;
      transform: translateX(0px);
    }
    10% {
      opacity: 1;
      transform: translateX(0px);
    }
    20% {
      opacity: 1;
      transform: translateX(0px);
    }
    23% {
      opacity: 0;
      transform: translateX(-175px);
    }
    100% {
      opacity: 0;
      transform: translateX(-175px);
    }
  }
  @keyframes nzTeam {
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    5% {
      opacity: 0;
      transform: translateX(0px);
    }
    10% {
      opacity: 1;
      transform: translateX(0px);
    }
    20% {
      opacity: 1;
      transform: translateX(0px);
    }
    23% {
      opacity: 0.5;
      transform: translateX(195px);
    }
    100% {
      opacity: 0.5;
      transform: translateX(195px);
    }
  }
  .details.start .logo {
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .details.start .title-2-line {
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .banner .bg {
    background: url("https://eu-cdn.rugbypass.com/webp-images/images/banners/rp-space/sa-vs-nz-baltimore/bg.jpg.webp") no-repeat center 0;
  }
  .banner.start .sa {
    width: 170px;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .banner.start .nz {
    width: 190px;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
}
@media all and (max-height: 130px) {
  @keyframes logoStart {
    0% {
      width: 0;
      transform: translateX(150px);
    }
    10% {
      width: 250px;
      transform: translateX(150px);
    }
    60% {
      width: 250px;
      transform: translateX(150px);
    }
    70% {
      width: 190px;
      transform: translateX(0px);
    }
    100% {
      width: 190px;
      transform: translateX(0px);
    }
  }
  @keyframes titleOne {
    0% {
      height: 0;
      margin: 0;
    }
    10% {
      height: 0;
      margin: 0;
    }
    15% {
      height: 20px;
      margin: 0;
    }
    25% {
      height: 20px;
      margin: 0;
    }
    33% {
      height: 65px;
      margin: 0;
    }
    50% {
      height: 65px;
      margin: 0;
    }
    55% {
      height: 95px;
      margin: 0;
    }
    75% {
      height: 95px;
      margin: 0;
    }
    80% {
      height: 120px;
      margin: 0;
    }
    100% {
      height: 120px;
      margin: 0;
    }
  }
  .banner {
    height: 120px;
  }
  .banner .sa {
    width: 100px;
  }
  .banner .nz {
    width: 110px;
  }
  .details {
    height: 120px;
  }
  .details > div {
    flex-direction: row;
    gap: 20px;
  }
  .details > div .title-1-line {
    display: block;
    width: 285px;
  }
  .details > div .title-2-line {
    display: none;
  }
  .details.start .title-1-line {
    animation-delay: 2s;
  }
}
@media all and (max-height: 130px) and (max-width: 400px) {
  @keyframes logoStart {
    0% {
      width: 0;
      transform: translateY(-20px);
    }
    3% {
      width: 180px;
      transform: translateY(-20px);
    }
    20% {
      width: 180px;
      transform: translateY(-20px);
    }
    25% {
      width: 180px;
      transform: translateY(-70px);
    }
    65% {
      width: 180px;
      transform: translateY(-70px);
    }
    100% {
      width: 180px;
      transform: translateY(-70px);
    }
  }
  @keyframes titleOne {
    0% {
      height: 0;
      margin: 0;
      transform: translateY(-50px);
    }
    20% {
      height: 0;
      margin: 0;
      transform: translateY(-50px);
    }
    23% {
      height: 65px;
      margin: 0;
      transform: translateY(-50px);
    }
    30% {
      height: 65px;
      margin: 0;
      transform: translateY(-50px);
    }
    33% {
      height: 95px;
      margin: 0;
      transform: translateY(-50px);
    }
    40% {
      height: 95px;
      margin: 0;
      transform: translateY(-50px);
    }
    42% {
      height: 111px;
      margin: 0;
      transform: translateY(-50px);
    }
    100% {
      height: 111px;
      margin: 0;
      transform: translateY(-50px);
    }
  }
  @keyframes saTeam {
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    1% {
      opacity: 0;
      transform: translateX(0px);
    }
    5% {
      opacity: 1;
      transform: translateX(0px);
    }
    20% {
      opacity: 1;
      transform: translateX(0px);
    }
    23% {
      opacity: 0;
      transform: translateX(-100px);
    }
    100% {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
  @keyframes nzTeam {
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    1% {
      opacity: 0;
      transform: translateX(0px);
    }
    5% {
      opacity: 1;
      transform: translateX(0px);
    }
    20% {
      opacity: 1;
      transform: translateX(0px);
    }
    23% {
      opacity: 0;
      transform: translateX(110px);
    }
    100% {
      opacity: 0;
      transform: translateX(110px);
    }
  }
  .details > div {
    flex-direction: column;
  }
  .details.start .logo {
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .details.start .title-1-line {
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .banner.start .sa {
    width: 100px;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
  .banner.start .nz {
    width: 110px;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  }
}
@media all and (max-height: 130px) and (max-width: 300px) {
  .banner.start .sa {
    width: 90px;
  }
  .banner.start .nz {
    width: 100px;
  }
}

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