@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@700;900&display=swap");
.container {
  width: 120rem;
  margin: 0 auto; }
  @media only screen and (max-width: 75em) {
    .container {
      width: 100rem; } }
  @media only screen and (max-width: 67em) {
    .container {
      width: 60rem; } }
  @media only screen and (max-width: 37.5em) {
    .container {
      width: auto;
      margin: 0 0rem; } }

.vid-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  width: 100%;
  margin-top: 70px; }
  @media only screen and (max-width: 67em) {
    .vid-bg {
      display: none; } }

.player-img {
  position: absolute;
  /* top: 0; */
  left: 7%;
  right: 0;
  bottom: -7%;
  width: 43%;
  z-index: -1; }
  @media only screen and (max-width: 67em) {
    .player-img {
      display: none; } }
  @media only screen and (min-width: 112.5em) {
    .player-img {
      position: absolute;
      /* top: 0; */
      left: 3%;
      right: 0;
      bottom: -1%;
      width: 44%;
      z-index: -1; } }

.bet-body {
  background: transparent; }
  @media only screen and (max-width: 67em) {
    .bet-body {
      background: url("../img/tablet-bg.jpg");
      background-size: 100% auto;
      background-position: top center;
      background-repeat: no-repeat; } }
  @media only screen and (max-width: 37.5em) {
    .bet-body {
      background: url("../img/mobile-bg.jpg");
      background-size: 100% auto;
      background-position: top center;
      background-repeat: no-repeat; } }

.bet-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 0.5rem;
  margin: 15px 0 0; }
  @media only screen and (max-width: 67em) {
    .bet-buttons {
      margin: 30px 0; } }
  @media only screen and (max-width: 37.5em) {
    .bet-buttons {
      grid-template-columns: repeat(6, 1fr);
      gap: 0.5rem;
      margin: 20px 0; } }

.bet-btn {
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  background-color: #fff;
  background-repeat: repeat-x;
  font-size: 22px;
  font-weight: 700;
  padding: 13px 0;
  border-radius: 50px;
  color: #122559;
  line-height: auto;
  text-shadow: -2px 1px 2px rgba(0, 35, 32, 0.75);
  text-transform: none;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  display: grid;
  align-content: center;
  user-select: none;
  white-space: nowrap;
  overflow: visible;
  align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
  margin: 0; }
  @media only screen and (min-width: 112.5em) {
    .bet-btn {
      font-weight: 700;
      padding: 15px 0;
      font-size: 24px; } }
  @media only screen and (min-width: 80.5em) {
    .bet-btn {
      font-weight: 700;
      padding: 8px 0;
      font-size: 20px; } }
  @media only screen and (max-width: 37.5em) {
    .bet-btn {
      font-weight: 700;
      padding: 10px 0; } }
  @media only screen and (max-width: 37.5em) {
    .bet-btn:nth-child(1) {
      grid-column: 1/3;
      grid-row: 1; }
    .bet-btn:nth-child(2) {
      grid-column: 3/5;
      grid-row: 1; }
    .bet-btn:nth-child(3) {
      grid-column: 5/7;
      grid-row: 1; }
    .bet-btn:nth-child(4) {
      grid-column: 2/4;
      grid-row: 2; }
    .bet-btn:nth-child(5) {
      grid-column: 4/6;
      grid-row: 2; } }

.shutterstock-button {
  font-size: 22px !important; }
  @media only screen and (max-width: 37.5em) {
    .shutterstock-button {
      font-size: 18px !important; } }

.bet-btn:hover {
  color: #fff; }

.bet-content {
  text-align: center;
  display: grid;
  grid-gap: 0.5rem;
  margin-top: 30px;
  height: 90vh;
  align-content: center; }
  @media only screen and (min-width: 80.5em) {
    .bet-content {
      grid-template-columns: 50% 48%; } }
  @media only screen and (min-width: 112.5em) {
    .bet-content {
      grid-template-columns: 40% 60%; } }
  @media only screen and (max-width: 37.5em) {
    .bet-content {
      grid-template-columns: 100%;
      height: auto; } }

.bet-logo {
  margin-bottom: 20px; }
  @media only screen and (max-width: 67em) {
    .bet-logo {
      margin-top: 70%; } }
  @media only screen and (max-width: 37.5em) {
    .bet-logo {
      margin-bottom: 100%;
      margin-top: 10%; } }

@media only screen and (max-width: 37.5em) {
  .mobilelogo {
    width: 95px; } }

@media only screen and (max-width: 37.5em) {
  .header-text {
    font-size: 11px; } }

.bet-wraper {
  margin-top: 100px; }
  @media only screen and (max-width: 37.5em) {
    .bet-wraper {
      margin-top: 50px; } }

.bet-content-right > h1 {
  font-family: "Noto Sans SC", sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 4.5rem;
  letter-spacing: 9px;
  margin-bottom: 20px;
  text-shadow: 4px 4px 5px #0000007a; }

.bet-content-right {
  text-align: center; }

.icon-box {
  margin-top: 20px; }

.footer-bet {
  padding: 4rem 0;
  background: #04070d;
  display: block;
  z-index: 2; }
  @media only screen and (max-width: 67em) {
    .footer-bet {
      margin-top: 25%; } }
  @media only screen and (max-width: 37.5em) {
    .footer-bet {
      padding: 2rem 1rem;
      background: #04070d;
      display: block;
      z-index: 2;
      margin-top: 30px; } }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.buttons {
  margin: 10%;
  text-align: center; }

.btn-hover {
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }

.btn-hover:hover {
  background-position: 100% 0;
  moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }

.btn-hover:focus {
  outline: none; }

.btn-hover.color-1 {
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75); }

.btn-hover.color-2 {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75); }

.btn-hover.color-3 {
  background-image: linear-gradient(to right, #667eea, #764ba2, #6b8dd6, #8e37d7);
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75); }

.btn-hover.color-4 {
  background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
  box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75); }

.btn-hover.color-5 {
  background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75); }

.btn-hover.color-6 {
  background-image: linear-gradient(to right, #009245, #fcee21, #00a8c5, #d9e021);
  box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75); }

.btn-hover.color-7 {
  background-image: linear-gradient(to right, #6253e1, #852d91, #a3a1ff, #f24645);
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75); }

.btn-hover.color-8 {
  background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
  box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75); }

.btn-hover.color-9 {
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75); }

.btn-hover.color-10 {
  background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #fbb03b);
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75); }

.btn-hover.color-11 {
  background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4); }