/* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvuYwYL8g.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvhYwYL8g.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvtYwYL8g.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: oblique 0deg 10deg; font-weight: 100 900; font-display: swap; src: url(../fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 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, main, menu, nav, output, ruby, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; color: inherit; text-decoration: none; text-transform: none; outline: none; border: none; } h1, h2, h3, h4, h5, h6 { font-size: unset; font-weight: unset; margin-block-start: unset; margin-block-end: unset; margin-inline-start: unset; margin-inline-end: unset; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; border-spacing: 0; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; outline: none; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* HTML5 hidden-attribute fix for newer browsers */ *[hidden] { display: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } img { max-inline-size: unset; max-block-size: unset; user-select: none; } .preloader { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: z-index 0s 1s; } .preloader:before, .preloader:after { content: ''; position: absolute; left: 0; width: 100%; height: 50.5%; background: #000; } .preloader:before { top: 0; transition: top 0.5s; } .preloader:after { bottom: 0; transition: bottom 0.5s; } .preloader .text { overflow: hidden; position: relative; z-index: 10; display: flex; flex-flow: column nowrap; align-items: center; line-height: 1; font-weight: 700; color: #FFF; height: 1em; justify-content: flex-end; } .preloader .text span { text-transform: uppercase; } .preloader .text span:last-child { margin-bottom: 1em; animation: slideText 5s linear 1s 1 normal forwards; } .preloader.close { z-index: -1; } .preloader.close:before { top: -50.5%; } .preloader.close:after { bottom: -50.5%; } .preloader.close .text { display: none; } @keyframes slideText { 0% { margin-bottom: 1em; } 8% { margin-bottom: 0; } 18% { margin-bottom: 0; } 26% { margin-bottom: -1em; } 36% { margin-bottom: -1em; } 44% { margin-bottom: -2em; } 54% { margin-bottom: -2em; } 62% { margin-bottom: -3em; } 72% { margin-bottom: -3em; } 80% { margin-bottom: -4em; } 100% { margin-bottom: -4em; } } :root { --ratio: 1.406; --scale: 1; } html, body { font-family: Inter, sans-serif; font-size: 16px; font-weight: 400; } html { width: 100%; height: 100%; } body { overflow: hidden; min-width: calc((var(--1dvw, 1vw) * 100) / var(--scale)); min-height: calc((var(--1dvh, 1vh) * 100) / var(--scale)); max-width: calc((var(--1dvw, 1vw) * 100) / var(--scale)); max-height: calc((var(--1dvh, 1vh) * 100) / var(--scale)); transform: scale(var(--scale)); transform-origin: top left; display: flex; flex-flow: column nowrap; background: #E9E9E9; } .openModal, .closeModal { cursor: pointer; } .header { flex-flow: row nowrap; padding: 0 28px; min-height: 74px; border-bottom: 1px solid #AEAEAE; } .header .logo { display: flex; align-items: center; } .header .logo img { height: 22px; } .header .desktopMenu { display: flex; flex-flow: row nowrap; margin-left: 100px; } .header .desktopMenu .menuItem { padding: 0 24px; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; } .header .desktopMenu .menuItem:hover { background: #FFFFFF; } .header .desktopMenu .menuItem:hover .subMenu { padding: 14px 0; height: 148px; } .header .desktopMenu .subMenu { overflow: hidden; position: absolute; z-index: 99999; top: calc(100% + 1px); left: 0; width: 440px; height: 0; padding: 0; transition: height 0.2s, padding 0.2s; background: #FFFFFFCC; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .header .desktopMenu .subMenu a { display: inline-block; padding: 10px 24px; } .header .orderLink { display: flex; align-items: center; margin-left: auto; } .header .burger { display: flex; align-items: center; margin-left: 50px; } main.main { flex-flow: column nowrap; position: relative; padding: 32px 24px 45px; flex: 1; } main.main .button { margin-top: 20px; text-transform: uppercase; width: 250px; height: 72px; display: flex; align-items: center; justify-content: center; color: #FFF; background: #000; font-weight: 600; cursor: pointer; } main.main.index .topText { display: flex; flex-flow: column nowrap; font-size: 20px; line-height: 1.3; width: 640px; } main.main.index .imageWrapper { position: absolute; } main.main.index .imageWrapper .plusButton { position: absolute; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; color: #FFF; background: #000; } main.main.index .imageWrapper .plusButton:after { content: '+'; font-weight: 300; font-size: 20px; margin-bottom: 3px; } main.main.index .imageWrapper .plusButton:hover + .tooltip { z-index: 998; opacity: 1; } main.main.index .imageWrapper.open .tooltip { z-index: 998; opacity: 1; } main.main.index .imageWrapper .tooltip { position: absolute; z-index: -1; opacity: 0; background: #FFFFFFCC; width: 440px; padding: 24px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity 0.2s; } main.main.index .imageWrapper .tooltip .title { text-transform: uppercase; font-size: 18px; font-weight: 700; line-height: 20px; letter-spacing: 0.03em; margin-bottom: 12px; } main.main.index .imageWrapper .tooltip .description { font-size: 16px; font-weight: 300; line-height: 1.3; } main.main.index .imageWrapper.development .plusButton { top: 92px; right: 52px; } main.main.index .imageWrapper.development .tooltip { top: 86px; right: 79px; transform: translate(100%, -100%); } main.main.index .imageWrapper.development img { width: 350px; height: 350px; transform: rotate(-124.5deg); } main.main.index .imageWrapper.marketing .plusButton { bottom: 230px; right: 245px; } main.main.index .imageWrapper.marketing .tooltip { bottom: 263px; right: 272px; transform: translate(100%, 0); } main.main.index .imageWrapper.marketing img { width: 408px; height: 408px; transform: rotate(43.6deg); } main.main.index .imageWrapper.audit .plusButton { bottom: 155px; right: 275px; } main.main.index .imageWrapper.audit .tooltip { bottom: 188px; right: 275px; } main.main.index .imageWrapper.audit img { width: 340px; height: 340px; transform: rotate(-17deg); } main.main.about { overflow-x: hidden; overflow-y: auto; } main.main.about .topText { font-size: 50px; font-weight: 700; line-height: 1; max-width: 900px; text-transform: uppercase; margin: 28px 0 40px; } main.main.about .company { position: relative; display: flex; flex-flow: row nowrap; padding-bottom: 60px; } main.main.about .company:after { content: ''; display: block; width: calc(100% + 80px); position: absolute; left: -40px; bottom: 0; border-bottom: 1px solid #AEAEAE; } main.main.about .company .indent { flex: 0 0 200px; } main.main.about .company .first { flex: 1 1 595px; margin-right: 60px; } main.main.about .company .second { flex: 1 1 469px; } main.main.about .team { display: flex; flex-flow: row nowrap; margin-top: 60px; } main.main.about .team .indent { flex: 0 0 200px; } main.main.about .team .employees { flex: 1 1 1124px; display: flex; flex-flow: row wrap; margin: 0 -28px 32px 0; } main.main.about .team .employees .employee { display: flex; flex-flow: column nowrap; margin: 0 28px 28px 0; flex: 0 1 calc(25% - 28px); font-weight: 400; line-height: 1.3; } main.main.about .team .employees .employee img { max-width: 100%; } main.main.about .team .employees .employee .name { margin-top: 12px; font-size: 16px; } main.main.about .team .employees .employee .position { margin-top: 2px; font-size: 12px; color: #AEAEAE; } main.main.about .order { position: relative; padding-top: 60px; margin-bottom: 100px; } main.main.about .order:before { content: ''; display: block; width: calc(100% + 80px); position: absolute; left: -40px; top: 0; border-bottom: 1px solid #AEAEAE; } main.main.about .order .disclaimer { font-size: 50px; font-weight: 700; line-height: 1; text-transform: uppercase; padding-bottom: 20px; } main.main.about .logo img { width: 100%; } main.main.about .footer { display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 16px; line-height: 1.1; margin-top: 36px; } main.main.cases { overflow-x: hidden; overflow-y: auto; } main.main.cases .top { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; margin-top: 28px; } main.main.cases .top .topText { text-transform: uppercase; font-size: 50px; font-weight: 700; line-height: 1; } main.main.cases .top .subMenu { display: flex; flex-flow: row nowrap; font-size: 16px; line-height: 1.1; } main.main.cases .top .subMenu a:not(:last-child) { margin-right: 28px; } main.main.cases .top .subMenu a.active { font-weight: 700; pointer-events: none; } main.main.cases .list { display: flex; flex-flow: row wrap; margin: 24px -12px 36px 0; } main.main.cases .list .case { display: flex; flex-flow: column nowrap; flex: 0 0 calc(50% - 12px); margin: 0 12px 24px 0; } main.main.cases .list .case img { width: 100%; } main.main.cases .list .case .title { margin-top: 12px; font-size: 16px; line-height: 1.3; } main.main.cases .order { position: relative; padding-top: 60px; margin-bottom: 100px; } main.main.cases .order:before { content: ''; display: block; width: calc(100% + 80px); position: absolute; left: -40px; top: 0; border-bottom: 1px solid #AEAEAE; } main.main.cases .order .disclaimer { font-size: 50px; font-weight: 700; line-height: 1; text-transform: uppercase; padding-bottom: 20px; } main.main.cases .logo img { width: 100%; } main.main.cases .footer { display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 16px; line-height: 1.1; margin-top: 36px; } main.main.case { position: relative; overflow-x: hidden; overflow-y: auto; flex-flow: row nowrap; padding: 0; } main.main.case .gallery { display: flex; flex-flow: column nowrap; flex: 0 0 50%; padding: 0 0 0 24px; } main.main.case .gallery img { width: 100%; vertical-align: top; } main.main.case .description { display: flex; flex-flow: column nowrap; position: sticky; top: 0; padding: 28px; flex: 0 0 50%; } main.main.case .description .back { margin-bottom: 20px; display: inline-block; } main.main.case .description .row { display: flex; flex-flow: row nowrap; line-height: 1.3; padding: 20px 0; } main.main.case .description .row:not(:last-of-type) { border-bottom: 1px solid #AEAEAE; margin-bottom: 5px; } main.main.case .description .row .name { flex: 0 0 140px; font-size: 12px; color: #AEAEAE; } main.main.case .description .row .value { flex: 1 1 100%; } main.main.case .description .row .value li:not(:last-child) { margin-bottom: 10px; } main.main.case .description .button { margin-top: auto; } main.main.service { padding: 0; } main.main.service .content { display: flex; flex-flow: row nowrap; flex: 1; } main.main.service .content table { table-layout: fixed; width: 100%; text-align: left; } main.main.service .content table th { width: 50%; } main.main.service .content table td { vertical-align: top; } main.main.service .content table tbody tr { border-top: 1px solid #AEAEAE; height: 0; } main.main.service .content table tbody tr:last-child { height: auto; } main.main.service .content table tbody tr td:not(:last-child) { border-right: 1px solid #AEAEAE; } main.main.service .content .title, main.main.service .content .description { padding: 60px 28px; } main.main.service .content .title { font-size: 50px; font-weight: 700; line-height: 1; vertical-align: top; } main.main.service .content .description { font-size: 20px; font-weight: 400; line-height: 1.3; } main.main.service .content .subtitle { font-size: 18px; font-weight: 700; line-height: 1.1; padding: 26px 28px; text-transform: uppercase; } main.main.service .content .advantages { padding: 0 28px; } main.main.service .content .advantages .advantage { display: flex; width: 100%; flex-flow: row nowrap; padding: 32px 0; font-size: 16px; font-weight: 400; line-height: 1.3; } main.main.service .content .advantages .advantage .mainText { font-weight: 700; flex: 0 0 260px; padding-right: 28px; } main.main.service .content .advantages .advantage .addText { flex: 1; } main.main.service .content .advantages .advantage:not(:last-child) { border-bottom: 1px solid #AEAEAE; } main.main.service .content .process { position: relative; padding: 28px 28px 0; } main.main.service .content .process .processWrapper { display: flex; flex-flow: row nowrap; } main.main.service .content .process .timeline, main.main.service .content .process .timepoint_description { flex: 0 0 50%; } main.main.service .content .process .timepoint { position: relative; height: 28px; line-height: 28px; font-size: 16px; font-weight: 700; padding-left: 40px; color: #626262; cursor: pointer; } main.main.service .content .process .timepoint:before { content: ''; background-color: #AEAEAE; background-image: url("/img/check_gray.svg"); background-position: center; background-size: 12px 8px; background-repeat: no-repeat; width: 28px; height: 28px; border-radius: 14px; position: absolute; z-index: 2; top: 0; left: 0; } main.main.service .content .process .timepoint:not(:last-child) { margin-bottom: 70px; } main.main.service .content .process .timepoint:not(:first-child):after { content: ''; background-color: #AEAEAE; background-repeat: no-repeat; width: 5px; height: 98px; position: absolute; z-index: 1; bottom: 14px; left: 11.5px; pointer-events: none; cursor: default; } main.main.service .content .process .timepoint.active:before { background-image: url("/img/check_white.svg"); background-color: #000; } main.main.service .content .process .timepoint.active:after { background-color: #000; } main.main.service .content .process .timepoint_description ul { font-size: 16px; font-weight: 400; line-height: 20px; } main.main.service .content .process .timepoint_description li { position: relative; margin-bottom: 12px; padding-left: 16px; } main.main.service .content .process .timepoint_description li:before { content: ''; width: 4px; height: 4px; border-radius: 2px; background-color: currentColor; position: absolute; top: 8px; left: 0; } main.main.service .content .process .button { position: absolute; left: 28px; bottom: 28px; } main.main.service .navigation { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-top: 1px solid #AEAEAE; height: 72px; } main.main.service .navigation .prev, main.main.service .navigation .next { display: flex; height: 72px; width: 72px; justify-content: center; align-items: center; } main.main.service .navigation .prev { border-right: 1px solid #AEAEAE; } main.main.service .navigation .next { border-left: 1px solid #AEAEAE; } main.main.service .navigation .next img { transform: rotate(180deg); } main.main.service .navigation .dots { display: flex; flex-flow: row nowrap; align-items: center; } main.main.service .navigation .dots a { display: block; height: 12px; width: 12px; border: 1px solid #000; border-radius: 6px; } main.main.service .navigation .dots a:not(:last-child) { margin-right: 12px; } main.main.service .navigation .dots a.active { background: #000; pointer-events: none; } .modal { flex-flow: column nowrap; position: absolute; z-index: -1; opacity: 0; background: #FFFFFFCC; padding: 20px; top: 50%; left: 50%; transform: scale(0.8) translate(-50%, 50%); transform-origin: top left; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: transform 0.5s, opacity 0.45s, z-index 0s 0.5s; } .modal.open { z-index: 999; opacity: 1; transform: scale(1) translate(-50%, -50%); transition: transform 0.5s, opacity 0.45s, z-index 0s; } .modal.contact { width: 960px; min-height: 660px; } .modal.contact form { display: inherit; flex-flow: inherit; } .modal.contact .closeButton { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; color: #FFF; background: #000; margin-left: auto; margin-bottom: 20px; transform: rotate(45deg); cursor: pointer; } .modal.contact .closeButton:after { content: '+'; font-weight: 300; font-size: 20px; margin-bottom: 3px; } .modal.contact .title { display: flex; font-size: 40px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 30px; } .modal.contact .input { border: 1px solid #AEAEAE; font-size: 18px; font-weight: 300; font-family: inherit; line-height: 16px; padding: 19px 20px; margin-bottom: 30px; color: #000; } .modal.contact .input:focus { border-color: #000; } .modal.contact .input::placeholder { color: #626262; } .modal.contact .input.error { border-color: #A22; } .modal.contact textarea.input { height: 120px; resize: none; } .modal.contact .description { font-size: 28px; font-weight: 300; } .modal.contact .button { text-transform: uppercase; width: 250px; height: 72px; display: flex; align-items: center; justify-content: center; color: #FFF; background: #000; font-weight: 600; cursor: pointer; } .modal.contact .button:disabled { background: #626262; cursor: default; } .modal.contact:not(.success) > .success { display: none; } .modal.contact:not(.error) > .error { display: none; } .modal.contact.success > .main, .modal.contact.error > .main { display: none; } .modal.menu { width: 100%; height: 100%; background: #FFFFFF; padding: 0; } .modal.menu .header { display: flex; } .modal.menu .header .burger { margin-left: auto; } .modal.menu .mainMenu { display: flex; flex-flow: row nowrap; flex: 1; } .modal.menu .mainMenu .left { display: flex; flex-flow: column nowrap; flex: 1 1 700px; border-right: 1px solid #AEAEAE; padding: 32px 28px; } .modal.menu .mainMenu .right { display: flex; flex-flow: column nowrap; flex: 1 1 500px; padding: 32px 28px; } .modal.menu .mainMenu .block { height: 330px; line-height: 1.1; display: flex; flex-flow: column nowrap; } .modal.menu .mainMenu .block .title { font-size: 16px; color: #00000066; } .modal.menu .mainMenu .block .link { font-size: 40px; } .modal.menu .mainMenu .block > :not(:last-child) { margin-bottom: 20px; } .modal.menu .mainMenu .footer { margin-top: auto; font-size: 16px; color: #00000066; } @media (min-aspect-ratio: 1340/1024) { .m1340:not(.square) { display: none; } } .horizontal:not(.square):not(.m1340), .vertical:not(.square):not(.m1340), .mobile:not(.square):not(.m1340) { display: none !important; } @media (min-aspect-ratio: 1340/1024) { .m1340 { display: none; } } main.main.index .bottomText { font-size: 100px; line-height: 1; font-weight: 700; text-transform: uppercase; margin-top: auto; } main.main.index .imageWrapper.development { bottom: calc(320px + ((var(--ratio) - 1.406) * -172.4137931px)); left: 45px; } main.main.index .imageWrapper.marketing { top: 85px; right: calc(407px + ((var(--ratio) - 1.406) * 768.4729064px)); } main.main.index .imageWrapper.marketing .tooltip { right: 245px; transform: translate(0, 0); } main.main.index .imageWrapper.audit { bottom: calc(220px + ((var(--ratio) - 1.406) * 431.03448276px)); right: calc(90px + ((var(--ratio) - 1.406) * 270.93596059px)); } .preloader { font-size: 50px; } /*# sourceMappingURL=dts.css.map */