.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 .dropdown-content .collapse { display:block !important; }

#pn_datumProhlidky, #pn_recommendation      { display:none; }

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

:root                                           {
                                                --font1:        'roboto', sans-serif; /* 300, 400, 500 */
                                                --font2:        'korolev-condensed', sans-serif; /* 700 */

                                                --color0:       #222637;
                                                --color1:       #8b9ff3;
                                                --color1b:      #;  
                                                --color2:       #7777ee;   
                                                --color3:       #685dd9; 
                                                --color4a:      #e9406b; /* rgb(233,64,107); */
                                                --color4b:      #eb3434;
                                                --color5:       rgba(0,0,0,0.2);
                                                --color5b:      rgba(0,0,0,0.1);

                                                --gradient1:    linear-gradient(to left, var(--color1), var(--color3));
                                                --gradient2:    linear-gradient(to left, var(--color4a), var(--color4b));

                                                --wrapper-padding: 5vw;
                                                --gap1: 1rem;     

                                                --section-padding: min(5rem, calc(1.3rem + 5vw));
                                                --padding1:     2rem;
                                                --label: 13rem;
                                                }
  @media screen and (min-width: 1081px)         {
  :root                                         {
                                                --header: 6rem;
                                                --header-scroll: 5rem;
                                                }                                              
  }
  @media screen and (max-width: 1080px)         {
  :root                                         {
                                                --header: 5rem;
                                                --header-scroll: 4.2rem;                                              
                                                }                                                
  }
  @media screen and (min-width: 541px)          {
  :root                                         {
                                                --swiper-button-size: min(2.4rem, calc(1rem + 4vw));
                                                }
  }
  @media screen and (max-width: 540px)          {
  :root                                         {
                                                --swiper-button-size: min(3rem, calc(1rem + 8vw));
                                                }
  }
html                                            {display: block; width: 100%; background: white; font-size: min(19px, calc(11px + 1vw)); color: var(--color0); font-weight: 300; line-height: 1.5; 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: 58rem; flex-wrap: wrap; gap: var(--gap1); margin-inline: auto; position: relative; box-sizing: border-box; z-index: 1;}
.wrapper.wide                                   {--max-width: 70rem;}

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

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

