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

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

.news-detail  { display:flex !important; }

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

body                                            { display: block !important; }

.buttons2 { display: flex; justify-content: center; gap: 0.5em; flex-wrap: wrap; }   

:root {
    --font1: "barlow-condensed", sans-serif; /* 500, 600, 700, 800 */

    --color0: #1a1a1a;
    --color0b: black;
    --color1: #ffcc33;
    --color1b: #eaab09;
    --wrapper-padding: 7vw;
    --section-padding: min(5rem, calc(1.3rem + 6vw));
    --header: 6rem;
    --button-height: 2rem;
    --padding-inline: 1.6rem;
    --gap1: min(2.6rem, calc(1rem + 5vw));
}
  
html                                            {display: block; width: 100%; height: 100%; background: var(--color0); text-align: center; font-size: min(22px, calc(13px + 1vw)); color: white; font-weight: 500; line-height: 1.3; font-family: var(--font1);}

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

.background                                     {display: block; position: fixed; inset: 0; background: url("images/background.webp") no-repeat center top; background-size: cover;
                                                 -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 40%, black 60%, transparent);                                           
                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
                                                }

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


.wrapper                                        {display: flex; width: calc(100% - 2 * var(--wrapper-padding)); max-width: 52rem; justify-content: center; flex-wrap: wrap; gap: var(--gap1); margin-inline: auto; position: relative; box-sizing: border-box; z-index: 10;}
.wrapper.wide                                   {max-width: 56rem;}
.wrapper.narrow                                 {max-width: 44rem;}

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); box-sizing: border-box; position: relative; z-index: 1000;}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center;}
.header .logo                                   {display: flex; height: 100%; justify-content: center; align-items: center; position: absolute; left: calc(50% - 2em); top: 0; z-index: 2;}
.header .logo img                               {display: block; width: 100%; height: auto;} 
.header .collapse                               {display: block; width: 100%;}
.header .collapse .inner                        {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box;}
.header .topbar                                 {display: flex; width: 100%; align-items: center; box-sizing: border-box;}
.header .topbar > div                           {display: flex; align-items: center; gap: 0.5em 1em;}
.header .topbar > div a                         {display: flex; align-items: center; gap: 0.3em; color: var(--color0); font-weight: 700; position: relative; z-index: 1; transition: .15s ease-in-out;}
.header .topbar > div a img                     {display: block; width: 1em; position: relative; top: 0.04em;}
.header .topbar > div a:hover                   {opacity: 0.85;}
.header nav                                     {display: flex; flex-wrap: wrap; box-sizing: border-box;}
.header nav ul li a                             {display: flex; justify-content: space-between; align-items: center; color: white; font-weight: 700; line-height: 1.1; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav > ul                                {display: flex; align-content: center; flex-wrap: wrap;}
.header nav > ul > li                           {display: flex; align-items: center; position: relative; transition: .15s ease-in-out;}
.header nav > ul > li > a                       {gap: 0.4em;}
.header nav > ul > li > a > img                 {display: block; width: 0.76em; height: 0.76em; position: relative; top: 0.05em; transition: .15s ease-in-out;} 
.header .navicon                                {display: block; width: 1.5em; height: 1em; cursor: pointer; position: relative; z-index: 10;}
.header .navicon span                           {display: block; width: 100%; height: 0.14em; background: var(--color1); border-radius: 2px; position: absolute; left: 0; transition: .15s ease-in-out;}
.header .navicon span:nth-child(1)              {top: 0;}
.header .navicon span:nth-child(2),
.header .navicon span:nth-child(3)              {top: calc(50% - 0.07em);}
.header .navicon span:nth-child(4)              {bottom: 0;}
.header .navicon:hover span                     {background: white;}
.header .navicon div                            {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  @media screen and (min-width: 1081px)         {
  .header                                       {padding-bottom: 2em;}
  .header .home                                 {display: none;}
  .header .logo                                 {width: 10em; left: calc(50% - 5em); top: 3em;}
  .header .collapse                             {width: 100%;}
  .header .topbar                               {justify-content: space-between; background: var(--color1); padding: 0.2em 2em 0.3em; border-radius: 0 0 4em 4em;}
  .header .topbar > div a                       {font-size: 0.85em;}
  .header .topbar > div a:after                 {display: block; background: var(--color1b); position: absolute; inset: -0.2em -0.6em; z-index: -1; border-radius: 1em; opacity: 0; content: ""; transition: .15s ease-in-out;}
  .header .topbar > div a:hover:after           {opacity: 1;}
  .header nav                                   {width: 100%; padding-top: 2.55em;}
  .header nav > ul                              {width: 100%; justify-content: center; gap: 2.6em;}
  .header nav > ul > li                         {padding-block: 0.3em;}
  .header nav > ul > li:nth-child(2)            {margin-right: 13em;}
  .header nav > ul > li > a                     {font-size: 1.6em;}
  .header nav > ul > li .navicon                {font-size: 1em; position: relative; top: 0.1em;}
  .header nav > ul > li > a:hover,               
  .header nav > ul > li > a[aria-current="page"]{color: var(--color1);}
  .header nav > ul > li > ul                    {display: block; position: absolute; right: 9999px; top: 100%; background: var(--color0b); padding-block: 0.4em; border-radius: 0.8em; overflow: hidden; box-sizing: border-box; opacity: 0; margin-top: 0.4em; transition: opacity .25s ease-in-out, margin-top .25s ease-in-out;}
  .header nav > ul > li:hover > ul,
  .header nav > ul > li.show > ul               {right: -1em; opacity: 1; margin-top: 0;}
  .header nav > ul > li > ul li                 {display: block; width: 100%;}
  .header nav > ul > li > ul li a               {width: 100%; gap: 1em; font-size: 1.2em; color: white; white-space: nowrap; padding: 0.25em 0.9em 0.35em;}  
  .header nav > ul > li > ul li a:after         {display: block; width: 0.7em; height: 0.7em; position: relative; top: 0.055em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M0,400.5c0,221.19,179.31,400.5,400.5,400.5s400.5-179.31,400.5-400.5S621.69,0,400.5,0,0,179.31,0,400.5ZM368.55,183.42l152.11,152.11c35.76,35.76,35.76,93.75,0,129.51l-152.11,152.11c-22.84,22.85-59.89,22.85-82.73,0-22.85-22.85-22.85-59.89,0-82.73l134.14-134.13-134.14-134.14c-22.85-22.84-22.85-59.89,0-82.73,22.84-22.84,59.89-22.84,82.73,0h0Z' 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; content: "";}
  .header nav > ul > li > ul li a:hover         {background: rgba(255,255,255,0.05); color: var(--color1);}
  .header nav > ul > li > ul li a[aria-current="page"]
                                                {background: var(--color1); color: var(--color0);}
  .header :is(#navicon)                         {display: none;}                 
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .header nav > ul                              {gap: 1.7em;}
  }
  @media screen and (max-width: 1080px)         {
  body                                          {--header: 6rem;}
  .header .home                                 {display: block; width: 1.3em; height: 1.3em;}
  .header .home svg                             {display: block; width: 100%; height: 100%; fill: var(--color1); transition: .15s ease-in-out;}
  .header .home:hover svg                       {fill: white;}
  .header .logo                                 {width: 8em; left: calc(50% - 4em); top: 0;}
  .header .collapse                             {width: calc(10rem + 20vw); height: 100%; background: rgba(0,0,0,0.85); overflow-y: auto; position: fixed; right: -19rem; top: 0; z-index: 5; box-sizing: border-box; opacity: 0; transition: .5s ease-in-out;}                                              
  .header .collapse .inner                      {min-height: 100%; align-content: flex-start; flex-wrap: wrap; position: relative; transition: .35s ease-in-out;}
  .header .topbar                               {height: var(--header); gap: 0.45em; padding: 0 var(--wrapper-padding);}
  .header .topbar > div                         {gap: 0.45em;}
  .header .topbar a                             {display: flex; width: 1.4em; height: 1.4em; justify-content: center; align-items: center; background: var(--color1); border-radius: 100%;}
  .header .topbar a img                         {display: block; width: 60%; height: 60%;}
  .header .topbar a span                        {display: none;}
  .header nav                                   {margin-block: -1em 1em;}
  .header nav ul                                {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box;}
  .header nav ul li                             {display: flex; width: 100%; flex-wrap: wrap;}
  .header nav ul li a                           {width: 100%; text-align: left; font-size: 1.4em; padding: 0.25em var(--wrapper-padding) 0.35em;}              
  .header nav ul li a:after                     {display: block; width: 0.7em; height: 0.7em; position: relative; top: 0.055em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M0,400.5c0,221.19,179.31,400.5,400.5,400.5s400.5-179.31,400.5-400.5S621.69,0,400.5,0,0,179.31,0,400.5ZM368.55,183.42l152.11,152.11c35.76,35.76,35.76,93.75,0,129.51l-152.11,152.11c-22.84,22.85-59.89,22.85-82.73,0-22.85-22.85-22.85-59.89,0-82.73l134.14-134.13-134.14-134.14c-22.85-22.84-22.85-59.89,0-82.73,22.84-22.84,59.89-22.84,82.73,0h0Z' 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; content: "";}
  .header nav ul li a[aria-current="page"]      {background: var(--color1); color: var(--color0);}
  .header nav > ul > li:nth-child(3) > a,
  .header nav > ul > li .navicon                {display: none;}
  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  .header.show:before                           {opacity: 0.85 !important;}
  .header.show #navicon:after                   {color: white;}
  .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                        {right: 0; opacity: 1;}
  }

.footer                                         {display: block; width: 100%;}
.footer .inner                                  {display: flex; width: 100%; justify-content: center; gap: 0 1.5em; background: var(--color1); padding: min(3rem, calc(1rem + 5vw)); border-radius: 2em 2em 0 0; box-sizing: border-box;}
.footer-links1                                  {display: flex; flex-direction: column; gap: 0.35em 1em; align-items: flex-start;}
.footer-links1 a                                {display: flex; align-items: center; gap: 0.3em; font-size: 1em; color: var(--color0); font-weight: 600; line-height: 1; transition: .15s ease-in-out;}
.footer-links1 a img                            {display: block; width: 0.9em; height: 0.9em; position: relative; top: 0.07em;}
.footer-links1 a:hover                          {opacity: 0.8;}
.footer-contacts                                {font-size: 1.2em;}
.footer-soc                                     {font-size: 0.93em;}
.footer .hours                                  {display: flex; flex-direction: column; text-align: center; font-size: 2.6em; color: var(--color0); line-height: 1; position: relative; top: 0.02em;}
.footer .hours span                             {display: block; font-size: 0.28em; color: var(--color1); letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; padding: 0.2em 0.5em 0.3em; background: var(--color0); border-radius: 0.2em; box-sizing: border-box; margin-bottom: -0.3em;}
.footer-links2                                  {display: flex; max-height: 5em; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 0.2em 1.5em; font-size: 0.8em;}
.footer-links2 > *                              {display: block; color: var(--color0);}
.footer-links2 a                                {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.footer-links2 a:hover                          {opacity: 0.8; text-decoration-color: transparent;}
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .footer-links2                                {max-height: 6em; gap: 0 1.5em; font-size: 0.67em;}
  }
  @media screen and (min-width: 1081px)         {
  .footer .inner                                {justify-content: space-between;}
  }
  @media screen and (max-width: 1080px)         {
  .footer .inner                                {flex-direction: column; align-items: center; gap: 1.3em 0; padding-bottom: 1.2em;}
  .footer-links1                                {width: 100%; flex-direction: row; justify-content: center; flex-wrap: wrap;} 
  .footer-links2                                {width: 100%; max-width: 30em; max-height: none; flex-direction: row; justify-content: center; gap: 0.35em 0.7em;}
  }
  @media screen and (min-width: 1281px)         {
  .footer-links2                                {width: 23em;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1280px){
  .footer-links2                                {width: 16em; max-height: 6em; gap: 0 1.5em; font-size: 0.67em;}
  }

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

h1, h2, h3                                      {display: block; width: 100%; text-align: center; color: var(--color1); font-weight: 800; line-height: 1.1; box-sizing: border-box;}
h2                                              {font-size: min(2.4rem, calc(1.3rem + 3vw));}
h3                                              {font-size: min(2rem, calc(1rem + 2vw));}

body:not(.hp) .section:first-of-type            {padding-top: min(3rem, calc(1.1rem + 4vw));}
  @media screen and (max-width: 1080px)         {
  body:not(.hp) .section:first-of-type          {padding-top: 0.5rem;}
  }

.head                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.12em;}
.head h1                                        {font-size: 1em; text-transform: uppercase;}
.head .subheadline                              {display: flex; width: 100%; justify-content: center; font-size: 0.3em; gap: 0.2em;}
.head .subheadline .item                        {display: flex; min-height: 1.6em; align-items: center; font-size: 1em; color: var(--color0); font-weight: 700; line-height: 1.1; letter-spacing: 0.1em; background: var(--color1); border-radius: 0.9em; padding: 0.2em 0.85em 0.3em; box-sizing: border-box; position: relative;}

.hp .head:has(h1)                               {font-size: min(6rem, calc(2rem + 5vw));}
.head:has(h1)                                   {font-size: min(4.5rem, calc(2rem + 5vw));}
.head .submenu .item                            {font-size: 0.85em;}
.head .submenu .item:not(.sel)                  {color: white; background: transparent; border: solid 0.12em var(--color1); transition: .15s ease-in-out;}
.head .submenu .item:not(.sel):hover            {color: var(--color1b); background: rgba(0,0,0,0.1); border-color: var(--color1b);}

.main :is(p, li)                                {width: 100%;}
.main :is(p a, li a)                            {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
.main :is(p a, li a):hover                      {color: var(--color1b); text-decoration-color: transparent;}

em                                              {font-style: italic;}
strong                                          {font-weight: 500; color:var(--color1); }
.large-font                                     {font-size: 1.15em;}

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

.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.25em; padding-inline: var(--padding-inline); box-sizing: border-box;}
.pagination a                                   {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; font-size: 0.9em; color: white; font-weight: 700; padding-bottom: 0.07em; border-radius: 100%;; border: solid 0.15em var(--color1); box-sizing: border-box; transition: .15s ease-in-out;}
.pagination a:hover                             {color: var(--color1b); background: rgba(0,0,0,0.1); border-color: var(--color1b);}
.pagination a.sel                               {background: var(--color1); color: var(--color0);}

.anim                                           {transition-delay: 2s; opacity: 0; transform: scale(0.9,0.9); transition: .6s ease-in-out;}
.anim.play                                      {opacity: 1; transform: scale(1,1);}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; box-sizing: border-box;}

.button                                         {display: flex; height: var(--button-height); justify-content: center; align-items: center; gap: 0.35em; font-size: min(1em, calc(0.8em + 1vw)); font-weight: 700; line-height: 1.1; letter-spacing: 0.1em; text-transform: uppercase; border: none; outline: solid 2px transparent; padding: 0 0.85em 0.1em; border-radius: 1em; border: solid 0.15em transparent; cursor: pointer; text-decoration: none !important; box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}
.button span                                    {display: inline-block; font-weight: 400; margin-left: -0.2em;}
.button img                                     {display: block; width: 1em; height: 1em;}
.button.border1                                 {border-color: var(--color1); color: white;}
.button.border1:hover                           {border-color: var(--color1b); color: var(--color1b); background: rgba(0,0,0,0.1);}
.button.color0                                  {background: var(--color0); color: var(--color1);}
.button.color0:hover                            {background: var(--color0b);}
.button.color1                                  {background: var(--color1); color: var(--color0);}
.button.color1:hover                            {background: var(--color1b);}

.link1                                          {color: var(--color1) !important; font-weight: 700; text-decoration: underline; position: relative; white-space: nowrap; transition: .15s ease-in-out;}
.link1:after                                    {display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.35em; position: relative; top: 0.037em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M0,400.5c0,221.19,179.31,400.5,400.5,400.5s400.5-179.31,400.5-400.5S621.69,0,400.5,0,0,179.31,0,400.5ZM368.55,183.42l152.11,152.11c35.76,35.76,35.76,93.75,0,129.51l-152.11,152.11c-22.84,22.85-59.89,22.85-82.73,0-22.85-22.85-22.85-59.89,0-82.73l134.14-134.13-134.14-134.14c-22.85-22.84-22.85-59.89,0-82.73,22.84-22.84,59.89-22.84,82.73,0h0Z' 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; content: "";}
.link1:hover                                    {color: var(--color1b) !important; text-decoration-color: transparent;}

.frame                                          {position: relative; z-index: 2; margin-bottom: var(--frame); box-shadow: 0 0 0.8rem rgba(0,0,0,0.8); --frame: 1rem;}
.frame:after                                    {display: block; width: 100%; height: 100%; position: absolute; left: calc(0px - var(--frame)); bottom: calc(0px - var(--frame)); z-index: -1; border: solid 0.18rem var(--color1); border-radius: calc(1.45 * var(--frame)); box-sizing: border-box; content: "";}
.frame > *                                      {border-radius: var(--frame); overflow: hidden;}
  @media screen and (max-width: 768px)          {
  .frame                                        { --frame: 0.6rem;} 
  }

.hero                                           {padding-block: 3.5em !important;}
.hero .video                                    {display: flex; width: 100%; height: 100%; justify-content: center; position: absolute; inset: 0;}
.hero .video > div                              {display: block; width: auto; height: 100%; aspect-ratio: 16/9;
                                                  -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(black, transparent 40%, transparent 60%, black);                                           
                                                  -webkit-mask-image: linear-gradient(transparent, black 40%, black 60%, transparent);
                                                }
.hero .video > div video                        {display: block; width: 100%; height: 100%; 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 20%, black 80%, transparent);                                           
                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
                                                }
.hero .bottom                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em; margin-top: min(12em, calc(5em + 30vw));}
.hero .bottom > div                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em;}
.hero .bottom .button                           {box-shadow: 0 0 0.7em rgba(0,0,0,0.8);}
.hero .bottom .info img                         {display: block; width: auto; height: 2.5em;}
  @media screen and (max-width: 1080px)         {
  .hero                                         {padding-top: 0 !important;}
  }
  @media screen and (min-width: 541px)          {
  .hero h1 br                                   {display: none;}
  .hero .subheadline .item span                 {display: inline-block; margin-left: 0.3em;}
  }
  @media screen and (max-width: 540px)          {
  .hero .subheadline .item span                 {display: block; width: 100%; text-align: center; color: var(--color1); letter-spacing: 0; position: absolute; left: 0; top: 120%;}
  .hero .bottom .info                           {display: none;}
  }

.swiper-button                                  {display: flex; width: var(--button-height); height: var(--button-height); justify-content: center; align-items: center; font-size: 1em; margin: 0; padding: 0; border: solid 0.15em var(--color1); border-radius: 100%; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}                                
.swiper-button-prev                             {transform: rotate(90deg);}
.swiper-button-next                             {transform: rotate(-90deg);}
.swiper-button svg                              {display: block; width: 75%; height: 75%; fill: white; transition: .15s ease-in-out;}
.swiper-button:before,
.swiper-button:after                            {display: none;}
.swiper-button-disabled,
.swiper-button-lock                             {opacity: 0.2 !important;}
.swiper-button:hover                            {border-color: var(--color1b); background: rgba(0,0,0,0.1);}
.swiper-button:hover svg                        {fill: var(--color1b);}

.carousel                                       {display: flex; width: 100%; justify-content: center; position: relative;}
.carousel .swiper                               {width: 100%;}
.carousel .swiper-slide                         {display: flex; height: auto; position: relative; overflow: hidden; flex-shrink: 0; transition: .5s ease-in-out;}
.carousel .swiper-slide > *                     {width: 100%;}
.carousel:has(.bottom-controls)                 {margin-bottom: 3.5rem;}
.carousel .bottom-controls                      {display: flex; width: 100%; justify-content: center; gap: 0.3em; position: absolute; left: 0; bottom: -3.5rem;}
.carousel .bottom-controls .swiper-button       {position: relative; inset: auto;}

.preview                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8em 0; container-type: inline-size;}
.preview .img                                   {width: 100%; aspect-ratio: 16/9; position: relative; cursor:pointer; }
.preview .img span                              {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.preview .img span img                          {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview .img:hover span                        {filter: brightness(1.1);}
.preview > div                                  {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.4em; box-sizing: border-box; position: relative;}
.preview > div span                             {display: block; width: 100%; text-align: left; color: white; line-height: 1.2;}
.preview > div .title                           {font-size: clamp(1.3em, 6cqw, 1.55em); font-weight: 700; line-height: 1.1; margin: 0 !important; cursor:pointer; }
.preview > div .title a                         {color: inherit; transition: .15s ease-in-out;}
.preview > div .title a:hover                   {color: var(--color1);}
.preview > div .descr                           {font-size: 0.85em; font-weight: 500;}
.preview > div .button                          {height: 2em; font-size: 0.7em; font-weight: 700; margin-top: 0.45em; padding-block: 0; border-width: 0.17em;}
.preview > div:has(.date)                       {padding-left: 3.35em;}
.preview > div .date                            {display: flex; width: 2.4em; flex-direction: column; align-content: center; position: absolute; left: 0; top: -0.17em;}
.preview > div .date span                       {display: block; width: 100%; text-align: center; font-size: 1em; color: var(--color1); font-weight: 800; line-height: 1.1; box-sizing: border-box;}
.preview > div .date span:nth-child(1)          {font-size: 2.5em;}
.preview > div .date span:nth-child(2)          {font-size: 1em; color: var(--color0); font-weight: 500; letter-spacing: 0.1em; background: var(--color1); padding-block: 0.07em 0.2em; border-radius: 0.3em;}
.preview > div .date span:nth-child(3)          {font-size: 1.25em;}

.previews                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2em 0; box-sizing: border-box;}
  @media screen and (min-width: 769px)          {
  .previews > *                                 {width: 47%;}
  } 

.hp-blog                                        {background: var(--color1); border-radius: 1.2em; padding: min(3rem, calc(0.5rem + 5vw)); box-sizing: border-box;}
.hp-blog .preview .frame                        {box-shadow: none; margin-bottom: 0;}
.hp-blog .preview .frame:before                 {display: none;}
.hp-blog .preview > div :is(.title, .descr, .button, .date span)
                                                {color: var(--color0);}
.hp-blog .preview > div .title a:hover          {color: var(--color0); opacity: 0.75;}
.hp-blog .preview > div .button                 {border-color: var(--color0)}
.hp-blog .preview > div .button:hover           {background: var(--color0); color: var(--color1);}
.hp-blog .preview > div .date span:nth-child(2) {background: var(--color0); color: var(--color1);}

.section:has(.how)                              {background: url("images/arc-black.svg") no-repeat center bottom; background-size: auto 48%;}
.how                                            {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2em 0;}
.how > div                                      {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.how > div .img                                 {display: block; width: 15em; background: var(--color1); padding: 0.6em 0.6em 0; border-radius: 2.3em; 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 top, transparent 15%, black 60%);                                           
                                                  -webkit-mask-image: linear-gradient(to top, transparent 15%, black 60%);
                                                }
.how > div .img img                             {display: block; width: 100%;}
.how > div .info                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em; margin-top: -6em; position: relative; z-index: 1;}
.how > div .info h2                             {text-shadow: 0 0 0.6em rgba(0,0,0,0.75);}
.how > div .info p                              {max-width: 20em;}
.how > div .info .buttons                       {display: flex; width: 100%; justify-content: center; gap: 0.3em; margin-top: 0.3em;}
.how > div .info .buttons .button               {height: 2em; font-size: 0.8em;}
.how > div .info .apps                          {display: flex; width: 100%; justify-content: center; gap: 0.6em 1em; margin-top: 0.15em;}
.how > div .info .apps a                        {display: flex; align-items: center; gap: 0.45em;} 
.how > div .info .apps a img                    {display: block; width: 1.55em; height: 1.55em; position: relative; top: 0.05em;}
.how > div .info .apps a span                   {display: block; text-align: left; font-size: 0.7em; color: white; line-height: 1;}
.how > div .info .apps a span strong            {display: block; font-size: 1.3em; line-height: 1;}
.how .chevron                                   {display: block; width: 3em;}
.how .chevron img                               {display: block; width: 100%;}
  @media screen and (min-width: 961px)          {
  .section:has(.how)                            {background-size: auto 70%;}
  .how                                          {justify-content: space-between;}
  .how > div                                    {width: 45%;}
  .how .chevron img                             {transform: rotate(-90deg);}
  }

.img-text                                       {display: flex; width: 100%; flex-wrap: wrap; gap: min(4rem, calc(1rem + 7vw));}

.img-text > div                                 {display: flex; width: 100%; justify-content: space-between;}

.img-text > div :is(h2, p)                      {text-align: left;}

.img-text > div .text                           {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 1.3em;}

.img-text > div .text > div                     {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.4em; position: relative; box-sizing: border-box;}

.img-text > div .text > div h2                  {font-size: 1.5em;}

      .img-text > div .text > div h2 span             {text-decoration: underline; transition: .15s ease-in-out;}

      .img-text > div .text > div:hover h2 span       {color: var(--color1b); text-decoration-color: transparent;}

      .img-text > div .text > div h2 img              {display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.15em; position: relative; top: 0.04em; transform: rotate(-90deg);}

      .wrapper > p a,
      .img-text > div a { color:var(--color1); font-weight:500; text-decoration:underline; }
.img-text > div .img                            {display: block;}

.img-text > div .img span                       {display: block; width: 100%; height: 100%;}

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

      .img-text.offer > div .text > div               {padding-left: 4.5rem; position: relative;}

.img-text.offer > div .text > div .num          {display: block; width: 3.5rem; text-align: right; font-size: 3.9em; color: var(--color1); font-weight: 800; line-height: 1; position: absolute; left: 0; top: -0.1em;}

      .img-text.offer > div .text > div > a           {display: block; position: absolute; inset: 0; z-index: 2;} 

.img-text.team2 > div .text                     {gap: 0.7em;}

.img-text.team2 ul                              {display: flex; width: 100%; flex-wrap: wrap; gap: 0.15em 0.85em; font-size: 1.2em; padding: 0;}

.img-text.team2 ul li                           {width: auto; text-align: left; padding-left: 0.8em; position: relative; box-sizing: border-box;}

.img-text.team2 ul li:before                    {display: block; width: 1em; height: 0.6em; position: absolute; top: 0.41em; left: 0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 800'%3E%3Cpath d='M170.14,29.19l259.16,259.16c60.93,60.93,60.93,159.72,0,220.65l-259.16,259.16c-38.92,38.92-102.03,38.92-140.95,0-38.92-38.92-38.92-102.03,0-140.95l228.53-228.53L29.19,170.14c-38.92-38.92-38.92-102.03,0-140.95,38.92-38.92,102.03-38.92,140.95,0Z' width='1' height='1' fill='rgb(255,204,51)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain; content: "";}

.img-text.team2 .button                         {font-size: 0.9em; border-radius: 2em; margin-top: 0.3em;}

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

  .img-text > div .text                         {width: 55%; justify-content: flex-start;}

  .img-text > div .img                          {width: 36%;}

  .img-text > div:nth-child(even) .img          {order: -1;}  

  .img-text > div:nth-child(even) .img:before   {left: auto; right: -1rem;}

  .img-text.offer > div .img                    {width: calc(50vw - 15%); margin-inline: 0 calc(50% - 50vw);}

  .img-text.offer > div:nth-child(even) .img    {margin-inline: calc(50% - 50vw) 0;}  

  .img-text.offer > div:nth-child(even) .text > div      {padding-inline: 0 4.5rem;}

  .img-text.offer > div:nth-child(even) .text > div .num {left: auto; right: 0;}  

  .img-text.offer > div:nth-child(even) :is(h2, p)

                                                {text-align: right;}

  }

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

  .img-text > div .img                          {width: 50%; margin-inline: 0 -15%;}

  .img-text > div:nth-child(even) .img          {margin-inline: -15% 0;}  

  }

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

  .img-text                                     {justify-content: center;}

  .img-text > div                               {max-width: min(30rem, calc(100% - 2rem)); flex-wrap: wrap; gap: 1.5em 0;}

  .img-text > div .img                          {order: -1;}

  .img-text.team2 > div :is(h2, h3, p)          {text-align: center;}  

  .img-text.team2 ul                            {justify-content: center;}

  }

