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


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





/*------------------------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:                "roboto", sans-serif; /* 300 - 700 */

                                                --font2:                "apparat", sans-serif; /* 300 */



                                                --clr-white-70:         rgba(255,255,255,0.7);



                                                --clr-primary-50:       #e4f0ff;

                                                --clr-primary-100:      #bcd2ee;

                                                --clr-primary-200:      #91b2da;

                                                --clr-primary-300:      #7e9bbe;

                                                --clr-primary-400:      #788fab;

                                                --clr-primary-650:      #4f5f71;

                                                --clr-primary-700:      #334077;

                                                --clr-primary-750:      #2b3667;

                                                --clr-primary-800:      #242d54;

                                                --clr-primary-850:      #1d2444;

                                                --clr-primary-900:      #191F39;

                                                --clr-primary-950:      #161928;

                                                 

                                                --clr-secondary-400:    #FFD090; 

                                                --clr-secondary-500:    #FFBA64; 



                                                --clr-green:            #1bff7e;

                                                --clr-error:            #ff335f;



                                                --gradient-secondary:   linear-gradient(80deg, var(--clr-secondary-400), var(--clr-secondary-500));



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

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

                                                --wrapper-max:          78rem;

                                                --wrapper-thin-max:     46rem;

                                                --wrapper-narrow-max:   56rem;

                                                --wrapper-wide-max:     90rem;



                                                --gap1:                 1rem;

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

                                                --gap3:                 min(4.5rem, calc(2.5rem + 5vw));



                                                --wrapper-gap:          var(--gap2);



                                                --article-gap:          1.5em;



                                                --font1-line-basic:     1.65;       

                                                --font1-line-reduced:   1.3;       

                                                

                                                --letter-spacing-100:   0.1em;

                                                

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

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

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



                                                --border-radius1:       0.4rem;



                                                --form-items-gap:       1.15em;

                                                --form-item-height:     2.9rem;

                                                --input-padding-inline: 1.1em;

                                                --form-item-padding:    0.45rem;

                                                }

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

  :root                                         {

                                                --wrapper-max:          54rem;

  }

  }

  

html                                            {display: block; width: 100%; height: 100%; background: url("images/pattern.svg") repeat center top, var(--clr-primary-900); background-size: 0.8em auto; font-size: clamp(14px, calc(1px + 1vw), 18px); color: white; font-weight: 300; letter-spacing: var(--letter-spacing-100); 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(--wrapper-gap) 0; margin-inline: auto; position: relative; container-type: inline-size; box-sizing: border-box; z-index: 10;}

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

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

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



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

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

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

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



.icon-link                                      {display: flex; align-items: center; gap: 0.6em; color: white; font-weight: 300; text-decoration: none; transition: 0.15s ease-in-out;}

.icon-link .icon-circle                         {font-size: 0.9em; background: var(--clr-primary-750);}

.icon-link > img                                {display: block; width: auto; height: 1em; position: relative; top: 0.02em;}

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



.link                                           {display: flex; align-items: center; gap: 0.5em; color: var(--clr-secondary-400); font-weight: 400; text-transform: uppercase; letter-spacing: var(--letter-spacing-100); transition: 0.25s ease-in-out;}

.link svg                                       {display: block; width: 1em; height: auto; fill: var(--clr-secondary-400); position: relative; left: 0; transition: 0.25s ease-in-out;}

.link:hover                                     {color: white;}

.link:hover svg                                 {left: 0.2em;}



.gradient-secondary                             {position: relative; overflow: hidden; isolation: isolate;}

.gradient-secondary:before                      {display: block; position: absolute; inset: 0; z-index: -1; background-image: var(--gradient-secondary); content: ""; transition: 0.25s ease-in-out;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.5em; font-size: 1em; color: white; font-weight: 500; text-transform: uppercase; line-height: var(--font1-line-reduced); text-shadow: none !important; border: none; outline: solid 0.15em transparent; padding: 0.7em 2em; border-radius: var(--border-radius1); cursor: pointer; text-decoration: none !important; box-sizing: border-box; font-family: var(--font1); transition: 0.15s ease-in-out;}

.button img                                     {display: block; width: auto; height: 1em; position: relative; top: 0.03em;}

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

.button.gradient-secondary                      {color: var(--clr-primary-900);}

.button.gradient-secondary:hover:before         {filter: brightness(0.92);}

.button.clr-primary-800                         {background: var(--clr-primary-800); color: var(--clr-primary-50);}

.button.clr-primary-800:hover                   {background: var(--clr-primary-750); color: white;}

.clr-primary-800 .button.clr-primary-800        {background: var(--clr-primary-700);}

.clr-primary-800 .button.clr-primary-800:hover  {background: var(--clr-primary-650);}

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

  .button                                       {font-size: 0.85em;}

  }



.quick-contacts                                 {display: flex; gap: 0.3em 1.5em;}

.quick-contacts a img                           {transition: 0.25s ease-in-out;}

.quick-contacts a:hover img                     {filter: brightness(0.92); transform: scale(0.92);}



.backslash                                      {display: block; color: var(--clr-secondary-400); font-weight: 400; text-transform: uppercase; letter-spacing: var(--letter-spacing-100);}

.backslash:before                               {display: inline-block; width: 1.3em; height: 1em; background: url("images/icons/backslash-clr-secondary-400.svg") no-repeat left center; background-size: contain; position: relative; top: 0.135em; content: "";}



.message                                        {display: block; width: 100%; font-size: 0.85em; background: var(--clr-primary-800); padding: 0.8em 0; 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-700); border-radius: 100%; cursor: pointer; position: relative; top: 0.04em; flex-shrink: 0; transition: .2s ease-in-out;}

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

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

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

  .message .close                               {order: 2;}

  }



.hp .header                                     {position: absolute; left: 0; top: 0;}



.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: 5.6em;}

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

.header .collapse                               {display: block; font-weight: 500;}

.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: white; font-weight: 300; text-decoration: none; border-radius: var(--border-radius1); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}

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

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

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

.header .header-elements .quick-contacts        {font-size: 1.25em; column-gap: 0.7em;}

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

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

  .header                                       {font-size: 1.1em;}

  .header .wrapper                              {background-position: left 60% center; background-size: auto 2.6em;}

  .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 li                             {margin-left: 6cqw;}

  .header nav ul li a                           {padding: 0.5em 1.2em; margin-inline: -1.2em;}

  .header .header-elements > *                  {margin-left: 2.8cqw;}

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

  }

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

  .header .wrapper                              {background-position: left 80% center; background-size: auto 2em;}

  .header .collapse                             {width: 20rem; height: calc(100svh - 2rem); background: var(--clr-primary-800); overflow-y: auto; position: fixed; opacity: 0; right: -100rem; top: 1rem; z-index: 5; border-radius: var(--border-radius1); 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: 2.2em; height: 2.2em; justify-content: center; align-items: center; position: absolute; right: 0.75em; top: 0.75em;}

  .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.2em; padding: 0.8em 0;}              

  .header .header-elements                      {justify-content: space-between; 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: 1em;}

  .header .header-elements .btn-login           {font-size: 1.15em;}

  .header .header-elements .quick-contacts      {order: 2; font-size: 1.15em; position: relative; top: -0.1em;}

  .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.1em; background: white; 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.05em);}

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

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

  .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) 1.5rem; position: relative;}

