@import url('//fonts.googleapis.com/css2?family=Allura&family=Arsenal:ital@0;1&family=Baskervville:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/************ TEMPLATE  ************
FONTS:
Fonts: Mrs Eaves, Optima, Allura, Arno Pro
equivalents: Baskerville, Arsenal, Allura and EB Garamond 
font-family: 'Allura', cursive;
font-family: 'Arsenal', sans-serif;
font-family: 'Baskervville', serif;
font-family: 'EB Garamond', serif;

BROWN Primary Color: #4a3032; rgba(74,48,50,1)
GREEN Secondary Color: #afb6ab; rgba(120,135,106,1)


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

.site-1 {
    --primary-color: #4a3032;
    --secondary-color: #afb6ab;

    --primary-rgb: 74,48,50;
    --secondary-rgb: 120,135,106;

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

    --title-font-family: 'Baskervville', serif;
    --body-font-family: 'EB Garamond', serif;
    --tertiary-font-family: 'Allura', cursive;

    --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);
	--title-border-bottom: none;
	
	--ph-title-font: var(--body-font-family);
	--hero-opacity: 1;
	--hero-img-height: 45vw;
	--hero-img-height-mobile: 45vw;
}

body p, p, li, td  {font-size: 1.3rem; letter-spacing: 1px;}
blockquote {border-left: none;}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a, .box4 .button {
    color: var(--primary-color);
	background: white;
    font-family: var(--body-font-family);
	letter-spacing: 3px;
	border-radius: 0;
	border: 2px solid var(--primary-color);
	font-weight: 500;
	font-size: 1.4rem;
} 
@media only screen and (min-width: 50.99rem){
	.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a, .box4 .button {
		padding: 0.8rem 4rem;
		min-width: 300px;
	}
}
@media only screen and (max-width: 50.99rem){
	.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a, .box4 .button {
		padding: 0.8rem 2rem;
		min-width: 200px;
	}
}

.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover, .listentobutton.moduletable a:hover {
    color: white;
	background: var(--primary-color);
    font-family: var(--body-font-family);
	letter-spacing: 3px;
	border-radius: 0;
	border: 2px solid var(--primary-color);
	font-weight: 500;
	font-size: 1.4rem;
	min-width: 300px;
}
@media only screen and (min-width: 50.99rem){
	.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover, .listentobutton.moduletable a:hover {
		padding: 0.8rem 4rem;
		min-width: 300px;
	}
}
@media only screen and (max-width: 50.99rem){
	.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover, .listentobutton.moduletable a:hover {
		padding: 0.8rem 2rem;
		min-width: 200px;
	}
}

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

.readmore .btn {
	text-transform: lowercase !important;
}

@media only screen and (min-width: 50.99rem){
body #g-page-surround {	
	background: white url(../images/template/background-pattern-rzd.jpg) 0% 50% no-repeat; 
	background-attachment: fixed; 
	background-size: 110%;
} }
@media only screen and (max-width: 50.99rem){
	body #g-page-surround {	
	background: white url(../images/template/background-pattern-rzd.jpg) 0% 50% repeat; 
	background-size: initial; 
	/*background-size: 200%;*/
} 
}

.site-home h1 {
	color: var(--primary-color);
	letter-spacing: 3px;
}
.site-1 h4 {
	font-family: var(--tertiary-font-family); 
	letter-spacing: 1px;
	}
span.dropcap {font-size: 2.5rem; /*font-style: italic;*/ line-height: 1; }
span.allura {font-family: var(--tertiary-font-family); font-size: 1.75rem}
.letterheading span.allura {font-family: var(--tertiary-font-family); font-size: 3.5rem}


h1.decorative {
    display: grid;
    grid-template-columns: auto minmax(10px, 1fr);
    align-items: center;
    font-size: 7vw;
    grid-gap: 40px;
    width: 100%;
    border-bottom: none;
    text-align: center;
}

h1.decorative:after {
    content: '';
    border-top: 1px solid var(--primary-color);
}
h1.before:before {
    content: '';
    border-top: 1px solid var(--primary-color);
}

@media only screen and (min-width: 50.99rem){
	.site-home h1 {
		font-size: 4.5vw;
	}
	.site-1 h1 {
		font-size: 4vw;
	}
	.site-1 h2.ma {
		font-size: 7vw; }

	.site-1 h2.sub {
		font-size: 2vw;
		margin-top: -2vw;
		line-height: 1;}

	.site-1 h4.big { 
		font-size: 5vw; 
		}
	.site-1 h4.ptitle { 
		font-size: 8vw; 
		}
	.site-1 h6 {
		color: var(--primary-color); 
		font-size: 3.5vw;
		}
	.commonquestions h6 {
		font-size: 2.5vw !important;
	}
	}
