@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

/* latin-ext */

@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    src: local('Marcellus'), local('Marcellus-Regular'), url('../fonts/MgbJB3ztDl2YuNvekZ0ENBJtnKITppOI_IvcXXDNrsc.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    src: local('Marcellus'), local('Marcellus-Regular'), url('../fonts/FJNab1jzp1t7ctjNl8ugHFtXRa8TVwTICgirnJhmVJw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family: 'BloggerSans0';
    src: url('../fonts/BloggerSans0.eot');
    src: local('BloggerSans0'), url('../fonts/BloggerSans0.woff') format('woff'), url('../fonts/BloggerSans0.ttf') format('truetype');
}


/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_59578">Text with this font applied</p> */

.fontsforweb_fontid_59578 {
    font-family: 'BloggerSans0' !important;
}

@font-face {
    font-family: 'MarketDeco';
    src: url('../fonts/MarketDeco.eot');
    src: local('MarketDeco'), url('../fonts/MarketDeco.woff') format('woff'), url('../fonts/MarketDeco.ttf') format('truetype');
}


/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_4387">Text with this font applied</p> */

.fontsforweb_fontid_4387 {
    font-family: 'MarketDeco' !important;
}


/* Font downloaded from FontsForWeb.com */

:root {
    --zielony: #195A32;
    --niebieski: #12213E;
    --niebieskilink: #36528B;
    --jasny: #fff;
    --dark: #333;
    --szary: #fafafa;
    --szarysredni: #e0e0e0;
    --szaryciemny: gray;
    --font1: 'Marcellus', sans-serif;
    --font2: 'Lato', sans-serif;
}

html {
    font-size: 1rem;
    line-height: 1.5;
}

body {
    color: var(--dark);
    font-family: var(--font2);
}
.container-fluid {
    padding: 1% 7%;
}
h1 {
    font-size: 150%;
    line-height: 130%;
}

h2 {
    font-size: 140%;
}

h3 {
    font-size: 130%;
}

h4 {
    font-size: 120%;
}

.figure h4 {
    font-size: 100%;
}
img{
    margin: 8px;
}
p {
    text-align: justify;
    
}
.mainpub h1 {
    text-align: center;
}

.wmosci h4 {
    font-size: 130%;
    margin-top: 1%;
    padding: 5px 15px;
    border-left: 5px solid var(--zielony);
    color: var(--zielony)
}

.wmosci h4 a {
    color: var(--zielony);
}

.othernews h4 {
    font-size: 100%;
    font-family: var(--font2);
}
.shrinker {
    margin: 1vh 5vw;
    background: rgba(255,255,255,0.7);
}
.top2 {
    color: var(--szaryciemny);
    display: flex;
    justify-content: space-between;
    font-size: 85%;
    background: rgba(255,255,255,0.7);
}
.breadcrumbs a {
    color: var(--szaryciemny);
}
.bgwhite {
    background: var(--jasny);
}
.breadcrumbs a::after {
    content: '>>';
}
.topmenu {
    min-height: 10vh;
}
h5 {
    font-size: 110%;
}

.publikacje {
    background-color: var(--szary);
}

.mainpub .newsItems {
    display: flex;
    flex-flow: row wrap;
    font-family: var(--font2);
    justify-content: space-evenly;
}

.mainpub .item {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 340px;
    text-align: center;
    margin: 2%;
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    position: relative;
}

.mainpub .item:hover {

    border-top: 1px solid var(--niebieskilink);
    border-left: 1px solid var(--niebieskilink);
}

.mainpub .short {
    background-color: var(--jasny);
}
.navbar-default{
    box-shadow: none;
    border:none
}
.navbar{
    min-height: 10vh;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    background-color: var(--jasny);
}
.mainpub img {
    height: 250px;
    width: auto;
    margin: 8px auto;
}

.mainpub .item p {
    padding: 5px;
    font-size: 0.9rem;
    line-height: 1;
}

.mainpub .item h4 {
    background: #e0e0e0;
    border-bottom: 1px dotted var(--szaryciemny);
    font-size: 1rem;
    height: 70px;
    padding: 3%;
}

.mainpub h4 {
    background: var(--szary);
    padding: 1%;
}

.publikacje main {
    display: grid;
    margin: 2%;
    grid-gap: 20px;
    grid-template-columns: 20% auto;
}


.publikacje_details .mainpub {
    background-color: var(--jasny);
    padding: 2%;
}

