.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .embedBlok {display: block; width: 100%;} /*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .mce-content-body .faq-list .collapse { display:block !important; } .news-detail > p { margin-bottom:1em !important; } .news-detail { max-width: 720px; } input::placeholder, textarea::placeholder { font-size:1em; color:#c0c0c0; font-weight:400; } .radioBTN { display: flex; flex-direction: column; gap: 10px; } .radioBTN label { color: #333; display: flex; align-items: center; cursor: pointer; } .radioBTN input[type="radio"] { margin-right: 10px; accent-color: #4CAF50; transform: scale(1.2); font-size:0.22rem !important; } html {display: block; width: 100%; font-weight: 300; color: var(--color0); letter-spacing: 0.03em; line-height: 1.25em; overflow-x: hidden; font-family: var(--font1);} body {display: block; /*visibility:visible!important;*/ width: 100%; position: relative; overflow-x: hidden; overflow-y: auto; background: var(--decor1); background-size: var(--decor-size);} body.fixed {overflow: hidden;} body.fixed :is(.header .logo, .main, .footer) {filter: blur(2px); opacity: 0.5;} 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: 3vw; flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;} @media screen and (max-width: 1080px) { .wrapper {max-width: 46em; --wrapper-side: 5vw;} } @media screen and (min-width: 769px) { html {font-size: 20px;} } @media screen and (max-width: 768px) { html {font-size: 19px;} } @media screen and (max-width: 440px) { html {font-size: 18px;} } :root { --font1: 'alternate-gothic-atf', sans-serif; --color0: #20323f; /* rgb(32,50,63) */ --color0b: #305670; --color1: #6199bd; --color1b: #81ccfa; --color-optika: #6199bd; /* rgb(97,153,189) */ --color-optika2: #4586ae; /* rgb(69,134,174) */ --color-ordinace: #81ccfa; /* rgb(129,204,205) */ --color-ordinace2:#55a9de; /* rgb(85,169,222) */ --color-estetika: #9dbae1; /* rgb(157,186,225) */ --color-estetika2:#6f95c8; /* rgb(111,149,200) */ --color2: rgba(0,0,0,0.06); --section-gap: min(calc(1.4rem + 5vw), 5rem); --section-gap-hp: min(calc(2rem + 5vw), 8rem); --gap1: 1rem; --gap2: 2rem; --padding1: 1rem; --padding2: 2rem; --border-radius: 0.5em; --decor: URL("images/decor.png") no-repeat center center; --decor-left: left center; --decor-size: min(40vw, 20em); /* height */ --dark-gradient: linear-gradient(to right, black 0%, rgb(30,30,30) 50%, black 100%); --cols-gap: 14%; } @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;} } .hp .header {position: absolute; left: 0; top: 0;} .header {display: block; width: 100%; height: 5em; font-size: 1rem; position: relative; z-index: 1000;} .header > .wrapper {height: 100%; justify-content: space-between; align-items: center;} .header .logo {display: block; transition: .15s ease-in-out;} .header .logo img {display: block; width: 100%;} .header .overflow {display: block; width: 100%;} .header nav {display: block; box-sizing: border-box;} .header nav ul {display: flex; width: 100%; align-items: center; flex-wrap: wrap; box-sizing: border-box;} .header nav ul li {display: flex; align-items: center;} .header nav ul li a {text-transform: uppercase; font-weight: 500; line-height: 1em; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;} .header nav ul li a:hover {color: var(--color1);} @media screen and (min-width: 1081px) { .header > .wrapper {align-content: flex-end;} .header .logo {width: 11em;} .header nav {flex-grow: 2;} .header nav ul {justify-content: center; gap: 3%;} .header nav ul li a {display: block; font-size: 0.95em; letter-spacing: 0.03em; color: var(--color0);} .header nav ul li a:hover, .header nav ul li a[aria-current="page"] {color: var(--color1);} .header .button {position: relative; top: -0.1em;} .header :is(#navicon, #close) {display: none;} } @media screen and (min-width: 1081px) and (max-width: 1281px){ .header nav ul {gap: 1.8%;} } @media screen and (max-width: 1080px) { .header .logo {width: 10em;} .header .button {font-size: 0.9em; position: absolute; top: calc(50% - 0.5 * var(--button-height)); right: 2.4rem;} .header #navicon {display: block; width: 1.2em; height: 15px; cursor: pointer; position: relative; z-index: 1;} .header #navicon span {display: block; width: 100%; height: 2px; background: var(--color0); position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;} .header #navicon:hover span {background: var(--color1);} .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 nav {display: block; width: 15em; height: 100%; background: var(--color0);padding-top: 3.4em; overflow-y: auto; overflow-x: hidden; position: fixed; right: -16rem; top: 0; z-index: 5; opacity: 0; transition: .4s ease-in-out;} .header nav #close {display: block; width: 1em; height: 15px; cursor: pointer; position: absolute; right: 1.5em; top: 1.5em;} .header nav #close span {display: block; width: 100%; height: 2px; background: white; opacity: 0.4; position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;} .header nav #close span:nth-child(1) {transform: rotate(45deg);} .header nav #close span:nth-child(2) {transform: rotate(-45deg);} .header nav #close:hover span {opacity: 1;} .header nav ul li {width: 100%; } .header nav ul li a {display: flex; width: 100%; height: var(--nav-item-height); align-items: center; font-size: 1em; color: white; padding: 0.2em 1.6em 0; position: relative; isolation: isolate; --nav-item-height: 2.4em;} .header nav ul li a[aria-current="page"] {margin-block: 0.5em;} .header nav ul li a[aria-current="page"]:first-child {margin-top: 0;} .header nav ul li a[aria-current="page"]::before {display: block; width: 90%; height: 100%; background: var(--color1); border-radius: 0 calc(var(--nav-item-height) / 2) calc(var(--nav-item-height) / 2) 0; position: absolute; left: 0; top: 0; z-index: -1; content: "";} .header.show nav {right: -1px; opacity: 1;} } @media screen and (max-width: 768px) { .header {height: 4.6em; font-size: 0.85em;} .header .logo {width: 9em;} .header .button {right: 2rem;} } .footer {display: block; width: 100%; background: var(--color0); padding: 4em 0 1.5em; position: relative; overflow: hidden; transition: .15s ease-in-out;} .footer .wrapper {justify-content: space-between; z-index: 2;} .footer > .wrapper .decor {position: absolute; left: 0; bottom: 0; opacity: 1;} .footer :is(.upper, .bottom) {display: flex; width: 100%;} .footer .left {display: flex; gap: 2rem;} .footer .left > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;} .footer .left > div h2 {display: block; font-size: 1.6em; color: white; font-weight: 500; line-height: 1em; text-transform: uppercase; margin-bottom: -0.8rem; font-family: var(--font1);} .footer .left > div .info {display: block; width: 100%; font-size: 0.9em; line-height: 1; color: white; font-weight: 300; padding-left: 1.25em; margin-top: 0.45em; position: relative; box-sizing: border-box;} .footer .left > div .info:before {display: block; width: 0.85em; height: 0.85em; position: absolute; left: 0; top: 0.09em; background-repeat: no-repeat; background-position: center center; background-size: contain; content: "";} .footer .left > div .info.address:before {top: 0.08em; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M256.8,1.9C152,1.9,65.9,87,65.9,192.8c0,130,170.3,303,177.5,312c7.2,7.2,18.8,7.2,25.1,0 c7.2-8.1,177.5-181.1,177.5-312C446.9,87,361.7,1.9,256.8,1.9z M256.8,288.7c-52.9,0-95.9-43-95.9-95.9c0-52.9,43-95.9,95.9-95.9 c52.9,0,95.9,43,95.9,95.9C352.8,245.7,309.7,288.7,256.8,288.7z' fill='white'/%3E%3C/svg%3E%0A");} .footer .left > div .info.phone:before {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M389.4,338.6c-16.7-16.5-37.6-16.5-54.3,0c-12.6,12.5-25.4,25.2-37.8,37.9c-3.4,3.5-6.3,4.3-10.4,2 c-8.2-4.5-16.9-8.1-24.8-13c-36.8-23.1-67.5-52.9-94.8-86.3c-13.6-16.6-25.5-34.5-34-54.4c-1.7-4.1-1.4-6.7,2-10 c12.6-12.3,25.1-24.8,37.5-37.4c17.4-17.5,17.4-37.9-0.1-55.6c-9.9-10-19.8-19.8-29.7-29.8c-10.2-10.2-20.3-20.5-30.7-30.7 C95.4,45,74.5,45,57.8,61.5C45,74,32.7,87,19.7,99.3C7.7,110.7,1.6,124.7,0.4,140.9c-2,26.6,4.5,51.6,13.7,76 c18.8,50.5,47.3,95.4,81.9,136.6c46.8,55.6,102.7,99.7,168,131.5c29.5,14.3,59.9,25.3,93,27c22.9,1.3,42.6-4.5,58.5-22.3 c10.9-12.2,23.1-23.2,34.7-34.8c17.1-17.3,17.2-38.2,0.2-55.2C430.1,379.1,409.7,358.8,389.4,338.6z' fill='white'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M368.9,253.7l39.3-6.7c-6.1-36.1-23.2-68.8-49.1-94.8c-27.4-27.4-62.1-44.7-100.1-50l-5.6,39.6 c29.5,4.2,56.4,17.5,77.6,38.6C351.1,200.5,364.2,225.8,368.9,253.7z' fill='white'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M430.4,82.8c-45.4-45.5-102.8-74.1-166.3-83l-5.6,39.6C313.4,47.1,363,71.9,402.2,111 c37.2,37.2,61.6,84.2,70.4,135.9l39.3-6.7C501.8,180.3,473.5,126,430.4,82.8z' fill='white'/%3E%3C/svg%3E%0A") ;} .footer .left > div .info.mail:before {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M462.2,56.9H49.1c-7.8,0-14.9,1.6-21.6,5l228.2,185l228.1-185C477.2,58.5,470.5,56.9,462.2,56.9z' fill='white'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M271.2,297.6c-4.4,3.9-9.9,5.5-15.4,5.5s-11-1.6-15.4-5.5L0,102.7c0,1.1,0,1.6,0,3.3v299.8 c0,27.1,22.1,49.2,49.2,49.2h413.6c27.1,0,49.2-22.1,49.2-49.2V106.1c0-1.1,0-1.6,0-3.3L271.2,297.6z' fill='white'/%3E%3C/svg%3E%0A") ;} .footer .left > div .info.hours:before {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- ) --%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%3Cpath d='M255.5-2.5C113-2.5-2.5,113-2.5,255.5s115.5,258,258,258s258-115.5,258-258S398-2.5,255.5-2.5z M341.6,350 c-12.6,12.6-33.6,12-46.2-0.6l-64-64c-3-3-5.4-6.5-7-10.5c-1.6-3.9-2.5-8.1-2.5-12.3v-129c0-17.8,14.4-32.2,32.2-32.2 c17.8,0,32.2,14.4,32.2,32.2v115.6l55.3,55.3C354.4,317.2,354.2,337.4,341.6,350z' fill='white'/%3E%3C/svg%3E%0A");} .footer .left > div .info a {color: white; transition: .15s ease-in-out;} .footer .left > div > div {display: block;} .footer .left > div > div h3 {display: block; font-size: 1em; font-weight: 500; text-transform: uppercase; margin-bottom: 0.25rem;} .footer .left > div > div.ordinace h3 {color: var(--color-ordinace);} .footer .left > div > div.optika h3 {color: var(--color-optika);} .footer .left > div > div.estetika h3 {color: var(--color-estetika);} .footer .left > div > div.ordinace .info a:hover{color: var(--color-ordinace);} .footer .left > div > div.optika .info a:hover {color: var(--color-optika);} .footer .left > div > div.estetika .info a:hover{color: var(--color-estetika);} .footer .right {display: flex; flex-wrap: wrap; gap: 1.8em;} .footer .right .logo {display: block; width: 11em; order: 0} .footer .right .logo img {display: block; width: 100%;} .footer .right .footer-soc {display: flex; align-items: center; gap: 0.4em; order: 1;} .footer .right .footer-soc li {display: block;} .footer .right .footer-soc li a {display: flex; width: 1.3em;} .footer .right .footer-soc li a svg {display: block; width: 100%; fill: white; transition: .15s ease-in-out;} .footer .right .footer-soc li a:hover svg {fill: var(--color1);} .footer .bottom {gap: 1.5em; padding-top: 1.2em; margin-top: 1.5rem; border-top: solid 2px var(--color1);} .footer .bottom-links {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.15em 0.8em;} .footer .bottom-links li {display: flex; gap: 0.3em; font-size: 0.8em; font-weight: 300;} .footer .bottom-links li a {display: block; color: white; text-decoration: underline; transition: .15s ease-in-out;} .footer .bottom-links li a:hover {color: var(--color1); text-decoration-color: transparent;} .footer .bottom .copyright {display: block; font-size: 0.8em; font-weight: 300; color: white;} .footer .bottom .copyright a {color: white; text-decoration: underline; transition: .15s ease-in-out;} .footer .bottom .copyright a:hover {color: var(--color1); text-decoration-color: transparent;} @media screen and (min-width: 1281px) { .footer .left > div {width: ; gap: 1rem 9%;} } @media screen and (min-width: 1081px) { .footer :is(.upper, .bottom) {justify-content: space-between;} .footer .upper {flex-wrap: wrap;} .footer .left {width: 100%; justify-content: space-between; margin-bottom: 3rem;} .footer .right {width: 100%; justify-content: space-between; align-items: center;} } @media screen and (max-width: 1080px) { .footer :is(.upper, .right, .bottom) {justify-content: center; flex-wrap: wrap;} .footer .left {flex-wrap: wrap;} .footer .left > div {justify-content: center;} .footer .left > div h2 {width: 100%; text-align: center;} .footer .left > div .info.address {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.25em; text-align: center; padding: 0;} .footer .left > div .info.address:before {position: relative; inset: auto; top: -0.1em;} .footer .right {width: 100%; margin-top: 3rem;} .footer .right .logo {order: -1;} .footer .right .footer-soc, .footer .bottom-links {width: 100%; justify-content: center;} } @media screen and (max-width: 441px) { .footer {font-size: 0.95em;} } .main {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; flex-grow: 1; transition: .15s ease-in-out;} .main :is(h1, h2, h3) {display: block; width: 100%; font-weight: 500; color: var(--color0); line-height: 1.1em; text-transform: uppercase; box-sizing: border-box; font-family: var(--font1);} .main h1 {font-size: min(calc(1.6em + 4vw), 3.6em);} .main h2 {font-size: min(calc(1.2em + 4vw), 2.5em);} .main h2 a { color:var(--color0); text-decoration:underline; } .main h2 a:hover { color: var(--color0b) !important; } .main h3 {font-size: min(calc(1em + 4vw), 1.45em);} .main p, .main li {display: block; width: 100%; font-size: 1em; color: #666666; font-weight: 300; box-sizing: border-box;} .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(--color0b) !important; text-decoration-color: transparent;} .main strong {font-weight: 600;} .main em {font-style: italic;} @media screen and (min-width: 1081px) { .main :is(h2, h3) {padding-inline: var(--padding2);} .main p {padding-inline: var(--padding1);} } @media screen and (max-width: 1080px) { .main :is(h1, h2, h3, p) {text-align: center;} } body:not(.hp) h1 {padding-inline: var(--padding2); margin-bottom: 0.3em; margin-top: max(-8vw, -2rem);} body:not(.hp) h1 span {display: inline-block; line-height: 1.1em; position: relative; padding-bottom: 0.01em;} body:not(.hp) h1 span:after {display: block; height: 0.06em; background: var(--color1); border-radius: 0.03em; position: absolute; bottom: -0.1rem; content: "";} .ordinace h1 span:after {background: var(--color-ordinace) !important;} .optika h1 span:after {background: var(--color-optika) !important;} .estetika h1 span:after {background: var(--color-estetika) !important;} @media screen and (min-width: 1081px) { body:not(.hp) h1 span:after {width: calc(100% + var(--padding2)); right: 0;} } @media screen and (max-width: 1080px) { body:not(.hp) h1 span:after {width: 50%; left: 25%;} } .decor-placed {display: block; width: 100%; overflow-y: visible;} .decor {display: block; width: 100%; position: relative; z-index: -1; isolation: isolate; opacity: 0.35;} .decor:before {display: block; width: 150%; height: var(--decor-size); background: var(--decor); background-size: contain; position: absolute; left: -25%; top: calc(50% - var(--decor-size) / 2); content: "";} .decor.decor-left:before {background-position: var(--decor-left);} .hp .section {padding: var(--section-gap-hp) 0;} .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: var(--dark-gradient);} .section.dark :is(h2, p, li) {color: white;} .section.mixed::before {display: block; width: 100%; height: 50%; background: var(--dark-gradient); position: absolute; left: 0; bottom: -1px; content: "";} .section.gray {background-color: var(--color3);} .section.padding-top-0 {padding-top: 0;;} .section.padding-bottom-0 {padding-bottom: 0;} .section.padding-bottom-0-special {padding-bottom: 1em; margin-bottom: -1em;} .section > .wrapper {gap: min(calc(0.6rem + 3vw), 1.2rem);} @media screen and (max-width: 1080px) { .section .wrapper > h1 {text-align: center;} .section .content h2 {text-align: center;} } @media screen and (max-width: 640px) { .section.mixed::before {height: 70%;} } .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; height: var(--button-height); justify-content: center; align-items: center; gap: 0.5em; outline: none; cursor: pointer; font-size: 0.95em; font-weight: 500; line-height: 1; color: white; text-transform: uppercase; background: var(--color1); padding: 0.06em 1.4em 0; position: relative; outline: none; border: none; border-radius: calc(var(--button-height) / 2); --button-height: 2.6em; box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;} .button:hover {background: var(--color1b);} .button.color2 {border-color: var(--color2);} .button.color2 svg {fill: var(--color2);} .button.color2:hover {border-color: var(--color2b); color: var(--color2);} .button.color2:hover svg {fill: var(--color2b);} .button.border {color: var(--color0); background: transparent; border: solid 2px var(--color0);} .button.border:hover {background: var(--color0); color: white;} @media screen and (max-width: 768px) { .button {font-size: 1.1em;} } .ordinace .button {background: var(--color-ordinace);} .ordinace .button:hover {background: var(--color-ordinace2);} .optika .button {background: var(--color-optika);} .optika .button:hover {background: var(--color-optika2);} .estetika .button {background: var(--color-estetika);} .estetika .button:hover {background: var(--color-estetika2);} .link {display: flex; align-items: center; gap: 0.2em; font-size: 1em; line-height: 1; font-weight: 400; color: var(--color0); text-decoration: none; text-transform: uppercase; position: relative; transition: .15s ease-in-out; font-family: var(--font1);} .link:after {display: inline-block; width: 0.55em; height: 0.55em; margin-top: -0.22em; transform: rotate(-90deg); transition: .15s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='rgb(32,50,63)' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";} .link:hover {color: var(--color0b); text-decoration-color: transparent;} /* Pouze se meni barva ve fill="" */ .ordinace .link:hover:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='rgb(129,204,205)' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .optika .link:hover:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='rgb(97,153,189)' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .estetika .link:hover:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='rgb(157,186,225)' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .estheticon {display: flex; width: 100%; gap: 0.7em 3%; background: var(--color2); box-sizing: border-box; border-radius: 2.4em; position: relative;} .estheticon h2 {font-size: min(calc(1.2em + 4vw), 2.3em); padding: 0;} .estheticon h2 span {font-weight: 300;} .estheticon p {padding: 0;} .estheticon .logo {display: block;} .estheticon .logo img {display: block; width: 100%;} @media screen and (min-width: 1081px) { .estheticon {justify-content: space-between; align-items: center; padding: 1rem 1.6rem;} .estheticon h2 {width: auto; white-space: nowrap; margin-top: 0.6rem;} .estheticon p {width: auto; font-size: 0.9em; line-height: 1.15em; margin-top: 0.45rem;} .estheticon .logo {width: 10em;} } @media screen and (max-width: 1080px) { .estheticon {justify-content: center; flex-wrap: wrap; padding: 1.8rem 1.6rem 3.4rem;} .estheticon .button {font-size: 0.9em;} .estheticon .logo {width: 6em; position: absolute; left: calc(50% - 3em); bottom: 1.4rem;} } .box {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 1em; background: var(--color2); padding: 0.8em; border-radius: var(--border-radius); box-sizing: border-box;} .separator {display: block; width: 100%; height: 0.6em; background: black; opacity: 0.1;} .breadcrumbs {display: block; width: 100%; background: var(--color3); padding-block: 0.75em 0.5em; box-sizing: border-box; position: relative; z-index: 1;} .breadcrumbs ul {display: flex; flex-wrap: wrap; margin: 0; padding: 0 !important;} .breadcrumbs ul li {display: flex; width: auto; align-items: center; font-size: 0.8em; padding: 0 2em 0 0; margin: 0 0 0.15em 0.5em; position: relative;} .breadcrumbs ul li:first-child {margin-left: 0;} .breadcrumbs ul li:last-child {padding-right: 0; margin-right: 0;} .breadcrumbs ul li:after {display: inline-block; width: 1em; height: 0.8em; opacity: 0.5; position: absolute; right: 0.25em; top: 0.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 320'%3E%3Cpolygon points='355.7,6.7 322.2,40.9 419.4,136.1 0,136.1 0,183.9 419.4,183.9 322.2,279.1 355.7,313.3 512,160' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;} .breadcrumbs ul li:last-child:after {display: none;} .breadcrumbs ul li a {display: block; color: #252525; text-decoration: underline; font-weight: 500; opacity: 0.6; line-height: 1.3em; border: none; transition: .15s ease-in-out;} .breadcrumbs ul li:last-child a {text-decoration: none; color: #252525 !important; font-weight: 600; padding-right: 1em; opacity: 1;} .breadcrumbs ul li a:hover {opacity: 1; color: var(--color1); text-decoration-color: transparent;} @media screen and (min-width: 641px) and (max-width: 1080px){ .breadcrumbs ul {width: 100%; justify-content: center;} } @media screen and (max-width: 768px) { .breadcrumbs {overflow-x: auto; scrollbar-width: none;} .breadcrumbs::-webkit-scrollbar {display: none;} .breadcrumbs ul {flex-wrap: nowrap;} .breadcrumbs ul li a {white-space: nowrap;} } .pagination {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;} .pagination a {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; font-size: 0.9em; text-transform: uppercase; color: #999999; font-weight: 500; padding-top: 0.2em; border-radius: 100%; box-sizing: border-box; transition: .15s ease-in-out;} .pagination a:hover {background: rgba(0,0,0,0.06); color: #666666;} .pagination a.sel {background: var(--color1); color: white;} @media screen and (min-width: 769px) { .pagination {background: var(--color2); border-radius: 1.7em;; padding: 0.6em;} } @media screen and (max-width: 768px) { .pagination {font-size: 0.8em; gap: 0.35em;} .pagination a {background: rgba(0,0,0,0.05);} .pagination a:hover {background: rgba(0,0,0,0.1);} } @media screen and (max-width: 440px) { .pagination {font-size: 0.75em;} } .cols {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem 0;} .cols > div {display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--gap1);} .cols > div > *:first-child {margin-top: 0 !important;} .cols > div h2 {margin-bottom: -0.15em;} .cols > div > img {display: block; width: calc(100% - 2 * var(--padding2)); margin-inline: var(--padding2);} .cols > div .img {display: block; width: 100%; overflow: hidden; --img-border-radius: 3em; position: relative;} .cols > div .img img {display: block; position: absolute; inset: 0;} .cols > div .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} @media screen and (min-width: 1081px) { .cols {justify-content: space-between;} .cols > div {width: calc(50% - var(--cols-gap) / 2);} .cols > div p {padding-inline: var(--padding1);} .cols > div .button {margin-left: var(--padding2);} .cols > div .img {height: 100%;} .cols > div:nth-child(1) .img {border-top-left-radius: var(--img-border-radius);} .cols > div:nth-child(2) .img {border-top-right-radius: var(--img-border-radius);} .cols.stretch > div {align-items: stretch; align-content: stretch;} .cols:nth-of-type(even) > div:nth-child(2) {order: -1;} .cols:nth-of-type(even) > div .img {border-top-left-radius: var(--img-border-radius); border-top-right-radius: 0;} } @media screen and (max-width: 1080px) { .cols {justify-content: center;} .cols > div {width: 100%; justify-content: center;} .cols > div * {text-align: center;} .cols > div > img {max-width: 26em;} .cols > div .img {max-width: 26em; aspect-ratio: 1.777; border-radius: 0 var(--img-border-radius) 0 var(--img-border-radius);} } @media screen and (min-width: 641px) and (max-width: 1080px){ .cols.wrap-min {justify-content: space-between; } .cols.wrap-min > div {width: calc(50% - 0.4rem); font-size: 0.85em; align-items: stretch; align-content: stretch;} } .eye {display: block; width: 100%; max-width: 26rem; position: relative;} .eye img {display: block; width: 100%;} .eye img:nth-child(1) {position: absolute; inset: 0; z-index: -1; animation: spin 60s linear infinite;} @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .swiper {display: block; width: 100%;} .top {padding-block: calc(var(--section-gap-hp) + 5em) !important;} .hero {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .hero .thumbs {display: block; position: relative; z-index: 5;} .hero .thumbs .swiper-slide {font-weight: 500; line-height: 1.1em; font-size: 0.9em; text-transform: uppercase; position: relative;} .hero .slider {display: block;} .hero .slider .swiper {overflow: visible;} .hero .slider .swiper-slide {display: block; width: 100%; opacity: 0 !important; transition: .5s ease-in-out; transition-delay: 0.5s;} .hero .slider .swiper-slide-active {opacity: 1 !important;} .hero .slider .swiper-slide .left {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; position: relative;} .hero .slider .swiper-slide .headline {display: block; width: 100%; font-size: min(calc(1.4em + 4vw), 3em); font-weight: 500; color: var(--color0); line-height: 0.9em; text-transform: uppercase; padding-top: 0.2em; margin-bottom: 0.85rem; position: relative; left: -0.045em;} .hero .slider .swiper-slide .headline:after {display: block; width: 0; height: 3px; position: absolute; content: ""; transition: .4s ease-in-out; transition-delay: 1s;} .hero .slider .swiper-slide .left p {padding: 0;} .hero .slider .links {display: flex; flex-wrap: wrap; gap: 1em 2em;} .hero .slider .links > div {display: block;} .hero .slider .links > div .place {display: block; font-size: min(calc(1em + 3vw), 1.45em); font-weight: 500; color: var(--color0); text-transform: uppercase;} .hero .slider .links > div ul {display: block; font-size: 0.9em;} .hero .slider .links > div ul li {display: block; font-size: 1em; line-height: 1; margin-block: 0.3em;} .hero .slider .links > div ul li .link {text-decoration: none;} .hero .slider .swiper-slide .img {display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; z-index: -1; transform: scale(1.35);} /*.hero .slider .swiper-slide.ordinace .img {background-image: url("images/hero/slide-ordinace.jpg?r=1");} .hero .slider .swiper-slide.optika .img {background-image: url("images/hero/slide-optika.jpg?r=1");} .hero .slider .swiper-slide.estetika .img {background-image: url("images/hero/slide-estetika.jpg?r=1");}*/ .hero .slider .ordinace .headline:after {background: var(--color-ordinace);} .hero .slider .optika .headline:after {background: var(--color-optika);} .hero .slider .estetika .headline:after {background: var(--color-estetika);} .hero .slider .ordinace .link:hover {color: var(--color-ordinace) !important;} .hero .slider .optika .link:hover {color: var(--color-optika) !important;} .hero .slider .estetika .link:hover {color: var(--color-estetika) !important;} .hero .slider .hero-soc {display: flex; align-items: center; gap: 0.25em; z-index: 5;} .hero .slider .hero-soc a {display: flex; width: 1.8em; height: 1.8em; background: var(--color0); padding: 0.4em; box-sizing: border-box; border-radius: 100%; transition: .15s ease-in-out;} .hero .slider .hero-soc a svg {display: block; width: 100%; fill: white;} .hero .slider .hero-soc a:hover {background: var(--color0b);} @media screen and (min-width: 1081px) { .hero .thumbs {width: 20em; position: absolute; left: -20.2em; top: 0; transform: rotate(-90deg); transform-origin: right top;} .hero .thumbs .swiper {width: auto; overflow: visible;} .hero .thumbs .swiper-wrapper {width: auto; overflow: visible; transform: none !important;} .hero .thumbs .swiper-slide {width: auto; order: 0; padding-inline: 0.5em 0.8em; position: relative; overflow: visible; cursor: pointer; transition: .15s ease-in-out;} .hero .thumbs .swiper-slide:before {display: block; width: 3px; height: 0.75em; background: var(--color0); position: absolute; left: 0; top: 0.05em; content: ""; transition: .4s ease-in-out;} .hero .thumbs .swiper-slide br {display: none;} .hero .thumbs .swiper-slide.optika {order: 2;} .hero .thumbs .swiper-slide.estetika {order: -1;} .hero .thumbs .swiper-slide-thumb-active.ordinace, .hero .thumbs .swiper-slide.ordinace:hover {color: var(--color-ordinace);} .hero .thumbs .swiper-slide-thumb-active.optika, .hero .thumbs .swiper-slide.optika:hover {color: var(--color-optika);} .hero .thumbs .swiper-slide-thumb-active.estetika, .hero .thumbs .swiper-slide.estetika:hover {color: var(--color-estetika);} .hero .thumbs .swiper-slide.ordinace:before {background: var(--color-ordinace);} .hero .thumbs .swiper-slide.optika:before {background: var(--color-optika);} .hero .thumbs .swiper-slide.estetika:before {background: var(--color-estetika);} .hero .slider {width: calc(100% - var(--padding2)); --left-width: 22rem; margin-left: var(--padding2);} .hero .slider .swiper-slide .left {width: var(--left-width);} .hero .slider .swiper-slide :is(.headline, p) {text-align: left;} .hero .slider .swiper-slide .headline {font-size: 4.4em;} .hero .slider .swiper-slide .headline:after {left: 0.05em; bottom: -0.75rem;} .hero .slider .swiper-slide .img {width: 150%; height: 130%; position: absolute; left: calc(var(--left-width) - 20%); top: -15%;} .hero .slider .links > div ul {margin-top: 0.5em;} .hero .slider .hero-soc {position: absolute; right: 0; bottom: 0;} .hero .slider .swiper-slide-active.ordinace .headline:after {width: 3.35em;} .hero .slider .swiper-slide-active.optika .headline:after {width: 2.35em;} .hero .slider .swiper-slide-active.estetika .headline:after {width: 3.6em;} } @media screen and (max-width: 1080px) { .hero {align-items: flex-start; align-content: flex-start;} .hero .thumbs {width: 100%; font-size: 0.9em; margin-top: -3.5rem;} .hero .thumbs .swiper-wrapper {width: 100%; justify-content: center;} .hero .thumbs .swiper-slide {width: 5.5em !important; text-align: center; opacity: 0.4; padding-bottom: 0.6em; transition: .15s ease-in-out;} .hero .thumbs .swiper-slide:hover {opacity: 1;} .hero .thumbs .swiper-slide:after {display: block; width: 1.4em; height: 3px; opacity: 0; background: var(--color0); position: absolute; left: calc(50% - 0.7em); bottom: 0; content: ""; transition: .15s ease-in-out;} .hero .thumbs .swiper-slide-thumb-active, .hero .thumbs .swiper-slide-thumb-active:after{opacity: 1;} .hero .thumbs .swiper-slide.ordinace:after {background: var(--color-ordinace);} .hero .thumbs .swiper-slide.optika:after {background: var(--color-optika);} .hero .thumbs .swiper-slide.estetika:after {background: var(--color-estetika);} .hero .slider {width: 100%;} .hero .slider .swiper-slide .left {justify-content: center;} .hero .slider .swiper-slide :is(.headline, p) {max-width: 29rem; text-align: center;} .hero .slider .swiper-slide .headline {font-size: calc(1.4em + 4vw);} .hero .slider .swiper-slide .headline br {display: none;} .hero .slider .swiper-slide .headline:after {left: 50%; bottom: -0.75rem;} .hero .slider .swiper-slide-active .headline:after {width: 2.2em; left: calc(50% - 1.1em);} .hero .slider .links > div ul {margin-top: 0.3em;} .hero .slider .hero-soc {width: 100%; justify-content: center; position: relative; margin-top: 0.8rem;} } @media screen and (min-width: 640px) and (max-width: 1080px){ .hero .slider .swiper-slide .img {width: 90%; padding-top: 60%; position: relative; left: 5%; margin-block: -5%; transform: scale(1);} } @media screen and (max-width: 640px) { .hero .slider .links > div {width: 100%; font-size: 0.9em;} .hero .slider .links > div .place {width: 100%; text-align: center;} .hero .slider .links > div ul {display: flex; width: 100%; justify-content: center; gap: 0 1em;} .hero .slider .links > div ul li {width: auto; text-align: center; padding-right: 0.8em; box-sizing: border-box;} .hero .slider .swiper-slide .img {width: 140%; padding-top: 70%; position: relative; left: 0; margin-block: 7%;} } .zeiss {display: block; width: 100%; overflow: hidden; /*position: absolute; left: 0; bottom: -2;*/ z-index: 10;} .zeiss .wrapper:before {display: block; width: 120%; height: 1px; background: black; opacity: 0.4; position: absolute; left: -10%; content: "";} .zeiss .wrapper > div {display: flex; align-items: center; flex-wrap: wrap; gap: 1em; background: white; padding: 0 1.2rem; box-sizing: border-box;} .zeiss .wrapper > div .img {display: block; width: 3em;} .zeiss .wrapper > div .img img {display: block; width: 100%;} .zeiss .wrapper > div span {display: block; font-size: 0.95em; line-height: 1.2em; margin-top: 0.15em;} @media screen and (min-width: 1081px) { .zeiss .wrapper:before {top: 50%;} .zeiss .wrapper > div {position: relative; left: -1.2rem;} } @media screen and (max-width: 1080px) { .zeiss .wrapper {justify-content: center;} .zeiss .wrapper:before {top: 1.5em;} .zeiss .wrapper > div {max-width: 20em; justify-content: center;} .zeiss .wrapper > div span {width: 100%; text-align: center;} .zeiss .wrapper > div span br {display: none;} } .swiper-button-prev, .swiper-button-next {display: flex; width: var(--swiper-button); justify-content: center; align-items: center; background: var(--color0); border: solid 4px white; border-radius: 100%; z-index: 5; margin: 0; box-sizing: border-box; position: absolute; cursor: pointer; transition: .15s ease-in-out;} .swiper-button-prev svg, .swiper-button-next svg {display: block; width: 35%; fill:white;} .swiper-button-prev:after, .swiper-button-next:after {display: none;} .swiper-button-prev:hover, .swiper-button-next:hover {background: var(--color0b);} .swiper-button-prev {transform: rotate(90deg);} .swiper-button-next {transform: rotate(-90deg);} .swiper-button-disabled {opacity: 0.2 !important;} @media screen and (min-width: 541px) { .swiper-button-prev, .swiper-button-next {height: var(--swiper-button); --swiper-button: 2.4em; top: calc(50% - var(--swiper-button) / 2);} } @media screen and (max-width: 540px) { .swiper-button-prev, .swiper-button-next {height: calc(var(--swiper-button) / 2); --swiper-button: 3.4em; border-radius: calc(var(--swiper-button) / 2) calc(var(--swiper-button) / 2) 0 0; border-bottom: none; padding-top: 0.15em; top: calc(50% - var(--swiper-button) / 4);} .swiper-button-prev svg, .swiper-button-next svg {width: 25%;} } .swiper-pagination {display: flex; gap: 0.3em;} .swiper-pagination-bullet {width: 1em; height: 0.5em; background: var(--color0); opacity: 0.25; border-radius: 0.25em; margin: 0 !important; transition: .15s ease-in-out; cursor: pointer;} .swiper-pagination-bullet:hover {opacity: 0.5;} .swiper-pagination-bullet-active {opacity: 1 !important;} @media screen and (max-width: 540px) { .swiper-button-prev {left: calc(0px - var(--wrapper-side) - 0.85rem);} .swiper-button-next {right: calc(0px - var(--wrapper-side) - 0.85rem);} } .carousel {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative; box-sizing: border-box;} .carousel .swiper-slide {display: flex; height: auto; position: relative; box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;} .carousel .swiper-slide > * {width: 100%;} @media screen and (min-width: 1441px) { .carousel .swiper-button-prev {left: -3.4rem;} .carousel .swiper-button-next {right: -3.4rem;} } @media screen and (min-width: 541px) and (max-width: 1440px){ .carousel .swiper-button-prev {left: calc(0px - var(--swiper-button) / 2);} .carousel .swiper-button-next {right: calc(0px - var(--swiper-button) / 2);} } @media screen and (min-width: 1081px) { .carousel .swiper-pagination {width: auto; position: absolute; left: auto; right: var(--padding2); top: -3.2rem;} } @media screen and (max-width: 1080px) { .carousel .swiper-pagination {width: 100%; justify-content: center; position: relative; inset: auto;} } .blog {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem var(--flex-gap); --flex-gap: 1.5rem;} @media screen and (min-width: 1081px) { .blog > * {width: calc(33.33% - 2 / 3 * var(--flex-gap));} } @media screen and (min-width: 641px) and (max-width: 1080px){ .blog > * {width: calc(50% - 0.5 * var(--flex-gap));} } @media screen and (max-width: 640px) { .blog > * {width: 100%;} } .blog-article-preview {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.9rem;} .blog-article-preview .img {display: block; width: 100%; padding-top: 65%; position: relative; border-top-right-radius: 3em; overflow: hidden;} /* .blog-article-preview .img span {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;} .blog-article-preview .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .blog-article-preview .img:hover span  {opacity: 0.8;}*/ .blog-article-preview .img span {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;} .blog-article-preview .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .blog-article-preview .img:hover span {opacity: 0.8;} /*.blog-article-preview .img span {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;} .blog-article-preview .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .blog-article-preview .img:hover span{opacity: 0.8;}*/ .blog-article-preview > div {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5rem; padding-left: var(--padding2); box-sizing: border-box; position: relative;} .blog-article-preview .title {display: block; width: 100%; text-align: left; font-size: 1.35em; margin: 0.15em 0 -0.1em; padding: 0;} .blog-article-preview .title a {color: var(--color0); transition: .15s ease-in-out;} .blog-article-preview .title a:hover {color: var(--color0b);} .blog-article-preview .tag {display: flex; height: 2.4em; align-items: center; font-size: 0.9em; color: white; font-weight: 500; background: var(--color0); text-transform: uppercase; padding: 0.1em 1.4em 0 var(--padding2); box-sizing: border-box; border-radius: 0 1.2em 1.2em 0; position: absolute; left: 0; top: -4.5em;} .blog-article-preview p {text-align: left; font-size: 0.9em; line-height: 1.2em; padding: 0;} .blog-article-preview .link {font-size: 0.8em;} .blog-article-preview.ordinace .title a:hover {color: var(--color-ordinace);} .blog-article-preview.optika .title a:hover {color: var(--color-optika);} .blog-article-preview.estetika .title a:hover {color: var(--color-estetika);} .blog-article-preview.ordinace > div .tag {background: var(--color-ordinace);} .blog-article-preview.optika > div .tag {background: var(--color-optika);} .blog-article-preview.estetika > div .tag {background: var(--color-estetika);} @media screen and (min-width: 581px) { .blog-article-preview > div {padding-left: var(--padding2);} } @media screen and (max-width: 580px) { .blog-article-preview > div {padding-inline: var(--padding1);} } .reviews {box-sizing: border-box;} @media screen and (min-width: 541px) and (max-width: 1440px){ .reviews {padding-inline: 1em; box-sizing: border-box;} } .review {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.9rem; padding-inline: var(--padding1); box-sizing: border-box;} .review .head {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.7em; flex-wrap: wrap; position: relative;} .review .head > div {display: block; flex-grow: 2;} .review .head > div .name {display: block; font-size: 1.1em; color: var(--color0); font-weight: 500; line-height: 1.1em; margin-top: 0.2em;} .review .head > div .date {display: block; font-size: 0.9em; color: var(--color0); font-weight: 300; line-height: 1.1em;} .review .head > img {display: block; width: 4em;} .review p {text-align: left; font-weight: 300; box-sizing: border-box;} @media screen and (min-width: 581px) { .review .head {right: var(--padding1);} .review p {padding-inline: 0;} } @media screen and (max-width: 580px) { .review p {padding-inline: var(--padding1);} } .iframe {display: block; width: 100%; aspect-ratio: 1.777;} .iframe iframe {display: block; width: 100%; height: 100%;} .ig-widget .swiper-slide {aspect-ratio: 1; background: var(--color2);} .follow {display: block; width: 100%; padding-inline: var(--padding2); box-sizing: ;} .follow a {font-size: 1.4rem; color: var(--color0); font-weight: 500; transition: .15s ease-in-out;} .follow a:hover {color: var(--color1);} @media screen and (max-width: 1080px) { .follow {text-align: center;} } .filters {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;} .filters a {display: flex; height: 2.2em; align-items: center; font-size: 0.9em; text-transform: uppercase; color: #999999; font-weight: 500; padding: 0.2em 1em 0; border-radius: 1.1em; box-sizing: border-box; transition: .15s ease-in-out;} .filters a:hover {background: rgba(0,0,0,0.06); color: #666666;} .filters a.sel {background: var(--color0); color: white;} .filters a.ordinace.sel {background: var(--color-ordinace);} .filters a.optika.sel {background: var(--color-optika);} .filters a.estetika.sel {background: var(--color-estetika);} @media screen and (min-width: 769px) { .filters {background: var(--color2); border-radius: 1.7em; padding: 0.6em;} } @media screen and (max-width: 768px) { .filters {font-size: 0.8em; gap: 0.35em;} .filters a {background: rgba(0,0,0,0.05);} .filters a:hover {background: rgba(0,0,0,0.1);} } @media screen and (max-width: 440px) { .filters {font-size: 0.75em;} } .img-about {transform: scale(1.2);} .image-about span {display: block; width: 100%; height: 100%;} @media screen and (max-width: 1080px) { .image-about {aspect-ratio: 3/4 !important;} } .faq {display: flex; width: 100%; flex-wrap: wrap; gap: min(calc(1.7rem + 5vw), 4rem);} .faq > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) 0;} .faq > div h2 {position: relative; top: -0.15em;} .faq-list {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.3em; margin-top: -1.8rem;} .faq-list article {display: block; width: 100%; background: var(--color2); padding-block: 1.2em 1em; border-radius: 1.7em;} .faq-list :is(.title, p) {text-align: left;} .faq-list .title {font-size: 1rem; padding-inline: var(--padding2) 4rem; box-sizing: border-box; cursor: pointer; position: relative; font-family: var(--font1); transition: .15s ease-in-out;} .faq-list .title:hover {color: var(--color1);} .faq-list .title:after {display: block; width: 1.2em; height: 1.2em; font-size: 0.85em; font-weight: 500; position: absolute; right: var(--padding2); top: calc(50% - 0.65em); border-radius: 100%; padding-top: 0.1em; box-sizing: border-box; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='388,222.9 289.1,222.9 289.1,124 222.9,124 222.9,222.9 124,222.9 124,289.1 222.9,289.1 222.9,388 289.1,388 289.1,289.1 388,289.1' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center, var(--color1); content: ""; transition: .15s ease-in-out;} .faq-list .collapse {display: none; width: 100%; padding-top: 0.6rem; box-sizing: border-box;} .faq-list .collapse p {padding-inline: var(--padding2);} .faq-list article.sel .title:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='388,222.9 256,222.9 124,222.9 124,289.1 388,289.1' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");} .article-aside {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;} .article-aside > * {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: calc(var(--gap1));} .article-aside > article .article-info {margin-top: -0.8rem;} .article-aside > article h1 {font-size: min(calc(1.2em + 4vw), 3em); text-align: left; margin-bottom: 0;} .article-aside > article h2 {font-size: min(calc(1em + 4vw), 2em);} .article-aside > aside {padding-block: var(--padding2); box-sizing: border-box;} @media screen and (min-width: 1081px) { .article-aside > article {width: 60%;} .article-aside > article :is(p, ul, ol) {padding-left: var(--padding2); box-sizing: border-box;} .article-aside > aside {width: 30%; background: var(--color2); padding-right: var(--padding2); margin-top: -2rem;} .article-aside > aside h2 {font-size: 1.8rem; margin-block: 0 -0.6rem;} .article-aside > aside .blog-article-preview {width: 100%;} .article-aside > aside .blog-article-preview .tag {font-size: 0.8em;} .article-aside > aside .flex {width: calc(100% - var(--padding2)); margin-left: var(--padding2);} .article-aside > aside .flex .button {width: 100%; font-size: 0.85em;} } @media screen and (max-width: 1080px) { .article-aside > article, .article-aside > aside {width: 100%;} .article-aside > article h1 {padding: 0;} .article-aside > aside {margin-top: 2.5rem; padding-top: 2.5rem; border-top: solid 3px var(--color0);} .article-aside > aside h2 {text-align: center;} } .article-styles {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;} .article-styles .tag {display: block; width: 100%; height: 0; position: relative; margin-top: calc(0px - var(--gap1)); z-index: 2;} .article-styles .tag span {display: flex; height: 2.4em; align-items: center; font-size: 0.9em; color: white; font-weight: 500; background: var(--color0); text-transform: uppercase; padding: 0.2em 1.4em 0 var(--padding2); box-sizing: border-box; border-radius: 0 1.2em 1.2em 0; position: absolute; top: 2rem; z-index: 2;} .article-styles .image:first-of-type {margin-top: calc(0px - var(--gap1));} .article-styles .image {display: block; width: 100%; padding-top: 56%; position: relative; border-top-right-radius: 3em; overflow: hidden; box-sizing: border-box;} .article-styles .image > span {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .article-styles .image > span img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .article-styles .image:hover > span img {opacity: 0.9;} .article-styles :is(h2, h3) {margin-block: 1rem -0.2rem !important;} .article-styles p {margin-top: 0 !important;} .article-styles :is(h2, h3, h4, p, li) {max-width: 100%; text-align: left; margin: 0;} .article-styles li {box-sizing: border-box; position: relative; margin-bottom: 0.15em;} .article-styles ul li {padding-left: 2em;} .article-styles ul li:before {display: block; width: 0.7em; height: 0.12em; background: var(--color1); position: absolute; left: 0.8em; top: 0.45em; content: "";} .article-styles ul li:last-child {margin-bottom: 0;} .article-styles li :is(ul, ol) {margin-block: 0.4em 0.8em; padding: 0;} .article-styles li li {font-size: 1em !important;} .article-styles ol {list-style: none; counter-reset: li; padding: 0; margin: 0;} .article-styles ol > li {counter-increment: li; padding-left: 2em;} .article-styles ol > li:before {display: block; content: counter(li) "."; font-size: 1em; font-weight: 600; color: var(--color1); position: absolute; left: 0.65em; top: 0;} .article-styles .highlight {display: block; width: 100%; padding: var(--padding1) var(--padding2); background: var(--color2); border-radius: var(--border-radius); box-sizing: border-box;} .article-styles .highlight > * {padding: 0;} .article-styles .embed {display: block; width: 100%; border-radius: var(--border-radius);} .article-styles .embed iframe {display: block; width: 100%;} .article-styles.ordinace ul li:before {background: var(--color-ordinace);} .article-styles.optika ul li:before {background: var(--color-optika);} .article-styles.estetika ul li:before {background: var(--color-estetika);} .article-styles.ordinace ol li:before {color: var(--color-ordinace);} .article-styles.optika ol li:before {color: var(--color-optika);} .article-styles.estetika ol li:before {color: var(--color-estetika);} .article-styles.ordinace .tag span {background: var(--color-ordinace);} .article-styles.optika .tag span {background: var(--color-optika);} .article-styles.estetika .tag span {background: var(--color-estetika);} .gallery {display: block; width: 100%; position: relative;} .gallery .swiper {display: block; width: 100%; overflow: hidden;} .gallery.visible .swiper {overflow: visible;} .gallery .swiper-slide {display: block; width: auto; height: auto; padding-top: 22%; 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; cursor: pointer;} .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;} @media screen and (max-width: 960px) { .gallery .swiper-slide {padding-top: 33%;} } @media screen and (min-width: 541px) { .gallery .swiper-button-prev {font-size: 0.9em; left: calc(0px - var(--swiper-button) / 2);} .gallery .swiper-button-next {font-size: 0.9em; right: calc(0px - var(--swiper-button) / 2);} } /*.gallery.auto .swiper-slide {padding-top: 0; height: min(calc(5rem + 10vw), 15rem);} .gallery.auto .swiper-slide a {width: auto; position: relative; inset: auto;} .gallery.auto .swiper-slide a img {position: relative;}*/ .gallery.auto {--gallery-auto-height: 13rem;} .gallery.auto .swiper-slide {padding-top: 0; height: var(--gallery-auto-height);} .gallery.auto .swiper-slide a {width: auto; height: var(--gallery-auto-height); position: relative; inset: auto;} .gallery.auto .swiper-slide a img {width: auto; height: var(--gallery-auto-height); /*object-fit: none;*/} @media screen and (max-width: 768px) { .gallery.auto {--gallery-auto-height: 10rem;} } @media screen and (max-width: 540px) { /*.gallery.auto {--gallery-auto-height: 8rem;}*/ } .locality {display: block; width: 100%;} .locality .map {display: block; width: 100%; height: 20em; margin-top: 1rem; border-radius: var(--border-radius); overflow: hidden;} .locality .map iframe {display: block; width: 100%; height: 100%;} @media screen and (min-width: 1081px) { .locality p {padding-left: var(--padding2);} } .parking {display: flex; width: 100%; flex-wrap: wrap; gap: 1em;} .parking ul {display: flex; flex-wrap: wrap;} .parking ul li a {color: var(--color1); white-space: nowrap;} .parking ul li a:hover {color: var(--color1b) !important;} @media screen and (max-width: 1080px) { .parking h2 {text-align: center;} } @media screen and (min-width: 641px) { .parking ul {justify-content: space-between;} .parking ul li {width: calc(50% - 1em);} } .contacts li {padding-left: 1.2em; position: relative; box-sizing: border-box;} .contacts li a {text-decoration: none;} .contacts li svg {display: block; width: 0.9em; height: 0.9em; position: absolute; left: 0; top: 0.075em; content: "";} .ordinace .contacts li svg {fill: var(--color-ordinace);} .optika .contacts li svg {fill: var(--color-optika);} .estetika .contacts li svg {fill: var(--color-estetika);} .ordinace .contacts li a:hover {color: var(--color-ordinace) !important;} .operator .contacts li a:hover, .optika .contacts li a:hover {color: var(--color-optika) !important;} .estetika .contacts li a:hover {color: var(--color-estetika) !important;} @media screen and (max-width: 1080px) { .contacts {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 1em;} .contacts li {width: auto;} .contacts li a br {display: none;} } .scopes {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) var(--gap1); padding-top: 2em; margin-top: 1em; border-top: solid 1px rgba(0,0,0,0.2);} .scope {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.4em 0;} .scope h2 {margin-bottom: -0.15em;} .scope :is(h3, p) {padding: 0;} .scope h3 {font-size: 1em;} .scope .contacts {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.4em 1em;} .scope .contacts li {width: auto;} .scope .hours {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em 0; box-sizing: border-box; position: relative;} .scope .hours .anchor {display: block; width: 1px; height: 1px; position: absolute; left: -9999px; top: -3em;} .scope .hours > * {padding: 0;} .scope .hours h3 {font-size: 1.35em;} .scope .hours h3:has(+ .subheadline) {margin-bottom: 0;} .scope .hours .subheadline {display: block; width: 100%; font-size: 0.9em; font-weight: 500; line-height: 1.35em; margin-block: -0.5rem 0.15rem;} .scope .hours table td {vertical-align: top;} .scope .hours table td:not(:last-child) {padding-right: 0.65em;} .scope .hours table td:nth-child(1) {width: 1em;} .scope .hours table td:nth-child(2), .scope .hours table td:nth-child(3) {width: 4.3em;} .scope .hours table td .info {font-weight: 500;} .scope .hours table .note {font-size: 0.85em; line-height: 1.2em;} .scope.ordinace h2, .scope.ordinace .hours table td .info {color: var(--color-ordinace);} .scope.optika h2, .scope.optika .hours table td .info {color: var(--color-optika);} .scope.estetika h2, .scope.estetika .hours table td .info {color: var(--color-estetika);} @media screen and (min-width: 1081px) { .scope {width: calc(50% - var(--gap1) / 2);} .scope .contacts {padding-inline: var(--padding2); box-sizing: border-box;} .scope :is(h3, p) {text-align: left;} .scope .hours table {font-size: 0.9em;} } @media screen and (max-width: 1080px) { .scope {width: 100%;} .scope > div {width: 100%; justify-content: center;} .scope .left {gap: 1em 1.5em;} .scope .hours .subheadline {text-align: center;} } @media screen and (min-width: 541px) and (max-width: 768px){ .scope > div {width: 12em;} } @media screen and (min-width: 541px) { .scope .hours {background: var(--color2); padding: 1.8em; border-radius: var(--border-radius);} } @media screen and (max-width: 540px) { .scope > div {width: 100%;} .scope .hours table {font-size: 0.9em;} } .feedback-cta {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; gap: var(--gap1); padding-top: 2em; margin-top: 1em; border-top: solid 1px rgba(0,0,0,0.2);} .feedback-cta > div {display: block;} .feedback-cta > div p {margin-top: 0.8rem;} .feedback-cta > img {display: block; width: 9em; border: solid 1px rgba(0,0,0,0.1); box-shadow: 0 0 0.8em rgba(0,0,0,0.1);} @media screen and (min-width: 1081px) { .feedback-cta > div {flex-grow: 2;} .feedback-cta > div p {padding-inline: var(--padding2); box-sizing: border-box;} } @media screen and (max-width: 1080px) { .feedback-cta {justify-content: center; flex-wrap: wrap;} .feedback-cta > div p {text-align: center;} } .scopes-more {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) var(--gap1);} .scopes-more > div {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 1.6em;} .scopes-more > div .title {display: block; width: 100%; font-size: min(1.6em, calc(0.8em + 5vw)); font-weight: 500; text-transform: uppercase;} .scopes-more > div > div {display: block; width: 8em;} .scopes-more > div > div span {display: block; font-size: 0.9em;} .scopes-more .ordinace .title {color: var(--color-ordinace);} .scopes-more .optika .title {color: var(--color-optika);} .scopes-more .estetika .title {color: var(--color-estetika);} @media screen and (min-width: 1081px) { .scopes-more > div {width: calc(33.33% - var(--gap1) * 2 / 3);} } @media screen and (max-width: 1080px) { .scopes-more {max-width: 20em; margin-inline: auto;} .scopes-more > div {width: 100%; justify-content: center;} .scopes-more > div .title {text-align: center;} .scopes-more > div > div {text-align: center;} } .form {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75em 0; margin: 1.5em 0; padding: min(calc(1rem + 5vw), 2.5em); background: var(--color2); box-sizing: border-box; position: relative;} .form .anchor {display: block; width: 1px; height: 1px; position: absolute; left: -9999px; top: -1.5em;} .form h2 {text-align: center;} .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: #666666; font-weight: 700; padding: 0 1rem; box-sizing: border-box;} .form .form-item :is(input, textarea, .custom-select) {display: block; width: 100%; font-size: 0.9em; font-weight: 700; color: var(--color0); background: white; outline: none; border: solid 2px rgba(0,0,0,0.12); 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 auto; opacity: 0.8;} @media screen and (min-width: 1081px) { .form .form-item {width: calc(33.33% - 0.3rem);} } @media screen and (min-width: 961px) { .form {padding-inline: 6.5em;} } @media screen and (min-width: 725px) and (max-width: 1080px){ .form .form-item {width: calc(50% - 0.4rem);} } @media screen and (max-width: 724px) { .form {padding-inline: 9vw;} .form .form-item {width: 100%;} } .custom-select {position: relative; height: var(--form-item-height);} .custom-select .sel {display: flex; width: 100%; height: calc(var(--form-item-height) - 2px); align-items: center; flex-wrap: wrap; font-size: 1em; color: var(--color0); font-weight: 700; box-sizing: border-box; cursor: pointer; position: relative; z-index: 2; transition: .2s ease-in-out;} .custom-select .sel:hover {color: var(--color0);} .custom-select > svg {display: block; width: 0.7em; fill: var(--color1); position: absolute; right: 1em; top: 1.2em; z-index: 1;} .custom-select .dropdown {display: none; width: calc(100% + 2px); background: white; box-shadow: 0 0 0.35em rgba(0,0,0,0.25); border-radius: 0.6em; overflow: hidden; box-sizing: border-box; margin-top: 0.2em; position: absolute; left: -1px; top: var(--form-item-height); z-index: 8;} .custom-select .dropdown .inner {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; gap: 0.6rem; --dropdown-padding: 1rem; overflow-y: auto;} .custom-select .inner ul {display: block; width: 100%;} .custom-select .inner ul li {display: flex; width: 100%; min-height: 2em; align-items: center; font-size: 0.9em; line-height: 1.1em; color: #666666; border-top: solid 1px rgba(0,0,0,0.1); padding: 0.65em 1.4em; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .custom-select .inner ul li:after {display: block; width: 0.4em; height: 0.6em; opacity: 0.5; position: absolute; right: 0.9em; top: calc(50% - 0.3em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 512'%3E%3Cpolygon points='-1.1,46.4 208.6,256 -1.1,465.6 45.3,512 301.3,256 45.3,0' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;} .custom-select .inner ul li:hover {color: var(--color0); background: rgba(0,0,0,0.04);} .custom-select .inner ul li:hover:after {opacity: 0.9;} .pricelist:not(:first-of-type) {margin-top: min(calc(0.8rem + 4vw), 4rem);} .pricelist {align-items: flex-start;} .pricelist .img {display: block; position: relative; z-index: -1; border-radius: 0 !important; overflow: visible !important;} .pricelist .img:before {display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; content: "";} .pricelist .table {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.3rem;} .pricelist .table:not(:first-child) {padding-top: 1em; margin-top: em; border-top: solid 1px rgba(0,0,0,0.2);} .pricelist .table :is(h3, h4) {display: block; width: 100%; text-align: left; font-size: 1.15em !important; text-transform: none; color: var(--color0); font-weight: 500; margin: 0;} .pricelist table {width: 100%;} .pricelist table td {color: var(--color0); line-height: 1.3em; vertical-align: top;} .pricelist table td:first-child {text-align: left;} .pricelist table td:last-child {width: 5em; text-align: right; font-weight: 600;} .pricelist.ordinace :is(h2, td:last-child) {color: var(--color-ordinace);} .pricelist.optika :is(h2, td:last-child) {color: var(--color-optika);} .pricelist.estetika :is(h2, td:last-child) {color: var(--color-estetika);} @media screen and (min-width: 1081px) { .pricelist:nth-child(even) > *:nth-child(2) {order: -1;} .pricelist h2 {font-size: 2.7em !important;} .pricelist h3 {font-size: 1.6em !important;} .pricelist .img {width: 100%; padding-top: 80%;} .pricelist .img:before {width: 140%; height: 100%; position: absolute; top: 0%;} .pricelist.ordinace .img:before {background-image: url("/data/sliderHP/ordinace.jpg?r=1");} .pricelist.optika .img:before {background-image: url("/data/cenik/kontaktni-cocky.jpg?r=1");} .pricelist.estetika .img:before {background-image: url("/data/sliderHP/estetika.jpg?r=1");} .pricelist:nth-child(odd) .img:before {left: -45%; transform: rotateY(180deg);} .pricelist:nth-child(even) .img:before {right: -45%;} .pricelist .table :is(h3, h4) {padding-inline: var(--padding1);} .pricelist table td:first-child {padding-left: var(--padding1);} .pricelist table td:last-child {padding-right: var(--padding1);} } @media screen and (max-width: 1080px) { .pricelist .img {display: none !important;} } .scope-detail {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2);} .scope-hero {display: flex; width: 100%; align-items: center; flex-wrap: wrap;} .scope-hero > div {display: block;} .scope-hero > div h1 {margin-bottom: 1.8rem;} .scope-hero > div .locations {display: flex; width: 100%; gap: 1.5em 0; box-sizing: border-box;} .scope-hero > div .locations > div {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.5em;} .scope-hero > div .locations > div h2 {font-size: 1.5em; padding: 0; margin-bottom: -0.2em;} .scope-hero > div .locations > div p {padding: 0;} .scope-hero > div .locations > div .button {font-size: 0.7em;} .scope-hero .img {display: block; position: relative; z-index: -1; border-radius: 0 !important; overflow: visible !important; transform: scale(1.25);} .scope-hero .img:before {display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; content: "";} .ordinace .scope-hero .img:before {background-image: url("/data/sliderHP/ordinace.jpg?r=1");} .optika .scope-hero .img:before {background-image: url("/data/sliderHP/optika.jpg?r=1");} .estetika .scope-hero .img:before {background-image: url("/data/sliderHP/estetika.jpg?r=1");} @media screen and (min-width: 1081px) { .scope-hero {justify-content: space-between;} .scope-hero > div:nth-child(1) {width: 52%;} .scope-hero > div:nth-child(2) {width: 45%;} .scope-hero > div .locations {max-width: 27em; padding-left: var(--padding2);} .scope-hero .img {padding-top: 30%;} .scope-hero .img:before {width: 160%; height: 150%; position: absolute; left: 0; top: -25%;} } @media screen and (max-width: 1080px) { .scope-hero {justify-content: center;} .scope-hero > div .locations {justify-content: center; flex-wrap: wrap;} .scope-hero > div .locations > div {width: 11em; justify-content: center;} .scope-hero > div .locations > div .contacts {gap: 0.2em;} } @media screen and (min-width: 640px) and (max-width: 1080px){ .scope-hero .img {width: 100%; padding-top: 61%; position: relative; margin-block: -5%; transform: scale(1);} .scope-hero .img:before {width: 100%; height: 100%; left: 0; top: 0;} } @media screen and (max-width: 640px) { .scope-hero .img {width: 100%; padding-top: 80%; position: relative; left: 0;} .scope-hero .img:before {width: 140%; height: 100%; left: 0; top: 5%;} } .infographics {display: flex; width: 100%; flex-wrap: wrap; gap: var(--infographics-gap); --infographics-gap: 0.6em;} .infographics > div {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6em; background: var(--color2); padding: 1.5em; box-sizing: border-box; border-radius: var(--border-radius);} .infographics > div svg {display: block; width: 3.5em; margin-bottom: 0.2em;} .infographics > div h3 {text-align: center; font-size: 1.2em; padding: 0;} .infographics > div .button {font-size: 0.75em;} .ordinace .infographics > div svg {fill: var(--color-ordinace);} @media screen and (min-width: 1081px) { .infographics.i3 > div {width: calc(33.33% - 2 / 3 * var(--infographics-gap));} .infographics.i4 > div {width: calc(25% - 3 / 4 * var(--infographics-gap));} } @media screen and (max-width: 1080px) { .infographics.i3 {justify-content: center;} } @media screen and (min-width: 401px) and (max-width: 1080px){ .infographics > div {width: calc(50% - 0.5 * var(--infographics-gap));} } @media screen and (max-width: 768px) { .infographics > div svg {width: 3em;} .infographics > div h3 {font-size: 1.1em;} .infographics > div .button {font-size: 0.7em;} } @media screen and (max-width: 400px) { .infographics > div {width: 100%;} } .short-text {display: block; width: 100%;} @media screen and (min-width: 1081px) { .short-text p {max-width: 30em;} } .services {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em;} .services > div {display: block; background: var(--color2); padding: 1.5em; box-sizing: border-box; border-radius: var(--border-radius);} .services > div > * {padding: 0;} .ordinace .services > div h3 {color: var(--color-ordinace);} .optika .services > div h3 {color: var(--color-optika);} .estetika .services > div h3 {color: var(--color-estetika);} @media screen and (min-width: 769px) { .services > div {width: calc(50% - 0.5em);} .services > div > * {text-align: left;} } @media screen and (max-width: 768px) { .services > div {width: 100%;} } .services2 {display: block; width: 100%;} .services2 article {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: 1.5rem;} .services2 article:not(:first-of-type) {padding-top: 1.65rem; border-top: solid 1px rgba(0,0,0,0.25);} .services2 article > div {display: flex; flex-wrap: wrap; gap: 0.6em;} .services2 article > div h3 {font-size: 1.7em; margin-block: 0 !important;} .services2 article > div h4 {display: block; width: 100%; font-size: 1.3em; color: var(--color0); font-weight: 500; margin-top: 1rem;} .services2 article > div p {padding: 0;} .ordinace .services2 h3 {color: var(--color-ordinace);} .optika .services2 h3 {color: var(--color-optika);} .estetika .services2 h3 {color: var(--color-estetika);} @media screen and (min-width: 1081px) { .services2 article > div:nth-child(1) {width: 30%;} .services2 article > div:nth-child(2) {width: 65%;} .services2 article > div h4:first-of-type {margin-top: 0;} } @media screen and (max-width: 1080px) { .services2 article > div {width: 100%;} .services2 article > div h3 {text-align: center;} } .equipment {display: block; width: 100%;} .equipment .cols {margin-top: var(--gap2);} .equipment .cols:first-of-type {margin-top: var(--gap1);} .equipment .cols h3 {margin-bottom: -0.5em;} .equipment .cols .img {display: flex; overflow: visible;} .equipment .cols .img span {display: block; height: 100%; aspect-ratio: 2; overflow: visible;} .equipment .cols .img span img {display: block; width: 100%; height: 100%; object-fit: contain; position: relative; inset: auto;} @media screen and (min-width: 1081px) { .equipment .cols .img {height: 20em;} .equipment .cols:nth-of-type(odd) .img {left: -10%;} .equipment .cols:nth-of-type(even) .img {justify-content: flex-end;right: -10%;} .equipment .cols:nth-of-type(even) .img span img {/*transform: rotateZ(180deg);*/} } @media screen and (max-width: 1080px) { .equipment .cols .img {justify-content: center;} .equipment .cols .img span {padding-inline: 1em; box-sizing: border-box;} } .ordinace .equipment h3 {color: var(--color-ordinace);} .optika .equipment h3 {color: var(--color-optika);} .estetika .equipment h3 {color: var(--color-estetika);} .steps {display: block; width: 100%;} .steps ol {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em; list-style: none; counter-reset: li; padding: 0; margin-top: 0.7rem;} .steps ol li {display: block; width: 100%; background: var(--color2); padding: 0.8em 1.5em 0.8em 4em; position: relative; border-radius: 2em; box-sizing: border-box; overflow: hidden; counter-increment: li;} .steps ol li:before {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; color: white; font-weight: 500; line-height: 1em; padding-top: 0.1em; box-sizing: border-box; border-radius: 100%; position: absolute; left: 1em; top: 1em; content: counter(li);} .ordinace .steps ol li:before {background: var(--color-ordinace);} .optika .steps ol li:before {background: var(--color-optika);} .estetika .steps ol li:before {background: var(--color-estetika);} .video {display: block; width: 100%;} .video .iframe {display: block; width: 100%; margin-top: 0.4rem;} .video .iframe iframe {display: block; width: 100%; aspect-ratio: 0.5625;} .videos {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2rem 0;} .videos > div {display: block;} .videos > div h2 {font-size: 1.8em; margin-bottom: 0.4rem;} .videos > div iframe {display: block; aspect-ratio: 0.5625;} .ordinace .videos > div h2 {color: var(--color-ordinace);} .optika .videos > div h2 {color: var(--color-optika);} .estetika .videos > div h2 {color: var(--color-estetika);} @media screen and (min-width: 960px) { .videos > div {width: calc(50% - 0.6em);} } @media screen and (max-width: 960px) { .videos > div {width: 100%;} } .cta1 {display: flex; width: 100%; gap: 0.7em 3%; background: var(--color2); box-sizing: border-box; border-radius: 2.2em;} .cta1 h2 {font-size: min(calc(1em + 3vw), 1.5em); padding: 0;} .cta1 .soc {display: flex; align-items: center; gap: 0.35em;} .cta1 .soc a {display: block; width: 1.35em;} .cta1 .soc a img {display: block; width: 100%;} @media screen and (min-width: 1081px) { .cta1 {justify-content: space-between; align-items: center; padding: 1rem 1.6rem;} .cta1 h2 {width: auto; white-space: nowrap; margin-top: 0.6rem;} } @media screen and (max-width: 1080px) { .cta1 {justify-content: center; flex-wrap: wrap; padding: 1.8rem 1.6rem;} .cta1 .button {font-size: 0.9em;} .cta1 .soc {width: 100%; justify-content: center;} } .logos {display: flex; width: 100%; justify-content: space-evenly; flex-wrap: wrap; gap: 1em 2em;} .logos > a {display: block; height: min(2em, calc(0.5em + 2vw));} .logos > a img {display: block; height: 100%;} .before-after {display: block; width: 100%;} .before-after .twentytwenty-wrapper {display: block; width: 100%; height: 100%; position: absolute; inset: 0;} .before-after .twentytwenty-container {height: 100% !important;} .before-after .twentytwenty-overlay, .before-after .twentytwenty-before-label, .before-after .twentytwenty-after-label {display: none;} .change {display: block; width: 100%;} .change .gallery {margin-top: 0.7rem;} .change .before-after {position: absolute; inset: 0;} @media screen and (max-width: 768px) { .change .gallery .swiper-slide {padding-top: 56%;} } .widget {display: flex; width: 100%; justify-content: center; background: var(--color2); padding: 1.4em; box-sizing: border-box; border-radius: var(--border-radius);} .wndw {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 5em min(1rem, 5%) 4.5em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;} .wndw:before {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;} .wndw > .outer {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;} .wndw > div {width: 100%; max-width: 40em; max-height: calc(100vh - 4rem); background: white; position: relative; border-radius: var(--border-radius); overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;} .wndw > div:before {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;} .wndw > div .overflow {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;} .wndw.show {left: 0;} .wndw.show:before {opacity: 1;} .wndw.show > div {top: 0;} .wndw.show.hide {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;} .wndw.show.hide:before {opacity: 0;} .wndw.show.hide > div {top: -5em; opacity: 0;} .wndw .cross {display: block; width: 1.2em; height: 1.2em; font-size: 1em; cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 10002;} .wndw .cross span {display: block; width: 100%; height: 3px; background: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;} .wndw .cross:hover span {background: #252525;} .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; flex-wrap: wrap; gap: 1em; font-size: 1rem; padding: 2.6rem max(1rem, 7%) max(1rem, 7%); box-sizing: border-box;} .wndw .wndw-content .title {display: block; width: 100%; text-align: center; font-size: 1.5em; font-weight: 700; margin-bottom: 0.2rem;} .wndw .wndw-content .title span {display: block; font-weight: 400;} .wndw .wndw-content p {display: block; width: 100%; text-align: center; font-size: 1em; line-height: 1.4em;} .wndw .wndw-content strong, .wndw .wndw-content b { font-weight:600; } .wndw .wndw-content .flex {align-items: center; gap: 0.7em 1em;} .wndw .wndw-content .button {font-size: 0.9em;} .wndw .wndw-content .button.color-green {background: #06c720; color: white;} .wndw .wndw-content .button.color-green:hover {background: #00b318;} .wndw h2 { display:block; font-weight:600; font-size:1.6em; margin:1.2em 0 0.2em 0; text-align:left !important; display:block; width:100%; } .wndw p { text-align:left !important; } .wndw a {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;} .wndw a:hover {color: var(--color0b) !important; text-decoration-color: transparent;} #oteviraciDobaWnwd { display:block; width:100%; } #oteviraciDobaWnwd > h2 { display:block; font-weight:600; font-size:1.4em; margin:1.2em 0 1.2em 0; text-align:left; } #oteviraciDobaWnwd h3 { font-weight:600; font-size:1.2em; margin-bottom:0.2em; } #oteviraciDobaWnwd h4 { font-size:1em; margin-top:1em; } #oteviraciDobaWnwd ul li { } #oteviraciDobaWnwd > div { display:flex; } #oteviraciDobaWnwd > div > div { flex:1; } #oteviraciDobaWnwd > div > div:nth-child(1) { } #oteviraciDobaWnwd > div > div:nth-child(2) { border-left:1px solid black; padding-left:2em; } .foto2 { /*min-height:350px;*/ } .foto2 .gallery {display: block; width: 100%; height:100%; position: relative;} .foto2 .gallery .swiper {display: block; width: 100%; height:100%; overflow: hidden;} .foto2 .gallery.visible .swiper {overflow: visible;} .foto2 .gallery .swiper-slide {display: flex; width: 100%; height: auto; justify-content: center; align-items: center; text-align: center; /*padding-top: 22%;*/ overflow: hidden; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;} .foto2 .gallery .swiper-slide a {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; cursor: pointer;} .foto2 .gallery .swiper-slide a img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;} .foto2 .gallery .swiper-slide:hover a img {opacity: 0.8;} @media screen and (max-width: 1080px) { .foto2 .gallery .swiper-slide {/*padding-top: 33%;*/ height:200px;} } @media screen and (min-width: 541px) { .foto2 .gallery .swiper-button-prev {font-size: 0.9em; left: calc(0px - var(--swiper-button) / 2);} .foto2 .gallery .swiper-button-next {font-size: 0.9em; right: calc(0px - var(--swiper-button) / 2);} } .foto2 .gallery.auto .swiper-slide {padding-top: 0; height: min(calc(5rem + 12vw), 17rem);} .foto2 .gallery.auto .swiper-slide a {width: auto; position: relative; inset: auto;} .foto2 .gallery.auto .swiper-slide a img {position: relative;} /*.foto2 .gallery.auto {--gallery-auto-height:13rem;} .foto2 .gallery.auto .swiper-slide {padding-top: 0; height: var(--gallery-auto-height);} .foto2 .gallery.auto .swiper-slide a {width: auto; height: var(--gallery-auto-height); position: relative; inset: auto;} .foto2 .gallery.auto .swiper-slide a img {width: auto; height: var(--gallery-auto-height); } */ @media screen and (max-width: 768px) { .foto2 .gallery.auto .swiper-slide {padding-top: 0; height: min(calc(5rem + 22vw), 20rem);} } /*@media screen and (max-width: 540px) { .foto2 .gallery.auto {--gallery-auto-height:8rem;} }*/ .kform2 .radioBTN { } .kform2 .radioBTN input { max-width:22px; display:inline-block !important; position:relative; top:19px; }