.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%;}
.embedBlok--audio { max-width: 660px; margin: 15px auto; }
.embedBlok--audio iframe { display: block; }

.vynutitZobrazeni { display:block !important; }
/*------------------------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; }

/*------------------------------------------------------*/

.in_website_hp { position: absolute; left: -9999px; opacity: 0; height: 0px; width: 0px; z-index: -1; }

.editor { padding:20px; }

.news-detail {
    max-width: 705px; margin: 10px auto;
    border: 1px solid black;
    padding: 10px;
    height: auto!important;
}
    
body {
    display: block !important;
}

.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }


/********************************************************************/
/********************************************************************/
/********************************************************************/
/********************************************************************/

/*------------------------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; }

/*------------------------------------------------------*/



:root                                           {

                                                --font1:          "Poppins", sans-serif; /* 400, 600, 700 */

                                                  

                                                --color1-100:           #f5f5f0;

                                                --color1-150:           #eaead2;

                                                --color1-200:           #e2fae7; 

                                                --color1-300:           #66c86f; 

                                                --color1-400:           #4ca13a; 

                                                --color1-500:           #417c4b; 

                                                --color1-600:           #3c645c; 

                                                --color1-700:           #27413d; 

                                                --color2-400:           #FF7B17; 

                                                --color2-500:           #FF632F;

                                                --color3-200:           #FFFAEA;

                                                --color3-500:           #BF9000;

                                                --color4-200:           #FFEBF1;

                                                --color4-500:           #C77990; 

                                                --color5-200:           #FFC8C8;



                                                --black-15:             rgba(0,0,0,0.15);

                                                --white-10:             rgba(255,255,255,0.1);

                                                --white-20:             rgba(255,255,255,0.2);

                                                --white-80:             rgba(255,255,255,0.8);



                                                --line-height1:         1.5;

                                                --line-height2:         1.25;  



                                                --wrapper-width:        90vw;

                                                --wrapper-side:         5vw;

                                                --section-padding:      min(5rem, calc(1.5rem + 6vw));



                                                --box-shadow1:          0 0 0.5em var(--black-15);

                                                --gap1:                 0.6rem;

                                                --gap2:                 max(1.5rem, calc(0.5 * var(--section-padding)));

                                                --article-gap:          min(2rem, calc(0.5rem + 3vw));

                                                --border-radius0:       0.4rem;

                                                --border-radius1:       1rem; 

                                                --item-outer-padding:   0.6rem;

                                                --item-outer-padding2:  var(--gap2);  

                                                }



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: clamp(14px, calc(3px + 1vw), 18px); color: var(--color1-700); font-weight: 400; line-height: var(--line-height1); position: relative; font-family: var(--font1); overflow-x: hidden;}

form                                            {display: flex; flex-direction: column;}

  @media screen and (min-width: 1801px)         {

  body                                          {font-size: 19px;}

  }



.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 74rem; flex-direction: column; align-items: center; flex-wrap: wrap; gap: var(--gap2); margin-inline: auto; position: relative; container-type: inline-size;}

.wrapper.thin                                   {max-width: 40rem;}

.wrapper.narrow                                 {max-width: 48rem;}

.wrapper.medium                                 {max-width: 58rem;}



.message                                        {display: block; width: 100%; font-size: 0.8em; padding-block: 0.45em; position: relative; z-index: 10;}

.message .wrapper                               {min-height: 0;}

.message .inner                                 {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1.2em; background: var(--color0); padding: 0.65em 0.85em; border-radius: 0.4em; box-sizing: border-box;}

.message.color1-200                             {background: var(--color1-200);}

.message.color3-200                             {background: var(--color3-200);}

.message.color4-200                             {background: var(--color4-200);}

.message .inner p a                             {color: inherit; text-decoration: underline; transition: .2s ease-in-out;}

.message .inner p a:hover                       {text-decoration-color: transparent;}

.message .inner .close                          {display: block; width: 1.15em; height: 1.15em; position: relative; cursor: pointer; flex-shrink: 0; transition: .15s ease-in-out;}

.message .inner .close:before, 

.message .inner .close:after                    {display: block; width: 90%; height: 0.14em; background: var(--color1-700); position: absolute; left: 5%; top: 0.5em; 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%; min-height: var(--header-height); position: relative; z-index: 9999; --topbar-height: 4em;}

.header .wrapper                                {min-height: var(--header-height); flex-direction: row; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: nowrap;}

.header .logo                                   {display: flex; width: var(--logo-width); height: 100%; align-items: center; position: relative; z-index: 10; box-sizing: border-box;}    

.header .logo img                               {display: block; width: 100%;}    

.header .collapse                               {display: flex;}

.header .topbar                                 {display: flex; align-items: center; position: relative; z-index: 2; box-sizing: border-box;}

.header .topbar > ul                            {display: flex; font-size: 0.8em;}

.header .topbar > ul li                         {display: flex; align-items: center; gap: 0.3em; position: relative;}

.header .topbar > ul li a                       {display: flex; align-items: center; color: var(--color0); position: relative; box-sizing: border-box; transition: .2s ease-in-out;}

.header .topbar > ul li a:hover                 {color: var(--color1-400);}

.header .topbar > ul li a[aria-current="page"]  {color: var(--color1-400); font-weight: 600;}

.header .topbar > ul li.phone a                 {text-decoration: underline;}

.header .topbar > ul li.phone a:hover           {text-decoration-color: transparent;}

.header nav                                     {display: flex;}

.header nav > ul                                {display: flex;}

.header nav > ul > li                           {display: flex; align-items: center;}

.header nav > ul > li > a                       {display: flex; align-items: center; color: inherit; font-weight: 600; line-height: var(--line-height2); position: relative; padding: 0.5em 1em 0.45em; border-radius: var(--border-radius0); box-sizing: border-box; transition: .2s ease-in-out;}

.header nav > ul > li > a[href]:hover           {color: var(--color1-400);}

.header nav > ul > li:has(a[aria-current="page"]) > a,

.header nav > ul > li > a[aria-current="page"]  {color: var(--color1-400); background: var(--color1-200);}

.header nav > ul ul                             {display: none; flex-wrap: wrap; box-sizing: border-box;}

.header nav > ul ul li                          {display: flex; box-sizing: border-box;}

.header nav > ul ul li a                        {display: flex; color: var(--color1-700); font-weight: 600; position: relative; box-sizing: border-box; transition: .2s ease-in-out;}

.header nav > ul > li:has(a[aria-current="page"]) ul

                                                {display: flex;}

