* {padding: 0; margin: 0; list-style: none}
html, body, .ccm-page, .ccm-image-slider-container, .ccm-image-slider, .ccm-image-slider-inner, .rslides, .rslides li {height: 100%}
a {text-decoration: none; outline: none; transition: all .2s ease-in-out}
div {font-family: 'Mukta', sans-serif}
b, strong {font-weight: 600}
img {border: 0}
.clear {clear: both; font-size: 0; line-height: 0}
.left {float: left}
.right {float: right}
.center {text-align: center}
@media (max-width: 700px) {
html {font-size: .8px; line-height: 1.5}
.page {padding: 0 5%}
.menu-hide {cursor: pointer; position: fixed; top: 16rem; right: 6rem; z-index: 200; transition: all .2s ease-in-out}
.open {width: 20%; height: 100vh}
.menu {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 50; height: 90rem; display: flex; align-items: center; justify-content: center; font-size: 18rem; text-transform: uppercase; font-weight: 600; line-height: 50rem; transition: all .2s ease-in-out}
.menu ul {position: fixed; top: 0; left: 0; width: 80%; height: 100%; z-index: 100; display: flex; justify-content: center; flex-direction: column; align-items: center; transition: all .3s ease-in-out; background: #fff; border-top-right-radius: 20px; border-bottom-right-radius: 20px; transform: translateX(-100%); overflow: hidden; font-size: 20rem}
.menu ul:before {content: ""; display: block; width: 50%; height: 20vw; position: absolute; top: 10vh; left: 25%; background: url(img/logo.png) top no-repeat; background-size: contain; z-index: 1}
.menu ul li a {display: block; padding: 0 10rem; color: #000; position: relative}
.logo {display: flex; align-items: center; justify-content: center; width: 36vw; height: 36vw; background: #fff; z-index: 10; position: absolute; top: 0; left: 5%; transition: all .2s ease-in-out}
.logo img {display: block; width: 64%; height: auto}
.bar {position: absolute; top: 50%; margin-top: -25rem; z-index: 10; right: 90rem; display: flex}
.phone {display: none}
.ue img {display: block; width: auto; height: 50rem; margin-left: 1vw}
.smaller .logo {width: 90rem; height: 90rem; left: 2%}
.showmenu {transform: translateX(0) !important; box-shadow: 0 0 40rem 0 rgba(0,0,0,0.2)}
.full {position: relative; z-index: 1; padding: 90rem 2vw 0 2vw; overflow: hidden}
.slider {position: relative; height: 85vw; margin-bottom: 2vw}
.top-1 {position: relative; height: 45vw; margin-bottom: 2vw}
.top-2 {position: relative; height: 45vw}
.more {position: absolute; left: 4vw; top: 40%; z-index: 3}
.more span {display: block; font-size: 6vw; color: #000; line-height: 1.3; margin-bottom: 2vw}
.more a {display: block; width: 30vw; line-height: 10vw; text-align: center; background: #b0271d; color: #fff; font-size: 3vw; font-weight: 600; text-transform: uppercase}
.more a:hover {padding: 0 .6vw; background: #c12b20}
.container {background: #fff; position: relative; z-index: 2; font-size: 22rem; font-weight: 300; color: #5f5f5f; line-height: 37rem; overflow: hidden}
.container h1, .container h2 {font-size: 38rem; font-weight: 600; color: #000; line-height: 1.3; margin-bottom: 60rem; position: relative; text-align: center}
.container ul {margin: 32rem 0}
.offer {background: url(img/bgc.jpg) top no-repeat; background-size: 100%; padding: 80rem 0}
.offer h1 {margin: 0 0 95rem 0}
.offer ol li {position: relative; text-align: center; font-size: 24rem; font-weight: 600; transition: all .2s ease-in-out; margin-bottom: 3%}
.offer ol li a {display: block; color: #000; padding: 45rem 0; position: relative}
.offer ol li i {display: block; height: 200rem; margin-bottom: 15rem}
.offer ol li:before {display: none !important}
.offer ol li:nth-child(7) {background: #e9eaea}
.about {padding-top: 120rem}
.col-1 {margin-bottom: 40rem}
.a-foto {display: flex; justify-content: flex-end; align-items: flex-end; height: 385rem; margin-bottom: 68rem; position: relative; margin-top: 20rem}
.af1 {width: 80%; height: 300rem; position: absolute; top: 0; left: 0; z-index: 1}
.before {display: block; width: 45rem; height: 100%; background: #b0271d; position: absolute; top: 45rem; left: 100%; z-index: 1}
.af2 {width: 220rem; height: 220rem; position: relative; z-index: 5}
.logos {display: flex; justify-content: center; flex-wrap: wrap}
.logos img {display: block; width: auto; height: 110rem; margin: 0 25rem 25rem 25rem}
.eco {background: url(img/bge.png) repeat-y; background-size: 100%; margin-bottom: 20rem; padding: 80rem 0; font-size: 20rem; line-height: 32rem}
.eco .page {display: flex; justify-content: center; align-items: center; flex-direction: column-reverse}
.eco-foto {display: none}
.eco-logo {margin-bottom: 50rem; width: 40%}
.bottom {background: #f4f4f4 url(img/bgb.jpg) right no-repeat; background-size: contain; padding: 80rem 0 20rem 0}
.contact {display: flex; justify-content: center; margin: 0 auto; flex-direction: column}
.adr:nth-child(2), .adr:last-child {display: none}
.adr {font-size: 23rem; color: #000; margin-bottom: 60rem}
.logo-adr {display: block; width: 180rem; height: auto}
.foot {padding: 50rem 0 0 0; display: flex; justify-content: center; flex-direction: column; align-items: center}
.eu img {display: block; width: 90%; height: auto; margin: 0 auto}
.sub {background: url(img/bgs.jpg) 0 5vw no-repeat; background-size: 100%; padding-top: 8vw}
.sub-title {position: relative; height: 60vw}
.sub-title img {display: none}
.sub-title h1 {position: absolute; left: 8%; top: 35vw; width: 84%; z-index: 10}
.content {padding: 0 8% 100rem 8%}
.content hr {display: block; width: 100%; height: 1px; background: #ddd; border: 0; margin: 80rem 0}
.ib, .ir, .il {display: block; margin: 0 auto 40rem auto; width: auto; height: auto; max-width: 100%; max-height: 1000rem}
.container h3 {font-size: 40rem; font-weight: 500; color: #000; line-height: 1.3; margin: 50rem 0}
.contact-us {padding-top: 80rem; text-align: center}
.contact-us strong {font-size: 34rem; line-height: 40rem; margin-bottom: 50rem; display: block; color: #000}
.contact-us ol {display: flex; justify-content: center; flex-wrap: wrap}
.contact-us ol li {padding-left: 40rem; font-weight: 500; font-size: 28rem; position: relative; margin: 0 30rem}
.products {display: flex; flex-direction: column; align-items: center}
.product {margin: 0 0 80rem 0; padding-bottom: 80rem; border-bottom: 1px solid #ddd}
.product h4, .col h4 {font-size: 30rem; font-weight: 500; color: #000; line-height: 1.3; margin: 0 0 30rem 0}
.details {display: flex; align-items: center; justify-content: space-between; flex-direction: column}
.photo {width: 320rem; margin-bottom: 30rem}
.col {text-align: center; font-size: 21rem; color: #000; font-weight: 400; margin-bottom: 40rem; padding-bottom: 40rem; border-bottom: 1px solid #ddd}
.col h3 {font-size: 34rem}
.col h4 {margin: 32rem 0}
.cha {display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 50rem 0 20rem 0}
.chi {width: 70%; text-align: center; font-size: 16rem; font-weight: 500; color: #000; line-height: 20rem; margin-bottom: 40rem}
.chi img {display: block; width: auto; height: 80rem; margin: 0 auto 20rem auto}
.chaprod .photo {width: 100%}
.sg {margin: 50rem -2rem 0 -2rem !important}
.sg-item {width: calc(33.333% - 4rem) !important; padding: 0 !important; margin: 2rem !important; background: none !important; display: block !important}
.sg-item-image {height: 20vw}
.sg-item img {display: block; width: 100%; height: 100% !important; object-fit: cover; position: relative; z-index: 1}
.cl {margin-top: 60rem; justify-content: center; flex-wrap: wrap}
.cl img {margin: 0 20rem 40rem 20rem}
}
@media (min-width: 701px) and (max-width: 1050px) {
html {font-size: .8px; line-height: 1.5}
.page {padding: 0 8%}
.menu-hide {cursor: pointer; position: fixed; top: 16rem; right: 6rem; z-index: 200; transition: all .2s ease-in-out}
.open {width: 50%; height: 100vh}
.menu {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 50; height: 90rem; display: flex; align-items: center; justify-content: center; font-size: 18rem; text-transform: uppercase; font-weight: 600; line-height: 50rem; transition: all .2s ease-in-out}
.menu ul {position: fixed; top: 0; left: 0; width: 50%; height: 100%; z-index: 100; display: flex; justify-content: center; flex-direction: column; align-items: center; transition: all .3s ease-in-out; background: #fff; border-top-right-radius: 20px; border-bottom-right-radius: 20px; transform: translateX(-100%); overflow: hidden; font-size: 22rem}
.menu ul:before {content: ""; display: block; width: 50%; height: 15vw; position: absolute; top: 10vh; left: 25%; background: url(img/logo.png) top no-repeat; background-size: contain; z-index: 1}
.menu ul li a {display: block; padding: 0 10rem; margin: 10rem 0; color: #000; position: relative}
.logo {display: flex; align-items: center; justify-content: center; width: 28vw; height: 28vw; background: #fff; z-index: 10; position: absolute; top: 0; left: 8%; transition: all .2s ease-in-out}
.logo img {display: block; width: 64%; height: auto}
.bar {position: absolute; top: 50%; margin-top: -25rem; z-index: 10; right: 90rem; display: flex}
.phone {color: #fff; display: block; padding: 0 25rem 0 55rem; background: #b0271d url(img/phone.png) 25rem 50% no-repeat; background-size: 20rem}
.ue img {display: block; width: auto; height: 50rem; margin-left: 1vw}
.smaller .logo {width: 90rem; height: 90rem; left: 2%}
.showmenu {transform: translateX(0) !important; box-shadow: 0 0 40rem 0 rgba(0,0,0,0.2)}
.full {position: relative; z-index: 1; padding: 90rem 2vw 0 2vw; overflow: hidden}
.slider {position: relative; height: 85vw; margin-bottom: 2vw}
.top-1 {position: relative; height: 45vw; margin-bottom: 2vw}
.top-2 {position: relative; height: 45vw}
.more {position: absolute; left: 4vw; top: 60%; z-index: 3}
.more span {display: block; font-size: 5vw; color: #000; line-height: 1.3; margin-bottom: 2vw}
.more a {display: block; width: 20vw; line-height: 5vw; text-align: center; background: #b0271d; color: #fff; font-size: 2vw; font-weight: 600; text-transform: uppercase}
.more a:hover {padding: 0 .6vw; background: #c12b20}
.container {background: #fff; position: relative; z-index: 2; font-size: 22rem; font-weight: 300; color: #5f5f5f; line-height: 37rem; overflow: hidden}
.container h1, .container h2 {font-size: 38rem; font-weight: 600; color: #000; line-height: 80rem; margin-bottom: 60rem; position: relative}
.container h1:before, .container h2:before {content: ""; display: block; width: 100%; height: 4rem; background: #b0271d; position: absolute; top: 100%; left: 0}
.container ul {margin: 32rem 0}
.offer {background: url(img/bgc.jpg) top no-repeat; background-size: 100%; padding: 80rem 0}
.offer h1 {margin: 0 0 95rem 0}
.offer ol {display: flex; flex-wrap: wrap; justify-content: space-between}
.offer ol li {width: 49%; position: relative; text-align: center; font-size: 24rem; font-weight: 600; transition: all .2s ease-in-out; margin-bottom: 2%}
.offer ol li a {display: block; color: #000; padding: 25rem 0; position: relative}
.offer ol li i {display: block; height: 230rem; margin-bottom: 15rem}
.offer ol li:before {display: none !important}
.offer ol li:nth-child(7) {background: #e9eaea; width: 100%}
.offer ol li:nth-child(7) a {width: 49%; padding: 270rem 51% 25rem 0}
.offer ol li:nth-child(7) i {width: 430rem; height: 280rem; position: absolute; right: 0; top: 30rem}
.offer ol li:nth-child(7):after {content: ""; display: block; width: 197rem; height: 101rem; background: url(img/puchacz-logo.png); background-size: cover; position: absolute; bottom: 88rem; left: 24%; margin-left: -100rem; z-index: 10}
.about {padding-top: 120rem}
.col-1 {margin-bottom: 80rem}
.a-foto {display: flex; justify-content: flex-end; align-items: flex-end; height: 385rem; margin-bottom: 68rem; position: relative; margin-top: 20rem}
.af1 {width: 90%; height: 330rem; position: absolute; top: 0; left: 0; z-index: 1}
.before {display: block; width: 45rem; height: 100%; background: #b0271d; position: absolute; top: 45rem; left: 100%; z-index: 1}
.af2 {width: 270rem; height: 250rem; position: relative; z-index: 5}
.logos {display: flex; justify-content: space-between}
.logos img {display: block; width: auto; height: 110rem}
.eco {background: url(img/bge.png) repeat-y; background-size: 100%; margin-bottom: 20rem; padding: 80rem 0; font-size: 20rem; line-height: 32rem}
.eco .page {display: flex; justify-content: space-between; align-items: center}
.eco-desc {width: 68%}
.eco-foto {display: none}
.eco-logo {width: 25%}
.bottom {background: #f4f4f4 url(img/bgb.jpg) right no-repeat; background-size: contain; padding: 80rem 0 20rem 0}
.contact {display: flex; justify-content: space-between; margin: 0 auto; flex-wrap: wrap}
.adr {font-size: 23rem; color: #000; margin-bottom: 60rem}
.logo-adr {display: block; width: 180rem; height: auto}
.foot {padding: 50rem 0 0 0; display: flex; justify-content: center; flex-direction: column; align-items: center}
.eu img {display: block; width: auto; height: 82rem}
.sub {background: url(img/bgs.jpg) 0 5vw no-repeat; background-size: 100%; padding-top: 8vw}
.sub-title {position: relative; height: 450rem}
.sub-title img {display: block; width: auto; height: 300rem; position: absolute; top: 80rem; left: 55%; z-index: 1}
.sub-title h1 {position: absolute; left: 8%; top: 24vw; z-index: 10}
.content {padding: 0 8% 100rem 8%}
.content hr {display: block; width: 100%; height: 1px; background: #ddd; border: 0; margin: 80rem 0}
.ib, .ir, .il {display: block; margin: 0 auto 40rem auto; width: auto; height: auto; max-width: 100%; max-height: 1000rem}
.container h3 {font-size: 40rem; font-weight: 500; color: #000; line-height: 1.3; margin: 50rem 0}
.contact-us {padding-top: 80rem; text-align: center}
.contact-us strong {font-size: 34rem; line-height: 40rem; margin-bottom: 50rem; display: block; color: #000}
.contact-us ol {display: flex; justify-content: center}
.contact-us ol li {padding-left: 40rem; font-weight: 500; font-size: 28rem; position: relative; margin: 0 30rem}
.products {display: flex; flex-direction: column; align-items: center}
.product {margin: 0 0 80rem 0; padding-bottom: 80rem; border-bottom: 1px solid #ddd}
.product h4, .col h4 {font-size: 30rem; font-weight: 500; color: #000; line-height: 1.3; margin: 0 0 30rem 0}
.details {display: flex; align-items: center; justify-content: space-between; flex-direction: column}
.photo {width: 320rem; margin-bottom: 30rem}
.param {width: 400rem}
.con {display: flex; justify-content: space-between; position: relative}
.con:before {content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 50%; background: #ddd}
.col {width: 45%; text-align: center; font-size: 21rem; color: #000; font-weight: 400}
.col h3 {font-size: 34rem}
.col h4 {margin: 32rem 0}
.cha {display: flex; justify-content: space-between; margin: 50rem 0}
.chi {width: 30%; text-align: center; font-size: 16rem; font-weight: 500; color: #000; line-height: 20rem}
.chi img {display: block; width: auto; height: 80rem; margin: 0 auto 20rem auto}
.chacon {width: 100%; display: flex; justify-content: center; flex-wrap: wrap}
.chadr {margin: 0 0 50rem 0; width: 40%}
.chaprod .photo {width: 400rem}
.sg {margin: 50rem -2rem 0 -2rem !important}
.sg-item {width: calc(16.666% - 4rem) !important; padding: 0 !important; margin: 2rem !important; background: none !important; display: block !important}
.sg-item-image {height: 12vw}
.sg-item img {display: block; width: 100%; height: 100% !important; object-fit: cover; position: relative; z-index: 1}
.cl {margin-top: 60rem; justify-content: center; flex-wrap: wrap}
.cl img {margin: 0 20rem 40rem 20rem}
}
@media (min-width: 1051px) {
html {font-size: .65px; line-height: 1.5}
.page {width: 1500rem; margin: auto}
.menu-hide {display: none}
.menu {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 50; height: 8vw; display: flex; align-items: center; justify-content: center; font-size: 18rem; text-transform: uppercase; font-weight: 600; line-height: 50rem; transition: all .2s ease-in-out}
.menu ul {position: relative; z-index: 1; display: flex; justify-content: center}
.menu ul li a {display: block; padding: 0 5rem; margin: 0 10rem; color: #000; position: relative}
.logo {display: flex; align-items: center; justify-content: center; width: 14.5vw; height: 14.5vw; background: #fff; z-index: 10; position: absolute; top: 0; left: 4.5%; transition: all .2s ease-in-out}
.logo img {display: block; width: 64%; height: auto}
.bar {position: absolute; top: 50%; margin-top: -25rem; z-index: 10; right: 1vw; display: flex}
.phone {color: #fff; display: block; padding: 0 25rem 0 55rem; background: #b0271d url(img/phone.png) 25rem 50% no-repeat; background-size: 20rem}
.ue img {display: block; width: auto; height: 50rem; margin-left: 1vw}
.smaller {height: 90rem}
.smaller .logo {width: 90rem; height: 90rem}
.full {position: relative; z-index: 1; height: 100%; overflow: hidden}
.slider {position: absolute; bottom: 1vw; left: 1vw; width: 48.5%; height: calc(100% - 9vw)}
.top-1 {position: absolute; bottom: calc(-3vw + 52.5%); right: 1vw; width: 48.5%; height: calc(47.5% - 5vw)}
.top-2 {position: absolute; bottom: 1vw; right: 1vw; width: 48.5%; height: calc(52.5% - 5vw)}
.more {position: absolute; left: 2vw; top: calc(31vh - 5vw); z-index: 3}
.more span {display: block; font-size: 2.3vw; color: #000; line-height: 1.3; margin-bottom: 1vw}
.more a {display: block; width: 10.5vw; line-height: 2.5vw; text-align: center; background: #b0271d; color: #fff; font-size: 1vw; font-weight: 600; text-transform: uppercase}
.more a:hover {padding: 0 .3vw; background: #c12b20}
.container {background: #fff; position: relative; z-index: 2; font-size: 19rem; font-weight: 300; color: #5f5f5f; line-height: 32rem; overflow: hidden}
.container h1, .container h2 {font-size: 45rem; font-weight: 600; color: #000; line-height: 85rem; margin-bottom: 60rem; position: relative}
.container h1:before, .container h2:before {content: ""; display: block; width: 100%; height: 4rem; background: #b0271d; position: absolute; top: 100%; left: 0}
.container ul {margin: 32rem 0}
.offer {background: url(img/bgc.jpg) top no-repeat; background-size: 100%; padding: 120rem 0}
.offer h1 {margin: 0 0 95rem 95rem}
.offer ol {display: flex; flex-wrap: wrap; justify-content: space-between}
.offer ol li {width: 360rem; position: relative; text-align: center; font-size: 24rem; font-weight: 600; transition: all .2s ease-in-out; margin-bottom: 20rem}
.offer ol li a {display: block; color: #000; padding: 25rem 0; position: relative}
.offer ol li i {display: block; height: 230rem; margin-bottom: 15rem}
.offer ol li:nth-child(7) {background: #e9eaea; width: 740rem}
.offer ol li:nth-child(7) a {width: 320rem; padding: 270rem 420rem 25rem 0}
.offer ol li:nth-child(7) i {width: 430rem; height: 280rem; position: absolute; right: 0; top: 30rem}
.offer ol li:nth-child(7):after {content: ""; display: block; width: 197rem; height: 101rem; background: url(img/puchacz-logo.png); background-size: cover; position: absolute; bottom: 88rem; left: 61rem}
.about {display: flex; padding-top: 150rem; justify-content: space-between}
.col-1 {width: 630rem}
.a-foto {display: flex; justify-content: flex-end; align-items: flex-end; height: 385rem; margin-bottom: 68rem; position: relative; margin-top: 20rem}
.af1 {width: 570rem; height: 330rem; position: absolute; top: 0; left: -80rem; z-index: 1}
.before {display: block; width: 45rem; height: 100%; background: #b0271d; position: absolute; top: 45rem; left: 100%; z-index: 1}
.af2 {width: 270rem; height: 250rem; position: relative; z-index: 5}
.logos {display: flex; justify-content: space-between}
.logos img {display: block; width: auto; height: 110rem}
.col-2 {width: 740rem}
.eco {background: url(img/bge.png) repeat-y; background-size: 100%; margin-bottom: 20rem}
.eco .page {display: flex; justify-content: space-between; align-items: center}
.eco-desc {width: 700rem}
.eco-foto {width: 340rem; height: 430rem}
.eco-logo {width: 255rem}
.bottom {background: #f4f4f4 url(img/bgb.jpg) right no-repeat; background-size: contain; padding: 80rem 0}
.contact {display: flex; justify-content: center}
.adr {margin: 0 50rem; font-size: 21rem; color: #000}
.logo-adr {display: block; width: 180rem; height: auto}
.foot {height: 150rem; display: flex; justify-content: space-between; align-items: center}
.eu img {display: block; width: auto; height: 82rem; margin-left: 140rem}
.copy {margin-right: 140rem}
.sub {background: url(img/bgs.jpg) 0 5vw no-repeat; background-size: 100%; padding-top: 8vw}
.sub-title {position: relative; height: 550rem}
.sub-title img {display: block; width: auto; height: 400rem; position: absolute; top: 80rem; left: 50%; z-index: 1}
.sub-title h1 {position: absolute; left: 50%; margin-left: -600rem; top: 200rem; z-index: 10}
.content {padding: 0 0 100rem 0}
.content hr {display: block; width: 100%; height: 1px; background: #ddd; border: 0; margin: 80rem 0}
.ir {float: right; width: 700rem; height: auto; margin: 0 0 60rem 100rem}
.il {float: left; width: 700rem; height: auto; margin: 0 100rem 60rem 0}
.ib {display: block; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 800rem}
.container h3 {font-size: 40rem; font-weight: 500; color: #000; line-height: 1.3; margin: 50rem 0}
.contact-us {padding-top: 80rem; text-align: center}
.contact-us strong {font-size: 34rem; line-height: 40rem; margin-bottom: 50rem; display: block; color: #000}
.contact-us ol {display: flex; justify-content: center}
.contact-us ol li {padding-left: 40rem; font-weight: 500; font-size: 28rem; position: relative; margin: 0 30rem}
.products {display: flex; justify-content: space-between; flex-wrap: wrap}
.product {margin: 0 0 80rem 0; padding-bottom: 80rem; border-bottom: 1px solid #ddd; width: 720rem}
.product h4, .col h4 {font-size: 26rem; font-weight: 500; color: #000; line-height: 1.3; margin: 0 0 30rem 0}
.details {display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse}
.photo {width: 320rem}
.param {width: 350rem}
.con {display: flex; justify-content: space-between; position: relative}
.con:before {content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 50%; background: #ddd}
.col {width: 45%; text-align: center; font-size: 21rem; color: #000; font-weight: 400}
.col h3 {font-size: 34rem}
.col h4 {margin: 32rem 0}
.cha {display: flex; justify-content: space-between; margin: 50rem 0}
.chi {width: 30%; text-align: center; font-size: 16rem; font-weight: 500; color: #000; line-height: 20rem}
.chi img {display: block; width: auto; height: 80rem; margin: 0 auto 20rem auto}
.chaprod .product {width: 450rem}
.chaprod .details {flex-direction: column}
.chaprod .photo {width: 100%}
.chaprod .param {width: 100%}
.chaprod .param ol li span {width: 300rem}
.chacon {width: 100%; display: flex; justify-content: center}
.chadr {margin: 0 50rem}
.sg {margin: 100rem -2rem 0 -2rem !important}
.sg-item {width: calc(16.666% - 4rem) !important; padding: 0 !important; margin: 2rem !important; background: none !important; display: block !important}
.sg-item-image {height: 240rem}
.sg-item img {display: block; width: 100%; height: 100% !important; object-fit: cover; position: relative; z-index: 1}
.cl {justify-content: center; margin-top: 60rem}
.cl img {margin: 0 40rem}
}
@media (min-width: 1301px) {
html {font-size: .8px}
}
@media (min-width: 1701px) {
html {font-size: 1px}
}
#nav-icon {width: 55px; height: 50px; position: absolute; top: 0; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out}
#nav-icon i {display: block; position: absolute; right: 20px; height: 2px; width: 25px; background: #b0271d; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out}
#nav-icon i:nth-child(1) {top: 18px}
#nav-icon i:nth-child(2), #nav-icon i:nth-child(3) {top: 24px}
#nav-icon i:nth-child(4) {top: 30px}
.open #nav-icon i:nth-child(1) {top: 24px; width: 0%; right: 20px}
.open #nav-icon i:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.open #nav-icon i:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg)}
.open #nav-icon i:nth-child(4) {top: 24px; width: 0%; right: 20px}
.menu li a:after {content: ""; width: 100%; height: 2px; background: #b0271d; position: absolute; bottom: 0; left: 0; transform: scale(0,1); transition: all .2s ease-in-out}
.menu li a:hover:after {transform: scale(1,1)}
.menu ul li a.nav-path-selected {color: #b0271d}
.slider img, .top-1 img, .top-2 img, .af1 img, .af2 img, .eco-foto img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2}
.container ul li {color: #000; font-weight: 500; padding-left: 40rem; position: relative}
.container ul li:before {content: "―"; display: block; color: #b0271d; position: absolute; top: 0; left: 10rem; font-weight: 600; font-size: 19rem}
.offer ol li i img {display: block; width: 100%; height: 100%; object-fit: contain}
.offer ol li:before {content: ""; display: block; position: absolute; transition: all .2s ease-in-out}
.offer ol li:nth-child(1), .offer ol li:nth-child(6) {background: #e3e5e5}
.offer ol li:nth-child(1):before {width: 30rem; height: 100%; top: 0; right: 100%; background: #e3e5e5}
.offer ol li:nth-child(2) {background: #e9ebeb}
.offer ol li:nth-child(3) {background: #dcdede}
.offer ol li:nth-child(4) {background: #eaebeb}
.offer ol li:nth-child(4):before {width: 100%; height: 30rem; bottom: 100%; right: 0; background: #eaebeb}
.offer ol li:nth-child(5) {background: #f0f1f1}
.offer ol li:nth-child(7):before {width: 30rem; height: 100%; top: 0; left: 100%; background: #e9eaea}
.offer ol li:hover, .offer ol li:hover:before {background: #f4f5f5}
.eco-logo img {display: block; width: 100%; height: auto}
.adr strong {font-weight: 500}
.adr a {color: #000}
.tel {display: flex}
.tel span, .col a span {display: block; width: 80rem; text-align: right; font-size: 17rem; font-weight: 600; color: #b0271d; margin-right: 10rem}
.adr ul {margin-bottom: 0}
.adr ul li {padding-left: 0; font-weight: 300}
.adr ul li:before {display: none}
.adr ul li a {display: block; padding-left: 25rem; background: url(img/ar.png) 5rem 50% no-repeat; background-size: 7rem}
.adr ul li a:hover, .adr ul li a.nav-path-selected {color: #b0271d}
.copy {display: flex; align-items: center; justify-content: center; font-size: 15rem; line-height: 20rem; padding: 50rem 0; color: #666}
.copy a {color: #666}
.copy a:hover {color: #000}
.copy img {width: 55px; height: 20px; display: block; margin-left: 10rem}
.content strong {color: #000}
.content a {color: #203070}
.content a:hover {color: #b0271d}
.contact-us ol li:before {content: ""; display: block; width: 20rem; height: 20rem; position: absolute; top: 50%; margin-top: -10rem; left: 10rem; filter: brightness(0)}
.contact-phone:before {background: url(img/phone.png); background-size: contain}
.contact-mail:before {background: url(img/mail.png); background-size: contain}
.photo img {display: block; width: 100%; height: auto}
.param ol li {display: flex; align-items: center; padding: 8rem 0; border-top: 1px solid #eee; font-size: 17rem; font-weight: 400; line-height: 22rem}
.param ol li:first-child {border: 0}
.param ol li img {display: block; width: 40rem; height: auto; margin-right: 10rem}
.param ol li strong {display: block; width: 140rem}
.param ol li span {display: block; width: 180rem}
.col img {display: block; width: 100%; height: auto}
.col a {color: #000; display: flex; justify-content: center; margin-left: -40rem; font-size: 19rem; font-weight: 300}
.fabryka {display: block; width: 100%; height: auto; margin-bottom: 80rem}
.list a {display: block; padding: 30rem 20rem; border-bottom: 1px solid #e6e6e6; color: #555 !important}
.list a span {display: inline-block; background: #e6e6e6; color: #000; font-size: 14rem; padding: 0 10rem; margin-bottom: 15rem; line-height: 2}
.list a strong {color: #000; display: block; font-size: 26rem; font-weight: 400; margin-bottom: 10rem}
.list a:hover {background-color: #f7f7f7}
.ui-datepicker {font-size: 15px}
.ccm-pagination-wrapper {text-align: center; font-size: 16rem}
.pagination {margin: 0 !important}
.pagination > li {padding: 0 !important; background: none !important}
.pagination > li > a, .pagination > li > span {color: #8a8a8a; border: 0; border-radius: 0}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {background-color: #8a8a8a; border-color: #8a8a8a; border-radius: 0}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {color: #000}
.show {opacity: 0}
.showleft {opacity: 0; transform: translate(-100rem,0)}
.showright {opacity: 0; transform: translate(100rem,0)}
.showtop {opacity: 0; transform: translate(0,-100rem)}
.showbottom {opacity: 0; transform: translate(0,100rem)}
.showscale {opacity: 0; transform: scale(.7)}
.showrotate {opacity: 0; transform: scale(.8) rotate(30deg)}
.showls {opacity: 0; letter-spacing: .2em}
.come-in, .already-visible {animation: come-in 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards}
.ccm-edit-mode .module, .already-visible .module {opacity: 1 !important; transform: translate(0) !important}
ul.ccm-edit-mode-inline-commands {right: -20px !important}
@keyframes come-in {
to {transform: translate(0) scale(1); opacity: 1; letter-spacing: 0}
}