@import url('//fonts.googleapis.com/css2?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&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/************ TEMPLATE  ************
R2V1 - https://stpat-wichita-mockup.forge.solutiosoftware.com/st-patrick-mockup-r2v1
M1 - https://stpat-wichita-mockup.forge.solutiosoftware.com/mockup-8
M2 - https://stpat-wichita-mockup.forge.solutiosoftware.com/st-patrick-mockup-2
Rotator Size: Wide 1600x900
News, Mass times side pic: Square 1200x1200

/************ FONTS  ************
Serif: Spectral (M1, R2V1), Julius Sans One (M2)
Sans Serif: Montserrat

/************ COLORS  ************
Green: #256400; rgb(37, 100, 0)
Grey (M1 secondary): #bdbdbd; rgb(189, 189, 189)
White (M2 primary): #ffffff; rgb(225,225,225)

/************ NOTES ************

************/

.site-1 {
    --primary-color: #256400;
    --secondary-color: #ffffff;

    --primary-rgb: 37,100,0;
    --secondary-rgb: 255,255,255;

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

    --title-font-family: 'Spectral', 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);

    --rok-mini-badge: var(--primary-color);
    
    --ph-text-font-size-desktop: 1vw;
    --ph-title-weight: 400;
    --ph-title-font: var(--body-font-family);
    --ph-title-font-size-mobile: 4vw;
}

.site-1 .ql-fa-toplinks {
    --ql-title-color: var(--primary-color);
}

.site-1 .ql-swiper-side {
    --ql-font-size-desktop: .9vw;
    --ql-background-color: rgba(255,255,255,.85);
    --ql-background-hover: rgba(255,255,255,1);
    --ql-title-color: var(--primary-color);
}

.site-2 {
    --primary-color: #256400;
    --secondary-color: #ffffff;

    --primary-rgb: 37,100,0;
    --secondary-rgb: 255,255,255;

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

    --title-font-family: 'Spectral', 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);

    --rok-mini-badge: var(--primary-color); 
    
    --ph-text-font-size-desktop: 1vw;
    --ph-title-weight: 400;
    --ph-title-font: var(--body-font-family);
    --ph-title-font-size-mobile: 4vw;
}

.site-2 .ql-fa-toplinks {
    --ql-title-color: var(--primary-color);
}

.site-2 .ql-swiper-side {
    --ql-font-size-desktop: .9vw;
    --ql-background-color: rgba(255,255,255,.85);
    --ql-background-hover: rgba(255,255,255,1);
    --ql-title-color: var(--primary-color);
}

h6 {
    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(--primary-color);
    font-family: var(--body-font-family);
} 

/*************** ALL SITE *****************/
.item-image {display: none;}

