.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .embedBlok {display: block; width: 100%;} /*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .mce-content-body .faq-list .collapse { display:block; } .mce-content-body .header .collapse .header-contacts { display:block !important; } html {display: block; width: 100%; font-weight: 400; color: var(--color0); line-height: 1.5em; font-family: var(--font1);} body {display: block !important; width: 100%; position: relative; overflow-x: hidden; overflow-y: auto; background: var(--decor1); background-size: var(--decor-size);} body.fixed {overflow: hidden;} form {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;} .wrapper {display: flex; width: min(84rem, calc(100% - 2 * var(--wrapper-side))); --wrapper-side: 1rem; flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;} @media screen and (min-width: 1081px) { .wrapper.w2 {max-width: 78rem;} .narrow .wrapper {max-width: 72rem;} .narrow .wrapper.w2 {width: min(66rem, calc(100% - 3 * var(--wrapper-side)));} } @media screen and (max-width: 1080px) { .wrapper {justify-content: center;} .narrow .wrapper {max-width: 42rem;} } @media screen and (min-width: 769px) { html {font-size: 18px;} } @media screen and (max-width: 768px) { html {font-size: 17px;} } @media screen and (max-width: 440px) { html {font-size: 16px;} } :root { --font1: 'ingra', sans-serif; /* 200, 400, 500, 700 */ --color0: black; --color0b: #666666; --color1: #152c68; --color1b: #2a468f; --color2: #e30613; /* rgb(227,6,19) */ --color2b: #c0020e; --color3: rgba(0,0,0,0.06); --color3b: rgba(0,0,0,0.1); --color-yellow: #f1bf09; --border-radius1: 0.5rem; --header-nav: 2.7rem; --padding-inline1: 1.2rem; --section-gap: min(calc(0.5rem + 5vw), 2rem); --section-gap-hp: min(calc(0.6rem + 5vw), 8rem); --gap1: 0.4rem; --gap2: min(calc(1rem + 3vw), 2rem); --article-gap: 1rem; --box-shadow: 0 0 0.35rem rgba(0,0,0,0.06); } @media screen and (min-width: 1081px) { :root {--decor-background-size: min(100rem, 100vw) auto;} } @media screen and (max-width: 1080px) { :root {--decor-background-size: auto 50rem;} } .header {display: block; width: 100%; position: relative; z-index: 1000;} .header .topbar {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; background: white; padding: 1em 0; box-sizing: border-box; position: relative;} .header .topbar .wrapper {justify-content: space-between;} .header .topbar .wrapper > div {display: flex; align-items: center;} .header .logo {display: block;} .header .logo img {display: block; width: 100%;} .header .logo .title {display: block; color: white; font-weight: 700;} .header-contacts {display: flex; align-items: center; gap: 1.2em;} .header-contacts li {display: block; box-sizing: border-box; position: relative;} .header-contacts li a {display: flex; align-items: center; gap: 0.4em; font-size: 1em; font-weight: 500; text-decoration: none;} .header-contacts li a svg {display: block; width: 1em; fill: var(--color2);} .header-contacts li a span {display: block; line-height: 1em; color: var(--color0); position: relative; top: 0.06em; transition: .15s ease-in-out;} .header-contacts li a:hover span {color: var(--color2);} .header .icon-search {display: block; width: 1.7em; padding: 0.4em; background: var(--color2); box-sizing: border-box; border-radius: var(--border-radius1); cursor: pointer; transition: .15s ease-in-out;} .header .icon-search svg {display: block; width: 100%; fill: white;} .header .icon-search:hover {background: var(--color2b);} .header .collapse {display: block;} .header nav {display: block; width: 100%;} .header nav > div > ul {display: flex; width: 100%; background: var(--color1);} .header nav > div > ul > li {display: block; position: relative;} .header nav > div > ul > li > a {display: flex; color: white; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 0.035em;; box-sizing: border-box; transition: .15s ease-in-out;} .header nav > div > ul > li > a:hover {background: var(--color1b);} .header nav > div > ul > li:has([aria-current="page"]) {background: var(--color1b); font-weight: 700;} .header nav > div > ul > li:has(ul) > a:after {display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.1 512'%3E%3Cpolygon points='55.3,511.8 311.1,256 55.3,0.2 0,55.6 200.4,256 0,456.4' fill='white' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 0; content: ""; transition: .25s ease-in-out;} .header nav > div > ul > li > ul {display: none;} .header nav > div > ul > li > ul > li > a {display: flex; justify-content: space-between; align-items: center; gap: 0.6em; font-weight: 500; box-sizing: border-box; position: relative; transition: .15s ease-in-out;} .header nav > div > ul > li > ul > li > a:after {display: block; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: auto 0.75em; position: absolute; top: 0; content: "";} @media screen and (min-width: 1081px) and (max-width: 1280px){ .header {font-size: 0.9em;} } @media screen and (min-width: 1081px) { .header .topbar .wrapper > div {gap: 1.5em;} .header .logo {width: 17em;} .header #navicon {display: none;} .header .collapse {width: 100%;} .header .collapse .header-contacts {display: none;} .header nav {height: var(--header-nav);} .header nav > div {height: 100%;} .header nav > div > ul {height: 100%; justify-content: center; border-radius: var(--border-radius1);} .header nav > div > ul > li {height: 100%;} .header nav > div > ul > li > a {height: 100%; align-items: center; font-size: 0.9em; padding: 0.1em 2em 0;} .header nav > div > ul > li:has(ul) > a:after {width: 0.3em;} .header nav > div > ul > li > ul {width: 13em; background: white; border-radius: var(--border-radius1); position: absolute; left: -0.78em; top: calc(var(--header-nav) + 0.3rem); z-index: 20; box-shadow: 0 0 0.4em rgba(0,0,0,0.3);} .header nav > div > ul > li > ul:before {display: block; width: 100%; height: 0.4rem; position: absolute; left: 0; top: -0.3em; content: "";} .header nav > div > ul > li > ul > li {display: block; border-bottom: solid 1px rgba(0,0,0,0.2); border-radius: var(--border-radius1); overflow: hidden;} .header nav > div > ul > li > ul > li:last-child{border: none;} .header nav > div > ul > li > ul > li > a {font-size: 0.85em; color: var(--color0); padding: 0.72em 1.9em 0.58em 1em;} .header nav > div > ul > li > ul > li > a:after {width: 0.8em; right: 0.8em;} .header nav > div > ul > li > ul > li > a:hover {background: var(--color3);} .header nav > div > ul > li > ul > li > a:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.1 512'%3E%3Cpolygon points='55.3,511.8 311.1,256 55.3,0.2 0,55.6 200.4,256 0,456.4' fill='black' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");} .header nav .close {display: none;} .hp .header nav > div > ul {border-top-left-radius: 0; border-top-right-radius: 0;} } @media screen and (max-width: 1080px) { .header .wrapper {max-width: 100%;} .header .logo {width: 15em;} .header .topbar .wrapper > div {gap: 0.7em; margin-top: -0.1em;} .header #navicon {display: block; width: 1.5em; height: 16px; cursor: pointer; position: relative; z-index: 10002;} .header #navicon span {display: block; width: 100%; height: 2px; background: var(--color1); position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;} .header #navicon span:nth-child(1) {top: 0;} .header #navicon span:nth-child(2), .header #navicon span:nth-child(3) {top: calc(50% - 1px);} .header #navicon span:nth-child(4) {bottom: 0;} .header.show #navicon span {background: var(--color2);} .header.show #navicon span:nth-child(2) {transform: rotate(45deg); opacity: 1;} .header.show #navicon span:nth-child(3) {transform: rotate(-45deg); opacity: 1;} .header.show #navicon span:nth-child(1), .header.show #navicon span:nth-child(4) {opacity: 0 !important;} .header .collapse {width: 22rem; height: 100%; background: var(--color1); position: fixed; right: -23rem; top: 0; overflow-y: auto; transition: .45s ease-in-out;} .header .collapse .header-contacts {flex-wrap: wrap; padding-inline: 1.4em; margin-bottom: 1.5em; box-sizing: border-box;} .header .collapse .header-contacts li {width: 100%;} .header .collapse .header-contacts li a span {color: white;} .header nav {margin-block: 4.5em 2em;} .header nav > div {width: 100%;} .header nav > div > ul {flex-wrap: wrap;} .header nav > div > ul > li {width: 100%;} .header nav > div > ul > li:not(:first-child) {border-top: solid 1px black;} .header nav > div > ul > li > a {font-size: 1.2em; padding: 0.8em 1.2em 0.7em;} .header nav > div > ul > li:has(ul) > a:after {width: 0.4em; height: 0.7em; right: 1.2em; top: 0.9em;} .header nav > div > ul > li[aria-expanded="true"] > a:after {transform: rotate(90deg);} .header nav > div > ul > li > ul {width: 100%; padding-block: 0.5em 1.2em;} .header nav > div > ul > li > ul > li > a {font-size: 0.85em; color: white; padding: 0.2em 1em 0.2em 3.6em;} .header nav > div > ul > li > ul > li > a:after {width: 0.7em; left: 2.5em; margin-top: -0.1em;} .header nav > div > ul > li > ul > li > a:hover {background: var(--color1b);} .header nav > div > ul > li > ul > li > a:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.1 512'%3E%3Cpolygon points='55.3,511.8 311.1,256 55.3,0.2 0,55.6 200.4,256 0,456.4' fill='white' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");} .header.show .collapse {right: 0;} } @media screen and (min-width: 541px) and (max-width: 1080px){ .header-contacts {gap: 0.6em; margin-right: 1em;} .header-contacts li a svg {width: 1.2em;} .header-contacts li a span {display: none;} } @media screen and (min-width: 541px) { .header .collapse .header-contacts {display: none;} } @media screen and (max-width: 540px) { .header .topbar .header-contacts {display: none;} } .footer {display: block; width: 100%; background: var(--color1); padding: min(calc(1em + 5vw), 4em) 0; position: relative;} .footer .wrapper {gap: 2em;} .footer-cta {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8em;} .footer-cta h2 {display: block; width: 100%; font-size: 1.7em; color: white; font-weight: 700; line-height: 1.2;} .footer-cta p {display: block; width: 100%; font-size: 0.85em; color: white; font-weight: 400; line-height: 1.5;} .footer-cta .button {font-size: 0.8em;} .footer-info {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.2em;} .footer-contacts {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.2em 0;} .footer-contacts > * {display: block; font-size: 0.85em; line-height: 1.45; color: white;} .footer-contacts > * strong {font-weight: 700;} .footer-contacts a {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; font-weight: 400; text-decoration: none;} .footer-contacts a svg {display: block; width: 1em; fill: var(--color2);} .footer-contacts a span {display: block; line-height: 1em; color: white; transition: .15s ease-in-out;} .footer-contacts a:hover span {color: var(--color2);} .footer-links {display: flex; flex-wrap: wrap; gap: 0.3em 1.2em;} .footer-links li {display: block; font-size: 0.7em; line-height: 1.2em; white-space: nowrap;} .footer-links li a {display: inline-block; color: white; font-weight: 500; transition: .15s ease-in-out;} .footer-links li a:hover {color: var(--color2);} .footer .right {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 2em; position: relative;} .footer-soc {display: flex; align-items: center; gap: 0.35em;} .footer-soc li {display: block;} .footer-soc li a {display: block; width: 1.4em;} .footer-soc li a svg {display: block; width: 100%; fill: white; transition: .15s ease-in-out;} .footer-soc li a:hover svg {opacity: 0.85;} .footer .copyright {display: inline-block; font-size: 0.8em; color: white; font-weight: 400; white-space: nowrap;} .footer .copyright a {color: white; font-weight: 700; transition: .15s ease-in-out;} .footer .copyright a:hover {color: var(--color2);} @media screen and (min-width: 1081px) { .footer .wrapper {justify-content: space-between;} .footer-cta {width: 21em;} .footer-info {width: 23em;} .footer-contacts > * {width: 50%;} .footer-links li {width: 100%;} .footer .right {justify-content: flex-end;} .footer .copyright {text-align: right; position: absolute; right: 0; bottom: 0;} } @media screen and (max-width: 1080px) { .footer-cta, .footer-contacts, .footer-info, .footer-links, .footer .right, .footer-soc {width: 100%; justify-content: center;} .footer-cta :is(h2, p) {text-align: center;} .footer-contacts {gap: 1.5em;} .footer-contacts > span {width: 100%; text-align: center;} .footer-contacts > span strong {display: block; font-size: 1.2em; margin-bottom: -1em;} .footer-contacts a {font-size: 1.2em;} .footer-links {max-width: 30em; margin-top: 1em;} } .pattern {background: URL("images/pattern.png") repeat center center, var(--color1); background-size: 2em auto;} .main {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; flex-grow: 1; position: relative; z-index: 2;} .main :is(h1, h2, h3) {display: block; width: 100%; text-align: center; color: var(--color1); font-weight: 700; line-height: 1.1em; font-family: var(--font1); margin-bottom: -0.25em; box-sizing: border-box;} .main h1 {font-size: min(calc(1.1em + 4vw), 2.7em);} .main h2 {font-size: min(calc(1em + 3vw), 2.2em); color: var(--color1b);} .main h3 {font-size: min(calc(0.75em + 4vw), 1.5em);} .main p, .main li {display: block; width: 100%; font-size: 1em; color: #666666; font-weight: 400;} .main p a, .main li a {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;} .main p a:hover, .main li a:hover {color: var(--color2) !important; text-decoration-color: transparent;} .main p {text-align: center;} .main strong {font-weight: 600;} .main em {font-style: italic;} .main h1:has(+ h2) {margin-bottom: -1rem;} .main h1 + h2 {font-size: min(calc(0.8em + 3vw), 1.7em);} @media screen and (min-width: 1081px) { .main h1 {text-align: left;} } @media screen and (max-width: 1080px) { .main :is(h1, h2, h3, p) {;} } .decor {display: block; width: 100%;} .decor1 {background: var(--decor1); background-size: var(--decor-size);} .decor2 {background: var(--decor2); background-size: var(--decor-size);} .hp .section {padding: var(--section-gap-hp) 0;} .section {display: flex; width: 100%; flex-wrap: wrap; gap: 1.8rem; box-sizing: border-box; padding: var(--section-gap) 0; position: relative;} .section.gray {background-color: var(--color3);} .section.halved {background: linear-gradient(to top, var(--color3) 0%, var(--color3) 50%, transparent 50%, transparent 100%);} .section.gradient {background: linear-gradient(to top, var(--color3) 0%, transparent 100%);} .section.padding-top-0 {padding-top: 0;;} .section.padding-bottom-0 {padding-bottom: 0;} .section.padding-bottom-0-special {padding-bottom: 1em; margin-bottom: -1em;} .section > .wrapper {gap: min(calc(0.6rem + 4vw), 2rem);} .section:has(.text-img) {overflow: hidden;} @media screen and (min-width: 1081px) { body:not(.hp) .section:first-of-type {padding-top: calc(var(--section-gap) + var(--header-nav)); margin-top: calc(0px - var(--header-nav));} body:not(.hp) .section:has(.catalogue):first-of-type {padding-block: calc(var(--gap1) + var(--header-nav)) var(--gap1);} } @media screen and (max-width: 1080px) { body:not(.hp) .section:not(.gray):first-child {background: linear-gradient(to bottom, var(--color3) 0%, transparent 2em);} } .flex {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem 1.2rem;} .flex.space-between {justify-content: space-between;} .button {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6em; outline: none; cursor: pointer; font-size: 0.9em; color: white; font-weight: 500; line-height: 1em; text-transform: uppercase; position: relative; background: none; outline: solid 2px transparent; border: none; border-right: none; padding: 0.95em 1.3em 0.85em; border-radius: var(--border-radius1); box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .button svg {display: block; width: 1em; fill: white; position: relative; top: -0.08em;} .button.color1 {background: var(--color1);} .button.color1:hover {background: var(--color1b);} .button.color2 {background: var(--color2);} .button.color2:hover {background: var(--color2b);} @media screen and (max-width: 768px) { .button {;} } .link {display: inline-block; font-size: 1.1em; font-weight: 600; color: var(--color0); text-decoration: underline; opacity: 0.5; transition: .15s ease-in-out; font-family: var(--font1);} .link:hover {opacity: 1; text-decoration-color: transparent;} .pagination {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0; background: white; padding: 0.9em; border-radius: var(--border-radius1); box-sizing: border-box;} .pagination > a {display: flex; min-width: 1.7em; height: 1.7em; justify-content: center; align-items: center; opacity: 0.4; text-align: center; font-size: 0.9em; font-weight: 400; color: var(--color0); line-height: 1em; padding: 0 0.4em; border-radius: var(--border-radius1); box-sizing: border-box; cursor: pointer; transition: .2s ease-in-out; font-family: var(--font1);} .pagination > a:hover {opacity: 1; background: var(--color3);} .pagination > a.sel {color: white; background: var(--color2); font-weight: 500; opacity: 1; margin-inline: 0.3em;} .cta {display: flex; width: 100%; align-items: center; align-content: center; gap: var(--gap2); background: var(--color3); border-radius: var(--border-radius1); padding: var(--cta-padding); box-sizing: border-box; position: relative; --cta-padding: min(calc(0.8rem + 2vw), 2.2rem); box-shadow: var(--box-shadow);} .cta .title {display: block; font-size: min(1.7rem, calc(1rem + 2vw)); font-weight: 700; color: var(--color0); line-height: 1.15em;} .cta .cta-img {display: block; position: relative;} .cta .cta-img img {display: block;} .cta .cta-img:after {display: block; background: black; opacity: 0.06; position: absolute; inset: 0; content: "";} @media screen and (min-width: 1081px) { .cta {justify-content: space-between; padding-block: 0;} .cta .title {width: calc(100% - 18em);} .cta .cta-img {height: 10em;} .cta .cta-img img {height: 100%;} } @media screen and (max-width: 1080px) { .cta {justify-content: center; flex-wrap: wrap; padding: var(--cta-padding) var(--cta-padding) 0;} .cta .title {width: 100%; text-align: center; padding-inline: var(--cta-padding); box-sizing: border-box; margin-bottom: 0.4rem;} .cta .cta-img {width: 100%; max-width: 30rem;} .cta .cta-img img {width: 100%;} .cta .button {width: 9em; position: absolute; left: calc(50% - 4.5em); bottom: var(--cta-padding);} } .gray .cta {background: white;} .gray .cta .cta-img:after {display: none;} .cta.cebia {background: #0285f4;} .cta.cebia .title {color: white; font-weight: 500;} .cta.cebia .cta-img:after {display: none;} .cta.cebia .logo {display: flex; width: 100%; height: 3em; justify-content: center;} .cta.cebia .logo img {display: block; height: 100%;} @media screen and (min-width: 1081px) { .cta.cebia {margin-top: 1em;} .cta.cebia .cta-img {height: 11em; margin-top: -1em;} .cta.cebia .logo {max-width: 7em;} .cta.cebia .logo img {width: 100%;} } @media screen and (max-width: 1080px) { .cta.cebia .cta-img {max-width: 16em; margin-right: -2em;} .cta.cebia .logo {height: 2em; order: -1;} .cta.cebia .logo img {height: 100%;} } .hp {background-image: URL("images/tracks-left.webp"), URL("images/tracks-right.webp"); background-repeat: repeat-y;} @media screen and (min-width: 1801px) { .hp {background-size: min(40rem, 40vw) auto; background-position: right 50vw top, left 50vw top;} } @media screen and (max-width: 1800px) { .hp {background-size: min(30rem, 100vw) auto; background-position: left top, right top;} } .anim {opacity: 0; transform: translate(0, 3em); transition: 1s ease-in-out; transition-delay: 0.35s;} .anim.zoom {transform: translate(0) scale(0.6);} .anim.from-bottom {transform: translate(0, 2rem);} .anim.play {opacity: 1; transform: translate(0) scale(1) !important;} @media screen and (min-width: 1081px) { .anim.from-left {transform: translate(-3em, 0);} .anim.from-right {transform: translate(3em, 0);} } .hero {overflow: visible;} .hero .bg {display: flex; justify-content: center; position: absolute; inset: 0; isolation: isolate;} .hero .bg > span {display: block; width: 100%; height: 100%; position: relative; z-index: 1;} .hero .bg > span > span {display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; inset: 0;} .hero-cols {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap;} .hero-cols > div {display: flex; flex-wrap: wrap; gap: 1.2em;} .hero-cols :is(h1, p) {color: white; text-shadow: 0.1em 0.1em 0.3em rgba(0,0,0,0.5);} .hero-cols h1 {margin-top: -0.1em;} .hero-cols p {font-size: 1.25em; font-weight: 200;} .hero-cols p strong {display: block;} .hero-cols .text > * {position: relative; z-index: 2;} .hero-form .form {background: white; border-radius: var(--border-radius1); padding: min(calc(1rem + 3vw), 2em) min(calc(1rem + 3vw), 2.6em);} .hero-form h2 {padding-inline: var(--padding-inline1); margin-bottom: 0.25em;} .hero-form .form .form-item {width: 100%;} .hero-form .form .form-item.width50 {width: calc(50% - var(--form-gap) / 2);} .hero-form .form .form-bottom {padding-inline: var(--padding-inline1);} .hero-form .form .form-bottom .button {width: 50%;} @media screen and (min-width: 1801px) { .hero .bg span {max-width: 1660px;} } @media screen and (min-width: 1401px) { .hero .bg > span { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top; -webkit-mask-size: 100% auto; mask-repeat: no-repeat; mask-position: center top; mask-size: 100% auto; -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='1000,1000 1000,35.5 963.4,0 0,0 0,1000'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='1000,1000 1000,35.5 963.4,0 0,0 0,1000'/%3E%3C/svg%3E%0A"); } .hero .bg > span > span { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; -webkit-mask-size: 100% auto; mask-repeat: no-repeat; mask-position: center bottom; mask-size: 100% auto; -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='0,0 0,964.5 36.6,1000 1000,1000 1000,0'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='0,0 0,964.5 36.6,1000 1000,1000 1000,0'/%3E%3C/svg%3E%0A"); } } @media screen and (min-width: 1081px) { .hero {margin-top: calc(0px - var(--header-nav));} .hero .bg > span > span {background-image: URL("images/hero.jpg");} .hero .bg > span > span:after {display: block; width: 50%; height: 100%; background: black; opacity: 0.4; position: absolute; right: 0; top: 0; content: ""; z-index: 3;} .hero .bg > span > span:before {display: block; background: black; opacity: 0.4; position: absolute; inset: 0; content: ""; z-index: 2;} .hero-cols {margin-top: var(--header-nav);} .hero-cols > div {width: 40%;} .hero-cols :is(h1, p) {text-align: left;} .hero-form {margin-block: -2rem;} .hero-form .wrapper {width: 100%;} .hero-form h2 {font-size: 1.8em;} } @media screen and (min-width: 1081px) and (max-width: 1281px){ .hero-cols > div {width: 43%;} } @media screen and (max-width: 1080px) { .hero {padding: 0 !important;} .hero > .wrapper {max-width: 100%; width: 100%;} .hero-cols > div {width: 100%; justify-content: center;} .hero-cols .text {background: URL("images/hero2.jpg") no-repeat center center; background-size: cover; padding: 4rem 2rem; position: relative;} .hero-cols .text:after {display: block; background: black; opacity: 0.4; position: absolute; inset: 0; content: ""; z-index: 1;} .hero-cols :is(h1, p) {text-align: center;} .hero-cols h1 {max-width: 36rem;} .hero-form h2 {text-align: center;} } @media screen and (min-width: 541px) and (max-width: 1081px){ .hero-cols .text {padding-bottom: 8rem;} .hero-form {margin-top: -4rem; position: relative; z-index: 2; background: linear-gradient(to bottom, var(--color3) 0%, transparent 100%);} .hero-form .form {margin-block: 0.4em; box-shadow: 0 0 0.4em rgba(0,0,0,0.2);} } @media screen and (max-width: 540px) { .hero-form {padding: var(--section-gap-hp) 0 0;} .hero-form .form {background: none; padding: 0;} } .hp-categories {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--categories-gap); --categories-gap: 0.4em;} .hp-categories > div {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em; padding: min(2em, calc(0.5em + 3vw)); box-sizing: border-box; position: relative; isolation: isolate;} .hp-categories > div:before {display: block; background: rgba(230,230,230,0.65); position: absolute; inset: 0; z-index: -1; content: ""; transition: .15s ease-in-out;} .hp-categories > div h3 {display: block; width: 100%; text-align: center; font-size: min(1.3em, calc(0.6em + 2vw));} .hp-categories > div img {display: block; width: 100%; max-width: 14em;} .hp-categories > div .button {font-size: 0.8em;} .hp-categories > div a {display: block; position: absolute; inset: 0; z-index: 2;} .hp-categories > div:hover:before {background: rgba(200,200,200,0.8);} @media screen and (min-width: 1081px) { .hp-categories > div {width: calc(25% - var(--categories-gap) * 3 / 4);} .hp-categories > div:nth-child(1) {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,1833.4 156.6,2000 1000,2000 1000,-11.7'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; -webkit-mask-size: 100% auto; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,1833.4 156.6,2000 1000,2000 1000,-11.7'/%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-position: center bottom; mask-size: 100% auto;} .hp-categories > div:nth-child(4) {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='1000,2000 1000,155 843.4,-11.7 0,-11.7 0,2000'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top; -webkit-mask-size: 100% auto; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='1000,2000 1000,155 843.4,-11.7 0,-11.7 0,2000'/%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-position: center top; mask-size: 100% auto;} } @media screen and (max-width: 1080px) { .hp-categories > div {width: calc(50% - var(--categories-gap) * 0.5);} .hp-categories > div:nth-child(3) {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,1833.4 156.6,2000 1000,2000 1000,-11.7'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; -webkit-mask-size: 100% auto; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,1833.4 156.6,2000 1000,2000 1000,-11.7'/%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-position: center bottom; mask-size: 100% auto;} .hp-categories > div:nth-child(2) {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='1000,2000 1000,155 843.4,-11.7 0,-11.7 0,2000'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top; -webkit-mask-size: 100% auto; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpolygon points='1000,2000 1000,155 843.4,-11.7 0,-11.7 0,2000'/%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-position: center top; mask-size: 100% auto;} } @media screen and (max-width: 540px) { .hp-categories > div .button {font-size: 0.65em;} } .hp .text-img {gap: var(--section-gap-hp) 0;} .text-img {display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--section-gap) 0;} .text-img > div {display: flex; flex-wrap: wrap; gap: 1em; position: relative;} .text-img .img > span {display: block; width: 140%; height: 100%; position: absolute; left: 0; top: 0; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top; -webkit-mask-size: 100% auto; mask-repeat: no-repeat; mask-position: center top; mask-size: 100% auto; -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='1000,1000 1000,85 913.4,-11.7 0,-11.7 0,1000'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='1000,1000 1000,85 913.4,-11.7 0,-11.7 0,1000'/%3E%3C/svg%3E%0A"); } .text-img .img > span > span {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; -webkit-mask-size: 100% auto; mask-repeat: no-repeat; mask-position: center bottom; mask-size: 100% auto; -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,903.4 86.6,1000 1000,1000 1000,-11.7'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cpolygon points='0,-11.7 0,903.4 86.6,1000 1000,1000 1000,-11.7'/%3E%3C/svg%3E%0A"); } @media screen and (min-width: 1081px) { .text-img .text {width: 45%;} .text-img .img {width: 50%;} .text-img .text {padding-block: 3em;} .text-img .text :is(h2, p) {text-align: left;} } @media screen and (max-width: 1080px) { .text-img > div {width: 100%; justify-content: center;} .text-img .img {aspect-ratio: 1.5; order: -1;} } @media screen and (min-width: 769px) { .text-img .img > span > span {background-image: URL("images/about.jpg");} .text-img.operativni-leasing .img > span > span {background-image: URL("images/operativni-leasing.jpg");} .text-img.uverove-financovani .img > span > span {background-image: URL("images/uverove-financovani.jpg");} .text-img.financni-leasing .img > span > span {background-image: URL("images/financni-leasing.jpg");} } @media screen and (max-width: 768px) { .text-img .img > span > span {background-image: URL("images/about-small.jpg");} } .swiper {display: block; width: 100%;} .swiper-button-prev, .swiper-button-next {display: flex; --swiper-button: 1.4rem; width: calc(6 * var(--swiper-button)); height: var(--swiper-button); justify-content: center; align-items: center; background: var(--color1); border-radius: 0 0 0.4em 0.4em; z-index: 5; margin: 0; box-sizing: border-box; position: absolute; top: calc(50% - var(--swiper-button) / 2); cursor: pointer; transition: .15s ease-in-out;} .swiper-button-prev svg, .swiper-button-next svg {display: block; height: 50%; fill:white;} .swiper-button-prev:after, .swiper-button-next:after {display: none;} .swiper-button-prev:hover, .swiper-button-next:hover {background: var(--color2);} .swiper-button-prev {transform: rotate(90deg);} .swiper-button-next {transform: rotate(-90deg);} .swiper-button-disabled {opacity: 0.2 !important;} .carousel {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative;} .carousel .swiper-slide {display: flex; height: auto; position: relative; box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;} .carousel .swiper-slide > * {width: 100%;} .carousel .swiper-button-prev {left: calc(0px - var(--swiper-button) * 3.5);} .carousel .swiper-button-next {right: calc(0px - var(--swiper-button) * 3.5);} @media screen and (max-width: 960px) { .carousel {width: calc(100% - 2em); margin-inline: 1em;} } .flags {display: flex; width: 100%; flex-wrap: wrap; --tags-gap: 0.15rem 0.85rem; gap: var(--tags-gap);} .flags li {display: block; width: auto; font-size: 0.85em; color: var(--color0); font-weight: 500; line-height: 1.3; padding-left: 1.4em; position: relative; box-sizing: border-box;} .flags li:before {display: block; width: 1em; height: 1em; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: 0; top: 0.07em; content: "";} .flags li.novy:before, .flags li.testovaci:before, .flags li.zanovni:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M465.7,190.3c-1.8-2.7-3.3-5.5-4.5-8.4h25.4c7.3,0,13.9-4.1,17.1-10.6l6.4-12.8c4.7-9.5,0.9-20.9-8.6-25.7 c-2.6-1.3-5.6-2-8.5-2h-43l-7.9-39.4c-4.9-24.5-23.7-43.9-48.1-49.6c-37.3-8.7-83.3-13-137.9-13c-54.6,0-100.6,4.3-137.9,13 C93.7,47.5,74.9,66.9,70,91.4l-7.9,39.4h-43C8.5,130.9,0,139.5,0,150c0,3,0.7,5.9,2,8.5l6.4,12.8c3.2,6.5,9.8,10.6,17.1,10.6h25.4 c-1.2,2.9-2.8,5.8-4.5,8.4l-19.9,29.8C9.8,245.1,0.9,274.4,0.9,304.4v164.5C0.9,479.4,9.5,488,20,488h41.2c9.4,0,17.3-6.8,18.9-16 l10.1-60.5h331.6l10.1,60.5c1.5,9.2,9.5,16,18.9,16h41.2c10.6,0,19.1-8.6,19.1-19.1V304.4c0-30-8.9-59.3-25.5-84.3L465.7,190.3z M103.9,182l16.1-80.5c1-4.9,4.7-8.8,9.6-9.9C162.8,83.9,205,79.9,256,79.9c51,0,93.2,4,126.3,11.7c4.9,1.1,8.7,5,9.6,9.9L408,182 c1.8,8.8,4.7,17.4,8.7,25.4H95.3C99.3,199.4,102.2,190.8,103.9,182z M90.2,334.9c-21.1,0-38.3-17.1-38.3-38.3 c0-21.1,17.1-38.3,38.3-38.3c21.1,0,38.3,17.1,38.3,38.3C128.4,317.8,111.3,334.9,90.2,334.9z M421.8,334.9 c-21.1,0-38.3-17.1-38.3-38.3c0-21.1,17.1-38.3,38.3-38.3s38.3,17.1,38.3,38.3C460.1,317.8,442.9,334.9,421.8,334.9z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.do1roku:before, .flags li.do2let:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512,307.2V266c0-21.5,0-10.6-0.3-27.6H0.3C0,255.4,0,244.5,0,266v41.2C0,403.7,0,452,30,482 c30,30,78.3,30,174.8,30h102.4c96.5,0,144.8,0,174.8-30C512,452,512,403.7,512,307.2z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M507,135.6c-4.1-23.6-11.5-40.9-25-54.4c-17.8-17.8-42-25-78.8-28V12.8c0-10.6-8.6-19.2-19.2-19.2 s-19.2,8.6-19.2,19.2v38.7c-17-0.3-36.1-0.3-57.6-0.3H204.8c-21.5,0-40.6,0-57.6,0.3V12.8c0-10.6-8.6-19.2-19.2-19.2 s-19.2,8.6-19.2,19.2v40.4c-36.8,3-61,10.2-78.8,28C16.5,94.7,9.1,111.9,5,135.6H507z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); } .flags li.led:before, .flags li.laser:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M294,36.7c-1.7-9.3-9.8-16.1-19.3-16.1C123.2,20.5,0,126.2,0,256c0,129.8,123.2,235.5,274.7,235.5c9.5,0,17.6-6.8,19.3-16.1 l2-11.1c24-141.1,24-281.3,0-416.7L294,36.7' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M391.2,280.2h96.7c13.4,0,24.2-10.8,24.2-24.2c0-13.3-10.8-24.2-24.2-24.2h-96.7c-13.4,0-24.2,10.8-24.2,24.2 C367,269.3,377.8,280.2,391.2,280.2z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M393.1,163.7l96.4-7.2c13.3-1,23.3-12.6,22.3-25.9c-1-13.3-12.6-23.3-25.9-22.3l-96.4,7.2c-13.3,1-23.3,12.6-22.3,25.9 C368.2,154.7,379.8,164.7,393.1,163.7z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M485.9,403.7l-96.4-7.2c-13.3-1-23.3-12.6-22.3-25.9c1-13.3,12.6-23.3,25.9-22.3l96.4,7.2c13.3,1,23.3,12.6,22.3,25.9 C510.8,394.7,499.2,404.7,485.9,403.7z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); } .flags li.top:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M433.2,86.6l-4.2-2.1l-41.3-23.7l-85.6-49.5C276-3.8,236-3.8,209.9,11.4l-85.6,49.2L83.1,84.8l-5.5,2.7 c-53.1,35.8-56.7,42.5-56.7,99.8v137.1c0,57.3,3.6,64,58,100.7l131.1,75.5c13,7.9,29.4,11.2,46.1,11.2c16.4,0,33.1-3.6,46.1-11.2 l132.3-76.5c53.4-35.8,56.7-42.2,56.7-99.8V187.4C491.1,130,487.5,123.3,433.2,86.6z M369.7,247.8l-24.9,30.6 c-4.1,4.5-6.9,13-6.5,19.2l2.4,39.1c1.6,24-15.5,36.3-37.9,27.7l-36.3-14.7c-5.7-2-15.1-2-20.8,0L209.5,364 c-22.4,9-39.5-3.7-37.9-27.7l2.4-39.1c0.4-6.1-2.4-14.7-6.5-19.2l-25.3-30.2c-15.5-18.3-8.6-38.7,14.7-44.8l37.9-9.8 c6.1-1.6,13-7.3,16.3-12.2l21.2-32.6c13-20.4,33.8-20.4,47.3,0l21.2,32.6c3.3,5.3,10.6,10.6,16.3,12.2L355,203 C378.3,209.1,385.2,229.5,369.7,247.8z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.nav:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288,512.6c-0.4,0-0.9,0-1.3,0c-13.3-0.6-24.8-9.2-29-21.9l-58.9-176.8L21.9,254.9c-12.6-4.2-21.3-15.8-21.9-29 s7.2-25.5,19.4-30.7l448-192c12-5.2,26-2.5,35.2,6.8c9.3,9.3,11.9,23.2,6.8,35.2l-192,448C312.4,505,300.8,512.6,288,512.6z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.interier:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M49.9,44.1l0.7,10.6c0.3,4.5,1.3,8.9,2.9,13l11.1,95.2c-0.1,1.7,0,3.4,0.1,5.2l32.5,306.9c2.2,20.5,20.7,37.1,41.2,37.1 h84.7h2.5h166.3c20.3,0,40.9-16,45.9-35.7l23.1-90.8c2.4-9.6,0.9-18.6-4.3-25.2c-5.5-7.1-14.5-10.8-25.2-10l-198.4,14.3l-42.1-198.3 c-4.2-19.9-24.2-36.1-44.6-36.1H98.9c-4.9,0-9.6,1-13.9,2.7L80.6,95c5.2,2.1,10.8,3.2,16.6,3.2h41.7c11.8,0,22.2-4.6,29.3-13 c7-8.4,9.8-19.4,7.8-31.1l-2-11.6C169.8,19.1,147.1,0,123.3,0L91,0C79.3,0,68.5,4.6,60.7,13C52.9,21.3,49.1,32.4,49.9,44.1z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.cng:before, .flags li.lpg:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496.2,176.7l-72.9-72.9c-10.5-10.5-27.6-10.5-38.1,0c-10.5,10.5-10.5,27.6,0,38.1l29.7,29.7 c-0.7,1-1.4,1.9-2,2.9c-5,7.8-8,16.8-8.5,26.1s1.4,18.6,5.5,26.9c4.1,8.3,10.3,15.5,18.1,20.7c7.7,5.2,16.6,8.4,25.9,9.1 c1.4,0.1,2.9,0.2,4.3,0.2v121.3c0,7.4-6,13.5-13.5,13.5s-13.5-6-13.5-13.5v-67.4c0-29.8-24.1-53.9-53.9-53.9h-26.9V68.9 c0-29.8-24.1-53.9-53.9-53.9H80.8c-29.8,0-53.9,24.1-53.9,53.9v377.3C12.1,446.2,0,458.2,0,473.1c0,14.9,12.1,26.9,26.9,26.9h323.4 c14.9,0,26.9-12.1,26.9-26.9c0-14.9-12.1-26.9-26.9-26.9V311.4h26.9v67.4c0,37.2,30.2,67.4,67.4,67.4c37.2,0,67.4-30.2,67.4-67.4 v-164C512,200.5,506.3,186.8,496.2,176.7z M296.4,203.7H80.8V68.9h215.6V203.7z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.hybrid:before, .flags li.plug-in:before, .flags li.elektro:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224.2,290.1h-92.4L341.2,14.5C314.5,5.1,285.9,0,256,0C114.6,0,0,114.6,0,256c0,105.6,64,196.3,155.3,235.4L224.2,290.1z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M347.1,16.7l-62.8,206.7h95.9L162.5,494.4c29,11.4,60.5,17.6,93.5,17.6c141.4,0,256-114.6,256-256 C512,146.7,443.5,53.4,347.1,16.7z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); } .flags li.pano:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='175.3,92.1 256.4,92.1 337.4,92.1 337.4,418.7 175.3,418.7' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512,466.5V256V45.5c0-7.3-7.6-12.1-14.2-8.9L380,93.2V256v162.8l117.8,56.7C504.4,478.6,512,473.8,512,466.5z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M14.4,475.5L134,418.8V256V93.2L14.4,36.5C7.7,33.4,0,38.2,0,45.5V256v210.5C0,473.8,7.7,478.6,14.4,475.5z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); } .flags li.kuze:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M476.9,361.2c-3.1-5.1-8.7-8.2-14.7-8.2l0,0c-39.2,0-71.1-45.1-71.1-100.6s31.9-100.6,71.1-100.6c6.2,0,12-3.4,15.1-8.8 c3.1-5.5,2.9-12.1-0.3-17.4l-46.7-76.2c-2.8-4.5-7.4-7.5-12.7-8.1c-5.2-0.6-10.5,1.2-14.2,4.9c-16.2,16.2-42.7,16.2-58.9,0 c-7.9-7.9-12.2-18.3-12.2-29.5c0-9.5-7.7-17.3-17.3-17.3H197.1c-9.5,0-17.3,7.7-17.3,17.3c0,11.1-4.3,21.6-12.2,29.5 c-16.2,16.2-42.7,16.2-58.9,0c-3.7-3.7-9-5.6-14.2-4.9c-5.2,0.6-9.9,3.6-12.7,8.1l-46.7,76.2c-3.3,5.3-3.4,12-0.3,17.4 c3.1,5.5,8.8,8.8,15.1,8.8c39.2,0,71.1,45.1,71.1,100.6S89,353,49.8,353c-5.9,0-11.4,3-14.5,8c-3.2,5-3.6,11.2-1.1,16.5l29.5,63.8 c3.2,7,10.6,11,18.2,9.8c1.2-0.2,123-17.4,157.8,51.4c2.9,5.8,8.8,9.4,15.2,9.5c0.1,0,0.1,0,0.2,0c6.4,0,12.3-3.5,15.3-9.2 c37.3-70.5,159.2-56.7,160.5-56.5c7.2,0.9,14.3-2.9,17.5-9.4l29.5-58.9C480.3,372.6,480,366.3,476.9,361.2z M274.1,388.9 c0,10-8.1,18.1-18.1,18.1c-10,0-18.1-8.1-18.1-18.1v-41c0-10,8.1-18.1,18.1-18.1c10,0,18.1,8.1,18.1,18.1V388.9z M274.1,272.9 c0,10-8.1,18.1-18.1,18.1c-10,0-18.1-8.1-18.1-18.1v-41c0-10,8.1-18.1,18.1-18.1c10,0,18.1,8.1,18.1,18.1V272.9z M274.1,157 c0,10-8.1,18.1-18.1,18.1c-10,0-18.1-8.1-18.1-18.1v-41c0-10,8.1-18.1,18.1-18.1c10,0,18.1,8.1,18.1,18.1V157z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .flags li.tazne:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.9,150.4C493.9,68.2,427.3,1.5,345,1.5S196.1,68.2,196.1,150.4c0,60.9,36.6,113.3,88.9,136.3v104.1H19v120h326 c33.1,0,60-26.9,60-60V286.8C457.4,263.7,493.9,211.3,493.9,150.4z' width='1' height='1' fill='rgb(227,6,19)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .item-preview {display: flex; flex-direction: column; flex-wrap: wrap; background: white; border-radius: var(--border-radius1); overflow: hidden; --item-info-padding: calc(0.5rem + 3%);} .item-preview .img {display: block; width: 100%; aspect-ratio: 1.54; position: relative;} .item-preview .img .img-inner {display: block; position: absolute; inset: 0;} .item-preview .img .img-inner img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .item-preview .img:hover .img-inner img {opacity: 0.8;} .item-preview .img .tag {display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: black; font-weight: 700; padding: 0.2em 0.8em; background: var(--color-yellow); border-radius: 0.3em 0.3em 0 0; position: absolute; left: var(--item-info-padding); bottom: 0; z-index: 1;} .item-preview .img .tag:before {display: block; width: 1em; height: 1em; position: relative; top: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M234.8,37.3c6.7-15,10.1-22.6,14.7-24.9c4.1-2,8.8-2,12.9,0c4.7,2.3,8,9.8,14.7,24.9l53.4,119.8 c2,4.4,3,6.7,4.5,8.4c1.4,1.5,3,2.7,4.9,3.5c2.1,0.9,4.5,1.2,9.4,1.7l130.4,13.8c16.4,1.7,24.6,2.6,28.2,6.3c3.2,3.2,4.6,7.8,4,12.2 c-0.8,5.2-6.9,10.7-19.1,21.7l-97.4,87.8c-3.6,3.3-5.4,4.9-6.6,6.9c-1,1.8-1.6,3.7-1.9,5.7c-0.2,2.3,0.3,4.7,1.3,9.4l27.2,128.3 c3.4,16.1,5.1,24.2,2.7,28.8c-2.1,4-5.9,6.8-10.4,7.6c-5.1,0.9-12.3-3.2-26.5-11.5l-113.6-65.5c-4.2-2.4-6.3-3.6-8.6-4.1 c-2-0.4-4-0.4-6,0c-2.2,0.5-4.3,1.7-8.6,4.1l-113.6,65.5c-14.3,8.2-21.4,12.3-26.5,11.5c-4.5-0.8-8.3-3.6-10.4-7.6 c-2.4-4.6-0.7-12.7,2.7-28.8l27.2-128.3c1-4.8,1.5-7.1,1.3-9.4c-0.2-2-0.8-4-1.9-5.7c-1.1-2-3-3.6-6.6-6.9l-97.4-87.8 C7,213.6,0.9,208.1,0.2,203c-0.7-4.5,0.8-9,4-12.2c3.6-3.7,11.8-4.6,28.2-6.3l130.4-13.8c4.8-0.5,7.3-0.8,9.4-1.7 c1.9-0.8,3.5-2,4.9-3.5c1.5-1.7,2.5-3.9,4.5-8.4L234.8,37.3z' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; content: "";} .item-preview .info {display: flex; flex-grow: 1; flex-direction: column; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 0.6em; padding: var(--item-info-padding); box-sizing: border-box;} .item-preview .title {display: block; width: 100%; font-size: 1.4em; font-weight: 700;} .item-preview .title a {color: var(--color0); text-decoration: none; transition: .15s ease-in-out;} .item-preview .title a:hover {color: var(--color2);} .item-preview .tags {display: flex; width: 100%; flex-wrap: wrap; --tags-gap: 0.2rem; gap: var(--tags-gap);} .item-preview .tags li {display: block; text-align: center; font-size: 0.7em; color: white; font-weight: 400; line-height: 1.3; background: var(--color1b); padding: 0.35em 0.4em; border-radius: 0.4em; box-sizing: border-box;} .item-preview .bottom {display: flex; width: 100%; flex-grow: 1; align-items: flex-end; align-content: flex-end; margin-top: 0.4em;} .item-preview .bottom > div {display: flex; width: 100%; justify-content: space-between; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; gap: 1em;} .item-preview .bottom .price {display: block; flex-grow: 1; padding-top: 0.75rem; border-top: solid 1px rgba(0,0,0,0.3); box-sizing: border-box; position: relative; top: 0.3rem;} .item-preview .bottom .price span {display: block; font-size: 1.2em; color: var(--color0);} .item-preview .bottom .price span strong {font-weight: 700;} .item-preview .bottom .cebia {display: block; width: 5em; position: relative; top: -0.1rem} .item-preview .bottom .cebia span {display: block; font-size: 0.65em; color: var(--color1); font-weight: 700; line-height: 1.3em; margin-block: -0.25em 0.25em;} .item-preview .bottom .cebia img {display: block; width: 100%;} .item-preview.discount .bottom > div {padding-top: 0.3rem; border-top: solid 1px rgba(0,0,0,0.3);} .item-preview.discount .bottom .price {padding-top: 0; border-top: none;} .item-preview.discount .bottom .price span.old {font-size: 0.85em; color: var(--color2); line-height: 1.3em; text-decoration: line-through;} .item-preview.discount .bottom .cebia {top: ;} @media screen and (max-width: 1080px) { .item-preview .tags li {font-size: 0.65em;} .item-preview .flags li {font-size: 0.75em;} } @media screen and (min-width: 961px) and (max-width: 1080px){ .item-preview .tags li {width: calc(25% - var(--tags-gap) * 3 / 4);} } @media screen and (min-width: 681px) and (max-width: 960px){ .item-preview .tags li {width: calc(33.33% - var(--tags-gap) * 2 / 3);} } @media screen and (min-width: 541px) and (max-width: 680px){ .item-preview .tags li {width: calc(50% - var(--tags-gap) * 0.5);} } @media screen and (max-width: 680px) { .item-preview .flags li {font-size: 0.75em;} } @media screen and (min-width: 381px) and (max-width: 580px){ .item-preview .tags li {width: calc(25% - var(--tags-gap) * 3 / 4);} } @media screen and (max-width: 380px) { .item-preview .tags li {width: calc(50% - var(--tags-gap) * 0.5);} } @media screen and (min-width: 1301px) { .grid .item-preview .tags li {width: calc(25% - var(--tags-gap) * 3 / 4);} } @media screen and (min-width: 1081px) and (max-width: 1300px){ .grid .item-preview .tags li {width: calc(33.33% - var(--tags-gap) * 2 / 3);} } @media screen and (min-width: 961px) { .rows .item-preview {width: 100%; flex-direction: row;} .rows .item-preview .img {width: calc(10% + 12rem);} .rows .item-preview .img .tag {font-size: 0.7em;} .rows .item-preview .info {width: calc(90% - 12rem); padding: 1em;} .rows .item-preview .tags li {width: 6.2em;} .rows .item-preview .flags li {font-size: 0.7em;} } .catalogue {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);} .catalogue > div {display: flex; flex-wrap: wrap; gap: var(--gap1);} .catalogue-filters {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; background: white; padding: 1.5em; border-radius: var(--border-radius1); box-sizing: border-box;} .catalogue-filters2 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;} .catalogue-filters2 .checkbox {width: auto;} .catalogue-filters2 .flag-filters {displaY: flex; box-sizing: border-box;} .catalogue-filters2 .flag-filters > div {display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 0.8em;} .catalogue-filters2 .flag-filters a {display: block; font-size: 0.85em; font-weight: 500; color: #999999; position: relative; top: 0.1em; cursor: pointer; transition: .2s ease-in-out;} .catalogue-filters2 .flag-filters a:hover {color: var(--color1);} .catalogue-filters2 .flag-filters a.sel {color: var(--color2); font-weight: 700;} .catalogue-filters2 .layout {display: flex; align-items: center; gap: 0.45em;} .catalogue-filters2 .layout:before {display: block; font-size: 0.85em; font-weight: 500; color: #999999; margin-right: 0.3em; position: relative; top: 0.15em; content: "Režim zobrazení:";} .catalogue-filters2 .layout span {display: block; width: 1.1em; height: 1.1em; cursor: pointer} .catalogue-filters2 .layout span svg {display: block; width: 100%; height: 100%; fill: #999999; transition: .2s ease-in-out;} .catalogue-filters2 .layout span:hover svg {fill: var(--color0);} .catalogue-filters2 .layout span.sel svg {fill: var(--color2);} .catalogue-items {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);} @media screen and (min-width: 1481px) { .catalogue-filters .checkboxes > * {width: calc(50% - var(--checkboxes-gap) * 0.5);} .catalogue-items > * {width: calc(33.33% - var(--gap1) * 2 / 3);} } @media screen and (min-width: 1081px) and (max-width: 1480px){ .catalogue-items > * {width: calc(50% - var(--gap1) * 0.5);} .catalogue-filters2 .layout:before {display: none;} } @media screen and (min-width: 1081px) { .catalogue .left {width: 20em;} .catalogue .right {width: calc(100% - 20em - var(--gap1));} .catalogue-filters h1 {text-align: left; font-size: 1.7em;} .catalogue-filters .form-item {width: 100%;} .catalogue-filters .form-item.width50 {width: calc(50% - var(--form-gap) / 2);} } @media screen and (max-width: 1080px) { .catalogue > div {width: 100%;} .catalogue-filters .form {max-width: 30em; margin-inline: auto;} .catalogue-filters .checkboxes > * {width: calc(50% - var(--checkboxes-gap) * 0.5);} } @media screen and (min-width: 581px) and (max-width: 1080px){ .catalogue-filters :is(.form-item, .hidden) {width: calc(50% - var(--form-gap) * 0.5) !important;} .catalogue-filters .form-item:first-of-type {width: 100% !important;} .catalogue-filters .hidden:has(.checkboxes) {width: 100% !important;} .catalogue-items > * {width: calc(50% - var(--gap1) * 0.5);} } @media screen and (min-width: 961px) { .catalogue-filters2 {align-items: center; gap: 0.5em 1em; background: white; border-radius: var(--border-radius1); padding-right: 1em;} } @media screen and (max-width: 960px) { .catalogue-filters2 {flex-wrap: nowrap; gap: var(--gap1);} .catalogue-filters2 :is(.checkbox, .flag-filters) {background: white; border-radius: var(--border-radius1);} .catalogue-filters2 .checkbox {width: 7.8rem;} .catalogue-filters2 .flag-filters {width: calc(100% - 7.8rem - var(--gap1)); padding-inline: 1em; overflow-x: auto; scrollbar-width: none;} .catalogue-filters2 .flag-filters::-webkit-scrollbar {display: none;} .catalogue-filters2 .flag-filters > div {flex-wrap: nowrap;} .catalogue-filters2 .flag-filters a {white-space: nowrap;} .catalogue-filters2 .flag-filters a.sel {order: -1;} .catalogue-filters2 .layout {display: none;} } @media screen and (max-width: 580px) { .catalogue-filters :is(.form-item, .hidden) {width: 100% !important;} .catalogue-filters .form-item.width50 {width: calc(50% - var(--form-gap) * 0.5) !important;} .catalogue-items > * {width: 100%;} } .chk-discount:not(:checked), .chk-discount:checked {position: absolute; left: -9999px; background-position: left top;} .chk-discount:not(:checked) + label, .chk-discount:checked + label {display: block; text-align: left; font-size: 1.1em; line-height: 1.3em; padding: 1.15em 1em 1em 2.45em; font-weight: 700; color: black; cursor: pointer; position: relative; border-radius: var(--border-radius1); box-sizing: border-box; transition: .15s ease-in-out;} .chk-discount:checked + label {background: var(--color-yellow);} .chk-discount:not(:checked) + label:before, .chk-discount:checked + label:before {display: block; width: 1em; height: 1em; border-radius: 0.2em; position: absolute; left: 1em; top: 1.22em; overflow: hidden; content: "";} .chk-discount:not(:checked) + label:before {background-color: #e5e5e5;} .chk-discount:checked + label:before {background: URL('images/check-white.svg') no-repeat center center; background-size: 100% 100%; background-color: black;} .item-detail-head {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;} .item-detail-head h1 {text-align: left;} .item-detail-image {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5rem;} .item-detail-image .cover {display: flex; position: relative;} .item-detail-image .cover .swiper-slide {display: block; width: 100%; overflow: hidden; box-sizing: border-box; border-radius: var(--border-radius1); overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .item-detail-image .cover .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} .item-detail-image .cover .swiper-button-prev, .item-detail-image .cover .swiper-button-next {border-radius: 0.4em 0.4em 0 0;} .item-detail-image .cover .swiper-button-prev {left: calc(var(--swiper-button) - var(--swiper-button) * 3.5);} .item-detail-image .cover .swiper-button-next {right: calc(var(--swiper-button) - var(--swiper-button) * 3.5);} .item-detail-image .thumbs {display: flex; width: 100%; height: auto; box-sizing: border-box; overflow: hidden; position: relative;} .item-detail-image .thumbs > div {display: block; width: 100%; height: auto; overflow: hidden;} .item-detail-image .thumbs .swiper-slide {display: block; position: relative; box-sizing: border-box; overflow: hidden; border: solid 2px transparent; cursor: pointer; border-radius: var(--border-radius1); overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; transition: .15s ease-in-out;} .item-detail-image .thumbs .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0); opacity: 0.3; transition: .25s ease-in-out;} .item-detail-image .thumbs .swiper-slide:hover {opacity: 1;} .item-detail-image .thumbs .swiper-slide:hover img {opacity: 1;} .item-detail-image .thumbs .swiper-slide-thumb-active img {filter: saturate(1); opacity: 1;} @media screen and (min-width: 1081px) { .item-detail-image {height: 40vw;} .item-detail-image .cover {width: calc(75% - 0.5rem); height: 100%;} .item-detail-image .thumbs {width: 25%; height: 100%;} } @media screen and (min-width: 1401px) { .item-detail-image {height: 30rem;} } @media screen and (max-width: 1080px) { .item-detail-image :is(.cover, .thumbs) {width: 100%;} } .item-detail-basics {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;} .item-detail-basics .description { text-align: left; color:#666666; } .item-detail-basics .description p, .mce-content-body.description { text-align: left; } .item-detail-basics .description a, .mce-content-body.description a { text-decoration:underline; color:#666666; } .item-detail-basics .description strong, .mce-content-body.description strong { font-weight:600; } .price-box {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.5rem; padding: 1.4em; background: white; border-radius: var(--border-radius1); box-sizing: border-box; box-shadow: var(--box-shadow);} .price-box .price {display: block; font-size: 1.8em; color: var(--color1); font-weight: 700; line-height: 1.1em; position: relative; top: 0.065em;} .price-box .price > span {display: block; font-size: 0.7em; font-weight: 300; line-height: 1.1em;} .price-box .price-change {display: block; flex-grow: 1; position: relative; top: 0.095em;} .price-box .price-change span {display: inline-block; font-size: 0.95em; color: var(--color1); font-weight: 400; line-height: 1.1em; padding-block: 0.45em;} .price-box .price-change span:first-child {border-bottom: solid 1px rgba(0,0,0,.3);} .price-box .price-change span:last-child {width: 100%;} .price-box .divider {display: none;} .price-box .button {font-size: 1em;} .price-box .button > span > span {display: block; font-size: 0.7em; font-weight: 300;} .price-box .button svg {width: 1.4em;} @media screen and (min-width: 961px) { .price-box {justify-content: space-between;} } @media screen and (max-width: 960px) { .price-box {justify-content: center;} .price-box :is(.price, .price-change) {width: 100%; text-align: center;} } @media screen and (min-width: 641px) and (max-width: 960px){ .price-box .price, .price-box .price-change {width: 13rem; flex-grow: unset;} .price-box .divider {display: block; width: 100%;} .price-box .button {margin-top: -0.5rem;} } .item-detail-info {display: flex; width: 100%; flex-wrap: wrap; gap: var(--item-detail-info-gap); --item-detail-info-gap: 0.3em; font-size: 0.9em;} .item-detail-info h2 {text-align: left; margin-bottom: 0.4rem;} .item-detail-info > div {display: flex; flex-wrap: wrap; background: var(--color3); padding: 0.7em 0 0.6em; box-sizing: border-box; border-radius: var(--border-radius1);} .item-detail-info > div span {display: flex; width: 50%; align-items: center; line-height: 1.3em; padding: 0.2em 1em; box-sizing: border-box;} .item-detail-info > div span:last-child {border-left: solid 1px rgba(0,0,0,0.2); text-transform: capitalize; } @media screen and (min-width: 1081px) { .item-detail-info > div {width: calc(33.33% - var(--item-detail-info-gap) * 2 / 3);} } @media screen and (min-width: 641px) and (max-width: 1080px){ .item-detail-info > div {width: calc(50% - var(--item-detail-info-gap) * 0.5);} } @media screen and (max-width: 640px) { .item-detail-info > div {width: 100%;} } .item-detail-form {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; padding: min(calc(1rem + 3vw), 4rem); box-sizing: border-box; border-radius: var(--border-radius1);} .item-detail-form h2 {text-align: center; color: white; margin-bottom: 1rem;} .item-detail-form .form {max-width: 44em; font-size: 1.1em; --form-item-height: 3.6em; --form-gap: 0.4em;} .item-detail-form .form-item :is(input, textarea) {background: white; color: black; padding: 0 1em;} .item-detail-form .form-item input {} .item-detail-form .form-item input::placeholder, .item-detail-form .form-item textarea::placeholder {color: #666666;} .item-detail-form .form-bottom {justify-content: center; gap: 1.4rem;} .item-detail-form .checkbox {display: flex; width: 100%; justify-content: center;} .item-detail-form .chk1:not(:checked) + label, .item-detail-form .chk1:checked + label {color: white;} .item-detail-form .chk1:not(:checked) + label a, .item-detail-form .chk1:checked + label a {color: white;} .item-detail-form .chk1:not(:checked) + label a:hover, .item-detail-form .chk1:checked + label a:hover {color: white; opacity: 0.9;} .item-detail-form .chk1:checked + label {font-weight: 300;} .item-detail-form .form-bottom .button {width: auto; max-width: 100%;} @media screen and (min-width: 1081px) { .item-detail-form .form-item.width50 {width: calc(50% - var(--form-gap) / 2);} .item-detail-form .form-item.width33 {width: calc(33.33% - var(--form-gap) * 2 / 3);} } @media screen and (min-width: 541px) and (max-width: 1080px){ .item-detail-form :is(.width50, .width33) {width: calc(50% - var(--form-gap) / 2);} } /*.article-styles {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2);}*/ .article-styles {display: flex; width: 100%; flex-direction: column; align-items: center; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--gap2);} .article-styles .wrapper {gap: var(--article-gap);} .article-styles h1 {margin-bottom: 0;} .article-styles .cols {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--article-gap);} .article-styles .box {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap); padding: min(2.2em, calc(1em + 4vw)); border-radius: var(--border-radius1); border: solid 0.18em var(--color1); box-sizing: border-box;} .article-styles .box .icon {display: block; width: 4em; fill: var(--color1);} .article-styles .box .icon .color2 {fill: var(--color2);} .article-styles .box .title {text-align: center; font-size: min(1.6rem, calc(1rem + 4vw)); margin: 0;} .article-styles .box .subtitle {text-align: center; font-size: min(1.15rem, calc(0.7rem + 4vw)); color: var(--color1b); font-weight: 400; margin-top: -1rem;} .article-styles .highlight {display: block; width: 100%; text-align: center; color: white; padding: 1.2em; background: var(--color1); border-radius: var(--border-radius1);} .article-styles :is(.list1, .list-num) {display: flex; width: 100%; flex-wrap: wrap;} .article-styles :is(.list1, .list-num) { & li {box-sizing: border-box; position: relative;} & li:not(:last-child) {margin-bottom: 0.6em;} & li li {font-size: 1em !important;} & li li:before {background: none; border: solid 0.1em var(--color2); box-sizing: border-box;} & li :is(ul, ol) {margin-block: 0.4em 0.8em;} } .article-styles .list1 { & li {padding-left: 1.55em;} & li:before {display: block; width: 0.42em; height: 0.42em; background: var(--color2); border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.5em; content: "";} } .article-styles .list-num {list-style: none; counter-reset: li; padding: 0; margin: 0; & li {padding-left: 2em;} & > li {counter-increment: li;} & > li:before {display: block; content: counter(li) "."; font-size: 1em; font-weight: 600; color: var(--color2); position: absolute; left: 0.65em; top: 0;} & > li li {padding-left: 1.55em;} & > li li:before {display: block; width: 0.42em; height: 0.42em; border: solid 0.1em var(--color2); border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.5em; content: "";} } @media screen and (min-width: 1081px) { .article-styles :is(ul.c3, ol.c3) {gap: 0 var(--article-gap);} .article-styles :is(ul.c3 > li, ol.c3 > li) {width: calc(33.33% - var(--article-gap) * 2 / 3);} .article-styles .cols.c2 > * {width: calc(50% - var(--article-gap) / 2);} .article-styles .cols.c3 > * {width: calc(33.33% - var(--article-gap) * 2 / 3);} .article-styles .cols.c4 > * {width: calc(25% - var(--article-gap) * 3 / 4);} } @media screen and (min-width: 769px) and (max-width: 1080px){ .article-styles .cols.c4 > * {width: calc(50% - var(--article-gap) / 2);} } @media screen and (min-width: 681px) and (max-width: 1080px){ .article-styles :is(ul.c2, ol.c2, ul.c3, ol.c3) {gap: 0 var(--article-gap);} .article-styles :is(ul.c2 > li, ol.c2 > li, ul.c3 > li, ol.c3 > li) {width: calc(50% - var(--article-gap) * 0.5);} } .article-styles .image {display: block; width: 100%; padding-top: 56%; position: relative; border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;} .article-styles .image > span {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .article-styles .image > span img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .article-styles .image:hover > span img {opacity: 0.9;} .article-styles :is(h2, h3) {margin-block: 0.5em -0.2em;} .article-styles :is(h2, h3, h4, p, li) {max-width: 100%; text-align: left;} .article-styles .embed {display: block; width: 100%; margin-top: calc(0.6 * var(--gap1)); border-radius: var(--border-radius);} .article-styles .embed iframe {display: block; width: 100%;} @media screen and (max-width: 640px) { .article-styles .gallery {width: calc(100% - 1.4rem); margin-inline: 0.7rem;} } .infographics {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.8rem var(--infographics-gap); --infographics-gap: 1.5em; margin-top: 1rem;} .infographics > div {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem;} .infographics > div svg {display: block; width: 4em; fill: var(--color2);} .infographics > div span {display: block; width: 100%; text-align: center; font-size: 1em; color: var(--color1); font-weight: 700; line-height: 1.3em;} .infographics.steps {margin-top: 0;} .infographics.steps .num {display: flex; width: 2.7em; height: 2.7em; justify-content: center; align-items: center; font-size: 1.5em; color: var(--color2); font-weight: 700; padding-top: 0.12em; border-radius: 100%; border: solid 0.15em var(--color2); box-sizing: border-box;} @media screen and (min-width: 1081px) { .infographics.i4 > div {width: calc(25% - var(--infographics-gap) * 3 / 4);} .infographics.i3 > div {width: calc(33.33% - var(--infographics-gap) * 2 / 3);} } @media screen and (min-width: 481px) and (max-width: 1080px){ .infographics > div {width: calc(50% - var(--infographics-gap) * 0.5);} } .buyback {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);} .buyback h2 {text-align: center;} .buyback .infographics {justify-content: center;} .buyback .infographics > div {width: 12em;} .img-info {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--gap1); font-size: 0.9em; background: var(--color1); padding: min(5rem, calc(1rem + 7vw)); box-sizing: border-box; overflow: hidden; border-radius: var(--border-radius1); position: relative;} .img-info:after {display: block; opacity: 0.3; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; inset: 0; z-index: 1; content: "";} .img-info :is(h2, p) {text-align: center; color: white; margin: 0; position: relative; z-index: 2;} .img-info.ii1:after {background-image: URL("images/img-info1.jpg");} .form {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--form-gap); --form-item-height: 2.8em; --form-gap: 0.3em; box-sizing: border-box; position: relative;} .form-item {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem; position: relative;} .form-item.width100 {width: 100%;} .form-item :is(input, textarea, .custom-select) {display: block; width: 100%; font-size: 0.8em; font-weight: 700; color: var(--color0); background: var(--color3); outline: none; border: solid 2px transparent; padding: 0 0.7em; border-radius: 0.25em; box-sizing: border-box; font-family: var(--font1); transition: .2s ease-in-out;} .form-item input {height: var(--form-item-height);} .form-item textarea {height: 12em; padding-block: 0.6em !important;} .form-item input::placeholder, .form-item textarea::placeholder {color: var(--color0b); font-weight: 400; opacity: 1;} .form-item input:focus, .form-item textarea:focus {border-color: var(--color1);} .form .hidden {display: none; width: 100%;} .form .hidden .form-item {width: 100% !important;} .custom-select {position: relative; height: var(--form-item-height);} .custom-select .sel {display: flex; width: 100%; height: calc(var(--form-item-height) - 2px); align-items: center; flex-wrap: wrap; font-size: 1em; color: var(--color0); box-sizing: border-box; cursor: pointer; position: relative; z-index: 2; transition: .2s ease-in-out;} .custom-select .sel:hover {color: var(--color0);} .custom-select .sel.true {color: var(--color0); font-weight: 700;} .custom-select .sel.false {color: var(--color0b); font-weight: 400;} .custom-select > svg {display: block; width: 0.6em; fill: var(--color2); position: absolute; right: 0.75em; top: calc(var(--form-item-height) / 2 - 0.35em); z-index: 1;} .custom-select .dropdown {display: none; width: calc(100% + 2px); background: white; box-shadow: 0 0 0.35em rgba(0,0,0,0.25); border-radius: 0.6em; overflow: hidden; box-sizing: border-box; margin-top: 0.2em; position: absolute; left: -1px; top: var(--form-item-height); z-index: 8;} .custom-select .dropdown .inner {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; gap: 0.6rem; --dropdown-padding: 1rem; overflow-y: auto;} .custom-select .inner ul {display: block; width: 100%;} .custom-select .inner ul li {display: flex; width: 100%; min-height: 2em; align-items: center; font-size: 0.95em; line-height: 1.1em; color: #666666; border-top: solid 1px rgba(0,0,0,0.1); padding: 0.65em 1.4em 0.65em 0.9em; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .custom-select .inner ul li:after {display: block; width: 0.4em; height: 0.6em; opacity: 0.5; position: absolute; right: 0.9em; top: calc(50% - 0.3em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 512'%3E%3Cpolygon points='-1.1,46.4 208.6,256 -1.1,465.6 45.3,512 301.3,256 45.3,0' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;} .custom-select .inner ul li:hover {color: var(--color0); background: rgba(0,0,0,0.04);} .custom-select .inner ul li:hover:after {opacity: 0.9;} /*.highlighted li:nth-child(-n+6) { color: #252525; font-weight:600; }*/ /*.custom-select .inner ul li:nth-child(-n+6)::before { display:block; width:3px; height:100%; min-height:1em; background-color:#666666; content: ""; margin-right:0.5em; }*/ .highlighted li[data-hodnota="skoda"], .highlighted li[data-hodnota="volkswagen"], .highlighted li[data-hodnota="seat"], .highlighted li[data-hodnota="ford"], .highlighted li[data-hodnota="opel"], .highlighted li[data-hodnota="renault"] { color: #252525; font-weight:600; } .attachments {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em;} .attachments li {display: block; width: 100%; text-align: left; font-size: 0.8em; color: #666666; font-weight: 700; padding: 0.5em 2.2em 0.5em 0.9em; box-sizing: border-box; position: relative;} .attachments li:not(:last-child) {border-bottom: solid 1px rgba(0,0,0,0.2);} .attachments li .remove {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; background: #999999; border-radius: 100%; border: none; position: absolute; right: 0.75em; top: 0.6em; cursor: pointer; transition: .2s ease-in-out;} .attachments li .remove:after {display: block; width: 100%; height: 100%; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='385.7,347.3 291.4,253 385.7,158.7 344.3,117.3 250,211.6 155.7,117.3 114.3,158.7 208.6,253 114.3,347.3 155.7,388.7 250,294.4 344.3,388.7' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";} .attachments li .remove:hover {background: var(--color2);} .form-item input[type="file"] {position: absolute; left: -9999px;} .form-item input[type="file"] + label {height: 2.6em; font-size: 0.7em; gap: 0.3em; padding: 0.6em 1em;} .form-item input[type="file"] + label span {font-size: 1.1em; font-weight: 700; color:white;} .form-item input[type="file"]:focus + label {outline-color: var(--color2);} .checkboxes {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.4em var(--checkboxes-gap); --checkboxes-gap: 0.4rem; margin-block: 0.5em 0.2em; box-sizing: border-box;} .checkboxes .separator {display: block; width: 100%; height: 1px; background: black; opacity: 0.2; margin-block: 0.5rem;} .checkboxes > *:last-child {margin-bottom: 0;} .checkboxes .chk1:checked + label {font-weight: 700;} .checkbox {width: 100%; font-size: 0.8em;} .checkbox label {height: auto;} .chk1:not(:checked), .chk1:checked {position: absolute; left: -9999px; background-position: left top;} .chk1:not(:checked) + label, .chk1:checked + label {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; padding-left: 1.45em; font-weight: 500; color: #666666; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;} .chk1:not(:checked) + label a, .chk1:checked + label a {color: var(--color0); text-decoration: underline;} .chk1:not(:checked) + label a:hover, .chk1:checked + label a:hover {color: var(--color2); text-decoration: none;} .chk1:not(:checked) + label:before, .chk1:checked + label:before {display: block; width: 1em; height: 1em; border-radius: 0.2em; position: absolute; left: 0; top: 0.07em; overflow: hidden; content: "";} .chk1:not(:checked) + label:before {background-color: #e5e5e5;} .chk1:checked + label:before {background: URL('images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color2);} .chk1:disabled + label, .chk1:disabled + label:before {opacity: 0.4;} .form-bottom {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.6em 1em; margin-top: 0.6em; box-sizing: border-box;} .form-bottom .button {font-size: 0.8em;} .form-bottom .more-less {display: block;} .form-bottom .more-less span {display: inline-block; font-size: 0.8em; color: #999999; font-weight: 500; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;} .form-bottom .more-less span:hover {color: #666666; text-decoration-color: transparent;} .form-bottom .more-less span.less {display: none;} .form.show .form-bottom .more-less span.more {display: none;} .form.show .form-bottom .more-less span.less {display: block;} @media screen and (min-width: 1081px) { .form-bottom {justify-content: space-between;} } @media screen and (max-width: 1080px) { .form-bottom {justify-content: center;} .form-bottom .button {min-width: 10em;} .form-bottom .more-less {width: 100%; text-align: center;} } .article-styles .form .form-item {font-size: 1.3em;} .article-styles .form {--form-item-height: 3.4em;} .article-styles .form-bottom {justify-content: center;} .article-styles .form-bottom .checkbox {width: auto;} .article-styles .form-bottom .button {font-size: 0.9em;} @media screen and (min-width: 1081px) { .divider {display: block; width: 100%; height: 1px; background: black; opacity: 0.2; margin-block: 0.8em;} .article-styles .form .width50 {width: calc(50% - var(--form-gap) * 0.5);} .article-styles .form .width33 {width: calc(33.33% - var(--form-gap) * 2 / 3);} .article-styles .form .width25 {width: calc(25% - var(--form-gap) * 3 / 4);} } @media screen and (max-width: 1080px) { .divider {display: none;} } @media screen and (min-width: 641px) and (max-width: 1080px){ .article-styles .form :is(.width50, .width33, .width25) {width: calc(50% - var(--form-gap) * 0.5);} } .financing h2 {text-align: center;} .financing .box {justify-content: center;} .financing .box .num {display: flex; width: 2.7em; height: 2.7em; justify-content: center; align-items: center; font-size: 1.5em; color: var(--color2); font-weight: 700; padding-top: 0.12em; border-radius: 100%; border: solid 0.15em var(--color2); box-sizing: border-box;} .financing .box :is(h3, p) {text-align: center;} .financing .box h3 {margin-top: 0;} .faq {display: flex; width: 100%; flex-wrap: wrap; gap: min(calc(1.7rem + 5vw), 2rem); --faq-padding: 1.2rem;} .faq > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) 0;} .faq > div h2 {position: relative; padding-inline: var(--faq-padding); margin-block: 0 0.4rem;} .faq-list {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.3em; margin-top: -1.8rem;} .faq-list article {display: block; width: 100%; background: var(--color3); padding-block: 1.2em 1em; border-radius: var(--border-radius1);} .faq-list :is(.title, p) {text-align: left;} .faq-list .title {font-size: 1.2rem; padding-inline: var(--faq-padding) 3.5rem; box-sizing: border-box; cursor: pointer; position: relative; margin: 0; top: -0.1em; transition: .15s ease-in-out;} .faq-list .title:hover {color: var(--color2);} .faq-list .title:after {display: block; width: 1.2em; height: 1.2em; font-size: 0.85em; font-weight: 500; position: absolute; right: 1rem; top: calc(50% - 0.65em); border-radius: 100%; padding-top: 0.1em; box-sizing: border-box; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='388,222.9 289.1,222.9 289.1,124 222.9,124 222.9,222.9 124,222.9 124,289.1 222.9,289.1 222.9,388 289.1,388 289.1,289.1 388,289.1' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center, var(--color2); content: ""; transition: .15s ease-in-out;} .faq-list .collapse {display: none; width: 100%; padding-top: 0.6rem; box-sizing: border-box;} .faq-list .collapse p {padding-inline: var(--faq-padding); box-sizing: border-box;} .faq-list article.sel .title:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='388,222.9 256,222.9 124,222.9 124,289.1 388,289.1' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .wndw .financing-form .form-item {font-size: 1.1em; --form-item-height: 3.2em;} .wndw .financing-form .form-bottom {justify-content: center;} .wndw .financing-form .form-bottom .checkbox {width: auto;} @media screen and (min-width: 769px) { .wndw .financing-form .form-item.width33 {width: calc(33.33% - var(--form-gap) * 2 / 3);} } .map {display: block; width: 100%; height: var(--map-height); --map-height: 20em; position: relative;} .map iframe {display: block; height: 100%; height: var(--map-height);} @media screen and (min-width: 1801px) { .map iframe {width: 1600px; position: absolute; left: calc(50% - 800px); border-radius: var(--border-radius1); overflow: hidden;} } @media screen and (max-width: 1800px) { .map iframe {width: 100vw; position: absolute; left: calc(50% - 50vw);} } .address {display: block; width: 100%; text-align: center; font-size: 0.9rem;} .contacts .box {gap: 0.1rem;} .contacts .box .icon {fill: var(--color2); margin-bottom: 0.3rem;} .contacts .box .photo {display: block; width: 6em; height: 6em; margin-bottom: 0.3em;} .contacts .box .photo img {display: block; width: 100%; height: 100%;} .contacts .box span {display: block; width: 100%; text-align: center; line-height: 1.3em;} .contacts .box .title {font-size: 1.35em; color: var(--color1); font-weight: 700;} .contacts .box .info {font-size: 0.9em; color: var(--color1); font-weight: 500; margin-top: -0.15rem;} .contacts .box span a {font-size: 0.9em; color: var(--color2); font-weight: 500; text-decoration: underline; transition: .2s ease-in-out;} .contacts .box span a:hover {text-decoration-color: transparent;} .contact-form {margin-top: 0.4rem;} .wndw {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(2rem, 5%) min(1rem, 5%); box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;} .wndw:before {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;} .wndw > .outer {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .wndw > div {width: 100%; max-width: 40em; max-height: calc(100vh - 4rem); background: white; position: relative; border-radius: var(--border-radius1); overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;} .wndw > div:before {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;} .wndw > div .overflow {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;} .wndw.show {left: 0;} .wndw.show:before {opacity: 1;} .wndw.show > div {top: 0;} .wndw.show.hide {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;} .wndw.show.hide:before {opacity: 0;} .wndw.show.hide > div {top: -5em; opacity: 0;} .wndw .close {display: block; width: 1.2em; height: 1.2em; font-size: 1em; cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 10002;} .wndw .close span {display: block; width: 100%; height: 3px; background: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .1s ease-in-out;} .wndw .close:hover span {background: #252525;} .wndw .close span:nth-child(1) {transform: rotate(45deg);} .wndw .close span:nth-child(2) {transform: rotate(-45deg);} .wndw .wndw-content {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; font-size: 1rem; padding: max(1.5rem, 7%); box-sizing: border-box;} .wndw .wndw-content :is(.title, p) {Display: block; width: 100%; text-align: center;} .wndw .wndw-content .title {font-size: 1.6em; font-weight: 700; box-sizing: border-box;} .wndw .wndw-content p {font-size: 1em; font-weight: 400; line-height: 1.3em;} .wndw .wndw-content .search {margin: 0;} .wndw:has(.search-box) {align-items: flex-start;} .wndw:has(.search-box) > div {max-height: none;} .wndw > div:has(.search-box) {background: none;} .wndw > div:has(.search-box):before {display: none;} .wndw > div:has(.search-box) .close:hover span {background: white;} @media screen and (max-width: 768px) { .wndw > div:has(.search-box) .close {right: 0; top: 0;} } .search-box {display: Flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.2em 0; position: relative;} .search-box input {display: block; width: 100%; font-size: 0.9em; color: var(--color0); font-weight: 500; background: white; border: solid 2px transparent; outline: none; padding: 1em 4em 1em 1em; border-radius: var(--border-radius1); box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;} .search-box input::placeholder {color: var(--color1c); font-weight: 500; opacity: 1;} .search-box .button {width: 2.2em; height: 2.2em; padding: 0.6em; position: absolute; right: 0.7em; top: calc(50% - 1.1em);} .search-box .button svg {width: 100%;} .search-box input:focus {border-color: var(--color2);} .search-box .whisperer {display: none; width: 100%; height: 200px; background: white; border-radius: var(--border-radius1); border: solid 1px #d9d9d9; box-sizing: border-box; position: relative; z-index: 10000;} .bt_addFile { eight: 2.6em; font-size: 0.7em; gap: 0.3em; padding: 0.6em 1em; } .custom-select input[type="text"] { position:absolute; left:-99999px; } .form-item .chyba { } #splatkyKalk { width: calc(100% - 30px); margin: 0 auto; padding: 15px; background: #fff; border-radius: var(--border-radius1); box-shadow: var(--box-shadow); } #splatkyKalk h2 { text-align: left; margin-bottom: 5px; } #splatkyKalk .popis { text-align: left; color: #666; font-size: 0.9em; margin-bottom: 2em; } #splatkyKalk .slider-section { margin-bottom: 1.5em; } #splatkyKalk .slider-labels { display: flex; justify-content: space-between; margin-bottom: 5px; margin-left: 92px; margin-right: 50px; } #splatkyKalk .slider-labels.labels-mesice { margin-right: 50px; } #splatkyKalk .slider-labels.labels-akontace { margin-right: 35px; margin-left:85px; } #splatkyKalk .slider-labels span { font-size: 0.85em; color: var(--color1b); text-align: center; flex: 1; } #splatkyKalk .slider-row { display: flex; align-items: center; gap: 15px; } #splatkyKalk .slider-title { width: 100px; font-size: 0.85em; color: #666; flex-shrink: 0; } #splatkyKalk .slider-row input[type="range"] { flex: 1; height: 8px; -webkit-appearance: none; background: var(--color1b); border-radius: 4px; outline: none; } #splatkyKalk .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #fff; border: 3px solid var(--color1b); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } #splatkyKalk .slider-row input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #fff; border: 3px solid var(--color1b); border-radius: 50%; cursor: pointer; } #splatkyKalk .slider-value { width: 55px; text-align: right; font-size: 1.4em; font-weight: 700; color: var(--color1); } #splatkyKalk .vysledky { display: flex; gap: 15px; margin: 2em 0; } #splatkyKalk .vysledek-box { flex: 1; background: var(--color3); border-radius: var(--border-radius1); padding: 1em 1.5em; text-align: center; font-size: 1em; color: #666; } #splatkyKalk .vysledek-box.zvyrazneni { border:1px solid #e30613b5; color: var(--color1); } #splatkyKalk .vysledek-cislo { font-size: 1.3em; font-weight: 700; color: var(--color1); margin-right: 5px; } #splatkyKalk .vysledek-box.zvyrazneni .vysledek-cislo { color:#e30613b5; } #splatkyKalk .vysledek-box.cena-box { padding: 0; background: none; } #splatkyKalk .vysledek-box.cena-box input { height: 100%; border: 1px solid #ddd; background: #fff; text-align: center; font-size: 1em; } #splatkyKalk .form-item.width33 { width: calc(33.33% - var(--form-gap) * 2 / 3); } @media (max-width: 768px) { #splatkyKalk .slider-labels { display: none; } #splatkyKalk .vysledky { flex-direction: column; } #splatkyKalk .form-item.width33 { width: 100%; } } /*.splatky-wrapper { margin: 20px 0; width:100%; } .btn-splatky { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; border: none; border-radius: 50px; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .btn-splatky:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(231, 76, 60, 0.5); background: linear-gradient(135deg, #c0392b 0%, #a93226 100%); } .btn-splatky:active { transform: translateY(-1px); } .btn-splatky svg { flex-shrink: 0; } .btn-splatky.active { border-radius: 25px 25px 0 0; } .splatky-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.3s ease; background: #2c3e6e; border-radius: 0 25px 25px 25px; } .splatky-content.open { max-height: 800px; padding: 30px; } .splatky-content .pn_formular { background: transparent; box-shadow: none; color: #fff; }*/ .btn-splatky { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; border: none; border-radius: 50px; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); text-transform: uppercase; letter-spacing: 1px; z-index: 1000; transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease; } .btn-splatky:hover { transform: translateY(-3px); box-shadow: 0 6px 25px rgba(231, 76, 60, 0.5); background: linear-gradient(135deg, #c0392b 0%, #a93226 100%); } .btn-splatky svg { flex-shrink: 0; } .btn-splatky.floating { position: fixed; bottom: 30px; left: 30px; animation: pulseGlow 2s ease-in-out infinite; } .btn-splatky.floating:hover { animation: none; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); } 50% { box-shadow: 0 4px 30px rgba(231, 76, 60, 0.7); } } .btn-splatky.flying-to-dock { position: fixed; animation: flyToDock 0.6s ease-out forwards; } .btn-splatky.docked { position: relative; animation: none; } .btn-splatky.docked.active { border-radius: 25px 25px 0 0; } .btn-splatky.docked:hover { transform: none; } .btn-splatky.flying-to-float { position: fixed; animation: flyToFloat 0.5s ease-in-out forwards; } .splatky-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.3s ease; background: #2c3e6e; border-radius: 0 25px 25px 25px; } .splatky-content.open { max-height: 1200px; padding: 30px; } .splatky-wrapper { margin: 30px 0; width:100%; } .splatky-wrapper.placeholder-active { min-height: 70px; }