.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok {display: block; width: 100%;}
.embedBlok--audio { max-width: 660px; margin: 15px auto; }
.embedBlok--audio iframe { display: block; }

.in_website_hp { position: absolute; left: -9999px; opacity: 0; height: 0px; width: 0px; z-index: -1; }

.editor { padding:20px; }

    
body {
    display: block !important;
}

xx/*------------------------RESET---------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {

	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}

article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }

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



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

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



:root                                           {

                                                --font1:                 'erbaum', sans-serif; /* 200 - 500 */

                                                  --wrapper-side:          3vw;

                                                  --header:                4.5em;



                                                --border-radius0:        0.35rem;

                                                --border-radius1:        clamp(0.35rem, 2vw, 0.8rem);



                                                  --gap1:                   1rem;

                                                  --gap2:                   min(1.8rem, calc(0.8rem + 3vw));

                                                --article-gap:           1.6rem; 

                                                --gallery-gap:           0.6rem; 

                                                

                                                --color0:                #2B2321;

                                                --color0b:               #413633;

                                                --color1:                #6F483B;

                                                --color2:                #9D7A5C;

                                                --color3:                #D1CAB8;

                                                --color3b:               #F4ECD9;

                                                  

                                                --white-10:              rgba(255,255,255,0.1);

                                                --white-20:              rgba(255,255,255,0.2);

                                                --black-10:              rgba(0,0,0,0.1);

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

                                                --black-40:              rgba(0,0,0,0.4);

                                                --black-60:              rgba(0,0,0,0.6);

                                                --color-error:           #df0e3b;



                                                --header:                 min(8rem, calc(3rem + 5vw));



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

                                                --section-padding-lower:  calc(0.4 * var(--section-padding));

                                                --wrapper-width:          86vw;

                                                --wrapper-max:            70rem;

                                                --wrapper-thin-max:       42rem;

                                                --line-basic:             1.7;

                                                --line-headline:          1.35;  

                                                    

                                                --box-shadow:             0 0 1.2em black;

                                                --blur:                   blur(4px);



                                                --form-gap:                   1em;

                                                --form-items-gap:             0.8em;

                                                --form-item-height:           2.8em;

                                                --form-item-border:           solid 0.1em var(--white-20);

                                                --form-item-padding:          1em;

                                                }

                                               

html                                            {display: flex; width: 100%; height: 100%; font-size: clamp(13px, calc(10px + 1vw), 16px); font-weight: 300; color: var(--color3); background: var(--color0); letter-spacing: 0.04em; line-height: var(--line-basic); overflow-x: hidden; font-family: var(--font1);}

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

body.header-show                                {height: 100%; overflow: hidden;}

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

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

  html                                          {font-size: 18px;}

  }



form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}



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

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

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

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

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

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

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

  }



strong                                          {font-weight: 500;}

em                                              {font-style: italic;}



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



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

.header .wrapper                                {width: min(90vw, 86rem); max-width: unset; height: 100%; flex-direction: row; justify-content: space-between;}

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

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

.header .collapse                               {display: block;}

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

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

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

.header nav > ul > li                           {display: flex; align-items: center; transition: .15s ease-in-out;}

.header nav > ul > li > a                       {display: flex; align-items: center; color: var(--color3); font-weight: 400; line-height: 1; position: relative; box-sizing: border-box; cursor: pointer; transition: .25s ease-in-out;}

.header-elements                                {display: flex; align-items: center; gap: 1rem 0.5rem; position: relative; z-index: 2;}

.header .phone                                  {display: flex; align-items: center; gap: 0.4em; color: white; font-weight: 400; padding: 0.75em 1em 0.7em; border-radius: var(--border-radius0); box-sizing: border-box; transition: .15s ease-in-out;}

.header .phone img                              {display: block; height: 1.15em;}

.header .phone:hover                            {color: var(--color3b); background: var(--white-10);}

.header-soc                                     {display: flex;}

.header-soc a                                   {display: block; padding: 0.4em; border-radius: var(--border-radius0); box-sizing: border-box; margin-inline: -0.1em; transition: .15s ease-in-out;}

.header-soc a img                               {display: block; height: 1.1em;}

.header-soc a:hover                             {background: var(--white-10);}

.header .lang                                   {position: relative; --lang-size: 2rem;}

.header .lang ul                                {display: flex; align-items: center; gap: 0.3em; overflow: hidden;}

.header .lang ul li                             {display: block; box-sizing: border-box;}

.header .lang ul li a                           {width: var(--lang-size); aspect-ratio: 1; justify-content: center; color: white; text-decoration: none; background: transparent; border-radius: var(--border-radius0); padding-inline: 0;}

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

.header .lang ul li.sel                         {order: -1;}

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

  .header .wrapper                              {width: min(94vw, 82rem);}

  .header .collapse                             {flex-grow: 2;}

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

                                                {height: 100%; align-items: center;}

  .header nav                                   {flex-grow: 2;}

  .header nav > ul                              {justify-content: center;}

  .header nav > ul > li > a                     {height: 2.7em; font-size: 0.9em; padding-inline: min(1.1em, 1.2vw); border-radius: var(--border-radius0); margin-inline: -0.25em;}

  .header nav > ul > li > a:hover               {color: white;}

  .header nav > ul > li > a[aria-current="page"]{color: white; background: var(--white-10);}

  .header-elements                              {height: 100%;}

  .header .phone                                {font-size: 0.9em;}

  .header .button                               {font-size: 0.8em; padding: 0.75em 1.2em;}

  .header .lang                                 {display: block; height: var(--lang-size); overflow: hidden; position: relative; top: -0.1em; transition: .25s ease-in-out;}

  .header .lang .trigger                        {display: block; width: 100%; aspect-ratio: 1; border-radius: 100%; position: absolute; left: 0; top: 0; z-index: 3; cursor: pointer; transition: .25s ease-in-out;}

  .header .lang ul                              {flex-direction: column; overflow: hidden; padding: 0.45em; margin: -0.45em; border-radius: var(--border-radius0);}

  .header .lang ul li                           {cursor: pointer;}

  .header .lang ul li a                         {font-size: 0.9em;}

  .header .lang:has(.trigger.hover)             {overflow: visible;}

  .header .lang:has(.trigger.hover) ul          {height: auto; background: var(--white-10);}

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

  }

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

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

  .header #navicon span                         {display: block; width: calc(100% - 1em); height: 0.18em; background: var(--color3); position: absolute; left: 0.5em; transition: .15s ease-in-out;}

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

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

  .header #navicon span:nth-child(3)            {top: calc(50% - 0.09em);}

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

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

  .header #navicon:hover span                   {background: white;}

  .header:not(.show) #navicon span:nth-child(1) {left: 1em;}

  .header:not(.show) #navicon span:nth-child(4) {left: 0;}

  .header .logo                                 {order: 1;}

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

  .header .collapse .overflow                   {min-height: calc(100% - 8rem); width: 84vw; flex-direction: column; position: relative; margin: 4rem 8vw; box-sizing: border-box; transition: .35s ease-in-out;}

  .header nav > ul                              {flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 2.5em 0;}

  .header nav > ul > li                         {display: flex;}

  .header nav > ul > li > a                     {text-align: left; font-size: 1.25em;}

  .header nav > ul > li > a[aria-current="page"]{color: white; font-weight: 500;}

  .header-elements                              {flex-direction: column; align-items: flex-end; position: absolute; right: 0; top: 0;}

  .header .phone                                {font-size: 1.15em; margin-inline: -1em;}

  .header-soc                                   {font-size: 1.15em; margin-top: 0.5rem; position: relative; right: -0.34em;}

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

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

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

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

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

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

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

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

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

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

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

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

  }

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

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

  .header .phone                                {font-size: 1em;}

  .header .button                               {font-size: 0.75em;}

  }