.ig-widget                                      {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 1.4em;}
.ig-widget h2                                   {text-align: left; margin: 0;}
.ig-widget .posts                               {display: flex; width: 100%; flex-wrap: wrap; gap: 1em;}
.ig-widget .posts > div                         {display: block; width: calc(50% - 0.5em); box-shadow: 0 0 1em rgba(0,0,0,0.8);}
.ig-widget .posts > div a                       {display: block; width: 100%; padding-top: 100%; position: relative; box-sizing: border-box; border-radius: 1em; overflow: hidden; transition: .15s ease-in-out;}
.ig-widget .posts > div a span                  {display: block; position: absolute; inset: 0;}
.ig-widget .posts > div a span img              {display: block; width: 100%; height: 100%; object-fit: cover;}
.ig-widget .posts > div a:hover                 {opacity: 0.85;}
.ig-widget .button                              {margin-right: var(--padding-inline);}
  @media screen and (max-width: 1800px)         {
  .ig-widget .posts                             {width: calc(50% + 50vw); margin-left: calc(50% - 50vw);}
  }
  @media screen and (min-width: 769px)          {
  .ig-widget .posts > div                       {width: calc(25% - 0.75em);}
  }

.logos                                          {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em 2.4em;}
.logos a                                        {display: block; height: min(5em, calc(2em + 6vw)); transition: .15s ease-in-out;}
.logos a:hover                                  {opacity: 0.8;}
.logos a img                                    {display: block; height: 100%;}
  
