.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; }
.PKWin_print_html, .PKWin_print_body { background: #333333 !important; background-image: none !important; color: #ffffff !important; }

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

.editor { padding:20px; }
.PKWin_frm_chyba { text-align:center!important; }

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

.enRozvrzeni {
}

.deRozvrzeni {
}
    
body {
    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; }

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

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



:root                                           {

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

                                                --font2:                "unbounded", sans-serif; /* 300, 500 */



                                                --clr-primary-50:       #f6f1ff; 

                                                --clr-primary-100:      #eee6ff; 

                                                --clr-primary-400:      #af7aff; 

                                                --clr-primary-800:      #6415C5; 

                                                --clr-primary-950:      #380372; 

                                                --clr-secondary-50:     #EEFEF7; 

                                                --clr-secondary-100:    #D5FDEC; 

                                                --clr-secondary-300:    #8AF2D2; 

                                                --clr-secondary-400:    #6DE3BE; 

                                                --clr-secondary-500:    #5CCAA7; 

                                                --clr-secondary-800:    #2B675A;

                                                --clr-secondary-950:    #0F302B;

                                                --clr-tertiary-100:     #e8edf7; 

                                                --clr-tertiary-800:     #4f4f84;

                                                --clr-tertiary-900:     #44456b;

                                                --clr-tertiary-950:     #1e1e2f;

                                                --clr-error:            #e63d62;

                                                --color1:      #6415C5;



                                                --section-padding:      min(8rem, calc(1rem + 12vw));

                                                --wrapper-padding:      max(1.2rem, 3.5vw);

                                                --wrapper-max:          74rem;

                                                --wrapper-wide-max:     90rem;



                                                --gap1:                 1rem;

                                                --gap2:                 min(2.5rem, calc(1rem + 5vw));



                                                --font1-line-basic:     1.5;       

                                                --font1-line-reduced:   1.25;       

                                                --font2-line-basic:     1.5;      

                                                --font2-line-reduced:   1.3;      

                                                

                                                --h1:                   min(3.4em, calc(1.2rem + 3vw));

                                                --h2:                   min(2.5em, calc(1rem + 3vw));

                                                --h3:                   min(1.4em, calc(0.6rem + 3vw));



                                                --border-radius1:       min(8rem, calc(3rem + 5vw));



                                                --form-items-gap:       min(1.6em, calc(0.25em + 2vw));

                                                --form-item-height:     3rem;

                                                --input-padding-inline: 1.1em;

                                                }

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

  :root                                         {

                                                --wrapper-max:          40rem;

  }

  }

  

html                                            {display: block; width: 100%; height: 100%; background: white; font-size: clamp(14px, calc(1px + 1vw), 18px); color: var(--clr-tertiary-950); font-weight: 400; line-height: var(--font1-line-basic); font-family: var(--font1);}

body                                            {display: block; width: 100%; height: 100%; margin-inline: auto; position: relative; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;}

body.fixed                                      {height: 100%; overflow: hidden;}

form                                            {display: flex; width: 100%; min-height: 100%; flex-direction: column; overflow-x: hidden;}



.wrapper                                        {display: flex; width: calc(100% - 2 * var(--wrapper-padding)); max-width: var(--wrapper-max); flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0; margin-inline: auto; position: relative; container-type: inline-size; box-sizing: border-box; z-index: 10;}

.wrapper.wide                                   {max-width: var(--wrapper-wide-max);}



button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); letter-spacing: var(--font1-spacing);  transition: .25s ease-in-out;}

input, textarea                                 {display: block; width: 100%; color: inherit; font-size: 1em; font-weight: 500; letter-spacing: var(--font1-spacing); background: transparent; border: none; outline: none; font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

input                                           {display: inline-flex; align-items: center;}



p a, li a                                       {color: var(--clr-secondary-400); text-decoration: underline; transition: 0.15s ease-in-out;}

p a:hover, li a:hover                           {color: var(--clr-secondary-300); text-decoration-color: transparent;}



.icon-circle                                    {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; border-radius: 100%;}

.icon-circle.primary-100                        {background-color: var(--clr-primary-100);}

.icon-circle img                                {display: block; width: 50%;}

.icon-circle.cover img                          {width: 100%;}



.icon-link                                      {display: flex; align-items: center; gap: 0.6em; color: var(--clr-tertiary-950); font-weight: 500; font-family: var(--font2); transition: 0.15s ease-in-out;}

.icon-link .icon-circle                         {font-size: 0.9em;}

.icon-link:hover                                {color: var(--clr-secondary-500);}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.5em; font-size: 0.9em; color: white; font-weight: 500; line-height: var(--font2-line-basic); border: none; outline: solid 0.15em transparent; padding: 1.1em 2.4em 1.15em; border-radius: 0.5em; cursor: pointer; text-decoration: none !important; box-sizing: border-box; font-family: var(--font2); transition: 0.15s ease-in-out;}

.button:hover                                   {transform: scale(0.97);}

.button .icon-circle                            {font-size: 0.85em; flex-shrink: 0;}

.button .icon-circle img                        {width: 55%;}

.button.clr-primary-100                         {background: var(--clr-primary-100); color: var(--clr-primary-400);}

.button.clr-primary-100:hover                   {background: var(--clr-primary-50);}

.button.clr-secondary-100                       {background: var(--clr-secondary-100); color: var(--clr-secondary-800);}

.button.clr-secondary-100:hover                 {background: var(--clr-secondary-50);}

.button.clr-secondary                           {background: var(--clr-secondary-400); color: var(--clr-secondary-950);}

.button.clr-secondary:hover                     {background: var(--clr-secondary-300);}

.button.clr-secondary .icon-circle              {background: var(--clr-secondary-800);}



.anim                                           {transition-delay: 1.5s; transition: .6s ease-in-out;}



.message                                        {display: block; width: 100%; font-size: 0.85em; background: var(--clr-primary-950); padding: 1em 0 0.75em; box-sizing: border-box;}

.message .wrapper > div                         {display: flex; width: 100%; align-items: center; gap: 0.65em;}

.message .wrapper > div p                       {color: white; line-height: var(--font1-line-reduced); flex-grow: 2;}

.message .close                                 {display: flex; width: 1.45em; height: 1.45em; justify-content: center; align-items: center; background: var(--clr-primary-800); border-radius: 100%; cursor: pointer; position: relative; top: -0.24em; flex-shrink: 0; transition: .2s ease-in-out;}

.message .close img                             {display: block; width: 45%;}

.message .close:hover                           {background: var(--clr-primary-400);}

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

  .message .close                               {order: 2;}

  }



