@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Black.woff2) format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-BlackItalic.woff2) format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Bold.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-BoldItalic.woff2) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-ExtraBold.woff2) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-ExtraBoldItalic.woff2) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-ExtraLight.woff2) format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-ExtraLightItalic.woff2) format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Italic.woff2) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Light.woff2) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-LightItalic.woff2) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Medium.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-MediumItalic.woff2) format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-Regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-SemiBold.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url(//www.mantra.in.ua/wp-content/themes/ssi-mantra/assets/fonts/Raleway-SemiBoldItalic.woff2) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
.lang-switch {
position: relative;
display: inline-block;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.lang-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lang-switch__inner {
position: relative;
align-items: center;
height: 38px;
min-width: 101px;
padding: 2px;
border-radius: 19px;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.lang-switch__inner::before {
content: '';
position: absolute;
width: calc(50% - 2px);
height: calc(90% - 0px);
border-radius: 16px;
background: #12bdad;
box-shadow: inset 0 6px 16px rgba(18, 189, 173, 0.35);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 0;
transform: translateX(0);
}
#lang-en:checked ~ .lang-switch__inner::before {
transform: translateX(100%);
}
.lang-switch__btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 16px;
border-radius: 16px;
font-weight: 600;
text-decoration: none;
color: #fff;
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: color 0.2s ease;
}
#lang-uk:checked ~ .lang-switch__inner label[for='lang-uk'] {
color: #0b1a18;
}
#lang-en:checked ~ .lang-switch__inner label[for='lang-en'] {
color: #0b1a18;
}
.lang-switch__btn:focus-visible {
outline: 2px solid #12bdad66;
outline-offset: 2px;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
background: #121314;
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit;
-webkit-tap-highlight-color: transparent;
}
* {
scroll-behavior: smooth;
}
body {
background: #121314;
color: #e1e1e1;
font-family: 'Raleway', sans-serif;
font-variant-numeric: lining-nums proportional-nums;
overflow-x: hidden;
overflow-y: hidden;
}
ul {
list-style-position: outside !important; }
.no-scroll {
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
-webkit-box-shadow: transparent !important;
box-shadow: transparent !important;
-webkit-text-fill-color: #f8f8f8 !important;
transition: background-color 9999s ease-in-out 0s;
color: #f8f8f8 !important;
}
body.no-scroll {
overflow-y: hidden;
}
a {
text-decoration: none;
color: #e1e1e1;
transition: all 0.3s linear;
}
button {
cursor: pointer;
font-family: inherit;
}
ul,
ol {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding: 0;
margin: 0;
}
img {
display: block;
}
p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
}
.container {
width: 100%;
max-width: 1440px;
padding: 0 64px;
margin: 0 auto;
position: relative;
}
.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(
111.56deg,
rgba(43, 43, 43, 0.255) -2.6%,
rgba(18, 19, 20, 0) 104%
);
border-bottom: 1.5px solid #ffffff26;
backdrop-filter: blur(40px);
box-shadow: 49.19px 49.19px 39.35px 0px #232a3e1f;
z-index: 10;
}
.header__container {
max-width: 1440px;
padding: 0 64px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.header__burger {
display: none;
}
.header__nav ul {
display: flex;
gap: 8px;
align-items: center;
}
.header__link {
font-weight: 400;
font-size: 16px;
line-height: 22px;
padding: 0 8px;
color: #f8f8f8;
transition: all 0.3s linear;
}
.header__link::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
left: 0;
top: 50%;
position: absolute;
transform: translateY(-50%);
background: #12bdad;
transition: all 0.3s linear;
display: none;
}
.header__link:hover {
font-weight: 600;
padding-left: 16px;
}
.header__link:hover::before {
display: block;
}
.header__logo img {
width: 75px;
height: auto;
}
.title-box {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
}
h2 {
font-weight: 700;
font-size: 42px;
line-height: 48px;
text-transform: uppercase;
color: #f8f8f8;
}
.section {
padding: 60px 0;
position: relative;
background: #121314;
}
.title-box p {
font-weight: 400;
font-size: 18px;
line-height: 26px;
color: #f8f8f8;
}
.title-box p strong {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
}
.title-box h2,
.title-box p {
width: 50%;
}
h1 {
font-weight: 700;
font-size: 44px;
line-height: 48px;
text-transform: uppercase;
color: #f8f8f8;
}
.hero {
padding-top: 96px;
padding-bottom: 60px;
position: relative;
height: 100vh;
will-change: transform;
transform: translateZ(0);
}
.hero__bg {
top: -96px;
right: 0;
position: absolute;
z-index: 0;
}
.hero__decor {
top: 65px;
left: 0;
position: absolute;
z-index: 0;
}
.hero__box {
position: relative;
border-radius: 32px;
}
.hero__video {
width: 100%;
border-radius: 32px; height: calc(100vh - 156px);
background: #000;
object-fit: cover;
}
.hero__content {
background: linear-gradient(
288.82deg,
rgba(251, 251, 251, 0.04) 0%,
rgba(251, 251, 251, 0.08) 100%
);
border: 1px solid #fbfbfb1a;
backdrop-filter: blur(20px);
border-radius: 32px;
position: absolute;
bottom: 32px;
left: 32px;
width: calc(100% - 64px);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 2;
gap: 32px;
padding: 36px 32px;
}
.about__list {
display: flex;
gap: 24px;
align-items: stretch;
width: 100%;
position: relative;
}
.about-list__left {
width: calc(50% - 12px);
border-radius: 24px;
}
.about-list__left img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid #c1c1c133;
border-radius: 24px;
}
.about-list__right {
width: calc(50% - 12px);
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.about-list__item {
width: calc(50% - 10px);
border: 1px solid #c1c1c133;
border-radius: 24px;
padding: 24px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 24px;
background: #fefefe05;
backdrop-filter: blur(8px);
overflow: hidden;
}
.about-list__item:nth-child(3) {
width: 100%;
}
.about-list__item h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
position: relative;
}
.about-list__item p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
position: relative;
}
.about-blur {
background: #12bdadcc;
filter: blur(100px);
width: 201px;
height: 201px;
border-radius: 50%;
position: absolute;
pointer-events: none;
transform: translate(0, 0);
transition: transform 0.25s ease-out;
}
.about-blur1 {
top: 75px;
left: 195px;
}
.about-blur2 {
top: 75px;
right: 248px;
}
.about-blur3 {
top: -169px;
left: 0;
}
.about__decor {
position: absolute;
left: 162px;
top: 42px;
width: 476px;
height: auto;
}
.title {
margin-bottom: 40px;
}
.features__decor {
position: absolute;
top: 417px;
left: 0;
}
.features__decor5 {
position: absolute;
right: 0;
top: 62px;
z-index: -1;
opacity: 0.2;
}
.features__list {
display: flex;
gap: 24px;
flex-wrap: wrap;
position: relative;
align-items: stretch;
}
.features-list__left,
.features-list__right {
width: calc(50% - 12px);
position: relative;
flex-wrap: wrap;
display: flex;
gap: 24px;
align-items: stretch;
}
.features__item {
width: calc(50% - 12px);
min-height: fit-content;
border: 1px solid #c1c1c133;
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
background: #fefefe05;
backdrop-filter: blur(8px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.features__item h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
position: relative;
}
.features__item p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
position: relative;
}
.features__item-big {
width: calc(50% - 12px);
}
.features__item-big img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid #c1c1c133;
border-radius: 24px;
}
.features-list-right__bottom {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
}
.features-list-right__bottom .features__item {
width: 103%;
flex: 1;
height: auto;
}
.feature-blur {
background: #12bdadcc;
filter: blur(100px);
width: 201px;
height: 201px;
border-radius: 50%;
position: absolute;
top: 75px;
left: 195px;
z-index: 0;
pointer-events: none;
transform: translate(0, 0);
transition: transform 0.25s ease-out;
}
.feature-blur2 {
top: -53px;
right: -76px;
}
.tabs {
display: flex;
gap: 24px;
position: relative;
z-index: 2;
}
.tabs__menu {
width: calc(50% - 12px);
display: flex;
flex-direction: column;
gap: 16px;
flex-shrink: 1;
}
.tab {
cursor: pointer;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 24px;
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
padding: 15px 24px;
text-align: left;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
transition: color 0.3s ease;
}
.tab span {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #c1c1c133;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(100px);
}
.tab.active {
background: #12bdad;
border-bottom: 1.5px solid #121314;
backdrop-filter: blur(0px);
color: #121314;
transition: all 0.3s ease;
}
.tab.active span {
background: #121314;
border: 1px solid #121314;
backdrop-filter: blur(0px);
}
.tabs__content {
position: relative;
width: calc(50% - 12px);
flex-shrink: 0;
min-width: 644px;
}
.tab-content {
display: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 24px;
height: 100%;
position: relative;
}
.tab-inside {
position: relative;
height: 100%;
width: 100%;
padding: 32px;
overflow: hidden;
border-radius: 24px;
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.tab-inside h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.tab-inside ul {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 230px;
position: relative;
z-index: 1;
}
#tab4 .tab-inside ul {
max-width: 245px;
}
.tab-inside ul li {
font-weight: 400;
font-size: 18px;
line-height: 26px;
color: #f8f8f8;
padding-left: 16px;
}
.tab-inside ul li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #12bdad;
position: absolute;
left: 0;
top: 7px;
}
.tab-img {
position: absolute;
width: 558px;
height: auto;
top: -141px;
right: -67px;
z-index: 1;
}
#tab2 .tab-img {
width: 624px;
top: -110px;
right: -138px;
}
#tab3 .tab-img {
width: 624px;
top: -135px;
right: -140px;
}
#tab3 .tab-inside ul {
max-width: 375px;
}
#tab4 .tab-img {
width: 624px;
top: -140px;
right: -130px;
}
#tab5 .tab-img {
width: 624px;
top: -120px;
right: -150px;
}
#tab6 .tab-img {
width: 640px;
top: -100px;
right: -150px;
}
.tab-blur {
background: #12bdad99;
filter: blur(100px);
width: 553px;
height: 553px;
border-radius: 50%;
position: absolute;
top: -11px;
right: -123px;
pointer-events: none;
z-index: 0;
}
.use__decor {
position: absolute;
top: 142px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
}
.slider {
position: relative;
overflow: hidden;
width: 100%;
z-index: 2;
} .slider-wrapper {
display: flex;
transition: transform 0.5s ease;
flex-direction: column;
gap: 24px;
}
.slide {
min-width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
.slide-row {
display: flex;
gap: 24px;
}
.slide-row .card {
flex: 1;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
padding: 24px;
text-align: center;
border-radius: 24px;
gap: 24px;
display: flex;
align-items: center;
overflow: hidden;
}
.card-left {
width: 100%;
max-width: 412px;
position: relative;
}
.card-left__decor {
background: #12bdad99;
filter: blur(100px);
width: 362px;
height: 362px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.card-left img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
.card-right {
width: calc(100% - 412px);
}
.card-right h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
margin-bottom: 24px;
text-align: left;
}
.card-right__list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-right__item {
border-radius: 16px;
padding: 27px 16px;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
display: flex;
align-items: center;
font-variant-numeric: lining-nums proportional-nums;
width: calc(33.33% - 10.66px);
text-align: left;
position: relative;
overflow: hidden;
}
.card-right__item::after {
content: '';
background: #12bdad99;
filter: blur(100px);
width: 161px;
height: 161px;
border-radius: 50%;
position: absolute;
top: -87px;
right: -89px;
pointer-events: none;
z-index: 0;
}
.complectation__decor {
position: absolute;
top: -122px;
right: 0;
z-index: 0;
pointer-events: none;
}
.slider-nav {
position: relative;
margin-top: 40px;
width: 100%;
display: flex;
justify-content: center;
gap: 20px;
}
.slider-nav button {
background: transparent;
border: none;
outline: none;
cursor: pointer;
width: 48px;
height: 48px;
}
.slider-nav button:nth-child(1) img {
rotate: 180deg;
}
.slider-nav button.disabled {
opacity: 0.5;
cursor: auto;
}
.slide-row {
display: flex;
gap: 24px;
}
.slide-row.second .card {
padding: 0;
width: calc(50% - 12px);
min-height: 436px;
transition: all 0.3s ease;
cursor: pointer;
}
.card-content__text {
position: absolute;
width: 100%;
height: 100%;
z-index: 5;
background: #171819;
opacity: 0;
visibility: hidden;
padding: 32px;
transition: all 0.3s ease;
}
.card-content__text h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
margin-bottom: 16px;
color: #f8f8f8;
text-align: left;
}
.card-content-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-content-item {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #f8f8f8;
padding-left: 16px;
position: relative;
text-align: left;
}
.card-content-item::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #12bdad;
position: absolute;
top: 7px;
left: 0;
}
.card-content-list__inside {
padding-left: 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
.card-content-list__inside li {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #f8f8f8;
padding-left: 16px;
position: relative;
text-align: left;
}
.card-content-list__inside li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #393939;
position: absolute;
top: 7px;
left: 0;
}
.slide > .slide-row.second:nth-of-type(2) > .card:first-child > .card-content > h3 {
display: inline-table;
}
.btn-mob {
display: none;
}
.btn-mob-down {
display: none;
}
@media (min-width: 769px) {
.slide-row .card:hover .card-content__text {
opacity: 1;
visibility: visible;
}
}
.card-content {
padding: 32px 21px;
background: #fefefe05;
backdrop-filter: blur(8px);
border-radius: 24px;
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
}
.card-content__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
}
.card-content h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
font-variant-numeric: lining-nums proportional-nums;
text-align: left;
position: relative;
z-index: 1;
color: #f8f8f8;
height: 20%;
}
.card-content__blur {
width: 468px;
height: 468px;
border-radius: 50%;
background: #12bdad99;
filter: blur(100px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
}
.instruments__list {
display: flex;
background: #fefefe05;
border-radius: 24px;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
padding: 24px;
gap: 20px 0;
overflow: hidden;
margin-bottom: 48px;
}
.instruments__list::before {
content: '';
width: 157px;
height: 157px;
position: absolute;
top: -55px;
left: 89px;
background: #12bdadcc;
filter: blur(100px);
}
.instruments__list::after {
content: '';
width: 157px;
height: 157px;
position: absolute;
top: 69px;
right: -60px;
background: #12bdadcc;
filter: blur(100px);
}
.instruments__item {
width: 25%;
position: relative;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.instruments__item:not(:last-child)::after {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(180deg, #032825 0%, #12bdad 48.08%, #032825 100%);
}
.instruments__item h3 {
font-weight: 700;
font-size: 64px;
line-height: 64px;
text-transform: uppercase;
margin-bottom: 8px;
color: #f8f8f8;
font-variant-numeric: lining-nums proportional-nums;
}
.instruments__item p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #f8f8f8;
}
.instruments__tabs {
display: flex;
flex-direction: column;
gap: 20px;
}
.instruments__menu {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.instruments-tab {
background: #fefefe05;
border: 1px solid #c1c1c133;
border-radius: 16px;
padding: 17px 32px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
cursor: pointer;
transition: all 0.3s linear;
}
.instruments-tab.active {
background: #f8f8f8;
color: #121314;
}
.instruments-content {
display: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
position: relative;
gap: 24px;
}
.instruments-content.active {
display: flex;
flex-wrap: wrap;
opacity: 1;
transform: translateY(0);
}
.instruments-element {
width: calc(25% - 18px);
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
}
.instruments-blur {
background: #12bdadcc;
position: absolute;
filter: blur(100px);
width: 163px;
height: 163px;
border-radius: 50%;
top: -11px;
right: -57px;
z-index: 0;
}
.instruments-element img {
width: 262px;
height: auto;
margin-left: auto;
position: relative;
z-index: 1;
}
.instruments-element h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
padding: 0 18px 24px;
}
.advantage__list {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 24px;
grid-row-gap: 20px;
}
.advantage__item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24px;
}
.advantage__item:nth-child(1) {
grid-area: 1 / 1 / 2 / 5;
}
.advantage__item:nth-child(2) {
grid-area: 1 / 5 / 2 / 8;
}
.advantage__item:nth-child(3) {
grid-area: 1 / 8 / 2 / 13;
}
.advantage__item:nth-child(4) {
grid-area: 2 / 1 / 3 / 4;
}
.advantage__item:nth-child(5) {
grid-area: 2 / 4 / 3 / 8;
}
.advantage__item:nth-child(6) {
grid-area: 2 / 8 / 3 / 10;
}
.advantage__item:nth-child(7) {
grid-area: 2 / 10 / 3 / 13;
}
.item {
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
padding: 24px;
gap: 16px;
border-radius: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.advantage__decor {
position: absolute;
top: 17px;
right: 0;
z-index: 0;
}
.item h3 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-transform: uppercase;
color: #f8f8f8;
position: relative;
z-index: 1;
}
.item p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #e1e1e1;
position: relative;
z-index: 1;
}
.pos1 {
top: -53px;
right: -107px;
}
.pos2 {
top: -53px;
left: -107px;
}
.pos3 {
bottom: -114px;
right: -76px;
}
.pos4 {
bottom: -147px;
left: -95px;
}
.contacts__decor {
user-select: none;
position: absolute;
top: -135px;
right: 0;
z-index: 0;
}
.contacts__box {
display: flex;
align-items: center;
gap: 40px;
}
.contacts__left,
.contacts__right {
width: calc(50% - 20px);
}
.contacts__right img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24px;
}
.title-contact {
margin-bottom: 12px;
}
.contacts__form {
margin-top: 32px;
}
.form-group {
margin-bottom: 16px;
position: relative;
}
.form-group label {
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #e1e1e1;
margin-bottom: 8px;
display: block;
}
.form-group textarea {
height: 140px;
resize: none;
}
.form-group input,
.form-group textarea {
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 16px;
padding: 17px 16px;
display: block;
width: 100%;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #f8f8f8;
outline: none;
font-variant-numeric: lining-nums proportional-nums;
font-family: 'Raleway', sans-serif;
}
.form-group input::placeholder,
.form-group textarea {
color: #767676;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.form-group.name input:focus::placeholder,
.form-group textarea:focus::placeholder {
opacity: 0;
}
.form-group input:focus,
.form-group textarea:focus {
border: 1px solid #f8f8f8;
}
.form-group input.filled,
.form-group textarea.filled {
background: #fefefe05;
border: 1px solid #f8f8f8;
backdrop-filter: blur(8px);
color: #f8f8f8;
}
.form-group input.error {
background: #fefefe05;
border: 1px solid #ff8484;
backdrop-filter: blur(8px);
color: #f8f8f8;
}
.form-message {
display: none;
top: 15px;
position: relative;
margin-left: 10px;
color: #12bdad;
font-weight: bold;
}
.spinner {
border: 2px solid #f3f3f3;
border-top: 2px solid #333;
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 0.8s linear infinite;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.error {
position: static;
margin-top: 2px;
display: none;
font-size: 14px;
line-height: 22px;
color: #ff8484;
}
.custom-checkbox {
display: flex;
align-items: flex-start;
gap: 16px;
cursor: pointer;
user-select: none;
font-size: 16px;
line-height: 22px;
color: #f8f8f8;
margin-bottom: 32px;
}
.custom-checkbox .error {
position: static;
display: none;
margin-top: 8px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #ff8484;
}
.custom-checkbox a {
text-decoration: underline;
}
.custom-checkbox input {
display: none;
}
.custom-checkbox .checkmark {
width: 18px;
height: 18px;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 4px;
position: relative;
flex-shrink: 0;
transition: all 0.3s ease;
}
.custom-checkbox input:checked + .checkmark::after {
content: '';
position: absolute;
left: 5px;
top: 0px;
width: 6px;
height: 12px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked + .checkmark {
background: #12bdad;
}
.button {
background: #12bdad;
border-radius: 16px;
position: relative;
font-family: inherit;
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #121314;
border: none;
outline: none;
overflow: hidden;
padding: 14px 32px;
min-width: 236px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.button span {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 2;
}
.button div {
position: absolute;
bottom: calc(-100% - 50px);
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
transition: all 0.7s ease;
z-index: 1;
}
.button:hover div {
transform: translateX(-50%) scale(7);
}
.footer {
background: linear-gradient(
111.56deg,
rgba(43, 43, 43, 0.255) -2.6%,
rgba(18, 19, 20, 0) 104%
);
border-top: 1.5px solid #ffffff26;
backdrop-filter: blur(35px);
box-shadow: 49.19px 49.19px 39.35px 0px #232a3e1f;
padding: 32px 64px;
}
.footer__top {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
border-bottom: 1px solid #393939;
}
.footer__logo {
display: flex;
align-items: center;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #f8f8f8;
gap: 8px;
}
.footer__list {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 24px;
}
.footer__list a {
display: flex;
gap: 8px;
align-items: center;
transition: all 0.3s ease;
}
.footer__list a strong {
font-weight: 400;
font-size: 16px;
line-height: 22px;
font-variant-numeric: lining-nums proportional-nums;
color: #e1e1e1;
}
.footer__list a span {
background: #ffffff05;
display: flex;
align-items: center;
justify-content: center;
border: 1.14px solid #c1c1c133;
backdrop-filter: blur(9.14285659790039px);
border-radius: 50%;
width: 32px;
height: 32px;
transition: all 0.3s ease;
}
.footer__list a span svg path {
transition: all 0.3s ease;
}
.footer__list a:hover span svg path {
stroke: #121314;
}
.footer__list a:last-child:hover span svg path {
fill: #121314;
}
.footer__list a:hover span {
background: #f8f8f8;
}
.footer__bottom {
margin-top: 24px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #e1e1e1;
font-variant-numeric: lining-nums proportional-nums;
text-align: center;
}
.button-up {
position: fixed;
bottom: 20px;
right: 64px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
background: transparent;
display: none;
z-index: 20;
width: 56px;
height: 56px;
}
.button-up img {
width: 56px;
height: 56px;
}
.about {
background: #121314;
position: relative;
z-index: 1;
}
.button-call {
position: absolute;
top: -88px;
left: 0px;
cursor: pointer;
align-items: center;
justify-content: center;
border: none;
outline: none;
display: flex;
z-index: 20;
width: 112px;
height: 112px;
background: #ffffff;
border-radius: 50%;
font-weight: 600;
font-size: 16px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: #121314;
}
.tab__accordion {
display: none;
}
.burger {
display: none;
}
.features__list-mob {
display: none;
}
.politic {
padding: 120px 0;
}
.politic-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.politic-content p a {
text-decoration: underline;
}
.politic-content p a:hover {
opacity: 0.7;
}
@media screen and (min-width: 1024px) {
.card-content__img {
top: 10%;
}
.slide .slide-row.second:nth-of-type(2) .card-content__img {
top: 7%;
}
}
@media screen and (max-width: 1200px) {
.features__list {
flex-direction: column;
}
.features-list__left,
.features-list__right {
width: 100%;
}
.tab {
font-size: 20px;
line-height: 28px;
}
.tabs__content {
min-width: auto;
}
#tab0 .tab-img,
#tab1 .tab-img,
#tab2 .tab-img,
#tab3 .tab-img,
#tab4 .tab-img,
#tab5 .tab-img,
#tab6 .tab-img {
width: 300px;
top: 10px;
right: -50px;
}
.advantage__list {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 24px;
grid-row-gap: 20px;
}
.advantage__item:nth-child(1) {
grid-area: 1 / 1 / 2 / 7;
}
.advantage__item:nth-child(2) {
grid-area: 1 / 7 / 2 / 13;
}
.advantage__item:nth-child(3) {
grid-area: 2 / 5 / 3 / 9;
}
.advantage__item:nth-child(4) {
grid-area: 2 / 9 / 3 / 13;
}
.advantage__item:nth-child(5) {
grid-area: 3 / 5 / 4 / 9;
}
.advantage__item:nth-child(6) {
grid-area: 2 / 1 / 4 / 5;
}
.advantage__item:nth-child(7) {
grid-area: 3 / 9 / 4 / 13;
}
.contacts__box {
gap: 20px;
align-items: flex-start;
}
.contacts__left,
.contacts__right {
width: calc(50% - 10px);
}
.card-left {
max-width: 320px;
}
.card-right {
width: calc(100% - 320px);
}
}
@media screen and (max-width: 1120px) {
h1 {
font-size: 36px;
line-height: 42px;
}
.hero__content {
padding: 24px;
width: calc(100% - 48px);
left: 24px;
}
.about__list {
flex-direction: column;
}
.about-list__left,
.about-list__right {
width: 100%;
}
.tabs__content {
min-width: 470px;
}
.instruments-element {
width: calc(33.33% - 16px);
}
.instruments-element img {
width: 100%;
height: auto;
}
.header__nav {
display: none;
}
.header__burger {
display: block;
border: none;
background: transparent;
cursor: pointer;
position: relative;
z-index: 20;
outline: none;
}
.header__container {
height: 76px;
}
.custom-flex {
display: flex;
gap: 32px;
}
.header__logo img {
width: 62px;
height: auto;
}
.burger {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
z-index: 30;
display: block;
background: #121314cc;
backdrop-filter: blur(4px);
transition: top 0.5s ease;
}
.burger.open {
top: 0;
}
.burger__content {
background: #121314;
height: max-content;
position: relative;
overflow: hidden;
}
.burger__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 64px;
border-bottom: 1px solid #ffffff26;
}
.burger__close {
border: none;
background: transparent;
outline: none;
}
.burger__nav {
overflow: hidden;
}
.burger__nav ul {
padding: 16px 64px;
display: flex;
flex-direction: column;
gap: 0;
}
.burger__nav ul li {
font-weight: 400;
font-size: 14px;
line-height: 36px;
color: #f8f8f8;
}
.burger-blur {
background: #12bdadcc;
filter: blur(100px);
width: 224px;
height: 224px;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
bottom: -180px;
position: absolute;
}
}
@media (max-width: 1024px) {
.slide-row .card {
flex-direction: column;
gap: 20px;
}
.card-left {
max-width: 100%;
max-width: 412px;
margin: 0 auto;
}
.card-right {
width: 100%;
}
.slide-row.second .card {
width: 100%;
min-height: 374px;
}
.slide-row {
flex-direction: column;
}
.card-content__img {
max-width: 500px;
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 960px) {
.tabs {
display: none;
}
.tab__accordion {
display: block;
}
.ac {
width: 100%;
margin-top: 0;
border: none;
position: relative;
border-radius: 12px;
background: #fefefe05;
backdrop-filter: blur(8px);
}
.ac:not(:last-child) {
margin-bottom: 20px;
}
.ac-header {
width: 100%;
}
.ac-header::after,
.ac-header::before {
display: none;
}
.ac .ac-trigger {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 22px;
text-align: left;
text-transform: uppercase;
color: #f8f8f8;
background: transparent;
white-space: normal;
border-radius: 12px;
padding: 17px 60px 17px 20px !important;
border: 1px solid #c1c1c133;
}
.ac .ac-trigger:focus {
color: #f8f8f8;
}
.ac.is-active > .ac-header {
color: #f8f8f8;
background: transparent;
}
.ac.is-active > .ac-header .ac-trigger {
color: #121314;
background: #12bdad;
border: 1px solid transparent;
}
.ac .ac-panel {
padding: 0;
transition: height 0.3s ease;
background: transparent;
}
.ac .ac-panel {
font-family: 'Raleway', sans-serif;
text-align: left;
padding: 0;
margin: 8px 0 0;
background: #fefefe05;
border: 1px solid #c1c1c133;
backdrop-filter: blur(8px);
border-radius: 12px;
}
.ac .ac-trigger::after {
content: url(https://mantra.in.ua/wp-content/themes/ssi-mantra/assets/img/ac-up.svg);
width: 36px;
height: 36px;
flex-shrink: 0;
position: absolute;
display: flex;
align-items: center;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s linear;
}
.ac.is-active > .ac-header .ac-trigger::after {
content: url(https://mantra.in.ua/wp-content/themes/ssi-mantra/assets/img/ac-down.svg);
width: 36px;
height: 36px;
}
.tab-inside {
padding: 20px;
overflow: hidden;
border-radius: 12px;
}
.tab-inside h3 {
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin-bottom: 8px;
}
.tab-inside ul {
max-width: 224px;
}
.tab-inside ul li {
font-size: 14px;
line-height: 18px;
}
.tab-img {
width: 257px;
height: auto;
top: -32px;
right: 0px;
}
.tab-blur {
background: #12bdad99;
filter: blur(100px);
width: 553px;
height: 553px;
border-radius: 50%;
position: absolute;
top: -11px;
right: -123px;
pointer-events: none;
z-index: 0;
}
.instruments__item {
width: 50%;
padding: 0 12px;
}
.instruments__list {
flex-wrap: wrap;
padding: 20px;
}
.instruments__list::before {
bottom: -60px;
top: auto;
left: -86px;
}
.instruments__list::after {
top: -100px;
right: -99px;
}
.instruments__item:nth-child(2):after {
display: none;
}
.instruments__item h3 {
font-size: 48px;
line-height: 48px;
margin-bottom: 8px;
}
.instruments__menu {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.instruments__menu::-webkit-scrollbar {
display: none;
}
.instruments-tab {
flex: 0 0 auto;
}
.instruments-element h3 {
font-size: 20px;
line-height: 32px;
padding: 0 16px 16px;
}
.advantage__item img {
height: 100%;
}
.advantage__list {
display: flex;
gap: 16px;
flex-direction: column;
}
.contacts__left {
width: 100%;
}
.contacts__right {
display: none;
}
}
@media (max-width: 835px) {
.card-left {
max-width: 387px;
}
}
@media screen and (max-width: 768px) {
.slide-row.second .card {
min-height: auto;
padding: 0;
}
.card-content__text.active {
opacity: 1;
visibility: visible;
}
.slide-row {
flex-direction: column;
}
.card-content__text {
padding: 20px;
}
.card-content__text h3 {
font-size: 18px;
line-height: 24px;
margin-bottom: 12px;
}
.card-content-item p,
.card-content-list__inside li {
font-size: 14px;
line-height: 18px;
}
.lang-switch__inner {
height: 44px;
border-radius: 22px;
}
.lang-switch__inner::before {
border-radius: 20px;
}
.lang-switch__btn {
height: 40px;
padding: 0 18px;
font-size: 16px;
}
.card-content {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 0;
padding-bottom: 20px;
justify-content: space-between;
}
.card-content__img {
position: static;
transform: translate(0, 0);
width: 100%;
max-width: 375px;
margin: 0 auto;
}
.card-content h3 {
padding: 0 68px 20px 20px;
font-size: 18px;
line-height: 24px;
}
h1 {
font-size: 26px;
line-height: 32px;
}
.hero__content {
padding: 16px;
width: calc(100% - 24px);
left: 12px;
}
.container {
padding: 0 16px;
}
.section {
padding: 32px 0;
}
.section.contacts {
padding: 32px 0 64px;
}
.title {
margin-bottom: 20px;
}
.instruments-element {
width: calc(50% - 4px);
border-radius: 16px;
gap: 12px;
}
.instruments-content {
gap: 8px;
}
.instruments-tab {
border-radius: 12px;
padding: 12px 16px;
font-size: 14px;
line-height: 20px;
}
.instruments__tabs {
gap: 16px;
}
.instruments__menu {
margin: 0 -16px;
}
.instruments-tab:first-child {
margin-left: 16px;
}
.instruments-tab:last-child {
margin-right: 16px;
}
.contacts__decor {
width: 900px;
height: auto;
rotate: 25deg;
right: -256px;
top: 124px;
}
.footer {
padding: 20px 16px 60px;
}
.footer__top {
gap: 22px;
}
.footer__list {
flex-direction: column;
gap: 26px;
margin-bottom: 26px;
}
.footer__bottom {
line-height: 18px;
}
.footer__list a strong {
font-size: 14px;
line-height: 18px;
}
.button-call {
display: none;
}
.button-up {
bottom: 8px;
right: 16px;
width: 44px;
height: 44px;
}
.button-up img {
width: 44px;
height: 44px;
}
.burger__top {
padding: 16px;
}
.burger__nav ul {
padding: 16px;
}
.header__container {
padding: 0 16px;
}
.hero__video { width: 100%;
object-fit: cover;
}
.btn-mob {
display: block;
position: absolute;
bottom: 16px;
right: 16px;
z-index: 4;
border: none;
outline: none;
background: transparent;
}
.btn-mob-down {
display: block;
position: absolute;
bottom: 16px;
right: 16px;
z-index: 4;
border: none;
outline: none;
background: transparent;
}
.politic {
padding: 60px 0;
}
}
@media screen and (max-width: 600px) {
.hero__content {
flex-direction: column;
gap: 16px;
bottom: 14px;
border-radius: 12px;
}
.hero {
padding-bottom: 32px;
}
.hero__box {
border-radius: 24px;
}
.hero__bg {
top: 14px;
right: -22px;
width: 911px;
height: auto;
rotate: 4deg;
}
.hero__decor {
display: none;
}
.hero__video {
border-radius: 24px;
}
.about-list__item {
width: 100%;
border-radius: 20px;
padding: 20px;
gap: 16px;
}
.about-list__item h3 {
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
.about-list__item p {
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
h2 {
font-size: 24px;
line-height: 30px;
}
.title-box {
gap: 24px;
flex-direction: column;
margin-bottom: 16px;
}
.title-box h2,
.title-box p {
width: 100%;
}
.title-box p {
font-size: 14px;
line-height: 18px;
}
.title-box p strong {
font-size: 18px;
line-height: 24px;
}
.features__item-big {
width: 100%;
}
.features__item {
width: 100%;
}
.features__list {
display: none;
}
.features__list-mob {
display: flex;
gap: 20px;
flex-direction: column;
}
.features-list-right__bottom {
width: 100%;
}
.features__item {
width: 100%;
border-radius: 20px;
padding: 20px;
gap: 16px;
}
.features__item h3 {
font-weight: 700;
font-size: 18px;
line-height: 24px;
}
.features__item p {
font-weight: 400;
font-size: 14px;
line-height: 18px;
}
.instruments__item h3 {
font-size: 32px;
line-height: 32px;
margin-bottom: 4px;
}
.instruments__item p {
font-weight: 500;
font-size: 12px;
line-height: 16px;
}
.instruments__list {
margin-bottom: 32px;
}
.item {
padding: 20px;
border-radius: 20px;
}
.item h3 {
font-size: 18px;
line-height: 24px;
}
.item p {
font-size: 14px;
line-height: 18px;
}
.pos1 {
top: -85px;
right: -85px;
}
.pos2 {
top: -55px;
left: -85px;
}
.pos3 {
bottom: -114px;
right: -76px;
}
.pos4 {
bottom: -147px;
left: -95px;
}
.form-group label {
line-height: 18px;
}
.form-group input,
.form-group textarea {
padding: 13px 16px;
}
.custom-checkbox {
font-size: 14px;
line-height: 18px;
margin-bottom: 20px;
}
.card-right h3 {
font-size: 18px;
line-height: 24px;
margin-bottom: 16px;
}
.card-right__list {
gap: 8px;
}
.card-right__item {
padding: 20px 12px;
font-size: 12px;
line-height: 16px;
width: calc(50% - 4px);
}
.slider-nav {
margin-top: 20px;
}
.slider-nav button {
width: 44px;
height: 44px;
}
.slider-nav button img {
width: 44px;
height: 44px;
}
.slide-row .card {
padding: 20px;
border-radius: 20px;
}
.card-left__decor {
top: -200px;
transform: translate(-50%, 0%);
}
.slide-row.second .card {
min-height: auto;
padding: 0;
}
}
@media (max-width: 480px) {
.tab-img {
width: 230px;
height: auto;
top: -27px;
right: -50px;
}
#ac-2 .tab-inside ul {
max-width: 300px !important;
}
#ac-3 .tab-inside ul {
max-width: 220px !important;
}
#ac-2 .tab-inside > ul > li:nth-child(2) {
max-width: 190px !important;
}
#ac-5 .tab-img {
width: 261px;
top: -13px;
right: -62px;
}
.tab-blur {
top: -55px;
right: -408px;
}
.tab-inside ul {
max-width: 178px;
}
.instruments-element h3 {
font-size: 16px;
line-height: 22px;
}
.instruments-element img {
width: 143px;
}
.button {
width: 100%;
font-size: 14px;
line-height: 20px;
padding: 12px 32px;
}
.button div {
display: none;
}
.button span img {
width: 20px;
height: 20px;
}
.slide-row.second .card {
min-height: 350px;
}
}
@media (max-width: 460px) {
.slide-row.second .card {
min-height: auto;
}
}
@media (max-width: 359px) {
#ac-0 .tab-img {
width: 149px;
top: -24px;
right: -18px;
}
#ac-1 .tab-img {
width: 230px;
height: auto;
top: -20px;
}
#ac-2 .tab-img {
width: 181px;
top: 0px;
right: -22px;
}
#ac-3 .tab-img {
width: 175px;
height: auto;
top: 0px;
right: -43px;
}
#ac-4 .tab-img {
width: 170px;
top: 0px;
right: -29px;
}
#ac-5 .tab-img {
width: 184px;
top: 7px;
right: -42px;
}
}