.article                                        {display: flex; width: 100%; max-width: 32rem; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.6rem;}
.article *                                      {text-align: left;}
.article h1                                     {font-size: 2.5em; margin-top: 0 !important; text-wrap: unset;}
.article .article-info                          {display: flex; width: 100%;}
.article .article-info > span                   {display: flex; align-items: center;  font-size: 1.1em; color: white; font-weight: 600; line-height: 1;}
.article .article-info .date span               {display: flex; width: 1.05em; height: 1.05em; justify-content: center; align-items: center; background: var(--color1); border-radius: 100%; margin-right: 0.3em; position: relative; top: 0.05em;}
.article .article-info .date span img           {display: block; width: 60%; height: 60%;}
.article .article-info > span a                 {color: white; text-decoration: underline; transition: .15s ease-in-out;}
.article .article-info > span a:hover           {color: var(--color1); text-decoration-color: transparent;}         
.article .article-info > span:nth-child(2)::before
                                                {display: block; width: 0.1em; height: 0.95em; background: var(--color1); margin-inline: 0.55em; position: relative; top: 0.07em; content: "";}
.article :is(h2, h3)                            {margin-block: 0.4em -0.1em;}
.article h2                                     {font-size: 1.75em; font-weight: 800;}
.article h3                                     {font-size: 1.4em; font-weight: 700; color: white;}
.article .image                                 {display: block; width: 100%; aspect-ratio: 16/9; transition: .15s ease-in-out;} 
.article .image span                            {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.article .image span img                        {display: block; width: 100%; height: 100%; object-fit: cover;}
.article .image:hover                           {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 ul, ol                                 {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 0.7em; margin: -0.15em 0 0;}
.article ul li, ol li                           {padding-left: 1.1em; position: relative; box-sizing: border-box;}
.article li:before                              {display: block; position: absolute; content: "";}
.article ul li:before                           {width: 1em; height: 0.6em; top: 0.43em; left: 0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 800'%3E%3Cpath d='M170.14,29.19l259.16,259.16c60.93,60.93,60.93,159.72,0,220.65l-259.16,259.16c-38.92,38.92-102.03,38.92-140.95,0-38.92-38.92-38.92-102.03,0-140.95l228.53-228.53L29.19,170.14c-38.92-38.92-38.92-102.03,0-140.95,38.92-38.92,102.03-38.92,140.95,0Z' width='1' height='1' fill='rgb(255,204,51)' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center; background-size: contain;}
.article ol                                     {list-style-type: none; counter-reset: li;}
.article ol li                                  {counter-increment: li;}
.article ol li:before                           {color: var(--color1); font-weight: 700; top: 0; left: -0.05em; content: counter(li)".";}
.article .highlight                             {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem; background: rgba(0,0,0,0.1); padding: 1em 6% 1.1em; position: relative; border: solid 0.13em var(--color1); border-radius: 1em; box-sizing: border-box;}
.article .highlight > *:first-child             {margin-top: 0 !important;}
.article .highlight a                           { text-decoration:underline; color:var(--color1); }
.article .embed                                 {display: block; width: 100%; border-radius: 1em; overflow: hidden;}
.article .embed iframe                          {display: block; width: 100%;}
  @media screen and (min-width: 769px)          {
  .article :is(.image, .video-embed, .carousel, .highlight, .cta1, .team2)
                                                {width: 112%; margin-inline: -6%;}
  .article .team2                               {font-size: 0.9em; row-gap: 2em;}                      
                                                }


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

.levels .aspect                                 {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.3em; container-type: inline-size;}

.levels .aspect .title                          {display: block; width: 100%; font-size: clamp(1.2em, 10cqw, 2em); font-weight: 700; padding-inline: 0.7em; box-sizing: border-box;}

.levels .aspect .bar                            {display: block; width: 100%; padding: 5cqw; border-radius: 20cqw; border: solid 1.5cqw var(--color1); box-sizing: border-box;}

.levels .aspect .bar svg                        {display: block; width: 100%; fill: rgba(255,255,255,0.22); border-radius: 9cqw; overflow: hidden;}

.levels .aspect.lvl1 svg path:nth-child(1),

.levels .aspect.lvl2 svg path:nth-child(-n+2),

.levels .aspect.lvl3 svg path:nth-child(-n+3),

.levels .aspect.lvl4 svg path:nth-child(-n+4),

.levels .aspect.lvl5 svg path:nth-child(-n+5)   {fill: var(--color1);}

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

  .levels .aspect                               {width: 31.8%;}

  }

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

  .levels .aspect                               {flex-direction: row; justify-content: space-between; align-items: center; font-size: 0.85em;}

  .levels .aspect .title                        {padding-left: 0;}

  .levels .aspect .bar                          {width: 10em; padding: 2cqw; border-width: 0.8cqw;}

  }



.booking                                        {display: block; width: 100%;} 
.booking span                                   {display: block; width: 100%;}
.booking span > div                             {display: block; width: 100%; min-height: 10em; background: white;}


.cta1                                           {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.8em 1em; background: var(--color1); border-radius: 2em; padding: max(1.2em, 6%); box-sizing: border-box; overflow: hidden;}
.cta1 .title                                    {display: block; width: 100%; text-align: center; font-size: calc(1.5em + 3vw); color: var(--color0); font-weight: 700; line-height: 1.1; text-shadow: 0 0 0.5em var(--color1), 0 0 0.5em var(--color1), 0 0 0.5em var(--color1); position: relative; z-index: 2;}
.cta1 .img                                      {display: block; width: 12em; order: -1; margin-bottom: -5em;}
.cta1 .img img                                  {display: block; width: 100%;}
.cta1 .button                                   {font-size: 0.9em; border-radius: 1.2em;}
  @media screen and (min-width: 769px)          {
  .cta1                                         {justify-content: space-between; padding-block: 0;}
  .cta1 .title                                  {width: auto; text-align: left; font-size: 1.5em;}
  .cta1 .img                                    {width: 8em; height: 8em; margin-block: 0.5em -4.5em; position: relative; left: 0.8em; order: unset;}
  }
  @media screen and (max-width: 768px)          {
  .cta1 .img                                    {
                                                  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
                                                  mask-image: linear-gradient(to bottom, black 40%,  transparent);                                           
                                                  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent);  
                                                }
  }

