/* Add GOogle FOnts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    font-family: "PT Sans", sans-serif;
}
small {
    font-family: 'PT Sans', sans-serif;
}
.heading h2 {
    font-family: 'PT Sans', sans-serif;
    font-size: 2rem;
}
.preloader .inner small {
    font-family: 'PT Sans', sans-serif;
}
.contact-us form textarea {
    font-family: 'PT Sans', sans-serif;
}
.new-reply form input::placeholder{
    font-family: 'PT Sans', sans-serif;
}
.new-reply form textarea{
    font-family: 'PT Sans', sans-serif;
}
.new-reply form textarea::placeholder{
    font-family: 'PT Sans', sans-serif;
}
.new-reply form input,
.new-reply form textarea{
    font-family: 'PT Sans', sans-serif;
}
h2.font-bold.h2 {
    font-size: 2.25rem;
}


/*********** GENERAL ************/
:root {
    --ms-primary-color: #00869a;
    --ms-secondary-color: #3fbccf;
    --ms-primary-dark-color: #006878;
    --ms-light-bg-color: #f2f7f7;
    --bs-body-font-size: 18px;
    --bs-body-light-color: #666;
}

a {
    color: var(--ms-primary-dark-color);
}

p {
    text-align: justify;
}

a:hover {
    color: var(--ms-primary-color);
}

h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.5rem;
}
.light-bg {
    background-color: var(--ms-light-bg-color);
    z-index: 0;
}
  /*********** HEADER STYLING ************/
.desktop-nav nav .nav-bar > ul > li > a:hover svg, .pastor-meta ul li svg, .event-meta > ul > li > svg, .pd-cart-heart .heart:hover svg, .preloader svg, .about-three .counter-three .box svg {
    fill: var(--ms-primary-color);
}

.top-bar {
    padding: 15px 0;
    border-bottom: 5px solid var(--ms-secondary-color);
    background-color: var(--ms-primary-color);
}

.top-bar .login .las {
    color: #fff;
    font-size: 18px;
    margin: 1px 5px 0 0;
}

.header-date-holder {
    font-size: 14px;
    color: #fff;
}

blockquote, .theme-bg-clr, .theme-btn, .offer span, .desktop-nav .donation a.pr-cart:before, .about-gallery figure:before, .gallery figure:before, .prayers-slider ul.slick-dots li.slick-active, .sermon-img ul li a:focus, .event:hover .event-data, .donation-form .custom-donation-amount span, .blog-meta ul li.date, .subscribe, .subscribe form button, .about-two .extras span, .sermon-grid ul li a:focus, .pastor .profile:hover .meta, .causes-of-church .don-box a.theme-btn:hover, .sidetwo .icon, .livestream .data .title .countdown #countdown #tiles > span, .footer-three .social-area ul li span, .footer-gallery figure:before, .product .product-actions a, .social-medias ul li a:hover, #nav-icon4 span, .s-medias ul li a, .cause-detail .cause-meta .theme-btn:hover, ul.sermon-icons li a:hover, .sermon-grid>ul>li a:hover, .tags ul li a:hover, .desktop-nav nav .nav-bar ul > li ul.sub-menu li a:before, .desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu:before, a.next-slide.nav-active:before, a.next-slide:before, .playlist-track-ctn.active-track .playlist-btn-play, #btn-faws-play-pause, .audio-player.style2 #myProgress #myBar, .cart-popup .cart-btns a:hover, .cart-popup:before, button.scrollTopStick, .mobile-nav .donation a.cart:before, .header-two .logo a, .sermon-img ul li a:hover, .hero-one-slider button.slick-arrow, .mobile-nav > ul > li.menu-item-has-children.active > ul.sub-menu li:before, .pray:before, .pd-stars p, .pd-content ul.pd-tabs li a:before, .payment-method .form-check-input:checked, .personal-info .dp-agree input:checked, .prog-bar .progress .progress-bar {
    background-color: var(--ms-primary-color);
}

