@font-face { font-family: 'RobotoSlab'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/RobotoSlab-Regular.woff2") format('woff2'), url("../fonts/RobotoSlab-Regular.woff") format('woff') } @font-face { font-family: 'RobotoSlab'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/RobotoSlab-Medium.woff2") format('woff2'), url("../fonts/RobotoSlab-Medium.woff") format('woff') } @font-face { font-family: 'RobotoSlab'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/RobotoSlab-Black.woff2") format('woff2'), url("../fonts/RobotoSlab-Black.woff") format('woff') } @font-face { font-family: 'RobotoSlab'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/RobotoSlab-ExtraBold.woff2") format('woff2'), url("../fonts/RobotoSlab-ExtraBold.woff") format('woff') } @font-face { font-family: 'ST-SimpleSquare'; font-style: normal; font-weight: 100 900; src: url("../fonts/ST-SimpleSquare.woff2") format('woff2'), url("../fonts/ST-SimpleSquare.woff") format('woff') } body._lock { overflow: hidden } .form-message._error::before, .password__eye::before, .iti__arrow::before, [class^=_icon-]:before, [class*=" _icon-"]:before, [class^=_system-icon]:before, [class*=" _system-icon"]:before { font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } [class^=_system-icon]:before, [class*=" _system-icon"]:before { font-family: "icons-system" } [class^=_icon-]:before, [class*=" _icon-"]:before { font-family: "icons" } ._system-icon-check-circle:before { content: "" } ._system-icon-close-solid:before { content: "" } ._system-icon-eye-close:before { content: "" } ._system-icon-eye:before { content: "" } ._system-icon-close:before { content: "" } ._icon-plus:before { content: "" } ._icon-arrow-big:before { content: "" } ._icon-arrow-small:before { content: "" } ._icon-arrow:before { content: "" } ._icon-icon1:before { content: "" } ._icon-icon2:before { content: "" } ._icon-icon3:before { content: "" } ._icon-login:before { content: "" } ._icon-sphere:before { content: "" } body a { -webkit-transition: color .3s; transition: color .3s; color: #111; font-family: "RobotoSlab" } html { box-sizing: border-box; overflow-x: hidden } *, *::before, *::after { box-sizing: inherit; padding: 0; margin: 0 } main { position: relative; overflow-x: hidden } :focus, :active { outline: none } a:focus, a:active { outline: none } aside, nav, footer, header, section { display: block } html, body { height: 100%; min-width: 320px } body._lock { overflow: hidden } body { line-height: 1; font-family: "RobotoSlab"; } body { color: #111; background: #fff; font-size: 1rem; line-height: 130%; } .wrapper { display: grid; grid-template-rows: auto 1fr auto; width: 100%; min-height: 100%; overflow: hidden; } .page { display: grid; min-width: 0; } input, button, textarea { font-family: "RobotoSlab"; } input::-ms-clear { display: none } button { cursor: pointer; background: rgba(0, 0, 0, 0); border: 0; } button::-moz-focus-inner { padding: 0; border: 0 } a, a:visited { text-decoration: none } a:hover { text-decoration: none; color: #ff777e; } ul li { list-style: none } img { vertical-align: top } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; font-family: ST-SimpleSquare; } img { max-width: 100% } [data-goto] { cursor: pointer } img { max-width: 100%; } body .h1, body h1 a, body h1 { font-size: calc(30px + 38 * (100vw - 320px) / 958); line-height: 100%; color: #111; font-family: ST-SimpleSquare; } @media (min-width: 1279px) { body .h1, body h1 a, body h1 { font-size: 68px; } } button { cursor: pointer; background: rgba(0, 0, 0, 0) } button::-moz-focus-inner { padding: 0; border: 0 } body .h2, body h2 a, body h2 { font-size: calc(24px + 22 * (100vw - 320px) / 958); line-height: 100%; color: #111; font-family: ST-SimpleSquare; } @media (min-width: 1279px) { body .h2, body h2 a, body h2 { font-size: 46px; } } body .h3, body h3 a, body h3 { font-size: calc(20px + 12 * (100vw - 320px) / 958); font-weight: 500; line-height: 120%; color: #111; font-family: "RobotoSlab"; } @media (min-width: 1279px) { body .h3, body h3 a, body h3 { font-size: 32px; } } body .h4, body h4 a, body h4 { font-size: calc(20px + 4 * (100vw - 320px) / 958); font-family: "RobotoSlab"; line-height: 120%; color: #111; } @media (min-width: 1279px) { body .h4, body h4 a, body h4 { font-size: 24px; } } body .h5, body h5 a, body h5 { font-family: "RobotoSlab"; font-size: 1rem; line-height: 120% } .input { overflow: hidden; display: block; width: 100%; font-size: 1rem; line-height: 125%; padding: 0.625rem 1rem; height: 2.875rem; color: #111; background: #fff; border: 0.0625rem solid #2c2c2c; border-radius: 0.5rem; -webkit-transition: border .3s ease 0s; transition: border .3s ease 0s } .btn { cursor: pointer; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; text-transform: uppercase; font-size: 1em; line-height: 1; padding: 0.625em 1.25em; height: 2.75em; background: #08111b; color: #fff !important; border-radius: 0.5em; border: 0.0625rem solid #08111b; -webkit-transition: background-color .3s, border-color .3s, color .3s, opacity .3s, -webkit-box-shadow .1s; transition: background-color .3s, border-color .3s, color .3s, opacity .3s, box-shadow .1s, -webkit-box-shadow .1s; width: fit-content; } .btn_fw { width: 100%; } .btn_w { background: rgba(0, 0, 0, 0); border: 0.0625rem solid #fff; color: #fff !important } @media (any-hover: hover) { .btn_w:hover { background: #ff777e; border: 0.0625rem solid #ff777e; color: #fff !important } } @media (min-width: 48rem) { .input { height: 2.875rem } } .input_small { height: 2.625rem } .input:focus { border: 0.0625rem solid #26b9ff; } ._container { padding: 0 15px; width: 100%; max-width: 1320px; margin: 0 auto } a, a:visited { text-decoration: none; } .main-block__link { text-transform: uppercase; justify-self: start; } .btn_long { min-width: 100%; } @media (min-width: 48em) { .btn_long { min-width: 18.0625rem } } .btn_grad { background: linear-gradient(271deg, #ff894c -2.08%, #ff7d85 43.88%, #d63799 89.84%); border: none; color: #fff !important; } @media (min-width: 1278px) { h1 { font-size: 68px; } } .header { position: relative; z-index: 100; padding: 0.625rem 0px; background: #08111b; border-bottom: 0.0625rem solid #ff777e; } .header__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.625rem } .header__logo { position: relative; z-index: 100; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex } .header__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem } .header__login { color: #ff777e; } .menu__body { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #08111b; z-index: 50; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-box-shadow: 4px 0px 8px 0px rgba(34, 60, 80, .2); box-shadow: 4px 0px 8px 0px rgba(34, 60, 80, .2); overflow-x: hidden; overflow-y: auto; padding: 1.25rem 0.9375rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; pointer-events: none; padding-top: 7.5rem } .menu__body._active { opacity: 1; pointer-events: auto } @media (min-width: 75.0625em) { .menu__body { position: static; top: auto; left: auto; width: auto; height: auto; background: transparent; z-index: auto; -webkit-box-shadow: none; box-shadow: none; overflow: visible; padding: 0; display: block; opacity: 1; pointer-events: auto } } .menu__list { -ms-flex-wrap: wrap; flex-wrap: wrap; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0px 0px 1.875rem 0px; } @media (min-width: 75.0625em) { .menu__list { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1rem; flex-direction: row; margin: 0; } } .menu__link { position: relative; display: inline-block; padding: 0.25rem 0.5rem; white-space: nowrap; -webkit-transition: color .3s, border-color .3s, opacity .3s, background-color .3s; transition: color .3s, border-color .3s, opacity .3s, background-color .3s; font-size: 1.125rem; color: #fff } .menu__link._active::before { content: ""; position: absolute; bottom: -0.3125rem; left: 0; width: 100%; height: 0.0625rem; background: #ff777e; } .menu__link { border: 0.0625rem solid rgba(0, 0, 0, 0) } @media (any-hover: hover) { .menu__link:hover { border: 0.0625rem solid rgba(0, 0, 0, 0) } } .menu__link._active { border: 0.0625rem solid rgba(0, 0, 0, 0) } .header-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.9375rem } ._container-small { max-width: 1100px; } .header-actions_mobile { display: -webkit-box; display: -ms-flexbox; display: flex } @media (min-width: 48em) { .header-actions_mobile { display: none } } .header-actions_screen { display: none } @media (min-width: 48em) { .header-actions_screen { display: -webkit-box; display: -ms-flexbox; display: flex } } .header-actions__sign-in { text-transform: uppercase; min-width: 11.25rem } .header-actions__langs { position: relative } .logo { text-transform: uppercase; font-size: 1.5rem !important; font-weight: 700; color: #fff !important } .block-404 { padding: 8.25rem 0px; position: relative; overflow: hidden; background: #08111b; } .block-404::before { content: ""; position: absolute; z-index: 1; top: 0%; left: 0%; width: 245.819px; height: 588.683px; -webkit-transform: rotate(31.213deg); -ms-transform: rotate(31.213deg); transform: rotate(31.213deg); border-radius: 588.683px; background: rgba(214, 56, 153, .5); -webkit-filter: blur(100px); filter: blur(100px); } @media (min-width: 48em) { .block-404::before { content: ""; position: absolute; z-index: 1; top: 0%; left: 30%; width: 236.906px; height: 519.191px; -webkit-transform: rotate(33.509deg); -ms-transform: rotate(33.509deg); transform: rotate(33.509deg); border-radius: 519.191px; background: rgba(214, 56, 153, .5); -webkit-filter: blur(100px); filter: blur(100px); } } .block-404__coin { position: absolute; z-index: 2; width: 10rem; } @media (min-width: 48em) { .block-404__coin { position: absolute; z-index: 2; width: 30rem; } } .block-404__coin_1 { top: 30px; left: 50% } @media (min-width: 48em) { .block-404__coin_1 { top: 0%; left: 10% } } .block-404__coin_2 { bottom: unset; top: -12px; left: 0px } @media (min-width: 48em) { .block-404__coin_2 { bottom: 0%; left: 5%; top: unset; } } .block-404__coin_3 { bottom: unset; right: 5%; top: -20px; left: 23%; } @media (min-width: 48em) { .block-404__coin_3 { bottom: 5%; right: 5%; top: unset; left: unset; } } .block-404__container { height: 100% } .block-404__body { position: relative; z-index: 3; height: 100%; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 1.5rem; } @media (min-width: 48em) { .block-404__body { position: relative; z-index: 3; height: 100%; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; } } .block-404__title { font-size: 120px; color: #FFFFFF; } @media (min-width: 48em) { .block-404__title { font-size: 210px; } } .block-404__label { color: #fff; font-size: 1rem; line-height: 130%; } @media (min-width: 48em) { .block-404__label { font-size: 1.25rem; } } .block-404__actions { 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 } .block-404__btn { width: 11.25rem } .block-404__bg-1 { position: absolute; left: 0; bottom: 0; z-index: -1; width: 9.875rem; } @media (min-width: 48em) { .block-404__bg-1 { position: absolute; left: 0; bottom: 0; z-index: -1; } } .block-404__bg-2 { position: absolute; top: 0; right: 0; z-index: -1; width: 8rem; } @media (min-width: 48em) { .block-404__bg-2 { position: absolute; top: 0; right: 0; z-index: -1; } } .logo { font-size: 1.25rem !important } @media (min-width: 22.5625em) { .logo { font-size: 1.5rem !important } } .btn_trans { background: rgba(0, 0, 0, 0); border: 0.0625rem solid #ff777e; color: #ff777e !important } @media (any-hover: hover) { .btn_trans:hover { background: #ff777e; border: 0.0625rem solid #ff777e; color: #fff !important } } .menu-icon { display: inline-block; position: relative; width: 1.125rem; height: 1rem; cursor: pointer; z-index: 100; } .menu-icon span { -webkit-transition: opacity .3s, rotate .3s, translate .3s; transition: opacity .3s, rotate .3s, translate .3s; top: calc(50% - 0.0625rem); left: 0px; position: absolute; width: 100%; height: 0.125rem; border-radius: 0.125rem; background-color: #fff } .menu-icon span:first-child { translate: 0 -0.5rem } .menu-icon span:last-child { translate: 0 0.5rem } .menu-icon._active span { opacity: 0 } .menu-icon._active span:first-child { rotate: -45deg; translate: 0 0; opacity: 1 } .menu-icon._active span:last-child { rotate: 45deg; translate: 0 0; opacity: 1 } @media (min-width: 48.0625em) { .menu-icon { display: none } } .footer { position: relative; overflow: hidden; background: #08111b; padding: 1.5rem 0px; border-top: 0.0625rem solid #ff777e; } @media (min-width: 48em) { .footer { padding: 4rem 0px } } @media (min-width: 62em) { .footer { position: relative; overflow: hidden; background: #08111b; padding: 5rem 0px; border-top: 0.0625rem solid #ff777e; } } .footer::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 20%; width: 186.512px; height: 408px; -webkit-transform: rotate(-29.878deg); -ms-transform: rotate(-29.878deg); transform: rotate(-29.878deg); border-radius: 408px; background: #ff777e; -webkit-filter: blur(100px); filter: blur(100px); } @media (min-width: 48em) { .footer::before { content: ""; position: absolute; z-index: 1; left: 60%; top: 0%; width: 186.512px; height: 408px; -webkit-transform: rotate(-29.878deg); -ms-transform: rotate(-29.878deg); transform: rotate(-29.878deg); border-radius: 408px; background: #ff777e; -webkit-filter: blur(100px); filter: blur(100px); } } .footer__body { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 62em) { .footer__body { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 4.375rem; } } .footer__main { display: grid; grid-template-columns: repeat(1, 1fr); -webkit-box-align: center; -ms-flex-align: center; align-items: center } @media (min-width: 48em) { .footer__main { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 62em) { .footer__main { display: block; grid-template-columns: none } } .footer__logo { display: block; text-transform: uppercase; color: #fff !important; margin: 0px 0px 0rem 0px; text-align: center; } @media (min-width: 48em) { .footer__logo { display: block; margin: 0px 0px 1.5rem 0px; } } .footer__label { font-size: 1.125rem; font-weight: 700; line-height: 120% } @media (min-width: 62em) { .footer__label { font-size: 1.25rem; line-height: 130% } } .footer__socials { display: flex; gap: 2rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 62em) { .footer__socials { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem; } } .footer__socials_screen { display: none } @media (min-width: 48em) { .footer__socials_screen { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: start; } } .footer__socials_mobile { display: -webkit-box; display: -ms-flexbox; display: flex } @media (min-width: 48em) { .footer__socials_mobile { display: none } } .footer__copy { position: relative; z-index: 1; color: #fff; padding: 2rem 0px; font-size: 0.75rem; } @media (min-width: 48em) { .footer__copy { position: relative; z-index: 1; padding: 2rem 0px; font-size: 0.875rem; } } .footer__disclamer { color: gray; padding: 1.25rem 0px 0px 0px; display: grid; gap: 0.625rem; } @media (min-width: 48em) { .footer__disclamer { padding: 3.125rem 0px 0px 0px; display: grid; gap: 1.25rem; } } .footer-menu__top { position: relative; padding: 0px 0px 0.75rem 0px } .footer-menu__top::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; height: 0.0625rem; width: 8.375rem; background: #ff777e } .footer-menu__list { padding: 0rem; display: grid; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; gap: 0.75rem; } @media (min-width: 48em) { .footer-menu__list { padding: 1.125rem 0rem; gap: 1.25rem } } @media (min-width: 62em) { .footer-menu__list { padding: 0px 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 1.25rem; } } .footer-menu__item { text-align: center } .footer-menu__link { display: inline-block; padding: 0.25rem 0.5rem; color: #fff; font-size: 1.125rem; line-height: 140% } .footer-menu__bottom { padding: 0.75rem 0px 0px 0px } .social { color: #fff; background: linear-gradient(271deg, #ff894c -2.08%, #ff7d85 43.88%, #d63799 89.84%); border-radius: 0.375rem; width: 2.75rem; height: 2.75rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .social img { max-width: 24px; max-height: 24px; }