.header                                         {display: block; width: 100%; position: relative; z-index: 100;}

.header > .wrapper                              {flex-direction: row; justify-content: space-between; align-items: center; padding: 1.5em 0;}

.header .logo                                   {display: block; width: 10em;}

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

.header .collapse                               {display: block; font-weight: 500; font-family: var(--font2);}

.header .collapse .inner                        {display: flex; width: 100%; gap: 2em; box-sizing: border-box;}

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

.header nav ul                                  {display: flex; justify-content: center; flex-wrap: wrap;}

.header nav ul li                               {display: block; position: relative;}

.header nav ul li a                             {display: flex; align-items: center; color: var(--clr-tertiary-950); text-decoration: none; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}

.header nav ul li a:hover                       {color: var(--clr-secondary-500);}                   

.header nav ul li a[aria-current="page"]        {color: var(--color0); font-weight: 500;}

.header .header-elements                        {display: flex; gap: 0.8em; align-items: center; flex-wrap: wrap;}

.header .header-elements .icon-circle           {background: var(--clr-primary-100);}

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

  .header .collapse                             {flex-grow: 2; font-size: 0.95em;}

  .header .collapse .inner                      {justify-content: space-between; align-items: center; gap: 3cqw;}

  .header nav                                   {flex-grow: 2;}

  .header nav ul:first-child                    {flex-grow: 2;}

  .header :is(nav ul, .header-elements)         {gap: 2.8cqw;}

  .header :is(#navicon, .collapse .close)       {display: none;}                 

  }

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

  .header .collapse                             {width: 20rem; height: calc(100svh - 2rem); background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); overflow-y: auto; position: fixed; opacity: 0; right: -100rem; top: 1rem; z-index: 5; border: solid 0.1em rgba(255,255,255,0.85); border-radius: 1em; filter: blur(8px); transform: scale(1.08); box-shadow: 0 0 1.5em rgba(0,0,0,0.35); box-sizing: border-box; transition: opacity 0.7s ease-in-out, filter 0.7s ease-in-out, transform 0.7s ease-in-out, right 0s ease-in-out 0.7s;}                                              

  .header .collapse .close                      {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; position: absolute; right: 0.5em; top: 0.5em;}

  .header .collapse .close img                  {display: block; width: 80%;}

  .header .collapse .inner                      {min-height: 100%; flex-direction: column; align-content: flex-start; gap: 2em; padding: 2.8rem;}

  .header nav                                   {margin-top: -0.5em;}

  .header nav ul                                {width: 100%; flex-direction: column;}

  .header nav ul li                             {width: 100%;}

  .header nav ul li a                           {width: 100%; text-align: left; font-size: 1.1em; padding: 0.6em 0;}              

  .header nav ul:nth-child(2)                   {font-size: 0.8em; margin-top: 1.5em;}              

  .header .header-elements                      {align-items: flex-end; align-content: flex-end; flex-grow: 2; font-size: 0.85em;}

  .header .header-elements .button              {width: 100%; font-size: 1.1em; margin-bottom: 0.5em;}

  .header .header-elements .icon-link           {font-size: 0.85em;}

  .header .navicon                              {display: block; width: 2.4em; height: 1.8em; cursor: pointer; position: relative; z-index: 1;}

  .header .navicon span                         {display: block; width: 70%; height: 0.14em; background: var(--clr-primary-400); border-radius: 0.02em; position: absolute; transition: .25s ease-in-out;}

  .header .navicon span:nth-child(1)            {top: 0.35em;}

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

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

  .header .navicon span:nth-child(4)            {bottom: 0.35em;}

  .header .navicon:hover span                   {background: var(--clr-secondary-800);}

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

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

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

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

  .header.show .collapse                        {right: 1rem; opacity: 1; filter: blur(0); transform: scale(1); transition: opacity 0.7s ease-in-out, filter 0.7s ease-in-out, transform 0.7s ease-in-out, right 0s ease-in-out 0s;}

  }



.footer                                         {display: block; width: 100%; padding-block: var(--section-padding); position: relative; font-weight: 300; font-family: var(--font2);}

.footer *                                       {color: white;}

.footer .bg                                     {display: block; position: absolute; inset: 0; background: var(--clr-tertiary-950); border-top-left-radius: var(--border-radius1);}

.footer .wrapper                                {flex-direction: row; justify-content: space-between; align-items: stretch; gap: var(--gap2) 0;}

.footer .wrapper > div                          {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}

.footer-about                                   {gap: 1.2em; order: 0;}

.footer-about .logo                             {display: block; width: 10em;}

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

.footer-about p                                 {font-size: 0.8em;}

.footer-info                                    {gap: 1.2em; flex-shrink: 0;}

.footer-info > div                              {display: block;}

.footer-info span                               {display: block; font-size: 0.8em;}

.footer-info .title                             {font-size: 1em; color: var(--clr-primary-400); font-weight: 500; margin-bottom: 0.25em;}

.footer-contacts                                {gap: 0.5em; flex-shrink: 0;}

.footer-contacts .icon-link                     {font-size: 0.9em;}

.footer-contacts .icon-link .icon-circle        {background: var(--clr-tertiary-800);}

.footer-contacts .button                        {font-size: 0.7em; padding: 0.8em 1.5em 0.9em; margin-top: 0.8em;}

.footer-links                                   {gap: 0.8em; flex-shrink: 0;}

.footer-links > a                               {font-size: 0.8em;  transition: 0.15s ease-in-out;}

.footer-links > a:hover                         {color: var(--clr-secondary-300);}

.footer-links .copyright                        {display: flex; align-self: flex-end; justify-content: flex-end; align-items: flex-end; align-content: flex-end; flex-grow: 2; gap: 0.35em; margin-top: 1em;}

.footer-links .copyright span                   {display: block; font-size: 0.7em; position: relative; bottom: -0.25em;}

.footer-links .copyright a                      {display: block; width: 6em;}

.footer-links .copyright a img                  {display: block; width: 100%;}

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

  .footer .wrapper                              {flex-wrap: nowrap; gap: 7%;}

  }

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

  .footer                                       {padding-bottom: var(--wrapper-padding);}

  .footer-contacts                              {order: 1; font-size: 1.1em;}

  .footer-info                                  {order: 2; width: 100%; flex-direction: row !important; column-gap: 10%; background: rgba(255,255,255,0.1); padding: 2em; border-radius: 1em;}

  .footer-links                                 {width: 100%; flex-direction: row !important; justify-content: space-between; column-gap: 0; order: 3;}

  .footer-links > a                             {width: 46%;}

  .footer-links .copyright                      {width: 100%; justify-content: flex-start; margin-top: var(--gap2);}  

  }

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

  .footer-about,

  .footer-contacts                              {width: 46%;}

  }

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

  .footer-links > a                             {width: 100%;}

  }