.header                                         {display: flex; width: 100%; height: var(--header); justify-content: space-between; align-items: center; font-size: 1rem; box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 1000; isolation: isolate; transition: .15s ease-in-out;}
.header:before                                  {display: block; background: rgba(244, 244, 244, 0.9); opacity: 0; position: absolute; inset: 0; content: ""; transition: .15s ease-in-out;}
.header .wrapper                                {height: var(--header); justify-content: space-between; align-items: center; transition: .15s ease-in-out;}
.header a                                       {display: flex; align-items: center; gap: 0.35em; color: var(--color0); font-weight: 700; text-decoration: none; font-family: var(--font2); transition: .15s ease-in-out;}
.header a svg                                   {display: block; width: 0.95em; height: 0.95em; fill: var(--color1); position: relative; top: -0.09em;}
.header a:hover, .header a.sel                  {color: var(--color1);}
.header .logo                                   {position: relative; z-index: 10000; transition: .15s ease-in-out;}
.header .logo a                                 {width: 14em;}
.header .logo a img                             {display: block; width: 100%;} 
.header nav                                     {display: block; width: 100%; box-sizing: border-box; top: 0;}
.header nav ul                                  {display: flex; width: 100%; align-items: center; flex-wrap: wrap; transition: .15s ease-in-out;}
.header nav ul li                               {display: flex; width: auto; position: relative; transition: .15s ease-in-out;}
.header nav ul li a                             {position: relative;}
.header .mail                                   {color: var(--color1); position: relative; z-index: 10;}
.header .mail:hover                             {color: var(--color2);}
.header .mail:hover svg                         {fill: var(--color2);}
.header.scroll                                  {height: var(--header-scroll); backdrop-filter: blur(3px);}
.header.scroll:before                           {opacity: 1;}
  @media screen and (min-width: 1081px)         {
  .header nav :is(nav, ul)                      {height: var(--header);}
  .header nav                                   {padding-left: 16em; position: absolute; left: 0; transition: .15s ease-in-out;}
  .header nav ul li a                           {height: 3em; font-size: 1.1em; padding-inline: 1.5em;}
  .header nav ul li a:before                    {display: block; width: 1px; height: 100%; background: black; opacity: 0.15; position: absolute; left: 0; top: 0; content: ""; transform: rotate(-22deg);}
  .header #navicon                              {display: none;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1380px){
  .header                                       {font-size: 0.9rem;}
  .header .wrapper                              {width: min(var(--max-width), calc(100vw - var(--wrapper-padding)));}
  .header .logo a                               {width: 13em;}
  .header nav                                   {padding-left: 15em;}
  .header nav ul li a                           {padding-inline: 1em;}
  }
  @media screen and (max-width: 1080px)         {
  .header .logo                                 {flex-grow: 1;}
  .header nav                                   {height: 100svh; padding: 7em 10% 2em; background: rgba(255, 255, 255, 0.9); opacity: 0; position: fixed; right: -101vw; overflow: auto; transition-delay: right .25s; transition: opacity .25s ease-in-out;}
  .header nav ul li                             {width: 100%; padding-block: 0.4em;}
  .header nav ul li a                           {font-size: 1.5em;}
  .header nav ul li a:before                    {display: block; font-size: 1em; color: var(--color1); opacity: 0; position: absolute; left: -0.8em; top: 0.1em; transform: rotate(-25deg); content: "I";}
  .header nav ul li a.sel                       {padding-left: 0.9em; color: var(--color0);}
  .header nav ul li a.sel:before                {opacity: 1; left: 0.1em;}
  .header .mail                                 {font-size: 1.2em;}
  .header #navicon                              {display: block; width: 1.5em; height: 18px; cursor: pointer; position: relative; top: -0.1em; z-index: 10;}
  .header #navicon span                         {display: block; width: 100%; height: 2px; background: var(--color0); border-radius: 2px; position: absolute; left: 0;}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  .header.show #navicon:hover                   {background: var(--color1b);}
  .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 nav                              {right: 0; opacity: 1;}
  .header.show.hide nav                         {opacity: 0;}
  }
  @media screen and (max-width: 680px)          {
  .header .mail                                 {font-size: 1.5em;}
  .header .mail span                            {display: none;}
  }

.main                                           {display: flex; width: 100%; flex-wrap: wrap; flex-grow: 3;}

h1, h2, h3                                      {display: block; width: 100%; color: var(--color0); font-weight: 700; line-height: 1.3; position: relative; box-sizing: border-box; font-family: var(--font2);}
h2                                              {font-size: min(2.4rem, calc(1.2rem + 3vw));}
h3                                              {font-size: min(1.5rem, calc(1rem + 2vw)); overflow: hidden;}
p, li                                           {width: 100%;}
p a, li a                                       {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
p a:hover, li a:hover                           {color: var(--color2); text-decoration-color: transparent;}

.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;}
.section.gradient1                              {background-image: var(--gradient1);}
.section.gradient1:after                        {display: block; position: absolute; inset: 0; opacity: 0.08; background: url("images/img.jpg") no-repeat center center; background-size: cover; content: "";}
.section#obsah-prohlídky .wrapper:before        {display: block; width: 100%; height: 1px; background: var(--color5); position: absolute; left: 0; top: calc(0px - var(--section-padding)); content: "";}       