@media only screen and (max-width: 50.99rem){
	.site-home h1 {
		font-size: 10vw;
		}
	.site-1 h1 {
		font-size: 7vw;
	}
	.site-1 h2.ma {
		font-size: 12vw; }

	.site-1 h2.sub {
		font-size: 4vw;
		margin-top: -2vw;
		line-height: 1;}

	.site-1 h4.big { 
		font-size: 10vw; 
		}
	.site-1 h4.ptitle { 
		font-size: 14vw; 
		}
	.site-1 h6 {
		color: var(--primary-color); 
		font-size: 8vw;
		}
	.commonquestions h6 {
		font-size: 5vw !important;
	}
	
}
hr {
    border-bottom: 1px solid rgba(74,48,50,1);
}
hr.short { padding: 0; margin: 0 auto; width: 400px; }

/*************** HOMELAYOUT ***************/ 
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--primary-color);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 

/*************** NAVIGATION ***************/

.g-main-nav {
	font-family: var(--body-font-family);
	font-size: 1rem;
	}
.g-main-nav .g-toplevel {text-transform: uppercase;}

@media only screen and (min-width: 50.99rem){
	#g-navigation {
		background: white url(../images/template/header-background-rzd.png) 0% 50% no-repeat; 
		/*background-attachment: fixed; */
		background-size: 115%;
	}

	.site-1 #g-navigation .g-logo img {
		width: 72%;
		max-width: 675px;
	}
}

@media only screen and (max-width: 50.99rem){
	#g-navigation {
		background: white url(../images/template/header-background-rzd.png) 50% 50% no-repeat; 
		background-size: 220%;
		border-bottom: 1px solid var(--secondary-color);
	}}

/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem){
	.homelayout.swiper-box #g-slideshow > .g-container {
		padding: 0!important;
	}}

/*************** HEADER *******************/
@media only screen and (min-width: 50.99rem){
	#ourlifeimg .g-content {
		padding-right: 2rem;
		padding-bottom: 2rem;
	}
	#ourlife .g-content {
		padding: 2rem 3rem 2rem 2rem;
	}
}

	
@media only screen and (max-width: 50.99rem){
	#ourlifeimg .g-content {
		padding-right: 14vw;
		padding-bottom: 0.5rem;
	}
	#ourlife .g-content {
		padding: 3vw;
	}
}

/*************** ABOVE ********************/
@media only screen and (max-width: 50.99rem){
	#vocations .g-content, #vocationsimg .g-content, #vocationsbtn .g-content, #historyimg .g-content, #wwa-history .g-content  {
		padding: 3vw 0;
	}
}


/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
@media only screen and (max-width: 50.99rem){
	#charisms .g-content  {
		padding: 3vw 0;
	}
}

@media only screen and (max-width: 50.99rem) {
    #g-mainbar {
        padding: 0;
}}
/*************** FEATURE ******************/

@media only screen and (min-width: 50.99rem) {
    .ph-rec-row .g-array-item-image img {
        height: 12vw;
   }
}


/*************** MAIN *********************/
.seemlesswhite #g-container-main .g-content {
	padding-top: 0;
	margin-top: -3vw;
	margin-bottom: -3vw;
}
.nopaddingtop #g-container-main .g-content {
	padding-top: 0;
	margin-top: 0;}

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

.box4.moduletable, .box4.widget, .box4.g-outer-box, .box4>.g-content {
    background: var(--secondary-color);
    color: #4e3333;
    border: 4px solid var(--secondary-color);
}
#g-mainbar .g-grid:nth-child(4) .g-block .g-content-array {
	border: 1px solid white;
}

.box4 .button:hover {
	background: var(--primary-color);
	color: white;
}

#letusprayforyou img {
	max-width: 120%;
}

@media only screen and (max-width: 50.99rem){
	#letusprayforyou img {
		margin-bottom: -8rem;
}
}