.slider-gallery                                 {--frame: 0.6rem;}                       
.slider-gallery .swiper-slide                   {padding: 0 0 var(--frame) var(--frame); box-sizing: border-box;}
.slider-gallery .swiper-slide a                 {display: block; width: 100%; padding-top: 56%; position: relative; --frame: 0.6rem; transition: .15s ease-in-out;}     
.slider-gallery .swiper-slide a span            {display: block; position: absolute; inset: 0;}
.slider-gallery .swiper-slide a span img        {display: block; width: 100%; height: 100%; object-fit: cover;}     
.slider-gallery .swiper-slide a[href]:hover     {opacity: 0.8;}
.slider-gallery .swiper-button                  {background: var(--color1); top: calc(50% - var(--frame) - 0.5 * var(--button-height));}
.slider-gallery .swiper-button svg              {fill: var(--color0);}
.slider-gallery .swiper-button-prev             {left: calc(0px - var(--frame));}
.slider-gallery .swiper-button-next             {right: calc(0px - var(--frame));}

.team1                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em;}
.team1 > div                                    {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em; background: var(--color1); padding: min(1.3rem, calc(0.7em + 3vw)); border-radius: 1em; box-sizing: border-box;}
.team1 > div .img                               {display: block; width: 5em; height: 5em; background: var(--color0); border-radius: 100%; padding: 0.3em; box-sizing: border-box;}
.team1 > div .img img                           {display: block; width: 100%; border-radius: 100%;}
.team1 > div .name                              {display: block; width: 100%; text-align: center; font-size: 1.4em; color: var(--color0); font-weight: 700; line-height: 1;}
.team1 > div .post                              {display: block; font-size: 0.65em; color: var(--color1); font-weight: 600; letter-spacing: 0.1em; background: var(--color0); border-radius: 2em; padding: 0.22em 1em 0.4em; margin-top: -0.3em;}
.team1 > div .about                             {display: block; width: 100%; text-align: center; font-size: 0.875em; color: var(--color0); font-weight: 500;}
.team1-contacts                                 {display: flex; flex-direction: column; gap: 0.3em 1em; align-items: center;}
.team1-contacts a                               {display: flex; align-items: center; gap: 0.3em; font-size: 0.8em; color: var(--color0); font-weight: 600; line-height: 1; transition: .15s ease-in-out;}
.team1-contacts a img                           {display: block; width: 0.9em; height: 0.9em; position: relative; top: 0.035em;}
.team1-contacts a:hover                         {opacity: 0.8;}
  @media screen and (min-width: 769px)          {
  .team1                                        {width: 36em; margin-inline: calc(50% - 18em);} 
  .team1 > div                                  {width: calc(33.33% - 0.3em);}
  }
  @media screen and (min-width: 481px) and (max-width: 769px){
  .team1 > div                                  {width: calc(50% - 0.2em);}
  }
  @media screen and (max-width: 480px)          {
  .team1 > div                                  {padding: 1.5em calc(0.7em + 10vw);} 
  }