.content                                        {display: flex; width: 100%; max-width: 50rem; justify-content: center; flex-wrap: wrap; gap: 1em;}
.content .hide                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em;}
.content .more                                  {display: block; text-align: center; font-size: 0.8em; color: var(--color1); font-weight: 500; text-transform: uppercase; text-decoration: underline; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.content .more:before,
.content .more:after                            {display: block; width: 7em; height: 1px; background: var(--color3); position: absolute; top: 48%; content: "";}
.content .more:before                           {right: 115%;}
.content .more:after                            {left: 115%;}
.content .more:hover                            {color: var(--color1b); text-decoration-color: transparent;}
.content .more span:nth-child(2)                {display: none;}
.content .more.show span:nth-child(1)           {display: none;}
.content .more.show span:nth-child(2)           {display: inline;}
.content .hidden                                {display: none; width: 100%;}

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

.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: min(1.1rem, calc(0.7rem + 1vw)); color: white; font-weight: 600; line-height: 1; position: relative; border: rgba(0,0,0,0.1); padding: 0.85em 1.35em 0.7em; border-radius: 0.15em; outline: solid 2px transparent; cursor: pointer; text-decoration: none !important; box-sizing: border-box; box-shadow: 0 0 0.25em rgba(0,0,0,0.2); font-family: var(--font2); transition: .15s ease-in-out;}
.button svg                                     {display: block; width: 0.95em; height: auto; fill: white; position: relative; top: -0.1em;}
.button:hover                                   {filter: brightness(0.95); transform: scale(0.99); box-shadow: 0 0 0 transparent;}
.button.color1                                  {background-image: var(--gradient1);}
.button.color4                                  {background-image: var(--gradient2);}

.hero                                           {background: url("images/sketch.jpg") no-repeat center center; background-size: auto 100%;}
.hero .wrapper > div                            {display: flex; flex-wrap: wrap; flex-wrap: wrap; gap: 1em;}
.hero h1                                        {font-size: min(3.5rem, calc(1.8rem + 3vw)); margin-bottom: -0.25em;}
.hero .swiper                                   {display: block; box-sizing: border-box;}
.hero .swiper .swiper-slide                     {display: block; height: 100%; flex-shrink: 0; transition: .15s ease-in-out;}

.hero .swiper .swiper-slide img                 {display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(5em); transition: .5s ease-in-out;
                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center;
                                                }
.hero .swiper .swiper-slide-active img          {opacity: 1; transform: translateX(0);}
  @media screen and (min-width: 1601px)         {
  .hero .swiper                                 {width: 45rem; left: 45vw;}
  .hero .swiper .swiper-slide img               {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 1000' style='enable-background:new 0 0 1800 1000;' xml:space='preserve'%3E%3Cpath d='M1799.6,690.1L1581.7,1000h-1217l217.9-309.9H1799.6z M1217,309.9L1434.9,0h-1217L0,309.9H1217z M1399.3,655L1617.3,345 h-1217L182.3,655H1399.3z'/%3E%3C/svg%3E%0A");
                                                 -webkit-mask-size: contain; 
                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 1000' style='enable-background:new 0 0 1800 1000;' xml:space='preserve'%3E%3Cpath d='M1799.6,690.1L1581.7,1000h-1217l217.9-309.9H1799.6z M1217,309.9L1434.9,0h-1217L0,309.9H1217z M1399.3,655L1617.3,345 h-1217L182.3,655H1399.3z'/%3E%3C/svg%3E%0A");
                                                 mask-size: contain;}
  }
  @media screen and (min-width: 640px) and (max-width: 1600px){
  .hero .swiper                                 {width: 52%; right: 0;}
  .hero .swiper .swiper-slide img               {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2000 1000' style='enable-background:new 0 0 2000 1000;' xml:space='preserve'%3E%3Cpath d='M0,309.9L217.9,0H2000v309.9H0z M2000,655V345H400.2L182.3,655H2000z M2000,1000V690.1H582.6L364.6,1000H2000z'/%3E%3C/svg%3E%0A");
                                                 -webkit-mask-size: auto 100%;
                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2000 1000' style='enable-background:new 0 0 2000 1000;' xml:space='preserve'%3E%3Cpath d='M0,309.9L217.9,0H2000v309.9H0z M2000,655V345H400.2L182.3,655H2000z M2000,1000V690.1H582.6L364.6,1000H2000z'/%3E%3C/svg%3E%0A");
                                                 mask-size: auto 100%;}
  }
  @media screen and (min-width: 641px)          {
  .hero .wrapper > div                          {width: 16em; margin-block: var(--header);}
  .hero .swiper                                 {height: calc(100% - var(--header)); padding-block: 2rem; position: absolute; top: var(--header);}
  }
  @media screen and (max-width: 640px)          {
  .hero                                         {display: flex; justify-content: center; flex-wrap: wrap;}
  .hero .wrapper > div                          {max-width: 26em; justify-content: center; margin-inline: auto;}
  .hero :is(h1, p)                              {text-align: center;}
  .hero h1 br                                   {display: none;}
  .hero .swiper                                 {width: 80%; max-width: 24em; order: -1; margin: 2rem auto 0;}
  .hero .swiper .swiper-slide img               {-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 1000' style='enable-background:new 0 0 1800 1000;' xml:space='preserve'%3E%3Cpath d='M1799.6,690.1L1581.7,1000h-1217l217.9-309.9H1799.6z M1217,309.9L1434.9,0h-1217L0,309.9H1217z M1399.3,655L1617.3,345 h-1217L182.3,655H1399.3z'/%3E%3C/svg%3E%0A");
                                                 -webkit-mask-size: contain; 
                                                 mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 1000' style='enable-background:new 0 0 1800 1000;' xml:space='preserve'%3E%3Cpath d='M1799.6,690.1L1581.7,1000h-1217l217.9-309.9H1799.6z M1217,309.9L1434.9,0h-1217L0,309.9H1217z M1399.3,655L1617.3,345 h-1217L182.3,655H1399.3z'/%3E%3C/svg%3E%0A");
                                                 mask-size: contain;}
  }

