/*------------------------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%;}
#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}

body                                            { display: block !important; }

:root                                           {
                                                --font1:        "proxima-nova", sans-serif; /* 400, 700 */
                                                --font2:        "optima-lt-pro", sans-serif; /* 700 */

                                                --color0:       #242424; 
                                                --color0b:      black;                                               
                                                --color1:       #da300d; 
                                                --color1b:      #f2340e;
                                                --color2:       #1f2e89; 
                                                --color2b:      #4c4b88; 
                                                --color3:       #3c3230;
                                                --color3b:      #cdada6;

                                                --wrapper-padding:      6vw;
                                                --section-padding:      min(5rem, calc(1.3rem + 6vw));

                                                --header:               6rem;
                                                --padding-inline:       1.6rem;

                                                --gap1:                 min(2rem, calc(0.7rem + 5vw));
                                                }
  
html                                            {display: block; width: 100%; height: 100%; text-align: center; font-size: min(22px, calc(13px + 1vw)); font-weight: 400; line-height: 1.45; font-family: var(--font1);}

body                                            {display: block; width: 100%; height: 100%; margin-inline: auto; position: relative; overflow-x: hidden; overflow-y: auto; padding-top: var(--header); box-sizing: border-box;}
body :has(.header li.show),
body.fixed                                      {height: 100%; overflow: hidden;}


.background                                     {display: block; position: fixed; inset: 0; background: url("images/wall.webp") no-repeat center top; background-size: cover;
                                                }
  @media screen and (min-width: 2000px)         {
  .background                                   {width: 3000px; left: calc(50% - 1500px); right: auto;
                                                 -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: 0.6rem; margin-inline: auto; position: relative; box-sizing: border-box; z-index: 10;}
.wrapper.medium                                 {max-width: 40rem;}
.wrapper.narrow                                 {max-width: 32rem;}


.wrapper.wide                                   {max-width: 56rem;}

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: absolute; left: 0; top: 0; 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 nav                                     {display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}
.header nav ul li a                             {display: flex; justify-content: space-between; align-items: center; color: var(--color0); font-weight: 700; line-height: 1.1; box-sizing: border-box; position: relative; z-index: 1;cursor: pointer; 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.52em;}
.header nav > ul > li > a:hover,               
.header nav > ul > li > a[aria-current="page"]  {color: var(--color1);}
.header nav > ul > li ul                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8em; overflow: hidden; box-sizing: border-box;}
.header nav > ul > li ul li                     {display: block;}
.header nav > ul > li ul li a                   {width: 100%; flex-direction: column; gap: 0.8em; font-size: 0.8em; color: var(--color0); white-space: nowrap;}  
.header nav > ul > li ul li a img               {display: block; width: 100%; border-radius: 0.5em; border: solid 0.5em rgba(255,255,255,0.4); box-shadow: 0 0 0.8em rgba(0,0,0,0.2); box-sizing: border-box; transition: .15s ease-in-out;}
.header nav > ul > li ul li a:hover             {color: var(--color1);}
.header nav > ul > li ul li a:hover img         {filter: brightness(1.15);}
.header nav > ul > li ul li a[aria-current="page"]
                                                {color: var(--color1);}