.team2 h3                                       {color: var(--color1); margin: 0;}

.person-head                                    {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em 0;}
.person-head .img                               {display: block; width: 13em; height: 13em;}
.person-head .img span                          {display: block; position: absolute; inset: 0;}  
.person-head .img span img                      {display: block; width: 100%; height: 100%; object-fit: cover;}
.person-head h1                                 {text-align: center;}
.person-head > div                              {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em;}
.person-head > div ul                           {width: 100%; justify-content: center; gap: 0.2em 1em; font-size: 1.35em; padding: 0;}
.person-head > div ul li                        {width: auto; padding-left: 0.8em;}
.person-contacts                                {display: flex; gap: 0.4em; align-items: center; margin-top: 0.2em;}
.person-contacts a                              {display: flex; align-items: center; gap: 0.3em; font-size: 1.1em; color: white; font-weight: 600; line-height: 1; border: solid 0.12em var(--color1); padding: 0.13em 0.8em 0.2em 0.2em; box-sizing: border-box; border-radius: 2em; transition: .15s ease-in-out;}
.person-contacts a img                          {display: block; width: 0.9em; height: 0.9em; position: relative; top: 0.035em;}
.person-contacts a:hover                        {color: var(--color1);}

.person-detail .highlight                       {margin-top: 0.6em;}
  @media screen and (min-width: 1081px)         {
  .person-head                                  {justify-content: space-between;}
  .person-head .img                             {position: relative; left: var(--frame);}
  .person-head > div                            {width: calc(100% - 16em); justify-content: flex-start; padding-block: 1rem;}
  .person-head h1                               {text-align: left; font-size: 3em;}
  .person-head > div ul                         {justify-content: flex-start;}
  .person-head, .person-detail .highlight       {width: 124%; margin-inline: -12%;}
  .person-contacts                              {flex-direction: column; align-items: flex-start;}
  .person-detail .highlight                     {padding: 2em 12%;}
  .person-detail .previews > *                  {width: 100%;}  
  .person-detail .preview                       {justify-content: space-between;}
  .person-detail .preview .img                  {width: 9em; height: 9em; --frame: 0.6rem;}
  .person-detail .preview > div                 {width: calc(100% - 10.5em);}
  .person-detail .preview > div .title          {font-size: 1.5em;}
  }