.cols                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0; position: relative;}
.cols > div, .cols :is(.fixing-area, .head)     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}
.cols .head, .cols > div:nth-child(2)           {align-items: flex-start; align-content: flex-start;}
  @media screen and (min-width: 961px)          {
  .cols > div                                   {padding-top: 1rem;}
  .cols > div:nth-child(1),
  .cols > div:nth-child(1) > div                {width: 16em;}
  .cols > div:nth-child(2)                      {width: calc(95% - 16em);}
  .cols .head                                   {width: 16em;}
  }
  @media screen  and (min-width: 961px) and (min-height: 480px){
  .cols > div .head.fixed                       {position: fixed; top: calc(1rem + var(--header-scroll));}
  .cols > div .head.fixed.fixed-end             {position: absolute; top: auto; bottom: 0;}
  }

h2:has(.sep)                                    {padding-bottom: calc(var(--gap1) - 0.35rem); margin-bottom: -0.35rem; position: relative;}
h2 .sep                                         {display: block; width: 2.2em; height: 0.06em; background-image: var(--gradient2); position: absolute; left: 0; bottom: 0;}
h2 .sep svg                                     {display: block; width: 0.6em; height: 0.6em; border: solid 0.06em var(--color4a); box-sizing: border-box; border-radius: 0.1em; position: absolute; left: -0.7em; top: calc(50% - 0.3em); fill: var(--color0);}
.perex                                          {font-size: 1.1em;}
  @media screen and (max-width: 960px)          {
  h2:has(.sep)                                  {padding: 0 0 0 1em;}
  h2 .sep                                       {position: static; margin-top: 0.4rem;}
  h2 .sep svg                                   {width: 0.75em; height: 0.75em; left: 0; top: 0.03em;}
  .perex                                        {font-weight: 400;}
  }
 
.gradient1 :is(h2, h3, p)                       {color: white;}
.gradient1 h2 .sep svg                          {fill: white;}