.header nav .button                             {font-size: 0.75em;}

  @media screen and (min-width: 1081px)         {

  .header                                       {--header-submenu-height: 3rem;}

  .header :is(.mobile-only, .cross)             {display: none;}

  .header .logo                                 {--logo-width: 13em; position: relative; top: calc(0.5 * var(--topbar-height));}

  .header .collapse                             {height: 100%; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.6em; flex-grow: 2; padding-top: var(--topbar-height);}

  .header .topbar                               {height: var(--topbar-height); position: absolute; top: 0;}

  .header .topbar ul                            {gap: 2em;}

  .header nav                                   {align-items: center; gap: 1.4em; font-size: 1.2em;} 

  .header nav > ul                              {font-size: 0.85em;}

  .header nav > ul ul                           {display: none; width: 100%; height: var(--header-submenu-height); justify-content: center; background: var(--color1-100); border-radius: var(--border-radius0); overflow: hidden; position: absolute; left: 0; bottom: 0;}

  .header nav > ul ul li a                      {align-items: center; font-size: 0.85em; color: var(--color1-600); padding: 0.1em 1em 0;}

  .header nav > ul ul li a:hover                {background: var(--color1-150);}

  .header nav > ul ul li a[aria-current="page"] {color: var(--color1-700); background: var(--color1-150);}

  .header:has(nav > ul > li ul):has(nav ul ul a[aria-current="page"]) > .wrapper

                                                {padding-bottom: calc(1.5em + var(--header-submenu-height));}

  }

  @media screen and (max-width: 1080px)         {

  .header                                       {--logo-width: 9em;}

  .header .desktop-only                         {display: none;}

  .header .mobile-only                          {display: flex;}

  .header > .wrapper                            {padding-top: 1em;}

  .header > .wrapper > .mobile-only             {justify-content: flex-end; flex-grow: 2;}

  .header .logo                                 {--logo-width: 10em;}

  .header .collapse                             {width: 21em; height: 100%; flex-wrap: wrap; background: var(--white-80); backdrop-filter: blur(5px); --inner-padding: 1.2rem; overflow-y: auto; position: fixed; right: -22em; top: 0; z-index: 1000; box-sizing: border-box; box-shadow: var(--box-shadow1); opacity: 0; transition: opacity .5s ease-in-out, right .5s ease-in-out;} 

  .header nav                                   {width: 100%; order: 0; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; padding: 0 var(--inner-padding); box-sizing: border-box;} 

  .header nav > ul                              {width: 100%; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}

  .header nav > ul > li                         {width: 100%; flex-wrap: wrap;}

  .header nav > ul > li > a                     {width: 100%; font-size: 1.2em; padding-inline: var(--inner-padding); border-left: solid 0.2em transparent}

  .header nav > ul > li > a[aria-current="page"]{color: var(--color1-400); border-color: var(--color1-400);}

  .header nav > ul ul                           {flex-direction: column; padding: 0.6em var(--inner-padding); gap: 0.2em;}

  .header nav > ul ul li a                      {padding-left: 1.5em;}

  .header nav > ul ul li a:before               {display: block; width: 1.2em; height: 1em; background: url("images/icons/arrow-right-color1-700.svg") no-repeat left center; position: absolute; left: 0; top: 0.24em; content: "";}

  .header nav > ul ul li a[aria-current="page"] {color: var(--color1-400);}

  .header .upper                                {display: flex; width: 100%; justify-content: flex-end; padding: var(--inner-padding); box-sizing: border-box;}

  .header .topbar                               {flex-wrap: wrap; gap: 1rem; order: 1; padding: var(--inner-padding) calc(2 * var(--inner-padding));}

  .header .topbar > ul                          {flex-wrap: wrap; font-size: 0.9em;}

  .header .topbar > ul li                       {width: 100%;}

  .header .topbar > ul li a                     {color: var(--color1b); padding: 0.3rem 0; box-sizing: border-box;}

  .header .topbar > ul li a:hover               {color: var(--color1);}

  .header .cross                                {display: flex; width: 1.4em; height: 16px; font-size: 1em; cursor: pointer; position: relative; z-index: 10;}

  .header .cross span                           {display: block; width: 100%; height: 0.16em; background: var(--color1-700); position: absolute; transition: .2s ease-in-out;}

  .header .cross:hover span                     {background: var(--color1-400);}

  .header .cross span:nth-child(1)              {top: 0;}

  .header .cross span:nth-child(2),

  .header .cross span:nth-child(3)              {top: calc(50% - 0.08em);}

  .header .cross span:nth-child(4)              {bottom: 0;}

  .header .cross div                            {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;}

  .header.show .cross span:nth-child(2)         {transform: rotate(45deg);}

  .header.show .cross span:nth-child(3)         {transform: rotate(-45deg);}

  .header.show .cross span:nth-child(1), 

  .header.show .cross span:nth-child(4)         {opacity: 0 !important;}

  .header.show .cross div                       {display: block;}

  .header.show .collapse                        {right: 0; opacity: 1;}

  }

  @media screen and (max-width: 440px)          {

  .header .mobile-only .button                  {font-size: 0.85em; padding-inline: 1em;}

  .header .mobile-only .button svg              {display: none;}

  }