.footer .partners                               {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em 3.5em;}

.footer .partners a                             {display: block; height: 3em; opacity: 0.7; transition: 0.25s ease-in-out;}

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

.footer .partners a:hover                       {opacity: 1;}

.footer .wrapper                                {flex-direction: row; justify-content: space-between; align-items: stretch; gap: 4em 0;}

.footer .wrapper > div:nth-last-child(n+2)      {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: 5.6em;}

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

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

.footer-about .backslash                        {font-size: 0.8em; margin-top: 0.65em;}

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

.footer-about-logos a                           {display: block; height: 1.6em; opacity: 0.7; transition: 0.25s ease-in-out;}

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

.footer-about-logos a:hover                     {opacity: 1;}

.footer-nav nav                                 {display: flex; align-items: flex-start; gap: 1.1em 1.8em; flex-wrap: wrap;}

.footer-nav nav a                               {display: block; font-size: 1em; color: inherit; transition: 0.25s ease-in-out;}

.footer-nav nav a:hover                         {color: var(--clr-secondary-400);}

.footer-info p                                  {font-size: 0.9em;}

.footer-info .quick-contacts                    {flex-direction: column; margin-top: 1em;}

.footer-soc .backslash                          {font-size: 0.9em;}

.footer-soc p                                   {font-size: 0.8em; margin-block: 1em;}

.footer-soc .quick-contacts                     {flex-direction: column;}

.footer-links                                   {display: flex; width: 100%; gap: 0.8em 1.6em; flex-wrap: wrap;}

.footer-links > a                               {font-size: 0.85em; color: var(--clr-primary-400); transition: 0.15s ease-in-out;}

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

.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.5em 0.35em;}

.footer-links .copyright span                   {display: block; font-size: 0.85em; color: var(--clr-primary-400);}

.footer-links .copyright a                      {display: block; width: 6em; position: relative; top: -0.25em;}

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

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

  .footer-nav nav                               {font-size: 1.1em;}  

  .footer-soc                                   {width: 14em;}

  .footer-soc .quick-contacts                   {flex-direction: column;}

  }

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

  .footer                                       {background: var(--clr-primary-850);}  

  .footer .partners                             {font-size: 0.85em;}

  }

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

  .footer-nav,

  .footer-soc                                   {width: 40%;}

  }

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

  .footer-about                                 {width: min(100%, 22em);}

  .footer-nav nav                               {flex-direction: column;}

  }

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

  .footer-nav                                   {width: 100%; padding-block: 2em; border-top: solid 1px var(--clr-primary-750); border-bottom: solid 1px var(--clr-primary-750);}

  .footer-nav nav                               {width: 100%;}

  .footer-info, .footer-soc                     {width: 50%; font-size: 0.9em;}

  .footer-links                                 {width: 100%;}

  .footer-links a                               {font-size: 0.95em;}

  .footer-links .copyright                      {width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 1em;}  

  .footer-links .copyright span                 {color: white;}

  }

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

  .footer-nav nav                               {column-gap: 0;}

  .footer-nav nav a                             {width: 33.33%;}

  }



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

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

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

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

.section .wrapper > .bottom                     {display: flex; width: 100%; justify-content: center; gap: 0.4em; flex-wrap: wrap; font-size: 0.9em; margin-top: var(--gap2);}

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

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

  }



.carousel-blog + .bottom                        {margin-top: 0 !important;}





em                                              {font-style: italic;}

strong                                          {font-weight: 500;}



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

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



.main :is(ul li, ol:not([class]) li)            {text-align: left; padding-left: 1.8em; margin-top: 0.2em; position: relative; box-sizing: border-box;}

.main :is(ul li, ol:not([class]) li):before     {display: block; widtH: 1.8em; height: 1em; position: absolute; left: 0; top: 0; content: "";}

.main ul:not([class]) li:before                 {width: 0.3em; height: 0.3em; background: var(--clr-secondary-400); border-radius: 0.08em; top: 0.7em;}

.main ul.backslash-list li:before               {background: url("images/icons/backslash-clr-secondary-400.svg") no-repeat left center; background-size: contain; top: 0.36em;}

.main ol:not([class])                           {list-style-type: none; counter-reset: li;}

.main ol:not([class]) li                        {counter-increment: li;}

.main ol:not([class]) li:before                 {color: var(--clr-secondary-400); font-weight: 400; content: counter(li)".";}



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

.txt-large                                      {font-size: 1.2em;}



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: 300; text-transform: uppercase; letter-spacing: var(--letter-spacing-100); line-height: var(--font1-line-reduced); box-sizing: border-box; position: relative; font-family: var(--font2);}

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

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

h2.large                                        {font-size: var(--h1);}

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



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

                                              

.container                                      {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--container-gap); --container-gap: calc(1.5 * var(--gap1)); box-sizing: border-box; position: relative; z-index: 1;}

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

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

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

.container h2 + .backslash                      {margin-top: -0.65em;}

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

  .container.centered                           {max-width: 50rem; align-items: center;}

  }

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

  .container.centered.desktop-only              {align-items: left;}

  .container.centered.desktop-only > *          {text-align: left;}

  }



.breadcrumbs                                    {display: block; max-width: 100%;}

.breadcrumbs ul                                 {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 2em; font-size: 0.85em; margin: 0; padding: 0 !important;}

.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; color: var(--color0); position: relative; padding: 0 !important; margin: 0 !important;}

.breadcrumbs ul li:before                       {display: none !important;}

.breadcrumbs ul li:not(:last-child) a:after     {display: inline-block; width: 1em; height: 1em; position: absolute; right: -1.5em; top: calc(50% - 0.5em); background: url("images/icons/backslash-clr-primary-100.svg") no-repeat center center; background-size: contain; content: "";}

.breadcrumbs ul li a                            {display: block; color: var(--clr-primary-100) !important; text-decoration: underline; font-weight: 300; border: none; transition: .25s ease-in-out;}

.breadcrumbs ul li:last-child a                 {text-decoration: none;}

.breadcrumbs ul li a[href]:hover                {color: white !important; text-decoration-color: transparent;}

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

  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}

  .breadcrumbs::-webkit-scrollbar               {display: none;}

  .breadcrumbs ul                               {flex-wrap: nowrap;}

  .breadcrumbs ul li a                          {white-space: nowrap;}

  } 