.order a {
    color: var(--jasny);
    display: block;
    position: relative;
    padding: 1% 2%;
    background: var(--zielony);
    border: 1px solid var(--zielony);
    display: inline;
    text-transform: uppercase;
    text-decoration: none;
}

.order a:hover {
    background-color: var(--szary);
    color: var(--zielony);
}



.mainpub .more {
    display: block;
    text-align: center;
    background-color: var(--szary);
    border: 1px dotted var(--niebieski);
    color: var(--jasny);
    left: 10px;
}

.submenu ul {
    margin: 15px 0;
    list-style-type: none;
}

.infoLabels {
    display: flex;
    justify-content: flex-end;
    font-family: var(--font2);
}

.wmosci {
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: stretch;
}

.close-szkolenia h3,
.wmosci h3 {
    color: var(--jasny);
    text-transform: uppercase;
    padding: 15px;
    text-align: center;
}

.wmosci h3 {
    background: var(--zielony);
}

.close-szkolenia h3 {
    background: var(--niebieski);
}

.tforum li {
    margin: 5px;
    border-bottom: 1px dotted var(--niebieski);
    font-size: 85%;
}

.forum-t a {
    display: block;
    padding: 5px;
}

.forum-t a:hover {
    color: var(--jasny);
    background: var(--niebieski);
}

.ul-01 {
    padding: 0;
    list-style-type: none;
}

.tn-grid-container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 3%;
    margin: 3%;
    align-items: start;
}

.mainews {
    border-bottom: 1px solid red;
    padding: 2%;
}

.labelData {
    color: var(--niebieski);
    border: none;
    background: transparent;
    align-self: flex-start;
}

.s4label {
    align-self: flex-end;
}

.ficzery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 5vh;
    align-items: baseline;
}

.ficzery h4 {
    font-size: 100%;
}

.mask p {
    font-size: 80%;
}

.featpanel .info {
    font-family: var(--font2);
    font-size: 80%;
}

#tforum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 20px;
    background: var(--jasny);
    margin: 3%;
}

.itemFooter {
    border-top: 1px dashed lightgray;
}

.carousel-inner a {
    display: block;
}

.portfolio {
    background: url("../img/person.jpg") no-repeat center fixed;
    background-size: 100%
}

.bcrumbs {
    font-size: 0.8rem;
    padding: 1%;
    display: inline;
    color: var(--szarysredni);
}

.bcrumbs a {
    line-height: 15px;
    text-decoration: none;
    color: var(--szarysredni);
}

.bcrumbs a::after {
    content: ">";
    font-size: 12px;
    padding: 3px;
}

li.blog {
    background: var(--niebieski)
}

li.blog a,
.navbar-nav>li.blog>a {
    color: var(--jasny)
}

li.blog a:hover,
.navbar-nav>li.blog>a:hover {
    color: aliceblue;
}

.wydarzenia {
    background: var(--niebieski) url("../img/person.jpg") no-repeat center fixed;
    background-size: 100%;
}
.wydarzenia2 {
    display: flex;
    flex-direction: column;
}


.kafelki {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr
}

#treeItemList {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
}
/*
.szkolenia ul#treeItemList li:nth-of-type(5) {
    border: 1px solid var(--niebieski);
    border-radius: 8px;
    background: yellow;
}

.szkolenia ul#treeItemList li:nth-of-type(5):hover {
    background: rgb(139, 253, 110);
}*/

.szkolenia-body ul#treeItemList{
    padding: 10vw;
    background: url(../img/szkolenia.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


.kategorie {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kategorie ul#treeItemList{
    display: flex;
    flex-flow:row wrap;

    align-items: center;
    justify-content: center;
    padding: 5vh 0;
}
.titlec {
    text-align: center;
    background: rgba(18,33,62,0.8);
    color:var(--jasny);
    padding: 30px;
}
.backk {
    background: url("../img/bcg/world-trade-center-5889199_1920.jpg") no-repeat center fixed;
    background-size: cover;
}
.kategorie ul#treeItemList li{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    background-color: var(--jasny);
}
.kategorie ul#treeItemList li a:hover {
    background-color: var(--niebieskilink);
    color: var(--jasny);
}
.kategorie ul#treeItemList li:hover {
    background-color: var(--niebieskilink);
    color: var(--jasny);
    border: 2px solid var(--zielony);
}
.kategorie ul#treeItemList a{
    display: block;
    color: (--szaryciemny);
    padding: 35px 50px;
    min-width: 320px;

}
.kafelki li {
    border: 1px solid #adadad;
    list-style-type: none;
    background: var(--szary);
}

