@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700;1,900&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  vertical-align: top;
}

/* #region ANIMATIONS =================================================================================================================*/
/* ANIMATIONS general =================================================================================================================*/
@-webkit-keyframes move_glare {
  0%, 0.0001% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10%, 100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes move_glare {
  0%, 0.0001% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10%, 100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes appear_content {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear_content {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* #endregion ANIMATIONS ==============================================================================================================*/
/* STYLES general =====================================================================================================================*/
.page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "Roboto", serif;
  font-size: 1vw;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  background-color: rgb(1, 6, 123);
  overflow: hidden;
  cursor: pointer;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-167%, -528%);
      -ms-transform: translate(-167%, -528%);
          transform: translate(-167%, -528%);
  width: 18.9583333333em;
  height: 4.1145833333em;
  background: url(logo.svg) no-repeat center/contain;
  z-index: 10;
}

.btn_container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-160%, 215%);
      -ms-transform: translate(-160%, 215%);
          transform: translate(-160%, 215%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 14.1428571429em;
  height: 2.8214285714em;
  font-size: 1.4583333333em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #32373d;
  text-align: center;
  border-radius: 10em;
  -webkit-box-shadow: 0 0 0.6em #92e20a, 0 0 1.62em #000;
          box-shadow: 0 0 0.6em #92e20a, 0 0 1.62em #000;
  z-index: 10;
}
.btn_container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 0.4em;
  border-radius: 10em;
  border: 0.037em solid #92e305;
}

.btn {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #93e20b;
  border-radius: 10em;
  -webkit-box-shadow: inset 0 0.037em 0 #bdff82;
          box-shadow: inset 0 0.037em 0 #bdff82;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  background: linear-gradient(116deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgb(255, 255, 255) 45%, rgb(255, 255, 255) 55%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-animation: move_glare 5s 2.7s linear infinite;
          animation: move_glare 5s 2.7s linear infinite;
}

.btn_txt {
  position: relative;
  width: 100%;
  font-size: 0.8em;
}

.txt_top {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-93.5%, -145%);
      -ms-transform: translate(-93.5%, -145%);
          transform: translate(-93.5%, -145%);
  width: 12.8998968008em;
  font-size: 4.0375em;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  -webkit-animation: appear_content 0.3s 0.5s 1 backwards;
          animation: appear_content 0.3s 0.5s 1 backwards;
}

.txt_top_content {
  font-size: 0.9em;
}

.percent {
  font-size: 1.3537151703em;
  text-shadow: 0 -3px 2px #1180ff, 0 -3px 2px #1180ff, 0 3px 2px #1180ff, 0 3px 2px #1180ff, -3px 0 2px #1180ff, 3px 0 2px #1180ff, -3px 0 2px #1180ff, 3px 0 2px #1180ff, -1px -3px 2px #1180ff, 1px -3px 2px #1180ff, -1px 3px 2px #1180ff, 1px 3px 2px #1180ff, -3px -1px 2px #1180ff, 3px -1px 2px #1180ff, -3px 1px 2px #1180ff, 3px 1px 2px #1180ff, -2px -3px 2px #1180ff, 2px -3px 2px #1180ff, -2px 3px 2px #1180ff, 2px 3px 2px #1180ff, -3px -2px 2px #1180ff, 3px -2px 2px #1180ff, -3px 2px 2px #1180ff, 3px 2px 2px #1180ff, -3px -3px 2px #1180ff, 3px -3px 2px #1180ff, -3px 3px 2px #1180ff, 3px 3px 2px #1180ff, -3px -3px 2px #1180ff, 3px -3px 2px #1180ff, -3px 3px 2px #1180ff, 3px 3px 2px #1180ff, 0 0.06em 0 #14a0ff;
}

.bonus {
  font-size: 1.3537151703em;
}

.txt_bottom_container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-97%, -11%);
      -ms-transform: translate(-97%, -11%);
          transform: translate(-97%, -11%);
  font-size: 4.08078125em;
  width: 11.8313742007em;
  height: 1.5953848706em;
  -webkit-animation: appear_content 0.3s 0.8s 1 backwards;
          animation: appear_content 0.3s 0.8s 1 backwards;
}

.txt_bottom {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  line-height: 1.6;
  text-align: center;
  z-index: 5;
}

.txt_bottom_content {
  font-size: 1em;
}