.dropdown-content                               {display: block; width: 100%; padding-bottom: var(--gap1); margin-block: 0.5rem; border-bottom: solid 1px var(--color5); position: relative;}
.dropdown-content .anchor                       {display: block; position: absolute; left: -9999px; top: -2rem;}
.dropdown-content .title                        {display: block; font-size: 1em; font-weight: 500; line-height: 1.3; padding-inline: var(--padding1) 2.8em; margin: 0; cursor: pointer; position: relative; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}                                             
.dropdown-content .title:before                 {display: block; width: calc(var(--padding1) - 0.4rem); height: 0.09em; background: var(--color0); position: absolute; left: 0; top: 0.62em; content: "";}
.dropdown-content .title:hover                  {color: var(--color4a);}
.dropdown-content .title:after                  {display: inline-block; width: 0.6em; height: 0.7em; opacity: 0.5; position: absolute; right: 1rem; top: 0.4em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 300'%3E%3Cpath d='M293.8,341.7L501.3,77.7C526.1,46.2,503.7,0,463.6,0H48.4C8.3,0-14.1,46.2,10.7,77.7l207.6,263.9 C237.5,366.1' width='1' height='1' fill='rgb(233,64,107)' stroke='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;}
.dropdown-content .collapse                     {display: none; width: 100%; padding-top: 0.8em; box-sizing: border-box;}
.dropdown-content .collapse > div               {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}
.dropdown-content.sel .title:after              {transform: rotate(-180deg);}

.dropdown-content + .dropdown-content           {margin-top: -0.5rem;}

.article-styles h3                              {margin-block: 0.5rem -0.4rem;}
.article-styles li                              {padding-left: var(--padding1); position: relative; box-sizing: border-box;}
.article-styles :is(ul, ol)                     {display: flex; flex-wrap: wrap; gap: 0.3em; padding: 0; margin: 0.3rem 0 0.2rem;}
.article-styles ul li:before                    {display: block; width: 0.34em; height: 0.34em; background: var(--color1); border-radius: 100%; position: absolute; left: 0; top: 0.6em !important; content: "";}
.article-styles li .dropdown-content            {margin-block: var(--gap1) !important;}

.article-styles ol                              { list-style-type: none; counter-reset: li;}
.article-styles ol li                           {counter-increment: li;}
.article-styles ol li:before                    {display: block; font-weight: 500; color: var(--color1); position: absolute; left: 0; top: 0;}

.list-1 li:before                               {content: counter(li) ")";}
.list-a li:before                               {content: counter(li, lower-alpha) ")";}
.list-1a > li:before                            {content: counter(li) ")";}
.list-1a > li > ol > li:before                  {content: counter(li, lower-alpha) ")";}
.list-a1 > li:before                            {content: counter(li, lower-alpha) ")";}
.list-a1 > li > ol > li:before                  {content: counter(li) ")";}
.list-aa > li:before                            {content: counter(li, lower-alpha) ")";}
.list-aa > li > ol > li:before                  {content: counter(li, lower-alpha) ".";}

