.h1, h1 {
    font-size: calc(1.375rem + 1.5vw);
    color: black !important;
}
.container-header{
background-image: url("https://j4.hitartworks.com/images/top.jpg");
background-size: cover;
}
element.style {
}

.card-header {
background-image: url("https://j4.hitartworks.com/images/sidebar_header_bg.svg");
background-repeat:repeat-x;
color:white;
}
.container-component, .container-sidebar-left, .container-sidebar-right {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    background: white;
}
div.blog-featured {
background-color: white;
}
body {
background-image: url("https://j4.hitartworks.com/images/bg_tile.svg");
background-size: 12px 14px;
background-repeat:repeat;padding:0;margin:0;
}
figure {
overflow: hidden;
width:100%;
padding: 0 2em 0em;}
figure.let.item-img img { width:100%;height:auto;overflow: hidden;}
p {
margin:0 2em 0 2em;
}
div.page-header, dl.article-info.text-muted {margin-left:2em;}
li.mod-breadcrumbs__here.float-start {margin-left:1.5em}
body:not(.has-sidebar-left) .site-grid .container-component {
    grid-column-start: main-start;
    padding-bottom: 2em;
}
.container-top-a>*, .container-top-b>* {

    margin: 0.5em 0;
    background-image: linear-gradient(to bottom, #0955A4, #0A62BB 50%, #0B6FCC 97.5%, #0859AB);
}
body > div.site-grid > div.grid-child.container-top-a > div > div > nav > button,
body > div.site-grid > div.grid-child.container-top-a > div > div > nav > button > span,
#navbar113 > ul > li.nav-item.item-101.default > a,
#navbar113 > ul > li.nav-item.item-103 > a,
#navbar113 > ul > li.nav-item.item-103.current.active > a {color:white;}
body > div.site-grid > div.grid-child.container-top-a > div > div > nav > button {border-color:white;}
body > header > div.container-topbar > form > div > button {border-radius: 1.5rem;background: linear-gradient(to bottom, #345356 0%,#24393C 100%) !important;}
#mod-finder-searchword112, #mod-finder-searchword123 {border-radius: 1.5rem 0 0 1.5rem;}
footer {background: linear-gradient(to bottom, #345356 0%,#182627 100%) !important;}

body > header > div.container-topbar {
display: flex; justify-content: flex-end; align-items: flex-end;padding: 0 2em 2em 0;
}
.convertforms {
width: 100%;
margin:0 2em 0 2em;
}
@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Bold.woff2') format('woff2'),
        url('../fonts/Merriweather-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6{font-family: 'Merriweather';font-weight: bold;}
h2 a:not([class]) {
    text-decoration:none;color:black;
}
h2 a:hover {
    color: var(--cassiopeia-color-link);
}
body > div.site-grid > div.grid-child.container-component > main > div > h1 {margin-left: 1em;}
h3.card-header {font-family: 'Arial'!important;}

.metismenu.mod-menu .mm-collapse>li>a {color:black!important;}
.metismenu.mod-menu .mm-collapse>li>a:hover {color:var(--cassiopeia-color-link)!important;}
.metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button, .metismenu.mod-menu .metismenu-item>span {color:white;}
#navbar120 > ul > li.metismenu-item > a {color:black!important;}
#navbar121 > ul > li.metismenu-item > a {color:black!important;}
#navbar128 > ul > li.metismenu-item > a {color:black!important;}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul > li.metismenu-item>a{color:black!important;}
#navbar121 > ul > li.metismenu-item > a:hover {color:var(--cassiopeia-color-link)!important;}
#navbar128 > ul > li.metismenu-item > a:hover {color:var(--cassiopeia-color-link)!important;}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul > li.metismenu-item> a:hover {color:var(--cassiopeia-color-link)!important;}

#navbar121 > ul > li.metismenu-item.item-190.level-1.deeper.parent > button {color:black;}
#navbar121 > ul > li.metismenu-item.item-194.level-1.deeper.parent > button {color:black;width:100%;}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul > li.metismenu-item.item-192.level-1.deeper.parent > button {color:black!important;}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul > li.metismenu-item.item-195.level-1.deeper.parent > button {color:black!important;width:100%;}
#navbar128 > ul > li.metismenu-item.item-191.level-1.deeper.parent > button {color:black;border:0}
#navbar128 > ul > li.metismenu-item.item-197.level-1.deeper.parent > button {color:black;width:100%;border:0}
div.grid-child.container-sidebar-right > ul > li.metismenu-item > a {
    color: black!important;
}

.container-top-a>*, .container-top-b>* {
  margin: 0em 0;border:0;}
.footer {margin-top:0;}

.n2-ss-slider .n2-ss-item-image-content {
    overflow: hidden;
    line-height: 0;
    padding: 10px;
    background: #00589F;
    -webkit-box-shadow: inset 0 0 10px #00182f;
}

div#n2-ss-5 .n2-font-176464dee0eea5b1ac11b21dab9b24d2-link a {
    display: block;
    border: 0.5px solid #444444;
    border-radius: 5px / 5px;
    background: linear-gradient(to bottom,#55b0e9 0%,#0b77df 100%);
    color: white!important;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}
div#n2-ss-5 .n2-font-176464dee0eea5b1ac11b21dab9b24d2-link a:hover {
color: black!important;
background: white;
}
/*
.n2-section-smartslider { position:relative;}
.n2-section-smartslider:before  {
content: "";
position: absolute;
z-index: 2;
width: 11px;
top: 5%;
height: 90%;
left: -10px;
border-radius: 5px / 100px;
box-shadow: 0 0 20px;

}
*/
.n2-section-smartslider span {
content: "";
position: absolute;
z-index: 20;
width:100%;height:auto;
clip-path: ellipse(1% 50% at 0% 50%);
background-color:black;}



#n2-ss-5 > div > div.n2-ss-slider-1.n2_ss__touch_element.n2-ow > div > div > div.n2-ss-slider-4.n2-ow > div.n2-ss-slide.n2-ow.n2-ss-slide-6.n2-ss-slide-active > div.n2-ss-layers-container.n2-ss-slide-limiter.n2-ow > div > div > div > div > div > div > div.n2-ss-layer.n2-ow:nth-child(n) > div > div.n2-ss-layer.n2-ow.green:nth-child(n) > div > a 
{background:#5CBA3CFF!important;border:0!important;border-radius:0!important;}


body > div.site-grid > div.grid-child.container-component > div:nth-child(3) > div {
  margin-top:0;padding:0!important;border:0!important;
}


div#n2-ss-6 .n2-font-176464dee0eea5b1ac11b21dab9b24d2-link a {
    display: block;
    border: 0.5px solid #444444;
    border-radius: 5px / 5px;
    background: linear-gradient(to bottom,#55b0e9 0%,#0b77df 100%);
    color: white!important;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}
div#n2-ss-6 .n2-font-176464dee0eea5b1ac11b21dab9b24d2-link a:hover {
color: black!important;
background: white;
}

#n2-ss-6 > div > div.n2-ss-slider-1.n2_ss__touch_element.n2-ow > div > div > div.n2-ss-slider-4.n2-ow > div:nth-child(n) > div.n2-ss-layers-container.n2-ss-slide-limiter.n2-ow > div > div > div > div > div > div > div.n2-ss-layer.n2-ow:nth-child(n) > div > div.n2-ss-layer.n2-ow.green:nth-child(n) > div  > a {background:#5CBA3CFF!important;border:0!important;border-radius:0!important;}

body > div.site-grid > div.grid-child.container-component > div.main-top.card > div {
  margin-top:0;padding:0!important;border:0!important;
}
body > div.site-grid > div.grid-child.container-component > div.main-top.card {margin-top:0;border:0}

body > div.site-grid > div.grid-child.container-component > div.main-top.card {}

body > div.site-grid > div.grid-child.container-top-a{
    grid-area: top-a;
    background-image: linear-gradient(to bottom, #0955A4, #0A62BB 50%, #0B6FCC 97.5%, #0859AB);
  	flex-direction:row;position:relative;
}

body > div.site-grid > div.grid-child.container-top-a > div:nth-child(1) {flex-grow: 5;order:1;
}
body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) {flex-grow: 1;order:2; align-self: center;
    background: none;align-items: end;position:absolute;right:2%;top:22%;
}
body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) > div > div {justify-content: flex-end; flex-shrink: 0; }

.container-sidebar-right .sidebar-right:first-child {align-items:center;}
/*@media (max-width:991.98px){
 body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) {
    flex-grow: 1;
    order: 2;
    align-self: center;
    background: none;
    align-items: end;
    position: absolute;
    right: 2%;
    top: 12px;
}
  }
*/
.metismenu.mod-menu .mm-collapse>li>a {
    align-items: center;
}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(n) {border:0;}
.card-header {border-radius:0;border-bottom:0;}
.card-header:first-child {border-radius:0;}
/*.site-grid {grid-gap: 0 0em;grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,22.33%) repeat(2,minmax(0,22.33%))minmax(0,23%) [main-end] minmax(0,1fr) [full-end];}*/
body.wrapper-fluid .site-grid {grid-gap: 0 0em;grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,22.33%) repeat(2,minmax(0,22.33%))minmax(0,23%) [main-end] minmax(0,1fr) [full-end];}
body.wrapper-fluid footer>.grid-child, body.wrapper-fluid header>.grid-child {padding-left:5%;}
 /*@media (min-width:992px) {
body > div.site-grid > div.grid-child.container-top-a > div:nth-child(1) > div {padding:0;}
body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) {
    flex-grow: 1;
    order: 2;
    align-self: center;
    background: none;
    align-items: end;
   position: absolute;
    right: 2%;
    top: 8%;
	}

  
}
*/
.footer {margin:0 5%!important;}
footer.container-footer footer full-width  {margin:0 5%!important;}

body > header > div.container-topbar > ul {flex-direction:row;}
body > header > div.container-topbar > ul > li.nav-item.item-217 > a > span:before {height:15px!important;width:15px!important;}
.youtube, .facebook, .instagram, .twitter, .pinterest, .tiktok {
  height:2.5rem!important;width:2.5rem!important;
}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul {display:flex;flex-direction:row;justify-content:center;}



body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(2) > div > ul > li {padding-right:10px;}
body > div.site-grid > div.grid-child.container-sidebar-right > div:nth-child(3) > div > div  {display:flex;justify-content:center!important;}

form.mod-finder.js-finder-searchform.form-search {grid-area:s;}
div.navbar-brand {grid-area:b;}
div.cointainer-topbar {grid-area:t;}

.container-sidebar-right .mod-menu .metismenu-item.deeper > a,
.container-sidebar-right .mod-menu .metismenu-item.parent > a {
    color: black !important;
}

/* Krok 2: Stylujemy przycisk strzałki rozwijającej podmenu */
.container-sidebar-right .mod-menu .metismenu-item.deeper > button,
.container-sidebar-right .mod-menu .metismenu-item.parent > button {
    color: black !important; /* To sprawi, że strzałka będzie czarna */
    width: 100%; /* Rozciągnie przycisk na całą szerokość, co ułatwia klikanie */
    text-align: left; /* Wyrówna tekst (jeśli jest) do lewej */
    background: none; /* Usunie domyślne tło przycisku */
    border: none; /* Usunie domyślną ramkę przycisku */
    padding: var(--menu-item-padding-y) var(--menu-item-padding-x); /* Dopasuje padding do reszty menu */
}

/* Krok 3: Styl dla linków, które są jednocześnie "rodzicami" */
/* To jest siatka bezpieczeństwa, która łapie wszystkie przypadki */
.container-sidebar-right .mod-menu .nav-item.deeper > a,
.container-sidebar-right .mod-menu .nav-item.parent > a {
    color: black !important;
}

/* ========================================================================
   PASEK NAWIGACYJNY (TOP-A) - WERSJA OSTATECZNA, W PEŁNI RESPONSYWNA
   ======================================================================== */

/* ========================================================================
   PASEK NAWIGACYJNY - WERSJA BAZOWA + MINIMALNE POPRAWKI
   ======================================================================== */

/* --- BLOK BAZOWY (ZINTEGROWANY) --- */
.container-top-a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* Zintegrowany padding z zerowym pionowym */
    min-height: 0;
    flex-wrap: nowrap; /* Zmieniamy na nowrap, aby zapobiec zawijaniu */
}

body > div.site-grid > div.grid-child.container-top-a > div:nth-child(1) {
    flex-grow: 1;
    order: 1;
}

body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) {
    flex-shrink: 0; /* To już tu było i jest kluczowe */
    order: 2;
    background: none;
    position: static;
    padding: 0;
    margin: 0;
}

.container-top-a .navbar-nav > .nav-item > .nav-link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.container-top-a nav.navbar {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* Dodajemy !important dla pewności */
}

/* ========================================================================
   PROBLEM 1: PŁYNNE I PRECYZYJNE SKALOWANIE MENU NAWIGACYJNEGO
   ======================================================================== */

/* ========================================================================
   PROBLEM 1: PŁYNNE SKALOWANIE MENU - WERSJA SKALIBROWANA DLA RETINA
   ======================================================================== */

/* ========================================================================
   PROBLEM 1: PŁYNNE SKALOWANIE MENU - WERSJA SKALIBROWANA DLA RETINA
   ======================================================================== */

/* Krok 1: Definiujemy bazowy odstęp dla menu w widoku desktop */
/* Ten selektor jest teraz bardziej precyzyjny */
.container-top-a .navbar-nav {
  /*  gap: 1.2rem; /* Dajemy trochę więcej bazowego odstępu */
}

/* --- SEKCJA RESPONSYWNA --- */

/* Krok 2: Pierwsze, bardzo delikatne zmniejszenie przy 1500px */
@media (max-width: 1500px) and (min-width: 992px) {
    .container-top-a .navbar-nav {
        gap: 1rem; /* Zmniejszamy odstęp */
    }
    .container-top-a .metismenu.mod-menu .metismenu-item > a,
    .container-top-a .metismenu.mod-menu .metismenu-item > button {
        font-size: 0.98rem !important; /* Bardzo delikatna zmiana */
    }
}

/* Krok 3: Kolejny krok, np. przy 1350px */
@media (max-width: 1350px) and (min-width: 992px) {
    .container-top-a .navbar-nav {
        gap: 0.8rem;
    }
    .container-top-a .metismenu.mod-menu .metismenu-item > a,
    .container-top-a .metismenu.mod-menu .metismenu-item > button {
        font-size: 0.95rem !important;
    }
}

/* Krok 4: Mocniejsze zmniejszenie, np. przy 1200px */
@media (max-width: 1200px) and (min-width: 992px) {
    .container-top-a .navbar-nav {
        gap: 0.6rem;
    }
    .container-top-a .metismenu.mod-menu .metismenu-item > a,
    .container-top-a .metismenu.mod-menu .metismenu-item > button {
        font-size: 0.9rem !important;
    }

    /* KLUCZOWE: Wymuszenie pionowego układu menu mobilnego */
    .container-top-a .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        gap: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Pozycje menu na całą szerokość */
    .container-top-a .navbar-nav > .nav-item {
        width: 100%;
    }


    /* Reset dla metismenu w trybie mobilnym - bardzo ważna reguła! */
    .container-top-a .metismenu.mod-menu {
        flex-direction: column !important;
    }


}

/* Krok 5: Ostateczne ściśnięcie tuż przed punktem przełamania, np. przy 1100px */
@media (max-width: 1100px) and (min-width: 992px) {
    .container-top-a .navbar-nav {
        gap: 0.4rem;
    }
    .container-top-a .metismenu.mod-menu .metismenu-item > a,
    .container-top-a .metismenu.mod-menu .metismenu-item > button {
        font-size: 0.85rem !important;
    }
}

/* --- PROBLEM 2: NOWA, PRECYZYJNA METODA WYRÓWNANIA MOBILNEGO --- */
@media (max-width: 1199.99px) {
    /* Celujemy bezpośrednio w kontener z flagami i mówimy mu, żeby trzymał się góry */
    body > div.site-grid > div.grid-child.container-top-a > div:nth-child(2) {
        align-self: flex-start;
        margin-top: 2.5px; /* Drobna korekta pozycji */

}}
/* POPRAWNY KOD NA TĘ SAMĄ WYSOKOŚĆ NAVBARA W WERSJI DESTOP I MOBILE */
@media (min-width: 1200px) { /* ZMIANA: min-width zamiast max-width */
    .card-body {
        padding: 0.5em 0 !important;
    }
} 
/* ========================================================================
   OSTATECZNY FIX: Problem "ścisku" na bardzo małych ekranach (< ~700px)
   ======================================================================== */

/* Ta jedna reguła mówi przeglądarce, żeby przestała "mądrze" obliczać
   minimalną szerokość kontenera z menu i pozwoliła mu być w pełni
   elastycznym. To rozwiązuje problem "ściskania" i opóźnionego renderowania. */
body > div.site-grid > div.grid-child.container-top-a > div:nth-child(1) {
    min-width: 0!important;
}