.footer                                         {display: block; width: 100%; background-image: linear-gradient(to left, #2D655C, #1E433D); padding-top: var(--section-padding);}

.footer .wrapper > div                          {display: flex; width: 100%; justify-content: space-between; gap: var(--section-padding) 0; flex-wrap: wrap;}

.footer-cta                                     {display: flex; width: 25em; flex-direction: column; align-items: flex-start; gap: 1em;}

.footer-cta .title                              {display: block; font-size: 1.5em; color: var(--color1-300); font-weight: 600;}

.footer-features                                {display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; font-size: 0.9em;}

.footer-features li                             {display: block; padding-left: 1.5em; color: white; position: relative; box-sizing: border-box;}

.footer-features li:before                      {display: block; width: 1em; height: 1em; background: url("images/icons/leaves.svg") no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0.25em; content: "";}

.footer-steps                                   {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.8em 0; margin-top: -1em;}

.footer-steps span                              {display: block; font-size: 0.8em; color: white; white-space: nowrap; padding: 0.6em 1.2em 0.5em; background: var(--black-15); border-radius: 1.2em; box-sizing: border-box; position: relative;}

.footer-steps span a                            {color: white; text-decoration: underline; transition: .15s ease-in-out;}

.footer-steps span a:hover                      {text-decoration-color: transparent;}

.footer-steps span:not(:last-child)             {margin-right: 3em;}

.footer-steps span:not(:last-child):after       {display: inline-block; width: 1em; height: 100%; background: url("images/icons/arrow-right-white.svg") no-repeat center center; background-size: contain; margin-inline: 0.5em; position: absolute; top: 0; right: -2.5em; content: "";}



.footer .middle                                 {padding-top: var(--gap2); border-top: solid 1px var(--color1-500);}

.footer-col                                     {display: flex; width: 23%; flex-direction: column; gap: var(--gap2);}

.footer-col ul                                  {display: flex; flex-direction: column; gap: 0.6em;}

.footer-col ul li a                             {color: white; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}

.footer-col ul li a:hover                       {text-decoration-color: inherit;}

.footer-col:nth-child(1) ul                     {font-size: 1.1em; font-weight: 600;}

.footer-col:nth-child(2) ul                     {font-size: 0.9em;}

.footer-col:nth-child(3) ul                     {font-size: 0.7em;}

.footer-service                                 {display: flex; flex-direction: column; gap: 0.9em;}

.footer-service .photos                         {display: flex; padding-inline: 0.5em; box-sizing: border-box;}

.footer-service .photos a                       {display: block; max-width: 4em; aspect-ratio: 1; border-radius: 100%; border: solid 0.15em var(--color1-300); box-sizing: border-box; overflow: hidden; margin-inline: -0.5em;}

.footer-service .photos a img                   {display: block; width: 100%; height: 100%; object-fit: cover;}

.footer-service span                            {display: block; font-size: 0.85em; color: white;}

.footer-service span a                          {color: white; text-decoration: underline; white-space: nowrap; transition: .15s ease-in-out;}

.footer-service span a:hover                    {text-decoration-color: transparent;}

.footer .bottom                                 {column-gap: var(--gap2);}

.footer-soc                                     {display: flex; flex-direction: column; gap: 0.5em;}

.footer-soc .title                              {display: block; font-size: 0.9em; color: white;}

.footer-soc .icons                              {display: flex; flex-wrap: wrap; gap: 0.8em; font-size: min(1em, calc(0.2em + 2vw));}

.footer-soc .icons a                            {display: flex; width: 4.2em; height: 4.2em; justify-content: center; align-items: center; background: var(--black-15); border-radius: var(--border-radius0); transition: .15s ease-in-out;}

.footer-soc .icons a img                        {display: block; height: 45%;}

.footer-soc .icons a:hover                      {background: var(--white-10);}

.footer-logo                                    {display: block; width: 15em; font-size: min(1em, calc(0.2em + 2vw));}

.footer-logo img                                {display: block; width: 100%;}

.footer-last                                    {display: flex; width: 100%; justify-content: space-between; gap: var(--gap1) var(--gap2); padding-block: var(--gap2); border-top: solid 1px var(--color1-500);}

.footer-last span                               {display: block; font-size: 0.75em; color: var(--color1-200); opacity: 0.5;}

  @media screen and (max-width: 961px)          {

  .footer-col                                   {width: 45%;}

  }

  @media screen and (max-width: 768px)          {

  .footer .bottom                               {flex-direction: column; align-items: center;}

  .footer-soc .title                            {text-align: center;}

  .footer-soc .icons                            {justify-content: center;}

  .footer-last                                  {flex-direction: column; align-items: center;}

  }



.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;}

.main :is(p a, li a, td a)                      {color: inherit; text-decoration: underline; text-decoration-color: var(--color1-400); transition: .15s ease-in-out;}

.main p a:hover, .main li a:hover, .main td a:hover

                                                {color: var(--color1-400); text-decoration-color: transparent;}



.section                                        {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-top: var(--section-padding); box-sizing: border-box;}

.section:first-of-type                          {padding-top: calc(0.7 * var(--section-padding));} 

.section:last-of-type                           {padding-bottom: var(--section-padding);} 



li, p, td                                       {line-height: var(--line-height1);}



strong                                          {font-weight: 600;}

em                                              {font-style: italic;}



.txt-color1-300                                 {color: var(--color1-300);}



h1, h2, h3, h4                                  {display: block; width: 100%; color: var(--color1-500); font-weight: 600; line-height: var(--line-height2); box-sizing: border-box; position: relative;}

h1                                              {font-size: min(3rem, calc(0.9rem + 4vw));}

h2                                              {font-size: min(2.4rem, calc(0.55rem + 4vw)); color: var(--color1-700);}

h3                                              {font-size: min(1.8rem, calc(0.3rem + 4vw));}

h1 span, h2 span, h3 span                       {color: var(--color1-300);}



.section-head                                   {display: flex; width: 100%; max-width: 56rem; flex-direction: column; align-items: center; gap: var(--gap1);}

.section-head .icon1                            {display: block; height: 3.5em;}

.section-head .icon1 img                        {display: block; height: 100%;}

.section-head :is(h1, h2, p)                    {text-align: center;}

.section-head .claim                            {color: var(--color1-500);}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.8em; font-size: 0.9em; font-weight: 600; white-space: nowrap; padding: 0.64em 1.55em 0.55em; border-radius: var(--border-radius0); border-style: solid; border-width: 0.1em; border-color: transparent; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .25s ease-in-out;}

.button :is(img, svg)                           {display: block; width: auto; height: 0.9em; position: relative; top: -0.025em; transition: .25s ease-in-out;}

.button.color1-400                              {background: var(--color1-400); color: white;}

.button.color1-400 svg                          {fill: white;}

.button.color1-400:hover                        {background: var(--color1-500);}

.button.color1-600                              {background: var(--color1-600); color: white;}

.button.color1-600:hover                        {background: var(--color1-700);}

.button.color1-700                              {background: var(--color1-700); color: white;}

.button.color1-700:hover                        {background: var(--color1-600);}

.button.color2-500                              {background-image: linear-gradient(to top, var(--color2-500), var(--color2-400)); color: white;}

.button.color2-500 svg                          {fill: white;}

.button.color2-500:hover                        {filter: brightness(0.92);}



.button.border1-500                             {color: var(--color1-500); border-color: var(--color1-500);}

.button.border1-500 svg                         {fill: var(--color1-500);}

.button.border1-500:hover                       {color: white; background: var(--color1-500); border-color: var(--color1-500);}

.button.border1-500:hover svg                   {fill: white;}



.link                                           {display: inline-block; color: var(--color1-700); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}

.link:hover                                     {color: var(--color1-500); text-decoration-color: transparent;}

.link.dotted                                    {text-decoration-style: dotted;}



.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--flex-gap); --flex-gap: 0.6em; box-sizing: border-box;}



.hub                                            {gap: 0.8em; font-size: min(1.35em, calc(0.2em + 3vw)); margin-top: var(--gap1);}

.hub .button                                    {font-weight: 600; padding: 0.54em 1.5em 0.45em;}