.kafelki a {
    color: var(--niebieski);
    display: block;
    border: 1px solid white;
    background: white;
}

.type1,
.type2,
.kafelki li {
    border: 1px solid var(--zielony);
    list-style-type: none;
    border-radius: 8px;
}

.type1:hover,
.type2:hover,
.kafelki li:hover {
    background: var(--szarysredni);
}

.navbar-brand {
    margin-bottom: 3%;
}

.labelaside {
    font-size: 160%;
    border-bottom: 2px solid;
    color: var(--zielony)
}

.type1 a,
.type2 a,
.kafelki li a {
    display: block;
    text-align: center;
    padding: 15%;
    font-size: 120%;
}
.szkolenia-body .newsList{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.szkolenia-body .newsList li{
    max-width: 450px;
    text-align: left;
}
.newsList li {
    background: var(--szary);
    border: 1px solid var(--niebieskilink);
    border-left: 9px solid var(--niebieski);
    padding: 1% 0 40px 2%;
}
.fotoList {
    display: flex;
    flex-flow: row wrap;
 
}
.fotoList li{
    list-style: none;
}
.fotoName{
    display: none;
}
.szkolenia-body{
    align-content: center;
}
.submenupoziom ul{
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content:space-evenly;
    border-top:solid 1px gray;

}
.submenupoziom ul a{
    text-decoration: none;
}

.top {
    display: none
}

.cat_title {
    margin: 5%
}

img {
    padding: 8px;
}

table img {
    display: inline;
}

.articlebody {
    background: var(--jasny);
    padding: 2%
}

.articletitle {
    background: var(--jasny);
    text-align: center;
    padding: 1%
}

li.blog-item,
.blog-post {
    list-style-type: none;
}

.blog-item-header h4,
.blog-post-title {
    font-size: 160%;
    border-top: 1px solid gray;
    margin-top: 3%;
    color: white;
    border: 1px solid var(--niebieski);
    padding: 2%
}

.blog-item-header a {
    color: var(--niebieski)
}

.blog-item-data,
.blog-item-author {
    display: block;
    margin: 1%;
    text-align: right;
}

.blog-item-content {
    margin-top: 2%;
    border-bottom: 1px solid black;
}

.blog-item-footer .blog-item-data,
.blog-item-footer .blog-item-author {
    display: none;
}

.addthis_sharing_toolbox {
    margin: 2% auto;
}

ul.flexlist {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.szkolenia a {
    font-weight: bold;
    color: blue
}

.s4label a {
    font-weight: lighter;
    color: var(--zielony);
    font-size: 0.8rem;
}

.infoMore h4 {
    margin: 12px 0;
    padding: 0;
}

.newsList li {
    background-color: var(--szary);
    padding: 4px;
    margin: 1% 0px;
    border-bottom: 1px dotted var(--niebieskilink)
}

.articlebody .newsList li a {
    color: var(--niebieski);
}

.articlebody .newsList p {
    margin: 1%;
    font-size: 85%;
    color: var(--niebieskilink);
    color: var(--zielony);
}

a.newslistlink {
    margin: 2%;
}

.infoShort {
    color: var(--niebieski);
    padding: 1%;
    width: 95%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
}

.szkolenia {
    text-align: justify;
    text-justify: inter-word;
}

.newsList .item-info-cena {
    display: none;
}

.newsListLink {
    display: block;
    font-size: 110%;
    margin: 1%;
    padding: 1%;
    border-bottom: 1px dashed var(--niebieskilink);
}

.item-info-nabor {
    display: grid;
    grid-template-columns: 120px 200px 1fr;
    justify-content: space-between;
}



.naborDateLeft::before {
    content: 'Pozostało ';
}

.naborDateLeft::after {
    content: ' dni!';
}

.item-info-data,
.item-info-miejsce,
.item-info-poziom {
    display: block;
}

.item-info-miejsce::before {
    content: 'Miejsce realizacji: ';
}

.item-info-termin::before {
    content: ' Szkolenie odbędzie się w dniach: ';
}

.item-info-nabor::before {
    content: 'Zgłoś się do: ';
}

.item-info-cena::before {
    content: 'Cena: ';
}

.item-info-poziom {
    font-style: oblique;
}

.item-info-link-more a {
    float: left;
    color: var(--jasny);
    background: var(--niebieski);
    padding: 5px 10px;
    margin: 5px 0;
}

.item-info-link-more a:hover {
    background: var(--szary);
    border: 1px dotted gray;
    color: var(--niebieski);
}

.item-info-link-form a {
    float: right;
    background: var(--szary);
    border: 1px dotted gray;
    padding: 5px 10px;
    margin: 5px 0;
}

.item-info-link-form a:hover {
    color: var(--jasny);
    background: var(--niebieski);
}

.newsListInfo {
    font-family: var(--font2);
    font-size: 80%;
    margin: 2%;
}



.pagination li {
    display: inline;
    font-size: 1rem;
    margin: 3px;
}

.w {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kbList {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

@media screen and (max-width:1800px) {
    .tcarusel {
        height: 500px;
        max-height: 500px;
    }
    .wrap {
        width: 1600px;
    }
}

td {
    padding: 3px;
}

@media (max-width: 920px) {
    .tcarusel {
        height: 350px;
        max-height: 350px
    }
    #myCarousel {
        width: 100%
    }
    .carousel-caption {
        z-index: 5000;
        position: relative;
        font-size: 105%;
        padding-bottom: 1%;
        left: 2%;
        right: 10%;
        top: 5%
    }
}

@media (max-width: 767px) {
    .oldpagelink {
        display: none
    }
    .tn-grid-container {
        display: block;
    }
    .publikacje main {
        display: block;
    }
}

@media (max-width: 480px) {
    .tcarusel {
        height: 200px;
        max-height: 300px
    }
    .carousel-caption {
        z-index: 5000;
        position: absolute;
        font-size: 100%;
        padding-bottom: 1%;
        left: 0;
        right: 0;
        top: -25%
    }
    .carousel-caption h1 {
        font-size: 80%
    }
    .carousel-caption p span {
        font-size: 1 em
    }
    .carousel-control {
        display: none;
    }
    h1 {
        font-size: 1.8rem;
        font-weight: 500;
        margin-top: 10px;
    }
    #myCarousel,
    #tcarusel {
        padding: 0;
        margin: 0
    }
    img {
        padding: 1px;
    }
    .container-fluid {
        padding: 0
    }
    .ng-binding {
        color: red
    }
}

.ng-binding {
    color: red
}


html, body {
    margin: 0;
    height: 100%;
  }
  
  * {
    box-sizing: border-box;
  }
  .toptop, .top-nav{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  
  
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0px;
    background-color: var(--jasny);
    align-items:center;
  }
  .menu a {
    color:var(--niebieskilink);
  }
  
  .menu > li {
    margin: 0 1rem;
    overflow: hidden;
    padding: 12px 8px;
    border:1px solid var(--jasny);
    margin:0 2px;
  }
  .menu > li:hover{
    background-color: var(--szarysredni);
    border:1px solid var(--zielony);
  }
.nohover{
    background-color: none;
}
  
  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: var(--zielony);
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }
  
  .menu-button::before {
    content: '';
    margin-top: -8px;
  }
  
  .menu-button::after {
    content: '';
    margin-top: 8px;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }
  
     /* Dropdown menu container */
  
    /* Links inside the navbar */
    .navbar a {
      float: left;
      text-decoration: none;
    }
    
    /* The dropdown container */
    .dropdownt {
      float: left;
      overflow: hidden;
    }
    
    
    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      margin-top:30px;
      z-index: 800;
      list-style-type: none;
      margin-left:-10px;     
       padding: 1rem;
      background-color: var(--szary); 
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {
      float: none;
      text-decoration: none;
      display: block;
      text-align: left;


    }
    
    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    /* Show the dropdown menu on hover */
    .dropdownt:hover .dropdown-content {
      display: block;
    } 
  
    
#newsletter input[type=submit] {
    background-image: none;
    border: 1px solid lightgray;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.2;
    padding: 6px 8px;
    white-space: nowrap;
    border-color: #ccc;
    color: #000000;
}