.header nav > div                               {display: flex; align-items: center; flex-wrap: wrap; gap: 0.8em 1.45em; position: relative; z-index: 1; box-sizing: border-box;}
.header nav > div > a:not(.button)              {color: var(--color0); font-weight: 700; line-height: 1.1; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav > div > a:not(.button):hover        {color: var(--color1);}
.header nav > div .soc                          {display: flex; gap: 0.65em;}
.header nav > div .soc a                        {display: block; width: 1em;}
.header nav > div .soc a svg                    {display: block; width: 1em; height: 1em; fill: var(--color1); transition: .15s ease-in-out;}
.header nav > div .soc a:hover svg              {fill: var(--color0b);}
.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: var(--color1);}
.header .navicon div                            {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.header li.show .navicon span:nth-child(2)      {transform: rotate(45deg);}
.header li.show .navicon span:nth-child(3)      {transform: rotate(-45deg);}
.header li.show .navicon span:nth-child(1), 
.header li.show .navicon span:nth-child(4)      {opacity: 0 !important;}
.header li.show .navicon div                    {display: block;}
  @media screen and (min-width: 1081px)         {
  .header .home                                 {display: none;}
  .header .logo                                 {width: 10em; left: calc(50% - 5em);}
  .header .collapse                             {width: 100%;}
  .header nav                                   {width: 100%; align-items: center;}
  .header nav > ul                              {gap: 1.65em; margin-right: 13em;}
  .header nav > ul > li                         {padding-block: 0.3em;}
  .header nav > ul > li:first-child:after       {display: block; width: 0.07em; height: 1em; background: var(--color1); margin-left: 1.65em; position: relative; z-index: 1; content: "";}
  .header nav > ul > li > a                     {font-size: 1em;}
  .header nav > ul > li .navicon                {font-size: 0.8em; position: relative; top: 0em;}
  .header nav > ul > li ul                      {display: flex; width: 100%; justify-content: center; position: fixed; left: 9999px; top: 0; padding-block: var(--header) 1.5em; overflow: hidden; background: rgba(236,236,236,0.85); backdrop-filter: blur(5px); border-bottom: solid 0.6em rgba(255,255,255,0.2); box-shadow: 0 0 1.8em rgba(0,0,0,0.2); box-sizing: border-box; opacity: 0; transition: opacity .25s ease-in-out;}
  .header nav > ul > li ul:before               {display: block; position: absolute; inset: 0; z-index: -5; content: "";}
  .header nav > ul > li.show ul                 {left: 0; opacity: 1;}
  .header nav > ul > li ul li                   {width: 7em;}
  .header .button                               {font-size: 0.7em;}                                              
  .header :is(#navicon)                         {display: none;}                 
  }
  @media screen and (min-width: 1081px) and (max-width: 1366px){
  .header                                       {font-size: 0.9em;}
  .header .logo                                 {width: 9em; left: calc(50% - 4.5em);}
  .header nav > ul                              {gap: 1.2em;}
  .header nav > ul > li:first-child:after       {margin-left: 1.2em;}
  .header .button                               {font-size: 0.7em;}                                              
  .header nav > div                             {gap: 0.85em;}
  }
  @media screen and (max-width: 1080px)         {
  body                                          {--header: 5rem;}
  .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: var(--color0);}
  .header .logo                                 {width: 9em; left: calc(50% - 4.5em); top: 0;}
  .header .collapse                             {width: min(18rem, calc(8rem + 45vw)); height: 100%; background: rgba(236,236,236,0.85); backdrop-filter: blur(5px); border-left: solid 0.6em rgba(255,255,255,0.2); box-shadow: 0 0 1.8em rgba(0,0,0,0.2); 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 nav                                   {margin-top: var(--header)}
  .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 1.2rem;}              
  .header nav > ul > li > a[aria-current="page"]{background: ;}
  .header nav > ul > li:nth-child(1)            {order: 3;}
  .header nav > ul > li:nth-child(1) > a,
  .header nav > ul > li .navicon                {display: none;}
  .header nav > ul > li ul                      {justify-content: space-between; gap: 1.2em 0.8em; padding: 1em 1.23rem;}
  .header nav > ul > li ul li                   {width: calc(50% - 0.4em);}
  .header nav > ul > li ul li a                 {align-items: flex-start;}
  .header nav > div                             {flex-direction: column; align-items: flex-start; position: static; padding-inline: 1.2rem; margin-block: 1em 2em;}
  .header nav > div .soc                        {font-size: 1.1em; position: absolute; left: 1.1rem; top: calc(0.5 * var(--header) - 0.5em);}
  .header nav > div .button                     {order: -1;}
  .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 .collapse                        {right: 0; opacity: 1;}
  .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;}
}

.footer                                         {display: block; width: 100%; padding-block: var(--section-padding) calc(0.5 * var(--section-padding)); backdrop-filter: blur(3px); position: relative; z-index: 1; box-shadow: 0 0 1.4em rgba(0,0,0,0.1);}
.footer:before                                  {display: block; background: var(--color1); position: absolute; inset: 0; z-index: -1; content: ""; opacity: 0.09; filter: saturate(0.5);}
.footer .upper                                  {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2.2em 3em;}
.footer .upper > *                              {display: flex; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.footer .upper > div .logo                      {display: block; width: 8em; margin-bottom: 0.5em;}
.footer .upper > div span                       {display: block; width: 100%; text-align: center; font-size: 0.85em; opacity: 0.7;}
.footer .upper > div .small                     {display: block; font-size: 0.8em;}
.footer .upper > div .card                      {display: flex; justify-content: center; align-items: center; gap: 0.6em; text-align: left; font-size: 0.65em; line-height: 1.2; margin-top: 0.8em;}
.footer .upper > div .card img                  {display: block; width: 2.3em; opacity: 0.7;}
.footer .upper .quick-contacts                  {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.4em; font-size: 0.92em; padding-bottom: 1em; position: relative;}
.footer .upper .quick-contacts:after            {display: block; width: 3em; height: 0.1em; background: var(--color1); position: absolute; left: calc(50% - 2em); bottom: 0; content: "";}
.footer .upper .quick-contacts a                {display: flex; align-items: center; gap: 0.45em; color: var(--color0); transition: .15s ease-in-out;}
.footer .upper .quick-contacts a img            {display: block; width: 1em;}
.footer .upper .quick-contacts a:hover          {color: var(--color1);}
.footer .upper > div .hours-info                {display: block; font-size: 0.7em;}
.footer .upper .hours                           {font-size: 0.7em;}
.footer-links                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em 1em; font-size: 0.7em; opacity: 0.6;}
.footer-links > *                               {display: block; color: var(--color0);}
.footer-links a                                 {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.footer-links a:hover                           {opacity: 0.8; text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .footer .upper > *                            {width: 14em;}
  }
  @media screen and (min-width: 601px) and (max-width: 1080px){
  .footer .upper > div                          {width: calc(50% - 1.5em); max-width: 15em;}
  .footer .upper > img                          {width: 20em; order: 3;}
  }  
  @media screen and (max-width: 600px)          {
  .footer .upper > *                            {width: 100%; max-width: 16em;}
  }

.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: 700; line-height: 1.15; box-sizing: border-box; font-family: var(--font2);}
h1                                              {font-size: min(2.4rem, calc(1.3rem + 3vw));}
h2                                              {font-size: min(2rem, calc(1rem + 3vw));}
h3                                              {font-size: min(1.45rem, calc(0.7rem + 2vw));}