.main                                           {display: flex; width: 100%; flex-direction: column; align-items: center; flex-grow: 3;}



.section                                        {display: block; width: 100%; position: relative; z-index: 1; padding-top: var(--section-padding); isolation: isolate;}

.section.padding-top-0                          {padding-top: 0;}

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

.section:first-child                            {padding-top: calc(0.5 * var(--section-padding));}

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



.section.clr-tertiary-800 + .section,

.section:has(+ .section.clr-tertiary-800),

.section.clr-tertiary-800                       {background: var(--clr-tertiary-800);}

.section:has(+ .section.clr-tertiary-800),

.section.clr-tertiary-800                       {padding-bottom: var(--section-padding);}

.section:has(+ .section.clr-tertiary-800):before,

.section.clr-tertiary-800 + .section:before     {display: block; position: absolute; inset: 0; background: white; content: "";}

.section:has(+ .section.clr-tertiary-800):before{border-bottom-right-radius: var(--border-radius1);}

.section.clr-tertiary-800 + .section:before     {border-top-left-radius: var(--border-radius1);}



.section.clr-tertiary-800 :is(h2, h3, p, li)    {color: white}



em                                              {font-style: italic;}

strong                                          {font-weight: 600;}



.txt-clr-primary-400                            {color: var(--clr-primary-400);}

.large                                          {font-size: 1.25em; font-weight: 500; line-height: var(--font2-line-basic); font-family: var(--font2);}

.small                                          {font-size: 0.85em;}



p img                                           {display: inline-block; height: 1.05em; margin: 0.1em 0.05em -0.1em;}



.no-break                                       {display: inline-block;}



h1, h2, h3                                      {display: block; width: 100%; font-weight: 500; box-sizing: border-box; font-family: var(--font2); line-height: var(--font2-line-reduced);}

h1                                              {font-size: var(--h1);}

h2                                              {font-size: var(--h2);}

h3                                              {font-size: var(--h3);}



h2 + .large                                     {margin-top: calc(-0.5 * var(--container-gap));}



h1 strong, h2 strong                            {display: inline-block; font-size: 0.75em; color: white; background: var(--clr-primary-400); padding: 0.2em 0.4em 0.3em; border-radius: 0.3em; box-sizing: border-box; position: relative; top: -0.09em; margin-top: 0.5em;}           

h1 strong.anim, h2 strong.anim                  {transform: rotateX(90deg) scale(1.2);}           

h1 strong.anim.play, h2 strong.anim.play        {transform: rotateX(0deg) scale(1);}           



.icon-bullets                                   {display: flex; flex-direction: column; align-items: flex-start; gap: 0.4em;}

.icon-bullets li                                {display: block; padding-left: 1.65em; box-sizing: border-box; position: relative;}

.icon-bullets li:before                         {display: block; width: 1.25em; height: 1.25em; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: 0; top: -0.04em; content: "";}



.icon-bullets.check-round-secondary-400  li:before

                                                {background-image: url("images/icons/check-round-secondary-400.svg");}



.area-info                                      {display: flex; align-items: center; gap: 0.75em; font-size: 0.85em; background: var(--clr-secondary-100); padding: 1.25em 1.4em 1.15em; border-radius: 0.8em; box-sizing: border-box; font-weight: 300; line-height: var(--font2-line-height); font-family: var(--font2);}

.area-info img                                  {display: block; height: 1.5em; width: auto; position: relative; top: -0.1em; flex-shrink: 0;}



.shape-upper                                    {

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

                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpath d='M1000,2000V70.01c-.11-38.62-31.39-69.9-70.01-70.01H258.73c-38.62.11-69.9,31.39-70.01,70.01v48.83c-.11,38.62-31.39,69.9-70.01,70.01h-48.83C31.26,188.96-.01,220.24-.13,258.85v1741.15h1000.13Z'/%3E%3C/svg%3E%0A");                                           

                                                 -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpath d='M1000,2000V70.01c-.11-38.62-31.39-69.9-70.01-70.01H258.73c-38.62.11-69.9,31.39-70.01,70.01v48.83c-.11,38.62-31.39,69.9-70.01,70.01h-48.83C31.26,188.96-.01,220.24-.13,258.85v1741.15h1000.13Z'/%3E%3C/svg%3E%0A");

                                                }

.shape-upper.small                              {

                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 3000' style='enable-background:new 0 0 1000 3000;' xml:space='preserve'%3E%3Cpath d='M1000,3000V23.72c-.04-13.09-10.64-23.68-23.72-23.72H87.58c-13.09.04-23.68,10.64-23.72,23.72v16.55c-.04,13.09-10.64,23.68-23.72,23.72h-16.55c-13.09.04-23.68,10.64-23.72,23.72v2912.29h1000.13Z'/%3E%3C/svg%3E%0A");                                           

                                                 -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 3000' style='enable-background:new 0 0 1000 3000;' xml:space='preserve'%3E%3Cpath d='M1000,3000V23.72c-.04-13.09-10.64-23.68-23.72-23.72H87.58c-13.09.04-23.68,10.64-23.72,23.72v16.55c-.04,13.09-10.64,23.68-23.72,23.72h-16.55c-13.09.04-23.68,10.64-23.72,23.72v2912.29h1000.13Z'/%3E%3C/svg%3E%0A");

                                                }

.shape-bottom                                   {

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

                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpath d='M-.13,0v1929.99c.11,38.62,31.39,69.9,70.01,70.01h671.26c38.62-.11,69.9-31.39,70.01-70.01v-48.83c.11-38.62,31.39-69.9,70.01-70.01h48.83c38.62-.11,69.9-31.39,70.01-70.01V0H-.13Z'/%3E%3C/svg%3E%0A");                                           

                                                 -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 2000' style='enable-background:new 0 0 1000 2000;' xml:space='preserve'%3E%3Cpath d='M-.13,0v1929.99c.11,38.62,31.39,69.9,70.01,70.01h671.26c38.62-.11,69.9-31.39,70.01-70.01v-48.83c.11-38.62,31.39-69.9,70.01-70.01h48.83c38.62-.11,69.9-31.39,70.01-70.01V0H-.13Z'/%3E%3C/svg%3E%0A");

                                                }