.back_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) skewX(-30deg);
      -ms-transform: translate(-50%, -50%) skewX(-30deg);
          transform: translate(-50%, -50%) skewX(-30deg);
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#1b19ff), to(#107fff));
  background: linear-gradient(to bottom, #1b19ff 0%, #107fff 100%);
  overflow: hidden;
}

.br_1 {
  display: none;
}

.br_3 {
  display: none;
}

.br_4 {
  display: none;
}

.back {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: 100em;
  height: 49.21875em;
  background: url(back_1920.jpg) no-repeat center/cover;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 6, 123, 0)), color-stop(80%, rgba(1, 6, 123, 0)), to(rgba(1, 6, 123, 0.8)));
  background: linear-gradient(to bottom, rgba(1, 6, 123, 0) 0%, rgba(1, 6, 123, 0) 80%, rgba(1, 6, 123, 0.8) 100%);
}

.person {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(14%, -24.1%);
      -ms-transform: translate(14%, -24.1%);
          transform: translate(14%, -24.1%);
  width: auto;
  max-height: 212vh;
  height: 104.4270833333em;
  -webkit-animation: appear_content 0.6s 0.5s 1 backwards;
          animation: appear_content 0.6s 0.5s 1 backwards;
}

.steps_container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-93.5%, 236.4%);
      -ms-transform: translate(-93.5%, 236.4%);
          transform: translate(-93.5%, 236.4%);
  width: 29.9043062201em;
  height: 3.8875598086em;
  font-size: 1.7416666667em;
  text-transform: none;
  z-index: 6;
}

.step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 1.2em;
}

.step_1 {
  -webkit-animation: appear_content 0.5s 1.1s 1 backwards;
          animation: appear_content 0.5s 1.1s 1 backwards;
}

.step_2 {
  -webkit-animation: appear_content 0.5s 1.6s 1 backwards;
          animation: appear_content 0.5s 1.6s 1 backwards;
}

.step_3 {
  margin-right: 0;
  -webkit-animation: appear_content 0.5s 2.1s 1 backwards;
          animation: appear_content 0.5s 2.1s 1 backwards;
}

.step_number {
  position: relative;
  margin-right: 0.1em;
  font-size: 2.9629186603em;
  color: #93e20b;
}

.step_txt {
  position: relative;
  white-space: nowrap;
  font-size: 0.9em;
}

.step_br {
  display: none;
}

