* {
   padding: 0;
   margin: 0;
   border: 0;
}

*,
*:before,
*:after {
   box-sizing: border-box;
}

:focus,
:active {
   outline: none;
}

a:focus,
a:active {
   outline: none;
}

nav,
footer,
header,
aside {
   display: block;
}

html,
body {
   height: 100%;
   width: 100%;
   font-size: 100%;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a,
a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
}

* {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-tap-highlight-color: transparent;
   scrollbar-color: #d4d4d4 #444;
   scrollbar-width: thin;
}

*::-webkit-scrollbar-thumb {
   background-color: #d4d4d4;
}

*::-webkit-scrollbar-track {
   background-color: #444;
}

*::-webkit-scrollbar-button {
   display: none;
   background-color: #d4d4d4;
}

*::-webkit-scrollbar {
   width: 8px;
}

@font-face {
   font-family: Montserrat;
   font-display: block;
   src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2"), url("../fonts/Montserrat-SemiBold.woff") format("woff");
   font-weight: 600;
   font-style: normal;
}

@font-face {
   font-family: Montserrat;
   font-display: block;
   src: url("../fonts/Montserrat-Medium.woff2") format("woff2"), url("../fonts/Montserrat-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: Montserrat;
   font-display: block;
   src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
}

html {
   scroll-behavior: smooth;
}

body {
   background: #1D1D1B;
   font-family: Montserrat;
   color: #fff;
   font-size: 16px;
   line-height: 110%;
}

.container {
   width: min(100%, 1000px);
   margin-inline: auto;
}

/*------------------------------
Animation block
---------------------------*/
.fv-block {
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

.fv-block__body {
   padding: 20px 0;
   flex: 1;
   height: auto;
   display: flex;
   flex-direction: column;
}

@media (max-width: 1480px) {
   .fv-block__body {
      padding: 20px 0 40px;
   }
}

@media (max-width: 1200px) {
   .fv-block__body {
      padding: 20px 0;
   }
}

@media (max-width: 767px) {
   .fv-block__body {
      padding: 30px 0;
   }
}

.fv-block__logo {
   width: 100%;
   width: 14vw;
   margin-inline: auto;
   margin-bottom: 20px;
}

.fv-block__logo img {
   width: 100%;
   -o-object-fit: contain;
   object-fit: contain;
}

@media (max-width: 440px) {
   .fv-block__logo {
      width: 50vw;
   }
}

.fv-block__title {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-weight: 300;
   line-height: 129.824561%;
   text-align: center;
   max-width: 1288px;
   margin-inline: auto;
   padding-inline: 40px;
   font-size: calc(16px + 10 * (100vw - 320px) / 1600);
   margin-bottom: 0;
   text-wrap: balance;
   max-width: 1000px;
}

@media (min-width: 1200px) {
   .fv-block__title {
      font-size: 20px;
      line-height: 140%;
   }
}

@media (max-width: 600px) {
   .fv-block__title {
      padding-inline: 20px;
      margin-bottom: 40px;
      font-size: 18px;
      text-wrap: balance;
   }
}

.fv-block__animation {
   width: 100%;
   margin-bottom: calc(20px + 40 * (100vw - 320px) / 1600);
   transform: scale(1);
}

@media (min-width: 1200px) {
   .fv-block__animation {
      margin: 0;
   }
}

@media (max-width: 1200px) {
   .fv-block__animation {
      transform: scale(1);
      margin-top: 0;
   }
}

.fv-block__steps {
   padding-inline: 40px;
}

.fv-block__step-value {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 76px;
   font-weight: 700;
   line-height: 138.157895%;
   text-align: center;
   margin-bottom: 17px;
   font-size: calc(26px + 50 * (100vw - 320px) / 1600);
}

.fv-block__step-text {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 53px;
   font-weight: 400;
   line-height: 120.754717%;
   text-align: center;
   max-width: 1374px;
   margin-inline: auto;
   font-size: calc(16px + 37 * (100vw - 320px) / 1600);
}

.fv-block__links {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: calc(20px + 60 * (100vw - 320px) / 1600);
   gap: 40px;
}

@media (max-width: 1200px) {
   .fv-block__links {
      margin-top: 0;
   }
}

@media (max-width: 767px) {
   .fv-block__links {
      gap: 40px;
      padding-inline: 40px;
   }
}

@media (max-width: 440px) {
   .fv-block__links {
      gap: 16px;
   }
}

@media (max-width: 359px) {
   .fv-block__links {
      flex-direction: column;
   }
}

.fv-block__link {
   border: 1px solid #007AFF;
   border-radius: 43.88px;
   background: rgb(51, 51, 51);
   width: 244px;
   height: auto;
   font-family: Montserrat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   line-height: 121.875%;
   transition: all 0.3s ease 0s;
   padding: 20px 40px;
   white-space: nowrap;
}

.fv-block__link:nth-child(2) {
   color: #fff;
   background: #007AFF;
}

.fv-block__link:active {
   transform: scale(0.9);
}

@media (hover: hover) {
   .fv-block__link:hover {
      border-color: #fff;
      color: #fff;
   }
}

@media (max-width: 767px) {
   .fv-block__link {
      width: 100%;
      flex: 0 0 40%;
      height: 46px;
      font-size: 18px;
      padding: 6px 16px;
      line-height: 1;
      font-size: 16px;
   }
}

@media (max-width: 369px) {
   .fv-block__link {
      padding: 10px 16px;
   }
}

.fv-block__policy {
   text-align: center;
   margin-top: auto;
}

.fv-block__policy a {
   color: rgb(186, 186, 186);
   font-family: Montserrat;
   font-size: 16px;
   font-weight: 300;
   line-height: 121.212121%;
   text-align: left;
   transition: all 0.3s ease 0s;
   padding-inline: 16px;
}

@media (max-width: 1200px) {
   .fv-block__policy a {
      padding-inline: 16px;
   }
}

@media (max-width: 600px) {
   .fv-block__policy a {
      font-size: 12px;
      padding-inline: 6px;
   }
}

.fv-block__policy a:nth-child(1),
.fv-block__policy a:nth-child(2) {
   border-right: 1px solid rgb(186, 186, 186);
}

@media (hover: hover) {
   .fv-block__policy a:hover {
      color: #fff;
   }
}

/*------------------------------
Registration
---------------------------*/
.fv-logo {
   max-width: 240px;
   margin-inline: auto;
}

.fv-logo img {
   width: 100%;
   height: auto;
   object-fit: contain;
}

.fv-registration,
.fv-autharization {
   height: 100%;
   max-height: 1080px;
}

.fv-registration__body,
.fv-autharization__body {
   padding: 40px 0;
   max-width: 500px;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 40px;
}

.fv-autharization__body {
   padding: 40px 0 20px;
}

.fv-registration__content,
.fv-autharization__content {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   gap: 20px;
}

.fv-registration__progress {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   margin-inline: auto;
   margin-bottom: 40px;
}

.step-3 .fv-registration__title {
   margin-bottom: 35px;
}

.fv-registration__progress-item {
   flex: 0 0 calc(25% - 8px);
   color: rgb(175, 175, 175);
   font-family: Montserrat;
   font-size: 20px;
   font-weight: 500;
   line-height: 121.428571%;
   letter-spacing: 0.5px;
   text-align: center;
   padding: 14px 14px 20px 14px;
   position: relative;
   transition: all 0.3s linear 0s;
}

.fv-registration__progress-item.active {
   color: rgb(0, 122, 255);
}

.fv-registration__progress-item.active::after {
   transform: scaleX(1);
}

.fv-registration__progress-item::before,
.fv-registration__progress-item::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: rgb(175, 175, 175);
}

.fv-registration__progress-item::after {
   background: rgb(0, 122, 255);
   transform-origin: left;
   transform: scaleX(0);
   transition: all 1s linear 0s;
}

.fv-registration__steps {
   display: flex;
   flex: 1;
   align-items: center;
}

.fv-registration__step {
   width: 100%;
}

.step-1 {}

.fv-registration__title {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 24px;
   font-weight: 600;
   line-height: 121.621622%;
   letter-spacing: 0.5px;
   text-align: center;
   margin-bottom: 50px;
}

.fv-registration__area,
.fv-autharization__area {
   width: 100%;
   margin-bottom: 16px;
}

.fv-registration__area input,
.fv-autharization__area input {
   border-radius: 6px;
   background: rgb(51, 51, 51);
   padding: 10px 20px;
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.5px;
   border: 1px solid transparent;
   width: 100%;
   transition: all 0.5s linear 0s;
}

.fv-registration__area input:hover,
.fv-autharization__area input:hover,
.fv-registration__area input:focus,
.fv-autharization__area input:focus {
   border-color: rgb(0, 122, 255);
}

.fv-registration__rules {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 14px;
   font-weight: 400;
   line-height: 123.529412%;
   letter-spacing: 0.5px;
   text-align: center;
   margin-bottom: 50px;
   opacity: 0.75;
}

.fv-registration__message {
   color: #fff;
   font-family: Montserrat;
   font-size: 16px;
   font-weight: 500;
   line-height: 27px;
   letter-spacing: 0.5px;
   text-align: center;
   min-height: 27px;
}

.color-red {
   color: rgb(255, 73, 76);
}

.color-green {
   color: rgb(54, 192, 36);
}

.color-blue {
   color: rgb(0, 122, 255);
}

.color-yellow {
   color: rgb(240 221 40);
}

.fv-registration__button {
   margin-top: 50px;
}

.fv-button {
   display: block;
   border-radius: 30px;
   background: rgb(51, 51, 51);
   padding: 14px 24px;
   width: 300px;
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 123.8%;
   letter-spacing: 0.5px;
   text-align: center;
   text-transform: capitalize;
   margin-inline: auto;
   transition: all 0.5s ease 0s;
   border: 1px solid transparent;
}

.fv-button:active {
   transform: scale(0.95);
}

.fv-button.fv-button-blue {
   background: rgb(0, 122, 255);
   color: #fff;
}

@media (hover: hover) {
   .fv-button.fv-button-blue:hover {
      box-shadow: 0 0 16px rgb(0, 122, 255);
   }
}

.policy__links {
   display: flex;
   align-items: center;
   justify-content: center;
}

.policy__link {
   color: rgb(186, 186, 186);
   font-family: Montserrat;
   font-size: 14px;
   font-weight: 300;
   line-height: 123%;
   padding-inline: 16px;
   transition: all 0.3s ease 0s;
}

.policy__link:not(:last-child) {
   border-right: 1px solid rgb(186, 186, 186);
}

.fv-registration__methods {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-bottom: 100px;
}

.fv-registration__method,
.fv-autharization__method {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px;
   border-radius: 30px;
   background-color: rgb(210, 210, 210);
   width: 240px;
   margin-inline: auto;
   color: rgb(29, 29, 27);
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 600;
   line-height: 121.73913%;
   letter-spacing: 0.7px;
   transition: background-color 0.5s ease 0s, box-shadow 0.5s ease 0s;
}

.fv-registration__method.active {
   background-color: rgb(0, 122, 255);
}

.fv-registration__method:active {
   transform: scale(0.97);
}

.fv-registration__method span,
.fv-autharization__method span {
   flex: 1;
   text-align: center;
   max-width: 100px;
   transition: all 0.2s linear 0.1s;
}

.fv-registration__method img,
.fv-autharization__method img {
   width: 22px;
   height: 22px;
   flex: 0 0 22px;
   object-fit: contain;
   object-position: center;
}

.fv-registration__label,
.fv-autharization__label {
   color: rgb(209, 209, 209);
   font-family: Montserrat;
   font-size: 14px;
   font-weight: 400;
   line-height: 120.833333%;
   letter-spacing: 0.6px;
   margin-bottom: 6px;
   padding-left: 6px;
   display: block;
}

.fv-registration__invite {
   font-family: Montserrat;
   font-size: 18px;
   font-weight: 400;
   letter-spacing: 0.5px;
   margin-bottom: 20px;
}

.fv-registration__invite a {
   color: rgb(0, 122, 255);
   font-weight: 600;
}

.step-3 .fv-registration__button {
   display: flex;
   align-items: center;
   justify-content: end;
   gap: 27px;
   margin-bottom: 50px;
}

.step-3 .fv-registration__button .fv-button {
   width: 233px;
   margin: 0;
}

.step-3 .fv-registration__button a {
   color: rgb(204, 204, 204);
   font-family: Montserrat;
   font-size: 22px;
   font-weight: 400;
   line-height: 122.727273%;
   letter-spacing: 0.6px;
   text-align: center;
   transition: all 0.3s ease 0s;
}

.fv-registration__text {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 16px;
   font-weight: 400;
   line-height: 150.5%;
   letter-spacing: 0.7px;
   text-align: center;
}

.step-4 .fv-registration__button {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

.step-4 .fv-registration__button .fv-button-blue {
   max-width: 383px;
   width: 100%;
}

.step-4 .fv-registration__button .fv-button:not(.fv-button-blue) {
   border-color: rgb(0, 122, 255);
}

.apple-logo {
   transform: translateY(-2px);
}

/*------------------------------
Log in
---------------------------*/
.fv-autharization__title {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 20px;
   font-weight: 500;
   line-height: 123.333333%;
   letter-spacing: 1px;
   text-align: center;
   margin-bottom: 20px;
}

.fv-autharization__methods {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-bottom: 20px;
}

.fv-autharization__method {
   width: 100%;
   max-width: 227px;
   margin: 0;
   gap: 10px;
   padding: 6px 16px;
   height: 44px;
   max-width: 160px;
}


.fv-autharization__buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 50px;
   margin-top: 60px;
}

.fv-autharization__buttons>* {
   flex: 0 1 50%;
}

.fv-autharization__buttons a {
   color: rgb(204, 204, 204);
   font-family: Montserrat;
   font-size: 16px;
   font-weight: 400;
   line-height: 122.727273%;
   letter-spacing: 0.6px;
   text-align: center;
   width: 100%;
   flex: 1;
   transition: all 0.3s ease 0s;
}

.fv-autharization__buttons a:hover {
   color: #fff;
}

.fv-autharization__buttons .fv-button-blue {
   width: auto;
   min-width: 232px;
}

.fv-autharization__remember label {
   display: flex;
   align-items: center;
   cursor: pointer;
   gap: 10px;
   user-select: none;

   color: rgb(204, 204, 204);
   font-family: Montserrat;
   font-size: 14px;
   font-weight: 400;
   line-height: 112.5%;
   letter-spacing: 0.5px;
}

.fv-autharization__remember input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.fv-autharization__remember .custom-checkbox {
   width: 16px;
   height: 16px;
   border-radius: 3px;
   background-color: #fff;
   transition: background-color 0.2s, border-color 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgb(160, 160, 160);
}

.fv-autharization__remember input[type="checkbox"]:checked+.custom-checkbox {
   background-color: #333;
   border-color: #333;
}

.fv-autharization__remember input[type="checkbox"]:checked+.custom-checkbox::after {
   content: "✔";
   color: white;
   font-size: 12px;
   font-weight: bold;
}

.fv-registration-invite {
   text-align: center;
   font-size: 20px;
   line-height: 1.3;
   letter-spacing: 0.5px;
}

.fv-registration-invite a {
   color: #007AFF;
   font-weight: 700;
   font-size: 20px;
   display: block;
   transition: all 0.3s ease 0s;
   letter-spacing: 0.5px;
   margin-top: 10px;
}

@media (hover: hover) {
   .fv-registration-invite a:hover {
      text-shadow: 0 0 16px #007AFF;
   }
}

.fv-registration-invite .fv-button-blue {
   margin-top: 80px !important;
}

.fv-registration-invite p:not(:last-child) {
   margin-bottom: 60px;
}

.invite-reg .fv-registration__area {
   text-align: left;
}

@media (hover: hover) {
   .step-3 .fv-registration__button a:hover {
      color: #fff;
   }

   .fv-registration__button a:hover {
      color: #fff;
   }

   .policy__link:hover {
      color: #fff;
   }

   .fv-registration__method:hover,
   .fv-autharization__method:hover {
      box-shadow: 0 0 16px rgb(0, 122, 255);
   }

   .fv-registration__invite a:hover {
      text-decoration: underline;
   }

   .step-4 .fv-registration__button .fv-button:not(.fv-button-blue):hover {
      box-shadow: 0 0 16px #007AFF;
   }
}

@media (max-width: 1400px) {
   .fv-registration__progress-item {
      padding: 20px 20px 20px 20px;
   }

   .fv-registration__title {
      margin-bottom: 40px;
   }

   .fv-registration__rules {
      margin-bottom: 30px;
   }
}

@media (max-width: 600px) {

   .fv-registration__body,
   .fv-autharization__body {
      padding: 20px;
   }

   .fv-registration__content,
   .fv-autharization__content {
      justify-content: center;
   }

   .fv-registration,
   .fv-autharization {
      max-height: unset;
   }

   .fv-registration__progress {
      margin-bottom: 50px;
   }

   .fv-registration__title {
      font-size: 30px;
   }

   .fv-registration__area input,
   .fv-autharization__area input {
      font-size: 20px;
   }

   .fv-registration__rules {
      font-size: 14px;
      margin-top: 0;
   }

   .fv-registration__progress-item {
      font-size: 16px;
      padding: 18px 18px 20px 18px;
   }

   .fv-registration__progress-item::after,
   .fv-registration__progress-item::before {
      height: 4px;
   }

   .policy__link {
      font-size: 16px;
      padding-inline: 10px;
   }

   .fv-button {
      width: 256px;
      font-size: 16px;
      padding: 16px;
   }

   .fv-registration__method,
   .fv-autharization__method {
      font-size: 20px;
      padding: 14px;
   }

   .fv-registration__method img,
   .fv-autharization__method img {
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
   }

   .fv-registration__method span,
   .fv-autharization__method span {
      max-width: 100px;
   }

   .fv-registration__label,
   .fv-autharization__label {
      font-size: 14px;
      padding-left: 4px;
   }

   .step-3 .fv-registration__button {
      gap: 20px;
   }

   .step-3 .fv-registration__button a {
      font-size: 16px;
   }

   .fv-registration__invite {
      font-size: 16px;
   }

   .fv-registration__text {
      font-size: 18px;
   }

   .step-4 .fv-registration__button {
      gap: 30px;
   }

   .step-4 .fv-registration__button .fv-button:not(.fv-button-blue) {
      font-size: 17px;
      padding: 16px;
   }

   .fv-registration-invite {
      font-size: 16px;
   }

   .fv-registration-invite a {
      font-size: 18px;
   }
}

@media (max-width: 480px) {

   .fv-registration__body,
   .fv-autharization__body {
      padding-inline: 20px;
   }

   .fv-registration__progress-item {
      font-size: 14px;
      padding: 14px 14px 20px 14px;
   }

   .fv-registration__title {
      font-size: 5vw;
   }

   .fv-registration__message {
      min-height: 27px;
   }

   .fv-registration__rules {
      font-size: 12px;
   }

   .fv-registration__message {
      font-size: 18px;
   }

   .fv-registration__area,
   .fv-autharization__area {
      margin-bottom: 20px;
   }

   .fv-registration__area input,
   .fv-autharization__area input {
      font-size: 17px;
      padding: 14px 24px;
   }

   .fv-registration__rules {
      opacity: 0.75;
   }

   .fv-logo {
      max-width: 40vw;
   }

   .fv-autharization__title {
      font-size: 5vw;
   }

   .fv-registration__methods {
      gap: 12px;
   }

   .fv-autharization__methods {
      margin-bottom: 20px;
      gap: 12px;
   }

   .fv-autharization__remember label {
      font-size: 16px;
   }

   .fv-autharization__method {
      height: 46px;
   }

   .fv-registration__button {
      flex-direction: column-reverse;
   }

   .fv-autharization__buttons {
      gap: 20px;
      flex-direction: column-reverse;
   }

   .fv-autharization__buttons a {
      font-size: 16px;
   }

   .fv-autharization__buttons .fv-button-blue {
      min-width: 200px;
   }

   .fv-registration__method,
   .fv-autharization__method {
      font-size: 16px;
      padding: 14px;
      width: 220px;
      gap: 10px;
   }

   .fv-registration__method span,
   .fv-autharization__method span {
      max-width: 70px;
   }

   .fv-registration__method img,
   .fv-autharization__method img {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
   }

   .fv-registration__step {
      min-height: 484px;
   }

   .fv-registration__text {
      font-size: 16px;
   }

   .step-4 .fv-registration__button {
      gap: 20px;
   }

   .step-4 .fv-registration__button .fv-button {
      width: 280px;
      font-size: 16px;
   }
}

@media (max-width: 400px) {
   .fv-registration__progress-item {
      font-size: 15px;
      padding: 10px 10px 16px 10px;
   }

   .policy__link {
      font-size: 14px;
      padding-inline: 6px;
   }

   .fv-registration__method,
   .fv-autharization__method {
      width: 240px;
   }

   .fv-registration__method span,
   .fv-autharization__method span {
      max-width: 60px;
   }
}