@import url('//fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&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  ************
https://seas-fc-mockup.forge.solutiosoftware.com/mockup-10
----------------
Rotator Size:  Superwide - 1600x669
QL: Standard or Wide
News: Square
---------------------------
Fonts: Crimson Text, Montserrat
----------------------------
Burgandy: #560417, 86,4,23
Tan: #A19257, 161,146,87
Light Tan: #CBBD89
Dark Tan: #746731
Light Blue: #BDD8F1, 189,216,241
More Blue: #9ac6e8
--------------------
Note - white space between rotator and ql row
-----------------
Weekend Mass
Saturday - 5:00pm
Sunday - 8:00am, 9:45am, 11:30am

Daily Mass
Mon-Fri - 8:00am
Tues, Thurs - 12:15pm

Confession
Wednesday - 6:00-7:00pm
Saturday - 3:30-4:30pm 
Anytime by appointment: (970) 226-1303

Adoration
Mon, Wed - 8:30am-4:00pm
Friday - 8:30am-12:00pm
*************/

.site-1 {
    --primary-color: #560417;
    --secondary-color: #A19257;

    --primary-rgb: 86, 4, 23;
    --secondary-rgb: 161, 146, 87;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Crimson Text', 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);
    --ql-background-color: rgba(var(--secondary-rgb), .6);
    --ql-background-hover: rgba(var(--secondary-rgb), .8);

    --ph-title-color: var(--secondary-color);
    --ph-width: 29vw;
    /*--ph-border-radius: 1rem;*/

    --mt-background-color: transparent;
    --mt-header-color: var(--secondary-color);
    --mt-para-color: var(--default-black);

    --ph-title-color: var(--primary-color);
    --ph-title-font-size-desktop: 1.7vw;
    --ph-title-font: var(--title-font-family);

    --ph-shadowbox-color: var(--primary-color);
    --ph-title-text-transform: none;
    --ph-title-weight: 700;
    --ph-img-shadow-border-radius: .75rem;
    --ph-text-color: var(--default-grey);
    --ph-g-title-border-bottom: 2px solid var(--default-grey);
    --ph-g-title-weight: 700;
    --ph-g-title-margin: 0 0 2vw 0;
    --ph-text-color: var(--primary-color);
}

.readon,
.button,
.btn,
p.readmore .btn,
.sprocket-lists-portrait-container>li .sprocket-lists-portrait-item>a span,
.listentobutton.moduletable a {
    background: var(--secondary-color);
    font-family: 'Lato', sans-serif;
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {
    color: var(--primary-color);
}

.g-offcanvas-toggle .fa-fw {
    text-shadow: none;
}

/*************** TOP **********************/
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    #g-navigation {
        background: url('/images/template/header.png') 100% 50% no-repeat;
        background-size: 42%;
    }

    #g-navigation .logo-icon img {
        width: 10vw;
        margin-bottom: -5vw !important;
        margin-left: 1vw;
        position: relative;
        z-index: 11;
    }

    #g-navigation .logo-text img {
        width: 50%;
    }

    #g-navigation .g-main-nav .g-toplevel {
        padding-left: 11vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo {
        max-width: 70%;
        text-align: center;
    }

    #g-navigation .logo-icon img {
        width: 25%;
    }
}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/

.site-1-sub .item-image {
    display: none;
}

@media only screen and (min-width: 50.99rem) {
    .mass-boxes {
        display: flex;
        flex-direction: row;
        gap: 2vw;
        align-items: center;

    }

    .mass-boxes .mass-box {
        flex: 1;
    }
}

.site-1-home #g-mainbar {
    padding-right: 2% !important;
    padding-left: 5% !important;
}

/*************** FEATURE ******************/
/*************** MAIN *********************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-container-main {
        padding-top: 2vw;
        background: url('/images/template/setonstatue.png') 100% 100% no-repeat;
        background-size: 32%;
    }

    #g-container-main .g-title {
        font-size: 3vw;
        color: var(--secondary-color);
    }


    .site-1-home #g-aside {
        background: transparent;
    }

    /***** make mass times taller*****/
    .site-1-home .mass-times-block {
        background: none;
        height: auto !important;
    }

    .mass-times-block .g-array-item {
        height: auto !important;
        padding: 0 2vw !important;
    }

}

/*************** EXPANDED *****************/
#g-expanded .g-content-array {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded .g-title {
        font-size: 3vw;
        font-weight: 400;
        color: var(--secondary-color);
    }
}