.theme-bdr-clr, .dg-counter:before, .donation-form ul li a:focus, .subscribe form button, .livestream .data .title .countdown #countdown #tiles > span, .event-three .event:hover .event-data:before, .footer-three, .desktop-nav nav .nav-bar ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul, .cart-popup .cart-btns a:hover, .mobile-nav > ul > li.menu-item-has-children.active, .causes-of-church .don-box a.theme-btn, .cart-popup .cart-btns a.checkout, .hero-one-slider button.slick-arrow, .pd-colors ul li a:focus, .pd-edition ul li a:focus, .specs-features, .reviews-slider ul.slick-dots li.slick-active button, .post-review .review-form form input:focus, .post-review .review-form form textarea:focus, .post-review .review-form form textarea:focus-visible, .pd-cart-heart .heart:hover, .payment-method .form-check-input:checked, .personal-info input:focus, .personal-info select:focus, .total-donation-amount .total_amount input, .personal-info .dp-agree input:checked {
    border-color: var(--ms-secondary-color);
}

.widget .theme-btn {
    margin-top: 2rem;
    color: white;
}

#nav-icon4.open span:nth-child(1) {
    top: 6px;
    left: 9px;
}

.top-bar ul li a.top-bar-calendar {
    font-size: 14px;
}

/*** Menu ***/
.desktop-nav nav .nav-bar > ul > li:last-child > a {
    margin-right: 5px;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu {
    padding: 0;
}
.desktop-nav ul.sub-menu {
    width: 280px;
}
.desktop-nav nav .nav-bar > ul > li > a {
    font-size: 17px;
}

/*** Darenia button - make smaller ***/
.desktop-nav .theme-btn {
    font-size: 15px;
    padding: 16px 28px;
}
/******** END HEADER STYLING *********/


/******** TITLE BAR STYLING ********/
.banner img {
    width: auto;
    height: auto;
}
.banner ul li a {
    font-size: 18px;
}

@media screen and (max-width:768px) {
    .banner {
        padding-top: 180px;
        padding-bottom: 100px;
    }
    .banner #breadcrumbs {
        padding: 0 15px;
    }
    .banner ul#breadcrumbs li a {
        font-size: 14px;
        line-height: 18px;
    }
    .banner #breadcrumbs li {
        display: inline-block;
        margin-right: 8px;
    }
    .banner ul li:not(:last-child):before {
        display: none;
    }
    .banner ul li:not(:last-child):after {
        position: relative;
        content: "/";
        color: #fff;
        margin-left: 8px;
    }
}
@media screen and (min-width:769px) {
    .banner #breadcrumbs {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/******** END TITLE BAR STYLING ********/


/***** HOME SLIDER  *****/
.slick-active .hero-data h2 {
    color: white;
    font-size: 42px;
}
.hero-data {
    margin-left: 20vw;
}
@media screen and (max-width:768px) {
    .slick-active .hero-data h2 {
        font-size: 25px;
    }
    .hero-data {
        margin-left: 5vw;
    }
    .slick-list .slick-active .hero-data a {
        max-width: 90vw;
    }
    .hero-data {
        top: 250px;
    }
    .hero-one-slider button.slick-prev.slick-arrow {
        left: 15%;
        opacity: 0.6;
    }
    .hero-one-slider button.slick-next.slick-arrow {
        right: 15%;
        opacity: 0.6;
    }
}
.slick-active .hero-data p {
    font-style: italic;
}
.slick-active .hero-data a {
    word-wrap: break-word;
    max-width: 60vw;
    display: block;
}

/*******  END HOME SLIDER *****/

/******** HOME LITURGII *********/
#index-liturgii .sermon-data {
    padding: 20px 5px;
}
@media (min-width: 993px) {
    #index-liturgii .sermon-img {
        flex-basis: 25%;
    }
    
    #index-liturgii .sermon-data {
        flex-basis: 75%;
        padding: 0 0 0 20px;
    }
}


#index-liturgii .sermon-media {
    height: 200px;
    width: 100%;
}
/******** END HOME LITURGII *********/

/***** HOME - Gallery ******/
.gallery-caption {
    color: white;
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5959558823529411) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    text-align: center;
    padding: 20px 0 5px 0;
    text-transform: uppercase;
    font-weight: bold;
}

/*********** HOME Nastavnik ********/
ul.home-nastavnik-list {
    margin: 40px 0;
}

ul.home-nastavnik-list li:before {
    content: "\f654";
    font-family: 'Line Awesome Free';
    font-weight: 900;
    
}

ul.home-nastavnik-list li a {
    color: var(--ms-primary-dark-color);
    font-size: 14px;
}
ul.home-nastavnik-list li a:hover {
    color: var(--ms-primary-color);
}