.shape-bottom.small                             {

                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 3000' style='enable-background:new 0 0 1000 3000;' xml:space='preserve'%3E%3Cpath d='M-.13,0v2976.28c.04,13.09,10.64,23.68,23.72,23.72h888.7c13.09-.04,23.68-10.64,23.72-23.72v-16.55c.04-13.09,10.64-23.68,23.72-23.72h16.55c13.09-.04,23.68-10.64,23.72-23.72V0H-.13Z'/%3E%3C/svg%3E%0A");                                           

                                                 -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 3000' style='enable-background:new 0 0 1000 3000;' xml:space='preserve'%3E%3Cpath d='M-.13,0v2976.28c.04,13.09,10.64,23.68,23.72,23.72h888.7c13.09-.04,23.68-10.64,23.72-23.72v-16.55c.04-13.09,10.64-23.68,23.72-23.72h16.55c13.09-.04,23.68-10.64,23.72-23.72V0H-.13Z'/%3E%3C/svg%3E%0A");

                                                }



.container                                      {display: flex; width: 100%; max-width: 50rem; flex-direction: column; align-items: flex-start; gap: var(--container-gap); --container-gap: calc(1.5 * var(--gap1)); box-sizing: border-box;}

.container.centered                             {align-items: center;}

.container.centered > *                         {text-align: center;}

.container > .icon-circle                       {width: 3em; height: 3em; margin-bottom: calc(-0.75 * var(--container-gap));}

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

  .container                                    {align-items: center;}

  .container > *                                {text-align: center;}

  }



.section:has(.page-head)                        {padding-top: 0;}



.page-head                                      {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) 0; background: var(--clr-primary-100); padding: min(3em, calc(1em + 5vw)); box-sizing: border-box; border-radius: 1em 1em 5em 5em; overflow: hidden; position: relative;}

.page-head .container                           {max-width: 42em; align-items: center;}

.page-head .container *                         {text-align: center;}

.page-head .container h1                        {font-size: var(--h2); text-wrap: pretty;}

.page-head .img                                 {display: none;}

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

  .page-head                                    {justify-content: space-between; padding-inline: var(--page-head-padding); border-bottom-right-radius: 1em; --page-head-padding: max(3em, calc((100% - var(--wrapper-max)) / 2))}

  .page-head .container                         {align-items: flex-start;}

  .page-head .container *                       {text-align: left;}

  .page-head .img                               {display: block; width: auto; height: 100%; aspect-ratio: 16/9; position: absolute; right: 0; top: 0;

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

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black);

                                                }

  }



.img                                            {display: block; width: 100%; box-sizing: border-box; position: relative;}

.img-inner                                      {display: block; position: absolute; inset: 0; overflow: hidden; transition-delay: 0.25s;}

.img-inner img                                  {display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 auto;}



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

.image .bg                                      {display: block; position: absolute; inset: 0;}

.image .bg div                                  {display: block; width: 100%; height: 100%; background-color: var(--clr-primary-100); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, background-color 1.5s ease-in-out;}

.image .label                                   {display: flex; flex-direction: column; align-items: center; gap: 0.1em; text-align: center; font-size: min(0.75em, 2.2cqw); font-weight: 500; line-height: var(--font2-line-basic); padding: 1.1em 2.2em; border-radius: 0.6em; box-sizing: border-box; position: absolute; box-shadow: 0 0 0.8em rgba(0,0,0,0.3); font-family: var(--font2); transition-delay: 0.5s;}

.image .label.clr-primary-400                   {background: var(--clr-primary-400); color: white;}   

.image .label.clr-primary-800                   {background: var(--clr-primary-800); color: white;}   

.image .label.clr-secondary-800                 {background: var(--clr-secondary-800); color: var(--clr-secondary-100);}   

.image .label.id                                {background: var(--clr-primary-50); font-size: 0.7em; color: var(--clr-primary-400); font-weight: 300;}

.image .label.id strong                         {display: block; font-size: 1.2em; color: var(--clr-primary-800); font-weight: 500;}

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

  .image .label.id strong                       {font-size: 0.85em;}

  .image .label.id span                         {display: none;}

  }



.image.isolate .img-inner                       {top: -8%;}

.image.isolate .img-inner img                   {display: block; width: 90%; height: auto; object-fit: unset;}





.image .anim                                    {opacity: 0; transform: scale(0.9);}

.image .anim.play                               {opacity: 1; transform: scale(1);}

.image .bg .anim                                {background: var(--clr-primary-400);}

.image .bg .anim.play                           {background: var(--clr-primary-100);}



.c2                                             {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--gap2) 0;}

.c2 > *                                         {container-type: inline-size;}

.c2 .image .img                                 {padding-top: 75%;}

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

  .c2                                           {flex-direction: row; justify-content: space-between; align-items: center;}

  .c2 .container                                {width: 42%; align-items: flex-start;}

  .c2 .container *                              {text-align: left;}

  .c2 > div:not(.container)                     {width: 50%;}

  .c2 .image.squared .img                       {padding-top: 100%;}

  .c2.reversed .container                       {order: 2;}

  }

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

  .c2 .image                                    {width: min(100%, 30rem); order: -1;}

  }



.hero p                                         {font-size: 1.1em;}

.hero p img                                     {border-radius: 100%; outline: solid 0.1em var(--clr-primary-100);}

.hero .image .label:nth-of-type(1)              {left: 17%; top: 29%;}

.hero .image .label:nth-of-type(2)              {left: calc(-0.6 * var(--wrapper-padding)); bottom: 15%;}

.hero .image .label:nth-of-type(3)              {right: calc(-0.6 * var(--wrapper-padding)); bottom: 30%;}



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

.features .grid,

.features .grid > div                           {display: flex; width: 100%; gap: 0.9rem; flex-wrap: wrap; perspective: 1000px;}

.features .grid > div > div                     {width: 100%; min-height: 18em;}

.features .grid > div .content                  {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1em; font-size: 0.85em; background: var(--clr-tertiary-900); padding: min(3em, calc(1em + 8vw)); box-sizing: border-box; border-radius: 1.4rem;}

.features .grid > div .content > img            {display: block; height: 2em;}

.features .grid > div .img-inner                {border-radius: 1.4rem;}

.features .bottom                               {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--gap2); flex-wrap: wrap;}

.features .grid > div .anim                     {transform-style: preserve-3d; backface-visibility: hidden; transition: transform 2s cubic-bezier(0.15, 1, 0.33, 1);}

.features .grid > div .content.anim             {transform: rotateY(91deg);}

.features .grid > div .img.anim                 {transform: rotateY(-89deg);}

.features .grid > div .anim.play                {transform: rotateY(0deg);}

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

  .features .grid > div                         {width: calc(33.33% - 0.6rem);}

  .features .bottom                             {max-width: 48em; align-items: center; text-align: center;}

  }

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

  .features .grid > div                         {flex-direction: row;}

  .features .grid > div > div                   {width: calc(50% - 0.45rem);}

  }

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

  .features .grid > div:nth-child(even) .img    {order: -1;}

  }

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

  .features .grid > div .img                    {order: -1;}

  }



