@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:wght@400;700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Lato

/************ COLORS  ************
Burgandy: #862800; rgba(134,40,0,1)
Light Brown: #B3937D; rgba(179,147,125,1)

/************ NOTES ************
Menu bar - burgandy at 85% - rgba(134,40,0,.85)
Rotator Text background - light brown at 85% - rgba(179,147,125,.85)
Quicklinks - burgandy at 80% - rgba(134,40,0,.8)

Facebook widget:
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FHoly-Name-of-Jesus-Catholic-Church-105402067528&tabs=none&width=340&height=130&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="340" height="130" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
********************************/

body {color: #333; font-family: 'Lato', sans-serif;}

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p { line-height: 1.3;}

h1 {color: #862800; font-size: 3.5rem; font-weight: bold; font-family: 'Cinzel', serif;}

h2, .page-header h2 { font-variant-caps: small-caps; color: #B3937D; font-size: 2.2rem; font-family: 'lato', sans-serif;  font-weight: bold; border-bottom: 1px solid #cdbe79;  line-height: 1.3; margin: 0 0 10px 0;}
h3 { color: #862800; font-size: 1.8rem; font-family: 'Cinzel', serif;}
h4 {background: #B3937D; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem; font-family: 'lato', sans-serif;}
h5 { color: #862800; font-size: 1.8rem; font-family: 'lato', sans-serif;}
h6 {color: #B3937D; font-size: 1.4rem; text-transform: uppercase; font-weight: bold; font-family: 'Cinzel', serif; }
a { color: #862800; }
a:hover { color: black; }


@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 { font-size: 2.2rem; } 
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.75rem; }
    h5 { font-size: 1.2rem; }
    h6 { font-size: 1.2rem; }
    p { font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 { line-height: 1.2; }
    h4, h5, h6, p{ line-height: 1.1; }
}

@media only screen and (max-width: 767px) {
 h1 { font-size: 2.2rem; } 
 h2 { font-size: 1.75rem; }
 h3 { font-size: 1.75rem; }
 h4 { font-size: 1.75rem; }
 h5 { font-size: 1.2rem; }
 h6 { font-size: 1.2rem; }
 p { font-size: 1rem; margin-bottom: 4px;}
 h1, h2, h3 { line-height: 1.2; }
 h4, h5, h6, p{ line-height: 1.1; }
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
	background: #862800;
}

/************ HOMELAYOUT *********/
.homelayout h3.g-title {
	font-family: 'Cinzel', serif;
	font-weight: 400;
	font-size: 1.5rem;
	background: #B3937D;
	color: #ffffff;
	border-radius: 5px;
	padding: .5vw 0vw;
}

/************ TOP ****************/
#g-top {
	background: url('/images/stories/template/bg-exterior1.jpg') -1% 0% no-repeat; padding: 0 5% 0 10%;
}

.homelayout #g-top {
	padding-bottom: 50vw;
}

#g-top .button {
	background: #B3937D;
	margin-top: 6vw;
	margin-bottom: -6vw;
}

#g-top .button:hover {
	background: #862800;
}

@media only screen and (max-width: 767px){
	/*#g-top {background: #862800;}*/
	.homelayout #g-top {padding-bottom: 0 !important;}
	.g-logo img {width: 100%;}
	
}

/************ NAVIGATION *********/
#g-navigation {padding: 0 2%;}
.homelayout #g-navigation {
	background: rgba(134, 40, 0, 0.85);
	margin-top: -50vw!important;
}

#g-navigation .g-menu-item-title {font-weight: bold;}

#g-navigation form {    margin-bottom: 0px;}
#g-navigation input[type="text"], #g-navigation input[type="search"] {
    background-color: rgba(0, 0, 0, 0.0);
    border: 2px white solid;
    color: white;
}

@media only screen and (max-width: 767px){
	.homelayout #g-navigation {margin-top: 0vw!important}
	#g-navigation {border-top: 2px solid #862800;}
}

.search #searchForm .btn, #searchForm .btn {background: #862800; border: 1px solid #862800;}
.search #searchForm .btn:hover {border-color: #862800; color: #862800 !important; }
.search #searchForm a.btn:hover {border-color: #862800; color: #862800 !important; }


/************ SHOWCASE ***********/
		/*Rotator*/
.homelayout #g-showcase .sprocket-features-desc h3 {color: #ffffff; border-bottom: none; font-size: 2vw; margin-bottom: 0;}
.homelayout #g-showcase .sprocket-features-desc p {color: #ffffff;}
.homelayout #g-showcase .sprocket-features-container {padding-left: 4vw; padding-right: 4vw;}
.homelayout #g-showcase .sprocket-features-desc {padding-left: 1vw;}
.scseperateback .sprocket-features-content {
    background: rgba(179,147,125,.85);
}

@media only screen and (max-width: 767px){
	.scthird .layout-showcase .sprocket-features-content, .schalf .layout-showcase .sprocket-features-content{
		width: 100%;
	}
	.homelayout #g-showcase .sprocket-features-container{
		padding-left: 0vw; padding-right: 0vw;
	}
	.schalf .sprocket-features-container, .scthird .sprocket-features-container{
		align-items: inherit;
	}
	.homelayout #g-showcase .sprocket-features-desc h3{
		font-size: 1.5rem;
	}
}

/************ UTILITY ************/
		/*QUICKLINKS*/
.homelayout #g-utility h4 {background: none;}
.qloverlaybackpic .sprocket-strips-content {	background: rgba(134,40,0,.8); }
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(134,40,0,.9);}

@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover { background: rgba(134,40,0,.8); }
	.qloverlaybackpic li { background: rgba(126,20,22,1);; }
    .qloverlaybackpic li:hover {background: black;}
}

/************ EXPANDED ***********/
		/*NEWS*/
.rsphotoblocknews .sprocket-strips-item .readon:hover { background: rgba(179,147,125,.85); }
.rsphotoblocknews .sprocket-strips-content h4 {background: rgba(179,147,125,.85); justify-content: left; text-align: left;}
.rsphotoblocknews .sprocket-strips-item { background-image: url(/images/stories/template/default-news.jpg); }

@media only screen and (max-width: 767px) { 
	.rsphotoblocknews .sprocket-strips-content h4, .rsphotoblocknews .sprocket-strips-item .readon:hover { top: 0; background: #174C72; } 
}

/************ EXTENSTION *********/
.homelayout #g-extension h4 {
	background: none;
}

/************ FOOTER *************/
#g-footer h5 {	color: #ffffff;	font-family: 'Cinzel', serif;}
#g-footer p {color: #ffffff;}
#g-footer .button {border: 1px solid #ffffff;}
#g-footer {border-top: none;}

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #862800; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #862800;
	background: #B3937D;
}

/************ SECTIONS  ************/
#g-footer a { color: white; }
.homelayout #g-container-main {display: none;}


.newslayout #g-mainbar img {max-width: 30vw; }
@media only screen and (max-width: 767px) {
	.newslayout #g-mainbar img {max-width: 100%; }
}

.fancytable th, .contactinfo th, .infotables th {color: white; padding: 5px; background: #333333; border: 1px solid #333333;}
.fancytable td, .contactinfo td, .infotables td {padding: 5px 10px; border: 1px solid #333333}
.k-ui-namespace .mod_docman.mod_docman--documents {display: block;}


/************ MOBILE  ************/
.g-offcanvas-toggle { color: #862800; }

/************ ADS  ************/


.fb-img {
	border-radius: 10px;
	transition: 0.2s;
}

.fb-img:hover {
transition: 0.5s;
transform: scale(0.98);
}