/*************** EXTENSION ****************/
#g-extension .g-content-array {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension>.g-container>.g-grid:nth-child(1) {
        padding: 2vw 10% !important;
    }

    .site-1-home #g-extension>.g-container>.g-grid:nth-child(1)>.g-block:nth-child(1) {
        padding-right: 1vw;
    }

    .site-1-home #g-extension>.g-container>.g-grid:nth-child(1)>.g-block:nth-child(2) {
        padding-left: 1vw;
    }

    .site-1-home #g-extension>.g-container>.g-grid:nth-child(1)>.g-block>.g-content {
        box-shadow: var(--default-box-shadow);
        height: 100%;
        padding: 2vw;
    }

    .site-1-home #g-extension .connect-logo-links img {
        transition: var(--default-transition);
    }

    .site-1-home #g-extension .connect-logo-links img:hover {
        transform: scale(0.95);
    }

    .site-1-home #g-extension>.g-container>.g-grid:nth-child(2) {
        padding: 3vw 5% !important;
        background: #f1f2f2;
    }

    .connect-logo-links {
        display: flex;
        flex-direction: column;
    }

    .connect-logo-links>div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .connect-logo-links>div:nth-child(1) img {
        width: 75%;
    }

    .connect-logo-links>div:nth-child(1) a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flocknote-container img {
        width: 25%;
    }

    .bc-info-box {
        margin: 0;
        padding: 0;
    }

    .bc-info-box>.g-content {
        margin: 0;
        padding: 0;
    }

    .bc-info-box>.g-content>div {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 2vw;
    }

    .bc-info-box .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        transition: var(--default-transition);
    }

    .bc-info-box .g-blockcontent-subcontent-block-content:hover {
        transform: scale(1.05);
    }

    .bc-info-box .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bc-info-box .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 1vw;
        font-size: 3vw;
        text-align: center;
        font-weight: 400;
    }

    .bc-info-box .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }

    .bc-info-box .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-extension {
        padding: 4vw 10% !important;
    }

    .bc-info-box {
        margin: 0;
        padding: 0;
    }

    .bc-info-box>.g-content {
        margin: 0;
        padding: 0;
    }

    .bc-info-box>.g-content>div {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }

    .bc-info-box .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        transition: var(--default-transition);
    }

    .bc-info-box .g-blockcontent-subcontent-block-content:hover {
        transform: scale(1.05);
    }

    .bc-info-box .g-blockcontent-subcontent-img {
        margin: 0;
        padding: 0;
    }

    .bc-info-box .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bc-info-box .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 1vw;
        font-size: 7vw;
        text-align: center;
        font-weight: 400;
    }

    .bc-info-box .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }

    .bc-info-box .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#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(--primary-color);
    background: var(--secondary-color);
}

/*************** SECTIONS *****************/
/*************** MOBILE *******************/
/*************** ADS **********************/

@media only screen and (max-width: 50.99rem) {
    .ph-sidebyside-mobile .g-array-item-read-more a {
        opacity: 0;
    }
}