.services-list                                  {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1.6em;}

.services-list div                              {display: block; padding-left: 4em; position: relative; box-sizing: border-box;}

.services-list div:before                       {display: block; width: 3em; height: 3em; background: url("images/icons/pictogram-primary-400.svg") no-repeat center center; background-size: contain; position: absolute; top: 0; left: 0; content: "";}

.services-list div h3                           {margin-block: -0.12em 0.5em;}

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

  .c2:has(.services-list) .container            {display: contents;}

  .c2:has(.services-list) .container p          {order: 2;}

  .c2:has(.services-list) .container .button    {order: 3;}

  }



.comparison                                     {display: flex; width: 100%; justify-content: space-between; gap: 1.2em 0; flex-wrap: wrap; }  

.comparison > div                               {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 1.2em; padding: min(4em, calc(1em + 5vw)); box-sizing: border-box; position: relative; z-index: 2;}

.comparison > div .bg                           {display: block; position: absolute; inset: 0; z-index: -1; border-radius: 1.2em; transform: rotateX(180deg);} 

.comparison > div:nth-child(1) .bg              {background: var(--clr-tertiary-100);}

.comparison > div:nth-child(2) .bg              {background: var(--clr-secondary-100);}

.comparison > div:nth-child(1) ul li:before     {background-image: url("images/icons/cross-round-tertiary-800.svg");}

.comparison > div:nth-child(2) ul li:before     {background-image: url("images/icons/check-round-secondary-800.svg");}

.comparison > div.anim                          {transform-style: preserve-3d; backface-visibility: hidden; transition: transform 2s cubic-bezier(0.15, 1, 0.33, 1);}

.comparison > div:nth-child(1).anim             {transform: rotateX(91deg);}

.comparison > div:nth-child(2).anim             {transform: rotateX(-91deg);}

.comparison > div.anim.play                     {transform: rotateX(0deg);}

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

  .comparison > div                             {width: 48.8%;}

  .comparison > div .bg                         {transform: rotateY(180deg);} 

  }



.cta-team .image .label:nth-of-type(1)          {left: calc(-0.6 * var(--wrapper-padding)); bottom: 48%;}

.cta-team .image .label:nth-of-type(2)          {left: 31%; bottom: 11%;}

.cta-team .image .label:nth-of-type(3)          {right: calc(-0.6 * var(--wrapper-padding)); bottom: 38%;}



.section:has(+ .section .logos)                 {padding-bottom: var(--section-padding)}

.section:has(+ .section .logos):before          {display: block; width: 100%; height: 20rem; background-image: linear-gradient(to top, var(--clr-primary-50), transparent); border-bottom-right-radius: var(--border-radius1); position: absolute; left: 0; bottom: 0; content: "";}



.logos                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 2em 3.5em; font-size: min(1em, calc(0.4em + 1vw))}

.logos a                                        {display: block; height: 5em;}

.logos a img                                    {display: block; height: 100%;}

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

  .logos                                        {justify-content: center;}

  }



.other-services                                 {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2); position: relative; z-index: 2; padding: min(5em, calc(1em + 5vw)); box-sizing: border-box;}

.other-services .bg                             {display: block; position: absolute; inset: 0; z-index: -1;}

.other-services .bg div                         {display: block; width: 100%; height: 100%; background: var(--clr-primary-100);}

.other-services h2                              {text-align: center; font-size: calc(0.8 * var(--h2));}

.other-services .content                        {display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0; font-size: 0.85em;}

.other-services .content > div                  {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.8em;}

.other-services .content > div > img            {display: block; height: 2.6em;}

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

  .other-services .content > div                {width: 30%;}

  }



.about                                          {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap2) 0;}

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

.about > div:nth-child(1) p:nth-child(1)        {font-size: 1.5em; font-weight: 300; line-height: var(--font2-line-basic); font-family: var(--font2);}

.about .button                                  {margin-top: -0.45em;}

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

  .about > div                                  {width: 47%;}

  }



.team                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 2em 1em;}

.team > div                                     {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1em; background: var(--clr-primary-100); padding: 2em; margin-top: 2em; box-sizing: border-box; border-radius: 1.2em;}

.team > div *                                   {text-align: center;}

.team > div .photo                              {display: block; width: min(8em, 80%); aspect-ratio: 1; background: var(--clr-tertiary-800); border-radius: 100%; overflow: hidden; margin-top: -4em;}

.team > div .photo img                          {display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;}

.team > div .id                                 {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.3em;}

.team > div h3                                  {font-size: calc(0.85 * var(--h3));}

.team > div h3 br                               {display: none;}

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

.team > div .role                               {color: var(--clr-primary-400); font-weight: 300; line-height: var(--font2-line-basic); font-family: var(--font2);}

.team > div .button                             {width: 100%; font-size: 0.9em; padding: 0.5em 1em;}

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

  .team > div                                   {width: calc(25% - 0.75em);}

  }

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

  .team > div                                   {width: calc(50% - 0.5em);}

  }

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

  .team > div .id                               {min-height: 6em;}

  .team > div h3 br                             {display: block;}

  }



.quick-contacts                                 {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 0.7em 1.6em;}

.quick-contacts a                               {font-size: 1.15em;}

.quick-contacts .icon-circle                    {background: var(--clr-secondary-400);}

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

  .quick-contacts                               {width: auto; height: 100%; flex-direction: column; position: absolute; right: 0; top: 0; padding-right: var(--page-head-padding);}

  .quick-contacts a                             {font-size: 1.25em;}

  }



.contacts                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0; font-weight: 300; line-height: var(--font2-line-height); font-family: var(--font2);}

.contacts > div                                 {display: flex; width: 100%;}

.contacts h2                                    {font-size: 1.2em; color: var(--clr-primary-400);}

.contacts .area-info                            {flex-wrap: wrap; padding: 1.8em;}

.contacts .area-info h2                         {display: flex; align-items: center; gap: 0.65em; font-size: 1.1em; color: var(--clr-tertiary-950);}

.contacts .area-info h2 img                     {top: -0.05em;}

.contacts .area-info span                       {font-size: 0.9em;}

.contacts .note                                 {display: block; font-size: 0.7em;}

.contacts .note h2                              {margin-bottom: 0.2em;}

.contacts .button                               {font-size: 0.8em; padding: 0.7em 1.3em;}

.contacts > div > div                           {display: flex; flex-direction: column; align-items: flex-start; gap: 0.8em;}