.hp h2                                          {font-size: min(2.4rem, calc(1.3rem + 3vw));}
.hp h3                                          {font-size: min(2rem, calc(1rem + 2vw));}

.hours                                          {display: flex; flex-direction: column; align-items: center; gap: 0.1em;}
.hours li                                       {display: flex;}
.hours li strong                                {display: block; font-weight: 700; margin-right: 0.5em;}
.hours li span                                  {display: flex !important; align-items: center; font-size: 1em !important; white-space: nowrap;}
.hours li span:nth-child(3):before              {display: block; width: 0.085em; height: 0.7em; background: var(--color1); margin-inline: 0.5em; position: relative; top: 0.05em; content: "";}

.main :is(p, li)                                {width: 100%;}
.main :is(p a, li a)                            {color: inherit; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.main :is(p a, li a):hover                      {color: var(--color1b); text-decoration-color: transparent;}
.main .text-note                                {display: block; width: 100%; text-align: center; font-size: 0.7em; opacity: 0.6;}
.main .inline-note                              {opacity: 0.6;}

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

.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;}
.section.dark                                   {background: var(--color3);}
.section.dark :is(h2, h3, p, .text-note)        {color: white;}
.section.dark .button.border2                   {color: white; border-color: var(--color2b);}
.section.dark .button.border2:hover             {border-color: var(--color2); box-shadow: 0 0 2em rgba(255,255,255, 0.12); background: rgba(0,0,0,0.1);}

.page-article                                   {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 2.2rem;}
.page-article :is(h2, h3)                       {margin-bottom: -0.6em;}
.page-article h2 + .subheadline                 {display: block; width: 100%; font-size: min(1.3rem, calc(0.6rem + 3vw)); color: var(--color3b); font-weight: 700; font-family: var(--font2); margin-top: -0.7em;}
.page-article .page-head + p,
.page-article h2 + p,
.page-article h3 + p,
.page-article p + p                             {margin-top: -0.4rem;}

.page-head                                      {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em;}
.page-head h1                                   {color: var(--color1); margin-top: 0.2em;}

.page-article .box                              {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2rem; border: solid 0.12em var(--color0); border-radius: 0.8em; box-sizing: border-box; padding: min(3em, calc(1em + 4vw));}
.page-article .box > *:first-child              {margin-top: 0 !important;}
.page-article .box p + p                        {margin-top: -1.6rem;}

.box .check-in-out                              {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em 1.4em;}
.box .check-in-out > div                        {display: flex; align-items: center; gap: 0.5em;}
.box .check-in-out > div img                    {display: block; width: 2em;}
.box .check-in-out > div span                   {display: block; text-align: left; line-height: 1.1;}
.box .check-in-out > div span strong            {display: block; font-size: 0.7em; color: var(--color1); font-weight: 700;}

.box .storno                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em; font-size: 0.7em;}
.box .storno span                               {display: block;}
.box .storno .title                             {font-size: 1.2em; font-weight: 700;}

.cta1                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2rem;}
.cta1 .button                                   {font-size: 0.9em;}
.cta-contacts                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em 1.4em; font-size: 1.15em; margin-block: -0.6em;}
.cta-contacts a                                 {display: flex; align-items: center; gap: 0.45em; color: var(--color0); font-weight: 700; transition: .15s ease-in-out;}
.cta-contacts a img                             {display: block; width: 1em;}
.cta-contacts a:hover                           {color: var(--color1);}

.submenu                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.2em 0.8em; box-sizing: border-box;}
.submenu a                                      {display: block; font-size: 1em; color: var(--color2); font-weight: 700; text-decoration: underline; transition: .15s ease-in-out;}
.submenu a:hover                                {color: var(--color2b); text-decoration-color: transparent;}

.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.25em; box-sizing: border-box;}
.pagination a                                   {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; font-size: 0.9em; color: var(--color0); font-weight: 700; padding-bottom: 0.07em; box-sizing: border-box; position: relative; z-index: 1; transition: .15s ease-in-out;}
.pagination a:before                            {display: block; background-image: linear-gradient(to top, var(--color2), var(--color2b)); position: absolute; inset: 0; z-index: -1; border-radius: 0.3em; transform: rotate(45deg); content: ""; opacity: 0; transition: .15s ease-in-out;}
.pagination a:hover                             {color: var(--color2);}
.pagination a:hover:before                      {opacity: 0.15;}
.pagination a.sel                               {color: white; margin-inline: 0.25em;}
.pagination a.sel:before                        {opacity: 1;}

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

.frame                                          {position: relative; isolation: isolate; border-radius: 0.6em; overflow: hidden; box-shadow: 0 0 0.8em rgba(0,0,0,0.2);} 
.frame:before                                   {display: block; position: absolute; inset: 0.42em; border-radius: 0.27em; outline: solid 0.46em rgba(255,255,255,0.4); z-index: 2; content: "";}
.frame img                                      {border-radius: 0.45em;}

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