.footer                                         {display: block; width: 100%; position: relative; z-index: 10; padding-block: calc(0.9 * var(--section-padding)) 1.2rem;}

.footer .bg-img                                 {height: 100%;}

.footer .bg-img div                             {background-image: linear-gradient(to right, transparent, var(--white-10), transparent);}

.footer :is(.upper, .bottom)                    {display: flex; width: 100%; justify-content: space-between; gap: calc(0.6 * var(--section-padding)) max(5%, 2rem);}

.footer .upper > div                            {display: flex; flex-direction: column; gap: var(--gap1);}

.footer .upper > div h2                         {font-size: 1.25em;}

.footer .upper > div:nth-child(1) p             {font-size: 0.75em;}

.footer .upper > div:nth-child(2)               {gap: 0;}

.footer .icon-contact                           {font-size: 0.85em; padding: 0.9em 1em;}

.footer .icon-contact:nth-child(2)              {margin-top: 0.3em; border-bottom: solid 1px var(--color3);}

.footer .upper > div:nth-child(3) p             {white-space: nowrap; font-size: 0.85em;}

.footer .upper > div:nth-child(3) p span        {display: inline-block; width: 6em;}

.footer .upper > div:nth-child(4)               {align-items: flex-end;}

.footer .upper > div:nth-child(4) .logo         {display: flex; width: 7em; position: relative; z-index: 2; transition: .5s ease-in-out;}

.footer .upper > div:nth-child(4) .logo img     {display: block; width: 100%;} 

.footer .upper > div:nth-child(4) p             {font-size: 0.75em;}

.footer .bottom                                 {margin-top: calc(0.4 * var(--section-padding));}

.footer .bottom ul                              {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1em 1.6em; font-size: 0.6em;}

.footer .bottom ul li                           {display: block; color: inherit;}

.footer .bottom ul li a                         {color: inherit; text-decoration: underline; transition: .25s ease-in-out;}

.footer .bottom ul li a:hover                   {color: var(--white-70); text-decoration-color: transparent;}

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

  .footer .upper > div:nth-child(1)             {width: 40em;}

  .footer .upper > div:nth-child(1) p           {text-align: left;}

  .footer .upper > div:nth-child(4) p           {text-align: right;}

  }

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

  .footer .upper                                {justify-content: center; flex-wrap: wrap;}

  .footer .upper > div:nth-child(1),

  .footer .upper > div:nth-child(4)             {width: 100%; align-items: center;}

  .footer .upper > div:nth-child(1) *,

  .footer .upper > div:nth-child(4) *           {max-width: 26rem; text-align: center;}

  .footer .upper > div:nth-child(3) h2          {text-align: center;}

  }



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



.section                                        {display: block; width: 100%; position: relative; padding-top: var(--section-padding); overflow: hidden;}

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

.section:last-child,

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

.section .wrapper > .button:last-child          {font-size: 0.8em; margin-top: var(--gap1);}

.section.padding-top-0                          {padding-top: 0;}



.main p, .main li                               {display: block; width: 100%; text-align: left; box-sizing: border-box; position: relative;}

.main p a, .main ul li a                        {color: inherit; text-decoration: underline; text-decoration-color: inherit; transition: .15s ease-in-out;}

.main p a:hover, .main ul li a:hover            {opacity: 0.9; text-decoration-color: transparent;}



ul.checks li                                    {padding-left: 1.55em;}

ul.checks li:before                             {width: 1.15em; height: 1.15em; background: url("images/icons/check-round-color3.svg") no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0.25em; content: "";}

ul.checks.centered                              {display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.2em;}

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

  ul.checks.centered li                         {width: auto;}

  }



h1, h2, h3                                      {display: block; width: 100%; color: white; font-weight: 300; line-height: var(--line-headline); box-sizing: border-box; font-family: var(--font1);}

h1                                              {font-size: min(calc(1.2em + 3vw), 3.4em);}

h2                                              {font-size: min(calc(1em + 3vw), 2.5em);}

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



.subheadline                                    {font-size: min(calc(0.6em + 3vw), 1.45em); font-weight: 500;}

h1 + .subheadline                               {margin-top: -1em;}

.subheadline:has(+ h2)                          {margin-bottom: -1em;}



.soc                                            {display: flex; gap: 0.5em;}

.soc a                                          {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; background: var(--color3); border-radius: 100%; transition: .15s ease-in-out;}

.soc a img                                      {display: block; width: 50%;}

.soc a:hover                                    {background: var(--color3b);}



.icon-contact                                   {display: flex; align-items: center; gap: 0.5em; color: inherit; font-weight: 400; white-space: nowrap; box-sizing: border-box; transition: .25s ease-in-out;}

.icon-contact span                              {display: flex; width: 1.5em; height: 1.5em; justify-content: center; align-items: center; background: var(--color3); border-radius: 100%; position: relative; top: -0.05em; flex-shrink: 0; transition: .15s ease-in-out;}

.icon-contact span img                          {display: block; height: 65%;}

.icon-contact:hover                             {color: var(--color3b);}

.icon-contact:hover span                        {background: var(--color3b);}

.icon-contact.place                             {background: var(--black-30); border-radius: var(--border-radius0);}



.icon                                           {display: flex; width: var(--icon-size); height: var(--icon-size); justify-content: center; align-items: center; font-weight: 700; background: var(--white-10); border-radius: 100%; position: relative; box-sizing: border-box; isolation: isolate; z-index: 2;}

.icon img                                       {display: block; width: auto; height: 44%;}

.icon.color3                                    {background: var(--color3) !important;}



.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em; background-image: linear-gradient(to right, transparent, var(--white-10), transparent); padding-block: 0.8em; margin-top: var(--gap1);}

.pagination a                                   {display: flex; width: 2.4em; aspect-ratio: 1; border-radius: 100%; justify-content: center; align-items: center; align-items: center; font-size: 0.8em; color: var(--color3); text-decoration: none; font-weight: 400; cursor: pointer; transition: .25s ease-in-out;}

