body{
  font: 16px sans-serif;
  font-family: 'Poppins', sans-serif;
  background: #000000;
  color:#fff;
}

h1{
  color: red;
}

.btn-czerwonya{
  display: inline-block;
  background: #e0361b;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.015em;
  padding: 12px 24px;
  text-decoration: none;
}
  .btn-czerwonya:hover{
    opacity: 0.9;
    transform: translateY(0) scale(1.1);
  }

.btn-czerwony {
  --c: #E0361B ;
  --d: #fff ;
  color: var(--d);
  font-size: 90%;
  border: 0.3em solid var(--d);
  background:  var(--c);
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.0015em;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
  display: inline-block;
  text-decoration: none;
  padding: 12px 24px;
}

.btn-czerwony span {
  position: absolute;
  width: 25%;
  height: 100%;
  /*background-color: var(--c);*/
  background-color: var(--d);
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.btn-czerwony:hover {
  color: var(--c);
}

.btn-czerwony:hover span {
  transform: translateY(0) scale(2);
}

.btn-czerwony span:nth-child(1) {
  --n: 1;
}

.btn-czerwony span:nth-child(2) {
  --n: 2;
}

.btn-czerwony span:nth-child(3) {
  --n: 3;
}

.btn-czerwony span:nth-child(4) {
  --n: 4;
}
.btn-czerwony-lg{
  padding: 20px 20px 20px 34px !important;
  border:0px !important;
}

.btn-czerwony {
  --c: #E0361B ;
  --d: #fff ;
  color: var(--d);
  font-size: 90%;
  border: 0.3em solid var(--d);
  background:  var(--c);
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.0015em;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
  display: inline-block;
  text-decoration: none;
  padding: 12px 24px;
}

.btn-czerwony span {
  position: absolute;
  width: 33%;
  height: 88%;
  /*background-color: var(--c);*/
  background-color: var(--d);
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.btn-czerwony:hover {
  color: var(--c);
}

.btn-czerwony:hover span {
  transform: translateY(0) scale(2);
}

.btn-czerwony span:nth-child(1) {
  --n: 1;
}

.btn-czerwony span:nth-child(2) {
  --n: 2;
}

.btn-czerwony span:nth-child(3) {
  --n: 3;
}

.btn-czerwony span:nth-child(4) {
  --n: 4;
}

.btn-zielony {
  --e: #91b040 ;
  --f: #fff ;
  color: var(--f);
  font-size: 90%;
  border: 0.3em solid var(--f);
  background:  var(--e);
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.0015em;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
  display: inline-block;
  text-decoration: none;
  padding: 12px 24px;
}

.btn-zielony span {
  position: absolute;
  width: 33%;
  height: 88%;
  /*background-color: var(--e);*/
  background-color: var(--f);
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.btn-zielony:hover {
  color: var(--e);
}

.btn-zielony:hover span {
  transform: translateY(0) scale(2);
}

.btn-zielony span:nth-child(1) {
  --n: 1;
}

.btn-zielony span:nth-child(2) {
  --n: 2;
}

.btn-zielony span:nth-child(3) {
  --n: 3;
}

.btn-zielony span:nth-child(4) {
  --n: 4;
}


.btn-strona{
  display: inline-block;
  background: #222;
  color:#fff;
  padding: 0;
  text-decoration: none;
}
.btn-strona em{
  display: inline-block;
  padding: 8px 12px;
  background: #fff;
  color: #000;
  font-size: 120%;
}
.btn-strona span{
  display: inline-block;
  padding: 6px 12px 9px;
  font-weight: bold;
  font-size: 90%;
}
.btn-strona:hover{
  -webkit-box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
  -moz-box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
  box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
  opacity: 0.9;
}
.btn-strona:hover span{
  color: #fff;
}

.naglowek{
  background: #000;
  background-size: cover;
  /*min-height: 800px;*/
  padding-bottom: 100px;
}
@media only screen and (max-width: 990px) {
  .naglowek{
    background-position: center center !important;
  }
}

.panel-margin{
  display: block;
  width: 100%;
  height: 120px;
}

.naglowek-z-adresem{
  padding-top: 30px;
}
  .naglowek-z-adresem ul{
    margin: 0;
    padding: 0;
  }
    .naglowek-z-adresem ul li{
      list-style-type: none;
      display: inline-block;
      font-size: 75%;
      color: #fff;
      margin-right: 20px;
      font-weight: bold;
      letter-spacing: 0.015em;
    }
      .naglowek-z-adresem ul li em{
        margin-right: 6px;
      }

.menu-wcag{

}
.menu-wcag ul{
  margin: 0;
  padding: 0;
}
  .menu-wcag ul{
    margin: 0;
    padding: 0;
  }
  .menu-wcag li {
    list-style-type: none;
    display: inline-block;
    font-size: 75%;
    color: yellow !important;
    margin-right: 20px;
    font-weight: bold;
  }
  .menu-wcag li em{
    font-size: 150%;
  }
  .menu-wcag li a{
    color: yellow;
  }
    .menu-wcag li a:hover{
      color: #000;
      background: yellow;
    }

.naglowek-belka{
  background: #fff;
  padding: 20px;
}

.belka-gorna{
  padding-bottom: 20px;
  border-bottom: 1px solid #777;
}

.menu-glowne{
  margin:0 ;
  padding: 0;
  font-size: 75%;
}
  .menu-glowne ul{
    margin:0 0 0 20px;
    padding: 0;
  }
    .menu-glowne ul li{
      list-style-type: none;
      display: inline-block;
      margin: 20px 4px;
      padding: 0;
      position: relative;
    }
      .menu-glowne ul li a{
        display: block;
        color:#000000;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 0.015em;
        padding: 6px 4px;
      }
        .menu-glowne .active{
          color: #e0361b;
        }
        .menu-glowne li a:hover{
          color: #e0361b;
        }
      .menu-glowne li.has-sub ul{
        display: none;
        position: absolute;
        top:50px;
        left:-20px;
        width:100%;
        min-width: 240px;
        background: #fff;
        margin:0;
        padding: 10px;
        border:1px solid #000;
        z-index: 30;
      }
        .menu-glowne li.has-sub li{
          display: block;
          margin: 4px 0;
          border-bottom: 1px dashed #000;
        }
        .naglowek-btns{

        }
        .zwin-i-rozwin-menu{
          display: none;
          margin: 20px 0;
          background: #2b2b2b;
          color: #fff;
          padding: 14px 10px;
          text-align: center;
          font-weight: bolder;
          font-size: 120%;
          text-decoration: none;
        }
          .zwin-i-rozwin-menu:hover, .zwin-i-rozwin-menu:focus{
            background: #e0361b;
            color: #fff;
          }
@media only screen and (max-width: 990px) {
  .logo-kontener{
    display: block;
    margin: 20px auto;
    text-align: center;
  }
  .naglowek-btns{
    display: block;
    margin: 20px auto;
    text-align: center;
  }
  .menu-glowne{
  }
    .menu-glowne ul{
      margin: 0;
      padding: 0;
      display: none;
    }
    .menu-glowne li{
      display: block;
      width: 100%;
      text-align: center;
      border: 1px solid #b3b3b3;
      padding: 10px 0 !important;
      margin:0 !important;
    }
      .menu-glowne li.has-sub ul{
        position: static !important;
        background: whitesmoke;
      }
  .zwin-i-rozwin-menu{
    display: block;
  }
  .naglowek-z-adresem ul{
    background: #b2b2b2;
    margin: 6px 0;
    padding: 6px;
  }
}


.belka-dolna{
  display: none;
  width: 100%;
  overflow: hidden;
}
  .belka-dolna p{
    font-size: 80%;
    margin: 16px 0;
  }
  .tutaj{
    margin: 0;
    padding:0;
    width:100%;
  }
    .tutaj ul{
      margin: 0;
      padding: 0;
      width: 100%;
      float:right;
      text-align: end;
    }
      .tutaj li{
        list-style-type: none;
        margin: 16px 0;
        display: inline-block;
        font-size: 80%;
        padding: 0px;
      }
        .tutaj li:after{
          content: ' / ';
          font-weight: normal;
        }
        .tutaj li:last-child:after{
          content: '';
        }
        .tutaj a{
          display: inline-block;
          padding: 0 4px;
          color:#000;
          text-decoration: none;
          font-weight: bolder;
        }
        .tutaj a:hover{
          color: #e0361b;
        }

.powitanie{
  padding: 100px 0;
}
  .powitanie h1{
    font-weight: bolder;
    color: #fff;
  }
  .powitanie p{
    color: #fff;
    margin: 20px 0;
    line-height: 1.6em;
  }
  .powitanie .btn-czerwony{
    margin: 30px 0 0;
  }
  .powitanie .col-lg-5{
    width: 100% !important;
    text-align: center;
  }

.news-start{
  margin-top: -60px;
}

.news-start-element{
  background: #222;
  border-radius: 15px;
  border-left: 5px solid #4b4b4b;
  border-bottom: 5px solid #4b4b4b;
  position: relative;
  padding: 20px 70px 40px 20px;
  margin: 0 0 50px;
  font-size: 80%;
}
  .news-start-element:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 90px 90px 0;
    border-color: transparent #222 transparent transparent;
    right: -12px;
    top: -12px;
    position: absolute;
    display:none;
  }
  .news-start-data{
    color: yellowgreen;
    margin: 0 0 6px;
  }
  .news-start-text{
    color: #fff;
    margin: 0;
  }
  .news-start-element h2{
    font-weight: bold;
    font-size: 125%;
    line-height: 1.4em;
    text-decoration: none;
  }
    .news-start-element h2 a{
      color: yellow;
      text-decoration: none;
      border-bottom: 1px solid transparent !important;
    }
      .news-start-element h2 a:hover{
        background: yellow;
        color: #000;
      }
      .news-start-img{
        float:left;
        width:110px;
        margin: 4px 14px 20px 0;
        border-radius: 5px;
        border:3px solid #000 !important;
        display: inline-block;
        overflow: hidden;
        /*padding: 2px;*/
      }
      .news-read{
        display: inline-block;
        background: yellow;
        color:#000;
        padding: 0;
        text-decoration: none;
        position: absolute;
        right:10px;
        bottom: -16px;
      }
        .news-read em{
          display: inline-block;
          padding: 8px 12px;
          background: #fff;
          color: #000;
          font-size: 120%;
        }
        .news-read span{
          display: inline-block;
          padding: 6px 12px 9px;
          font-weight: bold;
          font-size: 90%;
        }
        .news-read:hover{
          -webkit-box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
          -moz-box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
          box-shadow: -1px 1px 58px -34px rgba(66, 68, 90, 1);
          opacity: 0.9;
          background: #000;
          color: yellow;
        }
          .news-read:hover span{
            color: #fff;
          }


.panel-h2{
  font-weight: bold;
  font-size: 120%;
}

.boczny-baner{
  background: #444;
  display: block;
  position: relative;
  height: 108px;
  margin-bottom: 24px;
}
  .boczny-baner:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #444 transparent transparent;
    right: 10px;
    top: 10px;
    position: absolute;
  }
  .boczny-baner:hover{
    opacity: 0.9;
  }
  .boczny-baner-element{
    position: absolute;
    top:10px;
    right: 10px;
    display: block;
    background: #2b2b2b;
    padding: 24px 14px;
    height: inherit;
    width: 100%;
  }
  .boczny-baner h3{
    color: #ffe4a7;
    text-decoration: none;
    font-size: 90%;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-top: 10px;
    line-height: 1.5em;
  }
  .baner-img{
    float:left;
    margin: 0 14px 0;
  }

.karta{
  background: #2b2b2b;
  display: block;
  position: relative;
  height: 248px;
  margin-bottom: 24px;
  color: #2b2b2b;
}
  .karta:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #2b2b2b transparent transparent;
    right: 10px;
    top: 10px;
    position: absolute;
  }
  .karta-element{
    position: absolute;
    top:10px;
    right: 10px;
    display: block;
    background: #d4d4d4;
    padding: 24px 14px;
    height: inherit;
    width: 100%;
  }
  .karta-element p{
    margin: 4px 20px 20px;
    font-size: 85%;
  }