@media only screen and (min-width: 50.99rem){
	.ph-rec-row .g-content-array > .g-grid {
		padding: 1vw 2vw;
	}
	.ph-rec-row .g-array-item {
		box-shadow: none;	
		border-bottom: none;
		max-height: 36vw;
		background: transparent;
	}
	.ph-rec-row .g-content-array .g-array-item .g-array-item-text {
		font-size: 1.4vw;
	}
}
@media only screen and (max-width: 50.99rem){
	.ph-default-mobile .g-array-item-image img {
		height: 20vh;
	}
	.ph-default-mobile :is(.g-array-item-image, .g-array-item) {
		margin-bottom: 0;
	}
	
	.ph-rec-row .g-content-array > .g-grid {
		padding: 1vw 2vw;
	}
	.ph-default-mobile .g-content-array > .g-grid > .g-block > .g-content {
		box-shadow: none;	
		border-bottom: none;
		/*max-height: 36vw;*/
		background: transparent;
	}
	.ph-rec-row .g-content-array .g-array-item .g-array-item-text {
		font-size: 4vw;
	}
}


/*************** EXPANDED *****************/ 
@media only screen and (max-width: 50.99rem){
	#prayforus .g-content, #visitus .g-content  {
		padding: 3vw 0;
	}
}

.box4 > div {
	background: var(--secondary-color);  
	padding: 2vw;
	}
.whiteborder {border: 2px solid white; padding: 3vw; }

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/

.negativebottommargin {margin-bottom: -18vw; z-index: 10;}
#donatedivs .g-content-array .g-array-item .g-array-item-text {font-size: 2rem;}

#g-bottom .bottom-image img {width: 100%;}

/*************** FOOTER *******************/

#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 
@media only screen and (min-width: 50.99rem){
	#g-footer {
	background: white url(../images/template/footer-background-rzd.jpg) 0% 50% no-repeat; 
	/*background-attachment: fixed; */
	background-size: 100%;
	}
	
	.site-1 #g-footer .g-joomla-articles .g-content {
		padding: 0;
	}

}
@media only screen and (max-width: 50.99rem){
	#g-footer .g-content {
		padding: 0;
	}
	#g-footer {
		background: white url(../images/template/footer-background-rzd.jpg) 50% 50% no-repeat; 
		background-size: cover;
	}}

/*************** 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);
} 

.commonquestions .layout-slideshow .sprocket-features-img-container img {
	    width: 800px;
}

.layout-slideshow .sprocket-features-arrows .arrow {
    font-size: 4rem;
}
.layout-slideshow .sprocket-features-arrows .arrow {
    background: none;
    box-shadow: none;
}

.moduletable .category-module {
	padding: 1rem;
	border: 0px solid white;
		}
.moduletable .category-module li {
	padding-bottom: 0.25rem;
	border-bottom: 0px solid white;
	list-style-type: circle !important;
}
.moduletable .category-module li a {
	display: block;
}
.mod-articles-category-date {
	padding-left: 10px;
	font-size: 0.9rem;
}


/*************** SECTIONS *****************/


/****************donate page match the shrine site *********************/
#hero-title-text.decorative {
    display: grid;
    grid-template-columns: auto minmax(10px, 1fr);
    align-items: center;
    font-size: 5vw;
    grid-gap: 40px;
    width: 85%;
    border-bottom: none;
    text-align: center;
    text-transform: none!important;
    font-variant-caps: normal!important;
    font-weight: 400;
    font-style: italic;
	/*font-family:  var(--body-font-family);*/
}
#hero-title-text.decorative:after {
    content: '';
    border-top: 1px solid var(--primary-color);
}

.heroincontent #g-mainbar .g-content {padding-top: 0; margin-top: 0;}


.donatepage {
    --hero-title-top-position: 5%;
    --hero-title-left-position: 10%;
    --hero-title-bottom-position: unset;
    --hero-title-font-family: var(--body-font-family);
}

.donatepage .herotitlepage .page-header {
    display: none !important;
}

.donatepage h3 {
	font-family: var(--heading-font-family) !important; 
    font-size: var(--h3-font-size)  !important;
	line-height: inherit !important;
	font-weight: 400 !important;
}


.minus10, .platform-content .moduletable.minus10  {  margin: 0 calc(-10vw - 20px); }
.plus10, .platform-content .moduletable.plus10 {  margin: 0 10vw; }
.fullwidthpic { width: 100%;}
img.fullwidth { width: 100%;}

.mtable .sprocket-lists-pagination-hidden {display: none;}


.flexrow > .moduleside { flex-basis: 35%;}
.flexrow > .fiftypercent { flex-basis: 50%;}