.submenu                                        {display: flex; width: 100vw; --submenu-height: 2.8em; justify-content: center; margin-inline: calc(0.5 * var(--wrapper-width) - 50vw); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;

                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;

                                                 mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent);

                                                }

.submenu nav                                    {display: flex; width: auto; max-width: calc(100% + 0.4em); margin-inline: -0.2em; flex-direction: row; margin: 0 !important; padding: 0 !important; box-sizing: border-box;}

.submenu nav::-webkit-scrollbar                 {display: none;}

.submenu nav div                                {display: flex; width: var(--submenu-item-width); padding: 0.2em 0.2em 0.5em; margin: 0; scroll-snap-align: start; box-sizing: border-box; flex-shrink: 0;}

.submenu nav div a                              {display: flex; width: 100%; height: var(--submenu-height); justify-content: center; align-items: center; background: var(--color1-100); border-radius: var(--border-radius0); font-size: 0.8em; color: var(--color1-700); text-decoration: none; font-weight: 600; padding: 0.1em 0.8em; box-sizing: border-box; cursor: pointer; transition: .25s ease-in-out;}

.submenu nav div a:hover                        {background: var(--color1-150); cursor: pointer;}

.submenu nav div a.sel                          {background: var(--color1-150);}

.submenu.w7em                                   {--submenu-item-width: 7em;}

.submenu.w10em                                  {--submenu-item-width: 10em;}

  @media screen and (min-width: 1081px)         {

  .submenu                                      {width: 100%; margin-inline: 0; mask-image: none; -webkit-mask-image: none;}

  .submenu nav                                  {width: 100%; justify-content: center; flex-wrap: wrap;}

  .submenu nav div                              {padding: 0.2em;}

  .submenu nav div a                            {flex-direction: row;}

  }

  @media screen and (max-width: 1080px)         {

  .submenu nav div:first-child                  {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-left: calc(50vw - 0.5 * var(--wrapper-width));}

  .submenu nav div:last-child                   {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-right: calc(50vw - 0.5 * var(--wrapper-width));}

  }

  @media screen and (max-width: 640px)          {

  .submenu                                      {font-size: 0.9em;}

  }



.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em;}

.pagination a                                   {display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; font-size: 0.8em; font-weight: 600; line-height: 1; color: var(--color1-700); border-radius: var(--border-radius0); border: solid 0.12em var(--color1-700); padding-top: 0.1em; cursor: pointer; box-sizing: border-box; transition: .2s ease-in-out;}

.pagination a:hover                             {background: var(--color1-200);}

.pagination a.sel                               {color: white; background: var(--color1-700);}



.swiper                                         {width: 100%;}

.swiper-slide                                   {display: flex; height: auto; position: relative; overflow: hidden; box-sizing: border-box; flex-shrink: 0;}



.swiper-button                                  {display: flex; width: var(--swiper-button-size); height: var(--swiper-button-size); --swiper-button-size: 2em; justify-content: center; align-items: center; background: var(--color1-400); font-size: 1em; border-radius: 100%; border: none; box-sizing: border-box; margin: 0; position: relative; inset: auto; z-index: 2; cursor: pointer; transition: .15s ease-in-out;}                                

.swiper-button svg                              {display: block; width: 50%; fill: white;}

.swiper-button-prev                             {transform: rotate(180deg);}

.swiper-button:before,                         

.swiper-button:after                            {display: none;}

.swiper-button-disabled                         {opacity: 0.15 !important; background: var(--color1-700);}

.swiper-button:hover                            {background: var(--color1-500);}



.swiper-pagination                              {display: flex; width: auto !important; gap: 0.9em; position: static;}

.swiper-pagination-bullet                       {width: 0.8em; height: 0.8em; margin: 0 !important;}

.swiper-pagination-bullet-active                {background: var(--color1-400);}



.carousel                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative; box-sizing: border-box;}

.carousel .swiper-slide > *                     {width: 100%;}

.carousel .carousel-controls                    {display: flex; width: 100%; justify-content: space-between; align-items: center;}

.carousel .carousel-controls:has(.swiper-pagination-lock)

                                                {display: none;}

.carousel-gallery                               {gap: var(--gap1);}

.carousel-gallery .carousel-controls            {width: calc(100% - 2 * var(--item-outer-padding)); margin-inline: var(--item-outer-padding);}

  @media screen and (min-width: 961px)          {

  .carousel.desktop-disabled .carousel-controls {display: none;}

  }

  @media screen and (min-width: 581px)          {

  .carousel:has(.preview) .swiper               {width: calc(100% + 2 * var(--item-outer-padding)); margin: calc(-1 * var(--item-outer-padding));}

  }

  @media screen and (max-width: 580px)          {

  .carousel                                     {--item-outer-padding: 0.35rem;}

  .carousel .swiper                             {width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: calc(var(--wrapper-side) - var(--item-outer-padding)); box-sizing: border-box;}

  }



.carousel:has(.preview) .swiper-slide           {padding: var(--item-outer-padding);}

.carousel .preview                              {width: 100%;}



.grid, .carousel-gallery                        {display: flex; width: calc(100% + 2 * var(--grid-gaps)) !important; flex-wrap: wrap; --grid-gaps: var(--item-outer-padding); --items-count: 1; margin: calc(-1 * var(--grid-gaps));} 

.grid.centered                                  {justify-content: center;}

.grid .grid-item,

.carousel-gallery .swiper-slide                 {display: flex; width: calc(100% / var(--items-count)); padding: var(--grid-gaps); box-sizing: border-box;}

.grid.larger-gaps                               {--grid-gaps: var(--item-outer-padding2);}

.g4-3-2, .g3-2                                  {--items-count: 2;}

  @media screen and (min-width: 1081px)         {

  .g4-3-2,

  .g4-2-1                                       {--items-count: 4;}

  }

  @media screen and (min-width: 581px) and (max-width: 1080px){

  .g4-3-2                                       {--items-count: 3;}

  .g4-2-1                                       {--items-count: 2;}

  }

  @media screen and (min-width: 961px)          {

  .g2-1                                         {--items-count: 2;}

  .g3-2-1, .g3-2                                {--items-count: 3;}

  }

  @media screen and (min-width: 581px) and (max-width: 960px){

  .g3-2-1                                       {--items-count: 2;}

  }  



.preview                                        {display: flex; flex-direction: column; flex-wrap: wrap; flex-grow: 2; background: var(--color1-100); border-radius: var(--border-radius1); overflow: hidden; position: relative; box-sizing: border-box; transition: .15s ease-in-out;}

.preview .img                                   {display: block; width: 100%; background: white; overflow: hidden; position: relative; transition: .15s ease-in-out;}

