/* Webfont: Steppe */
@font-face {
font-family: 'Steppe';
src: url('fonts/Steppe.eot'); /* IE9 Compat Modes */
src: url('fonts/Steppe.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Steppe.woff') format('woff'), /* Modern Browsers */
url('fonts/Steppe.ttf') format('truetype'); /* Safari, Android, iOS */
font-style: normal;
font-weight: normal;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Steppe';
src: local('Steppe Bold'), local('Steppe-Bold'),
url('fonts/Steppe-Bold.woff2') format('woff2'),
url('fonts/Steppe-Bold.woff') format('woff'),
url('fonts/Steppe-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
/*@font-face {
font-family: 'Steppe';
src: local('Steppe Extra Bold'), local('Steppe-Extra-Bold'),
url('fonts/fonts/Steppe-ExtraBold.woff2') format('woff2'),
url('fonts/fonts/Steppe-ExtraBold.woff') format('woff'),
url('fonts/fonts/Steppe-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}*/
/*common*/
:root {
/*colors*/
--color-main: rgb(41 110 240 / 100%);
--color-main-85: rgb(41 110 240 / 85%);
--color-main-75: rgb(41 110 240 / 75%);
--color-main-70: rgb(41 110 240 / 70%);
--color-main-50: rgb(41 110 240 / 50%);
--color-main-33: rgb(41 110 240 / 33%);
--color-main-25: rgb(41 110 240 / 25%);
--color-main-20: rgb(41 110 240 / 20%);
--color-main-10: rgb(41 110 240 / 10%);
--color-main-dark: rgb(0 32 101 / 100%);
--color-main-dark-10: rgb(0 32 101 / 10%);
--color-main-dark-20: rgb(0 32 101 / 20%);
--color-main-dark-33: rgb(0 32 101 / 33%);
--color-main-dark-50: rgb(0 32 101 / 50%);
--color-main-dark-75: rgb(0 32 101 / 75%);
--color-black: rgb(5 5 5);
/* Рофла для */
/*
--color-main: rgb(255 69 0 / 100%);
--color-main-85: rgb(255 69 0 / 85%);
--color-main-750: rgb(255 69 0 / 75%);
--color-main-70: rgb(255 69 0 / 70%);
--color-main-50: rgb(255 69 0 / 50%);
--color-main-33: rgb(255 69 0 / 33%);
--color-main-25: rgb(255 69 0 / 25%);
--color-main-20: rgb(255 69 0 / 20%);
--color-main-10: rgb(255 69 0 / 10%);
--color-main-dark: rgb(155 42 0 / 100%);
--color-main-dark-10: rgb(155 42 0 / 10%);
--color-main-dark-20: rgb(155 42 0 / 20%);
--color-main-dark-33: rgb(155 42 0 / 33%);
--color-main-dark-50: rgb(155 42 1 / 50%);
--color-main-dark-75: rgb(155 42 0 / 75%);
*/
/* Конец Рофла */
--color-gray-light: rgb(239 243 244);
--color-gray-light-75: rgb(239 243 244 / 75%);
--color-gray-light-50: rgb(239 243 244 / 50%);
--color-gray-light-25: rgb(239 243 244 / 25%);
--color-gray-lighter: #CDCDCD;
/*font-size*/
--fz-xxxxl: clamp(25px,3.5vw,60px);
--fz-xxxl: clamp(20px,2vw,32px);
--fz-xxl: clamp(19px,1.75vw,28px);
--fz-xl: clamp(18px,1.5vw,23px);
--fz-l: clamp(17px,1.25vw,20px);
--fz-m: clamp(16px,1.125vw,18px);
--fz-sm: clamp(14px,1vw,16px);
--fz-xs: clamp(12px,0.875vw,14px);
--fz-xxs: clamp(12px,0.9625vw,16px);
/*gaps*/
--gap-small: clamp(0.5em,1vw,1em);
--gap-medium: clamp(0.75em,1.5vw,1.5em);
--gap-large: clamp(1em,2vw,2em);
/*paddings*/
--p-3: clamp(1.5em,3vw,3em);
--p-2: clamp(1em,2vw,2em);
--p-15: clamp(0.75em,1.5vw,1.5em);
--p-1: clamp(0.5em,1vw,1em);
--p-075: clamp(0.375em,0.75vw,0.75em);
/*Swiper*/
--swiper-theme-color: rgb(41 110 240 / 100%);
/*gradients*/
--gr-v1: linear-gradient(176deg, rgb(0 0 0 / 100%) 0%,rgb(0 0 0 / 75%) 33%,rgb(0 0 0 / 10%) 67%,rgb(0 0 0 / 75%) 80%,rgb(0 0 0 / 100%));
}
@media (max-width:360px){
:root {
--fz-xxxxl: clamp(24px, 4vw, 60px);
}
}
body {font-size: 16px; font-family: 'Steppe',Georgia; color: var(--color-black); background-color: #fff;}
a {transition: 0.25s;}
a:not([href="#"]) {cursor: pointer;}
.flex {display: flex;}
.i-flex {display: inline-flex;}
.jc-sb {justify-content: space-between;}
.jc-center {justify-content: center;}
.ai-c {align-items: center;}
.ta-c {text-align: center;}
.lh-0 {line-height: 0;}
.h2 {font-size: var(--fz-xxxxl); font-weight: 700; line-height: 1.15;}
.h2.fw-400 strong {font-weight: 700; line-height: 1.16;}
.h2-mini {font-size: clamp(18px,1.5vw,26px); font-weight: 700; color: var(--color-main); margin: 0.25em 0;}
.h3 {font-size: clamp(20px,2.5vw,40px); font-weight: 700; line-height: 1.15;}
.h3-mini {font-size: clamp(16px,1.125vw,19px); font-weight: 700; color: var(--color-main); margin: 0.25em 0;}
.fz-l {font-size: var(--fz-l);}
.fw-400 {font-weight: 400;}
.fw-700 {font-weight: 700;}
.no-wrap {white-space: nowrap;}
strong {font-weight: 700;}
p + p {margin-top: 0.75em;}
/*Margins*/
.mt-0 {margin-top: 0;}
.mt-025 {margin-top: 0.25em;}
.mt-05 {margin-top: 0.5em;}
.mt-075 {margin-top: 0.5em;}
.mt-1 {margin-top: 1em;}
.mt-15 {margin-top: 1.5em;}
.mt-2 {margin-top: 2em;}
.mt-25 {margin-top: 2.5em;}
.mt-3 {margin-top: 3em;}
/*-----*/
.mb-025 {margin-bottom: 0.25em;}
.mb-05 {margin-bottom: 0.5em;}
.mb-075 {margin-bottom: 0.75em;}
.mb-1 {margin-bottom: 1em;}
.mb-15 {margin-bottom: 1.5em;}
.mb-2 {margin-bottom: 2em;}
.mb-25 {margin-bottom: 2.5em;}
.mb-3 {margin-bottom: 3em;}
/**/
.p-3 {padding: clamp(1.5em,3vw,3em);}
.p-2 {padding: clamp(1em,2vw,2em);}
/*BTNS*/
.btn {
display: inline-flex; align-items: center; gap:0.625em; padding: 0.5em 1.125em 0.5em; min-height:2.45em; border-radius: 2em;
background-color: transparent; cursor: pointer;
transition: 0.25s; line-height: 1.2;
-webkit-user-select:none; -moz-user-select:none;
}
.btn:active {transition: 0.05s;}
.btn .icon {
width: 1.5em; aspect-ratio: 1 / 1; margin-left: -0.375em;
background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;
}
.btn .btn-text {margin-bottom: -0.0625em;}
.btn .btn-p-grow {padding: clamp(0.25em, 0.5vw, 0.5em);}
/*big*/
.btn-big {
font-size: var(--fz-l);
font-weight: 700;
padding: clamp(0.5em, 1.25vw,1.25em) clamp(1.5em, 4vw,3em);
}
/*transparent btn*/
.btn-transparent:hover {background-color: var(--color-main-33);}
.btn-transparent:active {background-color: var(--color-main-50);}
/*dark btn*/
.btn-dark {background-color: var(--color-black); color: #fff;}
.btn-dark:hover {background-color: var(--color-main-dark);}
.btn-dark:active {background-color: var(--color-black);}
/*blue btn*/
.btn-blue {background-color: var(--color-main); color: #fff;}
.btn-blue:hover, .btn-group:hover .btn-blue {background-color: var(--color-main-dark);}
.btn-blue:active, .btn-group:active .btn-blue {background-color: var(--color-main);}
/*round icons*/
.icon-round {
display: inline-flex; width: 2em; aspect-ratio: 1 / 1; border-radius: 2em; cursor: pointer;
background-position: 50% 50%; background-repeat: no-repeat; background-size: 1.25em;
background-color: var(--color-main-dark);
}
.icon-round:hover {background-color: #000;}
.icon-round:active {transition: 0.05s;}
/*btn Slide*/
.btn-slide {
display: inline-flex; background-color: var(--color-main); transition: all 0.5s;
padding: 0; gap: 0; border-radius: 6em;
overflow: hidden; justify-content: space-between; font-size: clamp(11px, 1vw, 16px);
}
.btn-slide-fullwidth {width: 100%; max-width: 3.75em;}
.btn-slide:hover, .btn-slide.hover {
background-color: #fff; color: var(--color-main); max-width: 360px; transition: all 0.5s, max-width 0.75s; /*filter: drop-shadow(0 0 0.75em #fff);*/ box-shadow: 0 0 0.75em #fff;
}
.btn-slide-fullwidth:hover {max-width: 560px;}
.btn-slide-icon {
width: 3.75em; aspect-ratio: 1 / 1; border-radius: 6em; transition: 1s; flex-shrink: 0;
background: transparent url('../img/ui/icon-arrow-up-right.svg') 50% 50% no-repeat; background-size: 2em auto; background-repeat: no-repeat;
}
.btn-slide:hover .btn-slide-icon, .btn-slide.hover .btn-slide-icon {
background-color: #000;
}
.btn-slide:active {box-shadow: 0 0 2em #fff;}
.btn-slide:active .btn-slide-icon {background-color: var(--color-main-dark); transition:0.05s;}
.btn-slide-desc {max-width: 0; color: #00000040; font-weight: 700; padding: 0; transition: 0.5s;}
.btn-slide:hover .btn-slide-desc, .btn-slide.hover .btn-slide-desc {max-width: 320px; color: var(--color-main); padding: 0.375em 1.5em 0.375em 0.375em;}
.btn-slide:active .btn-slide-desc {color: var(--color-main-dark); transition:0.05s;}
/*btn Slide white*/
.btn-slide-icon-white {background-color: #fff; background-image: url('../img/ui/icon-arrow-up-right-black.svg');}
/*btn Slide blue*/
.btn-slide-icon-blue {background-color: var(--color-main);}
/*btn Group*/
.btn-group {display: inline-flex; gap: clamp(0.5em,1vw,0.75em); cursor: pointer;}
.btn-group .btn-slide-icon {transition: 0.25s; font-size: var(--fz-xxs); align-self: flex-start;}
.btn-group:hover .btn-slide-icon-white {transform: translate(-1.5em,0); filter: drop-shadow(0 0 0.75em var(--color-main));}
.btn-group:active .btn-slide-icon-white {transition: 0.05s; filter: drop-shadow(0 0 2em var(--color-main));}
/*White Shadow on Hover*/
.btn-group:hover .btn-hover-white-shadow {transform: translate(-1.5em,0); filter: drop-shadow(0 0 0.75em #fff);}
.btn-group:active .btn-hover-white-shadow {transition: 0.05s; filter: drop-shadow(0 0 2em #fff);}
/**/
.btn-fw {display: flex; justify-content: center;}
/**/
.hover-scale-107:hover {transform: scale(1.15); transition: 0.5s;}
/*CSS columns*/
.ccount-2 {column-count: 2;}
.ccount-2 > * {page-break-inside: avoid; break-inside: avoid;}
@media (max-width:768px){
.ccount-1-at768 {column-count: 1;}
}
/*header*/
.header {display: flex; align-items: center; line-height: 1.33; font-size: var(--fz-sm); position: relative; z-index: 10; /*backdrop-filter: blur(3px);*/}
body.mobile-menu-opened .header {position: fixed; top: 0; left: 0; right: 0;}
.header-logo {width:240px;}
.header-logo .logo-wrapper {filter: brightness(10);}
.header:not(.header-dark).header-logo .logo-wrapper img {filter: grayscale(1);}
.header-content {flex-grow: 1;}
.header-content .inner {display: flex; gap: clamp(1em,calc(6vw - 2em),5em); border-bottom: 1px solid var(--color-main); padding: 1.25em 0;}
.header-content .inner-mobile {display: none;}
.header-content .inner-mobile .menu-icon, .header-content .inner-mobile a, .header-logo {position: relative; z-index: 10;}
.header-content strong {font-weight: 700;}
.header-content small {font-size: 14px;}
.header a[href^="tel"]:hover {text-decoration: underline;}
.header .inner strong, .header .inner-desktop .btn-transparent {color: var(--color-main);}
.header .icon-calc {background-image: url('../img/ui/icon-calc-blue.svg');}
.header-content .divider {width:1px; background-color: rgb(239 243 244); margin: 0 clamp(-1em, -4vw, -4em);}
/*abs*/
.header-wrapper-abs {/*height: 0;*/ position: absolute; top: 0; left: 0; right: 0;}
.header-wrapper-abs .header-content .inner {border-color:transparent; /*padding: 1.5em 0;*/}
/*dark*/
.header-dark {color: #fff;}
.header-dark .inner strong, .header-dark .header-content .btn-transparent {color: inherit;}
.header-dark .btn-transparent {filter: drop-shadow(1px 1px 0px var(--color-main-dark-33)); background-color: rgba(0, 0, 0, 0.4);}
.header-dark .header-content .inner-desktop {text-shadow: 0px 0px 2px var(--color-main-dark);}
.header-dark .icon-calc {background-image: url('../img/ui/icon-calc.svg');}
/*aside menu*/
.aside-menu {
position: fixed; left: 0; top: 0; bottom:0; width: 240px; z-index: 5;
background-color: var(--color-main-70);
display: flex; flex-direction: column; gap: 1em;
color: #fff; border-right: 1px solid; transition: backdrop-filter 1s;
overflow-y: auto; font-size: clamp(15px,1vw,16px);
-webkit-user-select:none; -moz-user-select:none;
}
.aside-menu:hover {backdrop-filter: blur(2px); transition: backdrop-filter 0.5s;}
.aside-menu-header {min-height: 5.24em; display: flex; align-items: center; justify-content: center;}
.aside-menu-header .logo-wrapper img {height: 45px; opacity:0.9; transition: 0.25s;}
.aside-menu-header .logo-wrapper:hover img {opacity: 1; filter: drop-shadow(0px 0px 1px var(--color-main-dark-25));}
.aside-menu-navigation {display: flex; flex-direction: column; gap: clamp(0.25em,calc(4vh - 1em),2em); }
.aside-menu-navigation a {color: rgb(255 255 255 / 90%); display: inline-block; padding: 0.375em 0.625em 0.125em; border-radius: 2em;}
.aside-menu-navigation a:hover, .aside-menu-navigation a.active {
color: rgb(255 255 255 / 100%); text-shadow: 0 0 2px var(--color-main-dark); background-color: var(--color-main-dark-10);
}
.aside-menu-navigation a:active {text-shadow: 0 0px 1px var(--color-main-dark); transition: 0.05s; background-color: var(--color-main-dark-33);}
.aside-menu-footer .icon-wrapper {gap:0.75em; padding-bottom: clamp(1em,5vh,2.5em); font-size: 16px;}
.aside-menu-footer .icon-wrapper .icon-round:hover {}
.aside-menu-footer .icon-wrapper .icon-round:active {}
@media (max-width:1280px){
.header-logo, .aside-menu {width: 192px;}
}
@media (max-width:992px){
.aside-menu {position: relative; width: auto; border-right: none; background-color: transparent;}
.aside-menu-header {min-height: auto;}
.aside-menu-header .logo-wrapper {padding: 0.25em 1em;}
.header {/*backdrop-filter: blur(3px);*/}
.header-content .inner {padding: 0.5em 0;}
.header-content .inner-desktop {display: none;}
.header-content .inner-mobile {display: flex; justify-content: flex-end; align-items: center; gap: 1.5em;}
.header-logo {width: auto;}
.aside-menu-header .logo-wrapper img {height: auto; min-width: 119px;}
/*.header-dark .aside-menu-header .logo-wrapper img {filter: drop-shadow(1px 1px 0px var(--color-main-dark-50));}*/
.aside-menu-mid, .aside-menu-footer {display: none;}
.header:not(.header-dark) .header-logo .logo-wrapper {filter: none;}
.header:not(.header-dark) .header-content .inner {border-color: transparent;}
.mobmenu-opened .header:not(.header-dark) .header-logo .logo-wrapper {filter: brightness(5);}
.header-wrapper-sticky-atMob {position: sticky; top: 0; z-index: 8; background-color: rgb(255 255 255 / 92%);}
.header-wrapper-sticky-atMob.header-wrapper-abs { position: fixed; background-color: var(--color-main-85);}
}
/*BREADCRUMBS*/
.breadcrumbs-wrapper {}
.breadcrumbs {padding: 0.5em 0; gap: clamp(0.5em,1vw,1em); font-size: clamp(13px,1vw,14px);}
.breadcrumbs-item {padding: 0.5em; position: relative;}
.breadcrumbs-item + .breadcrumbs-item {}
.breadcrumbs-item a {cursor: pointer;}
.breadcrumbs-item a:hover {color: var(--color-main);}
.breadcrumbs-item span {cursor: default;}
.breadcrumbs>li:after {
content: ''; width: 1px; position: absolute; right: clamp(-0.5em,-0.5vw,-0.25em); margin-right: -1px;
top: 0.625em; bottom: 0.625em;
/*background-image: url('data:image/svg+xml;utf8,');*/
background-color: #000 ;background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
filter: grayscale(1) contrast(0.125);
}
.breadcrumbs>li:last-of-type::after {display: none;}
@media (max-width:992px){
.breadcrumbs {padding: 0.25em 0;}
}
/*Mobile menu*/
/*btn*/
.menu-icon {
display: inline-block; width:30px; height:27px; vertical-align: middle;
transition:opacity .5s; overflow:hidden; position: relative; cursor: pointer;
filter: drop-shadow(0 1px 1px var(--color-main-dark))
-webkit-user-select:none; -moz-user-select:none;
}
.menu {
position: absolute; right:-18em; top:0; bottom:0; background:#fff; z-index:3000;
transition:right 0.25s; /*box-shadow: 0 0 10px rgba(0,0,0,0.3);*/ min-height:240px;
}
.menu.opened {right:0; transition:right 0.4s;}
.menu-icon .toggle__bar:nth-child(2),.menu-icon .toggle__bar:nth-child(3){transition:transform .5s .1s}
.menu-icon .toggle__bar:first-child{transition:opacity .5s,transform .5s}
.menu-icon .toggle__bar:nth-child(4){transition:opacity .5s,transform .5s .2s}
.menu-toggler:hover .toggle__bar{transform:translateX(0)}
.toggle__bar {width:100%;height:3px;transform:translateX(130%);display:block}
.toggle__bar,.toggle__bar:before{background:#fff;position:absolute}
.toggle__bar:before{width:100%;height:100%;top:0;right:100%;margin-right:30%;content:" "}
.toggle__bar:nth-child(2),.toggle__bar:nth-child(3){top:12px}
.toggle__bar:first-child{top:3px}
.toggle__bar:nth-child(4){top:21px}
.opened .toggle__bar:first-child,.opened .toggle__bar:nth-child(4){opacity:0;transform:translateX(0)}
.opened .toggle__bar:nth-child(2){transform:rotate(45deg)}
.opened .toggle__bar:nth-child(3){transform:rotate(135deg)}
/*white header*/
.header:not(.header-dark) .toggle__bar, .header:not(.header-dark) .toggle__bar:before {background-color: var(--color-main-dark);}
/*menu*/
.menu-mobile-wrapper {
display: none; justify-content: center; align-items: center; padding-top: 4em; min-height:100%;
}
body.mobile-menu-opened {/*overflow-y: hidden;*/}
body.mobile-menu-opened .menu-mobile-wrapper {display: flex; animation: fadeIn 0.25s;}
.menu-mobile-outer {
max-height: 100%; overflow-y: auto; width: 100%;
display: flex; justify-content: center; align-items: flex-start;
}
.menu-mobile {display: flex; flex-direction: column; gap: 1em; font-size: 16px; padding-bottom: 1.5em; width: 300px; padding: 1em; color: #fff;}
.menu-mobile .title {font-size: 20px; font-weight: 700;}
.menu-mobile li + li {margin-top: 0.375em;}
.menu-mobile .icon-wrapper {gap: 0.75em; font-size: 30px; justify-content: space-evenly;}
.menu-mobile .menu-list a {opacity: 0.9;}
.menu-mobile .menu-list a:hover {opacity: 1;}
.menu-mobile .btn {
font-size: 18px; font-weight: 700; display: flex; justify-content: center;
padding-top: 1em; padding-bottom: 1em;
}
/*FOOTER*/
.footer {background-color: var(--color-black); color: #e8e8e8;}
.footer-menu {
display: flex; flex-direction: column; gap: 1em; font-size: 16px; /*padding-top: 1.5em; padding-bottom: 1.5em;*/
max-width: 400px; margin-left: auto; margin-right: auto;
}
.footer-logo-outer {justify-content: center;}
.footer-logo-wrapper img {width: 158px; opacity: 0.9; transition: 0.25s;}
.footer-logo-wrapper:hover img {opacity: 1;}
.footer .contacts-desktop { text-align: center; display: none;}
.footer .contacts-mobile {text-align: center;}
.footer a[href^="tel"]:hover {text-decoration: underline;}
.footer-menu .title {font-size: 20px; font-weight: 700;}
.footer-menu li + li {margin-top: 0.375em;}
.footer-menu .icon-wrapper {gap: 0.75em; font-size: 30px; justify-content: space-evenly;}
.footer-menu-columns, .footer-menu-column-1, .footer-menu-column-2, .footer-menu-lists, .footer-bottom {
display: flex; flex-direction: column; gap: 1em;
}
.footer-menu-lists {gap: 2em 3em; padding-bottom: 1.5em;}
.footer-menu-lists a {opacity: 0.8; color: #fff;}
.footer-menu-lists a:hover {opacity: 1;}
@media (min-width:401px){
.footer-menu-lists {flex-direction: row;}
}
@media (min-width:641px){
.footer-menu {max-width: none;}
.footer-logo-outer {justify-content: flex-start;}
.footer .contacts-desktop {display: block; text-align: left;}
.footer .contacts-mobile {display: none;}
.footer-menu-columns, .footer-bottom {flex-direction: row;}
.footer-menu-column-1 {padding-right: 3em;}
.footer-menu .icon-wrapper {font-size: 15px;}
}
@media (min-width:993px){
}
@media (min-width:1081px){
.footer-logo-wrapper img {width: clamp(181px, 16vw, 282px);}
.footer-menu-lists .columns {column-count: 2;}
}
/*tpl*/
.page-wrapper {/*overflow-x: hidden;*/}
.page {min-height: 50vh;}
.section, .header {max-width: 2560px; /*1770 = 1530+240*/}
.section:not(.no-padding) {padding: clamp(1em,2.75vw,2.75em) 0; /*padding: clamp(1em,2vw,2em) 0;*/}
.page-wrapper .section:not(.no-padding):last-of-type {padding-bottom: 8vh;}
.section-inner {max-width: calc(100% - 240px);/*1530px*/ margin-left: auto;}
.section-inner:not(.no-padding), .header-content {padding: 0 clamp(1em,1.5vw,2em) 0 clamp(1em,calc(5vw - 2em),6em);}
.section-inner.no-padding-right {padding-right: 0;}
@media (max-width:1280px){
.section-inner {max-width: calc(100% - 192px);}
}
@media (max-width:992px){
.section-inner {max-width: none;}
.section-inner:not(.no-padding), .header-content {padding: 0 clamp(1em, 2vw, 2em);}
}
@media (max-width:768px){
.section-inner.no-padding-at768 {padding: 0;}
}
@media (max-width:480px){
.section-inner.no-padding-at480 {padding: 0;}
}
/*section Main*/
.section-main {
min-height:100vh; background: var(--color-main) 100% 50% no-repeat; background-size: cover;
color: #fff; text-shadow: 0px 0px 3px var(--color-main-dark); position: relative; overflow: hidden;
display: flex; justify-content: flex-start; align-items: center;
}
.header-wrapper:not(.header-wrapper-abs) + .breadcrumbs-wrapper + .page-wrapper .section-main, .header-wrapper:not(.header-wrapper-abs) + .breadcrumbs-wrapper + .page-wrapper .section-main-v2 {min-height: calc(100vh - 8 * 14px);}
.section-main .section-inner {flex-grow: 1; padding-top: 5.74em; padding-bottom: 5.74em;}
.section-main .section-inner > * {position: relative; z-index: 1;}
.section-main .section-inner {}
.section-main .btn {font-size: var(--fz-l); font-weight: 700; padding: 1em 2.25em 1em;}
@media (max-width:992px){
.section-main {background-position: 71% 50%;}
}
/*section Benefits*/
.section-benefits {
max-height: 2.5em; position: sticky; bottom: 0.75em;
}
.benefit-items {
display: flex; justify-content: space-between; color: #fff; gap: clamp(1em, 2vw, 2em);
border-radius: 10em; padding: 1.125em min(4vw,4em);
max-width:1028px; margin-left: auto; margin-right: auto;
background: radial-gradient(circle at 50% 100%, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 2em, transparent 5em), radial-gradient(circle at 98% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 1.5em, transparent 5em);
background-color: #000; background-repeat: no-repeat; transition: background-position 2s;
}
.benefit-items:hover {background-position: 40px;}
.benefit-items .item {display: flex; align-items: flex-start; gap: 0.5em; cursor: default;}
.benefit-items .item-icon {
width: 2em; aspect-ratio: 1 / 1; flex-shrink: 0;
background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; filter:drop-shadow(0 0 8px var(--color-main));
transition: filter 0.25s;
}
.benefit-items .item:hover .item-icon { filter:drop-shadow(0 0 6px var(--color-main)) brightness(1.33);}
.benefit-items .item-content {}
.benefit-items .item-header {font-size: var(--fz-l); font-weight: 700;}
.benefit-items .item-text {font-size: var(--fz-xs); margin-top: 0.125em; max-width: 17em;}
.section-benefits .benefit-items {transform: translateY(-50%);}
@media (max-height:560px){
.section-benefits {position: relative; bottom: auto;}
}
@media (min-aspect-ratio: 16/8){
.section-benefits {position: relative; bottom: auto;}
}
@media (max-width:660px){
.section-benefits {max-height: none; position: relative; bottom: auto;}
.section-benefits .section-inner {padding-left: 0; padding-right: 0;}
.section-benefits .benefit-items {flex-direction: column; align-items: center; border-radius:0; transform: none;}
.benefit-items .item {max-width: 240px;}
}
/*v2*/
.benefit-items-v2 {max-width: none; padding: 0; background: transparent; color: inherit;}
.benefit-items-v2 .item-divider {width: 1px; background-color: rgba(205, 205, 205);}
.benefit-items-v2 .item-icon {width: 3.75em;}
.benefit-items-v2 .item-icon {filter:drop-shadow(0 0 8px var(--color-main-33));}
.benefit-items-v2 .item:hover .item-icon {filter:drop-shadow(0 0 6px var(--color-main-33)) brightness(0.75);}
@media (max-width:660px){
.section-benefits-v2 .section-inner {padding-left: 0; padding-right: 0;}
.section-benefits-v2 .benefit-items {flex-direction: column; align-items: center; border-radius:0; transform: none;}
.benefit-items-v2 .item {max-width: 240px;}
}
/*bottom*/
.benefit-items.benefit-items-bottom {transform: translateY(-100%); position: relative; z-index: 5; margin-top: -1.5em;}
.benefit-items.benefit-items-right {margin-right: unset;}
/*v3*/
.section-benefits-v3 {z-index: 5; height:0;}
.benefit-items-v3 {max-width:min(60%,37.5em);}
@media (max-width:660px){
.section-benefits-v3 {height: auto;}
.section-benefits-v3 .section-inner {padding-left: 0; padding-right: 0;}
.section-benefits-v3 .benefit-items {flex-direction: column; align-items: center; border-radius:0; transform: none;}
.benefit-items-v3 {max-width: none;}
.benefit-items-v3 .item {max-width: 240px; min-width: 12.5em;}
}
/*grid*/
.grid-cells-custom {display: grid; gap: var(--gap-small); grid-auto-flow: row dense;}
/*grid 2 columns*/
.grid-cells-columns-2 {display: grid; gap: var(--gap-small); grid-auto-flow: row dense; grid-template-columns: repeat(2,1fr);}
@media (max-width:480px){
.grid-cells-column-1-at480 {grid-template-columns: repeat(1, 1fr);}
}
/*grid1*/
.grid-cells-custom-1 {
grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"cell1 cell2 cell2 cell3"
"cell1 cell4 cell5 cell6";
aspect-ratio: 1530 / 670;
}
.grid-cells-custom-1 .cell1 { grid-area: cell1; }
.grid-cells-custom-1 .cell2 { grid-area: cell2; }
.grid-cells-custom-1 .cell3 { grid-area: cell3; }
.grid-cells-custom-1 .cell4 { grid-area: cell4; }
.grid-cells-custom-1 .cell5 { grid-area: cell5; }
.grid-cells-custom-1 .cell6 { grid-area: cell6; }
/*grid2*/
.grid-cells-custom-2 {
grid-template-columns: 0.8fr 1.2fr 1.2fr 0.8fr; grid-template-rows: 1fr;
grid-template-areas:
"cell1 cell2 cell3 cell4";
margin-top: var(--gap-small);
aspect-ratio: 1530 / 320;
}
.grid-cells-custom-2 .cell1 { box-shadow: -200px 30px 64px -16px var(--color-main-33);}
/*grid design*/
.grid-cells-custom {}
/*Tile items*/
.services-tile-items {}
.services-tile-items .tile {
background-color: var(--color-main-33);
background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
transition: backdrop-filter 0.5s, top 0.5s, opacity 0.5s; position: relative; overflow: hidden;
}
.tile .tile-content {display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; padding: 1vw 1.5vw; position: relative; z-index: 1;}
.tile .tile-header, .tile .tile-footer {position: relative;}
.tile .tile-header {font-size: clamp(14px,calc(2.25vw - 1em),26px); font-weight: 700; cursor: default;}
.tile .tile-footer {text-align: right;}
.services-tile-items .tile:hover {filter: grayscale(0);}
.services-tile-items .tile-overlay {
content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;
/*background: linear-gradient(93.36deg, #00236500, #296EF0FF);*/
background-color: #0064f455; transition: backdrop-filter 0.25s, top 0.25s, opacity 1.25s, background-color 0.25s;
backdrop-filter: sepia(1) hue-rotate(180deg) saturate(1.5) contrast(1.05);
-webkit-backdrop-filter: sepia(1) hue-rotate(180deg) saturate(1.5) contrast(1.05);
}
.services-tile-items .tile:hover .tile-overlay {opacity: 0; transition: backdrop-filter 0.25s, top 0.25s, opacity 0.25s, background-color 0.25s;}
.services-tile-items .tile:active .tile-overlay {opacity:0.2; background-color: #0064f470;; transition: all 0.05s; }
@media (max-width:768px){
.grid-cells-custom {
grid-template-columns: repeat(2,1fr);
aspect-ratio: auto;
}
.grid-cells-custom-1 {
grid-template-areas:
"cell1 cell2"
"cell3 cell4"
"cell5 cell6";
grid-template-rows: repeat(3,1fr);
}
.grid-cells-custom .tile {aspect-ratio: 340 / 180;}
.grid-cells-custom .tile-header {font-size: clamp(15px, 3vw, 26px);}
.grid-cells-custom-2 {
grid-template-areas:
"cell1 cell2"
"cell3 cell4";
grid-template-rows: repeat(2,1fr);
}
.grid-cells-custom .btn-slide {font-size: clamp(12px, 1vw, 16px);}
}
@media (max-width:480px){
.grid-cells-custom {grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: none;}
.grid-cells-custom-1 .tile {grid-area: auto;}
.tile .tile-content {padding: 2vw 3vw;}
}
/*Why Us*/
.items-numbered {border-right: 1px solid rgb(204 204 204)}
.items-numbered .item {padding: clamp(0.5em,1.5vw,1.5em); padding-left: 0; border-bottom: 1px solid rgb(204 204 204);}
.items-numbered .item:last-of-type {border-bottom: 0;}
.items-numbered .item-header {margin-bottom: 1em; display: flex; justify-content: space-between; align-items: center; gap: 1em;}
.items-numbered .item-number {font-size: 40px; color: var(--color-main); position: relative; top: 1.5em;}
.items-numbered .item-text {padding-right: 5em; font-size: var(--fz-sm);}
.items-numbered .item-text ul {list-style: disc outside; padding-left: 1.25em;}
.items-numbered .item-text li {}
.items-numbered .item-text li + li {margin-top: 0.5em;}
.why-us-container .title-container { min-width: min(32%, 24em);}
.why-us-content strong {color: var(--color-main); filter: drop-shadow(-1em -0.5em 0.625em var(--color-main));}
@media (max-width:768px){
.why-us-container {flex-direction: column;}
.why-us-container .title-container {order: -1;}
.why-us-container .logo-container {
background: url("../img/ui/logo-text-blue.svg") 50% 50% no-repeat; background-size: contain;
height: 17vw;
}
.why-us-container .logo-container img {display: none;}
}
@media (max-width:480px){
.items-numbered .item-number {position: static; top: auto;}
.items-numbered .item-text {padding-right: 0;}
}
/*Section QTA*/
.section-qta {overflow-x: hidden;}
.section-qta-content {position: relative;}
.section-qta .obj-container {position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; aspect-ratio: 836 / 379; animation: fadeInOut-50 5s infinite;}
.section-qta .btn {font-size: var(--fz-l); min-width: 10em; justify-content: center;}
.section-qta .obj-logo-sign {
position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0;
background-position: 100% 50%; background-repeat: no-repeat; background-size: auto 100%; transition: opacity 0.5s;
}
.section-qta .obj-shadow-wrapper {
position: absolute; top: 0; bottom: 0; left: 59%; width: 0;
display: flex; justify-content: center; align-items: center; opacity: 0.5;
}
.section-qta .obj-shadow {
width: 0; height: 0;
box-shadow: 0 0 100px 100px var(--color-main-dark);
}
@media (max-width: 1690px){
.section-qta .obj-logo-sign {opacity: 0.67;}
}
@media (max-width: 600px){
.section-qta .obj-logo-sign {opacity: 0.125;}
}
/*Section QTA-Form*/
.bg-rays {background-image: url('../img/ui/bg-rays.svg'); background-size: cover; background-position: 0 0; background-repeat: no-repeat;}
.section-qta-form { }
.section-qta-form-content-blue {justify-content: center; background-color: var(--color-main-dark); color: #fff;}
.section-qta-form-image img {transform: scale(1.15); max-width: min(100%,476.5px);}
.section-qta-form-form {max-width: 26em; /*margin-right: auto;*/}
@media (max-width: 768px){
.section-qta-form-content {flex-wrap: wrap;}
.section-qta-form-image {flex-basis: min(16em,calc(100vw - 23em)); margin-left: auto; margin-right: auto;}
.section-qta-form-image img {transform: translate(0,-1em);}
}
@media (max-width: 480px){
.section-qta-form-content {flex-direction: column; overflow: hidden;}
.section-qta-form-text {align-self: stretch;}
.section-qta-form-image {order: 1;}
.section-qta-form-image img {max-height: 252px; transform: none;}
}
/*Forms*/
.form-block {display: flex; flex-direction: column; gap: 0.75em;}
.form-color-white ::placeholder {color: #ffffffd8;}
input, textarea, .btn[role="submit"] {
font-size: clamp(18px,2vw,20px); padding: 0.5em 0.75em;
}
input[type="text"], input[type="tel"], textarea {border-bottom: 1px solid;}
input[type="submit"] {font-weight: 700;}
.form-block input {}
.form-color-white input {}
.form-block .btn {justify-content: center;}
/*form #1*/
.section-qta-form-content-blue form .btn {box-shadow: -1em -3em 7em var(--color-main);}
.section-qta-form-content-blue form .btn:hover {filter: drop-shadow(0 0 0.75em var(--color-main));}
.section-qta-form-content-blue form .btn:active {filter: drop-shadow(0 0 2em var(--color-main));}
.section-qta-form-content-blue .obj-shadow-wrapper {
position: absolute; top: 0; bottom: 0; left: 25%; width: 80%; z-index: 0;
display: flex; justify-content: center; align-items: center; opacity: 0.5;
}
.section-qta-form-content-blue .obj-shadow-wrapper + div {position: relative; z-index: 1;}
.section-qta-form-content-blue .obj-shadow {
width: 100%; height: 0;
box-shadow: 0 0 100px 100px var(--color-main);
animation: UpDown-3em 10s infinite;
}
/*Partners*/
.h2-link {
display: inline-flex; align-self: center; align-items: center; gap: 0.5em;
color: var(--color-main); font-size: clamp(13px,1vw,14px); font-weight: 700;
opacity: 0.85; transition: 0.25s;
}
.h2-link:hover {opacity: 1;}
.h2-link img {max-width: 24px;}
.partner-logos-wrapper {overflow-x: hidden; padding: var(--p-2) 0;}
.partner-logos {gap: var(--p-3); align-items: center;}
.partner-logos .item {max-width: calc(20% - var(--p-3)*4/5); flex: 0 0 auto; cursor: default; transition: all 1s, width 0s; filter: grayscale(1) brightness(2); line-height: 0;}
.partner-logos .item img {width: 100%;}
.partner-logos .item:hover, .partner-logos .item.active {filter: grayscale(0) brightness(1); transition: all 0.25s, width 0s;}
@media (max-width:768px){
.partner-logos {/*flex-wrap: wrap;*/}
.partner-logos .item {max-width: calc(33% - var(--p-3)*2/3);}
}
@media (max-width:480px){
.partner-logos .item {max-width: calc(50% - var(--p-3)*1/2);}
}
/* popup Version*/
.popup-wrapper.popup-wrapper-partners {
max-width: min(90%,1920px);
background-image: radial-gradient(circle at 25% 16vw, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 25vw, transparent 50vw), radial-gradient(circle at 99% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 3em, transparent 10em);
}
.popup-partners {background-color: var(--color-main-33);}
.popup-partners .h2, .popup-partners .h2-mini {text-transform: uppercase; font-weight: 700; color: #fff;}
.popup-partners .popup-inner {max-width: 1680px;}
.popup-content .partner-logos {flex-wrap: wrap; margin: var(--p-1) 0;}
.popup-content .partner-logos + .h2-mini {margin-top: 2.5em;}
.popup-content .partner-logos .item {max-width: 10em; filter: grayscale(0.9);}
.popup-content .partner-logos .item.active {animation: BlurOut .4s;}
@media (max-width:640px){
.popup-content .partner-logos .item {max-width: 5em;}
}
/*WORK STEPS*/
/*links*/
.work-steps-links {gap: var(--gap-small); align-items: center; font-size: var(--fz-xs); justify-content: space-between;}
.work-steps-links .elem {
transition:0.5s; cursor: pointer; text-align: center; -webkit-user-select:none; -moz-user-select:none;
}
.work-steps-links .elem:not(.active) {}
.work-steps-links .elem:not(.active) {}
.work-steps-links .elem.active {}
.work-steps-links .elem.active .elem-title, .work-steps-links .elem:hover .elem-title {color: var(--color-main); text-shadow:0 0 1px var(--color-main);}
.work-steps-links .elem-divider {height:1px; width: clamp(0.25em,0.75vw,1.5em); background-color: var(--color-main-33);}
/*elems*/
.work-steps-elems {gap: clamp(0.5em,1.5vw,1.5em)}
.work-steps-elems .elem {
background-image: url('../img/ui/bg-rays.svg'), linear-gradient(to top right, var(--color-main) 0%, var(--color-main) 40%, var(--color-main-dark) 125%); background-size: cover; background-repeat: no-repeat;
/*background-color: var(--color-main-dark);*/ color: #fff; padding: var(--p-2); transition: all 0.25s, max-width 0.5s;
display: flex; flex-direction: column; gap:var(--gap-small); min-height: max(24vw, 16em);
}
.work-steps-elems .elem:not(.active) {cursor: pointer; background-position: 10em 0, 0 0;/*max-width: 9em;*/}
.work-steps-elems .elem.active, .work-steps-elems .elem:hover {max-width: 80em; background-position: 0 0, 0 0;}
.work-steps-elems .elem.active { flex-grow: 1;}
/*elem inner items*/
.work-steps-elems .elem .elem-title-mini {font-size: clamp(20px,1.5vw,26px); font-weight: 700;}
.work-steps-elems .elem .elem-title {font-size: clamp(20px,2.4vw ,40px); font-weight: 700; line-height: 1.15;}
.work-steps-elems .elem .elem-text {font-size: var(--fz-sm);}
.work-steps-elems .elem .js-step-number {min-width:1em; display: inline-flex; align-items: center; justify-content: center;}
.work-steps-elems .elem .elem-btn-wrapper {margin-top: auto;}
.work-steps-elems .elem .btn {font-size: var(--fz-l); font-weight: 700;}
.work-steps-elems .elem .btn-arrow {display: none; transition: 0.25s;}
.work-steps-elems .elem:hover .btn-arrow {filter: drop-shadow(0 0 0.75em #fff); transition: 0.5s;}
.work-steps-elems .elem:active .btn-arrow {filter: drop-shadow(0 0 2em #fff); transition: 0.05s;}
.work-steps-elems .elem .js-step-name,
.work-steps-elems .elem .elem-title,
.work-steps-elems .elem .elem-text,
.work-steps-elems .elem .elem-btn-wrapper {
transition: 0.5s; animation: fadeInUp-2em 0.5s;
}
.work-steps-elems .elem:not(.active) .js-step-name,
.work-steps-elems .elem:not(.active) .elem-title,
.work-steps-elems .elem:not(.active) .elem-text,
.work-steps-elems .elem:not(.active) a.btn {display: none;}
.work-steps-elems .elem:not(.active) .btn-arrow {display: inline-flex; margin: 0 -0.5em; font-size: var(--fz-xs);}
.work-steps-elems .elem:not(.active) .js-step-number {font-size: clamp(20px,3vw,40px);}
.work-steps-elems .elem.active .js-step-number {transition: 0.5s;}
.work-steps-elems .elem.active .btn-arrow {/*display: inline-flex;*/}
@media (max-width:768px){
.work-steps-links {display: none;}
.work-steps-elems {
gap: clamp(0.25em, 0.75vw, 0.75em);
flex-direction: column;
}
.work-steps-elems .elem {min-height: auto;}
.work-steps-elems .elem:not(.active) {flex-direction: row; justify-content: space-between; align-items: center;}
.work-steps-elems .elem:not(.active) .elem-title {display: block; text-align: center;}
.work-steps-elems .elem:not(.active) .btn-arrow {margin: 0;}
}
@media (max-width:480px){
.work-steps-elems .elem {min-height: auto;}
.work-steps-elems .elem:not(.active) .btn-arrow {font-size: 10px;}
.work-steps-elems .elem .btn-p-grow {padding: 1em;}
}
/*v Mini*/
.work-steps-container-mini .work-steps-elems .elem:not(.active) .js-step-number {font-size: clamp(16px,2vw,24px);}
.work-steps-container-mini .elem-btn-wrapper, .work-steps-container-mini .work-steps-elems .elem-title {display: none;}
/*Swiper*/
.swipper-wrapper {justify-content: flex-start;}
.swiper-slide {}
.swiper-slide-blank {}
/*section slider Theme1*/
.section-slider-theme1 {
--swiper-pagination-bottom: 0px;
background-color: rgba(239, 243, 244, 1);
/*transition: 0.25s;*/
}
.section-slider-theme1 .swiper-pagination {position: relative;}
.section-slider-theme1 .section-inner {padding-right: 0;}
.section-slider-theme1 .swiper-slide {
min-height: max(21.5vw,16em); transition: 0.25s; /*width: 50%;*/ color: #fff;
background-color: var(--color-main-dark); background-size: cover; background-position: 50% 50%;
display: flex; align-items: stretch;
}
.section-slider-theme1 .swiper-slide-blank {background-color: transparent;}
.section-slider-theme1 .swiper-slide:not(.swiper-slide-active) {/*width: 33%;*/}
@media (max-width:768px){
/*
.section-slider-theme1 .swiper-slide {width: 75%;}
.section-slider-theme1 .swiper-slide:not(.swiper-slide-active) {width: 50%;}
*/
}
/*slider items v1*/
.slide-item-theme1 {position: relative; display: flex; flex-direction: column; width: 100%; transition: all 0.5s, width 0.4s;}
.swiper-slide-active .slide-item-theme1 {
width: calc(200% + 1em);
position: absolute; z-index: 1;
left: auto;
right: 0;
top: 0;
bottom: 0;
}
.slide-item-theme1 .item-bg-layer {
position: absolute; z-index: 0; left: 0; right: 0; top: 0; bottom: 0;
background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;
}
.slide-item-theme1 .item-content {
position: relative; z-index: 1; height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
background: transparent linear-gradient(to top, #000000ff, #00000000 33%, var(--color-main-dark) 67%, var(--color-main-70)) 50% 100% no-repeat; background-size: auto 300%;
padding: clamp(1em,1.5vw,1.5em); transition: 0.6s;
}
.slide-item-theme1:hover .item-content {backdrop-filter: saturate(1.5); transition: all 0.25s;}
.swiper-slide-active .slide-item-theme1 .item-content {
background-position: 50% 0%; animation: fadeIn-50 0.9s;
/*background-image: linear-gradient(to top,var(--color-main-dark),var(--color-main-70));*/
/*backdrop-filter: sepia(1) hue-rotate(180deg) saturate(1.5) contrast(1.05);*/
}
.slide-item-theme1 .item-title {font-size: clamp(17px,1.25vw,20px); font-weight: 700; margin-bottom: 0.75em;}
.swiper-slide-active .slide-item-theme1 .item-title {}
.slide-item-theme1 .item-text {font-size: clamp(14px,1vw,16px); max-width: 23em;}
.swiper-slide-active .slide-item-theme1 .item-text {}
/*Prev Next*/
.slider-buttons {display: flex; align-items: center; justify-content: center;}
.slider-buttons-abs {margin-top: -0.75em; position: relative; z-index: 1;}
.slider-button {
width: 3em; aspect-ratio: 1 / 1; border-radius: 0.0em; border: 1px solid transparent;
transition: 1s; filter: drop-shadow(0px -1px 1px #fff);
flex-shrink: 0;
background: #ffffff00 url(../img/ui/slider-next.svg) 56% 50% no-repeat;
background-repeat: no-repeat; transition: 0.25s; cursor: pointer;
}
.slider-button-prev {background-image: url(../img/ui/slider-prev.svg); background-position: 44% 50%;}
.slider-button:not(.swiper-button-disabled):hover {background-color: #ffffff80; /*filter: drop-shadow(0 0 0.75em var(--color-main));*/}
.slider-button:not(.swiper-button-disabled):active {background-color: #ffffffd8; /*filter: drop-shadow(0 0 2em var(--color-main)); transition: 0.05s;*/}
.slider-button.swiper-button-disabled {filter: grayscale(0.5) blur(3px); opacity: 0.5; cursor: default; border-color: transparent;}
@media (max-width:768px){
.section-slider-theme1 .section-inner { padding-right: clamp(1em, 2vw, 2em);}
.section-slider-theme1 .swiper-slide-blank {/*display: none;*/ width: 0;}
.swiper-slide-active .slide-item-theme1 {width: 100%;}
}
/*PAGE CATEGORY*/
/*main section*/
.section-main-v2 {
display: flex; justify-content: stretch; align-items: stretch;
background: transparent 100% 50% no-repeat; background-size: cover;
color: #fff; position: relative; overflow: hidden;
}
.section-main-v2.text-shadow {text-shadow: 0px 0px 3px var(--color-main-dark);}
.section-main-v2 .section-inner {
flex-grow: 1; padding-top: 5.74em; padding-bottom: 5.74em;
display: flex; justify-content: stretch; align-items: stretch; padding-top: 0; padding-bottom: 0; position: relative;
}
.section-main-v2-content {width: 100%; min-height: calc(100vh - 8* 14px);}
.section-main-v2-bg-overlay {
width: 100%;
background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;
}
.section-main-v2-content {
min-height: 100%;
background-size: cover; background-position: 100% 50%; position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: stretch; justify-content: center;
padding: 8.5em clamp(1.5em,4vw,4em);
backdrop-filter: contrast(1.25);
}
.section-main-v2 .btn {
font-size: var(--fz-l);
font-weight: 700;
padding: 1em 2.25em 1em;
}
@media (max-width:992px){
.header-wrapper:not(.header-wrapper-abs) + .breadcrumbs-wrapper + .page-wrapper .section-main, .header-wrapper:not(.header-wrapper-abs) + .breadcrumbs-wrapper + .page-wrapper .section-main-v2 {
min-height: calc(100vh - 5.25em);
}
.section-main-v2 .section-inner {padding-left: 0; padding-right: 0;}
.section-main-v2-content {background-position: 71% 50%;}
}
@media (max-width:660px){
.section-main-v2-content {padding: 4.5em clamp(1.5em, 3vw, 3em);
/*min-height: 100%;*/
background-position: -2560px 50%; background-size: 0; background-repeat: no-repeat; background-color: rgb(11 94 249 / 75%);
}
}
@media (max-width:480px){
.section-main-v2-content {
}
}
/*tags*/
.tag-items {display: flex; flex-wrap: wrap; gap: clamp(0.375em,0.75vw,0.75em); font-size: clamp(13px,1vw,16px);}
.section-services-category .tag-items {margin-bottom: clamp(1em,2vw,2em);}
.tag-items .item {
padding: clamp(0.375em,0.75vw,0.75em) clamp(0.625em,1.25vw,1.25em); background-color: var(--color-main-85); color: #fff; cursor: pointer; transition: 0.25s;
-webkit-user-select:none; -moz-user-select:none;
}
.tag-items .item:hover, .tag-items .item.active { background-color: var(--color-main);}
.tag-items .item:active { filter: saturate(1.125) contrast(1.125); transition: 0.05s;}
.tag-items .item-name {border-bottom: 1px dashed transparent; margin-bottom: -1px;}
.tag-items .item:hover .item-name, .tag-items .item.active .item-name {border-color: #ffffff80;}
.tag-items .item-icon {
width: 2.5em; height: 2.5em; align-self: center; cursor: pointer;
background: transparent 50% 50% no-repeat; background-size: 1.5em auto;
}
/*gray*/
.tag-items-gray .item {background-color: var(--color-gray-lighter); color: var(--color-black);}
.tag-items-gray .item:hover, .tag-items-gray .item.active {color: #fff;}
.tag-items .item-icon:hover {background-color: var(--color-main);}
.services-category-item {
position: relative; aspect-ratio: 2 / 1; min-height: 12em;
background-color: var(--color-main-33);
background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
transition: backdrop-filter 0.5s, top 0.5s, opacity 0.5s; position: relative; overflow: hidden;
}
.services-category-item .item-overlay {
content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;
background: linear-gradient(180deg, #ffffff40, #ffffff00 60%, var(--color-main-70));
background-color: #0064f455; transition: backdrop-filter 0.25s, top 0.25s, opacity 1.25s, background-color 0.25s;
backdrop-filter: sepia(1) hue-rotate(180deg) saturate(1.5) contrast(1.05);
-webkit-backdrop-filter: sepia(1) hue-rotate(180deg) saturate(1.5) contrast(1.05);
}
.services-category-item:hover .item-overlay {opacity: 0; transition: backdrop-filter 0.25s, top 0.25s, opacity 0.25s, background-color 0.25s;}
.services-category-item:active .item-overlay {opacity:0.2; background-color: #0064f470;; transition: all 0.05s; }
.services-category-item .item-content {
height:100%; position: relative; z-index: 1;
display: flex; flex-direction: column; justify-content: space-between; gap: var(--p-1);
padding: var(--p-15);
}
.services-category-item .item-title {
font-size: clamp(14px, calc(2.25vw - 1em), 26px); font-weight: 700; cursor: default; margin-bottom: var(--p-1);
}
.services-category-item .item-text {
max-width: 22em; font-size: clamp(14px,1.5vw,16px);
filter: drop-shadow(0px 0px 12px #fff); text-shadow: 0 0 12px #ffffffc8;
}
.services-category-item .btn-dark {display: flex; flex-grow: 1; max-width: 14em; font-size: clamp(14px,1.5vw,16px); font-weight: 700;}
.services-category-item .btn-group {gap: clamp(0.125em,0.75vw,0.75em);}
.services-category-item .btn-transparent {color: #fff; white-space: no-wrap; text-align: right;}
.services-category-item:hover .btn-transparent {background-color: var(--color-main-33);}
.services-category-item:hover .btn-transparent:active {background-color: var(--color-main-50);}
@media (max-width:1120px){
.services-category-item .btn-transparent {/*padding-right: 0.5em;*/}
}
@media (max-width:992px){
.services-category-item {aspect-ratio: auto;}
.services-category-item .btn-dark {display: none;}
.services-category-item .btn-group {margin-left: auto;}
}
/*PAGE SERVICE*/
.case-site-link {opacity: 0.85; transition: 0.25s;}
.case-site-link:hover {opacity: 1;}
.grid-col3 {display: grid; grid-template-columns: repeat(3,1fr); gap: var(--p-2);}
.grid-col2 {display: grid; grid-template-columns: repeat(2,1fr); gap: var(--p-2);}
.pos-rel {position: relative;}
.anim-updown {animation: UpDown-1em 10s linear infinite;}
.bg-shadows-dark-1 {background: radial-gradient(circle at 0% 100%, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 4em, transparent 10em), radial-gradient(circle at 99% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 3em, transparent 10em);}
.bg-shadows-dark-2 {background: radial-gradient(circle at 0% 100%, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 4em, transparent 10em), radial-gradient(circle at 99% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 3em, transparent 10em);}
.bg-shadows-white-1 {background: radial-gradient(circle at 0% 100%, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 25%) 4em, transparent 10em), radial-gradient(circle at 99% 0%, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 50%) 3em, transparent 10em);}
.bg-shadows-white-2 {background: radial-gradient(circle at 50% 75%, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 25%) 4em, transparent 15em), radial-gradient(circle at 99% 0%, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 50%) 3em, transparent 10em);}
.ul-default {
line-height: 1.33; list-style: disc outside; margin: 0.5em 0 0.5em 1em;
font-size: var(--fz-sm);
}
.ul-default li + li { margin-top: 1em /*0.75em*/;}
.ul-default li:marker {background-color: var(--color-main);}
/*Lists*/
.ul-items-iconed {list-style: none; margin: 0.5em 0;}
.ul-items-iconed > li {display: flex; align-items: flex-start; gap: 0.75em;}
.ul-items-iconed > li:before, .ul-items-iconed .icon {
flex-shrink: 0;
width: 2em; aspect-ratio: 1 / 1.125;
background: url('../img/ui/logo-icon.svg') 50% 50% no-repeat; background-size: contain;
}
.ul-items-iconed > li:before {content:'';}
/**/
.ul-items-iconed-white > li:before {background-image: url('../img/ui/logo-icon-gray.svg');}
.ul-items-iconed-white .h3-mini {color: #fff;}
/**/
.ul-items-iconed-big > li:before {width: clamp(2em,3.5vw,3.5em);}
.ul-items-iconed-small > li:before {width: clamp(1em,1.25vw,1.125em);}
@media (max-width:992px){
.grid-col2-at992 {grid-template-columns: repeat(2,1fr);}
}
@media (max-width:768px){
.grid-col1-at768 {grid-template-columns: repeat(1,1fr);}
.grid-col2-at768 {grid-template-columns: repeat(2,1fr);}
.flex-column-at768 {flex-direction: column;}
.fd-column-at768 {flex-direction: column;}
.mw-480-at768 {width: min(100%, 480px); margin-left: auto; margin-right: auto;}
}
@media (max-width:480px){
.grid-col1-at480 {grid-template-columns: repeat(1,1fr);}
}
/*Theme 2*/
.ul-items-iconed-theme-2 > li:before {
background-image: url('../img/ui/icon-prize.svg');
filter: brightness(3) grayscale(1); transition: filter 1s;
}
.ul-items-iconed-theme-2 > li:hover::before {
filter: brightness(1) grayscale(0) drop-shadow(0 0 5px var(--color-main-dark-50)); transition: filter 0.25s;
}
.ul-items-iconed-theme-2.ul-items-iconed > li {align-items: center;}
.ul-items-iconed-theme-2 > li + li {margin-top: 1.5em;}
/*Case Content*/
.case-content p {line-height: 1.33}
.obj-light-path {background: linear-gradient(to right, var(--color-main-dark), var(--color-main)); min-width: min(18%,282px); padding: var(--p-1) 0; margin: 0 clamp(1em,6vw,6em);}
.obj-light-path img {filter: sepia(0.25) hue-rotate(180deg); transform: scale(1.25); opacity: 0.7; transition: top 0.05s;}
.obj-light-path img.js-path-finished {
/*filter: brightness(1.08) drop-shadow(0 -1vw 5vw yellow) !important; transition: filter 0.25s;*/
animation: lightON 0.5s; animation-fill-mode: forwards; /*transition: opacity 1s;*/
}
@media (max-width:992px){
.obj-light-path {min-width: auto; max-width:10%; margin: 0;}
}
/*Tariffs*/
.tariff-items {display: flex; flex-direction: column; gap: var(--p-1);}
.tariff-items .item {}
.tariff-items .item:hover {box-shadow: 0 0 1px var(--color-main-dark-50); transition: 0.25s;}
.tariff-items .item-header {
align-items: center; justify-content: space-between; gap: var(--p-1) var(--p-2); padding: var(--p-15);
-webkit-user-select:none; -moz-user-select:none; cursor: pointer;
}
.tariff-items .item-header-middle {flex-grow:1; display: flex; align-items: center; justify-content: space-between; gap: var(--p-1);}
.tariff-items .item-title {
font-size: clamp(18px,1.33vw,21px); padding: 0.5em 0.75em; color: var(--color-main-dark);
background-color: #fff; min-width: 7em; text-align: center; font-weight: 700; transition: 0.25s;
}
.tariff-items .item-header:hover .item-title {box-shadow: 0 0 2px var(--color-main-dark-75), 0 0 1em #ffffff80;}
.tariff-items .item-header:active .item-title {box-shadow: 0 0 1px var(--color-main-dark-75), 0 0 2em #fff; transition: 0.05s;}
.tariff-items .item-price {font-size: clamp(19px,1.6vw,26px); font-weight: 700;}
.tariff-items .item-content {
display: none;
padding: var(--p-2);
}
.tariff-items .h3-mini {margin-bottom: 0.75em;}
.tariff-items .hr-wrapper {display: none; padding: 0 16.7%;}
.tariff-items hr {height: 1px;}
.tariff-items .item.active .item-content, .tariff-items .item.active .hr-wrapper {display: block; animation: fadeInUp-2em 0.25s;}
.tariff-details {column-count: 3; font-weight: 700;}
.tariff-details li {page-break-inside: avoid; break-inside: avoid;}
.tariff-items .item-header-right {line-height: 0;}
.tariff-items .btn-slide-icon {font-size: 13.4px;}
.tariff-items .item .btn {text-align: center;}
.tariff-items .item .btn-arrow {transition: 0.25s;}
.tariff-items .item-header:hover .btn-arrow {filter: drop-shadow(0 0 0.75em #fff); transition: 0.5s;}
.tariff-items .item-header:active .btn-arrow {filter: drop-shadow(0 0 2em #fff); transition: 0.05s;}
.tariff-items .item.active .btn-slide-icon {transform: rotate(120deg);}
@media (max-width:992px){
.tariff-details {column-count: 2;}
}
@media (max-width:640px){
.tariff-details {column-count: 1;}
.tariff-items .item-header-middle {flex-direction: column;}
}
@media (max-width:430px){
.item-header-middle .btn { align-self: stretch; justify-content: center;}
.tariff-items .item-header {flex-wrap: wrap;}
.tariff-items .item-header-middle {order:3; width: 100%;}
.tariff-items .btn-slide-icon {font-size: 10px;}
}
@media (max-width:400px){
}
/*tariff themes*/
.tariff-items .item-theme-white, .tariff-items .item-theme-dark {
background: radial-gradient(circle at 0% 100%, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 4em, transparent 10em), radial-gradient(circle at 99% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 3em, transparent 10em);
}
.tariff-items .item-theme-white {
background-color: rgba(239, 243, 244, 1);
}
.tariff-items .item-theme-blue {
background: radial-gradient(circle at 0% 100%, rgb(255 255 255 / 25%) 0%, rgb(255 255 255 / 25%) 4em, transparent 10em), radial-gradient(circle at 99% 0%, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 50%) 3em, transparent 10em);
background-color: var(--color-main); color: #fff;
}
.tariff-items .item-theme-dark {
background-color: var(--color-main-dark); color: #fff;
}
.tariff-items .item-theme-blue .h3-mini, .tariff-items .item-theme-dark .h3-mini {color: #fff;}
.tariff-items .item-theme-white hr {background-color: var(--color-main-dark);}
.tariff-items .item-theme-blue hr {background-color: #fff;}
.tariff-items .item-theme-dark hr {background-color: #fff;}
.tariff-items .item-theme-white .item-price {color: var(--color-main);}
.tariff-items .item-theme-dark .ul-items-iconed > li:before, .tariff-items .item-theme-blue .ul-items-iconed > li:before {background-image: url('../img/ui/logo-icon-gray.svg');}
/*.tariff-items .item-theme-dark .item-header-middle .btn {background-color: var(--color-main-70); color: #fff;}*/
.tariff-items .item-theme-dark .item-header-middle .btn:hover {background-color: var(--color-main);}
.tariff-items .item-theme-dark .item-header-middle .btn:active {transition: 0.25s; box-shadow: 0 0 3em var(--color-main);}
/*Team Mates*/
.mate-items {flex-wrap: wrap; gap: var(--p-3); justify-content: space-around;}
.mate-items.js-slider01-items {flex-wrap: nowrap;}
.mate-wrapper {display: flex; justify-content: center;}
.js-slider01 .mate-wrapper {cursor: pointer;}
.mate-item {position: relative; width: clamp(220px,18vw,330px); text-align: center;}
.mate-item-img {line-height: 0; position: relative; width: clamp(165px, 18vw, 330px); margin-left: auto; margin-right: auto;}
.mate-item-img img {position: relative; z-index: 1; filter: grayscale(0.85); transition: 0.5s;}
.mate-item:hover .mate-item-img img, .mate-wrapper.active .mate-item-img img {filter: grayscale(0);}
.mate-item-circle {
position: absolute; z-index: 0; width: 100%; aspect-ratio: 1 / 1; bottom: 0;
border-radius: 50%; background-color: var(--color-gray-light);
}
.mate-item:hover .mate-item-circle, .mate-wrapper.active .mate-item-circle {background-color: var(--color-main); transition: 0.5s;}
.mate-title {font-size: clamp(19px,1.6vw,26px); font-weight: 700; margin-top: 0.75em; margin-bottom: 0.375em;}
.mate-item:hover .mate-title, .mate-wrapper.active .mate-title {color: var(--color-main);}
.mate-desc {font-size: var(--fz-sm);}
/*FAQ*/
.faq-items {display: flex; flex-direction: column; gap: var(--p-1);}
.faq-items .item {
/*background: radial-gradient(circle at 1.75em 100%, rgb(41 110 240 / 15%) 0%, rgb(41 110 240 / 15%) 1em, transparent 5em), radial-gradient(circle at calc(100% - 2.5em) 2.5em, rgb(41 110 240 / 33%) 0%, transparent 6em);*/
background-color: var(--color-gray-light);
}
.faq-items .item:nth-of-type(even) {background-color: var(--color-main-10);}
.faq-items .item-header {
display: flex; align-items: center; justify-content: space-between; gap: var(--p-1) var(--p-2); padding: var(--p-1);
-webkit-user-select:none; -moz-user-select:none; cursor: pointer;
}
.faq-items .item-title {}
.faq-items .item-title {
font-weight: 700; font-size: clamp(19px,1.6vw,26px); transition: 0.25s;
}
.faq-items .item-header:hover .item-title { color: var(--color-main);}
.faq-items .item-header:active .item-title { color: var(--color-main-dark);}
.faq-items .item-content { display: none; padding: var(--p-1) var(--p-15); padding-right: calc(3em + var(--p-15)); padding-bottom: calc(1em + var(--p-15)); font-size: var(--fz-xxs); line-height: 1.44;}
.faq-items .item-content p + p {margin-top: 0.75em;}
.faq-items .item.active .item-content {display: block; animation: fadeInUp-2em 0.25s;}
.faq-items .btn-slide-icon {font-size: clamp(10px,1vw,11px);}
.faq-items .item-header:hover .btn-arrow {filter: drop-shadow(0 0 0.5em var(--color-main)); transition: 0.5s;}
.faq-items .item-header:active .btn-arrow {filter: drop-shadow(0 0 1.5em var(--color-main)); transition: 0.05s;}
.faq-items .item.active .btn-slide-icon {transform: rotate(180deg);}
/*Cases*/
.case-items-wrapper {overflow-x: auto; overflow: hidden;}
.case-items {
width: 100%; gap: var(--p-1); justify-content: flex-start; transition: transform 0ms ease 0ms;
position: relative;
}
.case-items.transit {transition: transform 300ms;}
.case-item {
flex-shrink: 0;
display: flex; flex-direction: column; gap: var(--p-075);
background: var(--color-gray-light) url('../img/media/bg-case.webp') 50% 50% no-repeat; background-size: cover;
padding: var(--p-2); padding-bottom: var(--p-3);
min-height: min(62vh, 50em);
min-width: 282px; max-width: 282px; transition: background-color 0.25s, color 0.25s, max-width 0.0s;
}
.case-item.active {background-color: var(--color-black); color: #fff; max-width: min(100%,594px); background-blend-mode: normal;}
.case-item:not(.active) {background-image: none !important; cursor: pointer;}
.case-item .item-title {
font-weight: 700; font-size: clamp(18px,1.625vw,26px); transition: all 0.25s, font-size 0s;
-webkit-user-select:none; -moz-user-select:none;
}
.case-item .item-url {color: var(--color-main); font-weight: 700;}
.case-item .item-desc {display: none; font-size: var(--fz-sm); line-height: 1.33; animation: fadeIn 0.5s;}
.case-item .item-desc p + p {margin-top: 0.75em;}
.case-item .item-link {margin-top: 0.75em; margin-bottom: 1.5em; font-weight: 700;}
.case-item .item-link .btn-text {display: none;}
.case-item .item-link a {display: inline-flex; gap: 1em; align-items: center;}
.case-item .item-thumb {
margin-top: auto; line-height: 0; transition: 0.25s; text-align: center;
-webkit-user-select:none; -moz-user-select:none;
}
.case-item .item-stats {
display: none; gap: var(--p-1); margin-top: auto; animation: fadeInUp-2em 0.5s; justify-content: space-between;
-webkit-user-select:none; -moz-user-select:none;
}
.case-item .item-stat-title {color: var(--color-main); font-size: clamp(18px,1.625vw,26px); font-weight: 700;}
.case-item .item-stat-desc {font-size: var(--fz-xxs);}
/**/
.case-item:not(.active):hover .item-title {color: var(--color-main);}
.case-item .item-link a:hover {color: var(--color-main);}
.case-item .item-link a:hover .btn-slide-icon {}
.case-item:not(.active):hover .item-thumb {/*transform: scale(1);*/ filter: drop-shadow(0 0 1em var(--color-main-dark-50)); }
.case-item:not(.active):active .item-thumb {/*transform: scale(1);*/ filter: drop-shadow(0 0 25em var(--color-main-dark-50)); transition: all 0.05s, filter 0.25s;}
/*active*/
.case-item.active .item-title {font-size: clamp(20px,2.25vw,40px);}
.case-item.active .item-desc {display: block;}
.case-item.active .item-link {animation: fadeIn 0.6s;}
.case-item.active .item-link .btn-text {display: block; backdrop-filter: blur(1px);}
.case-item.active .item-thumb {display: none;}
.case-item.active .item-thumb img {/*max-height: 60px;*/}
.case-item.active .item-stats {display: flex;}
@media (max-width:640px){
.case-items-wrapper {/*overflow-x: auto;*/}
}
/*Cases V2*/
.case-items-v2-wrapper {
--case-preview-halfW: 16.5vw;
position: relative; margin: 3em 0 2.5em;
}
.case-items-v2-wrapper .case-slider {
/*max-width: calc(100% - var(--case-preview-halfW)); margin-left: calc(var(--case-preview-halfW) * (-1));*/
padding-left: calc(var(--case-preview-halfW)*(1));
}
.case-slide-preview .item-bg {
background: var(--color-main) url('../img/ui/bg-logo-overflowed-2.svg') 50% 50% no-repeat; background-size: cover;
/*transform: scale(1.08);*/ margin: -4%; position: absolute; z-index: 0; top: 0; left:0; bottom: 0; right: 0; backface-visibility: hidden;
}
.case-items-v2-wrapper.transit .case-slide-preview .item-bg {animation: fadeIn 0.5s;}
.case-items-v2-wrapper .case-item.active {max-width: min(100%, calc(564px + var(--case-preview-halfW) + 2vw) ); padding-left: calc( var(--case-preview-halfW) + 2vw) }
.case-items-v2-wrapper .slider-buttons-wrapper {height: 1em;}
.case-slide-preview {min-width: calc(var(--case-preview-halfW)*(2)); position: absolute; top: 0; left:0; bottom: 0;}
.case-slide-preview .item-thumb {position: absolute; z-index: 5; bottom: -4%; right: -4%; line-height: 0; height: 80%; display: flex; align-items: flex-end;}
.case-slide-preview .item-thumb img {filter: drop-shadow(-0.75vw 0 4px #00000020); max-height: 100%;}
.case-items-v2-wrapper.transit .case-slide-preview .item-thumb img {animation: fadeIn 0.5s, toRight-10percent 0.5s; text-align: right;}
.case-slide-preview .item-logo {
position: absolute; z-index: 4; top: 4%; bottom: 25%; left: calc( var(--case-preview-halfW)*1.6 );
/*filter: drop-shadow(0 0 2px #00000040); transition: filter 0.25s;*/ animation: UpDown-1em 15s infinite;
}
.case-items-v2-wrapper.transit .case-slide-preview .item-logo {/*animation: fadeIn 0.5s;*/ animation: twinShadow 0.4s, UpDown-1em 15s infinite; /*filter: drop-shadow(0 0 0.5vw #ffffff80);*/}
.case-slide-preview .item-logo img {max-height: 100%;}
@media (max-width:480px){
.case-items-v2-wrapper {--case-preview-halfW: 10vw;}
}
@media (max-width:360px){
.case-items-v2-wrapper {--case-preview-halfW: 5vw;}
.case-items-v2-wrapper .case-slide-preview .item-thumb img {transform: scale(2);}
.case-items-v2-wrapper.transit .case-slide-preview .item-thumb img {animation: fadeIn 0.5s;}
}
/*Cases Static*/
.case-items-theme2 .case-item {cursor: default; min-height: auto;}
.case-items-theme2 .case-item.active {max-width:none;}
.case-items-theme2 .case-item .item-link {margin-top: auto; margin-bottom: 0;}
.case-items-theme2 .case-item .item-desc {margin-bottom: 2em;}
.case-items-theme2 .btn-text {cursor: pointer;}
.case-items-theme2 .case-item .item-stats {margin-top: 1em;}
/*Girl animation*/
.obj-anim-girl-emotion {
position: absolute; left:0; width:100%; top: 0; bottom:0; display:flex;
margin-left: clamp(-1.5em,-1.5vw,-0.75em); margin-top: clamp(-3em,-3vw,-1.5em);
align-items: stretch; z-index: 1;
}
.obj-anim-girl-emotion .obj-emotion {filter: grayscale(1); display: flex; align-items: end;}
.obj-anim-girl-emotion .obj-emotion-1 {animation: fadeIn 0.75s;}
.obj-anim-girl-emotion:hover .obj-emotion-1, .obj-anim-girl-emotion.active .obj-emotion-1 {
display: none;
}
.obj-anim-girl-emotion .obj-emotion-2 {display: none;}
.obj-anim-girl-emotion:hover .obj-emotion-2, .obj-anim-girl-emotion.active .obj-emotion-2 {
display: flex; animation: toRight-10percent 1s, grayScale 1.5s; animation-fill-mode: forwards;
}
.obj-anim-girl-emotion .obj-emotion img {max-height: 100%; height: 100%; position: relative;}
.obj-anim-girl-emotion:hover img, .obj-anim-girl-emotion.active img {}
/* Testimonials*/
.testimonial-items {display: flex; align-items: stretch; gap: clamp(3.5em,5vw,5em) clamp(1em,2vw,2em);}
.testimonial-items.fd-column {flex-direction: column;}
.testimonial-item {
background-image: url('../img/ui/bg-rays-blue.svg'), linear-gradient(to right, var(--color-gray-light) 0%, var(--color-gray-light-50) 100%);
background-size: cover; background-repeat: no-repeat;
/*background-color: var(--color-main-dark);*/ padding: var(--p-2); transition: all 0.25s, max-width 0.5s;
display: flex; flex-direction: column; gap:var(--gap-small); min-height: max(12vw, 8em);
box-shadow: 0px 2px 5px 0px #0000001A; position: relative;
}
.testimonial-item:hover, .testimonial-item:hover .item-author-wrapper-abs .item-author {box-shadow: 0 0 0 1px var(--color-main-10), 0px 2px 8px 0px var(--color-main-dark-33);}
.testimonial-item + .testimonial-item {}
.testimonial-item .item-header {display: flex; justify-content: space-between; align-items: center; gap: 0.75em;}
.testimonial-item .item-title {color: var(--color-main); font-weight: 700; font-size: clamp(17px,1.5vw,20px);}
.testimonial-item .item-author-wrapper-abs {
position: absolute; top: 0;
transform: translate(0, -50%);
}
.testimonial-item .item-author-wrapper-abs + .item-header {margin-top: clamp(1.5em,2vw,2em);}
.testimonial-item .item-author {
width: clamp(4em,6vw,6em); aspect-ratio: 1 / 1; background-size: cover; background-repeat: no-repeat;
border: clamp(0.3em,0.6vw,0.6em) solid #E9F4FF; border-radius: 6em; transition: 1s;
}
.testimonial-item .item-subtitle {font-size: clamp(15px,1.25vw,18px); margin-top: 0.25em;}
.testimonial-item .item-logo {
width: clamp(5em,10vw,10em); aspect-ratio: 10 / 4;
background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;
}
.testimonial-item .item-desc {font-size: 14px; line-height: 1.33;}
.testimonial-item .item-desc p + p {margin-top: 0.75em;}
.testimonial-item .item-bottom {}
.testimonial-item .item-doc {
display: inline-flex; align-items: center; gap: 0.75em; font-weight: 700;
color: #002365; opacity: 0.875; transition: 0.25s;
}
.testimonial-item .item-doc:hover {opacity: 1;}
.testimonial-item .item-doc .icon {}
/* Slider*/
.section-testimonials-slider .section-inner {padding-right: 0;}
.testimonials-slider {padding-top: clamp(2em,3.5vw,3.5em); padding-left: 8px;}
.slider-items-wrapper {overflow: hidden;}
.testimonials-slider .testimonial-item {min-width: min(75%,906px); opacity: 0.6; cursor: pointer;}
.testimonials-slider .testimonial-item:hover { opacity: 0.8;}
.testimonials-slider .testimonial-item.active {opacity: 1; /*max-width: min(100%, 906px);*/}
.testimonials-slider .testimonial-item .item-bottom {margin-top: auto;}
.testimonials-slider .testimonial-item:not(.active) .item-desc {visibility: hidden;l}
.testimonials-slider .testimonial-item:not(.active) .item-header {/*flex-direction: column;*/ align-items: flex-start;}
.testimonials-slider .testimonial-item.active .item-header {animation: fadeIn 0.75s;}
.testimonials-slider .testimonial-item.active .item-desc {animation: fadeInUp-2em 0.75s;}
.testimonials-slider .testimonial-item.active .item-logo, .testimonial-item.active .item-bottom {animation: BlurOut 0.75s;}
.testimonials-slider .testimonial-item.active .item-author {animation: toRight-10percent 0.75s;}
.testimonials-slider .testimonial-item .item-logo {width: clamp(4em,8vw,8em);}
.js-slider01-items {
width: 100%; justify-content: flex-start; transition: transform 0ms ease 0ms; position: relative;
}
.js-slider01-items.transit {
transition: transform 300ms;
}
.visible-at1160 {display: none;}
@media (max-width:480px){
.testimonials-slider .testimonial-item {min-width: 95%;}
.testimonial-item .item-header {flex-direction: column;}
}
/*columns*/
@media (min-width:1160px){
.section-testimonials-slider .columns {
display: flex;
}
.visible-at1160 {display: block;}
.flex.visible-at1160 {display: flex;}
.hidden-at1160 {display: none;}
}
/* h2-wrapper-theme2 */
.h2-wrapper-theme2 {flex: 1 0 30%; padding: var(--p-2); padding-left: 0;}
.h2-wrapper-theme2 a {opacity: 0.85;}
.h2-wrapper-theme2 a:hover {opacity: 1;}
.h2-wrapper-theme2 img {width: 100%;}
/*О нас*/
/*Result Stats*/
.result-items {}
.section-result-stats .column-1 {padding: var(--p-2);}
.result-items .item-title {font-size: clamp(23px,2.4vw,50px); font-weight: 700;}
.result-items .item-desc {margin-top: 0.25em; font-size: var(--fz-xxs);}
.image-wrapper-robot {line-height: 0; margin-top: clamp(-9em,-9vw,-3em);}
.image-wrapper-robot img {/*transform: scale(1.15); max-width: min(100%,476.5px);*/}
.obj-shadow-wrapper-2 {
position: absolute; top: 0; bottom: 0; left: 0; right:0; z-index: 0;
display: flex; justify-content: center; align-items: center; opacity: 0.5;
}
.obj-shadow-wrapper-2 + div {position: relative; z-index: 1;}
.obj-shadow-2 {
width: 9vw; height: 9vw;
box-shadow: 0 0 6vw 6vw var(--color-main); background-color: var(--color-main); border-radius: 10vw;
}
.anim-hue-rotate {animation: hueRotate 5s infinite;}
/* history-points-items*/
.history-points-items {
--item-offset: 12em;
display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(1.5em,2vw,2em) var(--p-2); /*margin-bottom: calc(var(--item-offset)*(1));*/
}
.history-points-items .item {
padding: var(--p-2); width: 40%; position: relative; transition: all 0.25s; box-shadow: 0 0 0 1px var(--color-main-10), 0px 0px 5px 0px var(--color-main-dark-20);
cursor: pointer;
}
.history-points-items .item:hover {box-shadow: 0 0 0 1px var(--color-main-10), 0px 2px 6px 0px var(--color-main-dark-33);}
.history-points-items .item {background-color: var(--color-gray-light);}
.history-points-items .item:nth-of-type(1), .history-points-items .item:nth-of-type(4), .history-points-items .item:nth-of-type(5), .history-points-items .item:nth-of-type(8), .history-points-items .item:nth-of-type(9) {
background-color: var(--color-main); color: #fff;
}
/* V1
.history-points-items .item:nth-of-type(odd) {margin-bottom: var(--item-offset);}
.history-points-items .item:nth-of-type(even) {margin-top: var(--item-offset);}
.history-points-items .item:nth-of-type(n+3) {transform: translate( 0, calc(var(--item-offset)*(-1)) );}
.history-points-items .item:nth-of-type(n+5) {transform: translate( 0, calc(var(--item-offset)*(-2)) );}
.history-points-items .item:nth-of-type(n+7) {transform: translate( 0, calc(var(--item-offset)*(-3)) );}
*/
/* V2 */
.history-points-items .item:nth-of-type(odd) {}
.history-points-items .item:nth-of-type(even) {transform: translate( 0, calc(var(--item-offset)*(1)));}
.history-points-items .item-header {display: flex; justify-content: space-between; align-items: center; gap: var(--p-2); margin-bottom: 0.75em;}
.history-points-items .item-title {font-size: var(--fz-xxl); font-weight: 700;}
.history-points-items .item:hover .item-title {animation: BlurOut 1s;}
.history-points-items .item-icon {
width: 2.5em; height: 2.5em; border-radius: 3em; flex-shrink: 0;
background: #fff 50% 50% no-repeat; background-size: 50%;
background-image: url('../img/ui/camera.svg'); cursor: pointer;
}
.history-points-items .item:hover .item-icon {animation: cameraShoot-blue 2s;}
.history-points-items .item:nth-of-type(1):hover .item-icon, .history-points-items .item:nth-of-type(4):hover .item-icon,
.history-points-items .item:nth-of-type(5):hover .item-icon, .history-points-items .item:nth-of-type(8):hover .item-icon,
.history-points-items .item:nth-of-type(9):hover .item-icon {
animation: cameraShoot 2s;
}
.history-points-items .item-content {font-size: var(--fz-sm); line-height: 1.33;}
.history-points-items .item-content p + p {}
/*.history-points-items .item:before {content: ''; position: absolute; height:calc( var(--item-offset) - 33%); top:67%; width: 50%; left: 100%; background-color: var(--color-main-dark-50);}*/
.history-points-items .item:after {
content: url('data:image/svg+xml;utf8,');
content: url('data:image/svg+xml;utf8,');
content: '';
position: absolute; z-index: 0; height:calc( var(--item-offset) - 33%); top: 67%; width: 50%; left: 100%;
/*background-color: var(--color-main-25);*/
background: linear-gradient(to top right, transparent 0%, transparent 49%, var(--color-main-dark) 50%, transparent 51%, transparent 100%) 50% 50% no-repeat;
display: flex; align-items: center; justify-content: center; line-height: 0;
display: none;
}
.history-points-items .item:nth-of-type(even)::after {left: auto; right: 100%; height: calc( /*var(--item-offset)*/ var(--p-2) + 16.5% ); /*background-color: rgb(255 69 0 / 25%)*//*var(--color-main-dark-50)*/; transform: scale(-1,1);}
.history-points-items .item:last-of-type::after {display: none;}
@media (max-width:992px){
.history-points-items .item {width: 48%;}
.history-points-items .item:after {width: 8%;}
}
@media (max-width:640px){
.history-points-items { --item-offset: 0; }
.history-points-items .item {width: auto; min-width: 48%;}
}
.obj-underlay {
position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;
}
.obj-underlay-center-items {display: flex; justify-content: center; align-items: center;}
.obj-underlay + div:not(.obj-underlay), .obj-z-1 {position: relative; z-index: 1;}
@media (max-width: 992px){
.obj-history-vectors {display: none;}
}
/**/
.obj-path {background: linear-gradient(to right, var(--color-main-dark), var(--color-main));}
.award-items {gap: var(--p-2);}
.award-items .item {cursor: default;}
.award-items .item-desc {font-size: var(--fz-l); font-weight: 700; margin-top: 0.75em; opacity: 0.8; transition:; 0.25s;}
.award-items .item:hover .item-desc {opacity: 1;}
/*GLOW*/
/*white*/
.hover-glow-white:hover .btn-arrow {filter: drop-shadow(0 0 0.75em #fff); transition: 0.5s;}
.hover-glow-white:active .btn-arrow {filter: drop-shadow(0 0 2em #fff); transition: 0.05s;}
/*lightMain*/
.hover-glow-main:hover .btn-arrow {filter: drop-shadow(0 0 0.75em var(--color-main)); transition: 0.5s;}
.hover-glow-main:active .btn-arrow {filter: drop-shadow(0 0 2em var(--color-main)); transition: 0.05s;}
/* POPUPS */
.popup-overlay {
position: fixed; display: none; flex-direction: column; padding: var(--p-2) 0;
background:rgba(30,30,30,0.7); align-items: center; transition: backdrop-filter 0.5s;
left: 0; top: 0; right: 0; bottom: 0; z-index: 100; overflow-y: auto;
}
.popup-overlay::before, .popup-overlay::after {content:'';flex:1;}
.popup-overlay.show {display: flex; backdrop-filter: blur(5px);}
.popup-wrapper {
max-width:min(90%,906px); background-color: rgb(255,255,255,1);
background-image: radial-gradient(circle at 50% 16vw, rgb(41 110 240 / 25%) 0%, rgb(41 110 240 / 25%) 4em, transparent 16em), radial-gradient(circle at 99% 0%, rgb(41 110 240 / 50%) 0%, rgb(41 110 240 / 50%) 3em, transparent 10em);
animation: fadeInUp-2em 0.4s;
}
.popup {
position: relative; border-radius:2px; padding: var(--p-3);
padding-bottom: clamp(2em,4vw,4em);
}
.popup-wrapper-theme-dark {
background-color: var(--color-black); color: #fff;
}
.popup-overlay.show .popup {}
.btn-hover-main:hover {filter: drop-shadow(0 0 0.75em var(--color-main));}
.btn-hover-main:active {filter: drop-shadow(0 0 2em var(--color-main));}
.popup-close {
position: absolute; right:0; top:0; width: 3em; height: 3em; border-radius:2px; background-size: auto 1.1em;
background-color:var(--maincolor-light); cursor: pointer; opacity: 0.8;
background-image:url('../img/ui/close.svg'); background-position: 50% 50%; background-repeat: no-repeat;
}
.popup-wrapper-theme-dark .popup-close {filter: brightness(5);}
.popup-close:hover {opacity: 1;}
.popup-close:active {transform: scale(0.94)}
.popup-inner {}
/*popup content*/
.popup-header {}
.popup-header-desc {font-size: var(--fz-sm); margin: 0.5em 0 1.5em;}
.popup a, .link-default {color: var(--color-main); opacity: 0.85;}
.popup a:hover, .link-default:hover {opacity: 1;}
.popup-inner {
max-width: 590px; margin-left: auto; margin-right: auto;
display: flex; flex-direction: column; gap: 0.75em;
}
.popup-form {
display: flex; flex-direction: column; gap: 0.75em; padding: var(--p-1);
}
.popup-form-desc {
font-size: 13px; text-align: center; line-height: 1.33; margin-top: 0.75em;
max-width: 40em; margin-left: auto; margin-right: auto;
}
@media (min-width:481px){
.popup-inner {margin-left: clamp(1.5em,4vw,6em); margin-right: clamp(1.5em,4vw,6em);}
}
/*loading*/
.loader-wrapper {position: relative; padding: 7px;}
.loader-wrapper.loading {/*overflow:hidden*/}
.loader-wrapper.loading:before {
content:''; position: absolute; top:0; bottom:0; left:0; right:0; backdrop-filter: blur(5px); z-index: 5;
}
.loader-wrapper.loading:after {
content:''; position: absolute; z-index: 5;
top: 50%; left: 50%; width: 48px; height: 48px; margin-top: -24px; margin-left: -24px;
background: url('../img/ui/loader.svg') 50% 50% no-repeat; animation: roll 1s infinite;
}
/*transparent version*/
.loader-wrapper.loader-wrapper-transparent.loading:before {background-color: transparent; backdrop-filter: blur(2px);}
/*overflowed*/
.loader-wrapper.loader-wrapper-oveflowed.loading:before {
top: -5px; bottom: -5px; left: -5px; right: -5px;
}
/* JS LETTERS */
.js-letters {display: none;}
.js-letters.active {display: inline-flex; animation: shadowGlow 3.5s infinite;}
.js-letters .js-letter {}
.js-letters:not(.active) .js-letter {color: transparent; visibility: hidden;}
.js-letters.active .js-letter {visibility: visible; animation-name: jsLetters; animation-duration: 0.5s; animation-timing-function: ease-in;}
@keyframes jsLetters {
0% {
opacity: 0;
-webkit-transform: translate3d(50vw, 0, 0);
transform: translate3d(50vw, 0, 0);
}
/*
93% {color: inherit;}
94% {
opacity: 1; color: #ffffff;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
*/
100% {
opacity: 1; /*color: inherit;*/
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes cameraShoot-blue {
0% { box-shadow: 0 0 0 0em transparent; }
57% { box-shadow: 0 0 0 2em var(--color-main-25); transform: scale(1); }
58% { box-shadow: 0 0 0 2em var(--color-main); transform: scale(1.12); }
60% { box-shadow: 0 0 0 2em var(--color-main-25); transform: scale(1);; }
100% { box-shadow: 0 0 0 2em transparent; }
}
@keyframes cameraShoot {
0% { box-shadow: 0 0 0 0em rgb(255 255 255 / 0%); }
57% { box-shadow: 0 0 0 2em rgb(255 255 255 / 25%); transform: scale(1); }
58% { box-shadow: 0 0 0 2em rgb(255 255 255 / 100%); transform: scale(1.12); }
60% { box-shadow: 0 0 0 2em rgb(255 255 255 / 25%); transform: scale(1); }
100% { box-shadow: 0 0 0 2em rgb(255 255 255 / 0%); }
}
@keyframes brightness-01 {
0% {filter: brightness(1)}
33% {filter: brightness(0)}
80% {filter: brightness(3)}
100% {filter: brightness(1)}
}
@keyframes roll {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes lightON {
0% {
filter: brightness(1) drop-shadow(0 -1vw 0vw orange)
}
10% {
filter: brightness(1.04) drop-shadow(0 -1vw 1vw orange)
}
15% {
filter: brightness(0.75) drop-shadow(0 0 0 orange)
}
20% {
filter: brightness(1.06) drop-shadow(0 -1vw 4vw orange)
}
50% {
filter: brightness(1.06) drop-shadow(0 -1vw 6vw yellow)
}
100% {
filter: brightness(1.1) drop-shadow(0 -1vw 6vw #ffff86)
}
}
@keyframes twinShadow {
0% {
filter: drop-shadow(0em 0 0 var(--color-main-25)) drop-shadow(0em 0 0 #ffffff40);
}
25% {
filter: drop-shadow(-2.5vw 0 0 var(--color-main-25)) drop-shadow(2.5vw 0 0 #ffffff40);
}
75% {
filter: drop-shadow(2.5vw 0 0 var(--color-main-25)) drop-shadow(-2.5vw 0 0 #ffffff40);
}
to {
filter: drop-shadow(0em 0 0 var(--color-main-25)) drop-shadow(0em 0 0 #ffffff40);
}
}
@keyframes hueRotate {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes grayScale {
from {
filter: grayscale(1);
}
to {
filter: grayscale(0);
}
}
@keyframes BlurOut {
from {
filter: blur(6px);
}
to {
filter: blur(0px);
}
}
@keyframes toRight-10percent {
from {
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes toLeft-10em {
from {
-webkit-transform: translate3d(10em, 0, 0);
transform: translate3d(10em, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInToLeft-10em {
from {
opacity: 0;
-webkit-transform: translate3d(10em, 0, 0);
transform: translate3d(10em, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp-2em {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2em, 0);
transform: translate3d(0, 2em, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes UpDown-3em {
0% {
-webkit-transform: translate3d(0, 0em, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
75% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes UpDown-1em {
from {
-webkit-transform: translate3d(0, 0em, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -1em, 0);
transform: translate3d(0, -1em, 0);
}
75% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 1em, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn-50 {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes fadeInOut {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeInOut-50 {
from {
opacity: 0.5;
}
50% {
opacity: 1;
}
to {
opacity: 0.5;
}
}
@keyframes shadowGlow {
0% {
filter: drop-shadow(2px 4px 16px var(--color-main));
}
50% {
filter: drop-shadow(1px 2px 32px var(--color-main-dark));
}
100% {
filter: drop-shadow(2px 4px 16px var(--color-main));
}
}
/* -webkit-user-select:none; -moz-user-select:none; */
/*CUSTOM SELECTs*/
.sel {
-webkit-user-select:none; -moz-user-select:none;
display: inline-flex; align-items: center; position:relative; text-align:left;
font-size: clamp(18px,2vw,20px); border-bottom: 1px solid;
}
.sel .selected {
width: 100%; padding: 0.5em 0.75em; padding-right: 2.5em; cursor: pointer; text-align: left; display:inline-block; line-height: 1.1;
}
.sel.changed .sel-reset + .selected {padding-left: 0.375em;}
.sel .selected:before, .icon-dropdown:before, .btn-dropdown:before {
content:''; position: absolute; right: 0; top: 0; width: 2em; bottom: 0;
background: url('/img/svg/arrow-down.svg') 50% 54% no-repeat; /* calc(100% - 0.5em) 50% no-repeat;*/ background-size: auto 9px;
transition: 0.25s; filter: grayscale(1) brightness(2.5);
}
.sel.opened .selected:before, .icon-dropdown.js-toggled:before, .btn-dropdown.js-toggled:before {transform: scale(1, -1);}
.sel .sel-reset {
align-self: stretch; display: none; width: 2.5em; line-height: 0;
background: url('../img/svg/icon-close.svg') 92% 50% no-repeat; background-size: 1.5em auto;
cursor: pointer; transition: opacity 0.2s;
}
.sel.changed .sel-reset {display: block; filter: hue-rotate(20deg); transition:0.2s;}
.sel.changed .sel-reset:hover {filter: hue-rotate(0deg);}
body {scrollbar-arrow-color: var(--color-main);}
.sel .list {
display: none;
background-color: var(--color-main-dark-75); backdrop-filter: blur(3px); border-top-width:0;
position: absolute; min-width: 100%; line-height: 1.2; left: 0; top: 100%; z-index: 3;
overflow: hidden; overflow-y: auto; /*max-height: 17em;*/
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);/* top: calc(100% + 0.5em); border-radius: 0.5em;*/
}
.sel-right .list {right:0; left:auto;}
.sel.el-rounded .list {border-radius: 0.5em;}
.sel.el-shadowed .list {box-shadow: 0 4px 16px rgb(12 16 24 / 12%);}
/*.sel .list::-webkit-scrollbar { width: 0px; }*/
/*.sel:not(.opened) {animation: colorBoost 0.7s;}*/
.opened .list {display: block; animation: fadeIn 0.25s;}
.sel .select, .sel .select-initial {display: block; padding: 0.625em 0.75em; cursor:pointer; transition: background-color 1.5s;}
.select:hover {background-color: var(--color-main)/*#dbd7ed7a*/; /*color: var(--color-main);*/ transition: background-color 0.2s;}
.select:active, .select.active {background-color:var(--color-main); transition: background-color 0.1s; color:#fff;}
form .sel-hidden {position: absolute; z-index: -1; padding: 0; border: 0; bottom: 0; left: 0; color: transparent;}