/********** GALLERY *************/
.cause-detail .gallery figure {
    height: auto;
}
section.gallery .gallery .gallery-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;

}
.gallery figure img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.gallery .gallery-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 20px 10px 20px;
    color: #fff;
    background: var(--ms-primary-dark-color);
    background: linear-gradient(180deg, rgba(23, 102, 102, 0.76) 0%, rgba(5, 150, 150, 0.75) 100%);
    transition: all 0.5s ease-in-out;
}
.gallery figure:hover .gallery-title {
    background: linear-gradient(180deg, rgba(23, 102, 102, 0.1) 0%, rgba(5, 150, 150, 0.1) 100%);
}
.gallery .gallery-item-link {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/******** END GALLERY ***********/


/************ PAGINATION STYLING ***********/
.pagination:before {
    content: none;
}
.pagination {
    padding-top: 15px;
    margin-top: 0;
}
.pagination a.page-link {
    color: var(--ms-primary-color);
    border: 0px;
}

.pagination .page-item.active .page-link {
    background-color: var(--ms-primary-color);
    border-color: var(--ms-primary-color);
    margin: 0px 7px;
}
.pagination .page-link:hover {
    background: none;
    border-bottom: 1px solid;
}

/************ END PAGINATION STYLING ***********/


/********** NEWS STYLING *******************/
.blog-meta img {
    object-fit: cover;
    /* height: 240px; */
}
#news-container .blog-meta img.news-lead-img {
    height: 240px;
}

iframe.youtube-video {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.blog-detail blockquote span {
    width: 80px;
}

.share-social {
    display: flex;
    justify-content: space-between;
}
.share-social .social ul.social-medias li:before {
    background-color: #059695;
    opacity: .3;
}

.blog-meta a.custom-cat {
    display: flex;
    font-size: 13px;
    color: #00869a;
    text-transform: uppercase;
}

.blog-meta a.custom-cat i {
    font-size: 20px;
    margin: 5px;
}

/********* Calendar Styling *************/

/* Tsarkoven kalendar block */
.tsarkoven-kalendar .icon svg {
    fill: none;
}

.tsarkoven-kalendar 
 span.icon {
    background: none;
}
.tsarkoven-kalendar .contacts:not(:last-child) {
    margin-bottom: 0px;
}
/* End Block */

#calendar h2 {
    margin-bottom: 2rem;
}
#calendar .calendar-column ul {
    margin-left: 20px;
}
#calendar .calendar-column ul li:before {
    content: "\f654";
    font-family: 'Line Awesome Free';
    font-weight: 900;
}
#calendar .red * {
    color: #bb2525;
}


/*********** NEWS ARCHIVE STYLING ***********/
.news-archive-container .blog-meta > a {
    font-size: 18px;
}

.archive-select-title {
    flex-basis: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}
.archive-year-select {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    flex-wrap: wrap;
}
.archive-year-select select {
    padding: 5px 20px;
    margin-right: 30px;
    height: 40px;
    border-width: 0;
    border-color: var(--ms-primary-color);
    border-bottom-width: 2px;
}
.archive-year-select button {
    padding: 5px 20px;
    border: 1px solid;
    border-color: var(--ms-primary-color);
    background-color: var(--ms-primary-color);
    color: #fff;
    font-weight: 600;
    border-radius: 25px;
}


/******** SIDEBAR **********/
#sidebar-latest-news img.meta-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}



/*************** ABOUT US ************/
.about-us .church-about-img img {
    position: absolute;
    width: 937px;
    left: -175px;
    top: -90px;
    z-index: -10;
}


/****************** MANASTIRI *****************/
.our-ministries .ministry {
    margin-bottom: 0px;
    height: 100%;
}
.our-ministries .ministry a {
    font-size: 17px;
    line-height: 20px;
}

.manastir .manastir-hero-image img {
    height: 350px;
    object-fit: cover;
}

.cause-detail .cause-meta {
    margin-bottom: 0px !important;
}

