* {padding: 0; margin: 0; list-style: none}
html, body, .ccm-page, .page-template-full, .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: 'Lato', sans-serif}
img {border: 0}
.clear {clear: both}
.left {float: left}
.right {float: right}
.center {text-align: center}
@media (max-width: 700px) {
html {font-size: .8px; line-height: 1.5}
.menu-hide {cursor: pointer; position: absolute; top: 20rem; right: 0; z-index: 200}
.menu {height: 180rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: all .2s ease-in-out}
.menu .page {height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700}
.menu img {display: block; width: 208rem; height: auto; position: relative; z-index: 2}
.menu ul {display: flex; flex-direction: column; align-items: center; position: absolute; top: 0; left: 0; width: 100%; padding-top: 180rem; padding-bottom: 50rem; z-index: 1; transition: all .2s ease-in-out; transform: translateY(-100%); background: #fff}
.menu li {padding: 10rem 0}
.menu li:last-child a {width: 190rem; text-align: center; border-radius: 5rem}
.menu li:last-child a:after, .menu li:last-child a.nav-path-selected:after {display: none}
.smaller {height: 100rem; background: #fff; box-shadow: 0 0 24rem 0 rgba(0, 0, 0, .2)}
.smaller ul {padding-top: 100rem}
.showmenu ul {transform: translateY(0) !important; box-shadow: 0 0 24rem 0 rgba(0, 0, 0, .2)}
.page {position: relative; z-index: 2}
.top {padding-top: 180rem; padding-bottom: 100rem}
.top-foto {display: block; width: 120vw; height: auto; position: relative; z-index: 2; margin: 0 0 20rem -10vw}
.top-foto img {display: block; width: 120vw; height: auto}
.title {position: relative; z-index: 3; color: #000; padding: 0 10%; text-align: center; font-size: 28rem; line-height: 42rem}
.title .logo {display: block; width: 80%; height: auto; margin: 0 auto 65rem auto}
.title strong {display: block; margin-bottom: 80rem}
.more {display: flex; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700; justify-content: center}
.more a {display: block; width: 190rem; margin-right: 5rem; text-align: center; color: #000; background: #e5e5e5; border-radius: 5rem; position: relative}
.content {font-size: 22rem; line-height: 36rem; color: #222}
.content h2, .content h1 {font-weight: 900; font-size: 45rem; line-height: 1.3; color: #000; margin-bottom: 45rem}
.content h2 span, .content h1 span {display: block; font-size: 18rem; font-weight: 700; color: #ff0b00; text-transform: uppercase; margin-bottom: 30rem}
.content h3 {color: #000; margin: 30rem 0; font-size: 30rem; line-height: 48rem; font-weight: 700}
.offer {background: #f5f7fd; padding: 110rem 5% 50rem 5%; text-align: center; position: relative}
.offer br {display: none}
.main {padding: 115rem 0 170rem 0}
.main-foto {width: 90%; height: auto; margin: 0 auto; display: block; border-radius: 20rem}
.info {padding: 0 5% 80rem 5%; position: relative; z-index: 5}
.txt ul {margin: 32rem 0; line-height: 28rem}
.txt ul li {padding: 8rem 0 8rem 35rem; margin-bottom: 8rem; background: url(img/li.png) 0 18rem no-repeat; background-size: 16rem}
.tel {background: #000; color: #fff; width: 400rem; height: 150rem; border-radius: 5rem; overflow: hidden; position: absolute; right: 0; left: 0; margin: auto; bottom: 40rem; z-index: 10; display: flex; align-items: center}
.tel-contact {text-align: center; font-size: 18rem; letter-spacing: 0.1em; font-weight: 700; color: #fff; text-transform: uppercase; line-height: 40rem; background: #ff992f; z-index: 1; position: absolute; bottom: -40rem; left: 0; width: 150rem; transform: rotate(270deg); transform-origin: 0 0}
.tel-nr {padding-left: 180rem; background: url(img/tel.png) 75rem 0 no-repeat; background-size: contain; line-height: 36rem; font-size: 20rem}
.tel-nr a {display: block; color: #fff; font-size: 24rem; font-weight: 700}
.about {padding: 0 5%; margin-bottom: 60rem}
.about-content {margin-bottom: 90rem}
.about-foto {height: auto; width: 100%; display: block; border-radius: 20rem; margin-bottom: 50rem}
.about .more, .moreinfo .more {margin-top: 60rem}
.why-us {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -3%}
.why-us li {width: 44%; margin: 0 3% 40rem 3%; text-align: center; line-height: 26rem}
.why-us img {display: block; width: 50rem; height: auto; margin: 0 auto 30rem auto}
.why-us strong {font-size: 22rem; color: #000; line-height: 1; display: block; margin-bottom: 20rem}
.contact {background: #f3f5f7; padding: 60rem 0}
.contact ol {display: flex; justify-content: center; font-size: 22rem; line-height: 30rem; color: #000; flex-direction: column; align-items: center}
.contact li {padding-left: 45rem; margin: 15rem 0}
.sub {padding-top: 180rem; margin: 0 5% 100rem 5%}
.content-foto {width: 90vw; margin: auto; border-radius: 20rem; overflow: hidden}
.content-foto img {width: 90vw; height: auto}
.sub-info {padding: 0 5%}
.sub .center {margin: 0 5%}
.sub .center br {display: none}
.download {margin-bottom: 60rem; margin-bottom: 60rem}
.dwn {display: block; padding-left: 42rem; color: #000; background: url(img/dwn.png) 0 5rem no-repeat; background-size: 25rem; line-height: 44rem; font-weight: 700}
.dwn:hover {color: #ff0b00}
.sub-info .more {margin-top: 60rem}
.moreus {margin: 20rem 5% 130rem 5%}
.moreus:before {content: ""; display: block; width: 2000rem; height: 55vw; background: #fbedfd; position: absolute; bottom: -30rem; left: -2.5%; z-index: 1; border-radius: 20rem}
.moreinfo {margin-bottom: 80rem}
.morefoto {width: 90vw; height: auto; border-radius: 20rem; overflow: hidden; margin: auto; position: relative; z-index: 10}
.morefoto img {display: block; width: 90vw; height: auto}
.flex-offer {margin: 90rem 20rem 0 20rem}
.overflex {display: block; padding: 20rem 25rem 25rem 25rem}
.flex-prev {left: -30rem; transform: scaleX(-1)}
.flex-next {right: -30rem}
.o-list {margin: 50rem 0 0 0; display: flex; flex-wrap: wrap}
.product {width: 86%; margin: 0 2%; padding: 5%; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem; display: flex; flex-direction: column}
.p-fotos {display: flex; flex-wrap: wrap; margin: 0 -2% 20rem -2%}
.p-fotos a {display: block; width: 29.333%; margin: 2%}
.p-fotos a:first-child {width: 96%}
.p-fotos img {display: block; border-radius: 5rem; width: calc(100% - 2px); height: auto; border: 1px solid #eee}
.p-fotos a:first-child img {border-radius: 10rem}
.p-desc {font-size: 20rem; line-height: 28rem; color: #3e3e3e}
.p-desc h4 {text-transform: uppercase; color: #000; font-size: 22rem; margin-bottom: 20rem}
.p-desc strong {display: block; padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1px solid #eee; color: #000}
.p-desc .more {margin-top: 30rem}
.subfoto {display: block; width: 100%; height: auto; border-radius: 20rem; margin-bottom: 20rem}
.sub .contact {border-radius: 20rem}
.blog-body .pt h2, .blog-body .pt h3 {font-size: 34rem; color: #000; margin: 32rem 0}
.blog-body img {max-width: 100%; width: auto; height: auto; display: block; margin: 60rem auto; border-radius: 20rem}
.blog-body h3 {text-align: left}
.blog-body h4 {color: #000; font-size: 18rem; margin: 32rem 0}
.blog-more {display: none}
.pt {margin: 32rem 0}
.blog-list {display: flex; margin: 0 -1%; flex-wrap: wrap}
.blog-body h2:first-child, .blog-body h3:first-child {margin-top: 0}
.blog-list a {display: block; width: 86%; margin: 3% 1%; padding: 6%; ; color: #222 !important; font-size: 18rem; line-height: 23rem; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem}
.blog-list a h4 {font-size: 22rem; line-height: 26rem; display: block; margin-bottom: 15rem; font-weight: 400; transition: all .2s ease-in-out}
.blog-list a:hover h4 {color: #ff0b00}
.blog-list a:hover {background: #f8f8f8; box-shadow: none}
.blog-post i {display: block; height: 44vw; margin-bottom: 30rem; border-radius: 12rem; overflow: hidden}
.blog-post i img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1}
.sub .ccm-form form {display: block}
.sub .ccm-form h4, .sub .ccm-form .control-label {text-align: center !important; font-size: 22rem !important; margin-bottom: 10rem}
.input {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30rem}
.sub .ccm-form .radio, .sub .ccm-form .checkbox {width: 96%; display: flex; align-items: flex-start; font-family: 'Lato', serif; padding: 15rem 1% 15rem 2%; font-size: 18rem; line-height: 28rem; margin-bottom: 5rem; border-radius: 10rem; ; background: #f7f7f7; border: 1px solid #ddd; position: relative}
.sub .ccm-form .radio label, .sub .ccm-form .checkbox label {cursor: pointer; padding: 0 !important; width: calc(100% - 27rem) !important; display: flex !important; align-items: center}
.sub .ccm-form .radio input, .sub .ccm-form .checkbox input {margin: 0 10rem 0 0; -webkit-appearance: none; appearance: none; width: 17rem; height: 17rem; border-radius: 100%; border: 2px solid #bbb; transition: all .2s ease-in-out; background: #fff; cursor: pointer}
.sub .ccm-form .radio input:hover, .sub .ccm-form .checkbox input:hover {border-color: #ff0b00}
.sub .ccm-form .radio input:checked, .sub .ccm-form .checkbox input:checked {border-color: #ff0b00; background: #ff0b00; transform: scale(1.2)}
.sub .ccm-form .checkbox input {border-radius: 3rem; position: relative}
.sub .ccm-form .checkbox input:before {content: ""; color: #fff; width: 13rem; height: 13rem; position: absolute; top: 0; left: 0; z-index: 10; background: url(img/checked.png) center no-repeat; background-size: 10rem}
.sub .ccm-form fieldset {border: 0; display: flex; flex-wrap: wrap}
.sub .ccm-form .form-group {position: relative; margin: 1% 2%}
.sub .ccm-form label {width: 100%; display: block; padding: 10rem 0}
.sub .ccm-form input[type=text], .sub .ccm-form input[type=email], .sub .ccm-form input[type=tel], .sub .ccm-form input[type=file], .sub .ccm-form textarea, .sub .ccm-form button, .sub .ccm-form select {width: calc(100% - 30rem - 2px); padding: 15rem; border: 1px solid #ddd; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18rem; line-height: 28rem; border-radius: 10rem; background: #f7f7f7}
.sub .ccm-form select {width: 100%}
.sub .ccm-form textarea {height: 200rem !important}
.sub .ccm-form .ccm-form-actions {margin: 20rem 0 0 0}
.sub .ccm-form button {width: 300rem; display: block; margin: 20rem auto; cursor: pointer; color: #fff; background: #ff0b00; font-weight: 400; transition: all .2s ease-in-out; border: 0}
.sub .ccm-form button:hover {background: #ddd; color: #000}
.sub .ccm-form .form-group {width: 96% !important; display: flex; justify-content: space-between; flex-wrap: wrap}
.sub .ccm-form .text-muted {display: none}
.sub .ccm-form .form-group:last-child .checkbox {width: 96%}
}
@media (min-width: 701px) and (max-width: 1000px) {
html {font-size: .8px; line-height: 1.5}
.menu-hide {cursor: pointer; position: absolute; top: 20rem; right: 0; z-index: 200}
.menu {height: 180rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: all .2s ease-in-out}
.menu .page {height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700}
.menu img {display: block; width: 208rem; height: auto; position: relative; z-index: 2}
.menu ul {display: flex; flex-direction: column; align-items: center; position: absolute; top: 0; left: 0; width: 100%; padding-top: 180rem; padding-bottom: 50rem; z-index: 1; transition: all .2s ease-in-out; transform: translateY(-100%); background: #fff}
.menu li {padding: 10rem 0}
.menu li:last-child a {width: 190rem; text-align: center; border-radius: 5rem}
.menu li:last-child a:after, .menu li:last-child a.nav-path-selected:after {display: none}
.smaller {height: 100rem; background: #fff; box-shadow: 0 0 24rem 0 rgba(0, 0, 0, .2)}
.smaller ul {padding-top: 100rem}
.showmenu ul {transform: translateY(0) !important; box-shadow: 0 0 24rem 0 rgba(0, 0, 0, .2)}
.page {position: relative; z-index: 2}
.top {padding-top: 200rem; padding-bottom: 100rem}
.top:before {content: ""; display: block; width: 2000rem; height: 50vw; background: #fdf6df; position: absolute; margin-top: 180rem; top: 16vw; left: 18%; z-index: 1; border-radius: 20rem}
.top-foto {display: block; width: 80vw; height: auto; position: relative; z-index: 2; margin: 0 auto 50rem auto}
.top-foto img {display: block; width: 80vw; height: auto}
.title {position: relative; z-index: 3; color: #000; padding: 0 10%; text-align: center; font-size: 30rem; line-height: 48rem; margin-top: 100rem}
.title .logo {display: block; width: 60%; height: auto; margin: 0 auto 65rem auto}
.title strong {display: block; margin-bottom: 80rem}
.more {display: flex; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700; justify-content: center}
.more a {display: block; width: 190rem; margin-right: 5rem; text-align: center; color: #000; background: #e5e5e5; border-radius: 5rem; position: relative}
.content {font-size: 20rem; line-height: 34rem; color: #222}
.content h2, .content h1 {font-weight: 900; font-size: 54rem; line-height: 1.3; color: #000; margin-bottom: 45rem}
.content h2 span, .content h1 span {display: block; font-size: 18rem; font-weight: 700; color: #ff0b00; text-transform: uppercase; margin-bottom: 30rem}
.content h3 {color: #000; margin: 30rem 0; font-size: 30rem; line-height: 48rem; font-weight: 700}
.offer {background: #f5f7fd; padding: 110rem 5%; text-align: center; position: relative}
.offer br {display: none}
.main {padding: 115rem 0}
.main-foto {width: 80%; height: auto; margin: 0 auto; display: block; border-radius: 20rem}
.info {padding: 0 5% 80rem 5%; position: relative; z-index: 5}
.txt ul {margin: 32rem 0; line-height: 28rem}
.txt ul li {padding: 8rem 0 8rem 80rem; margin-bottom: 8rem; background: url(img/li.png) 45rem 18rem no-repeat; background-size: 16rem}
.tel {background: #000; color: #fff; width: 400rem; height: 150rem; border-radius: 5rem; overflow: hidden; position: absolute; right: 5%; bottom: 70rem; z-index: 10; display: flex; align-items: center}
.tel-contact {text-align: center; font-size: 18rem; letter-spacing: 0.1em; font-weight: 700; color: #fff; text-transform: uppercase; line-height: 40rem; background: #ff992f; z-index: 1; position: absolute; bottom: -40rem; left: 0; width: 150rem; transform: rotate(270deg); transform-origin: 0 0}
.tel-nr {padding-left: 180rem; background: url(img/tel.png) 75rem 0 no-repeat; background-size: contain; line-height: 36rem; font-size: 20rem}
.tel-nr a {display: block; color: #fff; font-size: 24rem; font-weight: 700}
.about {padding: 0 5%; margin-bottom: 120rem}
.about-content {margin-bottom: 100rem}
.about-foto {height: auto; width: 100%; display: block; border-radius: 20rem; margin-bottom: 50rem}
.about .more, .moreinfo .more {margin-top: 60rem}
.why-us {display: flex}
.why-us li {width: 20%; text-align: center; line-height: 26rem}
.why-us img {display: block; width: 50rem; height: auto; margin: 0 auto 30rem auto}
.why-us strong {font-size: 22rem; color: #000; line-height: 1; display: block; margin-bottom: 20rem}
.contact {background: #f3f5f7; padding: 75rem 0}
.contact ol {display: flex; justify-content: center; font-size: 22rem; line-height: 30rem; color: #000; flex-direction: column; align-items: center}
.contact li {padding-left: 45rem; margin: 15rem 0}
.sub {padding-top: 180rem; margin: 0 5% 100rem 5%}
.sub .center br {display: none}
.download {margin-top: 60rem; margin-bottom: 60rem}
.dwn {display: block; padding-left: 42rem; color: #000; background: url(img/dwn.png) 0 5rem no-repeat; background-size: 25rem; line-height: 44rem; font-weight: 700}
.dwn:hover {color: #ff0b00}
.content-foto {width: 700rem; margin: auto; border-radius: 20rem; overflow: hidden}
.content-foto img {width: 700rem; height: auto}
.sub-info {padding: 0 5%}
.sub-info .more {margin-top: 60rem}
.moreus {margin: 20rem 5% 130rem 5%}
.moreus:before {content: ""; display: block; width: 2000rem; height: 55vw; background: #fbedfd; position: absolute; bottom: -30rem; left: 0; z-index: 1; border-radius: 20rem}
.moreinfo {margin-bottom: 80rem}
.morefoto {width: 80vw; height: auto; border-radius: 20rem; overflow: hidden; margin: auto; position: relative; z-index: 10}
.morefoto img {display: block; width: 80vw; height: auto}
.flex-offer {margin: 90rem 50rem 0 50rem}
.overflex {display: block; padding: 30rem 35rem 35rem 35rem}
.flex-prev {left: -50rem; transform: scaleX(-1)}
.flex-next {right: -50rem}
.o-list {margin: 50rem -2% 0 -2%; display: flex; flex-wrap: wrap}
.product {width: 86%; margin: 2%; padding: 5%; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem; display: flex; justify-content: space-between}
.p-fotos {display: flex; flex-wrap: wrap; margin: -2%; width: 48%}
.p-fotos a {display: block; width: 29.333%; margin: 2%}
.p-fotos a:first-child {width: 96%}
.p-fotos img {display: block; border-radius: 5rem; width: calc(100% - 2px); height: auto; border: 1px solid #eee}
.p-fotos a:first-child img {border-radius: 10rem}
.p-desc {font-size: 20rem; line-height: 28rem; color: #3e3e3e; width: 48%}
.p-desc h4 {text-transform: uppercase; color: #000; font-size: 22rem; margin-bottom: 20rem}
.p-desc strong {display: block; padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1px solid #eee; color: #000}
.p-desc .more {margin-top: 30rem}
.subfoto {display: block; width: 100%; height: auto; border-radius: 20rem; margin-bottom: 20rem}
.sub .contact {border-radius: 20rem}
.blog-body .pt h2, .blog-body .pt h3 {font-size: 34rem; color: #000; margin: 32rem 0}
.blog-body img {max-width: 100%; width: auto; height: auto; display: block; margin: 60rem auto; border-radius: 20rem}
.blog-body h3 {text-align: left}
.blog-body h4 {color: #000; font-size: 18rem; margin: 32rem 0}
.blog-more {display: none}
.pt {margin: 32rem 0}
.blog-list {display: flex; margin: 0 -1%; flex-wrap: wrap}
.blog-body h2:first-child, .blog-body h3:first-child {margin-top: 0}
.blog-list a {display: block; width: 42%; margin: 1%; padding: 3%; ; color: #222 !important; font-size: 18rem; line-height: 23rem; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem}
.blog-list a h4 {font-size: 22rem; line-height: 26rem; display: block; margin-bottom: 15rem; font-weight: 400; transition: all .2s ease-in-out}
.blog-list a:hover h4 {color: #ff0b00}
.blog-list a:hover {background: #f8f8f8; box-shadow: none}
.blog-post i {display: block; height: 22vw; margin-bottom: 30rem; border-radius: 12rem; overflow: hidden}
.blog-post i img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1}
.sub .ccm-form form {display: block}
.sub .ccm-form h4, .sub .ccm-form .control-label {text-align: center !important; font-size: 22rem !important; margin-bottom: 10rem}
.input {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30rem}
.sub .ccm-form .radio, .sub .ccm-form .checkbox {width: 45%; display: flex; align-items: flex-start; font-family: 'Lato', serif; padding: 15rem 1% 15rem 2%; font-size: 18rem; line-height: 28rem; margin-bottom: 5rem; border-radius: 10rem; ; background: #f7f7f7; border: 1px solid #ddd; position: relative}
.sub .ccm-form .radio label, .sub .ccm-form .checkbox label {cursor: pointer; padding: 0 !important; width: calc(100% - 27rem) !important; display: flex !important; align-items: center}
.sub .ccm-form .radio input, .sub .ccm-form .checkbox input {margin: 0 10rem 0 0; -webkit-appearance: none; appearance: none; width: 17rem; height: 17rem; border-radius: 100%; border: 2px solid #bbb; transition: all .2s ease-in-out; background: #fff; cursor: pointer}
.sub .ccm-form .radio input:hover, .sub .ccm-form .checkbox input:hover {border-color: #ff0b00}
.sub .ccm-form .radio input:checked, .sub .ccm-form .checkbox input:checked {border-color: #ff0b00; background: #ff0b00; transform: scale(1.2)}
.sub .ccm-form .checkbox input {border-radius: 3rem; position: relative}
.sub .ccm-form .checkbox input:before {content: ""; color: #fff; width: 13rem; height: 13rem; position: absolute; top: 0; left: 0; z-index: 10; background: url(img/checked.png) center no-repeat; background-size: 10rem}
.sub .ccm-form fieldset {border: 0; display: flex; flex-wrap: wrap}
.sub .ccm-form .form-group {position: relative; margin: 1% 2%}
.sub .ccm-form label {width: 100%; display: block; padding: 10rem 0}
.sub .ccm-form input[type=text], .sub .ccm-form input[type=email], .sub .ccm-form input[type=tel], .sub .ccm-form input[type=file], .sub .ccm-form textarea, .sub .ccm-form button, .sub .ccm-form select {width: calc(100% - 30rem - 2px); padding: 15rem; border: 1px solid #ddd; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18rem; line-height: 28rem; border-radius: 10rem; background: #f7f7f7}
.sub .ccm-form select {width: 100%}
.sub .ccm-form textarea {height: 200rem !important}
.sub .ccm-form .ccm-form-actions {margin: 20rem 0 0 0}
.sub .ccm-form button {width: 300rem; display: block; margin: 20rem auto; cursor: pointer; color: #fff; background: #ff0b00; font-weight: 400; transition: all .2s ease-in-out; border: 0}
.sub .ccm-form button:hover {background: #ddd; color: #000}
.sub .ccm-form .form-group {width: 96% !important; display: flex; justify-content: space-between; flex-wrap: wrap}
.sub .ccm-form .text-muted {display: none}
.sub .ccm-form .form-group:last-child .checkbox {width: 96%}
}
@media (min-width: 1001px) {
html {font-size: .65px; line-height: 1.5}
.menu-hide {display: none}
.menu {height: 180rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: all .2s ease-in-out}
.menu .page {height: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700}
.menu img {display: block; width: 208rem; height: auto}
.menu ul {display: flex}
.menu li {margin-left: 45rem}
.menu li:last-child a {width: 180rem; text-align: center; border-radius: 5rem}
.menu li:last-child a:after, .menu li:last-child a.nav-path-selected:after {display: none}
.smaller {height: 100rem; background: #fff; box-shadow: 0 0 24rem 0 rgba(0, 0, 0, .2)}
.page {width: 1500rem; margin: auto; position: relative; z-index: 2}
.top {height: 1106rem}
.top:before {content: ""; display: block; width: 2000rem; height: 582rem; background: #fdf6df; position: absolute; bottom: 47rem; left: 650rem; z-index: 1; border-radius: 20rem}
.top-foto {display: block; width: 1203rem; height: 896rem; position: absolute; top: 144rem; left: 483rem; z-index: 10}
.top-foto img {display: block; width: 1203rem; height: auto}
.title {position: relative; z-index: 3; padding-top: 210rem; color: #000; width: 509rem; font-size: 34rem; line-height: 54rem}
.title .logo {display: block; width: 100%; height: auto; margin-bottom: 100rem}
.title strong {display: block; margin-bottom: 100rem}
.more {display: flex; font-size: 16rem; line-height: 50rem; text-transform: uppercase; font-weight: 700}
.more a {display: block; width: 190rem; margin-right: 5rem; text-align: center; color: #000; background: #e5e5e5; border-radius: 5rem; position: relative}
.content {font-size: 20rem; line-height: 34rem; color: #222}
.content h2, .content h1 {font-weight: 900; font-size: 54rem; line-height: 1.3; color: #000; margin-bottom: 45rem}
.content h2 span, .content h1 span {display: block; font-size: 18rem; font-weight: 700; color: #ff0b00; text-transform: uppercase; margin-bottom: 30rem}
.content h3 {color: #000; margin: 30rem 0; font-size: 30rem; line-height: 48rem; font-weight: 700}
.offer {background: #f5f7fd; padding: 110rem 0; text-align: center; position: relative}
.main {padding: 115rem 0 160rem 0}
.main:before {content: ""; display: block; width: 2000rem; height: 542rem; background: #fcf1e5; position: absolute; top: 183rem; right: 1168rem; z-index: 1; border-radius: 20rem}
.main-foto {width: 626rem; height: auto; position: absolute; top: 120rem; left: 0; z-index: 2; border-radius: 20rem}
.info {padding: 0 80rem 0 850rem; position: relative; z-index: 5}
.txt ul {margin: 32rem 0; line-height: 28rem}
.txt ul li {padding: 8rem 0 8rem 80rem; margin-bottom: 8rem; background: url(img/li.png) 45rem 14rem no-repeat; background-size: 16rem}
.tel {background: #000; color: #fff; width: 400rem; height: 150rem; border-radius: 5rem; overflow: hidden; position: absolute; left: 342rem; top: 575rem; z-index: 10; display: flex; align-items: center}
.tel-contact {text-align: center; font-size: 18rem; letter-spacing: 0.1em; font-weight: 700; color: #fff; text-transform: uppercase; line-height: 40rem; background: #ff992f; z-index: 1; position: absolute; bottom: -40rem; left: 0; width: 150rem; transform: rotate(270deg); transform-origin: 0 0}
.tel-nr {padding-left: 180rem; background: url(img/tel.png) 75rem 0 no-repeat; background-size: contain; line-height: 36rem; font-size: 20rem}
.tel-nr a {display: block; color: #fff; font-size: 24rem; font-weight: 700}
.about {margin-bottom: 120rem}
.about-content {width: 725rem; margin-bottom: 120rem; font-size: 18rem; line-height: 32rem; color: #3e3e3e}
.about-content h2 {font-size: 50rem}
.about-foto {height: 455rem; width: auto; position: absolute; top: 0; left: 850rem; border-radius: 20rem}
.about .more, .moreinfo .more {margin-top: 60rem}
.why-us {display: flex}
.why-us li {width: 20%; text-align: center; line-height: 26rem}
.why-us img {display: block; width: 50rem; height: auto; margin: 0 auto 30rem auto}
.why-us strong {font-size: 30rem; color: #000; line-height: 1; display: block; margin-bottom: 20rem}
.contact {background: #f3f5f7; padding: 75rem 0}
.contact ol {display: flex; justify-content: center; font-size: 22rem; line-height: 30rem; color: #000}
.contact li {padding-left: 45rem; margin: 0 40rem}
.sub {padding-top: 220rem; margin-bottom: 100rem}
.content-foto {width: 700rem; float: left; border-radius: 20rem; overflow: hidden}
.content-foto img {width: 700rem; height: auto}
.sub-info {width: 740rem; float: right}
.sub-info .more {margin-top: 60rem}
.download {margin-top: 60rem}
.dwn {display: block; padding-left: 42rem; color: #000; background: url(img/dwn.png) 0 5rem no-repeat; background-size: 25rem; line-height: 44rem; font-weight: 700}
.dwn:hover {color: #ff0b00}
.moreus {margin-bottom: 160rem}
.moreus:before {content: ""; display: block; width: 2000rem; height: 542rem; background: #fbedfd; position: absolute; top: 125rem; left: 1075rem; z-index: 1; border-radius: 20rem}
.moreinfo {width: 740rem}
.morefoto {width: 611rem; height: 580rem; position: absolute; top: 5rem; right: 39rem; z-index: 10; border-radius: 20rem; overflow: hidden}
.morefoto img {display: block; width: 611rem; height: auto}
.flex-offer {margin: 90rem 70rem 0 70rem}
.overflex {display: block; padding: 35rem 45rem 45rem 45rem}
.flex-prev {left: -50rem; transform: scaleX(-1)}
.flex-next {right: -50rem}
.o-list {margin: 50rem -2% 0 -2%; display: flex; flex-wrap: wrap}
.product {width: 40%; margin: 2%; padding: 3%; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem; display: flex; justify-content: space-between}
.p-fotos {display: flex; flex-wrap: wrap; margin: -2%; width: 48%}
.p-fotos a {display: block; width: 29.333%; margin: 2%}
.p-fotos a:first-child {width: 96%}
.p-fotos img {display: block; border-radius: 5rem; width: calc(100% - 2px); height: auto; border: 1px solid #eee}
.p-fotos a:first-child img {border-radius: 10rem}
.p-desc {font-size: 16rem; line-height: 24rem; color: #3e3e3e; width: 48%}
.p-desc h4 {text-transform: uppercase; color: #000; font-size: 22rem; margin-bottom: 20rem}
.p-desc strong {display: block; padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1px solid #eee; color: #000}
.p-desc .more {margin-top: 30rem}
.subfoto {display: block; width: 100%; height: auto; border-radius: 20rem; margin-bottom: 20rem}
.sub .contact {border-radius: 20rem}
.blog-body .pt h2, .blog-body .pt h3 {font-size: 34rem; color: #000; margin: 32rem 0}
.blog-body {float: left; width: 900rem; font-size: 18rem; line-height: 28rem}
.blog-body img {max-width: 100%; width: auto; height: auto; display: block; margin: 60rem auto; border-radius: 20rem}
.blog-body h3 {text-align: left}
.blog-body h4 {color: #000; font-size: 18rem; margin: 32rem 0}
.blog-more {float: right; width: 430rem; padding: 0 0 0 90rem; border-left: 1rem solid #ddd}
.blog-more h2 {font-size: 36rem}
.pt {margin: 32rem 0}
.blog-list {display: flex; margin: 0 -1%; flex-wrap: wrap}
.blog-body h2:first-child, .blog-body h3:first-child {margin-top: 0}
.blog-list a {display: block; width: 27.333%; margin: 1%; padding: 2%; ; color: #222 !important; font-size: 16rem; line-height: 22rem; box-shadow: 0 0 10rem 0 rgba(0,0,0,0.07); border-radius: 20rem}
.blog-list a h4 {font-size: 22rem; line-height: 26rem; display: block; margin-bottom: 15rem; font-weight: 400; transition: all .2s ease-in-out}
.blog-list a:hover h4 {color: #ff0b00}
.blog-list a:hover {background: #f8f8f8; box-shadow: none}
.blog-more .blog-list {margin: 0}
.blog-more .blog-list a {width: 100%; padding: 0 0 30rem 0; margin: 0 0 30rem 0; border-top: 0; border-bottom: 1rem solid #ddd; box-shadow: none; border-radius: 0}
.blog-more .blog-list a h4 {font-size: 20rem; font-weight: 400; margin-bottom: 20rem; line-height: 26rem}
.blog-more .blog-list a:hover {background: transparent}
.blog-post i {display: block; height: 280rem; margin-bottom: 30rem; border-radius: 12rem; overflow: hidden}
.blog-post i img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1}
.sub .ccm-form form {display: block}
.sub .ccm-form h4, .sub .ccm-form .control-label {text-align: center !important; font-size: 22rem !important; margin-bottom: 10rem}
.input {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30rem}
.sub .ccm-form .radio, .sub .ccm-form .checkbox {width: 45%; display: flex; align-items: flex-start; font-family: 'Lato', serif; padding: 15rem 1% 15rem 2%; font-size: 18rem; line-height: 28rem; margin-bottom: 5rem; border-radius: 10rem; ; background: #f7f7f7; border: 1px solid #ddd; position: relative}
.sub .ccm-form .radio label, .sub .ccm-form .checkbox label {cursor: pointer; padding: 0 !important; width: calc(100% - 27rem) !important; display: flex !important; align-items: center}
.sub .ccm-form .radio input, .sub .ccm-form .checkbox input {margin: 0 10rem 0 0; -webkit-appearance: none; appearance: none; width: 17rem; height: 17rem; border-radius: 100%; border: 2px solid #bbb; transition: all .2s ease-in-out; background: #fff; cursor: pointer}
.sub .ccm-form .radio input:hover, .sub .ccm-form .checkbox input:hover {border-color: #ff0b00}
.sub .ccm-form .radio input:checked, .sub .ccm-form .checkbox input:checked {border-color: #ff0b00; background: #ff0b00; transform: scale(1.2)}
.sub .ccm-form .checkbox input {border-radius: 3rem; position: relative}
.sub .ccm-form .checkbox input:before {content: ""; color: #fff; width: 13rem; height: 13rem; position: absolute; top: 0; left: 0; z-index: 10; background: url(img/checked.png) center no-repeat; background-size: 10rem}
.sub .ccm-form fieldset {border: 0; display: flex; flex-wrap: wrap}
.sub .ccm-form .form-group {position: relative; margin: 1% 2%}
.sub .ccm-form label {width: 100%; display: block; padding: 10rem 0}
.sub .ccm-form input[type=text], .sub .ccm-form input[type=email], .sub .ccm-form input[type=tel], .sub .ccm-form input[type=file], .sub .ccm-form textarea, .sub .ccm-form button, .sub .ccm-form select {width: calc(100% - 30rem - 2px); padding: 15rem; border: 1px solid #ddd; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18rem; line-height: 28rem; border-radius: 10rem; background: #f7f7f7}
.sub .ccm-form select {width: 100%}
.sub .ccm-form textarea {height: 200rem !important}
.sub .ccm-form .ccm-form-actions {margin: 20rem 0 0 0}
.sub .ccm-form button {width: 300rem; display: block; margin: 20rem auto; cursor: pointer; color: #fff; background: #ff0b00; font-weight: 400; transition: all .2s ease-in-out; border: 0}
.sub .ccm-form button:hover {background: #ddd; color: #000}
.sub .ccm-form {width: 72% !important; margin: auto}
.sub .ccm-form .form-group {width: 96% !important; display: flex; justify-content: space-between; flex-wrap: wrap}
.sub .ccm-form .text-muted {display: none}
.sub .ccm-form .form-group:last-child .checkbox {width: 96%}
.sub .ccm-form .form-group:first-child .checkbox:before, .sub .ccm-form .form-group:nth-of-type(2) .radio:before, .sub .ccm-form .form-group:nth-of-type(3) .radio:before, .sub .ccm-form .form-group:nth-of-type(4) .radio:before {content: ""; display: block; width: 180rem; height: 180rem; position: absolute; top: 50%; transform: scale(0) translateY(-50%); transform-origin: top; border-radius: 10rem; overflow: hidden; border: 1px solid #ddd; opacity: 0; transition: all .2s ease-in-out}
.sub .ccm-form .form-group:first-child .checkbox:nth-child(odd):before, .sub .ccm-form .form-group:nth-of-type(2) .radio:nth-child(odd):before, .sub .ccm-form .form-group:nth-of-type(3) .radio:nth-child(odd):before, .sub .ccm-form .form-group:nth-of-type(4) .radio:nth-child(odd):before {left: -200rem}
.sub .ccm-form .form-group:first-child .checkbox:nth-child(even):before, .sub .ccm-form .form-group:nth-of-type(2) .radio:nth-child(even):before, .sub .ccm-form .form-group:nth-of-type(3) .radio:nth-child(even):before, .sub .ccm-form .form-group:nth-of-type(4) .radio:nth-child(even):before {right: -200rem}
}
@media (min-width: 1201px) {
html {font-size: .8px}
}
@media (min-width: 1651px) {
html {font-size: 1px}
}
#nav-icon {width: 55px; height: 50px; position: relative; -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: #ff0b00; 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}
#nav-icon.open i:nth-child(1) {top: 24px; width: 0%; right: 20px}
#nav-icon.open i:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
#nav-icon.open i:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg)}
#nav-icon.open i:nth-child(4) {top: 24px; width: 0%; right: 20px}
.menu li a {display: block; color: #000; position: relative}
.menu li a:after {content: ""; width: 100%; height: 2px; background: #ff0b00; position: absolute; bottom: 0; left: 0; transform: scale(0,1); transition: all .2s ease-in-out}
.menu li a:hover:after, .menu li a.nav-path-selected:after {transform: scale(1,1)}
.screen {position: relative; overflow: hidden; z-index: 1}
.more a:first-child, .menu li:last-child a {color: #fff; background: #ff0b00}
.more a:hover, .menu li:last-child a:hover {transform: translateY(-5rem); opacity: .8}
.puzzle a strong {display: block}
.visible {position: relative; z-index: 2}
.hidden {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; opacity: 0}
.puzzle a:hover .hidden {opacity: 1}
.contact li a {color: #000}
.contact li:nth-child(1) {background: url(img/loc.png) 0 3rem no-repeat; background-size: 24rem}
.contact li:nth-child(2) {background: url(img/phone.png) 0 3rem no-repeat; background-size: 24rem}
.contact li:nth-child(3) {background: url(img/mail.png) 0 3rem no-repeat; background-size: 24rem}
.copy {text-align: center; font-size: 14px; line-height: 20px; padding: 50rem 5%; color: #666}
.copy img {margin: 0 0 -6px 3px; width: 55px; height: 20px}
.copy a {color: #666}
ul.ccm-edit-mode-inline-commands {right: -20px !important}
.sub-foto-top img {display: block; width: 100%; height: auto}
.flexslider {text-align: left}
.flexslider .slides {display: flex}
.flexslider .flexli {background: #fff; border-radius: 20rem; overflow: hidden; font-size: 18rem; line-height: 32rem; color: #3e3e3e}
.flexslider .flexli h3 {text-align: center; line-height: 1.2; margin-top: 20rem}
.flexslider .flexli ul {margin-top: 32rem}
.flexslider .flexli li {padding: 0 0 0 35rem; background: url(img/li.png) 5rem 9rem no-repeat; background-size: 16rem}
.flexslider img {display: block; width: auto; height: 185rem; margin: 0 auto}
.flex-control-nav {display: none}
.flex-direction-nav a {width: 17rem; height: 46rem; background: url(img/ar.png) no-repeat; background-size: contain; font-size: 0}
.fb {position: fixed; bottom: 20px; right: 20px; z-index: 100}
.blog-body a {color: #ff0b00}
.blog-body a:hover {color: #000}
.sub .ccm-form .form-group:first-child .checkbox:hover:before, .sub .ccm-form .form-group:nth-of-type(2) .radio:hover:before, .sub .ccm-form .form-group:nth-of-type(3) .radio:hover:before, .sub .ccm-form .form-group:nth-of-type(4) .radio:hover:before {opacity: 1; transform: scale(1) translateY(-50%)}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(1):before {background: url(/application/files/4817/6476/2515/3_KSIAZECZKA-MINI-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(2):before {background: url(/application/files/7917/6527/2137/27_1X9.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(3):before {background: url(/application/files/6017/6527/2136/26_KSIAZECZKA-2x9.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(4):before {background: url(/application/files/9117/6476/6943/21_1X10-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(5):before {background: url(/application/files/1117/6476/2366/2_KSIAZECZKA-STANDART-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(6):before {background: url(/application/files/4417/6476/7032/22_1X18-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(7):before {background: url(/application/files/7717/6476/0711/1_GIGANT-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(8):before {background: url(/application/files/3717/6476/6734/18_KSIAZECZKA-FI60-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(9):before {background: url(/application/files/3017/6476/7082/23_KSIAZECZKA-FI-70-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(10):before {background: url(/application/files/5517/6476/6507/15_ULTRAMINI-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(11):before {background: url(/application/files/7517/6476/5999/12_TRIANGEL-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(12):before {background: url(/application/files/3817/6476/6865/20_BX6-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(13):before {background: url(/application/files/5617/6476/2587/4_BASIC-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(14):before {background: url(/application/files/5017/6476/2738/5_FRAP-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(15):before {background: url(/application/files/5817/6476/5941/11_KONTENER_MALY-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(16):before {background: url(/application/files/5617/6476/6372/13_RUGBY-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(17):before {background: url(/application/files/5417/6527/2137/28_Bx3a.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(18):before {background: url(/application/files/4517/6476/5798/9_GOLFF44-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(19):before {background: url(/application/files/4117/6476/2830/6_FLORET-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(20):before {background: url(/application/files/2717/6476/6421/14_PIPE-CYGAR-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(21):before {background: url(/application/files/9617/6476/2977/8_BX4W-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(22):before {background: url(/application/files/3817/6476/6650/17_KONTENER_DUZY-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(23):before {background: url(/application/files/1817/6476/2916/7_HAVANA-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(24):before {background: url(/application/files/5517/6476/5875/10_REGATA-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:first-child .checkbox:nth-of-type(25):before {background: url(/application/files/3817/6476/6822/19_MAGNUM-860x860.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(2) .radio:nth-of-type(1):before {background: url(/application/files/7217/6535/2024/B-CZ-b.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(2) .radio:nth-of-type(2):before {background: url(/application/files/7817/6535/2025/A-full.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(3) .radio:nth-of-type(1):before {background: url(/application/files/8117/6535/2024/C-KB.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(3) .radio:nth-of-type(2):before {background: url(/application/files/9817/6535/2024/D-KL.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(4) .radio:nth-of-type(1):before {background: url(/application/files/1617/6535/2023/E-B.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(4) .radio:nth-of-type(2):before {background: url(/application/files/7317/6535/2023/E-LB.jpg); background-size: contain}
.sub .ccm-form .form-group:nth-child(4) .radio:nth-of-type(3):before {background: url(/application/files/3917/6535/2025/E-LM.jpg); background-size: contain}
.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-block-edit .module, .already-visible .module {opacity: 1 !important; transform: translate(0) !important}
@keyframes come-in {
to {transform: translate(0) scale(1); opacity: 1; letter-spacing: 0}
}