.contacts > div > div:not(:nth-child(2))        {flex-shrink: 0;}

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

  .contacts > div                               {width: 47%; gap: 10%;}

  }

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

  .contacts > div                               {gap: 6%;}

  .contacts > div > div                         {width: 47%;}

  }

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

  .contacts > div                               {flex-wrap: wrap; gap: var(--gap2);}

  }



.c2:has(.form)                                  {align-items: flex-start;}

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

  .c2:has(.form) > div                          {width: 47%;}

  }

  

.form                                           {display: flex; width: 100%; flex-wrap: wrap;; gap: var(--gap1);}

.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-items-gap);}

.form .consent                                  {display: block; width: 100%; font-size: 0.8em;}

.form .consent a                                {color: inherit; text-decoration: underline; transition: 0.15s ease-in-out;}

.form .consent a:hover                          {color: var(--clr-secondary-500); text-decoration-color: transparent;}

.form .button                                   {width: 100%;}



.form-item                                      {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em; box-sizing: border-box; position: relative; transition: .35s ease-in-out;}

.form-item > label                              {display: flex; width: 100%; min-height: 1em; text-align: left; font-size: 1em; color: var(--clr-tertiary-950); font-weight: 500; line-height: var(--font2-line-basic); position: relative; order: -1; font-family: var(--font2);}

.form-item-element                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}

.form-item :is(input, textarea, .custom-select-wrapper)  

                                                {display: block; width: 100%; height: 3.3em; color: var(--clr-tertiary-950); font-size: 1em; font-weight: 400; background: var(--clr-primary-50); padding: 0.65em 0.8em 0.45em; border: none; outline: solid 0.1em transparent; border-radius: 0.6em; font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

.form-item textarea                             {height: 12em !important; padding-block: 1.1em 0.95em;}

.form-item :is(input, textarea):focus           {background: transparent; outline-color: var(--clr-primary-400);}

.form-item.obligatory > label:after             {display: inline-block; color: var(--clr-primary-400); margin-left: 0.2em; content: "*";}

.form-item-note                                 {display: block; width: 100%; text-align: left; font-size: 0.8em; font-weight: 400; padding-inline: 0.9em; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1;}

.form-item-note a                               {color: var(--clr-primary-800); text-decoration: underline; cursor: pointer; transition: 0.15s ease-in-out;}

.form-item-note a:hover                         {color: var(--clr-primary-950); text-decoration-color: transparent;}

.form-item-note.error                           {color: var(--clr-error); font-weight: 600; padding-block: 0.6em 0.25em;}

.form-item-note.error:before                    {display: block; position: absolute; inset: 0; background: var(--clr-error); opacity: 0.12; border-radius: 0.5em; content: "";}

.form-item:has(.error) .form-item-element > *   {outline-color: var(--clr-error);}

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

  .form-item textarea                           {height: 18em;}

  }



.form-item .checkboxes                          {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.3em; margin-top: 0.2em;}

.form-item .checkboxes .checkbox                {display: block; width: 100%;}



.chk1                                           {position: absolute; left: -9999px; top: 0;}

.chk1:not(:checked) + label,   

.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; color: inherit; font-weight: 300; padding-inline-start: 1.5em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}

.chk1:not(:checked) + label:before,

.chk1:checked + label:before                    {display: block; width: 1em; height: 1em; background-color: var(--clr-primary-100); border-radius: 0.15em; position: absolute; left: 0; top: 0.1em; overflow: hidden; content: "";}

.chk1:checked + label:before                    {background: URL('images/icons/check-secondary-800.svg') no-repeat center center, var(--clr-secondary-400); background-size: 50% auto;}

.chk1:disabled + label,                  

.chk1:disabled + label:before                   {opacity: 0.4;}

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

.chk1 + label a:hover                           {color: var(--color2); text-decoration-color: transparent;}



.custom-select-wrapper select                   {position: absolute !important; left: -9999px;}

.custom-select-wrapper .custom-select           {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;}

.custom-select:before                           {display: flex; width: 0.75em; height: 100%; position: absolute; right: 0.45em; top: -0.1em; background: url("images/icons/chevron-down-primary-400.svg") no-repeat center center; background-size: contain; content: " "; transition: .2s ease-in-out;}

.custom-select:has(.custom-select-trigger.show):before

                                                {transform: rotateX(180deg);}

.custom-select-trigger                          {display: flex; width: 100%; height: 100%; align-items: center; text-align: left; position: absolute; inset: 0; white-space: nowrap; padding: 0.15em 2em 0 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; transition: .15s ease-in-out;}

.custom-select-trigger:hover                    {color: ;}

.custom-select-trigger.chosen                   {font-weight: 500;}

.custom-options                                 {display: none; width: calc(100% + 1.6em); max-height: 15em; background: var(--clr-primary-50); position: absolute; z-index: 1; left: -0.8em; top: calc(100% + 0.7em); border-radius: 0.5em; box-shadow: 0 0.5em 0.5em rgba(0,0,0,0.12); 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; font-size: 0.9em; color: inherit; font-weight: 400; padding: 0.75em 0.85em 0.6em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}

.custom-option:hover                            {color: var(--clr-primary-400); background: var(--clr-primary-100);}

.custom-option.selected                         {color: white; font-weight: 600; background: var(--clr-primary-400);}



.toggle-select                                  {display: inline-flex; max-width: 100%; height: 2.2em; font-size: clamp(13px, calc(0.3em + 2vw), 1em); position: relative; align-items: stretch; background: var(--clr-primary-100); border-radius: 0.5em; margin-top: 0.3em; user-select: none; isolation: isolate; --sel-x: 0px; --sel-w: 0px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;}

.toggle-select::-webkit-scrollbar               {display: none;}

.toggle-select.can-scroll-left,

.toggle-select.can-scroll-right                 {-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);}

.toggle-select.can-scroll-left                  {--fade-l: 1.4em;}

.toggle-select.can-scroll-right                 {--fade-r: 1.4em;}

.toggle-select::before                          {width: var(--sel-w); background: var(--clr-primary-400); position: absolute; inset: 0; z-index: 0; content: ""; transform: translateX(var(--sel-x)); border-radius: 0.5em; pointer-events: none; transition: transform .35s cubic-bezier(.5, 0, .2, 1), width .35s cubic-bezier(.5, 0, .2, 1);}

.toggle-select:not(.is-ready)::before           {opacity: 0;}

.toggle-select > a                              {display: inline-flex; min-width: 3em; justify-content: center; align-items: center; color: var(--clr-primary-800); font-weight: 400; padding: 0.2em 1em 0; white-space: nowrap; position: relative; z-index: 1; cursor: pointer; transition: color .2s ease;}

