@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Marcellus&display=swap');
/************ TEMPLATE  ************
For Joel:
-Remove Latin Mass and add Nigerian Mass and Syro Malabar Rite Mass
-Add instagram to social in menu
-It is possible that after building they all may want a different font for the Mass times area to make it stand out more and a different overlay color over the stained glass window instead of gray ("something more appealing") 
-NOTE: USE PORTRAIT CARD HEADLINES LOOK FROM MOCKUP 3
- Superwide - Rotator, Ministry 
- Standard-Landscape - QL
- Standard-Portrait - News
-------------------------------------
Mockup #1 - Marcellus, Lato
https://stpeter-lex-mockup.forge.solutiosoftware.com/stpeter-mockup-1
Dark Blue: #06416f; rgba(6,65,111,1)
Gold: #d3c177; rgba(211,193,119,1)
Lightest Tan: #f6f0ea; rgba(246,240,234,1)
===================
St. Peter Catholic Church
145 Barr St, Lexington, KY 40507 | 859-252-7551 | stpeter@cdlex.org
Office: 125 Barr St | Office Hours: Mon-Fri - 8:00am-4:00pm
===================
Nestled in the heart of downtown Lexington, Kentucky, we are one of the earliest Roman Catholic parishes in the area.  Our family of faith has been a source of guidance, support, and sanctuary for thousands of God’s people for over 200 years.

We gather to worship, learn, reach out in service, and be Christ for one another.  Come join us as we celebrate together in Christ.
===================
Weekend Mass
Saturday - 5:30pm
Sunday - 8:30am, 11:00am

Daily Mass
Tues, Thurs - 9:00am
Wed, Fri - 12:00pm

Confession
Wed, Fri - 11:10-11:50am
Anytime by Appointment: 859-252-7551

Adoration
Wed, Fri - 11:00-11:50am

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

.site-1 {
    --primary-color: #06416f;
    --secondary-color: #d3c177;
    --third-color: #f6f0ea;

    --primary-rgb: 6,65,111;
    --secondary-rgb: 211,193,119;
    --thrid-rgb: 246,240,234;

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

    --title-font-family: 'Marcellus', serif;
    --body-font-family: 'Lato', 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 15px rgba(0,0,0,.3);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-title-color: var(--default-white);
    --ql-font-size-desktop: 2vw;
}



.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;
} 

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

/*************** 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) {
	.site-1 #g-navigation {
		background: url('/images/template/rose-header.jpg') 0% 0% no-repeat;
        background-size: cover;
        background-position: center;
	}
    #g-navigation .g-logo {
        margin: 1rem auto;
    }
    #g-navigation .g-logo img {
        width: 50%;
    }

    .site-1 #g-navigation .g-social-items a {
        margin-right: 1vw;
    }

}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation .g-logo {
        max-width: 70%;
        margin: 1rem auto;
    }
}
/*************** SLIDESHOW ****************/ 
.swiper-navigation {
    display: none;
}
.r-overlay .g-content-array {margin: 0; height: 100%;}
.r-overlay > .g-content.g-particle {height: 100%;}
.r-overlay .g-content-array > .g-grid {height: 100%;}
.r-overlay .g-content-array > .g-grid > .g-block {height: 100%;}
.r-overlay .g-content-array > .g-grid > .g-block > .g-content {height: 100%;}
.r-overlay .g-array-item-text {margin: 0; padding: 2vw;}
.r-overlay :is(h1,h2,h3,h4,h5,h6,p) {color: var(--default-white); text-shadow: 1px 1px var(--default-black); letter-spacing: 1px;}
.r-overlay :is(h1,h2,h3,h4,h5,h6) {font-size: 2.5vw; text-transform: none; font-variant-caps: normal;}
.r-overlay p {font-size: 1.2vw;}
.r-overlay a.button {background: none; text-shadow: 1px 1px #000000; border: 1px solid var(--default-white); font-family: var(--title-font-family); font-weight: 400; border-radius: 0; width: 100%; font-size: 1.5vw; padding: 1vw 0;}
.r-overlay a.button:hover {background: var(--primary-color);}
.swiper-overlay-text > .g-container {position: relative; height: 42vw!important; width: 100%;}
.swiper-overlay-text > .g-container > .g-grid:nth-child(1) {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;}
.swiper-overlay-text > .g-container > .g-grid:nth-child(2) {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 30%; 
    z-index: 20;
}
.site-1-home .swiper-overlay-text > .g-container > .g-grid:nth-child(2) {
    background: linear-gradient(to right, rgba(var(--secondary-rgb),.9), rgba(var(--secondary-rgb),.5) 85%, rgba(var(--secondary-rgb),0) 100%);
}

@media only screen and (max-width: 50.99rem) {
    .swiper-overlay-text > .g-container {position: initial; height: auto!important;}
    .swiper-overlay-text > .g-container > .g-grid:nth-child(1) {position: initial;}
    .swiper-overlay-text > .g-container > .g-grid:nth-child(2) {position: initial; width: 100%; background: var(--secondary-color)!important;}

    .r-overlay :is(h1,h2,h3,h4,h5,h6) {font-size: 2rem;}
    .r-overlay p {font-size: 1.2rem;}
    .r-overlay a.button {font-size: 1.2rem; padding: 3vw 0;}
}
.mass-times-block {
	background: none;
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility {
        padding: 1vw 10%!important;
    }

    .site-1-home #g-utility h1 {
        font-family: var(--title-font-family);
        font-size: 4vw;
    }

    .site-1-home #g-utility .button {
        background: transparent;
        border: 1px solid var(--primary-color);
        border-radius: 0;
        color: var(--primary-color);
        font-size: 1.5vw;
        padding: 1vw 2vw;
    }

    .site-1-home #g-utility .button:hover {
        background: var(--primary-color);
        color: var(--default-white);
    }

}