.pricelist                                      {width: 100%;}
.pricelist td                                   {padding-block: 0.75em; line-height: 1.1; vertical-align: top;}
.pricelist td:nth-child(1)                      {text-align: left; padding-right: 1.2em;}
.pricelist td:nth-child(2)                      {text-align: right; color: var(--color1);}
.pricelist td .note                             {display: block; font-size: 0.8em; line-height: 1.1; opacity: 0.7; margin-top: 0.25em;}
.pricelist tr:not(:last-child) td               {border-bottom: solid 1px rgba(255,255,255,0.3);}

.contact1                                       {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap;}
.contact1 span                                  {display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; font-size: 1.15em;}
  @media screen and (min-width: 641px)          {
  .contact1 span                                {width: auto;}
  .contact1 span:last-child:before              {display: block; width: 0.1em; height: 0.8em; background: var(--color1); margin-inline: 0.6em; position: relative; top: 0.1em; content: "";}
  }
  @media screen and (max-width: 640px)          {
  .contact1 span:last-child                     {font-size: 1.4em; font-weight: 700;}
  }

.map                                            {display: block; width: 100%;}
.map span img                                   {display: block; width: 100%; border-radius: var(--frame);}

.contact-soc                                    {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5em 1em; font-size: 1.3em;}
.contact-soc a                                  {display: flex; align-items: center; gap: 0.3em; color: white; font-weight: 700; position: relative; z-index: 1; transition: .15s ease-in-out;}
.contact-soc a img                              {display: block; width: 1em; position: relative; top: 0.04em;}
.contact-soc a:hover                            {color: var(--color1);}