.pagination a:hover                             {background: var(--white-10);}

.pagination a.sel                               {background: var(--color3); color: var(--color0);}                       



.submenu                                        {display: flex; width: 100vw; justify-content: center; margin-inline: calc(0.5 * var(--wrapper-width) - 50vw); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;

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

                                                 mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black calc(50vw - 0.5 * var(--wrapper-width)), black calc(100vw - 50vw + 0.5 * var(--wrapper-width)), transparent);

                                                }

.submenu nav                                    {display: flex; width: auto; max-width: calc(100% + 0.4em); margin-inline: -0.2em; flex-direction: row; margin: 0 !important; padding: 0 !important; box-sizing: border-box;}

.submenu nav::-webkit-scrollbar                 {display: none;}

.submenu nav div                                {display: flex; width: var(--submenu-item-width); padding: 0.2em 0.2em 0.5em; margin: 0; scroll-snap-align: start; box-sizing: border-box; flex-shrink: 0;}

.submenu nav div a                              {display: flex; width: 100%; justify-content: center; align-items: center; background: var(--white-10); border-radius: var(--border-radius0); font-size: 0.8em; color: var(--color3); text-decoration: none; font-weight: 400; padding: 0.75em 1em; backdrop-filter: var(--blur); box-sizing: border-box; cursor: pointer; transition: .25s ease-in-out;}

.submenu nav div a:hover                        {background: var(--white-20); cursor: pointer;}

.submenu nav div a.sel                          {background: var(--color1); color: var(--color1b);}

.submenu.w10em                                  {--submenu-item-width: 10em;}

.submenu.w12em                                  {--submenu-item-width: 12em;}

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

  .submenu                                      {width: 100%; margin-inline: 0; mask-image: none; -webkit-mask-image: none;}

  .submenu nav                                  {width: 100%; justify-content: center; flex-wrap: wrap;}

  .submenu nav div                              {padding: 0.2em;}

  .submenu nav div a                            {flex-direction: row;}

  }

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

  .submenu nav div:first-child                  {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-left: calc(50vw - 0.5 * var(--wrapper-width));}

  .submenu nav div:last-child                   {width: calc(50vw - 0.5 * var(--wrapper-width) + var(--submenu-item-width)); padding-right: calc(50vw - 0.5 * var(--wrapper-width));}

  }

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

  .submenu                                      {font-size: 0.9em;}

  }



.content                                        {display: flex; width: 100%; max-width: 50rem; flex-direction: column; align-items: center; gap: var(--article-gap); box-sizing: border-box;}

.content :is(h1, h2, h3, p)                     {text-align: center;}

.content h3                                     {margin-bottom: calc(-0.5 * var(--article-gap));}

.content p + p                                  {margin-top: calc(-0.5 * var(--gap2));}

.content .icon                                  {--icon-size: 5em; font-size: 1.4em;}

.content .large                                 {font-size: 1.15em;}

.content .info-box                              {width: auto; font-size: 1.15em; font-weight: 400; background: var(--white-10); padding: 0.6em 1em; border-radius: var(--border-radius0);}

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

.content:not(:first-child),

.content + *                                    {margin-top: var(--gap1);}

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

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

  }



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.5em; outline: none; cursor: pointer; font-size: min(0.85em, calc(0.5em + 1vw)); font-weight: 400; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; backdrop-filter: var(--blur); text-shadow: none !important; background: transparent; padding: 0.9em 1.5em; position: relative; outline: none; border: none; border-radius: var(--border-radius0); box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}

.button :is(img, svg)                           {display: block; height: 1.15em; width: auto;}

.button:hover                                   {transform: scale(0.98);}

.button.color0                                  {background: var(--color0); color: var(--color3);}

.button.color0 svg                              {fill: var(--color3);}

.button.color0:hover                            {background: var(--color0b);}

.button.color3                                  {background: var(--color3); color: var(--color0);}

.button.color3:hover                            {background: var(--color3b);}

.button.white10                                 {background: var(--white-10); color: var(--color3);}

.button.white10 svg                             {fill: var(--color3);}

.button.white10:hover                           {background: var(--white-20); color: var(--color3b);}

.button.white10:hover svg                       {fill: var(--color3b);}



.link                                           {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.link:hover                                     {opacity: 0.9; text-decoration-color: transparent;}



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



body > .bg-img                                  {position: fixed;}



.bg-img                                         {display: flex; width: 100%; height: min(50rem, calc(20rem + 50vw)); justify-content: center; position: absolute; inset: 0; overflow: hidden;}

.bg-img div                                     {display: block; width: clamp(60rem, 100vw, 100rem); height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;}

.bg-page div                                    {background-image: url("images/wall.webp"); transition: 1s ease-in-out;}

body.scroll .bg-page div                        {filter: var(--blur); opacity: 0.6;}



.img                                            {display: block; width: 100%; border-radius: var(--border-radius1); position: relative; overflow: hidden;}

.img span                                       {display: block; position: absolute; inset: 0; background: white;}

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

.img[href]:hover span img                       {opacity: 0.9;} 



.mask-block                                     {

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

                                                 mask-image: linear-gradient(to top, transparent, black 30%, black 70%, transparent);                                           

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

                                                }

.mask-inline                                    {display: block; background-repeat: no-repeat; background-size: cover; background-position: center center;

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

                                                 mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);

                                                }                                                



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

.hp .anim.zoom                                  {transform: translate(0) scale(0.85);}

.hp .anim.from-bottom                           {transform: translate(0, 3em);}

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





.section:has(.box)                              {overflow: visible;}



.box                                            {display: block; width: 100%; background: var(--color3); border-radius: var(--border-radius1); padding: 3em; box-sizing: border-box; box-shadow: var(--box-shadow); position: relative;}

.box:before                                     {display: block; position: absolute; inset: 0.8em; border: solid 0.15em var(--color2); border-radius: calc(0.5 * var(--border-radius1)); content: "";}

.box *                                          {text-align: center; color: var(--color0);}

.box .inner                                     {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); font-size: 0.9em; position: relative; z-index: 2;}

.box > h2:first-child                           {margin-top: -0.15em;}

.box .icon                                      {display: flex; width: 7em; height: 7em; justify-content: center; align-items: center; background: var(--color1); border-radius: 100%; border: solid 0.7em var(--color0); position: relative; margin-top: -7em;}

.box .icon:before                               {display: block; position: absolute; inset: 0.3em; border: solid 0.1em var(--color0); border-radius: 100%; content: "";}

.box .icon img                                  {display: block; width: 50%;}

.box ul.checks li:before                        {background-image: url("../Images/icons/check-round-color0.svg");}

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

  .box h2                                       {font-size: 2.2em;}

  }



.box:has(+ .box-soc)                            {padding-bottom: 4em;}



