@charset "UTF-8";
/* Copyright NAVIPEDIA. All rights reserved. Designed by eYee for www.navipedia.pl */
/* ==========================================================================
   @import */
@import url(preloader.css?v=20260914);
/* ==========================================================================
   WEB FONTS
  *
  * Web Fonts from Fontspring.com
  *
  * All OpenType features and all extended glyphs have been removed.
  * Fully installable fonts can be purchased at https://www.fontspring.com
  *
  * The fonts included in this stylesheet are subject to the End User License you purchased
  * from Fontspring. The fonts are protected under domestic and international trademark and 
  * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
  * distributing this font software.
  *
  * (c) 2010-2026 Fontspring
  * The fonts included are copyrighted by the vendor listed below.
  * Vendor: Typodermic Fonts Inc.
  * License URL: https://www.fontspring.com/licenses/typodermic/webfont
  */

   @font-face {
       font-family: 'earwig_factory_rg';
       src: url('../fonts/earwig_factory/earwig_factory_rg-webfont.woff2') format('woff2'),
            url('../fonts/earwig_factory/earwig_factory_rg-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   @font-face {
       font-family: 'earwig_factory_letters';
       src: url('../fonts/earwig_factory/earwig_factory_letters-webfont.woff2') format('woff2'),
            url('../fonts/earwig_factory/earwig_factory_letters-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'proxima_novalight';
       src: url('../fonts/a/proximanova-light-webfont.woff2') format('woff2'),
            url('../fonts/a/proximanova-light-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   } 
   @font-face {
       font-family: 'proxima_novaregular';
       src: url('../fonts/b/proximanova-regular-webfont.woff2') format('woff2'),
            url('../fonts/b/proximanova-regular-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }   
   @font-face {
       font-family: 'proxima_novabold';
       src: url('../fonts/c/proximanova-bold-webfont.woff2') format('woff2'),
            url('../fonts/c/proximanova-bold-webfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   @font-face {
       font-family: 'ProximaNovaSemiBold';
       src: url('../fonts/d/ProximaNova-Sbold-webfont.woff') format('woff'),
            url('../fonts/d/ProximaNova-Sbold-webfont.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
   }
   @font-face {
        font-family: 'made_evolve_evothin';
        src: url('../fonts/evolve_evo/made_evolve_sans_thin_evo-webfont.woff2') format('woff2'),
             url('../fonts/evolve_evo/made_evolve_sans_thin_evo-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_evolight';
        src: url('../fonts/evolve_evo/made_evolve_sans_light_evo-webfont.woff2') format('woff2'),
             url('../fonts/evolve_evo/made_evolve_sans_light_evo-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_evoregular';
        src: url('../fonts/evolve_evo/made_evolve_sans_regular_evo-webfont.woff2') format('woff2'),
             url('../fonts/evolve_evo/made_evolve_sans_regular_evo-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_evomedium';
        src: url('../fonts/evolve_evo/made_evolve_sans_medium_evo-webfont.woff2') format('woff2'),
             url('../fonts/evolve_evo/made_evolve_sans_medium_evo-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_evobold';
        src: url('../fonts/evolve_evo/made_evolve_sans_bold_evo-webfont.woff2') format('woff2'),
             url('../fonts/evolve_evo/made_evolve_sans_bold_evo-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    } 
    @font-face {
        font-family: 'made_evolve_thin';
        src: url('../fonts/evolve/made_evolve_sans_thin-webfont.woff2') format('woff2'),
             url('../fonts/evolve/made_evolve_sans_thin-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_light';
        src: url('../fonts/evolve/made_evolve_sans_light-webfont.woff2') format('woff2'),
             url('../fonts/evolve/made_evolve_sans_light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_regular';
        src: url('../fonts/evolve/made_evolve_sans_regular-webfont.woff2') format('woff2'),
             url('../fonts/evolve/made_evolve_sans_regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_medium';
        src: url('../fonts/evolve/made_evolve_sans_medium-webfont.woff2') format('woff2'),
             url('../fonts/evolve/made_evolve_sans_medium-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'made_evolve_bold';
        src: url('../fonts/evolve/made_evolve_sans_bold-webfont.woff2') format('woff2'),
             url('../fonts/evolve/made_evolve_sans_bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
/* ==========================================================================
   GLOBAL
   ========================================================================== */
/* Reset */ 
html {
    -webkit-text-size-adjust: none;
}
/* Preloader */
body {
    overflow: hidden;
}
body.loaded {
    overflow: visible;
}
/* Body */
body { 
    background: #fff;
    color: #4e4e4e; 
    height: auto;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-style: normal;
    margin: 0 0 0 0; 
    padding: 0 0 0 0;
}
/* Nagłówki */
  h1 {
    font-family: 'proxima_novabold', Arial, Helvetica, sans-serif;
    font-size: clamp(35px, calc(3vw + 22px), 54px);
    line-height: 1.1;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase; 
    color: #292B37; /* rgb(0,53,153) rgb(88,123,182) rgb(102,153,204) #004B96 */
    letter-spacing: 1px;
    background-color: transparent;
    margin: 20px 0 0 0;
    padding: 0 0 0 0;
  } 
  h1.big1 {
    /* Napis zachowuje 148px, dopóki kontener flag ma maksymalne 960px.
       Poniżej ok. 1067px okna maleje szybciej niż flagi, płynnie do 40px.
       Po ukryciu zdjęcia wraca do mobilnych 42px. */
    font-size: clamp(40px, calc(22vw - 86.6667px), 148px);
    /* Nad zdjęciem położenie i odstępy liter zmieniają się płynnie.
       Osobny układ pozostaje tylko do 540px, kiedy zdjęcie znika. */
    letter-spacing: clamp(0.8px, calc(0.5vw - 2.5px), 5px);
    padding: clamp(6%, calc(14vw - 96px), 15%) 0 3% 0;
  } 
  /* Litera „i”: 10 cykli przez 10 sekund, skokowa zmiana koloru co 0,5 sekundy.
     Po zakończeniu animacji litera pozostaje czerwona. */
  .textIMG h1.big1 > .red3 {
    --i-pulse-color: #fff;
  }
  body.loaded .textIMG h1.big1 > .red3 {
    animation: navipedia-i-pulse 1s steps(1, end) 10;
  }
  @keyframes navipedia-i-pulse {
    0%, 100% {
      color: #ff0200;
    }
    50% {
      color: var(--i-pulse-color);
    }
  }
  /* Po ukryciu zdjęcia: granatowy zamiast białego. */
  @media (max-width: 540px) {
    .textIMG h1.big1 > .red3 {
      --i-pulse-color: #292b37;
    }
  }
  /* Bez animacji dla osób preferujących ograniczony ruch. */
  @media (prefers-reduced-motion: reduce) {
    body.loaded .textIMG h1.big1 > .red3 {
      animation: none;
    }
  }
  h1.big2 {
    font-size: 62px;
    letter-spacing: 10px;
    padding: 60px 0 10px 0;
  }
  h1.evolve_evothin {
    font-family: 'made_evolve_evothin', Arial, sans-serif;
  } 
  h1.evolve_evolight {
    font-family: 'made_evolve_evolight', Arial, sans-serif;
  }
  h1.evolve_evoregular {
    font-family: 'made_evolve_evoregular', Arial, sans-serif;
  }
  h1.evolve_evomedium {
    font-family: 'made_evolve_evomedium', Arial, sans-serif;
  }
  h1.evolve_evobold {font-family: 'made_evolve_evobold', Arial, sans-serif;}
  h1 .evolve_evobold {font-family: 'made_evolve_evobold', Arial, sans-serif;}
  h1.evolve_thin {font-family: 'made_evolve_thin', Arial, sans-serif;}
  h1.evolve_light {font-family: 'made_evolve_light', Arial, sans-serif;}
  h1.evolve_regular {font-family: 'made_evolve_regular', Arial, sans-serif;}
  h1.evolve_medium {font-family: 'made_evolve_medium', Arial, sans-serif;}
  h1.evolve_bold {font-family: 'made_evolve_bold', Arial, sans-serif;}
  h1 .evolve_bold {font-family: 'made_evolve_bold', Arial, sans-serif;}
  
  h1.earwig_rg {
    font-family: 'earwig_factory_rg', Arial, sans-serif;
    font-size: 72px;
  } 
  h1.earwig_letters {
    font-family: 'earwig_factory_letters', Arial, sans-serif;
    font-size: 62px;
  } 
  h2 {
    word-spacing: 1px;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(26px, calc(1.5vw + 18px), 34px);
    line-height: 1.2;
    text-align: center;
    font-weight: normal;
    color: #666;
    letter-spacing: -1px;
    background-color: transparent;
    margin: 0 0 0 0;
    padding: 15px 0 0 0;
  }
  h2.evolve_evothin {font-family: 'made_evolve_evothin', Arial, sans-serif;}
  h2.evolve_evolight {font-family: 'made_evolve_evolight', Arial, sans-serif;}
  h2.evolve_evoregular {font-family: 'made_evolve_evoregular', Arial, sans-serif;}
  h2.evolve_evomedium {font-family: 'made_evolve_evomedium', Arial, sans-serif;}
  h2.evolve_evobold {font-family: 'made_evolve_evobold', Arial, sans-serif;}
  h2.evolve_thin {font-family: 'made_evolve_thin', Arial, sans-serif;}
  h2.evolve_light {font-family: 'made_evolve_light', Arial, sans-serif;}
  h2.evolve_regular {font-family: 'made_evolve_regular', Arial, sans-serif;}
  h2.evolve_medium {font-family: 'made_evolve_medium', Arial, sans-serif;}
  h2.evolve_bold {font-family: 'made_evolve_bold', Arial, sans-serif;}
  h3 { 
    text-align: center;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: clamp(21px, calc(0.5vw + 18px), 24px);
    line-height: 1.1;
    color: #707070;
    font-weight: normal;
    margin: 0 0 0 0 ;
    padding: 10px 0 0 0 ;
    background-color: transparent;
    letter-spacing: -1px;
  }
  h3.evolve_evothin {font-family: 'made_evolve_evothin', Arial, sans-serif;}
  h3.evolve_evolight {font-family: 'made_evolve_evolight', Arial, sans-serif;}
  h3.evolve_evoregular {font-family: 'made_evolve_evoregular', Arial, sans-serif;}
  h3.evolve_evomedium {font-family: 'made_evolve_evomedium', Arial, sans-serif;}
  h3.evolve_evobold {font-family: 'made_evolve_evobold', Arial, sans-serif;}
  h3.evolve_thin {font-family: 'made_evolve_thin', Arial, sans-serif;}
  h3.evolve_light {font-family: 'made_evolve_light', Arial, sans-serif;}
  h3.evolve_regular {font-family: 'made_evolve_regular', Arial, sans-serif;}
  h3.evolve_medium {font-family: 'made_evolve_medium', Arial, sans-serif;}
  h3.evolve_bold {font-family: 'made_evolve_bold', Arial, sans-serif;}
  h4 { 
    text-align: center;
    text-transform: uppercase; 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(20px, calc(0.5vw + 18px), 23px);
    line-height: 1.2;
    color: #222222;
    font-weight: normal;
    background-color: transparent;
    word-spacing: 4px;
    letter-spacing: 0.6px;
    margin: 100px 0 40px 0;
    padding: 0 0 0 0;
  }
  h4 .normal, h4.normal {
    text-transform: none;
  } 
  h4.nomargin, h5.nomargin  {
  margin: 30px 0 40px 0;
  }
  h4.nomarginminus, h5.nomarginminus  {
  margin: -30px 0 35px 0;
  }  
  h5 {
    text-align: center;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(20px, calc(0.5vw + 18px), 23px);
    line-height: 1.3;
    color: #222222; 
    font-weight: normal;
    background-color: transparent;
    margin: 100px 0 40px 0;
    padding: 0 0 0 0;
  }
  h5.table-title {
    margin: 60px 0 20px;
    font-size: clamp(18px, calc(0.3vw + 17px), 20px);
    line-height: 1.25;
  }
  h5.left {
    text-align: left;
    margin: 0 0 0 0;
  }  
  h6 { 
    text-align: center;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: clamp(16px, calc(0.25vw + 15px), 17px);
    line-height: 1.4;
    margin: 30px 0 60px 0;
    padding: 0 0 0 0;
    color: #707070; 
    font-weight: normal;
    background-color: transparent;
    letter-spacing: 1px;
  }
/* Tekst */
  div {
     font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
     font-size: clamp(18px, calc(0.25vw + 17px), 19px);
     line-height: 1.4;
     color: #4e4e4e;
     text-align: left;
     padding: 0 0 0 0;
   }
  /* for 403 404 */
  div.earwig_rg {
    font-family: 'earwig_factory_rg', Arial, sans-serif;
    font-size: 36px;
    letter-spacing: 0px;
  } 
  div.earwig_letters {
    font-family: 'earwig_factory_letters', Arial, sans-serif;
    font-size: 36px;
    letter-spacing: -2px;
  } 
  div .earwig_letters_big {
  font-size: 46px;
  letter-spacing: -10px; 
  font-weight: bold;
  }
  p {
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    text-align: left;
    padding: 0 0 0 0;
  }
  i {
    font-style: italic;
  }
  b {
    font-family: 'proxima_novabold', Arial, Helvetica, sans-serif; 
    font-weight: normal;
    color: #5e5e5e;
    background-color: transparent;
  }
  strong {
    font-family: 'proxima_novabold', Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #292B37;
    background-color: transparent;
  }
  code {
    font-size: 14px;
  }
  /* Długie formuły Excela zawijają się bez dodawania znaków do ich treści. */
  code.excel-formulas {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  sub, sup {
    font-size: 14px;
  }
   /* Cytaty */
  blockquote {
    font-family: 'made_evolve_light', Arial, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #5e5e5e;
    font-style: italic;
    text-align: justify; 
    position: relative;
    padding: 0 60px 0 60px;
    margin: 30px 0 40px 0;
  }
  blockquote::before {
    font-family: Georgia, serif;
    content: ',,';
    letter-spacing: -10px;
    font-size: 100px;
    color: #ccc;
    position: absolute;
    left: 10px;
    bottom: -15px;
  }
  blockquote::after {
    font-family: Georgia, serif;
    content: ',,';
    letter-spacing: -10px;
    font-size: 100px;
    color: #ccc; 
    position: absolute;
    right: 10px;
    top: -85px;
  }
  /* Linie */
  hr {
    border: solid #dddddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 1.25rem 30px 1.1875rem;
    height: 0;
  }
  hr.dark {	
    border: solid #aaa;
    border-width: 1px 0 0;
    clear: both;
    margin: 1.25rem 30px 1.1875rem;
    height: 0;
  }
  br.clear {
    clear: both;
  }
  .light {
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    color: #4e4e4e; 
  }
  .center {
    text-align: center;
  }    
  .right {
    text-align: right;
  }
  /* left dodane dla nowych tabel */
  .left { 
    text-align: left;
    padding-left: 5px;
  }
  .uppercase {	
    text-transform: uppercase;
    letter-spacing: 0.5px; 
    font-size: 18px;
  }
  .signature {
    font-family: 'made_evolve_light', Arial, sans-serif;
    color: #5e5e5e;
    float: right;
    text-align: right;
    padding-top: 10px; 
    clear: both;
  }
  p.padding {  
    padding: 0 0 0 40px;
  }
  p.nopadding {
    padding: 0 0 0 0;
  }
  p.indent {
    text-indent: 30pt;
  } 
  p.justify {
    text-align: justify;
    padding: 0 0 0 0;
  }
  .dekoracja_overline {
    text-decoration: overline;
    font-size: 12px;
  }
  /* kolory */
  .navy-transparent {color: transparent;}
  .navy {color: #292B37;}
  .navy2 {color: #3e404b;}
  .bluem0 {color: #004B96;}
  .bluem1 {color: #004B96;}
  .yellowm {color: #f8e874;}
  .blue {color: #004B96;}
  .blue1 {color: rgb(88,123,182);}
  .blue2 {color: rgb(102,153,204);}
  .blue3 {color: #23b4fd;}
  .red {color: #C80000;}
  .red2 {color: #800000;}
  .red3 {color: rgb(255,2,0);}
  .green {color: #007500;}
  .green2 {color: #00E000;}
  .green3 {color: #79a21c;}
  .green4 {color: rgb(0,100,53);}
  .orange {color: #ff4600;}
  .orange2 {color: #EF7700;} 
  .yelow {color: #FFB400;}
  .yelow2 {color: #ffab00;}
  .yelow3 {color: rgb(164,129,56);}
  .violet {color: #730000;}
  .violet1 {color: rgb(110,59,133);}
  .violet2 {color: #A30075;}
  .violet3 {color: #9497ce;}
  .white {color: #fff;}
  .white2 {color: #fcfcfc;}
  .black {color: #000;} 
  .gray0 {color: #4e4e4e;}
  .gray {color: #aaa;}    
  .gray2 {color: #505061;}
  /* Tła pomocnicze */    
  .bg {
    background-color: rgba(32,96,190,0.3);
    padding: 10px 10px;
  }
  .bg_white {
    line-height: 28px;
    background-color: #fff; 
    border: 1px solid #000; 
    padding-left: 28px;
    margin: 0 7px 0 0;
  }
  .bg_gray0 {
    line-height: 1.4;
    background-color: #eee; 
    padding: 1px 5px 5px 5px;
  }
  .bg_gray1 {
    line-height: 1.4;
    background-color: #DCDCDC;  
    padding: 1px 5px 5px 5px;
  }
  .bg_blue {
    line-height: 1.4;
    background-color: #C0D8FF;  
    padding: 1px 5px 3px 5px;
  }
  .bg_black {
    line-height: 28px;
    background-color: #000; 
    border: 1px solid #000; 
    padding-left: 28px;
    margin: 0 7px 0 0;
  }
  .bg_li_green {
    line-height: 1.4;
    background-color: #d5F5DC;
    padding: 1px 3px 3px 3px;
  }
  .bg_li_blue {
    line-height: 1.4;
    background-color: #C0D8FF; 
    padding: 1px 3px 3px 3px;
  }
   /* Spany i kolory */
  span.navipedia {
    padding: 0 0 0 0;
    margin: 0 0 0 -5px;
  }	
  span.bg-gray {
    background-color: rgba(41,43,55,0.6);
    padding: 0 5px;
  }	
  span.bg-yellow {
    background-color: #FFC400;
    padding: 0 4px;
    color: #4e4e4e;
    border: 1px solid #D9D9D9;
  }
  span.bg-yellow2 {
    background-color: #ffff90;
    padding: 0 5px;
  }	 
  .break20 {
    padding-top: 20px;
  }
  .break60 {
    padding-top: 60px;
  }
  .break100 {
    padding-top: 100px;
  }
  .break200 {
    padding-top: 200px;
  }
  .break300 {
    padding-top: 300px;
  }
  .break600 {
    padding-top: 600px;
  }
  .margin10 {
    margin: 0 10px;
  }
/* ==========================================================
   LAYOUT 
   ======================================================= */
  /* #wrapper { ... } jak będzie */
#content,
#content2,
#content3,
#content4,
#contentsecond,
#contentfooter {
  max-width: 1000px;
  width: 94%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0; /* było margin-bottom: 0 auto; to niepoprawna składnia */
}
/* Można spróbować uprościć
.content {
    max-width: 1000px;
    width: 94%;
    margin: 0 auto;
} 
*/
#contentfotos,
#contentfotos2,
#contentfotos3 { 	
  max-width: 1100px;
  width: 94%;  
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0; /* było margin-bottom: 0 auto; to niepoprawna składnia */
}
/* astro */
#gradient {
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff, #fcfbf6);
}
/* rejsy */
#gradient-gray {
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff, #f5f5f8);
}
/* about */
#gradient-green {
  background-color: #f6f6ee;
}
  /* index */
  .container {
    position: relative;
    max-width: 960px;
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0;
  }
/* Układ ilustracji rysunków obok siebie */
  .column-fig {
    box-sizing: border-box;
    position: relative;
    padding: 3px 0 3px 0;
    float: none;
  }
/* Układ zdjęć */
  .column-foto-center {
    box-sizing: border-box;
    position: relative;
    padding: 50px 0 0 0;
    float: none;
    text-align: center;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    color: #4e4e4e; 
    font-size: 17px;
    line-height: 20px;
  }
  .column-foto {
    box-sizing: border-box;
    position: relative;
    padding: 50px 0 0 0;
    float: none;
    text-align: center;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    color: #4e4e4e; 
    font-size: 17px;
    line-height: 20px;
  }
/* Responsywne IFRAME - Osadzenie wideo na stronie */
  .iframe-container {
    overflow: hidden;
    /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625) */
    padding-top: 56.25%;
    position: relative;
  }
  .iframe-container iframe {
    border: 0;
    height: 100%;  
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
/* ==========================================================
   HEADER 
   ======================================================= */
header {
  /* Bezpieczny obszar ekranu dla górnej i bocznych krawędzi */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  background: #2c2c2c;
  margin: 0 auto 0 auto;
  /* border-bottom: 1px solid #aaa; */
  z-index: 25; /* do czego to jest ? */ 
  padding-bottom: 0;    
  position: relative;
  height: 45px;
  }
  /* Sekcje ozdobne */
  .aside {
    background: rgba(55,55,55,0.9);
    margin: 0 auto 0 auto;
    position: relative;
    height: 200px;
    margin-bottom: 0;
    text-align: center;
    padding: 24px 0 0 0;
  }
  .barunder {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABFJREFUeNpiYMAEUrQQAAgwABpPAIPnyt+bAAAAAElFTkSuQmCC);
    margin: 0 auto 0 auto;
    border-bottom: 1px solid #fff; 
    height: 45px;
  }														
  .barunder2 {
    background-color: rgba(41,43,55,0.1);
    margin: 0 auto 0 auto;
    border-top: 1px solid rgba(41,43,55,0.5);
    border-bottom: 1px solid rgba(41,43,55,0.2);
    height: auto;
  }
  .barunder_scale {
    background: url('../images/bg/index/barunder.png') top repeat-x #fff ;
    margin: 0 auto 0 auto;
    border-bottom: 1px solid #999;
    height: auto;
  }
  .barunder_txt {
    max-width: 1000px;	
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0;
    padding: 14px 0 12px 0;	
    text-align: right;
    font-size: 12px;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-weight: normal;
    letter-spacing: 1px; 
    color: #888;
  }	
  /* Do usunięcia: było w ASTRO jest też w @media */
  .barunder_bg {
    background-color: #ffffff;
    background-size: 5px 5px;
    background-image: repeating-linear-gradient(135deg, #f0f0eb 0, #f0f0eb 1px, #ffffff 0, #ffffff 50%);
    margin: 0 auto 0 auto;
    border-bottom: 1px solid #f0f0eb; 
    height: 45px;
  }
  .barunder_tr {
    background: #fff;
    margin: 0 auto 0 auto;
    border-bottom: 1px solid #eee; 
    height: 45px;
  }
/* ==========================================================
   MENU DESKTOP + MOBILE BASE MENU 
   ======================================================= */
#menu,
   #menu ul {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   #menu {
       width: 960px;
       margin: 0 auto;
       background: #2c2c2c;
   }
   /* Clearfix */
   #menu::before,
   #menu::after {
       content: "";
       display: table;
   }
   #menu::after {
       clear: both;
   }
/* ==========================================================
   DESKTOP TOP LEVEL */
   #menu li {
       float: left;
       position: relative;
    /* border: 1px solid red;  TESTY */ 
   }
   /* Text menu desktop and mobile */
   #menu a {
       float: left;
       padding: 11px 38px 1px 38px;
       color: #aaa;
       text-transform: uppercase;
       text-decoration: none;
       font-size: 16px;
       font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
   }
   #menu li:hover > a {
        color: #fafafa;
    }
/* ==========================================================
   LOGO */
    #menu a img {
        margin-top: -1px;
        padding: 0;
        width: 26px;
        height: 26px;
        background:
            url("../images/bg/index/navipedia_start_gray.svg")
            no-repeat left top;
    }
    #menu li:hover > a img {
        background:
            url("../images/bg/index/navipedia_start_white.svg")
            no-repeat left top;
    }
/* ==========================================================
   DESKTOP SUBMENU */
    #menu ul {
        position: absolute;
        top: 45px;  /* było 44 przed notchCSS */
        left: 0;
        margin: 0; /* było margin-top: 20; a jeszcze wcześniej: margin: 20px 0 0 0; */
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        background: linear-gradient(#444, #111);
        transition: all .2s ease-in-out; /* Uwaga: rozdzielenie transition powoduje znikanie submenu
         przy przejściu kursora pomiędzy poziomami menu. */
    }
    #menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
    /* Third level submenu
     Ustawia trzeci poziom zawsze przy prawej krawędzi drugiego poziomu. */ 
    #menu ul ul {
        top: 0;
        left: 100%;
        margin-left: 1px;
    }
/* ==========================================================
   DESKTOP SUBMENU ITEMS */  
    #menu ul li {
        float: none;
        display: block;
        box-shadow:
            0 1px 0 #111,
            0 2px 0 #666;
    }
    #menu ul li:last-child {
        box-shadow: none;
    }
    /* DESKTOP SUBMENU LINKS */
    #menu ul a {
        display: block;
        float: none;
        padding: 8px;
        white-space: nowrap;
        text-transform: none;
        font-size: 15px; /* było 14px */
        font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    }
    #menu ul a:hover {
        background: #C00000;
    }
/* ==========================================================
   SUBMENU ARROWS */
    #menu ul li:first-child > a::after {
        content: "";
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
    }
    #menu ul ul li:first-child a::after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0; /* wymagane dla strzałki podmenu trzeciego poziomu */ 
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
    }
    #menu ul li:first-child a:hover::after {
        border-bottom-color: #C00000;  /* #ffab00 rgb(120,120,120)*/
    }
    #menu ul ul li:first-child a:hover::after {
        border-right-color: #C00000; /* #ffab00 rgb(120,120,120)*/
        border-bottom-color: transparent;
    }
/* ==========================================================
   DESKTOP / MOBILE VISIBILITY */ 
    /* Ikona znika razem z menu desktopowym: poniżej 960px. */
    @media (width < 960px) {
        #menu img {
            display: none !important;
        }
    }
    /* Widoczność elementów menu desktopowego: od 960px włącznie. */
    @media (width >= 960px) {
        .hide-for-desktop {
            display: none !important;
        }
    }
/* ==========================================================
   MOBILE MENU BUTTON (hidden by default) */ 
    #menu-trigger {
        display: none;
    }
/* ==========================================================
   MOBILE MENU */
    /* Menu mobilne, napis Navipedia i hamburger: poniżej 960px.
       Ten sam próg obowiązuje w menu-mobile.js. */
    @media (width < 960px) {
        #menu-wrap {
            position: relative;
        }
        #menu-wrap * {
            box-sizing: border-box; /* cała szerokość = 100% padding i border mieszczą się wewnątrz */
        }
        /* MENU NAVIPEDIA */
        #mobile-home {
            position: absolute;
            left: 15px;
            height: 44px;
            line-height: 44px;
            color: #fafafa;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1.4px;
            font-size: 20px;
            -webkit-text-stroke: 0.6px currentColor;
            font-family: 'made_evolve_evomedium', Arial, sans-serif;
        }
        /* MENU button */
        #menu-trigger {
            display: block;
            position: relative;
            height: 44px;
            line-height: 44px;
            text-align: right;
            padding-right: 64px;
            color: #fafafa;
            background: rgb(41,43,55); /* #292B37 = rgb(41,43,55), #3e404b, #2c2c2c */
            cursor: pointer;
            text-decoration: none;
            letter-spacing: 2px;
            font-size: 16px;
            font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
        }
        /* Hamburger */
        #menu-trigger::before,
        #menu-trigger::after {
            content: "";
            position: absolute;
            right: 20px;
            left: auto;
            width: 30px;
            height: 2px;
            background: #fff;
            transition: .2s ease;
        }
        #menu-trigger::before {
            top: 15px;
            box-shadow:
                0 6px 0 #fff,
                0 12px 0 #fff;
        }
        #menu-trigger::after {
            display: none;
        } 
        /* X */
        #menu-trigger.active::before {
            top: 22px;
            transform: rotate(45deg);
            box-shadow: none;
        }
        #menu-trigger.active::after {
            display: block;
            top: 22px;
            transform: rotate(-45deg);
        }
        /* Mobile menu panel */
        #menu {
            display: none;
            position: absolute;
            top: 44px; /* było calc(44px + env(safe-area-inset-top)). Uwzględnienie safe-area (iPhone notch) */
            width: 100%;
            margin: 0;
            padding: 10px;
            z-index: 1;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
        }
        /* Wspólne tło panelu i strzałki: jednakowa przezroczystość i rozmycie.
           Podczas slideToggle strzałka może być przycięta do końca animacji. */
        #menu::before {
            content: "";
            display: block;
            position: absolute;
            inset: -8px 0 0;
            z-index: -1;
            pointer-events: none;
            background: rgba(50,50,50,.75);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            clip-path: polygon(0 8px, 31px 8px, 39px 0, 47px 8px,
                               100% 8px, 100% 100%, 0 100%);
        }
        /* Stary trójkąt z nieprzezroczystego obramowania nie jest potrzebny. */
        #menu::after {
            content: none;
        }
        /* Mobile top-level links */
        #menu a {
            display: block;
            float: none;
            padding: 0; 
            color: #ccc;
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 1px;
            font-size: 20px;
            font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
        }
        /* Mobile submenu links */
        #menu ul a {
            padding: 1px; /* odstępy pomiędzy linkami drugiego i trzeciego poziomu */
            white-space: nowrap;
            text-transform: none;
            letter-spacing: 0;
            font-size: 18px;
            font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
        }
        /* POCZĄTEK: trzeci poziom menu mobilnego */
        #menu ul ul a {
            white-space: normal;
        }
        /* KONIEC: trzeci poziom menu mobilnego */
        #menu ul {
            display: none;
            position: static;
            margin: 0;
            background: none;
            box-shadow: none;
        }
        #menu ul ul {
            margin-left: 20px !important; /* musi być: !important bo się przesuwa w lewo */ 
        }
        #menu li {
            float: none;
            position: static;
            display: block;
            margin: 5px;
            box-shadow: none;
        }
        #menu ul li {
            margin-left: 10px;
            box-shadow: none; /* wyzerowanie desktopowych separatorów box-shadow */
        }
        /* Visited links */
        #menu a.submenu:visited {
            color: #ccc;
        }
        /* Mobile link states */
        #menu a:visited { /* kolor odwiedzonych linków w menu mobile */
            color: #fafafa;
        }
        /* Mobile link highlight */        
        #menu ul a:hover {
            background: rgb(140,140,140); /* podświetlenie linków w menu mobile */
        }
        /* Remove desktop arrows */
        #menu ul li:first-child a::after,
        #menu ul ul li:first-child a::after {
            border: 0; /* usuwa strzałki desktopowe w menu mobilnym */
        }
        /* Wymagane dla jQuery slideDown().
         Bez tego submenu nie animuje się poprawnie. */
        #menu ul {
            opacity: 1 !important;
            visibility: visible !important;
            transition: none !important;
        }
} /* End mobile menu */
/* ==========================================================
   DESKTOP OVERRIDE - Restore desktop menu */