table#formsMail {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}

textarea {
    min-width: 100%;
    height: 200px;
}

table#formsMail input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    padding: 12px 6px;
}

form#search input[type=text] {
    width: 50px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: transparent;
    background-image: url('../img/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 10px 20px 10px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

form#search input[type=text]:focus {
    width: 100%;
}

.infoMore h4 {
    background-color: lightgray;
    padding: 1%;
    color: black;
}

.infoMore h5 {
    background-color: #f5f5f5;
}

#services h2 {
    margin-bottom: 2%
}

.imprima {
    font-family: 'Marcellus', sans-serif;
}

.footer{
    background: var(--niebieski);
    color: var(--jasny);
width:100%;z-index: -100;
}
.footer1{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer p {
    text-align: center;
}

.footer a{
    color: var(--jasny);
    text-decoration: none;
}
.tfooter {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}
.art-main{
    display: grid;
    grid-template-areas: 
    "art-submenu art-tytul"
    "art-submenu art-body";
    grid-template-columns: minmax(250px, 30%) auto;
    align-items: start;
    }
    
.art-header {
    text-align: center;
    background-color: var(--zielony);
    padding: 3vh 0;
    color:var(--jasny); 
}  
.art-header a{
    color:var(--jasny);  margin-bottom: 3vh;
}

.art-nm .art-header  {
    text-align: center;
    background-color: var(--szarysredni);
    color:var(--niebieski);
    border-top:3px solid var(--szarysredni);
} 
.art-nm .art-header a{
    color:var(--niebieski);  margin-bottom: 3vh;
}
.art-submenu{
        grid-area: art-submenu;
}
.art-submenu ul{
            list-style-type: none;
            display: flex;
            justify-items: flex-end;
            flex-flow: column;
            align-items: flex-end;
    border-right: 1px solid var(--szaryciemny);
    padding-right: 10px;

}
.art-submenu ul li{
    padding: 10px;
}
.art-submenu ul li a{
    text-decoration: none;
    color:var(--niebieskilink);
}
.art-tytul{
        grid-area: art-tytul;
        padding: 10px;
    }


.art-tpl h1{
    font-size: 250%;line-height: 250%;
    font-family: var(--font1);
 
}
.art-tpl h2{
    font-size: 200%;line-height: 200%;
    font-family: var(--font1);
    font-weight: bold;
 
}
    .art-body{
        grid-area: art-body;
        padding: 0 10vh;
    }
    .font1{
        font-family: var(--font1);
    }
    .shortinfo img, .footer img{
        width:25px;
        height: auto;
        padding: 0;
        margin:4px;
    }

    .shortinfo {
        display: flex;
        flex-flow:row wrap;
        justify-content: flex-end;    
        list-style-type: none;
        align-items: center;
        background: var(--dark);
        color: var(--jasny);
        padding: 0 7%;
        font-size: 14px;
    }
    .shortinfo p{font-size: 14px}
    

.blueg{
background: var(--szary);
.imgresize{
    padding: 0;
    margin: 0;
}

}
.art-nm  #treeItemList{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}
.kafelki1 ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style-type: none;
    gap:10px;
    align-items: center;

}
.kafelki1 ul li{
    border:1px solid gray;
    width: 150px;
    height: 100px;
    text-align: center;
    padding: 10px;
}
.kafelki1 ul li a{
    text-decoration: none;
    display: block;
}
.art-nm #treeItemList > *{
    width: 300px;
    align-self: stretch;
    background-color: var(--niebieskilink);
    border-radius: 0;
    font-family: var(--font2);
}
.art-nm #treeItemList a{
    text-decoration: none;
    color:var(--szarysredni);
    display: block;
    }
.art-nm .art-header{
        text-decoration: none;
        background-color:var(--szary);
        color:var(--niebieski);

        }
.art-nm h1 {
    font-size: 20px;
    font-family: var(--font2);
}

.art-lm {
    background:url(../img/hex.svg) 100% 80% no-repeat,var(--szary);
    background-attachment: fixed,fixed;

}
.main-art{
min-height: 70vh;
}
.main-szkolenia h1 {
font-size: 4vh;
}

@media (max-width: 800px) {
    .menu-button-container {
      display: flex;
    }
    .menu {
      position: absolute;
      top: 0;
      margin-top: 10vh;
      left: 0;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }
    #menu-toggle ~ .menu li {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
      border: 1px solid #333;
      height: 3.5em;
      padding: 1em;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .menu > li {
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
  
    }
    .menu > li:not(:last-child) {
      border-bottom: 1px solid #444;
    }
    .art-main{
        display: grid;
        grid-template-areas: 
        "art-tytul"
        "art-body"
        "art-submenu";
        grid-template-columns: 1fr;
        }
        .art-tytul {
            align-self: center;
        }
        .art-submenu{
            border-top: 2px solid var(--niebieski);
        }
  }