.button                                         {display: flex; height: 2.6em; justify-content: center; align-items: center; gap: 0.45em; font-size: min(0.7em, calc(0.4em + 1vw)); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.3em; outline: solid 2px transparent; padding: 0.1em 0.85em 0 0.96em; border-radius: 0.2em; border: solid 0.16em 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; position: relative; top: -0.05em;}
.button.border1                                 {border-color: var(--color1); color: var(--color0);}
.button.border1:hover                           {border-color: var(--color1b); color: var(--color1b);}
.button.border2                                 {border-color: var(--color2); color: var(--color0);}
.button.border2:hover                           {border-color: var(--color2b); color: var(--color2b);}
.button.color2                                  {background-image: radial-gradient(var(--color2b), var(--color2)); color: white;}
.button.color2:hover                            {filter: brightness(1.3);}

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

.img-text                                       {display: flex; width: 100%; justify-content: center; align-items: center; gap: 2em 0; flex-wrap: wrap;}
.img-text > div                                 {display: flex; width: 100%; max-width: 32rem; justify-content: center; flex-wrap: wrap; gap: 0.8em; container-type: inline-size;}
.img-text .text :is(h1, h2, p)                  {text-align: center;}
.img-text .text h1                              {font-size: 2.5em; color: var(--color1);}
.img-text .text h2                              {font-size: 2.1em; color: var(--color0);}
.img-text .text p                               {text-align: center;}
.img-text .text .buttons                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.35em; font-size: 0.9em; margin-top: 0.5em;}
.img-text .imgs .inner                          {display: block; width: 100%; min-height: 18em; padding-top: 80%; box-sizing: border-box; position: relative;}
.img-text .imgs .img                            {display: block; position: absolute;}
.img-text .imgs .img img                        {display: block; width: 100%; height: 100%; object-fit: cover;}
.img-text .imgs .img.i1                         {width: 80%; height: 52%; left: 0; top: 0; z-index: -1;}
.img-text .imgs .img.i2                         {width: 60%; height: 40%; left: 8%; bottom: 0;}
.img-text .imgs .img.i3                         {width: 40%; height: 60%; right: 0; top: 30%;}
.img-text .imgs .img > div                      {display: block; position: absolute; inset: 0;}
.img-text .imgs .img > div span                 {display: block; position: absolute; inset: 0; opacity: 0; animation: fade 12s infinite;}
.img-text .imgs .img.i1 > div span:nth-child(2) {animation-delay: 4s;}
.img-text .imgs .img.i1 > div span:nth-child(3) {animation-delay: 8s;}
.img-text .imgs .img.i2 > div span              {animation: fade2 15s infinite;}
.img-text .imgs .img.i2 > div span:nth-child(2) {animation-delay: 5s;}
.img-text .imgs .img.i2 > div span:nth-child(3) {animation-delay: 10s;}
.img-text .imgs .img.i3 > div span              {animation: fade3 18s infinite;}
.img-text .imgs .img.i3 > div span:nth-child(2) {animation-delay: 6s;}
.img-text .imgs .img.i3 > div span:nth-child(3) {animation-delay: 12s;}
.img-text .imgs .claim                          {display: block; width: max(10em, 36%); text-align: left; background-image: linear-gradient(45deg, var(--color2), var(--color2b)); border-radius: 0.6em 0 0 0.6em; container-type: inline-size; position: absolute; right: 40%; top: 45%; padding: 1.2em; box-sizing: border-box;} 
.img-text .imgs .claim span                     {display: block; width: 100%; container-type: inline-size; font-size: 10cqw; color: white; font-style: italic; font-family: var(--font2);}
.img-text .imgs .claim .soc                     {display: flex; align-items: center; gap: 0.2em; position: absolute; right: 10%; bottom: -0.3em;}
.img-text .imgs .claim .soc a                   {display: flex; width: 1.4em; height: 1.4em; justify-content: center; align-items: center; background: white; border-radius: 100%; border: solid 0.1em transparent; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.3); transition: .15s ease-in-out;}
.img-text .imgs .claim .soc a svg               {display: block; width: 60%; height: 60%; fill: var(--color1);}
.img-text .imgs .claim .soc a:hover             {border-color: var(--color1);}
  @keyframes fade                               {
    0%   {opacity: 0;}
    10%   {opacity: 1;}
    33%  {opacity: 1;}
    43%  {opacity: 0;}
    100% {opacity: 0;}
  }
  @keyframes fade2                               {
    0%   {opacity: 0;}
    8%   {opacity: 1;}
    33%  {opacity: 1;}
    41%  {opacity: 0;}
    100% {opacity: 0;}
  }
  @keyframes fade3                               {
    0%   {opacity: 0;}
    8%   {opacity: 1;}
    33%  {opacity: 1;}
    41%  {opacity: 0;}
    100% {opacity: 0;}
  }
  @media screen and (min-width: 1367px)         {
  .img-text                                     {width: 114%; margin-inline: -7%;}
  .img-text .text                               {margin-left: 6%; z-index: 2;}
  }
  @media screen and (min-width: 1081px)         {
  .img-text                                     {justify-content: space-between;}
  .img-text .text                               {width: 40%; justify-content: flex-start;}
  .img-text .text h1                            {font-size: min(2.5em, 12cqw);}
  .img-text .text h2                            {font-size: min(2.1em, 10cqw);}
  .img-text .text :is(h1, h2, p)                {text-align: left;}
  .img-text .text .buttons                      {justify-content: flex-start;}
  .img-text .imgs                               {width: 56%;} 
  .img-text .imgs .inner:before                 {display: block; width: 114%; height: 88%; position: absolute; top: 6%; right: 86%; border: solid 0.14em var(--color1); border-radius: 0.7em; box-sizing: border-box; content: "";}
  .img-text.rev .imgs                           {order: -1;}
  .img-text.rev .imgs .img.i1                   {right: 0; left: auto;}
  .img-text.rev .imgs .img.i2                   {right: 8%; left: auto;}
  .img-text.rev .imgs .img.i3                   {right: auto; left: 0;}
  .img-text.rev .imgs .inner:before             {right: auto; left: 86%;}
  .img-text.it1                                 {margin-bottom: -3%;}
  .img-text.it2                                 {margin-top: -3%;}
  .section:has(.it1)                            {z-index: 2; padding-bottom: 0;}
  .section:has(.it2)                            {z-index: 2; padding-top: 0;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .img-text .imgs .inner:before                 {width: 200%;}
  }

  @media screen and (max-width: 1080px)         {
  .img-text .imgs                               {order: -1;}
  }

.infographics                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em 0.6em;}
.infographics > div                             {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em; padding: 2.2em 1.5em; backdrop-filter: blur(4px); border: solid 0.1em transparent; box-sizing: border-box; border-radius: 0.7em; box-shadow: 0 0 0.6em rgba(0,0,0,0.1); transition: .2s ease-in-out;}
.infographics > div:has(a):hover                {box-shadow: 0 0 0.85em rgba(0,0,0,0.18); border-color: var(--color1);}
.infographics > div img                         {display: block; width: 3em;}
.infographics > div span                        {display: block; width: 100%; text-align: center; line-height: 1.25;}
.infographics > div .title                      {color: var(--color1); font-size: 1.1em; font-family: var(--font2); margin-top: 0.2em;}
.infographics > div .text                       {font-size: 0.75em;}
.infographics > div .button                     {font-size: 0.55em; margin-top: 0.85em;}
  @media screen and (min-width: 1081px)         {
  .infographics.i4 > div                        {width: calc(25% - 0.475em);}
  .infographics.i3 > div                        {width: calc(33.33% - 0.6em);}
  }
  @media screen and (min-width: 481px) and (max-width: 1080px){
  .infographics > div                           {width: calc(50% - 0.4em);}
  }