/* Przywrócenie menu desktopowego: od 960px włącznie. */
@media (width >= 960px) {
    #menu {
        display: block !important;
    }
}
/* ==========================================================
   CONTENT
   ======================================================= */
  /* Linki */
  a.local, a.local:link, a.local:visited, a.local:active {
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #707070;
    text-decoration: none; 
  }
  a.local:hover {
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #111;
    text-decoration: underline;
  }
  /* Nieużywane klasy do usunięcia — link-underline-blue i link-underline-sm.
  .link-underline-blue a {
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    color: inherit;
    -webkit-transition: background .15s cubic-bezier(.33,.66,.66,1);
    transition: background .15s cubic-bezier(.33,.66,.66,1);
    text-decoration: none;
    }
  .link-underline-blue a:hover,.link-underline-sm a:focus,.link-underline-sm a:active { 
    background: #b4e7f8;
    text-decoration: none;
  }
  */
  a.listlink, a.listlink:link, a.listlink:visited, a.listlink:active {
    color: #4e4e4e;
    text-decoration: none;
  }
  a.listlink:hover {
    color: #c80000;
    text-decoration: none;
  }
  a.link, a.link:link, a.link:active, a.link:visited {
    font-style: normal;
    color: #FFB400; /*było #0088cc*/
    text-decoration: none;
  }
  a.link:hover {
    font-style: normal;
    color: #FFB400;
    text-decoration: underline;
  }
  /* trzeba znaleźć gdzie to jest używane */
  a.chapter, a.chapter:link, a.chapter:visited, a.chapter:active {
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: rgb(90,123,182); 
  text-decoration: none;
  letter-spacing: 0.3px; 
  }
  a.chapter:hover {
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #c80000;
  text-decoration: none;
  letter-spacing: 0.3px; 
  }
  a.pomoce, 
  a.pomoce:link, 
  a.pomoce:visited, 
  a.pomoce:active {
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
    font-weight: normal;
    color: #888; /*rgb(88,123,182)*/ 
  }
  a.pomoce:hover {
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: underline; 
    font-weight: normal;
    color: #111; /*#C80000*/
  }
  a.nav-grid, 
  a.nav-grid:link, 
  a.nav-grid:visited, 
  a.nav-grid:active, 
  a.nav-grid-right, 
  a.nav-grid-right:link, 
  a.nav-grid-right:visited, 
  a.nav-grid-right:active, 
  a.nav-grid-center, 
  a.nav-grid-center:link, 
  a.nav-grid-center:visited, 
  a.nav-grid-center:active {
    text-decoration: none;
    color: #222;
  }
  a.nav-grid:hover, 
  a.nav-grid-right:hover, 
  a.nav-grid-center:hover {
    color: #F00; 
    cursor: pointer;
  }
  a.nav-grid:hover .nav-grid-title, 
  a.nav-grid-right:hover .nav-grid-title, 
  a.nav-grid-center:hover .nav-grid-title {
    color: #aaa; /*było  #ffab00 #F00  */
  }
  a.nav-grid:hover p, 
  a.nav-grid-right:hover p, 
  a.nav-grid-center:hover p {
    color: #222;
  }
  /* next Links Chapter navigation. Bez linii pod tekstem usunąć z-index: 1, z-index: -1 i wpisać bottom: -2px; zamiast bottom: 0; */
  a.next {
    position: relative;
    text-decoration: none;
    color: inherit;
    z-index: 1;
  }
  a.next::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: #b4e7f8;
    z-index: -1;
  }
  a.next:hover::after {
    animation: underline-next .5s ease forwards;
  }
  @keyframes underline-next {
    0% {
      transform: scaleX(0);
      transform-origin: right;
    }
    49% {
      transform: scaleX(0);
      transform-origin: right;
    }
    50% {
      transform: scaleX(0);
      transform-origin: left;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
  /* prev Links Chapter navigation */  
  a.prev {
    position: relative;
    text-decoration: none;
    color: inherit;
    z-index: 1;
  }
  a.prev::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: #b4e7f8;
    z-index: -1;
  }
  a.prev:hover::after {
    animation: underline-prev .5s ease forwards;
  }
  @keyframes underline-prev {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    49% {
      transform: scaleX(0);
      transform-origin: left;
    }
    50% {
      transform: scaleX(0);
      transform-origin: right;
    }
    100% {
      transform: scaleX(1);
      transform-origin: right;
    }
  }
  /* dla długich lików z wielopoziomowym tekstem musi być bez ::before i ::after */
  a.links {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    background-image: linear-gradient(#b4e7f8,#b4e7f8);
    background-repeat: no-repeat;
    background-size: 100% 0%;
    background-position: 0 100%;
    transition: background-size .25s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  a.links:hover,
  a.links:focus-visible {
    background-size: 100% 100%;
  }
  a.links2 {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    background-image: linear-gradient(#b4e7f8,#b4e7f8);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left bottom;
    transition: background-size .25s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  a.links2:hover,
  a.links2:focus-visible {
    background-size: 100% 100%;
  }
  /* Listy */
  ul.disc li {
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: disc ; 
    list-style-position: outside;  
  }
  ul.decimal li {
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: decimal;  
    list-style-position: outside; 
  }
  ul.decimal.blue1 li { 
    color: rgb(88,123,182);
  }
  ul.decimal.red li { 
    color: #C80000;
  }   
  ul.decimal.gray li { 
    color: #aaa;
  }   
  ul.square li { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: square;  
    list-style-position: outside;  
  }
  ul.circle li { 
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: circle ; 
    list-style-position: outside; 
  } 
  ul.lower-alpha li { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: lower-alpha; 
    list-style-position: outside;  
  }
  ul.upper-roman li { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    color: #4e4e4e;
    position: relative; 
    padding-left: 3px;
    list-style-type: upper-roman; 
    list-style-position: outside;  
  }
  ul.list li { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    position: relative;
    padding-left: 18px;
    list-style: none;
  }
  ul.list li:before {
    position: absolute;
    left: 0px;
    top: 0px;
  }
  ul.list.dash li:before {
    content: '-';
  }
  ul.list.second li:before {
    content: '+';
    color: #f00;
  }
  ul.list.third li:before {
    content: '>';
    color: #1969ba;
  }
  ul.listlight li { 
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
    position: relative;
    padding-left: 18px;
    list-style: none;
  }
  ul.listlight li:before {
    position: absolute;
    left: 0px;
    top: 0px;
  }
  ul.listlight.dash li:before {
    content: '-';
  }
  /* Tabele */
  /* Stale widoczna tabela: przewijanie tylko jej obszaru. Wariant nowrap nie łamie danych. */
  .table-scroll,
  .table-scroll-nowrap {
    max-width: 100%;
    overflow-x: auto;
  }
  .table-scroll-nowrap > table,
  .table-scroll-nowrap > .table-rounded > table {
    white-space: nowrap;
  }
  .table-rounded {
    border: 1px solid #D2D2D2;
    border-radius: 4px;
    overflow: hidden;
  }
  .table-rounded > table {
    width: calc(100% + 2px);
    margin: -1px;
    border-radius: 0;
    clip-path: none;
    outline: none;
  }
  /* Ramka obejmuje całą przewijaną tabelę; przewijanie pozostaje na zewnętrznym div. */
  .table-scroll-nowrap > .table-rounded {
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
  }
  /* Zachowuje zawijanie opisów, ale nie pozwala ramce przyciąć najdłuższej komórki. */
  .table-scroll > .table-rounded {
    min-width: min-content;
  }
  table, th, td { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: 17px;
    background-color: #fff;
    border: 1px solid #D2D2D2; 
    padding: 0 2px; /* !!! */
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th {
    height: 30px;
  }
  /* Mniejsze odstępy tylko w dwóch tabelach wymagających dodatkowego miejsca. */
  #astro10-time-zones-report-table th,
  #astro10-time-zones-report-table td,
  #naviaidsmks-auxiliary-flags-table th,
  #naviaidsmks-auxiliary-flags-table td {
    padding-left: 1px;
    padding-right: 1px;
  }
  table.flag,
  th.flag,
  td.flag {
    padding: 10px 10px;
  }
  td.flag img {
    display: block;
    margin: 0 auto 10px;
  }
  td.flag img:last-child {
    margin-bottom: 0;
  }
  table.zero, th.zero, td.zero {
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: 17px;
    border-collapse: collapse;  
    width: auto;
    border: 0; 
    padding: 0 0;
    margin: 0 0;
    background-color: transparent;
  }
  table.gcs, th.gcs, td.gcs  { 
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: 18px;
    background-color: #fff;
    border: 1px solid #fff; 
    padding: 0 2px; /* !!! */
  }
  table.gcs {
    border-collapse: collapse;
    width: 100%;
  }
  /* Wąski ekran: przewijanie kalkulatora bez zmiany jego pól i obliczeń. */
  .gcs-scroll {
    max-width: 100%;
    overflow-x: auto;
  }
  table.formulatab,
  th.formulatab,
  td.formulatab {
    font-size: 18px;
    font-family: georgia, times, "times new roman", serif;
    font-weight: normal;
    font-style: italic;
  }
  .desctab { 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
  }
  .tablecenter { 
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .signal-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  .signal-letter:last-child {
    margin-bottom: 0;
  }
 /* MKS — przykłady sygnałów w dwóch wyrównanych kolumnach. */
 .signal-examples-scroll {
   overflow-x: auto;
 }
 .signal-examples {
   display: grid;
   grid-template-columns: max-content max-content;
   column-gap: 32px;
   row-gap: 6px;
   width: max-content;
   text-align: left;
 }
 
  .tab20 {
    width: 20%;
  } 
  .tab25 {
    width: 25%;
  } 
  .tab50 {
    width: 50%;
  }
  .tab60 {
    width: 60%;
  }
  .tab80 {
    width: 80%;
  }
  .tab90 {
    width: 90%;
  }  
  .tabgreen {   
    background-color: #E1FFE1; 
  }
  .tabgreen2 {   
    background-color: #e8f5e9; 
  }
  .tabred {
    background-color: #FFE1E1; 
  }
  .tabyelow {
    background-color: #F5F5DC; 
  }
  .tabyelow2{
    background-color: #ffff99; 
  }
  .tabyelow3{
    background-color: #FFFFCC; 
  }
  .taborange {
    background-color: #FFE1C3; 
  }
  .tabviolet {
    background-color: #edeff6; 
  }
  .tabgray {
    background-color: #f3f3f3; 
  }
  .tabgray2 {
    background-color: #e8e8e8; 
  }
  .tabgray3 {
    background-color: #e0e0e0; 
  }
  .tabblue {
    background-color: #C0D8FF; 
  }
  .tabblue2 {
    background-color: #e3f2fd; 
  }
  .tabb {
    background-color: #3333FF;
    color: #555555;
  }
  .tabr {
    background-color: #FF0033;
    color: #555555;
  }
  .taby {
    background-color: #FFFF00;
    color: #555555;
  }
  .bgleft_green { 
    background-size: 70px ;
    background-repeat: repeat-y;
    background-image: linear-gradient(to right, #d5F5DC 0%, #d5F5DC 100%);
  }
  .bgleft_blue{ 
    background-size: 70px;
    background-repeat: repeat-y;
    background-image: linear-gradient(to right, #C0D8FF 0%, #C0D8FF 100%);
  } 
    
  /* Przykłady */
  .example { 
    clear: both;
    font-size: 18px;
    font-family: Times, "times new roman", georgia;
    text-align: left;
    color: #4e4e4e;
    background-color: #F1F1F1; 
    font-weight: normal;
    font-style: italic;
    padding: 10px 10px 10px 10px;
    margin: 40px 0 40px 0;
    border-radius: 5px;
  }
  .example p { 
    padding-left: 10%;
    font-size: 18px;
    font-family: Times, "times new roman", georgia;
    color: #4e4e4e;
  }
  .example div { 
    font-size: 18px;
    font-family: Times, "times new roman", georgia;
    color: #4e4e4e;
  }
  .example table, 
  .example th, 
  .example td {
    font-size: 18px;
    font-family: Times, "times new roman", georgia;
    color: #4e4e4e;
    background-color: rgba(248,248,248,0.1);
    border: 1px solid #a9a9a9; 
    padding: 0 2px; /* może 1% sprawdzić trzeba na wszystkich tabelach w przykładach */
  }
  .example table.right,
  .example th.right, 
  .example  td.right { 
    text-align: right;
  }
  .example table.black, 
  .example th.black, 
  .example td.black  { 
    color: #222;
  }
  .example table.blue, 
  .example th.blue, 
  .example td.blue { 
    color: #004B96;
  }
  .example table.blue1, 
  .example th.blue1, 
  .example td.blue1 { 
    color: rgb(88,123,182);
  }
  .example table.blue2, 
  .example th.blue2, 
  .example td.blue2 { 
    color: rgb(102,153,204);
  }
  .example table.red, 
  .example th.red, 
  .example td.red { 
    color: #C80000;
  }
  .example table.green3, 
  .example th.green3, 
  .example td.green3 { 
    color: #79a21c;
  }
  .example table.tabgray, 
  .example th.tabgray, 
  .example td.tabgray { 
    background-color: #e6e6e6;
  }
  .example table.tabyelow, 
  .example th.tabyelow, 
  .example td.tabyelow { 
    background-color: #F5F5DC;
  }
  .example .dekl_black {	
    font-style: normal;
    margin: 10px auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px ;
    color: #000000;
    text-align: center;
    border: #000000 solid 1px;
    padding: 10px;
    width: 250px;
    background: #ffffff;
  }
  .example .dekl_red {
    font-style: normal;
    margin: 10px auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px ;
    color: #CC0000;
    text-align: center;
    border: #CC0000  solid 1px;
    padding: 10px;
    width: 250px;
    background: #ffffff;
  }
  .example .dekl_red b {
    color: #CC0000; 
  }
  .exampleitalic-left-col { 
    width: 30%; 
    float: left;
    text-align: left;
    margin: 20px 4% 20px 0;
    background-color: transparent;
  }
  .exampleitalic-center-col {  
    width: 30%;
    float: left;
    text-align: left;
    margin: 20px 4% 20px 0;
    background-color: transparent;
  }
  .exampleitalic-right-col { 
    width: 30%;
    float: right;
    text-align: left;
    margin: 20px 0 20px 0;
    background-color: transparent;
  } 
  hr.exampleline {
    color: #4e4e4e;
    background-color: #4e4e4e;
    height: 1px;
    border: none;
    margin: -1px 0 0 0;
    width: 30%;
    float: right;
    clear: both;
  }
  hr.tabline {
    color: #4e4e4e;
    background-color: #4e4e4e;
    height: 1px;
    border: none;
    margin: -1px 0 0 0;
    width: 90%;
    float: right;
    clear: both;
  }
  /* Nieużywane klasy do usunięcia
  .example .example-mobile-text { 
    border-radius: 5px;
    margin: 20px 10px 20px 10px;
    padding: 10px 10px 10px 10px;
    background-color: rgba(102,153,204,0.2);
    line-height: 18px;
    font-size: 15px; 
    text-align: center;
    font-style: normal;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    color: #505061;
  }
  */
  .example .example-orientation-message,
  .derivation .example-orientation-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 4px 22px;
    padding: 12px 14px;
    border: 1px dotted #3e404b;
    border-radius: 4px;
    background-color: #fff;
    color: #3e404b;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-style: normal;
    line-height: 1.4;
  }
  .example .example-orientation-message strong,
  .derivation .example-orientation-message strong {
    color: #3e404b;
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
  }
  .example-orientation-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 32px;
    color: #292B37;
  }
  .example-orientation-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Nieużywane klasy do usunięcia
  .message-mobile-text { 
    border-radius: 5px;
    margin: 40px 10px 40px 10px;
    padding: 10px 10px 10px 10px;
    background-color: rgba(102,153,204,0.2);
    border: #fff solid 1px;
    line-height: 18px;
    font-size: 15px; 
    text-align: center;
    font-style: normal;
    text-transform: uppercase; 
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    color: #505061;
  }	 
  */
  /* Komunikat zastępujący ukrytą tabelę */
  .table-message-preview {
    box-sizing: border-box;
    width: 100%;
    margin: 40px 0 15px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #D2D2D2;
    border-radius: 4px;
    color: #505061;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  }
  .table-message-preview-title {
    padding: 4px 2px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #D2D2D2;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }
  .table-message-preview-body {
    padding: 18px 14px;
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
  }
  /* Nieużywane klasy do usunięcia
  .example .table-message-preview,
  .example .table-message-preview-title,
  .example .table-message-preview-body {
    color: #505061;
    font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
    font-style: normal;
  }
  */
  /* Nieużywane klasy do usunięcia
  .example .table-message-preview-title,
  .example .table-message-preview-body {
    font-size: 17px;
  }
  */
  .table-message-preview-icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    color: #000;
  }
  .table-message-preview-icon-monitor {
    width: 36px;
    height: 36px;
  }
  .table-message-preview-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .table-message-preview-icon-rotate svg {
    transform: scaleX(-1);
  }
  .table-message-preview-icon-rotate {
    width: 40px;
  }
  .table-message-preview-warning,
  .table-message-preview-hint {
    display: block;
  }
  .table-message-preview-warning {
    color: #4e4e4e;
    font-weight: 400;
  }
  .table-message-preview-hint {
    margin-top: 5px;
  }
  /* Nieużywane klasy do usunięcia
  .table-message-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 16px;
    background-color: transparent;
    border-top: 1px solid #D2D2D2;
  }
  */
  /* Nieużywane klasy do usunięcia
  .table-message-preview-grid span:not(:last-child) {
    border-right: 1px solid #D2D2D2;
  }
  */
  .table-mobile-toggle {
    display: block;
    margin: 14px auto 0;
    padding: 2px 6px;
    border: 1px solid #4e4e4e;
    border-radius: 4px;
    background-color: #fff;
    color: #4e4e4e;
    cursor: pointer;
    font: inherit;
  }
  .table-mobile-toggle:hover {
    background-color: #f3f3f3;
  }
  .table-mobile-toggle:focus-visible {
    outline: 2px solid #1969ba;
    outline-offset: 2px;
  }
  .table-mobile-scroll {
    max-width: 100%;
  }
  .example-table-mobile-scroll > table {
    min-width: 700px;
  }
  /* Obrazy */
  img {
    border: 0;  
    font: normal 10px  Verdana, Arial, Helvetica, sans-serif;
  }
  img.full-width {
    width: 100%;
    display: block;
  }
  img.full-width2 {
    width: 100%;
    height: auto;
    opacity: 0.3;
  }
  img.full-width-MKS {
    background-color: #222;
    width: 100%;
    display: block;
  }
  img.lock {
    display: block;
    margin: 0 auto;
  }
  /* Grafiki nagłówkowe zmniejszają się proporcjonalnie tylko wtedy, gdy brakuje miejsca. */
  img.header-illustration {
    max-width: 100%;
    height: auto;
  }
  img.lockTwo {
    display: inline-block;
    margin: 0 auto;
  }
  /* margin: 0 auto nie wyśrodkowuje elementu inline-block. Działa tylko dla elementów blokowych (display: block) z określoną szerokością. Jeśli img.lockTwo ma być wyśrodkowany, potrzebuje innego rozwiązania (np. text-align: center na kontenerze) */
  img.right {
    float: right;
    margin: 10px 0 10px 10px;
  }
  img.opacity {
    opacity: 0.9; 
  }   
  img.opacity8 {
    opacity: 0.8; 
  }
  img.opacity6 {
    opacity: 0.6; 
  }
  img.opacity5 {
    opacity: 0.5; 
  }
  img.opacity4 {
    opacity: 0.4; 
  }       
  img.opacity3 {
    opacity: 0.3; 
  }
  img.opacity2 {
    opacity: 0.2; 
  }
  img.figdual {
    display: block;
    /* Zmniejsza rysunek dopiero, gdy nie mieści się w swojej kolumnie. */
    max-width: 100%;
    height: auto;
    margin: 10px auto;
  }   
  img.fig {
    display: block;
    /* Zmniejsza rysunek dopiero, gdy nie mieści się w swojej kolumnie. */
    max-width: 100%;
    height: auto;
    margin: 10px auto;
  }
  img.figwide {
    display: block;
    /* Zmniejsza rysunek dopiero, gdy nie mieści się w swojej kolumnie. */
    max-width: 100%;
    height: auto;
    margin: 20px auto;
  }
  /* Opis pod rysunkiem ilustracją */
  .figcaption {
    clear: both;
    text-align: center;
    background-color: #ffffff;
    background-size: 5px 5px;
    background-image: repeating-linear-gradient(135deg, #f0f0eb 0, #f0f0eb 1px, #ffffff 0, #ffffff 50%);
    color: #49494a;
    margin: 10px 0 50px 0;
    padding: 15px 10px 10px 10px;
    line-height: 20px;
    letter-spacing: 0.3px;
    font-size: 14px;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-style: italic;
    border-radius: 8px;
  }
  .textIMG {
    position: absolute;
    width: 100%;
    text-align: center;
  }
/* ==========================================================
   LIGHTBOX
   ========================================================== */
 #lightbox {
     position: fixed;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box; /* poprawiono: stabilny pełnoekranowy viewer mobile */
     padding: 2vh 2vw; /* poprawiono: margines bezpieczeństwa przy krawędziach ekranu */
     background: rgba(0,0,0,.92);
     opacity: 0;
     visibility: hidden;
     overflow: auto; /* poprawiono: większą grafikę można przesuwać w lightboxie */
     -webkit-overflow-scrolling: touch; /* poprawiono: płynne przesuwanie na iOS/Safari */
     overscroll-behavior: contain; /* poprawiono: przewijanie nie ucieka na stronę pod spodem */
     touch-action: pan-x pan-y pinch-zoom; /* poprawiono: pozwala przesuwać i powiększać obraz na mobile */
     transition: opacity .25s ease;
     z-index: 99999;
 }
 #lightbox.open {
     opacity: 1;
     visibility: visible;
 }
 #lightbox img {
     display: block;
     max-width: 96vw;
     max-height: 96vh;
     width: auto;
     height: auto;
     margin: auto; /* poprawiono: obraz pozostaje wyśrodkowany także przy przewijanym viewerze */
 }
 #lightbox:hover {
     cursor: zoom-out;
 }

/* WERSJA ! Tylko DESKTOP LIGHTBOX for Nautical Almanach, Tablice ABC 
  #lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 99999;
    cursor: zoom-out;
  }
  #lightbox.open{
    opacity: 1;
    visibility: visible;
  }
  #lightbox-image { 
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 0 30px rgba(0,0,0,.6);
    cursor: default;
  }
  
*/
  
  
  .indextext { 
  background-color: rgba(32,96,190,0.7);
  color: #f4f4f4;
  font-family: 'made_evolve_evolight', Arial, Helvetica, sans-serif;
  box-shadow: -8px 0 0 0 rgba(32,96,190,0.7),8px 0 0 0 rgba(32,96,190,0.7);
  font-size: 20px;
  line-height: 32px;
  padding: 0 0 0 0;
  }
  .indextext2 { 
  background-color: rgba(20,20,20,0.5);
  color: #f4f4f4;
  font-family: 'made_evolve_evolight', Arial, Helvetica, sans-serif;
  box-shadow: -8px 0 0 0 rgba(20,20,20,0.5),8px 0 0 0 rgba(20,20,20,0.5);
  font-size: 20px;
  line-height: 32px;
  padding: 0 0 0 0;
  }
  /* Nieużywana klasa do usunięcia — dawny opis pod nazwą strony.
  .indextext3 {
  background-color: rgba(250,250,250,0.7);
  color: #292B37;
  font-family: 'made_evolve_evolight', Arial, Helvetica, sans-serif;
  box-shadow: -8px 0 0 0 rgba(250,250,250,0.7),8px 0 0 0 rgba(250,250,250,0.7);
  font-size: 22px;
  line-height: 32px;
  padding: 0 0 0 0;
  }
  */
  .indextext4 {
  background-color: rgba(10,10,10,0.5);
  color: #eee;
  font-family: 'made_evolve_evolight', Arial, Helvetica, sans-serif;
  box-shadow: -8px 0 0 0 rgba(10,10,10,0.5),8px 0 0 0 rgba(10,10,10,0.5);
  font-size: 22px;
  line-height: 32px;
  padding: 0 0 0 0;
  }
  /* Motto pod flagami: płynne odstępy zamiast pustych wierszy w HTML. */
  .navigare-wrap {
    margin: clamp(16px, 3vw, 48px) 0;
    text-align: center;
    line-height: 1.5;
  }
  .navigare {
  background-color: rgba(41,43,55,0.9); 
  font-family: 'made_evolve_light', Arial, Helvetica, sans-serif;
  color: #e0e0e0;
  /* Do 850px zachowane dotychczasowe, węższe motto (minimum 14px). */
  font-size: clamp(14px, calc(2.972973vw - 11.711712px), 20px);
  white-space: nowrap;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: clamp(2px, calc(1.189189vw - 4.684685px), 8px);
  padding: 0 0 0 10px;
  }
  /* Pełne 24px, gdy flagi osiągają maksymalną szerokość (ok. 1067px okna).
     Przy zwężaniu płynne przejście do dotychczasowego rozmiaru przy 850px. */
  @media (width > 850px) {
    .navigare {
      font-size: clamp(14px, calc(4.615385vw - 25.230769px), 24px);
    }
  }
  /* Nieużywane klasy do usunięcia — starsze warianty motta.
  .navigare2 {
  background-color: rgba(10,10,10,0.5); 
  font-family: 'made_evolve_light', Arial, Helvetica, sans-serif;
  color: #e0e0e0;
  font-size: 20px;
  line-height: 29px;
  text-transform: uppercase;
  letter-spacing: 8px;
  padding: 0 0 0 10px;
  }
  .navigare3 {
  background-color: rgba(41,43,55,0.9); 
  font-family: 'tensoregular', Arial, sans-serif;
  color: #e0e0e0;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 8px;
  padding: 0 0 0 10px; 
  }
  */
  .link500px {	  
  background-color: rgba(41,43,55,0.6);
  box-shadow: -8px 0 0 0 rgba(41,43,55,0.6),8px 0 0 0 rgba(41,43,55,0.6);
  font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
  font-size: 16px; 
  letter-spacing: 1px;
  color: #fff;  
  line-height: 30px;  
  text-align: center;   
  max-width: 300px;
  margin-left: auto !important;
  margin-right: auto !important;
  }
  /* Nieużywana klasa do usunięcia — dawny mobilny opis strony.
  .mobileText { 
  margin: 0 0 0 0;
  background-color: rgba(255,255,255,0.7);
  line-height: 18px;
  font-size: 15px; 
  text-transform: uppercase; 
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  color: #666;
  }

  */
  .underline_gray {
    border-bottom: 1px solid #D9D9D9;
    box-shadow: inset 0 -10px 0 #D9D9D9;
    color: inherit;
    -webkit-transition: background .15s cubic-bezier(.33,.66,.66,1);
    transition: background .15s cubic-bezier(.33,.66,.66,1);
    text-decoration: none;
  }
  

  
  .derivation { 
  border: #ccc dashed 2px;  
  border-radius: 14px; 
  padding: 10px;
  margin: 60px 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABFJREFUeNpiYMAEUrQQAAgwABpPAIPnyt+bAAAAAElFTkSuQmCC);
  }
  .derivation p { 
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  color: #4e4e4e; 
  line-height: 1.4;
  }
  .derivation div { border: #ccc dotted 1px; 
  letter-spacing: 1px; 
  text-align: center;
  background: #fff;  
  padding: 10px;
  margin: 3px 20px;
  } 
  .derivation.red {
  color: #222;
  border: #c80000 dashed 2px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABFJREFUeNpiYMAEUrQQAAgwABpPAIPnyt+bAAAAAElFTkSuQmCC);
  }
  .derivation p.red {  
  color: #800000; 
  }
  .derivation .derivation-mobile-text { 
  border-radius: 5px;
  margin: 15px 10px 20px 10px;
  padding: 10px 10px 10px 10px;
  background-color: rgba(100,200,100,0.3);
  line-height: 17px;
  font-size: 15px; 
  text-align: center;
  font-style: normal;
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
  color: #4e4e4e;
  }	
  
  .box-gray {
    clear: both;
    background-color: #fff;
    margin: 20px 0 0 0;
    padding: 10px 10px 10px 10px;
    border: 1px solid #aaa; 
    border-radius: 8px; 
  } 
  .box-red {
    clear: both;
    background-color: #fff;
    margin: 20px 0 0 0;
    padding: 10px 10px 10px 10px;
    border: 1px solid  #C80000; 
    border-radius: 8px;
  } 



  
  
  

.test123 {
      float: left;
      width: 50%;
  }

/* Chapter navigation */
  .chapter-nav {
    /* Czas rysowania jednego wiersza; następny zaczyna się po jego zakończeniu. */
    --chapter-line-duration: 280ms;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;      
    gap: 10px 20px;
  }
  /* oba bloki */
  .chapter-prev,
  .chapter-next {
    flex: 1 1 clamp(260px, 45%, 500px);
    min-width: 0;
    position: relative;
    isolation: isolate;
    font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #4e4e4e;
    padding: 10px 0 10px 0;
  }
  /* wyrównanie */
  .chapter-prev {
    text-align: left;
  }
  .chapter-next {
    text-align: right;
    margin-left: auto;
  }
  /* link */
  .chapter-prev a,
  .chapter-next a {
    display: inline;
    margin-top: 4px;
    /* Długie tytuły rozdziałów mogą zawijać się przy każdej szerokości. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Podkreślenie powtarza się w każdym wierszu; pojedynczy ::after tego nie potrafi. */
  .chapter-nav a.prev,
  .chapter-nav a.next {
    background-image: linear-gradient(#b4e7f8, #b4e7f8);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 7px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: none;
  }
  .chapter-nav a.prev {
    background-position: right bottom;
  }
  .chapter-nav a.prev::after,
  .chapter-nav a.next::after {
    /* Stare podkreślenie nie bierze udziału w hover ani odtwarzaniu strony w Safari. */
    content: none;
    display: none;
    animation: none;
    background: none;
  }
  /* Wariant rezerwowy bez JS: podkreślenia animują się równocześnie. */
  @media (width > 540px) {
    .chapter-nav a.prev:not(.chapter-underline-ready):hover,
    .chapter-nav a.next:not(.chapter-underline-ready):hover,
    .chapter-nav a.prev:not(.chapter-underline-ready):focus-visible,
    .chapter-nav a.next:not(.chapter-underline-ready):focus-visible {
      animation: chapter-underline .5s ease forwards;
    }
  }
  @keyframes chapter-underline {
    0%, 50% { background-size: 0% 7px; }
    100% { background-size: 100% 7px; }
  }
  /* JS mierzy wiersze bez dzielenia lub kopiowania tekstu linku. */
  .chapter-nav a.chapter-underline-ready {
    /* Bez pozycjonowanych fragmentów inline; paski mają własną warstwę pod tekstem. */
    position: static;
    z-index: auto;
    background-image: none;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
    animation: none;
  }
  .chapter-underline-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
  }
  .chapter-underline-line {
    position: absolute;
    height: 7px;
    background: #b4e7f8;
    transform-origin: left center;
  }
  .chapter-prev .chapter-underline-line {
    transform-origin: right center;
  }
  .chapter-underline-layer.is-animating .chapter-underline-line {
    animation: chapter-line-draw var(--chapter-line-duration) linear both;
    animation-delay: calc(var(--line-index) * var(--chapter-line-duration));
  }
  @keyframes chapter-line-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .chapter-nav a.prev:not(.chapter-underline-ready):is(:hover, :focus-visible),
    .chapter-nav a.next:not(.chapter-underline-ready):is(:hover, :focus-visible),
    .chapter-underline-layer.is-animating .chapter-underline-line {
      animation: none;
    }
  }
  hr.chapter {
    border: solid #ccc;
    border-width: 3px 0 0;
    clear: both;
    margin: 0 0 15px 0;
    height: 0;
  }
  hr.chapter2 {
    border: solid #000;
    border-width: 3px 0 0;
    opacity: 0.4; 
    clear: both;
    margin: 0 0 15px 0;
    height: 0;
  }
  /* Chapter navigation for mobile */
  @media (max-width:540px) {
    .chapter-prev,
    .chapter-next {
      flex-basis: 100%;
    }
    .chapter-next {
      text-align: right;
    }
    .chapter-prev a,
    .chapter-next a {
      white-space: normal;
      overflow-wrap: anywhere;
    }
    a.next,
    a.prev {
      display: inline;
      position: static; /* poprawiono: pseudo-podkreślenie nie wpływa na łamanie linku w mobile */
      white-space: normal;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      box-shadow: inset 0 -7px 0 #b4e7f8;
    }
    a.next::after,
    a.prev::after {
      content: none; /* poprawiono: wyłączono pseudo-element zamiast ukrywania display:none */
    }
  }



  /* Odstępy */  
  .upperFont { 
  text-align: center;
  padding: 50px 0 40px 0 ;
  font-size: 18px; 
  font-family: 'ProximaNovaSemiBold', Arial, Helvetica, sans-serif;
  text-transform: uppercase; 
  letter-spacing: 3px; 
  color: #222;
  }
  .upperFontBlue {
  text-align: center;
  padding: 50px 0 40px 0 ;
  font-size: 18px; 
  font-family: 'ProximaNovaSemiBold', Arial, Helvetica, sans-serif;
  text-transform: uppercase; 
  letter-spacing: 3px; 
  color: #004B96 ;
  }

  
  
  
  .black_bg {
  background-color: #222; 
  margin: 0 auto 0 auto;
  border-top: 1px solid rgba(41,43,55,0.5);
  border-bottom: 1px solid rgba(41,43,55,0.2);
  height: auto;
  }		
  .navy_bg {
  background-color: #292B37; /*#111111*/ 
  margin: 0 auto 0 auto;
  border-top: 1px solid rgba(41,43,55,0.5);
  border-bottom: 1px solid rgba(41,43,55,0.2);
  height: auto;
  }
  .white_txt_bg,
  .gray_txt_bg {
    font-size: clamp(18px, calc(0.25vw + 17px), 19px);
    line-height: 1.4;
  }
  .white_txt_bg {															
  max-width: 1000px;	
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0;
  padding: 14px 0 12px 0;
  font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 1px; 
  color: #fafafa;															
  }  	
  .white_txt_bg.gray_map {															
  font-weight: bold;
  color: #9c9c9c;													
  }  	  
  .gray_txt_bg  {															
  max-width: 1000px;	  	
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0;
  padding: 14px 0 12px 0;	  
  color: #aaa;															
  }	
  .gray_txt_bg  ul.disc li {		
  color: #aaa;
  line-height: 1.4;
  }	



  
  

  
  




/* Wzory i opisy */
  .formula {
  font-size: 21px;
  color: #222222;
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif; /* georgia, times, "times new roman", serif */
  background-color: transparent;
  font-weight: normal; /*font-weight: 600;*/
  font-style: normal;
  padding: 30px 0 40px 0;
  }
  .formula2 {  
  font-size: 18px;
  color: #4e4e4e ;
  font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif; /* georgia, times, "times new roman", serif */
  background-color: transparent;
  font-weight: normal;
  font-style: normal;
  } 
  .desc { 
  float: right;
  font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
  font-weight: normal;
  font-style: italic;
  padding: 0 0 0 0;
  clear: both;
  }
  .formula.normal {
  color: #4e4e4e;
  font-weight: normal;
  font-size: 18px;
  } 
  .desc2 { 
  font-family: 'proxima_novalight', Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #666;
  font-weight: normal;
  font-style: normal;
  padding: 0 0 0 0;
  clear: both;
  }
  .formula.small {
  font-weight: normal;	
  font-size: 16px;
  }
  
  
  
  
  
  
  /* index */
  .nav-grid-bg {
  height: 100%; /* ? */ 
  margin-bottom: 10px;
  padding: 5px 4px 5px 6px;
  background-color: #ffffff;
  background-size: 5px 5px;
  background-image: repeating-linear-gradient(135deg, #f0f0eb 0, #f0f0eb 1px, #ffffff 0, #ffffff 50%);
  }
  .nav-grid-title {
  display: block;
  font: 20px 'ProximaNovaSemiBold', Arial, Helvetica, sans-serif;
  text-align: left;
  padding: 0 0 0 0; 
  color: #292B37; 
  }
  .nav-grid-subtext { 
  font: 16px 'proxima_novalight', Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
  padding: 0 0 0 0;
  font-weight: normal;
  text-align: left; 
  color: #111;
  letter-spacing: -0.2px;
  }
  .nav-grid-subtext img {
  float: left;
  margin: 12px 7px 0 0; 
  }

  
  
  
  
  
  
  
  
  
  
  

  
  
/* ==========================================================
   FOOTER
   ========================================================== */
   .copyright {
       height: 33px;
       width: auto;
       line-height: 16px;
       text-align: right;
       font-size: 14px;
       font-family: 'proxima_novabold', Arial, Helvetica, sans-serif;
       color: #292B37; /*było rgb(90,123,182)*/
       background-color: transparent;
       letter-spacing: 0.5px; 
   }
   .copyright.center {
       text-align: center; 
   }
   a.copyrightlink, 
   a.copyrightlink:link, 
   a.copyrightlink:visited, 
   a.copyrightlink:active {
       font-family: 'made_evolve_evobold', Arial, sans-serif;
       font-size: 14px;
       color: #292B37; /*było #3e404b*/
       text-decoration: none;
       margin-left: 5px;
       letter-spacing: 1px; 
   }
   a.copyrightlink:hover {
       font-family: 'made_evolve_evobold', Arial, sans-serif;
       font-size: 14px;
       color: #C80000;
       text-decoration: none;
       margin-left: 5px;
       letter-spacing: 1px; 
   }
   .updates_bg {
       background: rgb(245,245,247); 
   }
   .left_column {
       text-align: center;
       vertical-align: middle;
       padding: 50px 0 30px 0;
       background-color: transparent;
   }
   .left_column img {
       margin: 16px 46px 16px 46px;
   } 
   .email a img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/protonmail.svg") no-repeat left top;
   }
   .email a:hover > img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/protonmail_color.svg") no-repeat left top; 
   }   
   .pincetpx a img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/500px.svg") no-repeat left top;
   }
   .pincetpx a:hover > img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/500px_navy.svg") no-repeat left top; 
   }
   .twitter a img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/x-twitter.svg") no-repeat left top;
   }
   .twitter a:hover > img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/x-twitter2.svg") no-repeat left top; 
   }
   .mastodon a img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/mastodon.svg") no-repeat left top;
   }
   .mastodon a:hover > img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/mastodon_violet.svg") no-repeat left top; 
   }    
   .medium a img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/medium.svg") no-repeat left top;
   }
   .medium a:hover > img {
       width: 32px;
       height: 32px;
       position: relative;
       background: url("../images/bg/index/medium_green.svg") no-repeat left top; 
   }     
   .update {
       background: url("../images/bg/index/col_sep.png") top left repeat-y;
       padding: 0 0 0 10px;
       margin: 10px 0 10px 0;
       line-height: 14px;
       text-align: left;
       vertical-align: bottom;
   }
   .update_date {
       font-family: 'proxima_novalight', Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       color: #666;
   }
   .update_title_bold {
       font-size: 12px;
       font-family: 'ProximaNovaSemiBold', Arial, Helvetica, sans-serif;
       color: #3e404b; /* było #0a246a */
   }  
   .update_title {
       font-size: 12px;
       font-family: 'proxima_novaregular', Arial, Helvetica, sans-serif;
       color: #3e404b; /*było#0a246a*/
       letter-spacing: 1px;
   }
   .update_content {
       font-size: 12px;
       font-family: 'proxima_novalight', Verdana, Arial, Helvetica, sans-serif;
       color: #555;
       padding: 2px 0px 5px 0;
   }  
   
