@import url('//fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/************ TEMPLATE  ************
Fonts:
-Libre Baskerville
-Montserrat
---------------------------
Colors - all colors are part of their branding
Green: #57745F, rgba(87,116,95,1)
Orange: #CB934A, rgba(203,147,74,1)
Purple: #513252, rgba(81,50,82,1)
super light green: #CFD8CA
dark grey: #414042
-------------------------------
-sticky menu
-button always on the page in the lower right corner for mass times
-section with 'Eucharistic Adoration, Confession, etc' is that same ol news roksprocket for updating purposes, or however it is made now

************/

.site-1 {
    --primary-color: #57745F;
    --secondary-color: #513252;

    --primary-rgb: 87,116,95;
    --secondary-rgb: 203,147,74;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Libre Baskerville', serif;
    --body-font-family: 'Montserrat', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-title-color: var(--default-white);

    --ph-box-shadow: 0px 0px 15px rgba(0,0,0,.4);
    --ph-title-font-size-desktop: 1.2vw;
    --ph-title-font-size-mobile: 5vw;
    --ph-text-font-size-desktop: .9vw;

    --rok-mini-g-title-size: 2vw;
    --rok-mini-desc-font-size: .9vw;
}
.ql-swiper-overlay {
    --ql-font-size-desktop: 1.2vw;
    --ql-font-size-mobile: 1rem;
    --ql-font-family: var(--body-font-family);
    --ql-title-weight: 600;
    --ql-background-color: rgba(81,50,82,.8);
    --ql-background-hover: rgba(81,50,82,1);
}
.ql-inner-box {
    --ql-font-family: var(--body-font-family);
    --ql-background-color: rgba(81,50,82,.8);
    --ql-background-hover: rgba(81,50,82,.6);
}
.ql-photoblock-mobile {
    --ql-background-color: rgba(81,50,82,.8);
    --ql-background-hover: rgba(81,50,82,1);
}

@media only screen and (max-width: 50.99rem) {
    .site-1 {
        --ph-gap: 1rem;
    }
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: var(--primary-color);
    font-family: 'Lato', sans-serif;
    border-radius: 0;
} 

/*************** HOMELAYOUT ***************/ 
.eapps-instagram-feed-posts-grid-load-more {background: var(--primary-color);}

/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--primary-color);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
.site-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
    font-family: var(--body-font-family);
    font-size: 1vw;
}
.site-1 .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
    font-family: var(--body-font-family);
    font-size: 1vw;
}


@media only screen and (min-width: 50.99rem) {
    /*#g-navigation {transition: var(--default-transition);}*/
     /*#g-navigation .g-logo img {height: 60px; width: auto;}*/
     #g-navigation .g-logo img {transition: var(--default-transition);}
     #g-navigation.sticky .g-logo img {height: 60px; width: auto; transition: var(--default-transition);}
	
	.site-1-sub .g-logo {
        margin: 1rem auto;
    }
    .site-1-home #g-navigation .g-toplevel .menu-logo {
        display: none;
    }
    .site-1-home #g-navigation.sticky .g-toplevel .menu-logo {
        display: block;
    }
    .site-1-home #g-navigation.sticky {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .site-1-home #g-slideshow.sticky {
        margin-top: 2vw!important;
    }

    .site-1-sub #sub-stick-menu.sticky {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .site-1-sub #g-navigation.sticky {
        margin-bottom: 16vw!important;
    }
    /*.site-1-sub #g-container-main.sticky {
        margin-top: 15vw!important;
    }*/
}
/************ FIXED MENU ************/
@media only screen and (min-width: 50.99rem) {
.fixed #g-navigation > .g-grid:first-child > .g-block { 
	z-index: 100; 
	position: fixed; top:0; left: 0; right: 0; 
	background: rgba(35, 31, 32, 0.95);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6); 
}
.fixed .g-main-nav .g-toplevel > li > .g-menu-item-container { color: #003E7E; }
.fixed .g-main-nav ul.g-toplevel { justify-content: space-around; align-items: center; }
.fixed .g-main-nav .g-toplevel > li.g-menu-item-type-particle { display: inline-block;} 
.fixed .menu-item-particle img { height: 60px; width: auto;} 
/*.g-main-nav .g-toplevel > li.g-menu-item-type-particle { display: none; transition: all 0s ease-in; }*/
.hide {display: none;}
}