.preview .img span                              {display: block; width: 100%; transition: .15s ease-in-out;}

.preview .img span img                          {display: block; width: 100%;}

.preview .img span:hover                        {opacity: 0.85;}

.preview .img.ar16-9                            {padding-top: 56.25%;}

.preview .img.ar16-9 span                       {position: absolute; inset: 0;}

.preview .img.ar16-9 span img                   {height: 100%; object-fit: cover;}

.preview .teaser                                {display: flex; width: 100%; flex-direction: column; gap: 0.8em; flex-grow: 2; box-sizing: border-box; padding: 1.5em; container-type: inline-size;}

.preview .teaser span                           {display: block; width: 100%; text-align: left; box-sizing: border-box; position: relative;}

.preview .label                                 {display: flex; width: auto; height: 1.2em; align-items: center;}

.preview .label:has(> img:only-child)           {padding: 0; border-radius: 0;}

.preview .label img                             {display: block; height: 100%;}

.preview .tags                                  {display: flex; width: 100%; flex-wrap: wrap; gap: 0.25em;}

.preview .tags span                             {width: auto; font-size: 0.75em; color: white; background: var(--color1-600); padding: 0.25em 0.7em 0.2em; border-radius: var(--border-radius0);}

.preview .title                                 {font-size: clamp(1.2em, 9cqw, 1.4em); font-weight: 600; line-height: var(--line-height2); margin-top: -0.12em;}

.preview .title a                               {color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}

.preview .title a:hover                         {color: var(--color1-500); text-decoration-color: inherit;}

.preview .text                                  {font-size: 0.8em;}

.preview .bottom                                {display: flex; width: 100%; align-content: flex-end; flex-wrap: wrap; gap: 0.6em 1em; flex-grow: 2; margin-top: 0.2em;}

.preview .bottom .link                          {font-size: 0.8em;}

.preview > a                                    {display: block; position: absolute; inset: 0; z-index: 10;}



.preview.color1-400                             {background: var(--color1-400);}

.preview.color1-700                             {background: var(--color1-700);}

.preview.color1-600                             {background: var(--color1-600);}

.preview:not([class="preview"]) .teaser :is(span, .link)

                                                {color: white;}

.preview:not([class="preview"]) .teaser .title a:hover

                                                {color: var(--color1-200);}                                                 

.preview .tags.rounded span                     {border-radius: 1.2em;}

.preview .tags.color1-400 span                  {background: var(--color1-400);}

.preview.color1-600 .tags span                  {background: var(--color1-700);}



.blocks .swiper-slide                           {align-items: flex-end;}



.feedback                                       {background: var(--color1-200);}

.feedback .text                                 {font-size: 0.9em; font-style: italic; color: var(--color1-700) !important;}

.feedback .subject                              {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; gap: 1em;}

.feedback .subject > div                        {display: block; font-size: 0.8em;}

.feedback .subject span                         {color: var(--color1-700) !important;}

.feedback .subject .img2                        {display: block; width: min(4.5em, 40%); flex-shrink: 0;}

.feedback .subject .img2 img                    {display: block; width: 100%;}

  @media screen and (max-width: 580px)          {

  .feedback                                     {font-size: 1.1em;}

  }



.preview.full-size                              {width: 100%; gap: 1.2em 0; background: none; border-radius: 0;}

.preview.full-size .img                         {padding: 0 !important; border-radius: var(--border-radius1);}

.preview.full-size .teaser                      {padding: 0;}

.preview.full-size .teaser .title               {font-size: clamp(1.35em, 11cqw, 1.65em); color: var(--color1-700) !important;}

  @media screen and (min-width: 961px)          {

  .preview.full-size                            {flex-direction: row; justify-content: space-between;}

  .preview.full-size .teaser                    {width: calc(33.33% - 2rem); order: -1; font-size: 1.2em; flex-grow: unset;}

  .preview.full-size .teaser .title             {font-size: 1.6em;}

  .preview.full-size .img                       {width: calc(66.66% - 0.5 * var(--item-outer-padding)); padding-top: calc(0.66 * 56.25%);}

  }



.c4-3-2-1 .swiper-slide                         {width: 100%; min-height: 22rem;}

  @media screen and (min-width: 1281px)         {

  .c4-3-2-1 .swiper-slide                       {width: 25%;}

  .c4-3-2-1 .swiper-slide.double                {width: 50%;}

  }

  @media screen and (min-width: 961px) and (max-width: 1280px){

  .c4-3-2-1 .swiper-slide             {width: calc(100% / 3);}

  .c4-3-2-1 .swiper-slide.double      {width: calc(100% * 2 / 3);}

  }  

  @media screen and (min-width: 581px) and (max-width: 960px){

  .c4-3-2-1 .swiper-slide             {width: 50%;}

  .c4-3-2-1 .swiper-slide.double      {width: 100%;}

  } 

  @media screen and (min-width: 581px) and (max-width: 1600px)         {

  .c4-3-2-1 .swiper                           {overflow: visible;}

  }



.preview.podcast                                {height: min(30rem, calc(20rem + 15vw));}

.preview.podcast .img                           {padding-top: 0; position: absolute; inset: 0;}

.preview.podcast .teaser                        {justify-content: flex-end; background-image: linear-gradient(to top, var(--color1-500), var(--color1-500) 25%, transparent 70%, transparent); padding: 1.9em 12cqw; position: absolute; inset: 0; z-index: 2;}

.preview.podcast .teaser span                   {text-align: center; color: white;}

.preview.podcast .teaser .title:before          {display: block; width: 3em; height: 3em; background: url("images/icons/play1.svg") no-repeat center center; background-size: contain; position: absolute; left: calc(50% - 1.5em); top: -4.5em; z-index: 5; content: "";}

.preview.podcast .teaser .text                  {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.preview.podcast .teaser .apps                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em 1.1em;}

.preview.podcast .teaser .apps img              {display: block; height: 2em;}

.preview.podcast:hover                          {filter: brightness(0.92);}



.carousel .preview.podcast                      {height: auto;}                     



.faq                                            {display: flex; width: 100%; flex-direction: column; gap: var(--section-padding);}

.faq .group                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.faq .group > *                                 {display: flex; width: 100%; flex-direction: column; gap: var(--gap1);}

.faq .group > div :is(h2, p)                    {text-align: center;}

.faq :is(dt, dd)                                {display: block; width: 100%; text-align: left; box-sizing: border-box;}

.faq dl > div                                   {display: flex; width: 100%; flex-direction: column; background: var(--color1-100); border-radius: var(--border-radius1); padding: 0.9em 1.1em 0.8em; box-sizing: border-box;}

