@media screen and (max-width: 900px) {
  .logo img,
  .cryptex__wrap {
    margin: 0 auto;
  }

  .popup {
    padding-left: 6px;
    padding-right: 6px;
  }

  .popup__content {
    margin-right: auto;
    /* max-width: 328px;
    max-height: 507px; */
  }
  .popup.active {
    margin-bottom: 0;
    padding-top: 31px;
  }
}
@media (max-width: 1890px) {
  .main__img {
    max-width: 43%;
  }
  .main::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;

    background:
      url("../img/bg1.svg") no-repeat 3% -3%,
      url("../img/bg2.svg") no-repeat 2% 40%,
      url("../img/bg3.svg") no-repeat 2% 80%,
      url("../img/bg4.svg") no-repeat 60% 5%,
      url("../img/bg5.svg") no-repeat 90% -7%,
      url("../img/money1.svg") no-repeat 3% 65%,
      url("../img/money2.svg") no-repeat 55% 90%,
      url("../img/money3.svg") no-repeat 60% 45%,
      url("../img/money4.svg") no-repeat 65% 10%,
      url("../img/money5.svg") no-repeat 98% 40%,
      url("../img/money6.svg") no-repeat 99% 60%;

    background-size:
      149px 148px,
      121px 122px,
      180px 158px,
      340px 340px,
      281px 375px,
      65.59px 69.08px,
      133.22px 75.84px,
      120.13px 120.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      118.95px 67.61px;

    pointer-events: none;
    z-index: 1;
  }

  .cryptex__col {
    width: clamp(71px, 4.834vw, 112px);
  }
}