@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation {
        background: var(--secondary-color);
    }
    .site-1 .g-logo {
        max-width: 70%!important;
        margin: 4vw auto!important;
    }
}

/*************** SLIDESHOW ****************/ 
.swiper-overlay-links .g-container > .g-grid:nth-child(2) {
    top: 0;
    bottom: 0;
    left: 0;
}
.g-blockcontent-subcontent-title-text {font-weight: var( --ql-title-weight);}

@media only screen and (max-width: 50.99rem) {
    .ql-swiper-overlay .g-blockcontent-subcontent-block {
        background: rgba(var(--primary-rgb),1);
    }
    .ql-swiper-overlay .g-blockcontent-subcontent-block:not(.ql-swiper-overlay .g-blockcontent-subcontent-block.swiper-logo, .ql-swiper-overlay .g-blockcontent-subcontent-block.swiper-empty):hover {
        background: rgba(var(--primary-rgb),.8);
    }
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
.rok-mini-verticle :is(.rme-day, .rme-month) {
    font-weight: 600;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-container-main {
        padding: 0 5%;
    }
    .site-1-home #g-mainbar {
        padding: 0 2vw 0 0;
    }
    .site-1-home #g-aside {
        padding: 0 0 0 2vw;
    }
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-mainbar {
        padding: 3rem 0;
    }
}
.site-1 .rok-mini-verticle > .g-content {
    padding: 2vw;
    margin: 0;   
    box-shadow: 0px 0px 15px rgba(0,0,0,.4);
    background: var(--default-white);
}
.site-1-home #g-aside {
    background: transparent;
}
.site-1 .rok-mini-particle-verticle .rme-badge {
    border-radius: 0;
}

/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 3vw 0!important;
    }
}

/*************** EXTENSION ****************/
.site-1-home #g-extension {
    background: url('/images/template/paralax1.jpg') 0% 0% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.site-1-home #g-extension > .g-container {
    background: rgba(236,239,234,.9);
    padding: 5% 10%!important;
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-extension {
        background-attachment: initial;
    }
}

/*************** BOTTOM *******************/
.site-1-home #g-bottom > .g-grid > .g-block.social-media-display:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.125rem;
}
.site-1-home #g-bottom > .g-grid > .g-block.social-media-display:nth-child(1) > .g-content {
    box-shadow: 0px 0px 20px rgba(0,0,0,.25);
    margin: 0;
    background: var(--default-white);
}

/*************** FOOTER *******************/
.footer-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}
.footer-box > div {
    flex: 1;
}
.footer-box > .footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-box > .footer-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.footer-box > .footer-text p {
    margin: 0;
    padding: 0;
    font-family: var(--body-font-family)!important;
}

@media only screen and (max-width: 50.99rem) {
    .footer-box {
        flex-direction: column;
        gap: 1rem;
    }
}

#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: var(--default-white); 
    background: var(--secondary-color);
} 

.sprocket-lists-modern-title {
	font-size: 1.25rem !important;
	color: white;
	background: var(--primary-color);
	border-radius: 0;
	padding: 10px !important;
}
.sprocket-lists-modern-title:hover {
	background: var(--secondary-color);
}



/*************** SECTIONS *****************/
@media only screen and (min-width: 50.99rem) {
    .fixed-button .button {
        position: fixed;
        bottom: 5%;
        right: 5%;
        border: 1px solid #ffffff;
        box-shadow: var(--default-box-shadow);
        z-index: 90;
    }
    .fixed-button .button:hover {
        background: rgba(81,50,82,1);
    }
}
@media only screen and (max-width: 50.99rem) {
    .fixed-button .button {
        display: none;
    }
}

/*************** MOBILE *******************/ 
/*************** ADS **********************/

.newslayout .pull-left.item-image {
    display: none;
}