.infographics.no-box > div                      {padding: 0; backdrop-filter: none; border: none; box-shadow: none;}

.dark .infographics > div span                  {color: white;}

.hp-about                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.2em 0; margin-top: 2em; position: relative;}
.hp-about p                                     {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em; text-align: center;}
.hp-about p:first-of-type                       {font-size: 1.2em; color: var(--color1); font-weight: 700; line-height: 1.5; font-family: var(--font2);}
.hp-about p span                                {display: block;}
.hp-about .sep                                  {display: flex; width: 100%; justify-content: center; align-items: center; position: relative;}
.hp-about .sep .map-link                        {display: flex; flex-direction: column; align-items: center; gap: 0.8em; font-size: 0.7em; color: var(--color0); font-weight: 700; text-decoration: underline; position: relative; top: 0.3em; transition: .15s ease-in-out;} 
.hp-about .sep .map-link .icon                  {display: flex; width: 2rem; height: 2rem; justify-content: center; align-items: center; border: solid 0.25em var(--color1); border-radius: 0.4em; box-sizing: border-box; transform: rotate(45deg);}
.hp-about .sep .map-link .icon img              {display: block; width: 70%; transform: rotate(-45deg);}
.hp-about .sep .map-link:hover                  {color: var(--color1); text-decoration-color: transparent;}
.hp-about .sep:before,
.hp-about .sep:after                            {display: block; width: calc(50% - 2rem); height: 0.1em; background: var(--color1); position: absolute; top: calc(50% - 0.05em); content: "";}
.hp-about .sep:before                           {left: 0;}
.hp-about .sep:after                            {right: 0;}
  @media screen and (min-width: 1081px)         {
  .hp-about                                     {justify-content: space-between;}
  .hp-about p                                   {width: 44%; text-align: left;} 
  .hp-about .sep                                {width: 2rem; height: 100%; position: absolute; left: calc(50% - 1rem); top: 0;}
  .hp-about .sep:before,
  .hp-about .sep:after                          {width: 0.1em; height: calc(50% - 2.3rem); left: calc(50% - 0.05em);}
  .hp-about .sep:before                         {top: 0;}
  .hp-about .sep:after                          {top: auto; bottom: 0;}
  }

