<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok {display: block; width: 100%;}

body                                            { display: block !important; }

.mce-content-body .collapse {
    display: block !important;
}

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

/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/

:root                                           {
                                                --font1:        'Poppins', sans-serif; /* 400, 700 */
                                                --font2:        'Playfair Display', serif; /* 400, 700 */

                                                --color0:       black;
                                                --color0b:      #223622;
                                                --color1:       #19A323; /* rgb(25,163,35); */ 
                                                --color1b:      #19975A;
                                                --color1c:      #202926;
                                                --color1d:      #EDFFE3;
                                                --color1e:      #088E64;
                                                --color2:       #FFCE00;  
                                                --color2b:      #ecb100;
                                                --color3:       #FF7B17; /* rgb(255,143,0); */ 
                                                --color3b:      #FF632F;
                                                --color4:       rgb(235,235,235); 
                                                --color5:       #3C58BF;
                                                      --color5b:      #223ea3;
                                                --color6:       #889582; 
                                                --color7:       #8B2535;
                                                --color8:       #FFF9F2;

                                                --border-radius1: 0.8rem;
                                                --border-radius2: min(calc(1.2rem + 7vw), 7rem);  

                                                --section-padding: min(5rem, calc(1.2rem + 5vw));                                           
                                                --wrapper-padding: 5vw;
                                                --wrapper-gap: 1.5rem;     

                                                --form-item-radius: 0.3rem;
                                                --input-height: 3.4em;
                                                --form-item-min-height: 2.4rem;

                                                --submenu-height: 3rem;
                                                }

html                                            {display: block; width: 100%; height: 100%; background: white; font-size: min(18px, calc(11px + 1vw)); font-family: var(--font1);}

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

body.fixed                                      {overflow: hidden;}
body.fixed .main                                {filter: blur(2px);}
body.fixed .main:after                          {opacity: 0.1; left: 0;}

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

.wrapper                                        {display: flex; width: min(var(--max-width), calc(100vw - 2 * var(--wrapper-padding))); --max-width: 66rem; flex-wrap: wrap; gap: var(--wrapper-gap); margin-inline: auto; position: relative; box-sizing: border-box; z-index: 1;}
.wrapper.narrow                                 {--max-width: 56rem;}
.wrapper.wide                                   {--max-width: 80rem;}

strong                                          {font-weight: 700;}
em                                              {font-style: italic;}

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

.header                                         {display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 1rem; box-sizing: border-box; position: relative; z-index: 1000; isolation: isolate;}
.header .logo                                   {display: block; position: relative; z-index: 10000;}
.header .logo img                               {display: block;} 
.header a:not(.button)                          {color: var(--color0); font-weight: 700; text-decoration: underline; white-space: nowrap; transition: .2s ease-in-out;}
.header a:not(.button):hover,
.header a:not(.button).sel                      {color: var(--color1); text-decoration-color: transparent;}
.header .collapse                               {display: block; box-sizing: border-box;}
.header .collapse &gt; *                           {display: block; width: 100%;}
.header .menu nav                               {display: flex; align-items: center; flex-wrap: wrap; gap: 1em 2em;}
  @media screen and (min-width: 1081px) and (max-width: 1281px){
  .header                                       {font-size: 0.9rem;}
  }
  @media screen and (min-width: 1081px)         {
  .header :is(.logo, .logo img)                 {width: 12em;}
  .header .mobile-only                          {display: none;}
  .header .collapse                             {width: 100%;}
  .header .wrapper                              {justify-content: space-between; flex-wrap: nowrap;}
  .header .topbar                               {background: #EDEDED; padding-block: 1rem; font-size: 0.75rem;}
  .header .topbar nav                           {display: flex; align-items: center; gap: 1rem;}
  .header .menu                                 {padding-block: 1rem;} 
  .header .menu nav ul                          {display: flex; align-items: center; gap: 1em; font-size:0.9em; }
  .header #navicon                              {display: none;}
  }
  @media screen and (min-width: 1281px)         {
  .header .menu nav                             {gap: 1em 3em;}
  .header .menu nav ul                          {gap: 1em 1.6em;}
  }
  @media screen and (max-width: 1080px)         {
  .header                                       {background: #EDEDED; padding: 1em; --collapse-width: 18rem;}
  .header :is(.logo, .logo img)                 {height: 4em;}
  .header .wrapper                              {width: 100%;}
  .header .desktop-only                         {display: none;}
  .header .collapse                             {width: var(--collapse-width); height: 100%; background: #EDEDED; padding: 5em 2em 2em; overflow: auto; position: fixed; top: 0; right: calc(0px - var(--collapse-width)); opacity: 0; box-shadow: 0 0 0.35em rgba(0,0,0,0.2); transition: opacity .2s ease-in-out;}
  .header .collapse &gt; *                         {justify-content: center;}
  .header .topbar span                          {display: block; width: 100%; text-align: center; font-size: 0.8em; margin-bottom: 1rem;}
  .header .topbar nav                           {display: none;}
  .header .menu nav                             {width: 100%; justify-content: center;}
  .header .menu nav ul                          {width: 100%;}
  .header .menu nav li                          {padding-block: 0.7em;}
  .header .menu nav li:not(:first-child)        {border-top: solid 1px rgba(0,0,0,0.25);}
  .header .menu .button                         {order: -1;}
  .header #navicon                              {display: flex; height: 2.3em; align-items: center; padding-inline: 2.5em 1em; background: var(--color3); font-size: 1em; cursor: pointer; border-radius: 1.2em; position: relative; z-index: 10;}
  .header #navicon:after                        {display: flex; height: 100%; align-items: center; font-size: 1em; color: white; font-weight: 700; content: "Menu";}
  .header #navicon span                         {display: block; height: 4px; background: white; border-radius: 2px; position: absolute; left: 1em; transition: .2s ease-in-out;}
  .header #navicon:hover                        {background: var(--color3b);}
  .header #navicon span:nth-child(1)            {width: 0.55em; top: 0.65em;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {width: 1em; top: calc(50% - 2px);}
  .header #navicon span:nth-child(4)            {width: 0.8em; bottom: 0.65em;}
  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  .header.show #navicon                         {background: var(--color1);}
  .header.show #navicon:hover                   {background: var(--color1b);}
  .header.show #navicon:after                   {content: "ZavĹ™Ă­t";}
  .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 #navicon div                     {display: block;}
  .header.show .collapse                        {right: 0; opacity: 1;}
  .header.show.hide .collapse                   {opacity: 0;}
  }
  @media screen and (max-width: 540px)          {
  .header                                       {--collapse-width: 100vw;}
  }

.footer                                         {display: block; width: 100%; padding-block: 2.5rem;}
.footer .wrapper                                {justify-content: center; gap: 2rem;}
.footer-contacts                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.5em;}
.footer-contacts &gt; *                            {display: flex; align-items: center; gap: 0.4em; text-align: center; font-size: 1.2em; color: var(--color0); font-weight: 700; transition: .2s ease-in-out;}
.footer-contacts a:hover                        {color: var(--color1);}
.footer-contacts a svg                          {display: block; width: 1.2em; height: 1.2em;}
.footer-contacts a svg .color1                  {fill: var(--color1);}
.footer-contacts a svg .color2                  {fill: var(--color2);}

.footer .box                                    {justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.2rem; padding: min(calc(0.4rem + 7vw), 3rem) min(calc(0.4rem + 7vw), 5rem) !important;}
.footer .box .logo                              {display: block;}
.footer .box .logo a                            {display: block; width: 11em;}
.footer .box .logo a img                        {display: block; width: 100%;}
.footer .box &gt; div                              {display: block; max-width: 22rem;}
.footer .box &gt; div span                         {display: block; font-size: 0.85em; color: white;}
.footer .box &gt; div span:nth-child(1)            {font-size: 1.5em; font-weight: 700; margin-bottom: 0.8rem;}
.footer nav                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 1em;}
.footer nav ul                                  {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em min(calc(0.5em + 2vw), 1.5em);}
.footer nav ul li                               {display: block; font-weight: 700;}
.footer nav ul li a                             {color: var(--color0); text-decoration: underline; transition: .2s ease-in-out;}
.footer nav ul li a:hover                       {color: var(--color1); text-decoration-color: transparent;}
.footer nav ul:nth-child(1) li                  {font-size: 1em;}
.footer nav ul:nth-child(2) li                  {font-size: 0.75em;}
.footer .copyright                              {display: block; width: 100%; font-size: 0.7em; color: black; margin-top: 2em;}
  @media screen and (min-width: 641px)          {
  .footer nav ul                                {justify-content: center;}
  .footer .copyright                            {text-align: center;}
  .footer .copyright br                         {display: none;}
  }
  @media screen and (max-width: 640px)          {
  .footer .copyright                            {text-align: left;}
  }
  @media screen and (max-width: 540px)          {
  .footer .box .logo                            {width: 100%;}
  .footer nav ul li                             {width: 100%;}
  }



.main                                           {display: flex; width: 100%; flex-wrap: wrap; flex-grow: 3;}
.main :is(h1, h2, h3, h4)                       {display: block; width: 100%; font-weight: 700; color: var(--color0); line-height: 1.2em; box-sizing: border-box; position: relative; font-family: var(--font2); text-wrap: balance;}
.main h1                                        {font-size: min(2.3rem, calc(1.4rem + 4vw));}
.main h2                                        {font-size: min(2.2rem, calc(1.1rem + 3vw)); margin-bottom: 1.8rem;}
.main h3                                        {font-size: min(1.3rem, calc(0.7rem + 2vw)); margin-bottom: 0.5rem;}
.main h4                                        {font-size: min(1.1rem, calc(0.9rem + 2vw)); font-weight: 500;}
.main :is(p, li)                                {display: block; width: 100%; font-size: 0.9em; color: var(--color0); line-height: 1.6; font-weight: 400;}
.main p strong, .main li strong                 {font-weight: 700;}
.main p a, .main li a                           {color: var(--color0); text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color1b); text-decoration-color: transparent;}
.main .note                                     {font-size: 0.8em;}
.main .note a                                   {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.main .note a:hover                             {text-decoration-color: transparent; opacity: 0.8; transition: .15s ease-in-out;}
.main .color1                                   {color: var(--color1);}
  @media screen and (min-width: 1081px)         {
  .main .wrapper                                {--wrapper-gap: 2.5rem;}
  }
  @media screen and (max-width: 1080px)         {
  .main .wrapper                                {--wrapper-gap: calc(0.5rem + 2vw);}
  }

.highlighted                                    {padding: 0.8em 1em; box-sizing: border-box; border-left: solid 0.1em transparent; position: relative;}
.highlighted.large                              {font-size: 1.15em;}
.highlighted:before                             {display: block; opacity: 0.1; position: absolute; inset: 0; content: "";}
.highlighted .title                             {font-family: var(--font1); margin: 0;}
.highlighted.color1                             {color: var(--color1); border-color: var(--color1);}
.highlighted.color1 p                           {color: var(--color1);}
.highlighted.color1:before                      {background: var(--color1); }
.highlighted.color5                             {color: var(--color5); border-color: var(--color5);}
.highlighted.color5:before                      {background: var(--color5);}
.highlighted.color5 p                           {color: var(--color5);}
.highlighted.color7                             {color: var(--color7); border-color: var(--color7);}
.highlighted.color7:before                      {background: var(--color7);}
.highlighted.color7 p                           {color: var(--color7);}

.highlighted-text                               {display: inline-block; font-weight: 700; position: relative; padding-inline: 0.3em;}
.highlighted-text:before                        {display: block; opacity: 0.2; position: absolute; inset: 0; content: "";}
.highlighted-text.color1                        {color: var(--color1);}
.highlighted-text.color1:before                 {background: var(--color1);}

.source                                         {display: block; width: 100%; font-size: 0.65rem;}

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

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; box-sizing: border-box;}

ul.leaves li                                    {display: block; padding-left: 2.2em; margin-bottom:0.8em; box-sizing: border-box; position: relative;}
ul.leaves li:before                             {display: block; width: 1.6em; height: 1.1em; position: absolute; left: 0; top: calc(50% - 0.5em); content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 300'%3E%3Cpath d='M461.9,38C392.9,38,337,93.9,337,162.9V213h50.1c33.1,0,64.9-13.2,88.3-36.6C498.8,153,512,121.2,512,88.1V38 H461.9z M284,210.7C284,98.7,193.3,8,81.3,8H0v81.3c0,53.8,21.4,105.3,59.4,143.3c38,38,89.6,59.4,143.3,59.4H284V210.7z' width='1' height='1' fill='rgb(25,163,35)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain;}
ul.leaves li:not(:first-child)                  {margin-top: 0.15em;}

      .button                                         {display: flex; --button-height: 2.8em; height: var(--button-height); justify-content: center; align-items: center; gap: 1em; outline: solid 2px transparent; cursor: pointer; text-decoration: none !important; font-size: 0.9em; color: white !important; font-weight: 700; line-height: 1em; background: transparent; position: relative; border: none; padding: 0.3em 2em 0.4em; border-radius: calc(var(--button-height) / 2); box-sizing: border-box; font-family: var(--font1); box-shadow: 0 0 0.4em rgba(0,0,0,0.15); transition: .15s ease-in-out;}
      .button:hover                                   {transform: scale(0.97); filter: brightness(0.95); box-shadow: 0 0 0 transparent;}
      .button svg                                     {display: block; width: 0.9em; height: 0.9em; fill: white; position: relative; top: 0.05em;}
      .button.color1                                  {background: var(--color1); }
      .button.color1:hover                            {background: var(--color1b);}
      .button.color3                                  {background: var(--color3);}
      .button.color3:hover                            {background: var(--color3b);}
      .button.color5                                  {background: var(--color5);}
      .button.color5:hover                            {background: var(--color5b);}




.chapter                                        {display: flex; width: 100%; flex-wrap: wrap; gap: var(--wrapper-gap) !important;}
.chapter:not(:first-child)                      {padding-top: var(--wrapper-gap); border-top: solid 1px rgba(0,0,0,0.5);}

.chapter-label                                  {display: block; width: 100%; font-size: min(1.1rem, calc(0.5rem + 4vw)); color: var(--color0); font-weight: 700; margin-bottom: -0.5rem;}

.quote                                          {display: block; width: 100%; font-size: min(1.45em, calc(0.6em + 2vw)); font-weight: 700; color: var(--color1); font-family: var(--font2); padding: calc(2em + var(--quote-padding)) var(--quote-padding) var(--quote-padding); border: solid 1px var(--color1); border-radius: 1em 0 1em 0; box-sizing: border-box; position: relative; --quote-padding: 1.4em;}
.quote:before                                   {display: block; width: 1.5em; height: 1.5em; position: absolute; left: var(--quote-padding); top: var(--quote-padding); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 385'%3E%3Cpath d='M227.2,98.1c-4.5-17.8-11.8-34.8-21.5-50.4C186,16,154.2,0.1,110.3,0.1C81-1.2,52.4,9.4,30.6,29.3 C10.2,48.9-0.9,76.5,0.1,105c-1.5,28.8,9.2,56.8,29.5,76.9c20.9,19.1,48.4,29.1,76.6,27.9c29.4,1.2,57.9-10.7,77.9-32.6 c2.8,8.3,4.1,17.1,4.1,25.8c-0.1,10.6-1.4,21.2-4.1,31.4c-4.7,26-16.5,50-34.2,69.4c-18.3,22.1-41.6,39.4-67.8,50.5l12.1,24.5 c43.1-18.8,79.8-50.1,105.5-89.9c23.7-38.4,36.1-82.8,35.5-128.1C235.3,139.7,232.6,118.6,227.2,98.1z M503.9,98.1 c-4.5-17.8-11.7-34.8-21.4-50.4C462.7,16,430.9,0.1,387,0.1c-29.2-1.1-57.6,9.4-79.2,29.2c-20.6,19.5-32,47.1-31.1,75.7 c-1.6,28.8,9.3,56.9,29.6,76.9c20.9,19.1,48.4,29.1,76.6,27.9c29.4,1.2,57.9-10.7,77.9-32.6c2.7,8.3,4.1,17.1,4.1,25.8 c-0.1,10.6-1.5,21.1-4.1,31.4c-4.7,26-16.6,50-34.2,69.4c-18.3,22-41.6,39.3-67.8,50.5l12.2,24.5C414,360,450.6,328.8,476.3,289 c23.8-38.3,36.2-82.8,35.6-128.1C512,139.7,509.3,118.6,503.9,98.1z' width='1' height='1' fill='rgb(25,163,35)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}

