/* ------------------------------------- * Reset * ------------------------------------- */ article, aside, dialog, figcaption, figure, footer, main, nav, section, details, menu {display: block} @-ms-viewport {width: device-width} html {-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; font-size: 0.052083334vw} @media screen and (max-width: 1199px) {html {font-size: 0.119904vw} } @media screen and (max-width: 767px) {html {font-size: 0.2666667vw} } *::before, *::after {-webkit-box-sizing: inherit; box-sizing: inherit} body {background-color: #B7BF96} header, header.fixed {background: linear-gradient(#B7BF96, #B7BF96aa) !important} .top-line {border-bottom: none; background: transparent; border-top: 1px solid rgba(0,0,0,0.1)} footer {background: #B7BF96} .menu {background: #B7BF96} address {font-style: normal; line-height: inherit} small {font-size: 80%} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline} sub {bottom: -0.25em} sup {top: -0.5em} a {color: inherit; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; -webkit-transition: all 0.05s linear; -o-transition: all 0.05s linear; transition: all 0.05s linear} a:hover {color: inherit} a:focus {outline: none} a:hover, a:focus {text-decoration: none} a:active, a:hover {outline-width: 0} a:not([href]):not([tabindex]) {color: inherit; text-decoration: none} a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {color: inherit; text-decoration: none} a:not([href]):not([tabindex]):focus {outline: 0} img {font-size: 1em; text-transform: uppercase; color: #0E3318; vertical-align: middle; border-style: none} img::-moz-selection {background: none} img::selection {background: none} svg:not(:root) {overflow: hidden} table {width: 100%; border-collapse: collapse; background-color: transparent} th {text-align: inherit} a, area, button, [role=button], input, label, select, summary, textarea {-ms-touch-action: manipulation; touch-action: manipulation} button {background-color: transparent; border: none; border-radius: 0; cursor: pointer} button:focus {outline: none} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {border-style: none} input, button, select, optgroup, textarea {font-family: inherit; font-size: inherit; line-height: inherit} button, input {overflow: visible} button, select {text-transform: none} button, html [type=button], [type=reset], [type=submit] {-webkit-appearance: button} input[type=radio], input[type=checkbox] {-webkit-box-sizing: border-box; box-sizing: border-box; padding: 0} input[type=radio]:disabled, input[type=checkbox]:disabled {cursor: not-allowed} input[type=date], input[type=time], input[type=datetime-local], input[type=month] {-webkit-appearance: listbox} input[type=search] {-webkit-appearance: textfield; outline-offset: -2px} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none} label {display: block} textarea {overflow: auto; resize: vertical} [tabindex="-1"]:focus {outline: 0 !important} [role=button] {cursor: pointer} ::-webkit-file-upload-button {font: inherit; -webkit-appearance: button} [hidden] {display: none !important} .swiper-slide * {-webkit-box-sizing: border-box; box-sizing: border-box} .swiper-pagination-bullet {outline: none} .fancybox-bg {background-color: #000} .fancybox-is-open .fancybox-bg {opacity: 0.6} .fancybox-slide--video .fancybox-content {background: none !important} .fancybox-button--close {background-color: #21522B} .fancybox-button--close svg {display: none} .fancybox-button--close::after {content: ""; display: block; font-size: 28rem; width: 1em; height: 1em; position: absolute; z-index: 0; left: 50%; top: 50%; margin: -0.5em 0 0 -0.5em; background: url("../img/icons/close.svg") no-repeat 50% 50%/contain; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s} @media screen and (min-width: 1200px) {.fancybox-button--close:hover::after {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg)} } @media screen and (max-width: 767px) {.fancybox-slide {padding-left: 1.6em; padding-right: 1.6em} } .fancybox-slide--html .fancybox-close-small {font-size: 32px; width: 1em; height: 1em; padding: 0; top: 12px; right: 12px} .fancybox-slide--html .fancybox-close-small svg {display: none} .fancybox-slide--html .fancybox-close-small::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 0; left: 0; top: 0; background: url("../img/icons/close.svg") no-repeat 50% 50%/contain} .fancybox-infobar {display: none !important} .fancybox-toolbar .fancybox-button--zoom, .fancybox-toolbar .fancybox-button--play, .fancybox-toolbar .fancybox-button--thumbs {display: none !important} .fancybox-navigation .fancybox-button {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; padding: 0; font-size: 10rem; width: 12.2em; height: 14.4em; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; border: none; background: none} .fancybox-navigation .fancybox-button::before {content: ""; display: block; width: 8.2em; height: 4.6em; position: absolute; background: url("../img/icons/slider-arrow.svg") no-repeat 50% 50%/contain; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; position: relative; left: 2px} .fancybox-navigation .fancybox-button::after {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../img/slider-arrow-bg.svg") no-repeat 100% 50%/contain; -webkit-filter: drop-shadow(0px 0px 60px rgba(19, 20, 24, 0.5)); filter: drop-shadow(0px 0px 60px rgba(19, 20, 24, 0.5)); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%} .fancybox-navigation .fancybox-button div {display: none} @media screen and (max-width: 1199px) {.fancybox-navigation .fancybox-button {width: 6.7em; height: 8em} .fancybox-navigation .fancybox-button::before {width: 4.6em; height: 2.6em} } .fancybox-navigation .fancybox-button--arrow_left::before {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg)} .fancybox-navigation .fancybox-button--arrow_left::after {-webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%)} .fancybox-image {max-width: 1240rem; max-height: 700rem} .fancybox-slide--video .fancybox-content {max-width: 1240rem; max-height: 700rem} /* ------------------------------------- * Common styles * ------------------------------------- */ .wrapper {position: relative; overflow: hidden} .container {max-width: 1920rem; width: 100%; padding-right: 0; padding-left: 0; margin-right: auto; margin-left: auto} .max {max-width: 1920rem; margin: 0 auto; padding: 0 100rem} @media screen and (max-width: 1199px) {.max {padding: 0 20rem} } .flex-inline {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap} .img {display: block; max-width: 100%; height: auto; max-height: 100%} .img--cover, .img--contain {width: 100%; height: 100%} .img--cover {-o-object-fit: cover; object-fit: cover} .img--contain {-o-object-fit: contain; object-fit: contain} svg {display: inline-block; max-width: 100%; max-height: 100%} .accent {color: #0E3318} @media screen and (max-width: 1199px) {.hide-xl {display: none !important} } @media screen and (min-width: 1200px) {.show-xl {display: none !important} } @media screen and (max-width: 767px) {.hide-md {display: none !important} } @media screen and (min-width: 768px) {.show-md {display: none !important} } @media screen and (max-width: 1023px) {.tablet-hide {display: none !important} } @media screen and (min-width: 1024px) {.tablet-show {display: none !important} } @media screen and (max-width: 767px) {.mobile-hide {display: none !important} } /* ---------- Titles & text ---------- */ h1, .title-1 {font-size: 96rem; margin-bottom: 50rem; line-height: 0.95; letter-spacing: -0.015em} @media screen and (max-width: 1199px) {h1, .title-1 {font-size: 64rem; margin-bottom: 32rem} } @media screen and (max-width: 767px) {h1, .title-1 {font-size: 46rem; line-height: 0.85; margin-bottom: 12rem} } h2, .title-2 {font-size: 70rem; font-weight: 300; line-height: 0.95; letter-spacing: -0.015em} @media screen and (max-width: 1199px) {h2, .title-2 {font-size: 52rem} } @media screen and (max-width: 767px) {h2, .title-2 {font-size: 36rem} } h3, .title-3 {font-size: 48rem; line-height: 1.1; margin-bottom: 25rem} @media screen and (max-width: 767px) {h3, .title-3 {font-size: 24rem; margin-bottom: 16rem} } .fz-22 {font-size: 21rem; line-height: 1.3; letter-spacing: 0.03em} @media screen and (max-width: 1199px) {.fz-22 {font-size: 20rem} } @media screen and (max-width: 767px) {.fz-22 {font-size: 13.5rem} } .nowrap {white-space: nowrap} .text-center {text-align: center} /* ----- buttons ----- */ .button {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 54rem; padding: 16rem 42rem; font-size: 500 15rem/1 "Muller", sans-serif; border-radius: 15rem; position: relative; z-index: 1; cursor: pointer; overflow: hidden; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear} .button-black-bg {background-color: #011B10; color: #fff} .button-black-bg:hover {color: #fff} @media screen and (min-width: 1200px) {.button-black-bg:hover {background-color: #0E3318} } .btn-rect {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; width: 310rem; height: 85rem; padding: 1.2em 1em 0.9em 1.2em; border: 1px solid #E4DEAE; font-weight: 400; font-size: 24rem; line-height: 1; letter-spacing: 0.03em; color: #B7BF96; position: relative; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; border-radius: 50px } .btn-rect::before {content: ""; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; -webkit-transform: translate(10px, 12px); -ms-transform: translate(10px, 12px); transform: translate(10px, 12px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; border-radius: 50px } .btn-rect:hover {padding: 1em; color: #B7BF96} @media screen and (min-width: 1200px) {.btn-rect:hover::before {-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0)} } .btn-rect--green::before {background: #0E3318} .btn-rect--red::before {background: #AD2632} .btn-rect--brown::before {background: #5A352B} .btn-rect--black {color: #B7BF96} .btn-rect--black::before {background: #011B10} .btn-rect--beige {color: #001209} .btn-rect--beige::before {background: #F8F2C5} @media (max-width: 1919px) {.btn-rect::before {-webkit-transform: translate(8px, 8px); -ms-transform: translate(8px, 8px); transform: translate(8px, 8px)} } @media screen and (max-width: 1199px) {.btn-rect {width: 267rem; height: 65rem; font-size: 20rem; left: -8px} } @media screen and (max-width: 767px) {.btn-rect {width: 194rem; height: 47rem; font-size: 12rem} } .slider-arrow {font-size: 10rem; width: 11.3em; height: 6.2em; outline: none; cursor: pointer; z-index: 1; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; position: absolute} .slider-arrow::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; -webkit-mask-image: url("../img/icons/slider-arrow.svg"); mask-image: url("../img/icons/slider-arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #AEB789; -webkit-mask-size: contain; mask-size: contain; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; position: relative; left: 2px} .slider-arrow::after {content: ""; display: none; width: 100%; height: 100%; position: absolute; z-index: -1; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #21522B; -webkit-mask-image: url("../img/slider-arrow-bg.svg"); mask-image: url("../img/slider-arrow-bg.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-filter: drop-shadow(0px 0px 60px rgba(19, 20, 24, 0.5)); filter: drop-shadow(0px 0px 60px rgba(19, 20, 24, 0.5))} @media screen and (max-width: 1199px) {.slider-arrows.mob .slider-arrow {width: 6.7em; height: 8em} .slider-arrows.mob .slider-arrow::before {width: 4.6em; height: 2.5em} .slider-arrows.mob .slider-arrow::after {display: block} .slider-arrows.mob .slider-prev {left: 0} .slider-arrows.mob .slider-next {right: 0} } .slider-arrows.desktop .slider-arrow {width: 12.2em; height: 14.4em} .slider-arrows.desktop .slider-arrow::before {width: 8.3em; height: 4.6em} .slider-arrows.desktop .slider-arrow::after {display: block} .slider-arrows.desktop .slider-prev {left: 0} .slider-arrows.desktop .slider-next {right: 0} @media screen and (max-width: 1199px) {.slider-arrows.desktop .slider-arrow {width: 6.7em; height: 8em} .slider-arrows.desktop .slider-arrow::before {width: 4.6em; height: 2.5em} } .slider-prev::before {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); left: auto; right: 2px} .slider-prev::after {-webkit-transform: rotate(180deg) translateY(50%); -ms-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%)} .swiper-mobile {overflow: visible} @media (min-width: 1200px) {.swiper-mobile .swiper-wrapper {display: grid; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-box-sizing: border-box; box-sizing: border-box} .swiper-mobile .swiper-slide {height: auto} } @media screen and (max-width: 1199px) {.swiper-mobile .swiper-wrapper {margin: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap} .swiper-mobile .swiper-slide {height: auto; padding: 0} } .overlay {display: none; width: 100%; height: 100%; position: fixed; z-index: 850; left: 0; top: 0; background: rgba(0, 0, 0, 0.5)} .star {font-size: 10rem; width: 15em; height: 15em; position: absolute; z-index: 0; left: 50%; margin-left: -7.5em; -webkit-mask-image: url("../img/home/star-light.svg"); mask-image: url("../img/home/star-light.svg"); -webkit-mask-size: contain; mask-size: contain} @media screen and (max-width: 767px) {.star {width: 7.8em; height: 7.8em; margin-left: -3.9em} } .clip-in, .clip-out, .clip-in-out {position: relative; z-index: 1; margin-top: -70rem} @media screen and (max-width: 1199px) {.clip-in, .clip-out, .clip-in-out {margin-top: -40rem} } @media screen and (max-width: 767px) {.clip-in, .clip-out, .clip-in-out {margin-top: -24rem} } .clip-in::before, .clip-out::before, .clip-in-out::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0} .clip-in::before {-webkit-clip-path: polygon(50% 70rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 70rem, 100% 0, 100% 100%, 0 100%, 0 0)} @media screen and (max-width: 1199px) {.clip-in::before {-webkit-clip-path: polygon(50% 40rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 40rem, 100% 0, 100% 100%, 0 100%, 0 0)} } @media screen and (max-width: 767px) {.clip-in::before {-webkit-clip-path: polygon(50% 24rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 24rem, 100% 0, 100% 100%, 0 100%, 0 0)} } .clip-in .star {top: -1em} @media screen and (max-width: 1199px) {.clip-in .star {top: -4.3em} } @media screen and (max-width: 767px) {.clip-in .star {top: -2em} } .clip-out::before {-webkit-clip-path: polygon(50% 0%, 100% 70rem, 100% 100%, 0 100%, 0 70rem); clip-path: polygon(50% 0%, 100% 70rem, 100% 100%, 0 100%, 0 70rem)} @media screen and (max-width: 1199px) {.clip-out::before {-webkit-clip-path: polygon(50% 0%, 100% 40rem, 100% 100%, 0 100%, 0 40rem); clip-path: polygon(50% 0%, 100% 40rem, 100% 100%, 0 100%, 0 40rem)} } @media screen and (max-width: 767px) {.clip-out::before {-webkit-clip-path: polygon(50% 0, 100% 24rem, 100% 100%, 0 100%, 0 24rem); clip-path: polygon(50% 0, 100% 24rem, 100% 100%, 0 100%, 0 24rem)} } .clip-in-out::before {-webkit-clip-path: polygon(50% 70rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 70rem, 100% 0, 100% 100%, 0 100%, 0 0)} @media screen and (max-width: 1199px) {.clip-in-out::before {-webkit-clip-path: polygon(50% 0%, 100% 40rem, 100% 100%, 0 100%, 0 40rem); clip-path: polygon(50% 0%, 100% 40rem, 100% 100%, 0 100%, 0 40rem)} } @media screen and (max-width: 767px) {.clip-in-out::before {-webkit-clip-path: polygon(50% 24rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 24rem, 100% 0, 100% 100%, 0 100%, 0 0)} } .js-tab-content, .js-accordion-content {display: none} .js-open-modal, .js-tab, .js-accordion-btn, .home .footer .logo {cursor: pointer} /* ------------------------------------- * modules * ------------------------------------- */ /* ----- Forms ----- */ *::-webkit-input-placeholder {color: rgba(1, 27, 16, 0.5); opacity: 1; -webkit-transition: all 0.1s linear; transition: all 0.1s linear} *::-moz-placeholder {color: rgba(1, 27, 16, 0.5); opacity: 1; -moz-transition: all 0.1s linear; transition: all 0.1s linear} *:-ms-input-placeholder {color: rgba(1, 27, 16, 0.5); opacity: 1; -ms-transition: all 0.1s linear; transition: all 0.1s linear} *::-ms-input-placeholder {color: rgba(1, 27, 16, 0.5); opacity: 1; -ms-transition: all 0.1s linear; transition: all 0.1s linear} *::placeholder {color: rgba(1, 27, 16, 0.5); opacity: 1; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear} body input:focus:required:invalid, body textarea:focus:required:invalid, body input:required:valid, body textarea:required:valid {color: #011B10} .input {display: block; width: 100%; min-width: 1px; height: 45px; padding: 10px 15px; background-color: #eee; border: 1px solid #f4f4f4; font-size: 14px; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear} .input:focus {outline: none} .input:focus::-webkit-input-placeholder {opacity: 0} .input:focus::-moz-placeholder {opacity: 0} .input:focus:-ms-input-placeholder {opacity: 0} .input:focus::-ms-input-placeholder {opacity: 0} .input:focus::placeholder {opacity: 0} .checkbox {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; margin: 0; position: relative} .checkbox__wrap {position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; min-width: 20px; height: 20px; margin-right: 12px; border: 1px solid #C7D3DC; border-radius: 4px; -webkit-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out} .checkbox__check {width: 85%; position: absolute; top: 3px; left: 2px; stroke: #0E3318; fill: #0E3318; stroke-width: 1px; stroke-dasharray: 19px; stroke-dashoffset: 19px; -webkit-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out} .checkbox__text {display: inline-block; text-align: left; font-size: 12px; line-height: 1.35} .checkbox:hover .checkbox__wrap {border-color: #0E3318} .checkbox input {display: none} .checkbox input:checked + .checkbox__wrap {border-color: #0E3318} .checkbox input:checked + .checkbox__wrap .checkbox__check {stroke-dashoffset: 37px} .select {position: relative; display: inline-block; max-width: 330rem} @media screen and (max-width: 767px) {.select {max-width: 205rem} } .select__top {display: inline-block; height: 63rem; position: relative} .select__top::before {content: ""; font-size: 10rem; width: 2.1em; height: 1.8em; background-image: url("../img/icons/triangle.svg"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; position: absolute; top: 50%; margin-top: -0.9em; right: 3em; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear} .select__top.active::before {-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg)} @media screen and (max-width: 1199px) {.select__top {height: 56rem} } @media screen and (max-width: 767px) {.select__top {height: 38rem} } @media screen and (max-width: 1199px) {.select__top::before {font-size: 8rem} } @media screen and (max-width: 767px) {.select__top::before {font-size: 5rem} } .select__main-input {display: block; width: 100%; height: 100%; padding: 15rem 60rem 15rem 30rem; cursor: pointer; background: #B7BF96; border-radius: 18px; border: none; font-style: normal; font-weight: 200; font-size: 22rem; line-height: 1; color: #011B10} .select__main-input::-webkit-input-placeholder {color: #011B10} .select__main-input::-moz-placeholder {color: #011B10} .select__main-input:-ms-input-placeholder {color: #011B10} .select__main-input::-ms-input-placeholder {color: #011B10} .select__main-input::placeholder {color: #011B10} @media screen and (max-width: 767px) {.select__main-input {padding: 8rem 30rem 8rem 26rem; font-size: 14rem} } .select__content {padding: 0; max-height: 0; -webkit-box-shadow: 0px 0px 20px; box-shadow: 0px 0px 20px; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; overflow: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: #B7BF96; border-radius: 30px} .select__content.active {max-height: 290rem; padding: 8px 0; z-index: 20} .select__content::-webkit-scrollbar {display: none} .select__content-item {display: block; cursor: pointer; padding: 12rem 15rem; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear} @media screen and (max-width: 1023px) {.select__content-item:hover {background: #a1ac76} } @media screen and (max-width: 767px) {.select__content-item {padding: 9rem 15rem} } .select__content-input {display: none} .select__content-input:checked + .select__content-box .select__content-name {color: #2E763D} .select__content-box {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-style: normal; font-weight: 500; font-size: 18rem; line-height: 1; color: #011B10; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear} @media screen and (max-width: 767px) {.select__content-box {font-size: 12rem} } /* ------------------------------------- * sections * ------------------------------------- */ /* ------------------------------------- * home * ------------------------------------- */ .intro {padding-top: 260rem; padding-bottom: 130rem; position: relative} @media screen and (max-width: 1199px) {.intro {padding-top: 220rem; padding-bottom: 45rem} } @media screen and (max-width: 767px) {.intro {padding-top: 103rem; padding-bottom: 15rem; text-align: center} } .intro::before {content: ""; width: 1178rem; height: 1178rem; background: rgba(19, 58, 27, 0.41); -webkit-filter: blur(240px); filter: blur(240px); position: absolute; top: -555rem; right: -555rem; z-index: 1000; pointer-events: none } @media (max-width: 1919px) {.intro::before {top: -853rem; right: -740rem} } @media (max-width: 1439px) {.intro::before {width: 659rem; height: 659rem; top: -385rem; right: -340rem; -webkit-filter: blur(150px); filter: blur(150px)} } @media (max-width: 576px) {.intro::before {top: 300px; right: -150px; width: 300px; height: 300px } } .intro .img {-o-object-fit: contain; object-fit: contain} @media screen and (max-width: 767px) {.intro .btn-rect {margin: 0 auto} } .intro__inner {padding-left: 100rem; padding-right: 100rem; position: relative; z-index: 2} @media screen and (max-width: 1199px) {.intro__inner {padding-left: 20rem; padding-right: 20rem} } @media (max-width: 576px) {.intro__inner {padding: 0 16rem} } @media screen and (min-width: 1200px) {.intro__inner {min-height: 640rem} } .intro__left {color: #092915} @media screen and (max-width: 1199px) {.intro__left {max-width: 55%} } @media screen and (max-width: 767px) {.intro__left {max-width: 100%} } .intro__subtitle {max-width: 300rem; margin-bottom: 50rem; font-size: 26rem } @media screen and (max-width: 1199px) {.intro__subtitle {font-size: 30rem} } @media screen and (max-width: 767px) {.intro__subtitle {max-width: 260rem; font-size: 20rem; margin: 0 auto 40rem; position: relative} .intro__subtitle::after {content: ""; display: block; width: 109rem; height: 12rem; position: absolute; z-index: 0; left: 50%; margin-left: -54.5rem; bottom: -25rem; background: url("../img/home/separator.svg") no-repeat 50% 50%/contain} } .intro__further {font-weight: 500; font-size: 18rem; line-height: 1; text-align: center; letter-spacing: 0.03em; color: rgba(96, 54, 53, 0.65); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; position: absolute; top: 522rem; left: 163rem} .intro__further::before {content: ""; height: 43rem; width: 6rem; background-image: url("../img/arrow.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); right: calc(100% + 30px)} @media screen and (max-width: 1199px) {.intro__further {left: 20rem} } @media (max-width: 576px) {.intro__further {font-size: 12rem; left: 33rem; top: 290rem} .intro__further::before {height: 28px; right: calc(100% + 22px)} } @media screen and (min-width: 1200px) {.intro__right {position: absolute; bottom: 0; right: 100rem} } .intro__right-descr {max-width: 380rem; margin-bottom: 30rem; color: #011b10} @media screen and (max-width: 767px) {.intro__right-descr {max-width: 264rem; margin: 0 auto 1em; font-size: 16rem} } .intro-advantages {max-width: 1770rem; margin: 280rem auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 70px; text-align: center} @media screen and (max-width: 1199px) {.intro-advantages {padding: 0 20px; gap: 40px; margin-top: 100rem} } @media screen and (max-width: 767px) {.intro-advantages {margin: 50rem 0; background: url(../img/icons/advantages.svg) 50% 50% no-repeat; background-size: 200px; grid-template-columns: repeat(2,1fr); } } .intro-advantages li {max-width: 290rem; margin: 0 auto} @media screen and (max-width: 1199px) {.intro-advantages li {margin-bottom: 0; padding-left: 0; padding-right: 0} } .intro-advantages__ic {width: 152rem; height: 115rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0 auto 25rem} @media screen and (max-width: 767px) {.intro-advantages__ic {width: 72rem; height: 52rem; margin-bottom: 7rem} } .intro__bg {font-size: 10rem; width: 97.7em; height: 72.4em; position: absolute; top: 197rem; left: 27.5%; pointer-events: none; z-index: 1 } @media screen and (max-width: 1199px) {.intro__bg {font-size: 7rem; left: auto; right: -28em; top: 100rem} } @media screen and (max-width: 767px) {.intro__bg {position: relative; top: unset; left: unset; right: unset; font-size: 4rem; margin-left: 10px } } .intro__logo {height: 515rem; position: absolute; top: 730rem; left: 100rem; right: 100rem; z-index: 0} .intro__logo svg {display: block; width: 100%; height: 100%} @media screen and (max-width: 1199px) {.intro__logo {top: 655rem; height: unset; left: 0; right: 0} } .intro__bg-top, .intro__bg-bottom {position: absolute; z-index: 1; pointer-events: none; width: 76.8em; height: 74.8em; -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35))} .intro__bg-top {font-size: 7rem; top: 30px; left: -45em; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg)} @media screen and (max-width: 1199px) {.intro__bg-top {font-size: 5rem} } @media screen and (max-width: 767px) {.intro__bg-top {font-size: 4rem; top: -42em; left: -42em; -webkit-transform: rotate(206deg); -ms-transform: rotate(206deg); transform: rotate(206deg)} } .intro__bg-bottom {font-size: 10rem; bottom: 70em; right: -39em} @media screen and (max-width: 1199px) {.intro__bg-bottom {font-size: 5rem} } @media screen and (max-width: 767px) {.intro__bg-bottom {bottom: auto; font-size: 4rem; top: 229rem; right: -50em} } .partners {position: relative; z-index: 1; padding: 200rem 0 300rem} @media screen and (max-width: 767px) {.partners {padding: 74rem 0 83rem} } .partners::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; background: -webkit-gradient(linear, left top, left bottom, from(#A0A97A), to(#9FA976)); background: -o-linear-gradient(top, #A0A97A 0%, #9FA976 100%); background: linear-gradient(180deg, #A0A97A 0%, #9FA976 100%); -webkit-clip-path: polygon(50% 114rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 114rem, 100% 0, 100% 100%, 0 100%, 0 0)} @media screen and (max-width: 1199px) {.partners::before {-webkit-clip-path: polygon(50% 50rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 50rem, 100% 0, 100% 100%, 0 100%, 0 0)} } @media screen and (max-width: 767px) {.partners::before {-webkit-clip-path: polygon(50% 20rem, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 20rem, 100% 0, 100% 100%, 0 100%, 0 0)} } .partners .star {background-color: #B7BF96; top: 2.6em} @media screen and (max-width: 1199px) {.partners .star {top: -3.4em} } @media screen and (max-width: 767px) {.partners .star {top: -2.3em} } .partners .max::after {content: ""; display: block; font-size: 10rem; width: 35.8em; height: 35.8em; position: absolute; z-index: -2; left: 50%; margin-left: -17.9em; top: 0em; border-radius: 50%; opacity: 0.7; background: -o-radial-gradient(50% 50%, 50% 50%, #7F922D 0%, rgba(163, 174, 113, 0) 100%); background: radial-gradient(50% 50% at 50% 50%, #7F922D 0%, rgba(163, 174, 113, 0) 100%)} @media screen and (max-width: 1199px) {.partners .max::after {top: -7em} } @media screen and (max-width: 767px) {.partners .max::after {width: 26.6em; height: 26.6em; margin-left: -13.3em; top: -4em} } .partners__slider, .partners__slider-2 {overflow: visible; z-index: 2} .partners__slider .swiper-wrapper, .partners__slider-2 .swiper-wrapper {-webkit-box-align: center; -ms-flex-align: center; align-items: center} .partners__slider .swiper-slide, .partners__slider-2 .swiper-slide {width: auto} .partners .title-2 {margin-bottom: 65rem; color: #133A1B } .spoiler {background: #B7BF96} @media screen and (max-width: 767px) {.partners .title-2 {margin-bottom: 40rem} } .partner-logo {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 405rem; height: 120rem} @media screen and (max-width: 1199px) {.partner-logo {max-width: 300rem; height: 100rem} } @media screen and (max-width: 767px) {.partner-logo {max-width: 162rem; height: 60rem} } .partners__bg-right {font-size: 9rem; position: absolute; z-index: 1; right: -26.6em; bottom: -28em; pointer-events: none; width: 76.8em; height: 74.8em; -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); -webkit-transform: rotate(-41deg); -ms-transform: rotate(-41deg); transform: rotate(-41deg)} @media screen and (max-width: 1199px) {.partners__bg-right {font-size: 6rem; bottom: -12rem} } @media screen and (max-width: 767px) {.partners__bg-right {font-size: 3rem; bottom: auto; top: -28em; right: -38em} } .benefits {padding-top: 124rem; padding-bottom: 114rem; position: relative; margin-top: -150rem; z-index: 2 } @media screen and (max-width: 767px) {.benefits {margin-top: -30rem; padding-top: 67rem; padding-bottom: 130rem} } .benefits::before {content: ""; background-image: url("../img/benefits-bg.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1} .benefits .star {top: -6.6em; background-color: #011B10} @media screen and (max-width: 767px) {.benefits .star {top: -3.5em} } .benefits__title {max-width: 570rem; margin: 0 auto 40px auto; text-align: center; color: #E4DEAE} .benefits__list {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 135.2em; margin: 0 auto; position: relative; z-index: 2; font-size: 10rem;} @media screen and (max-width: 1199px) {.benefits__list {font-size: 6rem} } @media screen and (max-width: 767px) {.benefits__list {max-width: none; font-size: 10rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; left: 0;} .benefits__title {margin: 0 auto 10px auto} } .benefits__item {position: relative; width: 36.3em; height: 36.8em} .benefits__item {text-align: center} .benefits__item:nth-child(1) {top: 4.8em; left: -12.3em; padding: 25em 7em 0 3em} .benefits__item:nth-child(2) {top: 4.7em; left: -5.2em; padding: 25em 7em 0 3em} .benefits__item:nth-child(3) {top: 8em; left: -1em; padding: 21.7em 4em 0 6em} .benefits__item:nth-child(3) img {max-width: none} .benefits__item:nth-child(4) {top: -.7em; left: -5.3em; padding: 27em 5em 0 3em} .benefits__item:nth-child(5) {top: -.7em; left: 12em; padding: 27em 9em 0 1em} .benefits__item:nth-child(6) { top: -.7em; left: 30em; padding: 27em 0em 0 7em} @media screen and (max-width: 1440px) { .benefits__item:nth-child(1) {padding: 24em 4em 0 6em} .benefits__item:nth-child(2) {padding: 24em 5em 0 5em} .benefits__item:nth-child(3) {top: 10em; padding: 18.7em 0em 0 10em} } @media screen and (max-width: 767px) {.benefits__item {width: 50%; height: 24em} .benefits__item img, .benefits__item picture {width: 100%} .benefits__item:nth-child(1) {top: 0; left: 0; padding: 15em 0em 0em 20px} .benefits__item:nth-child(2) {top: 3em; left: 0; padding: 16.5em 20px 0em 0} .benefits__item:nth-child(3) {top: -5em; left: 0; padding: 17em 0 0em 20px} .benefits__item:nth-child(4) {top: 0; left: 0; padding: 16em 20px 0 0} .benefits__item:nth-child(5) {top: 3em; margin-top: -12em; left: 3em; padding: 18em 5px 0em 5px} .benefits__item:nth-child(6) { top: -2em;left: -2em;padding: 18em 5px 0em 5px;} } .benefits__item picture {display: block; position: absolute; z-index: -1; bottom: 0; left: 0} .benefits__text {color: #E4DEAE; font-size: 2.2em; line-height: 1 } .advantage__txt {line-height: 1} @media screen and (max-width: 767px) {.benefits__text {text-align: center; font-size: 1.4em} } .benefits__bg-left, .benefits__bg-right {font-size: 10rem} @media screen and (max-width: 1199px) {.benefits__bg-left, .benefits__bg-right {font-size: 5rem} } .benefits__bg-left {width: 35em; height: 33em; position: absolute; top: 22.6em; left: -13.5em} @media screen and (max-width: 767px) {.benefits__bg-left {left: auto; right: -19em; -webkit-transform: rotate(-89deg); -ms-transform: rotate(-89deg); transform: rotate(-89deg)} } .benefits__bg-right {width: 53.6em; height: 47.3em; position: absolute; bottom: 2em; right: -19.8em} @media screen and (max-width: 767px) {.benefits__bg-right {bottom: -11em; right: -16em; width: 45em} } .products {margin-bottom: 63rem; position: relative; z-index: 1 } .products__inner {padding-top: 34rem; position: relative} @media screen and (max-width: 767px) {.products__inner {padding-top: 56rem} } .products__title {margin-left: 202rem; margin-bottom: 99rem; color: #E4DEAE} @media screen and (max-width: 1199px) {.products__title {margin-bottom: 61rem; margin-left: 50rem} } @media screen and (max-width: 767px) {.products__title {margin-left: 36rem; margin-bottom: 30rem} } @media screen and (min-width: 768px) {.products__title {max-width: 500rem} } .products__item {position: relative} .products__item:nth-child(1) {margin-bottom: 84rem} @media screen and (max-width: 1199px) {.products__item:nth-child(1) {margin-bottom: 127rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(1) {margin-bottom: 547rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) {margin-bottom: 340rem} } .products__item:nth-child(1)::before {content: ""; position: absolute; top: -600rem; left: 0; right: 0; bottom: -220rem; z-index: -3; background: #011B10} @media screen and (max-width: 1023px) {.products__item:nth-child(1)::before {bottom: -690rem} } .products__item:nth-child(1) .products__info {width: 660rem; margin-left: 202rem; padding: 50rem 224rem 70rem 75rem} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__info {width: 605rem; margin-left: 50rem; padding: 17rem 80rem 32rem 27rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__info {width: 324rem; margin-left: 16rem; padding: 22rem 78rem 24rem 24rem} } .products__item:nth-child(1) .products__info::before {content: ""; background-image: url("../img/product-bg1.svg"); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0% 0%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-filter: drop-shadow(0px 0px 47.141998291px rgba(17, 55, 25, 0.46)); filter: drop-shadow(0px 0px 47.141998291px rgba(17, 55, 25, 0.46))} @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__info::before {background-image: url("../img/product-bg1-mob.svg")} } .products__item:nth-child(1) .products__info::after {background-image: url("../img/product-star1.svg")} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__info::after {top: -56rem; left: -53rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__info::after {top: -30rem; left: -32rem} } .products__item:nth-child(1) .products__descr {max-width: 503rem} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__descr {max-width: 304rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__descr {width: 230rem} } .products__item:nth-child(1) .products__img {width: 900rem; height: 652rem; position: absolute; right: 152rem; top: -146rem} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__img {width: 609.67rem; height: 437.87rem; top: -111rem; right: 0} } @media screen and (max-width: 1023px) {.products__item:nth-child(1) .products__img {top: 277rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__img {width: 375rem; height: auto; top: 280rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: unset} } .products__item:nth-child(1) .products__logo {width: 507rem; height: 215rem; position: absolute; right: 436rem; top: 294rem; z-index: -1} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__logo {width: 459rem; height: 194rem; right: 50rem; top: 159rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(1) .products__logo {top: 659rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__logo {width: 301rem; height: 128rem; left: 37rem; right: unset; top: 470rem} } .products__item:nth-child(1) .products__wrapper {position: absolute; right: 551rem; top: 496rem; z-index: 2} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__wrapper {right: 241rem; top: 356rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(1) .products__wrapper {right: 171rem; top: 803rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__wrapper {top: 559rem; right: unset; left: 106rem} } .products__item:nth-child(1) .products__bg {width: 440rem; height: 533rem; position: absolute; right: -227rem; bottom: -315rem; z-index: -2; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg)} @media screen and (max-width: 1199px) {.products__item:nth-child(1) .products__bg {width: 307.87rem; height: 373.1rem; right: -138rem; bottom: -340rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(1) .products__bg {bottom: -710rem} } @media screen and (max-width: 767px) {.products__item:nth-child(1) .products__bg {width: 180.67rem; height: 218.96rem; right: -93rem; bottom: -396rem; z-index: 0} } .products__item:nth-child(2) {height: 1285rem; padding-top: 360rem} .products__item:nth-child(2)::before {content: ""; background-image: url("../img/product-bg5.svg"); background-repeat: no-repeat; background-size: cover; position: absolute; top: -20rem; left: -30rem; right: 0; bottom: 0} @media screen and (max-width: 767px) {.products__item:nth-child(2)::before {left: -142rem; right: -142rem; background-image: url("../img/product-bg5-mob.svg")} } @media screen and (max-width: 1199px) {.products__item:nth-child(2) {padding-top: 188rem; height: 884rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(2) {height: 1444rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) {padding-top: 106rem; height: 859rem} } .products__item:nth-child(2) .products__info {margin-left: auto; width: 653rem; margin-right: 228rem; padding: 50rem 40rem 64rem 210rem; text-align: right; z-index: 2} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__info {width: 541rem; margin-right: 50rem; padding: 30rem 19rem 39rem 138rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__info {width: 362rem; padding: 17rem 12rem 25rem 74rem; margin-right: 16rem} } .products__item:nth-child(2) .products__info::before {content: ""; background-image: url("../img/product-bg2.svg"); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0% 0%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-filter: drop-shadow(0px 0px 31.4279975891px rgba(173, 38, 50, 0.35)); filter: drop-shadow(0px 0px 31.4279975891px rgba(173, 38, 50, 0.35))} @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__info::before {background-image: url("../img/product-bg2-mob.svg"); top: 0; right: 0; bottom: 0; left: 10rem} } .products__item:nth-child(2) .products__info::after {background-image: url("../img/product-star2.svg"); top: -51rem; left: auto; right: -44rem} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__info::after {top: -49rem; right: -48rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__info::after {top: -26rem; right: -30rem} } .products__item:nth-child(2) .products__info .title-3 {margin-left: auto; max-width: 100%} .products__item:nth-child(2) .products__descr {max-width: 541rem} @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__descr {max-width: 270rem} } .products__item:nth-child(2) .products__img {width: 1369rem; height: 882rem; position: absolute; top: 232rem; left: -38rem; z-index: 1} .products__item:nth-child(2) .products__img .products__img-mob {display: none} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__img {width: 956rem; height: 632rem; top: 125rem; left: -52rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(2) .products__img {top: 625rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__img {height: 438rem; width: 625rem; left: -119rem; right: 0rem; top: 385rem} } .products__item:nth-child(2) .products__logo {width: 774rem; height: 198rem; position: absolute; top: 145rem; left: 224rem} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__logo {width: 530rem; height: 136rem; top: 121rem; left: 50rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__logo {left: 16rem; right: 16rem; top: 387rem; width: auto; min-height: 89rem; height: auto} } .products__item:nth-child(2) .products__wrapper {position: absolute; top: 771rem; left: 24%; z-index: 2} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__wrapper {top: 551rem; left: 208rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(2) .products__wrapper {top: 1061rem; left: 168rem} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__wrapper {left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 681rem} } .products__item:nth-child(2) .products__bg {width: 406.43rem; height: 651.52rem; position: absolute; top: 17rem; right: 145rem} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__bg {width: 176rem; height: 283rem; top: 26rem; right: 105rem; mix-blend-mode: lighten} } @media screen and (max-width: 767px) {.products__item:nth-child(2) .products__bg {width: 130rem; height: 174rem; top: 19rem; right: 33rem} } @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__bg-pc {display: none} } .products__item:nth-child(2) .products__bg-tabel {display: none} @media screen and (max-width: 1199px) {.products__item:nth-child(2) .products__bg-tabel {display: block; -o-object-fit: cover; object-fit: cover} } .products__item:nth-child(3) {height: 912rem; padding-top: 25rem; z-index: 1} @media screen and (max-width: 1199px) {.products__item:nth-child(3) {padding-top: 0; height: 740rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(3) {height: 1120rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) {height: 813rem} } .products__item:nth-child(3)::before {content: ""; background-image: url("../img/product-bg7.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; top: -337rem; left: 0; right: 0; bottom: 0} @media screen and (max-width: 1199px) {.products__item:nth-child(3)::before {left: -300rem; right: -580rem; top: -250rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3)::before {top: -120rem; left: unset; right: -50rem; width: 1011rem} } .products__item:nth-child(3) .products__info {width: 653rem; margin-left: 202rem; padding: 38rem 190rem 87rem 34rem; z-index: 2} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__info {margin-left: 50rem; padding: 28rem 151rem 24rem 46rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__info {width: 370rem; padding: 17rem 70rem 24rem 24rem; margin-left: 16rem} } .products__item:nth-child(3) .products__info::before {content: ""; background-image: url("../img/product-bg3.svg"); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0% 0%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; -webkit-filter: drop-shadow(0px 0px 28.2851982117px rgba(201, 195, 147, 0.66)); filter: drop-shadow(0px 0px 28.2851982117px rgba(201, 195, 147, 0.66))} @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__info::before {background-image: url("../img/product-bg3-mob.svg"); background-size: contain} } .products__item:nth-child(3) .products__info::after {background-image: url("../img/product-star3.svg")} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__info::after {top: -52rem; left: -51rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__info::after {left: -26rem; top: -31rem} } .products__item:nth-child(3) .products__info .title-3 {color: #2F1811} .products__item:nth-child(3) .products__descr {max-width: 562rem; color: #2F1811} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__descr {width: 306rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__descr {width: auto; max-width: 245rem} } .products__item:nth-child(3) .products__img {width: 876rem; height: 1084rem; position: absolute; top: -216rem; right: 151rem; z-index: 2} .products__item:nth-child(3) .products__img::after {display: block; content: ""; font-size: 10rem; width: 81.6em; height: 81.8em; background: url("../img/product3-el.png") no-repeat 50% 50%/contain; position: absolute; z-index: -1; top: 12em; right: -36.4em} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__img {width: 833rem; height: 873.7rem; top: -225rem; right: -133rem} .products__item:nth-child(3) .products__img::after {font-size: 8rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(3) .products__img {top: 245rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__img {width: 524rem; height: 524rem; top: 211rem; right: -85rem} .products__item:nth-child(3) .products__img::after {font-size: 3.5rem; right: -14em; top: 26em} } .products__item:nth-child(3) .products__logo {width: 529rem; height: 348rem; position: absolute; top: 267rem; left: 549rem} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__logo {width: 488rem; height: 332rem; left: 220rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(3) .products__logo {left: 50rem; top: 330rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__logo {width: 336rem; height: 228rem; left: 16rem; top: 213rem} } .products__item:nth-child(3) .products__wrapper {position: absolute; right: 517rem; top: 613rem; z-index: 3} @media screen and (max-width: 1199px) {.products__item:nth-child(3) .products__wrapper {right: 255rem; top: 496rem} } @media screen and (max-width: 1023px) {.products__item:nth-child(3) .products__wrapper {top: 956rem} } @media screen and (max-width: 767px) {.products__item:nth-child(3) .products__wrapper {top: unset; right: unset; bottom: 119rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%)} } @media screen and (min-width: 768px) {.products__info .title-3 {max-width: 60%} } .products__info .link {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-top: 15rem; color: #fff; text-decoration: underline} .products__info .link::before {content: ""; display: inline-block; width: 7rem; height: 13rem; margin-right: 7rem; background: url("../img/icons/chevron.svg") no-repeat 50% 50%/contain} .products__logo svg {display: block; width: 100%; height: 100%} .products__info {width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative} .products__info::after {content: ""; display: block; width: 102rem; height: 102rem; background-repeat: no-repeat; background-size: contain; position: absolute; top: -45rem; left: -50rem} @media screen and (max-width: 767px) {.products__info::after {width: 63rem; height: 63rem} } .products__info .title-3 {color: #E4DEAE} .products__descr {line-height: 1.3; color: #E4DEAE} @media screen and (max-width: 767px) {.products__descr {line-height: 1.2} } .products__bg1 {width: 456rem; height: 456rem; position: absolute; bottom: 187rem; left: -84rem} @media screen and (max-width: 1199px) {.products__bg1 {width: 291.42rem; height: 291.42rem; bottom: 203rem} } @media screen and (max-width: 767px) {.products__bg1 {width: 195rem; height: 195rem; left: -88rem; bottom: unset; top: 120rem} } .products__bg2 {width: 689rem; height: 686rem; position: absolute; top: -265rem; right: -305rem; z-index: 3} @media screen and (max-width: 1199px) {.products__bg2 {width: 330rem; height: 329rem; top: -211rem; right: -164rem} } @media screen and (max-width: 1023px) {.products__bg2 {top: 260rem} } @media screen and (max-width: 767px) {.products__bg2 {width: 168rem; height: 167rem; right: -70rem; top: 200rem} } .power {padding: 266rem 0 300rem; background-color: #0E3315; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; margin-top: -200rem; position: relative} @media screen and (max-width: 1199px) {.power {padding-top: 200rem; padding-bottom: 200rem} } @media screen and (max-width: 767px) {.power {margin-top: -150rem; padding-top: 100rem} } .power .after {font-size: 10rem; width: 235.9em; height: 31.9em; position: absolute; z-index: 1; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -5em} @media screen and (max-width: 1199px) {.power .after {font-size: 7rem} } @media screen and (max-width: 767px) {.power .after {font-size: 5rem} } .power__title {max-width: 1150rem; margin: 0 auto 112rem; text-align: center; color: #E4DEAE; position: relative; z-index: 2} @media screen and (max-width: 767px) {.power__title {margin-bottom: 68rem} } .power__slider {font-size: 10rem; overflow: visible; /* max-width: 87em; */ } .power__slider .swiper-slide {margin: 0} @media screen and (max-width: 1199px) {.power__slider {font-size: 7rem} } @media screen and (max-width: 767px) {.power__slider {padding: 0 20rem; font-size: 6.4rem} } @media screen and (max-width: 1199px) {.power .slider-arrow {top: 70%} } @media screen and (min-width: 1200px) {.power .slider-arrow {top: 50%; left: 50%} .power .slider-prev {-webkit-transform: translateX(-550rem); -ms-transform: translateX(-550rem); transform: translateX(-550rem)} .power .slider-next {-webkit-transform: translateX(522rem); -ms-transform: translateX(522rem); transform: translateX(522rem)} } .power-items {display: flex; justify-content: center; gap: 20px} .power-item {font-size: 1em; width: 40%; position: relative; z-index: 1; color: #fff; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; -o-transition: transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear} .power-item::before {content: ""; display: block; width: 100%; height: 50em; position: absolute; left: 0; z-index: -1; background: no-repeat 50% 0%/contain; top: 0} .power-item::after {content: ""; display: block; width: 100%; height: 50em; position: absolute; z-index: -2; left: 0; top: 42em; background: url("../img/home/power-border.svg") no-repeat 50% 0%/contain} .power-item__img {height: 30em; margin-bottom: 2em; margin-top: 5em} .power-item__img img {margin: 0 auto} .power-item__title {font-size: 3em; line-height: 1; margin-bottom: 1.2em} .power-item__body {padding: 0 5em} .power-item__txt {font-size: 2em; min-height: 12em} .power-item__btn {margin-top: auto} .power-item__btn .button {color: #fff; border-radius: 30px; font-size: 1.8em; width: 10em; height: 3em; padding: 0; line-height: 3em; font-weight: 200} .power-item-1::before {background-image: url("../img/home/power-1-bg.svg")} .power-item-1 .button {background-color: #4D91AE} .power-item-2::before {background-image: url("../img/home/power-2-bg.svg")} .power-item-2 .button {color: #011B10; background-color: #E4DEAE} .power-item-3::before {background-image: url("../img/home/power-3-bg.svg")} .power-item-3 .button {background-color: #2E763D} .power-item-4::before {background-image: url("../img/home/power-4-bg.svg")} .power-item-4 .power-item__img .img {-webkit-transform: translateY(-1.1em); -ms-transform: translateY(-1.1em); transform: translateY(-1.1em)} .power-item-4 .button {background-color: #5D4166} .power-item-left .power-item__title {text-align: right} .power-item-left .power-item__body {text-align: right} .power-item-left .power-item__body:before {content:''; display: block; float: right; width: 100%; height: 40em; shape-outside: polygon(100% 100%, 85% 100%, 100% 20%)} /* .power-item-left .button {margin-right: auto} */ .power-item-right .power-item__title {text-align: left} .power-item-right .power-item__body:before {content:''; display: block; float: left; width: 100%; height: 40em; shape-outside: polygon(0% 100%, 20% 100%, 0% 20%)} .power-item-right:after {-webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1)} /* .power-item-right .button {margin-left: auto} */ .power-item-left {} .power-item-5::before {background-image: url("../img/home/power-5-bg.svg")} .power-item-5 .button {background-color: #6D2A25} .power-item-6::before {background-image: url("../img/home/power-6-bg.svg")} .power-item-6 .button {background-color: #A3212D} .power-item-7::before {background-image: url("../img/home/power-7-bg.svg")} .power-item-7 .button {background-color: #872677} .power-item-8::before {background-image: url("../img/home/power-8-bg.svg")} .power-item-8 .button {background-color: #373D7B} .leaf {font-size: 10rem; width: 50.2em; height: 51.4em; position: absolute; z-index: 0; top: -15em; right: -24em} @media screen and (max-width: 1199px) {.leaf {font-size: 5rem; top: 0} } @media screen and (max-width: 767px) { .power-item {width: calc(50% - 2px)} .power-item__img {height: 20em; margin-bottom: 1em} .power-items {gap: 5px} .power .slider-arrow {top: 40%} .power-item__title {font-size: 2.6em} .leaf {top: -32em; right: -26em} .power-item__txt {font-size: 1.7em; min-height: 11em} .power-item__body {padding: 0 2em} .power-item__btn .button {width: 90px; height: 2.5em; font-size: 1.7em} .power-item::after {top: 30em} } .amazonica {padding-top: 153rem; position: relative; z-index: 2; margin-top: -12rem} @media screen and (max-width: 767px) {.amazonica {margin-top: -50rem; padding-top: 70rem} } .amazonica::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; background: url("../img/home/amazonica-bg.jpg") no-repeat 50% 0%/cover; -webkit-clip-path: polygon(50% 0%, 100% 70px, 100% 100%, 0 100%, 0 70px); clip-path: polygon(50% 0%, 100% 70px, 100% 100%, 0 100%, 0 70px)} @media screen and (max-width: 767px) {.amazonica::before {-webkit-clip-path: polygon(50% 0%, 100% 30px, 100% 100%, 0 100%, 0 30px); clip-path: polygon(50% 0%, 100% 30px, 100% 100%, 0 100%, 0 30px); height: calc(100% - 160rem)} } .amazonica .star {background-color: #C9C393; top: -7em} @media screen and (max-width: 767px) {.amazonica .star {top: -3.2em} } .amazonica__title {max-width: 870rem; margin-bottom: 200rem; color: #E4DEAE} .amazonica__logo {font-size: 10rem; width: 169.1em; height: 26.8em; position: absolute; z-index: -1; top: 37em} @media screen and (max-width: 1199px) {.amazonica__logo {font-size: 7rem} } @media screen and (max-width: 767px) {.amazonica__logo {left: 50%; transform: translateX(-50%); font-size: 3rem; top: 68em} } .amazonica__center {position: relative; max-width: 1180rem; margin: 0 auto; padding: 494rem 164rem 160rem; background: #E4DEAE; box-shadow: 0px 4px 50px rgba(228, 222, 174, 0.44); border-radius: 700rem 700rem 0 0; text-align: center} @media screen and (max-width: 1199px) {.amazonica__center {padding: 350rem 50rem 100rem} } @media screen and (max-width: 767px) {.amazonica__center {padding: 150rem 14rem 70rem; border-radius: 700rem} } .amazonica__center .title {font-size: 51rem; margin-bottom: 55rem} @media screen and (max-width: 767px) {.amazonica__center .title {margin-bottom: 17rem; font-size: 24rem} } .amazonica__img {position: absolute; font-size: 10rem; width: 104.9em; height: 83.5em; top: -28em; left: 5em} @media screen and (max-width: 1199px) {.amazonica__img {font-size: 7rem} } @media screen and (max-width: 767px) {.amazonica__img {font-size: 4rem; top: -51em; left: -12em} } .amazonica__btn {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 50rem} .amazonica__btn .btn-rect {border-color: #B77B79; z-index: 1 } @media screen and (max-width: 767px) {.amazonica__btn {margin-top: 26rem} } .amazonica__bg {width: 689rem; height: 686rem; position: absolute; top: 116rem; right: -305rem; z-index: 3} @media screen and (max-width: 1199px) {.amazonica__bg {width: 330rem; height: 329rem; top: -211rem; right: -164rem} } @media screen and (max-width: 1023px) {.amazonica__bg {top: 260rem} } @media screen and (max-width: 767px) {.amazonica__bg {width: 138rem; height: 167rem; top: 85rem; right: -48rem} } .advantages {display: grid; gap: 16rem 20rem; grid-template-columns: repeat(3, 1fr)} @media screen and (max-width: 1199px) {.advantages {grid-template-columns: repeat(2, 1fr)} } @media screen and (max-width: 767px) {.advantages {gap: 15rem 18rem} } .advantage {width: 270rem; height: 280rem; margin: 0 auto; padding: 30rem 25rem 12rem; position: relative; z-index: 1 } @media screen and (max-width: 767px) {.advantage {width: 147rem; height: 150rem; padding: 12rem 10rem 16rem} } .advantage::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; background: url("../img/home/advantage-item-bg.svg") no-repeat 50% 50%/contain} .advantage__ic {height: 90rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 25rem} @media screen and (max-width: 767px) {.advantage__ic {height: 40rem; margin-bottom: 10rem} } .certificates {padding-top: 136rem; padding-bottom: 208rem} .certificates::before {background: -o-radial-gradient(50% 50%, 50% 50%, #133A1B 0%, #0C2511 100%); background: radial-gradient(50% 50% at 50% 50%, #133A1B 0%, #0C2511 100%)} @media screen and (max-width: 767px) {.certificates {margin-top: -160rem; padding-top: 214rem; padding-bottom: 90rem; z-index: 0} .certificates::before {-webkit-clip-path: none; clip-path: none; background: -o-radial-gradient(50% 80%, 50% 50%, #133A1B 0%, #0C2511 100%); background: radial-gradient(50% 50% at 50% 80%, #133A1B 0%, #0C2511 100%)} } .certificates .star {background-color: #C9C393} @media screen and (max-width: 767px) {.certificates .star {display: none} } .certificates__head {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #B7BF96; padding: 0 245rem 0 175rem} @media screen and (max-width: 1199px) {.certificates__head {display: block; margin-bottom: 60rem; padding: 0 20rem} } @media screen and (max-width: 767px) {.certificates__head {margin-bottom: 48rem} } .certificates__title {-webkit-box-flex: 0; -ms-flex: 0 0 800rem; flex: 0 0 800rem} @media screen and (max-width: 1199px) {.certificates__title {margin-bottom: 30rem} } @media screen and (max-width: 767px) {.certificates__title {margin-bottom: 20rem} } .certificates__subtitle {margin-bottom: 94rem; text-align: center; color: #B7BF96} @media screen and (max-width: 767px) {.certificates__subtitle {font-size: 32rem; margin-bottom: 30rem} } .certificates__slider {max-width: 1178rem} .certificates__slider .certificate {width: 100%; height: 652rem} @media screen and (max-width: 767px) {.certificates__slider {max-width: 190rem} .certificates__slider .certificate {width: 190rem; height: 280rem; margin: 0 auto} } @media screen and (min-width: 768px) {.certificates__slider .certificate {-webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; opacity: 0.3} .certificates__slider .swiper-slide {max-width: 438rem} .certificates__slider .swiper-slide-active .certificate {opacity: 1; -webkit-box-shadow: 0px 0px 40px 0px rgba(183, 191, 150, 0.58); box-shadow: 0px 0px 40px 0px rgba(183, 191, 150, 0.58)} .certificates__slider .swiper-slide-next .certificate, .certificates__slider .swiper-slide-prev .certificate {opacity: 0.6} } .certificates__arrows .slider-arrow {top: 50%; margin-top: -3.1em} .certificates__arrows .slider-arrow::after {display: none !important} .certificates__arrows .slider-prev {left: 200rem} .certificates__arrows .slider-next {right: 200rem} .certificates__logo {font-size: 10rem; width: 172em; height: 42.9em; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translate(-50%, -8%); -ms-transform: translate(-50%, -8%); transform: translate(-50%, -8%)} @media screen and (max-width: 1199px) {.certificates__logo {font-size: 8rem} } @media screen and (max-width: 767px) {.certificates__logo {display: none} } .certificates .circles {position: absolute; font-size: 10rem; width: 95.4em; height: 95.4em; background: url("../img/home/circles.svg") no-repeat 50% 50%/contain; opacity: 0.2; left: 50%; top: 50%; margin: -46em 0 0 -47.7em} .certificates .circles::after {content: ""; display: block; width: 103.4em; height: 103.4em; position: absolute; z-index: -1; left: 50%; top: 50%; margin: -51.7em 0 0 -51.7em; background: -o-radial-gradient(50% 50%, 50% 50%, rgba(127, 146, 45, 0.6) 0%, rgba(163, 174, 113, 0) 100%); background: radial-gradient(50% 50% at 50% 50%, rgba(127, 146, 45, 0.6) 0%, rgba(163, 174, 113, 0) 100%)} @media screen and (max-width: 767px) {.certificates .circles {font-size: 3.7rem} } .residents {padding-top: 150rem} @media screen and (max-width: 767px) {.residents {padding-top: 78rem; padding-bottom: 90rem} } .residents .star {background-color: #B7BF96} .residents .star::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 0; left: 0; top: 0; -webkit-filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.15)); filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.15))} .residents::before {background: -webkit-gradient(linear, left top, left bottom, from(#A0A97A), to(#9FA976)); background: -o-linear-gradient(top, #A0A97A 0%, #9FA976 100%); background: linear-gradient(180deg, #A0A97A 0%, #9FA976 100%)} .residents__title {max-width: 936rem; margin: 0 auto 77rem; color: #133A1B} @media screen and (max-width: 767px) {.residents__title {margin-bottom: 29rem} } .residents-slider {padding-bottom: 100rem} @media screen and (max-width: 767px) {.residents-slider {padding-bottom: 0rem;padding-top:20rem} } @media screen and (min-width: 1200px) {.residents-slider .swiper-wrapper {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center} } @media screen and (max-width: 767px) {.residents-slider .swiper-slide {max-width: 160rem} } .residents-slider .partner-logo {height: 80rem; max-width: 400rem} @media screen and (max-width: 767px) {.residents-slider .partner-logo {max-width: 160rem; height: 38rem} } @media screen and (max-width: 767px) {.residents__bg-left {font-size: 6rem; width: 35em; height: 33em; position: absolute; top: -7em; left: -19em; -webkit-transform: rotate(361deg); -ms-transform: rotate(361deg); transform: rotate(361deg)} .residents__bg-right {font-size: 4rem; width: 53.6em; height: 47.3em; position: absolute; top: -12em; right: -24em} } .gallery-slider .swiper-slide {width: auto} .gallery-slider .photo {display: block; height: 493rem; position: relative} @media screen and (max-width: 767px) {.gallery-slider .photo {height: 300rem} } .gallery-slider .photo::before, .gallery-slider .photo::after {content: ""; display: block; position: absolute; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s} .gallery-slider .photo::before {width: 100%; height: 100%; left: 0; top: 0; background: #000} .gallery-slider .photo::after {font-size: 10rem; width: 11em; height: 11em; left: 50%; top: 50%; margin: -5.5em 0 0 -5.5em; background: url("../img/icons/plus.svg") no-repeat 50% 50%/contain; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9)} @media screen and (min-width: 1200px) {.gallery-slider .photo:hover::before, .gallery-slider .photo:hover::after {visibility: visible; opacity: 0.5} .gallery-slider .photo:hover::after {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)} } .gallery-slider__arrows .slider-arrow {top: 50%; margin-top: -7.2em} @media screen and (max-width: 767px) {.gallery-slider__arrows .slider-arrow {top: 100%; margin-top: -4em} } .gallery-slider__arrows .slider-arrow::before {background-color: #21522B} .gallery-slider__arrows .slider-arrow::after {background-color: #B7BF96} .videos {padding: 96rem 0 180rem; color: #B7BF96} @media screen and (max-width: 767px) {.videos {padding-top: 50rem; padding-bottom: 80rem} } @media screen and (min-width: 768px) {.videos {margin-top: 0; background-color: #133A1B} } .videos::before {background-color: #133A1B} @media screen and (min-width: 768px) {.videos::before {display: none} } .videos::after {content: ""; display: block; width: 1198rem; height: 1198rem; border-radius: 50%; position: absolute; z-index: -2; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); opacity: 0.3; background: -o-radial-gradient(50% 50%, 50% 50%, #7F922D 0%, rgba(163, 174, 113, 0) 100%); background: radial-gradient(50% 50% at 50% 50%, #7F922D 0%, rgba(163, 174, 113, 0) 100%)} .videos__title {max-width: 700rem; margin-bottom: 30rem} @media screen and (max-width: 767px) {.videos__title {margin-bottom: 20rem} } .videos__subtitle {max-width: 455rem} @media screen and (max-width: 1199px) {.videos__subtitle {margin-bottom: 30rem} } .videos__slider {overflow: visible} .videos__slider .swiper-slide {max-width: 560rem; opacity: 0} .videos__slider .swiper-slide-active {opacity: 1} .videos__slider .swiper-slide-active .video-link {box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.25)} .videos__slider .swiper-slide-prev, .videos__slider .swiper-slide-next {opacity: 0.9} .videos__arrows .slider-arrow {top: 50%; margin-top: -3.1em} .videos__arrows .slider-prev {left: 53em} .videos__arrows .slider-next {right: 53em} .videos__el {font-size: 10rem; top: -4em; right: -27em; position: absolute; z-index: -1; pointer-events: none; width: 76.8em; height: 74.8em; -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); -webkit-transform: scale(1, -1) rotate(-53deg); -ms-transform: scale(1, -1) rotate(-53deg); transform: scale(1, -1) rotate(-53deg)} @media screen and (max-width: 1199px) {.videos__el {font-size: 7rem} } @media screen and (max-width: 767px) {.videos__el {font-size: 4rem; top: 16em; right: -35em} } .video-link {display: block; height: 827rem; position: relative; border-radius: 26px; overflow: hidden; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear} @media screen and (max-width: 767px) {.video-link {height: 500rem} } .video-link::before, .video-link::after {content: ""; display: block; position: absolute} .video-link::before {width: 100%; height: 100%; left: 0; top: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 27, 16, 0.13)), to(#011B10)); background: -o-linear-gradient(top, rgba(1, 27, 16, 0.13) 0%, #011B10 100%); background: linear-gradient(180deg, rgba(1, 27, 16, 0.13) 0%, #011B10 100%)} .video-link::after {font-size: 10rem; width: 14.5em; height: 10.6em; left: 50%; top: 50%; margin: -5.3em 0 0 -7.25em; background: url("../img/icons/youtube-button.png") no-repeat 50% 50%/contain; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear} @media screen and (max-width: 767px) {.video-link::after {font-size: 6rem} } @media screen and (min-width: 1200px) {.video-link:hover::after {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1)} } .video-caption {display: block; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 0 50rem 50rem 50rem; color: #E4DEAE; font-size: 26px; line-height: 1.2} .video-caption strong {font-weight: 500; line-height: 1; margin-top: 25rem; font-size: 48px; color: #fff; display: block} .reviews {padding: 122rem 0 220rem; text-align: center; color: #B7BF96} @media screen and (max-width: 767px) { .reviews {padding: 53rem 0 140rem} .video-caption {font-size: 16px} .video-caption strong {font-size: 26px; margin-top: 10rem} } .reviews::before {background-color: #011B10} .reviews .star {background-color: #2E763D; top: -7em} @media screen and (max-width: 767px) {.reviews .star {top: -3.5em} } .reviews__title {margin-bottom: 65rem} @media screen and (max-width: 767px) {.reviews__title {margin-bottom: 20rem} } .reviews__subtitle {margin-bottom: 46rem} @media screen and (max-width: 767px) {.reviews__subtitle {margin-bottom: 20rem} } .reviews .select {margin: 0 auto 70rem} @media screen and (max-width: 767px) {.reviews .select {margin-bottom: 45rem} } .reviews .slider-wrap::before, .reviews .slider-wrap::after {content: ""; display: block; position: absolute; font-size: 10rem} .reviews .slider-wrap::before {width: 97.6em; height: 95.6em; z-index: 0; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: -o-radial-gradient(50% 50%, 50% 50%, #7F922D 34.9%, rgba(163, 174, 113, 0) 100%); background: radial-gradient(50% 50% at 50% 50%, #7F922D 34.9%, rgba(163, 174, 113, 0) 100%); border-radius: 50%; opacity: 0.3} @media screen and (max-width: 767px) {.reviews .slider-wrap::before {font-size: 7rem} } @media screen and (max-width: 767px) {.reviews .slider-wrap::before {font-size: 5rem} } .reviews .slider-wrap::after {width: 68.7em; height: 22.1em; z-index: 1; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background: #011B10; border-top: 1px solid #AEB789} @media screen and (max-width: 1199px) {.reviews .slider-wrap::after {width: auto; left: 20rem; right: 20rem; -webkit-transform: translate(0, 50%); -ms-transform: translate(0, 50%); transform: translate(0, 50%)} } @media screen and (max-width: 767px) {.reviews .slider-wrap::after {-webkit-transform: translate(0, 70%); -ms-transform: translate(0, 70%); transform: translate(0, 70%)} } .reviews__slider {max-width: 1142rem} .reviews__slider .swiper-slide {max-width: 410rem} @media screen and (max-width: 1199px) {.reviews__slider .swiper-slide {max-width: 302rem} } @media screen and (max-width: 767px) {.reviews__slider .swiper-slide {max-width: 100%} } .reviews__slider .review {opacity: 0.4; -webkit-filter: blur(5px); filter: blur(5px); padding: 0 5px} @media screen and (max-width: 767px) {.reviews__slider .review {margin: 0 auto; padding: 0 4px} } .reviews__slider .swiper-slide-next .review, .reviews__slider .swiper-slide-prev .review {opacity: 0.7; -webkit-filter: blur(2.5px); filter: blur(2.5px)} .reviews__slider .swiper-slide-active .review {opacity: 1; -webkit-filter: blur(0); filter: blur(0)} .reviews__slider .swiper-slide-active .review::before {opacity: 1; visibility: visible} .reviews__arrows .slider-arrow {top: 44%; margin-top: -3.1em} .reviews__arrows .slider-prev {left: 190rem} .reviews__arrows .slider-next {right: 190rem} .reviews__btn {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; top: -25rem; z-index: 2} .reviews__btn .btn-rect {width: 250rem} .description-reviews { color: #B7BF96; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; top: -65rem; padding: 0 60px; z-index: 2; } .br_mobi { display: none; } .mobi_none { display: inline-block; } @media only screen and (max-width: 767px) { .description-reviews { top: -45rem; } .mobi_none { display: none; } .br_mobi { display: block; } } .reviews .leafs {font-size: 10rem; width: 133.9em; height: 45.2em; position: absolute; z-index: 1; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 37%); -ms-transform: translate(-50%, 37%); transform: translate(-50%, 37%)} @media screen and (max-width: 1199px) {.reviews .leafs {font-size: 8rem} } @media screen and (max-width: 767px) {.reviews .leafs {font-size: 6rem} } .review {font-size: 10rem; width: 41em; height: 85.2em; overflow: hidden; position: relative; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background-clip: content-box} @media screen and (max-width: 1199px) {.review {width: 302rem; height: 630rem} } @media screen and (max-width: 767px) {.review {width: 270rem; height: 559rem} } .review::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 0; left: 0; top: 0; background-image: url("../img/home/ramka-l.svg"), url("../img/home/ramka-r.svg"); background-position: left 80px, right 80px; background-repeat: no-repeat; background-size: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear} .review .img--cover {-o-object-position: 50% 0; object-position: 50% 0; border: 3px solid #5D8769; border-radius: 40px} .blog__slider .swiper-slide {height: unset} .blog {padding: 150rem 0 200rem} @media screen and (max-width: 767px) { .review::before {background-size: 4px; background-position: left 60px, right 60px} .review .img--cover {border-radius: 30px} .blog {padding-top: 65rem; padding-bottom: 65rem} } .blog::before {background: #0E3315 url("../img/home/power-bg.png") no-repeat 50% 50%/cover} .blog__title {margin-bottom: 79rem; text-align: center; color: #AEB789} @media screen and (max-width: 767px) {.blog__title {margin-bottom: 36rem} } @media screen and (max-width: 767px) {.blog__slider {overflow: visible} .blog__slider .swiper-slide {max-width: 255rem} } .blog__btn {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 80rem} @media screen and (max-width: 767px) {.blog__btn {margin-top: 42rem} } .blog__arrows .slider-arrow {top: 50%; margin-top: -13em} @media screen and (max-width: 767px) {.blog__arrows .slider-arrow {margin-top: -9em} } .blog__bg-left, .blog__bg-right {position: absolute; pointer-events: none; font-size: 10rem} @media screen and (max-width: 1199px) {.blog__bg-left, .blog__bg-right {font-size: 7rem} } @media screen and (max-width: 767px) {.blog__bg-left, .blog__bg-right {display: none} } .blog__bg-left {left: -30em; bottom: 0em; width: 76.8em; height: 74.8em; -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.35)); -webkit-transform: rotate(128deg); -ms-transform: rotate(128deg); transform: rotate(128deg)} .blog__bg-right {width: 35em; height: 33em; position: absolute; top: 16em; right: -12em; -webkit-transform: scale(-1, 1) rotate(1deg); -ms-transform: scale(-1, 1) rotate(1deg); transform: scale(-1, 1) rotate(1deg)} @media screen and (max-width: 767px) {.blog__bg-right {left: auto; right: -19em; -webkit-transform: rotate(-89deg); -ms-transform: rotate(-89deg); transform: rotate(-89deg)} } .slider-wrap {position: relative} .article-thumb {display: block; height: 100%; border-radius: 26rem; overflow: hidden; background-color: #AEB789} .article-thumb__img {height: 275rem} @media screen and (max-width: 767px) {.article-thumb__img {height: 175rem} } .article-thumb__img a {display: block; height: 100%} .article-thumb__body {padding: 40rem 20rem 50rem; font-size: 21rem; line-height: 1.3} @media screen and (max-width: 767px) {.article-thumb__body {font-size: 14rem; padding: 30rem 16rem 24rem} } .article-thumb__date {margin-bottom: 14rem; color: #6A6A6A; margin-bottom: 9rem} .article-thumb__title {font-size: 26rem; font-weight: 500; margin-bottom: 15rem; color: #133A1B} @media screen and (max-width: 767px) {.article-thumb__title {font-size: 16rem} } .faq {padding: 137rem 16rem 144rem} @media screen and (max-width: 767px) {.faq {padding-top: 45rem; padding-bottom: 50rem} } .faq::before {z-index: -2; background: #A7AF83} .faq::after {content: ""; display: block; font-size: 10rem; width: 93.5em; height: 45em; position: absolute; z-index: -1; top: 6em; right: 2.6em; background: url("../img/faq-circle.svg") no-repeat 50% 50%/contain} @media screen and (max-width: 1199px) {.faq::after {font-size: 6rem} } @media screen and (max-width: 767px) {.faq::after {font-size: 3rem; top: 13em; right: 1.6em} } .faq .container {max-width: 1430rem} .faq__title {max-width: 600rem; margin-bottom: 144rem} @media screen and (max-width: 1199px) {.faq__title {margin-bottom: 100rem} } @media screen and (max-width: 767px) {.faq__title {max-width: 250rem; margin-bottom: 32rem} } .accordion {max-width: 1212rem} .accordion-item {border-bottom: 2px solid rgba(1, 27, 16, 0.25)} .accordion-item:first-child {border-top: 2px solid rgba(1, 27, 16, 0.25)} .accordion-question {padding: 26rem 0; padding-right: 80rem; font-size: 28rem; font-weight: 500; position: relative; cursor: pointer} .accordion-question::before, .accordion-question::after {content: ""; display: block; font-size: 10rem; width: 0.4em; height: 3.8em; position: absolute; z-index: 0; right: 2em; top: 25rem; background: #133A1B; -webkit-transition: -webkit-transform 0.2s ease-in; transition: -webkit-transform 0.2s ease-in; -o-transition: transform 0.2s ease-in; transition: transform 0.2s ease-in; transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in} .accordion-question::after {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg)} @media screen and (max-width: 767px) {.accordion-question {font-size: 14rem; padding: 16rem 0; padding-right: 60rem} .accordion-question::before, .accordion-question::after {font-size: 5rem; top: 16rem} } @media screen and (min-width: 1200px) {.accordion-question:hover {color: #133A1B} } .accordion-question.is-active {color: #133A1B} .accordion-question.is-active::before {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg)} .accordion-question.is-active::after {opacity: 0} .accordion-answer {padding-bottom: 26rem; padding-right: 80rem; line-height: 1.3} @media screen and (max-width: 767px) {.accordion-answer {padding-bottom: 16rem} } .power .slider-arrow{ font-size: 7rem; }