/*************** HOMELAYOUT ***************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-page-surround {
        background: url('/images/template/header.png') 390% 0% no-repeat, var(--primary-color);
        background-size: 88%;
    }
    .site-2 #g-page-surround {
        background: url('/images/template/header.png') 390% 0% no-repeat, var(--primary-color);
        background-size: 88%;
    }
}

/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: white;} 
.g-offcanvas-toggle .fa-fw {text-shadow: 2px 2px 2px #000000;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-navigation {
        background: transparent;
    }
    .site-1 #g-navigation .g-logo {
        padding: 0 2vw;
    }
    .site-1 #g-navigation .g-logo img {
        width: 55%;
    }

    .site-2 #g-navigation {
        background: transparent;
    }
    .site-2 #g-navigation .g-logo {
        padding: 0 2vw;
    }
    .site-2 #g-navigation .g-logo img {
        width: 55%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation .g-logo {
        max-width: 65%;
        margin: 1rem auto;
    }
    .site-1 #g-navigation {
        background: var(--primary-color);
    }

    .site-2 #g-navigation .g-logo {
        max-width: 65%;
        margin: 1rem auto;
    }
    .site-2 #g-navigation {
        background: var(--primary-color);
    }

    .g-offcanvas-toggle {
        position: fixed;
        top: 20px;
        left: 20px;   
    }
}
/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-slideshow {
        background: transparent;
    }

    .site-2-home #g-slideshow {
        background: transparent;
    }

    .ql-swiper-side {
        max-height: var(--swiper-height)!important;
        overflow: hidden;
        margin: auto 0;
    }
    .ql-swiper-side .g-blockcontent {
        width: 80%;
        margin: 0 auto;
    }
    .ql-swiper-side .g-blockcontent-subcontent {
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }
    .ql-swiper-side .g-blockcontent-subcontent-block {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: var(--ql-background-color);
        padding: 1vw;
        transition: var(--default-transition);
        box-shadow: var(--default-box-shadow);
    }
    .ql-swiper-side .g-blockcontent-subcontent-block-content {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        color: var(--ql-title-color);
        font-size: var(--ql-font-size-desktop);
    }
    .ql-swiper-side .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        font-size: var(--ql-font-size-desktop);
        font-weight: var(--ql-title-weight);
    }
    .ql-swiper-side .g-blockcontent-buttons {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-buttons a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-subcontent-block:hover {
        background: var(--ql-background-hover);
        transform: scale(1.05);
    }
}

@media only screen and (max-width: 50.99rem) {
    .ql-swiper-side {
        max-height: auto;
        overflow: hidden;
        margin: auto 0;
    }
    .ql-swiper-side .g-blockcontent {
        width: calc(100% - 2rem);
        margin: 1rem;
    }
    .ql-swiper-side .g-blockcontent-subcontent {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .ql-swiper-side .g-blockcontent-subcontent-block {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: var(--ql-background-color);
        padding: 1rem;
        transition: var(--default-transition);
        box-shadow: var(--default-box-shadow);
    }
    .ql-swiper-side .g-blockcontent-subcontent-block-content {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
        color: var(--ql-title-color);
        font-size: var(--ql-font-size-mobile);
    }
    .ql-swiper-side .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        font-size: var(--ql-font-size-mobile);
        font-weight: var(--ql-title-weight);
    }
    .ql-swiper-side .g-blockcontent-buttons {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-buttons a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
        margin: 0;
        padding: 0;
    }
    .ql-swiper-side .g-blockcontent-subcontent-block:hover {
        background: var(--ql-background-hover);
        transform: scale(1.05);
    }
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
@media only screen and (min-width: 50.99rem) {
    .mt-container .g-array-item {
        display: flex;
        flex-direction: row;
    }
    .mt-container .g-array-item-image {
        order: 2;
        flex: 34%;
        margin: 0;
        padding: 0;
    }
    .mt-container .g-array-item-text {
        order: 1;
        flex: 66%;
    }
    .mt-container .g-array-item-text > h1 {
        text-transform: uppercase;
    }
    .mt-wrapper :is(h1,h2,h3,h4,h5,h6) {
        color: var(--primary-color);
        font-size: 2vw;
        font-weight: 500;
        font-family: var(--title-font-family);
        font-variant-caps: small-caps;
        text-transform: none;
    }
    .mt-wrapper p {
        color: var(--default-black);
        font-size: 1vw;
    }
    .mt-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1vw 1vw;
        padding: 1vw 2vw;
    }
    .mt-wrapper > div {
        flex: 45%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .mt-container .g-array-item {
        position: relative;
    }
    .mt-container .g-array-item-image {
        order: 2;
        flex: 34%;
        margin: 0;
        padding: 0;
    }
    .mt-container .g-array-item-text {
        margin: 0;
        padding: 1rem;
        order: 1;
        flex: 66%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: rgba(255,255,255,.85);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .mt-container .g-array-item-text > h1 {
        text-transform: uppercase;
    }
    .mt-wrapper :is(h1,h2,h3,h4,h5,h6) {
        color: var(--primary-color);
        font-size: 4vw;
        font-weight: 500;
        font-family: var(--title-font-family);
        font-variant-caps: small-caps;
        text-transform: none;
    }
    .mt-wrapper p {
        color: var(--default-black);
        font-size: 2.25vw;
    }
    .mt-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1vw 1vw;
        padding: 1vw 2vw;
    }
    .mt-wrapper > div {
        flex: 45%;
    }
}

/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
.parish-home #g-container-main {
    padding: 0 5%;
}

@media only screen and (min-width: 50.99rem) {
    .ph-sidepics-3 .g-array-item-title {
        align-items: center;
    }
    .ph-sidepics-3 .g-array-item-read-more {
        opacity: 0;
    }
    .ph-sidepics-3.ph-square .g-array-item {
        grid-template-rows: 40% 60% 0%;
    }
    .ph-sidepics-3 .g-title {
        border: none!important;
    }

    .site-1-home #g-container-main .g-title {
        font-size: 2vw;
        border-bottom: 1px solid var(--primary-color);
    }

    .site-2-home #g-container-main .g-title {
        font-size: 2vw;
        border-bottom: 1px solid var(--primary-color);
    }
}

@media only screen and (max-width: 50.99rem) {
    .ph-sidepics-3 .g-array-item-title {
        align-items: center;
    }
    .ph-sidepics-3 .g-array-item-read-more {
        opacity: 0;
    }
    .ph-sidepics-3.ph-square .g-array-item {
        grid-template-rows: 40% 60% 0%;
    }
    .ph-sidepics-3 .g-title {
        border: none!important;
        text-align: center;
    }

    .site-1-home #g-container-main .g-title {
        font-size: 7vw;
        border-bottom: 1px solid var(--primary-color);
        font-weight: 400;
    }

    .site-2-home #g-container-main .g-title {
        font-size: 7vw;
        border-bottom: 1px solid var(--primary-color);
        font-weight: 400;
    }

    .ph-sidebyside-mobile .g-array-item-title {
        padding: 1rem;
    }
}

/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        background: url('/images/template/paralax.jpg') 50% 50% no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .site-1-home #g-expanded > .g-container {
        background: rgba(var(--primary-rgb),.7);
        padding: 3vw 5%!important;
    }

    .site-2-home #g-expanded {
        background: url('/images/template/paralax.jpg') 50% 50% no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .site-2-home #g-expanded > .g-container {
        background: rgba(255,255,255,.8);
        padding: 3vw 5%!important;
    }

    .social-boxes-wrapper {
        display: flex;
        flex-direction: row;
        gap: 2vw; 
    }
    .social-boxes-wrapper iframe {
        box-shadow: var(--default-box-shadow);
    }
    .social-boxes-wrapper > div {
        flex: 45%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .social-boxes-wrapper > div > div {
        text-align: center;
    }
    .social-boxes-wrapper h1 {
        color: var(--default-white);
        font-size: 3vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded {
        background: url('/images/template/paralax.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .site-1-home #g-expanded > .g-container {
        background: rgba(var(--primary-rgb),.7);
        padding: 3rem 5%!important;
    }

    .site-2-home #g-expanded {
        background: url('/images/template/paralax.jpg') 50% 50% no-repeat;
        background-size: cover;
    }
    .site-2-home #g-expanded > .g-container {
        background: rgba(0,0,0,.65);
        padding: 3rem 5%!important;
    }

    .social-boxes-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2vw; 
    }
    .social-boxes-wrapper > div {
        flex: 45%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .social-boxes-wrapper > div > div {
        text-align: center;
    }
    .social-boxes-wrapper h1 {
        color: var(--default-white);
        font-size: 6vw;
    }
	.site-2 #g-expanded h3 {
		color: white;
	}
	.site-2 .rok-mini-particle .rme-description {
		color: white;
	}
	
	
}



/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

#g-footer a:is(:hover, :active, :focus) {
    transition: all 300ms ease-in-out;
    color: #cfcfcf;
}

@media only screen and (min-width: 50.99rem) {
    #g-footer :is(h1,h2,h3,h4,h5,h6) {
        font-size: 2.5vw;
    }
    :is(.site-1, .site-2) #g-footer .footer-logo img {
        margin-top: -6vw;
    }

    .site-2 #g-footer .footer-logo img {
        margin-top: -7vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .footer-logo > .g-content {
        margin: 0;
        padding: 0;
    }
    .footer-logo .g-logo {
        text-align: center;
    }
    .footer-logo img {
        max-width: 50%;
    }
    .web-policy {
        justify-content: center;
    }
}

/*************** 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);
} 
.moduletable .nav.menu {
    box-shadow: var(--default-box-shadow);
}
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/

.grid.grid-staff .g-array-item-image a {
    pointer-events: none;
}

.side-menu-particle {
    box-shadow: var(--default-box-shadow);
}

.side-menu-particle .g-blockcontent-subcontent-title-text {
    color: #abacab;
}

@media only screen and (min-width: 50.99rem) {
    .bilingual {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 2vw;
    }
    .bilingual .englishtext {
        flex: 1;
    }
    .bilingual .spanishtext {
        flex: 1;
        font-style: italic;
    }
}

@media only screen and (max-width: 50.99rem) {
    .bilingual {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .bilingual .englishtext {
        flex: 1;
    }
    .bilingual .spanishtext {
        flex: 1;
        font-style: italic;
    }
}


#custom-8284-particle, #custom-3137-particle {
    padding: 0;
    margin: 0;
}