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

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



::-moz-selection                                {color: var(--color0); background: var(--color1);}

::selection                                     {color: var(--color0); background: var(--color1);}



:root                                           {

                                                --font1-light:           'apparat-light', sans-serif; /* 400 */

                                                --font1-regular:         'apparat', sans-serif; /* 300 */

                                                --line-height1:          1.6;

                                                --line-height2:          1.2;

                                                

                                                --color0:                #121D33;

                                                --color0b:               #b4c4e3;

                                                --color0c:               ;

                                                --color1:                #FACA5F;

                                                --color1b:               #efb12b;

                                                --white-075:             rgba(255,255,255,0.075);

                                                --white-15:              rgba(255,255,255,0.15);

                                                --white-30:              rgba(255,255,255,0.3);

                                                --white-60:              rgba(255,255,255,0.6);

                                                --black-30:              rgba(0,0,0,0.3);



                                                --wrapper-side:          3vw;

                                                --header:                6rem;

                                                --header-lower:          5rem;



                                                --border-radius0:        0.3rem;

                                                --border-radius1:        0.9rem;

                                                --swiper-button-height:  min(10rem, calc(5rem + 5vw));

                                                --swiper-button-width:   calc(0.25 * var(--swiper-button-height));



                                                --gap1:                   1rem;

                                                --gap2:                   1.8rem;

                                                --gap3:                   calc(0.6 * var(--section-padding));



                                                --section-padding:        min(7rem, calc(3rem + 6vw));                                                

                                                --wrapper-width:          86vw;

                                                --wrapper-max:            64rem;

                                                --wrapper-wide-max:       80rem;   

                                                

                                                --box-shadow1:            0 0 0.8em var(var(--black-30));

                                                }

                                               

html                                            {display: block; width: 100%;  text-align: center; font-size: clamp(14px, calc(2px + 1vw), 18px); font-weight: 400; color: white; line-height: var(--line-height1); background: url("images/pattern-transparent.svg") repeat center top, var(--color0); background-size: 11rem auto; overflow-x: hidden; font-family: var(--font1-light);}

body                                            {display: flex; width: 100%;  flex-direction: column; position: relative; box-sizing: border-box;}

body.header-show :is(.main, .footer)            {filter: blur(6px); opacity: 0.35;}



.wrapper                                        {display: flex; width: var(--wrapper-width); flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 5;}

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

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

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

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

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

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

  }



strong                                          {font-weight: 300; font-family: var(--font1-regular);}

em                                              {font-style: italic;}



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



.header                                         {display: flex; width: 100%; height: var(--header); justify-content: center; position: fixed; left: 0; top: 0; box-sizing: border-box; z-index: 1000; transition: .3s ease-in-out;}

.header:before                                  {display: block; position: absolute; inset: 0; background: var(--color0); opacity: 0; z-index: -1; content: "";  transition: .6s ease-in-out;}

.header .wrapper                                {width: min(92vw, 76rem); max-width: unset; height: 100%; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; gap:var(--gap1);}

.header .logo                                   {display: flex; width: 13em; position: relative; z-index: 2; transition: .5s ease-in-out;}

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

.header .collapse                               {display: block; width: 100%;}

.header .collapse .overflow                     {display: flex; width: 100%; box-sizing: border-box;}

.header .collapse a                             {display: flex; align-items: center; gap: 0.4em; color: inherit; padding: 0.35em 1em 0.3em; border-radius: var(--border-radius0); box-sizing: border-box; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-weight: 400; font-family: var(--font1-light); transition: .25s ease-in-out;}

.header .collapse a:hover                       {color: var(--color1);}

.header .collapse a.sel                         {color: var(--color1); background: var(--white-15);}

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

.header nav > ul                                {display: flex; width: 100%; align-items: center; flex-wrap: wrap; position: relative;}

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

.header.scroll                                  {height: var(--header-lower); backdrop-filter: blur(6px);}

.header.scroll:before                           {opacity: 0.5;}

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

  .header .collapse                             {width: auto;}

  .header .collapse :is(.overflow, nav, nav > ul, nav > ul > li)

                                                {height: 100%;}

  .header .phone                                {margin-inline: 1.2em -1em;}

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

  }

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

  .header .home                                 {display: flex; padding: 0.5em;}

  .header .home img                             {display: block; height: 1.4em;}  

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

  .header #navicon span                         {display: block; width: calc(100% - 0.8em); height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 0.4em; transition: .15s ease-in-out;}

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

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

  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}

  .header #navicon:hover span                   {background: var(--color1);}

  .header .logo                                 {width: min(17em, calc(11em + 10vw)); order: 1;}

  .header .collapse                             {width: 100%; height: 100svh; overflow-y: auto; position: fixed; left: -9999px; top: 0; padding-top: 5rem; box-sizing: border-box; opacity: 0; transform: scale(1.15); transition: opacity .5s ease-in-out, transform .5s ease-in-out;}

  .header .collapse .overflow                   {min-height: calc(100% - 8rem); width: 70%; flex-direction: column; align-items: center; gap: 3.5em; position: relative; margin: 4rem 15%; box-sizing: border-box; transition: .35s ease-in-out;}

  .header nav                                   {flex-grow: 2;}

  .header nav > ul                              {flex-direction: column; gap: 1em 0;}

  .header nav > ul > li > a                     {font-size: 1.35em;}

  .header .phone                                {background: var(--black-30); padding: 0.75em 1.4em !important;}

  .header .lang                                 {display: flex; order: -1; font-size: 0.8em; margin-top: -0.45rem; margin-right: -0.6em;}

  .header .lang .trigger                        {display: none;}

  .header .lang ul                              {width: 100%; align-items: center;}

  .header .lang ul li.sel a                     {background: var(--white-30);}

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

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

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

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

  .header.show #navicon div                     {display: block;}

  .header.show .collapse                        {left: 0; opacity: 1; transform: scale(1);}

  .header.show.hide .collapse                   {opacity: 0; transform: scale(1.15);}

  .header :is(.desktop-only)                    {display: none;}                 

  }



.hp .footer .bg-glow                            {display: none;}                   



.footer                                         {display: block; width: 100%; position: relative; z-index: 10; padding-bottom: 0 !important; overflow: hidden;}

.footer .quick-contacts .button                 {width: 16rem; font-size: 0.95em; padding-block: 1.2em 1.15em;}

.footer .contacts                               {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(0.6 * var(--section-padding)) 0; font-size: 1.3em; margin-block: var(--gap2);}

.footer .contacts > div                         {display: flex; width: 16rem; flex-direction: column; align-items: center; gap: 0.2em; padding-inline: 0.3em; box-sizing: border-box;}

.footer .contacts .logo                         {display: block; height: 1.2em;}

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

.footer .contacts h3                            {font-size: 0.95em; color: var(--color1); margin-block: 0.75em 0.5em;}

.footer .contacts p                             {font-size: 0.7em;}

.footer .box                                    {display: flex; width: 100%; max-width: 48rem; flex-direction: column; align-items: center; gap: var(--gap2); background: var(--white-075); backdrop-filter: blur(1px); padding: 3em; box-sizing: border-box; border-radius: var(--border-radius1);}

.footer .soc                                    {display: flex; gap: 0.4em;}

.footer .soc .icon                              {font-size: 1.8em;}

.footer .web                                    {display: block; width: 100%; text-align: center;}

.footer .web .link                              {display: inline-block; font-size: 1.4em; margin-top: 0.15em;}

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

.footer .logos a                                {display: block; height: 2.6em; transition: .15s ease-in-out;}

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

.footer .logos a:hover                          {opacity: 0.8;}

.footer .links                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 1.2em; padding: 0 2em 1.5em; box-sizing: border-box;}

.footer .links li                               {font-size: 0.8em; color: var(--color0b);}

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

.footer .links li a:hover                       {color: white; text-decoration-color: transparent;}

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

  .footer .contacts                             {flex-direction: row; align-items: stretch;}

  .footer .contacts > div:first-child           {border-right: solid 0.07em var(--white-15);}

  }



.main                                           {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; flex-grow: 2; overflow: hidden; transition: .15s ease-in-out;}



.icon                                           {display: flex; width: 1.12em; height: 1.12em; justify-content: center; align-items: center; background: var(--color1); border-radius: 0.2em; transition: .15s ease-in-out;}

.icon img                                       {display: block; height: 60%;}

.icon[href]:hover                               {background: var(--color1b);}



.section                                        {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2); position: relative; padding-top: var(--section-padding); overflow: hidden; container-type: inline-size;}

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

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

.section > .bg-glow                             {position: absolute; left: 0; top: 0;}

.section:has(+ .section .bg-glow)               {padding-bottom: var(--section-padding);}



.main p, .main li                               {display: block; width: 100%; line-height: var(--line-height1); box-sizing: border-box; position: relative;}

.main p a, .main ul:not([class]) li a           {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.main p a:hover, .main ul:not([class]) li a:hover

                                                {opacity: 0.8; text-decoration-color: transparent;}

.main strong                                    {color: white; font-weight: 400;}

.main em                                        {font-style: italic;}



h1, h2, h3                                      {display: block; width: 100%; color: inherit; line-height: var(--line-height2); box-sizing: border-box;}

h1                                              {font-size: min(calc(2em + 4vw), 2.6em); color: var(--color1);}

h2                                              {font-size: min(calc(1em + 4vw), 2.6em); margin-bottom: var(--gap1);}

h3                                              {font-size: min(calc(1em + 4vw), 1.45em);}



h2 + .subheadline                               {font-size: 1.15em; color: var(--color1); font-weight: 400; margin-block: calc(-1.3 * var(--gap1)) var(--gap1);}



.content                                        {display: flex; width: 100%; max-width: 48rem; flex-direction: column; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0; 0; box-sizing: border-box; position: relative; z-index: 2;}

.content > .icon                                {font-size: 3em; margin-bottom: -0.3em;}

.content > h2                                   {text-transform: uppercase;}

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

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

  .content:has(.cols)                           {max-width: var(--wrapper-max);}

  .content .cols                                {text-align: left; column-count: 2; column-gap: 5%;}

  }



.shortened                                      {display: grid; width: 100%; grid-template-rows: 12rem 0fr; overflow: hidden; position: relative; transition: grid-template-rows 0.4s linear;}

.shortened .inner                               {display: block; width: 100%; grid-row: 1 / -1; min-height: 0; overflow: hidden; padding-bottom: 3rem; box-sizing: border-box; transition: 0.4s linear;

                                                 -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 top, transparent, black 80%);                                           

                                                 -webkit-mask-image: linear-gradient(to top, transparent, black 80%);

                                                }

.shortened > a                                  {width: 12em; font-size: 0.65em; padding-block: 1em 0.95em; position: absolute; left: calc(50% - 6em); bottom: 0.5em; z-index: 2; grid-row: 2;}

.shortened.is-open                              {grid-template-rows: 12rem 1fr;}

.shortened.is-open .inner                       {-webkit-mask-size: 100% 200%; mask-size: 100% 200%;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.5em; font-size: 0.8em; font-weight: 300; line-height: 1; color: inherit; text-transform: uppercase; text-decoration: none; background: none; position: relative; outline: none; padding: 1em 2.2em 0.95em; backdrop-filter: blur(1px); border-radius: 0.4em; border: solid 0.08em white; cursor: pointer; box-sizing: border-box; white-space: nowrap; font-family: var(--font1-regular); transition: .15s ease-in-out;}

.button .icon                                   {font-size: 1.1em; position: relative; top: -0.02em;}

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



.link                                           {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}

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



.flex                                           {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5em; flex-wrap: wrap;}



.lines                                          {display: flex; width: 100%; justify-content: center;}

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

  .lines                                        {padding-inline: calc(var(--line-width) + 0.3em); box-sizing: border-box; --line-width: 2.5em;}

  .lines span                                   {display: block; position: relative;}

  .lines span:before,

  .lines span:after                             {display: block; width: var(--line-width); height: 0.06em; background-image: linear-gradient(to left, var(--color1), transparent); position: absolute; top: 0.56em; content: "";}

  .lines span:before                            {right: calc(100% + 0.3em);}

  .lines span:after                             {left: calc(100% + 0.3em); transform: rotate(180deg);}

  }

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

  .lines                                        {padding-bottom: 0.5em; position: relative;}

  .lines:after                                  {display: block; width: 90%; height: 0.05em; background-image: linear-gradient(to right, transparent, var(--color1), transparent); position: absolute; position: absolute; left: 5%; bottom: 0; content: "";}

  }



.mask-sides                                     {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;

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

                                                }



.bg-glow                                        {display: block; width: 100%; position: relative; --bg-glow: min(90rem, calc(10rem + 80vw)); opacity: 0.15;}

.bg-glow .mask-sides                            {display: block; width: var(--bg-glow); height: calc(0.5 * var(--bg-glow)); position: absolute; top: 0; left: calc(50% - 0.5 * var(--bg-glow));}

.bg-glow .mask-sides div                        {display: block; width: 100%; aspect-ratio: 1; background-image: radial-gradient(circle closest-side at center, white, transparent); position: absolute; top: calc(-0.5 * var(--bg-glow)); left: 0; transform: scaleX(200%) scaleY(80%);}



.hp .anim                                       {opacity: 0; transform: translate(0, 3em); transition: 1.2s ease-in-out; transition-delay: 0.1s;}

.hp .anim.zoomout                               {opacity: 0; transform: scale(1.2);}

.hp .anim.play                                  {opacity: 1; transform: translate(0) scale(1) !important;}



.hero                                           {padding-block: calc(var(--section-padding) + var(--header)) 0 !important; overflow: visible;}

.hero:before                                    {display: block; width: 100%; height: calc(2 * var(--header)); background-image: linear-gradient(to bottom, var(--color0), transparent); position: absolute; left: 0; top: 0; z-index: 1; content: ""; transition: 1s ease-in-out;}

.hero .bg                                       {display: flex; width: 100%; height: 80%; justify-content: center; overflow: hidden; position: absolute; inset: 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 top, transparent, black 60%);                                           

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

}

.hero .bg div                                   {display: block; width: 100%; max-width: 90rem;}

.hero .bg div picture                           {display: block; width: 100%; height: 100%;}

.hero .bg div picture img                       {display: block; width: 100%; height: 100%; object-fit: cover;}

.hero .content                                  {margin-top: 13rem;}

.hero :is(h1, p)                                {text-shadow: 0 0 0.6em var(--color0), 0 0 0.8em var(--color0);}                                

.hero h1                                        {max-width: 18em; font-size: min(calc(0.8em + 4vw), 2.6em); padding-bottom: 0.5em; position: relative;}

.hero h1:after                                  {display: block; width: 90%; height: 0.05em; background-image: linear-gradient(to right, transparent, var(--color1), transparent); position: absolute; position: absolute; left: 5%; bottom: 0; content: "";}

.hero .bg-glow                                  {margin-top: calc(-1 * var(--gap2));}

.hero p                                         {max-width: 30em; margin-top: -0.5em;}

.hero .buttons .button                          {width: 12em;}

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

  .hero .bg div                                 {-webkit-mask: none; mask: none;}

  }



/*

.img-border:after                               {display: block; position: absolute; inset: 0; z-index: 3; border: solid 0.8em var(--white-30); border-radius: var(--border-radius1); box-sizing: border-box; content: "";}

*/



.img                                            {display: block; width: 100%; aspect-ratio: 16/9; padding-top: 56.25%; box-sizing: border-box; position: relative; border-radius: var(--border-radius1); overflow: hidden; cursor: pointer; transition: .35s ease-in-out;}

.img span                                       {display: block; width: 100%; border-radius: var(--border-radius1); box-shadow: var(--box-shadow1); position: absolute; inset: 0;}

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

.img:hover                                      {opacity: 0.8;}



.swiper-slide                                   {display: flex; height: auto; box-sizing: border-box; z-index: 3; flex-shrink: 0; transition: .35s ease-in-out;}



.swiper-button                                  {width: var(--swiper-button-width); height: var(--swiper-button-height); position: relative; inset: auto; z-index: 2; margin: 0; padding: 0.6em; top: calc(50% - 3em);} 

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

.swiper-button img                              {display: block; height: 1em;}

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

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



.swiper-pagination                              {display: flex; width: 100%; justify-content: center; gap: 0.4em; margin-top: var(--gap2); position: relative; inset: auto;}

.swiper-pagination-bullet                       {width: 1.2em; height: 0.3em; border-radius: 0.15em; background: var(--white-15); opacity: 1; margin: 0 !important;}

.swiper-pagination-bullet:hover                 {background: var(--white-30);}

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



.image:has(+ .content > h2)                     {margin-bottom: calc(var(--section-padding) - var(--gap2));}

.image                                          {display: flex; width: 100%; justify-content: center; align-items: center; position: relative; overflow: hidden;}

.image .inner                                   {display: block; width: calc(100% - 2 * var(--swiper-button-width)); box-sizing: border-box; position: relative; z-index: 5; margin-inline: -0.1em; border-radius: var(--border-radius1); box-shadow: var(--box-shadow1);}

.image .preview                                 {display: block; width: 100%; position: relative; background: white; border-radius: var(--border-radius1);}

.image .preview .swiper-slide:not(.swiper-slide-active)       {opacity: 0 !important;}

.image:has(.thumbs) .preview:before             {display: block; width: 100%; height: 10rem; opacity: 0.65; background-image: linear-gradient(to top, black, transparent); position: absolute; left: 0; bottom: 0; z-index: 2; content: "";}

.image .thumbs                                  {display: flex; width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 6;}

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

  .image                                        {width: calc(100% + 2 * var(--swiper-button-width)); margin-inline: calc(-1 * var(--swiper-button-width));}

  .image .thumbs .swiper-wrapper                {width: calc(100% - 6em); gap: var(--gap1); margin: 0 2.5em 2.5em;}

  .image .thumbs .swiper-slide                  {width: auto; flex-grow: 2; flex-shrink: 0; padding: 0.2em; container-type: inline-size; cursor: pointer;}  

  .image .thumbs .swiper-slide p                {text-align: left; font-size: clamp(0.8em, 10cqw, 1.15em); color: var(--white-60); padding-bottom: 0.5em; position: relative; overflow: hidden; box-sizing: border-box; transition: .35s ease-in-out;}

  .image .thumbs .swiper-slide p:after          {display: block; width: 200%; height: 0.1em; background-image: linear-gradient(to right, var(--color1) 50%, var(--white-30) 50%); position: absolute; left: -100%; bottom: 0; content: ""; transition: .35s ease-in-out;}

  .image .thumbs .swiper-slide-thumb-active p   {color: white;}

  .image .thumbs .swiper-slide-thumb-active p:after

                                                {left: 0;}

  }

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

  .image .thumbs .swiper-slide                  {padding: 0 min(2em, calc(0.2em + 4vw)) min(2em, calc(0.2em + 4vw));}

  .image .thumbs .swiper-slide p                {font-size: 0.9em;}

  }

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

  .image:not(:has(.swiper-button-lock))         {padding-bottom: calc(1em + var(--swiper-button-width));}

  .image .inner                                 {width: 100%; margin: 0;}

  .image .swiper-button                         {width: var(--swiper-button-height); height: var(--swiper-button-width); position: absolute; top: auto; bottom: 0;}

  .image .swiper-button-prev                    {right: 51%;}

  .image .swiper-button-next                    {left: 51%;}

  }



.progress                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) 6%; margin-top: var(--gap2);}

.progress > div                                 {display: flex; width: 47%; flex-direction: column; justify-content: flex-end; opacity: 0.5;}

.progress > div p                               {text-align: left; font-size: 1.1em; line-height: var(--line-height2); padding-bottom: 0.8em; margin-bottom: 0.8em; border-bottom: solid 0.07em white; box-sizing: border-box;}

.progress > div span                            {text-align: left; font-size: 0.85em; box-sizing: border-box; position: relative;}

.progress > div.done                            {opacity: 1;}

.progress > div.done p                          {border-color: var(--color1);}

.progress > div.done span                       {padding-left: 1.6em;}

.progress > div.done span:before                {display: block; width: 1em; height: 1em; background: url("images/icons/check-color0.svg") no-repeat center center, var(--color1); background-size: contain; border-radius: 0.15em; position: absolute; left: 0; top: 0.2em; content: "";}

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

  .progress                                     {column-gap: 5%;}

  .progress > div                               {width: 16%;}

  }

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

  .progress                                     {column-gap: 3.33%;}

  .progress > div                               {width: 30%;}

  }



.units-selection                                {display: flex; width: 100%; flex-direction: column; gap: var(--gap2);}



.visuals                                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1rem 0; margin-block: var(--gap2) calc(-1 * var(--gap3));}

.visuals > div                                  {display: block; width: 100%; position: relative;}

.visuals > div img                              {display: block; width: 100%; height: auto;}

.visuals > div svg                              {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: all;}

.visuals > div a .path                          {fill: var(--color1); fill-opacity: 0; stroke: var(--color1); stroke-width: 0.25em; stroke-opacity: 0; transition: .15s ease-in-out;}

.visuals > div a .label                         {fill: var(--color0b);  stroke: none; transition: .15s ease-in-out;}

.visuals > div a .num                           {fill: var(--color0); stroke: none; transition: .15s ease-in-out;}

.visuals > div a:hover .path,

.visuals > div a.hover .path                    {fill-opacity: 0.15; stroke-opacity: 0.4;}

.visuals > div a:hover .label,

.visuals > div a.hover .label,

.visuals > div a.emp .label                     {fill: var(--color1);}

.visuals > div a.emp .path                      {fill-opacity: 0.3; stroke-opacity: 1;}

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

  .visuals                                      {width: 110%; margin-inline: -5%;

                                                -webkit-mask-image: linear-gradient(black 60%, transparent 100%); mask-image: linear-gradient(black 60%, transparent 100%);

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

                                                }

  .visuals > div                                {width: 48%;}

  }

 

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



.units > div                                      {display: flex; width: 100%; padding: 2em !important; position: relative; padding: 2em min(2.8em, calc(0.8em + 3vw)) 1.2em; border-radius: var(--border-radius1) var(--border-radius1) 0 0; box-sizing: border-box;}

.units > div .bg                                  {position: absolute; inset: 3em 0 0; transition: .15s ease-in-out;}

.units > div .inner                               {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1) 0; flex-wrap: wrap;}

.units > div span                                 {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; flex-shrink: 0; position: relative;}

.units > div .title                               {width: 5.4em; align-items: center; text-align: center; font-size: 1.25em; color: var(--color0); background: white; padding: 0.15em 0.4em; border-radius: 0.4em; font-family: var(--font1-regular); font-weight: 300; transition: .15s ease-in-out;}

.units > div .info1                               {display: flex; width: 100%; justify-content: center; font-size: 1.15em; background-image: linear-gradient(to right, transparent, var(--white-15), transparent); padding-block: 0.5em 0.45em;}

.units > div .info1 span:not(:first-child)        {display: block; padding-left: 1em;}

.units > div .info1 span:not(:first-child):before {display: block; width: 0.08em; height: 0.9em; background: var(--color1); position: absolute; left: 0.45em; top: 0.32em; content: "";}

.units > div .info2                               {display: flex; width: 100%; justify-content: center; padding-block: 0.8em 0.75em; flex-grow: 2;}

.units > div .info2 span                          {width: 33.33%; max-width: 8em;}

.units > div .info2 span .label                   {display: block; font-size: 0.75em; color: var(--color1); font-weight: 300; font-family: var(--font1-regular);}

.units > div .button                              {padding: 0.9em 3em 0.85em;}

.units > div .price                               {width: 100%; align-items: center; text-align: center; font-size: 1.3em;}

.units:has(.emp) > div:not(.emp) .bg              {opacity: 0.25;}

.units > div.emp .title                           {background: var(--color1);}

.units > div:nth-child(4) .title                  {display: block; font-size: 1em; width: 9.4em; line-height: 1.3; padding-block: 0.45em;}

.units > div:nth-child(4) .info2 span             {width: 50%;}

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

  .units                                          {width: 120%; margin-inline: -10%;}

  }

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

  .units                                          {width: 94vw; margin-inline: calc(50% - 47vw);}

  }

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

  .units > div                                    {width: 24%;}

  }

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

  .units > div                                    {width: 48%;}

  }





/*

.units > div                                      {display: block; width: 100%; padding: 2em !important; position: relative; padding: 2em min(2.8em, calc(0.8em + 3vw)) 1.2em; border-radius: var(--border-radius1) var(--border-radius1) 0 0; box-sizing: border-box;}

.units > div .bg                                  {position: absolute; inset: 3em 0 0; transition: .15s ease-in-out;}

.units > div .inner                               {display: flex; width: 100%; justify-content: center; align-items: flex-start; gap: var(--gap1) 0; flex-wrap: wrap;}

.units > div span                                 {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; flex-shrink: 0; position: relative;}

.units > div .info1                               {display: flex; width: 100%; justify-content: center; font-size: 1.15em; background-image: linear-gradient(to right, transparent, var(--white-15), transparent); padding-block: 0.5em 0.45em;}

.units > div .info1 span:last-child               {display: block; padding-left: 1em;}

.units > div .info1 span:last-child:before        {display: block; width: 0.08em; height: 0.9em; background: var(--color1); position: absolute; left: 0.45em; top: 0.32em; content: "";}

.units > div .info2                               {display: flex; width: 100%; justify-content: center; padding-block: 0.8em 0.75em;}

.units > div .info2 span                          {width: 33.33%; max-width: 8em;}

.units > div .info2 span .label                   {display: block; font-size: 0.75em; color: var(--color1); font-weight: 300; font-family: var(--font1-regular);}

.units > div .button                              {padding: 0.9em 3em 0.85em;}

.units > div .price                               {width: 100%; align-items: center; text-align: center; font-size: 1.3em;}



.units > div:nth-child(-n+3) .inner               {justify-content: center;}

.units > div:nth-child(-n+3) .title               {width: 5.4em; align-items: center; text-align: center; font-size: 1.25em; color: var(--color0); background: white; padding: 0.15em 0.4em; border-radius: 0.4em; font-family: var(--font1-regular); font-weight: 300; transition: .15s ease-in-out;}

.units > div:nth-child(4) .title span             {display: block; padding-left: 1em;}

.units > div:nth-child(4) .title span:before      {display: block; width: 0.08em; height: 0.9em; background: var(--color1); position: absolute; left: 0.45em; top: 0.32em; content: "";}



.units:has(.emp) > div:not(.emp):nth-child(-n+3) .bg

                                                  {opacity: 0.25;}

.units > div.emp:nth-child(-n+3) .title           {background: var(--color1);}  

  

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

  .units > div:nth-child(-n+3)                    {width: 32%;}

  .units > div:nth-child(4) .inner                {justify-content: space-between; align-items: center; column-gap: var(--gap1);}

  .units > div:nth-child(4) span                  {flex-direction: row; max-width: unset;}

  .units > div:nth-child(4) .info2                {width: auto; gap: 1.2em; padding: 0;}

  .units > div:nth-child(4) .info2 span           {width: auto; flex-direction: row; gap: 0.3em;}

  .units > div:nth-child(4) .info2 span .label    {font-size: 1em;}  

  .units > div:nth-child(4) .button               {font-size: 0.7em; order: 10; padding: 0.7em 1em 0.65em; position: relative; top: -0.15em;}

  .units > div:nth-child(4) .price                {width: auto; text-align: right; font-size: 1em;}  

  }

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

  .units > div:nth-child(4) .title                {flex-direction: row; font-size: 1.25em;}

  }

*/



.wrapper:has(.standards)                        {margin-top: var(--section-padding);}



.standards                                      {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: var(--gap1);}

.standards a                                    {display: block; width: 13%; aspect-ratio: 3/4; border-radius: var(--border-radius1); overflow: hidden; transition: .3s ease-in-out;}

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

.standards a:hover                              {opacity: 0.8;}

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

  .standards                                    {width: var(--wrapper-wide-max); margin-inline: calc(50% - 0.5 * var(--wrapper-wide-max)); justify-content: space-between;}

  }

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

  .standards                                    {width: 100vw; margin-inline: calc(50% - 50vw); justify-content: space-between;}

  .standards a:first-child                      {border-top-left-radius: 0; border-bottom-left-radius: 0;}  

  .standards a:last-child                       {border-top-right-radius: 0; border-bottom-right-radius: 0;}  

  }

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

  .standards                                    {justify-content: center; gap: var(--gap1) 2%;}

  .standards a                                  {width: 22%;}

  }



.box-gradient                                   {display: flex; background-image: linear-gradient(to bottom, var(--white-15), transparent); padding: 1.2em min(2.8em, calc(0.8em + 3vw)); border-radius: var(--border-radius1) var(--border-radius1) 0 0; box-sizing: border-box;}



.address                                        {display: flex; align-items: center; gap: 0.4em; font-size: min(1.2em, calc(0.2em + 3vw));}

.address img                                    {display: block; height: 1em; position: relative; top: -0.025em;}

.address a                                      {margin-left: 0.3em;}



.infographics                                   {display: block; margin-top: var(--gap2);}

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

.infographics .swiper-slide                     {width: 50%; padding-inline: 0.45em; container-type: inline-size;}

.infographics .feature                          {display: flex; width: 100%; flex-direction: column; align-items: center; padding: 2em clamp(1.2em, 10cqw, 2em);}

.infographics .feature .icon                    {font-size: 4em; background: var(--white-15); border-radius: 100%;}

.infographics .feature span                     {display: block; text-align: center; font-size: 0.8em;}

