html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
ul,
ol {
padding: 0;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
input,
textarea {
border: none;
background-color: rgba(0, 0, 0, 0);
}
textarea {
resize: none;
}
address,
cite {
font-style: normal;
}
html {
scroll-behavior: smooth;
}
button {
padding: 0;
border: none;
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type='text']::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type='text']::-ms-reveal {
display: none;
width: 0;
height: 0;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
html,
body {
height: 100%;
}
.site-wrapper {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.main {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
:root {
--color-black: #000;
--color-white: #fff;
--color-dark: #323131;
--color-bg: #fffbf6;
--color-accent: #639933;
--gradient: linear-gradient(0deg, #639933 -25%, #82c04b 125%);
--color-yellow: #eeba2f;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Regular.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Bold.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-DemiBold.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-DemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Medium.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Oswald';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-RegularItalic.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-RegularItalic.woff) format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Oswald';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-Heavy.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-Heavy.woff) format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bookman Old Style';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/BookmanOldStyle.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/BookmanOldStyle.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Light.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Light.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Thin.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-Thin.woff) format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Commons';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-ExtraBold.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/TTCommons-ExtraBold.woff) format('woff');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Oswald';
src: url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-Bold.woff2) format('woff2'),
url(//ecosreda.org/wp-content/themes/provodnik/fonts/Oswald-Bold.woff) format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
body {
font-family: 'TT Commons';
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: var(--color-dark);
background-color: var(--color-white);
position: relative;
overflow-x: hidden;
}
@media (max-width: 767.98px) {
body {
font-size: 14px;
}
}
body.no-scroll {
overflow: hidden;
}
.container {
max-width: 1270px;
padding: 0px 15px;
margin: 0 auto;
}
.container-fluid {
max-width: 1920px;
padding: 0px 15px;
margin: 0 auto;
}
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
z-index: 10;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-transition: 200ms ease-in;
-o-transition: 200ms ease-in;
transition: 200ms ease-in;
}
.overlay.active {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 550ms ease;
-o-transition-delay: 550ms ease;
transition-delay: 550ms ease;
}
.main.mt150 {
margin-top: 150px;
}
@media (max-width: 991.98px) {
.main.mt150 {
margin-top: 120px;
}
}
.logo {
width: 173px;
height: 37px;
}
.section-title {
font-size: 40px;
}
@media (max-width: 1270px) {
.section-title {
font-size: calc(24px + 16 * ((100vw - 375px) / 895));
}
}
.btn {
display: inline-block;
background-color: var(--color-accent);
color: var(--color-white);
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
padding: 19px 25px;
font-size: 16px;
font-weight: 700;
text-shadow: 0px 3px 0px rgba(64, 104, 29, 0.27);
background-color: #639933;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(-24%, #639933),
color-stop(125%, #82c04b)
);
background-image: -o-linear-gradient(bottom, #639933 -24%, #82c04b 125%);
background-image: linear-gradient(0deg, #639933 -24%, #82c04b 125%);
border-radius: 5px;
line-height: 1;
text-transform: uppercase;
}
.btn:hover {
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.btn:active {
-webkit-transform: translateY(3px) scale(0.98);
-ms-transform: translateY(3px) scale(0.98);
transform: translateY(3px) scale(0.98);
}
.btn--no-shadow {
text-shadow: none;
background-image: none;
border-radius: 10px;
background-color: var(--color-accent);
}
.btn--light {
font-size: 16px;
line-height: 1;
font-weight: 400;
background-image: none;
color: var(--color-accent);
background-color: #eefbe2;
border-radius: 5px;
text-shadow: none;
border-radius: 5px;
text-transform: none;
padding: 14px 22px;
}
.btn--light:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
.btn--white {
font-size: 20px;
line-height: 1;
font-weight: 700;
text-shadow: 0px 4px 6px rgba(64, 104, 29, 0.27);
color: var(--color-accent);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(-23%, #fafef8),
color-stop(125%, #fafef8)
);
background-image: -o-linear-gradient(bottom, #fafef8 -23%, #fafef8 125%);
background-image: linear-gradient(0deg, #fafef8 -23%, #fafef8 125%);
border-radius: 5px;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 1270px) {
.btn--white {
font-size: calc(12px + 8 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.btn--white {
padding-top: calc(12px + 8 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.btn--white {
padding-bottom: calc(12px + 8 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.btn--white {
padding-left: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.btn--white {
padding-right: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
.map iframe {
width: 100%;
height: 100%;
border: 0;
}
.pagination__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.pagination__link {
font-size: 16px;
line-height: 1;
font-weight: 400;
color: #a8aeb9;
width: 41px;
height: 41px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.pagination__link:hover,
.pagination__link--active {
background-color: var(--color-accent);
color: var(--color-white);
border-radius: 5px;
font-size: 20px;
font-weight: 700;
}
.pagination__link--active {
font-size: 22px;
}
.pagination__link--further {
width: auto;
margin-left: 10px;
}
.pagination__link--further:hover {
background-color: rgba(0, 0, 0, 0);
color: var(--color-dark);
font-weight: 400;
font-size: 15px;
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
-webkit-animation: opacity-visibility 700ms ease forwards;
animation: opacity-visibility 700ms ease forwards;
}
.rating-area {
overflow: hidden;
margin: 0 auto;
}
.rating-area:not(:checked) > input {
display: none;
}
.rating-area:not(:checked) > label {
float: right;
width: 25px;
padding: 0;
cursor: pointer;
font-size: 25px;
line-height: 25px;
color: #e1e1e1;
}
.rating-area:not(:checked) > label:before {
content: '★';
}
.rating-area > input:checked ~ label {
color: var(--color-yellow);
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
color: var(--color-yellow);
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
color: var(--color-yellow);
}
.rate-area > label:active {
position: relative;
}
.rating-choose {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 19px;
}
input[type='file'] {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
.custom-file-upload {
width: 100%;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
text-align: center;
background-color: var(--color-white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 13px;
line-height: 17px;
font-weight: 400;
color: #a1a1aa;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.tags__wrap {
min-width: 0;
}
.tags__item {
width: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tags__btn {
border-radius: 20px;
padding: 13px 18px;
font-size: 14px;
}
.tags__btn:hover {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.stock {
font-size: 13px;
line-height: 1;
font-weight: 600;
padding-left: 22px;
position: relative;
}
.stock::after {
position: absolute;
content: '';
width: 17px;
height: 17px;
-webkit-mask: urL('../images/content/check.png') no-repeat center/contain;
mask: urL('../images/content/check.png') no-repeat center/contain;
left: 0;
top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.stock--in {
color: var(--color-accent);
}
.stock--in::after {
background-color: var(--color-accent);
}
.stock--out {
color: #ccc;
}
.stock--out::after {
background-color: #ccc;
}
.counter {
width: 185;
height: 55px;
background-color: var(--color-white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
padding: 5px;
background-color: #f6f6f6;
border-radius: 5px;
}
.counter__text {
font-size: 15px;
line-height: 1;
font-weight: 400;
color: #8d8b8b;
margin-left: 10px;
}
.counter__btn {
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 5px;
width: 100%;
}
.counter__btn:hover {
background-color: rgba(99, 153, 51, 0.1);
}
.counter__input {
width: 100px;
height: 100%;
background-color: var(--color-white);
border-radius: 5px;
text-align: center;
outline: rgba(0, 0, 0, 0);
font-size: 15px;
}
.product-files {
width: 100%;
padding: 20px 25px;
background-color: #f9f9f9;
border-radius: 5px;
}
@media (max-width: 767.98px) {
.product-files {
padding: 15px 10px;
}
}
.product-files__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
}
@media (max-width: 576px) {
.product-files__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
}
}
.product-files__link {
display: block;
padding-left: 20px;
position: relative;
text-decoration: underline;
font-size: 16px;
line-height: 1;
color: #656565;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 767.98px) {
.product-files__link {
font-size: 15px;
}
}
.product-files__link:hover {
color: var(--color-accent);
}
.product-files__link:hover::after {
background-color: var(--color-accent);
}
.product-files__link::after {
position: absolute;
content: '';
width: 16px;
height: 16px;
left: 0;
top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/file.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/file.svg) no-repeat center/contain;
background-color: #515151;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.product-equipment__name {
display: block;
margin-bottom: 10px;
font-weight: 500;
font-size: 24px;
}
@media (max-width: 1270px) {
.product-equipment__name {
font-size: calc(18px + 6 * ((100vw - 375px) / 895));
}
}
.product-equipment__item {
font-size: 16px;
line-height: 1.4;
background-color: #f9f9f9;
padding: 14px 20px;
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [4];
grid-template-columns: repeat(4, auto);
gap: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-dark);
}
@media (max-width: 576px) {
.product-equipment__item {
padding-left: 5px;
padding-right: 5px;
}
}
.product-equipment__item * {
width: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
@media (max-width: 576px) {
.product-equipment__item * {
width: auto;
font-size: calc(12px + 4 * (100vw - 375px) / 201);
}
}
.product-equipment__item:not(:first-child):nth-child(odd) {
background-color: var(--color-white);
}
.product-equipment__item--head {
background-color: var(--color-dark);
color: var(--color-white);
font-weight: 700;
padding: 20px;
}
.product-equipment__spec {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.count {
width: 80px;
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [3];
grid-template-columns: repeat(3, auto);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
}
.count__input {
width: 30px;
text-align: center;
color: #b1b1b1;
}
.count__btn {
width: 15px;
height: 15px;
position: relative;
}
.count__btn::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
background-color: #787877;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.count__btn--prev::after {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
.count__btn--next::after {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
-ms-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
.range-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 5px 0;
color: #25282f;
font-size: 13px;
margin-bottom: 5px;
width: 100%;
margin-top: 10px;
}
.range-slider__range {
border-radius: 4px;
width: calc(100% - 20px);
height: 5px;
border: none;
background-color: #e2e9f8;
}
.range-slider__values {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
.range-slider .noUi-horizontal .noUi-handle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-accent);
cursor: pointer;
-webkit-box-shadow: none;
box-shadow: none;
top: -8px;
border-color: rgba(0, 0, 0, 0);
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.range-slider .noUi-horizontal .noUi-handle:hover {
border-color: var(--color-accent);
}
.range-slider .noUi-horizontal .noUi-handle::before,
.range-slider .noUi-horizontal .noUi-handle::after {
display: none;
}
.range-slider .noUi-base {
background-color: #eee;
}
.range-slider .noUi-connect {
background-color: #cfe0bf;
}
.range-slider .noUi-tooltip {
border: none;
bottom: initial;
font-size: 13px;
line-height: 1;
font-weight: 400;
color: #6c6f71;
background-color: rgba(0, 0, 0, 0);
margin-top: 5px;
}
.range-slider .noUi-touch-area {
position: relative;
}
.range-slider .noUi-touch-area::after {
position: absolute;
content: '';
width: 6px;
height: 6px;
background-color: var(--color-white);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
}
.side {
border-radius: 10px;
width: 100%;
margin-bottom: 40px;
}
@media (max-width: 991.98px) {
.side {
display: none;
}
}
.side__top {
margin-bottom: 30px;
}
.side__news {
margin-bottom: 30px;
}
.side__title {
font-size: 16px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
color: var(--color-white);
}
.side .accordion.active .side__control {
background-color: var(--color-accent);
color: var(--color-white);
}
.side .accordion.active .accordion__control::after {
background-color: var(--color-white);
}
.side__control {
display: block;
width: 100%;
border-radius: 5px 5px 0px 0px;
padding: 17px 23px;
-moz-text-align-last: left;
text-align-last: left;
font-size: 16px;
font-weight: 600;
color: #53595c;
border: 1px solid #eaeaea;
}
@media (max-width: 1270px) {
.side__control {
padding: 15px 15px;
}
}
.side__control.accordion__control::after {
right: 23px;
}
.side__list {
background-color: #f9f9f9;
border: 1px solid #eaeaea;
}
.side__item {
position: relative;
}
.side__item:not(:last-child) {
border-bottom: 1px solid #ececec;
}
.side__link {
display: block;
padding: 12px 33px 12px 23px;
font-size: 16px;
color: #80898d;
position: relative;
padding-right: 20px;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.side__link:hover {
color: var(--color-accent);
}
.side__link--dropdown {
padding-right: 15px;
position: relative;
border-radius: 5px;
}
.side__link--dropdown::after {
position: absolute;
content: '';
width: 6px;
height: 6px;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/triangle.svg) no-repeat center/100%;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/triangle.svg) no-repeat center/100%;
background-color: #e4e4e4;
}
.side__link--dropdown:hover::after {
background-color: var(--color-accent);
}
.side__link--dropdown:hover + .dropmenu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.side__socials {
margin-bottom: 30px;
}
.side .dropmenu {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
z-index: 10;
width: 260px;
position: absolute;
background-color: var(--color-white);
border-radius: 10px;
padding: 0 21px;
-webkit-transition: 450ms ease;
-o-transition: 450ms ease;
transition: 450ms ease;
-webkit-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
right: -250px;
top: 0;
-webkit-box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.18);
box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.18);
}
.side .dropmenu:hover {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.side .dropmenu__item {
border-bottom: 1px solid #ebebeb;
}
.side .dropmenu__item:last-child {
border-bottom: none;
}
.side .dropmenu__item:hover + .dropmenu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.side .dropmenu__link {
display: block;
width: 100%;
color: var(--color-dark);
padding: 12px 0;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
position: relative;
padding-right: 20px;
}
.side .dropmenu__link:hover {
color: var(--color-accent);
}
.footer-tools {
display: none;
background-color: var(--color-white);
z-index: 9;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 15px;
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
@media (max-width: 576px) {
.footer-tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.footer-tools__btn {
width: 205px;
padding: 15px 18px 15px 18px;
background-color: var(--color-accent);
color: var(--color-white);
border-radius: 5px;
line-height: 1;
position: relative;
display: flex;
line-height: 1;
align-items: center;
}
.footer-tools__btn svg {
width: 20px;
height: 15px;
stroke: var(--color-white);
margin-right: 10px;
}
.footer-tools__btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.footer-tools__search,
.footer-tools__cart,
.footer-tools__wish {
display: block;
width: 37px;
height: 37px;
background-color: #fff;
border: 1px solid #dfeed1;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.footer-tools__search svg,
.footer-tools__cart svg,
.footer-tools__wish svg {
width: 17px;
height: 17px;
}
.footer-tools__cart::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
}
.footer-tools__wish::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
}
.checkbox {
position: relative;
max-width: 315px;
width: 100%;
height: 100%;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.checkbox__box {
display: inline-block;
width: 25px;
height: 25px;
position: relative;
margin-right: 15px;
-ms-flex-negative: 0;
flex-shrink: 0;
background-color: #96c46d;
border-radius: 5px;
}
.checkbox__input {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
.checkbox__input:checked + .checkbox__box::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/check.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.checkbox__text {
gap: 5px;
color: #a6d280;
font-size: 15px;
line-height: 1.2;
}
@media (max-width: 360.98px) {
.checkbox__text {
font-size: 13px;
}
}
.checkbox__text a {
color: var(--color-white);
}
.checkbox--dark .checkbox__box {
background-color: var(--color-white);
border: 1px solid #d7d7d7;
border-radius: 5px;
}
.checkbox--dark .checkbox__text {
color: var(--color-dark);
}
.checkbox--dark .checkbox__text a {
color: var(--color-accent);
}
.order-box {
background-color: var(--color-white);
-webkit-box-shadow: 0px 27px 40px 0px rgba(55, 55, 55, 0.15);
box-shadow: 0px 27px 40px 0px rgba(55, 55, 55, 0.15);
border-radius: 5px;
padding: 30px;
}
@media (max-width: 991.98px) {
.order-box {
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
}
}
.order-box__head {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 0.3fr 0.3fr;
grid-template-columns: 1fr 0.3fr 0.3fr;
gap: 10px;
margin-bottom: 20px;
}
.order-box__heading {
font-size: 18px;
line-height: 1.2;
font-weight: 600;
color: #191919;
}
.order-box__name {
font-size: 12px;
line-height: 1.1;
font-weight: 400;
color: #c0c6cc;
}
.order-box__item {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 0.3fr 0.3fr;
grid-template-columns: 1fr 0.3fr 0.3fr;
padding: 20px;
background-color: #f8f8f8;
border-radius: 10px;
gap: 10px;
color: #191919;
font-size: 16px;
}
.order-box__delivery,
.order-box__payment {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
font-size: 12px;
font-weight: 400;
color: #191919;
padding: 12px 20px;
}
.order-box__delivery-right {
font-size: 16px;
width: 70px;
}
.order-box__bottom {
padding-top: 25px;
border-top: 1px solid #e4e8ed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
font-size: 18px;
line-height: 1.2;
font-weight: 600;
color: #191919;
}
.order-box__cell {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.order-box__cell--tar {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@-webkit-keyframes opacity-visibility {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes opacity-visibility {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
.breadcrumbs {
padding-top: 20px;
margin-top: 160px;
}
@media (max-width: 1270px) {
.breadcrumbs {
padding-top: calc(15px + 5 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.breadcrumbs {
margin-top: 130px;
}
}
.breadcrumbs--absolute {
position: absolute;
top: 150px;
left: max(15px, (100% - 1240px)/2);
z-index: 8;
margin-top: 0;
}
@media (max-width: 991.98px) {
.breadcrumbs--absolute {
top: 130px;
}
}
@media (max-width: 767.98px) {
.breadcrumbs--absolute {
top: 120px;
}
}
.breadcrumbs--absolute .breadcrumbs__link {
color: rgba(255, 255, 255, 0.6);
}
.breadcrumbs--absolute .breadcrumbs__link:hover {
color: var(--color-white);
}
.breadcrumbs--absolute .breadcrumbs__link--active {
color: var(--color-white);
}
.breadcrumbs__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.breadcrumbs__item {
position: relative;
}
.breadcrumbs__item:not(:last-child) {
margin-right: 7px;
padding-right: 14px;
-webkit-transition: 150ms;
-o-transition: 150ms;
transition: 150ms;
}
.breadcrumbs__item:not(:last-child)::after {
position: absolute;
content: '';
width: 8px;
height: 7px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
right: 0;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
background-color: #c2c2c2;
}
.breadcrumbs__link {
display: block;
font-size: 14px;
position: relative;
-webkit-transition: 150ms;
-o-transition: 150ms;
transition: 150ms;
color: #c2c2c2;
}
.breadcrumbs__link:hover,
.breadcrumbs__link--active {
color: var(--color-accent);
}
.delivery-card__icon {
width: 50px;
height: 50px;
background-color: var(--color-accent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.swiper-button-prev,
.swiper-button-next {
background-color: var(--color-white);
border-radius: 50%; top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5;
width: 35px;
height: 35px;
}
@media (max-width: 1270px) {
.swiper-button-prev,
.swiper-button-next {
width: calc(28px + 7 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.swiper-button-prev,
.swiper-button-next {
height: calc(28px + 7 * ((100vw - 375px) / 895));
}
}
.swiper-button-prev::after,
.swiper-button-next::after {
position: absolute;
content: '';
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
background-color: var(--color-accent);
width: 16px;
height: 16px;
}
@media (max-width: 1270px) {
.swiper-button-prev::after,
.swiper-button-next::after {
width: calc(13px + 3 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.swiper-button-prev::after,
.swiper-button-next::after {
height: calc(13px + 3 * ((100vw - 375px) / 895));
}
}
.swiper-button-prev::after {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
.swiper-button-next::after {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
-ms-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
.swiper-pagination {
top: initial;
bottom: 0;
max-width: 1240px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background-color: var(--color-accent);
}
.choices {
font-size: 16px;
line-height: 1;
height: auto;
font-weight: 400;
width: 100%;
background-color: var(--color-white);
color: #686868;
margin-bottom: 0 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 0;
border: 1px solid #d9d8d8;
border-radius: 5px;
}
.choices__placeholder {
opacity: 1;
}
.choices__inner {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 18px;
width: 100%;
height: 100%;
background-color: inherit !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
border: none;
min-height: auto;
font-size: 16px;
}
.choices::after {
border: none !important;
width: 12px !important;
height: 6px !important;
margin-top: 0 !important;
-webkit-mask-image: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg);
mask-image: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100%;
mask-size: 100%;
background-color: #b2b2b2;
right: 15px !important;
top: 25px !important;
-webkit-transition: 150ms ease-in;
-o-transition: 150ms ease-in;
transition: 150ms ease-in;
}
.choices.is-open::after {
margin-top: 0 !important;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.choices__list {
padding: 0;
background-color: inherit;
max-height: 130px;
overflow-y: auto;
}
.choices__list .choices__item {
background-color: inherit;
}
.choices__list--dropdown {
z-index: 100;
}
.choices__list--dropdown .choices__list {
max-height: 130px !important;
}
.choices__list--dropdown .choices__item {
position: relative;
padding: 12px !important;
padding-right: 0 !important;
}
.choices__list--dropdown .choices__item:hover {
background-color: var(--color-bg);
color: var(--color-dark);
}
.choices__list--dropdown .choices__item .choices__item--selectable {
background-color: #ededed;
}
.choices__list--dropdown .choices__item.is-selected:focus,
.choices__list--dropdown .choices__item.is-highlighted:focus {
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.choices__list--dropdown .choices__item.is-selected:hover,
.choices__list--dropdown .choices__item.is-highlighted:hover {
background-color: var(--color-bg);
}
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 100;
opacity: 0;
visibility: hidden;
display: none;
-webkit-transition: 350ms ease;
-o-transition: 350ms ease;
transition: 350ms ease;
}
.popup__container {
width: calc(100% - 40px);
max-width: 500px;
background-color: #fafafa;
-webkit-transition: 250ms ease-in;
-o-transition: 250ms ease-in;
transition: 250ms ease-in;
position: relative;
overflow-y: auto;
max-height: calc(100% - 100px);
-webkit-transition: 750ms ease;
-o-transition: 750ms ease;
transition: 750ms ease;
padding-left: 40px;
padding-right: 40px;
padding-top: 40px;
padding-bottom: 40px;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 1270px) {
.popup__container {
padding-left: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.popup__container {
padding-right: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.popup__container {
padding-top: calc(40px + 0 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.popup__container {
padding-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.popup.active {
opacity: 1;
visibility: visible;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.popup__wrapper {
width: 100%;
}
.popup__title {
text-align: center;
margin-bottom: 20px;
font-size: 34px;
font-weight: 600;
line-height: 1;
color: #323131;
}
@media (max-width: 1270px) {
.popup__title {
margin-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.popup__title {
font-size: calc(24px + 10 * ((100vw - 375px) / 895));
}
}
.popup__text {
text-align: center;
font-size: 17px;
font-weight: 400;
color: #888;
}
@media (max-width: 767.98px) {
.popup__text {
font-size: 15px;
}
}
.popup__text p {
margin-bottom: 20px;
}
.popup__close {
position: absolute;
width: 20px;
height: 20px;
right: 15px;
top: 15px;
fill: #bcc4cf;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.popup__close svg {
width: 20px;
height: 20px;
}
.popup--download .form-delivery__btn {
font-weight: 600;
}
.popup--link .popup__text {
font-size: 22px;
line-height: 1.2;
font-weight: 400;
color: #323131;
font-size: 22px;
}
@media (max-width: 1270px) {
.popup--link .popup__text {
font-size: calc(16px + 6 * ((100vw - 375px) / 895));
}
}
.popup--search .popup__close {
fill: rgba(36, 36, 36, 0.2);
width: 28px;
height: 28px;
}
.popup--search .popup__close svg {
width: 100%;
height: 100%;
}
.popup--search .popup__close:hover {
fill: var(--color-dark);
}
.popup--search .popup__container {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.popup--search .popup__search {
max-width: 730px;
margin: 0 auto;
position: relative;
}
.popup--search .popup__search-input {
padding: 25px 0;
outline: rgba(0, 0, 0, 0);
width: 100%;
border-bottom: 1px solid #bfbfbf;
font-size: 25px;
}
@media (max-width: 1270px) {
.popup--search .popup__search-input {
font-size: calc(20px + 5 * ((100vw - 375px) / 895));
}
}
.popup--search .popup__search-input:active,
.popup--search .popup__search-input:focus {
border-color: var(--color-dark);
}
.popup--search .popup__search-btn {
position: absolute;
right: 0;
top: 25px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/search.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/search.svg) no-repeat center/contain;
width: 26px;
height: 26px;
background-color: #6f6f6f;
}
.popup--subscribe .form-delivery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
}
.popup--subscribe .form-delivery__btn {
font-weight: 500;
}
.popup--subscribe .popup__container {
max-width: 800px;
}
.popup--subscribe .popup__title {
font-weight: 400;
margin-bottom: 50px;
}
.popup--passport .popup__container {
max-width: 900px;
}
.popup--passport .popup__title {
margin-bottom: 40px;
}
.popup--passport .form-passport {
max-width: 100%;
width: 100%;
margin: 0 auto;
display: -ms-grid;
display: grid;
gap: 17px;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport {
gap: 20px;
}
}
.popup--passport .form-passport__group {
width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 80px 1fr;
grid-template-columns: 80px 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
-ms-grid-column-span: 2;
grid-column: span 2;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport__group {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 5px;
}
}
.popup--passport .form-passport__group--small {
grid-column: initial;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport__group--small {
-ms-grid-column-span: 2;
grid-column: span 2;
}
}
.popup--passport .form-passport__label {
text-align: right;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport__label {
text-align: left;
}
}
.popup--passport .form-passport__input {
width: 100%;
padding: 10px 25px;
background-color: #fff;
border: 1px solid #d7d7d7;
border-radius: 5px;
}
.popup--passport .form-passport__input--textarea {
height: 120px;
}
.popup--passport .form-passport .checkbox {
margin-left: 90px;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport .checkbox {
-ms-grid-column-span: 2;
grid-column: span 2;
margin-left: 0;
}
}
.popup--passport .form-passport__btn {
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
width: 200px;
-ms-grid-column-align: end;
justify-self: end;
}
@media (max-width: 767.98px) {
.popup--passport .form-passport__btn {
font-size: 16px;
-ms-grid-column-span: 2;
grid-column: span 2;
-ms-grid-column-align: center;
justify-self: center;
}
}
@media (max-width: 991.98px) {
.menu {
display: none;
}
}
.menu__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu__item {
position: relative;
line-height: 1;
}
.menu__item::after {
position: absolute;
content: '';
right: 0;
top: 50%;
height: 100%;
width: 1px;
background-color: #e5e6e7;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu__item:not(:last-child) {
margin-right: 20px;
padding-right: 20px;
}
@media (max-width: 1270px) {
.menu__item:not(:last-child) {
margin-right: 10px;
padding-right: 10px;
}
}
.menu__item:last-child::after,
.menu__item:first-child::after {
display: none;
}
.menu__link {
font-size: 15px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
color: #3e4244;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 1270px) {
.menu__link {
font-size: 14px;
}
}
.menu__link:hover {
color: var(--color-accent);
}
.menu__link:hover {
color: var(--color-accent);
}
.menu__link--dropdown {
padding-right: 15px;
position: relative;
border-radius: 5px;
}
.menu__link--dropdown::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
right: 0;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/100%;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/100%;
background-color: var(--color-dark);
}
.menu__link--dropdown:hover::before {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.menu__link--dropdown:hover::after {
background-color: var(--color-accent);
}
.menu__link--dropdown:hover + .dropmenu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.menu__link--catalog {
padding: 15px 25px 15px 55px;
border-radius: 5px;
background-color: var(--color-accent);
color: var(--color-white);
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
}
.menu__link--catalog::after {
position: absolute;
content: '';
width: 20px;
height: 15px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/menu-icon.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/menu-icon.svg) no-repeat center/contain;
background-color: var(--color-white);
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 20px;
}
.menu__link--catalog::before {
display: none;
}
.menu__link--catalog:hover {
color: var(--color-accent);
background-color: var(--color-accent-light);
border: 1px solid var(--color-accent);
}
.menu .dropmenu {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
z-index: 10;
width: 300px;
position: absolute;
left: 0;
top: 45px;
background-color: var(--color-white);
-webkit-box-shadow: 0px 19px 51px 0px rgba(53, 56, 62, 0.23);
box-shadow: 0px 19px 51px 0px rgba(53, 56, 62, 0.23);
border-radius: 5px;
padding: 10px 21px;
-webkit-transition: 450ms ease;
-o-transition: 450ms ease;
transition: 450ms ease;
-webkit-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;   }
.menu .dropmenu .simplebar-scrollbar::before {
background-color: var(--color-accent);
}
.menu .dropmenu:hover {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.menu .dropmenu__item {
border-bottom: 1px solid #ebebeb;
position: relative;
}
.menu .dropmenu__item:last-child {
border-bottom: none;
}
.menu .dropmenu__link {
display: block;
width: 100%;
color: var(--color-dark);
padding: 12px 0;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
position: relative;
padding-right: 20px;
}
.menu .dropmenu__link:hover + .submenu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.menu .dropmenu__link::after {
position: absolute;
content: '';
width: 8px;
height: 8px;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/sprite.svg#triangle) no-repeat center/100%;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/sprite.svg#triangle) no-repeat center/100%;
background-color: #d0d0d0;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.menu .dropmenu__link:hover {
color: var(--color-accent);
}
.menu .dropmenu__link:hover::after {
background-color: var(--color-accent);
-webkit-transform: translateY(-50%) translateX(3px);
-ms-transform: translateY(-50%) translateX(3px);
transform: translateY(-50%) translateX(3px);
}
.menu .submenu {
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0;
visibility: hidden;
z-index: 3;
width: 235px;
position: absolute;
right: -265px;
top: 0;
background-color: var(--color-white);
-webkit-box-shadow: 0px 19px 51px 0px rgba(53, 56, 62, 0.23);
box-shadow: 0px 19px 51px 0px rgba(53, 56, 62, 0.23);
border-radius: 10px;
padding: 0 21px;
-webkit-transition: 450ms ease;
-o-transition: 450ms ease;
transition: 450ms ease;
-webkit-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.menu .submenu--sub {
right: -245px;
}
.menu .submenu--bottom {
top: initial;
bottom: 0;
}
.menu .submenu:hover {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.menu .submenu__item {
border-bottom: 1px solid #ebebeb;
}
.menu .submenu__item:last-child {
border-bottom: none;
}
.menu .submenu__link {
display: block;
width: 100%;
color: var(--color-dark);
padding: 12px 0;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
position: relative;
}
.menu .submenu__link::after {
position: absolute;
content: '';
width: 10px;
height: 10px;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/sprite.svg#chevron) no-repeat center/100%;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/sprite.svg#chevron) no-repeat center/100%;
background-color: #d0d0d0;
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
}
.menu .submenu__link:hover {
color: var(--color-secondary);
}
.menu .submenu__link:hover::after {
background-color: var(--color-secondary);
-webkit-transform: translateY(-50%) translateX(3px) rotate(-90deg);
-ms-transform: translateY(-50%) translateX(3px) rotate(-90deg);
transform: translateY(-50%) translateX(3px) rotate(-90deg);
}
.socials__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.socials__link {
display: block;
width: 37px;
height: 37px;
border-radius: 5px;
position: relative;
}
.socials__link::after {
position: absolute;
content: '';
width: 16px;
height: 16px;
background-color: var(--color-white);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.socials__link--vk {
background-color: #4c75a3;
}
.socials__link--vk::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/vk.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/vk.svg) no-repeat center/contain;
}
.socials__link--telegram {
background-color: #039be5;
}
.socials__link--telegram::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/telegram.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/telegram.svg) no-repeat center/contain;
}
.socials__link--whatsapp {
background-color: #4caf50;
}
.socials__link--whatsapp::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/whatsapp.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/whatsapp.svg) no-repeat center/contain;
}
.rating__stars {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.rating__star {
width: 15px;
height: 15px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/star.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/star.svg) no-repeat center/contain;
background-color: #fac630;
}
.rating__star--disabled {
background-color: #ccc;
}
.form-submit {
width: 100%;
}
.form-submit__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 5px;
width: 100%;
}
.form-submit__group:not(:last-child) {
margin-bottom: 40px;
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.form-submit__group:not(:last-child) {
margin-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.form-submit__label {
font-size: 14px;
line-height: 30px;
font-weight: 700;
color: #f9f9f9;
}
.form-submit__input {
width: 100%;
font-size: 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding-bottom: 15px;
color: var(--color-white);
outline: rgba(0, 0, 0, 0);
}
.form-submit__input:focus {
border-bottom: 1px solid var(--color-white);
}
.form-submit__input::-webkit-input-placeholder {
color: #b8e095;
}
.form-submit__input::-moz-placeholder {
color: #b8e095;
}
.form-submit__input:-ms-input-placeholder {
color: #b8e095;
}
.form-submit__input::-ms-input-placeholder {
color: #b8e095;
}
.form-submit__input::placeholder {
color: #b8e095;
}
.form-submit .checkbox {
margin-bottom: 30px;
}
.form-submit__btn {
width: 100%;
text-shadow: none;
}
@media (max-width: 767.98px) {
.form-submit__btn {
font-size: 18px;
padding: 23px;
}
}
.accordion {
padding-left: 1px;
font-size: 18px;
}
.accordion__name {
width: 100%;
}
.mobile-menu .mobile-menu-box__control {
width: 40px;
height: 30px;
}
.accordion__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.accordion__control {
width: 30px;
height: 30px;
}
.accordion.active .accordion__control::after {
-webkit-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.accordion.active .accordion__content {
overflow: initial;
}
.accordion__control {
-webkit-transition: 150ms ease;
-o-transition: 150ms ease;
transition: 150ms ease;
position: relative;
}
.accordion__control::after {
position: absolute;
content: '';
width: 20px;
height: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
background-color: var(--color-dark);
-webkit-transition: 250ms ease;
-o-transition: 250ms ease;
transition: 250ms ease;
}
.accordion__content {
max-height: 0;
overflow: hidden;
z-index: 9;
}
.mobile-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
height: 100vh;
background-color: var(--color-white);
z-index: 12;
width: 400px;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
-webkit-transition: 350ms ease-in-out;
-o-transition: 350ms ease-in-out;
transition: 350ms ease-in-out;
overflow-x: auto;
padding: 40px;
}
@media (max-width: 991.98px) {
.mobile-menu {
width: 80%;
}
}
@media (max-width: 1270px) {
.mobile-menu {
padding: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-box-shadow: 0px 36px 51px 0px;
box-shadow: 0px 36px 51px 0px;
}
.mobile-menu__logo {
margin-bottom: 40px;
}
.mobile-menu__close {
position: absolute;
display: block;
top: 22px;
right: 20px;
width: 28px;
height: 28px;
fill: #030303;
z-index: 999;
}
.mobile-menu__bottom {
margin-top: auto;
}
.mobile-menu__item:not(:last-child) {
margin-bottom: 15px;
}
.mobile-menu__link {
font-size: 18px;
width: 100%;
display: block;
}
.mobile-menu .mobile-menu-box__content {
padding-left: 20px;
}
.mobile-menu .mobile-menu-box__list {
padding-top: 10px;
overflow-y: auto;
max-height: 150px;
}
.mobile-menu .mobile-menu-box__name {
padding-right: 10px;
font-size: inherit;
display: block;
width: 100%;
text-align: left;
}
.mobile-menu .mobile-menu-box__link {
display: block;
font-size: 16px;
padding: 5px 0;
}
.product-card {
max-width: 305px;
width: 100%;
height: 100%;
-webkit-transition: 400ms ease;
-o-transition: 400ms ease;
transition: 400ms ease;
}
.product-card:hover {
-webkit-box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
}
.product-card__top {
height: 315px;
background-color: #f4f4f4;
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 315px;
}
@media (max-width: 1270px) {
.product-card__top {
max-width: calc(225px + 90 * ((100vw - 375px) / 895));
}
}
.product-card__top img {
max-width: 260px;
width: calc(100% - 40px);
height: 230px;
-o-object-fit: contain;
object-fit: contain;
}
.product-card__in-stock {
padding-left: 23px;
position: absolute;
left: 20px;
top: 17px;
line-height: 1;
}
.product-card__in-stock::after {
position: absolute;
content: '';
width: 17px;
height: 17px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/check.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.product-card__title {
font-size: 15px;
line-height: 1;
font-weight: 400;
color: #6e6e6e;
margin-bottom: 15px;
}
.product-card__price {
font-size: 19px;
line-height: 1;
font-weight: 600;
color: #323131;
}
.product-card__body {
padding-left: 5px;
padding-bottom: 5px;
}
.bench-card {
max-width: 305px;
width: 100%;
background-color: var(--color-white);
-webkit-transition: 300ms ease;
-o-transition: 300ms ease;
transition: 300ms ease;
height: 100%;
}
@media (max-width: 991.98px) {
.bench-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.bench-card:hover {
-webkit-box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
}
@media (min-width: 991.98px) {
.bench-card:hover .bench-card__bottom {
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
box-shadow: 0px 12px 32px 0px rgba(6, 6, 6, 0.23);
}
}
.bench-card:hover .bench-card__info {
border-color: #e3e3e3;
}
.bench-card__top {
background-color: #f4f4f4;
padding: 40px;
padding-top: 70px;
height: 290px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
height: 290px;
padding: 40px;
padding-top: 70px;
}
@media (max-width: 1270px) {
.bench-card__top {
height: calc(150px + 140 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.bench-card__top {
padding: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.bench-card__top {
padding-top: calc(50px + 20 * ((100vw - 375px) / 895));
}
}
.bench-card__top img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.bench-card__stock {
position: absolute;
top: 17px;
left: 20px;
}
@media (max-width: 767.98px) {
.bench-card__stock {
top: 12px;
left: 10px;
}
}
.bench-card__body {
position: relative;
padding: 20px;
padding: 20px;
}
@media (max-width: 1270px) {
.bench-card__body {
padding: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.bench-card__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
.bench-card__info {
padding: 20px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0);
padding-top: 20px;
padding-bottom: 20px;
}
@media (max-width: 1270px) {
.bench-card__info {
padding-top: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.bench-card__info {
padding-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.bench-card__info {
border-bottom: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
.bench-card__title {
font-size: 15px;
line-height: 1;
font-weight: 400;
color: #6e6e6e;
margin-bottom: 10px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.bench-card__price {
font-size: 19px;
line-height: 1;
font-weight: 600;
color: #323131;
}
.bench-card__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
padding: 10px 0;
line-height: 1;
border-bottom: 1px solid #e3e3e3;
font-size: 15px;
font-weight: 400;
font-size: 15px;
}
@media (max-width: 1270px) {
.bench-card__item {
font-size: calc(12px + 3 * ((100vw - 375px) / 895));
}
}
.bench-card__left {
color: #8d8b8b;
}
.bench-card__right {
color: #323131;
}
.bench-card__bottom {
position: absolute;
z-index: 1;
left: 0;
padding: 20px;
width: 100%;
-webkit-transition: 600ms ease;
-o-transition: 600ms ease;
background-color: var(--color-white);
transition: 600ms ease;
padding: 20px;
}
@media (max-width: 1270px) {
.bench-card__bottom {
padding: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (min-width: 991.98px) {
.bench-card__bottom {
-webkit-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
}
}
@media (max-width: 991.98px) {
.bench-card__bottom {
padding: 0;
position: static;
}
}
.bench-card__right {
text-align: right;
}
.bench-card__list {
margin-bottom: 20px;
}
@media (max-width: 991.98px) {
.bench-card__list {
display: none;
}
}
.bench-card__btns {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 991.98px) {
.bench-card__btns {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1270px) {
.bench-card__btns {
gap: calc(5px + 5 * ((100vw - 375px) / 895));
}
}
.bench-card .counter {
margin-bottom: 20px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
}
@media (max-width: 991.98px) {
.bench-card .counter {
display: none;
}
}
.bench-card .counter__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 5px;
}
@media (max-width: 767.98px) {
.bench-card .counter__inner {
width: 100%;
}
}
.bench-card .counter__btn {
background-color: #e8e8e8;
border-radius: 5px;
width: 27px;
}
@media (max-width: 767.98px) {
.bench-card .counter__btn {
width: 100%;
}
}
.bench-card .counter__input {
width: 50px;
height: 30px;
}
@media (max-width: 767.98px) {
.bench-card .counter__input {
width: 100%;
}
}
@media (max-width: 767.98px) {
.bench-card .counter__text {
display: none;
}
}
.bench-card__btn {
font-size: 13px;
line-height: 1;
color: #8d8b8b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px;
font-size: 13px;
}
@media (max-width: 1270px) {
.bench-card__btn {
font-size: calc(9px + 4 * ((100vw - 375px) / 895));
}
}
.bench-card__btn-icon {
width: 49px;
height: 49px;
border-radius: 25px;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 767.98px) {
.bench-card__btn-icon {
width: 47px;
height: 47px;
}
}
.bench-card__btn-icon::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 767.98px) {
.bench-card__btn-icon::after {
width: 15px;
height: 15px;
}
}
.bench-card__btn--cart .bench-card__btn-icon {
border: 1px solid var(--color-accent);
}
.bench-card__btn--cart .bench-card__btn-icon::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
background-color: var(--color-accent);
}
.bench-card__btn--cart .bench-card__btn-icon:hover {
background-color: var(--color-accent);
}
.bench-card__btn--cart .bench-card__btn-icon:hover::after {
background-color: var(--color-white);
}
.bench-card__btn--favorite .bench-card__btn-icon {
border: 1px solid #8f8f8f;
}
.bench-card__btn--favorite .bench-card__btn-icon::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
background-color: #8f8f8f;
}
.bench-card__btn--favorite .bench-card__btn-icon:hover {
background-color: #8f8f8f;
}
.bench-card__btn--favorite .bench-card__btn-icon:hover::after {
background-color: var(--color-white);
}
.bench-card__btn--buy .bench-card__btn-icon {
border: 1px solid #d19c9c;
}
.bench-card__btn--buy .bench-card__btn-icon::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/click.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/click.svg) no-repeat center/contain;
background-color: #d19c9c;
}
.bench-card__btn--buy .bench-card__btn-icon:hover {
background-color: #d19c9c;
}
.bench-card__btn--buy .bench-card__btn-icon:hover::after {
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.bench-card__btn--buy {
display: none;
}
}
.bench-card--row {
max-width: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border: 1px solid #f4f4f4;
}
.bench-card--row:hover .bench-card__bottom {
-webkit-box-shadow: none;
box-shadow: none;
}
@media (max-width: 991.98px) {
.bench-card--row {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.bench-card--row .bench-card__top {
max-width: 305px;
height: 100%;
max-width: 305px;
}
@media (max-width: 1270px) {
.bench-card--row .bench-card__top {
max-width: calc(150px + 155 * ((100vw - 375px) / 895));
}
}
.bench-card--row .bench-card__list {
max-width: 250px;
width: 100%;
}
@media (max-width: 767.98px) {
.bench-card--row .bench-card__list {
margin-bottom: 0;
}
}
.bench-card--row .bench-card__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 767.98px) {
.bench-card--row .bench-card__info {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-bottom: 10px;
}
}
.bench-card--row .bench-card__bottom {
position: static;
-webkit-box-shadow: 0;
box-shadow: 0;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
gap: 50px;
}
@media (max-width: 1270px) {
.bench-card--row .bench-card__bottom {
gap: 30px;
}
}
@media (max-width: 767.98px) {
.bench-card--row .bench-card__bottom {
padding: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
}
.bench-card--row .bench-card__doing {
width: 100%;
}
@media (max-width: 767.98px) {
.bench-card--row .bench-card__counter {
margin-bottom: 8px;
}
}
.footer {
padding-bottom: 7px;
padding-top: 40px;
border-top: 1px solid #d9d9d9;
}
.footer__top {
padding-bottom: 40px;
border-bottom: 1px solid #d9d9d9;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.1fr 1fr;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
color: #7c7c7c;
font-size: 16px;
}
@media (max-width: 1270px) {
.footer__top {
gap: 30px;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 991.98px) {
.footer__top {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
max-width: 600px;
}
}
@media (max-width: 576px) {
.footer__top {
padding-bottom: 10px;
}
}
.footer--no-border-top {
border-top: none;
}
.footer__call-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 10px;
margin-bottom: 30px;
}
@media (max-width: 991.98px) {
.footer__call-box {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.footer__call-box {
display: none;
}
}
.footer__copy {
font-size: 14px;
line-height: 23px;
font-weight: 400;
color: #6a6a6a;
}
@media (max-width: 576px) {
.footer__copy {
display: none;
}
}
.footer__logo {
display: block;
margin-bottom: 30px;
}
@media (max-width: 576px) {
.footer__logo {
margin-bottom: 0;
}
}
.footer__socials {
margin-bottom: 55px;
}
@media (max-width: 1270px) {
.footer__socials {
margin-bottom: calc(35px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 576px) {
.footer__socials {
margin-bottom: 0;
}
}
.footer__left {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
gap: 30px;
}
@media (max-width: 1270px) {
.footer__left {
gap: 20px;
}
}
@media (max-width: 576px) {
.footer__left {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.footer__right {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
gap: 30px;
}
@media (max-width: 1270px) {
.footer__right {
gap: 20px;
}
}
@media (max-width: 576px) {
.footer__right {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 30px;
}
}
.footer__phone {
font-size: 29px;
line-height: 1;
font-weight: 400;
color: #1e1e1e;
}
@media (max-width: 1270px) {
.footer__phone {
font-size: calc(22px + 7 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.footer__connect {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.footer__cols {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
gap: 60px;
}
@media (max-width: 1270px) {
.footer__cols {
gap: 20px;
}
}
@media (max-width: 576px) {
.footer__cols {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.footer__list {
display: -ms-grid;
display: grid;
gap: 7px;
}
@media (max-width: 576px) {
.footer__list {
-ms-grid-columns: (auto) [3];
grid-template-columns: repeat(3, auto);
width: 100%;
font-size: 15px;
}
}
@media (max-width: 576px) {
.footer__col--remove-on-mobile {
display: none;
}
}
.footer__col--first .footer__call-box {
display: none;
}
@media (max-width: 576px) {
.footer__col--first {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px 10px;
}
.footer__col--first .footer__call-box {
grid-column: 1/-1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: block;
text-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
}
.footer__phone {
margin-right: 10px;
}
}
.footer__link {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.footer__link:hover {
color: var(--color-dark);
}
.footer .footer-requisites {
width: 120px;
font-size: 15px;
line-height: 1;
color: #575757;
margin-left: auto;
margin-right: 20px;
}
@media (max-width: 991.98px) {
.footer .footer-requisites {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 576px) {
.footer .footer-requisites {
width: 100%;
}
}
.footer .footer-requisites__list {
display: -ms-grid;
display: grid;
gap: 14px;
}
@media (max-width: 576px) {
.footer .footer-requisites__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
.footer .footer-requisites__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.footer__name {
font-size: 21px;
line-height: 1.2;
font-weight: 600;
color: #1e1e1e;
display: block;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.footer__name {
display: none;
}
}
.footer .footer-contacts__list {
display: -ms-grid;
display: grid;
gap: 14px;
}
@media (max-width: 576px) {
.footer .footer-contacts__item:nth-child(2) {
display: none;
}
}
.footer .footer-contacts__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font-size: 15px;
font-weight: 700;
color: #949494;
padding-left: 20px;
position: relative;
line-height: 1;
gap: 10px;
}
.footer .footer-contacts__link::after {
position: absolute;
content: '';
width: 10px;
height: 10px;
left: 0;
top: 0;
background-color: var(--color-accent);
}
.footer .footer-contacts__link--address::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/location.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/location.svg) no-repeat center/contain;
}
.footer .footer-contacts__link--schedule::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/clock.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/clock.svg) no-repeat center/contain;
}
.footer .footer-contacts__link--email::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
}
.footer .footer-contacts__link span:nth-child(2) {
color: #414141;
font-weight: 400;
}
.footer__text {
font-size: 13px;
color: #6a6a6a;
padding: 15px 0;
border-bottom: 1px solid #d9d9d9;
}
@media (max-width: 576px) {
.footer__text {
font-size: 12px;
}
}
.footer__bottom {
font-size: 14px;
line-height: 1;
color: #6a6a6a;
padding: 20px 0;
}
.footer__payment {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 19px;
}
@media (max-width: 576px) {
.footer__payment { gap: 11px;
}
}
.footer__payment img {
-o-object-fit: contain;
object-fit: contain;
}
@media (max-width: 1270px) {
.footer__payment img { }
}
.footer__copy-mobile {
display: none;
}
@media (max-width: 576px) {
.footer__copy-mobile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
height: 50px;
}
}
.header {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background-color: var(--color-white);
}
.header.scroll-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background-color: var(--color-white);
}
.header.scroll-header .header__bottom {
display: none;
}
.header.scroll-header .header__toggle {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: 350ms ease-in;
-o-transition: 350ms ease-in;
transition: 350ms ease-in;
background-color: var(--color-accent);
position: relative;
border-radius: 5px;
}
.header.scroll-header .header__toggle::after {
position: absolute;
content: '';
width: 20px;
height: 15px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/menu-icon.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/menu-icon.svg) no-repeat center/contain;
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.header.scroll-header .header__toggle {
background-color: rgba(0, 0, 0, 0);
width: 20px;
}
.header.scroll-header .header__toggle::after {
display: none;
}
}
.header__toggle {
display: none;
}
@media (max-width: 991.98px) {
.header__toggle {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 20px;
height: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: 350ms ease-in;
-o-transition: 350ms ease-in;
transition: 350ms ease-in;
}
}
@media (max-width: 991.98px) and (max-width: 991.98px) {
.header__toggle {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
@media (max-width: 991.98px) {
.header__toggle-line {
border-radius: 3px;
width: 100%;
height: 1px;
background-color: var(--color-dark);
position: relative;
-webkit-transition: 150ms ease-in;
-o-transition: 150ms ease-in;
transition: 150ms ease-in;
}
.header__toggle-line::after,
.header__toggle-line::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: inherit;
-webkit-transition: 450ms ease-in;
-o-transition: 450ms ease-in;
transition: 450ms ease-in;
border-radius: 3px;
}
.header__toggle-line::after {
top: -5px;
}
.header__toggle-line::before {
bottom: -5px;
}
}
@media (max-width: 991.98px) {
.header__toggle:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
}
@media (max-width: 1270px) {
.header__logo {
width: calc(100px + 75 * (100vw - 991px) / 279);
height: auto;
}
}
@media (max-width: 991.98px) {
.header__logo {
width: 125px;
height: 20px;
}
}
@media (max-width: 767.98px) {
.header__logo {
width: 105px;
height: 15px;
}
}
.header__top {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
border-bottom: 1px solid #edf2f4;
}
.header__top-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px 0;
gap: 13px;
}
@media (max-width: 991.98px) {
.header__top-inner {
padding: 15px 0 10px;
}
}
.header__bottom {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.header__bottom .btn--light {
display: none;
}
@media (max-width: 991.98px) {
.header__bottom .btn--light {
display: block;
}
}
.header__bottom-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px 0;
gap: 13px;
}
@media (max-width: 991.98px) {
.header__bottom-inner {
padding: 8px 0;
}
}
.header__tools {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 14px;
}
@media (max-width: 767.98px) {
.header__tools {
display: none;
}
}
@media (max-width: 1270px) {
.header__btn {
padding: 14px 15px;
}
}
@media (max-width: 991.98px) {
.header__btn {
display: none;
}
}
.header__cart,
.header__wishlist,
.header__search {
width: 37px;
height: 37px;
background-color: var(--color-white);
border: 1px solid #dfeed1;
border-radius: 50%;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.header__cart::after,
.header__wishlist::after,
.header__search::after {
position: absolute;
content: '';
width: 15px;
height: 15px;
background-color: var(--color-dark);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.header__cart:hover,
.header__wishlist:hover,
.header__search:hover {
background-color: var(--color-accent);
}
.header__cart:hover::after,
.header__wishlist:hover::after,
.header__search:hover::after {
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.header__cart,
.header__wishlist,
.header__search {
display: none;
}
}
.header__cart::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/cart.svg) no-repeat center/contain;
}
.header__wishlist::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/heart.svg) no-repeat center/contain;
}
.header__search::after {
width: 14px;
height: 14px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/search.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/search.svg) no-repeat center/contain;
}
.data-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font-size: 15px;
line-height: 1.2;
font-weight: 400;
padding-left: 20px;
position: relative;
}
.data-box::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 0;
-webkit-transform: translateY(25%);
-ms-transform: translateY(25%);
transform: translateY(25%);
left: 0;
background-color: var(--color-accent);
}
.data-box__text {
color: #444;
}
.data-box__accent {
color: #639933;
}
@media (max-width: 767.98px) {
.data-box__accent {
font-size: 12px;
}
}
.data-box__phone {
font-size: 23px;
line-height: 1;
font-weight: 500;
color: #282828;
}
@media (max-width: 767px) {
.data-box__phone {
font-size: 16px;
}
}
.data-box__gray {
font-size: 13px;
font-weight: 400;
color: #6c6b6b;
}
.data-box--mail::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
}
@media (max-width: 1270px) {
.data-box--mail {
display: none;
}
}
.data-box--location::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/location.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/location.svg) no-repeat center/contain;
}
@media (max-width: 991.98px) {
.data-box--location {
display: none;
}
}
.data-box--phone-icon::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/phone.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/phone.svg) no-repeat center/contain;
}
@media (max-width: 991.98px) {
.data-box--phone-icon {
display: none;
}
}
.data-box--phone {
padding-left: 0;
}
.data-box--phone::after {
display: none;
}
@media (max-width: 991.98px) {
.data-box--phone {
margin-left: auto;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
}
.hero {
color: var(--color-white);
background-color: #383a3f;
}
@media (max-width: 767.98px) {
.hero {
position: relative;
}
}
.hero__arrows {
position: absolute;
bottom: 40px;
left: max(15px, (100% - 1240px)/2);
width: 130px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
z-index: 3;
}
@media (max-width: 767.98px) {
.hero__arrows {
width: calc(100% - 15px);
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.hero__arrows::after {
position: absolute;
content: '';
width: 35px;
height: 2px;
background-color: rgba(255, 255, 255, 0.7);
left: 50%;
top: 55%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 767.98px) {
.hero__arrows::after {
display: none;
}
}
.hero__arrows .swiper-button-next,
.hero__arrows .swiper-button-prev {
background-color: rgba(0, 0, 0, 0);
position: relative;
z-index: 3;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
width: 25px;
height: 25px;
}
.hero__arrows .swiper-button-next::after,
.hero__arrows .swiper-button-prev::after {
width: 100%;
height: 100%;
background-color: var(--color-white);
}
@media (max-width: 767.98px) {
.hero__arrows .swiper-button-next,
.hero__arrows .swiper-button-prev {
border: 1px solid rgba(255, 255, 255, 0.5);
}
.hero__arrows .swiper-button-next:hover,
.hero__arrows .swiper-button-prev:hover {
background-color: var(--color-white);
}
.hero__arrows .swiper-button-next:hover::after,
.hero__arrows .swiper-button-prev:hover::after {
background-color: var(--color-accent);
}
}
.hero__slider {
z-index: 2;
}
.hero__slider .swiper-pagination {
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2;
}
.hero__slider .swiper-pagination-bullet {
width: 5px;
height: 5px;
opacity: 1;
background-color: rgba(210, 211, 211, 0.4);
}
.hero__slider .swiper-pagination-bullet-active {
background-color: var(--color-accent);
}
.hero__slide {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 615px;
padding-top: 100px;
padding-bottom: 100px;
min-height: 615px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/1.jpg);
z-index: 2;
}
@media (max-width: 1270px) {
.hero__slide {
padding-top: calc(60px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.hero__slide {
padding-bottom: calc(60px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.hero__slide {
min-height: calc(560px + 55 * ((100vw - 375px) / 895));
}
}
@media (max-width: 767.98px) {
.hero__slide {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/hero-bg-small.jpg);
}
}
.hero__offer {
max-width: 450px;
}
@media (max-width: 767.98px) {
.hero__offer {
text-align: center;
margin: 0 auto;
}
}
.hero__title {
font-size: 45px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.hero__title {
font-size: calc(30px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.hero__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.hero__text {
font-size: 18px;
color: #dedfe1;
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.hero__text {
margin-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.hero__btn {
position: relative;
z-index: 1;
background-image: -o-linear-gradient(35deg, #639933 4%, #6da43c 96%);
background-image: linear-gradient(55deg, #639933 4%, #6da43c 96%);
border-radius: 5px;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.hero__btn::after {
position: absolute;
content: '';
bottom: -10px;
right: -10px;
width: 100%;
height: 100%;
background-image: -o-linear-gradient(
35deg,
rgba(99, 153, 51, 0.3) 4%,
rgba(109, 164, 60, 0.3) 96%
);
background-image: linear-gradient(
55deg,
rgba(99, 153, 51, 0.3) 4%,
rgba(109, 164, 60, 0.3) 96%
);
border-radius: 5px;
z-index: -1;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.hero__btn:hover {
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.hero__btn:active {
-webkit-transform: translate(5px, 5px);
-ms-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
.hero__btn:active::after {
bottom: 0;
right: 0;
}
.hero--service {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hero--service .hero__wrapper {
padding: 150px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 150px;
padding-bottom: 150px;
}
@media (max-width: 1270px) {
.hero--service .hero__wrapper {
padding-top: calc(70px + 80 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.hero--service .hero__wrapper {
padding-bottom: calc(50px + 100 * ((100vw - 375px) / 895));
}
}
.hero--about {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hero--about .hero__wrapper {
padding: 150px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 150px;
padding-bottom: 150px;
position: relative;
}
@media (max-width: 1270px) {
.hero--about .hero__wrapper {
padding-top: calc(70px + 80 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.hero--about .hero__wrapper {
padding-bottom: calc(50px + 100 * ((100vw - 375px) / 895));
}
}
.hero--about .hero__wrapper::before {
position: absolute;
content: '';
background-color: var(--color-white);
height: 30px;
width: 100%;
bottom: -5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.hero--about .hero__offer {
max-width: 610px;
}
.hero--about .hero__title {
font-size: 35px;
line-height: 1.3;
font-weight: 600;
text-transform: uppercase;
}
@media (max-width: 1270px) {
.hero--about .hero__title {
font-size: calc(22px + 13 * ((100vw - 375px) / 895));
}
}
.hero--about .hero__text {
color: var(--color-white);
max-width: 570px;
}
.hero--about .hero__text p:first-child {
font-weight: 600;
font-size: 25px;
}
@media (max-width: 1270px) {
.hero--about .hero__text p:first-child {
font-size: calc(19px + 6 * ((100vw - 375px) / 895));
}
}
.hero--about .hero__text p:not(:last-child) {
margin-bottom: 20px;
}
.contacts {
padding-top: 50px;
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.contacts {
padding-top: calc(40px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.contacts {
padding-bottom: calc(40px + 40 * ((100vw - 375px) / 895));
}
}
.contacts__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
}
@media (max-width: 1270px) {
.contacts__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.contacts__maps {
max-width: 1175px;
width: 100%;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 90px;
}
@media (max-width: 1270px) {
.contacts__maps {
gap: 60px;
}
}
@media (max-width: 991.98px) {
.contacts__maps {
gap: 30px;
}
}
@media (max-width: 767.98px) {
.contacts__maps {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.contacts__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
margin-bottom: 28px;
}
@media (max-width: 1270px) {
.contacts__top {
margin-bottom: calc(18px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.contacts__top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.contacts__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.contacts__list {
gap: 15px;
}
}
@media (max-width: 991.98px) {
.contacts__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767.98px) {
.contacts__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.contacts__phone {
font-size: 38px;
font-weight: 300;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
line-height: 1;
gap: 20px;
}
@media (max-width: 1270px) {
.contacts__phone {
font-size: calc(25px + 13 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.contacts__phone {
gap: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
.contacts__phone span {
width: 120px;
font-size: 15px;
line-height: 1.4;
color: var(--color-accent);
}
.contacts__socials {
margin-bottom: 40px;
}
.contacts__map-big {
width: 100%;
height: 460px;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.contacts__map-big {
height: calc(300px + 160 * ((100vw - 375px) / 895));
}
}
.contacts-box {
background-color: var(--color-white);
border: 1px solid #cecece;
width: 100%;
height: 100%;
padding: 30px 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media (max-width: 1270px) {
.contacts-box {
padding: 25px 15px;
}
}
.contacts-box--requisites {
padding: 30px;
}
@media (max-width: 1270px) {
.contacts-box--requisites {
padding: 25px 15px;
}
}
.contacts-box--requisites .contacts-box__list {
gap: 9px;
width: 100%;
margin-bottom: 0;
}
.contacts-box--requisites .contacts-box__item {
font-size: 15px;
color: #949494;
padding-left: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 10px;
color: #949494;
font-weight: 400;
}
@media (max-width: 576px) {
.contacts-box--requisites .contacts-box__item {
font-size: 14px;
}
}
.contacts-box--requisites .contacts-box__left {
width: 46%;
}
.contacts-box--requisites .contacts-box__right {
width: 51%;
text-align: right;
color: #414141;
}
.contacts-box__title {
font-size: 18px;
margin-bottom: 10px;
text-transform: uppercase;
}
@media (max-width: 1270px) {
.contacts-box__title {
font-size: calc(16px + 2 * ((100vw - 375px) / 895));
}
}
.contacts-box__address {
margin-bottom: 13px;
}
.contacts-box__list {
display: -ms-grid;
display: grid;
gap: 15px;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.contacts-box__list {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.contacts-box__item {
font-size: 17px;
font-weight: 600;
position: relative;
padding-left: 20px;
}
@media (max-width: 1270px) {
.contacts-box__item {
font-size: calc(15px + 2 * ((100vw - 375px) / 895));
}
}
.contacts-box__item--phone::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: var(--color-accent);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/phone.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/phone.svg) no-repeat center/contain;
}
.contacts-box__item--email::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: var(--color-accent);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/mail.svg) no-repeat center/contain;
}
.contacts-box__item--schedule::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: var(--color-accent);
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/clock.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/clock.svg) no-repeat center/contain;
}
.contacts-box__item a {
font-weight: 400;
}
.contacts-box__btn {
text-transform: uppercase;
padding: 18px 24px;
font-size: 13px;
margin-top: auto;
}
.contacts-socials__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
@media (max-width: 1270px) {
.contacts-socials__list {
gap: 15px;
}
}
@media (max-width: 576px) {
.contacts-socials__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.contacts-socials__item {
width: 100%;
height: 100%;
}
.contacts-socials__link {
color: var(--color-white);
font-size: 20px;
height: 60px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.contacts-socials__link::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 20px;
background-color: var(--color-white);
}
@media (max-width: 767.98px) {
.contacts-socials__link::after {
left: 10px;
}
}
@media (max-width: 576px) {
.contacts-socials__link::after {
left: 20px;
}
}
.contacts-socials__link:active {
-webkit-transform: scale(0.98);
-ms-transform: scale(0.98);
transform: scale(0.98);
}
.contacts-socials__link--vk {
background-color: #4c75a3;
}
.contacts-socials__link--vk:hover {
background-color: #698fb9;
}
.contacts-socials__link--vk::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/vk.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/vk.svg) no-repeat center/contain;
}
.contacts-socials__link--telegram {
background-color: #039be5;
}
.contacts-socials__link--telegram:hover {
background-color: #1fb4fc;
}
.contacts-socials__link--telegram::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/telegram.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/telegram.svg) no-repeat center/contain;
}
.contacts-socials__link--whatsapp {
background-color: #4caf50;
}
.contacts-socials__link--whatsapp:hover {
background-color: #6ec071;
}
.contacts-socials__link--whatsapp::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/whatsapp.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/whatsapp.svg) no-repeat center/contain;
}
.map-card {
width: 100%;
}
.map-card__title {
margin-bottom: 20px;
font-size: 25px;
}
@media (max-width: 1270px) {
.map-card__title {
margin-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.map-card__title {
font-size: calc(19px + 6 * ((100vw - 375px) / 895));
}
}
.map-card__text {
color: #646464;
font-size: 17px;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.map-card__text {
font-size: calc(15px + 2 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.map-card__text {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.map-card__map {
width: 100%;
height: 400px;
height: 400px;
}
@media (max-width: 1270px) {
.map-card__map {
height: calc(300px + 100 * ((100vw - 375px) / 895));
}
}
.download {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.download__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 5px;
}
@media (max-width: 1270px) {
.download__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.download__wrapper {
padding: 105px 0 120px;
padding-top: 105px;
padding-bottom: 120px;
}
@media (max-width: 1270px) {
.download__wrapper {
padding-top: calc(60px + 45 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.download__wrapper {
padding-bottom: calc(60px + 60 * ((100vw - 375px) / 895));
}
}
.download__text {
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.download__text {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.download__btn {
font-size: 22px;
padding: 25px 45px;
}
@media (max-width: 1270px) {
.download__btn {
font-size: calc(14px + 8 * ((100vw - 375px) / 895));
}
}
@media (max-width: 767.98px) {
.download__btn {
padding: 16px 30px;
}
}
.portfolio {
padding-top: 40px;
padding-bottom: 70px;
}
@media (max-width: 1270px) {
.portfolio {
padding-top: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.portfolio {
padding-bottom: calc(50px + 20 * ((100vw - 375px) / 895));
}
}
.portfolio__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
}
@media (max-width: 1270px) {
.portfolio__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.portfolio__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
@media (max-width: 991.98px) {
.portfolio__top {
border: 0;
padding-bottom: 0;
}
}
@media (max-width: 991.98px) {
.portfolio__top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 20px;
}
}
.portfolio__top-inner {
max-width: 920px;
width: 100%;
}
@media (max-width: 991.98px) {
.portfolio__top-inner {
overflow-x: auto;
width: 100%;
}
}
.portfolio__top-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 60px;
}
@media (max-width: 1270px) {
.portfolio__top-list {
gap: calc(15px + 45 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.portfolio__top-list {
min-width: 850px;
gap: 30px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.portfolio__top-btn {
color: #888686;
position: relative;
}
.portfolio__top-btn::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
background-color: var(--color-accent);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
bottom: -34px;
left: 0;
}
@media (max-width: 991.98px) {
.portfolio__top-btn::after {
bottom: 0px;
}
}
.portfolio__top-btn.mixitup-control-active {
color: var(--color-accent);
}
.portfolio__top-btn.mixitup-control-active::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.portfolio__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.portfolio__list {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.portfolio__list {
-ms-grid-columns: (minmax(auto, 395px)) [2];
grid-template-columns: repeat(2, minmax(auto, 395px));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 20px;
}
}
.portfolio__item {
height: 100%;
width: 100%;
}
.portfolio-card {
max-width: 395px;
width: 100%;
height: 100%;
position: relative;
}
.portfolio-card:hover .portfolio-card__top img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.portfolio-card__top {
margin-bottom: 20px;
width: 100%;
height: 280px;
height: 280px;
overflow: hidden;
}
@media (max-width: 1270px) {
.portfolio-card__top {
height: calc(120px + 160 * ((100vw - 375px) / 895));
}
}
.portfolio-card__top img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 450ms ease;
-o-transition: 450ms ease;
transition: 450ms ease;
}
.portfolio-card__title {
font-size: 19px;
font-size: 19px;
line-height: 1.1;
font-weight: 400;
}
@media (max-width: 1270px) {
.portfolio-card__title {
font-size: calc(15px + 4 * ((100vw - 375px) / 895));
}
}
.portfolio-card__link {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.delivery {
padding-top: 40px;
}
@media (max-width: 1270px) {
.delivery {
padding-top: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.delivery__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.delivery__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.delivery__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.delivery__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 20px 30px;
}
@media (max-width: 767.98px) {
.delivery__list {
gap: 20px;
}
}
@media (max-width: 576px) {
.delivery__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.delivery__item {
width: 100%;
height: 100%;
}
.delivery-card {
background-color: #fbfbfb;
border: 1px solid #e6e6e6;
height: 100%;
width: 100%;
padding: 40px;
}
@media (max-width: 1270px) {
.delivery-card {
padding: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
.delivery-card__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.delivery-card__icon {
width: 50px;
height: 50px;
background-color: var(--color-accent);
-ms-flex-negative: 0;
flex-shrink: 0;
}
.payment {
padding-top: 70px;
padding-bottom: 20px;
}
@media (max-width: 1270px) {
.payment {
padding-top: calc(40px + 30 * ((100vw - 375px) / 895));
}
}
.payment__title {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.payment__title {
font-size: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.payment__title {
margin-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.payment__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
@media (max-width: 991.98px) {
.payment__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767.98px) {
.payment__list {
gap: 20px;
}
}
@media (max-width: 576px) {
.payment__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.purchase-returns {
padding: 25px;
padding-bottom: 70px;
}
@media (max-width: 1270px) {
.purchase-returns {
padding-bottom: calc(40px + 30 * ((100vw - 375px) / 895));
}
}
.purchase-returns__title {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 33px;
text-align: center;
}
@media (max-width: 1270px) {
.purchase-returns__title {
font-size: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.purchase-returns__title {
margin-bottom: calc(23px + 10 * ((100vw - 375px) / 895));
}
}
.purchase-returns__text {
max-width: 950px;
margin: 0 auto;
font-size: 18px;
}
@media (max-width: 1270px) {
.purchase-returns__text {
font-size: calc(16px + 2 * ((100vw - 375px) / 895));
}
}
.purchase-returns__text p:not(:last-child) {
margin-bottom: 25px;
}
@media (max-width: 1270px) {
.purchase-returns__text p:not(:last-child) {
margin-bottom: calc(15px + 10 * ((100vw - 375px) / 895));
}
}
.blog {
padding-top: 25px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.blog {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.blog__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
}
@media (max-width: 1270px) {
.blog__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.blog__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
margin-bottom: 28px;
}
@media (max-width: 1270px) {
.blog__top {
margin-bottom: calc(18px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.blog__top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 20px;
}
}
.blog__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 35px 30px;
margin-bottom: 80px;
}
@media (max-width: 1270px) {
.blog__list {
margin-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.blog__list {
-ms-grid-columns: (minmax(auto, 395px)) [2];
grid-template-columns: repeat(2, minmax(auto, 395px));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 30px 10px;
}
}
@media (max-width: 360.98px) {
.blog__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.blog__item {
height: 100%;
width: 100%;
}
.blog .sort-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.blog .sort-box__name {
font-weight: 700;
}
.blog .sort-box__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
}
@media (max-width: 576px) {
.blog .sort-box__list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.blog .sort-box__btn {
color: #6a6a6a;
}
.blog .sort-box__btn--active {
color: var(--color-accent);
text-decoration: underline;
}
@media (max-width: 991.98px) {
.blog .sort-box {
display: none;
}
}
.blog__sort-accordion {
display: none;
}
@media (max-width: 991.98px) {
.blog__sort-accordion {
display: block;
width: 100%;
}
.blog__sort-accordion .blog-sort {
-moz-text-align-last: left;
text-align-last: left;
}
.blog__sort-accordion .blog-sort__name {
padding-right: 25px;
font-size: 16px;
line-height: 1;
}
.blog__sort-accordion .blog-sort__list {
padding-left: 20px;
}
}
.blog--section {
padding-top: 75px;
}
@media (max-width: 1270px) {
.blog--section {
padding-top: calc(40px + 35 * ((100vw - 375px) / 895));
}
}
.blog--section .blog__title {
text-align: center;
margin: 0 auto;
}
.blog--section .blog__list {
margin-bottom: 30px;
}
.blog--section .blog__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.blog--section .blog__item .blog-card__body {
padding-right: 0;
}
.blog--section .blog__item .blog-card__details {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
font-size: 13px;
}
@media (max-width: 1270px) {
.blog--section .blog__item .blog-card__details {
font-size: calc(9px + 4 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.blog--section .blog__item .blog-card__details {
margin-bottom: 10px;
}
}
@media (max-width: 360.98px) {
.blog--section .blog__item .blog-card__details {
font-size: 12px;
}
}
@media (max-width: 991.98px) {
.blog--section .blog__item--big {
grid-column: 1/-1;
}
}
.blog--section .blog__item--big .blog-card {
max-width: 100%;
}
@media (max-width: 991.98px) {
.blog--section .blog__item--big .blog-card__top {
height: calc(238px + 212 * (100vw - 375px) / 616);
}
}
.blog--section .blog__item--big .blog-card__title {
font-size: 23px;
}
@media (max-width: 1270px) {
.blog--section .blog__item--big .blog-card__title {
font-size: calc(17px + 6 * ((100vw - 375px) / 895));
}
}
.blog-card {
max-width: 395px;
width: 100%;
height: 100%;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.blog-card:hover .blog-card__top img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.blog-card__top {
position: relative;
height: 280px;
height: 280px;
margin-bottom: 10px;
display: block;
overflow: hidden;
}
@media (max-width: 1270px) {
.blog-card__top {
height: calc(150px + 130 * ((100vw - 375px) / 895));
}
}
@media (max-width: 360.98px) {
.blog-card__top {
height: 200px;
}
}
.blog-card__top img {
-webkit-transition: 450ms ease;
-o-transition: 450ms ease;
transition: 450ms ease;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.blog-card__body {
padding-right: 10px;
}
.blog-card__details {
line-height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
color: #9f9f9f;
gap: 30px;
}
@media (max-width: 991.98px) {
.blog-card__details {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
}
}
.blog-card__detail {
position: relative;
padding-left: 20px;
}
.blog-card__detail:hover a {
color: var(--color-accent);
}
.blog-card__detail::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
background-color: #9f9f9f;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.blog-card__detail--date::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
}
.blog-card__detail--user::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
}
.blog-card__title {
font-size: 19px;
}
@media (max-width: 1270px) {
.blog-card__title {
font-size: calc(14px + 5 * ((100vw - 375px) / 895));
}
}
.blog-card__title span {
display: block;
}
@media (max-width: 1270px) {
.blog-card__title span {
display: inline;
}
}
.blog-card__title a {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.blog-card__title a:hover {
color: var(--color-accent);
}
.blog-card__badges {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
position: absolute;
right: 20px;
bottom: 20px;
}
@media (max-width: 767.98px) {
.blog-card__badges {
right: initial;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 10px;
}
}
.blog-card__badge {
padding-left: 20px;
width: 70px;
background-color: rgba(99, 153, 51, 0.8);
color: var(--color-white);
height: 33px;
border-radius: 10px;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
line-height: 1;
position: relative;
}
@media (max-width: 576px) {
.blog-card__badge {
width: 50px;
padding-left: 10px;
height: 25px;
}
}
.blog-card__badge::after {
position: absolute;
content: '';
background-color: var(--color-white);
width: 14px;
height: 14px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 13px;
}
@media (max-width: 576px) {
.blog-card__badge::after {
left: 5px;
width: 10px;
height: 10px;
}
}
.blog-card__badge--view::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
}
.blog-card__badge--chat::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chat.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chat.svg) no-repeat center/contain;
}
.article {
padding-top: 50px;
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.article {
padding-top: calc(40px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.article {
padding-bottom: calc(40px + 40 * ((100vw - 375px) / 895));
}
}
.article__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.article__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.article__title {
margin-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
.article__top {
max-width: 975px;
margin: 0 auto;
}
.article__wrapper {
max-width: 950px;
margin: 0 auto;
}
.article__preview {
max-width: 970px;
height: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.article__preview {
margin-bottom: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.article__preview {
height: calc(220px + 280 * (100vw - 320px) / 671);
}
}
.article__preview img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px;
}
.article__body {
padding-bottom: 50px;
border-bottom: 1px solid #ececec;
}
@media (max-width: 1270px) {
.article__body {
padding-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.article__bottom {
padding-bottom: 30px;
border-bottom: 1px solid #ececec;
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [5];
grid-template-columns: repeat(5, auto);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 30px 0;
gap: 30px;
}
@media (max-width: 1270px) {
.article__bottom {
padding-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.article__bottom {
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
@media (max-width: 576px) {
.article__bottom {
-ms-grid-columns: auto;
grid-template-columns: auto;
}
}
.article__text {
font-size: 18px;
line-height: 1.6;
}
@media (max-width: 1270px) {
.article__text {
font-size: calc(16px + 2 * ((100vw - 375px) / 895));
}
}
.article__text p:not(:last-child) {
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.article__text p:not(:last-child) {
margin-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
.article__date {
position: relative;
color: #bbb;
padding-left: 28px;
font-size: 15px;
margin-bottom: 25px;
line-height: 1;
}
.article__date::after {
position: absolute;
content: '';
width: 14px;
height: 14px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
background-color: #bbb;
}
.article__author {
font-size: 16px;
line-height: 1;
font-weight: 400;
color: #3d3d3d;
padding-left: 20px;
position: relative;
}
.article__author::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
background-color: #bbb;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
}
.article__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 13px;
line-height: 1;
}
.article__view,
.article__comments {
background-color: #f0f0f0;
border-radius: 5px;
font-size: 16px;
line-height: 1;
font-weight: 500;
color: #4c4c4c;
width: 66px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
padding-left: 10px;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.article__view:hover,
.article__comments:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
.article__view:hover::after,
.article__comments:hover::after {
background-color: var(--color-white);
}
.article__view::after,
.article__comments::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 12px;
background-color: #4c4c4c;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.article__view::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
}
.article__comments::after {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chat.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chat.svg) no-repeat center/contain;
}
.read-also {
padding-bottom: 70px;
}
@media (max-width: 1270px) {
.read-also {
padding-bottom: calc(50px + 20 * ((100vw - 375px) / 895));
}
}
.read-also__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.read-also__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.read-also__title {
margin-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.read-also__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
@media (max-width: 991.98px) {
.read-also__list {
-ms-grid-columns: (minmax(auto, 400px)) [2];
grid-template-columns: repeat(2, minmax(auto, 400px));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 360.98px) {
.read-also__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.read-also__item .blog-card__title {
font-size: 17px;
}
.read-also__item .blog-card__top {
height: 215px;
}
@media (max-width: 767.98px) {
.read-also__item .blog-card__top {
height: calc(120px + 95 * (100vw - 320px) / 950);
}
}
@media (max-width: 360.98px) {
.read-also__item .blog-card__top {
height: 180px;
}
}
.read-also__item .blog-card__badges {
bottom: 8px;
right: 8px;
}
.read-also__item .blog-card__badge {
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media (max-width: 1270px) {
.read-also__item .blog-card__details {
gap: 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.advantages {
padding-top: 90px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.advantages {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.advantages__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 60px;
text-align: center;
}
@media (max-width: 1270px) {
.advantages__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages__title {
margin-bottom: calc(30px + 30 * ((100vw - 375px) / 895));
}
}
.advantages__title span {
color: var(--color-accent);
}
.advantages__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 40px;
counter-reset: number;
}
@media (max-width: 1270px) {
.advantages__list {
gap: 30px 20px;
}
}
@media (max-width: 991.98px) {
.advantages__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.advantages__list {
gap: 5px;
}
}
.advantages__item {
width: 100%;
height: 100%;
}
.advantages--pt30 {
padding-top: 30px;
}
.advantages-card {
width: 100%;
height: 400px;
padding: 40px;
padding-top: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: var(--color-white);
position: relative;
z-index: 1;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 100px;
height: 400px;
}
@media (max-width: 1270px) {
.advantages-card {
padding-left: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card {
padding-right: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card {
padding-bottom: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card {
padding-top: calc(55px + 45 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card {
height: calc(170px + 230 * ((100vw - 375px) / 895));
}
}
.advantages-card:hover::before {
opacity: 1;
visibility: visible;
}
.advantages-card:hover .advantages-card__body {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.advantages-card:hover .advantages-card__title::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.advantages-card::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--color-accent);
z-index: -1;
opacity: 0;
visibility: hidden;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.advantages-card::after {
position: absolute;
counter-increment: number;
content: counters(number, '.', decimal-leading-zero);
color: var(--color-white);
top: 30px;
left: 40px;
font-size: 19px;
line-height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid var(--color-white);
border-radius: 50%;
height: 43px;
width: 43px;
top: 30px;
left: 40px;
font-size: 19px;
}
@media (max-width: 1270px) {
.advantages-card::after {
height: calc(33px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card::after {
width: calc(33px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card::after {
top: calc(10px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card::after {
left: calc(15px + 25 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card::after {
font-size: calc(14px + 5 * ((100vw - 375px) / 895));
}
}
.advantages-card__title {
text-transform: uppercase;
padding-bottom: 15px;
margin-bottom: 25px;
position: relative;
font-size: 23px;
margin-bottom: 25px;
padding-bottom: 15px;
}
@media (max-width: 1270px) {
.advantages-card__title {
font-size: calc(12px + 11 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card__title {
margin-bottom: calc(12px + 13 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card__title {
padding-bottom: calc(5px + 10 * ((100vw - 375px) / 895));
}
}
.advantages-card__title::after {
position: absolute;
content: '';
width: 32px;
height: 1px;
background-color: var(--color-white);
bottom: 0;
left: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transition: 300ms ease;
-o-transition: 300ms ease;
transition: 300ms ease;
}
.advantages-card__text {
font-size: 20px;
line-height: 25px;
}
@media (max-width: 1270px) {
.advantages-card__text {
font-size: calc(10px + 12 * ((100vw - 375px) / 895));
}
}
.advantages-card__body {
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: 400ms ease;
-o-transition: 400ms ease;
transition: 400ms ease;
color: #fafef8;
}
.advantages-card--list {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 30px;
padding-top: 105px;
height: 400px;
}
@media (max-width: 1270px) {
.advantages-card--list {
height: calc(280px + 120 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card--list {
padding: 20px;
padding-top: 70px;
}
}
@media (max-width: 576px) {
.advantages-card--list {
padding: 20px;
padding-top: 50px;
}
}
@media (max-width: 360.98px) {
.advantages-card--list {
padding: 10px;
padding-top: 50px;
}
}
.advantages-card--list::after {
font-size: 25px;
line-height: 1;
font-weight: 800;
color: #fafef8;
border-color: rgba(0, 0, 0, 0);
width: auto;
font-size: 25px;
}
@media (max-width: 1270px) {
.advantages-card--list::after {
font-size: calc(19px + 6 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.advantages-card--list::after {
top: 20px;
left: 20px;
}
}
@media (max-width: 576px) {
.advantages-card--list::after {
top: 10px;
}
}
@media (max-width: 360.98px) {
.advantages-card--list::after {
left: 10px;
}
}
.advantages-card--list .advantages-card__title {
margin-bottom: 20px;
padding-bottom: 0;
}
.advantages-card--list .advantages-card__title::after {
display: none;
}
@media (max-width: 360.98px) {
.advantages-card--list .advantages-card__title {
margin-bottom: 10px;
}
}
.advantages-card--list .advantages-card__list {
display: -ms-grid;
display: grid;
gap: 15px;
}
.advantages-card--list .advantages-card__item {
padding-left: 11px;
position: relative;
}
.advantages-card--list .advantages-card__item::after {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-white);
left: 0;
top: 8px;
}
.advantages-card--list .advantages-card__text {
font-weight: 400;
color: #fafef8;
font-size: 16px;
}
@media (max-width: 1270px) {
.advantages-card--list .advantages-card__text {
font-size: calc(10px + 6 * ((100vw - 375px) / 895));
}
}
.categories {
padding-top: 90px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.categories {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.categories__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.categories__list {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.categories__list {
-ms-grid-columns: (auto) [3];
grid-template-columns: repeat(3, auto);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.categories__list {
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
}
}
.categories__item {
width: 100%;
height: 100%;
}
.categories__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.categories__btn {
border: 1px dashed var(--color-accent);
border-radius: 5px;
padding: 16px 62px 16px 42px;
font-size: 17px;
line-height: 1;
color: var(--color-accent);
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.categories__btn::after {
position: absolute;
content: '';
width: 10px;
height: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 40px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/chevron.svg) no-repeat center/contain;
background-color: var(--color-accent);
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.categories__btn:hover {
background-color: var(--color-accent);
border-style: dashed;
color: var(--color-white);
}
.categories__btn:hover::after {
background-color: var(--color-white);
}
.categories-card {
max-width: 310px;
background-color: var(--color-white);
border: 1px solid #e6e6e6;
-webkit-transition: 300ms ease;
-o-transition: 300ms ease;
transition: 300ms ease;
height: 100%;
padding-top: 20px;
text-align: center;
max-width: 310px;
}
@media (max-width: 1270px) {
.categories-card {
max-width: calc(170px + 140 * ((100vw - 375px) / 895));
}
}
.categories-card:hover {
-webkit-box-shadow: 0px 10px 38px 0px rgba(174, 174, 174, 0.36);
box-shadow: 0px 10px 38px 0px rgba(174, 174, 174, 0.36);
border-color: rgba(0, 0, 0, 0);
background-color: var(--color-white);
-webkit-transform: scale(1.01);
-ms-transform: scale(1.01);
transform: scale(1.01);
}
.categories-card:hover .categories-card__title {
color: var(--color-accent);
}
.categories-card:hover .categories-card__bottom {
opacity: 1;
visibility: visible;
}
.categories-card:hover .categories-card__info {
border-color: #e3e3e3;
}
.categories-card:hover .categories-card__btn {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.categories-card__top {
width: 100%;
height: 190px;
margin-bottom: 30px;
padding: 10px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 190px;
}
@media (max-width: 1270px) {
.categories-card__top {
height: calc(100px + 90 * ((100vw - 375px) / 895));
}
}
.categories-card__top img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.categories-card__title {
font-weight: 500;
text-transform: uppercase;
color: #3d3d3d;
padding-bottom: 15px;
margin-bottom: 20px;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
font-size: 18px;
padding-bottom: 15px;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.categories-card__title {
font-size: calc(12px + 6 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories-card__title {
padding-bottom: calc(11px + 4 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories-card__title {
margin-bottom: calc(11px + 9 * ((100vw - 375px) / 895));
}
}
.categories-card__title::after {
position: absolute;
content: '';
width: 20px;
height: 3px;
background-color: var(--color-accent);
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 20px;
}
@media (max-width: 1270px) {
.categories-card__title::after {
width: calc(11px + 9 * ((100vw - 375px) / 895));
}
}
.categories-card__link {
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
border-bottom: 1px dashed rgba(0, 0, 0, 0);
display: inline-block;
margin-right: 10px;
}
.categories-card__link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.categories-card__text {
font-size: 15px;
font-weight: 300;
text-align: center;
}
@media (max-width: 1270px) {
.categories-card__text p {
display: inline;
}
}
@media (max-width: 767.98px) {
.categories-card__text {
font-size: 14px;
}
}
.categories-card__body {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
position: relative;
padding: 30px;
}
@media (max-width: 1270px) {
.categories-card__body {
padding: calc(9px + 21 * ((100vw - 375px) / 895));
}
}
.categories-card__bottom {
position: absolute;
z-index: 1;
left: 0;
bottom: -40px;
padding: 0 20px 10px 20px;
width: 100%;
background-color: var(--color-white);
-webkit-transition: 600ms ease;
-o-transition: 600ms ease;
transition: 600ms ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
visibility: hidden;
border-bottom: 1px solid #e6e6e6;
}
.categories-card__btn {
width: 180px;
text-align: center;
-webkit-transition: 400ms ease;
-o-transition: 400ms ease;
transition: 400ms ease;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
padding-top: 15px;
padding-bottom: 15px;
width: 180px;
font-size: 16px;
padding-top: 15px;
padding-bottom: 15px;
}
@media (max-width: 1270px) {
.categories-card__btn {
width: calc(160px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories-card__btn {
font-size: calc(14px + 2 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories-card__btn {
padding-top: calc(10px + 5 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.categories-card__btn {
padding-bottom: calc(10px + 5 * ((100vw - 375px) / 895));
}
}
@media (max-width: 767.98px) {
.categories-card__btn {
font-weight: 500;
text-shadow: none;
}
}
.why {
color: var(--color-white);
padding-top: 90px;
padding-bottom: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
@media (max-width: 1270px) {
.why {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.why {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.why__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.why__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.why__title {
margin-bottom: calc(30px + 30 * ((100vw - 375px) / 895));
}
}
.why__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 55px;
position: relative;
}
@media (max-width: 1270px) {
.why__list {
gap: 30px;
}
}
@media (max-width: 767.98px) {
.why__list {
gap: 4px;
}
}
@media (max-width: 991.98px) {
.why__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
.why__list::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: -230px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__list::after {
display: none;
}
}
.why__item {
background-color: var(--color-white);
color: var(--color-dark);
padding: 30px;
padding-top: 110px;
position: relative;
height: 100%;
min-height: 320px;
min-height: 320px;
-webkit-transition: 300ms ease;
-o-transition: 300ms ease;
transition: 300ms ease;
}
@media (max-width: 1270px) {
.why__item {
min-height: calc(220px + 100 * ((100vw - 375px) / 895));
}
}
.why__item:hover {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
@media (max-width: 767.98px) {
.why__item {
padding: 15px;
padding-top: 80px;
}
}
.why__item::before {
position: absolute;
content: '';
width: 50px;
height: 50px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/1.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: 35px;
left: 35px;
}
@media (max-width: 767.98px) {
.why__item::before {
width: 30px;
height: 30px;
left: 15px;
}
}
.why__item:nth-child(1) {
overflow: hidden;
}
.why__item:nth-child(1)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/1.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.why__item:nth-child(1)::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
top: -160px;
right: -160px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(1)::after {
top: -140px;
right: -140px;
width: 200px;
height: 200px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse-small.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
.why__item:nth-child(2) {
overflow: hidden;
}
.why__item:nth-child(2)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/2.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.why__item:nth-child(2)::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
bottom: -170px;
right: -180px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse-small.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(2)::after {
bottom: -60px;
right: -60px;
width: 100px;
height: 100px;
}
}
.why__item:nth-child(3)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/3.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(3) {
overflow: hidden;
}
}
@media (max-width: 991.98px) and (max-width: 991.98px) {
.why__item:nth-child(3)::after {
position: absolute;
content: '';
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
bottom: -60px;
left: -80px;
width: 100px;
height: 100px;
}
}
.why__item:nth-child(4) {
overflow: hidden;
}
.why__item:nth-child(4)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/4.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.why__item:nth-child(4)::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
bottom: -230px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(4)::after {
width: 150px;
height: 150px;
bottom: -130px;
}
}
.why__item:nth-child(5) {
overflow: hidden;
}
.why__item:nth-child(5)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/5.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.why__item:nth-child(5)::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
top: -170px;
right: -180px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse-small.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(5)::after {
top: initial;
right: -60px;
bottom: -60px;
width: 100px;
height: 100px;
}
}
.why__item:nth-child(6) {
overflow: hidden;
}
.why__item:nth-child(6)::before {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/why/6.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.why__item:nth-child(6)::after {
position: absolute;
content: '';
width: 273px;
height: 273px;
bottom: -200px;
right: -200px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 991.98px) {
.why__item:nth-child(6)::after {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/ellipse-small.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: initial;
right: initial;
left: -60px;
bottom: -60px;
width: 100px;
height: 100px;
}
}
.why__heading {
font-size: 23px;
line-height: 1.3;
font-weight: 700;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 20px;
font-size: 23px;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.why__heading {
font-size: calc(13px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.why__heading {
margin-bottom: calc(10px + 10 * ((100vw - 375px) / 895));
}
}
.why__text {
font-size: 17px;
color: #5e5e5e;
font-size: 17px;
}
@media (max-width: 1270px) {
.why__text {
font-size: calc(12px + 5 * ((100vw - 375px) / 895));
}
}
.tagline {
color: var(--color-white);
padding-top: 70px;
padding-bottom: 100px;
min-height: 670px;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow: hidden;
}
@media (max-width: 1270px) {
.tagline {
padding-top: calc(40px + 30 * ((100vw - 375px) / 895));
}
}
.tagline__wrapper {
max-width: 900px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1.1fr;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
}
@media (max-width: 1470px) {
.tagline__wrapper {
gap: 30px;
max-width: calc(650px + 150 * (100vw - 991px) / 479);
}
}
@media (max-width: 991.98px) {
.tagline__wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
max-width: 100%;
}
}
.tagline__offer {
max-width: 450px;
}
@media (max-width: 991.98px) {
.tagline__offer {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
max-width: 100%;
text-align: center;
}
}
.tagline__title {
font-size: 36px;
line-height: 1.3;
font-weight: 600;
color: #fff;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.tagline__title {
font-size: calc(26px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.tagline__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.tagline__text {
font-size: 18px;
}
@media (max-width: 767.98px) {
.tagline__text {
font-size: 16px;
}
}
.tagline__text p:not(:last-child) {
margin-bottom: 20px;
}
.tagline__left {
position: relative;
}
.tagline__founder {
width: 100%;
height: 580px;
position: relative;
}
@media (max-width: 991.98px) {
.tagline__founder {
width: 48%;
height: calc(260px + 220 * (100vw - 375px) / 616);
}
}
.tagline__founder img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px 50px 0px 0px;
display: block;
margin-bottom: 20px;
}
@media (max-width: 767.98px) {
.tagline__founder img {
border-radius: 10px 20px 0px 0px;
}
}
.tagline__name {
position: absolute;
bottom: 40px;
left: 40px;
color: var(--color-white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media (max-width: 767.98px) {
.tagline__name {
position: static;
}
}
.tagline__name h3 {
line-height: 1;
font-weight: 600;
font-size: 30px;
}
@media (max-width: 1270px) {
.tagline__name h3 {
font-size: calc(21px + 9 * ((100vw - 375px) / 895));
}
}
.tagline__name span {
font-weight: 400;
font-style: italic;
font-size: 17px;
}
@media (max-width: 1270px) {
.tagline__name span {
font-size: calc(12px + 5 * ((100vw - 375px) / 895));
}
}
.tagline__right {
margin-top: auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
height: 98%;
width: 30%;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/tagline-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 30px;
padding: 30px;
}
@media (max-width: 1470px) {
.tagline__right {
width: calc(300px + 200 * (100vw - 991px) / 479);
}
}
@media (max-width: 991.98px) {
.tagline__right {
bottom: 40px;
top: initial;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/tagline-bg-2.jpg);
}
}
@media (max-width: 991.98px) and (max-width: 991.98px) {
.tagline__right {
width: 48%;
height: calc(310px + 260 * (100vw - 375px) / 616);
bottom: 20px;
}
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
.tagline__right {
bottom: calc(50px + -30 * (100vw - 375px) / 393);
}
}
@media (max-width: 1270px) {
.tagline__right {
padding: calc(15px + 15 * ((100vw - 375px) / 895));
}
}
.tagline__right-offer {
max-width: 250px;
margin-bottom: 65px;
}
@media (max-width: 767.98px) {
.tagline__right-offer {
margin-bottom: 0;
}
}
.tagline__right-title {
font-size: 30px;
line-height: 1.3;
font-weight: 900;
color: #fff;
margin-bottom: 20px;
font-size: 30px;
}
@media (max-width: 1270px) {
.tagline__right-title {
font-size: calc(17px + 13 * ((100vw - 375px) / 895));
}
}
.formula {
padding-bottom: 90px;
padding-top: 90px;
background-color: #fafef8;
}
@media (max-width: 1270px) {
.formula {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.formula__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
}
@media (max-width: 1270px) {
.formula__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.formula__title span {
color: var(--color-accent);
text-decoration: underline;
}
.formula__text {
font-size: 25px;
max-width: 980px;
margin: 0 auto;
text-align: center;
font-weight: 300;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.formula__text {
font-size: calc(18px + 7 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula__text {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.formula__text span {
color: var(--color-accent);
font-weight: 700;
}
.formula__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(auto, 415px) minmax(auto, 310px) minmax(auto, 355px);
grid-template-columns: minmax(auto, 415px) minmax(auto, 310px) minmax(
auto,
355px
);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
}
@media (max-width: 1270px) {
.formula__list {
-ms-grid-columns: minmax(auto, 415px) minmax(auto, 310px)
minmax(auto, 305px);
grid-template-columns: minmax(auto, 415px) minmax(auto, 310px) minmax(
auto,
305px
);
}
}
@media (max-width: 991.98px) {
.formula__list {
-ms-grid-columns: auto;
grid-template-columns: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 50px;
}
}
.formula__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 17px;
position: relative;
}
@media (max-width: 991.98px) {
.formula__item {
background-color: var(--color-white);
-webkit-box-shadow: 0px 2px 3px 0px rgba(50, 71, 89, 0.1);
box-shadow: 0px 2px 3px 0px rgba(50, 71, 89, 0.1);
border-radius: 10px;
padding: 20px 15px;
gap: 40px;
padding-left: 100px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 400px;
width: 100%;
text-align: center;
}
}
.formula__item:nth-child(3) .formula__img {
max-widht: 237px;
height: 237px;
}
@media (max-width: 1270px) {
.formula__item:nth-child(3) .formula__img {
max-widht: calc(80px + 157 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula__item:nth-child(3) .formula__img {
height: calc(80px + 157 * ((100vw - 375px) / 895));
}
}
.formula__item:nth-child(3) .formula__img img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media (max-width: 991.98px) {
.formula__item:nth-child(3) .formula__img {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
@media (max-width: 991.98px) {
.formula__item:nth-child(3) {
padding-right: 65px !important;
}
}
.formula__item:nth-child(1) .formula__img {
max-widht: 70px;
height: 120px;
}
@media (max-width: 1270px) {
.formula__item:nth-child(1) .formula__img {
max-widht: calc(35px + 35 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula__item:nth-child(1) .formula__img {
height: calc(60px + 60 * ((100vw - 375px) / 895));
}
}
.formula__item:nth-child(1) .formula__img img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.formula__item:nth-child(2) .formula__img {
max-width: 170px;
height: 130px;
max-widht: 170px;
height: 130px;
}
@media (max-width: 1270px) {
.formula__item:nth-child(2) .formula__img {
max-widht: calc(75px + 95 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.formula__item:nth-child(2) .formula__img {
height: calc(55px + 75 * ((100vw - 375px) / 895));
}
}
.formula__item:nth-child(2) .formula__img img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media (max-width: 991.98px) {
.formula__item:nth-child(2) .formula__img {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
@media (max-width: 991.98px) {
.formula__item:nth-child(2) {
padding-right: 65px !important;
}
}
.formula__item:nth-child(1),
.formula__item:nth-child(2) {
padding-right: 60px;
}
@media (max-width: 1270px) {
.formula__item:nth-child(1),
.formula__item:nth-child(2) {
padding-right: 40px;
}
}
.formula__item:nth-child(1)::after,
.formula__item:nth-child(2)::after {
position: absolute;
content: '';
width: 30px;
height: 30px;
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/equals.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (max-width: 991.98px) {
.formula__item:nth-child(1)::after,
.formula__item:nth-child(2)::after {
right: initial;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: initial;
-webkit-transform: initial;
-ms-transform: initial;
transform: initial;
bottom: -42px;
}
}
.formula__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media (max-width: 991.98px) {
.formula__info {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.formula__info p {
line-height: 1;
font-family: 'Oswald';
font-weight: bold;
color: var(--color-accent);
font-size: 90px;
}
@media (max-width: 1270px) {
.formula__info p {
font-size: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.formula__info span {
font-size: 19px;
color: #686868;
}
@media (max-width: 991.98px) {
.formula__img {
position: absolute;
left: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 80%;
width: 100px;
}
}
@media (max-width: 767.98px) {
.formula__img {
width: 80px;
}
}
.news {
padding-top: 80px;
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.news {
padding-top: calc(40px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.news {
padding-bottom: calc(40px + 40 * ((100vw - 375px) / 895));
}
}
.news__title {
text-align: center;
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.news__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.news__title {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.news__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
gap: 39px;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.news__list {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.news__list {
gap: 20px;
}
}
@media (max-width: 991.98px) {
.news__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
.news__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.news__item {
width: 100%;
height: 100%;
}
.news__item--big {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1/3;
}
@media (max-width: 991.98px) {
.news__item--big {
height: calc(245px + 205 * (100vw - 375px) / 616);
}
}
.news__item--big .news-card {
max-width: 100%;
position: relative;
color: var(--color-white);
height: 100%;
}
.news__item--big .news-card__top {
width: 100%;
height: 100%;
color: var(--color-white);
}
.news__item--big .news-card__title {
color: var(--color-white);
font-size: 23px;
}
@media (max-width: 1270px) {
.news__item--big .news-card__title {
font-size: calc(17px + 6 * ((100vw - 375px) / 895));
}
}
.news__item--big .news-card__details {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767.98px) {
.news__item--big .news-card__details {
padding-bottom: 0;
}
}
.news__item--big .news-card__date {
position: relative;
background-color: rgba(0, 0, 0, 0);
width: auto;
height: auto;
padding-left: 20px;
}
@media (max-width: 767.98px) {
.news__item--big .news-card__date {
padding-left: 17px;
}
.news__item--big .news-card__date::after {
top: 30%;
width: 10px;
height: 10px;
}
}
.news__item--big .news-card__date::after {
left: 0;
}
.news__item--big .news-card__body {
position: absolute;
max-width: 335px;
width: calc(100% - 40px);
bottom: 40px;
left: 40px;
color: var(--color-white);
}
@media (max-width: 767.98px) {
.news__item--big .news-card__body {
bottom: 17px;
left: 20px;
}
}
.news__item--big .news-card__details {
border-bottom: none;
}
@media (max-width: 360.98px) {
.news__item--big .news-card__details span {
display: inline;
}
}
.news__item--big .news-card__title {
max-width: 100%;
}
.news-card {
max-width: 290px;
width: 100%;
}
.news-card__details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: 12px;
color: #9f9f9f;
border-bottom: 1px solid #e9e9e9;
margin-bottom: 14px;
padding-top: 15px;
gap: 20px;
font-size: 13px;
line-height: 1;
font-size: 13px;
}
@media (max-width: 1270px) {
.news-card__details {
font-size: calc(11px + 2 * ((100vw - 375px) / 895));
}
}
.news-card__top {
display: block;
width: 100%;
height: 210px;
position: relative;
height: 210px;
}
@media (max-width: 1270px) {
.news-card__top {
height: calc(120px + 90 * ((100vw - 375px) / 895));
}
}
.news-card__top img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.news-card__date {
position: absolute;
bottom: 0;
left: 0;
height: 37px;
width: 132px;
background-color: var(--color-accent);
color: var(--color-white);
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
line-height: 1;
}
@media (max-width: 767.98px) {
.news-card__date {
height: 21px;
width: 75px;
font-size: 10px;
}
}
.news-card__date::after {
position: absolute;
content: '';
width: 13px;
height: 13px;
top: 45%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 18px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/calendar.svg) no-repeat center/contain;
background-color: var(--color-white);
}
@media (max-width: 767.98px) {
.news-card__date::after {
left: 5px;
width: 7px;
height: 7px;
}
}
.news-card__author {
padding-left: 21px;
position: relative;
}
@media (max-width: 360.98px) {
.news-card__author span {
display: block;
line-height: 1.4;
}
}
.news-card__author::after {
position: absolute;
content: '';
left: 0;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 13px;
height: 13px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/user.svg) no-repeat center/contain;
background-color: #bbb;
}
.news-card__views {
padding-left: 21px;
position: relative;
}
.news-card__views::after {
position: absolute;
content: '';
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 13px;
height: 10px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/eye.svg) no-repeat center/contain;
background-color: #bbb;
}
.news-card__title {
font-weight: 600;
color: #323131;
margin-bottom: 5px;
max-width: 230px;
font-size: 19px;
}
@media (max-width: 1270px) {
.news-card__title {
font-size: calc(14px + 5 * ((100vw - 375px) / 895));
}
}
.news-card__title a {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.news-card__title:hover a {
color: var(--color-accent);
}
.news-card__text {
font-size: 14px;
color: #6c6c6c;
margin-bottom: 10px;
}
.news-card__btn {
position: relative;
padding-right: 10px;
color: var(--color-accent);
font-size: 13px;
line-height: 1;
font-weight: 500;
}
.news-card__btn::after {
position: absolute;
content: '';
right: 0;
top: 35%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 7px;
height: 7px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/triangle.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/triangle.svg) no-repeat center/contain;
background-color: var(--color-accent);
}
.our-works {
padding-top: 75px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.our-works {
padding-top: calc(40px + 35 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.our-works {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.our-works__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.our-works__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.our-works__title {
margin-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.our-works__top {
margin-bottom: 50px;
border-bottom: 1px solid #e0e0e0;
}
@media (max-width: 1270px) {
.our-works__top {
margin-bottom: calc(40px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.our-works__top {
overflow-x: auto;
width: 100%;
}
}
.our-works__top-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 880px;
width: 100%;
margin: 0 auto;
gap: 20px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991.98px) {
.our-works__top-list {
gap: 15px;
min-width: 800px;
}
}
@media (max-width: 576px) {
.our-works__top-list {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.our-works__top-btn {
font-size: 18px;
line-height: 1;
color: #888686;
padding-bottom: 17px;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
font-size: 18px;
}
@media (max-width: 1270px) {
.our-works__top-btn {
font-size: calc(15px + 3 * ((100vw - 375px) / 895));
}
}
.our-works__top-btn:hover {
color: var(--color-accent);
}
.our-works__top-btn::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
left: 0;
background-color: var(--color-accent);
bottom: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.our-works__top-btn.tabs-btn--active {
color: var(--color-accent);
}
.our-works__top-btn.tabs-btn--active::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.our-works__contents {
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.our-works__contents {
margin-bottom: calc(20px + 20 * ((100vw - 375px) / 895));
}
}
.our-works__slider {
padding-bottom: 40px;
}
.our-works__content {
padding-left: max(15px, (100% - 1240px)/2);
}
.our-works__content .swiper-button-next {
right: max(15px, (100% - 1240px)/2);
}
.our-works__content .swiper-pagination {
top: initial;
bottom: 0 !important;
max-width: 1240px;
}
.our-works .swiper-slide {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 405px;
max-width: 405px;
}
@media (max-width: 1270px) {
.our-works .swiper-slide {
max-width: calc(202px + 203 * ((100vw - 375px) / 895));
}
}
.our-works__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.work-card {
max-width: 405px;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.work-card__top {
height: 315px;
width: 100%;
margin-bottom: 20px;
-webkit-transition: 400ms ease;
-o-transition: 400ms ease;
transition: 400ms ease;
height: 315px;
}
@media (max-width: 1270px) {
.work-card__top {
height: calc(160px + 155 * ((100vw - 375px) / 895));
}
}
.work-card__top:hover {
opacity: 0.8;
}
.work-card__top img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.work-card__title {
font-size: 19px;
line-height: 1;
font-weight: 400;
color: #323131;
}
.work-card__title a {
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.work-card__title:hover a {
color: var(--color-accent);
}
.news-product {
padding-top: 75px;
padding-bottom: 75px;
}
@media (max-width: 1270px) {
.news-product {
padding-top: calc(40px + 35 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.news-product {
padding-bottom: calc(40px + 35 * ((100vw - 375px) / 895));
}
}
.news-product__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.news-product__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.news-product__title {
margin-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.news-product__top {
margin-bottom: 50px;
border-bottom: 1px solid #e0e0e0;
}
@media (max-width: 1270px) {
.news-product__top {
margin-bottom: calc(40px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.news-product__top {
overflow-x: auto;
width: 100%;
}
}
.news-product__top-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 560px;
width: 100%;
margin: 0 auto;
gap: 20px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991.98px) {
.news-product__top-list {
gap: 15px;
min-width: 570px;
}
}
@media (max-width: 576px) {
.news-product__top-list {
min-width: 450px;
}
}
.news-product__top-btn {
font-size: 18px;
line-height: 1;
color: #888686;
padding-bottom: 17px;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
font-size: 18px;
}
@media (max-width: 1270px) {
.news-product__top-btn {
font-size: calc(15px + 3 * ((100vw - 375px) / 895));
}
}
.news-product__top-btn:hover {
color: var(--color-accent);
}
.news-product__top-btn::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
left: 0;
background-color: var(--color-accent);
bottom: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.news-product__top-btn--active {
color: var(--color-accent);
}
.news-product__top-btn--active::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.news-product__slider {
padding-bottom: 40px;
position: relative;
}
.news-product__slides {
padding-top: 20px;
padding-bottom: 20px;
}
.news-product__content {
position: relative;
display: none;
}
.news-product__content .swiper-pagination {
top: initial;
bottom: 0 !important;
max-width: 1240px;
}
.news-product__content .swiper-button-next {
right: max(15px, (100% - 1240px)/2);
}
.news-product__content.active {
display: block;
-webkit-animation: opacity-visibility 700ms ease forwards;
animation: opacity-visibility 700ms ease forwards;
}
.news-product .swiper-slide {
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 305px;
}
@media (max-width: 1270px) {
.news-product .swiper-slide {
max-width: calc(220px + 85 * ((100vw - 375px) / 895));
}
}
.news-product__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.news-product--our-range .news-product__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 20px;
}
.news-product--our-range .news-product__title {
margin-bottom: 0;
}
.news-product--our-range .news-product__top-list {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-left: auto;
max-width: 70%;
}
.news-product--recommendations .news-product__title {
text-align: left;
}
.news-product--recommendations .swiper-pagination {
top: initial;
}
.work-card {
max-width: 405px;
width: 100%;
height: 100%;
}
.work-card__top {
height: 315px;
width: 100%;
margin-bottom: 20px;
height: 315px;
}
@media (max-width: 1270px) {
.work-card__top {
height: calc(160px + 155 * ((100vw - 375px) / 895));
}
}
.work-card__top img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.work-card__title {
font-size: 19px;
line-height: 1;
font-weight: 400;
color: #323131;
}
.reviews {
padding-top: 80px;
padding-bottom: 80px;
background-color: #f5f5f5;
}
@media (max-width: 1270px) {
.reviews {
padding-top: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.reviews {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.reviews__title {
margin-bottom: 60px;
font-size: 40px;
line-height: 1.3;
font-weight: 600;
}
@media (max-width: 1270px) {
.reviews__title {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.reviews__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.reviews__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
}
.reviews__slider {
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.reviews__slider {
padding-bottom: calc(60px + 20 * ((100vw - 375px) / 895));
}
}
.reviews__slider .swiper-pagination {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 1270px;
width: calc(100% - 30px);
top: initial;
}
.reviews__slider .swiper-button-next,
.reviews__slider .swiper-button-prev {
bottom: 10px;
top: initial;
border: 2px solid #639933;
}
.reviews__slider .swiper-button-next {
right: max(15px, (100% - 1270px)/2);
}
.reviews__slider .swiper-button-prev {
left: max(15px, (100% - 1270px)/2);
}
.reviews__slide {
max-width: 580px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
max-width: 580px;
}
@media (max-width: 1270px) {
.reviews__slide {
max-width: calc(330px + 250 * ((100vw - 375px) / 895));
}
}
.reviews__slide::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.5);
}
.reviews__slide.swiper-slide-active::after {
display: none;
}
.reviews-card {
max-width: 580px;
width: 100%;
background-color: var(--color-white);
-webkit-box-shadow: 0px 16px 32px 0px #e7e7e7;
box-shadow: 0px 16px 32px 0px #e7e7e7;
border-radius: 10px;
padding: 25px;
}
.reviews-card__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
border-bottom: 1px solid #eaeaea;
padding-bottom: 20px;
margin-bottom: 15px;
gap: 15px;
}
.reviews-card__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
@media (max-width: 991.98px) {
.reviews-card__right {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
}
.reviews-card__rating {
margin-left: auto;
}
@media (max-width: 991.98px) {
.reviews-card__rating {
margin-left: 0;
}
}
.reviews-card__author {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 17px;
}
.reviews-card__avatar {
display: block;
width: 66px;
height: 66px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.reviews-card__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
.reviews-card__date {
font-size: 16px;
line-height: 1;
color: #a7a7a7;
}
.reviews-card__name {
font-size: 16px;
line-height: 1;
font-weight: 400;
color: #323131;
}
.reviews-card__body {
margin-bottom: 10px;
}
.request {
background-color: var(--color-accent);
padding-top: 90px;
padding-bottom: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (max-width: 1270px) {
.request {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.request {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.request .iti__country-list {
background-color: var(--color-white);
}
.request .iti__county-name {
color: var(--color-black) !important;
}
.request .iti__dial-code {
color: var(--color-black) !important;
}
.request .iti__flag-container {
padding-bottom: 20px;
}
.request__top {
text-align: center;
margin-bottom: 30px;
}
.request__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 15px;
color: var(--color-white);
}
@media (max-width: 1270px) {
.request__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.request__text {
font-size: 20px;
line-height: 1.3;
color: #f9f9f9;
max-width: 650px;
margin: 0 auto;
font-size: 20px;
}
@media (max-width: 1270px) {
.request__text {
font-size: calc(15px + 5 * ((100vw - 375px) / 895));
}
}
.request__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.7fr 1fr;
grid-template-columns: 1.7fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 991.98px) {
.request__wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 30px;
}
}
.request__preview {
width: 100%;
height: 480px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 480px;
}
@media (max-width: 1270px) {
.request__preview {
height: calc(230px + 250 * ((100vw - 375px) / 895));
}
}
@media (max-width: 991.98px) {
.request__preview {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.request__form {
width: 100%;
}
.request--question {
padding-bottom: 90px;
position: relative;
}
@media (max-width: 991.98px) {
.request--question {
padding-bottom: 0;
}
}
.request--question .form-submit__group {
margin-bottom: 20px;
}
.request--question .request__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: initial;
grid-template-columns: initial;
gap: 40px;
z-index: 1;
}
.request--question .request__form {
padding-left: 690px;
z-index: 1;
}
@media (max-width: 1270px) {
.request--question .request__form {
padding-left: calc(500px + 155 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.request--question .request__form {
padding-left: 0;
}
}
.request--question .request__title {
margin-bottom: 5px;
}
.request--question .request__preview {
position: absolute;
left: 0;
bottom: 10px;
width: 690px;
height: 560px;
z-index: 0;
left: max(15px, (100% - 1270px)/2);
}
@media (max-width: 1270px) {
.request--question .request__preview {
width: calc(450px + 200 * (100vw - 991px) / 279);
height: calc(360px + 200 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.request--question .request__preview {
position: static;
height: 450px;
margin: 0 auto;
width: 450px;
height: calc(250px + 110 * (100vw - 375px) / 616);
}
}
@media (max-width: 576px) {
.request--question .request__preview {
width: 280px;
}
}
.request--no-top {
margin-top: -50px;
z-index: 1;
position: relative;
}
.request--no-top::after {
position: absolute;
content: '';
width: 100%;
height: 50px;
background-color: var(--color-accent);
top: 0;
left: 0;
}
.comments {
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.comments {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.comments__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.comments__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.comments__title {
margin-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.comments__form {
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.comments__form {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.comments__count {
font-size: 17px;
text-transform: uppercase;
line-height: 1;
font-weight: 700;
color: #2f2f2f;
margin-bottom: 80px;
}
@media (max-width: 1270px) {
.comments__count {
margin-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.comments__list {
display: -ms-grid;
display: grid;
gap: 50px;
}
@media (max-width: 1270px) {
.comments__list {
gap: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.comments .comments-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 25px;
}
@media (max-width: 767.98px) {
.comments .comments-item {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.comments .comments-item__left {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.comments .comments-item__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
margin-bottom: 20px;
}
@media (max-width: 767.98px) {
.comments .comments-item__top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.comments .comments-item__heading {
display: block;
line-height: 1;
font-weight: 400;
color: #40444a;
font-size: 28px;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.comments .comments-item__heading {
font-size: calc(20px + 8 * ((100vw - 375px) / 895));
}
}
.comments .comments-item__img {
width: 58px;
height: 58px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.comments .comments-item__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.comments .comments-item__name {
font-size: 17px;
line-height: 1;
font-weight: 600;
color: #40444a;
}
.comments .comments-item__date {
font-size: 13px;
font-weight: 400;
color: #989b9f;
}
.comments .comments-item__text {
font-size: 16px;
color: #515151;
margin-bottom: 15px;
}
.comments .comments-item__count {
width: 50px;
height: 32px;
background-color: #f0fae7;
border-radius: 5px;
font-size: 17px;
line-height: 1;
color: var(--color-accent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.comments .comments-item__answer-btn {
font-size: 15px;
line-height: 1;
font-weight: 400;
color: #5f6461;
}
.form-comment {
line-height: 1;
}
.form-comment__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 60px 1fr;
grid-template-columns: 60px 1fr;
gap: 30px;
}
@media (max-width: 991.98px) {
.form-comment__wrapper {
gap: 20px;
}
}
@media (max-width: 767.98px) {
.form-comment__wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.form-comment__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-comment__inputs {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 15px;
}
.form-comment__group {
width: 100%;
}
@media (max-width: 767.98px) {
.form-comment__group {
grid-column: 1/-1;
}
}
.form-comment__group--textarea {
grid-column: 1/-1;
height: 120px;
}
.form-comment__group--email {
max-width: 515px;
width: 100%;
}
.form-comment__input {
background-color: var(--color-white);
border: 1px solid #d5d5d5;
border-radius: 5px;
padding: 17px 25px;
width: 100%;
font-size: 17px;
line-height: 1;
font-weight: 400;
height: 100%;
}
.form-comment__input::-webkit-input-placeholder {
color: #b8b8b8;
}
.form-comment__input::-moz-placeholder {
color: #b8b8b8;
}
.form-comment__input:-ms-input-placeholder {
color: #b8b8b8;
}
.form-comment__input::-ms-input-placeholder {
color: #b8b8b8;
}
.form-comment__input::placeholder {
color: #b8b8b8;
}
.form-comment__bottom {
display: -ms-grid;
display: grid;
-ms-grid-columns: 125px minmax(auto, 515px) 200px auto;
grid-template-columns: 125px minmax(auto, 515px) 200px auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991.98px) {
.form-comment__bottom {
gap: 15px;
}
}
@media (max-width: 767.98px) {
.form-comment__bottom {
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
}
}
@media (max-width: 360.98px) {
.form-comment__bottom {
-ms-grid-columns: auto;
grid-template-columns: auto;
}
}
.form-comment__rating {
min-width: 215px;
color: #9c9c9c;
-ms-flex-negative: 0;
flex-shrink: 0;
line-height: 1;
}
@media (max-width: 991.98px) {
.form-comment__rating {
gap: 10px;
}
}
.form-comment__left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.form-comment__btn {
font-size: 17px;
text-shadow: none;
background-image: none;
background-color: var(--color-accent);
border-radius: 5px;
width: 200px;
text-transform: none;
}
@media (max-width: 991.98px) {
.form-comment__btn {
width: 150px;
}
}
@media (max-width: 576px) {
.form-comment__btn {
width: 130px;
-ms-grid-column-align: end;
justify-self: end;
}
}
@media (max-width: 360.98px) {
.form-comment__btn {
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
@media (max-width: 767.98px) {
.form-comment__come {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
grid-column: 1/-1;
}
}
.come-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.come-box__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
}
.come-box__link {
display: block;
width: 26px;
height: 26px;
border-radius: 50%;
}
.come-box__link--vk {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/vk.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.come-box__link--facebook {
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/facebook.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.delivery-cost {
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.delivery-cost {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.delivery-cost__top {
text-align: center;
max-width: 545px;
width: 100%;
margin: 0 auto;
margin-bottom: 45px;
}
@media (max-width: 1270px) {
.delivery-cost__top {
margin-bottom: calc(35px + 10 * ((100vw - 375px) / 895));
}
}
.delivery-cost__title {
line-height: 1.2;
font-weight: 600;
color: #323131;
font-size: 34px;
margin-bottom: 20px;
}
@media (max-width: 1270px) {
.delivery-cost__title {
font-size: calc(24px + 10 * ((100vw - 375px) / 895));
}
}
.delivery-cost__text {
font-size: 17px;
line-height: 1.2;
font-weight: 400;
color: #888;
}
.form-delivery {
max-width: 440px;
width: 100%;
margin: 0 auto;
display: -ms-grid;
display: grid;
gap: 17px;
}
.form-delivery__group {
width: 100%;
}
.form-delivery__input {
width: 100%;
padding: 15px 25px;
background-color: #fff;
border: 1px solid #d7d7d7;
border-radius: 10px;
}
.form-delivery__btn {
font-size: 21px;
text-transform: uppercase;
}
@media (max-width: 767.98px) {
.form-delivery__btn {
font-size: 16px;
}
}
.individual {
padding-top: 70px;
padding-bottom: 20px;
}
@media (max-width: 1270px) {
.individual {
padding-top: calc(40px + 30 * ((100vw - 375px) / 895));
}
}
.individual__title {
margin-bottom: 30px;
font-size: 30px;
}
@media (max-width: 1270px) {
.individual__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.individual__title {
font-size: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.individual__text {
font-size: 18px;
color: #323131;
}
@media (max-width: 767.98px) {
.individual__text {
font-size: 16px;
}
}
.individual__text p {
margin-bottom: 25px;
}
@media (max-width: 1270px) {
.individual__text p {
margin-bottom: calc(15px + 10 * ((100vw - 375px) / 895));
}
}
.team {
padding-top: 80px;
padding-bottom: 80px;
background-color: #f8f8f8;
}
@media (max-width: 1270px) {
.team {
padding-top: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.team {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.team__title {
text-align: center;
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.team__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.team__title {
margin-bottom: calc(30px + 30 * ((100vw - 375px) / 895));
}
}
.team__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(auto, 180px)) [4];
grid-template-columns: repeat(4, minmax(auto, 180px));
gap: 30px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 991.98px) {
.team__list {
-ms-grid-columns: (minmax(auto, 180px)) [2];
grid-template-columns: repeat(2, minmax(auto, 180px));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 50px 100px;
}
}
@media (max-width: 576px) {
.team__list {
gap: 30px 10px;
}
}
.team__item {
width: 100%;
height: 100%;
}
.team-card {
max-width: 180px;
width: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.team-card__top {
margin-bottom: 18px;
width: 177px;
height: 177px;
border: 5px solid var(--color-white);
border-radius: 50%;
overflow: hidden;
}
@media (max-width: 1270px) {
.team-card__top {
margin-bottom: calc(10px + 8 * ((100vw - 375px) / 895));
}
}
@media (max-width: 576px) {
.team-card__top {
width: 155px;
height: 155px;
border: 3px solid var(--color-white);
}
}
@media (max-width: 360.98px) {
.team-card__top {
width: 140px;
height: 140%;
}
}
.team-card__top img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.team-card__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
color: #323131;
text-align: center;
margin-bottom: 15px;
}
@media (max-width: 576px) {
.team-card__title {
font-size: 20px;
}
}
.team-card__info {
text-align: center;
font-size: 16px;
line-height: 1;
gap: 10px;
color: #656565;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media (max-width: 576px) {
.team-card__info {
font-size: 14px;
gap: 7px;
}
}
.team-card__prof {
font-size: 16px;
line-height: 1;
font-style: italic;
color: #919191;
display: block;
margin-bottom: 20px;
text-align: center;
}
@media (max-width: 576px) {
.team-card__prof {
font-size: 14px;
margin-bottom: 14px;
}
}
@media (max-width: 360.98px) {
.team-card__prof {
font-size: 12px;
}
}
.save {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-top: 80px;
padding-bottom: 150px;
}
@media (max-width: 1270px) {
.save {
padding-top: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.save {
padding-bottom: calc(30px + 120 * ((100vw - 375px) / 895));
}
}
.save__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
margin-bottom: 110px;
}
@media (max-width: 1270px) {
.save__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.save__title {
margin-bottom: calc(70px + 40 * ((100vw - 375px) / 895));
}
}
.save__title span {
color: var(--color-accent);
}
.save__formula {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
text-align: center;
font-weight: 300;
text-transform: uppercase;
color: #323131;
}
@media (max-width: 1270px) {
.save__formula {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
.save__formula span {
font-weight: 800;
color: var(--color-accent);
display: block;
}
.save__wrapper {
position: relative;
}
@media (max-width: 991.98px) {
.save__wrapper {
padding-bottom: calc(200px + 100 * (100vw - 375px) / 616);
}
}
.save__preview {
position: absolute;
top: 50%;
left: 0;
width: 365px;
height: 245px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 1270px) {
.save__preview {
width: calc(280px + 85 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.save__preview {
width: calc(150px + 150 * (100vw - 375px) / 616);
height: calc(150px + 100 * (100vw - 375px) / 616);
top: initial;
bottom: 10px;
}
}
.save__preview--bush {
left: initial;
right: 0;
}
.certificates {
padding-top: 80px;
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.certificates {
padding-top: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.certificates {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.certificates__title {
text-align: center;
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.certificates__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.certificates__title {
margin-bottom: calc(30px + 30 * ((100vw - 375px) / 895));
}
}
.certificates__slide {
max-width: 300px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 300px;
cursor: pointer;
}
@media (max-width: 1270px) {
.certificates__slide {
max-width: calc(200px + 100 * ((100vw - 375px) / 895));
}
}
.certificates__slider {
padding-bottom: 60px;
}
@media (max-width: 1270px) {
.certificates__slider {
padding-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.certificates__slider .swiper-pagination {
top: initial;
}
.certificates__slider .swiper-button-next,
.certificates__slider .swiper-button-prev {
top: calc(50% - 30px);
}
.certificates-card {
max-width: 300px;
width: 100%;
height: 435px;
height: 435px;
}
@media (max-width: 1270px) {
.certificates-card {
height: calc(300px + 135 * ((100vw - 375px) / 895));
}
}
.certificates-card img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.history {
padding-top: 20px;
padding-bottom: 80px;
}
@media (max-width: 1270px) {
.history {
padding-bottom: calc(50px + 30 * ((100vw - 375px) / 895));
}
}
.history__title {
font-size: 50px;
margin-bottom: 60px;
font-weight: 800;
line-height: 1.2;
}
@media (max-width: 1270px) {
.history__title {
font-size: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.history__title {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.history__wrapper {
position: relative;
}
.history__line {
position: absolute;
border-radius: 2px;
width: 2px;
height: calc(100% - 180px);
background-color: #ececec;
left: 430px;
bottom: 70px;
}
.history__line span {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 100%;
background-color: var(--color-accent);
}
@media (max-width: 1270px) {
.history__line {
left: calc(300px + 130 * (100vw - 768px) / 502);
height: calc(100% - 190px);
}
}
@media (max-width: 991.98px) {
.history__line {
height: calc(100% - 200px);
}
}
@media (max-width: 767.98px) {
.history__line {
height: calc(100% - 100px);
}
}
@media (max-width: 767.98px) {
.history__line {
left: 35px;
}
}
@media (max-width: 576px) {
.history__line {
left: 25px;
}
}
@media (max-width: 360.98px) {
.history__line {
left: 15px;
}
}
.history__list {
display: -ms-grid;
display: grid;
gap: 100px;
position: relative;
}
.history__item {
display: -ms-grid;
display: grid;
-ms-grid-columns: 300px 1fr;
grid-template-columns: 300px 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 200px;
position: relative;
}
@media (max-width: 991.98px) {
.history__item {
gap: calc(80px + 70 * (100vw - 768px) / 223);
}
}
@media (max-width: 767.98px) {
.history__item {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 20px;
padding-left: 100px;
}
}
@media (max-width: 576px) {
.history__item {
padding-left: 75px;
}
}
@media (max-width: 360.98px) {
.history__item {
padding-left: 50px;
}
}
.history__circle {
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
left: 410px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(-23%, #c8c8c8),
color-stop(126%, #ffffff)
);
background-image: -o-linear-gradient(bottom, #c8c8c8 -23%, #ffffff 126%);
background-image: linear-gradient(0deg, #c8c8c8 -23%, #ffffff 126%);
-webkit-box-shadow: 0px 0px 12px 0px #d8d8d8;
box-shadow: 0px 0px 12px 0px #d8d8d8;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.history__circle--active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(-23%, #639933),
color-stop(126%, #82c04b)
);
background-image: -o-linear-gradient(bottom, #639933 -23%, #82c04b 126%);
background-image: linear-gradient(0deg, #639933 -23%, #82c04b 126%);
-webkit-box-shadow: 0px 0px 12px 0px #85d43f;
box-shadow: 0px 0px 12px 0px #85d43f;
}
@media (max-width: 1270px) {
.history__circle {
left: calc(280px + 130 * (100vw - 768px) / 502);
}
}
@media (max-width: 767.98px) {
.history__circle {
left: 15px;
top: 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@media (max-width: 576px) {
.history__circle {
left: 5px;
}
}
@media (max-width: 360.98px) {
.history__circle {
width: 30px;
height: 30px;
left: 0;
}
}
.history__circle::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: var(--color-white);
border-radius: 50%;
}
@media (max-width: 360.98px) {
.history__circle::after {
width: 15px;
height: 15px;
}
}
.history__left {
font-size: 150px;
line-height: 1;
font-weight: 800;
color: #373737;
}
@media (max-width: 1270px) {
.history__left {
font-size: 130px;
}
}
@media (max-width: 991.98px) {
.history__left {
font-size: 100px;
}
}
@media (max-width: 767.98px) {
.history__left {
font-size: 50px;
}
}
.history__right {
font-size: 18px;
font-weight: 300;
color: #373737;
}
@media (max-width: 767.98px) {
.history__right {
font-size: 15px;
}
}
.catalog {
padding-top: 40px;
padding-bottom: 50px;
}
@media (max-width: 1270px) {
.catalog {
padding-top: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.catalog {
padding-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.catalog__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 30px;
}
@media (max-width: 1270px) {
.catalog__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.catalog__tags {
max-width: 1270px;
}
.catalog__title {
margin-bottom: calc(20px + 10 * ((100vw - 375px) / 895));
}
}
.catalog__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.325fr 1fr;
grid-template-columns: 0.325fr 1fr;
gap: 15px;
}
@media (max-width: 991.98px) {
.catalog__wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.catalog__tags {
max-width: 991px;
}
.catalog__filters {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(auto, 335px) minmax(auto, 185px) minmax(auto, 185px)
auto;
grid-template-columns:
minmax(auto, 335px) minmax(auto, 185px) minmax(auto, 185px)
auto;
gap: 17px;
background-color: #fff;
border: 1px solid #e8e8e8;
padding: 20px 30px;
margin-bottom: 40px;
}
@media (max-width: 1270px) {
.catalog__filters {
-ms-grid-columns: minmax(auto, 335px) minmax(auto, 150px)
minmax(auto, 150px) auto;
grid-template-columns:
minmax(auto, 335px) minmax(auto, 150px) minmax(auto, 150px)
auto;
gap: 12px;
padding: 20px 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (max-width: 767.98px) {
.catalog__filters {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 20px 10px;
}
}
.catalog__tags {
max-width: 767px;
}
@media (max-width: 576px) {
.catalog__filters {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.catalog__tags {
max-width: 576px;
}
@media (max-width: 767.98px) {
.catalog__filters .filters__box--price {
grid-column: 2/-1;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
}
@media (max-width: 576px) {
.catalog__filters .filters__box--price {
grid-column: initial;
grid-row: initial;
margin-bottom: 20px;
}
}
@media (max-width: 1270px) {
.catalog__filters {
margin-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.catalog__filters .choices {
width: 100%;
height: 45px;
}
.catalog__filters .choices::after {
top: 20px !important;
}
.catalog__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 35px;
}
@media (max-width: 1270px) {
.catalog__heading {
margin-bottom: calc(20px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 767.98px) {
.catalog__heading {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 20px;
}
}
.catalog__sort {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media (max-width: 576px) {
.catalog__sort {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.catalog__count {
font-size: 23px;
line-height: 1;
font-weight: 300;
color: #474747;
}
.catalog .sort__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media (max-width: 576px) {
.catalog .sort__list {
gap: 7px;
}
}
.catalog .sort__btn {
font-size: 15px;
line-height: 1;
font-weight: 300;
color: #a8a8a8;
}
@media (max-width: 576px) {
.catalog .sort__btn {
font-size: 14px;
}
}
.catalog .sort__btn:hover,
.catalog .sort__btn--active {
color: var(--color-accent);
}
.catalog .display-view__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
}
.catalog .display-view__btn {
width: 15px;
height: 15px;
background-color: silver;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.catalog .display-view__btn.active,
.catalog .display-view__btn:hover {
background-color: var(--color-accent);
}
.catalog .display-view__btn--grid {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/grid.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/grid.svg) no-repeat center/contain;
}
.catalog .display-view__btn--list {
width: 20px;
height: 15px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/list.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/list.svg) no-repeat center/contain;
}
.catalog .display-view__btn--list-2 {
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/list-2.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/list-2.svg) no-repeat center/contain;
}
.catalog__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 25px 10px;
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.catalog__list {
margin-bottom: calc(30px + 30 * ((100vw - 375px) / 895));
}
}
@media (max-width: 767.98px) {
.catalog__list {
-ms-grid-columns: (250px) [2];
grid-template-columns: repeat(2, 250px);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media (max-width: 576px) {
.catalog__list {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
}
.catalog__list--row {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.catalog__item {
width: 100%;
height: 100%;
}
.catalog__bottom {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
}
@media (max-width: 767.98px) {
.catalog__bottom {
-ms-grid-columns: (auto) [2];
grid-template-columns: repeat(2, auto);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (max-width: 576px) {
.catalog__bottom {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.catalog__more {
margin: 0 auto;
}
@media (max-width: 576px) {
.catalog__more {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
}
.filters__reset {
font-size: 16px;
line-height: 1;
color: var(--color-accent);
background-color: #eefbe2;
border-radius: 5px;
width: 101px;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
@media (max-width: 576px) {
.filters__reset {
height: 40px;
}
}
@media (max-width: 767.98px) {
.filters__reset {
-ms-grid-column-align: end;
justify-self: end;
}
}
.filters__reset:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
.filters__inner {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
}
.filters__name {
font-size: 16px;
line-height: 1;
font-weight: 600;
color: #474747;
}
.filters .range-slider {
max-width: 280px;
width: 100%;
}
.product {
padding-top: 60px;
padding-bottom: 60px;
}
@media (max-width: 1270px) {
.product {
padding-top: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.product {
padding-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.product__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 0.9fr 1fr;
grid-template-columns: 0.9fr 1fr;
gap: 50px;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.product__wrapper {
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
gap: 30px;
}
}
@media (max-width: 991.98px) {
.product__wrapper {
-ms-grid-columns: auto;
grid-template-columns: auto;
}
}
@media (max-width: 1270px) {
.product__right {
max-width: calc(500px + 120 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.product__right {
max-width: 100%;
}
}
.product__slider {
min-width: 0;
width: 100%;
}
@media (max-width: 991.98px) {
.product__slider {
margin: 0 auto;
max-width: 570px;
}
}
.product .slider-thumbs {
width: 100%;
min-width: 0;
position: relative;
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.product .slider-thumbs {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.product .slider-thumbs__main {
max-width: 100%;
height: 460px;
min-width: 0;
margin-bottom: 10px;
border: 2px solid #ededed;
}
@media (max-width: 991.98px) {
.product .slider-thumbs__main {
height: calc(280px + 180 * (100vw - 375px) / 616);
}
}
.product .slider-thumbs__main .swiper-button-prev,
.product .slider-thumbs__main .swiper-button-next {
background-color: rgba(0, 0, 0, 0);
}
@media (max-width: 991.98px) {
.product .slider-thumbs__main {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
max-width: 100%;
}
}
.product .slider-thumbs__main .swiper-slide {
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px;
}
.product .slider-thumbs__main .swiper-slide .slider-thumbs__img {
width: 99%;
height: 99%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.product .slider-thumbs__main .swiper-slide .slider-thumbs__img img {
margin: 0 auto;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 10px;
}
.product .slider-thumbs__nav {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.product .slider-thumbs__nav-control {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 80px;
margin: auto;
gap: 10px;
}
@media (max-width: 767.98px) {
.product .slider-thumbs__nav-control {
height: 60px;
gap: 5px;
}
}
.product .slider-thumbs__nav-control .swiper-button-prev,
.product .slider-thumbs__nav-control .swiper-button-next {
position: relative !important;
background-color: rgba(0, 0, 0, 0);
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: 20px !important;
margin-top: 0 !important;
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
@media (max-width: 767.98px) {
.product .slider-thumbs__nav-control .swiper-button-prev,
.product .slider-thumbs__nav-control .swiper-button-next {
top: 20px !important;
}
}
.product .slider-thumbs__nav-wrap {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 90%;
height: 90px;
min-width: 0;
margin: 0;
}
@media (max-width: 991.98px) {
.product .slider-thumbs__nav-wrap {
height: calc(60px + 30 * (100vw - 375px) / 393);
}
}
.product .slider-thumbs__nav-wrap .swiper-slide {
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90px;
height: 100%;
border: 2px solid #ededed;
}
.product .slider-thumbs__nav-wrap .swiper-slide-thumb-active {
border: 2px solid var(--color-accent);
}
@media (max-width: 991.98px) {
.product .slider-thumbs__nav-wrap .swiper-slide {
height: 100%;
width: calc(60px + 30 * (100vw - 375px) / 393);
}
}
.product .slider-thumbs__nav-wrap .swiper-slide img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 10px;
}
.product__title {
font-size: 35px;
line-height: 1.1;
font-weight: 400;
color: #323131;
}
@media (max-width: 1270px) {
.product__title {
font-size: calc(22px + 13 * ((100vw - 375px) / 895));
}
}
.product__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #e6e6e6;
}
@media (max-width: 360.98px) {
.catalog__tags {
max-width: 360px;
}
.product__top {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
}
}
.product__price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #e6e6e6;
}
@media (max-width: 360.98px) {
.product__price {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 15px;
}
}
.product__price p {
font-size: 30px;
line-height: 1;
font-weight: 600;
color: #323131;
}
@media (max-width: 1270px) {
.product__price p {
font-size: calc(22px + 8 * ((100vw - 375px) / 895));
}
}
.product__btn-model {
padding-left: 38px;
position: relative;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
font-size: 17px;
line-height: 1;
color: #5a5a5a;
}
.product__btn-model:hover {
color: var(--color-accent);
}
.product__btn-model::after {
position: absolute;
content: '';
width: 27px;
height: 27px;
-webkit-mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/model-3d.svg) no-repeat center/contain;
mask: url(//ecosreda.org/wp-content/themes/provodnik/images/icons/model-3d.svg) no-repeat center/contain;
background-color: var(--color-accent);
top: 45%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.product__choose {
width: 100%;
padding-top: 30px;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 40px 25px;
margin-bottom: 25px;
}
@media (max-width: 1270px) {
.product__choose {
gap: 40px 15px;
}
}
@media (max-width: 767.98px) {
.product__choose {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.product__actions {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
gap: 12px;
margin-bottom: 25px;
}
@media (max-width: 576px) {
.product__actions {
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
}
}
.product__counter {
width: 100%;
}
@media (max-width: 576px) {
.product__counter {
grid-column: 1/-1;
}
}
.product__btn {
width: 100%;
height: 55px;
}
@media (max-width: 576px) {
.product__btn {
-ms-grid-column-span: 2;
grid-column: span 2;
}
}
.product__files {
margin-bottom: 35px;
}
@media (max-width: 1270px) {
.product .product-files__link {
font-size: 14px;
}
}
@media (max-width: 1270px) {
.product .product-files {
padding: 20px 10px;
}
}
.product__equipment {
margin-bottom: 25px;
}
.product__tags {
margin-bottom: 60px;
}
@media (max-width: 1270px) {
.product__tags {
margin-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.choose-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 10px;
}
.choose-box__name {
font-size: 16px;
line-height: 1;
font-weight: 700;
color: #323131;
}
.choose-box__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.choose-box .choices {
height: 35px;
}
.choose-box .choices::after {
top: 15px !important;
}
.choose-box__btn {
width: 65px;
height: 35px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 16px;
line-height: 1;
background-color: var(--color-white);
color: #323131;
border: 1px solid #d9d8d8;
border-radius: 5px;
}
@media (max-width: 1270px) {
.choose-box__btn {
width: 55px;
}
}
.choose-box__btn--active {
border: 2px solid var(--color-accent);
}
.product-spec__top {
border-bottom: 1px solid #e8e8e8;
}
@media (max-width: 767.98px) {
.product-spec__top {
overflow-x: auto;
min-width: 100%;
}
}
.product-spec__top-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 30px;
}
.product-spec__top-btn {
display: block;
font-size: 21px;
color: #c8c8c8;
padding-bottom: 20px;
position: relative;
line-height: 1;
font-size: 21px;
}
.product-spec__top-btn:last-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 1270px) {
.product-spec__top-btn {
font-size: calc(16px + 5 * ((100vw - 375px) / 895));
}
}
.product-spec__top-btn::after {
position: absolute;
content: '';
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
background-color: var(--color-accent);
-webkit-transition: 300ms ease;
-o-transition: 300ms ease;
transition: 300ms ease;
}
.product-spec__top-btn:hover {
color: var(--color-accent);
}
.product-spec__top-btn.tabs-btn--active {
font-size: 33px;
font-weight: 700;
color: var(--color-accent);
font-size: 33px;
}
@media (max-width: 1270px) {
.product-spec__top-btn.tabs-btn--active {
font-size: calc(22px + 11 * ((100vw - 375px) / 895));
}
}
.product-spec__top-btn.tabs-btn--active::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.product-spec__content {
padding-top: 40px;
}
.product-spec__name {
margin-bottom: 30px;
font-size: 28px;
line-height: 1;
font-weight: 500;
color: #393939;
}
@media (max-width: 1270px) {
.product-spec__name {
font-size: calc(20px + 8 * ((100vw - 375px) / 895));
}
}
.product-spec__text {
font-size: 16px;
color: #777;
}
.product-spec__list {
max-width: 300px;
width: 100%;
}
.product-spec__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
line-height: 1;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #eee;
font-weight: 400;
}
.product-spec__right {
font-size: 16px;
font-weight: 700;
color: #777;
}
.composition {
padding-top: 60px;
padding-bottom: 60px;
}
@media (max-width: 1270px) {
.composition {
padding-top: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.composition {
padding-bottom: calc(40px + 20 * ((100vw - 375px) / 895));
}
}
.composition__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 40px;
text-align: center;
}
@media (max-width: 1270px) {
.composition__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.composition__title {
margin-bottom: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
.composition__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [3];
grid-template-columns: repeat(3, auto);
-ms-grid-rows: (auto) [2];
grid-template-rows: repeat(2, auto);
gap: 10px 110px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 1270px) {
.composition__wrapper {
gap: 10px 80px;
}
}
@media (max-width: 991.98px) {
.composition__wrapper {
-ms-grid-rows: auto;
grid-template-rows: auto;
gap: 50px;
}
}
@media (max-width: 767.98px) {
.composition__wrapper {
-ms-grid-columns: auto;
grid-template-columns: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.composition__preview {
grid-row: 1/-1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
max-width: 590px;
width: 100%;
height: 590px;
-o-object-fit: contain;
object-fit: contain;
-ms-grid-column-align: center;
justify-self: center;
-ms-grid-row-align: center;
align-self: center;
position: relative;
}
@media (max-width: 1270px) {
.composition__preview {
height: calc(480px + 110 * (100vw - 991px) / 279);
}
}
@media (max-width: 991.98px) {
.composition__preview {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
display: none;
}
}
.composition__preview img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.composition__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
@media (max-width: 991.98px) {
.composition__item {
-ms-flex-item-align: start;
-ms-grid-row-align: start;
align-self: start;
text-align: center;
}
.composition__item img {
display: block;
height: 135px;
margin-bottom: 20px;
}
}
@media (max-width: 991.98px) and (max-width: 576px) {
.composition__item img {
margin-bottom: 10px;
}
}
.composition__item::before {
position: absolute;
content: '';
width: 65px;
height: 1px;
background-color: var(--color-accent);
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: -75px;
}
@media (max-width: 1270px) {
.composition__item::before {
width: 45px;
right: -55px;
}
}
@media (max-width: 991.98px) {
.composition__item::before {
display: none;
}
}
@media (max-width: 991.98px) {
.composition__item--sand {
-ms-grid-row: 2;
-ms-grid-row-span: -1;
grid-row: 2/1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 3/4;
}
}
@media (max-width: 767.98px) {
.composition__item--sand {
grid-row: initial;
grid-column: initial;
}
}
.composition__item--plastic {
grid-row: 1/-1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
grid-column: 3/4;
padding-bottom: 80px;
position: relative;
}
@media (max-width: 991.98px) {
.composition__item--plastic {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
grid-row: initial;
}
}
@media (max-width: 767.98px) {
.composition__item--plastic {
grid-column: initial;
}
}
.composition__item--plastic::after {
position: absolute;
content: '';
width: 180px;
height: 60px;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-image: url(//ecosreda.org/wp-content/themes/provodnik/images/content/plastic-icons.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.composition__item--plastic::before {
right: initial;
left: -75px;
}
@media (max-width: 1270px) {
.composition__item--plastic::before {
left: -55px;
}
}
.composition__item--plastic img {
display: block;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.composition__item--plastic img {
margin-bottom: 10px;
}
}
.composition__item--plastic .composition__name {
margin-bottom: 20px;
}
@media (max-width: 576px) {
.composition__item--plastic .composition__name {
margin-bottom: 10px;
}
}
.composition__item--plastic .composition__text {
max-width: 210px;
font-size: 18px;
font-weight: 400;
color: #484848;
text-align: center;
}
.composition__name {
line-height: 1;
font-weight: 600;
color: #323131;
display: block;
font-size: 25px;
}
@media (max-width: 1270px) {
.composition__name {
font-size: calc(20px + 5 * ((100vw - 375px) / 895));
}
}
.composition__circle {
display: block;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(-23%, #639933),
color-stop(126%, #82c04b)
);
background-image: -o-linear-gradient(bottom, #639933 -23%, #82c04b 126%);
background-image: linear-gradient(0deg, #639933 -23%, #82c04b 126%);
-webkit-box-shadow: 0px 0px 17px 0px #80d139;
box-shadow: 0px 0px 17px 0px #80d139;
border-radius: 50%;
width: 38px;
height: 38px;
position: absolute;
}
@media (max-width: 991.98px) {
.composition__circle {
display: none;
}
}
.composition__circle--first {
left: 20px;
top: 125px;
}
@media (max-width: 1270px) {
.composition__circle--first {
left: calc(30px + -10 * (100vw - 991px) / 279);
top: calc(95px + 30 * (100vw - 991px) / 279);
}
}
.composition__circle--second {
left: 20px;
bottom: 125px;
}
@media (max-width: 1270px) {
.composition__circle--second {
left: calc(30px + -10 * (100vw - 991px) / 279);
bottom: calc(105px + 20 * (100vw - 991px) / 279);
}
}
.composition__circle--third {
right: 0;
top: 50%;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.composition__circle::after {
position: absolute;
content: '';
width: 18px;
height: 18px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: var(--color-white);
border-radius: 50%;
}
.product-descr {
padding: 30px 0;
}
.product-descr__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
margin-bottom: 25px;
}
@media (max-width: 1270px) {
.product-descr__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.product-descr__title {
margin-bottom: calc(15px + 10 * ((100vw - 375px) / 895));
}
}
.product-descr__text {
font-size: 16px;
color: #777;
}
.cart {
padding-top: 40px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.cart {
padding-top: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.cart {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.cart__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
padding-bottom: 50px;
}
@media (max-width: 1270px) {
.cart__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.cart__title {
padding-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.cart__list {
margin-bottom: 50px;
display: -ms-grid;
display: grid;
gap: 30px;
}
@media (max-width: 767.98px) {
.cart__list {
margin-bottom: 30px;
}
}
.cart__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.cart__btn {
font-size: 15px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
}
.card-product {
background-color: var(--color-white);
-webkit-box-shadow: 0px 27px 40px 0px rgba(55, 55, 55, 0.15);
box-shadow: 0px 27px 40px 0px rgba(55, 55, 55, 0.15);
border-radius: 5px;
padding: 30px;
border: 1px solid #f1f1f1;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 260px auto auto 70px;
grid-template-columns: auto 260px auto auto 70px;
}
@media (max-width: 767.98px) {
.card-product {
padding: 20px;
}
}
@media (max-width: 991.98px) {
.card-product {
-ms-grid-columns: auto 200px auto auto 50px;
grid-template-columns: auto 200px auto auto 50px;
}
}
@media (max-width: 767.98px) {
.card-product {
-ms-grid-columns: auto auto auto;
grid-template-columns: auto auto auto;
gap: 30px;
}
}
@media (max-width: 767.98px) {
.card-product__col--list {
-ms-grid-column-span: 2;
grid-column: span 2;
}
}
.card-product__title {
font-size: 18px;
line-height: 1.2;
font-weight: 400;
color: #191919;
margin-bottom: 15px;
}
.card-product__name {
font-size: 16px;
line-height: 1;
color: #989a9c;
display: block;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #f1f1f1;
}
@media (max-width: 767.98px) {
.card-product__name {
margin-bottom: 15px;
padding-bottom: 15px;
}
}
.card-product__name--center {
text-align: center;
}
.card-product__name--color-white {
color: var(--color-white);
}
.card-product__list {
max-width: 250px;
}
.card-product__box {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.card-product__count {
font-size: 22px;
line-height: 1;
font-weight: 400;
color: #191919;
}
@media (max-width: 767.98px) {
.card-product__count {
font-size: 16px;
font-weight: 500;
}
}
.card-product__delete {
font-size: 14px;
line-height: 1.1;
font-weight: 400;
color: #cbcbcb;
-webkit-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.card-product__delete:hover {
color: var(--color-dark);
}
.card-product__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 20px;
font-size: 15px;
line-height: 1;
font-weight: 400;
color: #8d8b8b;
padding: 10px 0;
border-top: 1px solid #f8f8f8;
}
@media (max-width: 767.98px) {
.card-product__item {
gap: 10px;
}
}
.card-product__right {
color: #323131;
text-align: right;
}
.card-product__img {
width: 150px;
height: 150px;
}
@media (max-width: 576px) {
.card-product__img {
width: 100px;
height: 100px;
}
}
.card-product__img img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.card-product__bottom {
grid-column: 1/-1;
padding-top: 20px;
border-top: 1px solid #f1f1f1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media (max-width: 767.98px) {
.card-product__bottom {
margin-top: 15px;
}
}
.card-product__total {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
line-height: 1.2;
font-weight: 500;
color: #191919;
gap: 50px;
}
@media (max-width: 767.98px) {
.card-product__total {
font-size: 16px;
}
}
@media (max-width: 576px) {
.card-product__total {
gap: 20px;
}
}
.card-product__total span {
font-size: 28px;
line-height: 1;
font-weight: 600;
color: #191919;
}
@media (max-width: 767.98px) {
.card-product__total span {
font-size: 22px;
}
}
.checkout {
padding-top: 40px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.checkout {
padding-top: calc(30px + 10 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.checkout {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.checkout__title {
font-size: 40px;
line-height: 1.3;
font-weight: 600;
font-weight: 600;
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.checkout__title {
font-size: calc(25px + 15 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.checkout__title {
margin-bottom: calc(30px + 20 * ((100vw - 375px) / 895));
}
}
.checkout__wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(auto, 600px) minmax(auto, 510px);
grid-template-columns: minmax(auto, 600px) minmax(auto, 510px);
gap: 30px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (max-width: 991.98px) {
.checkout__wrapper {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 50px;
}
}
.form-checkout {
max-width: 600px;
width: 100%;
}
@media (max-width: 991.98px) {
.form-checkout {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.form-checkout__top,
.form-checkout__delivery,
.form-checkout__payment {
margin-bottom: 45px;
}
@media (max-width: 1270px) {
.form-checkout__top,
.form-checkout__delivery,
.form-checkout__payment {
margin-bottom: calc(30px + 15 * ((100vw - 375px) / 895));
}
}
.form-checkout__heading {
font-size: 18px;
line-height: 1.2;
font-weight: 600;
color: #191919;
display: block;
margin-bottom: 25px;
}
.form-checkout__top {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
gap: 35px 25px;
}
@media (max-width: 767.98px) {
.form-checkout__top {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.form-checkout__label {
display: block;
margin-bottom: 15px;
}
.form-checkout__group {
width: 100%;
}
.form-checkout__group--house {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.form-checkout__group .choices {
height: 48px;
}
.form-checkout__label {
font-size: 16px;
line-height: 1;
font-weight: 400;
color: #191919;
}
.form-checkout__input {
background-color: var(--color-white);
border: 1px solid #dae0e6;
border-radius: 5px;
padding: 5px;
height: 48px;
width: 100%;
display: block;
}
.form-checkout__delivery-inner {
display: -ms-grid;
display: grid;
-ms-grid-columns: (auto) [3];
grid-template-columns: repeat(3, auto);
gap: 30px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media (max-width: 576px) {
.form-checkout__delivery-inner {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.form-checkout .checkbox {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form-checkout__text {
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #9c9c9c;
margin-bottom: 30px;
}
.form-checkout__text a {
color: var(--color-accent);
}
.form-checkout__btn {
font-size: 15px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
} .project {
padding-top: 90px;
padding-bottom: 90px;
}
@media (max-width: 1270px) {
.project {
padding-top: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
@media (max-width: 1270px) {
.project {
padding-bottom: calc(50px + 40 * ((100vw - 375px) / 895));
}
}
.project__wrapper {
margin-bottom: 50px;
}
@media (max-width: 1270px) {
.project__wrapper {
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
gap: 30px;
}
}
@media (max-width: 991.98px) {
.project__wrapper {
-ms-grid-columns: auto;
grid-template-columns: auto;
}
}
.project__slider {
min-width: 0;
width: 100%;
}
@media (max-width: 991.98px) {
.project__slider {
margin: 0 auto;
}
}
.project .slider-thumbs {
width: 100%;
min-width: 0;
position: relative;
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.project .slider-thumbs {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
.project .slider-thumbs__main {
max-width: 100%;
height: 560px;
min-width: 0;
margin-bottom: 10px;
border: 2px solid #ededed;
}
@media (max-width: 991.98px) {
.project .slider-thumbs__main {
height: calc(280px + 280 * (100vw - 375px) / 616);
}
}
.project .slider-thumbs__main .swiper-button-prev,
.project .slider-thumbs__main .swiper-button-next {
background-color: var(--color-white);
}
@media (max-width: 991.98px) {
.project .slider-thumbs__main {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
max-width: 100%;
}
}
.project .slider-thumbs__main .swiper-slide {
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px;
}
.project .slider-thumbs__main .swiper-slide img {
margin: 0 auto;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 10px;
}
.project .slider-thumbs__main .swiper-slide .slider-thumbs__img {
width: 99%;
height: 99%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.project .slider-thumbs__nav {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 250px;
}
@media (max-width: 991.98px) {
.project .slider-thumbs__nav {
height: calc(60px + 140 * (100vw - 375px) / 616);
}
}
.project .slider-thumbs__nav-control {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 60px;
margin: auto;
gap: 10px;
}
@media (max-width: 767.98px) {
.project .slider-thumbs__nav-control {
height: 44px;
gap: 5px;
}
}
.project .slider-thumbs__nav-control .swiper-button-prev,
.project .slider-thumbs__nav-control .swiper-button-next {
position: relative !important;
background-color: rgba(0, 0, 0, 0);
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
margin-top: 0 !important;
-webkit-transform: translateY(0) !important;
-ms-transform: translateY(0) !important;
transform: translateY(0) !important;
}
@media (max-width: 767.98px) {
.project .slider-thumbs__nav-control .swiper-button-prev,
.project .slider-thumbs__nav-control .swiper-button-next {
width: 20px;
height: 20px;
}
.project .slider-thumbs__nav-control .swiper-button-prev::after,
.project .slider-thumbs__nav-control .swiper-button-next::after {
height: 10px;
width: 10px;
}
}
.project .slider-thumbs__nav-wrap {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 90%;
height: 100%;
min-width: 0;
margin: 0;
}
.project .slider-thumbs__nav-wrap .swiper-slide {
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 250px;
height: 100%;
border: 2px solid #ededed;
}
.project .slider-thumbs__nav-wrap .swiper-slide-thumb-active {
border: 2px solid var(--color-accent);
}
@media (max-width: 991.98px) {
.project .slider-thumbs__nav-wrap .swiper-slide {
height: 100%;
width: calc(60px + 140 * (100vw - 375px) / 616);
}
}
.project .slider-thumbs__nav-wrap .swiper-slide img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 10px;
}