.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; }
.chyba span { width:100%; display:block; }
.embedBlok {display: block; width: 100%;}


.news-detail            { padding:20px; }
#in_message { 
    position: absolute;
    left: -9999em;
    top: 0;
}

body                                            { display: block !important; }

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

html                                            {display: block; width: 100%; font-size: min(18px, calc(11px + 1vw)); font-weight: 500; color: var(--color0); line-height: 1.55; background: rgb(245,245,245); overflow-x: hidden; font-family: var(--font1);}
body                                            {display: block; width: 100%;}
body.fixed                                      {overflow: hidden;}
body.fixed :is(.header .logo, .main, .footer)   {filter: blur(2px); opacity: 0.5;}
  @media screen and (min-width: 1800px)         {
  body                                          {max-width: 1700px; margin-inline: auto;}
  }

form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}
.wrapper                                        {display: flex; width: min(70rem, calc(100% - 2 * var(--wrapper-side))); --wrapper-side: 3vw; flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;}
  @media screen and (min-width: 1081px)         {
  .wrapper.w2                                   {max-width: 65rem;}
  .wrapper.w3                                   {max-width: 55rem;}
  .wrapper.w4                                   {max-width: 45rem;}
  }
  @media screen and (max-width: 1080px)         {
  .wrapper                                      {max-width: 52rem; --wrapper-side: 5vw;} 
  }

:root                                           {
                                                --font1:            'brevia', sans-serif; /* 500, 600, 700 */
                                                --font2:            'snicker', sans-serif; /* 700 */

                                                --color0:         black;
                                                --color0b:        rgb(50,50,50);
                                                --color1:         rgb(37,107,247);
                                                --color1b:        rgb(21,85,212);
                                                --color2:         rgb(224,60,35);
                                                --color2b:        rgb(194,45,22);
                                                --color3:         rgb(255,204,0);
                                                --color3b:        rgb(235,184,0);

                                                --header-height:    5rem;
                                                --border-radius:    0.8em;

                                                --section-gap:      min(calc(1rem + 5vw), 3rem);

                                                --cols-gap:         10%;
                                                --form-gap:         0.8rem;
                                                --form-item-height:     3.4rem;
                                                --form-item-min-height: 3.4rem;
}

.hp .header                                             {position: absolute; left: 0; top: 0;}