.faq dt                                         {font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; padding-right: 1.3em; cursor: pointer; position: relative; transition: .15s ease-in-out;}

.faq dt:after                                   {display: block; width: 0.8em; height: 100%; opacity: 0.6; background: url("images/icons/chevron-up.svg") no-repeat center center; background-size: contain; position: absolute; right: 0; top: 0; content: ""; transition: .15s ease-in-out;}

.faq dt:hover                                   {text-decoration-color: inherit;}

.faq dd                                         {display: none; padding-block: 0.8em 0.3em;}

.faq dd *                                       {font-size: 0.9rem;}

.faq dd > *:not(:first-child)                   {margin-top: 0.65em;}

.faq dd :is(ul, ol)                             {display: block; width: 100%; padding: 0 0 0 0.8em; margin: -0.4em 0 0;}

.faq dd :is(ul li, ol li)                       {display: inline-block; padding-left: 1.1em; position: relative; box-sizing: border-box;}

.faq dd li:before                               {display: block; position: absolute; content: "";}

.faq dd ul li:before                            {width: 0.3em; height: 0.3em; left: 0; top: 0.55em; background: var(--color1-700); border-radius: 100%;}

.faq dd ol                                      {list-style-type: none; counter-reset: li;}

.faq dd ol > li                                 {counter-increment: li;}

.faq dd ol > li:before                          {left: 0; top: 0; content: counter(li)".";}

.faq dd ol:has(ul) > li:not(:first-child)       {margin-top: 0.5em;}

.faq dl div.sel dt:after                        {transform: rotate(180deg);}

  @media screen and (min-width: 1081px)         {

  .faq .group > div                             {width: 30%;}

  .faq .group dl                                {width: 65%;}

  .faq .group > div h2                          {text-align: left; font-size: 1.7em;}

  .faq .group > div p                           {text-align: left; font-size: 0.85em;}

  }



.grid:has(.infographic)                         {--item-outer-padding: 1.2em;}



.infographic                                    {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1);}  

.infographic .icon                              {display: block; height: 4em;}

.infographic .icon img                          {display: block; height: 100%;}

.infographic span                               {display: block; width: 100%; text-align: center;}

.infographic .title                             {font-size: 1.4em; font-weight: 600;}



.box                                            {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; padding: max(1.8em, 4cqw); box-sizing: border-box; border-radius: var(--border-radius1);}

.box .inner                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; box-sizing: border-box; border-radius: var(--border-radius0)}

.box span                                       {display: block; width: 100%;}

.box .title                                     {font-size: 1.6em; font-weight: 600;}

.box.color1-100                                 {background: var(--color1-100);}

.box.color1-200                                 {background: var(--color1-200);}

.box.color3-200                                 {background: var(--color3-200);}

.box.color4-200                                 {background: var(--color4-200);}

.box.color5-200                                 {background: var(--color5-200);}

.box.decor                                      {background: url("images/decor-pattern.svg") repeat center center, white; background-size: calc(1em + 10%); border: solid 0.5rem white; box-shadow: 0 0 0.4em var(--black-15);}

.box.decor .inner                               {gap: var(--article-gap); background: white; padding: max(1.4em, 3cqw); font-size: 0.9em;}

.box.decor .inner > *:first-child               {margin-top: 0;}

  @media screen and (max-width: 580px)          {

  .box > .button                                {width: 100%;}

  }



.box.centered                                   {flex-direction: column; align-items: center;}

.box.centered *:not(li, td)                     {text-align: center;}

.box.centered .image                            {display: block; width: 100%; max-width: 50rem; border-radius: var(--border-radius0); overflow: hidden;}

.box.centered .image img                        {display: block; width: 100%;}

  @media screen and (min-width: 1081px)         {

  .box.centered                                 {padding: 6%;}

  }



.file-download                                  {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; font-size: 0.9rem; background: var(--color1-100); padding: 0.6em 1em; border-radius: var(--border-radius0); border: solid 0.1em var(--color1-150); box-sizing: border-box;}

.file-download span                             {display: flex; width: auto; align-items: center; gap: 0.5em; text-align: left; font-weight: 600; line-height: var(--line-height2); padding-top: 0.1em;}

.file-download span img                         {display: block; height: 1em; position: relative; top: -0.03em;}

.file-download .button                          {font-size: 0.8em; padding: 0.45em 0.9em 0.35em;}



.contact-box                                    {flex-direction: column; align-items: center;}

.contact-box .title                             {text-align: center;}  

.contact-box-contacts                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2);}

.contact-box-contacts > div                     {display: flex; max-width: 16em; flex-direction: column; gap: 0.4em;}

.contact-box-contacts > div a                   {display: flex; align-items: center; gap: 0.4em; font-size: min(1.5em, calc(0.6em + 3cqw)); color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}

.contact-box-contacts > div a img               {display: block; height: 1.2em; position: relative; top: -0.05em;}

.contact-box-contacts > div a:hover             {text-decoration-color: inherit;}

.contact-box-contacts > div .note               {display: block; font-size: 0.8em;}

.contact-box .button                            {font-size: 1em; padding-inline: 2em;}

  @media screen and (min-width: 961px)          {

  .grid .contact-box                            {align-items: flex-start;}

  .grid .contact-box .title                     {text-align: left;}

  .grid .contact-box-contacts                   {justify-content: flex-start;}

  .grid .contact-box-contacts > div             {max-width: 100%;}

  }

  @media screen and (max-width: 580px)          {

  .contact-box-contacts > div                   {width: 100%; align-items: center; text-align: center;}

  }





.cta-podcasts                                   {justify-content: center;}

.cta-podcasts .text                             {display: flex; flex-direction: column; gap: 0.5em; flex-grow: 2;}

.cta-podcasts .text span                        {display: block; font-size: 0.9em;}

.cta-podcasts .text .title                      {font-size: 1.5em; font-weight: 600; line-height: var(--line-height2);}

.cta-podcasts .buttons                          {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7em; font-size: min(1em, calc(0.1em + 2.3vw));}

.cta-podcasts .button                           {width: 12em; justify-content: flex-start; font-size: 1.1em; padding-inline: 0.8em;}

.cta-podcasts .button img                       {height: 2.2em;}

.cta-podcasts .button span                      {display: block; font-size: 0.7em; font-weight: 400;}

.cta-podcasts .button span strong               {display: block; font-size: 1.2em; margin-top: -0.15em;}

  @media screen and (max-width: 1080px)         {

  .cta-podcasts .text                           {width: 100%; align-items: center; text-align: center;}

  }



