html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } img, fieldset, a img { border: none; } input[type=text], input[type=email], input[type=tel], textarea { -webkit-appearance: none; } input[type=submit], button { cursor: pointer; } input[type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; } textarea { overflow: auto; } input, button { margin: 0; padding: 0; border: 0; } div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; } ul, ol { list-style-type: none; } table { border-spacing: 0; border-collapse: collapse; width: 100%; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /** * Swiper 8.4.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 12, 2022 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-backface-hidden .swiper-slide { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-start: var(--swiper-centered-offset-before); margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-before: var(--swiper-centered-offset-before); margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: opacity, height, -webkit-transform; transition-property: transform, opacity, height; transition-property: transform, opacity, height, -webkit-transform; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ""; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } html { font-size: calc(0.8rem + 0.4vw); } @media only screen and (max-width: 2200px) { html { font-size: calc(0.7rem + 0.4vw); } } @media only screen and (max-width: 1940px) { html { font-size: calc(0.65rem + 0.4vw); } } @media only screen and (max-width: 1740px) { html { font-size: calc(0.6rem + 0.4vw); } } @media only screen and (max-width: 1579px) { html { font-size: 16px; } } html { font-size: calc(0.9rem + 0.4vw); } @media only screen and (max-width: 2400px) { html { font-size: calc(0.8rem + 0.4vw); } } @media only screen and (max-width: 2200px) { html { font-size: calc(0.67rem + 0.4vw); } } @media only screen and (max-width: 1940px) { html { font-size: calc(0.6rem + 0.4vw); } } @media only screen and (max-width: 1740px) { html { font-size: calc(0.6rem + 0.4vw); } } @media only screen and (max-width: 1579px) { html { font-size: 16px; } } body { background: #F7FBFA; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1.5; color: #202025; } img { display: block; max-width: 100%; vertical-align: bottom; } a { text-decoration: none; } textarea, input, button { font-family: inherit; } button { background: none; } .icon { width: 1.5rem; height: 1.5rem; fill: #202025; } .text-right { text-align: right; } .text-center { text-align: center; } .text-uppercase { text-transform: uppercase; } .m-auto { margin: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .align-baseline { align-items: baseline; } @media only screen and (max-width: 1259px) { .desktop-hide { display: none !important; } } .desktop-show { display: none !important; } @media only screen and (max-width: 1259px) { .desktop-show { display: block !important; } } @media only screen and (max-width: 1259px) { .desktop-text-right { text-align: right !important; } } @media only screen and (max-width: 1023px) { .tablet-hide { display: none !important; } } .tablet-show { display: none !important; } @media only screen and (max-width: 1023px) { .tablet-show { display: block !important; } } @media only screen and (max-width: 1023px) { .tablet-text-right { text-align: right !important; } } @media only screen and (max-width: 767px) { .mobile-hide { display: none !important; } } .mobile-show { display: none !important; } @media only screen and (max-width: 767px) { .mobile-show { display: block !important; } } @media only screen and (max-width: 767px) { .mobile-text-right { text-align: right !important; } } [class^=button] { display: inline-flex; align-items: center; justify-content: center; height: 4rem; padding: 0 2.25rem; background: #202025; border: 0.125rem solid #202025; border-radius: 0.25rem; text-align: center; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #F7FBFA; transition: all 0.2s; } @media only screen and (max-width: 767px) { [class^=button] { height: 3.75rem; } } [class^=button] svg { margin-left: 0.75rem; fill: #F7FBFA; transition: fill 0.2s; } [class^=button]:hover { background: #010101; border-color: #010101; } .button-stroke { background: transparent; color: #010101; } .button-stroke svg path{ stroke: #010101; } .button-stroke:hover { background: #202025; border-color: #202025; color: #F7FBFA; } .button-stroke svg { fill: #000000; } .button-stroke:hover svg { fill: #F7FBFA; } .button-white { background: #F7FBFA; border-color: #F7FBFA; color: #202025; } .button-white svg { fill: #202025; } .button-white:hover { background: #F7FBFA; border-color: #F7FBFA; color: #C5DC45; } .button-white:hover svg { fill: #C5DC45; } .button-stroke-white { background: transparent; border-color: #F7FBFA; color: #F7FBFA; } .button-stroke-white svg { fill: #F7FBFA; } .button-stroke-white:hover { background: #F7FBFA; border-color: #F7FBFA; color: #010101; } .button-stroke-white:hover svg { fill: #010101; } .button-stroke-grey { background: transparent; border-color: #E1E2E2; color: #202025; } .button-stroke-grey svg { fill: #202025; } .button-stroke-grey:hover { background: transparent; border-color: #202025; color: #202025; } .button-stroke-grey:hover svg { fill: #202025; } .button-empty { position: relative; height: auto; padding: 0 2.75rem 0 0; background: transparent; border: none; text-align: left; color: #202025; } .button-empty:before, .button-empty:after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; } .button-empty:before { right: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #A6AEAD; transition: border-color 0.2s; } .button-empty:after { right: 0.625rem; width: 0.25rem; height: 0.25rem; background: #A6AEAD; transition: background 0.2s, -webkit-transform 0.2s; transition: transform 0.2s, background 0.2s; transition: transform 0.2s, background 0.2s, -webkit-transform 0.2s; } .button-empty:hover { background: transparent; color: #C5DC45; } .button-empty:hover:before { border-color: #C5DC45; } .button-empty:hover:after { -webkit-transform: translateY(-50%) scale(2); transform: translateY(-50%) scale(2); background: #C5DC45; } .button-large { height: 3.75rem; } .button-medium { height: 3rem; padding: 0 1.875rem; } .button-medium svg { margin-left: 0.5rem; } .button-small { height: 2.5rem; padding: 0 1.0625rem; } .button-small svg { margin-left: 0.5rem; } .button-wide { width: 100%; } .button-counter span { margin-left: 0.75rem; padding: 0.125rem 0.5rem; background: #E1E2E2; border-radius: 0.75rem; } .button-circle { flex-shrink: 0; width: 3.75rem; height: 3.75rem; padding: 0; border-color: #E1E2E2; background: transparent; border-radius: 50%; } .button-circle svg { margin: 0; fill: #202025; transition: fill 0.2s; } .button-circle:hover { background: #202025; border-color: #202025; } .button-circle:hover svg { fill: #F7FBFA; } .button-circle.button-medium { width: 3rem; height: 3rem; } .hero, .h1, .h2, .h3, .h4 { font-weight: 800; } .h1, .h2, .h3, .h4 { letter-spacing: -0.02em; } .hero { font-size: 6.5rem; line-height: 1; } @media only screen and (max-width: 1579px) { .hero { font-size: 5rem; line-height: 1; letter-spacing: -0.02em; } } @media only screen and (max-width: 1259px) { .hero { font-size: 4rem; letter-spacing: -0.02em; } } .h1 { font-size: 5rem; line-height: 1; } @media only screen and (max-width: 1419px) { .h1 { font-size: 4rem; } } @media only screen and (max-width: 767px) { .h1 { font-size: 3rem; } } .h2 { font-size: 4rem; line-height: 1; } @media only screen and (max-width: 1419px) { .h2 { font-size: 2.5rem; line-height: 3rem; } } .h3 { font-size: 3rem; line-height: 1; } @media only screen and (max-width: 1419px) { .h3 { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 767px) { .h3 { font-size: 2rem; line-height: 2.5rem; } } .h4 { font-size: 2rem; line-height: 2.5rem; } .content h1, .content h2, .content h3, .content h4 { font-weight: 800; } .content h1, .content h2, .content h3, .content h4, .content h5 { margin-bottom: 3rem; letter-spacing: -0.02em; } @media only screen and (max-width: 1419px) { .content h1, .content h2, .content h3, .content h4, .content h5 { margin-bottom: 2rem; } } .content h1 { font-size: 5rem; line-height: 1; } @media only screen and (max-width: 1419px) { .content h1 { font-size: 4rem; } } @media only screen and (max-width: 767px) { .content h1 { font-size: 3rem; } } .content h2 { font-size: 4rem; line-height: 1; } @media only screen and (max-width: 1419px) { .content h2 { font-size: 2.5rem; line-height: 3rem; } } .content h3 { font-size: 3rem; line-height: 1; } @media only screen and (max-width: 767px) { .content h3 { font-size: 2.5rem; line-height: 3rem; } } .content h4 { font-size: 2rem; line-height: 2.5rem; } .content h5 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } .content p { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1419px) { .content p { font-size: 1rem; line-height: 1.5rem; } } .content p:not(:last-child) { margin-bottom: 1.5rem; } @media only screen and (max-width: 1419px) { .content p:not(:last-child) { margin-bottom: 1rem; } } .content ul li { position: relative; padding-left: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .content ul li { font-size: 1rem; line-height: 1.5rem; } } .content ul li:before, .content ul li:after { content: ""; position: absolute; border-radius: 50%; } .content ul li:before { top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #C5DC45; } @media only screen and (max-width: 1419px) { .content ul li:before { top: 0; } } .content ul li:after { top: 0.875rem; left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #C5DC45; } @media only screen and (max-width: 1419px) { .content ul li:after { top: 0.625rem; } } .content ul li:not(:last-child) { margin-bottom: 1.5rem; } .content ul:not(:nth-child(1)) { margin-top: 2.5rem; } @media only screen and (max-width: 1419px) { .content ul:not(:nth-child(1)) { margin-top: 1.5rem; } } .content ul:not(:last-child) { margin-bottom: 2.5rem; } @media only screen and (max-width: 1419px) { .content ul:not(:last-child) { -webkit-mask-box-image: 1.5rem; mask-border: 1.5rem; } } @media only screen and (max-width: 767px) { .content figure { margin: 0 -1.5rem; } } .content figure img { border-radius: 1.5rem; } @media only screen and (max-width: 767px) { .content figure img { min-height: 18.75rem; border-radius: 0; -o-object-fit: cover; object-fit: cover; } } .content figure:not(:nth-child(1)) { margin-top: 3rem; } @media only screen and (max-width: 767px) { .content figure:not(:nth-child(1)) { margin-top: 2rem; } } .content figure:not(:last-child) { margin-bottom: 3rem; } @media only screen and (max-width: 767px) { .content figure:not(:last-child) { margin-bottom: 2rem; } } .swiper .swiper-button-prev, .swiper .swiper-button-next { z-index: 3; width: 3.75rem; height: 3.75rem; border: 0.125rem solid transparent; background: #F7FBFA; border-radius: 50%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: all 0.2s; } .swiper .swiper-button-prev:after, .swiper .swiper-button-next:after { display: none; } .swiper .swiper-button-prev:before, .swiper .swiper-button-next:before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: all 0.2s; } .swiper .swiper-button-prev:hover, .swiper .swiper-button-next:hover { background: #202025; border-color: #202025; } .swiper .swiper-button-prev.swiper-button-disabled, .swiper .swiper-button-next.swiper-button-disabled { opacity: 0.5; } .swiper .swiper-button-prev:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M10.707 17.793a1 1 0 0 1-1.414 1.414L3.5 13.414a2 2 0 0 1 0-2.828l5.793-5.793a1 1 0 0 1 1.414 1.414L5.914 11H20a1 1 0 1 1 0 2H5.914l4.793 4.793z' fill='%23202025'/%3E%3C/svg%3E"); } .swiper .swiper-button-prev:hover:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M10.707 17.793a1 1 0 0 1-1.414 1.414L3.5 13.414a2 2 0 0 1 0-2.828l5.793-5.793a1 1 0 0 1 1.414 1.414L5.914 11H20a1 1 0 1 1 0 2H5.914l4.793 4.793z' fill='%23F7FBFA'/%3E%3C/svg%3E"); } .swiper .swiper-button-next:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 17.793a1 1 0 0 0 1.414 1.414l5.793-5.793a2 2 0 0 0 0-2.828l-5.793-5.793a1 1 0 0 0-1.414 1.414L18.086 11H4a1 1 0 1 0 0 2h14.086l-4.793 4.793z' fill='%23202025'/%3E%3C/svg%3E"); } .swiper .swiper-button-next:hover:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 17.793a1 1 0 0 0 1.414 1.414l5.793-5.793a2 2 0 0 0 0-2.828l-5.793-5.793a1 1 0 0 0-1.414 1.414L18.086 11H4a1 1 0 1 0 0 2h14.086l-4.793 4.793z' fill='%23F7FBFA'/%3E%3C/svg%3E"); } .swiper-collections { position: static; overflow: visible; } .swiper-collections .swiper-slide { width: 22.5rem; padding: 0 1rem; } @media only screen and (max-width: 767px) { .swiper-collections .swiper-slide { width: calc(100% - 2.5rem); } } .swiper-collections .swiper-button-prev, .swiper-collections .swiper-button-next { top: 5rem; left: auto; margin-top: 0; border-color: #E1E2E2; background: transparent; } @media only screen and (max-width: 1579px) { .swiper-collections .swiper-button-prev, .swiper-collections .swiper-button-next { top: 4rem; } } @media only screen and (max-width: 1259px) { .swiper-collections .swiper-button-prev, .swiper-collections .swiper-button-next { top: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-collections .swiper-button-prev, .swiper-collections .swiper-button-next { top: 3rem; } } @media only screen and (max-width: 767px) { .swiper-collections .swiper-button-prev, .swiper-collections .swiper-button-next { top: 0; } } .swiper-collections .swiper-button-prev { right: 9.5rem; } @media only screen and (max-width: 1579px) { .swiper-collections .swiper-button-prev { right: 8.5rem; } } @media only screen and (max-width: 1419px) { .swiper-collections .swiper-button-prev { right: 7rem; } } @media only screen and (max-width: 1023px) { .swiper-collections .swiper-button-prev { right: 6rem; } } @media only screen and (max-width: 767px) { .swiper-collections .swiper-button-prev { right: auto; left: 1.5rem; } } .swiper-collections .swiper-button-next { right: 5rem; } @media only screen and (max-width: 1579px) { .swiper-collections .swiper-button-next { right: 4rem; } } @media only screen and (max-width: 1419px) { .swiper-collections .swiper-button-next { right: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-collections .swiper-button-next { right: 1.5rem; } } @media only screen and (max-width: 767px) { .swiper-collections .swiper-button-next { right: auto; left: 6rem; } } .swiper-collections .swiper-scrollbar { opacity: 1 !important; border-radius: 0.25rem; } .swiper-collections .swiper-horizontal > .swiper-scrollbar, .swiper-collections .swiper-scrollbar.swiper-scrollbar-horizontal { left: 50%; bottom: 4rem; width: 16rem; height: 0.5rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #E1E2E2; } @media only screen and (max-width: 1259px) { .swiper-collections .swiper-horizontal > .swiper-scrollbar, .swiper-collections .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-collections .swiper-horizontal > .swiper-scrollbar, .swiper-collections .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 3rem; } } @media only screen and (max-width: 767px) { .swiper-collections .swiper-horizontal > .swiper-scrollbar, .swiper-collections .swiper-scrollbar.swiper-scrollbar-horizontal { left: 1.5rem; right: 1.5rem; width: auto; -webkit-transform: translateX(0); transform: translateX(0); } } .swiper-collections .swiper-scrollbar-drag { border: 0.125rem solid #E1E2E2; background: #202025; border-radius: 0.5rem; } .swiper-post { position: static; overflow: visible; } @media only screen and (max-width: 767px) { .swiper-post { overflow: hidden; } } .swiper-post .swiper-button-prev, .swiper-post .swiper-button-next { top: 0; left: auto; margin-top: 0; border-color: #E1E2E2; background: transparent; } .swiper-post .swiper-button-prev { right: 4.5rem; } @media only screen and (max-width: 1023px) { .swiper-post .swiper-button-prev { right: 6rem; } } @media only screen and (max-width: 767px) { .swiper-post .swiper-button-prev { right: auto; left: 1.5rem; } } .swiper-post .swiper-button-next { right: 0; } @media only screen and (max-width: 1023px) { .swiper-post .swiper-button-next { right: 1.5rem; } } @media only screen and (max-width: 767px) { .swiper-post .swiper-button-next { right: auto; left: 6rem; } } .swiper-discover .swiper-button-prev, .swiper-discover .swiper-button-next { top: 5rem; left: auto; margin-top: 0; background: #E1E2E2; } @media only screen and (max-width: 1579px) { .swiper-discover .swiper-button-prev, .swiper-discover .swiper-button-next { top: 4rem; } } @media only screen and (max-width: 1419px) { .swiper-discover .swiper-button-prev, .swiper-discover .swiper-button-next { top: 2.5rem; } } @media only screen and (max-width: 767px) { .swiper-discover .swiper-button-prev, .swiper-discover .swiper-button-next { top: 1.5rem; width: 3rem; height: 3rem; } } .swiper-discover .swiper-button-prev { right: 9.5rem; } @media only screen and (max-width: 1579px) { .swiper-discover .swiper-button-prev { right: 8.5rem; } } @media only screen and (max-width: 1419px) { .swiper-discover .swiper-button-prev { right: 7rem; } } @media only screen and (max-width: 1023px) { .swiper-discover .swiper-button-prev { right: 6rem; } } @media only screen and (max-width: 767px) { .swiper-discover .swiper-button-prev { right: 5.25rem; } } .swiper-discover .swiper-button-next { right: 5rem; } @media only screen and (max-width: 1579px) { .swiper-discover .swiper-button-next { right: 4rem; } } @media only screen and (max-width: 1419px) { .swiper-discover .swiper-button-next { right: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-discover .swiper-button-next { right: 1.5rem; } } .swiper-tokens { height: 50vw; } @media only screen and (max-width: 1023px) { .swiper-tokens { height: auto; } } .swiper-tokens .swiper-button-prev, .swiper-tokens .swiper-button-next { left: 5rem; right: auto; margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } @media only screen and (max-width: 1579px) { .swiper-tokens .swiper-button-prev, .swiper-tokens .swiper-button-next { left: 4rem; } } @media only screen and (max-width: 1419px) { .swiper-tokens .swiper-button-prev, .swiper-tokens .swiper-button-next { left: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-tokens .swiper-button-prev, .swiper-tokens .swiper-button-next { left: 1.5rem; width: 3rem; height: 3rem; -webkit-transform: rotate(0); transform: rotate(0); } } .swiper-tokens .swiper-button-prev { top: 5rem; } @media only screen and (max-width: 1579px) { .swiper-tokens .swiper-button-prev { top: 4rem; } } @media only screen and (max-width: 1259px) { .swiper-tokens .swiper-button-prev { top: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-tokens .swiper-button-prev { top: calc(100vw - 4.5rem); } } .swiper-tokens .swiper-button-next { top: 9.5rem; } @media only screen and (max-width: 1579px) { .swiper-tokens .swiper-button-next { top: 8.5rem; } } @media only screen and (max-width: 1259px) { .swiper-tokens .swiper-button-next { top: 7rem; } } @media only screen and (max-width: 1023px) { .swiper-tokens .swiper-button-next { top: calc(100vw - 4.5rem); left: 5.5rem; } } .swiper-tokens .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-tokens .swiper-vertical > .swiper-scrollbar { top: 5rem; right: auto; left: 1rem; bottom: 5rem; height: auto; width: 0.5rem; padding: 0.125rem; opacity: 1 !important; background: rgba(247, 251, 250, 0.5); border-radius: 0.25rem; } @media only screen and (max-width: 1579px) { .swiper-tokens .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-tokens .swiper-vertical > .swiper-scrollbar { top: 4rem; bottom: 4rem; } } @media only screen and (max-width: 1259px) { .swiper-tokens .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-tokens .swiper-vertical > .swiper-scrollbar { top: 2.5rem; left: 0.5rem; bottom: 2.5rem; } } @media only screen and (max-width: 1023px) { .swiper-tokens .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-tokens .swiper-vertical > .swiper-scrollbar { display: none; } } .swiper-tokens .swiper-scrollbar-drag { background: #555555; border-radius: 0.125rem; } .swiper-stories { overflow: visible; } .swiper-stories .swiper-wrapper { align-items: center; } .swiper-stories .swiper-slide.swiper-slide-active > div { height: 50rem; } @media only screen and (max-width: 1579px) { .swiper-stories .swiper-slide.swiper-slide-active > div { height: 38.4375rem; } } @media only screen and (max-width: 767px) { .swiper-stories .swiper-slide.swiper-slide-active > div { height: 100vh; } } .swiper-stories .swiper-slide.swiper-slide-active > div:after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 11.65%, rgba(0, 0, 0, 0) 53.02%, rgba(0, 0, 0, 0.5) 100%); } .swiper-stories .swiper-slide.swiper-slide-active .swiper-pagination-bullet { visibility: visible; opacity: 1; } .swiper-stories .swiper-button-prev { left: -0.5rem; } @media only screen and (max-width: 1023px) { .swiper-stories .swiper-button-prev { left: -1.75rem; } } @media only screen and (max-width: 767px) { .swiper-stories .swiper-button-prev { left: 1.5rem; } } .swiper-stories .swiper-button-next { right: -0.5rem; } @media only screen and (max-width: 1023px) { .swiper-stories .swiper-button-next { right: -1.75rem; } } @media only screen and (max-width: 767px) { .swiper-stories .swiper-button-next { right: 1.5rem; } } @media only screen and (max-width: 767px) { .swiper-stories .swiper-button-prev, .swiper-stories .swiper-button-next { width: 3rem; height: 3rem; } } .swiper-stories .swiper-button-prev:hover, .swiper-stories .swiper-button-next:hover { background: #555555; border-color: #555555; } .swiper-stories-inner { position: static; height: 100%; } .swiper-stories-inner.swiper-horizontal > .swiper-pagination-bullets, .swiper-stories-inner.swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-stories-inner.swiper-pagination-custom, .swiper-stories-inner .swiper-pagination-fraction { left: 0.75rem; right: 0.75rem; bottom: 0; z-index: 4; display: flex; width: auto; } .swiper-stories-inner.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-stories-inner.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.25rem; } .swiper-stories-inner .swiper-pagination-bullet { position: relative; flex: 1 1 auto; width: auto; height: 2.375rem; border-radius: 0; background: none; opacity: 0; visibility: hidden; transition: visibility 0.2s, opacity 0.2s; } .swiper-stories-inner .swiper-pagination-bullet:before { content: ""; position: absolute; top: 1rem; left: 0; right: 0; bottom: 1rem; background: #555555; border-radius: 0.375rem; transition: background 0.2s; } .swiper-stories-inner .swiper-pagination-bullet:hover:before { background: #686A6C; } .swiper-stories-inner .swiper-pagination-bullet.swiper-pagination-bullet-active::before { background: #C5DC45; } .page { display: flex; flex-direction: column; min-height: 100vh; } .page__container { flex-grow: 1; } .logo { display: block; flex-shrink: 0; width: 10.5rem; font-size: 0; } .logo svg { width: 100%; min-width: 10.5rem; height: auto; fill: #010101; } .header { position: relative; display: flex; padding: 0 2.5rem; z-index: 10; } @media only screen and (max-width: 1259px) { .header { padding: 0 1.5rem; } } @media only screen and (max-width: 1023px) { .header { height: 6rem; } .header:before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 0.0625rem; background: #E1E2E2; transition: background 0.2s; } } @media only screen and (max-width: 767px) { .header { height: 5.5rem; } } .header .logo { margin-right: auto; } @media only screen and (max-width: 767px) { .header .logo { width: 2.5rem; overflow: hidden; } } .header__col { display: flex; align-items: center; flex: 0 0 50%; height: 6rem; border-bottom: 0.0625rem solid #E1E2E2; transition: border-color 0.2s; } @media only screen and (max-width: 1023px) { .header__col { flex: auto; height: auto; border: none; } } .header__col:nth-child(1) { padding-right: 2rem; } @media only screen and (max-width: 1023px) { .header__col:nth-child(1) { margin-right: auto; padding-right: 0; } } .header__col:nth-child(2) { justify-content: flex-end; padding-left: 2rem; border-left: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 1023px) { .header__col:nth-child(2) { padding-left: 0; border: none; } } @media only screen and (max-width: 1023px) { .header__col > .search { display: none; } } .header__navigation { display: flex; } @media only screen and (max-width: 1579px) { .header__navigation { display: none; } } .header__navigation .header__link { margin-left: 3rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #202025; transition: color 0.2s; } .header__navigation .header__link:hover { color: #C5DC45; } .header__navigation .header__link:nth-child(1) { display: none; } @media only screen and (max-width: 1259px) { .header__navigation .header__link:nth-child(n+1) { display: none; } } .header__create, .header__notification, .header .account { margin-left: 3rem; } @media only screen and (max-width: 1023px) { .header__create, .header__notification, .header .account { margin-left: 2rem; } } @media only screen and (max-width: 767px) { .header__create, .header__notification, .header .account { margin-left: 1.5rem; } } @media only screen and (max-width: 1259px) { .header__create { margin-left: 0; } } @media only screen and (max-width: 767px) { .header__create { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 0; } .header__create .icon { margin: 0; } } .header__connect { display: none; margin-left: 3.75rem; } @media only screen and (max-width: 1419px) { .header__connect { margin-left: 3rem; } } .header__notification { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; background: #E1E2E2; transition: background 0.2s; } @media only screen and (max-width: 767px) { .header__notification { width: 2.5rem; height: 2.5rem; } } .header__notification .icon { transition: fill 0.2s; } .header__notification:hover { background: #202025; } .header__notification:hover .icon { fill: #F7FBFA; } .header__notification.active { position: relative; } .header__notification.active:before { content: ""; position: absolute; top: 0; right: 0; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #FF5C17; } @media only screen and (max-width: 767px) { .header__notification.active:before { top: 0.0625rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; } } .header__discover { position: relative; } @media only screen and (max-width: 1419px) { .header__discover { display: none; } } .header__discover.active .header__head { color: #C5DC45; } .header__discover.active .header__head svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); fill: #C5DC45; } .header__discover.active .header__body { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .header__discover .header__head { display: flex; align-items: center; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #202025; transition: color 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .header__discover .header__head .icon { margin-left: 0.75rem; fill: #202025; transition: all 0.2s; } .header__discover .header__head:hover { color: #C5DC45; } .header__discover .header__head:hover .icon { fill: #C5DC45; } .header__discover .header__body { position: absolute; top: 100%; left: -2rem; width: 20.375rem; padding-top: 1rem; -webkit-transform: translateY(1rem); transform: translateY(1rem); visibility: hidden; opacity: 0; transition: all 0.2s; } .header__list { border: 0.0625rem solid #E1E2E2; overflow: hidden; border-radius: 1.25rem; background: #F7FBFA; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .header__discover .header__link { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; transition: color 0.2s; } .header__discover .header__link .icon { margin-left: 1.5rem; fill: #686A6C; transition: fill 0.2s; } .header__discover .header__link:hover { color: #C5DC45; } .header__discover .header__link:hover .icon { fill: #C5DC45; } .header__discover .header__link:not(:last-child) { border-bottom: 0.0625rem solid #E1E2E2; } .header__burger { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin: 0 -0.5rem 0 2.5rem; padding: 0.5rem; } @media only screen and (max-width: 1023px) { .header__burger { margin-left: 2rem; } } @media only screen and (max-width: 767px) { .header__burger { margin-left: 1.5rem; } } .header__burger:before, .header__burger:after { content: ""; height: 0.1875rem; margin: 0.1875rem auto; background: #202025; border-radius: 0.125rem; transition: width 0.2s, background 0.2s; } .header__burger:before { width: 1.5rem; } .header__burger:after { width: 1.125rem; margin-left: 0; } .header__burger:hover:after { width: 1.5rem; } /* .header_light:before, .header_open:before { background: rgba(225, 226, 226, 0.5); } .header_light .logo svg, .header_open .logo svg { fill: #F7FBFA; } .header_light .header__col, .header_open .header__col { border-color: rgba(225, 226, 226, 0.5); } .header_light .header__button, .header_open .header__button { border-color: #E1E2E2; color: #F7FBFA; } .header_light .header__button .icon, .header_open .header__button .icon { fill: #F7FBFA; } .header_light .header__button:hover, .header_open .header__button:hover { background: #F7FBFA; border-color: #F7FBFA; color: #202025; } .header_light .header__button:hover .icon, .header_open .header__button:hover .icon { fill: #202025; } .header_light .header__notification, .header_open .header__notification { background: #F7FBFA; } .header_light .header__notification:hover, .header_open .header__notification:hover { background: #F7FBFA; } .header_light .header__notification:hover svg, .header_open .header__notification:hover svg { fill: #C5DC45; } .header_light .header__navigation .header__link, .header_open .header__navigation .header__link { color: #E1E2E2; } .header_light .header__navigation .header__link:hover, .header_open .header__navigation .header__link:hover { color: #F7FBFA; } .header_light .header__burger:before, .header_light .header__burger:after, .header_open .header__burger:before, .header_open .header__burger:after { background: #E1E2E2; } .header_light .header__discover .header__head, .header_open .header__discover .header__head { color: #E1E2E2; } .header_light .header__discover .header__head .icon, .header_open .header__discover .header__head .icon { fill: #E1E2E2; } .header_light .header__discover .header__head:hover, .header_open .header__discover .header__head:hover { color: #F7FBFA; } .header_light .header__discover .header__head:hover .icon, .header_open .header__discover .header__head:hover .icon { fill: #F7FBFA; } .header_light .header__discover.active .head, .header_open .header__discover.active .head { color: #F7FBFA; } .header_light .header__discover.active .head .icon, .header_open .header__discover.active .head .icon { fill: #F7FBFA; } @media only screen and (max-width: 767px) { .header_light .header__create, .header_open .header__create { border-color: rgba(225, 226, 226, 0.5); } } .header_light .search__toggle .icon, .header_open .search__toggle .icon { fill: #F1F4F4; } .header_light .search__toggle:hover .icon, .header_open .search__toggle:hover .icon { fill: #F7FBFA; } .header_light .search__input, .header_open .search__input { color: #F7FBFA; } .header_light .search__input:focus, .header_open .search__input:focus { border-color: #F7FBFA; } .header_light .search__clear, .header_open .search__clear { color: #E1E2E2; } .header_light .search__clear:hover, .header_open .search__clear:hover { color: #F7FBFA; } .header_open .header__col { border-color: rgba(85, 85, 85, 0.5); } .header_open:before { background: rgba(85, 85, 85, 0.5); } @media only screen and (max-width: 767px) { .header_open:before { background: transparent; } } */ @media only screen and (max-width: 767px) { .header_noRegistration .logo { width: 10.5rem; } } .header_noRegistration .header__discover { display: none; } /* .header_noRegistration .account, .header_noRegistration .header__notification, .header_noRegistration .header__create { display: none; } */ @media only screen and (max-width: 1579px) { .header_noRegistration .header__navigation { display: flex; } } @media only screen and (max-width: 1023px) { .header_noRegistration .header__navigation { display: none; } } .header_noRegistration .header__navigation .header__link { margin-left: 1.75rem; } @media only screen and (max-width: 1419px) { .header_noRegistration .header__navigation .header__link { margin-left: 1rem; } } .header_noRegistration .header__navigation .header__link:nth-child(1) { display: block; } .header_noRegistration .header__connect { display: inline-flex; } @media only screen and (max-width: 1023px) { /* .header_noRegistration .header__connect { display: none; } */ } .header_noRegistration .header__burger { margin-left: 3.25rem; } @media only screen and (max-width: 1419px) { .header_noRegistration .header__burger { margin-left: 2.25rem; } } .header_empty { display: flex; align-items: center; height: 6rem; box-shadow: 0 0.75rem 2.5rem -1rem rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 1023px) { .header_empty:before { display: none; } } @media only screen and (max-width: 767px) { .header_empty { height: 5.5rem; } } @media only screen and (max-width: 767px) { .header_empty .account__head { width: 3rem; height: 3rem; } } .header_empty .account__body { right: 0; } .header_noShadow { box-shadow: none; } .popup { display: flex; width: 100%; margin: auto; min-height: 100vh; background: #010101; z-index: 2; } @media only screen and (max-width: 767px) { .popup { min-height: calc(var(--vh, 1vh) * 100); } } .popup .mfp-close { position: absolute; top: 2rem; right: 2rem; z-index: 10; width: 3.75rem; height: 3.75rem; border: 0.125rem solid #555555; background: transparent; border-radius: 50%; line-height: normal; opacity: 1; font-size: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: all 0.2s; } @media only screen and (max-width: 1419px) { .popup .mfp-close { top: 1rem; right: 1rem; width: 3rem; height: 3rem; } } .popup .mfp-close svg { pointer-events: none; fill: #F7FBFA; } .popup .mfp-close:hover { background: #202025; border-color: #202025; } .popup_menu .mfp-close { top: 1.125rem; right: 1.375rem; border: none; } @media only screen and (max-width: 1419px) { .popup_menu .mfp-close { top: 1.5rem; right: 1.8125rem; } } @media only screen and (max-width: 1259px) { .popup_menu .mfp-close { right: 0.75rem; } } @media only screen and (max-width: 767px) { .popup_menu .mfp-close { top: 1.25rem; right: 0.6875rem; } } .popup_menu .mfp-close svg { width: 2rem; height: 2rem; } @media only screen and (max-width: 1419px) { .popup_menu .mfp-close svg { width: 1.5rem; height: 1.5rem; } } @media only screen and (max-width: 1023px) { .popup_menu .mfp-close:hover { background: none; } } .popup_connect .mfp-close { border-color: #202025; } @media only screen and (max-width: 1023px) { .popup_connect .mfp-close svg { fill: #202025; } } .popup_add-story { width: 100%; max-width: 27.375rem; min-height: auto !important; margin: auto; background: transparent; } @media only screen and (max-width: 1579px) { .popup_add-story { width: 23.4375rem; } } @media only screen and (max-width: 767px) { .popup_add-story { width: 100%; } } .popup_story { background: none; } .popup_story .mfp-close { background: #202025; } @media only screen and (max-width: 767px) { .popup_story .mfp-close { top: 1.5rem; background: none; border-color: rgba(247, 251, 250, 0.25); } } .mfp-container { padding: 0; } /* .mfp-content { position: static; } */ @media (max-width: 900px) { .mfp-container { padding: 0; } } .mfp-bg { background: none; opacity: 1; } .mfp-bg:before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(32, 32, 32, 0.95); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); } .mfp-zoom-in .popup, .mfp-zoom-in .mfp-iframe-scaler { opacity: 0; transition: all 0.5s ease-in-out; } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.5s ease-out; } .mfp-zoom-in.mfp-ready .popup, .mfp-zoom-in.mfp-ready .mfp-iframe-scaler { opacity: 1; } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 1; } .mfp-zoom-in.mfp-removing .popup, .mfp-zoom-in.mfp-removing .mfp-iframe-scaler { opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } .menu { display: flex; flex-grow: 1; } .menu__col { display: flex; flex-direction: column; flex: 0 0 50%; width: 50%; padding: 5rem; } @media only screen and (max-width: 1579px) { .menu__col { padding: 4rem; } } @media only screen and (max-width: 1419px) { .menu__col { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .menu__col { flex: 0 0 100%; width: 100%; padding-top: 5rem; } } @media only screen and (max-width: 767px) { .menu__col { padding: 3.5rem 1.5rem 1.5rem; } } .menu__col:nth-child(1) { justify-content: flex-end; background: #B9A9FB; } @media only screen and (max-width: 1023px) { .menu__col:nth-child(1) { display: none; } } .menu .search { display: none; } @media only screen and (max-width: 1023px) { .menu .search { display: block; } } .menu__title { margin-bottom: 2.5rem; } @media only screen and (max-width: 1579px) { .menu__title { font-size: 4rem; } } @media only screen and (max-width: 1419px) { .menu__title { max-width: 25rem; font-size: 3rem; } } .menu__socials { display: flex; margin: 0 -0.75rem; } @media only screen and (max-width: 1259px) { .menu__socials { margin: 0 -0.375rem; } } .menu__social { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; height: 3.5rem; margin: 0 0.75rem; border-radius: 0.75rem; background: #F7FBFA; transition: background 0.2s; } @media only screen and (max-width: 1259px) { .menu__social { margin: 0 0.375rem; border-radius: 0.5rem; } } .menu__social .icon { fill: #010101; transition: fill 0.2s; } .menu__social:hover { background: #010101; } .menu__social:hover .icon { fill: #F7FBFA; } .menu__list { margin: auto -5rem; } @media only screen and (max-width: 1579px) { .menu__list { margin: auto -4rem; } } @media only screen and (max-width: 1419px) { .menu__list { margin: auto -2.5rem; } } @media only screen and (max-width: 767px) { .menu__list { margin: auto -1.5rem; } } .menu .link { padding: 2vh 5rem; border-bottom: 0.0625rem solid #202025; } @media only screen and (max-width: 1579px) { .menu .link { padding: 2vh 4rem; font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 1419px) { .menu .link { padding: 2vh 2.5rem; font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 1259px) { .menu .link { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 1023px) { .menu .link { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .menu .link { padding: 2vh 1.5rem; font-size: 1.5rem; line-height: 2rem; } } .menu__info { margin: 2rem 0; color: #A6AEAD; } @media only screen and (max-width: 1419px) { .menu__info { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 767px) { .menu__info { margin: 2.5rem 0 0.75rem; font-size: 1rem; line-height: 1.5rem; } } .menu__btns { display: flex; } @media only screen and (max-width: 1259px) { .menu__btns { margin: 0 -0.625rem; } } @media only screen and (max-width: 767px) { .menu__btns { display: block; margin: 0; } } @media only screen and (max-width: 1259px) { .menu__button { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 0 0.625rem; padding: 0 1rem; } } @media only screen and (max-width: 767px) { .menu__button { width: 100%; margin: 0; } } .menu__button:not(:last-child) { margin-right: 1.25rem; } @media only screen and (max-width: 1259px) { .menu__button:not(:last-child) { margin-right: 0.625rem; } } @media only screen and (max-width: 767px) { .menu__button:not(:last-child) { margin: 0 0 1.25rem; } } .link { display: flex; justify-content: space-between; align-items: center; } .link .icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-left: 1.5rem; fill: #555555; transition: fill 0.2s; } @media only screen and (max-width: 1419px) { .link .icon { width: 2rem; height: 2rem; } } @media only screen and (max-width: 1259px) { .link .icon { width: 1.5rem; height: 1.5rem; } } .link:hover .link__hover, .link.active .link__hover { opacity: 1; } .link.active .icon { fill: #F7FBFA; } .link__title { position: relative; padding: 0.5rem 0; color: #F7FBFA; } .link__hover { position: absolute; top: 0; left: 0; padding: 0.5rem 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); opacity: 0; transition: opacity 0.2s; } .search { position: relative; } @media only screen and (max-width: 1023px) { .search { margin: 0 -2.5rem; } } @media only screen and (max-width: 767px) { .search { margin: 0 -1.5rem; } } .search__field { position: absolute; top: 50%; right: 0; width: 26.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); visibility: hidden; opacity: 0; transition: visibilty 0.2s, opacity 0.2s; } @media only screen and (max-width: 1419px) { .search__field { width: 21.875rem; } } @media only screen and (max-width: 1259px) { .search__field { width: 15.875rem; } } @media only screen and (max-width: 1023px) { .search__field { position: relative; top: auto; right: auto; width: 100%; -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } } .search__input { width: 100%; height: 3.25rem; padding: 0 6.125rem 0 0.875rem; border: 0.125rem solid #E1E2E2; border-radius: 0.75rem; background: transparent; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: border-color 0.2s; } @media only screen and (max-width: 1023px) { .search__input { height: 5rem; padding: 0 9.375rem 0 2.5rem; border-width: 0 0 0.0625rem; border-color: #202025; border-radius: 0; font-size: 1.5rem; line-height: 2rem; color: #F7FBFA; } } @media only screen and (max-width: 767px) { .search__input { padding: 0 7.5rem 0 1.5rem; font-size: 1.25rem; } } .search__input::-webkit-input-placeholder { color: #A6AEAD; } .search__input::-moz-placeholder { color: #A6AEAD; } .search__input:-ms-input-placeholder { color: #A6AEAD; } .search__input::-ms-input-placeholder { color: #A6AEAD; } .search__input::placeholder { color: #A6AEAD; } .search__input:focus-visible { border-color: #C5DC45; } @media only screen and (max-width: 1023px) { .search__input:focus-visible { border-color: #202025; } } .search__toggle, .search__clear { position: absolute; z-index: 1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .search__toggle { right: 0; flex-shrink: 0; width: 2.5rem; height: 2.5rem; } @media only screen and (max-width: 1023px) { .search__toggle { width: 6rem; height: 5rem; pointer-events: none; } } @media only screen and (max-width: 767px) { .search__toggle { width: 4.25rem; } } .search__toggle .icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: #A6AEAD; transition: all 0.2s; } .search__toggle .icon:nth-child(2) { opacity: 0; } .search__toggle:hover .icon { fill: #010101; } .search__clear { right: 2.5rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #A6AEAD; visibility: hidden; opacity: 0; transition: all 0.2s; } @media only screen and (max-width: 1023px) { .search__clear { right: 5.25rem; } } @media only screen and (max-width: 767px) { .search__clear { right: 3.5rem; } } .search__clear:hover { color: #C5DC45; } .search__result, .ui-autocomplete { position: absolute; top: calc(100% + 2.375rem); right: 0; width: 26.5rem; max-height: calc(100vh - 6.375rem); padding: 2.5rem 0; background: #F7FBFA; border-radius: 0.75rem; border: 0.0625rem solid #E1E2E2; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); /* -webkit-transform: translateY(1rem); transform: translateY(1rem) */; /* visibility: hidden; opacity: 0; */ /* transition: all 0.3s; -webkit-overflow-scrolling: touch; */ overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .search__result::-webkit-scrollbar { display: none; width: 0; height: 0; } @media only screen and (max-width: 1023px) { .search__result { top: calc(100% + 0.25rem); left: 1.5rem; right: 1.5rem; z-index: 5; width: auto; max-height: calc(100vh - 11.625rem); -webkit-transform: translateY(0); transform: translateY(0); border: 0.0625rem solid rgba(85, 85, 85, 0.5); background: #202025; } } @media only screen and (max-width: 767px) { .search__result { left: 1rem; right: 1rem; max-height: calc(100vh - 9.75rem); } } .search__group:not(:last-child) { margin-bottom: 2rem; } .search__category { padding: 0 1.5rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #A6AEAD; } .search__item { display: flex; align-items: center; padding: 1.5rem; border-bottom: 0.0625rem solid #E1E2E2; color: #202025; transition: color 0.2s; } @media only screen and (max-width: 1023px) { .search__item { border-color: rgba(85, 85, 85, 0.5); color: #F7FBFA; } } .search__item:hover { color: #C5DC45; } .search__preview { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; margin-right: 1rem; } .search__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } .search__title { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .search__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1023px) { .search__content { color: #686A6C; } } .search__content span { color: #686A6C; } @media only screen and (max-width: 1023px) { .search__content span { color: #686A6C; } } .search.active .search__field { visibility: visible; opacity: 1; } .search.active .search__toggle .icon:nth-child(1) { opacity: 0; } .search.active .search__toggle .icon:nth-child(2) { opacity: 1; } .search.visible .search__clear { visibility: visible; opacity: 1; } .search.visible .search__result { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .account { position: relative; } @media only screen and (max-width: 767px) { .account { position: static; } } .account__head { position: relative; width: 3rem; height: 3rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (max-width: 767px) { .account__head { width: 2.5rem; height: 2.5rem; } } .account__head img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .account__head:before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 0.125rem rgba(247, 251, 250, 0.5); transition: box-shadow 0.2s; } .account__body { position: absolute; top: calc(100% + 2.5rem); right: -4.375rem; width: 47.5rem; max-height: calc(100vh - 8rem); padding: 5.5vh 2.5rem 2.4vh; background: #010101; border-radius: 2rem; overflow: auto; -webkit-transform: translateY(1.25rem); transform: translateY(1.25rem); visibility: hidden; opacity: 0; transition: all 0.2s; } @media only screen and (max-height: 900px) { .account__body { width: 40rem; padding: 2.5rem 2.5rem 1.25rem; } } @media only screen and (max-width: 1579px) { .account__body { width: 40rem; padding: 2.5rem 2.5rem 1.25rem; } } @media only screen and (max-width: 1419px) { .account__body { width: 35rem; } } @media only screen and (max-width: 1259px) { .account__body { width: 30rem; } } @media only screen and (max-width: 767px) { .account__body { top: 100%; left: 1rem; right: 1rem; z-index: 12; width: auto; max-height: calc(var(--vh, 1vh) * 100 - 6.5rem); padding: 1.5rem 1.5rem 0.75rem; } } .account__close { position: absolute; top: 1.5rem; right: 1.5rem; border-color: #555555; } @media only screen and (max-width: 1259px) { .account__close { top: 1rem; right: 1rem; } } @media only screen and (max-width: 767px) { .account__close { top: 0.25rem; width: 2.5rem; height: 2.5rem; border: none; } } .account__close .icon { fill: #F7FBFA; } .account__close:hover { background: #202025; border-color: #202025; } .account__user { display: flex; align-items: center; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 0.0625rem solid #202025; } @media only screen and (max-height: 900px) { .account__user { margin-bottom: 1.5rem; padding-bottom: 1.5rem; } } @media only screen and (max-width: 1579px) { .account__user { margin-bottom: 1.5rem; padding-bottom: 1.5rem; } } .account__avatar { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; margin-right: 2rem; } .ranking__wrap .account__avatar { position: relative; flex-shrink: 0; width: 10rem; height: 10rem; margin-right: 2rem; } .ranking__wrap .account__man { color: #202025; } @media only screen and (max-width: 1259px) { .account__avatar { margin-right: 1.5rem; } } @media only screen and (max-width: 767px) { .account__avatar { width: 4.5rem; height: 4.5rem; margin-right: 1rem; } } .account__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .account__man { color: #F7FBFA; } @media only screen and (max-width: 1579px) { .account__man { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .account__man { font-size: 1.5rem; line-height: 2rem; } } .account__login { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .account__login { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .account__top { display: flex; align-items: center; margin-bottom: 1.5rem; } @media only screen and (max-width: 1579px) { .account__top { margin-bottom: 0.5rem; } } .account__title { margin-right: auto; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .account__title { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .account__actions { display: flex; flex-wrap: wrap; margin-top: -0.5rem; } .account__action { display: flex; align-items: center; margin: 0.5rem 0 0 2rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 1419px) { .account__action { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .account__action .icon { margin-right: 0.75rem; fill: #686A6C; transition: fill 0.2s; } @media only screen and (max-width: 1259px) { .account__action:nth-child(1) { display: none; } } .account__action:hover .icon { fill: #F7FBFA; } .account__description { margin-bottom: 1.5rem; padding: 2rem 2.5rem; border-radius: 1.5rem; background: rgba(32, 32, 37, 0.75); } @media only screen and (max-width: 1579px) { .account__description { padding: 1rem; } } .account__code { display: inline-flex; align-items: center; margin-bottom: 0.75rem; padding: 0.5rem; background: rgba(85, 85, 85, 0.5); border-radius: 0.75rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 1579px) { .account__code { font-size: 0.875rem; line-height: 1.25rem; } } .account__code:after { content: ""; display: block; width: 1rem; height: 1rem; margin-left: 0.75rem; border-radius: 50%; background: #F3F380; } .account__line { display: flex; justify-content: space-between; } @media only screen and (max-height: 900px) { .account__line { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 1579px) { .account__line { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 1259px) { .account__line { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .account__line { font-size: 1.5rem; line-height: 2rem; } } .account__crypto { color: #E1E2E2; } .account__price { color: #686A6C; } .account .link { padding: 1.8vh 2.5rem; } @media only screen and (max-height: 900px) { .account .link { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 1579px) { .account .link { padding: 1rem; font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 1259px) { .account .link { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 767px) { .account .link { padding: 0.75rem 1rem; } } .account .link:not(:last-child) { border-bottom: 0.0625rem solid #202025; } .account.active .account__head:before { box-shadow: inset 0 0 0 0.25rem #F7FBFA; } .account.active .account__body { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .overlay { position: fixed; top: 0; left: 0; z-index: 8; width: 100%; height: 100%; background: rgba(32, 32, 32, 0.95); -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); visibility: hidden; opacity: 0; transition: all 0.2s; } @media only screen and (max-width: 767px) { .overlay { z-index: 8; } } .overlay.visible { visibility: visible; opacity: 1; } .arrow { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 12rem; height: 4.5rem; border-radius: 2.25rem; background: #6DD3C2; } @media only screen and (max-width: 1419px) { .arrow { width: 7.375rem; height: 2.75rem; } .arrow svg { width: 4.875rem; } } .main__row { display: flex; padding: 3rem 2.5rem; } @media only screen and (max-width: 1579px) { .main__row { padding: 1.5rem 0; } } @media only screen and (max-width: 1419px) { .main__row { padding: 2rem 0.5rem; } } @media only screen and (max-width: 1259px) { .main__row { padding: 1rem 0.5rem; } } @media only screen and (max-width: 1023px) { .main__row { display: block; padding: 3rem 1.5rem; } } .main__col { flex: 0 0 calc(50% - 5rem); width: calc(50% - 5rem); margin: 0 2.5rem; } @media only screen and (max-width: 1579px) { .main__col { flex: 0 0 50%; width: 50%; margin: 0; padding: 0 4rem; } } @media only screen and (max-width: 1419px) { .main__col { padding: 0 2rem; } } @media only screen and (max-width: 1023px) { .main__col { width: 100%; padding: 0; } } .main__col:nth-child(1) { display: flex; justify-content: space-between; } @media only screen and (max-width: 767px) { .main__col:nth-child(1) { display: block; } } .main__col:nth-child(2) { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 1.5rem 0 0.5rem; } @media only screen and (max-width: 1579px) { .main__col:nth-child(2) { padding: 0.5rem 4rem; } } @media only screen and (max-width: 1419px) { .main__col:nth-child(2) { padding: 0.5rem 2rem; } } @media only screen and (max-width: 1023px) { .main__col:nth-child(2) { margin-top: 2rem; padding: 0; } } .main .arrow { margin: 1.125rem 0 0 1.125rem; } @media only screen and (max-width: 1419px) { .main .arrow { margin-top: 0.75rem; } } @media only screen and (max-width: 767px) { .main .arrow { margin: 1.25rem 0 0; } } .main__content { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1419px) { .main__content { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 1023px) { .main__search { margin-top: 1.5rem; } } .main__wrapper { position: relative; z-index: 2; } .main__item { display: flex; box-sizing: border-box; } @media only screen and (max-width: 1023px) { .main__item { display: block; } } .main__preview, .main__wrap { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .main__preview, .main__wrap { width: 100%; } } .main__preview { position: relative; font-size: 0; } .main__preview:before { content: ""; display: block; padding-bottom: 100%; } .main__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .main__wrap { display: flex; flex-direction: column; padding: 5rem; background: #F3F380; } @media only screen and (max-width: 1579px) { .main__wrap { padding: 5rem 4rem; } } @media only screen and (max-width: 1419px) { .main__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .main__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .main__wrap { padding: 3rem 1.5rem; } } .main__details { display: flex; margin-bottom: auto; box-shadow: 0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.12); border-radius: 0.75rem; background: #F7FBFA; } @media only screen and (max-width: 1023px) { .main__details { margin-bottom: 3rem; } } .main__box { flex: 0 0 33.333%; width: 33.333%; padding: 1rem 0 1rem 1.5rem; } @media only screen and (max-width: 1259px) { .main__box { flex: 0 0 50%; width: 50%; } } @media only screen and (max-width: 1023px) { .main__box { flex: 0 0 33.333%; width: 33.333%; } } @media only screen and (max-width: 767px) { .main__box { flex: 0 0 50%; width: 50%; } } @media only screen and (max-width: 1419px) { .main__box:nth-child(3) { display: none; } } @media only screen and (max-width: 1023px) { .main__box:nth-child(3) { display: block; } } @media only screen and (max-width: 767px) { .main__box:nth-child(3) { display: none; } } .main__category { margin-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .main__category { font-size: 0.875rem; line-height: 1.25rem; } } .main__value { position: relative; padding-left: 2.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1259px) { .main__value { font-size: 1.25rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .main__value { font-size: 1rem; line-height: 1.5rem; } } .main__value:before, .main__value:after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; } .main__value:before { left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #A6AEAD; } .main__value:after { left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #A6AEAD; } .main__subtitle { margin-bottom: 2.5rem; } @media only screen and (max-width: 1419px) { .main__subtitle { font-size: 4rem; } } @media only screen and (max-width: 1259px) { .main__subtitle { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .main__subtitle { font-size: 3rem; } } .main__btns { display: flex; margin: 0 -0.75rem; } @media only screen and (max-width: 767px) { .main__btns { display: block; margin: 0; } } .main__button { flex: 0 0 calc(50% - 1.5rem); width: calc(50% - 1.5rem); height: 4rem; margin: 0 0.75rem; } @media only screen and (max-width: 767px) { .main__button { width: 100%; margin: 0; } .main__button:not(:last-child) { margin-bottom: 1rem; } } .hot__row { display: flex; } @media only screen and (max-width: 1023px) { .hot__row { display: block; } } .hot__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .hot__col { width: 100%; } } .hot__col:nth-child(2) { background: #F1F4F4; } .hot__details { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; max-height: 100vh; height: 100%; padding: 8rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .hot__details { padding: 4rem 4rem 5rem; } } @media only screen and (max-width: 1419px) { .hot__details { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .hot__details { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .hot__details { padding: 3rem 1.5rem; } } .hot__line { display: flex; justify-content: space-between; } @media only screen and (max-width: 767px) { .hot__line { display: block; } } .hot__link { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 5rem; height: 5rem; margin-left: 1.5rem; border: 0.0625rem solid #F1F4F4; background: #F7FBFA; border-radius: 50%; box-shadow: 0 1.25rem 1rem -0.375rem rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 1579px) { .hot__link { margin-left: 2rem; } } @media only screen and (max-width: 767px) { .hot__link { margin: 1.5rem 0 0; } } .hot__link .icon { fill: #010101; transition: fill 0.2s; } .hot__link:hover .icon { fill: #C5DC45; } .hot__content { max-width: 31.5rem; margin-top: 5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1579px) { .hot__content { max-width: 100%; } } @media only screen and (max-width: 1419px) { .hot__content { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 1023px) { .hot__content { margin-top: 2.5rem; } } .hot__artists { display: flex; flex-wrap: wrap; margin-top: -0.0625rem; border-bottom: 0.0625rem solid #E1E2E2; } .hot__artist { position: relative; flex: 0 0 50%; width: 50%; padding: 5.875rem 2rem; border-width: 0.0625rem 0.0625rem 0 0; border-style: solid; border-color: #E1E2E2; text-align: center; transition: all 0.2s; } @media only screen and (max-width: 1419px) { .hot__artist { padding: 3.5rem 1.25rem; } } @media only screen and (max-width: 1259px) { .hot__artist { padding: 2.75rem 0.75rem; } } .hot__artist:hover { box-shadow: 0 3.875rem 3rem -1rem rgba(0, 0, 0, 0.1); background: #F7FBFA; } .hot__artist:hover .hot__avatar:before { -webkit-transform: scale(1); transform: scale(1); } @media only screen and (max-width: 1259px) { .hot__artist:hover .hot__avatar:before { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hot__artist:hover .hot__number { box-shadow: none; } .hot__artist:hover .hot__inner { background: #202025; color: #F7FBFA; } .hot__number { position: absolute; top: 1.5rem; right: 1.5rem; -webkit-filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.06)); filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.06)); transition: all 0.2s; } @media only screen and (max-width: 1259px) { .hot__number { top: 0.5rem; right: 0.5rem; } } .hot__inner { display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; -webkit-clip-path: url(#polygonNumber); clip-path: url(#polygonNumber); background: #F7FBFA; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: all 0.2s; } .hot__avatar { position: relative; flex-shrink: 0; width: 7.5rem; height: 7.5rem; margin: 0 auto 2rem; } @media only screen and (max-width: 1259px) { .hot__avatar { width: 6.5rem; height: 6.5rem; margin-bottom: 1rem; } } .hot__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .hot__avatar:before { content: ""; position: absolute; top: -1.25rem; left: -1.25rem; right: -1.25rem; bottom: -1.25rem; border: 0.0625rem solid #E1E2E2; border-radius: 50%; pointer-events: none; -webkit-transform: scale(0.7); transform: scale(0.7); transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } @media only screen and (max-width: 1023px) { .hot__avatar:before { display: none; } } .hot__login { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1259px) { .hot__login { font-size: 1.25rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .hot__login { font-size: 1rem; line-height: 1.5rem; } } .hot__total { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .hot__total { font-size: 0.875rem; line-height: 1.25rem; } } .hot__total span { color: #202025; } .hot__btns { padding: 3.75rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .hot__btns { padding: 3.75rem 2.5rem 5rem; } } @media only screen and (max-width: 1419px) { .hot__btns { padding: 3rem 2.5rem 4rem; } } @media only screen and (max-width: 1259px) { .hot__btns { padding: 2rem 2rem 2.5rem; } } @media only screen and (max-width: 1023px) { .hot__btns { padding: 2rem 1.5rem 2.5rem; } } @media only screen and (max-width: 767px) { .hot__btns { text-align: center; } } @media only screen and (max-width: 767px) { .hot__btns .hot__button { width: auto; } } .dream { position: relative; display: flex; align-items: center; min-height: 62.5rem; padding: 5rem; overflow: hidden; background: #010101; color: #F7FBFA; } @media only screen and (max-width: 1579px) { .dream { padding: 4rem; } } @media only screen and (max-width: 1419px) { .dream { min-height: 48rem; padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .dream { min-height: 36.5rem; padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .dream { padding: 3rem 1.5rem; } } @media only screen and (max-width: 767px) { .dream { display: block; padding: 3rem 1.5rem; } } .dream__wrap { position: relative; z-index: 3; max-width: 38.5rem; margin-right: auto; padding-right: 2.5rem; } @media only screen and (max-width: 1259px) { .dream__wrap { max-width: 31.25rem; padding-right: 0; } } .dream__details { display: flex; align-items: center; margin-bottom: 1.5rem; } .dream__item { display: flex; align-items: center; padding: 0.75rem; background: #202025; border-radius: 0.75rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } .dream__item:not(:last-child) { margin-right: 1rem; } @media only screen and (max-width: 767px) { .dream__item:nth-child(n+2) { display: none; } } .dream__avatar, .dream__image { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .dream__avatar img, .dream__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .dream__avatar img { border-radius: 50%; } .dream__image img { border-radius: 0.5rem; } .dream__title { margin-bottom: 7rem; } @media only screen and (max-width: 1419px) { .dream__title { margin-bottom: 5rem; } } @media only screen and (max-width: 767px) { .dream__title { margin-bottom: 1.5rem; } } .dream__line { display: flex; align-items: center; } @media only screen and (max-width: 767px) { .dream__line { display: block; } } .dream__text { margin-bottom: 0.75rem; color: #A6AEAD; } @media only screen and (max-width: 1419px) { .dream__text { margin-bottom: 0.5rem; } } .dream__text, .dream__price { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #A6AEAD; } @media only screen and (max-width: 1419px) { .dream__crypto { font-size: 2.5rem; line-height: 3rem; } } .dream__button { min-width: 14rem; margin: 0.5rem 0 0 3.75rem; } @media only screen and (max-width: 1419px) { .dream__button { min-width: 10.5rem; height: 3.75rem; margin: 0 0 0 2.5rem; } } @media only screen and (max-width: 1259px) { .dream__button { margin-left: 1.5rem; } } @media only screen and (max-width: 767px) { .dream__button { width: 100%; margin: 1.5rem 0 0; } } .dream__preview { position: absolute; top: 50%; right: calc(50% - 45rem); flex-shrink: 0; width: 49.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; } @media only screen and (max-width: 1579px) { .dream__preview { right: calc(50% - 41.125rem); } } @media only screen and (max-width: 1419px) { .dream__preview { right: calc(50% - 37.5rem); width: 41.25rem; } } @media only screen and (max-width: 1259px) { .dream__preview { right: calc(50% - 31.875rem); width: 32.5rem; } } @media only screen and (max-width: 1023px) { .dream__preview { right: calc(50% - 35rem); } } @media only screen and (max-width: 767px) { .dream__preview { position: static; width: auto; margin: 0.5rem -1.75rem -1.625rem -1.5rem; -webkit-transform: translateY(0); transform: translateY(0); } } .dream__preview img { width: 100%; } .collections { position: relative; padding: 5rem 5rem 8.25rem; overflow: hidden; } @media only screen and (max-width: 1579px) { .collections { padding: 4rem 4rem 9.5rem; } } @media only screen and (max-width: 1419px) { .collections { padding: 4rem 2.5rem 9.5rem; } } @media only screen and (max-width: 1259px) { .collections { padding: 2.5rem 2.5rem 6rem; } } @media only screen and (max-width: 1023px) { .collections { padding: 3rem 1.5rem 6rem; } } @media only screen and (max-width: 767px) { .collections { padding-bottom: 0; } } .collections__title { margin-bottom: 4rem; padding-right: 12.5rem; } @media only screen and (max-width: 1419px) { .collections__title { margin-bottom: 4rem; } } @media only screen and (max-width: 1259px) { .collections__title { margin-bottom: 3rem; } } @media only screen and (max-width: 1023px) { .collections__title { padding-right: 11rem; } } @media only screen and (max-width: 767px) { .collections__title { margin-bottom: 2rem; padding-right: 0; } } .collections__wrapper { margin: 0 -1rem; } @media only screen and (max-width: 767px) { .collections__wrapper { position: relative; padding: 6.25rem 0 6rem; } } .collections__item { display: block; color: #202025; transition: color 0.2s; } .collections__item:hover { color: #C5DC45; } .collections__images { display: flex; flex-wrap: wrap; margin: -0.5rem -0.25rem 0; } .collections__image, .collections__counter { flex: 0 0 calc(33.333% - 0.5rem); width: calc(33.333% - 0.5rem); margin: 0.5rem 0.25rem 0; } .collections__image:nth-child(1), .collections__counter:nth-child(1) { flex: 0 0 calc(100% - 0.5rem); width: calc(100% - 0.5rem); } .collections__image { position: relative; } .collections__image:before { content: ""; display: block; padding-bottom: 100%; } .collections__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem; } .collections__counter { display: flex; justify-content: center; align-items: center; border-radius: 1rem; background: #BCE6EC; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 767px) { .collections__counter { font-size: 1.25rem; line-height: 1.5rem; } } .collections__details { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .collections__box:nth-child(2) { flex-shrink: 0; margin-left: 1.25rem; text-align: right; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } .collections__subtitle { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1259px) { .collections__subtitle { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.5rem; } } .collections__author { display: flex; align-items: center; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; } .collections__avatar { position: relative; flex-shrink: 0; width: 2rem; height: 2rem; margin-right: 0.75rem; } .collections__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .collections__text { margin-bottom: 0.25rem; color: #686A6C; line-height: 20px; } @media only screen and (max-width: 1259px) { .collections__text { margin-bottom: 0; } } .collections__price { color: #202025; line-height: 20px; } .auctions__row { display: flex; } @media only screen and (max-width: 1023px) { .auctions__row { display: block; } } .auctions__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .auctions__col { width: 100%; } } .auctions__col:nth-child(1) { background: #B9A9FB; } .auctions__wrap { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; max-height: 100vh; height: 100%; padding: 5rem; } @media only screen and (max-width: 1579px) { .auctions__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .auctions__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .auctions__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .auctions__wrap { padding: 2.5rem 1.5rem; } } .auctions__title { max-width: 27.5rem; margin-bottom: 2.5rem; } @media only screen and (max-width: 1023px) { .auctions__list { height: 34.3125rem; overflow: auto; } } @media only screen and (max-width: 767px) { .auctions__list { height: 23.375rem; } } .auctions__item { position: relative; display: block; overflow: hidden; background: #010101; color: #F7FBFA; } @media only screen and (max-width: 1023px) { .auctions__item { height: 34.375rem; } } @media only screen and (max-width: 767px) { .auctions__item { height: 23.4375rem; } } .auctions__item:before { content: ""; display: block; padding-bottom: 100%; } @media only screen and (max-width: 1579px) { .auctions__item:before { padding-bottom: 111%; } } @media only screen and (max-width: 1259px) { .auctions__item:before { padding-bottom: 125%; } } @media only screen and (max-width: 1023px) { .auctions__item:before { display: none; } } .auctions__item:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 58.37%, rgba(0, 0, 0, 0.85) 100%); } .auctions__item:hover .auctions__image { -webkit-transform: scale(1.05); transform: scale(1.05); } .auctions__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .auctions__details { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 5rem; } @media only screen and (max-width: 1579px) { .auctions__details { padding: 5rem 4rem; } } @media only screen and (max-width: 1419px) { .auctions__details { padding: 4rem 2.5rem 2.5rem; } } @media only screen and (max-width: 1259px) { .auctions__details { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .auctions__details { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .auctions__details { padding: 1.5rem; } } .auctions__author { display: inline-flex; align-items: center; margin-bottom: auto; padding: 0.75rem; background: rgba(32, 32, 37, 0.75); border-radius: 0.75rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } .auctions__avatar { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .auctions__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } .auctions__line { display: flex; justify-content: space-between; width: 100%; } .auctions__category { margin-bottom: 0.75rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } @media only screen and (max-width: 1419px) { .auctions__category { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } @media only screen and (max-width: 767px) { .auctions__category { font-size: 0.875rem; line-height: 1.25rem; } } .auctions__crypto { margin-bottom: 0.5rem; } @media only screen and (max-width: 1419px) { .auctions__crypto { font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .auctions__crypto { font-size: 1.5rem; line-height: 2rem; } } .auctions__price { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F1F4F4; } @media only screen and (max-width: 1419px) { .auctions__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } @media only screen and (max-width: 767px) { .auctions__price { font-size: 0.875rem; line-height: 1.25rem; } } .auctions .timer { display: flex; } .auctions .timer li { display: flex; flex-direction: column; min-width: 4.6875rem; } @media only screen and (max-width: 1419px) { .auctions .timer li { min-width: 4.375rem; } } @media only screen and (max-width: 767px) { .auctions .timer li { min-width: 2.8125rem; } } .auctions .timer li:not(:last-child) { margin-right: 1.5rem; } @media only screen and (max-width: 1259px) { .auctions .timer li:not(:last-child) { margin-right: 0.5rem; } } .auctions .timer__value { min-height: 3rem; } @media only screen and (max-width: 1419px) { .auctions .timer__value { min-height: 2.5rem; font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .auctions .timer__value { min-height: 2rem; font-size: 1.5rem; line-height: 2rem; } } .auctions .timer__text { margin-top: 0.5rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F1F4F4; } @media only screen and (max-width: 1419px) { .auctions .timer__text { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } @media only screen and (max-width: 767px) { .auctions .timer__text { font-size: 0; } } .auctions .timer__text span { display: none; } @media only screen and (max-width: 767px) { .auctions .timer__text span { display: inline; font-size: 0.875rem; line-height: 1.25rem; } } .spotlight { padding: 5rem; background: #010101; } @media only screen and (max-width: 1579px) { .spotlight { padding: 4rem; } } @media only screen and (max-width: 1419px) { .spotlight { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .spotlight { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .spotlight { padding: 2.5rem 1.5rem; } } .spotlight__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; } @media only screen and (max-width: 1419px) { .spotlight__head { margin-bottom: 3rem; } } @media only screen and (max-width: 767px) { .spotlight__head { display: block; } } .spotlight__description { margin-right: 2.5rem; } @media only screen and (max-width: 767px) { .spotlight__description { margin: 0 0 2rem; } } .spotlight__title { margin-bottom: 1.25rem; color: #F7FBFA; } .spotlight__info { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .spotlight__info { font-size: 1.25rem; line-height: 1.5rem; } } .spotlight__list { display: flex; flex-wrap: wrap; margin: -4rem -1.25rem 0; } @media only screen and (max-width: 1419px) { .spotlight__list { margin: -3rem -1rem 0; } } @media only screen and (max-width: 767px) { .spotlight__list { display: block; margin: 0; } } .spotlight__card { display: block; flex: 0 0 calc(25% - 2.5rem); width: calc(25% - 2.5rem); margin: 4rem 1.25rem 0; color: #F7FBFA; transition: color 0.2s; } @media only screen and (max-width: 1419px) { .spotlight__card { flex: 0 0 calc(25% - 2rem); width: calc(25% - 2rem); margin: 3rem 1rem 0; } } @media only screen and (max-width: 1023px) { .spotlight__card { flex: 0 0 calc(50% - 2rem); width: calc(50% - 2rem); } } @media only screen and (max-width: 767px) { .spotlight__card { width: 100%; margin: 2rem 0 0; } } .spotlight__card:hover { color: #C5DC45; } .spotlight__preview { position: relative; margin-bottom: 1.5rem; border-radius: 1.25rem; overflow: hidden; } .spotlight__preview:before { content: ""; display: block; padding-bottom: 100%; } .spotlight__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .spotlight__preview:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .spotlight__line { display: flex; justify-content: space-between; align-items: flex-start; } @media only screen and (max-width: 1259px) { .spotlight__line { display: block; } } @media only screen and (max-width: 1023px) { .spotlight__line { display: flex; } } .spotlight__subtitle { margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1419px) { .spotlight__subtitle { font-size: 1.25rem; line-height: 1.5rem; } } @media only screen and (max-width: 1259px) { .spotlight__subtitle { margin-bottom: 0; } } @media only screen and (max-width: 1023px) { .spotlight__subtitle { margin-bottom: 0.5rem; } } .spotlight__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 767px) { .spotlight__price { font-size: 0.875rem; line-height: 1.25rem; } } .spotlight__price span { color: #686A6C; } .spotlight .users { flex-shrink: 0; margin-left: 0.75rem; padding: 0.5rem; } @media only screen and (max-width: 1419px) { .spotlight .users { padding: 0; } } @media only screen and (max-width: 1259px) { .spotlight .users { margin: 1rem 0 0 0; } } @media only screen and (max-width: 1023px) { .spotlight .users { margin: 0 0 0 0.75rem; padding: 0.5rem; } } .spotlight__btns { margin-top: 4rem; text-align: center; } @media only screen and (max-width: 1419px) { .spotlight__btns { margin-top: 3rem; } } .tabs { display: flex; } .tabs__button { padding: 0.5rem 1.5rem; border-radius: 1.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; cursor: pointer; color: #686A6C; transition: all 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (max-width: 767px) { .tabs__button { font-size: 0.875rem; line-height: 1.25rem; } } .tabs__button:hover { color: #202025; } .tabs__button.active { background: #202025; color: #F7FBFA; } .tabs__button:not(:last-child) { margin-right: 0.75rem; } .tabs_dark .tabs__button:hover { color: #F7FBFA; } .tabs_dark .tabs__button.active { background: #F7FBFA; color: #202025; } .users { display: flex; align-items: center; } .users__group { display: flex; } .users__title { margin-right: 0.75rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .users__item { position: relative; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0; } .users__item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .users__item:not(:nth-child(1)) { margin-left: -0.5rem; } .users__counter { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 2rem; height: 2rem; margin-left: -0.5rem; background: #F7FBFA; border-radius: 50%; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: -0.02em; } .users_border .users__item, .users_border .users__counter { border: 0.0625rem solid #202025; } .creativity { padding: 8rem 5rem; } @media only screen and (max-width: 1579px) { .creativity { padding: 6rem 4rem; } } @media only screen and (max-width: 1419px) { .creativity { padding: 5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .creativity { padding: 3rem 1.5rem; } } .creativity__head { max-width: 49rem; margin: 0 auto 5rem; text-align: center; } @media only screen and (max-width: 1023px) { .creativity__head { margin-bottom: 2.5rem; } } @media only screen and (max-width: 767px) { .creativity__head { text-align: left; } } .creativity__title { margin-bottom: 1.25rem; } .creativity__info { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .creativity__info { font-size: 1rem; line-height: 1.5rem; } } .creativity__item { display: flex; align-items: center; } @media only screen and (max-width: 1579px) { .creativity__item { margin: 0 -2rem; } } @media only screen and (max-width: 1419px) { .creativity__item { margin: 0 -1.5rem; } } @media only screen and (max-width: 1023px) { .creativity__item { display: block; margin: 0; } } .creativity__item:nth-child(2n) { flex-direction: row-reverse; } .creativity__item:nth-child(2n) .creativity__wrap { padding: 0 5rem 0 0; } @media only screen and (max-width: 1579px) { .creativity__item:nth-child(2n) .creativity__wrap { padding-right: 0; } } .creativity__item:nth-child(2n) .creativity__content { max-width: 37.5rem; } .creativity__item:not(:last-child) { margin-bottom: 5rem; } @media only screen and (max-width: 1023px) { .creativity__item:not(:last-child) { margin-bottom: 3rem; } } .creativity__preview, .creativity__wrap { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1579px) { .creativity__preview, .creativity__wrap { flex: 0 0 calc(50% - 4rem); width: calc(50% - 4rem); margin: 0 2rem; } } @media only screen and (max-width: 1419px) { .creativity__preview, .creativity__wrap { flex: 0 0 calc(50% - 3rem); width: calc(50% - 3rem); margin: 0 1.5rem; } } @media only screen and (max-width: 1023px) { .creativity__preview, .creativity__wrap { width: 100%; margin: 0; } } .creativity__preview { position: relative; } @media only screen and (max-width: 1023px) { .creativity__preview { margin-bottom: 2.5rem; } } .creativity__video { width: 100%; border-radius: 2rem; } .creativity__wrap { padding-left: 5rem; } @media only screen and (max-width: 1579px) { .creativity__wrap { padding-left: 0; } } .creativity__content { margin-bottom: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; } @media only screen and (max-width: 1419px) { .creativity__content { margin-bottom: 2rem; font-size: 1rem; line-height: 1.5rem; } } .creativity__content h2 { margin-bottom: 2.5rem; font-size: 4rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; } @media only screen and (max-width: 1419px) { .creativity__content h2 { margin-bottom: 2rem; font-size: 3rem; } } @media only screen and (max-width: 1259px) { .creativity__content h2 { font-size: 2.5rem; line-height: 3rem; } } .creativity__content p { color: #686A6C; } .creativity__content p:not(:last-child) { margin-bottom: 1.25rem; } .creativity__content ul { margin-top: 2.5rem; } @media only screen and (max-width: 1419px) { .creativity__content ul { margin-top: 2rem; } } .creativity__content ul li { position: relative; padding-left: 2.25rem; } .creativity__content ul li:before, .creativity__content ul li:after { content: ""; position: absolute; border-radius: 50%; } .creativity__content ul li:before { top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #C5DC45; } @media only screen and (max-width: 1419px) { .creativity__content ul li:before { top: 0; } } .creativity__content ul li:after { top: 0.875rem; left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #C5DC45; } @media only screen and (max-width: 1419px) { .creativity__content ul li:after { top: 0.625rem; } } .creativity__content ul li:not(:last-child) { margin-bottom: 1.5rem; } .field__wrap { position: relative; } .field__input, .field__textarea { width: 100%; border-width: 0 0 0.0625rem; border-style: solid; border-color: #E1E2E2; background: transparent; border-radius: 0; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; transition: border-color 0.2s; } .field__input::-webkit-input-placeholder, .field__textarea::-webkit-input-placeholder { color: #202025; } .field__input::-moz-placeholder, .field__textarea::-moz-placeholder { color: #202025; } .field__input:-ms-input-placeholder, .field__textarea:-ms-input-placeholder { color: #202025; } .field__input::-ms-input-placeholder, .field__textarea::-ms-input-placeholder { color: #202025; } .field__input::placeholder, .field__textarea::placeholder { color: #202025; } .field__input:focus, .field__textarea:focus { border-color: #C5DC45; } .field__input { height: 4rem; padding: 0; } .field__textarea { height: 9.5rem; padding: 1rem 0; resize: none; } .field .icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; fill: #686A6C; } .field__label { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .field_icon .field__input, .field_icon .field__textarea { padding-right: 2.5rem; } .field_textarea { font-size: 0; } .field_textarea .icon { top: 1rem; -webkit-transform: translateY(0); transform: translateY(0); } .field_light .field__input, .field_light .field__textarea { border-color: #555555; color: #F7FBFA; } .field_light .field__input::-webkit-input-placeholder, .field_light .field__textarea::-webkit-input-placeholder { color: #F7FBFA; } .field_light .field__input::-moz-placeholder, .field_light .field__textarea::-moz-placeholder { color: #F7FBFA; } .field_light .field__input:-ms-input-placeholder, .field_light .field__textarea:-ms-input-placeholder { color: #F7FBFA; } .field_light .field__input::-ms-input-placeholder, .field_light .field__textarea::-ms-input-placeholder { color: #F7FBFA; } .field_light .field__input::placeholder, .field_light .field__textarea::placeholder { color: #F7FBFA; } .field_light .field__input:focus, .field_light .field__textarea:focus { border-color: #F7FBFA; } .field_large .field__input { height: 6rem; } @media only screen and (max-width: 767px) { .field_large .field__input { height: 4.5rem; } } .field_large .field__textarea { height: 13.25rem; padding: 2rem 2rem 1.5rem 0; } @media only screen and (max-width: 767px) { .field_large .field__textarea { height: 10rem; padding: 1rem 2rem 1rem 0; } } .field_large.field_textarea .icon { top: 2.125rem; } @media only screen and (max-width: 767px) { .field_large.field_textarea .icon { top: 1.125rem; } } .newsletter__row { display: flex; } @media only screen and (max-width: 1023px) { .newsletter__row { display: block; } } .newsletter__col { display: flex; flex-direction: column; flex: 0 0 50%; width: 50%; min-height: 50rem; padding: 5rem; } @media only screen and (max-width: 1579px) { .newsletter__col { padding: 4rem; } } @media only screen and (max-width: 1419px) { .newsletter__col { min-height: 48rem; padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .newsletter__col { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .newsletter__col { width: 100%; min-height: 25rem; padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .newsletter__col { min-height: 31.75rem; } } .newsletter__col:nth-child(1) { background: #F3F380; } .newsletter__col:nth-child(2) { background: #202025; } .newsletter__col:nth-child(2) .newsletter__title { color: #F7FBFA; } .newsletter__title { margin-bottom: auto; padding-bottom: 2.5rem; } .newsletter__content { max-width: 37.5rem; margin-bottom: 3.25rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; } @media only screen and (max-width: 1419px) { .newsletter__content { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 1023px) { .newsletter__content { margin-bottom: 2rem; } } .newsletter__btns { display: flex; } @media only screen and (max-width: 1259px) { .newsletter__btns { margin: 0 -0.625rem; } } @media only screen and (max-width: 767px) { .newsletter__btns { display: block; } } @media only screen and (max-width: 1259px) { .newsletter__btns .newsletter__button { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 0 0.625rem; padding: 0 1rem; } } @media only screen and (max-width: 767px) { .newsletter__btns .newsletter__button { width: 100%; margin: 0; } } .newsletter__btns .newsletter__button:not(:last-child) { margin-right: 1.25rem; } @media only screen and (max-width: 1259px) { .newsletter__btns .newsletter__button:not(:last-child) { margin-right: 0.625rem; } } @media only screen and (max-width: 767px) { .newsletter__btns .newsletter__button:not(:last-child) { margin: 0 0 1.25rem; } } .newsletter__info { margin-bottom: 0.75rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #A6AEAD; } @media only screen and (max-width: 1419px) { .newsletter__info { font-size: 1rem; line-height: 1.5rem; } } .newsletter__fieldset { display: flex; margin: 0 -0.625rem 2.5rem; } @media only screen and (max-width: 767px) { .newsletter__fieldset { display: block; margin: 0 0 2.5rem; } } .newsletter .field { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 0 0.625rem; } @media only screen and (max-width: 767px) { .newsletter .field { width: 100%; margin: 0; } .newsletter .field:not(:last-child) { margin-bottom: 2rem; } } .newsletter .field .field__input { height: 3.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } @media only screen and (max-width: 767px) { .newsletter__button { width: 100%; } } .footer__body { display: flex; justify-content: space-between; padding: 5rem 5rem 2.5rem; } @media only screen and (max-width: 1579px) { .footer__body { padding: 5rem 4rem 2.5rem; } } @media only screen and (max-width: 1419px) { .footer__body { padding: 5rem 2.5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .footer__body { padding: 3rem 1.5rem 2.5rem; } } @media only screen and (max-width: 767px) { .footer__body { display: block; padding-top: 2.5rem; } } .footer .logo { width: 13.625rem; margin-bottom: 1.25rem; } @media only screen and (max-width: 767px) { .footer .logo { margin-bottom: 0.75rem; } } .footer__info { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } .footer__group { display: flex; margin-left: 2.5rem; } @media only screen and (max-width: 767px) { .footer__group { margin: 2rem 0 0; } } .footer__item { min-width: 9rem; } @media only screen and (max-width: 1579px) { .footer__item { min-width: 8rem; } } @media only screen and (max-width: 1259px) { .footer__item { min-width: 7.375rem; } } @media only screen and (max-width: 767px) { .footer__item { min-width: auto; } } @media only screen and (max-width: 767px) { .footer__item:last-child { padding-top: 2.5rem; } .footer__item:last-child .footer__category { display: none; } .footer__item:last-child .footer__link { font-size: 0; } } .footer__item:not(:last-child) { margin-right: 6.5rem; } @media only screen and (max-width: 1259px) { .footer__item:not(:last-child) { margin-right: 2.5rem; } } @media only screen and (max-width: 1023px) { .footer__item:not(:last-child) { margin-right: 1.5rem; } } @media only screen and (max-width: 767px) { .footer__item:not(:last-child) { margin-right: auto; padding-right: 1.25rem; } } .footer__category { margin-bottom: 2rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; } @media only screen and (max-width: 767px) { .footer__category { margin-bottom: 1rem; } } .footer__menu { display: flex; flex-direction: column; } .footer__link { display: flex; align-items: center; min-height: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #686A6C; transition: color 0.2s; } .footer__link .icon { margin-right: 0.5rem; fill: #686A6C; transition: fill 0.2s; } @media only screen and (max-width: 767px) { .footer__link .icon { margin-right: 0; } } .footer__link:hover { color: #C5DC45; } .footer__link:hover .icon { fill: #C5DC45; } .footer__link:not(:last-child) { margin-bottom: 1.25rem; } @media only screen and (max-width: 767px) { .footer__link:not(:last-child) { margin-bottom: 0.875rem; } } .footer__foot { display: flex; align-items: center; padding: 2rem 5rem; border-top: 0.0625rem solid #E1E2E2; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #A6AEAD; } @media only screen and (max-width: 1579px) { .footer__foot { padding: 2rem 4rem; } } @media only screen and (max-width: 1419px) { .footer__foot { padding: 2rem 2.5rem; } } @media only screen and (max-width: 1023px) { .footer__foot { padding: 1.5rem; } } @media only screen and (max-width: 767px) { .footer__foot { display: block; } } .footer__copyright { margin-right: auto; } .footer__cookies { display: flex; align-items: center; margin-left: 1.5rem; } @media only screen and (max-width: 767px) { .footer__cookies { margin: 1rem 0 0; } } .footer__cookies .footer__button { margin-left: 2.5rem; } @media only screen and (max-width: 1419px) { .footer__cookies .footer__button { margin-left: 1.5rem; } } @media only screen and (max-width: 767px) { .footer__cookies .footer__button { margin-left: 0.375rem; } } .connect { display: flex; flex-grow: 1; width: 100%; } .connect__row { display: flex; flex-grow: 1; overflow: hidden; } @media only screen and (max-width: 1023px) { .connect__row { flex-direction: column; } } .connect__row:nth-child(2), .connect__row:nth-child(3) { display: none; } .connect__col { display: flex; flex-direction: column; flex: 0 0 50%; width: 50%; padding: 5rem; } @media only screen and (max-width: 1579px) { .connect__col { padding: 4rem; } } @media only screen and (max-width: 1419px) { .connect__col { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .connect__col { flex: 0 0 auto; width: auto; padding: 2.5rem 1.5rem; } } .connect .logo { margin-bottom: auto; } @media only screen and (max-width: 1023px) { .connect .logo { margin: 0 0 2.5rem; } } .connect__line { display: flex; justify-content: space-between; margin-bottom: 1.5rem; } @media only screen and (max-width: 767px) { .connect__line { display: block; } } .connect .arrow { margin: 0.5rem 0 0 1.25rem; } @media only screen and (max-width: 767px) { .connect .arrow { margin: 1.5rem 0 0; } } .connect__info { max-width: 28.125rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1419px) { .connect__info { font-size: 1.25rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .connect__info { font-size: 1rem; line-height: 1.5rem; } } .connect__cookies { display: flex; justify-content: space-between; margin-top: 3rem; padding: 1rem; background: rgba(32, 32, 37, 0.5); border-radius: 0.75rem; } @media only screen and (max-width: 767px) { .connect__cookies { margin-top: 2.5rem; } } .connect__accept { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #F7FBFA; transition: color 0.2s; } .connect__accept:hover { color: #C5DC45; } .connect__cookies .connect__text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #686A6C; } .connect__cookies .connect__text span { color: #F7FBFA; } .connect__back { position: absolute; top: 2rem; right: 2rem; z-index: 15; border-color: #202025; background: #010101; } @media only screen and (max-width: 1419px) { .connect__back { top: 1rem; right: 1rem; width: 3rem; height: 3rem; } } .connect__back .icon { fill: #F7FBFA; } .connect__back:hover { background: #202025; } .connect__scan { margin: auto 0; } .connect__scan .connect__subtitle { margin-bottom: 3rem; color: #F7FBFA; } @media only screen and (max-width: 1023px) { .connect__scan .connect__subtitle { margin-bottom: 1.5rem; } } .connect__code { position: relative; display: flex; justify-content: center; align-items: center; height: 28.75rem; border-radius: 2rem; background: rgba(32, 32, 37, 0.5); } @media only screen and (max-width: 1259px) { .connect__code { height: 27rem; } } @media only screen and (max-width: 767px) { .connect__code { height: 20.4375rem; border-radius: 1.75rem; } } .connect__code img { max-width: 16rem; } .connect__lines span { position: absolute; width: 2.5rem; height: 2.5rem; border-style: solid; border-color: #555555; pointer-events: none; } @media only screen and (max-width: 767px) { .connect__lines span { width: 2.125rem; height: 2.125rem; } } .connect__lines span:nth-child(1), .connect__lines span:nth-child(2) { top: 1rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(1), .connect__lines span:nth-child(2) { top: 0.75rem; } } .connect__lines span:nth-child(2), .connect__lines span:nth-child(3) { right: 1rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(2), .connect__lines span:nth-child(3) { right: 0.75rem; } } .connect__lines span:nth-child(3), .connect__lines span:nth-child(4) { bottom: 1rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(3), .connect__lines span:nth-child(4) { bottom: 0.75rem; } } .connect__lines span:nth-child(1), .connect__lines span:nth-child(4) { left: 1rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(1), .connect__lines span:nth-child(4) { left: 0.75rem; } } .connect__lines span:nth-child(1) { border-width: 0.0625rem 0 0 0.0625rem; border-top-left-radius: 1.5rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(1) { border-top-left-radius: 1.3125rem; } } .connect__lines span:nth-child(2) { border-width: 0.0625rem 0.0625rem 0 0; border-top-right-radius: 1.5rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(2) { border-top-right-radius: 1.3125rem; } } .connect__lines span:nth-child(3) { border-width: 0 0.0625rem 0.0625rem 0; border-bottom-right-radius: 1.5rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(3) { border-bottom-right-radius: 1.3125rem; } } .connect__lines span:nth-child(4) { border-width: 0 0 0.0625rem 0.0625rem; border-bottom-left-radius: 1.5rem; } @media only screen and (max-width: 767px) { .connect__lines span:nth-child(4) { border-bottom-left-radius: 1.3125rem; } } .connect__foot { margin-top: 2.5rem; text-align: center; } .connect__foot .connect__text { margin-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .connect__foot .connect__question { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; transition: color 0.2s; } .connect__foot .connect__question:hover { color: #C5DC45; } .connect__message { margin: auto 0; } .connect__logo { width: 5rem; margin-bottom: 4rem; } @media only screen and (max-width: 1023px) { .connect__logo { margin-bottom: 2.5rem; } } .connect__message .connect__subtitle { margin-bottom: 1.5rem; color: #F7FBFA; } .connect__content { max-width: 28.125rem; margin-bottom: 2.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .connect__content { font-size: 0.875rem; line-height: 1.25rem; } } .connect__btns { display: flex; margin: 0 -0.375rem 2.5rem; } @media only screen and (max-width: 767px) { .connect__btns { display: block; margin: 0 0 2.5rem; } } .connect__btns .connect__button { flex: 0 0 calc(50% - 0.75rem); width: calc(50% - 0.75rem); margin: 0 0.375rem; } @media only screen and (max-width: 767px) { .connect__btns .connect__button { width: 100%; height: 3.75rem; margin: 0; } .connect__btns .connect__button:not(:last-child) { margin-bottom: 0.75rem; } } .connect__links { display: flex; justify-content: space-between; align-items: center; } .connect__links .connect__question, .connect__learn { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; transition: color 0.2s; } @media only screen and (max-width: 767px) { .connect__links .connect__question, .connect__learn { font-size: 0.875rem; line-height: 1.25rem; } } .connect__links .connect__question { color: #686A6C; } .connect__links .connect__question:hover { color: #F7FBFA; } .connect__learn { display: flex; align-items: center; color: #F7FBFA; } .connect__learn .icon { margin-left: 0.75rem; fill: #F7FBFA; transition: fill 0.2s; } .connect__learn:hover { color: #C5DC45; } .connect__learn:hover .icon { fill: #C5DC45; } .wallets { margin: auto 0; } .wallets__title { margin-bottom: 3rem; color: #F7FBFA; } .wallets__head { position: relative; margin-bottom: 3rem; } @media only screen and (max-width: 1259px) { .wallets__head { margin: 0 -2.5rem 3rem; } } @media only screen and (max-width: 767px) { .wallets__head { margin-bottom: 2rem; } } .wallets__head:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.0625rem; background: #202025; } .wallets__tabs { display: flex; } @media only screen and (max-width: 1259px) { .wallets__tabs { -webkit-overflow-scrolling: touch; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .wallets__tabs::-webkit-scrollbar { display: none; width: 0; height: 0; } .wallets__tabs:before, .wallets__tabs:after { content: ""; flex-shrink: 0; display: block; width: 2.5rem; } } .wallets__tab { position: relative; display: flex; align-items: center; flex-shrink: 0; height: 3.5rem; padding: 0 2rem; border-bottom: 0.0625rem solid transparent; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; transition: all 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (max-width: 1259px) { .wallets__tab { margin-bottom: 0rem; } } .wallets__tab:hover, .wallets__tab.active { color: #F7FBFA; } .wallets__tab.active { border-color: #F7FBFA; } .wallets__item { position: relative; width: 100%; } .wallets__item .icon { position: absolute; top: 50%; right: 2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #F7FBFA; opacity: 0; transition: opacity 0.2s; } .wallets__item:before, .wallets__item:after { content: ""; position: absolute; } .wallets__item:before { top: -0.375rem; left: -0.375rem; right: -0.375rem; bottom: -0.375rem; border-radius: 1rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); opacity: 0; transition: opacity 0.2s; } .wallets__item:after { top: -0.25rem; left: -0.25rem; right: -0.25rem; bottom: -0.25rem; z-index: 1; border-radius: 0.9375rem; background: #010101; } .wallets__item:hover .wallets__inner { background: #202025; color: #F7FBFA; } .wallets__item:hover .icon { opacity: 1; } .wallets__item:hover:before { opacity: 1; } .wallets__item:not(:last-child) { margin-bottom: 1.25rem; } .wallets__inner { position: relative; z-index: 2; display: flex; align-items: center; height: 5rem; padding: 0 4.5rem 0 2rem; border-radius: 0.75rem; border: 0.125rem solid #202025; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #E1E2E2; transition: background 0.2s, color 0.2s; } @media only screen and (max-width: 767px) { .wallets__inner { font-size: 1.25rem; line-height: 1.5rem; } } .wallets__image { flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-right: 1.25rem; border-radius: 50%; } .wallets__btns { margin-top: 3rem; text-align: center; } @media only screen and (max-width: 767px) { .wallets__btns { margin-top: 2rem; } } .wallets__scan { position: relative; padding-left: 2.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } .wallets__scan:before, .wallets__scan:after { content: ""; position: absolute; border-radius: 50%; } .wallets__scan:before { top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #A6AEAD; transition: border-color 0.2s; } .wallets__scan:after { top: 0.625rem; left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #A6AEAD; transition: background 0.2s; } .wallets__scan:hover:before { border-color: #F7FBFA; } .wallets__scan:hover::after { background: #F7FBFA; } .background { position: relative; height: 25rem; margin-top: -6rem; } @media only screen and (max-width: 1579px) { .background { height: 19rem; } } @media only screen and (max-width: 767px) { .background { margin-top: -5.5rem; } } .background img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .background__file { position: absolute; inset: 0; opacity: 0; } .background__details { padding: 3rem; text-align: center; pointer-events: none; } .background__title { margin-bottom: 0.5rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } @media only screen and (max-width: 767px) { .background__title { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .background__info { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } .background:not(.background_cover):after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(1, 1, 1, 0.5); } .background_cover { display: flex; justify-content: center; align-items: center; height: 19rem; margin-top: 0; background: #F1F4F4; border-bottom: 0.0625rem solid #E1E2E2; } .follow { min-width: 10rem; padding: 0 1rem; background: transparent; border-color: #555555; } .follow .icon-check { display: none; } .follow__text span { display: none; } .follow:hover { border-color: #E1E2E2; background: transparent; color: #F7FBFA; } .follow:hover .icon { fill: #F7FBFA; } .follow.active { background: #F7FBFA; border-color: #F7FBFA; color: #010101; } .follow.active .icon { fill: #010101; } .follow.active .icon-check { display: inline-block; } .follow.active .icon-plus { display: none; } .follow.active .follow__text span { display: inline; } .follow_dark { border-color: #E1E2E2; color: #202025; } .follow_dark .icon { fill: #202025; } .follow_dark:hover { border-color: #202025; color: #202025; } .follow_dark:hover .icon { fill: #202025; } .follow_dark.active { background: #202025; border-color: #202025; color: #F7FBFA; } .follow_dark.active .icon { fill: #F7FBFA; } .profile { display: flex; min-height: calc(100vh - 25rem); } @media only screen and (max-width: 1579px) { .profile { min-height: calc(100vh - 19rem); } } @media only screen and (max-width: 1023px) { .profile { display: block; } } .profile__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .profile__col { width: 100%; } } .profile__col:nth-child(1) { position: relative; } .profile__col > .profile__avatar { position: absolute; top: -9rem; left: 4.25rem; width: 14rem; height: 14rem; border: 0.75rem solid rgba(247, 251, 250, 0.25); border-radius: 50%; } @media only screen and (max-width: 1579px) { .profile__col > .profile__avatar { left: 3.25rem; } } @media only screen and (max-width: 1419px) { .profile__col > .profile__avatar { left: 1.75rem; } } @media only screen and (max-width: 1023px) { .profile__col > .profile__avatar { top: -6.75rem; left: 0.75rem; width: 11.5rem; height: 11.5rem; } } .profile__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .profile__details { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 50rem; padding: 6.25rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .profile__details { min-height: 45rem; padding: 6.25rem 4rem 5rem; } } @media only screen and (max-width: 1419px) { .profile__details { padding: 6.25rem 2.5rem 5rem; } } @media only screen and (max-width: 1023px) { .profile__details { display: block; min-height: auto; padding: 6.25rem 1.5rem 3rem; } } .profile__details .follow { margin-top: 0.5rem; padding: 0 1.875rem; } @media only screen and (max-width: 1259px) { .profile__details .follow { min-width: 5.5rem; margin-top: 0; padding: 0 0.75rem; font-size: 0; } .profile__details .follow .icon { margin: 0; } } @media only screen and (max-width: 1023px) { .profile__details .follow { min-width: auto; padding: 0 1.875rem; font-size: 0.75rem; } .profile__details .follow .icon { margin-left: 0.75rem; } } @media only screen and (max-width: 767px) { .profile__details .follow { margin-top: 2rem; } } .profile__head { margin-bottom: auto; } .profile__flex { display: flex; justify-content: space-between; margin-bottom: 2.5rem; } @media only screen and (max-width: 767px) { .profile__flex { display: block; margin-bottom: 2rem; } } .profile__user { margin-bottom: 0.5rem; } @media only screen and (max-width: 767px) { .profile__user { font-size: 3rem; } } .profile__line { display: flex; align-items: center; } .profile__login { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .profile__login { font-size: 1.25rem; line-height: 1.5rem; } } .profile__code { display: flex; align-items: center; margin-left: 1.25rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: #B9A9FB; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } @media only screen and (max-width: 1259px) { .profile__code { font-size: 0.9375rem; line-height: 1.5rem; } } .profile__copy { margin-left: 0.5rem; font-size: 0; } .profile__copy .icon { width: 1.25rem; height: 1.25rem; } .profile__actions { display: flex; margin: 0 -1.25rem; } @media only screen and (max-width: 767px) { .profile__actions { justify-content: space-between; margin: 0; } } .profile__action { flex: 0 0 calc(33.333% - 2.5rem); width: calc(33.333% - 2.5rem); margin: 0 1.25rem; cursor: pointer; transition: color 0.2s; } @media only screen and (max-width: 767px) { .profile__action { flex: 0 0 auto; width: auto; margin: 0; } } .profile__action:hover, .profile__action.active { color: #C5DC45; } @media only screen and (max-width: 1259px) { .profile__counter { font-size: 1.5rem; line-height: 2rem; } } .profile__subtitle { display: flex; align-items: center; margin-top: 0.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .profile__subtitle { font-size: 0.9375rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .profile__subtitle { font-size: 0.875rem; line-height: 1.25rem; } } .profile__subtitle .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.25rem; fill: #686A6C; } @media only screen and (max-width: 767px) { .profile__subtitle .icon { width: 1rem; height: 1rem; } } .profile__contacts { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 4rem; } @media only screen and (max-width: 1259px) { .profile__contacts { margin-top: 2.5rem; } } @media only screen and (max-width: 767px) { .profile__contacts { display: block; margin-top: 2rem; } } .profile__description { max-width: 30.5rem; } .profile__item:not(:last-child) { margin-bottom: 2.5rem; } .profile__category { margin-bottom: 1.5rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #686A6C; } .profile__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } .profile__links { display: flex; justify-content: space-between; align-items: center; } .profile__link { display: flex; align-items: center; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: color 0.2s; } .profile__link .icon { margin-right: 1rem; fill: #202025; transition: fill 0.2s; } .profile__link:hover { color: #C5DC45; } .profile__link:hover .icon { fill: #C5DC45; } .profile__socials { display: flex; flex-direction: column; flex-shrink: 0; margin-left: 4rem; } @media only screen and (max-width: 767px) { .profile__socials { flex-direction: row; margin: 2.5rem 0 0; } } .profile__social .icon { fill: #686A6C; transition: fill 0.2s; } .profile__social:hover .icon { fill: #010101; } .profile__social:not(:last-child) { margin-bottom: 1.5rem; } @media only screen and (max-width: 767px) { .profile__social:not(:last-child) { margin: 0 1.5rem 0 0; } } .profile .list { display: none; } .list { height: 100%; background: #010101; border-left: 0.0625rem solid transparent; transition: background 0.2s, border-color 0.2s; } .list__wrapper { padding: 4rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .list__wrapper { padding: 4rem; } } @media only screen and (max-width: 1419px) { .list__wrapper { padding: 3rem 2.5rem 4rem; } } @media only screen and (max-width: 1023px) { .list__wrapper { padding: 3rem 1.5rem 3rem; } } .list__head { position: relative; } .list__head:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.0625rem; background: #202025; transition: background 0.2s; } .list__nav { position: relative; display: flex; padding-bottom: 0.0625rem; -webkit-overflow-scrolling: touch; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .list__nav::-webkit-scrollbar { display: none; width: 0; height: 0; } .list__tab { position: relative; display: flex; justify-content: center; align-items: center; flex: 1 0 auto; height: 5.25rem; padding: 0 1.5rem; text-align: center; white-space: nowrap; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; transition: all 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .list__tab:before, .list__tab:after { content: ""; position: absolute; top: 0; left: 0; right: 0; } .list__tab:before { bottom: -0.0625rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); opacity: 0; transition: opacity 0.2s; } .list__tab:after { bottom: 0; background: #010101; transition: background 0.2s; } .list__tab:hover, .list__tab.active { color: #F7FBFA; } .list__tab.active { color: #F7FBFA; } .list__tab.active:before { opacity: 1; } .list__tab:nth-child(4n+1) .list__counter { background: #F3F380; } .list__tab:nth-child(4n+2) .list__counter { background: #B9A9FB; } .list__tab:nth-child(4n+3) .list__counter { background: #FFA6D6; } .list__tab:nth-child(4n+4) .list__counter { background: #BCE6EC; } .list__title, .list__counter { position: relative; z-index: 1; } .list__counter { margin-left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 0.5rem; color: #202025; } .list__item { display: none; } .list__foot { margin-top: 4rem; text-align: center; } @media only screen and (max-width: 1259px) { .list__foot { margin-top: 3rem; } } .list__link { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; transition: color 0.2s; } .list__link:hover { color: #F7FBFA; } .list.light { background: #F7FBFA; border-color: #E1E2E2; } .list.light .list__head:before { background: #E1E2E2; } .list.light .list__head .list__tab:before { background: #C5DC45; } .list.light .list__head .list__tab:after { background: #F7FBFA; } .list.light .list__head .list__tab:hover, .list.light .list__head .list__tab.active { color: #202025; } .list.light .users__item, .list.light .users__counter { border-color: #E1E2E2; } .list.light .actions__sorting .icon { fill: #686A6C; } .list.light .actions__sorting:hover .icon { fill: #202025; } .list.light .actions__sorting.active .icon { fill: #F7FBFA; } .list.light .tokens__item { color: #202025; } .list.light .tokens__item:hover { color: #C5DC45; } .list.light .tokens__price { color: #202025; } .list.light .compilation__item { color: #202025; } .list.light .compilation__item:hover { color: #C5DC45; } .list.light .compilation__floor span { color: #202025; } .list.light .balance { color: #C5DC45; } .list.light .balance .icon { fill: #C5DC45; } .list.light .balance.negative { color: #FD5D47; } .list.light .balance.negative .icon { fill: #FD5D47; } .list.light .spinner span:after { background: #555555; } .tokens__head { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 4rem; } @media only screen and (max-width: 1419px) { .tokens__head { margin-bottom: 3rem; } } @media only screen and (max-width: 767px) { .tokens__head { margin-bottom: 2.5rem; } } @media only screen and (max-width: 1259px) { .tokens__head .user { display: none; } } @media only screen and (max-width: 767px) { .tokens__head .user { display: block; } } @media only screen and (max-width: 1259px) { .tokens__head .user__counter { margin-left: 0; } } @media only screen and (max-width: 767px) { .tokens__head .user__counter { margin-left: -0.5rem; } } .tokens__group { display: flex; flex-wrap: wrap; margin: -2.5rem -1.25rem 0; } @media only screen and (max-width: 767px) { .tokens__group { display: block; margin: 0; } } .tokens__item { display: block; flex: 0 0 calc(50% - 2.5rem); width: calc(50% - 2.5rem); margin: 2.5rem 1.25rem 0; color: #F7FBFA; transition: color 0.2s; } @media only screen and (max-width: 767px) { .tokens__item { width: 100%; margin: 2.5rem 0 0; } } .tokens__item:hover { color: #C5DC45; } .tokens__item:hover .tokens__preview img { -webkit-transform: scale(1.05); transform: scale(1.05); } .tokens__preview { position: relative; margin-bottom: 1.25rem; border-radius: 1.25rem; overflow: hidden; } .tokens__preview:before { content: ""; display: block; padding-bottom: 100%; } .tokens__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .tokens__title { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1259px) { .tokens__title { font-size: 1.25rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .tokens__title { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .tokens__category { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .tokens__line { display: flex; justify-content: space-between; align-items: center; } .tokens__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F3F380; } .tokens_list .tokens__group { display: block; margin: 0; } .tokens_list .tokens__item { width: 100%; margin: 3rem 0 0; } @media only screen and (max-width: 767px) { .tokens_list .tokens__item { margin-top: 2.5rem; } } .tokens_list .tokens__title { font-size: 2rem; line-height: 2.5rem; font-weight: 800; } .actions { display: flex; } .actions__sortings { display: flex; } @media only screen and (max-width: 767px) { .actions__sortings { display: none; } } .actions__sortings, .actions__sorting, .actions__theme { font-size: 0; } .actions__sortings:not(:last-child), .actions__sorting:not(:last-child), .actions__theme:not(:last-child) { margin-right: 0.75rem; } .actions__sorting, .actions__filters, .actions__theme { flex-shrink: 0; width: 3rem; height: 3rem; } .actions__sorting .icon, .actions__filters .icon, .actions__theme .icon { transition: fill 0.2s; } .actions__sorting:not(:last-child), .actions__filters:not(:last-child), .actions__theme:not(:last-child) { margin-right: 0.75rem; } .actions__sorting, .actions__filters { border-radius: 50%; transition: background 0.2s; } .actions__sorting .icon, .actions__filters .icon { fill: #555555; transition: fill 0.2s; } .actions__sorting:hover .icon, .actions__sorting.active .icon, .actions__filters:hover .icon, .actions__filters.active .icon { fill: #F7FBFA; } .actions__sorting.active, .actions__filters.active { background: #202025; } .actions__theme .icon { fill: #686A6C; } .actions__theme .icon-moon { display: none; } .actions__theme:hover .icon { fill: #F7FBFA; } .actions__theme.active .icon-sun { display: none; } .actions__theme.active .icon-moon { display: inline-block; } .actions__theme.active:hover .icon { fill: #010101; } .spinner { position: relative; width: 1.5rem; height: 1.5rem; margin: 2.5rem auto 0; } .spinner span { display: block; -webkit-transform-origin: 0.75rem 0.75rem; transform-origin: 0.75rem 0.75rem; -webkit-animation: spinner 0.8s linear infinite; animation: spinner 0.8s linear infinite; } .spinner span:after { content: " "; display: block; position: absolute; top: 0; left: 0.6875rem; width: 0.125rem; height: 0.3125rem; border-radius: 0.125rem; background: #E1E2E2; } .spinner span:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .spinner span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .spinner span:nth-child(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .spinner span:nth-child(4) { -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .spinner span:nth-child(5) { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .spinner span:nth-child(6) { -webkit-transform: rotate(225deg); transform: rotate(225deg); -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .spinner span:nth-child(7) { -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .spinner span:nth-child(8) { -webkit-transform: rotate(315deg); transform: rotate(315deg); -webkit-animation-delay: 0s; animation-delay: 0s; } .spinner.dark span:after { background: #555555; } @-webkit-keyframes spinner { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes spinner { 0% { opacity: 1; } 100% { opacity: 0; } } .compilation__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; } @media only screen and (max-width: 1419px) { .compilation__head { margin-bottom: 3rem; } } @media only screen and (max-width: 767px) { .compilation__head { margin-bottom: 2.5rem; } } .compilation__item { display: block; margin-top: 3rem; color: #F7FBFA; transition: color 0.2s; } .compilation__item:hover { color: #C5DC45; } .compilation__item:hover .compilation__picture { -webkit-transform: scale(1.05); transform: scale(1.05); } .compilation__preview { position: relative; height: 22.5rem; margin-bottom: 2rem; border-radius: 1.25rem; overflow: hidden; } @media only screen and (max-width: 767px) { .compilation__preview { margin-bottom: 1rem; } } .compilation__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .compilation__picture { border-radius: 1.25rem; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .compilation__category { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; align-items: center; padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: 0.75rem; background: rgba(32, 32, 37, 0.75); font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } .compilation__image { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .compilation__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } .compilation__details { display: flex; align-items: flex-start; } .compilation__details .balance { margin: 0.3125rem 0 0 auto; } @media only screen and (max-width: 1259px) { .compilation__details .balance { display: none; } } @media only screen and (max-width: 1023px) { .compilation__details .balance { display: flex; } } @media only screen and (max-width: 767px) { .compilation__details .balance { display: none; } } .compilation__details .users { margin-left: 1.25rem; } @media only screen and (max-width: 767px) { .compilation__details .users { display: none; } } .compilation__title { margin-right: auto; padding-right: 1rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 767px) { .compilation__title { padding-right: 0; } } .compilation__floor { flex-shrink: 0; margin: 0.3125rem 0 0 1.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .compilation__floor span { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } .balance { display: flex; align-items: center; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F3F380; } .balance .icon { margin-right: 0.25rem; fill: #F3F380; } .balance.negative { color: #FD5D47; } .balance.negative .icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); fill: #FD5D47; } @media only screen and (max-width: 767px) { .owners { margin-top: -2rem; } } .follower { display: flex; align-items: center; padding: 2rem 0; border-bottom: 0.0625rem solid #202025; } .follower .follow { margin-left: 0.75rem; } @media only screen and (max-width: 1419px) { .follower .follow { margin-left: 0; } } @media only screen and (max-width: 767px) { .follower .follow { width: 3.25rem; min-width: 3.25rem; padding: 0; font-size: 0; } .follower .follow .icon { margin: 0; } } .follower__user { display: flex; align-items: center; flex: 0 0 calc(100% - 18.75rem); width: calc(100% - 18.75rem); } @media only screen and (max-width: 1419px) { .follower__user { flex: 0 0 calc(100% - 18rem); width: calc(100% - 18rem); } } @media only screen and (max-width: 1259px) { .follower__user { flex: 0 0 calc(100% - 10rem); width: calc(100% - 10rem); padding-right: 1.25rem; } } @media only screen and (max-width: 1023px) { .follower__user { flex: 0 0 calc(100% - 18rem); width: calc(100% - 18rem); } } @media only screen and (max-width: 767px) { .follower__user { flex: 0 0 calc(100% - 3.25rem); width: calc(100% - 3.25rem); } } .follower__avatar { position: relative; flex-shrink: 0; width: 5rem; height: 5rem; border: 0.25rem solid #010101; border-radius: 50%; } .follower__avatar img { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .follower__avatar:after { content: ""; position: absolute; top: -0.25rem; left: -0.25rem; right: -0.25rem; bottom: -0.25rem; z-index: 1; border: 0.0625rem solid #555555; border-radius: 50%; } .follower__avatar.history:after { border: none; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); } .follower__avatar.history:before { content: ""; position: absolute; top: -0.1875rem; left: -0.1875rem; right: -0.1875rem; bottom: -0.1875rem; z-index: 2; background: #010101; border-radius: 50%; } .follower__details { flex: 0 0 calc(100% - 5rem); width: calc(100% - 5rem); padding-left: 1.25rem; } .follower__name { margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 1419px) { .follower__name { font-size: 1.25rem; line-height: 1.5rem; } } .follower__login { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .follower__button { border-color: #555555; } .follower__created { flex-shrink: 0; width: 8rem; margin-right: auto; text-align: center; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } @media only screen and (max-width: 1419px) { .follower__created { padding-right: 0.5rem; } } @media only screen and (max-width: 1259px) { .follower__created { display: none; } } @media only screen and (max-width: 1023px) { .follower__created { display: block; } } @media only screen and (max-width: 767px) { .follower__created { display: none; } } .follower__text { margin-bottom: 0.5rem; color: #686A6C; } .follower__crypto { color: #F3F380; } .followers__head { display: flex; justify-content: space-between; margin-bottom: 4rem; } @media only screen and (max-width: 1579px) { .followers__head { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 1419px) { .followers__head { margin-bottom: 2.5rem; font-size: 2rem; line-height: 2.5rem; } } @media only screen and (max-width: 767px) { .followers__head { margin-bottom: 0; } } .followers__title { color: #F7FBFA; } .followers__counter { color: #686A6C; } .followers__list { max-height: 45.3125rem; margin-right: -4rem; padding-right: 3.5rem; overflow: auto; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 1579px) { .followers__list { margin-right: -3rem; padding-right: 2.5rem; } } @media only screen and (max-width: 1419px) { .followers__list { margin-right: -1.5rem; padding-right: 1rem; } } @media only screen and (max-width: 1023px) { .followers__list { padding-right: 1.5rem; } } .followers__list::-webkit-scrollbar { width: 0.5rem; } .followers__list::-webkit-scrollbar-track { background-color: #202025; border: 0.125rem solid #202025; border-radius: 0.25rem; } .followers__list::-webkit-scrollbar-thumb { background-color: #010101; border: 0.125rem solid #202025; border-radius: 0.25rem; } .notification { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .notification { display: block; min-height: auto; } } .notification__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .notification__col { width: 100%; } } .notification__filters { position: sticky; top: 0; padding: 5rem; } @media only screen and (max-width: 1579px) { .notification__filters { padding: 4rem; } } @media only screen and (max-width: 1419px) { .notification__filters { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .notification__filters { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .notification__filters { padding: 2.5rem 1.5rem; } } .notification__filters .notification__title { margin-bottom: 3rem; } .notification__list { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -2rem -0.625rem 0; } .notification .checkbox { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 2rem 0.625rem 0; } .notification__btns { display: flex; margin: 5rem -0.625rem 0; } @media only screen and (max-width: 1419px) { .notification__btns { margin-top: 4rem; } } @media only screen and (max-width: 1259px) { .notification__btns { margin-top: 2.5rem; } } .notification__btns .notification__button { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 0 0.625rem; padding: 0 1rem; } .notification__preview { display: none; padding: 5rem; } @media only screen and (max-width: 1579px) { .notification__preview { padding: 4rem; } } @media only screen and (max-width: 1419px) { .notification__preview { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .notification__preview { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .notification__preview { padding: 1.5rem; } } .notification__image { margin-bottom: 2.5rem; } @media only screen and (max-width: 767px) { .notification__image { margin-bottom: 2rem; } } .notification__image img { width: 100%; border-radius: 1.25rem; } .notification__head { display: flex; justify-content: space-between; margin-bottom: 1.25rem; } @media only screen and (max-width: 767px) { .notification__head { display: block; } } .notification__preview .notification__title { margin-right: 2rem; } @media only screen and (max-width: 767px) { .notification__preview .notification__title { margin: 0 0 0.5rem; font-size: 2.5rem; line-height: 3rem; } } .notification .timer { display: flex; } .notification .timer li { display: flex; } .notification .timer li:not(:last-child) { margin-right: 1.25rem; } @media only screen and (max-width: 1419px) { .notification .timer__value { font-size: 2.5rem; line-height: 3rem; } } .notification .timer__text { margin-left: 0.25rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } .notification__foot { display: flex; justify-content: space-between; align-items: center; } .notification__item { display: flex; align-items: center; } .notification__photo { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; margin-right: 1rem; } .notification__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } .notification__subtitle { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .notification__crypto { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .notification__lines { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; margin-left: 1.5rem; } .notification__lines span { height: 0.75rem; background: #E1E2E2; border-radius: 0.25rem; } .notification__lines span:nth-child(1) { width: 5.5rem; margin-bottom: 0.75rem; } @media only screen and (max-width: 767px) { .notification__lines span:nth-child(1) { width: 4.125rem; } } .notification__lines span:nth-child(2) { width: 8rem; } @media only screen and (max-width: 767px) { .notification__lines span:nth-child(2) { width: 5.5rem; } } .notifications__title { margin-bottom: 2.5rem; color: #F7FBFA; } .notifications__box { margin-top: 2.5rem; } .notifications__month { margin-bottom: 1.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .notifications__month { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .notifications__group { margin: 0 -5rem; } @media only screen and (max-width: 1579px) { .notifications__group { margin: 0 -4rem; } } @media only screen and (max-width: 1419px) { .notifications__group { margin: 0 -2.5rem; } } @media only screen and (max-width: 1023px) { .notifications__group { margin: 0 -1.5rem; } } .notifications__item { position: relative; display: flex; align-items: center; padding: 2rem 5rem; transition: background 0.2s; } @media only screen and (max-width: 1579px) { .notifications__item { padding: 2rem 4rem; } } @media only screen and (max-width: 1419px) { .notifications__item { padding: 2rem 2.5rem; } } @media only screen and (max-width: 1023px) { .notifications__item { padding: 2rem 1.5rem; } } .notifications__item:after { content: ""; position: absolute; left: 5rem; right: 5rem; bottom: 0; height: 0.0625rem; background: #202025; } @media only screen and (max-width: 1579px) { .notifications__item:after { left: 4rem; right: 4rem; } } @media only screen and (max-width: 1419px) { .notifications__item:after { left: 2.5rem; right: 2.5rem; } } @media only screen and (max-width: 1023px) { .notifications__item:after { left: 1.5rem; right: 1.5rem; } } .notifications__item:hover { background: #202025; } .notifications__item .follow { flex-shrink: 0; margin-left: 1.5rem; } @media only screen and (max-width: 1259px) { .notifications__item .follow { min-width: 3.25rem; padding: 0; font-size: 0; } .notifications__item .follow .icon { margin: 0; } } @media only screen and (max-width: 1023px) { .notifications__item .follow { min-width: 10rem; font-size: 0.75rem; } .notifications__item .follow .icon { margin-left: 0.5rem; } } @media only screen and (max-width: 767px) { .notifications__item .follow { min-width: 3rem; font-size: 0; } .notifications__item .follow .icon { margin: 0; } } .notifications__avatar { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; margin-right: 2rem; } @media only screen and (max-width: 767px) { .notifications__avatar { width: 4rem; height: 4rem; margin-right: 1.5rem; } } .notifications__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .notifications__details { flex-grow: 1; } .notifications__content { margin-bottom: 0.25rem; word-break: break-word; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 767px) { .notifications__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .notifications__content span { margin-right: 0.3125rem; color: #A6AEAD; } @media only screen and (max-width: 767px) { .notifications__content span { display: block; margin-right: 0; } } .notifications__date { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .offer__title { margin-bottom: 4rem; color: #F7FBFA; } @media only screen and (max-width: 1579px) { .offer__title { margin-bottom: 3rem; } } @media only screen and (max-width: 1023px) { .offer__title { margin-bottom: 2rem; } } .offer__box { padding: 3rem 2.5rem 4rem; background: #202025; border-radius: 1.5rem; } @media only screen and (max-width: 1419px) { .offer__box { padding: 2.5rem 2rem; } } @media only screen and (max-width: 1259px) { .offer__box { padding: 2rem; } } @media only screen and (max-width: 767px) { .offer__box { padding: 1.5rem; } } .offer__user { display: flex; align-items: center; margin-bottom: 3rem; } @media only screen and (max-width: 767px) { .offer__user { margin-bottom: 1.5rem; } } .offer__avatar { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; margin-right: 2rem; } @media only screen and (max-width: 767px) { .offer__avatar { width: 5rem; height: 5rem; margin-right: 1.5rem; } } .offer__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .offer__details { flex-grow: 1; } .offer__line { display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 767px) { .offer__code { display: none; } } .offer__login { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #F7FBFA; } .offer__subtitle { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .offer__item { display: flex; align-items: center; padding: 1.5rem 0; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .offer__item:not(:last-child) { border-bottom: 0.0625rem solid rgba(85, 85, 85, 0.5); } .offer__price { color: #F7FBFA; } .offer__price:nth-child(1) { margin-right: auto; } .offer__label { margin-right: auto; color: #686A6C; } .offer__value { color: #F7FBFA; } .offer__percent { margin-right: 1rem; color: #A6AEAD; } .offer__button { margin-top: 2.5rem; } .checkbox { position: relative; display: flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .checkbox:hover .checkbox__tick { border-color: #202025; } .checkbox__input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; } .checkbox__input:checked + .checkbox__inner .checkbox__tick { background: #202025; border-color: #202025; } .checkbox__input:checked + .checkbox__inner .checkbox__tick:before { opacity: 1; } .checkbox__inner { display: flex; align-items: flex-start; width: 100%; } .checkbox__tick { position: relative; flex-shrink: 0; width: 2rem; height: 2rem; margin: 0.125rem 1.25rem 0 0; border-radius: 0.5rem; border: 0.125rem solid #E1E2E2; background: transparent; transition: background 0.2s, border-color 0.2s; } .checkbox__tick:before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.1875rem; height: 0.75rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='14' viewBox='0 0 19 14'%3E%3Cpath d='M18.276.391c.521.521.521 1.365 0 1.886L7.609 12.943c-.521.521-1.365.521-1.886 0L.391 7.609c-.521-.521-.521-1.365 0-1.886s1.365-.521 1.886 0l4.391 4.391L16.391.391c.521-.521 1.365-.521 1.886 0z' fill='%23f7fbfa' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto; opacity: 0; transition: opacity 0.2s; } .checkbox__label { padding-top: 0.4375rem; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #202025; } .discover__slide { position: relative; display: flex; align-items: flex-end; min-height: calc(100vh - 6rem); background: #F7FBFA; box-sizing: border-box; } @media only screen and (max-width: 1023px) { .discover__slide { min-height: 37.5rem; } } @media only screen and (max-width: 767px) { .discover__slide { min-height: calc(100vh - 5.5rem); } } .discover__slide:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.41%, rgba(0, 0, 0, 0.54) 100%); } .discover__slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .discover__row { position: relative; z-index: 2; display: flex; width: 100%; padding: 5rem; } @media only screen and (max-width: 1579px) { .discover__row { padding: 4rem; } } @media only screen and (max-width: 1419px) { .discover__row { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .discover__row { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .discover__row { padding: 1.5rem; } } .discover__details { width: 100%; max-width: 41.5rem; margin-right: auto; } @media only screen and (max-width: 1259px) { .discover__details { flex-grow: 1; max-width: 37.5rem; padding-right: 2.5rem; } } @media only screen and (max-width: 1023px) { .discover__details { max-width: 100%; padding-right: 0; } } .discover__head { display: flex; align-items: flex-end; margin-bottom: 2.5rem; } @media only screen and (max-width: 1259px) { .discover__head { align-items: flex-start; } } @media only screen and (max-width: 767px) { .discover__head { display: block; } } .discover__title { margin-right: auto; color: #F7FBFA; } @media only screen and (max-width: 1259px) { .discover__title { padding-top: 0.5rem; font-size: 3rem; } } @media only screen and (max-width: 767px) { .discover__title { padding-top: 0; } } .discover__author { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0 0 0.5rem 1.5rem; padding: 0.75rem; background: #010101; border-radius: 0.75rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 1259px) { .discover__author { margin-bottom: 0; } } @media only screen and (max-width: 767px) { .discover__author { margin: 0.75rem 0 0; } } .discover__avatar { position: relative; width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .discover__avatar img { border-radius: 0.5rem; } .discover__btns { display: flex; margin: 0 -0.75rem; } .discover__button { flex: 1 1 auto; margin: 0 0.75rem; } @media only screen and (max-width: 767px) { .discover__button { padding: 0 0.5rem; } } .discover__box { flex-shrink: 0; width: 40.25rem; padding: 2.5rem 2.5rem; border-radius: 1.5rem; box-shadow: 0 1rem 2.5rem -0.5rem rgba(0, 0, 0, 0.12); background: #F7FBFA; } @media only screen and (max-width: 1419px) { .discover__box { width: 22.5rem; padding: 1.25rem 1.5rem; } } @media only screen and (max-width: 1259px) { .discover__box { width: 20rem; } } @media only screen and (max-width: 1023px) { .discover__box { display: none; } } .discover__info { margin-bottom: 0.75rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .discover .timer { display: flex; } .discover .timer li { display: flex; flex-direction: column; flex: 1 1 auto; } .discover .timer li:not(:last-child) { margin-right: 1.5rem; } .discover .timer__value { min-height: 3rem; } @media only screen and (max-width: 1419px) { .discover .timer__value { font-size: 3rem; line-height: 3rem; } } .discover .timer__text { margin-top: 0.5rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; color: #686A6C; } .filters { display: none; margin: 5rem 0 3.5rem; } @media only screen and (max-width: 1419px) { .filters { margin-top: 4rem; } } @media only screen and (max-width: 1023px) { .filters { margin: 2rem 0; } } .filters .form { width: 43.75rem; } @media only screen and (max-width: 1259px) { .filters .form { width: 27.5rem; } } @media only screen and (max-width: 1023px) { .filters .form { width: 100%; } } .filters .form .field__input { height: 5rem; } @media only screen and (max-width: 767px) { .filters .form .field__input { height: 4.5rem; font-size: 1rem; line-height: 1.5rem; } } .filters__head { display: flex; align-items: center; margin-bottom: 5rem; } @media only screen and (max-width: 1419px) { .filters__head { margin-bottom: 4rem; } } @media only screen and (max-width: 1023px) { .filters__head { display: block; margin-bottom: 2rem; } } .filters__title { margin-right: auto; transition: color 0.2s; } @media only screen and (max-width: 1023px) { .filters__title { margin: 0 0 1rem; } } .filters__row { display: flex; margin: 0 -1.25rem; } @media only screen and (max-width: 1259px) { .filters__row { display: block; margin: 0; } } .filters__col { flex: 0 0 calc(50% - 2.5rem); width: calc(50% - 2.5rem); margin: 0 1.25rem; } @media only screen and (max-width: 1259px) { .filters__col { width: 100%; margin: 0; } } @media only screen and (max-width: 1259px) { .filters__col:not(:last-child) { margin-bottom: 1.5rem; } } .filters__label { margin-bottom: 2rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; transition: color 0.2s; } @media only screen and (max-width: 1259px) { .filters__label { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.5rem; } } .filters__statuses { display: flex; flex-wrap: wrap; margin: -1rem 0 0 -1rem; } .filters__status { display: flex; justify-content: center; align-items: center; min-width: calc(25% - 1rem); height: 3.75rem; margin: 1rem 0 0 1rem; padding: 0 1rem; border: 0.125rem solid #E1E2E2; border-radius: 0.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: all 0.2s; } @media only screen and (max-width: 1419px) { .filters__status { min-width: calc(33% - 1rem); } } @media only screen and (max-width: 1259px) { .filters__status { min-width: calc(25% - 1rem); } } @media only screen and (max-width: 767px) { .filters__status { min-width: calc(50% - 1rem); } } .filters__status:hover { border-color: #202025; } .filters__status:hover .filters__check { border-color: #202025; } .filters__status.active { border-color: #C5DC45; } .filters__status.active .filters__check { background: #202025; border-color: #202025; } .filters__status.active .filters__check .icon { fill: #F7FBFA; } .filters__check { display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border: 0.125rem solid #E1E2E2; border-radius: 50%; transition: background 0.2s, border-color 0.2s; } .filters__check .icon { width: 1rem; height: 1rem; fill: transparent; transition: fill 0.2s; } .filters__fieldset { display: flex; margin: 0 -0.5rem; } .filters__fieldset .filters__field, .filters__button { flex: 0 0 calc(33.333% - 1rem); width: calc(33.333% - 1rem); margin: 0 0.5rem; } .filters__input { width: 100%; height: 3.75rem; padding: 0 1rem; border: 0.125rem solid #E1E2E2; border-radius: 0.25rem; text-align: center; background: transparent; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: border-color 0.2s; } .filters__input::-webkit-input-placeholder { color: #A6AEAD; } .filters__input::-moz-placeholder { color: #A6AEAD; } .filters__input:-ms-input-placeholder { color: #A6AEAD; } .filters__input::-ms-input-placeholder { color: #A6AEAD; } .filters__input::placeholder { color: #A6AEAD; } .filters__input:focus-visible { border-color: #C5DC45; } .form { position: relative; flex-shrink: 0; width: 100%; } .form .field { width: 100%; } .form .field__input { height: 5.5rem; padding-left: 2.75rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 767px) { .form .field__input { height: 3.75rem; font-size: 1.25rem; line-height: 1.5rem; } } .form__button { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; transition: background 0.2s; } .form__button .icon { width: 2rem; height: 2rem; fill: #686A6C; transition: fill 0.2s; } @media only screen and (max-width: 767px) { .form__button .icon { width: 1.5rem; height: 1.5rem; } } .form__button:hover .icon { fill: #010101; } .form_button-right .field__input { padding: 0 3.5rem 0 0; } @media only screen and (max-width: 767px) { .form_button-right .field__input { padding: 0 2.5rem 0 0; } } .form_button-right .form__button { left: auto; right: 0; } .card { display: block; padding: 1.25rem; border-radius: 1.5rem; color: #202025; transition: background 0.2s, color 0.2s; } @media only screen and (max-width: 1259px) { .card { padding: 0; border-radius: 0; } } @media only screen and (min-width: 1260px) { .card:hover { background: #202025; color: #F7FBFA; } .card:hover .card__preview:after, .card:hover .card__title, .card:hover .card__category { opacity: 1; } .card:hover .card__user { border-color: #555555; } .card:hover .card__foot:before { background: #555555; } } .card__preview { position: relative; margin-bottom: 1.5rem; border-radius: 1.25rem; overflow: hidden; } .card__preview:before { content: ""; display: block; padding-bottom: 100%; } .card__preview:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 43.33%, rgba(0, 0, 0, 0.5) 100%); opacity: 0; transition: opacity 0.2s; } .card__photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .card__category { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: flex; align-items: center; padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: 0.75rem; background: #F7FBFA; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #010101; opacity: 0; transition: opacity 0.2s; } .card__image { position: relative; width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .card__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } .card__title { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; z-index: 2; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #F7FBFA; opacity: 0; transition: opacity 0.2s; } .card__user { display: flex; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.0625rem solid #E1E2E2; transition: border-color 0.2s; } .card__avatar { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin-right: 0.75rem; } .card__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .card__login { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .card__verified { flex-shrink: 0; width: 1.5rem; margin-left: 1.25rem; font-size: 0; } .card__foot { position: relative; display: flex; justify-content: space-between; } /* .card__foot:before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.0625rem; height: 1.5rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #D9D9D9; transition: background 0.2s; } */ /* .card__box:nth-child(1) .card__text { position: relative; padding-left: 1rem; } */ /* .card__box:nth-child(1) .card__text:before { content: ""; position: absolute; top: 50%; left: 0; width: 0.5rem; height: 0.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; background: #FD5D47; } */ .card__box:nth-child(2) { text-align: right; } .card__text { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .card__price { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1579px) { .card__price { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .catalog { transition: background 0.2s; } .catalog__sorting { display: flex; align-items: center; padding: 0 5rem; border-bottom: 0.0625rem solid #E1E2E2; transition: border-color 0.2s; } @media only screen and (max-width: 1579px) { .catalog__sorting { padding: 0 4rem; } } @media only screen and (max-width: 1419px) { .catalog__sorting { padding: 0 2.5rem; } } @media only screen and (max-width: 1023px) { .catalog__sorting { padding: 0 1.5rem; } } @media only screen and (max-width: 767px) { .catalog__sorting { position: relative; } } .catalog__select { margin-right: auto; } @media only screen and (max-width: 1023px) { .catalog__select { position: relative; margin-left: -1.5rem; z-index: 3; } .catalog__select.visible .catalog__top .icon { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .catalog__select.visible .catalog__tabs { visibility: visible; opacity: 1; } .catalog__select.visible .catalog__tabs { visibility: visible; opacity: 1; } } @media only screen and (max-width: 767px) { .catalog__select { position: static; flex-grow: 1; } } .catalog__top { display: none; } @media only screen and (max-width: 1023px) { .catalog__top { position: relative; display: inline-flex; align-items: center; height: 5.75rem; padding: 0 2.5rem 0 1.5rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #202025; } } @media only screen and (max-width: 767px) { .catalog__top { width: 100%; } } .catalog__top .icon { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #202025; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .catalog__value { display: inline-flex; align-items: center; } .catalog__tabs { display: flex; align-items: center; margin-bottom: -0.0625rem; } @media only screen and (max-width: 1023px) { .catalog__tabs { position: absolute; top: calc(100% + 0.0625rem); left: 0; display: block; width: 22.5rem; padding: 0 0 1rem; border-radius: 0 0 1.5rem 1.5rem; background: #F7FBFA; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); visibility: hidden; opacity: 0; transition: all 0.2s; } } @media only screen and (max-width: 767px) { .catalog__tabs { right: 0; width: auto; } } .catalog__tab { display: flex; align-items: center; height: 6rem; padding: 0 4rem; border-bottom: 0.0625rem solid transparent; color: #202025; transition: border-color 0.2s, color 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (max-width: 1419px) { .catalog__tab { padding: 0 2.25rem; } } @media only screen and (max-width: 1023px) { .catalog__tab { width: 100%; height: 4rem; padding: 0 1.5rem; border: none; } } .catalog__tab:hover { color: #C5DC45; } @media only screen and (max-width: 1023px) { .catalog__tab:hover { color: #202025; } } .catalog__tab.active { border-color: #202025; color: #202025; } @media only screen and (max-width: 1023px) { .catalog__tab.active { color: #C5DC45; } } .catalog__subtitle { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; display: flex; align-items: center; } .catalog__subtitle span { background: #E1E2E2; border-radius: 8px; font-weight: 700; display: inline-block; padding: 5px 13px; margin-left: 15px; text-align: center; font-size: 16px; line-height: 24px; letter-spacing: -1%; color: #686A6C; } .catalog__counter { margin-left: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: #E1E2E2; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .catalog__theme { flex-shrink: 0; width: 3rem; height: 3rem; margin-left: 2.5rem; border: 0.125rem solid #E1E2E2; border-radius: 50%; font-size: 0; transition: background 0.2s, border-color 0.2s; } @media only screen and (max-width: 767px) { .catalog__theme { margin-left: 1.875rem; } } .catalog__theme .icon { fill: #686A6C; transition: fill 0.2s; } .catalog__theme .icon-sun { display: none; } .catalog__theme:hover, .catalog__theme.active { border-color: #202025; } .catalog__theme:hover .icon { fill: #202025; } .catalog__theme.active { background: #202025; border-color: #202025; } .catalog__theme.active .icon { fill: #F7FBFA; } .catalog__theme.active .icon-moon { display: none; } .catalog__theme.active .icon-sun { display: inline-block; } .catalog__theme.active:hover { background: transparent; } .catalog__toggle { margin-left: 4.375rem; flex-shrink: 0; width: 3rem; height: 3rem; border: 0.125rem solid #E1E2E2; border-radius: 50%; font-size: 0; transition: background 0.2s, border-color 0.2s; } @media only screen and (max-width: 1259px) { .catalog__toggle { margin-left: 2.5rem; } } @media only screen and (max-width: 1023px) { .catalog__toggle { margin-left: auto; } } .catalog__toggle .icon { fill: #686A6C; transition: fill 0.2s; } .catalog__toggle .icon-close { display: none; } .catalog__toggle:hover, .catalog__toggle.active { border-color: #202025; } .catalog__toggle:hover .icon { fill: #202025; } .catalog__toggle.active { background: #202025; border-color: #202025; } .catalog__toggle.active .icon { fill: #F7FBFA; } .catalog__toggle.active .icon-filter-1 { display: none; } .catalog__toggle.active .icon-close { display: inline-block; } .catalog__wrapper { padding: 8rem 5rem; } @media only screen and (max-width: 1579px) { .catalog__wrapper { padding: 4rem; } } @media only screen and (max-width: 1419px) { .catalog__wrapper { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .catalog__wrapper { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .catalog__wrapper { padding: 2.5rem 1.5rem; } } .catalog__head { display: flex; align-items: center; margin-bottom: 2.75rem; } @media only screen and (max-width: 1023px) { .catalog__head { margin-bottom: 2rem; flex-wrap: wrap; } } @media only screen and (max-width: 767px) { .catalog__head { align-items: flex-start; } } .catalog .tabs { margin-left: auto; } @media only screen and (max-width: 1023px) { .catalog .tabs { order: 3; flex: 0 0 100%; margin: 1.5rem 0 0; } } .catalog__title { margin-right: 2.5rem; transition: color 0.2s; } @media only screen and (max-width: 1023px) { .catalog__title { flex: 0 0 calc(100% - 3rem); margin-right: 0; padding-right: 2rem; } } @media only screen and (max-width: 767px) { .catalog__title { font-size: 2.5rem; line-height: 3rem; } } .catalog__list { display: flex; flex-wrap: wrap; margin: -1.5rem -1.25rem 0; } @media only screen and (max-width: 1259px) { .catalog__list { margin: -3rem -0.625rem 0; } } @media only screen and (max-width: 767px) { .catalog__list { display: block; margin: 0; } } .catalog .card { flex: 0 0 25%; width: 25%; margin-top: 1.5rem; } @media only screen and (max-width: 1259px) { .catalog .card { flex: 0 0 calc(33.333% - 1.25rem); width: calc(33.333% - 1.25rem); margin: 3rem 0.625rem 0; } } @media only screen and (max-width: 1023px) { .catalog .card { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); } } @media only screen and (max-width: 767px) { .catalog .card { width: 100%; margin: 2.5rem 0 0; } } .catalog__btns { margin-top: 2.5rem; text-align: center; } .catalog.dark { background: #010101; } .catalog.dark .catalog__sorting { border-color: #202025; } .catalog.dark .catalog__top { color: #F7FBFA; } .catalog.dark .catalog__top svg { fill: #A6AEAD; } .catalog.dark .catalog__tab { color: #A6AEAD; } .catalog.dark .catalog__tab:hover, .catalog.dark .catalog__tab.active { color: #F7FBFA; } .catalog.dark .catalog__tab.active { border-color: #F7FBFA; } .catalog.dark .catalog__counter { background: #202025; color: #A6AEAD; } @media only screen and (max-width: 1023px) { .catalog.dark .catalog__tabs { background: #010101; } } .catalog.dark .catalog__title { color: #F7FBFA; } .catalog.dark .catalog__toggle { border-color: #202025; background: #202025; } .catalog.dark .catalog__toggle .icon { fill: #F7FBFA; } .catalog.dark .catalog__toggle:hover { background: transparent; } .catalog.dark .catalog__toggle.active { background: #202025; } .catalog.dark .tabs__button:hover { color: #F7FBFA; } .catalog.dark .tabs__button.active { background: #F7FBFA; color: #202025; } .catalog.dark .filters__title { color: #F7FBFA; } .catalog.dark .filters__label { color: #E1E2E2; } .catalog.dark .filters__input { border-color: #555555; color: #F7FBFA; } .catalog.dark .filters__input:focus-visible { border-color: #F7FBFA; } .catalog.dark .filters__status { border-color: #555555; color: #E1E2E2; } .catalog.dark .filters__status .filters__check { border-color: #686A6C; } .catalog.dark .filters__status:hover { border-color: #A6AEAD; } .catalog.dark .filters__status:hover .filters__check { border-color: #A6AEAD; } .catalog.dark .filters__status.active { border-color: #F7FBFA; } .catalog.dark .filters__status.active .filters__check { background: #F7FBFA; border-color: #202025; } .catalog.dark .filters__status.active .filters__check .icon { fill: #202025; } .catalog.dark .filters__button { background: #F7FBFA; border-color: #F7FBFA; color: #202025; } .catalog.dark .filters__button:hover { background: #F7FBFA; border-color: #F7FBFA; color: #C5DC45; } .catalog.dark .form .field__input { border-color: #555555; color: #F7FBFA; } .catalog.dark .form .field__input::-webkit-input-placeholder { color: #686A6C; } .catalog.dark .form .field__input::-moz-placeholder { color: #686A6C; } .catalog.dark .form .field__input:-ms-input-placeholder { color: #686A6C; } .catalog.dark .form .field__input::-ms-input-placeholder { color: #686A6C; } .catalog.dark .form .field__input::placeholder { color: #686A6C; } .catalog.dark .form .field__input:focus { border-color: #A6AEAD; } .catalog.dark .form .form__button:hover .icon { fill: #F7FBFA; } .catalog.dark .card { color: #F7FBFA; } .catalog.dark .card__user { border-color: #555555; } .catalog.dark .card__foot:before { background: #555555; } .catalog.dark .catalog__button { background: transparent; border-color: #F7FBFA; color: #F7FBFA; } .catalog.dark .catalog__button:hover { background: #F7FBFA; border-color: #F7FBFA; color: #010101; } .most { padding: 8rem 5rem; overflow: hidden; } @media only screen and (max-width: 1579px) { .most { padding: 4rem; } } @media only screen and (max-width: 1419px) { .most { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1023px) { .most { padding: 3rem 1.5rem; } } .most__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3.75rem; } @media only screen and (max-width: 1023px) { .most__head { display: block; } } .most__head .tabs { flex-shrink: 0; margin-left: 2.5rem; } @media only screen and (max-width: 1023px) { .most__head .tabs { margin: 1.5rem 0 0; } } .most__title { max-width: 37.5rem; } @media only screen and (max-width: 1023px) { .most__title { max-width: 100%; } } .most__collections { display: flex; flex-wrap: wrap; margin: -2.5rem -1.25rem 0; } @media only screen and (max-width: 1259px) { .most__collections { margin: -2.5rem -0.75rem 0; } } @media only screen and (max-width: 767px) { .most__collections { display: block; margin: 0; } } .most__collection { display: block; flex: 0 0 calc(50% - 2.5rem); width: calc(50% - 2.5rem); margin: 2.5rem 1.25rem 0; padding: 0.5rem; border: 0.0625rem solid #E1E2E2; background: #F7FBFA; border-radius: 2rem; color: #202025; transition: background 0.2s, border-color 0.2s, color 0.2s; } @media only screen and (max-width: 1259px) { .most__collection { flex: 0 0 calc(50% - 1.5rem); width: calc(50% - 1.5rem); margin: 2.5rem 0.75rem 0; padding: 0; border: none; border-radius: 0; } } @media only screen and (max-width: 767px) { .most__collection { width: 100%; margin: 3rem 0 0; } } @media only screen and (min-width: 1260px) { .most__collection:hover { background: #202025; border-color: #202025; color: #F7FBFA; } .most__collection:hover .most__price { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); } } .most__images { margin-top: -0.5rem; } @media only screen and (max-width: 1259px) { .most__images { display: flex; flex-wrap: wrap; margin: -0.5rem -0.25rem 0; } } .most__images:after { content: ""; display: table; clear: both; } @media only screen and (max-width: 1259px) { .most__images:after { display: none; } } .most__image { position: relative; margin-top: 0.5rem; } @media only screen and (max-width: 1259px) { .most__image { flex: 0 0 calc(33.333% - 0.5rem); width: calc(33.333% - 0.5rem); margin: 0.5rem 0.25rem 0; } .most__image:nth-child(1) { flex: 0 0 calc(100% - 0.5rem); width: calc(100% - 0.5rem); } } .most__image:before { content: ""; display: block; padding-bottom: 88.5%; } @media only screen and (max-width: 1259px) { .most__image:before { padding-bottom: 100%; } } .most__image { position: relative; overflow: hidden; border-radius: 1.25rem; } .most__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .most__image:nth-child(1) { float: left; width: 72.435%; border-radius: 1.5rem; } @media only screen and (max-width: 1259px) { .most__image:nth-child(1) { float: none; width: calc(100% - 0.5rem); } } .most__image:nth-child(1):before { padding-bottom: 100%; } .most__image:nth-child(1) img { border-radius: 1.5rem; } .most__image:not(:nth-child(1)) { float: right; width: calc(27.565% - 0.5rem); margin-left: 0.5rem; } @media only screen and (max-width: 1259px) { .most__image:not(:nth-child(1)) { float: none; width: calc(33.333% - 0.5rem); margin-left: 0.25rem; } } .most__counter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } .most__details { display: flex; justify-content: space-between; align-items: center; padding: 2rem 2rem 1.5rem; } @media only screen and (max-width: 1259px) { .most__details { padding: 2rem 0 1.5rem; } } @media only screen and (max-width: 1023px) { .most__details { padding: 1.5rem 0 0; } } .most__box:nth-child(2) { flex-shrink: 0; margin-left: 1.25rem; text-align: right; } @media only screen and (max-width: 1023px) { .most__box:nth-child(2) { padding-top: 0.375rem; } } .most__subtitle { margin-bottom: 0.75rem; } @media only screen and (max-width: 1023px) { .most__subtitle { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .most__author { display: flex; align-items: center; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 1023px) { .most__author { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .most__avatar { position: relative; flex-shrink: 0; width: 2rem; height: 2rem; margin-right: 0.75rem; } .most__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .most__text { margin-bottom: 0.75rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1023px) { .most__text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } } .most__price { color: #202025; } @media only screen and (max-width: 1023px) { .most__price { font-size: 1.5rem; line-height: 2rem; } } .artists { display: flex; } @media only screen and (max-width: 1023px) { .artists { display: block; } } .artists__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .artists__col { width: 100%; } } .artists__col:nth-child(1) { background: #B9A9FB; } .artists__col:nth-child(2) { padding: 5rem; border-top: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 1579px) { .artists__col:nth-child(2) { padding: 4rem; } } @media only screen and (max-width: 1419px) { .artists__col:nth-child(2) { padding: 0 2.5rem 4rem; } } @media only screen and (max-width: 1023px) { .artists__col:nth-child(2) { padding: 1.5rem 1.5rem 2.5rem; } } .artists__wrap { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; max-height: 100vh; height: 100%; padding: 8rem 5rem; } @media only screen and (max-width: 1579px) { .artists__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .artists__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1023px) { .artists__wrap { padding: 3rem 1.5rem; } } .artists__head { display: flex; margin-bottom: 4rem; } @media only screen and (max-width: 1023px) { .artists__head { margin-bottom: 2rem; } } .artists__title { flex-grow: 1; } .artists__link { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 5rem; height: 5rem; margin-left: 1.5rem; border: 0.0625rem solid #F1F4F4; border-radius: 50%; background: #F7FBFA; box-shadow: 0 1.25rem 1rem -0.375rem rgba(0, 0, 0, 0.15); } .artists__link .icon { fill: #010101; transition: fill 0.2s; } .artists__link:hover .icon { fill: #C5DC45; } .artists__content { max-width: 31.5625rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; } @media only screen and (max-width: 1023px) { .artists__content { max-width: 100%; } } .artists__list { margin: 0 -5rem; } @media only screen and (max-width: 1579px) { .artists__list { margin: 0 -4rem; } } @media only screen and (max-width: 1419px) { .artists__list { margin: 0 -2.5rem; } } @media only screen and (max-width: 1023px) { .artists__list { margin: 0 -1.5rem; } } .artists__item { display: flex; align-items: center; padding: 1.3125rem 5rem; border-bottom: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 1579px) { .artists__item { padding: 1.3125rem 4rem; } } @media only screen and (max-width: 1419px) { .artists__item { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .artists__item { padding: 1.5rem; } } .artists__item:not(:last-child) { margin-bottom: 3rem; } @media only screen and (max-width: 1419px) { .artists__item:not(:last-child) { margin-bottom: 0; } } .artists__avatar { position: relative; flex-shrink: 0; width: 7.5rem; height: 7.5rem; } @media only screen and (max-width: 767px) { .artists__avatar { width: 6.25rem; height: 6.25rem; } } .artists__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem; } .artists__details { flex-grow: 1; padding: 0 2rem; } @media only screen and (max-width: 1259px) { .artists__details { padding-right: 0; } } @media only screen and (max-width: 767px) { .artists__details { padding-left: 1.25rem; } } .artists__login { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 767px) { .artists__login { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .artists__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .artists__price span { color: #202025; } .artists__follow { min-width: 8rem; padding: 0 1rem; } @media only screen and (max-width: 1259px) { .artists__follow { display: none; } } .artists__follow span { display: none; } .artists__follow.active { background: #202025; color: #F7FBFA; } .artists__follow.active span { display: inline; } .artists__button { margin-top: 3rem; } @media only screen and (max-width: 1023px) { .artists__button { margin-top: 2rem; } } .feed__row { display: flex; align-items: flex-end; padding: 3rem 5rem; } @media only screen and (max-width: 1579px) { .feed__row { padding: 3rem 4rem; } } @media only screen and (max-width: 1419px) { .feed__row { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .feed__row { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .feed__row { display: block; padding: 1.5rem; } } .feed__details { display: flex; align-items: flex-start; margin-right: auto; } @media only screen and (max-width: 767px) { .feed__details { display: block; margin: 0 0 2rem; } } .feed .arrow { margin: 1.125rem 0 0 4.375rem; } @media only screen and (max-width: 1419px) { .feed .arrow { margin-left: 2.5rem; } } @media only screen and (max-width: 1023px) { .feed .arrow { margin: 0.75rem 0 0 1.5rem; } } @media only screen and (max-width: 767px) { .feed .arrow { margin: 1rem 0 0; } } .feed__box { text-align: right; } @media only screen and (max-width: 767px) { .feed__box { text-align: left; } } .feed__info { margin-bottom: 0.5rem; color: #686A6C; } @media only screen and (max-width: 1419px) { .feed__info { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 767px) { .feed__info { margin-bottom: 0.25rem; font-size: 1rem; line-height: 1.5rem; } } .feed__wrapper { box-sizing: border-box; } /* .feed__item { display: flex; } @media only screen and (max-width: 1023px) { .feed__item { display: block; } } .feed__preview, .feed__wrap { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .feed__preview, .feed__wrap { width: 100%; } } */ .feed__preview, .feed__photo { position: relative; font-size: 0; } .feed__preview:before, .feed__photo:before { content: ""; display: block; padding-bottom: 100%; } .feed__preview img, .feed__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .feed__wrap { display: flex; flex-direction: column; align-items: flex-start; padding: 5rem; background: #B9A9FB; box-sizing: border-box; } @media only screen and (max-width: 1579px) { .feed__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .feed__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .feed__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .feed__wrap { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .feed__wrap { padding: 1.5rem; } } .feed__photo { width: 11.25rem; height: 11.25rem; margin-bottom: auto; } @media only screen and (max-width: 1023px) { .feed__photo { margin-bottom: 2.5rem; } } @media only screen and (max-width: 767px) { .feed__photo { width: 7.5rem; height: 7.5rem; } } .feed__photo img { border-radius: 2rem; } @media only screen and (max-width: 767px) { .feed__photo img { border-radius: 1rem; } } .feed__line { display: flex; align-items: flex-start; width: 100%; margin-bottom: 2rem; } @media only screen and (max-width: 767px) { .feed__line { margin-bottom: 1.5rem; } } .feed__subtitle { margin-right: auto; color: #202025; } @media only screen and (max-width: 1419px) { .feed__subtitle { padding-top: 0.5rem; font-size: 3rem; } } @media only screen and (max-width: 767px) { .feed__subtitle { padding-top: 0; } } .feed__category { flex-shrink: 0; margin: 0.25rem 0 0 2rem; padding: 1rem 1.25rem; border-radius: 1rem; background: #202025; color: #F7FBFA; } @media only screen and (max-width: 1419px) { .feed__category { margin-top: 0; font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 767px) { .feed__category { margin-left: 1.5rem; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .feed__author { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border-radius: 1rem; background: #F7FBFA; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1419px) { .feed__author { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .feed__author { padding: 0.5rem; } } .feed__avatar { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; margin-right: 1rem; } .feed__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2rem; } .stories { padding: 8rem 5rem 6.25rem; overflow: hidden; } @media only screen and (max-width: 1579px) { .stories { padding: 5.625rem 4rem; } } @media only screen and (max-width: 1419px) { .stories { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .stories { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .stories { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .stories { padding: 1.5rem; } } .stories__title { margin-bottom: 3.5rem; } @media only screen and (max-width: 1419px) { .stories__title { margin-bottom: 2.5rem; } } @media only screen and (max-width: 1259px) { .stories__title { font-size: 3rem; } } @media only screen and (max-width: 767px) { .stories__title { margin-bottom: 2rem; } } .stories__list { display: flex; margin: 0 -5rem; padding-bottom: 1.75rem; overflow: auto; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 1579px) { .stories__list { margin: 0 -4rem; padding-bottom: 0.75rem; } } @media only screen and (max-width: 1259px) { .stories__list { margin: 0 -2.5rem; } } @media only screen and (max-width: 1023px) { .stories__list { margin: 0 -1.5rem; } } @media only screen and (max-width: 767px) { .stories__list { padding-bottom: 0.5rem; } } .stories__list::-webkit-scrollbar { display: none; } .stories__list:before, .stories__list:after { content: ""; flex-shrink: 0; display: block; width: 3.5rem; } @media only screen and (max-width: 1579px) { .stories__list:before, .stories__list:after { width: 3rem; } } @media only screen and (max-width: 1259px) { .stories__list:before, .stories__list:after { width: 1.5rem; } } @media only screen and (max-width: 1023px) { .stories__list:before, .stories__list:after { width: 0.5rem; } } .stories__add { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 6.5rem; height: 6.5rem; margin: 0 1.5rem; border: 0.25rem solid #F7FBFA; background: #010101; border-radius: 50%; transition: background 0.2s; } @media only screen and (max-width: 1579px) { .stories__add { margin: 0 1.25rem; } } @media only screen and (max-width: 1419px) { .stories__add { margin: 0 0.75rem; } } .stories__add .icon { width: 2rem; height: 2rem; fill: #F7FBFA; } .stories__add:hover { background: #202025; } .stories__item { position: relative; flex-shrink: 0; width: 6.5rem; height: 6.5rem; margin: 0 1.5rem; border: 0.25rem solid #F7FBFA; } @media only screen and (max-width: 1579px) { .stories__item { margin: 0 1.25rem; } } @media only screen and (max-width: 1419px) { .stories__item { margin: 0 0.75rem; } } .stories__item img { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; } .stories__item:before, .stories__item:after { content: ""; position: absolute; border-radius: 50%; } .stories__item:before { inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); } .stories__item:after { z-index: 1; inset: -0.125rem; background: #F7FBFA; } .stories__item:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .stories__image { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .stories__load { width: 100%; padding: 0.75rem; border: 0.0625rem dashed #686A6C; border-radius: 1.5rem; } @media only screen and (max-width: 767px) { .stories__load { padding: 0; border: none; border-radius: 0; } } .stories__inner { position: relative; height: 47.5rem; padding: 16.25rem 1.5rem 2rem; background: #202025; border-radius: 1.25rem; overflow: hidden; text-align: center; } @media only screen and (max-width: 1579px) { .stories__inner { height: 41.375rem; } } @media only screen and (max-width: 767px) { .stories__inner { height: 100vh; border-radius: 0; } } .stories__input { position: absolute; top: 0; left: 0; font-size: 50rem; opacity: 0; } .stories__details { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0 1.5rem; pointer-events: none; } .stories__icon { display: inline-flex; justify-content: center; align-items: center; width: 6.375rem; height: 6.375rem; margin-bottom: 2rem; background: #F7FBFA; border-radius: 50%; } .stories__icon .icon { fill: #202025; } .stories__subtitle { margin-bottom: 1rem; color: #F7FBFA; } .stories__text { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #A6AEAD; } .stories__button { position: absolute; z-index: 2; left: 50%; bottom: 2rem; min-width: 16.375rem; padding: 1rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .stories__wrapper { width: 85rem; margin: auto; } @media only screen and (max-width: 1579px) { .stories__wrapper { width: 64.625rem; } } @media only screen and (max-width: 1180px) { .stories__wrapper { width: 61.25rem; } } @media only screen and (max-width: 1023px) { .stories__wrapper { width: 22.5rem; } } @media only screen and (max-width: 767px) { .stories__wrapper { width: 100%; } } .stories__box { position: relative; height: 46rem; margin: 0 1.25rem; border-radius: 1.25rem; background: #010101; overflow: hidden; transition: height 0.2s; } @media only screen and (max-width: 1579px) { .stories__box { height: 34.5rem; margin: 0 1rem; } } @media only screen and (max-width: 767px) { .stories__box { height: 100vh; margin: 0; border-radius: 0; } } .stories__box:after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(0, 0, 0, 0.85); pointer-events: none; transition: all 0.2s; } .stories__wrap { height: 100%; margin: 0 -0.125rem; } .stories__preview { position: relative; height: 100%; margin: 0 0.125rem; } .stories__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .stories__author { position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; z-index: 3; display: flex; color: #E1E2E2; } @media only screen and (max-width: 767px) { .stories__author { padding-right: 4rem; } } .stories__avatar { position: relative; flex-shrink: 0; width: 3.75rem; height: 3.75rem; margin-right: 1.125rem; padding: 0.125rem; box-sizing: border-box; border-radius: 50%; } .stories__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 2; border-radius: 50%; } .stories__avatar:before { content: ""; position: absolute; inset: -0.125rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .stories__name { margin-bottom: -0.375rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } .stories__login { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } .creators { display: flex; border-top: 0.0625rem solid #E1E2E2; overflow: hidden; } @media only screen and (max-width: 1023px) { .creators { display: block; } } .creators__col { padding: 5rem; } @media only screen and (max-width: 1579px) { .creators__col { padding: 4rem; } } @media only screen and (max-width: 1419px) { .creators__col { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1023px) { .creators__col { padding: 2.5rem 1.5rem; } } .creators__col:nth-child(1) { flex-grow: 1; } .creators__col:nth-child(2) { flex-shrink: 0; width: 35.375rem; border-left: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 1419px) { .creators__col:nth-child(2) { width: 26.25rem; } } @media only screen and (max-width: 1023px) { .creators__col:nth-child(2) { width: 100%; border: none; } } .creators__title { margin-bottom: 5rem; } @media only screen and (max-width: 1023px) { .creators__title { margin-bottom: 2.5rem; } .creators__title br { display: none; } } .creators__collection { display: block; color: #202025; transition: color 0.2s; } .creators__collection:hover { color: #C5DC45; } /* .creators__collection:hover .creators__picture { -webkit-transform: scale(1.05); transform: scale(1.05); } */ .creators__collection:not(:last-child) { margin-bottom: 3rem; } @media only screen and (max-width: 1579px) { .creators__collection:not(:last-child) { margin-bottom: 2.5rem; } } @media only screen and (max-width: 1259px) { .creators__collection:not(:last-child) { margin-bottom: 2rem; } } @media only screen and (max-width: 1023px) { .creators__collection:not(:last-child) { margin-bottom: 4rem; } } .creators__photo { position: relative; /* height: 24.25rem; */ margin-bottom: 2.25rem; /* overflow: hidden; */ border-radius: 2rem; } .creators__category { display: inline-flex; align-items: center; margin-bottom: auto; padding: 0.75rem; background: rgba(32, 32, 37, 0.75); border-radius: 0.75rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; position: absolute; top: 10px; left: 10px; color: #fff; } @media only screen and (max-width: 1259px) { .creators__photo { /* height: 20rem; */ margin-bottom: 0.75rem; border-radius: 1rem; } } .creators__picture { /* position: absolute; top: 0; left: 0; */ width: 100%; /* height: 100%; */ /* -o-object-fit: cover; object-fit: cover; */ border-radius: 1rem; /* transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; */ } @media only screen and (max-width: 1259px) { .creators__picture { border-radius: 1rem; } } .creators__line { display: flex; align-items: flex-start; /* padding: 0 1.5rem 0 2.5rem; */ } /* @media only screen and (max-width: 1579px) { .creators__line { padding-right: 0; } } @media only screen and (max-width: 1259px) { .creators__line { padding-left: 1.5rem; } } */ .creators__from { color: #686A6C; font-size: 1rem; font-weight: bold; margin-right: 10px; } .creators__image { position: relative; flex-shrink: 0; width: 9rem; height: 9rem; margin: -6rem 2.5rem 0 0; border-radius: 1.5rem; box-shadow: 0 0 0 0.25rem rgba(247, 251, 250, 0.5); } @media only screen and (max-width: 1419px) { .creators__image { margin-right: 1.5rem; } } @media only screen and (max-width: 1259px) { .creators__image { width: 6.5rem; height: 6.5rem; margin-top: -3.5rem; border-radius: 0.75rem; } } @media only screen and (max-width: 767px) { .creators__image { margin-right: 0.75rem; } } .creators__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.5rem; } @media only screen and (max-width: 1259px) { .creators__image img { border-radius: 0.75rem; } } .creators__subtitle { margin-right: 2rem; } @media only screen and (max-width: 1259px) { .creators__subtitle { margin-right: 1rem; padding-top: 0.5rem; font-size: 1.5rem; line-height: 2rem; } } /* @media only screen and (max-width: 767px) { .creators__subtitle { display: none; } } */ .creators__author { display: flex; align-items: center; margin-left: auto; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1259px) { .creators__author { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .creators__author { max-width: calc(100% - 7.25rem); margin-left: 0; } } /* @media only screen and (max-width: 767px) { .creators__author span { max-width: calc(100% - 3.75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } */ .creators__collection .creators__avatar { width: 3rem; height: 3rem; margin-right: 1rem; } @media only screen and (max-width: 1259px) { .creators__collection .creators__avatar { margin-right: 0.75rem; } } .creators__collection .creators__avatar:after { content: ""; position: absolute; inset: 0; border: 0.125rem solid rgba(247, 251, 250, 0.5); border-radius: 50%; } .creators__avatar { position: relative; flex-shrink: 0; } .creators__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .creators__btns { margin-top: 4.5rem; text-align: center; } @media only screen and (max-width: 1259px) { .creators__btns { margin-top: 3.5rem; } } @media only screen and (max-width: 1023px) { .creators__btns { margin-top: 3rem; } } .creators__top:not(:nth-child(1)) { padding-top: 5rem; } @media only screen and (max-width: 1259px) { .creators__top:not(:nth-child(1)) { padding-top: 4rem; } } .creators__info { margin-bottom: 1.5rem; } @media only screen and (max-width: 1419px) { .creators__info { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 1023px) { .creators__info { max-width: 100%; font-size: 2rem; line-height: 2.5rem; } } .creators__group { margin: 0 -5rem; } @media only screen and (max-width: 1579px) { .creators__group { margin: 0 -4rem; } } @media only screen and (max-width: 1419px) { .creators__group { margin: 0 -2.5rem; } } @media only screen and (max-width: 1023px) { .creators__group { margin: 0 -1.5rem; } } .creators__item { display: flex; align-items: center; padding: 3rem 5rem; border-bottom: 0.0625rem solid #E1E2E2; transition: box-shadow 0.2s, border-color 0.2s; } @media only screen and (max-width: 1579px) { .creators__item { padding: 3rem 4rem; } } @media only screen and (max-width: 1419px) { .creators__item { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .creators__item { padding: 1.5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .creators__item { padding: 1.5rem; } } .creators__item:hover { border-color: transparent; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .creators__item .creators__avatar { width: 5rem; height: 5rem; margin-right: 1.5rem; } @media only screen and (max-width: 767px) { .creators__item .creators__avatar { margin-right: 1rem; } } .creators__details { display: flex; justify-content: space-between; align-items: center; flex-grow: 1; } .creators__box:nth-child(2) { flex-shrink: 0; margin-left: 1rem; text-align: right; } @media only screen and (max-width: 1419px) { .creators__box:nth-child(2) { position: relative; top: -0.25rem; } } .creators__name, .creators__sale { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1419px) { .creators__name, .creators__sale { font-size: 1rem; line-height: 1.5rem; } } .creators__login, .creators__text { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .creators__login, .creators__text { font-size: 1rem; } } .ranking { display: flex; } @media only screen and (max-width: 1023px) { .ranking { display: block; } } .ranking__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .ranking__col { width: 100%; } } .ranking__col:nth-child(2) { padding: 5rem 5rem 0; overflow: auto; background: #F1F4F4; } @media only screen and (max-width: 1579px) { .ranking__col:nth-child(2) { padding: 4rem 4rem 0; } } @media only screen and (max-width: 1419px) { .ranking__col:nth-child(2) { padding: 4rem 2.5rem 0; } } @media only screen and (max-width: 1259px) { .ranking__col:nth-child(2) { padding: 2.5rem 2.5rem 0; } } @media only screen and (max-width: 1023px) { .ranking__col:nth-child(2) { padding: 3rem 1.5rem; } } .ranking__wrap { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: calc(100vh - 6rem); padding: 4.375rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .ranking__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .ranking__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .ranking__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .ranking__wrap { height: auto; padding: 1.5rem; } } .ranking__title { color: #686A6C; } @media only screen and (max-width: 1023px) { .ranking__title { margin-bottom: 1.5rem; } } @media only screen and (max-width: 767px) { .ranking__title { font-size: 3rem; } } .ranking__title span { color: #202025; } .ranking__title span:nth-child(1) { background: linear-gradient(to top, transparent 0, transparent 1.5rem, #F3F380 1.5rem, #F3F380 2.5rem, transparent 2.5rem, transparent 100%); } @media only screen and (max-width: 1579px) { .ranking__title span:nth-child(1) { background: linear-gradient(to top, transparent 0, transparent 1.125rem, #F3F380 1.125rem, #F3F380 2.125rem, transparent 2.125rem, transparent 100%); } } @media only screen and (max-width: 1259px) { .ranking__title span:nth-child(1) { background: linear-gradient(to top, transparent 0, transparent 0.875rem, #F3F380 0.875rem, #F3F380 1.75rem, transparent 1.75rem, transparent 100%); } } @media only screen and (max-width: 767px) { .ranking__title span:nth-child(1) { background: linear-gradient(to top, transparent 0, transparent 0.75rem, #F3F380 0.75rem, #F3F380 1.5rem, transparent 1.5rem, transparent 100%); } } .ranking__title span:last-child { padding-right: 0.625rem; background: linear-gradient(to top, transparent 0, transparent 1.5rem, #B2E76A 1.5rem, #B2E76A 2.5rem, transparent 2.5rem, transparent 100%); } @media only screen and (max-width: 1579px) { .ranking__title span:last-child { background: linear-gradient(to top, transparent 0, transparent 1.125rem, #B2E76A 1.125rem, #B2E76A 2.125rem, transparent 2.125rem, transparent 100%); } } @media only screen and (max-width: 1259px) { .ranking__title span:last-child { background: linear-gradient(to top, transparent 0, transparent 0.875rem, #B2E76A 0.875rem, #B2E76A 1.75rem, transparent 1.75rem, transparent 100%); } } @media only screen and (max-width: 767px) { .ranking__title span:last-child { padding-right: 0.3125rem; background: linear-gradient(to top, transparent 0, transparent 0.75rem, #B2E76A 0.75rem, #B2E76A 1.5rem, transparent 1.5rem, transparent 100%); } } .ranking__content { max-width: 31.5625rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; } .ranking__sorting { display: flex; justify-content: space-between; margin-bottom: 3.5rem; } @media only screen and (max-width: 1419px) { .ranking__sorting { justify-content: stretch; margin: 0 -2.5rem 3.5rem; -webkit-overflow-scrolling: touch; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .ranking__sorting::-webkit-scrollbar { display: none; width: 0; height: 0; } .ranking__sorting:before, .ranking__sorting:after { content: ""; display: block; flex-shrink: 0; width: 2.5rem; } } @media only screen and (max-width: 1023px) { .ranking__sorting { margin: 0 -1.5rem 2.5rem; } .ranking__sorting:before, .ranking__sorting:after { width: 1.5rem; } } .ranking__sorting .tabs { flex-shrink: 0; } .ranking__sorting .tabs_artists { margin-right: auto; } .ranking__sorting .tabs_sorting { margin-left: 0.75rem; } .ranking__head { display: flex; margin-bottom: 1rem; } @media only screen and (max-width: 1259px) { .ranking__head { margin-bottom: 0; } } .ranking__caption { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .ranking__caption:nth-child(1) { flex-shrink: 0; width: 2.5rem; text-align: center; } @media only screen and (max-width: 1259px) { .ranking__caption:nth-child(1) { display: none; } } @media only screen and (max-width: 767px) { .ranking__caption:nth-child(1) { display: block; } } .ranking__caption:nth-child(2) { flex-grow: 1; padding: 0 1.5rem 0 3.75rem; } @media only screen and (max-width: 1419px) { .ranking__caption:nth-child(2) { padding: 0 1rem 0 1.5rem; } } @media only screen and (max-width: 1259px) { .ranking__caption:nth-child(2) { padding-left: 0; } } @media only screen and (max-width: 767px) { .ranking__caption:nth-child(2) { padding: 0 0 0 1.25rem; } } .ranking__caption:nth-child(3) { flex-shrink: 0; width: 7.5rem; text-align: right; } @media only screen and (max-width: 767px) { .ranking__caption:nth-child(3) { display: none; } } .ranking__artists { /* height: calc(100vh - 19.5rem); */ margin: 0 -5rem; padding-bottom: 2.5rem; overflow: auto; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 1579px) { .ranking__artists { /* height: calc(100vh - 18.5rem); */ margin: 0 -4rem; } } @media only screen and (max-width: 1419px) { .ranking__artists { margin: 0 -2.5rem; } } @media only screen and (max-width: 1259px) { .ranking__artists { /* height: calc(100vh - 16rem); */ } } @media only screen and (max-width: 1023px) { .ranking__artists { height: auto; overflow: visible; margin: 0 -1.5rem; padding-bottom: 0; } } .ranking__artists::-webkit-scrollbar { width: 0.5rem; } .ranking__artists::-webkit-scrollbar-track { background-color: #E1E2E2; border: 0.125rem solid #E1E2E2; border-radius: 0.25rem; } .ranking__artists::-webkit-scrollbar-thumb { background-color: #555555; border: 0.125rem solid #E1E2E2; border-radius: 0.25rem; } .ranking__item { display: flex; align-items: center; padding: 2.5rem 4.5rem 2.5rem 5rem; border-bottom: 0.0625rem solid #E1E2E2; transition: box-shadow 0.2s, background 0.2s; } @media only screen and (max-width: 1579px) { .ranking__item { padding: 2.5rem 3.5rem 2.5rem 4rem; } } @media only screen and (max-width: 1419px) { .ranking__item { padding: 2.5rem 2rem 2.5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .ranking__item { padding: 2rem 1.5rem; } } .ranking__item:hover { background: #F7FBFA; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .ranking__number { flex-shrink: 0; -webkit-filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.06)); filter: drop-shadow(0 0.5rem 0.5rem rgba(0, 0, 0, 0.06)); } @media only screen and (max-width: 1259px) { .ranking__number { display: none; } } @media only screen and (max-width: 767px) { .ranking__number { display: block; } } .ranking__inner { display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; -webkit-clip-path: url(#polygonNumber); clip-path: url(#polygonNumber); background: #F7FBFA; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; } .ranking__artist { display: flex; align-items: center; flex-grow: 1; padding: 0 1.5rem 0 3.75rem; } @media only screen and (max-width: 1419px) { .ranking__artist { padding: 0 1rem 0 1.5rem; } } @media only screen and (max-width: 1259px) { .ranking__artist { padding-left: 0; } } @media only screen and (max-width: 767px) { .ranking__artist { padding: 0 0 0 1.25rem; } } .ranking__avatar { position: relative; flex-shrink: 0; width: 5rem; height: 5rem; margin-right: 1.5rem; } @media only screen and (max-width: 767px) { .ranking__avatar { width: 4rem; height: 4rem; margin-right: 1.25rem; } } .ranking__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .ranking__name, .ranking__crypto { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } .ranking__sale, .ranking__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .ranking__sale span, .ranking__price span { color: #202025; } .ranking__info { flex-shrink: 0; width: 7.5rem; text-align: right; } @media only screen and (max-width: 767px) { .ranking__info { display: none; } } .create { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .create { display: block; min-height: auto; } } .create__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .create__col { width: 100%; } } .create__col:nth-child(2) { padding: 5rem; background: #F1F4F4; } @media only screen and (max-width: 1579px) { .create__col:nth-child(2) { padding: 4rem; } } @media only screen and (max-width: 1419px) { .create__col:nth-child(2) { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .create__col:nth-child(2) { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .create__col:nth-child(2) { padding: 2.5rem 1.5rem; } } .create__wrap { position: sticky; top: 0; display: flex; flex-direction: column; min-height: calc(100vh - 6rem); padding: 5rem; } @media only screen and (max-width: 1579px) { .create__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .create__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .create__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .create__wrap { min-height: auto; padding: 2.5rem 1.5rem; } } .create__wrap > .create__title { margin-bottom: 4rem; } @media only screen and (max-width: 1419px) { .create__wrap > .create__title { margin-bottom: 2.5rem; } } .create .arrow { margin-bottom: auto; } .create__content { max-width: 33.75rem; margin-top: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1419px) { .create__content { font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 1023px) { .create__content { max-width: 100%; } } .create__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } @media only screen and (max-width: 1419px) { .create__head { margin-bottom: 1.5rem; } } .create__subtitle { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .create__subtitle { font-size: 1.25rem; line-height: 1.5rem; } } .create__col > .create__subtitle { margin-bottom: 3rem; } @media only screen and (max-width: 767px) { .create__col > .create__subtitle { margin-bottom: 2rem; } } .create__counter { padding: 0.125rem 0.75rem; background: #E1E2E2; border-radius: 0.75rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .create__add { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 1.5rem; padding: 3.5rem 2rem; background: #F7FBFA; border-radius: 1.25rem; text-align: center; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .create__add:hover .create__plus { background: #C5DC45; } .create__add:hover .create__plus:before, .create__add:hover .create__plus:after { background: #F7FBFA; } .create__add .create__plus { position: relative; width: 6rem; height: 6rem; margin: 0 auto 2rem; border-radius: 1rem; background: rgba(225, 226, 226, 0.5); transition: background 0.2s; } .create__add .create__plus:before, .create__add .create__plus:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #202025; border-radius: 0.125rem; transition: background 0.2s; } .create__add .create__plus:before { width: 0.125rem; height: 1rem; } .create__add .create__plus:after { width: 1rem; height: 0.125rem; } .create__add .create__info { margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } .create__add .create__text { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } .create__box { display: flex; align-items: center; padding: 1.25rem; border-radius: 1.25rem; background: #F7FBFA; } .create__box:not(:last-child) { margin-bottom: 1.5rem; } .create__preview { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 6rem; height: 6rem; margin-right: 2rem; border-radius: 1rem; background: rgba(225, 226, 226, 0.5); } @media only screen and (max-width: 767px) { .create__preview { margin-right: 1.5rem; } } .create__preview .icon { width: 2rem; height: 2rem; fill: rgba(166, 174, 173, 0.3); } .create__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem; } .create__lines { display: flex; flex-direction: column; } .create__lines:before, .create__lines:after { content: ""; display: block; height: 0.75rem; border-radius: 0.25rem; background: #E1E2E2; } .create__lines:before { width: 12.5rem; margin-bottom: 0.75rem; } @media only screen and (max-width: 767px) { .create__lines:before { width: 10rem; } } .create__lines:after { width: 7.6875rem; } @media only screen and (max-width: 767px) { .create__lines:after { width: 6.25rem; } } .create__foot { margin-top: 2.75rem; text-align: center; } @media only screen and (max-width: 1419px) { .create__foot { margin-top: 1.5rem; } } .create__link { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; transition: color 0.2s; } @media only screen and (max-width: 1259px) { .create__link { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .create__link:hover { color: #202025; } .create__new, .create__collection { display: flex; align-items: center; margin-bottom: 1.5rem; padding: 1.25rem; background: #F7FBFA; border-radius: 1.25rem; } .create__new { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } .create__new:hover .create__plus { background: #C5DC45; } .create__new:hover .create__plus:before, .create__new:hover .create__plus:after { background: #F7FBFA; } .create__new .create__plus { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; margin-right: 2rem; border-radius: 1rem; background: rgba(225, 226, 226, 0.5); transition: background 0.2s; } @media only screen and (max-width: 767px) { .create__new .create__plus { margin-right: 1.5rem; } } .create__new .create__plus:before, .create__new .create__plus:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #202025; border-radius: 0.125rem; transition: background 0.2s; } .create__new .create__plus:before { width: 0.125rem; height: 1rem; } .create__new .create__plus:after { width: 1rem; height: 0.125rem; } .create__collection { transition: box-shadow 0.2s; } .create__collection:hover { box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .create__collection:not(:last-child) { margin-bottom: 1.5rem; } .create__caption { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } @media only screen and (max-width: 767px) { .create__caption { font-size: 1.25rem; line-height: 1.5rem; } } .create__price { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #A6AEAD; } @media only screen and (max-width: 767px) { .create__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .create__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; } @media only screen and (max-width: 767px) { .create__top { margin-bottom: 1rem; } } @media only screen and (max-width: 767px) { .create__top .create__title { font-size: 2rem; line-height: 2.5rem; } } .create__back { margin-left: 2rem; } .create__stage { max-width: 29.6875rem; margin-bottom: 4rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .create__stage { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .create__stage { margin-bottom: 1.5rem; font-size: 1.25rem; line-height: 1.5rem; } } .create__form { display: flex; flex-direction: column; flex-grow: 1; } .create .field { margin-bottom: 2.5rem; } @media only screen and (max-width: 1419px) { .create .field { margin-bottom: 1.5rem; } } .create__form .create__button { margin-top: auto; } @media only screen and (max-width: 767px) { .create__form .create__button { margin-top: 1rem; } } .create__picture { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: 22.5rem; margin-bottom: 2rem; padding: 1.5rem; border-radius: 1.25rem; background: rgba(225, 226, 226, 0.5); overflow: hidden; } .create__picture > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .create__image, .create__category { position: relative; z-index: 2; border-radius: 0.75rem; } .create__image { width: 6rem; height: 6rem; background: rgba(166, 174, 173, 0.3); } .create__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } .create__category { min-width: 6.125rem; min-height: 3rem; padding: 0.5rem 1rem; background: #F7FBFA; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .create__category:empty { background: rgba(166, 174, 173, 0.3); } .create__bottom { display: flex; justify-content: space-between; align-items: center; } .create__name { margin-right: 1.25rem; } @media only screen and (max-width: 1259px) { .create__name { font-size: 1.5rem; line-height: 2rem; } } .create__name:empty { width: 12.5rem; height: 0.75rem; border-radius: 0.25rem; background: #E1E2E2; } .create__value { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #A6AEAD; } .create__note { max-width: 33.75rem; margin-bottom: 3.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1259px) { .create__note { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; } } @media only screen and (max-width: 1023px) { .create__note { max-width: 100%; } } .create__wrap .create__button { margin-top: auto; } .congrats { padding: 0 2.5rem 2.5rem; margin-top: 40px; } @media only screen and (max-width: 1023px) { .congrats { padding: 0 1.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .congrats { padding: 0 1rem 1rem; } } .congrats__wrapper { position: relative; display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 8.5rem); padding: 2.5rem; border-radius: 2.5rem; background: #F7FBFA; box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.1); overflow: hidden; } @media only screen and (max-width: 1023px) { .congrats__wrapper { min-height: calc(100vh - 7.5rem); border-radius: 2rem; } } @media only screen and (max-width: 767px) { .congrats__wrapper { min-height: calc(100vh - 6.5rem); padding: 2.5rem 1rem; border-radius: 1.5rem; } } .congrats__close { position: absolute; top: 2rem; right: 2rem; z-index: 5; } @media only screen and (max-width: 767px) { .congrats__close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; } } .congrats__preview { position: relative; height: 17.8125rem; margin: 0 auto; } .congrats__image, .congrats__polygon, .congrats__confetti { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .congrats__image { z-index: 2; width: 33.125rem; } .congrats__image img { width: 100%; } .congrats__polygon { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: drop-shadow(0 0.25rem 5rem rgba(0, 0, 0, 0.25)); filter: drop-shadow(0 0.25rem 5rem rgba(0, 0, 0, 0.25)); } .congrats__background { width: 63.25rem; height: 63.25rem; -webkit-clip-path: url(#polygon); clip-path: url(#polygon); background: linear-gradient(180deg, #F7FBFA 0%, rgba(247, 251, 250, 0) 76.7%); } @media only screen and (max-width: 1259px) { .congrats__background { width: 43.75rem; height: 43.75rem; } } @media only screen and (max-width: 1023px) { .congrats__background { display: none; } } .congrats__confetti { width: 81.375rem; } @media only screen and (max-width: 1259px) { .congrats__confetti { width: 75rem; } } .congrats__details { position: relative; z-index: 3; max-width: 50.125rem; margin: -0.5rem auto 0; text-align: center; } @media only screen and (max-width: 767px) { .congrats__details { margin-top: -1.5rem; } } .congrats__title { margin-bottom: 2rem; } @media only screen and (max-width: 1259px) { .congrats__title { font-size: 3rem; } } @media only screen and (max-width: 767px) { .congrats__title { margin-bottom: 1rem; } } .congrats__content { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .congrats__content { max-width: 32.5rem; font-size: 1rem; line-height: 1.5rem; } } @media only screen and (max-width: 767px) { .congrats__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; } } .congrats__btns { margin-top: 3rem; text-align: center; } @media only screen and (max-width: 1259px) { .congrats__btns { margin-top: 2rem; } } @media only screen and (max-width: 767px) { .congrats__btns { display: block; } } @media only screen and (max-width: 767px) { .congrats__btns .congrats__button { width: 100%; } } .congrats__btns .congrats__button:not(:last-child) { margin-right: 1.5rem; } @media only screen and (max-width: 767px) { .congrats__btns .congrats__button:not(:last-child) { margin: 0 0 0.75rem; } } .collection { display: flex; } @media only screen and (max-width: 1023px) { .collection { display: block; } } .collection__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .collection__col { width: 100%; } } .collection__col:nth-child(1) { position: relative; } .collection__photo { position: absolute; top: -8.25rem; left: 5rem; width: 12.5rem; height: 12.5rem; box-shadow: 0 0 0 0.75rem rgba(247, 251, 250, 0.25); border-radius: 2rem; background: #E1E2E2; } @media only screen and (max-width: 1579px) { .collection__photo { left: 4rem; } } @media only screen and (max-width: 1419px) { .collection__photo { left: 2.5rem; } } @media only screen and (max-width: 1023px) { .collection__photo { top: -3.75rem; left: 1.5rem; width: 8rem; height: 8rem; border-radius: 1rem; box-shadow: 0 0 0 0.5rem rgba(247, 251, 250, 0.25); } } .collection__photo img { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2rem; } @media only screen and (max-width: 767px) { .collection__photo img { border-radius: 1rem; } } .collection__photo .icon { position: absolute; top: 50%; left: 50%; width: 4rem; height: 4rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: rgba(166, 174, 173, 0.3); } .collection__details { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 50rem; padding: 6.25rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .collection__details { padding: 6.25rem 4rem 4rem; } } @media only screen and (max-width: 1419px) { .collection__details { padding: 6.25rem 2.5rem 4rem; } } @media only screen and (max-width: 1259px) { .collection__details { min-height: 43.75rem; padding: 6.25rem 2.5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .collection__details { display: block; min-height: auto; padding: 6.25rem 1.5rem 2.5rem; } } .collection__head { display: flex; justify-content: space-between; margin-bottom: 2.5rem; } .collection__user { margin-bottom: 1rem; } @media only screen and (max-width: 1259px) { .collection__user { font-size: 3rem; } } @media only screen and (max-width: 767px) { .collection__user { font-size: 2.5rem; line-height: 3rem; } } .collection__line { display: flex; align-items: center; } .collection__category { padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: #202025; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } .collection__code { display: flex; align-items: center; margin-left: 0.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .collection__copy { margin-left: 0.5rem; font-size: 0; } .collection__copy .icon { width: 1.25rem; height: 1.25rem; fill: #686A6C; transition: fill 0.2s; } .collection__copy:hover .icon { fill: #010101; } .collection__head .collection__button { margin: 0.5rem 0 0 1.5rem; } @media only screen and (max-width: 1259px) { .collection__head .collection__button { width: 3rem; margin-top: 0; padding: 0; font-size: 0; } .collection__head .collection__button .icon { margin: 0; } } .collection__list { display: flex; flex-wrap: wrap; margin: -2.5rem -0.75rem auto; } .collection__item { flex: 0 0 calc(25% - 1.5rem); margin: 2.5rem 0.75rem 0; } @media only screen and (max-width: 1259px) { .collection__item { flex: 0 0 calc(50% - 1.5rem); } } @media only screen and (max-width: 1023px) { .collection__item { flex: 0 0 calc(25% - 1.5rem); } } @media only screen and (max-width: 767px) { .collection__item { flex: 0 0 calc(50% - 1.5rem); } } .collection__label { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .collection__label .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.25rem; fill: #686A6C; } @media only screen and (max-width: 1259px) { .collection__value { font-size: 1.5rem; line-height: 2rem; } } .collection__foot { margin-top: 4rem; } @media only screen and (max-width: 1023px) { .collection__foot { margin-top: 3rem; } } @media only screen and (max-width: 767px) { .collection__foot { margin-top: 2rem; } } .collection__stage { margin-bottom: 1.5rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #686A6C; } .collection__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } .collection__create { text-align: center; } .collection__description { padding: 7.5rem 2.5rem; border-radius: 2rem; background: rgba(32, 32, 37, 0.5); border: 0.125rem dashed rgba(32, 32, 37, 0.5); } .collection__title { margin-bottom: 0.5rem; color: #F7FBFA; } @media only screen and (max-width: 1259px) { .collection__title { font-size: 1.5rem; line-height: 2rem; } } .collection__text { margin-bottom: 2.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1259px) { .collection__text { max-width: 15.625rem; margin: 0 auto 2.5rem; } } .collection__link { display: inline-block; margin-top: 4rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; transition: color 0.2s; } @media only screen and (max-width: 1419px) { .collection__link { margin-top: 3rem; } } .collection__link:hover { color: #F7FBFA; } .activity__row { display: flex; align-items: center; border-bottom: 0.0625rem solid #202025; } .activity__row:nth-child(1) .activity__col { padding-top: 1.375rem; padding-bottom: 1.375rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .activity__row:not(:nth-child(1)) .activity__col { padding-top: 2rem; padding-bottom: 2rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #F7FBFA; } @media only screen and (max-width: 1259px) { .activity__row:not(:nth-child(1)) .activity__col { font-size: 0.875rem; line-height: 1.25rem; } } @media only screen and (max-width: 767px) { .activity__row:not(:nth-child(1)) .activity__col { padding-top: 1.5rem; padding-bottom: 1.5rem; } } .activity__col:nth-child(1) { flex-shrink: 0; width: 4rem; } @media only screen and (max-width: 1259px) { .activity__col:nth-child(1) { width: 3rem; } } .activity__col:nth-child(2), .activity__col:nth-child(3) { width: calc((100% - 11.5rem) / 2); padding-left: 2rem; } @media only screen and (max-width: 1259px) { .activity__col:nth-child(2), .activity__col:nth-child(3) { width: calc((100% - 10.5rem) / 2); padding-left: 1.5rem; } } @media only screen and (max-width: 1023px) { .activity__col:nth-child(2), .activity__col:nth-child(3) { padding-left: 2.5rem; } } @media only screen and (max-width: 767px) { .activity__col:nth-child(2), .activity__col:nth-child(3) { width: calc((100% - 8.625rem) / 2); padding-left: 1.25rem; } } .activity__col:nth-child(4) { flex-shrink: 0; width: 7.5rem; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media only screen and (max-width: 767px) { .activity__col:nth-child(4) { width: 5.625rem; } } .activity__preview { position: relative; width: 4rem; height: 4rem; } @media only screen and (max-width: 1259px) { .activity__preview { width: 3rem; height: 3rem; } } .activity__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } @media only screen and (max-width: 1259px) { .activity__preview img { border-radius: 0.5rem; } } .activity__user { display: flex; align-items: center; } .activity__avatar { position: relative; width: 2rem; height: 2rem; } @media only screen and (max-width: 1259px) { .activity__avatar { display: none; } } @media only screen and (max-width: 1023px) { .activity__avatar { display: block; } } @media only screen and (max-width: 767px) { .activity__avatar { display: none; } } .activity__avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .activity__login { width: calc(100% - 2rem); padding-left: 0.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media only screen and (max-width: 1259px) { .activity__login { width: 100%; padding-left: 0; } } @media only screen and (max-width: 1023px) { .activity__login { width: calc(100% - 2rem); padding-left: 0.75rem; } } @media only screen and (max-width: 767px) { .activity__login { width: 100%; padding-left: 0; } } .mint { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .mint { display: block; min-height: auto; } } .mint__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .mint__col { width: 100%; } } .mint__col:nth-child(2) { padding: 5rem; background: #F1F4F4; } @media only screen and (max-width: 1579px) { .mint__col:nth-child(2) { padding: 4rem; } } @media only screen and (max-width: 1419px) { .mint__col:nth-child(2) { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .mint__col:nth-child(2) { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .mint__col:nth-child(2) { padding: 2.5rem 1.5rem; } } .mint__wrap { position: sticky; top: 0; display: flex; flex-direction: column; min-height: calc(100vh - 6rem); padding: 5rem; } @media only screen and (max-width: 1579px) { .mint__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .mint__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .mint__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .mint__wrap { min-height: auto; padding: 2.5rem 1.5rem; } } .mint__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } @media only screen and (max-width: 767px) { .mint__head { margin-bottom: 1.5rem; } } @media only screen and (max-width: 1419px) { .mint__title { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 767px) { .mint__title { font-size: 2rem; line-height: 2.5rem; } } .mint__back { margin-left: 2rem; } .mint__info { max-width: 29.6875rem; margin-bottom: 4rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .mint__info { margin-bottom: 2.5rem; } } @media only screen and (max-width: 767px) { .mint__info { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.5rem; } } .mint .field:not(:last-child) { margin-bottom: 2.5rem; } .mint__box { margin-bottom: 4.75rem; } @media only screen and (max-width: 1419px) { .mint__box { margin-bottom: 2.5rem; } } .mint__category { margin-bottom: 0.75rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .mint__collection { display: flex; align-items: center; padding: 1.25rem 2.5rem 1.25rem 1.25rem; border-radius: 1.25rem; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 767px) { .mint__collection { padding: 1.25rem; } } .mint__preview { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; } @media only screen and (max-width: 767px) { .mint__preview { width: 4.5rem; height: 4.5rem; } } .mint__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem; } .mint__details { flex-grow: 1; padding: 0 2rem; } @media only screen and (max-width: 767px) { .mint__details { padding: 0 1.5rem; } } .mint__subtitle { margin-bottom: 0.25rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 767px) { .mint__subtitle { font-size: 1.25rem; line-height: 1.5rem; } } .mint__price { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #A6AEAD; } @media only screen and (max-width: 767px) { .mint__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } .mint__check { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; background: #202025; border-radius: 50%; } .mint__check .icon { fill: #F7FBFA; } .mint__btns { display: flex; margin: 0 -0.625rem; } .mint__btns .mint__button { flex: 0 0 calc(50% - 1.25rem); margin: 0 0.625rem; } .mint__content { max-width: 33.75rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 767px) { .mint__content { font-size: 1rem; line-height: 1.5rem; } } .mint__wrap .mint__button { margin-top: auto; } @media only screen and (max-width: 1023px) { .mint__wrap .mint__button { margin-top: 2rem; } } .upload__stage { margin-bottom: 5.75rem; } @media only screen and (max-width: 1419px) { .upload__stage { margin-bottom: 4rem; } } @media only screen and (max-width: 1023px) { .upload__stage { margin-bottom: 2rem; } } .upload__file { position: relative; margin-bottom: 2rem; border-radius: 1.25rem; background: rgba(225, 226, 226, 0.5); overflow: hidden; } .upload__file:before { content: ""; display: block; padding-bottom: 100%; } .upload__file img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .upload__details { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .upload__input { position: absolute; inset: 0; opacity: 0; z-index: 3; } .upload__icon { display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; margin-bottom: 1.25rem; border-radius: 50%; background: #F7FBFA; } .upload__icon .icon { width: 2rem; height: 2rem; } .upload__info { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } .upload__format { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } .upload__title { display: flex; align-items: center; min-height: 3rem; margin-bottom: 1.25rem; } .upload__title:empty:before { content: ""; display: block; width: 18.5rem; height: 1.5rem; border-radius: 0.25rem; background: #E1E2E2; } .upload__item { display: flex; align-items: center; } .upload__preview { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; margin-right: 1rem; border-radius: 0.75rem; background: #E1E2E2; } .upload__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } .upload__wrap { margin-right: 2rem; } .upload__subtitle, .upload__price { display: flex; align-items: center; } .upload__subtitle:empty:before, .upload__price:empty:before { content: ""; display: block; height: 0.75rem; border-radius: 0.25rem; background: #E1E2E2; } .upload__subtitle { min-height: 1.5rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .upload__subtitle:empty:before { width: 5.5rem; } @media only screen and (max-width: 767px) { .upload__subtitle:empty:before { width: 3.75rem; } } .upload__price { min-height: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .upload__price:empty:before { width: 8rem; } @media only screen and (max-width: 767px) { .upload__price:empty:before { width: 5.625rem; } } .upload__lines { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; } .upload__lines:before, .upload__lines:after { content: ""; display: block; height: 0.75rem; border-radius: 0.25rem; background: #E1E2E2; } .upload__lines:before { width: 5.5rem; margin-bottom: 0.75rem; } @media only screen and (max-width: 767px) { .upload__lines:before { width: 3.75rem; } } .upload__lines:after { width: 8rem; } @media only screen and (max-width: 767px) { .upload__lines:after { width: 5.625rem; } } .details__row { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .details__row { display: block; min-height: auto; } } .details__col { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 1023px) { .details__col { width: 100%; } } .details__col:nth-child(2) { background: #F1F4F4; } .details__box { padding: 5rem; } @media only screen and (max-width: 1579px) { .details__box { padding: 4rem; } } @media only screen and (max-width: 1419px) { .details__box { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .details__box { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .details__box { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .details__box { padding: 1.5rem; } } .details__box:not(:nth-child(1)) { border-top: 0.0625rem solid #E1E2E2; } .details__stage { margin-bottom: 3rem; } @media only screen and (max-width: 1419px) { .details__stage { margin-bottom: 2rem; } } @media only screen and (max-width: 1259px) { .details__stage { margin-bottom: 1.5rem; } } @media only screen and (max-width: 767px) { .details__stage { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.5rem; } } .details__content { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1259px) { .details__content { font-size: 1rem; line-height: 1.5rem; } } .details__content p:not(:last-child) { margin-bottom: 1rem; } .details__wrap { position: sticky; top: 0; display: flex; flex-direction: column; min-height: calc(100vh - 6rem); padding: 5rem; } @media only screen and (max-width: 1579px) { .details__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .details__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .details__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .details__wrap { display: block; min-height: auto; padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .details__wrap { padding: 1.5rem; } } .details__button { margin-top: 3rem; } @media only screen and (max-width: 1259px) { .details__button { margin-top: 2.5rem; } } @media only screen and (max-width: 767px) { .details__button { margin-top: 2rem; } } .details__group_mb { margin-bottom: auto; } .details .details-exit__top { display: flex; padding: 2.25rem; box-shadow: 0 0.75rem 2.5rem -1rem rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 1023px) { .details .details-exit__top { padding: 2rem 1.5rem; } } .details .details-exit__button { display: inline-flex; align-items: center; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; transition: color 0.2s; } .details .details-exit__button .icon { margin-right: 1rem; fill: #686A6C; transition: fill 0.2s; } .details .details-exit__button:hover { color: #FF5C17; } .details .details-exit__button:hover .icon { fill: #FF5C17; } .details .details-preview { position: relative; } .details .details-preview:before { content: ""; display: block; padding-bottom: 100%; } .details .details-preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .details .details-preview__actions { position: absolute; top: 2rem; right: 2rem; display: flex; } @media only screen and (max-width: 767px) { .details .details-preview__actions { top: 1.5rem; right: 1.5rem; } } .details .details-preview__action { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: rgba(247, 251, 250, 0.5); font-size: 0; transition: background 0.2s; } .details .details-preview__action .icon { transition: fill 0.2s; } .details .details-preview__action:hover { background: #202025; } .details .details-preview__action:hover .icon { fill: #F7FBFA; } .details .details-preview__action:not(:last-child) { margin-right: 1.25rem; } .details .details-statistics__list { display: flex; margin: 0 -1.25rem; } @media only screen and (max-width: 1259px) { .details .details-statistics__list { margin: 0 -0.75rem; } } @media only screen and (max-width: 767px) { .details .details-statistics__list { display: block; margin: 0; } } .details .details-statistics__item { flex: 0 0 calc(50% - 2.5rem); width: calc(50% - 2.5rem); margin: 0 1.25rem; } @media only screen and (max-width: 1259px) { .details .details-statistics__item { flex: 0 0 calc(50% - 1.5rem); width: calc(50% - 1.5rem); margin: 0 0.75rem; } } @media only screen and (max-width: 767px) { .details .details-statistics__item { width: 100%; margin: 0; } .details .details-statistics__item:not(:last-child) { margin-bottom: 1.5rem; } } .details .details-statistics__label { margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-statistics__flex { display: flex; } .details .details-statistics__avatar, .details .details-statistics__image { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; margin-right: 1.25rem; } .details .details-statistics__avatar img, .details .details-statistics__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .details .details-statistics__avatar { position: relative; border: 0.25rem solid #F7FBFA; border-radius: 50%; } .details .details-statistics__avatar img { z-index: 3; border-radius: 50%; } .details .details-statistics__avatar:before { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid #202025; border-radius: 50%; } .details .details-statistics__avatar.history:before { inset: -0.1875rem; z-index: 1; background: #F7FBFA; border-color: transparent; } .details .details-statistics__avatar.history:after { content: ""; position: absolute; inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .details .details-statistics__image img { border-radius: 0.75rem; } .details .details-statistics__title { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; } .details .details-statistics__login { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-statistics__category { display: inline-block; padding: 0 0.5rem; border-radius: 0.375rem; background: rgba(225, 226, 226, 0.5); font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #686A6C; } .details .details-caption { margin-bottom: auto; padding-bottom: 2.5rem; } .details .details-caption__line { display: flex; justify-content: space-between; margin-bottom: 1.5rem; } @media only screen and (max-width: 767px) { .details .details-caption__line { margin-bottom: 1rem; } } @media only screen and (max-width: 767px) { .details .details-caption__title { padding-top: 0.25rem; font-size: 2rem; line-height: 2.5rem; } } .details .details-caption__actions { display: flex; margin: 0.5rem 0 0 1rem; } @media only screen and (max-width: 1259px) { .details .details-caption__actions { margin-top: 0; } } .details .details-caption__button:not(:last-child) { margin-right: 1.5rem; } @media only screen and (max-width: 767px) { .details .details-caption__button:not(:last-child) { margin-right: 0.75rem; } } .details .details-caption__date { display: flex; align-items: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-caption__date .icon { flex-shrink: 0; width: 1rem; height: 1rem; margin-right: 0.75rem; fill: #686A6C; } .details .details-cost { background: #F7FBFA; box-shadow: 0 2.5rem 3rem -1.5rem rgba(0, 0, 0, 0.1); border-radius: 1.5rem; } .details .details-cost__row { display: flex; } @media only screen and (max-width: 767px) { .details .details-cost__row { display: block; } } .details .details-cost__col { flex: 0 0 50%; padding: 2rem 2rem 2rem 2rem; } @media only screen and (max-width: 1419px) { .details .details-cost__col { padding: 1.5rem; padding: 1.5rem 1.5rem 1.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .details .details-cost__col { padding: 1.5rem 1.5rem 1rem 1.5rem; } } /* .details .details-cost__col:nth-child(1) { border-right: 0.0625rem solid #E1E2E2; } */ .details .details-cost__col .details-cost__button { margin-top: 1.25rem; } @media only screen and (max-width: 767px) { .details .details-cost__col .details-cost__button { margin-top: 0.75rem; } } .details .details-cost__label { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .details .details-cost__value { display: flex; align-items: center; min-height: 2.5rem; } .details .details-cost__value:empty:before { content: ""; width: 10rem; height: 1.5rem; background: #E1E2E2; border-radius: 0.25rem; } @media only screen and (max-width: 1419px) { .details .details-cost__value:empty:before { width: 7.5rem; } } @media only screen and (max-width: 1259px) { .details .details-cost__value:empty:before { width: 10rem; } } .details .details-cost__foot { display: flex; justify-content: space-between; align-items: center; padding: 2rem; border-bottom: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 1419px) { .details .details-cost__foot { padding: 1.5rem; } } @media only screen and (max-width: 1259px) { .details .details-cost__foot { flex-wrap: wrap; } } @media only screen and (max-width: 767px) { .details .details-cost__foot { padding: 1rem 1.5rem; border: none; } } .details .details-cost__user { display: flex; align-items: center; margin: 0 1rem; } @media only screen and (max-width: 1259px) { .details .details-cost__user { order: 3; margin: 1rem 0 0; } } @media only screen and (max-width: 767px) { .details .details-cost__user { order: 2; margin: 0 0 1rem; } } @media only screen and (max-width: 767px) { .details .details-cost__box { flex: 0 0 100%; margin-bottom: 1rem; } } .details .details-cost__avatar { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; margin-right: 0.875rem; border: 0.25rem solid #F7FBFA; border-radius: 50%; } .details .details-cost__avatar img { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .details .details-cost__avatar:before { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid #202025; border-radius: 50%; } .details .details-cost__avatar.history:before { inset: -0.1875rem; z-index: 1; background: #F7FBFA; border-color: transparent; } .details .details-cost__avatar.history:after { content: ""; position: absolute; inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .details .details-cost__author { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .details .details-cost__code { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-cost__button { padding: 0 1.375rem; } @media only screen and (max-width: 767px) { .details .details-cost__button { order: 3; width: 100%; } } .details .details-links { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 3rem -1rem 3rem; padding-top: 2rem; } /* @media only screen and (max-width: 1419px) { .details .details-links { flex-direction: column; } } */ @media only screen and (max-width: 1259px) { .details .details-links { margin-top: 2.5rem; } } @media only screen and (max-width: 767px) { .details .details-links { margin-top: 1.5rem; padding-top: 0.5rem; } } .details .details-links:before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 0.0625rem; background: #E1E2E2; } .details .details-links__link { /* display: flex; */ align-items: center; margin: 1rem 1rem 0; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; transition: color 0.2s; width: 100%; } .details .details-links__link .icon { margin-right: 1rem; fill: #202025; transition: fill 0.2s; } /* .details .details-links__link:hover { color: #C5DC45; } .details .details-links__link:hover .icon { fill: #C5DC45; } */ .details .details-provenance__action { padding: 2.5rem; border-radius: 1rem; background: #F1F4F4; text-align: center; } @media only screen and (max-width: 1259px) { .details .details-provenance__action { padding: 2.5rem 1.5rem; } } .details .details-provenance__action .details-provenance__avatar { width: 4rem; height: 4rem; margin: 0 auto 1rem; } .details .details-provenance__action .details-provenance__content, .details .details-provenance__action .details-provenance__date { margin-bottom: 1rem; } .details .details-provenance__action .details-provenance__link { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.5rem; border-radius: 0.75rem; box-shadow: 0 1rem 1.25rem -1rem rgba(0, 0, 0, 0.15); background: #F7FBFA; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-provenance__action .details-provenance__link span { margin-left: 0.3125rem; color: #202025; } .details .details-provenance__action .details-provenance__link .icon { width: 1rem; height: 1rem; margin-left: 0.5rem; fill: #A6AEAD; transition: fill 0.2s; } .details .details-provenance__action .details-provenance__link:hover .icon { fill: #202025; } .details .details-provenance__action:not(:last-child) { margin-bottom: 3rem; } @media only screen and (max-width: 767px) { .details .details-provenance__action:not(:last-child) { margin-bottom: 2rem; } } .details .details-provenance__item { display: flex; align-items: center; padding: 2rem 0; border-top: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 767px) { .details .details-provenance__item { padding: 1.5rem 0; } } .details .details-provenance__item .details-provenance__avatar { width: 3rem; height: 3rem; margin-right: 1.25rem; } @media only screen and (max-width: 767px) { .details .details-provenance__item .details-provenance__avatar { margin-right: 0.75rem; } } .details .details-provenance__item .details-provenance__link { margin-left: 0.75rem; font-size: 0; } .details .details-provenance__item .details-provenance__link .icon { width: 1.25rem; height: 1.25rem; fill: #A6AEAD; transition: fill 0.2s; } .details .details-provenance__item .details-provenance__link:hover .icon { fill: #202025; } .details .details-provenance__avatar { position: relative; flex-shrink: 0; border: 0.25rem solid #F7FBFA; border-radius: 50%; } .details .details-provenance__avatar img { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .details .details-provenance__avatar:before { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid #202025; border-radius: 50%; } .details .details-provenance__avatar.history:before { inset: -0.1875rem; z-index: 1; background: #F7FBFA; border-color: transparent; } .details .details-provenance__avatar.history:after { content: ""; position: absolute; inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .details .details-provenance__details { flex-grow: 1; } .details .details-provenance__content { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .details .details-provenance__content span { color: #686A6C; } .details .details-provenance__date { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #686A6C; } .details .details-provenance__price { margin-left: 1.5rem; white-space: nowrap; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } @media only screen and (max-width: 767px) { .details .details-provenance__price { font-size: 1rem; } } .details .details-provenance__title { margin-bottom: 0.75rem; color: #686A6C; } @media only screen and (max-width: 1259px) { .details .details-provenance__title { font-size: 1.5rem; line-height: 2rem; } } .details .details-provenance__title span { color: #202025; } .details .details-head { margin-bottom: auto; padding-bottom: 2.5rem; } @media only screen and (max-width: 1579px) { .details .details-head { margin-top: -1.5rem; } } @media only screen and (max-width: 1259px) { .details .details-head { margin-top: 0; } } .details .details-head__top { display: flex; justify-content: space-between; margin-bottom: 1.5rem; } .details .details-head__title { margin-right: 2rem; } .details .details-head__content { margin-bottom: 1.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1259px) { .details .details-head__content { font-size: 1rem; line-height: 1.5rem; } } .details .details-head__content strong { font-weight: 700; color: #202025; } .details .details-head__bid { display: flex; justify-content: space-between; margin: 2.5rem 0 1.5rem; padding: 2rem; border-radius: 1.5rem; background: #F7FBFA; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1579px) { .details .details-head__bid { padding: 1.5rem; } } @media only screen and (max-width: 1419px) { .details .details-head__bid { margin-top: 1.5rem; } } @media only screen and (max-width: 767px) { .details .details-head__bid { display: block; padding: 1rem; } } @media only screen and (max-width: 767px) { .details .details-head__box:nth-child(1) { margin-bottom: 1.5rem; } } .details .details-head__label { margin-bottom: 0.75rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .details .details-head__price { margin-top: 0.5rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1259px) { .details .details-head__price { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } @media only screen and (max-width: 1259px) { .details .details-head__crypto { font-size: 2rem; line-height: 2.5rem; } } .details .details-head .timer { display: flex; } .details .details-head .timer li { display: flex; flex-direction: column; min-width: 4.6875rem; } @media only screen and (max-width: 1419px) { .details .details-head .timer li { min-width: 4.375rem; } } @media only screen and (max-width: 1259px) { .details .details-head .timer li { min-width: 2.8125rem; } } .details .details-head .timer li:not(:last-child) { margin-right: 1.5rem; } @media only screen and (max-width: 1259px) { .details .details-head .timer li:not(:last-child) { margin-right: 1rem; } } .details .details-head .timer__value { min-height: 3rem; } @media only screen and (max-width: 1419px) { .details .details-head .timer__value { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 1259px) { .details .details-head .timer__value { min-height: 2.5rem; font-size: 2rem; line-height: 2.5rem; } } .details .details-head .timer__text { margin-top: 0.5rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .details .details-head .timer__text { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } } @media only screen and (max-width: 1259px) { .details .details-head .timer__text { font-size: 0; } } .details .details-head .timer__text span { display: none; } @media only screen and (max-width: 1259px) { .details .details-head .timer__text span { display: inline; font-size: 0.875rem; line-height: 1.25rem; } } .details .details-head__link { position: relative; display: inline-block; align-items: center; padding-left: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; transition: color 0.2s; } .details .details-head__link:before, .details .details-head__link:after { content: ""; position: absolute; border-radius: 50%; } .details .details-head__link:before { top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #202025; transition: border-color 0.2s; } .details .details-head__link:after { top: 0.875rem; left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #202025; transition: background 0.2s, -webkit-transform 0.2s; transition: background 0.2s, transform 0.2s; transition: background 0.2s, transform 0.2s, -webkit-transform 0.2s; } .details .details-head__link:hover { color: #C5DC45; } .details .details-head__link:hover:before { border-color: #C5DC45; } .details .details-head__link:hover:after { background: #C5DC45; -webkit-transform: scale(2); transform: scale(2); } .details .details-set__row { display: flex; border-radius: 1.5rem; background: #F7FBFA; box-shadow: 0 2.5rem 3rem -1.5rem rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1259px) { .details .details-set__row { display: block; } } .details .details-set__col { flex: 0 0 50%; padding: 2rem; } @media only screen and (max-width: 1259px) { .details .details-set__col { width: 100%; padding: 1.5rem; } } @media only screen and (max-width: 767px) { .details .details-set__col { padding: 1rem; } } .details .details-set__col:nth-child(1) { border-width: 0 0.0625rem 0 0; border-style: solid; border-color: #E1E2E2; } @media only screen and (max-width: 1259px) { .details .details-set__col:nth-child(1) { border-width: 0 0 0.0625rem; } } .details .details-set__label { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .details .details-set__button { margin-top: 1.25rem; padding: 0 1rem; } .details .details-tags { display: flex; flex-wrap: wrap; margin: 2.625rem 0 0 -0.375rem; } .details .details-tags__item { margin: 0.375rem 0 0 0.375rem; padding: 0.5rem; border-radius: 0.75rem; background: rgba(225, 226, 226, 0.5); font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } .details .details-bid { background: #F7FBFA; box-shadow: 0 2.5rem 3rem -1.5rem rgba(0, 0, 0, 0.1); border-radius: 1.5rem; } .details .details-bid .timer { display: flex; } .details .details-bid .timer li { display: flex; align-items: flex-end; } .details .details-bid .timer li:not(:last-child) { margin-right: 1rem; } .details .details-bid .timer__value { min-width: 2.75rem; font-size: 2rem; line-height: 2.5rem; } .details .details-bid .timer__text { position: relative; bottom: -0.125rem; margin: 0 0 0 0.1875rem; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #A6AEAD; } @media only screen and (max-width: 1259px) { .details .details-bid .timer__text { bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } } @media only screen and (max-width: 1579px) { .details .details-bid .timer__desktop { display: none; } } .details .details-bid .timer__tablet, .details .details-bid .timer__mobile { display: none; } @media only screen and (max-width: 1579px) { .details .details-bid .timer__tablet { display: inline; } } @media only screen and (max-width: 767px) { .details .details-bid .timer__tablet { display: none; } } @media only screen and (max-width: 767px) { .details .details-bid .timer__mobile { display: inline; } } .details .details-bid__head, .details .details-bid__foot { padding: 2rem; } @media only screen and (max-width: 767px) { .details .details-bid__head, .details .details-bid__foot { padding: 1.5rem 1.25rem; } } .details .details-bid__flex { display: flex; justify-content: space-between; margin-bottom: 1.25rem; } @media only screen and (max-width: 1259px) { .details .details-bid__flex { display: block; } } @media only screen and (max-width: 1023px) { .details .details-bid__flex { display: flex; } } @media only screen and (max-width: 767px) { .details .details-bid__flex { display: block; } } @media only screen and (max-width: 1259px) { .details .details-bid__box:not(:last-child) { margin-bottom: 1rem; } } @media only screen and (max-width: 1023px) { .details .details-bid__box:not(:last-child) { margin-bottom: 0; } } @media only screen and (max-width: 767px) { .details .details-bid__box:not(:last-child) { margin-bottom: 1rem; } } .details .details-bid__label { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .details .details-bid__foot { display: flex; align-items: center; border-top: 0.0625rem solid #E1E2E2; } .details .details-bid__info { margin-right: auto; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .details .details-bid__user { display: flex; align-items: center; } .details .details-bid__avatar { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; margin-right: 0.875rem; border: 0.25rem solid #F7FBFA; border-radius: 50%; } .details .details-bid__avatar img { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .details .details-bid__avatar:before { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid #202025; border-radius: 50%; } .details .details-bid__avatar.history:before { inset: -0.1875rem; z-index: 1; background: #F7FBFA; border-color: transparent; } .details .details-bid__avatar.history:after { content: ""; position: absolute; inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .details .details-bid__author { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .details .details-bid__code { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .share__wrapper { padding: 0 2.5rem 2.5rem; } @media only screen and (max-width: 1419px) { .share__wrapper { padding: 0 1.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .share__wrapper { padding: 0 1rem 1.5rem; } } .share__inner { position: relative; display: flex; min-height: calc(100vh - 8.5rem); padding: 2.5rem; border-radius: 2.5rem; background: #F7FBFA; box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.1); } @media only screen and (max-width: 1419px) { .share__inner { min-height: calc(100vh - 7.5rem); padding: 1.5rem; border-radius: 1.5rem; } } @media only screen and (max-width: 1023px) { .share__inner { border-radius: 2rem; } } @media only screen and (max-width: 767px) { .share__inner { padding: 1.5rem 1rem; } } .share__close { position: absolute; top: 2rem; right: 2rem; } @media only screen and (max-width: 1023px) { .share__close { top: 0.5rem; right: 0.5rem; width: 3.25rem; height: 3.25rem; background: #F7FBFA; } } .share__row { display: flex; align-items: center; flex-grow: 1; margin: 0 -3.75rem; } @media only screen and (max-width: 1579px) { .share__row { margin: 0; } } @media only screen and (max-width: 1023px) { .share__row { display: block; } } .share__col { flex: 0 0 calc(50% - 7.5rem); width: calc(50% - 7.5rem); margin: 0 3.75rem; } @media only screen and (max-width: 1579px) { .share__col { margin: 0; } } @media only screen and (max-width: 1579px) { .share__col:nth-child(1) { flex: 0 0 32rem; width: 32rem; } } @media only screen and (max-width: 1419px) { .share__col:nth-child(1) { flex: 0 0 22.375rem; width: 22.375rem; } } @media only screen and (max-width: 1023px) { .share__col:nth-child(1) { width: 100%; margin-bottom: 2.5rem; } } .share__col:nth-child(2) { padding: 3rem 0; } @media only screen and (max-width: 1579px) { .share__col:nth-child(2) { flex: 0 0 calc(100% - 32rem); width: calc(100% - 32rem); padding: 0 0 0 8rem; } } @media only screen and (max-width: 1419px) { .share__col:nth-child(2) { flex: 0 0 calc(100% - 22.375rem); width: calc(100% - 22.375rem); padding-left: 4rem; } } @media only screen and (max-width: 1023px) { .share__col:nth-child(2) { width: 100%; padding: 0; } } .share__photo { position: relative; margin-bottom: 3rem; } @media only screen and (max-width: 1419px) { .share__photo { margin-bottom: 1.5rem; } } .share__photo:before { content: ""; display: block; padding-bottom: 100%; } .share__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.25rem; } .share__subtitle { margin-bottom: 1.25rem; } .share__item { display: flex; align-items: center; margin-bottom: 6.25rem; } @media only screen and (max-width: 1579px) { .share__item { margin-bottom: 3.25rem; } } @media only screen and (max-width: 1419px) { .share__item { margin-bottom: 2rem; } } .share__preview { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; margin-right: 1rem; } .share__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.75rem; } .share__wrap { margin-right: 1rem; } .share__name { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .share__price { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .share__lines { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; } .share__lines:before, .share__lines:after { content: ""; display: block; height: 0.75rem; border-radius: 0.25rem; background: #E1E2E2; } .share__lines:before { width: 5.5rem; margin-bottom: 0.75rem; } @media only screen and (max-width: 767px) { .share__lines:before { width: 3.75rem; } } .share__lines:after { width: 8rem; } @media only screen and (max-width: 767px) { .share__lines:after { width: 5.625rem; } } .share__field { position: relative; } .share__input { width: 100%; height: 4rem; padding: 0 4.5rem 0 2rem; border-radius: 0.75rem; background: rgba(225, 226, 226, 0.5); text-overflow: ellipsis; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #202025; } @media only screen and (max-width: 1419px) { .share__input { padding: 0 4rem 0 1.25rem; } } .share__copy { position: absolute; top: 50%; right: 2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; } @media only screen and (max-width: 1419px) { .share__copy { right: 0; width: 4rem; } } .share__copy .icon { fill: #686A6C; transition: fill 0.2s; } .share__copy:hover .icon { fill: #010101; } .share__title { margin-bottom: 2rem; } @media only screen and (max-width: 1579px) { .share__title { font-size: 4rem; } } @media only screen and (max-width: 1419px) { .share__title { font-size: 3rem; } } @media only screen and (max-width: 767px) { .share__title { margin-bottom: 0.5rem; font-size: 2rem; line-height: 2.5rem; } } .share__info { margin-bottom: 3.75rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; } @media only screen and (max-width: 1419px) { .share__info { margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.5rem; } } .share__socials { display: flex; flex-wrap: wrap; } .share__social { display: flex; justify-content: center; align-items: center; flex: 0 0 50%; width: 50%; height: 19rem; border-top: 0.0625rem solid #E1E2E2; transition: box-shadow 0.2s; } @media only screen and (max-width: 1419px) { .share__social { height: 12.5rem; } } @media only screen and (max-width: 1023px) { .share__social { height: 9.6875rem; } } .share__social:hover { box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .share__social:nth-child(2n+1) { border-right: 0.0625rem solid #E1E2E2; } .share__social:nth-child(1), .share__social:nth-child(2) { border-top: none; } .share__social .icon { width: 3rem; height: 3rem; fill: #686A6C; transition: fill 0.2s; } .share__social:hover .icon { fill: #202025; } .price { border-radius: 1.5rem; background: #F7FBFA; box-shadow: 0 2.5rem 3rem -1.5rem rgba(0, 0, 0, 0.1); } .price__body, .price__content { padding: 2rem; } @media only screen and (max-width: 1579px) { .price__body, .price__content { padding: 1.5rem; } } @media only screen and (max-width: 767px) { .price__body, .price__content { padding: 1rem; } } .price__title { font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .price__title strong { font-weight: 700; color: #202025; } .price__wrap { margin-bottom: 2.5rem; } @media only screen and (max-width: 1579px) { .price__wrap { margin-bottom: 1.5rem; } } .price__box { position: relative; } .price__box .field__input { padding-right: 7.5rem; font-size: 3rem; font-weight: 800; } @media only screen and (max-width: 767px) { .price__box .field__input { font-size: 2.5rem; } } .price__box .field__input::-webkit-input-placeholder { color: #A6AEAD; } .price__box .field__input::-moz-placeholder { color: #A6AEAD; } .price__box .field__input:-ms-input-placeholder { color: #A6AEAD; } .price__box .field__input::-ms-input-placeholder { color: #A6AEAD; } .price__box .field__input::placeholder { color: #A6AEAD; } .price__box .price__currency { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } @media only screen and (max-width: 767px) { .price__box .price__currency { font-size: 2.5rem; } } .price__line, .price__flex { display: flex; align-items: center; padding: 1.5rem 0; } @media only screen and (max-width: 1579px) { .price__line, .price__flex { padding: 1rem 0; } } .price__line:not(:last-child) { border-bottom: 0.0625rem solid #E1E2E2; } .price__flex { border-bottom: 0.0625rem solid #E1E2E2; } .price__flex .price__currency { margin-left: auto; } .price__label { margin-right: auto; padding-right: 1.25rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; color: #686A6C; } .price__value, .price__percent { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 700; } .price__percent { margin-right: 1rem; color: #A6AEAD; } .price__content { border-top: 0.0625rem solid #E1E2E2; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #686A6C; } .settings { display: flex; } @media only screen and (max-width: 1023px) { .settings { display: block; } } .settings__col { flex: 0 0 50%; } @media only screen and (max-width: 1023px) { .settings__col { width: 100%; } } .settings__col:nth-child(2) { padding: 5rem; } @media only screen and (max-width: 1579px) { .settings__col:nth-child(2) { padding: 4rem; } } @media only screen and (max-width: 1419px) { .settings__col:nth-child(2) { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .settings__col:nth-child(2) { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .settings__col:nth-child(2) { padding: 2.5rem 1.5rem; } } .settings__wrapper { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; padding: 5rem; background: #F1F4F4; } @media only screen and (max-width: 1579px) { .settings__wrapper { padding: 4rem; } } @media only screen and (max-width: 1419px) { .settings__wrapper { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .settings__wrapper { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .settings__wrapper { min-height: auto; padding: 2.5rem 1.5rem; } } .settings__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; } @media only screen and (max-width: 1579px) { .settings__head { margin-bottom: 3rem; } } @media only screen and (max-width: 1419px) { .settings__head { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .settings__head { display: block; } } @media only screen and (max-width: 1259px) { .settings__title { font-size: 3rem; } } @media only screen and (max-width: 767px) { .settings__title { margin-bottom: 1rem; } } .settings__menu { margin: 0 -2.5rem auto; } @media only screen and (max-width: 1579px) { .settings__menu { margin: 0 -2rem auto; } } @media only screen and (max-width: 1419px) { .settings__menu { margin: 0 -1.25rem auto; } } @media only screen and (max-width: 1023px) { .settings__menu { margin: 0 -0.75rem 1.5rem; } } @media only screen and (max-width: 767px) { .settings__head .settings__button { width: 100%; } } .settings__link { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 6.25rem; padding: 0 2.5rem; border-radius: 1.25rem; color: #686A6C; cursor: pointer; transition: box-shadow 0.2s, background 0.2s, color 0.2s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @media only screen and (max-width: 1579px) { .settings__link { padding: 0 2rem; } } @media only screen and (max-width: 1419px) { .settings__link { height: 4.5rem; padding: 0 1.25rem; border-radius: 0.75rem; font-size: 1.25rem; line-height: 1.5rem; } } .settings__link .icon { fill: #686A6C; transition: fill 0.2s; } .settings__link:hover, .settings__link.active { color: #202025; } .settings__link:hover .icon, .settings__link.active .icon { fill: #202025; } .settings__link.active { box-shadow: 0 0.75rem 2.5rem -1rem rgba(0, 0, 0, 0.05); background: #F7FBFA; } .settings__upload { display: flex; align-items: center; margin-top: 1.5rem; } @media only screen and (max-width: 767px) { .settings__upload { display: block; } } .settings__preview { position: relative; flex-shrink: 0; width: 12.5rem; height: 12.5rem; margin-right: 2.5rem; border-radius: 2rem; background: #BDC4C4; } @media only screen and (max-width: 1419px) { .settings__preview { width: 10.625rem; height: 10.625rem; margin-right: 1.5rem; } } @media only screen and (max-width: 767px) { .settings__preview { margin: 0 0 1.5rem; } } .settings__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2rem; } .settings__close { position: absolute; top: 1rem; left: 1rem; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #F7FBFA; font-size: 0; transition: background 0.2s; } .settings__close .icon { transition: fill 0.2s; } .settings__close:hover { background: #202025; } .settings__close:hover .icon { fill: #F7FBFA; } .settings__subtitle { margin-bottom: 0.75rem; } @media only screen and (max-width: 1259px) { .settings__subtitle { font-size: 1.5rem; line-height: 2rem; } } .settings__upload .settings__content { max-width: 15.9375rem; margin-bottom: 2rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1419px) { .settings__upload .settings__content { margin-bottom: 1.5rem; } } @media only screen and (max-width: 1259px) { .settings__upload .settings__content { margin-bottom: 0.75rem; } } .settings__file { position: relative; display: inline-block; } .settings__input { position: absolute; inset: 0; opacity: 0; } .settings__section { position: relative; } .settings__section:not(:last-child) { margin-bottom: 5rem; } @media only screen and (max-width: 1419px) { .settings__section:not(:last-child) { margin-bottom: 4rem; } } .settings__anchor { position: absolute; top: -2.5rem; left: 0; right: 0; } @media only screen and (max-width: 1023px) { .settings__anchor { top: -1.5rem; } } .settings__label { margin-bottom: 1.5rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #686A6C; } .settings__fieldset { margin-bottom: 5rem; } @media only screen and (max-width: 1419px) { .settings__fieldset { margin-bottom: 4rem; } } .settings .field:not(:last-child) { margin-bottom: 1.5rem; } .settings__wallet { display: flex; align-items: center; } .settings__icon { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; } .settings__icon img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .settings__details { flex-grow: 1; padding: 0 1.5rem; } @media only screen and (max-width: 767px) { .settings__details { padding: 0 1rem; } } .settings__code { display: flex; align-items: center; margin-bottom: 0.375rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .settings__copy { margin-left: 0.75rem; } .settings__copy .icon { fill: #686A6C; transition: fill 0.2s; } .settings__copy:hover .icon { fill: #202025; } .settings__note { position: relative; display: inline-block; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .settings__note:after { content: ""; position: absolute; top: 50%; right: 0; width: 0.5rem; height: 0.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #9DC628; border-radius: 50%; } .settings__section .settings__button { height: 3.5rem; margin-top: 1.5rem; } .settings__item { display: flex; padding-bottom: 2rem; border-bottom: 0.0625rem solid #E1E2E2; } .settings__item:not(:last-child) { margin-bottom: 1.5rem; } .settings__box { flex-grow: 1; padding-right: 1.5rem; } .settings .toggle { flex-shrink: 0; } .settings__caption { margin-bottom: 0.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } .settings__item .settings__content { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #A6AEAD; } .toggle { position: relative; flex-shrink: 0; display: block; height: 2rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .toggle__input { position: absolute; top: 0; left: 0; opacity: 0; } .toggle__input:checked + .toggle__inner { background: #C5DC45; } .toggle__input:checked + .toggle__inner:before { -webkit-transform: translate(2rem, -50%); transform: translate(2rem, -50%); } .toggle__inner { display: block; width: 4rem; height: 2rem; border-radius: 0.5rem; background: #A6AEAD; transition: background 0.2s; } .toggle__inner:before { content: ""; position: absolute; top: 50%; left: 0.25rem; width: 1.5rem; height: 1.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #F7FBFA; border-radius: 0.25rem; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .help { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .help { display: block; min-height: auto; } } .help__col { flex: 0 0 50%; } .help__col:nth-child(2) { background: #F1F4F4; } .help__wrap { position: sticky; top: 0; display: flex; flex-direction: column; height: 100%; max-height: calc(100vh - 6rem); padding: 5rem; } @media only screen and (max-width: 1579px) { .help__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .help__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .help__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .help__wrap { min-height: auto; padding: 2.5rem 1.5rem; } } .help__title { margin-bottom: 2.5rem; } @media only screen and (max-width: 1419px) { .help__title { margin-bottom: 1.5rem; font-size: 4rem; letter-spacing: -0.02em; } } @media only screen and (max-width: 767px) { .help__title { margin-bottom: 1rem; font-size: 3rem; line-height: 3rem; } } .help__text { margin-bottom: auto; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 1023px) { .help__text { margin-bottom: 1rem; } } .help__category { display: flex; padding: 5rem; color: #202025; transition: box-shadow 0.2s, background 0.2s; } @media only screen and (max-width: 1579px) { .help__category { padding: 4rem; } } @media only screen and (max-width: 1419px) { .help__category { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .help__category { padding: 2.5rem 1.5rem; } } @media only screen and (max-width: 767px) { .help__category { display: block; } } .help__category:hover { background: #F7FBFA; box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, 0.1); } .help__category:hover .help__preview { background: #202025; } .help__details, .help__preview { flex: 0 0 calc(50% - 1.75rem); width: calc(50% - 1.75rem); } @media only screen and (max-width: 1419px) { .help__details, .help__preview { flex: 0 0 calc(50% - 0.75rem); width: calc(50% - 0.75rem); } } @media only screen and (max-width: 767px) { .help__details, .help__preview { width: 100%; } } .help__preview { position: relative; margin-left: 1.75rem; background: #F7FBFA; border-radius: 2rem; transition: background 0.2s; } @media only screen and (max-width: 1419px) { .help__preview { margin-left: 0.75rem; } } @media only screen and (max-width: 767px) { .help__preview { margin: 0; } } .help__preview:before { content: ""; display: block; padding-bottom: 100%; } @media only screen and (max-width: 767px) { .help__preview:before { padding-bottom: 73.5%; } } .help__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2rem; } .help__details { display: flex; flex-direction: column; align-items: flex-start; margin-right: 1.75rem; } @media only screen and (max-width: 1419px) { .help__details { margin-right: 0.75rem; } } @media only screen and (max-width: 767px) { .help__details { margin: 0 0 1.5rem; } } .help__color { width: 3.75rem; height: 1rem; margin-bottom: 1.5rem; border-radius: 1rem; } .help__subtitle { margin-bottom: auto; } @media only screen and (max-width: 1259px) { .help__subtitle { font-size: 1.5rem; line-height: 2rem; } } @media only screen and (max-width: 1023px) { .help__subtitle { font-size: 2.5rem; line-height: 3rem; } } @media only screen and (max-width: 767px) { .help__subtitle { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; } } .help__content { margin-top: 1.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } @media only screen and (max-width: 767px) { .help__content { margin-top: 0; } } .categories { display: flex; min-height: calc(100vh - 6rem); } @media only screen and (max-width: 1023px) { .categories { display: block; min-height: auto; } } .categories__col { flex: 0 0 50%; } .categories__col:nth-child(1) { background: #F1F4F4; } .categories__col:nth-child(2) { padding: 3.5rem 5rem 5rem; } @media only screen and (max-width: 1579px) { .categories__col:nth-child(2) { padding: 3rem 4rem 4rem; } } @media only screen and (max-width: 1419px) { .categories__col:nth-child(2) { padding: 2rem 2.5rem 4rem; } } @media only screen and (max-width: 1259px) { .categories__col:nth-child(2) { padding: 1.5rem 2.5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .categories__col:nth-child(2) { padding: 2.5rem 1.5rem; } } .categories__wrap { position: sticky; top: 0; display: flex; flex-direction: column; height: 100%; max-height: calc(100vh - 6rem); padding: 8rem 5rem 5rem; overflow: hidden; } @media only screen and (max-width: 1579px) { .categories__wrap { padding: 4rem; } } @media only screen and (max-width: 1419px) { .categories__wrap { padding: 4rem 2.5rem; } } @media only screen and (max-width: 1259px) { .categories__wrap { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .categories__wrap { display: block; min-height: auto; padding: 2.5rem 1.5rem; } } .categories__top { display: flex; justify-content: space-between; } .categories__title { margin-right: 2rem; } @media only screen and (max-width: 767px) { .categories__title { font-size: 2.5rem; line-height: 3rem; } } .categories__back { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 5rem; height: 5rem; background: #F7FBFA; border-radius: 50%; box-shadow: 0 1.25rem 1rem -0.375rem rgba(0, 0, 0, 0.15); transition: all 0.2s; } @media only screen and (max-width: 767px) { .categories__back { width: 3.75rem; height: 3.75rem; } } .categories__back .icon { transition: fill 0.2s; } .categories__back:hover { background: #202025; } .categories__back:hover .icon { fill: #F7FBFA; } .categories__preview { position: relative; max-width: 31.25rem; margin-left: -5rem; } @media only screen and (max-width: 1579px) { .categories__preview { margin-left: -6rem; } } @media only screen and (max-width: 1023px) { .categories__preview { max-width: 25rem; margin: -1rem 0 -1.5rem -5rem; } } @media only screen and (max-width: 767px) { .categories__preview { margin: -2.5rem 0 -4.5rem -5rem; } } .categories__preview:before { content: ""; display: block; padding-bottom: 100%; } .categories__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .categories .form { margin-bottom: 4rem; } @media only screen and (max-width: 1023px) { .categories .form { margin-bottom: 3rem; } } @media only screen and (max-width: 767px) { .categories .form { margin-bottom: 1.5rem; } } .categories__item { padding-bottom: 3rem; border-bottom: 0.0625rem solid #E1E2E2; } @media only screen and (max-width: 767px) { .categories__item { padding-bottom: 1.5rem; } } .categories__item.active .categories__plus:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .categories__item.active .categories__body { display: block; } .categories__item:not(:last-child) { margin-bottom: 3rem; } @media only screen and (max-width: 767px) { .categories__item:not(:last-child) { margin-bottom: 1.5rem; } } .categories__head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: color 0.2s; } @media only screen and (max-width: 767px) { .categories__head { font-size: 1.5rem; line-height: 2rem; } } .categories__head:hover { color: #C5DC45; } .categories__plus { position: relative; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin: 0.125rem 0.25rem 0 2.5rem; border: 0.0625rem solid #686A6C; border-radius: 50%; } .categories__plus:before, .categories__plus:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #686A6C; } .categories__plus:before { width: 0.625rem; height: 0.0625rem; } .categories__plus:after { width: 0.0625rem; height: 0.625rem; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .categories__body { display: none; padding-top: 2.5rem; } .categories__link { position: relative; display: block; padding-left: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; transition: color 0.2s; } .categories__link .icon { position: absolute; top: 0.25rem; left: 0; -webkit-transform: translateX(-0.25rem); transform: translateX(-0.25rem); fill: #C5DC45; opacity: 0; transition: all 0.2s; } .categories__link:hover { color: #202025; } .categories__link:hover .icon { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .categories__link:hover .categories__circle { opacity: 0; } .categories__link:not(:last-child) { margin-bottom: 1.5rem; } .categories__circle { position: absolute; top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #C5DC45; border-radius: 50%; transition: all 0.2s; } .categories__circle:before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.25rem; height: 0.25rem; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #C5DC45; } .home { position: relative; display: flex; justify-content: center; align-items: center; min-height: 41.25rem; padding: 4rem; } @media only screen and (max-width: 767px) { .home { min-height: 25rem; padding: 3rem 1.5rem; } } .home img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .home:after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); } .home__wrap { position: relative; z-index: 2; max-width: 71.75rem; text-align: center; color: #000; } @media only screen and (max-width: 1419px) { .home__wrap { max-width: 56.25rem; } } @media only screen and (max-width: 767px) { .home__title { font-size: 2.5rem; line-height: 1.2; } } .home__breadcrumbs { margin-top: 2.5rem; text-align: center; font-size: 0; } .home__breadcrumbs li { display: inline; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #000; } @media only screen and (max-width: 767px) { .home__breadcrumbs li { font-size: 1rem; line-height: 1.5rem; } } .home__breadcrumbs li:not(:nth-child(1)):before { content: ""; position: relative; top: -0.3125rem; display: inline-block; width: 0.125rem; height: 0.5rem; margin: 0 1.5rem; background: rgba(225, 226, 226, 0.5); border-radius: 0.0625rem; } @media only screen and (max-width: 767px) { .home__breadcrumbs li:not(:nth-child(1)):before { top: 0; margin: 0 0.75rem; } } .home__breadcrumbs a { display: inline; color: #F7FBFA; transition: color 0.2s; } .home__breadcrumbs a:hover { color: #E1E2E2; } .home__info { margin-top: 1.5rem; } @media only screen and (max-width: 767px) { .home__info { margin-top: 1rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; } } .category { padding: 8rem 5rem; } @media only screen and (max-width: 1579px) { .category { padding: 6.5rem 4rem; } } @media only screen and (max-width: 1419px) { .category { padding: 5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .category { padding: 4rem 1.5rem; } } .category__item { display: flex; align-items: flex-start; } @media only screen and (max-width: 1023px) { .category__item { display: block; max-width: 37.5rem; margin: 0 auto; } } /* .category__item:nth-child(3n+1) .category__preview { background: linear-gradient(136.42deg, #FFE70F 1.16%, #FFC179 22.02%, #FF774C 59.98%, #EF2DD0 102.39%); } .category__item:nth-child(3n+2) .category__preview { background: linear-gradient(137.84deg, #8DE4FF 1.33%, #3062C2 46.68%, #8230C2 106.2%); } .category__item:nth-child(3n+3) .category__preview { background: linear-gradient(137.84deg, #BF8DFF 1.33%, #72EEFF 46.68%, #30C250 106.2%); } */ .category__item:not(:last-child) { margin-bottom: 8rem; } @media only screen and (max-width: 1579px) { .category__item:not(:last-child) { margin-bottom: 5rem; } } @media only screen and (max-width: 1023px) { .category__item:not(:last-child) { margin-bottom: 4rem; } } .category__preview { flex-shrink: 0; /* width: 37.5rem; padding: 3.75rem 3.75rem 0; */ border-radius: 1.5rem; text-align: center; font-size: 0; } .category__preview img { border-radius: 1.5rem; } @media only screen and (max-width: 1419px) { .category__preview { width: 30rem; padding: 3rem 3rem 0; } } @media only screen and (max-width: 1023px) { .category__preview { width: 100%; margin-bottom: 2rem; padding: 3.75rem 3.75rem 0; } } @media only screen and (max-width: 474px) { .category__preview { padding: 2rem 2rem 0; border-radius: 0.875rem; } } .category__preview img { width: 100%; } @media only screen and (max-width: 474px) { .category__preview img { border-radius: 0.6875rem; } } .category .content { padding-left: 10rem; } @media only screen and (max-width: 1579px) { .category .content { padding-left: 4rem; } } @media only screen and (max-width: 1419px) { .category .content { padding-left: 3rem; } } @media only screen and (max-width: 1023px) { .category .content { padding-left: 0; } } @media only screen and (max-width: 1419px) { .category .content h3 { font-size: 2rem; line-height: 2.5rem; } } .articles { display: flex; padding: 8rem 5rem; background: #F1F4F4; } @media only screen and (max-width: 1579px) { .articles { padding: 8rem 4rem; } } @media only screen and (max-width: 1419px) { .articles { padding: 5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .articles { display: block; padding: 4rem 1.5rem; } } .articles__title { width: 100%; max-width: 37.5rem; margin-right: auto; } @media only screen and (max-width: 1419px) { .articles__title { max-width: 30rem; } } @media only screen and (max-width: 1023px) { .articles__title { width: 100%; max-width: 100%; margin: 0 0 2rem; } .articles__title br { display: none; } } .articles__links { flex-grow: 1; padding-left: 10rem; } @media only screen and (max-width: 1579px) { .articles__links { padding-left: 4rem; } } @media only screen and (max-width: 1419px) { .articles__links { padding-left: 3rem; } } @media only screen and (max-width: 1023px) { .articles__links { padding-left: 0; } } .articles__link { position: relative; display: block; padding-left: 2.5rem; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #686A6C; transition: color 0.2s; } .articles__link:before, .articles__link:after { content: ""; position: absolute; border-radius: 50%; } .articles__link:before { top: 0.25rem; left: 0; width: 1.5rem; height: 1.5rem; border: 0.125rem solid #C5DC45; } .articles__link:after { top: 0.875rem; left: 0.625rem; width: 0.25rem; height: 0.25rem; background: #C5DC45; } .articles__link:hover { color: #202025; } .articles__link:not(:last-child) { margin-bottom: 1.5rem; } .blog__item { display: flex; color: #202025; } @media only screen and (max-width: 1023px) { .blog__item { min-height: 37.5rem; } } @media only screen and (max-width: 767px) { .blog__item { display: block; min-height: auto; } .blog__item:not(:last-child) { margin-bottom: 2.5rem; } } .blog__item:nth-child(2n) { flex-direction: row-reverse; } .blog__preview, .blog__details { flex: 0 0 50%; width: 50%; } @media only screen and (max-width: 767px) { .blog__preview, .blog__details { width: 100%; } } .blog__preview { position: relative; overflow: hidden; } .blog__preview:before { content: ""; display: block; padding-bottom: 100%; } .blog__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: all 0.2s; } .blog__preview .blog__button { position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; white-space: nowrap; } .blog__preview:hover img { -webkit-transform: scale(1.03); transform: scale(1.03); -webkit-filter: blur(0.75rem); filter: blur(0.75rem); } .blog__preview:hover .blog__button { opacity: 1; } .blog__details { display: flex; flex-direction: column; padding: 5rem; } @media only screen and (max-width: 1579px) { .blog__details { padding: 4rem; } } @media only screen and (max-width: 1259px) { .blog__details { padding: 2.5rem; } } @media only screen and (max-width: 1023px) { .blog__details { padding: 2.5rem 1.5rem; } } .blog__title { margin-bottom: 2rem; } @media only screen and (max-width: 1259px) { .blog__title { margin-bottom: 1rem; } } @media only screen and (max-width: 1023px) { .blog__title { font-size: 2rem; line-height: 2.5rem; } } .blog__author { display: flex; align-items: center; margin-bottom: 4rem; } @media only screen and (max-width: 1023px) { .blog__author { margin-bottom: 2rem; } } .blog__avatar { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; margin-right: 1.25rem; border: 0.25rem solid #F7FBFA; border-radius: 50%; } .blog__avatar img { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .blog__avatar:before { content: ""; position: absolute; inset: -0.25rem; border: 0.0625rem solid #202025; border-radius: 50%; } .blog__avatar.history:before { inset: -0.1875rem; z-index: 1; background: #F7FBFA; border-color: transparent; } .blog__avatar.history:after { content: ""; position: absolute; inset: -0.25rem; background: conic-gradient(from 180deg at 50% 50%, #5FFF5C -18.66deg, #FFE249 22.23deg, #F35950 78.14deg, #7C5BFF 159deg, #1CE4FF 202.32deg, #5FFF5C 341.34deg, #FFE249 382.23deg); border-radius: 50%; } .blog__name { margin: -0.25rem 0; font-size: 1.125rem; line-height: 2.25rem; letter-spacing: -0.01em; font-weight: 700; } .blog__date { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #686A6C; } .blog__content { max-width: 33.125rem; margin-top: auto; font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } .blog__btns { padding: 5rem; text-align: center; } @media only screen and (max-width: 1579px) { .blog__btns { padding: 4rem; } } @media only screen and (max-width: 1259px) { .blog__btns { padding: 2.5rem 2.5rem 4rem; } } @media only screen and (max-width: 767px) { .blog__btns { padding: 0 1.5rem 4rem; } } .blog__btns .blog__button { min-width: 19.25rem; } @media only screen and (max-width: 767px) { .blog__btns .blog__button { min-width: 100%; } } .blog__btns .spinner { margin: 0 0 0 0.75rem; } .article { padding: 5rem; } @media only screen and (max-width: 1419px) { .article { padding: 5rem 2.5rem; } } @media only screen and (max-width: 1023px) { .article { padding: 4rem 1.5rem; } } @media only screen and (max-width: 767px) { .article { padding: 3rem 1.5rem; } } .article__content { max-width: 60rem; margin: 0 auto; } .article__content:not(:last-child), .article__photo:not(:last-child) { margin-bottom: 7.5rem; } @media only screen and (max-width: 1419px) { .article__content:not(:last-child), .article__photo:not(:last-child) { margin-bottom: 5rem; } } @media only screen and (max-width: 1023px) { .article__content:not(:last-child), .article__photo:not(:last-child) { margin-bottom: 4rem; } } .article__photo { border-radius: 1.5rem; } @media only screen and (max-width: 767px) { .article__photo { margin: 0 -1.5rem; border-radius: 0; } } .article__photo img { width: 100%; border-radius: 1.5rem; } @media only screen and (max-width: 767px) { .article__photo img { min-height: 18.75rem; border-radius: 0; -o-object-fit: cover; object-fit: cover; } } .article__share { max-width: 60rem; margin: 0 auto; } .article__info { margin-bottom: 2rem; font-size: 0.75rem; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; } .article__socials { display: flex; margin: 0 -0.625rem; } .article__social { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; height: 3.5rem; margin: 0 0.625rem; background: #F1F4F4; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #686A6C; transition: background 0.2s, color 0.2s; } @media only screen and (max-width: 767px) { .article__social { font-size: 0; } } .article__social .icon { margin-right: 0.5rem; fill: #686A6C; transition: fill 0.2s; } @media only screen and (max-width: 767px) { .article__social .icon { margin: 0; } } .article__social:hover { background: #202025; color: #F7FBFA; } .article__social:hover .icon { fill: #F7FBFA; } .post { padding: 8rem 0; overflow: hidden; } @media only screen and (max-width: 1419px) { .post { padding: 4rem 0; } } .post__wrapper { position: relative; max-width: 60rem; margin: 0 auto; } @media only screen and (max-width: 1023px) { .post__wrapper { max-width: 100%; padding: 0 1.5rem; } } .post__title { margin-bottom: 6rem; padding-right: 9.75rem; } @media only screen and (max-width: 1419px) { .post__title { margin-bottom: 4rem; } } @media only screen and (max-width: 767px) { .post__title { margin-bottom: 1.5rem; padding-right: 0; } } .post__inner { margin: 0 -1.875rem; } @media only screen and (max-width: 1259px) { .post__inner { margin: 0 -1.25rem; } } @media only screen and (max-width: 767px) { .post__inner { position: relative; padding-top: 6rem; } } .post__item { display: block; margin: 0 1.875rem; color: #202025; transition: color 0.2s; } @media only screen and (max-width: 1259px) { .post__item { margin: 0 1.25rem; } } .post__item:hover { color: #C5DC45; } .post__item:hover .post__preview img { -webkit-transform: scale(1.05); transform: scale(1.05); } .post__preview { position: relative; margin-bottom: 3rem; border-radius: 1.5rem; overflow: hidden; } .post__preview:before { content: ""; display: block; padding-bottom: 100%; } .post__preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1.5rem; transition: all 1s; } .post__subtitle { margin-bottom: 1.5rem; } .post__content { font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 500; color: #686A6C; } .article__content img{ border-radius: 1.5rem; } .support { margin: 40px 0; } .support button { margin-top: 30px; } .support__fieldset { display: flex; margin: 0 -0.625rem 2.5rem; } @media only screen and (max-width: 767px) { .support__fieldset { display: block; margin: 0 0 2.5rem; } } .support .field { flex: 0 0 calc(50% - 1.25rem); width: calc(50% - 1.25rem); margin: 0 0.625rem; } @media only screen and (max-width: 767px) { .support .field { width: 100%; margin: 0; } .support .field:not(:last-child) { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .support__button { width: 100%; } } .field_text { width: 100% !important; } .field_text_wrap { margin: 0 -0.625rem 2.5rem; } .support__fieldset2{ display: block; margin: 0 0.625rem 2.5rem -0.625rem; } .msMiniCart .header__button { display: flex; align-items: center; } .msMiniCart .button-medium svg { vertical-align: top; margin-right: 10px; display: none; margin-left: 0; } .header__button_text { margin-right: 10px; } @media only screen and (max-width: 767px) { .msMiniCart .button-medium svg { display: inline-block; } .header__button_text { display: none; } .support__fieldset2 { display: block; margin: 0 0 2.5rem; } .msMiniCart .header__button { border: none; padding: 0; } } .img-rounded { border-radius: 50%; display: block; } .input-parent { cursor: pointer; } .colors label { border-radius: 50%; display: inline-block; border: 1px solid transparent; } .colors label span{ margin: 5px; } .colors input:checked + label { border: 1px solid #E1E2E2; } input[name="count"] { text-align: center; font-size: 18px; line-height: 1.5rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; background: transparent; height: 60px; width: 120px; } .help-block { color: #fff; margin-top: 10px; } .ranking__count input[name="count"] { width: 60px; height: 40px; } .checkbox{ font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.02em; font-weight: 700; color: #202025; } .checkbox label{ position: relative; display: block; } .checkbox input { display: none; } .checkbox__round { content: " "; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #A6AEAD; display: block; } .checkbox input:checked ~ .checkbox__round__wrap .checkbox__round{ background:#202025 url(../img/check_bg.svg) 50% no-repeat ; border: 1px solid #202025; } .checkbox__desc { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.02em; font-weight: 700; color: #A6AEAD } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid transparent !important; background: transparent !important; font-weight: normal; color: #fff; } .arrow_back { left: auto; margin-top: 0; border: 2px solid #E1E2E2 !important; background: transparent; position: relative; opacity: 1; top: 0; display: block; right: 0; z-index: 3; width: 3.75rem; height: 3.75rem; border: 0.125rem solid transparent; background: #F7FBFA; border-radius: 50%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: all 0.2s; } .arrow_back:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M10.707 17.793a1 1 0 0 1-1.414 1.414L3.5 13.414a2 2 0 0 1 0-2.828l5.793-5.793a1 1 0 0 1 1.414 1.414L5.914 11H20a1 1 0 1 1 0 2H5.914l4.793 4.793z' fill='%23202025'/%3E%3C/svg%3E"); content: ""; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: all 0.2s; } .details-cost__button { cursor: pointer; } .form-group__minus, .form-group__plus { height: 66px; padding: 0 20px; } .details .details-cost__button { padding: 0; } .form-group__minus svg, .form-group__plus svg{ margin: auto; }