.form                                           {display: flex; width: 100%; max-width: 54em; flex-wrap: wrap; padding: min(3rem, calc(0.8rem + 4vw)); border: solid 0.12em var(--color5b); box-sizing: border-box;}
.form-items                                     {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 0.8rem;}
.form-item                                      {display: flex; width: 100%; min-height: 2.6rem; flex-wrap: wrap; gap: 0 0.3rem; position: relative; box-sizing: border-box;}
.form-item > label                              {display: block; width: 100%; font-size: min(1.4rem, calc(0.8rem + 2vw)); color: var(--color0); font-weight: 600; box-sizing: border-box; font-family: var(--font2);}
.form-item :is(input, textarea, .custom-select) {display: block; width: 100%; min-height: 2.6rem; background: var(--color5b); font-size: 0.9em; color: var(--color0); font-weight: 500; border: none; outline: solid 2px transparent; padding: 0.8em; box-sizing: border-box; position: relative; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item textarea                             {height: 10em; padding: 0.8em;}
.form-item :is(input, textarea):focus           {outline-color: var(--color1);}
.form h3                                        {color: var(--color1); margin-bottom: 0.6rem;}
.form .sep                                      {display: block; width: 100%; height: 1px; background: var(--color5); margin-block: 1.4rem 1rem;}
.form .flex span                                {display: block; width: 100%; text-align: center; font-size: 0.75em; color: var(--color3);}
.form .flex span a                              {color: var(--color3); text-decoration: underline;}
.form .flex span a:hover                        {color: var(--color1); text-decoration: none;}
.form .bottom                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em; box-sizing: border-box; margin-top: 1rem;}
.form .bottom .consent                          {display: block; width: 100%; font-size: 0.8em; line-height: 1.3;}
.form .bottom .consent a                        {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.form .bottom .consent a:hover                  {color: var(--color1); text-decoration-color: transparent;}
  @media screen and (min-width: 961px)          {
  .form-item                                    {padding-left: var(--label);}
  .form-item > label                            {width: auto; position: absolute; left: 0; top: 0.32em; padding-right: 1em;}
  .form .bottom                                 {padding-left: var(--label);}
  }
  @media screen and (max-width: 960px)          {
  .form                                         {margin-top: 1rem;}
  }

.custom-select                                  {position: relative;}
.custom-select .sel                             {display: flex; width: 100%; align-items: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 2.4rem; box-sizing: border-box; cursor: pointer; position: relative; z-index: 2; transition: .2s ease-in-out;}
.custom-select .sel:hover                       {color: var(--color0);}
.custom-select > svg                            {display: block; width: 0.7em; fill: var(--color1); position: absolute; right: 1.2em; top: 1.2em; z-index: 1;}
.custom-select .dropdown                        {display: none; width: 100%; background: white; box-shadow: 0 0 0.3em rgba(0,0,0,0.25); overflow: hidden; box-sizing: border-box; margin-top: 0.3rem; position: absolute; left: 0; top: 2.8rem; z-index: 8;}
.custom-select .dropdown .inner                 {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; gap: 0.6rem; overflow-y: auto;}
.custom-select .inner ul                        {display: block; width: 100%; margin: 0;}
.custom-select .inner ul li                     {display: flex; width: 100%; min-height: 1.2em; align-items: center; color: var(--color1c); font-weight: 400; border-top: solid 1px rgba(0,0,0,0.1); padding: 0.7em 1.25rem 0.7em 1rem; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:before              {display: none;}
.custom-select .inner ul li:after               {display: block; width: 0.4em; height: 0.6em; opacity: 0.5; position: absolute; right: 1rem; top: calc(50% - 0.3em); 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;}
.custom-select .inner ul li:hover               {color: var(--color0); background: rgba(0,0,0,0.04);}
.custom-select .inner ul li:hover:after         {opacity: 0.9;}

.date-select                                    {display: block; position: relative;}
.date-select input[type="date"]                 {width: 10em !important; height: 2.6rem !important; line-height: 2.6rem !important;}
.date-select input[type="date"]::-webkit-inner-spin-button,
.date-select input[type="date"]::-webkit-calendar-picker-indicator
                                                {opacity: 0; cursor: pointer;}
.date-select > svg                              {display: block; width: 0.9em; fill: var(--color1); position: absolute; right: 0.8rem; top: 0.9rem; z-index: -1;}

.opts                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em 1em;}

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

.form-item input[type="file"]                   {position: absolute; left: -9999px;}

.attachments                                    {display: flex; width: 100%; flex-wrap: wrap; gap: 0 !important;}
.attachments li                                 {display: block; width: 100%; text-align: left; font-size: 0.8em; color: var(--color0); font-weight: 600; padding: 0.5em 2.2em 0.5em 0; box-sizing: border-box; position: relative;}
.attachments li:before                          {display: none !important;}
.attachments li:not(:last-child)                {border-bottom: solid 1px var(--color5);}
.attachments li .remove                         {display: flex; width: 1.1em; height: 1.1em; justify-content: center; align-items: center; background: var(--color4a); border-radius: 100%; position: absolute; right: 0.75em; top: 0.8em; 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='transparent' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
.attachments li .remove:hover                   {background: var(--color3);}

.gradient1 .form                                {border-color: var(--color5);}
.gradient1 .form-item label                     {color: white;}
.gradient1 .form-item :is(input, textarea)      {color: white;}
.gradient1 .form-item :is(input, textarea):focus{outline-color: var(--color4b);}
.gradient1 .custom-select .sel                  {color: white;}
.gradient1 .custom-select > svg                 {fill: white;}
.gradient1 .date-select > svg                   {fill: white;}
.gradient1 .radio1 .opt label:before            {border-color: transparent; background: var(--color5);}
.gradient1 .radio1 .opt input[type=radio]:checked ~ label:before
                                                {border-color: white;}

.recommendation                                 {display: block; width: 100%;}
.recommendation > div                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem; background: var(--color5b); padding: 2rem; box-sizing: border-box;}
.recommendation h3 span                         {position: relative;}
.recommendation h3 span:after                   {display: block; width: 2000px; height: 0.1em; background: var(--color4a); position: absolute; left: 110%; top: 0.38em; content: "";}
.recommendation p                               {font-size: 0.9em;} 
.recommendation .note                           {display: block; width: 100%; font-size: 0.75em; color:rgb(200, 211, 255);} 

.cta1                                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em; padding-inline: 2rem; box-sizing: border-box;}
.cta1 h3                                        {width: auto;}