.contact-mail                                   {display: flex; width: 100%; justify-content: center; background: rgba(0,0,0,0.5); padding-block: 0.8em; border-radius: 1.7em;}
.contact-mail a                                 {display: flex; align-items: center; gap: 0.3em; font-size: 1.4em; color: white; font-weight: 700; position: relative; z-index: 1; transition: .15s ease-in-out;}
.contact-mail a img                             {display: block; width: 1em; position: relative; top: 0.04em;}
.contact-mail a:hover                           {color: var(--color1);}

.contact-form                                   {display: flex; width: 100%; flex-wrap: wrap; background: rgba(0,0,0,0.5); padding: min(3em, calc(1em + 3vw)); box-sizing: border-box; border-radius: 1.4em;}
.contact-form h2                                {margin-bottom: 0.5em;}
.contact-form .form-items                       {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em 0.4em;}
.contact-form .form-items > div                 {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em;}
.contact-form .form-items :is(input, textarea)  {display: block; width: 100%; color: white; font-size: 1em; font-weight: 700; background: transparent; padding-inline: 1em; border: solid 0.16em var(--color1); outline: none; border-radius: var(--border-radius); border-radius: 1.6em; font-family: var(--font1); box-sizing: border-box; transition: .15s ease-in-out;}
.contact-form .form-items input                 {height: 3em; padding-bottom: 0.2em;}
.contact-form .form-items textarea              {height: 10rem; padding-block: 1em;}
.contact-form .form-items :is(input, textarea):focus        
                                                {background: rgba(0,0,0,0.5); border-color: white;}