footer {
    height: 70px;
    background-color: #000;
    }
footer.wave {
    padding-top: 10px;
    /* Wypełnia tłem stopki dolny bezpieczny obszar ekranów iPhone/Safari. */
    padding-bottom: env(safe-area-inset-bottom);
    height: 74px;
    background-color: rgb(41,43,55);
    }
    
   .footerwave {
      background: url("../images/bg/index/wave.svg") bottom repeat-x;
      background-color: transparent;
      height: 6px;
      width: 100%;
      margin-top: -6px;
   }
   .footer_text { 
      float: right;
      width: 100%;
      border-bottom: 1px dotted  #666;
      text-align: center;
      font-size: 11px;
      font-family: arial, tahoma, verdana, sans-serif;
      font-weight: normal;
      letter-spacing: 1px; 
      color: #aaaaaa;
      padding: 15px 0 8px 0;
      background-color: transparent;
   }
   .footer_links {
      float: right;
      width: 57%; 
      text-align: right;
      font-size: 11px;
      font-family: arial, tahoma, verdana, sans-serif;
      font-weight: normal;  
      color: #aaaaaa;
      text-decoration: none;
      padding: 8px 0 10px 0;
      background-color: transparent;
   }
   .footer_copyright {
       float: right;
       width: 43%;
       text-align: left;
       font-size: 11px;
       font-family: arial, tahoma, verdana, sans-serif;
       color: #aaaaaa;
       letter-spacing: 1px;
       padding: 8px 0 10px 0;
       background-color: transparent;
   }

