.admin-setting { position: relative; width: 100%; min-height: 30px; } .admin-setting .container { position: relative; display: flex; justify-content: space-between; padding: 4px 0; } .admin-setting .btn { min-height: unset; padding: 8px 16px; } .admin-setting .open-setting { background-color: #00b44e; padding: 15px; border-radius: 6px; } .card { background-color: #fff; padding: 15px; border-radius: 6px; z-index: 100; } .card .card-header { display: flex; justify-content: space-between; } .card button { padding: 5px; background-color: #bababa; } .card .form-group { margin-bottom: 5px; } .card .form-group input { border: 1px solid #bababa; } .card.color-picker .card-body { display: flex; align-items: flex-start; justify-content: flex-start; margin: -5px; flex-wrap: wrap; width: 100%; max-width: 640px; } .card.color-picker .form-group { margin: 5px; padding: 2px 6px; border: 1px dashed #e2e2e2; border-radius: 5px; flex-grow: 1; text-align: center; } .card.color-picker .card-header { margin-bottom: 12px; } .card.color-picker label { margin-bottom: 2px; display: inline-block; } .card.color-picker .btn { margin-top: 12px; } .card-subtitle { width: 100%; text-align: center; margin: 12px 0px; } .card-tools .btn { border: 1px solid var(--default); max-width: none; width: 48px; background-color: transparent; } .card-actions { display: flex; gap: 12px; } .card.color-picker .card-body { margin: 12px 0px; } .card.color-picker .btn.btn-success { background-color: var(--main); color: var(--light-font); padding: 0px 12px; } .card.color-picker .btn.btn-warning { background-color: var(--default); color: var(--main-font); padding: 0px 12px; } .installment .title-h1 { margin: 40px 0; } .installment__wrap { padding-top: 98px; } .location { cursor: pointer; position: relative; } .location--header { margin-right: 24px; } .location__wrap { display: flex; align-items: flex-start; } .location__icon { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; } .location__city { display: flex; } .location__city-name { font-weight: 600; text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .location__city-icon svg { width: 16px; height: 16px; } .location__address { color: var(--main); line-height: 14px; text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .location__clinic-count { color: var(--grey-font); line-height: 14px; } .location__geo { position: absolute; width: 307px; top: 0%; left: 105%; padding: 16px; border-radius: 16px; box-shadow: 0px 4px 16px 0px var(--shadow-grey); z-index: 20000; background-color: var(--light-background); } .location__geo .mobile { display: none; } .location__geo-close { display: none; } .location__geo-text { min-width: 48px; width: 48px; } .location__geo::before { z-index: 19999; display: block; content: ""; left: -6px; transform: rotate(45deg); position: absolute; width: 14px; height: 14px; border-radius: 3px; background-color: var(--light-background); top: 24px; } .location__geo-content { width: 100%; position: relative; min-height: 20px; height: -moz-fit-content; height: fit-content; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: start; } .location__geo-content > svg { margin-top: -6px; margin-right: -6px; } .location__geo-text { max-width: 230px; width: 100%; color: var(--main-font); } .location__geo-actions { display: flex; align-items: center; gap: 12px; } .location__geo-actions .btn { flex: 0.5; max-width: none !important; } .location__dropdown { display: none; position: absolute; z-index: 200; background-color: var(--light-background); padding: 24px 24px 0px 24px; width: 300px; top: 100%; left: 0; border-radius: 12px; box-shadow: 0px 4px 16px 0px var(--shadow-grey); } .location__dropdown.active { display: block; } .location__dropdown-list { margin: -3px; } .location__dropdown-item { display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: 24px; margin: 3px 3px 24px 3px; padding: 0px; border-radius: 12px; } .location__dropdown-city-name { padding-left: 12px; } .location__dropdown-city-num { color: var(--grey-font); } .location__dropdown-city { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .location__dropdown-clinics { display: flex; flex-direction: column; gap: 4px; width: 100%; } .location__dropdown-clinics .location__icon-street > svg { stroke: var(--border-grey); } .location__dropdown-clinics-single { transition: background-color 0.2s ease; cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 16px; background: var(--light-background); min-height: 48px; height: -moz-fit-content; height: fit-content; border-radius: 12px; } .location__dropdown-clinics-single:hover { transition: all ease 0.3s; background: var(--grey-background); background-color: var(--grey-background); } .location__dropdown-clinics-single:hover .location__icon-street > svg { transition: all ease 0.3s; stroke: var(--main); } .location__dropdown-clinics-single.active { background: radial-gradient(60.16% 60.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-radius: 8px; font-weight: 600; color: var(--light-font); } .location__dropdown-clinics-single.active .location__icon-street > svg { stroke: var(--light-background); } .location__dropdown-clinic-street { text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .location--header { transition: all 0.2s ease; } .location--header:hover .location__icon > svg, .location--header:hover .location__city-icon > svg { stroke: var(--main) !important; } .location__icon { position: relative; transition: color 0.3s ease; } .location__icon svg { z-index: 0; } .location__icon--number { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; z-index: 1; width: 24px; height: 24px; color: var(--interface-grey); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .location-metro__item-name { display: flex; align-items: end; gap: 4px; } .location-metro__item-name p { white-space: nowrap; margin: 0px; text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .location__dropdown-metro { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0px; padding-bottom: 24px; } .location__dropdown-metro-single { transition: background-color 0.2s ease; cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 16px; background: var(--light-background); min-height: 48px; height: -moz-fit-content; height: fit-content; border-radius: 12px; } .location__dropdown-metro-single:hover { transition: all ease 0.3s; background: var(--grey-background); background-color: var(--grey-background); } .location__dropdown-metro-single:hover .location__icon-metro > svg { transition: all ease 0.3s; stroke: var(--main); } .location__dropdown-metro-icon { display: flex; align-items: end; } .location__dropdown-metro-info { width: 100%; } .location__dropdown-metro-station { text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; margin: 0px; } @media (max-width: 640px) { .header__wrap-left .location { display: flex; align-items: center; } .header__wrap-left .location__address { white-space: nowrap; overflow: hidden; } .location__dropdown-item { margin-bottom: 8px; } .location.background-hover { min-height: 48px; height: -moz-fit-content; height: fit-content; height: 48px; padding: 0px; margin: 8px; } .location--header { position: relative; z-index: 100; border: 1px solid var(--border-grey); min-height: 48px; max-width: 160px; width: -moz-fit-content; width: fit-content; overflow: hidden; height: -moz-fit-content; height: fit-content; } .location--header::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } } @media (max-width: 600px) { .location__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay); z-index: 200; cursor: pointer; } .location__overlay.active { display: block; } .location__dropdown { position: fixed; background-color: var(--light-background); padding: 24px; width: 100vw; height: -moz-fit-content; height: fit-content; bottom: 0; top: auto; left: 0; border-radius: 20px 20px 0 0; box-shadow: 0px -4px 16px 0px var(--shadow-grey); overflow-y: auto; animation: slideUp 0.3s ease-out; } .location__geo { width: 224px; display: flex; gap: 0px; height: 80px; padding: 16px; } .location__geo-text { min-width: 52px; margin-right: 12px; } .location__geo-actions { gap: 4px; } .location__geo .desktop { display: none; } .location__geo .mobile { display: block; } .location__geo .mobile.btn.btn--grey { min-width: 64px; width: 64px; } .location__geo .btn.btn--color-progress { min-width: 64px; width: 64px; } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } .social { padding: 9px 12px; background-color: var(--grey-background); display: flex; align-items: center; border-radius: 8px; } .social.footer__top-social { padding: 0; } .social.footer__top-social .social__wrap { margin: 0; justify-content: space-between; min-width: 148px; padding: 12px 24px; } .social.footer__top-social .social__icon { margin: 0 8px 0 0; } .social.footer__top-social .social__icon svg { width: 24px; height: 24px; } .social.footer__top-social .social__icon:last-child { margin: 0; } .social.footer__top-social .social__text { max-width: 190px; margin-left: 0; margin-right: 24px; } .social--header { margin-top: 8px; } .social--header .social__icon { margin: 0px; padding: 8px 4px; } .social--full-menu { width: 100%; justify-content: center; padding-top: 33px; margin-top: -20px; position: relative; z-index: 1; } .social__wrap { display: flex; align-items: center; margin: -9px; } .social__icon { margin: 9px; } .social__icon svg { width: 14px; height: 14px; } .social__text { margin-left: 24px; line-height: 14px; color: var(--grey-font); } @media all and (max-width: 640px) { .social--header { display: none; } } .social-messengers__wrap { display: flex; align-items: center; } .social-messengers__icon { margin-right: 9px; } .social-messengers__icon svg { width: 24px; height: 24px; } .social-messengers__list { display: flex; align-items: center; margin: -3px; } .social-messengers__item { margin: 3px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .social-messengers__item--viber { background-color: var(--viber); } .social-messengers__item--whatsapp { background-color: var(--whatsapp); } .social-messengers__item--telegram { background-color: var(--telegram); } .social-messengers__item svg { width: 16px; height: 16px; fill: var(--light-font); } .clinic-select-form-list .clinic-select-form__select { background-color: var(--light-background); border-radius: 12px; } .clinic-select-form-list .clinic-select-form__single-value { color: var(--main-font); cursor: pointer; margin: 0; position: relative; padding-left: 28px; line-height: 19.6px; } .clinic-select-form-list .clinic-select-form__single-value::before { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .clinic-select-form-list .clinic-select-form__single-value span:first-child { padding-right: 4px; } .clinic-select-form-list .clinic-select-form__control { border: 1px solid var(--border-grey); box-shadow: none; min-height: unset; padding: 19px 26px 19px 28px; background-color: rgba(255, 255, 255, 0); cursor: pointer; border-radius: 12px; } .clinic-select-form-list .clinic-select-form__control:hover { border-color: var(--border-grey); } .clinic-select-form-list .clinic-select-form__control:hover .clinic-select-form__dropdown-indicator svg path { stroke: var(--main); } .clinic-select-form-list .clinic-select-form__control--menu-is-open { min-height: unset; } .clinic-select-form-list .clinic-select-form__control--menu-is-open .clinic-select-form__indicator { transform: rotate(180deg); } .clinic-select-form-list .clinic-select-form__control--menu-is-open .clinic-select-form__single-value { cursor: default; } .clinic-select-form-list .clinic-select-form__value-container { padding: 0; } .clinic-select-form-list .clinic-select-form__indicator-separator { display: none; } .clinic-select-form-list .clinic-select-form__indicator { padding: 0; width: 24px; height: 24px; transition: transform 0.2s ease; } .clinic-select-form-list .clinic-select-form__menu { box-shadow: none; margin: 0; padding: 0 26px 12px 28px; background-color: var(--light-background); z-index: 2; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom: 1px solid var(--border-grey); border-left: 1px solid var(--border-grey); border-right: 1px solid var(--border-grey); top: calc(100% - 20px); left: 0; } .clinic-select-form-list .clinic-select-form__menu-list { padding: 0; } .clinic-select-form-list .clinic-select-form__option { cursor: pointer; padding: 8px 0 8px 28px; position: relative; margin-bottom: 4px; color: var(--main-font); line-height: 19.6px; transition: color 0.1s ease; } .clinic-select-form-list .clinic-select-form__option:active { background-color: transparent; } .clinic-select-form-list .clinic-select-form__option:active::before { background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; border: none; } .clinic-select-form-list .clinic-select-form__option span:first-child { padding-right: 4px; } .clinic-select-form-list .clinic-select-form__option:first-child { margin-top: 12px; } .clinic-select-form-list .clinic-select-form__option:last-child { margin-bottom: 0; } .clinic-select-form-list .clinic-select-form__option::before { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-grey); position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .clinic-select-form-list .clinic-select-form__option--is-focused { background-color: transparent; color: var(--main); } .hint-popup { position: fixed; z-index: 20000; min-height: 50px; padding: 16px 24px 16px 24px; width: -moz-fit-content; width: fit-content; min-width: 200px; max-width: 318px; background-color: var(--light-background); box-shadow: 0px 14px 24px 0px var(--shadow); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .hint-popup__wrap { position: relative; z-index: 100; cursor: default; text-align: center; max-width: 270px; overflow: hidden; } .hint-popup::after { pointer-events: none; z-index: 20; display: block; content: ""; left: 50%; transform: translateX(-50%) rotate(45deg); position: absolute; width: 20px; height: 20px; border-radius: 3px; background-color: var(--light-background); top: -9px; } .hint-popup::before { z-index: 110; display: block; content: ""; width: 16px; height: 100%; right: -1px; top: 0; position: absolute; width: 16px; border-radius: 0px 12px 12px 0px; height: 100%; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .hint-popup.top::after { bottom: -9px; top: unset; } .hint-popup.left::after { left: unset; right: -9px; top: 50%; transform: translateY(-50%) rotate(45deg); bottom: unset; } .hint-popup.right::after { left: -9px; top: 50%; transform: translateY(-50%) rotate(45deg); bottom: unset; } @media (max-width: 480px) { .hint-popup { max-width: 200px; } .hint-popup__wrap { max-width: 152px; } } .form-field { position: relative; height: 64px; width: 100%; margin-bottom: 32px; transition: margin 0.2s ease; } .form-field__label { position: absolute; top: 50%; left: 32px; right: 48px; color: var(--grey-font); transition: color 0.2s ease, top 0.2s ease; transform: translateY(-50%); z-index: 2; } .form-field__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 32px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .form-field__icon--valid { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .form-field__icon--valid svg { width: 16px; height: 16px; } .form-field__icon--error { background-color: var(--error); } .form-field__icon--error svg { width: 8px; height: 8px; } .form-field__icon--hint { width: 24px; height: 24px; border-radius: 0; cursor: pointer; } .form-field__icon--hint:hover svg { stroke: var(--main); } .form-field__icon--hint svg { stroke: var(--grey-font); width: 24px; height: 24px; } .form-field__error { line-height: 14px; position: absolute; bottom: -21px; color: var(--error); padding-left: 32px; } .form-field:last-of-type { margin-bottom: 0; } .form-field input, .form-field textarea { width: 100%; height: 100%; border: 1px solid var(--border-grey); font-family: "Inter", sans-serif; border-radius: 12px; background-color: var(--light-background); line-height: 19.6px; padding: 29px 48px 15px 32px; resize: vertical; display: block; } .form-field input::-webkit-resizer, .form-field textarea::-webkit-resizer { opacity: 0; } .form-field input:focus, .form-field input:active, .form-field textarea:focus, .form-field textarea:active { outline: none; } .form-field textarea { height: 64px; padding: 29px 32px 0px 32px; box-sizing: border-box; position: relative; z-index: 0; } .form-field__resize { position: absolute; bottom: 1px; right: 1px; width: 24px; height: 24px; background-color: var(--light-background); cursor: pointer; z-index: 1; border-radius: 12px; } .form-field__resize svg { stroke: var(--border-grey); } .form-field--textarea { height: unset; z-index: 1; } .form-field--textarea .form-field__label, .form-field--textarea .form-field__icon { top: 32px; } .form-field--textarea .form-field__resize { bottom: 2px; right: 1px; } .form-field:hover .form-field__label { color: var(--dark-font); } .form-field.fill .form-field__label { color: var(--grey-font); top: 8px; transform: none; } .form-field-select { position: relative; } .form-field-select:hover .form-field-select__label { color: var(--interface-grey); pointer-events: none; } .form-field-select__label { position: absolute; top: 15px; left: 28px; line-height: 14px; color: var(--grey-font); transition: color 0.2s ease; z-index: 2; } .form-field-select .form-select__indicator-separator { display: none; } .form-field-select .form-select__dropdown-indicator { padding: 0; width: 24px; height: 24px; transition: transform 0.2s ease; } .form-field-select .form-select__control { border: 1px solid var(--border-grey); box-shadow: none; min-height: unset; padding: 20px 26px 15px 28px; cursor: pointer; border-radius: 12px; background-color: var(--light-background); } .form-field-select .form-select__control:hover { border-color: var(--border-grey); } .form-field-select .form-select__control:hover .form-select__dropdown-indicator svg path { stroke: var(--main); } .form-field-select .form-select__control--menu-is-open { min-height: unset; } .form-field-select .form-select__control--menu-is-open .form-select__indicator { transform: rotate(180deg); } .form-field-select .form-select__control--menu-is-open .form-select__single-value { cursor: default; } .form-field-select .form-select__value-container { padding: 8px 0 0; } .form-field-select .form-select__single-value { color: var(--main-font); cursor: pointer; margin: 0; position: relative; line-height: 19.6px; font-weight: 600; } .form-field-select .form-select__menu { box-shadow: none; margin: 0; padding: 0 26px 12px 28px; background-color: var(--light-background); z-index: 3; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border-bottom: 1px solid var(--border-grey); border-left: 1px solid var(--border-grey); border-right: 1px solid var(--border-grey); top: calc(100% - 14px); left: 0; } .form-field-select .form-select__menu-list { padding: 0; } .form-field-select .form-select__option { cursor: pointer; padding: 14px 0; position: relative; margin-bottom: 8px; color: var(--main-font); line-height: 19.6px; transition: color 0.1s ease; } .form-field-select .form-select__option:active, .form-field-select .form-select__option--is-selected { background-color: transparent; } .form-field-select .form-select__option span:first-child { padding-right: 4px; } .form-field-select .form-select__option:first-child { margin-top: 12px; } .form-field-select .form-select__option:last-child { margin-bottom: 0; } .form-field-select .form-select__option--is-focused { background-color: transparent; color: var(--main); } .form-field.form-field--textarea { min-height: 64px; } .form-field.form-field--textarea textarea { min-height: 64px; } @media (max-width: 640px) { .form-field textarea { resize: none; overflow-y: hidden; padding-bottom: 16px; } .form-field--textarea .form-field__resize { bottom: 1px; right: 1px; } } .loader-circle { animation: dash 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .spinner-border { display: inline-block; width: 3rem; height: 3rem; border: 0.25em solid rgba(0, 0, 0, 0.1); border-top-color: var(--main); border-radius: 50%; animation: spinner-border 0.75s linear infinite; } @keyframes spinner-border { to { transform: rotate(360deg); } } .switcher-form { display: inline-block; min-width: 40px; width: 40px; height: 24px; border-radius: 24px; background: var(--border-grey); cursor: pointer; position: relative; transition: background-color 0.3s; } .switcher-form__toggle { width: 16px; height: 16px; border-radius: 50%; background: white; position: absolute; top: 4px; left: 4px; transition: transform 0.3s; } .switcher-form.active { background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); } .switcher-form.active .switcher-form__toggle { transform: translateX(16px); } .inline-form__checkbox-wrap, .consultation-form__checkbox-wrap, .inline-form-no-image__checkbox-wrap, .aside-form__checkbox-wrap { display: flex; gap: 8px; align-items: center; cursor: pointer; position: relative; } .inline-form__checkbox-wrap { justify-content: center; } .inline-form-no-image__checkbox-wrap { justify-content: center; align-items: start; } .inline-form-no-image__checkbox-wrap .switcher-form { top: 24px; } .aside-form__checkbox-wrap { gap: 12px; margin-bottom: 12px; } .inline-form__politic, .inline-form-2__politic, .consultation-form__politic, .inline-form-no-image__politic, .form-calculator__politic, .aside-form__politic { width: 100%; color: var(--grey-font); } .inline-form__politic a, .inline-form-2__politic a, .consultation-form__politic a, .inline-form-no-image__politic a { color: var(--grey-font); -webkit-user-select: none; -moz-user-select: none; user-select: none; text-decoration: underline; } .inline-form__politic p, .inline-form-2__politic p, .consultation-form__politic p, .inline-form-no-image__politic p, .form-calculator__politic p, .aside-form__politic p { color: var(--grey-font); margin: 0; } .inline-form__politic, .inline-form-2__politic, .consultation-form__politic, .inline-form-no-image__politic, .form-calculator__politic { max-width: 289px; } .aside-form__politic { line-height: 14px; max-width: 162px; } .aside-form__politic a { color: var(--grey-font); border-bottom: 1px solid var(--border-grey); } .aside-form__actions .aside-form__politic { max-width: none; } .form-calculator__politic a { color: var(--grey-font); border-bottom: 1px solid currentColor; } @media (max-width: 1440px) { .inline-form__politic { max-width: none; } } @media (max-width: 900px) { .inline-form__politic { max-width: none; text-align: start !important; } .form-calculator__politic p { text-align: start; } } @media (max-width: 640px) { .inline-form-no-image__checkbox-wrap { justify-content: start; } } @media (max-width: 1080px) { .form-v3__form .inline-form__checkbox-wrap { justify-content: start; } } .aside-form { height: 100%; } .aside-form-overlay { max-width: 480px; } .aside-form__title { line-height: 33.6px; padding-right: 62px; margin: 0 0 24px 0; min-height: 50px; } .aside-form__subtitle { line-height: 19.6px; margin-bottom: 32px; } .aside-form__subtitle p, .aside-form__subtitle div { margin: 0; display: inline; } .aside-form__subtitle a { white-space: nowrap; } .aside-form__info { display: flex; align-items: center; margin-bottom: 32px; } .aside-form__info svg { width: 24px; height: 24px; margin-right: 12px; } .aside-form__info div { font-weight: 600; } .aside-form__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 80px; padding-bottom: 76px; } .aside-form__button.btn { height: 64px; } .aside-form__result { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50%; } .aside-form__result--errors .aside-form__result-icon svg { stroke: var(--error); } .aside-form__result-icon { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border-color: var(--border-grey); } .aside-form__result-icon svg { width: 48px; height: 48px; } .aside-form__result-title { line-height: 33.6px; text-align: center; margin-bottom: 32px; } .aside-form__result-descr { line-height: 19.6px; text-align: center; margin: 0 auto; } .aside-form__result-action { margin-top: 32px; } .aside-form__actions { margin-top: 24px; flex-direction: column; } .aside-form__actions--row { margin-bottom: 24px; } .aside-form__button.btn.btn--color { width: 100%; min-width: none; max-width: none; } @media (max-width: 640px) { .aside-form__title, .aside-form__subtitle, .aside-form__info { margin-bottom: 24px; } .aside-form__title { line-height: 45px; padding: 0px; } .aside-form-overlay { max-width: none; } .aside-form-overlay.overlay-content.active { padding: 24px !important; } .aside-form__actions { margin-top: 24px; padding-bottom: 48px; } .aside-form__result.aside-form__result--success { margin-top: 24px; margin-bottom: 72px; } .aside-form__result.aside-form__result--errors { margin-top: 24px; margin-bottom: 72px; } .aside-form__title { max-width: 220px; line-height: 140%; } .overlay-content.aside-form-overlay { right: auto; left: 0; bottom: -100%; top: auto; border-radius: 32px 32px 0 0; transition: bottom 0.5s ease; max-width: 100%; } .overlay-content.aside-form-overlay.active { right: auto; bottom: 0; height: auto; max-height: 95vh; max-height: 95dvh; } .overlay-content.aside-form-overlay .overlay-close { top: 24px; right: 24px; } .overlay-content.aside-form-overlay::after { content: ""; display: block; position: fixed; z-index: 110; width: 100%; height: 16px; margin: 0px -24px; bottom: 0; background: linear-gradient(to bottom, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .form-field { margin-bottom: 24px; } .overlay-content.aside-form-overlay.active { pointer-events: auto; } } .wow { animation-duration: 1s; animation-delay: 0.3s; } .fadeTextBg { animation-fill-mode: forwards; position: relative; overflow: hidden; background-image: linear-gradient(to left, var(--second) 0, var(--main) 50%, var(--main-font) 50%, var(--main-font) 100%); background-size: 200% 100%; background-position: 0 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation-name: fadeTextBgToMain; } @keyframes gradientFill { 0% { background-position: 0 0; background-size: 200% 100%; } 100% { background-position: 100% 0; background-size: 350% 100%; } } @keyframes fadeTextBgToMain { from { background-position: 0 0; } to { background-position: -100% 0; color: var(--white); } } @charset "UTF-8";/*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: calc(1 * 2); animation-iteration-count: calc(1 * 2); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: calc(1 * 3); animation-iteration-count: calc(1 * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: calc(1s * 2); animation-delay: calc(1s * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: calc(1s * 3); animation-delay: calc(1s * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: calc(1s * 4); animation-delay: calc(1s * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: calc(1s * 5); animation-delay: calc(1s * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__faster { -webkit-animation-duration: calc(1s / 2); animation-duration: calc(1s / 2); -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { -webkit-animation-duration: calc(1s * 0.8); animation-duration: calc(1s * 0.8); -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animate__animated.animate__slow { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { -webkit-animation-duration: calc(1s * 3); animation-duration: calc(1s * 3); -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*='Out'] { opacity: 0; } } /* Attention seekers */ @-webkit-keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { from, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translate3d(0, 0, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: calc(1s * 1.3); animation-duration: calc(1s * 1.3); -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } /* Back entrances */ @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } /* Back exits */ @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0px) scale(0.7); transform: translateX(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0px) scale(0.7); transform: translateY(0px) scale(0.7); opacity: 0.7; } 100% { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } /* Bouncing entrances */ @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .animate__bounceIn { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bouncing exits */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* Fading entrances */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInTopRight { from { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInBottomRight { from { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } /* Fading exits */ @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } /* Flippers */ @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: calc(1s * 0.75); animation-duration: calc(1s * 0.75); -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } /* Lightspeed */ @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* Rotating entrances */ @-webkit-keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Rotating exits */ @-webkit-keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } /* Specials */ @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: calc(1s * 2); animation-duration: calc(1s * 2); -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Zooming entrances */ @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /* Zooming exits */ @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /* Sliding entrances */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /* Sliding exits */ @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .vacancy-select-form-list { position: relative; width: 100%; } .vacancy-select-form-list .vacancy-select-form-control { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 19px 26px 19px 28px; border: 1px solid var(--border-grey); height: -moz-fit-content; height: fit-content; min-height: 68px; border-radius: 12px; background-color: var(--light-background); cursor: pointer; } .vacancy-select-form-list .vacancy-select-form-control:hover { border-color: var(--border-grey); } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-single-value { position: relative; margin: 0; line-height: 19.6px; color: var(--main-font); display: flex; align-items: center; gap: 8px; } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-single-value .vacancy-select-form-check { display: flex; align-items: center; justify-content: center; width: 16px; min-width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-single-value .vacancy-select-form-check svg { width: 8px; height: 7px; } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-indicator { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-indicator.open { transform: rotate(180deg); } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-indicator svg path { stroke: var(--interface-grey); } .vacancy-select-form-list .vacancy-select-form-control .vacancy-select-form-indicator.negative { width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') no-repeat center, var(--error); border-radius: 50%; } .vacancy-select-form-list .vacancy-select-form-menu { position: absolute; top: calc(100% - 10px); left: 0; right: 0; border: 1px solid var(--border-grey); border-top: none; border-radius: 0 0 12px 12px; background-color: var(--light-background); z-index: 10; max-height: 200px; overflow-y: auto; } .vacancy-select-form-list .vacancy-select-form-option { display: flex; flex-direction: row; align-items: start; gap: 8px; padding: 12px 28px; cursor: pointer; line-height: 19.6px; color: var(--main-font); transition: color 0.2s ease; } .vacancy-select-form-list .vacancy-select-form-option:hover { color: var(--main); } .vacancy-select-form-list .vacancy-select-form-option .vacancy-select-form-list-check { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-grey); flex-shrink: 0; } .vacancy-select-form-selected-name { display: flex; flex-direction: column; } .vacancy-select-form-selected-label { color: var(--interface-grey); } .upload-form { width: 100%; } .upload-form__download { border: 2px dashed var(--border-grey); width: 100%; height: 176px; border-radius: 32px; padding: 10px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 19px; flex-wrap: wrap; } .upload-form__download.has-files { justify-content: space-between; } .upload-form__download svg { width: 54px; height: 54px; stroke: var(--main); } .upload-form__download-feature { display: flex; flex-direction: column; gap: 19px; justify-content: center; align-items: center; } .upload-form__download span { width: 200px; text-align: center; color: var(--interface-grey); } .upload-form__files-item { border-radius: 8px; position: relative; width: 128px; height: 128px; border-radius: 16px; background-color: var(--default); display: flex; align-items: center; justify-content: center; color: white; text-align: center; padding: 4px; box-sizing: border-box; overflow: hidden; } .upload-form__files-item > img { width: 80px; height: 48px; border-radius: 8px; -o-object-fit: cover; object-fit: cover; } .upload-form__files-item:hover .circle-loader.finished::after { opacity: 0; } .upload-form__files-item:hover .upload-form__remove { display: block; } .upload-form__files-item:hover .upload-form__remove .upload-form__image { filter: brightness(80%); } .upload-form__files-item:hover .upload-form__image, .upload-form__files-item .upload-form__files-item .upload-form__remove:hover ~ .upload-form__image { filter: brightness(80%); } .upload-form__files-item .upload-form__info { display: none; position: absolute; top: 5px; right: 24px; width: 14px !important; height: 14px !important; border-radius: 50%; background-color: rgba(22, 27, 33, 0.6); color: white; line-height: 16px; text-align: center; cursor: pointer; z-index: 20; align-items: center; justify-content: center; transition: all 0.3s ease-out; } .upload-form__files-item:hover .upload-form__remove, .upload-form__files-item:hover .upload-form__info { transition: all 0.3s ease-out; display: flex; } .upload-form__files-item:hover .upload-form__image { filter: brightness(80%); } .upload-form__files { position: relative; display: flex; gap: 8px; margin: 0px 4px; } .upload-form__files-container { display: block; width: 300px; height: -moz-fit-content; height: fit-content; } .upload-form__file { position: relative; z-index: 100; width: 128px; padding: 0px 12px; overflow: hidden; } .upload-form__file::after { z-index: 110; display: block; content: ""; width: 16px; height: 100%; right: -1px; top: 0; position: absolute; width: 16px; height: 100%; background: linear-gradient(to right, transparent 0%, var(--default) 100%); pointer-events: none; } .upload-form__image { cursor: pointer; } .upload-form__image.shadow { position: relative; display: inline-block; z-index: 1; filter: brightness(60%); } .upload-form__remove { display: none; position: absolute; border: 1px solid transparent; top: 3px; right: 0.5px; width: 16px; height: 16px; border: none; background: transparent; color: white; text-align: center; cursor: pointer; z-index: 20; padding: 0; } .circle-loader { position: absolute; z-index: 10; top: 4px; right: 4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .circle-loader svg { width: 16px; height: 16px; } .circle-loader .path { fill: rgba(22, 27, 33, 0.6); stroke: var(--light-background); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 0 100; animation: draw 1.2s linear forwards; } .circle-loader.finished .path { transition: all 0.3s ease-out; animation: none; } .circle-loader.finished::after { transition: all 0.3s ease-out; display: block; content: ""; width: 16px; height: 16px; position: absolute; left: 0; top: 0; border-radius: 50%; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 8px, cover; } @keyframes draw { 0% { stroke-dasharray: 0 100; } 100% { stroke-dasharray: 100 0; } } @media (max-width: 1360px) { .upload-form__download { border: 2px dashed var(--border-grey); width: 100%; min-height: 176px; height: -moz-fit-content; height: fit-content; border-radius: 32px; padding: 10px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: center; } .upload-form__download.has-files { flex-direction: column; justify-content: center; align-items: center; } } /** * Swiper 11.1.14 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 12, 2024 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .action-form { display: flex; flex-shrink: 0; align-items: center; } .action-form span { text-align: left; } .inline-form__notice, .inline-form-2__notice { margin-top: 24px; background-color: var(--grey-background); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; } .inline-form__notice p, .inline-form-2__notice p { margin: 0; } .inline-form-2__button.btn { max-height: 64px; } .inline-form__form { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .inline-form__description { display: flex; align-items: center; } .inline-form__description--top { margin-bottom: 32px; } .inline-form__description--bottom { margin-top: 32px; } .inline-form__description-text { text-align: start; } .inline-form__description-text div, .inline-form__description-text p { display: inline; } .inline-form__description-icon { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; } .inline-form__description-icon svg { stroke: var(--main); } .inline-form__list-text { margin-top: 24px; } .inline-form__wrap { display: flex; align-items: flex-start; justify-content: space-between; } .inline-form__wrap .form-field:first-child { margin-right: 32px; } .inline-form__clinic-select { margin-bottom: 32px; position: relative; } .inline-form__vacancy-select { margin-bottom: 32px; position: relative; } .inline-form__upload { position: relative; } .inline-form__actions { margin-top: 48px; display: flex; justify-content: space-between; gap: 32px; } .inline-form__actions .inline-form-2__button { min-width: 251px; width: -moz-fit-content; width: fit-content; white-space: nowrap; } .inline-form__checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 16px; width: 16px; height: 16px; border: 1px solid var(--border-grey); border-radius: 4px; background-color: var(--light-background); cursor: pointer; transition: all 0.2s ease; position: relative; } .inline-form__checkbox-wrap { display: flex; gap: 8px; justify-content: center; align-items: center; cursor: pointer; position: relative; } .inline-form__checkbox:checked { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-color: var(--main); } .inline-form__checkbox:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--main-rgb), 0.3); } .inline-form__check-icon { position: absolute; left: 2px; top: unset; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .inline-form__checkbox:checked + .inline-form-2__check-icon { opacity: 1; } .inline-form__button.btn { min-height: 64px; } .inline-form__button { max-height: 48px; } .inline-form__button.btn.btn--color { min-width: 240px; width: -moz-fit-content; width: fit-content; } .inline-form__result { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 64px; } .inline-form__result--errors .inline-form__result-icon svg { stroke: var(--error); } .inline-form__result-icon { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border-color: var(--border-grey); } .inline-form__result-icon svg { width: 48px; height: 48px; } .inline-form__result-title { line-height: 33.6px; text-align: center; margin-bottom: 32px; } .inline-form__result-descr { line-height: 19.6px; text-align: center; margin: 0 auto; } .inline-form__result-action { margin-top: 32px; } @media only screen and (max-width: 1440px) { .inline-form__actions { margin-top: 24px; flex-direction: column; } .inline-form__description-icon { min-width: 40px; display: flex; justify-content: center; } .inline-form__description-icon > svg { width: 24px; height: 24px; } } @media only screen and (max-width: 900px) { .inline-form__wrap { display: flex; flex-direction: column; gap: 28px; margin-bottom: 28px; } .inline-form__wrap .form-field { margin: 0px; } .inline-form__description-text { width: 100%; } .inline-form__description-text p { display: block; margin: 0px; align-items: center; text-align: center; } .inline-form__description--bottom { margin-top: 28px; } .inline-form__actions { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 48px; } .inline-form__clinic-select { margin-bottom: 28px; } .inline-form.form-v2__form { padding: 0px; } .inline-form.form-main__form { padding-bottom: 24px; } .inline-form .form-field textarea { padding-top: 48px; line-height: 140%; min-height: 100px; height: auto; } .form-field.form-field--textarea { min-height: 100px; height: auto; } } @media only screen and (max-width: 640px) { .inline-form.form-main__form { padding-bottom: 24px; } .inline-form__description-text { width: 100%; } .inline-form__description-text p { display: block; margin: 0px; align-items: center; text-align: center; } .inline-form__vacancy-select { margin-bottom: 28px; } .inline-form__button.btn.btn--color { width: 100%; max-width: none; } .inline-form__actions { margin-top: 24px; } } .inline-form-2__button.btn { min-height: 64px; } .inline-form-2__result { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 64px; } .inline-form-2__result--errors .inline-form__result-icon svg { stroke: var(--error); } .inline-form-2__result-icon { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border-color: var(--border-grey); } .inline-form-2__result-icon svg { width: 48px; height: 48px; } .inline-form-2__result-title { line-height: 33.6px; text-align: center; margin-bottom: 32px; } .inline-form-2__result-descr { line-height: 19.6px; text-align: center; margin: 0 auto; } .inline-form-2__result-action { margin-top: 32px; } .inline-form-2__form { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; height: 100%; } .inline-form-2__text { line-height: 140%; min-height: 70px; height: -moz-fit-content; height: fit-content; } .inline-form-2__text-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .inline-form-2__text-grid > div { display: flex; flex-direction: row; align-items: center; } .inline-form-2__text-grid p { line-height: 140%; margin: 0px; } .inline-form-2__icon { max-width: 48px; width: 100%; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .inline-form-2__icon svg { width: 24px; height: 24px; } .inline-form-2__fields { display: flex; flex-direction: row; justify-content: space-between; gap: 32px; } .inline-form-2__number { min-width: 230px; } .inline-form-2__clinic-select { min-width: 312px; } .inline-form-2__actions { display: flex; justify-content: space-between; gap: 32px; } .inline-form-2__actions .inline-form-2__button { min-width: 251px; width: -moz-fit-content; width: fit-content; white-space: nowrap; } .inline-form-2__form-bottom { height: 280px; display: flex; flex-direction: column; gap: 32px; justify-content: space-between; } .inline-form-2__form-content { display: flex; flex-direction: column; gap: 32px; justify-content: space-between; } .inline-form-2__checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 16px; width: 16px; height: 16px; border: 1px solid var(--border-grey); border-radius: 4px; background-color: var(--light-background); cursor: pointer; transition: all 0.2s ease; position: relative; } .inline-form-2__checkbox:checked { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-color: var(--main); } .inline-form-2__checkbox:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--main-rgb), 0.3); } .inline-form-2__check-icon { position: absolute; left: 2px; top: unset; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .inline-form-2__checkbox:checked + .inline-form-2__check-icon { opacity: 1; } .inline-form-2__actions .btn.btn--children-bg { background: var(--child-main-color); color: var(--main-font); } .inline-form-2__actions .btn.btn--children-bg svg { stroke: var(--main-font); } .inline-form-2__actions .btn.btn--children-bg::after { content: none !important; display: none !important; } .inline-form-2__text.icon--children .inline-form-2__icon { width: 48px; min-width: 48px; height: 48px; border-radius: 0%; display: flex; align-items: center; justify-content: center; margin-right: 16px; background: transparent; background-repeat: no-repeat; background-position: center; background-size: 48px 48px; } .inline-form-2__text.icon--children .inline-form-2__icon svg { width: 24px; height: 24px; } @media (max-width: 1440px) { .form-v3__form .inline-form-2__form-bottom { height: auto; } } @media (max-width: 1280px) { .form-v3__form .inline-form-2__fields { flex-direction: column; } .form-v3__form .inline-form-2__text { min-height: 60px; height: -moz-fit-content; height: fit-content; } .form-v3__form .inline-form-2__actions { flex-direction: column; } .form-v3__form .inline-form-2__text-grid { grid-template-columns: repeat(1, 1fr); gap: 12px; } } @media (max-width: 1080px) { .form-v3__form .inline-form-2__fields { flex-direction: row; justify-content: start; } } @media (max-width: 700px) { .form-v3__form .inline-form-2__fields { flex-direction: column; } } @media (max-width: 640px) { .form-v3__form .inline-form-2__actions .btn { max-width: none; width: 100%; } .form-v3__form .inline-form-2__form { gap: 16px; } .form-v3__form .inline-form-2__form-content { gap: 16px; } .form-v3__form .inline-form-2__form-bottom { gap: 16px; } .form-v3__form .inline-form-2__number { width: 100%; min-width: 100px; } .form-v3__form .inline-form-2__clinic-select { width: 100%; min-width: 100px; } } .consultation-form__fields { display: flex; flex-direction: row; justify-content: space-between; gap: 32px; } .consultation-form__fields .consultation-form__phone input, .consultation-form__fields .consultation-form__name input, .consultation-form__fields .consultation-form__comment input { border: 1px solid var(--border-grey); background-color: transparent; } .consultation-form__fields .consultation-form__comment input, .consultation-form__fields .consultation-form__comment textarea { min-height: 160px; height: 100%; } .consultation-form__fields .consultation-form__comment .form-field__label { color: var(--interface-grey); } .consultation-form__fields .consultation-form__comment .form-field__resize { background-color: transparent; } .consultation-form__comment { flex: 0.3; margin: 0px; } .consultation-form__comment.mobile { display: none; } .consultation-form__wrap { flex: 0.45; display: flex; gap: 32px; flex-direction: column; justify-content: start; } .consultation-form__actions { flex: 0.35; display: flex; flex-direction: column; height: 160px; justify-content: space-between; } .consultation-form__person-data { display: flex; gap: 16px; } .consultation-form__name, .consultation-form__phone { flex: 0.5; margin: 0px; background-color: var(--light-background); border-radius: 12px; overflow: hidden; } .consultation-form__button.btn.btn--color.btn--width { max-width: none; width: 100%; height: 64px; } @media (max-width: 1280px) { .consultation-form__comment.desktop { display: none; } .consultation-form__comment.mobile { display: flex; flex-direction: column; } .consultation-form__person-data { position: relative; } .consultation-form__wrap { flex: 0.6; height: -moz-fit-content; height: fit-content; } .consultation-form__actions { flex: 0.4; } } @media (max-width: 1080px) { .consultation-form__fields { max-width: 480px; display: flex; flex-direction: column; } .consultation-form__actions { gap: 24px; } } @media (max-width: 900px) { .consultation-form__fields { max-width: 480px; display: flex; flex-direction: column; } .consultation-form__actions { gap: 24px; } .consultation-form__wrap { gap: 24px; } .consultation-form__person-data { display: flex; flex-direction: column; gap: 24px; } .form-field.form-field--textarea.consultation-form__comment.mobile { margin: 0px; } } @media (max-width: 600px) { .form-field.consultation-form__name { margin: 0px; } } .contact-aside-form { display: flex; flex-direction: column; gap: 24px; height: 100%; } .contact-aside-form-overlay { max-width: 480px; } .contact-aside-form .contact-list__content-part { width: 100%; } .contact-aside-form-actions { height: 48px; display: flex; justify-content: end; } .contact-aside-form-actions-close { height: 48px; width: 133px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 24px; border: 1px solid var(--border-grey); color: var(--main-font); } .contact-aside-form-actions-close-dropdown { width: 24px; height: 24px; } @media only screen and (max-width: 600px) { .contact-aside-form-overlay { max-width: none; } .contact-aside-form-overlay.overlay-content.active { padding: 24px; } .contact-aside-form__title { max-width: 220px; line-height: 140%; } .overlay-content.contact-aside-form-overlay { right: auto; left: 0; bottom: -100%; top: auto; border-radius: 32px 32px 0 0; transition: bottom 0.5s ease; max-width: 100%; } .overlay-content.contact-aside-form-overlay.active { right: auto; bottom: 0; } .overlay-content.contact-aside-form-overlay .overlay-close { top: 24px; right: 24px; } .form-field { margin-bottom: 24px; } } .inline-form-no-image__form { display: flex; flex-direction: row; justify-content: space-between; height: 100%; } .inline-form-no-image__wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .inline-form-no-image .form-field { margin-bottom: 0px; } .inline-form-no-image__fields { display: flex; flex-direction: column; gap: 24px; } .inline-form-no-image__actions { padding-left: 32px; display: flex; justify-content: space-between; gap: 32px; } .inline-form-no-image__checkbox { appearance: none; -webkit-appearance: none; -moz-appearance: none; min-width: 16px; width: 16px; height: 16px; border: 1px solid var(--border-grey); border-radius: 4px; background-color: var(--light-background); cursor: pointer; transition: all 0.2s ease; position: relative; } .inline-form-no-image__checkbox:checked { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-color: var(--main); } .inline-form-no-image__checkbox:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--main-rgb), 0.3); } .inline-form-no-image__check-icon { position: absolute; left: 2px; top: unset; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .inline-form-no-image__checkbox:checked { opacity: 1; } .inline-form-no-image__button-icon { display: flex; gap: 8px; } .inline-form-no-image__button.btn { min-height: 64px; } .inline-form-no-image__button { max-height: 48px; } .inline-form-no-image__button.btn.btn--color { min-width: 240px; width: -moz-fit-content; width: fit-content; } .inline-form-no-image__result { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 16px; } .inline-form-no-image__result--errors .inline-form-no-image__result-icon svg { stroke: var(--error); } .inline-form-no-image__result-icon { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border-color: var(--border-grey); } .inline-form-no-image__result-icon svg { width: 48px; height: 48px; } .inline-form-no-image__result-title { line-height: 33.6px; text-align: center; margin-bottom: 32px; } .inline-form-no-image__result-descr { line-height: 19.6px; text-align: center; margin: 0 auto; } .inline-form-no-image__result-action { margin-top: 32px; } @media (max-width: 1440px) { .inline-form-no-image__form { flex-direction: column; gap: 24px; max-width: 640px; } .inline-form-no-image__actions { padding: 0px; } } @media (max-width: 640px) { .inline-form-no-image__wrap { flex-direction: column; gap: 24px; } .inline-form-no-image__button.btn.btn--color { width: 100%; max-width: none; } .inline-form-no-image__actions { margin-top: 12px; flex-direction: column; } } .call-order { display: flex; align-items: flex-start; } .call-order.with-dropdown { cursor: pointer; position: relative; } .call-order:hover .call-order__icon svg { stroke: var(--main); } .call-order:hover .call-order__icon span { color: var(--main); } .call-order:hover .call-order__phone-icon svg { stroke: var(--main); } .call-order__icon { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; position: relative; } .call-order__icon span { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); line-height: 14px; color: var(--interface-grey); transition: color 0.2s ease; } .call-order__wrap > span { color: var(--grey-font); line-height: 11px; display: block; cursor: pointer; } .call-order__phone { display: flex; align-items: flex-start; justify-content: flex-start; } .call-order__phone-value { font-weight: 600; display: block; white-space: nowrap; } .call-order__phone-icon { width: 100%; max-width: 16px; } .call-order__phone-icon svg { width: 16px; height: 16px; } .call-order__phone-value { text-decoration: none; border-bottom: 0; box-shadow: none; -webkit-text-decoration-skip: none; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } .call-order__dropdown { display: none; position: absolute; z-index: 100; background-color: var(--light-background); padding: 24px; width: 300px; top: 100%; left: 0; border-radius: 12px; box-shadow: 0px 4px 16px 0px var(--shadow-grey); } .call-order__dropdown.active { display: block; } .call-order__dropdown-list { margin: -3px; } .call-order__dropdown-item { display: flex; align-items: center; justify-content: flex-start; margin: 3px; padding: 8.5px 16px; border-radius: 12px; transition: background-color 0.2s ease; } .call-order__dropdown-item:hover { background-color: var(--grey-background); } .call-order__dropdown-item:hover .call-order__dropdown-icon svg { stroke: var(--main); } .call-order__dropdown-icon { width: 100%; max-width: 24px; margin-right: 12px; height: 24px; } .call-order__dropdown-icon svg { stroke: var(--border-grey); } .call-order__dropdown-phone > span { display: block; line-height: 14px; } .call-order__dropdown-phone > a { font-weight: 600; } .call-order__dropdown-title { display: none; } .call-order__dropdown-top > span { display: none; } .call-order__dropdown-actions { margin-top: 24px; } .call-order__dropdown-actions .btn { max-width: unset; width: 100%; } .call-order__dropdown-actions .btn.btn--link { display: none; } .call-order__click { width: -moz-fit-content; width: fit-content; padding: 2px; } @media (max-width: 640px) { .call-order__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay); z-index: 100; cursor: pointer; } .call-order__overlay.active { display: block; } .call-order__dropdown { position: fixed; background-color: var(--light-background); padding: 24px; width: 100vw; height: -moz-fit-content; height: fit-content; bottom: 0; top: auto; left: 0; border-radius: 20px 20px 0 0; box-shadow: 0px -4px 16px 0px var(--shadow-grey); overflow-y: auto; animation: slideUp 0.3s ease-out; } .call-order__dropdown-top { display: flex; flex-direction: row; justify-content: space-between; } .call-order__dropdown-top > span { display: block; text-align: end; flex: 0.7; color: var(--grey-font); } .call-order__dropdown-title { display: block; } .call-order__dropdown-actions { display: flex; flex-direction: row; gap: 12px; } .call-order__dropdown-actions .btn:first-child { flex: 0.6; } .call-order__dropdown-actions .btn:last-child { display: flex; flex: 0.4; } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } .work-time { cursor: pointer; display: flex; align-items: flex-start; position: relative; width: -moz-fit-content; width: fit-content; } .work-time.with-dropdown { cursor: pointer; } .work-time:hover svg:not(.interface-svg--error), .work-time.active svg:not(.interface-svg--error) { stroke: var(--main); } .work-time:hover .work-time__value, .work-time.active .work-time__value { color: var(--main); } .work-time > svg { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; } .work-time__value div { font-weight: 600; transition: color 0.2s ease; } .work-time__value div:first-child { display: flex; align-items: center; } .work-time__value-icon { width: 100%; max-width: 16px; } .work-time__value-icon svg { width: 16px; height: 16px; } .work-time__value div:last-of-type { color: var(--grey-font); line-height: 14px; } .work-time__info { color: var(--grey-font); line-height: 14px; max-width: 130px; margin-right: 8px; white-space: nowrap; } .work-time__dropdown { position: absolute; top: 100%; left: 0; z-index: 1999; background-color: var(--light-background); box-shadow: 0px 4px 16px 0px var(--shadow-grey); border-radius: 12px; width: 400px; padding: 24px; } .work-time__dropdown-list { display: flex; align-items: center; justify-content: flex-start; margin: -2px; flex-wrap: wrap; } .work-time__dropdown-item { width: 100%; max-width: 174px; padding: 9.5px 16px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0); display: flex; align-items: center; transition: border-color 0.2s ease, background-color 0.2s ease; margin: 2px; position: relative; overflow: hidden; } .work-time__dropdown-item.active { border-color: var(--border-grey); } .work-time__dropdown-item:hover { background-color: var(--grey-background); border-color: var(--grey-background); } .work-time__dropdown-item::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .work-time__dropdown-icon { max-width: 24px; width: 100%; height: 24px; margin-right: 12px; } .work-time__dropdown-day { line-height: 14px; } .work-time__dropdown-time { font-weight: 600; white-space: nowrap; } .work-time__dropdown-action { margin-top: 24px; } .work-time__dropdown-action > span { display: none; } .work-time__dropdown-action .btn { width: 100%; max-width: unset; } @media only screen and (max-width: 900px) { .work-time__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay); z-index: 100; cursor: pointer; } .work-time__overlay.active { display: block; } .work-time__dropdown { position: fixed; background-color: var(--light-background); padding: 24px; width: 100vw; height: -moz-fit-content; height: fit-content; bottom: 0; top: auto; left: 0; border-radius: 20px 20px 0 0; box-shadow: 0px -4px 16px 0px var(--shadow-grey); overflow-y: auto; animation: slideUp 0.3s ease-out; } .work-time__dropdown-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px; } .work-time__dropdown-item { position: relative; width: 100%; max-width: none; } .work-time__dropdown-action { display: flex; flex-direction: row; gap: 12px; } .work-time__dropdown-action .btn:first-child { flex: 0.6; } .work-time__dropdown-action .btn:last-child { display: flex; flex: 0.4; } .work-time__dropdown-action > span { display: flex; } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } .dark-theme { cursor: pointer; display: flex; align-items: center; } .dark-theme--header { margin-left: 24px; margin-top: 8px; background-color: var(--grey-background); border-radius: 8px; padding: 4px; display: block; margin-right: auto; } .dark-theme--header .dark-theme__descr { display: none; } .dark-theme svg { width: 24px; height: 24px; } .dark-theme__descr { margin-left: 10px; font-weight: 600; } .dark-theme__descr div:first-child { transition: color 0.2s ease; } .dark-theme__descr div:last-child { line-height: 14px; color: var(--grey-font); } .dark-theme:hover .dark-theme__descr div:first-child { color: var(--main); } .dark-theme:hover svg { stroke: var(--main); } @media all and (max-width: 640px) { .dark-theme--header { display: none; } } .info-menu { position: relative; z-index: 1; flex: 1; } .info-menu.footer__info-menu { padding: 24px 0; } .info-menu__list { width: 90%; list-style: none; padding: 0 54px 0 0; margin: 0; display: flex; align-items: flex-start; } .info-menu__with-child { flex: 0.8; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .info-menu__without-child { flex: 0.2; display: flex; flex-direction: column; align-items: flex-start; } .info-menu__sublist { list-style: none; padding: 0; margin: 0; } .info-menu__submenu { margin-top: 20px; width: 100%; max-width: 120px; } .info-menu__item { width: 128px; } .info-menu__link { font-weight: 600; transition: color 0.2s ease; } .info-menu__link:hover { color: var(--main); } .info-menu__subitem { max-width: 150px; margin-bottom: 6px; } .info-menu__submenu-link { line-height: 120%; transition: color 0.2s ease; max-width: 86px; } .info-menu__submenu-link:hover { color: var(--main); } .info-menu__list { width: 90%; display: grid; } @media (max-width: 1280px) { .info-menu__list { width: 100%; } .info-menu__with-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); position: relative; row-gap: 24px; } } @media (max-width: 800px) { .info-menu.footer__info-menu { padding: 0px 24px; } .info-menu__list { display: block; padding: 0; } .info-menu__with-child, .info-menu__without-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .info-menu__without-child { margin-left: 0; margin-top: 16px; } .info-menu__item { width: 100%; } } .info-menu-mobile { position: relative; z-index: 5; } .info-menu-mobile__list { list-style: none; padding: 0 54px 0 0; margin: 0; display: flex; align-items: flex-start; padding: 0px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); row-gap: 8px; -moz-column-gap: 14px; column-gap: 14px; } .info-menu-mobile__list.mobile { display: grid; } .info-menu-mobile__list.has-expanded .info-menu-mobile__item { opacity: 0; transform: translateY(-16px); max-height: 0; margin: 0; pointer-events: none; } .info-menu-mobile__list.has-expanded .info-menu-mobile__item.expanded { opacity: 1; transform: translateY(0); max-height: 1200px; margin: unset; pointer-events: auto; } .info-menu-mobile__item { width: 100%; padding: 0px; background-color: var(--grey-background); height: 76px; display: flex; flex-direction: row; align-items: center; border-radius: 12px; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), margin 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); max-height: 200px; overflow: hidden; } .info-menu-mobile__item.expanded { grid-column: 1/-1; width: 100%; } .info-menu-mobile__item.expanded.with-child { flex-direction: column; height: -moz-fit-content; height: fit-content; padding: 0px; background-color: var(--light-background); } .info-menu-mobile__item.with-child.expanded .info-menu-mobile-button { display: flex; flex-direction: row-reverse; gap: 8px; width: 100%; justify-content: end; } .info-menu-mobile__item.with-child.expanded .info-menu-mobile-text { display: block; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--main-font); } .info-menu-mobile__item.with-child.expanded .info-menu-mobile-icon { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); box-shadow: none; border-radius: 100px; } .info-menu-mobile__item.with-child.expanded .info-menu-mobile-icon svg { stroke: var(--light-background); transform: rotate(90deg); } .info-menu-mobile__link { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 0; padding: 20px 24px; border-radius: 12px; height: 76px; background-color: var(--grey-background); border-radius: 12px; min-height: 76px; height: -moz-fit-content; height: fit-content; transition: color 0.3s ease; } .info-menu-mobile__link:hover { color: var(--main); } .info-menu-mobile__link.font-main { border-radius: 12px; min-height: 76px; height: -moz-fit-content; height: fit-content; } .info-menu-mobile__link.mobile { display: grid; gap: 12px; } .info-menu-mobile__link span { max-width: 120px; } .info-menu-mobile-text { display: none; } .info-menu-mobile-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .info-menu-mobile-icon svg { stroke: var(--grey); width: 24px; height: 24px; transform: rotate(270deg); } .info-menu-mobile__submenu { width: 100%; max-width: none; margin-top: 8px; max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden; pointer-events: none; transition: max-height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, transform 0.35s ease; } .info-menu-mobile__submenu.active { max-height: 1400px; opacity: 1; transform: translateY(0); pointer-events: auto; } .info-menu-mobile__submenu-link { cursor: pointer; transition: color 0.2s ease; max-width: 86px; } .info-menu-mobile__submenu-link:hover { color: var(--main); } .info-menu-mobile__submenu-link.font-main { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: none; font-weight: 600; } .info-menu-mobile__subitem { cursor: pointer; margin-bottom: 6px; display: block; background-color: var(--grey-background); width: 100%; border-radius: 12px; height: -moz-fit-content; height: fit-content; min-height: 76px; display: flex; align-items: center; justify-content: start; padding: 0px 24px; max-width: 170px; } .info-menu-mobile__sublist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); row-gap: 8px; -moz-column-gap: 14px; column-gap: 14px; } .info-menu-mobile.footer__info-menu { padding: 24px 0; } .info-menu-mobile__link { padding: 20px 24px !important; } @media (max-width: 800px) { .info-menu-mobile__submenu.active { border-top-left-radius: 12px; border-top-right-radius: 12px; } } @media (max-width: 361px) { .info-menu-mobile__subitem { max-width: none; width: 100%; } } .tabs-switcher__wrap { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; z-index: 1; position: relative; padding: 4px; text-align: center; border-radius: 12px; background-color: var(--grey-background); } .tabs-switcher__item { border-radius: 12px; background-color: rgba(255, 255, 255, 0); margin-right: 4px; margin-left: 4px; padding: 4px 20px 4px 16px; transition: color 0.3s ease, background-color 0.3s ease; z-index: 3; font-weight: 600; cursor: pointer; line-height: 19.6px; display: flex; align-items: center; justify-content: center; color: var(--interface-grey); } .tabs-switcher__item.active { color: var(--main-font); pointer-events: none; } .tabs-switcher__item.active svg { stroke: var(--main); fill: var(--main); } .tabs-switcher__item.active .tabs-switcher__num { border-color: var(--main); background-color: var(--main); color: var(--light-font); } .tabs-switcher__item:hover { background-color: var(--light-background); } .tabs-switcher__item:first-child { margin-left: 0; } .tabs-switcher__item:nth-last-child(2) { margin-right: 0; } .tabs-switcher__switcher { position: absolute; top: 4px; z-index: 2; border-radius: 8px; background-color: var(--light-background); height: calc(100% - 8px); transition: transform 0.3s ease, width 0.1s ease-in-out; } .tabs-switcher__icon { margin-right: 8px; } .tabs-switcher__icon svg { width: 16px; height: 16px; stroke: var(--interface-grey); fill: var(--interface-grey); } .tabs-switcher__num { margin-left: 10px; border: 1.5px solid var(--border-grey); background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; color: var(--interface-grey); line-height: 30px; width: 32px; height: 32px; border-radius: 8px; margin-right: -14px; } @media (max-width: 800px) { .tabs-switcher__wrap { width: 100%; } .tabs-switcher.service-menu-block__switcher { width: 100%; } } .btn.btn--white.header-bottom__action.header-bottom__action--online { margin-right: 10px; } .btn.btn--white.header-bottom__action.header-bottom__action--online > span { flex-shrink: 0; } .btn.btn--white.header-bottom__action.header-bottom__action--online svg { stroke: var(--interface-grey); } .btn.btn--white.footer__top-action.footer__top-action--online { margin-right: 16px; } .btn.btn--white.full-menu__action.full-menu__action--online { margin-left: 10px; } .btn.btn--white.full-menu__action.full-menu__action--online svg { stroke: var(--grey-font); } @media (max-width: 1460px) { .btn.btn--white.header-bottom__action.header-bottom__action--online { display: none; } } @media (max-width: 1150px) { .footer__top-actions .btn.btn--white.footer__top-action--online { width: 100%; order: 3; margin: 0; } } @media (max-width: 640px) { .btn.btn--white.full-menu__action.full-menu__action--online { margin: 0; } } @media (max-width: 480px) { .btn.btn--white.footer__top-action--online span { text-align: center; } } .btn.btn--color.header-bottom__action { margin-right: 0; } .btn.btn--color.header-bottom__action > span { flex-shrink: 0; } .btn.btn--color.footer__top-action { margin-right: 16px; } .btn.btn--color.footer__top-action:last-child { margin-right: 0; } .btn.btn--color.full-menu__action.bottom { margin-left: 10px; } @media (max-width: 1150px) { .footer__top-actions .btn.btn--color.footer__top-action { width: 100%; order: 1; margin: 0; } } @media (max-width: 990px) { .full-menu__footer .btn.btn--color.full-menu__action.bottom { display: none; } } @media (max-width: 640px) { .btn.btn--color.header-bottom__action { line-height: 14px; margin-right: 8px; } } @media (max-width: 480px) { .btn.btn--color.footer__top-action span { text-align: center; } } @media (max-width: 360px) { .btn.btn--color.header-bottom__action { padding: 12px; } .btn.btn--color.header-bottom__action span { display: none; } .btn.btn--color.header-bottom__action svg { margin: 0; } } .header-bottom__logo { width: 254px; padding: 12px; height: 112px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--light-background); border-radius: 0px 0px 16px 16px; margin-right: 48px; } .header-bottom__logo-wrap { width: 100%; min-width: 80px; height: 100%; min-height: 48px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .header-bottom__logo-wrap > * { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .header-bottom__logo-wrap img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } .app-logo-wrap { width: 100%; height: 100%; min-height: 48px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .app-logo-wrap > * { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .app-logo-wrap img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; } .header-fixed__logo { min-width: 110px; max-width: 110px; margin-right: 34px; display: block; } .full-menu__logo { margin-right: 52px; width: 100%; max-width: 256px; position: relative; z-index: 1; } .full-menu__logo.mobile { display: none; } .full-menu__logo-wrap { position: relative; z-index: 3; display: flex; justify-content: center; padding: 12px 24px; box-shadow: 0px 14px 24px 0px var(--shadow); border-radius: 16px; background-color: var(--light-background); } .footer__top-logo { padding: 12px; min-height: 48px; border-radius: 16px; } .footer__top-logo img { max-width: 220px; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; display: flex; align-items: center; justify-content: center; } @media (max-width: 1460px) { .header-bottom__logo { margin-right: 24px; } } @media (max-width: 1150px) { .footer__top-logo { width: 100%; display: flex; flex-direction: column; align-items: center; } } @media (max-width: 800px) { .full-menu__logo { max-width: none; } .full-menu__logo.desktop { display: none; } .full-menu__logo.mobile { margin: 0px; margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } .full-menu__logo-wrap { box-shadow: none; } } @media (max-width: 640px) { .full-menu__logo-wrap { padding: 12px; } .header-bottom__logo { width: auto; max-width: 120px; height: 48px; padding: 4px; border-radius: 12px; } .header-bottom__logo-wrap img { max-width: 112px; max-height: 40px; } .app-logo__wrap img { width: auto; height: auto; max-width: 320px; max-height: 100px; -o-object-fit: contain; object-fit: contain; } .app-logo__wrap { width: 100%; max-height: 100px; display: flex; align-items: center; justify-content: center; } } .full-menu__mobile-head { display: none; } .full-menu__content.overlay-content { max-width: 1570px; padding: 32px 32px 0; } .full-menu__head { display: flex; align-items: flex-start; } .full-menu__footer { margin-top: 77px; padding-top: 35px; display: flex; align-items: flex-start; justify-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--light-background) 20%); padding-bottom: 32px; } @media (min-height: 800px) { .full-menu__footer { position: sticky; z-index: 10; bottom: 0; } } .full-menu__footer-right { display: flex; align-items: flex-start; } .full-menu__call-order { margin-left: 8px; } .full-menu__work-time { margin-left: 8px; } .full-menu__messengers { margin-left: 8px; margin-top: 8px; } .full-menu__dark-theme { margin-left: 8px; } .full-menu__footer-left { display: flex; align-items: center; justify-content: flex-end; } .full-menu.top .btn.btn--color.full-menu__action { display: none; } .full-menu.top .full-menu-location--header { display: none; } .full-menu__info-menu-mobile.info-menu-mobile.mobile, .full-menu__service-menu-block.mobile, .full-menu-mobile__list.mobile { display: none; } .full-menu__content.overlay-content { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--main) transparent; -webkit-overflow-scrolling: touch; } .full-menu__content.overlay-content::-webkit-scrollbar { width: 6px; } .full-menu__content.overlay-content::-webkit-scrollbar-track { background: transparent; } .full-menu .overlay-close.desktop .btn.btn--color { pointer-events: all; z-index: 100; cursor: pointer; } .full-menu .full-menu__inner-content .full-menu__footer { z-index: 200; } @media (max-width: 990px) { .full-menu__footer { margin: 0px; display: flex; flex-direction: column-reverse; position: static; } .full-menu__footer-left { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 16px; width: 100%; } .full-menu__footer-left > div { margin: 0px; } .full-menu__footer-right { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; } .full-menu__footer-right > div { width: 100%; margin: 0px; } } @media (max-width: 800px) { .full-menu__mobile-head { pointer-events: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 100vh; padding: 12px; display: flex; flex-direction: row; justify-content: space-between; border-radius: 0px 0px 24px 24px; box-shadow: 0 14px 24px 0 color-mix(in srgb, var(--dark-font) 8%, transparent); gap: 12px; width: 100%; align-items: flex-start; opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease, transform 0.3s ease; transition-delay: 0.5s; } .full-menu__mobile-head.active { opacity: 1; transform: translateY(0); } .full-menu__mobile-head-top { position: fixed; pointer-events: none; top: 0; left: 0; right: 0; z-index: 1010; padding: 12px; display: flex; flex-direction: row; justify-content: space-between; border-radius: 0px 0px 24px 24px; box-shadow: 0 14px 24px 0 color-mix(in srgb, var(--dark-font) 8%, transparent); gap: 12px; width: 100%; } .full-menu .full-menu-location--header.top { pointer-events: auto; display: block; width: -moz-fit-content; width: fit-content; display: flex; justify-content: center; align-items: center; min-height: 75px; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); } .full-menu .btn.btn--color.full-menu__action.top { pointer-events: auto; min-height: 75px; height: -moz-fit-content; height: fit-content; max-height: none; margin: 0px; display: flex; flex-direction: row; } .full-menu .overlay-close { opacity: 0; } .full-menu .overlay-close.mobile { opacity: 1; pointer-events: auto; position: static; height: -moz-fit-content; height: fit-content; width: auto; } .full-menu .overlay-close.mobile.desktop { display: none; } .full-menu .overlay-close.mobile > div { min-height: 75px; height: 100%; max-height: none; padding: 7px 24px; display: flex; flex-direction: column; } .full-menu__content.overlay-content { border-radius: 0px 0px 24px 24px; padding: 0px; padding-top: 120px; height: 90%; } .full-menu__content.overlay-content.full-menu__content--form-active::after { opacity: 0; visibility: hidden; } .full-menu__content.overlay-content::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 64px; border-radius: 0px 0px 24px 24px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--light-background) 100%); pointer-events: none; z-index: 10; } .full-menu__inner-content { position: relative; z-index: 3; height: 100%; overflow-y: auto; padding-bottom: 30px; padding: 0px 24px; } .full-menu__info-menu.info-menu.desktop { display: none; } .full-menu__head { margin-top: 34px; display: flex; flex-direction: column; align-items: normal; } .full-menu__service-menu-block.mobile { display: block; } .full-menu__service-menu.desktop { display: none; } .full-menu__service-menu__big-container-slider { padding: 0px; padding-top: 16px; } .full-menu__service-menu__small-container-slider { margin: 0px; } .full-menu__service-menu-block.service-menu.footer-menu.mobile { padding: 0px; padding-top: 20px; background: var(--light-background); } .full-menu__service-menu-block.service-menu.footer-menu.mobile .service-menu__submenu-icon.mobile-slider { background: var(--grey-background); border-radius: 12px; } .info-menu-mobile__list.mobile { display: grid; } .social--full-menu { display: flex; flex-direction: column-reverse; gap: 16px; margin-top: none; margin: 0px; padding: 16px 48px; } .social--full-menu.social { border-radius: 16px; } .social--full-menu.social__wrap { display: flex; flex-direction: row; gap: 24px; max-height: 112px; } .social--full-menu.social__text { padding: 0px; padding-top: 0px !important; margin-left: 0px; } .social--full-menu.social__icon { margin: 0px; } .social--full-menu.social__icon svg { height: 24px; width: 24px; } .info-menu-mobile.full-menu__info-menu-mobile.mobile { display: block; } } @media (max-width: 640px) { .full-menu__footer-right { display: grid; grid-template-columns: repeat(2, 1fr); } .full-menu__footer-right > div { -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } .full-menu__footer-right .call-order.footer__middle-call-order.background-hover { height: -moz-fit-content; height: fit-content; min-height: 46px; } .full-menu__footer-right .email-block__wrap { height: -moz-fit-content; height: fit-content; min-height: 46px; } .full-menu__footer-right .social-messengers__wrap { margin: 0px 8px; } .full-menu .full-menu-location--header.top { position: relative; overflow: hidden; height: -moz-fit-content; height: fit-content; justify-content: start; } .full-menu .full-menu-location--header.top::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .full-menu .full-menu-location--header.top.location.background-hover { margin: 0px; } .btn.btn--color.full-menu__action.top { padding-right: 24px; } .accessibility.full-menu__accessibility { margin: 0px; } } .location__address { white-space: nowrap; } @media (max-width: 480px) { .full-menu .btn.btn--color.full-menu__action.top { min-height: 90px; } .full-menu .overlay-close > div { min-height: 90px; } .full-menu__footer-left { display: flex; flex-direction: column; } .full-menu__footer-left > div, .full-menu__footer-left > a, .full-menu__footer-left .btn { width: 100%; max-width: none; } .full-menu__mobile-head-top { gap: 12px; } .full-menu__mobile-head-top > div:first-of-type { width: 100%; max-width: none; flex: 0.7; } .full-menu__mobile-head-top > a { min-height: 75px !important; width: 100%; max-width: none; height: 100%; flex: 0.15; } .full-menu__mobile-head-top > a span { display: none; } .full-menu__mobile-head-top > a svg { margin: 0px; } .full-menu__mobile-head-top > div:last-of-type { width: 100%; max-width: none; flex: 0.15; } .full-menu__mobile-head-top > div:last-of-type span { display: none; } .full-menu__mobile-head-top > div:last-of-type svg { width: 36px; height: 36px; } } .n3__vision__action-button { display: inline-block; padding: 0 10px; background-color: #fff; color: #000; border: 1px solid #000; border-radius: 3px; cursor: pointer; font: inherit; font-size: 1.1em; line-height: 1.8em } .n3__vision__action-button:hover { background-color: #ccc; } .n3__vision__action-button:active { background-color: #aaa; } .n3__vision__color-button { position: relative; display: inline-block; padding: 0 10px; border: 1px solid #000; cursor: pointer; font: inherit; font-size: 1.1em; line-height: 1.8em; border-radius: 3px; } .n3__vision__color-button + .n3__vision__color-button { margin-left: 10px; } .n3__vision__color-button_color_white { background-color: #fff; color: #000 } .n3__vision__color-button_color_white:hover { background-color: #ccc; } .n3__vision__color-button_color_white:active { background-color: #aaa; } .n3__vision__color-button_color_black { background-color: #000; color: #fff } .n3__vision__color-button_color_black:hover { background-color: #333; } .n3__vision__color-button_color_black:active { background-color: #666; } .n3__vision__color-button_color_blue { background-color: #9dd1ff; color: #000 } .n3__vision__color-button_color_blue:hover { background-color: #a1e3ff; } .n3__vision__color-button_color_blue:active { background-color: #aff3ff; } .n3__vision__color-button_selected::before, .n3__vision__color-button_selected::after { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 7px; border-color: #000 transparent transparent transparent; margin-left: -7px; } .n3__vision__color-button_selected::after { margin-top: -1px; } .n3__vision__color-button_selected.n3__vision__color-button_color_white::after { border-top-color: #fff; } .n3__vision__color-button_selected.n3__vision__color-button_color_black::after { border-top-color: #000; } .n3__vision__color-button_selected.n3__vision__color-button_color_blue::after { border-top-color: #9dd1ff; } .n3__vision__modal { position: fixed; z-index: 1040; top: 0; bottom: 0; left: 0; right: 0; } .n3__vision__modal__dialog-wrapper { height: 100vh; overflow-y: auto; outline: none; position: relative; } .n3__vision__modal__dialog { position: relative; max-width: 1200px; margin: 30px auto; border: 1px solid #ccc; background-color: #000; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); outline: none; } .n3__vision__modal__backdrop { position: fixed; z-index: 1030; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; opacity: 0.5; } .n3__vision__settings-button { display: inline-block; padding: 0 10px; background-color: #fff; color: #000; border: 1px solid #000; cursor: pointer; font: inherit; font-size: 1.1em; line-height: 1.8em; margin-left: -1px } .n3__vision__settings-button:hover { background-color: #ccc; } .n3__vision__settings-button:active { background-color: #aaa; } .n3__vision__settings-button:first-child { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .n3__vision__settings-button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .n3__vision__settings-button_selected { background-color: #000; color: #fff } .n3__vision__settings-button_selected:hover { background-color: #333; } .n3__vision__settings-button_selected:active { background-color: #666; } .n3__vision__settings-group + .n3__vision__settings-group { margin-top: 30px; } .n3__vision__settings-group__label { display: inline-block; vertical-align: baseline; margin-right: 4px; color: #000; } .n3__vision__settings-group__buttons { display: inline-block; vertical-align: middle; } .n3__vision__settings-panel { padding: 20px; background-color: #fff; } .n3__vision__settings-panel__groups { margin-bottom: 30px; } .n3__vision__settings-panel__buttons { margin-top: 30px; } .n3__vision__settings-panel__buttons-right { float: right; } .accessibility.full-menu__accessibility { margin-left: 22px; } .accessibility__btn.btn { background-color: var(--dark-font); color: var(--light-font); display: flex; align-items: center; cursor: pointer; box-shadow: none; } .accessibility__btn.btn svg { width: 24px; min-width: 24px; height: 24px; fill: var(--light-font); } div.n3__vision__modal { top: unset; z-index: 10110 !important; } .n3__vision__modal__backdrop { z-index: 10109 !important; } .n3__vision__modal__dialog { z-index: 10110 !important; } div.n3__vision__modal__dialog { margin: 100px auto; } body.n3__wcag__fontsize_average { line-height: 20px; } body.n3__wcag__fontsize_average .services-menu__link { min-height: 56px; height: auto; } html.n3__fontSize--average { font-size: 18px; } html.n3__fontSize--large { font-size: 24px; } body.n3__wcag__fontsize_large { line-height: 24px; } body.n3__wcag__fontsize_large .services-menu__link { min-height: 56px; height: auto; } body.n3__wcag__blackWhite_on { filter: grayscale(100%); } body.n3__wcag__blackWhite_on * { color: #000000 !important; fill: #000000 !important; stroke: #000000 !important; } body.n3__wcag__blackWhite_on .n3__vision__settings-button_selected { color: #ffffff !important; } body.n3__wcag__animation_off * { animation: none !important; } body.n3__wcag__images_off img { display: none !important; } body.n3__wcag__images_off *, body.n3__wcag__images_off *::after, body.n3__wcag__images_off *::before { background-image: none !important; } body.n3__wcag__images_off .fadeTextBg, body.n3__wcag__images_off .fadeTextColor { animation: none !important; } body.n3__wcag__kerning_average * { letter-spacing: 2px !important; } body.n3__wcag__kerning_large * { letter-spacing: 4px !important; } .main-menu__submenu-link { line-height: 20px; } .main-menu__service-name { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .main-menu__list { display: flex; flex-wrap: wrap; max-width: 600px; align-items: flex-start; justify-content: flex-start; margin: 0 -16px; padding: 0; } .main-menu__line-break { flex-basis: 100%; width: 100%; height: 0; } .main-menu__item { position: relative; margin: 0 16px; cursor: pointer; } .main-menu__item.hover .main-menu__submenu { opacity: 1; visibility: visible; } .main-menu__item.hover.with-child:after { opacity: 0.7; visibility: visible; } .main-menu__link { display: flex; justify-content: flex-start; color: var(--light-font); font-weight: 600; } .main-menu__link span { padding: 3.5px 0; } .main-menu__arrow-dropdown { width: 24px; height: 24px; stroke: var(--light-font); opacity: 0.5; transition: opacity 0.3s; } .hover .main-menu__arrow-dropdown { opacity: 1; } .main-menu__submenu { opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; position: absolute; background-color: var(--light-background); border-radius: 12px; top: 100%; left: -37px; } .main-menu__submenu-list { display: flex; flex-direction: row; align-items: center; } .main-menu__sublist { list-style: none; padding: 12px; width: 300px; border-radius: 12px; position: relative; z-index: 100; box-shadow: 0px 14px 24px var(--shadow); background-color: var(--light-background); } .main-menu__sublist--overflow { width: auto; min-width: 240px; padding: 0; overflow: visible; } .main-menu__subitem { margin-bottom: 8px; } .main-menu__subitem:last-child { margin-bottom: 0; } .main-menu__subitem:hover .main-menu__submenu-link { color: var(--main); background-color: var(--grey-background); } .main-menu__subitem:hover .main-menu__submenu-dropdown svg { stroke: var(--main); } .main-menu__submenu-link { color: var(--main-font); display: flex; align-items: center; padding: 14px 16px 14px 14px; border-radius: 12px; background-color: rgba(255, 255, 255, 0); transition: background-color 0.2s ease, color 0.2s ease; } .main-menu__submenu-link svg { width: 100%; max-width: 16px; height: 16px; margin-right: 8px; } .main-menu__submenu { display: flex; align-items: stretch; } .main-menu__sublist { flex: 0 0 300px; } .main-menu__services-panel { width: 253px; padding: 12px; margin-left: -10px; padding-left: 22px; display: grid; grid-template-columns: repeat(1, 1fr); grid-auto-rows: 48px; gap: 8px; background-color: var(--grey-background); border-left: 1px solid var(--grey-background); box-shadow: 0px 14px 24px var(--shadow); border-radius: 0px 12px 12px 0px; height: auto; cursor: auto; overflow-y: auto; overflow-x: hidden; position: relative; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; -webkit-overflow-scrolling: touch; } .main-menu__services-panel.is-visible { opacity: 1; pointer-events: auto; } .main-menu__services-panel::-webkit-scrollbar { width: 6px; } .main-menu__services-panel::-webkit-scrollbar-track { background: transparent; } .main-menu__services-panel::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; } .main-menu__service-link { border-radius: 12px; background-color: var(--light-background); display: flex; align-items: center; flex-direction: row; } .main-menu__service-link:hover .main-menu__service-name { color: var(--main); } .main-menu__service-icon { min-width: 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .main-menu__service-name { transition: all 0.3s ease; color: var(--main-font); } .main-menu__submenu-link-dropdown { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .main-menu__submenu-dropdown { width: 24px; min-width: 24px; height: 24px; align-items: center; justify-content: center; transition: all 0.3s ease; } .main-menu__submenu-dropdown svg { width: 24px; min-width: 24px; height: 24px; } .main-menu__submenu-link { cursor: pointer; } .main-menu--overflow { width: 100%; } .main-menu--overflow .main-menu__list { flex-direction: column; margin: 0; max-width: 100%; align-items: stretch; } .main-menu--overflow .main-menu__item { margin: 0; } .main-menu--overflow .main-menu__link { color: var(--main-font); padding: 10px 16px; } .main-menu--overflow .main-menu__arrow-dropdown { stroke: var(--main-font); } .main-menu--overflow .main-menu__submenu { left: 100%; top: 0; } @media (max-width: 1440px) { .main-menu__services-panel.is-visible { width: 253px; grid-template-columns: repeat(1, 1fr); } } .service-menu { border-radius: 50px; background: var(--grey-background); padding: 24px 37px 33px 36px; margin-top: 33px; } .service-menu__list { margin: 0; padding: 0; list-style: none; -moz-column-count: 4; column-count: 4; -moz-column-gap: 30px; column-gap: 30px; min-height: 500px; } .service-menu__section { width: 100%; padding: 4px; max-width: 100%; margin-bottom: 16px; cursor: default; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } .service-menu__section-title { display: flex; align-items: center; height: 48px; margin-bottom: 16px; } .service-menu__section-icon { width: 100%; max-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-right: 16px; } .service-menu__section-icon svg { width: 16px; height: 16px; stroke: var(--main); } .service-menu__section-name { line-height: 22.4px; color: var(--main); } .service-menu__sublist { margin: 0; padding: 0; list-style: none; } .service-menu__submenu { margin-bottom: 4px; } .service-menu__submenu:last-of-type { margin-bottom: 0; } .service-menu__submenu-link { display: flex; align-items: center; min-height: 44px; border-radius: 12px; background-color: rgba(255, 255, 255, 0); transition: background-color 0.2s ease; } .service-menu__submenu-link.active { padding: 2px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-radius: 12px; cursor: auto; } .service-menu__submenu-link.active .service-menu__submenu-name { color: var(--light-font); } .service-menu__submenu-link.active .service-menu__submenu-icon { max-width: 44px; min-height: 44px; background-color: var(--light-background); border-radius: 10px; } .service-menu__submenu-link:not(.active):hover { background-color: var(--light-background); } .service-menu__submenu-link:not(.active):hover .service-menu__submenu-icon svg { stroke: var(--main); fill: var(--main); } .service-menu__submenu-link:not(.active):hover .service-menu__submenu-name { color: var(--main); } .service-menu__submenu-icon { width: 100%; max-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; margin-right: 21px; align-self: stretch; } .service-menu__submenu-icon svg { width: 32px; height: 32px; stroke: var(--main-font); fill: var(--main-font); transition: stroke 0.2s ease, fill 0.2s ease; } .service-menu__submenu-name { transition: color 0.2s ease; } .service-menu__section-icon svg { width: 20px; height: 20px; } .service-menu__submenu-name { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .service-menu__submenu-icon { min-width: 48px; } .service-menu__section.problem-category__group { border: 1px solid transparent; } .service-menu__section.service-menu__section--highlighted { border: 1px solid var(--border-grey); background: var(--grey-background); border-radius: 12px; transition: all 0.3s ease; } .service-menu__section.service-menu__section--highlighted .service-menu__submenu-link { background: var(--light-background); } .service-menu__section.service-menu__section--highlighted .service-menu__submenu-icon { border: 1px solid var(--border-grey); } @media (max-width: 1240px) { .service-menu__list { -moz-column-count: 3; column-count: 3; } } @media (max-width: 800px) { .service-menu.footer-menu.footer__service-menu.adaptive { margin: 16px 12px; } .service-menu.footer-menu { background: var(--grey-background); padding: 24px 37px 33px 36px; } .service-menu { border-radius: 50px; margin-top: 33px; } .service-menu__list { min-height: 626px; } .service-menu__small-container-slider { position: relative; z-index: 0; padding: 4px 10px; margin: 0px 12px; border-radius: 20px !important; background-color: var(--grey-background); overflow: hidden; } .service-menu__big-container-slider { padding: 12px; padding-top: 16px; } .service-menu__slider-small-img { border-radius: 8px; width: 200px; text-align: center; display: flex; flex-direction: row; align-items: center; cursor: pointer; color: var(--grey-font); } .service-menu__slider-small-img.swiper-slide { padding-right: 16px; } .service-menu__slider-small-img.swiper-slide-active { background-color: var(--light-background); } .service-menu__slider-small-img.swiper-slide-active .service-menu__section-name { text-align: start; color: var(--main-font); } .service-menu__slider-small-img.swiper-slide { display: flex; flex-direction: row; } .service-menu__slider-small-img.swiper-slide-active { color: var(--main-font); } .service-menu__slider-small-img.swiper-slide-active svg { stroke: var(--main); } .service-menu__slider-small-img svg { width: 16px; height: 16px; stroke: var(--grey-font); } .service-menu__slider-small-img img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; } .service-menu__slider-big-img img { width: 100%; height: auto; max-height: 70vh; -o-object-fit: contain; object-fit: contain; } .adaptive-slider.service-menu__section-name { color: var(--grey-font); margin: 0px; } .adaptive-slider.service-menu__sublist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); row-gap: 4px; -moz-column-gap: 8px; column-gap: 8px; } .adaptive-slider.service-menu__submenu-icon { max-width: none; max-height: none; min-width: 48px; width: 48px; height: 48px; } .adaptive-slider.service-menu__section-icon { margin: 0px 8px 0px 16px; width: 16px; } } @media only screen and (max-width: 480px) { .service-menu__small-container-slider::after { display: block; content: ""; height: 100%; position: absolute; top: 0; width: 50px; z-index: 1; pointer-events: none; right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .service-menu__small-container-slider__slider-small-img.swiper-slide { width: -moz-fit-content !important; width: fit-content !important; padding-right: 16px; } .adaptive-slider.service-menu__sublist { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .gradient-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .gradient-overlay::after { display: block; content: ""; height: 100%; position: absolute; top: 0; width: 50px; z-index: 2; left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } } @media only screen and (max-width: 400px) { .adaptive-slider.service-menu__sublist { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } } .header-fixed { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; padding: 2px 0px 6px 0px; position: fixed; top: 0; left: 0; width: 100%; background-color: var(--light-background); box-shadow: 0px 14px 24px 0px var(--shadow); z-index: 100; transform: translateY(-100%); opacity: 0; transition: transform 0.6s ease; } .header-fixed.show { opacity: 1; transform: translateY(0); } .header-fixed__wrap { display: flex; align-items: center; justify-content: space-between; } .header-fixed__right { display: flex; align-items: center; } .header-fixed__menu { display: flex; align-items: center; } .header-fixed__menu-full { margin-right: 24px; } .header-fixed__menu-main .main-menu__list { flex-wrap: nowrap; max-width: unset; } .header-fixed__menu-main .main-menu__link { color: var(--main-font); } .header-fixed__menu-main .main-menu__link svg { stroke: var(--main-font); } .header-fixed__wrap.container { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; padding: 12px; } .header-fixed__menu.mobile { display: none; } @media only screen and (max-width: 900px) { .header-fixed { background-color: none; padding: 0px; margin: 0px; border-radius: 0px; background: none; box-shadow: none; top: unset; right: 12px; left: unset; bottom: 82px; transform: translateY(50%); transition: all 0.6s ease; } .header-fixed__right, .header-fixed__left { display: none; } .header-fixed__wrap.container { max-width: 100%; width: 100%; flex-direction: row-reverse; margin: 0px; padding: 0px; } .header-fixed__menu.mobile { display: flex; width: 84px; border-radius: 12px; box-shadow: 0px 14px 24px 0px var(--shadow); } .header-fixed__menu-full.btn.btn--color { width: 84px; height: 64px; display: flex; flex-direction: column; margin: 0px; box-shadow: 0px 14px 24px 0px var(--shadow); } } @media only screen and (max-width: 900px) { .header-fixed { background-color: none; padding: 0px; margin: 0px; border-radius: 0px; background: none; box-shadow: none; top: unset; right: 36px; left: unset; bottom: 156px; transform: translateY(50%); } .header-fixed__right, .header-fixed__left { display: none; } .header-fixed__wrap.container { max-width: 100%; width: 100%; flex-direction: row-reverse; margin: 0px; padding: 0px; } .header-fixed__menu.mobile { display: flex; width: 84px; border-radius: 12px; box-shadow: 0px 14px 24px 0px var(--shadow); } .header-fixed__menu-full.btn.btn--color { width: 84px; height: 64px; display: flex; flex-direction: column; margin: 0px; box-shadow: 0px 14px 24px 0px var(--shadow); } } @media only screen and (max-width: 640px) { .header-fixed { right: 12px; bottom: 82px; transform: translateY(25%); } } .diagnostic_ii_component { display: flex; align-items: flex-start; } .diagnostic_ii_component svg { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; } .diagnostic_ii_component-wrap div:first-child { font-weight: 600; } .diagnostic_ii_component-wrap div:last-child { font-weight: 600; color: var(--grey-font); } .diagnostic_ii_component-image { width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin-right: 8px; margin-top: 4px; } .diagnostic_ii_component-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media (max-width: 1180px) { .diagnostic_ii_component { display: none; } } .header__review { display: flex; align-items: flex-start; margin-right: 24px; } .header__review:hover svg { stroke: var(--main); fill: var(--main); } .header__review:hover .header__awards-wrap div:first-child, .header__review:hover .header__review-wrap div:first-child { color: var(--main); } .header__review svg { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; } .header__review-wrap--title { transition: color 0.2s ease; } .header__review-wrap--subtittle { white-space: nowrap; } .header__review:hover .header__review-wrap--title { color: var(--main); } .header { padding: 12px 0 16px; } .header__wrap { display: flex; align-items: flex-start; justify-content: space-between; } .header__wrap-left, .header__wrap-right { display: flex; align-items: flex-start; } .header__wrap-right { margin-left: 24px; } .header__call-order { margin-left: 24px; } .header__work-time { margin-left: 24px; } .header__awards, .header__review { display: flex; align-items: flex-start; margin-right: 24px; } .header__awards:hover svg, .header__review:hover svg { stroke: var(--main); fill: var(--main); } .header__awards:hover .header__awards-wrap div:first-child, .header__review:hover .header__awards-wrap div:first-child { color: var(--main); } .header__awards svg, .header__review svg { width: 100%; max-width: 24px; height: 24px; margin-right: 8px; margin-top: 4px; } .header__awards .header__awards-wrap div:first-child, .header__review .header__awards-wrap div:first-child { font-weight: 600; transition: color 0.2s ease; } .header__awards .header__awards-wrap div:last-child, .header__review .header__awards-wrap div:last-child { font-weight: 600; color: var(--grey-font); white-space: nowrap; } @media (max-width: 1560px) { .header { padding: 12px 48px 16px 48px; } } @media (max-width: 1500px) { .header__awards { display: none; } } @media (max-width: 1430px) { .header__review { display: none; } } @media (max-width: 968px) { .header__work-time { display: none; } } @media (max-width: 640px) { .header { background-color: var(--grey-background); border-radius: 0 0 16px 16px; padding: 0 4px; } .header--dark-theme { display: none; } .header.container { max-width: unset; margin: 12px 12px 0px 12px; border-radius: 16px; } .header__wrap-left { align-items: center; width: 100%; justify-content: space-between; align-items: stretch; } .header__call-order { margin: 0; } .header__wrap-right { margin: 0px; } .header__call-order { border: 1px solid var(--border-grey); min-height: 48px; margin: 8px; display: flex; align-items: center; } } .header-bottom { position: absolute; z-index: 5; top: -1px; left: 0; width: 100%; padding-bottom: 24px; } .header-bottom__wrap { display: flex; align-items: flex-start; justify-content: space-between; } .header-bottom__right { display: flex; align-items: flex-start; } .header-bottom__left { padding: 39px 0 21px; display: flex; align-items: center; } .header-bottom__menu { margin-top: 40px; display: flex; align-items: start; } .header-bottom__menu-full { margin-right: 34px; } .header-bottom--light .main-menu__link { color: var(--main-font); } .header-bottom--light .main-menu__link svg { stroke: var(--main-font); } @media (max-width: 920px) { .header-bottom__menu-main { display: none; } } @media (max-width: 640px) { .header-bottom { position: static; padding: 24px 0; } .header-bottom__left { padding: 0; } .header-bottom__menu { margin: 0; } .header-bottom__menu-full.btn { margin: 0; padding: 12px; } .header-bottom__menu-full.btn svg { margin: 0; } } .slider { position: relative; margin-bottom: 105px; } .slider__wrap { border-radius: 57px; } .slider__wrap .with-btn .slider__item-advantages { margin-top: 54px; } .slider__item { position: relative; min-height: 730px; max-height: 730px; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; border-radius: 57px; padding: 235px 24px 0px 24px; z-index: 1; overflow: hidden; } .slider__item.light .slider__item-name, .slider__item.light .slider__item-name--small, .slider__item.light .slider__item-text, .slider__item.light .slider__item-advantage div { color: var(--main-font); } .slider__item.light .slider__item-advantage span { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .slider__item.light .slider__item-advantage span svg { stroke: var(--light-font); } .slider__item.shadow-full::after { display: block; content: ""; background: linear-gradient(290.92deg, rgba(22, 27, 33, 0) 0%, rgba(22, 27, 33, 0.5) 100.01%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .slider__item.shadow-bg::after { display: block; content: ""; background: linear-gradient(290.92deg, rgba(22, 27, 33, 0) 34.34%, rgba(22, 27, 33, 0.5) 100.01%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .slider__item.shadow-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%); } .slider__item-wrap { position: relative; z-index: 3; } .slider__item-name { color: var(--light-font); } .slider__item-name--small { color: var(--light-font); margin-top: 16px; } .slider__item-text { max-width: 450px; margin-top: 26px; color: var(--light-font); } .slider__item-btn { margin-top: 40px; } .slider__item-advantages { display: flex; align-items: center; margin-top: 120px; } .slider__item-advantage { flex: 1; display: flex; align-items: center; } .slider__item-advantage:first-child { margin-right: 23px; } .slider__item-advantage span { display: flex; width: 100%; max-width: 32px; height: 32px; background: var(--light-background); border-radius: 50%; align-items: center; justify-content: center; margin-right: 14px; } .slider__item-advantage span svg { width: 24px; height: 24px; } .slider__item-advantage div { color: var(--light-font); font-weight: 600; } .slider .swiper-pagination { margin: 15px -12px 0; display: flex; align-items: flex-start; justify-content: center; } .slider .swiper-pagination.swiper-pagination-disabled { display: none; } .slider .swiper-pagination-bullet { margin: 0 12px; width: 100%; max-width: 256px; cursor: pointer; } .slider .swiper-pagination-bullet.swiper-pagination-bullet-active .slider__bullet-text { color: var(--main-font); } .slider .swiper-pagination-bullet.swiper-pagination-bullet-active .slider__bullet-line { opacity: 1; } .slider .swiper-pagination-bullet span { display: block; } .slider .swiper-pagination-bullet span.slider__bullet-text { color: var(--grey-font); text-align: center; min-height: 42px; } .slider .swiper-pagination-bullet span.slider__bullet-line { width: 100%; height: 4px; background-color: var(--border-grey); position: relative; opacity: 0; transition: opacity 0.1s ease; border-radius: 2px; overflow: hidden; } .slider .swiper-pagination-bullet span.slider__bullet-line > span { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: var(--main); transition: width linear; } .slider { position: relative; } .slider__item { display: flex; gap: 24px; } .slider__item-wrap { display: flex; flex-direction: row; gap: 24px; } .slider__item-wrap--section { display: flex; flex-direction: column; } .slider__item-wrap--section-image { align-items: end; justify-content: end; } .slider__item-img { max-width: 640px; max-height: 640px; margin-bottom: 0px; } .slider__item-img img { max-width: 640px; max-height: 640px; } .custom-navigation-main-slider { display: none; } .slider__wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { background: none !important; } .slider__item-button { display: flex; gap: 12px; } @keyframes sliderProgressBar { from { width: 0%; } to { width: 100%; } } @media (max-width: 640px) { .custom-navigation-main-slider { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; z-index: 1; pointer-events: none; } .custom-navigation-main-slider button { background-color: none; background-color: transparent !important; background-image: url(/images/arrow_main_slider.svg?96de6fc871d129598e56eaa2390d4ff4); border: none; cursor: pointer; padding: 0px; border-radius: 0px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: 24px; height: 96px; pointer-events: auto; transition: opacity 0.2s ease; } .custom-navigation-main-slider button:hover { transform: scale(1.05); } .custom-navigation-main-slider button svg { width: 24px !important; height: 24px !important; stroke: var(--grey-font); } .custom-navigation-main-slider button::after { display: none; } .custom-navigation-main-slider button.custom-prev { margin-left: 0px; } .custom-navigation-main-slider button.custom-prev svg { transform: rotate(-270deg); } .custom-navigation-main-slider button.custom-next { transform: rotate(-180deg); margin-right: 0px; } .custom-navigation-main-slider button.custom-next svg { transform: rotate(90deg); } .slider { margin: 0px; } .slider__wrap { position: relative; padding: 0px 12px; } .slider__item { position: relative; min-height: 400px; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; border-radius: 24px; padding: 0; z-index: 1; overflow: hidden; } .slider__item-name { width: 100%; } .slider__item-name--small { width: 100%; } .slider__item-text { width: 100%; } .slider__item-button { width: 100%; display: flex; flex-direction: row; justify-content: end; } .slider__item-wrap.container { height: 350px; display: flex; flex-direction: column; justify-content: space-between; } .slider__item-description { padding: 12px 12px; } .slider__item-advantages { display: none; } .slider__item-wrap.container { height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .slider__item-description { padding: 0; flex-grow: 1; } .slider__bullet { z-index: 1; } .slider .swiper-pagination { width: 200px; display: flex; align-items: flex-start; justify-content: center; position: absolute; bottom: 40px; left: 5px; right: 0; z-index: 10; } .slider .swiper-pagination.swiper-pagination-disabled { display: none; } .slider .swiper-pagination-bullet { margin: 0 6px; width: 32px; border-radius: 16px; cursor: pointer; position: relative; } .slider .swiper-pagination-bullet .slider__bullet-text { display: none !important; } .slider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { width: 12px; min-width: 12px; height: 5px; border-radius: 15px; background: var(--grey-background-gradient); opacity: 80%; } .slider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .slider__bullet-text { display: none !important; } .slider .swiper-pagination-bullet.swiper-pagination-bullet-active .slider__bullet-line { opacity: 1; } .slider .swiper-pagination-bullet span { display: block; } .slider .swiper-pagination-bullet span.slider__bullet-line { width: 100%; height: 4px; background-color: var(--border-grey); position: relative; opacity: 0; transition: opacity 0.1s ease; border-radius: 2px; overflow: hidden; } .slider .swiper-pagination-bullet span.slider__bullet-line > span { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--main-gradient) 0%, var(--main) 100%); transition: width linear; } .slider__item-wrap--section-description { padding: 12px; position: relative; z-index: 1; } .slider__item-wrap--section-image { position: absolute; bottom: 0; z-index: 0; align-items: center; width: 100%; justify-content: end; } .slider__item-img { margin-bottom: 0px; } .slider__item-wrap--section.slider__item-wrap--section-description { position: relative; height: 70%; } .slider__item-wrap--section.slider__item-wrap--section-description::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--slider-selected-color, var(--main)) 70%); } .slider__item-wrap--section.slider__item-wrap--section-description .slider__item-description { z-index: 1; } .slider__item-wrap--section.slider__item-wrap--section-image { height: 50%; bottom: unset; top: 0px; } .slider__item { background-image: none !important; background-color: var(--slider-selected-color); } .slider__item.shadow-bg::after, .slider__item.shadow-bg::before { display: none; } .slider__item.shadow-full::after, .slider__item.shadow-full::before { display: none; } .slider__item-wrap.container--slider { display: flex; flex-direction: column-reverse; } .slider__item-img { align-items: end; justify-content: end; max-height: 100%; max-width: 100%; } .slider__item-img.background_image { width: 100%; height: 100%; } .slider__item-img.background_image img { width: 100%; height: 100%; margin-top: 0px; -o-object-fit: cover; object-fit: cover; } .slider__item-img img { max-width: 100%; max-height: 100%; margin-top: 12px; } .slider__item-text { margin-top: 16px; } .slider__item-btn { margin-top: 0px; } .slider__item-description { padding: 0px 12px; } .slider__item-name { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .slider__item-name--small { display: none; } .slider__item-text { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .swiper-navigation { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); z-index: 2; left: 0; } .swiper-navigation .swiper-button-next, .swiper-navigation .swiper-button-next--relative, .swiper-navigation .swiper-button-prev, .swiper-navigation .swiper-button-prev--relative, .swiper-navigation .custom-next, .swiper-navigation .custom-prev { width: 48px; height: 48px; border-radius: 50%; border: none; background-color: var(--light-background); margin-top: 0 !important; top: 50%; transform: translateY(-50%); box-shadow: 0px 14px 24px 0px var(--shadow); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; position: absolute; cursor: pointer; } .swiper-navigation .swiper-button-next svg, .swiper-navigation .swiper-button-next--relative svg, .swiper-navigation .swiper-button-prev svg, .swiper-navigation .swiper-button-prev--relative svg, .swiper-navigation .custom-next svg, .swiper-navigation .custom-prev svg { width: 24px; height: 24px; stroke: var(--grey-font); } .swiper-navigation .swiper-button-next::after, .swiper-navigation .swiper-button-next--relative::after, .swiper-navigation .swiper-button-prev::after, .swiper-navigation .swiper-button-prev--relative::after, .swiper-navigation .custom-next::after, .swiper-navigation .custom-prev::after { display: none; } .swiper-navigation .swiper-button-next--relative, .swiper-navigation .swiper-button-prev--relative { position: relative; } .swiper-navigation .swiper-button-next, .swiper-navigation .custom-next { right: -44px !important; } .swiper-navigation .swiper-button-prev, .swiper-navigation .custom-prev { left: -44px !important; } .swiper-navigation .swiper-button-next svg, .swiper-navigation .custom-next svg, .swiper-navigation .swiper-button-next--relative svg { transform: rotate(-90deg); } .swiper-navigation .swiper-button-prev svg, .swiper-navigation .custom-prev svg, .swiper-navigation .swiper-button-prev--relative svg { transform: rotate(90deg); } .swiper-navigation .swiper-button-disabled.swiper-button-prev, .swiper-navigation .swiper-button-disabled.swiper-button-next, .swiper-navigation .swiper-button-disabled.swiper-button-prev--relative, .swiper-navigation .swiper-button-disabled.swiper-button-next--relative, .swiper-navigation .swiper-button-disabled.custom-prev, .swiper-navigation .swiper-button-disabled.custom-next { opacity: 0; } .swiper-navigation.swiper-navigation__equipment { width: 104px; height: 44px; transform: translateY(0%); position: relative; top: unset; left: unset; right: unset; bottom: unset; } .swiper-navigation.swiper-navigation__equipment .swiper-button-next { right: 0px !important; } .swiper-navigation.swiper-navigation__equipment .swiper-button-prev { left: 0px !important; } .swiper-navigation.swiper-navigation__equipment .swiper-button-next, .swiper-navigation.swiper-navigation__equipment .swiper-button-prev { width: 44px; height: 44px; border: 1px solid var(--border-grey); box-shadow: none; } .swiper-navigation.swiper-navigation__equipment .swiper-button-next svg, .swiper-navigation.swiper-navigation__equipment .swiper-button-prev svg { width: 16px; height: 16px; stroke: var(--dark-font); } .swiper-navigation.swiper-navigation__equipment .swiper-button-disabled.swiper-button-prev, .swiper-navigation.swiper-navigation__equipment .swiper-button-disabled.swiper-button-next { opacity: 0.35; } .swiper-navigation.photos__navigation .swiper-button-prev { left: -12px !important; } .swiper-navigation.photos__navigation .swiper-button-next { right: -12px !important; } .swiper-navigation.work-examples__navigation { position: static; margin-top: 32px; display: flex; align-items: center; justify-content: center; transform: none; } .swiper-navigation.work-examples__navigation > div { margin-right: 16px; margin-left: 16px; } .swiper-navigation.work-examples__navigation > div:last-child { margin-right: 0; } .swiper-navigation.work-examples__navigation .swiper-button-next, .swiper-navigation.work-examples__navigation .swiper-button-prev { position: static; transform: none; } .swiper-navigation.work-examples__navigation .swiper-button-next svg, .swiper-navigation.work-examples__navigation .swiper-button-prev svg { stroke: var(--main); } .swiper-navigation.history-patient__main-navigation { max-width: 104px; top: 481px; transform: none; left: 504px; } .swiper-navigation.history-patient__main-navigation .swiper-button-prev, .swiper-navigation.history-patient__main-navigation .swiper-button-next { background-color: rgba(255, 255, 255, 0); border: 1.5px solid rgba(255, 255, 255, 0.3); box-shadow: none; transition: border-color 0.2s ease; } .swiper-navigation.history-patient__main-navigation .swiper-button-prev:hover, .swiper-navigation.history-patient__main-navigation .swiper-button-next:hover { border-color: rgb(255, 255, 255); } .swiper-navigation.history-patient__main-navigation .swiper-button-prev svg, .swiper-navigation.history-patient__main-navigation .swiper-button-next svg { stroke: var(--light-background); } .swiper-navigation.history-patient__main-navigation .swiper-button-prev { left: 0 !important; } .swiper-navigation.history-patient__main-navigation .swiper-button-next { right: 0 !important; } .swiper-navigation.stage-bracket__thumbs-navigation { position: absolute; z-index: 1; } .swiper-navigation.stage-bracket__thumbs-navigation .swiper-button-prev { left: 0px !important; } .swiper-navigation.stage-bracket__thumbs-navigation .swiper-button-next { right: 0px !important; } .swiper-navigation.doctor-list__thumbs-navigation { width: 100%; } .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-prev, .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-next { transition: opacity 0.8s ease-out; } .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-prev.swiper-button-disabled, .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-next.swiper-button-disabled { opacity: 0; cursor: not-allowed; pointer-events: none; } .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-next, .swiper-navigation.doctor-list__thumbs-navigation .swiper-button-prev { width: 32px; height: 32px; } .swiper-navigation.doctors__thumbs-navigation { overflow: hidden; } .swiper-navigation.doctors__thumbs-navigation > div { opacity: 0; } .swiper-navigation.slider-shrink__navigation { position: relative; top: auto; left: auto; transform: none; display: flex; align-items: center; gap: 16px; width: -moz-fit-content; width: fit-content; } .swiper-navigation.slider-shrink__navigation .swiper-button-next--relative, .swiper-navigation.slider-shrink__navigation .swiper-button-prev--relative { top: auto; transform: none; } @media (max-width: 1440px) { .doctor-list__thumbs-navigation.swiper-navigation { width: 100%; } } @media (max-width: 1200px) { .doctor-list__thumbs-navigation.swiper-navigation { width: 110%; } .stage-bracket__thumbs-navigation.swiper-navigation { position: absolute; z-index: 1; } .stage-bracket__thumbs-navigation.swiper-navigation .swiper-button-prev { left: 0px !important; } .stage-bracket__thumbs-navigation.swiper-navigation .swiper-button-next { right: 0px !important; } } @media (max-width: 800px) { .doctor-list__thumbs-navigation.swiper-navigation { width: 80%; } } @media (max-width: 640px) { .swiper-navigation.swiper-navigation__equipment { display: none; } .stage-bracket__thumbs-navigation.swiper-navigation { position: absolute; z-index: 1; top: unset; bottom: -10%; } .stage-bracket__thumbs-navigation.swiper-navigation .swiper-button-prev { left: 30% !important; } .stage-bracket__thumbs-navigation.swiper-navigation .swiper-button-next { right: 30% !important; } .doctor-list__thumbs-navigation.swiper-navigation { width: 100%; } .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-prev, .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-next { transition: opacity 0.8s ease-out; } .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-prev.swiper-button-disabled, .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-next.swiper-button-disabled { opacity: 0; cursor: not-allowed; pointer-events: none; } .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-prev { margin-left: 100px; } .doctor-list__thumbs-navigation.swiper-navigation .swiper-button-next { margin-right: 120px; } } @media (max-width: 480px) { .stage-bracket__thumbs-navigation.swiper-navigation { position: absolute; z-index: 1; top: unset; bottom: -13%; } } .slider-shrink__head { width: 100%; min-height: 48px; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 48px; } .slider-shrink__items { width: 100%; height: auto; display: flex; flex-direction: row; gap: 16px; } .slider-shrink__item { width: 100%; height: auto; box-sizing: border-box; border-radius: 32px; flex: 1; flex-grow: 1; overflow: hidden; position: relative; transition: flex-grow 0.3s ease-out; cursor: pointer; background: var(--default); z-index: 1; } .slider-shrink__item.active { flex-grow: 3; } .slider-shrink__item.slider-shrink__item--contain img { -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .slider-shrink__item.active.slider-shrink__item--active-contain img { -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .slider-shrink__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .slider-shrink__item--popup { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background-color: var(--light-background); } .slider-shrink__wrap { margin-top: 24px; width: 100%; min-height: 560px; height: 560px; display: flex; justify-content: space-between; gap: 16px; } @media (max-width: 640px) { .slider-shrink__head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 24px; padding: 0px 24px; } .slider-shrink__head-right { width: 100%; justify-content: flex-end; } .slider-shrink__wrap { margin-top: 16px; min-height: unset; height: auto; padding: 0px 12px; } .slider-shrink__items { flex-direction: column; gap: 10px; } .slider-shrink__item--preview { height: 480px; border-radius: 24px; cursor: default; flex: none; } .slider-shrink__thumbs { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .slider-shrink__thumbs .slider-shrink__item { flex: none; width: 100%; height: 84px; border-radius: 16px; opacity: 0.7; } .slider-shrink__thumbs .slider-shrink__item img { height: 101%; } .slider-shrink__thumbs .slider-shrink__item.active { opacity: 1; box-shadow: 0 0 0 2px var(--main); } } @media (max-width: 560px) { .slider-shrink__item--preview { height: 320px; } } .full-slider { position: relative; left: 50%; right: 50%; width: calc(100vw - 6px); margin-left: -50vw; margin-right: -50vw; margin-bottom: 105px; overflow-x: clip; } .full-slider__container { margin: 0 auto; width: 100%; max-width: 1400px; display: flex; justify-content: space-between; } .full-slider__video-slide { position: relative; width: 100%; overflow: hidden; background: #000; } .full-slider__wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { background: none !important; } .full-slider__wrap .with-btn .full-slider__item-advantages { margin-top: 54px; } .full-slider__item { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; border-radius: 0; padding: 235px 24px 0 24px; z-index: 1; overflow: hidden; } .full-slider__item.light .full-slider__item-name, .full-slider__item.light .full-slider__item-text { color: var(--main-font); } .full-slider__item.shadow-full::after { display: block; content: ""; background: linear-gradient(290.92deg, rgba(22, 27, 33, 0) 0%, rgba(22, 27, 33, 0.5) 100.01%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .full-slider__item.shadow-full--color::after { display: block; content: ""; background: var(--full-slider-overlay-color, transparent); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .full-slider__item.shadow-bg::after { display: block; content: ""; background: linear-gradient(290.92deg, rgba(22, 27, 33, 0) 34.34%, rgba(22, 27, 33, 0.5) 100.01%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .full-slider__item.shadow-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%); } .full-slider__item-wrap { position: relative; z-index: 3; display: flex; flex-direction: row; gap: 24px; } .full-slider__item-wrap--section { display: flex; flex-direction: column; } .full-slider__item-wrap--section-image { align-items: end; justify-content: end; } .full-slider__item-name { color: var(--light-font); } .full-slider__item-text { max-width: 450px; margin-top: 26px; color: var(--light-font); } .full-slider__item-button { display: flex; align-items: center; gap: 16px; } .full-slider__item-btn { margin-top: 40px; } .full-slider__item-img { max-width: 640px; max-height: 640px; margin-bottom: 0; } .full-slider__item-img img { max-width: 640px; max-height: 640px; } .full-slider .swiper-pagination { margin: 15px -12px 0; display: flex; align-items: flex-start; justify-content: center; } .full-slider .swiper-pagination.swiper-pagination-disabled { display: none; } .full-slider .swiper-pagination-bullet { margin: 0 12px; width: 100%; max-width: 256px; cursor: pointer; } .full-slider .swiper-pagination-bullet.swiper-pagination-bullet-active .full-slider__bullet-text { color: var(--main-font); } .full-slider .swiper-pagination-bullet.swiper-pagination-bullet-active .full-slider__bullet-line { opacity: 1; } .full-slider .swiper-pagination-bullet span { display: block; } .full-slider .swiper-pagination-bullet span.full-slider__bullet-text { color: var(--grey-font); text-align: center; min-height: 42px; } .full-slider .swiper-pagination-bullet span.full-slider__bullet-line { width: 100%; height: 4px; background-color: var(--border-grey); position: relative; opacity: 0; transition: opacity 0.1s ease; border-radius: 2px; overflow: hidden; } .full-slider .swiper-pagination-bullet span.full-slider__bullet-line > span { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: var(--main); transition: width linear; } @keyframes sliderProgressBar { from { width: 0%; } to { width: 100%; } } @media (max-width: 640px) { .full-slider__container { height: 100%; } .full-slider { margin: 0px; left: 0%; right: 0%; width: 100%; margin-left: 0; margin-right: 0; overflow-x: visible; } .full-slider__wrap { position: relative; padding: 0px 12px; } .full-slider__item { position: relative; min-height: 400px !important; height: 400px !important; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; border-radius: 24px; padding: 0; z-index: 1; overflow: hidden; } .full-slider__item-name { width: 100%; } .full-slider__item-name--small { width: 100%; } .full-slider__item-text { width: 100%; } .full-slider__item-button { width: 100%; display: flex; flex-direction: row; justify-content: end; } .full-slider__item-description { padding: 12px 12px; } .full-slider__item-description { padding: 0; flex-grow: 1; } .full-slider .swiper-pagination { width: 200px; display: flex; align-items: flex-start; justify-content: center; position: absolute; bottom: 40px; left: 5px; right: 0; z-index: 10; } .full-slider .swiper-pagination.swiper-pagination-disabled { display: none; } .full-slider .swiper-pagination-bullet { margin: 0 6px; width: 32px; border-radius: 16px; cursor: pointer; position: relative; } .full-slider .swiper-pagination-bullet .full-slider__bullet-text { display: none !important; } .full-slider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { width: 12px; min-width: 12px; height: 5px; border-radius: 15px; background: var(--grey-background-gradient); opacity: 80%; } .full-slider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .full-slider__bullet-text { display: none !important; } .full-slider .swiper-pagination-bullet.swiper-pagination-bullet-active .full-slider__bullet-line { opacity: 1; } .full-slider .swiper-pagination-bullet span { display: block; } .full-slider .swiper-pagination-bullet span.full-slider__bullet-line { width: 100%; height: 4px; background-color: var(--border-grey); position: relative; opacity: 0; transition: opacity 0.1s ease; border-radius: 2px; overflow: hidden; } .full-slider .swiper-pagination-bullet span.full-slider__bullet-line > span { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--main-gradient) 0%, var(--main) 100%); transition: width linear; } .full-slider__wrap { margin-bottom: 24px; } .full-slider__item-wrap--section-description { padding: 12px; position: relative; z-index: 1; } .full-slider__item-wrap--section-image { position: absolute; bottom: 0; z-index: 0; align-items: center; width: 100%; justify-content: end; } .full-slider__item-img { margin-bottom: 0px; } .full-slider__item-wrap--section.full-slider__item-wrap--section-description { position: relative; height: 70%; } .full-slider__item-wrap--section.full-slider__item-wrap--section-description::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--full-slider-selected-color, var(--main)) 70%); } .full-slider__item-wrap--section.full-slider__item-wrap--section-description .full-slider__item-description { z-index: 1; } .full-slider__item-wrap--section.full-slider__item-wrap--section-image { height: 50%; bottom: unset; top: 0px; } .full-slider__item { background-image: none !important; background-color: var(--full-slider-selected-color); } .full-slider__item.shadow-bg::after, .full-slider__item.shadow-bg::before { display: none; } .full-slider__item.shadow-full::after, .full-slider__item.shadow-full::before { display: none; } .full-slider__item-wrap.full-slider__container { display: flex; flex-direction: column-reverse; } .full-slider__item-img { align-items: end; justify-content: end; max-height: 100%; max-width: 100%; } .full-slider__item-img img { max-width: 100%; max-height: 100%; margin-top: 12px; } .full-slider__item-text { margin-top: 16px; } .full-slider__item-btn { margin-top: 0px; } .full-slider__item-description { padding: 0px 12px; } .full-slider__item-name { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .full-slider__item-text { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .full-slider__video-slide { min-height: 400px !important; height: 400px !important; border-radius: 24px; } .full-slider__item-img { height: 100%; } .full-slider__item-img img { height: 100%; -o-object-fit: cover; object-fit: cover; margin-top: 0px; } .full-slider__item-img-right { height: 100%; } .full-slider__item-img-right img { height: 100%; margin-top: 12px; } } .service-menu-block { margin-top: 105px; margin-bottom: 58px; position: relative; } .service-menu-block__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 69px; } .service-menu-block__menu.service-menu { margin-top: 0; padding: 0; background: none; } .service-menu-block__menu.service-menu .service-menu__submenu-icon { border-radius: 10px; background: var(--grey-background); } .service-menu-block__tabs.mobile { display: none; } .service-menu-block__show-more { display: none; } .service-menu-block__service { position: relative; overflow: hidden; z-index: 1; } .service-menu-block__service::after { content: ""; position: absolute; z-index: 2; width: 16px; height: 100%; top: 0; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .service-menu-block--empty { height: 24px; } @media (max-width: 800px) { .tabs-switcher__wrap { width: 100%; justify-content: center; border-radius: 12px 12px 0px 0px; } .tabs-switcher__item { background-color: var(--grey-background); } .tabs-switcher__item.active { background-color: var(--light-background); } .tabs-switcher__switcher { background-color: transparent; } .service-menu-block.container { margin-top: 40px; margin-bottom: 20px; } .service-menu-block__head { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 16px; padding: 0px; } .service-menu-block__tabs { background: var(--grey-background); border-radius: 0px 0px 12px 12px; padding: 4px; margin: 0px; gap: 12px; min-height: 100px; margin-top: -16px; gap: 0px; display: flex; flex-direction: column; position: relative; z-index: 2; } .service-menu-block__tabs.desktop { display: none; } .service-menu-block__tabs.mobile { display: flex; } .service-menu-block__tabs--column { width: 100%; min-height: 100px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 10px; column-gap: 10px; margin-top: 8px; } .service-menu-block__tabs--column { width: 100%; min-height: 100px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 10px; column-gap: 10px; margin-top: 8px; } .service-menu-block__section { min-height: 48px; height: -moz-fit-content; height: fit-content; padding: 8px; display: flex; gap: 8px; align-items: center; } .service-menu-block__section--group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .service-menu-block__section--item { color: var(--main); font-weight: 600; } .service-menu-block__section--icon { display: flex; justify-content: center; align-items: center; width: 32px; min-width: 32px; height: 32px; } .service-menu-block__service { border-radius: 12px; min-height: 48px; height: -moz-fit-content; height: fit-content; padding: 8px; display: flex; gap: 8px; align-items: center; background: var(--light-background); } .service-menu-block__service--wrap { display: flex; flex-direction: column; gap: 4px; } .service-menu-block__service--icon { display: flex; justify-content: center; align-items: center; width: 32px; min-width: 32px; height: 32px; } .service-menu-block__section--group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } .service-menu-block__tabs--column-wrapper { max-height: 430px; overflow: hidden; position: relative; transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease; opacity: 0.85; } .service-menu-block__tabs--column-wrapper.active { max-height: 2000px; opacity: 1; } .service-menu-block__show-more { position: relative; z-index: 1; margin: 0px; margin-top: -12px; text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: 8px 0; background-color: var(--main); border-radius: 0px 0px 12px 12px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 8px; } .service-menu-block__show-more > span { margin-top: 12px; color: var(--light-font); padding: 12px 0px; } .service-menu-block__show-more > svg { transition: transform 0.3s ease; margin-top: 12px; } .service-menu-block__tabs--column-wrapper { position: relative; } .service-menu-block__tabs--column-wrapper::after { content: ""; display: block; width: 100%; height: 24px; position: absolute; z-index: 1f; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--grey-background) 100%); } .service-menu-block__service { transition: all 0.3s ease; } .service-menu-block__service span { color: var(--main-font); } .service-menu-block__service:hover svg { stroke: var(--main); } .service-menu-block__service:hover span { color: var(--main); } .full-menu-service-menu { margin-top: 24px; } .full-menu-service-menu .service-menu-block__tabs { margin: 0px; } .full-menu-service-menu .service-menu-block__tabs.mobile { border-radius: 12px; } .full-menu-service-menu .service-menu-block__show-more { margin: -12px 0px 0px 0px; border-radius: 0px 0px 12px 12px; } .footer .service-menu-block__tabs { margin: 24px 24px 0px 24px; border-radius: 12px; } .footer .service-menu-block__show-more { margin: -12px 24px 0px 24px; } } .ratings-aside { transition: transform 0.5s ease; transform: translateY(100%); transition-delay: 0s; } .ratings-aside.observe { opacity: 1; transform: translateY(0); } .ratings-aside.observe .ratings-aside__users, .ratings-aside.observe .ratings-aside__review-title, .ratings-aside.observe .ratings-aside__review-subtitle, .ratings-aside.observe .ratings-aside__review-link, .ratings-aside.observe .ratings-aside__review-tooltip--left, .ratings-aside.observe .ratings-aside__review-tooltip--right { opacity: 1; transform: translateY(0); } .ratings-aside.observe .ratings-aside__review-tooltip--center { opacity: 1; transform: translateX(-50%) translateY(0); } .ratings-aside__review-title { line-height: 19.6px; text-align: center; margin-bottom: 16px; opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; transform: translateY(100%); transition-delay: 1s; } .ratings-aside__review-subtitle { line-height: 14px; text-align: center; opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; transform: translateY(100%); transition-delay: 1.5s; } .ratings-aside__users { position: relative; margin-bottom: 18px; padding: 48px 0; opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; transform: translateY(100%); transition-delay: 0.5s; } .ratings-aside__users-wrap { display: flex; align-items: center; justify-content: center; margin-left: 16px; } .ratings-aside__users-item { width: 100%; max-width: 50px; border-radius: 50%; overflow: hidden; margin-left: -16px; } .ratings-aside__users-item:nth-child(1) { position: relative; z-index: 5; } .ratings-aside__users-item:nth-child(2) { position: relative; z-index: 4; } .ratings-aside__users-item:nth-child(3) { position: relative; z-index: 3; } .ratings-aside__users-item:nth-child(4) { position: relative; z-index: 2; } .ratings-aside__users-item:nth-child(5) { position: relative; z-index: 1; } .ratings-aside__review-link { width: calc(100% - 64px); display: flex; align-items: center; position: absolute; bottom: 32px; z-index: 5; opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; transform: translateY(100%); transition-delay: 2s; } .ratings-aside__review-link .btn { width: 100%; max-width: unset; padding: 14px 50px; } .ratings-aside__review-tooltip { position: absolute; background-color: var(--light-background); box-shadow: 0px 14px 24px 0px var(--shadow-grey); text-align: center; border-radius: 8px; padding: 8px 9px; z-index: 2; opacity: 0; transition: transform 0.5s ease, opacity 0.4s ease; transform: translateY(100%); } .ratings-aside__review-tooltip:after { display: block; content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 21px; height: 21px; background-color: var(--light-background); border-radius: 3px; z-index: 1; } .ratings-aside__review-tooltip--left { top: 0; left: 8px; transition-delay: 2.5s; } .ratings-aside__review-tooltip--right { top: 0; right: 8px; transition-delay: 3s; } .ratings-aside__review-tooltip--center { bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); transition-delay: 3.5s; } .ratings-aside__review-tooltip--center:after { bottom: unset; top: -3px; } .ratings-aside__review-tooltip span { line-height: 19.6px; color: var(--interface-grey); vertical-align: middle; position: relative; z-index: 2; } .ratings-aside__review-tooltip svg { fill: var(--star); width: 15px; height: 14px; padding-left: 4px; display: inline-block; vertical-align: middle; position: relative; z-index: 2; } .animate-background { position: absolute; width: var(--animate-background-width, 400px); height: var(--animate-background-height, 400px); top: 0; left: 50%; transform: translateX(-50%); } .animate-background img { position: absolute; width: 100%; top: 0; left: 0; } .animate-background__image-one { animation: fadeInOut 2s infinite; animation-timing-function: ease-in-out; } .animate-background__image-two { animation: fadeInOut 2s infinite; animation-delay: 1s; animation-timing-function: ease-in-out; } .animate-background.animate-background--ratings { --animate-background-width: 630px; --animate-background-height: 100%; left: unset; transform: none; right: 497px; } .form-main__animate-background { width: 640px; height: 640px; left: 0; transform: none; } .form-info__animate-background { width: 480px; height: 480px; left: 0; transform: none; } .form-calculator__animate-background { width: 640px; height: 640px; left: 0; transform: none; } .animate-background.form-main__animate-background.mobile { display: none; } .animate-background.form-calculator__animate-background.mobile { display: none; } .animate-background.form-info__animate-background.mobile { display: none; } @keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes animateBackgr { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes animateBackgrOne { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes animateBackgrTwo { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 1080px) { .animate-background.form-main__animate-background, .animate-background.form-calculator__animate-background, .animate-background.form-info__animate-background { position: absolute; top: 55%; left: 10px; transform: translateX(-50%) translateY(-50%) rotate(90deg); transform-origin: center; max-height: 200px; width: 160px; } .animate-background.form-main__animate-background img, .animate-background.form-calculator__animate-background img, .animate-background.form-info__animate-background img { height: 200px; width: 250px; } .animate-background.form-main__animate-background.mobile, .animate-background.form-calculator__animate-background.mobile, .animate-background.form-info__animate-background.mobile { display: block !important; } .animate-background.form-main__animate-background.desktop, .animate-background.form-calculator__animate-background.desktop, .animate-background.form-info__animate-background.desktop { display: none; } .animate-background.form-main__animate-background { z-index: 1; } .animate-background.form-calculator__animate-background { z-index: 2; } .animate-background.form-info__animate-background { z-index: 1; } } @media (max-width: 1400px) { .animate-background.animate-background--ratings { top: 200px; right: 0px; } } @media (max-width: 1318px) { .animate-background.animate-background--ratings .ratings { display: none; } } @media (max-width: 900px) { .animate-background.animate-background--ratings { position: absolute; width: 100%; height: auto; max-height: 300px; top: 50px; bottom: 50%; left: 0; right: 0; z-index: 0; border: none; } } @media (max-width: 640px) { .animate-background.animate-background--ratings { top: auto; } } .ratings { background-color: var(--grey-background); margin-top: 32px; position: relative; width: 100%; } .ratings__wrap { position: relative; } .ratings__content { position: relative; max-width: 880px; padding: 80px 0; } .ratings__title { max-width: 900px; margin-bottom: 16px; } .ratings__subtitle { margin-bottom: 72px; line-height: 19.6px; max-width: 630px; } .ratings__list { display: flex; align-items: flex-start; flex-wrap: wrap; width: 70%; } .ratings__item { width: 100%; max-width: 220px; background-color: var(--light-background); padding: 16px 24px; border-radius: 16px; margin-right: 16px; margin-bottom: 16px; align-self: stretch; min-height: 143px; overflow: hidden; position: relative; } .ratings__item::after { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .ratings__item--empty { background-color: rgba(255, 255, 255, 0); border: 1.5px dashed var(--border-grey); } .ratings__value { line-height: 63px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.5px solid var(--border-grey); } .ratings__company { display: flex; align-items: center; } .ratings__icon { width: 100%; min-width: 32px; max-width: 32px; height: 32px; margin-right: 12px; } .ratings__icon svg { width: 100%; height: 100%; } .ratings__company-info span { display: block; } .ratings__summary { padding: 16px 24px; } .ratings__summary-wrap { display: flex; align-items: center; } .ratings__summary-value { line-height: 63px; margin-right: 12px; } .ratings__notice { margin-top: 21px; } .ratings__stars { display: flex; align-items: center; width: 224px; min-width: 224px; flex: 0 0 224px; position: relative; z-index: 1; } .ratings__stars-empty { display: block; width: 100%; position: relative; z-index: 1; } .ratings__stars-full { position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 192px; height: 30px; z-index: 2; overflow: hidden; transition: width 1.5s ease; } .ratings__stars-mask { display: block; width: 192px; height: 30px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 192px 30px; mask-size: 192px 30px; -webkit-mask-position: left center; mask-position: left center; } .ratings__star { margin: -8px; } .ratings__decor { width: 499px; height: 698px; position: absolute; bottom: 0; right: 0; z-index: 2; } .ratings__decor > img { position: relative; z-index: 4; } .ratings__decor::before, .ratings__decor::after { display: block; content: ""; width: 266px; position: absolute; right: 42px; border-radius: 32px; } .ratings__decor::before { background-color: var(--light-background); height: 564px; top: 5px; z-index: 2; } .ratings__decor::after { background-color: var(--grey-background); height: 402px; top: 167px; z-index: 3; } .ratings__review { width: 266px; height: 564px; border-radius: 33px; position: absolute; top: 5px; right: 42px; overflow: hidden; z-index: 5; } .ratings__review-wrap { height: 100%; display: flex; flex-direction: column; } .ratings__review-logo { display: flex; justify-content: center; height: 162px; padding: 0px 12px; align-items: center; } .ratings__review-logo img { max-height: 50px; } .ratings__review-container { padding: 20px 32px; border-radius: 32px; flex-grow: 1; } @media (max-width: 1400px) { .ratings__decor.observe { display: none; } } @media (max-width: 1318px) { .ratings__list { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); justify-content: space-between; width: 100%; gap: 14px; } } @media (max-width: 1100px) { .ratings__item.ratings__item--empty { display: none; } } @media (max-width: 900px) { .ratings { position: relative; display: flex; flex-direction: column; align-items: center; } .ratings__wrap { position: relative; z-index: 1; } .ratings__title { text-align: center; } .ratings__subtitle { max-width: none; width: 100%; text-align: center; } .ratings__content-block { margin: 65px 0px 40px 0px; display: flex; flex-direction: column; align-items: center; } .ratings__list { justify-content: space-between; width: 100%; gap: 14px; } .ratings__item { max-width: none; padding: 16px; margin: 0px; width: 46%; } .ratings__decor.observe { display: none; } .ratings__item.ratings__item--empty { display: block; } } @media (max-width: 640px) { .ratings__wrap { padding: 0px 12px; } .ratings__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; } .ratings__item { max-width: none; padding: 16px; margin: 0px; width: 100%; } .ratings__summary-wrap { align-items: start; } .ratings__summary { padding: 0px 0px 0px 16px; margin-top: 12px; grid-column: 1/-1; } .ratings__item.ratings__item--empty { display: none; } .ratings__notice { margin-top: 16px; } } .ratings-short__wrap { display: flex; align-items: flex-start; } .ratings-short__list { display: flex; align-items: center; margin-right: 28px; } .ratings-short__item { width: 48px; height: 48px; border-radius: 50%; background-color: var(--light-background); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0px 14px 24px 0px var(--shadow); margin-right: -18px; } .ratings-short__icon { width: 24px; height: 24px; } .ratings-short__summary { margin-left: 28px; } .ratings-short__summary-value { line-height: 48px; color: var(--grey-font); margin-bottom: 8px; white-space: nowrap; } .ratings-short__summary-current { color: var(--main-font); } .ratings-short--advantages { padding: 48px 0; } .ratings-short--advantages .ratings-short__wrap { display: block; } .ratings-short--advantages .ratings-short__list { margin-right: 0; } .ratings-short--advantages .ratings-short__summary { margin-left: 0; margin-top: 16px; } .ratings-short--advantages .ratings-short__summary-value { margin-bottom: 16px; } .main-advantages__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; } .main-advantages__numbers { display: flex; align-items: center; justify-content: flex-end; margin-left: 24px; } .main-advantages__number { position: relative; z-index: 1; display: flex; align-items: center; margin-right: 24px; } .main-advantages__number:last-of-type { margin-right: 0; } .main-advantages__number-value { color: var(--main); line-height: 56px; margin-right: 16px; position: relative; } .main-advantages__number-value-hidden { opacity: 0; } .main-advantages__number-value-visible { position: absolute; top: 0; left: 0; } .main-advantages__number-users { display: flex; align-items: center; margin-right: 16px; margin-left: 11px; position: relative; z-index: 1; } .main-advantages__number-users-item { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin-left: -11px; } .main-advantages__number-users-item:nth-child(1) { position: relative; z-index: 3; } .main-advantages__number-users-item:nth-child(2) { position: relative; z-index: 2; } .main-advantages__number-users-item:nth-child(3) { position: relative; z-index: 1; } .main-advantages__number-name { line-height: 19.6px; max-width: 113px; } .main-advantages__list { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: -8px; } .main-advantages__item { display: flex; align-items: center; width: 100%; max-width: 338px; margin: 8px; } .main-advantages__item-icon { width: 100%; max-width: 80px; height: 80px; border-radius: 16px; background-color: var(--grey-background); display: flex; align-items: center; justify-content: center; margin-right: 24px; } .main-advantages__item-icon svg { width: 48px; height: 48px; } .main-advantages__item-name { line-height: 19.6px; } .main-advantages__item-descr { margin-top: 4px; line-height: 14px; color: var(--interface-grey); } .main-advantages.container { padding: 80px 0px; margin-top: 32px; } .main-advantages__number-name { max-width: 130px; width: -moz-fit-content; width: fit-content; } @media (max-width: 1400px) { .main-advantages__numbers { display: grid; grid-template-columns: repeat(2, 1fr); } .main-advantages__head { align-items: start; } } @media (max-width: 1100px) { .main-advantages__title { margin-bottom: 43px; } .main-advantages__head { width: 100%; display: flex; flex-direction: column; margin-bottom: 32px; } .main-advantages__numbers { margin: 0px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); justify-content: space-between; width: 100%; gap: 14px; } .main-advantages__number { height: 160px; display: flex; flex-direction: column; align-items: start; justify-content: end; padding: 16px; width: 100%; border-radius: 16px; background-color: var(--grey-background); } .main-advantages__number-value { order: 0; } .main-advantages__number-users { order: -1; } .main-advantages__number-name { order: 1; } .main-advantages__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); justify-content: space-between; align-items: start; width: 100%; gap: 14px; margin: 0px; } .main-advantages__item { width: 100%; margin: 0px; display: flex; align-items: start; flex-direction: column; gap: 12px; } .main-advantages__item-icon { width: 80px; } .main-advantages.container { padding: 0px; margin: 0 auto; max-width: 98%; width: 94%; margin-top: 40px; } .advantages-number, .advantages-number__item { margin-left: 0 !important; } } .doctor-label-stage { position: absolute; z-index: 100; top: 24px; right: 24px; height: 34px; min-width: 65px; width: -moz-fit-content; width: fit-content; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding-right: 6px; width: fit-content; display: flex; align-items: center; cursor: pointer; transition: all 0.3s ease-out; overflow: hidden; } .doctor-label-stage--card-small { top: 8px !important; right: 8px !important; } .doctor-label-stage--linear { content: ""; z-index: 110; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 48px; opacity: 0.5; transform: translateX(0); transition: transform 0.5s ease-out; background: linear-gradient(to right, transparent 0%, var(--grey-background) 50%, transparent 100%); } .doctor-label-stage--icon { transform: rotate(-4deg); translate: 0 1px; transition: transform 0.5s ease-out, translate 0.5s ease-out; } .doctor-label-stage--dark { background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .doctor-label-stage--main { background: var(--main); } .doctor-label-stage--gold { background: var(--gold); } .doctor-label-stage--content { display: flex; gap: 4px; } .doctor-label-stage--content > span:last-child { margin-top: -1px; } .doctor-label-stage--text { line-height: 80%; color: var(--light-font); } .doctor-label-stage--with-linear:hover .doctor-label-stage--linear { transform: translateX(28px); } .doctor-label-stage--with-linear:hover .doctor-label-stage--icon { translate: 0; transform: rotate(0deg); } .doctor-label-stage--banner { z-index: 0; } .doctor-label-stage--banner { padding: 8px; min-width: 84px; height: 48px; border-radius: 12px; } .doctor-label-stage--banner .doctor-label-stage--icon { width: 22px; min-width: 22px; height: 32px; } .doctor-card__wrap:hover .doctor-label-stage--with-linear .doctor-label-stage--linear { transform: translateX(28px); } .doctor-card__wrap:hover .doctor-label-stage--with-linear .doctor-label-stage--icon { translate: 0; transform: rotate(0deg); } .doctor-media-image__image:hover .doctor-label-stage--with-linear .doctor-label-stage--linear { transform: translateX(28px); } .doctor-media-image__image:hover .doctor-label-stage--with-linear .doctor-label-stage--icon { translate: 0; transform: rotate(0deg); } @media (max-width: 640px) { .doctor-card__stage-card--text { position: relative; color: var(--light-font); } .doctor-card__stage-card-wrap { height: 20px; display: flex; align-items: center; justify-content: center; width: 100%; } .doctor-card__stage { display: flex; justify-content: center; gap: 6px; position: absolute; top: -36px; left: 0; width: 100%; height: 40px; z-index: 0; border-radius: 16px 16px 0 0; overflow: hidden; transition: all 0.3s ease-out; } .doctor-card__stage--dark { background: var(--grey-background); } .doctor-card__stage--dark .doctor-card__stage-card--text { color: var(--grey-font); font-weight: 600; } .doctor-card__stage--main { background: var(--main); } .doctor-card__stage--gold { background: var(--gold); } .doctor-card__stage--linear { content: ""; z-index: 1; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 48px; opacity: 0.5; transform: translateX(70%); transition: transform 0.5s ease-out; background: linear-gradient(to right, transparent 0%, var(--grey-background) 50%, transparent 100%); } .doctor-card__stage--icon { position: relative; z-index: 2; transform: rotate(-4deg); translate: 0 1px; transition: transform 0.5s ease-out, translate 0.5s ease-out; } .doctor-card__wrap:hover .doctor-card__stage--with-linear .doctor-card__stage--linear { transform: translateX(28px); } .doctor-card__wrap:hover .doctor-card__stage--with-linear .doctor-card__stage--icon { translate: 0; transform: rotate(0deg); } } .doctor-card { touch-action: pan-y; border-radius: 16px; overflow: hidden; } .doctor-card:hover .doctor-card__info::before { height: calc(100% + 56px); } .doctor-card__wrap { position: relative; z-index: 1; } .doctor-card__img { height: 208px; display: flex; justify-content: center; background-color: var(--default); cursor: pointer; } .doctor-card__img img { max-width: unset; height: 100%; } .doctor-card__img.cover-doctor img { -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; width: 100%; } .doctor-card__info { background-color: var(--light-background); position: relative; padding: 39px 34px 45px 32px; z-index: 1; min-height: 220px; } .doctor-card__info::before { position: absolute; width: 100%; border-radius: 16px; height: calc(100% + 16px); bottom: 0; content: ""; left: 0; background-color: var(--light-background); z-index: 1; transition: height 0.2s ease; pointer-events: none; } .doctor-card__actions { position: absolute; bottom: 100%; } .doctor-card__actions .doctor-card__action { min-height: unset; display: flex; align-items: center; padding: 8px; transition: padding 0.2s ease; margin-top: 8px; font-size: unset; } .doctor-card__actions .doctor-card__action svg { width: 16px; height: 16px; margin: 0; } .doctor-card__actions .doctor-card__action div { width: 0; transition: width 0.2s ease; overflow: hidden; } .doctor-card__actions .doctor-card__action span { padding-left: 8px; display: inline-block; } .doctor-card__title { position: relative; z-index: 2; } .doctor-card__exp { font-weight: 600; color: var(--main); margin-bottom: 8px; } .doctor-card__name { min-height: 41px; margin-bottom: 28px; cursor: pointer; } .doctor-card__name-single { color: var(--main-font); transition: color 0.3s ease-out; } .doctor-card__name-single:hover { color: var(--main); } .doctor-card__specialty { color: var(--interface-grey); min-height: 43px; position: relative; z-index: 2; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .doctor-card__info { padding: 0 16px 16px 16px; display: flex; flex-direction: column; justify-content: end; min-height: 182px; z-index: 1; } .doctor-card__name { margin-bottom: 12px; } } .doctor-list__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 48px; } .doctor-list__title { max-width: 700px; } .doctor-list__title h2 { margin-bottom: 16px; } .doctor-list__subtitle { line-height: 19.6px; } .doctor-list__thumbs { position: relative; overflow: hidden; } .doctor-list__thumbs::before, .doctor-list__thumbs::after { display: block; content: ""; height: 48px; width: calc(50% - 288px); position: absolute; top: 0; z-index: 2; } .doctor-list__thumbs::before { left: 0; background: linear-gradient(90deg, var(--grey-background) 0%, var(--grey-background) 65%, rgba(245, 250, 253, 0) 100%); } .doctor-list__thumbs::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 35%, var(--grey-background) 100%); } .doctor-list__thumbs-wrap { position: relative; max-width: 272px; margin: 64px auto 0; } .doctor-list__thumbs-slider.swiper { overflow: unset; } .doctor-list__thumbs-item { opacity: 0.3; transition: opacity 0.2s ease, margin 0.3s ease; display: flex; align-items: center; } .doctor-list__thumbs-item.swiper-slide .slide-content { padding: 4px; } .doctor-list__thumbs-item.active { opacity: 1; } .doctor-list__thumbs-item.active img { -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .doctor-list__thumbs-img { max-width: 48px; min-width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--border-grey); } .doctor-list__thumbs-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; max-width: unset; height: 100%; -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } .doctor-list__thumbs-wrap { max-width: 300px; } @media screen and (max-width: 1200px) { .doctor-list__thumbs-wrap { max-width: 272px; } } @media only screen and (max-width: 640px) { .doctor-list.content-block.content-block--grey { padding: 24px 0px; overflow: hidden; } .doctor-list__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 36px; } .doctor-list__title { padding: 0px 20px; } .doctor-list__subtitle { text-align: center; } .doctor-list__thumbs { overflow: hidden; position: relative; } .doctor-list__thumbs-wrap { margin-top: 32px; } .doctor-list__thumbs::before { display: block; content: ""; height: 100%; width: 50px; position: absolute; top: 0; z-index: 2; } .doctor-list__thumbs::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .doctor-list__wrap.container .swiper { overflow: visible; } } .doctor-media-image__side { min-width: 690px; display: flex; align-items: flex-end; width: 100%; } .doctor-media-image__side-wrap { width: 100%; display: flex; justify-content: flex-end; gap: 16px; } .doctor-media-image__actions-wrapper { width: 128px; display: flex; flex-direction: column; gap: 16px; } .doctor-media-image__actions-btn { min-width: 128px; width: 128px; border: 1px solid var(--border-grey); border-radius: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; gap: 8px; flex: 0.5; cursor: pointer; } .doctor-media-image__actions-btn > span { text-align: center; } .doctor-media-image__actions-btn-icon { min-width: 48px; width: 48px; height: 48px; border-radius: 100%; border: 1px solid var(--main); border-color: color-mix(in srgb, var(--main) 30%, transparent); display: flex; align-items: center; justify-content: center; } .doctor-media-image__image { position: relative; height: -moz-fit-content; height: fit-content; width: 440px; max-width: 440px; display: flex; flex-direction: column; border-radius: 32px; background-color: var(--main); } .doctor-media-image__image-item { min-height: 310px; max-height: 410px; overflow: hidden; width: 440px; max-width: 440px; background-color: var(--default); border-radius: 32px; } .doctor-media-image__image-item img { max-width: unset; height: 100%; } .doctor-media-image__image-item--transparent { display: flex; justify-content: center; align-items: flex-end; } .doctor-media-image__image-item--cover img { -o-object-fit: cover; object-fit: cover; width: 100%; border-radius: 32px; } .doctor-media-image__image-icon { cursor: pointer; } .doctor-media-image__image-text { height: 45px; display: flex; justify-content: center; align-items: center; gap: 8px; } .doctor-media-image__image-text > span { cursor: pointer; color: var(--light-font); } .doctor-media-image--list .doctor-media-image__side { min-width: 0; align-items: flex-start; } .doctor-media-image--list .doctor-media-image__image { width: 100%; max-width: 512px; z-index: 1; } .doctor-media-image--list .doctor-media-image__image-item { width: 100%; max-width: 512px; min-height: 256px; max-height: 458px; } .doctor-media-image--list .doctor-media-image__image-item img { width: 100%; } .doctor-media-image--list .doctor-media-image__image-item--transparent img { width: auto; max-width: unset; } @media (max-width: 1400px) { .doctor-media-image--banner .doctor-media-image__side { align-items: flex-start; justify-content: flex-start; display: flex; flex-direction: column; gap: 16px; } .doctor-media-image--banner .doctor-media-image__side-wrap { display: flex; flex-direction: column; } .doctor-media-image--banner .doctor-media-image__actions-wrapper { flex-direction: row; width: 640px; } .doctor-media-image--banner .doctor-media-image__actions-btn { width: -moz-fit-content; width: fit-content; flex-direction: row; padding: 16px; border-radius: 16px; height: 64px; flex: inherit; } .doctor-media-image--banner .doctor-media-image__actions-btn-icon { min-width: 24px; width: 24px; height: 24px; border: none; } } @media (max-width: 900px) { .doctor-media-image--list .doctor-media-image__side-wrap { flex-direction: column; align-items: center; } .doctor-media-image--list .doctor-media-image__actions-wrapper { width: 100%; flex: unset; } .doctor-media-image--list .doctor-media-image__image { max-width: 100%; } .doctor-media-image--list .doctor-media-image__image-item { max-width: 100%; min-height: 300px; max-height: 420px; } .doctor-media-image--list .doctor-media-image__actions-btn.btn--grey { display: none; } } @media (max-width: 640px) { .doctor-media-image--banner .doctor-media-image__image { width: 100%; max-width: 100%; } .doctor-media-image--banner .doctor-media-image__image-item { width: 100%; max-width: none; } .doctor-media-image--banner .doctor-media-image__side { min-width: 0; width: 100%; } .doctor-media-image--banner .doctor-media-image__actions-wrapper { flex-wrap: wrap; align-items: flex-start; width: 100%; gap: 8px; } .doctor-media-image--list .doctor-media-image__image-item--transparent img { width: 90%; } } @media (max-width: 480px) { .doctor-media-image--banner .doctor-media-image__actions-wrapper { flex-direction: column; } .doctor-media-image--banner .doctor-media-image__actions-btn { width: 100%; } } .doctor-detail__content { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 12px; } .doctor-detail__image { border-radius: 32px; overflow: hidden; width: 100%; max-width: 512px; margin-right: 32px; position: relative; background-color: var(--border-grey); display: flex; justify-content: center; } .doctor-detail__image--transparent { overflow: unset; min-height: 411px; } .doctor-detail__image-wrap { position: absolute; width: 438px; height: 475px; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; } .doctor-detail__stage { position: absolute; top: 0; right: 64px; z-index: 2; width: 80px; height: 112px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); padding: 8px 25px; -webkit-clip-path: url("#doctorDetailExpClip"); clip-path: url("#doctorDetailExpClip"); } .doctor-detail__stage span { display: block; color: var(--light-font); text-align: center; } .doctor-detail__stage span:first-child { line-height: 44.8px; } .doctor-detail__stage span:last-child { font-weight: 600; } .doctor-detail__info { width: 100%; max-width: 728px; } .doctor-detail__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; } .doctor-detail__name { line-height: 33.6px; width: 100%; max-width: 340px; margin-right: 24px; } .doctor-detail__name span { display: block; } .doctor-detail__post { width: 100%; } .doctor-detail__post div:first-child { color: var(--interface-grey); margin-bottom: 12px; } .doctor-detail__post div:last-child { line-height: 19.6px; color: var(--main); } .doctor-detail__title { margin-bottom: 28px; } .doctor-detail__description { line-height: 19.6px; } .doctor-detail__action { margin-top: 72px; } .doctor-detail__action .btn { padding: 20px 24px; line-height: 19.6px; } .doctor-detail__photo.mobile { display: none; } @media (max-width: 900px) { .doctors__item-img-wrap { height: 280px; } .doctors__item-img-wrap img { height: 280px; max-height: 280px; } .doctor-detail__info { padding: 24px 24px; } } @media (max-width: 640px) { .doctor-detail { display: flex; flex-direction: column; align-items: center; z-index: 1; } .doctor-detail__wrap { height: -moz-fit-content; height: fit-content; } .doctor-detail__wrap.container { position: relative; border-radius: 32px; } .doctor-detail__stage { right: 50px; } .doctor-detail__image { border-radius: 32px 32px 0px 0px; margin-right: 0px; } .doctor-detail__info { z-index: 2; padding: 0px 24px; display: flex; flex-direction: column; align-items: center; border-radius: 32px; background-color: var(--grey-background); } .doctor-detail__head { padding-top: 24px; display: flex; flex-direction: column; align-items: center; } .doctor-detail__name.font-main { display: flex; flex-direction: column; align-items: center; margin-right: 0px; } .doctor-detail__name.font-main span { text-align: center; } .doctor-detail__post { margin-top: 45px; text-align: center; } .doctor-detail__title.title { max-width: 290px; margin-bottom: 70px; } .doctor-detail__description { text-align: center; } .doctor-detail__action { margin-top: 30px; margin-bottom: 24px; } .doctor-detail.content-block.content-block--grey { padding: 0px; background-color: var(--light-background); } .doctor-detail__image.desktop { display: none; } .doctor-detail__photo.mobile { display: block; position: relative; width: 100%; z-index: 1; min-height: 276px; max-height: 400px; height: -moz-fit-content; height: fit-content; border-radius: 32px 32px 0px 0px; margin-bottom: -48px; } .doctor-detail__photo.mobile img { -o-object-fit: cover; object-fit: cover; border-radius: 0px; } .doctor-detail__photo { opacity: 0.2; transform: translateY(50%); } .doctor-detail__photo.mobile.active { opacity: 1; transform: translateY(0); transition: opacity 1s ease-out, transform 1s ease-out; transition-delay: 1s; } .doctor-detail__content { padding: 0px; gap: 24px; } .doctors__item-img-wrap { height: 240px; } .doctors__item-img-wrap img { height: 240px; max-height: 240px; } } .doctors__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; } .doctors__thumbs { margin-bottom: 32px; max-width: 1008px; } .doctors__thumbs .swiper-slide-thumb-active .doctors__thumbs-wrap { background-color: var(--light-background); } .doctors__thumbs-item { margin: 4px; max-width: 244px; cursor: pointer; } .doctors__thumbs-wrap { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; transition: background-color 0.2s ease; } .doctors__thumbs-img { width: 48px; min-width: 48px; height: 48px; border-radius: 50%; overflow: hidden; margin-right: 16px; background-color: var(--border-grey); } .doctors__thumbs-img img { min-height: 50px; min-width: 50px; -o-object-fit: cover; object-fit: cover; } .doctors__thumbs-name span { line-height: 19.6px; display: block; } .doctors__thumbs-name span:first-child { color: var(--main); } .doctors__item { display: flex; justify-content: space-between; gap: 24px; } .doctors__item-info { width: 100%; max-width: 700px; display: flex; flex-direction: column; justify-content: space-between; } .doctors__item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .doctors__item-name { line-height: 33.6px; } .doctors__item-name span { display: block; } .doctors__item-specialty, .doctors__item-description { margin-bottom: 32px; } .doctors__item-specialty span, .doctors__item-description span { color: var(--interface-grey); display: block; margin-bottom: 8px; } .doctors__item-specialty div, .doctors__item-description div { line-height: 19.6px; } .doctors__item-specialty div { color: var(--main); } .doctors__item-actions { display: flex; margin-bottom: 22px; } .doctors__item-actions a { margin-right: 8px; line-height: 19.6px; } .doctors__item-actions a:last-child { margin-right: 0; } .doctors__item-actions a.btn svg { width: 16px; height: 16px; } .doctors__container.container.mobile { display: none; } .doctors__container.container.desktop .swiper-button-disabled { opacity: 0; } .doctors__title { flex: 0.8; } .doctors__action { flex: 0.2; } .doctors__btn { width: 100% !important; } @media (max-width: 1300px) { .doctors__item { display: flex; flex-direction: column; align-items: center; gap: 40px; } } @media (max-width: 900px) { .doctors.content-block.content-block--grey { padding: 40px 0px; } .doctors__container.container.mobile { display: block; } .doctors__container.container.desktop { display: none; } .doctors__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 23px; } .doctors__title { text-align: center; } .doctors__title.title { width: 100%; padding: 0px 24px; } .doctors__action { display: none; } .doctors__thumbs { width: 100%; display: flex; flex-direction: row; } .doctors__thumbs .swiper-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; } .doctors__thumbs .swiper-slide { width: auto !important; height: auto !important; } .doctors__thumbs-item { width: auto; margin: 0; } .doctors__thumbs-name span { display: none; } .doctors__thumbs-wrap { background-color: transparent; padding: 0px; width: auto; } .doctors__thumbs-img { width: 50px; height: 50px; margin: 0px; } .doctors__thumbs-img img { -o-object-fit: cover; object-fit: cover; height: 100%; width: auto; } .doctors .swiper-slide-thumb-active .doctors__thumbs-wrap { background-color: transparent; } .doctors__item { display: flex; flex-direction: column; gap: 24px; } .doctors__item-info { order: 1; } .doctors__item-head { display: flex; flex-direction: column; margin-bottom: 16px; } .doctors__item-name { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 16px; } .doctors__item-specialty { display: flex; flex-direction: column; align-items: center; } .doctors__item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .doctors__item-actions a { width: 100%; margin: 0px; } .doctors__item-actions a.btn { max-width: none; } .doctors-small-container { position: relative; padding: 0 90px; } .doctors-small-container .swiper { padding: 20px 0; } .doctors-small-container .swiper-slide { display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .doctors-small-container .swiper-slide:not(.swiper-slide-active) { filter: grayscale(100%); opacity: 0.6; transform: scale(0.9); } .doctors-small-container .swiper-slide.swiper-slide-active { filter: grayscale(0%); opacity: 1; transform: scale(1.1); z-index: 1; } .doctors-slider-small-img img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; background-color: var(--border-grey); } .doctors__item-actions { margin-bottom: 0px; } } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } /* Navigation font end */ .social-block__title { margin-bottom: 11px; } .social-block__subtitle { max-width: 780px; margin-bottom: 51px; line-height: 19.6px; } .social-block__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .social-block__item { width: 100%; max-width: none; align-self: stretch; background-color: var(--light-background); border-radius: 16px; display: flex; align-items: center; justify-content: flex-start; padding: 20px 21px; min-height: 90px; } .social-block__item:hover .social-block__item-icon svg { fill: var(--light-background); } .social-block__item:hover .social-block__item-icon--vk { background-color: var(--vk); } .social-block__item:hover .social-block__item-icon--ok { background-color: var(--ok); } .social-block__item:hover .social-block__item-icon--youtube { background-color: var(--youtube); } .social-block__item:hover .social-block__item-icon--with-color::after { opacity: 1; } .social-block__item:hover .social-block__item-icon--with-color .social-block__item-svg { opacity: 0; } .social-block__item:hover .social-block__item-icon--with-color .social-block__item-svg--hover { opacity: 1; } .social-block__item:hover .social-block__item-icon--facebook { background-color: var(--facebook); } .social-block__item:hover .social-block__item-icon--viber { background-color: var(--viber); } .social-block__item:hover .social-block__item-icon--whatsapp { background-color: var(--whatsapp); } .social-block__item:hover .social-block__item-icon--telegram { background-color: var(--telegram); } .social-block__item:hover .social-block__item-notice span:last-child { opacity: 1; } .social-block__item:hover .social-block__item-name svg { fill: var(--grey-font); stroke: var(--grey-font); } .social-block__item-icon { width: 100%; max-width: 48px; min-width: 48px; height: 48px; background-color: var(--grey-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; position: relative; transition: background-color 0.2s ease; } .social-block__item-icon--vk svg { fill: var(--vk); } .social-block__item-icon--ok svg { fill: var(--ok); } .social-block__item-icon--youtube svg { fill: var(--youtube); } .social-block__item-icon--with-color::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; opacity: 0; transition: opacity 0.2s ease; } .social-block__item-icon--with-color .social-block__item-svg { fill: var(--light-background); } .social-block__item-icon--with-color .social-block__item-svg--hover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s ease; } .social-block__item-icon--insta::after { background: var(--instagram); } .social-block__item-icon--rutube::after { background: var(--rutube); } .social-block__item-icon--max::after { background: var(--max); } .social-block__item-icon--facebook svg { fill: var(--facebook); } .social-block__item-icon--tiktok::after { background: var(--tiktok); } .social-block__item-icon--viber svg { fill: var(--viber); } .social-block__item-icon--whatsapp svg { fill: var(--whatsapp); } .social-block__item-icon--telegram svg { fill: var(--telegram); } .social-block__item-icon:hover svg { fill: var(--light-background); } .social-block__item-svg { width: 24px; height: 24px; position: relative; z-index: 2; } .social-block__item-svg--hover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .social-block__item-name { line-height: 19.6px; margin-bottom: 6px; display: flex; align-items: center; } .social-block__item-name svg { max-width: 16px; height: 16px; fill: var(--border-grey); stroke: var(--border-grey); margin-left: 5px; } .social-block__item-name svg:hover { fill: var(--dark-font) !important; stroke: var(--dark-font) !important; } .social-block__item-notice { line-height: 19.6px; color: var(--grey-font); } .social-block__item-notice span:last-child { padding-left: 3px; opacity: 0; transition: opacity 0.2s ease; } .social-block__item-notice span:first-child { opacity: 1; padding-left: 0; } .social-block__item--empty { background-color: rgba(255, 255, 255, 0); border: 1.5px dashed var(--border-grey); } .social-block__info { position: relative; pointer-events: visible; z-index: 1; } @media (max-width: 1560px) { .social-block__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1156px) { .social-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .social-block__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 800px) { .social-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .social-block.content-block.content-block--grey { padding: 40px 0px; } .social-block__title.title { padding: 0px 12px; } .social-block__subtitle { padding: 0px 12px; text-align: center; margin-bottom: 32px; } .social-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0px 12px; padding: 0px; } .social-block__item { margin: 0px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .social-block__item-icon { margin: 0px; } .social-block__item-info { width: 100%; display: flex; flex-direction: column; align-items: center; } .social-block__item-notice { text-align: center; } .social-block__item-notice span:last-child { opacity: 1; } } @media (max-width: 480px) { .social-block__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .social-block__item { height: 72px; display: flex; flex-direction: row; padding: 12px 0px 12px 12px; overflow: hidden; } .social-block__item-icon { min-width: 48px; width: 48px; } .social-block__item-info { align-items: start; white-space: nowrap; } .social-block__item-follower { display: none; } } .social-block__item-svg.rutube-icon, .social-block__item-svg.instagram-icon, .social-block__item-svg.tiktok-icon, .social-block__item-svg.max-icon { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .social-block__item-svg.rutube-icon { fill: var(--webkit-rutube); } .social-block__item-svg.instagram-icon { fill: var(--webkit-instagram); } .social-block__item-svg.tiktok-icon { fill: var(--webkit-tiktok); } .social-block__item-svg.max-icon { fill: var(--webkit-max); } .about-company__title { margin-bottom: 48px; } .about-company__wrapper { display: flex; align-items: flex-start; justify-content: space-between; } .about-company__descr { width: 100%; max-width: 612px; margin-right: 24px; } .about-company__descr p { margin-bottom: 20px; margin-top: 0; } .about-company__descr p:last-of-type { margin-bottom: 0; } .about-company__descr ul { margin-top: 48px; margin-bottom: 48px; } .about-company__decor { display: flex; width: 100%; max-width: 692px; } .about-company__tizer { width: 100%; max-width: 338px; min-width: 338px; align-self: stretch; border-radius: 24px; overflow: hidden; } .about-company__tizer-slider { height: 100%; } .about-company__tizer-slider .swiper-pagination-bullets { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; box-shadow: none; padding: 0; } .about-company__tizer-wrap { padding: 41px 47px; border-radius: 24px; background-color: var(--light-background); height: 100%; min-height: 566px; } .about-company__tizer-icon { width: 90px; height: 90px; margin: 0 auto 32px; position: relative; display: flex; align-items: center; justify-content: center; } .about-company__tizer-icon::after { display: block; content: ""; border-radius: 50%; border: 1.5px solid var(--border-grey); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-company__tizer-icon svg { stroke: var(--main); width: 48px; height: 48px; } .about-company__tizer-title { text-align: center; margin-bottom: 32px; } .about-company__tizer-subtitle, .about-company__tizer-text { text-align: center; } .about-company__tizer-subtitle { margin-bottom: 20px; } .about-company__images { margin-left: 16px; width: 100%; max-width: 338px; } .about-company__images-wrap { width: 100%; } .about-company__images-wrap img { width: 100%; } .about-company__images-top, .about-company__images-bottom { height: 277px; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .about-company__images-top { margin-bottom: 16px; } .about-company__images-logo { background-color: var(--light-background); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .about-company__images-logo img { max-height: 50px; } .about-company__images-wrap { border-radius: 24px; } .about-company__images-wrap img { border-radius: 24px; } @media (max-width: 1200px) { .about-company__decor { display: flex; flex-direction: column; align-items: center; gap: 16px; } .about-company__tizer { width: 100%; max-width: 500px; } .about-company__images { display: none; } } @media (max-width: 1000px) { .about-company__title.title { text-align: center; } .about-company__tizer { width: 100%; max-width: 400px; } .about-company__images { display: none; } } @media (max-width: 800px) { .about-company.content-block.content-block--grey { padding: 40px 0px; } .about-company__wrapper { margin: 0px 12px; display: flex; flex-direction: column; align-items: center; gap: 48px; } .about-company__descr { margin: 0px; } .about-company__decor { display: flex; flex-direction: column; align-items: center; gap: 16px; } .about-company__tizer { width: 100%; max-width: none; } .about-company__images { display: flex; flex-direction: column; margin: 0px; max-width: none; } } @media (max-width: 800px) { .about-company { border-radius: 32px; } } @media (max-width: 640px) { .about-company { border-radius: 32px; } } .photos__head { display: flex; align-items: flex-start; justify-content: space-between; } .photos__head.adaptive { display: none; } .photos__title { max-width: 692px; } .photos__title h2 { margin-bottom: 16px; } .photos__side { display: flex; align-items: flex-start; } .photos__ratings { margin-right: 145px; } .photos__subtitle { line-height: 19.6px; } .photos__advantages { margin-top: 48px; } .photos__advantages-list { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin: -12px -8px; } .photos__advantages-item { max-width: 336px; width: 100%; margin: 12px 8px; display: flex; align-items: center; justify-content: flex-start; } .photos__advantages-icon { width: 100%; max-width: 48px; height: 48px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-radius: 50%; overflow: hidden; margin-right: 18px; display: flex; align-items: center; justify-content: center; } .photos__advantages-icon svg { width: 24px; height: 24px; } .photos__advantages-text { line-height: 19.6px; } .photos__list { margin-top: 48px; display: flex; } .photos__list-wrap { display: flex; align-items: flex-start; margin: -8px; flex-wrap: wrap; } .photos__item { cursor: pointer; margin: 8px; width: 267px; height: 186px; border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; will-change: transform; transition: transform 0.22s ease; } .photos__item::before { content: ""; position: absolute; inset: 0; background-image: var(--photo-bg); background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(1.02); transition: transform 0.28s ease; z-index: 0; } .photos__item:hover { transform: scale(1.01); z-index: 2; } .photos__item:hover::before { transform: scale(1.08); } .photos__item--empty { border: 1.5px dashed var(--border-grey); } .photos__item--empty::before { display: none; } .photos__item-img { display: flex; align-items: center; justify-content: center; } .photos__item-img img { border-radius: 16px; } .photos__item-open { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; top: 0; left: 0; cursor: pointer; z-index: 1; } .photos__item-open div { color: var(--light-font); line-height: 19.6px; text-align: center; max-width: 175px; } .photos__video { width: 100%; max-width: 546px; border-radius: 16px; overflow: hidden; position: relative; z-index: 1; background-repeat: no-repeat; background-size: cover; margin-left: 20px; } .photos__video::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(22.1000003815px); backdrop-filter: blur(22.1000003815px); z-index: 1; } .photos__video-info { margin-top: 69px; margin-bottom: 54px; position: relative; z-index: 2; color: var(--light-font); } .photos__video-icon { margin: 0 auto; width: 48px; } .photos__video-icon svg { width: 48px; height: 48px; } .photos__video-title { line-height: 33.6px; text-align: center; margin-top: 49px; margin-bottom: 4px; } .photos__video-subtitle { line-height: 22.4px; text-align: center; max-width: 355px; margin: 0 auto 26px; } .photos__video-action { margin: 0 auto; max-width: 200px; } .photos__video-action a { display: inline-block; border-radius: 12px; color: var(--light-font); border: 1.5px solid rgba(255, 255, 255, 0.3); line-height: 19.6px; text-align: center; width: 100%; padding: 21px 0; } .photos__full-img { display: flex; justify-content: center; align-items: center; height: 100%; border-radius: 12px; overflow: hidden; } .photos__full-img img { border-radius: 12px; } .popup-content.popup-image-content { background: transparent; box-shadow: none; } @media (max-width: 900px) { .photos.content-block.content-block--grey { padding: 40px 0px; background-color: var(--light-background); } .photos__head.adaptive { order: 1; display: flex; flex-direction: column; align-items: center; } .photos__head.desktop { order: 3; display: flex; flex-direction: column; align-items: center; margin-top: 40px; } .photos__title { padding: 0px 24px; } .photos__title.desktop { display: none; } .photos__title.title { text-align: center; } .photos__side { display: flex; flex-direction: column; align-items: center; } .photos__subtitle { text-align: center; } .photos__advantages { order: 2; width: 100%; padding: 0px 24px; } .photos__advantages-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); justify-content: space-between; margin: 0px; gap: 12px; } .photos__advantages-item { display: flex; flex-direction: column; align-items: center; margin: 0px; } .photos__advantages-icon { margin: 0px; margin-bottom: 10px; } .photos__advantages-text { text-align: center; } .photos__list { order: 4; display: flex; flex-direction: column; width: 100%; } .photos__list--with-video { display: flex; flex-direction: column; width: 100%; padding: 0px 12px; } .photos__list-wrap { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0px; margin-bottom: 30px; } .photos__item { width: 100%; height: 120px; margin: 0px; } .photos__video { margin-left: 0px; width: 100%; max-width: none; } .photos__link { margin-top: 40px; } .photos__ratings.ratings-short { width: 100%; margin: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ratings-short__wrap { display: flex; flex-direction: column; align-items: center; } .ratings-short__summary { margin: 0px; margin-top: 20px; } .ratings-short__summary-note { text-align: center; } .popup-content.popup-image-content { margin: auto 0px; max-width: 350px; width: 100%; padding: 10px 12px; } } @media (max-width: 420px) { .photos__list-wrap { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0px; margin-bottom: 30px; } } .dmc-block__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 72px; } .dmc-block__title h2 { margin-bottom: 16px; } .dmc-block__list { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -8px; } .dmc-block__item { width: 100%; max-width: 220px; height: 80px; display: flex; align-items: center; justify-content: center; background-color: var(--light-background); border-radius: 16px; overflow: hidden; margin: 8px; } .dmc-block__item img { max-width: 148px; } .dmc-block__item--empty { border: 1.5px dashed var(--border-grey); background-color: rgba(255, 255, 255, 0); } @media (max-width: 900px) { .dmc-block__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; padding-right: 12px; } .dmc-block__item { max-width: none; } } @media (max-width: 640px) { .dmc-block.content-block.content-block--grey { padding: 24px 0px; } .dmc-block__wrap.container { padding: 0px 12px; height: -moz-fit-content; height: fit-content; } .dmc-block__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; } .dmc-block__subtitle.font-main { padding: 0px 12px; text-align: center; } .dmc-block__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 0px; padding-right: 0px; } .dmc-block__item { margin: 0px; } .dmc-block__title { text-align: center; } .dmc-block__action { width: 100%; display: flex; justify-content: center; } .dmc-block__action .btn.btn--link { max-width: 300px; width: 100%; } .dmc-block__item { padding: 16px; } .dmc-block__item > img { width: 100%; } } @container dmcContainer (max-width: 640px) { .dmc-block__title { text-align: center; } .dmc-block.content-block.content-block--grey { margin: 0px; padding: 24px 0px; border-radius: 32px; } .dmc-block__wrap.container { padding: 0px 12px; height: -moz-fit-content; height: fit-content; } .dmc-block__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; } .dmc-block__subtitle.font-main { padding: 0px 12px; text-align: center; } .dmc-block__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 0px; padding-right: 0px; } .dmc-block__item { margin: 0px; } .dmc-block__action { width: 100%; } .dmc-block__action .btn.btn--link { max-width: none; width: 100%; } } .choose-clinic__wrap { background-color: var(--light-background); padding: 32px 40px; border-radius: 48px; display: flex; align-items: flex-start; justify-content: space-between; } .choose-clinic__title { margin-bottom: 32px; } .choose-clinic__content { width: 100%; max-width: 582px; margin-top: 32px; margin-left: 54px; } .choose-clinic__navigation { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .choose-clinic__arrows { margin-left: 20px; } .choose-clinic__arrows .btn svg { width: 14px; height: 14px; } .choose-clinic__item-title { line-height: 25px; margin-bottom: 32px; } .choose-clinic__item-text { line-height: 19.6px; } .choose-clinic__item-text .choose-content__wrap { display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 16px; } .choose-clinic__item-text .choose-content__wrap:last-child { margin-bottom: 0; } .choose-clinic__item-text .choose-content__text { position: relative; margin: 0; } .choose-clinic__item-text .choose-content__text-icon { width: 100%; max-width: 24px; height: 24px; margin-right: 5px; } .choose-clinic__pagination { display: flex; align-items: center; justify-content: flex-start; } .choose-clinic__step { width: 70px; display: flex; align-items: center; justify-content: space-between; margin-right: 13px; } .choose-clinic__step:last-child { margin-right: 0; } .choose-clinic__step:last-child .choose-clinic__step-icon { display: none; } .choose-clinic__step.swiper-pagination-bullet-active .choose-clinic__step-num { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); color: var(--light-font); } .choose-clinic__step-num { width: 100%; max-width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--main-font); background: var(--grey-background); line-height: 20px; cursor: pointer; } .choose-clinic__step-icon { width: 6px; height: 11px; stroke: var(--border-grey); } .choose-clinic__image { width: 100%; max-width: 620px; display: flex; align-items: center; justify-content: center; border-radius: 32px; margin-bottom: -32px; } .choose-clinic__image img { border-radius: 24px; } @media (max-width: 640px) { .choose-clinic__wrap.container.active { margin-top: 32px; } .choose-clinic__title.title { padding: 0px 48px 0px 12px; text-align: start; } .choose-clinic__arrows { display: none; } .choose-clinic__navigation { display: flex; flex-direction: row; justify-content: center; } .choose-clinic.content-block.content-block--grey { position: relative; padding: 0px; background-color: var(--light-background); margin: 0px; } .choose-clinic__wrap.container { max-width: 100%; display: flex; flex-direction: column; align-items: center; padding: 12px; margin: 0px auto; border-radius: 32px; background-color: var(--grey-background); } .choose-clinic__content { order: 2; padding-top: 32px; border-radius: 32px 32px 32px 32px; margin: 0px; position: relative; z-index: 2; background-color: var(--light-background); opacity: 1; margin-top: -50px; } .choose-clinic__image { transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0.2; border-radius: 32px 32px 0px 0px; transition-delay: 1s; } .choose-clinic__image img { border-radius: 32px 32px 0px 0px; } .choose-clinic__image.active { transform: translateY(0%); opacity: 1; } .choose-clinic__steps { padding: 0px 12px; margin-bottom: 12px; } } .reviews__container { background-color: var(--light-background); border-radius: 50px; padding: 64px 0; } .reviews__head { margin-bottom: 58px; display: flex; align-items: center; justify-content: space-between; } .reviews-title.mobile { display: none; } .reviews__wrap { display: flex; align-items: flex-start; justify-content: space-between; } .reviews__aside { width: 100%; max-width: 338px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .reviews__ratings { padding: 32px; background-color: var(--grey-background); border-radius: 24px; overflow: hidden; } .reviews__ratings-icon { width: 90px; height: 90px; margin: 0 auto 15px; position: relative; display: flex; align-items: center; justify-content: center; } .reviews__ratings-icon svg { stroke: var(--main); width: 48px; height: 48px; } .reviews__ratings-icon::after { display: block; content: ""; border-radius: 50%; border: 1.5px solid var(--border-grey); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .reviews__ratings-wrap .ratings-aside__users { max-width: 200px; margin: 0 auto 18px; } .reviews__ratings-wrap .ratings-aside__review-link { position: static; margin-top: 16px; justify-content: center; width: 100%; } .reviews__ratings-wrap .ratings-aside__review-link .btn { max-width: -moz-fit-content; max-width: fit-content; } .reviews__form { padding: 32px; background-color: var(--grey-background); border-radius: 24px; } .reviews__form-title { text-align: center; margin: 0 auto 16px; } .reviews__form-subtitle { text-align: center; } .reviews__form-action { margin-top: 16px; display: flex; justify-content: center; } .reviews__form__mobile { display: none; } .reviews__content { max-width: 760px; width: 100%; align-self: stretch; } .reviews__content-widgets { border-radius: 16px; height: 100%; } .reviews-widget { width: -moz-fit-content; width: fit-content; height: auto; max-height: 200px; } @media (max-width: 640px) { .reviews-widget { display: block; margin: 0 auto; width: -moz-fit-content; width: fit-content; } } @media (max-width: 640px) { .container.container--small { display: flex; flex-direction: column; } .reviews { border-radius: 48px; } .reviews__head { display: none; } .reviews-title.mobile { text-align: center; display: block; margin-top: 33px; margin-bottom: 8px; line-height: 30px; } .reviews__wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; } .reviews__ratings { background-color: var(--light-background); } .reviews__form { display: none; background-color: var(--light-background); } .reviews__form__mobile { display: block; } .reviews__form-action { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .reviews__form-action a { width: 227px; height: 60px; max-width: none; } .reviews__wrap { margin-top: 10px; } .reviews-aside__review-link { display: none; } .reviews__container.container { padding: 12px 0px; margin: 12px; } .reviews.content-block.content-block--grey { padding: 0px; } .reviews__form-action { margin-bottom: 24px; } .reviews.content-block.content-block--grey { padding: 1px 0px; } } .price-for-seo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .promotion-block { height: -moz-fit-content; height: fit-content; margin-top: 32px; padding: 0px; width: 100%; background-color: none; } .promotion-block.content-block--grey.container { border-radius: 50px; } .promotion-block__container { border-radius: 32px; background-color: var(--main); padding: 0px; display: flex; align-items: start; overflow: visible; } .promotion-block__info { border: 1px solid var(--grey-background); background-color: var(--grey-background); border-radius: 32px; width: 100%; padding: 10px 24px 10px 16px; margin-left: -1px; display: flex; flex-direction: row; justify-content: start; align-items: center; height: 100%; max-height: none; min-height: 192px; } .promotion-block__description { height: -moz-fit-content; height: fit-content; min-height: 151px; display: flex; flex-direction: column; gap: 16px; } .promotion-block__wrap { justify-content: space-between; width: 100%; } .promotion-block__price { display: flex; line-height: 25.2px; } .promotion-block__price-old { text-decoration: line-through; color: var(--grey-font); margin-right: 16px; } .promotion-block__price-new { color: var(--main); } .promotion-block__date { padding: 32px 32px 0 32px; display: flex; flex-direction: column; height: 100%; gap: 16px; width: 100%; } .promotion-block__date > div { display: flex; align-items: center; } .promotion-block__date-end { color: var(--light-font); justify-content: start; } .promotion-block__date-end svg { min-width: 24px; width: 24px; height: 24px; } .promotion-block__date-wrap { display: flex; align-items: flex-start; margin: -2px; max-width: 333px; width: 100%; } .promotion-block__date-col { width: 100%; max-width: 80px; margin: 2px; } .promotion-block__date-value { background-color: var(--light-background); border-radius: 14px; line-height: 44.8px; text-align: center; color: var(--main-font); padding: 10px 0 9px; margin-bottom: 4px; } .promotion-block__date-sign { line-height: 19.6px; text-align: center; color: var(--light-font); } .promotion-block__btn.btn { padding: 22px 24px; line-height: 19.6px; } .promotion-block__image { max-width: 256px; height: 256px; position: relative; margin-right: 10px; margin-left: 0px; padding: 0px; width: 100%; overflow: visible; z-index: 1; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .promotion-block__image img { width: auto; height: auto; max-width: 100%; max-height: 256px; -o-object-fit: contain; object-fit: contain; padding: 0px; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); } .promotion-block__image.active { opacity: 1; transform: translateY(0); } .promotion-block__container { min-height: 192px; } .promotion-block__image active { height: 100%; } .promotion-block__date-end { display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 12px; } .promotion-block__date > div:first-of-type { gap: 12px; align-items: start; } .promotion-block__image { min-width: 180px; } @media (max-width: 1000px) { .promotion-block__container { display: flex; flex-direction: column; height: auto; min-height: 606px; overflow: visible; } .promotion-block__info { height: auto; min-height: 390px; display: flex; flex-direction: column; justify-content: end; gap: 18px; align-items: center; padding: 0px 48px; width: calc(100% + 2px); margin-left: -1px; margin-top: -1px; max-width: none; } .promotion-block__image { max-width: 256px; display: flex; margin-top: 0px; margin-left: 0; height: 256px; } .promotion-block__image img { padding: 0px; margin: 0px; position: relative; height: auto; width: auto; max-width: 100%; max-height: 256px; -o-object-fit: contain; object-fit: contain; left: 50%; transform: translate(-50%, 0); top: 0; } .promotion-block__description { margin-bottom: 36px; gap: 16px; min-height: 130px; } .promotion-block__title { text-align: center; } .promotion-block__subtitle { text-align: center; } .promotion-block__date { display: flex; flex-direction: column; align-items: center; padding: 32px; gap: 16px; } .promotion-block__date-wrap { margin-bottom: 30px; } .promotion-block__date > div:first-of-type { display: flex; flex-direction: column; justify-content: center; align-items: center; } .promotion-block__date-end { margin-bottom: 12px; } .promotion-block__price { justify-content: center; } } @container promoContainer (max-width: 1000px) { .promotion-block__container { display: flex; flex-direction: column; height: auto; min-height: 606px; overflow: visible; } .promotion-block__info { height: auto; min-height: 390px; display: flex; flex-direction: column; justify-content: end; gap: 18px; align-items: center; padding: 0px 48px; width: calc(100% + 2px); margin-left: -1px; margin-top: -1px; max-width: none; } .promotion-block__image { max-width: 256px; display: flex; margin-top: 0px; margin-left: 0; height: 256px; } .promotion-block__image img { padding: 0px; margin: 0px; position: relative; height: auto; width: auto; max-width: 100%; max-height: 256px; -o-object-fit: contain; object-fit: contain; left: 50%; transform: translate(-50%, 0); top: 0; } .promotion-block__description { margin-bottom: 36px; gap: 16px; min-height: 130px; } .promotion-block__title { text-align: center; } .promotion-block__subtitle { text-align: center; } .promotion-block__date { display: flex; flex-direction: column; align-items: center; padding: 32px; gap: 16px; } .promotion-block__date-wrap { margin-bottom: 30px; } .promotion-block__date > div:first-of-type { display: flex; flex-direction: column; justify-content: center; align-items: center; } .promotion-block__date-end { margin-bottom: 12px; } .promotion-block__price { justify-content: center; } } .clinic-label { margin-top: 24px; min-height: 56px; height: -moz-fit-content; height: fit-content; align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } .clinic-label > span { width: 114px; color: var(--grey-font); } .clinic-label__item { display: flex; align-items: center; gap: 12px; padding: 16px; min-width: 150px; width: -moz-fit-content; width: fit-content; border: 1px solid var(--border-grey); border-radius: 12px; } .clinic-label__item-address { color: var(--main-font); } .clinic-label__item:hover { background-color: color-mix(in srgb, var(--border-grey) 20%, transparent); } .clinic-label.promotion > span { min-width: 150px; } @media (max-width: 640px) { .clinic-label.doctor-banner-label > span { white-space: nowrap; } } @media (max-width: 1400px) { .clinic-label { display: flex; } } @media (max-width: 640px) { .clinic-label { flex-direction: column; align-items: start; gap: 10px; margin-bottom: 24px; } } .promotion-select__wrap { display: flex; flex-direction: row; min-height: 240px; height: -moz-fit-content; height: fit-content; width: 100%; gap: 12px; } .promotion-select__head { flex: 0.6; max-width: 803px; min-height: 240px; height: auto; border-radius: 24px; border: 1px solid var(--border-grey); background-color: var(--light-background); display: flex; gap: 12px; } .promotion-select__head-wrap { display: flex; flex-direction: column; gap: 12px; } .promotion-select__head--title { display: flex; flex-direction: column; flex: 0.6; justify-content: space-between; padding: 24px; border-radius: 24px 0 0 24px; } .promotion-select__head--image--full { flex: 0.4; height: 100%; border-radius: 0 24px 24px 0; overflow: hidden; position: relative; cursor: pointer; } .promotion-select__head--image--full img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } .promotion-select__head--image { flex: 0.4; height: 100%; max-height: 256px; border-radius: 0 24px 24px 0; overflow: hidden; position: relative; } .promotion-select__head--image img { height: auto; -o-object-fit: contain; object-fit: contain; width: 100%; max-height: 256px; padding: 12px; } .promotion-select__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; } .promotion-select__content { display: flex; flex-direction: column; justify-content: space-between; flex: 0.4; min-height: 240px; height: auto; border-radius: 24px; border: 1px solid var(--border-grey); padding: 24px; background-color: var(--light-background); } .promotion-select__content-wrap { display: flex; flex-direction: column; gap: 12px; } .promotion-select__content p { margin-bottom: 12px; } @media (max-width: 1600px) { .promotion-select__wrap { display: flex; flex-direction: column; } .promotion-select__head { max-height: 400px; height: -moz-fit-content; height: fit-content; } .promotion-select__head--image--full { height: auto; } .promotion-select__head--image--full::after { display: none; } .promotion-select__head--image { height: auto; } .promotion-select__wrap { background: var(--grey-background); border-radius: 24px; } } @media (max-width: 640px) { .promotion-select__head { display: flex; flex-direction: column-reverse; max-height: none; border: 1px solid transparent; } .promotion-select__head--title { border: 1px solid var(--border-grey); position: relative; z-index: 2; background: var(--light-background); border-radius: 24px; } .promotion-select__head--image--full { height: 256px; overflow: hidden; display: flex; justify-content: center; border-radius: 24px 24px 0px 0px; margin-bottom: -36px; position: relative; z-index: 1; } .promotion-select__head--image--full img { height: 256px; width: 100%; } .promotion-select__head--image { height: 256px; overflow: hidden; display: flex; justify-content: center; border-radius: 24px 24px 0px 0px; margin-bottom: -36px; position: relative; z-index: 1; background: var(--grey-background); } .promotion-select__head--image img { height: 256px; width: 100%; } } .free-consult-hint__asterisk { color: var(--main); cursor: pointer; } .free-consult-hint--history-patient { margin-left: 4px; } .form-main__container { background-color: var(--light-background); padding: 64px 0 0; border-radius: 50px; position: relative; } .form-main__image { max-width: 512px; position: relative; width: 100%; height: 480px; } .form-main__image-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; height: calc(90% + 32px); } .form-main__image-wrap img { height: 100%; max-width: unset; } .form-main__content { display: flex; align-items: stretch; } .form-main__head { width: 100%; max-width: 574px; margin-right: 16px; display: flex; flex-direction: column; position: relative; z-index: 5; } .form-main__title-wrap { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; width: auto; max-width: 100%; position: relative; z-index: 6; } .form-main__title { display: inline; margin: 0; } .form-main__title-hint { display: inline-flex; align-items: baseline; position: relative; z-index: 7; } .form-main__wrap { align-self: stretch; } .form-main__image { margin-top: auto; flex-shrink: 0; } .form-main__form { height: calc(100% - 64px); padding-bottom: 64px; } .form-main.content-block.content-block--grey { background-color: var(--grey-background); } .about-index .form-main.content-block.content-block--grey { background-color: var(--grey-background); } @media only screen and (max-width: 900px) { .about-index .form-main__head, .about-index .form-main__image { max-width: none; width: 100%; } .about-index .form-main.content-block.content-block--grey { padding: 0px 0px; } .about-index .title.form-main__title { order: 2; text-align: center; } .about-index .form-main__container.container { max-width: 692px; padding: 0px 12px; padding-top: 24px; } .about-index .form-main__container { padding: 24px 0px; } .about-index .form-main__content { display: flex; flex-direction: column; } .about-index .form-main__head { display: flex; flex-direction: column; align-items: center; margin: 0px; gap: 32px; } .about-index .form-main__image { order: 1; } .about-index .form-main__image { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; height: 160px; background-color: var(--grey-background); border-radius: 32px; z-index: 1; } .about-index .form-main__image img { top: 15%; left: 50%; transform: translateX(-50%); position: absolute; height: 256px; z-index: 3; } .about-index .form-main__wrap { margin-top: 32px; } } @media only screen and (max-width: 900px) { .form-main.content-block.content-block--grey { padding: 0px 0px; } .title.form-main__title { order: 2; text-align: center; } .form-main__container.container { max-width: 100%; padding: 0px 12px; padding-top: 24px; } .form-main__container { padding: 24px 0px; border-radius: 24px; } .form-main__content { display: flex; flex-direction: column; } .form-main__head { display: flex; flex-direction: column; align-items: center; margin: 0px; gap: 32px; width: 100%; max-width: 900px; } .form-main__title-wrap { justify-content: center; } .form-main__image { order: 1; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; height: 160px; width: 100%; max-width: 900px; background-color: var(--grey-background); border-radius: 24px; z-index: 1; } .form-main__image img { top: 15%; left: 50%; transform: translateX(-50%); position: absolute; height: 256px; z-index: 3; } .form-main__wrap { margin-top: 32px; } .form-main.content-block.content-block--grey { background-color: transparent; } } .form-calculator__container { background-color: var(--light-background); padding: 64px 0 0; border-radius: 50px; position: relative; } .form-calculator__image { max-width: 512px; position: relative; width: 100%; height: 480px; } .form-calculator__image-wrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; height: calc(90% + 32px); } .form-calculator__image-wrap img { height: 100%; max-width: unset; } .form-calculator__content { display: flex; align-items: flex-start; } .form-calculator__head { width: 100%; max-width: 574px; margin-right: 16px; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } .form-calculator__wrap { align-self: stretch; padding-bottom: 65px; } .form-calculator__description { margin-bottom: 32px; line-height: 19.6px; } .form-calculator__fields-wrap { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -16px; } .form-calculator__fields-wrap .form-field:last-of-type { margin-bottom: 16px; } .form-calculator__fields-wrap > div { margin: 16px; max-width: 271px; width: 100%; } .form-calculator__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 120px; gap: 24px; } .form-calculator__button.btn { min-height: 64px; } .form-calculator__result { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 64px; } .form-calculator__result--errors .form-calculator__result-icon svg { stroke: var(--error); } .form-calculator__result-icon { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border-color: var(--border-grey); } .form-calculator__result-icon svg { width: 48px; height: 48px; } .form-calculator__result-title { line-height: 33.6px; text-align: center; margin-bottom: 32px; } .form-calculator__result-descr { line-height: 19.6px; text-align: center; margin: 0 auto; } .form-calculator__result-action { margin-top: 32px; } .form-calculator__form { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .form-calculator__fields-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .form-calculator__actions { margin: 0px; } .form-calculator__title.title { margin-bottom: 24px; } .form-calculator__button { display: flex; align-items: center; justify-content: center; min-height: 64px; gap: 12px; position: relative; } .form-calculator__button.btn.btn--color { min-width: 260px; } @media (max-width: 1440px) { .form-calculator__fields-wrap > div { margin: 8px; } } @media (max-width: 1366px) { .form-calculator__fields-wrap > div { margin: 0px; } } @media (max-width: 1280px) { .form-calculator__fields-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; } .form-calculator__actions { display: flex; flex-direction: column; gap: 12px; } .form-calculator__actions > div { text-align: center; } } @media (max-width: 900px) { .form-calculator__container.container { max-width: 100%; padding: 0px 12px; padding-top: 24px; } .form-calculator__container { padding: 24px 0px; } .form-calculator__content { display: flex; flex-direction: column; } .form-calculator__head { display: flex; flex-direction: column; align-items: center; margin: 0px; gap: 32px; } .form-calculator__image { order: 1; } .form-calculator__image { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; height: 160px; background-color: var(--grey-background); border-radius: 32px; z-index: 1; } .form-calculator__image img { top: 15%; left: 50%; transform: translateX(-50%); position: absolute; height: 256px; z-index: 3; } .form-calculator__wrap { margin-top: 32px; padding-bottom: 24px; } .form-calculator__fields { display: flex; flex-direction: column; align-items: center; } .form-calculator__fields-wrap { width: 100%; } .form-calculator__fields-wrap div { margin-left: 0px; margin-right: 0px; max-width: none; } .form-calculator__fields-select { width: 100%; margin: 16px 0px; } .form-calculator__actions { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 48px; } .form-calculator__description { text-align: center; } .form-calculator__actions { margin: 0px; align-items: start; gap: 24px; } .form-calculator__image, .form-calculator__head { width: 100%; max-width: none; } .form-calculator__title.title { order: 2; text-align: center; } .form-calculator__result.form-calculator__result--success { margin: 24px 0px; } .form-calculator__result.form-calculator__result--errors { margin: 24px 0px; } } @media (max-width: 640px) { .form-calculator__button.btn.btn--color { max-width: none; width: 100%; } } .form-v2__container { display: flex; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; } .form-v2__content { background-color: var(--light-background); padding: 32px 32px 64px; width: 100%; max-width: 692px; } .form-v2__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-direction: column; padding: 0px 32px; gap: 24px; } .form-v2__image { position: relative; background-color: var(--grey-background); height: 160px; max-width: none; width: 100%; } .form-v2__image-wrap { position: absolute; bottom: 0; width: 100%; left: 50%; transform: translateX(-50%); height: calc(100% + 67px); overflow: hidden; } .form-v2__image-wrap img { width: 100%; height: 100%; max-width: 100%; margin: 0 auto; display: block; } .form-v2__title { margin-left: 32px; } .form-v2__title-wrap { display: flex; align-items: flex-start; gap: 6px; width: -moz-fit-content; width: fit-content; max-width: 100%; } .form-v2__title-hint { display: inline-flex; align-items: flex-start; padding-top: 2px; } .form-v2__form { padding: 0 32px; } .form-v2__list { padding: 32px; width: 100%; display: flex; flex-direction: column; } .form-v2__list-title { padding: 35px 32px; margin-bottom: 32px; } .form-v2__list-title .title { max-width: 268px; width: 100%; max-width: none; } .form-v2__list-text { padding: 0px 32px; } .form-v2__list-item { margin-bottom: 48px; } .form-v2__list-name { line-height: 19.6px; margin-bottom: 8px; } .form-v2__content { border-radius: 64px; } .form-v2__image { border-radius: 32px; } .form-v2__image-wrap img { -o-object-fit: contain; object-fit: contain; } @media (max-width: 900px) { .form-v2__container.container { display: flex; flex-direction: column; align-items: center; } .form-v2.content-block.content-block--grey { padding: 12px 0px 40px 0px; } .form-v2__title.title { text-align: center; margin: 0px; } .form-v2__title-wrap { justify-content: center; } .form-v2__head { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0px; } .form-v2__content { padding: 24px 24px; } .form-v2__image { max-width: none; } .form-v2__list { padding-bottom: 0px; } .form-v2__list-list { margin: 0px; padding: 0px; gap: 24px; } .form-v2__list-title { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0px; } .form-v2__list-text { text-align: center; padding: 0px; } .form-v2__content { border-radius: 24px; } .form-v2__image { border-radius: 24px; } } .form-v3 { background-color: var(--light-background); border: 1px solid var(--border-grey); } .form-v3.content-block { padding: 64px 118px 0; } .form-v3.content-block.container { position: relative; } .form-v3__container { display: flex; flex-direction: row; justify-content: space-between; gap: 16px; min-height: 512px; height: -moz-fit-content; height: fit-content; } .form-v3__content { display: flex; flex-direction: column; gap: 24px; flex: 0.5; min-width: 0; height: 100%; position: relative; z-index: 5; } .form-v3__form { flex: 0.5; min-width: 0; width: 100%; height: 100%; } .form-v3__form .inline-form-2 { width: 100%; max-width: 100%; } .form-v3__form .inline-form-2__form, .form-v3__form .inline-form-2__form-bottom { height: auto; } .form-v3__form .inline-form-2__fields, .form-v3__form .inline-form-2__actions { flex-wrap: wrap; } .form-v3__form .inline-form-2__button { min-width: 0; } .form-v3__title { max-width: 510px; line-height: 140%; margin: 0px; } .form-v3__title-wrap { display: flex; align-items: flex-start; gap: 6px; width: -moz-fit-content; width: fit-content; max-width: 100%; position: relative; z-index: 6; } .form-v3__title-hint { display: inline-flex; align-items: flex-start; padding-top: 2px; position: relative; z-index: 7; } .form-v3__image { position: relative; z-index: 1; bottom: 0px; max-width: 512px; max-height: 480px; } .form-v3__image img { position: relative; z-index: 2; max-width: 512px; max-height: 480px; -o-object-fit: cover; object-fit: cover; } .form-v3__form { margin-bottom: 24px; } @media (max-width: 1440px) { .form-v3.content-block { gap: 16px; padding: 48px; display: flex; flex-direction: row-reverse; align-items: end; } .form-v3.content-block > div { flex: 1; } .form-v3__container { flex-direction: column; height: auto; } .form-v3__image { position: relative; max-width: none; max-height: none; margin-bottom: -48px; } } @media (max-width: 1080px) { .form-v3__image { display: none; } } @media (max-width: 640px) { .form-v3__title { margin-bottom: 16px; text-align: center; } .form-v3__title-wrap { width: 100%; justify-content: center; } .form-v3__image { position: absolute; width: 100%; display: flex; justify-content: center; position: relative; z-index: 0; margin-bottom: 0px; min-height: 290px; max-height: 290px; overflow: hidden; background: var(--grey-background); border-radius: 24px 24px 0px 0px; margin-bottom: -24px; } .form-v3__image img { position: relative; z-index: 1; max-width: 80%; width: auto; max-height: 280px; } .form-v3.content-block { display: flex; flex-direction: column-reverse; align-items: center; padding: 0px; border: 1px solid transparent; border-radius: 24px; gap: 0px; } .form-v3__container { position: relative; z-index: 1; border: 1px solid var(--border-grey); background: var(--light-background); border-radius: 24px; } .form-v3__container { padding: 48px 0px 24px 0px; } .form-v3__content { padding: 0px 24px; } .form-v3__form { padding: 0px 0px; } .inline-form-2.form-v3__form { padding: 0px 24px; } } .form-no-image { border: 1px solid var(--border-grey); padding: 32px; display: flex; flex-direction: column; gap: 16px; } .form-no-image__content { width: 100%; height: -moz-fit-content; height: fit-content; } .form-no-image__title { height: -moz-fit-content; height: fit-content; } .form-no-image__title-wrap { display: flex; align-items: flex-start; gap: 6px; width: -moz-fit-content; width: fit-content; max-width: 100%; } .form-no-image__title-hint { display: inline-flex; align-items: flex-start; padding-top: 2px; } .form-no-image__wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; height: auto; } .form-no-image__notice { background-color: var(--grey-background); width: -moz-fit-content; width: fit-content; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; } .form-no-image__notice p { margin: 0px; } @charset "UTF-8"; .banner { display: flex; flex-direction: column; align-items: center; padding: 0px; margin: 0px; width: 100%; overflow: visible; margin-bottom: 16px; } .banner__wrap { min-height: 462px; height: -moz-fit-content; height: fit-content; width: 100%; margin: 0 auto; flex-direction: column; justify-content: end; align-items: center; display: flex; border-radius: 57px; background-size: cover; background-position: center; position: relative; z-index: 0; overflow: hidden; } .banner__wrap.shadow::after { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 57px; background: linear-gradient(290.92deg, rgba(22, 27, 33, 0) 44.34%, var(--main-font-gradient) 100.01%); top: 0; left: 0; z-index: 1; } .banner__container { width: 100%; height: 100%; padding: 0px; margin: 0 auto; display: flex; justify-content: flex-start; max-width: 1400px; justify-content: space-between; padding: 0px; margin: 0px; align-items: end; } .banner__content { max-width: 692px; padding-top: 205px; padding-bottom: 48px; } .banner__content.container { position: relative; z-index: 2; padding-left: 0px; padding-right: 0px; margin: 0px; } .banner__content.container .banner__actions { min-height: 40px; } .banner__title { color: var(--light-font); margin: 0; } .banner__subtitle { color: var(--light-font); } .banner__description { margin-top: 16px; line-height: 22.4px; color: var(--light-font); } .banner__advantages { margin-top: 16px; } .banner__advantages-list { display: flex; align-items: center; flex-wrap: wrap; margin: -8px -12px; } .banner__advantages-item { display: flex; align-items: center; max-width: 45%; margin: 8px 12px; } .banner__advantages-icon { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-right: 4px; } .banner__advantages-text { font-weight: 600; color: var(--light-font); } .banner__actions { display: flex; align-items: center; margin-top: 24px; } .banner__actions a { position: relative; z-index: 10; } .banner__actions a:first-child { margin-right: 16px; } .banner__actions.mobile { display: none; } .banner__image { display: flex; align-items: flex-end; margin-left: 80px; width: 90%; margin: 0px; transform: translateY(0%); max-width: 600px; max-height: 500px; height: min(80%, 500px); margin: 0px; padding: 0px; } .banner__image img { max-width: 600px; max-height: 500px; height: 100%; } .banner__image img:not([src]), .banner__image img[src=""], .banner__image img:broken { display: none !important; } .banner__image--custom { max-width: none; max-height: none; height: auto; } .banner__image--custom img { max-width: none; max-height: none; height: auto; } .banner.active-dark .banner__title .title--banner { color: var(--main-font); } .banner.active-dark .banner__title .subtitle--banner { color: var(--main-font); } .banner.active-dark .banner__title h2 { color: var(--main-font); } .banner.active-dark .banner__title h3 { color: var(--main-font); } .banner.active-dark .banner__description { color: var(--main-font); } .banner.active-dark .banner__advantages-text { color: var(--main-font); } .banner__actions.children_banner .btn:first-child { background: var(--child-main-color); color: var(--main-font); } .banner__actions.children_banner .btn:first-child svg { fill: var(--main-font); } .banner__actions.children_banner .btn:first-child:hover { background: var(--child-main-color); color: var(--main-font); } .banner__actions.children_banner .btn:first-child:after { background: var(--child-main-color); color: var(--main-font); } .banner__free_consult_text { margin-top: 12px; color: var(--light-font); } @media (max-width: 1560px) { .banner__container { padding: 0 48px; } } @media (max-width: 1280px) { .banner__children-icon-star--one { width: 20px; height: 20px; left: 10px; top: -35px; } .banner__children-icon-star--two { display: none; } .banner__wrap.children-banner .banner__image-child > div { height: 450px; width: 450px; } } @media (max-width: 1160px) { .banner__wrap { overflow: hidden; } .banner__image { width: 40%; } .banner__children-subtitle { min-width: 130px; } } @media (max-width: 800px) { .banner__children-icon-smile { display: none; } } @media (max-width: 640px) { .banner { padding-top: 50px; } .banner__container { display: flex; flex-direction: column; align-items: center; } .banner__actions.mobile { margin-top: 18px; width: 100%; display: flex; flex-direction: row; gap: 18px; justify-content: space-between; height: 60px; } .banner__actions.mobile a, .banner__actions.mobile span { flex-shrink: 0.9; } .banner__actions.mobile a { gap: 12px; } .banner__actions.mobile a svg { width: 24px; height: 24px; flex-shrink: 0; } .banner__actions.mobile > a:first-child { width: 50%; background-color: var(--grey-background); } .banner__actions.mobile > a:last-child { width: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); color: var(--light-font); } .banner__actions.mobile > a:last-child svg { filter: brightness(0) invert(1); } .banner__actions.mobile.container { display: flex; flex-direction: row; justify-content: center; margin-bottom: 0px; } .banner__actions.mobile.container a { box-shadow: 0px 12px 12px 0px var(--shadow); } .banner__wrap { position: relative; justify-content: start; min-height: 403px; width: 95vw; border-radius: 32px; overflow: hidden; } .banner__wrap.shadow::after { border-radius: 32px; } .banner__wrap::after { border-radius: 32px; } .banner__content { height: -moz-fit-content; height: fit-content; padding: 35px 20px; } .banner__title { position: relative; z-index: 2; width: 100%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; } .banner__image { display: flex; justify-content: center; z-index: 0; width: 80%; margin: 0; } .banner__actions { display: none; } .banner__advantages { display: flex; flex-direction: column; align-items: start; margin-top: 16px; } .banner__advantages-list { margin: 0px; display: flex; flex-direction: column; align-items: start; margin: 0px; } .banner__advantages-item { display: flex; align-items: center; max-width: 80%; margin: 8px 12px; } .banner__advantages-list { display: flex; flex-direction: column; } .banner__actions.mobile.container { display: flex; } .banner__actions.mobile.container .btn { width: 100%; max-width: 100%; flex: 1; margin: 0px; } .banner__actions.mobile.container .banner__btn.btn { width: 100%; max-width: 100%; flex: 1; margin: 0px !important; } .banner__actions.mobile.container.сhildren_banner .btn--color { background: var(--child-main-color); color: var(--main-font); } .banner__actions.mobile.container.сhildren_banner .btn--color svg { filter: none; fill: var(--main-font); } .banner__actions.mobile.container.сhildren_banner .btn--color:hover { background: var(--child-main-color); color: var(--main-font); } .banner__actions.mobile.container.сhildren_banner .btn--color:after { background: var(--child-main-color); color: var(--main-font); } .banner__container { padding: 0 12px; } } .diagnostic-block { position: relative; z-index: 10; } .diagnostic-block.content-block { padding: 0; } .diagnostic-block__wrap { background-color: var(--grey-background); border-radius: 32px; padding: 0 32px 0 16px; } .diagnostic-block__content { display: flex; align-items: center; justify-content: space-between; } .diagnostic-block__img { width: 100%; max-width: 256px; position: relative; margin-right: 16px; align-self: stretch; } .diagnostic-block__img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .diagnostic-block__title { margin-right: 16px; padding: 62px 0 62px 0; width: 100%; } .diagnostic-block__title h2 { line-height: 33.6px; margin: 0; } .diagnostic-block__title h2 span { display: block; } .diagnostic-block__action .btn { white-space: nowrap; } .diagnostic-block__action .btn--grey { display: none; width: 176px; height: 60px; } .diagnostic-block__img { opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .diagnostic-block__img.active { opacity: 1; transform: translateY(0); } @media (max-width: 640px) { .diagnostic-block__wrap { height: 460px; } .diagnostic-block__wrap.container { margin-top: 20px; } .diagnostic-block__content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .diagnostic-block__img { width: 100%; height: 150px; max-width: none; margin: 0px; } .diagnostic-block__img img { top: 35%; height: 205px; width: auto; -o-object-fit: cover; object-fit: cover; } .diagnostic-block__title { width: 300px; padding: 30px 0px; margin: 0px; text-align: center; } .diagnostic-block__action { width: 176px; } .diagnostic-block__action .btn { width: 176px; } .diagnostic-block__action .btn--white { display: none; } .diagnostic-block__action .btn--grey { display: flex; min-width: 176px; height: 60px; cursor: pointer; } .diagnostic-block__title h2 { display: flex; flex-direction: column; align-items: center; } .fadeTextBg { animation: fadeTextBgToMain 1s 0.3s forwards !important; } } .history-patient__content-block { width: 100%; } .history-patient__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .history-patient__reviews { display: flex; align-items: center; justify-content: flex-end; } .history-patient__reviews-count { color: var(--main); line-height: 56px; margin-right: 16px; position: relative; } .history-patient__reviews-count-hidden { opacity: 0; } .history-patient__reviews-count-visible { position: absolute; top: 0; left: 0; } .history-patient__reviews-descr { display: flex; align-items: center; justify-content: flex-end; margin-left: 8px; } .history-patient__reviews-users { display: flex; align-items: center; } .history-patient__reviews-user { margin-left: -8px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; position: relative; } .history-patient__reviews-user:nth-child(1) { z-index: 3; } .history-patient__reviews-user:nth-child(2) { z-index: 2; } .history-patient__reviews-user:nth-child(3) { z-index: 1; } .history-patient__reviews-text { line-height: 19.6px; margin-left: 16px; } .history-patient__thumbs { position: relative; overflow: hidden; } .history-patient__thumbs::before, .history-patient__thumbs::after { display: block; content: ""; height: 96px; width: 400px; position: absolute; top: 0; z-index: 2; } .history-patient__thumbs::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .history-patient__thumbs::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .history-patient__thumbs-wrap { position: relative; width: 96px; margin: 0 auto 32px; } .history-patient__thumbs .swiper { overflow: unset; } .history-patient__thumbs .swiper .swiper-slide { opacity: 0.3; transition: opacity 0.2s ease; -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } .history-patient__thumbs .swiper .swiper-slide.swiper-slide-active { opacity: 1; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .history-patient__thumbs-item { border-radius: 50%; overflow: hidden; height: 96px; display: flex; align-items: center; justify-content: center; } .history-patient__thumbs-item img { max-width: unset; height: 100%; } .history-patient__list { position: relative; } .history-patient__item { display: flex; align-items: flex-start; justify-content: space-between; } .history-patient__info { margin-right: 16px; width: 100%; max-width: 1046px; } .history-patient__subtitle { line-height: 25.2px; margin-bottom: 32px; } .history-patient__photos { display: flex; align-items: flex-start; justify-content: space-between; } .history-patient__photos-main { position: relative; width: 100%; max-width: 640px; margin-right: 16px; border-radius: 16px; height: 480px; overflow: hidden; } .history-patient__photos-results { width: 100%; max-width: 390px; } .history-patient__photos-before, .history-patient__photos-after { border-radius: 16px; overflow: hidden; height: 232px; display: flex; align-items: center; justify-content: center; position: relative; } .history-patient__photos-before { margin-bottom: 16px; } .history-patient__photos-wrap { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .history-patient__photos-sign { position: absolute; width: 80px; line-height: 22.4px; padding: 5px 0; border-radius: 16px; background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); top: 16px; left: 16px; color: var(--light-font); text-align: center; } .history-patient__video { position: absolute; bottom: 32px; left: 32px; display: flex; align-items: center; cursor: pointer; } .history-patient__video:hover .history-patient__video-icon { border-color: rgb(255, 255, 255); } .history-patient__video-icon { width: 100%; max-width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); transition: border-color 0.2s ease; display: flex; align-items: center; justify-content: center; margin-right: 8px; } .history-patient__video-icon svg { width: 24px; height: 24px; } .history-patient__video-text { color: var(--light-font); line-height: 22.4px; } .history-patient__description { margin-top: 32px; line-height: 22.4px; } .history-patient .free-consult__hint { margin-top: 20px; margin-bottom: 0; padding-left: 20px; } .history-patient .free-consult__hint li { color: var(--main-font); } .history-patient .free-consult__hint li + li { margin-top: 8px; } .history-patient__doctor { width: 100%; max-width: 338px; } .history-patient__doctor-item { background-color: var(--light-background); border-radius: 16px; padding: 24px 16px; display: flex; align-items: flex-start; } .history-patient__doctor-image { width: 100%; max-width: 48px; height: 48px; border-radius: 50%; margin-right: 16px; overflow: hidden; background-color: var(--border-grey); } .history-patient__doctor-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .history-patient__doctor-name { line-height: 19.6px; } .history-patient__doctor-name span { display: block; } .history-patient__doctor-name span:first-child { color: var(--main); } .history-patient__doctor-spec { margin-top: 8px; } .history-patient.content-block.content-block--grey { position: relative; z-index: 0; } .history-patient-small-container { position: relative; padding: 0 40px; } .history-patient-small-container .custom-navigation.custom-prev { margin-left: 44%; } .history-patient-small-container .custom-navigation.custom-next { margin-right: 44%; } .history-patient-small-container .swiper { padding: 20px 0; } .history-patient-small-container .swiper-slide { display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .history-patient-small-container .swiper-slide:not(.swiper-slide-active) { filter: grayscale(100%); opacity: 0.6; transform: scale(0.9); } .history-patient-small-container .swiper-slide-active { filter: grayscale(0%); opacity: 1; transform: scale(1.1); z-index: 1; } .history-patient-small-img img { width: 96px; height: 96px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; } @media (max-width: 900px) { .history-patient__head { display: flex; flex-direction: column; } .history-patient__head h2 { text-align: center; } .history-patient__reviews { margin-top: 44px; } .history-patient__thumbs { opacity: 1 !important; } .history-patient__thumbs-wrap { opacity: 1 !important; } .history-patient__item { display: flex; flex-direction: column; } .history-patient__subtitle { text-align: center; } .history-patient__photos { width: 100%; display: flex; flex-direction: column; align-items: center; } .history-patient__photos-main { margin-right: 0px; max-width: none; } .history-patient__photos-results { margin-top: 17px; display: flex; flex-direction: row; gap: 16px; height: -moz-fit-content; height: fit-content; } .history-patient__photos-before { height: 170px; width: 50%; -o-object-fit: cover; object-fit: cover; } .history-patient__photos-after { height: 170px; width: 50%; -o-object-fit: cover; object-fit: cover; } .history-patient__description { text-align: center; padding: 0px 15px; } .history-patient__doctor { margin-top: 40px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none; padding: 0px 16px; } .history-patient__doctor-item { width: 100%; min-height: 154px; padding: 25px 37px; } .history-patient__doctor-info { width: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 95px; } .history-patient-small-img { width: 105px; height: 105px; min-height: 105px !important; min-width: 105px !important; } .history-patient-small-container .custom-navigation button.custom-prev { margin-left: 30%; } .history-patient-small-container .custom-navigation button.custom-next { margin-right: 30%; } } @media (max-width: 640px) { .history-patient-small-img { width: 80px; height: 80px; min-height: 80px !important; min-width: 80px !important; } .history-patient-small-container { padding: 0px; } .history-patient-small-container .custom-navigation button.custom-prev { margin-left: 20%; } .history-patient-small-container .custom-navigation button.custom-next { margin-right: 20%; } .free-consult__hint { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } } .doctor-label__wrap { display: flex; flex-direction: row; gap: 8px; align-items: center; position: relative; } .doctor-label__wrap::after { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .doctor-label__image { width: 100%; border-radius: 50%; max-width: 48px; height: 48px; overflow: hidden; background-color: var(--default); } .doctor-label__image img { -o-object-fit: cover; object-fit: cover; width: 48px; height: 48px; } .doctor-label__name { width: 100%; } .doctor-label__name--author { display: flex; flex-direction: column; } .work-examples { overflow: hidden; position: relative; } .work-examples::before, .work-examples::after { display: block; content: ""; height: 100%; width: 171px; position: absolute; top: 0; z-index: 2; } .work-examples::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .work-examples::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .work-examples__action--bottom { display: none; } .work-examples__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; } .work-examples__head h2 { width: 100%; max-width: 714px; margin-right: 24px; } .work-examples__list { position: relative; } .work-examples__list .swiper { overflow: unset; } .work-examples__list.adaptive { display: none; } .work-examples__item { max-width: 338px; border-radius: 32px; overflow: hidden; } .work-examples__image { width: 338px; height: 256px; } .work-examples__image-left, .work-examples__image-right { position: relative; } .work-examples__image-left .work-examples__image-sign { left: 29px; } .work-examples__image-right .work-examples__image-sign { right: 29px; } .work-examples__image-sign { position: absolute; top: 24px; min-width: 80px; border-radius: 18px; line-height: 22.4px; padding: 5px 15px; background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: center; color: var(--light-font); opacity: 0; transition: opacity 0.2s ease; } .work-examples__image-result { background-position: 50%; background-repeat: no-repeat; background-size: cover; width: 338px; height: 256px; } .work-examples__image-slider { background-color: rgba(255, 255, 255, 0); transition: background-color 0.2s ease; height: 100%; position: relative; width: 1.5px; } .work-examples__image-button { width: 64px; height: 32px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.4); border-radius: 18px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; } .work-examples__image-button svg { width: 24px; height: 24px; } .work-examples__image-button svg:first-child { transform: rotate(90deg); } .work-examples__image-button svg:last-child { transform: rotate(-90deg); } .work-examples__image:hover .work-examples__image-slider { background-color: rgba(255, 255, 255, 0.4); } .work-examples__image:hover .work-examples__image-sign { opacity: 1; } .work-examples__card { background-color: var(--light-background); padding: 0 24px 24px; display: flex; flex-direction: column; min-height: 256px; justify-content: space-between; position: relative; z-index: 1; } .work-examples__card::after { position: absolute; display: block; content: ""; background-color: var(--light-background); border-radius: 32px; height: calc(100% + 32px); bottom: 0; z-index: -1; left: 0; width: 100%; } .work-examples__section { color: var(--interface-grey); margin-bottom: 8px; } .work-examples__name { line-height: 19.6px; } .work-examples__doctor { display: flex; align-items: center; } .work-examples__doctor-image { width: 100%; border-radius: 50%; max-width: 64px; height: 64px; margin-right: 16px; overflow: hidden; background-color: var(--default); } .work-examples__doctor-image img { -o-object-fit: cover; object-fit: cover; width: 64px; height: 64px; } .work-examples__doctor-info div:first-child { color: var(--interface-grey); margin-bottom: 4px; } .work-examples__doctor-info div:last-child { line-height: 19.6px; } .work-examples__item { position: relative; z-index: 1; } .work-examples__image { position: relative; z-index: 0; } .work-examples__card { position: relative; z-index: 1; } .work-examples__image-left .work-examples__image-sign { position: absolute; z-index: 1; } .work-examples__image-left .work-examples__image-result { position: relative; background-size: cover; background-position: center; overflow: hidden; } .work-examples__image-left .work-examples__image-result::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(6px); transition: filter 0.3s ease; z-index: 0; } .work-examples__image-left .work-examples__image-result.is-clear::before { filter: blur(0px); } .work-examples__image-left .work-examples__image-result > * { position: relative; z-index: 1; } .work-examples__item:hover .work-examples__image-result:before { filter: blur(0); } .work-examples__image-slider { background-color: rgba(255, 255, 255, 0.4); } .work-examples::before, .work-examples::after { z-index: 1; } .work-examples__head { position: relative; z-index: 2; } .work-examples__action > a { color: var(--main-font); } @media (max-width: 1080px) { .work-examples__head .title { text-align: start; } } @media (max-width: 480px) { .work-examples__head .title { text-align: start; line-height: 130%; } .work-examples__head .work-examples__action { display: none; } .work-examples__action--bottom { margin-top: 33px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .work-examples { position: relative; } .work-examples__list.desktop { display: none; } .work-examples__list.adaptive { display: block; } .work-examples::before { left: 0; background: none; } .work-examples::after { right: 0; background: none; } .work-examples-small-container { overflow: hidden; position: relative; } .work-examples-small-container::before, .work-examples-small-container::after { display: block; content: ""; height: 100%; width: 171px; position: absolute; top: 0; z-index: 2; } .work-examples-small-container::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .work-examples-small-container::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .work-examples-small-container .swiper { padding: 20px 0; } .work-examples-small-container .swiper-slide { display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .work-examples-small-container .swiper-slide:not(.swiper-slide-active) { filter: grayscale(100%); opacity: 0.6; transform: scale(0.9); } .work-examples-small-container .swiper-slide-active { filter: grayscale(0%); opacity: 1; transform: scale(1.1); z-index: 1; } .work-examples-small-container { position: relative; padding: 0 40px; } .work-examples-small-container .swiper { padding: 20px 0; } .work-examples__action--bottom { margin: 0px; } .work-examples__image-icon { background-position: 50%; background-repeat: no-repeat; background-size: cover; min-width: 50px; min-height: 50px; border-radius: 50%; } .slider-small-img img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; } .slider-big-img img { width: 100%; height: auto; max-height: 70vh; -o-object-fit: contain; object-fit: contain; } .custom-navigation button.custom-prev { margin-left: 0px; } .custom-navigation button.custom-next { margin-right: 0px; } .work-examples.content-block.content-block--grey { padding: 24px 24px 48px 24px; } } .no-fear { position: relative; background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/ui/blocks/no_fear/no_fear.webp"); background-position: center; } .no-fear__wrap.container { height: 320px; } .no-fear__list { margin-top: 32px; } .no-fear__item { display: flex; align-items: center; margin-bottom: 32px; } .no-fear__item:last-child { margin-bottom: 0; } .no-fear__icon { width: 100%; max-width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); margin-right: 32px; display: flex; align-items: center; justify-content: center; } .no-fear__name { margin-bottom: 8px; } .no-fear__down-content { display: none; } @media (max-width: 640px) { .no-fear { z-index: 1; background-image: none; background-color: var(--grey-background); } .no-fear__wrap.container { position: relative; height: auto; } .no-fear__wrap.container .title { max-width: 300px; text-align: center; } .no-fear__content { display: flex; flex-direction: column; align-items: center; padding: 48px 0px; border-radius: 32px; position: relative; z-index: 2; background-color: var(--grey-background); } .no-fear__icon { max-width: 50px; height: 50px; margin-right: 26px; } .no-fear__list { padding: 0px 24px; } .no-fear__down-content { position: relative; margin-bottom: -32px; width: 100%; z-index: 1; height: 256px; display: flex; justify-content: center; border-radius: 32px 32px 0px 0px; overflow: hidden; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0.2; transition-delay: 1s; } .no-fear__down-content.active { transform: translateY(0); opacity: 1; } .no-fear__down-image-wrap { width: 100%; min-width: 100%; height: 100%; max-height: 256px; display: flex; align-items: end; justify-content: center; flex: 0 0 100%; } .no-fear__down-image-wrap img { display: block; min-width: 100%; height: 100%; width: 100%; flex-shrink: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: 80% 50%; object-position: 80% 50%; } .no-fear.content-block--padding { padding: 0px; } .no-fear.content-block.content-block--grey { padding-bottom: 0px; background-color: var(--light-background); } } .implant-compare .title { margin-bottom: 32px; } .implant-compare__subtitle { line-height: 19.6px; margin-bottom: 48px; max-width: 998px; } .implant-compare__subtitle span { font-weight: 500; } .implant-compare__content { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 -20px; position: relative; } .implant-compare__item { display: flex; justify-content: space-between; padding: 0 48px 0 68px; position: relative; margin: 0 20px; align-items: flex-start; width: 100%; } .implant-compare__item::after { width: 100%; height: 400px; content: ""; position: absolute; left: 0; border-radius: 50px; opacity: 0.05; background-color: var(--error); top: 90px; z-index: -1; } .implant-compare__item:last-child { padding: 0 68px 0 48px; } .implant-compare__item:last-child::after { background-color: var(--main); } .implant-compare__item-title { display: flex; flex-direction: row; align-items: center; margin-top: 140px; gap: 15px; } .implant-compare__item-title .implant-compare-box__icon { width: 36px; height: 36px; } .implant-compare__item-title .implant-compare-box__icon svg { min-width: 24px; min-height: 24px; } .implant-compare__item-title span:last-child { line-height: 22.4px; } .implant-compare__item-title span:first-child { position: relative; width: 100%; max-width: 17px; height: 17px; margin-right: 24px; } .implant-compare__item-title span:first-child::after, .implant-compare__item-title span:first-child::before { content: ""; width: 100%; height: 1.5px; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); left: 0; background-color: var(--error); } .implant-compare__item-title span:first-child::after { transform: translateY(-50%) rotate(-45deg); } .implant-compare__item--positive .implant-compare-box__item::after { border: 1px solid var(--main); } .implant-compare__item--positive .implant-compare-box__item:hover { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .implant-compare__item--positive .implant-compare-box__item:hover::after { border: none; } .implant-compare__item--positive .implant-compare-box__icon { stroke: var(--main); } .implant-compare-box { display: flex; align-items: flex-start; justify-content: center; } .implant-compare-box__list { width: 72px; height: 198px; position: relative; margin-top: 140px; } .implant-compare-box__list:nth-child(1) .implant-compare-box__item:nth-child(1) { top: 0; right: 0; left: unset; } .implant-compare-box__list:nth-child(1) .implant-compare-box__item:nth-child(2) { top: 50%; transform: translateY(-50%); left: 0; right: unset; } .implant-compare-box__list:nth-child(1) .implant-compare-box__item:nth-child(3) { bottom: 0; right: 0; left: unset; } .implant-compare-box__item { width: 50px; height: 50px; position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background-color: rgba(255, 255, 255, 0); transition: background-color 0.2s ease; } .implant-compare-box__item:hover { background-color: var(--error); } .implant-compare-box__item:hover::after { opacity: 1; } .implant-compare-box__item:hover .implant-compare-box__icon { stroke: var(--light-background); } .implant-compare-box__item:hover .implant-compare-box__note { display: block; } .implant-compare-box__item::after { content: ""; width: 100%; height: 100%; border: 1px solid var(--error); border-radius: 50%; opacity: 0.3; position: absolute; top: 0; left: 0; z-index: -1; } .implant-compare-box__item:nth-child(1) { top: 0; left: 0; } .implant-compare-box__item:nth-child(2) { top: 50%; transform: translateY(-50%); right: 0; } .implant-compare-box__item:nth-child(3) { bottom: 0; left: 0; } .implant-compare-box__icon { width: 24px; height: 24px; stroke: var(--error); } .implant-compare-box__note { border-radius: 12px; width: 318px; display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--light-background); box-shadow: 0px 14px 24px 0px var(--shadow); padding: 16px 24px; z-index: 20000; line-height: 19.6px; } .implant-compare-box__note::after { z-index: 19999; display: block; content: ""; left: 50%; transform: translateX(-50%) rotate(45deg); position: absolute; width: 20px; height: 20px; border-radius: 3px; background-color: var(--light-background); bottom: -7px; } .implant-compare-box__images { width: 178px; } .implant-compare-box__image-top { margin: 0 auto 24px; } .implant-compare-box__image-middle { margin: 0 auto 31px; width: 109px; } .implant-compare-box__image-bottom { width: 94px; margin: 0 auto; } @media only screen and (max-width: 1400px) { .implant-compare__content { display: flex; flex-direction: column-reverse; gap: 48px; margin: 0px; } .implant-compare__content > div { margin: 0px; display: flex; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 35px; } .implant-compare__content > div::after { display: none; } .implant-compare__content > div:first-child { padding: 36px 24px; flex-direction: column; position: relative; z-index: 0; background-color: color-mix(in srgb, var(--error) 10%, transparent); } .implant-compare__content > div:last-child { padding: 36px 24px; flex-direction: column-reverse; position: relative; z-index: 0; background-color: var(--grey-background); } .implant-compare__item { border-radius: 50px; } .implant-compare__item-title { margin: 0px; } .implant-compare__wrap { display: flex; flex-direction: column; gap: 35px; } .implant-compare__title.title { margin: 0px 24px; } .implant-compare__subtitle { margin: 0px 24px; } .implant-compare__subtitle h3 { text-align: center; } .implant-compare-box__list:first-child > div > div:last-child { transform: translateX(-15%); } .implant-compare-box__list:first-child > div > div:last-child::after { left: 15%; } .implant-compare-box__list:last-child > div > div:last-child { transform: translateX(-85%); } .implant-compare-box__list:last-child > div > div:last-child::after { left: 85%; } .implant-compare.content-block { padding: 0px; } } @media (max-width: 640px) { .implant-compare__item { border-radius: 32px; } } .credit-btns__wrap { display: flex; align-items: center; margin: -2px; justify-content: flex-start; } .credit-btns__item { width: 100%; max-width: 135px; margin: 2px; border-radius: 12px; padding: 8px; overflow: hidden; position: relative; display: flex; align-items: center; } .credit-btns__item--tinkoff::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tinkoff); opacity: 0.1; border-radius: 12px; } .credit-btns__item--sber { background: var(--sber-gradient); } .credit-btns__item--halva::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--halva); opacity: 0.1; border-radius: 12px; } .credit-btns__item svg { width: 32px; min-width: 24px; height: 32px; margin-right: 12px; } .credit-btns__item div span { display: block; color: var(--main-font); } .credit-block__wrap { display: flex; justify-content: space-between; align-items: center; min-height: 215px; background-color: var(--grey-background); border-radius: 32px; padding: 0 32px 0 16px; } .credit-block__left { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; } .credit-block__image { position: relative; width: 100%; max-width: 256px; height: 100%; margin-right: 24px; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .credit-block__image.active { opacity: 1; transform: translateY(0); } .credit-block__image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .credit-block__title.title { width: 100%; max-width: none; } .credit-block__subtitle { display: none; } .credit-block__content { display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: none; } .credit-block__right { display: flex; align-items: center; justify-content: flex-end; margin-left: 24px; padding: 64px 0; } .credit-block__action .btn { padding: 22px 24px; } .credit-block__credit-btn { min-width: 20px; min-height: 20px; } .credit-block__banks { display: flex; flex-direction: row; justify-content: space-between; gap: 16px; } .credit-block__banks > section { display: flex; align-items: center; justify-content: center; gap: 16px; } .credit-block__buttons.stage-prices { display: flex; flex-direction: row; gap: 10px; } .credit-block__buttons a { display: flex; justify-content: center; align-items: center; width: 130px; height: 60px; padding: 14px; } .credit-block__buttons a > div > span:first-of-type { white-space: nowrap; } .credit-block__buttons a > div > span:last-of-type { display: none; } .credit-block__content { padding: 24px 0; } @media (max-width: 1150px) { .credit-block__banks > section > span { display: none; } } @media (max-width: 1055px) { .credit-block__wrap { padding: 24px 0; } .credit-block__banks { flex-direction: column; } .credit-block__banks > section { justify-content: flex-start; } .credit-block__buttons a { padding: 12px; width: 100%; } } @media (max-width: 640px) { .credit-block.content-block { padding-top: 80px; } .credit-block.content-block.content-block--grey { padding: 0; margin-top: 140px; background-color: var(--light-background); } .credit-block__wrap { flex-direction: column; min-height: unset; background-color: var(--grey-background); border-radius: 32px; } .credit-block__left { flex-direction: column; justify-content: center; align-items: center; } .credit-block__left h2 { margin-top: 190px; } .credit-block__right { margin: 30px 0 40px 0; padding: 0; } .credit-block__action { display: flex; flex-direction: column; align-items: center; } .credit-block__action.btn--white { border: none; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); color: var(--light-font); box-shadow: none; position: relative; } .credit-block__action.btn--white::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); opacity: 0; transition: opacity 0.4s ease; border-radius: inherit; z-index: 1; } .credit-block__action.btn--white svg { stroke: var(--light-font); fill: var(--light-font); } .credit-block__action.btn--white:hover { box-shadow: none; border: none; } .credit-block__action.btn--white:hover::after { opacity: 1; } .credit-block__subtitle { display: block; text-align: center; margin-top: 12px; } .credit-block__title.title { padding: 0 24px; text-align: center; } .credit-block__buttons { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .credit-block__buttons.stage-prices { width: 100%; display: flex; flex-direction: row; gap: 10px; } .credit-block__buttons a { width: 60px; height: 60px; padding: 14px; display: flex; justify-content: center; align-items: center; } .credit-block__buttons a > svg { margin: 0; } .credit-block__buttons a > div > span:first-of-type { display: none; } } @media (max-width: 480px) { .credit-block__action { padding: 0px 24px; width: 100%; } .credit-block__action .btn { width: 100%; max-width: none; } } .credit-block.content-block.children_mode { position: relative; z-index: 1; } .credit-block.content-block.children_mode.children_background::before { content: ""; position: absolute; inset: 0; background-image: url("/images/services/detskaya-stomatologiya/child_pattern_vector.svg"); background-size: cover; background-position: center; opacity: 1; z-index: -1; } .credit-block.content-block.children_mode .credit-block__wrap { padding: 0px; background-color: transparent; min-height: 300px; border-radius: 0px; max-width: 600px; align-items: start; } .credit-block.content-block.children_mode .credit-block__content { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: none; } .credit-block.content-block.children_mode .credit-block__title.title { width: 100%; max-width: none; min-height: 106px; } .credit-block.content-block.children_mode .credit-block__banks { display: flex; flex-direction: row; justify-content: space-between; height: 64px; gap: 16px; } .credit-block.content-block.children_mode .credit-block__banks > section { display: flex; align-items: center; justify-content: center; gap: 16px; } .credit-block.content-block.children_mode .credit-block__buttons.stage-prices { display: flex; flex-direction: row; gap: 10px; } .credit-block.content-block.children_mode .credit-block__buttons a { display: flex; justify-content: center; align-items: center; width: 130px; height: 60px; padding: 14px; } .credit-block.content-block.children_mode .credit-block__buttons a > div > span:first-of-type { white-space: nowrap; } .credit-block.content-block.children_mode .credit-block__buttons a > div > span:last-of-type { display: none; } .credit-block.content-block.children_mode .credit-block__children-image { position: absolute; height: 512px; width: 624px; bottom: -80px; right: 76px; } .credit-block.content-block.children_mode .credit-block__action .btn.btn--children-bg span { background: var(--child-extra-color); } .credit-block.content-block.children_mode .credit-block__action .btn.btn--children-bg { position: relative; z-index: 1; background: var(--child-extra-color); color: var(--main-font); } .credit-block.content-block.children_mode .credit-block__action .btn.btn--children-bg::after { content: none !important; display: none !important; } .credit-block.content-block.children_mode .credit-block__action .btn.btn--children-bg svg { margin-left: 8px; stroke: var(--main-font); } .container.children_mode { position: relative; } @media (max-width: 1440px) { .credit-block.content-block.children_mode .credit-block__children-image { height: auto; position: relative; right: inherit; } .credit-block.content-block.children_mode .credit-block__wrap { flex: 1; } .credit-block.content-block.children_mode .credit-block__children-image { flex: 1; } .container.children_mode { display: flex; justify-content: space-between; } } @media (max-width: 900px) { .credit-block.content-block.children_mode .credit-block__children-image { bottom: -40px; display: flex; align-items: end; } } @media (max-width: 640px) { .credit-block.content-block.children_mode { padding-top: 0px; } .credit-block.content-block.children_mode.content-block--grey { padding: 0; margin-top: 0px; background-color: var(--light-background); } .credit-block.content-block.children_mode .credit-block__wrap { position: relative; z-index: 1; border-radius: 24px; background: var(--light-background); border: 1px solid var(--border-grey); } .credit-block.content-block.children_mode .credit-block__content { padding: 48px 24px 24px 24px; align-items: center; } .credit-block.content-block.children_mode .credit-block__title.title { padding: 0px; min-height: 0px; height: -moz-fit-content; height: fit-content; } .credit-block.content-block.children_mode .credit-block__title.title span br { display: none; } .credit-block.content-block.children_mode .credit-block__children-image { position: relative; z-index: 0; border-radius: 24px 24px 0px 0px; width: 100%; bottom: -24px; justify-content: center; background: var(--grey-background); } .credit-block.content-block.children_mode .credit-block__children-image::before { content: ""; position: absolute; inset: 0; background-image: url("/images/services/detskaya-stomatologiya/child_pattern_vector.svg"); background-size: cover; background-position: center; opacity: 1; z-index: -1; } .credit-block.content-block.children_mode .credit-block__children-image img { max-width: none; width: 80%; } .credit-block.content-block.children_mode .credit-block__banks { height: 100%; } .credit-block.content-block.children_mode .credit-block__banks section { display: flex; flex-direction: column; gap: 12px; } .credit-block.content-block.children_mode .credit-block__banks section > span:first-of-type { display: block; } .credit-block.content-block.children_mode .credit-block__banks span br { display: none; } .container.children_mode { display: flex; flex-direction: column-reverse; } } @media (max-width: 480px) { .credit-block.content-block.children_mode .credit-block__action { padding: 0px; } } .implant-card { display: flex; flex-direction: column; height: auto; background-color: var(--light-background); border-radius: 16px; padding: 32px; margin-right: 16px; width: 100%; max-width: 338px; min-height: 560px; align-self: stretch; justify-content: space-between; } .implant-card--empty { background-color: rgba(255, 255, 255, 0); border: 1.5px dashed var(--border-grey); flex-grow: 1; } .implant-card:last-child { margin-right: 0; } .implant-card__info { flex-grow: 1; } .implant-card__head { display: flex; align-items: center; margin-bottom: 24px; } .implant-card__image { border-radius: 50%; overflow: hidden; width: 48px; height: 48px; margin-right: 24px; background-size: cover; background-repeat: no-repeat; background-position: center; } .implant-card__title { height: -moz-fit-content; height: fit-content; } .implant-card__row { display: flex; align-items: flex-end; justify-content: space-between; position: relative; margin-bottom: 24px; } .implant-card__row:last-child { margin-bottom: 0; } .implant-card__row::after { position: absolute; content: ""; width: 100%; height: 1.5px; background-color: var(--grey-background); bottom: 4px; left: 0; z-index: 1; } .implant-card__col-left { width: 100%; max-width: -moz-fit-content; max-width: fit-content; color: var(--grey-font); background-color: var(--light-background); z-index: 3; padding-right: 4px; } .implant-card__col-right { display: flex; align-items: center; background-color: var(--light-background); position: relative; z-index: 3; padding-left: 4px; } .implant-card__col-right span { margin-right: 4px; } .implant-card__col-right span:hover svg { stroke: var(--interface-grey); } .implant-card__col-right span svg { width: 16px; height: 16px; } .implant-card__col-right div { white-space: nowrap; } .implant-card__premium { display: flex; align-items: center; justify-content: center; background-color: var(--grey-background); width: 100%; padding: 4px 0; border-radius: 12px; margin-top: 24px; } .implant-card__premium svg { width: 100%; max-width: 24px; margin-right: 8px; } .implant-card__premium span { font-weight: 600; } .implant-card__buttons { margin-top: 24px; display: flex; flex-direction: column; justify-content: flex-end; } .implant-card__price { margin-top: 24px; } .implant-card__price-label { color: var(--grey-font); margin-bottom: 4px; } .implant-card__price-value { display: flex; align-items: center; line-height: 22.4px; } .implant-card__price-old { color: var(--grey-font); text-decoration: line-through; padding-right: 6px; } .implant-card__buttons .credit-btns__wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .implant-card__buttons .credit-btns__wrap a { margin: 0 auto; } .implant-card__title { width: 100%; text-align: start; margin-top: -24px; position: relative; } .implant-card__country { position: absolute; z-index: 4; width: -moz-fit-content; width: fit-content; } .implant-card__image { min-width: 48px; } .implant-card__tooltip { position: relative; display: inline-block; } .implant-card__tooltip .implant-card__tooltip-text { padding: 12px; visibility: hidden; opacity: 0; transition: opacity 0.2s ease-in-out; position: absolute; bottom: 140%; left: 50%; transform: translateX(-90%); background-color: var(--light-background); color: var(--dark-font); text-align: center; border-radius: 6px; box-shadow: 0 4px 12px var(--shadow-grey); min-width: 190px; max-width: 210px; white-space: normal; z-index: 100; } .implant-card__tooltip .implant-card__tooltip-text::after { content: ""; position: absolute; top: 100%; right: 13px; border-width: 6px; border-style: solid; border-color: var(--light-background) transparent transparent transparent; } .implant-card__tooltip:hover .implant-card__tooltip-text { visibility: visible; opacity: 1; } @media only screen and (max-width: 640px) { .implant-card { min-height: 550px; } .implant-card--empty { height: 550px; } } @media only screen and (max-width: 480px) { .implant-card { min-height: 620px; } .implant-card--empty { height: 620px; } } .implant-price__wrap.container { padding: 24px 36px; } .implant-price.title { margin-bottom: 16px; } .implant-price__head { margin-bottom: 48px; } .implant-price__advantages { margin-top: 16px; } .implant-price__advantages-wrap { display: flex; align-items: center; justify-content: flex-start; margin: -8px -24px; flex-wrap: wrap; } .implant-price__advantages-item { display: flex; align-items: center; margin: 8px 24px; width: 100%; max-width: 357px; } .implant-price__advantages-icon { width: 100%; max-width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .implant-price__advantages-text { line-height: 25.2px; } .implant-price__items { display: flex; align-items: flex-start; } .implant-price-card { min-height: 620px; } .implant-price-small-container { margin-top: 20px; display: none; position: relative; padding: 0 40px; } .implant-price-small-container .swiper { padding: 20px 0; } .implant-price-small-container .swiper-slide { display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .implant-price-small-container .swiper-slide:not(.swiper-slide-active) { filter: grayscale(100%); opacity: 0.6; transform: scale(0.9); } .implant-price-small-container .swiper-slide-active { filter: grayscale(0%); opacity: 1; transform: scale(1.1); z-index: 1; } .implant-price-small-container .swiper { padding: 20px 0; } .implant-price-small-img img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; } .implant-price-small-img--empty { width: 50px; height: 50px; border-radius: 100%; border: 1.5px dashed var(--border-grey); } .group-tab__content div .implant-price__head { margin-bottom: 24px; } .group-tab__content div .implant-price.content-block.content-block--grey { padding: 20px 0px; } @media (max-width: 640px) { .implant-price { position: relative; } .implant-price__wrap.container { padding: 0px; } .implant-price.content-block.content-block--grey { padding: 40px 0px; overflow: hidden; } .implant-price-card { text-align: center; max-width: none; } .implant-price-small-container { display: block; overflow: hidden; position: relative; } .implant-price-small-container::before, .implant-price-small-container::after { display: block; content: ""; height: 100%; width: 171px; position: absolute; top: 0; z-index: 2; } .implant-price-small-container::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .implant-price-small-container::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .implant-price-small-img { min-width: 50px; } .implant-price-small-img--empty { min-width: 50px; } .implant-price__wrap.container .swiper.swiper-initialized.swiper-horizontal.swiper-ios.implant-price-slider.swiper-backface-hidden .swiper-slide.swiper-slide { padding: 0px 12px; } .implant-price__advantages { margin-top: 16px; } .implant-price__advantages-wrap { margin: 0px; } } .implant-simple__wrap.container { padding: 24px 36px; } .implant-simple.title { margin-bottom: 16px; } .implant-simple__head { margin-bottom: 48px; } .implant-simple__advantages { margin-top: 16px; } .implant-simple__advantages-wrap { display: flex; align-items: center; justify-content: flex-start; margin: -8px -24px; flex-wrap: wrap; } .implant-simple__advantages-item { display: flex; align-items: center; margin: 8px 24px; width: 100%; max-width: 357px; } .implant-simple__advantages-icon { width: 100%; max-width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .implant-simple__advantages-text { line-height: 25.2px; } .implant-simple__items { display: flex; align-items: flex-start; } .implant-simple-card { min-height: 620px; } .implant-simple-small-container { margin-top: 20px; display: none; position: relative; padding: 0 40px; } .implant-simple-small-container .swiper { padding: 20px 0; } .implant-simple-small-container .swiper-slide { display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .implant-simple-small-container .swiper-slide:not(.swiper-slide-active) { filter: grayscale(100%); opacity: 0.6; transform: scale(0.9); } .implant-simple-small-container .swiper-slide-active { filter: grayscale(0%); opacity: 1; transform: scale(1.1); z-index: 1; } .implant-simple-small-container .swiper { padding: 20px 0; } .implant-simple-small-img img { width: 50px; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 100%; display: block; margin: 0 auto; } .implant-simple-small-img--empty { width: 50px; height: 50px; border-radius: 100%; border: 1.5px dashed var(--border-grey); } .group-tab__content div .implant-simple__head { margin-bottom: 24px; } .group-tab__content div .implant-simple.content-block.content-block--grey { padding: 20px 0px; } @media (max-width: 640px) { .implant-simple { position: relative; } .implant-simple__wrap.container { padding: 0px; } .implant-simple.content-block.content-block--grey { padding: 40px 0px; overflow: hidden; } .implant-simple-card { text-align: center; max-width: none; } .implant-simple-small-container { display: block; overflow: hidden; position: relative; } .implant-simple-small-container::before, .implant-simple-small-container::after { display: block; content: ""; height: 100%; width: 171px; position: absolute; top: 0; z-index: 2; } .implant-simple-small-container::before { left: 0; background: linear-gradient(270deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .implant-simple-small-container::after { right: 0; background: linear-gradient(90deg, rgba(245, 250, 253, 0) 0%, var(--grey-background) 100%); } .implant-simple-small-img { min-width: 50px; } .implant-simple-small-img--empty { min-width: 50px; } .implant-simple__wrap.container .swiper.swiper-initialized.swiper-horizontal.swiper-ios.implant-simple-slider.swiper-backface-hidden .swiper-slide.swiper-slide { padding: 0px 12px; } .implant-simple__advantages { margin-top: 16px; } .implant-simple__advantages-wrap { margin: 0px; } } .no-pain { padding: 0; background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; margin-top: 64px; position: relative; overflow: hidden; } .no-pain .title { margin-bottom: 32px; } .no-pain__content { display: flex; justify-content: space-between; } .no-pain__content-wrap { padding: 80px 0 117px; } .no-pain__down-content { display: none; } .no-pain__list { width: 100%; max-width: 700px; } .no-pain__item { display: flex; align-items: flex-start; margin-bottom: 32px; } .no-pain__item:last-child { margin-bottom: 0; } .no-pain__icon { max-width: 32px; width: 100%; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .no-pain__icon svg { width: 24px; height: 24px; } .no-pain__name { line-height: 33.6px; margin-bottom: 8px; } .no-pain__text { line-height: 19.6px; } .no-pain__image { width: 100%; max-width: 623px; position: relative; align-self: stretch; } .no-pain__image-wrap { position: relative; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .no-pain__image-wrap img { max-height: 620px; max-width: 620px; } .no-pain__image-wrap:after { left: 0; top: 0; display: block; content: ""; z-index: 1; width: 100%; height: 100%; position: absolute; background: linear-gradient(90deg, var(--grey-background) 0%, rgba(245, 250, 253, 0) 30%); } .no-pain__content-wrap { flex: 1; background: var(--grey-background); } .no-pain__image { flex: 1; } @media (max-width: 1300px) { .no-pain__image-wrap { border-radius: 0px 64px 64px 0px; overflow: hidden; } .no-pain__wrap.container { padding-right: 0px; } } @media (max-width: 640px) { .no-pain { margin-top: 32px; background-image: none; background-color: var(--grey-background); } .no-pain.content-block { background-color: var(--light-background); } .no-pain__image { display: none; } .no-pain__content-wrap { padding: 48px 0px; width: 100%; } .no-pain__content-wrap .title { text-align: center; margin-bottom: 24px; } .no-pain__list { padding: 0px 24px; } .no-pain__wrap.container { padding: 0px; } .no-pain { z-index: 1; } .no-pain__wrap.container { position: relative; } .no-pain__down-content { position: relative; max-height: 256px; height: -moz-fit-content; height: fit-content; min-height: 220px; margin-bottom: -32px; background-image: linear-gradient(90deg, var(--grey-background-gradient) 0%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); background-position: 60% 50%; top: -40%; width: 100%; z-index: 1; display: flex; justify-content: center; border-radius: 32px 32px 0px 0px; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0.2; transition-delay: 1s; } .no-pain__down-content.active { transform: translateY(0); opacity: 1; } .no-pain__down-image-wrap { text-align: center; max-height: 256px; height: -moz-fit-content; height: fit-content; min-height: 220px; width: 100%; display: flex; align-items: end; justify-content: center; } .no-pain__down-image-wrap img { display: block; max-height: 256px; max-width: 80%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } .no-pain__content { position: relative; border-radius: 32px; overflow: hidden; z-index: 2; background-color: var(--grey-background); } } .list-dropdown { background-repeat: no-repeat, no-repeat; background-size: 100% 100%, auto 100%; background-position: left top, right top; } .list-dropdown .title { margin-bottom: 32px; max-width: 598px; } .list-dropdown__list { display: flex; align-items: flex-start; margin: 0 -8px; } .list-dropdown__column { margin: 0 8px; } .list-dropdown__item { background-color: var(--light-background); border-radius: 16px; max-width: 342px; margin-bottom: 8px; } .list-dropdown__item:last-child { margin-bottom: 0; } .list-dropdown__title { display: flex; align-items: center; padding: 18px 24px 18px 28px; justify-content: space-between; cursor: pointer; } .list-dropdown__title-wrap { display: flex; align-items: center; } .list-dropdown__title-check { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); margin-right: 16px; } .list-dropdown__title-check svg { width: 24px; height: 24px; } .list-dropdown__title-text { line-height: 22px; min-height: 44px; } .list-dropdown__title-dropdown { width: 100%; margin-left: 16px; max-width: 24px; height: 24px; transform: rotate(90deg); transition: transform 0.2s ease; } .list-dropdown__title-dropdown.active { transform: rotate(-90deg); } .list-dropdown__title-dropdown.active svg { stroke: var(--main); } .list-dropdown__value { overflow: hidden; height: 0; transition: height 0.2s ease; } .list-dropdown__value-wrap { padding: 24px; border-top: 1px solid var(--border-grey); line-height: 19.6px; } .list-dropdown__down-content { display: none; } .list-dropdown__wrap.container { padding: 24px 0px; } @media (max-width: 1300px) { .list-dropdown { background-image: none !important; } } @media (max-width: 640px) { .list-dropdown { background-repeat: no-repeat; background-size: contain; background-position: right; background-image: none !important; z-index: 1; position: relative; } .list-dropdown__down-content { display: block; } .list-dropdown.container { background-color: none; } .list-dropdown.content-block { background-image: none !important; position: relative; padding: 0px; background-color: var(--light-background); } .list-dropdown__wrap.container { max-width: none; position: relative; background-color: var(--grey-background); z-index: 1; padding: 48px 24px; border-radius: 32px; } .list-dropdown__down-content { overflow: hidden; position: relative; margin-bottom: -32px; width: 100%; z-index: 1; height: 256px; display: flex; justify-content: center; border-radius: 32px 32px 0 0; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0.2; transition-delay: 1s; background-image: none !important; } .list-dropdown__down-content.active { transform: translateY(0px); opacity: 1; } .list-dropdown__down-image-wrap { position: relative; width: 100%; height: 100%; } .list-dropdown__down-image-wrap::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--grey-background-gradient) 0%, rgba(245, 250, 253, 0) 65%); z-index: 1; } .list-dropdown__down-image-wrap img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .list-dropdown__list { height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 8px; margin: 0px; position: relative; z-index: 1; } .list-dropdown__column { margin: 0px; width: 100%; } .list-dropdown__column > div { width: 100%; max-width: none; } .list-dropdown__column:last-of-type > div:last-of-type { margin-bottom: 24px; } .list-dropdown .title { text-align: center; margin-bottom: 63px; } .list-dropdown__item { max-width: none; } .list-dropdown__title-text { min-height: auto; } } .list-nums__title { margin-bottom: 16px; } .list-nums__title--no-subtitle { margin-bottom: 48px; } .list-nums__subtitle { line-height: 19.6px; max-width: 692px; margin-bottom: 48px; } .list-nums__wrap { background-color: var(--grey-background); padding: 80px 64px; border-radius: 64px; } .list-nums__additional-title { line-height: 70px; margin-bottom: 48px; } .list-nums__items { display: flex; flex-wrap: wrap; margin: -31px -47px; } .list-nums__item { width: 100%; max-width: 589px; align-self: stretch; margin: 31px 47px; } .list-nums__item-name { line-height: 22.4px; margin-bottom: 16px; } .list-nums__item-description { line-height: 19.6px; } .list-nums__text-after { margin-top: 32px; line-height: 19.6px; max-width: 692px; } @media only screen and (max-width: 640px) { .list-nums.content-block { padding: 0px; } .list-nums__title { padding: 0px 36px; text-align: center; } .list-nums__subtitle { padding: 0px 24px; text-align: center; } .list-nums__wrap { padding: 36px; border-radius: 32px; } .list-nums__additional-title { margin-bottom: 36px; line-height: 140%; } .list-nums__item { margin-bottom: 0px; } .list-nums__item:last-child { margin-bottom: 24px; } } .list-column__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; align-items: start; } .list-column__title { margin-bottom: 48px; } .list-column__price { height: 18px; } .list-column__price--empty { height: 18px; } .list-column__subtitle { margin-top: -12px; margin-bottom: 24px; } .list-column__text-after { margin-top: 24px; } .list-column__item { border-radius: 24px; height: auto; overflow: hidden; } .list-column__item-image { position: static; z-index: 0; height: auto; border-radius: 24px 24px 0px 0px; } .list-column__item-image img { width: 100%; } .list-column__item-list { position: relative; z-index: 1; padding: 24px 24px; display: flex; flex-direction: column; gap: 12px; background-color: var(--light-background); margin-top: -24px; border-radius: 24px; } .list-column__item-title { margin-bottom: 12px; } .list-column__item-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .list-column__item-row > div { white-space: nowrap; } .list-column__item-row > div:first-child { color: var(--grey-font); } .list-column__item-row > span { width: 100%; height: 22px; margin: 0px 8px; border-bottom: 1px solid var(--border-grey); } @media only screen and (max-width: 1440px) { .list-column__title { width: 100%; text-align: center; } .list-column__wrap.container { padding: 0px 24px; } } @media only screen and (max-width: 900px) { .list-column__content { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); } .list-column__wrap.container { padding: 0px 12px; } .list-column.content-block.content-block--grey { padding: 48px 0px; } } @media only screen and (max-width: 640px) { .list-column__content { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } .simple-items.content-block--grey .simple-items__list { background-color: var(--light-background); } .simple-items__wrap.container { display: flex; flex-direction: column; } .simple-items__wrap.container h2 { margin-bottom: 24px; } .simple-items__card { display: flex; flex-direction: row; width: 100%; min-height: 132px; background-color: var(--light-background); max-width: 700px; padding: 32px; border-radius: 16px; } .simple-items__num { min-width: 45px; height: 45px; display: flex; align-items: center; } .simple-items__num h2 { margin: 0px; color: var(--main); } .simple-items__content { display: flex; flex-direction: column; gap: 8px; } .simple-items__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; } .simple-items__list-grey { background-color: var(--grey-background) !important; } .simple-items__card { max-width: none; background-color: var(--light-background); } .simple-items__image { width: 90px; height: 90px; border-radius: 50px; overflow: hidden; background-color: var(--grey-background); display: flex; justify-content: center; align-items: center; } .simple-items__image img { width: 75px; height: 75px; border-radius: 50px; } .simple-items__name-image { display: flex; flex-direction: row; align-items: center; gap: 12px; } .simple-items__num-image { display: none; } .simple-list.content-block--grey .simple-list__item { background-color: var(--light-background); } .simple-list__wrap.container { display: flex; flex-direction: column; gap: 24px; } .simple-list .title { margin-bottom: 32px; } .simple-list__item { width: 100%; background-color: var(--grey-background); border-radius: 24px; padding: 32px 40px; display: flex; flex-direction: column; height: auto; min-height: 360px; } .simple-list__item.swiper-slide { height: auto; } .simple-list__image { max-width: 256px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border-radius: 24px; width: 100%; height: 200px; padding: 0px 24px; background-color: var(--light-background); } .simple-list__info { max-width: 242px; margin: 0 auto; flex-grow: 1; display: flex; flex-direction: column; } .simple-list__name { display: flex; align-items: flex-start; height: 20%; } .simple-list__name-value { line-height: 22.4px; } .simple-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); margin-right: 16px; line-height: 22.4px; display: flex; align-items: center; justify-content: center; color: var(--light-font); } .simple-list__description { line-height: 19.6px; margin: 0px; } .simple-list__content { height: 100%; display: flex; flex-direction: column; gap: 24px; justify-content: space-between; } .simple-list__price { margin-top: 86px; padding-bottom: 12px; display: flex; align-self: center; } .simple-list__price-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: 1.5px solid var(--border-grey); display: flex; align-items: center; justify-content: center; margin-right: 12px; } .simple-list__price-icon svg { stroke: var(--border-grey); } .simple-list__price-value { line-height: 44.8px; } .simple-list__pagination { margin: 32px auto 0; } .simple-list__action { margin: 0 auto; } .simple-list__action-container { width: 100%; } .simple-list__name { min-height: 80px; height: -moz-fit-content; height: fit-content; margin-bottom: 12px; } .simple-list__content { display: flex; flex-direction: column; justify-content: space-between; } .simple-list__price { margin: 0px; } .simple-list__action { margin: 0px; } @media (max-width: 1300px) { .simple-list__item { min-height: 460px; } } @media (max-width: 900px) { .simple-list.content-block { padding: 40px; } } @media (max-width: 640px) { .simple-list.content-block { background-color: var(--grey-background); padding: 24px; } .simple-list__item { min-height: 520px; padding: 0px 24px; } .simple-list__image { width: 100%; max-width: none; margin: 24px 0px 0px; } .simple-list__image img { height: 175px; width: auto; } .simple-list__info { max-width: unset; padding: 24px 0px; margin: 0px; } .simple-list__name { flex-direction: row; align-items: center; width: 100%; gap: 17px; } .simple-list__name .gradient-main { display: flex; } .simple-list__name-value { min-width: unset; } .simple-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } .simple-list__icon { display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: var(--btn-gradient-main); min-width: 48px; height: 48px; color: var(--light-font); } .simple-list__pagination { background-color: var(--grey-background); padding: 0; } .simple-items.content-block { margin: 0px; padding: 24px 0px; } .simple-items__title.title { text-align: center !important; padding: 0px 24px; } .simple-items.content-block--grey { margin: 0px; padding: 48px 0px; } } .list-with-image.content-block { width: 100%; position: relative; z-index: 0; } .list-with-image.content-block.content-block--grey { position: relative; overflow: hidden; } .list-with-image__wrap.container { position: relative; z-index: 2; min-height: 420px; padding: 0px 12px; display: flex; flex-direction: column; gap: 48px; } .list-with-image__list { max-width: 700px; display: flex; flex-direction: column; gap: 12px; } .list-with-image__item { min-height: 100px; display: flex; align-items: center; flex-direction: row; gap: 16px; } .list-with-image__subtitle { margin-bottom: 12px; } .list-with-image__image { position: absolute; z-index: 0; right: 0; top: 0; width: 50%; height: 100%; } .list-with-image__image:after { left: 0; top: 0; display: block; content: ""; z-index: 1; width: 100%; height: 100%; position: absolute; background: linear-gradient(90deg, var(--grey-background) 0%, rgba(245, 250, 253, 0) 30%); } .list-with-image__image img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .list-with-image__icon { min-width: 82px; max-width: 82px; height: 82px; display: flex; align-items: center; position: relative; } .list-with-image__icon .svg_children_figure { position: absolute; z-index: 1; left: calc(50% - 33px - 3px); top: calc(50% - 33px - 4px); width: 100%; height: auto; aspect-ratio: 1/1; } .list-with-image__icon .svg_children_small { width: 30px; height: 30px; left: calc(50% - 15px); top: calc(50% - 15px); position: absolute; z-index: 2; } .list-with-image_circle-container { border: 5px solid var(--main); width: 100%; height: 100%; border-radius: 50px; display: flex; justify-content: center; align-items: center; } .list-with-image_circle-wrap { width: 50px; height: 50px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--light-font); } .list-with-image.content-block.content-block--grey { margin: 48px 0px; } @media only screen and (max-width: 1080px) { .list-with-image__image { position: absolute; z-index: 0; right: 0; top: 0; width: 100%; height: 100%; } .list-with-image__image:before { content: ""; position: absolute; inset: 0; background-color: var(--grey-background); opacity: 0.6; z-index: 1; } .list-with-image__title { width: 100%; text-align: center; } .list-with-image__list { margin: 0 auto; } } @media only screen and (max-width: 640px) { .list-with-image.content-block.content-block--grey { display: flex; flex-direction: column-reverse; gap: 24px; border-radius: 32px; } .list-with-image__image { position: relative; z-index: 0; right: 0; top: 0; width: 100%; height: 100%; } .list-with-image__image::before { display: none; } .list-with-image__image:after { left: 0; top: -10px; display: block; content: ""; z-index: 1; width: 100%; height: 80px; position: absolute; background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, var(--grey-background) 75%); } .list-with-image__image img { height: 377px; -o-object-position: 5% 20%; object-position: 5% 20%; } .list-with-image__item { display: flex; flex-direction: column; } .list-with-image__content { text-align: center; } .list-with-image.content-block.content-block--grey { padding: 0px; padding-top: 24px; } .list-with-image__list { gap: 24px; } } .number-items.content-block--grey .number-items__list { background-color: var(--light-background); } .number-items__wrap.container { display: flex; flex-direction: column; } .number-items__title.title { margin-top: 0px; margin-bottom: 20px; } .number-items__list { display: flex; flex-direction: column; gap: 16px; } .number-items__card { display: flex; flex-direction: row; width: 100%; min-height: 132px; background-color: var(--light-background); max-width: 700px; padding: 32px; border-radius: 16px; } .number-items__num { min-width: 45px; height: 45px; display: flex; align-items: center; } .number-items__num h2 { margin: 0px; color: var(--main); } .number-items__content { display: flex; flex-direction: column; gap: 8px; } .number-items__title.title { margin-bottom: 24px; } .number-items__list-grey { background-color: var(--grey-background) !important; } .number-items__card { max-width: none; background-color: var(--light-background); } .number-items__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .number-items__image { width: 90px; min-width: 90px; height: 90px; border-radius: 50px; overflow: hidden; background-color: var(--grey-background); display: flex; justify-content: center; align-items: center; } .number-items__image img { width: 75px; height: 75px; border-radius: 50px; } .number-items__name-image { display: flex; flex-direction: row; align-items: center; gap: 12px; } .number-items__num-image { display: none; } .number-items__title.title { margin-bottom: 48px; } .number-items__price { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 640px) { .number-items.content-block { padding: 24px 0px; } .number-items__title.title { text-align: center !important; padding: 0px 24px; } .number-items.content-block--grey { padding: 48px 0px; } } .description-block.content-block { padding: 24px 0px; } .description-block .title { margin-bottom: 32px; } .description-block__title-bottom-border::after { display: block; content: ""; margin-top: 8px; width: 70%; height: 3px; background-color: var(--main); transition: all 1.5s ease-out; } .description-block__content { display: block; } .description-block__service { margin-top: 24px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: center; padding: 0px; } .description-block__quote { position: relative; width: 100%; min-height: 100px; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); margin: 0 auto; border-radius: 24px; margin-top: 16px; } .description-block__quote-icon { position: absolute; z-index: 1; display: flex; left: calc(50% - 27px); top: -24px; width: -moz-fit-content; width: fit-content; justify-content: center; align-items: center; padding: 8px; background-color: var(--light-background); border: 1px solid var(--border-grey); color: var(--main); border-radius: 50px; } .description-block__quote-content { padding: 48px 24px 24px 24px; width: 100%; height: -moz-fit-content; height: fit-content; } .description-block__text_after { width: 100%; height: -moz-fit-content; height: fit-content; margin-top: 16px; } .description-block__admin-row { width: 1200px; } .description-block__admin-hover > section > div { width: 320px; padding: 24px; border-radius: 24px; transition: all 0.5s ease; } .description-block__admin-hover > section > div:hover { background-color: var(--grey-background); } .description-block__admin_postavit-koronku-grid { border-radius: 24px; display: flex; flex-direction: row; gap: 12px; justify-content: space-between; padding: 24px; } .description-block__admin_postavit-koronku-main { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); } .description-block__admin-postavit-brekety-top { display: flex; flex-direction: row; justify-content: start; gap: 24px; } .description-block__admin-postavit-brekety-top > div { padding: 24px; flex: 0.5; } .description-block__admin-postavit-brekety-top > div:last-of-type { display: flex; background-color: var(--grey-background); border-radius: 60px; flex-direction: column !important; justify-content: center; align-items: center; text-align: center !important; } .description-block__admin-postavit-brekety-top > div:last-of-type > h4 { max-width: 300px; } .description-block__admin-postavit-brekety-bottom { display: flex; flex-direction: row; gap: 24px; margin-bottom: 24px; } .description-block__admin-postavit-brekety-bottom > div { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .description-block__admin-postavit-brekety-bottom > div::before { content: ""; position: absolute; inset: 0; background-color: var(--grey-background); opacity: 0.6; z-index: 1; } .description-block__admin-postavit-brekety-bottom > div img, .description-block__admin-postavit-brekety-bottom > div h4 { background-color: var(--light-background); z-index: 2; } .description-block__admin-postavit-brekety-bottom > div h4 { padding: 12px; border-radius: 24px; } .description-block__admin-postavit-brekety-bottom > div:first-of-type { background-image: url(/images/services/postavit-brekety-ispravit-prikus/braces-out.webp); } .description-block__admin-postavit-brekety-bottom > div:last-of-type { background-image: url(/images/services/postavit-brekety-ispravit-prikus/braces-in_.webp); } .description-block__admin-postavit-brekety-bottom > div { display: flex; overflow: hidden; flex: 0.5; border-radius: 60px; padding: 24px; flex-direction: column !important; justify-content: center; align-items: center; text-align: center !important; } @media (max-width: 1300px) { .description-block__admin-row { width: 900px; } } @media (max-width: 1080px) { .description-block.content-block { padding: 0px; } .description-block__admin-row { width: 100%; } } @media (max-width: 640px) { .description-block.content-block { padding: 0px; } .description-block.title { text-align: center !important; } .description-block__text { padding: 0px 12px; } .description-block__text img { border-radius: 32px; } .description-block__text p { display: block; } .description-block__text div { border-radius: 20px !important; } .description-block__content { display: flex; flex-direction: column; padding: 0px !important; } .description-block__image { display: flex; flex-direction: column; align-items: center; } .description-block__image img { max-height: 256px; } .description-block__quote-content .blockquote { padding: 0px !important; margin: 0px !important; } .description-block tr { display: flex; flex-direction: column; align-items: center; } .description-block tr p { text-align: center; } .description-block__admin_postavit-koronku-grid { flex-direction: column-reverse; text-align: center; } .description-block__admin_postavit-koronku-main { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .description-block__admin-mobile-align-center { display: flex; flex-direction: column !important; align-items: center; text-align: center; } .description-block__admin-mobile-image { width: 96%; } .description-block__title-bottom-border::after { display: block; content: ""; margin: 8px auto 0px auto; width: 50%; height: 3px; background-color: var(--main); transition: all 1.5s ease-out; } .description-block__service { justify-content: center; } .description-block__admin-postavit-brekety { display: flex; flex-direction: column; gap: 24px; } .description-block__admin-postavit-brekety-top { flex-direction: column; width: 100%; } .description-block__admin-postavit-brekety-bottom { flex-direction: column; width: 100%; } .description-block__admin-postavit-brekety-bottom > div { flex: 1; width: 100%; } } .free-description__children-content-column { display: flex; flex-direction: column; } @media (max-width: 640px) { .free-description__children-content-column { display: block; } } .free-description__title { margin: 0 0 32px; } .free-description__subtitle p { margin-bottom: 8px; } .free-description__subtitle p:last-child { margin-bottom: 0; } .free-description__container { display: flex; justify-content: space-between; gap: 24px; } .free-description__container.custom-padding { margin: 0px; padding: 0px; display: flex; flex-direction: row; justify-content: space-between; } .free-description__image.with-height { display: flex; align-items: center; justify-content: center; overflow: hidden; } .free-description__image.with-height img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .free-description__image--left { margin-right: 64px; } .free-description__image--right { margin-left: 64px; } .free-description__content { width: 100%; height: -moz-fit-content; height: fit-content; display: block; margin: auto 0; padding: 0px; } .free-description__content.notice { max-width: 895px; } .free-description__text { display: flex; } .free-description__text-wrap { flex-grow: 1; } .free-description__text-after { margin: 32px 0 0 0; } .free-description__notice { width: 100%; max-width: 388px; background-color: var(--grey-background); border-radius: 24px; padding: 24px 60px; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 178px; } .free-description__notice-icon { width: 24px; height: 24px; margin: 0 auto 16px; } .free-description__notice-text { text-align: center; } .free-description__image { max-width: 512px; width: 100%; overflow: hidden; } .free-description__image.with-height { display: flex; align-items: center; justify-content: center; } .free-description__image.with-height img { max-width: unset; height: 100%; } .free-description__image--left { max-height: 720px; margin-right: 64px; } .free-description__image--left.with-height { width: 100%; max-width: 700px; position: relative; z-index: 1; justify-content: start; } .free-description__image--left.with-height:before { display: block; position: absolute; z-index: 2; content: ""; top: 0; right: 0px; width: 200px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--grey-background) 85%); } .free-description__image--right { max-height: 720px; margin-left: 64px; } .free-description__image--right.with-height { width: 100%; max-width: 700px; position: relative; z-index: 1; justify-content: end; } .free-description__image--right.with-height:before { display: block; position: absolute; z-index: 2; content: ""; top: 0; left: 0px; width: 200px; height: 100%; background: linear-gradient(90deg, var(--grey-background) 15%, rgba(255, 255, 255, 0) 100%); } .free-description h2 { font-weight: 500; line-height: 140%; } .free-description h3 { width: 100%; } @media (max-width: 1080px) { .free-description__container--background { position: relative; min-height: 420px; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; } .free-description__container--background::before { content: ""; position: absolute; inset: 0; background-color: var(--grey-background); opacity: 0.8; z-index: 1; } .free-description__container--background .free-description__content { position: relative; z-index: 2; } .free-description__container.custom-padding { display: flex; gap: 12px; } .free-description__image.free-description__image--left.with-height, .free-description__image.free-description__image--right.with-height { max-width: 90% !important; width: auto !important; height: 420px !important; } .free-description__image--right, .free-description__image--left { margin: 0px auto !important; } } @media (max-width: 800px) { .free-description__container.custom-padding { display: flex; gap: 0px; } .free-description.content-block { margin: 0px !important; padding: 20px 0px !important; } .free-description__content { padding: 0px !important; } .free-description__text-wrap { padding: 0px 24px; display: flex; flex-direction: column; align-items: center; } .free-description__container.custom-padding { display: flex; flex-direction: column-reverse; align-items: center; padding-top: 24px !important; padding-bottom: 24px !important; justify-content: center; overflow: hidden; } .free-description__image { border-radius: 24px !important; margin-bottom: 24px !important; } .free-description__image.free-description__image--left.with-height, .free-description__image.free-description__image--right.with-height { width: 100%; max-width: none; position: relative; margin: 0 auto; -webkit-mask-image: none; mask-image: none; } .free-description__image__text-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .free-description__image.free-description__image--right img, .free-description__image.free-description__image--left img { margin: 0 auto; } .free-description__title { padding: 0px 12px; } .free-description__content { width: 100% !important; } } @media (max-width: 640px) { .free-description__image.free-description__image--left.with-height { z-index: 1; justify-content: center; width: 87%; max-height: 320px !important; margin-bottom: 0px !important; } .free-description__image.free-description__image--left.with-height img { width: 100%; } .free-description__image.free-description__image--left.with-height::after, .free-description__image.free-description__image--left.with-height::before { display: none; } .free-description__image.free-description__image--right.with-height { z-index: 1; justify-content: center; width: 87%; max-height: 320px !important; margin-bottom: 0px !important; } .free-description__image.free-description__image--right.with-height img { width: 100%; } .free-description__image.free-description__image--right.with-height::after, .free-description__image.free-description__image--right.with-height::before { display: none; } .free-description__image.free-description__image--right, .free-description__image.free-description__image--left { min-width: 80% !important; max-height: 320px !important; } .free-description__image.free-description__image--right img, .free-description__image.free-description__image--left img { width: 100%; -o-object-fit: cover; object-fit: cover; max-height: 420px; } .free-description__container { border-radius: 32px !important; display: flex; gap: 12px; } .free-description__container.custom-padding { padding: 48px 12px !important; } .free-description__subtitle { padding: 0px 12px; margin: 12px 0px !important; } .free-description__title { margin-bottom: 12px !important; } .free-description__admin_table_grid { margin: 0px -12px; } .free-description__container { display: flex; flex-direction: column; } } @media (max-width: 480px) { .free-description__image.free-description__image--left.with-height, .free-description__image.free-description__image--right.with-height { width: 100%; height: 100% !important; } } .description-two-column .title { margin-bottom: 48px; } .description-two-column__subtitle { line-height: 19.6px; margin-bottom: 32px; max-width: 640px; } .description-two-column__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -1%; } .description-two-column__col { width: 100%; max-width: 48%; line-height: 19.6px; } .description-two-column__text-after { margin-top: 32px; line-height: 19.6px; } .description-two-column__warning { display: flex; align-items: center; position: relative; gap: 10px; } .description-two-column__info { display: flex; flex-direction: row; align-items: start; gap: 14px; } .description-two-column__info svg { margin-top: 6px; } .description-two-column__table { display: flex; flex-direction: row; justify-content: space-between; } .description-two-column__image_resized { min-width: 128px; min-height: 128px; } .description-two-column__fixed { padding: 42px 48px; } @media (max-width: 900px) { .description-two-column__subtitle { text-align: center; } .description-two-column__wrap { padding: 0px 12px; } .description-two-column__row { display: flex; flex-direction: column; align-items: center; } .description-two-column__col { max-width: none; padding: 24px 24px 0px 24px !important; } .description-two-column__col img { height: auto; border-radius: 28px; } .description-two-column h3 { text-align: center; } .description-two-column__table { flex-direction: column; gap: 24px; } .description-two-column__table > div > p { text-align: center; max-width: none !important; } .description-two-column__table > div > ul { width: -moz-fit-content; width: fit-content; margin: 0 auto; text-align: center; margin-bottom: 16px; } .description-two-column__table img { margin: 0 auto; } .description-two-column.content-block { padding: 0px; } .description-two-column__fixed { padding: 24px 0px; } .description-two-column__minus { text-align: center; } .description-two-column__row { border-radius: 32px !important; } } @media (max-width: 640px) { .description-two-column__row { border-radius: 32px !important; } } .description-image { position: relative; overflow: hidden; z-index: 0; min-height: 100%; } .description-image::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--grey-background) 50%, rgba(245, 250, 253, 0) 65%); z-index: 0; } .description-image::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--grey-background) 40%, rgba(245, 250, 253, 0) 72%); z-index: 0; pointer-events: none; } .description-image__wrap { max-width: 692px; position: relative; z-index: 1; } .description-image__wrap .title { margin-bottom: 32px; } .description-image__text { width: 500px; } .description-image__action { position: relative; z-index: 1; margin-top: 48px; pointer-events: auto; } .description-image__action .btn { padding: 22px 24px; line-height: 19.6px; pointer-events: auto; } .description-image__action svg { pointer-events: none; } .description-image__image { height: 100%; width: 880px; background-size: cover; background-repeat: no-repeat; background-position: right; position: absolute; top: 0; right: 0; z-index: -1; } .title.description-image__title { max-width: 650px; } @media (max-width: 1400px) { .description-image::before { background: var(--grey-background-gradient); } .description-image .description-image__image::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 100%; background: linear-gradient(90deg, var(--grey-background) 50%, rgba(245, 250, 253, 0) 65%); } } @media (max-width: 640px) { .description-image.content-block.content-block--grey { margin: 0px auto; width: calc(100% - 24px); padding: 48px 24px; margin-top: 32px; } .description-image__text { width: 300px; } .description-image__image { background-position: center; width: 640px; } .description-image__image::after { display: none; } .description-image__wrap { display: flex; flex-direction: column; align-items: center; } .description-image__text { text-align: center; } } .description__color-list { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50px; margin-right: 12px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); color: var(--light-font); } .description-video__title { margin: 0 0 32px; } .description-video__subtitle { max-width: 390px; } .description-video__subtitle p { margin-bottom: 8px; } .description-video__subtitle p:last-child { margin-bottom: 0; } .description-video__subtitle > div { margin: 15px 15px 0px 15px; } .description-video__container { display: flex; flex-direction: row; justify-content: space-between; margin: 0px; padding: 0px; gap: 160px; } .description-video__content { height: -moz-fit-content; height: fit-content; padding: 0px; display: block; margin: 0px; width: 100%; } .description-video__content.notice { max-width: 895px; } .description-video__text { display: flex; } .description-video__text-wrap { flex-grow: 1; } .description-video__text-wrap p { margin-bottom: 20px; } .description-video__text-wrap p:last-child { margin-bottom: 0; } .description-video__text-wrap h3 { max-width: 480px; line-height: 140%; } .description-video__text-wrap > div { margin-top: 96px; } .description-video__text-wrap > div:first-of-type { margin-top: 0px; } .description-video__text-before { margin-bottom: 48px; } .description-video__text-before > p { margin-bottom: 4px; } .description-video__text-after { margin: 32px 0 0 0; line-height: 19.6px; } .description-video__notice { width: 100%; max-width: 388px; background-color: var(--grey-background); border-radius: 24px; padding: 24px 60px; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 178px; } .description-video__notice-icon { width: 24px; height: 24px; margin: 0 auto 16px; } .description-video__notice-text { text-align: center; } .description-video__video { position: relative; margin: 15px; } .description-video__video .video-preview { width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .description-video__video .video-preview .video-play-button { width: 60px; height: 60px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3 ease; } .description-video__video .video-preview .video-play-button:hover { background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); transition: all 0.3 ease; } .description-video__video .video-preview .video-play-button svg { width: 30px; height: 30px; } .description-video__video iframe { border-radius: 20px; } .description-video__card-video { max-width: 390px; display: flex; flex-direction: column; align-items: center; max-height: none; height: -moz-fit-content; height: fit-content; } .description-video__preview.video-preview { position: relative; z-index: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .description-video__preview.video-preview .description-video__video-image { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .description-video__preview.video-preview .description-video__video-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .description-video__preview.video-preview .description-video__cover-box { position: absolute; z-index: 1; width: 100%; height: 100%; padding: 32px; display: flex; flex-direction: column-reverse; justify-content: space-between; cursor: default; } .description-video__preview.video-preview .description-video__cover-play { display: flex; flex-direction: row; gap: 16px; align-items: center; } .description-video__preview.video-preview .description-video__cover-play > div { cursor: pointer; } .description-video__preview.video-preview .description-video__cover-play p { margin-top: 5px; } .description-video__button { width: 100%; } .description-video__button .btn.btn-primary { width: 100%; max-width: none; } .description-video__image.description-video__image { position: relative; } .description-video__image.description-video__image img { border-radius: 16px; display: block; } .description-video__image.description-video__image::after { position: absolute; width: 100%; height: 100%; background: url("/images/video-pattern.webp"), linear-gradient(90deg, rgba(0, 0, 0, 0.45) 38.4%, rgba(0, 0, 0, 0) 100%); background-size: 3px 3px, auto; border-radius: 16px; content: ""; top: 0; left: 0; pointer-events: none; } .description-video__text-wrap { border-radius: 24px; } .description-video__card-video { background-color: var(--grey-background); border-radius: 24px; padding: 24px 48px; } @media (max-width: 1200px) { .description-video__container { gap: 50px; } } @media (max-width: 1000px) { .description-video__card-video { padding: 20px !important; } .description-video__change-face { height: 546px !important; } } @media (max-width: 800px) { .description-video__container { gap: 20px; flex-direction: column; align-items: center; } .description-video__text-wrap h3 { max-width: none; } .description-video__text-wrap > div { margin-top: 24px; } .description-video__text-wrap > div:first-of-type { margin-top: 0px; } .description-video__card-video { width: 100% !important; max-width: none !important; } .description-video__video.description-video__video { width: 100% !important; height: -moz-fit-content !important; height: fit-content !important; } .description-video__cover-box { width: 100% !important; left: 0 !important; right: 0 !important; } .description-video__cover-play { justify-content: center; } .description-video__cover-title { width: 90%; margin: 0 auto; text-align: center; } .description-video__button { display: flex; align-items: center; justify-content: center; } .description-video__button .btn.btn-primary { width: 50%; min-width: 220px; } .description-video__change-face { height: auto !important; } } @media (max-width: 640px) { .description-video__card-video { border-radius: 32px !important; } .description-video__change-face img { border-radius: 32px !important; } .description-video__button .btn.btn-primary { width: 100%; } } .tabs-vertical__title { margin-bottom: 48px; } .tabs-vertical__wrap.container { min-height: 400px; } .tabs-vertical__container { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .tabs-vertical__list { width: 100%; max-width: 335px; margin-right: 32px; } .tabs-vertical__list-item { border-radius: 16px; overflow: hidden; position: relative; z-index: 1; margin-bottom: 8px; cursor: pointer; } .tabs-vertical__list-item.active { cursor: auto; } .tabs-vertical__list-item:last-child { margin-bottom: 0; } .tabs-vertical__list-title { width: 335px; padding: 10px 32px; background-color: var(--light-background); min-height: 80px; display: flex; flex-direction: column; justify-content: center; border-radius: 16px; position: relative; transition: width 0.2s ease; z-index: 3; } .tabs-vertical__list-title.active { width: 292px; } .tabs-vertical__list-name { line-height: 19.6px; } .tabs-vertical__list-subname { font-weight: 600; color: var(--grey-font); margin-top: 4px; } .tabs-vertical__list-icon { z-index: 2; position: absolute; width: 60px; height: 100%; display: flex; align-items: center; justify-content: flex-end; border-bottom-right-radius: 16px; border-top-right-radius: 16px; top: 0; right: 2px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .tabs-vertical__list-icon svg { margin-right: 12px; } .tabs-vertical__items { max-width: 830px; width: 100%; border-radius: 16px; padding: 12px 24px; background-color: var(--light-background); } .tabs-vertical__item { align-items: flex-start; justify-content: space-between; display: none; } .tabs-vertical__item.active { display: flex; } .tabs-vertical__item-image { width: 100%; max-width: 240px; margin-right: 24px; border-radius: 32px; overflow: hidden; } .tabs-vertical__item-text { line-height: 19.6px; width: 100%; max-width: 500px; } .tabs-vertical__item-text p { margin-bottom: 12px; } @media (max-width: 640px) { .tabs-vertical__container { display: flex; flex-direction: column; align-items: center; } .tabs-vertical__items { padding: 60px 24px 0px 24px; } .tabs-vertical__items.active { display: flex; flex-direction: column; gap: 24px; align-items: center; } .tabs-vertical__item { height: -moz-fit-content; height: fit-content; } .tabs-vertical__item.active { display: flex; flex-direction: column; gap: 12px; } .tabs-vertical__item-image { margin: 0 auto; display: flex; justify-content: center; align-items: center; } .tabs-vertical__list { margin: 0px; } } .tabs-loss-tooth { line-height: 19.6px; } .tabs-loss-tooth__content { max-width: 500px; } .tabs-loss-tooth p { margin-top: 8px; } .tabs-loss-tooth p:first-child { margin-top: 0; } .tabs-loss-tooth__subtitle { line-height: 22.4px; } .tabs-loss-tooth__image { border-radius: 16px; overflow: hidden; } .tabs-loss-tooth__image img { width: 100%; } .tabs-loss-tooth__video { border-radius: 16px; position: relative; overflow: hidden; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; max-width: 500px; height: 280px; margin: 16px 0; } .tabs-loss-tooth__video::after { position: absolute; width: 100%; height: 100%; background: url("/images/video-pattern.webp"), linear-gradient(90deg, rgba(0, 0, 0, 0.45) 38.4%, rgba(0, 0, 0, 0) 100%); background-size: 3px 3px, auto; border-radius: 16px; content: ""; top: 0; left: 0; z-index: 2; pointer-events: none; } .tabs-loss-tooth__video-name { line-height: 25.2px; color: var(--light-font); position: absolute; top: 32px; left: 32px; width: calc(100% - 32px); z-index: 3; } .tabs-loss-tooth__video-button { position: absolute; bottom: 32px; left: 32px; display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; } .tabs-loss-tooth__video-button:hover .tabs-loss-tooth__video-icon::before { opacity: 1; } .tabs-loss-tooth__video-icon { width: 48px; height: 48px; position: relative; display: flex; align-items: center; justify-content: center; margin-right: 16px; z-index: 1; border-radius: 50%; } .tabs-loss-tooth__video-icon svg { position: relative; z-index: 4; } .tabs-loss-tooth__video-icon::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border: 1.5px solid var(--light-font); opacity: 0.3; border-radius: inherit; z-index: 2; } .tabs-loss-tooth__video-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); opacity: 0; transition: opacity 0.2s ease; border-radius: inherit; z-index: 3; } .tabs-loss-tooth__video-sign { line-height: 22.4px; color: var(--light-font); width: 100%; max-width: 80px; } .tabs-loss-tooth__flex { display: flex; flex-wrap: wrap; align-items: flex-start; margin: -1%; } .tabs-loss-tooth__flex > div { margin: 1%; width: 100%; max-width: 48%; } .tabs-vertical__list-icon svg { margin-right: 12px; } .tabs-horizontal__title { margin-bottom: 48px; } .tabs-horizontal__wrap.container { min-height: 400px; } .tabs-horizontal__container { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .tabs-horizontal__list { width: 100%; max-width: 335px; margin-right: 32px; } .tabs-horizontal__list-item { border-radius: 16px; overflow: hidden; position: relative; z-index: 1; margin-bottom: 8px; cursor: pointer; } .tabs-horizontal__list-item.active { cursor: auto; } .tabs-horizontal__list-item:last-child { margin-bottom: 0; } .tabs-horizontal__list-title { width: 335px; padding: 10px 32px; background-color: var(--light-background); min-height: 80px; display: flex; flex-direction: column; justify-content: center; border-radius: 16px; position: relative; transition: width 0.2s ease; z-index: 3; } .tabs-horizontal__list-title.active { width: 292px; } .tabs-horizontal__list-name { line-height: 19.6px; } .tabs-horizontal__list-subname { font-weight: 600; color: var(--grey-font); margin-top: 4px; } .tabs-horizontal__list-icon { z-index: 2; position: absolute; width: 60px; height: 100%; display: flex; align-items: center; justify-content: flex-end; border-bottom-right-radius: 16px; border-top-right-radius: 16px; top: 0; right: 2px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .tabs-horizontal__list-icon svg { margin-right: 12px; } .tabs-horizontal__items { max-width: 830px; width: 100%; border-radius: 16px; padding: 12px 24px; background-color: var(--light-background); } .tabs-horizontal__item { align-items: flex-start; justify-content: space-between; display: none; } .tabs-horizontal__item.active { display: flex; } .tabs-horizontal__item-image { width: 100%; max-width: 240px; margin-right: 24px; border-radius: 32px; overflow: hidden; } .tabs-horizontal__item-text { line-height: 19.6px; width: 100%; max-width: 500px; } .tabs-horizontal__item-text p { margin-bottom: 12px; } @media (max-width: 640px) { .tabs-horizontal__container { display: flex; flex-direction: column; align-items: center; } .tabs-horizontal__items { padding: 60px 24px 0px 24px; } .tabs-horizontal__items.active { display: flex; flex-direction: column; gap: 24px; align-items: center; } .tabs-horizontal__item { height: -moz-fit-content; height: fit-content; } .tabs-horizontal__item.active { display: flex; flex-direction: column; gap: 12px; } .tabs-horizontal__item-image { margin: 0 auto; display: flex; justify-content: center; align-items: center; } .tabs-horizontal__list { margin: 0px; } } .comfort-payment { background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 0; position: relative; overflow: hidden; } .comfort-payment__wrap { padding: 80px 0; display: flex; justify-content: space-between; flex-direction: column; min-height: 463px; box-sizing: content-box; } .comfort-payment__image { position: absolute; bottom: 0; right: 0; height: 100%; width: 974px; display: flex; align-items: flex-end; } .comfort-payment__title { margin-bottom: 32px; } .comfort-payment__list { max-width: 700px; } .comfort-payment__item { display: flex; align-items: center; margin-bottom: 24px; } .comfort-payment__item:last-child { margin-bottom: 0; } .comfort-payment__icon { width: 100%; max-width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .comfort-payment__text { max-width: 450px; } .comfort-payment__action .btn { margin-top: 32px; line-height: 19.6px; padding: 22px 24px; } .comfort-payment__down-content { display: none; } .comfort-payment__content { padding: 0px 24px; } @media (max-width: 1500px) { .comfort-payment__image { width: 700px; } } @media (max-width: 1300px) { .comfort-payment__image { width: 600px; } } @media (max-width: 1100px) { .comfort-payment__image { width: 400px; } } @media (max-width: 640px) { .comfort-payment.content-block.content-block--grey { height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; overflow: visible; padding-bottom: 0px; background-color: var(--light-background); } .comfort-payment { background-image: none; background-color: var(--grey-background); z-index: 1; } .comfort-payment__wrap { min-height: 200px; } .comfort-payment__wrap.container { padding-top: 0px; position: relative; min-height: none; padding-bottom: 0px; } .comfort-payment__content { padding: 48px 0px; border-radius: 32px; display: flex; flex-direction: column; align-items: center; min-height: none; z-index: 2; background-color: var(--grey-background); } .comfort-payment__down-content { position: relative; margin-bottom: -32px; background-image: linear-gradient(90deg, var(--grey-background-gradient) 0%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); background-position: 80% 50%; width: 100%; z-index: 1; max-height: 256px; height: -moz-fit-content; height: fit-content; min-height: 220px; display: flex; align-items: end; justify-content: center; border-radius: 32px 32px 0px 0px; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; opacity: 0.2; transition-delay: 1s; } .comfort-payment__down-content.active { transform: translateY(0); opacity: 1; } .comfort-payment__down-image-wrap { position: relative; display: flex; align-items: end; justify-content: center; height: 100%; max-width: 100%; height: 2; } .comfort-payment__down-image-wrap img { display: block; max-height: 256px; max-width: 95%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } .comfort-payment__title { margin-bottom: 44px; } .comfort-payment__list { padding: 0px 35px; padding-bottom: 42px; } .comfort-payment__image { display: none; } .comfort-payment__action .btn { margin-top: 0px; } .title.comfort-payment__title { text-align: center; } .comfort-payment__image { width: 100%; } } .faq__title { margin-bottom: 48px; } .faq__content { display: flex; align-items: flex-start; justify-content: space-between; } .faq__list { width: 100%; max-width: 1038px; padding: 8px; background-color: var(--grey-background); border-radius: 24px; } .faq__item { border-radius: 16px; transition: background-color 0.2s ease; margin-bottom: 24px; } .faq__item.active { background-color: var(--light-background); } .faq__item.active .faq__question-icon { transform: rotate(180deg); } .faq__item.active .faq__question-icon svg { stroke: var(--main); } .faq__item:last-child { margin-bottom: 0; } .faq__question { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 24px 32px 26px; } .faq__question-text { line-height: 22.4px; } .faq__question-icon { transition: transform 0.2s ease; margin-left: 24px; } .faq__question-icon svg { stroke: var(--main-font); } .faq__answer { overflow: hidden; height: 0; transition: height 0.2s ease; } .faq__answer-wrap { padding: 6px 56px 24px 32px; } .faq__aside { width: 100%; max-width: 338px; margin-left: 24px; border-radius: 24px; background-color: var(--grey-background); padding: 32px; } .faq__aside-image { width: 96px; height: 96px; overflow: hidden; border-radius: 50%; margin: 0 auto 16px; display: flex; justify-content: center; } .faq__aside-image img { max-width: unset; } .faq__aside-title { line-height: 22.4px; margin-bottom: 16px; text-align: center; } .faq__aside-title span { display: block; } .faq__aside-subtitle { text-align: center; margin-bottom: 48px; } .faq__aside-action { display: flex; justify-content: center; } .faq__aside-action .btn { line-height: 19.6px; } #faq-block .faq__item { border: 1px solid var(--border-grey); background: var(--light-background); } @media (max-width: 900px) { .faq.content-block { padding: 0px; } } @media (max-width: 640px) { .faq.content-block { padding: 0px; } .faq__content { display: flex; flex-direction: column; align-items: center; gap: 15px; } .faq__aside { margin: 0px; max-width: none; width: 100%; } } .advantages-nums-items .title { margin-bottom: 48px; } .advantages-nums-items .title--with-subtitle { margin-bottom: 16px; } .advantages-nums-items__subtitle { margin-bottom: 48px; line-height: 19.6px; max-width: 692px; } .advantages-nums-items__wrap { display: flex; } .advantages-nums-items__nums { max-width: 928px; width: 100%; border-radius: 64px; padding: 48px 32px; display: flex; background-color: var(--grey-background); } .advantages-nums-items__nums-item { height: 100%; position: relative; padding: 0 32px; } .advantages-nums-items__nums-item::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 1.5px; background-color: var(--dark-font); opacity: 0.1; z-index: 2; } .advantages-nums-items__nums-item:last-child::after { display: none; } .advantages-nums-items__nums-value { line-height: 70px; margin-bottom: 24px; text-transform: uppercase; } .advantages-nums-items__nums-value span:nth-child(2) { color: var(--border-grey); padding-left: 6px; } .advantages-nums-items__nums-value--accent { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); background-clip: text; -webkit-background-clip: text; -ms-background-clip: text; -webkit-text-fill-color: transparent; -ms-text-fill-color: transparent; } .advantages-nums-items__nums-title { line-height: 22.4px; margin-bottom: 24px; min-height: 44px; } .advantages-nums-items__nums-text { line-height: 19.6px; } .advantages-nums-items__items { margin-left: 16px; border-radius: 64px; background-color: var(--grey-background); padding: 0 48px 48px; width: 100%; max-width: 455px; } .advantages-nums-items__items--no-image { padding: 48px; } .advantages-nums-items__items-image { position: relative; max-width: 256px; width: 100%; height: 208px; margin: 0 auto; } .advantages-nums-items__items-image > div { position: absolute; bottom: 0; left: 0; width: 100%; height: 256px; } .advantages-nums-items__items-title { line-height: 22.4px; margin-bottom: 32px; text-align: center; } .advantages-nums-items__items-title { display: none; } .advantages-nums-items__items-list { display: flex; align-items: flex-start; margin: -8px; flex-wrap: wrap; } .advantages-nums-items__items-element { position: relative; border-radius: 16px; border: 1.5px solid var(--border-grey); padding: 20px 16px; align-self: stretch; width: 100%; max-width: 171px; margin: 8px; } .advantages-nums-items__items-icon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); display: flex; align-self: center; justify-content: center; border-radius: 50%; } .advantages-nums-items__items-value { line-height: 19.6px; min-height: 40px; text-align: center; display: flex; align-items: center; justify-content: center; } .advantages-nums-items__text_after { margin-top: 32px; line-height: 19.6px; max-width: 692px; } @media (max-width: 1100px) { .advantages-nums-items__nums { max-width: none; width: 100%; } .advantages-nums-items__wrap { display: flex; flex-direction: column; gap: 12px; } .advantages-nums-items__items { margin: 0px; max-width: none; width: 100%; } .advantages-nums-items__items-list { display: grid; -moz-column-gap: 12px; column-gap: 12px; row-gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .advantages-nums-items__items-element { margin: 0px; max-width: none; } } @media (max-width: 800px) { .advantages-nums-items__items { margin: 0px; padding: 0px 36px 48px 36px; } .advantages-nums-items__items-title { display: block; margin-bottom: 48px; } .advantages-nums-items__items-list { display: grid; -moz-column-gap: 12px; column-gap: 12px; row-gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .advantages-nums-items__items-element { margin: 0px; max-width: none; } .advantages-nums-items__items-icon { width: 16px; height: 16px; } .advantages-nums-items__items-icon svg { width: 16px; height: 16px; } .advantages-nums-items__nums { display: flex; flex-direction: column; gap: 32px; padding: 32px 24px; } .advantages-nums-items__nums > div { text-align: center; padding: 0px; } .advantages-nums-items__nums > div::after { display: none; } .advantages-nums-items__nums-title { margin-bottom: 12px; } .advantages-nums-items.content-block { padding: 0px; } } @media (max-width: 640px) { .advantages-nums-items__nums { border-radius: 32px; } .advantages-nums-items__items { border-radius: 32px; } } .advantages-services__wrap { display: flex; align-items: flex-start; justify-content: space-between; } .advantages-services__advantages { width: 100%; max-width: 700px; margin-right: 32px; } .advantages-services__advantages .title { margin-bottom: 48px; } .advantages-services__advantages-wrap { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin: -8px; background-color: var(--light-background); padding: 32px; border-radius: 64px; } .advantages-services__advantages-item { margin: 8px; width: 100%; max-width: 290px; display: flex; align-items: center; } .advantages-services__advantages-icon { width: 100%; max-width: 80px; height: 80px; background-color: var(--grey-background); border-radius: 16px; margin-right: 24px; display: flex; align-items: center; justify-content: center; } .advantages-services__advantages-icon svg { width: 48px; height: 48px; } .advantages-services__advantages-name { line-height: 19.6px; margin-bottom: 4px; } .advantages-services__advantages-description { line-height: 14px; color: var(--interface-grey); } .advantages-services__services .title { margin-bottom: 48px; } .advantages-services__services-item { display: flex; align-items: center; margin-bottom: 16px; } .advantages-services__services-item:last-child { margin-bottom: 0; } .advantages-services__services-item:hover .advantages-services__services-name { color: var(--main); } .advantages-services__services-item:hover svg { stroke: var(--main); } .advantages-services__services-icon { width: 100%; max-width: 48px; height: 48px; border-radius: 12px; background-color: var(--light-background); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .advantages-services__services-icon svg { width: 32px; height: 32px; stroke: var(--main-font); } .advantages-services__services-name { color: var(--main-font); transition: color 0.2s ease; } .advantages-services__wrap { display: flex; flex-direction: row; gap: 64px; } .advantages-services__wrap > div { flex: 0.5; } .advantages-services__advantages-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .advantages-services__advantages-item { width: 100%; max-width: none; margin: 0px; } .advantages-services__services-wrap-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media only screen and (max-width: 720px) { .advantages-services.content-block.content-block--grey { padding: 40px 0px; } .advantages-services__wrap { display: flex; flex-direction: column; gap: 24px; } .advantages-services__advantages { margin: 0px; padding: 0px 12px; } .advantages-services__services { width: 100%; padding: 0px 24px; } } @media (max-width: 640px) { .advantages-services__advantages-wrap { border-radius: 32px; } } .advantages-text-ratings__wrap { display: flex; justify-content: space-between; } .advantages-text-ratings__ratings { background-color: var(--grey-background); border-radius: 50px; padding: 0 48px; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 692px; margin-right: 16px; } .advantages-text-ratings__ratings-image { margin-left: 24px; max-width: 238px; } .advantages-text-ratings__advantages { background-color: var(--grey-background); border-radius: 50px; padding: 48px; width: 100%; max-width: 692px; } .advantages-text-ratings__advantages-wrap { display: flex; align-items: flex-start; justify-content: flex-start; margin: -13px -30px; flex-wrap: wrap; } .advantages-text-ratings__advantages-item { margin: 13px 30px; width: 100%; max-width: 268px; } .advantages-text-ratings__advantages-item--users { display: flex; align-items: flex-start; } .advantages-text-ratings__advantages-users { display: flex; align-items: center; justify-content: center; margin-left: 16px; margin-right: 20px; width: 100%; max-width: 96px; } .advantages-text-ratings__advantages-users > div { width: 100%; max-width: 48px; height: 48px; border-radius: 50%; overflow: hidden; margin-left: -16px; } .advantages-text-ratings__advantages-users > div:nth-child(1) { position: relative; z-index: 3; } .advantages-text-ratings__advantages-users > div:nth-child(2) { position: relative; z-index: 2; } .advantages-text-ratings__advantages-users > div:nth-child(3) { position: relative; z-index: 1; } .advantages-text-ratings__advantages-name { line-height: 33.6px; margin-bottom: 8px; } .advantages-text-ratings.content-block { padding: 0px; } .advantages-text-ratings__advantages-item--users { position: relative; z-index: 1; } .advantages-text-ratings__advantages-icon { min-width: 48px; width: 48px; height: 48px; padding: 8px 0px; display: flex; justify-content: center; align-items: center; margin-right: 16px; } .advantages-text-ratings__advantages-icon > svg { height: 48px; width: 48px; fill: none; stroke: var(--main); } .advantages-icon-ratings__wrap { display: flex; justify-content: space-between; } .advantages-icon-ratings__ratings { background-color: var(--grey-background); border-radius: 50px; padding: 0 48px; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; max-width: 692px; margin-right: 16px; } .advantages-icon-ratings__ratings-image { margin-left: 24px; max-width: 238px; } .advantages-icon-ratings__advantages { background-color: var(--grey-background); border-radius: 50px; padding: 48px; width: 100%; max-width: 692px; } .advantages-icon-ratings__advantages-wrap { display: flex; align-items: flex-start; justify-content: flex-start; margin: -4px 0; flex-wrap: wrap; } .advantages-icon-ratings__advantages-item { margin: 4px 0; padding: 8px 6px 8px 0; display: flex; align-items: center; width: 100%; max-width: 298px; } .advantages-icon-ratings__advantages-icon { margin-right: 16px; } .advantages-icon-ratings__advantages-icon svg { width: 48px; height: 48px; } .advantages-icon-ratings__advantages-name { line-height: 22.4px; } .advantages-icon-ratings__advantages-description { margin-top: 4px; } .advantages__header { display: flex; justify-content: space-between; margin-bottom: 47px; } .advantages__title { margin-right: 39px; flex-basis: 100%; } .advantages-number, .advantages-number__item { display: flex; align-items: center; margin-left: 20px; } .advantages-number__number { line-height: 48px; margin-right: 15px; } .advantages-number__text { display: block; line-height: 16px; font-weight: 700; min-width: 100px; } .advantages__wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .advantages__item { position: relative; background-color: var(--grey-background); display: flex; gap: 12px; align-items: center; padding: 48px 24px; border-radius: 16px; margin: 0px 12px 0px 12px; line-height: 24px; } .advantages__item .advantages__name { display: flex; flex-direction: column; } .advantages__item .advantages__name span { margin-top: 5px; line-height: 18px; } .advantages__help-result { display: none; position: absolute; background: var(--light-background); box-shadow: 0px 4px 24px rgba(92, 106, 120, 0.16); border-radius: 16px; width: 100%; right: 0; bottom: 110px; padding: 16px; text-align: left; } .advantages__help-result:after { content: ""; width: 0; height: 0; position: absolute; left: calc(50% - 10px); bottom: -10px; border-top: 10px solid var(--light-background); border-left: 10px solid transparent; border-right: 10px solid transparent; } .advantages__item:hover .advantages__help-result { display: block; } .advantages__wrap svg { max-width: 60px; height: 60px; fill: var(--main); } @media (max-width: 1200px) { .advantages__header { flex-direction: column; } .advantages__title { margin-right: 0; margin-bottom: 19px; white-space: normal; } .advantages-number__item { margin-right: 25px; } } @media (max-width: 800px) { .advantages { margin: 47px 0; } .advantages__header { margin-bottom: 28px; } .advantages-number { flex-direction: column; align-items: flex-start; } .advantages-number__item { margin-right: 0; margin-bottom: 12px; } .advantages__wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } } @media (max-width: 640px) { .advantages__item { flex-direction: column; min-height: 40px; padding: 16px 24px; } .advantages__item .svg_beige { width: 56px; height: 56px; margin-bottom: 20px; margin-right: 0; } .advantages__item .advantages__name { width: 100%; text-align: center; } .advantages__item .advantages__help-result { width: 100%; } } .advantages-v4__title { margin: 0 0 48px 0; text-align: center; } .advantages-v4__subtitle { line-height: 26px; text-align: center; margin: 0 0 48px 0; } .advantages-v4__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: -12px; } .advantages-v4__item { margin: 12px; width: 100%; max-width: none; line-height: 24px; text-align: center; } .advantages-v4__icon { width: 56px; height: 56px; margin: 0 auto 24px; border-radius: 16px; background-color: var(--grey-background); display: flex; padding: 24px; justify-content: center; align-items: center; } .advantages-v4__image { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; overflow: hidden; } .advantages-v4__image img { display: block; max-width: 100%; } .advantages-v4__name { font-weight: 700; margin-bottom: 8px; } .advantages-v4__text p { margin-bottom: 8px; } .advantages-v4__text p:last-child { margin-bottom: 0; } .advantages-v4__text-after { line-height: 24px; margin-top: 24px; } .advantages-v4__service { margin-top: 24px; } .advantages-v4 .services-menu__link { justify-content: center; background: var(--marine); color: var(--white); height: 48px; margin-bottom: 0; } .advantages-v4 .services-menu__link .svg_tooth use { fill: var(--white); } .advantages-v4 .services-menu__link:hover { color: var(--white); } .advantages-v4 .services-menu__link:hover .svg_tooth use { fill: var(--white); } .advantages-v4__title.title { margin: 0px 0px 24px; } .advantages-v4__subtitle { margin: 0px 0px 24px; } .advantages-v4__list { margin: 0px; } .advantages-v4__item { margin: 0px; } .advantages-v4__link { min-width: 50%; } .advantages-v4__item { display: flex; flex-direction: column; justify-content: space-between; } @media only screen and (max-width: 700px) { .advantages-v4__content { display: flex; flex-direction: column; align-items: center; } .advantages-v4__name { text-align: center; } .advantages-v4__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .advantages-v4__text-after { margin-left: 24px; margin-right: 24px; } .advantages-v4__text-after .btn.btn--color { margin: 0 auto; } } @media all and (max-width: 640px) { .advantages-v4__list { justify-content: center; } } @media only screen and (max-width: 485px) { .advantages-v4__list { padding: 0px 12px; } .advantages-v4__item { display: flex; flex-direction: column; align-items: center; } .advantages-v4__text { text-align: center; padding: 0px 12px; } .advantages-v4__link { min-width: 100%; } } .advantages-v2__wrap { position: relative; z-index: 1; min-height: 214px; border-radius: 50px; display: flex; padding: 80px 64px; } .advantages-v2__wrap.with-before::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/images/services/detskaya-stomatologiya/child_pattern_vector.svg"); background-size: cover; background-position: center; border-radius: 0px 0px 50px 50px; opacity: 16%; z-index: 0; } .advantages-v2__subtitle { position: relative; margin: 0px; z-index: 1; } .advantages-v2__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; } .advantages-v2__table { position: relative; z-index: 1; display: grid; gap: 24px; } .advantages-v2__table.with-content { grid-template-columns: repeat(2, 1fr); } .advantages-v2__table.without-content { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .advantages-v2__item { width: 100%; min-height: 80px; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: row; gap: 24px; } .advantages-v2__item-icon { min-width: 80px; width: 80px; height: 80px; padding: 16px; border-radius: 16px; } .advantages-v2__item-content > h4 { margin: 0px; margin-bottom: 16px; } .advantages-v2__item-content > span { max-width: 485px; } .advantages-v2__bottom { position: relative; z-index: 0; height: 96px; margin-top: -50px; display: flex; align-items: flex-end; border-radius: 0 0 50px 50px; } .advantages-v2__marquee { position: relative; display: flex; align-items: center; width: 100%; height: 46px; overflow: hidden; } .advantages-v2__marquee.with-children::after, .advantages-v2__marquee.with-children::before, .advantages-v2__marquee.without-children::after, .advantages-v2__marquee.without-children::before { content: ""; z-index: 1; display: block; position: absolute; width: 400px; height: 46px; } .advantages-v2__marquee.with-children::after { right: 0; border-bottom-right-radius: 50px; background: linear-gradient(to left, var(--dark-background) 0%, var(--dark-background) 20%, rgba(53, 66, 81, 0) 100%); } .advantages-v2__marquee.with-children::before { left: 0; border-bottom-left-radius: 50px; background: linear-gradient(to right, var(--dark-background) 0%, var(--dark-background) 20%, rgba(53, 66, 81, 0) 100%); } .advantages-v2__marquee.without-children::after { right: 0; border-bottom-right-radius: 50px; background: linear-gradient(to left, var(--main) 0%, var(--main) 20%, rgba(53, 66, 81, 0) 100%); } .advantages-v2__marquee.without-children::before { left: 0; border-bottom-left-radius: 50px; background: linear-gradient(to right, var(--main) 0%, var(--main) 20%, rgba(53, 66, 81, 0) 100%); } .advantages-v2__marquee-row { display: flex; width: -moz-max-content; width: max-content; animation: marquee 20s linear infinite; } .advantages-v2__marquee-track { display: flex; white-space: nowrap; } .advantages-v2__marquee-track p { color: var(--light-font); margin: 0; margin-left: 24px; } .advantages-v2__marquee-track > span { color: var(--light-font); margin: 0; display: flex; } .advantages-v2__marquee-track.light-font-marquee { margin-left: 16px; } .advantages-v2__marquee-track.child-main-color-marquee { margin-left: 16px; color: var(--child-main-color); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .advantages-v2__bottom.container { overflow: hidden; } .advantages-v2__marquee.with-children.container, .advantages-v2__marquee.container { width: 100%; max-width: 100%; } .advantages-v2__marquee.with-children.container::before, .advantages-v2__marquee.container::before { width: 64px; height: 48px; border-bottom-left-radius: 0px; } .advantages-v2__marquee.with-children.container::after, .advantages-v2__marquee.container::after { width: 64px; height: 48px; border-bottom-right-radius: 0px; } .advantages-v2__bottom.container { padding: 0px; } @media only screen and (max-width: 900px) { .advantages-v2__table.without-content { display: flex; flex-direction: column; } .advantages-v2__table.with-content { display: flex; flex-direction: column; } .advantages-v2__wrap { padding: 48px 32px; border-radius: 32px; } .advantages-v2__item { min-height: 80px; height: -moz-fit-content; height: fit-content; } .advantages-v2__subtitle { margin-bottom: 24px; } .advantages-v2__content { margin-bottom: 36px; } .container.advantages-v2__bottom { border-radius: 0px 0px 32px 32px; } .container.advantages-v2__marquee.with-children { max-width: 100%; } .container.advantages-v2__marquee.with-children::before { width: 64px; height: 48px; } .container.advantages-v2__marquee.with-children::after { width: 64px; height: 48px; } } .degag-svg { display: flex; flex-direction: row; flex-wrap: wrap; } .stage-prices .title { margin-bottom: 48px; } .stage-prices__wrap { background-color: var(--grey-background); border-radius: 24px; padding: 80px 64px; } .stage-prices__row { display: flex; align-items: flex-start; margin-bottom: 32px; } .stage-prices__left-col { width: 100%; max-width: 746px; margin-right: 16px; } .stage-prices__right-col { width: 100%; max-width: 510px; } .stage-prices__head > div { line-height: 22.4px; color: var(--grey-font); } .stage-prices__name { line-height: 22.4px; display: flex; align-items: center; } .stage-prices__name-value--gray { color: var(--grey-font); } .stage-prices__name-icon { position: relative; width: 100%; max-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-right: 14px; } .stage-prices__name-icon::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--main); } .stage-prices__info-icon { margin-left: 12px; width: 16px; height: 16px; cursor: pointer; } .stage-prices__info-icon:hover { stroke: var(--interface-grey); } .stage-prices__prices { display: flex; align-items: center; line-height: 22.4px; } .stage-prices__prices-old { color: var(--grey-font); text-decoration: line-through; margin-right: 16px; } .stage-prices__prices-current { font-weight: 600; } .stage-prices__prices-current--gray { color: var(--grey-font); } .stage-prices__notice { line-height: 19.6px; color: var(--grey-font); margin-top: 8px; } .stage-prices__result.stage-prices__row { margin-bottom: 0; } .stage-prices__result-left { display: flex; align-items: center; } .stage-prices__result-sign { display: flex; align-items: center; margin-right: 12px; width: 100%; max-width: 218px; } .stage-prices__result-sign div { line-height: 25.2px; } .stage-prices__result-banks { width: 100%; } .stage-prices__result-icon { width: 100%; max-width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .stage-prices__result-right { display: flex; align-items: center; } .stage-prices__result-sum { line-height: 25.2px; } .stage-prices__guarantee { margin-left: 32px; display: flex; align-items: center; justify-content: center; padding: 8px 12px; background-color: var(--light-background); border-radius: 12px; } .stage-prices__guarantee-icon { max-width: 32px; width: 100%; height: 32px; } .stage-prices__guarantee-icon svg { width: 100%; height: 100%; } .stage-prices__guarantee-text { line-height: 25.2px; margin-left: 8px; } .stage-prices__result-sign.mobile { display: none; } .stage-prices__name.stage-prices__left-col.mobile { display: none; } .stage-prices__result-sign.desktop { width: 360px; } .stage-prices__guarantee.mobile { display: none; } .stage-prices__result-banks.bottom { display: none; } @media (max-width: 1440px) { .stage-prices__result.stage-prices__row > div:first-child { display: flex; align-items: start; text-align: start; gap: 12px; } .stage-prices__result-sign.desktop { margin: auto 0px; height: 49px; } .stage-prices__result-banks.mobile { display: none; } .stage-prices__result-banks.bottom { display: block; margin-top: 24px; } } @media (max-width: 900px) { .stage-prices.content-block { padding: 0px; } } @media (max-width: 800px) { .stage-prices__result-banks.bottom { display: none; } .stage-prices.content-block { padding: 0px; } .stage-prices.content-block .container { margin: 0px; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: start; } .stage-prices.content-block .title { text-align: start; padding: 0px 24px; margin-bottom: 40px; } .stage-prices__wrap { width: 100%; padding: 48px 35px; } .stage-prices__right-col { display: none; } .stage-prices__result-sign.desktop { display: none; } .stage-prices__result-sign.mobile { display: flex; } .stage-prices__name.stage-prices__left-col.desktop { display: none; } .stage-prices__name.stage-prices__left-col.mobile { display: block; } .stage-prices__name.stage-prices__left-col.mobile { display: flex; align-items: start; } .stage-prices__prices-current { margin: 0px; } .stage-prices__prices-current span { margin: 0px; } .stage-prices__name.mobile > span { margin-top: 0px; margin-left: 8px; } .stage-prices__result-sign.mobile { display: flex; align-items: start; } .stage-prices__result-sum { margin-top: 12px; margin-bottom: 22px; } .stage-prices__wrap .reviews__ratings-icon { display: flex; width: 200px; height: 50px; background-color: var(--light-background); border-radius: 12px; justify-content: center; align-items: center; flex-direction: row; gap: 6px; } .stage-prices__wrap .reviews__ratings-icon-stage::after { display: none; } .stage-prices__wrap p { margin: 0px; } .stage-prices__wrap svg { width: 32px; height: 32px; } .stage-prices__result-banks { margin-top: 12px; padding: 0px 20px; } .stage-prices__result-banks.mobile { display: flex; flex-direction: column; gap: 12px; } .stage-prices__result-banks.mobile .credit-btns__wrap { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: start; gap: 6px; align-items: center; } .stage-prices__guarantee.mobile { margin: 0px; display: flex; justify-content: start; width: -moz-fit-content; width: fit-content; } .stage-prices__guarantee.desktop { display: none; } } @media (max-width: 640px) { .stage-prices.content-block .container { align-items: center; } .stage-prices.content-block .title { text-align: center; } .stage-prices__wrap { width: 100%; } } .service-prices__title { margin-bottom: 24px; } .service-prices__wrap { border-radius: 24px; padding: 24px 48px; display: flex; flex-direction: column; gap: 4px; background-color: var(--grey-background); } .service-prices__content { cursor: pointer; display: flex; align-items: end; width: 100%; min-height: 54px; height: -moz-fit-content; height: fit-content; padding: 16px 12px; border-radius: 8px; gap: 4px; transition: background 0.3s ease; } .service-prices__content:hover { background: var(--light-background); } .service-prices__left { flex-shrink: 0; max-width: 900px; display: flex; flex-direction: row; gap: 4px; } .service-prices__number { color: var(--grey-font); min-width: 24px; } .service-prices__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .service-prices__name { width: 100%; max-width: 872px; white-space: normal; word-break: break-word; } .service-prices__description { color: var(--grey-font); width: 100%; max-width: 448px; } .service-prices__line { flex-grow: 1; height: -moz-fit-content; height: fit-content; border-bottom: 1.5px dashed var(--border-grey); } .service-prices__value { display: flex; gap: 4px; flex-shrink: 0; } .service-prices__value > span { white-space: nowrap; } .service-prices__text-after { margin-top: 16px; } @media only screen and (max-width: 1280px) { .service-prices__wrap { padding: 24px; } .service-prices__left { max-width: 500px; } } @media only screen and (max-width: 900px) { .service-prices__left { max-width: 400px; } } @media only screen and (max-width: 640px) { .service-prices__wrap { border-radius: 16px; padding: 16px 12px; } .service-prices__content { flex-direction: column; align-items: start; } .service-prices__left { flex-direction: column; max-width: 540px; } } .about-vacancy__wrap { display: flex; flex-direction: row; gap: 32px; } .about-vacancy__content { display: flex; flex-direction: column; gap: 16px; } .about-vacancy__blocks { width: 330px; min-width: 330px; min-height: 100px; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 16px; } .about-vacancy__vacancy-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; border-radius: 12px; background-color: var(--grey-background); padding: 32px; } .about-vacancy__vacancy-company { display: flex; flex-direction: column; gap: 8px; } .about-vacancy__vacancy-company-item { display: flex; flex-direction: row; align-items: center; gap: 8px; } .about-vacancy__vacancy-company-item img { width: 32px; min-width: 32px; height: 32px; border-radius: 100%; } @media only screen and (max-width: 1440px) { .about-vacancy__wrap { display: flex; flex-direction: column; gap: 32px; } } .accordion-price__wrap { display: flex; flex-direction: column; gap: 4px; } .accordion-price__content { cursor: pointer; display: flex; align-items: end; width: 100%; min-height: 54px; height: -moz-fit-content; height: fit-content; padding: 16px 12px; border-radius: 8px; gap: 4px; transition: backround 0.3 ease; } .accordion-price__content:hover { background: var(--grey-background); } .accordion-price__content.active { background: var(--grey-background); } .accordion-price__left { flex-shrink: 0; max-width: 900px; display: flex; flex-direction: row; display: flex; gap: 4px; } .accordion-price__number { color: var(--grey-font); min-width: 24px; } .accordion-price__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .accordion-price__name { width: 100%; max-width: 872px; white-space: normal; word-break: break-word; } .accordion-price__description { color: var(--grey-font); width: 100%; max-width: 448px; } .accordion-price__line { flex-grow: 1; height: -moz-fit-content; height: fit-content; border-bottom: 1.5px dashed var(--border-grey); } .accordion-price__value { display: flex; gap: 4px; flex-shrink: 0; } .accordion-price__value > span { white-space: nowrap; } @media only screen and (max-width: 1280px) { .accordion-price__left { max-width: 500px; } } @media only screen and (max-width: 900px) { .accordion-price__left { max-width: 400px; } } @media only screen and (max-width: 640px) { .accordion-price__left { flex-direction: column; max-width: 540px; } .accordion-price__content { flex-direction: column; align-items: start; } } .accordion-content-service { display: flex; flex-direction: column; gap: 32px; } .accordion-content-service__wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; margin-top: 16px; } .accordion-content-service__on { color: var(--interface-grey); } .accordion-content-service__description { width: -moz-fit-content; width: fit-content; width: 100%; min-width: 40px; } .accordion-content-service__icon { min-width: 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .accordion-content-service__item { border-radius: 12px; position: relative; background: var(--grey-background); display: flex; align-items: center; height: -moz-fit-content; height: fit-content; min-height: 48px; padding-right: 12px; transition: color 0.3s ease; } .accordion-content-service__item:hover .accordion-content-service__text { color: var(--main); } .accordion-content-service__item::after { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 100%; right: -1px; border-radius: 0px 12px 12px 0px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .accordion-content-service__text { padding: 4px 0px; color: var(--main-font); transition: color 0.3s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } .accordion-advanced { background-color: var(--light-background); height: -moz-fit-content; height: fit-content; border-radius: 16px; } .accordion-advanced__container { width: 100%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 16px; } .accordion-advanced__item { width: 100%; min-height: 80px; display: flex; flex-direction: row; gap: 24px; justify-content: space-between; padding: 0px 24px; height: -moz-fit-content; height: fit-content; cursor: pointer; } .accordion-advanced__right, .accordion-advanced__left { display: flex; flex-direction: row; align-items: center; gap: 16px; } .accordion-advanced__right.mobile { display: none; } .accordion-advanced__open { width: 48px; min-width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--grey-background); } .accordion-advanced__open.active { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .accordion-advanced__section { display: flex; gap: 8px; } .accordion-advanced__section-name { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .accordion-advanced__section-icon { stroke: var(--main); width: 24px; min-width: 24px; height: 24px; } .accordion-advanced__feature { display: flex; flex-direction: row; justify-content: center; align-items: center; width: -moz-fit-content; width: fit-content; height: 36px; background-color: var(--grey-background); padding: 8px; gap: 8px; border-radius: 8px; color: var(--main-font); } .accordion-advanced__feature > p { white-space: nowrap; margin: 0px; } .accordion-advanced__feature--term { min-width: 176px; } .accordion-advanced__feature--guarantee { min-width: 163px; } .accordion-advanced__feature svg { min-width: 24px; stroke: var(--main); } .accordion-advanced__content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.25s ease; } .accordion-advanced__content.is-open { grid-template-rows: 1fr; opacity: 1; } .accordion-advanced__content-inner { overflow: hidden; } .accordion-advanced__wrap { border-top: 1px solid var(--border-grey); padding: 24px; display: flex; flex-direction: column; } @media (max-width: 1200px) { .accordion-advanced__right.desktop p { white-space: inherit; } .accordion-advanced__right.desktop .accordion-advanced__feature { height: 48px; } } @media (max-width: 900px) { .accordion-advanced__item { display: flex; flex-direction: column; } .accordion-advanced__left { padding: 16px 0px; } .accordion-advanced__right.mobile { display: flex; } .accordion-advanced__right.desktop { display: none; } .accordion-advanced__feature { margin-bottom: 16px; } } @media (max-width: 640px) { .accordion-advanced__right { display: flex; gap: 16px; } .accordion-advanced__feature { min-width: 0px; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; height: -moz-fit-content; height: fit-content; padding: 8px 12px; flex: 0.5; } .accordion-advanced__feature > p { white-space: wrap; } } @media (max-width: 420px) { .accordion-advanced__right { display: flex; flex-direction: column; gap: 0px; } } .price_service-list__title { margin-bottom: 48px; } .price_service-list__card { display: flex; flex-direction: column; gap: 4px; } .price_service-list__card-top { display: flex; flex-direction: row; align-items: start; justify-content: start; min-height: 112px; height: 112px; padding: 16px 24px; border-radius: 24px; background-color: var(--light-background); } .price_service-list__card-title { flex: 0.6; margin: 0px; line-height: 150%; } .price_service-list__card-price { flex: 0.4; height: 32px; text-align: end; display: flex; justify-content: end; align-items: end; color: var(--main); } .price_service-list__card-price--empty { height: 32px; } .price_service-list__card-bottom { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 24px; border-radius: 24px; background-color: var(--light-background); height: 334px; } .price_service-list__card-description { height: 132px; line-height: 140%; } .price_service-list__card--children > span { color: var(--interface-grey); } .price_service-list__card--children-table { display: grid; margin-top: 8px; grid-template-columns: repeat(2, 1fr); gap: 8px; } .price_service-list__card--children-item { display: flex; align-items: center; gap: 16px; height: 48px; border-radius: 12px; background: var(--grey-background); } .price_service-list__card--children-item-icon { min-width: 48px; width: 48px; height: 48px; padding: 4px; fill: var(--main); } .price_service-list__card--children-item-text { line-height: 140%; max-width: 100px; } .price_service-list__content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .price_service-list__content--item { display: flex; flex-direction: column; gap: 24px; } @media only screen and (max-width: 1080px) { .price_service-list__content { display: flex; flex-direction: column; } } .prices-tabs-accordion__title { margin-bottom: 32px; } @media (max-width: 900px) { .prices-tabs-accordion { padding: 48px 0px; } } @media (max-width: 640px) { .prices-tabs-accordion { padding: 24px 0px; } .prices-tabs-accordion__title { margin-bottom: 16px; } } .video-two-column__head { margin-bottom: 48px; } .video-two-column__subtitle { margin-top: 16px; line-height: 19.6px; } .video-two-column__content { display: flex; align-items: flex-start; justify-content: space-between; } .video-two-column__column { width: 100%; max-width: 572px; margin-right: 24px; } .video-two-column__column:last-child { margin-right: 0; } .video-two-column__text { line-height: 22.4px; margin-bottom: 32px; } .video-two-column__video { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -8px; } .video-two-column__video-item { width: 100%; max-width: 278px; height: 211px; margin: 8px; border-radius: 16px; position: relative; overflow: hidden; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center; } .video-two-column__video-item::after { position: absolute; width: 100%; height: 100%; background: url("/images/video-pattern.webp"), linear-gradient(90deg, rgba(0, 0, 0, 0.45) 38.4%, rgba(0, 0, 0, 0) 100%); background-size: 3px 3px, auto; content: ""; top: 0; left: 0; z-index: 2; } .video-two-column__video-item--single { max-width: unset; } .video-two-column__video-name { line-height: 25.2px; color: var(--light-font); position: absolute; top: 32px; left: 32px; width: calc(100% - 64px); z-index: 3; } .video-two-column__video-button { position: absolute; bottom: 32px; left: 32px; display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; } .video-two-column__video-button:hover .video-two-column__video-icon::before { opacity: 1; } .video-two-column__video-icon { width: 48px; height: 48px; position: relative; display: flex; align-items: center; justify-content: center; margin-right: 16px; z-index: 1; border-radius: 50%; } .video-two-column__video-icon svg { position: relative; z-index: 4; } .video-two-column__video-icon::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border: 1.5px solid var(--light-font); opacity: 0.3; border-radius: inherit; z-index: 2; } .video-two-column__video-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); opacity: 0; transition: opacity 0.2s ease; border-radius: inherit; z-index: 3; } .video-two-column__video-sign { line-height: 22.4px; color: var(--light-font); width: 100%; max-width: 80px; } @media only screen and (max-width: 640px) { .video-two-column__content { display: flex; flex-direction: column; gap: 24px; } .video-two-column__text { text-align: center; } .video-two-column__video-item { max-width: none; } } .teeth-one-day { overflow: hidden; padding: 0; background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/services/teeth-one-day-backgr.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; } .teeth-one-day__wrap { display: flex; justify-content: space-between; } .teeth-one-day__content { width: 100%; max-width: 585px; padding: 80px 0; } .teeth-one-day .title { margin-bottom: 75px; } .teeth-one-day__item { display: flex; align-items: flex-start; margin-bottom: 32px; } .teeth-one-day__item:last-child { margin-bottom: 0; } .teeth-one-day__icon { max-width: 32px; width: 100%; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .teeth-one-day__icon svg { width: 24px; height: 24px; } .teeth-one-day__name { line-height: 33.6px; margin-bottom: 8px; } .teeth-one-day__text { line-height: 19.6px; } .teeth-one-day__image { width: 100%; max-width: 775px; position: relative; align-self: stretch; } .teeth-one-day__image-wrap { position: absolute; left: 0; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .teeth-one-day__image-wrap img { height: auto; } .teeth-one-day__down-content { display: none; } @media (max-width: 1600px) { .teeth-one-day__wrap { padding: 0px 12px; } } @media (max-width: 640px) { .teeth-one-day { overflow: visible; position: relative; background-image: none; } .teeth-one-day__image { display: none; } .teeth-one-day.container { position: relative; } .teeth-one-day__wrap { position: relative; z-index: 2; max-width: none; width: 100%; background-color: var(--grey-background); border-radius: 32px; padding: 0px 24px; } .teeth-one-day__down-content { position: relative; margin-bottom: -32px; width: 100%; z-index: 1; max-height: 256px; height: -moz-fit-content; height: fit-content; min-height: 220px; background-image: linear-gradient(90deg, var(--grey-background-gradient) 0%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); background-position: 60% 50%; border-radius: 32px 32px 0 0; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; display: flex; flex-direction: column; justify-content: end; align-items: center; opacity: 0.2; } .teeth-one-day__down-content.active { transform: translateY(0px); opacity: 1; } .teeth-one-day__down-image-wrap { display: flex; align-items: end; justify-content: center; max-height: 256px; height: -moz-fit-content; height: fit-content; width: 100%; } .teeth-one-day__down-image-wrap img { display: block; max-height: 256px; max-width: 80%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } .teeth-one-day__content { padding: 48px 0px; } .teeth-one-day__content .title { margin-bottom: 32px; } } .compare-table__wrap { min-height: 100px; display: flex; flex-direction: column; gap: 10px; } .compare-table__row { display: flex; flex-direction: row; gap: 10px; } .compare-table__row-main { display: flex; flex-direction: column; gap: 10px; } .compare-table__row-title { display: flex; flex-direction: row; gap: 10px; } .compare-table__row-title .compare-table__column { border-radius: 32px 32px 0px 0px; padding-top: 32px; } .compare-table__row-title .compare-table__column-main { border-radius: 32px 32px 0px 0px; padding-top: 32px; } .compare-table__subtitle-block > div:last-of-type .compare-table__column { border-radius: 0px 0px 32px 32px; padding-bottom: 32px; } .compare-table__subtitle-block > div:last-of-type .compare-table__column-main { padding-bottom: 32px; border-radius: 0px 0px 32px 32px; } .compare-table__header .compare-table__column { border-radius: 32px; padding-top: 32px; } .compare-table__header .compare-table__column-main { background: none; background-color: none; border-radius: 32px; } .compare-table__header .compare-table__column-main h3 { position: relative; width: 100%; left: -32px; margin: 0px; } .compare-table__title.mobile { display: none; } .compare-table__before { width: 100%; height: 40px; line-height: 140%; margin-bottom: 24px; } .compare-table__header { text-align: center; } .compare-table__title { text-align: start; } .compare-table__column { display: flex; flex-direction: column; flex: 0.25; background-color: var(--grey-background); padding: 0px 32px 32px 32px; } .compare-table__column > div { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; } .compare-table__column p { margin: 0px; } .compare-table__column-main { background-color: var(--grey-background); flex: 0.5; padding: 0px 32px 32px 32px; } .compare-table__image-wrapper { padding-bottom: 32px; } .compare-table__image-wrapper img { -o-object-fit: cover; object-fit: cover; height: 122px; border-radius: 12px; } .compare-table__after { padding-top: 32px; } .compare-table__button.btn.btn--color { width: 84px; height: 32px; min-height: 32px; } .compare-table__card.mobile { display: none; } .compare-table__row-main.mobile { display: none; } .compare-table__column-main.mobile-small { display: none; } .compare-table__image-none { display: none !important; } .compare-table__column-main--no-title { width: 100%; height: 10px; margin-top: 32px; padding-top: 0px !important; } .compare-table__column--no-title { width: 100%; height: 10px; margin-top: 32px; padding-top: 0px !important; } .compare-table__wrap.container.line-spacing { gap: 12px; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop { gap: 0px; background-color: var(--grey-background); border-radius: 24px; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__row-title > div { padding-top: 0px; margin: 0px; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__row { position: relative; padding: 0px 5px; transition: all 0.2s ease; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__row::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background-color: var(--border-grey); transition: background-color 0.2s ease; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__row:hover::after { background-color: var(--main); } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__row > div { padding-bottom: 6px; } .compare-table__wrap.container.line-spacing .compare-table__row-main.desktop .compare-table__card:last-child .compare-table__row { margin-bottom: 36px; } .compare-table__wrap.container.line-spacing .compare-table__card.mobile .compare-table__column { padding: 0px; } .compare-table__wrap.container.line-spacing .compare-table__title.mobile { padding-bottom: 12px; } @media (max-width: 1000px) { .compare-table__title.mobile { display: block; text-align: start; padding: 0px 12px; } .compare-table__title.mobile span { display: inline; white-space: normal; } .compare-table__wrap.container { gap: 34px; } .compare-table__wrap.container h3 { margin: 0px; } .compare-table__header { display: flex; flex-direction: column !important; align-items: center !important; } .compare-table__header.desktop { display: none; } .compare-table__row-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; } .compare-table__row-main.desktop { display: none; } .compare-table__row-main.mobile { display: grid; } .compare-table__row-main .compare-table__column { background-color: var(--grey-background); padding: 24px; border-radius: 32px; } .compare-table__column { padding: 0px 12px; background-color: none; background: none; gap: 16px; } .compare-table__column > div { align-items: start; } .compare-table__column-title { justify-content: center; padding-bottom: 10px; text-align: center; } .compare-table__value { justify-content: center; align-items: start; min-height: 35px; text-align: center; } .compare-table__button.btn.btn--color { display: none; } .compare-table__image-wrapper { min-height: 20px; } .compare-table__row-content { display: flex; flex-direction: column; padding: 0px 24px; } .compare-table__row-content > span { text-align: center; } .compare-table__card { display: flex; flex-direction: column; gap: 10px; } .compare-table__card.mobile { display: flex; } .compare-table__values { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: start !important; } .compare-table__values > div { width: 100%; display: flex; flex-direction: row; gap: 10px; text-align: center; justify-content: center; } .compare-table__after { display: none; } } @media (max-width: 640px) { .compare-table { display: none; } .compare-table__column { position: relative; overflow: hidden; z-index: 100; } .compare-table__column::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .compare-table__column::before { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; left: -1px; top: 0; background: linear-gradient(to left, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .compare-table__value { text-align: start; } .compare-table__column-title { text-align: start; } } .simple-table.content-block { overflow: hidden; } .simple-table__title { margin-bottom: 40px; text-align: center; } .simple-table__title.title { padding: 0 24px; } .simple-table__title.with-subtitle { margin-bottom: 16px; } .simple-table__subtitle { margin: 0 auto 40px; max-width: 900px; line-height: 1.5; text-align: center; padding: 0 16px; } .simple-table__after-text { margin-top: 24px; line-height: 1.5; padding: 0 12px; opacity: 0.9; } .simple-table__table { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: stretch; } .simple-table__column { flex: 1; height: 100%; border-radius: 16px; border: 1px solid var(--border-grey); background: #fff; overflow: hidden; } .simple-table__column-row { padding: 12px; min-height: 56px; line-height: 1.45; border-bottom: 1px solid var(--border-grey); } .simple-table__column-row > * { margin-top: 0; margin-bottom: 0; } .simple-table__column-row:last-child { border-bottom: 0; } .simple-table__column-title { padding: 12px; margin-bottom: 0; line-height: 1.35; border-bottom: 1px solid var(--border-grey); background-color: var(--grey-background); } .simple-table__column-title::after { display: none; } .simple-table__column-title.active::after { display: none; } @media (max-width: 1000px) { .simple-table__title { margin-bottom: 28px; } .simple-table__subtitle { margin-bottom: 28px; } .simple-table__table { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .simple-table__column { border-radius: 14px; } } @media (max-width: 640px) { .simple-table__title { margin-bottom: 24px; padding: 0 12px; } .simple-table__subtitle { margin-bottom: 24px; padding: 0 12px; } .simple-table__table { grid-template-columns: 1fr; gap: 12px; } .simple-table__column { border-radius: 12px; } .simple-table__column-title { padding: 10px; } .simple-table__column-row { min-height: 0; padding: 10px; } } .banner-kt { background-color: var(--grey-background); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 0; position: relative; overflow: hidden; } .banner-kt__wrap { padding: 0px; display: flex; flex-direction: row; justify-content: space-between; height: 630px; box-sizing: content-box; gap: 70px; } .banner-kt__content { display: flex; flex-direction: column; justify-content: space-between; align-items: start; flex: 0.5; padding: 80px 0px; position: relative; z-index: 12; } .banner-kt__image { display: flex; flex-direction: row; align-items: end; overflow: auto; position: relative; overflow: hidden; z-index: 5; flex: 0.5; } .banner-kt__image img { height: 100%; max-height: none; -o-object-fit: cover; object-fit: cover; width: 100%; } .banner-kt__image::before { content: ""; position: absolute; top: 0; left: -10px; width: 20px; height: 100%; background-color: var(--grey-background); z-index: 10; pointer-events: none; } .banner-kt__image::after { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: linear-gradient(90deg, var(--grey-background) 30%, rgba(255, 255, 255, 0) 100%); pointer-events: none; z-index: 5; } .banner-kt__image.mobile { display: none; } .banner-kt__slider { height: 100%; } .banner-kt__slider::before { content: ""; position: absolute; top: 0; right: -10px; width: 20px; height: 100%; background-color: var(--grey-background); z-index: 10; pointer-events: none; } .banner-kt__slider::after { content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--grey-background) 80%); pointer-events: none; z-index: 5; } .banner-kt__head, .banner-kt__action { display: flex; flex-direction: column; gap: 32px; } .banner-kt__title { max-width: 500px; } .banner-kt__subtitle { max-width: 700px; } .banner-kt__text { max-width: 300px; } .banner-kt__pagination { position: absolute; top: 90%; left: 0%; transform: translateY(-100%); z-index: 6; display: flex; justify-content: center; padding: 20px 60px 20px 60px; margin-left: 20px; margin-bottom: -80px; gap: 80px; } .banner-kt__pagination .swiper-pagination-bullet { background-color: var(--grey); opacity: 1; width: 10px !important; height: 10px !important; border-radius: 50%; transition: background-color 0.3s ease; margin-right: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; } .banner-kt__pagination .swiper-pagination-bullet::after { display: none !important; } .banner-kt__pagination .swiper-pagination-bullet-active { background: var(--main); width: 10px !important; height: 10px !important; border-radius: 50%; } .banner-kt__pagination .swiper-pagination-bullet-active::after { display: none !important; } .banner-kt__pagination .bullet-text { margin-left: -40px; margin-top: 8px; width: 90px; text-align: center; color: var(--grey-font); } .banner-kt__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active span:last-child { color: var(--main-font); } @media (max-width: 1600px) { .banner-kt__content { padding-left: 15px; } .banner-kt__wrap { padding: 0px; display: flex; flex-direction: row; justify-content: space-between; height: auto; box-sizing: content-box; gap: 16px; } } @media (max-width: 1440px) { .banner-kt__content { padding-left: 24px; } } @media (max-width: 1300px) { .banner-kt { background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); } .banner-kt__image { position: relative; overflow: visible; } .banner-kt__image img { overflow: visible; } .banner-kt__image.desktop { display: none; } .banner-kt__image.mobile { display: flex; } .banner-kt__image::before, .banner-kt__image::after { display: none; } .banner-kt__slider::before, .banner-kt__slider::after { display: none; } } @media (max-width: 720px) { .banner-kt { overflow: visible; background-image: none; background-color: var(--light-background); } .banner-kt__wrap { height: -moz-fit-content; height: fit-content; flex-direction: column-reverse; gap: 0px; position: relative; } .banner-kt__title, .banner-kt__subtitle { text-align: center; max-width: none; width: 100%; } .banner-kt__text { text-align: center; max-width: none; width: 100%; } .banner-kt__action { width: 100%; display: flex; flex-direction: column; align-items: center; } .banner-kt__image { margin-bottom: -32px; position: relative; background-image: linear-gradient(90deg, var(--grey-background-gradient) 50%, rgba(245, 250, 253, 0) 65%), url("/images/services/no-pain-back-new.webp"); z-index: 0; display: flex; flex-direction: row; justify-content: center; align-items: end; width: 100%; max-height: 256px; height: -moz-fit-content; height: fit-content; min-height: 220px; overflow: hidden; opacity: 0.2; border-radius: 32px 32px 0px 0px; transform: translateY(50%); transition: transform 1s ease-out, opacity 1s ease-out; transition-delay: 1s; } .banner-kt__image.active { transform: translateY(0px); opacity: 1; } .banner-kt__image img { display: block; max-height: 256px; max-width: 80%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; } .banner-kt__content { z-index: 12; background-color: var(--grey-background); gap: 42px; padding: 48px 24px; border-radius: 32px; } .banner-kt__action { width: 100%; } .banner-kt__action-button.btn.btn--color { max-width: 230px; height: 64px; } } .group-tab { background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--grey-background); } .group-tab.content-block { padding: 48px 0px; } .group-tab__title.title { padding-bottom: 48px; } .group-tab__tabs { display: flex; flex-direction: row; gap: 8px; width: -moz-fit-content; width: fit-content; background-color: var(--border-grey); padding: 5px; border-radius: 12px; } .group-tab__tabs-button { min-width: 180px; padding: 8px 16px; text-align: center; width: 100%; border-radius: 12px; cursor: pointer; transition: background-color ease 0.3s; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .group-tab__tabs-button.active { background-color: var(--light-background); } .group-tab__content > div { display: flex; } @media only screen and (max-width: 1440px) { .group-tab__content > div { gap: 12px !important; } } @media only screen and (max-width: 1280px) { .group-tab.content-block { padding: 48px 0px; } .group-tab__content > div { flex-direction: column !important; gap: 0px !important; } .group-tab__content .number-items.content-block { padding: 0px; padding-top: 12px; } .group-tab__content .implant-price.content-block.content-block--grey { padding: 0px; } .group-tab__content div .implant-price.content-block.content-block--grey { padding: 0px; } } @media only screen and (max-width: 390px) { .group-tab__tabs { flex-direction: column; margin: 0 auto; width: 90%; } .group-tab__tabs > div { white-space: nowrap; min-width: none; } } .compare-combination { background-position: center; background-size: cover; background-repeat: no-repeat; padding: 0; position: relative; overflow: hidden; } .compare-combination.content-block { border-radius: 0px; } .compare-combination__wrap { display: flex; flex-direction: column; gap: 48px; } .compare-combination__title.title { max-width: 900px; } .compare-combination__text-before { max-width: 740px; } .compare-combination__content { max-width: 700px; display: flex; flex-direction: column; gap: 12px; } .compare-combination__table { display: flex; align-items: stretch; gap: 32px; } .compare-combination__table > div { width: 400px; border-radius: 24px; padding: 24px 32px; display: flex; flex-direction: column; } .compare-combination__table > div:first-child { background-color: var(--grey-background); } .compare-combination__table > div:last-child { background-color: color-mix(in srgb, var(--error) 10%, transparent); } @media (max-width: 1000px) { .compare-combination.content-block { margin-top: 0px; } .compare-combination__wrap { padding: 40px 12px; } .compare-combination__title.title, .compare-combination__text-before, .compare-combination__content { max-width: none; width: 100%; text-align: center; } .compare-combination__table { display: flex; align-items: stretch; gap: 32px; } .compare-combination__table > div { width: 100%; } } @media (max-width: 640px) { .compare-combination__title.title, .compare-combination__text-before, .compare-combination__content { padding: 0px 12px; } .compare-combination__table { display: flex; flex-direction: column; gap: 12px; } } .title-block { background-position: center; background-size: cover; background-repeat: no-repeat; } .title-block.content-block { padding: 0px; } .number-list.content-block--grey .number-list__item { background-color: var(--light-background); } .number-list .title { margin-bottom: 32px; } .number-list__item { width: 100%; background-color: var(--grey-background); border-radius: 24px; padding: 32px 40px; display: flex; flex-direction: column; height: auto; min-height: 360px; } .number-list__image { max-width: 256px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; } .number-list__info { max-width: 242px; margin: 0 auto; flex-grow: 1; } .number-list__name { display: flex; align-items: flex-start; } .number-list__name-value { line-height: 22.4px; } .number-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); margin-right: 16px; line-height: 22.4px; display: flex; align-items: center; justify-content: center; color: var(--light-font); } .number-list__description { margin-top: 24px; line-height: 19.6px; } .number-list__price { margin-top: 86px; padding-bottom: 12px; display: flex; align-self: center; } .number-list__price-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: 1.5px solid var(--border-grey); display: flex; align-items: center; justify-content: center; margin-right: 12px; } .number-list__price-icon svg { stroke: var(--border-grey); } .number-list__price-value { line-height: 44.8px; } .number-list__pagination { margin: 32px auto 0; } @media only screen and (max-width: 1300px) { .number-list__item { min-height: 460px; } } @media only screen and (max-width: 900px) { .number-list.content-block { padding: 40px; } } @media only screen and (max-width: 640px) { .number-list.content-block { background-color: var(--grey-background); padding: 24px; } .number-list__item { background-color: var(--light-background); min-height: 520px; padding: 0; } .number-list__image { margin-top: 25px; margin-bottom: 12px; } .number-list__image img { height: 175px; width: auto; } .number-list__info { max-width: unset; margin: 0 45px; } .number-list__name { flex-direction: row; align-items: center; width: 100%; gap: 17px; } .number-list__name .gradient-main { display: flex; } .number-list__name-value { min-width: unset; } .number-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } .number-list__icon { display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: var(--btn-gradient-main); min-width: 48px; height: 48px; color: var(--light-font); } .number-list__pagination { background-color: var(--grey-background); padding: 0; } } .number-list__wrap.container.info-list .number-list__info { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; } .number-list__wrap.container.info-list .number-list__list { min-height: 180px; } .number-list__wrap.container.info-list .number-list__item { background-color: var(--light-background); } .number-list__wrap.container.info-list .number-list__item.swiper-slide { border: 1px solid var(--border-grey); min-height: 180px; transition: all 0.5s ease-in-out; } .number-list__wrap.container.info-list .number-list__item.swiper-slide:hover { border: 1px solid var(--main); } .number-list__wrap.container.info-list .number-list__name-icon { display: none; } .number-list__wrap.container.info-list .number-list__name-value { text-align: center; color: var(--main); } .number-list__wrap.container.info-list .number-list__description { text-align: center; } .stages-list__wrap.container { display: flex; flex-direction: column; } .stages-list__wrap.container h2 { margin-bottom: 24px; } .stages-list__title.title { margin-bottom: 32px; } .stages-list__item { width: 100%; background-color: var(--grey-background); border-radius: 24px; padding: 32px 40px; display: flex; flex-direction: column; height: auto; min-height: 220px; } .stages-list__item.swiper-slide { height: auto; } .stages-list__info { max-width: 242px; margin: 0 auto; flex-grow: 1; display: flex; flex-direction: column; } .stages-list__name { display: flex; align-items: flex-start; height: -moz-fit-content; height: fit-content; min-height: 120px; } .stages-list__name-value { line-height: 22.4px; } .stages-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); margin-right: 16px; line-height: 22.4px; display: flex; align-items: center; justify-content: center; color: var(--light-font); } .stages-list__description { line-height: 19.6px; margin: 0px; } .stages-list__content { height: 100%; display: flex; flex-direction: column; gap: 24px; justify-content: space-between; } .stages-list__pagination { margin: 32px auto 0; } @media only screen and (max-width: 900px) { .stages-list.content-block { padding: 40px; } } @media only screen and (max-width: 640px) { .stages-list.content-block { margin: 0px; padding: 24px 0px; } .stages-list__item { padding: 0px 24px; } .stages-list__info { max-width: unset; padding: 24px 0px; margin: 0px; } .stages-list__name { flex-direction: row; align-items: center; width: 100%; gap: 17px; } .stages-list__name .gradient-main { display: flex; } .stages-list__name-value { min-width: unset; } .stages-list__name-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } .stages-list__icon { display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: var(--btn-gradient-main); min-width: 48px; height: 48px; color: var(--light-font); } .stages-list__pagination { background-color: var(--grey-background); padding: 0; } } .info-link-v2 h2 { margin: 0px; } .info-link-v2.container { display: flex; gap: 24px; } .info-link-v2.container.position-left { flex-direction: row-reverse; } .info-link-v2__wrap { display: flex; align-items: center; background-color: var(--light-background); flex: 0.6; border-radius: 48px; padding: 48px; } .info-link-v2__wrap.bc-color { background-color: var(--grey-background); } .info-link-v2__content { display: flex; flex-direction: column; gap: 24px; } .info-link-v2__content > * { max-width: 100%; } .info-link-v2__image { position: relative; border-radius: 48px; background-size: cover; background-repeat: no-repeat; background-position: center; flex: 0.4; min-height: 285px; } .info-link-v2__video { border-radius: 48px; flex: 0.4; min-height: 285px; position: relative; width: 100%; overflow: hidden; } .info-link-v2__video .video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; -o-object-fit: cover; object-fit: cover; } .info-link-v2__subtitle { margin: 0px; } .info-link-v2__text-content { display: flex; gap: 24px; } .info-link-v2__icon-figure { width: 80px; min-width: 80px; height: 80px; } .info-link-v2__icon-main { width: 80px; min-width: 80px; height: 80px; position: absolute; bottom: 24px; left: 24px; } .info-link-v2__description { width: 90%; line-height: 140%; } .info-link-v2__action { margin-top: 24px; } .info-link-v2__wrap.children-mode { background-color: var(--child-main-color) !important; position: relative; } .info-link-v2__wrap.children-mode::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/images/services/detskaya-stomatologiya/child_pattern_vector.svg"); background-size: cover; background-position: center; border-radius: 0px 0px 50px 50px; opacity: 16%; z-index: 0; } @media only screen and (max-width: 1080px) { .info-link-v2__content { position: relative; z-index: 1; } .info-link-v2__content > * { max-width: 100%; padding: 0px 12px; } .info-link-v2__image { border-radius: 32px; background-size: cover; background-repeat: no-repeat; background-position: center; flex: 0.4; min-height: 256px; height: -moz-fit-content; height: fit-content; max-height: 320px; } .info-link-v2.container, .info-link-v2.container.position-left { display: flex; flex-direction: column-reverse; } } @media only screen and (max-width: 800px) { .info-link-v2.content-block { padding: 24px 0px; } .info-link-v2.container { display: flex; flex-direction: column-reverse; gap: 24px; } .info-link-v2__wrap { flex: 1; } .info-link-v2__video { min-height: 320px; } .info-link-v2__image { flex: 1; min-height: 480px; height: auto; max-height: 550px; } } @media only screen and (max-width: 640px) { .info-link-v2__wrap { padding: 32px; border-radius: 32px; } .info-link-v2.content-block { padding: 0px; } .info-link-v2.container { display: flex; flex-direction: column-reverse; gap: 12px; } .info-link-v2__video { min-height: 220px; height: auto; } .info-link-v2__action { width: 100%; } .info-link-v2__action .btn { margin: 0 auto; } .info-link-v2__description { text-align: start; -moz-column-count: 1; column-count: 1; } .info-link-v2__image { min-height: 340px; } } .info-link-v3__wrap { border-radius: 48px; padding: 48px 24px; display: flex; flex-direction: row; justify-content: space-between; } .info-link-v3__wrap.background-substrate::before { content: ""; position: absolute; inset: 0; background-color: var(--grey-background); opacity: 0.7; border-radius: 60px; z-index: 1; } .info-link-v3__left-image { position: relative; z-index: 1; } .info-link-v3__left-image img { width: 100%; } .info-link-v3__right-image { position: relative; z-index: 1; } .info-link-v3__wrap.container { position: relative; min-height: 440px; background-color: "transparent"; background-size: cover; background-repeat: no-repeat; background-position: center; } .info-link-v3__image-box { position: relative; min-width: 40%; height: auto; } .info-link-v3__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; } .info-link-v3__subtitle { margin: 0px; } .info-link-v3__action { width: 100%; } .info-link-v3__action .btn { min-width: 140px; } .info-link-v3__microscope { display: flex; flex-direction: row; } .info-link-v3__microscope-left, .info-link-v3__microscope-right { flex: 0.5; display: flex; flex-direction: column; gap: 24px; } .info-link-v3__microscope-left > h4, .info-link-v3__microscope-right > h4 { text-transform: uppercase; color: var(--main); } .info-link-v3__microscope-container { display: flex; flex-direction: row; gap: 24px; justify-content: center; } .info-link-v3__microscope-container > img { width: 90px; height: 90px; } @media only screen and (max-width: 1080px) { .info-link-v3__wrap { border-radius: 60px; padding: 48px 24px; display: flex; flex-direction: column; justify-content: space-between; } .info-link-v3__right-image, .info-link-v3__left-image { order: 1; width: 100% !important; height: 320px; position: relative !important; inset: 0px auto auto 0px !important; } .info-link-v3__right-image img, .info-link-v3__left-image img { position: relative !important; top: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); margin-top: -60px; } .info-link-v3__content { text-align: center; width: 100% !important; order: 2; } .info-link-v3__action .btn { margin: 0 auto; } .info-link-v3__image-box { max-height: 320px; } } @media only screen and (max-width: 800px) { .info-link-v3__microscope { flex-direction: column; gap: 48px; } .info-link-v3__microscope-left, .info-link-v3__microscope-right { flex: 1; } .info-link-v3__microscope-left > h4, .info-link-v3__microscope-right > h4 { margin: 0px; } } @media only screen and (max-width: 640px) { .info-link-v3__wrap { border-radius: 32px; padding-bottom: 24px; } .info-link-v3__right-image, .info-link-v3__left-image { order: 1; width: 100% !important; height: auto; position: relative !important; inset: 0px auto auto 0px !important; } .info-link-v3__right-image img, .info-link-v3__left-image img { position: relative !important; top: 0; left: 50%; height: auto; width: 100%; transform: translateX(-50%); margin-top: -60px; } } .info-link.content-block { padding: 24px 0px; } .info-link__wrap { min-height: 200px; width: 100%; padding: 80px 100px; display: flex; flex-direction: row; justify-content: center; } .info-link__icon { display: flex; flex-direction: row; margin-bottom: 12px; justify-content: center; } .info-link__icon img { -o-object-fit: cover; object-fit: cover; height: 100%; width: auto; } .info-link__content { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0.6; gap: 12px; } .info-link__action { margin-top: 12px; } .info-link__action .btn { max-width: none; min-width: 220px; width: -moz-fit-content; width: fit-content; } .info-link__image-right { display: none; } .info-link__wrap.container.content-block--grey.image--right { gap: 24px; } .info-link__wrap.container.content-block--grey.image--right .info-link__image-right { display: block; flex: 0.4; height: auto; display: flex; flex-direction: column; justify-content: center; } .info-link__wrap.container.content-block--grey.image--right .info-link__image-right--image_in img { margin: 0 auto; max-height: 200px; } .info-link__wrap.container.content-block--grey.image--right .info-link__content { align-items: start; text-align: start; } .info-link__wrap.container.content-block--grey.image--right .info-link__icon { justify-content: start; } .info-link__wrap.container.content-block--grey.image--right .info-link__image-list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--1, .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--2, .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--3 { width: 320px; min-height: 100px; height: auto; } .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--1 img, .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--2 img, .info-link__wrap.container.content-block--grey.image--right .info-link__image-list--item--3 img { min-height: 100px; margin: 0 auto; max-height: 200px; } @media only screen and (max-width: 1080px) { .info-link__content { flex: 1; } .info-link__wrap { padding: 24px; } } @media (max-width: 640px) { .info-link__wrap { display: flex; flex-direction: column; } } .info-link-small__wrap { position: relative; z-index: 1; padding: 16px 32px 16px 16px; height: -moz-fit-content; height: fit-content; border-radius: 32px; } .info-link-small__wrap.children_background::before { content: ""; position: absolute; inset: 0; background-image: url("/images/services/detskaya-stomatologiya/child_pattern_vector.svg"); background-size: cover; background-position: center; opacity: 1; z-index: -1; } .info-link-small__content { min-height: 160px; display: flex; flex-direction: row; gap: 24px; justify-content: space-between; align-items: center; } .info-link-small__image { min-width: 256px; width: 256px; height: 160px; position: relative; } .info-link-small__image--observe { position: absolute; width: 256px; height: 256px; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; opacity: 0; } .info-link-small__image--observe.active { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .info-link-small__text { width: 100%; min-height: 72px; display: flex; flex-direction: column; justify-content: space-between; } .info-link-small__title { margin: 0px; } .info-link-small__action .btn { max-width: none; min-width: 177px; width: -moz-fit-content; width: fit-content; height: 64px; } .info-link-small__wrap-right { width: 100%; display: flex; justify-content: space-between; gap: 16px; } @media (max-width: 1080px) { .info-link-small__wrap-right { flex-direction: column; } } @media (max-width: 640px) { .info-link-small__content { flex-direction: column; align-items: center; padding: 0px; gap: 0px; } .info-link-small__action { display: flex; justify-content: center; } .info-link-small__wrap { padding: 0px; } .info-link-small__wrap-right { position: relative; z-index: 1; border-radius: 24px; padding: 48px 24px 24px 24px; } .info-link-small__title { margin-bottom: 32px; text-align: center; } .info-link-small__subtitle { text-align: center; } .info-link-small__image { height: 190px; position: relative; z-index: 0; } } @media (max-width: 480px) { .info-link-small__action .btn { width: 100%; } } .bracket-calculator.stuck-footer { margin-bottom: 0; } .bracket-calculator__subtitle { margin-top: 24px; line-height: 24px; text-align: center; margin-bottom: 40px; } .bracket-calculator__wrap { position: relative; min-height: 560px; } .bracket-calculator__form { position: absolute; z-index: 1; left: 0; top: -116px; bottom: -116px; width: 486px; box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.2); border-radius: 8px; } .bracket-calculator__form--image img { width: 100%; } .bracket-calculator__content { display: flex; flex-direction: column; } .bracket-calculator__content .bracket-calculator__label { margin-top: 24px; margin-bottom: 16px; } .bracket-calculator__content .bracket-calculator__values { display: flex; flex-wrap: wrap; } .bracket-calculator__content .bracket-calculator__value { display: flex; flex-direction: column; margin-right: 24px; margin-bottom: 24px; border-radius: 12px; background: var(--grey-background); color: var(--dark-font); cursor: pointer; align-items: center; gap: 12px; padding: 8px; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .bracket-calculator__content .bracket-calculator__value:last-child { margin-right: 0; } .bracket-calculator__content .bracket-calculator__value.active { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 30%, var(--main) 100%); color: var(--light-font); box-shadow: 0 6px 18px var(--shadow-grey); } .bracket-calculator__content .bracket-calculator__value.active .bracket-calculator__image svg { opacity: 1; stroke: var(--main); } .bracket-calculator__content .bracket-calculator__image { width: 277px; height: 80px; border-radius: 8px; display: flex; justify-content: center; align-items: center; background-color: var(--light-background); background-position: bottom; background-repeat: no-repeat; background-size: contain; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .bracket-calculator__content .bracket-calculator__image svg { width: 36px; height: 36px; opacity: 1; stroke: var(--grey-font); } .bracket-calculator__content .bracket-calculator__value_label { text-align: center; margin-top: 12px; transition: color 0.3s ease; } .bracket-calculator__action { margin-top: 48px; } .bracket-calculator__action .btn { margin: 0; padding: 18px 20px; width: 100%; min-width: 280px; } @media (max-width: 900px) { .bracket-calculator__action .btn { margin: 0px auto; width: 100%; min-width: 280px; } } @media (max-width: 800px) { .bracket-calculator { margin: 47px 0; } } @media (max-width: 640px) { .bracket-calculator__values { display: flex; flex-direction: column; align-items: center; gap: 24px; } .bracket-calculator__value { max-width: 293px; min-width: 293px; margin: 0px !important; } .bracket-calculator__content .bracket-calculator__values { flex-direction: column; } .bracket-calculator__content .bracket-calculator__value { align-items: center; margin-right: 0; } .bracket-calculator__label { text-align: center; } .bracket-calculator__action .btn { margin: 0px auto; width: 100%; min-width: 280px; } } .stage-bracket__wrap { display: flex; gap: 24px; } .stage-bracket__column-first { flex: 0.3; height: auto; display: flex; flex-direction: column; gap: 36px; border-radius: 32px; background-color: var(--grey-background); padding: 24px; } .stage-bracket__column-second { flex: 0.7; min-height: 800px; display: flex; flex-direction: column; gap: 24px; } .stage-bracket__list { height: 100%; display: flex; flex-direction: column; gap: 12px; } .stage-bracket__list-item { flex: 0.25; display: flex; flex-direction: column-reverse; gap: 12px; } .stage-bracket__list-item-name { padding: 0px 24px; text-align: center; width: 100%; } .stage-bracket__list-item > div:last-child { height: 100%; border-radius: 32px; background-size: cover; background-repeat: no-repeat; background-size: 180px; background-position: center; background-color: var(--light-background); } .stage-bracket__list-item-image-one { background-image: url(/images/bracket_1.png?915c94497d22dc3c5ef27c6755598f7c); } .stage-bracket__list-item-image-two { background-image: url(/images/bracket_2.png?6debb595742e6dccd103ffb9ef03f90c); } .stage-bracket__list-item-image-three { background-image: url(/images/bracket_3.png?ad32a12f5906b66c5d5c06e656eb7271); } .stage-bracket__list-item-image-four { background-image: url(/images/bracket_4.png?293b93c2e72d1943fd2f1fef9c9c4816); } .stage-bracket__row { display: flex; gap: 24px; } .stage-bracket__row-item { width: 100%; border-radius: 32px; display: flex; flex-direction: column; gap: 12px; height: 340px; } .stage-bracket__row-item > div:first-child { padding: 24px; border-radius: 32px; background-color: var(--grey-background); } .stage-bracket__row-item > div:last-child { border-radius: 32px; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .stage-bracket__row-item-image-two { background-image: url(/images/bracket_5.png?a547c7a67dc5c30e73b08980dea69959); } .stage-bracket__row-item-image-three { background-image: url(/images/bracket_6.png?fef9452bfe5df51cbf56119d6aabcd2a); } .stage-bracket__slider-wrap { padding: 24px; height: 480px; border-radius: 32px; background-color: var(--grey-background); } .stage-bracket__content { display: flex; flex-direction: row; align-items: center; gap: 12px; } .stage-bracket h3 { margin: 0px; text-align: start; } .stage-bracket__icon { display: flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; border-radius: 100px; color: var(--light-font); background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .stage-bracket__slider { flex: 1; width: 100%; max-width: 100%; height: 100%; overflow: hidden; } .stage-bracket__slider .swiper { width: 100%; height: 100%; } .stage-bracket__slider .swiper-wrapper { width: 100%; } .stage-bracket__slider .swiper-slide { display: flex; justify-content: center; align-items: center; width: 100% !important; } .stage-bracket__slider .slide-box { width: 100%; height: 360px; border-radius: 24px; flex-shrink: 0; } .stage-bracket__slider img { border-radius: 32px; } .stage-bracket__slider-wrap { padding: 24px; height: 560px; border-radius: 32px; background-color: var(--grey-background); display: flex; flex-direction: column; gap: 24px; justify-content: flex-start; overflow: hidden; } .stage-bracket__slider-container { position: relative; display: block; margin: auto; } @media (max-width: 1200px) { .stage-bracket__slider { width: 80%; } .stage-bracket__slider-wrap { padding-top: 0px; } .stage-bracket__content { min-height: 140px; } .stage-bracket__column-first { padding-top: 0px; } } @media (max-width: 1080px) { .stage-bracket__wrap.container { flex-direction: column; } .stage-bracket__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .stage-bracket__list-item { min-height: 220px; } .stage-bracket__column-first { gap: 0px; } .stage-bracket__slider-wrap { gap: 0px; height: -moz-fit-content; height: fit-content; } } @media (max-width: 640px) { .stage-bracket__row { flex-direction: column; } .stage-bracket__row-item { height: 380px; } .stage-bracket__content { min-height: 120px; } .stage-bracket__slider { width: 100%; } .stage-bracket__slider-container { position: relative; display: block; margin: auto; } .stage-bracket__slider-wrap { padding-bottom: 72px; } } @media (max-width: 480px) { .stage-bracket__slider-wrap { padding-bottom: 72px; } .stage-bracket.content-block { padding: 24px 0; } } .upload-files__download { min-width: 400px; width: 400px; height: 100%; border-radius: 32px; padding: 10px; background-color: transparent; border: 2px dashed var(--main-gradient); background-repeat: no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 19px; } .upload-files__download svg { width: 54px; height: 54px; stroke: var(--main); } .upload-files__download span { width: 300px; text-align: center; color: var(--interface-grey); } .upload-files__files-item { border-radius: 8px; position: relative; } .upload-files__files-item > img { width: 80px; height: 48px; border-radius: 8px; -o-object-fit: cover; object-fit: cover; } .upload-files__files-item:hover .circle-loader.finished::after { opacity: 0; } .upload-files__files-item:hover .upload-files__remove { display: block; } .upload-files__files-item:hover .upload-files__remove .upload-files__image { filter: brightness(80%); } .upload-files__files-item:hover .upload-files__image, .upload-files__files-item .upload-files__files-item .upload-files__remove:hover ~ .upload-files__image { filter: brightness(80%); } .upload-files__files-item .upload-files__info { display: none; position: absolute; top: 5px; right: 24px; width: 14px !important; height: 14px !important; border-radius: 50%; background-color: rgba(22, 27, 33, 0.6); color: white; line-height: 16px; text-align: center; cursor: pointer; z-index: 20; align-items: center; justify-content: center; transition: all 0.3s ease-out; } .upload-files__files-item:hover .upload-files__remove, .upload-files__files-item:hover .upload-files__info { transition: all 0.3s ease-out; display: flex; } .upload-files__files-item:hover .upload-files__image { filter: brightness(80%); } .upload-files__files { position: relative; display: flex; gap: 8px; margin: 0px 4px; } .upload-files__files-container { display: block; width: 300px; height: -moz-fit-content; height: fit-content; } .upload-files__image { cursor: pointer; } .upload-files__image.shadow { position: relative; display: inline-block; z-index: 1; filter: brightness(60%); } .upload-files__remove { display: none; position: absolute; border: 1px solid transparent; top: 3px; right: 0.5px; width: 16px; height: 16px; border: none; background: transparent; color: white; line-height: 16px; text-align: center; cursor: pointer; z-index: 20; padding: 0; } .circle-loader { position: absolute; z-index: 10; top: 4px; right: 4px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .circle-loader svg { width: 16px; height: 16px; } .circle-loader .path { fill: rgba(22, 27, 33, 0.6); stroke: var(--light-background); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 0 100; animation: draw 1.2s linear forwards; } .circle-loader.finished .path { transition: all 0.3s ease-out; animation: none; } .circle-loader.finished::after { transition: all 0.3s ease-out; display: block; content: ""; width: 16px; height: 16px; position: absolute; left: 0; top: 0; border-radius: 50%; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 8px, cover; } @keyframes draw { 0% { stroke-dasharray: 0 100; } 100% { stroke-dasharray: 100 0; } } @media (max-width: 1280px) { .upload-files__download { min-width: 300px; width: 100%; max-width: 400px; height: -moz-fit-content; height: fit-content; padding: 32px; border-radius: 32px; border: 2px dashed var(--main-gradient); background-image: none; } } @media (max-width: 640px) { .upload-files__download { min-width: 100%; } } .consultation-distance { color: var(--main-font); } .consultation-distance__wrap { display: flex; flex-direction: column; gap: 48px; } .consultation-distance__part-wrap { display: flex; flex-direction: column; gap: 24px; } .consultation-distance__part--one { background-color: var(--grey-background); height: 272px; min-height: -moz-fit-content; min-height: fit-content; border-radius: 64px; padding: 32px; display: flex; flex-direction: row; justify-content: space-between; gap: 64px; } .consultation-distance__part--two { background-color: var(--grey-background); height: 264px; min-height: -moz-fit-content; min-height: fit-content; border-radius: 64px; padding: 32px; display: flex; flex-direction: row; justify-content: space-between; gap: 64px; } .consultation-distance__part--three { background-color: var(--grey-background); min-height: 318px; height: -moz-fit-content; height: fit-content; border-radius: 64px; padding: 32px; display: flex; flex-direction: row; justify-content: start; gap: 64px; } .consultation-distance__part--three .consultation-distance__content { width: 100%; } .consultation-distance__number { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 80px; width: 80px; height: 80px; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); box-shadow: none; border-radius: 24px; color: var(--light-font); } .consultation-distance__number.mobile { display: none; } .consultation-distance__content { height: 100%; width: 728px; display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 16px; } .consultation-distance__content > h3 { margin: 0px; } .consultation-distance__text { width: 100%; } .consultation-distance__subtitle { margin: 0px 0px 16px 0px; } .consultation-distance__example { width: 100%; height: 48px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .consultation-distance__example-item { display: flex; align-items: center; } .consultation-distance__example-item svg { margin: 16px 24px 0px 4px; min-width: 16px; width: 16px; height: 16px; stroke: var(--interface-grey); } .consultation-distance__example-item > div { display: flex; margin-left: 16px; } .consultation-distance__example-image { display: flex; gap: 8px; } .consultation-distance__example img { border-radius: 8px; } .consultation-distance__popup.top { transform: translateY(calc(-100% - 36px)); } .consultation-distance__popup.top::after { top: unset; bottom: -9px; transform: translateX(-50%) rotate(45deg); } .consultation-distance__form { min-height: 160px; height: -moz-fit-content; height: fit-content; width: 100%; } @media (max-width: 1280px) { .consultation-distance__download { min-width: 300px; width: 100%; max-width: 400px; height: -moz-fit-content; height: fit-content; padding: 32px; border-radius: 32px; border: 2px dashed var(--main-gradient); background-image: none; } .consultation-distance__content { width: 100%; } .consultation-distance__example { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; } .consultation-distance__example-item { flex-direction: column; gap: 12px; } .consultation-distance__example-item > div { display: flex; flex-direction: row; margin-left: 0px; } } @media (max-width: 900px) { .consultation-distance__part--one { height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 32px; } .consultation-distance__part--two { height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 32px; } .consultation-distance__example { flex-direction: row; } .consultation-distance__example-item { flex-direction: column; gap: 12px; } .consultation-distance__example-item > div { display: flex; flex-direction: row; margin-left: 0px; } .consultation-distance__wrap { gap: 16px; } .consultation-distance__content { gap: 32px; } .consultation-distance__number.desktop { display: none; } .consultation-distance__number.mobile { display: flex; } .consultation-distance__text { display: flex; flex-direction: column; gap: 32px; } .consultation-distance__text > div { display: flex; align-items: center; gap: 16px; max-width: 640px; } .consultation-distance__subtitle { width: 80%; margin: 0px; } } @media (max-width: 640px) { .consultation-distance__text > div { max-width: 480px; } .consultation-distance__example { display: flex; flex-direction: row; } .consultation-distance__example-image { flex: 0.5; } .consultation-distance__example-image img { max-width: 110px; } .consultation-distance__example-notation { flex: 0.5; } .consultation-distance__part--two .consultation-distance__example-image { display: flex; flex-direction: column; gap: 16px; } .consultation-distance__part--two .consultation-distance__example-item { display: flex; flex-direction: row; } .consultation-distance__part--two .consultation-distance__example-item > div > span { width: 80px; } .consultation-distance.content-block { padding: 0px; } .consultation-distance__part--one, .consultation-distance__part--two, .consultation-distance__part--three { border-radius: 32px; } } .warning__wrap { display: flex; position: relative; z-index: 1; } .warning__description { padding: 16px 24px 16px 64px; background-color: var(--grey-background); display: flex; align-items: center; justify-content: space-between; border-radius: 32px; width: 50%; position: relative; z-index: 3; } .warning__image { max-width: 160px; background-color: var(--light-background); height: 160px; width: 100%; margin-right: 24px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; } .warning__image img { max-width: unset; } .warning__title { line-height: 25.2px; } .warning__info { position: relative; z-index: 2; background-color: var(--error); border-radius: 32px; width: calc(50% + 50px); margin-left: -50px; padding: 48px 32px 48px 82px; display: flex; align-items: center; justify-content: space-between; } .warning__icon { width: 100%; max-width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid var(--light-background); display: flex; align-items: center; justify-content: center; margin-right: 16px; } .warning__icon svg { width: 48px; height: 48px; } .warning__wrap-only-text { background-color: var(--error); border-radius: 32px; padding: 48px 32px 48px 82px; display: flex; align-items: center; justify-content: center; width: 100%; flex-wrap: nowrap; box-sizing: border-box; min-height: auto; max-width: 100%; } .warning__wrap-only-text .warning__info { padding: 0; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .warning__text { line-height: 25.2px; color: var(--light-font); } .warning__text_after { padding: 24px; } .warning__text_before { margin-bottom: 24px; } @media only screen and (max-width: 1300px) { .warning__image { min-width: 130px; width: 130px; height: 130px; } } @media only screen and (max-width: 900px) { .warning.content-block { padding: 0px; } .warning__wrap { background-color: var(--error); display: flex; flex-direction: column; min-height: 480px; justify-content: end; border-radius: 32px 32px 32px 32px; width: calc(100% - 2px); margin: 0 auto; position: relative; } .warning__description { display: flex; flex-direction: column; align-items: center; gap: 26px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% + 2px); max-width: none; margin-top: -1px; padding: 35px 15px; box-sizing: border-box; background-color: var(--grey-background); border-radius: 32px; z-index: 2; } .warning__image { min-width: 150px; min-height: 150px; width: 150px; margin-right: 0px; } .warning__info { z-index: 1; border-radius: 0px 0px 32px 32px; margin-left: 0px; height: -moz-fit-content; height: fit-content; width: 100%; background-color: var(--error); padding: 70px 33px; padding-bottom: 22px; max-width: 480px; margin: 0 auto; } .warning__title { max-width: 440px; text-align: center; } .warning__icon { width: 24px; height: 24px; max-width: 24px; max-height: 24px; border: none; } .warning__wrap-only-text { padding: 48px 32px 48px 32px; } .warning__wrap-only-text .warning__info { padding: 0; min-width: none; max-width: none; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .warning__wrap-only-text .warning__icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; } } @media only screen and (max-width: 640px) { .warning.content-block { padding: 0px; } } @media only screen and (max-width: 480px) { .warning__wrap { min-height: 480px; } .warning__image { min-width: 130px; min-height: 130px; width: 130px; margin-right: 0px; } } .warning-text__container { display: flex; flex-direction: column; gap: 10px; height: -moz-fit-content; height: fit-content; margin: 64px auto; } .warning-text__text--before { min-height: 360px; height: -moz-fit-content; height: fit-content; text-transform: uppercase; } .warning-text__text--after { display: block; min-height: 240px; width: 77%; margin: 0px auto; margin-top: -10px; height: -moz-fit-content; height: fit-content; text-transform: uppercase; color: var(--error); } .warning-text__wrap { width: 100%; height: -moz-fit-content; height: fit-content; } .warning-text__content { display: flex; flex-direction: row; align-items: center; gap: 24px; width: 700px; min-height: 192px; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); border-radius: 32px; margin: 0px 20% 0px 28%; padding: 16px 32px 16px 16px; } .warning-text__image { display: flex; align-items: center; justify-content: center; position: relative; width: 256px; min-width: 256px; height: 160px; overflow: visible; z-index: 1; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; } .warning-text__image.active { opacity: 1; transform: translateY(0); } .warning-text__image > img { width: 256px; min-width: 256px; height: 256px; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); } .warning-text__text { display: flex; flex-direction: row; align-items: center; gap: 16px; } .warning-text__icon { width: 48px; height: 48px; min-width: 48px; border-radius: 100%; background-color: var(--error); display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 1080px) { .warning-text__content { margin: 0px; } .warning-text__container { display: flex; flex-direction: column; gap: 32px; } .warning-text__text--before, .warning-text__text--after { min-width: none; width: 100%; min-height: 100px; height: -moz-fit-content; height: fit-content; word-wrap: break-word; } } @media only screen and (max-width: 700px) { .warning-text__content { width: 100%; min-width: none; } } @media only screen and (max-width: 640px) { .warning-text__image { width: 128px; height: 128px; min-width: 128px; } .warning-text__image img { width: 128px; height: 128px; min-width: 128px; } .warning-text__icon { display: none; } .warning-text__content { gap: 8px; } } .equipment-block { overflow: hidden; } .equipment-block.content-block { border-radius: 0px; position: relative; } .equipment-block.content-block::after { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 360px; right: -1px; bottom: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .equipment-block__title { margin: 0; } .equipment-block__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; } .equipment-block__name { margin: 0px; margin-bottom: 10px; } .equipment-block__slider-out { margin-right: calc(50% - 50vw); margin-left: -12px; position: relative; } .equipment-block__slider-out .swiper { padding-left: 12px; } .equipment-block__slider-out::before { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 100%; left: -1px; top: 0; background: linear-gradient(to left, transparent 0%, var(--grey-background) 100%); pointer-events: none; } .equipment-block__item { display: flex; flex-direction: row; gap: 16px; height: 360px; padding: 32px 48px; border-radius: 24px; background-color: var(--light-background); display: flex; align-items: center; justify-content: space-between; } .equipment-block__item--left { height: 100%; min-width: 256px; max-width: 256px; display: flex; flex-direction: column; justify-content: space-between; } .equipment-block__item--left > p { color: var(--grey-font); } .equipment-block__item--image { height: 100%; width: 100%; position: relative; } .equipment-block__item--image img { max-width: 400px; max-height: 296px; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .equipment-block__item--right { line-height: 140%; height: 100%; min-width: 256px; max-width: 256px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 14; line-clamp: 14; overflow: hidden; position: relative; } .equipment-block__country { border-radius: 80px; min-width: 120px; height: 48px; width: -moz-fit-content; width: fit-content; padding: 8px; display: flex; gap: 10px; align-items: center; justify-content: center; background-color: var(--grey-background); } .equipment-block__country--image { max-width: 400px; border-radius: 100%; max-height: 296px; overflow: hidden; } .equipment-block__country--image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1280px) { .equipment-block.content-block::after { display: none; } .equipment-block__slider-out::before { display: none; } .equipment-block__item { height: 420px; padding: 24px; border-radius: 20px; flex-wrap: wrap; align-items: flex-start; row-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .equipment-block__item--left { order: 1; min-width: 280px; max-width: 280px; height: 220px; } .equipment-block__item--image { order: 2; min-width: 0; width: calc(100% - 300px); height: 220px; display: flex; align-items: center; justify-content: center; } .equipment-block__item--image img { max-width: 100%; max-height: 220px; } .equipment-block__item--right { order: 3; min-width: 100%; max-width: 100%; height: 132px; } .equipment-block__name { margin-bottom: 12px; } } @media (max-width: 640px) { .equipment-block__head { margin-bottom: 24px; } .equipment-block__slider-out .swiper { padding: 0px 12px; } .equipment-block.content-block { padding: 24px 0px; background: var(--grey-background); border-radius: 24px; } .equipment-block__title { margin-bottom: 24px; } .equipment-block__item { min-height: 520px; height: -moz-fit-content; height: fit-content; padding: 16px; row-gap: 16px; } .equipment-block__item--left { min-width: 100%; max-width: 100%; height: auto; gap: 16px; } .equipment-block__item--image { width: 100%; height: 200px; } .equipment-block__item--image img { max-height: 200px; } .equipment-block__item--right { min-height: 168px; height: -moz-fit-content; height: fit-content; } .equipment-block__item--right::after { display: none; } } .material-block__title { margin-bottom: 11px; } .material-block__subtitle { max-width: 780px; margin-bottom: 51px; line-height: 19.6px; } .material-block__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; } .material-block__item { max-width: 340px; width: 100%; background-color: var(--light-background); border: 1.5px solid transparent; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 90px; cursor: pointer; transition: border-color 0.3s ease; } .material-block__item--active { border-color: var(--main); } .material-block__text { margin-top: 24px; border-radius: 16px; min-height: 180px; padding: 24px; background-color: var(--light-background); } @media (max-width: 1560px) { .material-block__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1156px) { .material-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .material-block__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 800px) { .material-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .material-block.content-block.content-block--grey { padding: 40px 0px; } .material-block__title.title { padding: 0px 12px; } .material-block__subtitle { padding: 0px 12px; text-align: center; margin-bottom: 32px; } .material-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0px 12px; padding: 0px; } .material-block__item { margin: 0px; } } @media (max-width: 480px) { .material-block__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .material-block__item { height: 72px; padding: 12px 12px 12px 12px; overflow: hidden; } } .form-footer__container { display: flex; justify-content: space-between; } .form-footer__content { background-color: var(--light-background); padding: 32px 32px 64px; border-radius: 64px; width: 100%; max-width: 692px; } .form-footer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .form-footer__image { position: relative; border-radius: 32px; background-color: var(--grey-background); width: 100%; max-width: 256px; height: 160px; } .form-footer__image-wrap { position: absolute; bottom: 0; width: 100%; left: 50%; transform: translateX(-50%); height: 100%; } .form-footer__image-wrap img { height: 100%; max-width: unset; margin: 0 auto; } .form-footer__title { margin-left: 32px; } .form-footer__form { padding: 0 32px; } .form-footer__advantages { padding: 32px; } .form-footer__advantages-title { padding: 35px 32px; margin-bottom: 32px; } .form-footer__advantages-title .title { max-width: 268px; } .form-footer__advantages-list { padding: 0 32px; } .form-footer__advantages-item { margin-bottom: 48px; } .form-footer__advantages-name { line-height: 19.6px; margin-bottom: 8px; } @media only screen and (max-width: 900px) { .form-footer.content-block.content-block--grey { padding: 12px 0px 40px 0px; } .form-footer__container.container { display: flex; flex-direction: column; align-items: center; } .form-footer__container.container { display: flex; flex-direction: column; } .form-footer__title.title { text-align: center; margin: 0px; } .form-footer__head { display: flex; flex-direction: column; align-items: center; gap: 32px; } .form-footer__content { padding: 24px 24px; } .form-footer__image { max-width: none; } .form-footer__advantages { padding-bottom: 0px; } .form-footer__advantages-list { margin: 0px; padding: 0px; gap: 24px; } .form-footer__advantages-title { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0px; } } @media only screen and (max-width: 640px) { .form-footer { border-radius: 48px; } .form-footer__form { padding: 0px; } .form-footer__content { border-radius: 48px; } } .skeleton-page__content { min-height: 328px; border-radius: 32px; margin-top: 32px; padding: 64px 96px; background: var(--light-background); } .skeleton-page__content--item { width: 100%; border-radius: 64px; min-height: 300px; height: 100%; margin-bottom: 16px; } .skeleton-simple__breadcrumbs { display: none; } .skeleton-simple { margin-top: 0px; padding-top: 0px; } .skeleton-simple__large { margin-top: 0px; height: 462px; border-radius: 57px; } .skeleton-simple__middle-container { height: 215px; border-radius: 32px; } .skeleton-simple__small { min-height: calc(100vh - 462px - 215px); border-radius: 57px; } .skeleton-index { margin-top: 0px; padding-top: 0px; } .skeleton-index__large { margin-top: 0px; height: 730px; border-radius: 57px; } .skeleton-navbar { width: 100%; height: 80px; border-radius: 16px; } .skeleton-catalog { height: -moz-fit-content; height: fit-content; border-radius: 0px; display: flex; gap: 24px; } .skeleton-catalog.skeleton-content-block { margin-top: 0px; } .skeleton-catalog__filter { min-width: 320px !important; width: 320px; height: 320px; border-radius: 32px; } .skeleton-catalog__list--large { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 3fr)); gap: 10px; } .skeleton-catalog__list--large .skeleton-catalog__card { height: 480px; } .skeleton-catalog__list--middle { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 4fr)); gap: 10px; } .skeleton-catalog__list--middle .skeleton-catalog__card { height: 420px; } .skeleton-catalog__list--info { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 3fr)); gap: 10px; } .skeleton-catalog__list--info .skeleton-catalog__card { height: 400px; } .skeleton-catalog__list--width { width: 100%; height: 320px; border-radius: 32px; } .skeleton-catalog__card { width: 100%; border-radius: 32px; max-width: 320px; } @media only screen and (max-width: 1024px) { .skeleton-catalog { display: flex; flex-direction: column; gap: 49px; } .skeleton-catalog__filter { width: 100%; height: 84px; padding: 0px 24px; border-radius: 12px; margin-bottom: 12px; flex-direction: column; gap: 10px; justify-content: space-between; } .skeleton-catalog__list--large { grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)); } .skeleton-catalog__list--middle { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media only screen and (max-width: 640px) { .skeleton-index { margin-top: 0px; padding: 0px 12px; } .skeleton-index__large { margin-top: 0px; height: 400px; border-radius: 24px; } .skeleton-simple { margin-top: -32px; display: flex; flex-direction: column; align-items: center; } .skeleton-simple__breadcrumbs { height: 24px; display: flex; gap: 10px; } .skeleton-simple__breadcrumbs--items { height: 24px; min-width: 100px; width: 25%; border-radius: 12px; } .skeleton-simple__large, .skeleton-simple__small { max-width: 94%; border-radius: 32px; } .skeleton-simple__large { margin-top: 24px; } .skeleton-catalog__card { max-width: none; } } .skeleton, .skeleton-navbar, .skeleton-index__large, .skeleton-catalog__filter, .skeleton-catalog__card, .skeleton-catalog__list--width, .skeleton-page__text--bread-item, .skeleton-page__text--title, .skeleton-page__navbar--item, .skeleton-page__content, .skeleton-simple__large, .skeleton-simple__small, .skeleton-simple__breadcrumbs--items, .skeleton-simple__middle-container { overflow: hidden; background: var(--loader); position: relative; } .skeleton::after, .skeleton-navbar::after, .skeleton-index__large::after, .skeleton-catalog__filter::after, .skeleton-catalog__card::after, .skeleton-catalog__list--width::after, .skeleton-page__text--bread-item::after, .skeleton-page__text--title::after, .skeleton-page__navbar--item::after, .skeleton-page__content::after, .skeleton-simple__large::after, .skeleton-simple__small::after, .skeleton-simple__breadcrumbs--items::after, .skeleton-simple__middle-container::after { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--loader) 0%, var(--loader) 40%, #fff 50%, var(--loader) 60%, var(--loader) 100%); animation: skeleton 1s ease-in-out infinite; } @keyframes skeleton { 0% { left: -150%; } 100% { left: 150%; } } .breadcrumb { position: absolute; top: 153px; left: 0; z-index: 1; width: 100%; } .breadcrumb__list { display: flex; align-items: center; } .breadcrumb__list .breadcrumb__delimiter { width: 24px; height: 24px; opacity: 0.3; transform: rotate(-90deg); margin-right: 4px; } .breadcrumb__item { margin-right: 4px; } .breadcrumb__item > span, .breadcrumb__item > a { color: var(--light-font); font-weight: 600; } .breadcrumb__item:last-child { margin-right: 0; } .breadcrumb__delimiter { width: 24px; height: 24px; opacity: 0.5; transform: rotate(-90deg); margin-right: 4px; } .breadcrumb__icon { width: 32px; height: 32px; opacity: 0.5; margin-top: 8px; margin-right: 4px; } .breadcrumb.active-dark .breadcrumb__item > span, .breadcrumb.active-dark .breadcrumb__item > a { color: var(--main-font); } .breadcrumb.active-dark .breadcrumb__icon svg { stroke: var(--main-font) !important; } .breadcrumb.active-dark .breadcrumb__delimiter svg { stroke: var(--main-font) !important; } .content-page__container.container .breadcrumb { position: relative; top: 0; min-height: 32px; height: -moz-fit-content; height: fit-content; } .content-page__container.container .breadcrumb__item > span, .content-page__container.container .breadcrumb__item > a { color: var(--main-font); font-weight: 600; } .content-page__container.container .breadcrumb__delimiter svg { stroke: var(--grey-font); } @media (max-width: 640px) { .breadcrumb { top: 100px; } .breadcrumb__item { margin-right: 4px; } .breadcrumb__item > span, .breadcrumb__item > a { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--main-font); } .breadcrumb__icon { width: 24px; height: 24px; opacity: 0.5; margin-right: 4px; margin-top: 0px; } .breadcrumb__icon svg { stroke: var(--main-font); width: 100%; height: 100%; } .breadcrumb__delimiter svg { stroke: var(--grey-font); } .content-page__container .breadcrumb__item:last-child { display: none; } } .error-404__content h2 { margin: 0px; color: var(--main); } .error-404 { background-color: var(--grey-background); } .error-404.content-block { margin-top: 0px; } .error-404__container { width: 100%; } .error-404__container.container { display: flex; height: 609px; width: 100%; margin: 0 auto; justify-content: center; align-items: center; } .error-404__content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 135px; } .error-404__content h1 { color: var(--main); margin-bottom: 100px; } .error-404__content p { text-align: center; margin-bottom: 54px; } .error-404__content button { width: 165px; height: 64px; background-color: transparent; } .error-404__button { color: var(--main-font); } @media (max-width: 640px) { .error-404 { border: 1px solid transparent; } .error-404.content-block { margin-top: 112px; padding: 0px; } .error-404 .header_bottom { margin-top: -96px; } .error-404__content { padding: 0px; } } .up-page-btn { cursor: pointer; height: 64px; width: 84px; border-radius: 16px; padding: 10px 5px; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--light-background); box-shadow: 0px 14px 24px var(--shadow); position: fixed; right: 36px; bottom: 84px; z-index: 100; transition: all 0.6s ease; transform: translateY(16px); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .up-page-btn.active { opacity: 1; transform: translateY(0px); } .up-page-btn:active { transition: border 0.3s ease; border: 1px solid var(--border-grey); } .up-page-btn svg { min-width: 24px; width: 24px; height: 24px; stroke: var(--main); } .up-page-btn span { color: var(--main-font); } @media (max-width: 640px) { .up-page-btn { right: 12px; bottom: 10px; } } .float-panel { height: -moz-fit-content; height: fit-content; width: 84px; display: flex; flex-direction: column; gap: 1px; } .float-panel__container { position: fixed; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; right: 36px; top: 50%; display: flex; flex-direction: row; pointer-events: auto; justify-content: end; opacity: 0; z-index: 100; transition: all 0.6s ease; transform: translateY(-45%); } .float-panel__container.active { opacity: 1; transform: translateY(-50%); } .float-panel__mask-shadow { width: 84px; opacity: 0; z-index: 90; position: fixed; right: 36px; top: 50%; display: flex; flex-direction: column; gap: 1px; transition: all 0.6s ease; transform: translateY(-45%); pointer-events: none; } .float-panel__mask-shadow.active { opacity: 1; transform: translateY(-50%); } .float-panel__mask-items { box-shadow: 0px 14px 24px var(--shadow); width: 84px; height: 74px; border-radius: 8px 8px 8px 8px; } .float-panel__mask-items:first-child { border-radius: 16px 16px 8px 8px; } .float-panel__mask-items:last-child { border-radius: 8px 8px 16px 16px; } .float-panel__mask-close { display: none; } .float-panel__close { display: none; } .float-panel__item { cursor: pointer; width: 84px; height: 74px; border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: end; background: var(--light-background); box-shadow: 0px 14px 24px var(--shadow); padding: 10px 5px; transition: all 0.3s ease; transition: background 0.3s ease; } .float-panel__item:first-child { border-radius: 16px 16px 8px 8px !important; } .float-panel__item--with-slide { border-radius: 16px 16px 8px 8px; } .float-panel__item:last-child { border-radius: 8px 8px 16px 16px; } .float-panel__item svg { min-width: 24px; width: 24px; height: 24px; stroke: var(--main); } .float-panel__item span { text-align: center; color: var(--main-font); } .float-panel__item:hover { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .float-panel__item:hover svg { stroke: var(--light-font); } .float-panel__item:hover span { color: var(--light-font); } .float-panel__item:hover .float-panel__item-wrap { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); transition-delay: 0.3s; } .float-panel__item:hover .float-panel__slide { opacity: 0; pointer-events: auto; transform: translateX(0); } .float-panel__item-wrap { border-radius: 8px; position: relative; z-index: 10; height: 74px; width: 84px; display: flex; flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: -10px; margin-bottom: -10px; background: var(--light-background); } .float-panel__item-wrap:first-child { border-radius: 16px 16px 8px 8px; } .float-panel__slide { position: absolute; top: 0; right: calc(100% - 32px); width: 84px; height: 100%; background: var(--grey-background); box-shadow: 0px 14px 24px var(--shadow); border-radius: 12px; display: flex; flex-direction: row; gap: 16px; padding: 16px; align-items: center; padding-left: 16px; border-radius: 16px; opacity: 0; transform-origin: right center; pointer-events: none; transition: width 0.3s ease, opacity 0.3s ease; transition-delay: 0s; } .float-panel__slide-item { cursor: pointer; width: 48px; min-width: 48px; height: 48px; border-radius: 50%; opacity: 1; display: flex; justify-content: center; align-items: center; background: var(--light-background); transition: opacity 0.2s ease; transition: background 0.2s ease; } .float-panel__slide-item .panel-background { background: transparent !important; } .float-panel__slide-item:hover.panel--whatsapp { background: var(--whatsapp); } .float-panel__slide-item:hover.panel--telegram { background: var(--telegram); } .float-panel__slide-item:hover.panel--max { background: var(--max) !important; } .float-panel__slide-item:hover .float-panel__slide-icon--whatsapp, .float-panel__slide-item:hover .float-panel__slide-icon--telegram { fill: var(--light-font); } .float-panel__slide-item:hover .float-panel__slide-icon--max:first-child { display: none; } .float-panel__slide-item:hover .float-panel__slide-icon--max:last-child { display: block; } .float-panel__slide-icon--whatsapp { transition: fill 0.2s ease; fill: var(--whatsapp); } .float-panel__slide-icon--telegram { transition: fill 0.2s ease; fill: var(--telegram); } .float-panel__slide-icon--max { stroke: none !important; transition: fill 0.2s ease; } .float-panel__slide-icon--max:first-child { display: block; } .float-panel__slide-icon--max:last-child { display: none; } html { scroll-behavior: smooth; } @media (max-width: 640px) { .float-panel__close { cursor: pointer; width: 84px; height: 40px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--light-background); box-shadow: 0px 14px 24px var(--shadow); } .float-panel__mask-close { display: block; height: 40px; width: 84px; border-radius: 16px; box-shadow: 0px 14px 24px var(--shadow); } .float-panel__container { right: 12px; bottom: unset; top: 12px; transform: translateY(5%); } .float-panel__container.active { transform: translateY(0); } .float-panel__mask-shadow { position: fixed; right: 12px; top: 12px; transform: translateY(5%); background: transparent; } .float-panel__mask-shadow.active { transform: translateY(0); } .float-panel__mask-shadow.is-hidden { opacity: 0; transform: translateX(45%); pointer-events: none; } .float-panel { opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; } .float-panel.is-hidden { opacity: 0; transform: translateX(45%); pointer-events: none; } } .cookie-container { position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; width: 100%; height: auto; z-index: 10001; } .cookie-notice { display: flex; gap: 16px; position: relative; width: auto; max-width: 1300px; height: auto; padding: 20px; margin: 0px 30px 24px 30px; color: var(--light-font); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .cookie-notice::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0px; left: 0px; border-radius: 12px; background-color: var(--grey-background, #253F41); box-shadow: 0px 14px 24px 0px var(--shadow-grey); opacity: 0.9; z-index: -1; } .cookie-notice__description { display: flex; align-items: center; justify-content: flex-start; } .cookie-notice__icon { margin-right: 16px; } .cookie-notice__icon svg { display: block; width: 24px; height: 24px; } .cookie-notice__text p { color: var(--main-font); margin-bottom: 6px; } .cookie-notice__text a { color: var(--main-font); display: inline-block; border-bottom: 1px solid var(--whiteBorder); transition: border-color 0.1s ease; } .cookie-notice__action { display: flex; align-items: center; gap: 8px; } .cookie-notice__action .cookie-notice__settings { position: relative; display: flex; align-items: center; } .cookie-notice__action .cookie-notice__settings-trigger { cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: var(--light-background); border: 1.5px solid var(--border-grey); width: 48px; height: 48px; border-radius: 12px; transition: all 0.3s ease; } .cookie-notice__action .cookie-notice__settings-trigger:hover { background-color: color-mix(in srgb, var(--border-grey) 20%, transparent); } .cookie-notice__action .cookie-notice__settings-trigger:hover svg { stroke: var(--main); } .cookie-notice__action .cookie-notice__settings-trigger:active { background-color: color-mix(in srgb, var(--border-grey) 60%, transparent); } .cookie-notice__action .cookie-notice__settings-trigger:active svg { stroke: var(--main); } .cookie-notice__action .cookie-notice__settings-trigger svg { transition: all 0.3s ease; } .cookie-notice__action .cookie-notice__settings .cookie-notice__dropdown { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; min-width: 200px; padding: 8px; background: var(--grey-background); border-radius: 10px; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .cookie-notice__action .cookie-notice__settings .cookie-notice__dropdown button { width: 100%; text-align: left; background: transparent; border-radius: 6px; padding: 10px 12px; box-shadow: none; border: none; color: var(--main-font); cursor: pointer; } .cookie-notice__action .cookie-notice__settings .cookie-notice__dropdown button:hover { background: rgba(255, 255, 255, 0.1); } .cookie-notice__action .cookie-notice__settings.cookie-notice__settings--open .cookie-notice__dropdown { opacity: 1; pointer-events: auto; transform: translateY(0px); } .cookie-notice__button { white-space: nowrap; } .cookie-notice__button.btn.btn-color { width: -moz-fit-content; width: fit-content; max-width: none; } .cookie-preferences { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 1; } .cookie-preferences__overlay { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } .cookie-preferences__details { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; max-width: 550px; padding: 40px 34px; margin: 30px; color: var(--main-font); background-color: var(--light-background); box-shadow: 0px 10px 15px 5px rgba(0, 0, 0, 0.15); border-radius: 12px; z-index: 1; } .cookie-preferences__details h2 { margin-bottom: 16px; } .cookie-preferences__block-settings { display: flex; flex-direction: column; gap: 16px; } .cookie-preferences__setting { display: flex; flex-direction: column; gap: 8px; } .cookie-preferences__setting p { line-height: 16px; } .cookie-preferences .setting__title { display: flex; justify-content: space-between; } .cookie-preferences .form-item-policy__checkbox { position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 12px; cursor: pointer; flex-shrink: 0; } .cookie-preferences .form-item-policy__checkbox input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .cookie-preferences .form-item-policy__checkbox input:disabled { cursor: not-allowed; } .cookie-preferences .checkbox__btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-grey); background-color: var(--light-background); transition: opacity 0.2s ease, border-color 0.2s ease; } .cookie-preferences .checkbox__btn.active { border-color: transparent; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; } .setting__title { align-items: center; } @media (max-width: 800px) { .cookie-notice { flex-direction: column; } } @media (max-width: 480px) { .cookie-notice { margin: 0px 20px 12px 20px; } .cookie-preferences__details { margin: 20px; } } .footer { margin-top: 32px; padding: 48px 0; } .footer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; } .footer__top-actions { display: flex; align-items: center; justify-content: flex-end; } .footer__top-action { margin-right: 16px; } .footer__top-action:last-child { margin-right: 0; } .footer__middle { margin-bottom: 32px; } .footer__middle-row { display: flex; align-items: flex-start; margin-bottom: 16px; } .footer__middle-row:last-child { margin-bottom: 0; } .footer__middle-row > div { margin-right: 24px; } .footer__middle-row > div:last-child { margin-right: 0; } .footer__messengers { margin-top: 8px; } .footer__info-menu { display: none; } .footer__info-menu .info-menu__list { padding: 0; justify-content: space-between; } .footer__service-menu .service-menu__list { margin: 0 auto; } .footer__bottom { margin-top: 32px; } .footer__bottom-notice { display: flex; align-items: center; gap: 12px; padding: 12px; } .footer__bottom-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 32px; } .footer__bottom-info { display: flex; flex-wrap: wrap; width: 100%; margin: -4px -12px; } .footer__bottom-info > div { color: var(--grey-font); margin: 4px 12px; } .footer__bottom-info > div > a { text-decoration: underline; } .footer__bottom-dentalis { display: flex; align-items: center; } .footer__bottom-dentalis-logo { max-width: 142px; } .footer__bottom-dentalis-text { width: 100%; max-width: 150px; line-height: 14px; color: var(--grey-font); margin-left: 24px; } .footer__bottom-wrap { gap: 32px; } .footer__bottom-age-mark { width: 48px; min-width: 48px; height: 48px; } .footer__bottom-age-mark .interface-svg--more { stroke: none !important; width: 48px; height: 48px; min-width: 48px; } .footer__bottom-dentalis { min-width: 316px; width: -moz-fit-content; width: fit-content; max-width: 350px; } .footer__bottom-head { display: flex; gap: 24px; justify-content: space-between; align-items: center; } .footer__bottom-contraindications { max-width: 400px; display: flex; align-items: center; } .footer__bottom-contraindications > span { text-align: end; line-height: 140%; text-transform: uppercase; color: var(--grey-font); } .footer__break { flex-basis: 100%; height: 0; } @media (max-width: 1150px) { .footer__top { display: flex; flex-direction: column; gap: 16px; padding: 0px 24px; } .footer__top-social.social { display: flex; flex-direction: column-reverse; align-items: center; width: 100%; } .footer__top-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; gap: 16px; } .footer__top-actions .accessibility.footer__top-accessibility { width: 100%; order: 2; margin: 0px; } .footer__top-actions .btn { max-width: none; } .social__text { padding-top: 16px; margin-right: 0px !important; text-align: center; } } @media (max-width: 800px) { .footer__middle { padding: 0px 24px; } .footer__middle-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); -moz-column-gap: 8px; column-gap: 8px; } .work-time { height: 70px; } .work-time svg { margin-right: 4px; } .location.background-hover { padding: 8px; min-height: 48px; height: -moz-fit-content; height: fit-content; } .location__wrap { gap: 5px; } .email-block.footer__middle-email.background-hover { padding: 0px; } .email-block__wrap { height: 70px; padding: 8px; gap: 5px; border-radius: 8px; } .call-order.footer__middle-call-order.background-hover { height: 70px; padding: 8px; gap: 5px; } .footer__middle-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); -moz-column-gap: 8px; column-gap: 8px; row-gap: 16px; margin: 0px; } .footer__middle-row:last-child { row-gap: 0px; } .footer__messengers.social-messengers { padding: 8px; display: flex; flex-direction: row; align-items: flex-start; height: 70px; } .footer__dark-theme.dark-theme.background-hover { display: flex; flex-direction: row; align-items: flex-start; gap: 4px; height: 70px; } .footer__service-menu.desktop { display: none; } .footer__service-menu.adaptive { display: block; padding: 24px 0px; } .footer__bottom.container { padding: 0px 24px; } .footer__bottom-wrap { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; } .footer__bottom-info { order: -1; grid-column: 1/-1; text-align: center; } .footer__bottom-info > div { white-space: normal; } .footer__bottom-info__company_name { box-sizing: border-box; width: -moz-fit-content; width: fit-content; max-width: none; min-width: none; } .footer__bottom-age-mark { grid-column: 1; } .footer__bottom-dentalis { grid-column: 2; display: flex; flex-direction: row; padding-bottom: 24px; } .footer__bottom-head { flex-direction: column; gap: 24px; } .footer__bottom-contraindications { max-width: none; text-align: center; } .footer__bottom-contraindications > span { text-align: center; } } @media (max-width: 640px) { .footer__bottom-notice { background-color: var(--grey-background); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; } .footer__bottom-dentalis { min-width: 216px; max-width: 216px; width: -moz-fit-content; width: fit-content; } .footer__bottom-info > div { text-align: start; } .footer__bottom-info__company_name { width: 100%; } .footer__middle-row { display: block; -moz-column-count: 2; column-count: 2; } .footer__middle-row > div { -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0px; } .footer__middle-row .location, .footer__middle-row .call-order, .footer__middle-row .email-block, .footer__middle-row .work-time { position: relative; overflow: hidden; } .footer__middle-row .location::after, .footer__middle-row .call-order::after, .footer__middle-row .email-block::after, .footer__middle-row .work-time::after { content: ""; display: block; position: absolute; z-index: 90; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .footer__middle-row:last-child { gap: 16px; } .footer__middle-row .location.background-hover { padding: 8px; margin: 0px; height: -moz-fit-content; height: fit-content; min-height: 46px; } .footer__middle-row .email-block__wrap { height: -moz-fit-content; height: fit-content; min-height: 46px; } .footer__middle-row .work-time { height: -moz-fit-content; height: fit-content; min-height: 46px; } .footer__middle-row .call-order.footer__middle-call-order.background-hover { height: -moz-fit-content; height: fit-content; min-height: 46px; } .footer__middle { padding: 0px 12px; } } @media (max-width: 480px) { .info-menu__list { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; } } .problem-category__wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; } .problem-category__item { cursor: pointer; border-radius: 12px; background-color: var(--grey-background); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 154px; height: auto; padding: 24px; transform: translateY(0); transition: all 0.3s ease; } .problem-category__item h3 { margin: 0px; } .problem-category__item span { text-align: center; } .problem-category__item:hover { transform: translateY(-12px); } .problem-category__item:hover .problem-category__mask-image { background-color: var(--main); } .problem-category__mask-image { width: 72px; min-width: 72px; height: 72px; display: block; background-color: var(--interface-grey); transition: background-color 0.3s ease; } @media (max-width: 1240px) { .problem-category__wrap { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 640px) { .problem-category__wrap { grid-template-columns: repeat(1, 1fr); gap: 24px; } } .sidebar-form-select { display: flex; flex-direction: column; height: auto; } .sidebar-form-select.scroll-enabled { max-height: 400px; overflow-y: auto; overflow-x: hidden; box-sizing: content-box; } .sidebar-form-select.scroll-enabled::-webkit-scrollbar { width: 4px; } .sidebar-form-select.scroll-enabled::-webkit-scrollbar-track { padding-top: 50px; background: transparent; margin-right: 6px; padding-right: 4px; } .sidebar-form-select.scroll-enabled::-webkit-scrollbar-thumb { background: var(--interface-grey); border-radius: 100px; } .sidebar-form-select-list { display: flex; flex-direction: column; } .sidebar-form-select-list > div:last-child { border-bottom: none; } .sidebar-form-select-item { cursor: pointer; height: 48px; display: flex; flex-direction: row; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--border-grey); transition: all 0.3s ease; } .sidebar-form-select-item.active { background-color: var(--main); color: var(--light-font); } .overlay-content.sidebar-form-select-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 256px; min-height: 48px; height: -moz-fit-content; height: fit-content; background: var(--light-background); border-radius: 16px; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; padding: 0px; } .overlay-content.sidebar-form-select-overlay.active { opacity: 1; transform: translate(-50%, -50%) scale(1); } .overlay-close { position: absolute; top: 24px; right: 24px; } .sidebar-filter { width: 320px; flex-shrink: 0; height: -moz-fit-content; height: fit-content; background-color: var(--light-background); border-radius: 32px; padding: 30px 36px; } .sidebar-filter h4 { color: var(--interface-grey); } .sidebar-filter__container { display: flex; flex-direction: column; gap: 32px; } .sidebar-filter__container-children { display: flex; flex-direction: column; gap: 32px; } .sidebar-filter__part { width: 100%; height: -moz-fit-content; height: fit-content; } .sidebar-filter__title { display: flex; flex-direction: row; justify-content: space-between; } .sidebar-filter__title img { cursor: pointer; } .sidebar-filter__title > span { display: none; } .sidebar-filter__subtitle { display: flex; flex-direction: row; justify-content: space-between; } .sidebar-filter__reload svg { stroke: var(--grey-font); } .sidebar-filter__part .sidebar-filter__select, .sidebar-filter__part .sidebar-filter__select-type { width: -moz-fit-content; width: fit-content; padding: 2px 4px 3px 28px; } .sidebar-filter__select, .sidebar-filter__select-type { color: var(--main-font); cursor: pointer; position: relative; padding-left: 28px; line-height: 19.6px; font-weight: 500; display: block; text-decoration: none; margin-bottom: 18px; transition: all 0.2s ease; } .sidebar-filter__select::before, .sidebar-filter__select-type::before { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-grey); background-color: var(--light-background); position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.2s ease; } .sidebar-filter__select::after, .sidebar-filter__select-type::after { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; } .sidebar-filter__select:hover, .sidebar-filter__select-type:hover { color: var(--main); } .sidebar-filter__select:active, .sidebar-filter__select-type:active, .sidebar-filter__select.active, .active.sidebar-filter__select-type { color: var(--main); } .sidebar-filter__select:active::before, .sidebar-filter__select-type:active::before, .sidebar-filter__select.active::before, .active.sidebar-filter__select-type::before { opacity: 0; } .sidebar-filter__select:active::after, .sidebar-filter__select-type:active::after, .sidebar-filter__select.active::after, .active.sidebar-filter__select-type::after { opacity: 1; } .sidebar-filter__select span:first-child, .sidebar-filter__select-type span:first-child { padding-right: 4px; } .sidebar-filter__select-type.active { color: var(--main); } .sidebar-filter__select-type.active::before { opacity: 0; } .sidebar-filter__select-type.active::after { opacity: 1; } .sidebar-filter__icon-mobile { display: none; } .sidebar-filter__city { display: flex; align-items: center; } .sidebar-filter__city > span { color: var(--interface-grey); } .filter-simple-select { margin-bottom: 20px; } .filter-simple-select__select { background-color: var(--light-background); } .filter-simple-select__single-value { color: var(--main-font); font-weight: 500; cursor: pointer; margin: 0; position: relative; padding-left: 28px; } .filter-simple-select__single-value::before { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .filter-simple-select__single-value span { padding-right: 4px; } .filter-simple-select__control { border: 1px solid var(--border-grey); box-shadow: none; width: 100%; height: 64px; padding: 8px 12px; background-color: var(--light-background); cursor: pointer; border-radius: 12px; } .filter-simple-select__control:hover { border-color: var(--main); } .filter-simple-select__control:hover .filter-simple-select__dropdown-indicator svg path { stroke: var(--main); } .filter-simple-select__control--menu-is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--main); } .filter-simple-select__control--menu-is-open .filter-simple-select__indicator { transform: rotate(180deg); } .filter-simple-select__value-container { padding: 0; } .filter-simple-select__indicator-separator { display: none; } .filter-simple-select__indicator { padding: 0; width: 24px; height: 24px; transition: transform 0.2s ease; } .filter-simple-select__menu { margin-top: -1px; border: 1px solid var(--main); border-top: none; border-radius: 0 0 12px 12px; box-shadow: none; background-color: var(--light-background); z-index: 2; max-height: 300px; } .filter-simple-select__menu-list { padding: 8px 0; overflow: hidden; overflow-y: auto; } .filter-simple-select__option { cursor: pointer; padding: 8px 12px 8px 27px; position: relative; color: var(--main-font); transition: all 0.2s ease; background-color: transparent !important; left: 7%; font-weight: 500; } .filter-simple-select__option:hover { color: var(--main); } .filter-simple-select__option:hover::before { border-color: var(--main); } .filter-simple-select__option::before { display: block; content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-grey); position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.2s ease; left: -3px; } .filter-simple-select__option--is-selected { color: var(--main); background-color: transparent !important; } .filter-simple-select__option--is-selected::before { background: url('data:image/svg+xml;utf8,') no-repeat center, radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); background-size: 8px 7px, cover; border: none; } .filter-simple-select__menu-list { scrollbar-width: thin; scrollbar-color: var(--light-grey) transparent; } .sidebar-filter__current { margin-top: 4px; font-size: 1rem; color: var(--main-font); line-height: 140%; } @media (max-width: 1024px) { .sidebar-filter { background-color: transparent; border-radius: 0px; width: 100%; margin-bottom: 12px; padding: 0px 24px; } .sidebar-filter h4 { color: var(--main-font); } .sidebar-filter .icon-info { display: none; } .sidebar-filter__title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .sidebar-filter__title > span { display: block; color: var(--interface-grey); } .sidebar-filter__subtitle { display: flex; flex-direction: row; align-items: center; gap: 8px; } .sidebar-filter__icon-mobile { display: flex; width: 24px; height: 24px; } .sidebar-filter__part { width: -moz-fit-content; width: fit-content; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; background-color: var(--light-background); cursor: pointer; padding: 8px 12px; height: 40px; border-radius: 12px; } .sidebar-filter__part.active { background-color: var(--main); } .sidebar-filter__part.active h4 { color: var(--light-font); } .sidebar-filter__part.active svg { border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); stroke: var(--light-font); } .sidebar-filter__part h4 { margin: 0px; } .sidebar-filter__part > div:last-child { display: none; } .sidebar-filter__reload { width: -moz-fit-content; width: fit-content; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 8px 12px; height: 40px; border-radius: 12px; background-color: transparent; border: none; box-shadow: none; } .sidebar-filter__reload h4 { margin: 0px; } .sidebar-filter__reload:hover { box-shadow: none; } .sidebar-filter__container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .sidebar-filter__container-children { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .sidebar-filter__city { display: none; } .sidebar-filter__container { width: 100%; } .content-page__sidebar { max-width: none; } } .empty-block { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 32px; height: 596px; } .empty-block.light { background-color: var(--light-background); } .empty-block__image { width: 256px; height: 256px; } .empty-block__image img { width: 256px; height: 256px; } .empty-block__text { text-align: center; color: var(--main-font); } .empty-list { display: block !important; width: 100% !important; } @media (max-width: 640px) { .empty-block { border-radius: 24px; } } .all-doctors__list { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fill, 240px); gap: 10px; } .all-doctors__wrap { margin-top: 32px; display: flex; width: 100%; gap: 32px; } .all-doctors__quantity { display: none; } .all-doctors.content-block.content-block--grey { margin-top: 0px; } .all-doctors__container { width: 100%; } @media only screen and (max-width: 1024px) { .all-doctors__wrap { display: flex; flex-direction: column; gap: 16px; } .all-doctors__quantity { display: block; width: 100%; height: 17px; text-align: end; color: var(--grey-font); } .doctor-card { max-width: 250px; } .doctor-card__actions { display: none; } .doctor-card__info::before { height: calc(100% + 16px); } .doctor-card:hover .doctor-card__info::before { height: calc(100% + 16px); } } @media only screen and (max-width: 900px) { .all-doctors__list { -moz-column-gap: 12px; column-gap: 12px; row-gap: 24px; } } @media only screen and (max-width: 835px) { .all-doctors__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media only screen and (max-width: 640px) { .all-doctors__list { grid-template-columns: repeat(auto-fill, 250px); } } @media only screen and (max-width: 534px) { .all-doctors__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media only screen and (max-width: 480px) { .all-doctors__list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media only screen and (max-width: 414px) { .doctor-card { max-width: none; } } .about-index__child-container { display: flex; flex-direction: column; justify-content: space-between; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .about-index__content { margin-top: 32px; width: 100%; height: 100%; } .about-index__content h3 { padding: 0px; margin: 0px; color: var(--main-font); } .documents-link__wrap { cursor: pointer; width: 416px; height: -moz-fit-content; height: fit-content; min-height: 64px; border-radius: 12px; background-color: var(--grey-background); display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; transition: all 0.3s ease; overflow: hidden; } .documents-link__name { margin: 0px; } .documents-link__content { display: flex; flex-direction: column; } .documents-link__icon { width: 24px; height: 24px; } .documents-link__icon svg { stroke: var(--interface-grey); } .documents-link__link { color: var(--main); } .documents-link__grey { width: 320px; border: 1px solid var(--border-grey); } .documents-link__grey .documents-link__name { color: var(--main-font); } .documents-link__grey:hover { background-color: color-mix(in srgb, var(--border-grey) 20%, transparent); } .documents-link__grey:active { background-color: color-mix(in srgb, var(--border-grey) 60%, transparent); } @media only screen and (max-width: 640px) { .documents-link__width { width: 100%; max-width: none; } } @media only screen and (max-width: 480px) { .documents-link__wrap { cursor: pointer; width: 100%; max-width: 416px; } } .about-legal__container { width: 100%; display: block; padding: 64px 24px; margin-bottom: 24px; border-radius: 32px; background-color: var(--light-background); } .about-legal__list { padding-left: 32px; } .about-legal__list > p { margin-top: 20px; } .about-legal__info > p { margin-bottom: 56px; } @media (max-width: 640px) { .about-legal__container { padding: 48px 24px; } } .about-license__wrap { margin-top: 32px; display: flex; width: 100%; gap: 32px; margin-bottom: 24px; } .about-license__quantity { display: none; } .about-license__list { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fill, 320px); gap: 10px; } .about-license__item { max-width: 320px; height: 512px; display: flex; flex-direction: column; } .about-license__item--empty { max-width: 320px; height: 512px; border: 1px solid var(--border-grey); border-radius: 24px; } .about-license__image { height: 256px; cursor: pointer; position: relative; z-index: 0; border-radius: 32px 32px 0px 0px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); } .about-license__content { background-color: var(--light-background); position: relative; z-index: 1; margin-top: -32px; height: 288px; border-radius: 32px; padding: 32px 24px 24px 24px; display: flex; flex-direction: column; justify-content: space-between; } .about-license__doctor-item { border: 1px solid var(--border-grey); width: 100%; display: flex; gap: 16px; height: 80px; border-radius: 16px; padding: 16px; overflow: hidden; } .about-license__doctor-image { border-radius: 50px; width: 48px; height: 48px; min-width: 48px; border: 1px solid var(--border-grey); overflow: hidden; } .about-license__doctor-image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .about-license__doctor-content { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; } @media only screen and (max-width: 1024px) { .about-license__list { grid-template-columns: repeat(auto-fill, 200px); } .about-license__wrap { display: flex; flex-direction: column; margin: 0px; gap: 16px; } .about-license__item { max-width: 200px; } .about-license__item--empty { max-width: 200px; } .about-license__doctor-item { padding: 0px; border: 1px solid transparent; } .about-license__content { padding: 24px 16px 16px 16px; } .about-license__quantity { display: block; width: 100%; height: 17px; text-align: end; color: var(--grey-font); } } @media only screen and (max-width: 900px) { .about-license__list { -moz-column-gap: 12px; column-gap: 12px; row-gap: 24px; } } @media only screen and (max-width: 640px) { .about-license__doctor-item { border: 1px solid var(--border-grey); padding: 16px; align-items: center; } .about-license__image img { height: 100%; width: 100%; -o-object-position: top; object-position: top; -o-object-fit: cover; object-fit: cover; } .about-license__item { height: auto; } } @media only screen and (max-width: 480px) { .about-license__list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .about-license__item { max-width: none; width: 100%; } .about-license__item--empty { max-width: none; width: 100%; } } .sidebar-about { width: 320px; max-width: 320px; flex-shrink: 0; height: -moz-fit-content; height: fit-content; background-color: var(--light-background); border-radius: 32px; padding: 30px 36px; } .sidebar-about h4 { color: var(--interface-grey); } .sidebar-about__title { display: flex; flex-direction: row; justify-content: space-between; } .sidebar-about__title img { cursor: pointer; } .sidebar-about__container { display: flex; flex-direction: column; gap: 16px; } .sidebar-about__action { width: 100%; } @media only screen and (max-width: 1024px) { .sidebar-about { width: 100%; flex-shrink: 0; height: -moz-fit-content; height: fit-content; background-color: transparent; border-radius: 0px; padding: 0px 12px; } .sidebar-about h4 { color: var(--main-font); } .sidebar-about__title { display: flex; flex-direction: row; justify-content: space-between; } .sidebar-about__title img { cursor: pointer; } .sidebar-about__container { display: flex; flex-direction: row; gap: 8px; } .sidebar-about__action { max-width: 160px; height: 40px; } } @media only screen and (max-width: 640px) { .sidebar-about__container { flex-direction: column; } } .about-requisite__wrap { margin-top: 32px; display: flex; width: 100%; gap: 32px; margin-bottom: 24px; } .about-requisite__sidebar { max-width: 320px; flex-shrink: 0; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 16px; } .about-requisite__list { width: 100%; background-color: var(--light-background); height: -moz-fit-content; height: fit-content; min-height: 100px; border-radius: 32px; padding: 64px 0px; } .about-requisite__content { display: flex; height: -moz-fit-content; height: fit-content; min-height: 100px; margin: 0px auto; width: 100%; max-width: 794px; display: flex; flex-direction: column; gap: 4px; } .about-requisite__item { display: flex; gap: 4px; min-height: 44px; height: -moz-fit-content; height: fit-content; } .about-requisite__item-content { display: flex; width: 100%; justify-content: space-between; gap: 4px; } .about-requisite__name, .about-requisite__value, .about-requisite__copy { border-radius: 8px; width: 100%; height: auto; display: flex; align-items: center; justify-content: start; padding: 12px; background-color: var(--grey-background); } .about-requisite__name { color: var(--interface-grey); max-width: 300px; justify-content: start; } .about-requisite__value { color: var(--main-font); } .about-requisite__copy { max-width: 48px; justify-content: center; min-width: 48px; cursor: pointer; } @media only screen and (max-width: 1024px) { .about-requisite__wrap { flex-direction: column; } .about-requisite__content { width: 100%; max-width: none; padding: 12px; } .about-requisite__item { display: flex; flex-direction: column; } .about-requisite__sidebar { display: flex; flex-direction: row; gap: 12px; width: 100%; max-width: none; } .about-requisite__sidebar > div:first-child { max-width: none; flex: 0.3; } .about-requisite__sidebar > div:last-child { max-width: none; flex: 0.7; } .about-requisite__sidebar .sidebar-filter__title, .about-requisite__sidebar .sidebar-about_title { min-height: 29px; max-width: 320px; height: -moz-fit-content; height: fit-content; align-items: start; } .about-requisite__sidebar .sidebar-filter__title h3, .about-requisite__sidebar .sidebar-filter__title h4, .about-requisite__sidebar .sidebar-about_title h3, .about-requisite__sidebar .sidebar-about_title h4 { padding: 0px; margin: 0px; } .about-requisite__name { width: 100%; max-width: none; background-color: transparent; min-height: 25px; height: -moz-fit-content; height: fit-content; padding: 0px 12px; border-radius: 0px; } .about-requisite__list { padding: 0px; } } @media only screen and (max-width: 640px) { .about-requisite__sidebar { display: flex; flex-direction: column; max-width: none; margin-left: -12px; width: calc(100% + 24px); padding: 12px 0px; border-radius: 24px 24px 24px 24px; background-color: var(--grey-background); } .about-requisite__sidebar > div:first-child { max-width: none; flex: 0.5; } .about-requisite__sidebar > div:last-child { max-width: none; flex: 0.5; } .about-requisite__sidebar .sidebar-about { padding: 0px 24px; } .about-requisite__list { border-radius: 0px; margin-left: -12px; width: calc(100% + 24px); } .about-requisite__wrap { margin-left: -12px; width: calc(100% + 24px); padding: 0px 24px; background-color: var(--light-background); } .about-requisite.content-page__grey-background.content-page__container.container { background-color: var(--light-background); } .about-requisite.content-page__grey-background.content-page__container.container .page-nav { margin: 0px; border-radius: 24px 24px 0px 0px; padding-bottom: 30px; } .about-requisite.content-page__grey-background.content-page__container.container .about-requisite__wrap { margin-top: -2px; } } .content-page__counters { width: 100%; display: flex; flex-direction: row; justify-content: end; align-items: end; gap: 24px; height: 56px; } .content-page__count { max-width: 179px; height: auto; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; } .content-page__count > p { color: var(--main-font); padding: 0px; margin: 0px; } @media only screen and (max-width: 1024px) { .content-page__counters { display: none; } } .join-us.content-block.content-block--grey { padding-top: 0px; margin-top: 0px; } .join-us__title { margin-bottom: 64px; } .join-us__wrap { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; } .join-us__item { width: 100%; min-height: 80px; height: -moz-fit-content; height: fit-content; border-radius: 16px; background-color: var(--light-background); display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px 24px; } .join-us__number { width: 48px; min-width: 48px; height: 48px; display: flex; border-radius: 16px; align-items: center; justify-content: center; background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .join-us__number > span { color: var(--light-font); } .join-us__text { color: var(--main-font); } @media only screen and (max-width: 900px) { .join-us.content-block.content-block--grey { margin-top: 32px; padding-bottom: 16px; } .join-us__title { margin-bottom: 32px; } .join-us__wrap { gap: 12px; } .join-us__container.container { padding: 0px; } } @media only screen and (max-width: 640px) { .join-us__container.container { padding: 0px; max-width: 100%; } } .price-index__child-container { display: flex; flex-direction: column; justify-content: space-between; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .price-promotion__container { padding-bottom: 32px; } .price-credit__content .price-credit__blockquote { margin: 24px 0px; display: flex; align-items: center; gap: 12px; } .price-credit__content .price-credit__blockquote svg { width: 24px; height: 24px; } .price-index__wrap { margin-top: 96px; display: flex; flex-direction: column; gap: 48px; } @media only screen and (max-width: 640px) { .price-index__wrap.content-page__grey-background.content-page__container.container { margin-top: 16px; padding: 24px; } .price-index__wrap { margin-top: 32px; gap: 16px; } .price-index__component.accordion-advanced__container { margin-top: 16px; } } .search-dental__container { border-radius: 0px; display: flex; gap: 16px; min-height: 64px; } .search-dental__search { cursor: pointer; border: 1px solid var(--border-grey); width: 100%; max-width: 1064px; border-radius: 12px; height: 64px; padding: 20px 16px; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; } .search-dental__search:hover { background-color: color-mix(in srgb, var(--border-grey) 20%, transparent); } .search-dental__search:active { background-color: color-mix(in srgb, var(--border-grey) 60%, transparent); } .search-dental__search-text { background-color: transparent; background: transparent; color: var(--grey-font); border: none; outline: none; flex: 1; } .search-dental__search-text:focus { color: var(--main-font); outline: none; box-shadow: none; } .search-dental__close { cursor: pointer; } .search-dental__close:hover { stroke: var(--main); } @media (max-width: 640px) { .search-dental__container.content-block { margin-top: 0px; flex-direction: column; } } .dmc-content__description { margin-bottom: 24px; } .dmc-content__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .dmc-content__item { height: 140px; border-radius: 24px; border: 1px solid var(--border-grey); display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .dmc-content__item:hover { border: 1px solid var(--main); } .dmc-content__item img { min-width: 140px; } .dmc-content__item-empty { height: 140px; border-radius: 24px; border: 1px solid var(--border-grey); border: 1.5px dashed var(--border-grey); transition: all 0.3s ease; } .dmc-content__item-empty:hover { border: 1.5px dashed var(--main); } .price-promotion__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .price-promotion__grid .price-promotion__item { min-width: 0; container-type: inline-size; container-name: promoContainer; } @media (max-width: 900px) { .price-promotion__grid { grid-template-columns: 1fr; } .price-promotion__grid .price-promotion__item { container-type: normal; container-name: none; } } .all-example-work__list { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fill, 320px); gap: 10px; justify-content: start; } .all-example-work__wrap { margin-top: 32px; display: flex; width: 100%; gap: 24px; } .all-example-work__quantity { display: none; } .all-example-work.content-block.content-block--grey { margin-top: 0px; } .all-example-work__container { width: 100%; } @media only screen and (max-width: 1200px) { .all-example-work__list { grid-template-columns: repeat(auto-fill, 270px); } .work-examples__item { max-width: 270px; } .work-examples__image { width: 100%; } } @media only screen and (max-width: 1024px) { .all-example-work { display: flex; flex-direction: column; margin: 0px; } .all-example-work__wrap { display: flex; flex-direction: column; justify-content: start; gap: 16px; } .all-example-work__quantity { display: block; width: 100%; height: 17px; text-align: end; color: var(--grey-font); } .all-example-work__list { grid-template-columns: repeat(auto-fill, 270px); } .work-examples__item { max-width: 270px; } .work-examples__card { padding: 24px 16px 16px 16px; } } @media only screen and (max-width: 900px) { .all-example-work__list { grid-template-columns: repeat(auto-fill, 240px); } .work-examples__item { max-width: 240px; } } @media only screen and (max-width: 513px) { .all-example-work__list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .work-examples__item { max-width: none; } .work-examples__image-result { max-width: none; width: 100%; } } .help-index__child-container { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .help-content__wrap { margin: 12px 0px; } .guarantee-service__container { display: flex; flex-direction: column; gap: 48px; } .guarantee-service__content { display: flex; flex-direction: row; align-items: start; justify-content: space-between; height: -moz-fit-content; height: fit-content; min-height: 97px; width: 100%; } .guarantee-service__wrap { display: flex; flex-direction: row; gap: 24px; } .guarantee-service__column { width: 100%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 24px; } .guarantee-service__title-subtitle { display: flex; flex-direction: column; gap: 16px; } .guarantee-service__section { display: flex; gap: 8px; } .guarantee-service__section-icon { stroke: var(--main); width: 24px; min-width: 24px; height: 24px; } .guarantee-service__accordion { background-color: var(--light-background); height: -moz-fit-content; height: fit-content; border-radius: 16px; } .guarantee-service__accordion-item { width: 100%; min-height: 80px; display: flex; flex-direction: row; justify-content: space-between; padding: 0px 24px; height: -moz-fit-content; height: fit-content; cursor: pointer; } .guarantee-service__accordion-right, .guarantee-service__accordion-left { display: flex; flex-direction: row; align-items: center; gap: 16px; } .guarantee-service__accordion-right.mobile { display: none; } .guarantee-service__accordion-term { display: flex; flex-direction: row; justify-content: center; align-items: start; min-width: 176px; max-width: 200px; min-height: 36px; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); padding: 8px; border-radius: 8px; } .guarantee-service__accordion-term svg { stroke: var(--main); } .guarantee-service__accordion-guarantee { text-align: center; min-width: 163px; max-width: 180px; min-height: 36px; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); padding: 8px; border-radius: 8px; } .guarantee-service__accordion-content { overflow: hidden; transition: max-height 0.3s ease; } .guarantee-service__accordion-open { width: 48px; min-width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--grey-background); } .guarantee-service__accordion-open.active { background: radial-gradient(48.16% 48.16% at 16.97% 16.97%, var(--main-gradient) 0%, var(--main) 100%); } .guarantee-service__accordion-wrap { border-top: 1px solid var(--border-grey); padding: 24px; display: flex; flex-direction: column; } .guarantee-service__accordion-age { color: var(--main); } .guarantee-service__accordion-service-text { margin-bottom: 24px; } .guarantee-service__accordion-service-title { color: var(--interface-grey); margin-bottom: 16px; } .guarantee-service__accordion-service-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .service-item__name { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media only screen and (max-width: 1440px) { .guarantee-service__wrap { display: flex; flex-direction: column; } .guarantee-service__column { max-width: 688px; } .guarantee-service__container.container { padding: 0px 24px; } } @media only screen and (max-width: 900px) { .guarantee-service__column { max-width: none; width: 100%; } .guarantee-service__accordion-item { display: flex; flex-direction: column; } .guarantee-service__accordion-left { padding: 16px 0px; } .guarantee-service__accordion-right.mobile { display: flex; } .guarantee-service__accordion-right.desktop { display: none; } .guarantee-service__accordion-guarantee, .guarantee-service__accordion-term { margin-bottom: 16px; max-width: 100%; } .guarantee-service__accordion-service-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } @media only screen and (max-width: 640px) { .guarantee-service.content-block.content-block--grey { border-radius: 32px; padding: 24px 0px; } .guarantee-service__content { display: flex; flex-direction: column; gap: 32px; } .guarantee-service__container.container { padding: 0px; } .guarantee-service__title { text-align: center; margin: 0px; } .guarantee-service__subtitle { text-align: center; } .guarantee-service__accordion-right { display: flex; gap: 0px; flex-direction: column; align-items: start; } .guarantee-service__accordion-guarantee, .guarantee-service__accordion-term { display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px 12px; flex: 0.5; } .guarantee-service__action.btn.btn--color { max-width: none; width: 100%; } .guarantee-service__accordion-service-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .guarantee-service__accordion-service-table .service-item { height: -moz-fit-content; height: fit-content; min-height: 48px; padding: 8px; } .guarantee-service__accordion-term { min-width: 0px; } } .help-guarantee__wrap { padding: 0px 40px !important; } .help-guarantee__children-container { width: 100%; display: flex; flex-direction: row; gap: 90px; } .help-guarantee__documents { border-top: 1px solid var(--border-grey); padding-top: 56px; display: flex; flex-direction: column; gap: 12px; } .help-guarantee__documents > h2 { margin-bottom: 28px; } .help-guarantee__content { width: 100%; padding-bottom: 80px; } .help-guarantee__content-wrap { width: 100%; display: flex; flex-direction: column; } .help-guarantee__link-box { width: 342px; max-width: 342px; min-width: 342px; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 32px; container-type: inline-size; container-name: dmcContainer; } .help-guarantee__oms-wrap { width: 342px; max-width: 342px; min-width: 342px; background-color: var(--grey-background); border-radius: 32px; padding: 24px; } .help-guarantee__oms-title { width: 100%; } .help-guarantee__oms-title h2 { text-align: center; } .help-guarantee__oms-action.btn.btn--link { margin-top: 32px; width: 100%; max-width: none; } @media only screen and (max-width: 1080px) { .help-guarantee__link-box { display: none; } } @media only screen and (max-width: 640px) { .help-guarantee__wrap { margin-top: 16px; margin-left: -12px; width: calc(100% + 24px); padding: 24px 24px 0px 24px !important; margin-bottom: 0px; background-color: var(--light-background); } .help-index__container.content-page__grey-background.content-page__container.container { background-color: var(--light-background); } .help-index__container.content-page__grey-background.content-page__container.container .page-nav { margin: 0px; border-radius: 24px; } .help-guarantee__children-container { padding: 0px; margin: 0px; } .help-guarantee__content-wrap { gap: 0px; } .help-guarantee__content { padding-bottom: 56px; } .help-index__container.content-page__grey-background.content-page__container.container { padding-bottom: 0px; margin-bottom: 0px; } .help-guarantee__documents { padding-top: 24px; } } .help-info__wrap { margin-top: 32px; display: flex; width: 100%; gap: 32px; } .help-info__quantity { display: none; } .help-info__list { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; grid-template-columns: repeat(auto-fill, 320px); row-gap: 32px; -moz-column-gap: 16px; column-gap: 16px; margin-bottom: 24px; } .help-info__item { max-width: 332px; width: 100%; height: 100%; max-height: 400px; height: -moz-fit-content; height: fit-content; } .help-info__item--empty { max-width: 332px; width: 100%; min-height: 400px; max-height: 400px; height: -moz-fit-content; height: fit-content; border-radius: 24px; border: 1px solid var(--border-grey); } .help-info__image { position: relative; z-index: 0; margin-bottom: -24px; width: 100%; height: 186px; border-radius: 24px 24px 0px 0px; overflow: hidden; } .help-info__image img { width: 100%; height: 186px; -o-object-fit: cover; object-fit: cover; } .help-info__content-top { position: relative; z-index: 1; height: 72px; margin-bottom: -24px; background-color: var(--border-grey); border-radius: 24px 24px 0px 0px; display: flex; padding-top: 13.5px; gap: 8px; } .help-info__section { display: flex; padding: 0px 0px 0px 24px; align-items: center; gap: 8px; height: 21px; width: -moz-fit-content; width: fit-content; } .help-info__section > span { background-color: var(--grey-background); border-radius: 8px; padding: 2px 8px; color: var(--grey-font); } .help-info__time { display: flex; justify-content: center; align-items: start; height: 21px; } .help-info__time > span { color: var(--grey-font); } .help-info__content { min-height: 239px; } .help-info__content-bottom { position: relative; z-index: 2; background-color: var(--light-background); display: flex; flex-direction: column; justify-content: space-between; min-height: 191px; height: -moz-fit-content; height: fit-content; border-radius: 24px; padding: 24px; } .help-info__name { color: var(--main-font); transition: color 0.3s ease; } .help-info__name:hover { color: var(--main); } .help-info__doctor-item { width: 100%; display: flex; gap: 8px; height: 48px; overflow: hidden; } .help-info__doctor-image { border-radius: 50px; width: 48px; height: 48px; min-width: 48px; border: 1px solid var(--border-grey); overflow: hidden; } .help-info__doctor-image img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .help-info__doctor-content { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .help-info__doctor-name { white-space: nowrap; } .help-info__item-text { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 1024px) { .help-info__list { grid-template-columns: repeat(auto-fill, 270px); } .help-info__wrap { display: flex; flex-direction: column; margin: 0px; gap: 16px; } .help-info__item { max-width: 270px; } .help-info__item--empty { max-width: 270px; } .help-info__quantity { display: block; width: 100%; height: 17px; text-align: end; color: var(--grey-font); } } @media (max-width: 900px) { .help-info__list { grid-template-columns: repeat(auto-fill, 180px); grid-auto-rows: 1fr; -moz-column-gap: 12px; column-gap: 12px; row-gap: 24px; } .help-info__item { max-width: 180px; max-height: 445px; height: -moz-fit-content; height: fit-content; } .help-info__item--empty { max-width: 180px; min-height: 269px; height: -moz-fit-content; height: fit-content; } .help-info__content-top { height: 61px; margin-bottom: -16px; border-radius: 16px 16px 0px 0px; } .help-info__content-bottom { min-height: 220px; height: -moz-fit-content; height: fit-content; padding: 16px; border-radius: 16px; } .help-info__image { height: 116px; border-radius: 16px 16px 0px 0px; } .help-info__image img { height: 116px; } .help-info__section { padding: 0px 12px; } .help-info__doctor-item { display: flex; height: -moz-fit-content; height: fit-content; overflow: visible; flex-direction: column; gap: 8px; } .help-info__doctor-image { min-height: 48px; max-height: 48px; } .help-info__doctor-name { white-space: wrap; } .help-info__item-text { line-clamp: 5; -webkit-line-clamp: 5; } .help-info__content { border: 1px solid var(--border-grey); border-radius: 16px; } } @media (max-width: 480px) { .help-info__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .help-info__item { max-width: none; } .help-info__item--empty { max-width: none; } } @media (max-width: 395px) { .help-info__image { height: 200px; } .help-info__image img { height: 200px; } } .article-doctor { border-radius: 32px; background-color: var(--light-background); } .article-doctor__wrap { display: flex; width: 100%; max-width: 1164px; margin: 0 auto 24px; box-sizing: border-box; border-radius: 32px; padding: 24px; flex-direction: column; gap: 12px; } .article-doctor__row--first { display: flex; justify-content: space-between; align-items: center; } .article-doctor__row--author { font-size: 1rem; font-weight: 400; color: var(--grey-font); } .article-doctor__row--data { display: flex; gap: 12px; } .article-doctor__row--data > span { font-size: 1rem; font-weight: 400; color: var(--grey-font); } .article-doctor__row--last { display: flex; gap: 12px; align-items: center; } .article-doctor__row--image { width: 60px; min-width: 60px; height: 60px; border-radius: 100%; overflow: hidden; } .article-doctor__row--image img { width: 60px; min-width: 60px; height: 60px; border-radius: 100%; -o-object-fit: cover; object-fit: cover; } .article-doctor__row--text { display: flex; flex-direction: column; gap: 4px; } .article-doctor__row--name { font-size: 1.2rem; font-weight: 600; } .article-doctor__row--speciality { font-size: 1rem; font-weight: 400; } @media (max-width: 800px) { .article-doctor__row--data { gap: 24px; } } .faq-info-block { margin-bottom: 24px; } .faq-info-block .faq__aside { background: var(--light-background); } @media (max-width: 640px) { .faq-info-block .faq__aside { background: var(--grey-background); } } .simple-info-block { margin: 32px 0; background-color: #F2FAFB; border-radius: 24px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; } .simple-info-block__descr { max-width: 440px; } .simple-info-block__title { margin-bottom: 8px; } .simple-info-block__price { margin-right: 40px; } .simple-info-block__action { display: flex; align-items: center; } .simple-info-block__link a { padding: 18px 32px; } @media (max-width: 1080px) { .simple-info-block { display: block; } .simple-info-block__descr { max-width: unset; } .simple-info-block__action { justify-content: space-between; } } @media (max-width: 640px) { .simple-info-block { margin: 12px 0px; text-align: center; } .simple-info-block__descr { margin-bottom: 24px; } .simple-info-block__action { display: block; } .simple-info-block__price { margin: 0 0 20px 0; } .simple-info-block__link { display: flex; justify-content: center; } } .review-content__title > h1 { margin-top: 0px; margin-bottom: 80px; } .review-content.content-block.content-block--grey { margin-top: 0px; } .review-content__container.container .breadcrumb__item > span, .review-content__container.container .breadcrumb__item > a { color: var(--main-font); font-weight: 600; } .review-content__container.container .breadcrumb__delimiter svg { stroke: var(--main-font); } .contact-list__card { border-radius: 32px; padding: 24px 10px 24px 24px; box-shadow: 0 4px 16px 0 var(--shadow-grey); background-color: var(--light-background); display: flex; position: relative; z-index: 0; flex-direction: column; width: 100%; max-width: 450px; min-width: 350px; height: 536px; } .contact-list__card-content { display: flex; flex-direction: column; gap: 16px; overflow-y: scroll; scroll-behavior: smooth; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-right: 14px; } .contact-list__card-title { min-height: 34px; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; gap: 8px; } .contact-list__card-title > span { min-height: 20px; height: -moz-fit-content; height: fit-content; color: var(--main-font); } .contact-list__card-subtitle { display: flex; flex-direction: row; gap: 4px; color: var(--grey-font); } .contact-list__card-dot { -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--grey-font); } .contact-list__card-desc-wrap { margin: 8px 0px; margin-bottom: 32px; min-height: none; height: -moz-fit-content; height: fit-content; } .contact-list__card-close { cursor: pointer; position: absolute; z-index: 1; width: 24px; height: 24px; top: 24px; right: 24px; transform: rotate(45deg); } .contact-list__card-atribute { display: block; -moz-column-count: 2; column-count: 2; gap: 8px; } .contact-list__card-action { cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; height: 48px; min-height: 48px; border-radius: 12px; border: 1px solid var(--border-grey); } .contact-list__card-action svg { stroke: var(--main-font); transition: stroke 0.2s; } .contact-list__card-scrollbar { position: absolute; top: 30px; right: 8px; width: 4px; height: 252px; background: transparent; border-radius: 100px; pointer-events: none; } .contact-list__card-content::-webkit-scrollbar { width: 4px; } .contact-list__card-content::-webkit-scrollbar-track { background: transparent; margin-top: 30px; margin-bottom: 30px; } .contact-list__card-content::-webkit-scrollbar-thumb { background-color: var(--border-grey); border-radius: 100px; } .contact-list__card-thumb { display: none; } .contact-list__tabs-desc { height: 48px; width: 100%; background-color: var(--grey-background); padding: 4px; border-radius: 12px; margin-top: 8px; display: flex; gap: 8px; } .contact-list__tabs-text { border-radius: 8px; cursor: pointer; display: flex; align-items: center; color: var(--interface-grey); justify-content: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex: 1; } .contact-list__tabs-text.active { color: var(--main-font); background-color: var(--light-background); } .contact-list__tabs-link { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); } .contact-list__tabs-content { cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: start; overflow: hidden; gap: 8px; position: relative; } .contact-list__tabs-content::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--light-background) 100%); pointer-events: none; } .contact-list__tabs-content-desc { display: flex; flex-direction: column; } .contact-list__tabs-content span { -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--grey-font); } .contact-list__tabs-content h4 { margin: 0px; } .contact-list__tabs-title { color: var(--main-font); } .contact-list__tabs-geo { display: flex; flex-direction: row; align-items: center; cursor: pointer; } .contact-list__tabs-geo > span { color: var(--grey-font); margin-right: 8px; margin-left: 16px; } .contact-list__tabs-geo .content-svg { width: 32px; min-width: 32px; height: 33px; justify-content: center; } .contact-tabs { min-height: 47px; height: 100%; border-radius: 8px; border: 1px solid var(--border-grey); padding: 8px; } .contact-component { height: 100%; min-height: 47px; border-radius: 8px; padding: 8px; display: flex; flex-direction: row; gap: 8px; -moz-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; } .contact-component__content { margin: auto 0; display: flex; flex-direction: column; gap: 4px; align-items: start; } .contact-component__name { color: var(--main-font); } .contact-component__desc { color: var(--grey-font); } .contact-component .svg-center { margin: auto 0; display: block; } .contact-component svg { margin-top: 8px; } @media (max-width: 1240px) { .contact-list__card-close { display: none; } } @media (max-width: 480px) { .contact-list__card { min-width: 300px; height: -moz-fit-content; height: fit-content; min-height: 330px; } .contact-list__card-atribute { gap: 4px; display: flex; flex-direction: column; -moz-column-count: 1; column-count: 1; } } .contact-accordion { color: var(--main-font); } .contact-accordion__title { max-width: 700px; } .contact-accordion__subtitle { margin-top: 16px; } .contact-accordion__content { margin-top: 48px; display: flex; flex-direction: row; gap: 24px; } .contact-accordion__column { flex: 0.5; display: flex; flex-direction: column; gap: 24px; } .contact-accordion__accordion { width: 100%; display: flex; flex-direction: column; background-color: var(--light-background); border-radius: 16px; } .contact-accordion__accordion-title { padding: 24px; min-height: 80px; height: -moz-fit-content; height: fit-content; gap: 16px; display: flex; justify-content: space-between; cursor: pointer; border-bottom: 1px solid transparent; transition: border-bottom 0.3 ease; } .contact-accordion__accordion-title-children { margin: 0; width: 100%; } .contact-accordion__accordion-title.active { color: var(--main); transition: border-bottom 0.3 ease; border-bottom: 1px solid var(--border-grey); } .contact-accordion__accordion-title > svg { width: 24px; height: 24px; transform: rotate(90deg); } .contact-accordion__accordion-title > svg.active { transform: rotate(270deg); stroke: var(--main); } .contact-accordion__accordion-content { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease; display: flex; flex-direction: column; gap: 2px; } .contact-accordion__accordion-content.active { max-height: 2000px; transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease; margin: 12px 0px; } @media (max-width: 900px) { .contact-accordion__content { display: flex; flex-direction: column; gap: 12px; } .contact-accordion__column { gap: 12px; } .contact-accordion-title { padding: 24px; min-height: 76px; } .contact-accordion__title { line-height: 140%; text-align: center; } .contact-accordion__wrap { display: flex; flex-direction: column; align-items: center; } .contact-accordion__subtitle { margin-top: 0px; text-align: center; } .contact-accordion-title-children { margin: 0; width: 100%; } .contact-accordion.content-block.content-block--grey { width: 94%; margin: 12px auto; padding: 32px 0px; border-radius: 16px; } } .contact-index.content-page.content-block--padding { padding: 80px 0px 0px 0px !important; } .contact-index__map { margin-top: 32px; } .contact-index__wrap { position: relative; z-index: 0; border-radius: 24px; overflow: hidden; } .contact-index__mobile-wrap { display: none; } .contact-map__wrap { position: relative; z-index: 0; width: 1400px; height: 600px; } .contact-list { color: var(--main-font); } .contact-list__wrap { position: absolute; margin: 0 auto; z-index: 200; left: 24px; top: 32px; height: 536px; display: flex; flex-direction: row; width: 100%; gap: 12px; pointer-events: none; } .contact-list__location { border-radius: 32px; background-color: var(--light-background); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; min-width: 320px; width: 320px; box-shadow: 0 4px 16px 0 var(--shadow-grey); pointer-events: auto; } .contact-list__card { pointer-events: auto; } .contact-list__content { display: flex; flex-direction: column; gap: 24px; height: 450px; overflow-y: auto; overflow-x: hidden; position: relative; } .contact-list__content:after { position: absolute; content: ""; left: 0; width: 100%; height: 12px; bottom: 0; pointer-events: none; z-index: 2; background: linear-gradient(to top, var(--light-background) 0%, rgba(255, 255, 255, 0) 100%); } .contact-list__content-part { display: flex; flex-direction: column; gap: 18px; } .contact-list__items { display: flex; flex-direction: column; gap: 6px; } .contact-list__item { width: 100%; min-height: 48px; height: -moz-fit-content; height: fit-content; border-radius: 12px; background-color: var(--grey-background); display: flex; flex-direction: row; align-items: center; padding: 8px 12px; gap: 12px; cursor: pointer; transition: all 0.3s ease; } .contact-list__item:hover .contact-list__icon svg { stroke: var(--grey-font); } .contact-list__item:hover .contact-list__arrow svg { stroke: var(--main); } .contact-list__item.active { background: radial-gradient(60% 60% at 17% 17%, var(--main-gradient) 0%, var(--main) 100%); color: var(--light-font); } .contact-list__item.active .contact-list__current { color: var(--light-font); } .contact-list__item.active .contact-list__icon svg { stroke: var(--light-background); } .contact-list__item.active .contact-list__arrow svg { stroke: var(--light-font); } .contact-list__item.active:hover .contact-list__icon svg { stroke: var(--light-font); } .contact-list__item-info { display: flex; flex-direction: column; justify-content: center; width: 100%; } .contact-list__item .contact-list__icon { width: 24px; min-width: 24px; height: 24px; } .contact-list__item .contact-list__icon svg { stroke: var(--border-grey); } .contact-list__item .contact-list__street { font-weight: 500; } .contact-list__item .contact-list__current { color: var(--main); } .contact-list__title { display: flex; justify-content: space-between; align-items: start; } .contact-list__name { margin: 0px; } .contact-list__adress { color: var(--grey-font); } .contact-list__notice { text-align: center; color: var(--interface-grey); } .contact-list__arrow { width: 24px; height: 24px; transform: rotate(-90deg); } .contact-list__arrow svg { stroke: var(--grey-font); } .contact-list__geo-icons { display: flex; flex-direction: row; } @media (max-width: 1240px) { .contact-index__mobile-wrap { display: flex; flex-direction: column; padding: 12px; background-color: var(--grey-background); gap: 16px; border-radius: 24px; } .contact-index__map { display: flex; flex-direction: row-reverse; gap: 24px; } .contact-form-list__wrap { display: flex; flex-direction: column; gap: 16px; } .contact-form-list__location { width: 100%; max-width: 450px; height: 64px; border: 1px solid var(--border-grey); border-radius: 12px; display: flex; justify-content: center; align-items: center; padding: 12px; } .contact-form-list__location-wrap { width: 100%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: row; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 16px; } .contact-form-list__location__wrap.container { margin: 0px; padding: 0px; } .contact-form-list__location-icon { min-width: 24px; width: 24px; height: 24px; } .contact-form-list__location-name { width: 100%; height: 24px; margin-top: 4px; } .contact-form-list__location-dropdown { min-width: 24px; width: 24px; height: 24px; } .contact-map__wrap { position: relative; z-index: 0; min-width: 350px; width: 100%; height: 640px; } .contact-list__wrap { display: none; } } @media (max-width: 900px) { .contact-index__map { display: flex; flex-direction: column; } .contact-index__wrap { width: 100%; } .contact-map__wrap { overflow: hidden; height: 370px; border-radius: 12px; } .contact-index__mobile-wrap.container { width: 100%; } .contact-index.content-page.content-block--padding { padding: 64px 0px 24px 0px !important; } } @media (max-width: 640px) { .contact-index__map { width: calc(100% - 24px); margin: 0 auto; padding: 12px; background-color: var(--grey-background); gap: 16px; border-radius: 24px; } .contact-index__wrap.container { padding: 12px 0px; margin: 0px auto; } .contact-index__mobile-wrap.container { display: flex; align-items: center; } .contact-index.content-page.content-block--padding { padding: 0px !important; } } @media (max-width: 480px) { .contact-map__wrap { overflow: hidden; height: 130px; } .contact-index__mobile-wrap.container { display: flex; align-items: center; } .contact-index__map { padding: 0; width: 94%; border: none; } .contact-map__wrap { width: 100%; height: 130px; } .contact-form-list__wrap { width: 100%; } .contact-index__mobile-wrap.container { padding: 0px 0px 12px 0px; } } .placemarker__on { width: 24px; height: 24px; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); border-radius: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(95, 108, 123, 0.24); } .placemarker__on--center { width: 8px; height: 8px; border-radius: 100%; background: var(--light-background); } .placemarker__off { width: 24px; height: 24px; background: var(--light-background); border-radius: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(95, 108, 123, 0.24); } .placemarker__off--center { width: 8px; height: 8px; border-radius: 100%; background: radial-gradient(34.53% 93.01% at 30.47% -26.01%, var(--main-gradient) 0%, var(--main) 100%); } .doctor-banner { min-height: 560px; height: -moz-fit-content; height: fit-content; } .doctor-banner__container { height: 100%; padding-top: 136px; padding-bottom: 48px; display: flex; justify-content: space-between; gap: 16px; } .doctor-banner__wrap { padding-top: 40px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; } .doctor-banner__content { display: flex; flex-direction: column; gap: 16px; } .doctor-banner__content.mobile { display: none; } .doctor-banner__title { max-width: 572px; } .doctor-banner__specialty { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: start; max-width: 572px; gap: 8px; } .doctor-banner__specialty--item { background: var(--light-background); color: var(--grey-font); padding: 2px 8px; border-radius: 8px; } .doctor-banner__feature { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .doctor-banner__feature li { margin: 0px; } .doctor-banner__description--wrap { display: flex; gap: 16px; margin-bottom: 24px; } .doctor-banner__description--text { max-width: 508px; width: 100%; } @media (max-width: 1400px) { .doctor-banner__container { display: flex; flex-direction: column; } .doctor-banner__content.mobile { display: flex; } .doctor-banner__description--wrap.desktop { display: none; } .doctor-banner__feature { display: none; } } @media (max-width: 640px) { .doctor-banner__breadcrumbs .breadcrumb { top: 131.5px; left: 18px; width: 80%; } .doctor-banner__breadcrumbs .breadcrumb__item:last-child { display: none; } .doctor-banner { margin-top: 0px; width: 100%; border-radius: 24px; } .doctor-banner__container { padding: 0px 12px; } .doctor-banner__wrap { padding-top: 60px; } .doctor-banner__content { margin-top: 16px; } .doctor-banner__specialty { margin-bottom: 24px; } .doctor-banner__side { margin-bottom: 24px; } } .doctor-navbar__container { border: 1px solid var(--border-grey); height: 80px; border-radius: 24px; display: flex; flex-direction: row; gap: 16px; align-items: center; padding: 8px; } .doctor-navbar__item { border: 1px solid transparent; position: relative; cursor: pointer; border-radius: 16px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; height: 64px; transition: all 0.3s ease; } .doctor-navbar__item::after { content: ""; display: block; position: absolute; top: 20px; right: -8px; width: 8px; height: 24px; border-right: 1px solid var(--border-grey); } .doctor-navbar__item:hover { border: 1px solid var(--main); } .doctor-navbar__item:last-child::after { display: none; } .doctor-navbar__count { border: 1px solid var(--border-grey); width: -moz-fit-content; width: fit-content; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 6px; } .doctor-navbar__count > span { color: var(--interface-grey); } @media only screen and (max-width: 1280px) { .doctor-navbar__container { display: none; } } .doctor-about { border-radius: 0px; } .doctor-about__wrap { margin-top: 32px; display: flex; gap: 16px; } .doctor-about__detail { margin-top: 16px; max-width: 700px; width: 100%; } @media only screen and (max-width: 640px) { .doctor-about__container { padding: 0px 12px; } } .doctor-additional__feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .doctor-additional h4 { margin: 0px; } .doctor-additional li { height: -moz-fit-content; height: fit-content; } .doctor-additional span { margin-top: 8px; color: var(--interface-grey); } @media only screen and (max-width: 900px) { .doctor-additional__feature { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 640px) { .doctor-additional__feature { grid-template-columns: repeat(1, 1fr); } .doctor-additional__container { padding: 0px 12px; } } .service-label__item { display: flex; position: relative; overflow: hidden; gap: 16px; padding: 16px; align-items: center; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); border-radius: 12px; } .service-label__item::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } @media (max-width: 640px) { .doctor-service__service--item-icon { width: 32px; height: 32px; min-width: 32px; } } .doctor-service__container { display: flex; flex-direction: column; gap: 32px; } .doctor-service h4 { margin: 0px 0px 16px 0px; } .doctor-service__wrap-content { display: flex; flex-direction: column; } .doctor-service__specialty { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; max-width: 572px; } .doctor-service__specialty--item { background: var(--grey-background); color: var(--grey-font); padding: 2px 8px; border-radius: 8px; } .doctor-service__service { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .doctor-service__service--item { display: flex; position: relative; overflow: hidden; gap: 16px; padding: 16px; align-items: center; height: -moz-fit-content; height: fit-content; background-color: var(--grey-background); border-radius: 12px; } .doctor-service__service--item::after { content: ""; display: block; position: absolute; z-index: 110; width: 16px; height: 100%; right: -1px; top: 0; background: linear-gradient(to right, transparent 0%, var(--grey-background) 100%); pointer-events: none; } @media only screen and (max-width: 900px) { .doctor-service__service { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } } @media only screen and (max-width: 640px) { .doctor-service__service { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; } .doctor-service__service--item { padding: 8px; } .doctor-service__container { padding: 0px 12px; } } .doctor-education { border-radius: 0px; } .doctor-education__container { display: flex; flex-direction: column; gap: 32px; } .doctor-education h2 { margin: 0px 0px 16px 0px; } .doctor-education h4 { margin: 0px; } .doctor-education__text { margin-bottom: 16px; } .doctor-education__head { display: flex; justify-content: space-between; } .doctor-education__head-doctor { display: flex; gap: 8px; min-height: 48px; height: -moz-fit-content; height: fit-content; align-items: center; width: 270px; } .doctor-education__head-doctor-image { width: 48px; min-width: 48px; height: 48px; border-radius: 100%; overflow: hidden; background: var(--default); } .doctor-education__head-doctor-image img { -o-object-fit: cover; object-fit: cover; width: 48px; height: 48px; } .doctor-education__wrap { background: var(--grey-background); min-height: 225px; border-radius: 32px; } .doctor-education__wrap-head { position: relative; z-index: 0; height: 105px; border-radius: 32px 32px 0px 0px; padding: 24px 40px; } .doctor-education__wrap-content { position: relative; z-index: 1; margin-top: -32px; background: var(--light-background); min-height: 152px; height: -moz-fit-content; height: fit-content; border-radius: 32px; border: 1px solid var(--border-grey); padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .doctor-education__wrap-content-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 24px; min-height: 120px; height: -moz-fit-content; height: fit-content; } .doctor-education__wrap-content-item--year { color: var(--main); } .doctor-education__wrap-content-item::after { content: ""; display: block; position: absolute; height: 100%; border-right: 1px solid var(--border-grey); width: 10px; top: 0; right: -16px; } .doctor-education__wrap-content-item:last-child::after { display: none; } .doctor-education__wrap-content-item:nth-child(3n)::after { display: none; } @media (max-width: 900px) { .doctor-education__wrap-content { display: flex; flex-direction: column; gap: 16px; } .doctor-education__wrap-content:has(.doctor-education__wrap-content-item:nth-child(4))::before { display: none; } .doctor-education__wrap-content:has(.doctor-education__wrap-content-item:nth-child(7))::after { display: none; } .doctor-education__wrap-content-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; height: -moz-fit-content; height: fit-content; min-height: 64px; } .doctor-education__wrap-content-item--year { color: var(--main); } .doctor-education__wrap-content-item::after { content: ""; display: block; position: absolute; height: 1px; border-right: none; border-bottom: 1px solid var(--border-grey); width: 100%; top: unset; bottom: -8px; right: unset; left: 0; } .doctor-education__wrap-content-item:nth-child(3n)::after { display: block; } .doctor-education__wrap-content-item:last-child::after { display: none; } } @media (max-width: 640px) { .doctor-education__container { padding: 0px 12px; } .doctor-education__head-doctor { display: none; } } .smart-slider__head { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 32px; } .smart-slider__head h2 { margin: 0px 0px 16px 0px; } .smart-slider__head--text { margin-bottom: 16px; max-width: 700px; } .smart-slider__container { position: relative; } .smart-slider__thumbs { margin-top: 32px; position: relative; height: 48px; } .smart-slider__thumbs--image { width: 48px; height: 48px; border-radius: 100%; overflow: hidden; } .smart-slider__thumbs--image.swiper-slide { width: 48px; } .smart-slider__thumbs--image img { width: 48px; min-width: 48px; height: 48px; -o-object-fit: cover; object-fit: cover; } .swiper-slide.swiper-slide-active.smart-slider__thumbs--image { width: 48px; } .smart-slider__head--actions-btn { border: 1px solid var(--border-grey); background-color: transparent; box-shadow: none; color: var(--main-font); } .smart-slider__head--actions-btn:hover { box-shadow: none; } @media only screen and (max-width: 640px) { .smart-slider__head--text { text-align: center; } .smart-slider.content-block--padding-64 { padding: 24px 0px 48px 24px; border-radius: 48px; } .smart-slider__container.container { max-width: 100%; } .smart-slider__head { flex-direction: column; gap: 16px; margin-right: 24px; } } .sitemap { padding: 8px 0; } .sitemap ul { margin: 24px 0px; color: var(--main); } .sitemap ul li { padding-left: 0px; } .sitemap ul li::before { display: none; } .sitemap a { color: var(--main); } .sitemap__list, .sitemap__sublist { list-style: none; margin: 0; padding: 0; } .sitemap__sublist { margin-top: 12px; padding-left: 24px; } .sitemap__level { margin-bottom: 12px; } .sitemap__level--one { margin-bottom: 24px; } .sitemap__level--two { margin-bottom: 16px; } .sitemap__level--three { margin-bottom: 10px; } .sitemap__link { color: var(--main); text-decoration: none; } .sitemap__section-title { margin-bottom: 8px; color: var(--dark-font); } .page-view__child-container { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .page-content__child-container { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .news-card { max-width: 338px; min-height: 280px; height: 100%; display: flex; flex-direction: column; background-color: var(--light-background); color: inherit; text-decoration: none; border-radius: 24px; padding: 24px; gap: 24px; } .news-card__content { display: flex; flex-direction: row; gap: 24px; height: 100%; } .news-card__content--image { width: 48px; min-width: 48px; height: 48px; border-radius: 12px; background-color: var(--grey-background); display: flex; align-items: center; justify-content: center; overflow: hidden; } .news-card__content--image img { -o-object-fit: cover; object-fit: cover; width: 48px; height: 48px; min-width: 48px; } .news-card__content--wrap { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; align-items: start; height: 100%; } .news-card__content--wrap-head { display: flex; flex-direction: column; gap: 24px; } .news-card__content--name { color: var(--main-font); margin: 0px; text-decoration: none; transition: color 0.3s ease; } .news-card__content--name:hover { color: var(--main); } .news-card__content--text { color: var(--grey-font); } .news-card__content--data { color: var(--grey-font); } @media (max-width: 640px) { .news-card { max-width: none; width: 100%; } } .news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .news-grid > * { height: 100%; } .news-index__child-container { display: flex; flex-direction: column; height: -moz-fit-content; height: fit-content; width: 100%; border-radius: 32px; } .news-content__wrap { margin: 12px 0px; } @media (max-width: 1200px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } } .new-year-note { margin-top: 14px; padding: 0 14px; position: relative; z-index: 1; } .new-year-note__decor { position: absolute; background-image: url("/images/new-year/new-year-4.webp"); background-repeat: no-repeat; z-index: 2; height: 108px; background-size: cover; } .new-year-note__decor--cloud { width: 128px; background-position: -320px 0px; top: -14px; left: 81px; animation: showTranslate 25s linear infinite; } .new-year-note__decor--snow { width: 70px; background-position: -130px 0px; animation: showRotate 15s linear infinite; } .new-year-note__decor--ball { width: 45px; background-position: -30px 0px; } .new-year-note__decor--two { bottom: -44px; left: 284px; animation-delay: 3s; } .new-year-note__decor--three { top: -43px; left: 335px; } .new-year-note__decor--four { top: -50px; left: 985px; } .new-year-note__decor--five { top: -35px; right: 284px; } .new-year-note__decor--six { top: -45px; right: 114px; } .new-year-note__decor--seven { bottom: -27px; right: 34px; } .new-year-note__wrap { background-image: url("/images/new-year/new-year-backgr-big.webp"); background-size: cover; background-position: top; background-repeat: no-repeat; padding: 20px 0; border-radius: 20px; animation: bgScroll 150s linear infinite; } .new-year-note__block { max-width: 706px; margin: 0 auto; padding: 13px 24px 13px 24px; background-image: url("/images/new-year/new-year-backgr-small.webp"); background-size: cover; background-position: top; background-repeat: no-repeat; border-radius: 16px; position: relative; z-index: 1; } .new-year-note__block::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; border-radius: 16px; background: rgba(239, 100, 119, 0.66); z-index: 2; } .new-year-note__block::before { position: absolute; content: ""; width: 80px; height: 80px; left: -89px; top: -6px; background-image: url("/images/new-year/new-year-2.webp"); background-size: cover; transform: rotate(-26deg); background-repeat: no-repeat; animation: thingRotate 30s linear infinite; z-index: 4; } .new-year-note__block-wrap { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; } .new-year-note__block-wrap::before { position: absolute; content: ""; width: 58px; height: 92px; right: 34px; bottom: calc(-100% - 31px); background-image: url("/images/new-year/new-year-4.webp"); background-size: cover; background-position: -200px 0; background-repeat: no-repeat; animation: showRotate 15s linear infinite; animation-delay: 1s; } .new-year-note__block-icon { width: 100%; max-width: 24px; height: 24px; margin-right: 24px; } .new-year-note__block-icon svg { width: 100%; height: 100%; fill: #ffffff; } .new-year-note__block-text { width: 100%; font-size: 1rem; line-height: 19px; font-weight: 600; color: #ffffff; } @keyframes bgScroll { 0% { background-position: bottom; } 100% { background-position: top; } } @keyframes showRotate { 0% { transform: rotate(0) rotate3d(0, 0, 0, 0); } 50% { transform: rotate(65deg) rotate3d(30, 30, 30, 40deg); } 100% { transform: rotate(0) rotate3d(0, 0, 0, 0); } } @keyframes showTranslate { 0% { transform: translateX(0); } 50% { transform: translateX(70px); } 100% { transform: translateX(0); } } @keyframes thingRotate { 0% { transform: rotate(-26deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-26deg); } } @keyframes thingRotateReverse { 0% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } } @media all and (max-width: 1450px) { .new-year-note__decor--five, .new-year-note__decor--two { display: none; } } @media all and (max-width: 1240px) { .new-year-note__decor--four { display: none; } } @media all and (max-width: 1080px) { .new-year-note__decor--cloud { display: none; } } @media all and (max-width: 865px) { .new-year-note__wrap { padding: 20px 40px; } .new-year-note__decor--cloud { display: none; } .new-year-note__block { padding: 13px 58px 13px 24px; } .new-year-note__block::before { left: -53px; } .new-year-note__block-wrap::after { right: -68px; } } @media all and (max-width: 680px) { .new-year-note__block-wrap::before { right: -28px; bottom: -56px; } .new-year-note__block-wrap::after { right: -81px; bottom: 19px; } .new-year-note__decor--seven { display: none; } } @media all and (max-width: 480px) { .new-year-note__decor--six { display: none; } .new-year-note__block { padding: 13px 32px 13px 16px; } .new-year-note__block::before { top: -29px; } .new-year-note__block-icon { max-width: 20px; height: 20px; margin-right: 8px; } .new-year-note__block-text { font-size: 0.857rem; line-height: 16.8px; } .new-year-note__block-wrap::after { top: 50%; transform: rotate(22deg) translateY(-50%); bottom: unset; right: -50px; } .new-year-note__wrap { padding: 20px 20px 20px 40px; } } @media all and (max-width: 370px) { .new-year-note__block-icon { display: none; } .new-year-note__block::before { top: 50%; transform: rotate(-26deg) translateY(-50%); left: -42px; } @keyframes thingRotate { 0% { transform: rotate(-26deg) translateY(-50%); } 50% { transform: rotate(5deg) translateY(-50%); } 100% { transform: rotate(-26deg) translateY(-50%); } } .new-year-note__block-wrap::after { display: none; } .new-year-note__block { padding: 13px 16px 13px 20px; } }