.box-soc                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) 0; margin-top: calc(-1.3em - var(--gap2)); position: relative; z-index: 3;}

.box-soc .soc a                                 {width: 2.6em; height: 2.6em; background: var(--color1); outline: solid 0.55em var(--color0);}

.box-soc .soc a:hover                           {background: var(--color2);}

.box-soc p                                      {display: block; width: 100%; text-align: center; font-size: 0.9em;}



.hero                                           {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 3rem 0;}

.hero :is(h1, p)                                {width: auto;}

.hero h1                                        {font-size: min(calc(1.2em + 3vw), 2.4em); margin-bottom: -0.2em;}

.hero .graphics                                 {display: block; width: min(100%, 40rem); margin-top: calc(-1 * (var(--section-padding) + var(--header) + var(--hero-mobile-margin) + 5rem)); aspect-ratio: 1; order: -1; position: relative; container-type: inline-size; --hero-mobile-margin: 0px;}

.hero .graphics .image                          {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; border: solid 3cqw var(--white-10); box-sizing: border-box;

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

                                                 mask-image: linear-gradient(to bottom, transparent 24%, black 65%);                                           

                                                 -webkit-mask-image: linear-gradient(to bottom, transparent 24%, black 65%);

                                                }

.hero .graphics .image img                      {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;}

.hero .graphics .image .elipse                  {width: 100%; height: 100%; left: 25%; bottom: -50%; border: solid 10cqw var(--color2); opacity: 0.3;}

.hero .graphics .elipse                         {display: flex; aspect-ratio: 1; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; box-sizing: border-box; position: absolute; box-shadow: var(--box-shadow);}

.hero .graphics .elipse.e1                      {width: 5%; background: var(--color2); left: 12%; bottom: 12%;}

.hero .graphics .elipse.e2                      {width: 19%; background: var(--color2); left: 40%; bottom: 0;}

.hero .graphics .elipse.e3                      {width: 36%; background: url("images/cfv-label.webp") no-repeat center center; background-size: contain; left: 48%; bottom: -3%;}

.hero .graphics .elipse.e4                      {width: 8em; font-size: 0.85em; background: var(--color1); left: 20%; bottom: 36%;}

.hero .graphics .elipse.e4 .icon                {display: block; height: 1.8em;}

.hero .graphics .elipse.e4 p                    {font-size: 1.3em;}

.hero .graphics .elipse.e4 a                    {font-size: 0.65em; color: var(--color3); font-weight: 400; text-decoration: underline; margin-top: 0.3em; transition: 0.15s ease-in-out;}

.hero .graphics .elipse.e4 a:hover              {color: var(--color2); text-decoration-color: transparent;}

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

  .hero                                         {flex-direction: row; justify-content: space-between; align-items: flex-end; margin-top: var(--header);}

  .hero .content                                {width: 24rem; align-items: flex-start; margin-bottom: 5em;}

  .hero :is(h1, p)                              {text-align: left;}

  .hero .graphics                               {width: calc(90% - 22rem); margin: -15% 0 0; order: 1;}

  .hero .graphics .image                        {width: 140%; height: 140%; position: absolute; left: 0; bottom: 0;}

  .hero .graphics .elipse.e2                    {left: 55%;}

  .hero .graphics .elipse.e3                    {left: 63%;}

  .hero .graphics .elipse.e4                    {left: 22%; bottom: 62%; font-size: 1em;}

  }

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

  .hero .graphics                               {width: 120vw; margin-inline: -10vw; --hero-mobile-margin: -3rem;}

  }



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

.text-cols p                                    {text-align: center;}

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

  .text-cols                                    {justify-content: space-between;}

  .text-cols p                                  {width: 47%; text-align: justify;}

  }



.image-text                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2.5em 0; position: relative;}

.image-text .image                              {display: block; position: relative;}

.image-text .photo                              {display: block; width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; container-type: inline-size;}

.image-text .photo span                         {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; border: solid 3cqw var(--white-10); box-sizing: border-box;}

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

.image-text .image:before,

.image-text .image:after,

.image-text .photo:before                       {display: block; aspect-ratio: 1; border-radius: 100%; box-sizing: border-box; position: absolute; content: "";}

.image-text .image:before                       {width: 68%; background: var(--color1); top: 1%; z-index: -1;}

.image-text .image:after                        {width: 8%; background: var(--color2); top: 12%;} 

.image-text .photo:before                       {width: 15%; background: var(--color2); bottom: 7%;}

.image-text .content h2                         {margin-block: 0 -0.2em;}

.image-text .content .buttons                   {flex-direction: column;}

.image-text .content .buttons .link             {font-size: min(0.9em, calc(0.5em + 1vw));}

.image-text.even .image:before                  {left: 0;}

.image-text.odd .image:before                   {right: 0;}

.image-text.even .image:after                   {right: 12%;}

.image-text.odd .image:after                    {left: 12%;}

.image-text.even .photo:before                  {right: 10%;}

.image-text.odd .photo:before                   {left: 10%;}

.image-text-group                               {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 5em 0;}

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

  .image-text-group .image-text                 {justify-content: space-between;}

  .image-text-group .image-text .image          {width: 48%;}

  .image-text-group .image-text .content        {width: 44%; align-items: flex-start;}

  .image-text-group .image-text .content *      {text-align: left;}

  .image-text-group .image-text .content h2     {font-size: 2em;}

  .image-text-group .image-text .content .buttons

                                                {flex-direction: row; justify-content: flex-start;}

  .image-text-group .image-text.odd             {flex-flow: row-reverse;}



  }

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

  .image-text-group .image-text .image          {width: 90%; max-width: 30rem;}

  }



.preview                                        {display: flex; width: 100%; flex-direction: column; flex-wrap: wrap; container-type: inline-size;}

.preview .img                                   {aspect-ratio: 3/2; border: solid 2.2cqw var(--white-10); box-sizing: border-box;}

.preview .teaser                                {display: flex; width: 100%; flex-direction: column; gap: 0.8em; box-sizing: border-box; padding: 1.5em 0.5em 0; container-type: inline-size;}

.preview .teaser span                           {display: block; width: 100%; text-align: left; box-sizing: border-box; position: relative;}

.preview .title                                 {font-size: clamp(1.2em, 7cqw, 1.4em); font-weight: 300; line-height: var(--line-headline); margin-top: -0.12em;}

.preview .title a                               {color: inherit; text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}

.preview .title a:hover                         {color: var(--color3b); text-decoration-color: inherit;}

.preview .text                                  {font-size: 0.8em;}

.preview .date                                  {font-size: 0.7em;}



.blog                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2.6em 0;}

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

  .blog .preview:nth-child(n+3)                 {flex-direction: row; justify-content: space-between; align-items: flex-start;}

  .blog .preview:nth-child(n+3) .img            {width: 36%;}  

  .blog .preview:nth-child(n+3) .teaser         {width: 60%; padding: 0; font-size: 0.9em;}  

  }

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

  .blog .preview                                {width: 48.5%;}

  }