.list1                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.45em; text-align: left;}
.list1 li                                       {display: block; width: 100%; font-size: 0.85em; padding-left: 1.2em; line-height: 1.3; box-sizing: border-box; position: relative;}
.list1 li strong                                {display: block; font-size: 1.2em; color: var(--color1);}
.list1 li:before                                {display: block; width: 0.6em; height: 0.6em; border: solid 0.145em var(--color1); border-radius: 0.2em; position: absolute; left: 0; top: 0.48em; transform: rotate(45deg); box-sizing: border-box; content: "";}
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .list1 li                                     {width: 48.5%;}                                       
  }
  @media screen and (max-width: 640px)          {
  .list1                                        {gap: 0.8em;}
  .list1 li                                     {padding: 1.8em 0 0; text-align: center;}
  .list1 li:before                              {width: 1em; height: 1em; top: 0; left: calc(50% - 0.5em); border-width: 0.22em;}
  .list1 li:first-child                         {padding-top: 0;}
  .list1 li:first-child::before                 {display: none;}
  }

.swiper-button                                  {display: flex; width: var(--swiper-button); height: var(--swiper-button); justify-content: center; align-items: center; font-size: 1em; background-image: linear-gradient(to top, var(--color2), var(--color2b)); margin: 0; padding: 0; border-radius: 0.3em; box-sizing: border-box; cursor: pointer; position: absolute; top: calc(50% - 0.5 * var(--swiper-button)); transform: rotate(45deg); transition: .15s ease-in-out; --swiper-button: 2.2rem;}                                
.swiper-button-prev                             {left: calc(-0.5 * var(--swiper-button)); transform: rotate(225deg);}
.swiper-button-next                             {right: calc(-0.5 * var(--swiper-button));}
.swiper-button img                              {display: block; width: 22%; transform: rotate(-45deg);}
.swiper-button:before,
.swiper-button:after                            {display: none;}
.swiper-button-disabled,
.swiper-button-lock                             {opacity: 0 !important;}
.swiper-button:hover                            {filter: brightness(1.1);}
  @media screen and (max-width: 768px)          {
  .swiper-button                                {--swiper-button: 3rem;}                                
  .swiper-button-prev                           {left: auto; right: calc(50vw + 50% - 0.5 * var(--swiper-button));}
  .swiper-button-next                           {right: auto; left: calc(50vw + 50% - 0.5 * var(--swiper-button));}
  .swiper-button img                            {width: 16%; position: relative; left: -18%; bottom: -18%;}
  }

.carousel                                       {display: flex; width: 100%; justify-content: center; position: relative; container-type: inline-size;}
.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;}

.hp-blog                                        {margin-top: 1rem;}
.hp-blog .preview > div .title                  {color: white;}
.hp-blog .preview > div .date                   {color: var(--color1b);}
.hp-blog + .button                              {font-size: 0.65em;}
.hp-blog .swiper-slide                          {opacity: 0.35;}
.hp-blog .swiper-slide-active                   {opacity: 1;}
  @media screen and (max-width: 1800px)         {
  .hp-blog .swiper                              {overflow: visible;}
  }
  @media screen and (min-width: 769px)          {
  .hp-blog .swiper-button                       {margin-top: -3em;}
  .hp-blog .swiper-slide-next,
  .hp-blog .swiper-slide-active + .swiper-slide-next + .swiper-slide
                                                {opacity: 1;}
  }

.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%; padding-top: 66%; position: relative;}
.preview .img span                              {display: block; width: 100%; height: 100%; position: absolute; inset: 0; 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.4);}
.preview > div                                  {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.4em; padding-inline: 0.45em; box-sizing: border-box; position: relative;}
.preview > div span                             {display: block; width: 100%; text-align: left;}
.preview > div .title                           {font-size: 1em; font-weight: 700; line-height: 1.2; margin: 0 !important; font-family: var(--font2);}
.preview > div .title a                         {color: inherit; transition: .15s ease-in-out;}
.preview > div .title a:hover                   {color: var(--color1b);}
.preview > div .date                            {display: block; font-size: 0.7em; color: var(--color1); font-weight: 700; margin-top: 0.25em;}

.history                                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6rem 0; margin-top: 1rem;}
.history > div                                  {display: flex; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.3em; box-sizing: border-box; position: relative;}
.history > div:not(:first-child):before         {display: block; width: 2em; text-align: center; font-size: 5em; position: absolute; opacity: 0.15; content: "...";}
.history > div .img                             {display: block; width: 8rem; height: 8rem; margin-bottom: 0.8em; transition: .15s ease-in-out;}
.history > div .img img                         {display: block; width: 100%; height: 100%; object-fit: cover;}
.history > div .img:hover                       {filter: brightness(1.1);}
.history > div > *                              {display: block; width: 100%;}
.history > div .year                            {font-size: 0.9em; font-family: var(--font2); font-weight: 700;}
.history > div h3                               {font-size: 1.2em; color: var(--color1); margin-block: -0.15em 0.1em;}
  @media screen and (min-width: 1081px)         {
  .history > div                                {width: 33.33%;}
  .history > div:before                         {line-height: 5.5rem; top: 0; left: -1em;}
  .history > div > *                            {max-width: 13rem;}
  .history > div p                              {font-size: 0.8em;}
  }
  @media screen and (max-width: 1080px)         {
  .history > div:not(:first-child):before       {width: 6rem; top: -6.4rem; margin-left: 3rem; transform: rotate(90deg);}
  .history > div p                              {max-width: 24rem;}
  }