@media only screen and (min-width: 50.99rem) {
	.flexrow div.imageside:first-child, .flexrow div.moduleside:first-child { padding-right: 30px;}
	.flexrow div.imageside:last-child, .flexrow div.moduleside:last-child { padding-left: 30px;}
	
	.flexrow > .three-quarters { flex: 3;}
	.flexrow > .imageside { flex: 2;}
	.flexrow > div { order: 2; }
	
}
@media only screen and (max-width: 50.99rem) {
	.flexrow > .three-quarters { order: 2; }
	.flexrow > .imageside { order: 1; }
}
/************ FLEX ITEM  ************/
.flexcolumn { display: flex; flex-direction: column; }
.flexcolumn > div { flex: 1;}
.flexcenter { display: flex; align-items: center; justify-content: center;}

/************ FLEX ITEM  ************/
.flexrow { display: flex; align-items: center; justify-content: center;   }
.flexrow > div { flex: 1;}

@media only screen and (max-width: 50.99rem) {
	.flexrow { flex-direction: column; }
}

.bback { background: var(--primary-color); padding: 20px; margin-top: 0; margin-bottom: 0; }
.greenback { background: var(--secondary-color); padding: 20px; margin-top: 0; margin-bottom: 0; }
.whiteback { background: white; /*padding: 20px;*/ margin-top: 0; margin-bottom: 0; } 



@media only screen and (max-width: 50.99rem) {
    #g-container-main {
        margin: 0;
        padding: 0;
    }
    .plus10, .platform-content .moduletable.plus10 {padding: 0 calc(1vw + 10px);}
    .minus10, .platform-content .moduletable.minus10   {margin: 0 calc(-15vw - 15px);}
}


.bback p, .bback li, .bback h1, .bback h2, .bback div .bback h3, .bback h4, .bback h5, .bback h6  { color: #ffffff; }
.toi p, .toi li, .toi h1, .toi h2, .toi div .toi h3, .toi h4, .toi h5, .toi h6 {text-shadow: 5px 5px 10px rgba(0,0,0,.5); color: #ffffff; }
.greenback p, .greenback li, .greenback h1, .greenback h2, .greenback div .greenback h3, .greenback h4, .greenback h5, .greenback h6, .greenback td  { color: var(--primary-color); }


.bback a:not(a.creambutton) {color: white;}
.greenback a {color: var(--primary-color); }
.bback a:hover {color: var(--secondary-color); }
.greenback a:hover  {color: white; }

.visitpage .bback a {color: var(--primary-color); border: 1px solid var(--secondary-color);}
.visitpage .bback a:hover {border: 1px solid var(--secondary-color);}
.padright { padding-right: 30px;}
.padleft { padding-left: 30px;}

.greenstrip {background: url(../images/stories/template/greenstrip.png) 0% 0% no-repeat;  }
.greenstrip h1, .ourlifequotes h1 {font-size: clamp(2.75rem, 4.7vw, 4.5rem); margin: -0.5vw 0; line-height: 6vw;}
.greenstrip h2, .ourlifequotes h2 {font-size: clamp(1.25rem, 2.7vw, 1.5rem); margin-top: 0; letter-spacing: 1px;}
.greenstrip h4, .ourlifequotes h4 {font-size: clamp(2.25rem, 3.7vw, 2.75rem); margin-bottom: -0.5vw;}

.branchstrip {background: url(../images/stories/template/branch-background.jpg) 0% 0% no-repeat;  }
.leavesstrip {background: url(../images/stories/template/vv-leaves.jpg) 0% 0% no-repeat;  }

.leavesstrip p {font-size: 1.5rem;}

@media only screen and (min-width: 50.99rem) {
	.greenstrip {background-size: 100%; }
	.branchstrip {background-size: 100%; }
	.leavesstrip {background-size: 100%; }
}

@media only screen and (max-width: 50.99rem) {
    .padright {padding-right: 5px;}
    .padleft {padding-left: 5px;}
	.greenstrip h1 {line-height: 10vw;}
	.greenstrip {background-size: 150%; }
}

p.csscode {background-color: #f7f7f7;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.938rem; margin: 0 0 1.5rem;
	border-radius: 0.1875rem;
	font-family: "Menlo", "Monaco", monospace;
	clear: both;
} 


table, td {
	border: 0px solid transparent;}
td {padding: 0.15rem;}
.equaltable td {padding-left: 0.5rem; padding-right: 0.5rem; }



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

.greenback h4 {
	font-size: clamp(3rem, 6vw, 7rem) !important;
}

.greenback p span {
	font-size: clamp(1.5rem, 2.35vw, 3rem) !important;
}

.ourlifequotes h1 {
	line-height: 1.2;
}