/* Stopka na bardzo wąskich ekranach — elementy układają się pionowo,
   a jej wysokość dopasowuje się do zawartości. */
@media only screen and (max-width: 400px) {
   footer.wave {
      height: auto;
      min-height: 74px;
   }
   #contentfooter {
      display: flex;
      flex-direction: column;
   }
   .footer_text,
   .footer_links,
   .footer_copyright {
      float: none;
      width: 100%;
      text-align: center;
   }
   .footer_text {
      order: 1;
   }
   .footer_copyright {
      order: 2;
      white-space: nowrap;
   }
   .footer_links {
      order: 3;
   }
}
   
   a.sitemap, a.sitemap:link, a.sitemap:visited, a.sitemap:active {
   font-family: arial, tahoma, verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   color: #aaaaaa;
   text-decoration: none;
   }
   a.sitemap:hover { 
   font-family: arial, tahoma, verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   color: #f1f1f1; /*było #0088cc*/ 
   text-decoration: underline;
   }
   a.valid, a.valid:link, a.valid:visited, a.valid:active {
   /* background: url('../images/bg/index/valid1.png') no-repeat left center;
   padding-left: 13px; */
   font-family: arial, tahoma, verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   color: #aaaaaa;
   text-decoration: none;
   }
   a.valid:hover {
   /* background: url('../images/bg/index/valid2.png') no-repeat left center;
   padding-left: 13px; */
   font-family: arial, tahoma, verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   color: #80c43d;
   text-decoration: underline;
   }
   .footer_sep {
   padding-left: 6px;
   padding-right: 3px;
   font-family: arial, tahoma, verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   color: #aaaaaa; 
   text-decoration: none;
   }