.swiper-button-prev,
.swiper-button-next                             {display: flex; width: var(--swiper-button-size); height: var(--swiper-button-size); justify-content: center; align-items: center; font-size: 1em; background: var(--color4a); box-sizing: border-box; position: absolute; top: calc(50% - 0.5 * var(--swiper-button-size)); z-index: 100; margin: 0; isolation: isolate; cursor: pointer; box-shadow: 0 0 0.6em rgba(0,0,0,0.3); transition: .2s ease-in-out;}                                
.swiper-button-prev                             {transform: rotate(180deg);}
.swiper-button-prev svg,
.swiper-button-next svg                         {display: block; width: 40%; height: 40%; fill: white;}
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-disabled                         {opacity: 0 !important;}
.swiper-button-prev:hover,
.swiper-button-next:hover                       {background: var(--color3); box-shadow: 0 0 0 transparent;}
  @media screen and (min-width: 541px)          {
  .swiper-button-prev                           {left: calc(0px - 0.5 * var(--swiper-button-size));}
  .swiper-button-next                           {right: calc(0px - 0.5 * var(--swiper-button-size));}
  }
  @media screen and (max-width: 540px)          {
  .swiper-button-prev,
  .swiper-button-next                           {width: calc(0.85 * var(--swiper-button-size)); height: var(--swiper-button-size); box-shadow: none;}                                
  .swiper-button-prev                           {left: calc(0px - var(--wrapper-padding));}
  .swiper-button-next                           {right: calc(0px - var(--wrapper-padding));}
  .swiper-button-prev svg,
  .swiper-button-next svg                       {width: 55%; height: 55%; margin-left: 0.2em;}
  }

.swiper                                         {display: block; width: 100%; overflow: hidden;}
.swiper-slide                                   {display: block; width: auto; height: auto; overflow: hidden; position: relative; -webkit-flex-shrink: 0; transition: .55s ease-in-out;}
.swiper-slide .img                              {display: block; width: 100%;  aspect-ratio: calc(3 / 2);}
.swiper-slide .img img                          {display: block; width: 100%; height: 100%; object-fit: cover;}

.gallery                                        {display: block; width: 100%; position: relative; box-sizing: border-box;}
.gallery figcaption                             {display: block; width: 100%; text-align: center; padding: 2em 1.2rem 1em; font-size: 0.65rem; font-weight: 500; color: white; line-height: 1.3; background-image: linear-gradient(to top, rgba(0,0,0,0.6), transparent); box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 2;}
  @media screen and (min-width: 541px)          {
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next                  {--swiper-button-size: 1.5rem;}
  }