.szkola-w-liczbach{
  /*background: url(../img/grafiki/tmp-bg-licznik.jpg) #b2b2b2;*/
  background-size: cover;
  padding: 100px 0;
  margin: 30px 0;
}

.licznik{
  text-align: center;
  display: block;
  width: 100%;
  padding: 30px;
  color: #fff;
}
  .licznik img{
    margin: 20px auto;
    display: block;
  }
    .licznik-num{
      display: block;
      font-weight: bold;
      font-size: 210%;
    }
    .licznik-text{
      display: block;
    }

.stopka{
  margin: 20px 0;
  padding: 30px 0;
  border-top:1px solid #4b4b4b;
  border-bottom:1px solid #4b4b4b;
}
  .stopka p{
    font-size: 80%;
    margin: 20px 0;
    line-height: 1.6em;
  }
  .do-gory{
    display: block;
    font-size: 270%;
    color: yellow;
    margin: 20px 0;
    text-decoration: none;
  }
    .do-gory:hover{
      background: yellow;
      color:#000;
      text-decoration: none;
    }
    .stopka img, .cpr img{
      filter: invert();
    }

.cpr{
  padding-bottom: 120px;
}
  .cpr p{
    font-size: 75%;
  }
  .cpr a img{
    height: 14px;
  }

