@import url('//fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
************/

.site-1 {
    --primary-color: #7a1420;
    --secondary-color: #838325;

    --primary-rgb: 122, 20, 32;
    --secondary-rgb: 131, 131, 37;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'montserrat', 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);

    --mt-fixed-height-desktop: 34vw;
    --mt-fixed-height: 34vw;
    --mt-background-color: transparent;

    --ql-subtitle-color: #b5b4b4;
    --ql-font-size-desktop: 1.3vw;
    --ql-bg-opacity: .8;
    --ql-height: 8vw;
    --ql-font-size-mobile: 1.2rem;

    --rok-mini-badge: #ccccce;
    --rok-mini-numbers: var(--primary-color);

    --ph-read-more-color: transparent;
    --ph-gap: 4vw;
    --ph-title-font-size-mobile: 4vw;

    --rok-mini-desc-font-size-desktop: 1.2vw;

    --hero-title-font-size: 3vw;
    --hero-title-font-size-mobile: 4.5vw;
}

.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: var(--body-font-family);
} 

/*************** ALL SITE *****************/
.item-image {display: none;}

.g-content-array .g-content {
    padding: 0 !important;
}

.g-array-item-text {
    margin: 0 !important;
}

.flush-block > div.g-content {
    margin: 0;
    padding: 0;
}

.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    background: #9a6262 !important;
    color: white !important;
}

.site-1-sub .nav.menu.mod-list {
    border-radius: 1.25rem;
    overflow: hidden;
}

.site-1-sub .moduletable .nav.menu li:last-child {
    margin: 0;
}

@media (max-width: 50.99rem) {
    .page-header h2 {
        font-size: 2.5rem;
    }
}

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */
::-webkit-scrollbar {
    width: .75rem;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
  }
  
  /* Style the scrollbar on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bbbbbb;
  }
  
  /* Style the scrollbar when it's being dragged */
  ::-webkit-scrollbar-thumb:active {
    background-color: #8c8c8c;
  }
  
  @-moz-document url-prefix() {
    * {
      scrollbar-width: thin;
      scrollbar-color: #ccc #f5f5f5;
    }
  }

/*************** HOMELAYOUT ***************/ 
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--primary-color);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/

.mobile-logo {
    padding: 5% 5% 5% 10%;
}

.desktop-logo {
    padding-left: 5%;
}

.site-1-sub .g-main-nav {
    z-index: 99;
    position: relative;
}

@media (min-width: 50.99rem) {

    .site-1-sub #g-navigation {
        margin-bottom: -2rem !important;
    }

    .site-1 #g-navigation .g-logo img {
        width: 45%;
        padding-bottom: 2%;
    }

    .site-1 #g-navigation {
        padding: 2% 5% 0% 5% !important;
        background-image: url("/images/template/church-exterior-header.png");
        background-size: 60%;
        background-position: center right;
        background-repeat: no-repeat;
    }

    .site-1-home .menu-block .g-main-nav {
        padding: 0.5rem;
        border-radius: 1.25rem 1.25rem 0 0;
        position: relative;
    }

    .site-1-sub .menu-block .g-main-nav {
        padding: 0.5rem;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .site-1-home .g-toplevel > .menu-block {
        position: relative;
        z-index: 15;
    }

    .site-1 .g-toplevel > .g-menu-item {
        border-radius: 1.25rem 1.25rem 0 0; 
    }

    .site-1 .g-toplevel > .g-menu-item:hover {
        background-color: #9a6262;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .site-1 .g-toplevel ul.g-dropdown {
        border-radius: 0 1.25rem 1.25rem 1.25rem;
        overflow: hidden;
    }

    .site-1 .g-sublevel > li:last-child {
        border-radius: 0 0 1.25rem 1.25rem;
        overflow: hidden;
    }

    .site-1 .g-sublevel > li:nth-child(2) {
        border-radius: 0 1.25rem 0 0 !important;
        overflow: hidden;
    }
}

@media (max-width: 50.99rem) {
    .site-1 #g-navigation::after {
        content: '';
        border-bottom: 10px solid var(--primary-color);
        border-radius: 1.25rem;
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }

    .site-1-home .ql-dm {
        padding: 5% 5% 0 5%;
    }

    .site-1-home .ph-sidebyside-mobile .g-content-array {
        padding: 0;
    }
}
	
/*************** SLIDESHOW ****************/ 

@media (min-width: 50.99rem) {
    
    .site-1-home #g-slideshow > .g-container {
        padding: 3.5rem 5% 6% 5% !important;
    }

    .site-1-home .mass-times-block {
        position: absolute;
        width: 25%;
        /* bottom: 5%; */
        transform: translate(0, -105.9%);
        z-index: 10;
        right: 5%;
    }

    .site-1-home #g-slideshow {
        margin-top: -2rem !important;
    }

    .site-1-home .mass-times-block h1 {
        font-size: 1.7vw;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid white;
        padding-bottom: 0.5rem;
        font-weight: 500;
    }

    .site-1-home .mass-times-block h2 {
        font-size: 1.5vw;
        font-weight: 500;
    }

    .site-1-home .mass-times-block .g-array-item {
        padding: 1rem 1.5rem;
    }

    .site-1-home .mass-times-block p {
        font-size: 1vw;
        margin: 0;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 50.99rem) {
    .site-1-home #g-slideshow > .g-container {
        padding: 5% !important;
    }

    .site-1-home #g-slideshow > div.g-container {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .site-1-home .ph-sidebyside-mobile.ph-wide .g-item-title {
        font-size: 3vw;
    }
}

