@import url("settings.css");

header {background: var(--body-background)}
h1 {font-size: 28px; line-height: 1.2em; font-family: var(--header-font); color: var(--color1); }
h2 {font-size: 28px; line-height: 1.2em; font-family: var(--header-font); color: #000;}
h3 {margin-top: 20px; color: var(--color1); margin-bottom:10px; line-height: 1.5em; font-size: 20px}
h4 {margin-top: 20px; color: #000; margin-bottom:10px; line-height: 1.5em; font-size: 1.3em}
h5 {margin-top: 20px; font-weight: bold; color: var(--color1); padding-bottom: 5px; margin-bottom:10px; line-height: 1.5em; font-size: 1.3em; border-bottom: 1px solid var(--color1)}
h6 {margin-top: 20px; font-weight: bold; color: #000; line-height: 1em; font-size: 0.8em}

.page-title i {color: #333; font-size:2em}
.content p {font-size: 18px; line-height:1.3em; margin: 15px 0 15px 0}
.content ul li,.content ol li {font-size: 18px; line-height:1.5em; text-align:left}

header .topbar { transition:height 1s ease-out;overflow:hidden;}
header .navbar-brand { transition:height 1s ease-out;overflow:hidden; display:flex; flex-direction: column; align-items: center}
header .navbar-brand img {width:unset; float:unset; margin:0; height:100px}
header .navbar-brand {font-family: 'Lora', 'Verdana', sans-serif;  }
.carousel-caption img {filter:  brightness(0) invert(1); max-height: 100px}
footer img {border-radius:50%}

header .navbar-brand i{display:block}
header {position:fixed; top:0; z-index:1; width:100%}
header .topbar {background: none; color: #000;}
header .topbar .address a:hover, header .topbar .address a,header .topbar .address{background: none; color: #000;}
#chooselang_google,#chooselang_google:hover,header .topbar .search button:hover,header .topbar .search button {color: #000; background: #f5f5f5}
#chooselang_google_content {background: none; z-index:2}
#google_translate_element .goog-te-gadget-simple {border: 1px solid #eee   }
#menu_sidebar .navbar-brand, header .navbar-brand {padding:0; margin:0}
header .navbar>.container-lg{flex-direction:column}
header #top_navbar {padding-bottom:65px; border:0}
header #top_navbar>.container-lg {justify-content:center}
#menu_top {background: var(--color1); position: absolute !important; bottom:0; width:100%; justify-content: center} 
#menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a, header ul.navbar-nav .dropdown-menu {background: var(--color1)}
#menu_sidebar ul.navbar-nav li a:hover, header ul.navbar-nav li a:hover { filter: brightness(120%)}
#top_navbar {padding-top:0}
.content .list2 a {color:#000}
header .navbar-brand  {font-size: 25px; padding-bottom: 20px; margin-top:-20px}
header .navbar-brand i { font-size: 40px; padding-bottom:10px}
header .navbar-brand small {color: #555;}
header ul.navbar-nav li a br {display:none}
header ul.navbar-nav li a i,header ul.navbar-nav li a {color: #fff; }
header ul.navbar-nav li a {padding: 15px 20px; font-family: var(--hx-font-family)}
header .navbar {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc}
.page>.page-title {margin-top:212px; text-align:center}
.flatpickr-calendar {margin-top:-212px}
.page-title i {font-size: 2em}
.home .slider {margin-top:180px}
.slider .carousel-one {width: 100%; background: none; top: 50%; left: 0;}
.slider .carousel-one h1 {font-family: 'Lora', 'Verdana', sans-serif; text-shadow: 4px 4px 10px #000; font-size: 60px; line-height: 1.2em; color: #fff; text-align:center}
.slider .carousel-one p {text-shadow: 2px 2px 5px #000; font-size: 30px; font-style: normal;}
.content-home .news {margin-top:30px}
body.with-background .content-home .news {margin-top:0px}
.tile-hidden {display:none}
.content .news>div{margin-bottom:30px}
.content .mod-gallery .thumbnail {height:250px}
.content .mod-gallery .thumbnail {margin:5px 0}
.content .news .thumbnail {margin:0}
.content .news>div p {border: 1px solid #eee; padding:10px 5px}
@media (max-width: 1400px){
    .slider {height: var(--slider-height)}
}
@media (max-width: 1200px) {
    .slider {height: 500px}
    .slider .carousel-one h1{ font-size: 50px;}
    .slider .carousel-one p{ font-size: 25px;}
}


@media (max-width: 1100px) {
    header ul.navbar-nav li a {padding: 15px 15px}
}

@media (max-width: 992px) {

    #menu_sidebar .navbar-brand>br, header .navbar-brand>br {display:inline}
    body.with-background .page>.container-lg {--bs-gutter-x: 10px; margin-top:30px}
    body.with-background footer {margin-top:10px}
    header .navbar-brand {display:inline-block}
    header .navbar-brand img {float:left; margin-right:20px; max-height:70px}
    header .navbar-brand span {display:block}
    header ul.navbar-nav li a {padding: 5px 20px}
    header {position:fixed; margin-bottom:0; background: #fff; height: unset}   
    header nav {height: unset}
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {font-size: 22px; text-align:left}
    header #top_navbar>.container-lg {justify-content: start}
    #menu_top {position: relative !important}
    header #top_navbar {padding-bottom:0}
    #menu_sidebar .navbar-brand>br{display:none}
    .page-title {margin-top:0}
    header .navbar>.container-lg{flex-direction:row}
    header .navbar-brand {margin:0; padding:5px 0}
    header .navbar-brand i{display:none}
    header .topbar{background: var(--color1); color: #fff}
    header .topbar .address a, header .topbar span, header .topbar button {color: #fff}
    #chooselang_google, #chooselang_google span, header .topbar button {background: #fff; color: var(--color2)}
    header .topbar .search input {border: 1px solid #fff}
    #menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a {border-top:1px solid rgba(255,255,255,0.4)}
    header .topbar {border-top: 1px solid rgba(255,255,255,0.3); border-bottom:0}
    .slider .carousel-one h1 {font-size: 40px;}
    .home .slider {margin-top:117px}
    .page>.page-title {margin-top:117px}
    #chooselang_google_content {background: var(--color1)} 
    #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span { color: var(--color1)}  

}

@media (max-width: 767px) {
 .content .mod-gallery .thumbnail {height:200px !important; min-height:100px; background-size: cover}
      .top-tiles {margin-top:0}
    .carousel-caption img {max-height: 70px} 
    .tile-hidden {display:  block} 
    .page>.page-title{text-align:left}
    .slider {height: 400px}
    .sidebar {width:100%}
    .page-content {padding: 0}
    .left-sidebar .sidebar{ margin-right:0}
    .right-sidebar  .sidebar{margin-left:0}
    .content {padding: 10px}
    #menu_sidebar .navbar-brand, header nav.navbar .navbar-brand {max-height: 67px}
    .content .page-title {padding:0}

    .top-tiles .tile .tile-icon {background: none; color: #333}
    .slider {height: 300px}
    .slider .carousel-one h1 {font-size: 22px;}
    .slider .carousel-one p{ font-size: 15px;}
    .home .slider {margin-top:107px}
    .page>.page-title {margin-top:107px}
    .content .list2 p {line-height:2em}
.slider .carousel-one a {padding: 5px 20px}
    #menu_sidebar .navbar-brand, header .navbar-brand {padding-top: 8px;}
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {font-size: 14px; padding-top:10px; padding-bottom:10px}
    #menu_sidebar .dropdown-menu, header .dropdown-menu {background:unset }
    #menu_sidebar .navbar-brand small, header .navbar-brand small {font-size:10px}
    #menu_sidebar,#menu_top {margin-top:10px}
    header ul.navbar-nav li a  {padding: 5px 0}
    #spowiedz, #kancelaria, #msza, #wcag-options {margin: 0 !important; height: calc(100vh - 166px)}
}
@media (max-width: 576px) {

    #menu_top,#menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a {background: #fff}
    a.wcag-button{top:63px}


}