.trzy-panele-panel{
  background: #555555;
  display: block;
  position: relative;
  height: 108px;
  margin: 24px 0;
}
.trzy-panele-panel:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent #555555 transparent transparent;
  right: 10px;
  top: 10px;
  position: absolute;
}
.trzy-panele-panel:hover{
  opacity: 0.9;
}
.trzy-panele-panel-element{
  position: absolute;
  top:10px;
  right: 10px;
  display: block;
  background: #4b4b4b;
  padding: 24px 14px;
  height: inherit;
  width: 100%;
  text-decoration: none;
}
  .trzy-panele-panel-element h3{
    color: #fff;
    font-size: 80%;
    font-weight: bold;
    margin-top: 10px;
    letter-spacing: 0.02em;
  }
  .trzy-panele-panel-element h4{
    color: #fff;
    font-size: 110%;
    font-weight: bold;
  }
  .trzy-panele-panel-element img{
    width: 110px;
    float:left;
    margin-top: -40px;
    margin-left: -14px;
    margin-right: 14px;
  }

#main{
  background: #000;
  width:100%;
  color: #fff;
  /*overflow: hidden;*/
}

.menu-glowne-boczne{.
  background: #dbdbdb;
  border-radius: 15px;
  border-left: 8px solid #4b4b4b;
  border-bottom: 8px solid #4b4b4b;
  border-right: 15px solid #dbdbdb;
  border-top: 12px solid #dbdbdb;
  position: relative;
  padding: 20px 20px 20px 20px;
  margin: 0 0 50px;
  font-size: 80%;
}
.menu-glowne-boczne:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 90px 90px 0;
  border-color: transparent #000 transparent transparent;
  right: -16px;
  top: -16px;
  position: absolute;
}
  .menu-glowne-boczne ul{
    margin: 0;
    padding: 0;
  }
    .menu-glowne-boczne li{
      list-style-type: none;
      display: block;
      margin: 2px 0 !important;
      padding: 0 !important;
      width: 100%;
    }
      .menu-glowne-boczne li a{
        display: block;
        padding: 5px 10px;
        font-weight: bolder;
        color: yellow;
        text-decoration: none;
        border: 2px dashed transparent;
      }
        .menu-glowne-boczne li a:hover, .menu-glowne-boczne li a:focus{
          background: yellow;
          color: #000;
        }
        .menu-glowne-boczne li.sub a{
          font-weight: normal;
          padding-left: 24px;
        }
        .menu-glowne-boczne li.sub a:before{
          content: '- ';
        }