.toggle-select > a:hover                        {color: var(--clr-primary-400);}

.toggle-select > a.sel                          {color: white;}

.toggle-select > a:focus-visible                {outline: 2px solid var(--fg-1); outline-offset: 2px;}

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

  .toggle-select                                {height: 2.8em;}

  .toggle-select > a                            {min-width: 3.6em;}

  }



.login                                          {display: flex; width: 100%;flex-direction: column;}

.login .button                                  {margin-top: 1.4em;}

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

  .login                                        {max-width: 26em; }

  }



.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(1rem, 4%); box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 1000000;}

.wndw:before                                    {display: block; width: 100%; height: 100%; background: var(--clr-primary-400); 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 - 6rem); background: white; position: relative; border-radius: 1em; top: 0; z-index: 2; box-shadow: 0 0 0.6em rgba(0,0,0,0.12); transform: scale(0.8); transition: .25s 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: 0.2;}

.wndw.show > div                                {transform: scale(1);}

.wndw.show.hide                                 {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;}

.wndw.show.hide:before                          {opacity: 0;}

.wndw.show.hide > div                           {transform: scale(0.8) !important; opacity: 0;}

.wndw .cross                                    {display: block; width: 1.5em; height: 1.5em; font-size: 1em; background: var(--clr-primary-400); border-radius: 100%; cursor: pointer; position: absolute; right: -0.4em; top: -0.4em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;}

.wndw .cross span                               {display: block; width: 50%; height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.05em); z-index: 1;}

.wndw .cross:hover                              {background: var(--clr-primary-800);}

.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}

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

.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(3rem, 8%) min(5rem, 10vw); box-sizing: border-box;}

.wndw .wndw-content .icon                       {display: block; width: 2.5em; margin-bottom: -0.35em;}

.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.6em; color: var(--color0); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;}

.wndw .wndw-content .title span                 {display: block; font-weight: 500;}

.wndw .wndw-content p                           {display: block; width: 100%; text-align: center; font-size: 0.9em;}

.wndw .wndw-content p strong                    {font-weight: 700;}

.wndw .wndw-content .title:has(+ p),

.wndw .wndw-content .title2:has(+ p)            {margin-bottom: -0.35em;}

.wndw .wndw-content .flex                       {gap: 0.3em; }

.wndw .wndw-content .flex .button               {min-width: 8em; font-size: 0.9em;}  

.wndw .wndw-content .link                       {font-size: 0.9em; color: var(--black-50); font-weight: 300; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}

.wndw .wndw-content .link:hover                 {color: var(--color0); text-decoration-color: transparent;}











.client-area                                              {

                                                          --client-area-padding-s:  1.2rem;

                                                          --client-area-padding-m:  calc(2 * var(--client-area-padding-s));

                                                          --aside-width:            20rem;

                                                          --nav-item-padding:       1.1rem;

                                                          --header-height:          calc(3rem + 2 * var(--client-area-padding-s));

}

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

  .client-area                                            {

                                                          --main-max-width-s:       28rem;         

                                                          --main-max-width-m:       40rem;         

  }

  }

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

  .client-area                                            {

                                                          --client-area-padding-s:  0.8rem;

  }

  }



.client-area                                              {display: flex; width: 100%; max-height: 100svh; flex-direction: column; flex-grow: 2; overflow: hidden;}  

.client-area .message .wrapper                            {max-width: 100%; width: 100%; padding-inline: 0.9em;}

.client-area-container                                    {display: flex; width: 100%; flex-direction: column; flex-grow: 2; position: relative; box-sizing: border-box; overflow: hidden;}

.client-area-aside                                        {display: flex; width: var(--aside-width); height: 100%; position: absolute; left: 0; top: 0; z-index: 5; transition: 0.3s ease-in-out;}  

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

  .client-area-container                                  {padding-left: var(--aside-width);}

  }

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

  .client-area-aside                                      {left: calc(-1 * var(--aside-width));}

  .client-area-aside.show                                 {left: 0;}

  }

 

.client-area :is(.upper, nav, .bottom, .client-area-header, .client-area-main)

                                                          {padding-block: var(--client-area-padding-s); box-sizing: border-box;}

.client-area :is(.upper, nav, .bottom)                    {padding-inline: var(--client-area-padding-s);}

.client-area :is(.client-area-header, .client-area-main)  {padding-inline: var(--client-area-padding-m);}



.client-area-aside                                        {background: var(--clr-primary-50); overflow-x: hidden; overflow-y: auto; padding-bottom: var(--client-area-padding-s); box-sizing: border-box;}

.client-area-aside .inner                                 {display: flex; width: 100%; flex-direction: column; gap: 1em;}  

.client-area-aside .upper                                 {display: flex; width: 100%; height: var(--header-height); justify-content: space-between; align-items: center; gap: 1.2em;}

.client-area-aside .logo                                  {display: block; flex-grow: 2; height: 100%;}

.client-area-aside .logo img                              {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; padding-block: 0.2em; box-sizing: border-box;}

.client-area-aside .close                                 {display: block; width: 1.8em; height: 1.8em; flex-shrink: 0;}

.client-area-aside .close img                             {display: block; width: 100%; height: 100%;}

.client-area-aside nav                                    {display: flex; width: 100%; flex-direction: column; gap: 0.16em;}

.client-area-aside nav a                                  {display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; color: var(--clr-tertiary-950); font-weight: 300; padding: 0.85em var(--nav-item-padding); border-radius: 0.5em; position: relative; box-sizing: border-box; overflow: hidden; font-family: var(--font2); transition: 0.15s ease-in-out;}

.client-area-aside nav a img                              {display: block; height: 1.2em;}

.client-area-aside nav a:hover                            {color: var(--clr-primary-400); background: var(--clr-primary-100);}

.client-area-aside nav a[aria-current="page"]             {color: var(--clr-tertiary-950); font-weight: 500; background: var(--clr-primary-100);}

.client-area-aside nav a[aria-current="page"]::before     {display: block; width: 0.2em; height: 100%; position: absolute; left: 0; top: 0; background: var(--clr-primary-400); border-radius: 0.1em; content: "";}

.client-area-aside .bottom                                {display: flex; width: 100%; flex-direction: column; justify-content: flex-end; flex-grow: 2; padding: 0 var(--nav-item-padding);}

.client-area-aside .bottom .user-panel                    {display: flex; width: 100%; align-items: center; gap: 0.7em; padding: var(--nav-item-padding); background-origin: padding-box;}