@media (max-width: 1850px) {
  .cryptex__main {
    height: calc(100px * 5);
  }
}
@media (max-width: 1800px) {
  .cryptex__col li {
    height: clamp(71px, 5.359vw, 112px);
    /* height: 21.47% !important; */
    height: clamp(71px, 5.849vw, 112px);
  }
}
@media (max-width: 1850px) {
  .cryptex__main {
    height: calc(98px * 5);
  }
}
@media (max-width: 1750px) {
  .cryptex__main {
    height: calc(95px * 5);
  }
  .main::before {
    background:
      url(../img/bg1.svg) no-repeat 3% -3%,
      url(../img/bg2.svg) no-repeat 6% 45%,
      url(../img/bg3.svg) no-repeat 6% 82%,
      url(../img/bg4.svg) no-repeat 65% 15%,
      url(../img/bg5.svg) no-repeat 88% 25%,
      url(../img/money1.svg) no-repeat 3% 65%,
      url(../img/money2.svg) no-repeat 70% 90%,
      url(../img/money3.svg) no-repeat 75% 45%,
      url(../img/money4.svg) no-repeat 65% 10%,
      url(../img/money5.svg) no-repeat 98% 40%,
      url(../img/money6.svg) no-repeat 99% 60%;
    background-size:
      149px 148px,
      91px 91px,
      120px 118px,
      180px 180px,
      180px 225px,
      65.59px 69.08px,
      133.22px 75.84px,
      90.13px 90.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      118.95px 67.61px;
    pointer-events: none;
    z-index: 1;
  }
}
@media (max-width: 1700px) {
  .cryptex__main {
    height: calc(92px * 5);
    width: 87%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
  }
  .cryptex__wrap {
    background: url(../img/cryptex-bg.png) no-repeat top center / contain;
    height: max-content;
  }
}
@media (max-width: 1650px) {
  .cryptex__main {
    height: calc(88px * 5);
  }
}
@media (max-width: 1680px) {
  .cryptex__col li {
    height: clamp(71px, 5.85vw, 112px);
  }
}
@media (max-width: 1600px) {
  .cryptex__main {
    width: 80%;
  }

  .main__img {
    max-width: 40%;
  }
  .cryptex__button {
    width: max-content;
    height: 100px;
  }
}
@media (max-width: 1550px) {
  .cryptex__main {
    height: calc(84px * 5);
  }
}
@media (max-width: 1470px) {
  .cryptex__main {
    height: calc(81px * 5);
  }
}
@media (max-width: 1500px) {
  .main::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;

    background:
      url("../img/bg1.svg") no-repeat 3% -3%,
      url("../img/bg2.svg") no-repeat 6% 45%,
      url("../img/bg3.svg") no-repeat 6% 82%,
      url("../img/bg4.svg") no-repeat 70% 15%,
      url("../img/bg5.svg") no-repeat 90% 25%,
      url("../img/money1.svg") no-repeat 3% 65%,
      url("../img/money2.svg") no-repeat 55% 90%,
      url("../img/money3.svg") no-repeat 65% 45%,
      url("../img/money4.svg") no-repeat 65% 10%,
      url("../img/money5.svg") no-repeat 98% 40%,
      url("../img/money6.svg") no-repeat 99% 60%;

    background-size:
      149px 148px,
      91px 91px,
      120px 118px,
      180px 180px,
      180px 225px,
      65.59px 69.08px,
      133.22px 75.84px,
      90.13px 90.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      118.95px 67.61px;

    pointer-events: none;
    z-index: 1;
  }
}
@media (max-width: 1440px) {
  .main__img {
    max-width: 35%;
  }
  .main::before {
    background:
      url("../img/bg1.svg") no-repeat 3% -3%,
      url("../img/bg2.svg") no-repeat 6% 45%,
      url("../img/bg3.svg") no-repeat 6% 82%,
      url("../img/bg4.svg") no-repeat 80% 25%,
      url("../img/bg5.svg") no-repeat 99% 25%,
      url("../img/money1.svg") no-repeat 3% 65%,
      url("../img/money2.svg") no-repeat 70% 90%,
      url("../img/money3.svg") no-repeat 75% 45%,
      url("../img/money4.svg") no-repeat 65% 10%,
      url("../img/money5.svg") no-repeat 98% 40%,
      url("../img/money6.svg") no-repeat 99% 60%;

    background-size:
      149px 148px,
      91px 91px,
      120px 118px,
      180px 180px,
      180px 225px,
      65.59px 69.08px,
      133.22px 75.84px,
      90.13px 90.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      118.95px 67.61px;

    pointer-events: none;
    z-index: 1;
  }
  .popup__button {
    margin-top: 36px;
  }
}
@media (max-width: 1400px) {
  .cryptex__main {
    width: 73%;
  }
}
@media (max-width: 1200px) {
  .main__img {
    max-width: 29%;
  }
  .cryptex__button {
    width: 460px;
  }
  .main::before {
    background:
      url("../img/bg1.svg") no-repeat 3% -3%,
      url("../img/bg2.svg") no-repeat 6% 45%,
      url("../img/bg3.svg") no-repeat 6% 82%,
      url("../img/bg4.svg") no-repeat 90% 50%,
      url("../img/bg5.svg") no-repeat 100% 65%,
      url("../img/money1.svg") no-repeat 3% 65%,
      url("../img/money2.svg") no-repeat 70% 90%,
      url("../img/money3.svg") no-repeat 80% 45%,
      url("../img/money4.svg") no-repeat 65% 10%,
      url("../img/money5.svg") no-repeat 98% 40%,
      url("../img/money6.svg") no-repeat 99% 60%;

    background-size:
      149px 148px,
      91px 91px,
      120px 118px,
      120px 120px,
      120px 185px,
      65.59px 69.08px,
      110.22px 50.84px,
      60.13px 60.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      118.95px 67.61px;

    pointer-events: none;
    z-index: 1;
  }
}
@media (max-width: 1420px) {
  .cryptex__main {
    height: calc(77px * 5);
    max-width: 74%;
  }
}
@media (max-width: 1400px) {
  .cryptex__main {
    height: calc(77px * 5);
  }
  .cryptex__button {
    width: max-content;
    height: 100px;
  }
}
@media (max-width: 1350px) {
  .cryptex__main {
    height: calc(74px * 5);
  }
}
@media (max-width: 1300px) {
  .cryptex__main {
    height: calc(70.9px * 5);
    width: 66%;
  }
}
@media (max-width: 1250px) {
  .cryptex__main {
    height: calc(70px * 5);
  }
}
@media (max-width: 1230px) {
  .cryptex__main {
    height: calc(66.9px * 5);
    width: 66%;
  }
  .cryptex__button {
    max-width: 400px;
    height: 100px;
  }
}
@media screen and (max-width: 1100px) {
  .content:before {
    background:
      url(../img/bg-layer-mob.png) no-repeat top left / cover,
      url(../img/bg-layer-mob.png) no-repeat top right / cover,
      url(../img/bg-layer-mob.png) no-repeat bottom left / cover,
      url(../img/bg-layer-mob.png) no-repeat bottom right / cover;
    left: 0;
  }
  .cryptex__wrap {
    background: url(../img/cryptex-bg-mob.png) no-repeat top center / contain;
  }
  .header {
    padding: 1.7vh 2vw 0;
    display: none;
  }
  .cryptex__col li {
    height: clamp(71px, 5.359vw, 112px);
    height: 21.18% !important;
  }
  .cryptex__col li img {
    width: 55px;
  }
  .logo img {
    max-width: 882px;
  }

  .main {
    padding: 3vh 7px 0;
  }

  .main__img {
    position: static;
    left: 0;
    max-width: 92%;
    margin: auto auto 0;
    max-height: 873px;
    margin-top: -34px;
    margin-bottom: -52px;
  }

  .main::before {
    content: "";
    position: absolute;
    bottom: -52px;
    right: 0;
    width: 100%;
    height: 100%;

    background:
      url("../img/bg1.svg") no-repeat 70% 55%,
      url("../img/bg2.svg") no-repeat 102% 80%,
      url("../img/bg3.svg") no-repeat 85% 92%,
      url("../img/bg4.svg") no-repeat -10% 80%,
      url("../img/bg5.svg") no-repeat -10% 105%,
      url("../img/money1.svg") no-repeat 10% 90%,
      url("../img/money2.svg") no-repeat 90% 80%,
      url("../img/money3.svg") no-repeat 100% 95%,
      url("../img/money4.svg") no-repeat -5% 50%,
      url("../img/money5.svg") no-repeat 100% 60%,
      url("../img/money6.svg") no-repeat -5% 90%;

    background-size:
      109px 109px,
      91px 91px,
      180px 158px,
      240px 240px,
      200px 200px,
      65.59px 69.08px,
      133.22px 75.84px,
      120.13px 120.62px,
      85.3px 89.85px,
      65.59px 69.08px,
      140.95px 140.61px;

    pointer-events: none;
    z-index: 2;
  }
  .cryptex__button {
    height: 77px;
  }
  .cryptex__wrap {
    width: clamp(376px, 85.8vw, 600px);

    padding: clamp(22px, 4vw, 30px) clamp(25px, 2.6vw, 35px)
      clamp(27px, 6.5vw, 54px);
    margin-bottom: 1.2vh;
  }
  .cryptex__main {
    width: 100%;
    max-width: 100%;
  }
  .cryptex__main {
    max-height: clamp(205px, 47.2vw, 330px);
  }

  .cryptex__col {
    width: clamp(45px, 10.15vw, 71px);
  }

  .cryptex__col li {
    height: clamp(45px, 10.15vw, 71px);
  }

  .cryptex__button {
    margin-top: 78px;
  }
  .main-text {
    display: none;
  }
  .footer-text {
    display: block;
  }
  .footer {
    padding: 16px 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .footer__list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .footer__list img {
    max-height: 20px;
  }

  .popup {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    /* padding-top: 11.5vh; */
    padding-bottom: 0;
  }
  .popup__title {
    font-size: 25px;
  }
  .popip__deposit,
  .popup__upto,
  .popup__bonus {
    font-size: 30px;
  }

  @-webkit-keyframes col {
    100% {
      -webkit-transform: translateY(clamp(-1140px, -159.5vw, -696px));
      transform: translateY(clamp(-1140px, -159.5vw, -696px));
    }
  }

  @-moz-keyframes col {
    100% {
      -moz-transform: translateY(clamp(-1140px, -159.5vw, -696px));
      transform: translateY(clamp(-1140px, -159.5vw, -696px));
    }
  }

  @-o-keyframes col {
    100% {
      -o-transform: translateY(clamp(-1140px, -159.5vw, -696px));
      transform: translateY(clamp(-1140px, -159.5vw, -696px));
    }
  }

  @keyframes col {
    100% {
      -webkit-transform: translateY(clamp(-1140px, -178.5vw, -696px));
      -moz-transform: translateY(clamp(-1140px, -178.5vw, -696px));
      -ms-transform: translateY(clamp(-1140px, -178.5vw, -696px));
      -o-transform: translateY(clamp(-1140px, -178.5vw, -696px));
      transform: translateY(clamp(-1140px, -159.5vw, -696px));
    }
  }
}

@media screen and (max-width: 380px) {
  .main__img {
    max-width: 50%;
  }

  .cryptex__wrap {
    width: 300px;
    padding: 11px 14px 22px;
  }

  .cryptex__main {
    max-height: 170px;
  }

  .cryptex__col {
    width: 38px;
  }

  .cryptex__col li {
    height: 38px;
  }

  .cryptex__button {
    font-size: 12px;
    height: 46px;
    margin-top: 17px;
  }

  .footer__list {
    gap: 8px;
  }

  .footer__list img {
    max-height: 18px;
  }

  @-webkit-keyframes col {
    100% {
      -webkit-transform: translateY(-577px);
      transform: translateY(-577px);
    }
  }

  @-moz-keyframes col {
    100% {
      -moz-transform: translateY(-577px);
      transform: translateY(-577px);
    }
  }

  @-o-keyframes col {
    100% {
      -o-transform: translateY(-577px);
      transform: translateY(-577px);
    }
  }

  @keyframes col {
    100% {
      -webkit-transform: translateY(-577px);
      -moz-transform: translateY(-577px);
      -ms-transform: translateY(-577px);
      -o-transform: translateY(-577px);
      transform: translateY(-577px);
    }
  }
}

/* @media screen and (min-width: 1921px) {
  .logo img {
    height: 10vh;
  }

  .cryptex__wrap {
    width: 48.3vw;
    padding: 2.5vw 2.6vw 3.6vw;
  }

  .cryptex__main {
    max-height: 27.5vw;
  }

  .cryptex__col {
    width: 5.834vw;
  }

  .cryptex__col li {
    height: 5.834vw;
  }

  .cryptex__col li + li {
    margin-top: -0.4vw;
  }

  .cryptex__button {
    border-radius: 0.8vw;
    font-size: 1.7vw;
    width: 28.23vw;
    height: 4.8vw;
    margin: 1.9vw auto 0;
  }

  .footer__list {
    gap: 40px;
  }

  .popup__content {
    width: 53.01vw;
    height: 31vw;
  }

  .popup__title {
    font-size: 2.1vw;
  }

  .popip__deposit {
    font-size: 5.65vw;
  }

  .popup__upto {
    font-size: 2.3vw;
  }

  .popup__bonus {
    font-size: 3.6vw;
  }

  .popup__button {
    border-radius: 0.8vw;
    font-size: 2.24vw;
    width: 21.9vw;
    height: 4.8vw;
    margin: 0.6vw auto 0;
  }

  @-webkit-keyframes col {
    100% {
      -webkit-transform: translateY(-92.5vw);
      transform: translateY(-92.5vw);
    }
  }

  @-moz-keyframes col {
    100% {
      -moz-transform: translateY(-92.5vw);
      transform: translateY(-92.5vw);
    }
  }

  @-o-keyframes col {
    100% {
      -o-transform: translateY(-92.5vw);
      transform: translateY(-92.5vw);
    }
  }

  @keyframes col {
    100% {
      -webkit-transform: translateY(-92.5vw);
      -moz-transform: translateY(-92.5vw);
      -ms-transform: translateY(-92.5vw);
      -o-transform: translateY(-92.5vw);
      transform: translateY(-92.5vw);
    }
  }
} */
@media (min-width: 700px) {
  .header {
    display: none;
  }
}
@media (max-width: 1100px) {
  .main {
    padding: 3vh 7px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 900px) {
  .logo img {
    max-width: 90%;
  }
}
@media (max-width: 600px) {
  .cryptex__col li {
    height: 21.48% !important;
  }
  .cryptex__button {
    margin-top: 35px;
  }
  .cryptex__col li img {
    width: 33px;
  }
  .cryptex__button {
    width: max-content;
    padding: 0 24px;
  }
  .main::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;

    background:
      url("../img/bg1.svg") no-repeat 100% 65%,
      url("../img/bg2.svg") no-repeat 102% 80%,
      url("../img/bg3.svg") no-repeat 85% 92%,
      url("../img/bg4.svg") no-repeat -10% 80%,
      url("../img/bg5.svg") no-repeat -5% 110%,
      url("../img/money1.svg") no-repeat 10% 90%,
      url("../img/money2.svg") no-repeat 90% 80%,
      url("../img/money3.svg") no-repeat 100% 95%,
      url("../img/money4.svg") no-repeat -5% 60%,
      url("../img/money5.svg") no-repeat 100% 80%,
      url("../img/money6.svg") no-repeat -5% 90%;

    background-size:
      80px 80px,
      70px 70px,
      120px 108px,
      160px 160px,
      160px 160px,
      35.59px 39.08px,
      80.22px 50.84px,
      80.13px 80.62px,
      65.3px 60.85px,
      45.59px 45.08px,
      100.95px 100.61px;

    pointer-events: none;
    z-index: 2;
  }
}
@media (max-width: 500px) {
  .main__img {
    margin-bottom: -50px;
  }
}
@media (max-width: 460px) {
  .main__img {
    max-width: 100%;
    max-height: 873px;
    margin-top: -26px;
    margin-bottom: -69px;
  }
  .cryptex__button {
    font-size: 18px;
    height: 46px;
    margin-top: 17px;
  }
  .main::before {
    background:
      url("../img/bg1.svg") no-repeat 100% 65%,
      url("../img/bg2.svg") no-repeat 102% 80%,
      url("../img/bg3.svg") no-repeat 85% 92%,
      url("../img/bg4.svg") no-repeat -10% 80%,
      url("../img/bg5.svg") no-repeat -5% 110%,
      url("../img/money1.svg") no-repeat 10% 90%,
      url("../img/money2.svg") no-repeat 90% 80%,
      url("../img/money3.svg") no-repeat 100% 95%,
      url("../img/money4.svg") no-repeat -5% 60%,
      url("../img/money5.svg") no-repeat 100% 80%,
      url("../img/money6.svg") no-repeat -5% 90%;

    background-size:
      40px 40px,
      35px 35px,
      60px 60px,
      80px 80px,
      80px 80px,
      35.59px 39.08px,
      40.22px 20.84px,
      40.13px 40.62px,
      65.3px 60.85px,
      45.59px 45.08px,
      50.95px 50.61px;
  }
  .cryptex__col li {
    height: 21.69% !important;
  }
}
@media (max-width: 410px) {
  .cryptex__col li {
    height: 21.7% !important;
  }
}
@media (max-width: 400px) {
  .popup__content {
    max-width: 320px;
    max-height: 610px;
  }
  .popup__button {
    width: 274px;
    margin-top: 40px;
  }
  .popup__info {
    margin-top: 35px;
  }
  .popup__title {
    margin-top: 90px;
  }
}
@media (max-width: 380px) {
  .cryptex__col li {
    height: 22.1% !important;
  }
}

/* 11.05 */