.gallery-preview                                {display: flex; width: calc(100% + var(--gallery-gap)); justify-content: space-between; flex-wrap: wrap; gap: var(--gallery-gap); position: relative; margin-inline: calc(-0.5 * var(--gallery-preview-gap)); container-type: inline-size;}

.gallery-preview > div                          {display: block; width: 50%; aspect-ratio: 16/9; padding: calc(0.5 * var(--gallery-preview-gap)); position: absolute; box-sizing: border-box;}

.gallery-preview > div .img                     {aspect-ratio: 16/9; border: solid 0.8cqw var(--white-10); box-sizing: border-box;}

.gallery-preview > div:nth-child(3) .img        {height: 100%;}

.gallery-preview > div:nth-child(1)             {left: 0; top: 0;}  

.gallery-preview > div:nth-child(2)             {left: 0; bottom: 0;}  

.gallery-preview > div:nth-child(4)             {right: 0; top: 0;}  

.gallery-preview > div:nth-child(5)             {right: 0; bottom: 0;}  

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

  .gallery-preview                              {aspect-ratio: 21.5/9;}

  .gallery-preview > div                        {width: 36%;}

  .gallery-preview > div:nth-child(3)           {width: 28%; height: 100%; aspect-ratio: unset; left: 36%; top: 0;}  

  }

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

  .gallery-preview                              {aspect-ratio: 4/4.6;}

  .gallery-preview > div                        {width: 50%;}

  .gallery-preview > div:nth-child(3)           {width: 100%; left: 0; top: 25.6%;}  

  }



.article-styles                                 {gap: var(--article-gap);}

.article-styles :is(ul, ol)                     {display: block; padding: 0 0 0 1.2em; margin: -0.35em 0 0;}

.article-styles :is(ul li, ol li)               {padding-left: 1.8em; margin-top: 0.2em; position: relative; box-sizing: border-box;}

.article-styles li:before                       {display: block; position: absolute; content: "";}

.article-styles ul:not([class]) li:before       {width: 0.4em; height: 0.4em; top: 0.63em; left: 0; background: var(--color3); border-radius: 100%;}

.article-styles ol                              {list-style-type: none; counter-reset: li;}

.article-styles ol li                           {counter-increment: li;}

.article-styles ol li:before                    {font-weight: 400; top: 0; left: -0.025em; content: counter(li)".";}

.article-styles p + :is(ul, ol)                 {margin-top: -0.em;}



.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap);}

.article *                                      {text-align: left;}

.article h1                                     {font-size: min(2.5em, calc(0.8em + 4vw)); margin-top: 0 !important; text-wrap: unset;}

.article .date                                  {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; font-weight: 300; margin-top: -0.6em;}

.article .date img                              {display: block; height: 1em; position: relative; top: 0.08em;}

.article :is(h2, h3)                            {margin-block: 0.4em -0.1em;}

.article h2                                     {font-size: 1.75em;}

.article h3                                     {font-size: 1.4em; color: var(--color3);}

.article .image                                 {display: block; width: 100%; background: white; border-radius: var(--border-radius1); overflow: hidden;} 

.article .image span                            {display: block; width: 100%; transition: .15s ease-in-out;}

.article .image span img                        {display: block; width: 100%;}

.article .image:hover span                      {opacity: 0.8;}

.article .video-embed                           {display: block; width: 100%; aspect-ratio: 16/9;} 

.article .video-embed span                      {display: block; width: 100%; height: 100%;}

.article .video-embed span iframe               {display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: var(--frame); overflow: hidden;}

.article .quote                                 {padding-left: 3.3em; box-sizing: border-box; position: relative; padding-bottom: 1em; border-bottom: solid 0.12em var(--color1);}

.article .quote:after                           {display: block; width: 1.2em; height: 1.2em; position: absolute; left: 1.3em; top: .28em; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384,384c-17.67,0-32-14.33-32-32s14.33-32,32-32c35.29,0,64-28.71,64-64v-32h-76.85c-20.79,0-34.53,0-48.21-6.97-12.11-6.17-21.78-15.85-27.96-27.98-6.98-13.69-6.98-27.44-6.98-48.25v-57.6c0-20.82,0-34.57,6.98-48.26,6.18-12.12,15.85-21.79,27.97-27.97,13.68-6.97,27.44-6.97,48.26-6.97h57.6c20.81,0,34.55,0,48.25,6.98,12.13,6.18,21.8,15.85,27.98,27.96,6.97,13.68,6.97,27.42,6.97,48.21v172.85c0,70.58-57.42,128-128,128ZM352.62,161.54h0s0,0,0,0ZM352.35,159.65c3.88.35,11.44.35,18.8.35h76.85s0-76.85,0-76.85c0-7.36,0-14.92-.35-18.8-3.87-.35-11.46-.35-18.85-.35h-57.6c-7.38,0-14.97,0-18.85.35-.35,3.88-.35,11.47-.35,18.85v57.6c0,7.38,0,14.97.35,18.85ZM350.45,64.62s0,0,0,0c0,0,0,0,0,0ZM447.38,62.44h0s0,0,0,0ZM96,384c-17.67,0-32-14.33-32-32s14.33-32,32-32c35.29,0,64-28.71,64-64v-32h-76.85c-20.79,0-34.53,0-48.21-6.97-12.12-6.18-21.79-15.85-27.97-27.98-6.97-13.69-6.97-27.43-6.97-48.24v-57.6c0-20.82,0-34.57,6.98-48.26,6.17-12.12,15.85-21.79,27.97-27.96C48.63,0,62.38,0,83.2,0h57.6c20.81,0,34.55,0,48.25,6.98,12.13,6.18,21.81,15.85,27.98,27.96,6.97,13.68,6.97,27.42,6.97,48.21v172.85c0,70.58-57.42,128-128,128ZM64.62,161.54s0,0,0,0c0,0,0,0,0,0ZM64.35,159.65c3.88.35,11.44.35,18.8.35h76.85s0-76.85,0-76.85c0-7.36,0-14.92-.35-18.8-3.87-.35-11.46-.35-18.85-.35h-57.6c-7.38,0-14.97,0-18.85.35-.35,3.88-.35,11.47-.35,18.85v57.6c0,7.38,0,14.97.35,18.85ZM62.45,64.62s0,0,0,0c0,0,0,0,0,0ZM161.54,64.62s0,0,0,0c0,0,0,0,0,0ZM159.38,62.44h0s0,0,0,0Z' width='1' height='1' fill='rgb(255,204,51)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;}

.article .highlight,                             

.article .highlight2                            {display: flex; width: 100%; flex-direction: column; align-items: center; gap: calc(0.7 * var(--article-gap)); box-sizing: border-box; border-radius: var(--border-radius1); overflow: hidden; position: relative;}

.article .highlight > *,