/* ==========================================================
      IMAGE PROTECTION
      img-protect.js before </body> */
   .no-select {
       user-select: none;
       -webkit-user-drag: none;
   }
   
/* ==========================================================
   MEDIA QUERIES */
/* DESKTOP / MOBILE VISIBILITY */

@media (max-width: 667px) {
    body {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 950px) {
    p.padding { 
        padding: 0 0 0 10px;
    }
} 
@media (max-width: 540px) {
    #content, 
    #content2,
    #content3,
    #content4,
    #contentsecond, 
    #contentfooter { 	
        width: 90%;
    }
}
/* Orientacja pozioma wyłącznie na urządzeniach mobilnych */
@media (max-width: 950px) and (orientation: landscape) {
    #content, 
    #content2,
    #content3,
    #content4,
    #contentsecond, 
    #contentfooter {
        width: 84%; 
    }
}
/* Jeden ciągły zakres do 1000px zamiast dwóch z luką 540–541px. */
@media (max-width: 1000px) {
    span.navipedia {  
        margin: 0 0 0 -1px;
     }
} 

/* Microformats było - max-width: 420px */
@media only screen and (max-width: 540px) {
   /* do rozważenia czy dodać większy font
   p {
     font-size: 19px;
     line-height: 24px;
   }
   ul li,
   ol li {
     font-size: 19px;
     line-height: 24px;
   }
   */
  
   h1 {
   /*font-size: 34px;
   line-height: 30px;*/
   margin-top: 12px;
   letter-spacing: 0px;
   } 
   h2 {
   word-spacing: normal;
   /* font-size: 26px;   
   line-height: 24px; */
   padding-top: 6px;
   }
   h3 {
   /* font-size: 21px;
   line-height: 20px; */
   padding-top: 4px;
   }
   h4 {
   /* font-size: 18px;
   line-height: 20px; */
   margin: 48px 0 20px;
   word-spacing: 1px;
   letter-spacing: 0.3px;
   }
   h5 {
   margin: 44px 0 20px;
   /* font-size : 18px;
   line-height : 20px; */
   }
   h6 {
   margin: 20px 0 30px;
   /* font-size : 16px;
   line-height: 20px; */
   } 
   h4.nomargin,
   h5.nomargin {
     margin: 24px 0 20px;
   }
   h4.nomarginminus, 
   h5.nomarginminus  { 
   margin: -10px 0 35px 0;
   }	
   blockquote { 
   text-align: left; 
   padding: 0 20px 0 20px;
   }
   blockquote::before { 
   content: ''; 
   position: absolute; }
   blockquote::after { 
   content: ''; 
   position: absolute;
   }}

