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


.news-detail { min-height:100%; align-items: flex-start; align-content: flex-start; padding: 2em; box-sizing: border-box;}
.mce-content-body .wndw { display:block !important; position:static !important; }
.mce-content-body .lipno { background-color:White; }

.mce-content-body .faq article > div                              {display: block !important; }

.kontaktOrd         { margin:4em auto 4em auto; }

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

/*------------------------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; }
/*------------------------------------------------------*/

:root                                           {
                                                --color0:       #050821;
                                                --color1:       #263286; /* rgb(38,50,134); */ 
                                                --color1b:      #3e4ecb;
                                                --color1c:      #1a246e;
                                                --color2:       #E02F16;
                                                --color2b:      #ff4d36;
                                                --color3:       #EED12E;
                                                --color3b:      #efc006;

                                                --color4:       #EDEDED;  
                                                --color4b:      #;

                                                --route1: #EED12E;
                                                --route2: #EED12E;
                                                --route3: #F800FF;
                                                --route4: #35EF00; 

                                                --scollbar-background: rgba(255,255,255,0.1);
                                                --scollbar-thumb: var(--color2);
                                                --scollbar-thumb-hover: var(--color2b);

                                                --header-height: 5rem;
                                                --border-radius:  0.4rem;
                                                --border-radius2: 1.5rem;  
                                                --section-padding: min(5rem, calc(1.2rem + 5vw));                                           
                                                --wrapper-padding: 5vw;
                                                }

/*::-webkit-scrollbar                             {width: 8px; background-color: var(--scollbar-background);}
::-webkit-scrollbar-thumb                       {border-radius: 4px; background-color: var(--scollbar-thumb); cursor: pointer;}
::-webkit-scrollbar-thumb:hover                 {background-color: var(--scollbar-thumb-hover);}*/

html                                            {display: block; width: 100%; height: 100%; background: #0c1143;}
  @media screen and (min-width: 769px)          {
  html                                          {font-size: 17px;}
  } 
  @media screen and (max-width: 768px)          {
  html                                          {font-size: 16px;}
  }     
  @media screen and (max-width: 440px)          {
  html                                          {font-size: 15px;}
  }  

body                                            {display: block; width: 100%; background-color: var(--color0); background-repeat: no-repeat; background-position: center top 20rem; margin-inline: auto; position: relative; font-family: 'raleway', sans-serif; overflow-x: hidden; overflow-y: auto;}
body.hp                                         {background-position: center top 60rem;}

body.fixed                                      {overflow: hidden;}
body.fixed .main                                {/*filter: blur(0px);*/}
body.fixed .main:after                          {opacity: 0.1; left: 0;}
  @media screen and (min-width: 1921px)         {
  body                                          {max-width: 1800px;}
  }
  @media screen and (min-width: 1281px)         {
  body                                          {background-image: url("images/main-background.jpg"); background-size: 100% auto;}
  }
  @media screen and (max-width: 1280px)         {
  body                                          {background-image: url("images/main-background-mobile.jpg"); background-size: 100% auto;}
  }

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

.wrapper                                        {display: flex; width: min(75rem, calc(100vw - 2 * var(--wrapper-padding))); flex-wrap: wrap; gap: 1.5rem; margin-inline: auto; position: relative; box-sizing: border-box; z-index: 1;}

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

button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: 'lato', sans-serif; transition: .15s ease-in-out;}

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

