body{
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: 'tex_gyre_heros_cnbold';
    src: url('fonts/texgyreheroscn-bold-webfont.woff') format('woff'),;
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'tex_gyre_herosregular';
  src: url('fonts/texgyreheros-regular-webfont.woff') format('woff'),;
  font-weight: normal;
  font-style: normal;

}


.logo{
    width: 300px;
}

h2{
    font-size: 9vw;
    line-height: 9vw;
    margin-bottom: 40px;
    color: white;
    margin:0;
    font-family: 'tex_gyre_heros_cnbold';
}
h3{
  font-size: 2vw;
  line-height: 2vw;
  font-family: 'tex_gyre_herosregular';
  font-weight: 200;
}
@media (max-width: 500px) {
h2{
  font-size: 12vw;
    line-height: 12vw;
}
h3{
  font-size: 6vw;
  line-height: 6vw;
  font-family: 'tex_gyre_heros_cnbold';
}
main{
  margin-top: 50px;
}
}

.relative{
    position: relative;
}
.z-50{
    z-index: 50;
}
header{
    display: flex;
    justify-content: center;
    padding-top: 50px;
}
main{
    text-align: center;
}
.home-bg{
    position: absolute;
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
}
.banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ff051a;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    z-index: 9999;
    font-family: 'tex_gyre_heros_cnbold';
  }
  .flashing-text {
    font-size: 64px;
    font-weight: bold;
    color: #fff;
    -webkit-text-stroke: 2px #fff;
    position: relative;
  }

  .flashing-text::after {
    content: attr(data-text);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: 0;
    animation: flash 1s infinite;
  }

  @keyframes flash {
    0%, 50%, 100% {
      opacity: 1;
    }
    25%, 75% {
      opacity: 0;
    }
  }
  .banner .scroll-wrapper {
    display: flex;
    width: fit-content;
    animation: scroll-left 20s linear infinite;
  }

  .banner .scroll-text {
    padding-right: 10px; /* spacing between repeats */
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }