.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.embedBlok {display: block; width: 100%;}

#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}
#in_hesloRequiredSecret {
    position: absolute;
    left: -9999em;
    top: 0;
}

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

.mce-content-body     {background-color:var(--color0d);}
input[type="hidden"]  {width:100%;}

@font-face {
    font-family: 'axiforma';
    src: url('axiforma/Axiforma-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'axiforma';
    src: url('axiforma/Axiforma-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'axiforma';
    src: url('axiforma/Axiforma-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'axiforma';
    src: url('axiforma/Axiforma-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

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

:root                                           {
                                                --font1:          "axiforma", sans-serif; /* 400, 600, 700, 800 */
                                                
                                                --color0:           #070024; /* rgb(7,0,36) */
                                                --color0b:          #29217e; /* rgb(41,33,126) */
                                                --color0c:          #4d3d6d;
                                                --color0d:          #0e0943;
                                                --color0e:          #c9b7eb; 
                                                --color1:           #00c8f8; /* rgb(0,200,248) */
                                                --color1b:          #27a0ee;
                                                --color1c:          #17d5eb;
                                                --color1d:          #12c8e8;
                                                --color2:           rgba(0,0,0,0.05);
                                                
                                                --header:             6.4rem;
                                                --header-padding:     20px;
                                                --wrapper-width:      min(100%, 90vw, 70rem);
                                                --button-height:      2.4rem;
                                                --button-height2:     2.8rem;
                                                --section-padding:    min(7rem, calc(1.2rem + 6vw));
                                                --border-radius1:     min(1.5rem, calc(0.6rem + 2vw));
                                                --box-shadow-size:    min(2.2em, calc(0.5em + 2vw));
                                                --box-shadow-color1:  0 0 var(--box-shadow-size) rgba(0,200,248,0.75);
                                                --gap1:               2rem;

                                                --form-items-gap:             1.4em;
                                                --form-item-height:           2.6em;
                                                --form-item-border:           solid 0.1em var(--color1);
                                                --form-item-padding:          0.9em;
                                                }
  @media screen and (min-width: 1081px)         {
  :root                                         {
                                                
                                                
                                                }                                              
  }
  @media screen and (max-width: 1080px)         {
  :root                                         {
                                                }                                                
  }
  
html                                            {display: bl; width: 100%; height: 100%; flex-direction: column; text-align: center; font-size: min(16px, calc(10px + 1vw)); color: white; font-weight: 400; line-height: 1.5; font-family: var(--font1); overflow-x: hidden; overflow-y: auto;}
body                                            {display: flex; width: 100%; height: auto; min-height: 100%; flex-direction: column; position: relative; overflow-x: hidden; overflow-y: auto;}
body.header-show :is(.main, .footer)            {opacity: 0.2; filter: blur(5px);}

.wrapper                                        {display: flex; width: var(--wrapper-width); justify-content: center; flex-wrap: wrap; gap: var(--gap1); margin-inline: auto; position: relative; box-sizing: border-box; z-index: 1;}
.wrapper.w2                                     {max-width: 50rem;}
.wrapper.w3                                     {max-width: 40rem;}

.background                                     {display: block; width: 100%; height: 100%; position: fixed; inset: 0; background: var(--color0d);}
.background .video                              {display: none; width: 100%; height: 100%; justify-content: center;}
.background .video video                        {display: block; width: 100%; height: 100%; object-fit: cover;}
  @media screen and (min-width: 769px)          {
  .background .video                            {display: flex;}
  }
  @media screen and (max-width: 768px)          {
  .background                                   {background: url("images/background/mobile.jpg") no-repeat center top; background-size: cover;}
  } 

.background2                                    {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.background2 span                               {display: block; width: 100%; opacity: 0.88; filter: saturate(2) brightness(0.6);}
.background2 span:nth-child(1)                  {height: 100vh; background-image: linear-gradient(to bottom, var(--color0b), var(--color0));}
.background2 span:nth-child(2)                  {height: calc(100% - 100vh); background: var(--color0);}

strong                                          {font-weight: 800;}
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;}

.glow-effect                                    {position: relative;}
.glow-effect:after                              {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; opacity: 0; position: absolute; inset: -0.3em; z-index: -2; content: ""; border-radius: calc(0.5 * (1em + var(--button-height))); transition: .15s ease-in-out; border-radius: calc(var(--swiper-button) / 2) 0 0 calc(var(--swiper-button) / 2);}
.glow-effect:hover:after                        {opacity: 0.7; filter: blur(0.7em); animation: glow-hover 8s linear infinite;}
@keyframes glow-hover                           {
                                                0%    {background-position: 0%;}
                                                100%  {background-position: 400%;} 
}

.header                                         {display: flex; width: 100%; height: var(--header); justify-content: center; padding-block: var(--header-padding); position: fixed; left: 0; top: 0; padding-block: 1em; box-sizing: border-box; z-index: 1000; transition: .3s ease-in-out;}
.header .inner                                  {display: block; height: 100%; position: relative; box-sizing: border-box; backdrop-filter: blur(4px); transition: .15s ease-in-out;}
.header .inner:before                           {display: block; background: rgba(7,0,36,0.65); position: absolute; inset: 0; content: ""; box-shadow: var(--box-shadow-color1); transition: .15s ease-in-out;}
.header .inner, .header .inner:before           {border-radius: calc(0.5 * (var(--header) - 2 * var(--header-padding)));}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center;}
.header .logo                                   {display: flex; width: 8.6em; margin-left: 0.2rem; 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 nav                                     {display: block; box-sizing: border-box;}
.header nav ul                                  {display: flex; width: 100%; align-items: center; flex-wrap: wrap;}
.header nav ul li                               {display: flex; transition: .15s ease-in-out;}
.header nav ul li a:not(.button)                {display: flex; align-items: center; color: white; font-weight: 600; line-height: 1; position: relative; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav ul li a:not(.button):hover,
.header nav ul li a:not(.button).sel            {color: var(--color1);}
.header nav ul li:nth-child(4) a:before         {display: block; width: 0.75em; height: 1em; background: url("images/icon-flash-color1.svg") no-repeat center center; background-size: contain; position: absolute; top: calc(50% - 0.58em); content: "";}
.header-elements                                {display: flex; align-items: center; gap: 1rem; position: relative; z-index: 2;}
.header-elements .lang                          {display: block; width: calc(0.8em + var(--currecny-size)); height: calc(2 * var(--currecny-size)); margin-inline: -0.4em; --currecny-size: 1.8em; overflow: hidden; position: relative; left: 0; transition: .15s ease-in-out;}
.header-elements .lang ul                       {display: flex; width: 5.4em; flex-wrap: wrap; overflow: hidden;}
.header-elements .lang ul li                    {display: block; width: 100%; height: calc(2 * var(--currecny-size)); box-sizing: border-box; position: relative; order: 1; transition: .15s ease-in-out;}
.header-elements .lang ul li a                  {display: flex; width: 100%; height: 100%; align-items: center; gap: 0.3em; font-size: 1em; font-weight: 400; color: white; background: var(--color0); padding-inline: 0.4em; border-radius: calc(1 * var(--currecny-size)); border: solid 0.07em transparent; box-sizing: border-box; transition: .15s ease-in-out;}
.header-elements .lang ul li a img              {display: block; width: var(--currecny-size); height: var(--currecny-size); padding: 0.3em; box-sizing: border-box; cursor: pointer;}
.header-elements .lang ul li a span             {font-size: 0.9em; opacity: 0.7; padding-left: 0.05em; box-sizing: border-box; transition: .15s ease-in-out;}
.header-elements .lang ul li a:hover span       {opacity: 1;}
.header-elements .lang ul li.sel                {width: var(--currecny-height); order: 0;}
.header-elements .lang ul li.sel a              {background: none; border-color: transparent;}
.header-elements .lang ul li.sel a:hover        {background: none; border-color: transparent;}
.header-elements .lang ul li.sel a span         {display: none;}
.header-elements .lang ul li:not(.sel)          {opacity: 0;}
.header-elements .lang.hover                    {overflow: visible;}
.header-elements .lang.hover ul li              {opacity: 1;}         
.header.scroll-down                             {top: calc(0px - var(--header));}
  @media screen and (min-width: 1081px)         {
  .header .inner                                {width: calc(var(--wrapper-width) + 1.8rem); padding: 0 1.5rem;}
  .header .collapse                             {position: absolute; inset: 0;}
  .header .collapse :is(.overflow, nav, nav ul, nav ul li, nav ul li a:not(.button))
                                                {height: 100%;}
  .header nav                                   {width: 100%;}
  .header nav ul                                {justify-content: center;}
  .header nav ul li a                           {padding: 0.08em min(1.4em, 1.5vw) 0;}
  .header nav ul li:nth-child(1),
  .header nav ul li:nth-child(9)                {display: none}
  .header nav ul li:nth-child(4) a              {padding-left: 2.1em;}
  .header nav ul li:nth-child(4) a:before       {left: 1.1em;}
  .header-elements .desktop-only                {display: flex; flex-wrap: wrap; gap: 1rem;}
  .header-elements .btn-login                   {padding: 0; font-weight: 600;}
  .header :is(#navicon, .mobile-only)           {display: none;}                 
  }
  @media screen and (max-width: 1080px)         {
  .header .inner                                {width: var(--wrapper-width); padding: 0 1.35rem;}
  .header #navicon                              {order: 2; display: block; width: 2em; height: 1.8em; cursor: pointer; position: relative; z-index: 10;}
  .header #navicon span                         {display: block; width: calc(100% - 0.8em); height: 0.14em; 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.07em);}
  .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                                 {order: 1;}
  .header .collapse                             {width: 100%; height: calc(100vh - var(--header)); overflow-y: auto; position: fixed; left: -9999px; top: calc(var(--header) - var(--header-padding)); 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: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; position: relative; padding: min(4rem, 8%); box-sizing: border-box; transition: .35s ease-in-out;}
  .header nav ul                                {justify-content: space-between; align-items: flex-start; align-content: flex-start; gap: 2em 0;}
  .header nav ul li                             {display: flex; width: 46%; position: relative;}
  .header nav ul li a:not(.button)              {text-align: left; font-size: 1.5em;}
  /* Remap 12.6.2026: 9 polozek (Kariera vyhozena z menu, Podpora mobile-only, Kontakt/Podpora prohozeny).
     Radky (2 sloupce): Domu|Cenik, Nas tym|Blog, Sluzby|Podpora, Boost|Kontakt, Reference */
  .header nav ul li:nth-child(1)                {order: 0;} /* Domu */
  .header nav ul li:nth-child(2)                {order: 2;} /* Náš tým */
  .header nav ul li:nth-child(3)                {order: 4;} /* Služby */
  .header nav ul li:nth-child(4)                {order: 6;} /* Boost */
  .header nav ul li:nth-child(5)                {order: 8;} /* Reference */
  .header nav ul li:nth-child(6)                {order: 1;} /* Cenik */
  .header nav ul li:nth-child(7)                {order: 3;} /* Blog */
  .header nav ul li:nth-child(8)                {order: 5;} /* Podpora */
  .header nav ul li:nth-child(9)                {order: 7; height: 1.5em; align-items: center;} /* Kontakt - vyska radku jako text, button se vycentruje pres (fix odskoku Reference, 12.6.2026) */
  .header nav ul li:nth-child(4) a              {padding-left: 1.1em;}
  .header nav ul li:nth-child(4) a:before       {left: 0;}
  .header-elements                              {order: 0;}
  .header.show:before                           {opacity: 0.85 !important;}
  .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;}                 
  }

.footer                                         {display: block; width: 100%; padding-block: min(3rem, calc(1rem + 4vw)); border-radius: var(--border-radius1) var(--border-radius1) 0 0; box-shadow: var(--box-shadow-color1); overflow: hidden; position: relative; z-index: 2;}
.footer:after                                   {display: block; width: 100%; height: 100%; background-image: linear-gradient(to bottom, var(--color0b), var(--color0)); opacity: 0.5; position: absolute; inset: 0; content: "";}
.footer .upper                                  {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.8em;}
.footer .upper h2                               {font-size: min(1.8rem, calc(1rem + 2vw));}
.footer .upper h2 svg                           {fill: white;}
.footer .bottom                                 {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2.5rem 0; margin-top: 2rem; padding-top: 2rem; border-top: solid 0.04em white;}
.footer .bottom > div                           {display: flex; flex-wrap: wrap; gap: 1rem 3rem;}
.footer .ppcone                                 {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap;}
.footer .ppcone .logo                           {display: block; width: 7.7em; margin-bottom: 1rem; cursor: pointer;}
.footer .ppcone .logo img                       {display: block; width: 100%;}
.footer .ppcone .copyright                      {display: flex; height: 2.1em; align-items: center; font-size: 0.9em; color: white; padding: 0.2em 0.9em 0; border-radius: 1.05em; border: solid 0.1em var(--color0c); box-sizing: border-box; position: relative; left: -0.12em;}
.footer .lang                                   {display: block;}
.footer .lang > div                             {display: flex; flex-wrap: wrap; gap: 0.15em; position: relative; left: -0.15em;}
.footer .lang > div a                           {display: flex; height: 1.6em; align-items: center; gap: 0.5em; padding: 0.2em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.footer .lang > div a img                       {display: block; width: auto; height: 100%;}
.footer .lang > div a span                      {display: block; color: white; position: relative; top: 0.135em;}
.footer .lang > div a:hover                     {opacity: 0.85;}
.footer .made-in                                {display: block; font-size: 0.9em;}
.footer .made-in img                            {display: inline-block; height: 0.9em; position: relative; top: 0.05em;}
.footer .links                                  {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.55rem;}
.footer .links li                               {display: block;}
.footer .links li a                             {display: inline-block; color: white; transition: .15s ease-in-out;}
.footer .links li a:hover                       {color: var(--color1);}
.footer .bottom > div:last-child                {flex-direction: column; align-items: flex-start;}
.footer .evaluation                             {display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.4rem;}
.footer .evaluation .title                      {display: block; width: 100%; text-align: left; font-size: 0.9em; font-weight: 600;}
.footer .evaluation > a                         {display: flex; align-items: center; gap: 0.5em; transition: .15s ease-in-out;}
.footer .evaluation > a .icon                   {display: block; width: 1em; height: 1em;}
.footer .evaluation > a .stars                  {display: block; height: 0.88em; width: auto; position: relative; top: -0.05em;}
.footer .evaluation > a span                    {display: block; font-size: 0.8em; color: white;}
.footer .evaluation > a:hover                   {opacity: 0.85;}
.footer .certificates                           {display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.8rem;}
.footer .certificates a                         {display: block; height: 1.45em; width: auto;}
.footer .certificates a img                     {display: block; height: 100%; width: auto;}
  @media screen and (min-width: 1281px)         {
  .footer .upper                                {justify-content: space-between;}
  .footer .upper h2                             {width: auto; text-align: left;}
  }
  @media screen and (min-width: 769px)          {
  .footer .bottom > div:nth-of-type(1)          {flex-direction: column; align-items: flex-start;}
  .footer .lang                                 {font-size: 0.9em;}
  .footer .lang > div a span.mobile-only        {display: none;}
  .footer .bottom > div:has(.links)             {gap: 1rem min(5rem, 4vw);}
  .footer .links li                             {font-size: 0.9em;}
  }
  @media screen and (min-width: 769px) and (max-width: 960px){
  .footer                                       {font-size: 0.9em;}
  }
  @media screen and (max-width: 768px)          {
  .footer .bottom                               {justify-content: center;}
  .footer .bottom > div                         {width: 100%; justify-content: center; column-gap: 5rem; position: relative;}
  .footer .bottom > div:nth-of-type(1)          {font-size: 0.9em;}
  .footer .links                                {font-size: 1.15em;}
  .footer .bottom > div > *                     {width: 8rem;}
  .footer .ppcone                               {width: 100%;}
  .footer .ppcone .logo                         {margin-bottom: 1rem;}
  .footer .lang                                 {margin-top: 2.1rem;}
  .footer .lang > div                           {gap: 0.3em;}
  .footer .lang > div a                         {height: 1.8em;}
  .footer .lang > div a span.desktop-only,
  .footer .made-in,
  .footer :is(.evaluation, .links:last-child)   {display: none;}
  .footer .bottom .certificates                 {width: 100%; justify-content: center; column-gap: 5.5rem; margin-top: -0.3rem;}
  .footer .bottom .certificates a               {width: 7.5rem; height: 1.8em;}
  }

.contacts                                       {display: flex; width: 100%; justify-content: space-around; flex-wrap: wrap; margin-bottom: 3rem;}
.contacts > div                                 {display: block;}
.contacts > div > span                          {display: block; font-size: 1em; color: white;}
.contacts .icon                                 {display: flex; align-items: center; gap: 0.55em; font-size: 1.1em; color: white; font-weight: 600; margin-block: 0.1em; box-sizing: border-box;}
.contacts .icon span                            {display: block; width: 1.1em; height: 1.1em; padding: 0.1em; border-radius: 0.2em; border: solid 0.11em white; box-sizing: border-box; transform: rotate(45deg); transition: .15s ease-in-out;}                       
.contacts .icon span svg                        {display: block; width: 100%; height: 100%; fill: white; transform: rotate(-45deg);}
.contacts .soc                                  {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;}
.contacts .soc div                              {display: block;}
.contacts .soc div .icon                        {font-size: 1.1em; font-weight: 600; text-decoration: underline; text-decoration-color: transparent;}
.contacts .soc div .icon:hover                  {text-decoration-color: white;}
.contacts .parking                              {gap: 1em; font-size: 0.7em; padding: 0.3em 0 0 0.3em; margin-top: 0.8em;}
.contacts .parking span                         {width: 1.9em; height: 1.9em; padding: 0.25em;}                  
  @media screen and (min-width: 1081px)         {
  .contacts > div:nth-child(1)                  {width: 12em;}
  .contacts > div:nth-child(2)                  {width: 16em;}
  .contacts > div:nth-child(3)                  {width: 13em;}
  .contacts > div *                             {text-align: left;}
  }
  @media screen and (max-width: 1080px)         {
  .contacts                                     {gap: 1.5rem 0;}
  .contacts .soc                                {flex-direction: row; width: 100%; justify-content: center; align-items: center; gap: 0.3em 1.5em;}
  .contacts > div:nth-child(n+2)                {width: 100%;}
  .contacts .parking                            {display: block; width: 100%; text-align: center;}
  .contacts .parking span                       {margin: 0 auto 0.5em;}
  }

.footer .bottom-links                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em 1.2em;}
.footer .bottom-links li a                      {font-size: 0.85rem; color: var(--color1b); text-decoration: underline; transition: .15s ease-in-out;}
.footer .bottom-links li a:hover                {text-decoration-color: transparent; color: white;}

.main                                           {display: flex; width: 100%; flex-wrap: wrap; flex-grow: 3; transition: .15s ease-in-out;}
.main > div                                     {display: block; width: 100%;}

h1, h2, h3, .h2                                 {display: block; width: 100%; text-align: center; color: white; font-weight: 800; line-height: 1.3; text-wrap: balance; position: relative;}
h1, h2, .h2                                     {font-size: min(2.4rem, calc(0.8rem + 4vw));}
h3                                              {font-size: min(2rem, calc(1rem + 2vw));}
h1 img, h2 img, h3 img, .h2 img                 {display: inline-block; width: 1em; height: 1em; fill: var(--color1); margin-inline: 0.1em; position: relative; top: 0.1em;}
h1 .profile-img, h2 .profile-img                {display: inline-block; width: 1em; height: 1em; padding: 0.2rem; margin: 0 0.1em; border: solid 0.1rem var(--color1); border-radius: 100%; transform: scale(1.2); box-sizing: border-box; position: relative; top: 0.15em;}

.hp h1                                          {font-size: min(3.5rem, calc(1.4rem + 3vw));}

.main :is(p, li)                                {width: 100%;}
.main :is(p a, li a)                            {color: white; text-decoration: underline; transition: .15s ease-in-out;}
.main :is(p a, li a):hover                      {opacity: 0.8; text-decoration-color: transparent;}
.main :is(p, li) img                            {display: inline-block; width: auto; height: 0.94em; position: relative; top: 0.1em;}

ul.c2                                           {display: block;}
ul.c2 li                                        {display: inline-block; width: 100%;}
  @media screen and (min-width: 641px)          {
  ul.c2                                         {column-count: 2; column-gap: 1.2em;}
  }

ul.checks li                                    {text-align: left; padding-left: 1.7em; position: relative; box-sizing: border-box; margin-top: 0.2em;}
ul.checks li:before                             {display: block; width: 1.2em; height: 1.2em; background: url("images/check-round.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.035em; content: "";}

.text-color1                                    {color: var(--color1);}
.text-white                                     {color: white;}

.no-break                                       {display: inline-block;}
.no-break span                                  {display: flex; gap: 0.15em;}

  @media screen and (max-width: 960px)          {
  .quote1 br                                    {display: none;}
  }

.section                                        {display: block; width: 100%; position: relative; padding-block: var(--section-padding); isolation: isolate;}
.section.padding-top-05                         {padding-top: calc(0.5 * var(--section-padding));}
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section .section-bg1                           {display: flex; width: 100%; height: 100%; justify-content: center; position: absolute; inset: 0;
                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
                                                 mask-image: linear-gradient(to right, transparent, black, transparent);                                           
                                                 -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
                                                }
.section .section-bg1 span                      {display: block; width: 140vw; max-width: 100rem; height: 100%; opacity: 0.6; background: var(--color0b); border-top: solid 0.12em var(--color1); border-bottom: solid 0.12em var(--color1); box-sizing: border-box;}
.section:first-of-type                          {margin-top: var(--header);}
  @media screen and (min-width: 1081px)         {
  .section.padding-top-05-desktop-only          {padding-top: calc(0.5 * var(--section-padding));}
  }

.anim                                           {transition-delay: 2s; opacity: 0; transform: scale(0.9,0.9); transition: .6s ease-in-out;}
.anim.play                                      {opacity: 1; transform: scale(1,1);}

.button                                         {display: flex; height: var(--button-height); justify-content: center; align-items: center; gap: 0.4em; font-size: min(1rem, calc(0.7rem + 1vw)); color: white; font-weight: 700; line-height: 1; border: none; outline: solid 2px transparent; padding: 0.25em 1.4em 0; border-radius: calc(0.5 * var(--button-height)); cursor: pointer; text-decoration: none !important; box-sizing: border-box; position: relative; z-index: 5; isolation: isolate; font-family: var(--font1); box-shadow: 0 0 1em black; transition: .15s ease-in-out;}
.button.higher                                  {height: var(--button-height2); border-radius: calc(0.5 * var(--button-height2));}
.button img                                     {display: block; width: 1em; height: 1em; position: relative; top: -0.07em;}
.button.color1                                  {background: var(--color1);}
.button.color1:before                           {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; position: absolute; inset: 0; z-index: -1; content: ""; border-radius: calc(0.5 * var(--button-height));}
.button.color1:after                            {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; opacity: 0; position: absolute; inset: -0.5em; z-index: -2; content: ""; border-radius: calc(0.5 * (1em + var(--button-height))); transition: .15s ease-in-out;}
.button.color1.higher:before,
.button.color1.higher:after                     {border-radius: calc(0.5 * var(--button-height2)) !important;}
.button.color1:hover                            {background: transparent; box-shadow: 0 0 0 transparent;}
.button.color1:hover:before                     {animation: button-hover 8s linear infinite;}
.button.color1:hover:after                      {opacity: 0.75; filter: blur(0.7em); animation: button-hover 8s linear infinite;}
@keyframes button-hover                         {
                                                0%    {background-position: 0%;}
                                                100%  {background-position: 400%;} 
}

.flex                                           {display: flex; width: 100%; justify-content: center; align-items: center; gap: var(--gap1); flex-wrap: wrap;}

.parallax                                       {position: relative;}

.box-style1                                     {background: rgba(255,255,255,0.05); backdrop-filter: blur(3px); border: solid 0.1em var(--color1); border-radius: 1.2em; box-sizing: border-box;}

.box-style1.disclaimer                          {display: flex; width: 100%; max-width: 28em; flex-direction: column; align-items: center; gap: var(--gap1); padding: 1em 1.2em 1.2em; margin-top: 1em;}
.box-style1.disclaimer .box-label               {display: block; background: var(--color1); font-size: 0.8em; font-weight: 700; padding: 0.4em 1em 0.12em; border-radius: 1em; margin-block: -2.25em -1em;}
.box-style1.disclaimer p                        {font-size: 0.8em;}

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

.hero .headline                                 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; position: relative; container-type: inline-size;}
.hero .subheadline                              {display: block; width: 100%; text-align: center; font-size: min(1.3rem, calc(0.4rem + 2vw)); font-weight: 700; position: relative; margin-top: calc(-0.6 * var(--gap1));}
.hero .bubble                                   {display: block; font-size: 0.6em; color: white; text-decoration: none; position: absolute; padding: 1.4em 1.25em 1.22em; box-sizing: border-box; transition: .15s ease-in-out;}
.hero .bubble svg                               {display: block; width: 100%; height: 100%; fill: var(--color1); position: absolute; inset: 0;}
.hero .bubble:hover                             {color: var(--color1);}
  @media screen and (min-width: 961px)          {
  .hero .bubble                                 {left: calc(50% + 16em); bottom: -1.6em;}
  }
  @media screen and (max-width: 960px)          {
  .hero .subheadline                            {/* padding-bottom: 3.4rem; */}
  .hero .bubble                                 {display: none; /* left: calc(50% + 5em); bottom: 0; */}
  }

.container1                                     {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap1); flex-wrap: wrap;}
.container1 :is(h1, h2)                         {max-width: 40rem;}

.note1                                          {display: flex; gap: 0.4em 0; font-size: 0.85em; color: white; font-weight: 300; border-radius: 1.35em; border: solid 0.07em white; position: relative;}
.note1 .text                                    {display: block; line-height: 1.3; padding: 0.55em 1em 0.3em; box-sizing: border-box;}
.note1:has(.icon-img)                           {align-items: center;}
.note1 .icon-img                                {display: block; width: 1em; height: 1em; margin-inline: 0.8em 0;}
.note1.border1                                  {border-color: var(--color1);}
.note1.with-title                               {font-size: 1em;}
.note1.with-title .title                        {display: flex;}
.note1.with-title .title span                   {display: flex; align-items: center; background: var(--color1); padding: 0.22em 1.1em 0; border-radius: 1.3em; box-sizing: border-box;}
.note1.with-title .title span img               {display: block; width: 1.2em; height: auto; position: relative; top: -0.18em; margin-right: 0.3em;}
.note1.with-title .text,
.note1:has(.icon-img) .text                     {padding-left: 0.5em;}
.note1 .text .local-info                        {margin-left: 0.35em; position: relative; top: 0.05em;}
  @media screen and (min-width: 769px)          {
  .note1.with-title                             {text-align: left;}
  .note1.with-title .title                      {height: auto;  white-space: nowrap; margin: ;}
  }
  @media screen and (max-width: 768px)          {
  .note1.with-title                             {margin-top: 1.2em; padding: 2em 1.2em 1.2em;}
  .note1.with-title .title                      {width: 100%; height: 2.6em; justify-content: center; text-align: center; font-size: 0.85em; font-weight: 600; position: absolute; left: 0; top: -1.4em;}
  .note1.with-title .title span                 {padding-inline: 1.8em;}
  }

.local-info                                     {display: inline-block; width: 0.95em; height: 0.95em; margin-left: 0.35em; position: relative; top: 0.05em;}
.local-info-icon                                {display: block; width: 0.95em; height: 0.95em;}
.local-info img                                 {display: block; width: 100%; height: 100%;}
.local-info-text                                {display: flex; width: 14rem; justify-content: center; padding-bottom: 1rem; opacity: 0; position: absolute; left: 99999px; bottom: 1rem; z-index: 10; transition: margin-top .2s ease-in-out, opacity .2s ease-in-out;}
.local-info-text > span                         {display: block; text-align: center !important; font-size: 0.75rem !important; color: var(--color0e); line-height: 1.4; background: var(--color0c); padding: 0.65rem 0.75rem !important; border-radius: 1em; box-sizing: border-box; position: relative;}
.local-info-text > span a                       {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.local-info-text > span a:hover                 {color: white; text-decoration-color: transparent;}
.local-info-text > span:after                   {display: block; width: 1.4rem; height: 1.4rem; background: var(--color0c); position: absolute; left: calc(50% - 0.7rem); bottom: -0.5rem; z-index: -1; content: ""; transform: rotate(45deg);}
.local-info:has(.local-info-icon):hover .local-info-text,
.local-info-text.show                           {left: calc(50% - 7rem); opacity: 1;}
  
.img-full                                       {display: flex; width: 100%; flex-direction: column; flex-wrap: wrap; gap: 1rem; position: relative;}
.img-full .logo1                                {display: flex; width: 100%; justify-content: flex-end; padding-inline: 4%; box-sizing: border-box;}
.img-full .logo1 a                              {display: block; width: auto; height: 1.8em;}
.img-full .logo1 a img                          {display: block; width: auto; height: 100%;}
.img-full .swiper                               {margin-block: 0.5rem; overflow: visible;}                               
.img-full .swiper .next                         {display: block; position: absolute; inset: 0; z-index: 2; cursor: pointer}
.img-full .swiper-slide                         {opacity: 0 !important; overflow: visible;}
.img-full .swiper-slide > div                   {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; transform: scale(0.9); transition: .5s ease-in-out;}
.img-full .swiper-slide-active                  {opacity: 1 !important;}
.img-full .swiper-slide-active > div            {transform: scale(1);}
.img-full .swiper-slide .label                  {display: flex; width: 16em; height: 16em; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; z-index: 2; overflow: hidden;}
.img-full .swiper-slide .label span             {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.25em; font-size: min(1.3em, calc(0.5em + 2vw)); color: white; font-weight: 800; letter-spacing: 0.02em; padding: 0.6em 0.5em 0.5em; box-sizing: border-box; position: relative; right: -25%; top: -25%; text-shadow: 0 0 0.35em rgba(0,0,0,0.3); box-shadow: 0 0 1em rgba(0,0,0,0.5); transform: rotate(45deg);}
.img-full .swiper-slide .label span svg         {display: block; width: 0.6em; height: auto; fill: #ffe600; position: relative; top: -0.05em; filter: drop-shadow(0 0 0.25em rgba(0,0,0,0.4));}
.img-full .swiper-slide .label span svg:first-of-type
                                                {transform: rotateY(180deg);}
.img-full .swiper-slide .label.before span      {background: var(--color1);}
.img-full .swiper-slide .label.after span       {background-image: linear-gradient(to right, #00caa5, #06e997);}
.img-full > a,
.img-full .swiper-slide > div > a               {display: block; width: 100%; border-radius: var(--border-radius1); overflow: hidden;}
.img-full > a img,
.img-full .swiper-slide > div > a img           {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .img-full                                     {width: 110%; margin-inline: -5%;}
  }

.img-full .hero-img                             {display: flex; width: 100%; aspect-ratio: 800/749; justify-content: center; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; padding: 1.6rem 1.6rem calc(1.6rem + 2%); background: url("images/hero-mobile.webp") no-repeat center top; background-size: cover; box-sizing: border-box; position: relative; z-index: 2; container-type: inline-size;}
.img-full .hero-img > *                         {position: relative; z-index: 2;}
.img-full .hero-img .title                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.1em; font-size: calc(0.7em + 3cqw); font-weight: 700; line-height: 1.3;}
.img-full .hero-img .title .row                 {display: block; text-shadow: 0 0 0.5em rgba(0,0,0,0.8);}
.img-full .hero-img .platforms-info             {display: none; font-size: min(calc(0.1em + 1.3vw), 0.7em); margin-top: 0.7rem;}
.img-full .hero-img .platforms-info > div       {gap: 0.5em;}
.img-full .hero-img .platforms-info.v2 img      {background: rgba(0,0,0,0.3); padding: 0.25em; border-radius: 100%; box-sizing: border-box;}
  @media screen and (min-width: 769px)          {
  .img-full .hero-img                           {aspect-ratio: 2000/1213; background-image: url("images/hero.webp");}
  .img-full .hero-img button                    {width: 4em; height: 4em; inset: calc(50% - 2em); transform: translateY(-8%);}
  .img-full .hero-img .title                    {font-size: max(1.7em, 4cqw);}
  .img-full .hero-img .platforms-info           {display: flex;}
  }

/*
.img-full .video                                {display: block; width: calc(100% - 1.2em); margin-inline: 0.6em; aspect-ratio: 16/9; border-radius: var(--border-radius1); overflow: hidden; position: relative; outline: solid 0.6em white; box-sizing: border-box;}
.img-full .video video                          {display: block; width: 100%; height: 100%;}
.img-full .video .video-cover                   {display: flex; width: 100%; height: 100%; justify-content: center; align-content: flex-end; align-items: flex-end; flex-wrap: wrap; padding: 1.6rem; background: url("images/ppcone2.jpg") no-repeat center top; background-size: cover; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2; container-type: inline-size; transition: opacity .3s ease-in-out; transition-delay: left 0.3s;}
.img-full .video .video-cover:before            {display: block; width: 100%; height: 50%; background-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent); position: absolute; left: 0; bottom: 0; z-index: 1; content: "";
                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
                                                 mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);                                           
                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);

}
.img-full .video .video-cover > *               {position: relative; z-index: 2;}
.img-full .video .video-cover button            {width: 2.6em; height: 2.6em; justify-content: center; align-items: center; padding: 0; border-radius: 100%; position: absolute; inset: calc(50% - 1.3em); transform: translateY(-1.2em);}
.img-full .video .video-cover button:before     {border-radius: 100%;}
.img-full .video .video-cover button svg        {display: block; width: 1em; height: auto; fill: white;}
.img-full .video .video-cover .title            {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.1em; font-size: calc(0.7em + 3cqw); font-weight: 700; line-height: 1.3;}
.img-full .video .video-cover .title .row       {display: block; text-shadow: 0 0 0.5em rgba(0,0,0,0.8);}
.img-full .video .video-cover .platforms-info   {display: none; font-size: min(calc(0.1em + 1.3vw), 0.7em); margin-top: 0.7rem;}
.img-full .video .video-cover .platforms-info > div
                                                {gap: 0.5em;}
.img-full .video .video-cover .platforms-info.v2 img
                                                {background: rgba(0,0,0,0.3); padding: 0.25em; border-radius: 100%; box-sizing: border-box;}
.img-full .video .video-cover.hidden            {opacity: 0; top: 0; left: -9999px;}
  @media screen and (min-width: 769px)          {
  .img-full .video .video-cover button          {width: 4em; height: 4em; inset: calc(50% - 2em); transform: translateY(-8%);}
  .img-full .video .video-cover .title          {font-size: max(1.7em, 4cqw);}
  .img-full .video .video-cover .platforms-info {display: flex;}
  }
  */


.note2                                          {display: block; width: 100%; text-align: center; font-size: min(1.4rem, calc(1rem + 1vw)); font-weight: 700;}
.note2 svg                                      {display: inline-block; width: 0.9em; height: 0.9em; fill: var(--color1); position: relative; top: 0.06em; margin-inline: 0.1em;}
  @media screen and (max-width: 580px)          {
  .note2.one-row-only1                          {font-size: 3.6cqw;}
  }

.underline1                                     {display: inline-block; position: relative;}
  @media screen and (min-width: 1081px)         {
  .underline1:after                             {display: block; width: 108%; height: 0.07em; background: white; position: absolute; left: -4%; bottom: -0.25em; transform: rotate(-2deg); content: "";}
  }
  @media screen and (max-width: 1080px)         {
  .underline1                                   {display: inline; text-decoration: underline; text-decoration-color: white;}
  }

.clients                                        {display: flex; width: 100%; max-width: 50rem; flex-wrap: wrap; gap: var(--gap1);}

/* .home-new .logos                                {height: 8em;}
.home-new .logos .swiper                        {container-type: inline-size
                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
                                                 mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);                                           
                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
                                                }
.home-new .logos .swiper-slide:nth-child(odd)   {position: relative; right: 12cqw;}
  @media screen and (min-width: 961px)          {
  .home-new .logos .swiper-slide:nth-child(odd) {right: 4.2em;}
  }
  @media screen and (min-width: 769px) and (max-width: 960px){
  .home-new .logos .swiper-slide:nth-child(odd) {right: 8.4cqw;}
  }  
  @media screen and (min-width: 541px) and (max-width: 768px){
  .home-new .logos .swiper-slide:nth-child(odd) {right: 10cqw;}
  }  
  @media screen and (min-width: 441px) and (max-width: 540px){
  .home-new .logos .swiper-slide:nth-child(odd) {right: 12.8cqw;}
  }   */

.logos                                          {height: 4em;}
.logos .swiper                                  {height: 100%;}
.logos .swiper-slide                            {height: auto;}
.logos a                                        {display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.12); border-radius: 0.55em; padding: 0.5em 1em; box-sizing: border-box; transition: .15s ease-in-out;}
.logos a img                                    {display: block; height: 100%; width: 100%; object-fit: contain;}
  @media screen and (max-width: 440px)          {
  .logos                                        {height: 3.4em;}
  .logos a                                      {border-radius: 0.45em; padding: 0.3em 0.7em;}
  }

.infographics                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem 0;}
.infographics > div                             {display: flex; width: 31%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em; font-size: 0.85em; position: relative; box-sizing: border-box;}
.infographics > div img                         {display: block; width: 2.4em; height: 2.4em; fill: var(--color1); margin-bottom: 0.25em;}
.infographics > div span                        {display: block; width: 100%; text-align: center; font-weight: 300;}
.infographics.i2 > div .title                   {font-size: min(1.5em, calc(0.5em + 2vw)); font-weight: 800; line-height: 1.35;}
  @media screen and (min-width: 1081px)         {
  .infographics.i1 > div                        {padding-left: 3.1em;}
  .infographics.i1 > div img                    {position: absolute; left: 0; top: 0.28em;}
  .infographics.i1 > div span                   {text-align: left;}
  }
  @media screen and (min-width: 961px)          {
  .infographics.i2 > div                        {width: 30%; flex-direction: column; justify-content: space-between; justify-content: center; align-items: center; align-items: center; gap: 0.4em; padding: 2.5em min(1.2em, calc(0.4em + 1vw));}
  }
  @media screen and (max-width: 960px)          {
  .infographics.i2 > div                        {background: none; backdrop-filter: none; border: none; border-radius: 0;}
  }
  @media screen and (max-width: 440px)          {
  .infographics > div                           {font-size: 0.75em;}
  }

.review1                                        {display: flex; align-items: center; gap: 1em 1.5em;}
.review1 .img                                   {display: block; width: 4.6em; height: 4.6em; border-radius: 100%; overflow: hidden;}
.review1 .img img                               {display: block; width: 100%; height: 100%; object-fit: cover;}
.review1 > div                                  {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.35em;}
.review1 > div .name                            {display: block; text-align: left;}
.review1 > div > img                            {display: block; width: 4em; height: auto;}

.review2                                        {display: block; width: 100%; position: relative; z-index: 1;}
.review2 .paper                                 {display: flex; width: 100%;}
.review2 .paper .inner                          {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.5em 0; text-align: left; color: var(--color0); background: white; padding: min(3.5em, calc(0.75em + 5vw)); border-radius: 1em; box-sizing: border-box; position: relative; box-shadow: 0 0 1em rgba(0,0,0,0.2); z-index: 2;}
.review2 .paper .inner > div                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.review2 .arrow                                 {display: none; width: 3em; height: 3em; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0.1em; box-sizing: border-box; position: absolute; left: calc(50% - 1.5em); top: -1em; z-index: 2; transition: .5s ease-in-out;}
.review2 .arrow svg                             {display: block; width: 100%; height: 100%; fill: var(--color1); position: absolute; inset: 0; transition: .15s ease-in-out;}
.review2 .arrow img                             {display: block; width: 40%; position: relative; z-index: 1; opacity: 0; animation: envelope-arrow 1.2s linear infinite;}
.review2 .arrow img:nth-of-type(1)              {animation-delay: 0.4s;}
.review2 .arrow img:nth-of-type(2)              {animation-delay: 0.2s; margin-block: -0.15em;}
.review2 .upper div                             {display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; gap: 0.6em;}
.review2 .upper div span                        {display: block; font-size: 0.9em;}
.review2 .upper img                             {display: block; width: 18rem; border-radius: 0.4em;}
.review2 .text                                  {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em;}
.review2 .text p                                {display: block; width: 100%; font-size: 0.9em; line-height: 1.6;}
.review2 .bottom                                {align-items: flex-end; margin-top: -3.5em;}
.review2 .bottom .logo                          {display: block; width: min(11em, calc(5em + 13vw));}
.review2 .bottom .stamp                         {display: block; width: min(13em, calc(7em + 13vw)); transform: translateY(2em) translateX(1em);}
@keyframes envelope-arrow                       {
                                                0%    {opacity: 0;}
                                                10%   {opacity: 1;}
                                                30%   {opacity: 1;}
                                                40%   {opacity: 0;} 
  }
  @media screen and (min-width: 961px)          {
  .review2                                      {height: 35rem; background: url("images/envelope-bottom.svg") no-repeat center bottom; background-size: contain; cursor: pointer;}
  .review2::after                               {display: block; width: 100%; height: 70%; background: url("images/envelope-top.svg") no-repeat center bottom; background-size: contain; position: absolute; left: 0; bottom: 0; z-index: 2; content: "";}                                      
  .review2 .paper                               {height: 33rem; overflow: hidden; position: absolute; left: 0; bottom: 0; padding: 2em 2em 0; box-sizing: border-box; transition: .8s ease-in-out;}
  .review2.show .paper                          {height: 44rem; bottom: 16rem;}
  .review2 .arrow                               {display: flex;}
  .review2.show .arrow                          {transform: rotateX(180deg);}
  }
  @media screen and (max-width: 640px)          {
  .review2 .upper div                           {display: none;}
  .review2 .upper img                           {width: 100%;}
  }

.phone-screens                                  {display: block; width: 100%; position: relative; box-sizing: border-box; margin-block: 0.5rem;}
.phone-screens > a                              {display: block; position: absolute; border-radius: 1rem; overflow: hidden;}
.phone-screens > a img                          {display: block; width: 100%;}
.phone-screens .google                          {display: block; width: 8em; background: rgba(0,0,0,0.1); border-radius: 1rem; border: solid 0.1em var(--color0c); position: absolute; right: -2em; bottom: -1em;}
.phone-screens .google a                        {display: block; width: 100%;}
.phone-screens .google a img                    {display: block; width: 100%;}
  @media screen and (min-width: 1281px)         {
  .phone-screens                                {width: 130%; margin-inline: -15%; padding-top: 70%;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .phone-screens                                {width: 110%; margin-inline: -5%;}
  }
  @media screen and (max-width: 1080px)         {
  .phone-screens                                {margin-bottom: 6em;}
  .phone-screens .google                        {right: calc(50% - 4em); bottom: -6em;}
  }
  @media screen and (min-width: 769px)          {
  .phone-screens                                {padding-top: 60%;}
  .phone-screens > a:nth-child(1)               {left: 0; top: 0;}
  .phone-screens > a:nth-child(2)               {left: 13.5%; top: 21%; z-index: 1;}
  .phone-screens > a:nth-child(3)               {left: 27%; bottom: 0; z-index: 2;}
  .phone-screens > a:nth-child(4)               {left: 41%; top: 10%;}
  .phone-screens > a:nth-child(5)               {right: 27%; bottom: 0; z-index: 2;}
  .phone-screens > a:nth-child(6)               {right: 13.5%; top: 21%; z-index: 1;}
  .phone-screens > a:nth-child(7)               {right: 0; top: 0;}
  }
  @media screen and (min-width: 769px)          {
  .phone-screens > a                            {width: 18%;}
  .phone-screens > a                            {transition: .3s ease-in-out;}
  .phone-screens > a:hover                        {transform: scale(1.06); z-index: 4;}
  }
  @media screen and (max-width: 768px)          {
  .phone-screens                                {padding-top: 120%;}
  .phone-screens > a                            {width: 30%;}
  .phone-screens > a:nth-child(1)               {left: 17%; top: 0;}
  .phone-screens > a:nth-child(2)               {right: 17%; top: 0;}
  .phone-screens > a:nth-child(3)               {left: 0; top: 26%;}
  .phone-screens > a:nth-child(4)               {left: 35%; top: 26%;}
  .phone-screens > a:nth-child(5)               {right: 0; top: 26%;}
  .phone-screens > a:nth-child(6)               {left: 17%; bottom: 0;}
  .phone-screens > a:nth-child(7)               {right: 17%; bottom: 0;}
  }

.chat-example                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem; margin-block: 1.5em; font-size: min(1rem, calc(0.6rem + 1vw));}
.chat-example .row                              {display: flex; width: 100%; min-height: 3em; flex-wrap: wrap; gap: 0.8rem; position: relative; box-sizing: border-box;}
.chat-example .row .icon                        {display: flex; width: 3.6em; height: 3.6em; justify-content: center; align-items: center; background: white; border-radius: 100%; padding: 0.4em; box-sizing: border-box; overflow: hidden; position: absolute; top: -0.1em;}
.chat-example .row .icon.cover                  {padding: 0;}
.chat-example .row .icon img                    {display: block; width: 100%; height: 100%; object-fit: contain;}
.chat-example .row .text                        {display: block; width: 100%; max-width: 22em; text-align: left; padding: 0.85em 1.4em; border-radius: 1.5em; position: relative; box-sizing: border-box;}
.chat-example .row .text .reaction              {display: flex; width: 1.9em; height: 1.9em; justify-content: center; align-items: center; background: white; border-radius: 100%; position: absolute; bottom: -1.1em; box-shadow: 0 0 0.5em rgba(0,0,0,0.5);}
.chat-example .row .text .reaction img          {display: block; width: 70%; height: auto;}
.chat-example .row.left                         {padding-left: 4.6em;}
.chat-example .row.left .icon                   {left: 0;}
.chat-example .row.left .text                   {color: var(--color0); background: white;}
.chat-example .row.left .text .reaction         {right: 5%;}
.chat-example .row.left .text img               {display: inline-block; width: auto; height: 0.95em; position: relative; top: 0.06em;}
.chat-example .row.right                        {justify-content: flex-end; padding-right: 4.6em;}
.chat-example .row.right .icon                  {right: 0;}
.chat-example .row.right .icon img              {transform: scale(0.8);}
.chat-example .row.right .text                  {color: white; background: var(--color1);}
.chat-example .row.right .text .reaction        {left: 5%;}
  @media screen and (min-width: 541px)          {
  h2:has(+ .chat-example) .mobile-only          {display: none;}
  }

.trio-images                                    {display: flex; width: 100%; justify-content: space-between; margin-block: 2rem 3rem;}
.trio-images a                                  {display: block; width: 33%; position: relative;}
.trio-images a span                             {display: block; width: 100%; border-radius: 1rem; overflow: hidden; box-shadow: var(--box-shadow-color1);}
.trio-images a span img                         {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .trio-images                                  {width: 120%; margin-inline: -10%;}
  }
  @media screen and (min-width: 769px)          {
  .trio-images a                                {transition: .3s ease-in-out;}
  .trio-images a:hover                          {transform: scale(1.06); z-index: 4;}
  }
  @media screen and (min-width: 641px)          {
  .trio-images a:nth-child(2)                   {z-index: 2; transform: scale(1.15) translateY(-2em);}
  }
  @media screen and (max-width: 640px)          {
  .trio-images                                  {justify-content: center; flex-wrap: wrap; gap: 8%;}
  .trio-images a                                {width: 46%;}
  .trio-images a:nth-child(1)                   {order: 0;}
  .trio-images a:nth-child(2)                   {order: 2; z-index: 2; margin-top: -30%;}  
  .trio-images a:nth-child(3)                   {order: 1;}
  }

.soc-menu                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--soc-menu-gap); box-sizing: border-box; --soc-menu-gap: 0.5rem;}
.soc-menu a                                     {display: block; width: 3em; height: 3em; position: relative; border-radius: 100%; opacity: 0.8; filter: grayscale(1) brightness(5); transition: .15s ease-in-out; cursor: pointer;}
.soc-menu a img                                 {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.soc-menu a img:nth-child(2)                    {position: absolute; inset: 0; opacity: 0;}
.soc-menu a:hover                               {opacity: 1; background: rgba(255,255,255,0.15);}
.soc-menu .swiper-slide-thumb-active a          {opacity: 1; filter: grayscale(0) brightness(1);}
.soc-menu .swiper-slide-thumb-active a img:nth-child(1)
                                                {opacity: 0;}
.soc-menu .swiper-slide-thumb-active a img:nth-child(2)
                                                {opacity: 1;}
  @media screen and (max-width: 480px)          {
  .soc-menu, .platforms .thumbs .swiper-wrapper {padding-inline: 6vw;}
  }

.carousel                                       {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.5rem; box-sizing: border-box; position: relative;}
  @media screen and (max-width: 1080px)         {
  .carousel                                     {width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 4rem;}
  }

.swiper-button                                  {display: flex; justify-content: center; align-items: center; color: transparent; position: absolute; top: calc(50% - 0.5 * var(--swiper-button)); z-index: 100; margin: 0; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}                                
.swiper-button-prev                             {transform: rotate(180deg);}
.swiper-button span                             {display: block; width: 130%; height: 140%; position: absolute; right: 0; top: -20%;}
.swiper-button svg                              {display: block; width: 40%; height: 40%; fill: white;}
.swiper-button-disabled                         {opacity: 0 !important;}
  @media screen and (min-width: 1081px)         {
  .swiper-button                                {--swiper-button: 3rem; width: var(--swiper-button); height: var(--swiper-button); border-radius: 100%; opacity: 0.6;}
  .swiper-button-prev                           {left: -4rem;}
  .swiper-button-next                           {right: -4rem;}  
  .swiper-button:after,
  .swiper-button:before                         {display: none;}
  .swiper-button:hover                          {opacity: 1; background: rgba(255,255,255,0.15);}
  }
  @media screen and (max-width: 1080px)         {
  .swiper-button:not(.sb-change)                {--swiper-button: 3rem; width: var(--swiper-button); height: var(--swiper-button); border-radius: 100%; opacity: 0.6;}
  .swiper-button-prev:not(.sb-change)           {left: 0;}
  .swiper-button-next:not(.sb-change)           {right: 0;}  
  .swiper-button:after:not(.sb-change),
  .swiper-button:before:not(.sb-change)                         {display: none;}
  .swiper-button:not(.sb-change):hover                          {opacity: 1; background: rgba(255,255,255,0.15);}

  .sb-change.swiper-button                      {--swiper-button: 4.6rem; width: calc(var(--swiper-button) / 2); height: var(--swiper-button); padding-left: 0.25em; opacity: 1;}                                
  .sb-change.swiper-button:hover                {background: var(--color1b);}
  .sb-change.swiper-button-prev                 {left: 0;}
  .sb-change.swiper-button-next                 {right: 0;}  
  .sb-change.swiper-button:before               {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; position: absolute; inset: 0; z-index: -1; content: ""; border-radius: calc(0.5 * var(--button-height)); border-radius: calc(var(--swiper-button) / 2) 0 0 calc(var(--swiper-button) / 2);}
  .sb-change.swiper-button:after                {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; opacity: 0; position: absolute; inset: -0.5em; z-index: -2; content: ""; border-radius: calc(0.5 * (1em + var(--button-height))); transition: .15s ease-in-out; border-radius: calc(var(--swiper-button) / 2) 0 0 calc(var(--swiper-button) / 2);}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .sb-change.swiper-button:hover                {background: transparent; box-shadow: 0 0 0 transparent;}
  .sb-change.swiper-button:hover:before         {animation: swiper-button-hover 8s linear infinite;}
  .sb-change.swiper-button:hover:after          {opacity: 1; filter: blur(1em); animation: swiper-button-hover 8s linear infinite;}
  }
  @media screen and (max-width: 768px)          {
  .sb-change.swiper-button:hover                {background-color: transparent;}
  .sb-change.swiper-button:before               {display: block; background-image: linear-gradient(90deg, var(--color1), var(--color1b), var(--color1c), var(--color1d)); background-size: 400%; position: absolute; inset: 0; z-index: -1; content: ""; border-radius: calc(0.5 * var(--button-height)); border-radius: calc(var(--swiper-button) / 2) 0 0 calc(var(--swiper-button) / 2);}
  }

@keyframes swiper-button-hover                  {
                                                0%    {background-position: 0%;}
                                                100%  {background-position: 400%;} 
}

.swiper-pagination                              {display: flex; justify-content: center; position: relative; inset: auto;}
.swiper-pagination-bullet                       {display: block; width: 1.8em; height: 1.8em; background: transparent; opacity: 1; position: relative; margin: 0 !important; cursor: pointer; transition: .15s ease-in-out;}
.swiper-pagination-bullet:before                {display: block; border-radius: 100%; border: solid 0.12em transparent; box-sizing: border-box; position: absolute; inset: 15%; content: ""; transition: .15s ease-in-out;}
.swiper-pagination-bullet:after                 {display: block; background: white; opacity: 0.6; border-radius: 100%; position: absolute; inset: 35%; content: "";}
.swiper-pagination-bullet:hover                 {opacity: 0.8;}
.swiper-pagination-bullet-active:before         {border-color: rgba(255,255,255,0.6);}

.swiper                                         {width: 100%; touch-action: pan-y pinch-zoom;}
.swiper-slide                                   {display: flex; height: auto; position: relative; overflow: hidden; flex-shrink: 0; transition: .5s ease-in-out;}
.swiper-slide > *                               {width: 100%;}

.platforms-info                                 {display: flex; width: 100%; justify-content: center; gap: var(--gap1); flex-wrap: wrap;}
.platforms-info > div                           {display: flex; width: 100%; justify-content: center; gap: 0.7em;}
.platforms-info > div img                       {display: block; width: 3em; height: auto;}
.platforms-info > img                           {display: block; width: 6em; height: auto;}
  @media screen and (max-width: 768px)          {
  .platforms-info                               {font-size: calc(0.2em + 1.5vw);}
  }

.platforms                                      {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.5rem; box-sizing: border-box; position: relative;}
.platforms .thumbs .swiper-wrapper              {width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--soc-menu-gap); box-sizing: border-box;}                                 
.platforms .thumbs .swiper-slide                {width: auto !important;}
.platforms .slides .swiper,
.platforms .slides .swiper-slide                {overflow: visible;}
.platforms .platform-info                       {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.2rem 0; opacity: 0; transform: scale(0.75); transition: .75s ease-in-out;}
.platforms .platform-info .img                  {display: block; width: 100%; max-width: 40rem; border-radius: 1rem; overflow: hidden;}
.platforms .platform-info .img img              {display: block; width: 100%;}
.platforms .platform-info > div                 {display: flex; width: 100%; max-width: 36rem; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em;}
.platforms .platform-info .price                {display: flex; align-items: center; gap: 0.45em; margin-top: 0.8em;}
.platforms .platform-info .price img            {display: block; width: 1.2em; height: auto; position: relative; top: -0.08em;}
.platforms .swiper-slide-active .platform-info  {opacity: 1; transform: scale(1);}
  @media screen and (min-width: 1081px)         {
  .platforms                                    {max-width: 62rem;}
  .platforms .soc-menu a                        {width: 4em; height: 4em;}
  .platforms .platform-info                     {justify-content: space-between;}
  .platforms .platform-info .img                {width: 58%;}
  .platforms .platform-info > div               {width: 36%; justify-content: flex-start; align-items: center; align-content: center; font-size: 1.15em;}  
  .platforms .platform-info > div p             {text-align: left;}
  }

.price-incl                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.8em; position: relative; top: calc(0.6em - var(--gap1));}
.price-incl svg                                 {display: block; width: 2em; height: 2em; fill: var(--color1);}
.price-incl .price                              {display: block; font-size: 1.9em; font-weight: 800; text-decoration: line-through;}
.price-incl .note1                              {font-size: 0.75em; position: relative; top: -0.3em;}

.ppcone-photos :is(.swiper, .swiper-slide)      {overflow: visible;}
.ppcone-photos a                                {display: block; width: 100%; border-radius: 1rem; overflow: hidden;}
.ppcone-photos a img                            {display: block; width: 100%; height: auto;}
.ppcone-photos.pp2 .swiper-slide.sl0 a          {background: white; padding: 0.6em; border-radius: 1.3em; box-sizing: border-box;}
.ppcone-photos.pp2 .swiper-slide.sl0 a img      {border-radius: 0.85em;}
  @media screen and (min-width: 1081px)         {
  .wrapper:has(.ppcone-photos)                  {max-width: 62rem;}
  }
  @media screen and (min-width: 769px)          {
  .ppcone-photos                                {margin-bottom: 3rem;}
  .ppcone-photos .swiper-wrapper                {display: flex; width: 100%; justify-content: space-between; position: relative; transform: none !important;}                                 
  .ppcone-photos .swiper-slide                  {width: 36% !important; transition: .3s ease-in-out;}
  .ppcone-photos .swiper-slide.sl2              {position: absolute; left: 32%; top: -2.5em; z-index: 2;}
  .ppcone-photos .swiper-slide.sl2 > *          {transform: scale(1.15);}
  .ppcone-photos:not(.pp2) .swiper-slide:nth-child(n+4)
                                                {display: none !important;}
  .ppcone-photos .swiper-slide:hover            {transform: scale(1.06); z-index: 4;}
  .ppcone-photos .swiper-button                 {display: none;}
  .ppcone-photos.pp2                            {padding-top: 22em;}
  .ppcone-photos.pp2 .swiper-slide:nth-child(n+5)
                                                {display: none !important;}
  .ppcone-photos.pp2 .swiper-slide.sl0          {width: 54% !important; position: absolute; left: 23%; top: -22em;}
  .ppcone-photos.pp2 .swiper-slide.sl0 a        {box-shadow: none;}
  .ppcone-photos.pp2 .swiper-slide.sl2          {top: 0;}
  .ppcone-photos.pp2 .swiper-slide:is(.sl1, .sl3)
                                                {top: -12em;}
  }
  @media screen and (max-width: 768px)          {
  .ppcone-photos                                {margin-block: 1rem 2rem;}
  .ppcone-photos .swiper                        {max-width: calc(86vw - 3rem); overflow: visible;}
  .ppcone-photos .swiper-slide                  {width: 100%; opacity: 0.5; top: auto !important;}
  .ppcone-photos .swiper-slide-active           {opacity: 1; transform: scale(1.1); z-index: 5;}
  .ppcone-photos a                              {width: 100%; top: auto !important;}
  .ppcone-photos a:nth-child(2)                 {left: 26%;}
  .ppcone-photos.pp2 .swiper-slide.sl0 a img    {height: 100%; object-fit: cover;}
  }

.portals                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em;}
.portals a                                      {display: block; width: 2.6em; cursor: pointer; transition: .15s ease-in-out;}
.portals a img                                  {display: block; width: 100%;}
.portals a:hover                                {transform: scale(0.95); filter: brightness(0.9);}

.grid-reviews                                   {display: block; width: 100%; position: relative;}
.grid-reviews > div                             {display: block; padding: 0.3em; box-sizing: border-box; position: absolute;}
.grid-reviews .inner                            {display: block; width: 100%; height: 100%; border-radius: 1rem; position: relative;}
.grid-reviews article                           {display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; gap: 0.8rem; text-align: left; color: var(--color0); background: rgba(255,255,255,0.92); padding: 1.1em; border-radius: 0.85rem; box-sizing: border-box; position: relative; z-index: 2;}
.grid-reviews article .profile                  {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.6em;}
.grid-reviews article .profile .img             {display: block; width: 2.7em; height: 2.7em; border-radius: 100%; overflow: hidden;}
.grid-reviews article .profile .img img         {display: block; width: 100%; height: 100%; object-fit: cover;}
.grid-reviews article .profile .name            {display: block; text-align: left; font-size: 0.7em; line-height: 1.3;}
.grid-reviews article .profile .name strong     {display: block; font-weight: 700; font-size: 1.1em;}
.grid-reviews article .text                     {display: block; width: 100%; font-size: 0.85em; line-height: 1.3;}
.grid-reviews article .stars                    {display: block; width: 5em; filter: saturate(1.2) brightness(0.9);}
  @media screen and (min-width: 1081px)         {
  .grid-reviews                                 {width: 130%; margin-inline: -15%; padding-top: 53%;}
  .grid-reviews > div:nth-child(1)              {width: 18%; height: 100%; left: 0; top: 0;}
  .grid-reviews > div:nth-child(2)              {width: 32%; height: 50%; left: 18%; top: 0;}
  .grid-reviews > div:nth-child(3)              {width: 32%; height: 50%; left: 18%; top: 50%;}
  .grid-reviews > div:nth-child(4)              {width: 18%; height: 100%; left: 50%; top: 0;}
  .grid-reviews > div:nth-child(5)              {width: 32%; height: 50%; left: 68%; top: 0;}
  .grid-reviews > div:nth-child(6)              {width: 32%; height: 50%; left: 68%; top: 50%;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .grid-reviews                                 {max-width: 36rem; padding-top: 49rem;}
  .grid-reviews > div:nth-child(1)              {width: 35%; height: 50%; left: 0; top: 0;}
  .grid-reviews > div:nth-child(2)              {width: 65%; height: 25%; left: 35%; top: 0;}
  .grid-reviews > div:nth-child(3)              {width: 65%; height: 25%; left: 35%; top: 25%;}
  .grid-reviews > div:nth-child(4)              {width: 35%; height: 50%; left: 65%; top: 50%;}
  .grid-reviews > div:nth-child(5)              {width: 65%; height: 25%; left: 0; top: 50%;}
  .grid-reviews > div:nth-child(6)              {width: 65%; height: 25%; left: 0; top: 75%;}
  }
  @media screen and (max-width: 768px)          {
  .grid-reviews                                 {display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 0;}
  .grid-reviews > div                           {width: 50%; position: relative;}
  .grid-reviews > div:nth-child(1),
  .grid-reviews > div:nth-child(4)              {width: 100%;}
  .grid-reviews > div:nth-child(2) article .profile .name,
  .grid-reviews > div:nth-child(3) article .profile .name,
  .grid-reviews > div:nth-child(5) article .profile .name,
  .grid-reviews > div:nth-child(6) article .profile .name 
                                                {width: 100%;}
  }  

.ppcone-cta                                     {display: flex; align-items: center; gap: 1em 1.5em;}
.ppcone-cta .img                                {display: block; width: 6.4em; height: 6.4em; padding: 0.3em; border-radius: 100%; border: solid 0.1em var(--color1); box-sizing: border-box; overflow: hidden;}
.ppcone-cta .img img                            {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 100%;}
.ppcone-cta > div                               {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.8em;}
.ppcone-cta > div .names                        {display: block; text-align: left;}
.ppcone-cta > div .button                       {font-size: 0.8em;}

.mini-headline                                  {display: block; width: 100%; text-align: center; font-size: 1.15em; font-weight: 700; margin-bottom: -1rem;}

.card                                           {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.85em; font-size: 1.15em; margin-bottom: 0.4rem;}
.card > img                                     {display: block; width: 3em; height: 3em; padding: 0.2em; border: solid 0.1em var(--color1); border-radius: 100%; box-sizing: border-box; position: relative; top: -0.15em;}
.card > div                                     {display: block;}
.card > div > span                              {display: block; text-align: left; font-size: 0.9em;}
.card > div img                                 {display: block; width: 1.1em; height: 1.1em; fill: var(--color1); position: relative; top: 1.05em;}
.card.c2 > img                                  {width: 2.2em; height: 2.2em; padding: 0.12em; border-width: 0.08em;}
.card.c2 > div                                  {font-size: 1.3em;}
  @media screen and (max-width: 680px)          {
  .card .desktop-only                           {display: none;}
  }

.white-box                                      {display: flex; width: 100%; flex-wrap: wrap; background: #f8faff; padding: 1.8em; border-radius: 1em; box-sizing: border-box;}

.hint                                           {display: inline-block; width: 1em; height: 1em; position: relative; margin-left: 0.12em; top: 0.13em;}
.hint > svg                                     {display: block; width: 100%; height: 100%; fill: var(--color0); transition: .15s ease-in-out; cursor: pointer;}
.hint:hover > svg                               {fill: var(--color1b);}
.hint .bubble                                   {display: flex; width: 14em; justify-content: center; position: absolute; bottom: 0; left: -99999px; padding-bottom: 1.7em; opacity: 0; transition: opacity .15s ease-in-out;}
.hint .bubble > span                            {display: block; position: relative;}
.hint .bubble > span > svg                      {display: block; width: 1.2em; height: 0.6em; fill: var(--color0); position: absolute; left: calc(50% - 0.6em); bottom: -0.5em;}
.hint .bubble > span > svg .fill                {fill: white;}
.hint .bubble > span > span                     {display: block; min-width: 100%; text-align: center; font-size: 0.85em; line-height: 1.25; background: white; border: solid 0.13em var(--color0); padding: 0.58em 1em 0.4em; border-radius: 1.2em; box-sizing: border-box;}
.hint .bubble > span > span a                   {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.hint .bubble > span > span a:hover             {color: var(--color1b); text-decoration-color: transparent;}
.hint:hover .bubble                             {left: calc(50% - 7em); opacity: 1;}

.form-box                                       {max-width: 34rem; justify-content: space-between; gap: 1.2rem 0; margin-bottom: 1.5rem; position: relative;}

.form-footer                                    {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1.2rem 0; flex-wrap: wrap; margin-block: 0.12rem 0.08rem;}
.form-footer .button                            {box-shadow: none;}
.form-footer .consent                           {display: block; width: calc(100% - 23em); align-self: center; text-align: left; font-size: 0.8em; color: #999999; line-height: 1.3; padding-top: 0.2em;}
.form-footer .consent a                         {color: inherit; text-decoration: underline;}
.form-footer .consent a:hover                   {color: #666666; text-decoration: none;}
.form-footer .google-reviews                    {display: block; width: 7em; height: auto;}
  @media screen and (max-width: 680px)          {
  .form-footer .consent                         {width: 100%;}
  .form-footer .button                          {order: 100;}
  .form-footer .google-reviews                  {order: 101;}
  }

.form-item                                      {display: block; width: 100%;}
.form-item > label                              {display: block; width: 100%; text-align: left; color: var(--color0); font-weight: 600; margin-bottom: 0.4em;}
.form-box form                                   {display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;} /* flex zrcadli .form-box layout, aby w50-100 pary (email|telefon, pocet|uroven) sedely vedle sebe (Petr 12.6.2026) */
.form-box form .form-item                        {margin-bottom: 0.85em;} /* vertikalni rytmus dle vzoru (Petr 12.6.2026) */
.form-box form .form-footer                      {margin-top: 0.35em;}
.form-item .element                             {display: block; width: 100%; height: var(--form-item-height); border: var(--form-item-border); border-radius: 0.5em; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.form-item .element:has(.file-upload)           {border-style: dotted; border-width: 0.15em;}
.form-item .element :is(input, textarea)        {display: block; width: 100%; height: 100%; font-size: 1em; color: var(--color0); font-weight: 600; border: none; outline: none; padding: 0.2em var(--form-item-padding) 0; box-sizing: border-box; background: none; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item .element:has(textarea)               {height: 10em;}
.form-item .element textarea                    {padding-block: var(--form-item-padding);}
.form-item .element:focus-within                {box-shadow: 0 0 0.5em var(--color1);}
.form-item .element :is(input, textarea)::placeholder
                                                {color: #999999; font-weight: 400;}
.form-item-error                                {display: block; width: 100%; text-align: left; font-size: 0.7em; color: #dc0537; font-weight: 500; margin-block: 0.08rem -1.28rem;}
  @media screen and (min-width: 481px)          {
  .form-item.w50-100                            {width: calc(50% - 0.5 * var(--form-items-gap));}
  } 

.custom-select-wrapper                          {display: block; width: 100%; height: 100%; position: relative;}
.custom-select-wrapper select                   {display: none;}
.custom-select-wrapper .custom-select           {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;}
.custom-select-trigger                          {display: flex; width: 100%; height: 100%; color: #999999; align-items: center; padding: 0.2em 4em 0 var(--form-item-padding); box-sizing: border-box;}
.custom-select-trigger:before                   {display: block; width: 2.8em; height: 100%; background: var(--color2); border-left: solid 0.1em var(--color1); position: absolute; right: 0; top: 0; content: "";}
.custom-select-trigger:after                    {display: block; width: 2.8em; height: 100%; position: absolute; right: 0; top: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M356.2,672.8c24.1,33.9,63.5,33.9,87.6,0l344.5-484.4c24.1-33.9,9.8-61.6-31.8-61.6h-713c-41.6,0-55.9,27.7-31.8,61.6 L356.2,672.8z' width='1' height='1' fill='rgb(0,200,248)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: 28% auto; transition: .2s ease-in-out;}
.custom-select-trigger.show:after               {transform: rotateX(180deg);}
.custom-select-trigger.chosen                   {color: var(--color0);}
.custom-options                                 {display: block; width: calc(100% + 0.2em); max-height: 15em; background: var(--color0); position: absolute; left: 9999px; top: calc(100% + 0.3em); border-radius: 0.7em; overflow-y: auto; z-index: 100;}
.custom-options.show                            {left: -0.1em;}
.custom-option                                  {display: flex; width: 100%; justify-content: space-between; text-align: left; color: white; padding: 0.9em var(--form-item-padding) 0.5em; box-sizing: border-box; cursor: pointer; border-radius: 0.7em; transition: .15s ease-in-out;}
.custom-option:not(:last-child)                 {border-bottom: solid 1px rgba(255,255,255,0.15);}
.custom-option:hover                            {background: rgba(255,255,255,0.08);}
.custom-option.selected                         {background: var(--color0b);}

.custom-options:has(.local-info-text)           {max-height: none; overflow: visible;}
.custom-option .local-info                      {top: 0.1em;}

.file-upload                                    {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; gap: 0.5em; color: #999999; padding-top: 0.2em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.file-upload svg                                {display: block; width: 1.6em; height: 1.6em; fill: var(--color1); position: relative; top: -0.1em;}
.file-upload:hover                              {color: var(--color1);}
.file-upload input[type="file"]                 {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer;}
.file-upload .file-name                         {display: none;}

.files                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em;}
.files .file-item                               {display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 0.85em; color: var(--color0); font-weight: 600; background: var(--color2); padding: 0.6em 2.5em 0.4em 0.9em; position: relative; box-sizing: border-box; border-radius: 0.5em;}
.files .file-item .delete-btn                   {display: block; width: 1em; height: 1em; background: var(--color0c); border-radius: 100%; position: absolute; right: 0.9em; top: 0.8em; cursor: pointer; transform: rotate(45deg); transition: .15s ease-in-out;}
.files .file-item .delete-btn:after             {display: block; position: absolute; inset: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='386,229 283,229 283,126 229,126 229,229 126,229 126,283 229,283 229,386 283,386 283,283 386,283' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.files .file-item .delete-btn:hover             {background: #dc0537;}
.files:not(:has(.file-item))                    {display: none;}

.thanks                                         {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.5rem;}
.thanks .text                                   {display: block; width: 100%; text-align: center; font-size: min(2em, calc(0.8em + 3vw)); color: var(--color0); font-weight: 800; line-height: 1.2;}
.thanks .title span                             {display: block; margin-bottom: 0.2em;}
.thanks .img                                    {display: block; width: 100%; height: auto; border-radius: 1em; overflow: hidden; margin-bottom: 2em;}
.thanks .img img                                {display: block; width: 100%; height: auto;}
.thanks .connect                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 10%; padding: 1em; border-radius: 0.7em; border: solid 0.1em var(--color0b); box-sizing: border-box;}
.thanks .connect a                              {display: flex; align-items: center; gap: 0.4em; font-size: 1.1em; color: var(--color0); text-decoration: underline; text-decoration-color: transparent; padding-top: 0.15em; transition: .15s ease-in-out;}
.thanks .connect a svg                          {display: block; width: 1.25em; height: 1.25em; fill: var(--color0); position: relative; top: -0.1em;}
.thanks .connect a:hover                        {color: var(--color0b); text-decoration-color: var(--color0b);}
  @media screen and (min-width: 641px)          {
  .form-box:has(.thanks)                        {padding: 4em;}
  }

.contacts1                                      {display: flex; width: 100%; max-width: 29em; justify-content: space-between; padding: 1em; box-sizing: border-box; box-shadow: nonek;}
.contacts1 .img                                 {display: block; width: 28%; min-height: 2rem; border-radius: 0.6em; overflow: hidden;}  
.contacts1 .img img                             {display: block; width: 100%; height: 100%; object-fit: cover;}
.contacts1 ul                                   {display: flex; width: 66%; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap; container-type: inline-size;}
.contacts1 ul li                                {display: block; width: 100%; text-align: left; font-size: 5.6cqw;}
.contacts1 ul li:first-child                    {color: var(--color1);}

.logos-box                                      {max-width: 65rem; justify-content: center; align-items: center; gap: 0.5rem var(--logos-box-gap); --logos-box-gap: 1.2rem; --logos-box-count: 6;}
.logos-box a                                    {display: block; width: calc((100% / var(--logos-box-count)) - (var(--logos-box-gap) * ((var(--logos-box-count) - 1) / var(--logos-box-count))));}
.logos-box a img                                {display: block; width: 100%;}
  @media screen and (max-width: 960px)          {
  .logos-box                                    {--logos-box-count: 5;}
  }
  @media screen and (max-width: 768px)          {
  .logos-box                                    {--logos-box-count: 4;}
  } 
  @media screen and (max-width: 540px)          {
  .logos-box                                    {--logos-box-count: 3;}
  } 

#posuvnik                                                   {display: block; width: 100%; margin-bottom: 7rem;}
#posuvnik .posuvnik-obal                                    {display: flex; width: 100%; justify-content: center; gap: 1.6rem; flex-wrap: wrap; position: relative;}
#posuvnik input                                             {display: block; width: 100%; height: 0.8em; border-radius: 0.4em; border: none !important; background: white;}
#posuvnikPopisek                                            {display: none; width: 10em; height: 4em; justify-content: center; align-items: center; font-weight: 600; padding-top: 0.15em; box-sizing: border-box; position: absolute; top: 0em; transform: translateX(-5em); cursor: e-resize; transition: .15s ease-in-out;}
#posuvnikPopisek svg                                        {display: block; width: 100%; height: 100%; fill: var(--color1); object-fit: contain; position: absolute; inset: 0;}
#posuvnikPopisek:before,
#posuvnikPopisek:after                                      {display: block; width: 1.7em; height: 100%; position: absolute; top: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M165.1,512c-13.7,0-27.4-5.2-37.9-15.7c-20.9-20.9-20.9-54.8,0-75.7L291.9,256L127.3,91.4c-20.9-20.9-20.9-54.8,0-75.7 c20.9-20.9,54.8-20.9,75.7,0l202.5,202.5c20.9,20.9,20.9,54.8,0,75.7L203,496.3C192.5,506.8,178.8,512,165.1,512z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: 40% auto;}
#posuvnikPopisek:before                                     {left: 0; transform: rotate(180deg);}
#posuvnikPopisek:after                                      {right: 0;}
#posuvnikPopisek.remove                                     {opacity: 0;}
#posuvnikPopisek.remove.show                                {transition-delay: 0.6s; opacity: 1 !important;}
#posuvnikPopisek.hidden                                     {z-index: -100; opacity: 0;}

#posuvnik input[type=range]                                 {-webkit-appearance: none;}
#posuvnik input[type=range]::-webkit-slider-thumb           {-webkit-appearance: none;}
#posuvnik input[type=range]:focus                           {outline: none;}
#posuvnik input[type=range]::-ms-track                      {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}
#posuvnik input[type=range]::-webkit-slider-thumb           {-webkit-appearance: none; width: 2em; height: 2em; top: -0.6em; /*margin-left: -0.6em;*/ background: var(--color1) !important; border-radius: 100%; border: none; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.4); cursor: e-resize; transition: .15s ease-in-out;}
#posuvnik input[type=range]::-moz-range-thumb               {width: 2em; height: 2em; top: -0.6em; /*margin-left: -0.6em;*/ background: var(--color1) !important; border-radius: 100%; border: none; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.4); cursor: e-resize; transition: .15s ease-in-out;}
#posuvnik input[type=range]::-webkit-slider-thumb:hover     {background: var(--color1b) !important;}
#posuvnik input[type=range]::-moz-range-thumb:hover         {background: var(--color1b) !important;}

.budget-slider                                              {display: flex; width: 100%; justify-content: center; gap: 1.6rem; flex-wrap: wrap;}
.budget-slider .title                                       {display: block; width: 100%; font-size: 1.4em; font-weight: 600;}
  @media screen and (max-width: 1080px)                     {
  .budget-slider,                                
  .budget-slider-posuvnikPopisek                            {display: none;}             
  }
  @media screen and (min-width: 1080px)                     {                           
  .budget-slider-posuvnikPopisek                            {display: none;}             
  }

.price-calc #posuvnik                                       {margin-bottom: 5rem;}
.price-calc-posuvnikPopisek                                 {width: 9em !important; transform: translateX(-4.5em) !important;}
  @media screen and (min-width: 641px)                      {
  .price-calc-posuvnikPopisek svg:nth-of-type(2)            {display: none !important;}
  }
  @media screen and (max-width: 640px)                      {
  .price-calc-posuvnikPopisek                               {width: 5em !important; transform: translateX(-2.2em) !important;}
  .price-calc-posuvnikPopisek svg:nth-of-type(1),
  .price-calc-posuvnikPopisek .units                        {display: none !important;}
  }

.custom-table1                                        {max-width: 64rem; padding-bottom: 1em; --row-height: 3em; --row-radius: calc(var(--row-height) / 4);}
.custom-table1 > div                                  {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; position: relative;}
.custom-table1 > div > div                            {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em; text-align: center; font-size: 1.1em; color: var(--color0); padding-inline: 1.3em; box-sizing: border-box; position: relative; z-index: 1;}
.custom-table1 > div > div:nth-child(even)            {background: var(--color2);}
.custom-table1 .row                                   {height: var(--row-height); padding-top: 0.2em; box-sizing: border-box;}
.custom-table1 .row.check:after                       {display: block; width: 1.6em; height: 1.6em; position: relative; top: -0.1em; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M400,0.4C179.3,0.4,0.4,179.3,0.4,400c0,220.7,178.9,399.6,399.6,399.6c220.7,0,399.6-178.9,399.6-399.6 C799.6,179.3,620.7,0.4,400,0.4z M548.1,348.3L401,495.5c-22.6,22.6-59.3,22.6-81.9,0l-67.2-67.2c-15.6-15.6-15.6-40.9,0-56.5 c15.6-15.6,40.9-15.6,56.5,0l51.7,51.7l131.6-131.6c15.6-15.6,40.9-15.6,56.5,0C563.7,307.4,563.7,332.7,548.1,348.3z' width='1' height='1' fill='rgb(0,200,248)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.custom-table1 .row .stars                            {display: block; width: 5em; height: auto;}
.custom-table1 .row:last-of-type                      {height: 4rem;}
.custom-table1 .quote                                 {display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: 1em;}
.custom-table1 .quote > span                          {display: block; width: 100%; font-size: 1.25em; line-height: 1.2;}
.custom-table1 .quote .card                           {font-size: 0.8em; margin: 0 !important;}
.custom-table1 .first .row                            {align-content: flex-start;}
.custom-table1 .first .row span                       {text-align: left;} 
.custom-table1 .local-info                            {margin-left: 0; position: relative; top: -0.12em;}
.custom-table1 .head .basics                          {display: flex; width: 100%; align-items: center; flex-wrap: wrap;}
.custom-table1 .head .basics .name                    {display: block; font-size: 1.3em; font-weight: 800; line-height: 1.2; transition: .15s ease-in-out;}
.custom-table1 .head .basics .name br                 {display: none;}
.custom-table1 .free                                  {display: flex; height: 2em; align-items: center; font-size: 0.95em; color: white; background: #45d030; padding: 0.12em 1.3em 0; border-radius: 1em; box-sizing: border-box; position: relative; top: -0.1em;}
.custom-table1 .footer-info                           {display: block; width: 100%; text-align: left; font-size: 0.8em; color: #999999; box-sizing: border-box;}
.custom-table1 .button                                {font-size: 0.8em; box-shadow: none;}
.custom-table1.prices                                 {padding-bottom: 0;}
.custom-table1.prices .head                           {padding-bottom: 0.15em;}
.custom-table1.prices .head .price                    {display: flex; justify-content: center; align-items: flex-end; gap: 0 0.4em; flex-wrap: wrap; text-align: center; margin-top: 0.2em;}
.custom-table1.prices .head .price span               {display: block; font-size: 0.9em; color: var(--color0); transition: .15s ease-in-out;}
.custom-table1.prices .head .price span.num           {font-size: 1.5em; color: var(--color1); font-weight: 800;}
.custom-table1.prices .head .price span:nth-child(2)  {position: relative; top: -0.38em;}
.custom-table1.prices .head .price span:nth-child(3)  {width: 100%; margin-top: -0.15em;}
.custom-table1 .col.highlight .button                 {outline: solid 0.13em var(--color0b);}
.custom-table1.compare .first .row:last-child         {font-size: 1.1em; font-weight: 800;}
.custom-table1.compare .basics > img                  {display: block; width: 4em; height: 4em; border-radius: 100%; padding: 0.15em; border: solid 0.1em var(--color1); box-sizing: border-box; margin-top: 0.6em;}
.custom-table1.compare .star-total                    {display: flex; align-items: center; gap: 0.3em; font-size: 1.1em; font-weight: 800; color: var(--color0); padding-top: 0.1em; margin-left: -0.25em; box-sizing: border-box;}
.custom-table1.compare .star-total img                {display: block; width: 1.1em; height: auto; position: relative; top: -0.17em;}
.custom-table1.compare .footer-info                   {text-align: right; padding: 1rem 1.15rem 0;}
  @media screen and (min-width: 1081px)               {
  .custom-table1                                      {padding-top: 0; padding-inline: 1em; border: solid 0.15rem var(--color1);}
  .custom-table1 > div                                {align-items: stretch; padding-top: 0; padding-inline: 0; position: relative; top: -0.15rem;}
  .custom-table1 > div > div                          {flex-direction: column;}
  .custom-table1 > div:nth-child(1) > div             {border-radius: var(--row-radius) 0 0 var(--row-radius);}
  .custom-table1 > div:nth-child(5) > div             {border-radius: 0 var(--row-radius) var(--row-radius) 0;}
  .custom-table1 .quote                               {width: 100%; text-align: left; margin-top: 0.5rem;}
  .custom-table1 .quote > span                        {max-width: 12em;}
  .custom-table1 .quote .card                         {justify-content: flex-start;}
  .custom-table1 .quote .card span                    {color: #999999;}
  .custom-table1 .head .basics                        {justify-content: center; text-align: center;}
  .custom-table1 .head .basics .name                  {width: 100%; text-align: center;}
  .custom-table1 .col .head:before                    {display: block; width: 100%; height: 95%; opacity: 0; background-image: linear-gradient(to top, var(--color0), var(--color0b)); border-radius: 0 0 1.8em 1.8em; position: absolute; left: 0; top: 0; z-index: -1; content: ""; transition: .15s ease-in-out;}
  .custom-table1 .col.highlight .head:before          {opacity: 1;}
  .custom-table1 .col.highlight .head :is(.name, .price span)
                                                      {color: white !important;}
  .custom-table1 :is(.mobile-only, .mobile-only-sel)  {display: none !important;}
  .custom-table1.prices .first                        {width: 32%;}
  .custom-table1.prices .col                          {width: 17%;}
  .custom-table1.prices .head                         {height: 10em; gap: 0;}
  .custom-table1.prices .head .price                  {width: 100%;}
  .custom-table1.compare .first                       {width: 34%;}
  .custom-table1.compare .col                         {width: 22%;}
  .custom-table1.compare .head                        {height: 12em;}
  .custom-table1.compare .head .button                {margin-top: 0.25em;}

  .article .compare                                   {width: 56rem; margin-inline: calc(50% - 28rem);}
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .custom-table1 .first                               {width: 32%;}
  .custom-table1 .col                                 {width: 17%;}
  .custom-table1 .head .basics                        {font-size: 0.9em;}
  .custom-table1 .head .button                        {font-size: 0.85em;}
  }
  @media screen and (max-width: 1080px)               {
  .custom-table1                                      {gap: 1em; background: none; box-shadow: none; font-size: 0.85em; margin: 1rem 0 0; padding: 0;}
  .custom-table1 > div:nth-child(1)                   {width: 100% !important;}
  .custom-table1 > div:nth-child(1) .row              {display: none;}
  .custom-table1 > div:nth-child(n+2)                 {background: white; border-radius: 1em; border: solid 0.1em var(--color1);}
  .custom-table1 :is(.row)                            {width: calc(100% - 0.8rem); margin-left: 0.8rem; padding-inline: 12rem 0;}
  .custom-table1 .head .basics                        {height: 100%; justify-content: space-between; box-sizing: border-box;}
  .custom-table1 .head .basics .name                  {text-align: left; font-size: 1.8em; margin-bottom: -0.12em;}
  .custom-table1 .head .basics > img                  {margin: 0;}   
  .custom-table1 .first .head                         {height: auto !important; position: relative; top: 0.25em;}
  .custom-table1 .quote                               {justify-content: center; margin-block: var(--gap1); font-size: 1.25em;}
  .custom-table1 .quote > span                        {max-width: 18em; text-align: center; color: white;}
  .custom-table1 .quote .card span                    {color: white;}
  .custom-table1 .mobile-only-sel                     {display: flex; width: calc(100% - 12rem); height: 5em; justify-content: flex-end; position: absolute; right: -0.1em; top: calc(50% - 2.5em); z-index: -1;}
  .custom-table1 .mobile-only-sel:before              {display: block; width: calc(6rem + 1rem + ((100% - 7rem) / 2)); height: 100%; background-image: linear-gradient(to top, var(--color0), var(--color0b)); border-radius: 2.5em 0 0 2.5em; content: "";}
  .custom-table1 .head:has(.mobile-only-sel) .price span:nth-child(2),
  .custom-table1 .head:has(.mobile-only-sel) .price span:nth-child(3)
                                                      {color: white;}
  .custom-table1 .row                                 {border-radius: var(--row-radius) 0 0 var(--row-radius);}
  .custom-table1 .row .row-title                      {display: flex; height: 100%; align-items: center; gap: 0.3em; font-size: 1em; color: var(--color0); padding-top: 0.2em; box-sizing: border-box; position: absolute; left: 0.8em; top: 0;}
  .custom-table1 .desktop-only                        {display: none;}
  .custom-table1 .first                               {order: 2;}
  .custom-table1 .col.highlight .head .price span     {color: white !important;}
  .custom-table1 .col:nth-child(2)                    {order: 0;}
  .custom-table1 .col:nth-child(3)                    {order: 1;}
  .custom-table1 .col:nth-child(4)                    {order: 3;}
  .custom-table1 .col:nth-child(5)                    {order: 4;}
  .custom-table1.prices .head                         {height: 6em;} 
  .custom-table1.prices .head .price                  {width: calc(100% - 12.5rem);}
  .custom-table1.prices .head .price span             {font-size: 0.85em;}
  .custom-table1.prices .head .price span.num         {font-size: 1.65em;}
  .custom-table1.prices .head .price span:nth-child(3){margin-top: -0.22em;}
  .custom-table1.prices .row:nth-child(11):before     {display: flex; height: 100%; align-items: center; font-size: 0.8em; color: #999999; padding-top: 0.2em; box-sizing: border-box; position: absolute; left: 0.8em; top: 0.15em; content: "Ceny jsou nezávazné a bez DPH";}
  .custom-table1.compare                              {justify-content: center;}  
  .custom-table1.compare > div:nth-child(n+2)         {padding-bottom: 1em;}
  .custom-table1.compare :is(.col .head, .row)        {width: calc(100% - 0.8rem); margin-left: 0.8rem; padding-inline: 13rem 0;}
  .custom-table1.compare .head                        {height: 6em;} 
  .custom-table1.compare .head .basics                {width: 14rem; justify-content: flex-start; align-items: center; align-content: center; gap: 0.8em; padding-left: 0.8rem; position: absolute; left: 0; top: 0;}
  .custom-table1.compare .head .basics *              {justify-content: flex-start !important; text-align: left !important;}
  .custom-table1.compare .head .basics .name          {width: 6em; order: 2; font-size: 1.5em; position: relative; top: 0.1em;}
  .custom-table1.compare .head .basics > img          {margin: 0;}   
  .custom-table1.compare .head .button                {width: 6rem; margin-top: 0.06em; padding-inline: 0;}
  .custom-table1.compare .footer-info                 {text-align: center;}
  }
  @media screen and (min-width: 801px) and (max-width: 1080px){
  .custom-table1 > div                                {width: calc(50% - 0.5em);}
  .custom-table1.prices .head .price span             {font-size: 0.85em;}
  .custom-table1.prices .head .price span.num         {font-size: 1.5em;}
  }  
  @media screen and (max-width: 800px)                {
  .custom-table1                                      {width: 100%; max-width: 26rem;}
  .custom-table1.prices .head .price                  {margin-top: 0.25em;}
  }
  @media screen and (max-width: 440px)                {
  .custom-table1.compare .head .basics .name br       {display: block;}
  }
  @media screen and (max-width: 360px)                {
  .custom-table1.compare .head .basics .name          {font-size: 1.4em;}
  }  
  @media screen and (min-width: 769px)                {
  .other-services .swiper-slide:nth-child(1)          {justify-content: center;}
  .other-services .swiper-slide:nth-child(n+2)        {display: none;}
  }
  @media screen and (max-width: 768px)                {
  .other-services .swiper-slide                       {overflow: visible;}
  .other-services .swiper-slide:nth-child(1),
  .pricelist table tr td:nth-child(1)                 {width: 15rem;}
  .other-services .swiper-slide:nth-child(2),
  .pricelist table tr td:nth-child(2)                 {width: 12rem;} 
  .other-services .swiper-slide:nth-child(3),
  .pricelist table tr td:nth-child(3)                 {width: 20rem;} 
  .other-services .swiper-slide .pricelist            {width: 47rem; margin-right: -31rem;}
  }

.pricelist                                            {display: block; width: 100%; max-width: 64rem; overflow-x: auto;}
.pricelist table                                      {width: 100%; text-align: left;}
.pricelist table th                                   {font-size: 1.15em; color: var(--color1); font-weight: 700;}
.pricelist table :is(td, th)                          {text-align: center; padding: 0.9rem 0.6rem 0.7rem; box-sizing: border-box;}
.pricelist table :is(td, th):first-child              {padding-left: 1.5rem; border-radius: 1.5rem 0 0 1.5rem;}
.pricelist table :is(td, th):last-child               {padding-right: 1.5rem; border-radius: 0 1.5rem 1.5rem 0;}
.pricelist table tr:nth-child(odd) td                 {background: rgba(255,255,255,0.1);}
  @media screen and (max-width: 1280px)               {
  .pricelist table th                                 {font-size: 1.05em;}
  .pricelist table td                                 {font-size: 0.9em;}
  }
  @media screen and (min-width: 769px)                {
  .pricelist table                                    {table-layout: fixed;}
  .pricelist table :is(th, td):nth-child(1),
  .pricelist table :is(th, td):nth-child(3)           {width: calc(50% - 6rem);} 
  .pricelist table :is(th, td):nth-child(2)           {width: 12rem;} 
  }
  @media screen and (max-width: 768px)                 {
  .pricelist table :is(td, th)                         {text-align: left;}
  }

.faq                                            {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 1.2em;}
.faq article                                    {display: block; width: 100%; box-sizing: border-box; position: relative; z-index: 1; overflow: hidden;}
.faq article:not(:last-of-type)                 {padding-bottom: 1em; border-bottom: solid 1px rgba(255,255,255,0.2);}
.faq :is(.title, p)                             {display: block; width: 100%; text-align: left; box-sizing: border-box;}
.faq .title                                     {font-size: 1.2em; font-weight: 800; padding-right: 1.5em; cursor: pointer; position: relative; transition: .15s ease-in-out;}                                             
.faq .title img                                 {display: inline-block; width: auto; height: 0.94em; position: relative; top: 0.1em;}
.faq .title:after                               {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; color: white; font-size: 0.95em; font-weight: 500; border: solid 0.12em white; border-radius: 100%; padding-top: 0.17em; box-sizing: border-box; position: absolute; right: 0; top: 0.1em; content: "+"; transition: .15s ease-in-out;}
.faq .title:hover                               {color: var(--color1);}
.faq .collapse                                  {display: none; width: 100%; padding-block: 0.6rem 0.4rem; box-sizing: border-box;}
.faq .collapse :is(p, li)                       {font-size: 0.85em;}
.faq .collapse p:not(:first-child)              {margin-top: 0.65em;}
.faq .collapse ul                               {margin-top: 0;}
.faq article.sel .title                         {color: var(--color1);}
.faq article.sel .title:after                   {content: "-";}

.faq:has(dt)                                    {gap: 0;}
.faq dt:not(:first-of-type)                     {padding-top: 0.8em; margin-top: 0.55em; border-top: solid 1px rgba(255,255,255,0.2);}
.faq :is(dt, dd)                                {display: block; width: 100%; text-align: left; box-sizing: border-box;}
.faq dt                                         {font-size: 1.2em; font-weight: 800; padding-right: 1.5em; cursor: pointer; position: relative; transition: .15s ease-in-out;}                                             
.faq dt:after                                   {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; color: white; font-size: 0.9em; font-weight: 500; border: solid 0.12em white; border-radius: 100%; padding-top: 0.17em; box-sizing: border-box; position: absolute; right: 0; top: 0.95em; content: "+"; transition: .15s ease-in-out;}
.faq dt:first-of-type::after                    {top: 0.1em;}
.faq dt:hover                                   {color: var(--color1);}
.faq dd                                         {display: none; width: 100%; padding-block: 0.2em;}
.faq dd :is(p, li)                              {font-size: 0.85em;}
.faq dd :is(p, ul):not(:first-child)            {margin-top: 0.65em !important;}
.faq dt.sel                                     {color: var(--color1);}
.faq dt.sel:after                               {content: "-";}

.article .faq dd                                {display: block;}

.job-list                                       {display: block; width: 100%;}                                     
.job-list table                                 {width: 100%; border-collapse: separate; border-spacing: 0 1.6rem;}                                     
.job-list table tr td                           {color: var(--color0); line-height: 1.3; vertical-align: middle;}
.job-list table tr td span                      {display: flex; align-items: center; padding-top: 0.15em; box-sizing: border-box; white-space: nowrap;}
.job-list table tr td:first-child               {text-align: left;}
.job-list table tr td:first-child a             {color: var(--color0); font-weight: 700; transition: .15s ease-in-out;}
.job-list table tr td:first-child a:hover       {color: var(--color1);}
.job-list table tr td:nth-child(n+2) span       {font-size: 0.85em; padding-inline: 0.7em; border-left: solid 1px var(--color1); box-sizing: border-box;}
.job-list table tr td:last-child                {text-align: right; padding-inline: 0.65em;}
.job-list table tr td:last-child .button        {flex-shrink: 0; font-size: 0.8em; box-shadow: none; white-space: nowrap;}
  @media screen and (min-width: 641px)          {
  .job-list table tr td                         {background: white; text-align: center; padding-block: 0.6em;}
  .job-list table tr td span                    {min-height: 2.1em;}
  .job-list table tr td:first-child             {border-radius: 2em 0 0 2em; padding-inline: 1.3em;}
  .job-list table tr td:nth-child(n+2) span     {justify-content: center; text-align: center;}
  .job-list table tr td:last-child              {border-radius: 0 2em 2em 0;}
  }
  @media screen and (max-width: 640px)          {
  .job-list table                               {display: block;}
  .job-list table tbody                         {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;}
  .job-list table tr                            {display: flex; width: 100%; flex-wrap: wrap; background: white; border-radius: 2em; padding: 0.65em 8em 0.65em 1.2em; box-sizing: border-box; position: relative;}
  .job-list table tr td                         {display: block;}
  .job-list table tr td span                    {}
  .job-list table tr td:first-child             {width: 100%;}
  .job-list table tr td:nth-child(n+2) span     {}
  .job-list table tr td:nth-child(2) span       {padding-left: 0; border-left: none;}
  .job-list table tr td:last-child              {display: flex; height: 100%; align-items: center; position: absolute; right: 0; top: 0; padding-right: 1.1em;}
  }

.job-info1                                      {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap;}
.job-info1 li                                   {display: block; width: auto; font-weight: 800; position: relative; box-sizing: border-box;}
.job-info1 li:not(:last-child)                  {padding-right: 1em;}
.job-info1 li:not(:last-child):after            {display: block; width: 0.12em; height: 1.1em; background: white; position: absolute; top: 0.08em; right: 0.44em; content: "";}

.job-info3                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em; text-align: left;}
.job-info3 .headline                            {display: block; width: 100%; color: var(--color1); font-weight: 800; padding-left: 1.6em; box-sizing: border-box; position: relative;}
.job-info3 .headline:not(:first-child)          {margin-top: 1rem;}
.job-info3 .headline img                        {display: inline-block; width: 1.15em; height: 1.15em; position: absolute; left: 0; top: 0;}
.job-info3 ul                                   {display: block; width: 100%;}
.job-info3 ul li                                {display: block; width: 100%; line-height: 1.8; padding-left: 2.2em; box-sizing: border-box; position: relative;}
.job-info3 ul li:before                         {display: block; width: 0.35em; height: 0.35em; background: white; border-radius: 100%; position: absolute; left: 0.9em; top: 0.65em; content: "";}

.job-info4                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em; padding: 2em;}
.job-info4 li                                   {text-align: left;}
.job-info4 li strong                            {color: var(--color1);}
  @media screen and (min-width: 769px)          {
  .job-info4                                    {width: calc(100% + 4em); margin-inline: -2em;}
  }

.img-full1                                      {padding: 0.7em;}
.img-full1 img                                  {display: block; width: 100%; border-radius: calc(0.45 * var(--border-radius1));}

.comment1                                       {margin-top: -0.5rem;}
  @media screen and (max-width: 1080px)         {
  .comment1.desktop-only                        {display: none;}
  }

.ppcone-team1                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
.ppcone-team1 .img-full1                        {width: 80%; max-width: 36em; margin-bottom: -30%;}
.ppcone-team1 .ppcone-photos                    {margin-top: 0;}
  @media screen and (min-width: 769px)          {
  .ppcone-team1 .ppcone-photos                  {margin-bottom: 0;}
  }
  @media screen and (max-width: 768px)          {
  .ppcone-team1 .img-full1                      {margin-bottom: -5%;}
  }

.share-box                                      {padding: 1.5em min(5em, calc(1em + 5vw));}
.share-box :is(h2, .h2)                         {font-size: 1.5em; margin-bottom: 0.8em;}

.icon-links                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.7em;}
.icon-links a                                   {display: block; width: 2.2em; height: 2.2em; border-radius: 100%;}
.icon-links a svg                               {display: block; width: 100%; height: 100%; fill: rgba(255,255,255,0.6); transition: .15s ease-in-out;}
.icon-links a svg .white                        {fill: var(--color0);}
.icon-links a:nth-child(1):hover svg            {fill: #2d78f3;}
.icon-links a:nth-child(2):hover svg            {fill: #2d78f3;}
.icon-links a:nth-child(3):hover svg            {fill: #00e676;}
.icon-links a:nth-child(4):hover svg            {fill: black;}
.icon-links a:nth-child(5):hover svg            {fill: #007ebb;}
.icon-links a:nth-child(6):hover svg            {fill: #ce3e21;}
.icon-links a:hover svg .white                  {fill: white;}
  @media screen and (min-width: 1081px)         {
  .icon-links a:nth-child(2)                    {display: none;}
  }

.did-you-know1 .swiper-slide > div              {gap: 2rem;}
.did-you-know1 .swiper-pagination               {margin-top: 1rem;}

.img-text                                       {display: flex; width: 100%; max-width: 60rem; justify-content: center; align-items: center; flex-wrap: wrap; gap: max(5rem, var(--section-padding));}
.img-text > div                                 {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5em 8%;}
.img-text > div > *                             {display: flex; width: 90%; justify-content: center; height: auto; flex-wrap: wrap; gap: 1em;}
.img-text .img                                  {display: block; max-width: 28rem; height: auto; transition: .3s ease-in-out;}
.img-text .img img                              {display: block; width: 100%; height: auto;}
.img-text .img:hover                            {transform: scale(1.08);}
.img-text .img.border-radius                    {border-radius: var(--border-radius1); overflow: hidden;}
.img-text > div > div                           {max-width: 40rem;}
.img-text h2                                    {font-size: 1.5em; color: var(--color1); margin-bottom: -0.15em;}
.img-text .button-price                         {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 0.8em 1.2em;}
.img-text .button-price > span                  {display: block; position: relative; top: 0.05em;}
  @media screen and (min-width: 1081px)         {
  .img-text > div > .img                        {width: 40%;}
  .img-text > div > .img.desktop-bigger         {transform: scale(1.25);}
  .img-text > div > .img.desktop-bigger:hover   {transform: scale(1.32);}
  .img-text > div > div                         {width: 48%; justify-content: flex-start;}
  .img-text :is(h2, p)                          {text-align: left;}
  .img-text > div:nth-child(even) > div         {order: -1;}
  .img-text .button-price                       {justify-content: flex-start; flex-direction: row;}
  }

.preview                                        {display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; background: white; text-align: left; border-radius: var(--border-radius1); padding: 0.75em; box-sizing: border-box;}
.preview .img                                   {display: block; width: 100%; flex-grow: 0; padding-top: 75%; background: white; position: relative; box-sizing: border-box; border-radius: calc(0.8 * var(--border-radius1)); overflow: hidden; transition: .15s ease-in-out;}
.preview .img span                              {display: block; position: absolute; inset: 0;}
.preview .img span img                          {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview .img:hover                             {opacity: 0.85;}
.preview div                                    {display: flex; width: calc(100% - 1.5em); flex-grow: 1; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 1em; padding: 1em 0 4.5em; box-sizing: border-box; position: relative;}
.preview div .info                              {display: block; width: 100%; font-size: 0.85em; color: #999999;}
.preview div .title                             {display: block; width: 100%; font-size: 1.2em; color: var(--color0b); font-weight: 800; line-height: 1.2;}
.preview div .title a                           {color: inherit; transition: .15s ease-in-out;}
.preview div .title a .text-color1              {color: inherit;}
.preview div .title a:hover                     {color: var(--color1) !important;}
.preview div .perex                             {display: block; width: 100%; font-size: 0.85em; color: var(--color0);}
.preview div .button                            {font-size: 0.9em; box-shadow: none; position: absolute; left: 0; bottom: 0.75em;}

.blog                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 1.6em 2.1em;}
.blog > *                                       {width: 100%;}
  @media screen and (min-width: 1081px)         {
  .blog > *                                     {width: calc(33.33% - 1.4em);}
  }
  @media screen and (min-width: 681px) and (max-width: 1080px){
  .blog                                         {max-width: 50rem;}
  .blog > *                                     {width: calc(50% - 1.05em);}
  }
  @media screen and (max-width: 680px)          {
  .blog                                         {max-width: 24rem;}
  }

.pagination                                     {display: flex; border: solid 0.1em var(--color1); border-radius: 0.45em; margin-top: 1rem;}
.pagination a                                   {display: flex; width: 2.4em; height: 2.2em; justify-content: center; align-items: center; color: var(--color1); padding-top: 0.18em; box-sizing: border-box; transition: .15s ease-in-out;}
.pagination a:hover                             {background: rgba(255,255,255,0.15);}
.pagination a.sel                               {background: var(--color1); color: white;}
.pagination a img                               {display: block; width: 0.8em; height: auto; position: relative; top: -0.12em;}
.pagination a:not(:last-child)                  {border-right: solid 0.1em var(--color1);}

.blog-carousel                                  {--box-shadow-size: min(1.6em, calc(0.5em + 2vw)); --box-shadow-color1: 0 0 var(--box-shadow-size) rgba(0,200,248,0.9);}
.blog-carousel .swiper-slide                    {padding: var(--box-shadow-size); box-sizing: border-box;}
  @media screen and (min-width: 1281px)         {
  .blog-carousel                                {width: 110%; margin-inline: -5%;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .blog-carousel                                {width: 90%;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .blog-carousel .swiper                        {width: 110%; margin-inline: -5%;}
  }  
  @media screen and (max-width: 768px)          {
  .blog-carousel                                {padding-inline: 0;}
  .blog-carousel .swiper                        {width: 26em; max-width: 94%; overflow: visible;}
  .blog-carousel .swiper-slide                  {opacity: 0.2;}
  .blog-carousel .swiper-slide-active           {opacity: 1;}
  }    

.our-team1 h2 .note1                            {display: inline-block; font-size: 0.6em; margin-left: 0.25em; position: relative; top: -0.23em;}
.our-team1 h2 svg                               {fill: white;}
.our-team1 > div .img img                       {background: white; border-radius: var(--border-radius1); box-sizing: border-box;}
.our-team1 > div:nth-child(1) .img img          {padding-bottom: 0.5em;}
.our-team1 > div:nth-child(4) .img img          {padding: 0.5em;}
.article, .article .block                       {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap); --article-gap: min(3em, calc(0.8em + 4vw));}
.article .no-gap-top                            {margin-top: calc(0px - 0.6 * var(--article-gap));}
.article .no-gap-bottom                         {margin-bottom: calc(0px - 0.6 * var(--article-gap));}
.article .date                                  {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.65em; text-align: center; position: relative; bottom: max(-2em, -5vw); margin-top: max(-1em, -5vw);}
.article .date img                              {display: block; width: 2.2em; height: 2.2em; padding: 0.2em; border: solid 0.1em var(--color1); border-radius: 100%; box-sizing: border-box; position: relative; top: -0.15em;}
.article h1                                     {max-width: 100%;}
.article *:not(h1)                              {text-align: left; text-wrap: unset;}
.article .card:not(.with-date)                  {width: auto; margin-top: 2em;}
.article .card.with-date                        {margin-block: calc(0px - 0.5 * var(--article-gap)) calc(0px - 0.9 * var(--article-gap));}
.article .image                                 {display: block; width: 100%; flex-grow: 0; padding-top: 56%; position: relative; box-sizing: border-box; border-radius: var(--border-radius1); overflow: hidden;}
.article .image span                            {display: block; background: white; padding: 0.5em; box-sizing: border-box; position: absolute; inset: 0;}
.article .image span img                        {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(0.8 * var(--border-radius1));}
.article .image.auto                            {padding: 0;}
.article .image.auto span                       {position: relative; inset: auto;}
.article .image.auto span img                   {display: block; width: 100%; height: auto;}
.article h2                                     {max-width: 100%; font-size: min(2rem, calc(0.7rem + 3vw)); color: var(--color1); margin-bottom: calc(0px - 0.3 * var(--article-gap))}
.article h3                                     {max-width: 100%; font-size: min(1.5rem, calc(0.45rem + 3vw)); margin-bottom: calc(0px - 0.3 * var(--article-gap))}
.article :is(ul, ol)                            {display: flex; flex-wrap: wrap; gap: 0.8em; padding: 0 0 0 1.2em; margin: 0;}
.article :is(ul li, ol li)                      {display: block; width: 100%; padding-left: 1.6em; position: relative; box-sizing: border-box;}
.article :is(ul > li, ol > li):before           {display: block; position: absolute; content: "";}
.article ul > li:before                         {width: 0.4em; height: 0.4em; background: white; left: 0.1em; top: 0.5em; border-radius: 100%;}
.article ol                                     {list-style-type: none; counter-reset: li;}
.article ol > li                                {counter-increment: li;}
.article ol > li:before                         {color: white; font-weight: 800; left: 0; top: 0; content: counter(li)".";}
.article li > ol, .article li > ul              {gap: 0.3em; padding: 0; margin-block: 0.75em;}
.article ol.ol2                                 {padding: 0;}
.article ol.ol2 > li                            {padding: 0;}
.article ol.ol2 > li:before                     {display: inline-block; color: var(--color1); position: relative; inset: auto; margin-right: 0.15em; content: counter(li)")";}
.article ol.ol2 > li > ul                       {padding-left: 1.2em;}
.article ol.ol2 > li > .image                   {margin-block: calc(0.7 * var(--article-gap)) calc(0.6 * var(--article-gap))}
.article p + p                                  {margin-top: calc(-0.6 * var(--article-gap));}
.article :is(ul li, ol li):has(h3)              {margin-top: 1em;}
.article :is(ul li, ol li):has(h3):before       {font-size: min(1.35rem, calc(0.35rem + 3vw)); top: -0.1em;}
.article :is(ul li h3, ol li h3)                {font-size: min(1.35rem, calc(0.35rem + 3vw)); margin-bottom: 0;}

.article :is(ul li p, ol li p)                  {margin-top: calc(0.4 * var(--article-gap));}
.article .table                                 {display: block; width: 100%; overflow-x: auto; padding: 1.5em; box-sizing: border-box;}
.article .table table                           {width: 100%;}
.article .table table :is(th, td)               {padding: 0.6rem 0.6rem 0.5rem; vertical-align: top;}
.article .table table th                        {color: var(--color1); font-weight: 700; padding-top: 0;}
.article .table table td                        {font-size: 0.9em; border-top: solid 1px rgba(255,255,255,0.3);}
.article .table table tr:last-child td          {padding-bottom: 0;}
.article .table .table-note                     {display: block; width: 100%; font-size: 0.9em; font-style: italic; margin-top: 1.6em;}

.article .share-box                             {width: 100%;}
.article .share-box .h2                         {text-align: center;}
.article .numbering                             {display: inline-block;}
.article h2 .numbering                          {min-width: 1.05em;}
.article p .numbering                           {min-width: 2.4em;}
.article figure                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 1.4em;}
.article figure figcaption                      {display: block; width: 100%; text-align: center;}
.article p + :is(ul, ol)                        {margin-top: calc(-0.7 * var(--article-gap));}
  @media screen and (min-width: 769px)          {
  .article .image                               {width: 106%; margin-inline: -3%;}
  }
  @media screen and (max-width: 768px)          {
  .article .card.with-date                      {margin-bottom: calc(0px - 0.2 * var(--article-gap));}
  }
  @media screen and (min-width: 541px)          {
  .article .card.with-date > img                {width: 2.2em; height: 2.2em; padding: 0.15em; top: -0.15em;}
  .article .card.with-date > div > span         {display: inline-block;}
  .article .card.with-date > div > span:not(:last-child)::after 
                                                {display: inline-block; margin-inline: 0.35em 0.15em; position: relative; top: -0.05em; content: "|";}
  }

.article .article-nav > li:before               {width: 1em; height: 1em; background: url("images/button-arrow-color1.svg") no-repeat center center; background-size: contain; top: 0.11em;}


.table1                                         {display: block; width: 100%; padding: 1.5em; box-sizing: border-box;}
.table1 table                                   {width: 100%;}
.table1 table thead th,
.table1 table tbody tr:not(:last-of-type) td    {padding-bottom: 0.5em; border-bottom: solid 1px rgba(255,255,255,0.25);}
.table1 table thead th                          {padding-top: 0; color: var(--color1); font-weight: 700;}
.table1 table :is(th, td)                       {padding: 0.7em 0.6em 0.45em; vertical-align: top;}
.table1 table tbody tr:last-of-type td          {padding-bottom: 0;}
  @media screen and (max-width: 768px)          {
  .table1                                       {font-size: 0.9em; padding: 1.2em;}   
  }

.cross-links                                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.5em 0;}
.cross-links > div                              {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 0.65em 1.2em; padding: 1.4em; box-sizing: border-box;}
.cross-links > div .title                       {display: block; width: 100%; text-align: center; font-size: 1.25em; font-weight: 700; padding-top: 0.2em;}
.cross-links > div .button                      {font-size: 0.8em;}
  @media screen and (min-width: 769px)          {
  .cross-links.cl2 > div                        {width: 49.5%;}
  .cross-links:not(.cl2) > div .title           {width: auto;}
}

.gdpr .block                                    {gap: 1.5em;}
.gdpr .block h2                                 {margin-bottom: 0;}
.gdpr .block .image                             {width: 100%; margin: 0;}

.quick-nav                                      {width: 100%; padding: min(2.5em, calc( 0.6em + 3vw));}
.quick-nav .title                               {display: flex; width: 100%; align-items: center; gap: 0.3em; font-size: 1.25em; font-weight: 800;}
.quick-nav .title img                           {display: block; width: 1.15em; height: 1.15em; position: relative; left: -0.2em; top: -0.1em;}
.quick-nav ol.ol2                               {gap: 0.3em; font-size: 1.1em; margin-top: 0.8em;}
.quick-nav ol.ol2 > li:before                   {width: 1.7em; margin-right: 0; content: counter(li)".";}
.quick-nav ol.ol2 > li a                        {text-decoration: none;}
.quick-nav ol.ol2 > li a:hover                  {color: var(--color1);}

.error-page                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2.5rem;}
.error-page > img                               {display: block; width: 100%; height: auto;}
  @media screen and (min-width: 1081px)         {
  .error-page                                   {max-width: 32rem; gap: 1.5rem;}
  .error-page-headline br                       {display: none;} 
  }

.hero-propagation .slide-button                 {display: block; position: absolute; left: 7%; bottom: 9%;}
.hero-propagation .slide-button .button         {box-shadow: none;}

.flip                                           {display: block; width: 100%; position: relative;}
.flip .side                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); position: relative; transition: .4s ease-in-out}
.flip .side.s2                                  {pointer-events: none; position: absolute; left: 0; top: 0; opacity: 0; z-index: -1; transform: scale(0.7);}
.flip.flipped .side.s1                          {opacity: 0; transform: scale(0.7); pointer-events: none; }
.flip.flipped .side.s2                          {z-index: 2; opacity: 1; transform: scale(1); pointer-events: all;}
  
.flip .local-info-text > span .price            {display: block; font-size: 1.25em; color: var(--color1); margin-top: 0.3em;}
.flip .side.s1 .custom-option                   {position: relative;}
.flip .side.s1 .custom-option .local-info-text                {height: 10rem; align-items: center; align-content: center; bottom: calc(50% - 6rem);}
.flip .side.s1 .custom-option .local-info-text > span:after   {left: auto; right: -0.5rem; bottom: calc(50% - 0.7rem);}
.flip .side.s1 .custom-options:not(:hover) .custom-option.selected .local-info-text,
.flip .side.s1 .custom-option:hover .local-info-text,
.flip .side.s1 .custom-option .local-info-text.show           {left: auto; right: calc(100% + 0.9rem); opacity: 1;}  

.flip .cross                                    {display: block; width: 1.4em; height: 1.4em; background: var(--color0e); border-radius: 100%; position: absolute; right: 0.8em; top: 0.8em; cursor: pointer; transition: .15s ease-in-out;}
.flip .cross:hover                              {filter: brightness(0.9);}
.flip .cross:before, .flip .cross:after         {display: block; width: 60%; height: 0.1em; background: white; position: absolute; left: 20%; top: calc(50% - 0.05em); content: "";}
.flip .cross:before                             {transform: rotate(45deg);}
.flip .cross:after                              {transform: rotate(-45deg);}
  @media screen and (min-width: 481px) and (max-width: 540px){
  .flip.flipped                                 {margin-bottom: calc(21rem - 50vw);}
  }
  @media screen and (min-width: 371px) and (max-width: 480px){
  .flip.flipped                                 {margin-bottom: calc(30rem - 50vw);}
  }
  @media screen and (max-width: 370px)          {
  .flip.flipped                                 {margin-bottom: calc(26rem - 50vw);}
  }  

.price-calc                                     {display: flex; width: 100%; justify-content: center; padding: min(3rem, calc(1rem + 3vw)) min(4rem, calc(1rem + 3vw));}  
.price-calc .inner                              {display: flex; width: 100%; max-width: 26rem; justify-content: center; flex-wrap: wrap; gap: 1.5rem;}  
.price-calc h3                                  {font-size: 1.5em;}
.price-calc #posuvnik                           {margin-bottom: 3.5rem;}
.price-calc-posuvnikPopisek                     {width: 9em !important; transform: translateX(-4.5em) !important;}
.price-calc table                               {width: 100%; font-size: 1.35em;}
.price-calc table td                            {text-align: left; padding: 0.6em 0 0.35em;}
.price-calc table td:last-child                 {width: 7.5em; font-weight: 800; padding-left: 1.5em;}
.price-calc table tr:not(:last-child) td        {border-bottom: solid 1px rgba(255,255,255,0.2);}
.price-calc .local-info-text span,
.price-calc .local-info-text span:after         {background: white; color: var(--color0);}
.price-calc .local-info-text > span .price      {color: var(--color0b);}
.price-calc .note                               {display: block; width: 100%; max-width: 28em;}
.price-calc table td:has(.form-item)            {padding-block: 0.3em;}
.price-calc .form-item                          {font-size: 0.8em;}
.price-calc .custom-select-trigger              {color: white; padding-inline: 0.8em 2.8em;}
.price-calc .custom-select-trigger:before,
.price-calc .custom-select-trigger:after        {width: 2em;}
.price-calc .custom-select-trigger.chosen       {color: white;}
.price-calc .custom-option                      {padding: 0.59em var(--form-item-padding) 0.29em;}
  @media screen and (min-width: 641px)          {
  .price-calc-posuvnikPopisek svg:nth-of-type(2){display: none !important;}
  }
  @media screen and (max-width: 640px)          {
  .price-calc #posuvnik                         {margin-bottom: 2.6rem;}
  .price-calc-posuvnikPopisek                   {width: 5em !important; transform: translateX(-2.5em) translateY(-0.5em) !important;}
  .price-calc-posuvnikPopisek svg:nth-of-type(1),
  .price-calc-posuvnikPopisek .units            {display: none !important;}
  }
  @media screen and (max-width: 540px)          {
  .price-calc table                             {font-size: 1em;}
  .price-calc table td                          {padding: 0.9em 0 0.65em;}
  .price-calc .form-item                        {font-size: 0.9em; --form-item-height: 2.6em;}
  .price-calc .note                             {font-size: 0.8em;}
  }  

.loader-mask                                    {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); backdrop-filter: blur(3px); position: fixed; inset: 0; z-index: 10000;}  
.loader-mask .loader                            {width: 38px; aspect-ratio: .75; --loader-color: no-repeat linear-gradient(var(--color1) 0 0); background: var(--loader-color) 0% 100%, var(--loader-color) 50% 100%, var(--loader-color) 100% 100%; background-size: 20% 65%; animation: loader 1s infinite linear;}
@keyframes loader {
  20% {background-position: 0% 50% ,50% 100%,100% 100%}
  40% {background-position: 0% 0%  ,50% 50% ,100% 100%}
  60% {background-position: 0% 100%,50% 0%  ,100% 50% }
  80% {background-position: 0% 100%,50% 100%,100% 0%  }
}


.cta2                                           {display: block; width: 100%; padding: 3em; border-radius: var(--border-radius1); box-sizing: border-box; position: relative; box-shadow: var(--box-shadow-color1); transition: box-shadow 1.2s ease-in-out, transform 0.6s ease-in-out, opacity 0.6s ease-in-out;}
.cta2 .info                                     {display: flex; flex-wrap: wrap; gap: 0.7em;}
.cta2 .info .title                              {display: block; width: 100%; font-size: min(1.9em, calc(0.9em + 3vw)); font-weight: 800; line-height: 1.3;}
.cta2 .info .features                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.45em 1em;}
.cta2 .info .features > span                    {display: flex; align-items: center; gap: .4em; font-size: min(1.25em, calc(0.3em + 3vw)); color: white; font-weight: 700; line-height: 1.3;}
.cta2 .info .features > span img                {display: block; width: 1.1em; height: 1.1em; position: relative; top: -0.1em;}
.cta2 .info .btn                                {display: block; margin-top: 0.65em;}
.cta2 .img                                      {display: block; position: absolute; right: 0; top: -2em;}
.cta2 .img img                                  {display: block; width: 100%; height: 100%; object-fit: contain; transition: .3s ease-in-out;}
.cta2 .img img:hover                            {transform: scale(1.05);}

.cta2:not(.play)                                {box-shadow: 0 0 min(10em, calc(1.5em + 15vw)) var(--color1);}
.cta2 .info .title,
.cta2 .info .features > span,
.cta2 .info .btn,
.cta2 .img                                      {opacity: 0; transform: scale(1.5); transition: .6s ease-in-out;}
.cta2 .info .title                              {transition-delay: 0.2s;}
.cta2 .info .features > span:nth-child(1)       {transition-delay: 0.4s;}
.cta2 .info .features > span:nth-child(2)       {transition-delay: 0.6s;}
.cta2 .info .features > span:nth-child(3)       {transition-delay: 0.8s;}
.cta2 .info .btn                                {transition-delay: 1s;}
.cta2 .img                                      {transition-delay: 1.2s;}
.cta2.play .info .title,
.cta2.play .info .features > span,
.cta2.play .info .btn,
.cta2.play .img                                 {opacity: 1; transform: scale(1);}
  @media screen and (min-width: 1081px)         {
  .cta2                                         {width: 130%; margin-inline: -15%;}
  .cta2 .info                                   {width: 50%;}
  .cta2 .info .title                            {text-align: left;}
  .cta2 .img                                    {width: 50%; height: calc(100% + 4em);}
  }
  @media screen and (max-width: 1080px)         {
  .cta2                                         {padding-top: 20em; margin-top: 2em;}
  .cta2 .info, .cta2 .info .features            {width: 100%; justify-content: center;}
  .cta2 .img                                    {width: 100%; height: 20em; transition-delay: 0s;}
  }
  @media screen and (min-width: 541px)          {
  .cta2 .info .title br                         {display: none;}
  }
  @media screen and (max-width: 540px)          {
  .cta2 .info .features > span:nth-child(3)     {display: none;}
  }

.achievement                                    {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.9em; container-type: inline-size;}
.achievement .box                               {display: flex; width: 100%; justify-content: center; background: #b5944d; padding: 1.7cqw max(1.2em, 3cqw); border-radius: var(--border-radius1); box-sizing: border-box; position: relative;}
.achievement .box .inner                        {display: flex; width: 100%; justify-content: space-between; align-items: center; position: relative; box-sizing: border-box;}
.achievement .box .icon                         {display: flex;}
.achievement .box .icon img                     {display: block; width: 100%; height: 100%; object-fit: contain;}
.achievement .box strong                        {display: block; line-height: 1.3; position: relative; bottom: -0.13em;}
.achievement > span                             {display: block; width: 100%; text-align: center; font-size: max(1.6cqw, 0.75em);}
.achievement > span a                           {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.achievement > span a:hover                     {opacity: 0.8; text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .achievement                                  {width: 120%; margin-inline: -10%;}
  }
  @media screen and (min-width: 681px)          {
  .achievement :is(br, .mobile-only)            {display: none !important;}
  .achievement .box .icon                       {width: 3.5cqw;}
  .achievement .box strong                      {font-size: 4cqw;}

  }
  @media screen and (max-width: 680px)          {
  .achievement .box .icon                       {width: max(7cqw, 1.8em);}  
  .achievement .box strong                      {font-size: max(4cqw, 1.15em);}
  }