.portfolio                                      {display: block; width: 100%; position: relative; box-sizing: border-box; margin-top: 1.8rem;}
.portfolio .swiper-slide                        {opacity: 0;}
.portfolio .swiper-slide-active,
.portfolio .swiper-slide-next                   {opacity: 1;}
.portfolio .swiper-slide .info                  {display: flex; width: calc(100% - 4em); max-height: calc(100% - 4em); align-items: flex-end; flex-wrap: wrap; background: var(--color3); opacity: 0.9; padding: 1em 1em 0.85em; box-sizing: border-box; position: absolute; left: 2em; bottom: 2em; z-index: 5;}
.portfolio .swiper-slide h3                     {display: flex; width: 100%; color: white; font-size: min(1.45rem, calc(0.9rem + 2vw));}
.portfolio .swiper-slide .collapse              {display: none; width: 100%;}
.portfolio .swiper-slide .collapse p            {font-size: 0.85rem; color: white;}
  @media screen and (max-width: 1080px)         {
  .portfolio .swiper-slide                      {font-size: 0.9em;}
  .portfolio .swiper-slide .info                {width: calc(100% - 2.4em); max-height: calc(100% - 2.4em); left: 1.2em; bottom: 1.2em;}
  .portfolio .swiper-slide h3                   {font-size: min(1.3rem, calc(0.9rem + 2vw));}
  } 

.contact                                        {align-items: flex-start; align-content: flex-start; position: relative;}

.contacts1                                      {display: block; width: 100%;}
.contacts1 a                                    {display: flex; align-items: center; gap: 0.5em; font-size: 1.1em;; color: var(--color0); font-family: var(--font2); transition: .15s ease-in-out;}
.contacts1 a svg                                {display: block; width: 1em; height: 1em; fill: var(--color1); position: relative; top: -0.1em;}
.contacts1 a:hover                              {color: var(--color1);}

.contacts2                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7em;}
.contacts2 h3                                   {color: var(--color1);}
.contacts2 p                                    {font-size: 0.9em;}
.contacts2 .logo                                {display: block; width: 6em;}
.contacts2 .logo img                            {display: block; width: 100%;}
  @media screen and (min-width: 541px) and (max-width: 960px){
  .contacts2                                    {position: absolute; left: 17rem; top: -0.4em;}
  .contact-form                                 {margin-top: 4rem;}
  }

.footer-links                                   {display: block;}
.footer-links ul                                {gap: 0.2em 0.5em; margin: 0;}
.footer-links ul li                             {width: auto; font-size: 0.8em; padding: 0;}
.footer-links ul li:before                      {display: none;}
.footer-links ul li a                           {color: var(--color0);}
.footer-links ul li a:hover                     {color: var(--color3);}
.footer-links .copyright                        {display: block; font-size: 0.8em;}
.footer-links .copyright a                      {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.footer-links .copyright a:hover                {text-decoration-color: transparent; color: var(--color3);}
  @media screen and (min-width: 961px)          {
  .footer-links                                 {display: block !important; width: 15em !important; position: absolute; left: 0; bottom: 0;}
  .footer-links ul                              {display: block;}
  .footer-links .copyright                      {margin-top: 0.8em;}
  }
  @media screen and (max-width: 960px)          {
  .footer-links                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em;}
  }
  
  
.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: 90000;}
.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 > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.wndw > div                                     {width: 100%; max-width: 40em; max-height: calc(100vh - 4rem); background: white; position: relative; border-radius: var(--border-radius); overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;}
.wndw > div:before                              {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;}
.wndw > div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}
.wndw.show                                      {left: 0;}
.wndw.show:before                               {opacity: 1;}
.wndw.show > div                                {top: 0;}
.wndw.show.hide                                 {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;}
.wndw.show.hide:before                          {opacity: 0;}
.wndw.show.hide > div                           {top: -5em; opacity: 0;}
.wndw .cross                                    {display: block; width: 1.2em; height: 1.2em; font-size: 1em; cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 10002;}
.wndw .cross span                               {display: block; width: 100%; height: 3px; 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: 2.6rem max(1rem, 10%) max(1rem, 7%); box-sizing: border-box;}
.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.5em; font-weight: 700; margin-bottom: 0.2rem;}
.wndw .wndw-content .title span                 {display: block; font-weight: 400;}
.wndw .wndw-content .flex                       {gap: 0.3em;}
.wndw .wndw-content .button                     {font-size: 0.9em;}
.wndw.narrow > div                              {max-width: 25em;}
.wndw .form.one-col .form-item,
.wndw.narrow .form-item                         {width: 100%;}
.wndw .form.one-col                             {max-width: 25em;}