@media only screen and (min-width: 50.99rem) {
    .ph-shadowbox {
        margin: 0;
        padding: 0;
        padding-bottom: 2vw;
        border-bottom: var(--ph-g-title-border-bottom);
    }

    .ph-shadowbox>.g-content {
        margin: 0;
        padding: 0;
    }

    .ph-shadowbox .g-title {
        margin: var(--ph-g-title-margin);
        padding: 0;
        color: var(--ph-g-title-color);
        font-family: var(--ph-g-title-font);
        font-size: var(--ph-g-title-size-desktop);
        font-weight: var(--ph-g-title-weight);
        text-transform: var(--ph-g-title-text-transform);
        font-variant-caps: var(--ph-g-title-variant-caps);
        border-bottom: var(--ph-g-title-border-bottom);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1vw;
    }

    .ph-shadowbox .g-title:after {
        content: '';
        width: 60%;
        border-top: 3px solid var(--primary-color);
    }

    .ph-shadowbox .g-content-array {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 3vw;
    }

    .ph-shadowbox .g-content-array>.g-grid {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .ph-shadowbox .g-content-array>.g-grid>.g-block {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .ph-shadowbox .g-content-array>.g-grid>.g-block>.g-content {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .ph-shadowbox .g-array-item {
        margin: 0;
        padding: 0;
        position: relative;
        max-width: 33vw;
        transition: .3s all ease-in-out;
    }

    .ph-shadowbox .g-array-item:hover .g-array-item-image {
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        /*margin-bottom: -.15rem;*/
    }

    .ph-shadowbox .g-array-item:hover .g-array-item-image img {
        transform: translate(0, 0);
    }

    /*.ph-shadowbox .g-array-item:hover .g-array-item-title {
        margin-top: calc(1.75vw + 10px);
    }*/
    .ph-shadowbox .g-array-item-image {
        margin: 0;
        padding: 0;
        width: 100%;
        position: relative;
        overflow: visible;
        /*margin-bottom: 2vw;*/
        border-radius: var(--ph-img-shadow-border-radius);
    }

    .ph-shadowbox .g-array-item-image:after {
        content: "";
        width: 100%;
        background: var(--ph-shadowbox-color);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: unset;
        width: 100%;
        z-index: 1;
        border-radius: var(--ph-img-shadow-border-radius);
        aspect-ratio: 4 / 3;
    }

    .ph-shadowbox .g-array-item-image a {
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .ph-shadowbox .g-array-item-image img {
        margin: 0;
        padding: 0;
        max-width: 50vw;
        position: relative;
        z-index: 2;
        /*margin-top: -.75vw;
        margin-left: .75vw;
        margin-bottom: 1vw;*/
        border-radius: var(--ph-img-shadow-border-radius);
        border: 5px solid var(--default-white);
        transition: .3s all ease-in-out;
        object-position: center;
        object-fit: cover;
        transform: translate(1vw, -1vw);
    }

    .ph-shadowbox.ph-uw .g-array-item-image img {
        width: 100%;
        aspect-ratio: 3.6 / 1;
    }

    .ph-shaowbox.ph-sw .g-array-item-image img {
        width: 100%;
        aspect-ratio: 2.39 / 1;
    }

    .ph-shadowbox.ph-wide .g-array-item-image img {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .ph-shadowbox.ph-standard .g-array-item-image img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .ph-shadowbox.ph-square .g-array-item-image img {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .ph-shadowbox.ph-portrait .g-array-item-image img {
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .ph-shadowbox .g-array-item-title {
        margin: 0;
        padding: 0 1vw;
        margin-top: 2vw;
        transition: .3s all ease-in-out;
    }

    .ph-shadowbox .g-item-title {
        margin: 0;
        padding: 0;
        border-bottom: none;
    }

    .ph-shadowbox .g-item-title a {
        margin: 0;
        padding: 0;
        pointer-events: none;
        color: var(--ph-title-color);
        font-family: var(--ph-title-font);
        font-weight: var(--ph-title-weight);
        text-transform: var(--ph-title-text-transform);
        font-size: var(--ph-title-font-size-desktop);
    }

    .ph-shadowbox .g-array-item-text {
        margin: 0;
        padding: 0 1vw;
        color: var(--ph-text-color);
        font-size: 1.25vw !important;
    }

    .ph-shadowbox .g-array-item-read-more {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        z-index: 5;
    }

    .ph-shadowbox .g-array-item-read-more a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        z-index: 5;
    }
}

/* Scoped Element Class */
.mass-times-block {
    padding: 2rem 1rem;
}

.mass-times-block .mass-boxes {
    gap: 2rem;
    align-items: stretch;
    justify-content: center;
}

.mass-times-block .mass-box {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 0;
    border: 1px solid rgba(161, 146, 87, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.mass-times-block .mass-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgb(161, 146, 87), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mass-times-block .mass-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(161, 146, 87, 0.12);
    border-color: rgba(161, 146, 87, 0.4);
}

.mass-times-block .mass-box:hover::before {
    opacity: 1;
}

.mass-times-block h1 {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(161, 146, 87, 0.2);
    display: block;
}

.mass-times-block h1:not(:first-child) {
    margin-top: 2.5rem;
}

.mass-times-block p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0;
}

.mass-times-block strong {
    color: #1a1a1a;
    letter-spacing: 0.02em;
}

.mass-times-block a {
    color: rgb(161, 146, 87);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

.mass-times-block a:hover {
    border-bottom-color: rgb(161, 146, 87);
    opacity: 0.8;
}

.mass-times-block em {
    font-size: 0.9rem;
    color: #888;
    display: block;
    margin-top: 0.5rem;
}

.mass-times-block span {
    display: inline-block;
}

/* Mobile Breakpoint */
@media (max-width: 50.99rem) {
    .mass-times-block .mass-boxes {
        flex-direction: column;
    }

    .mass-times-block .mass-box {
        padding: 2rem;
        flex-basis: auto;
    }

    .mass-times-block {
        padding: 2rem 1rem;
    }
}