.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em; font-size: 1.3em; list-style: none; counter-reset: pagination; padding: 0; margin: var(--gap2) 0 0; box-sizing: border-box;}

.pagination li                                  {padding: 0; counter-increment: pagination;}

.pagination li:before                           {display: none;}

.pagination li a                                {display: block; font-size: 1em; color: var(--clr-primary-400); text-decoration: none; transition: 0.15s ease-in-out;}

.pagination li a:before                         {content: counter(pagination, decimal-leading-zero); transition: 0.15s ease-in-out;}

.pagination li a:hover                          {color: var(--clr-primary-200);}

.pagination li a.sel                            {color: var(--clr-secondary-400);}



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

.img-inner                                      {display: block; width: 100%; background: var(--clr-secondary-400); border-radius: var(--border-radius1); box-sizing: border-box;}

.img-inner span                                 {display: block; position: absolute; inset: 0; overflow: hidden; border-radius: var(--border-radius1); transition: 0.25s ease-in-out;}

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

.img-inner.upcoming:after                       {display: flex; width: 11em; height: 2.6em; left: calc(50% - 5.5em); top: calc(50% - 1.3em); justify-content: center; align-items: center; font-size: 4cqw; color: var(--clr-primary-900); text-transform: uppercase; font-weight: 500; background: var(--clr-secondary-400); border-radius: 0.5em; box-shadow: 0 0 1em rgba(0,0,0,0.45); position: absolute; transform: rotate(12deg); content: "Připravujeme";}

.img-inner[href]:hover span                     {opacity: 0.85;} 



.section:has(.page-head) .wrapper               {align-items: flex-start;}



.page-head                                      {display: flex; width: 100%; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: var(--gap1) 0;}

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

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

.page-head .img                                 {aspect-ratio: 10/3; margin-top: var(--gap2);}

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

  .page-head .container                         {max-width: 56em;}

  }

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

  .page-head .img                               {aspect-ratio: 2/1;}

  }



.box                                            {display: block; width: 100%; padding: min(4em, calc(1em + 5vw)) min(6em, calc(1em + 5vw)); box-sizing: border-box; --corner-size: 2em;}

.box-inner                                      {display: flex; width: 100%; flex-direction: column; align-items: center;}



.box.clr-primary-800                            {background: var(--clr-primary-800);}



.hp .projects.anim .preview-project,

.hp .carousel-blog.anim .preview-blog,

.hp .container.anim,

.hp .ecosystem.anim                             {position: relative; top: 8em; opacity: 0; transition: 1.2s ease-in-out;}

.hp .projects.anim.play .preview-project,

.hp .carousel-blog.anim.play .preview-blog,

.hp .container.anim.play,

.hp .ecosystem.anim.play                        {top: 0; opacity: 1;}

.hp .box-claim.anim                             {transform: scale(1.1); opacity: 0; transition: 1.2s ease-in-out;}

.hp .box-claim.anim.play                        {transform: scale(1); opacity: 1;}

.hp .cta.anim .content > div                    {position: relative; opacity: 0; transition: 1.2s ease-in-out;}

.hp .cta.anim .content > div:nth-child(1)       {left: -3rem;}  

.hp .cta.anim .content > div:nth-child(2)       {right: -3rem;}  

.hp .cta.anim.play .content > div:nth-child(1)  {left: 0; opacity: 1;}

.hp .cta.anim.play .content > div:nth-child(2)  {right: 0; opacity: 1;}



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



.hero                                           {display: flex; width: 100%; height: clamp(40em, 100svh, 56em);}

.hero .container                                {justify-content: center; position: absolute; left: 0; bottom: 0; padding-block: 12em 4em; z-index: 2;}

.hero .container *                              {text-shadow: 0 0 1em var(--clr-primary-900), 0 0 1.3em var(--clr-primary-900), 0 0 1.6em var(--clr-primary-900), 0 0 2em var(--clr-primary-900);}

.hero h1                                        {font-size: calc(1.25 * var(--h1));}

.hero .backslash                                {font-size: 1.15em; margin-block: -1em -0.1em;}

.hero .carousel                                 {width: 100vw; margin-inline: calc(50% - 50vw);}

.hero .carousel-inner                           {width: 100%; max-width: 100%; height: 100%;}

.hero .swiper                                   {width: 100%; height: 100%;}

.hero .swiper-slide                             {opacity: 0 !important;}

.hero .swiper-slide-active                      {opacity: 1 !important;}

.hero .swiper-pagination                        {display: flex; width: auto; align-items: center; gap: 0.4em; font-size: 0.8em; inset: auto; right: 2rem; bottom: 3.6rem; counter-reset: swiper-pagination;}

.hero .swiper-pagination-bullet                 {width: auto; height: auto; background: none; font-size: 1em; color: var(--clr-secondary-400); font-weight: 500; line-height: 1; opacity: 1; filter: hue-rotate(190deg); margin: 0; opacity: 0.5; transition: 0.25s ease-in-out; counter-increment: swiper-pagination;}

.hero .swiper-pagination-bullet:after           {display: block; padding: 0 0 0.2em 1.15em; background: url("images/icons/backslash-clr-secondary-400.svg") no-repeat left center; background-size: auto 1em; content: counter(swiper-pagination);}

.hero .swiper-pagination-bullet-active          {opacity: 1; filter: hue-rotate(0deg);}

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

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

                                                 mask-image: linear-gradient(to bottom, transparent, black 14em, black calc(100% - 14em), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to bottom, transparent, black 14em, black calc(100% - 14em), transparent);      

}

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

.hero .image img                                {display: block; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; will-change: transform;}

.hero .title                                    {display: block; text-align: right; z-index: 2; font-size: 1.3rem; font-weight: 400; line-height: var(--font1-line-reduced); letter-spacing: var(--letter-spacing-100); text-transform: uppercase; position: absolute; right: 2rem; bottom: 1.2rem;}

.hero .swiper-slide-active .image img           {animation: hero 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;}

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

  .section:has(.hero)                           {overflow: visible !important;}

  .hero .container                              {width: 30em; height: 100%;}

  .hero .swiper-button                          {--swiper-button: 2rem; top: auto; bottom: -0.2em; background-color: var(--clr-primary-800);}

  }

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

  .hero .carousel                               {width: 100%; margin: 0; overflow: visible;}

  .hero .carousel *                             {overflow: visible;}

  .hero .image                                  {width: 120rem; margin-inline: calc(50% - 60rem);}

  .hero .image span                             {

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

                                                 mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);                                           

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

                                                }  

  }

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

  .hero .swiper                                 {

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

                                                 mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), black 45%,);                                           

                                                 -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), black 45%);      

                                                }

  }

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

  .hero .container                              {margin-bottom: 4em;}



  }

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



  }



