/*@font-face {*/ /* font-family: 'Muller';*/ /* src: url('MullerRegular.eot');*/ /* src: local('Muller Regular'), local('MullerRegular'),*/ /* url('/local/templates/credos-new/MullerRegular.eot?#iefix') format('embedded-opentype'),*/ /* url('/local/templates/credos-new/MullerRegular.woff2') format('woff2'),*/ /* url('/local/templates/credos-new/MullerRegular.woff') format('woff'),*/ /* url('/local/templates/credos-new/MullerRegular.ttf') format('truetype');*/ /* font-weight: normal;*/ /* font-style: normal;*/ /*}*/ * {--outline: 1px solid blue;} /*BODY {*/ /* font-family: Muller!important;*/ /*}*/ .container { /* width: 100%; max-width: 1200px; padding: 0; margin: 0 auto; overflow: hidden; */} a, div { box-sizing: border-box; } /* Системный фикс гориз.скролла: full-bleed секции (напр. .cmrc width:100vw в commerce-block.php) шире контентной области на ширину вертикального скроллбара (100vw ⊃ скроллбар, а 50%/контейнер — нет) → лёгкий горизонтальный скролл. Клипуем на body. clip (НЕ hidden) — НЕ ломает position:sticky (CTA лендингов). */ body { overflow-x: clip; } /* Единый контейнер лендингов .cds-container (= сайтовый .container, 1226). Дублируем правило здесь (all.css инлайнится в ВСЕГДА) на глобальном токене --ds-container: на части страниц услуг credos-ds.css НЕ подключается → var(--container) пуст → max-width:none → блоки на .cds-container (related «Читайте также» и др.) растягивались на всю ширину flush-left, вылезая за контейнер. Фолбэк по DS-токену выравнивает их на единый контейнер системно, на всех страницах. */ .cds-container { width: 100%; max-width: var(--ds-container, 1226px); margin-inline: auto; padding-inline: 0; } @media (max-width: 1274px) { .cds-container { padding-inline: var(--ds-gutter, 24px); } } .header .logo__linc { width: 162px; } /* ===== Hero-ромбы главной — формульная зигзаг-сетка (2 ориентации) ===== Один «руль» --sq (размер) → шаг/координаты/габарит контейнера считаются. Две оси: --i (индекс, прогрессия пути) и --par (чётность, чередование). МОБИЛКА (<768): прогрессия по ВЕРТИКАЛИ, чередование ↔ влево/вправо. ДЕСКТОП (≥768): оси МЕНЯЮТСЯ — прогрессия по ГОРИЗОНТАЛИ, чередование ↕. Добавить ромб = дописать + поднять --n (ряды 1..12 предзаданы). */ .first-mnu-holder { --sq: clamp(86px, 24vw, 112px); /* мобилка: размер ромба */ --vd: calc(var(--sq) * 1.41421); /* видимая диагональ = sq·√2 */ --s: calc(var(--vd) * 0.6); /* шаг между центрами */ --n: 4; /* кол-во ромбов (одна цифра) */ position: relative; /* мобилка — зигзаг ВЕРТИКАЛЬНЫЙ */ width: calc(var(--vd) + var(--s)); /* поперёк = 2 «ряда» */ height: calc(var(--vd) + var(--s) * (var(--n) - 1)); /* прогрессия ↓ */ margin-inline: auto; /* мобилка: по центру колонки */ padding: 0; } .first-mnu-holder IMG { max-width: 100%; } /* спец-ть 0,3,0 — перебивает .btn-next.btn-next--with-title{width:110px} ниже по файлу */ .first-mnu-holder .btn-next.btn-next--with-title { position: absolute; margin: 0; width: var(--sq); height: var(--sq); /* позиция по ЦЕНТРУ ромба → rotate(45deg) вокруг центра не сдвигает координату. мобилка: прогрессия по вертикали (--i), чередование по горизонтали (--par) */ left: calc(var(--vd) / 2 + var(--par, 0) * var(--s)); top: calc(var(--vd) / 2 + var(--i, 0) * var(--s)); transform: translate(-50%, -50%) rotate(45deg); } /* чётность (ось чередования) — авто чёт/нечёт */ .first-mnu-holder .btn-next:nth-child(odd) { --par: 0; } .first-mnu-holder .btn-next:nth-child(even) { --par: 1; } /* индекс (ось прогрессии) — предзадано 12 позиций */ .first-mnu-holder .btn-next:nth-child(1) { --i: 0; } .first-mnu-holder .btn-next:nth-child(2) { --i: 1; } .first-mnu-holder .btn-next:nth-child(3) { --i: 2; } .first-mnu-holder .btn-next:nth-child(4) { --i: 3; } .first-mnu-holder .btn-next:nth-child(5) { --i: 4; } .first-mnu-holder .btn-next:nth-child(6) { --i: 5; } .first-mnu-holder .btn-next:nth-child(7) { --i: 6; } .first-mnu-holder .btn-next:nth-child(8) { --i: 7; } .first-mnu-holder .btn-next:nth-child(9) { --i: 8; } .first-mnu-holder .btn-next:nth-child(10) { --i: 9; } .first-mnu-holder .btn-next:nth-child(11) { --i: 10; } .first-mnu-holder .btn-next:nth-child(12) { --i: 11; } /* ДЕСКТОП (≥768) — зигзаг ГОРИЗОНТАЛЬНЫЙ: оси прогрессии/чередования меняются местами */ @media (min-width: 768px) { .first-mnu-holder { --sq: clamp(82px, 7vw, 108px); /* десктоп: размер от вьюпорта */ width: calc(var(--vd) + var(--s) * (var(--n) - 1)); /* прогрессия → горизонталь */ height: calc(var(--vd) + var(--s)); /* 2 ряда вниз */ margin: 18px 0 7%; /* прижато влево к тексту */ } .first-mnu-holder .btn-next.btn-next--with-title { left: calc(var(--vd) / 2 + var(--i, 0) * var(--s)); /* прогрессия → */ top: calc(var(--vd) / 2 + var(--par, 0) * var(--s)); /* чередование ↕ */ } } .section-first { position: relative; /* контекст для -подложки (LCP-кандидат) */ padding: 132px 0 60px; background: url(/local/templates/credos-new/images/bg-01.webp) center center no-repeat; /* fallback под */ background-size: cover; } .section-first__bg { /* реальный = LCP-кандидат, тот же образ пиксель-в-пиксель */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -1; /* за контентом, над fallback-фоном секции */ pointer-events: none; } .section-fp { padding: 5px 0 0; } .section-si { padding: var(--ds-section-y,56px) 0 0; background: url(/local/templates/credos-new/images/bg-02.webp) center center no-repeat; background-size: cover; } .section-si P { font-size: 16px; } .section-si .btn-next { width: 90px; height: 90px; } .section-fi { padding: 120px 0 50px; background: #E8F0F7; background: url(/local/templates/credos-new/images/bg-03.webp) top center no-repeat; background-size: cover; } .section-fi .header-3 { margin-bottom: 65px; } .section-ai { padding: var(--ds-section-y,56px) 0; background: #E8F0F7; background: url(/local/templates/credos-new/images/bg-04.webp) center center no-repeat; background-size: cover; } .section-ai P { font-size: 16px; } .section-pi { padding: var(--ds-section-y,56px) 0; background: #fff; background: url(/local/templates/credos-new/images/bg-05.webp) center center no-repeat; background-size: cover; } .section-ci { padding: var(--ds-section-y,56px) 0 20px; background: url(/local/templates/credos-new/images/bg-06.webp) center center no-repeat; background-size: cover; } .section-footer { background: #E8F0F7; background: url(/local/templates/credos-new/images/bg-07.png) top center no-repeat; background-size: cover; padding: 45px 0 20px; position: relative; } .section-footer-bottom { /* padding-top: 50px;*/ position: relative; } .section-footer:after { content: ""; display: block; height: calc(100% + 60px); top: 0; left: 0; position: absolute; width: 290px; background: url(/local/templates/credos-new/images/bg-07a.png) top right no-repeat; background-size: cover; z-index: 2; } .section-footer .container { } .p-text { margin: 0 0 20px; } .header-1 { font-size: 110px; line-height: 110px; text-transform: uppercase; margin: 0 0 20px; font-weight: 500; color: #0B2856; } .header-2 { font-size: 18px; line-height: 145%; margin: 0 0 30px; font-weight: 400; color: #5BE; } .header-3 { font-size: 40px; line-height: 53px; text-transform: uppercase; margin: 0 0 20px; font-weight: 500; color: #0B2856; } .header-4 { font-size: 24px; line-height: 140%; text-transform: uppercase; margin: 0; font-weight: 500; } .header-5 { font-size: 18px; line-height: 145%; text-transform: uppercase; margin-bottom: 0; margin-top: 0; } .header__center { text-align: center; } .header__bold { font-weight: bold; } .btn-next-project-holder { } .btn-next-holder { display: flex; justify-content: center; align-items: center; } .btn-next { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: var(--col-main-dark); border-radius: 6px; transform: rotate(45deg); box-shadow: 10px 10px 20px 0px rgba(51, 70, 207, 0.2); margin: 13px; text-transform: uppercase; color: #ECEEFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: 145%; text-decoration: none; font-weight: 300; border: none; background: linear-gradient(29deg, var(--ds-accent,#2e47d7) 0%, var(--ds-accent-soft,#4a5fe8) 100%); } .btn-next:hover, .btn-next:active { box-shadow: none; color: #ECEEFF; } .btn-next IMG { transform: rotate(-45deg); } .section-si .btn-next IMG { width: 45px; } .btn-next.btn-text { transform: none; min-width: 200px; } .btn-next.btn-next--with-title { width: 110px; height: 110px; background: radial-gradient(circle, #66C2F0 0%, var(--col-grad-start) 80%); border: 1px solid var(--col-grad-start); } .btn-next.btn-next--with-title SPAN { text-transform: uppercase; color: #fff; font-weight: bold; } /* ЦЕНТР надписи жёстко привязан к ЦЕНТРУ ромба (absolute 50/50 + counter-rotate), независимо от числа строк. Шрифт масштабируется ОТ размера ромба --sq (а не vw) → при сжатии окна ромб и текст уменьшаются синхронно, текст всегда влезает. */ .first-mnu-holder .btn-next.btn-next--with-title SPAN { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: calc(var(--sq) * 1.08); text-align: center; line-height: 1.15; font-size: clamp(11px, calc(var(--sq) * 0.135), 14.5px); } .btn-next.btn-next--with-title:hover { background: #fff; } .btn-next.btn-next--with-title:hover SPAN { position: relative; color: #000; } .btn-next.btn-next--with-title:hover SPAN::after { position: absolute; content: ""; left: 50%; width: 40px; bottom: -1px; transform: translateX(-50%); border-bottom: 2px solid var(--col-grad-end); } .l-row { display: flex; align-items: stretch; justify-content: flex-start; } .l-col { width: 50%; } .l-col-12 {width: calc(100% * 12/12);} .l-col-8 {width: calc(100% * 8/12);} .l-col-6 {width: calc(100% * 6/12);} .l-col-5 {width: calc(100% * 5/12);} .l-col-4 {width: calc(100% * 4/12);} .l-col-3 {width: calc(100% * 3/12);} .l-col-2 {width: calc(100% * 2/12);} .l-col-1 {width: calc(100% * 1/12);} .feature-items { display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: stretch; } .feature-item { width: 25%; padding: 20px; border-radius: 10px; transition: .2s; margin-bottom: 25px; } .feature-item:hover { background: #fff; } .fi-icon { display: flex; justify-content: center; align-items: center; border-radius: 50%; background: transparent; width: 100px; height: 100px; margin-bottom: 50px; } .fi-icon-inner { display: flex; justify-content: center; align-items: center; border-radius: 5px; background: #fff; width: 66px; height: 66px; } .feature-item:hover .fi-icon { background: rgb(51,70,207); background: linear-gradient(45deg, rgba(51,70,207,1) 40%, rgba(148,212,244,1) 100%); } .feature-item:hover .fi-icon-inner { background: transparent; } .feature-item:hover IMG { filter: brightness(0) invert(1); } .fi-text { padding-left: 16px; font-size: 19px; } .feature-item:hover .fi-text { font-weight: bold; } .about-items { display: flex; flex-flow: row wrap; margin-left: -15px; margin-right: -15px; overflow: hidden; align-items: stretch; } .about-item { width: calc(100% / 2 - 40px); margin: 25px 20px; padding: 20px; border-radius: 10px; transition: .2s; height: 250px; } .about-item:not(.disabled) { background: #fff5; } .about-item:not(.disabled):hover { background: #fff; } .about-pie { --col-fill: rgb(85,187,238); --pie-val: 50; --pie-lg: calc(calc(var(--pie-val) / 5 - 5) * 18deg); width: 120px; height: 120px; display: block; border-radius: 50%; background-color: var(--col-fill); background-image: linear-gradient(var(--pie-lg), transparent 50%, var(--col-fill) 50%), linear-gradient(90deg, white 50%, transparent 50%); } .about-item:hover .about-pie { --col-fill: var(--col-main-dark); } .ai-value { font-size: 36px; font-weight: 500; line-height: 145%; height: 100%; display: flex; align-items: center; padding-left: 10px; } .ai-text { margin-top: 30px; } .about-item:hover .ai-text { font-weight: 500; } .ai-graph IMG { width: auto; max-width: 100%; height: 210px; } .p-padded { padding-left: 40px; } .press-items { display: flex; align-items: stretch; flex-flow: row wrap; margin-left: -15px; margin-right: -15px; overflow: hidden; } /* Карточка пресс-центра (главная) — на токенах DS, SSOT-паттерн как .news-item-new */ .press-item { display: flex; flex-flow: column; margin-top: 20px; width: calc(100% / 3 - 30px); margin-left: 15px; margin-right: 15px; margin-bottom: 30px; background: #fff; border: var(--ds-bw,1px) solid var(--ds-line,#e3e3e3); border-radius: var(--ds-r-md,8px); box-shadow: var(--ds-sh-card,0 2px 12px rgba(10,34,94,.05)); text-decoration: none; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; overflow: hidden; justify-content: flex-start; } .press-item:hover { transform: translateY(-4px); box-shadow: var(--ds-sh-lift,0 16px 38px rgba(10,34,94,.14)); border-color: transparent; } .pi-image { display: block; line-height: 0; font-size: 0; overflow: hidden; } .pi-image IMG { width: 100%; height: 220px; object-fit: cover; display: block; border-bottom: var(--ds-bw-accent,3px) solid var(--ds-cyan,#00bef3); transition: transform .5s cubic-bezier(.22,1,.36,1); } .press-item:hover IMG { transform: scale(1.04); } .pi-title { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ds-ink,#0a225e); padding: 22px 22px 0; flex: 1 1 auto; } .pi-meta { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 22px; } .pi-link { color: var(--ds-cyan-deep,#0a87b8); font-size: 13px; line-height: 1.2; font-weight: 600; text-transform: uppercase; display: block; text-decoration: none; } .pi-date { color: var(--ds-muted,#5a6470); font-size: 14px; line-height: 1.2; font-weight: 400; } .v-holder { height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; } .client-items { display: flex; align-items: flex-start; flex-flow: row wrap; overflow: hidden; padding: 5%; } .client-item { position: relative; display: block; width: calc(100% / 6); padding-bottom: calc(100% / 6); margin-left: calc(100% / 6); transition: .2s; } .client-item:nth-child(6n+1), .client-item:nth-child(6n+2), .client-item:nth-child(6n+3) { margin-right: calc(100% / 6); margin-left: 0; } .client-item:hover { /* background: rgb(85,187,238); background: radial-gradient(circle, rgba(85,187,238,1) 0%, rgba(148,212,244,1) 80%); box-shadow: 0px 8px 15px 0px rgba(85,187,238, 0.2); */} .client-item A { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .rhombus-border { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .rhombus-border::before { position: absolute; display: block; content: ''; width: 120%; height: 120%; top: -10%; left: -10%; background: #EDF5FC; transform: rotate(45deg); } .rhombus-border IMG { z-index: 1; max-width: 100%; mix-blend-mode: darken; } .client-item:hover A { } .client-item A::before { position: absolute; display: block; content: ''; width: 120%; height: 120%; top: -10%; left: -10%; background: #EDF5FC; transform: rotate(45deg); } .client-item:hover A::before { background: linear-gradient(0deg, #9ADDFF 0%, #BDE9FF 100%); box-shadow: 10px 10px 20px 0px rgba(189, 233, 255, 0.2); } .client-item:hover A::after { position: absolute; display: block; content: ''; width: 120%; height: 120%; top: -10%; left: -10%; background: url(/local/templates/credos-new/images/ci-hover.svg); background-position: center center; background-repeat: no-repeat; } .client-item A IMG { z-index: 1; max-width: 100%; mix-blend-mode: darken; } .client-item:hover A IMG { visibility: hidden; } .sf-image { width: 100%; } .sf-image IMG { width: 100%; } .sf-items { display: block; padding-left: 20px; padding-right: 120px; margin-bottom: 25px; } .sf-item { position: relative; margin-bottom: 14px; font-size: 16px; line-height: 145%; } .sf-item::before { position: absolute; content: ""; width: 9px; height: 9px; display: block; background: linear-gradient(45deg, rgba(51,70,207,1) 40%, rgba(148,212,244,1) 100%);; left: -10px; top: 0; border-radius: 1px; transform: rotate(45deg) translateY(100%); } @media (max-width: 1199px) { /* .container { padding: 0 20px; }*/ .p-padded { padding-left: 20px; } } @media (max-width: 992px) { .feature-item { width: 50%; } .press-item { width: calc(100% / 2 - 30px); } .client-items .client-item { width: calc(100% / 4); padding-bottom: calc(100% / 4); margin-left: calc(100% / 4); margin-right: 0; } .client-items .client-item:nth-child(4n+1), .client-items .client-item:nth-child(4n+2) { margin-right: calc(100% / 4); margin-left: 0; } .about-pie { width: 100px; height: 100px; } .ai-graph IMG { height: 190px; width: auto; } .press-items { margin: 0; } .header-1 { font-size: 80px; } .section-footer:after {display: none;} } .footer-logo-holder { margin-bottom: 8px; } .footer-logo-holder IMG { max-width: 100%; mix-blend-mode: darken; } .footer-menu { padding: 0; list-style: none; margin: 0; } .footer-menu LI { margin-bottom: 12px; } .footer-menu A { text-decoration: none; color: #080B1F; position: relative; } .footer-menu A:hover { color: var(--ds-accent,#2e47d7); } .f-col-3 .footer-menu A { color: var(--ds-accent,#2e47d7) } .f-col-3 { display: flex; justify-content: flex-end; padding-right: 50px; } .footer-logo { width: 150px; mix-blend-mode: darken; max-width: 100%; display: block; margin-bottom: 10px; } :root { --col-main-dark: var(--ds-accent,#2e47d7); /* 51 70 223 */ --col-grad-start: #56bcef; --col-grad-end: #94D4EE; --col-grad-radial: radial-gradient(circle, var(--col-grad-start) 0%, var(--col-grad-end) 80%); --col-shadow-1: rgba(148, 212, 244, 0.2); --lh-md: 140%; } .finished-projects { display: flex; } .finished-project { display: block; padding: 20px; margin-top: 40px; height: 190px; width: 30%; margin-right: 30px; text-transform: uppercase; border-radius: 10px; background: #fff; text-decoration: none; transition: .2s; color: #000; box-shadow: 0px 8px 15px 0px var(--col-shadow-1); overflow: hidden; } .finished-project:hover { background: var(--col-grad-start); background: var(--col-grad-radial); margin-top: 0; height: 230px; color: #fff; } .fp-year { font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 30px; position: relative; display: inline-block; } .finished-project:hover .fp-year { margin-bottom: 0px; font-weight: 300; font-size: 14px; } .fp-year SPAN { position: relative; white-space: nowrap; } .fp-year SPAN::after { position: absolute; content: ""; width: 5px; height: 5px; display: block; background: var(--col-main-dark); right: -15px; top: 0; border-radius: 1px; transform: rotate(45deg) translateY(100%); } .fp-client { font-size: 16px; line-height: 100%; margin-bottom: 16px; line-height: 120%; } .finished-project:hover .fp-client { margin-bottom: 0px; text-align: right; font-weight: 300; font-size: 14px; max-height: 21px; padding-left: 20px; } .fp-image { display: none; justify-content: center; } .finished-project:hover .fp-image { display: flex; } .fp-title { font-weight: 500; font-size: 18px; line-height: var(--lh-md); } .finished-project:hover .fp-title { font-weight: 400; font-size: 14px; line-height: var(--lh-md); text-align: center; } .fp-meta { display: flex; flex-direction: column; position: relative; } .finished-project:hover .fp-meta { flex-direction: row; justify-content: space-between; } .finished-projects .btn-next-holder { display: flex; justify-content: center; align-items: center; } @media (max-width: 1024px) { .finished-project { width: 50%; } .finished-project:nth-child(3) { display: none; } } @media (max-width: 767px) { .finished-projects { flex-direction: column; } .finished-project { width: 100%; } .finished-projects .btn-next-holder { padding: 40px 0; } } .service-items { display: flex; align-items: flex-start; flex-flow: row wrap; margin-left: -15px; margin-right: -15px; overflow: hidden; } /* DOM: .service-items > .service-items > .service-item — правило margin:-15 срабатывало дважды (-30px), плитки услуг выползали на 15px левее заголовка/портфолио. Гасим отрицательный margin на вложенном уровне → левая кромка = .container (143), ширина = 1226. */ .service-items .service-items { margin-left: 0; margin-right: 0; } .service-item { display: flex; align-items: center; padding: 20px; margin-top: 20px; height: 120px; width: calc(100% / 3 - 30px); margin-left: 15px; margin-right: 15px; border-radius: 10px; background: #fff; text-decoration: none; transition: .2s; color: #fff; box-shadow: 0px 8px 15px 0px rgba(148, 212, 244, 0.2); overflow: hidden; background: var(--col-grad-start); background: var(--col-grad-radial); background: linear-gradient(200deg, #94D4F4 0%, #5BE 100%), linear-gradient(202deg, #94D4F4 0%, #5BE 100%), #E8F0F7; } .service-item:hover { background: var(--col-main-dark); cursor: pointer; } .si-icon { margin-right: 20px; display: flex; height: 100%; align-items: center; } .si-icon .two { display: none; } .service-item:hover .si-icon .one { display: none; } .service-item:hover .si-icon .two { display: block; } .si-title { font-size: 24px; color: #fff; line-height: 145%; text-transform: uppercase; } .service-item:hover .si-title { display: none; } .si-items { display: none; padding-left: 0; } .si-items UL { padding-left: 20px; list-style: none; } .service-item:hover .si-items { display: block; } .si-item, .si-items UL LI { position: relative; color: #fff; margin-bottom: 10px; } .si-item, .si-items UL A + A + * { display: none; } .si-item::before, .si-items UL LI::before { position: absolute; content: ""; width: 9px; height: 9px; display: block; background: #fff; left: -10px; top: 0; border-radius: 1px; transform: rotate(45deg) translateY(100%); } .service-items + .btn-next-holder { padding: 55px 0 50px; display: flex; justify-content: center; } @media (max-width: 992px) { .service-item { width: calc(100% / 2 - 30px); } } .header-inner { padding: 20px 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .header-logo { } .header-menu { } .header-menu #horizontal-multilevel-menu li a:hover { color: var(--ds-accent,#2e47d7); } .header-menu #horizontal-multilevel-menu li.menu__item a.menu__linc:after { background-image: url(/local/templates/credos-new/images/material-symbols_arrow-back-ios.svg); filter: brightness(0); } .header-menu #horizontal-multilevel-menu li.menu__item:hover a.menu__linc:after { filter: none; } .header-search { } .header-search FORM { display: flex; position: relative; } .header-search .search__button { background-image: url(/local/templates/credos-new/images/material-symbols_search.svg); background-size: contain; background-position: center center; position: relative; } .header-search .search__input { display: none; position: absolute; right: 0; } .header-search .search__input::before { content: ""; position: absolute; left: -30px; top: -10px; bottom: -10px; right: -30px; display: block; background: #fff; z-index: 0; border-radius: 25px; border: 1px solid var(--ds-cyan-light,#56bcef); } .header-search .search__input INPUT { position: relative; border-bottom: 1px solid #3447D0; } .header-search .search__input INPUT:focus { border: 0; border-bottom: 1px solid #3447D0; outline: none; } .header-search .search__button { position: relative; border-bottom: none; } .header-search:hover .search__input { display: block; } .footer-menu-holder .footer-menu { display: flex; flex-flow: column wrap; max-height: 110px } .footer-bottom-menu { display: flex; justify-content: center; list-style: none; margin-bottom: 0; } .footer-bottom-menu LI A { padding: 20px 10px; color: var(--ds-accent,#2e47d7); display: block; } .credo-form { } .section-ai .credo-form { margin-top: 45px; } .credo-form .form { max-width: 100%; padding: 0; border: none; } .credo-form INPUT[type="text"], .credo-form INPUT[type="text"]:hover, .credo-form INPUT[type="text"]:focus { outline: none; border: none; border-bottom: 1px solid black; background: none; padding-left: 0; font-size: 16px; font-weight: 300; } .credo-form .form__placeholder { margin-left: 0 !important; font-size: 16px; font-weight: 300; } .credo-form .form-line { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; } .credo-form .form-line .form__input { width: 20%; } .credo-form .form-line-center { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; } .credo-form .form__input--checkbox { margin-bottom: 0; padding: 35px 0 5px; } .credo-form .form__button { max-width: 200px; color: #fff; border: none; } .credo-form .form__input--error .form__input__text, .credo-form .form__input--error .form__placeholder, .credo-form .form__input--error INPUT { color: red; border-color: red; } .credo-form .form__input--error .form__error-text { display: none; } @media (max-width: 992px) { .credo-form .form-line { flex-direction: column; flex-wrap: wrap; align-content: center; } .credo-form .form-line .form__input { width: 45%; } .header-search { display: none; } .header { padding: 0px; } } @media (max-width: 767px) { .credo-form .form-line { flex-direction: column; } .credo-form .form-line .form__input { width: 100%; } .service-items, .about-items { margin: 0; } .container {padding: 0 10px} .footer-bottom-menu { flex-direction: column; } .footer-bottom-menu LI A { padding: 5px; } } .header .menu__line { background-color: var(--ds-accent,#2e47d7); } .header .header-menu { width: 100%; } .header .menu__list { background: #fff; border: 0; border-radius: 10px; width: 100%; left: auto; right: 0; padding-left: 50px; /* padding-right: 50px; */ justify-content: space-between; } .header .menu__item { margin-right: 0; position: relative; } .header #horizontal-multilevel-menu li a { color: #000; } .menu__item.depth-1:hover::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 5px; height: 5px; background: var(--ds-accent,#2e47d7); transform: rotate(45deg); } .footer-menu LI A:not(.footer__linc):hover::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 5px; height: 5px; background: var(--ds-accent,#2e47d7); transform: rotate(45deg); } @media (max-width: 767px) { .service-item { width: calc(100% - 30px); } .container { padding-left: 15px!important; padding-right: 15px!important; } .header .logo__linc { width: 190px; } .header { padding: 15px 10px; } .section-first { padding: 110px 0 30px; } .section-ai .jq-checkbox { width: 31px; height: 31px; } .section-ai .jq-checkbox.checked .jq-checkbox__div { width: 26px; height: 31px; background-position: center center; } .section-fi { padding: 150px 0 50px; } .header-2 {margin: 0 0 5px;} .feature-item { padding: 0; } .client-items { padding: 10%; overflow: visible; } .header .header-menu { width: auto; } .footer-bottom-menu LI A { padding: 5px 0; color: var(--ds-accent,#2e47d7); display: block; } .p-padded { padding-left: 0; } .footer-bottom-menu { justify-content: flex-start; } .footer-bottom-menu { padding-left: 0; } .section-footer { background: #E8F0F7; } .section-footer-bottom { background: #FFF; } } .section-si .slider-block {display: none;} /* .header .menu__line { width: 52px; height: 3px; margin-bottom: 12px; }*/ .time-form { display: none; } @media (max-width: 767px) { .l-col {width: 100%;} .l-col-12 {width: 100%;} .l-col-8 {width: 100%;} .l-col-6 {width: 100%;} .l-col-5 {width: 100%;} .l-col-4 {width: 100%;} .l-col-3 {width: 100%;} .l-col-2 {width: 100%;} .l-col-1 {width: 100%;} .feature-item { width: 100%; display: flex; align-items: center; justify-content: flex-start; } .fi-icon { margin-bottom: 0; } .fi-text { flex: 1; } .press-item { width: calc(100% - 30px); } .l-row { flex-wrap: wrap; } .about-item { width: calc(100% - 30px); height: auto; } .about-item .l-row { flex-wrap: nowrap; } .hidden-mobile { display: none; } .header-1 { font-size: 18vw; } .sf-items { padding-right: 20px; } /* .first-mnu-holder { display: flex; justify-content: center; } .first-mnu-holder .btn-next:nth-child(2) { margin-left: 0; margin-top: 10px; } */ .header-3 { font-size: 25px; font-weight: 400; line-height: 135%; } .f-col-1 { order: 1; width: 50%; } .f-col-2 { order: 3; width: 100%; } .f-col-3 { order: 2; width: 50%; justify-content: flex-start; } .f-col-4 { order: 4; } .pi-title { height: auto; padding-bottom: 20px; } .section-first { padding-bottom: 30px; } .section-si { padding-top: 30px; } .si-title { font-size: 4.5vw; } .si-content { font-size: 2.5vw; } } .add_menu .head-h2.completed-projects__head-h2.head-h2--temp { font-weight: 500; } .text-service h2 { font-size: 44px; font-weight: 400; }