/* MEDIA QUERIES ======================================================================================================================*/
@media screen and (min-aspect-ratio: 1920/890) {
  .logo {
    -webkit-transform: translate(-178.8%, -160%);
        -ms-transform: translate(-178.8%, -160%);
            transform: translate(-178.8%, -160%);
    width: 25.1148545176em;
    height: 5.2067381317em;
  }
  .btn_container {
    -webkit-transform: translate(-179.7%, 47.4%);
        -ms-transform: translate(-179.7%, 47.4%);
            transform: translate(-179.7%, 47.4%);
    font-size: 1.7764165391em;
  }
  .txt_top {
    -webkit-transform: translate(-42.6%, -105%);
        -ms-transform: translate(-42.6%, -105%);
            transform: translate(-42.6%, -105%);
    font-size: 3.6679019908em;
  }
  .percent {
    position: relative;
    top: 0.05em;
    font-size: 2.4528837563em;
  }
  .bonus {
    font-size: 1em;
  }
  .txt_bottom_container {
    -webkit-transform: translate(-39%, 28.6%);
        -ms-transform: translate(-39%, 28.6%);
            transform: translate(-39%, 28.6%);
    width: 8.2045120333em;
    height: 2.6900039453em;
    font-size: 3.4157427259em;
  }
  .txt_bottom {
    line-height: 1.3;
  }
  .txt_bottom_content {
    font-size: 0.76em;
  }
  .back_txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-transform: translate(-50%, -53%) skew(-12deg);
        -ms-transform: translate(-50%, -53%) skew(-12deg);
            transform: translate(-50%, -53%) skew(-12deg);
    background: none;
  }
  .back_txt_top {
    position: relative;
    width: 88%;
    height: 51%;
    background: -webkit-gradient(linear, left top, left bottom, from(#1b19ff), to(#1458ff));
    background: linear-gradient(to bottom, #1b19ff 0%, #1458ff 100%);
  }
  .back_txt_bottom {
    position: relative;
    top: -1%;
    width: 100%;
    height: 51%;
    background: -webkit-gradient(linear, left top, left bottom, from(#1458ff), to(#107fff));
    background: linear-gradient(to bottom, #1458ff 0%, #107fff 100%);
  }
  .get {
    line-height: 1;
  }
  .amount {
    font-size: 1.4162870772em;
    line-height: 1;
  }
  .br_1 {
    display: inline-block;
  }
  .br_4 {
    display: inline-block;
  }
  .back {
    width: 100em;
    height: 42.8790199081em;
    background: url(back_653.jpg) no-repeat center/cover;
  }
  .person {
    -webkit-transform: translate(49.3%, -22.2%);
        -ms-transform: translate(49.3%, -22.2%);
            transform: translate(49.3%, -22.2%);
    max-height: 231vh;
    height: 99.0811638591em;
  }
  .steps_container {
    -webkit-transform: translate(-47.2%, 205.4%);
        -ms-transform: translate(-47.2%, 205.4%);
            transform: translate(-47.2%, 205.4%);
    font-size: 1.7105666156em;
  }
}
@media screen and (max-aspect-ratio: 1366/900) {
  .page {
    font-size: 1.056vw;
  }
  .logo {
    -webkit-transform: translate(-151%, -575%);
        -ms-transform: translate(-151%, -575%);
            transform: translate(-151%, -575%);
  }
  .btn_container {
    -webkit-transform: translate(-146%, 277%);
        -ms-transform: translate(-146%, 277%);
            transform: translate(-146%, 277%);
  }
  .txt_top {
    -webkit-transform: translate(-87.5%, -154%);
        -ms-transform: translate(-87.5%, -154%);
            transform: translate(-87.5%, -154%);
  }
  .txt_bottom_container {
    -webkit-transform: translate(-91%, -3%);
        -ms-transform: translate(-91%, -3%);
            transform: translate(-91%, -3%);
  }
  .back {
    width: 71.1458333333em;
    height: 53.3333333333em;
    background: url(back_1366.jpg) no-repeat center/cover;
  }
  .person {
    -webkit-transform: translate(17%, -26.2%);
        -ms-transform: translate(17%, -26.2%);
            transform: translate(17%, -26.2%);
  }
  .steps_container {
    -webkit-transform: translate(-89.3%, 273.4%);
        -ms-transform: translate(-89.3%, 273.4%);
            transform: translate(-89.3%, 273.4%);
  }
}
@media screen and (max-aspect-ratio: 1024/1100) {
  .page {
    font-size: calc(0.3vw + 0.45vh);
  }
  .logo {
    -webkit-transform: translate(-50%, -750%);
        -ms-transform: translate(-50%, -750%);
            transform: translate(-50%, -750%);
    width: 36.9140625em;
    height: 8.10546875em;
  }
  .btn_container {
    -webkit-transform: translate(-50%, 347.4%);
        -ms-transform: translate(-50%, 347.4%);
            transform: translate(-50%, 347.4%);
    font-size: 3.7109375em;
  }
  .txt_top {
    -webkit-transform: translate(-50%, -407%);
        -ms-transform: translate(-50%, -407%);
            transform: translate(-50%, -407%);
    font-size: 5.4662109375em;
  }
  .txt_bottom_container {
    -webkit-transform: translate(-50%, 84.6%);
        -ms-transform: translate(-50%, 84.6%);
            transform: translate(-50%, 84.6%);
    width: 8.1521906321em;
    height: 2.7225240413em;
    font-size: 6.3489453125em;
  }
  .txt_bottom {
    line-height: 1.3;
  }
  .txt_bottom_content {
    font-size: 0.76em;
  }
  .back_txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-transform: translate(-50%, -53%) skew(-12deg);
        -ms-transform: translate(-50%, -53%) skew(-12deg);
            transform: translate(-50%, -53%) skew(-12deg);
    background: none;
  }
  .back_txt_top {
    position: relative;
    width: 88%;
    height: 51%;
    background: -webkit-gradient(linear, left top, left bottom, from(#1b19ff), to(#1458ff));
    background: linear-gradient(to bottom, #1b19ff 0%, #1458ff 100%);
  }
  .back_txt_bottom {
    position: relative;
    top: -1%;
    width: 100%;
    height: 51%;
    background: -webkit-gradient(linear, left top, left bottom, from(#1458ff), to(#107fff));
    background: linear-gradient(to bottom, #1458ff 0%, #107fff 100%);
  }
  .get {
    line-height: 1;
  }
  .amount {
    font-size: 1.4029458633em;
    line-height: 1;
  }
  .br_4 {
    display: inline-block;
  }
  .back {
    width: 100em;
    height: 133.3984375em;
    background: url(back_1024.jpg) no-repeat center/cover;
  }
  .shadow {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 6, 123, 0)), color-stop(60%, rgba(1, 6, 123, 0)), to(rgba(1, 6, 123, 0.9)));
    background: linear-gradient(to bottom, rgba(1, 6, 123, 0) 0%, rgba(1, 6, 123, 0) 60%, rgba(1, 6, 123, 0.9) 100%);
  }
  .person {
    -webkit-transform: translate(-40.6%, -30.7%);
        -ms-transform: translate(-40.6%, -30.7%);
            transform: translate(-40.6%, -30.7%);
    max-height: none;
    width: 49.21875em;
    height: auto;
  }
  .steps_container {
    -webkit-transform: translate(-50.5%, 435.4%);
        -ms-transform: translate(-50.5%, 435.4%);
            transform: translate(-50.5%, 435.4%);
    font-size: 2.99609375em;
  }
  .step_number {
    margin-right: 0.2em;
  }
  .step_br {
    display: inline-block;
  }
}
@media screen and (max-aspect-ratio: 1024/1366) {
  .page {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 320/480) {
  .page {
    font-size: calc(0.3vw + 0.35vh);
  }
  .logo {
    -webkit-transform: translate(-50%, -730%);
        -ms-transform: translate(-50%, -730%);
            transform: translate(-50%, -730%);
    width: 50.625em;
    height: 10.9375em;
  }
  .btn_container {
    -webkit-transform: translate(-50%, 360.4%);
        -ms-transform: translate(-50%, 360.4%);
            transform: translate(-50%, 360.4%);
    font-size: 5em;
  }
  .txt_top {
    -webkit-transform: translate(-50%, -400%);
        -ms-transform: translate(-50%, -400%);
            transform: translate(-50%, -400%);
    font-size: 7.125em;
  }
  .txt_bottom_container {
    -webkit-transform: translate(-47%, 126.6%);
        -ms-transform: translate(-47%, 126.6%);
            transform: translate(-47%, 126.6%);
    font-size: 7.35em;
  }
  .back {
    width: 100em;
    height: 177.5em;
    background: url(back_320.jpg) no-repeat center/cover;
  }
  .shadow {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 6, 123, 0)), color-stop(50%, rgba(1, 6, 123, 0)), to(rgba(1, 6, 123, 0.96)));
    background: linear-gradient(to bottom, rgba(1, 6, 123, 0) 0%, rgba(1, 6, 123, 0) 50%, rgba(1, 6, 123, 0.96) 100%);
  }
  .person {
    -webkit-transform: translate(-42.1%, -27.7%);
        -ms-transform: translate(-42.1%, -27.7%);
            transform: translate(-42.1%, -27.7%);
    width: 67.1875em;
  }
  .steps_container {
    -webkit-transform: translate(-50.5%, 452.4%);
        -ms-transform: translate(-50.5%, 452.4%);
            transform: translate(-50.5%, 452.4%);
    font-size: 4em;
  }
}
@media screen and (max-aspect-ratio: 320/568) {
  .page {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 280/620) {
  .logo {
    -webkit-transform: translate(-50%, -930%);
        -ms-transform: translate(-50%, -930%);
            transform: translate(-50%, -930%);
  }
  .btn_container {
    -webkit-transform: translate(-50%, 429.4%);
        -ms-transform: translate(-50%, 429.4%);
            transform: translate(-50%, 429.4%);
    font-size: 4.8571428571em;
  }
  .txt_top {
    -webkit-transform: translate(-50%, -519%);
        -ms-transform: translate(-50%, -519%);
            transform: translate(-50%, -519%);
  }
  .txt_bottom_container {
    -webkit-transform: translate(-47%, 126.6%);
        -ms-transform: translate(-47%, 126.6%);
            transform: translate(-47%, 126.6%);
    font-size: 8.4em;
  }
  .back {
    width: 100em;
    height: 233.2142857143em;
    background: url(back_280.jpg) no-repeat center/cover;
  }
  .person {
    -webkit-transform: translate(-42.4%, -31.6%);
        -ms-transform: translate(-42.4%, -31.6%);
            transform: translate(-42.4%, -31.6%);
    width: 83.9285714286em;
  }
  .steps_container {
    -webkit-transform: translate(-50.5%, 524.4%);
        -ms-transform: translate(-50.5%, 524.4%);
            transform: translate(-50.5%, 524.4%);
  }
}