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

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

.news-detail { max-width:900px; margin:10px auto; border:1px solid black; min-height:100px; padding:10px; }


/*------------------------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; }
/*------------------------------------------------------*/
html                                            {display: block; width: 100%; height: 100%; font-size: min(18px, calc(12px + 1vw)); font-weight: 400; color: var(--color0); letter-spacing: 0.08em; line-height: 1.6; background: white; overflow-x: hidden; font-family: var(--font1);}

.slider-gallery .swiper-wrapper { max-height:14rem; }

body                                            {display: block !important; width: 100%; position: relative; overflow-x: hidden; overflow-y: auto; background: white; }
body.fixed                                      {height: 100%; overflow: hidden;}
body.fixed :is( .main, .footer)                 {filter: blur(2px); opacity: 0.5;}

form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}
.wrapper                                        {display: flex; width: min(78rem, calc(100% - 2 * var(--wrapper-side))); flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;}
.wrapper.narrow                                 {max-width: 50rem;} 
.wrapper.medium                                 {max-width: 60rem;} 
.wrapper.padding                                {padding: 0 var(--padding1);}
  @media screen and (min-width: 1701px)         {
  .wrapper.wide                                 {width: 86rem;} 
  } 
  @media screen and (max-width: 1700px)         {
  .wrapper.wide                                 {width: 100%;} 
  .wrapper.wide > *                             {width: calc(100% + 2 * var(--dashed-inset) + 16px); margin-inline: calc(-8px - var(--dashed-inset));}
  } 

:root                                           {
                                                --font1:          'ff-tisa-sans-web-pro', sans-serif; /* 400,500,700 */
                                                --wrapper-side:   3vw;
                                                --header:         4.5em;
                                                
                                                --border-radius:  16px;
                                                --button-height:  2.4em;
                                                --padding1:       min(4vw, 1.4rem);
                                                --dashed:         url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
                                                --dashed-rounded: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='black' stroke-width='4' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
                                                                  /* https://kovart.github.io/dashed-border-generator/ */
                                                --dashed-inset:   0.8rem;
                                                --hero-padding:   min(calc(1rem + 5vw), 3rem);
                                                --gap1:           min(calc(1rem + 8vw), 6rem);
                                                --gap2:           min(calc(0.7rem + 5vw), 1.9rem);
                                                --gap3:           0.6em;
 
                                                --color0:         hsl(0,0%,16%);
                                                --color0b:        hsl(0,0%,50%);
                                                --color0c:        hsl(0,0%,65%);
                                                --color0d:        hsl(0,0%,96%);
                                                --color0e:        hsl(0,0%,90%);
                                                --color-error:      #df0e3b;

                                                --color-festivaly-vina:       #c14f6f;
                                                --color-festivaly-vina2:      #a71d4e;
                                                --color-craft-beer-festivaly: #bfaf67;
                                                --color-craft-beer-festivaly2:#b29c3c;
                                                --color-food-festivaly:       #e08035;
                                                --color-food-festivaly2:      #ff8427;
                                                --color-trhy-jarmarky:        #5c87e3;
                                                --color-trhy-jarmarky2:       #4270d3;
                                                --color-ostatni:        hsl(0,0%,16%);
                                                --color-ostatni2:        hsl(0,0%,16%);
                                                --color-farmarske-trhy:       #987ab4;
                                                --color-farmarske-trhy2:      #be82ff;
                                                --color-jarmarky:             #8fb47a;
                                                --color-jarmarky2:            #7bde41;
                                                --color-vseobecne-trhy:       #5ebdce;
                                                --color-vseobecne-trhy2:      #32e0ff;

                                                --form-gap:                   1em;
                                                --form-items-gap:             0.5em;
                                                --form-item-height:           2.8em;
                                                --form-item-border:           solid 0.1em var(--color0c);
                                                --form-item-padding:          1em;
}
  @media screen and (max-width: 1080px)         {
  :root                                         {
                                                --header:         4rem;
                                                }

  }

.landing:before, .landing:after                 {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; background: url("images/pattern-corner.svg") no-repeat left top; background-size: 36% auto; content: "";}
.landing:before                                 {transform: rotate(180deg);}
.landing *                                      {text-align: center;}
.landing .main                                  {align-items: center; position: relative; z-index: 2;}
.landing .wrapper                               {max-width: 60rem; justify-content: center; gap: 3em;}
  @media screen and (min-width: 1800px)         {
  html:has(.landing)                            {font-size: calc(18px + 0.5vw);}
  }
  @media screen and (max-width: 1080px)         {
  .landing:before, .landing:after               {background-position: left calc(0.3 * (-12rem - 30%)) top; background-size: calc(12rem + 30%) auto;}
  .landing .main                                {padding-block: 3rem;}
  }

.landing-hero                                   {display: block; width: 100%;}
.landing-hero h1                                {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.landing-hero img                               {display: block; width: 20em; max-width: 70%; margin: 0 auto;}
.landing-hero p                                 {max-width: 36em; margin: 1em auto 0;}

.landing-pages                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 3em 0;}
.landing-pages > div                            {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em; font-size: 0.9em;}
.landing-pages > div img                        {display: block; width: 18em; height: auto; margin-block: -0.8em;}
.landing-pages > div .button                    {margin-top: 0.6em;}
.landing-pages .vertical                        {display: none;}
.landing-pages .horizontal                      {width: 24em; max-width: 70%;}
  @media screen and (min-width: 769px)          {
  .landing-pages                                {justify-content: space-between;}
  .landing-pages > div                          {width: 44%;}
  .landing-pages .horizontal                    {display: none;}
  .landing-pages .vertical                      {display: block;}
  }

.landing .logos                                 {justify-content: center; font-size: 1.3em;}
.landing-info                                   {max-width: 45em;}
.landing-sep                                    {max-width: 22em;}
.landing-info2                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em 0.8em;}
.landing-info2 span                             {display: block;}
.landing-info2 span a                           {color: inherit; transition: .15s ease-in-out;}
.landing-info2 span a:hover                     {color: var(--color0c);}
.landing .copyright                             {display: block; width: 100%; font-size: 0.6em;}
.landing .copyright a                           {color: inherit; font-weight: 500; transition: .15s ease-in-out;}
.landing .copyright a:hover                     {color: var(--color0c);}

.header                                         {display: block; width: 100%; height: var(--header); position: relative; z-index: 1000;}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center; border-radius: 0 0 var(--border-radius) var(--border-radius);}
.header .logo                                   {display: block; width: 8em; transition: .15s ease-in-out;}
.header .logo img                               {display: block; width: 100%;}
.header nav                                     {display: flex; justify-content: space-between; box-sizing: border-box;}
.header nav .web-change                         {display: flex; flex-wrap: wrap; overflow: hidden; position: relative; box-sizing: border-box;}
.header nav .web-change a                       {display: flex; align-items: center; line-height: 1; letter-spacing: 0; order: 1; overflow: hidden; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav ul                                  {display: flex; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
.header nav ul li                               {display: block; height: 100%;}
.header nav ul li a                             {display: flex; align-items: center; color: white; font-weight: 400; line-height: 1; letter-spacing: 0; opacity: 0.7; position: relative; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav ul li a:hover                       {opacity: 1;}
.header .account-button                         {position: relative; isolation: isolate; cursor: default;}
.header .account-button:hover                   {transform: scale(1);}
.header .account-name                           {display: block; text-transform: none;}
.header .account-dropdown                       {display: block; width: 22em; background: white; border-radius: calc(0.5 * var(--button-height)); padding: calc(1em + var(--button-height)) 1.5em 1.5em; box-sizing: border-box; opacity: 0; position: absolute; right: -9999px; top: 0; z-index: -1; box-shadow: 0 0 0.5em rgba(0,0,0,0.5); transition: opacity .1s ease-in-out;}
.header .account-dropdown .form-items           {justify-content: space-between; align-items: center;}
.header .account-dropdown .button-reg           {display: block; text-align: center; font-size: 0.9em; color: var(--color0c); font-weight: 700; letter-spacing: 0; margin-right: 0.2em;}
.header .account-dropdown .button-reg a         {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.header .account-dropdown .button-reg a:hover   {color: var(--color0b); text-decoration-color: transparent;}
.header .logged                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.5em 0 !important;}
.header .logged span                            {display: flex;  align-items: center; gap: 0.4em; text-transform: none; letter-spacing: 0;}
.header .logged .title                          {width: 100%; font-size: 1.35em; font-weight: 700;}
.header .logged .e-mail                         {width: 100%; font-size: 0.9em; opacity: 0.6; margin-bottom: 0.5em;}
.header .logged .link                           {width: 48.5%;}
.header .logged .link a                         {display: flex; width: 100%; height: 2.4em; align-items: center; gap: 0.3em; font-size: 0.9em; line-height: 1; color: var(--color0); background: var(--color0e); padding: 0 1em; box-sizing: border-box; border-radius: 1.2em; transition: .15s ease-in-out;}
.header .logged .link a svg                     {display: block; width: 1em; height: 1em; fill: var(--color0);}
.header .logged .link a:hover                   {opacity: 0.7;}
.header .logged .logout                         {width: 100%; justify-content: flex-end; margin-top: 0.5em;}
.header .logged .logout a                       {display: block; font-size: 0.9em; color: var(--color0c); color: inherit; text-decoration: underline; font-weight: 700; margin-right: 0.2em; transition: .15s ease-in-out;} 
.header .logged .logout a:hover                 {color: var(--color0b); text-decoration-color: transparent;}
.header .account-button:hover .account-dropdown {right: 0; opacity: 1;}
  @media screen and (min-width: 1125px)         {
  .header nav                                   {height: 100%; flex-grow: 2;}
  .header nav .web-change                       {width: 9.5em; height: 2.5rem; margin-left: 1em; margin-top: 0.98em; border-radius: 0.5em; transition: .4s ease-in-out;}
  .header nav .web-change .arrow                {display: flex; width: 0.7em; height: 0.7em; justify-content: center; align-items: center; background: white; border-radius: 100%; position: absolute; left: 0.9em; top: 0.95em; transition: .15s ease-in-out;}
  .header nav .web-change .arrow svg            {display: block; width: 60%; height: 60%; fill: var(--color0); transition: .15s ease-in-out;}
  .header nav .web-change .dashed               {display: block; width: 0.08em; height: 2.5em; position: absolute; left: 0; top: 0.3em; opacity: 0.5; filter: invert(); transition: .15s ease-in-out;}
  .header nav .web-change a                     {width: 100%; height: 2.5rem; font-size: 1.25em; padding-left: 1.55em; color: hsl(0,0%,75%);}
  .header nav .web-change a.sel                 {order: 0; color: white; opacity: 1;}
  .header nav .web-change a:not(:first-of-type) {border-top: solid 1px rgba(0,0,0,0.3);}
  .header nav .web-change:hover                 {height: 5rem; box-shadow: 0 0 0.5em rgba(0,0,0,0.5);}
  .header nav .web-change:hover .dashed         {opacity: 0;}
  .header nav .web-change:hover .arrow          {background: var(--color0);}
  .header nav .web-change:hover .arrow svg      {fill: white;;}
  .header nav .web-change:hover a               {background: white;}
  .header nav .web-change:hover a.sel           {color: var(--color0);}
  .header nav .web-change:hover a:hover         {color: var(--color0);}
  .header nav ul                                {height: 100%; justify-content: center;}
  .header nav ul li                             {height: 100%;}                             
  .header nav ul li a                           {height: 100%; font-size: 1.1em; padding-inline: min(1.2vw, 1.2em);}
  .header nav ul li a:hover                     {opacity: 1;}
  .header nav ul li a[aria-current="page"]      {opacity: 1; background: rgba(0,0,0,0.4); font-weight: 700;}
  .header nav ul li a[aria-current="page"]:after{display: block; width: 0.8em; height: 0.8em; background: white; border-radius: 0.15em; transform: rotate(-45deg) skew(10deg, 10deg); position: absolute; left: calc(50% - 0.4em); bottom: -0.5em; content: "";}
  .header #navicon                              {display: none;}
  .header .wrapper > .button                    {margin-left: 1rem;}
  }
  @media screen and (min-width: 1125px) and (max-width: 1400px){
  .header                                       {--header: 3.8rem;}
  .header .wrapper                              {padding-inline: 1em;}
  .header .logo                                 {width: 7em;}
  .header nav ul li a                           {font-size: 0.95em; padding-inline: min(1vw, 1em);}
  .header nav .web-change                       {margin-top: 0.65em;}
  .header nav .web-change .dashed               {height: 2.2em; top: 0.4em;}
  .header .button                               {font-size: 0.7em;}
  }
  @media screen and (max-width: 1124px)         {
  .header .wrapper > .button                    {position: absolute; top: calc(50% - 0.5 * var(--button-height)); right: min(3.5rem, calc(3vw + 2.4rem));}
  .header #navicon                              {display: block; width: 1.2em; height: 15px; cursor: pointer; position: relative; z-index: 1;}
  .header #navicon span                         {display: block; width: 100%; height: 2px; background: white; position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header #navicon:hover span                   {opacity: 0.7;}
  .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 nav                                   {display: block; width: 16rem; height: calc(100% - 4rem - 2 * var(--wrapper-side)); background: hsl(0,0%,90%); overflow-y: auto; overflow-x: hidden; border-radius: var(--border-radius); position: fixed; right: -16rem; bottom: var(--wrapper-side); z-index: 5; opacity: 0; transition: .4s ease-in-out;}
  .header nav .web-change                       {width: calc(100% - 3.2em); height: 2.4em; margin: 1.6em 1.6em 0; border-radius: 1.2em;}
  .header nav .web-change a                     {width: 50%; justify-content: center; text-align: center; font-size: 0.9em; background: white; color: var(--color0b);}
  .header nav .web-change a.sel                 {background: var(--color0); color: white; font-weight: 700;}
  .header nav .web-change :is(.arrow, .dashed)  {display: none;}                
  .header nav ul                                {width: 100%; padding: 1.2em 0; gap: 0.55em;}
  .header nav ul li                             {width: 100%;}
  .header nav ul li a                           {display: flex; width: 100%; align-items: center; font-size: 1.2em; color: var(--color0); padding: 0.4em 1.6em; border-left: solid 0.18em transparent; position: relative; isolation: isolate;}
  .header nav ul li a[aria-current="page"]      {opacity: 1; font-weight: 700; border-color: var(--color0);}
  .header.show nav                              {right: var(--wrapper-side); opacity: 1;}
  .header.show #navicon span:nth-child(1),
  .header.show #navicon span:nth-child(4)       {opacity: 0;}
  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg);}
  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg);}
  }
  @media screen and (max-width: 640px)          {
  .header                                       {font-size: 0.9rem;}
  .header .logo                                 {width: 8em;}
  .header .button span                          {display: none;}
  }