.cols                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 1.5rem; position: relative;}
.cols &gt; *                                       {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
  @media screen and (min-width: 1081px)         {
  .cols                                         {justify-content: space-between;} 
  }
  @media screen and (max-width: 1080px)         {
  .cols &gt; *                                     {width: 100%;} 
  }

.cols.c1-2 &gt; div h2                             {color: var(--color1); font-family: var(--font2); margin-bottom: 0;}
  @media screen and (min-width: 1081px)         {
  .cols.c1-2 &gt; *:nth-child(1)                   {width: 30%;}
  .cols.c1-2 &gt; *:nth-child(2)                   {width: 62%;}
  .cols.c1-2 &gt; * h2                             {font-size: 1.9em;}
  .cols.c2 &gt; *                                  {width: 48%;}
  .cols.c1-2 .cols.c2 &gt; *                       {width: 46%;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .cols.c1-2 .cols.c2                           {justify-content: space-between;}
  .cols.c1-2 .cols.c2 &gt; *                       {width: 46%;}
  .cols.c2 &gt; *                                  {width: 48%;}
  }

      .page-head                                      {display: flex; width: 100%; justify-content: center;}
      .page-head &gt; div                                {display: block;}
      .page-head &gt; div :is(p, ul)                     {margin-top: 1.2rem;}
      .page-head &gt; div .flex                          {justify-content: flex-start; margin-top: 1.2rem;}

      .page-head.centered &gt; div :is(h1, p)            {text-align: center;}
      .page-head.centered &gt; div p                     {font-size: 1.1rem;}
        @media screen and (max-width: 640px)          {
        .page-head.centered &gt; div p br                {display: none;}
        }


.page-head2                                     {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5em 0; margin-bottom: 2em;}
.page-head2 &gt; div                               {display: block; position: relative;}
.page-head2 &gt; div :is(p, ul)                    {margin-top: 1.5em;}
.page-head2 .box                                {width: 100%; padding: 0; overflow: hidden;}
.page-head2 .box img                            {display: block; width: 100%;}
  @media screen and (min-width: 961px)          {
  .page-head2 &gt; *                               {width: 47%;}
  .page-head2 &gt; div p                           {max-width: 26em;}
  }

.page-compare .page-head2 .box                  {aspect-ratio: calc(4 / 3);}
.page-compare .page-head2 &gt; div &gt; img           {display: block; width: 5em; position: absolute; right: 5em; bottom: -2.4em;}

.page-calc .page-head2 &gt; div &gt; img              {display: block; position: absolute;}
.page-calc .page-head2 &gt; div &gt; img:nth-of-type(1){width: 2em; left: -3em; top: 10%;}
.page-calc .page-head2 &gt; div &gt; img:nth-of-type(2){width: 5em; left: -2em; bottom: 10%;}
  @media screen and (max-width: 960px)          {
  .page-calc .page-head2 ul                     {display: flex; flex-wrap: wrap; gap: 0.1em 1.2em;}
  .page-calc .page-head2 ul li                  {width: auto;}
  .page-calc .page-head2 &gt; div:nth-child(2)     {width: calc(100% - 3rem); margin-left: 3rem;}
  }

.box                                            {display: flex; width: 100%; flex-wrap: wrap; padding: min(calc(0.8rem + 4vw), 4rem); box-sizing: border-box; border-radius: var(--border-radius1);}
.box.gray                                       {background: var(--color4);}
.box.dark                                       {background: var(--color1c);}
.box.color1                                     {background: var(--color1);}
.box.color1d                                    {background: var(--color1d);}
.box.rounded                                    {padding: min(calc(0.4rem + 8vw), 5rem) min(calc(0.4rem + 8vw), 9rem); border-radius: var(--border-radius2) 0;}
.box.rounded2                                   {padding: min(calc(0.4rem + 8vw), 5rem) min(calc(0.4rem + 8vw), 9rem); border-radius: 0 var(--border-radius2);}
.box.stroke                                     {border: solid 0.08em var(--color1);}
.box.stroke5                                    {border: solid 0.08em var(--color5);}

.box:has(&gt; img)                                 {padding: min(calc(0.8rem + 4vw), 4rem) !important;}
.box &gt; img                                      {display: block; width: 100%; height: auto;}

.hero                                           {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2rem 0; position: relative;}
.hero .headline                                 {display: flex; flex-wrap: wrap; gap: 1rem;}
.hero .graphics                                 {display: flex; flex-wrap: wrap; position: relative;}
.hero .graphics .image                          {display: none; width: 100%; aspect-ratio: 1.5; border-radius: var(--border-radius2) 0 var(--border-radius2) 0; overflow: hidden;}
.hero .graphics .image img                      {display: none; width: 100%; height: 100%; object-fit: cover;}
.hero .graphics &gt; img                           {display: block; width: 100%; position: absolute; z-index: 1;}
.hero .graphics &gt; img:nth-of-type(1)            {width: 2.5em;}
.hero .graphics &gt; img:nth-of-type(2)            {width: 5.5em;}
.hero .video                                    {display: block; position: relative; z-index: 5;}
.hero .video span                               {display: block; /*background: black;*/ padding: 0.4em; box-sizing: border-box; /*border-radius: 0.8em;*/ position: relative;}
.hero .video span iframe                        { border-radius:0.8em; }
.hero .video span img                           {display: block; width: 100%;}
.hero .video span a                             {display: block; background: white; opacity: 0; position: absolute; inset: 0; transition: .15s ease-in-out;}
.hero .video span a:hover                       {opacity: 0.1;}
.hero .video &gt; img                              {display: block; width: 8em; position: absolute;}
  @media screen and (min-width: 1081px)         {
  .hero                                         {justify-content: space-between;} 
  .hero .headline                               {width: 27rem; margin-top: 2rem;}
  .hero .graphics                               {width: 50%; margin-bottom: 6em;}
  .hero .graphics :is(.image, .image img)       {display: block;}
  .hero .graphics &gt; img:nth-of-type(1)          {left: -3em; top: 1em;}
  .hero .graphics &gt; img:nth-of-type(2)          {right: 4em; bottom: -2.5em;}
  .hero .video                                  {width: 24em; position: absolute; left: -30%; top: 16em;}
  .hero .video &gt; img:nth-of-type(1)             {left: -10em; top: 40%;}
  .hero .video &gt; img:nth-of-type(2)             {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .hero .graphics                               {margin-bottom: 3em;}
  .hero .graphics &gt; img:nth-of-type(1)          {left: 1em; top: 2em;}
  .hero .graphics &gt; img:nth-of-type(2)          {right: 4em; bottom: -3.5em;}
  .hero .video                                  {max-width: 28em; padding-top: 6em;}
  .hero .video &gt; img:nth-of-type(1)             {display: none;}
  .hero .video &gt; img:nth-of-type(2)             {top: 0; right: 0;}
  }

      .hero2                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1rem 0;}
      .hero2 &gt; div                                    {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; border-radius: 1rem; padding: 2.5rem 2.5rem 13em; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
      .hero2 &gt; div:before                             {display: block; opacity: 0.1; position: absolute; inset: 0; content: "";}
      .hero2 &gt; div &gt; *:not(.img)                      {position: relative; z-index: 2;}
      .hero2 &gt; div h2                                 {font-size: 1.1em; font-weight: 400; font-family: var(--font1); margin: 0;}
      .hero2 &gt; div h2 a                               {display: inline-block; font-size: 2.35em; color: inherit; font-weight: 700; text-decoration: underline; margin-left: 0.1em; transition: .15s ease-in-out;}
      .hero2 &gt; div h2 a:hover                         {text-decoration-color: transparent;}
      .hero2 &gt; div .subheadline                       {display: block; width: 100%; font-size: 1.35em;}
      .hero2 &gt; div ul                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.3em; margin-block: 1em;}
      .hero2 &gt; div ul li                              {display: block; font-size: 0.9em; line-height: 1.35; padding-left: 1.8em; box-sizing: border-box; position: relative;}
      .hero2 &gt; div ul li svg                          {display: block; width: 1.3em; height: 1.3em; position: absolute; left: 0; top: 0;}
      .hero2 &gt; div .img                               {display: block; width: 100%; height: 17em; background-repeat: no-repeat; background-position: right bottom; background-size: cover; position: absolute; right: 0; bottom: 0;
                                                      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left top; mask-position: left top; -webkit-mask-size: cover; mask-size: cover;
                                                      mask-image: linear-gradient(to bottom, transparent, black 50%);                                           
                                                      -webkit-mask-image: linear-gradient(to bottom, transparent, black 50%);
                                                      }
      .hero2 &gt; div:nth-child(1)::before               {background: var(--color1);}
      .hero2 &gt; div:nth-child(1) :is(h2, .subheadline) {color: var(--color1);}
      .hero2 &gt; div:nth-child(1) h2 a:hover            {color: var(--color1b);}
      .hero2 &gt; div:nth-child(1) ul li svg             {fill: var(--color1);}
      .hero2 &gt; div:nth-child(1) .img                  {background-image: url("images/hero/img1.jpg");}
      .hero2 &gt; div:nth-child(2)::before               {background: var(--color3);}
      .hero2 &gt; div:nth-child(2) :is(h2, .subheadline) {color: var(--color3);}
      .hero2 &gt; div:nth-child(2) h2 a:hover            {color: var(--color3b);}
      .hero2 &gt; div:nth-child(2) ul li svg             {fill: var(--color3);}
      .hero2 &gt; div:nth-child(2) .img                  {background-image: url("images/hero/img2.jpg");}
      .hero2 &gt; div:nth-child(3)::before               {background: var(--color5);}
      .hero2 &gt; div:nth-child(3) :is(h2, .subheadline) {color: var(--color5);}
      .hero2 &gt; div:nth-child(3) h2 a:hover            {color: var(--color5b);}
      .hero2 &gt; div:nth-child(3) ul li svg             {fill: var(--color5);}
      .hero2 &gt; div:nth-child(3) .img                  {background-image: url("images/hero/img3.jpg");}
        @media screen and (min-width: 1081px)         {
        .hero2 &gt; div                                  {width: 32%;}
        }
        @media screen and (min-width: 768px) and (max-width: 1080px){
        .hero2 &gt; div                                  {justify-content: space-between; flex-wrap: nowrap; padding: 5rem 10em 2rem 2rem}
        .hero2 &gt; div h2                               {position: absolute !important; left: 2rem; top: 2rem;}
        .hero2 &gt; div .subheadline                     {width: 20em;}
        .hero2 &gt; div ul                               {width: ; top: -0.8em;}

        .hero2 &gt; div .button                          {position: absolute !important; left: 2rem; bottom: 2rem;}
        .hero2 &gt; div .img                             {width: 30%; height: 100%;
                                                      mask-image: linear-gradient(to right, transparent, black);                                           
                                                      -webkit-mask-image: linear-gradient(to right, transparent, black);}
        .hero2 &gt; div:nth-child(1) .img                {background-image: url("images/hero/img1b.jpg");}
        .hero2 &gt; div:nth-child(2) .img                {background-image: url("images/hero/img2b.jpg");}
        .hero2 &gt; div:nth-child(3) .img                {background-image: url("images/hero/img3b.jpg");}
        }

.mission                                        {display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2rem 0;}
.mission &gt; div                                  {display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5em; position: relative;}
.mission &gt; div article                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em;}
.mission &gt; div article h2                       {font-size: min(1.5rem, calc(1rem + 3vw)); color: var(--color1); margin: 0;}
.mission &gt; div .title                           {display: block; width: 100%; text-align: center; font-size: min(2.4rem, calc(1rem + 3vw)); font-weight: 700; color: var(--color1); line-height: 1.2em; box-sizing: border-box; position: relative; font-family: var(--font2);}
.mission &gt; div &gt; img                            {display: block; width: 100%; max-width: 38rem;}
.mission &gt; div .leaves img                      {display: block; position: absolute;}
  @media screen and (min-width: 1081px)         {
  .mission &gt; div:nth-child(1)                   {width: 33%;}
  .mission &gt; div:nth-child(2)                   {width: 58%;}
  .mission &gt; div .leaves img:nth-child(1)       {width: 1.4em; left: 5%; top: 20%;}
  .mission &gt; div .leaves img:nth-child(2)       {width: 1.8em; left: 14%; top: -5%;}
  .mission &gt; div .leaves img:nth-child(3)       {width: 2.2em; left: 80%; top: 20%;}
  .mission &gt; div .leaves img:nth-child(4)       {width: 1.4em; left: 75%; top: 23%;}
  }
  @media screen and (max-width: 1080px)         {
  .mission &gt; div                                {width: 100%;}
  .mission &gt; div .title                         {margin-top: 3rem;}
  .mission &gt; div .leaves img:nth-child(1)       {width: 1.4em; left: 5%; top: 25%;}
  .mission &gt; div .leaves img:nth-child(2)       {width: 1.8em; left: 45%; top: 0;}
  .mission &gt; div .leaves img:nth-child(3)       {width: 2.2em; left: 83%; top: 27%;}
  .mission &gt; div .leaves img:nth-child(4)       {width: 1.4em; left: 75%; top: 30%;}
  }

.conclusion                                     {display: flex; width: 100%; max-width: 50em; justify-content: center; flex-wrap: wrap; gap: 1em; margin: 0 auto 1rem;}
.conclusion h3                                  {text-align: center; font-size: min(calc(1.2rem + 2vw), 1.8rem); color: var(--color1); font-weight: 400; font-family: var(--font2); line-height: 1.5em;}
.conclusion h3 strong                           {700}
.conclusion .brush                              {display: block; width: 10em; max-width: 50%;}
.conclusion .signature                          {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem;}
.conclusion .signature img                      {display: block; width: 10em; position: relative; top: 0.5em;}
.conclusion .signature span                     {display: block; font-size: 0.8em; color: var(--color0);}
  @media screen and (max-width: 640px)          {
  .conclusion .signature span                   {width: 100%; text-align: center;}
  }

      /*.video-box                                      {justify-content: space-between; padding: 1.5rem;}
      .video-box:before                               {display: block; background: var(--color1); opacity: 0.1; position: absolute; inset: 0; content: ""; border-radius: var(--border-radius1);}
      .video-box &gt; div                                {display: flex; align-items: center; align-content: center; flex-wrap: wrap; position: relative; z-index: 5;}
      .video-box .video span                          {display: block; background: black; padding: 0.4em; box-sizing: border-box; border-radius: 0.8em; position: relative;}
      .video-box .video span img                      {display: block; width: 100%;}
      .video-box .video span a                        {display: block; background: white; opacity: 0; position: absolute; inset: 0; transition: .15s ease-in-out;}
      .video-box .video span a:hover                  {opacity: 0.1;}
      .video-box .info                                {gap: 1em;}
      .video-box .info .text                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
      .video-box .info .text span                     {display: block; width: 100%; font-size: 1.3em;}
      .video-box .info .text span.title               {font-size: 1em;}
      .video-box .info img                            {display: block; width: 15em; margin-top: 1rem;}
      .video-box .tip                                 {margin-top: min(2.5rem, calc(0.8rem + 4vw));}
        @media screen and (min-width: 769px)          {
        .video-box .video                             {width: 52%;}
        .video-box .info                              {width: 40%;}
        .video-box .info img:nth-of-type(1)           {display: none;}
        }
        @media screen and (min-width: 769px) and (max-width: 1280px){
        .video-box .info p                            {font-size: 1.3rem;}
        }
        @media screen and (max-width: 768px)          {
        .video-box                                    {justify-content: center;}
        .video-box &gt; div                              {justify-content: center;}
        .video-box .video                             {width: 100%;}
        .video-box .info img:nth-of-type(1)           {display: block; margin-block: 1rem;}
        .video-box .info img:nth-of-type(2)           {display: none;}
        .video-box .info p                            {text-align: center;}
        }*/

.video-box                                      {justify-content: space-between; padding: 1.5rem;}
.video-box:before                               {display: block; background: var(--color1); opacity: 0.1; position: absolute; inset: 0; content: ""; border-radius: var(--border-radius1);}
.video-box &gt; div                                {display: flex; align-items: center; align-content: center; flex-wrap: wrap; position: relative; z-index: 5;}
.video-box .video span                          {display: block; /*background: black;*/ padding: 0.4em; box-sizing: border-box; border-radius: 0.8em; position: relative;}
.video-box .video span img                      {display: block; width: 100%;}
.video-box .video span iframe                   { border-radius:1em; }
.video-box .video span a                        {display: block; background: white; opacity: 0; position: absolute; inset: 0; transition: .15s ease-in-out;}
.video-box .video span a:hover                  {opacity: 0.1;}
.video-box .info                                {gap: 1em;}
.video-box .info .text                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
.video-box .info .text span                     {display: block; width: 100%; font-size: 1.3em;}
.video-box .info .text span.title               {font-size: 1em;}
.video-box .info img                            {display: block; width: 15em; margin-top: 1rem;}
  @media screen and (min-width: 769px)          {
  .video-box .video                             {width: 52%;}
  .video-box .info                              {width: 40%;}
  .video-box .info img:nth-of-type(1)           {display: none;}
  }
  @media screen and (max-width: 768px)          {
  .video-box                                    {justify-content: center;}
  .video-box &gt; div                              {justify-content: center;}
  .video-box .video                             {width: 100%;}
  .video-box .info img:nth-of-type(1)           {display: block; margin-block: 1rem;}
  .video-box .info img:nth-of-type(2)           {display: none;}
  }

.video-box2                                     {justify-content: space-between;}
.video-box2 &gt; div                               {display: flex; flex-wrap: wrap; position: relative; z-index: 5;}
.video-box2 .video span                         {display: block; /*background: black;*/ padding: 0.4em; box-sizing: border-box; border-radius: 0.8em; position: relative;}
.video-box2 .video span img                     {display: block; width: 100%;}
.video-box2 .video span iframe                  { border-radius:1em; }
.video-box2 .video span a                       {display: block; background: white; opacity: 0; position: absolute; inset: 0; transition: .15s ease-in-out;}
.video-box2 .video span a:hover                 {opacity: 0.1;}
.video-box2 .info p                             {font-size: min(1.7rem, calc(0.9rem + 3vw)); line-height: 1.3; font-family: var(--font2);}
.video-box2 .info img                           {display: block; width: 12em; margin-top: 1rem;}
.video-box2 .tip                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em; margin-top: min(2.5rem, calc(0.8rem + 4vw));}
.video-box2 .tip span                           {display: block; width: 100%; max-width: 26em; text-align: center; font-size: 1.5em; color: var(--color1); font-weight: 700; font-family: var(--font2);}
.video-box2 .tip .brush                         {display: block; width: 60%; max-width: 14em;}
  @media screen and (min-width: 961px)          {
  .video-box2 .video                            {width: 50%;}
  .video-box2 .info                             {width: 37%;}
  .video-box2 .info img:nth-of-type(1)          {display: none;}
  }
  @media screen and (min-width: 961px) and (max-width: 1280px){
  .video-box2 .info p                           {font-size: 1.3rem;}
  }
  @media screen and (max-width: 960px)          {
  .video-box2                                   {justify-content: center;}
  .video-box2 &gt; div                             {justify-content: center;}
  .video-box2 .video                            {width: 20rem; max-width: 100%;}
  .video-box2 .info img:nth-of-type(1)          {display: block; margin-block: 1rem;}
  .video-box2 .info img:nth-of-type(2)          {display: none;}
  .video-box2 .info p                           {text-align:Â&nbsp;center;}
Â&nbsp;Â&nbsp;}

