@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.3em; 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}


.content h3 {  font-size: 22px; margin-top:20px; margin-bottom:0px }
.contact h3 {font-size: 22px;}
.content p {font-size: 1.15em; line-height:1.5em; margin: 10px 0; text-align:initial}
.content ul li,.content ol li {font-size: 16px; line-height:1.5em; text-align:left}
.content div.list p {font-size: 14px}
.priest-centered p {text-align:center}
/*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 .topbar .search input:focus,header .search input:active{border:1px solid #aaa; color: #333}    
header .topbar .search input::placeholder{color:#aaa}
header .topbar .search input:-ms-input-placeholder, header .topbar .search input::-ms-input-placeholder  {color:#aaa}
header .topbar .search input{color:#000}
header .topbar .search input:focus,header .search input:active{border:1px solid #000}
header .navbar-brand i{display:block}
header {position:fixed; top:0; z-index:3; width:100%}
header .topbar {background: none; color: #000;}
header .topbar .address a:hover, header .topbar .address a,header .topbar .address{background: none; color: #000;}
header .topbar .search button:hover,header .topbar .search button {color: #000; background: #f5f5f5}
 
#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; z-index:2}
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}
.news .teaser p {margin-top:10px; margin-bottom:10px}
header .navbar-brand  {font-size: 27px; padding-bottom: 20px; margin-top:-25px}
header .navbar-brand i { font-size: 40px; padding-bottom:10px}
header .navbar-brand small {color: #555; letter-spacing: 4px; font-size:12px; padding-top:10px}
header .navbar-brand small br {display:none}
header .navbar-brand img {margin-bottom:10px}
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:262px; text-align:center}
.flatpickr-calendar {margin-top:-262px}
.page-title i {font-size: 2em}
.home .slider {margin-top:240px}
.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;}
 
body.with-background .content-home .news {margin-top:0px}
.tile-hidden {display:none}
/*.content .news>div{margin-bottom:30px}*/ 
.content .mod-gallery .thumbnail {background-color:#fff; border: 1px solid #eee}
.content .mod-gallery .thumbnail {margin:0}
/*.content .news>div p {border: 1px solid #eee; padding:10px 5px}*/
#menu_sidebar .navbar-brand>br, header .navbar-brand>br {display: inline}
header .topbar .search input {color: #333}
header .topbar .search input:focus, header .search input:active {border: 1px solid #bbb}
.slider {z-index:-1}
.content-home .news {border-bottom: 0}
.logotypes-bg {background:#fff; border-top:1px solid #eee;border-bottom:1px solid #eee}
footer {background: var(--color1); color:#fff; padding-top: 30px  }
footer a {  color:#fff; }
footer .copyright {background: #cb0606}
.logotypes a {height: auto; flex-direction: column; font-size: 11px; color: #aaa; line-height:1em}
.logotypes img {border:1px solid #eee; border-radius:8px; padding:5px; margin-bottom:3px}
.owl-theme .owl-nav.disabled+.owl-dots {display:none} 
.sidebar .tile {border-radius:20px; background: var(--color1); margin-bottom:10px;}
.sidebar .tile h3, .sidebar .tile p , .sidebar .tile .tile-icon  {color:#fff}
.slider {margin-bottom:30px}
.sidebar {margin-left:20px}
.news .teaser em {border-radius:8px}
.caritas-tiles {
    width: 100%;
    display: grid; 
    margin: 30px 0;
}

.caritas-tile {
    width: 100%;
    margin: 10px 0;
}

.caritas-tile-link {
    border:3px solid #fff;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    text-decoration: none; 
}

.caritas-tile-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: brightness(100%);
}

.caritas-tile-link span {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 25px;
    text-align: center;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85);
}

.caritas-tile-link:hover img {
    filter: brightness(92%);
    transform: scale(1.04);
}
.caritas-tile-link:hover {color:#fff}
.home-welcome-box {
    position: relative;
    margin-bottom: 30px;
    padding: 42px 46px;
    text-align: center;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.home-welcome-box:before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(190, 30, 45, 0.08);
}

.home-welcome-box:after {
    content: "";
    position: absolute;
    bottom: -90px;
    left: -90px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(190, 30, 45, 0.06);
}

.home-welcome-box > * {
    position: relative;
    z-index: 2;
}

.home-welcome-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #be1e2d;
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 8px 22px rgba(190, 30, 45, 0.28);
}

.home-welcome-box h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    color: #222222;
}

.home-welcome-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px auto 26px auto;
    color: #be1e2d;
}

.home-welcome-separator span {
    display: block;
    width: 70px;
    height: 1px;
    background: rgba(190, 30, 45, 0.35);
}

.home-welcome-separator i {
    font-size: 15px;
}

.home-welcome-box p {
    max-width: 900px;
    margin: 0 auto 16px auto;
    font-size: 18px;
    line-height: 1.75;
    color: #444444;
}

.home-welcome-box p:last-child {
    margin-bottom: 0;
}
.slider,
.slider .owl-carousel,
.slider .owl-stage-outer,
.slider .owl-stage,
.slider .owl-item,
.slider .owl-carousel .item {
    height: var(--slider-height);
}

.slider .owl-carousel .item {
    position: relative;
    overflow: hidden;
}

.slider .owl-carousel .item > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.slider .owl-carousel .item > svg {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 4;
    display: block;
    width: 100%;
    height: clamp(45px, 6vw, 95px);
    pointer-events: none;
}

.slider .owl-carousel .item .overlay,
.slider .owl-carousel .item .mask {
    z-index: 2;
}

.slider .owl-carousel .item .carousel-caption {
    z-index: 5;
}
@media (max-width: 768px) {
    .home-welcome-box {
        padding: 32px 22px;
        border-radius: 18px;
    }

    .home-welcome-box h2 {
        font-size: 28px;
    }

    .home-welcome-box p {
        font-size: 16px;
        line-height: 1.65;
    }

    .home-welcome-separator span {
        width: 45px;
    }
}
@media (max-width: 1400px){
    .slider {height: var(--slider-height)}
    
.sidebar {margin-left:20px}
}
@media (max-width: 1200px) {
    /*.slider {height: 500px}*/
    .slider .carousel-one h1{ font-size: 50px;}
    .slider .carousel-one p{ font-size: 25px;}
    .caritas-tile-link {max-width:400px; margin: 0 auto}
}


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

@media (max-width: 992px) {
.sidebar {margin-left:0px}
    #menu_sidebar .navbar-brand, header nav.navbar .navbar-brand {max-height:90px}
    #menu_sidebar .navbar-brand>br, header .navbar-brand>br {display:inline}
    header .topbar .search input{color:#fff}
    header .topbar .search input:focus,header .search input:active{border:1px solid #fff}    
    header .topbar .search input::placeholder{color:#fff}
    header .topbar .search input:-ms-input-placeholder, header .topbar .search input::-ms-input-placeholder  {color:#fff}
    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}
    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; width:100%}
    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}
    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}
    .home .slider {margin-top:117px}
    .page>.page-title {margin-top:117px} 

    .slider .carousel-one h1 {font-size: 30px;}
    .slider .carousel-one p{ font-size: 18px;}
    .slider .carousel-one {top:40%}
    .slider .carousel-one a  {display:none}
    .owl-theme  .owl-dots {display:none}  
  
    body.home .right-sidebar {margin-top:0}
    header .navbar-brand small {display:block}
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {letter-spacing:2px; font-size:27px; line-height:30px;  text-align:left}
    header .navbar-brand img {height:60px} 
#menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a, header ul.navbar-nav .dropdown-menu,#menu_top {background: #fff}
 header .topbar .lang-mobile-option span {color:#000}
}

@media (max-width: 767px) {
    header .navbar-brand img {max-height:55px}
    .content .mod-gallery .thumbnail {height:200px !important}
    .top-tiles {margin-top:0}
    .carousel-caption img {max-height: 50px} 
    .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}
    .content p, .content ul li, .content ol li {font-size: 15px}
    .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: 12px;}
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {font-size: 18px; letter-spacing:0; line-height:22px}
    header .navbar-brand img {height:55px ; margin-right:10px  }
    #menu_sidebar .dropdown-menu, header .dropdown-menu {background:unset }
    #menu_sidebar .navbar-brand>br, header .navbar-brand>br {display:inline}
    #menu_sidebar .navbar-brand small, header .navbar-brand small {font-size:10px; letter-spacing:1px; padding-top:3px}
    #menu_sidebar,#menu_top {margin-top:10px} 
    #spowiedz, #kancelaria, #msza, #wcag-options {margin: 0 !important; height: calc(100vh - 166px)}

    .content h2.home {font-size: 18px; text-align:left}
    header .navbar-brand img {margin-right:10px; margin-top:-6px}
    .content-home .news {margin-top:0}
}
@media (max-width: 576px) { 
    .slider,
    .slider .owl-carousel,
    .slider .owl-stage-outer,
    .slider .owl-stage,
    .slider .owl-item,
    .slider .owl-carousel .item {
        height: clamp(230px, 55vw, 300px);
    }

    .slider .owl-carousel .item > svg {
        height: clamp(30px, 8vw, 45px);
    }

.content .news>div {padding-right:0}
    .content ul ul, .content ol ul,.content ul ol, .content ol ol {padding-left:0}
    #menu_top,#menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a {background: #fff}
    a.wcag-button{top:63px}
 #menu_top,#menu_sidebar ul.navbar-nav li a, header ul.navbar-nav li a {background: #fff}
    
    .slider .carousel-one {top:50%; background: rgba(0,0,0,0.7)}
    .slider .carousel-one h1 {font-size: 20px;}
    .slider .carousel-one p{ font-size: 15px;}
    .slider .carousel-one  {display:none}
.content h3 {margin-top: 20px; color: var(--color1); margin-bottom:10px; line-height: 1.3em; font-size: 17px}
.content h2 {  font-size: 24px}
.content p {font-size: 14px; line-height:1.5em; margin: 10px 0; text-align:initial}
.content ul li,.content ol li {font-size: 14px; line-height:1.5em; text-align:left}
}
@media (max-width: 400px) {
    /*#menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {font-size: 13px}*/
} 

@media (max-width: 375px) {
    
 header .navbar-brand img {height:55px ; margin-right:5px  }
}
/*  ---------------------------------------------------------------------------------------------------------------------
/*  jesli header w dwoch linijkach, odkomentuj ponizsze*/
/*    #menu_sidebar .navbar-brand img, header .navbar-brand img {margin-top:0px; height:85px}
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover  {text-align:left; padding-top: 0; font-size: 26px}
    #menu_sidebar .navbar-brand>br, header .navbar-brand>br {display:inline}
@media (max-width: 1200px) {    
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover  {font-size: 20px; padding-top:10px}
     #menu_sidebar .navbar-brand img, header .navbar-brand img {height:75px}
}
@media (max-width: 992px) {
    #menu_sidebar .navbar-brand>br, header .navbar-brand>br {display:inline}
    #menu_sidebar .navbar-brand img, header .navbar-brand img {height:60px}
}
@media (max-width: 767px) {
    #menu_sidebar .navbar-brand, header .navbar-brand,#menu_sidebar .navbar-brand:hover, header .navbar-brand:hover {font-size: 17px;padding-top: 8px; width:100%}   
    #menu_sidebar .navbar-brand img, header .navbar-brand img {height:50px}
}*/