.header                                         {display: block; width: 100%; height: var(--header-height); font-size: 1rem; background: var(--color1); border-bottom: solid 3px var(--color1b); position: relative; z-index: 1000; isolation: isolate;}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center;}
.header .left                                   {display: flex; align-items: center;}
.header .left .logo                             {display: block; width: 10em; position: relative; padding-right: 1em; border-right: solid 2px var(--color3);}
.header .left .logo img                         {display: block; width: 100%;} 
.header .collapse                               {display: flex; align-items: center;}
.header nav                                     {display: block;}
.header nav > ul                                {display: flex; align-items: center; flex-wrap: wrap;}
.header nav > ul > li                           {display: block;} 
.header nav > ul > li > a                       {display: flex; align-items: center; font-size: 1em; color: white; font-weight: 500; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.header nav > ul > li > a:hover                 {color: var(--color3);}
.header nav > ul > li > a[aria-current="page"]  {font-weight: 700;}
.header nav > ul > li:has(ul) > a               {padding-right: 0.9em;}
.header nav > ul > li:has(ul) > a:after         {display: block; width: 0.3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.1 512'%3E%3Cpolygon points='55.3,511.8 311.1,256 55.3,0.2 0,55.6 200.4,256 0,456.4' fill='white' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: auto 0.75em; position: absolute; top: 0; content: ""; transition: .25s ease-in-out;}
.header nav > ul > li > ul                      {display: none;}
.header nav > ul > li > ul > li > a             {display: flex; justify-content: space-between; align-items: center; gap: 0.6em; font-weight: 500; color: white; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.header nav > ul > li > ul > li > a:after       {display: block; width: 0.8em; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 311.1 512'%3E%3Cpolygon points='55.3,511.8 311.1,256 55.3,0.2 0,55.6 200.4,256 0,456.4' fill='white' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; background-size: auto 0.75em; position: absolute; top: 0; content: "";}
.header nav > ul > li > ul > li > a:hover       {color: var(--color3);}
.header .header-contacts                        {display: flex; align-items: center; gap: 0.5em;}
.header .header-contacts a                      {display: block; width: 1em;}
.header .header-contacts a svg                  {display: block; width: 100%; fill: white; transition: .2s ease-in-out;}
.header .header-contacts a:hover svg            {fill: var(--color3);}
.header .lang                                   {display: block; width: 3.6em; height: 2.2em; margin-left: 0.4rem; overflow: hidden;}
.header .lang ul                                {display: flex; width: 100%; flex-wrap: wrap; border-radius: 0.3em; overflow: hidden; transition: .15s ease-in-out;}
.header .lang ul li                             {display: block; width: 100%; padding-top: 2.2em; box-sizing: border-box; position: relative; order: 1;}
.header .lang ul li:first-child::after          {display: block; width: 100%; padding-top: 2.2em; position: absolute; left: 0; top: 0; z-index: 2; content: "";}
.header .lang ul li a                           {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; gap: 0.4em; font-size: 1rem; font-weight: 500; color: white; position: absolute; left: 0; top: 0;}
.header .lang ul li a img                       {display: block; width: 1em;}
.header .lang ul li.sel                         {order: 0;}
.header .lang ul li.sel a                       {font-weight: 500; color: white;}
.header .lang:hover,
.header .lang.hover                             {overflow: visible;}
.header .lang:is(:hover, .hover) ul             {background: var(--color1c);}
.header .lang:is(:hover, .hover) ul li a        {color: white;}
.header .lang:is(:hover, .hover) ul li a:hover  {color: var(--color3); background: rgba(0,0,0,0.1);}
  @media screen and (min-width: 769px)          {
  .header .collapse                             {height: 100%; gap: 1.5rem;}
  .header .button                               {font-size: 0.8em;}
  .header                                       {position: sticky; top: 0;}
  form                                          {overflow-x: clip;}
  }
  @media screen and (min-width: 1281px)         {
  .header nav                                   {height: 100%;}
  .header nav > ul                              {height: 100%; gap: 1.3em;}
  .header nav > ul > li                         {height: 100%; position: relative;}
  .header nav > ul > li > a                     {height: 100%; font-size: 0.9em; border-top: solid 3px transparent; border-bottom: solid 3px transparent;}
  .header nav > ul > li > a[aria-current="page"]{font-weight: 700; border-bottom-color: var(--color3);}
  .header nav > ul > li > a:after               {right: 0; transform: rotate(90deg);}
  .header nav > ul > li[aria-expanded="true"] > a:after 
                                                {transform: rotate(-90deg);}
  .header nav > ul > li:has(ul) > a:after       {height: 100%;}
  .header nav > ul > li > ul                    {width: 12em; background: var(--color1c); border-radius: var(--border-radius); position: absolute; left: -0.78em; top: 4rem; z-index: 20;}
  .header nav > ul > li > ul > li               {display: block; border-bottom: solid 1px black;}
  .header nav > ul > li > ul > li:last-child    {border: none;}
  .header nav > ul > li > ul > li > a           {font-size: 0.85em; padding: 0.9em 1.9em 0.9em 1em;}
  .header nav > ul > li > ul > li > a:after     {right: 0.8em;}
  .header nav > ul > li > ul > li > a:hover     {background: var(--color1b);}
  .header #navicon                              {display: none;}
  }
  @media screen and (max-width: 1280px)         {
  .header .wrapper                              {padding-right: 3rem;}
  .header .collapse                             {--padding-inline: 1.3rem;}
  .header nav > ul > li                         {width: 100%;}
  .header nav > ul > li > a                     {width: 100%; font-size: 1em; padding: 0.8em calc(var(--padding-inline) - 3px); border-left: solid 3px transparent;}
  .header nav > ul > li > a:hover               {background: rgba(0,0,0,0.1);}
  .header nav > ul > li > a[aria-current="page"]{font-weight: 700; background: rgba(0,0,0,0.3); border-color: var(--color3);}
  .header nav > ul > li > a:after               {right: calc(var(--padding-inline) - 3px);}
  .header nav > ul > li[aria-expanded="true"] > a:after 
                                                {transform: rotate(90deg);}
  .header nav > ul > li:has(ul) > a:after       {height: 3em;}
  .header nav > ul > li > ul                    {width: 100%; padding-bottom: 0.5em;}
  .header nav > ul > li > ul > li > a           {font-size: 0.75em; padding: 0.5em 1em 0.5em 3.6em;}
  .header nav > ul > li > ul > li > a:after     {left: 2.5em;}
  .header #navicon                              {display: block; width: 1.5em; height: 15px; margin-left: 0.3rem; cursor: pointer; position: absolute; right: 0; top: calc(50% - 8px); z-index: 10002;}
  .header #navicon span                         {display: block; width: 100%; height: 2px; background: white; position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header #navicon:hover span                   {opacity: 0.85;}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg); opacity: 1;}
  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg); opacity: 1;}
  .header.show #navicon span:nth-child(1), 
  .header.show #navicon span:nth-child(4)       {opacity: 0 !important;}
  }
  @media screen and (min-width: 769px) and (max-width: 1280px){
  .header nav                                   {width: 15rem; height: calc(100% - var(--header-height)); background: var(--color1c); position: fixed; right: -16rem; top: var(--header-height); overflow-y: auto; overflow-x: hidden; transition: .6s ease-in-out;}
  .header.show nav                              {right: 0;} 
  }
  @media screen and (max-width: 768px)          {
  .header .collapse                             {width: 15rem; height: calc(100% - var(--header-height)); flex-direction: column; justify-content: space-between; gap: 1.5rem; background: var(--color1c); position: fixed; right: -16rem; top: var(--header-height); overflow-y: auto; overflow-x: hidden; transition: .6s ease-in-out;}
  .header nav                                   {width: 100%;}
  .header .header-contacts                      {width: calc(100% - 2 * var(--padding-inline));}
  .header .button                               {width: calc(100% - 2 * var(--padding-inline)); margin-bottom: var(--padding-inline);} 
  .header.show .collapse                        {right: 0;}
  }

.footer                                         {display: block; width: 100%; background: var(--color1); padding-block: 2.5rem 1rem;}
.footer .wrapper                                {font-size: 0.9rem; gap: 1.5em;}
.footer .wrapper > div                          {display: block;}
.footer .wrapper .logo                          {display: block; width: 15em; margin-bottom: 1.2em;}
.footer .wrapper .logo img                      {display: block; width: 100%;}
.footer .wrapper h2                             {display: block; color: white; font-weight: 700; margin-bottom: 1.2em;}
.footer .wrapper ul                             {display: block; position: relative;}
.footer .wrapper ul li                          {display: flex; font-size: 1em; font-weight: 300; color: white; line-height: 1.3em; position: relative;}
.footer .wrapper ul li a                        {display: flex; align-items: center; flex-wrap: wrap; gap: 0.1em 0.5em; color: white; transition: .2s ease-in-out;}
.footer .wrapper ul li a svg                    {display: block; width: 1.1em; fill: white; transition: .2s ease-in-out;}
.footer .wrapper ul li a:hover                  {color: var(--color3);}
.footer .wrapper ul li a:hover svg              {fill: var(--color3);}
.footer .footer-contacts li a                   {font-weight: 600;}
.footer .footer-contacts li.with-note span      {display: block; font-size: 0.8em; color: white;}
.footer .copyright                              {width: 100%; text-align: center; padding-top: 1rem; margin-top: 2rem; border-top: solid 1px rgba(255,255,255,0.4);}
.footer .copyright span                         {font-size: 0.9em; color: white; font-weight: 300;}
.footer .copyright span a                       {color: white; text-decoration: underline; transition: .2s ease-in-out;}
.footer .copyright span a:hover                 {color: var(--color3); text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .footer .wrapper                              {justify-content: space-between;}
  .footer .wrapper h2                           {font-size: 1.2em; margin-top: 0.6em;}
  .footer .wrapper ul.footer-menu               {column-count: 2; column-gap: 2.2rem;}
  .footer .wrapper ul.links li                  {margin-bottom: 0.5em;}
  .footer .footer-contacts li.with-note         {padding-bottom: 0.75em;}
  .footer .footer-contacts li.with-note a svg   {margin-top: 1.6em;}
  .footer .footer-contacts li.with-note span    {position: absolute; left: 2em; top: 2.55em; white-space: nowrap;}
  .footer .wrapper ul li.ig                     {position: absolute; left: 1.6em; bottom: 0; margin: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .footer .wrapper                              {justify-content: center;}
  .footer .wrapper > div                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
  .footer .wrapper h2                           {font-size: 1.4em; margin-top: 2em;}
  .footer .wrapper ul                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.85em 1.1em;}
  .footer .wrapper .footer-contacts ul          {position: relative; padding-bottom: 2.8em;}
  .footer .wrapper .footer-contacts li:not(.icon)
                                                {width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 3em;}
  .footer .wrapper .footer-contacts li a svg    {width: 1.2em; position: absolute; left: calc(50% - 0.6em); top: -2em;}
  .footer .wrapper .footer-contacts li span     {width: 100%; text-align: center; left: auto;}
  .footer .wrapper ul li.icon                   {position: absolute; bottom: -0.5em; margin: 0;}
  .footer .wrapper ul li.icon.fb                {left: calc(50% - 1.5em);}
  .footer .wrapper ul li.icon.ig                {right: calc(50% - 1.5em);}
  } 

.main                                           {display: flex; width: 100%; flex-wrap: wrap; flex-grow: 3;}
.main :is(h1, h2, h3, h4, .h1)                       {display: block; width: 100%; text-align: center; color: white; font-weight: 700; line-height: 1.25em; box-sizing: border-box; font-family: 'raleway', serif;}
.main h1                                        {font-size: min(2.8rem, calc(1.2rem + 4vw));}
.main h2, .main h1.h1news                                        {font-size: min(2.2rem, calc(1rem + 4vw));}
.main h3                                        {font-size: min(1.5rem, calc(0.8rem + 4vw));}
.main h4                                        {font-size: min(1.4rem, calc(0.9rem + 2vw)); font-weight: 500;}
.main :is(p, li)                                {display: block; width: 100%; text-align: center; font-size: 0.9em; color: white; line-height: 1.5em; font-weight: 300;}
.main p strong, .main li strong                 {font-weight: 700;}
.main p a, .main li a                           {color: white; text-decoration: underline; transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color3); text-decoration-color: transparent;}
.main .color-note                               {display: block; width: 100%; max-width: 40rem; text-align: center; font-size: 0.85em; line-height: 1.3em; color: var(--color3);}
.main .color3                                   {color: var(--color3);}
  @media screen and (min-width: 1081px)         {
  .main .wrapper                                {gap: 2.5rem;}
  }
  @media screen and (max-width: 1080px)         {
  .main .wrapper                                {gap: calc(0.5rem + 2vw);}
  .main :is(h1, h2, h3, h4, p)                  {text-align: center;}
  }

.section                                        {display: block; width: 100%; position: relative; padding-block: var(--section-padding);;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section-framework                              {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
.section-framework .section-subtitle            {display: block; width: 100%; text-align: center; font-size: 1em; color: #959595; font-weight: 300; text-transform: uppercase; margin-bottom: 0.4rem;}
.section-framework h2, .section-framework h1.h1news                           {width: 100%; text-align: center; text-transform: uppercase;}
.section-framework p                            {max-width: 36rem; text-align: center; margin-top: 0.7rem;}
.section-content                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;}
.section-anchor                                 {display: flex; width: 100%; height: calc(6rem * var(--section-padding)); justify-content: center; align-items: center; position: relative; z-index: 200;}
.section-anchor span                            {display: block; width: 2.2em; position: relative;}
.section-anchor span:before                     {display: block; width: 1px; height: calc(2 * var(--section-padding)); margin-left: calc(1.1em - 0.5px); background: white; content: "";}
.section-anchor span img                        {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .section-framework.left :is(.section-subtitle, h2, h1.h1news)
                                                {text-align: left;}
  }

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; box-sizing: border-box;}

.button                                         {display: flex; justify-content: center; align-items: center; outline: none; cursor: pointer; text-decoration: none !important; font-size: 0.9rem; color: white; font-weight: 700; background: transparent; position: relative; border: none; padding: 0.8em 1.3em; border-radius: var(--border-radius); box-sizing: border-box; font-family: 'raleway', sans-serif; transition: .15s ease-in-out;}
.button.color1                                  {background: var(--color1);}
.button.color1:hover                            {background: var(--color1b);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}
.button.color3                                  {background: var(--color3); color: var(--color1b);}
.button.color3:hover                            {background: var(--color3b); color: var(--color1c);}
.button-link                                    {display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; font-weight: 500; color: white; transition: .15s ease-in-out;}
.button-link svg                                {display: block; height: 0.6em; fill: white; transition: .15s ease-in-out;}
.button-link:hover                              {color: var(--color3)}
.button-link:hover svg                          {fill: var(--color3)}

.breadcrumbs                                    {display: block; width: 100%; margin-bottom: 0.6rem; box-sizing: border-box; position: relative; z-index: 1;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; margin: 0; padding: 0 !important;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.9em; padding: 0 2em 0 0; margin: 0 0 0.15em 0.5em; position: relative;}
.breadcrumbs ul li:first-child                  {margin-left: 0;}
.breadcrumbs ul li:last-child                   {padding-right: 0; margin-right: 0;}
.breadcrumbs ul li:after                        {display: inline-block; width: 1em; height: 0.8em; position: absolute; right: 0.25em; top: 0.23em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 320'%3E%3Cpolygon points='355.7,6.7 322.2,40.9 419.4,136.1 0,136.1 0,183.9 419.4,183.9 322.2,279.1 355.7,313.3 512,160' width='1' height='1' fill='rgb(150,150,150)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child:after             {display: none;}
.breadcrumbs ul li a                            {display: block; color: #959595; text-decoration: underline; font-weight: 500; line-height: 1.3em; text-transform: uppercase; border: none; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; color: #959595 !important; font-weight: 500; padding-right: 1em;}
.breadcrumbs ul li a:hover                      {color: white; text-decoration-color: transparent;}
  @media screen and (max-width: 768px)          {  
  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}
  /*.breadcrumbs::-webkit-scrollbar               {display: none;}*/
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs ul li a                          {white-space: nowrap;}
  } 

.pagination                                     {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5em; font-size: 1rem; margin-top: 1.5rem;}
.pagination a                                   {display: flex; justify-content: center; align-items: center; font-size: 0.9em; color: var(--color1); font-weight: 500; background: white; border-radius: var(--border-radius); transition: .2s ease-in-out;}
.pagination a svg                               {display: block; height: 1em; fill: var(--color1); transition: .2s ease-in-out;}
.pagination a.prev svg                          {transform: rotate(180deg);}    
.pagination a:hover                             {color: var(--color1b); background: var(--color3);}
.pagination a:hover svg                         {fill: var(--color1b);}
.pagination a.sel                               {color: white; background: var(--color1); font-weight: 500;}
  @media screen and (min-width: 768px)          {
  .pagination a                                 {width: 3em; height: 3em;}
  }
  @media screen and (max-width: 768px)          {
  .pagination                                   {font-size: 0.9em;}
  .pagination a                                 {width: 2.6em; height: 2.6em;}
  }

.hero                                           {--hero-height: 20rem; margin-top: -3rem;}
.hero .background                               {display: flex; width: 100%; height: var(--hero-height); justify-content: center; overflow: hidden;}
.hero .background .hero-media                   {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.hero .background .hero-media img               {filter: brightness(0.6);}
.hero .background .hero-media :is(video, img)   {display: block; width: 100%; height: 100%; object-fit: cover;
                                                 -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1920 1920' style='enable-background:new 0 0 1920 1920;' xml:space='preserve'%3E%3Cpath d='M0,0v1629.6c0,0,42.7,50.4,72.7,95.7c29.9,45.3,51.3,74.4,104.3,101.7c53,27.4,153.9,37.6,250.5,24.8 s155.6-19.7,277.8-18s182.8,3.3,265.4,23.4s119.3,39,233.9,15.9s167.6-34.2,261.6-33.3c94,0.9,185.5,21.4,287.2,20.5 c101.7-0.9,166.7-14.5,166.7-14.5V0H0z'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1920 1920' style='enable-background:new 0 0 1920 1920;' xml:space='preserve'%3E%3Cpath d='M0,0v1629.6c0,0,42.7,50.4,72.7,95.7c29.9,45.3,51.3,74.4,104.3,101.7c53,27.4,153.9,37.6,250.5,24.8 s155.6-19.7,277.8-18s182.8,3.3,265.4,23.4s119.3,39,233.9,15.9s167.6-34.2,261.6-33.3c94,0.9,185.5,21.4,287.2,20.5 c101.7-0.9,166.7-14.5,166.7-14.5V0H0z'/%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-position: center bottom;
                                                }
.hero .background .img                          {display: flex; width: 100%; justify-content: center; position: absolute; left: 0; z-index: 5; overflow: hidden;}
.hero .background .img > span                   {display: block;}
.hero .background .img > span > img             {display: block; width: 100%;}
.hero .background .hero-shape                   {display: flex; width: 100%; justify-content: center; align-items: flex-end; position: absolute; left: 0; bottom: 0; z-index: 10; overflow: hidden;}
.hero .background .hero-shape img               {display: block;}
.hero .wrapper                                  {width: 100%; justify-content: center; gap: 2rem; position: absolute; left: 0; top: 25%; z-index: 999;}
.hero .wrapper .hero-content                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; padding-inline: 1.5rem; box-sizing: border-box;}
.hero .wrapper .hero-content h1,
.hero .wrapper .hero-content .h1                 {text-align: center; font-size: min(5rem, calc(2.2rem + 5vw)); font-weight: 900; text-transform: uppercase;}
.hero .wrapper .hero-content .subheadline       {display: block; text-align: center; font-size: min(1.35rem, calc(1rem + 4vw)); color: white; font-weight: 700; text-transform: uppercase;}
.hero .wrapper .hero-content .button            {font-size: 1rem; margin-top: 1rem;}
  @media screen and (min-width: 1281px)         {
  .hero .background .hero-media :is(video, img) {-webkit-mask-size: 100% auto; mask-size: 100% auto;}
  .hero .background .hero-shape img             {width: 100%;}
  }
  @media screen and (max-width: 1280px)         {
  .hero .background .hero-media :is(video, img) {-webkit-mask-size: 100% auto; mask-size: 100% auto;}
  .hero .background .hero-shape img             {width: 100%; height: auto;}
  }

.hp .hero                                       {padding: 0; margin: 0;}
.hp .hero .background .hero-media video         {object-position: center top;}
.hp .hero .wrapper .hero-content                {max-width: 45rem;}
.hp .hero .wrapper .hero-content h1             {font-size: min(1.2rem, calc(0.8rem + 2vw)); font-weight: 700; text-transform: none;}
  @media screen and (min-width: 1921px)         {
  .hp .hero .background .img                    {top: 10.5%;}
  .hp .hero .wrapper                            {top: 11rem;}
  }
  @media screen and (min-width: 1281px) and (max-width: 1920px){
  .hp .hero .background .img                    {top: 4vw;}
  .hp .hero .wrapper                            {top: 10vw;}
  }
  @media screen and (min-width: 1281px)         {
  .hp .hero                                     {--hero-height: min(40rem, 36vw);}
  .hp .hero .background .img > span             {width: 38%;}
  .hp .hero .background .img > span > span      {display: none;}
  }
  @media screen and (max-width: 1280px)         {
  .hp .hero                                     {--hero-height: 28rem;}
  .hp .hero .background .hero-media :is(video, img)
                                                {width: 1280px; margin-inline: calc(50% - 640px); /*-webkit-mask-size: auto calc(10rem + var(--hero-height)); mask-size: auto calc(10rem + var(--hero-height))*/;}
  .hp .hero .background .hero-shape             {width: 1280px; height: calc(10rem + var(--hero-height)); left: calc(50% - 640px);}
  .hp .hero .background .img                    {top: 2.4rem;} 
  .hp .hero .background .img > span > img       {display: none;}
  .hp .hero .background .img > span > span      {display: block; width: 100%; text-align: center; font-size: 3.4rem; color: white; font-weight: 900;}

  }

.under-hero.section-anchor                      {margin-top: calc(0px - 2 * var(--section-padding));}

.text-img                                       {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 2rem var(--text-img-gap); --text-img-gap: 10%;}
.text-img:not(:first-child)                     {margin-top: 2rem;}
.text-img > *                                   {display: flex; align-items: flex-start; flex-wrap: wrap; position: relative;}
.text-img > .img.double                         {gap: 0.8em;}
.text-img > .img.double a                       {width: calc(50% - 0.4rem);}
.text-img > .img a                              {display: block; width: 100%; padding-top: 56%; position: relative;}
.text-img > .img a span                         {display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: var(--border-radius2); overflow: hidden;}
.text-img > .img a span img                     {display: block; width: 100%; height: 100%; object-fit: cover;}
.text-img > .img.clouds:after                   {display: block; width: 100%; height: 100%; background: url("images/clouds.webp") no-repeat center center; background-size: contain; position: absolute; left: 50%; top: 40%; z-index: 10; content: "";}
.text-img .section-content                      {margin-top: 1rem;}
.text-img .flex                                 {margin-top: 1rem;}
.text-img .lipno                                {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .text-img                                     {justify-content: space-between;}
  .text-img > *                                 {width: calc(50% - var(--text-img-gap) / 2);}
  .text-img > *.text                            {padding-block: 2em;}
  .text-img > *.text :is(.section-subtitle, h2, h3, p)
                                                {text-align: left;}
  .text-img .flex                               {justify-content: flex-start;}
  .text-img .lipno                              {transform: scale(1.5) translateX(6%);}
  }
  @media screen and (max-width: 1080px)         {
  .text-img                                     {justify-content: center;}
  .text-img > *                                 {width: 100%; justify-content: center;}
  .text-img > * .section-content                {width: auto;}
  .text-img > *.img                             {max-width: 30rem;}
  .text-img .img.clouds:after                   {width: 85%; height: 85%; top: 30%;}
  .text-img .section-content p                  {text-align: center;}
  .text-img > *.img:has(.lipno)                 {width: 100%; max-width: 100%;}

  }
  @media screen and (min-width: 1081px)         {
  .zig-zag .text-img:nth-child(even) > *:nth-child(2)
                                                {order: -1;}
  .zig-zag .text-img:nth-child(even) :is(.section-subtitle, h2,, h3, p, li)
                                                {text-align: right;}
  .zig-zag .text-img:nth-child(even) ul         {width: 100%;}
  .zig-zag .text-img:nth-child(even) li         {padding-inline: 0 1em;}
  .zig-zag .text-img:nth-child(even) li:before  {left: auto; right: 0;}  
  .zig-zag .text-img:nth-child(even) .flex      {justify-content: flex-end;}
  }

.guide                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--guide-gap); --guide-gap: 1rem;}
.guide > div                                    {display: block; border-radius: var(--border-radius2); overflow: hidden; position: relative; }
.guide > div .img                               {display: block; width: 100%;}
.guide > div .img span                          {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.guide > div .img span img                      {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.guide > div .img:hover span img                {opacity: 0.85;}
.guide > div > div                              {display: flex; cursor:pointer; min-height:10em; width: calc(100% + 2px); flex-direction: column; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8em; background: rgba(100,100,100,0.8); backdrop-filter: blur(2px); padding: 1.2em; box-sizing: border-box; border-radius: var(--border-radius2); position: absolute; left: 0px; bottom: -3px; z-index: 2;}
.guide > div > div img                          {display: block; width: 1.6em;}
.guide > div > div .title                       {font-size: 0.9em; color: white; text-transform: uppercase;}
.guide > div > div .title a                     {color: white; transition: .15s ease-in-out;}
.guide > div > div .title a:hover               {color: var(--color3);}
.guide > div > div > a                          {display: flex; align-items: center; gap: 0.6em; font-size: 0.9em; font-weight: 300; color: white; transition: .15s ease-in-out;}
.guide > div > div > a:hover                    {color: var(--color3)}
  @media screen and (min-width: 769px)          {
  .guide > div:nth-child(-n+3)                  {width: calc(100% / 3 - (2 * var(--guide-gap) / 3));}
  .guide > div:nth-child(n+4)                   {width: calc(100% / 4 - (3 * var(--guide-gap) / 4));}
  .guide > div:nth-child(-n+3) .img             {padding-top: calc(20rem + 40%);}
  .guide > div:nth-child(n+4) .img              {padding-top: calc(20rem + 30%);}
  }
  @media screen and (min-width: 541px) and (max-width: 769px){
  .guide > div:nth-child(-n+4)                  {width: calc(100% / 2 - (var(--guide-gap) / 2));}
  .guide > div:nth-child(n+5)                   {width: calc(100% / 3 - (2 * var(--guide-gap) / 3));}
  .guide > div:nth-child(-n+4) .img             {padding-top: calc(20rem + 40%);}
  .guide > div:nth-child(n+5) .img              {padding-top: calc(20rem + 30%);}
  }
  @media screen and (max-width: 540px)          {
  .guide > div                                  {width: 100%;}
  .guide > div .img                             {padding-top: calc(15rem + 50%);}
  .guide > div .img span img                    {object-position: center top;}

  }
  @media screen and (max-width: 440px)          {
  .guide > div > div                            {padding: 1em;}
  .guide > div > div .title,
  .guide > div > div > a                        {font-size: 0.85em;}
  }
  @media screen and (min-width: 1281px)         {
  .hp .guide                                    {--guide-gap: 0.7rem;}
  .hp .guide > div                              {width: calc(100% / 7 - (6 * var(--guide-gap) / 7));}
  .hp .guide > div .img                         {padding-top: 230%;}
  .hp .guide > div > div                        {min-height: 11em;}
  .hp .guide > div > div .title,
  .hp .guide > div > div > a                    {font-size: 0.8em;}
  }

.infographics                                   {display: flex; width: 100%; justify-content: space-evenly; flex-wrap: wrap; gap: 2rem 1rem;}
.infographics > div                             {display: flex; width: 12em; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
.infographics > div img                         {display: block; width: 7em;}
.infographics > div span                        {display: block; width: 100%; text-align: center; font-size: 1em; color: white; font-weight: 700; text-transform: uppercase; position: relative;}
.infographics > div span:before                 {display: block; width: 5em; height: 2px; background: white; content: ""; margin: 1em calc(50% - 2.5em);}
  @media screen and (max-width: 1080px)         {
  .infographics                                 {max-width: 34em;}  
  }

.ticket                                         {display: block; width: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; border-radius: var(--border-radius2);}
.ticket .text                                   {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: absolute; box-sizing: border-box;}
.ticket .text .section-subtitle                 {color: white; opacity: 0.6;}
  @media screen and (min-width: 1081px)         {
  .ticket:after                                 {display: block; width: 20%; height: 130%; background: url("images/ticket-captain.webp") no-repeat center bottom; background-size: contain; position: absolute; right: -3%; bottom: 0; content: "";}
  .ticket .text                                 {padding-block: calc(1rem + 2%); right: 23%;}
  .ticket .text p                               {width: 28em;}
  .ticket .text .button                         {bottom: calc(1.7rem + 2%);}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .ticket .text                                 {padding-block: 1.4rem; right: 2rem;}
  .ticket .text h2                              {font-size: 1.6rem;}
  .ticket .text p                               {width: 20em;}
  .ticket .text .button                         {bottom: 1.4rem;}
  }
  @media screen and (min-width: 769px)          {
  .ticket                                       {padding-top: 33.33%; background-image: url("images/ticket.webp");}
  .ticket .text                                 {height: 100%; justify-content: flex-end; top: 0;}
  .ticket .text :is(.section-subtitle, h2, p)   {text-align: right;}
  .ticket .text .button                         {position: absolute; right: 0;}
  }
  @media screen and (max-width: 768px)          {
  .ticket                                       {height: 60rem; background-image: url("images/ticket-vertical.webp");}
  .ticket .text                                 {width: 16rem; justify-content: center; left: calc(50% - 8rem); top: 22rem;;}
  .ticket .text p                               {margin-bottom: 1.5rem;}
  }

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

.swiper-button-prev,
.swiper-button-next                             {display: flex; width: 2.8em; height: 2.8em; justify-content: center; align-items: center ; font-size: 1em; background: transparent; padding: 0.4em; border-radius: var(--border-radius); box-sizing: border-box; position: absolute; top: calc(50% - 1.4em); z-index: 100; margin: 0; isolation: isolate; cursor: pointer; transition: .15s ease-in-out;}                                
.swiper-button-prev                             {transform: rotate(180deg);}
.swiper-button-prev svg,
.swiper-button-next svg                         {display: block; width: 1em; fill: white;}
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-prev:before,
.swiper-button-next:before                      {display: block; width: 100%; height: 100%; background: linear-gradient(to right, var(--color1) 0%, var(--color1b) 100%); border-radius: var(--border-radius); position: absolute; inset: 0; z-index: -1; content: "";}
.swiper-button-prev:hover,
.swiper-button-next:hover                       {filter: brightness(135%);}
.swiper-button-disabled                         {opacity: 0.2 !important;}

.blog                                           {display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem;}

.grid-article-preview                           {display: block; background: white; border-radius: var(--border-radius2); overflow: hidden; position: relative;}
.grid-article-preview .img                      {display: block; width: 100%; padding-top: 56%; position: relative;}
.grid-article-preview .img span                 {display: block; position: absolute; inset: 0; border-radius: var(--border-radius2); overflow: hidden;}
.grid-article-preview .img span img             {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.grid-article-preview .img:hover span img       {opacity: 0.8;}
.grid-article-preview > div                     {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; padding: 1.2em 1.2em 3em; box-sizing: border-box;}
.grid-article-preview .title                    {display: block; width: 100%; text-align: center; font-size: 1em; font-weight: 700; margin-bottom: 1.8em; position: relative;}
.grid-article-preview .title a                  {color: var(--color1); text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}
.grid-article-preview .title a:hover            {color: var(--color1); text-decoration-color: var(--color1);}
.grid-article-preview .title:after              {display: block; width: 60%; height: 2px; background: var(--color1); position: absolute; bottom: -1rem; left: 20%; content: "";}
.grid-article-preview p                         {text-align: center; font-size: 0.85em; color: var(--color1); font-weight: 500; line-height: 1.2em;}
.grid-article-preview .bottom                   {display: flex; width: 100%; justify-content: center; position: absolute; left: 0; bottom: 0.8em;}
.grid-article-preview .bottom a                 {display: flex; align-items: center; gap: 0.5em; font-size: 1em; font-weight: 500; color: var(--color1); text-decoration: underline; text-decoration-color: transparent; transition: .15s ease-in-out;}
.grid-article-preview .bottom a svg             {display: block; height: 1.05em; fill: var(--color1); transition: .15s ease-in-out;}
.grid-article-preview .bottom a:hover           {color: var(--color1b); text-decoration-color: var(--color1b);}
.grid-article-preview .bottom a:hover svg       {fill: var(--color1b);}


.review                                         {display: block; width: 100%; background: white; padding: 1.8em 1.8em 3em; box-sizing: border-box; position: relative; border-radius: var(--border-radius2);}
.review:after                                   {display: block; width: 1.2em; height: 1.2em;  position: absolute; left: 1.4em; bottom: 1.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 400'%3E%3Cpath d='M466.5,37.8c29.6,31.4,45.5,66.6,45.5,123.8c0,100.5-70.6,190.6-173.2,235.1l-25.6-39.6c95.8-51.8,114.5-119,122-161.4 c-15.4,8-35.6,10.8-55.4,8.9c-51.8-4.8-92.6-47.3-92.6-100.2c0-55.5,45-100.5,100.5-100.5C418.4,3.9,447.9,18,466.5,37.8L466.5,37.8 z M179.4,37.8c29.6,31.4,45.5,66.6,45.5,123.8c0,100.5-70.6,190.6-173.2,235.1L26,357.1c95.8-51.8,114.5-119,122-161.4 c-15.4,8-35.6,10.8-55.4,8.9C40.8,199.8,0,157.3,0,104.4C0,48.9,45,3.9,100.5,3.9C131.3,3.9,160.8,18,179.4,37.8L179.4,37.8z' width='1' height='1' fill='rgb(62,78,203)' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
.review p                                       {text-align: left; color: var(--color0); font-style: italic; font-weight: 500; margin: 0;}
.review span                                    {display: block; text-align: right; font-size: 0.85em; color: var(--color1b); font-weight: 700; position: absolute; right: 1.6em; bottom: 1.5em;}
  @media screen and (min-width: 1281px)         {
  .reviews.carousel .swiper                     {width: 140%; margin-inline: -20%;}                            

  }



.carousel                                       {display: block; width: 100%; position: relative; margin-inline: auto; --gradient-color: var(--color0);}
.carousel .swiper-slide                         {display: flex; height: auto; position: relative; box-sizing: border-box; overflow: hidden; flex-shrink: 0; transition: .15s ease-in-out;}
.carousel .swiper-slide > *                     {width: 100%;}
  @media screen and (min-width: 1801px)         {
  .carousel                                     {width: 1700px;}
  }
  @media screen and (min-width: 1281px)         {
  /*
  .carousel:before                              {display: block; width: min(25rem, 15vw); height: 110%; background: linear-gradient(to right, var(--color0) 0%, transparent 100%); position: absolute; left: -1px; top: -5%; z-index: 5; content: "";}
  .carousel:after                               {display: block; width: min(25rem, 15vw); height: 110%; background: linear-gradient(to left, var(--color0) 0%, transparent 100%); position: absolute; right: -1px; top: -5%; z-index: 5; content: "";}
  */
  .carousel .swiper                             {overflow: hidden;}
  .carousel .swiper-button-prev                 {left: 4rem;}
  .carousel .swiper-button-next                 {right: 4rem;}
  }
  @media screen and (max-width: 1280px)         {
  .carousel .swiper                             {width: calc(100% - 6.2em); overflow: visible;}
  .carousel .swiper .swiper-slide:not(.swiper-slide-active)
                                                {opacity: 0.3;}
  .carousel .swiper-button-prev                 {left: 0;}
  .carousel .swiper-button-next                 {right: 0;}
  .carousel .swiper-button-prev:before,
  .carousel .swiper-button-next:before          {border-top-right-radius: 0; border-bottom-right-radius: 0;}
  }
  @media screen and (min-width: 961px) and (max-width: 1280px){
  .carousel .swiper .swiper-slide.swiper-slide-prev,
  .carousel .swiper .swiper-slide.swiper-slide-next
                                                {opacity: 1;}
  }

.trips, .boats                                  {display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem;}

.trip-preview                                   {display: block; border-radius: var(--border-radius2); overflow: hidden; position: relative; }
.trip-preview .img                              {display: block; width: 100%; padding-top: 75%;}
.trip-preview .img span                         {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.trip-preview .img span img                     {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.trip-preview .img:hover span img               {opacity: 0.85;}
.trip-preview > div                             {display: flex; width: 100%; flex-direction: column; justify-content: space-between; flex-wrap: wrap; gap: 0.8em; background: rgba(100,100,100,0.8); backdrop-filter: blur(2px); padding: 1.2em; box-sizing: border-box; border-radius: var(--border-radius2); position: absolute; left: 0; bottom: 0; z-index: 2;}
.trip-preview > div .title                      {text-align: left; font-size: 0.9em; color: white; text-transform: uppercase;}
.trip-preview > div .title a                    {color: white; transition: .15s ease-in-out;}
.trip-preview > div .title a:hover              {color: var(--color3);}

.boat-preview                                   {display: flex; flex-wrap: wrap; position: relative;}
.boat-preview .img                              {display: block; width: 100%; padding-top: 56%; background: white; border-radius: var(--border-radius); overflow: hidden; position: relative; order: 0;}
.boat-preview .img span                         {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.boat-preview .img span img                     {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.boat-preview .img:hover span img               {opacity: 0.85;}
.boat-preview > div                             {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em; box-sizing: border-box; order: 1; margin-top: 1rem;}
.boat-preview > div .title                      {text-align: left; font-size: 1.4em; color: white; text-transform: uppercase;}
.boat-preview > div .title a                    {color: white; transition: .15s ease-in-out;}
.boat-preview > div .title a:hover              {color: var(--color3);}

.anchor-block                                   {display: flex; align-items: start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; box-sizing: border-box; position: relative;}
.anchor-block:before                            {display: block; width: 1.6rem; height: 1.6rem; background: url("images/anchor.svg") no-repeat center center; background-size: contain; position: absolute; top: 0; content: "";}
.anchor-block > *:first-child                   {margin-top: 0 !important;}                                   
  @media screen and (min-width: 1081px)         {
  .anchor-block                                 {padding-left: 2.3rem;}
  .anchor-block:before                          {left: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .anchor-block                                 {padding-top: 2.3em;}
  .anchor-block:before                          {left: calc(50% - 0.8rem);}
  }

.article-aside                                  {display: flex; justify-content: space-between; flex-wrap: wrap;}
.article-aside > article h2, .article-aside > article h1.h1news                     {font-size: min(2.5rem, calc(1rem + 4vw));}

.article-aside .grid-article-preview            {background: var(--color1b);}
.article-aside .grid-article-preview :is(.title a, p)
                                                {color: white;;}
.article-aside .grid-article-preview .title::after  
                                                {background: white;}
.article-aside .grid-article-preview .bottom a  {color: white;}
.article-aside .grid-article-preview .bottom a svg
                                                {fill: white;}
.article-aside .grid-article-preview .title a:hover,
.article-aside .grid-article-preview .bottom a:hover
                                                {color: var(--color3);}
.article-aside .grid-article-preview .bottom a:hover svg  
                                                {fill: var(--color3);}
  @media screen and (min-width: 1081px)         {
  .article-aside > article                      {width: 60%;}
  .article-aside > aside                        {width: 25%;}
  .article-aside > aside h2                     {text-align: right; font-size: 1.8rem;}
  .article-aside > aside .grid-article-preview,
  .article-aside > aside .trip-preview          {width: 100%;}
  }
  @media screen and (max-width: 1080px)         {
  .article-aside > article,
  .article-aside > aside                        {width: 100%;}
  .article-aside > aside                        {margin-top: 2.5rem; padding-top: 2.5rem; border-top: solid 3px var(--color1);}
  }

  @media screen and (min-width: 1081px)         {
  .article-only                                 {padding-inline: 12%; box-sizing: border-box;}
  }

.article-styles                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; gap: 1.4rem; flex-wrap: wrap;}
.article-styles iframe                        { background-color:White; }
.article-styles .highlight                      {display: block; width: 100%; background: var(--color1b); padding: 1.8em; box-sizing: border-box; border-radius: var(--border-radius2);}
.article-styles .image                          {display: block; width: 100%; padding-top: 56%; position: relative; border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;} 
.article-styles .image > span                   {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.article-styles .image > span img               {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.article-styles .image:hover > span img         {opacity: 0.9;}
.article-styles h3                              {font-size: min(1.8rem, calc(1rem + 2vw)); margin-block: 0.5rem -0.3rem;}
.article-styles h4                              {margin-block: 0.4rem -0.3rem;}
.article-styles p                               {margin-top: 0 !important;}
.article-styles :is(h2, h3, h4, p, li, h1.h1news)          {max-width: 100%; text-align: left;}
.article-styles li                              {box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles ul li                           {padding-left: 1.55em;}
.article-styles ul li:before                    {display: block; width: 0.3em; height: 0.3em; background: white; border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.58em; content: "";}
.article-styles ul li:last-child                {margin-bottom: 0;}
.article-styles li :is(ul, ol)                  {margin-block: 0.4em 0.8em;}
.article-styles li li                           {font-size: 1em !important;}
.article-styles li li:before                    {background: none; border: solid 0.06em white; box-sizing: border-box;}
.article-styles ol                              {list-style: none; counter-reset: li; padding: 0; margin: 0;}
.article-styles ol > li                         {counter-increment: li; padding-left: 2em;}
.article-styles ol > li:before                  {display: block; content: counter(li) "."; font-size: 1em; font-weight: 500; color: white; position: absolute; left: 0.65em; top: 0;}

.article-styles .embed                          {display: block; width: 100%; margin-top: calc(0.6 * var(--gap1)); border-radius: var(--border-radius);}
.article-styles .embed iframe                   {display: block; width: 100%;}
  @media screen and (max-width: 640px)          {
  .article-styles .gallery                      {width: calc(100% - 1.4rem); margin-inline: 0.7rem;}
  }

.gallery                                        {display: block; width: 100%; position: relative;}
.gallery .swiper                                {display: block; width: 100%; overflow: hidden;}
.gallery.visible .swiper                        {overflow: visible;}
.gallery .swiper-slide                          {display: block; width: auto; height: auto; background: var(--color1); border-radius: var(--border-radius); overflow: hidden; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.gallery .swiper-slide a                        {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}     
.gallery .swiper-slide a img                    {display: block; width: 100%; transition: .15s ease-in-out;}     
.gallery .swiper-slide:hover a img              {opacity: 0.8;}
.gallery .swiper-button-prev                    {left: -1.3em;}
.gallery .swiper-button-next                    {right: -1.3em;}
.gallery.i3 .swiper-slide                       {padding-top: 18%;}
.gallery.i2 .swiper-slide                       {padding-top: 33%;}
.gallery.i1 .swiper-slide                       {padding-top: 56%;}
.gallery.i1                                     {max-width: 56rem; margin-inline: auto;}
  @media screen and (max-width: 960px)          {
  .gallery.i3 .swiper-slide                     {padding-top: 33%;}
  }

.files                                          {display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.6em;}
.files > div                                    {display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; gap: 1.5em; background: rgba(255,255,255,0.1); padding: 1em 1em 1em 2.7em; border-radius: 0.3em; position: relative; box-sizing: border-box;}
.files > div:before                             {display: block; width: 1em; height: 100%; position: absolute; left: 1em; top: 0; background: url("images/icon-file.svg") no-repeat center center; background-size: 100% auto; content: ""; transition: .15s ease-in-out;}
.files > div .title                             {display: block; font-size: 1em; font-weight: 600; color: white;}
.files > div a                                  {display: block; font-size: 1em; font-weight: 600; color: var(--color2); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}
.files > div a:hover                            {color: var(--color2b); text-decoration-color: transparent;}
 
.swiper-pagination                              {display: flex; justify-content: center; gap: 0.6em; position: relative; margin-top: 2.5rem;}
.swiper-pagination-bullet                       {width: 1em; height: 1em; background: var(--color1b); opacity: 1; border-radius: 100%; margin: 0 !important; transition: .15s ease-in-out; cursor: pointer;}
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active                {background: white;}

.table                                          {display: block; width: 100%; overflow: auto;}
.table:not(:first-child)                        {margin-top: 1.4rem;}
.table .table-headline                          {display: block; width: 100%; font-size: 1.2em; font-weight: 600; padding: 0.45em 1em 1.7em; margin-bottom: calc(0px - var(--border-radius2)); border-radius: var(--border-radius2) var(--border-radius2) 0 0; box-sizing: border-box;}
.table.route1 .table-headline                   {background: var(--route1); color: black;}
.table.route2 .table-headline                   {background: var(--route2); color: black;}
.table.route3 .table-headline                   {background: var(--route3); color: white;}
.table.route4 .table-headline                   {background: var(--route4); color: white;}

.table table                                    {width: 100%; border-radius: var(--border-radius2); overflow: hidden; table-layout: fixed;}
.table table tr                                 {overflow: visible;}
.table table :is(th, td)                        {font-size: 0.9em; font-weight: 500; text-align: center; vertical-align: middle; position: relative; overflow: visible;}
.table table th                                 {color: white; background: var(--color1b); padding: 1.3em 1em;}
.table table th:not(:last-child):after          {display: block; width: 2px; height: calc(100% - 2em); background: white; position: absolute; right: -1px; top: 1em; content: "";}
.table table th div                             {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: relative;}
.table table th div img                         {display: block; width: 2.6em; margin-bottom: 0.2em;}
.table table th div span                        {display: block; width: 100%; text-align: center;}
.table table td                                 {color: var(--color1); background: white; padding: 0.6em 1em;}
.table table td:not(:last-child):after          {display: block; width: 2px; height: 100%; background: black; position: absolute; right: -1px; top: 0; content: "";}
.table table tr:first-child td                  {padding-top: 1.8em;}
.table table tr:last-child td                   {padding-bottom: 1.8em;}
.table table tr:first-child td:after            {top: 1.2em;}
.table table tr:last-child td:after             {height: calc(100% - 1.2em);}
.table table tr.separate td                     {border-top: solid 1px var(--color1);}
.table table td a                               {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
.table table td a:hover                         {color: var(--color1b); text-decoration-color: transparent;}
.table table td.row-title                       {vertical-align: top; text-align: left;}
.table .with-arrow                              {display: flex; width: 100%; min-height: 1em; justify-content: center; align-items: center; gap: 0.8em; position: relative;}
.table .with-arrow:after                        {display: block; width: 4em; height: 1em; content: ""; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 64' style='enable-background:new 0 0 512 64;' xml:space='preserve'%3E%3Cpolygon points='506.1,25.5 480.6,0 474.1,6.5 494.6,27 0,27 0,37 494.6,37 474.1,57.5 480.6,64 506.1,38.5 512.6,32' fill='rgb(38,50,134)'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.table .with-arrow.end:after,
.table .with-arrow.vertical:after               {background-image: none;}
.table .with-arrow.vertical:before              {display: block; width: 1em; height: 1em; content: ""; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 64' style='enable-background:new 0 0 512 64;' xml:space='preserve'%3E%3Cpolygon points='506.1,25.5 480.6,0 474.1,6.5 494.6,27 0,27 0,37 494.6,37 474.1,57.5 480.6,64 506.1,38.5 512.6,32' fill='rgb(38,50,134)'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right center; background-size: auto 45%; transform: rotate(90deg); position: absolute; left: calc(50% - 3em); top: 0;}
.table .with-arrow.reversed:after               {order: -1; transform: rotate(180deg);}
.table .with-arrow.vertical.reversed:before     {left: calc(50% + 2em);}

.table .table-footer-info                       {background: var(--color2); padding: 1.2em 1em 1.2em 2.8em !important; border-top: solid 1em white; box-sizing: border-box;}
.table .table-footer-info:before                {display: block; width: 1.2em; height: 1.2em; position: absolute; left: 1em; top: 1.15em; content: ""; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.5.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath d='M24,12c0,6.6-5.4,12-12,12C5.4,24,0,18.6,0,12C0,5.4,5.4,0,12,0C18.6,0,24,5.4,24,12z M13.3,6.7 C13.3,7.4,12.7,8,12,8s-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3S13.3,5.9,13.3,6.7z M13.3,18.7v-8h-2.7v8H13.3z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.table .table-footer-info span                  {display: block; width: 100%; text-align: left; font-size: 0.9em; color: white; font-weight: 300; line-height: 1.3em;}
  @media screen and (max-width: 1080px)         {
  .table table                                  {font-size: 0.9em;}
  }
  @media screen and (max-width: 960px)          {
  .table.overflow                               {width: calc(100% + 2 * var(--wrapper-padding)); margin-inline: calc(0px - var(--wrapper-padding)); padding: 0 var(--wrapper-padding) 15px;}
  /*.table.overflow::-webkit-scrollbar            {height: 16px;}
  .table.overflow::-webkit-scrollbar-track-piece:start
                                                {margin-left: var(--wrapper-padding);}
  .table.overflow::-webkit-scrollbar-track-piece:end
                                                {margin-right: var(--wrapper-padding);}
  .table.overflow::-webkit-scrollbar-thumb      {background: URL('images/arrow-white-left.svg') no-repeat left 5px center, URL('images/arrow-white-right.svg') no-repeat right 5px center, var(--color2); background-size: auto 66%; -webkit-box-shadow: inset 0 0 4px rgba(255,255,255,0.3);}
*/
  .table.overflow :is(.table-headline, table)   {min-width: 960px;}
  }

.iframe                                         {display: block; width: 100%; position: relative;}
.iframe iframe                                  {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
.iframe.booking                                 {/*padding-top: max(50%, 25rem);*/}
.iframe.e-shop                                  {/*padding-top: 20rem;*/}

.marinas                                        {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.marinas .text-img                              {--text-img-gap: 25%;}
.marinas h3                                     {font-size: min(1.8rem, calc(1rem + 4vw)); text-transform: uppercase;}
.marinas .button                                {margin-top: 1rem;}
  @media screen and (min-width: 1081px)         {
  .marinas .text-img                            {align-items: center;}
  .marinas .text-img:nth-child(even) .text      {justify-content: flex-end;}
  .marinas .text-img:nth-child(even) .text > *  {text-align: right;}
  }
  @media screen and (max-width: 1080px)         {
  .marinas                                      {gap: 3rem;}
  .marinas .text-img .img                       {order: -1;}
  }

.contact-form-box                               {display: flex; width: 100%; flex-wrap: wrap; border-radius: var(--border-radius2); position: relative; --contact-form-padding: 3rem; background: url("images/contact-form.jpg") no-repeat center center; background-size: cover; overflow: hidden;}
.contact-form-box .logo                         {display: block; width: 12em;}
.contact-form-box .text                         {display: block;}
.contact-form-box .text h3                      {text-transform: uppercase;}
.contact-form-box .form                         {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); padding: var(--contact-form-padding); box-sizing: border-box;}
.contact-form-box .form h4                      {font-size: 1.7em; text-transform: uppercase; font-weight: 700; padding-bottom: 1rem; position: relative;}
.contact-form-box .form h4:after                {display: block; width: 10rem; height: 2px; background: white; position: absolute; left: calc(50% - 5rem); bottom: 0; content: "";}
  @media screen and (min-width: 1081px)         {
  .contact-form-box                             {justify-content: flex-end;}
  .contact-form-box .logo                       {position: absolute; left: var(--contact-form-padding); top: var(--contact-form-padding);}
  .contact-form-box .text                       {position: absolute; left: var(--contact-form-padding); bottom: var(--contact-form-padding);}
  .contact-form-box .text h3                    {text-align: left; font-size: 2em;}
  .contact-form-box .text p                     {text-align: left;}
  .contact-form-box .form                       {width: 29rem;}
  }
  @media screen and (max-width: 1080px)         {
  .contact-form-box .logo                       {margin-block: var(--contact-form-padding) 1rem;}
  .contact-form-box .text                       {width: 100%;} 
  .contact-form-box .text p                     {margin-inline: auto;} 
  .contact-form-box .form                       {max-width: 30rem;}
  }
  @media screen and (max-width: 540px)          {
  .contact-form-box                             {--contact-form-padding: 2rem;}
  .contact-form-box .button                     {width: 100%;}
  }

.form .form-items                               {display: flex; width: 100%; flex-wrap: wrap; gap: 1em;}
.form .agreement                                {text-align: left; font-size: 0.7em;}
  @media screen and (min-width: 1081px)         {
  }
  @media screen and (max-width: 1080px)         {
  }

.form-item                                      {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em; position: relative;}
.form-item input,
.form-item textarea                             {display: block; width: 100%; background: none; font-size: 1em; color: white; font-weight: 700; border: none; border-bottom: solid 1px white; outline: none; padding: 0 0 0.6em; box-sizing: border-box; position: relative; font-family: 'raleway', sans-serif; transition: .2s ease-in-out;}
.form-item textarea                             {height: 5em;}
.form-item input:focus, 
.form-item textarea:focus                       {border-color: var(--color3);}
.form-item label                                {display: block; font-size: 0.8em; font-weight: 500; color: #adadad; transition: .15s ease-in-out;}

.form-opts                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.1em;}
.form-opts > div                                {display: flex; width: 100%; justify-content: space-between; align-items: center;}
.form-opts > div > span                         {display: block; font-size: 1em; color: white; font-weight: 500;}
.form-opts > div > .opt                         {display: flex; height: 1.6em; align-items: center;}
.form-opts > div > .opt input[type="text"]                   { width:40px; background-color:transparent; border:0px solid white; border-bottom:1px solid white; color:White; text-align:right; font-size:1em; }
  @media screen and (max-width: 640px)          {
  .form-opts                                    {font-size: 0.9em;}
  }

.switch                                         {display: inline-block; position: relative; width: 2.4em; height: 1em;}
.switch input                                   {opacity: 0; width: 0; height: 0;}
.switch .slider                                 {background-color: rgba(255,255,255,0.2); border-radius: 0.5em; position: absolute; inset: 0; cursor: pointer; transition: .4s;}
.switch .slider:before                          {width: 0.8em; height: 0.8em; background-color: white; border-radius: 100%; position: absolute; left: 0.1em; top: 0.1em; content: ""; transition: .4s;}
.switch input:checked + .slider                 {background-color: var(--color1b);}
.switch input:focus + .slider                   {box-shadow: 0 0 1px #2196F3;}
.switch input:checked + .slider:before          {transform: translateX(1.4em);}

.custom-select                                  {display: block; width: 3em; height: 1.6em; font-size: 1em; padding: 0 0 0 0.5em; border-bottom: solid 1px white; box-sizing: border-box; position: relative;}
.custom-select:hover                            {border-color: var(--color3);}
.custom-select .sel                             {display: flex; width: 100%; height: 1.6em; align-items: center; flex-wrap: wrap; font-size: 1em; color: white; font-weight: 500; line-height: 1.1em; padding-right: 1.5em; box-sizing: border-box; cursor: pointer; position: relative; transition: .2s ease-in-out;}
.custom-select > svg                            {display: block; width: 0.6em; fill: white; position: absolute; right: 0; top: 0.5em; z-index: -1;}
.custom-select .dropdown                        {display: none; width: 100%; background: var(--color0); box-sizing: border-box; position: absolute; left: 0; top: 2em; z-index: 8;}
.custom-select .dropdown .inner                 {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; overflow-y: auto;}
.custom-select .inner ul                        {display: block; width: 100%;}
.custom-select .inner ul li                     {display: flex; width: 100%; min-height: 2em; align-items: center; font-size: 0.95em; line-height: 1.1em; color: white; padding: 0.2em 0 0.2em 0.5em; position: relative; z-index: 500; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:hover               {color: var(--color3); background: rgba(255,255,255,0.08);}

.custom-number                                  {display: block; position: relative;}
.custom-number input                            {display: block; width: 5em; height: 1.6em; text-align: center; font-size: 1em; color: white; padding: 0 1.1em; border: none; border-bottom: solid 1px white; background: transparent; outline: none; box-sizing: border-box; position: relative; font-family: 'raleway', sans-serif; }
.custom-number input::-webkit-outer-spin-button,
.custom-number input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.custom-number input[type=number]               {-moz-appearance: textfield;}

.custom-number input:focus                      {border-color: var(--color3);}
.custom-number span                             {display: flex; width: 0.6em; height: 1.5em; justify-content: center; align-items: center; position: absolute; bottom: 0; z-index: 2;}
.custom-number span.less                        {left: 0; transform: rotate(90deg);}
.custom-number span.more                        {right: 0; transform: rotate(-90deg);}
.custom-number span svg                         {display: block; width: 100%; fill: white; transition: .15s ease-in-out;}
.custom-number span:hover svg                   {fill: var(--color3);} 

.date-select                                    {display: block; position: relative;}
.date-select input[type="date"]                 {display: block; width: 7em; height: 1.6em; font-size: 1em; color: white; padding: 0 0 0 0.5em; border: none; border-bottom: solid 1px white; background: transparent; outline: none; box-sizing: border-box; position: relative; font-family: 'raleway', sans-serif; }
.date-select input[type="date"]:focus           {border-color: var(--color3);}
.date-select input[type="date"]::-webkit-inner-spin-button,
.date-select input[type="date"]::-webkit-calendar-picker-indicator
                                                {opacity: 0; cursor: pointer;}
.date-select > svg                              {display: block; width: 0.6em; fill: white; position: absolute; right: 0; top: 0.5em; z-index: -1;}

.grid-links                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;}
.grid-links > a                               {display: flex; flex-grow: 1; min-width: 10em; min-height: 12em; justify-content: center; align-items: center; flex-wrap: wrap; padding: 2em; box-sizing: border-box; border-radius: var(--border-radius2); overflow: hidden; position: relative; z-index: 1; isolation: isolate;}
.grid-links > a:before                        {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: -1; content: ""; background: var(--color1b); opacity: 0.6;}
.grid-links > a .img                          {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: -2;}
.grid-links > a .img img                      {display: block; width: 100%; height: 100%; object-fit: cover;}
.grid-links > a .logo                         {display: block; height: 6em;}
.grid-links > a .logo img                     {display: block; height: 100%;}

.faq                                            {display: flex; width: 100%; max-width: 60em; flex-wrap: wrap; gap: 2rem;}
.faq h3                                         {text-transform: uppercase; margin-bottom: -1rem;}
.faq .list                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em;}
.faq article                                    {display: block; width: 100%; background: var(--color1b); font-size: 0.9em; border-bottom: solid 1px rgba(0, 0, 0, 0.15); padding: 1em; border-radius: var(--border-radius); position: relative; box-sizing: border-box; transition: .35s ease-in-out;}
.faq article .title                             {display: block; width: 100%; text-align: left; font-size: 1.15em; font-weight: 500; margin: 0; cursor: pointer; position: relative; padding-right: 3rem; box-sizing: border-box; transition: .15s ease-in-out;}
.faq article .title:hover                       {color: var(--color3);}
.faq article .title:after                       {display: flex; width: 1em; height: 1em; justify-content: center; align-items: center; font-size: 1.7em; line-height: 1em; color: white; font-weight: 300; position: absolute; right: 0; top: -0.05em; content: "+";}
.faq article > div                              {display: none; width: 100%; padding: 0.8em 0;}
.faq article > div h4                           {display: block; font-size: 1em; font-weight: 500; margin: 0.8rem 0 0.3rem;}
.faq article > div > *:first-child              {margin-top: 0 !important;}
.faq article > div :is(h5, p)                   {max-width: 100%; text-align: left; color: white;}
.faq article > div h5                           {font-weight: 500; margin: 1rem 0 0.3rem;}
.faq article.sel                                {background-color: var(--color1c);}
.faq article.sel .title:after                   {content: "-";}

.contacts                                       {display: flex; flex-wrap: wrap; gap: 0.6em; font-size: 1.15em;}
.contacts li                                    {display: block; position: relative; box-sizing: border-box;}
.contacts li svg                                {display: block; width: 1.2em; fill: white; position: absolute;;}
.contacts-soc                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em; margin-top: 0.8rem;}
.contacts-soc a                                 {display: block; width: 1.25em;}
.contacts-soc a svg                             {display: block; width: 100%; fill: white; transition: .15s ease-in-out;}
.contacts-soc a:hover svg                       {fill: var(--color3);} 
  @media screen and (min-width: 1081px)         {
  .contacts                                     {width: 100%;}
  .contacts li                                  {text-align: left; padding-left: 1.8em;}
  .contacts li svg                              {left: 0; top: calc(50% - 0.6em)}
  }
  @media screen and (max-width: 1080px)         {
  .contacts                                     {justify-content: center; gap: 1em; margin-top: 1rem}
  .contacts li                                  {width: auto; text-align: center; padding-top: 1.8em;}
  .contacts li:first-child                      {width: 100%;}
  .contacts li svg                              {left: calc(50% - 0.6em); top: 0;}
  .contacts-soc                                 {justify-content: center;}
  }

.map                                            {display: block; width: 100%; height: 30rem; position: relative; border-radius: var(--border-radius); overflow: hidden;}
.map iframe                                     {display: block; width: 100%; height: 100%; inset: 0; position: absolute;}

.lipno                                          {position: relative;}
.lipno .overflow                                {display: block; width: 100%;}
.lipno .img                                     {display: block; width: 100%; position: relative;}
.lipno .img img                                 {display: block; width: 100%;}
.lipno .img .routes                             {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.lipno .img .routes path                        {stroke-width: 3px; fill: none; cursor: pointer; transition: .15s ease-in-out;}
.lipno .img .routes a:hover path,
.lipno .img .routes a.hover path                {stroke-width: 7px;}
.lipno .img .routes a[data-route="route1"] path {stroke: var(--route1);}
.lipno .img .routes a[data-route="route2"] path {stroke: var(--route2); stroke-dasharray: 10 5;}
.lipno .img .routes a[data-route="route3"] path {stroke: var(--route3);}
.lipno .img .routes a[data-route="route4"] path {stroke: var(--route4);}
.lipno .img > span                              {display: block; width: 4%; position: absolute; z-index: 2;}
.lipno .img > span:before                       {display: block; width: 100%; padding-top: 100%; background: URL('images/map/icon.svg') no-repeat center center; background-size: cover; position: absolute; left: 0; top: -50%; content: "";}
.lipno .img > span.lipno                        {top: 56%; right: 6%;}
.lipno .img > span.vyton                        {top: 84%; right: 14%;}
.lipno .img > span.frymburk                     {top: 62%; right: 21.4%;}
.lipno .img > span.vltavice                     {top: 60%; right: 50%;}
.lipno .img > span.cerna                        {top: 32%; right: 54%;}
.lipno .img > span.plana                        {top: 29%; right: 74%;}
.lipno .legend                                  {display: block;}
.lipno .legend ul                               {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem 1.6rem;}
.lipno .legend ul li                            {display: block; padding-left: 2em; text-align: left; font-size: 0.85em; position: relative; box-sizing: border-box;}
.lipno .legend ul li a                          {cursor: pointer;}
.lipno .legend ul li:before                     {display: block; width: 1.4em; height: 1.4em; border: solid 2px transparent; border-radius: 100%; box-sizing: border-box; position: absolute; left: 0; top: 0.02em; content: "";}
.lipno .legend ul li.route1:before              {border-color: var(--route1);}
.lipno .legend ul li.route2:before              {border-color: var(--route2); border-style: dashed;}
.lipno .legend ul li.route3:before              {border-color: var(--route3);}
.lipno .legend ul li.route4:before              {border-color: var(--route4);}
.lipno .legend ul li :is(a.hover, a:hover)      {text-decoration-color: transparent;}
.lipno .legend ul li.route1 :is(a.hover, a:hover) {color: var(--route1);}
.lipno .legend ul li.route2 :is(a.hover, a:hover) {color: var(--route2); border-style: dashed;}
.lipno .legend ul li.route3 :is(a.hover, a:hover) {color: var(--route3);}
.lipno .legend ul li.route4 :is(a.hover, a:hover) {color: var(--route4);}
  @media screen and (min-width: 1081px)         {
  .lipno .legend                                {width: 38%; position: absolute; left: 0; top: 65%; z-index: 2;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .lipno .legend ul li                          {width: calc(50% - 0.8rem);}
  }
  @media screen and (max-width: 768px)          {
  .lipno .legend                                {margin-top: 1rem;}
  .lipno .legend ul li                          {font-size: 0.75em;}

  .lipno .overflow                              {width: calc(100% + 2 * var(--wrapper-padding)); margin-inline: calc(0px - var(--wrapper-padding)); padding: 0 var(--wrapper-padding) 15px; overflow: auto;}
  .lipno .overflow .img                         {min-width: 960px;}
  /*.lipno .overflow::-webkit-scrollbar           {height: 16px;}
  .lipno .overflow::-webkit-scrollbar-track-piece:start
                                                {margin-left: var(--wrapper-padding);}
  .lipno .overflow::-webkit-scrollbar-track-piece:end
                                                {margin-right: var(--wrapper-padding);}
  .lipno .overflow::-webkit-scrollbar-thumb     {background: URL('images/arrow-white-left.svg') no-repeat left 5px center, URL('images/arrow-white-right.svg') no-repeat right 5px center, var(--color2); background-size: auto 66%; -webkit-box-shadow: inset 0 0 4px rgba(255,255,255,0.3);}
  */
  }

.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: 5em min(1rem, 5%) 4.5em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 100000;}
.wndw:before                                    {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .4s ease-in-out;}
.wndw > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
.wndw > div                                     {width: 100%; max-width: 50em; max-height: calc(100vh - 4rem); background: white; position: relative; border-radius: var(--border-radius); overflow: hidden; top: 5em; z-index: 2; overflow-y: auto; overflow-x: hidden; transition: .4s ease-in-out;}
.wndw > div:before                              {display: block; width: 100%; height: 1.2rem; background: white; position: absolute; left: 0; top: 0; content: ""; z-index: 5;}
.wndw > div .overflow                           {overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}
.wndw.show                                      {left: 0;}
.wndw.show:before                               {opacity: 1;}
.wndw.show > div                                {top: 0;}
.wndw.show.hide                                 {left: -99999px; transition: left .4s ease-in-out; transition-delay: 1s;}
.wndw.show.hide:before                          {opacity: 0;}
.wndw.show.hide > div                           {top: -5em; opacity: 0;}
.wndw .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: #cccccc; border-radius: 2px; position: absolute; left: 0; top: calc(50% - 1px); z-index: 1; transition: .2s ease-in-out;}
.wndw .close:hover span                         {background: #252525;}
.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%; flex-wrap: wrap; gap: 1em; font-size: 1rem; padding: max(1rem, 5%); box-sizing: border-box;}
.wndw .wndw-content .title                      {width: 100%; font-size: 1.5em; color: var(--color0); font-weight: 700; margin-bottom: 0.2rem;}
.wndw .wndw-content .title span                 {display: block; font-weight: 600;}
.wndw .wndw-content p                           {display: block; width: 100%; font-size: 1em; color: var(--color0); font-weight: 400; line-height: 1.3em;}
.wndw .wndw-content a                           { text-decoration:underline; color: var(--color0); cursor:pointer; }
  @media screen and (min-width: 769px)          {
  .wndw .wndw-content .title                    {display: flex; align-items: center; flex-wrap: wrap; text-align: left;}
  .wndw .wndw-content .title span               {padding-left: 0.6em; margin-left: 0.4em; position: relative;}  
  .wndw .wndw-content .title span:before        {display: block; width: 0.26em; height: 0.26em; background-color: var(--color1); border-radius: 100%; position: absolute; left: 0; top: 0.7em; content: "";}
  }
  @media screen and (max-width: 768px)          {
  .wndw .wndw-content .title                    {display: block;}
  .wndw .wndw-content .title span               {width: 100%; font-size: 0.8em; line-height: 1em;}
  }
  
  
 @media screen and (max-width: 768px) {
    .header .collapse .button.color2 {
        position: fixed;
        left: 1.5rem;
        bottom: 1rem;
        z-index: 10000;
        width: auto;
        margin: 0;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }

    .header.show .collapse .button.color2,
    .header.closing .collapse .button.color2 {
        position: static;
        width: calc(100% - 2 * var(--padding-inline));
        margin-bottom: var(--padding-inline);
        box-shadow: none;
    }
}