.benefits                                       {display: flex; width: 100%; flex-wrap: wrap; gap: 1.6rem 3rem;}
.benefits article                               {display: flex; justify-content: space-between; align-items: flex-start;}
.benefits article &gt; div                         {display: flex; width: 46%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem; box-sizing: border-box;}
.benefits article .icon                         {height: 9.3em; justify-content: center; align-items: center; align-content: center; padding: 1.4em; border-radius: var(--border-radius1);}
.benefits article .icon svg                     {display: block; width: 4em; fill: white;}
.benefits article .icon span                    {display: block; width: 100%; text-align: center; font-size: 1em; color: white; font-weight: 700;}
.benefits article:nth-of-type(1) .icon          {background: var(--color1);}
.benefits article:nth-of-type(2) .icon          {background: var(--color1b);}
.benefits article:nth-of-type(3) .icon          {background: #B6D3CD;}
.benefits article:nth-of-type(4) .icon          {background: var(--color2);}
.benefits article h3                            {color: var(--color1); font-family: var(--font2);}
.benefits article p                             {line-height: 1.5em;}
  @media screen and (min-width: 1081px)         {
  .benefits article                             {width: calc(50% - 1.5rem);}
  .benefits article:nth-of-type(n+3) .icon      {order: 2;}
  }
  @media screen and (max-width: 1080px)         {
  .benefits article:nth-of-type(even) .icon     {order: 2;}
  }

      .benefits2                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
      .benefits2 :is(h2, li strong)                   {color: var(--color5) !important;}
      .benefits2 ul                                   {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
      .benefits2 ul li                                {display: block; font-size: 1.1em; line-height: 1.35; padding-left: 1.8em; box-sizing: border-box; position: relative;}
      .benefits2 ul li svg                            {display: block; width: 1.3em; height: 1.3em; fill: var(--color5); position: absolute; left: 0; top: 0;}
        @media screen and (min-width: 1081px)         {
        .benefits2 h2                                 {width: 24rem;}
        .benefits2 ul                                 {width: calc(100% - 26rem); margin-top: 0.6em;}
        }

.investments-revenues,
.investments-revenues .head                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1);}
.investments-revenues .head h2                  {text-align: center; color: var(--color1); font-family: var(--font2);}
.investments-revenues .head .subheadline        {display: block; width: 100%; text-align: center; font-size: min(2rem, calc(1rem + 3vw)); color: var(--color0); font-family: var(--font2); margin-block: -1.8rem 1.7rem;}
.investments-revenues .head p                   {max-width: 38rem; text-align: center; font-family: var(--font2); line-height: 1.6em;}

.calc-box                                       {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; --calc-box-padding: min(3rem, calc(1rem + 2vw));}
.calc-box &gt; div                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; padding: var(--calc-box-padding); border-radius: var(--border-radius1); box-sizing: border-box;}
.calc-box &gt; div h3                              {margin: 0;}
  @media screen and (min-width: 1081px)         {
  .calc-box &gt; div:nth-child(1)                  {width: 20em;}                               
  .calc-box &gt; div:nth-child(n+2)                {width: calc(100% - 20em);}                               
  }