.site-1-home #g-slideshow {
    position: relative;
    background: url("/images/template/brown-bg-blur.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.site-1-home .mass-times-block :is(h1,h2,h3,h4,h5,h6,p) {
    color: white;
}

.site-1-home .fullwidth-swiper, .site-1-home .mass-times-block {
    border-radius: 1.25rem;
    overflow: hidden;
}

.site-1-home .mass-times-block {
    background: url("/images/template/mass-times-blur.png");
    background-size: cover;
    background-position: center;
}

.swiper-navigation div[class*="button-next"] {
    right: 3rem;
}

/*************** HEADER *******************/

@media (min-width: 50.99rem) {
    .site-1-sub #g-header {
        min-height: 25px;
    }
}

/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/

.site-1-home #g-utility .ql-side-title > div {
    padding: 0;
    margin: 0;
}

.site-1-home .ql-side-title .g-blockcontent-subcontent-block:hover img {
    transform: scale(1.075);
    transition: all 300ms ease-out;
}

.site-1-home .ql-side-title .g-blockcontent-subcontent-block:hover :is(.ql-side-title .g-blockcontent-subcontent-title, .g-blockcontent-subcontent-subtitle) {
    background-color: rgba(var(--secondary-rgb),var(--ql-bg-opacity)) !important;
}

.site-1-home .ql-side-title .g-blockcontent-subcontent-block {
    overflow: hidden;
}

.site-1-home .ql-side-title .g-blockcontent-subcontent-block img {
    transition: all 300ms ease-out;
}

@media (min-width: 50.99rem) {

    .site-1-home #g-utility {
        padding: 0 5%;
        transform: translate(0, -50%);
        position: absolute;
        width: 100%;
        z-index: 1000;
    }

    .site-1-home .ql-side-title.ql-subtitle .g-blockcontent-subcontent-subtitle {
        font-size: 0.9vw;
    }

    .site-1-home #g-utility .ql-side-title .g-blockcontent-subcontent > div:last-child {
        border-radius: 0 0 1.25rem 0;
        overflow: hidden;
    }

    .site-1-home #g-utility .ql-side-title .g-blockcontent-subcontent > div:first-child {
        border-radius: 0 0 0 1.25rem;
        overflow: hidden;
    }

    .site-1-home .ql-side-title.ql-subtitle .g-blockcontent-subcontent-subtitle {
        height: 30%;
    }
    
    .site-1-home .ql-side-title.ql-subtitle .g-blockcontent-subcontent-title {
        height: 70%;
    }


}

@media (max-width: 50.99rem) {
    .g-blockcontent-subcontent-subtitle {
        font-size: 1rem;
    }

    .site-1-sub #g-mainbar {
        padding: 0 0;
    }
}

/*************** FEATURE ******************/
/*************** MAIN *********************/

.parish-home #g-container-main {
    padding: 0 5%;
}

.rok-mini-verticle .rme-day {
    font-weight: bold;
    font-size: clamp(1.2rem, 1.4vw, 2rem);
    padding-top: 1.2rem;
}

.rok-mini-verticle .rme-month {
    padding-bottom: 1.2rem;
}

.rok-mini-verticle {
    padding: 0;
}

.rok-mini-verticle .rme-title {
    font-weight: bold;
}

.rok-mini-block > div.g-content,
.rok-mini-title-block > div.g-content {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.calendar-button > div.g-content {
    padding-top: 0;
    margin-top: 0;
    padding-left: 0;
    margin-left: 0;
}

.rok-mini-verticle .rokminievents3 {
    justify-content: flex-start;
    padding-top: 1rem;
}

.calendar-button .button {
    border-radius: 0 0 1.25rem 0;
}

.sub-text {
    color: #ccccce;
}

.button-text {
    line-height: 1.75;
    font-size: 1.1rem;
    font-weight: 500;
}

.rok-mini-verticle .rme-items {
    width: 100%;
    max-width: initial;
}

.rok-mini-verticle .rme-items li {
    max-width: initial;
}

.upcoming-events-title-container {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    border-radius: 0 1.25rem 0 0;
}

.upcoming-events-title {
    font-size: clamp(1.25rem, 1.75vw, 2rem);
    color: white;
}

.calendar-button-block .button {
    border-radius: 0 0 0 1.25rem;
    padding: 1rem 1.25rem;
    min-width: 18rem;
}

#g-mainbar .upcoming-events-title-container {
    border-radius: 1.25rem 0 0 0;
}

.ph-underline {
    padding: 0;
    padding: 1.5rem 0;
}