.manastir-checklist li {
    display: flex;
    margin: 2px 0px;
    font-size: 13px;
}
.manastir-checklist li strong {
    margin-right: 5px;
}
.manastir-checklist li i {
    color: var(--ms-primary-dark-color);
    margin-right: 10px;
    font-size: 24px;
}
/********** MITROPOLIA **********/
.contacts ul {
    width: 100%;
}
.contact-us .content ul li:first-child {
    margin-bottom: 0px;
}
.pastor .meta:before {
    background-image: url(../images/heading-img.webp);
}
span.mitropolit-years {
    color: #fff;
}
.about-us.inner-page .church-about-img img {
    left: -90px;
    top: -60px;
    width: 750px;
}

/********* CONTACT US **********/
.contact-us .content span {
    width: 25%;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}
.contact-us .content .c-detail a {
    color: var(--ms-primary-dark-color);
}
.contact-us .content .c-detail a:hover {
    color: var(--ms-primary-color);
}

@media screen and (max-width: 768px) {
    .c-detail .c-title-item {
        width: 100% !important;
    }
}

/***** TABLES STYLING *****/
.table-responsive table tr:nth-child(odd) {
    background: #f4f9f9;
}


/************ OTHERS HERE *************/
ol>li {
    list-style: auto;
    margin-bottom: 10px;
}
li {
    color: var(--bs-body-light-color);
}

/********** BANNERS  PAGE ***********/
.banners .banner-image {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 40px;
}
.banner-caption {
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

/********** Vaprosi pri izpoved **********/
#vaprosi-pri-izpoved ul {
    margin-bottom: 15px;
}

#vaprosi-pri-izpoved ol ul li {
    list-style-type: disc;
}

/********** CONTACT STYLING ***********/
.contact-us h2 {
    width: 100%;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 40px;
}
.contact-us .map {
    margin-top: 0;
}


/********** FOOTER STYLING ***********/
.theme-clr, .desktop-nav nav .nav-bar ul li a:hover, .offer h3 a:hover, .sermon-data ul li, .sermon-data h3 a:hover, .donation-form ul li a:focus, .blog-meta a:hover, .footer-one .contact span, .copy-right span, .footer-one ul.quick-links li a:hover, .footer-one ul.footer-events li a:hover, .subscribe form button:hover, .about-two .extras a:hover, .sermon-two ul li, .recent-sermon-two .sermon-two a:hover, .causes-of-church .prices p span, .causes-of-church .don-box a.theme-btn, .subscribe-two .data p span, .sidetwo .contacts p.theme-clr, .footer-three .social-area ul li a:hover, .footer-main-content p span, .product .product-description a:hover, .content ul li span, .ministry a:hover, .cause-detail .cause-meta span, ul.meta, .pagination ul li a:hover, .blog-detail ul.blog-author li a:hover, .widget-popular-posts a:hover, .widget-popular-posts .blog-meta li:first-child, .widget-trending-videos > ul > li > a:hover, .widget-trending-videos > ul > li > ul.blog-meta li, .widget-trending-videos > ul > li > ul.blog-meta li:first-child:before, .active-track > .playlist-info-track, .active-track >.playlist-duration, .active-track > .playlist-btn-play, .widget-categories ul li a:hover, .theme-dark-clr, .pd-edition ul li a:focus, .pd-cat-tags ul li ul.pd-cat li a:hover, .pd-cat-tags ul li ul.pd-tag li a:hover, .total-donation-amount .total_amount input, .pastor-meta p.designation {
    color: var(--ms-primary-color);
}

/* Mobile Logo Fix */
@media (max-width: 768px) {
    .footer-one img.footer-logo {
        max-width: 80%;
    }
}
/* Quick Links Arrow */
.footer-one ul.quick-links li::before {
    content: "\f105";
    font-family: 'Line Awesome Free';
    color: var(--ms-secondary-color);
    font-weight: 900;
    position: absolute;
    left: -20px;
}
/* Latest News Calendar icon  */
.footer-one ul.footer-events li p.post-date:before {
    content: url(../images/calendar-clr.svg);
    content: "\f133";
    font-family: 'Line Awesome Free';
    color: var(--ms-secondary-color);
    font-weight: 900;
    position: absolute;
    left: 0;
    font-size: 26px;
    top: 9px;
}

/* Footer news title */
.footer-one ul.footer-events li {
    width: 100%;
}
.footer-one ul.footer-events li a {
    font-size: 16px;
}

.footer-one ul.footer-events li figure img {
    width: 140px;
    height: 100px;
}
/************ END FOOTER *************/