@media only screen and (max-width: 540px) {
     h1.earwig_rg {
       font-size: clamp(42px, 14vw, 60px);
       line-height: 1.05;
     }
   }


/* Bez luki 540–541px: obejmuje także ułamkowe szerokości powyżej 540px. */
@media only screen and (540px < width <= 1100px) {
  h1.big2 {
    letter-spacing: 6px;
    padding: 6% 0 3% 0;
    font-size: 62px;
  }
} 
@media screen and (max-width: 540px) {
  h1.big1, 
  h1.big2 {
    font-size: 42px;
    letter-spacing: 0.8px;
    padding: 6% 0 3% 0;
  }
} 


   /* Motto znika razem ze zdjęciem; kontener nie pozostawia pustych odstępów. */
   @media only screen and (max-width: 540px) {
   .navigare-wrap,
   .navigare {
   display: none !important;
   }
   }
   @media only screen and (max-width: 680px) {
   .link500px {
   display: none !important;
   }
   }
/* Nieużywane klasy do usunięcia — usunięto warianty opisu z index.html.
   @media only screen and (max-width: 666px) {
   .hide-for-mobile {
   display: none !important;
   }
   }
   @media only screen and (min-width: 541px) {
  .show-for-mobile {
    display: none !important;
  }
}
*/
   /* Elementy mobilne znikają od razu powyżej 540px, bez luki 540–541px. */
   @media only screen and (width > 540px) {
   .show-img-for-mobile {
   display: none !important;
   }
   }
   @media only screen and (max-width: 580px) {
   .svgonimg {
   display: none !important;
   }
   }

