* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul, li, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.page__body {
  background: #1F1B18;
  font-family: "TikTok Sans", sans-serif;
}
.page__container {
  max-width: 359px;
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}
@media screen and (min-width: 360px) {
  .page__container {
    max-width: 389px;
  }
}
@media screen and (min-width: 390px) {
  .page__container {
    max-width: 599px;
  }
}
@media screen and (min-width: 600px) {
  .page__container {
    max-width: 500px;
    padding: 0;
  }
}
@media screen and (min-width: 1024px) {
  .page__container {
    max-width: 900px;
  }
}
@media screen and (min-width: 1336px) {
  .page__container {
    max-width: 1220px;
  }
}
@media screen and (min-width: 1680px) {
  .page__container {
    max-width: 1600px;
  }
}
@media screen and (min-width: 1921px) {
  .page__container {
    max-width: 1800px;
  }
}
.page__main-banner {
  width: 100%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  overflow: hidden;
}
.page__basic-banner {
  width: 100%;
  object-fit: cover;
  border-radius: 24px;
}
.page__basic-title {
  color: #FFF;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 340px) {
  .page__basic-title {
    font-size: 30px;
  }
}
.page__basic-subtitle {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media screen and (min-width: 1680px) {
  .page__basic-subtitle {
    font-size: 24px;
  }
}
.page__list {
  list-style: none;
}
.page__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.page__list-icon {
  display: block;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 16px;
}
.page__list-text {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 390px) {
  .page__list-text {
    font-size: 20px;
  }
}
.page__yellow-text {
  color: #FFC400;
}
.page__red-text {
  color: #F00;
}
.page__green-text {
  color: #50AE95;
}
.page__basic-content-block {
  margin-bottom: 40px;
}
.page__basic-content-block:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
  .page__basic-content-block {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1680px) {
  .page__basic-content-block {
    margin-bottom: 120px;
  }
}
.page__br-text br {
  display: none;
}
@media screen and (min-width: 1024px) {
  .page__br-text br {
    display: block;
  }
}
@media screen and (min-width: 1921px) {
  .page__br-text br {
    display: none;
  }
}

.header {
  padding: 0 16px;
}
@media screen and (min-width: 600px) {
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}
.header__navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}
@media screen and (min-width: 360px) {
  .header__navigation {
    justify-content: space-between;
  }
}
@media screen and (min-width: 600px) {
  .header__navigation {
    max-width: 500px;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .header__navigation {
    max-width: 900px;
  }
}
@media screen and (min-width: 1336px) {
  .header__navigation {
    max-width: 1220px;
  }
}
@media screen and (min-width: 1680px) {
  .header__navigation {
    max-width: 1600px;
  }
}
@media screen and (min-width: 1921px) {
  .header__navigation {
    max-width: 1800px;
  }
}
.header__logo-link {
  display: block;
  height: 24px;
  width: 217px;
}
@media screen and (min-width: 360px) {
  .header__logo-link {
    width: 216px;
  }
}
@media screen and (min-width: 390px) {
  .header__logo-link {
    width: 217px;
  }
}
.header__logo {
  height: 100%;
  width: 100%;
}
.header__social-wrapper {
  display: none;
}
@media screen and (min-width: 360px) {
  .header__social-wrapper {
    display: flex;
  }
}
@media screen and (min-width: 360px) {
  .header__social-link {
    display: block;
    height: 32px;
    width: 32px;
  }
  .header__social-link:first-child {
    margin-right: 12px;
  }
  .header__social-link:active {
    opacity: 0.7;
  }
}
@media screen and (min-width: 390px) {
  .header__social-link {
    height: 40px;
    width: 40px;
  }
  .header__social-link:first-child {
    margin-right: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .header__social-link:hover {
    opacity: 0.7;
  }
}
.header__social-icon {
  height: 100%;
  width: 100%;
}

.hero {
  margin-bottom: 60px;
}
@media screen and (min-width: 1024px) {
  .hero {
    padding: 20px 0 30px 0;
  }
}
@media screen and (min-width: 1336px) {
  .hero {
    padding: 30px 0;
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1680px) {
  .hero {
    padding: 40px 0;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1921px) {
  .hero {
    padding: 80px 0;
  }
}
.hero__main-banner-wrapper {
  display: block;
  padding: 0 16px;
}
@media screen and (min-width: 600px) {
  .hero__main-banner-wrapper {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__main-banner-wrapper {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: -1;
  }
}
@media screen and (min-width: 1336px) {
  .hero__main-banner-wrapper {
    padding: 0 40px;
  }
}
.hero__main-banner {
  height: clamp(181.87px, calc(181.87px + (249.89 - 181.87) * (100vw - 270px) / (359 - 270)), 249.89px);
}
@media screen and (min-width: 360px) {
  .hero__main-banner {
    height: clamp(249.89px, calc(249.89px + (272.812 - 249.89) * (100vw - 360px) / (389 - 360)), 272.812px);
  }
}
@media screen and (min-width: 390px) {
  .hero__main-banner {
    height: clamp(273.58px, calc(273.58px + (433.29 - 273.58) * (100vw - 390px) / (599 - 390)), 433.29px);
  }
}
@media screen and (min-width: 600px) {
  .hero__main-banner {
    height: clamp(427.94px, calc(427.94px + (751.188 - 427.94) * (100vw - 600px) / (1023 - 600)), 751.188px);
  }
}
@media screen and (min-width: 1024px) {
  .hero__main-banner {
    object-fit: cover;
    height: 600px;
  }
}
@media screen and (min-width: 1336px) {
  .hero__main-banner {
    height: 726px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__main-banner {
    height: 840px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__main-banner {
    height: 1230px;
  }
}
.hero__main-content {
  margin-top: -40px;
}
@media screen and (min-width: 360px) {
  .hero__main-content {
    margin-top: -45px;
  }
}
@media screen and (min-width: 600px) {
  .hero__main-content {
    margin-top: -60px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__main-content {
    margin-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .hero__main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.hero__title span {
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
.hero__title span:first-child {
  font-size: 40px;
}
@media screen and (min-width: 360px) {
  .hero__title span:first-child {
    font-size: 50px;
  }
}
@media screen and (min-width: 390px) {
  .hero__title span {
    font-size: 24px;
  }
  .hero__title span:first-child {
    font-size: 60px;
  }
}
@media screen and (min-width: 600px) {
  .hero__title span:first-child {
    font-size: 80px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__title {
    align-items: flex-start;
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1336px) {
  .hero__title {
    align-items: center;
    width: 578px;
    margin-bottom: 40px;
  }
  .hero__title span {
    font-size: 30px;
  }
  .hero__title span:first-child {
    font-size: 110px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__title {
    width: 780px;
  }
  .hero__title span {
    font-size: 40px;
  }
  .hero__title span:first-child {
    font-size: 140px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__title {
    width: 841px;
  }
  .hero__title span:first-child {
    font-size: 160px;
  }
}
.hero__links-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}
@media screen and (min-width: 600px) {
  .hero__links-wrapper {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__links-wrapper {
    justify-content: flex-start;
  }
}
@media screen and (min-width: 1336px) {
  .hero__links-wrapper {
    margin-bottom: 0;
  }
}
.hero__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  max-width: 247px;
  width: 100%;
  border-radius: 100px;
  overflow: hidden;
}
.hero__link span {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.hero__link--download {
  background-image: url(../images/button-pattern.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 16px;
}
.hero__link--download span {
  color: #000;
  text-shadow: 0 1px 0 #FFF;
  font-size: 14px;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
.hero__link--download:active {
  background-image: url(../images/button-pattern-hover.jpg);
}
.hero__link--telegram {
  border: 2px solid #FFC400;
  background: #1F1B18;
  justify-content: flex-end;
  padding: 0 12px 0 20px;
}
.hero__link--telegram span {
  color: #FFC400;
  font-size: 12px;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
.hero__link--telegram div {
  height: 32px;
  width: 32px;
  background-image: url(../images/tg-icon-btn.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 12px;
}
.hero__link--telegram:active {
  background: #FFC400;
}
.hero__link--telegram:active span {
  color: #1F1B18;
}
.hero__link--telegram:active div {
  background-image: url(../images/tg-icon-btn-hover.svg);
}
@media screen and (min-width: 360px) {
  .hero__link {
    max-width: 299px;
  }
  .hero__link--download span {
    font-size: 18px;
  }
  .hero__link--telegram span {
    font-size: 16px;
  }
}
@media screen and (min-width: 600px) {
  .hero__link {
    max-width: 238px;
  }
  .hero__link--download {
    margin-right: 24px;
    margin-bottom: 0;
  }
  .hero__link--download span {
    font-variation-settings: "wdth" 100, "slnt" 0;
  }
  .hero__link--telegram {
    padding: 0 16px 0 14px;
  }
  .hero__link--telegram span {
    font-variation-settings: "wdth" 100, "slnt" 0;
  }
  .hero__link--telegram div {
    height: 24px;
    width: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .hero__link {
    max-width: 203px;
    height: 48px;
  }
  .hero__link--download span {
    font-size: 14px;
  }
  .hero__link--download:hover {
    background-image: url(../images/button-pattern-hover.jpg);
  }
  .hero__link--telegram span {
    font-size: 12px;
  }
  .hero__link--telegram:hover {
    background: #FFC400;
  }
  .hero__link--telegram:hover span {
    color: #1F1B18;
  }
  .hero__link--telegram:hover div {
    background-image: url(../images/tg-icon-btn-hover.svg);
  }
}
@media screen and (min-width: 1336px) {
  .hero__link {
    height: 72px;
    max-width: 283px;
    margin-bottom: 60px;
  }
  .hero__link--download span {
    font-size: 18px;
  }
  .hero__link--telegram span {
    font-size: 16px;
  }
  .hero__link--telegram div {
    height: 48px;
    width: 48px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__link {
    height: 96px;
    max-width: 370px;
    margin-bottom: 80px;
  }
  .hero__link--download {
    margin-right: 40px;
  }
  .hero__link--download span {
    font-size: 26px;
  }
  .hero__link--telegram {
    padding: 0 24px;
  }
  .hero__link--telegram span {
    font-size: 24px;
  }
  .hero__link--telegram div {
    margin-left: 16px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__link {
    width: 420px;
  }
}
.hero__list {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .hero__list {
    max-width: 430px;
    width: 100%;
  }
}
@media screen and (min-width: 1336px) {
  .hero__list {
    max-width: 590px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__list {
    max-width: 740px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__list {
    max-width: 780px;
    margin-bottom: 275px;
  }
}
.hero__item {
  margin-bottom: 16px;
}
.hero__item:last-child {
  margin-bottom: 0;
}
.hero__list-icon {
  background-image: url(../images/check-icon.svg);
}
.hero__list-text {
  font-variation-settings: "wdth" 140, "slnt" 0;
}
@media screen and (min-width: 1680px) {
  .hero__list-text {
    font-size: 24px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__list-text {
    font-size: 30px;
  }
}
.hero__points {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (min-width: 1024px) {
  .hero__points {
    flex-direction: row;
    margin-bottom: 23px;
  }
}
@media screen and (min-width: 1336px) {
  .hero__points {
    margin-bottom: 49px;
  }
}
.hero__arrow, .hero__point-text {
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
@media screen and (min-width: 390px) {
  .hero__arrow, .hero__point-text {
    font-size: 20px;
  }
}
@media screen and (min-width: 1336px) {
  .hero__arrow, .hero__point-text {
    font-size: 24px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__arrow, .hero__point-text {
    font-size: 30px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__arrow, .hero__point-text {
    font-size: 40px;
  }
}
.hero__arrow {
  margin: 4px 0;
}
@media screen and (min-width: 1024px) {
  .hero__arrow {
    width: 62px;
    rotate: 270deg;
    margin: 0;
  }
}
@media screen and (min-width: 1336px) {
  .hero__arrow {
    height: 31px;
    width: 19px;
    margin: 0 32px;
  }
}
@media screen and (min-width: 1680px) {
  .hero__arrow {
    height: 39px;
    width: 23px;
  }
}
@media screen and (min-width: 1921px) {
  .hero__arrow {
    height: 52px;
    width: 31px;
  }
}

.what-is {
  margin-bottom: 60px;
}
@media screen and (min-width: 1680px) {
  .what-is {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 1024px) {
  .what-is__content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1921px) {
  .what-is__content-wrapper {
    justify-content: center;
  }
}
.what-is__banner {
  height: 200px;
  margin-bottom: 40px;
}
@media screen and (min-width: 600px) {
  .what-is__banner {
    height: 300px;
  }
}
@media screen and (min-width: 1024px) {
  .what-is__banner {
    height: 484px;
    width: 430px;
    margin-right: 40px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1336px) {
  .what-is__banner {
    height: 432px;
    width: 590px;
  }
}
@media screen and (min-width: 1680px) {
  .what-is__banner {
    height: 376px;
    width: 780px;
  }
}
@media screen and (min-width: 1921px) {
  .what-is__banner {
    height: 345px;
    width: 880px;
  }
}
.what-is__title {
  font-variation-settings: "wdth" 140, "slnt" 0;
  margin-bottom: 40px;
}
.what-is__subtitle {
  margin-bottom: 32px;
}
@media screen and (min-width: 1921px) {
  .what-is__subtitle {
    font-size: 24px;
  }
}
.what-is__item {
  margin-bottom: 16px;
}
.what-is__item:last-child {
  margin-bottom: 0;
}
.what-is__list-icon {
  height: auto;
  width: auto;
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-variation-settings: "wdth" 140, "slnt" 0;
  rotate: 270deg;
  margin-right: 12px;
  margin-top: 1px;
}
@media screen and (min-width: 1680px) {
  .what-is__list-icon {
    margin-top: 3px;
  }
}
.what-is__list-text {
  font-size: 20px;
  font-weight: 400;
}
@media screen and (min-width: 1024px) {
  .what-is__list-text {
    max-width: 393px;
    width: 100%;
  }
}
@media screen and (min-width: 1336px) {
  .what-is__list-text {
    max-width: 562px;
  }
}
@media screen and (min-width: 1680px) {
  .what-is__list-text {
    max-width: 749px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1921px) {
  .what-is__list-text {
    max-width: 849px;
  }
}

.top {
  position: relative;
  margin-bottom: 60px;
}
@media screen and (min-width: 1680px) {
  .top {
    margin-bottom: 120px;
  }
}
.top__main-banner-wrapper {
  display: block;
  padding: 0 16px;
}
@media screen and (min-width: 600px) {
  .top__main-banner-wrapper {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .top__main-banner-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: -1;
  }
}
@media screen and (min-width: 1336px) {
  .top__main-banner-wrapper {
    padding: 0 40px;
  }
}
.top__main-banner {
  height: clamp(155.23px, calc(155.23px + (213.282 - 155.23) * (100vw - 270px) / (359 - 270)), 213.282px);
}
@media screen and (min-width: 360px) {
  .top__main-banner {
    height: clamp(213.282px, calc(213.282px + (232.849 - 213.282) * (100vw - 360px) / (389 - 360)), 232.849px);
  }
}
@media screen and (min-width: 390px) {
  .top__main-banner {
    height: clamp(232.849px, calc(232.849px + (369.819 - 232.849) * (100vw - 389px) / (599 - 389)), 369.819px);
  }
}
@media screen and (min-width: 600px) {
  .top__main-banner {
    height: clamp(369.819px, calc(369.819px + (641.151 - 369.819) * (100vw - 600px) / (1023 - 600)), 641.151px);
  }
}
@media screen and (min-width: 1024px) {
  .top__main-banner {
    height: 741.2453px;
    object-fit: cover;
  }
}
@media screen and (min-width: 1336px) {
  .top__main-banner {
    height: 775px;
  }
}
@media screen and (min-width: 1680px) {
  .top__main-banner {
    height: 846px;
  }
}
@media screen and (min-width: 1921px) {
  .top__main-banner {
    height: 900px;
  }
}
.top__content-wrapper {
  margin-top: -60px;
}
@media screen and (min-width: 1024px) {
  .top__content-wrapper {
    padding-top: 60px;
    margin-top: 0;
  }
}
.top__text-content {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .top__text-content {
    max-width: 430px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1336px) {
  .top__text-content {
    max-width: 590px;
  }
}
@media screen and (min-width: 1680px) {
  .top__text-content {
    max-width: 780px;
  }
}
@media screen and (min-width: 1921px) {
  .top__text-content {
    max-width: 880px;
  }
}
.top__description-wrapper {
  margin-bottom: 40px;
}
.top__text {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.top__text:last-child {
  margin-bottom: 0;
}
.top__text--medium {
  font-weight: 500;
}
.top__text span {
  color: #FFC400;
}
@media screen and (min-width: 600px) {
  .top__text {
    font-size: 24px;
  }
}
.top__videos-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 1024px) {
  .top__videos-wrapper {
    flex-direction: row;
  }
}
@media screen and (min-width: 1336px) {
  .top__videos-wrapper {
    gap: 40px;
  }
}
.top__videos-block {
  display: flex;
  justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 1024px) {
  .top__videos-block {
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
  }
}
@media screen and (min-width: 1336px) {
  .top__videos-block {
    gap: 40px;
  }
}
.top__video-wrapper {
  position: relative;
  height: clamp(147.05px, calc(147.05px + (207.08 - 147.05) * (100vw - 270px) / (359 - 270)), 207.08px);
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid transparent;
}
.top__video-wrapper:active {
  border: 1px solid #FFC400;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
}
@media screen and (min-width: 360px) {
  .top__video-wrapper {
    height: clamp(207.08px, calc(207.08px + (227.32 - 207.08) * (100vw - 360px) / (389 - 360)), 227.32px);
  }
}
@media screen and (min-width: 390px) {
  .top__video-wrapper {
    height: clamp(227.98px, calc(227.98px + (368.97 - 227.98) * (100vw - 390px) / (599 - 390)), 368.97px);
  }
}
@media screen and (min-width: 600px) {
  .top__video-wrapper {
    height: 320px;
  }
}
@media screen and (min-width: 1024px) {
  .top__video-wrapper {
    height: 221.245px;
    flex-basis: 164px;
    width: 164px;
    cursor: pointer;
  }
  .top__video-wrapper--last {
    display: none;
  }
  .top__video-wrapper:hover {
    border: 1px solid #FFC400;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
  }
}
@media screen and (min-width: 1336px) {
  .top__video-wrapper {
    height: 286px;
    flex-basis: 212px;
    width: 212px;
  }
}
@media screen and (min-width: 1680px) {
  .top__video-wrapper {
    height: 388px;
    flex-basis: 288px;
    width: 288px;
  }
}
@media screen and (min-width: 1921px) {
  .top__video-wrapper {
    height: 442px;
    flex-basis: 328px;
    width: 328px;
  }
}
.top__video-preview {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}
.top__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 64px;
  width: 64px;
  background-image: url(../images/play.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  border: none;
}
@media screen and (min-width: 390px) {
  .top__play-btn {
    height: 86px;
    width: 86px;
  }
}
@media screen and (min-width: 1024px) {
  .top__play-btn {
    height: 64px;
    width: 64px;
  }
}
@media screen and (min-width: 1336px) {
  .top__play-btn {
    height: 86px;
    width: 86px;
  }
}
@media screen and (min-width: 1680px) {
  .top__play-btn {
    height: 120px;
    width: 120px;
  }
}
.top__modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.top__close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

#mainPlayer {
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background: black;
}

@media screen and (min-width: 1024px) {
  .regulation__content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 60px;
    margin-top: -330px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1680px) {
  .regulation__content {
    row-gap: 120px;
  }
}
.regulation__text-content {
  margin-bottom: 60px;
}
.regulation__text-content--1 {
  margin-top: -40px;
}
@media screen and (min-width: 600px) {
  .regulation__text-content--1 {
    margin-top: -60px;
  }
}
@media screen and (min-width: 1024px) {
  .regulation__text-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .regulation__text-content--1 {
    margin-top: 0;
  }
  .regulation__text-content > div {
    width: 430px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1336px) {
  .regulation__text-content > div {
    width: 590px;
  }
}
@media screen and (min-width: 1680px) {
  .regulation__text-content > div {
    width: 780px;
  }
}
@media screen and (min-width: 1921px) {
  .regulation__text-content > div {
    width: 880px;
  }
}
.regulation__main-banner-wrapper {
  display: block;
  padding: 0 16px;
}
@media screen and (min-width: 600px) {
  .regulation__main-banner-wrapper {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1336px) {
  .regulation__main-banner-wrapper {
    padding: 0 40px;
  }
}
.regulation__main-banner {
  height: clamp(150.01px, calc(150.01px + (208.06 - 150.01) * (100vw - 270px) / (359 - 270)), 208.06px);
}
@media screen and (min-width: 360px) {
  .regulation__main-banner {
    height: clamp(208.06px, calc(208.06px + (227.631 - 208.06) * (100vw - 360px) / (389 - 360)), 227.631px);
  }
}
@media screen and (min-width: 390px) {
  .regulation__main-banner {
    height: clamp(227.631px, calc(227.631px + (364.601 - 227.631) * (100vw - 389px) / (599 - 389)), 364.601px);
  }
}
@media screen and (min-width: 600px) {
  .regulation__main-banner {
    height: clamp(365.25px, calc(365.25px + (641.151 - 365.25) * (100vw - 600px) / (1023 - 600)), 641.151px);
  }
}
@media screen and (min-width: 1024px) {
  .regulation__main-banner {
    height: 600px;
    object-fit: cover;
  }
}
@media screen and (min-width: 1336px) {
  .regulation__main-banner {
    height: 800px;
  }
}
@media screen and (min-width: 1921px) {
  .regulation__main-banner {
    height: 1100px;
  }
}
.regulation__title {
  font-variation-settings: "wdth" 140, "slnt" 0;
  margin-bottom: 40px;
}
.regulation__subtitle {
  margin-bottom: 32px;
}
.regulation__link {
  height: 45px;
  max-width: 216px;
  width: 100%;
  font-size: 16px;
  margin: 40px auto 0 auto;
}
@media screen and (min-width: 360px) {
  .regulation__link {
    max-width: 292px;
    height: 56px;
    font-size: 18px;
  }
}
@media screen and (min-width: 600px) {
  .regulation__link {
    height: 79px;
    max-width: 379px;
  }
  .regulation__link span {
    font-size: 24px;
    font-variation-settings: "wdth" 140, "slnt" 0;
  }
}
@media screen and (min-width: 1921px) {
  .regulation__link {
    margin: 47px auto 0 auto;
  }
}
.regulation__list-icon {
  margin-right: 12px;
}
.regulation__list-icon--round {
  height: 26px;
  width: 24px;
  background-image: url(../images/check-icon-round.svg);
}
.regulation__list-icon--fill {
  height: 24px;
  width: 24px;
  background-image: url(../images/check-icon.svg);
}
.regulation__basic-payments {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 2px solid #50AE95;
  background: #000;
  width: 100%;
  color: #FFF;
  padding: 24px;
  margin-top: 40px;
}
.regulation__basic-payments--2 {
  display: none;
}
@media screen and (min-width: 1024px) {
  .regulation__basic-payments {
    margin-top: 160px;
  }
}
@media screen and (min-width: 1336px) {
  .regulation__basic-payments {
    margin-top: 48px;
  }
  .regulation__basic-payments--1 {
    display: none;
  }
  .regulation__basic-payments--2 {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
@media screen and (min-width: 1680px) {
  .regulation__basic-payments {
    margin-top: 76px;
  }
}
@media screen and (min-width: 1921px) {
  .regulation__basic-payments {
    margin-top: 108px;
  }
}
.regulation__payments-title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
@media screen and (min-width: 1336px) {
  .regulation__payments-title-wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.regulation__payment-icon--1 {
  height: 48px;
  width: 48px;
  margin-right: 10px;
}
.regulation__payment-icon--2 {
  display: none;
}
@media screen and (min-width: 1024px) {
  .regulation__payment-icon--1 {
    height: 26px;
    width: 26px;
  }
}
@media screen and (min-width: 1336px) {
  .regulation__payment-icon--1 {
    display: none;
  }
  .regulation__payment-icon--2 {
    display: block;
    height: 82px;
    width: 82px;
    margin-right: 24px;
  }
}
@media screen and (min-width: 1680px) {
  .regulation__payment-icon--2 {
    height: 74px;
    width: 74px;
  }
}
.regulation__payment-text {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media screen and (min-width: 1336px) {
  .regulation__payment-text {
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1680px) {
  .regulation__payment-text {
    font-size: 24px;
  }
}
.regulation__payment-description {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.bonuses {
  margin-bottom: 60px;
}
@media screen and (min-width: 1680px) {
  .bonuses {
    margin-bottom: 120px;
  }
}
.bonuses__title {
  text-align: center;
  font-variation-settings: "wdth" 140, "slnt" 0;
  margin-bottom: 40px;
}
.bonuses__description {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 32px;
}
@media screen and (min-width: 1921px) {
  .bonuses__description {
    font-size: 24px;
  }
}
.bonuses__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (min-width: 600px) {
  .bonuses__list {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .bonuses__list {
    justify-content: space-between;
  }
}
.bonuses__item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.bonuses__item:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 600px) {
  .bonuses__item {
    flex-direction: column;
    flex-basis: 33.333%;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .bonuses__item {
    flex-basis: 157px;
  }
}
@media screen and (min-width: 1336px) {
  .bonuses__item {
    flex-basis: 186px;
  }
}
@media screen and (min-width: 1921px) {
  .bonuses__item {
    flex-basis: 240px;
  }
}
.bonuses__item-icon {
  height: 90px;
  width: 90px;
  margin-right: 16px;
}
@media screen and (min-width: 360px) {
  .bonuses__item-icon {
    height: 100px;
    width: 100px;
  }
}
@media screen and (min-width: 600px) {
  .bonuses__item-icon {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1680px) {
  .bonuses__item-icon {
    height: 160px;
    width: 160px;
  }
}
@media screen and (min-width: 1921px) {
  .bonuses__item-icon {
    height: 240px;
    width: 240px;
  }
}
.bonuses__item-text {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
@media screen and (min-width: 360px) {
  .bonuses__item-text {
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .bonuses__item-text {
    text-align: center;
  }
}
@media screen and (min-width: 1336px) {
  .bonuses__item-text {
    font-size: 24px;
  }
}
@media screen and (min-width: 1921px) {
  .bonuses__item-text {
    font-size: 30px;
  }
}
.bonuses__arrow {
  display: inline-block;
  rotate: 270deg;
}
@media screen and (min-width: 1024px) {
  .bonuses__place-list-text {
    max-width: 100%;
  }
}
.bonuses__place-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  row-gap: 24px;
  margin-top: 32px;
}
@media screen and (min-width: 1024px) {
  .bonuses__place-list {
    justify-content: space-between;
  }
}
.bonuses__place-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 50%;
}
@media screen and (min-width: 390px) {
  .bonuses__place-item {
    flex-basis: 33.333%;
  }
}
@media screen and (min-width: 1024px) {
  .bonuses__place-item {
    flex-basis: 16.666%;
  }
}
@media screen and (min-width: 1336px) {
  .bonuses__place-item {
    flex-basis: max-content;
  }
}
.bonuses__place-icon {
  height: 100px;
  width: 100px;
  margin-bottom: 16px;
}
@media screen and (min-width: 1680px) {
  .bonuses__place-icon {
    height: 160px;
    width: 160px;
  }
}
@media screen and (min-width: 1921px) {
  .bonuses__place-icon {
    height: 240px;
    width: 240px;
  }
}
.bonuses__place-text {
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-variation-settings: "wdth" 140, "slnt" 0;
}
@media screen and (min-width: 360px) {
  .bonuses__place-text {
    font-size: 20px;
  }
}
@media screen and (min-width: 1336px) {
  .bonuses__place-text {
    font-size: 24px;
  }
}
@media screen and (min-width: 1921px) {
  .bonuses__place-text {
    font-size: 30px;
  }
}

.important {
  margin-bottom: 60px;
}
@media screen and (min-width: 1680px) {
  .important {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 1024px) {
  .important__main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (min-width: 1680px) {
  .important__main-content {
    justify-content: center;
  }
}
@media screen and (min-width: 1024px) {
  .important__banner {
    height: 376px;
    width: 424px;
  }
}
@media screen and (min-width: 1336px) {
  .important__banner {
    height: 376px;
    width: 584px;
  }
}
@media screen and (min-width: 1680px) {
  .important__banner {
    width: 774px;
    margin-right: 52px;
  }
}
@media screen and (min-width: 1921px) {
  .important__banner {
    height: 370px;
    width: 874px;
  }
}
@media screen and (min-width: 1024px) {
  .important__link {
    margin: 40px auto 0 0;
  }
}

.footer {
  padding-bottom: 60px;
}
@media screen and (min-width: 1921px) {
  .footer {
    padding-bottom: 120px;
  }
}
.footer__main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.footer__logo-link {
  display: block;
  height: 20px;
  width: 180px;
  margin: 0 auto 24px auto;
}
.footer__logo {
  height: 100%;
  width: 100%;
}
.footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 177px;
  text-decoration: none;
  color: #FFC400;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid #FFC400;
  margin-bottom: 16px;
}
.footer__link:active {
  background: #FFC400;
  color: #1F1B18;
}
@media screen and (min-width: 360px) {
  .footer__link {
    height: 40px;
    width: 189px;
    margin-bottom: 0;
    margin-right: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__link:hover {
    background: #FFC400;
    color: #1F1B18;
  }
}
.footer__social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
@media screen and (min-width: 360px) {
  .footer__social-icons {
    margin-bottom: 0;
  }
}
.footer__social-link {
  display: block;
  height: 40px;
  width: 40px;
}
.footer__social-link:first-child {
  margin-right: 16px;
}
.footer__social-link:active {
  opacity: 0.7;
}
@media screen and (min-width: 1024px) {
  .footer__social-link:hover {
    opacity: 0.7;
  }
}
.footer__social-icon {
  height: 100%;
  width: 100%;
}
.footer__rules-link {
  color: #08C;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.footer__rules-link:active {
  color: #40BFFF;
}
.footer__rules-link:visited {
  color: #4888A8;
}
@media screen and (min-width: 1024px) {
  .footer__rules-link:hover {
    color: #40BFFF;
  }
}
@media screen and (min-width: 360px) {
  .footer__main-links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }
}

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