@keyframes hero {

    from {

        transform: scale(1.1); transform-origin: right bottom;

    }

    to {

         transform: scale(1); transform-origin: right bottom;

    }

}



.section:has(.carousel-logos)                   {padding-top: calc(0.6 * var(--section-padding));}



.carousel-logos                                 {display: block; width: 100%; overflow: hidden; margin-bottom: var(--gap2);}

.carousel-logos .carousel-inner                 {overflow: hidden;

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

                                                 mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);                                           

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



}

.carousel-logos .swiper-wrapper                 {transition-timing-function: linear !important;}

.carousel-logos .swiper-slide                   {width: auto !important; padding: 0 2em; box-sizing: border-box;}

.carousel-logos .swiper-slide a                 {display: block; height: 2.6em; opacity: 0.6; transition: 0.25s ease-in-out;}                                      

.carousel-logos .swiper-slide a img             {display: block; height: 100%; filter: sepia(100%) hue-rotate(-60deg) saturate(1000%);}                                      

.carousel-logos .swiper-slide a[href]:hover     {opacity: 1;}



.preview-blog                                   {display: block; width: 100%; container-type: inline-size; box-sizing: border-box; position: relative; isolation: isolate;}

.preview-blog .inner                            {display: flex; width: 100%; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 1em; padding-top: 133%; box-sizing: border-box;}

.preview-blog .img                              {position: absolute; inset: 0; z-index: -1;

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

                                                 mask-image: linear-gradient(to bottom, black 40%, transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent);

                                                }

.preview-blog .img-inner                        {height: 100%; border-radius: 0;}

.preview-blog .info                             {display: flex; width: 100%; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.65em; padding: min(2.5em, calc(0.6em + 5vw)); box-sizing: border-box; position: absolute; left: 0; bottom: 0;}

.preview-blog :is(.title, .perex)               {display: block; width: 100%; text-align: left; font-size: var(--preview-title);}

.preview-blog .title                            {font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: var(--letter-spacing-100); line-height: var(--font1-line-reduced); transition: .25s ease-in-out;}

.preview-blog .perex                            {font-size: clamp(11px, 2vw, 0.8em);}

.preview-blog .link                             {font-size: 0.9em; margin-top: 0.2em;}

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

.preview-blog:hover .img-inner span             {opacity: 0.85;}

.preview-blog:hover .title                      {color: var(--clr-secondary-400);}

.preview-blog:hover .link                       {gap: 0.8em;}

.preview-blog:not(.article *) .img              {clip-path: none;}

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

  .grid.blog                                    {--grid-gap: 0.0000001px;}

  }

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

  .preview-blog                                 {border-radius: var(--border-radius1); overflow: hidden;}

  }

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

  .grid.blog > *                                {width: calc(50% - 0.5 * var(--grid-gap)) !important;}

  }







.swiper-slide                                   {display: flex; height: auto; flex-shrink: 0; box-sizing: border-box; transition: opacity 0.25s ease-in-out;}



.swiper-button                                  {display: flex; --swiper-button: 2.6rem; width: var(--swiper-button); height: var(--swiper-button); background: var(--clr-primary-900); position: absolute; top: calc(50% - 0.5 * var(--swiper-button)); z-index: 5; margin: 0; cursor: pointer; transform: rotate(45deg); transition: .25s ease-in-out;} 

.swiper-button-prev                             {left: calc(-0.5 * var(--swiper-button)); right: auto; transform: rotate(-135deg);}

.swiper-button-next                             {right: calc(-0.5 * var(--swiper-button)); left: auto;}                                 

.swiper-button:after                            {display: block; position: absolute; inset: 0; background: url("images/icons/arrow-right-secondary-400.svg") no-repeat center center; background-size: 50%; transform: rotate(-45deg); content: "";}

.swiper-button:hover                            {background-color: var(--clr-primary-750);}

.swiper-button-disabled,

.swiper-button-lock                             {opacity: 0 !important;}

.section:has(.carousel)                         {overflow: hidden;}



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

.carousel-inner                                 {display: block; width: 100%; box-sizing: border-box; overflow: hidden;}

.carousel .swiper                               {display: block; width: 100%; box-sizing: border-box;}

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

  .carousel-blog, .blog                         {width: 100vw !important; margin-inline: calc(50% - 50vw);}

  }

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

  .carousel :is(.carousel-inner, .swiper)       {overflow: visible;}

  .carousel-gallery .carousel-inner             {clip-path: none;}

  .carousel-gallery .swiper-button              {display: none !important;}

  }

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

  .carousel-inner                               {max-width: 32rem;}

  }



.carousel-gallery .img-inner                    {padding-top: 56.25%;}



.grid                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--grid-gap); --grid-gap: 1em;}

.grid > *                                       {width: 100%;}

.grid.g3-2 > *,

.grid.g4-3-2 > *                                {width: calc(50% - 0.5 * var(--grid-gap));}

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

  .grid.g2-1 > *                                {width: calc(50% - 0.5 * var(--grid-gap));}

  }

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

  .section:has(.grid.g2-1):has(+ .section .grid.g2-1)

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

  .section:has(.grid.g2-1) + .section:has(.grid.g2-1)

                                                {border-top: solid 1px var(--clr-primary-650);}

  }  

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

  .grid.g4-3-2 > *                              {width: calc(25% - 3/4 * var(--grid-gap));}

  }

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

  .grid.g3-2 > *,

  .grid.g3-2-1 > *                              {width: calc(33.33% - 2/3 * var(--grid-gap));}

  }

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

  .grid.g4-3-2 > *                              {width: calc(33.33% - 2/3 * var(--grid-gap));}

  }



.gallery-grid .img-inner                        {padding-top: 56.25%;}

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

  .gallery-grid                                 {--grid-gap: 0.6em;}

  }



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

.projects > *:not(:first-child)                 {margin-top: var(--gap3);}



.preview-project                                {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.2em 6%; position: relative; padding-bottom: calc(1.5em + var(--gap2)); box-sizing: border-box;}

.preview-project > div                          {display: flex; width: 100%; flex-direction: column;}

.preview-project span:not(.link)                {display: block; text-align: left;}

.preview-project .title                         {font-size: 1.8em; text-transform: uppercase;}

.preview-project .perex                         {margin-top: 0.6em;}

.preview-project .link                          {position: absolute; left: 0; bottom: 0;}

.preview-project .img                           {display: block; order: -1;}