/* Szerokie tabele: ukrycie tabeli i możliwość przewijania poniżej 959px */
@media (width < 959px) {
       .table-hide-hor {
           display: none !important;
       }
       .table-hide-hor.table-mobile-expandable.is-mobile-visible {
           display: block !important;
       }
       .table-hide-hor.table-mobile-expandable.is-mobile-visible > h5 {
           display: none;
       }
       .table-mobile-scroll {
           overflow-x: auto;
           overscroll-behavior-inline: contain;
           -webkit-overflow-scrolling: touch;
       }
       .table-mobile-scroll-wide > .table-rounded {
           min-width: 1000px;
       }
   }
/* Szerokie tabele: ukrycie komunikatu od 959px */
@media (width >= 959px) {
       .text-table-show-hor {
           display: none !important;
       }
   }
/* Tabele wymagające obrócenia telefonu: ukrycie tabeli poniżej 539px */
@media (width < 539px) {
       .table-hide-ver {
           display: none !important;
       }
       .table-hide-ver.table-mobile-expandable.is-mobile-visible {
           display: block !important;
       }
       .table-hide-ver.table-mobile-expandable.is-mobile-visible > h5 {
           display: none;
       }
       .table-mobile-scroll-medium > .table-rounded {
           min-width: 600px;
       }
   }