.infographics .feature .title                   {font-size: 1.25em; margin-block: 0.45em 0.3em;}

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

  .infographics                                 {width: var(--wrapper-wide-max); margin-inline: calc(50% - 0.5 * var(--wrapper-wide-max));}

  }

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

  .infographics                                 {width: 100vw; margin-inline: calc(50% - 50vw); mask-image: none; -webkit-mask-image: none;}

  }

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

  .infographics .swiper-slide                   {width: 20%;}

  }

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

  .infographics .swiper-slide                   {width: 25%;}

  }

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

  .infographics .swiper-slide                   {width: 33.33%;}

  }



.logo-link                                      {display: flex; flex-direction: column; align-items: center; gap: 0.4em;}

.logo-link .logo                                {display: block; height: 2.6em; background: var(--color1); padding: 0.4em 1em; border-radius: var(--border-radius0); box-sizing: border-box; transition: .15s ease-in-out;}

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

.logo-link .logo:hover                          {background: var(--color1b);}

.logo-link .link                                {font-size: 1em;}



.hp .section:has(.financing)                    {padding-bottom: 0 !important;}



.financing                                      {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 3em 0;}

.financing > div                                {display: flex; width: 100%; max-width: 26rem; flex-direction: column; align-items: center; gap: var(--gap1); padding-inline: 1em; box-sizing: border-box; position: relative;}

.financing > div > span                         {display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; font-size: 1.5em; color: var(--color1); background: var(--white-15); margin-bottom: 0.4em; border-radius: 100%; box-sizing: border-box;}

.financing > div h3                             {display: block; font-size: 1.3em; color: white; font-weight: 400; font-family: var(--font2);}

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

  .financing                                    {width: 150%; margin-inline: -25%;}

  }

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

  .financing                                    {justify-content: space-between;}

  .financing > div                              {width: 33.33%; max-width: 100%;}

  .financing > div:not(:last-child):after       {display: block; width: calc(100% - 5.4em); height: 0.2em; background: var(--white-15); position: absolute; top: 1.75em; left: calc(50% + 2.7em); content: "";} 

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

  }



.gallery                                        {display: flex; width: 100%; flex-wrap: wrap; overflow: hidden;}

.gallery a                                      {display: block; width: 50%; aspect-ratio: 16/9; overflow: hidden;}

.gallery a img                                  {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;}

.gallery a:hover img                            {opacity: 0.8;}

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

  .gallery                                      {border-radius: var(--border-radius1);}

  }

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

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

  }

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

  .gallery a                                    {width: 33.33%;}

  }



.flat-card                                      {display: block; width: 100%; border-radius: var(--border-radius0); overflow: hidden; margin-top: calc(-1 * var(--gap2));}

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

.flat-card:hover img                            {opacity: 0.85;}



.content:has(h1 .flat-num)                      {margin-block: var(--gap2) calc(-1 * var(--gap2));}



.h1 .flat-num                                   {display: inline-block;}

.h1 .flat-num:before                            {display: inline-block; width: 0.17em; height: 0.17em; background: var(--color1b); border-radius: 100%; content: ""; margin-inline: 0.1em 0.25em; position: relative; top: -0.23em;}

.h1:has(+ .flat-info)                           {margin-bottom: calc(-1 * var(--gap1));}



.flat-info                                      {display: flex; width: 100%; justify-content: center;}

.flat-info li                                   {display: flex; width: auto; align-items: center; font-size: min(1.5em, calc(0.4em + 3vw));}

.flat-info li:not(:first-child):before          {display: block; width: 0.05em; height: 0.8em; background: white; margin-inline: 0.5em; position: relative; top: 0.04em; content: "";}



.section:has(.flat-info-table)                  {padding-top: var(--gap2);}

.flat-info-table                                {display: block; width: 100%; overflow: hidden; margin-top: var(--gap2);}

.flat-info-table .inner                         {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-block: -0.8em;}

.flat-info-table .inner > div                   {display: flex; width: 100%; padding-block: 0.8em; border-top: solid 1px var(--white-30); box-sizing: border-box;}

.flat-info-table span                           {display: block; width: 50%; text-align: left; box-sizing: border-box;}

.flat-info-table span:nth-child(1)              {padding-right: 1em;}

.flat-info-table span:nth-child(2)              {color: white; font-weight: 500;}

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

  .flat-info-table .inner > div                 {width: 47%;}

  }



.files                                          {display: flex; width: 100%; justify-content: center; gap: var(--gap1) var(--gap2); flex-wrap: wrap; font-size: 0.85em; margin-top: var(--gap2);}