.preview-project .img-inner                     {padding-top: 56.25%;}

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

  .preview-project                              {flex-wrap: nowrap; padding-bottom: 0;}

  .preview-project > div                        {width: auto;}

  .preview-project > div:nth-child(1)           {width: 27em;}

  .preview-project > div:nth-child(2)           {width: 17em;}

  .preview-project .img                         {flex-grow: 2; order: 2;}

  }

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

  .preview-project .link                        {position: relative; left: auto; bottom: auto; margin-top: 0.9em;}

  }

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

  .preview-project > div:nth-child(1)           {width: calc(94% - 20em);}

  .preview-project > div:nth-child(2)           {width: 20em;}

  }



.features                                       {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: var(--features-gap); --features-gap: 1.45em;}  

.features > div                                 {display: block;}

.features > div span:nth-child(2)               {display: block; font-size: 0.9em; margin-top: 0.2em;}



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

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

.project-head .features                         {width: 100%; flex-direction: row; justify-content: space-between;}

.project-head .features > *                     {width: 100%;}

.project-head .img-inner                        {padding-top: 56.25%;}

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

  .project-head .info                           {width: 26rem;}

  .project-head .features                       {flex-direction: column; font-size: 1.2em;}

  .project-head .img                            {width: calc(100% - 30rem);}

  }

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

  .project-head .img                            {order: -1;}

  }

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

  .project-head .features > *                   {width: 29%;}

  }

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

  .project-head .features > *                   {width: 46%;}

  }



.project-cols                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap3) 0;}

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

.project-cols .logo                             {display: block; max-width: 80%; height: 5em;}

.project-cols .logo img                         {display: block; max-width: 100%; height: 100%; object-fit: contain;}

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

  .project-cols > div:nth-child(1)              {width: 58%;}

  .project-cols > div:nth-child(2)              {width: 32%;}

  }



.family-logos                                   {display: flex; flex-wrap: wrap; gap: 0.8em 1.4em; margin-top: 0.8em;}  

.family-logos a                                 {display: block; height: 1.8em;}

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



.ba-slider                                      {display: block; width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; user-select: none;}

.ba-img                                         {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}

.ba-resize                                      {width: 50%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 1;}

.ba-resize .ba-before                           {width: var(--parent-width, 800px); max-width: none;}

.ba-handle                                      {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0;}

.ba-divider                                     {width: 0.4em; position: absolute; top: 0; bottom: 0; left: 50%; background-color: var(--clr-primary-900); z-index: 2; pointer-events: none; transform: translateX(-50%);}

.ba-divider::after,                             

.ba-divider::before                             {display: flex; width: 3em; height: 3em; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}

.ba-divider::after                              {z-index: 2; background-color: var(--clr-primary-900);}

.ba-divider::before                             {z-index: 3; background: url("images/icons/arrow-left-secondary-400.svg") no-repeat left 15% center, url("images/icons/arrow-right-secondary-400.svg") no-repeat right 15% center; background-size: 30% auto; transform: translate(-50%, -50%);}



.project-about                                  {display: flex; width: 100%; flex-direction: column; gap: var(--gap1);}

.project-about > div                            {display: block; width: 100%; margin-bottom: calc(-1 * var(--gap1));}

.project-about > div > *                        {width: 100%; margin-bottom: var(--gap1);}

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

  .project-about > div                          {column-count: 2; column-gap: var(--gap3);}

  }



.project-gallery                                {display: flex; width: 100%; flex-direction: column; gap: var(--gap1);}

.project-gallery .gallery-grid                  {margin-top: 0.5em;}



.project-links                                  {width: auto; background: var(--clr-primary-800);}

.project-links .box-inner                       {align-items: center; text-align: center;}

.project-links h2                               {font-size: calc(0.85 * var(--h2));}

.project-links .quick-contacts                  {font-size: 1.1em; margin-top: var(--gap1);}



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

.ecosystem > div                                {display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap1);}

.ecosystem .logo                                {display: block; height: 2.4em; box-sizing: border-box;}

.ecosystem .logo img                            {display: block; height: 100%;}

.ecosystem .info                                {display: flex; gap: 0.35em 1em; flex-wrap: wrap; font-size: 0.9em;}

.ecosystem .button                              {font-size: 0.85em; margin-top: 0.5em;}

.ecosystem > div:nth-child(1) .logo             {padding-block: 0.4em;}

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

  .ecosystem > div                              {width: 22em;}

  }

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

  .ecosystem > div                              {width: 47%;}

  }

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

  .ecosystem > div:nth-child(n+2)               {padding-top: var(--gap2); border-top: solid 1px var(--clr-primary-650);}

  .ecosystem .logo                              {height: 2em;}

  }



.box-claim                                      {display: flex; width: 100%; flex-direction: column; justify-content: center; background: var(--clr-secondary-400); color: var(--clr-primary-900); position: relative;}

.box-claim > div                                {display: block; width: 100%; box-sizing: border-box;}

.box-claim .image                               {display: block; height: 15em; position: relative; z-index: 0;

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

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

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

}

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

.box-claim .text                                {display: flex; justify-content: center; padding: 0 min(4em, 10vw) min(4em, 10vw); text-align: center; margin-top: -3em; position: relative; z-index: 2;}

.box-claim .text h2                             {font-size: calc(0.85 * var(--h2));}

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

  .box-claim                                    {flex-direction: row;}

  .box-claim > div                              {width: 55%;}

  .box-claim .image                             {height: auto; position: absolute; left: 0; bottom: 0; top: 0;

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

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

  }

  .box-claim .image img                         {object-position: right center;}  

  .box-claim .text                              {text-align: left; margin: 0 0 0 45%; padding: 4em 4em 4em 0;}

  }



.section:has(.cta)                              {background: var(--clr-primary-950); padding-bottom: var(--section-padding);}

.section:has(.cta) .wrapper                     {position: static;}



.cta                                            {display: block; width: 100%; --cta-padding: min(4em, calc(1em + 5vw));}

.cta .image                                     {display: block; position: absolute; inset: 0; opacity: 0.3;}

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

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

.cta .content > div                             {display: flex; width: 100%; max-width: 50em; flex-direction: column; align-items: flex-start; gap: 1em; padding: var(--cta-padding); box-sizing: border-box; position: relative;}

.cta .content > div:nth-child(1):before         {display: block; position: absolute; inset: 0; z-index: -1; background: var(--clr-secondary-400); opacity: 0.2; content: "";}

.cta .button                                    {margin-top: 0.5em;}

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

  .cta .image                                   {width: 1800px; inset: 0 calc(50% - 900px);

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

                                                 mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);                                           

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

  }

  }

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

  .cta .content                                 {width: calc(100% + 2 * var(--cta-padding)); margin-inline: calc(-1 * var(--cta-padding));}

  }

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

  .cta .content:has(> div:not(:only-child))     {flex-direction: row;}

  .cta .content > div:only-child                {align-items: center; align-self: center; text-align: center;}

  .cta .content > div:not(:only-child)          {width: 50%;}

  }

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

  .cta .content > div:nth-child(2)              {padding-bottom: 0;}

  .cta h2                                       {font-size: min(1.8em, calc(0.5rem + 3vw));}

  }