.podcast-embed                                  {display: block; width: 100%; border-radius: var(--border-radius1); border: solid 12px var(--color1-400); padding: 12px; box-sizing: border-box;}

.podcast-embed iframe                           {display: block; width: 100%; height: 95px;}

 

.image                                          {display: block; width: 100%;} 

.image > a                                      {display: block; width: 100%; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;} 

.image > a img                                  {display: block; width: 100%; height: 100%; object-fit: cover;}

.image > a:hover                                {opacity: 0.85;}

.image.ar16-9 > a                               {aspect-ratio: 16/9;}



figcaption                                      {display: block; width: 100%; text-align: center; font-size: 0.7em; margin-top: 0.8em;}

figcaption a                                    {color: inherit; text-decoration: underline;  transition: .15s ease-in-out;}

figcaption a:hover                              {text-decoration: none;}



.embed                                          {display: block; width: 100%;}

.embed > div                                    {display: block; width: 100%; border-radius: var(--border-radius1); overflow: hidden;}

.embed iframe                                   {display: block; width: 100%;}



.article-styles > *                             {width: 100%;}

.article-styles :is(h2, h3, h4)                 {margin-bottom: calc(-0.4 * var(--article-gap)); color: var(--color0-700);}

.article-styles h2                              {font-size: min(1.75rem, calc(0.5rem + 4vw)); margin-top: 0.5em;}

.article-styles h2 + p                          {margin-block: -0.5rem 0;}

.article-styles h3                              {font-size: min(1.45rem, calc(0.3rem + 4vw)); margin-top: -0.2em;}

.article-styles h3 + p                          {margin-block: -0.5rem 0;}

.article-styles h2 + h3                         {margin-top: 0.25em;}

.article-styles h4                              {font-size: min(1.2rem, calc(0.1rem + 4vw)); margin-top: -0.2em;}

.article-styles h4 + p                          {margin-block: -0.5rem 0;}

.article-styles :is(ul, ol)                     {display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding: 0 0 0 0.8em; margin: -0.6em 0 0; box-sizing: border-box;}

.article-styles :is(ul li, ol li)               {display: inline-block; padding-left: 1.4em; position: relative; box-sizing: border-box; margin-top: 0.2em;}

.article-styles li:before                       {display: block; position: absolute; content: "";}

.article-styles ul li:before                    {width: 0.3em; height: 0.3em; left: 0; top: 0.58em; background: var(--color1-700); 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; top: 0; content: counter(li)".";}

.article-styles ol:has(ul) > li:not(:first-child)

                                                {margin-top: 0.5em;}

.article-styles p + p                           {margin-top: calc(-0.5 * var(--article-gap));}

.article-styles p + :is(ul, ol)                 {margin-top: calc(-0.8 * var(--article-gap));}

.article-styles  .small                         {font-size: 0.85em;}

.article-styles .box .callout                   {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--article-gap); font-size: 0.9em; padding-left: 1em; border-left: solid 0.15em var(--color1-700); box-sizing: border-box;}

.article-styles .box.color1-200 .callout        {border-color: var(--color1-500);}

.article-styles .box.color3-200 .callout        {border-color: var(--color3-500);}

.article-styles .box.color4-200 .callout        {border-color: var(--color4-500);}

  @media screen and (min-width: 769px)          {

  .article-styles .box                          {padding: 1.4em;}   

  .article-styles .w50                          {width: calc(50% - 0.5 * var(--article-gap));}

  }



.article, .article-block, .article-styles       {display: flex; width: 100%; max-width: 48rem; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap); box-sizing: border-box;}

.article-block > *:first-child                  {margin-top: 0 !important;}

.article .back                                  {display: flex; align-self: center; gap: 0.5em; font-size: 0.8em; color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}

.article .back img                              {display: block; height: 1.1em; position: relative; top: 0.2em;}

.article .back:hover                            {text-decoration-color: inherit;}



ul.leaves li:before                             {display: block; width: 1em; height: 1em; background: url("images/icons/leaves.svg") no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0.25em; content: "";}



.history                                        {display: block; width: 100%;}

.history .period                                {display: flex; width: 100%; justify-content: space-between; align-items: center; position: relative;}

.history .period > span                         {display: block; width: calc(50% - 1.8em); font-size: 1.2em; font-weight: 600; line-height: var(--line-height2); padding-top: 0.1em;}

.history .period .title                         {text-decoration: underline; text-decoration-color: transparent;  transition: .15s ease-in-out;}

.history .period .date                          {text-align: right; position: relative; top: -0.07em;}

.history .period .date span                     {display: inline-block; font-size: 0.65em; color: var(--color1-500); background: var(--color1-200); padding: 0.55em 1em 0.45em; border-radius: 1.1em;}

.history .period .point                         {display: flex; width: 2em; height: 2em; background: var(--color1-500); border-radius: 100%; position: relative; z-index: 3; transition: .15s ease-in-out;}

.history .period .point:before                  {display: flex; justify-content: center; align-items: center; font-size: 0.9em; color: white; font-weight: 600; position: absolute; inset: 0; content: "?";}

.history .period .point:hover                   {background: var(--color1-400);}

.history .period .point .text                   {display: flex; width: min(90vw, 30rem); justify-content: center; font-size: 0.8rem; position: absolute; left: calc(50% - min(15rem, 45vw)); bottom: 3em; z-index: 4; opacity: 0; transform: translateX(-9999px); transition: opacity .15s ease-in-out;}

.history .period .point .text .inner            {display: block; max-width: 100%; backdrop-filter: blur(8px); position: relative; border-radius: var(--border-radius1); padding: 1rem; overflow: hidden; box-shadow: var(--box-shadow1);}

.history .period .point .text .inner:before     {display: block; position: absolute; inset: 0; z-index: -1; background: var(--color1-150); opacity: 0.65; content: "";}

.history .period .point .text .inner p          {text-align: center;}

.history .period .point:hover .text             {opacity: 1; transform: translateX(0);}

.history .period > a                            {display: block; position: absolute; inset: 0; z-index: 2;}

.history .period:nth-child(even) .date          {order: 2; text-align: left;}

.history .period:nth-child(even) .title         {order: -1; text-align: right;}

.history .period:not(:first-child)              {padding-top: 3rem;}

.history .period:not(:first-child):before       {display: block; width: 0.1rem; height: calc(50% - 0.7rem); background: var(--color1-400); position: absolute; left: calc(50% - 0.05rem); top: 0.55rem; content: "";}

.history .period:not(:first-child):after        {display: block; width: 1.2em; height: 1em; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: calc(50% - 0.6em); top: 1rem; content: "";}