.footer                                         {display: block; width: 100%;}
.footer .wrapper                                {justify-content: space-between; z-index: 2; padding: 3em 3em 2em; border-radius: var(--border-radius) var(--border-radius) 0 0; overflow: hidden;}
.footer .wrapper .inner                         {display: block; width: 100%;}
.footer .wrapper .inner > div                   {display: flex; width: 100%;}
.footer .left                                   {display: flex; gap: 2rem;}
.footer .left > div                             {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
.footer .left > div h2                          {font-size: 1.3em; color: white;}
.footer .left > div > div                       {display: flex; flex-wrap: wrap; gap: 0.5em 1.4em;}
.footer .left > div > div span                  {display: block; font-size: 0.9em; color: white;}
.footer .left > div > div span a                {display: flex; align-items: center; gap: 0.4em; color: white; transition: .15s ease-in-out;}
.footer .left > div > div span a svg            {display: block; width: 1em; height: 1em; fill: white;}
.footer .left > div > div span a:hover          {opacity: 0.8;}
.footer .left > div > div span .note            {display: block; font-size: 0.7em; margin-left: 1.8em;}
.footer .left > div:nth-child(1) > div span:nth-child(3)
                                                {font-size: 0.6em;}
.footer .right                                  {display: flex; flex-wrap: wrap; gap: 1.8em;}
.footer .right .logo                            {display: block; width: 9em;}
.footer .right .logo img                        {display: block; width: 100%;}
.footer .right .soc                             {display: flex; align-items: center; gap: 0.4em; order: 1;}
.footer .right .soc li                          {display: block;}
.footer .right .soc li a                        {display: flex; width: 1.5em;} 
.footer .right .soc li a svg                    {display: block; width: 100%; fill: white; transition: .15s ease-in-out;}
.footer .right .soc li a:hover svg              {opacity: 0.7;}
.footer .bottom                                 {gap: 1.5em; margin-top: 1.5rem;}
.footer .bottom-links                           {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.15em 0.8em;}
.footer .bottom-links li                        {display: flex; gap: 0.3em; font-size: 0.7em; font-weight: 300;}
.footer .bottom-links li a                      {display: block; color: white; text-decoration: underline; transition: .15s ease-in-out;}
.footer .bottom-links li a:hover                {opacity: 0.7; text-decoration-color: transparent;}
.footer .bottom .copyright                      {display: block; font-size: 0.7em; font-weight: 400; color: white;}
.footer .bottom .copyright a                    {color: white; text-decoration: underline; transition: .15s ease-in-out;}
.footer .bottom .copyright a:hover              {opacity: 0.7; text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .footer .wrapper .inner > div                 {justify-content: space-between;}
  .footer .left > div:nth-child(1)              {width: 20em;}
  .footer .left > div:nth-child(2) > div        {flex-direction: column;}
  .footer .right                                {flex-direction: column; justify-content: space-between; align-items: flex-end;}
  }
  @media screen and (max-width: 1080px)         {
  .footer :is(.upper, .right, .bottom)          {justify-content: center; flex-wrap: wrap;}
  .footer .left                                 {flex-wrap: wrap;}
  .footer .left > div                           {width: 100%; justify-content: center;}
  .footer .left > div h2                        {width: 100%; text-align: center;}
  .footer .left > div > div                     {width: 100%; justify-content: center;}
  .footer .left > div:nth-child(1) > div span:nth-child(3)
                                                {text-align: center;} 
  .footer .right                                {width: 100%; margin-top: 3rem;}
  .footer .bottom-links                         {width: 100%; justify-content: center;}
  }
  @media screen and (max-width: 441px)          {
  .footer                                       {font-size: 0.95em;}
  }

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

h1, h2, h3                                      {display: block; width: 100%; font-weight: 700; color: var(--color0); letter-spacing: 0; line-height: 1.2; box-sizing: border-box; font-family: var(--font1);}
h1                                              {font-size: min(calc(1.4em + 4vw), 3em);}
h2                                              {font-size: min(calc(1.2em + 4vw), 2.5em);}
h3                                              {font-size: min(calc(1em + 4vw), 1.45em);}
h1 span, h2 span, h3 span                       {font-weight: 400;}

.main p, .main li                               {display: block; width: 100%; box-sizing: border-box;}
.main p a, .main li:not([class]) a                           {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.main p a:hover, .main li:not([class]) a:hover  {color: var(--color0b) !important; text-decoration-color: transparent;}
.main strong                                    {font-weight: 700;}
.main em                                        {font-style: italic;}

.pattern                                        {background-color: var(--color0); background-repeat: repeat; background-position: center center; background-size: 15rem;}
.pattern.black                                  {background-image: url("images/pattern1-seamless.svg");}

.dashed                                         {display: block; position: relative; overflow: hidden; opacity: 0.4;}
.dashed:before                                  {display: block; background-image: var(--dashed); position: absolute; left: 0; top: 0; content: "";}
.dashed.rounded                                 {border-radius: 12px;}
.dashed.rounded:before                          {background-image: var(--dashed-rounded);}
.dashed.line:before                             {width: calc(100% + 2px); height: calc(100% + 2px);}
.dashed.line.vertical                           {width: 2px; height: 100%;}
.dashed.line.horizontal                         {width: 100%; height: 2px;}
.dashed.border:before                           {width: 100%; height: 100%;}

.section                                        {display: flex; width: 100%; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; gap: var(--gap2); overflow: hidden; box-sizing: border-box; padding: var(--gap1) 0; position: relative;}
.section.padding-top-0                          {padding-top: 0 !important;}
.section.padding-bottom-0                       {padding-bottom: 0 !important;}
.section.gradient-top                           {background-image: linear-gradient(to bottom, var(--color0d), transparent);}
.section.gradient-bottom                        {background-image: linear-gradient(to top, var(--color0d), transparent);}

.flex                                           {display: flex !important; width: 100%; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-top: var(--gap2);}
.flex.space-between                             {justify-content: space-between;}
.flex.centered                                  {justify-content: center;}

.button                                         {display: flex; height: var(--button-height); justify-content: center; align-items: center; gap: 0.5em; outline: none; cursor: pointer; font-size: 0.8em; font-weight: 500; letter-spacing: 0.1em;; line-height: 1; color: white; text-transform: uppercase; background: var(--color0); padding: 0.06em 1.4em 0;  position: relative; outline: none; border: none; border-radius: calc(var(--button-height) / 2); box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}
.button svg                                     {display: block; width: 1em; height: 1em; fill: white;}
.button:hover                                   {background: black; transform: scale(0.98);}
.button.white                                   {background: white; color: var(--color0);}
.button.white > svg                             {fill: var(--color0);}
.button.white:hover                             {background: hsl(0,0%,90%);}
.button.color0d                                 {background: var(--color0d); color: var(--color0);}

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

.breadcrumbs                                    {display: block; width: 100%; margin-block: -1em 0.4em;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; gap: 1.4em; margin: 0; padding: 0 !important;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.8em; letter-spacing: 0; position: relative; padding: 0; margin: 0;}
.breadcrumbs ul li:before                       {display: none;}
.breadcrumbs ul li:not(:last-child):after       {display: inline-block; width: 0.7em; height: 0.7em; opacity: 0.8; position: absolute; right: -1.25em; top: 0.45em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256,192V64h64l192,192L320,448h-64V320H0l0-128H256z' 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;}
.breadcrumbs ul li:last-child:after             {display: none;}
.breadcrumbs ul li a                            {display: block; color: inherit; text-decoration: underline; font-weight: 400; border: none; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; font-weight: 700;}
.breadcrumbs ul li a:hover                      {opacity: 0.7; text-decoration-color: transparent;}
  @media screen and (max-width: 768px)          {  
  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}
  .breadcrumbs::-webkit-scrollbar               {display: none;}
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs ul li a                          {white-space: nowrap;}
  } 

.submenu                                        {display: block; width: 100%; font-size: 0.8em; margin-top: 1em;}
.submenu ul                                     {display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0; padding: 0 !important;}
.submenu ul li                                  {display: block; width: auto; color: var(--color0c); order: 2;}
.submenu ul li a                                {display: flex; height: var(--form-item-height); align-items: center; color: var(--color0c); text-decoration: none !important; font-weight: 500; border: var(--form-item-border); padding: var(--form-item-padding); border-radius: calc(0.5 * var(--form-item-height)); box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.submenu ul li.all                              {/*order: 0;*/}
.submenu ul li.all a:hover                      {color: var(--color0); border-color: var(--color0);}
.submenu ul li.all a.sel                        {opacity: 1; background: var(--color0); color: white !important; border-color: var(--color0);}
.submenu ul li:not(.all) a.sel                  {color: white;}
.submenu ul li.festivaly-vina a:hover           {color: var(--color-festivaly-vina); border-color: var(--color-festivaly-vina);}
.submenu ul li.festivaly-vina a.sel             {background: var(--color-festivaly-vina); border-color: var(--color-festivaly-vina);}
.submenu ul li.craft-beer-festivaly a:hover     {color: var(--color-craft-beer-festivaly); border-color: var(--color-craft-beer-festivaly);}
.submenu ul li.craft-beer-festivaly a.sel       {background: var(--color-craft-beer-festivaly); border-color: var(--color-craft-beer-festivaly);}
.submenu ul li.food-festivaly a:hover           {color: var(--color-food-festivaly); border-color: var(--color-food-festivaly);}
.submenu ul li.food-festivaly a.sel             {background: var(--color-food-festivaly); border-color: var(--color-food-festivaly);}
.submenu ul li.trhy-jarmarky a:hover            {color: var(--color-trhy-jarmarky); border-color: var(--color-trhy-jarmarky);}
.submenu ul li.trhy-jarmarky a.sel              {background: var(--color-trhy-jarmarky); border-color: var(--color-trhy-jarmarky);}
.submenu ul li.ostatni a:hover                  {color: var(--color-ostatni); border-color: var(--color-ostatni);}
.submenu ul li.ostatni a.sel                    {background: var(--color-ostatni); border-color: var(--color-ostatni);}

.submenu ul li.ostatni a:hover            {color: var(--color-ostatni); border-color: var(--color-ostatni);}
.submenu ul li.ostatni a.sel              {background: var(--color-ostatni); border-color: var(--color-ostatni);}

.submenu ul li.farmarske-trhy a:hover           {color: var(--color-farmarske-trhy); border-color: var(--color-farmarske-trhy);}
.submenu ul li.farmarske-trhy a.sel             {background: var(--color-farmarske-trhy); border-color: var(--color-farmarske-trhy);}
.submenu ul li.jarmarky a:hover                 {color: var(--color-jarmarky); border-color: var(--color-jarmarky);}
.submenu ul li.jarmarky a.sel                   {background: var(--color-jarmarky); border-color: var(--color-jarmarky);}
.submenu ul li.vseobecne-trhy a:hover           {color: var(--color-vseobecne-trhy); border-color: var(--color-vseobecne-trhy);}
.submenu ul li.vseobecne-trhy a.sel             {background: var(--color-vseobecne-trhy); border-color: var(--color-vseobecne-trhy);}

.submenu ul li a.sel:hover             {color: #fff !important;}

/*.submenu ul li:not(.all):has(.sel)              {order: 1;}*/
  @media screen and (max-width: 1080px)         {  
  .submenu                                      {font-size: 0.75em;}
  }
  @media screen and (max-width: 768px)          {  
  .submenu                                      {overflow-x: auto; scrollbar-width: none;}
  .submenu::-webkit-scrollbar                   {display: none;}
  .submenu ul                                   {flex-wrap: nowrap;}
  .submenu ul li a                              {white-space: nowrap;}
  } 

.filters                                        {display: block; width: 100%; font-size: 0.8em; margin-top: 1em;}
.filters > div,
.filters > div > div                            {display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0; padding: 0 !important;}
.filters .form-item                             {width: auto;}
  @media screen and (max-width: 768px)          {  
  .filters.overflow                             {overflow-x: auto; scrollbar-width: none;}
  .filters.overflow::-webkit-scrollbar          {display: none;}
  .filters.overflow *                           {flex-wrap: nowrap; white-space: nowrap;}
  } 

.options                                        {display: flex; width: 100%; flex-wrap: wrap;}
.options.o1                                     {justify-content: space-between;}
.options.o1 .filters                            {font-size: 0.8em;}
.options.o1 .filters .year                      {width: 6.3em;}
.options.o1 .filters .month                     {width: 8.5em;}
.options.o1 .filters .kraj                      {width: 15.2em;}
.options.o1 .filters .typ-akce                  {width: 12em;}
  @media screen and (max-width: 1080px)         {  
  .options.o1 .filters                          {font-size: 0.75em;}
  }
  @media screen and (min-width: 769px)          {  
  .options.o1 > *                               {width: auto;}
  }

.pagination                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2em; box-sizing: border-box; margin-top: var(--gap2);}
.pagination a                                   {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; color: var(--color0c); text-decoration: none !important; font-weight: 500; border: solid 0.12em var(--color0c); border-radius: 1.1em; padding-bottom: 0.15em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}                                    
.pagination a:hover                             {color: var(--color0); border-color: var(--color0);}
.pagination a.sel                               {background: var(--color0); border-color: var(--color0); color: white;}

.message                                        {display: block; width: 100%; position: relative; top: calc(0px - var(--hero-padding)); padding-top: 1rem;}
.message.hidden                                 {position: absolute; left: -9999px; top: -9999px;}
.message > div                                  {display: flex; width: 100%; min-height: 2.4em; justify-content: space-between; align-items: flex-start; background: var(--color-error); padding: 0.7em 1em; border-radius: 1.2em; box-sizing: border-box;}
.message > div span                             {display: block; width: calc(100% - 3em); text-align: left; letter-spacing: 0; font-size: 0.85em; color: white; line-height: 1.3;}
.message > div .close                           {display: block; width: 0.65em; height: 0.65em; margin-top: 0.25em; cursor: pointer; transition: .15s ease-in-out;}
.message > div .close svg                       {display: block; width: 100%; height: 100%; fill: white;}
.message > div .close:hover                     {opacity: 0.75;}

.section:has(.hero)                             {padding-block: min(calc(1rem + 5vw), 3rem);}
.prodejce .hero                                 {padding-bottom: 0 !important;}

.hero                                           {display: flex; width: 100%; justify-content: space-between; align-items: center;}
.hero h1                                        {font-size: min(calc(1em + 4vw), 2.4em);}
.hero .img                                      {display: block;}
.hero .img img                                  {display: block; width: 100%;}
.hero p                                         {position: relative;}
  @media screen and (min-width: 1081px)         {
  .hero h1                                      {width: 45%; padding-right: 5%;}
  .hero .img                                    {width: 20%}
  .hero p                                       {width: 35%; padding-left: 5%;}
  .hero .horizontal                             {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .hero                                         {justify-content: center; flex-wrap: wrap;}
  .hero :is(h1, p)                              {text-align: center;}
  .hero .img                                    {width: 100%; max-width: 24rem; height: 16rem; order: -1; overflow: hidden; margin-bottom: 1.6em;}
  .hero p                                       {margin-top: 0.6em;}
  .hero .vertical                               {display: none;}
  .hero .horizontal                             {width: 14rem; margin-block: 1rem;}
  }

.info-note1                                     {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5em 1.8em; flex-wrap: wrap; padding: 2em; position: relative; box-sizing: border-box;}
.info-note1 .dashed                             {position: absolute; inset: 0;}
.info-note1 img                                 {display: block; width: 11em;}
.info-note1 p                                   {width: auto; font-weight: 700;}
  @media screen and (max-width: 1080px)         {
  .info-note1                                   {flex-direction: column;}
  .info-note1 p                                 {text-align: center;}
  .info-note1 p br                              {display: none;}
  }

.preview-image                                  {display: block; aspect-ratio: 0.65; border-radius: var(--border-radius); overflow: hidden; position: relative; container-type: inline-size;}
.preview-image .img                             {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;}
.preview-image .img img                         {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview-image:after                            {display: block; width: 100%; height: 60%; position: absolute; left: 0; bottom: 0; z-index: 1; background-image: linear-gradient(to top, var(--color0), transparent); opacity: 0.85; content: ""; transition: .15s ease-in-out;}
.preview-image .dashed                          {display: block; width: calc(100% - 2 * var(--dashed-inset)); height: calc(100% - 2 * var(--dashed-inset)); position: absolute; left: var(--dashed-inset); bottom: var(--dashed-inset); z-index: 2; opacity: 1; filter: invert();}
.preview-image .logo                            {display: block; width: 18%; aspect-ratio: 1; position: absolute; left: calc(1.6em + 5%); top: calc(1.6em + 5%); z-index: 4; border-radius: 100%; overflow: hidden; box-shadow: 0 0 0.8em rgba(0,0,0,0.6);}
.preview-image .logo img                        {display: block; widtH: 100%;}
.preview-image .inner                           {display: flex; width: calc(100% - 3.2em - 10%); flex-wrap: wrap; gap: 1em; position: absolute; left: calc(1.6em + 5%); bottom: calc(1.6em + 5%); z-index: 3;}
.preview-image .inner .place                    {display: block; width: 100%; font-size: 0.75em; font-weight: 700; color: white; text-shadow: 0 0 0.2em rgba(0,0,0,0.5); margin-bottom: -0.65em;}
.preview-image .inner h2                        {font-size: min(2.4rem, 12cqw); color: white; text-shadow: 0 0 0.2em rgba(0,0,0,0.5);}
.preview-image .inner .button                   {font-size: min(0.8rem, 3.3cqw);}
.preview-image .inner .tags                     {position: relative; z-index: 6;}
.preview-image .inner .tags span                {color: white;}
.preview-image .inner .tags span a              {text-decoration: none;}
.preview-image > a                              {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 5;}
.preview-image:hover .img                       {filter: brightness(1.05);}
.preview-image:hover:after                      {opacity: 0.5;}
.preview-image.festivaly-vina .logo             {background: white;}
.preview-image.food-festivaly .logo             {background: #d37018;}
.preview-image.trhy-jarmarky .logo              {background: #f0e2c7;}
.previews-trhy-jarmarky .preview-image .inner h2{font-size: min(1.7rem, 10cqw);}

.preview-image.ostatni .logo              {background: #f0e2c7;}
.previews-ostatni .preview-image .inner h2{font-size: min(1.7rem, 10cqw);}

.navstevnik .section:has(.event-types)          {padding-top: 0;}

.event-types                                    {display: flex; width: 100%; justify-content: space-between;}
  @media screen and (min-width: 961px)          {
  .event-types > div                            {width: 24.4%;}
  }
  @media screen and (max-width: 960px)          {
  .event-types                                  {flex-wrap: wrap; gap: 0.6rem;}
  .event-types > div                            {width: calc(50% - 0.3rem);}
  }
  @media screen and (min-width: 769px) and (max-width: 960px){
  .event-types > .preview-image                 {aspect-ratio: 0.8;}
  .event-types > .preview-image .inner h2       {font-size: 9cqw;}
  .event-types > .preview-image .inner .button  {font-size: 3cqw;}
  }
  @media screen and (max-width: 768px)          {
  .event-types > .preview-image .inner .button  {font-size: min(0.9em, 4.4cqw);}
  }

.preview                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; gap: 0.6em 1em; flex-wrap: wrap;}
.preview .img                                   {display: block; width: 100%; aspect-ratio: 3/2; border-radius: var(--border-radius); overflow: hidden; transition: .15s ease-in-out;}
.preview .img img                               {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview .img:hover                             {opacity: 0.85;}
.preview > div                                  {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.45em;}
.preview > div .title                           {display: block; width: 100%; font-size: min(calc(1.1em + 1vw), 1.35em); color: var(--color0); font-weight: 700; letter-spacing: 0; line-height: 1.25; position: relative; top: -0.1em;}
.preview > div .title a                         {color: inherit; transition: .15s ease-in-out;}
.preview:not(:has([class])) > div .title a:hover{color: var(--color0b);}
.preview > div .descr                           {display: block; width: 100%; font-size: 0.8em; margin-block: -0.25em 0.25em;}
.preview > div .button                          {font-size: 0.65em;}

.tags                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em 0.65em;}
.tags span                                      {display: flex; align-items: center; gap: 0.4em; font-size: 0.8em; color: var(--color0b);}
.tags span:before                               {display: block; width: 0.9em; height: 0.9em; background-repeat: no-repeat; background-position: center center;}
.tags span a                                    {text-decoration: underline; transition: .15s ease-in-out;}
.tags span a:hover                              {text-decoration-color: transparent;}
.tags span.category                             {font-weight: 700;}
.tags span.date:before                          {content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M406.2,511.6H105.8c-31.6,0-49,0-65-8.1c-14.2-7.2-25.5-18.5-32.7-32.7c-8.1-16-8.1-33.4-8.1-65V157.2c0-31.6,0-49,8.1-65 C15.4,78,26.7,66.7,40.8,59.5c15.6-8,32.6-8.1,62.7-8.1V22.6c0-12.7,10.3-23,23-23c12.7,0,23,10.3,23,23v28.8h213V22.6 c0-12.7,10.3-23,23-23c12.7,0,23,10.3,23,23v28.8c30.2,0,47.1,0.2,62.7,8.1c14.2,7.2,25.5,18.5,32.7,32.7c8.1,16,8.1,33.4,8.1,65 v248.6c0,31.6,0,49-8.1,65c-7.2,14.2-18.5,25.5-32.7,32.7C455.2,511.6,437.8,511.6,406.2,511.6z M45.9,200.9v204.9 c0,23.7,0,38,3.1,44.2c2.8,5.5,7.1,9.8,12.6,12.6c6.2,3.1,20.5,3.1,44.2,3.1h300.3c23.7,0,38,0,44.1-3.1c5.5-2.8,9.8-7.1,12.6-12.6 c3.1-6.2,3.1-20.5,3.1-44.2V200.9H45.9z M45.9,155h420.1c0-22.3-0.1-35.9-3.1-41.9c-2.8-5.5-7.1-9.8-12.6-12.6 c-6.2-3.1-20.5-3.1-44.2-3.1H105.8c-23.7,0-38,0-44.1,3.1c-5.5,2.8-9.8,7.1-12.6,12.6C46,119,46,132.6,45.9,155z M212.8,408.1 C212.8,408.1,212.8,408.1,212.8,408.1l-86.3,0c-12.7,0-23-10.3-23-23c0-12.7,10.3-23,23-23c0,0,0,0,0,0l86.3,0c12.7,0,23,10.3,23,23 C235.8,397.8,225.5,408.1,212.8,408.1z M385.5,304.5C385.5,304.5,385.5,304.5,385.5,304.5l-258.9,0c-12.7,0-23-10.3-23-23 c0-12.7,10.3-23,23-23c0,0,0,0,0,0l258.9,0c12.7,0,23,10.3,23,23C408.4,294.2,398.1,304.5,385.5,304.5z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");}
.tags span.time:before                          {content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M230.5,0h50.9c35.5,0,63.7,0,86.5,1.9c23.3,1.9,43.2,6,61.3,15.4c28.1,14.6,50.9,37.4,65.5,65.5 c9.4,18.1,13.5,38,15.4,61.3c1.9,22.8,1.9,51,1.9,86.5v50.9c0,35.5,0,63.7-1.9,86.5c-1.9,23.3-6,43.2-15.4,61.3 c-14.6,28.1-37.4,50.9-65.5,65.5c-18.1,9.4-38,13.5-61.3,15.4c-22.8,1.9-51,1.9-86.5,1.9h-50.9c-35.5,0-63.7,0-86.5-1.9 c-23.3-1.9-43.2-6-61.3-15.4c-28.1-14.6-50.9-37.4-65.5-65.5c-9.4-18.1-13.5-38-15.4-61.3C0,345.2,0,316.9,0,281.5v-50.9 c0-35.5,0-63.7,1.9-86.5c1.9-23.3,6-43.2,15.4-61.3c14.6-28.1,37.4-50.9,65.5-65.5c18.1-9.4,38-13.5,61.3-15.4 C166.8,0,195.1,0,230.5,0z M148.3,52.9c-20.1,1.7-32.3,4.8-41.9,9.8c-18.7,9.7-34,25-43.7,43.7c-5,9.6-8.1,21.8-9.8,41.9 c-1.7,20.4-1.7,46.5-1.7,83.4v48.6c0,36.9,0,63,1.7,83.4c1.7,20.1,4.8,32.3,9.8,41.9c9.7,18.7,25,34,43.7,43.7 c9.6,5,21.8,8.1,41.9,9.8c20.4,1.7,46.5,1.7,83.4,1.7h48.6c36.9,0,63,0,83.4-1.7c20.1-1.7,32.3-4.8,41.9-9.8 c18.7-9.7,34-25,43.7-43.7c5-9.6,8.1-21.8,9.8-41.9c1.7-20.4,1.7-46.5,1.7-83.4v-48.6c0-36.9,0-63-1.7-83.4 c-1.7-20.1-4.8-32.3-9.8-41.9c-9.7-18.7-25-34-43.7-43.7c-9.6-5-21.8-8.1-41.9-9.8c-20.4-1.7-46.5-1.7-83.4-1.7h-48.6 C194.8,51.2,168.7,51.2,148.3,52.9z M251.6,121.8c14.1,0,25.6,11.5,25.6,25.6v127.2l90.3,34.3c13.2,5,19.9,19.8,14.8,33 c-5,13.2-19.8,19.9-33,14.8l-106.8-40.6c-9.9-3.8-16.5-13.3-16.5-23.9V147.4C226,133.2,237.5,121.8,251.6,121.8z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");}
.tags span.place:before                         {content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M92.8,197.8c0-79.3,70-151.3,162.9-151.3c92.9,0,162.9,72,162.9,151.3c0,49.9-30.5,105.7-70.7,157.3 c-31.8,40.8-67.1,76.1-92.2,100.8c-25.1-24.7-60.4-60-92.2-100.8C123.4,303.5,92.8,247.7,92.8,197.8z M255.8,0 C139.2,0,46.3,90.9,46.3,197.8c0,66.4,39.3,132.9,80.5,185.9c35.7,45.9,75.8,85.4,100.9,110c4.3,4.3,8.2,8.1,11.5,11.4 c4.4,4.4,10.3,6.8,16.5,6.8s12.1-2.5,16.5-6.8c3.3-3.3,7.2-7.1,11.5-11.4l0,0c25.1-24.7,65.2-64.1,100.9-110 c41.3-53.1,80.5-119.5,80.5-185.9C465.2,90.9,372.4,0,255.8,0z M255.8,267.6c32.1,0,58.2-26,58.2-58.2c0-32.1-26-58.2-58.2-58.2 s-58.2,26-58.2,58.2C197.6,241.6,223.6,267.6,255.8,267.6z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");}
.tags span.price:before                         {content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M486.6,235.3c14,0,25.4-11.4,25.4-25.4v-23.1c0-41.4-3.7-83.4-30.5-110.2c-11.9-11.9-27.4-20-47.4-24.8 c-16.4-3.9-36.4-5.7-62.8-5.7H140.7c-41.4,0-83.4,3.7-110.2,30.5C18.6,88.5,10.5,104,5.7,124C1.8,140.4,0,160.4,0,186.8v11.5 c0,14,11.4,25.4,25.4,25.4c17.8,0,32.3,14.5,32.3,32.3s-14.5,32.3-32.3,32.3c-14,0-25.4,11.4-25.4,25.4v11.5 c0,41.4,3.7,83.4,30.5,110.2c11.9,11.9,27.4,20,47.4,24.8c16.4,3.9,36.4,5.7,62.8,5.7h230.6c41.4,0,83.4-3.7,110.2-30.5 c11.9-11.9,20-27.4,24.8-47.4c3.9-16.4,5.7-36.4,5.7-62.8c0-14-11.4-25.4-25.4-25.4c-17.8,0-32.3-14.5-32.3-32.3 S468.8,235.3,486.6,235.3z M461.2,188.4c-33.4,10.8-57.7,42.1-57.7,79.1c0,36.7,24,68,57.1,78.9c-1.5,27.6-6.3,44.3-15.1,53 c-10.8,10.8-33.7,15.6-74.3,15.6h-136V410c0-14-11.4-25.4-25.4-25.4S184.5,396,184.5,410v5.1h-43.8c-40.6,0-63.5-4.8-74.3-15.6 c-9.9-9.9-14.8-30-15.5-64.4c33.4-10.8,57.6-42.1,57.6-79s-24.2-68.3-57.6-79c0.7-34.5,5.6-54.5,15.5-64.4 c10.8-10.8,33.7-15.6,74.3-15.6h43.8v143.9c0,14,11.4,25.4,25.4,25.4s25.4-11.4,25.4-25.4V96.9h136c40.6,0,63.5,4.8,74.3,15.6 c10.8,10.8,15.6,33.7,15.6,74.3V188.4z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");}

.festivaly-vina :is(.title a:hover, .category a){color: var(--color-festivaly-vina);}
.festivaly-vina .category a:hover               {color: var(--color-festivaly-vina2);}
.craft-beer-festivaly :is(.title a:hover, .category a)
                                                {color: var(--color-craft-beer-festivaly);}
.craft-beer-festivaly .category a:hover         {color: var(--color-craft-beer-festivaly2);}
.food-festivaly :is(.title a:hover, .category a){color: var(--color-food-festivaly);}
.food-festivaly .category a:hover               {color: var(--color-food-festivaly2);}
.trhy-jarmarky :is(.title a:hover, .category a) {color: var(--color-trhy-jarmarky);}
.trhy-jarmarky .category a:hover                {color: var(--color-trhy-jarmarky2);}

.ostatni :is(.title a:hover, .category a) {color: var(--color-ostatni);}
.ostatni .category a:hover                {color: var(--color-ostatni2);}

.farmarske-trhy .category a                     {color: var(--color-farmarske-trhy2);}
.farmarske-trhy .category a:hover               {color: var(--color-farmarske-trhy2);}
.jarmarky .category a                           {color: var(--color-jarmarky2);}
.jarmarky .category a:hover                     {color: var(--color-jarmarky2);}
.vseobecne-trhy .category a                     {color: var(--color-vseobecne-trhy2);}
.vseobecne-trhy .category a:hover               {color: var(--color-vseobecne-trhy2);}

.prodejce .section:has(.hp-blog)                {margin-top: -1.4rem;}

.hp-blog                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 1.4rem;}
  @media screen and (min-width: 1081px)         {
  .hp-blog .preview .img                        {width: 45%;}
  .hp-blog .preview > div                       {width: calc(55% - 1em);}
  }
  @media screen and (min-width: 641px)          {
  .hp-blog .preview                             {width: calc(50% - 0.7rem);}
  }

.cta-calendar                                   {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--gap3) 0;}
.cta-calendar .img                              {display: block; max-width: 35em;}                               
.cta-calendar .img img                          {display: block; width: 100%;}
.cta-calendar .info                             {display: flex; max-width: 46em; justify-content: center; flex-wrap: wrap; gap: var(--gap3);}
.cta-calendar .info :is(h2, p)                  {text-align: center;}
.cta-calendar .info p                           {margin-block: -0.25em 0.25em;}
  @media screen and (min-width: 1081px)         {
  .cta-calendar                                 {justify-content: space-between;}
  .cta-calendar .img                            {width: 42%;}
  .cta-calendar .info                           {width: 49%; justify-content: flex-start;}
  .cta-calendar .info :is(h2, p)                {text-align: left;}
  }

.hp .section:has(.infographics)                 {padding: 0;}

.infographics                                   {display: flex; width: 100%; justify-content: space-around; flex-wrap: wrap; gap: 2.5em 0; position: relative; z-index: 2; isolation: isolate; border-radius: var(--border-radius); overflow: hidden; padding: calc(4em + 4%); box-sizing: border-box;}
.infographics .dashed                           {width: calc(100% - 2 * var(--dashed-inset)); height: calc(100% - 2 * var(--dashed-inset)); position: absolute; left: var(--dashed-inset); top: var(--dashed-inset); opacity: 1; filter: invert();}
.infographics > div                             {display: block; width: 12em; position: relative; z-index: 5;}
.infographics > div .icon                       {display: block; width: 7em; height: 7em; padding: 2em; border: solid 0.1em white; box-sizing: border-box; border-radius: 100%; margin: 0 auto 1em;}
.infographics > div .icon img                   {display: block; width: 100%;}
.infographics > div span                        {display: block; width: 100%; text-align: center; font-size: 0.9em; color: white;}
  @media screen and (max-width: 1080px)         {
  .infographics > div                           {width: 50%;}
  }
  @media screen and (max-width: 540px)          {
  .infographics                                 {justify-content: space-between; padding-inline: 3rem;}
  .infographics > div                           {font-size: 0.9em;}
  }

.navstevnici .infographics                      {background: black;}
.navstevnici .infographics:before               {display: block; position: absolute; inset: 0; opacity: 0.35; background: url("images/infographics/infographics.jpg") no-repeat center center; background-size: cover; content: "";}

.swiper                                         {display: block; width: 100%;}
.swiper-slide                                   {flex-shrink: 0;}

.swiper-button                                  {display: flex; width: var(--swiper-button); height: var(--swiper-button); justify-content: center; align-items: center; background: var(--color0); border-radius: 100%; z-index: 5; margin: 0; box-sizing: border-box; position: absolute; cursor: pointer; transition: .15s ease-in-out;}                                
.swiper-button svg                              {display: block; width: 45%; fill:white;}
.swiper-button:after                            {display: none;}
.swiper-button:hover                            {background: var(--color0b);}
.swiper-button-prev                             {transform: rotate(-180deg);}
.swiper-button-disabled                         {opacity: 0 !important;}
  @media screen and (min-width: 541px)          {
  .swiper-button                                {height: var(--swiper-button); --swiper-button: 2.2em; top: calc(50% - var(--swiper-button) / 2);}
  }
  @media screen and (max-width: 768px)          {
  .swiper-button                                {height: calc(var(--swiper-button) / 2); --swiper-button: 3.6em; border-radius: calc(var(--swiper-button) / 2) calc(var(--swiper-button) / 2) 0 0;}                                
  .swiper-button svg                            {width: 25%;}
  }

.carousel                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative; box-sizing: border-box;}
.carousel .swiper-slide                         {display: flex; height: auto; position: relative; box-sizing: border-box; overflow: hidden; transition: .15s ease-in-out;}
.carousel .swiper-slide > *                     {width: 100%;}
  @media screen and (min-width: 769px)          {
  .carousel .swiper-button-prev                 {left: calc(0px - 0.5 * var(--swiper-button));}
  .carousel .swiper-button-next                 {right: calc(0px - 0.5 * var(--swiper-button));}
  }
  @media screen and (max-width: 768px)          {
  .carousel .swiper-button                      {top: calc(50% - var(--swiper-button));}
  .carousel .swiper-button svg                  {transform: rotate(90deg);}
  .carousel .swiper-button-prev                 {left: calc(0px - var(--wrapper-side)); transform: rotate(90deg); transform-origin: left bottom;}
  .carousel .swiper-button-next                 {right: calc(0px - var(--wrapper-side)); transform: rotate(-90deg); transform-origin: right bottom;}
  }

.review                                         {display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; gap: 1em; padding: var(--review-padding); position: relative; box-sizing: border-box; --review-padding: 8%;}
.review .dashed                                 {position: absolute; inset: 0;}
.review p                                       {min-height: 2.5em; font-style: italic; position: relative; padding-right: 3.5em; box-sizing: border-box;}
.review p:after                                 {display: block; width: 2.5em; height: 2.5em; position: absolute; right: 0; top: 0.4em; opacity: 0.8; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512,29.2v183.7c0,0,0,0,0,0c0,117.3-95.9,212.8-213.8,212.8c-9.2,0-16.6-7.4-16.6-16.6 c0-9.2,7.4-16.6,16.6-16.6c99.6,0,180.7-80.6,180.7-179.7V33.1H314.7v163.1h98.7c9.2,0,16.6,7.4,16.6,16.6c0,9.2-7.4,16.6-16.6,16.6 H310.8c-16.1,0-29.1-13.1-29.1-29.2V29.2c0-16.1,13.1-29.2,29.1-29.2h172.1C498.9,0,512,13.1,512,29.2z M202.1,0H30 C13.9,0,0.8,13.1,0.8,29.2v171.1c0,16.1,13.1,29.2,29.1,29.2h102.7c9.2,0,16.6-7.4,16.6-16.6c0-9.2-7.4-16.6-16.6-16.6H34V33.1 h164.1v179.7c0,99.1-81.1,179.7-180.7,179.7c-9.2,0-16.6,7.4-16.6,16.6c0,9.2,7.4,16.6,16.6,16.6c117.9,0,213.8-95.5,213.8-212.8 c0,0,0,0,0,0V29.2C231.2,13.1,218.1,0,202.1,0z' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.review .name                                   {text-align: right; font-weight: 700;}
  @media screen and (max-width: 1080px)         {
  .review                                       {font-size: 0.9em;}
  }

.previews                                       {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem var(--previews-gap); --previews-gap: min(calc(0.2rem + 2vw), 1.4rem); --previews-count: 1;}
.previews > *                                   {width: calc((100% / var(--previews-count)) - (var(--previews-gap) * (var(--previews-count) - 1) / var(--previews-count)));}
.previews.p3-2 > *                              {--previews-count: 2;}
.previews:has(.preview-image)                   {--previews-gap: 0.5em; gap: var(--previews-gap);}
  @media screen and (min-width: 961px)          {
  .previews.p3-1 > *                            {--previews-count: 3;}
  .previews.p3-2 > *                            {--previews-count: 3;}
  }
  @media screen and (min-width: 641px) and (max-width: 960px){
  .previews.p3-1 > *                            {--previews-count: 2;}
  }

.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.article h2                                     {font-size: min(calc(1em + 4vw), 2.1em);}
.article h3                                     {font-size: min(calc(0.75em + 4vw), 1.5em);}
.article :is(h2, h3)                            {margin-block: 1rem -0.2em;}
.article :is(.infographics, .cta-calendar, .image, .slider-gallery, .highlight, .embed)
                                                {margin-block: 1em;}
.article :is(.infographics, .cta-calendar)
                                                {font-size: 0.85em;}
.article .cta-calendar                          {padding: 8% 10%; background: var(--color0d);}
.article .sep                                   {margin-block: 1em;}
.article .sep + *                               {margin-top: 0 !important;}
.article .tags                                  {font-size: 1.1em; margin-block: -0.5em;}
.article .image                                 {display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius); overflow: hidden; transition: .15s ease-in-out;}
.article .image img                             {display: block; width: 100%; height: 100%; object-fit: cover;}
.article .image:hover                           {opacity: 0.85;}
  @media screen and (min-width: 1081px)         {
  .article :is(.infographics, .cta-calendar, .image, .how1, .other-dates)
                                                {width: 114%; margin-inline: -7%; padding-inline: 7%; box-sizing: border-box;}
  .article .cta-calendar                        {border-radius: var(--border-radius);}
  }
  @media screen and (max-width: 1080px)         {
  .article :is(.infographics, .cta-calendar, .image)
                                                {width: calc(100vw + 3rem); margin-inline: calc(50% - 50vw - 1.5rem);}
  }

.article-styles :is(ul, ol)                     {padding-left: 1.5em; box-sizing: border-box; margin: 0}
.article-styles li                              {padding-left: 1.5em; box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles li:before                       {display: block; position: absolute; left: 0; content: "";}
.article-styles ul li:before                    {width: 0.7em; height: 0.12em; background: var(--color0); top: 0.78em;}
.article-styles li :is(ul, ol)                  {margin-block: 0.4em 0.8em; padding: 0;}
.article-styles li li                           {font-size: 1em !important;}
.article-styles ol                              {list-style: none; counter-reset: li;}
.article-styles ol > li                         {counter-increment: li;}
.article-styles ol > li:before                  {content: counter(li) "."; font-weight: 700; top: 0;}
.article-styles .highlight                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; padding: 2.4em; background: var(--color0d); border-radius: var(--border-radius); position: relative; box-sizing: border-box;}
.article-styles .highlight .dashed              {width: calc(100% - 1.2em); height: calc(100% - 1.2em); position: absolute; inset: 0.6em; z-index:1;}
.article-styles .highlight > *:first-child      {margin-top: 0;}
.article-styles .highlight > p                  { position:relative; z-index:2; }
.article-styles .embed                          {display: block; width: 100%; border-radius: var(--border-radius); overflow: hidden;}
.article-styles .embed iframe                   {display: block; width: 100%;}

.slider-gallery .swiper-slide a                 {display: block; width: 100%; aspect-ratio: 3/2; border-radius: 0.5rem; overflow: hidden; transition: .15s ease-in-out;}     
.slider-gallery .swiper-slide a img             {display: block; width: 100%; height: 100%; object-fit: cover;}     
.slider-gallery .swiper-slide a[href]:hover     {opacity: 0.8;}
  @media screen and (min-width: 541px)          {
  .slider-gallery .swiper-button-prev           {font-size: 0.9em; left: calc(0px - var(--swiper-button) / 2);}
  .slider-gallery .swiper-button-next           {font-size: 0.9em; right: calc(0px - var(--swiper-button) / 2);}
  }

body:has(.event-hero) .header .wrapper          {background: none;}
body .section:has(.event-hero)                  {margin-top: calc(0px - var(--header));}

.event-hero                                     {display: flex; width: 100vw; margin-inline: calc(50% - 50vw); position: relative; padding-bottom: calc(2rem + var(--gap1)); margin-bottom: 0.8rem;}
.event-hero :is(.background, .bg-image)         {display: flex; width: 100%; height: calc(100% + var(--gap1) + var(--header)); justify-content: center; position: absolute; left: 0; bottom: 0;}
.event-hero .bg-image                           {margin: 0 !important; left: 15%;}
.event-hero .bg-image div                       {display: block; width: 100%; max-width: 100rem; filter: brightness(0.45);
                                                -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 right, transparent, black, transparent);                                           
                                                -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
                                                }
.event-hero .bg-image div img                   {display: block; width: 100%; height: 100%; object-fit: cover;}
.event-hero .dashed                             {width: 100%; position: absolute; left: 0; bottom: 1rem; opacity: 1; filter: invert();}
.event-hero .wrapper                            {margin-top: var(--header);}
.event-hero h1                                  {font-size: min(calc(1.2em + 4vw), 2.5em); color: white; margin-block: 1rem;}
.event-hero .tags span                          {font-size: 0.8em; color: white; font-weight: 500;}
.event-hero .info                               {display: block; width: 100%; max-width: 30em;}
.event-hero .info > span                        {display: inline-block; font-size: 0.85em; color: white; font-weight: 700; letter-spacing: 0; line-height: 1.3; padding: 0.5em 0.7em; border-radius: 0.4em; border: dashed 0.1em white; box-sizing: border-box; margin-top: 1.6em;}
.event-hero .info.red > span                    {border-color: var(--color-error);}
.event-hero .info.yellow > span                 {border-color: #d2b42c;}
.event-hero .info.green > span                  {border-color: #36c33d;}
.event-hero .button                             {margin-top: 1rem;}
.event-hero .logo                               {display: flex;; align-items: center; position: relative; z-index: 2;}
.event-hero .logo img                           {display: flex; width: 100%; height: auto;}
  @media screen and (min-width: 1081px)         {
  body:has(.event-hero) .header a[aria-current="page"]:after
                                                {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  body:has(.event-hero) .header .wrapper        {padding: 0;}
  body:has(.event-hero) .header .button         {margin-right: -1rem;;}
  }
  @media screen and (min-width: 641px)          {
  .event-hero                                   {justify-content: space-between; align-items: center;}
  .event-hero .wrapper:has(.logo)               {padding-right: 12em;} 
  .event-hero .wrapper .logo                    {width: 9em; height: 100%; position: absolute; right: 0; top: 0.5em;}
  }
  @media screen and (max-width: 640px)          {
  .event-hero .wrapper .logo                    {width: 6em; margin-bottom: 2em; order: -1;}
  }

.event-cols                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;}
.event-cols > *                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em 0;}
.event-cols > * > *:first-child                 {margin-top: 0;}
.event-cols aside > div                         {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 0;}
.event-cols .map                                {display: block; width: 100%; height: 20rem; border-radius: var(--border-radius); overflow: hidden; position: relative;}
.event-cols .map iframe                         {display: block; inset: 0;}
.event-cols .place-info                         {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em 1.2em;}
.event-cols .place-info > span                  {display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: 0.75em;}
.event-cols .place-info > span .icon            {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; border: dashed 0.15em var(--color0); border-radius: 100%; box-sizing: border-box; position: relative; top: 0.06em;}
.event-cols .place-info > span .icon svg        {display: block; width: 55%; height: 55%; fill: var(--color0);}
.event-cols .place-info > span .text            {display: block; width: calc(100% - 3.2em); line-height: 1.4; letter-spacing: 0;}
.farmarske-trhy .event-cols .place-info .icon   {border-color: var(--color-farmarske-trhy);}
.jarmarky .event-cols .place-info .icon         {border-color: var(--color-jarmarky);}
.vseobecne-trhy .event-cols .place-info .icon   {border-color: var(--color-vseobecne-trhy);}
  @media screen and (min-width: 961px)          {
  .event-cols > div                             {width: 56%;}
  .event-cols aside                             {width: 32%;}
  }
  @media screen and (min-width: 541px) and (max-width: 960px){
  .event-cols aside                             {justify-content: space-between;}
  .event-cols aside > div                       {width: 49%;}  
  .event-cols .map                              {height: 55vw;}
  }
  @media screen and (min-width: 541px)          {
  .event-cols aside h2                          {font-size: 1.6rem;}
  }

.promo-file                                     {display: block; width: 100%; border-radius: 0.4em; overflow: hidden; box-shadow: 0 0 0.4em rgba(0,0,0,0.2); transition: .15s ease-in-out;}
.promo-file img                                 {display: block; width: 100%;}
.promo-file:hover                               {opacity: 0.85;}

.program                                        {display: flex; width: 100%; overflow: hidden; margin-top: 0.8em;}
.program .inner                                 {display: flex; width: calc(100% + 1.2em); margin-left: -1.2em; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.7em 1.2em}
.program .inner > div                           {display: flex; flex-direction: column; align-items: flex-start; font-weight: 500; padding-left: 1.3em; position: relative; box-sizing: border-box;}
.program .inner > div:before                    {display: block; width: 0.1em; height: calc(100% - 0.4em); line-height: 1.3; border-left: dashed 0.1em var(--color0c); position: absolute; left: 0; top: 0.2em; content: "";}
.program .inner > div .time                     {display: flex; height: 1.8em; align-items: center; background: var(--color0b); font-size: 0.7em; color: white; font-weight: 500; padding: 0 0.6em 0.2em; margin-bottom: 0.6em; position: relative; top: 0.3em; box-sizing: border-box; border-radius: 0.9em;}
.farmarske-trhy .program .inner > div .time     {background: var(--color-farmarske-trhy);}
.jarmarky .program .inner > div .time           {background: var(--color-jarmarky);}
.vseobecne-trhy .program .inner > div .time     {background: var(--color-vseobecne-trhy);}

.other-dates                                    {display: flex; width: 100%; flex-wrap: wrap; gap: 1em; position: relative; padding: 2em; box-sizing: border-box;}
.other-dates .dashed                            {position: absolute; inset: 0;}
.other-dates h2                                 {margin-top: 0;}
.other-dates ul                                 {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0;}
.other-dates ul li                              {display: block; width: auto; padding: 0;}
.other-dates ul li:before                       {display: none;}
.other-dates ul li span                            {display: flex; height: 1.6em; font-size: 0.95rem; color: white !important; letter-spacing: 0; font-weight: 500; text-decoration: none !important; line-height: 1; text-decoration: none; padding-inline: 0.6em; border-radius: 0.8em; padding-top: 0.2em; box-sizing: border-box; transition: .15s ease-in-out;}
/*.other-dates ul li span:hover                      {color: white !important; filter: brightness(1.2);}*/

.farmarske-trhy .other-dates ul li span            {background: var(--color-farmarske-trhy);}
.jarmarky .other-dates ul li span                  {background: var(--color-jarmarky);}
.vseobecne-trhy .other-dates ul li span            {background: var(--color-vseobecne-trhy);}

.booking                                        {display: flex; width: 100%; flex-wrap: wrap; gap:;}
.booking h3                                     {font-size: min(calc(0.8em + 3vw), 1.4em); margin-bottom: 0.6em;}
.booking .group                                 {display: flex; width: 100%; flex-wrap: wrap;;}
.booking .group > div                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.2em 1em; padding-block: 0.6em; border-top: dashed 0.1em var(--color0c);}
.booking .group > div:last-of-type              {border-bottom: dashed 0.1em var(--color0c);}
.booking .group > div span                      {display: block; font-size: 0.9em; letter-spacing: 0;}
.booking .group > div span:nth-child(1)         {width: calc(100% - 28em);}
.booking .group > div span:nth-child(2)         {width: 8em;}
.booking .group > div span:nth-child(3)         {width: 7em; opacity: 0.5;}
.booking .group > div .button                   {font-size: 0.6em;}
  @media screen and (max-width: 768px)          {
  .booking .group > div                         {justify-content: flex-end;}
  .booking .group > div span                    {font-size: 0.8em}
  .booking .group > div span:nth-child(1)       {width: 100%; font-size: 1em;}
  }

.participants                                   {display: flex; flex-wrap: wrap; gap: 0.8em 1.4em; padding-left: 0 !important;}
.participants li                                {width: auto; padding: 0 0 0.3em 2.7em; margin-top: 0.2em; border-bottom: dashed 0.11em var(--color0b);}
.participants li:before                         {font-size: 1.7em; font-weight: 500 !important; left: 0; top: auto !important; bottom: 0; content: counter(li, decimal-leading-zero) !important;}

.farmarske-trhy .participants li:before         {color: var(--color-farmarske-trhy);}
.jarmarky .participants li:before               {color: var(--color-jarmarky);}
.vseobecne-trhy .participants li:before         {color: var(--color-vseobecne-trhy);}

.logos                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 1.6em;}
.logos a                                        {display: block; height: 3em; transition: .15s ease-in-out;}
.logos a img                                    {display: block; height: 100%;}
.logos a:hover                                  {opacity: 0.8;}

.booking-head                                   {display: flex; width: 100%; flex-wrap: wrap; padding: 2em; box-sizing: border-box; position: relative; margin-bottom: var(--gap2);}
.booking-head .dashed                           {position: absolute; inset: 0;}
.booking-head ul                                {display: block; letter-spacing: 0; position: relative; z-index: 2;}
.booking-head ul li strong                      {display: inline-block; width: 8em;}
.booking-head .line                             {position: relative;}
  @media screen and (min-width: 961px)          {
  .booking-head .vertical                       {margin-inline: 2em;}
  .booking-head .horizontal                     {display: none;}
  }
  @media screen and (max-width: 960px)          {
  .booking-head .vertical                       {display: none;}
  .booking-head .horizontal                     {margin-block: 1em;}
  }
  @media screen and (max-width: 540px)          {
  .booking-head ul li strong                    {display: block; margin-bottom: -0.3em;}
  }

.faq                                            {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.3em; gap: 1em; margin-top: var(--gap2);}
.faq article                                    {display: block; width: 100%;}
.faq article:not(:first-child)                  {padding-top: 1em; border-top: solid 1px var(--color0c);}
.faq :is(.title, p)                             {display: block; width: 100%;}
.faq .title                                     {font-size: 1.3em; font-weight: 700; padding-left: 1.2em; letter-spacing: 0; box-sizing: border-box; cursor: pointer; position: relative; transition: .15s ease-in-out;}                                             
.faq .title:before                              {display: block; width: 0.9em; height: 0.9em; position: absolute; left: 0; top: 0.33em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M287,349h-31v-62H132v-62h124v-62h31 l93,93L287,349z' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;}
.faq .title:hover                               {color: var(--color0c);}
.faq .collapse                                  {display: none; width: 100%; padding-top: 0.6rem; box-sizing: border-box;}
.faq article.sel .title:before                  {transform: rotate(90deg);}

.gallery .preview > div                         {gap: 0;}

.contacts                                       {display: flex; width: 100%; justify-content: space-between; gap: 1.5em; margin-top: var(--gap2);}
.contacts > div                                 {display: flex; flex-direction: column; gap: 0.6em;}
.contacts > div h2                              {font-size: min(calc(1em + 4vw), 1.45em);}
.contacts > div span.small                      {font-size: 0.8em; line-height: 1.4;}
.contacts > div span a                          {display: flex; align-items: center; gap: 0.4em; color: var(--color0); transition: .15s ease-in-out;}
.contacts > div span a svg                      {display: block; width: 1em; height: 1em; fill: var(--color0);}
.contacts > div span a:hover                    {opacity: 0.6;}
.contacts > div span .note                      {display: block; font-size: 0.7em; margin-left: 1.8em;}
  @media screen and (min-width: 961px)          {
  .contacts > div:nth-of-type(1)                {width: 14em;}
  .contacts > div:nth-of-type(2)                {width: 12em;}
  .contacts .dashed.horizontal                  {display: none;}                                     
  }
  @media screen and (max-width: 960px)          {
  .contacts                                     {flex-wrap: wrap;} 
  .contacts .dashed.vertical                    {display: none;}                                     
  }
  @media screen and (min-width: 541px) and (max-width: 960px){
  .contacts                                     {column-gap: 0;}
  .contacts > div:nth-of-type(1)                {width: 14em;}
  .contacts > div:nth-of-type(2)                {width: max(50%, 10em);}
  .contacts .dashed:nth-of-type(2)              {display: none;}
  }

.form                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-gap); position: relative; z-index: 10;}
.form h2                                        {font-size: min(calc(0.8em + 3vw), 1.6em); padding-inline: var(--padding1); box-sizing: border-box; margin-top: 0.4em;}
.form.form-cols                                 {justify-content: space-between;}
.form.form-cols > div                           {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--form-gap); position: relative; z-index: 10;}
.form.form-cols > div > *:first-child           {margin-top: 0;}
  @media screen and (min-width: 769px)          {
  .form.form-cols > div                         {width: 48%;}
  }

.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 1em var(--form-items-gap);}
.form-items .w66                                {width: calc(66% - 0.5 * var(--form-items-gap));}
.form-items .w33                                {width: calc(33% - 0.5 * var(--form-items-gap));}
  @media screen and (min-width: 769px)          {
  .form-items :is(.w33, .w33-50)                {width: calc(33.33% - 2 / 3 * var(--form-items-gap));}
  }
  @media screen and (min-width: 541px) and (max-width: 768px){
  .form-items .w33-50                           {width: calc(50% - 0.5 * var(--form-items-gap));}
  }
  @media screen and (min-width: 481px)          {
  .form-items .w50-100                          {width: calc(50% - 0.5 * var(--form-items-gap));}
  }

.form-item                                      {display: block; width: 100%; text-transform: none;}
.form-item .element                             {display: block; width: 100%; height: var(--form-item-height); border: var(--form-item-border); border-radius: calc(0.5 * var(--form-item-height)); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.form-item .element :is(input, textarea)        {display: block; width: 100%; height: 100%; font-size: 1em; color: var(--color0); font-weight: 700; border: none; outline: none; padding-inline: var(--form-item-padding); box-sizing: border-box; background: none; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item .element:has(textarea)               {height: 14em;}
.form-item .element textarea                    {padding-block: var(--form-item-padding);}
.form-item .element > label                     {display: block; font-size: 0.8em; font-weight: 500; color: var(--color0c); letter-spacing: 0; background: white; padding-inline: 0.4em; position: absolute; left: var(--form-item-padding); top: -0.87em; transition: .15s ease-in-out;}
.form-item .element:focus-within                {border-color: var(--color0);}
.form-item .element:focus-within label          {color: var(--color0);}
.form-item-error                                {display: block; width: 100%; font-size: 0.95em; color: var(--color-error); font-weight: 700; letter-spacing: 0; padding-inline: 0.75em; box-sizing: border-box; margin-top: 0.5em;}
.form-item-note                                 {display: block; width: 100%; font-size: 0.75em; color: var(--color0c); font-weight: 700; letter-spacing: 0; padding-inline: 1em; box-sizing: border-box; margin-top: 0.5em;}
.form-item-note a                               {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.form-item-note a:hover                         {color: var(--color0b); text-decoration-color: transparent;}
.form-item.obligatory .element > label:after    {color: var(--color-error); content: " *";}

.form .send                                     {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8em 1em; padding: 0 var(--padding1); box-sizing: border-box;}
.form .send span                                {display: block; font-size: 0.75em; color: var(--color1b);}
.form .send span a                              {color: inherit; text-decoration: underline; transition: .2s ease-in-out;}
.form .send span a:hover                        {opacity: 0.7; text-decoration-color: transparent;}

.custom-select                                  {position: relative; height: 100%;}
.custom-select select                           {position: absolute; left: -9999px;}
.custom-select .sel                             {display: block; width: calc(100% - 2.2em); font-size: 1em; color: var(--color0); font-weight: 700; line-height: 1.2; letter-spacing: 0; padding-inline: var(--form-item-padding) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; cursor: pointer; position: absolute; top: calc(50% - 0.58em); z-index: 2; transition: .2s ease-in-out;}
.custom-select .sel:hover                       {color: var(--color0);}
.custom-select > svg                            {display: block; width: 0.65em; fill: var(--color1); position: absolute; right: var(--form-item-padding); top: 1.05em; z-index: 1;}
.custom-select .dropdown                        {display: none; width: calc(100% + 2px); background: white; box-shadow: 0 0 0.25em rgba(0,0,0,0.10); border-radius: 0.6em; overflow: hidden; box-sizing: border-box; margin-top: 0.2em; position: absolute; left: -1px; top: var(--form-item-height); z-index: 8;}
.custom-select .dropdown .inner                 {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; gap: 0.6rem; --dropdown-padding: 1rem; overflow-y: auto;}
.custom-select .inner ul                        {display: block; width: 100%;}
.custom-select .inner ul li                     {display: flex; width: 100%; min-height: 2em; align-items: center; font-size: 0.9em; font-weight: 500; line-height: 1.1em; letter-spacing: 0; color: #666666; border-top: solid 1px rgba(0,0,0,0.1); padding: 0.65em var(--form-item-padding); position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:after               {display: block; width: 0.6em; height: 0.6em; opacity: 0.5; position: absolute; right: 0.9em; top: calc(50% - 0.3em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transform: rotate(-90deg); 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;}

.chk1:not(:checked),
.chk1:checked                                   {position: absolute; left: -9999px; background-position: left top;}
.chk1:not(:checked) + label,   
.chk1:checked + label                           {display: block; width: 100%; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; font-weight: 700; letter-spacing: 0; padding-left: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; position: absolute; left: 0; top: 0.2em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: var(--color0e);}
.chk1:checked + label:before                    {background: URL('images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color0);}
.chk1:disabled + label,                  
.chk1:disabled + label:before                   {opacity: 0.4;}

.form-item .element:has(.radio-opts, .upload, .checkbox)
                                                {height: auto; min-height: var(--form-item-height); padding: 0.6em var(--form-item-padding);}

.checkbox                                       {display: block;}
.form-item .element:has(.checkbox)              {display: flex; align-items: center;}
.form-item .element :is(.chk1:not(:checked) + label, .chk1:checked + label)
                                                {font-size: 0.9em;}

.form-item .amount                              {display: flex; height: 100%; align-items: center; gap: 0.2em; font-size: 0.9em; padding-inline: var(--form-item-padding); box-sizing: border-box;}
.form-item .amount span                         {display: flex; width: 1em; height: 1em; justify-content: center; align-items: center; color: white; line-height: 1; background: var(--color0); border-radius: 100%; cursor: pointer; position: relative; transition: .15s ease-in-out;}
.form-item .amount span:after                   {display: block; position: absolute; inset: 0; content: "";}
.form-item .amount span:nth-of-type(1):after    {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='386,229 283,229 283,126 229,126 229,229 126,229 126,283 229,283 229,386 283,386 283,283 386,283' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.form-item .amount span:nth-of-type(2):after    {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M386,283H126v-54h260V283z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.form-item .amount span:hover                   {background: var(--color0b);}
.form-item .amount input                        {display: block; height: 1.6em; color: var(--color0); text-align: center; font-weight: 500; border: none; border-radius: 0.2em; padding: 0; box-sizing: border-box; transition: .15s ease-in-out;}
.form-item .amount input:focus                  {background: var(--color0e);}

.radio-opts                                     {display: flex; flex-wrap: wrap; gap: 0 0.8em; font-size: 0.9em;}

.radio-opt                                      {display: flex; flex-wrap: wrap; position: relative; z-index: 1; margin: 0; box-sizing: border-box;}
.radio-opt input[type=radio]                    {position: absolute; visibility: hidden; left: -9999px;}
.radio-opt label                                {display: flex; width: 100%; align-items: center; font-weight: 400; color: var(--color0); letter-spacing: 0; padding-left: 1.4em; box-sizing: border-box; cursor: pointer; position: relative; transition: .15s ease-in-out;}
.radio-opt label:before                         {display: block; width: 1em; height: 1em; background: var(--color0e); border: solid 0.3em var(--color0e); box-sizing: border-box; border-radius: 100%; position: absolute; left: 0; top: calc(50% - 0.5em); content: "";}
.radio-opt label:hover                          {border-color: var(--color0);}
.radio-opt input[type=radio]:checked ~ label    {font-weight: 700;}
.radio-opt input[type=radio]:checked ~ label:before
                                                {background: var(--color0);}
.upload                                         {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 0.5em;}
.upload input[type="file"]                      {position: absolute; left: -9999px;}
.upload .files                                  {display: flex; width: 100%; flex-wrap: wrap; gap: 0.45em; padding-block: 0.2em;}
.upload .files:empty                            {display: none;}
.upload .files > span                           {display: block; width: calc(33.33% - 0.3em); aspect-ratio: 1; position: relative;}
.upload .files > span a                         {display: block; width: 100%; height: 100%; border-radius: 0.6em; overflow: hidden; transition: .15s ease-in-out;}
.upload .files > span a img                     {display: block; width: 100%; height: 100%; object-fit: cover;}
.upload .files > span a:hover                   {opacity: 0.8;}
.upload .files > span .delete                   {display: block; width: 1em; height: 1em; background: var(--color0); border-radius: 100%; position: absolute; right: 0.5em; top: 0.5em; cursor: pointer; box-shadow: 0 0 1em white; transform: rotate(45deg); transition: .15s ease-in-out;}
.upload .files > span .delete:after             {display: block; position: absolute; inset: 0; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='386,229 283,229 283,126 229,126 229,229 126,229 126,283 229,283 229,386 283,386 283,283 386,283' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}
.upload .files > span .delete:hover             {background: var(--color0b);}
.upload .button                                 {font-size: 0.65em !important;}

.switcher-href                                  {display: flex; height: var(--form-item-height);}
.switcher-href a                                {display: flex; height: 100%; align-items: center; gap: 0.4em; font-size: 1em; color: var(--color0); font-weight: 700; padding-inline: var(--form-item-padding); border: var(--form-item-border); box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.switcher-href a:first-child                    {border-radius: calc(0.5 * var(--form-item-height)) 0 0 calc(0.5 * var(--form-item-height));}
.switcher-href a:last-child                     {border-radius: 0 calc(0.5 * var(--form-item-height)) calc(0.5 * var(--form-item-height)) 0;}
.switcher-href a:nth-child(n+2)                 {border-left: none;}
.switcher-href a svg                            {display: block; width: 1em; height: 1em; fill: var(--color0);}
.switcher-href a:hover                          {background: var(--color0d); border-color: var(--color0);}
.switcher-href a.sel                            {background: var(--color0); color: white; border-color: var(--color0);}
.switcher-href a.sel svg                        {fill: white;}

.calendar {
    display: block;
    width: 100%;
    overflow-y: auto;
    --calendar-gap: 0.25rem;
    --calendar-day-width: calc(100% / 7 - 6 / 7 * var(--calendar-gap));
    --calendar-day-height: 7.4rem;
    --calendar-day-padding: 0.55rem;
    --calendar-day-gap: 0.2rem;
    --calendar-event-height: 1.4rem;
    --calendar-event-radius: calc(0.5 * var(--calendar-event-height));
    --calendar-box-radius: 0.4em;
}

    .calendar .inner > div > div,
    .events-overview .event-type {
        background: var(--color0d);
        border-radius: var(--calendar-box-radius);
        box-sizing: border-box;
    }

.prehled .events-overview .event-type {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    background: var(--color0d);
    border-radius: var(--calendar-box-radius);
    box-sizing: border-box;
}

    .calendar .inner {
        display: flex;
        width: 100%;
        min-width: 1000px;
        flex-wrap: wrap;
        gap: var(--calendar-gap);
    }

        .calendar .inner > div {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            gap: var(--calendar-gap);
        }

            .calendar .inner > div > div {
                width: var(--calendar-day-width);
                padding: var(--calendar-day-padding);
            }

    .calendar .head > div {
        background: var(--color0) !important;
    }

        .calendar .head > div span {
            display: block;
            font-size: 0.9em;
            color: white;
            font-weight: 500;
            line-height: 1;
        }

    .calendar .day {
        height: var(--calendar-day-height);
        position: relative;
        display: grid;
        grid-template-rows: 1.5em repeat(auto-fill, var(--calendar-event-height));
        gap: var(--calendar-day-gap);
        align-content: start;
    }

        .calendar .day.today:after {
            display: block;
            position: absolute;
            inset: 0;
            border: solid 0.14em var(--color0c);
            border-radius: var(--calendar-box-radius);
            content: "";
            pointer-events: none;
        }

        .calendar .day:before {
            position: absolute;
            top: var(--calendar-day-padding);
            left: var(--calendar-day-padding);
            z-index: 3;
            pointer-events: none;
            display: block;
            font-size: 1.25em;
            color: var(--color0b);
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0;
            content: "";
        }

        .calendar .day.d1:before {
            content: "01";
        }

        .calendar .day.d2:before {
            content: "02";
        }

        .calendar .day.d3:before {
            content: "03";
        }

        .calendar .day.d4:before {
            content: "04";
        }

        .calendar .day.d5:before {
            content: "05";
        }

        .calendar .day.d6:before {
            content: "06";
        }

        .calendar .day.d7:before {
            content: "07";
        }

        .calendar .day.d8:before {
            content: "08";
        }

        .calendar .day.d9:before {
            content: "09";
        }

        .calendar .day.d10:before {
            content: "10";
        }

        .calendar .day.d11:before {
            content: "11";
        }

        .calendar .day.d12:before {
            content: "12";
        }

        .calendar .day.d13:before {
            content: "13";
        }

        .calendar .day.d14:before {
            content: "14";
        }

        .calendar .day.d15:before {
            content: "15";
        }

        .calendar .day.d16:before {
            content: "16";
        }

        .calendar .day.d17:before {
            content: "17";
        }

        .calendar .day.d18:before {
            content: "18";
        }

        .calendar .day.d19:before {
            content: "19";
        }

        .calendar .day.d20:before {
            content: "20";
        }

        .calendar .day.d21:before {
            content: "21";
        }

        .calendar .day.d22:before {
            content: "22";
        }

        .calendar .day.d23:before {
            content: "23";
        }

        .calendar .day.d24:before {
            content: "24";
        }

        .calendar .day.d25:before {
            content: "25";
        }

        .calendar .day.d26:before {
            content: "26";
        }

        .calendar .day.d27:before {
            content: "27";
        }

        .calendar .day.d28:before {
            content: "28";
        }

        .calendar .day.d29:before {
            content: "29";
        }

        .calendar .day.d30:before {
            content: "30";
        }

        .calendar .day.d31:before {
            content: "31";
        }


        .calendar .day.prev-month:before,
        .calendar .day.next-month:before {
            opacity: 0.3;
        }

    .calendar .event {
        display: flex;
        width: 100%;
        height: var(--calendar-event-height);
        align-items: center;
        font-size: 0.7em;
        color: white;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        padding-inline: 0.6em;
        border-radius: var(--calendar-event-radius);
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        z-index: 2;
        transition: .2s ease-in-out;
    }

        .calendar .event.once:not(.middle):not(.end):before {
            display: block;
            width: 1em;
            height: 1em;
            margin-right: 0.25em;
            content: "";
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M234.6,33.5c6.6-18.9,9.8-28.3,14.7-30.9c4.2-2.3,9.2-2.3,13.4,0c4.8,2.6,8.1,12,14.7,30.9l43.3,124.7 c1.9,5.4,2.8,8.1,4.5,10.1c1.5,1.8,3.4,3.1,5.5,4c2.4,1,5.3,1,10.9,1.2l132,2.7c20,0.4,29.9,0.6,33.9,4.4c3.4,3.3,5,8.1,4.2,12.8 c-1,5.4-8.9,11.4-24.9,23.5l-105.2,79.7c-4.5,3.4-6.8,5.2-8.2,7.4c-1.2,2-1.9,4.2-2.1,6.5c-0.2,2.6,0.6,5.3,2.3,10.8L412,447.5 c5.8,19.1,8.7,28.7,6.3,33.6c-2.1,4.3-6.2,7.3-10.9,7.9c-5.5,0.7-13.7-5-30-16.4L269,397.3c-4.7-3.2-7-4.9-9.5-5.5 c-2.2-0.6-4.6-0.6-6.8,0c-2.5,0.6-4.9,2.3-9.5,5.5l-108.4,75.4c-16.4,11.4-24.6,17.1-30,16.4c-4.7-0.6-8.8-3.6-10.9,7.9 c-2.4-5,0.5-14.5,6.3-33.6l38.2-126.4c1.6-5.4,2.5-8.2,2.3-10.8c-0.2-2.3-0.9-4.5-2.1-6.5c-1.4-2.2-3.6-3.9-8.2-7.4L25.1,216.8 C9.2,204.7,1.3,198.7,0.3,193.3c-0.9-4.7,0.7-9.5,4.2-12.8c4-3.8,14-4,33.9-4.4l132-2.7c5.7-0.1,8.5-0.2,10.9-1.2 c2.1-0.9,4-2.2,5.5-4c1.7-2,2.6-4.7,4.5-10.1L234.6,33.5z' width='1' height='1' fill='white' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
        }

        .calendar .event:hover,
        .calendar .event.hover {
            filter: brightness(1.2);
        }

        .calendar .event.pos1 {
            grid-row: 2;
        }

        .calendar .event.pos2 {
            grid-row: 3;
        }

        .calendar .event.pos3 {
            grid-row: 4;
        }

        .calendar .event.pos4 {
            grid-row: 5;
        }


    .calendar .multiple-days {
        width: calc(100% + var(--calendar-day-padding));
        margin-right: calc(0px - var(--calendar-day-padding));
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        .calendar .multiple-days.end {
            color: transparent;
            width: calc(100% + var(--calendar-day-padding) + var(--calendar-gap));
            margin-inline: calc(0px - var(--calendar-day-padding) - var(--calendar-gap)) 0;
            border-radius: 0 var(--calendar-event-radius) var(--calendar-event-radius) 0;
        }

    .calendar .day:not(.first) .multiple-days.end:before {
        opacity: 0;
    }

    .calendar .multiple-days.middle {
        color: transparent;
        width: calc(100% + 2 * (var(--calendar-day-padding) + var(--calendar-gap)));
        margin-inline: calc(0px - var(--calendar-day-padding) - var(--calendar-gap));
        border-radius: 0;
    }

    .calendar .day.first .event.multiple-days.end {
        color: white;
        margin-inline: calc(0px - var(--calendar-day-padding)) 0;
        border-radius: 0 var(--calendar-event-radius) var(--calendar-event-radius) 0;
    }

    /* Zbytek CSS zůstává beze změny... */
    .calendar .event.farmarske-trhy {
        background: var(--color-farmarske-trhy);
    }

    .calendar .event.jarmarky {
        background: var(--color-jarmarky);
    }

    .calendar .event.vseobecne-trhy {
        background: var(--color-vseobecne-trhy);
    }

    .calendar .event.festivaly-vina {
        background: var(--color-festivaly-vina);
    }

    .calendar .event.craft-beer-festivaly {
        background: var(--color-craft-beer-festivaly);
    }

    .calendar .event.food-festivaly {
        background: var(--color-food-festivaly);
    }

    .calendar .utery {
        margin-left: calc(var(--calendar-day-width) + var(--calendar-gap));
    }

    .calendar .streda {
        margin-left: calc(2 * (var(--calendar-day-width) + var(--calendar-gap)));
    }

    .calendar .ctvrtek {
        margin-left: calc(3 * (var(--calendar-day-width) + var(--calendar-gap)));
    }

    .calendar .patek {
        margin-left: calc(4 * (var(--calendar-day-width) + var(--calendar-gap)));
    }

    .calendar .sobota {
        margin-left: calc(5 * (var(--calendar-day-width) + var(--calendar-gap)));
    }

    .calendar .nedele {
        margin-left: calc(6 * (var(--calendar-day-width) + var(--calendar-gap)));
    }

.legend                                         {display: flex; flex-wrap: wrap; gap: 0.6em 1.4em;}
.legend li                                      {width: auto; font-size: 0.85em; font-weight: 500; letter-spacing: 0; padding-left: 1.6em; position: relative;}
.legend li:before                               {display: block; width: 1.1em; height: 0.36em; border-radius: 0.18em; position: absolute; left: 0; top: 0.65em; content: "";}
.legend li.farmarske-trhy:before                {background: var(--color-farmarske-trhy);}
.legend li.jarmarky:before                      {background: var(--color-jarmarky);}
.legend li.vseobecne-trhy:before                {background: var(--color-vseobecne-trhy);}
.legend li.festivaly-vina:before                {background: var(--color-festivaly-vina);}
.legend li.craft-beer-festivaly:before          {background: var(--color-craft-beer-festivaly);}
.legend li.food-festivaly:before                {background: var(--color-food-festivaly);}
.legend li.once:before                          {width: 0.9em; height: 0.9em; left: 0.12em; top: 0.32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M234.6,33.5c6.6-18.9,9.8-28.3,14.7-30.9c4.2-2.3,9.2-2.3,13.4,0c4.8,2.6,8.1,12,14.7,30.9l43.3,124.7 c1.9,5.4,2.8,8.1,4.5,10.1c1.5,1.8,3.4,3.1,5.5,4c2.4,1,5.3,1,10.9,1.2l132,2.7c20,0.4,29.9,0.6,33.9,4.4c3.4,3.3,5,8.1,4.2,12.8 c-1,5.4-8.9,11.4-24.9,23.5l-105.2,79.7c-4.5,3.4-6.8,5.2-8.2,7.4c-1.2,2-1.9,4.2-2.1,6.5c-0.2,2.6,0.6,5.3,2.3,10.8L412,447.5 c5.8,19.1,8.7,28.7,6.3,33.6c-2.1,4.3-6.2,7.3-10.9,7.9c-5.5,0.7-13.7-5-30-16.4L269,397.3c-4.7-3.2-7-4.9-9.5-5.5 c-2.2-0.6-4.6-0.6-6.8,0c-2.5,0.6-4.9,2.3-9.5,5.5l-108.4,75.4c-16.4,11.4-24.6,17.1-30,16.4c-4.7-0.6-8.8-3.6-10.9-7.9 c-2.4-5,0.5-14.5,6.3-33.6l38.2-126.4c1.6-5.4,2.5-8.2,2.3-10.8c-0.2-2.3-0.9-4.5-2.1-6.5c-1.4-2.2-3.6-3.9-8.2-7.4L25.1,216.8 C9.2,204.7,1.3,198.7,0.3,193.3c-0.9-4.7,0.7-9.5,4.2-12.8c4-3.8,14-4,33.9-4.4l132-2.7c5.7-0.1,8.5-0.2,10.9-1.2 c2.1-0.9,4-2.2,5.5-4c1.7-2,2.6-4.7,4.5-10.1L234.6,33.5z' width='1' height='1' fill='black' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;}

.events-overview                                {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
.events-overview .event-type                    {width: 100%; gap: 0.7em; padding: var(--padding1); border-left: solid 0.25em transparent;}
.events-overview .event-type h2                 {font-size: min(calc(0.8em + 3vw), 2em);}

.event-type .place                              {display: flex; width: 100%; flex-wrap: wrap; gap: 0.25rem 0;}  
.event-type .place h3                           {display: block; width: 12rem; font-size: 1.15rem; position: relative; top: -0.08em;}
.event-type .place ul                           {display: flex; width: calc(100% - 12rem); flex-wrap: wrap; gap: 0.2em;}
.event-type .place ul li                        {display: block; width: auto;}
.event-type .place ul li a                      {display: flex; height: 1.6em; font-size: 0.85rem; color: white; letter-spacing: 0; font-weight: 500; line-height: 1; text-decoration: none; padding-inline: 0.6em; border-radius: 0.8em; padding-top: 0.2em; box-sizing: border-box; transition: .15s ease-in-out;}
.event-type .place ul li a:hover                {color: white !important; filter: brightness(1.2);}
  @media screen and (max-width: 768px)          {
  .event-type .place :is(h3, ul)                {width: 100%;}
  }

.event-type.farmarske-trhy                      {border-color: var(--color-farmarske-trhy);}
.event-type.farmarske-trhy li a                 {background: var(--color-farmarske-trhy);}
.event-type.jarmarky                            {border-color: var(--color-jarmarky);}
.event-type.jarmarky li a                       {background: var(--color-jarmarky);}
.event-type.vseobecne-trhy                      {border-color: var(--color-vseobecne-trhy);}
.event-type.vseobecne-trhy li a                 {background: var(--color-vseobecne-trhy);}
.event-type.festivaly-vina                      {border-color: var(--color-festivaly-vina);}
.event-type.festivaly-vina li a                 {background: var(--color-festivaly-vina);}
.event-type.food-festivaly                      {border-color: var(--color-food-festivaly);}
.event-type.food-festivaly li a                 {background: var(--color-food-festivaly);}
.event-type.craft-beer-festivaly                {border-color: var(--color-craft-beer-festivaly);}
.event-type.craft-beer-festivaly li a           {background: var(--color-craft-beer-festivaly);}

.how1                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem; position: relative; padding: 2em; box-sizing: border-box;}
.how1 .dashed                                   {position: absolute; inset: 0;}
.how1 .type                                     {display: block; width: 100%; font-size: 0.85em; line-height: 1.4; position: relative; z-index: 2;}
.how1 .type strong                              {display: block; font-size: 1.2em;}
.how1 .type a                                   {color: inherit; text-decoration: underline; white-space: nowrap; transition: .15s ease-in-out;}
.how1 .type a:hover                             {color: var(--color0c); text-decoration-color: transparent;}
.how1 .type .small                              {font-size: 0.8em;}
.how1 .type.food-festivaly strong               {color: var(--color-food-festivaly);}
.how1 .type.jarmarky strong                     {color: var(--color-jarmarky);}
.how1 .type.vseobecne-trhy strong               {color: var(--color-vseobecne-trhy);}
.how1 .type.farmarske-trhy strong               {color: var(--color-farmarske-trhy);}
  @media screen and (min-width: 1081px)         {
  .how1 .type                                   {width: calc(25% - 0.9rem);}
  }
  @media screen and (min-width: 441px) and (max-width: 1080px){
  .how1 .type                                   {width: calc(50% - 0.6rem);}
  }

.account-events                                 {display: flex; width: 100%; flex-wrap: wrap;}
.account-events h2                              {font-size: min(calc(0.8em + 3vw), 2em); padding-inline: var(--padding1); box-sizing: border-box; margin-bottom: 0.4em;}
.account-events h2:not(:first-of-type)          {margin-top: 0.8em;}
.account-events > div                           {display: flex; width: 100%; flex-wrap: wrap; padding: var(--padding1); box-sizing: border-box; position: relative;}
.account-events > div .dashed                   {position: absolute; inset: 0;}
.account-events .event                          {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem 0; position: relative; z-index: 2;}
.account-events .event:not(:first-of-type)      {padding-top: 0.6rem; margin-top: 0.6rem; border-top: solid 1px var(--color0c);}
.account-events .event > span                   {display: block; letter-spacing: 0; line-height: 1.3; box-sizing: border-box; position: relative;}
.account-events .event .title-date              {width: calc(100% - 26rem); font-weight: 700;}
.account-events .event .title-date a            {color: inherit; text-decoration: underline; line-height: 1.3; transition: .15s ease-in-out;}
.account-events .event .title-date a:hover      {color: var(--color0b); text-decoration-color: transparent;}
.account-events .event .title-date span         {display: block; font-size: 0.85em; font-weight: 400; line-height: 1.2;}
.account-events .event .item                    {width: 8rem; text-align: center;}
.account-events .event :is(.status, .note)      {width: 16rem; text-align: right;}
.account-events .status                         {font-weight: 500;}
.account-events .status span                    {display: block; font-size: 0.75em; font-weight: 400; font-style: italic; line-height: 1.25;}
.account-events .status .payment-details a      {color: var(--color0); text-decoration: underline; line-height: 1.1; cursor: pointer; transition: .15s ease-in-out;}
.account-events .status .payment-details a:hover{color: var(--color0b); text-decoration-color: transparent;}
.account-events .status.pending                 {color: #b29c3c;}
.account-events .status:is(.approved, .paid)    {color: #28b62f;}
.account-events .status:is(.denied, .to-pay)    {color: #a71d2f;}
.account-events .note                           {font-size: 0.8em; font-style: italic; line-height: 1.2; padding-right: 1.9em;}
.account-events .note .edit                     {display: block; width: 1.1em; height: 1.1em; position: absolute; top: calc(50% - 0.5em); right: 0; cursor: pointer;}
.account-events .note .edit svg                 {display: block; width: 100%; height: 1em; fill: var(--color0c); transition: .15s ease-in-out;}
.account-events .note .edit:hover svg           {fill: var(--color0b);}
  @media screen and (max-width: 768px)          {
  .account-events .event                        {align-items: flex-start;}
  .account-events .event .title-date            {width: calc(100% - 8rem);}
  .account-events .event .item                  {text-align: right;}
  .account-events .event :is(.status, .note)    {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 > .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, 7%) 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; letter-spacing: 0; margin-bottom: -0.3em;}
.wndw .wndw-content .title span                 {display: block; font-weight: 400;}
.wndw .wndw-content p                           {display: block; width: 100%; text-align: center; font-size: 0.8em; line-height: 1.4em;}
.wndw .wndw-content .form-item .element         {height: 5rem;}
.wndw .wndw-content .flex                       {align-items: center; gap: 0.5em; margin: 0;}
.wndw .wndw-content .button                     {font-size: 0.8em;}



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



.landing-rental > div                           {display: flex; width: 100%; max-width: 50rem; justify-content: center; padding: 2em; box-sizing: border-box; border-radius: var(--border-radius); overflow: hidden; position: relative; z-index: 1; container-type: inline-size;}



.landing-rental > div:before,



.landing-rental > div:after                     {display: block; background: url("images/reflector.webp") no-repeat left center; background-size: contain; position: absolute; z-index: 1; content: "";}



.landing-rental .inner                          {display: flex; max-width: 26rem; flex-direction: column; align-items: center; gap: 0.4em; font-size: 0.77em; position: relative; z-index: 2;}



.landing-rental :is(h2, p)                      {color: white; text-shadow: 0 0 0.5em black;}



.landing-rental h2 span                         {display: inline-block; padding-left: 0.38em; margin-left: 0.25em; position: relative;}



.landing-rental h2 span:before                  {display: block; height: 0.8em; border-left: dashed 0.06em white; position: absolute; left: 0; top: 0.21em; content: "";}



.landing-rental .button                         {margin-top: 0.9em;}



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



  .landing-rental > div:before,



  .landing-rental > div:after                   {width: 40%; height: 100%; top: 0;}



  .landing-rental > div:before                  {left: -1em;}



  .landing-rental > div:after                   {right: -1em; transform: rotateY(180deg);}



  }



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



  .landing-rental > div                         {padding-block: calc(3em + 8cqw) 3em;}



  .landing-rental > div:before,



  .landing-rental > div:after                   {width: calc(5em + 35cqw); aspect-ratio: 5/3; top: 1em; transform: rotateZ(70deg);}



  .landing-rental > div:before                  {right: calc(50cqw + 1em);}



  .landing-rental > div:after                   {left: calc(50cqw + 1em); transform: rotateY(180deg) rotateZ(70deg);}



  }