.cols                                           {display: flex; width: 100%; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--gap2) 0;}

.cols > div                                     {width: 100%;}

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

  .cols                                         {flex-direction: row;}

  .cols > div                                   {width: 45%;}

  }



.before-after-anim                              {width: 100%;}  

.before-after-anim .img                         {width: 100%;}

.before-after-anim .img-inner                   {background: none;}

.before-after-anim .img-inner span              {position: relative; inset: auto;}

.before-after-anim .swiper-slide.before         {opacity: 1 !important;}

.before-after-anim .swiper-slide.after .img     {transform: scale(1.5); opacity: 0; transition: 1s ease-in-out;}

.before-after-anim .swiper-slide-active.after .img

                                                {transform: scale(1); opacity: 1;}

.before-after-anim .swiper-slide.after.swiper-slide-leaving .img

                                                {transform: scale(1.5); opacity: 0;}

.before-after-anim-buttons                      {margin: 1em 0 0;}

.before-after-anim-buttons .swiper-wrapper      {transform: none !important;}

.before-after-anim-buttons .swiper-slide        {width: auto !important;}

.before-after-anim-buttons .button              {color: var(--clr-primary-50); border: solid 0.12em transparent; transition: 0.75s ease-in-out;}

.before-after-anim-buttons .button img          {top: -0.02em; transition: 0.75s ease-in-out;}

.before-after-anim-buttons .swiper-slide-thumb-active .button

                                                {gap: 0; color: white; border-color: var(--clr-secondary-400);}

.before-after-anim-buttons .swiper-slide-thumb-active .button img

                                                {font-size: 0em;}

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

  .before-after-anim-buttons                    {order: -1; margin-block: -1em 1em;}

  }



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

.progress > div                                 {display: flex; width: clamp(10em, 20%, 15em); flex-direction: column; align-items: flex-start; position: relative; padding-right: 1em; box-sizing: border-box;}

.progress > div:not(:first-child):before        {display: block; width: calc(100% - 5.2em); height: 0.08em; position: absolute; right: calc(100% + 0.85em); top: 1.15em; background: var(--clr-primary-100); content: "";} 

.progress > div span                            {display: block; text-align: left; color: var(--clr-primary-100);}

.progress > div .backslash                      {font-size: 1.35em;}

.progress > div .title                          {font-size: 1.1em; line-height: var(--font1-line-reduced);}

.progress > div .status                         {display: none; align-items: center; gap: 0.5em; font-size: 0.65em; color: var(--clr-secondary-400); margin-top: 0.4em;}

.progress > div .status:before                  {display: block; width: 1.2em; height: 1.2em; background-repeat: no-repeat; background-position: center center; background-size: contain; content: "";}

.progress > div .status:after                   {display: block;}

.progress > div:not([class]) .backslash:before  {background-image: url("images/icons/backslash-clr-primary-100.svg");}

.progress > div[class]:before                   {background: var(--clr-secondary-400) !important;}

.progress > div[class] .backslash               {color: var(--clr-secondary-400);}

.progress > div[class] .title                   {color: white;}

.progress > div[class] .status                  {display: flex;}

.progress > div.done .status:before             {background-image: url("images/icons/check-round-secondary-400.svg");}

.progress > div.done .status:after              {content: "HOTOVO";}

.progress > div.now .status:before              {background-image: url("images/icons/loader-clr-secondary-400.png"); animation: spin 2s linear infinite;}

.progress > div.now .status:after               {content: "AKTUÁLNÍ STAV";}

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

  .progress > div .backslash                    {font-size: 1.25em;}

  .progress > div .title                        {font-size: 1em;}

  }

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

  .progress > div                               {width: 33.33%;}

  .progress > div:nth-child(4):before           {display: none !important;}

  }

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

  .progress > div                               {width: 50%;}

  .progress > div:nth-child(odd):before         {display: none !important;}

  }



@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

  

.grid:has(.icon-rows)                           {row-gap: var(--gap2);}



.icon-rows                                      {display: flex; flex-direction: column; gap: var(--icon-rows-gap); flex-wrap: wrap; --icon-rows-gap: var(--gap2);}

.icon-rows > div                                {display: flex; width: 100%; justify-content: space-between; position: relative;}

.icon-rows > div span                           {display: block; width: 2.8em; position: relative; top: 0.23em;}

.icon-rows > div span img                       {display: block; width: 100%;}

.icon-rows > div span.backslash                 {font-size: 1.5em; position: relative; top: -0.2em;}

.icon-rows > div:not(:last-child):has(span.backslash)::after

                                                {display: block; width: 0.1em; height: calc(100% - 0.4em); background: var(--clr-primary-700); position: absolute; top: 2.4em; left: 0.8em; content: "";}

.icon-rows > div > div                          {width: calc(100% - 5.2em);}

.icon-rows h3                                   {font-size: 1.2em; font-weight: 300; text-transform: none; letter-spacing: var(--letter-spacing-100);}

.icon-rows h3 br                                {display: none;}

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

  .grid:has(.icon-rows)                         {justify-content: space-between;}

  .container:has(+ .icon-rows)                  {width: 28em;}

  .icon-rows h3 br                              {display: block;}

  }

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

  .icon-rows                                    {flex-direction: row;}

  .icon-rows > div                              {width: calc(50% - 0.5 * var(--icon-rows-gap));}

  .icon-rows > div:after                        {display: none !important;}

  }



.grid-container                                 {display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em;}



.family                                         {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}

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

.family > div:not(:first-child)                 {padding-top: var(--gap2); border-top: solid 1px var(--clr-primary-650);}

.family > div > a                               {display: block; height: 2.4em;}

.family > div > a img                           {display: block; height: 100%;}

.family > div > div                             {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap1) 0; margin-top: var(--gap1);}

.family > div > div p                           {width: calc(100% - 13em);}

.family > div > div .button                     {font-size: 0.8em; margin-top: 0.4em;}

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

  .family > div                                 {width: 47%;}

  .family > div:nth-child(2)                    {padding-top: 0; border-top: none;}

  .family > div > div p                         {width: 100%;}

  }

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

  .family > div > div p                         {width: 100%;}

  }  





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

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

.form .consent                                  {display: block; width: 100%; text-align: center; font-size: 0.8em; color: var(--clr-primary-100);}

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

.form .consent a:hover                          {color: white; text-decoration-color: transparent;}

.form .button                                   {margin-top: 1.2em;}

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

  .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.4em; box-sizing: border-box; transition: .35s ease-in-out;}