.history .period:not(:first-child):nth-child(odd):after

                                                {background-image: url("images/icons/leave-left.svg");}

.history .period:not(:first-child):nth-child(even):after

                                                {background-image: url("images/icons/leave-right.svg");}

.history .period.m                              {font-size: 0.7em;}

.history .period.m:not(:first-child):before     {height: calc(50% - 0.5rem)}

.history .period:hover .title                   {text-decoration-color: inherit;}



.contact-head > p                               {color: var(--color1-500);}

.contact-head .info                             {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1) 1.1em;}

.contact-head .info .quick-contact              {display: flex; align-items: center; gap: 0.4em; font-size: min(1.35em, calc(0.5em + 2vw)); color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; border-radius: var(--border-radius0); border: solid 0.1em var(--color1-400); padding: 0.3em 0.65em 0.2em; box-sizing: border-box; transition: .15s ease-in-out;}

.contact-head .info .quick-contact img          {display: block; height: 1.2em; position: relative; top: -0.05em;}

.contact-head .info .quick-contact:hover        {text-decoration-color: inherit;}

.contact-head .info .note                       {width: 100%; font-size: 0.8em;}

.contact-head .photos                           {display: flex; padding-inline: 0.5em; box-sizing: border-box; flex-shrink: 0;}

.contact-head .photos a                         {display: block; width: min(5em, calc(3em + 3vw)); aspect-ratio: 1; border-radius: 100%; border: solid 0.15em var(--color1-300); box-sizing: border-box; overflow: hidden; margin-inline: -0.5em;}

.contact-head .photos a img                     {display: block; width: 100%; height: 100%; object-fit: cover;}

  @media screen and (min-width: 769px)          {

  .contact-head                                 {align-items: flex-end;}

  .contact-head .info                           {width: auto; flex-grow: 2;}

  .contact-head .info h1                        {text-align: left;}  

  }



.contact-block1                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.contact-block1 > div                           {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--gap1);}

.contact-block1 > div h2                        {font-size: 1.4em; margin-bottom: 0.3em;}

.contact-block1 > div p                         {font-size: 0.9em;}

.contact-block1 > div .icon-adress              {display: flex; align-items: center; gap: 0.8em;}

.contact-block1 > div .icon-adress img          {display: block; width: 1.1em;}

.contact-block1 > div .map                      {display: block; width: 100%; height: 12rem; border-radius: var(--border-radius1); overflow: hidden;}

.contact-block1 > div .map iframe               {display: block; width: 100%; height: 100%;}

.contact-block1 > div .small                    {text-align: center; font-size: 0.75em;}

  @media screen and (min-width: 961px)          {

  .contact-block1 > div                         {width: 31%;}

  }

  @media screen and (min-width: 481px) and (max-width: 960px){

  .contact-block1 > div:nth-child(-n+2)         {width: 47%;}

  }



.contact-block2                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.contact-block2 > div                           {display: flex; width: 100%; align-items: flex-start; gap: 0.8em;}

.contact-block2 > div .photo                    {display: block; width: 3.8em; aspect-ratio: 1; border-radius: 100%; border: solid 0.15em var(--color1-300); box-sizing: border-box; overflow: hidden;}

.contact-block2 > div .photo img                {display: block; width: 100%; height: 100%; object-fit: cover;}

.contact-block2 > div .info                     {display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em;}

.contact-block2 > div .info h2                  {font-size: 1.25em;}

.contact-block2 > div .info .name               {font-size: 0.9em; font-weight: 600;}

.contact-block2 > div .info a                   {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; color: inherit; text-decoration: underline; text-decoration-color: transparent; box-sizing: border-box; transition: .15s ease-in-out;}

.contact-block2 > div .info a img               {display: block; height: 1.2em; position: relative; top: -0.05em;}

.contact-block2 > div .info a:hover             {text-decoration-color: inherit;}

  @media screen and (min-width: 961px)          {

  .contact-block2 > div                         {width: 23%;}

  }

  @media screen and (min-width: 441px) and (max-width: 960px){

  .contact-block2 > div                         {width: 47%;}

  }



.info-box1                                      {justify-content: space-between; gap: var(--gap1) var(--gap2);}

.info-box1 h2                                   {display: flex; align-items: center; gap: 0.4em; font-size: min(1.8em, calc(0.8em + 2vw)); color: var(--color1-600);}

.info-box1 h2 img                               {display: block; width: 1.8em; flex-shrink: 0;}

.info-box1 ul li                                {display: block; padding-left: 1.5em; position: relative; box-sizing: border-box;}

  @media screen and (min-width: 769px)          {

  .info-box1                                    {flex-wrap: nowrap;}

  }

  @media screen and (max-width: 768px)          {

  .info-box1 h2 img                             {order: 2;}

  }



.grid:has(.job-offer)                           {--item-outer-padding: 1.5em;}



.job-offer                                      {display: flex; width: 100%; flex-direction: column; align-items: flex-start; }

.job-offer h2                                   {font-size: 1.6em;}



.cta1                                           {justify-content: center;}

.cta1 h2                                        {text-align: center; font-size: min(1.6em, calc(0.8em + 3vw));}



.where-next                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2); padding-top: var(--section-padding); border-top: solid 1px var(--color1-500);}              

.where-next > div                               {display: flex; width: 100%; flex-wrap: wrap; gap: var(--article-gap);}

.where-next > div ul                            {padding: 0;}

  @media screen and (min-width: 769px)          {

  .where-next > *                               {width: auto !important;}

  }

  @media screen and (min-width: 541px) and (max-width: 768px){

  .where-next > div ul                          {flex-direction: row; justify-content: space-between; flex-wrap: wrap;}

  .where-next > div ul li                       {width: 50%; padding-right: 1.2em;}

  }



.example                                        {display: flex; width: 100%; flex-direction: column; align-items: flex-start;}

.example > span                                 {display: block; text-align: left; line-height: var(--line-height2);}

.example :is(.title, .subtitle)                 {font-size: 1.3em;}

.example .text                                  {font-size: 0.8em; margin-top: 0.7rem;}

.example table                                  {width: 100%; border-collapse: separate; border-spacing: 0 0.5em; margin-top: 1.2rem;}

.example table td                               {text-align: left; font-size: 0.9em; vertical-align: top;}

.example table td:last-child                    {min-width: 8em; text-align: right; padding-left: 1.2em;}

.example table td .small                        {font-size: 0.7em;}

















.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;}



 











.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%;}

  }







.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 .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);}

  }



.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;}

  }



.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;}













.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; 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;}



.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-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 .cross span             {background: white;}

  .page-prime .header .cross: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                   {--items-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));}

  }











.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;}

  }