.calc-form                                      {background: var(--color4);}
.calc-form .form-item input                     {height: 2.6rem; border: solid 1px #999999;}
.calc-form .opts                                {display: flex; width: 100%; flex-wrap: wrap; gap: var(--opts-gap); --opts-gap: 0.5em; box-sizing: border-box;}
.calc-form .opts .opt label                     {background: white; font-size: 0.9em;}
.calc-form .requested-buy                       {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.calc-form .requested-buy .slider               {display: block; width: calc(100% - 6.2rem);    /* Vse dalsi odstranit ----&gt; */ text-align: center; font-size: 0.8em; background: rgba(0,0,0,0.1); padding: 0.5em; box-sizing: border-box; border-radius: var(--border-radius1);}
.calc-form .requested-buy .form-item            {width: 5.3rem; }
.calc-form .requested-buy .form-item input      {padding-right: 2em;}
.calc-form .requested-buy .form-item .units     {display: flex; height: 100%; align-items: center; font-size: 0.7em; color: #999999; position: absolute; right: 1em; top: 0;}
.calc-form .results                             {width: 100%; font-size: 0.85em;}
.calc-form .results td                          {vertical-align: middle; padding-block: 0.2em;}
.calc-form .results td:first-child              {padding-right: 1em;}
.calc-form .results td .savings                 {display: inline-block; font-size: 0.9em; color: white; font-weight: 700; background: var(--color1); padding: 0.25em 0.4em; border-radius: 0.35em; margin-left: 0.3em;}
.calc-form .bottom                              {display: flex; width: 100%; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem;}
.calc-form .bottom span                         {display: block; width: 100%; font-size: 0.72em; line-height: 1.4em;}
  @media screen and (min-width: 1081px)         {
  .calc-form                                    {padding-inline: calc(var(--calc-box-padding) / 2) !important;}
  .calc-form .bottom                            {justify-content: center;} 
  .calc-form .bottom span                       {text-align: center;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .calc-form .opts .opt                         {width: calc(33.33% - var(--opts-gap) * 2 / 3);}
  }

.calc-estimate                                  {border: solid 1px var(--color1); --color5: #3C58BF;}
.calc-estimate .legend                          {display: block; width: 100%; padding-right: 1.5em; box-sizing: border-box; position: relative;}
.calc-estimate .legend .item                    {display: block; width: 100%; font-size: 0.8em; font-weight: 700; line-height: 1.3em; padding-left: 3em; box-sizing: border-box; position: relative;}
.calc-estimate .legend .item sup                {font-size: 0.7em; line-height: 1em; position: relative; left: -0.2em; top: 0.2em;}
.calc-estimate .legend .item:before             {display: block; width: 2.4em; height: 0.15em; position: absolute; left: 0; top: 0.6em; content: "";}
.calc-estimate .legend .item.odhadovana-cena    {color: var(--color5);}
.calc-estimate .legend .item.odhadovana-cena:before
                                                {background: var(--color5);}
.calc-estimate .legend .item.aktualni-cena      {color: var(--color3);}
.calc-estimate .legend .item.aktualni-cena:before
                                                {background: var(--color3);}
.calc-estimate .legend .item.prumerna-cena      {color: var(--color1);}
.calc-estimate .legend .item.prumerna-cena:before
                                                {background: var(--color1);}

.calc-estimate .legend .item.rok-navratu-investice      {color: var(--color1); margin-top:0.5em;}
.calc-estimate .legend .item.rok-navratu-investice:before
                                                { width: 10px; height: 10px; background-color: var(--color1); transform: rotate(45deg); position:absolute; top:0.2em; left:0.9em; }

.calc-estimate .legend .hint                    {position: absolute; left: 28em; top: 0.06em;}
.calc-estimate .chart                           {display: block; width: 100%; margin-top:1.9rem; }
.calc-form .revenue                         {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top:3em;}
.calc-form .revenue h3                      {width: auto;}
.calc-form .revenue .values                 {display: flex; flex-wrap: wrap; gap: 0.2em 1.2em;}
.calc-form .revenue .values &gt; div            {display: block; width:100%; font-size:0.8em; }
.calc-form .revenue .values span            {display: inline-block; font-size: 1.2em; color: var(--color0); font-weight: 700; line-height: 1.2em; padding-left: 1.1em; box-sizing: border-box; position: relative;}
.calc-form .revenue .values span:before     {display: block; width: 0.65em; height: 0.65em; border-radius: 100%; position: absolute; left: 0; top: 0.3em; content: "";}
.calc-form .revenue .values span.odhadovana-cena:before
                                                {background: var(--color5);}
.calc-form .revenue .values span.aktualni-cena:before
                                                {background: var(--color3);}
.calc-form .revenue .values span.prumerna-cena:before
                                                {background: var(--color5);}
.calc-estimate .calc-cta                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 2rem; padding-top: 1rem; margin-top: 1.4rem; /*border-top: solid 1px rgba(0,0,0,0.3);*/}
.calc-estimate .calc-cta &gt; div                  {display: block; width: 100%;}
.calc-estimate .calc-cta &gt; div p                {font-size: 0.8em; margin-top: 0.35rem;}
.calc-estimate .calc-cta &gt; div .button          {margin-top: 0.1rem;}
  @media screen and (min-width: 1081px)         {
  .calc-estimate .calc-cta &gt; div                {max-width: 23rem;}
  }

.result2                                        {margin-block: -0.6rem 0.6rem;}

.boxSpecial                                     {display: block; width: 100%;}
.boxSpecial .container                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 3rem 0;}
.boxSpecial .box                                {width: 100%; padding: 0;}
.boxSpecial .box &gt; div                          {display: flex; width: 100%; justify-content: space-between; padding-block: 1em;}
.boxSpecial .box &gt; div:nth-child(1)             {border-bottom: solid 1px rgba(0,0,0,0.5); padding-top: 0;}
.boxSpecial .box &gt; div:nth-child(2)             {border-bottom: solid 2px rgba(0,0,0,0.5);}
.boxSpecial .box &gt; div:nth-child(3)             {align-items: flex-end;}
.boxSpecial .box &gt; div:nth-child(4)             {padding: 0;}
.boxSpecial .box &gt; div &gt; *                      {display: block; font-size: 0.9em; color: var(--color0); font-weight: 700;}
.boxSpecial .box &gt; div h4                       {width: calc(100% - 7.4rem);}
.boxSpecial .box &gt; div h4 span                  {display: block; font-size: 0.8em; font-weight: 400; line-height: 1.3em;}
.boxSpecial .box &gt; div .cena                    {width: 6rem;}
.boxSpecial .box &gt; div .cena sup                {font-size: 0.6em; font-weight: 400; line-height: 1em; position: relative; left: 0.1em; top: 0.15em;}
.boxSpecial .box &gt; div:nth-child(1) &gt; *         {color: var(--color5);}
.boxSpecial .box.fix &gt; div:nth-child(1) &gt; *     {color: var(--color3);}
.boxSpecial .box &gt; div:nth-child(3) .cena       {font-size: 1.15em;}
.boxSpecial .box &gt; div:nth-child(n+3) .cena     {color: var(--color1);}
  @media screen and (min-width: 769px)          {
  .boxSpecial .box                              {width: 48%;}
  }

  .boxSpecial .container { display:none; }
  .boxSpecial #pn_box_1 { display:flex; }
#calc-estimate2 {  background: var(--color4); border:1px solid var(--color4); }
#calc-estimate2 h3 &gt; span { font-size:0.6em; display:block; font-weight: 400; margin-bottom:1em; }

.opt2                                          {display: flex; width: 100%; position: relative; z-index: 1; margin: 0; box-sizing: border-box;}
.opt2 input[type=radio]                        {position: absolute; visibility: hidden; left: -9999px;}
.opt2 label                                    {display: flex; width: 100%; min-height: var(--form-item-min-height); align-items: center; font-weight: 400; color: var(--color0); padding: 0.5em 1em 0.5em 2.4em; /*border: solid 1px rgba(0,0,0,0.2);*/ border-radius: var(--form-item-radius); box-sizing: border-box; cursor: pointer; position: relative; transition: .15s ease-in-out;}
.opt2 label:before                             {display: block; width: 1em; height: 1em; border: solid 0.08em rgba(0,0,0,0.4); border-radius: 100%; box-sizing: border-box; position: absolute; left: 1em; top: calc(50% - 0.5em); content: "";}
.opt2 label:hover                              {/*border-color: var(--color0);*/}
.opt2 input[type=radio]:checked ~ label        {font-weight: 700; /*border-color: var(--color1);*/}
.opt2 input[type=radio]:checked ~ label:before {border: solid 0.22em var(--color1);}

.formRadio { padding-bottom:1em; display:none !important; }
.formRadioSub { display:none; padding-left:1.5em; }
.formP { margin-bottom:1em; }
.formP a { color: var(--color1) !important; }
.formP span { display:block; }

#pn_form_chciInvestovat_do1 { display:none; }

.calc-box .calc-form                            {border-top-right-radius: 0px; border-top-left-radius: 0px; border-bottom-right-radius: 0px;}
.calc-box .calc-estimate                        {border-top-left-radius: 0px; border-bottom-left-radius: 0px;}

.calc-box-v2 .calc-form                         {min-height: 575px;}
.calc-box-v2 #calc-estimate2                    {min-height: 575px;}
 @media screen and (max-width: 769px)           {
  .calc-box-v2 .calc-form                       {min-height: initial;}
  }

.calc-box-v2 .calc-form h3 {  }
.opts.radio1 {  }

.hint                                           {display: block; position: relative;}
.hint .icon                                     {display: block; width: 1em; height: 1em;}
.hint .icon svg                                 {display: block; width: 1em; fill: #999999; cursor: pointer; transition: .15s ease-in-out;}
.hint .icon:hover svg                           {fill: var(--color0);}

.hint-content                                   {display: flex; width: 100%; justify-content: center; z-index: 10000;}
.hint-content .inner                            {display: flex; flex-wrap: wrap; gap: 0.5em; background: rgba(45,45,45,0.9); padding: 1em; border-radius: 0.5em; box-sizing: border-box;}
.hint-content .inner span                       {display: block; width: 100%; font-size: 0.8em; color: white; line-height: 1.3em;}
.hint-content .inner .close                     {width: 1em; height: 1em; font-size: 1em; position: absolute; right: 0.05em; top: 0.2em; opacity: 0.5; transform: rotate(45deg); transition: .15s ease-in-out;}
.hint-content .inner .close:hover               {opacity: 1;}
/* Toto je specialne pro ten hint v legende, v grafu to asi bude chtit jinak */
.legend .hint-content                           {left: -9999px; --hint-content-width: 20rem; margin-top: 0.5rem; opacity: 0; transition: opacity .35s ease-in-out, margin-top .35s ease-in-out;}
.legend .hint.sel .hint-content                 {margin-top: 0; opacity: 1;}
  @media screen and (min-width: 1081px)         {
  .legend .hint-content                         {width: var(--hint-content-width); position: absolute; top: 1.35em;}
  .legend .hint.sel .hint-content               {left: calc(50% - var(--hint-content-width) / 2);}
  }
  @media screen and (min-width: 1081px) and (max-width: 1450px){
  .legend .hint-content                         {transform: translateX(-6em);}
  }
  @media screen and (max-width: 1080px)         {
  .legend .hint-content                         {width: calc(100% - 1.2rem); position: fixed; bottom: 0.6rem;}
  .legend .hint.sel .hint-content               {left: 0.6rem;}
  }

.image-info                                     {align-items: center; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; overflow: hidden;}
.image-info:after                               {display: block; width: 100%; height: 100%; background: black; opacity: 0.25; position: absolute; inset: 0; z-index: 1; content: "";}
.image-info span                                {display: block; font-size: min(1.7rem, calc(0.7rem + 3vw)); color: white; font-weight: 700; box-sizing: border-box; font-family: var(--font2); text-shadow: 0 0 0.2em rgba(0,0,0,0.15); position: relative; z-index: 3;}
.image-info .button                             {position: relative; z-index: 10;}
  @media screen and (min-width: 961px)          {
  .image-info                                   {justify-content: space-between; padding: 0 !important; background: url("images/hero-pano2-rozostreny2.jpg") no-repeat center calc(50% + 5rem); background-size: 1200px auto; }
  .image-info span                              {width: 21em; padding: 3em 3em; margin-left: 2em; /*background: url("images/map-vysocina.svg") no-repeat center center;*/ background-size: 100% auto;}
  .image-info .button                           {position: absolute; right: 7%;}
  }
  @media screen and (max-width: 960px)          {
  .image-info                                   {background-image: url("images/hero.jpg");}
  .image-info:before                            {display: block; width: 100%; height: 100%; /*background: url("images/map-vysocina.svg") no-repeat center bottom 1.2rem;*/ background-size: 15em auto; position: absolute; inset: 0; z-index: 2; content: "";}
  .image-info span                              {padding-block: calc(5vw + 4rem);}
  .image-info .button                           {margin-block: calc(0px - 5vw - 3rem) calc(5vw + 4rem);}
  .image-info:has(.button):before               {background-size: 18em auto;  margin-top: -4em;}
  }

.plan                                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem;}
.plan .row                                            {display: flex; width: 100%; justify-content: space-between; gap: 0 1.5rem;}
.plan &gt; *                                             {position: relative; z-index: 2;}
.plan :is(h2, h3, p)                                  {color: ;}
.plan .steps                                          {display: flex; width: 100%; max-width: 50rem; flex-wrap: wrap; box-sizing: border-box;}
.plan .steps &gt; div                                    {display: flex; width: 100%; flex-wrap: wrap; position: relative; box-sizing: border-box;}
.plan .steps &gt; div h3                                 {font-size: min(1.1rem, calc(0.7rem + 2vw)); font-family: var(--font1);}
.plan .steps &gt; div h3 span                            {display: block;}
.plan .steps &gt; div:not(:last-child)                   {padding-bottom: 1.3rem;}
.plan .steps &gt; div:not(:last-child):before            {display: block; width: 0.4em; height: 100%; background: #b6d3cd; position: absolute; left: 0; top: 0.4em; content: "";}
.plan .steps &gt; div:after                              {display: block; width: 1.4em; height: 1.4em; background: white; border: solid 2px #b6d3cd; border-radius: 100%; position: absolute; left: -0.5em; top: 0em; box-sizing: border-box; content: "";}
.plan .steps &gt; div.marked:before,
.plan .steps &gt; div.marked:after,
.plan .steps &gt; div.marked + div:after                 {background: var(--color2); border-color: var(--color2);}
.plan .row &gt; img                                      {display: block;}
.plan .row .text                                      {display: block; width: 100%; margin-top: 1.2rem; box-sizing: border-box;}
.plan .row .text span                                 {display: block; width: 100%; font-size: min(1.6rem, calc(1rem + 3vw)); font-weight: 700; color: var(--color1); line-height: 1.2em; box-sizing: border-box; position: relative; font-family: var(--font2);}
.plan .row .text &gt; img                                {display: block; width: 100%; margin-top: 1rem;}
  @media screen and (min-width: 1081px)               {
  .plan .row:nth-child(1) &gt; *:nth-child(1)            {width: auto;}
  .plan .row:nth-child(1) &gt; *:nth-child(2)            {width: 30rem;}
  .plan .row:nth-child(2) &gt; *:nth-child(1)            {width: calc(100% - 22rem);}
  .plan .row:nth-child(2) &gt; *:nth-child(2)            {width: 19.15rem;}
  .plan .steps                                        {padding-left: 8rem;}
  .plan .steps &gt; div                                  {padding-left: 3rem;}
  .plan .steps &gt; div h3 span                          {position: absolute; left: -10rem;}
  }
  @media screen and (max-width: 1080px)               {
  .plan .row                                          {flex-wrap: wrap;}
  .plan .row &gt; *                                      {width: 100%;}
  .plan .row:nth-child(2)                             {justify-content: center;}
  .plan .steps &gt; div                                  {padding-left: 2rem; left: 0.4em;}
  .plan .steps &gt; div h3 span                          {margin-bottom: 0.35rem;}
  .plan .row &gt; img                                    {max-width: 25rem;}
  .plan .row .text                                    {text-align: center;}
  .plan .row .text &gt; img                              {max-width: 14em; margin-inline: auto;}
  }

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

.contact1                                             {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem var(--contact-gap);}
.contact1 &gt; span                                      {display: block; color: var(--color0); line-height: 1.4em;}
.contact1 &gt; div                                       {display: flex; flex-wrap: wrap; gap: 0.5em 1.2em;}
.contact1 &gt; div a                                     {font-weight: 700; transition: .2s ease-in-out;}
.contact1 &gt; div a.tel                                 {color: var(--color0);}
.contact1 &gt; div a.mail                                {color: var(--color1); text-decoration: underline;}
.contact1 &gt; div a.mail:hover                          {color: var(--color1b); text-decoration-color: transparent;}
.contact1 &gt; div span                                  {display: block; width: 100%; font-size: 0.8em; color: var(--color0);}
  @media screen and (min-width: 1081px)               {
  .contact1 &gt; *                                       {width: calc(50% - var(--contact-gap) / 2);}
  .contact1 &gt; span                                    {max-width: 22rem; font-size: 1.2em;}
  .contact1 &gt; div                                     {justify-content: space-between;}
  .contact1 &gt; div a                                   {font-size: 1.35em;}
  }
  @media screen and (max-width: 1080px)               {
  .contact1 &gt; *                                       {width: 100%;}
  .contact1 &gt; span                                    {font-size: 1.05em;}
  .contact1 &gt; div a                                   {font-size: 1.15em;}
  }

.contact2                                             {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.4rem var(--contact-gap); margin-top: 2rem;}
.contact2 &gt; div                                       {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5em 1.2em; position: relative;}
.contact2 &gt; div h3                                    {font-family: var(--font2); font-weight: 400;}
.contact2 &gt; div h3:not(:first-of-type)                {margin-top: 2rem;}
.contact2 &gt; div &gt; div                                 {display: flex; width: 100%;}
.contact2 &gt; div &gt; div p                               {display: block; line-height: 1.6em;}
.contact2 &gt; div &gt; div p:nth-child(1)                  {width: 18rem;}
.contact2 &gt; div &gt; div p:nth-child(2)                  {flex-grow: 1;}
.contact2 &gt; div &gt; div p .note                         {font-size: 0.8em; line-height: 1.5em;}
.contact2 &gt; div .map                                  {display: block; width: 100%; height: 20em; background: url("/DATA/mapa.jpg") no-repeat center center; background-size: cover; position: relative; border-radius: 0 var(--border-radius2); overflow: hidden;}
.contact2 &gt; div .leaf1                                {display: block; width: 2.5em; position: absolute; right: 18%; top: -0.8em;}
.contact2 &gt; div .leaf2                                {display: block; position: absolute;}
.contact2 &gt; div &gt; span                                {display: block; line-height: 1.5em; margin-top: 0.6rem;}
  @media screen and (min-width: 1081px)               {
  .contact2 &gt; *                                       {width: calc(50% - var(--contact-gap) / 2);}
  }
  @media screen and (max-width: 1080px)               {
  .contact2 &gt; *                                       {width: 100%;}
  }
  @media screen and (min-width: 541px)                {
  .contact2 &gt; div .leaf2                              {width: 7em; left: 2.2em; top: 17.5em;}
  .contact2 &gt; div &gt; span                              {width: calc(100% - 14em); font-size: 0.75em;}
  }
  @media screen and (max-width: 540px)                {
  .contact2 &gt; div .leaf2                              {width: 5em; left: 0.5em; top: 18.5em;}
  .contact2 &gt; div &gt; span                              {width: calc(100% - 9.5em); font-size: 0.65em;}
  }

.form                                                 {display: flex; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 0.3rem;}
.form-items                                           {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: var(--form-gap);}
.form-item                                            {display: flex; width: 100%; min-height: var(--form-item-min-height); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}
.form-item input,
.form-item textarea                                   {display: block; width: 100%; background: white; font-size: 0.9em; color: var(--color0); font-weight: 700; border: solid 1px rgba(0,0,0,0.1); outline: solid 2px transparent; border-radius: var(--form-item-radius); box-sizing: border-box; position: relative; font-family: var(--font1); transition: .2s ease-in-out;}
.form-item input                                      {height: var(--input-height); padding: 0.85em 0.9em 0;}
.form-item textarea                                   {height: 8em; padding: 1.6em 0.9em 0.9em;}
.form-item:not(:has(label)) input                     {padding-top: 0;}
.form-item:not(:has(label)) textarea                  {padding-top: 0.9em;}
.form-item input:focus, 
.form-item textarea:focus                             {outline-color: var(--color1);}
.form-item label                                      {display: block; font-size: 0.9em; font-weight: 400; color: #666666; position: absolute; left: 1em; top: 1.15em; transition: .15s ease-in-out;}
.form-item .optional                                  {display: block; font-size: 0.7em; font-weight: 400; color: #999999; position: absolute; right: 1.2em; top: 1.52em;}
.form-item input[type="text"].touched:not(.empty) + label,
.form-item input[type="text"]:focus + label,
.form-item textarea.touched:not(.empty) + label,
.form-item textarea:focus + label                     {font-size: 0.65em; left: 1.28em; top: 0.8em;}
.form-item:focus-within .optional,
.form-item:has(.touched:not(.empty)) .optional        {transform: translateX(-9999px);}
.form-item input[type="file"]                         {position: absolute; left: -9999px;}
.form-item input[type="file"] + label                 {display: flex; width: auto; height: 2.6em; align-items: center; font-size: 0.9em; color: var(--color0); background: white; border-radius: 1.3em; outline: solid 2px transparent; padding: 0 1em; margin-top: 0.3rem; border: solid 1px rgba(0,0,0,0.1); position: static; left: auto; top: auto; box-sizing: border-box; cursor: pointer; transition: .2s ease-in-out;}
.form-item input[type="file"] + label span            {font-size: 1.3em; font-weight: 700; color: #666666; margin: -0.03em 0.25em 0.03em 0;}
.form-item input[type="file"]:focus + label           {outline-color: var(--color0);}
.form-item input[type="file"] + label:hover           {border-color: var(--color1);}
  @media screen and (min-width: 541px)                {
  .form-item.width50                                  {width: calc(50% - var(--form-gap) / 2);}
  }

.radio1 .opt,
.radio2 .opt                                          {display: flex; width: 100%; flex-wrap: wrap; position: relative; z-index: 1; margin: 0; box-sizing: border-box;}
.radio1 .opt input[type=radio],
.radio2 .opt input[type=radio]                        {position: absolute; visibility: hidden; left: -9999px;}
.radio1 .opt label,
.radio2 .opt label                                    {display: flex; width: 100%; align-items: center; font-weight: 400; color: var(--color0); padding-left: 1.4em; box-sizing: border-box; cursor: pointer; position: relative; transition: .15s ease-in-out;}
.radio1 .opt label:before,
.radio2 .opt label:before                             {display: block; width: 1em; height: 1em; border: solid 0.08em rgba(0,0,0,0.4); border-radius: 100%; box-sizing: border-box; position: absolute; left: 0; top: calc(50% - 0.5em); content: "";}
.radio1 .opt label:hover,
.radio2 .opt label:hover                              {border-color: var(--color0);}
.radio1 .opt input[type=radio]:checked ~ label,
.radio2 .opt input[type=radio]:checked ~ label        {font-weight: 700;}
.radio1 .opt input[type=radio]:checked ~ label:before,
.radio2 .opt input[type=radio]:checked ~ label:before {border: solid 0.22em var(--color1);}

.radio1 .opt label                                    {min-height: var(--form-item-min-height); padding: 0.5em 1em 0.5em 2.4em; border: solid 1px rgba(0,0,0,0.2); border-radius: var(--form-item-radius);}
.radio1 .opt label:before                             {left: 1em;}
.radio1 .opt label:hover                              {border-color: var(--color0);}
.radio1 .opt input[type=radio]:checked ~ label        {border-color: var(--color1);}

.opt .opt                                             {opacity: 0.35; pointer-events: none;}
.opt:has(&gt; input[type=radio]:checked) .opt            {opacity: 1; pointer-events: all;}

.attachments                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em;}
.attachments li                                       {display: block; width: 100%; text-align: left; font-size: 0.8em; color: #666666; font-weight: 700; padding: 0.5em 2.2em 0.5em 0.9em; box-sizing: border-box; position: relative;}
.attachments li:not(:last-child)                      {border-bottom: solid 1px rgba(0,0,0,0.2);}
.attachments li .remove                               {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; background: #999999; border-radius: 100%; position: absolute; right: 0.75em; top: 0.6em; cursor: pointer; transition: .2s ease-in-out;}
.attachments li .remove:after                         {display: block; width: 100%; height: 100%; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='385.7,347.3 291.4,253 385.7,158.7 344.3,117.3 250,211.6 155.7,117.3 114.3,158.7 208.6,253 114.3,347.3 155.7,388.7 250,294.4 344.3,388.7' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
.attachments li .remove:hover                         {background: var(--color3);}

.opts2                                                {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.7rem; box-sizing: border-box;}
.opts2 .opts2                                         {padding-left: 1.4em; margin-top: 0.7rem;}

.formbox                                              {justify-content: space-between; gap: 1em 0;}
.formbox &gt; div                                        {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
.formbox .button                                      {width: 14em;}
  @media screen and (min-width: 1081px)               {
  .formbox h2                                         {width: 15rem;}
  .formbox &gt; div                                      {width: 50%;}
  }
  @media screen and (max-width: 1080px)               {
  .formbox &gt; *                                        {width: 100%;}
  }

.page-perex                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 0; margin-top: -1.5rem;}
.page-perex &gt; div                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem;}
.page-perex h1                                        {background: -webkit-linear-gradient(0deg, var(--color1), var(--color1b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.page-perex p                                         {line-height: 1.6;}
  @media screen and (min-width: 1081px)               {
  .page-perex &gt; div                                   {width: 47%;}
  }
/*   @media screen and (max-width: 1080px)               {
  .page-perex :is(h1, p)                              {text-align: center;}
  } */

.facts                                          {--chart-size: 15em; gap: var(--facts-gap) 0; --facts-gap: 2rem;}
.facts &gt; div                                    {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; position: relative;}
.facts h2                                       {font-size: min(1.6rem, calc(0.8rem + 3vw)); font-weight: 400; font-family: var(--font2); margin-bottom: 0.6em;}
  @media screen and (min-width: 1081px)         {
  .facts                                        {justify-content: flex-end;}
  .facts &gt; div:not(.ownership)                  {width: calc(100% - var(--chart-size));}
  }
  @media screen and (max-width: 1080px)         {
  .facts &gt; div &gt; div                            {width: 100%;}
  }

.ownership                                      {justify-content: space-between; align-items: center; gap: 1rem 0;}
.ownership .chart                               {width: calc(var(--chart-size) - 3rem); position: relative;}
.ownership .chart .img                          {width: 100%; position: relative;}
.ownership .chart .img img                      {display: block; width: 100%;}                               
.ownership .chart .img:after                    {display: block; width: 56%; height: 56%; background: var(--color4); border-radius: 100%; position: absolute; left: 22%; top: 22%; content: ""; box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.15);}
.ownership .values ul                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem;}
.ownership .values ul li                        {display: block; width: auto; font-size: 0.75em; font-weight: 700; line-height: 1.3;}
.ownership .values ul li:nth-child(1)           {color: var(--color1b);}
.ownership .values ul li:nth-child(2)           {color: var(--color5);}
.ownership .values ul li:nth-child(3)           {color: var(--color3);}
.ownership .values ul li:nth-child(4)           {color: #808080;}
.ownership .values ul li span                   {display: block; font-size: 1.85em;}
  @media screen and (min-width: 1081px)         {
  .ownership .values                            {width: calc(100% - var(--chart-size));}
  }

.bosses                                         {justify-content: space-between; gap: var(--facts-gap) 2rem;}
.bosses &gt; div                                   {display: block;}
.bosses &gt; div ul li                             {padding-left: 1.8em; box-sizing: border-box; position: relative; margin-bottom: 0.7em;}
.bosses &gt; div ul li:before                      {display: block; width: 0.3em; height: 0.3em; background: var(--color0); border-radius: 100%; position: absolute; left: 0.8em; top: 0.52em; content: "";}
.bosses &gt; div ul li:last-child                  {margin-bottom: 0;}
  @media screen and (min-width: 725px)          {
  .bosses                                       {flex-wrap: nowrap !important;}
  }

.section-perex                                  {display: flex; width: 100%; flex-wrap: wrap;}

.site-nav                                       {display: flex; width: 100%; justify-content: center;}
.site-nav nav                                   {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em 1.5em;}
.site-nav nav a                                 {font-size: min(1.2rem, calc(0.3rem + 3vw)); color: var(--color0); text-decoration: underline; font-family: var(--font2); transition: .15s ease-in-out;}
.site-nav nav a:hover                           {color: var(--color0b); text-decoration-color: transparent;}

.team                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--team-gap); --team-gap: min(3.5rem, calc(1rem + 4vw));}
.team &gt; div                                     {display: flex; justify-content: space-between;}
.team &gt; div .img                                {display: block; width: 5em;}
.team &gt; div .img img                            {display: block; width: 100%;}
.team &gt; div &gt; div                               {display: block; width: calc(100% - 6.5em);}
.team &gt; div .name                               {font-size: 0.9em; margin-bottom: 0.6em;}
.team &gt; div .post                               {display: block; font-size: 0.85em; margin-bottom: 0.5em;}
.team &gt; div p                                   {font-size: 0.7em; line-height: 1.6;}
  @media screen and (min-width: 1081px)         {
  .team &gt; div                                   {width: calc(33.33% - var(--team-gap) * 2 / 3);}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .team &gt; div                                   {width: calc(50% - var(--team-gap) * 0.5);}
  }

.person                                         {display: flex; min-width: 18em; align-items: center; gap: 1.5em;}
.person .img                                    {display: block; width: 5em;}
.person .img img                                {display: block; width: 100%;}
.person &gt; div                                   {display: block; width: calc(100% - 6.5em);}
.person .name                                   {font-size: 0.9em; margin-bottom: 0.6em;}
.person .post                                   {display: block; font-size: 0.85em; margin-bottom: 0.5em;}

.submenu-anchor                                 {display: block; width: 100%; height: 1px;}
.submenu                                        {display: block; width: 100%; --submenu-height: 3rem; position: relative; z-index: 1000;}
.submenu &gt; div                                  {display: block; width: 100%; transition: .3s ease-in-out;}
.submenu .list                                  {display: block; width: 100%; background: #EDEDED; border-bottom: solid 2px rgba(0,0,0,0.2); transition: .5s ease-in-out;}
.submenu .submenu-nav                           {display: block; width: 100%; height: var(--submenu-height);}
.submenu .submenu-nav .fixing                   {display: block; width: 100%; height: var(--submenu-height); position: absolute; left: 0; top: 0;}
.submenu .submenu-nav .fixing .wrapper          {display: flex; height: var(--submenu-height); justify-content: space-between; align-items: center; background: #EDEDED; padding-inline: 2rem; padding-top: 2rem; box-sizing: border-box; transition: padding-top .5s ease-in-out;}

.submenu .submenu-nav .fixing .wrapper .title   {display: flex; height: 100%; align-items: center; font-size: 1.6em; color: var(--color0); font-family: var(--font2); position: relative; top: -0.15em;}
.submenu #navicon2                              {display: block; width: 1em; height: 18px; font-size: 1em; cursor: pointer; position: absolute; left: -9999px; opacity: 0; z-index: 10; transition: .5s ease-in-out;}
.submenu #navicon2 span                         {display: block; width: 100%; height: 2px; background: var(--color1); position: absolute; transition: .2s ease-in-out;}
.submenu #navicon2:hover span                   {background: var(--color1);}
.submenu #navicon2 span:nth-child(1)            {top: 0;}
.submenu #navicon2 span:nth-child(2),
.submenu #navicon2 span:nth-child(3)            {top: calc(50% - 1px);}
.submenu #navicon2 span:nth-child(4)            {bottom: 0;}
.submenu #navicon2 div                          {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;}
.submenu .list .collapse                        {display: grid; width: 100%; height: auto; grid-template-rows: 1fr; transition: grid-template-rows .5s ease-in-out;}
.submenu .list .collapse ol                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.9em; list-style: none; counter-reset: li; padding-inline: 1.3rem; background: #EDEDED; padding-block: 1.5rem 2.2rem; box-sizing: border-box; margin: 0;}
.submenu .list .collapse ol li                  {display: block; width: 100%; font-size: 1.05em; padding-left: 2.6em; box-sizing: border-box; position: relative; counter-increment: li;}
.submenu .list .collapse ol li:before           {display: block; content: counter(li) "."; font-size: 1em; position: absolute; left: 1.35em; top: 0;}
.submenu .list .collapse ol li a                {display: inline-block; color: #1F302B; text-decoration: underline; transition: .15s ease-in-out;}
.submenu .list .collapse ol li a:hover          {color: var(--color1b); text-decoration-color: transparent;}
.submenu.collapsed .fixing                      {position: fixed; z-index: 5;}
.submenu.collapsed .fixing .wrapper             {padding-top: 0;}
.submenu.collapsed #navicon2                    {position: relative; left: auto; opacity: 1;}
.submenu.collapsed .list .collapse              {grid-template-rows: 0fr;}
.submenu.show #navicon2 span:nth-child(2)       {transform: rotate(45deg);}
.submenu.show #navicon2 span:nth-child(3)       {transform: rotate(-45deg);}
.submenu.show #navicon2 span:nth-child(1), 
.submenu.show #navicon2 span:nth-child(4)       {opacity: 0 !important;}
.submenu.show #navicon2 div                     {display: block;}
.submenu.collapsed.show .list .fixed.collapse   {height: auto; grid-template-rows: 1fr;}
.submenu.collapsed .list .fixed.collapse ol     {padding-block: 0.5rem 2.2rem;}
.submenu .fixed                                 {position: fixed; left: 0; top: var(--submenu-height); z-index: 20000;}
.submenu .fixed .wrapper                        {overflow: hidden; transition: .5s ease-in-out;}
  @media screen and (max-width: 768px)          {
  .submenu                                      {font-size: 0.9em;}
  }

.video-thumb                                    {display: block; width: 100%; aspect-ratio: 1.5; position: relative;}
.video-thumb .video-img                         {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.video-thumb &gt; a                                {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem; box-sizing: border-box; position: absolute; inset: 0; z-index: 2;}
.video-thumb &gt; a img                            {display: block; width: 3em;}
.video-thumb &gt; a span                           {display: block; width: 100%; text-align: center; color: white; font-weight: 700; line-height: 1.4em;}
.video-thumb &gt; a span.title                     {font-size: 1.1rem; line-height: 1.2;}
.video-thumb &gt; a span.time                      {font-size: 0.7rem;}
.video-thumb:hover .video-img                   {opacity: 0.85;}
  @media screen and (min-width: 1081px)         {
  .video-thumb                                  {width: ;}
  } 
  @media screen and (max-width: 1080px)         {
  .video-thumb                                  {width: 100%;;}
  }

.article-styles                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; gap: 1.4rem; flex-wrap: wrap;}
.article-styles .image                          {display: block; width: 100%;} 
.article-styles .image img                      {display: block; width: 100%; transition: .15s ease-in-out;}
.article-styles .image:hover img                {opacity: 0.75;;}
.article-styles .image.auto                     {width: auto; max-width: 100%;} 

.article-styles figcaption                      {display: block; width: 100%; font-size: 0.8em; color: #666666; margin-top: -0.5rem;}
.article-styles .box.rounded2                   {display: flex; flex-wrap: wrap; gap: 1rem; padding: min(calc(0.4rem + 4vw), 2.6rem); border-radius: 1.2em 0 1.2em 0;}
.article-styles  .images                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7em;}
.article-styles  .images .img                   {display: block; width: auto; max-width: 100%; height: 12em;}
.article-styles  .images .img img               {width: auto; max-width: 100%; height: 100%; object-fit: contain; transition: .15s ease-in-out;}
.article-styles  .images .img:hover img         {opacity: 0.85;}
.article-styles .embed                          {display: block; width: 100%; margin-top: calc(0.6 * var(--gap1)); border-radius: var(--border-radius);}
.article-styles .embed iframe                   {display: block; width: 100%;}

.article-styles .image:hover &gt; span img         {opacity: 0.9;}
.article-styles h3                              {font-size: min(1.8rem, calc(1rem + 2vw)); margin-block: 0.5rem -0.3rem;}
.article-styles h4                              {margin-block: 0.4rem -0.3rem;}
.article-styles p                               {margin-top: 0 !important;}
.article-styles :is(h2, h3, h4, p, li)          {max-width: 100%; text-align: left;}
.article-styles li                              {box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles ul li                           {padding-left: 1.55em;}
.article-styles ul li:before                    {display: block; width: 0.3em; height: 0.3em; background: white; border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.58em; content: "";}
.article-styles ul li:last-child                {margin-bottom: 0;}
.article-styles li :is(ul, ol)                  {margin-block: 0.4em 0.8em;}
.article-styles li li                           {font-size: 1em !important;}
.article-styles li li:before                    {background: none; border: solid 0.06em white; box-sizing: border-box;}
.article-styles ol                              {list-style: none; counter-reset: li; padding: 0; margin: 0;}
.article-styles ol &gt; li                         {counter-increment: li; padding-left: 2em;}
.article-styles ol &gt; li:before                  {display: block; content: counter(li) "."; font-size: 1em; font-weight: 500; color: white; position: absolute; left: 0.65em; top: 0;}
.article-styles .highlight                      {display: block; width: 100%; background: var(--color1b); padding: 1.8em; box-sizing: border-box; border-radius: var(--border-radius2);}
  @media screen and (max-width: 640px)          {
  .article-styles .gallery                      {width: calc(100% - 1.4rem); margin-inline: 0.7rem;}
  }

ul.arrows                                       {display: flex; flex-wrap: wrap; gap: 0.5em;}
ul.arrows li                                    {padding-left: 1.8em; position: relative;}
ul.arrows li:before                             {display: block; width: 0.9em; height: 0.9em; position: absolute; left: 0; top: 0.42em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M240,39.3c21.6-21.3,56.3-21.3,77.9,0l177.6,175.3c11.5,11.3,17,26.4,16.5,41.3c0.5,14.9-5,30-16.5,41.3 L318,472.7c-21.6,21.3-56.3,21.3-77.9,0c-22-21.7-22-57.2,0-78.9l87.4-86.3H55.1C24.7,307.4,0,282.8,0,252.3s24.7-55.1,55.1-55.1 h265l-80-79C218.1,96.5,218.1,61,240,39.3z' width='1' height='1' fill='rgb(255,143,0)' stroke='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
ul.arrows li .note                              {display: block; width: 100%; font-size: 0.8em; margin-top: 0.45em;}

.tip2                                           {display: flex; width: 100%; max-width: 46em; justify-content: center; flex-wrap: wrap; gap: 1em; margin: 0 auto 1rem;}
.tip2 span                                      {display: block; width: 100%; text-align: center; font-size: min(calc(1.2rem + 2vw), 1.8rem); color: var(--color1); font-family: var(--font2); font-weight: 700; line-height: 1.5em;}
.tip2 .brush                                    {display: block; width: 14em; max-width: 50%; margin-top: -0.5rem;}
.tip2 p                                         {text-align: center;}

.quote1                                         {justify-content: space-between;}
.quote1 h2                                      {font-size: 1.4em; font-weight: 400;}
.quote1 div                                     {display: block; padding-left: 3.8em; box-sizing: border-box; position: relative;}
.quote1 div:before                              {display: block; width: 2.5em; height: 2.5em; position: absolute; left: 0; top: 0.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 380'%3E%3Cpath d='M227.2,99.1c-4.5-17.7-11.8-34.6-21.5-50C186,17.5,154.2,1.7,110.3,1.7c-29.3-1.2-58,9.2-79.7,29 C10.2,50.2-0.9,77.6,0.1,105.9c-1.5,28.6,9.2,56.4,29.5,76.4c20.9,19,48.4,28.9,76.6,27.7c29.4,1.2,57.9-10.6,77.9-32.4 c2.8,8.3,4.1,16.9,4.1,25.7c-0.1,10.5-1.4,21-4.1,31.2c-4.7,25.8-16.5,49.7-34.2,68.9c-18.3,21.9-41.6,39.1-67.8,50.1l12.1,24.3 c43.1-18.7,79.8-49.7,105.5-89.3c23.7-38.1,36.1-82.2,35.5-127.2C235.3,140.3,232.6,119.4,227.2,99.1z M503.9,99.1 c-4.5-17.7-11.7-34.6-21.4-50C462.7,17.5,430.9,1.7,387,1.7c-29.2-1.1-57.6,9.3-79.2,29c-20.6,19.4-32,46.8-31.1,75.2 c-1.6,28.6,9.3,56.4,29.6,76.4c20.9,19,48.4,28.9,76.6,27.7c29.4,1.2,57.9-10.6,77.9-32.4c2.7,8.3,4.1,16.9,4.1,25.7 c-0.1,10.5-1.5,21-4.1,31.2c-4.7,25.8-16.6,49.7-34.2,68.9c-18.3,21.9-41.6,39.1-67.8,50.1l12.2,24.3 c43.1-18.7,79.7-49.8,105.4-89.3c23.8-38.1,36.2-82.2,35.6-127.2C512,140.3,509.3,119.4,503.9,99.1z' width='1' height='1' fill='rgb(25,163,35)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left top; background-size: contain; content: "";}
.quote1 div p                                   {font-size: 1em; font-family: var(--font2);}
.quote1 div span                                {display: block; font-size: 0.8em; margin-top: 1rem;}
  @media screen and (min-width: 1081px)         {
  .quote1 h2                                    {width: 28%;}
  .quote1 div                                   {width: 60%;}
  }

.quote2                                         {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.quote2 h2                                      {font-weight: 400;}
.quote2 div                                     {display: block; padding: min(2.5em, calc(0.6em + 3vw)); background: var(--color1d); border-left: solid 0.1em var(--color1); box-sizing: border-box; position: relative;}
.quote2 div p                                   {font-size: 1.05em; color: var(--color1); font-weight: 700;}
.quote2 div span                                {display: block; font-size: 0.8em; margin-top: 1rem;}
  @media screen and (min-width: 1081px)         {
  .quote2 h2                                    {width: 45%;}
  .quote2 div                                   {width: 50%;}
  }

.compare                                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.2em 0;}
.compare .table                                 {display: block; width: 100%; overflow-x: auto;}
.compare .table table                           {width: 100%; min-width: 40em;}
.compare .table :is(th, td)                     {text-align: left; font-size: 0.7em; padding: 0.6rem; vertical-align: top;}
.compare .table :is(th, td) strong              {display: block; font-size: 1.25em; margin-bottom: 0.2em;}
.compare .table :is(th, td):nth-child(2)        {background: var(--color1d);}
.compare .table :is(th, td):nth-child(n+3)      {background: var(--color4);}
.compare .table :is(th, td):nth-child(n+2)      {width: 13em;}
.compare .table td:first-child                  {text-align: right; font-size: 0.8em;}
.compare .table td:first-child strong           {font-size: 1em;}
.compare article                                {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 1.6em;}
.compare article &gt; div                          {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em;}
.compare article &gt; div h2                       {font-size: 1.5em; color: var(--color1); font-weight: 700; margin: 0;}
  @media screen and (min-width: 1081px)         {
  .compare .table                               {width: 66%;}
  .compare article                              {width: 30%;}
  .compare article &gt; div                        {width: 100%;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .compare article &gt; div                        {width: calc(50% - 0.8em);}
  }

.section:has(.why) h2,
.section:has(.consumption) h2,
.section:has(.green-deal-tr) h2,
.section:has(.examples) h2,
.section:has(.features) h2,
.section:has(.calc-wrapper) h2,
      .section:has(.calc2) h2                         {text-align: center; font-weight: 400; margin: 0;}
.section:has(.why) p,
.section:has(.consumption) p,
.section:has(.green-deal-tr) p,
.section:has(.examples) p                       {text-align: center; margin-inline: auto;}

.why                                            {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1em 0;}
.why .box                                       {max-width: 27em; aspect-ratio: 1; padding: 0; overflow: hidden;}
.why .box img                                   {display: block; width: 100%;}
.why p                                          {font-size: min(1.6em, calc(1em + 3vw)); color: var(--color1); font-weight: 700; font-family: var(--font2); padding-top: 2em; box-sizing: border-box; position: relative;}
.why p:before                                   {display: block; width: 100%; height: 1.4em; position: absolute; left: 0;; top: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 380'%3E%3Cpath d='M227.2,99.1c-4.5-17.7-11.8-34.6-21.5-50C186,17.5,154.2,1.7,110.3,1.7c-29.3-1.2-58,9.2-79.7,29 C10.2,50.2-0.9,77.6,0.1,105.9c-1.5,28.6,9.2,56.4,29.5,76.4c20.9,19,48.4,28.9,76.6,27.7c29.4,1.2,57.9-10.6,77.9-32.4 c2.8,8.3,4.1,16.9,4.1,25.7c-0.1,10.5-1.4,21-4.1,31.2c-4.7,25.8-16.5,49.7-34.2,68.9c-18.3,21.9-41.6,39.1-67.8,50.1l12.1,24.3 c43.1-18.7,79.8-49.7,105.5-89.3c23.7-38.1,36.1-82.2,35.5-127.2C235.3,140.3,232.6,119.4,227.2,99.1z M503.9,99.1 c-4.5-17.7-11.7-34.6-21.4-50C462.7,17.5,430.9,1.7,387,1.7c-29.2-1.1-57.6,9.3-79.2,29c-20.6,19.4-32,46.8-31.1,75.2 c-1.6,28.6,9.3,56.4,29.6,76.4c20.9,19,48.4,28.9,76.6,27.7c29.4,1.2,57.9-10.6,77.9-32.4c2.7,8.3,4.1,16.9,4.1,25.7 c-0.1,10.5-1.5,21-4.1,31.2c-4.7,25.8-16.6,49.7-34.2,68.9c-18.3,21.9-41.6,39.1-67.8,50.1l12.2,24.3 c43.1-18.7,79.7-49.8,105.4-89.3c23.8-38.1,36.2-82.2,35.6-127.2C512,140.3,509.3,119.4,503.9,99.1z' width='1' height='1' fill='rgb(25,163,35)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center top; background-size: auto 100%; content: "";}
.why p em                                       {font-weight: 400;}
  @media screen and (min-width: 1081px)         {
  .why                                          {justify-content: space-between;}
  .why &gt; *                                      {width: 47% !important;}
  .why p                                        {text-align: left !important;}
  .why p:before                                 {width: 3em; background-position: left top;}
  }

.joining                                        {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em 0;}
.joining h2                                     {font-weight: 400; margin: 0;}
.joining ul.arrows li a                         {color: var(--color1);}
  @media screen and (min-width: 1081px)         {
  .joining h2                                   {width: 22%;}                    
  .joining p                                    {width: 42%;}                    
  .joining ul                                   {width: 25%;}                    
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .joining p                                    {width: 62%;}                    
  .joining ul                                   {width: 34%;}                    
  }

.features                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2em 0;}
.features article                               {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.features .head                                 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em; padding: 1.8em; box-sizing: border-box; border-radius: 1em;}
.features .head img                             {display: block; width: auto; height: 3em;}
.features .head span                            {display: block; width: 100%; text-align: center; font-size: 1.2em; color: white; font-weight: 600;}
.features h2                                    {font-size: 1.35em; color: var(--color1); margin: 0;}

.features article:nth-child(1) .head            {background: var(--color5);}
.features article:nth-child(2) .head            {background: var(--color1);}
.features article:nth-child(3) .head            {background: var(--color2);}
  @media screen and (min-width: 769px)          {
  .features article                             {width: 29%;}
  .features .head                               {min-height: 11em;}
  }

.features.v2 article .img                       {display: block; width: 100%; max-width: 12em;}
.features.v2 article .img img                   {display: block; width: 100%;}
.features.v2 article:nth-child(1) .head         {background: var(--color1); align-items: center; align-content: center;}
.features.v2 article:nth-child(2) .head         {background: var(--color2);}
.features.v2 article:nth-child(2) .head span    {/*color: black;*/}
.features.v2 article:nth-child(3) .head         {background: var(--color5);}
.features.v2 article:nth-child(1) .large        {font-size: 1.45em; color: var(--color1); line-height: 1.3; font-weight: 700; font-family: var(--font2);}
.features article h2                         {font-size: 1.45em; color: var(--color1); line-height: 1.3; font-weight: 700!important; text-align:left!important; font-family: var(--font2);}

.section:has(.do-you-know) h2                   {text-align: center; font-weight: 400; margin-bottom: 0; padding-top: 0.7em;}
.section:has(.do-you-know) h2:before            {display: block; width: 4em; height: 0.2em; background: url("images/line1.svg") no-repeat center center; background-size: contain; position: absolute; left: calc(50% - 2em); top: 0; content: "";}

.do-you-know                                    {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em 0; margin-bottom: 3em;}
.do-you-know &gt; div                              {display: block; position: relative;}
.do-you-know .leaves                            {display: block; width: 10em; height: 5em; position: absolute; left: 3em; bottom: -5em; overflow: hidden;}
.do-you-know .leaves img                        {display: block; position: absolute;}
.do-you-know .leaves img:nth-child(1)           {width: 3.8em; left: 0; top: -1em;}
.do-you-know .leaves img:nth-child(2)           {width: 1em; left: 4.5em; top: 0.8em;}
  @media screen and (min-width: 1081px)         {
  .do-you-know &gt; p                              {width: 22% !important;}
  .do-you-know &gt; div                            {width: 45% !important; padding: 3em 4em !important;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .do-you-know &gt; p                              {width: 47% !important;}
  }

.faq                                            {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem 0; box-sizing: border-box;}
.faq h2                                         {font-weight: 400; margin-bottom: 0;}
.faq &gt; div                                      {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6rem;}
.faq .faq-list                                  {gap: 0.2rem;}
.faq p                                          {font-size: 0.85em; line-height: 1.4em; margin-top: 0.3rem;}
.faq p a                                        {color: var(--color1);}
.faq-list article                               {display: block; width: 100%;}
.faq-list :is(.title, p)                        {text-align: left;}
.faq-list .title                                {font-size: 0.9em; line-height: 1.3em; background: white; padding: 0.8rem 2.2rem 0.7rem 1rem; margin: 0; border-radius: 0.1rem; border: solid 1px rgba(0,0,0,0.1); cursor: pointer; position: relative; font-family: var(--font1); transition: .15s ease-in-out;}                                             
.faq-list .title:hover                          {border-color: var(--color1);}
.faq-list .title:after                          {display: inline-block; width: 0.5em; height: 0.7em; opacity: 0.5; transform: rotate(90deg); position: absolute; right: 1rem; top: calc(50% - 0.37em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 512'%3E%3Cpolygon points='-1.1,46.4 208.6,256 -1.1,465.6 45.3,512 301.3,256 45.3,0' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;}
.faq-list .collapse                             {display: none; width: 100%; padding: 0.5rem 0.8rem 1rem 2rem; box-sizing: border-box;}
.faq-list article.sel .title:after              {transform: rotate(-90deg);}
  @media screen and (min-width: 1081px)         {
  .faq                                          {justify-content: space-between;}
  .faq &gt; div:nth-child(1)                       {width: 15em;}
  .faq &gt; div:nth-child(2)                       {width: calc(100% - 16em);}
  .faq h2                                       {text-align: left; font-size: 2rem;}
  .faq p                                        {text-align: left;}
  }

.cta2                                           {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 1em 0;}
.cta2 .flex                                     {display: flex; width: 100% !important; justify-content: center; margin-bottom: calc(var(--section-padding) - 1em);}
.cta2 h2                                        {font-size: min(1.8rem, calc(1.1rem + 3vw)); color: var(--color1); margin: 0;}
.cta2 div                                       {display: flex; flex-wrap: wrap; gap: 1em;}
  @media screen and (min-width: 1081px)         {
  .cta2                                         {justify-content: space-between;}
  .cta2 &gt; *                                     {width: 47% !important;}
  .cta2 div                                     {align-items: flex-start;}
  }
  @media screen and (max-width: 1080px)         {
  .cta2 &gt; *                                     {width: 100%; justify-content: center; text-align: center;}
  .cta2 .highlighted                            {border-left: solid 0.1em transparent; border-bottom: solid 0.1em var(--color1);}
  }

.cta-contact                                    {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: var(--wrapper-gap);}
.cta-contact img                                {display: block; widtH: 100%;}
.cta-contact .img                               {display: block; widtH: 5rem;}
.cta-contact p                                  {width: auto;}
.cta-contact .signature                         {display: block; width: 12rem;}

.box-headline                                   {text-align: center; font-size: min(2rem, calc(0.6rem + 3vw)) !important; margin-bottom: 0 !important;}
.box-headline span                              {display: inline-block; text-align: center; color: white !important; background: var(--color1); padding: 0.8em 2em; border-radius: var(--border-radius2) 0 0 0; box-sizing: border-box;}

.chart                                          {display: block; width: 100%; box-sizing: border-box; margin-top: calc(0px - var(--wrapper-gap)); position: relative;}
.chart img                                      {display: block; width: 100%; border-radius: var(--border-radius1); box-shadow: 0 0.5em 0.4em rgba(0,0,0,0.08);}
.chart.with-hover .hover                        {opacity: 0; position: absolute; left: 0; top: 0; z-index: 2; transition: .15s ease-in-out; box-shadow: none;}
.chart.with-hover:hover .hover                  {opacity: 1;}

.chart-note                                     {display: block; width: 100%; display:none; text-align: center; font-size: 0.8em; color: var(--color0);}

.media                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem 1.2rem;}
.media &gt; div                                    {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem;}
.media &gt; div .img                               {display: block; width: 100%; aspect-ratio: calc(3 / 2); border-radius: var(--border-radius1) 0; overflow: hidden;}
.media &gt; div .img img                           {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.media &gt; div .img:hover img                     {opacity: 0.8;}
.media &gt; div .info                              {display: flex; align-items: center; gap: 0.7em; font-size: 0.7em; color: var(--color0);}
.media &gt; div .info .tag                         {display: flex; height: 2.4em; align-items: center; font-size: 0.85em; color: white; text-transform: uppercase; background: var(--color0); padding: 0 0.85em; border-radius: 1.2em; box-sizing: border-box;}
.media &gt; div .title                             {display: block; width: 100%; font-weight: 700;}
.media &gt; div .title a                           {color: var(--color1); text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}
.media &gt; div .title a:hover                     {color: var(--color1b); text-decoration-color: var(--color1b);}
.media &gt; div .link                              {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.media &gt; div .link svg                          {display: block; width: 0.85em; height: 0.85em; fill: var(--color0);}
.media &gt; div .link:hover                        {opacity: 0.7; text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .media &gt; div                                  {width: calc(25% - 0.9rem);}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .media &gt; div                                  {width: calc(50% - 0.6rem);}
  }

.how-steps                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2em 0;}
.how-steps &gt; div                                {display: block; width: 100%;}
.how-steps &gt; div span                           {display: flex; color: white;}
.how-steps &gt; div .num                           {width: 2em; height: 2em; justify-content: center; align-items: center; font-size: 1.6em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498,14v368c0,30.8-12.1,59.9-34.1,81.9S412.8,498,382,498H14V130c0-30.8,12.1-59.9,34.1-81.9S99.2,14,130,14H498 M512,0 H130C58.5,0,0,58.5,0,130v382h382c71.5,0,130-58.5,130-130V0L512,0z' width='1' height='1' fill='rgba(255,255,255,0.4)' stroke='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;}
.how-steps &gt; div .title                         {width: 100%; font-size: 1.2em; font-weight: 700; margin-block: 0.8em;}
.how-steps &gt; div .text                          {font-size: 0.9em; line-height: 1.5;}
  @media screen and (min-width: 1081px)         {
  .how-steps &gt; div                              {width: calc(25% - 1.2em);}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .how-steps &gt; div                              {width: calc(50% - 0.8em);}
  }

.how                                            {display: flex; flex-wrap: wrap; gap: 1.2em;}
.how h2                                         {font-size: 1.6em; color: var(--color1); margin: 0;}
.how &gt; img                                      {display: block; width: 90%; max-width: 20em; height: auto; margin-top: 1em;}
  @media screen and (max-width: 768px)          {
  .how &gt; img                                    {position: absolute; left: 0; bottom: 0;}
  }

.list-bulbs                                     {display: flex; flex-wrap: wrap; gap: 2em;}
.list-bulbs &gt; div                               {display: block; width: 100%; padding-left: 1.6em; box-sizing: border-box; position: relative;}
.list-bulbs &gt; div span                          {display: block; width: 100%; font-size: 0.85em; line-height: 1.4;}
.list-bulbs &gt; div .title                        {font-size: 1em; line-height: 1.3; margin-bottom: 0.3em;}
.list-bulbs &gt; div:before                        {display: block; width: 1.1em; height: 1.1em; position: absolute; left: 0; top: 0.2em; background: url("images/bulb.svg") no-repeat left top; background-size: contain; content: "";}
  @media screen and (min-width: 769px)          {
  .box:has(.list-bulbs)                         {padding: min(4rem, calc(1rem + 3vw));}
  }
  @media screen and (max-width: 768px)          {
  .box:has(.list-bulbs)                         {margin-bottom: 9rem;}
  }

.consumption                                    {display: flex; width: 100%; flex-wrap: wrap; gap: var(--section-padding) 0;}
.consumption &gt; div                              {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.2em 0;}
.consumption &gt; div .block                       {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.consumption &gt; div .block *                     {max-width: 100%; text-align: left;}
.consumption &gt; div .block h3                    {color: var(--color1);}
  @media screen and (min-width: 1081px)         {
  .consumption &gt; div .box                       {width: 65%;}
  .consumption &gt; div .block                     {width: 30%;}
  .consumption &gt; div:nth-child(even) .block     {order: -1;;}
  }

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

.green-deal-box                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 2em;}
.green-deal-box &gt; div                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;}
.green-deal-box &gt; div &gt; div                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
.green-deal-box &gt; div &gt; div h2                  {font-size: 1.4em; font-family: var(--font1); margin: 0;}
.green-deal-box .tip                            {justify-content: center; margin-top: 1rem;}
  @media screen and (min-width: 1081px)         {
  .green-deal-box &gt; div &gt; div:nth-child(1)      {width: 25%;}
  .green-deal-box &gt; div &gt; div:nth-child(2)      {width: 70%;}
  }
  @media screen and (min-width: 769px)          {
  .green-deal-box &gt; div &gt; div.c2                {justify-content: space-between;}
  .green-deal-box &gt; div &gt; div.c2 &gt; *            {width: 48%;}
  }

.green-deal-tr                                  {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--section-padding);}
.green-deal-tr &gt; div                            {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.4em 0;}
.green-deal-tr &gt; div &gt; div                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 0;}
.green-deal-tr &gt; div *                          {justify-content: flex-start; text-align: left !important; max-width: 100% !important;}
.green-deal-tr .text h2                         {font-size: 1.6em; color: var(--color1); font-weight: 700 !important;}
.green-deal-tr .centered                        {display: flex; width: 100%; justify-content: center;}
.green-deal-tr .img-centered                    {display: flex; width: 100%; justify-content: center;}
.green-deal-tr .img-centered img                {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .green-deal-tr .c2                            {justify-content: space-between;}
  .green-deal-tr .c2 &gt; div:nth-child(1)         {width: 55%;}
  .green-deal-tr .c2 &gt; div:nth-child(2)         {width: 40%;}
  .green-deal-tr .c2 .box                       {padding: 3.6em;}
  .green-deal-tr .c2.rev &gt; div:nth-child(2)     {order: -1;}
  .green-deal-tr .centered &gt; *                  {max-width: 28rem !important;}
  .green-deal-tr .img-centered &gt; *              {max-width: 36rem !important;}
  }

.table-color8                                   {display: block; width: 100%; font-size: 0.9em; background: var(--color8); padding: 0.9em 1.2em; box-sizing: border-box;}
.table-color8 td                                {padding-block: 0.7em;}
.table-color8 td:not(:first-child)              {padding-left: 1em;}
.table-color8 tr:not(:first-child) td           {border-top: solid 1px rgba(0,0,0,0.3);}
.table-color8 .color5 td                        {color: var(--color5);}
.table-color8 .color7 td                        {color: var(--color7);}
.table-color8 .color1 td                        {color: var(--color1);}

.green-deal-box2                                {gap: 1em; position: relative;}
.green-deal-box2 .leaves                        {display: block; width: 10em; height: 5em; position: absolute; left: 3em; bottom: -5em; overflow: hidden;}
.green-deal-box2 .leaves img                    {display: block; position: absolute;}
.green-deal-box2 .leaves img:nth-child(1)       {width: 3.8em; left: 0; top: -1em;}
.green-deal-box2 .leaves img:nth-child(2)       {width: 1em; left: 4.5em; top: 0.8em;}

.emp-color5-bulb                                {display: block; width: 100%; font-size: 1.2em !important; color: var(--color0) !important; font-weight: 400 !important; line-height: 1.3 !important; padding-left: 1.4em; box-sizing: border-box; position: relative;}
.emp-color5-bulb:before                         {display: block; width: 1em; height: 1em; position: absolute; left: 0; top: 0.2em; background: url("images/bulb.svg") no-repeat left top; background-size: contain; content: "";}

.news-data                                      {display: flex; width: 100%; justify-content: space-between !important; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2em 0 !important;}
.news-data &gt; div                                {display: flex; width: 100%; flex-wrap: wrap; position: relative;}
.news-data *                                    {color: white !important;}                                    
.news-data .titles span                         {display: block; font-family: var(--font2); position: absolute;}
.news-data .titles span:nth-child(1)            {width: 12em; font-size: 1.35em; left: 0; top: 0; transform: rotate(-5deg);}
.news-data .titles span:nth-child(2)            {width: 12em; font-size: 1em; right: 0; top: 5rem;}
.news-data .titles span:nth-child(3)            {width: 8em; font-size: 1.6em; left: 0; top: 9rem; transform: rotate(-8deg);}
.news-data .titles span:nth-child(4)            {font-size: 0.9em; right: 5%; top: 17.5rem; transform: rotate(-12deg);}
.news-data .titles span:nth-child(5)            {width: 14em; font-size: 1.2em; left: 0; top: 20.5rem; transform: rotate(-5deg);}
.news-data .img img                             {display: block; width: 100%;}
.news-data .note                                {margin-top: 0.8em;}
.news-data i                                    {font-style: italic;}
.news-data .news-quote &gt; p                      {font-size: 1.05em;}
.news-data .author                              {display: flex; align-items: center; gap: 0.8em; margin-top: 0.8em;}
.news-data .author img                          {display: block; width: 3em; height: 3em; border-radius: 100%;}
.news-data .author span                         {display: block; font-size: 0.9em;}
.news-data .author span strong                  {display: block;}
  @media screen and (min-width: 1081px)         {
  .news-data &gt; div:nth-child(odd)               {width: 35%;}
  .news-data &gt; div:nth-child(even)              {width: 60%;}
  .news-data .titles                            {min-height: 25rem;}
  }
  @media screen and (max-width: 1080px)         {
  .news-data .titles                            {height: 25rem;}
  }

.structure                                      {display: flex; width: 100%; justify-content: space-between;  align-content: flex-start; flex-wrap: wrap;}
.structure &gt; div                                {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; box-sizing: border-box;}
.structure &gt; div h2                             {font-size: 1.3em; font-weight: 400; margin: 0;}
.structure .groups                              {gap: 1em 2em;}
.structure .groups &gt; div                        {display: block;}
.structure .groups &gt; div h2                     {margin-bottom: 0.5em;}
.structure &gt; div ul li                          {padding-left: 1.2em; box-sizing: border-box; position: relative;}
.structure &gt; div ul li:not(:first-child)        {margin-block: 0.2em;}
.structure &gt; div ul li:before                   {display: block; width: 0.3em; height: 0.3em; background: var(--color0); border-radius: 100%; position: absolute; left: 0.3em; top: 0.65em; content: "";}
.structure &gt; div .chart2                        {display: flex; width: 100%; align-items: center; gap: 1.2em 2em;}
.structure &gt; div .chart2 img                    {display: block; width: 10em; height: 10em;}
.structure &gt; div .chart2 li                     {padding-left: 1em; font-weight: 700;}
.structure &gt; div .chart2 li:before              {width: 0.6em; height: 0.6em; left: 0; top: 0.5em; content: "";}
.structure &gt; div .chart2 li:nth-child(1)        {color: var(--color1e);}
.structure &gt; div .chart2 li:nth-child(1):before {background: var(--color1e);}
.structure &gt; div .chart2 li:nth-child(2)        {color: var(--color1);}
.structure &gt; div .chart2 li:nth-child(2):before {background: var(--color1);}
.structure &gt; div .chart2 li:nth-child(3)        {color: var(--color5);}
.structure &gt; div .chart2 li:nth-child(3):before {background: var(--color5);}
.structure &gt; div .chart2 li:nth-child(4)        {color: var(--color3);}
.structure &gt; div .chart2 li:nth-child(4):before {background: var(--color3);}
.structure &gt; div .chart2 li:nth-child(5)        {opacity: 0.55;}
.structure &gt; div .chart2 li:nth-child(6)        {opacity: 0.35;}
  @media screen and (min-width: 1081px)         {
  .structure &gt; div:nth-child(1)                 {width: 70%; padding-right: 5%; border-right: solid 1px var(--color0);}
  .structure &gt; div:nth-child(2)                 {width: 30%; padding-left: 5%;}
  }
  @media screen and (max-width: 1080px)         {
  .structure &gt; div:nth-child(2)                 {padding-top: 2em; margin-top: 2em; border-top: solid 1px var(--color0);}
  }

.structure2                                     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--section-padding);}
.structure2 &gt; div                               {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.5em 0;}
.structure2 &gt; div h2                            {text-align: center; font-family: var(--font1);}
.structure2 .row2 &gt; div                         {display: block;}
.structure2 .member img                         {display: block; width: 5em; margin-bottom: 1em;}
.structure2 .member span                        {display: block; margin-bottom: 0.35em;}
.structure2 .member .name                       {font-size: 1.1em; font-weight: 700;}
.structure2 .member ul li                       {padding-left: 1.2em; box-sizing: border-box; position: relative;}
.structure2 .member li:not(:first-child)        {margin-block: 0.2em;}
.structure2 .member li:before                   {display: block; width: 0.3em; height: 0.3em; background: var(--color0); border-radius: 100%; position: absolute; left: 0.3em; top: 0.65em; content: "";}
.structure2 .member.unie                        {display: flex; align-items: flex-start; gap: 1.2em;}
.structure2 .member.unie .box                   {width: 21em; justify-content: center; align-items: center; padding: 2em 2.5em !important; border-radius: 4em 0;}
.structure2 .member.unie .box img               {display: block; width: 100%; margin: 0;}
  @media screen and (min-width: 1081px)         {
  .structure2 .member.unie                      {width: 70%;}
  }
  @media screen and (max-width: 1080px)         {
  .structure2 .member.unie                      {margin-top: 1.5em;}
  }
  @media screen and (min-width: 769px)          {
  .structure2 .row2 &gt; div                       {width: 30%;}
  }
  @media screen and (max-width: 768px)          {
  .structure2 .member.unie                      {flex-wrap: wrap;}
  }

.mobile-overflow                                {display: block; width: 100%; overflow-x: auto; padding-bottom: 1em;}

.mobile-overflow:has(.table1)                   {margin-top: -5em;}
/*.table1                                         {display: block; width: 100%; min-width: 65rem; padding-top: 6em;}
.table1 .upper                                  {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; border-bottom: solid 0.1em var(--color1); position: relative;}
.table1 .info                                   {display: flex; width: 11em; flex-direction: column; flex-wrap: wrap; gap: 0.8em;}
.table1 .info &gt; span                            {display: block; width: 100%; font-size: 0.8em; color: white; background: var(--color1); line-height: 1.4; padding: 1em; border-radius: var(--border-radius1); box-sizing: border-box;}
.table1 .info &gt; span .medium                    {font-size: 1.2em;}
.table1 .info &gt; span .large                     {font-size: 1.7em;}
.table1 .powerplant                             {display: block; width: 16em; height: auto; position: absolute; left: 7em; bottom: 0;}
.table1 table                                   {width: calc(100% - 16em); border-collapse: collapse; position: relative; z-index: 2;}
.table1 table :is(th, td)                       {text-align: left; font-size: 0.9em; padding: 0.7em 0.4em;}
.table1 table th                                {font-size: 0.85em; font-weight: 700; padding-top: 0; vertical-align: bottom; border-bottom: solid 0px rgba(0,0,0,0.06);}
.table1 table td                                {vertical-align: top; color: var(--color1); border-top: solid 0.1em var(--color1);}
.table1 table td:first-child                    {font-weight: 700; text-transform: uppercase;}
.table1 table tr:first-child td                 {border-top: none;} 
.table1 table tbody tr:nth-last-child(2) td,
.table1 table tbody tr:nth-last-child(3) td     {color: var(--color3); background: rgba(255,143,0, 0.08); border-top: solid 0.1em var(--color3) !important;}
.table1 table tbody tr:nth-last-child(3) td     {border-bottom: solid 0.1em var(--color3); }
.table1 table tbody tr:nth-last-child(2) td     {border-bottom: 0px!important;}
.table1 table tbody tr:nth-last-child(1) td     {border-top: 0px!important; padding-bottom:0px!important;}
.table1 table td img                            {display: block; width: auto; height: 6em;}
.table1 table .note                             {display: block; font-size: 0.75em; margin-top: 0.3em;}
.table1 .bottom                                 {display: block; width: 100%;}
.table1 .bottom .distance                       {display: block; height: 1.2em; margin: 0 0 2em 13.5em; border: dashed 0.1em var(--color0); border-top: none; position: relative;}
.table1 .bottom .distance span                  {display: block; width: 100%; text-align: center; font-size: 1em; font-weight: 700; position: absolute; left: 0; bottom: -1.8em;}
.table1.companies .bottom .distance             {width: calc(100% - 15em - 35em);}
.table1.households .bottom .distance            {width: calc(100% - 15em - 37em);}
  @media screen and (max-width: 1280px)         {
  .table1 .powerplant                           {width: 14em; position: absolute; left: 8em;}
  }*/
.table1                                         {display: block; width: 100%; min-width: 65rem; padding-top: 6em;}
.table1 .upper                                  {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; border-bottom: solid 0.1em var(--color1); position: relative;}
.table1 .info                                   {display: flex; width: 11em; flex-direction: column; flex-wrap: wrap; gap: 0.8em;}
.table1 .info &gt; span                            {display: block; width: 100%; font-size: 0.8em; color: white; background: var(--color1); line-height: 1.4; padding: 1em; border-radius: var(--border-radius1); box-sizing: border-box;}
.table1 .info &gt; span .medium                    {font-size: 1.2em;}
.table1 .info &gt; span .large                     {font-size: 1.7em;}
.table1 .powerplant                             {display: flex; width: 21em; height: 118%; align-items: flex-start; position: absolute; left: 3em; bottom: 0; overflow: hidden;}
.for-households .powerplant { height: 98%;}
.for-households .table1 .info   { position:relative; top:4em; }
.table1 .powerplant img                         {display: block; width: 100%;}
.table1 .powerplant img:nth-child(2)            {display: block; width: 100%; position: absolute; left: 0; top: 0; animation-name: spin; animation-duration: 12000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
.table1 table                                   {width: calc(100% - 16em); border-collapse: collapse; position: relative; z-index: 2;}
.table1 table :is(th, td)                       {text-align: left; font-size: 0.9em; padding: 0.7em 0.4em;}
.table1 table th                                {font-size: 0.80em; font-weight: 700; padding-top: 0; vertical-align: bottom; border-bottom: solid 0.1em rgba(0,0,0,0.06);}
.table1 table td                                {vertical-align: middle; color: var(--color1); border-top: solid 0.14em var(--color1);}
.table1 table td:first-child                    {font-weight: 700; text-transform: uppercase;}
.table1 table tr:first-child td                 {border-top: none;} 
.table1 table tbody tr:nth-last-child(2) td,
.table1 table tbody tr:nth-last-child(3) td     {color: var(--color3); background: rgba(255,143,0, 0.08); border-top: solid 0.1em var(--color3) !important;}
.table1 table tbody tr:nth-last-child(3) td     {border-bottom: solid 0.1em var(--color3); }
.table1 table tbody tr:nth-last-child(2) td     {border-bottom: solid 0.14em var(--color3);}
.table1 table td img                            {display: block; width: auto; height: 6em;}
.table1 table .note                             {display: block; font-size: 0.75em; margin-top: 0.3em;}
.table1 .bottom                                 {display: block; width: 100%;}
.table1 .bottom .distance                       {display: block; height: 1.2em; margin: 0 0 2em 13.5em; border: dashed 0.1em var(--color0); border-top: none; position: relative;}
.table1 .bottom .distance span                  {display: block; width: 100%; text-align: center; font-size: 1em; font-weight: 700; position: absolute; left: 0; bottom: -1.8em;}
.table1.companies .bottom .distance             {width: calc(100% - 15em - 35em);}
.table1.households .bottom .distance            {width: calc(100% - 15em - 37em);}

@keyframes spin                                 {
                                                from {transform:rotate(0deg);}
                                                to {transform:rotate(360deg);}
}
  
/*.examples                                       {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2rem 0;}
.examples &gt; div                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7em;}
.examples &gt; div h3                              {color: var(--color1); margin: 0;}
.examples &gt; div p                               {text-align: left !important; font-size: 0.85em;}
.examples &gt; div .info                           {display: block; width: 100%;}
.examples &gt; div .info &gt; div                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 1em; padding-block: 0.9em; border-top: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;}
.examples &gt; div .info &gt; div:nth-child(1)        {border-top: none;}
.examples &gt; div .info &gt; div &gt; span              {display: block; font-size: 0.85em;}
.examples &gt; div .info &gt; div &gt; span:nth-child(2) {text-align: right;}
.examples &gt; div .info &gt; div &gt; span span         {font-size: 0.8em;}
.examples &gt; div .info &gt; div:nth-last-child(2)   {align-items: flex-end; color: var(--color1);}
.examples &gt; div .info &gt; div:nth-last-child(2) span:nth-child(2)  
                                                {font-size: 1.1em;}
.examples &gt; div .info &gt; div:last-child          {align-items: center; background: rgba(25,163,35,0.1); color: var(--color1); border-top: solid 1px var(--color1); padding-inline: 0.7em;}
.examples &gt; div .info &gt; div:last-child span:nth-child(1)
                                                {font-size: 1.3em; white-space: nowrap;}
.examples &gt; div .info &gt; div:last-child span:nth-child(2)
                                                {font-size: 0.65em;}
  @media screen and (min-width: 961px)          {
  .examples &gt; div                               {width: 31%;}
  }*/
      .examples                                       {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2rem 0;}
      .examples &gt; div                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7em;}
      .examples &gt; div h3                              {color: var(--color1); margin: 0;}
      .examples &gt; div p                               {text-align: left !important; font-size: 0.8em;}
      .examples &gt; div .info                           {display: block; width: 100%;}
      .examples &gt; div .info &gt; div                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 1em; padding-block: 0.9em; border-top: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;}
      .examples &gt; div .info &gt; div:nth-child(1)        {border-top: none;}
      .examples &gt; div .info &gt; div &gt; span              {display: block; font-size: 0.85em;}
      .examples &gt; div .info &gt; div &gt; span:nth-child(2) {text-align: right;}
      .examples &gt; div .info &gt; div &gt; span span         {font-size: 0.8em;}
      .examples &gt; div .info &gt; div:nth-last-child(2)   {align-items: flex-end; color: var(--color1);}
      .examples &gt; div .info &gt; div:nth-last-child(2) span:nth-child(2)  
                                                      {font-size: 1.1em;}
      .examples &gt; div .info &gt; div:last-child          {align-items: center; background: rgba(25,163,35,0.1); color: var(--color1); border-top: solid 1px var(--color1); padding-inline: 0.7em;}
      .examples &gt; div .info &gt; div:last-child span:nth-child(1)
                                                      {font-size: 1.3em; white-space: nowrap;}
      .examples &gt; div .info &gt; div:last-child span:nth-child(2)
                                                      {font-size: 0.65em;}
      @media screen and (min-width: 961px)          {
        .examples &gt; div                               {width: 31%;}
        .examples.households &gt; div p                  {height: 5.5em;}
        .examples.companies &gt; div p                   {height: 5.5em;}
Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;Â&nbsp;}

.for-households .page-head2 .flex               {justify-content: flex-start; margin-top: 1.5rem;}
.for-households .page-head2 .box,
.boxSolar                {aspect-ratio: 4/3; padding: 0 !important;}
.for-households .page-head2 .box img,
.boxSolar img            {width: 100%; height: 100%; object-fit: cover;}        

.chart-text                                     {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem 0;}
.chart-text &gt; div                               {display: flex; width: 47%; flex-wrap: wrap; gap: 0.8rem;}
.chart-text .box                                {transform: rotateY(180deg); padding-block: 2rem !important;}
.chart-text .box img                            {transform: rotateY(180deg);}
.chart-text h2                                  {font-size: 1.6em; color: var(--color1); margin-bottom: 0;}
  @media screen and (max-width: 1080px)         {
  .chart-text &gt; div                             {width: 100%;}
  .chart-text &gt; div *                           {text-align: center;}
  }

.chart-text2                                    {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem 0;}
.chart-text2 &gt; div                              {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem;}
.chart-text2 .box                               {transform: rotateY(180deg); padding-block: 2rem !important;}
.chart-text2 .box img                           {transform: rotateY(180deg);}
.chart-text2 h2                                 {font-size: 1.6em; color: var(--color1); margin-bottom: 0;}
  @media screen and (min-width: 1081px)         {
  .chart-text2 &gt; div:nth-child(1)               {width: 64%;}
  .chart-text2 &gt; div:nth-child(2)               {width: 30%;}
  .chart-text2.reversed &gt; div:nth-child(2)      {order: -1;}
  }
  @media screen and (max-width: 1080px)         {
  .chart-text2:not(:first-child)                {margin-top: 2rem;}
  }



      .calc2                                          {display: block; width: 100%;}
      .calc2 &gt; div                                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--calc2-gap); padding: 2rem; box-sizing: border-box; --calc2-gap: 1.5rem;}
      .calc2 &gt; div h3                                 {font-size: 1.2em; margin-bottom: 0;}
      .calc2 &gt; div &gt; div                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem;}
      .calc2 .upper                                   {background: var(--color4); border-radius: var(--border-radius1) var(--border-radius1) 0 0;}
      .calc2 .upper h3                                {color: var(--color1);}
      .calc2 .requested-buy                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap;}
      .calc2 .requested-buy .slider                   {display: flex; width: calc(100% - 7.5rem); justify-content: space-between; flex-wrap: wrap; gap: 0.4em 1em;}
      .calc2 .requested-buy .slider input             {width: 100%;}
      .calc2 .requested-buy .slider span              {display: block; font-size: 0.7em; color: var(--color0); opacity: 0.7;}
      .calc2 .requested-buy .form-item                {width: 6.5rem; }
      .calc2 .requested-buy .form-item input          {padding-right: 2em;}
      .calc2 .requested-buy .form-item .units         {display: flex; height: 100%; align-items: center; font-size: 0.7em; color: #999999; position: absolute; right: 1em; top: 0;}
      .calc2 .usage .notes                            {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
      .calc2 .usage .notes .row                       {display: flex; width: 100%; justify-content: space-between;}
      .calc2 .usage .notes .row &gt; span                {display: block; font-size: 0.75em; line-height: 1.4;}
      .calc2 .usage .notes .row &gt; span:nth-child(1)   {width: 6em;}
      .calc2 .usage .notes .row &gt; span:nth-child(2)   {width: calc(100% - 7.5em);}
      .calc2 .price1 .results                         {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em; background: white; padding: 1.4em; border-radius: 1em; box-sizing: border-box;}
      .calc2 .price1 .results &gt; div                   {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.6em;}
      .calc2 .price1 .results &gt; div .result           {display: flex; align-items: center; gap: 0.4em; font-size: 1em; font-weight: 700; color: var(--color1); padding: 0.5em 0.6em 0.6em; border-radius: 0.5em; box-sizing: border-box; overflow: hidden; position: relative;}
      .calc2 .price1 .results &gt; div .result:before    {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      .calc2 .price1 .results &gt; div .result .units    {display: block; color: var(--color0); font-weight: 400; font-size: 0.85em; opacity: 0.8;}
      .calc2 .price1 .results &gt; div .resultInfo       { font-size:0.7em; display:inline-block; }
      .calc2 .price1 .results &gt; div:nth-child(2)      {font-size: 0.8em;}
      .calc2 .price1 .results &gt; div:nth-child(3)      {display: flex; align-items: center; flex-wrap: nowrap; gap: 0.4em; font-size: 1.5em; font-weight: 700; color: var(--color1); white-space: nowrap; padding: 0.5em 0.6em 0.6em; border-top: solid 1px var(--color1); box-sizing: border-box; position: relative;}
      .calc2 .price1 .results &gt; div:nth-child(3) span {display: block; font-size: 0.4em; white-space: wrap;}
      .calc2 .price1 .results &gt; div:nth-child(3):before
                                                      {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      .calc2 .bottom                                  {border: solid 1px var(--color1); border-radius: 0 0 var(--border-radius1) var(--border-radius1);}
      .calc2 .bottom h3                               {font-family: var(--font1);}
      .calc2 .table                                   {display: block; width: 100%;}
      .calc2 .table table                             {width: 100%; border-collapse: collapse; font-size: 0.9em;}
      .calc2 .table table td                          {padding: 0 1em 1em 0; vertical-align: middle;}
      .calc2 .table table td:last-child               {width: 55%; padding-right: 0; vertical-align:top; }
      .calc2 .table table tr:first-child td           {padding-top: 0;}
      .calc2 .table table tr:last-child td            {font-size: 1.1em; padding-block: 0.65em 0; border-top: solid 1px rgba(0,0,0,0.4);}
      .calc2 .table table td .dot                     {display: inline-block; width: 0.6em; height: 0.6em; border-radius: 100%; margin-right: 0.3em;}
      .calc2 .envys table td .dot                     {background: var(--color1);}
      .calc2 .envys table tr:last-child td:last-child {color: var(--color1);}
      .calc2 .ceps table td .dot                      {background: var(--color3);}
      .calc2 .ceps table tr:last-child td:last-child  {color: var(--color3);}
      .calc2 .benefits                                {display: flex; width: 100%; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; gap: 1em 0; padding: 1.5em; border-radius: 0.6em; position: relative; overflow: hidden;}
      .calc2 .benefits:before                         {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      .calc2 .benefits &gt; div                          {display: flex; align-items: center; text-align:center; gap: 0.5em; font-size: 1em;}
      .calc2 .benefits &gt; div svg                      {display: block; width: 1.7em; height: 1.7em; fill: var(--color1);}
      .calc2 .benefits &gt; div span                     {display: block; font-size: 1.2em; font-weight: 700; color: var(--color1);}
      .calc2 .infos                                   {display: flex; justify-content: space-between; gap: 1em;}
      .calc2 .infos &gt; div                             {display: flex; flex-wrap: wrap; gap: 0.4em;}
      .calc2 .infos &gt; div span                        {display: block; width: 100%; font-size: 0.8em; color: var(--color0);}
        @media screen and (min-width: 1081px)         {
        .calc2 .upper .usage                          {width: calc(55% - var(--calc2-gap));}
        .calc2 .upper .price1                         {width: 40%;}
        .calc2 .bottom &gt; div:nth-child(-n+2)          {width: 47%;}
        .calc2 .infos &gt; div:nth-child(1)              {width: 35%;}
        .calc2 .infos &gt; div:nth-child(2)              {width: 60%;}

        }
        @media screen and (max-width: 1080px)         {
        .calc2 .ceps table tr:nth-child(3)            {display: none;}
        .calc2 .benefits &gt; div                        {width: 100%; flex-direction: column; align-content: center; align-items: center;}
        .calc2 .benefits &gt; div span                   {margin-bottom: -0.3em;}
        .calc2 .price1 .results &gt; div .resultInfo     { font-size:0.6em; }
        }
        @media screen and (max-width: 540px)          {
        .calc2 &gt; div                                  {padding: 1.2rem;}
        .calc2 .price1 .results                       {padding: 1.1em;}
        }




.calc2 input[type="number"]::-webkit-inner-spin-button,
.calc2 input[type="number"]::-webkit-outer-spin-button
                                                {-webkit-appearance: none; margin: 0;}
.calc2 input[type="number"]                     {-moz-appearance: textfield;}




.lb_navratInvestice { font-size:0.8em; padding-left:1em; display:inline-block; }
.calc-form input[type="range"],
.calc2 input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    margin: 10px 0;
    height: 15px; 
    border-radius: 5px; 
}

.calc-form input[type="range"]::-webkit-slider-thumb,
.calc2 input[type="range"]::-webkit-slider-thumb {
    height: 30px; 
    width: 30px;
    border-radius: 50%; 
    background: url('/themes/default/images/range/tahlo.png') no-repeat center; 
    background-size: cover;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0px;
    background-color: red;
}
.calc-form input[type="range"]::-moz-range-thumb,
.calc2 input[type="range"]::-moz-range-thumb {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: url('/themes/default/images/range/tahlo.png') no-repeat center; 
    background-size: cover;
    cursor: pointer;
}
#tooltip {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    color: white; 
    border: 0px solid #333;
    padding: 15px;
    border-radius: 5px;
    pointer-events: none;
    font-size:20px;
}
#tooltip .tltRadio { display: inline-block; width: 10px; height: 10px; border-radius:50%; }

#tooltip .tltText { display: inline-block; margin-left: 5px; font-size:15px; text-align:right; }


.calc-form input[type="number"]::-webkit-inner-spin-button, 
.calc-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.calc-form input[type="number"] { -moz-appearance: textfield; }


.calc-wrapper .tab { display:block; position:relative; top:1px; }
.calc-wrapper .tab &gt; div { font-size:0.95em; border-top-left-radius: 10px; display:inline-block; border-top-right-radius: 10px; border: solid 1px var(--color1); border-bottom: none; padding:20px; color:var(--color1); cursor:pointer; text-decoration:underline; }
.calc-wrapper .tab &gt; div.sel { color:gray; background-color:var(--color4); color:black; text-decoration:none; border:1px solid var(--color4); cursor:inherit !important; }
.calc-box-v2 { display:none; }


.chartLegend { font-size:0.7em; color:#9a9a9a; position:relative; text-align:center; }
.chartLegend span:first-child { position:absolute; left:9%; width: 6rem; }
.chartLegend span:last-child { position:absolute; right:3%; width: 6rem; }
 @media screen and (max-width: 640px)          {
  .chartLegend span:first-child { position:absolute; left:8%; width: 4rem; }
.chartLegend span:last-child { position:absolute; right:11%; width: 4rem; }
  }

.mapczhp    { position:relative; top:-5em; } 
 @media screen and (max-width: 1080px)          {
    .mapczhp    { top:0em; } 
} 

@media screen and (min-width: 1081px)         {
  body                                          {padding-top: 7rem;}
  }
  @media screen and (max-width: 1080px)         {
  body                                          {padding-top: 4rem;}
  }

.header { background: white; position: fixed; left:0; top:0;}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}  



.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 5em min(1rem, 5%) 4.5em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;}
.wndw:before                                    {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;}
.wndw &gt; .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.wndw &gt; div                                     {width: 100%; max-width: 40em; max-height: calc(100vh - 4rem); background: white; transform: scale(0.95); position: relative; border-radius: var(--border-radius); overflow: hidden; z-index: 2; overflow-y: auto; overflow-x: hidden; box-shadow: 0 0 1em rgba(0,0,0,0.5); transition: .4s ease-in-out;}
.wndw &gt; div:before                              {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;}
.wndw &gt; div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}
.wndw.show                                      {left: 0;}
.wndw.show:before                               {opacity: 1;}
.wndw.show &gt; div                                {transform: scale(1);}
.wndw.show.hide                                 {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;}
.wndw.show.hide:before                          {opacity: 0;}
.wndw.show.hide &gt; div                           {transform: scale(0.95); opacity: 0;}
.wndw .cross                                    {display: block; width: 1.1em; height: 1.1em; cursor: pointer; position: absolute; right: 0.9rem; top: 0.9rem; z-index: 10002;}
.wndw .cross span                               {display: block; width: 100%; height: 2px; background: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;}
.wndw .cross:hover span                         {background: #252525;}
.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}
.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}
.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em; font-size: 1rem; padding: max(1rem, 7%); box-sizing: border-box;}
.wndw .wndw-content :is(.title, p)              {display: block; width: 100%; text-align: center;}
.wndw .wndw-content .title                      {font-size: 2em; font-weight: 800; font-family: var(--font2); margin-bottom: -0.4em;}
.wndw .form-items                               {width: auto; justify-content: center;}
.wndw .form-item:not(.w100)                     {width: 20rem !important;}
.wndw .attachments                              {justify-content: center; flex-wrap: wrap; background: none; padding: 0;}
.wndw .attachments .upload-types                {width: 100%; justify-content: center; order: -1;}
.wndw .attachments .media                       {width: 100%; justify-content: center;}
.wndw .flex                                     {width: 20rem !important; align-items: center; margin: 0;}
.wndw .link                                     {display: block; font-size: 0.9em; color: #999999; font-weight: 500; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.wndw .link:hover                               {color: var(--color0); text-decoration-color: transparent;}
.wndw .flex .button:not(:only-of-type)          {width: calc(50% - 0.5 * var(--flex-gap));}
  @media screen and (min-width: 541px)          {
  .wndw .form-items                             {width: 100%; justify-content: space-between;}
  .wndw .form-items:has(.form-item:only-child)  {justify-content: center;}
  .wndw .form-item:not(.w100)                   {width: calc(50% - 0.5 * var(--form-gap)) !important;}
  }
  @media screen and (max-width: 540px)          {
  .wndw .upload-types &gt; div                     {width: 33.33%; justify-content: center;}  
  .wndw .wndw-content .upload-types &gt; div .btn  {flex-direction: column; text-align: center;}
  }




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

.calc3 .notes2 h2             { font-size:1.7em; margin-top:1em; margin-bottom:0.5em; }
.calc3 .notes2 &gt; div          { border-radius:10px; background-color:#EDEDED; font-size:0.95em; padding:1em; }
.calc3 .notes2 span          { font-size:0.85em; }
.calc3 #in_calc2_castkaCelkem   { color:#19A323; font-size:1.4em; font-weight:600; margin-right:0.35em; }
.calc3 #in_calc2_castkaCelkem:after   { content:" KÄŤ" }
.calc3 #in_calc2_splatka        {  color:#19A323; font-size:1em; font-weight:600; margin-right:0.35em; }
.calc3 #in_calc2_splatka:after   { content:" KÄŤ" }
.calc3 #in_calc2_pocetSplatek   { font-weight:600; }
.calc3 #in_calc2_castkaDenne    { font-weight:600; margin-right:0.35em; }
.calc3 #in_calc2_castkaDenne:after   { content:" KÄŤ" }
.calc3 .vaseCena                { width:45%; }
.calc3 .celkemCeny              { background-color:#EDF9EA; padding:2em 2em; }
.calc3 .celkemCeny .jedna       { display:flex; border-bottom:1px solid #B6D3CD; }
.calc3 .celkemCeny .jedna div   { font-size:0.8em; padding-bottom:1em; width:70%; }
.calc3 .celkemCeny .jedna div a { font-weight:600; text-decoration:underline; color:#000; }
.calc3 .celkemCeny .jedna .inputy  { width:30%; }
.calc3 .celkemCeny .jedna .inputy span { display:block; text-align:right; }

.calc3 .celkemCeny .dva       { display:flex; border-bottom:1px solid #B6D3CD; }
.calc3 .celkemCeny .dva div   { font-size:0.8em; padding-bottom:1em; width:70%; }
.calc3 .celkemCeny .dva div a { font-weight:600; text-decoration:underline; color:#000; }
.calc3 .celkemCeny .dva div:first-child   { font-size:0.9em; }
.calc3 .celkemCeny .dva div:last-child   { font-size:0.8em; padding-bottom:1em; width:70%; }
.calc3 .celkemCeny .dva div:last-child span  { font-size:1.4em; font-weight:600; display:block; }
.calc3 .celkemCeny .dva div:last-child span#in_calc2_cenaEnvys_zaplatite2  { color:#199B23; text-align:right; position:relative; }
.calc3 .celkemCeny .dva div:last-child span#in_calc2_cenaEnvys_zaplatite2::before  { content:""; border-radius:50%; /*position:absolute; left:22%; top:5px;*/ width:15px; height:15px; display:inline-block; margin-right:5px; background-color:#199B23; }
.calc3 .celkemCeny .dva div:last-child span#in_calc2_cenaCeps_zaplatite2   { color:#FF6C27; text-align:right; position:relative; }
.calc3 .celkemCeny .dva div:last-child span#in_calc2_cenaCeps_zaplatite2::before  { content:""; border-radius:50%; /*position:absolute; left:22%; top:5px;*/ width:15px; height:15px; display:inline-block; margin-right:5px; background-color:#FF6C27; }

.calc3 .celkemCeny .tri         { font-size:0.9em; }
.calc3 .celkemCeny .tri svg     { display:inline; width: 1.7em; height: 1.7em; fill: var(--color1); position:relative; top:7px; left:-4px; }
.calc3 .celkemCeny .tri span    { color:#199B23; }
.calc3 .button { margin:2em 0 1em 0; }

      .calc3 &gt; div                                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--calc2-gap); padding: 2rem; box-sizing: border-box; --calc2-gap: 1.5rem;}
      .calc3 &gt; div h3                                 {font-size: 1.7em; color:#000!important; margin-bottom: 1em;}
      .calc3 .upper                                   { display:flex; background: #fff; border-radius: var(--border-radius1) var(--border-radius1) 0 0; border:2px solid var(--color1); }
      .calc3 .upper h3                                {color: var(--color1);}
      .calc3 .requested-buy                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap;}
      .calc3 .requested-buy .slider                   {display: flex; width: calc(100% - 7.5rem); justify-content: space-between; flex-wrap: wrap; gap: 0.4em 1em; margin-bottom:1em; }
      .calc3 .requested-buy .slider input             {width: 100%;}
      .calc3 .requested-buy .slider span              {display: block; font-size: 0.8em; color: var(--color0); opacity: 0.9;}
      .calc3 .requested-buy .form-item                {width: 6.5rem; }
      .calc3 .requested-buy .form-item input          {padding-right: 2em; border:3px solid #66BC29; position:relative; top:-0.5em; }
      .calc3 .requested-buy .form-item .units         {display: flex; height: 100%; align-items: center; font-size: 0.7em; color: #999999; position: absolute; right: 1em; top: 0;}
      .calc3 .usage .notes                            {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
      .calc3 .usage .notes .row                       {display: flex; width: 100%; justify-content: space-between;}
      .calc3 .usage .notes .row &gt; span                {display: block; font-size: 0.65em; line-height: 1.4;}
      .calc3 .usage .notes .row &gt; span:nth-child(1)   {width: 6em;}
      .calc3 .usage .notes .row &gt; span:nth-child(2)   {width: calc(100% - 7.5em);}
      .calc3 .price1 .results                         {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em; background: white; padding: 1.4em; border-radius: 1em; box-sizing: border-box;}
      .calc3 .price1 .results &gt; div                   {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.6em;}
      .calc3 .price1 .results &gt; div .result           {display: flex; align-items: center; gap: 0.4em; font-size: 1em; font-weight: 700; color: var(--color1); padding: 0.5em 0.6em 0.6em; border-radius: 0.5em; box-sizing: border-box; overflow: hidden; position: relative;}
      .calc3 .price1 .results &gt; div .result:before    {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      .calc3 .price1 .results &gt; div .result .units    {display: block; color: var(--color0); font-weight: 400; font-size: 0.85em; opacity: 0.8;}
      .calc3 .price1 .results &gt; div .resultInfo       { font-size:0.7em; display:inline-block; }
      .calc3 .price1 .results &gt; div:nth-child(2)      {font-size: 0.8em;}
      .calc3 .price1 .results &gt; div:nth-child(3)      {display: flex; align-items: center; flex-wrap: nowrap; gap: 0.4em; font-size: 1.5em; font-weight: 700; color: var(--color1); white-space: nowrap; padding: 0.5em 0.6em 0.6em; border-top: solid 1px var(--color1); box-sizing: border-box; position: relative;}
      .calc3 .price1 .results &gt; div:nth-child(3) span {display: block; font-size: 0.4em; white-space: wrap;}
      .calc3 .price1 .results &gt; div:nth-child(3):before
                                                      {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      
      .calc3 .bottom                                  {border: solid 2px #EDEDED; background-color:#EDEDED; border-radius: 0 0 var(--border-radius1) var(--border-radius1);}
      .calc3 .bottom h3                               {font-family: var(--font1);}
      .calc3 .table                                   {display: block; width: 100%;}
      .calc3 .table table                             {width: 100%; border-collapse: collapse; font-size: 0.9em;}
      .calc3 .table table td                          {padding: 0 1em 1em 0; vertical-align: middle;}
      .calc3 .table table td:last-child               {width: 55%; padding-right: 0; vertical-align:top; }
      .calc3 .table table tr:first-child td           {padding-top: 0;}
      .calc3 .table table tr:last-child td            {font-size: 1.1em; padding-block: 0.65em 0; border-top: solid 1px rgba(0,0,0,0.4);}
      .calc3 .table table td .dot                     {display: inline-block; width: 0.6em; height: 0.6em; border-radius: 100%; margin-right: 0.3em;}
      .calc3 .envys table td .dot                     {background: var(--color1);}
      .calc3 .envys table tr:last-child td:last-child {color: var(--color1);}
      .calc3 .ceps table td .dot                      {background: var(--color3);}
      .calc3 .ceps table tr:last-child td:last-child  {color: var(--color3);}
      .calc3 .benefits                                {display: flex; width: 100%; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; gap: 1em 0; padding: 1.5em; border-radius: 0.6em; position: relative; overflow: hidden;}
      .calc3 .benefits:before                         {display: block; background: var(--color1); opacity: 0.15; position: absolute; inset: 0; content: "";}
      .calc3 .benefits &gt; div                          {display: flex; align-items: center; text-align:center; gap: 0.5em; font-size: 1em;}
      .calc3 .benefits &gt; div svg                      { }
      .calc3 .benefits &gt; div span                     {display: block; font-size: 1.2em; font-weight: 700; color: var(--color1);}
      .calc3 .infos                                   {display: flex; justify-content: space-between; gap: 1em;}
      .calc3 .infos &gt; div                             {display: flex; flex-wrap: wrap; gap: 0.4em;}
      .calc3 .infos &gt; div span                        {display: block; width: 100%; font-size: 0.8em; color: var(--color0);}
        @media screen and (min-width: 1081px)         {
        .calc3 .upper .usage                          {width: calc(55% - var(--calc2-gap));}
        .calc3 .upper .price1                         {width: 40%;}
        .calc3 .bottom &gt; div:nth-child(-n+2)          {width: 47%;}
        .calc3 .infos &gt; div:nth-child(1)              {width: 35%;}
        .calc3 .infos &gt; div:nth-child(2)              {width: 60%;}

        }
        @media screen and (max-width: 1080px)         {
        .calc3 .ceps table tr:nth-child(3)            {display: none;}
        .calc3 .benefits &gt; div                        {width: 100%; flex-direction: column; align-content: center; align-items: center;}
        .calc3 .benefits &gt; div span                   {margin-bottom: -0.3em;}
        .calc3 .price1 .results &gt; div .resultInfo     { font-size:0.6em; }
.calc3 .usage  { width:100%; }
.calc3 .vaseCena  { width:100%; }
        }
        @media screen and (max-width: 540px)          {
        .calc3 &gt; div                                  {padding: 1.2rem;}
        .calc3 .price1 .results                       {padding: 1.1em;}
        }




.calc3 input[type="number"]::-webkit-inner-spin-button,
.calc3 input[type="number"]::-webkit-outer-spin-button
                                                {-webkit-appearance: none; margin: 0;}
.calc3 input[type="number"]                     {-moz-appearance: textfield;}




.calc3 input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    margin: 10px 0;
    height: 15px; 
    border-radius: 5px; 
}

.calc3 input[type="range"]::-webkit-slider-thumb {
    height: 30px; 
    width: 30px;
    border-radius: 50%; 
    background: url('/themes/default/images/range/tahlo.png') no-repeat center; 
    background-size: cover;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0px;
    background-color: red;
}

.calc3 input[type="range"]::-moz-range-thumb {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: url('/themes/default/images/range/tahlo.png') no-repeat center; 
    background-size: cover;
    cursor: pointer;
}


.ulHP { display: flex !important; align-items: flex-start; }
.ulHP h1 { color:var(--color1); }
.ulHP &gt; div:first-child { width:37%; text-align:left; padding-right:5%; }
.ulHP &gt; div:first-child h1 { text-align:left; }
.ulHP ul { margin-top:0 !important; list-style: none; padding: 0; margin: 0; text-align: left; }
.ulHP ul li { position: relative; margin: 0px 0; padding: 0.1rem 1rem 0.1rem 2.2rem; font-size:1rem; }
/*
.ulHP ul li::before { content: "â—Ź"; font-size:1.3rem; line-height:1rem; color: var(--color1); position: relative; top:0.1rem; transform: none; margin: 0 5px; }
*/
.ulHP ul li::before  {display: block; width: 1.6em; height: 1.1em; position: absolute; left: 0; top: calc(50% - 0.5em); content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 300'%3E%3Cpath d='M461.9,38C392.9,38,337,93.9,337,162.9V213h50.1c33.1,0,64.9-13.2,88.3-36.6C498.8,153,512,121.2,512,88.1V38 H461.9z M284,210.7C284,98.7,193.3,8,81.3,8H0v81.3c0,53.8,21.4,105.3,59.4,143.3c38,38,89.6,59.4,143.3,59.4H284V210.7z' width='1' height='1' fill='rgb(25,163,35)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain;}
.ulHP ul li a { color:var(--color1); text-decoration:none; }
.ulHP ul li a:hover { text-decoration:underline; }
.ulHP p { font-size:1rem!important; padding:0 0 0 2.2rem!important; text-align:left!important; }
.ulHP p a { text-decoration-color:var(--color0); }

/*.ulHP li::before { left: 0; transform: translateX(-100%); }
.ulHP li::after { right: 0; transform: translateX(100%); }*/
@media screen and (max-width: 1080px)         {
.ulHP  { display:block !important; }
.ulHP &gt; div:first-child { width:100%; margin-bottom:1.5rem;  padding-right:0%; }
.ulHP &gt; div:first-child h1 { text-align:center; }
.ulHP ul { list-style: none; padding: 0; margin: 2rem 0 0 0 !important; text-align: left; }
.ulHP ul li { position: relative; margin: 0.5rem 0 0 0; padding:0 0 0 2rem; line-height:1.2rem; }
/*.ulHP ul li::before, 
.ulHP ul li::after { content: "â—Ź"; font-size:1.3rem; line-height:1rem; color: var(--color1); position: relative; top:0rem; transform: none; margin: 0 5px; }
*/

.ulHP ul li::before  {display: inline-block; width: 1.6em; height: 1.1em; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 300'%3E%3Cpath d='M461.9,38C392.9,38,337,93.9,337,162.9V213h50.1c33.1,0,64.9-13.2,88.3-36.6C498.8,153,512,121.2,512,88.1V38 H461.9z M284,210.7C284,98.7,193.3,8,81.3,8H0v81.3c0,53.8,21.4,105.3,59.4,143.3c38,38,89.6,59.4,143.3,59.4H284V210.7z' width='1' height='1' fill='rgb(25,163,35)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain;}

.ulHP p { text-align:center!important; padding:0 0 0 0rem!important; }
}


.pagination                                     {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 0.3em; margin-top: 2rem;}
.pagination a                                   {display: flex; width: 2.2em; justify-content: center; align-items: center; font-size: 0.9em; line-height: 1em; color: #666666; font-weight: 800; background: #EDEDED; padding: 0.6em 0 0.4em; box-sizing: border-box; transform: var(--skew); transition: .2s ease-in-out;}
.pagination a:hover                             {background: #b8b8b8;}
.pagination a.sel                               {color: white; border-color: var(--color1); background: var(--color1); font-weight: 600;}
  @media screen and (max-width: 1080px)         {
  .pagination a                                 {font-size: 0.9em;}
}</pre></body></html>