.form-item > label                              {display: flex; width: 100%; min-height: 1em; text-align: left; font-size: 0.85em; color: var(--clr-secondary-400); font-weight: 400; order: -1; padding-inline: var(--form-item-padding); box-sizing: border-box;}

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

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

                                                {display: block; width: 100%; height: var(--form-item-height); color: white; font-size: 1em; font-weight: 400; background: var(--clr-primary-800); padding: 0.3em 0.8em; border: none; outline: solid 0.1em transparent; border-radius: var(--border-radius1); font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

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

.form-item :is(input, textarea):focus           {background: transparent; outline-color: var(--clr-secondary-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: var(--form-item-padding); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1;}

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

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

.form-item-note.error                           {color: var(--clr-error); font-weight: 400; padding-block: 0.4em 0.36em;}

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

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

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

  .form-item.w33-100                            {width: calc(33.33% - 2/3 * var(--form-items-gap));}

  }

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

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

  }



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

                                                {background: var(--clr-primary-750);}



.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: var(--clr-primary-50); font-weight: 300; padding-inline-start: 1.5em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}

.chk1:checked + label                           {color: white; font-weight: 400;}

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

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

.chk1:checked + label:before                    {background: URL('images/icons/check-primary-900.svg') no-repeat center center, var(--clr-secondary-400); background-size: 55% 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; ; background: url("images/icons/chevron-down-white.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.chosen                   {font-weight: 500;}

.custom-options                                 {display: none; width: calc(100% + 1.6em); max-height: 15em; background: var(--clr-primary-750); position: absolute; 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: var(--clr-white-70); 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: white; background: var(--clr-primary-800);}

.custom-option.selected                         {color: var(--clr-secondary-400); font-weight: 500; background: var(--clr-primary-800);}



.toggle-select                                  {display: inline-flex; max-width: 100%; height: 2em; font-size: clamp(13px, calc(0.3em + 2vw), 1em); position: relative; align-items: stretch; background: var(--clr-primary-800); border-radius: var(--border-radius1); 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-50); font-weight: 400; padding: 0.2em 1em 0.23em; white-space: nowrap; position: relative; z-index: 1; cursor: pointer; transition: color .2s ease;}

.toggle-select > a:not(.sel):before             {opacity: 0;}

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

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

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

  }



.contacts                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) 0; margin-top: var(--gap1);}

.contacts > div                                 {display: flex; flex-direction: column;}

.contacts h2                                    {font-size: 1.2em; margin-bottom: 0.8em;}

.contacts .invoice-data                         {display: block; font-size: 1em; color: var(--clr-primary-300); margin-bottom: 0.9em;}

.contacts > div:nth-child(2)                    {max-width: 16em;}

.contacts > div:nth-child(2) p                  {font-size: 0.85em; color: var(--clr-primary-300); line-height: var(--font1-line-reduced); margin-bottom: 1.3em;}

.contacts > div:nth-child(3) > *                {font-size: 1.35em;}

.contacts .quick-contacts                       {flex-direction: column;}

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

  .contacts                                     {column-gap: 9%;}

  .contacts > div:nth-child(3)                  {flex-grow: 2; align-items: flex-end;}

  }

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

  .contacts > div:nth-child(-n+2)               {width: 50%;}

  }

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

  .contacts > div                               {width: 100%;}

  }



.form-box                                       {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2); position: relative; padding: min(var(--section-padding), calc(1em + 5vw)) min(10em, calc(0.2em + 10vw))  0; box-sizing: border-box;}

.form-box:before                                {display: block; position: absolute; inset: 0; z-index: -1; border: solid 0.3em var(--clr-primary-750); border-radius: 0.8em; content: "";

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

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

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

                                                }

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

  .form-box                                     {padding: 0;}

  .form-box:before                              {display: none;}

  .form-box h2                                  {text-align: left !important;}

  }



.map                                            {padding: 0;}

.map #map                                       {display: block; width: 100%; height: 40em;}

.map .marker                                    {display: block; width: 50px; height: 50px; background: url("images/icons/marker-primary-700.svg") no-repeat center center; background-size: contain;}



.contact-companies                              {display: flex; width: 100%; gap: var(--gap3) 8%; flex-wrap: wrap;}

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

.contact-companies .logo                        {display: block; height: 2.6em;}

.contact-companies .logo img                    {display: block; height: 100%;}

.contact-companies .info                        {display: flex; gap: 0.5em 1.2em; flex-wrap: wrap;}

.contact-companies .button                      {font-size: 0.85em; margin-top: 0.5em;}

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

  .contact-companies                            {justify-content: space-between; flex-wrap: nowrap;}

  .contact-companies .container                 {max-width: 30em; align-items: flex-start;}

  .contact-companies .container *               {text-align: left;}

  }



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

.login .button                                  {width: 100%;}

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

  .login                                        {max-width: 32em;}

  }



.article-styles :is(ul, ol)                     {display: block; margin: -0.35em 0 0;}

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



.wrapper:has(.article)                          {align-items: flex-start; gap: var(--gap1);}



.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap);}

.article *:not(h1, .date)                       {text-align: left;}

.article h1                                     {font-size: min(2.2em, calc(0.8em + 4vw)); margin-top: 0 !important;}

.article .article-info                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em 0.8em; margin-top: calc(-0.5 * var(--article-gap));}

.article .article-info .date                    {color: var(--clr-secondary-400); letter-spacing: var(--letter-spacing-100);}

.article :is(h2, h3)                            {margin-block: 1em calc(-0.3 * var(--article-gap));}

.article h2                                     {font-size: 1.75em;}

.article h3                                     {font-size: 1.3em; color: var(--clr-secondary-400);}

.article :is(ul, ol)                            {padding-left: 1.2em; }

.article > .img                                 {margin-block: calc(0.5 * var(--article-gap));}

.article > .img .img-inner span                 {position: relative; inset: auto;}

.article .highlight                             {width: 100%; gap: calc(0.85 * var(--article-gap)); margin-block: 0.6em; position: relative;}

.article .highlight.box                         {padding: min(3em, calc(1em + 5vw)) min(4em, calc(1em + 5vw));}

.article .highlight.box *                       {text-align: center;}

.article .highlight .box-inner                  {gap: calc(0.85 * var(--article-gap));}

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

.article .highlight .button                     {font-size: 0.85em;}



.article .highlight.line                        {display: flex; width: 100%; flex-direction: column; align-items: flex-start; padding-left: calc(0.8em + 8%);}

.article .highlight.line:before                 {display: block; width: 0.17em; height: 100%; background: var(--clr-secondary-400); position: absolute; left: 5%; top: 0; content: "";}

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

.article .embed > *                             {display: block; width: 100%;}

.article .preview                               {margin-block: 0.5rem; padding: 0;}

.article .grid                                  {margin-block: 0.5rem; --preview-padding: 0.35rem;}