.article .highlight2 > *                        {text-align: center; position: relative; z-index: 2;}

.article .highlight > *:first-child,

.article .highlight2 > *:first-child            {margin-top: 0;}

.article .highlight                             {background: var(--color0b); padding: 2.8em; margin-block: 0.3rem;}

.article .highlight:before,

.article .highlight:after                       {display: block; aspect-ratio: 1; background: var(--color1); opacity: 0.6; border-radius: 100%; position: absolute; z-index: 1; content: "";}

.article .highlight:before                      {width: 70%; left: -40%; top: 25%;}

.article .highlight:after                       {width: 100%; right: -70%; bottom: -15%;}

.article .highlight :is(h2, h3)                 {color: white;}

.article .highlight .button                     {font-size: 0.8em; margin-top: 0.15em;}

.article .highlight2                            {background: var(--color1); padding: 2em;}

.article .highlight2:before                     {display: block; width: 80%; aspect-ratio: 1; background: var(--color2); opacity: 0.6; border-radius: 100%; position: absolute; right: -40%; bottom: -30%; z-index: 1; content: "";}

.article .highlight2 .soc                       {font-size: 1.25em;}

.article .embed                                 {display: block; width: 100%; border-radius: 1em; overflow: hidden;}

.article .embed > *                             {display: block; width: 100%;}

.article .preview                               {background: var(--white-10); border-radius: var(--border-radius1);}

.article .preview .img                          {border: none;}

.article .preview .teaser                       {padding: 1.5em;}

.article .grid-gallery                          {--grid-gallery-count: 3;}

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

  .article .carousel-gallery .swiper-slide      {width: calc(100% / 3);}

  .article .grid-gallery                        {--grid-gallery-count: 4;}

  }

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

  .article :is(.image)                          {width: 112%; margin-inline: -6%;}

  }

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

  .article .preview                             {flex-direction: row;}

  .article .preview .img                        {width: 27%;}

  .article .preview .teaser                     {width: 70%;}

  .article .preview-blog .title                 {font-size: 3.6cqw;}

  .article .preview .date                       {font-size: 0.7em; margin-top: 0;}

  .article .highlight2                          {flex-direction: row; justify-content: space-between;}

  .article .highlight2 > *                      {width: auto; text-align: left;}

  }

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

  .article .grid-gallery                        {--grid-gallery-count: 2;}

  }



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

.swiper-slide > *                               {width: 100%;}



.swiper-button                                  {display: flex; width: var(--swiper-button-size); height: var(--swiper-button-size); --swiper-button-size: 2.8em; justify-content: center; align-items: center; background: var(--color3); position: absolute; top: calc(50% - 0.5 * var(--swiper-button-size)); z-index: 5; margin: 0; border-radius: 100%; box-sizing: border-box; box-shadow: 0 0 0.8em var(--black-60); cursor: pointer; transition: .35s ease-in-out;} 

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

.swiper-button-next                             {left: auto;}                                 

.swiper-button img                              {display: block; height: 30%;}

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

.swiper-button:hover                            {background: var(--color3b);}

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

.swiper-buttons-edges .swiper-button            {width: calc(0.5 * var(--swiper-button-size)); height: var(--swiper-button-size); padding-left: 0.2em; border-radius: calc(50% - 0.5 * var(--swiper-button-size)) 0 0 calc(50% - 0.5 * var(--swiper-button-size));}

.swiper-buttons-edges .swiper-button-prev       {left: 0 !important;}

.swiper-buttons-edges .swiper-button-next       {right: 0 !important;}



.section:has(.carousel)                         {overflow: hidden;}



.carousel                                       {display: block; width: calc(100% + var(--slides-gap)); margin-inline: calc(-0.5 * var(--slides-gap)); position: relative; box-sizing: border-box; --slides-gap: 0.6rem;}

.carousel-inner                                 {display: block; width: 100%; box-sizing: border-box; overflow: hidden;}

.carousel .swiper                               {display: block; width: 100%; box-sizing: border-box; overflow: visible;}

.carousel .swiper-slide                         {padding: calc(0.5 * var(--slides-gap));}



.carousel-gallery .swiper-slide                 {width: 50%;}

.carousel-gallery .img                          {padding-top: 75%;}

.carousel-gallery .swiper-button-prev           {left: calc(0.5 * var(--slides-gap) - 0.5 * var(--swiper-button-size));}

.carousel-gallery .swiper-button-next           {right: calc(0.5 * var(--slides-gap) - 0.5 * var(--swiper-button-size));}

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

  .carousel-gallery                             {--carousel-edge: calc(50vw - 0.5 * var(--wrapper-width));}

  .carousel-gallery .carousel-inner             {width: calc(100% + 2 * var(--carousel-edge)); margin-inline: calc(-1 * var(--carousel-edge)); padding-inline: var(--carousel-edge);

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

                                                 mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent);  

  }

  .carousel-gallery .swiper-button              {font-size: 1.2em; padding-right: 1.2em; border-radius: var(--swiper-button-size);}

  .carousel-gallery .swiper-button-prev         {left: calc(-50vw + 50% - (0.5 * var(--swiper-button-size)));}

  .carousel-gallery .swiper-button-next         {right: calc(-50vw + 50% - (0.5 * var(--swiper-button-size)));}

  }

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

  .carousel-gallery .swiper                     {overflow: visible !important;}



  }



.grid-gallery                                   {display: flex; width: calc(100% + var(--grid-gallery-gap)); justify-content: space-between; flex-wrap: wrap; --grid-gallery-gap: 0.6rem; position: relative; margin-inline: calc(-0.5 * var(--grid-gallery-gap)); container-type: inline-size;}

.grid-gallery > div                             {display: block; width: calc(100% / var(--grid-gallery-count)); padding: calc(0.5 * var(--grid-gallery-gap)); box-sizing: border-box;}

.grid-gallery > div .img                        {aspect-ratio: 4/3;}



.menu                                           {display: flex; width: 100%; flex-direction: column; gap: var(--gap2); padding: min(6em, calc(1em + 5vw));}

.menu .inner                                    {flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap2);}

.menu .group                                    {display: flex; width: 100%; flex-direction: column; gap: var(--gap1); padding-bottom: var(--gap2); border-bottom: solid 1px var(--color2);}

.menu .subject                                  {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1) 1.7em;}

.menu .subject *                                {text-align: center;}

.menu .subject .logo                            {display: block; width: 6em; aspect-ratio: 1; flex-shrink: 0; background: white; padding: 0.8em; border-radius: var(--border-radius0); box-sizing: border-box; box-shadow: 0 0 0.6em var(--black-10);}

.menu .subject .logo img                        {display: block; width: 100%; height: 100%; object-fit: contain;}

.menu .subject .info                            {display: flex; flex-direction: column; align-items: center; }

.menu .subject .info h3                         {font-size: 1.7em; font-weight: 400; margin-bottom: 0.15em;}

