/*------------------------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; } /*------------------------------------------------------*/ .c3 { background: #B69B59 !important; } .c3:hover { background: #a58a45 !important; } .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%;} .prime-box.pb2 .karty { width:100%;margin-top:1rem; position:relative; left:-1rem; background-color:black; margin-top:8rem; } #in_podnety_message, #in_kontakt_message, #in_message, #in_prime_mail, #in_kariera_message, #in_poptat_phone, #in_prime_required, #in_prime_required2, #in_poptat_required, #in_pls_mail { position: absolute; left: -9999em; top: 0; } body { display: block !important; } :root { --font1: "inter-variable", sans-serif; /* font-variation-settings: "slnt" 0, "wght" 400; */ --color0-50: #FAFAFA; --color0-100: #F5F5F5; --color0-200: #E9EAEB; --color0-300: #D5D7DA; --color0-400: #bdbdbd; --color0-500: #717680; --color0-600: #535862; --color0-900: #101828; --color1: #050549; /* Brand Blue */ --color1-100: #EFEFFB; --color1-200: #C7B9DA; --color1-300: #4A5578; --color1-400: #2E2E7D; --color1-500: #17176b; --color2: #DB0A5B; /* Brand Red */ --color2-100: #FCC5DA; --color2-200: #FBB1CE; --color2-400: #F977A8; --color2-500: #F52977; --color2-800: #C30950; --color2-900: #880638; --color2-50: #FDD8E6; --color2-25: #FEECF3; --color3a: #D9CFB6; /* MediPrime */ --color3b: #CBC0A6; --color3c: #B69B59; --color3d: #a58a45; --color4-300: #FDA29B; --header-height: 6rem; --wrapper-side: 4.5vw; --section-padding: min(4.5rem, calc(0.8rem + 4vw)); --box-shadow1: 0 0.2em 0.3em -0.12em rgba(10,13,18,0.03), 0 0.6em 0.7em -0.2em rgba(10,13,18,0.08); --gap1: 0.6rem; --gap2: 1.4rem; --gap3: 2rem; --article-gap: min(var(--gap3), calc(0.5rem + 3vw)); --border-radius0: 0.5rem; --border-radius1: 1rem; --border-radius2: 1.6rem; --border-radius3: 3rem; --grid-gap: 0.8rem; --padding1: min(3rem, calc(1.1rem + 3vw)); } button {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: 'lato', sans-serif; transition: .15s ease-in-out;} html, body, form {width: 100%;} html {height: 100%; overflow-x: hidden;} body {display: flex; min-height: 100%; font-size: min(16px, calc(6px + 2vw)); color: var(--color0-600); font-variation-settings: "wght" 400; line-height: 1.5; position: relative; font-family: var(--font1); overflow-x: hidden;} body.pattern:after {display: block; width: 90em; height: 50em; background: url("images/pattern-dots.png") no-repeat center bottom; background-size: cover; position: absolute; left: calc(50% - 45em); top: 0; content: "";} body.fixed {height: 100%; overflow-y: hidden;} body.fixed :is(.main, .footer) {opacity: 0.65; filter: blur(4px);} form {display: flex; flex-direction: column;} .wrapper {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 2040px; flex-wrap: wrap; margin-inline: auto; position: relative;} .wrapper.thin {max-width: 40rem;} .wrapper.narrow {max-width: 48rem;} .wrapper.medium {max-width: 58rem;} .message {display: block; width: 100%; font-size: 0.85em; padding-block: 0.6em; position: relative; z-index: 10;} .message .wrapper {min-height: 0;} .message .inner {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 1.2em; background: var(--color0); padding: 0.65em 0.85em; border-radius: 0.4em; box-sizing: border-box;} .message.red .inner {background: var(--color2);} .message.green .inner {background: #0aa653;} .message.blue .inner {background: var(--color1);} .message .inner p {color: white;} .message .inner p a {color: white; text-decoration: underline;} .message .inner p a:hover {color: white; text-decoration-color: transparent; opacity: 0.85;} .message .inner .close {display: block; width: 1em; height: 1em; position: relative; top: -0.1em; cursor: pointer; flex-shrink: 0; transition: .15s ease-in-out;} .message .inner .close:before, .message .inner .close:after {display: block; width: 90%; height: 0.12em; background: white; position: absolute; left: 5%; top: 0.75em; content: "";} .message .inner .close:before {transform: rotate(45deg);} .message .inner .close:after {transform: rotate(-45deg);} .message .inner .close:hover {opacity: 0.7;} .header {display: block; width: 100%; height: var(--header-height); position: relative; z-index: 10000; transition: .2s ease-in-out;} .header .wrapper {height: var(--header-height); justify-content: space-between; align-items: center; gap: 0.6em; position: relative;} .header .logo {display: block; position: relative; z-index: 10;} .header .logo img {display: block; width: 100%;} .header .collapse {display: flex;} .header nav {display: flex;} .header nav > ul {display: flex; box-sizing: border-box;} .header nav > ul > li {display: flex; align-items: center; font-variation-settings: "wght" 500;} .header nav > ul > li:has(> div) > a:after {display: block; width: 0.8em; height: 0.4em; margin-left: 0.35em; background: url("images/icons/chevron-down.svg") no-repeat center center; background-size: contain; content: "";} .header nav > ul > li > a {display: flex; align-items: center; color: var(--color0-900); position: relative; box-sizing: border-box; cursor: pointer; transition: .2s ease-in-out;} .header nav > ul > li:hover > a, .header nav > ul > li > a[aria-current="page"] {color: var(--color2);} .header nav > ul > li ul {display: block; box-sizing: border-box;} .header nav > ul > li ul li {display: block;} .header nav > ul > li ul li a {display: flex; flex-direction: column; align-items: flex-start; font-size: 0.9em; color: var(--color0-900); font-variation-settings: "wght" 600; padding: 0.6em 1em 0.6em 2.7em; border-radius: calc(0.7 * var(--border-radius1)); box-sizing: border-box; white-space: nowrap; position: relative; transition: .15s ease-in-out;} .header nav > ul > li ul li a img {display: block; width: 1.15em; height: auto; position: absolute; left: 1em; top: 0.86em;} .header nav > ul > li ul li a .dscr {display: inline-block; width: 100%; font-size: 0.85em; color: var(--color0-600); font-variation-settings: "wght" 400; line-height: 1.5; margin-top: -0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .header nav > ul > li ul li a:hover {background: var(--color0-100);} .header nav > ul > li > div {display: block; background: white; box-sizing: border-box;} .header nav > ul > li > div .inner {display: flex; width: 100%; box-sizing: border-box;} .header nav > ul > li > div .inner > div {display: flex; flex-direction: column; gap: 0.4em; align-items: flex-start; box-sizing: border-box;} .header nav > ul > li > div .inner > div .title {display: block; font-size: 0.9em; color: var(--color2); font-variation-settings: "wght" 600;} .header nav > ul > li > div .inner > div:last-child {background: var(--color1-100);} .header .img-preview {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; margin-top: 0.7em; box-sizing: border-box;} .header .img-preview .img {display: block; width: 33%; border-radius: 0.6em; overflow: hidden;} .header .img-preview .img img {display: block; width: 100%; transition: .2s ease-in-out;} .header .img-preview > div {display: block; width: 63%; margin-block: -0.1em 0.1em;} .header .img-preview > div .headline {display: block; font-size: 0.9em; font-variation-settings: "wght" 600; line-height: 1.5; transition: .2s ease-in-out;} .header .img-preview > div .dscr {display: block; font-size: 0.75em; color: var(--color0-600); line-height: 1.5;} .header .img-preview a {display: block; position: absolute; inset: 0; z-index: 2;} .header .img-preview:hover .img img {filter: brightness(1.15);} .header .img-preview:hover .headline {color: var(--color2);} .header .prime-preview {display: flex; flex-wrap: wrap; background: var(--color1); box-sizing: border-box;} .header .prime-preview .img {display: block; width: 100%; border-radius: 0.6em; overflow: hidden; margin-bottom: 0.5em;} .header .prime-preview .img img {display: block; width: 100%; transition: .2s ease-in-out;} .header .prime-preview span {display: block; width: 100%; color: white;} .header .prime-preview .headline {font-variation-settings: "wght" 600;} .header .prime-preview .dscr {font-size: 0.75em; line-height: 1.5;} .header .prime-preview .links {display: flex; width: 100%; gap: 0.2em 0.7em; margin-top: 0.3em;} .header .prime-preview .links a {display: block; font-size: 0.9em; font-variation-settings: "wght" 600; text-decoration: underline; text-decoration-color: transparent; transition: .2s ease-in-out;} .header .prime-preview .links a:nth-child(1) {color: white;} .header .prime-preview .links a:nth-child(1):hover {color: var(--color1-100); text-decoration-color: var(--color1-100);} .header .prime-preview .links a:nth-child(2) {color: var(--color3b);} .header .prime-preview .links a:nth-child(2):hover {color: var(--color3a); text-decoration-color: var(--color3a);} .header .header-clinic-preview {display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em; background: var(--color1-100); padding: 1.4em; border-radius: 0.6em; box-sizing: border-box;} .header .header-clinic-preview .headline {display: block; font-size: 1.1em; color: var(--color0-900); font-variation-settings: "wght" 600; transition: .2s ease-in-out;} .header .header-clinic-preview .headline:hover {color: var(--color2)} .header .header-clinic-preview .dscr {display: block; font-size: 0.85em; color: var(--color0-500); line-height: 1.5;} .header .header-clinic-preview .links {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em 0.8em;} .header .header-clinic-preview .links a {display: block; font-size: 0.9em; color: var(--color0-500); font-variation-settings: "wght" 600; transition: .2s ease-in-out;} .header .header-clinic-preview .links a:hover {color: var(--color2)} .header .header-clinic-preview .img {display: block; width: 100%; aspect-ratio: 16/9; border-radius: 0.5em; overflow: hidden; margin-block: 0.35em;} .header .header-clinic-preview .img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: .2s ease-in-out;} .header .header-clinic-preview .img:hover img {filter: brightness(1.15);} .header .prime .dropdown-box > div {background: var(--color3a); border-color: var(--color3b);} .header .prime .dropdown-box > div .contact-type {color: var(--color1);} .header .booking {position: absolute; right: 2.7em;} .header .lang {display: flex;} .header .lang ul {display: flex; overflow: hidden;} .header .lang ul li a {display: flex; height: 100%; align-items: center; gap: 0.4em; font-size: 1em; color: var(--color0-500); box-sizing: border-box; transition: .15s ease-in-out;} .header .lang ul li a img {display: block; width: auto; height: 100%;} @media screen and (min-width: 1201px) { body {padding-top: var(--header-height);} .header {position: fixed; top: 0;} .header.scroll {background: rgba(255,255,255,0.7); backdrop-filter: blur(200px);} .header .logo {width: 10.5em;} .header .collapse {width: calc(100% - 13em); height: 100%; align-items: center;} .header nav {height: 100%; justify-content: space-between; align-items: center; flex-grow: 2; gap: 1.4em; font-size: 1em;} .header nav > ul {height: 100%; gap: 1.1em;} .header nav > ul > li {height: 100%;} .header nav > ul > li.important:before {display: inline-block; width: 0.45em; height: 0.45em; background: var(--color2); border-radius: 100%; margin-right: 0.45em; position: relative; top: 0.04em; content: "";} .header nav > ul > li > a {height: 100%;} .header nav > ul > li:has(> div) > a:after {display: block; width: 0.8em; height: 0.4em; margin-left: 0.35em; background: url("images/icons/chevron-down.svg") no-repeat center center; background-size: contain; content: "";} .header nav > ul > li:not(:has(.full-width)) {position: relative;} .header nav > ul > li:not(:has(.full-width)) .inner {padding: 0.8em;} .header nav > ul > li > div {max-height: calc(100svh - var(--header-height) - 1rem); overflow-y: auto; position: absolute; left: -9999px; top: var(--header-height); z-index: 20; opacity: 0; margin-top: 0; border-radius: 0.8em; border-radius: var(--border-radius1); transition: opacity .2s ease-in-out, margin-top .2s ease-in-out;} .header nav > ul > li > div .inner {justify-content: space-between;} .header nav > ul > li.hover > div {left: 0; opacity: 1; margin-top: -0.9em; box-shadow: var(--box-shadow1);} .header nav > ul > li > div.full-width {width: 100%;} .header nav > ul > li > div:not(.full-width) {margin-left: -1em;} .header nav > ul > li > div .mobile-only-title {display: none;} .header nav > ul > li > div .inner > div {padding: 1.9em;} .header nav .prime {display: block; margin-right: 7.6em; position: relative;} .header nav .prime .button, .header .booking .button {font-size: 0.9em;} .header .header-care .inner > div:nth-of-type(1) {width: 14em;} .header .header-care .inner > div:nth-of-type(1) ul{max-width: 100%;} .header .header-care .inner > div:nth-of-type(2) ul{column-count: 3;} .header .header-care .inner > div:nth-of-type(3) {width: 25em; flex-shrink: 0;} .header .header-care .inner > div:nth-of-type(-n+2){padding-right: 0;} .header .prime-preview {width: calc(100% + 1em); margin: 0.7em -0.5em -0.5em; border-radius: 0.8em; padding: 1.2em;} .header .header-clinics {padding: 1.2em;} .header .header-clinic-preview {width: 24%;} .header .lang {display: block; width: var(--lang-size); height: var(--lang-size); --lang-size: 1.4em; overflow: hidden; position: relative; transition: .15s ease-in-out;} .header .lang ul {width: 5.2em; height: calc(1.4em + var(--lang-size)); flex-direction: column; overflow: hidden; margin: -0.7em; border-radius: 0.7em; box-sizing: border-box;} .header .lang ul li {display: block; width: 100%; height: calc(1.4em + var(--lang-size)); box-sizing: border-box; position: relative; order: 1; cursor: pointer; transition: .15s ease-in-out;} .header .lang ul li a {width: 100%; padding: 0.7em;} .header .lang ul li a:hover {color: var(--colorO); cursor: pointer;} .header .lang ul li.sel {order: 0;} .header .lang ul li.sel a {color: var(--color0-900); pointer-events: none;} .header .lang ul li:not(.sel) a:hover {background: var(--color0-200);} .header .lang.hover {overflow: visible;} .header .lang.hover ul {height: auto; background: var(--color0-50); box-shadow: 0 0 0.5em rgba(0,0,0,0.25);} .header .lang.hover ul li {opacity: 1;} .header #navicon {display: none;} } @media screen and (min-width: 1201px) and (max-width: 1366px){ .header {font-size: 0.9rem;} .header .logo {width: 9.5em;} .header .collapse {width: calc(100% - 11.5em);} .header nav > ul {gap: 0.9em;} .header .header-care .inner > div:nth-of-type(2) ul {column-count: 2;} } @media screen and (max-width: 1200px) { .header .logo {width: 9em;} .header .collapse {width: var(--collapse-width); height: calc(100% - var(--header-height)); flex-direction: column; --collapse-width: 18rem; --inner-padding: 1.8em; background: white; overflow-X: hidden; position: fixed; right: calc(-1 * var(--collapse-width)); top: var(--header-height); border-radius: 1em 0 0 0; box-sizing: border-box; opacity: 0; box-shadow: var(--box-shadow1); transition: opacity .5s ease-in-out, right .5s ease-in-out;} .header .lang {display: flex; width: 100%; padding: var(--inner-padding) var(--inner-padding) 0; --lang-size: 1.2em; box-sizing: border-box; order: -1; position: absolute; left: 0; top: 0; transition: transform .4s ease-in-out;} .header .lang ul {display: flex; width: 100%; height: 100%; align-items: center; gap: 0.3em 1.2em;} .header .lang ul li {display: block; width: auto; height: var(--lang-size); transition: .15s ease-in-out;} .header .lang ul li a {opacity: 0.6;} .header .lang ul li a:hover {opacity: 1; cursor: pointer;} .header .lang ul li.sel a {color: var(--color1); font-variation-settings: "wght" 600; opacity: 1;} .header nav {display: flex; width: 100%; height: 100%; min-height: 30em; order: 0; flex-direction: column; box-sizing: border-box; position: relative; transition: transform .4s ease-in-out;} .header nav > ul {width: 100%; height: 100%; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; flex-grow: 2; padding-block: 3.8em;} .header nav > ul > li {width: 100%; flex-wrap: wrap;} .header nav > ul > li:not(:last-child) {border-bottom: solid 1px var(--color0-200);} .header nav > ul > li > a {width: 100%; justify-content: space-between; font-size: 1.1em; padding: 0.8em var(--inner-padding); box-sizing: border-box; cursor: pointer;} .header nav > ul > li > a.sel {background: var(--color0-100);} .header nav > ul > li:has(:is(ul, div)) > a:after {transform: rotate(-90deg);} .header nav > ul > li > div {width: 100%; height: 100%; opacity: 0; overflow-y: auto; position: absolute; left: 100%; top: 0; z-index: 5; transition: .4s ease-in-out;} .header nav > ul > li > div .inner {display: block;} .header nav > ul > li.show > div {opacity: 1; z-index: 6;} .header nav .mobile-only-title {display: flex; align-items: center; gap: 0.3em; font-variation-settings: 'wght' 600; margin: var(--inner-padding) var(--inner-padding) 0.8em; cursor: pointer;} .header nav .mobile-only-title:before {display: block; width: 1em; height: 1em; background: url("images/icons/chevron-down-color2.svg") no-repeat center bottom; background-size: contain; position: relative; top: -0.02em; transform: rotate(90deg); content: "";} .header nav > ul > li > div > div .title {padding-inline: var(--inner-padding); margin-top: 0.4em;} .header nav > ul > li ul {width: 100%;} .header nav > ul > li ul li a {padding-inline: calc(var(--inner-padding) + 1.7em) var(--inner-padding);} .header nav > ul > li ul li a img {left: var(--inner-padding); } .header nav .prime {width: calc(100% - 2 * var(--inner-padding)); margin-inline: var(--inner-padding); flex-shrink: 0; position: absolute; left: 0; bottom: var(--inner-padding);} .header nav .prime .dropdown-box {width: 100%; top: auto; bottom: 3.4em;} .header .header-care > div:nth-of-type(3) {padding-top: 0.9em; margin-top: 0.45em;} .header .img-preview {padding-inline: var(--inner-padding);} .header .prime-preview {width: 100%; padding: var(--inner-padding); margin-top: 0.45em;} .header .header-clinic-preview {width: calc(100% - 2 * var(--inner-padding)); margin: 0 var(--inner-padding) var(--inner-padding);} .header .collapse.show :is(nav, .lang) {transform: translateX(calc(-1 * var(--collapse-width)));} .header .booking {right: 2.9em; font-size: 0.85em;} .header #navicon {display: flex; width: 1.4em; height: 16px; font-size: 1em; cursor: pointer; position: relative; z-index: 10;} .header #navicon span {display: block; width: 100%; height: 0.16em; background: var(--color0-900); position: absolute; 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% - 0.08em);} .header #navicon span:nth-child(4) {bottom: 0;} .header #navicon div {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;} .header.show #navicon span:nth-child(2) {transform: rotate(45deg);} .header.show #navicon span:nth-child(3) {transform: rotate(-45deg);} .header.show #navicon span:nth-child(1), .header.show #navicon span:nth-child(4) {opacity: 0 !important;} .header.show #navicon div {display: block;} .header.show .collapse {right: 0; opacity: 1;} .header.show nav > ul:has(> li.show) {overflow: visible;} } @media screen and (max-width: 768px) { .header {--header-height: 4rem;} } .footer {display: block; width: 100%; padding-top: var(--section-padding); background: white;} .footer .wrapper > div {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;} .footer .upper {gap: 2rem 2rem;} .footer .upper > div {display: flex; flex-direction: column; align-items: flex-start; gap: 0.45em;} .footer .upper .logo {display: block; width: 9em; margin-block: -0.6em 0.8em;} .footer .upper .logo img {display: block; width: 100%;} .footer .upper .footer-info1 {display: block; font-size: 0.9em; color: var(--color0-600);} .footer .upper .footer-info1 strong {display: inline-block; width: 7em;} .footer .upper .title {display: block; font-size: 0.75em; color: var(--color0-500); font-variation-settings: 'wght' 500;} .footer .upper ul {display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em;} .footer .upper ul li a {font-size: 0.85em; color: var(--color0-600); font-variation-settings: 'wght' 600; transition: .2s ease-in-out;} .footer .upper ul li a:hover {color: var(--color2);} .footer .bottom {gap: 1em; padding-block: min(2.2em, calc(0.5em + 3vw)); margin-top: min(2.2em, calc(0.5em + 3vw)); border-top: solid 1px var(--color0-200);} .footer .bottom .copyright {display: block; font-size: 0.85em; color: var(--color0-500);} .footer .bottom .copyright a {color: var(--color0-500); text-decoration:underline;} .footer-soc {display: flex; gap: 1em;} .footer-soc a {display: block; width: 1.15em; height: auto; filter: grayscale(1); opacity: 0.5; transition: opacity .2s ease-in-out;} .footer-soc a img {display: block; width: 100%; height: auto;} .footer-soc a:hover {filter: grayscale(0); opacity: 1;} @media screen and (max-width: 960px) { .footer .upper {column-gap: 0;} .footer .upper > div {width: 48%;} .footer .upper > div:first-of-type {width: 100%;} } .booking {display: block; position: relative;} .booking .dropdown-box > div {background: var(--color2-25); border-color: var(--color2-50);} .dropdown-box {display: block; width: 17em; border-radius: 0.8em; position: absolute; right: -9999px; top: 3.6em; margin-top: 0.6em; opacity: 0; overflow: hidden; box-shadow: var(--box-shadow1); transition: opacity margin-top .15s ease-in-out;} .dropdown-box > div {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6em; padding: 1.4em; border-radius: 0.8em 0.8em 0 0; border: 1px solid transparent; box-sizing: border-box;} .dropdown-box .button {width: 100%; height: 4.2em; font-size: 0.8em; border-radius: 0;} .dropdown-element.show .dropdown-box {right: 0; opacity: 1; margin-top: 0;} .contact-type {display: block; position: relative; padding-left: 1.8em; box-sizing: border-box; margin-top: 0.3em;} .contact-type img {display: block; width: 1.3em; height: auto; position: absolute; left: 0; top: 0;} .contact-type strong {display: block; width: 100%; font-size: 0.9em; font-variation-settings: "wght" 600; line-height: 1.5;} .contact-type span {display: inline-block; font-size: 0.8em; color: var(--color0-500); line-height: 1.5;} strong {font-variation-settings: "wght" 600; color: var(--color0-900);} em {font-variation-settings: "slnt" -18;} em strong, strong em {font-variation-settings: "wght" 600, "slnt" -18;} .txt-color2 {color: var(--color2) !important;} .txt-color2-800 {color: var(--color2-800);} .txt-color3a {color: var(--color3a) !important;} .left-short {max-width: 38rem; text-align: left;} .tag1 {display: flex; min-height: 2.2em; align-items: center; gap: 0.5em; font-size: min(0.9em, calc(-0.2em + 4vw)); color: var(--color2); font-variation-settings: "wght" 500; line-height: 1.2; background: var(--color2-50); border-radius: 1.1em; padding: 0.4em 0.9em; box-sizing: border-box; margin-bottom: 0.6rem;} .tag1 .dot {display: block; width: 0.45em; height: 0.45em; background: var(--color2); border-radius: 100%;} .tag2 {display: block; font-size: 0.9em; color: var(--color2); font-variation-settings: "wght" 600; margin-bottom: 0.6rem;} h1, h2, h3, h4 {display: block; width: 100%; color: var(--color0-900); font-variation-settings: "wght" 600; line-height: 1.2; box-sizing: border-box; position: relative;} h1 {font-size: min(2.5rem, calc(0.7rem + 4vw));} h2 {font-size: min(2.45rem, calc(0.55rem + 4vw)); margin-bottom: calc(0.75 * var(--gap3));} h3 {font-size: min(1.85rem, calc(0.4rem + 4vw)); color: var(--color1);} h4 {font-size: min(1.25rem, calc(0.25rem + 3vw)); color: var(--color1);} h2:has(+ p) {margin-bottom: calc(0.5 * var(--gap3));} h2 + p {max-width: 80rem; margin-bottom: var(--gap3);} h1 .symbol, h2 .symbol, h3 .symbol {display: inline-block; font-size: 0.43em; margin-right: 0.8em; position: relative; top: 0.18em;} .tag1 + h2, .tag2 + h2 {margin-top: 0 !important;} .wrapper > h2:not(:first-child) {margin-top: var(--section-padding);} .wrapper > h2 + ul {margin-block: -0.5em var(--gap2);} .main {display: flex; width: 100%; flex-direction: column; flex-grow: 2; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2; transition: .3s ease-in-out;} .main :is(p, li) {font-size: 1em;} .main p {display: block; width: 100%; box-sizing: border-box;} .main p a, .main li a, .main td a {text-decoration: underline; color: var(--color0-900); transition: .15s ease-in-out;} .main p a:hover, .main li a:hover, .main td a:hover {color: var(--color2); text-decoration-color: transparent;} .main :is(p a.color2, li a.color2, td a.color2) {color: var(--color2);} .main :is(p a.color2, li a.color2, td a.color2):hover {color: var(--color2-900);} .bg-gradient.color1-100 {display: block; width: 100%; background-image: linear-gradient(to bottom, transparent, var(--color1-100), transparent);} .bg-gradient.color1-100.cut-top {background-image: linear-gradient(to bottom, var(--color1-100), transparent);} .section {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-top: var(--section-padding); box-sizing: border-box;} .section.padding-bottom {padding-bottom: var(--section-padding);} .section.padding-top-0 {padding-top: 0;} .section.padding-top-low {padding-top: calc(0.33 * var(--section-padding));} .section.padding-bottom-0 {padding-bottom: 0;} .section.color0-100 {background: var(--color0-100);} .section.color1-100 {background: var(--color1-100);} .symbol {display: block; width: 2.2em; aspect-ratio: 1; border: solid 0.15em var(--color0-200); border-radius: 0.6em; box-sizing: border-box; background: url("images/favicon/favicon.svg") no-repeat center center, white; background-size: 70% auto;} .flex {display: flex !important; width: 100%; flex-wrap: wrap; gap: 0.6em; box-sizing: border-box; margin-top: var(--gap1);} .flex.padding-inline {padding-inline: var(--padding1);} .buttons {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.5em;} .button {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 1em; color: var(--color0-900); font-variation-settings: "wght" 600; white-space: nowrap; padding: 0.4em 1em; border-radius: var(--border-radius0); border: solid 0.1em transparent; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;} .button img {display: block; width: auto; height: 0.9em; position: relative; top: 0.05em;} .button.white-color1 {background: white; color: var(--color1); border-color: var(--color0-200);} .button.white-color1:hover {background: var(--color0-100);} .button.white-color2-900 {background: white; color: var(--color2-900) !important; border-color: var(--color0-200);} .button.white-color2-900:hover {background: var(--color0-100);} .button.color1 {background: var(--color1); color: white;} .button.color1:hover {background: var(--color1-500);} .button.color2 {background: var(--color2); color: white; border-color: var(--color2);} .button.color2:hover {background: var(--color2-500); color: white ;} .button.color2-100 {background: var(--color2-100); color: var(--color2); border-color: none;} .button.color2-100:hover {background: var(--color2-200);} .button.color3 {background: var(--color3a); color: var(--color1); border-color: var(--color3b);} .button.color3:hover {background: var(--color3b);} .button.color3c {background: var(--color3c); color: white; border-color: none;} .button.color3c:hover {background: var(--color3d);} .button.border {background: none; color: var(--color2-900); border-color: var(--color0-300);} .button.border:hover {color: var(--color2); border-color: var(--color2-200);} .link {display: inline-block; font-variation-settings: 'wght' 600; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;} .link.color2 {color: var(--color2);} .link.color2:hover {color: var(--color2-900); text-decoration-color: transparent;} .submenu1 {display: flex; width: 100%; align-items: center; gap: 0.9em 1.4em; flex-wrap: wrap; font-size: 0.9em; margin-bottom: var(--gap2);} .submenu1 * {display: flex; align-items: center; color: var(--color0-600); font-variation-settings: "wght" 500; box-sizing: border-box;} .submenu1 > div {border-radius: var(--border-radius0); border: solid 0.1em var(--color0-300);} .submenu1 > div a {height: 2.4em; padding: 0.4em 1.2em; cursor: pointer; transition: .15s ease-in-out;} .submenu1 > div a:not(:last-child) {border-right: solid 0.1em var(--color0-300);} .submenu1 > div a:hover {color: var(--color2);} .submenu1 > div a.sel {background: var(--color0-100); color: var(--color0-900); font-variation-settings: "wght" 600;} /* Kratké, nezabaluje se */ .submenu2 {display: block; width: 100%; box-sizing: border-box; position: relative; z-index: 5;} .submenu2 nav {display: flex; width: 100%; flex-wrap: wrap; gap: 0 1.1em; box-sizing: border-box;} .submenu2 nav a {display: flex; align-items: center; font-size: 1.1em; font-weight: 700; color: #999999; padding-block: 0.35em; border-radius: 0.2em; box-sizing: border-box; position: relative; transition: .15s ease-in-out;} .submenu2 nav a:not(.sel):hover {color: var(--color1);} .submenu2 nav a.sel {color: white; background: var(--color1); padding-inline: 0.9em;} @media screen and (max-width: 640px) { .submenu2 {font-size: 0.9em;} } .pagination {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0} .pagination > a {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; line-height: 1; color: var(--color0); opacity: 0.75; transition: .2s ease-in-out;} .pagination > a span {width: 6.5em;} .pagination > a img {display: block; width: 1.35em; height: auto;} .pagination > a:hover {opacity: 1;} .pagination > a.next {justify-content: flex-end;} .pagination > a.next span {text-align: right;} .pagination > div {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2em; flex-grow: 2;} .pagination > div a {display: flex; width: 2.3em; height: 2.6em; justify-content: center; align-items: center; font-size: 0.9em; border-radius: var(--border-radius0); opacity: 0.75; transition: .2s ease-in-out;} .pagination > div a:hover {opacity: 1; color: var(--color2); background: var(--color0-100);} .pagination > div a.sel {opacity: 1; color: var(--color2); background: var(--color2-100);} .pagination.upper {margin-bottom: var(--gap2);} .pagination.bottom {margin-top: var(--gap2);} @media screen and (max-width: 1080px) { .pagination a {font-size: 0.9em;} } @media screen and (max-width: 640px) { .pagination > a span {display: none;} } .img-content {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;} .img-content > .img {display: block; width: 100%; aspect-ratio: 3/2; position: relative;} .img-content > .img picture {display: block; width: 100%; height: 100%; border-radius: var(--border-radius1); position: absolute; inset: 0; overflow: hidden;} .img-content > .img picture img {display: block; width: 100%; height: 100%; object-fit: cover;} .img-content > .content {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: var(--gap1);} .img-content .soc a {width: calc(50% - 0.5 * var(--gap1));} @media screen and (min-width: 1081px) and (max-width: 1366px){ .img-content .soc a {width: 100%;} } @media screen and (min-width: 1081px) { .img-content {--img-content-image-width: 47%; --img-content-gap: 6%;} .img-content > .img {width: var(--img-content-image-width); aspect-ratio: unset;} .img-content > .content {width: calc(100% - var(--img-content-image-width) - var(--img-content-gap)); padding-block: 3.5em;} .img-content.contact-page {--img-content-image-width: 56%;} .img-content > .content.no-padding {padding-block: 0;} } @media screen and (min-width: 1081px) and (max-width: 1800px){ .img-content.full-width > .img {width: calc(50vw - 50% + var(--img-content-image-width)); margin-left: calc(50% - 50vw);} .img-content.full-width > .img picture {border-top-left-radius: 0; border-bottom-left-radius: 0;} } @media screen and (max-width: 540px) { .img-content .soc a {width: 100%;} } .hero h1 {font-size: min(3rem, calc(1rem + 4vw));} .hero .subheadline {display: flex; align-items: center; gap: 0.4em; font-size: min(1.6rem, calc(0.3rem + 4vw)); color: var(--color2); font-variation-settings: "wght" 500;} .hero .subheadline img {display: block; height: 0.85em; width: auto; position: relative; top: 0.03em;} .hero p {color: var(--color1-300);} .hero .search-field {max-width: 25em;} @media screen and (min-width: 1081px) { .hero .img {width: 55%; border-radius: var(--border-radius2);} .hero .content {width: 41%; padding-block: 5em;} .hero p {font-size: 1.1em;} } .semi-hidden {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);} .semi-hidden > *:not(.button) {-webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-image: linear-gradient(to top, transparent, black 15em); mask-image: linear-gradient(to top, transparent, black 15em); transition: ease-in-out 0.5s;} .semi-hidden > * > * {max-height: 25em; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.5s;} .semi-hidden > * > * > * {overflow: hidden;} .semi-hidden .button {font-size: 0.9em;} .semi-hidden:not(.show) > .button span:nth-child(2), .semi-hidden.show > .button span:nth-child(1) {display: none;} .semi-hidden.show > *:not(.button) {-webkit-mask-size: 100% 200%; mask-size: 100% 200%;} .semi-hidden.hide-from-6 > * > *:nth-child(n+7), .semi-hidden.hide-from-8 > * > *:nth-child(n+9) {display: none;} .grid-topbar {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.8em 0; position: relative; margin-bottom: var(--gap2);} .grid-topbar .filters {display: flex; flex-wrap: wrap; gap: 0.5em; font-size: 0.85em;} .grid-topbar .filters .form-item.place-select {width: 17em; --form-item-height: 2.6rem !important;} .grid-topbar .list-appearance {display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;} .grid-topbar .list-appearance span {display: block; font-size: 0.85em; font-variation-settings: "wght" 500; margin-right: 0.85em; padding-top: 0.1em;} .grid-topbar .list-appearance a {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; border: solid 0.1em var(--color0-300); cursor: pointer; box-sizing: border-box; transition: ease-in-out 0.15s;} .grid-topbar .list-appearance a:not(:last-child){border-right: none;} .grid-topbar .list-appearance a:first-of-type {border-top-left-radius: var(--border-radius0); border-bottom-left-radius: var(--border-radius0);} .grid-topbar .list-appearance a:last-of-type {border-top-right-radius: var(--border-radius0); border-bottom-right-radius: var(--border-radius0);} .grid-topbar .list-appearance a img {display: block; width: 1.1em; height: auto; opacity: 0.6; transition: ease-in-out 0.15s;} .grid-topbar .list-appearance a.sel {background: white;} .grid-topbar .list-appearance a.sel img {opacity: 1;} @media screen and (min-width: 961px) { .grid-topbar {margin: 0;} .grid-topbar .desktop-absolute {position: absolute; right: 0; bottom: var(--gap2);} } @media screen and (max-width: 768px) { .grid-topbar :is(.filters, .list-appearance) {width: 100%;} .grid-topbar .filters .form-item.place-select {flex-grow: 2;} .grid-topbar .filters .button {flex-shrink: 0;} } @media screen and (max-width: 540px) { .grid-topbar .filters {flex-wrap: wrap;} .grid-topbar .filters .form-item.place-select {width: 100%;} } .grid-topbar + .doctors {margin-top: 0 !important;} .grid {display: flex; width: calc(100% + var(--grid-gap)); flex-wrap: wrap; --grid-count: 1; margin: calc(-0.5 * var(--grid-gap)); box-sizing: border-box;} .grid > * {display: block; width: calc(100% / var(--grid-count)); padding: calc(0.5 * var(--grid-gap)); box-sizing: border-box;} .grid.blog-grid {--grid-gap: 1.5em; row-gap: 1.8em;} .grid.extra-services-grid {--grid-gap: 1.5em;} .grid.rows > * {width: 100% !important;} @media screen and (min-width: 1681px) { .grid.people-grid {--grid-count: 4;} } @media screen and (min-width: 1281px) and (max-width: 1680px){ .grid.people-grid {--grid-count: 3;} } @media screen and (min-width: 1281px) { .grid.care-grid {--grid-count: 4;} .grid.blog-grid {--grid-count: 3;} .grid.blog-grid > *:nth-child(-n+2) {width: 50%;} .grid.extra-services-grid {--grid-count: 3;} } @media screen and (min-width: 541px) and (max-width: 1280px){ .grid.care-grid, .grid.people-grid, .grid.extra-services-grid, .grid.blog-grid {--grid-count: 2;} } @media screen and (min-width: 541px) and (max-width: 960px){ .grid.people-grid {--grid-count: 1;} } @media screen and (min-width: 769px) { .grid.filelist-grid {--grid-count: 2;} } @media screen and (min-width: 641px) { .grid.clinics-grid {--grid-count: 2;} } .care-preview .inner {display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: var(--color1-100); padding: clamp(1.2em, 1.8cqw, 2em); box-sizing: border-box; border-radius: var(--border-radius1);} .care-preview .button {font-size: 0.85em;} .care-preview span {display: block; width: 100%; font-size: 0.85em; color: var(--color1);} .care-preview .title {font-size: 1.3em; font-variation-settings: "wght" 600; line-height: 1.25; margin-block: 1em 0.35rem;} .care-preview span:not(.title) {flex-grow:2;} .care-preview .title a {color: inherit; transition: ease-in-out 0.15s;} .care-preview .title a:hover {color: var(--color2);} .care-preview.service .inner {flex-direction: column;} .care-preview.service .title {margin-top: 0;} .care-preview.service .link {font-size: 0.85em; margin-top: 0.6em;} .vision .img-content > .img:before {display: block; width: 100%; height: 100%; background: url("images/pattern-lines.png") no-repeat right bottom; background-size: auto 75%; position: absolute; right: -5%; bottom: 8%; z-index: 1; content: "";} .infographics1 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap3) 0;} .infographics1 > div {display: flex; width: 46%; flex-direction: column; align-items: flex-start; gap: 0.4em;} .infographics1 > div .icon {display: block; width: 1.4em; height: auto;} .infographics1 > div .num {font-size: 2.5em; color: var(--color2); font-variation-settings: 'wght' 600; margin-bottom: -0.15em;} .infographics1 > div .title {font-size: 1.35em; color: var(--color2); font-variation-settings: 'wght' 600;} .infographics1 > div span {display: block; width: 100%;} ul.checks {display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em; box-sizing: border-box;} ul.checks li {color: var(--color1); padding-left: 1.65em; box-sizing: border-box; position: relative;} ul.checks li:before {display: block; width: 1.1em; height: 1.1em; background: url("images/icons/check-color3.svg") no-repeat center center, white; background-size: 60% auto; border-radius: 100%; position: absolute; left: 0; top: 0.16em; content: "";} ul.checks.color2 li:before {background-image: url("images/icons/check-color2.svg"); background-color: var(--color0-100);} ul.arrows li {display: inline-block; width: 100%; color: var(--color1); padding-left: 1.65em; box-sizing: border-box; position: relative;} ul.arrows li:before {display: block; width: 1.2em; height: 1.2em; background: url("images/icons/arrow-right.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.18em; content: "";} .wrapper > ul {max-width: 48rem;} ul.cols2 {display: block; width: auto;} @media screen and (min-width: 541px) { ul.cols2 {column-count: 2; column-gap: var(--gap2);} } .soc {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);} .soc a {display: flex; width: 100%; align-items: center; gap: 0.45em; font-size: 0.9em; color: var(--color0-600); background: var(--color0-100); border-radius: var(--border-radius0); padding: 0.5em 0.8em; box-sizing: border-box; transition: 0.15s ease-in-out} .soc a img {display: block; width: 1.15em; height: auto;} .soc a:hover {background: var(--color0-200); color: var(--color0);} .cta-prime, .cta-system {display: block; width: 100%; background-image: linear-gradient(to right, var(--color3a), var(--color3b)); padding: var(--padding1); border-radius: var(--border-radius1); box-sizing: border-box;} .cta-prime .inner, .cta-system .inner {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0; position: relative;} .cta-prime .inner > div, .cta-system .inner > div {display: block; width: 100%;} .cta-prime h2, .cta-system h2 {font-size: min(2.1rem, calc(0.45rem + 4vw));} .cta-prime h2 .symbol {border: none; background-image: url("images/favicon/favicon-prime.svg");} .cta-prime p, .cta-system p {font-size: 1.1em; color: var(--color1);} @media screen and (min-width: 961px) { .cta-prime .inner > div, .cta-system .inner > div {width: 48%;} } @media screen and (max-width: 960px) { .cta-prime .inner, .cta-system .inner {padding-bottom: 4em;} .cta-prime p, .cta-system p {margin: 0;} .cta-prime .buttons, .cta-system .buttons {position: absolute; left: 0; bottom: 0;} } .cta-system {background: var(--color1);} .cta-system :is(h2, p, li) {color: white !important;} .clinic-preview {display: block;} .clinic-preview .inner {display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0; background: white; padding: min(2em, calc(0.8em + 4vw)); border: solid 0.12em var(--color0-200); border-radius: var(--border-radius1); box-sizing: border-box;} .clinic-preview .img {display: block; width: 100%; aspect-ratio: 3/2; border-radius: var(--border-radius0); overflow: hidden; order: -1;} .clinic-preview .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .clinic-preview .info {display: flex; width: 100%; flex-wrap: wrap; position: relative; padding-bottom: 5em;} .clinic-preview .tag1 {font-size: 0.8em;} .clinic-preview .title {font-size: min(1.8rem, calc(0.5rem + 4vw)); margin-block: 0.2em 0.5em;} .clinic-preview .title a {color: inherit; transition: 0.15s ease-in-out } .clinic-preview .title a:hover {color: var(--color2);} .clinic-preview p {font-size: 0.9em;} .clinic-preview .buttons {font-size: 0.85em; position: absolute; left: 0; bottom: 0;} .clinic-preview .buttons .button {height: 2.8em;} .clinic-preview .buttons .button img {height: 1.4em;} @media screen and (min-width: 1081px) { .clinic-preview .info {width: 48%;} .clinic-preview .img {width: 48%; order: 1;} } .cta-prime2 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0; background: var(--color1); padding: var(--padding1); border-radius: var(--border-radius1); box-sizing: border-box;} .cta-prime2 > div {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;} .cta-prime2 .tag2 {color: var(--color3c); font-variation-settings: "wght" 400;} .cta-prime2 h2 {font-size: min(2.1rem, calc(0.45rem + 4vw)); color: white; margin-block: 0.25em 0.7em;} .cta-prime2 ul {font-size: 0.9em; padding-left: 0.6em;} .cta-prime2 ul li {color: white !important;} .cta-prime2 .buttons {font-size: 0.9em; margin-top: 2em;} .cta-prime2 .img {order: -1; max-width: 28em; justify-content: center; gap: 0.6em;} .cta-prime2 .img .row {display: flex; justify-content: center; align-items: flex-start; gap: 0.6em;} .cta-prime2 .img span {display: block; overflow: hidden;} .cta-prime2 .img .row:nth-child(1) span:nth-child(1) {width: calc(26% - 0.3em); aspect-ratio: 1;} .cta-prime2 .img .row:nth-child(1) span:nth-child(2) {width: calc(26% - 0.3em); aspect-ratio: 1; background: var(--color3c); border-radius: 100%;} .cta-prime2 .img .row:nth-child(2) span:nth-child(1) {width: calc(36% - 0.4em); aspect-ratio: 16/9; border-top-left-radius: 3em;} .cta-prime2 .img .row:nth-child(2) span:nth-child(2) {width: calc(26% - 0.3em); aspect-ratio: 3/4;} .cta-prime2 .img .row:nth-child(2) span:nth-child(3) {width: calc(36% - 0.4em); aspect-ratio: 16/9;} .cta-prime2 .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} @media screen and (min-width: 961px) { .cta-prime2 > div {margin-block: 2em;} .cta-prime2 .info {width: calc(72% - 10em); max-width: 30em;} .cta-prime2 .img {width: calc(28% + 8em); order: 1;} } .swiper {width: 100%;} .swiper-slide {display: flex; height: auto; position: relative; overflow: hidden; flex-shrink: 0;} .swiper-button {display: flex; width: var(--swiper-button-width); height: var(--swiper-button-width); --swiper-button-width: 2.6em; justify-content: center; align-items: center; background: transparent; font-size: 1em; border-radius: 100%; border: 0.12em solid var(--color0-300); box-sizing: border-box; margin: 0; position: relative; inset: auto; z-index: 2; cursor: pointer; transition: .15s ease-in-out;} .swiper-button:before {display: block; width: 60%; height: 60%; background: url("images/icons/arrow-right.svg") no-repeat center center; background-size: contain; content: "";} .swiper-button-prev {transform: rotate(180deg);} .swiper-button:after {display: none;} .swiper-button-disabled {opacity: 0.5 !important;} .swiper-button:hover {background: var(--color0-100); border-color: var(--color2);} .carousel {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative; box-sizing: border-box;} .carousel .swiper-slide > * {width: 100%;} .carousel > .buttons {justify-content: flex-end; flex-grow: 2;} .carousel > .buttons .button {font-size: 0.9em;} @media screen and (max-width: 1800px) { .carousel.people-carousel .swiper {overflow: visible;} } @media screen and (min-width: 961px) { .carousel.desktop-disabled .swiper-button {display: none;} .carousel > .buttons {position: absolute; right: 0; top: calc(-2 * var(--gap3)); flex-grow: unset;} .carousel.desktop-buttons-top .swiper-button {position: absolute; right: 0; top: calc(-2 * var(--gap3));} .carousel.desktop-buttons-top .swiper-button-prev {right: calc(var(--swiper-button-width) + var(--gap2));} } @media screen and (max-width: 480px) { .carousel .swiper {width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: var(--wrapper-side) 20vw; box-sizing: border-box;} .carousel > .buttons .button {font-size: 0.8em;} } .carousel .preview {width: 100%;} .preview {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem;} .preview .img {display: block; width: 100%; padding-top: 66.66%; border-radius: var(--border-radius1); overflow: hidden; position: relative; transition: .15s ease-in-out;} .preview .img span {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;} .preview .img span img {display: block; width: 100%; height: 100%; object-fit: cover;} .preview .img span:hover {opacity: 0.85;} .preview > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem; box-sizing: border-box;} .preview .tag2 {font-size: 0.8em; margin-bottom: 0;} .preview .title {display: block; width: 100%; text-align: left; font-size: 1.1em; font-variation-settings: 'wght' 600; line-height: 1.25; padding-right: 1.45em; box-sizing: border-box; position: relative;} /*.preview .title:before {display: block; width: 1.2em; height: 1.2em; background: url("images/icons/arrow-up-right.svg") no-repeat center center; background-size: contain; position: absolute; right: 0; top: 0.05em; content: "";}*/ .preview .title a {color: var(--color0-900); transition: .15s ease-in-out;} .preview .title a:hover {color: var(--color2);} .preview .address {display: block; width: 100%; text-align: left; font-size: 0.95em; font-variation-settings: 'wght' 600; line-height: 1.25; margin-block: 0.2em -0.2em;} .preview .text {display: block; width: 100%; text-align: left; font-size: 0.9em; color: var(--color1-300);} .preview.extra-service {gap: 0;} .preview.extra-service .img {border-bottom-left-radius: 0; border-bottom-right-radius: 0;} .preview.extra-service > div {background: var(--color0-200); padding: 1.5em; border-radius: var(--border-radius1); margin-top: calc(-1 * var(--border-radius1)); position: relative; z-index: 2;} .preview.extra-service .title {font-size: 1.4em;} .preview.extra-service .button {font-size: 0.8em; margin-top: 0.7rem;} .box-white-blur {display: block; width: 100%; background: rgba(255,255,255,0.4); backdrop-filter: blur(7px); border-radius: calc(0.5 * var(--border-radius1)); border: solid 0.07em rgba(255,255,255,0.5); box-sizing: border-box;} .box-white-blur span {display: block; width: 100%; font-size: 0.9em; color: white;} .person-preview {display: block; width: 100%; height: 27em; border-radius: var(--border-radius1); position: relative; container-type: inline-size; transition: .15s ease-in-out;} .person-preview .img {display: block; width: 100%; height: 100%; border-radius: var(--border-radius1); overflow: hidden; position: relative; transition: .15s ease-in-out;} .person-preview .img:after {display: block; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent); content: "";} .person-preview .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .person-preview .inner {display: flex; position: absolute; inset: 0; align-items: flex-end; border-radius: var(--border-radius1); overflow: hidden; z-index: 2; padding: 6cqw; box-sizing: border-box;} .person-preview .inner .box-white-blur {padding: 6cqw;} .person-preview .inner .box-white-blur .name {font-size: 1.1em; font-variation-settings: 'wght' 500; line-height: 1.25; margin-block: 0.6em 0.2em;} .person-preview .inner .box-white-blur .post {font-size: 0.75em;} .person-preview > a {display: block; position: absolute; inset: 0; z-index: 3;} .person-preview:hover .img {filter: brightness(1.1);} .detail-head {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap2) 0; background: url("images/pattern-dots.png") no-repeat center top, var(--color1-100); background-size: 90rem auto; padding: min(5em, calc(1em + 3vw)) min(3em, calc(1em + 3vw)); border-radius: var(--border-radius1); box-sizing: border-box;} .detail-head > div {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--gap1);} .detail-head > div .address {font-size: 1.2em; font-variation-settings: 'wght' 600;} .detail-head > div .buttons {margin-top: var(--gap1);} .detail-head > div:nth-child(2) p {font-size: 1.1em; color: var(--color1-300);} .detail-head > div .link {font-size: 0.9em;} @media screen and (min-width: 1081px) { .detail-head > div:nth-child(1) {width: 44%;} .detail-head > div:nth-child(2) {width: 50%;} .detail-head > div .buttons {margin-top: 3em;} } .extra-service-head > div .buttons {margin-block: var(--gap1) !important;} .extra-service-head .dropdown-element.show .dropdown-box {right: auto; left: 0;} .extra-service-head .box {display: flex; padding: 2.5em; border-radius: var(--border-radius1); box-sizing: border-box;} .extra-service-head .box.white {background: white; box-shadow: 0 0 0.4em rgba(0,0,0,0.1);} .extra-service-head .box h2 {font-size: 1.4em; margin-bottom: 0.8rem;} .extra-service-head .box .contact-type {margin-top: 0;} .extra-service-head .hours-table {background: var(--color0-100); border-radius: var(--border-radius0); margin-top: var(--gap1);} @media screen and (min-width: 1081px) { .extra-service-head > div:nth-child(1) {width: 52%;} .extra-service-head > div:nth-child(2) {width: 42%;} } @media screen and (max-width: 540px) { .extra-service-head .hours-table {background: none; padding: 0;} } .double-images {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0; margin-top: var(--gap1);} .double-images > a {display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;} .double-images > a img {display: block; width: 100%; height: 100%; object-fit: cover;} .double-images > a:hover {filter: brightness(1.15);} @media screen and (min-width: 681px) { .double-images > a {width: calc(50% - 0.5 * var(--gap1));} } .detail-info1 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2);} .detail-info1 .info:not(:has(.inner-box)) {padding: 2.2em;} .detail-info1 > div {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) var(--gap1); border-radius: var(--border-radius1); overflow: hidden; position: relative; box-sizing: border-box;} .detail-info1 .info {justify-content: space-between; background: var(--color1); padding: 1.5em;} .detail-info1 .info * {color: white;} .detail-info1 .info h2 {font-size: 1.25em; margin: 0;} .detail-info1 .info p {font-size: 0.85em; margin-bottom: 1.6em;} .detail-info1 .info .entry {display: block; font-size: 0.9em; padding-left: 1.4em; position: relative; box-sizing: border-box; transition: .15s ease-in-out;} .detail-info1 .info .entry img {display: block; width: auto; height: 1em; position: absolute; left: 0; top: 0.22em;} .detail-info1 .info .entry:hover {color: var(--color1-100);} .detail-info1 .contact-button {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.5em 1em; flex-wrap: wrap;} .detail-info1 .contact-button > div {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.8em 1em; flex-wrap: wrap;} .detail-info1 .contact-button .entry {padding-left: 1.7em;} .detail-info1 .contact-button .entry img {height: 1.3em; top: 0.1em;} .detail-info1 .contact-button .button {font-size: 0.65em;} .detail-info1 .contact-button.navigate .entry > span {font-size: 1.15em; font-variation-settings: 'wght' 500;} .detail-info1 .contact-button.navigate .entry img {top: 0.1em;} .detail-info1 .contact-button ul {font-size: 0.9em; margin-top: 0.3em;} .detail-info1 .contact-button ul li {padding-left: 1em; position: relative; box-sizing: border-box;} .detail-info1 .contact-button ul li:before {display: block; width: 0.35em; height: 0.35em; background: white; border-radius: 100%; position: absolute; left: 0; top: 0.6em; content: "";} .detail-info1 .info .inner-box {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em 1em; background: var(--color1-400); padding: 1.2em; border: solid 0.08em var(--color1-300); border-radius: var(--border-radius0); box-sizing: border-box;} .detail-info1 .info .inner-box h2 {font-size: 1.1em; margin-bottom: 0.3rem;} .hours-table {display: block; width: 100%; background: white; padding: 1em 1.2em; border-radius: var(--border-radius0); box-sizing: border-box;} .hours-table > .title {display: block; width: 100%; font-size: 1.1em; font-variation-settings: 'wght' 600; margin-bottom: 0.3rem;} .hours-table table {width: 100%; border-collapse: collapse;} .hours-table table td {color: var(--color0-900) !important; vertical-align: top; padding-block: 0.15em;} .hours-table table td:last-child {width: 6.6em; text-align: right; padding-left: 2.4em; position: relative;} .hours-table table td:last-child:before {display: block; width: 1.1em; height: 1.1em; background: url("images/icons/clock.svg") no-repeat center center; background-size: contain; position: absolute; left: 1.2em; top: 0.33em; content: "";} .detail-info1 .swiper {display: block; width: 100%; height: 100%;} .detail-info1 .images figure {display: block; width: 100%; height: 100%; position: absolute; inset: 0;} .detail-info1 .images figure img {display: block; width: 100%; height: 100%; object-fit: cover;} .detail-info1 .images figure:after {display: block; position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent 70%); z-index: 1; content: "";} .detail-info1 .images figcaption {width: calc(100% - 2.6em); padding: 1.2em 8em 1.2em 1.2em; position: absolute; left: 1.3em; bottom: 1.3em; z-index: 2;} .detail-info1 .images figcaption .headline {font-size: 1.35em; font-variation-settings: 'wght' 600; line-height: 1.25; margin-bottom: 0.3em;} .detail-info1 .images figcaption .subheadline {font-size: 1em; font-variation-settings: 'wght' 600; line-height: 1.25;} .detail-info1 .images .swiper-button {position: absolute; bottom: 2.2em; border-color: white; z-index: 5;} .detail-info1 .images .swiper-button:hover {background: rgba(0,0,0,0.05); border-color: var(--color0-300);} .detail-info1 .images .swiper-button:before {width: 45%; height: 45%; background-image: url("images/icons/arrow-right-white.svg");} .detail-info1 .images .swiper-button-prev {right: 5.5em;} .detail-info1 .images .swiper-button-next {right: 2.3em;} @media screen and (min-width: 1081px) { .detail-info1 .info {width: 35%;} .detail-info1 .images {width: calc(65% - var(--gap2));} } @media screen and (max-width: 1080px) { .detail-info1 .images {aspect-ratio: 16/9; min-height: 20em; order: -1;} } @media screen and (min-width: 681px) and (max-width: 1080px){ .detail-info1 .info .inner-box {width: calc(50% - var(--gap1));} } .person-card .inner {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1) 0; background: var(--color1-100); padding: max(1.2em, 1.8cqw); box-sizing: border-box; border-radius: var(--border-radius1);} .person-card .photo {display: block; width: 4.2em; height: 4.2em; background: url("images/icons/user-color2.svg") no-repeat center center, var(--color2-100); background-size: 55% auto; border-radius: 100%; overflow: hidden; transition: .15s ease-in-out;} .person-card .photo img {display: block; width: 100%; height: 100%; object-fit: cover;} .person-card .info {display: block; width: calc(100% - 5.5em);} .person-card .info span {display: block; line-height: 1.3;} .person-card .info .name {font-size: 1.2em; font-variation-settings: 'wght' 600;} .person-card .info .post {font-size: 0.9em; color: var(--color2); margin-block: 0.15em 1em;} .person-card .info .contact {font-size: 0.95em; color: var(--color0-600); margin-top: 0.1em;} .person-card .info .contact a {color: inherit; transition: .15s ease-in-out;} .person-card .info .contact a:hover {color: var(--color0-900);} .person-card .buttons {margin-top: 1.2em; font-size: 0.7em; gap: 0.8em 0.35em;} .person-card .buttons .button.white-color2-900 {border-color: var(--color4-300);} .person-card .buttons .hint-icon {font-size: 1.45em; margin-left: 0.2em;} .person-card .buttons .hours {display: flex; height: 2em; align-items: center; gap: 0.4em; color: #027A48; font-variation-settings: 'wght' 500; background: #ECFDF3; border-radius: 1em; padding: 0 0.9em; box-sizing: border-box; position: relative;} .person-card .buttons .hours:before {display: block; width: 0.36em; height: 0.36em; background: #027A48; border-radius: 100%; content: "";} @media screen and (min-width: 541px) and (max-width: 768px){ .person-card .info {width: 100%;} } .doctors {margin-top: var(--gap1);} .doctors .person-card .inner {background: none;} .hint-nowrap {display: flex; align-items: center; gap: 0.3em;} .hint-icon {display: inline-block; width: 0.9em; position: relative; margin-left: 0.1em;} .hint-icon > img {display: block; width: 100%;} .hint {display: block; position: absolute; left: 10000px; bottom: calc(100% + 0.4rem); z-index: 10; opacity: 0; transition: opacity .15s ease-in-out;} .hint .bubble {display: flex; width: 14rem; justify-content: center; position: absolute; left: -7rem; bottom: 0;} .hint .bubble > span {display: flex; min-height: 2.4em; align-items: center; text-align: center; flex-wrap: wrap; font-size: 0.8rem; color: white; background: var(--color1); border-radius: var(--border-radius1); padding: 0.9em 1em; position: relative; z-index: 2;} .hint .bubble > span > span {display: block; width: 100%;} .hint .bubble > span .hint-title {font-size: 1.2em; font-variation-settings: 'wght' 600; margin-bottom: 0.3em;} .hint .bubble > span.state2 {display: none;} .hint .bubble > span:after {display: block; width: 1em; height: 1em; background: var(--color1); border-radius: 0.1em; position: absolute; left: calc(50% - 0.5em); bottom: -0.3em; z-index: -1; transform: rotate(45deg); content: "";} .hint.show {left: 50%; opacity: 1;} /* @media screen and (min-width: 1081px) { .hint {bottom: 50%;} .hint .bubble {width: 15rem; height: 10rem; justify-content: flex-start; align-items: center; left: 0; bottom: -5rem;} .hint .bubble > span {text-align: left;} .hint .bubble > span:after {left: -0.3em; bottom: calc(50% - 0.5em);} .hint.show {left: calc(100% + 0.4em); opacity: 1;} } */ @media screen and (max-width: 1080px) { .hint .bubble {width: 10rem; left: -5rem;} .hint .bubble > span {font-size: 0.65rem;} } @media (pointer: coarse) { .hint:not(.always) {display: none !important;} } .hint-title:has(+ .hint-hours) {text-align: left;} .hint-hours {display: flex !important; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.2em 0;} .hint-hours > span:nth-child(odd) {display: block; width: calc(100% - 8.2em); text-align: left;} .hint-hours > span:nth-child(even) {display: block; width: 7.8em; text-align: right; padding-left: 1.25em; position: relative; box-sizing: border-box;} .hint-hours > span:nth-child(even):before {display: block; width: 1.15em; height: 1.15em; background: url("images/icons/clock.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.15em; content: "";} .hint-hours .note {display: block; font-size: 0.8em; color: var(--color1-100); font-variation-settings: 'wght' 300; margin-bottom: 0.2em;} .hint-hours > .note {display: flex; align-items: flex-start; gap: 0.4em; width: 100% !important; font-size: 0.9em; margin-top: 0.5em; padding: 0.5em 0 0 1.4em; border-top: solid 1px var(--color1-300); position: relative; box-sizing: border-box;} .hint-hours > .note:before {display: block; width: 1em; height: 1em; background: url("images/icons/info-white.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.78em; content: "";} .vision2 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap3); background: var(--color1); padding: min(5em, calc(1.5em + 5vw)) min(3em, calc(1.5em + 5vw)); border-radius: var(--border-radius1); box-sizing: border-box;} .vision2 :is(h2, p) {width: 100%; max-width: 100%; text-align: center; color: white; margin: 0;} .vision2 p {margin-block: -0.5em 1em;} .vision2 > div {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1);} .vision2 > div .icon {display: flex; width: 3.4em; height: 3.4em; justify-content: center; align-items: center; background: var(--color2-100); border-radius: 100%; box-sizing: border-box;} .vision2 > div .icon img {display: block; width: 1.9em; height: auto;} .vision2 > div span {display: block; text-align: center; font-size: 0.9em; color: white; line-height: 1.25;} .vision2 > div .title {font-size: 1.3em; font-variation-settings: 'wght' 500; margin-block: 0.3em 0.15em;} .vision2.no-bg {background: none; padding: 0;} .vision2.no-bg > div span {color: var(--color0);} @media screen and (min-width: 1081px) { .vision2 > div {width: calc(33.33% - 2 / 3 * var(--gap3));} } @media screen and (min-width: 541px) and (max-width: 1080px){ .vision2 > div {width: calc(50% - 0.5 * var(--gap3));} } h2:has(+ .filelist-grid) {text-align: center; font-size: min(1.8rem, calc(0.4rem + 4vw));} .file .inner {display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--gap1); background: var(--color1-100); padding: clamp(0.7em, 1.2cqw, 1em); box-sizing: border-box; border-radius: var(--border-radius1);} .file .title {display: flex; max-width: calc(100% - 6rem); align-items: center; gap: 0.4em; flex-grow: 2; font-size: 1em; font-variation-settings: "wght" 600; line-height: 1.25;} .file .title:before {display: block; width: 1.15em; height: 1.15em; background: url("images/icons/file-color2.svg") no-repeat center center; background-size: contain; position: relative; top: -0.025em; content: ""; flex-shrink: 0;} .file .title a {color: inherit; transition: ease-in-out 0.15s;} .file .title a:hover {color: var(--color2);} .file .button {font-size: 0.7em;} .insurance-companies {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);} .insurance-companies .list {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0; background: var(--color0-100); padding: min(4em, calc(0.5em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1);} .insurance-companies .list span {display: block; width: 100%;} .insurance-companies .list span strong {display: block; font-size: 1.45em; color: var(--color2); font-variation-settings: 'wght' 600;} .insurance-companies .list span:not(:nth-child(-n+2)) {padding-top: var(--gap1); border-top: solid 1px var(--color0-400);} .insurance-companies .logos {display: flex; width: 100%; justify-content: center; column-gap: 1.4em; row-gap: 0.7em; flex-wrap: wrap; margin-top: var(--margin-top-l);} .insurance-companies .logos a {display: block; height: 2.8em; width: auto;} .insurance-companies .logos a img {display: block; height: 100%; width: auto;} .insurance-companies .info {max-width: 48em; text-align: center; font-size: 0.85em; margin-top: var(--gap2);} .insurance-companies .kpz {display: flex; width: 100%; justify-content: center;} .insurance-companies .kpz img {display: block; width: 8em; height: auto;} @media screen and (min-width: 541px) { .insurance-companies .list span {width: 47%;} } .rights ol li:not(:first-child) {margin-top: 0.36em;} .rights ol li:before {color: var(--color2); font-variation-settings: 'wght' 600;} .timeline .phase {display: flex; width: 100%; flex-direction: column; gap: var(--gap2);} .timeline .phase .year {display: flex; width: 100%; min-height: 1.9em; align-items: center; gap: var(--gap1); font-size: 1.35em; line-height: 1; font-variation-settings: 'wght' 600; padding-top: 0.35em;} .timeline .phase .year .symbol {font-size: 0.7em;} .timeline .phase .box {display: block; width: 100%; padding: 1.3em; border: solid 0.1em var(--color0-200); border-radius: var(--border-radius1); box-sizing: border-box;} .timeline .phase .box .title {display: block; width: 100%; font-size: 1.1em; font-variation-settings: 'wght' 600; margin-bottom: 0.45rem;} .timeline .phase .box ul {font-size: 0.9em;} .head-left {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: var(--gap2);} .head-left h2 {margin: 0;} .head-left p {margin-block: 1em 0;} .head-centered {display: flex; width: 100%; max-width: 40rem; flex-direction: column; align-items: center; align-content: center; gap: var(--article-gap); margin-inline: auto;} .head-centered.white {background: white; padding: 1.5rem; margin-top: -1.5rem;} .head-centered :is(.date, h1, h2, .perex) {display: block; width: 100%; text-align: center;} .head-centered :is(.date, .tag2) {margin-bottom: -1rem;} .head-centered .date {font-size: 0.85em; color: var(--color2); font-variation-settings: 'wght' 500;} .head-centered :is(h1, h2) {max-width: 36rem; font-variation-settings: 'wght' 600; margin: 0;} .head-centered h2 {margin-block: -0.85em -0.35em;} .head-centered .perex a {color: var(--color2); text-decoration: underline; transition: .15s ease-in-out;} .head-centered .perex a:hover {color: var(--color2-900); text-decoration-color: transparent;} .head-centered .author {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.7em;} .head-centered .author .photo {display: block; width: 2.8em; height: 2.8em; border-radius: 100%; overflow: hidden;} .head-centered .author .photo img {display: block; width: 100%; height: 100%; object-fit: cover;} .head-centered .author > span {display: block; font-size: 0.9em; line-height: 1.35;} .head-centered .author > span a {display: block; color: var(--color0-900); font-variation-settings: 'wght' 600; transition: .15s ease-in-out;} .head-centered .author > span a:hover {color: var(--color2);} .head-centered .tags {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.4em;} .head-centered .tags a {display: block; font-size: 0.85em; color: var(--color2); font-variation-settings: 'wght' 500; line-height: 1.25; background: var(--color2-50); padding: 0.3em 1em; border-radius: 0.9em;} .head-centered .search-field {max-width: 25em;} .head-centered .job-info {justify-content: center; margin-top: -0.6rem;} .img-about {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; container-type: inline-size:} .img-about span {display: block; width: 49%; overflow: hidden; border-radius: var(--border-radius1);} .img-about span:nth-child(1) {aspect-ratio: 0.75; border-top-left-radius: 10cqw;} .img-about span:nth-child(2) {aspect-ratio: 1; border-top-right-radius: 10cqw;} .img-about span img {display: block; width: 100%; height: 100%; object-fit: cover;} .article {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap); box-sizing: border-box;} .article .image {display: block; width: 100%;} .article .image > a {display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;} .article .image > a img {display: block; width: 100%; height: 100%; object-fit: cover;} .article .image:hover span {opacity: 0.8;} .article .image figcaption {display: block; font-size: 0.8em; margin-top: 1em;} .article .image figcaption a {color: inherit; text-decoration: underline;} .article .image figcaption a:hover {color: var(--color0-900); text-decoration: none;} .article :is(h2, h3) {margin-bottom: calc(-0.4 * var(--article-gap));} .article h2 {font-size: min(1.75rem, calc(0.5rem + 4vw)); margin-top: 0.5em;} .article h2 a {color: inherit; text-decoration: underline; transition: .15s ease-in-out;} .article h2 a:hover {color: var(--color2); text-decoration-color: transparent;} .article h2 + p {margin: 0;} .article h3 {font-size: min(1.45rem, calc(0.3rem + 4vw)); color: var(--color1-400); margin-top: -0.2em;} .article h3 + p {margin-block: -0.5rem 0;} .article h2 + h3 {margin-top: 0.25em;} .article h4 {font-size: min(1.15rem, calc(0.3rem + 4vw)); color: var(--color1-300);} .article p + :is(ul, ol) {margin-top: calc(-0.45 * var(--article-gap));} .article :is(p a, li a) {color: var(--color2) !important;} .article :is(p a, li a):hover {color: var(--color2-900) !important;} .article .box {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--box-gap) 0; --box-gap: calc(0.6 * var(--article-gap)); padding: min(3em, calc(0.5em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1); position: relative; overflow: hidden;} .article .box.padding-small {padding: min(1.5em, calc(0.5em + 5vw));} .article .box.color0-100 {background: var(--color0-100);} .article .box.color1-100 {background: var(--color1-100);} .article .box.border0-900 {border: solid 0.1em var(--color0-900);} .article .box.cols > div {display: flex; width: 100%; flex-wrap: wrap; gap: var(--box-gap);} .article .box h2 {margin: 0;} .article .box .buttons .button {font-size: 0.9em;} .article .box.pls-map {padding: 0; aspect-ratio: 16/9;} .article .box.pls-map iframe {display: block; width: 100%; height: 100%; position: absolute; inset: 0;} .article ul.checks li:not(:first-child) {margin-top: 0.4em;} .article .quote {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); padding-left: 1.4em; border-left: solid 0.15em var(--color2); box-sizing: border-box;} .article .quote p {font-size: 1.2em; color: var(--color0-900); font-variation-settings: 'wght' 500;} .article .quote .name {display: block; font-size: 0.9em;} .article .quote .name:before {content: "— ";} @media screen and (min-width: 769px) { .article.blog-article {padding-inline: 10%;} .article.blog-article :is(.cover, .pls-map) {width: 120%; margin-inline: -10%;} .article .box.cols > div:nth-child(1) {width: 54%;} .article .box.cols > div:nth-child(2) {width: 38%;} .article .box.cols p {font-size: 0.9em;} .article .box.cols ul {column-count: 1;} } @media screen and (min-width: 641px) { .list-cols2 {column-count: 2; column-gap: 1.6em;} } .article-styles :is(ul, ol) {display: block; padding: 0; margin: 0;} .article-styles :is(ul li, ol li) {display: inline-block; padding-left: 2em; position: relative; box-sizing: border-box; width:100%; } .article-styles li:before {display: block; position: absolute; content: "";} .article-styles ul li:before {width: 0.3em; height: 0.3em; left: 0.6em; top: 0.63em; background: var(--color0-900); border-radius: 100%;} .article-styles > ol {list-style-type: none; counter-reset: li;} .article-styles > ol > li {counter-increment: li;} .article-styles > ol > li:before {left: 0.2em; top: 0; content: counter(li)".";} .article-styles > ol:has(ul) > li:not(:first-child) {margin-top: 0.5em;} .career-positions {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap3);} .career-positions .image {display: block; width: 100%;} .career-positions .image > a {display: block; width: 100%; aspect-ratio: 21/9; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;} .career-positions .image > a img {display: block; width: 100%; height: 100%; object-fit: cover;} .career-positions .area {display: flex; width: 100%; max-width: 40rem; flex-wrap: wrap; gap: var(--gap2);} .career-positions .area h3 {margin-top: 0.7em;} .career-positions .job {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); padding: 1.8em; box-sizing: border-box; border-radius: var(--border-radius1); border: solid 0.1em var(--color0-300); position: relative; transition: .15s ease-in-out;} .career-positions .job > span {display: block; width: 100%; font-size: 0.9em; line-height: 1.25;} .career-positions .job .title {font-size: 1.1em; color: var(--color0-900); font-variation-settings: 'wght' 600;} .career-positions .job > a {display: block; position: absolute; inset: 0; z-index: 2;} .career-positions .job:hover {border-color: var(--color1-100); background: var(--color1-100);} .job-info {display: flex; width: 100%; align-items: center; gap: 0.3em 1em; flex-wrap: wrap; margin-top: 0.8em;} .job-info > span {display: flex; align-items: center; gap: 0.5em; font-size: 0.9em;} .job-info > span img {display: block; width: auto; height: 1.35em;} .checkboxes {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.9em var(--checkboxes-gap); --checkboxes-gap: 1.2em;} .checkbox {display: block; width: 100%; position: relative;} .chk1:not(:checked), .chk1:checked {position: absolute; left: -9999px; top: 0;} .chk1:not(:checked) + label, .chk1:checked + label {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.25; padding-inline-start: 1.8em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;} .chk1:not(:checked) + label:hover {color: var(--color0-900);} .chk1:checked + label {color: var(--color0-900);} .chk1:not(:checked) + label:before, .chk1:checked + label:before {display: block; width: 1.2em; height: 1.2em; background-color: white; border-radius: 0.3em; position: absolute; left: 0; top: 0.035em; overflow: hidden; border: solid 0.1em var(--color0-300); box-sizing: border-box; content: "";} .chk1:not(:checked) + label:before {} .chk1:checked + label:before {background: URL('images/check.svg') no-repeat center center, var(--color2); background-size: 100% 100%; border-color: var(--color2);} .chk1:disabled + label, .chk1:disabled + label:before {opacity: 0.4;} .chk1:not(:checked) + label a, .chk1:checked + label a {color: inherit; text-decoration: underline; transition: .15s ease-in-out;} .chk1:not(:checked) + label a:hover, .chk1:checked + label a:hover {color: var(--color2); text-decoration-color: transparent;} .form {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 1.2rem; box-sizing: border-box;} .form .obligatory-info {display: block; width: 100%; font-size: 0.9em;} .form .obligatory-info span {color: var(--color2);} .form h2 {font-size: 1.6em; margin-bottom: 0;} .form h2:not(:first-child) {margin-top: var(--gap2);} .form-items {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--form-gap);} .form-bottom {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 1.2em; margin-top: var(--gap1);} .form-bottom .consent {display: block; width: 100%; font-size: 0.85em; color: #666666;} .form-bottom .consent a {color: inherit; text-decoration: underline; transition: .15s ease-in-out;} .form-bottom .consent a:hover {color: var(--color0-900); text-decoration-color: transparent;} .form-bottom .button {width: 100%; height: 3em;} @media screen and (min-width: 481px) { .form .checkboxes .checkbox {width: calc(50% - 0.5 * var(--checkboxes-gap));} } .form-item {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.5em; position: relative; --form-item-height: min(3.2rem, calc(2rem + 2vw)); --form-item-padding-inline: 1rem; --form-item-border-width: 0.1rem;} .form-item-element {display: flex; width: 100%; height: var(--form-item-height); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; background: white; border: solid var(--form-item-border-width) var(--color0-300); border-radius: var(--border-radius0); box-sizing: border-box;} .form-item :is(input, textarea), .form-item .custom-select-wrapper {display: block; width: 100%; height: var(--form-item-height); background: none; font-size: 1em; color: var(--color0-900); font-variation-settings: 'wght' 600; border: none; outline: none; padding: 0 var(--form-item-padding-inline); box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;} .form-item textarea {height: 8em !important; padding-block: 1em;} .form-item-element:focus-within {border-color: var(--color2);} .form-item label {display: block; width: 100%; font-size: 0.9em; color: var(--color1);} .form-item label .obligatory {display: inline-block; color: var(--color2);} .form-item:has(textarea) {width: 100% !important;} .form-item :is(input, textarea)::placeholder {font-variation-settings: 'wght' 400; color: var(--color0-500);} .form-item .form-error {display: block; width: 100%; font-size: 0.75em; color: var(--color2); font-variation-settings: 'wght' 500; margin-top: -0.35em;} .form-item .note {display: block; width: 100%; font-size: 0.8em; color: var(--color0-500); font-variation-settings: 'wght' 500; margin-top: -0.25em;} .form-item .note a {color: var(--color2); text-decoration: underline; transition: .15s ease-in-out;} .form-item .note a:hover {color: var(--color2-900); text-decoration-color: transparent;} .form-item-element:has(textarea) {height: auto;} .form .form-item.w66 {width: calc(66.6% - 0.5 * var(--form-gap));} .form .form-item.w33 {width: calc(33.3% - 0.5 * var(--form-gap));} @media screen and (min-width: 641px) { .form .form-item.w50 {width: calc(50% - 0.5 * var(--form-gap));} .form .form-item.w33-100 {width: calc(33.3% - 0.5 * var(--form-gap));} .form .form-item.w66-100 {width: calc(66.6% - 0.5 * var(--form-gap));} } @media screen and (max-width: 640px) { .form .form-item .form-item-element.w100-33 {width: calc(33.3% - 0.5 * var(--form-gap));} } .form-item:has(.file-upload) .form-item-element {border: dotted var(--color2) 0.12em;} .form-item label.file-upload {display: flex; width: 100%; height: var(--form-item-height); justify-content: center; border:2px dotted #bfbfc1; align-items: center; gap: 0.5em; font-size: 0.9em; color: var(--color0); font-variation-settings: 'wght' 500; text-decoration: underline; margin: 0; padding-bottom: 0.1em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .form-item label.file-upload svg {display: block; width: 1.3em; height: 1.3em; fill: var(--color2);} .form-item label.file-upload:hover {color: var(--color1); text-decoration-color: transparent;} .form-item label.file-upload input[type="file"] {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer;} .form-item label.file-upload .file-name {display: none;} .files {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em; margin-top: 0.15em;} .files .file-item {display: block; width: 100%; font-size: 0.8em; color: var(--color0); font-variation-settings: 'wght' 600; background: var(--color0-100); padding: 0.5em 2.5em 0.5em 0.9em; position: relative; box-sizing: border-box; border-radius: var(--border-radius0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .files .file-item .delete-btn {display: block; width: 1.4em; height: 1.4em; opacity: 0.5; border-radius: 100%; background: none; border: none; outline: none; position: absolute; right: 0.9em; top: 0.6em; cursor: pointer; transform: rotate(45deg); transition: .15s ease-in-out;} .files .file-item .delete-btn:after {display: block; position: absolute; inset: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='386,229 283,229 283,126 229,126 229,229 126,229 126,283 229,283 229,386 283,386 283,283 386,283' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;} .files .file-item .delete-btn:hover {opacity: 1;} .files:not(:has(.file-item)) {display: none;} .form.color1-100 {background: var(--color1-100); padding: min(3.4em, calc(1em + 5vw)); border-radius: var(--border-radius1);} .search-field {flex-wrap: nowrap;} .search-field input {padding-left: 2.7em !important; background: url("images/icons/search-color0.svg") no-repeat left 0.9em center; background-size: auto 1.2em;} .search-field .button {flex-shrink: 0;} .form-item:has(.whisperer) {z-index: 2;} .whisperer {display: none; width: calc(100% + 0.2em); max-height: 0; --whisperer-max-height: 360px; font-size: 1rem; position: absolute; top: 105%; left: 0; z-index: -1; padding-top: 0.25rem; box-sizing: border-box; overflow: hidden; transition: .35s ease-in-out;} .whisperer .inner {display: flex; width: calc(100% - 2 * var(--border-width)); height: 100%; max-height: calc(var(--whisperer-max-height) - 0.35rem); flex-direction: column; background: var(--color0-100); border-radius: var(--border-radius0); box-sizing: border-box; overflow: hidden;} .whisperer .form-item {padding: 0.9rem;} .whisperer .overflow {display: block; width: 100%; overflow-y: auto;} .whisperer .whisperer-title {display: block; width: 100%; font-size: 0.75em; font-weight: 500; color: var(--color2); margin-block: 0.9em 0.35em; padding-inline: 0.9rem; box-sizing: border-box;} .whisperer .results {display: block; width: 100%;} .whisperer .results > div {display: block; width: 100%; position: relative; transition: .15s ease-in-out;} .whisperer .results > div a {display: block; width: 100%; padding: 0.5em 3rem 0.5em 1.1rem; box-sizing: border-box; position: relative;} .whisperer .results > div a .phrase {display: flex; align-items: center; gap: 0.4em; font-size: 0.95em; color: var(--color1); font-weight: 500; transition: .15s ease-in-out;} .whisperer .results > div a .phrase img {display: block; width: auto; height: 1em;} .whisperer .results > div button {display: flex; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; position: absolute; outline: solid 0.15em transparent; border-radius: 100%; right: 0.8rem; top: calc(50% - 0.9em); z-index: 1;} .whisperer .results > div button svg {display: block; width: 0.8em; height: auto; fill: var(--color1c); transition: .15s ease-in-out;} .whisperer .results > div button:hover svg {fill: var(--color2);} .whisperer .results > div button:focus {outline-color: var(--color2);} .whisperer .results > div:hover {background: var(--color0-200);} .whisperer .results > div:not(:has(button:hover)):hover a .phrase {color: var(--color2);} .whisperer .results > div:has(button:hover) a {pointer-events: none;} .whisperer.show {display: block;} .whisperer.slide-down {max-height: var(--whisperer-max-height);} .custom-select-wrapper {padding: 0 !important; z-index: unset !important;} .custom-select-wrapper select {position: absolute !important; left: -9999px; top: 0;} .custom-select-wrapper .custom-select {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;} .custom-select-trigger {display: flex; width: 100%; height: 100%; align-items: center; gap: 0.4em; font-variation-settings: 'wght' 400; color: var(--color0-500); padding: 0.25em 2.4em 0.25em var(--form-item-padding-inline); position: absolute; inset: 0; box-sizing: border-box; transition: .15s ease-in-out;} .custom-select-trigger .flag {display: block; width: 0.95em; height: 0.95em; position: relative; top: -0.02em;} .custom-select-trigger:after {display: block; width: 0.85em; height: 100%; opacity: 0.9; position: absolute; right: var(--form-item-padding-inline); top: 0; content: ""; background: url("images/icons/chevron-down.svg") no-repeat center center; background-size: contain; transition: .2s ease-in-out;} .custom-select-trigger.show:after {transform: rotateX(180deg);} .custom-select-trigger.chosen {color: var(--color0-900); font-variation-settings: 'wght' 600;} .custom-options {display: none; width: calc(100% + 2 * var(--form-item-border-width)); max-height: 15em; background: white; position: absolute; left: calc(-1 * var(--form-item-border-width)); top: calc(100% + 0.4em); border-radius: var(--border-radius0); box-shadow: var(--box-shadow1); box-sizing: border-box; overflow-y: auto; z-index: 100;} .custom-option {display: flex; width: 100%; align-items: center; gap: 0.4em; text-align: left; color: var(--color0-600); padding: 0.6em 0.8em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .custom-option .flag {display: block; width: 0.95em; height: 0.95em; position: relative; top: -0.02em;} .custom-option:hover, .custom-option.selected {color: var(--color0-900); background: var(--color0-100);} .custom-options .reset {display: inline-block; font-size: 0.75em; color: var(--color2); text-decoration: underline; font-weight: 700; float: right; margin: 0.4em 0.9em 1.2em 0; transition: .15s ease-in-out;} .custom-options .reset:hover {color: var(--color2-900); text-decoration-color: transparent;} .select-in-input .custom-select-wrapper {position: absolute; left: 0; top: 0;} .select-in-input.phone > input {padding-left: 5em;} .select-in-input.phone .custom-select-wrapper {width: 5em;} .contact-address {display: flex; align-items: center; gap: 0.4em; font-size: 1.1em; margin-block: 0.5em;} .contact-address img {display: block; width: 1.35em;} .contacts1 {display: block; width: 100%;} .contacts1 .small {font-size: 0.85em; margin-top: 1em;} .quick-contacts {display: flex; width: 100%; flex-direction: column; align-items: flex-start; margin-block: var(--gap2);} .quick-contacts h2 {font-size: 1.2em; margin-block: 0 0.5rem;} .quick-contacts h2:not(:first-child) {margin-top: 1.2rem;} .quick-contacts span {display: block;} .quick-contacts span a {color: var(--color2); transition: .15s ease-in-out;} .quick-contacts span a:hover {color: var(--color2-900);} .contact-page .checkboxes {margin-top: 0.3em;} @media screen and (min-width: 641px) and (max-width: 1080px){ .contact-page .form-item {width: calc(50% - 0.5 * var(--form-gap));} } @media screen and (min-width: 641px) { .contact-page .checkboxes {max-width: 22em;} } .cta-newsletter {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2);} .cta-newsletter .text {display: block;} .cta-newsletter .text span {display: block;} .cta-newsletter .capture {display: flex; width: 100%; max-width: 22em; gap: 0.5em;} .cta-newsletter .capture .form-item {flex-grow: 2;} .cta-newsletter .capture .button {flex-shrink: 0;} .cookies-settings {display: flex; width: 100%; justify-content: center; gap: var(--gap1); flex-wrap: wrap;} .cookies-settings h2 {text-align: center; font-size: 1.45em;} .cookies-settings .checkboxes {display: flex; width: 100%; max-width: 23em;; justify-content: center; gap: var(--gap1) var(--gap2); flex-wrap: wrap;} .cookies-settings .checkboxes .checkbox {width: calc(50% - 0.5 * var(--gap2)); min-width: 10em;} .cookies-settings .last-update {display: block; width: 100%; text-align: center; font-size: 0.85em; margin-block: 1.3em 0.8em;} .cookies-settings .last-update strong {display: block;} .faq-cols {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap2) 0;} .faq-cols > * {width: 100%;} @media screen and (min-width: 1081px) { .faq-cols > *:nth-child(1) {width: 40%;} .faq-cols > *:nth-child(2) {width: 55%;} } .faq {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap;} .faq > div {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.4em; box-sizing: border-box;} .faq > div:not(:first-child) {padding-top: var(--gap2); margin-top: var(--gap2); border-top: solid 0.1em var(--color0-300);} .faq :is(dt, dd) {display: block; width: 100%; text-align: left; box-sizing: border-box;} .faq dt {font-size: 1em; font-variation-settings: 'wght' 600; line-height: 1.25; padding-right: 1.5em; cursor: pointer; position: relative; transition: .15s ease-in-out;} .faq dt:after {display: flex; width: 1.2em; height: 1.2em; background: url("images/icons/round-plus-color2.svg") no-repeat center center; background-size: contain; position: absolute; right: 0; top: 0em; content: ""; transition: .15s ease-in-out;} .faq dt:hover {color: var(--color2);} .faq dd {display: none; width: 100%; padding-block: 0.2em;} .faq dd p {font-size: 0.9em;} .faq dd p:not(:first-child) {margin-top: 0.65em;} .faq > div.sel dt:after {background-image: url("images/icons/round-minus-color2.svg");} .pls-nav {display: flex; width: 100%; max-width: 80rem; justify-content: space-between; align-items: center; gap: var(--gap3) var(--gap1); position: relative; z-index: 2; margin-inline: auto;} .pls-nav .nav {display: flex; align-items: center;} .pls-nav .nav nav {display: block; box-sizing: border-box;} .pls-nav .nav nav ul {display: flex;} .pls-nav .nav nav ul li {display: block; box-sizing: border-box;} .pls-nav .nav nav ul li a {display: flex; align-items: center; font-size: 0.9em; font-variation-settings: 'wght' 600; text-decoration: none; padding: 0.5em 1em; box-sizing: border-box; transition: .15s ease-in-out;} .pls-nav .nav nav ul li a:hover {background: var(--color0-100); color: var(--color2);} .pls-nav .nav nav ul li.sel a {background: var(--color2-50); color: var(--color2-900);} .pls-nav .buttons {display: flex; width: auto; gap: O.25em;} .pls-nav .buttons .button {font-size: 0.85em;} @media screen and (max-width: 1366px) { .pls-nav {flex-direction: column;} .pls-nav .buttons {order: -1;} } @media screen and (min-width: 769px) and (max-width: 1080px){ .pls-nav .nav {font-size: 0.85em;} } @media screen and (min-width: 769px) { .pls-nav .nav {outline: solid 0.1em var(--color0-300); border-radius: var(--border-radius0); overflow: hidden;} .pls-nav .nav .trigger {display: none;} .pls-nav .nav nav ul li:not(:last-child) {border-right: solid 0.1em var(--color0-300);} } @media screen and (max-width: 768px) { .pls-nav .nav {width: 18em; height: var(--pls-nav-height); --pls-nav-height: 2.6rem; margin-top: var(--gap2); position: relative;} .pls-nav .nav:before {display: block; font-size: 0.9em; font-variation-settings: 'wght' 600; position: absolute; left: 0; top: -2em; content: "Navigace";} .pls-nav .nav .trigger {display: block; position: absolute; inset: 0; z-index: 2; cursor: pointer; background: url("images/icons/vertical-dots-color2.svg") no-repeat right 0.8em center; background-size: auto 1em;} .pls-nav .nav nav {width: 100%; height: var(--pls-nav-height); overflow: hidden;} .pls-nav .nav nav ul {width: 100%; height: var(--pls-nav-height); flex-direction: column;gap: 0.15em;} .pls-nav .nav nav ul li {height: var(--pls-nav-height);} .pls-nav .nav nav ul li.sel {order: -1;} .pls-nav .nav nav ul li a {height: var(--pls-nav-height); border-radius: var(--border-radius0); border: solid 0.1em var(--color0-200); background: white; box-shadow: var(--box-shadow1);} .pls-nav .nav.show nav {overflow: visible;} .pls-nav .nav.show nav ul {height: auto;} } .pls-box {display: block; width: 100%; border-radius: var(--border-radius1); overflow: hidden;} .pls-box h2 {font-size: min(2rem, calc(0.4rem + 4vw)); color: white; margin-bottom: -0.2em;} .pls-box p {color: var(--color0-100); margin: 0;} .pls-box > div {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap3); padding: 3em; box-sizing: border-box;} .pls-box > div > div {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2);} .pls-box .upper {background: var(--color1-400);} .pls-box .upper .icon {display: flex; width: 3.5em; height: 3.5em; justify-content: center; align-items: center; border-radius: 100%; background: var(--color2-200); border: solid 0.55em var(--color2-100); box-sizing: border-box; margin-bottom: 0.1em;} .pls-box .upper .icon img {display: block; width: 1.2em; height: 1.2em;} .pls-box .upper .pls-checks {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1);} .pls-box .upper .pls-checks li {display: flex; width: calc(50% - 0.5 * var(--gap1)); align-items: center; gap: 0.5em; color: white; font-variation-settings: 'wght' 600; padding: 0.85em; background: var(--color1); border-radius: var(--border-radius0); box-sizing: border-box;} .pls-box .upper .pls-checks li:before {display: block; width: 1.2em; height: 1.2em; background: url("images/icons/check-color2.svg") no-repeat center center, white; background-size: 60% auto; border-radius: 100%; content: "";} .pls-box .upper .img {display: block; border-radius: var(--border-radius0); overflow: hidden;} .pls-box .upper .img img {display: block; width: 100%; height: 100%; object-fit: cover;} .pls-box .bottom {background: var(--color1); align-items: center;} .pls-box .bottom .form-item {--form-item-height: 2.4rem !important;} .pls-box .bottom .form-item label {color: var(--color0-100);} .pls-box .bottom .consent {color: var(--color0-100);} .pls-box .bottom .button {width: auto;} @media screen and (min-width: 1081px) { .pls-box .upper > div:nth-child(1) {width: 50%;} .pls-box .upper > div:nth-child(2) {width: calc(50% - 1.5 * var(--gap3));} .pls-box .bottom > div {width: calc(50% - 0.5 * var(--gap3));} } @media screen and (max-width: 1080px) { .pls-box .upper .img {aspect-ratio: 16/9;} } .pls-article-nav .title {display: block; width: 100%; font-size: 1.4em; color: var(--color1-300); font-variation-settings: "wght" 600;} .pls-article-nav ul li {display: inline-block; width: 100%; font-size: 0.9em; color: var(--color1); padding-left: 1.65em; box-sizing: border-box; position: relative;} .pls-article-nav ul li:before {display: block; width: 1.2em; height: 1.2em; background: url("images/icons/arrow-right.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.18em; content: "";} .pls-article-nav ul li a:not(:hover) {color: var(--color0) !important;} .pls-article-nav > ul > li:not(:first-child) {margin-top: 0.6em;} .pls-article-nav > ul > li > a {font-size: 1.1em; font-variation-settings: "wght" 500;} .pls-article-nav a { text-decoration:none !important; } .pls-back-to-nav {display: flex; width: 100%;} .pls-back-to-nav a {display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: var(--color0); font-variation-settings: "wght" 500; text-decoration: underline; transition: .15s ease-in-out;} .pls-back-to-nav a:before {display: block; width: 1.1em; height: 1.1em; background: url("images/icons/arrow-back-top.svg") no-repeat center center; ; background-size: contain; position: relative; top: -0.1em; content: "";} .pls-back-to-nav a:hover {color: var(--color2); text-decoration-color: transparent;} .pls-block {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); position: relative;} .pls-block .anchor {display: block; position: absolute; left: 0; top: 0;} .pls-block .box.padding-small {padding: 0.8em; justify-content: flex-start; align-items: center; gap: var(--gap2);} .pls-block .box :is(.button, .link) {font-size: 0.85em;} /* MEDIRECO PRIME -------------------------------------------------------------------------------- */ .page-prime {background: var(--color1); color: white;} .page-prime p a {color: white;} .page-prime p a:hover {color: var(--color3a);} .page-prime .header .logo {width: 15em;} .page-prime .header .collapse {gap: 0.4em 0.8em;} .page-prime .header .lang {margin-left: 0.8em;} .page-prime .header.scroll {background: rgba(0,0,0,0.5);} @media screen and (min-width: 1081px) { .page-prime .header .collapse {width: calc(100% - 16em); justify-content: flex-end;} } @media screen and (max-width: 1200px) { .page-prime .header {font-size: 0.85em;} .page-prime .header .collapse {background: var(--color1-500);} .page-prime .header .button {width: calc(100% - 2 * var(--inner-padding)); margin-inline: var(--inner-padding);} .page-prime .header .button:first-of-type {margin-top: 5em;} .page-prime .header .lang ul li a {color: white;} .page-prime .header #navicon span {background: white;} .page-prime .header #navicon:hover span {background: var(--color3c);} } .page-prime :is(h1, h2, h3) {color: white;} .page-prime .tag2 {color: var(--color3a); font-variation-settings: "wght" 400;} .page-prime .symbol {border: none; background-image: url("images/favicon/favicon-prime.svg");} .hero-prime h1 {font-size: min(3rem, calc(1rem + 4vw));} .hero-prime .perex {display: flex; align-items: center; font-size: min(calc(0.5em + 2vw), 1.3em); color: var(--color3a); gap: 0 0.25em; margin-block: 0.5em 1em;} .hero-prime .perex .icon {display: block; width: 1em;} @media screen and (min-width: 1081px) { .hero-prime .img {width: 60%; border-radius: var(--border-radius2); margin-left: -10%; order: 2;} .hero-prime .content {width: 50%; align-items: flex-start; padding-block: 5em; z-index: 2; transform: translate(10%);} .hero-prime .img {-webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.3), black); mask-image: linear-gradient(to right, rgba(0,0,0,0.3), black); transition: ease-in-out 0.5s;} } .prime-box {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) 0;} .prime-box > div {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; padding: min(3.2em, calc(0.6em + 5vw)); box-sizing: border-box;} .prime-box > div > p {max-width: 30em;} .prime-box :is(h2, h3, p) {color: var(--color1);} .prime-box .perex {font-size: 1.15em;} .prime-box h3 {margin-bottom: 0.4rem;} .prime-box h3:not(:first-child) {margin-top: var(--gap2);} .prime-box .prices {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2em; font-size: 1.15em;} .prime-box .prices > span {display: flex; width: 100%; justify-content: space-between; text-align: right; color: var(--color1);} .prime-box .prices > span > span {display: block; text-align: left;} .prime-box > div:nth-child(1) {border-radius: var(--border-radius1);} .prime-box > div:nth-child(2) {border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius1) var(--border-radius3);} .prime-box.pb1 > div:nth-child(1) {background: var(--color3a);} .prime-box.pb1 > div:nth-child(2) {background: var(--color3b);} .prime-box.pb2 > div:nth-child(1) {background: #FAFAFA;} .prime-box.pb2 > div:nth-child(2) {background: var(--color3a);} @media screen and (min-width: 1081px) { .prime-box > div:nth-child(1) {width: 40%; border-radius: var(--border-radius1) var(--border-radius1) 0 var(--border-radius3);} .prime-box > div:nth-child(2) {width: 60%; border-radius: var(--border-radius1); border-bottom-left-radius: 0;} .prime-box h2 {font-size: 1.9em;} .prime-box h3 {font-size: 1.3em;} } .prime-social-proof {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1);} .prime-social-proof > div {display: flex; width: 100%; flex-direction: column; gap: var(--gap1); background: rgba(255,255,255,0.1); padding: 1.5em; border-radius: var(--border-radius0); box-sizing: border-box;} .prime-social-proof > div img {display: block; width: 6em; height: auto; margin-bottom: 0.4em;} .prime-social-proof > div p {display: block; flex-grow: 2; font-size: 0.85em;} .prime-social-proof > div .name {display: block; font-size: 1.15em; font-variation-settings: "wght" 600;} @media screen and (min-width: 1081px) { .prime-social-proof > div {width: calc(25% - 3 / 4 * var(--gap1));} } @media screen and (min-width: 641px) and (max-width: 1080px){ .prime-social-proof > div {width: calc(50% - 0.5 * var(--gap1));} } .page-prime .care-preview .inner {background: rgba(255,255,255,0.1); padding: clamp(1.2em, 1.8cqw, 2em);} .page-prime .care-preview span {font-size: 1.1em; color: white; padding-left: 1.8em; box-sizing: border-box; position: relative;} .page-prime .care-preview span:before {display: block; width: 1.25em; height: 1.25em; background: url("images/icons/check-color3.svg") no-repeat center center, white; background-size: 60% auto; border-radius: 100%; position: absolute; left: 0; top: 0.1em; content: "";} @media screen and (min-width: 1281px) { .page-prime .care-grid {padding-right: 10%;} .page-prime .care-preview .inner {min-height: 10em;} } @media screen and (min-width: 961px) and (max-width: 1280px){ .page-prime .grid.care-grid {--grid-count: 3;} } .page-prime .vision .img-content > .img:before {background-image: url("images/pattern-lines-prime.png");} .page-prime .infographics1 > div {width: 100%;} .page-prime .infographics1 > div .title {font-size: min(1.65em, calc(0.8em + 2vw)); color: var(--color3a);} .just-prime {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0;} .just-prime > div {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); position: relative;} .just-prime .perex {width: 20em; padding-left: 2.8em; box-sizing: border-box; position: relative;} .just-prime .perex .symbol {width: 2em; height: 2em; position: absolute; left: 0; top: 0.5em;} .just-prime .circle {display: flex; justify-content: center; align-items: center; position: absolute; inset: 0;} .just-prime .circle span {display: block; height: 100%; aspect-ratio: 1; background-image: linear-gradient(to right, var(--color3a), var(--color3b)); border-radius: 100%;} .just-prime .boxes {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap1); margin-block: var(--gap2);} .just-prime .boxes .col {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: var(--gap1);} .just-prime .boxes .col > div {display: block; width: 100%; padding: 1.5em; backdrop-filter: blur(14px); box-sizing: border-box; border-radius: var(--border-radius1); border: solid 0.1em rgba(255,255,255,0.15); position: relative; z-index: 2; overflow: hidden;} .just-prime .boxes .col > div:before {display: block; background: var(--color1); opacity: 0.7; position: absolute; inset: 0; z-index: -1; content: "";} .just-prime .boxes .col > div h3 {font-size: 1.1em; margin-bottom: 0.3rem;} .just-prime .boxes .col > div p {font-size: 0.9em; color: var(--color0-100);} @media screen and (min-width: 1081px) { .just-prime > div:nth-child(1) {width: 35%;} .just-prime > div:nth-child(2) {width: 60%; order: -1;} .just-prime h2 {font-size: 3.6em;} } @media screen and (max-width: 1080px) { .section:has(.just-prime) h2 br {display: none;} } @media screen and (min-width: 641px) { .just-prime .boxes .col {width: calc(50% - 0.5 * var(--gap1));} } .page-prime .faq > div:not(:first-child) {border-color: var(--color1-400);} .page-prime .faq dt:after {background-image: url("images/icons/round-plus-color3.svg");} .page-prime .faq > div.sel dt:after {background-image: url("images/icons/round-minus-color3.svg");} .page-prime .faq dt:hover {color: var(--color3a);} .page-prime .form-item-element:focus-within {border-color: var(--color3d);} .page-prime .form-bottom .button {width: auto;} .page-prime .footer {background: none;} .page-prime .footer .upper .logo {width: 14em;} .page-prime .footer .upper .footer-info1, .page-prime .footer .upper .footer-info1 strong {color: var(--color1-100);} .page-prime .footer .upper .title {color: var(--color3a);} .page-prime .footer .upper ul li a {color: white;} .page-prime .footer .upper ul li a:hover {color: var(--color1-200);} .page-prime .footer .bottom {border-color: var(--color1-300);} .page-prime .footer .bottom .copyright {color: var(--color1-200);} .page-prime .footer .bottom .copyright a {color: var(--color1-200); text-decoration:underline;} .page-prime .footer-soc a:not(:hover) img {filter: invert() brightness(4);} .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(0,0,0,0.15); 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: 40em; max-height: calc(100vh - 2rem); background: rgba(255,255,255,0.92); backdrop-filter: blur(2px); position: relative; border-radius: 1.2em; 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 .btn-close {font-size: 0.75em; position: absolute; right: 1em; top: 1em; z-index: 10002;} .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: min(5rem, 10%) min(5rem, 9vw); box-sizing: border-box;} .wndw .wndw-content .title {display: flex; width: 100%; align-items: flex-start; gap: 0.3em; font-size: min(1.7em, calc(1em + 2vw)); color: var(--color0-900); font-variation-settings: "wght" 600; line-height: 1.1; margin-block: 0.5rem -0.15em;} .wndw .wndw-content .title .symbol {width: 2.5em; height: 2.5em; font-size: 0.43em;} .wndw .wndw-content .title:has(+ p) {margin-bottom: -0.15em;} .wndw .wndw-content p {display: block; width: 100%;} .wndw .wndw-content p strong {font-weight: 700;} .wndw .wndw-content .custom-options {max-height: 9.5em;} .wndw .wndw-content .form-bottom .button {font-size: 0.9em;} .wndw .wndw-content .flex {gap: 0.3em;} .wndw .wndw-content .flex .button {min-width: 8em; font-size: 0.9em;} /* .wndw .custom-options {height: 0; max-height: 9em; background: white;} .wndw .custom-options.show {height: auto;} */ @media screen and (min-width: 641px) { .wndw .wndw-content p {font-size: 1.1em;} } .news-detail { max-width:48rem; display:flex !important; justify-content: flex-start;; } .news .dropdown-items {display: block; width: 100%; margin-top: var(--margin-top-s);} .news .dropdown-items > *:first-child {margin-top: 0;} .news .dropdown-item {display: block; width: 100%; background: rgba(0,0,0,0.08); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box; margin-top: 0.3rem; position: relative; transition: .15s ease-in-out;} .news .dropdown-item:first-of-type {border: none; margin-top: 0.5em;} .news .dropdown-item:hover {background: rgba(0,0,0,0.12);} .news .dropdown-item .title {text-align: left; font-size: 1.1em; color: var(--color3); margin: 0; padding: 0.9rem 2em 0.9rem 0; margin: -0.9rem 0; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;} .news .dropdown-item .title:hover {color: var(--color1);} .news .dropdown-item svg {display: block; width: 0.4em; height: 0.8em; fill: var(--color1); position: absolute; transition: .15s ease-in-out;} .news .dropdown-item > div {display: none; width: 100%;} .news .dropdown-item.show svg {transform: rotate(90deg);} @media screen and (min-width: 641px) { .news .dropdown-item {padding: 1.3rem;} .news .dropdown-item svg {right: 1.3rem; top: 1.5rem;} } @media screen and (max-width: 640px) { .news .dropdown-item {padding: 1rem;} .news .dropdown-item svg {right: 1rem; top: 1.2rem;} } .news .message {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1em 1.2em; padding: 1.5em 1.7em; margin-top: var(--margin-top-s); border: solid 0.12em var(--color1); border-radius: var(--border-radius); background: URL("images/premium-bg2.jpg") no-repeat right center; background-size: auto max(100%, 16em); position: relative; box-sizing: border-box;} .news .message > *:first-child {margin-top: 0;} .news .message .icon {display: flex; width: 1.3em; height: 1.3em; position: absolute; left: -0.65em; top: calc(50% - 0.65em);} .news .message .icon svg {display: block; width: 100%; height: 100%; fill: var(--color1);} .news .message .icon svg .white {fill: white;} .news .message.m1 p {width: auto; font-size: 0.9em; margin: 0;} .news .message .points {display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.3em 1em;} .news .message .points span {display: flex; align-items: center; gap: 0.3em; font-size: 1em; font-weight: bold; line-height: 1.3; white-space: nowrap;} .news .message .points span svg {display: block; width: 1em; height: 1em; fill: var(--color1); position: relative; top: -0.05em;} .news .message .points span a {color: inherit; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;} .news .message .points span a:hover {color: var(--color1); text-decoration-color: transparent;} .news .flex {margin-top: var(--margin-top-s);} @media screen and (min-width: 961px) { .news .img {width: 120%;} } @media screen and (max-width: 768px) { .news .message.m1 {flex-wrap: wrap;} .news .message .points {width: 100%; flex-direction: row;} } .news .graybox {display: block; width: 100%; padding: 1.2rem; background: rgba(0,0,0,0.08); box-sizing: border-box; border-radius: var(--border-radius); margin-top: var(--margin-top-l);} .news .graybox > *:first-child {margin-top: 0;} .news .graybox h3 { margin-bottom:1rem; } .news h3 a { color:var(--color1-400); } .news .graybox ul, .news .graybox ul {column-count: 2; column-gap: 2em;} .news .graybox ul li, .news .graybox ul li {display: inline-block;} .news .dropdown-items div { margin-top:1rem; } .news .highlight {display: block; width: 100%; background: rgba(0,0,0,0.08); padding: 1.5em 2em; margin-top: var(--margin-top-s); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;} .news .highlight > *:first-child {margin-top: 0;} .news .highlight p {text-align: center; font-size: 1em; color: var(--color1b);} .news .highlight p a:hover {color: var(--color1b);} .news .highlight ul { display:block; width:100%; margin-top:2rem; } .news .highlight ul li { color:var(--color0-900) !important; } .news .highlight ul li span { color:var(--color0-900) !important; } .news h3 { margin-bottom:1rem; margin-top:0.5rem; } .news ul { display:block; width:100%; /*margin-top:2rem;*/ } .news ul li { display:block; text-align:left; } .mce-content-body .dropdown-item > div { display: block !important; }