@media only screen and (max-width: 990px) {
  #panel-z-bocznym-menu{
    display: none;
  }
}

.strona{
  position: relative;
  margin: 30px 0;
  overflow: hidden;
  background: #000;
  color:#fff;
}
.strona-element{
  background: #000;
  border-radius: 15px;
  border-left: 8px solid #4b4b4b;
  border-bottom: 8px solid #4b4b4b;
  border-right: 15px solid #dbdbdb;
  border-top: 12px solid #dbdbdb;
  position: relative;
  padding: 30px;
  margin: 0 0 50px;
  font-size: 80%;
}
.strona-element:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 90px 90px 0;
  border-color: transparent #000 transparent transparent;
  right: -16px;
  top: -16px;
  position: absolute;
}

/* ---- dodatkowe */
.okno-nowego-okna{
  display: none;
  position: fixed;
  top:5%;
  width:90%;
  height: 100%;
  left:5%;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
}
.okno-nowego-okna .kontener{
  margin: 20px;
  padding: 30px;
  border-radius: 30px;
  border: 2px dashed darkblue;
}
.okno-nowego-okna .kontener h2{
  font-weight: bold;
  font-size: 130%;
  margin: 10px 0 20px;
}
.okno-nowego-okna .kontener a{
  display: inline-block;
  background: #0d6efd;
  padding: 10px 16px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.okno-nowego-okna .kontener a:hover,.okno-nowego-okna .kontener a:focus{
  background: blueviolet;
}
.pokaz-schowaj-menu-glowne{
  display: none !important;
  font-size: 110% !important;
  border:1px solid darkslateblue !important;
  padding: 12px 5px !important;
  text-align: center;
  margin-bottom: 30px !important;
}

.wcag-tab-menu{
  position: fixed;
  left:10px;
  top:10px;
  z-index: 100;
  background: #e0361b;
  padding: 20px;
  display: none;
}
  .wcag-tab-menu-kontaner{
  }
  .wcag-tab-menu-kontaner ul{
    margin: 30px 0;
    padding: 0;
  }
    .wcag-tab-menu-kontaner ul li{
      list-style-type: none;
      display: block;
      color: #fff;
      padding: 10px;
      line-height: 2em;
    }
      .wcag-tab-menu-kontaner ul li a{
        display: block;
        text-decoration: none;
        color: #fff;
        font-weight: bolder;
        padding: 6px 0;
        border: 7px dashed transparent;
      }
       .wcag-tab-menu-kontaner ul li em{
         width: 40px;
         display: inline-block;
         font-size: 140%;
       }
       .wcag-tab-menu-kontaner ul li img{
         width: 30px;
         margin-right: 10px;
       }
       .wcag-tab-menu-kontaner ul li a:hover, .wcag-tab-menu-kontaner ul li a:focus{
         background: #4b4b4b;
         border: 7px dashed #4b4b4b;
       }


/* WCAG */

:root {
  --wcag-primary-color: #e0361b;
  --wcag-primary-color-text: #fff;
  --wcag-primary-color-hover: #000;
  --wcag-primary-color-text-hover: #fff;
  --wcag-primary-color-focus: #000;
  --wcag-primary-color-text-focus: yellow;
  --wcag-primary-color-focus-border: yellow;

  --wcag-okno-yes-bg: #009c4d;
  --wcag-okno-yes-color: #fff;
  --wcag-okno-secondary-color: #f36d33;
}

/* Menu klawiatury TAB */

.wcag_tab_keyboard_menu {
  position: fixed;
  z-index: 100;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(1px);
  display: none;
}
  .wcag_tab_keyboard_menu nav{
    display: block;
    background: #fff;
    width: 100%;
    max-width: 440px;
    padding: 20px;
  }
  .wcag_tab_keyboard_menu ul{
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
  }
    .wcag_tab_keyboard_menu li{
      display: block;
      list-style-type: none;
      margin: 0 0 2px 0;
      padding: 0;
    }
      .wcag_tab_keyboard_menu_title{
        text-align: center;
        margin: 20px auto !important;
        font-weight: bold;
      }
        .wcag_tab_keyboard_menu_title span{
          display: block;
          font-weight: normal;
          font-size: 90%;
        }
      .wcag_tab_keyboard_menu a{
        display: flex;
        align-items: center;
        background: var(--wcag-primary-color);
        border: 3px solid var(--wcag-primary-color);
        color: var(--wcag-primary-color-text);
        text-decoration: none;
        font-weight: bold;
        padding: 14px;
        font-size: 90%;
        line-height: 2em;
        letter-spacing: 0.01em;
      }
        .wcag_tab_keyboard_menu a em{
          display: inline-block;
          width: 32px;
          font-size: 150%;
        }
        .wcag_tab_keyboard_menu a img{
          display: inline-block;
          width: 22px;
          margin-right: 10px;
        }
        .wcag_tab_keyboard_menu a:hover{
          background: var(--wcag-primary-color-hover);
          color: var(--wcag-primary-color-text-hover);
        }
        .wcag_tab_keyboard_menu a:focus, .wcag_tab_keyboard_menu a:active{
          background: var(--wcag-primary-color-focus);
          color: var(--wcag-primary-color-text-focus);
          border: 3px dashed var(--wcag-primary-color-focus-border);
        }

/* Ostrzeżenie przed wyskakującym i nowym oknem */
.ostrzezenie-przed-otwarciem-nowego-okna{
  position: fixed;
  z-index: 200;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(7px);
  padding: 5%;
  display: none;
}
  .ostrzezenie-przed-otwarciem-nowego-okna .kontener{
    background: #222;
    border-radius: 20px;
    padding: 40px;
    border:3px solid #f5f5f5;
    width: 100%;
    max-width: 640px;
    margin:0 auto;
    -webkit-box-shadow: 2px 6px 35px -21px rgba(66, 68, 90, 1);
    -moz-box-shadow: 2px 6px 35px -21px rgba(66, 68, 90, 1);
    box-shadow: 2px 6px 35px -21px rgba(66, 68, 90, 1);
    position: relative;
  }
    .kontener-schowaj{
      display: flex;
      align-items: center;
      position: absolute;
      top:-20px;
      right: -20px;
      padding: 16px 20px;
      border-radius: 50%;
      background: var(--wcag-primary-color-hover);
      color: var(--wcag-primary-color-text-hover);
      text-align: center;
      border: 3px solid  var(--wcag-primary-color-hover);
    }
    .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element{
      display: block;
      text-align: center;
    }
      .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element h2{
        font-weight: 700;
        color: var(--wcag-okno-secondary-color);
        font-size: 130%;
        text-transform: uppercase;
        margin: 20px auto;
      }
      .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element .code {
        background: #f4f4f4;
        border: 1px solid #ddd;
        border-left: 5px solid var(--wcag-okno-secondary-color);
        color: #666;
        page-break-inside: avoid;
        font-family: monospace;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 1.6em;
        max-width: 100%;
        overflow: auto;
        padding: 1em 1.5em;
        display: block;
        word-wrap: break-word;
      }
  .ostrzezenie-przed-otwarciem-nowego-okna .ikona-ostrzezenia{
    display: block;
    margin: 10px auto;
    width: 100%;
    max-width: 200px;
  }
  .ostrzezenie-przed-otwarciem-nowego-okna .kontener-btns{
    display: block;
    margin: 10px auto;
    padding: 0;
  }
    .ostrzezenie-przed-otwarciem-nowego-okna .kontener-btns li{
      display: inline-block;
      list-style-type: none;
      padding: 0 10px;
      color: #777;
    }
      .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element .kontener-btns a{
        display: flex;
        align-items: center;
        background: var(--wcag-okno-yes-bg);
        color: var(--wcag-okno-yes-color);
        padding: 6px 24px;
        text-decoration: none;
        font-weight: 600;
        border-radius: 5px;
        font-size: 90%;
        letter-spacing: 0.01em;
        border: 3px dashed var(--wcag-okno-yes-bg);
      }
        .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element a.anuluj{
          background: var(--wcag-okno-secondary-color);
          border: 3px dashed var(--wcag-okno-secondary-color);
        }
        .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element a:hover{
          background: var(--wcag-primary-color-hover);
          color: var(--wcag-primary-color-text-hover);
        }
        .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element a:focus, .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element a:active{
          background: var(--wcag-primary-color-focus);
          color: var(--wcag-primary-color-text-focus);
          border: 3px dashed var(--wcag-primary-color-focus-border);
        }
        .ostrzezenie-przed-otwarciem-nowego-okna .kontener-element .kontener-btns a em{
          font-size: 150%;
          margin-right: 10px;
        }

/* Rozwijane dużego, pełnego menu */
.rozwin-pelne-menu{
  font-size: 140%;
}

.okno-pelne-menu{
  z-index: 200;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  padding: 30px;
  background: rgba(255,255,255,0.95);
  display: none;
}
  .okno-pelne-menu-kontener{
    text-align: center;
    margin: 0 auto;
  }
    .okno-pelne-menu-kontener h2{
      font-weight: bold;
      font-size: 130%;
      margin: 10px auto 30px;
    }
      .okno-pelne-menu-kontener ul{
        margin: 0;
        padding: 0;
        background: rgba(255,255,255,1);
      }
        .okno-pelne-menu-kontener li{
          display: inline-block;
          width: 49%;
          list-style-type: none;
          margin: 2px 0;
          border-bottom: 1px solid var(--wcag-primary-color-hover);
        }
          .schowaj-pelne-menu{
            width: 100% !important;
            margin-bottom: 14px !important;
          }
          .okno-pelne-menu-kontener li a{
            display: block;
            padding: 5px 10px;
            font-weight: 600;
            color: var(--wcag-primary-color-hover);
            text-decoration: none;
            border: 3px solid transparent;
          }
            .okno-pelne-menu-kontener li a:hover{
              color: var(--wcag-primary-color-text);
              background: var(--wcag-primary-color-hover);
            }
            .okno-pelne-menu-kontener li a:focus{
              color: var(--wcag-primary-color-text);
              background: var(--wcag-primary-color-hover);
              border:3px dashed var(--wcag-primary-color-focus-border);
            }
@media only screen and (max-width: 990px) {
  .okno-pelne-menu{
    height: 80%;
    overflow:scroll;
    overflow-x:hidden;
  }
  .okno-pelne-menu-kontener{
  }
  .okno-pelne-menu-kontener li{
    width:100% !important;
  }
}

/* ARTYKUL - style wyświetlania artyukuł oraz podstorn plus dodawane elementy */
.pagination{

}
  .page-item{
    margin: 2px;
  }

  .pagination .active{

  }
  .page-link{
    background: #000;
    color:#fff !important;
    border:0 !important;
    width: 42px;
    text-align: center;
    font-size: 90%;
    font-weight: 600;
  }
    .pagination .active .page-link, .page-link:hover{
      background: #e0361c;
      color: #fff;
    }


.art{
  color: #fff;
}

.art h1, .art h2, .art h3{
  font-weight: bolder;
  color:#fff;
  margin: 20px 0;
  line-height: 1.4em;
}
.art h1{
  font-size: 200%;
}
.art h2{
  font-size: 160%;
}
.art h3{
  font-size: 120%;
}
.art p{
  font-size: 110%;
  line-height: 1.5em;
  margin: 20px 0;
}
  .art li{
    font-size: 110%;
    margin: 0 0 14px 40px;
  }
  .art-wstep{
    font-weight: 600;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    padding: 20px 0;
  }
  .art p a, .art li a{
    color: yellow;
    border-bottom: 1px dashed yellow;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
    .art p a:hover, .art li a:hover{
      background: yellow;
      color: #000;
    }

.pop-nast-art{
  margin: 30px 0 !important;
  padding: 0 !important;
  width: 100%;
  background: #222;
  color:#fff;
  display: flex;
  align-items: center;
}
.pop-nast-art li{
  width:50%;
  list-style-type: none;
  margin: 0 !important;
  padding: 20px;
}
.pop-nast-art li:last-child{
  text-align: right;
}
.pop-nast-art a{
  display: block;
  font-weight: bold;
  text-decoration: none;
  color:yellow;
  border-bottom: 2px solid transparent;
}
  .pop-nast-art li span{
    display: block;
    font-size: 90%;
    font-weight: 600;
  }
  .pop-nast-art li h4{
    display: block;
    font-weight: 700;
    font-size: 130%;
    margin-top: 4px;
  }
.pop-nast-art a:hover, .pop-nast-art a:focus{
  background: yellow;
  color: #000;
}

.dolacz-obraz{
  display: block;
  margin: 20px 0 30px;
  text-align: center;
  position: relative;
}
.dolacz-obraz-opis{
  position: absolute;
  bottom: 0;
  left:0;
  width:100%;
  padding: 10px;
  font-size: 80%;
  font-weight: bold;
  background: rgba(255,255,255,0.8);
}
.dolacz-obraz-oplywanie{
  float:left;
  clear: left;
  width:40%;
  max-width: 300px;
  margin: 4px 14px 20px 0px;
  text-align: center;
}
.dolacz-obraz-oplywanie img{
  max-width: 100%;
  margin: 4px auto;
}

.dolacz-galerie {
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 10px auto 20px;
  padding: 0;
}
.dolacz-galerie ul{
  display: block;
  margin: 0 auto !important;
  padding: 0 !important;
}
  .dolacz-galerie li {
    display: inline-block;
    list-style-type: none;
    float: left;
    width: 100px;
    margin: 4px;
    text-align: center;
  }
.dolacz-galerie li a {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover !important;
  border:5px solid #fff;
  border-radius: 8px;
}
  .dolacz-galerie li a:hover{
    border: 0 !important;
    opacity: 0.9;
    transform: scale(1.1);
  }
.nazwa-galerii {
  font-weight: bold;
  margin: 14px 0 10px;
  overflow: hidden;
  font-size: 160%;
  line-height: 1.5em;
}
.opis-galerii {
  font-weight: bold;
  margin: 14px 0 10px;
  overflow: hidden;
  line-height: 1.5em;
}

.galeria-lista{
  display: block;
  overflow-y: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
  .galeria-lista li{
    display: block;
    list-style-type: none;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #777;
    clear: both;
    overflow: hidden;
  }
    .galeria-lista li a{
      font-size: 110%;
    }
      .galeria-meta{
        color: #555;
        display: block;
        margin-top: 6px;
      }
        .galeria-meta span{
          display: inline-block;
          border-right: 1px solid #aaa;
          padding-right: 10px;
        }
        .galeria-miniaturka{
          display: inline-block;
          float:left;
          width:80px;
          border:2px solid #444;
          border-radius: 5px;
          margin: 0 14px 0 0;
        }
          .galeria-miniaturka img{
            width: 100%;
          }
  .galeria-opis{
    display: block;
    margin: 6px 0 0 0;
    color: #444;
  }

  .kontrast-h{
    width:100%;
    text-align: center;
    color: #fff;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    padding: 20px 0;
  }
    .kontrast-h h2{
      font-size: 80%;
      margin: 10px auto;
    }
    .kontrast-h h1{
      font-weight: bold;
      margin: 10px auto;
    }

#main a:hover, #main a:focus{
  border:3px dashed yellow !important;
}



.wyskakujace-okno{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  text-align: center;
  display: none;
  z-index: 100;
}
.wyskakujace-okno-element{
  display: block;
  width: 100%;
  max-width: 990px;
  margin: 40px auto;
  padding: 50px;
  background: #fff;
  border:2px solid #ddd;
  -webkit-box-shadow: 1px 1px 24px -14px rgba(66, 68, 90, 1);
  -moz-box-shadow: 1px 1px 24px -14px rgba(66, 68, 90, 1);
  box-shadow: 1px 1px 24px -14px rgba(66, 68, 90, 1);
  border-radius: 20px;
  text-align: center;
  position: relative;
}
.wyskakujace-okno-element h2, .wyskakujace-okno-element h1, .wyskakujace-okno-element h3{
  font-weight: bold;
}
.wyskakujace-okno-element h1{
  font-size: 170%;
}
.wyskakujace-okno-element h2{
  font-size: 140%;
}
.wyskakujace-okno-element h3{
  font-size: 110%;
}
.wyskakujace-okno-element p{
  margin: 10px 0;
  color: #000;
}
.wyskakujace-okno-element p a{
  color:orangered;
  font-weight: bold;
  text-decoration: none;
}
.wyskakujace-okno-element p a:hover{
  color: darkgreen;
}
.wyskakujace-okno-element .dolacz-obraz{
  margin: 20px auto !important;
}
.wyskakujace-okno-element .dolacz-obraz-oplywanie{
  margin: 20px auto !important;
  float: none !important;
}
.okno-schowaj{
  position: absolute;
  top:-20px;
  right:-20px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 160%;
  padding: 10px 16px;
}
.okno-schowaj:focus, .okno-schowaj:hover{
  background: orangered;
  color: #fff;
}