.contact-form .form-items label                 {display: block; width: 100%; font-size: 0.85em; font-variation-settings: "wght" 600; order: -1;}
.contact-form .send                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em 0; margin-top: 1rem;}
.contact-form .send span                        {display: block; width: 100%; text-align: center; font-size: 0.75em; color: white; line-height: 1.3; opacity: 0.6;} 
.contact-form .send span a                      {color: inherit; text-decoration: underline;}
.contact-form .send span a:hover                {opacity: 0.7; text-decoration-color: transparent;}
  @media screen and (min-width: 769px)          {
  .contact-form .form-items > div:not(:nth-child(4))  
                                                {width: calc(33.33% - 0.3em);}
  }

.cta-gladiators                                 {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em 0; background: rgba(0,0,0,0.5); border-radius: 1.2em; padding: min(2em, calc(1em + 3vw)); box-sizing: border-box;}
.cta-gladiators > div                           {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em 0.3em;}
.cta-gladiators > div .title                    {display: block; width: 100%; font-size: 1.85em; font-weight: 700; line-height: 1.1;}
.cta-gladiators > div .button                   {font-size: 0.7em; color: white; border-color: #da0026; border-radius: 1.5em;}
.cta-gladiators > div .button:hover             {border-color: #b1011e; color: #b1011e; background: rgba(0,0,0,0.5);}
.cta-gladiators img                             {display: block; width: 12em; position: relative; left: 0.8em;}
  @media screen and (min-width: 769px)          {
  .cta-gladiators                               {width: 112%; justify-content: space-between; margin-inline: -6%;}
  .cta-gladiators > div                         {width: 14em; justify-content: flex-start;}
  .cta-gladiators img                           {width: 11em;}
  }
  @media screen and (max-width: 768px)          {
  .cta-gladiators > div .title                  {text-align: center;}  
  .cta-gladiators img                           {order: -1;}
  }

.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.65); backdrop-filter: blur(12px); 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: var(--color0); position: relative; border-radius: 1.2em; overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;}
.wndw > div:before                              {display: block; width: 100%; height: 1.2rem; background: var(--color0); position: absolute; left: 0; top: 0; content: ""; z-index: 5;}
.wndw > div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}
.wndw.show                                      {left: 0;}
.wndw.show:before                               {opacity: 1;}
.wndw.show > div                                {top: 0;}
.wndw.show.hide                                 {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;}
.wndw.show.hide:before                          {opacity: 0;}
.wndw.show.hide > div                           {top: -5em; opacity: 0;}
.wndw .close                                    {display: block; width: 1.2em; height: 1.2em; font-size: 1em; cursor: pointer; position: absolute; right: 1rem; top: 1rem; z-index: 10002;}
.wndw .close span                               {display: block; width: 100%; height: 3px; background: var(--color1); border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;}
.wndw .close:hover span                         {background: var(--color1b);}
.wndw .close span:nth-child(1)                  {transform: rotate(45deg);}
.wndw .close span:nth-child(2)                  {transform: rotate(-45deg);}
.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(2rem, 8%); box-sizing: border-box;}
.wndw .wndw-content .icon                       {display: block; width: 3.6em; margin-bottom: -0.6em;}
.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.7em; color: var(--color1); font-weight: 700; line-height: 1.1; margin-bottom: -0.35em;}
.wndw .wndw-content .title span                 {display: block; font-weight: 500;}
.wndw .wndw-content p                           {display: block; width: 100%; text-align: center;}
.wndw .wndw-content .flex                       {gap: 0.3em;}
.wndw .wndw-content .button                     {font-size: 0.8em; border-radius: 2em;}