.ph-sidepics-3.ph-underline .g-content-array > .g-grid:hover > .g-block {
    transform: scale(1.02);
}

.site-1-home #g-container-main :is(.calendar-button, .calendar-button-block) .button:hover {
    background-color: #9a6262;
}

@media (min-width: 50.99rem) {
    .site-1-home #g-mainbar {
        padding: 5% 0 0 5%;
    }

    .site-1-home #g-container-main {
        padding: 5% 5% 0% 5%;
        z-index: 99;
        position: relative;
    }

    .site-1-home #g-mainbar .ph-underline .g-array-item-title {
        display: grid;
        align-items: center;
    }

    .site-1-home #g-bottom {
        position: relative;
        z-index: 1;
    }

    .site-1-home #g-bottom::before {
        content: '';
        position: absolute;
        z-index: 1;
        height: 600px;
        width: 100%;
        bottom: 0;
        background-image: url("/images/template/martha-news-background.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-position: 20% bottom;
        background-size: 25%;
    }

    .site-1-home #g-bottom .g-container {
        position: relative;
        z-index: 10;
    }

}



@media (max-width: 50.99rem) {

    .site-1-home #g-container-main {
        padding: 0% 5% 0% 5%;
    }

    .site-1-home #g-sidebar {
        padding: 0 5% 0 5%;
    }

    .site-1-home #g-mainbar {
        padding-top: 10%;
    }

    .site-1-home .rme-items {
        padding-top: 0;
    }

    .site-1-sub #g-aside .g-content {
        padding: 0 5%;
    }

    .site-1-sub .footer-text .g-array-item-text {
        display: grid;
        justify-content: flex-start;
    }
}

/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/

#g-bottom {
    padding-bottom: 2% !important;
    padding-top: 2% !important;
}

/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

.site-1 #g-footer a {
    transition: all 300ms ease-in;
}

.site-1 #g-footer a:hover {
    opacity: 0.75;
    transition: all 300ms ease-in;
}

.site-1 #g-footer p {
    font-size: 1rem;
}

.site-1 #g-container-footer > div.g-grid {
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
}

#g-footer p {
    margin: 0;
    line-height: 1.5;
}

.site-1 #g-footer {
    padding: 1% 0;
}

.site-1 #g-footer img {
    margin: auto;
    display: block;
}

.site-1 #g-footer :is(h1,h2,h3,h4,h5,h6,a) {
    color: white;
    margin-top: 0;
    line-height: 1;
}

#g-footer .g-social-items a {
    font-size: 3.5rem;
}

.facebook-icon .fa-facebook-square {
    font-size: 3.5rem;
}

.facebook-icon > div {
    padding-bottom: 0;
    margin-bottom: 0;
}

.site-1 #g-container-footer {
    padding: 0 5% 2% 5%;
}

@media (min-width: 50.99rem) {
    .site-1 .footer-container {
        display: flex;
        justify-content: space-around;
    }
}

@media (max-width: 50.99rem) {

    #g-footer .g-social-items {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5rem;
    }

    .site-1 #g-footer .fa-facebook-square {
        display: grid;
        justify-content: start;
    }

    .web-policy {
        left: 50px !important;
        bottom: 20px !important;
    }

    .adminfootericon {
        right: 50px !important;
        bottom: 20px !important;
    }

    .footer-container {
        display: flex;
        gap: 1.5rem;
        flex-direction: column;
    }

    #g-bottom {
        padding: 5% 0 !important;
    }
}

/*************** COPYRIGHT ****************/ 

#g-copyright p {
    margin: 0 !important;
    line-height: 1.5;
}

.adminfootericon {
    bottom: 5px;
    right: 30px;
}

.web-policy {
    left: 30px;
    bottom: 5px;
    position: absolute;
    width: fit-content;
}

@media (max-width: 50.99rem) {
    #g-copyright {
        padding: 20px;
    }
}

/*************** 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(--primary-color); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/

#g-offcanvas #g-mobilemenu-container {
    margin-left: -38%;
}

#g-offcanvas .g-menu-item-content {
    max-width: 84%;
}

/* ph-underline modifications - Srhink them down a bit */

@media (min-width: 50.99rem) {
    .ph-sidepics-3.ph-wide .g-array-item-image {
        max-height: calc(20vw * 9/16);
        max-width: 20vw;
        height: calc(20vw * 9/16);
        width: 20vw;
    }

    .ph-sidepics-3.ph-wide .g-array-item {
        grid-template-columns: 20vw calc(100% - 20vw - 1rem)!important;
        grid-template-rows: 1.2fr 2fr;
        max-height: calc(20vw * 9/16);
    }

    .ph-sidepics-3.ph-underline .g-grid:hover .g-block {
        background-color: #f1f1f1;
        transition: all 250ms ease-in;
    }

    .ph-sidepics-3.ph-underline .g-grid .g-block {
        transition: all 250ms ease-in;
    }

    .ph-sidepics-3.ph-underline .g-array-item-title {
        /* transform: translate(0, 1rem); */
        padding: 0;
    }
}