/*************** FEATURE ******************/
@media only screen and (min-width: 50.99rem) {
    .ql-inner-box .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
        font-weight: 400;
    }
}

/*************** MAIN *********************/

@media only screen and (min-width: 50.99rem) {
    .ph-sidepics-3 .g-title {
        border-bottom: 1px solid var(--secondary-color);
        font-size: 3vw;
        font-family: var(--title-font-family);
        font-weight: 400;
        text-transform: none;
        font-variant-caps: normal;
    }

    .ph-sidepics-3 .g-content-array > .g-grid {
        background: transparent;
    }
    .site-1 #g-aside {
        background: transparent;
    }
    .site-1 #g-container-main {
        background: url('/images/template/rose-watermark.jpg') 100% 100% no-repeat;
        background-size: 50%;
    }
    .ph-sidepics-3.ph-underline .g-content-array > .g-grid {
        border-bottom: 1px solid var(--secondary-color);
    }
}


.site-1-home #g-container-main {
    padding: 0 5%;
}

/*************** EXPANDED *****************/ 

.site-1-home #g-expanded .g-array-item-text :is(h1,h2,h3,h4,h5,h6,p) {
    color: var(--default-white);
}

.site-1-home #g-expanded {
    background: url('/images/template/parallax3.jpg') 0% 0% no-repeat;
    background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

.site-1-home #g-expanded > .g-container {
    background: rgba(var(--primary-rgb),.6);
    padding: 5vw 5%!important;
	width: 100%;
}
.site-1-home .social-feed {padding: 0 2vw;}


@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded > .g-container {
        padding: 5vw 0!important;
    }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension .g-title {
        border-bottom: 1px solid var(--secondary-color);
        font-variant-caps: normal
    }
    .site-1-home #g-extension > .g-grid > .g-block {
        padding: 2vw;
    }
    .site-1-home #g-extension > .g-grid > .g-block > .g-content {
        height: 100%;
        padding: 1vw 2vw;
        background: var(--default-white);
        box-shadow: var(--default-box-shadow);
    }
}

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

#g-footer .button {
    border: 1px solid var(--default-white);
    min-width: 10vw;
    width: 60%;
    font-size: 1vw;
    border-radius: 0;
}

#g-footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
}
#g-footer .footer-links p {
    text-align: left;
}
#g-footer p {
    font-family: var(--body-font-family);
    text-align: left;
}

@media only screen and (max-width: 50.99rem) {
    #g-footer .button {
        font-size: 1rem;
    }
}

/*************** 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) {
    .site-1-sub a.button {
        margin-bottom: 1rem;
    }


    .grid-staff .g-array-item-text {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}