@font-face {
font-family: 'Onest';
src: url(//avismile.ru/wp-content/themes/wsavolai/assets/fonts/Onest.woff2.html) format('woff2');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bounded';
src: url(//avismile.ru/wp-content/themes/wsavolai/assets/fonts/Bounded-Variable.woff2.html) format('woff2');
font-style: normal;
font-display: swap;
}
body {
font-family: "Onest", sans-serif;
}
@media (prefers-reduced-motion:no-preference) {
@view-transition {
navigation: auto
}
}
:root {
--wp--preset--aspect-ratio--square: 1;
--wp--preset--aspect-ratio--4-3: 4/3;
--wp--preset--aspect-ratio--3-4: 3/4;
--wp--preset--aspect-ratio--3-2: 3/2;
--wp--preset--aspect-ratio--2-3: 2/3;
--wp--preset--aspect-ratio--16-9: 16/9;
--wp--preset--aspect-ratio--9-16: 9/16;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(207, 46, 46) 100%);
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
--wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
--wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
--wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}
span.color{
color: var(--clr-primary)!important;
}
:where(.is-layout-flex) {
gap: 0.5em;
}
:where(.is-layout-grid) {
gap: 0.5em;
}
body .is-layout-flex {
display: flex;
}
.is-layout-flex {
flex-wrap: wrap;
align-items: center;
}
.is-layout-flex> :is(*, div) {
margin: 0;
}
body .is-layout-grid {
display: grid;
}
.is-layout-grid> :is(*, div) {
margin: 0;
}
:where(.wp-block-columns.is-layout-flex) {
gap: 2em;
}
:where(.wp-block-columns.is-layout-grid) {
gap: 2em;
}
:where(.wp-block-post-template.is-layout-flex) {
gap: 1.25em;
}
:where(.wp-block-post-template.is-layout-grid) {
gap: 1.25em;
}
.has-black-color {
color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-color {
color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-color {
color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-color {
color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-color {
color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-color {
color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-color {
color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-color {
color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-color {
color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-color {
color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-color {
color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-color {
color: var(--wp--preset--color--vivid-purple) !important;
}
.has-black-background-color {
background-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-background-color {
background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-background-color {
background-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-background-color {
background-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-background-color {
background-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-background-color {
background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-background-color {
background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-background-color {
background-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-background-color {
background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-background-color {
background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-background-color {
background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-background-color {
background-color: var(--wp--preset--color--vivid-purple) !important;
}
.has-black-border-color {
border-color: var(--wp--preset--color--black) !important;
}
.has-cyan-bluish-gray-border-color {
border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}
.has-white-border-color {
border-color: var(--wp--preset--color--white) !important;
}
.has-pale-pink-border-color {
border-color: var(--wp--preset--color--pale-pink) !important;
}
.has-vivid-red-border-color {
border-color: var(--wp--preset--color--vivid-red) !important;
}
.has-luminous-vivid-orange-border-color {
border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.has-luminous-vivid-amber-border-color {
border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}
.has-light-green-cyan-border-color {
border-color: var(--wp--preset--color--light-green-cyan) !important;
}
.has-vivid-green-cyan-border-color {
border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}
.has-pale-cyan-blue-border-color {
border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}
.has-vivid-cyan-blue-border-color {
border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}
.has-vivid-purple-border-color {
border-color: var(--wp--preset--color--vivid-purple) !important;
}
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}
.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}
.has-cool-to-warm-spectrum-gradient-background {
background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}
.has-blush-light-purple-gradient-background {
background: var(--wp--preset--gradient--blush-light-purple) !important;
}
.has-blush-bordeaux-gradient-background {
background: var(--wp--preset--gradient--blush-bordeaux) !important;
}
.has-luminous-dusk-gradient-background {
background: var(--wp--preset--gradient--luminous-dusk) !important;
}
.has-pale-ocean-gradient-background {
background: var(--wp--preset--gradient--pale-ocean) !important;
}
.has-electric-grass-gradient-background {
background: var(--wp--preset--gradient--electric-grass) !important;
}
.has-midnight-gradient-background {
background: var(--wp--preset--gradient--midnight) !important;
}
.has-small-font-size {
font-size: var(--wp--preset--font-size--small) !important;
}
.has-medium-font-size {
font-size: var(--wp--preset--font-size--medium) !important;
}
.has-large-font-size {
font-size: var(--wp--preset--font-size--large) !important;
}
.has-x-large-font-size {
font-size: var(--wp--preset--font-size--x-large) !important;
}
html {
height: auto;
box-sizing: border-box;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
scroll-padding-top: var(--h-height, 0);
interpolate-size: allow-keywords
}
html:not(.touch-screen)::-webkit-scrollbar {
width: .5rem;
height: .5rem
}
html:not(.touch-screen):-webkit-scrollbar-track {
background: 0 0
}
html:not(.touch-screen)::-webkit-scrollbar-thumb {
background: #c2c2c2;
border-radius: .25rem
}
html:not(.touch-screen)::-webkit-scrollbar-thumb:active {
background: #8d8d8d
}
body {
height: auto;
overflow-y: scroll;
background-color: var(--clr-white)
}
body:not(.touch-screen) *::-webkit-scrollbar {
width: .25rem;
height: .25rem
}
body:not(.touch-screen) *::-webkit-scrollbar-track {
background: 0 0;
border-radius: .25rem
}
body:not(.touch-screen) *::-webkit-scrollbar-thumb {
background: #c2c2c2
}
:where(body.touch-screen *::-webkit-scrollbar) {
display: none
}
* {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
font: inherit;
font-size: 100%;
line-height: inherit;
vertical-align: baseline;
-webkit-locale: auto;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent
}
:is(*, *:before, *:after) {
box-sizing: inherit
}
:is(:focus, :hover, :active, :visited) {
outline: none
}
::-moz-selection {
color: #fff;
background: #000
}
::selection {
color: #fff;
background: #000
}
a {
display: inline-block;
text-decoration: none;
cursor: pointer;
outline: none;
color: inherit;
transition: var(--transition-1)
}
a:hover {
text-decoration: none
}
:is(ul, ol) {
list-style: none
}
:is(sub, sup) {
font-size: 75%;
line-height: 0;
position: relative
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
picture {
font-size: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
:is(img, svg, iframe) {
width: auto;
height: auto;
max-width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle
}
img {
position: relative
}
img:before {
content: "";
position: absolute;
inset: 0;
background: no-repeat center/min(5rem, 50%) min(5rem, 50%) var(--clr-grey) url(//avismile.ru/wp-content/themes/wsavolai/assets/img/placeholder.svg)
}
input {
-webkit-appearance: none;
-moz-appearance: none;
font-size: 1rem;
font-weight: 400;
color: var(--clr-black)
}
::-moz-placeholder {
font-size: var(--text);
line-height: 1.5em;
font-weight: 300;
color: var(--clr-text)
}
::placeholder {
font-size: var(--text);
line-height: 1.5em;
font-weight: 300;
color: var(--clr-text)
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type=number] {
-moz-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
height: .7em;
width: .7em;
background-size: contain;
cursor: pointer
}
:is(input, textarea, select) {
border-radius: 0;
background: 0 0;
border: none;
margin: 0;
width: 100%;
padding: 0
}
textarea {
display: block;
resize: none;
overflow: auto
}
select::-ms-expand {
display: none
}
button {
background: 0 0
}
:root {
--root-scale: 1rem;
--container-width: 100%;
--ff-1: "Onest", sans-serif;
--ff-2: "Bounded";
--h1: clamp(2rem, -0.4868rem + 5.7018vw, 5.5rem);
--h2: clamp(1.75rem, 0.5066rem + 2.8509vw, 3.5rem);
--h3: clamp(1.75rem, 0.9079rem + 1.7544vw, 2.75rem);
--h4: clamp(1.5rem, 1.0789rem + 0.8772vw, 2rem);
--h5: clamp(1.25rem, 1.0395rem + 0.4386vw, 1.5rem);
--h6: clamp(1.125rem, 0.9145rem + 0.4386vw, 1.375rem);
--text-lg: clamp(1.125rem, 1.0197rem + 0.2193vw, 1.25rem);
--text: clamp(1rem, 0.8947rem + 0.2193vw, 1.125rem);
--text-sm: clamp(0.875rem, 0.7697rem + 0.2193vw, 1rem);
--sp-xxl: clamp(3.75rem, -1.3158rem + 13.1579vw, 12.5rem);
--sp-xl: clamp(3.75rem, calc(-0.46rem + 8.77vw), 8.75rem);
--sp-lg: clamp(3.75rem, 0.5921rem + 6.5789vw, 7.5rem);
--sp-md: clamp(1.5rem, 0.5263rem + 3.0702vw, 3.75rem);
--sp-sm: clamp(1.25rem, 0.1974rem + 2.193vw, 2.5rem);
--sp-xs: clamp(0.625rem, 0.0987rem + 1.0965vw, 1.25rem);
--clr-title: #161618;
--clr-text: #5f5f6a;
--clr-text-light: #93949d;
--clr-border: #d1d2d5;
--clr-black: #000;
--clr-white: #fff;
--clr-grey: #f3f3f3;
--clr-primary: #3bbac9;
--clr-secondary: #d7ecff;
--clr-red: #d7262e;
--bg-dark: var(--clr-title);
--bg-light: var(--clr-grey);
--blur: 10px;
--bg-overlay: rgba(14, 15, 17, .2);
--box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, .03), 0 0 .5rem 0 rgba(0, 0, 0, .06);
--transition-1: .3s ease;
--transition-2: .7s ease;
--cubic-1: .5s cubic-bezier(.65, 0, .35, 1)
}
html {
font-size: var(--root-scale)
}
#qtranslate-chooser li.active {
display: none
}
.qtranxs_widget_end {
display: none
}
.lang-wrap {
position: absolute;
top: 20%;
right: -52px
}
.section.banner-section .banner.full {
opacity: 0
}
footer {
opacity: 0
}
html.keyboard-focus:focus {
outline: auto
}
html.overflow-menu,
html.overflow-hidden {
overflow: clip
}
html.overflow-menu body,
html.overflow-hidden body {
overflow: clip
}
.overflow-overlay {
opacity: 0;
visibility: hidden;
position: fixed;
z-index: 90;
inset: 0;
background-color: var(--bg-overlay);
backdrop-filter: blur(10px);
transition: var(--cubic-1)
}
#content-block {
position: relative;
min-height: 100svh;
overflow: clip;
display: flex;
flex-direction: column
}
header {
position: relative;
opacity: 0
}
main {
display: flex;
flex-direction: column
}
main .seo-section {
order: 3
}
footer {
margin-top: auto
}
:where(.section:not(.seo-section):first-child) {
margin-top: var(--sp-lg)
}
:where(.section+.section) {
margin-top: var(--sp-xl)
}
.section_dark+.section_dark,
.section_dark+.section_light,
.section_light+.section_dark,
.section_light+.section_light {
margin-top: 0
}
:where(.breadcrumbs+.section) {
margin-top: clamp(2.9375rem, 0.148rem + 5.8114vw, 6.25rem)
}
:where(.breadcrumbs+.blog-detail) {
margin-top: clamp(1.5rem, 0.2368rem + 2.6316vw, 3rem)
}
:where(.section+.footer-labels-wrap) {
margin-top: var(--sp-lg)
}
:where(.section:last-child) {
margin-bottom: var(--sp-xxl)
}
.section {
will-change: opacity;
position: relative;
opacity: 0
}
.section.animated {
opacity: 1;
transition: .15s linear opacity
}
.section_dark {
--clr-title: #fff;
--clr-text: rgba(255, 255, 255, .6);
--clr-border: rgba(95, 95, 106, .85);
--bg: var(--bg-dark);
background-color: var(--bg);
padding-block: var(--sp-xl);
margin-top: var(--sp-xl)
}
.section_light {
--clr-grey: #fff;
--bg: var(--bg-light);
background-color: var(--bg);
padding-block: var(--sp-xl);
margin-top: var(--sp-xl)
}
.container,
.container-fluid {
--bs-gutter-x: 1.5rem;
width: 100%;
margin-inline: auto;
padding-inline: calc(var(--bs-gutter-x) * 0.5)
}
.swiper-container {
will-change: opacity;
opacity: 0
}
.swiper-container.swiper-destroyed,
.swiper-container.swiper-initialized {
opacity: 1;
transition: .15s linear opacity
}
.cookies-informer,
.popup-wrapper {
display: none
}
.parallax-img-inner {
position: absolute;
inset: -7.75% 0;
height: 114%
}
@media (min-width:1200px) {
:root {
--container-width: 90.834vw
}
.container {
width: var(--container-width)
}
}
@media (min-width:1200px) and (max-width:1440px) {
:root {
--root-scale: .75rem
}
}
@media (min-width:1441px) and (max-width:1680px) {
:root {
--root-scale: .875rem
}
}
@media (min-width:2100px) {
html {
font-size: 1.375rem
}
}
@media (min-width:2600px) {
html {
font-size: 2rem
}
}
:root {
--h-height: 5.125rem;
--h-logo-width: 6.875rem;
--gap-top: .75rem
}
header {
position: relative;
z-index: 100;
height: var(--h-height)
}
.h-wrap {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%
}
.h-inner {
position: relative;
width: min(71.25rem, 85%);
height: calc(var(--h-height) - var(--gap-top));
gap: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 7.625rem;
background-color: var(--bg-light);
backdrop-filter: blur(15px);
transition: background-color var(--transition-1);
padding: .625rem .625rem .625rem .625rem;
margin-inline: auto;
margin-top: var(--gap-top)
}
header.scrolled .h-inner {
background-color: rgba(243, 243, 243, .5)
}
.h-logo {
display: block;
width: var(--h-logo-width);
flex-shrink: 0;
transform-origin: center
}
.h-logo img {
display: block;
max-width: 100%
}
.h-menu {
flex-grow: 1;
display: flex;
align-items: center
}
.h-links {
margin-inline: auto;
position: relative
}
.h-links ul {
display: flex;
align-items: center;
flex-wrap: wrap
}
.h-links li {
line-height: 0
}
.h-links a {
font-size: .875rem;
font-weight: 500;
color: var(--clr-title);
text-align: center;
transition: .5s cubic-bezier(.06, 0, 0, 1);
border-radius: 8.75rem;
padding: 1.15em
}
.h-links a span[data-txt] {
position: relative;
overflow: hidden;
display: inline-block;
font-size: inherit;
line-height: 1.2em;
color: transparent
}
.h-links a span[data-txt]:before,
.h-links a span[data-txt]:after {
content: attr(data-txt);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform .5s cubic-bezier(.06, 0, 0, 1);
color: var(--clr-title)
}
.h-links a span[data-txt]:after {
transform: translateY(100%)
}
.h-drop-list,
.h-menu-overlay,
.h-burger {
display: none
}
@media (min-width:1200px) {
.h-links a:hover {
background-color: #ebebeb
}
.h-links a:hover span[data-txt]:before {
transform: translateY(-120%)
}
.h-links a:hover span[data-txt]:after {
transform: translateY(0%)
}
a.h-logo:hover {
transform: scale(.9)
}
.h-drop b {
position: relative;
z-index: 2;
cursor: pointer;
display: inline-block;
font-size: .875rem;
line-height: 1.2em;
font-weight: 500;
color: var(--clr-title);
text-align: center;
transition: .5s cubic-bezier(.06, 0, 0, 1);
border-radius: 8.75rem;
padding: 1.15em
}
.h-drop.is-active b {
background-color: #ebebeb
}
.h-drop.is-active b:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--h-height) / 2);
transform: translateY(100%)
}
.h-drop.is-active .h-drop-list {
opacity: 1;
visibility: visible
}
.h-drop-list {
position: absolute;
z-index: 3;
bottom: 0;
transform: translate(-2.75rem, 100%);
transition: var(--transition-1);
content-visibility: auto;
width: 12.5rem;
line-height: 0;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: .625rem;
background-color: var(--clr-white);
box-shadow: 0 2.25rem 1.25rem 0 rgba(0, 0, 0, .03), 0 .25rem .5rem 0 rgba(0, 0, 0, .05);
padding: .25rem
}
.h-drop-list a {
width: 100%;
border-radius: .5rem;
font-size: var(--text-sm);
line-height: 1.2em;
font-weight: 300;
color: var(--clr-title);
text-align: left;
padding: 1em
}
.h-drop-list a span[data-txt] {
transform: translateY(.125rem)
}
.h-drop-list a:hover {
background-color: var(--clr-secondary)
}
}
@media (max-width:1199px) {
:root {
--h-height: 4.25rem;
--gap-top: .5rem
}
.h-inner {
width: 100%;
padding: .5rem .5rem .5rem 1rem
}
.h-inner>.btn {
aspect-ratio: 1;
padding: .5em
}
.h-inner>.btn b[data-txt] {
display: none
}
.h-inner>.btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.375rem;
height: 1.375rem;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(//avismile.ru/wp-content/themes/wsavolai/assets/img/icon-phone_light.svg)
}
.h-burger {
position: relative;
display: block;
width: 2.5rem;
height: 2.5rem;
border-radius: 100%;
background-color: rgba(255, 255, 255, .85)
}
.h-burger i {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: .125rem;
border-radius: .25rem;
background-color: var(--clr-primary);
transition: var(--transition-1)
}
.h-burger i:before,
.h-burger i:after {
content: "";
position: absolute;
left: 0;
top: -.3125rem;
width: 100%;
height: 100%;
border-radius: .25rem;
background-color: var(--clr-primary);
transition: var(--transition-1)
}
.h-burger i:after {
top: .3125rem
}
.h-menu {
position: fixed;
z-index: -1;
top: var(--h-height);
left: 0;
transform: translateX(-100%);
transition: var(--transition-1);
width: min(100%, 26.25rem);
height: calc(100dvh - var(--h-height) - var(--gap-top) * 2);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 2rem;
background-color: var(--bg-light);
backdrop-filter: blur(15px);
opacity: 0;
padding: 1rem
}
.h-menu-overlay {
display: block;
position: fixed;
z-index: 99;
inset: 0;
opacity: 0;
visibility: hidden;
background-color: var(--bg-overlay);
backdrop-filter: blur(var(--blur));
transition: var(--transition-1)
}
.h-links {
margin-block: auto
}
.h-links ul {
gap: 1.25rem;
flex-direction: column
}
.h-links a {
font-size: 1.25rem;
line-height: 1.5em;
border-radius: 0;
padding: 0
}
.h-links a span[data-txt] {
overflow: visible;
color: inherit
}
.h-links a span[data-txt]:before,
.h-links a span[data-txt]:after {
content: none
}
.h-drop>b {
display: none
}
.h-drop-list {
gap: 1.25rem;
display: flex;
flex-direction: column;
align-items: center
}
.open-menu .h-burger i {
background-color: transparent
}
.open-menu .h-burger i:before,
.open-menu .h-burger i:after {
top: 0;
transform-origin: center;
transform: rotate(-45deg)
}
.open-menu .h-burger i:after {
transform: rotate(45deg)
}
.open-menu .h-menu {
transform: translateX(0%);
opacity: 1
}
.open-menu .h-menu-overlay {
opacity: 1;
visibility: visible
}
}
header {
opacity: 1;
transition: .15s linear opacity
}
.btn {
--btn-height: 3.75rem;
position: relative;
z-index: 1;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: clip;
text-decoration: none;
transform-origin: center;
transition: transform .5s cubic-bezier(.06, 0, 0, 1);
height: var(--btn-height);
gap: .85em;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: .875rem;
line-height: 1.2em;
font-weight: 500;
text-transform: uppercase;
text-align: center;
border: none;
border-radius: 8.625rem;
padding: 1em 3.5em
}
.btn b[data-txt] {
position: relative;
overflow: hidden;
display: inline-block;
font-size: inherit;
line-height: inherit;
color: transparent
}
.btn b[data-txt]:before,
.btn b[data-txt]:after {
content: attr(data-txt);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform .5s cubic-bezier(.06, 0, 0, 1)
}
.btn b[data-txt]:after {
transform: translateY(100%)
}
.btn-lg {
--btn-height: 4.25rem;
padding: 1em 4.25em
}
.btn-sm {
--btn-height: 3.125rem
}
.btn-primary {
background-color: var(--clr-primary);
color: var(--clr-white)
}
.btn-primary b[data-txt]:before,
.btn-primary b[data-txt]:after {
color: var(--clr-white)
}
.btn-block {
width: 100%
}
.btn.disabled {
pointer-events: none;
background-color: #93949d
}
.btn-link {
position: relative;
cursor: pointer;
gap: .5em;
display: inline-flex;
align-items: center;
font-size: .875rem;
line-height: 1.2em;
font-weight: 500;
color: var(--clr-title);
text-transform: uppercase
}
.btn-link b[data-txt] {
position: relative;
overflow: hidden;
display: inline-block;
font-size: inherit;
line-height: inherit;
color: transparent
}
.btn-link b[data-txt]:before,
.btn-link b[data-txt]:after {
content: attr(data-txt);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--clr-title);
transition: transform .5s cubic-bezier(.06, 0, 0, 1)
}
.btn-link b[data-txt]:after {
transform: translateY(100%)
}
.btn-close {
--size: 1.75rem;
position: relative;
cursor: pointer;
transition: transform .5s cubic-bezier(.06, 0, 0, 1);
display: inline-block;
width: var(--size);
height: var(--size);
border-radius: .5rem;
background-color: var(--clr-primary);
color: var(--clr-white)
}
.btn-close:before,
.btn-close:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 50%;
height: .125rem;
background-color: currentColor;
border-radius: .125rem
}
.btn-close:after {
transform: translate(-50%, -50%) rotate(-45deg)
}
.btn-wrap {
gap: .5rem;
display: inline-flex;
align-items: center;
flex-wrap: wrap
}
@media (min-width:1200px) {
.btn:hover {
transform: scale(1.05)
}
.btn:hover b[data-txt]:before {
transform: translateY(-120%)
}
.btn:hover b[data-txt]:after {
transform: translateY(0%)
}
.btn-link:hover b[data-txt]:before {
transform: translateY(-120%)
}
.btn-link:hover b[data-txt]:after {
transform: translateY(0%)
}
.btn-close:hover {
transform: scale(1.1)
}
}
@media (max-width:1199px) {
.btn {
--btn-height: 3.25rem;
padding: .5em 1.5em
}
.btn-lg {
--btn-height: 3.25rem;
padding: .5em 1.5em
}
.btn-sm {
--btn-height: 2.5rem
}
}
body {
font-family: var(--ff-1);
font-size: var(--text);
font-weight: 300;
line-height: 1.5em;
color: var(--clr-text)
}
.text {
--text-space: 1rem;
--text-rd: .625rem;
--text-li-padding: 1.5rem;
--text-th-height: 3rem;
--text-th-padding: 1.5rem;
font-size: var(--text);
font-weight: 300;
line-height: 1.5em;
color: var(--clr-text)
}
.text-lg {
font-size: var(--text-lg)
}
.text-sm {
font-size: var(--text-sm);
line-height: 1.4em
}
.text *+:where(*) {
margin-top: calc(var(--text-space) * 1.5)
}
.text li+li {
margin-top: calc(var(--text-space) * 0.5)
}
.text .swiper-entry>* * {
margin-top: 0
}
.text :is(h1, h2, h3, h4, h5, h6) {
text-transform: initial
}
.text b,
.text strong {
font-weight: 500
}
.text span {
color: var(--clr-primary)
}
.text em {
font-style: italic
}
.text a:not(.btn) {
display: inline;
font-weight: 500;
color: var(--clr-primary);
text-decoration: underline;
text-decoration-color: currentColor
}
.text ul li,
.text ol li {
position: relative;
padding-left: var(--text-li-padding)
}
.text ul li:before {
content: "";
position: absolute;
left: 0;
top: .333em;
width: .667em;
height: .667em;
border-radius: .25rem;
background-color: var(--clr-primary)
}
.text ol {
counter-reset: number
}
.text ol li:before {
counter-increment: number;
content: counter(number) ".";
display: inline-block;
position: absolute;
left: 0;
line-height: inherit;
font-weight: 600;
color: var(--clr-primary)
}
.text img {
display: block;
width: auto;
border-radius: var(--text-rd);
margin-inline: auto
}
.text figure {
line-height: 0;
width: 100%
}
.text figure.aligncenter {
text-align: center
}
.text figure.alignright {
text-align: right
}
.text figure>img {
width: auto
}
.text figure figcaption {
font-size: .75rem;
font-weight: 500;
line-height: 1.5em;
color: var(--clr-title);
margin: .25rem
}
.text iframe {
display: block;
max-width: 100%;
width: 100%;
height: 100%;
aspect-ratio: 16/9;
border: 0;
border-radius: var(--text-rd)
}
.text blockquote {
position: relative;
font-family: var(--ff-2);
font-size: var(--h5);
line-height: 1.4em;
font-weight: 500;
letter-spacing: -.02em;
color: var(--clr-white);
text-transform: uppercase;
text-align: center;
padding-block: 0 2.5vw;
padding-inline: 5vw
}
.text blockquote:before {
content: "";
display: block;
width: 2.67em;
aspect-ratio: 1;
background-image: url(//avismile.ru/wp-content/themes/wsavolai/assets/img/icon-quote.svg);
background-repeat: no-repeat;
background-size: 100%;
margin-inline: auto;
margin-block: 0 1.5rem
}
.text blockquote:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 1.5rem);
background-color: var(--bg-dark);
border-radius: var(--text-rd)
}
.text .table-wrap {
overflow: auto
}
.text table {
width: 100%;
border-spacing: 0;
min-width: 43.5rem
}
.text td,
.text th {
vertical-align: middle;
padding-block: calc(var(--text-th-padding) * 0.5);
padding-inline: var(--text-th-padding);
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: var(--clr-text);
border-right: .0625rem solid var(--clr-border);
border-bottom: .0625rem solid var(--clr-border)
}
.text td:first-child,
.text th:first-child {
border-left: .0625rem solid var(--clr-border)
}
.text tbody tr {
text-align: left
}
.text tbody tr:nth-child(even) td {
background-color: var(--clr-grey)
}
.text tbody tr:last-child td:first-child {
border-bottom-left-radius: var(--text-rd)
}
.text tbody tr:last-child td:last-child {
border-bottom-right-radius: var(--text-rd)
}
.text thead tr {
border: none
}
.text thead th,
.text thead td {
background-color: var(--clr-grey);
border-top: .0625rem solid var(--clr-border);
font-weight: 500;
color: var(--clr-title)
}
.text thead th:first-child,
.text thead td:first-child {
border-radius: var(--text-rd) 0 0 0
}
.text thead th:last-child,
.text thead td:last-child {
border-radius: 0 var(--text-rd) 0 0
}
.text *:first-child img {
margin-top: 0
}
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
font-family: var(--ff-2);
font-weight: 500;
color: var(--clr-title);
text-transform: uppercase
}
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) span {
color: var(--clr-text-light)
}
h1,
.h1 {
font-size: var(--h1);
line-height: normal;
font-weight: 700
}
h2,
.h2 {
font-size: var(--h2);
line-height: normal;
font-weight: 700
}
h3,
.h3 {
font-size: var(--h3);
line-height: 1.4em
}
h4,
.h4 {
font-size: var(--h4);
line-height: 1.4em
}
h5,
.h5 {
font-size: var(--h5);
line-height: 1.4em
}
h6,
.h6 {
font-size: var(--h6);
line-height: 1.4em
}
.subtitle {
font-size: var(--text-sm);
line-height: normal;
font-weight: 500;
color: var(--clr-text-light);
text-transform: uppercase
}
.text-balance {
text-wrap: balance
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.flex-between {
display: flex;
justify-content: space-between;
}
.flex-center {
display: flex;
justify-content: center;
}
.title-anim {
position: relative;
pointer-events: none;
perspective: 1000px
}
.title-anim>.title {
transform-origin: 100% 0%;
transform: translate3d(-15%, -10%, -80px) rotateY(-30deg) rotateX(-27deg);
opacity: 0
}
.title-anim>.title img,
.title-anim>.title video {
opacity: 0;
max-width: 100%;
width: 0;
height: auto;
aspect-ratio: 1.458;
-o-object-fit: cover;
object-fit: cover;
border-radius: .625rem
}
.title-anim>.title img {
margin-top: -.25em
}
.title-anim>.title video {
margin-bottom: -.375em
}
.headline-anim {
position: relative;
pointer-events: none;
perspective: 1000px
}
.headline-anim:not(:has(.headline-word))>.headline {
transform-origin: center center;
transform: translate3d(0px, 0px, -100px) rotateX(-90deg)
}
.headline-anim>.headline .headline-word {
transform-origin: center center;
transform: translate3d(0px, 0px, -100px) rotateX(90deg)
}
.headline-anim>.headline .headline-media {
width: 0;
opacity: 0
}
.label-top {
position: relative
}
.label-top:before {
content: attr(data-label);
position: absolute;
top: -1.25rem;
left: -.5rem;
transform: rotate(-2.5deg);
display: inline-flex;
flex-shrink: 0;
border-radius: .5rem;
background-color: var(--clr-secondary);
font-family: var(--ff-2);
font-size: clamp(0.625rem, 0.4671rem + 0.3289vw, 0.8125rem);
line-height: 1em;
font-weight: 500;
color: #161618;
text-align: center;
text-transform: uppercase;
padding: .925em 1em
}
.label-bottom {
position: relative
}
.label-bottom:after {
content: attr(data-label);
transform: translate(-104%, 1.6lh) rotate(-2.5deg);
display: inline-flex;
flex-shrink: 0;
border-radius: .5rem;
background-color: var(--clr-secondary);
font-family: var(--ff-2);
font-size: clamp(0.625rem, 0.4671rem + 0.3289vw, 0.8125rem);
line-height: 1em;
font-weight: 500;
color: #161618;
text-align: center;
text-transform: uppercase;
padding: .925em 1em;
margin-right: -100%
}
.label-bottom.text-center:after {
position: absolute;
transform: translate(-90%, 3.75lh) rotate(-2.5deg)
}
.uppercase {
text-transform: uppercase
}
@media (min-width:1200px) {
.text a:not(.btn):hover {
text-decoration-color: transparent
}
.label-top:before {
top: -1rem;
left: -1.25rem
}
}
@media (max-width:991px) {
.text {
--text-space: .75rem;
--text-th-padding: 1rem
}
.text blockquote {
font-size: var(--h6);
padding-block: 0 1.25rem;
padding-inline: 1.25rem
}
.text blockquote:before {
margin-block: 0 1rem
}
.text blockquote:after {
height: calc(100% - 1rem)
}
.label-bottom.text-center:after {
transform: translate(-90%, 2.5lh) rotate(-2.5deg)
}
}
@media (max-width:767px) {
.title br {
display: none
}
}
.breadcrumbs {
--br-fz: .875rem;
--br-space: 1rem;
width: 100%;
margin-block: .75rem 0;
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory
}
.breadcrumbs::-webkit-scrollbar {
display: none
}
.breadcrumbs ul {
min-width: -moz-max-content;
min-width: max-content;
line-height: 0;
padding-right: var(--br-space)
}
.breadcrumbs li {
position: relative;
display: inline-block;
font-size: var(--br-fz);
line-height: 1.3em;
font-weight: 400;
color: var(--clr-title);
scroll-snap-align: start;
scroll-margin-left: var(--br-space)
}
.breadcrumbs li:after {
content: "";
position: relative;
display: inline-block;
width: 1.25rem;
aspect-ratio: 3.333;
margin: 0 .5rem;
border-radius: 2.125rem;
border: .0625rem solid var(--clr-border)
}
.breadcrumbs li:last-child:after {
content: none
}
.breadcrumbs li.active {
color: var(--clr-text)
}
.breadcrumbs a {
text-decoration: underline;
text-decoration-color: transparent
}
@media (min-width:1200px) {
.breadcrumbs ul {
width: min(71.25rem, 85%);
margin-inline: auto
}
.breadcrumbs a:hover {
text-decoration-color: currentColor
}
}
.banner-section {
margin-top: calc(var(--h-height) * -1)
}
.banner {
position: relative
}
.banner .marquee-wrap {
margin-top: var(--sp-md)
}
.banner-media {
position: relative;
overflow: hidden;
display: block;
width: 100%;
border-radius: .625rem;
aspect-ratio: 1.384
}
.banner-media .video-block {
width: 100%;
height: 100%
}
.banner-media img,
.banner-media video {
z-index: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
border-radius: .625rem
}
.video {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
clip: rect(auto, auto, auto, auto)
}
.video video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%
}
.banner-align {
position: relative;
z-index: 1;
display: table-cell;
vertical-align: middle;
width: 625rem;
height: auto;
padding-block: calc(var(--h-height) + 2rem) 0
}
.banner-align.align-bottom {
vertical-align: bottom
}
.banner-align.align-top {
vertical-align: top
}
.banner-content>*+* {
margin-top: var(--sp-sm)
}
.banner-info {
gap: var(--sp-sm);
display: grid;
justify-items: center;
text-align: center
}
@media (min-width:768px) {
.banner-media {
aspect-ratio: 2.389
}
.banner-align {
height: clamp(22.5rem, 7.76rem + 30.7vw, 40rem)
}
}
@media (min-width:1200px) {
.banner.full .banner-align {
height: 100svh;
padding-block: calc(var(--h-height) + var(--sp-lg)) 0
}
.banner .marquee-wrap {
position: absolute;
bottom: .125rem
}
.banner-info {
grid-template-columns: 36% auto;
justify-content: space-between;
text-align: left
}
}
@media (min-width:1200px) and (max-width:1440px) {
.banner.full .banner-align {
padding-block: calc(var(--h-height) + var(--sp-md)) 0
}
}
.banner-section {
opacity: 1
}
.headline {
gap: .125rem 2vw;
display: inline-flex;
justify-content: center;
flex-flow: wrap;
align-items: center;
color: var(--clr-title);
text-transform: uppercase
}
.headline span {
line-height: 1.86em;
color: inherit
}
.headline-word {
position: relative;
display: inline-block
}
.headline-label-left:is([data-label]):before {
content: attr(data-label);
position: absolute;
right: -.5rem;
bottom: -.5em;
transform: rotate(-2.5deg);
display: inline-flex;
flex-shrink: 0;
border-radius: .5rem;
background-color: var(--clr-secondary);
font-family: var(--ff-2);
font-size: clamp(0.625rem, 0.4671rem + 0.3289vw, 0.8125rem);
line-height: 1em;
font-weight: 500;
color: #161618;
text-align: center;
text-transform: uppercase;
padding: .75em
}
.headline-label-right:is([data-label]):before {
content: attr(data-label);
position: absolute;
right: -.5rem;
bottom: -.5em;
transform: rotate(4deg);
display: inline-flex;
flex-shrink: 0;
border-radius: .5rem;
background-color: var(--clr-secondary);
font-family: var(--ff-2);
font-size: clamp(0.625rem, 0.4671rem + 0.3289vw, 0.8125rem);
line-height: 1em;
font-weight: 500;
color: #161618;
text-align: center;
text-transform: uppercase;
padding: .75em
}
.good-place-img {
width: 100px;
position: absolute;
top: 0;
right: -15px;
transform: rotate(15deg);
}
@media (max-width: 767px) {
.good-place-img {
width: 50px;
position: absolute;
top: 12px;
right: -55px;
transform: rotate(15deg);
}
.headline-label-right:is([data-label]):before {
bottom: -1.0em;
transform: rotate(0deg);
width: max-content;
}
}
.headline-media {
position: relative;
overflow: hidden;
display: inline-block;
width: 20vw;
aspect-ratio: 1.6463
}
.headline-media img,
.headline-media video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transform: initial;
border-radius: .625rem
}
.headline-break {
flex-basis: 100%;
height: 0
}
@media (min-width:1200px) {
.headline {
gap: .25rem 1vw
}
.headline-media {
width: 14vw
}
.headline-label-left:is([data-label]):before {
bottom: 1.25em;
padding: .925em 1em
}
.headline-label-right:is([data-label]):before {
bottom: 1.25em;
padding: .925em 1em
}
}
@media (max-width:767px) {
.headline-break {
display: none
}
}
.marquee-wrap {
--marquee-gap: 5.85vw;
--marquee-font: .875rem;
--marquee-icon: 2.286em;
--marquee-pd: .875rem;
position: relative;
z-index: 1;
display: block
}
.marquee-wrap>*+* {
margin-top: var(--marquee-gap)
}
.marquee-line {
position: relative;
width: 100vw;
height: calc(var(--marquee-icon) + var(--marquee-pd) * 2 + 0.125rem);
font-size: var(--marquee-font);
line-height: 0;
margin-left: 0;
will-change: transform;
backface-visibility: hidden
}
.marquee-item {
position: absolute;
top: 0;
transform: translate3d(var(--x), 0, 0);
gap: var(--marquee-gap);
display: flex;
align-items: center;
width: -moz-max-content;
width: max-content;
background-color: var(--clr-grey);
padding-block: var(--marquee-pd)
}
.marquee-content {
gap: var(--marquee-gap);
display: flex;
align-items: center;
font-size: var(--marquee-font)
}
.marquee-content>* {
flex-shrink: 0
}
.marquee-content:last-child>*:last-child {
margin-right: var(--marquee-gap)
}
.marquee-card {
position: relative;
gap: .75rem;
display: inline-flex;
align-items: center;
font-size: var(--marquee-font);
line-height: 1.1em;
text-transform: uppercase;
color: var(--clr-title)
}
.marquee-card img {
display: inline-block;
width: var(--marquee-icon);
height: var(--marquee-icon);
flex-shrink: 0
}
.marquee-title {
position: relative;
gap: var(--sp-sm);
display: inline-flex;
align-items: center;
font-family: var(--ff-2);
font-size: var(--marquee-font);
line-height: 1.1em;
font-weight: 700;
text-transform: uppercase;
color: var(--clr-title)
}
.marquee-img {
position: relative;
display: inline-block;
width: var(--marquee-img);
height: var(--marquee-img);
flex-shrink: 0
}
.marquee-img img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.banner-title .marquee-wrap {
--marquee-gap: var(--sp-sm);
--marquee-font: clamp(3rem, 0.8947rem + 4.386vw, 5.5rem);
--marquee-img: 1.6478em
}
.banner-title .marquee-wrap+* {
margin-top: var(--sp-lg)
}
.banner-title .marquee-line {
height: calc(var(--marquee-img) + var(--marquee-pd) * 2)
}
.banner-title .marquee-item {
background-color: transparent
}
.banner-text {
font-family: var(--ff-2);
font-size: var(--h5);
line-height: 1.4em;
font-weight: 500;
color: var(--clr-title)
}
.slideUp {
transform: translateY(60px);
opacity: 0;
transition: opacity var(--transition-2), transform var(--transition-2)
}
.slideUp:is(.brand-card) {
transition: var(--transition-2)
}
.slideLeft {
transform: translateX(60px);
opacity: 0;
transition: opacity var(--transition-2), transform var(--transition-2)
}
.fadeIn {
opacity: 0;
transition: opacity var(--transition-2)
}
.animated.slideLeft,
.animated.slideUp,
.animated.fadeIn {
opacity: 1;
transform: none
}