.menu .subject .info p span                     {white-space: nowrap;}

.menu table                                     {width: 100%; border-collapse: collapse;}

.menu th                                        {font-size: 0.85em; padding-bottom: 0.8em;}

.menu td                                        {text-align: left; vertical-align: top; line-height: var(--line-headline); padding-block: 0.15em; box-sizing: border-box;}

.menu :is(th, td):not(:last-child)              {padding-right: 1rem;}

.menu tr:first-child td                         {padding-top: 0;}

.menu tr:last-child td                          {padding-bottom: 0;}

.menu :is(th, td):nth-child(n+2)                {text-align: right;}

.menu :is(th, td):nth-child(n+3)                {width: 3.8em;}

.menu td .note                                  {display: block; text-align: left; font-size: 0.8em; line-height: 1.5; margin-top: 0.2em;}

.menu td img                                    {display: block; height: 0.9em; position: relative; top: 0.22em;}

.menu-info                                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.6em; margin-top: var(--gap1);}

.menu-info p                                    {font-size: 0.9em; line-height: var(--line-headline); text-align: center;}

.menu-info p.large                              {font-size: 1.1em;}

.menu.wine-list td                              {padding-block: 1em;}

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

  .menu .group                                  {width: 47%;}

  .menu h3                                      {text-align: left;}

  }

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

  .menu .subject                                {flex-direction: row;}

  .menu .subject *                              {text-align: left;}

  .menu .subject .info p span:not(:last-child)::after

                                                {display: inline-block; font-size: 1.15em; margin-left: 0.3em; content: "•";}

  }

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

  .menu .subject .info p                        {margin-top: 0.3em;}

  .menu .subject .info p span                   {display: block; width: 100%;}

  }

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

  .menu.wine-list tr:not(:last-child) td        {border-bottom: solid 1px var(--color2);}

  }

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

  .menu                                         {font-size: 0.9em;}

  .menu thead                                   {display: none;}

  .menu :is(table, tbody, tr)                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}

  .menu table td                                {width: 100%; padding-inline: 0 !important;}

  .menu table td:first-child                    {padding-bottom: 0.45em !important;}

  .menu table *                                 {text-align: center !important;}

  .menu.wine-list td:nth-child(2):not(:has(> img))  

                                                {display: none;}

  .menu.wine-list tr:not(:last-child)           {border-bottom: solid 1px var(--color2);}  

  .menu:not(.wine-list) tbody                   {gap: 1em;}                                    

  }



.gallery                                        {display: flex; width: calc(100% + var(--gallery-gap)); flex-direction: column; gap: var(--gallery-gap); margin-inline: calc(-0.5 * var(--gallery-gap)); container-type: inline-size;}

.gallery .layout                                {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; position: relative;}

.gallery .layout > div                          {display: block; width: calc(100% / 3 * var(--row-span)); padding: calc(0.5 * var(--gallery-gap)); position: relative; box-sizing: border-box;}

.gallery .layout > div .img                     {height: 100%; border: solid 0.8cqw var(--white-10); box-sizing: border-box;}



.gallery .layout.i4 > div:nth-child(1)          {--row-span: 1; aspect-ratio: 9/15.23;}

.gallery .layout.i4 > div:nth-child(2)          {--row-span: 2; aspect-ratio: 16/9;}

.gallery .layout.i4 > div:nth-child(3)          {--row-span: 1; aspect-ratio: 16/9; position: absolute; bottom: 0; left: 33.33%}

.gallery .layout.i4 > div:nth-child(4)          {--row-span: 1; aspect-ratio: 16/9; position: absolute; bottom: 0; right: 0;}



.gallery .layout.i6 > div:nth-child(1)          {--row-span: 2; aspect-ratio: 16/9;}

.gallery .layout.i6 > div:nth-child(2)          {--row-span: 1; aspect-ratio: 9/15.23;}

.gallery .layout.i6 > div:nth-child(3)          {--row-span: 1; aspect-ratio: 9/15.23; margin-top: -19%;}

.gallery .layout.i6 > div:nth-child(4)          {--row-span: 1; aspect-ratio: 9/15.23; margin-top: -19%;}

.gallery .layout.i6 > div:nth-child(5)          {--row-span: 1; aspect-ratio: 16/9;}

.gallery .layout.i6 > div:nth-child(6)          {--row-span: 1; aspect-ratio: 16/9; position: absolute; bottom: 0; right: 0;}



.gallery .layout.i3 > div:nth-child(1)          {--row-span: 1; aspect-ratio: 16/9;}

.gallery .layout.i3 > div:nth-child(2)          {--row-span: 1; aspect-ratio: 16/9; position: absolute; bottom: 0; left: 0;}

.gallery .layout.i3 > div:nth-child(3)          {--row-span: 2; aspect-ratio: 16/9;}



.infographics                                   {display: flex; width: calc(100% + 1rem); margin: -0.5rem; justify-content: center; flex-wrap: wrap;}

.infographics > div                             {display: flex; width: 100%; padding: 0.5rem; box-sizing: border-box;}

.infographics .inner                            {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); background: var(--white-10); padding: 2em; box-sizing: border-box; border-radius: var(--border-radius1);}

.infographics .icon                             {width: 7em; height: 7em; background: var(--black-30);}

.infographics p                                 {text-align: center; font-size: 0.8em;}

.infographics .title                            {font-size: 1.1em; font-weight: 500; line-height: var(--line-headline); margin-bottom: -0.3em;}

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

  .infographics > div                           {width: 25%;}

  }

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

  .infographics > div                           {width: 50%;}

  }



.cols                                           {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--section-padding-lower) 0;}

.cols .checks                                   {display: flex; width: 100%; flex-direction: column; font-size: 0.85em; padding: 0;}

.cols .icon-contacts                            {display: flex; width: 100%; flex-direction: column; gap: 0.4em;}

.cols .icon-contact                             {width: auto;}

.cols .place                                    {padding: 0.9em 1.3em; background: var(--white-10);}

.cols .place:first-child                        {margin-block: var(--gap1) var(--gap2);}

.cols .place:last-child                         {margin-block: var(--gap2) var(--gap1);}

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

  .cols                                         {flex-direction: row; justify-content: space-between; align-items: flex-start;}

  .cols > *:first-child                         {width: 40%;}

  .cols > *:last-child                          {width: 50%; margin: 0;}

  .cols .content                                {align-items: flex-start;}

  .cols .content *                              {text-align: left;}

  .cols .icon-contacts                          {align-items: flex-start;}

  }

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

  .cols .icon-contact.place                     {width: 100%; justify-content: center;}

  }

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

  .cols :is(ul, .icon-contacts)                 {width: 100%; max-width: 36rem; flex-direction: row; justify-content: space-between; flex-wrap: wrap;}                          

  .cols :is(li, .icon-contact:not(.place))      {width: 47%;}

  }

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

  .cols :is(ul, .icon-contacts)                 {align-items: center;}                          

  }