.article .grid-item .img-inner span             {border-radius: var(--border-radius1);}

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

  .carousel-article-gallery,

  .carousel-article-gallery .carousel-inner     {width: 100%; margin-inline: 0; padding-inline: 0; overflow: visible;}

  .carousel-article-gallery .swiper             {width: 100%; margin-inline: 0; padding-inline: 0; overflow: hidden;}  

  .carousel-article-gallery .swiper-button      {display: flex;}

  .carousel-article-gallery .swiper-button-prev{left: -2.8rem;}  

  .carousel-article-gallery .swiper-button-next{right: -2.8rem;}  

  }

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

  .carousel-article-gallery .swiper-button      {display: none !important;}

  }  

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

  .article .preview-blog                        {width: 90%; margin: 1em 5%;}

  .article .preview-blog .inner                 {flex-direction: row; justify-content: space-between; gap: 0; padding: 0;}

  .article .preview-blog .img                   {width: 30%; position: relative; inset: auto; z-index: 1; mask-image: none; -webkit-mask-image: none; --corner-size: 1em;}

  .article .preview-blog .img-inner             {height: auto;}

  .article .preview-blog .img-inner span,

  .article .preview-blog .img-inner img         {position: relative; inset: auto;}

  .article .preview-blog .info                  {width: calc(70% - 1.5em); padding: 0; position: relative; left: auto; bottom: auto;}

  .article .preview-blog .perex                 {font-size: 0.9em;}

  }

  

.soc-widget.grid > div                          {border-radius: var(--border-radius1); overflow: hidden;}

.soc-widget.grid .placeholder                   {display: flex; width: 100%; padding-top: 133%; background: url("images/image1.webp") no-repeat center center; background-size: cover;}

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

  .soc-widget.grid                              {width: 100vw; margin-inline: calc(50% - 50vw);}

  }

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

  .soc-widget.grid > *                          {width: calc(100% / 6 - 5/6 * var(--grid-gap));}

  }

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

  .soc-widget.grid > *                          {width: calc(100% / 3 - 2/3 * var(--grid-gap));}

  }



.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-750); 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: var(--clr-primary-850); 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.8;}

.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.8em; height: 1.8em; font-size: 1em; background: var(--clr-primary-700); border-radius: 100%; cursor: pointer; position: absolute; right: -0.65em; top: -0.65em; 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: 40%; height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 30%; top: calc(50% - 0.05em); z-index: 1;}

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

.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(7rem, 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));

                                                          --client-area-padding-l:  calc(2.6 * 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;         

                                                          --main-max-width-l:       50rem;         

  }

  }

  @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; background: var(--clr-primary-950); 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                                        {color: white; background: var(--clr-primary-900); 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%; padding: 0.45em var(--nav-item-padding); box-sizing: border-box;}

.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: 1em; color: var(--clr-primary-50); font-weight: 300; letter-spacing: var(--letter-spacing-100); padding: 1em var(--nav-item-padding); border-radius: 0.5em; position: relative; box-sizing: border-box; overflow: hidden; transition: 0.15s ease-in-out;}

.client-area-aside nav a img                              {display: block; height: 1.1em; position: relative; top: 0.03em;}

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

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

.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-secondary-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-secondary-400.svg") no-repeat center center, var(--clr-primary-750); background-size: auto 40%; 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; color: var(--clr-primary-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

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

.client-area-aside .bottom .logout                        {display: flex; width: 100%; align-items: center; gap: 0.5em; font-size: 0.95em; color: var(--clr-primary-100); font-weight: 400; border-radius: var(--border-radius1); 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; }

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

  @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; color: white;}

.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.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

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

  @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); background: var(--clr-primary-950); 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.9em;}



.client-area-pagination                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em; padding: 0; list-style: none; counter-reset: pagination; padding-inline: 0.8rem; box-sizing: border-box;}

.client-area-pagination li                                {padding: 0; counter-increment: pagination;}

.client-area-pagination li:before                         {display: none;}

.client-area-pagination li a                              {display: block; font-size: 1.1em; color: var(--clr-primary-400); text-decoration: none; transition: 0.15s ease-in-out;}

.client-area-pagination li a:before                       {content: counter(pagination, decimal-leading-zero); transition: 0.15s ease-in-out;}

.client-area-pagination li a:hover                        {color: var(--clr-primary-200);}

.client-area-pagination li a.sel                          {color: var(--clr-secondary-400);}



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



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

.client-area-project .perex                               {display: block; width: 100%;}

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

  .client-area-project .features                          {flex-direction: row;}  

  .client-area-project .features > div:nth-child(odd)     {width: calc(50% - var(--features-gap));}

  .client-area-project .features > div:nth-child(even)    {width: 50%;}

  }



.client-area-project .progress > div                      {width: 10em;}

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

  .client-area-project .progress                          {padding-top: var(--client-area-padding-l); border-top: solid 1px var(--clr-primary-650);}

  }



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

.client-area-docs .backslash                              {width: 100%; margin-bottom: 0.4em;}

.client-area-docs .backslash:not(:first-child)            {margin-top: 1.8em;}

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

.client-area-docs > div > img                             {display: block; height: 1.4em; margin: 0.1em 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.85em; color: var(--clr-primary-200); 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: 1em;}

.client-area-docs .download                               {font-size: 0.75em;}

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

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

  }



.client-area-table                                        {display: block; overflow-x: auto;}

.client-area-table table                                  {border-collapse: separate; border-spacing: 0 0.5em;}

.client-area-table :is(th, td)                            {text-align: left; font-size: 0.9em; padding: 0.75rem 0.6rem; white-space: nowrap;}

.client-area-table :is(th, td):first-child                {padding-left: 1rem;}

.client-area-table :is(th, td):last-child                 {padding-inline: 1rem;}

.client-area-table :is(th, td):nth-last-child(2)          {padding-right: 1rem;}

.client-area-table th                                     {font-size: 0.7em; color: var(--clr-secondary-400); font-weight: 400; text-transform: uppercase; padding-block: 0 0.2rem;}

.client-area-table td                                     {background: var(--clr-primary-850);}

.client-area-table td:first-child                         {border-radius: var(--border-radius1) 0 0 var(--border-radius1)}

.client-area-table td:last-child                          {border-radius: 0 var(--border-radius1) var(--border-radius1) 0; border-left: solid 0.5em var(--clr-primary-950);}

.client-area-table .status                                {display: flex; align-items: center; gap: 0.5em;}

.client-area-table .status:before                         {display: block; width: 0.45em; height: 0.45em; border-radius: 100%; position: relative; top: 0.04em; content: "";}

.client-area-table .status.paid:before                    {background: var(--clr-green);}

.client-area-table .status.not-paid:before                {background: var(--clr-error);}