.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; } /*------------------------------------------------------*/ html {display: block; width: 100%; font-size: min(20px, calc(13px + 1vw)); font-weight: 200; line-height: 1.5em; font-family: 'Antonio', sans-serif;} body {display: block; width: 100%; position: relative; overflow-x: hidden; overflow-y: auto;} body:not(.hp) {background: URL("images/decor-light.svg") no-repeat center top; background-size: var(--decor-background-size)} body.mce-content-body.content-article { margin:0px auto; } #katPopis h2 a, #katPopis h3 a{ color:var(--color0); text-decoration:underline; } .par strong { color:#717171; /*font-weight:400!important;*/ } body.fixed {overflow: hidden;} form {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;} .wrapper {display: flex; width: min(60rem, calc(100% - 2 * var(--wrapper-side))); --wrapper-side: 7vw; flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;} .wrapper.w2 {width: min(60rem, calc(100% - 2 * var(--wrapper-side)));} .wrapper.w3 {width: min(70rem, calc(100% - 2 * var(--wrapper-side)));} /* @media screen and (min-width: 769px) { html {font-size: 20px;} } @media screen and (max-width: 768px) { html {font-size: 18px;} } @media screen and (max-width: 440px) { html {font-size: 16px;} } */ :root { --color0: #121314; --color1: #348ab5; /* rgb(52,138,181) */ --color1b: #1974a2; --color2: #817777; --color2b: #766161; --color3: rgba(0,0,0,0.06); --color3b: rgba(0,0,0,0.1); --section-gap: min(calc(2rem + 5vw), 8rem); } @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%; height: var(--header-height); font-size: 1rem; background: URL("images/decor-light.svg") no-repeat center top, black; background-size: var(--decor-background-size); z-index: 1000; --nav-gap: 2.5em;} .header .wrapper {height: 100%; align-items: center;} .header .logo {display: block;} .header .logo img {display: block; width: 100%;} .header nav {display: block; box-sizing: border-box;} .header nav > ul {display: flex; align-items: center; gap: 1em var(--nav-gap); box-sizing: border-box;} .header nav > ul > li {display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; font-weight: 200;} .header nav > ul > li > a {display: flex; align-items: center; gap: 0.4em; box-sizing: border-box; transition: .15s ease-in-out;} .header nav > ul > li > a:hover {color: var(--color1); opacity: 1;} .header nav > ul > li > a[aria-current="page"] {color: var(--color1) !important; font-weight: 700; opacity: 1;} .header nav > ul > li > div {display: block; width: 100%; box-sizing: border-box;} .header nav > ul > li > div ul {display: flex; width: 100%; align-items: stretch !important; flex-wrap: wrap; gap: var(--submenu-gap);} .header nav > ul > li > div ul li {display: flex; width: calc(100% / var(--submenu-count));} .header nav > ul > li > div ul li a {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; position: relative;} .header nav > ul > li > div ul li a:after {display: block; background: black; opacity: 0; position: absolute; inset: 0; z-index: 1; content: ""; transition: .15s ease-in-out;} .header nav > ul > li > div ul li a img {display: block;} .header nav > ul > li > div ul li a span {display: flex; color: var(--color0); line-height: 1.3; font-weight: 600; position: relative; transition: .15s ease-in-out;} .header nav > ul > li > div ul li a:hover:after {opacity: 0.035;} .header nav > ul > li > div ul li a:hover span {color: var(--color1);} .header nav > ul > li.show > a {color: var(--color1);} .header nav > ul > li.show > div {left: 0; opacity: 1; margin-top: 0;} .header nav > ul > li.show.hide > div {opacity: 0; margin-top: 1em;} .header .header-contact {display: flex; height: 100%; align-items: center; font-size: 1rem; position: absolute; right: 0;} .header .header-contact .tel {display: block; padding-right: 0.8em; margin-right: 0.8em; border-right: solid 1px rgba(255,255,255,0.2);} .header .header-contact .tel span {display: flex; align-items: center; gap: 0.3em; font-size: 0.9em; margin-block: -0.2em;} .header .header-contact .tel span img {display: block; width: 0.95em; height: 0.9em; position: relative; top: 0.115em;} .header .header-contact a {display: flex; align-items: center; gap: 0.4rem; font-size: 1.1em; color: white; transition: .15s ease-in-out;} .header .header-contact a img {width: 1.05em; transition: .15s ease-in-out;} .header .header-contact a:hover {color: var(--color1);} .header .header-contact > a:hover img {filter: brightness(1.5);} @media screen and (min-width: 1081px) and (max-width: 1280px){ .header {--nav-gap: 1.8em;} .header nav > ul > li > div ul li a span {font-size: 0.7em;} } @media screen and (min-width: 1081px) { .header {--header-height: 8rem; --submenu-count: 6;} .header #navicon {display: none;} .header .logo {width: 5rem; margin-right: var(--nav-gap);} .header nav {height: 100%;} .header nav > ul > li > a {color: white;} .header nav > ul > li:has(ul) > a:after {display: block; width: 0.85em; height: 0.85em; position: relative; top: 0.11em; z-index: 1; content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M148.2,207.1c11.4-11.4,29.8-11.4,41.1,0l66.7,66.7l66.7-66.7c11.4-11.4,29.8-11.4,41.1,0 c11.4,11.4,11.4,29.8,0,41.1l-81.4,81.4c-14.6,14.6-38.2,14.6-52.8,0l-81.4-81.4C136.9,236.9,136.9,218.5,148.2,207.1z' width='1' height='1' fill='white' stroke='transparent' stroke-width='0' 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,256c0,141.4-114.6,256-256,256C114.6,512,0,397.4,0,256C0,114.6,114.6,0,256,0C397.4,0,512,114.6,512,256z' width='1' height='1' fill='rgb(52,138,181)' stroke='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: 100%;} .header nav > ul, .header nav > ul > li {height: 100%;} .header nav > ul > li {font-size: 1.1em;} .header nav > ul > li > div {position: absolute; left: -999999px; top: var(--header-height); opacity: 0; margin-top: 1em; transition: margin-top .3s ease-in-out, opacity .3s ease-in-out;} .header nav > ul > li > div:before {display: block; width: 100vw; height: 100%; background: white; position: absolute; left: calc(50% - 50vw); top: 0; content: ""; box-shadow: 0 1em 1em rgba(0,0,0,0.1);} .header nav > ul > li > div ul li a {padding: min(2vw, 1.5em);} .header nav > ul > li > div ul li a span {justify-content: center; align-items: center; text-align: center; font-size: 0.8em;} } @media screen and (max-width: 1080px) { .header {--header-height: 4rem;} .header #navicon {display: block; width: 1.2em; height: 15px; cursor: pointer; position: relative; z-index: 10002;} .header #navicon span {display: block; width: 100%; height: 2px; background: white; position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;} .header #navicon:hover span {background: var(--color2);} .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: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 .logo {width: 4rem; margin-left: 1rem;} .header nav {width: 100%; height: calc(100% - var(--header-height)); overflow: auto; opacity: 0; padding: var(--submenu-padding); position: fixed; left: -9999px; top: 0; background: #f3f3f3; z-index: -1; box-sizing: border-box; overflow-y: auto; transition: opacity 0.4s;} .header nav > ul {width: 50%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;} .header nav > ul > li {width: 100%; font-size: 1.5rem;} .header nav > ul > li.logo-desktop {display: none;} .header nav > ul > li > a {color: var(--color0);} .header nav > ul > li:has(ul) {height: 100%; overflow-y: auto; align-items: flex-start; align-content: flex-start; padding: var(--submenu-padding) calc(var(--submenu-padding) - 1rem) calc(var(--submenu-padding) - 1rem); background: white; box-sizing: border-box; position: absolute; right: 0; top: 0;} .header nav > ul > li:has(ul) > a {width: 100%; font-weight: 600;} .header nav > ul > li > div {width: 100%;} .header nav > ul > li > div ul li a {padding: 1rem;} .header nav > ul > li > div ul li a span {font-size: 0.6em;} .header.show nav {left: 0; top: var(--header-height); opacity: 1;} } @media screen and (min-width: 769px) and (max-width: 1080px){ .header {--submenu-count: 3; --submenu-padding: 4rem;} .header nav > ul > li:has(ul) {width: calc(100% - 15rem);} } @media screen and (min-width: 581px) and (max-width: 768px){ .header {--submenu-count: 2; --submenu-padding: 2.75rem;} .header nav > ul > li:has(ul) {width: calc(100% - 11rem);} } @media screen and (min-width: 581px) and (max-width: 1080px){ .header .header-contact .tel {display: flex; align-items: center; gap: 0.8em;} } @media screen and (min-width: 581px) { .header nav > ul > li:has(ul) > a {justify-content: center; text-align: center;} .header nav > ul > li > div ul li a {flex-direction: column;} .header nav > ul > li > div ul li a img {width: 100%;} .header nav > ul > li > div ul li a span {width: 100%; flex-grow: 2; justify-content: center; align-items: center; text-align: center; padding-top: 0.5em; margin-top: 0.8em;} .header nav > ul > li > div ul li a span:before {display: block; width: 4em; height: 1px; background: black; opacity: 0.2; position: absolute; left: calc(50% - 2em); top: 0; content: "";} } @media screen and (max-width: 580px) { .header {--submenu-count: 1; --submenu-padding: 2rem;} .header nav > ul > li:has(ul) {width: calc(100% - 11rem);} .header nav > ul > li:has(ul) a {padding-inline: 1rem;} .header nav > ul > li > div ul li a {align-items: center; gap: 0.5em;} .header nav > ul > li > div ul li a img {width: 4rem;} .header nav > ul > li > div ul li a span {width: 5.5rem;} } .hp .header {background: linear-gradient(to bottom, var(--color0) 0%, transparent 100%); position: absolute; left: 0; top: 0; background: none;} .footer {display: block; width: 100%; background: URL("images/decor-light.svg") no-repeat center center, black; background-size: var(--decor-background-size); padding: 4em 0 1.2em; margin-top: 1rem; position: relative;} .footer .wrapper {justify-content: center; gap: 2em; z-index: 5;} .footer .logo {display: block; width: 7em; position: relative; margin-top: -4.6rem;} .footer .logo img {display: block; width: 100%;} .footer .footer-contacts {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} .footer .footer-contacts li {display: flex; align-items: center; font-size: 1.3em; gap: 0.4em;} .footer .footer-contacts li img {display: block; width: 1em; height: auto; position: relative; top: 0.04em;} .footer .footer-contacts li a {display: flex; height: 100%; align-items: center; font-weight: 700; color: white; position: relative; top: -0.08em; transition: .15s ease-in-out;} .footer .footer-contacts li a:hover {color: var(--color1);} .footer .bottom {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.15em 0.8em;} .footer .bottom li {display: flex; gap: 0.3em; font-size: 0.8em; font-weight: 400; color: var(--color1); white-space: nowrap;} .footer .bottom li a {display: block; color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;} .footer .bottom li a:hover {color: var(--color1b); text-decoration-color: transparent;} @media screen and (min-width: 441px) { .footer .footer-contacts li:not(:last-child) {padding-right: 1em; margin-right: 1em; border-right: solid 1px white;} } @media screen and (max-width: 441px) { .footer .footer-contacts li {width: 100%; justify-content: center;} .footer .footer-contacts li:not(:last-child) {margin-bottom: 0.6em;} } .main {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; flex-grow: 1;} .main :is(h1, h2, h3) {display: block; width: 100%; color: var(--color0); font-weight: 600; line-height: 1.2em; margin-bottom: -0.3rem;} .main h1 {font-size: min(calc(1.8rem + 4vw), 4rem); margin-block: -1rem 1rem;} .main p, .main li {display: block; width: 100%; font-size: 1rem; line-height: 1.35em; color: #808080; 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(--color1); text-decoration-color: transparent;} .main strong {font-weight: 800;} .main em {font-style: italic;} @media screen and (min-width: 769px) { .main h2 {font-size: 2.2rem;} .main h3 {font-size: 1.6rem;} } @media screen and (max-width: 768px) { .main h2 {font-size: 1.7rem;} .main h3 {font-size: 1.4rem;} } .strong {color: var(--color0); font-size: 1.2em; font-family: 'Antonio', sans-serif;} .article {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.5rem;} .article p {text-align: center;} .article .article-cta {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-block: 0.8rem;} .section {display: flex; width: 100%; flex-wrap: wrap; gap: 1.8rem; overflow: hidden; box-sizing: border-box; padding: var(--section-gap) 0; position: relative;} .section.dark {background-color: var(--color0);} .section.dark :is(h2, p, li) {color: white;} .section.half::before {display: block; width: 100%; height: 50%; background: var(--color0); position: absolute; left: 0; bottom: -1px; content: "";} .section.half.reversed::before {bottom: auto; top: -1px;} .section.gray {background-color: var(--color3);} .section > .wrapper {gap: var(--gap1) 0;} .section.padding-top-0 {padding-top: 0;;} .section.padding-bottom-0 {padding-bottom: 0;} .section .content {display: flex; width: 100%; flex-wrap: wrap; gap: calc(1.5 * var(--section-content-gap)) var(--section-content-gap); --section-content-gap: 1.3em; position: relative; z-index: 5;} @media screen and (max-width: 1080px) { .section .content h2 {text-align: center;} } .page-content {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2rem 1rem; box-sizing: border-box;} .page-content :is(h1, h2, p) {text-align: center;} @media screen and (min-width: 1081px) { .page-content:not(.wide) {padding-inline: 12%;} } .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; gap: 0.5em; outline: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; line-height: 1em; position: relative; border: none; padding: 0.8em 1.7em 0.75em; box-sizing: border-box; white-space: nowrap; font-family: 'Antonio', sans-serif; transition: .15s ease-in-out;} .button img {display: block; width: 0.9em; height: 0.9em; position: relative; top: 0.04em;} .button svg {display: block; width: auto; height: 0.7em; fill: white; position: relative; top: 0.04em; transition: .15s ease-in-out;} .button.color1 {background: var(--color1); color: white !important; font-weight: 700; padding: 0.9em 1.7em;} .button.color1:hover {background: var(--color1b);} .button.color2 {background: var(--color2); color: white !important; font-weight: 700; padding: 0.9em 1.7em;} .button.color2:hover {background: var(--color2b);} .button.color3 {background: var(--color3); color: #666666; font-weight: 700; padding: 0.9em 1.7em;} .button.color3 svg {fill: #666666;} .button.color3:hover {background: var(--color3b); color: #252525 !important;} .button.color3:hover svg {fill: #252525;} .button.border1 {background: transparent; color: var(--color0); border: solid 2px var(--color1);} .button.border1 svg {fill: var(--color1);} .button.border1:hover {background: var(--color1b); border-color: var(--color1b); color: white;} .button.border1:hover svg {fill: white;} .button.border2 {background: transparent; color: var(--color0); border: solid 2px var(--color2);} .button.border2 svg {fill: var(--color2);} .button.border2:hover {background: var(--color2b); border-color: var(--color2b); color: white;} .button.border2:hover svg {fill: white;} .link {display: flex; align-items: center; gap: 0.5em; font-size: 1.15em; font-weight: 700; color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;} .link svg {display: block; width: 1em; fill: var(--color1); margin-block: 0.1em -0.1em} .link:hover {color: var(--color1b); text-decoration-color: transparent;} .filters {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.8rem;} .filters > a {display: block; text-align: center; font-size: 1em; font-weight: 700; color: var(--color0); line-height: 1em; padding: 0.35em 0.2em 0.5em; cursor: pointer; transition: .2s ease-in-out;} .filters > a:hover {color: var(--color1);} .filters > a.sel {color: white; background: var(--color1); padding-inline: 1em;} .pagination {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.8rem;} .pagination > a, .pagination > span {display: block; text-align: center; font-size: 1em; font-weight: 700; color: var(--color0); line-height: 1em; padding: 0.35em 0.2em 0.5em; cursor: pointer; transition: .2s ease-in-out;} .pagination > a:hover, .pagination > span:hover {color: var(--color1);} .pagination > a.sel, .pagination > span.sel {color: white; background: var(--color1); padding-inline: 1em;} .box {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; background: var(--color3); padding: min(1.5rem, calc(1rem + 10%)); box-sizing: border-box; border-radius: var(--border-radius);} .decor {background-image: URL("images/decor.svg"); background-repeat: no-repeat; background-position: center top; background-size: var(--decor-background-size)} .decor.light {background-image: URL("images/decor-light.svg");} .hero {display: flex; width: 100%; box-sizing: border-box; position: relative; overflow: hidden; background-color: #191a1b; overflow: visible;} .hero:after {display: block; width: 100%; height: 10em; background: linear-gradient(to bottom, black 0%, transparent 100%); position: absolute; left: 0; top: 0; z-index: 2; content: "";} .hero .wrapper {height: 100%; position: relative; z-index: 5;} .hero .text {display: block; position: relative; z-index: 5;} .hero .text h1 {font-size: min(calc(2rem + 4vw), 5.5rem); color: white; text-shadow: 0 0 0.3em rgba(0,0,0,0.5), 0 0 0.6em rgba(0,0,0,0.8);} .hero .text h1 span {color: var(--color2);} .hero .text p {color: white; font-size: 0.9rem; font-weight: 200; text-shadow: 0 0 0.5em rgba(0,0,0,0.9); margin-top: 1rem;} .hero .img {display: block; background: var(--color1); position: absolute; filter: brightness(1.1) saturate(110%); -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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M281.9,4.4c8.4,0,15.9,1.6,22.7,4.7c6.7,3.1,12.3,7.4,16.8,12.9c4.4,5.5,7.6,11.9,9.4,19.2 c1.9,7.3,2.1,15.2,0.7,23.6l-6.6,36.3c-1.4,8.4-4.3,16.2-8.7,23.4c-4.4,7.2-9.8,13.6-16.2,19c-6.4,5.5-13.5,9.8-21.3,12.9 c-7.8,3.1-15.9,4.7-24.3,4.7h-15.4c-8.1,0-12.9,4.1-14.3,12.2l-12.6,72.3h-48.2l12.6-72.3c1.4-8.4,4.4-16.2,8.9-23.6 c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.6-9.8,21.5-12.9c7.9-3.1,16.1-4.7,24.4-4.7H263c7.9,0,12.6-4,14-11.9l6.6-36.5 c1.4-8-2-11.9-10.1-11.9h-15.4c-3.7,0-6.6,0.8-8.6,2.3c-2,1.5-3.5,3.5-4.5,5.8c-1.1,2.4-1.7,5-2.1,8c-0.4,2.9-0.8,5.7-1.2,8.3 h-48.2l2.1-12.2c1.4-8.4,4.4-16.2,8.9-23.6c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.5-9.8,21.3-12.9c7.8-3.1,15.9-4.7,24.3-4.7 L281.9,4.4L281.9,4.4z M308,197.4l-8.4,48.2h-81.3l8.4-48.2H308z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M14.3,191.5C26,178.2,36.4,164,45.7,148.9c9.3-15.1,17.6-30.7,25-46.8s13.7-32.3,19.2-48.9 c5.5-16.5,10.3-32.7,14.5-48.5h48.2c-8.1,32.6-18.6,64.6-31.2,96.2c-12.7,31.5-29.5,61.7-50.4,90.6H14.3z M142.1,197.4l-8.4,48.2 H0l8.4-48.2H142.1z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M485.7,58.9c-11.6,13.3-22.1,27.5-31.4,42.6c-9.3,15.1-17.6,30.7-25,46.8c-7.3,16.1-13.7,32.3-19.2,48.9 c-5.5,16.5-10.3,32.7-14.5,48.5h-48.2c8.1-32.6,18.6-64.6,31.2-96.2c12.7-31.5,29.5-61.7,50.4-90.6H485.7z M357.9,52.9l8.4-48.2 H500l-8.4,48.2H357.9z'/%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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M281.9,4.4c8.4,0,15.9,1.6,22.7,4.7c6.7,3.1,12.3,7.4,16.8,12.9c4.4,5.5,7.6,11.9,9.4,19.2 c1.9,7.3,2.1,15.2,0.7,23.6l-6.6,36.3c-1.4,8.4-4.3,16.2-8.7,23.4c-4.4,7.2-9.8,13.6-16.2,19c-6.4,5.5-13.5,9.8-21.3,12.9 c-7.8,3.1-15.9,4.7-24.3,4.7h-15.4c-8.1,0-12.9,4.1-14.3,12.2l-12.6,72.3h-48.2l12.6-72.3c1.4-8.4,4.4-16.2,8.9-23.6 c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.6-9.8,21.5-12.9c7.9-3.1,16.1-4.7,24.4-4.7H263c7.9,0,12.6-4,14-11.9l6.6-36.5 c1.4-8-2-11.9-10.1-11.9h-15.4c-3.7,0-6.6,0.8-8.6,2.3c-2,1.5-3.5,3.5-4.5,5.8c-1.1,2.4-1.7,5-2.1,8c-0.4,2.9-0.8,5.7-1.2,8.3 h-48.2l2.1-12.2c1.4-8.4,4.4-16.2,8.9-23.6c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.5-9.8,21.3-12.9c7.8-3.1,15.9-4.7,24.3-4.7 L281.9,4.4L281.9,4.4z M308,197.4l-8.4,48.2h-81.3l8.4-48.2H308z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M14.3,191.5C26,178.2,36.4,164,45.7,148.9c9.3-15.1,17.6-30.7,25-46.8s13.7-32.3,19.2-48.9 c5.5-16.5,10.3-32.7,14.5-48.5h48.2c-8.1,32.6-18.6,64.6-31.2,96.2c-12.7,31.5-29.5,61.7-50.4,90.6H14.3z M142.1,197.4l-8.4,48.2 H0l8.4-48.2H142.1z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M485.7,58.9c-11.6,13.3-22.1,27.5-31.4,42.6c-9.3,15.1-17.6,30.7-25,46.8c-7.3,16.1-13.7,32.3-19.2,48.9 c-5.5,16.5-10.3,32.7-14.5,48.5h-48.2c8.1-32.6,18.6-64.6,31.2-96.2c12.7-31.5,29.5-61.7,50.4-90.6H485.7z M357.9,52.9l8.4-48.2 H500l-8.4,48.2H357.9z'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .hero .img img {display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.5); animation-name: hero; animation-duration: 10s; animation-iteration-count: infinite; opacity: 0; -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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M281.9,4.4c8.4,0,15.9,1.6,22.7,4.7c6.7,3.1,12.3,7.4,16.8,12.9c4.4,5.5,7.6,11.9,9.4,19.2 c1.9,7.3,2.1,15.2,0.7,23.6l-6.6,36.3c-1.4,8.4-4.3,16.2-8.7,23.4c-4.4,7.2-9.8,13.6-16.2,19c-6.4,5.5-13.5,9.8-21.3,12.9 c-7.8,3.1-15.9,4.7-24.3,4.7h-15.4c-8.1,0-12.9,4.1-14.3,12.2l-12.6,72.3h-48.2l12.6-72.3c1.4-8.4,4.4-16.2,8.9-23.6 c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.6-9.8,21.5-12.9c7.9-3.1,16.1-4.7,24.4-4.7H263c7.9,0,12.6-4,14-11.9l6.6-36.5 c1.4-8-2-11.9-10.1-11.9h-15.4c-3.7,0-6.6,0.8-8.6,2.3c-2,1.5-3.5,3.5-4.5,5.8c-1.1,2.4-1.7,5-2.1,8c-0.4,2.9-0.8,5.7-1.2,8.3 h-48.2l2.1-12.2c1.4-8.4,4.4-16.2,8.9-23.6c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.5-9.8,21.3-12.9c7.8-3.1,15.9-4.7,24.3-4.7 L281.9,4.4L281.9,4.4z M308,197.4l-8.4,48.2h-81.3l8.4-48.2H308z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M14.3,191.5C26,178.2,36.4,164,45.7,148.9c9.3-15.1,17.6-30.7,25-46.8s13.7-32.3,19.2-48.9 c5.5-16.5,10.3-32.7,14.5-48.5h48.2c-8.1,32.6-18.6,64.6-31.2,96.2c-12.7,31.5-29.5,61.7-50.4,90.6H14.3z M142.1,197.4l-8.4,48.2 H0l8.4-48.2H142.1z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M485.7,58.9c-11.6,13.3-22.1,27.5-31.4,42.6c-9.3,15.1-17.6,30.7-25,46.8c-7.3,16.1-13.7,32.3-19.2,48.9 c-5.5,16.5-10.3,32.7-14.5,48.5h-48.2c8.1-32.6,18.6-64.6,31.2-96.2c12.7-31.5,29.5-61.7,50.4-90.6H485.7z M357.9,52.9l8.4-48.2 H500l-8.4,48.2H357.9z'/%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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M281.9,4.4c8.4,0,15.9,1.6,22.7,4.7c6.7,3.1,12.3,7.4,16.8,12.9c4.4,5.5,7.6,11.9,9.4,19.2 c1.9,7.3,2.1,15.2,0.7,23.6l-6.6,36.3c-1.4,8.4-4.3,16.2-8.7,23.4c-4.4,7.2-9.8,13.6-16.2,19c-6.4,5.5-13.5,9.8-21.3,12.9 c-7.8,3.1-15.9,4.7-24.3,4.7h-15.4c-8.1,0-12.9,4.1-14.3,12.2l-12.6,72.3h-48.2l12.6-72.3c1.4-8.4,4.4-16.2,8.9-23.6 c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.6-9.8,21.5-12.9c7.9-3.1,16.1-4.7,24.4-4.7H263c7.9,0,12.6-4,14-11.9l6.6-36.5 c1.4-8-2-11.9-10.1-11.9h-15.4c-3.7,0-6.6,0.8-8.6,2.3c-2,1.5-3.5,3.5-4.5,5.8c-1.1,2.4-1.7,5-2.1,8c-0.4,2.9-0.8,5.7-1.2,8.3 h-48.2l2.1-12.2c1.4-8.4,4.4-16.2,8.9-23.6c4.5-7.3,10-13.7,16.4-19.2c6.4-5.5,13.5-9.8,21.3-12.9c7.8-3.1,15.9-4.7,24.3-4.7 L281.9,4.4L281.9,4.4z M308,197.4l-8.4,48.2h-81.3l8.4-48.2H308z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M14.3,191.5C26,178.2,36.4,164,45.7,148.9c9.3-15.1,17.6-30.7,25-46.8s13.7-32.3,19.2-48.9 c5.5-16.5,10.3-32.7,14.5-48.5h48.2c-8.1,32.6-18.6,64.6-31.2,96.2c-12.7,31.5-29.5,61.7-50.4,90.6H14.3z M142.1,197.4l-8.4,48.2 H0l8.4-48.2H142.1z'/%3E%3C/svg%3E%0A"), 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 500 250' style='enable-background:new 0 0 500 250;' xml:space='preserve'%3E%3Cpath d='M485.7,58.9c-11.6,13.3-22.1,27.5-31.4,42.6c-9.3,15.1-17.6,30.7-25,46.8c-7.3,16.1-13.7,32.3-19.2,48.9 c-5.5,16.5-10.3,32.7-14.5,48.5h-48.2c8.1-32.6,18.6-64.6,31.2-96.2c12.7-31.5,29.5-61.7,50.4-90.6H485.7z M357.9,52.9l8.4-48.2 H500l-8.4,48.2H357.9z'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .hero .img img:nth-child(n+2) {position: absolute; left: 0; top: 0;} .hero .img img:nth-child(2) {animation-delay: 2s;} .hero .img img:nth-child(3) {animation-delay: 4s;} .hero .img img:nth-child(4) {animation-delay: 6s;} .hero .img img:nth-child(5) {animation-delay: 8s;} @media screen and (min-width: 1081px) { .hero .text {width: 27em;} .hero .text p {position: relative; left: 0.2em;} .hero .img {width: 48rem; height: 24rem; right: -3rem; bottom: -7rem;} } @media screen and (max-width: 1080px) { .hero .text {width: 100%;} .hero .text :is(h1, p) {text-align: center;} .hero .img {width: 80vw; height: 40vw; left: calc(50% - 40vw); bottom: -6rem;} } @media screen and (min-width: 725px) { .hero {padding-block: 16em 4em;} } @media screen and (max-width: 724px) { .hero {padding-block: 16em 4em;} .hero .text h1 {max-width: 20rem; margin-inline: auto;} .hero .text p {max-width: 16rem; margin-inline: auto;} } @keyframes hero { 0% {opacity: 0;} 10% {opacity: 1;} 20% {opacity: 1;} 30% {opacity: 0;} 100% {opacity: 0;} } .hp-services {justify-content: space-between; margin-top: 3rem;} .hp-services > div {position: relative;} .hp-services > div .text {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem; padding: 1.3em; box-sizing: border-box; position: absolute; left: 1.3em; bottom: 2.2em; z-index: 5;} .hp-services > div .text:before {display: block; background-color: var(--color2); opacity: 0.85; position: absolute; inset: 0; content: ""; z-index: -1;} .hp-services > div .text h2 {text-align: left; color: white; font-size: 1.8rem;} .hp-services > div .text p {text-align: left; color: white; font-size: 0.85rem;} .hp-services > div .text .button {margin-bottom: -2.3rem;} .hp-services > div .img {display: block; width: 100%; overflow: hidden;} .hp-services > div .img img {display: block; width: 100%; height: 100%; object-fit: cover; -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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } @media screen and (min-width: 1081px) { .hp-services > div {width: calc(33.33% - 2 * var(--section-content-gap) / 3 - 1rem);} .hp-services > div .img {height: 25rem;} } @media screen and (max-width: 1080px) { .hp-services > div {width: 100%;} .hp-services > div .img {height: 20rem;} } @media screen and (max-width: 640px) { .hp-services > div {left: calc(0px - var(--wrapper-side));} .hp-services > div:nth-child(even) {left: auto; right: calc(0px - var(--wrapper-side));} .hp-services > div:nth-child(even) .text {left: auto; right: 1.3em;} } .swiper {display: block; width: 100%;} .swiper-button-prev, .swiper-button-next {display: flex; width: 3.2em; height: 2.2em; justify-content: center; align-items: center; font-size: 1em; background: black; padding: 0.4em; box-sizing: border-box; position: absolute; top: calc(50% - 1.1em); z-index: 5; margin: 0; cursor: pointer; z-index: 10; transition: .15s ease-in-out;} .swiper-button-prev {transform: skew(-10deg) rotate(180deg);} .swiper-button-next {transform: skew(-10deg);} .swiper-button-prev svg, .swiper-button-next svg {display: block; width: 50%; fill: white; transform: skew(10deg);} .swiper-button-prev:after, .swiper-button-next:after {display: none;} .swiper-button-prev:hover, .swiper-button-next:hover {background: var(--color1);} .swiper-button-disabled {opacity: 0.2 !important;} .carousel {display: block; width: 100%; position: relative; margin-inline: auto; --gradient-color: var(--color0);} .carousel .swiper {overflow: visible;} .carousel .swiper-slide {display: flex; height: auto; position: relative; opacity: 0.1; box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;} .carousel .swiper-slide > * {width: 100%;} .carousel .swiper-slide.swiper-slide-active {opacity: 1;} @media screen and (min-width: 1081px) { .carousel .swiper-button-prev {top: -3.7rem; left: auto; right: 3.4em;} .carousel .swiper-button-next {top: -3.7rem; left: auto; right: 0;} } @media screen and (max-width: 1080px) { .carousel {padding-bottom: 3.8rem;} .carousel .swiper-button-prev {font-size: 0.9rem; top: auto; bottom: 0; left: calc(50% - 3.3em);} .carousel .swiper-button-next {font-size: 0.9rem; top: auto; bottom: 0; right: calc(50% - 3.3em);} } @media screen and (min-width: 961px) { .carousel .swiper-slide.swiper-slide-next {opacity: 1;} } .swiper-slide .event-preview {width: calc(100% - 1.5rem);} @media screen and (max-width: 960px) { .swiper-slide .event-preview {width: 100%;} } .events {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2rem 1.6rem;} @media screen and (min-width: 961px) { .events .event-preview {width: calc(50% - 0.8rem);} } .event-preview {display: flex; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; gap: 0.4rem; padding: calc(3rem + var(--event-preview-padding)) var(--event-preview-padding) var(--event-preview-padding); --event-preview-padding: 1.8em; background: URL("images/decor-light.svg") no-repeat center center, black; background-size: cover; border-left: solid 3px transparent; box-sizing: border-box; position: relative;} .event-preview .tag {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; color: white; font-weight: 400; position: absolute; right: 1.2em; top: 1.2em;} .event-preview .tag svg {display: block; width: 1.1em; position: relative; top: 0.08em;} .event-preview.upcoming .tag svg {fill: var(--color1);} .event-preview.past .tag svg {fill: var(--color2);} .event-preview .date {order: 0; display: block; font-size: 0.9em; font-weight: 700; } .event-preview .title {order: 1; font-size: 1.5em; color: white; font-weight: 700; margin: 0;} .event-preview .title a {color: white; transition: .15s ease-in-out;} .event-preview p {order: 2; text-align: left; font-size: 0.85em; color: white;} .event-preview .button {order: 3; padding: 1em;} .event-preview.upcoming {border-color: var(--color1);} .event-preview.upcoming .date, .event-preview.upcoming .title a:hover {color: var(--color1);} .event-preview.past {border-color: var(--color2);} .event-preview.past .date, .event-preview.past .title a:hover {color: var(--color2);} @media screen and (min-width: 961px) { .event-preview {padding-right: calc(var(--event-preview-padding) + 2em);} .event-preview .button {padding: 1em; position: absolute; right: -0.5em; bottom: var(--event-preview-padding);} .event-preview .button span {display: none;} } @media screen and (max-width: 960px) { .event-preview .button {font-size: 0.75em; margin-top: 0.5rem;} } .hp .event-preview.past {background: none; padding-top: 9rem; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); border: none;} .hp .event-preview.past .date {color: white;} .hp .event-preview.past .img {display: block; position: absolute; inset: 0; z-index: -1;} .hp .event-preview.past .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .hp-showroom .item {display: flex; flex-wrap: wrap; position: relative;} .hp-showroom .item .img {display: block; position: absolute; inset: 0;} .hp-showroom .item .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .hp-showroom .item .img:nth-child(2) {opacity: 0; animation-name: image; animation-duration: 12s; animation-iteration-count: infinite;} .hp-showroom .item .text {display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 1rem; padding-block: var(--section-gap); background: rgba(0,0,0,0.8); box-sizing: border-box; position: absolute; inset: 0; z-index: 5;} .hp-showroom .item .text :is(h2, p) {color: white;} .hp-showroom .item .text h1 {margin-top: -0.3em;} .hp-showroom .item .text .logo {display: block;} .hp-showroom .item .text .logo img {display: block; width: 5rem;} @media screen and (min-width: 1801px) { .hp-showroom {background: var(--color3);} .hp-showroom .item .text {padding-inline: 3rem;} } @media screen and (max-width: 1800px) { .hp-showroom {padding: 0;} .hp-showroom .wrapper {width: 100%;} } @media screen and (min-width: 1281px) and (max-width: 1800px){ .hp-showroom .item .text {padding-inline: calc(1.5rem + 2vw) calc(1rem + 10vw);} } @media screen and (min-width: 1081px) and (max-width: 1280px){ .hp-showroom .item .text {padding-inline: 3rem;} } @media screen and (min-width: 1081px) { .hp-showroom .item {width: 33.33%; height: 36rem;} .hp-showroom .item .logo {position: absolute; bottom: var(--section-gap);} } @media screen and (max-width: 1080px) { .hp-showroom .item:nth-child(3) {order: 0; width: 100%;} .hp-showroom .item:nth-child(3) span {position: absolute; inset: 0;} .hp-showroom .item:nth-child(3) .text {justify-content: center; position: relative; inset: auto; padding-inline: var(--wrapper-side);} .hp-showroom .item:nth-child(3) .text > * {text-align: center;} .hp-showroom .item:nth-child(-n+2) {width: 50%; height: 70vw; order: 1;} .hp-showroom .item .text .logo {width: 100%; order: 5; margin-top: 3rem;} .hp-showroom .item .text .logo img {margin-inline: auto;} } .hp-showroom .item:nth-child(2) .img:nth-child(2) {animation-delay: 6s;} @keyframes image { 0% {opacity: 0;} 27% {opacity: 0;} 39% {opacity: 1;} 60% {opacity: 1;} 72% {opacity: 0;} 100% {opacity: 0;} } .ambassadors {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2rem;} .ambassadors h2 {text-align: center;} .ambassadors article {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;} .ambassadors article .img {display: block; width: 100%; order: 0; -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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .ambassadors article .img img {display: block; width: 100%;} .ambassadors article h3 {order: 1;} .ambassadors article p {order: 2;} @media screen and (min-width: 769px) { .ambassadors article {width: calc(50% - 1rem);} } .ig-widget .swiper-slide {opacity: 1;} .ig-widget .swiper-slide > div {width: 100%; padding-top: 100%; position:relative; } .ig-widget .swiper-slide > div > div { display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; overflow:hidden; } .ig-widget .swiper-slide > div > div > img { display:block; width:100%; height:100%; object-fit:cover; } .ig-widget .swiper-button-next, .ig-widget .swiper-button-prev {background: var(--color2);} .ig-widget .swiper-button-next:hover, .ig-widget .swiper-button-prev:hover {background: var(--color2b);} .ig-widget .follow {display: block; width: 100%;} .ig-widget .follow a {font-size: 1.4rem; color: var(--color1); font-weight: 700; transition: .15s ease-in-out;} .ig-widget .follow a:hover {color: var(--color1b);} @media screen and (max-width: 960px) { .ig-widget .follow {text-align: center;} } .cta .button {font-size: 1.15em;} .gray-box {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 1.5em; background: var(--color3); padding: 2em; box-sizing: border-box;} .infographics {display: flex; width: 100%; justify-content: space-evenly; align-items: stretch; flex-wrap: wrap; gap: 1.5em;} .infographics > div {display: flex; width: 11em; flex-direction: column; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4em;} .infographics > div > svg {display: block; width: 3em; fill: var(--color1);} .infographics > div .title {display: block; width: 100%; text-align: center; font-size: 1.2em; color: var(--color0); font-weight: 600;} .infographics > div .title a {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;} .infographics > div .title a:hover {text-decoration-color: transparent; opacity: 0.85;} .infographics > div .tag {display: block; width: 100%; text-align: center; font-size: 0.8em; color: var(--color1); font-weight: 600; margin-top: -0.3em;} .infographics > div .button {font-size: 0.75em; margin-top: 0.4em;} @media screen and (max-width: 540px) { .infographics {width: calc(100% + 2 * var(--wrapper-side)); margin-inline: calc(0px - var(--wrapper-side)); padding-inline: 1rem;} .infographics > div {width: 8.6em; font-size: 0.9rem;} .infographics > div .button {padding-inline: 1em;} } @media screen and (max-width: 540px) { .infographics.about-us-links > div {width: 5.6em;} } .infographics.prices-links {width: calc(100% + 2 * var(--wrapper-side)); margin-inline: calc(0px - var(--wrapper-side));} @media screen and (max-width: 540px) { .infographics.prices-links > div {width: 8.6em;} } .gallery-skewed {display: flex; width: 100%; max-width: 40em; justify-content: center; margin-inline: auto;} .gallery-skewed .img {display: block; width: 33.33%; padding-top: 33.33%; position: relative; overflow: hidden; -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 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpolygon points='512,0 130,0 0,512 382,512'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .gallery-skewed .img span {display: block; width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden;} .gallery-skewed .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .gallery-skewed .img:nth-child(1), .gallery-skewed .img:nth-child(3) {transform: scale(1.6);} .gallery-skewed .img:nth-child(2) {transform: scale(1.9); z-index: 2;} .carousel-skewed {display: flex; width: 100%; max-width: 40em; justify-content: center; margin-inline: auto;} .carousel-skewed .swiper {overflow: visible;} .carousel-skewed .swiper-slide {opacity: 0; transform: scale(1.6); transition: .3s ease-in-out;} .carousel-skewed .swiper-slide-active {opacity: 1; transform: scale(1.9); z-index: 5;} .carousel-skewed .swiper-slide-prev, .carousel-skewed .swiper-slide-next {opacity: 1;} .carousel-skewed .img {display: block; width: 100%; padding-top: 100%; position: relative; overflow: hidden; -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 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpolygon points='512,0 130,0 0,512 382,512'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .carousel-skewed .img span {display: block; width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden;} .carousel-skewed .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .carousel-skewed .swiper-button-next, .carousel-skewed .swiper-button-prev {background: var(--color1);} .carousel-skewed .swiper-button-next:hover, .carousel-skewed .swiper-button-prev:hover {background: var(--color1b);} .write-about-us {} @media screen and (min-width: 1081px) { .write-about-us .carousel .swiper-slide.swiper-slide-prev {opacity: 1;} } @media screen and (min-width: 641px) and (max-width: 1080px){ .write-about-us .carousel .swiper-slide.swiper-slide-next {opacity: 1;} } .article-preview {display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.4rem; position: relative;} .article-preview .img {display: block; width: 100%; padding-top: 75%; position: relative; overflow: hidden;} .article-preview .img span {display: block; width: 100%; height: 100%; position: absolute; inset: 0;} .article-preview .img span img {display: block; width: 100%; height: 100%; object-fit: cover; -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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .article-preview .info {display: flex; flex-wrap: wrap; gap: 0.4em; flex-grow: 2; padding: 1.5em; background: URL("images/decor-light.svg") no-repeat center center, black; background-size: cover; box-sizing: border-box;} .article-preview .info .title {color: white; font-weight: 700; margin: 0;} .article-preview .info .title a {color: white; transition: .15s ease-in-out;} .article-preview .info p {font-size: 0.85em; color: white;} .article-preview .info .link {font-size: 0.9em;} @media screen and (min-width: 1081px) { .article-preview .info .title {font-size: 1.3em;} } @media screen and (max-width: 1080px) { .article-preview .info .title {font-size: 1.5em;} } .article-styles {display: flex; width: 100%; gap: 1rem; flex-wrap: wrap;} .article-styles .image {display: block; 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 h2 {font-size: 1.6em; margin-block: 0.3rem -0.3rem;} .article-styles h3 {font-size: 1.25em; color: var(--color1); margin-block: 0.3rem -0.3rem;} .article-styles :is(h2, h3, p, li) {text-align: left;} .article-styles :is(p, li) {font-family: 'proxima-nova', sans-serif;} .article-styles ul li {padding-left: 1.55em; box-sizing: border-box; position: relative; margin-bottom: 0.15em;} .article-styles ul li:before {display: block; width: 0.3em; height: 0.3em; background: var(--color1); border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.52em; content: "";} .article-styles ul li:last-child {margin-bottom: 0;} .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: 1080px) { .article-styles :is(.image, .gallery, .embed) {width: 100%;} } @media screen and (max-width: 640px) { .article-styles .gallery {width: calc(100% - 1.4rem); margin-inline: 0.7rem;} } .article {display: flex; width: 100%; gap: 1rem; flex-wrap: wrap;} .article h1 {text-align: left; font-size: min(2.4rem, calc(1.2rem + 3vw));} .article .article-info {display: flex; width: 100%; align-items: center; order: -1; gap: 0.8em; margin-bottom: 0.6rem;} .article .article-info span {display: flex; align-items: center; font-size: 1.1em; font-weight: 600; gap: 0.4em;} .article .article-info span.date {color: var(--color1)} .article .article-info span.date svg {display: block; width: 1.2em; fill: var(--color1)} .article .article-info span.tag {color: var(--color0)} @media screen and (min-width: 1081px) { .article {padding-inline: calc(10% + 3rem); box-sizing: border-box;} .article-styles :is(.image, .gallery, .embed) {width: calc(100% + 2 * var(--squeeze)); margin-inline: calc(0px - var(--squeeze)); --squeeze: 4rem;} .article-styles .image {padding-top: 65%;} } .gallery {display: block; width: 100%; position: relative;} .gallery .swiper-container {display: block; width: 100%; overflow: hidden;} .gallery .swiper-slide {display: block; width: auto; height: auto; background: var(--color1); border-radius: var(--border-radius); overflow: hidden; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .gallery .swiper-slide a {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} .gallery .swiper-slide a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .gallery .swiper-slide:hover a img {opacity: 0.8;} .gallery .swiper-button-prev {top: calc(50% - 1.1em); left: -1em; border-radius: 0 var(--border-radius) var(--border-radius) 0;} .gallery .swiper-button-next {top: calc(50% - 1.2em); right: -1em; border-radius: var(--border-radius) 0 0 var(--border-radius);} .gallery.i1 .swiper-slide {padding-top: 56%;} .gallery.i2 .swiper-slide {padding-top: 33%;} @media screen and (max-width: 640px) { .gallery .swiper-button-prev, .gallery .swiper-button-next {font-size: 0.8rem;} } .products {display: flex; width: 100%; flex-wrap: wrap; gap: 1.8rem 1.2rem;} @media screen and (min-width: 1081px) { .products > * {width: calc(33.33% - 0.8rem);} } @media screen and (min-width: 641px) and (max-width: 1080px){ .products > * {width: calc(50% - 0.6rem);} } @media screen and (max-width: 640px) { .products > * {width: 100%;} } .product-preview {display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.4rem; position: relative;} .product-preview:has(.checkbox) {padding-bottom: 2.7em;} .product-preview .img {display: block; width: 100%; padding-top: 75%; position: relative; overflow: hidden;} .product-preview .img span {display: block; width: 100%; height: 100%; position: absolute; inset: 0;} .product-preview .img span img {display: block; width: 100%; height: 100%; object-fit: contain; -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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top; } .product-preview .info {display: flex; flex-wrap: wrap; gap: 0.4em;} .product-preview .info .title {text-align: left; color: var(--color0); font-weight: 700; margin: 0;} .product-preview .info .title a {color: #212121; transition: .15s ease-in-out;} .product-preview .info .title a:hover {color: var(--color1);} .product-preview .info p {text-align: left; margin-top:0.4em; font-size: 0.85em; color: #808080; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} .product-preview .info .button {font-size: 0.8em; margin-top: 0.2rem;} @media screen and (min-width: 1081px) { .product-preview .info .title {font-size: 1.3em;} } @media screen and (max-width: 1080px) { .product-preview .info .title {font-size: 1.5em;} } .product-detail {display: flex; width: 100%; flex-wrap: wrap; gap: 1.8rem; box-sizing: border-box;} .product-detail h1 {margin-bottom: 0;} @media screen and (min-width: 1081px) { .product-detail {padding-inline: var(--product-detail-padding); --product-detail-padding: 5rem;} .product-detail :is(.product-image, .achievements, .buy) {width: calc(100% + 2 * var(--product-detail-padding)); margin-inline: calc(0px - var(--product-detail-padding));} } .product-image {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5rem;} .product-image .cover {display: flex; position: relative;} /*.product-image .cover .swiper-slide {display: block; width: 100%; overflow: hidden; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .product-image .cover .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} */ .product-image .cover .swiper-slide { display: block; width: 100%; overflow: hidden; box-sizing: border-box; flex-shrink: 0; } .product-image .cover .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; } .product-image .cover .swiper-button-prev, .product-image .cover .swiper-button-next {background: var(--color1);} .product-image .cover .swiper-button-prev:hover, .product-image .cover .swiper-button-next:hover {background: var(--color1b);} .product-image .cover .swiper-button-prev {left: -1em;} .product-image .cover .swiper-button-next {right: -1em;} .product-image .thumbs {display: flex; width: 100%; height: auto; box-sizing: border-box; overflow: hidden; position: relative;} .product-image .thumbs > div {display: block; width: 100%; height: auto; overflow: hidden;} .product-image .thumbs .swiper-slide {display: block; position: relative; box-sizing: border-box; overflow: hidden; border: solid 2px transparent; cursor: pointer; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; transition: .15s ease-in-out;} .product-image .thumbs .swiper-slide:after {display: block; width: 100%; height: 100%; box-sizing: border-box; position: absolute; left: 0; top: 0; content: ""; opacity: 0; transition: .15s ease-in-out;} .product-image .thumbs .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0.4; transition: .25s ease-in-out;} .product-image .thumbs .swiper-slide:hover {opacity: 1;} .product-image .thumbs .swiper-slide:hover img {opacity: 1;} .product-image .thumbs .swiper-slide-thumb-active {border-color: var(--color1); box-shadow: 0 0 2em rgba(0,0,0,0.2);} .product-image .thumbs .swiper-slide-thumb-active img {opacity: 1;} .product-image .thumbs .swiper-slide-thumb-active::after {opacity: 1;} @media screen and (min-width: 1081px) { .product-image {height: 40vw;} .product-image .cover {width: calc(75% - 0.5rem); height: 100%;} .product-image .thumbs {width: 25%; height: 100%;} } @media screen and (min-width: 1401px) { .product-image {height: 30rem;} } @media screen and (max-width: 1080px) { .product-image :is(.cover, .thumbs) {width: 100%;} } .achievements li {display: flex; gap: 0.4em 0.35em;} .achievements li svg {display: block; fill: var(--color1);} .achievements li span {display: block; color: var(--color0); font-weight: 600;} @media screen and (min-width: 1081px) { .achievements li {width: auto; align-items: center;} .achievements li svg {width: 1.4em; position: relative; top: 0.08em;} } @media screen and (max-width: 1080px) { .achievements li {width: 12em; justify-content: center; align-items: flex-start; flex-wrap: wrap;} .achievements li svg {width: 2em;} .achievements li span {width: 100%; text-align: center;} } .facts {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem 2rem;} .facts > div {display: block;} .facts > div h2 {color: var(--color1);} .facts > div table {width: 100%; margin-top: 1rem;} .facts > div table td {font-size: 1em; color: var(--color0); padding: 0.5em 0.7em;} .facts > div table td:first-child {font-weight: 600; padding-left: 0;} .facts > div table td:last-child {padding-right: 0;} .facts > div table tr:not(:last-child) td {border-bottom: solid 1px rgba(0,0,0,0.2);} @media screen and (min-width: 1081px) { .facts > div {width: calc(50% - 1rem);} .facts > div h2 {font-size: 1.7rem;} } @media screen and (max-width: 1080px) { .facts > div {width: 100%;} } .buy {align-items: center;} .buy .price {display: block; font-size: 1.8em; color: var(--color0); font-weight: 600;} @media screen and (max-width: 640px) { .buy .price {width: 100%; text-align: center;} } .form {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; row-gap: 0.6rem; flex-wrap: wrap; box-sizing: border-box; position: relative;} .form .anchor {display: block; position: absolute; left: -9999px; top: -2rem;} .form h2 {text-align: center; margin-bottom: 0.6rem;} .form .form-item {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem; position: relative; --form-item-height: 3.2em;} .form .form-item.width100 {width: 100%;} .form .form-item label {display: block; width: 100%; font-size: 0.9em; color: rgba(0,0,0,0.5); font-weight: 700; padding: 0 1rem; box-sizing: border-box;} .form .form-item :is(input, textarea) {display: block; width: 100%; font-size: 0.9em; font-weight: 700; color: var(--color0); background: var(--color3); outline: none; border: solid 2px transparent; padding: 0 1.1em; border-radius: var(--border-radius); box-sizing: border-box; font-family: 'proxima-nova', sans-serif; transition: .2s ease-in-out;} .form .form-item input {height: var(--form-item-height);} .form .form-item textarea {height: 12em; padding-block: 0.6em !important;} .form .form-item input:focus, .form .form-item textarea:focus {border-color: var(--color1);} .form p {width: 100%; text-align: center; font-size: 0.9em; line-height: 1.3em; margin: 0.5rem auto 0; opacity: 0.8;} @media screen and (min-width: 581px) { .form {} .form .form-item {width: calc(50% - 0.3rem);} } @media screen and (max-width: 580px) { .form .form-item {width: 100%;} } .pricelist {display: block; width: 100%;} .pricelist table {width: 100%;} .pricelist table:not(:first-child) {border-top: solid 1px rgba(0,0,0,0.2); margin-top: 1.3rem;} .pricelist table td {color: var(--color0); line-height: 1.3em; vertical-align: top;} .pricelist table .level1 > td {font-weight: 600; padding-block: 0.5rem 0.9rem;} .pricelist table .level1 > td .title {display: block; width: 100%; text-align: left; color: var(--color0);} .pricelist table .level1 > td:last-child {width: 10rem; text-align: right; color: var(--color1);} .pricelist table .level1 > td:last-child .note {display: block; font-size: 0.5em; font-weight: 400; line-height: 1.3em; color: var(--color0); margin-top: 0.2rem;} .pricelist table .level1 > td:first-child .note {display: block; font-size: 0.4em; font-weight: 400; line-height: 1.3em; color: #808080; margin-top: 0.4rem; font-family: 'proxima-nova', sans-serif;} .pricelist table .level1:not(:first-child) > td {border-top: solid 1px rgba(0,0,0,0.2);} .pricelist table .level2 > td {padding-bottom: 0.2rem;} .pricelist table .level2 > td:last-child {width: 10rem; text-align: right; color: var(--color1); font-weight: 600;} .pricelist table ul {display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; margin-top: 0.6rem;} .pricelist table ul li {display: inline-block; padding-left: 1.55em; box-sizing: border-box; position: relative; margin-bottom: 0.15em; font-family: 'proxima-nova', sans-serif;} .pricelist table ul li:before {display: block; width: 0.3em; height: 0.3em; background: var(--color1); border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.52em; content: "";} .pricelist table ul li:last-child {margin-bottom: 0;} @media screen and (min-width: 641px) { .pricelist table .level1 > td {font-size: 1.75em;} .pricelist table ul li {font-size: 0.9rem;} } @media screen and (max-width: 640px) { .pricelist table .level1 > td {font-size: 1.5em;} .pricelist table ul li {font-size: 0.8rem;} } .quick-contacts {gap: 0.4rem;} .quick-contacts .button img {background: white; border: solid 0.15em white; border-radius: 100%;} .contact-img {display: block; width: 100%; max-width: 35rem;} .contact-img img {display: block; width: 100%;} .contacts {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.8rem; font-family: 'proxima-nova', sans-serif;} .contacts > div {display: block;} .contacts > div :is(h3, p) {color: var(--color0);;} .contacts .hours span {display: inline-block; width: 4.3em; font-weight: 700;} .contacts > div h3 {font-size: 1em; font-weight: 700; margin-bottom: 0.3em;} .contacts > div p {font-size: 1em;} .contacts > div p a {display: flex; align-items: center; gap: 0.3em;} .contacts > div p a img {display: block; width: 1em; height: auto;} @media screen and (min-width: 641px) { .contacts > div :is(h3, p) {text-align: left;} } @media screen and (max-width: 640px) { .contacts > div {width: 100%;} .contacts > div :is(h3, p) {text-align: center;} } .soc {margin-top: 1.5rem;} .soc a {display: flex; align-items: center; gap: 0.45em; font-size: 1.1rem; color: var(--color0); font-weight: 600; text-decoration: underline; transition: .15s ease-in-out;} .soc a img {display: block; width: 1.15em; position: relative; top: 0.1em;} .soc a:hover {color: var(--color1); text-decoration-color: transparent;} #map {display: block; width: 100%; height: 25rem;} .shop-sel .swiper-slide {opacity: 1;} .shop-sel .swiper-button-next, .shop-sel .swiper-button-prev {background: var(--color2);} .shop-sel .swiper-button-next:hover, .shop-sel .swiper-button-prev:hover {background: var(--color2b);} @media screen and (min-width: 1081px) { .shop-sel .content > p {padding-right: 9rem; margin-bottom: -0.6em;} } @media screen and (max-width: 1080px) { .shop-sel .content > p {text-align: center;} } .shop-sel .product-preview .info .title {font-size: 1.2em;} .product-preview .info .checkbox {display: block; width: 100%; position: absolute; left:0; bottom:0;} .product-preview .info .checkbox label {width: 100%; text-align: center; font-size: 0.9em; padding: 0.3em 0.8em 0.4em 1.3em; border: solid 0.07em rgba(0,0,0,0.2); margin-top: 0.5em;} .product-preview .info .checkbox label:before {left: calc(50% - 2.2em); top: 0.54em;} .product-preview .info .checkbox label:hover {border-color: rgba(0,0,0,0.6);} .product-preview .info .checkbox .chk1:checked + label {border-color: var(--color1); border-width: 0.1em;} .chk1:not(:checked), .chk1:checked {position: absolute; left: -9999px; background-position: left top;} .chk1:not(:checked) + label, .chk1:checked + label {display: block; min-height: 1.3em; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; padding-left: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;} .chk1:not(:checked) + label:before, .chk1:checked + label:before {display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; position: absolute; left: 0; top: 0.25em; 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(--color1);} .chk1:disabled + label, .chk1:disabled + label:before {opacity: 0.4;} .selected-list {display: block; width: 100%; padding: min(calc(0.6rem + 2vw), 1rem) min(calc(0.6rem + 2vw), 3rem); border: solid 0.08em rgba(0,0,0,0.15); box-sizing: border-box;} .selected-list button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .selected-list .title {display: block; width: 100%; text-align: center; font-size: 1.2em; color: var(--color1); font-weight: 600; margin-bottom: 0.6em;} .selected-list ul {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .selected-list ul li {display: block; width: 100%; text-align: left; font-size: 0.8em; color: var(--color0); font-weight: 600; padding: 0.5em 2.2em 0.6em 0; box-sizing: border-box; position: relative;} .selected-list ul li:not(:first-child) {border-top: solid 1px rgba(0,0,0,0.18);} .selected-list ul li:before {display: none !important;} .selected-list ul li .remove {display: flex; width: 1.1em; height: 1.1em; justify-content: center; align-items: center; background: #d4384e; border-radius: 100%; position: absolute; right: 0.75em; top: 0.9em; cursor: pointer; transition: .2s ease-in-out;} .selected-list ul 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='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";} .selected-list ul li .remove:hover {background: #8b1021;} @media screen and (min-width: 769px) { .selected-list ul li {width: 48%;} .selected-list ul li:nth-child(2) {border-top: none;} } .shop-sel .swiper-slide {opacity: 1;} .shop-sel .swiper-button-next, .shop-sel .swiper-button-prev {background: var(--color2);} .shop-sel .swiper-button-next:hover, .shop-sel .swiper-button-prev:hover {background: var(--color2b);} @media screen and (min-width: 1081px) { .shop-sel .content > p {padding-right: 9rem; margin-bottom: -0.6em;} } @media screen and (max-width: 1080px) { .shop-sel .content > p {text-align: center;} } .shop-sel .product-preview .info .title {font-size: 1.2em;} .product-preview:has(.checkbox) {padding-bottom: 2.7em;} .product-preview .info .checkbox {display: block; width: 100%; position: absolute; left: 0; bottom: 0;} .product-preview .info .checkbox label {width: 100%; text-align: center; font-size: 0.9em; padding: 0.3em 0.8em 0.4em 1.3em; border: solid 0.07em rgba(0,0,0,0.2); margin-top: 0.5em;} .product-preview .info .checkbox label:before {left: calc(50% - 2.2em); top: 0.54em;} .product-preview .info .checkbox label:hover {border-color: rgba(0,0,0,0.6);} .product-preview .info .checkbox .chk1:checked + label {border-color: var(--color1); border-width: 0.1em;} .chk1:not(:checked), .chk1:checked {position: absolute; left: -9999px; background-position: left top;} .chk1:not(:checked) + label, .chk1:checked + label {display: block; min-height: 1.3em; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; padding-left: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;} .chk1:not(:checked) + label:before, .chk1:checked + label:before {display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; position: absolute; left: 0; top: 0.25em; 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(--color1);} .chk1:disabled + label, .chk1:disabled + label:before {opacity: 0.4;} .selected-list {display: block; width: 100%; padding: min(calc(0.6rem + 2vw), 1rem) min(calc(0.6rem + 2vw), 3rem); border: solid 0.08em rgba(0,0,0,0.15); box-sizing: border-box;} .selected-list button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .selected-list .title {display: block; width: 100%; text-align: center; font-size: 1.2em; color: var(--color1); font-weight: 600; margin-bottom: 0.6em;} .selected-list ul {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .selected-list ul li {display: block; width: 100%; text-align: left; font-size: 0.8em; color: var(--color0); font-weight: 600; padding: 0.5em 2.2em 0.6em 0; box-sizing: border-box; position: relative;} .selected-list ul li:not(:first-child) {border-top: solid 1px rgba(0,0,0,0.18);} .selected-list ul li:before {display: none !important;} .selected-list ul li .remove {display: flex; width: 1.1em; height: 1.1em; justify-content: center; align-items: center; background: #d4384e; border-radius: 100%; position: absolute; right: 0.75em; top: 0.9em; cursor: pointer; transition: .2s ease-in-out;} .selected-list ul 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='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";} .selected-list ul li .remove:hover {background: #8b1021;} @media screen and (min-width: 769px) { .selected-list ul li {width: 48%;} .selected-list ul li:nth-child(2) {border-top: none;} } button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .skewed-corner {position: relative; border: solid 0.1em var(--color3b); box-sizing: border-box; clip-path: polygon(1.2em 0, 100% 0, 100% 100%, 0 100%, 0 3em); transition: .15s ease-in-out;} .skewed-corner:before {display: block; width: 0.14em; height: 3.35em; background: var(--color3b); position: absolute; left: -0.2em; top: -0.32em; transform: rotate(22.2deg); transform-origin: left bottom; content: ""; transition: .15s ease-in-out;} .level {display: flex !important; flex-direction: column; align-items: flex-end; font-size: 0.75em; font-weight: 700; line-height: 1.45; margin-top: 0.8em;} .product-preview .level { color:#717171; } .level svg {display: block; width: 4.5em; height: auto; fill: var(--color1); stroke: var(--color1); stroke-width: 25px; margin: 0 0 0.3em 0.1em;} .level svg path.sel ~ path {fill: none;} .content-article, .content-article .hidden > div {display: flex; width: 100%; max-width: 48em; justify-content: center; flex-wrap: wrap; gap: 0.6em;} .content-article {margin-top: -1.6em;} .content-article .hidden {display: none; width: 100%;} .content-article .show-more {display: block; font-size: 0.9em; color: var(--color1); font-weight: 700; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;} .content-article .show-more:hover {text-decoration-color: transparent; color: var(--color1b);} .content-article .show-more span:nth-child(2) {display: none;} .content-article.show .show-more span:nth-child(1) {display: none;} .content-article.show .show-more span:nth-child(2) {display: block;} .shop {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;} .shop > * {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em;} .shop .show-filters {width: 100%; font-size: 0.9em !important; font-weight: 700;} .shop .show-filters img {display: block; width: 1em; height: auto; position: relative; top: 0.1em;} .shop-filters {display: block; width: 100%;} .shop-filters-inner {display: flex; width: 100%; flex-direction: column; align-items: center; padding: 1.7em; box-sizing: border-box;} .shop-filters-inner h2 {text-align: left; font-size: 1.4em; margin-block: 0 0.8em;} .shop-filters .button {width: 100%; font-size: 0.9em; padding-block: 0.5em 0.65em; margin-top: 1.2em;} .shop-filters .reset {display: block; font-size: 0.8em; color: var(--color2); text-decoration: underline; margin-top: 0.6em; transition: .15s ease-in-out;} .shop-filters .reset:hover {color: var(--color1); text-decoration-color: transparent;} #bt_zrusitFiltry { margin-top:1rem; } @media screen and (min-width: 1081px) { .shop .show-filters {display: none;} #bt_potvrditFiltry {display:none;} .shop-filters-inner {background: rgba(255,255,255,0.6);} } @media screen and (max-width: 1080px) { .shop .show-filters {margin-top: -0.5em;} .shop-filters-inner {border: none; padding: 0; clip-path: none;} .shop-filters-inner:before {display: none;} } .shop-filter {display: block; width: 100%; box-sizing: border-box;} .shop-filter:not(:first-of-type) {padding-top: 0.6em; margin-top: 0.75em; border-top: solid 0.1em var(--color3b);} .shop-filter .dropdown {display: block; width: 100%;} .shop-filter .dropdown .trigger {display: block; width: 100; font-size: 1.1em; color: var(--color1); font-weight: 700; line-height: 1.3; padding-right: 1.4em; position: relative; box-sizing: border-box; transition: .15s ease-in-out;} .shop-filter .dropdown:not(.show-always) .trigger:after {display: block; width: 0.6em; height: 100%; background: url("images/chevron-down-color1.svg") no-repeat center center; background-size: 100% auto; position: absolute; right: 0; top: 0.05em; content: ""; transition: .35s ease-in-out;} .shop-filter .dropdown:not(.show-always) .trigger:hover {color: var(--color0); cursor: pointer;} .shop-filter .dropdown .options {display: none; width: 100%; padding-top: 0.3em; box-sizing: border-box;} .shop-filter .dropdown .options .checkbox {display: block; width: 100%; margin-top: 0.35em; padding-right: 2em; position: relative; box-sizing: border-box;} .shop-filter .dropdown .options .amount {display: flex; height: 100%; justify-content: flex-end; align-items: center; font-size: 0.7em; color: var(--color1); font-weight: 700; position: absolute; right: 0; top: 0;} .shop-filter .dropdown .options .chk1:checked + label {font-weight: 700;} .shop-filter .dropdown.show-always .options {display: block !important;} .shop-filter .dropdown.show .trigger:after {transform: rotateX(180deg);} .shop-filter .price-range {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4em 0;} .shop-filter .price-range .price-slider {display: block; width: 100%;} .shop-filter .price-range #slider-range {display: block; width: 100%; height: 0.4em; background: var(--color3b); border: none; margin-block: 0.5em;} .shop-filter .price-range .ui-slider-range {background: var(--color1);} .shop-filter .price-range .ui-slider-handle {display: block; width: 0.8em; height: 0.8em; background: var(--color1); border: none; border-radius: 0; top: -0.2em; margin-left: -0.4em;} .shop-filter .price-range .form-item {display: block; width: calc(50% - 0.6em); position: relative;} .shop-filter .price-range .form-item input {display: block; width: 100%; font-size: 0.8em; font-weight: 700; color: var(--color0); background: var(--color3); outline: solid 0.1em transparent; border: solid 0.12em transparent; padding: 0.3em 1.6em 0.35em 0.5em; box-sizing: border-box; font-family: 'Antonio', sans-serif; transition: .2s ease-in-out;} .shop-filter .price-range .form-item input:focus {outline-color: var(--color1);} .shop-filter .price-range .form-item:before {display: flex; height: 100%; align-items: flex-end; text-align: right; font-size: 0.8em; color: var(--color0); font-weight: 700; position: absolute; right: 0.5em; top: -0.15em; z-index: 2; content: "Kč";} .shop .items-topbar {display: flex; width: 100%; align-items: center;} .shop .items-topbar .ordering {display: flex; width: 100%; align-items: center; gap: 0.4em min(0.85em, calc(0.2em + 2vw)); font-size: min(1em, calc(0.5em + 2vw)); margin-block: -0.15rem;} .shop .items-topbar .ordering span {display: block; font-size: 1em; color: var(--color2); font-weight: 400; cursor: pointer; padding: 0.5rem 0; border-top: solid 0.15rem transparent; border-bottom: solid 0.15rem transparent; transition: .15s ease-in-out;} .shop .items-topbar .ordering span:hover {color: var(--color1);} .shop .items-topbar .ordering span.sel {color: var(--color1); font-weight: 700;} @media screen and (min-width: 1081px) { .shop .items-topbar {border-top: solid 0.15rem var(--color3b);} .shop .items-topbar .ordering span.sel {border-top-color: var(--color1);} } @media screen and (max-width: 1080px) { .shop .items-topbar {border-bottom: solid 0.15rem var(--color3b); margin-block: -0.5em 0.5em;} .shop .items-topbar .ordering span.sel {border-bottom-color: var(--color1);} } .shop .pagination {margin-top: 1em;} @media screen and (min-width: 1081px) { .section:has(.shop) .wrapper {width: min(78rem, calc(100% - var(--wrapper-side)));} .shop aside {width: 14em;} .shop .items {width: calc(100% - 15.2em);} } @media screen and (max-width: 1080px) { .shop .items-topbar .ordering {width: 100%; justify-content: center;} } .shop-items {gap: 1.8rem 0.9rem;} .shop-items .product-preview .info {justify-content: space-between; column-gap: 0;} .shop-items .product-preview .info > div {display: flex; flex-direction: column;} .shop-items .product-preview .info .left {width: calc(100% - 5rem); font-size: 0.95em;} .shop-items .product-preview .info .title {margin-bottom: 0.1em;} .shop-items .product-preview .info .prices {width: 5rem; align-items: flex-end;} .shop-items .product-preview .info .prices span {display: block; text-align: right; line-height: 1.3;} .shop-items .product-preview .info .price-title {font-size: 0.75em; font-weight: 700; margin-top: 0.25em; } .shop-items .product-preview .info .price-title:first-child { color:#717171; } .shop-items .product-preview .info .price-not {color: #717171; text-decoration: line-through; margin-bottom: 0.15em;} .shop-items .product-preview .info .price {font-size: 1em; color: var(--color1); font-weight: 700;} @media screen and (min-width: 1281px) { .shop-items .products > * {width: calc(33.33% - 0.6rem);} } @media screen and (min-width: 641px) and (max-width: 1280px){ .shop-items .products > * {width: calc(50% - 0.45rem);} } .product-detail:has(.shop-detail-hero) {padding: 0;} .shop-detail-hero {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.5em 0;} .shop-detail-hero > div {width: 100%;} .shop-detail-hero .product-image {height: auto; gap: 0.4rem 0 !important; margin: 0 !important;} .shop-detail-hero .product-image .cover {width: 100%; height: auto;} .shop-detail-hero .product-image .cover .swiper {-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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: left top; 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 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cpolygon points='41.5,0.5 0.5,124.5 0.5,800.5 800.5,800.5 800.5,0.5'/%3E%3C/svg%3E%0A"); mask-size: cover; mask-repeat: no-repeat; mask-position: left top;} .shop-detail-hero .product-image .thumbs {width: calc(100% + 0.4rem); height: auto; margin-inline: -0.2rem;} .shop-detail-hero .product-image .thumbs .swiper-slide {padding: 0.2rem; box-sizing: border-box; border: none;} .shop-detail-hero .product-image .thumbs .swiper-slide:after {width: auto; height: auto; inset: 0.2rem;} .shop-detail-hero .product-image .thumbs .swiper-slide-thumb-active {box-shadow: none;} .shop-detail-hero .product-image .thumbs .swiper-slide-thumb-active:after {border: solid 0.2em var(--color1);} .shop-detail-hero .right {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em 1em;} .shop-detail-hero .right .dostupnost {display: block; width:100%;} .shop-detail-hero h1 {font-size: min(3.2em, calc(1em + 5vw)); margin-bottom: -0.3em;} .shop-detail-hero h2 {font-size: min(2.2em, calc(1em + 5vw)); margin-top:0.5em; margin-bottom: 0.2em; color:var(--color1);} .shop-detail-hero .level {flex-direction: row; align-items: flex-end; gap: 0 0.4em; font-size: 1.1em; } .shop-detail-hero .level svg {width: 2.6em; order: 1; margin-bottom: 0.2em;} .shop-detail-hero .add-to-compare {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; font-weight: 500; background: rgba(255,255,255,0.6); padding: 0 0 0.06em 0.9em; border-left: solid 0.1em var(--color2); box-sizing: border-box; cursor: pointer; margin-top: 1em;} .shop-detail-hero .add-to-compare img {display: block; width: 1.15em; position: relative; top: 0.05em;} .shop-detail-hero .add-to-compare:hover {color: var(--color1);} /*.shop-detail-hero .add-to-compare:not(:is(.added)) span:last-of-type, .shop-detail-hero .add-to-compare.added span:first-of-type {display: none;}*/ .shop-detail-hero .link {font-size: 0.8em;} .shop-detail-hero .prices {display: flex; width: 100%; align-items: center; gap: 1em 1.4em; flex-wrap: wrap; margin-block: 0.5em;} .shop-detail-hero .prices .price-type {display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box;} .shop-detail-hero .prices .price-type:last-child{padding: 0.8em 1.4em; border: solid 0.09em var(--color0);} .shop-detail-hero .prices .price-type span {display: block; font-weight: 700; line-height: 1.3;} .shop-detail-hero .prices .price-title {font-size: 0.9em; margin-bottom: -0.1em;} .shop-detail-hero .prices .price {font-size: min(2em, calc(0.7em + 5vw)); color: var(--color1);} .shop-detail-hero .prices .price-no-tax {font-size: 0.8em; color: var(--color1); font-weight: 400;} .shop-detail-hero .prices .price-no-tax:after {display: inline-block; margin-left: 0.15em; content: "bez DPH"} .shop-detail-hero .prices .price-not {font-size: 1.3em; color: var(--color2); text-decoration: line-through;} .shop-detail-filters {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 1.5em;} .shop-detail-filters > div {display: flex; width:100%; flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 0.6em;} .shop-detail-filters .filter-title {display: block; font-size: 1.35em; font-weight: 700;} .shop-detail-filters .shop-detail-filter {display: flex; flex-wrap: wrap; gap: 0.25em;} .shop-detail-filters .color-sel {gap: 0.5em;} .shop-detail-filters .color-sel a {display: block; width: 1.7em; height: 1.7em; border-radius: 100%; box-sizing: border-box; position: relative; cursor: transition: .15s ease-in-out;} .shop-detail-filters .color-sel a:after {display: block; position: absolute; inset: -0.21em; z-index: 2; border-radius: 100%; border: solid 0.11em var(--color0); opacity: 0; content: ""; transition: .15s ease-in-out;} .shop-detail-filters .color-sel a.sel:after {opacity: 1;} .shop-detail-filters .color-sel a.red {background: #dc344a;} .shop-detail-filters .color-sel a.green {background: rgb(5, 143, 5);} .shop-detail-filters .color-sel a.blue {background: rgb(20, 57, 219);} .shop-detail-filters .color-sel a.black {background: #333333;} .shop-detail-filters .color-sel a.white {background: white; border: solid 0.1em rgba(0,0,0,0.1);} .shop-detail-filters .color-sel a.yellow {background: rgb(247, 227, 3);} .shop-detail-filters .color-sel a.pink {background: rgb(229, 128, 178);} .shop-detail-filters .color-sel a.cyan {background: rgb(6, 230, 230);} .shop-detail-filters .color-sel a.brown {background: rgb(119, 44, 12)} .shop-detail-filters .color-sel a.orange {background: rgb(240, 128, 7);} .shop-detail-filters .color-sel a.purple {background: purple;} .shop-detail-filters .color-sel:not(.disabled) a:hover {cursor: pointer;} .shop-detail-filters .color-sel:not(.disabled) a:hover:after {opacity: 0.25;} .shop-detail-filters .size a {display: block; min-width: 3em; text-align: center; color:#000; font-size: 0.75em; font-weight: 700; background: var(--color3b); padding: 0.1em 0.5em 0.2em; border: solid 0.12em transparent; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .shop-detail-filters .size a:hover {border-color: var(--color1);} .shop-detail-filters .size a.sel {border-color: var(--color1); background: var(--color1); color: white;} @media screen and (min-width: 1081px) { .shop-detail-hero > div {width: 47% !important;} } @media screen and (max-width: 1080px) { .shop-detail-hero .prices {width: calc(100% + 2 * var(--wrapper-side)); margin-inline: calc(-1 * var(--wrapper-side)); background: var(--color3b); padding: 1.4em var(--wrapper-side); box-sizing: border-box;} } .shop-detail-types {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;} .shop-detail-types h2 {color: var(--color1); margin-bottom: 0.5em;} .shop-detail-types .type {display: flex; width: calc(100% + 2rem); margin-inline: -1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; position: relative; padding: 1rem; box-sizing: border-box;} .shop-detail-types .type .img {display: block; width: 7rem; aspect-ratio: 3/2; font-size: 0.6em;} .shop-detail-types .type .img img {display: block; width: 100%; height: 100%; object-fit: contain;} .shop-detail-types .type .info {display: block; width: calc(100% - 24rem);} .shop-detail-types .type .info .title {display: block; font-size: 1.3em; color: var(--color0); font-weight: 700;} .shop-detail-types .type .info .descr {display: block; font-size: 1em; color: var(--color2);} .shop-detail-types .type .price {display: block; width: 5.5rem; text-align: right; font-size: 1.2em; color: var(--color1); font-weight: 700;} .shop-detail-types .type .button {font-size: 0.8em;} .shop-detail-types .type:hover {border-color: var(--color1);} .shop-detail-types .btns > a:first-child { margin-bottom:0.1rem; } .shop-detail-types .type:hover:before {background: var(--color1);} @media screen and (max-width: 768px) { .shop-detail-types .btns { width:100%; } .shop-detail-types .type .img {width: 6rem;} .shop-detail-types .type .info {width: calc(100% - 7rem); font-size: 0.9em;} .shop-detail-types .type .price {width: calc(100% - 9rem);} } .parameters {width: 100%;} .parameters h2 {color: var(--color1); margin-bottom: 0.5em;} .parameters > div {display: block; width: 100%; overflow: hidden;} .parameters ul {display: block; width: 100%; margin-top: -0.8em;} .parameters ul li {display: flex; font-size:0.9rem; width: 100%; color: var(--color0); padding-top: 0.5em; margin-top: 0.6em; border-top: solid 0.1em var(--color3b);} .parameters ul li span:first-child {display: inline-block; width: 9em; font-weight: 700;} .parameters ul li span:last-child {display: inline-block; width: calc(100% - 9em); } @media screen and (min-width: 769px) { .parameters ul {column-count: 2; column-gap: 1.5em;} } .shop-detail-more-info {margin: 0 auto;} .shop-detail-more-info > *:first-child {margin-top: 0 !important;} .shop-detail-more-info :is(h2, h3, p) {text-align: center;} .shop-detail-more-info h3 {color: var(--color1); margin-top: 0.4em;} .shop-detail-more-info p {color: var(--color0);} .compare-identificator {display: block; width: 2.6em; height: 2.6em; position: fixed; left: -9999px; bottom: 1.5em; z-index: 10; transform: scale(0); transition: transform .15s ease-in-out;} .compare-identificator.show {left: 1.5em; transform: scale(1);} .compare-identificator .icon {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: var(--color1); border-radius: 100%; position: relative; transition: .15s ease-in-out;} .compare-identificator .icon img {display: block; width: 50%;} .compare-identificator .icon span {display: flex; width: 40%; height: 40%; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; font-size: 0.6em; font-weight: 700; color: white; line-height: 1; background: var(--color2b); border-radius: 100%; padding: 0; position: absolute; right: -5%; bottom: -5%;} .compare-identificator .icon:hover {background: var(--color1b);} .compare-table {display: block; width: var(--compare-table-width); margin-inline: calc(50% - 0.5 * var(--compare-table-width)); --compare-table-width: min(100vw, 60rem); box-shadow: 0 0 1em rgba(0,0,0,0.07); padding-bottom: 1em; box-sizing: border-box; position: relative;} .compare-table .inner {display: block; width: 100%;} .compare-table .row {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em 0; background: rgba(255,255,255,0.7); padding-top: 0.9em; box-sizing: border-box; position: relative;} .compare-table .row .row-title {display: block; width: 100%; text-align: center; font-size: clamp(0.5em, 4cqw, 0.9em); color: var(--color1); font-weight: 700; background: rgba(240,240,240,0.6); padding-block: 0.5em 0.6em;} .compare-table .row .item {display: flex; flex: 0 0 auto; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; box-sizing: border-box; position: relative; padding-inline: min(1.8em, 2cqw); container-type: inline-size;} .compare-table .row .item:only-child {width: 100%;} .compare-table .row .item:first-of-type:nth-last-of-type(2), .compare-table .row .item:first-of-type:nth-last-of-type(2) ~ .item {width: 50%;} .compare-table .row .item:first-of-type:nth-last-of-type(3), .compare-table .row .item:first-of-type:nth-last-of-type(3) ~ .item {width: 33.33%;} .compare-table .row .item :is(span, ul) {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; text-align: center; font-size: clamp(0.7em, 5cqw, 1.1em); line-height: 1.4;} .compare-table .row.head .item .remove-item {display: block; padding: 0.4rem; border-radius: 100%; background: white; opacity: 0.5; position: absolute; left: 1em; top: 0.5em; cursor: pointer; transition: .15s ease-in-out;} .compare-table .row.head .item .remove-item img {display: block; width: 0.5rem;} .compare-table .row.head .item .remove-item span {display: inline-block; width: 6rem; padding-block: 0.12rem 0.2rem; font-size: 0.7rem; font-weight: 500; border-radius: 0.8rem; background: rgba(220,220,220,0.9); position: absolute; left: -99999px; top: 0; white-space: nowrap; transition: opacity .15s ease-in-out;} .compare-table .row.head .item .remove-item:hover {opacity: 1; background: rgba(220,220,220,0.9);} .compare-table .row.head .item .remove-item:hover span{left: 1.4rem;; opacity: 1;} .compare-table .row.head .item .img {display: block; width: 100%; max-width: 10em; aspect-ratio: 1; transition: .5s ease-in-out;} .compare-table .row.head .item .img img {display: block; width: 100%; height: 100%; object-fit: contain;} .compare-table .row.head .item .name {max-height: 2.7em; font-size: clamp(0.6em, 6.5cqw, 1.3em); font-weight: 700; margin-bottom: 1rem; overflow: hidden; transition: .5s ease-in-out;} .compare-table .row.price {background: rgba(240,240,240,0.6);} .compare-table .row.price .item {font-size: clamp(1em, 3.4cqw, 1.5em); color: var(--color1); font-weight: 700; line-height: 1.3; padding-bottom: 0.2em;} .compare-table .row.price .item span {font-size: 0.6em; font-weight: 500; line-height: 1.3; margin-block: 0.25em 0.9em;} .compare-table .row.price .item span:after {display: inline-block; margin-left: 0.15em; content: "bez DPH";} .compare-table .button {font-size: min(0.8em, 9cqw);} .compare-table .level {margin: 0;} .compare-table .row .item ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2em 0;} .compare-table .row .item ul li {width: auto; font-size: 1em; padding-inline: 0.5em; position: relative;} .compare-table .row .item ul li:not(:last-child)::after {display: block; width: 1px; height: 1em; background: var(--color0); opacity: 0.4; position: absolute; right: -1px; top: 0.22em; content: "";} .compare-table .row.head .item:not(:last-child):after {display: block; width: 1px; height: 100000px; background: var(--color3); position: absolute; right: 0; top: 0; content: "";} .compare-table .row .item .in-stock {color: #3A8000;} .compare-table .row .item .in-stock-supplier {color: #e89b0c;} .compare-table:is(.fixed, .fixed-end) {padding-top: var(--compare-table-head); --compare-table-head: 10rem;} .compare-table.fixed .row.head {width: var(--compare-table-width); background: white; position: fixed; top: 0; z-index: 10;} .compare-table.fixed .row.head .item .img {width: 4rem;} .compare-table.fixed .row.head .item .name {font-size: 0.6rem;} .compare-table.fixed-end .row.head {position: absolute; top: auto; bottom: 0;} @media screen and (min-width: 481px) { .compare-table .level {flex-direction: row; align-items: flex-end !important; gap: 0 0.4em;} .compare-table .level svg {width: 2.6em; margin-bottom: 0.2em;} } @media screen and (max-width: 480px) { .compare-table .level {align-items: center !important; text-align: center; font-size: 0.6em;} .compare-table .level svg {order: -1;} } .quick-message {display: flex; max-width: calc(100% - 4em); font-size: 0.8em; color: white; font-weight: 500; padding: 0.4em 1em 0.45em; background: var(--color0); border-radius: 0.2em; box-sizing: border-box; opacity: 0; margin-inline: -1em 1em; position: fixed; left: -99999px; bottom: 2.1em; z-index: 9; transition: opacity .5s ease-in-out, margin-inline .5s ease-in-out;} .quick-message.show {left: 3em; margin-inline: 0; opacity: 1;} .quick-message.show.hide {margin-inline: -1em 1em; opacity: 0;} .quick-message a {display: inline-block; color: var(--color1c); text-decoration: underline; margin-left: 0.3em; transition: .25s ease-in-out;} .quick-message a:hover {color: var(--color1); text-decoration-color: transparent;} .quick-message .close {display: block; width: 1.2em; height: 1.2em; font-size: 1em; background: var(--color1); border-radius: 100%; cursor: pointer; position: absolute; right: -0.4em; top: -0.4em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;} .quick-message .close span {display: block; width: 50%; height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.05em); z-index: 1;} .quick-message .close:hover {background: var(--color2b);} .quick-message .close span:nth-child(1) {transform: rotate(45deg);} .quick-message .close span:nth-child(2) {transform: rotate(-45deg);} .quick-message:is(.added-to-compare, .removed-from-compare) {padding-left: 2.8em;} .shop-detail-more-info img, .content-article img { display: block; max-width: 90%; height: auto; margin: 1rem auto 1rem auto; } .shop-detail-more-info .embedBlok, .content-article .embedBlok{ max-width:90%; margin: 0rem auto 0rem auto; } .wndw {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(1rem, 5%); box-sizing: border-box; position: fixed; left: -99999px; top: 0%; z-index: 1000000;} .wndw:before {display: block; width: 100%; height: 100%; background: rgba(216,216,216,0.65); backdrop-filter: blur(4px); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .3s ease-in-out;} .wndw > .outer {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .wndw > div {display: flex; width: 100%; max-width: 44em; max-height: calc(100vh - 8rem); background: rgba(248,248,248,0.88); backdrop-filter: blur(2px); position: relative; top: 0; z-index: 2; box-shadow: 0 0 0.6em rgba(0,0,0,0.12); transform: scale(0.8); transition: .3s ease-in-out;} .wndw > div .overflow {display: block; width: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;} .wndw > div .overflow > div {display: block; width: 100%; height: auto;} .wndw.show {left: 0;} .wndw.show:before {opacity: 1;} .wndw.show > div {transform: scale(1);} .wndw.show.hide {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;} .wndw.show.hide:before {opacity: 0;} .wndw.show.hide > div {transform: scale(0.8) !important; opacity: 0;} .wndw .cross {display: block; width: 1.5em; height: 1.5em; font-size: 1em; background: var(--color1); cursor: pointer; position: absolute; right: -0.25em; top: -0.25em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;} .wndw .cross span {display: block; width: 50%; height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.05em); z-index: 1;} .wndw .cross:hover {background: var(--color2b);} .wndw .cross span:nth-child(1) {transform: rotate(45deg);} .wndw .cross span:nth-child(2) {transform: rotate(-45deg);} .wndw .wndw-content {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(2rem, 8%) min(6rem, 10vw); box-sizing: border-box;} .wndw .wndw-content .icon {display: block; width: 2.5em; margin-bottom: -0.35em;} .wndw .wndw-content .title {display: block; width: 100%; text-align: center; font-size: 1.6em; color: var(--color1); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;} .wndw .wndw-content .title span {display: block; font-weight: 500;} .wndw .wndw-content .title:has(+ p) {margin-bottom: -0.35em;} .wndw .wndw-content p {display: block; width: 100%; text-align: center; font-size: 0.9em;} .wndw .wndw-content p strong {font-weight: 700;} .wndw .wndw-content .flex {gap: 0.3em;} .wndw .wndw-content .flex .button {min-width: 8em; font-size: 0.9em;} @media screen and (min-width: 1081px) { .wndw.desktop-content {height: auto; padding: 0; position: relative; inset: auto;} .wndw.desktop-content:before {display: none;} .wndw.desktop-content .outer {display: none;} .wndw.desktop-content > div {max-width: 100%; max-height: none; background: none; backdrop-filter: none; top: auto; box-shadow: none; transform: none;} .wndw.desktop-content > div .overflow {max-height: none; overflow: visible;} .wndw.desktop-content .close {display: none;} .wndw.desktop-content .wndw-content {gap: 0; padding: 0;} } .icon-links {display: flex; width: 100%; margin-top:0.4rem; margin-left:1rem; justify-content: center; flex-wrap: wrap; gap: 0.3em;} .icon-links a {display: block; cursor:pointer; width: 1.7em; height: 1.7em; border-radius: 100%;} .icon-links a svg {display: block; width: 100%; height: 100%; fill: rgba(0,0,0,0.2); transition: .15s ease-in-out;} .icon-links a svg .white {fill: var(--color0);} .icon-links a:nth-child(1):hover svg {fill: #2d78f3;} .icon-links a:nth-child(2):hover svg {fill: #2d78f3;} .icon-links a:nth-child(3):hover svg {fill: #00e676;} .icon-links a:nth-child(4):hover svg {fill: black;} .icon-links a:nth-child(5):hover svg {fill: #007ebb;} .icon-links a:nth-child(6):hover svg {fill: #ce3e21;} .icon-links a:hover svg .white {fill: white;} @media screen and (min-width: 1081px) { .icon-links a:nth-child(2) {display: none;} } #bt_tabulkaVelikosti { color:var(--color1); text-decoration:underline; font-size:0.8rem; }