/* Tabele wymagające obrócenia telefonu: ukrycie komunikatu od 539px */
@media (width >= 539px) {
       .text-table-show-ver {
           display: none !important;
       }
   }

@media only screen and (max-width: 950px){
.example p { 
padding-left: 0;
}
.example { 
padding: 2px 6px 2px 6px;}
} 
/* Komunikaty przykładów znikają powyżej 540px, także przy szerokości ułamkowej. */
@media only screen and (width > 540px){
/* Nieużywane klasy do usunięcia
.example-show-text-for-mobile
 {display: none !important}
*/
.example-orientation-message {
 display: none !important;
}
}

/* Galerie: dwie kolumny dopiero od 1054px, aby w kontenerze o szerokości 94%
   zmieściły się dwa zdjęcia po 450px oraz po 40px paddingu na kolumnę. */
@media only screen and (min-width: 1054px) {
.column-foto {   
position: relative; 
padding: 0 20px 0 20px;
margin: 50px 0 0 0;
float: left;
}
.medium-foto { width: 50%;}
} 
	
@media screen and (max-width: 540px) {	
.barunder, .barunder_scale, .barunder_bg {
display: none !important;
}
}

@media screen and (max-width: 540px) {
    img.full-width {
        display: none !important;
    }

    /* Granatowy napis po ukryciu zdjęcia na małym ekranie. */
    .textIMG h1.big1 {
        color: #292B37;
    }
} 

@media only screen and (min-width: 1080px) { /* bezpieczne jest 1100px */
  .column-fig {
    position: relative;
    padding: 0;
    margin: 10px 0;
    float: left;
  }
  .medium-fig {
    width: 50%;
  }
}

/* INDEX */
@media only screen and (min-width: 661px) {
    .column3grid {  
         -webkit-box-sizing: border-box; 
         -moz-box-sizing: border-box; 
         box-sizing: border-box;
         position: relative;
         padding-left: 3px;
         padding-right: 3px;
         float: left;
    }
    .medium3grid {
        width: 33.33333%;
    }
}

@media only screen and (min-width: 1000px) {
.column-aktual { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
position: relative;
padding-left: 0;
padding-right: 0;
float: left;
}
.large-aktual-1 {
width: 25%;
}
.large-aktual-2 {
width: 75%;}
}

@media screen and (max-width: 1000px){
.left_column a img {  
margin: 10px 30px 10px 30px;} 
}

@media screen and (max-width: 540px) {
.left_column a img {
margin: 10px 20px 10px 20px; }
}