.hp-reviews                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.4em; margin-top: 1rem;}
.hp-reviews .swiper-slide                       {opacity: 0.35;}
.hp-reviews .swiper-slide-active                {opacity: 1;}
  @media screen and (max-width: 1800px)         {
  .hp-reviews .swiper                           {overflow: visible;}
  }
  @media screen and (min-width: 769px)          {
  .hp-reviews .swiper-slide-next                {opacity: 1;}
  }

.review                                         {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; gap: 1em; flex-wrap: wrap; text-align: left; padding: min(2.6em, calc(0.5em + 4vw)); box-sizing: border-box; backdrop-filter: blur(4px); border-radius: 0.8em; border: solid 0.1em rgba(0,0,0,0.1);}
.review .person                                 {display: block;}
.review .person span                            {display: block; font-size: 1em; font-weight: 700;}
.review .person img                             {display: block; width: 4em; margin-top: 0.2em;}
.review .date                                   {display: block; font-size: 0.7em; color: #999999; text-align: right;}
.review .text                                   {display: block; width: 100%; font-size: 0.85em; font-style: italic; color: #666666;}

/*.mapycz                                         {display: flex; width:100%; justify-content:center; align-items: center; text-align:center; gap: 1em; font-size: 0.7em; color: #999999; text-decoration: underline; transition: .5s ease-in-out;}*/
.mapycz                                         {display: flex; align-items: center; gap: 1em; margin-top:1rem; font-size: 0.7em; color: #999999; text-decoration: underline; transition: .5s ease-in-out;}
.mapycz img                                     {display: block; width: 12em;}
.mapycz:hover                                   {color: #666666; text-decoration-color: transparent;}

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

.tips                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em;}
.tips .group                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2em 3em;}
.tips .group:not(:first-child)                  {margin-top: 3em;}
.tips .group h2                                 {color: var(--color1); margin-block: 0 -0.45em;}
.tips .item                                     {display: flex; width: calc(50% - 1.5em); min-width: 14em; max-width: 100%; flex-direction: column; align-items: center; gap: 0.6em; position: relative;}
.tips .item .img                                {display: block; width: 7rem; height: 7rem; border-radius: 100%; padding: 0.3em; border: solid 0.11em var(--color1); box-sizing: border-box; transition: .15s ease-in-out;}
.tips .item .img:hover                          {filter: brightness(1.15);}
.tips .item .img span                           {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; background: url("images/tipy-na-vylety/placeholder.svg") no-repeat center center; background-size: cover;}
.tips .item .img span img                       {display: block; width: 100%; height: 100%; object-fit: cover;}
.tips .item span                                {display: block;}
.tips .item .dist                               {width: 4.4em; text-align: center; font-size: 0.65em; color: white; font-weight: 700; background: var(--color1); padding: 0.3em 0.7em 0.35em; border-radius: 0.25em; box-sizing: border-box; position: absolute; left: calc(50% - 2.2em); top: 6rem;}
.tips .item .title                              {font-size: 1.2em; font-weight: 700; font-family: var(--font2); margin-block: 0.1em -0.4em;}
.tips .item .text                               {font-size: 0.8em;}
.tips .item .tip-contact                        {display: flex; align-items: center; gap: 0.45em; font-size: 0.85em; color: var(--color0); font-weight: 700; transition: .15s ease-in-out;}
.tips .item .tip-contact img                    {display: block; width: 1em;}
.tips .item .tip-contact:hover                  {color: var(--color1);}
.tips .item .button                             {font-size: 0.6em;}
.tips .flex                                     {margin-top: 1em;}

.table                                          {display: block; width: 100%;}
.table table                                    {width: 100%;}
.table table :is(th, td)                        {text-align: left; padding: 0.75em 1.2em; vertical-align: top;}
.table table :is(th, td):last-child             {text-align: right;}
.table table th                                 {font-weight: 700; padding-top: 0;}
.table table td                                 {border-top: solid 1px rgba(0,0,0,0.35);}
.table table tr:last-child td                   {padding-bottom: 0;} 
.table table td:has(.title)                     {font-size: 0.75em;}
.table table td .title                          {display: block; font-size: 1.3em;}
.dark .table :is(th, td)                        {color: white;}
.dark .table table td                           {border-color: rgba(255,255,255,0.25);}

.table.hours2                                   {max-width: 20em;}
.table.hours2 table td                          {padding-block: 0.4em;}
.table.hours2 table td:last-child               {width: 5.5em; text-align: left;}

.article                                        {display: flex; width: 100%; max-width: 32rem; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.6em;}
.article *                                      {text-align: left;}
.article h1                                     {color: var(--color1); margin-top: 0 !important; text-wrap: unset;}
.article .date                                  {display: block; font-size: 0.85em; color: var(--color0); font-weight: 700; line-height: 1; margin-top: -0.2em;}
.article :is(h2, h3)                            {margin-block: 0.4em 0;}
.article h2                                     {font-size: 1.75em; color: var(--color1); font-weight: 700;}
.article h3                                     {font-size: 1.4em; font-weight: 700; font-family: var(--font1);}
.article .image                                 {display: block; width: 100%; aspect-ratio: 16/9; margin-block: 0.6em; 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 ul, ol                                 {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 0.9em; margin: -0.15em 0 0;}
.article ul li, ol li                           {padding-left: 1.2em; position: relative; box-sizing: border-box;}
.article li:before                              {display: block; position: absolute; content: "";}
.article ul li:before                           {display: block; width: 0.5em; height: 0.5em; border: solid 0.145em var(--color1); border-radius: 0.2em; position: absolute; left: 0; top: 0.52em; transform: rotate(45deg); box-sizing: border-box; content: "";}
.article ol                                     {list-style-type: none; counter-reset: li;}
.article ol li                                  {counter-increment: li;}
.article ol li:before                           {color: var(--color1); top: 0; left: -0.05em; content: counter(li)".";}
.article .highlight                             {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem; 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 .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)
                                                {width: 112%; margin-inline: -6%;}
                                                }

.slider-gallery .swiper-slide a                 {display: block; width: 100%; padding-top: 66%; position: relative; 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;}

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

.form                                           {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; margin-top: 1rem;}
.form h2                                        {}
.form .form-items                               {display: flex; width: 100%; flex-wrap: wrap; gap: 0.9em 0.6em;}
.form .form-items > div                         {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em; position: relative;}
.form .form-items > div.w25                     {width: calc(50% - 0.3em);}
.form .form-items label                         {display: block; width: 100%; font-size: 0.6em; color: var(--color1b); font-weight: 700; padding-inline: 0.7em; box-sizing: border-box;}
.form .form-items :is(input, textarea)          {display: block; width: 100%; color: white; font-size: 1em; font-weight: 700; background: rgba(0,0,0,0.1); padding: 0.1em 1em 0; border: solid 0.1em rgba(255,255,255,0.15); outline: none; border-radius: 0.2em; font-family: var(--font1); box-sizing: border-box; transition: .15s ease-in-out;}
.form .form-items input                         {height: 3em; padding-bottom: 0.2em;}
.form .form-items textarea                      {height: 8rem; padding-block: 1em;}
.form .form-items :is(input, textarea):focus    {border-color: var(--color1b);}
.form .form-items label                         {display: block; width: 100%; text-align: left; font-size: 0.75em; font-variation-settings: "wght" 600; order: -1;}
.form .send                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em 0; margin-top: 1rem;}
.form .send span                                {display: block; width: 100%; text-align: center; font-size: 0.75em; color: white; line-height: 1.3; opacity: 0.6;} 
.form .send span a                              {color: inherit; text-decoration: underline;}
.form .send span a:hover                        {opacity: 0.7; text-decoration-color: transparent;}
  @media screen and (min-width: 769px)          {
  .form .form-items > div.w25                   {width: calc(25% - 0.45em);}
  .form .form-items > div.w33                   {width: calc(33.33% - 0.4em);}
  .form .form-items > div.w50                   {width: calc(50% - 0.3em);}
  }

input[type="number"]                            {text-align: center; -moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button   {-webkit-appearance: none; margin: 0;}
.form-items :is(.plus, .minus)                  {display: block; color: white; position: absolute; top: calc(50% - 0.05em); z-index: 1; opacity: 0.5; transition: .15s ease-in-out;}
.form-items :is(.plus, .minus):hover            {opacity: 0.8;}
.form-items .minus                              {left: 0.9em;}
.form-items .plus                               {right: 0.9em;}

input[type="date"]::-webkit-calendar-picker-indicator
                                                {filter: invert(1) brightness(0.8); opacity: 0.7;}

.map                                            {display: block; width: 100%; height: 16em; padding: 0.5em; border-radius: 0.8em; box-sizing: border-box; border: solid 0.12em var(--color1);}
.map span                                       {display: block; width: 100%; height: 100%; border-radius: 0.5em; overflow: hidden;}
.map span iframe                                {display: block; width: 100%; height: 100%;}

.contacts                                       {display: flex; width: 100%; justify-content: center; gap: 2em; flex-wrap: wrap;}
.contacts > div                                 {display: flex; width: 13em; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8em;}
.contacts > div .hours li                       {justify-content: center; text-align: center;}

.contacts-soc                                   {display: flex; width: 100%; justify-content: center; gap: 0.3em;}
.contacts-soc a                                 {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; border-radius: 100%; border: solid 0.14em transparent; box-sizing: border-box; transition: .2s ease-in-out;}
.contacts-soc a:hover                           {filter: brightness(1.35);}
.contacts-soc a svg                             {display: block; width: 50%;}
.contacts-soc a.fb                              {border-color: #5c5af3;}
.contacts-soc a.fb svg                          {fill: #5c5af3;}
.contacts-soc a.ig                              {border-color: #d82f0c;}
.contacts-soc a.ig svg                          {fill: #d82f0c;}

.plus, .minus { cursor:pointer; }

.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.2); 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: rgba(255,255,255,0.5); backdrop-filter: blur(5px); 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 .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(--color0); 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 p                           {display: block; width: 100%; text-align: center;}
.wndw .wndw-content .flex                       {gap: 0.3em;}
.wndw .wndw-content .button                     {font-size: 0.65em;}