You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
aliseptik/local/templates/.default/css/style.min.css

11572 lines
208 KiB

@font-face {
font-family: Lato;
font-weight: 400;
font-style: normal;
src: url(../fonts/Lato-Regular.woff);
font-display: swap
}
@font-face {
font-family: Lato;
font-weight: 600;
font-style: normal;
src: url(../fonts/Lato-SemiBold.woff);
font-display: swap
}
@font-face {
font-family: Lato;
font-weight: 700;
font-style: normal;
src: url(../fonts/Lato-Bold.woff);
font-display: swap
}
@font-face {
font-family: Lato;
font-weight: 900;
font-style: normal;
src: url(../fonts/Lato-Black.woff);
font-display: swap
}
@font-face {
font-family: Inter;
font-weight: 700;
font-style: normal;
src: url(../fonts/Inter-Bold.woff);
font-display: swap
}
:root {
--color-white: #fff;
--color-black: #000
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px
}
html {
scroll-behavior: smooth;
margin: 0;
padding: 0
}
body {
color: #3d3d3d;
margin: 0;
padding: 0;
font-family: Lato, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.3
}
u {
border-bottom: 1px solid;
padding-bottom: 1px;
line-height: 1.4;
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0
}
a {
color: inherit;
text-decoration: none
}
img {
box-sizing: border-box;
display: block
}
button {
all: unset
}
svg {
display: block
}
.container {
box-sizing: border-box;
max-width: 1440px;
margin: 0 auto;
padding: 0 6.9vw
}
.hover-scale {
position: relative
}
.hover-scale:after {
content: "";
z-index: -1;
background-color: inherit;
border-radius: inherit;
width: 100%;
height: 100%;
transition: .2s ease-in;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.hover-scale:hover:after {
width: calc(100% + 8px);
height: calc(100% + 8px)
}
.section-title {
margin: 0 0 40px;
font-size: 36px;
font-weight: 900;
line-height: 1.2
}
.green-text {
color: #097359
}
.orange-text {
color: #ff7f23
}
.input {
box-sizing: border-box;
box-shadow: none;
background-color: #f5f5f5;
border: 1px solid #f5f5f5;
border-radius: 8px;
outline: 0;
height: 48px;
padding: 0 12px;
font-family: inherit;
font-size: 16px;
transition: .1s linear;
display: block
}
.input:focus {
background-color: #fff;
border-color: #939393
}
.input:not(:-moz-placeholder-shown),
.input:not(:placeholder-shown) {
color: #3d3d3d;
background-color: #fff
}
.input::-moz-placeholder {
color: #939393;
font-size: 16px
}
.input::placeholder {
color: #939393;
font-size: 16px
}
.download-link {
grid-auto-flow: column;
-moz-column-gap: 8px;
column-gap: 8px;
width: -moz-max-content;
width: max-content;
display: grid
}
.download-link:before {
content: "";
background-image: url(../img/svg/download-icon.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px
}
.download-link span {
color: #097359;
font-weight: 700
}
.section {
padding-top: 60px;
padding-bottom: 60px
}
.section-inner {
padding-top: 40px;
padding-bottom: 60px
}
.button {
box-sizing: border-box;
cursor: pointer;
border: 1px solid;
border-radius: 8px;
flex-shrink: 0;
justify-content: center;
align-items: center;
max-width: 100%;
padding: 8px 20px;
font-weight: 700;
transition: .2s linear;
display: flex
}
.button--outline {
color: #097359;
background-color: rgba(0, 0, 0, 0)
}
.button--outline:hover {
opacity: .6
}
.button--orange {
color: #fff;
background-color: #ff7f23;
border-color: #ff7f23
}
.completed-objects {
background-color: #f5f5f5;
border-radius: 60px;
}
.button--orange:hover {
background-color: #ff8a35
}
.button--ghost {
color: #097359;
border: none;
padding: 0
}
.button--catalog svg {
margin-left: 8px
}
.button-video {
position: relative
}
.button-video:hover img {
width: 72px;
height: 72px
}
.button-video img {
width: 62px;
height: 62px;
transition: .3s ease-in
}
.header {
z-index: 10;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 24px;
transition: background-color .2s linear;
position: relative
}
.header__menu {
border-bottom: 1px solid #f5f5f5;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding-bottom: 20px;
display: flex
}
.header__logo {
align-items: center;
margin-right: 25px;
display: flex
}
.header__logo img {
display: block
}
.header_location-wrap {
position: relative
}
.header_location-wrap.is-active .header__location-select {
display: block
}
.header__location {
align-items: center;
font-weight: 700;
display: flex
}
.header__location:after {
content: "";
background-image: url(../img/svg/arrow.svg);
background-repeat: no-repeat;
background-size: contain;
width: 12px;
height: 12px;
margin-top: 3px;
margin-left: 4px
}
.header__location span {
pointer-events: none
}
.header__location-select {
z-index: 1;
font-size: inherit;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 12px;
width: 100%;
min-width: -moz-max-content;
min-width: max-content;
max-width: 100vw;
display: none;
position: absolute;
top: 0;
left: 0
}
.header__location-select option {
padding: 10px
}
.menu {
margin-left: auto;
position: relative
}
.menu__list {
grid-auto-flow: column;
-moz-column-gap: 20px;
column-gap: 20px;
margin: 0;
padding: 0;
list-style: none;
display: grid
}
.menu__list a {
text-decoration: none;
transition: color .3s
}
.menu__list a:hover {
color: #097359
}
.menu__item {
white-space: nowrap
}
.menu__more {
color: #939393;
align-items: center;
display: none;
position: relative
}
.menu__more:focus,
.menu__more:hover {
color: #097359
}
.menu__more:focus .menu__more-list,
.menu__more:hover .menu__more-list {
color: #3d3d3d;
opacity: 1;
pointer-events: auto
}
.menu__more-list {
z-index: 1;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
background-color: #f5f5f5;
border-radius: 16px;
grid-auto-flow: row;
row-gap: 20px;
min-width: 180px;
padding: 24px 28px;
list-style: none;
transition: opacity .2s;
display: grid;
position: absolute;
top: 100%;
right: -16px
}
.menu__more-list .menu__item {
display: none
}
.header__bottom {
justify-content: space-between;
align-items: center;
padding-top: 20px;
display: flex
}
.header__bottom .button {
margin-right: 8px
}
.header__bottom form {
flex-grow: 1
}
.header__bottom .input {
width: 100%;
height: 40px;
padding: 0 50px 0 20px
}
.header__search {
position: relative
}
.header__search:after {
content: "";
background-image: url(../img/svg/search-img.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%)
}
.header__search .input:focus+.header__search-block {
display: block
}
.header__search-block {
z-index: 1;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #f5f5f5;
border-radius: 12px;
width: 100%;
max-width: 100%;
max-height: 50vh;
padding: 0 20px;
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
overflow-y: auto;
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.header__search-top {
justify-content: space-between;
-moz-column-gap: 10px;
column-gap: 10px;
margin-bottom: 12px;
padding-top: 16px;
font-weight: 700;
display: flex
}
.header__search-top .button {
margin: 0
}
.header__search-history {
grid-template-columns: 1fr 20px;
gap: 12px;
padding: 16px 0;
display: grid
}
.header__search-history+.header__search-history {
border-top: 1px solid #e2e2e2
}
.header__search-history span {
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 28px);
overflow: hidden
}
.header__search-btn {
cursor: pointer;
flex-shrink: 0;
align-items: center;
gap: 8px;
display: flex;
overflow: hidden
}
.header__search-btn:hover {
color: #097359
}
.header__search-btn svg {
flex-shrink: 0;
width: 20px;
height: 20px
}
.header__search-found {
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 8px;
padding: 16px 0;
display: grid;
overflow: hidden
}
.header__search-found:hover {
color: #097359
}
.header__search-found+.header__search-found {
border-top: 1px solid #e2e2e2
}
.header__search-found span {
text-overflow: ellipsis;
overflow: hidden
}
.header__search-price {
color: #939393
}
.header__search-empty {
color: #939393;
justify-content: center;
align-items: center;
height: 100px;
display: flex
}
.header__phone {
margin-left: 40px;
font-size: 24px;
font-weight: 700;
transition: color .2s linear
}
.header__phone:hover {
color: #097359
}
.header__cart {
width: 24px;
height: 24px;
margin-left: 40px;
position: relative
}
.header__cart:has(.header__cart-value:not(:empty)) {
padding-right: 11px
}
.header__cart-value {
color: #fff;
background-color: #097359;
border-radius: 20px;
padding: 4px;
font-size: 12px;
font-weight: 700;
line-height: 9px;
position: absolute;
top: -3px;
right: 0
}
.header__cart-value:empty {
display: none
}
.cart .header__cart svg {
fill: #ff7f23;
stroke: #ff7f23
}
.cart .header__cart svg path {
stroke: #ff7f23
}
body.show-catalog .header {
background-color: #fff
}
body.show-catalog .catalog {
z-index: 1;
visibility: visible;
opacity: 1;
pointer-events: auto
}
body.show-catalog .overflow {
z-index: 5;
opacity: 1;
pointer-events: auto
}
.catalog {
z-index: -1;
box-sizing: border-box;
visibility: hidden;
opacity: 0;
pointer-events: none;
background-color: #f5f5f5;
border-bottom-right-radius: 16px;
padding: 12px;
transition: opacity .2s linear;
position: absolute;
top: 100%;
left: 0
}
.catalog:has(.catalog__item:hover) {
border-radius: 0
}
.catalog-overflow {
opacity: 0;
pointer-events: none;
background-color: rgba(61, 61, 61, .4);
transition: opacity .2s linear;
position: fixed;
inset: -20px
}
.catalog__top {
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 12px;
margin-bottom: 16px;
display: none
}
.catalog__top-name {
text-align: center;
grid-column: 2/3;
font-size: 24px;
font-weight: 700
}
.catalog__top-btn {
padding: 9px
}
.catalog__top-btn svg {
width: 20px;
height: 20px;
display: block
}
.catalog__list {
grid-auto-flow: row;
row-gap: 8px;
display: grid
}
.catalog__item {
box-sizing: border-box;
cursor: pointer;
background-color: #fff;
border-radius: 16px;
align-items: center;
min-height: 78px;
padding: 4px 32px 4px 16px;
display: flex
}
.catalog__item:after {
width: 12px;
height: 100%;
display: block;
position: absolute;
top: 0;
right: 0
}
.catalog__item:hover {
color: #097359
}
.catalog__item:hover:after {
content: ""
}
.catalog__item:hover .catalog__inner-wrap {
opacity: 1;
pointer-events: auto
}
.catalog__item img {
-o-object-fit: contain;
object-fit: contain;
width: 60px;
height: 70px;
margin-right: 12px;
display: block
}
.catalog__item-name {
font-size: 20px;
font-weight: 700
}
.catalog__inner-wrap {
z-index: -1;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
background-color: #fff;
border-bottom-right-radius: 16px;
width: -moz-max-content;
width: max-content;
min-width: 350px;
height: -moz-max-content;
height: max-content;
min-height: 100%;
padding: 24px 40px 24px 24px;
transition: opacity .2s linear;
position: absolute;
top: 0;
left: 100%
}
.catalog__inner {
box-sizing: border-box;
grid-auto-flow: row;
row-gap: 16px;
display: grid
}
.catalog__link {
color: #3d3d3d
}
.catalog__link:hover {
color: #097359
}
.footer {
box-sizing: border-box;
background-color: #f5f5f5;
border-radius: 60px 60px 0 0
}
.footer .container {
padding: 0 5.56vw
}
.footer__top {
border-bottom: 2px solid #e3e3e3;
justify-content: space-between;
gap: 30px;
margin-bottom: 65px;
padding-bottom: 65px;
display: flex
}
.footer__btn {
margin-bottom: 16px;
font-size: 20px;
font-weight: 700;
transition: color .3s linear
}
.footer__btn svg {
width: 12px;
height: 15px;
transition: transform .3s linear;
display: none
}
.footer__list {
grid-auto-flow: row;
row-gap: 12px;
margin: 0;
padding: 0;
list-style: none;
transition: .3s linear;
display: grid
}
.footer__top-item+.footer__btn {
margin-top: 60px
}
.footer__bottom {
gap: 70px;
display: flex
}
.footer__logo {
margin-right: auto
}
.footer__bottom-item {
width: -moz-max-content;
width: max-content;
max-width: 170px
}
.footer__bottom-name {
margin-bottom: 12px;
font-size: 20px;
font-weight: 700
}
.footer__social {
gap: 15px;
display: flex
}
.footer__social img {
width: 46px;
height: 46px
}
.info-block {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
height: 100%;
padding: 32px;
display: flex
}
.info-block__content {
background-color: #f5f5f5;
border-radius: 24px;
flex-grow: 1
}
.info-block__content ol li {
margin-bottom: 0
}
.info-block__title {
margin: 0 0 12px;
font-size: 24px;
transition: color .3s
}
.info-block__title:hover {
color: #ff7f23
}
.info-block__title a {
color: #3d3d3d;
text-decoration: none;
transition: color .3s
}
.info-block__title a:hover {
color: #ff7f23
}
.info-block__text {
margin-bottom: 22px
}
.info-block__text a {
color: #ff7f23;
text-decoration: none
}
.info-block__text:last-child {
margin-bottom: 0
}
.no-animation {
pointer-events: none
}
.info-block__icon {
background-color: #ff7f23;
border-radius: 12px;
justify-content: center;
align-items: center;
width: 52px;
height: 52px;
margin-bottom: 28px;
display: flex
}
.info-block__list {
margin-top: 32px;
margin-bottom: 0;
padding-left: 25px
}
.info-block__list-item:not(:last-child) {
margin-bottom: 18px
}
.tap-bar {
z-index: 10;
background-color: #fff;
border-radius: 24px 24px 0 0;
justify-content: space-between;
padding: 12px 80px;
display: none;
position: sticky;
bottom: 0;
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.tap-bar__item {
color: #939393
}
.tap-bar__link {
color: inherit;
flex-direction: column;
align-items: center;
font-size: 12px;
font-weight: 600;
display: flex
}
.tap-bar__link svg {
margin-bottom: 4px
}
body.show-catalog .tap-bar__item--catalog,
body.show-menu .tap-bar__item--menu {
color: #ff7f23
}
.breadcrumbs {
-webkit-overflow-scrolling: touch;
padding-top: 20px;
padding-bottom: 20px;
overflow-x: auto
}
.breadcrumbs::-webkit-scrollbar {
background: 0 0;
width: 0;
display: none
}
.breadcrumbs::-webkit-scrollbar-button {
background: 0 0;
width: 0;
display: none
}
.breadcrumbs::-webkit-scrollbar-track {
background: 0 0;
width: 0;
display: none
}
.breadcrumbs::-webkit-scrollbar-thumb {
background: 0 0;
width: 0;
display: none
}
.breadcrumbs__list {
align-items: center;
margin: 0;
padding-left: 0;
display: flex
}
.breadcrumbs__item {
color: #939393;
white-space: nowrap;
align-items: center;
padding-right: 12px;
font-size: 16px;
line-height: 1.3;
list-style: none;
display: flex
}
.breadcrumbs__item:after {
content: "/";
margin-left: 12px
}
.breadcrumbs__item:last-child {
color: #3d3d3d
}
.breadcrumbs__item:last-child:after {
content: none
}
.documents__items {
grid-column-gap: 24px;
grid-row-gap: 44px;
grid-template-columns: repeat(3, 1fr);
display: grid
}
.documents__wrapper {
cursor: pointer;
position: relative
}
.documents__image {
box-sizing: border-box;
border: 4px solid #f5f5f5;
border-radius: 24px;
max-width: 100%;
height: auto
}
.documents__description {
text-align: left;
margin-bottom: 20px
}
.documents__link {
margin-bottom: 20px
}
.documents__wrapper:before {
content: "";
opacity: 0;
pointer-events: none;
background-color: rgba(0, 0, 0, .3215686275);
border-radius: 24px;
width: 100%;
height: 100%;
transition: .3s;
position: absolute;
top: 0;
left: 0
}
.documents__wrapper:hover:before {
opacity: 1;
transform: scale(.98)
}
.documents__zoom {
visibility: hidden;
opacity: 0;
pointer-events: none;
width: 50px;
height: 50px;
transition: .3s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.documents__wrapper:hover .documents__zoom {
visibility: visible;
opacity: 1
}
.menu-mobile {
z-index: 10;
box-sizing: border-box;
background-color: #fff;
max-height: 100vh;
padding: 40px 40px 110px;
display: none;
position: fixed;
inset: 0;
overflow-y: auto
}
.menu-mobile .footer {
background-color: #fff;
border-radius: 0;
padding: 0;
display: block
}
.menu-mobile .container {
padding: 0
}
.menu-mobile .footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 60px;
margin-bottom: 40px;
padding-bottom: 40px
}
.menu-mobile .footer__bottom {
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-columns: 200px 1fr 1fr;
gap: 28px 40px;
display: grid
}
.menu-mobile .footer__logo {
grid-row: 1/-1;
align-items: center;
display: flex
}
.menu-mobile__top {
align-items: center;
margin-bottom: 40px;
display: flex;
position: relative
}
.menu-mobile__top form {
flex-grow: 1
}
.menu-mobile__top>.button {
display: none
}
.menu-mobile__top form:has(input:focus) {
width: 100%;
position: absolute
}
.menu-mobile__phone {
margin-right: 28px;
font-size: 24px;
font-weight: 700;
transition: color .2s linear
}
.menu-mobile__search {
position: relative
}
.menu-mobile__search input {
width: 100%;
height: 40px;
margin-bottom: 0;
padding: 9px 20px
}
.menu-mobile__search input:focus {
background-color: #fff;
border: 1px solid #939393
}
.menu-mobile__search input:focus+.header__search-block {
display: block
}
.menu-mobile__search:after {
content: "";
background-image: url(../img/svg/search-img.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%)
}
.menu-mobile__location {
align-items: center;
margin-bottom: 40px;
font-weight: 700;
display: flex
}
.menu-mobile__location:after {
content: "";
background-image: url(../img/svg/arrow.svg);
background-repeat: no-repeat;
background-size: contain;
width: 12px;
height: 12px;
margin-top: 3px;
margin-left: 4px
}
.filter {
grid-auto-flow: row;
row-gap: 40px;
height: -moz-max-content;
height: max-content;
display: grid
}
.filter__top {
grid-column: 1/-1;
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 12px;
display: none
}
.filter__title {
text-align: center;
grid-column: 2/3;
font-size: 24px;
font-weight: 700
}
.filter__top-btn {
padding: 9px
}
.filter__top-btn svg {
width: 20px;
height: 20px;
display: block
}
.filter__wrap {
grid-auto-flow: row;
row-gap: 40px;
display: grid
}
.filter__item--btns {
grid-auto-flow: row;
row-gap: 8px;
display: grid
}
.filter__item--btns .button {
width: 100%;
min-height: 40px
}
.filter__item--list {
grid-auto-flow: row;
row-gap: 8px;
display: grid
}
.filter__item.is-opened .filter__item-wrap {
display: flex
}
.filter__item.is-opened .filter__more {
display: none
}
.filter__item.is-opened .filter__less {
display: block
}
.filter__item-wrap:nth-of-type(n+9) {
display: none
}
.filter__item-name {
margin-bottom: 20px;
font-weight: 700;
position: relative
}
.filter__category {
align-items: center;
transition: color .1s ease-in;
display: flex
}
.filter__category--base~.filter__category {
margin-left: 28px
}
.filter__category.is-active {
color: #ff7f23;
font-weight: 700
}
.filter__category:hover {
color: #ff7f23
}
.filter__category span {
color: #939393;
margin-left: 8px
}
.filter__item-list {
grid-auto-flow: row;
row-gap: 12px;
display: grid
}
.filter__less,
.filter__more {
color: #939393;
cursor: pointer;
border-bottom: 1px solid #939393;
width: -moz-max-content;
width: max-content;
padding-bottom: 4px;
font-size: 12px
}
.filter__less:hover,
.filter__more:hover {
color: inherit
}
.filter__less {
display: none
}
.switcher {
cursor: pointer;
align-items: center;
width: -moz-max-content;
width: max-content;
display: flex;
position: relative
}
.switcher:before {
content: "";
background-color: #e2e2e2;
border-radius: 50px;
align-self: flex-start;
width: 44px;
height: 24px;
margin-right: 12px;
transition: background-color .2s linear
}
.switcher:after {
content: "";
background-color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
transition: transform .2s linear;
position: absolute;
top: 2px;
left: 2px
}
.switcher:hover:before {
background-color: #cdcdcd
}
.checkbox,
.radio {
cursor: pointer;
align-items: center;
display: flex;
position: relative
}
.checkbox:before,
.radio:before {
content: "";
box-sizing: border-box;
border: 1.5px solid #939393;
border-radius: 4px;
align-self: flex-start;
width: 20px;
height: 20px;
margin-right: 8px
}
.checkbox:after,
.radio:after {
content: "";
background-color: #fff;
border-radius: 2px;
width: 12px;
height: 12px;
transition: background-color .1s linear;
position: absolute;
top: 4px;
left: 4px
}
.checkbox span,
.radio span {
color: #939393;
margin-left: 8px
}
.radio:after,
.radio:before {
border-radius: 50%
}
input:checked+.switcher:before {
background-color: #ff7f23
}
input:checked+.switcher:after {
transform: translateX(20px)
}
input:checked+.checkbox:after,
input:checked+.radio:after {
background-color: #ff7f23
}
.range {
flex-direction: column;
width: 260px;
display: flex
}
.range__control {
color: #9f9f9f;
justify-content: space-between;
margin-bottom: 24px;
display: flex;
position: relative
}
.range__control-item {
white-space: nowrap;
flex-grow: 1;
align-items: center;
display: flex
}
.range__control-item:first-child {
margin-right: 5px
}
.range__control-input {
flex-grow: 1;
margin-left: 8px;
text-align: center;
color: #9f9f9f;
-moz-appearance: textfield;
background-color: #f5f5f5;
border: none;
border-radius: 12px;
width: 70px;
padding: 10px 12px;
font-size: 16px;
line-height: 1.3
}
.range__control-input::-webkit-inner-spin-button {
opacity: 1;
-webkit-appearance: none;
margin: 0
}
.range__control-input::-webkit-outer-spin-button {
opacity: 1;
-webkit-appearance: none;
margin: 0
}
.range__sliders {
min-height: 12px;
margin-bottom: 20px;
position: relative
}
.range__slider::-moz-range-thumb {
cursor: pointer;
-webkit-appearance: none;
pointer-events: all;
background-color: #ff7f23;
border-radius: 50%;
width: 16px;
height: 16px
}
.range__slider::-webkit-slider-thumb {
cursor: pointer;
-webkit-appearance: none;
pointer-events: all;
background-color: #ff7f23;
border-radius: 50%;
width: 16px;
height: 16px
}
.range__slider::-webkit-slider-thumb:hover {
background: #ff7f23
}
.range__slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
pointer-events: none;
background-color: #c6c6c6;
width: 100%;
height: 4px;
position: absolute
}
.range__slider:first-of-type {
z-index: 1;
height: 0;
top: 2px
}
.text-section {
grid-template-columns: 2fr 1fr;
align-items: end;
gap: 130px;
display: grid
}
.text-section__title {
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.text-section__text {
margin-right: 0;
font-size: 24px;
line-height: 1.3
}
.consultation {
padding-top: 40px;
padding-bottom: 100px
}
.consultation .consultation__title {
text-align: center;
color: #3d3d3d;
margin: 0 0 40px;
font-size: 36px;
font-weight: 900;
line-height: normal
}
.consultation__form {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex
}
.consultation__form input {
background-color: #f5f5f5;
border: 0;
border-radius: 8px;
outline: 0;
width: 40%;
padding: 13.5px 12px;
font-size: 16px
}
.consultation__form input::-moz-placeholder {
color: #939393;
font-size: 16px
}
.consultation__form input::placeholder {
color: #939393;
font-size: 16px
}
.consultation__form .button {
white-space: nowrap;
justify-content: center;
align-items: center;
width: 28%;
min-width: -moz-min-content;
min-width: min-content;
padding: 13.5px 12px;
display: flex
}
.consultation__info {
text-align: end;
color: #939393;
margin-top: 16px;
font-size: 11px;
line-height: 1.3
}
.consultation__info--link {
color: #ff7f23;
font-size: 11px;
line-height: 1.3;
text-decoration: none;
position: relative
}
.rating {
color: #939393;
align-items: center;
display: flex
}
.rating:before {
content: "";
background-image: url(../img/svg/star.svg);
background-position: 0;
background-repeat: space;
background-size: 16px 16px;
order: -1;
width: 16px;
height: 16px;
display: block
}
.rating:after {
content: "";
background-image: url(../img/svg/star-gray.svg);
background-position: 0;
background-repeat: space;
background-size: 16px 16px;
order: -1;
width: 16px;
height: 16px;
margin-left: 4px;
margin-right: 8px;
display: block
}
.rating--1:before {
width: 16px
}
.rating--1:after {
width: 76px
}
.rating--2:before {
width: 36px
}
.rating--2:after,
.rating--3:before {
width: 56px
}
.rating--3:after {
width: 36px
}
.rating--4:before {
width: 76px
}
.rating--4:after {
width: 16px
}
.rating--5:before {
width: 76px
}
.rating--5:after {
background-image: url(../img/svg/star.svg);
width: 16px
}
.rating--small:after,
.rating--small:before {
background-size: 12px 12px;
width: 12px;
height: 12px
}
.rating--small.rating--1:before {
width: 28px
}
.rating--small.rating--1:after {
width: 44px
}
.rating--small.rating--2:before {
width: 28px
}
.rating--small.rating--2:after,
.rating--small.rating--3:before {
width: 44px
}
.rating--small.rating--3:after {
width: 28px
}
.rating--small.rating--4:before {
width: 44px
}
.rating--small.rating--4:after {
background-image: url(../img/svg/star.svg);
width: 28px
}
.rating--small.rating--5:before {
width: 44px
}
.rating--small.rating--5:after {
background-image: url(../img/svg/star.svg);
width: 28px
}
.chips {
gap: 16px;
margin-right: 16px;
display: flex
}
.chips__item {
background-color: #e2e2e2;
border-radius: 22px;
align-items: center;
padding: 11px 20px;
display: flex
}
.chips__close {
color: #3d3d3d;
cursor: pointer;
margin-left: 8px
}
.chips__close:hover {
color: #097359
}
.pagination {
width: -moz-max-content;
width: max-content;
margin: 0 auto
}
.more__btn {
min-height: 48px;
margin: 0 auto 20px
}
.pagination-list {
grid-auto-flow: column;
gap: 12px;
display: grid
}
.pagination-item {
color: inherit;
border-color: #e2e2e2;
width: -moz-max-content;
width: max-content;
min-width: 48px;
min-height: 48px;
padding: 8px
}
.pagination-item.is-active {
color: #097359;
border-color: #097359
}
.about-service {
padding-top: 80px
}
.about-service__video {
background-position: center;
background-size: cover;
border-radius: 24px;
justify-content: center;
align-items: center;
min-height: 560px;
display: flex;
position: relative
}
.about-service__video:hover:before {
background-color: rgba(0, 0, 0, .2784313725)
}
.about-service__video:before {
content: "";
border-radius: inherit;
background-color: rgba(0, 0, 0, .1019607843);
transition: background-color .3s ease-in;
position: absolute;
inset: 0
}
.accordion__item {
cursor: pointer;
background-color: #f5f5f5;
border-radius: 24px;
margin-bottom: 16px;
padding: 28px 32px 28px 28px
}
.accordion__item:last-child {
margin-bottom: 0
}
.accordion__item.is-active .accordion__title:after {
transform: translateY(-50%) rotate(180deg)
}
.accordion__item.is-active .accordion__data {
opacity: 1;
pointer-events: auto;
max-height: 100%
}
.accordion__title {
align-items: center;
min-height: 60px;
padding-left: 84px;
font-size: 24px;
display: flex;
position: relative
}
.accordion__title:before {
content: "";
background-image: url(../img/svg/icon-question.svg);
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
width: 63px;
height: 68px;
display: block;
position: absolute;
top: 0;
left: -5px
}
.accordion__title:after {
content: "";
background-image: url(../img/svg/arrow.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
transition: transform .1s linear;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%)
}
.accordion__data {
box-sizing: border-box;
opacity: 0;
pointer-events: none;
max-height: 0;
padding: 0 84px
}
.accordion__data-content {
padding-top: 12px
}
.faq {
padding-top: 40px
}
.accordion__content-group {
margin-bottom: 28px
}
.accordion__content-group:last-child {
margin-bottom: 0
}
.accordion__content-group h3 {
margin-bottom: 16px;
font-size: 16px
}
.accordion__list-title {
margin-bottom: 20px
}
.accordion__img-box {
margin-bottom: 40px
}
.accordion__img-box:last-child {
margin-bottom: 0
}
.accordion__img-box img {
-o-object-fit: contain;
object-fit: contain;
border-radius: 20px;
width: 100%;
height: auto;
margin-top: 12px
}
.accordion__img-box p {
display: flex
}
.accordion__img-box p span {
color: #097359;
margin-right: 8px
}
.accordion__content-table {
border-radius: 16px;
display: grid;
overflow: hidden
}
.accordion__table-row {
border-top: 1px solid #e2e2e2;
grid-template-columns: repeat(3, 1fr);
display: grid
}
.accordion__table-row:first-child .accordion__table-data:first-child {
border-radius: 16px 0 0
}
.accordion__table-row:first-child .accordion__table-data:last-child {
border-radius: 0 16px 0 0
}
.accordion__table-row:last-child {
border-bottom: 1px solid #e2e2e2
}
.accordion__table-row:last-child .accordion__table-data:first-child {
border-radius: 0 0 0 16px
}
.accordion__table-row:last-child .accordion__table-data:last-child {
border-radius: 0 0 16px
}
.accordion__table-head .accordion__table-data {
font-weight: 700
}
.accordion__table-data {
background-color: #fff;
border-left: 1px solid #e2e2e2;
padding: 16px 12px
}
.accordion__table-data:last-child {
border-right: 1px solid #e2e2e2
}
.progress__wrap {
grid-template-columns: 60px 1fr;
-moz-column-gap: 40px;
column-gap: 40px;
display: grid
}
.progress__bar {
position: relative
}
.progress__bar:before {
content: "";
background-color: #f5f5f5;
width: 4px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.progress__line {
background-color: #ff7f23;
width: 4px;
margin: 0 auto;
position: relative
}
.progress__item {
gap: 16px;
display: grid;
position: relative
}
.progress__item--horizontal {
grid-template-columns: 1fr 1fr
}
.progress__item--fix-big {
grid-template-columns: 420px 1fr
}
.progress__item--big-fix {
grid-template-columns: 1fr 420px
}
.progress__item:last-child:after {
content: "";
background-color: #fff;
width: 60px;
height: calc(100% - 60px);
position: absolute;
top: 68px;
left: -100px
}
.progress__item.is-active .progress__num {
color: #fff;
background-color: #ff7f23
}
.progress__item+.progress__item {
margin-top: 32px
}
.progress__item p+p {
margin-top: 22px
}
.progress__num {
color: #939393;
background-color: #f5f5f5;
border: 8px solid #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
font-size: 24px;
transition: background-color .2s linear;
display: flex;
position: absolute;
top: -8px;
left: -108px
}
.progress__card {
background-color: #f5f5f5;
border-radius: 24px;
padding: 28px
}
.progress__card:nth-of-type(3n) {
grid-column: 1/-1
}
.progress__card ul {
margin: 0;
padding-left: 0;
list-style: none
}
.progress__card li {
padding-left: 13px;
position: relative
}
.progress__card li:before {
content: "";
background-color: #097359;
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: 10px;
left: 0
}
.progress__card li+li {
margin-top: 8px
}
.progress__title {
margin-bottom: 20px;
font-size: 24px
}
.progress__name {
margin-bottom: 20px
}
.audio {
border: 1px solid #e2e2e2;
border-radius: 24px;
grid-template-columns: 52px 1fr auto;
align-items: start;
gap: 16px;
height: 62px;
padding: 20px 20px 16px;
display: grid
}
.audio__play {
cursor: pointer
}
.audio__timeline {
justify-content: space-between;
align-self: end;
padding-top: 18px;
display: flex;
position: relative
}
.audio__timeline:before {
content: "";
background-color: #f5f5f5;
border-radius: 3px;
width: 100%;
height: 6px;
position: absolute;
top: 0;
left: 0;
right: 0
}
.audio__line {
background-color: #ff7f23;
border-radius: 3px;
height: 6px;
transition: width 1s linear;
position: absolute;
top: 0;
left: 0
}
.audio__rate {
color: #939393;
cursor: pointer;
background-color: #e2e2e2;
border-radius: 58px;
justify-content: center;
align-items: center;
width: 63px;
height: 44px;
margin-top: 3px;
font-size: 20px;
font-weight: 700;
display: flex
}
.header-lead {
grid-template-columns: repeat(2, minmax(0, 1fr));
-moz-column-gap: 60px;
column-gap: 60px;
padding-top: 76px;
padding-bottom: 120px;
display: grid
}
.header-lead__left {
color: #fff
}
.header-lead__title {
margin-bottom: 28px;
font-size: 54px;
font-weight: 900;
line-height: 1.1
}
.header-lead__subtitle {
margin-bottom: 52px;
margin-right: 100px;
font-size: 24px;
font-weight: 400;
line-height: 34px
}
.header-lead__columns {
justify-content: space-between;
gap: 15%;
max-width: 490px;
margin-bottom: 52px;
display: flex
}
.header-lead__item {
width: -moz-max-content;
width: max-content;
max-width: 128px
}
.header-lead__value {
margin: 0 0 4px;
font-size: 44px;
font-weight: 900;
line-height: 1.2
}
.header-lead__right {
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-columns: 57.5% minmax(0, 1fr);
grid-auto-flow: column;
gap: 12px;
display: grid
}
.card {
color: #939393;
background-color: #fff;
border-radius: 20px;
flex-direction: column;
justify-content: space-between;
padding: 32px;
transition: .5s ease-in-out;
display: flex;
position: relative;
overflow: hidden
}
.card--main {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
grid-row: span 3
}
.card--main:before {
content: "";
border-radius: inherit;
opacity: 0;
background-color: #fff;
transition: opacity .5s ease-in-out;
position: absolute;
inset: 0
}
.card--main:hover {
background-size: 120%
}
.card--main:hover:before {
opacity: .5
}
.card--little {
border-radius: 24px;
justify-content: flex-end;
padding: 24px;
font-size: 20px;
font-weight: 700;
position: relative
}
.card--little:after {
content: "";
opacity: 0;
background-image: url(../img/svg/arrow-card-left.svg);
background-repeat: no-repeat;
background-size: contain;
width: 48px;
height: 46px;
transition: .5s ease-in-out;
position: absolute;
bottom: 32px;
right: 60px
}
.card--little:hover {
color: #fff;
background-color: #ff7f23
}
.card--little:hover:after {
opacity: 1;
transform: translateX(36px)
}
.card__title {
color: #3d3d3d;
font-size: 20px;
font-weight: 700;
position: relative
}
.card__description {
font-size: 24px;
font-weight: 400;
transition: opacity .5s ease-in-out
}
.card__description span {
position: relative
}
.card__description:before {
content: "";
pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, 0) 35%, #fff 70%);
position: absolute;
inset: 0
}
.reasons__examples {
grid-template-columns: 295px 1fr;
-moz-column-gap: 12px;
column-gap: 12px;
display: grid
}
.reasons__lead {
color: #fff;
background-color: #097359;
border-radius: 24px;
align-items: flex-end;
padding: 32px 28px;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
display: flex;
position: relative;
overflow: hidden
}
.reasons__lead:before {
content: "";
background-image: url(../img/svg/reasons-star.svg);
background-repeat: no-repeat;
background-size: contain;
width: 172px;
height: 177px;
transition: transform .2s linear;
position: absolute;
top: 0;
left: 0;
transform: translate3d(-30px, -40px, 0) rotate(-30deg)
}
.reasons__lead:hover:before {
transform: translate3d(10px, 10px, 0) rotate(0)
}
.reasons__lead span {
position: relative
}
.reasons__list {
grid-template-columns: 1fr 1fr;
gap: 20px;
display: grid
}
.reasons__item {
box-sizing: border-box;
background-color: #f5f5f5;
border-radius: 24px;
min-height: 160px;
padding: 28px
}
.reasons__item:hover .reasons__num {
color: #097359
}
.reasons__num {
color: #939393;
margin-bottom: 29px;
font-size: 24px;
font-weight: 700;
transition: color .2s linear
}
.reasons__text {
font-size: 16px
}
.sale__wrap-title {
margin: 0 0 24px;
font-size: 24px;
line-height: 31px
}
.sale__products {
grid-template-columns: repeat(3, minmax(0, 1fr));
-moz-column-gap: 32px;
column-gap: 32px;
margin-bottom: 60px;
display: grid
}
.sale__list {
grid-template-columns: repeat(4, 1fr) 1.25fr;
gap: 20px;
display: grid
}
.sale__item {
box-sizing: border-box;
color: inherit;
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
min-height: 220px;
padding: 28px;
font-size: 24px;
font-weight: 700;
line-height: 31px;
text-decoration: none;
transition: .5s ease-in-out;
display: flex;
position: relative
}
.sale__item:after {
content: "";
opacity: 0;
background-image: url(../img/svg/arrow-card-left.svg);
background-repeat: no-repeat;
background-size: contain;
width: 60px;
height: 57px;
transition: .5s ease-in-out;
position: absolute;
bottom: 24px;
right: 60px
}
.sale__item:hover {
color: #fff;
background-color: #ff7f23
}
.sale__item:hover:after {
opacity: 1;
transform: translateX(36px)
}
.sale__item--green {
color: #fff;
background-color: #097359
}
.sale__item--green:after {
content: none
}
.sale__item-action {
font-size: 20px;
font-weight: 700
}
.sale__item-action:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 22px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 6px
}
.stages__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
display: grid
}
.stages__item {
background-color: #f5f5f5;
border-radius: 24px;
padding: 32px
}
.stages__item:before {
content: "";
background-color: #f5f5f5;
background-repeat: no-repeat;
background-size: contain;
width: 52px;
height: 52px;
margin-bottom: 28px;
display: block
}
.stages__item--message:before {
background-image: url(../img/svg/icon-message.svg)
}
.stages__item--phone:before {
background-image: url(../img/svg/icon-phone.svg)
}
.stages__item--people:before {
background-image: url(../img/svg/icon-people.svg)
}
.stages__item--bag:before {
background-image: url(../img/svg/icon-bag.svg)
}
.stages__item--settings:before {
background-image: url(../img/svg/icon-settings.svg)
}
.stages__item--book:before {
background-image: url(../img/svg/icon-book.svg)
}
.stages__title {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.3
}
.installation__list {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
display: grid
}
.installation__item {
box-sizing: border-box;
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
grid-column: span 2;
justify-content: space-between;
min-height: 280px;
padding: 32px;
display: flex;
position: relative
}
.installation__item:hover .installation__num {
color: #097359
}
.installation__item:nth-child(-n+2) {
grid-column: span 3
}
.installation__item:first-child {
color: #fff;
background-size: cover
}
.installation__item:first-child:hover .installation__num {
color: inherit
}
.installation__item:first-child:before {
content: "";
border-radius: inherit;
pointer-events: none;
background-color: rgba(0, 0, 0, .4);
position: absolute;
inset: 0
}
.installation__item--icon {
padding: 26px 24px;
overflow: hidden
}
.installation__item--icon:hover:after {
transform: rotate(0) translate(0)
}
.installation__item--icon:after {
content: "";
pointer-events: none;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
width: 238px;
height: 192px;
transition: transform .5s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(15deg) translate(60px, 20px)
}
.installation__item--orange {
background-color: #ff7f23
}
.installation__item--orange:after {
background-image: url(../img/svg/calculator.svg)
}
.installation__item--green {
background-color: #097359
}
.installation__item--green:after {
background-image: url(../img/svg/estimates.svg)
}
.installation__num {
margin-bottom: 8px;
font-size: 24px;
font-weight: 700;
transition: color .2s ease-in;
position: relative
}
.installation__title {
font-size: 24px;
font-weight: 700;
position: relative
}
.installation__info {
margin-top: auto;
position: relative
}
.installation__link {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative
}
.installation__link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 22px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 6px
}
.product {
box-sizing: border-box;
border: 1px solid #e2e2e2;
border-radius: 24px;
flex-direction: column;
padding: 20px 28px 28px;
transition: box-shadow .4s ease-in-out;
display: flex
}
.product:hover {
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.product:hover .product__image:after {
opacity: 1
}
.product:hover .product__btns {
opacity: 1;
pointer-events: auto
}
.product--sold .product__image {
opacity: .6
}
.product--sold .product__btns {
color: #f13838;
opacity: 1;
transform: translateY(calc(-100% - 20px))
}
.product__image {
order: -1;
align-items: center;
height: 340px;
display: flex;
position: relative
}
.product__image:after {
content: "";
opacity: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0) 40.59%, #fff 79.71%);
transition: opacity .4s ease-in-out;
position: absolute;
inset: 0
}
.product__image img {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: auto;
max-height: 100%
}
.product__rating {
color: #939393;
margin-bottom: 16px
}
.product__data {
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
margin-top: 12px;
display: flex;
position: relative
}
.product__info {
margin-bottom: 16px
}
.product__title {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
line-height: 31px;
display: block
}
.product__text {
color: #939393;
flex-wrap: wrap;
-moz-column-gap: 4px;
column-gap: 4px;
display: flex
}
.product__text:not(:last-child) {
margin-bottom: 8px
}
.product__price {
color: #ff7f23;
margin-top: auto;
font-size: 24px;
font-weight: 700;
line-height: 31px
}
.product__btns {
opacity: 0;
pointer-events: none;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
width: 100%;
transition: opacity .4s ease-in-out;
display: flex;
position: absolute;
top: 0;
transform: translateY(calc(-100% - 30px))
}
.product__btns .button {
text-align: center;
flex-grow: 1;
justify-content: center;
padding: 8px 15px
}
.product__order {
text-align: center;
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: center;
padding: 32px;
display: flex
}
.product__order .input {
background-color: #fff;
width: 100%;
margin-bottom: 24px
}
.product__order .button {
width: 100%;
margin-bottom: 12px
}
.product__order-title {
margin-bottom: 40px
}
.product__order-info {
margin-bottom: 24px
}
.product__order-sub {
color: #939393;
font-size: 12px
}
.product__order-sub a {
color: #ff7f23
}
.services__list {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px;
display: grid
}
.services__list--page .services__item {
grid-column: span 4
}
.services__item {
box-sizing: border-box;
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
grid-column: span 3;
justify-content: space-between;
min-height: 200px;
padding: 28px;
transition: .4s ease-out;
display: flex
}
.services__item:hover {
color: #fff;
background-color: #ff7f23
}
.services__item:hover .services__info {
color: #fff
}
.services__item:nth-child(-n+5) {
grid-column: span 6
}
.services__item:nth-child(-n+3) {
grid-column: span 4
}
.services__item--green {
background-color: #097359;
padding: 26px 24px;
position: relative;
overflow: hidden
}
.services__item--green:hover {
background-color: #097359
}
.services__item--green:hover:after {
transform: rotate(0) translate(0)
}
.services__item--green:after {
content: "";
pointer-events: none;
background-image: url(../img/svg/settings.svg);
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
width: 179px;
height: 142px;
transition: transform .5s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(15deg) translate(52px, 25px)
}
.services__name {
margin-bottom: 6px;
font-size: 24px
}
.services__info {
color: #939393;
margin-bottom: 10px;
transition: color .4s ease-out
}
.services__data {
margin-top: auto;
font-weight: 700
}
.services__data span:first-child {
margin-right: 6px
}
.services__link {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative
}
.services__link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 22px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 6px
}
.order-call__wrap {
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
border-radius: 24px;
padding: 40px 48px;
transition: .2s ease-out
}
.order-call__wrap:hover {
background-size: auto 105%
}
.order-call__data {
box-sizing: border-box;
background-color: #fff;
border-radius: 24px;
flex-direction: column;
align-items: stretch;
width: 472px;
padding: 40px;
display: flex
}
.order-call__data .section-title {
text-align: center;
margin-bottom: 40px
}
.order-call__data .section-title span {
display: block
}
.order-call__data .input {
margin-bottom: 24px
}
.order-call__data .button {
margin-bottom: 12px
}
.order-call__info {
text-align: center;
margin-bottom: 24px
}
.order-call__personal {
text-align: center;
font-size: 12px
}
.order-call__personal a {
color: #ff7f23
}
.reviews {
padding-bottom: 40px
}
.reviews--page {
padding-bottom: 60px
}
.reviews--page .reviews__list {
grid-template-columns: 1fr 1fr;
gap: 40px;
padding-bottom: 0;
display: grid
}
.reviews--page .reviews__item {
flex-direction: column;
min-height: 480px;
display: flex
}
.reviews--page .reviews__message {
display: block
}
.reviews__top {
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
display: flex
}
.reviews__top .section-title {
margin-bottom: 0
}
.reviews__swiper {
position: relative;
overflow: hidden
}
.reviews__list {
padding-bottom: 20px
}
.reviews__btns {
z-index: 2;
flex-shrink: 0;
grid-template-columns: repeat(2, minmax(0, 76px));
-moz-column-gap: 15px;
column-gap: 15px;
display: grid;
position: relative
}
.reviews__btn {
box-sizing: border-box;
cursor: pointer;
background-image: url(../img/svg/arrow-left.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
border: 1px solid #e2e2e2;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 76px;
height: 48px;
transition: border-color .2s ease-out;
display: flex
}
.reviews__btn--next {
background-image: url(../img/svg/arrow-right.svg)
}
.reviews__btn:hover {
border-color: #097359
}
.reviews__btn.swiper-button-lock {
display: flex
}
.reviews__item {
box-sizing: border-box;
border: 1px solid #e2e2e2;
border-radius: 24px;
min-height: 298px;
padding: 32px;
transition: box-shadow .3s ease-in;
position: relative;
overflow: hidden
}
.reviews__item:hover {
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.reviews__item--video {
color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: 120%;
flex-direction: column;
justify-content: space-between;
display: flex
}
.reviews__item--video:hover .reviews__poster-img {
transform: scale(1.1)
}
.reviews__item--video:before {
content: "";
background-color: rgba(0, 0, 0, .4);
position: absolute;
inset: 0
}
.reviews__item--video .reviews__value {
margin-bottom: 12px
}
.reviews__item--video .reviews__rating {
color: inherit;
font-size: 12px
}
.reviews__poster-img {
z-index: -1;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .3s ease-in;
position: absolute;
inset: 0
}
.reviews__item-btn {
z-index: 1;
transition: transform .3s ease-in;
position: relative
}
.reviews__item-btn:hover {
transform: translate(-5px, -5px)
}
.reviews__value {
color: inherit;
flex-wrap: wrap;
align-items: center;
row-gap: 5px;
margin-top: auto;
display: flex;
position: relative
}
.reviews__date {
margin-right: 16px
}
.reviews__rating {
color: #939393;
align-items: center
}
.reviews__rating:after {
margin-right: 12px
}
.reviews__author {
color: inherit;
position: relative
}
.reviews__author--with-icon {
grid-template-columns: 48px 1fr;
grid-auto-flow: row;
-moz-column-gap: 20px;
column-gap: 20px;
margin-bottom: 28px;
display: grid
}
.reviews__author-icon {
color: #e2e2e2;
background-color: #f5f5f5;
border-radius: 50%;
grid-row: span 2;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
font-size: 24px;
font-weight: 700;
display: flex
}
.reviews__author-name {
margin-bottom: 4px;
font-weight: 700
}
.reviews__name {
margin-bottom: 12px;
font-size: 24px
}
.reviews__message {
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 24px;
line-height: 1.3em;
display: -webkit-box;
overflow: hidden
}
.about-company {
position: relative
}
.about-company:before {
content: "";
z-index: -1;
background-color: #f5f5f5;
border-radius: 60px 60px 0 0;
height: 246px;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.about-company__wrap {
grid-template-columns: minmax(0, 1fr) 300px;
-moz-column-gap: 32px;
column-gap: 32px;
min-height: 460px;
display: grid
}
.about-company__video {
background-position: center;
background-size: cover;
border-radius: 24px;
justify-content: center;
align-items: center;
display: flex;
position: relative
}
.about-company__video:hover:before {
background-color: rgba(0, 0, 0, .2784313725)
}
.about-company__video:before {
content: "";
border-radius: inherit;
background-color: rgba(0, 0, 0, .1019607843);
transition: background-color .3s ease-in;
position: absolute;
inset: 0
}
.about-company__green {
box-sizing: border-box;
color: #fff;
background-color: #097359;
border-radius: 24px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 24px;
display: flex;
position: relative;
overflow: hidden
}
.about-company__green:hover:after {
transform: translateX(0)
}
.about-company__green:after {
content: "";
background-image: url(../img/svg/hand.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 196px;
height: 171px;
transition: transform .4s ease-in-out;
position: absolute;
top: 55px;
left: 0;
transform: translateX(-70px)
}
.about-company__description {
margin-bottom: 40px;
font-size: 24px;
font-weight: 700
}
.about-company__link {
font-size: 20px;
font-weight: 700
}
.about-company__link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 22px;
margin-left: 5px;
display: inline-block;
position: relative;
top: 6px
}
.blog {
background-color: #f5f5f5;
border-radius: 0 0 60px 60px
}
.blog__list {
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 40px;
display: grid
}
.blog__item {
grid-template-columns: 240px minmax(0, 1fr);
gap: 20px;
display: grid
}
.blog__item:hover .blog__detail,
.blog__item:hover .blog__image:before {
opacity: 1
}
.blog__item:hover .blog__title {
color: #ff7f23
}
.blog__item--green {
color: #fff;
background-color: #097359;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 28px;
font-size: 24px;
font-weight: 700;
display: flex;
position: relative;
overflow: hidden
}
.blog__item--green:hover:after {
transform: rotate(0) translate(0)
}
.blog__item--green:after {
content: "";
pointer-events: none;
background-image: url(../img/svg/information.svg);
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
width: 241px;
height: 194px;
transition: transform .5s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(20deg) translate(50px, 15px)
}
.blog__image {
box-sizing: border-box;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 24px;
align-items: flex-end;
height: 240px;
padding: 28px 24px;
display: flex;
position: relative
}
.blog__image:before {
content: "";
border-radius: inherit;
opacity: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .7019607843) 100%);
transition: opacity .2s ease-out;
position: absolute;
inset: 0
}
.blog__content {
flex-direction: column;
justify-content: center;
display: flex
}
.blog__tag-list {
flex-wrap: wrap;
margin-bottom: 8px;
display: flex
}
.blog__tag-item {
color: #fff;
background-color: #ff7f23;
border-radius: 8px;
align-items: center;
height: 24px;
margin-right: 8px;
padding: 0 8px;
font-size: 12px;
display: flex
}
.blog__title {
margin-bottom: 16px;
font-size: 24px;
transition: opacity .2s ease-out
}
.blog__description {
color: #939393;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3em;
display: -webkit-box;
overflow: hidden
}
.blog__detail {
color: #fff;
opacity: 0;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
width: 100%;
transition: opacity .2s ease-out;
display: flex;
position: relative
}
.blog__link {
font-weight: 700
}
.blog__link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 14px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 2px
}
.blog__more-link {
font-size: 20px;
font-weight: 700
}
.blog__more-link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 22px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 6px
}
.about-texts {
flex-wrap: wrap;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
display: grid
}
.about-texts__item {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
padding: 28px;
display: flex
}
.about-texts__item--big {
background-color: #097359;
flex: 0 100%;
grid-column: 1/-1;
gap: 35px;
padding: 30px 28px
}
.about-texts__title {
color: #939393;
font-size: 24px;
line-height: 1.3
}
.about-texts__title--white {
color: #fff;
font-weight: 700
}
.about-texts__text {
color: #3d3d3d;
margin-top: 20px;
font-size: 16px
}
.about-company-video {
padding-top: 19px
}
.about-company-video:before {
display: none
}
.about-company-video .about-company__video {
height: 100%;
min-height: 580px
}
.about-requisites {
flex-wrap: wrap;
gap: 20px;
padding-top: 80px;
display: flex
}
.about-requisites__item {
background-color: #f5f5f5;
border-radius: 24px;
width: 100%;
max-width: calc(100% - 570px);
padding: 40px
}
.about-requisites__item--small {
width: 390px;
max-width: 390px
}
.about-requisites__item--orange {
background-color: #ff7f23
}
.about-requisites__item--details .about-requisites__text:not(:last-child) {
margin-bottom: 16px
}
.about-requisites__text--white {
color: #fff
}
.about-requisites__text:not(:last-child) {
margin-bottom: 20px
}
.about-requisites__title {
color: #3d3d3d;
margin-bottom: 32px;
font-size: 20px;
line-height: 1.3
}
.guarantee {
gap: 20px;
display: flex
}
.guarantee__text {
color: #fff;
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.3
}
.guarantee__link {
color: #fff;
text-decoration: none
}
.guarantee__content {
flex-direction: column;
justify-content: space-between;
gap: 20px;
display: flex
}
.guarantee__title {
color: #097359;
margin: 0 0 40px;
font-size: 24px;
line-height: 1.3
}
.guarantee__description {
color: #3d3d3d;
font-size: 16px;
line-height: 1.3
}
.guarantee__description:not(:last-child) {
padding-bottom: 20px
}
.guarantee__block {
background-color: #f5f5f5;
border-radius: 24px;
padding: 28px
}
.guarantee__block--green {
background-color: #097359;
border-radius: 24px;
flex-direction: column;
flex: 0 0 324px;
justify-content: space-between;
padding: 30px 28px;
display: flex
}
.promotion {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
display: grid
}
.promotion__item--no-image {
background-color: #f5f5f5;
border-radius: 24px
}
.promotion__item--no-image .promotion__text {
padding: 0
}
.promotion__item--no-image .promotion__text .promotion__title {
margin-bottom: 32px
}
.promotion__item--no-image .promotion__wrapper {
padding: 32px
}
.promotion__item {
flex-direction: column;
height: 100%;
display: flex
}
.promotion__text {
background-color: #f5f5f5;
border-radius: 24px;
flex-grow: 1;
margin-bottom: 8px;
padding: 28px 32px
}
.promotion__title {
margin: 0 0 12px;
font-size: 24px;
transition: color .2s
}
.promotion__title:hover {
color: #ff7f23
}
.promotion__title a {
color: #3d3d3d;
text-decoration: none;
transition: color .2s
}
.promotion__title a:hover {
color: #ff7f23
}
.promotion__description {
margin: 0
}
.promotion__list {
padding-left: 25px
}
.promotion__list-item {
margin-bottom: 18px
}
.promotion__image {
width: 100%
}
.promotion__image img {
-o-object-fit: cover;
object-fit: cover;
border-radius: 24px;
max-width: 100%;
height: auto;
min-height: 260px
}
.promotion__icon {
background-color: #ff7f23;
border-radius: 12px;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
margin-bottom: 28px;
display: flex
}
.how-place-order {
flex-direction: column;
gap: 32px;
display: flex
}
.how-place-order__step {
align-items: flex-start;
gap: 40px;
display: flex;
position: relative
}
.how-place-order__step:after {
content: "";
background-color: #ff7f23;
width: 4px;
height: calc(100% - 43px);
position: absolute;
top: 68px;
left: 28px
}
.how-place-order__step:last-child:after {
display: none
}
.how-place-order__number {
color: #fff;
background-color: #ff7f23;
border-radius: 50px;
flex-direction: column;
flex: 0 0 60px;
justify-content: center;
align-items: center;
max-width: 40px;
height: 40px;
padding: 10px;
font-size: 24px;
font-weight: 700;
display: flex
}
.how-place-order__wrap {
gap: 16px;
display: flex
}
.how-place-order__content {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
flex: 1 0 0;
align-self: stretch;
align-items: flex-start;
gap: 20px;
padding: 28px;
display: flex
}
.how-place-order__title {
color: #3d3d3d;
font-size: 24px;
line-height: 1.3
}
.how-place-order__title--sub {
font-size: 16px
}
.how-place-order__description {
color: #666;
font-size: 16px
}
.how-place-order__list {
margin: 0;
padding: 0
}
.how-place-order__list li {
color: #3d3d3d;
padding-left: 12px;
font-size: 16px;
line-height: 1.3;
list-style: none;
position: relative
}
.how-place-order__list li:before {
content: "";
background-color: #097359;
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: .5em;
left: 0
}
.how-place-order__list li:not(:last-child) {
padding-bottom: 8px
}
.support-center {
flex-direction: column;
gap: 80px;
padding-bottom: 60px;
display: flex
}
.support-center__blocks {
flex-wrap: wrap;
gap: 20px;
display: flex
}
.support-center__block {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: calc(33.333% - 70px);
padding: 28px;
display: flex
}
.support-center__block--big {
flex-direction: row;
justify-content: start;
gap: 28px;
width: 100%;
max-width: 100%;
padding: 24px 32px
}
.support-center__image {
-o-object-fit: contain;
object-fit: contain;
width: 52px;
height: 52px;
display: block
}
.support-center__content {
flex-direction: column;
display: flex
}
.support-center__title {
color: #3d3d3d;
margin-bottom: 12px;
font-size: 20px;
line-height: 1.3
}
.support-center__title--sub {
margin-bottom: 39px;
font-size: 16px
}
.support-center__text {
color: #3d3d3d;
font-size: 16px;
line-height: 1.3
}
.support-consultation {
gap: 20px;
display: flex
}
.support-consultation__form {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 24px;
width: 100%;
max-width: 436px;
padding: 32px
}
.support-consultation__form .consultation__title {
margin: 0 0 28px;
font-size: 24px
}
.support-consultation__form .consultation__form {
flex-direction: column;
gap: 24px
}
.support-consultation__form .consultation__form .button {
width: 100%;
padding: 8px 12px
}
.support-consultation__form .consultation__form input {
width: 100%
}
.support-consultation__form .consultation__info {
text-align: center
}
.support-consultation__content {
background-color: #097359;
border-radius: 24px;
flex-direction: column;
flex: 1 0 0;
justify-content: space-between;
padding: 50px 40px;
display: flex
}
.support-consultation__text {
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.3
}
.partners {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
display: grid
}
.partners__item {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 24px;
align-items: center;
padding: 19px 23px;
transition: box-shadow .3s linear;
display: flex
}
.partners__item:hover {
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.partners__image {
-o-object-fit: contain;
object-fit: contain;
width: 80px;
height: 80px;
margin-right: 20px;
display: block
}
.partners__title {
color: #3d3d3d;
margin-bottom: 4px;
font-size: 20px;
line-height: 1.3
}
.partners__text {
color: #939393;
font-size: 16px;
line-height: 1.3
}
.legal-data {
gap: 20px;
display: flex
}
.legal-data__item {
background-color: #f5f5f5;
border-radius: 24px;
width: 100%;
max-width: 360px;
padding: 40px
}
.legal-data__item--big {
max-width: 100%
}
.legal-data__title {
color: #3d3d3d;
margin-bottom: 32px;
font-size: 20px;
line-height: 1.3
}
.legal-data__text {
color: #3d3d3d;
font-size: 16px;
line-height: 1.3
}
.legal-data__text:not(:last-child) {
margin-bottom: 16px
}
.delivery {
grid-gap: 20px;
grid-template-columns: calc(61.5% - 10px) calc(38.5% - 10px);
display: grid
}
.delivery__item {
flex-direction: column;
height: 100%;
display: flex
}
.refund {
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
display: grid
}
.refund__item {
flex-direction: column;
height: 100%;
display: flex
}
.agreement-desc {
margin-bottom: 13px
}
.stock-card-block {
align-items: stretch;
gap: 20px;
display: flex
}
.stock-card-text {
flex: 50%;
height: auto
}
.stock-card-image {
flex: 50%;
align-items: stretch;
height: auto
}
.stock-card-image img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
min-height: 330px
}
.customers {
flex-wrap: wrap;
gap: 20px;
display: flex
}
.customers__item {
color: #3d3d3d;
background-color: #f5f5f5;
border-radius: 24px;
flex: 0 calc(33.333% - 78px);
align-items: center;
padding: 40px 32px;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
display: flex
}
.customers__image {
-o-object-fit: contain;
object-fit: contain;
height: 60px;
margin-right: 32px
}
.catalog-page,
.catalog-page__services {
padding-top: 40px
}
.catalog-page__title {
margin-bottom: 60px;
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.catalog-page__wrap {
grid-template-columns: 260px 1fr;
gap: 40px;
display: grid
}
.catalog-page__wrap .sale__products {
gap: 16px
}
.catalog-page__wrap .product {
padding: 8px 20px 20px
}
.catalog-page__wrap .product__image {
height: 280px
}
.catalog-page__sale .product__data-list {
display: none
}
.catalog-page__top {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
row-gap: 12px;
margin-bottom: 32px;
display: flex
}
.catalog-page__top .select {
margin-right: 16px
}
.catalog-page__filters-btn {
background-color: #f5f5f5;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin-right: auto;
display: none
}
.catalog-page__seo {
grid-template-columns: 380px 1fr;
grid-auto-flow: row;
gap: 20px;
display: grid
}
.catalog-page__seo-item {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
padding: 28px;
font-size: 24px;
display: flex
}
.catalog-page__seo-item:first-child {
color: #fff;
background-color: #097359;
grid-row: 1/3;
padding: 30px 28px;
font-weight: 700
}
.catalog-page__seo-item:first-child .catalog-page__seo-name {
color: inherit
}
.catalog-page__seo-item:first-child .catalog-page__seo-text {
font-size: inherit
}
.catalog-page__seo-name {
color: #097359;
margin-bottom: 40px;
font-weight: 700
}
.catalog-page__seo-text {
font-size: 16px
}
.product-page {
grid-template-columns: 320px 1fr 1fr;
gap: 40px;
padding-top: 40px;
padding-bottom: 40px;
display: grid
}
.product-page__slider {
overflow: hidden
}
.product-page__slider-top {
margin-bottom: 20px
}
.product-page__slider-top .swiper-slide img {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: auto;
max-height: 100%
}
.product-page__slider-bottom .swiper-slide {
cursor: pointer;
opacity: .4;
width: 60px;
height: 60px
}
.product-page__slider-bottom .swiper-slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.product-page__slider-bottom .swiper-slide-thumb-active {
opacity: 1
}
.product-page__title {
margin-bottom: 20px;
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.product-page__about {
color: #939393;
flex-wrap: wrap;
margin-bottom: 32px;
display: flex
}
.product-page__rating {
margin-right: 16px
}
.product-page__rating-count {
margin-right: 28px
}
.product-page__descr {
margin-bottom: 32px
}
.product-page__list {
grid-auto-flow: row;
row-gap: 8px;
display: grid
}
.product-page__list dl {
justify-content: space-between;
align-items: flex-end;
margin: 0;
display: flex;
position: relative
}
.product-page__list dl:nth-child(n+7) {
display: none
}
.product-page__list dl:before {
content: "";
border-bottom: 1px dotted #939393;
position: absolute;
bottom: 4px;
left: 0;
right: 0
}
.product-page__list dd,
.product-page__list dt {
background-color: #fff;
position: relative
}
.product-page__list dt {
padding-right: 3px
}
.product-page__list dd {
margin-left: 10px;
padding-left: 3px
}
.product-page__link {
color: #097359;
font-weight: 700;
display: none
}
.product-page__link:nth-child(n+8) {
display: block
}
.product-page__price {
border-radius: 24px;
margin-bottom: 28px;
padding: 40px;
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.product-page__price .button {
width: 100%;
margin-bottom: 8px
}
.product-page__price .button:last-of-type {
margin-bottom: 0
}
.product-page__price-line {
flex-wrap: wrap;
font-size: 36px;
font-weight: 900;
line-height: 1.2;
display: flex
}
.product-page__price-line span {
white-space: nowrap;
margin-bottom: 28px
}
.product-page__new-price {
color: #ff7f23;
margin-right: 20px
}
.product-page__old-price {
color: #939393;
text-decoration: line-through
}
.product-page__delivery {
background-color: #f5f5f5;
border-radius: 24px;
align-items: center;
padding: 20px 24px;
display: flex
}
.product-page__delivery:before {
content: "";
background-color: #ff7f23;
background-image: url(../img/svg/vectortruck.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 28px 20px;
border-radius: 12px;
flex-shrink: 0;
width: 52px;
height: 52px;
margin-right: 20px;
display: block
}
.product-page__delivery-data {
grid-auto-flow: row;
row-gap: 4px;
display: grid
}
.product-tabs {
padding-top: 40px;
padding-bottom: 40px
}
.product-tabs__list {
-webkit-overflow-scrolling: touch;
grid-template-columns: repeat(5, 1fr);
display: grid;
overflow-x: auto
}
.product-tabs__list::-webkit-scrollbar {
background: 0 0;
width: 0;
display: none
}
.product-tabs__list::-webkit-scrollbar-button {
background: 0 0;
width: 0;
display: none
}
.product-tabs__list::-webkit-scrollbar-track {
background: 0 0;
width: 0;
display: none
}
.product-tabs__list::-webkit-scrollbar-thumb {
background: 0 0;
width: 0;
display: none
}
.product-tabs__item {
text-align: center;
cursor: pointer;
border-bottom: 1px solid #e2e2e2;
padding: 0 5px 16px;
transition: .2s linear
}
.product-tabs__item:hover {
color: #097359;
border-color: #097359
}
.product-tabs__data-item {
margin-top: 32px;
display: none
}
.product-tabs__data-item .product-page__list {
max-width: 500px
}
.product-tabs__data-item .product-page__list dl:nth-child(n+7) {
display: flex
}
.product-tabs__data-item .documents__item {
box-sizing: border-box
}
.product-tabs__radio:first-of-type:checked~.product-tabs__list .product-tabs__item:first-of-type {
color: #097359;
border-color: #097359
}
.product-tabs__radio:first-of-type:checked~.product-tabs__data .product-tabs__data-item:first-of-type {
display: block
}
.product-tabs__radio:nth-of-type(2):checked~.product-tabs__list .product-tabs__item:nth-of-type(2) {
color: #097359;
border-color: #097359
}
.product-tabs__radio:nth-of-type(2):checked~.product-tabs__data .product-tabs__data-item:nth-of-type(2) {
display: block
}
.product-tabs__radio:nth-of-type(3):checked~.product-tabs__list .product-tabs__item:nth-of-type(3) {
color: #097359;
border-color: #097359
}
.product-tabs__radio:nth-of-type(3):checked~.product-tabs__data .product-tabs__data-item:nth-of-type(3) {
display: block
}
.product-tabs__radio:nth-of-type(4):checked~.product-tabs__list .product-tabs__item:nth-of-type(4) {
color: #097359;
border-color: #097359
}
.product-tabs__radio:nth-of-type(4):checked~.product-tabs__data .product-tabs__data-item:nth-of-type(4) {
display: block
}
.product-tabs__radio:nth-of-type(5):checked~.product-tabs__list .product-tabs__item:nth-of-type(5) {
color: #097359;
border-color: #097359
}
.product-tabs__radio:nth-of-type(5):checked~.product-tabs__data .product-tabs__data-item:nth-of-type(5) {
display: block
}
.product-page__images {
grid-auto-flow: column;
justify-content: start;
gap: 32px;
display: grid
}
.product-page__docname {
flex-wrap: wrap;
gap: 12px 8px;
margin-top: 20px;
font-weight: 700;
display: flex
}
.product-page__text {
grid-template-columns: 392px 1fr;
-moz-column-gap: 68px;
column-gap: 68px;
display: grid
}
.product-page__article-name {
margin-bottom: 20px;
font-size: 20px
}
.product-page__article-text p {
margin-bottom: 22px
}
.product-page__article-text p:last-of-type {
margin-bottom: 0
}
.product-review,
.product-sale {
padding-top: 40px;
overflow: hidden
}
.product-sale .sale__products {
margin-bottom: 0
}
.product-review {
padding-bottom: 60px
}
.product-review .section-title {
font-size: 28px;
line-height: 1.3
}
.product-review .reviews__list {
padding-bottom: 0;
display: flex
}
.product-review .reviews__btns {
display: none
}
.product-review .reviews__btns button {
border-color: #097359
}
.choose {
padding-bottom: 0
}
.choose__descr {
color: #fff;
background-color: #ff7f23;
border-radius: 24px;
flex-direction: column;
row-gap: 26px;
margin-bottom: 24px;
padding: 28px;
font-size: 20px;
font-weight: 700;
display: flex
}
.choose__descr a {
white-space: nowrap
}
.choose__content {
grid-template-columns: 36.2% 1fr;
gap: 24px 20px;
display: grid
}
.choose__content-item {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
padding: 40px;
display: flex;
position: relative
}
.choose__content-icon {
width: 67px;
height: 72px;
margin-bottom: 30px
}
.choose__item-title {
color: #3d3d3d;
margin-bottom: 9px;
font-size: 20px;
font-weight: 700
}
.choose__mini-container {
background-color: rgba(0, 0, 0, 0);
grid-template: repeat(4, 1fr)/repeat(2, 1fr);
gap: 12px;
padding: 0;
display: grid
}
.choose__mini-item {
background-color: #f5f5f5;
border-radius: 20px;
align-items: center;
padding: 24px 28px;
display: flex
}
.choose__mini-item p {
display: flex
}
.choose__mini-item span {
color: #939393;
margin-right: 16px;
font-weight: 700
}
.manual {
box-sizing: border-box;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
display: grid
}
.manual__item {
background-color: #f5f5f5;
border-radius: 24px;
align-items: center;
padding: 32px;
font-size: 20px;
font-weight: 700;
display: flex
}
.manual__item img {
margin-right: 32px
}
.principle {
padding-top: 20px
}
.principle h1 {
margin-top: 20px;
margin-bottom: 40px;
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.principle__descr {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
row-gap: 22px;
margin-bottom: 52px;
padding: 20px 24px;
display: flex
}
.principle__descr h2 {
font-size: 16px
}
.principle__descr a {
color: #ff7f23
}
.principle__content-wrapper {
grid-template-columns: 360px 1fr;
gap: 32px;
display: grid;
position: relative
}
.principle__aside {
flex-shrink: 0;
align-self: flex-start;
display: flex;
position: sticky;
top: 20px
}
.principle__aside-scroll:before {
content: "";
background-color: #e2e2e2;
border-radius: 40px;
width: 4px;
height: 100%;
margin-right: 12px;
display: block;
position: relative
}
.principle__aside-scroll:after {
content: "";
background-color: #ff7f23;
border-radius: 40px;
width: 4px;
height: 25%;
position: absolute;
top: 0
}
.principle__aside-links {
flex-direction: column;
gap: 20px;
display: flex
}
.principle__aside-links a {
transition: .3s;
display: block
}
.principle__aside-links a:hover {
color: #ff7f23
}
.principle__content-group {
margin-top: -40px;
margin-bottom: 80px;
padding-top: 40px
}
.principle__content-group h2 {
margin-bottom: 32px;
font-size: 20px
}
.principle__content-group h3 {
margin-bottom: 20px;
font-size: 16px
}
.principle__content-group img {
border: 1px solid #e2e2e2;
border-radius: 20px;
width: 100%;
height: auto;
margin-bottom: 20px
}
.principle__content-group ul {
flex-direction: column;
padding: 0;
list-style: none;
display: flex
}
.principle__content-group ul li {
margin-bottom: 12px;
display: flex
}
.principle__content-group ul li:last-child {
margin-bottom: 0
}
.principle__content-group p {
margin-bottom: 22px
}
.principle__content-group p:last-child,
.principle__content-group:last-child {
margin-bottom: 0
}
.principle__content-group .principle__img-text {
margin-bottom: 40px
}
.principle__content-group .principle__list-title {
margin-bottom: 16px
}
.principle__img-box {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
display: grid
}
.principle__img-box img {
-o-object-fit: contain;
object-fit: contain;
height: 100%;
margin: 0
}
.principle__dotted-list li:before {
content: "";
background-color: #097359;
border-radius: 100%;
flex-shrink: 0;
width: 5px;
height: 5px;
margin-top: 7px;
margin-right: 12px;
display: block
}
.principle__paragraph-container {
flex-direction: column;
gap: 22px;
margin-bottom: 20px;
display: flex
}
.principle__paragraph-container p {
margin: 0
}
.principle__paragraph-container a {
color: #ff7f23
}
.principle__paragraph-bold {
color: #000;
font-weight: 700
}
.principle__content-subgroup {
margin-bottom: 32px
}
.principle__content-subgroup:last-child {
margin-bottom: 0
}
.principle__numbered-list {
padding: 0;
list-style: none
}
.principle__numbered-list li {
align-items: start;
margin-bottom: 12px;
display: flex
}
.principle__numbered-list li:last-child {
margin-bottom: 0
}
.principle__numbered-list li span {
color: #097359;
margin-right: 12px
}
.principle__numbered-list li:before {
display: none
}
.principle__tel-link {
white-space: nowrap
}
.principle__price-link {
color: #097359;
align-items: center;
font-weight: 700;
display: flex
}
.principle__price-link:after {
content: "";
background-image: url(../img/svg/arrow-card-right-green.svg);
background-size: contain;
width: 14px;
height: 12px;
margin-left: 9px;
display: inline-block
}
.principle__img-group h2 {
margin-bottom: 32px;
font-size: 20px
}
.principle__img-group .principle__img-text {
margin-bottom: 32px
}
.principle__img-subgroup {
margin-top: 32px
}
.principle__img-subgroup h2 {
margin-bottom: 16px;
font-size: 16px
}
.principle__img-subgroup p {
margin-bottom: 12px
}
.principle__img-subgroup span {
color: #097359;
margin-right: 8px
}
.principle__subgroup-item {
margin-bottom: 40px
}
.principle__subgroup-item img {
width: 100%;
height: auto
}
.principle__subgroup-item:last-child {
margin-bottom: 0
}
.principle__content-text {
margin-top: 32px
}
.text-section__card {
box-sizing: border-box;
color: #fff;
background-color: #097359;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
min-height: 192px;
padding: 20px 24px;
font-size: 24px;
font-weight: 700;
text-decoration: none;
display: flex;
position: relative
}
.text-section__card a {
align-items: center;
font-size: 16px;
display: flex
}
.text-section__card a:before {
content: "";
background: url(../img/svg/download-icon-white.svg) no-repeat;
width: 20px;
height: 20px;
margin-right: 8px;
display: block
}
.text-section__card:before {
content: "";
background: url(../img/svg/gost-white.svg) 0 0/cover no-repeat;
width: 100px;
height: 75px;
position: absolute;
bottom: 20px;
right: 20px
}
.glossarium {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding-top: 40px;
display: grid
}
.glossarium__card {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
gap: 12px;
padding: 20px 24px 24px;
display: flex
}
.glossarium__card h2 {
font-size: 20px;
font-weight: 700
}
.technology {
padding-top: 40px
}
.technology h1 {
font-size: 40px
}
.technology__content {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
display: grid
}
.technology__content div {
background-color: #f5f5f5;
border-radius: 24px;
padding: 32px
}
.technology__content img {
margin-bottom: 28px
}
.technology__content h2 {
margin-bottom: 12px
}
.technology__content p {
margin-bottom: 23px
}
.technology__content p:last-child {
margin-bottom: 0
}
.materials {
padding-top: 40px
}
.materials h1 {
margin-bottom: 40px;
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.materials a {
color: #ff7f23
}
.materials__descr {
background-color: #f5f5f5;
border-radius: 24px;
margin-bottom: 32px;
padding: 20px 24px
}
.materials__content-row {
grid-template-columns: 1fr 432px;
gap: 8px;
margin-bottom: 32px;
display: grid
}
.materials__content-row:last-child {
margin-bottom: 0
}
.materials__content-row img {
-o-object-fit: cover;
object-fit: cover;
border: 1px solid #e2e2e2;
border-radius: 24px;
width: 100%;
height: 100%
}
.materials__row-descr {
background-color: #f5f5f5;
border-radius: 24px;
padding: 28px 28px 32px
}
.materials__row-descr h2 {
margin-bottom: 12px
}
.materials__row-descr p {
margin-bottom: 22px
}
.materials__row-descr p:last-child {
margin-bottom: 0
}
.blog-page {
padding-top: 20px
}
.blog-page__title {
margin-bottom: 24px
}
.blog-page__btn-list {
flex-wrap: wrap;
align-items: center;
display: flex
}
.blog-page__btn-list button {
color: #3d3d3d;
background-color: #e2e2e2;
border: none;
border-radius: 58px;
margin-right: 8px;
padding: 11px 20px;
font-weight: 700;
display: inline-block
}
.blog-page__btn-list button:last-child {
margin-right: 0
}
.blog-page__btn-list .is-active {
color: #fff;
background-color: #097359
}
.blog-page__content {
grid-template-columns: repeat(2, 1fr);
gap: 40px 52px;
margin-top: 52px;
margin-bottom: 40px;
display: grid
}
.blog-page__content-item:hover .blog-page__item-title {
color: #ff7f23
}
.blog-page__content-item:hover .blog-page__img-box:before,
.blog-page__content-item:hover .blog-page__img-info {
opacity: 1
}
.blog-page__img-box {
margin-bottom: 20px;
position: relative
}
.blog-page__img-box img {
border-radius: 24px;
width: 100%;
height: auto
}
.blog-page__img-box:before {
content: "";
opacity: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%);
border-radius: 24px;
transition: opacity .2s ease-out;
position: absolute;
inset: 0
}
.blog-page__img-info {
color: #fff;
opacity: 0;
justify-content: space-between;
align-items: center;
width: calc(100% - 48px);
transition: opacity .2s ease-out;
display: flex;
position: absolute;
bottom: 28px;
left: 24px
}
.blog-page__img-info a:last-child {
align-items: center;
font-weight: 700;
display: flex
}
.blog-page__img-info a:last-child:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-left: 8px;
display: inline-block
}
.blog-page__item-category {
align-items: center;
margin-bottom: 8px;
display: flex
}
.blog-page__item-category div {
color: #fff;
background-color: #ff7f23;
border-radius: 8px;
margin-right: 8px;
padding: 4px 8px;
font-size: 12px
}
.blog-page__item-category div:last-child {
margin-right: 0
}
.blog-page__item-title {
margin-bottom: 16px;
font-size: 24px;
transition: color .2s ease-out
}
.blog-page__item-text {
color: #939393;
-webkit-line-clamp: 7;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden
}
.portfolio {
background-color: #f5f5f5;
border-radius: 60px
}
.portfolio--page {
background-color: rgba(0, 0, 0, 0);
border-radius: 0
}
.portfolio--page .portfolio__list {
gap: 40px
}
.portfolio__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 52px 60px;
display: grid
}
.portfolio__item {
box-sizing: border-box
}
.portfolio__item:hover .portfolio__image .portfolio__image-details,
.portfolio__item:hover .portfolio__image:before {
opacity: 1
}
.portfolio__item:hover .portfolio__title {
color: #ff7f23
}
.portfolio__item--green {
color: #fff;
background-color: #097359;
border-radius: 24px;
flex-direction: column;
justify-content: space-between;
height: -moz-max-content;
height: max-content;
min-height: 280px;
padding: 28px;
display: flex;
position: relative;
overflow: hidden
}
.portfolio__item--green:hover:after {
transform: rotate(0) translate(0)
}
.portfolio__item--green:hover .portfolio__title {
color: inherit
}
.portfolio__item--green:after {
content: "";
pointer-events: none;
background-image: url(../img/svg/blocknote.svg);
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: contain;
width: 227px;
height: 185px;
transition: transform .5s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(15deg) translate(70px, 50px)
}
.portfolio__item--green .portfolio__link {
z-index: 1;
font-size: 20px;
position: relative
}
.portfolio__item--green .portfolio__link:after {
height: 20px;
top: 5px
}
.portfolio__image {
box-sizing: border-box;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 24px;
align-items: flex-end;
min-height: 280px;
margin-bottom: 20px;
padding: 32px;
display: flex;
position: relative
}
.portfolio__image:before {
content: "";
border-radius: inherit;
opacity: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%);
transition: opacity .2s ease-out;
position: absolute;
inset: 0
}
.portfolio__image-details {
color: #fff;
opacity: 0;
justify-content: space-between;
align-items: center;
width: 100%;
transition: opacity .2s ease-out;
display: flex;
position: relative
}
.portfolio__link {
font-weight: 700
}
.portfolio__link:after {
content: "";
background-image: url(../img/svg/arrow-category.svg);
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 14px;
margin-left: 8px;
display: inline-block;
position: relative;
top: 2px
}
.portfolio__title {
margin-bottom: 8px;
font-size: 24px;
transition: color .2s ease-out
}
.portfolio__info {
margin-bottom: 16px;
line-height: 1.3em
}
.portfolio__sub {
color: #939393;
margin-bottom: 8px;
line-height: 1.3em
}
.portfolio__data {
color: #939393;
max-height: 2.6em;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden
}
.portfolio__data-item {
line-height: 1.3
}
.portfolio__data-item:before {
content: "-";
margin-right: 3px;
display: inline-block
}
.text-section__article-page {
grid-template-rows: 1fr 44px;
row-gap: 28px
}
.text-section__info {
grid-column: 1;
align-items: center;
display: flex
}
.text-section__info time {
margin-right: 20px;
font-size: 24px
}
.text-section__info-wrapper {
align-items: center;
display: flex
}
.text-section__info-item {
color: #939393;
background-color: #f5f5f5;
border-radius: 58px;
align-items: center;
margin-right: 8px;
padding: 8px 16px;
font-size: 20px;
font-weight: 700;
display: flex
}
.text-section__info-item:last-child {
margin-right: 0
}
.text-section__info-item:before {
content: "";
background-repeat: no-repeat;
background-size: contain;
width: 24px;
height: 24px;
margin-right: 8px;
display: block
}
.text-section__info-item--views:before {
background-image: url(../img/svg/views-icon.svg)
}
.text-section__info-item--comments:before {
background-image: url(../img/svg/chat-icon.svg)
}
.text-section__info-item--likes:before {
background-image: url(../img/svg/like-icon.svg)
}
.text-section__info-item--share:before {
background-image: url(../img/svg/share-icon.svg)
}
.article {
grid-template-columns: 360px 1fr;
gap: 32px;
padding-top: 20px;
padding-bottom: 30px;
display: grid
}
.article__img-box {
height: -moz-max-content;
height: max-content;
position: relative
}
.article__img-box img {
-o-object-fit: cover;
object-fit: cover;
border-radius: 24px;
width: 100%;
height: auto;
min-height: 260px
}
.article__img-box div {
position: absolute;
bottom: 28px;
left: 24px
}
.article__img-box div span {
color: #fff;
background-color: #ff7f23;
border-radius: 8px;
margin-right: 8px;
padding: 4px 8px;
font-size: 12px
}
.article__descr p {
background-color: #f5f5f5;
border-radius: 24px;
margin-bottom: 12px;
padding: 22px 24px
}
.article__img-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
display: grid
}
.article__img-grid img {
-o-object-fit: cover;
object-fit: cover;
border: none;
grid-column: span 6;
max-height: 250px;
margin-bottom: 0
}
.article__img-grid img:nth-child(3) {
grid-column: span 12;
max-height: 340px
}
.principle-article .principle__list-title {
margin-bottom: 20px
}
.comments {
padding-top: 40px;
padding-bottom: 50px
}
.comments h2 {
margin-bottom: 40px;
font-size: 36px;
font-weight: 900
}
.comments__wrapper {
grid-template-columns: 1fr 392px;
gap: 32px;
margin-bottom: 20px;
display: grid
}
.comments__wrapper:last-child {
margin-bottom: 0
}
.comments__comment-empty {
box-sizing: border-box;
background-color: #ff7f23;
border-radius: 24px;
height: 100%;
padding-top: 80px;
padding-left: 60px;
position: relative
}
.comments__comment-empty p {
z-index: 2;
color: #fff;
max-width: 376px;
font-size: 36px;
font-weight: 900;
position: relative
}
.comments__comment-empty:before {
content: "";
background-image: url(../img/svg/chat.svg);
background-size: contain;
width: 256px;
height: 245px;
display: block;
position: absolute;
top: 76px;
right: 50px
}
.comments__comment {
border: 1px solid #e2e2e2;
border-radius: 24px;
margin-bottom: 20px;
padding: 40px
}
.comments__comment:last-child {
margin-bottom: 0
}
.comments__comment-info {
align-items: start;
margin-bottom: 40px;
display: flex
}
.comments__comment-info img {
margin-right: 20px
}
.comments__comment-info:nth-child(2) {
padding-left: 64px
}
.comments__comment-info:last-child {
margin-bottom: 0
}
.comment__descr-name {
margin-bottom: 4px;
font-size: 16px;
font-weight: 700
}
.comment__descr-city {
color: #939393;
margin-bottom: 18px
}
.comments__form-wrapper {
box-sizing: border-box;
border: 1px solid #e2e2e2;
border-radius: 24px;
width: auto;
max-height: 379px;
padding: 28px;
position: sticky;
top: 20px
}
.comments__form-wrapper .section-title {
text-align: center;
margin-bottom: 28px;
font-size: 24px;
font-weight: 700;
line-height: 1.3
}
.comments__form-wrapper .input {
margin-bottom: 16px
}
.comments__form-wrapper textarea.input {
resize: none;
height: 100px;
padding: 8px 12px
}
.sale-page .sale__wrap-title {
margin-bottom: 40px;
font-size: 36px;
font-weight: 900
}
.sale-page .sale__products {
margin-bottom: 0
}
.blog__page-article {
padding-bottom: 0
}
.blog__page-article .blog-page__title {
margin-bottom: 0;
font-size: 36px;
font-weight: 900
}
.blog__page-article .blog-page__img-box img {
max-height: 250px
}
.contacts {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
padding-bottom: 0;
display: grid
}
.contacts__item {
background-color: #f5f5f5;
border-radius: 24px;
grid-column: span 3;
align-items: center;
padding: 32px;
display: flex
}
.contacts__item:nth-child(n+3) {
grid-column: span 2
}
.contacts__item img {
margin-right: 24px
}
.contacts__item h2 {
margin-bottom: 12px;
font-size: 16px
}
.contacts__item p {
color: #939393;
flex-direction: column;
display: flex
}
.map {
padding-top: 80px;
padding-bottom: 80px;
overflow: hidden
}
.map>div {
border-radius: 24px
}
.map iframe {
border: none;
width: 100%;
height: 478px
}
.contacts-requisites {
grid-template-columns: 470px 1fr;
gap: 12px;
padding-top: 0;
display: grid
}
.contacts-requisites .about-requisites__item {
width: auto;
max-width: none;
padding: 40px
}
.text-section__project-page {
row-gap: 12px
}
.text-section__project-page h1 {
flex-direction: column;
display: flex
}
.text-section__project-page time {
grid-column: 1;
font-size: 24px;
font-weight: 400
}
.text-section__project-page .text-section__text {
white-space: nowrap
}
.project-descr {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding-top: 20px;
display: grid
}
.project-descr__card {
background-color: #f5f5f5;
border-radius: 24px;
padding: 40px
}
.project-descr__card-item {
margin-bottom: 32px
}
.project-descr__card-item h2 {
margin-bottom: 8px;
font-size: 20px
}
.project-descr__card-item:last-child {
margin-bottom: 0
}
.project-descr__item-price {
color: #ff7f23;
font-size: 20px;
font-weight: 700
}
.project-descr__img-box {
gap: 12px;
display: grid
}
.project-descr__img-box img {
width: 100%;
max-width: 141px;
height: 100%;
min-height: 100px;
transition: .3s
}
.project-descr__img-box a {
border-radius: 16px;
overflow: hidden
}
.project-descr__img-box a:hover img {
transform: scale(1.1)
}
.project-descr__main-img {
border-radius: 20px;
overflow: hidden
}
.project-descr__main-img:hover img {
transform: scale(1.1)
}
.project-descr__main-img img {
max-width: 600px;
height: 100%;
max-height: 331px
}
.project-descr__img-row {
align-items: center;
gap: 12px;
display: flex
}
.project-descr__img-row a {
width: 100%
}
.progress-project h2 {
margin-bottom: 60px
}
.progress-project .progress__name {
font-size: 20px
}
.progress-project .progress__item+.progress__item {
margin-top: 20px
}
.reviews-page {
grid-template-columns: 392px 1fr;
gap: 60px;
display: grid
}
.reviews-page h2 {
margin-bottom: 32px;
font-size: 24px
}
.reviews-page__product-container .product__btns {
background-color: #fff;
order: 1;
margin-top: 0;
margin-bottom: 19px
}
.reviews-page__product-container .product__rating {
order: 2
}
.reviews-page__product-container .product__info {
order: 3
}
.reviews-page__product-container .product__price {
order: 4
}
.product__info-mob {
display: none
}
.reviews-page__review-container .reviews__item {
height: 100%;
max-height: 544px
}
.reviews__item-comment {
flex-direction: column;
display: flex
}
.reviews__item-comment .reviews__message {
display: block
}
.documents-project {
padding-top: 20px;
padding-bottom: 60px
}
.documents-project h2 {
margin-bottom: 32px
}
.document__content {
display: flex
}
.document__content-container {
margin-right: 32px
}
.document__content-container .documents__image {
-o-object-fit: contain;
object-fit: contain;
border: none;
width: 390px;
height: 520px
}
.document__content-container h3 {
margin-bottom: 20px;
font-size: 16px
}
.document__content-container:last-child {
margin-right: 0
}
.services-page .index-lead+section {
padding-top: 20px
}
.services-page .header-lead {
padding-top: 55px;
padding-bottom: 90px;
overflow: hidden
}
.services-page .breadcrumbs__item {
color: #fff;
opacity: .8
}
.services-page .breadcrumbs__item:last-child {
opacity: 1
}
.services-page .header-lead__title {
margin-right: -95px
}
.services-page .header-lead__subtitle--middle {
margin-bottom: 28px
}
.services-page .header-lead__image-wrap {
align-self: end;
margin-top: -70px;
margin-bottom: -80px
}
.services-page .header-lead__image-wrap img {
width: 650px;
height: auto
}
.services-page .progress {
padding-top: 40px
}
.services-page .progress .section-title {
margin-bottom: 60px
}
.services-page .instruments,
.services-page .reasons {
padding-top: 40px
}
.services-page .instruments__orange {
color: #fff;
background-color: #ff7f23;
border-radius: 24px;
margin-bottom: 16px;
padding: 28px;
font-size: 20px;
font-weight: 700
}
.services-page .instruments__list {
grid-template-columns: 1fr 1fr;
-moz-column-gap: 16px;
column-gap: 16px;
display: grid
}
.services-page .instruments__list ul {
background-color: #f5f5f5;
border-radius: 24px;
margin: 0;
padding: 28px 32px;
list-style: none
}
.services-page .instruments__list ul li {
padding-left: 13px;
position: relative
}
.services-page .instruments__list ul li:before {
content: "";
background-color: #097359;
border-radius: 50%;
width: 5px;
height: 5px;
position: absolute;
top: 10px;
left: 0
}
.services-page .instruments__list ul li+li {
margin-top: 8px
}
.services-page .price-table {
padding-top: 40px
}
.services-page .sale__products {
margin-bottom: 0
}
.services-page .faq {
padding-top: 40px
}
.services-page .order-call {
padding-top: 20px
}
.reasons-page .reasons__examples {
grid-template-columns: 390px 1fr;
gap: 16px
}
.reasons-page .reasons__examples+.reasons__examples {
margin-top: 40px
}
.reasons-page .reasons__examples:first-child {
min-height: 340px
}
.reasons-page .reasons__examples:first-child .reasons__item {
flex-direction: column;
justify-content: space-between;
display: flex
}
.reasons-page .reasons__examples:last-child .reasons__lead {
align-items: center;
display: flex
}
.reasons-page .reasons__examples:last-child .reasons__lead:before {
display: none
}
.reasons-page .reasons__examples:last-child p+p {
margin-top: 22px
}
.reasons-page .reasons__examples:last-child a {
white-space: nowrap
}
.reasons-page .reasons__list {
gap: 12px
}
.reasons-page .reasons__num {
color: #097359;
margin-bottom: 0;
font-size: 16px
}
.reasons-page .reasons__item {
min-height: auto
}
.change h2 {
margin-bottom: 60px;
font-size: 36px;
font-weight: 900;
line-height: 1.2
}
.change__row {
grid-template-columns: 390px 1fr;
gap: 20px;
min-height: 320px;
margin-bottom: 60px;
display: grid
}
.change__row:last-child {
margin-bottom: 0
}
.change__item {
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: end;
padding: 40px;
display: flex;
position: relative
}
.change__item img {
width: 71px;
height: 74px;
position: absolute;
top: 40px;
left: 30px
}
.change__item h3 {
margin-bottom: 12px;
font-size: 20px
}
.change__list {
grid-auto-flow: row;
gap: 12px;
display: grid
}
.change__list--3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
display: grid
}
.change__subitem {
background-color: #f5f5f5;
border-radius: 20px;
flex-grow: 1;
align-items: center;
padding: 24px 28px;
display: flex
}
.change__subitem span {
color: #939393;
margin-right: 16px;
font-weight: 700;
transition: .3s
}
.change__subitem:hover span {
color: #097359
}
.offer h2 {
margin-bottom: 40px;
font-size: 36px;
font-weight: 900;
line-height: 1.2
}
.offer__content {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
display: grid
}
.offer__content img {
-o-object-fit: cover;
object-fit: cover;
border-radius: 24px;
width: 100%;
height: 100%
}
.offer__card {
background-color: #f5f5f5;
border-radius: 24px;
padding: 32px
}
.offer__card h3 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 700
}
.offer__card p+p {
margin-top: 22px
}
.offer__card a {
color: #097359;
align-items: center;
width: -moz-max-content;
width: max-content;
margin-top: 28px;
font-size: 20px;
font-weight: 700;
display: flex
}
.offer__card a:after {
content: "";
background-image: url(../img/svg/arrow-card-right-green.svg);
background-repeat: no-repeat;
background-size: contain;
width: 22px;
height: 17px;
margin-left: 8px;
display: block
}
.price-table__heading {
justify-content: space-between;
align-items: end;
margin-bottom: 36px;
display: flex
}
.price-table__heading h2 {
font-size: 36px;
font-weight: 900;
line-height: 1.2
}
.price-table__container {
margin-bottom: 40px
}
.price-table__container:last-child {
margin-bottom: 0
}
.price-table__container h3 {
color: #ff7f23;
margin-bottom: 20px;
font-size: 20px
}
.price-table__container p {
margin-bottom: 20px
}
.price-table__container p:last-child {
margin-bottom: 0
}
.price-table__wrapper {
border: 1px solid #e2e2e2;
border-radius: 16px;
margin-bottom: 20px;
overflow: hidden
}
.price-table__table {
border-collapse: collapse;
width: 100%
}
.price-table__table--discount tbody td:nth-last-child(2) {
color: #f13838
}
.price-table__table thead {
font-weight: 700
}
.price-table__table thead td {
vertical-align: top;
border-top: none
}
.price-table__table tbody tr:nth-child(odd) {
background-color: #fbfbfb
}
.price-table__table tr:first-child th {
border-top: none
}
.price-table__table tr:last-child td {
border-bottom: none
}
.price-table__table tr td:first-child {
border-left: none
}
.price-table__table tr td:last-child {
border-right: none
}
.price-table__table td {
box-sizing: border-box;
word-wrap: break-word;
border: 1px solid #e2e2e2;
width: 100vw;
max-width: 176px;
height: 60px;
padding: 16px 12px
}
.price-table__table div {
flex-direction: column;
display: flex
}
.price-table__table .gray-text {
color: #939393;
margin-top: 4.45px
}
.cart-popup__wrapper {
opacity: 1;
visibility: visible;
z-index: 20;
background: rgba(0, 0, 0, .3019607843);
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: .3s;
display: flex;
position: fixed;
top: 0
}
.cart-popup__wrapper--hidden {
opacity: 0;
visibility: hidden
}
.cart-popup {
box-sizing: border-box;
background-color: #fff;
border-radius: 24px;
flex-direction: column;
align-items: center;
max-width: 480px;
height: auto;
max-height: 100%;
padding: 40px;
display: flex;
position: relative;
overflow-y: auto;
box-shadow: 0 4px 16px rgba(0, 0, 0, .0392156863)
}
.cart-popup::-webkit-scrollbar {
display: none
}
.cart-popup h2 {
text-align: center;
margin-bottom: 40px;
font-size: 40px;
font-weight: 900
}
.cart-popup__close {
border: none;
padding: 0;
position: absolute;
top: 20px;
right: 20px
}
.cart-popup__form {
flex-direction: column;
width: 100%;
display: flex
}
.cart-popup__form label {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
position: relative
}
.cart-popup__form label:nth-last-child(3) {
margin-bottom: 40px
}
.cart-popup__form .cart-popup__input-label {
color: #939393;
pointer-events: none;
font-size: 16px;
font-weight: 400;
transition: .3s;
position: absolute;
top: 12px;
left: 9px
}
.cart-popup__form input {
box-sizing: border-box;
border: 1px solid #e2e2e2;
border-radius: 12px;
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: 400
}
.cart-popup__form input::-moz-placeholder {
color: #939393
}
.cart-popup__form input::placeholder {
color: #939393
}
.cart-popup__form input:focus {
border: 1px solid #3d3d3d;
outline: 0
}
.cart-popup__form input:not(:-moz-placeholder-shown)+.cart-popup__input-label {
background-color: #fff;
padding: 0 3px;
font-size: 12px;
-moz-transition: .3s;
transition: .3s;
top: -7px;
left: 9px
}
.cart-popup__form input:focus+.cart-popup__input-label,
.cart-popup__form input:not(:placeholder-shown)+.cart-popup__input-label {
background-color: #fff;
padding: 0 3px;
font-size: 12px;
transition: .3s;
top: -7px;
left: 9px
}
.cart-popup__select {
color: #939393;
flex-direction: column;
display: flex;
position: relative
}
.cart-popup__select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: 1px solid #e2e2e2;
border-radius: 12px;
padding: 12px;
font-size: 16px;
overflow: hidden
}
.cart-popup__select select:focus {
outline: 0
}
.cart-popup__select:after {
content: "";
z-index: 20;
background-image: url(../img/svg/arrow.svg);
background-repeat: no-repeat;
width: 12px;
height: 12px;
display: block;
position: absolute;
top: 14px;
right: 12px
}
.cart-popup__select-label {
background-color: #fff;
padding: 0 3px;
font-size: 12px;
font-weight: 400;
position: absolute;
top: -7px;
left: 9px
}
.cart-popup__self-delivery select {
cursor: default;
background-color: #f5f5f5;
border: none;
padding-top: 14px;
padding-bottom: 14px;
font-size: 12px
}
.cart-popup__self-delivery .cart-popup__select-label {
z-index: 2;
padding: 0;
line-height: 80%;
top: -5px
}
.cart-popup__self-delivery--hidden,
.cart-popup__self-delivery:after {
display: none
}
.cart-popup__label-delivery {
display: block
}
.cart-popup__label-delivery--hidden {
display: none
}
.cart-popup__form-submit {
color: #fff;
text-align: center;
cursor: pointer;
background-color: #ff7f23;
border-radius: 8px;
margin-bottom: 16px;
padding: 13.5px;
font-weight: 700
}
.cart-page {
padding-top: 40px;
display: block
}
.cart-page .section-title {
margin-bottom: 20px;
font-size: 40px;
line-height: 1.2;
display: flex
}
.cart-page .section-title span {
color: #939393;
margin-left: 20px
}
.cart-page--hidden,
.cart-page__quantity--hidden {
display: none
}
.cart-page__content-wrapper {
grid-template-columns: 2fr 372px;
gap: 40px;
padding-top: 40px;
display: grid
}
.cart-page__content-wrapper--hidden {
display: none
}
.cart-page__content-item {
border-bottom: 1px solid #e2e2e2;
grid-template-columns: 120px minmax(0, 360px) minmax(0, 268px);
align-items: center;
gap: 40px;
padding: 20px 0;
display: grid
}
.cart-page__content-item:first-child {
padding-top: 0
}
.cart-page__content-item:last-child {
border: none;
padding-bottom: 0
}
.cart-page__content-item img,
.cart-page__img-box {
width: 120px;
height: 120px
}
.cart-page__item-descr h2 {
margin-bottom: 12px;
font-size: 14px;
font-weight: 600;
line-height: 150%
}
.cart-page__descr-content {
color: #939393;
grid-template-columns: minmax(0, 124px) minmax(0, 190px);
gap: 4px 24px;
font-size: 12px;
display: grid
}
.cart-page__descr-content p {
min-width: 124px
}
.cart-page__btn-box {
align-items: center;
gap: 26px;
width: 100%;
margin-left: auto;
display: flex
}
.cart-page__item-btns {
align-items: center;
display: flex
}
.cart-page__item-btns button {
cursor: pointer
}
.cart-page__item-btns button path {
transition: .3s
}
.cart-page__item-btns button:hover path {
stroke: #097359
}
.cart-page__btn-minus {
margin-right: 12px
}
.cart-page__item-quantity {
background-color: #f5f5f5;
border-radius: 12px;
padding: 9px 35px
}
.cart-page__btn-plus {
margin-left: 12px
}
.cart-page__item-sum {
white-space: nowrap;
font-size: 20px;
font-weight: 700
}
.cart-page__aside-content {
border-radius: 24px;
margin-bottom: 28px;
padding: 40px;
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.cart-page__aside-content .button {
width: 100%
}
.cart-page__total {
justify-content: space-between;
margin-bottom: 28px;
font-size: 24px;
font-weight: 700;
display: flex
}
.cart-page__aside-btn {
text-align: center;
color: #fff;
background-color: #ff7f23;
border-radius: 8px;
width: 100%;
max-width: 292px;
padding: 9.5px
}
.cart-page__aside-descr {
background-color: #f5f5f5;
border-radius: 24px;
align-items: center;
padding: 20px 20px 20px 24px;
display: flex
}
.cart-page__aside-descr img {
box-sizing: content-box;
-o-object-fit: contain;
object-fit: contain;
background-color: #ff7f23;
border-radius: 12px;
width: 28px;
height: 28px;
margin-right: 20px;
padding: 12px
}
.cart-page__aside-list--hidden {
display: none
}
.cart-page__aside-list h2 {
color: #939393;
margin-top: 20px;
font-size: 24px;
font-weight: 400
}
.cart-page__aside-list div {
margin-bottom: 4px
}
.cart-page__aside-list div:last-child {
margin-bottom: 0
}
.cart-empty {
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom: 0;
display: flex
}
.cart-empty--hidden {
display: none
}
.cart-empty h2 {
color: #939393;
margin-top: 20px;
font-size: 24px;
font-weight: 400
}
.success-order {
flex-direction: column;
align-items: center;
padding-top: 80px;
display: none
}
.success-order h2 {
margin: 20px 0;
font-size: 28px;
font-weight: 900
}
.success-order p {
text-align: center;
font-size: 24px
}
.success-order--visible {
display: flex
}
.sale--calc .sale__products {
margin-bottom: 0
}
.calc__title {
margin-bottom: 60px;
font-size: 40px;
font-weight: 900;
line-height: 1.2
}
.calc__form+.calc__form {
margin-top: 40px
}
.calc__form-title {
margin-bottom: 20px;
font-size: 20px
}
.calc__form-top {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-bottom: 20px;
display: grid
}
.calc__form-top .select {
width: 100%;
min-width: auto
}
.calc__form-groups {
grid-template-columns: repeat(6, 1fr);
gap: 16px;
display: grid
}
.calc__group {
border: 1px solid #e2e2e2;
border-radius: 24px;
grid-column: 2 span;
padding: 20px 28px 23px
}
.calc__group:nth-last-child(-n+2) {
grid-column: 3 span
}
.calc__switcher {
color: #939393;
max-width: 100%;
margin-bottom: 20px;
font-weight: 700
}
.calc__switcher:has(input:checked) {
color: #3d3d3d
}
.calc__switcher:has(input:checked)+.calc__radios {
color: #3d3d3d;
pointer-events: auto
}
.calc__switcher:has(input:checked)+.calc__radios input:checked+.radio:after {
background-color: #ff7f23
}
.calc__switcher:has(input:checked)+.calc__radios .radio {
width: -moz-max-content;
width: max-content
}
.calc__switcher:has(input:checked)+.calc__radios .radio:before {
border-color: #939393
}
.calc__switcher .switcher {
max-width: inherit
}
.calc__radios {
color: #939393;
pointer-events: none;
grid-template-columns: repeat(3, 38px);
gap: 12px 28px;
display: grid
}
.calc__radios input:checked+.radio:after {
background-color: #e2e2e2
}
.calc__radios .radio:before {
border-color: #e2e2e2
}
.calc__form-bottom {
grid-template-columns: 1fr 392px;
gap: 32px;
display: grid
}
.calc__sum {
text-align: center;
background-color: #f5f5f5;
border-radius: 24px;
flex-direction: column;
justify-content: center;
padding: 32px;
display: flex
}
.calc__sum h3 {
margin-bottom: 28px;
font-size: 24px
}
.calc__sum .button {
width: 100%
}
.calc__sum-price {
color: #ff7f23;
margin-bottom: 16px;
font-size: 24px;
font-weight: 700
}
.calc__sum-desc {
color: #939393;
margin-bottom: 28px
}
.index-lead {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative
}
.index-lead:after {
content: "";
background: #fff;
border-radius: 60px 60px 0 0;
width: 100%;
height: 60px;
display: block;
position: relative;
bottom: -1px
}
.overflow {
z-index: -1;
opacity: 0;
pointer-events: none;
background-color: rgba(61, 61, 61, .4);
transition: opacity .2s linear;
position: fixed;
inset: -50px
}
.visually-hidden {
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden
}
.select {
border: 1px solid #e2e2e2;
border-radius: 12px;
width: -moz-max-content;
width: max-content;
min-width: 302px;
position: relative
}
.select .select__name {
color: #939393;
background-color: #fff;
padding: 3px;
font-size: 12px;
position: absolute;
top: 0;
left: 12px;
transform: translateY(-50%)
}
.select select {
color: inherit;
text-overflow: ellipsis;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(0, 0, 0, 0);
border: none;
outline: 0;
width: 100%;
min-width: 100%;
padding: 13px 40px 13px 12px;
font-size: 16px;
overflow: hidden
}
.select svg {
width: 12px;
height: 12px;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%)
}
.display-method {
background-color: #f5f5f5;
border-radius: 8px;
grid-auto-flow: column;
gap: 2px;
margin-left: auto;
padding: 2px 3px;
display: grid
}
.display-method__item {
color: #939393;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
border-radius: 6px;
padding: 16px
}
.display-method__item.is-active {
color: inherit;
cursor: auto;
background-color: #fff
}
@media (max-width:744px) and (max-width:540px) {
.about-requisites__item--details.about-requisites__item,
.about-requisites__item--details.about-requisites__item--small {
/* width: 100%; */
max-width: 100%
}
}
@media (max-width:1440px) {
.services-page .header-lead__image-wrap img {
width: 45vw
}
}
@media (max-width:1350px) {
.menu__item:nth-child(n+9) {
display: none
}
.menu__more {
display: flex
}
.menu__more-list .menu__item:nth-child(n+3) {
display: block
}
}
@media (max-width:1300px) {
.calc__group {
grid-column: 1 span
}
.cart-page__content-wrapper {
grid-template-columns: 1fr 300px
}
.cart-page__content-item {
grid-template-columns: 120px minmax(0, 200px) minmax(0, 268px);
gap: 20px
}
}
@media (max-width:1250px) {
.menu__more-list .menu__item:nth-child(n+2) {
display: block
}
.menu__item:nth-child(n+8) {
display: none
}
}
@media (max-width:1200px) {
.sale__list {
grid-template-columns: repeat(12, minmax(0, 1fr))
}
.sale__item:nth-child(-n+3) {
grid-column: span 4
}
.sale__item:nth-child(n+4) {
grid-column: span 6
}
}
@media (max-width:1100px) {
.menu__more-list .menu__item {
display: block
}
.menu__item:nth-child(n+7) {
display: none
}
}
@media (max-width:1024px) {
.container {
padding-left: 28px;
padding-right: 28px
}
.header-lead {
grid-template-columns: auto;
grid-auto-flow: row;
row-gap: 40px;
padding-top: 36px;
padding-bottom: 80px
}
.header-lead__subtitle {
margin-bottom: 28px;
margin-right: 25%
}
.header-lead__columns {
margin-bottom: 28px
}
.header-lead__right {
grid-template-columns: 61% minmax(0, 1fr)
}
.section,
.section-inner {
padding-top: 40px;
padding-bottom: 40px
}
.header__phone {
margin-left: 28px
}
.filter {
background-color: #f5f5f5;
border-radius: 24px 24px 0 0;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 24px 28px
}
.filter__top {
display: grid
}
.filter__wrap {
background-color: #fff;
border-radius: 16px;
align-content: flex-start;
row-gap: 0;
padding: 20px
}
.filter__item--btns {
grid-column: 1/-1;
margin-top: 4px
}
.filter__item:not(:first-of-type):not(.filter__item--btns) {
border-top: 1px solid #f0f0f0;
padding-top: 28px
}
.filter__item:not(:last-of-type) {
margin-bottom: 28px
}
.filter__item .checkbox:before,
.filter__item .radio:before {
order: 1;
margin-left: auto;
margin-right: 0
}
.filter__item .checkbox:after,
.filter__item .radio:after {
left: auto;
right: 4px
}
.filter__item-name {
margin-bottom: 12px
}
.checkbox,
.radio,
.range {
width: 100%
}
.range__sliders {
font-size: 12px
}
.text-section {
grid-template-columns: auto;
grid-auto-flow: row;
gap: 40px
}
.text-section__text br {
display: none
}
.consultation {
padding-top: 20px;
padding-bottom: 80px
}
.consultation__form .button {
width: 25%
}
.faq {
padding-top: 20px
}
.progress__wrap {
-moz-column-gap: 20px;
column-gap: 20px
}
.progress__item--fix-big {
grid-template-columns: 320px 1fr
}
.progress__item--big-fix {
grid-template-columns: 1fr 320px
}
.progress__num {
left: -88px
}
.card--main {
background-position: top;
background-size: 80%;
min-height: 395px
}
.reasons {
padding-top: 0
}
.reasons__examples {
grid-template-columns: 240px 1fr;
-moz-column-gap: 16px;
column-gap: 16px
}
.reasons__lead {
padding: 24px
}
.reasons__list {
gap: 12px
}
.reasons__item {
min-height: auto;
padding: 28px
}
.reasons__num {
margin-bottom: 20px
}
.sale__products {
gap: 20px
}
.sale__item {
min-height: 180px
}
.sale__item-action {
font-size: 16px
}
.sale__item-action:after {
width: 14px;
height: 16px
}
.stages__list {
gap: 16px
}
.stages__item {
padding: 28px;
font-size: 15px
}
.installation__list {
gap: 16px
}
.installation__link {
font-size: 16px
}
.installation__link:after {
width: 14px;
height: 16px
}
.product {
padding: 8px 20px 24px
}
.product:hover {
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.product--sold .product__btns {
transform: none
}
.product__image:after {
content: none
}
.product__btns {
opacity: 1;
pointer-events: auto;
flex-direction: column;
align-items: stretch;
row-gap: 8px;
margin-top: 20px;
position: static;
transform: none
}
.services__list {
gap: 16px
}
.services__item {
min-height: 180px
}
.services__item .services__info {
display: none
}
.services__item:nth-child(-n+5) .services__info {
display: block
}
.services__item:nth-child(-n+3) .services__info {
display: none
}
.services__link {
font-size: 16px
}
.services__link:after {
width: 14px;
height: 16px
}
.order-call__wrap {
padding: 20px
}
.reviews {
padding-bottom: 20px
}
.reviews--page {
padding-bottom: 40px
}
.reviews--page .reviews__list {
gap: 32px
}
.about-company:before {
border-radius: 40px 40px 0 0
}
.about-company__wrap {
min-height: 380px
}
.about-company__green:after {
top: 25px
}
.about-company__link:after {
width: 14px;
height: 16px;
top: 4px
}
.blog__list {
grid-template-rows: auto;
grid-template-columns: auto;
grid-auto-flow: row;
gap: 32px
}
.blog__item--green {
gap: 42px
}
.blog__item--green:after {
transform: rotate(20deg) translate(20px, 30px)
}
.blog__link:after {
width: 14px;
height: 16px;
top: 5px
}
.blog__more-link {
font-size: 16px
}
.blog__more-link:after {
width: 14px;
height: 16px
}
.about-texts {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
display: grid
}
.about-texts__item--big {
gap: 34px
}
.about-texts__text {
margin-top: 25px
}
.about-company-video {
padding-top: 21px
}
.about-company-video .about-company__video {
min-height: 520px
}
.about-requisites {
gap: 12px;
padding-top: 60px;
padding-bottom: 60px
}
.about-requisites__item {
max-width: calc(100% - 550px);
padding: 32px
}
.about-requisites__item--small {
width: 410px;
max-width: 410px
}
.guarantee {
padding-top: 40px;
padding-bottom: 60px
}
.promotion {
padding-top: 40px
}
.how-place-order {
gap: 20px;
padding-bottom: 60px
}
.how-place-order__step {
gap: 20px
}
.support-center {
gap: 60px;
padding-bottom: 40px
}
.support-consultation {
padding-bottom: 80px
}
.support-consultation__form {
max-width: 410px
}
.support-consultation__content {
padding: 32px 36px
}
.partners {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-bottom: 60px
}
.partners__item {
flex: 0 calc(50% - 58px)
}
.legal-data__item {
max-width: 297px
}
.delivery,
.refund {
grid-template-columns: repeat(2, 1fr)
}
.stock-card-image img {
min-height: 423px
}
.customers {
padding-bottom: 60px
}
.catalog-page,
.catalog-page__services {
padding-top: 20px
}
.catalog-page__wrap {
grid-template-columns: 1fr
}
.catalog-page__wrap .product__image img {
max-height: 100%
}
.catalog-page__sale .product {
align-items: center;
padding: 20px 20px 20px 16px
}
.catalog-page__sale .product .button {
padding: 8px 10px
}
.catalog-page__filters-btn {
display: flex
}
.catalog-page__filter {
z-index: 10;
pointer-events: none;
transition: background-color .3s linear;
position: fixed;
inset: 0
}
.catalog-page__filter.is-active {
pointer-events: auto;
background-color: rgba(0, 0, 0, .3019607843)
}
.catalog-page__filter.is-active .catalog-page__filter-wrap {
transform: translateY(0)
}
.catalog-page__filter-wrap {
-webkit-overflow-scrolling: touch;
max-height: 100%;
transition: transform .3s linear;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
transform: translateY(110vh)
}
.catalog-page__filter-wrap::-webkit-scrollbar {
background: 0 0;
width: 0;
display: none
}
.catalog-page__filter-wrap::-webkit-scrollbar-button {
background: 0 0;
width: 0;
display: none
}
.catalog-page__filter-wrap::-webkit-scrollbar-track {
background: 0 0;
width: 0;
display: none
}
.catalog-page__filter-wrap::-webkit-scrollbar-thumb {
background: 0 0;
width: 0;
display: none
}
.catalog-page__seo {
padding-top: 40px
}
.product-page {
grid-template-columns: 520px 1fr
}
.product-page__slider {
grid-row: 1/3;
height: -moz-max-content;
height: max-content;
position: sticky;
top: 10px
}
.product-page__slider-bottom .swiper-slide {
width: 140px;
height: 140px
}
.product-tabs {
padding-top: 20px
}
.product-tabs__data-item .documents__item,
.product-tabs__data-item .documents__wrapper {
max-width: 306px
}
.product-page__images {
-moz-column-gap: 32px;
column-gap: 32px
}
.product-page__text {
grid-template-columns: 306px 1fr;
-moz-column-gap: 32px;
column-gap: 32px
}
.product-review,
.product-sale {
padding-top: 20px
}
.product-sale {
padding-bottom: 20px
}
.product-review {
padding-bottom: 40px
}
.choose__content {
grid-template-columns: 1fr;
gap: 24px 12px
}
.choose__content-item .choose__content-item:first-child,
.choose__content-item .choose__content-item:nth-child(3) {
margin-bottom: -12px
}
.choose__content-icon {
margin-bottom: 24px
}
.choose__mini-container {
flex-flow: column;
display: flex
}
.choose__mini-item {
padding: 20px 24px
}
.principle {
padding-bottom: 60px
}
.principle__descr-page {
margin-bottom: 40px
}
.principle__content-wrapper {
grid-template-columns: 240px 1fr
}
.principle__content-group img {
margin-bottom: 0
}
.principle__content-group {
margin-bottom: 60px
}
.principle__content-group .principle__content-img {
margin-bottom: 20px
}
.principle__img-box img {
max-height: 540px
}
.principle__img-box {
grid-template-columns: 1fr 240px
}
.principle__subgroup-item img {
max-height: 380px
}
.principle__kesson-text {
margin-top: 20px
}
.text-section__card:before {
width: 136px;
height: 102px;
display: inline-block
}
.text-section__card {
min-height: 150px;
margin-top: -7px
}
.glossarium {
padding-top: 28px;
padding-bottom: 60px
}
.technology {
padding-bottom: 60px
}
.technology__content {
grid-template-columns: repeat(2, 1fr);
gap: 32px
}
.materials {
padding-bottom: 60px
}
.materials__content-row {
grid-template-columns: 1fr 380px
}
.blog-page__content {
-moz-column-gap: 60px;
column-gap: 60px
}
.blog-page__img-box img {
-o-object-fit: cover;
object-fit: cover;
min-height: 250px
}
.blog-page__item-text {
-webkit-line-clamp: 6
}
.portfolio--page .portfolio__list {
gap: 32px
}
.portfolio__list {
gap: 44px 32px
}
.portfolio__item--green .portfolio__link {
font-size: 16px
}
.portfolio__item--green .portfolio__link:after {
height: 14px;
top: 2px
}
.portfolio__link:after {
width: 14px;
height: 16px
}
.text-section__article-page {
grid-template-rows: auto;
gap: 33px
}
.text-section__info {
order: 1
}
.article {
grid-template-columns: 240px 1fr;
padding-bottom: 48px
}
.article__img-grid img {
min-height: 250px
}
.principle-article {
padding-bottom: 40px
}
.comments {
padding-top: 40px;
padding-bottom: 49px
}
.comments__wrapper {
grid-template-columns: 1fr 380px;
gap: 20px
}
.comments__comment-empty p {
line-height: 1.2
}
.comments__comment-empty:before {
right: 32px
}
.comments__comment-empty {
padding-top: 60px;
padding-left: 40px
}
.blog__page-article .blog-page__content {
margin-bottom: 55px
}
.contacts__item img {
margin-bottom: 8px;
margin-right: 0
}
.contacts__item {
flex-direction: column;
align-items: start
}
.map {
padding-top: 48px;
padding-bottom: 48px
}
.map iframe {
height: 380px
}
.contacts-requisites {
grid-template-columns: 380px 1fr;
gap: 20px;
padding-bottom: 40px
}
.text-section__project-page time {
margin-bottom: 28px
}
.text-section__project-page .text-section__text {
margin-left: 3px
}
.text-section__project-page {
grid-template-columns: 1fr
}
.project-descr {
gap: 20px
}
.project-descr__main-img img {
min-height: 373px
}
.progress-project h2 {
margin-bottom: 52px
}
.reviews-page {
grid-template-columns: 380px 1fr;
gap: 40px
}
.reviews-page__product-container .product__data {
flex-direction: column;
margin-top: -95px;
display: flex
}
.reviews-page__review-container .reviews__item {
max-height: 531px
}
.documents-project {
padding-bottom: 40px
}
.document__content-container {
margin-right: 24px
}
.document__content-container .documents__image {
width: 306px;
max-height: 390px
}
.services-page .index-lead+section {
padding-top: 0
}
.services-page .header-lead {
gap: 0;
padding-top: 25px;
padding-bottom: 40px
}
.services-page .header-lead__title {
margin-right: 0
}
.services-page .header-lead__image-wrap {
margin-top: -105px;
margin-bottom: 0
}
.services-page .header-lead__image-wrap img {
width: 64vw;
margin-bottom: -45px;
margin-left: auto
}
.services-page .instruments,
.services-page .price-table,
.services-page .progress {
padding-top: 20px
}
.services-page .sale {
padding-bottom: 20px
}
.services-page .faq {
padding-top: 20px
}
.reasons-page {
padding-bottom: 20px
}
.reasons-page .reasons__examples {
grid-template-columns: 240px 1fr
}
.reasons-page .reasons__examples+.reasons__examples {
margin-top: 28px
}
.reasons-page .reasons__examples:first-child {
min-height: 352px
}
.reasons-page .reasons__examples:first-child .reasons__item {
padding: 24px
}
.reasons-page .reasons__examples:first-child .reasons__list {
grid-template-rows: auto
}
.reasons-page .reasons__examples:last-child .reasons__lead {
padding: 24px
}
.reasons-page .reasons__examples .reasons__lead {
padding-bottom: 32px
}
.reasons-page .reasons__item {
padding: 24px
}
.change {
padding-bottom: 20px
}
.change h2 {
margin-bottom: 36px
}
.change__row {
grid-template-columns: 290px 1fr;
gap: 16px;
min-height: auto;
margin-bottom: 28px
}
.change__item img {
top: 35px;
left: 20px
}
.change__item {
padding: 28px
}
.change__list--3 {
grid-template-rows: auto
}
.change__subitem {
align-items: start
}
.offer h2 {
margin-bottom: 36px
}
.offer__content {
grid-template-columns: 408px 1fr
}
.offer__card a {
font-size: 16px
}
.offer__card {
padding: 28px
}
.price-table__heading h2 {
max-width: 640px
}
.price-table__table td {
max-width: 137px
}
.cart-page {
padding-bottom: 60px
}
.cart-page__descr-content {
grid-template-columns: 1fr
}
.cart-page__btn-box {
gap: 26px
}
.cart-page__aside-content {
padding: 32px 28px
}
.cart-page__total {
margin-bottom: 28px
}
.cart-page__aside-descr {
flex-direction: column;
align-items: start
}
.cart-page__aside-list {
margin-top: 20px
}
.success-order {
padding-top: 60px;
padding-bottom: 60px
}
.sale--calc {
padding-bottom: 20px
}
.calc__form+.calc__form {
margin-top: 32px
}
.calc__form-top {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.calc__form-bottom {
grid-template-columns: 1fr 309px;
gap: 24px
}
.index-lead:after {
border-radius: 40px 40px 0 0;
height: 40px
}
.footer .container {
padding-left: 28px;
padding-right: 28px
}
.footer__top {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px;
display: grid
}
.footer__bottom {
gap: 25px
}
}
@media (max-width:1000px) {
.cart-page__btn-box {
flex-direction: column
}
}
@media (max-width:900px) {
body.show-catalog .overflow {
opacity: 0;
pointer-events: none
}
body.show-catalog .catalog-overflow {
opacity: 1;
pointer-events: auto
}
body.show-menu .menu-mobile {
display: block
}
.header {
z-index: 5;
background-color: #fff;
border-radius: 0 0 24px 24px;
justify-content: space-between;
align-items: center;
padding: 20px 40px 24px;
display: flex;
position: sticky;
top: 0;
box-shadow: 0 4px 24px rgba(65, 65, 65, .1215686275)
}
.header__menu {
border: none;
margin: 0;
padding: 0
}
.header__location {
display: none
}
.header__bottom {
padding: 0
}
.header__bottom form {
display: none
}
.header__phone {
color: transparent;
background-color: #ff7f23;
background-image: url(../img/svg/icon-phone.svg);
background-repeat: no-repeat;
background-size: contain;
border-radius: 8px;
width: 40px;
height: 40px;
margin-left: 0;
font-size: 1px
}
.header__cart {
display: none
}
.header-lead {
padding-top: 130px
}
.index-lead .header {
position: fixed;
top: 0;
left: 0;
right: 0
}
.menu {
display: none
}
.catalog {
border-radius: 24px 24px 0 0;
max-height: 100vh;
padding: 24px 28px 88px;
position: fixed;
inset: auto 0 0;
overflow-y: auto
}
.catalog:has(.catalog__item:hover) {
border-radius: 24px 24px 0 0
}
.catalog__top {
display: grid
}
.catalog__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.catalog__item {
padding: 20px 32px 20px 16px
}
.catalog__item.is-active .catalog__inner-wrap {
z-index: 1;
transform: translateY(0)
}
.catalog__item:hover {
color: inherit
}
.catalog__item img {
width: 102px;
height: 120px
}
.catalog__inner-wrap {
background-color: #f5f5f5;
border-radius: 24px 24px 0 0;
width: auto;
min-width: auto;
max-height: 100vh;
padding: 28px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
transform: translateY(100%)
}
.catalog__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.catalog__link {
background-color: #fff;
border-radius: 16px;
padding: 20px
}
.tap-bar {
display: flex
}
.breadcrumbs {
padding-bottom: 12px
}
.sale__products {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.product__image {
max-width: 300px;
margin-left: auto;
margin-right: auto
}
.product__order {
grid-column: 1/-1
}
.services__list {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.services__list--page .services__item {
grid-column: span 1
}
.services__item {
grid-column: span 1;
min-height: 180px
}
.services__item:nth-child(-n+5) {
grid-column: span 1
}
.services__item:nth-child(-n+5) .services__info {
display: none
}
.services__item:nth-child(-n+3) {
grid-column: span 1
}
.services__item--green {
grid-column: span 2
}
.services__info {
display: none
}
.product-page {
grid-template-columns: 450px 1fr
}
.product-page__slider {
position: sticky;
top: 100px
}
.manual {
grid-template-columns: repeat(2, 1fr);
gap: 16px
}
.comments__wrapper {
grid-template-columns: 1fr
}
.comments__comment-empty:before {
top: 69px;
right: 40px
}
.comments__comment-empty {
min-height: 359px;
padding-top: 47px
}
.services-page .index-lead {
padding-top: 84px
}
.calc__form-bottom {
grid-template-columns: 1fr
}
.footer {
display: none
}
}
@media (max-width:850px) {
.cart-page__content-wrapper {
grid-template-columns: 1fr;
padding-top: 20px
}
.cart-page__aside-btn {
max-width: none
}
}
@media (max-width:820px) {
.product-page {
grid-template-columns: 400px 1fr
}
}
@media (max-width:747px) {
.installation__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.installation__item,
.installation__item:nth-child(-n+2) {
grid-column: span 1
}
}
@media (max-width:744px) {
.section-title {
margin-bottom: 32px
}
.header-lead {
padding-bottom: 40px
}
.header-lead__right {
grid-template-columns: 64% minmax(0, 1fr)
}
.info-block__list {
margin-top: 20px
}
.documents__items {
grid-row-gap: 36px;
grid-template-columns: repeat(2, 1fr)
}
.documents__link {
margin-bottom: 16px
}
.menu-mobile .footer__bottom {
row-gap: 24px
}
.filter {
padding-bottom: 80px
}
.text-section {
gap: 20px
}
.text-section__title {
font-size: 36px
}
.consultation {
padding-bottom: 60px
}
.about-service__video {
min-height: 380px
}
.accordion__item {
padding: 20px 32px 20px 28px
}
.accordion__title {
padding-left: 76px;
padding-right: 40px;
font-size: 20px
}
.accordion__data {
padding: 0 40px 0 76px
}
.progress__wrap {
grid-template-columns: 48px 1fr
}
.progress__item {
gap: 12px
}
.progress__item--big-fix,
.progress__item--fix-big {
grid-template-columns: 1fr
}
.progress__item+.progress__item {
margin-top: 24px
}
.progress__num {
width: 48px;
height: 48px;
font-size: 20px;
left: -76px
}
.reasons__examples {
grid-template-columns: none;
grid-auto-flow: row;
row-gap: 12px
}
.reasons__lead {
padding: 32px 24px
}
.reasons__lead br {
display: none
}
.reasons__lead:before {
width: 126px;
height: 121px;
top: 0;
left: auto;
right: 0;
transform: translate3d(-15px, -75px, 0) rotate(-30deg)
}
.reasons__lead:hover:before {
transform: translate3d(0, -10px, 0) rotate(0)
}
.reasons__list {
grid-template-columns: none;
grid-auto-flow: row;
gap: 8px
}
.reasons__num {
margin-bottom: 21px
}
.sale__products {
grid-template-columns: auto;
grid-auto-flow: row;
gap: 16px
}
.sale__list {
gap: 12px
}
.sale__item {
-webkit-hyphens: auto;
hyphens: auto
}
.stages__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.product {
flex-direction: row;
padding: 20px 20px 20px 16px
}
.product__image {
flex-shrink: 0;
width: 240px;
height: 100%;
margin-right: 12px
}
.product__rating {
margin-bottom: 20px
}
.product__data {
margin-top: 0
}
.product__info {
margin-bottom: 20px
}
.product__btns {
grid-template-columns: repeat(2, minmax(0, 1fr));
-moz-column-gap: 8px;
column-gap: 8px;
margin-top: 12px;
display: grid
}
.product__order {
padding: 40px 32px
}
.services__list {
gap: 12px
}
.services__item--green:after {
width: 270px;
height: 210px
}
.order-call {
padding-top: 20px
}
.order-call__wrap {
padding: 0;
background-image: none !important
}
.order-call__data {
border: 1px solid #e2e2e2;
width: 100%;
padding: 40px 60px
}
.order-call__data .section-title {
margin-bottom: 32px
}
.order-call__data .section-title span {
display: inline
}
.order-call__info {
margin-bottom: 20px
}
.reviews--page .reviews__list {
grid-template-columns: 1fr;
gap: 20px
}
.reviews--page .reviews__item {
min-height: 400px
}
.reviews__top {
margin-bottom: 32px
}
.about-company__wrap {
grid-template-columns: auto;
grid-auto-flow: row;
row-gap: 12px;
min-height: auto
}
.about-company__video {
min-height: 380px
}
.about-company__green {
justify-content: space-between;
min-height: 180px
}
.about-company__green:hover:after {
transform: rotateY(180deg) translateX(0)
}
.about-company__green:after {
top: 10px;
left: auto;
right: -10px;
transform: rotateY(180deg) translateX(-90px)
}
.blog__item--green {
gap: 30px
}
.blog__more {
padding-right: 100px
}
.blog__more-link:after {
top: 5px
}
.about-texts {
grid-template-columns: auto;
grid-auto-flow: row;
gap: 8px
}
.about-texts__item--big {
gap: 22px;
margin-bottom: 4px
}
.about-texts__text {
margin-top: 12px
}
.about-company-video {
padding-top: 0
}
.about-company-video .about-company__video {
min-height: 380px
}
.about-requisites {
padding-top: 40px;
padding-bottom: 40px
}
.about-requisites__item {
max-width: calc(100% - 396px)
}
.about-requisites__item--small {
width: 256px;
max-width: 256px
}
.about-requisites__item--second .about-requisites__text:not(:last-child) {
margin-bottom: 22px
}
.about-requisites__item--details .about-requisites__text:not(:last-child) {
margin-bottom: 12px
}
.about-requisites__item--details {
padding: 24px
}
/* .about-requisites__item--details.about-requisites__item {
max-width: calc(100% - 378px)
} */
.about-requisites__item--details.about-requisites__item--small {
width: 100%;
max-width: 100%
}
.about-requisites__text:not(:last-child) {
margin-bottom: 12px
}
.about-requisites__title {
margin-bottom: 16px
}
.guarantee {
flex-direction: column;
padding-bottom: 40px
}
.guarantee__text:not(:last-child) {
padding-bottom: 72px
}
.guarantee__title {
margin: 0 0 20px
}
.guarantee__block--green {
flex: auto
}
.promotion {
grid-template-columns: 1fr;
gap: 40px
}
.promotion__image {
width: 100%;
height: 260px
}
.promotion__image img {
width: 100%;
height: 100%
}
.how-place-order {
gap: 12px;
padding-bottom: 40px
}
.how-place-order__step:after {
height: calc(100% - 55px);
top: 57px;
left: 21px
}
.how-place-order__number {
flex: 0 0 40px;
max-width: 28px;
height: 28px;
font-size: 20px
}
.how-place-order__wrap {
gap: 12px
}
.how-place-order__content {
gap: 12px;
padding: 24px
}
.how-place-order__title {
font-size: 20px
}
.how-place-order__description:not(:last-child) {
margin-bottom: 14px
}
.support-center {
gap: 40px
}
.support-center__blocks {
gap: 8px
}
.support-center__block {
max-width: 100%
}
.support-center__block--big {
margin-bottom: 4px
}
.support-center__title--sub {
margin-bottom: 12px
}
.support-consultation {
flex-direction: column-reverse;
padding-bottom: 60px
}
.support-consultation__form {
max-width: calc(100% - 64px)
}
.support-consultation__content {
gap: 37px
}
.partners {
gap: 16px;
padding-bottom: 40px
}
.delivery {
grid-template-columns: 1fr
}
.refund {
grid-template-columns: 1fr;
padding-top: 28px;
padding-bottom: 28px
}
.agreement-desc {
margin-bottom: 9px
}
.stock-card-image img {
min-height: 380px
}
.stock-card-block {
flex-direction: column
}
.stock-card-image {
flex: 100%;
width: 100%;
height: auto
}
.customers {
padding-bottom: 40px
}
.customers__item {
flex: 0 calc(50% - 78px)
}
.catalog-page,
.catalog-page__services {
padding-top: 40px
}
.catalog-page__title {
margin-bottom: 32px
}
.catalog-page__top {
margin-bottom: 24px
}
.catalog-page__seo,
.product-page {
grid-template-columns: 1fr
}
.product-page__slider {
grid-row: 1/2;
position: static
}
.product-tabs__data-item .documents__item {
max-width: 332px;
height: -moz-max-content;
height: max-content;
position: sticky;
top: 100px
}
.product-tabs__data-item .documents__wrapper {
max-width: 332px
}
.product-page__images {
-moz-column-gap: 24px;
column-gap: 24px
}
.product-page__docname {
margin-top: 16px
}
.product-page__text {
grid-template-columns: 332px 1fr;
-moz-column-gap: 24px;
column-gap: 24px
}
.product-review,
.product-sale {
padding-top: 40px
}
.choose,
.product-sale {
padding-bottom: 40px
}
.choose__content-item {
padding: 28px
}
.principle {
padding-bottom: 40px
}
.principle__descr {
margin-bottom: 32px
}
.principle__descr-page {
margin-bottom: 20px
}
.principle__content-wrapper {
display: block
}
.principle__aside {
background-color: #fff;
width: 100%;
margin-bottom: 32px;
padding: 20px 0;
top: 70px
}
.principle__aside-page {
margin-bottom: 20px
}
.principle__aside-scroll:after {
top: 20px
}
.principle__aside-links {
gap: 12px
}
.principle__content-group {
margin-top: -200px;
padding-top: 200px;
margin-bottom: 40px
}
.principle__content-page img {
-o-object-fit: contain;
object-fit: contain;
min-height: 440px
}
.principle__subgroup-item img {
max-height: 340px
}
.text-section__card {
margin-top: 12px
}
.text-section__card span {
max-width: 400px
}
.glossarium {
grid-template-columns: 1fr;
padding-top: 20px;
padding-bottom: 40px
}
.technology h1 {
margin-bottom: 40px
}
.technology {
padding-bottom: 40px
}
.technology__content {
grid-template-columns: 1fr;
gap: 24px
}
.materials {
padding-bottom: 40px
}
.materials__descr {
margin-bottom: 44px
}
.materials__content-row img {
-o-object-fit: contain;
object-fit: contain;
max-height: 260px
}
.materials__content-row {
grid-template-columns: 1fr;
margin-bottom: 44px
}
.materials__content-row:nth-child(2) img {
-o-object-fit: cover;
object-fit: cover
}
.blog-page__content {
-moz-column-gap: 32px;
column-gap: 32px;
margin-top: 32px
}
.blog-page__img-box img {
min-height: 210px
}
.portfolio {
border-radius: 40px
}
.portfolio--page .portfolio__list {
row-gap: 40px
}
.portfolio__list {
grid-template-columns: auto;
grid-auto-flow: row;
row-gap: 65px
}
.text-section__article-page .text-section__title {
font-size: 40px
}
.article {
grid-template-columns: 1fr
}
.article__img-box img {
min-height: auto;
max-height: 260px
}
.comments {
padding-top: 20px;
padding-bottom: 20px
}
.blog__page-article .blog-page__content {
margin-bottom: 20px
}
.contacts {
gap: 12px
}
.contacts__item {
padding: 24px
}
.map {
padding-top: 40px;
padding-bottom: 40px
}
.map iframe {
height: 280px
}
.contacts-requisites {
grid-template-columns: 320px 1fr;
gap: 12px
}
.contacts-requisites .about-requisites__item {
padding: 24px
}
.text-section__project-page h1 {
font-size: 40px
}
.project-descr {
grid-template-columns: 1fr
}
.project-descr__card {
padding: 28px
}
.project-descr__img-box img {
max-width: 163px;
max-height: 100px
}
.project-descr__main-img img {
max-width: none;
min-height: 373px
}
.progress-project .progress__name {
margin-bottom: 17px
}
.progress-project .progress__item+.progress__item {
margin-top: 16px
}
.progress-project {
padding-top: 20px;
padding-bottom: 20px
}
.reviews-page {
grid-template-columns: 1fr;
gap: 48px
}
.reviews-page h2 {
margin-bottom: 24px
}
.reviews-page__product-container .product {
max-height: 372px
}
.reviews-page__product-container .product__data {
margin-top: 0;
display: block
}
.reviews-page__product-container .product__btns {
margin-top: 12px;
margin-bottom: 0
}
.reviews-page__product-container .product__image {
height: 340px
}
.product__info-mob {
display: block
}
.reviews-page__review-container .reviews__item-comment {
max-height: 417px
}
.documents-project {
padding-top: 8px;
padding-bottom: 40px
}
.documents-project h2 {
margin-bottom: 24px
}
.document__content-container .documents__image {
width: 100%;
max-height: 430px
}
.services-page .header-lead__image-wrap {
margin-top: -75px
}
.services-page .header-lead__image-wrap img {
width: 87vw;
margin-bottom: -60px;
margin-right: -27px
}
.services-page .services__item:last-child {
grid-column: 1/-1
}
.services-page .instruments .section-title,
.services-page .progress .section-title {
margin-bottom: 40px
}
.services-page .instruments__list {
background-color: #f5f5f5;
border-radius: 24px;
grid-template-columns: 1fr;
row-gap: 8px;
padding: 28px 32px
}
.services-page .instruments__list ul {
border-radius: 0;
padding: 0
}
.services-page .sale {
padding-bottom: 40px
}
.reasons-page .reasons__examples {
grid-template-columns: 1fr;
gap: 12px
}
.reasons-page .reasons__examples+.reasons__examples {
margin-top: 32px
}
.reasons-page .reasons__examples:last-child .reasons__lead {
padding: 24px
}
.reasons-page .reasons__list {
gap: 8px
}
.reasons-page .reasons__num {
margin-bottom: 12px
}
.change {
padding-top: 20px
}
.change__row {
grid-template-columns: 1fr;
gap: 12px;
min-height: auto;
margin-bottom: 33px
}
.change__item img {
margin-right: 10px;
position: relative;
top: 5px;
left: -10px
}
.change__item {
flex-direction: row;
justify-content: start;
align-items: center;
display: flex
}
.change__list {
gap: 8px
}
.change__subitem {
padding: 24px 28px
}
.offer {
padding-top: 20px
}
.offer__content {
grid-template-columns: 1fr;
gap: 12px
}
.offer__content img {
min-height: 220px;
max-height: 260px
}
.offer__card a {
margin-top: 20px
}
.price-table {
padding-top: 20px
}
.price-table__heading {
flex-direction: column;
align-items: start;
margin-bottom: 40px
}
.price-table__heading h2 {
max-width: none;
margin-bottom: 20px
}
.price-table__container {
margin-bottom: 43px
}
.price-table__table td {
max-width: 93px
}
.price-table__table td:first-child {
max-width: 120px
}
.cart-page {
padding-bottom: 40px
}
.cart-page__content-item {
grid-template-columns: 120px minmax(0, 360px) minmax(0, 144px);
gap: 32px
}
.cart-page__descr-content {
grid-template-columns: 124px 190px
}
.cart-page__aside {
grid-template-columns: 294px 1fr;
gap: 28px;
display: grid
}
.cart-page__aside-content {
margin-bottom: 0
}
.cart-page__total {
margin-bottom: 28px
}
.cart-page__aside-descr {
flex-direction: row;
align-items: center
}
.cart-page__aside-list {
padding-bottom: 20px
}
.cart-page__aside-list div {
margin-top: 0
}
.cart-empty {
padding-bottom: 20px
}
.success-order {
padding-top: 225px;
padding-bottom: 225px
}
.sale--calc {
padding-bottom: 40px
}
.calc__group {
border-radius: 20px
}
.calc__sum {
padding: 40px 32px
}
.display-method {
display: none
}
.footer__bottom-item p {
line-height: 1.6
}
.footer__btn.is-active {
color: #ff7f23
}
.footer__btn.is-active svg {
transform: rotate(180deg)
}
.footer__btn.is-active+.footer__list {
visibility: visible;
opacity: 1;
pointer-events: auto;
max-height: 500px;
padding-top: 20px
}
.footer__top-item+.footer__btn {
margin-top: 40px
}
}
@media (max-width:740px) {
.legal-data {
gap: 12px
}
.legal-data__item {
max-width: 272px;
padding: 24px
}
.legal-data__title {
margin-bottom: 16px
}
.legal-data__text:not(:last-child) {
margin-bottom: 12px
}
}
@media (max-width:700px) {
.menu-mobile .footer__bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row
}
.catalog-page__sale .product__btns {
grid-template-columns: 1fr
}
.services-page .price-table {
padding-bottom: 20px
}
.price-table__wrapper {
border: none
}
.price-table__table thead {
display: none
}
.price-table__table tr {
border: 1px solid #e2e2e2;
border-radius: 16px;
margin-bottom: 12px;
padding: 16px 16px 20px;
display: block
}
.price-table__table tr:last-child {
margin-bottom: 0
}
.price-table__table tr:last-child td {
border-bottom: 1px solid #e2e2e2
}
.price-table__table tr:last-child td:first-child,
.price-table__table tr:last-child td:last-child {
border-bottom: none
}
.price-table__table td {
border: none;
border-bottom: 1px solid #e2e2e2;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: none;
height: auto;
padding: 8px 0 7px;
font-size: 12px;
display: flex
}
.price-table__table td:before {
content: attr(data-label);
color: #939393
}
.price-table__table td:first-child {
border: none;
max-width: none;
padding-top: 0;
padding-bottom: 12px;
display: block
}
.price-table__table td:nth-child(2) {
padding-top: 0
}
.price-table__table td:last-child {
border-bottom: none;
padding-bottom: 0
}
.price-table__table div {
flex-direction: row;
font-size: 16px
}
.price-table__table .gray-text {
margin-top: 0;
margin-left: 8px
}
}
@media (max-width:650px) {
.reviews__item {
min-height: auto;
padding: 24px
}
.reviews__item--video {
height: auto
}
.reviews__author--with-icon {
margin-bottom: 20px
}
.reviews__name {
font-size: 20px
}
}
@media (max-width:630px) {
.how-place-order {
gap: 28px;
padding-top: 20px;
padding-bottom: 20px
}
.how-place-order__step:after {
height: calc(100% - 27px);
top: 48px;
left: 16px
}
.how-place-order__step {
gap: 12px
}
.how-place-order__number {
flex: 0 0 36px;
max-width: 16px;
height: 16px;
font-size: 16px
}
.how-place-order__wrap {
flex-direction: column;
gap: 8px
}
.how-place-order__content {
padding: 20px
}
.how-place-order__title {
font-size: 16px
}
}
@media (max-width:600px) {
.consultation .consultation__info {
text-align: center;
max-width: 300px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
font-size: 12px
}
.choose__content-icon {
width: 45px;
height: auto;
}
.legal-data {
flex-direction: column
}
.legal-data__item {
box-sizing: border-box;
max-width: 100%
}
}
@media (max-width:540px) {
.container {
padding-left: 12px;
padding-right: 12px
}
.header {
padding: 16px 28px
}
.header__logo img {
width: 60px;
height: 28px
}
.header__bottom .button {
display: none
}
.header-lead {
row-gap: 32px;
padding-top: 110px
}
.header-lead__left .button {
width: 100%
}
.header-lead__title {
font-size: 28px;
line-height: 1.3
}
.header-lead__subtitle {
box-sizing: border-box;
margin-bottom: 24px;
margin-right: 15%;
font-size: 20px;
line-height: 1.4
}
.header-lead__columns {
justify-content: space-between;
gap: 15px;
margin-bottom: 24px;
display: flex
}
.header-lead__item {
width: auto
}
.header-lead__value {
font-size: 36px
}
.header-lead__right {
grid-template-columns: auto;
grid-auto-flow: row;
row-gap: 8px
}
.section-inner {
padding-top: 20px;
padding-bottom: 20px
}
.section-title {
margin-bottom: 24px;
font-size: 24px;
font-weight: 700;
line-height: 31px
}
.input {
margin-bottom: 16px
}
.catalog {
padding: 20px 12px 96px
}
.catalog__inner {
grid-template-columns: auto;
gap: 8px
}
.catalog__inner-wrap {
padding: 20px 12px 96px
}
.catalog__top-name {
font-size: 20px
}
.catalog__list {
grid-template-columns: auto;
gap: 8px
}
.catalog__item {
padding: 4px 8px
}
.catalog__item img {
width: 56px;
height: 66px
}
.catalog__item-name {
-webkit-hyphens: auto;
hyphens: auto
}
.catalog__link {
border-radius: 12px;
padding: 12px 16px
}
.info-block__title {
font-size: 20px
}
.info-block__icon {
margin-bottom: 16px
}
.info-block__list {
margin-top: 12px
}
.tap-bar {
padding: 12px 24px
}
.tap-bar__item--tablet {
display: none
}
.documents {
padding-top: 20px;
padding-bottom: 20px
}
.documents__items {
grid-template-columns: 1fr;
gap: 32px
}
.menu-mobile {
z-index: 2;
padding: 100px 16px
}
.menu-mobile .footer__top {
grid-template-columns: 1fr;
gap: 20px
}
.menu-mobile .footer__bottom {
grid-template-columns: 1fr;
row-gap: 38px
}
.menu-mobile .footer__logo {
display: none
}
.menu-mobile__top>.button {
min-height: 40px;
margin-right: 12px;
display: flex
}
.menu-mobile__phone {
display: none
}
.filter {
border-radius: 0;
grid-template-columns: 1fr;
gap: 0;
padding: 12px 12px 80px
}
.filter__top {
margin-bottom: 12px
}
.filter__title {
font-size: 20px
}
.filter__wrap {
padding: 16px
}
.filter__wrap--left {
border-radius: 16px 16px 0 0;
margin-bottom: 1px
}
.filter__wrap--right {
border-radius: 0 0 16px 16px
}
.filter__item:not(:first-of-type):not(.filter__item--btns) {
padding-top: 20px
}
.filter__item--btns {
margin-top: 12px
}
.text-section {
padding-top: 20px;
padding-bottom: 20px
}
.text-section__title {
font-size: 28px;
line-height: 1.3
}
.text-section__text {
font-size: 16px
}
.consultation {
padding: 32px 20px 52px
}
.consultation__title {
margin: 0 0 20px;
font-size: 24px
}
.consultation__form {
flex-direction: column;
gap: 16px
}
.consultation__form input {
width: 100%;
margin-bottom: 0
}
.consultation__form .button {
width: 100%
}
.chips {
order: 1
}
.more__btn {
width: 100%
}
.about-service__video {
min-height: 320px
}
.accordion__item {
padding: 20px
}
.accordion__item.is-active .accordion__title:after {
transform: translateY(0) rotate(180deg)
}
.accordion__title {
min-height: none;
padding: 75px 0 0
}
.accordion__title:after {
top: 0;
transform: translateY(0)
}
.accordion__data {
padding: 0
}
.accordion__data-content {
padding-top: 10px
}
.faq .accordion__data-content {
padding-top: 12px
}
.faq .accordion__title {
padding-top: 80px
}
.accordion__content-group {
margin-bottom: 12px
}
.accordion__img-box img {
border-radius: 12px
}
.accordion__table-row {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 16px;
grid-template-columns: 1fr;
max-height: 116px;
margin-bottom: 12px;
padding: 16px 16px 20px
}
.accordion__table-row:last-child {
margin-bottom: 0
}
.accordion__table-head {
display: none
}
.accordion__table-data {
border: none;
border-bottom: 1px solid #e2e2e2;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 12px;
display: flex
}
.accordion__table-data:first-child {
padding-top: 0
}
.accordion__table-data:last-child {
border: none;
padding-bottom: 0
}
.accordion__table-data:before {
content: attr(data-label);
color: #939393
}
.progress__item--horizontal {
grid-template-columns: 1fr
}
.card--main {
min-height: 295px
}
.card--little {
border-radius: 20px;
padding-right: 50px
}
.card--little:after {
width: 38px;
height: 36px;
top: 50%;
right: 20px;
transform: translateY(-50%)
}
.card--little:hover:after {
transform: translateY(-50%)
}
.card__description {
font-size: 16px
}
.reasons__lead {
border-radius: 20px;
padding: 20px;
font-size: 20px;
line-height: 1.3
}
.reasons__num {
margin-bottom: 15px;
font-size: 20px
}
.sale__wrap-title {
font-size: 20px
}
.sale__list {
grid-template-columns: auto;
grid-auto-flow: row
}
.sale__item {
min-height: 110px;
padding: 24px;
font-size: 20px;
line-height: 26px
}
.sale__item:nth-child(-n+3),
.sale__item:nth-child(n+4) {
grid-column: span 1
}
.sale__item:after {
width: 38px;
height: 36px;
top: 50%;
right: 20px;
transform: translateY(-50%)
}
.sale__item:hover:after {
transform: translateY(-50%)
}
.sale__item--green span:first-child {
max-width: 200px
}
.sale__item-action {
margin-top: 34px
}
.stages {
padding-top: 20px;
padding-bottom: 20px
}
.stages__list {
grid-template-columns: minmax(0, 1fr)
}
.stages__item {
padding: 24px
}
.stages__title {
font-size: 20px
}
.installation__list {
grid-template-columns: auto;
grid-auto-flow: row
}
.installation__item {
min-height: auto;
padding: 24px
}
.installation__item:first-child {
min-height: 230px
}
.installation__item--icon {
padding: 24px
}
.installation__item--icon:after {
content: none
}
.installation__num {
font-size: 20px
}
.installation__title {
margin-bottom: 20px;
font-size: 20px
}
.installation__link {
line-height: 26px
}
.product {
flex-direction: column;
width: 100%;
padding: 8px 20px 24px
}
.product__image {
justify-content: center;
width: auto;
max-width: 300px;
height: 340px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto
}
.product__rating {
margin-bottom: 16px
}
.product__data {
width: 100%
}
.product__info {
margin-bottom: 16px
}
.product__btns {
flex-wrap: wrap;
row-gap: 8px;
width: 100%;
margin-top: 20px;
display: flex
}
.product__order-title {
font-size: 36px;
line-height: 1.2
}
.services__list {
grid-template-columns: none;
grid-auto-flow: row
}
.services__item {
min-height: auto;
padding: 24px
}
.services__item--green {
grid-column: span 1;
min-height: auto;
padding: 24px
}
.services__item--green:after {
content: none
}
.services__name {
margin-bottom: 20px;
font-size: 20px
}
.services__link {
line-height: 26px
}
.order-call {
padding-top: 0;
padding-bottom: 40px
}
.order-call__data {
padding: 24px
}
.order-call__data .section-title {
margin-bottom: 20px
}
.order-call__data .section-title span {
display: block
}
.order-call__data .input,
.order-call__info {
margin-bottom: 16px
}
.reviews--page {
padding-top: 20px;
padding-bottom: 20px
}
.reviews--page .reviews__item {
min-height: 320px;
padding: 28px
}
.reviews__top {
margin-bottom: 24px
}
.reviews__list {
padding-bottom: 72px
}
.reviews__btns {
grid-template-columns: repeat(2, minmax(0, 135px));
-moz-column-gap: 20px;
column-gap: 20px;
width: -moz-max-content;
width: max-content;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.reviews__btn {
width: 135px
}
.reviews__item {
border-radius: 20px
}
.reviews__author--with-icon {
-moz-column-gap: 12px;
column-gap: 12px
}
.about-company:before {
border-radius: 24px 24px 0 0
}
.about-company__video {
min-height: 320px
}
.about-company__green {
justify-content: space-between;
min-height: 192px
}
.about-company__green:after {
width: 140px;
height: 109px;
top: 50px;
right: -10px;
transform: rotateY(180deg) translateX(0)
}
.about-company__description {
padding-right: 90px;
font-size: 20px
}
.blog {
padding-top: 20px;
padding-bottom: 20px
}
.blog__item {
grid-template-columns: auto;
grid-auto-flow: row
}
.blog__item:hover .blog__title {
color: inherit
}
.blog__item--green {
padding: 24px
}
.blog__item--green:after {
width: 153px;
height: 115px;
transform: rotate(0) translate(0)
}
.blog__image {
padding: 24px
}
.blog__image:before {
opacity: 1
}
.blog__title {
font-size: 20px
}
.blog__detail {
opacity: 1
}
.blog__more {
margin-bottom: 40px;
padding-right: 0;
font-size: 20px
}
.about-texts {
padding-top: 20px
}
.about-texts__item {
padding: 24px
}
.about-texts__item--big {
gap: 26px;
padding: 20px 24px
}
.about-requisites {
padding-top: 32px;
padding-bottom: 20px
}
.about-requisites__item {
max-width: 100%;
padding: 24px
}
.about-requisites__item--small {
width: 100%;
max-width: 100%
}
.about-requisites__title {
font-size: 16px
}
.guarantee {
padding-top: 20px;
padding-bottom: 20px
}
.support-consultation {
gap: 12px;
padding-bottom: 52px
}
.support-consultation__form {
padding: 24px
}
.support-consultation__form .consultation__form input {
margin-bottom: 0
}
.partners {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding-top: 20px;
padding-bottom: 20px
}
.partners__item {
flex: 0 100%
}
.delivery,
.legal-data,
.refund,
.stock-card {
padding-top: 20px;
padding-bottom: 20px
}
.stock-card-block {
gap: 12px
}
.stock-card-image img {
min-height: 260px
}
.customers {
gap: 16px;
padding-top: 20px;
padding-bottom: 20px
}
.catalog-page,
.catalog-page__services {
padding-top: 20px;
padding-bottom: 20px
}
.catalog-page__title {
font-size: 24px;
line-height: 1.3
}
.catalog-page__seo {
padding-top: 20px;
padding-bottom: 20px
}
.catalog-page__seo-item {
font-size: 20px
}
.product-page {
padding-bottom: 20px
}
.product-page__slider-bottom .swiper-slide {
width: 100px;
height: 100px
}
.product-page__title {
font-size: 36px
}
.product-page__about {
row-gap: 8px
}
.product-page__price {
padding: 20px
}
.product-page__price-line {
font-size: 28px;
line-height: 1.3
}
.product-page__price-line span {
margin-bottom: 20px
}
.product-page__delivery {
padding: 16px
}
.product-page__delivery:before {
margin-right: 16px
}
.product-tabs__item {
padding: 0 16px 14px
}
.product-tabs__data-item .documents__item {
width: 100%;
max-width: 100%;
position: static
}
.product-tabs__data-item .documents__wrapper {
max-width: 100%
}
.product-page__images {
grid-auto-flow: row;
row-gap: 52px;
padding-top: 0;
padding-bottom: 0
}
.product-page__text {
grid-template-columns: 1fr;
row-gap: 24px;
padding-top: 0;
padding-bottom: 0
}
.product-review,
.product-sale {
padding-top: 20px
}
.product-review {
padding-bottom: 20px
}
.product-review .section-title {
font-size: 20px
}
.product-review .reviews__btns {
margin-top: 24px;
display: flex;
position: static
}
.choose__descr {
margin-bottom: 20px;
padding: 20px;
font-size: 16px
}
.choose__content {
gap: 20px
}
.choose__content-item {
padding: 24px
}
.choose__content-item .choose__content-item:first-child,
.choose__content-item .choose__content-item:nth-child(3) {
margin-bottom: -8px
}
.manual {
grid-template-columns: 1fr;
padding-top: 20px
}
.manual__item {
padding: 28px 32px
}
.principle h1 {
margin-top: 0;
margin-bottom: 36px;
font-size: 36px
}
.principle__descr {
margin-bottom: 20px;
padding: 16px
}
.principle__descr-page {
margin-bottom: 12px
}
.principle__aside {
margin-bottom: 22px;
padding: 20px 0 10px
}
.principle__content-group {
margin-top: -260px;
padding-top: 260px;
margin-bottom: 32px
}
.principle__content-group h2 {
margin-bottom: 20px
}
.principle__content-group h3 {
margin-bottom: 12px
}
.principle__img-box {
grid-template-columns: 1fr
}
.principle__content-page h2 {
margin-bottom: 32px
}
.principle__content-page img {
min-height: 260px
}
.principle__subgroup-item img {
max-height: 200px
}
.text-section__card {
border-radius: 20px;
min-height: 180px;
padding: 16px 20px;
font-size: 20px
}
.glossarium {
gap: 12px;
padding-bottom: 20px
}
.glossarium__card h2 {
font-size: 16px
}
.glossarium__card {
padding: 16px 20px 20px
}
.technology {
padding-top: 20px
}
.technology h1 {
margin-bottom: 36px;
font-size: 36px;
line-height: 1.2
}
.technology__content div {
border-radius: 20px;
padding: 24px
}
.technology__content img {
margin-bottom: 16px
}
.technology__content h2 {
font-size: 20px
}
.materials {
padding-top: 20px
}
.materials__descr {
padding: 16px
}
.materials h1 {
margin-bottom: 36px;
font-size: 36px
}
.materials__content-row img {
height: 200px
}
.materials__row-descr h2 {
font-size: 20px
}
.materials__row-descr {
padding: 16px
}
.blog-page__btn-list {
row-gap: 8px
}
.blog-page__content {
grid-template-columns: 1fr;
gap: 24px
}
.blog-page__img-box img {
min-height: 190px
}
.portfolio {
border-radius: 24px;
padding-top: 20px
}
.portfolio--page {
padding-top: 20px;
padding-bottom: 20px
}
.portfolio__list {
row-gap: 40px
}
.portfolio__item--green {
min-height: 192px;
padding: 24px
}
.portfolio__item--green:after {
content: none
}
.portfolio__item--green .portfolio__link {
display: block
}
.portfolio__image {
border-radius: 20px;
margin-bottom: 12px;
padding: 20px
}
.portfolio__image:before {
opacity: 1;
background-image: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .4) 100%)
}
.portfolio__image-details {
opacity: 1
}
.portfolio__link {
display: none
}
.portfolio__title {
font-size: 20px
}
.portfolio__sub {
margin-bottom: 10px
}
.portfolio__date {
display: block
}
.text-section__article-page .text-section__title {
font-size: 36px;
line-height: 1.2
}
.text-section__info {
flex-direction: column;
align-items: start;
row-gap: 12px
}
.text-section__info-item {
padding: 11px 16px;
font-size: 16px
}
.text-section__info-item:before {
width: 20px;
height: 20px
}
.article {
gap: 20px
}
.article__img-box img {
min-height: 260px;
max-height: none
}
.article__descr p {
padding: 16px
}
.article__img-grid img {
grid-column: span 12;
min-height: 240px
}
.article__img-grid {
gap: 20px
}
.comments {
padding-top: 20px;
padding-bottom: 20px
}
.comments h2 {
margin-bottom: 24px;
font-size: 24px;
font-weight: 700
}
.comments__wrapper {
gap: 12px
}
.comments__comment-empty p {
font-size: 28px
}
.comments__comment-empty:before {
width: 190px;
height: 181px;
top: 158px;
right: 28px
}
.comments__comment-empty {
padding: 28px
}
.comments__comment {
padding: 20px
}
.comments__comment-info {
margin-bottom: 20px
}
.comment__descr-text {
margin-left: -67px
}
.sale-page .sale__wrap-title {
margin-bottom: 24px;
font-size: 24px
}
.blog__page-article .blog-page__title {
margin-bottom: 32px;
font-size: 24px
}
.blog__page-article .blog-page__content {
gap: 40px;
margin-bottom: 39px
}
.contacts {
grid-template-columns: 1fr;
padding-top: 20px
}
.contacts__item img {
margin-bottom: 0;
margin-right: 20px
}
.contacts__item {
flex-direction: row;
align-items: center;
padding: 24px 20px
}
.map {
padding-top: 32px;
padding-bottom: 32px
}
.map iframe {
height: 240px
}
.contacts-requisites {
grid-template-columns: 1fr;
padding-bottom: 20px
}
.text-section__project-page h1 {
font-size: 28px
}
.text-section__project-page time {
margin-bottom: 14px;
font-size: 16px
}
.project-descr {
padding-bottom: 20px
}
.project-descr__card {
padding: 20px
}
.project-descr__card-item h2 {
font-size: 16px
}
.project-descr__card-item {
margin-bottom: 24px
}
.project-descr__item-price {
font-size: 16px
}
.project-descr__img-box img {
min-height: 80px;
max-height: none
}
.project-descr__img-box {
gap: 8px
}
.project-descr__main-img img {
min-height: 272px
}
.project-descr__img-row a:last-child {
display: none
}
.project-descr__img-row {
gap: 8px
}
.progress-project h2 {
margin-bottom: 28px
}
.progress-project .progress__name {
margin-bottom: 14px;
font-size: 16px
}
.reviews-page h2 {
margin-bottom: 20px;
font-size: 20px
}
.reviews-page__product-container .product {
max-height: none
}
.reviews-page__product-container .product__btns {
margin-top: 20px
}
.product__info-mob {
display: none
}
.reviews-page__review-container .reviews__item {
height: auto;
max-height: none;
padding: 32px
}
.reviews-page__review-container .reviews__item-comment {
height: auto;
max-height: none
}
.reviews-page__review-container .reviews__author {
-moz-column-gap: 20px;
column-gap: 20px;
margin-bottom: 28px
}
.reviews-page__review-container .reviews__name {
font-size: 24px
}
.documents-project {
padding-bottom: 20px
}
.documents-project h2 {
font-size: 20px
}
.document__content {
flex-direction: column;
gap: 32px
}
.document__content-container {
margin-right: 0
}
.document__content-container .documents__image {
max-height: 440px
}
.services-page .index-lead {
padding-top: 72px
}
.services-page .header-lead {
gap: 32px;
padding-top: 15px
}
.services-page .header-lead__subtitle--middle {
margin-bottom: 24px
}
.services-page .header-lead__image-wrap {
margin-top: 0
}
.services-page .header-lead__image-wrap img {
width: 110%;
margin-top: -25px;
margin-bottom: -47px;
margin-left: -25px
}
.services-page .faq,
.services-page .sale {
padding-bottom: 20px
}
.reasons-page {
padding-top: 20px
}
.reasons-page .reasons__examples .reasons__lead,
.reasons-page .reasons__examples:first-child .reasons__item,
.reasons-page .reasons__examples:last-child .reasons__lead {
padding: 20px
}
.reasons-page .reasons__num {
margin-bottom: 8px
}
.reasons-page .reasons__item {
padding: 20px
}
.change h2 {
margin-bottom: 24px;
font-size: 24px
}
.change__item h3 {
margin-bottom: 14px;
font-size: 16px
}
.change__item,
.change__subitem {
padding: 20px
}
.offer {
padding-bottom: 20px
}
.offer h2 {
margin-bottom: 36px;
font-size: 24px
}
.offer__content {
gap: 8px
}
.offer__content .offer__card a {
margin-bottom: 0
}
.offer__card h3 {
font-size: 16px
}
.offer__card {
padding: 20px
}
.price-table__heading {
margin-bottom: 28px
}
.price-table__heading h2 {
font-size: 24px;
font-weight: 700;
line-height: 1.3
}
.price-table__container {
margin-bottom: 28px
}
.cart-popup__wrapper {
z-index: 10;
background: 0 0;
align-items: start
}
.cart-popup h2 {
margin-bottom: 29px;
padding-top: 10px;
font-size: 20px
}
.cart-popup {
border-radius: 0;
padding: 20px 12px 100px
}
.cart-popup__close {
border: 1px solid #097359;
padding: 10px;
right: 12px
}
.cart-popup__form {
height: 100%
}
.cart-popup__form-submit {
margin-top: auto
}
.cart-page .section-title {
margin-bottom: 16px;
font-size: 36px
}
.cart-page {
padding-top: 20px
}
.cart-page__content-item img {
-o-object-fit: contain;
object-fit: contain;
width: 100px;
height: 120px
}
.cart-page__content-item {
grid-template-columns: 100px minmax(0, 240px);
gap: 12px;
margin-bottom: 20px;
padding: 0 0 20px
}
.cart-page__content-item:last-child {
margin-bottom: 0
}
.cart-page__item-descr {
margin-bottom: auto
}
.cart-page__descr-content {
grid-column: 2;
grid-template-columns: 1fr;
margin-bottom: auto
}
.cart-page__btn-box {
flex-direction: row;
grid-column: 2
}
.cart-page__item-btns {
order: 1
}
.cart-page__item-quantity {
padding: 10px 30px
}
.cart-page__item-sum {
font-size: 16px
}
.cart-page__aside {
grid-template-columns: 1fr;
gap: 20px
}
.cart-page__aside-descr {
padding: 16px 16px 16px 12px
}
.cart-page__aside-descr img {
margin-right: 16px
}
.success-order h2 {
font-size: 24px
}
.success-order p {
font-size: 16px
}
.success-order {
padding-top: 60px;
padding-bottom: 60px
}
.sale--calc {
padding-bottom: 20px
}
.calc__title {
margin-bottom: 36px;
font-size: 36px
}
.calc__form-title {
margin-bottom: 24px
}
.calc__form-top {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 24px
}
.calc__form-groups {
grid-template-columns: 1fr
}
.calc__group {
border-radius: 12px;
grid-column: 1 span;
padding: 20px 24px 22px
}
.calc__group:nth-last-child(-n+2) {
grid-column: 1 span
}
.index-lead:after {
height: 20px
}
.select {
flex-grow: 1;
min-width: auto
}
.footer__btn {
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 0;
display: flex;
position: relative
}
.footer__btn svg {
display: block
}
.footer__list {
visibility: hidden;
opacity: 0;
pointer-events: none;
row-gap: 16px;
max-height: 0
}
.footer__list-item a {
line-height: 1.5
}
.footer__top-item {
border-bottom: 1px solid #e2e2e2;
padding-bottom: 20px
}
.footer__top-item+.footer__btn {
margin-top: 20px
}
.footer__bottom-name {
margin-bottom: 10px
}
}
@media (max-width:375px) {
.info-block {
padding: 24px
}
.progress__wrap {
grid-template-columns: 36px 1fr;
-moz-column-gap: 12px;
column-gap: 12px
}
.progress__num {
width: 36px;
height: 36px;
font-size: 16px;
left: -56px
}
.progress__card {
padding: 20px
}
.progress__title {
margin-bottom: 12px;
font-size: 16px
}
.progress__name {
margin-bottom: 12px
}
.about-texts__title {
font-size: 20px
}
.about-company-video {
margin-top: -9px
}
.about-company-video .about-company__video {
min-height: 320px
}
.guarantee__text,
.guarantee__title {
font-size: 20px
}
.guarantee__description {
font-size: 16px
}
.guarantee__description:not(:last-child) {
padding-bottom: 23px
}
.guarantee__block,
.guarantee__block--green {
border-radius: 20px;
padding: 24px
}
.promotion {
box-sizing: border-box;
gap: 28px;
padding-top: 20px;
padding-bottom: 20px
}
.support-center {
gap: 32px;
padding-bottom: 20px
}
.support-center__blocks {
gap: 10px
}
.support-center__block {
padding: 24px
}
.support-center__block--big {
flex-direction: column;
gap: 20px;
padding: 24px
}
.support-center__title {
margin-bottom: 8px;
font-size: 16px
}
.support-consultation__content {
gap: 45px;
padding: 24px 28px
}
.legal-data__title {
font-size: 16px
}
.customers__item {
flex: 100%;
padding: 32px
}
.reviews-page {
gap: 40px;
padding-top: 20px
}
.services-page .index-lead+section,
.services-page .progress {
padding-bottom: 20px
}
.services-page .instruments .section-title,
.services-page .progress .section-title {
margin-bottom: 24px
}
.services-page .instruments__orange {
padding: 20px
}
.services-page .instruments__list {
padding: 20px 24px
}
.offer__card a {
margin-bottom: 16px
}
}
@media (max-width:370px) {
.pagination-item {
display: none
}
.pagination-item.is-middle,
.pagination-item:nth-child(-n+2),
.pagination-item:nth-last-child(-n+2) {
display: flex
}
}
@media (max-width:365px) {
.agreement-desc {
margin-bottom: 8px
}
}
@media (min-width:371px) and (max-width:540px) {
.pagination-item {
display: none
}
.pagination-item.is-middle,
.pagination-item:nth-child(-n+3),
.pagination-item:nth-last-child(-n+2) {
display: flex
}
}
@media (min-width:541px) and (max-width:744px) {
.pagination-item {
display: none
}
.pagination-item.is-middle,
.pagination-item:nth-child(-n+4),
.pagination-item:nth-last-child(-n+2) {
display: flex
}
}
@media (max-width:900px) and (min-width:541px) {
.catalog-page__services .services__list {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.catalog-page__services .services__item:last-child {
grid-column: 1/-1
}
}
@media (min-width:745px) {
.catalog-page__sale.is-list .sale__products {
grid-template-columns: 1fr
}
.catalog-page__sale.is-list .product {
grid-template-columns: 240px auto 29.3%;
align-items: center;
gap: 12px;
padding: 20px 28px 20px 16px;
display: grid
}
.catalog-page__sale.is-list .product__image {
align-self: center;
max-height: 240px
}
.catalog-page__sale.is-list .product__image img {
max-height: 100%
}
.catalog-page__sale.is-list .product__data-list {
display: block
}
.catalog-page__sale.is-list .product__data-list .product__info {
margin-top: 28px;
margin-bottom: 28px
}
.catalog-page__sale.is-list .product__data {
margin-top: 0;
display: block
}
.catalog-page__sale.is-list .product__data .product__rating,
.catalog-page__sale.is-list .product__data .product__text {
display: none
}
.catalog-page__sale.is-list .product__rating {
margin-bottom: 0
}
.catalog-page__sale.is-list .product__btns {
opacity: 1;
margin-top: 44px;
position: static;
transform: none
}
}
@media (min-width:745px) and (max-width:1024px) {
.catalog-page__sale.is-list .product {
grid-template-columns: 240px auto 28.5%
}
}
@media (min-width:745px) and (max-width:1100px) {
.catalog-page__sale.is-list .product {
grid-template-columns: 160px auto 40%
}
}
@media (min-width:745px) and (max-width:1200px) {
.catalog-page__sale.is-list .product {
grid-template-columns: 200px auto 35%
}
}
@media (min-width:1025px) {
.checkbox:hover:after,
.radio:hover:after {
background-color: #ff7f23
}
.blog__item:nth-child(2) {
grid-row: span 2;
grid-template-columns: auto;
grid-auto-flow: row
}
.blog__item:nth-child(2) .blog__content {
display: block
}
.blog__item:nth-child(2) .blog__description {
-webkit-line-clamp: 7
}
}
@media (min-width:1440px) {
.container {
padding-left: 100px;
padding-right: 100px
}
.container--big-tb-padding {
padding-top: 60px;
padding-bottom: 60px
}
.footer .container {
padding-left: 80px;
padding-right: 80px
}
}