.header                                                 {display: block; width: 100%; height: var(--header-height); font-size: 1rem; position: relative; z-index: 1000;}
.header > .wrapper                                      {height: 100%; justify-content: space-between; align-items: center; border-bottom: solid 1px rgba(0,0,0,0.25);}
.header .logo                                           {display: block; width: 16em; transition: .15s ease-in-out;}
.header .logo img                                       {display: block; width: 100%;}
.header .overflow                                       {display: block; width: 100%;}
.header nav                                             {display: block; box-sizing: border-box;}
.header nav > ul                                        {display: flex; width: 100%; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
.header nav > ul > li                                   {display: flex; align-items: center; flex-wrap: wrap; position: relative;}
.header nav > ul > li > a                               {color: var(--color0); font-weight: 500; line-height: 1; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}
.header nav > ul > li > ul > li > a                     {display: flex; justify-content: space-between; align-items: center; gap: 0.6em; color: var(--color0); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}


.header nav ul li img  { width:25px; }

.header .button                                         {padding: 0 1em; --button-height: 2.6em;}
.header .button svg                                     {width: 1em; height: 1em;}
  @media screen and (min-width: 1081px)                 {
  .header nav                                           {height: 100%; flex-grow: 2;}
  .header nav > ul                                      {height: 100%; justify-content: center; gap: 4%;}
  .header nav > ul > li                                 {height: 100%;}
  .header nav > ul > li > a                             {display: flex; height: 100%; align-items: center; font-size: 0.95em; color: var(--color0); opacity: 0.6; border-top: dotted 4px transparent; border-bottom: dotted 4px transparent; position: relative; top: 2px;}
  .header nav > ul > li > a:hover                       {opacity: 1; color: var(--color2);}
  .header nav > ul > li:has(*[aria-current="page"]) > a {opacity: 1; font-weight: 700; border-bottom-color: var(--color2);}
  .header nav > ul > li:has(ul) > a:after               {display: block; width: 0.54em; height: 0.54em; position: absolute; left: calc(50% - 0.27em); bottom: 1.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 295'%3E%3Cpath d='M50.5,0c11.4,0,22.7,4.3,31.4,13L256,187.2L430.2,13c17.3-17.3,45.4-17.3,62.7,0c17.3,17.3,17.3,45.4,0,62.7L287.4,281.3 c-17.3,17.3-45.4,17.3-62.7,0L19.1,75.7C1.8,58.4,1.8,30.3,19.1,13C27.7,4.3,39.1,0,50.5,0z' fill='black' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; content: ""; transition: .25s ease-in-out;}
  .header nav > ul > li > ul                            {display: none; width: 11.8em; background: var(--color1); border-radius: 0.2em; position: absolute; left: -1em; top: calc(var(--header-height) - 0.4em); z-index: 20; border-radius: 0.3em; box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.25); overflow: hidden;}
  .header nav > ul > li > ul > li                       {display: block; border-bottom: dotted 3px rgba(0,0,0,0.5);}
  .header nav > ul > li > ul > li:last-child            {border: none;}
  .header nav > ul > li > ul > li > a                   {font-size: 0.8em; color: white; padding: 0.9em 1.5em 0.9em 1em;}
  .header nav > ul > li > ul > li > a:after             {display: block; width: 0.55em; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 295'%3E%3Cpath d='M50.5,0c11.4,0,22.7,4.3,31.4,13L256,187.2L430.2,13c17.3-17.3,45.4-17.3,62.7,0c17.3,17.3,17.3,45.4,0,62.7L287.4,281.3 c-17.3,17.3-45.4,17.3-62.7,0L19.1,75.7C1.8,58.4,1.8,30.3,19.1,13C27.7,4.3,39.1,0,50.5,0z' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; right: 0.8em; top: 0; content: ""; transform: rotate(-90deg); transition: .25s ease-in-out;}
  .header nav > ul > li > ul > li > a:hover             {background: var(--color1b);}
  .header :is(#navicon, #close)                         {display: none;}
  }
  @media screen and (max-width: 1080px)                 {
  .header .button                                       {font-size: 0.9em; position: absolute; top: calc(50% - 0.5 * var(--button-height)); right: 2.4rem;}
  .header #navicon                                      {display: block; width: 1.4em; height: 17px; cursor: pointer; position: relative; z-index: 1;}
  .header #navicon span                                 {display: block; width: 100%; height: 2px; background: var(--color0); position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header #navicon:hover span                           {background: var(--color1);}
  .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: 20em; height: 100%; background: var(--color1);padding-top: 4em; overflow-y: auto; overflow-x: hidden; position: fixed; right: -20rem; top: 0; z-index: 5; opacity: 0; transition: .4s ease-in-out;}
  .header nav #close                                    {display: block; width: 1.1em; height: 21px; cursor: pointer; position: absolute; right: 2em; top: 2em;}
  .header nav #close span                               {display: block; width: 100%; height: 2px; background: white; opacity: 0.4; position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header nav #close span:nth-child(1)                  {transform: rotate(45deg);}
  .header nav #close span:nth-child(2)                  {transform: rotate(-45deg);}
  .header nav #close:hover span                         {opacity: 1;}
  .header nav > ul > li                                 {width: 100%; border-bottom: dotted 3px rgba(0,0,0,0.5);}
  .header nav > ul > li:first-child                     {border-top: dotted 3px rgba(0,0,0,0.5);}
  .header nav > ul > li > a                             {display: flex; width: 100%; height: var(--nav-item-height); align-items: center; font-size: 1.15em; color: white; padding: 0 1.6em; position: relative; isolation: isolate; --nav-item-height: 3em;}
  .header nav > ul > li > a[aria-current="page"]:first-child
                                                        {margin-top: 0;}
  .header nav > ul > li:has([aria-current="page"])      {background: var(--color1b); margin-block: 0.2em;}
  .header nav > ul > li > ul                            {display: block; width: 100%; margin-block: -0.8em 0.4em; padding-inline: 2.5em 1em; box-sizing: border-box;}
  .header nav > ul > li > ul > li                       {margin-block: 0.6em;}
  .header nav > ul > li > ul > li > a                   {font-size: 1em; color: white; padding-left: 0.85em; box-sizing: border-box;}
  .header nav > ul > li > ul > li > a:after             {display: block; width: 0.55em; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 295'%3E%3Cpath d='M50.5,0c11.4,0,22.7,4.3,31.4,13L256,187.2L430.2,13c17.3-17.3,45.4-17.3,62.7,0c17.3,17.3,17.3,45.4,0,62.7L287.4,281.3 c-17.3,17.3-45.4,17.3-62.7,0L19.1,75.7C1.8,58.4,1.8,30.3,19.1,13C27.7,4.3,39.1,0,50.5,0z' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: 0; top: 0; content: ""; transform: rotate(-90deg); transition: .25s ease-in-out;}
  .header.show nav                                      {right: -1px; opacity: 1;}
  }
  @media screen and (max-width: 440px)                  {
  .header .logo                                         {width: 14em;}
  .header .button                                       {width: var(--button-height); font-size: 0.75em; padding: 0; right: 3em;}
  .header .button svg                                   {fill: var(--color0) !important;}
  .header .button span                                  {display: none;}  
  }

.contacts                                               {display: flex; width: 100%; flex-wrap: wrap; gap: 2.5em 1.5em;}
.contacts > div                                         {display: block;}
.contacts > div strong                                  {font-weight: 700;}
.contacts > div h2                                      {display: block; font-size: 1.5em; color: var(--color0); font-weight: 700; margin-bottom: 0.4rem; font-family: var(--font2);}
.contacts > div ul                                      {display: block; padding: 0;}
.contacts > div ul li                                   {display: block; padding: 0;}
.contacts > div a                                       {display: flex; align-items: center; gap: 0.3em; color: var(--color0) !important; text-decoration: underline; transition: .15s ease-in-out;}
.contacts > div a svg                                   {display: block; width: 1em; height: 1em; fill: var(--color2);}
.contacts > div a:hover                                 {color: var(--color2) !important; text-decoration-color: transparent;}
.contacts > div .opening                                {margin-top: 0.15rem;}
.contacts > div .opening li:not(:last-child)            {padding-bottom: 0.2em; margin-bottom: 0.2em; border-bottom: dotted 2px rgba(0,0,0,0.3);}
.contacts > div .opening li strong                      {display: inline-block; width: 5em;}
  @media screen and (min-width: 769px)                  {
  .contacts                                             {justify-content: space-between;}
  }
  @media screen and (max-width: 768px)                  {
  .contacts                                             {justify-content: center;}
  .contacts > div                                       {width: 100%;}
  .contacts > div h2                                    {width: 100%; text-align: center;}
  .contacts > div ul li                                 {display: flex; width: 100%; justify-content: center; text-align: center;}
  .contacts > div .opening                              {width: 15em; margin-inline: auto;}
  .contacts > div .opening strong                       {margin-right: 1em;}
  }

.billing                                                {display: flex; flex-wrap: wrap; gap: 0.7em 1.2em;}
.billing .note                                          {font-size: 0.7em; line-height: 1.3;}
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .contact-page.contacts                                {font-size: 0.9em;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .contact-page.contacts > div:nth-child(odd)           {width: calc(60% - 0.75em);}
  .contact-page.contacts > div:nth-child(even)          {width: calc(40% - 0.75em);}
  .contact-page.contacts > div h2                       {text-align: left;}
  }
  @media screen and (min-width: 769px)                  {
  .billing                                              {width: 23em;}
  .billing > ul:nth-child(odd)                          {width: 11em;}
  .billing > ul:nth-child(even)                         {width: calc(100% - 1.2em - 11em);}
  }
  @media screen and (max-width: 768px)                  {
  .billing > ul                                         {width: 100%;}
  .billing > ul li.note                                 {max-width: 25em; margin-inline: auto;}
  }

.footer                                                 {display: block; width: 100%;}
.footer .wrapper                                        {padding: var(--section-gap) 0; border-top: dotted 3px var(--color1);}
.footer .contacts > div:last-child                      {display: flex; font-size: 0.8em;}
.footer .contacts > div:last-child a                    {display: inline;}
.footer .copyright                                      {display: block; font-size: 1em; font-weight: 500; color: var(--color0);}
  @media screen and (min-width: 1081px)                 {
  .footer .contacts > div:last-child                    {flex-direction: column; justify-content: space-between;}       
  .footer .contacts > div:last-child :is(li, span)      {text-align: right;}
  }
  @media screen and (max-width: 1080px)                 {
  .footer .contacts > div:last-child                    {width: 100%; flex-wrap: wrap;}       
  .footer .contacts > div:last-child ul                 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.7em 1.2em;}       
  .footer .contacts > div:last-child ul li              {width: auto;}
  .footer .contacts > div:last-child .copyright         {width: 100%; text-align: center; margin-top: 2rem;}
  }

.main                                           {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; flex-grow: 1; transition: .15s ease-in-out;}
.main :is(h1, h2, h3, .headline .title)         {display: block; width: 100%; font-weight: 700; color: var(--color0); line-height: 1.1em; box-sizing: border-box; font-family: var(--font2);}
.main h1, .headline .title                      {font-size: min(calc(1.2em + 4vw), 2.7em);}
.main h2                                        {font-size: min(calc(1em + 4vw), 2.4em);}
.main h3                                        {font-size: min(calc(0.8em + 4vw), 1.35em);}
.main p, .main li                               {display: block; width: 100%; font-size: 1em; color: var(--color0); font-weight: 500; box-sizing: border-box;}
.main p a, .main li a, .main span a             {color: var(--color1); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover,
.main span a:hover                              {color: var(--color1b) !important; text-decoration-color: transparent;}
.main strong                                    {font-weight: 700;}
.main em                                        {font-style: italic;}
.main .tip                                      {font-size: 0.8em;}
.main .tip span                                 {font-weight: 700; color: var(--color1);}
  @media screen and (min-width: 961px)          {
  .c2                                           {column-count: 2; column-gap: var(--cols-gap);}
  }
  @media screen and (max-width: 1080px)         {
  .main :is(h1, h2, h3, p)                      {text-align: center;}
  }

.section                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 1.8rem; overflow: hidden; box-sizing: border-box; padding: var(--section-gap) 0; position: relative;}
.section:has(.headline)                         {padding-top: 0;}
.section.mixed::before                          {display: block; width: 100%; height: 50%; background: var(--dark-gradient); position: absolute; left: 0; bottom: -1px; content: "";}                                   
.section.gray                                   {background-color: var(--color3);}
.section.padding-top-0                          {padding-top: 0;;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section.padding-bottom-0-special               {padding-bottom: 1em; margin-bottom: -1em;}
.section > .wrapper                             {gap: min(calc(0.2rem + 2vw), 1.2rem);}
  @media screen and (min-width: 1800px)         {
  .section                                      {border-radius: var(--border-radius);}
  .section.hero                                 {border-top-left-radius: 0; border-top-right-radius: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .section .wrapper > h1                        {text-align: center;}
  .section .content h2                          {text-align: center;}
  }
  @media screen and (max-width: 640px)          {
  .section.mixed::before                        {height: 70%;}                                   
  }

.bg-color1                                      {display: block; width: 100%; position: relative;}
.bg-color1:before, .bg-color1::after            {display: block; width: 100%; height: calc(100% - 30em); position: absolute; top: 15em; content: "";}
.bg-color1:before                               {background: var(--color1);}
.bg-color1:after                                {opacity: 0.08; background: url("images/pattern.webp") repeat center center; background-size: min(40em, calc(12em + 6vw));}
  @media screen and (min-width: 1800px)         {
  .bg-color1:before, .bg-color1::after          {border-radius: var(--border-radius);}
  }

.head                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem;}
.head h2                                        {width: 100%; text-align: center;}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem 1.2rem;}
.flex.space-between                             {justify-content: space-between;}

.button                                         {display: flex; height: var(--button-height); justify-content: center; align-items: center; gap: 0.5em; outline: none; cursor: pointer; font-size: 0.85em; color: white; font-weight: 600; line-height: 1;; background: transparent; padding: 0 2em; position: relative; border: dotted 0.16em transparent; border-radius: calc(var(--button-height) / 2); --button-height: 3em; box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}
.button svg                                     {display: block; width: 0.9em; height: 0.9em; fill: white;}
.button:hover                                   {transform: scale(0.98);}
.button.color1                                  {background: var(--color1);}
.button.color1:hover                            {background: var(--color1b);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}
.button.border1                                 {border-color: var(--color1); color: var(--color0);}
.button.border1:hover                           {border-color: var(--color1b); color: var(--color1b); background: rgba(0,0,0,0.03);}
.button.border1 svg                             {fill: var(--color1);}
.button.border2                                 {border-color: var(--color2); color: var(--color0);}
.button.border2:hover                           {border-color: var(--color2b); color: var(--color2b); background: rgba(0,0,0,0.03);}
.button.border2 svg                             {fill: var(--color2);}

.link                                           {display: flex; align-items: center; gap: 0.4em; font-size: 1em; line-height: 1; font-weight: 700; color: var(--color0); text-decoration: none; padding-bottom: 0.45em; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.link:before                                    {display: block; width: 100%; height: 1px; border-bottom: dotted 0.17em var(--color2); position: absolute; left: 0; bottom: 0; transition: .15s ease-in-out; content: "";}
.link:after                                     {display: block; width: 0.65em; height: 0.65em; transition: .15s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M290.8,477.2c-10.5,0-21-4-29-12c-16-16-16-41.9,0-57.9L372.2,297H41c-22.6,0-41-18.3-41-41s18.3-41,41-41h331.2 L261.9,104.7c-16-16-16-41.9,0-57.9c16-16,41.9-16,57.9,0L500,227c4.3,4.3,7.4,9.2,9.4,14.5c1.4,3.6,2.2,7.5,2.5,11.5c0,0,0,0,0,0 c0,0,0,0,0,0.1c0.1,1,0.1,1.9,0.1,2.9c0,1,0,1.9-0.1,2.9c0,0,0,0,0,0.1c0,0,0,0,0,0c-0.3,4-1.2,7.9-2.5,11.5 c-2,5.3-5.1,10.3-9.4,14.5L319.8,465.2C311.8,473.2,301.3,477.2,290.8,477.2z' width='1' height='1' fill='black' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
.link:hover                                     {color: var(--color2);}
.link:hover:before                              {opacity: 0;}

.box                                            {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 1em; background: var(--color2); padding: 0.8em; border-radius: var(--border-radius); box-sizing: border-box;}

.breadcrumbs                                    {display: flex; width: 100%; box-sizing: border-box; position: relative; z-index: 1;}
.breadcrumbs nav                                {display: flex;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; margin: 0; padding: 0 !important;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.9em; padding: 0 1.4em 0 0 !important; margin-right: 0.45em; position: relative;}
.breadcrumbs ul li:first-child                  {margin-left: 0;}
.breadcrumbs ul li:last-child                   {padding-right: 0; margin-right: 0;}
.breadcrumbs ul li:before                       {display: none !important;}
.breadcrumbs ul li:after                        {display: inline-block; width: 1em; height: 0.7em; position: absolute; right: 0; top: 0.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M292.6,475.4c-9.4,0-18.7-3.6-25.9-10.7c-14.3-14.3-14.3-37.4,0-51.7l120.4-120.4H36.6 C16.4,292.6,0,276.2,0,256s16.4-36.6,36.6-36.6h350.6L266.7,99c-14.3-14.3-14.3-37.4,0-51.7c14.3-14.3,37.4-14.3,51.7,0 l182.9,182.9c3.8,3.8,6.6,8.2,8.3,12.9c0,0,0,0,0,0c0,0,0,0,0,0.1c1.2,3.2,2,6.7,2.3,10.3c0,0,0,0,0,0c0,0,0,0,0,0 c0.1,0.9,0.1,1.7,0.1,2.6c0,0.9,0,1.7-0.1,2.6c0,0,0,0,0,0c0,0,0,0,0,0c-0.3,3.6-1,7-2.2,10.3c-1.8,4.7-4.6,9.2-8.4,13L318.4,464.7 C311.3,471.9,301.9,475.4,292.6,475.4z' width='1' height='1' fill='rgb(59, 74, 96)' stroke='none' stroke-width='0' 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: var(--color0); text-decoration: underline; font-weight: 400; opacity: 0.9; line-height: 1.3em; border: none; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; font-weight: bold; opacity: 1;}
.breadcrumbs ul li a:hover                      {opacity: 1; color: var(--color1); text-decoration-color: transparent;}
  @media screen and (min-width: 641px) and (max-width: 1080px){  
  .breadcrumbs ul                               {width: 100%; justify-content: center;}
  }
  @media screen and (max-width: 1080px)          {  
  .breadcrumbs                                  {justify-content: center; font-size: 0.9em; overflow-x: auto; scrollbar-width: none;}
  .breadcrumbs::-webkit-scrollbar               {display: none;}
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs ul li a                          {white-space: nowrap;}
  .article .breadcrumbs                         {justify-content: flex-start;}
  } 

.headline                                       {display: block; width: 100%; background: var(--color1); padding-block: 1.5rem; box-sizing: border-box; overflow: hidden; position: relative;}
.headline:after                                 {display: block; mix-blend-mode: multiply; opacity: 0.3; background: url("images/headline.jpg") no-repeat center center; background-size: cover; position: absolute; inset: 0; content: "";}
.headline .wrapper                              {align-items: center; z-index: 5;}
.headline :is(h1, .title)                       {color: white !important;}
.headline .breadcrumbs ul li:after              {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M292.6,475.4c-9.4,0-18.7-3.6-25.9-10.7c-14.3-14.3-14.3-37.4,0-51.7l120.4-120.4H36.6 C16.4,292.6,0,276.2,0,256s16.4-36.6,36.6-36.6h350.6L266.7,99c-14.3-14.3-14.3-37.4,0-51.7c14.3-14.3,37.4-14.3,51.7,0 l182.9,182.9c3.8,3.8,6.6,8.2,8.3,12.9c0,0,0,0,0,0c0,0,0,0,0,0.1c1.2,3.2,2,6.7,2.3,10.3c0,0,0,0,0,0c0,0,0,0,0,0 c0.1,0.9,0.1,1.7,0.1,2.6c0,0.9,0,1.7-0.1,2.6c0,0,0,0,0,0c0,0,0,0,0,0c-0.3,3.6-1,7-2.2,10.3c-1.8,4.7-4.6,9.2-8.4,13L318.4,464.7 C311.3,471.9,301.9,475.4,292.6,475.4z' width='1' height='1' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E");}
.headline .breadcrumbs ul li a                  {color: white;}
.headline .breadcrumbs ul li a:hover            {color: var(--color3) !important;}
  @media screen and (min-width: 1800px)         {
  .headline                                     {border-radius: var(--border-radius);}
  }
  @media screen and (min-width: 1081px)         {
  .headline .wrapper                            {justify-content: space-between;}
  .headline :is(h1, .title)                     {width: auto !important;}
  .headline .breadcrumbs                        {width: auto;}
  }
  @media screen and (max-width: 1080px)         {
  .headline .wrapper                            {justify-content: center;}
  .headline :is(h1, .title)                     {text-align: center; margin-bottom: 0.6rem;}
  }

.pagination                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.25em; margin-top: 1rem; box-sizing: border-box;}
.pagination a                                   {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; font-size: 0.9em; color: var(--color0); font-weight: 600; border-radius: 100%; border: dotted 0.15em var(--color1); box-sizing: border-box; transition: .15s ease-in-out;}                                    
.pagination a:not(.sel):hover                   {background: rgba(0,0,0,0.03); transform: scale(0.98);}
.pagination a.sel                               {background: var(--color1); color: white; border: none;}

.cols                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem 0;}
.cols > div                                     {display: flex; align-items: center; align-content: center; flex-wrap: wrap;}
.cols > div > img                               {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .cols                                         {justify-content: space-between;}
  .cols > div                                   {width: calc(50% - var(--cols-gap) / 2);}
  .cols > div .head                             {justify-content: flex-start;}
  .cols > div :is(h2, p)                        {text-align: left;}
  .cols.reversed > div:nth-child(2)             {order: -1;}
  }
  @media screen and (max-width: 1080px)         {
  .cols                                         {justify-content: center;}
  .cols > div                                   {width: 100%; justify-content: center;}
  .cols > div *                                 {text-align: center;}
  .cols > div > img                             {max-width: 26em;}
  .cols > div:has(> img)                         {order: -1;}
  }

.div-aside                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2rem 4rem;}
.div-aside > *                                  {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
  @media screen and (min-width: 1081px)         {
  .div-aside > div                              {width: calc(90% - 15rem - 4rem);}
  .div-aside > aside                            {width: calc(10% + 15rem);}

  .div-aside .article :is(.image, .highlight, .gallery, .trip-hero)
                                                {width: calc(100% + 3rem); margin-inline: -1.5rem;}
  .div-aside .article .highlight                {padding-inline: 1.5rem;}
  }
  @media screen and (max-width: 1080px)         {
  .div-aside > *                                {width: 100%;}
  }

.hero                                           {background-repeat: no-repeat; background-size: cover; padding-block: min(calc(2rem + 5vw), 8rem);}
.hero:before                                    {display: block; width: 100%; height: 16em; background-image: linear-gradient(to bottom, white, transparent); position: absolute; left: 0; top: 0; z-index: 1; content: "";}
.hero .content                                  {display: flex; flex-wrap: wrap; gap: 1em; position: relative; z-index: 2; padding-block: 6rem 2rem; margin-top: var(--header-height);}
.hero .content :is(h1, p)                       {color: white !important; text-shadow: 0.05em 0.05em 0.25em rgba(0,0,0,0.5);}
.hero .content .button                          {margin-top: 0.5rem;}
  @media screen and (min-width: 1081px)         {
  .hero                                         {background-image: url("images/hero1.jpg"); background-position: center center;}
  .hero .content                                {width: 33em;}
  }
  @media screen and (max-width: 1080px)         {
  .hero                                         {background-image: url("images/hero2.jpg"); background-position: center top;}
  .hero .content                                {justify-content: center; margin-top: calc(3rem + 36vw);}
  .hero .content h1 br                          {display: none;}
  }

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

.carousel                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); position: relative; box-sizing: border-box; --slides-padding: 0.5rem;}
.carousel .swiper                               {width: calc(100% + 2 * var(--slides-padding)); margin-inline: calc(0px - var(--slides-padding));}
.carousel .swiper-slide                         {display: flex; height: auto; position: relative; padding: var(--slides-padding); box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;}
.carousel .swiper-slide > *                     {width: 100%;}
.carousel .controls                             {display: flex; width: 100%; justify-content: center; gap: 0.5em; margin-top: 1.5rem;}

.swiper-button-prev,
.swiper-button-next                             {width: var(--button-height); margin: 0; padding: 0; inset: auto;}                                
.swiper-button-prev svg,
.swiper-button-next svg                         {display: block; width: 30%; fill: var(--color0) !important;}
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-prev svg                         {transform: rotate(180deg);}
.swiper-button-disabled                         {opacity: 0.2 !important;}

.swiper-button-prev.color1 svg,
.swiper-button-next.color1 svg                  {fill: white !important;}

.hp .section:has(.infographics)                 {margin-top: -3rem;}

.section:has(.infographics)                     {padding: 0 !important;}
.infographics .swiper-slide                     {display: flex; padding-bottom: 0.4em;}
.infographics .item                             {display: flex; width: 100%; justify-content: center; align-items: center; gap: 1em; background-image: linear-gradient(to right, var(--color1), var(--color1b)); border-radius: var(--border-radius); padding: 2.5em; box-sizing: border-box; position: relative; box-shadow: 0 0 0.25em rgba(0,0,0,0.3);}
.infographics .item:after                       {display: block; width: 100%; height: 0.4em; opacity: 0.2; background: url("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.4em; content: "";}
.infographics .item svg                         {display: block; width: 2.7em; height: 2.7em; fill: white;}
.infographics .item svg .color3                 {fill: var(--color3);}
.infographics .item span                        {display: block; font-size: 0.9em; color: white; line-height: 1.4;}
  @media screen and (max-width: 1800px)         {
  .infographics .swiper                         {overflow: visible;}
  }
  @media screen and (max-width: 1080px)         {
  .infographics .item                           {flex-wrap: wrap;}
  .infographics .item span                      {width: 100%; text-align: center;}
  }  

.message                                        {display: flex; align-items: center; gap: 1em 1.8em; border: dotted 3px var(--color2); border-radius: var(--border-radius); box-sizing: border-box;}
.message span                                   {display: block; font-size: 0.9em;}
  @media screen and (min-width: 1081px)         {
  .message                                      {justify-content: space-between; padding: 1.4em 2em;}
  }
  @media screen and (max-width: 1080px)         {
  .message                                      {justify-content: center; flex-wrap: wrap; padding: 1.5em;}
  .message span                                 {width: 100%; text-align: center;}
  }

.grid                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem var(--grid-gap); --grid-gap: 1rem;}
.grid:has(.review)                              {gap: var(--grid-gap);}
  @media screen and (min-width: 1081px)         {
  .grid.g3 > *                                  {width: calc(33.33% - 2 / 3 * var(--grid-gap));}
  }
  @media screen and (min-width: 769px)          {
  .grid.g2 > *                                  {width: calc(50% - 0.5 * var(--grid-gap));}
  }
  @media screen and (max-width: 768px)          {
  .grid.g2 > *                                  {width: 100%;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .grid.g3 > *                                  {width: calc(50% - 0.5 * var(--grid-gap));}
  }
  @media screen and (max-width: 640px)          {
  .grid > *                                     {width: 100%;}
  }  

.article-preview                                {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; --preview-padding: 0.9rem; --flag-size: 2.4rem;}
.article-preview .img                           {display: block; width: 100%; padding-top: 65%; position: relative; background: white; border-radius: var(--border-radius); box-shadow: 0 0 0.25em rgba(0,0,0,0.2);}
.article-preview .img .inner                    {display: block; width: calc(100% - 2 * var(--preview-padding)); height: calc(100% - 2 * var(--preview-padding)); position: absolute; left: var(--preview-padding); top: var(--preview-padding); border-radius: calc(0.6 * var(--border-radius)); overflow: hidden;}
.article-preview .img .inner img                {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.article-preview .img:hover .inner img          {opacity: 0.8;}
.article-preview .img:after                     {display: block; width: 100%; height: 0.4em; opacity: 0.2; background: url("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.4em; content: "";}
.article-preview .flag                          {display: block; width: var(--flag-size); height: var(--flag-size); background: white; padding: 0.3em; box-sizing: border-box; border-radius: 100%; position: absolute; left: calc(0.8rem + var(--preview-padding)); bottom: calc(0px - 0.5 * var(--flag-size) + 0.5 * var(--preview-padding)); z-index: 5; box-shadow: 0 0 0.2em rgba(0,0,0,0.2);}
.article-preview .flag:after,
.article-preview .flag img                      {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 100%; content: "";}
.article-preview > div                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5rem; padding-inline: var(--preview-padding); box-sizing: border-box; position: relative;}
.article-preview .title                         {display: block; width: 100%; text-align: left; font-size: 1.35em;}
.article-preview .title a                       {color: var(--color0); transition: .15s ease-in-out;}
.article-preview .title a:hover                 {color: var(--color2);}
.article-preview .info                          {display: flex; width: 100%; flex-wrap: wrap; margin-block: -0.2em;}
.article-preview .info span                     {display: flex; align-items: center; font-size: 0.9em; color: var(--color0); font-weight: 700;}
.article-preview .info span:not(:last-child)::after
                                                {display: block; width: 2px; height: 0.75em; background: var(--color2); margin-inline: 0.5em; content: "";}

.article-preview p                              {text-align: left; font-size: 0.8em; line-height: 1.3;}
.article-preview .link                          {font-size: 0.85em; margin-top: 0.3em;}
  @media screen and (min-width: 641px)          {
  .grid.g1 .article-preview                     {width: 100%; flex-wrap: nowrap; background: white; padding: 1em; border-radius: var(--border-radius); box-sizing: border-box; box-shadow: 0 0 0.15em rgba(0,0,0,0.15);}          
  .grid.g1 .article-preview .img                {width: 10em; height: 6em; padding-top: 0; border-radius: calc(0.7 * var(--border-radius)); border: none; box-shadow: none;}
  .grid.g1 .article-preview .img:after          {display: none;}
  .grid.g1 .article-preview .img .inner         {width: 100%; height: 100%; inset: 0;}
  .grid.g1 .article-preview .flag               {left: auto; right: calc(0px - var(--flag-size) / 2); top: calc(50% - var(--flag-size) / 2); transform: scale(0.85);}
  .grid.g1 .article-preview > div               {padding-inline: 0.5em 0;}
  }

.article-preview.aut .flag:after                {background-image: url("images/flags/aut.svg");}
.article-preview.ben .flag:after                {background-image: url("images/flags/ben.svg");}
.article-preview.cze .flag:after                {background-image: url("images/flags/cze.svg");}
.article-preview.eu .flag:after                 {background-image: url("images/flags/eu.svg");}
.article-preview.fra .flag:after                {background-image: url("images/flags/fra.svg");}
.article-preview.gbr .flag:after                {background-image: url("images/flags/gbr.svg");}
.article-preview.ger .flag:after                {background-image: url("images/flags/ger.svg");}
.article-preview.sui .flag:after                {background-image: url("images/flags/sui.svg");}

.hp .recommended .article-preview .title a      {color: white;}
.hp .recommended .article-preview .title a:hover{color: var(--color3);}
.hp .recommended .article-preview p             {color: white;}
.hp .recommended .article-preview .link         {color: white;}
.hp .recommended .article-preview .link:before  {border-color: var(--color3);}
.hp .recommended .article-preview .link:after   {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M290.8,477.2c-10.5,0-21-4-29-12c-16-16-16-41.9,0-57.9L372.2,297H41c-22.6,0-41-18.3-41-41s18.3-41,41-41h331.2 L261.9,104.7c-16-16-16-41.9,0-57.9c16-16,41.9-16,57.9,0L500,227c4.3,4.3,7.4,9.2,9.4,14.5c1.4,3.6,2.2,7.5,2.5,11.5c0,0,0,0,0,0 c0,0,0,0,0,0.1c0.1,1,0.1,1.9,0.1,2.9c0,1,0,1.9-0.1,2.9c0,0,0,0,0,0.1c0,0,0,0,0,0c-0.3,4-1.2,7.9-2.5,11.5 c-2,5.3-5.1,10.3-9.4,14.5L319.8,465.2C311.8,473.2,301.3,477.2,290.8,477.2z' width='1' height='1' fill='white' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");}
.hp .recommended .article-preview .link:hover   {color: var(--color3);}

.hp .recommended .button                        {color: white !important; border-color: var(--color3) !important;}
.hp .recommended .button svg                    {fill: white !important;}
.hp .recommended .button:hover                  {border-color: var(--color3b) !important;}

.hp .section:has(.hp-reviews) .head h2          {color: white;}

.review                                         {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.9rem; background: white; padding: var(--review-padding); --review-padding: min(calc(0.8em + 4vw), 2.6em); border-radius: var(--border-radius); box-sizing: border-box; position: relative; box-shadow: 0 0 0.3em rgba(0,0,0,0.2);}
.review:before                                  {display: block; width: 2em; height: 2em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 330'%3E%3Cpath d='M512,118.9C512,118.9,512,118.9,512,118.9c0,116.1-91.7,210.5-207.7,210.5c-16.3,0-26.9-13.3-26.9-29.6 s13.2-29.6,29.5-29.6c35.5,0,68-12.4,93.8-33c-0.7,0-1.6,0.1-2.3,0.1c-65.4,0-119.1-53-119.1-118.4S331,0.6,396.4,0.6 C461.7,0.6,512,53.6,512,118.9z M119.1,0.6C53.8,0.6,2.1,53.6,2.1,119s53.6,118.4,119,118.4c0.7,0,1.6-0.1,2.3-0.1 c-25.8,20.6-58.3,33-93.9,33C13.2,270.2,0,283.5,0,299.8s10.7,29.6,27,29.6c116,0,207.9-94.4,207.9-210.4c0,0,0,0,0-0.1 C234.9,53.6,184.5,0.6,119.1,0.6z' fill='rgb(37,107,247)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; right: var(--review-padding); top: var(--review-padding); content: "";}
.review:after                                   {display: block; width: 100%; height: 0.4em; opacity: 0.2; background: url("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.4em;; content: "";}
.review > *                                     {display: block; width: 100%; color: var(--color0);}
.review .title                                  {font-size: min(calc(0.8em + 4vw), 1.4em); font-weight: 700; line-height: 1.3; font-family: var(--font2); padding-right: 2em; box-sizing: border-box;}
.review .text                                   {font-size: 0.9em; font-weight: 500; font-style: italic;}
.review .signature                              {font-size: 0.9em; font-weight: 600; text-align: right; opacity: 0.4;}

.filters                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7rem;}
.filters .wrapper > *                           {display: block; width: 100%;}
.filters .wrapper > * > *                       {display: flex; width: 100%; gap: 0.3em;}
.filters a                                      {display: flex; justify-content: center; align-items: center; gap: 0.8em 0.5em; cursor: pointer; font-weight: 700; line-height: 1; position: relative; border-radius: calc(var(--button-height) / 2); --button-height: 3em; box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}
.filters a.sel                                  {/*order: -1;*/}
.filters .level1                                {--filter-level1-count: 8;}
.filters .level1 a                              {font-size: 0.75rem; background: white; color: var(--color0); padding: 1.2em; border: solid 0.16em transparent;}
.filters .level1 a img                          {display: block;}
.filters .level1 a span                         {display: block;}
.filters .level1 a:hover,
.filters .level1 a.sel                          {border-color: var(--color1);}
.filters .level2 a                              {height: var(--button-height); font-size: 0.75rem; padding-inline: 1.2em; border: dotted 0.16em var(--color1);}
.filters .level2 a.sel                          {background: var(--color1); color: white; border: none; /*order: -1;*/}
  @media screen and (min-width: 1281px)         {  
  .filters .level1 a img                        {width: 1.8em;}
  }
  @media screen and (max-width: 1280px)         {  
  .filters .level1 a                            {flex-wrap: wrap;}
  .filters .level1 a img                        {width: 2.2em;}
  .filters .level1 a span                       {width: 100%; text-align: center; font-size: 0.85em;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){  
  .filters .level1 a                            {width: calc(100% / var(--filter-level1-count));}                              
  }
  @media screen and (min-width: 1081px)         {  
  .filters .wrapper .level2 > div               {flex-wrap: wrap;}
  }
  @media screen and (max-width: 1080px)         {  
  .filters .wrapper > *                         {overflow-x: auto; scrollbar-width: none;}
  .filters .wrapper > *::-webkit-scrollbar      {display: none;}
  .filters .wrapper > * > *                     {flex-wrap: nowrap;}
  .filters .level2 a                            {font-size: 0.65rem;}
  } 
  @media screen and (min-width: 961px) and (max-width: 1080px){  
  .filters .level1 a                            {min-width: 13.5vw; max-width: 13.5vw;}                              
  }
  @media screen and (min-width: 641px) and (max-width: 960px){  
  .filters .level1 a                            {min-width: 19.5vw; max-width: 19.5vw;}                              
  }
  @media screen and (max-width: 640px)          {  
  .filters .level1 a                            {min-width: 25vw; max-width: 25vw; padding: 1em 0;}                              
  }

.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
.article > *:first-child                        {margin-top: 0 !important}
.article h1                                     {text-align: left; font-size: min(calc(1.1em + 3vw), 2.2em);}
.article h2                                     {font-size: min(calc(1em + 3vw), 1.8em);}
.article h3                                     {font-size: min(calc(0.8em + 3vw), 1.35em);}
.article :is(h2, h3)                            {margin-block: 1rem -0.2rem !important;}
.article *                                      {text-align: left !important;}

.article-styles .note                           {font-size: 0.75em;}
.article-styles :is(ul, ol)                     {padding-left: 1.2em; box-sizing: border-box;}
.article-styles li                              {box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles ul li                           {padding-left: 0.9em;}
.article-styles ul li:before                    {display: block; width: 0.34em; height: 0.34em; background: var(--color1); border-radius: 100%; position: absolute; left: 0; top: 0.6em; content: "";}
.article-styles ul li:last-child                {margin-bottom: 0;}
.article-styles li :is(ul, ol)                  {margin-block: 0.4em 0.8em;}
.article-styles li li                           {font-size: 1em !important;}
.article-styles ol                              {list-style: none; counter-reset: li; margin: 0;}
.article-styles ol > li                         {counter-increment: li; padding-left: 2.2em;}
.article-styles ol > li:before                  {display: block; content: counter(li) "."; font-size: 1em; font-weight: 600; color: var(--color1); position: absolute; left: 0.65em; top: 0;}
.article-styles .highlight                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; padding: 1.2rem; border-radius: var(--border-radius); border: dotted 0.15em var(--color1); box-sizing: border-box;}
.article-styles .highlight > *                  {padding: 0;}
.article-styles .embed                          {display: block; width: 100%; border-radius: var(--border-radius);}
.article-styles .embed iframe                   {display: block; width: 100%;}

.article-styles ul.included                     {padding: 0;}
.article-styles ul.included li                  {padding-left: 1.2em;}
.article-styles ul.included li:before           {display: block; width: 0.85em; height: 1em; position: absolute; left: 0; top: 0.18em; content: ""; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M423.6,38.1L200,300.7L78.2,184.5L0.6,272.9l207,202.7l301.7-354.3L423.6,38.1z' width='1' height='1' fill='rgb(37,107,247)' stroke='transparent' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;}
  @media screen and (min-width: 769px)          {
  .article-styles ul.included                   {column-count: 2; column-gap: 2em;}
  }

.program                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; counter-reset: num;}
.program > div                                  {display: flex; width: 100%; min-height: 3.2em; flex-wrap: wrap; gap: 0.2rem; counter-increment: num; padding-left: 3.2em; position: relative;}
.program > div:before                           {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; content: counter(num); font-size: 0.9em; font-weight: 700; color: var(--color0); border: dotted 0.15em var(--color1); box-sizing: border-box; border-radius: 100%; position: absolute; left: 0; top: 0.43em;}
.program > div:not(:last-child):after           {display: block; width: 1px; height: calc(100% - 2.4em); border-right: dotted 0.15em var(--color0); position: absolute; left: 1.1em; top: 3.25em; content: "";}

.gallery                                        {display: block; width: calc(100% + 0.6rem); margin-inline: -0.3rem; position: relative;}
.gallery .swiper                                {display: block; width: 100%; overflow: hidden;}
.gallery.visible .swiper                        {overflow: visible;}
.gallery .swiper-slide                          {display: block; width: auto; height: auto; padding: 0.3em; box-sizing: border-box;flex-shrink: 0;}
.gallery .swiper-slide:after                    {display: block; width: 100%; height: 0.3em; opacity: 0.2; background: url("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: 0; content: "";}
.gallery .swiper-slide a                        {display: block;  width: 100%; padding-top: 65%; position: relative; border-radius: var(--border-radius); overflow: hidden; border: solid 0.55em white; box-sizing: border-box; box-shadow: 0 0 0.3em rgba(0,0,0,0.2);}     
.gallery .swiper-slide a span                   {display: block; position: absolute; inset: 0; cursor: pointer;}     
.gallery .swiper-slide a span img               {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}     
.gallery .swiper-slide:hover a span img         {opacity: 0.8;}
.gallery .swiper-button-prev,
.gallery .swiper-button-next                    {position: absolute; top: calc(50% - var(--button-height) / 2);}
.gallery .swiper-button-prev                    {left: -0.7rem;}
.gallery .swiper-button-next                    {right: -0.7rem;}

.article .date                                  {display: block; font-size: 0.9em; color: var(--color1); font-weight: 600; margin-top: -0.7rem;}
.article .image                                 {display: block; width: 100%; padding-top: 56%; position: relative; border: solid 0.8em white; border-radius: var(--border-radius); margin-bottom: 0.4rem; box-sizing: border-box; box-shadow: 0 0 0.4em rgba(0,0,0,0.2);} 
.article .image:after                           {display: block; width: 100%; height: 0.4rem; opacity: 0.2; background: url("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -1.2rem; content: "";}
.article .image > span                          {display: block; position: absolute; inset: 0; border-radius: calc(0.7 * var(--border-radius)); overflow: hidden;}
.article .image > span img                      {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.article .image[href]:hover > span img          {opacity: 0.9;}
  @media screen and (min-width: 1081px)         {
  .article :is(.image, .highlight, .gallery, .trip-hero)
                                                {width: calc(100% + 8rem); margin-inline: -4rem;}
  .article .highlight                           {padding-inline: 4rem;}
  }

.trip-hero                                      {display: flex; width: 100%; background: white; border-radius: var(--border-radius); margin-bottom: 0.3em; overflow: hidden; box-shadow: 0 0 0.3em rgba(0,0,0,0.2);}
.trip-hero > *                                  {display: flex; flex-wrap: wrap; gap: 0.8rem; box-sizing: border-box; position: relative;}
.trip-hero > div                                {padding: min(4rem, calc(0.8em + 5vw));}
.trip-hero .subtitle                            {font-weight: 600; color: var(--color1); margin-top: -0.2rem; line-height: 1.3;}
.trip-hero .price                               {display: flex; width: 100%; align-items: center; flex-wrap: wrap; padding-top: 0.9rem; border-top: solid 1px rgba(0,0,0,0.2);}
.trip-hero .price .title                        {display: block; width: 100%; font-size: 0.85em; color: var(--color0); font-weight: 700;}
.trip-hero .price .value                        {display: block; width: 5.6em; font-size: 1.6em; color: var(--color0); font-weight: 700;line-height: 1.2; font-family: var(--font2);}
.trip-hero .price .value.special                {color: var(--color2);}
.trip-hero .price .info                         {display: block; font-size: 0.75em; color: #666666; font-weight: 500;}
.trip-hero .button                              {margin-top: 0.6rem;}
.trip-hero .img > span                          {display: block; position: absolute; inset: 0;}
.trip-hero .img > span img                      {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.trip-hero .img[href]:hover > span img          {opacity: 0.9;}
  @media screen and (min-width: 1081px)         {
  .trip-hero > *                                {width: 50%;}
  .trip-hero > div                              {padding-block: 2.2rem;}
  .trip-hero h1                                 {font-size: 2em;}
  }
  @media screen and (max-width: 1080px)         {
  .trip-hero > *                                {width: 100%;}
  }

.form                                           {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 1rem; box-sizing: border-box; position: relative;}
.form .anchor                                   {display: block; width: 1px; height: 1px; position: absolute; left: -9999px; top: -1.5em;}
.form h2                                        {text-align: center !important;}
.form p                                         {text-align: center !important;}
.form p.note                                    {font-size: 0.8em;}
.form p.note a                                  {color: var(--color0);}

.form-items                                     {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--form-gap);}
.form-items > *.width100                        {width: 100% !important;}
  @media screen and (min-width: 769px)          {
  .form-items > *                               {width: calc(33.33% - var(--form-gap) * 2 / 3);}
  }
  @media screen and (max-width: 768px)          {
  .form-items > *                               {width: 100%;}
  }  

.form-item                                      {display: flex; min-height: var(--form-item-min-height); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}
.form-item input,
.form-item textarea                             {display: block; width: 100%; background: white; font-size: 0.9em; color: var(--color0); font-weight: 700; border: solid 1px rgba(0,0,0,0.12); outline: solid 2px transparent; border-radius: var(--border-radius); box-sizing: border-box; position: relative; font-family: var(--font1); transition: .2s ease-in-out;}
.form-item input                                {height: var(--form-item-height); padding: 0.85em 0.9em 0;}
.form-item textarea                             {height: 12em; padding: 1.6em 0.9em 0.9em;}
.form-item:not(:has(label)) input               {padding-top: 0;}
.form-item:not(:has(label)) textarea            {padding-top: 0.9em;}
.form-item input:focus, 
.form-item textarea:focus                       {outline-color: var(--color1);}
.form-item label                                {display: block; font-size: 0.85em; font-weight: 500; color: #999999; position: absolute; left: 1.35em; top: 1.2em; transition: .15s ease-in-out;}
.form-item input[type="text"].touched:not(.empty) + label,
.form-item input[type="password"].touched:not(.empty) + label,
.form-item input[type="text"]:focus + label,
.form-item input[type="password"]:focus + label,
.form-item textarea.touched:not(.empty) + label,
.form-item textarea:focus + label               {font-size: 0.65em; color: var(--color1); font-weight: 600; left: 1.28em; top: 0.8em;}
.form-item:focus-within .optional,
.form-item:has(.touched:not(.empty)) .optional  {transform: translateX(-9999px);}

.chk1:not(:checked),
.chk1:checked                                   {position: absolute; left: -9999px; background-position: left top;}
.chk1:not(:checked) + label,   
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; padding-left: 1.45em; font-weight: 500; color: #666666; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label span,   
.chk1:checked + label span                      {color: var(--color2);}
.chk1:not(:checked) + label a,
.chk1:checked + label a                         {color: #666666; text-decoration: underline;}
.chk1:not(:checked) + label a:hover,   
.chk1:checked + label a:hover                   {color: var(--color0); text-decoration: none;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 0.94em; height: 0.94em; border-radius: 0.2em; position: absolute; left: 0; top: 0.18em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: #d9d9d9;}
.chk1:checked + label:before                    {background: URL('images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color1);}
.chk1:disabled + label,                  
.chk1:disabled + label:before                   {opacity: 0.4;}

select {width: 100%; position: relative; height: var(--form-item-height); background: white; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.12); outline: solid 2px transparent; z-index: 1000; padding:0px 1em 0px 1em; }

.custom-select                                    {width: 100%; position: relative; height: var(--form-item-height); background: white; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.12); outline: solid 2px transparent; z-index: 1000;}
.custom-select .sel                               {display: flex; width: 100%; height: var(--form-item-height); align-items: center; flex-wrap: wrap; font-size: 0.9em; color: var(--color0); font-weight: 600; line-height: var(--form-item-height); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-inline: 1rem 2.2em; box-sizing: border-box; border-radius: var(--form-item-radius); cursor: pointer; position: relative; z-index: 2; transition: .2s ease-in-out;}
.custom-select .sel:hover                         {color: var(--color0);}
.custom-select:after                              {display: block; width: 0.65em; height: 0.65em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 295'%3E%3Cpath d='M50.5,0c11.4,0,22.7,4.3,31.4,13L256,187.2L430.2,13c17.3-17.3,45.4-17.3,62.7,0c17.3,17.3,17.3,45.4,0,62.7L287.4,281.3 c-17.3,17.3-45.4,17.3-62.7,0L19.1,75.7C1.8,58.4,1.8,30.3,19.1,13C27.7,4.3,39.1,0,50.5,0z' fill='black' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; position: absolute; right: 1rem; top: 1.45rem; content: ""; transition: .25s ease-in-out;}
.custom-select .dropdown                          {display: none; width: 100%; background: white; box-shadow: 0 0 0.35em rgba(0,0,0,0.25); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box; margin-top: 0.2em; position: absolute; left: -1px; top: var(--form-item-height); z-index: 1000;}
.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; line-height: 1.1em; color: #666666; border-top: solid 1px rgba(0,0,0,0.1); padding: 1em 1rem 0.8em; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:before                {display: none;}
.custom-select .inner ul li:after                 {display: block; width: 0.6em; height: 0.6em; transform: rotate(-90deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 295'%3E%3Cpath d='M50.5,0c11.4,0,22.7,4.3,31.4,13L256,187.2L430.2,13c17.3-17.3,45.4-17.3,62.7,0c17.3,17.3,17.3,45.4,0,62.7L287.4,281.3 c-17.3,17.3-45.4,17.3-62.7,0L19.1,75.7C1.8,58.4,1.8,30.3,19.1,13C27.7,4.3,39.1,0,50.5,0z' fill='black' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; position: absolute; right: 1rem; top: 1.1rem; content: ""; transition: .25s 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;}
.custom-select.show .sel                          {border-color: var(--color1);}




.map                                            {display: block; width: 100%; height: 20em; position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 0 0.3em rgba(0,0,0,0.2);}
.map iframe                                     {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}

.docs                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--docs-gap); --docs-gap: 0.3rem;}
.docs a                                         {display: flex; align-items: center; flex-wrap: wrap; font-size: 0.9em; font-weight: 700; color: var(--color0); line-height: 1.3; padding: 0.8em 3.4em 0.8em 1em; border: dotted 0.1em #999999; border-radius: var(--border-radius); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.docs a:after                                   {display: block; width: 1.35em; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M474.5,37.5C437,0,376.7,0,256,0C135.3,0,75,0,37.5,37.5C0,75,0,135.3,0,256c0,120.7,0,181,37.5,218.5 C75,512,135.3,512,256,512c120.7,0,181,0,218.5-37.5C512,437,512,376.7,512,256C512,135.3,512,75,474.5,37.5z M165.6,216.8 c7.5-7.5,19.7-7.5,27.2,0l44,44V128c0-10.6,8.6-19.2,19.2-19.2s19.2,8.6,19.2,19.2v132.8l44-44c7.5-7.5,19.7-7.5,27.2,0 c7.5,7.5,7.5,19.7,0,27.2l-76.8,76.8c-3.6,3.6-8.5,5.6-13.6,5.6s-10-2-13.6-5.6L165.6,244C158.1,236.5,158.1,224.3,165.6,216.8z M358.4,403.2H153.6c-10.6,0-19.2-8.6-19.2-19.2s8.6-19.2,19.2-19.2h204.8c10.6,0,19.2,8.6,19.2,19.2S369,403.2,358.4,403.2z' fill='rgb(37,107,247)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; background-size: contain; position: absolute; right: 1em; top: 0; content: "";}
.docs a span                                    {display: block; width: 100%; font-size: 0.9em; font-weight: 500;}
.docs a:hover                                   {color: var(--color1); border-color: var(--color0);}
  @media screen and (min-width: 1081px)         {
  .div-aside .docs a                            {width: 100%;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .div-aside .docs a                            {width: calc(50% - var(--docs-gap) / 2);}
  }
  @media screen and (max-width: 640px)          {
  .div-aside .docs a                            {width: 100%;}
  }

.offers h2                                      {font-size: min(calc(0.9em + 3vw), 1.8em);}

.pricelist                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;}
.pricelist table                                {width: 100%;}
.pricelist table :is(th, td)                    {vertical-align: top; line-height: 1.3;}
.pricelist table :is(th:last-child, td:last-child)
                                                {text-align: right !important; padding-left: 1.5rem; box-sizing: border-box;}
.pricelist table th                             {font-size: 0.8em; color: var(--color0); font-weight: 700; padding-bottom: 0.8em;}
.pricelist table td                             {padding-block: 1rem; border-top: solid 1px rgba(0,0,0,0.25);}
.pricelist table tr:first-child td              {padding-top: 0; border: none;}
.pricelist table td .title                      {display: block; font-size: 1.25em; font-weight: 700; color: var(--color0); margin-bottom: 0.4rem; font-family: var(--font2);}
.pricelist table td .title a                    {display: inline; color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.pricelist table td .title a:hover              {color: var(--color2); text-decoration-color: transparent;}
.pricelist table td .note                       {display: block; font-size: 0.85em; font-weight: 500; color: var(--color0);}
.pricelist table td:last-child                  {font-size: 1.25em; font-weight: 700; color: var(--color2); font-family: var(--font2);}
  @media screen and (max-width: 640px)          {
  .pricelist table                              {display: flex; flex-wrap: wrap;}
  .pricelist table th                           {display: none;}
  .pricelist table tr                           {display: block;}  
  .pricelist table tr td                        {display: block; width: 100%;}
  }

.login                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 2em; border-radius: var(--border-radius); border: dotted 0.15em var(--color1); box-sizing: border-box;}
.login > div                                    {max-width: 16rem;}
.login h1                                       {text-align: center;}
.login .form-item                               {width: 100%;}

.apply h2                                       {text-align: center;}
.apply .docs                                    {justify-content: center;}
.apply .note                                    {max-width: 30rem; text-align: center; font-size: 0.75em; color: #999999; line-height: 1.3; margin-inline: auto;}

  @media screen and (max-width: 480px)          {
  .apply .docs a                                {width: 100%;}
  }

.apply-head                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.7rem;}
.apply-head > *                                 {display: block; width: 100%; text-align: center;}
.apply-head .trip                               {font-size: 1.35em; font-weight: 700; font-family: var(--font2); line-height: 1.3;}
.apply-head .trip a                             {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.apply-head .trip a:hover                       {color: var(--color2); text-decoration-color: transparent;}
.apply-head .trip-note                          {font-size: 0.9em; font-weight: 500; color: #666666; margin-top: -0.4rem;}

.apply-box                                      {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: min(3rem, calc(1rem + 3vw)); border-radius: var(--border-radius); border: dotted 0.15em var(--color1); box-sizing: border-box;}
.apply-box > div                                {max-width: 35rem;}
.apply-box > div > *:first-child                {margin-top: 0 !important;}
.apply-box h2                                   {text-align: center; font-size: min(calc(0.8em + 4vw), 1.8em); margin-top: 1rem;}
.apply-box .checkbox                            {font-size: 0.75em;}
  @media screen and (min-width: 641px)          {
  .apply-box .form                              {justify-content: flex-start;}
  .apply-box .form-item                         {width: calc(50% - var(--form-gap) / 2);}
  }
  @media screen and (max-width: 640px)          {
  .apply-box .form-item                         {width: 100%;}
  }

.payment                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem;;}

.stats                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--stats-gap); --stats-gap: 0.3rem;}
.stats > div                                    {display: flex; justify-content: center; align-items: center; gap: 0.4em 1.1em; padding: 0.8em 1em; border: dotted 0.1em #999999; border-radius: var(--border-radius); box-sizing: border-box;}
.stats > div span                               {display: block; font-size: 0.9em; color: var(--color0); line-height: 1.3;}
.stats > div span strong                        {font-weight: 700;}
.stats > div span.amount                        {color: var(--color2); font-weight: 700;}
  @media screen and (max-width: 640px)          {
   .stats > div                                 {width: 100%;}
  }

.all-paid                                       {display: flex; justify-content: center; align-items: center; gap: 0.3em; font-size: 1.1em; padding: 0.8em 1em; border: dotted 0.1em #999999; border-radius: var(--border-radius); box-sizing: border-box;}
.all-paid svg                                   {display: block; width: 1.2em; height: 1.2em; fill: white; margin-right: 0.15em;}
.all-paid svg .green                            {fill:#00b318;}

.participants                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem;}

.table-controls                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2em; padding-inline: 1em; box-sizing: border-box;}
.table-controls > *                             {font-size: 0.85em;}
.table-controls .send                           {display: flex; align-items: center; gap: 0.3em; color: var(--color0); line-height: 1.3;}
.table-controls .send a                         {display: flex; align-items: center; gap: 0.35em; color: var(--color0); font-weight: 700; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.table-controls .send a svg                     {display: block; width: 1.1em; height: 1.1em; fill: var(--color2);}

.table-controls .send a:hover                   {color: var(--color2); text-decoration-color: transparent;}

.participants .table                            {display: block; width: 100%; background: white; padding: 1.4em; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.2); box-sizing: border-box;}
.participants .table table                      {width: 100%;}
.participants .table table :is(th, td)          {font-size: 0.9em; font-weight: 700; line-height: 1.3; vertical-align: top; text-align: left; padding-right: 1em;}
.participants .table table th                   {color: var(--color1); font-weight: 700;}
.participants .table table td                   {border-bottom: dotted 2px rgba(0,0,0,0.2); padding-block: 0.8em;}
.participants .table table :is(th:last-child, td:last-child)
                                                {padding-right: 0;}
.participants .table table tr:last-child td     {padding-bottom: 0; border: none;}
.participants .table table td:nth-last-child(-n+2),
.participants .table table th:nth-last-child(-n+2)
                                                {text-align: right;}
.participants .table .checkbox                  {position: relative; top: 0.10em;}
.participants .table table td:nth-child(4)      {font-weight: 500;}
  @media screen and (max-width: 768px)          {
  .participants .table                          {overflow: auto;}
  .participants .table table                    {width: 800px;}
  }

.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 .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 strong                      {font-weight: 700;}
.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: min(1.5em, calc(1em + 2vw)); font-weight: 700; font-family: var(--font2);}
.wndw .wndw-content .title span                 {display: block; font-weight: 400;}
.wndw .wndw-content p                           {display: block; width: 100%; text-align: center; font-size: 1em; line-height: 1.4em;}
.wndw .wndw-content .flex                       {align-items: center; gap: 0.7em 1em; font-size: 0.85rem;}
.wndw .wndw-content .button                     {font-size: 0.9em;}
.wndw .wndw-content .button.color-green         {background: #06c720; color: white;}
.wndw .wndw-content .button.color-green:hover   {background: #00b318;}
.wndw .wndw-content .link:after                 {display: none;}

.wndw.full-review .wndw-content .title          {text-align: left;}
.wndw.full-review .wndw-content p               {text-align: left; font-style: italic;}
.wndw.full-review .wndw-content .signature      {display: block; width: 100%; font-size: 0.9em; font-weight: 600; text-align: right; opacity: 0.4;}

.wndw.send-email > div                          {background: rgb(245,245,245);}
.wndw.send-email .form-item                     {width: 100%;}

.pay .qr                                        {display: flex; width: 100%; justify-content: center;}
.pay .qr img                                    {display: block; width: 8em; height: auto; padding: 0.7em; background: white; border-radius: 0.3em; box-shadow: 0 0 0.2em rgba(0,0,0,0.25);}
.pa  .payment-data                              {display: block; width: 100%; text-align: center;}
.pay .payment-data .amount                      {display: block; width: 100%; text-align: center; font-size: 1.35em; color: var(--color2); font-weight: 700; font-family: var(--font2);}
.pay .payment-data .data                        {display: block; width: 100%;}
.pay .payment-data .data li                     {display: block; width: 100%; text-align: center; font-size: 0.85em; color: var(--color0); font-weight: 500;}




.banner { width: 95%; max-width: 1000px; margin: 0 auto 30px auto; }
.banner a { display: block; }
.banner img { width: 100%; height: auto; display: block; }
.banner .mobil { display: none; }
@media (max-width: 980px) { .banner .desktop { display: none; }
    .banner .mobil { display: block; }
}