input, textarea, .custom-select-trigger         {color: white; font-weight: 400; background: transparent; border: none; outline: none; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}



input[type="date"]                              {background-image: url("images/icons/calendar-color3.svg"); background-repeat: no-repeat; background-position: right 1em center; background-size: auto 1em;}

input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-clear-button        {opacity: 0;}

input[type="date"]::-webkit-calendar-picker-indicator

                                                {opacity: 0;}



.custom-select-wrapper                          {display: block; width: 100%; height: 100%; padding: 0 !important; z-index: unset !important;}

.custom-select-wrapper select                   {position: absolute !important; left: -9999px; top: 0;}

.custom-select-wrapper .custom-select           {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;}

.custom-select-trigger                          {display: flex; width: 100%; height: 100%; align-items: center; color: var(--color2); font-weight: 300; position: absolute; inset: 0; padding-right: 2em !important; box-sizing: border-box; transition: .15s ease-in-out;}

.custom-select-trigger:after                    {display: block; width: 0.55em; height: 100%; opacity: 0.9; position: absolute; right: 1.2em; top: 0; content: ""; background: url("images/icons/chevron-color3.svg") no-repeat center center; background-size: contain; transform: rotate(90deg); transition: .2s ease-in-out;}

.custom-select-trigger.chosen                   {color: white; font-weight: 400;}

.custom-options                                 {display: none; width: 100%; max-height: 15em; background: var(--black-60); backdrop-filter: blur(3px); position: absolute; left: 0; top: calc(100% + 0.4em); border-radius: var(--border-radius0); border: solid 1px var(--white-20); box-sizing: border-box; overflow-y: auto; z-index: 100;}

.custom-option                                  {display: flex; width: 100%; align-items: center; gap: 0.4em; text-align: left; font-size: 0.85em; padding: 0.6em 1em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}

.custom-option:hover                            {background: var(--white-10); color: white;}

.custom-option.selected                         {color: var(--color0); background: var(--color3);}

.custom-select-trigger.show:after               {transform: rotate(-90deg);}



.checkboxes                                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.75em 0; box-sizing: border-box;}

.checkbox                                       {display: block; width: 100%; position: relative;}



.chk1:not(:checked),

.chk1:checked                                   {position: absolute; left: -9999px; top: 0;}

.chk1:not(:checked) + label,   

.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.35; padding-inline-start: 1.5em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}

.chk1:not(:checked) + label:hover               {color: var(--color3);}

.chk1:checked + label                           {color: white;}

.chk1:not(:checked) + label:before,

.chk1:checked + label:before                    {display: block; width: 1em; height: 1em; background-color: var(--color2); border-radius: 0.2em; position: absolute; left: 0; top: 0.15em; overflow: hidden; border: solid 0.1em var(--color0-300); box-sizing: border-box; content: "";}

.chk1:checked + label:before                    {background: URL('images/icons/check-color0.svg') no-repeat center center, var(--color3); background-size: 100% 100%; border-color: var(--color2);}



.form                                           {display: flex; max-width: 40rem; flex-direction: column; flex-wrap: wrap; gap: var(--gap1); background: var(--white-10); padding: min(4em, calc(1em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1);}



.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 1em var(--form-items-gap);}

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

  .form-items .w50-100                          {width: calc(50% - 0.5 * var(--form-items-gap));}

  }



.form-item                                      {display: block; width: 100%; text-transform: none;}

.form-item > label                              {display: block; font-size: 0.8em; font-weight: 400; color: var(--color3); padding: 0 0.8em 0.7em; box-sizing: border-box;}

.form-item .element                             {display: block; width: 100%; height: var(--form-item-height); background: var(--black-40); border-radius: var(--border-radius0); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}

.form-item .element :is(input, textarea, .custom-select-trigger)

                                                {width: 100%; height: 100%; font-size: 0.9em; padding: 0.3em 1em;}

.form-item .element:has(textarea)               {height: 8em;}

.form-item .element textarea                    {padding-block: 0.9em !important;}

.form-item .element:focus-within                {background: var(--black-60);}

.form-item .checkboxes                          {font-size: 0.8em; padding: 1.5em; border-radius: var(--border-radius1); border: solid 0.1em var(--color2);}

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

  .form-item .checkboxes .checkbox              {width: 60%;}

  .form-item .checkboxes .checkbox:nth-child(1) {order: 0;}

  .form-item .checkboxes .checkbox:nth-child(2) {order: 2;}

  .form-item .checkboxes .checkbox:nth-child(3) {order: 1; width: 36%;}

  .form-item .checkboxes .checkbox:nth-child(4) {order: 3; width: 36%;}

  .form-item .checkboxes .checkbox:nth-child(5) {order: 4;}

  }



.form-item-error                                {display: block; width: 100%; font-size: 0.65em; color: white; font-weight: 400; padding: 0.4em 1em 0.43em; border-radius: var(--border-radius0); box-sizing: border-box; margin-top: 0.5em; position: relative; overflow: hidden; isolation: isolate;}

.form-item-error:before                         {display: block; position: absolute; inset: 0; background: var(--color-error); opacity: 0.5; content: ""; z-index: -1;}



.form .send                                     {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 1.2em;}

.form .send span                                {display: block; font-size: 0.75em; color: var(--white-70);}

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

.form .send .button                             {width: 100%;}



.opening                                        {display: block; width: 20em;}

.opening p                                      {text-align: left; font-size: 0.85em; padding-block: 0.45em; margin: 0 !important;}

.opening p:not(:first-child)                    {border-top: solid 1px var(--color1);}

.opening p:last-child                           {padding-bottom: 0;}

.opening p span                                 {display: inline-block; width: 50%;}



.owner                                          {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap; gap: 1.5em 1.5em;}

.owner p                                        {font-size: 0.85em;}

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

  .owner                                        {flex-direction: row;}

  .owner p                                      {width: auto; text-align: left;}  

  }



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

.map #map                                       {display: block; width: 100vw; height: 30rem; margin-inline: calc(50% - 50vw);}

.map .photos                                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0; margin-top: -5rem;}

.map .photos > div                              {display: flex; width: 48%; flex-direction: column; align-items: center; gap: var(--gap1);}

.map .photos > div a                            {width: 100; aspect-ratio: 4/3;}

.map .photos > div p                            {text-align: center; font-size: 0.8em;}

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

  .map #map                                     {width: 1600px; margin-inline: calc(50% - 800px);}

  }

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

  .map #map                                     {mask: none; -webkit-mask: none;}

  }

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

  .map .photos > div                            {width: 23.5%;}

  }



.booking                                        {display: block; width: 100%; background: var(--color3); border-radius: var(--border-radius1); overflow: hidden; position: relative;}

.booking iframe                                 {display: block; width: 100%; min-height: 26rem;}