.client-area-aside .bottom .user-panel .avatar            {display: flex; width: 2.6em; height: 2.6em; background: url("images/client-area/icons/user-primary-950.svg") no-repeat center center, var(--clr-primary-100); background-size: auto 45%; border-radius: 100%; overflow: hidden; flex-shrink: 0;}

.client-area-aside .bottom .user-panel .avatar img        {display: block; width: 100%; height: 100%; object-fit: cover;}

.client-area-aside .bottom .user-panel > div              {display: flex;  flex-direction: column; align-items: flex-start; overflow: hidden;}

.client-area-aside .bottom .user-panel > div span         {display: block; width: 100%; font-size: 0.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.client-area-aside .bottom .user-panel > div .name        {font-size: 0.95em; font-weight: 600;}

.client-area-aside .bottom .logout                        {display: flex; width: 100%; align-items: center; gap: 0.5em; font-size: 0.95em; color: var(--clr-primary-400); border-radius: 0.5em;; padding: var(--nav-item-padding); box-sizing: border-box; transition: 0.15s ease-in-out;}

.client-area-aside .bottom .logout img                    {display: block; height: 1em; position: relative; top: -0.1em;}

.client-area-aside .bottom .logout:hover                  {background: var(--clr-primary-100);}

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

  .client-area-aside .close                               {display: none;}

  }



.client-area-header                                       {display: flex; width: 100%; height: var(--header-height); justify-content: space-between; align-items: center; gap: 1em 1.2em;}

.client-area-header .navicon                              {display: block; width: 1.6em; height: 1.6em; position: relative; top: 0.1em;}

.client-area-header .navicon img                          {display: block; width: 100%; height: 100%; object-fit: contain;}

.client-area-header h1                                    {width: auto; flex-grow: 2; text-align: left; font-size: 1.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.client-area-header-contacts                              {display: flex; align-items: center; gap: 1em 1.4em; font-size: 0.9em;}

.client-area-header-contacts .icon-link .icon-circle      {background: var(--clr-secondary-400);}

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

  .client-area-header .navicon                            {display: none;}

  }

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

  .client-area-header-contacts                            {gap: 0.6em;}  

  .client-area-header-contacts .icon-link                 {font-size: 1.3em;}

  .client-area-header-contacts .icon-link .title          {display: none;}

  }

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

  .client-area-header                                     {font-size: 0.9em;}

  }



.client-area-main                                         {display: flex; width: 100%; flex-direction: column; gap: var(--client-area-padding-m); padding-block: 0.5rem var(--client-area-padding-m) !important; overflow-x: hidden; overflow-y: auto;}

.client-area-main > *                                     {display: flex; width: min(70rem, 100%); flex-wrap: wrap;}



.client-area-filters                                      {display: flex; width: 100%; gap: 0.6em; flex-wrap: wrap;}

.client-area-filters .form-item                           {max-width: 16em;}



.client-area-buttons                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em;}

.client-area-buttons .button                              {font-size: 0.8em; padding: 0.6em 1.5em 0.7em;}



.client-area-pagination                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.35em;}

.client-area-pagination a                                 {display: flex; min-width: 2.4em; height: 2.2em; justify-content: center; align-items: center; font-size: 0.8em; color: var(--clr-primary-950); background: var(--clr-primary-50); padding: 0.65em 0.5em 0.35em; border-radius: 0.5em; box-sizing: border-box; transition: 0.15s ease-in-out;}

.client-area-pagination a:hover                           {background: var(--clr-primary-100); color: var(--clr-primary-400);}

.client-area-pagination a.sel                             {background: var(--clr-primary-400); color: white; font-weight: 600;}



.client-area-form                                         {max-width: var(--main-max-width-s);}

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

  .client-area-form                                       {font-size: 0.85em;}  

  }



.client-area-inbox                                        {max-width: var(--main-max-width-m); flex-direction: column; gap: var(--client-area-padding-m); flex-grow: 2;}

.client-area-inbox .threads                               {display: block; width: 100%; flex-grow: 2;}

.client-area-inbox .thread                                {display: block; width: 100%;}

.client-area-inbox .thread:not(:last-child)               {padding-bottom: 1.5em; margin-bottom: 1.5em; border-bottom: solid 1px var(--clr-primary-400);}

.client-area-inbox .thread .head                          {display: flex; width: 100%; flex-wrap: wrap;}

.client-area-inbox .thread .head span                     {display: block; font-size: 0.8em; font-weight: 500; line-height: var(--font2-line-basic); font-family: var(--font2); margin-bottom: 0.8em;}

.client-area-inbox .thread .head span:not(:first-child)::before

                                                          {display: inline-block; width: 0.1em; height: 0.9em; background: var(--clr-primary-400); margin-inline: 0.65em; content: "";}

.client-area-inbox .thread p                              {display: block; width: 100%; font-size: 0.95em;}



.client-area-docs                                         {gap: 0.6rem;}

.client-area-docs > div                                   {display: flex; width: 100%; flex-direction: column; align-items: flex-start; background: var(--clr-primary-50); padding: 1.2em; box-sizing: border-box; border-radius: 0.6em; --client-area-docs-item-padding: 0.6rem;}

.client-area-docs > div > *                               {padding-inline: var(--client-area-docs-item-padding); box-sizing: border-box;}

.client-area-docs > div > img                             {display: block; height: 1.4em; margin: 0.6em 0 0.8em;}

.client-area-docs > div span                              {display: block; width: 100%; line-height: var(--font1-line-reduced);}

.client-area-docs > div .title                            {font-size: 1.1em;}

.client-area-docs > div .info                             {font-size: 0.7em; color: var(--clr-tertiary-800); margin-top: 0.45em;}

.client-area-docs .bottom                                 {display: flex; width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-end; flex-grow: 2; padding: 0; margin-top: 0.6em;}

.client-area-docs .download                               {display: flex; align-items: center; gap: 0.5em; font-size: 0.95em; color: var(--clr-primary-400); line-height: 1; border-radius: 0.5em;; padding: 0.65em var(--client-area-docs-item-padding) 0.5em; box-sizing: border-box; transition: 0.15s ease-in-out;}

.client-area-docs .download img                           {display: block; height: 1em; position: relative; top: -0.1em;}

.client-area-docs .download:hover                         {background: var(--clr-primary-100);}

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

  .client-area-docs > div                                 {width: calc(25% - 0.45rem);}

  }

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

  .client-area-docs > div                                 {width: calc(33.33% - 0.4rem);}

  }

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

  .client-area-docs > div                                 {font-size: 0.85em;}

  }

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

  .client-area-docs > div                                 {width: calc(50% - 0.3rem);}

  }