@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,400;1,700&display=swap');

/************ 
*** TEMPLATE ***
Rotator Size: 1000x563 (wide, 16:9)

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

*** COLORS ***
Red: #720b02; rgba(114,11,2,1)
Grey: #a7a9ac; rgba(167,169,172,1)
Light Grey: #f1f2f2; rgba(241,242,242,1)
Black (Headings): #000000

*** NOTES ***
*The Grey is only really used in the logo, but it's provided if you find you want to use it in other places like subpage headings
*Menu and QL are red at 80% - rgba(114,11,2,.9)

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

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: #720b02; font-size: 3.5rem; /*font-weight: bold;*/ font-family: 'Cinzel';}
.page-header h1 {text-transform: none; font-size: 3rem;} 
h2, .page-header h2 { font-variant-caps: small-caps; color: #720b02; font-size: 2.5rem;  font-weight: bold;}
h3 { color: #000000; font-size: 2rem; border-bottom: 1px solid #720b02;  line-height: 1.3; margin: 0 0 10px 0; }
h3.lato { font-variant-caps: small-caps; border-bottom: none; font-family: 'Lato', sans-serif; }
h4 { color: #720b02; font-size: 2rem; /*font-weight: bold;*/}
h4.lato { font-family: 'Lato', sans-serif;}
h5 {background: #a7a9ac; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #720b02; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; }
a { color: #720b02; }
a:hover { color:#a7a9ac; }


@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: #720b02;
}

span.dropcap {font-size: 2.5rem; line-height: 1;}

hr {
	border-bottom: 1px solid #720b02;
}

hr.short {
    padding: 0;
    margin: 0 auto;
    width: 400px;
}
hr.red {
	border-bottom: 6px solid #720b02;
	padding: 0; margin: 5px 0;
}
a.transparentbutton { 
  color: ##720b02; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: transparent; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 2px solid #720b02;
  transition: all .2s ease-in;
}
.transparentbutton:hover {background: #720b02; color: white; border: 2px solid #720b02;}


/*************** HOMELAYOUT ***************/

/*************** OFFCANVAS ****************/

/*************** TOP **********************/
.homelayout #g-top {
	background: url('/images/template/bg-church1.jpg') 240% 50% no-repeat;
    padding-bottom: 42vw!important;
    margin-bottom: -42vw;
    background-size: 90%;
}
/*******image still in header on subpages*********/
#g-top {
	background: url('/images/template/bg-church1.jpg') 160% 6% no-repeat;
    /*padding-bottom: 40vw!important;
    margin-bottom: -40vw;*/
    background-size: 80%;
}

#g-top .g-logo img {margin-left: 2vw; margin-bottom: -4vw;}

#home-mission {
	background: rgba(255,255,255,0.45);
	border-radius: 1.5rem;
	margin-top: -1rem;
	padding: 0 0.75rem;
	}

#home-mission p {
	font-size: 1rem;
}
	
	

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

/*************** HEADER *******************/
/*************** ABOVE ********************/

/*************** NAVIGATION ***************/
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
    font-size: 1.1rem;
}
@media only screen and (max-width: 767px){
	#g-navigation {border-bottom: 2px solid #720b02;}
}

/*************** SHOWCASE *****************/
#g-showcase {padding: 0 5%;}
#g-showcase .g-content {padding: 1rem;}

@media only screen and (max-width: 767px) {
	#g-showcase {padding: 0;}
	#g-showcase .g-block:first-child .g-content {padding: 0; margin: 0;}
}  
   
   
    /*** ROTATOR ***/
.ffcontentback .sprocket-features-content {
    background: rgba(0,0,0,.3);
}
@media only screen and (min-width: 767px) {

#g-showcase .rwide .layout-slideshow .sprocket-features-img-container img {height: 30vw !important; width: 56vw; object-fit: cover; object-position: center;}  
#g-extension .rwide .layout-slideshow .sprocket-features-img-container img {height: 33vw !important; width: 26vw; object-fit: cover; object-position: center;}  
}
.rwide .layout-slideshow .sprocket-features-desc    {background: none;}  
.rwide .layout-slideshow .sprocket-features-content    { background: linear-gradient(to right, rgba(114,11,2,0.75), rgba(114,11,2,0.5), rgba(255,255,255,0)); top: 12vw;}  
.rwide .layout-slideshow .sprocket-features-content  {left: 0;}  
 
.bigarrows .sprocket-features-arrows .arrow.next, .bigarrows .arrows-onhover .sprocket-features-arrows .arrow.next {right: -25px;}
.bigarrows .sprocket-features-arrows .arrow.prev, .bigarrows .arrows-onhover .sprocket-features-arrows .arrow.prev {left: -25px;}

@media only screen and (max-width: 767px) {
	#g-showcase .rwide .layout-slideshow .sprocket-features-img-container img {height: 55vw !important; width: 98vw; object-fit: cover; object-position: center;}  
	#g-extension .rwide .layout-slideshow .sprocket-features-img-container img {height: 100vw !important; width: 80vw; object-fit: cover; object-position: center;}  
	.sprocket-features-desc p { font-size: inherit;}
	.rwide .layout-slideshow .sprocket-features-content {top: 2vw;}
}

    /*** QUICKLINKS  ***/
.overlaybackpic .sprocket-strips-content {	background: transparent }
.overlaybackpic .sprocket-strips-content:hover {	background:transparent;} 

.redbuttons .g-content, .redbuttons .platform-content, .redbuttons .moduletable, .redbuttons .custom, .redbuttons .flexcolumn { height:  100%;}

#g-showcase .redbuttons .readon {    
	background: rgba(114,11,2,.9);
	width: 100%; 
	border-radius: 0.5rem;
	/*border: 1px solid #720b02;*/
    text-align: center;
    margin: 1vw 0;
	padding: 1.5rem;
	font-size: 1.25rem;
}
#g-showcase .redbuttons .readon:hover {
	color: #720b02;
	background: rgba(169,169,172,0.8);
}
@media only screen and (max-width: 767px) {
	#g-showcase .redbuttons .readon {    
	background: rgba(114,11,2,1);}
}


/*************** UTILITY ******************/

/*************** FEATURE ******************/
#g-feature {padding: 0 5%;}
#g-feature h3.g-title { color: #333; border-bottom: none; font-size: 2.25rem; font-weight: bold;}
#g-feature .g-block:nth-child(2) .g-content { padding-top: 3.5rem; }

@media only screen and (max-width: 767px) {
	#g-feature .g-block:nth-child(2) .g-content { padding-top: 1.5rem; }
}

.rsphotoblocknews .sprocket-strips-item .readon:hover { background: rgba(114,11,2,.8); }
.rsphotoblocknews .sprocket-strips-content h4 {background: rgba(114,11,2,.8); font-family: 'Lato', sans-serif; font-weight: 400; }
.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: #720b02; } }


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

/*************** EXTENSION ****************/
#g-expanded {padding: 3% 7%;}
#g-expanded {
	background: url('/images/template/bg-hearts.jpg') 50% 50% no-repeat;
    /*padding-bottom: 40vw!important;
    margin-bottom: -40vw;*/
    background-size: 75%;
}

@media only screen and (max-width: 767px) {
	#g-expanded {padding: 0 2%;
	background-size: 100%;}
	
}

#g-expanded h3 {
    color: white;
    background: #720b02;
    border-radius: 5px; 
    margin: 0px 0px 15px 0px;
    padding: 5px;
	font-size: 1.75rem;
	border-bottom: none;
    }
/****flocknote button**********/
#g-expanded button { color: #720b02;  background: transparent;}



/************ UPCOMING EVENTS - ROKMINI ************/
.rme-badge { 
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*font-family: Cinzel, serif; */
	background: #720b02; 
	border-radius: 5px; 
	color: #ffffff; 
	padding: 5px 0px; 
	width: 60px; 
	float: none; 
	margin-bottom: 0px;
}
.rme-items { display: block;}
.rme-description { flex: 1;}
.rme-day, .rme-month { text-transform: none;}
.rme-day { font-size: 1.7rem;}
.rme-title { font-size: 1.1rem; font-weight: normal;}
.rme-time { font-size: .9rem; font-weight: 300;}
.rme-items li { 
	display: flex; 
	background: none; 
	border: none; 
	margin: 10px 0px 15px 0px; 
	padding-left: 2rem; 
	padding-right: 0px;
}

@media only screen and (max-width: 767px) {
	.rme-items li { margin-top: 0px; margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px;}
	.rme-title { font-size: 1rem; }
	.rme-time { font-size: .9rem; }
	.rme-day { font-size: 1.5rem;}
}


.margin5 #g-container-main {
	margin-left: 5%;
	margin-right: 5%;
}

.graytable table {
	background-color: #e3e3e3 !important;
}
.graytable td {
	padding: 1.5rem;
}

/*************** BOTTOM *******************/

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

/*************** COPYRIGHT ****************/

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

/************ SECTIONS  ************/
#g-footer a { color: white; }
#g-footer h2 { color: white; font-weight: 400; }


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

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



.grayback { background: #E0E0DB; padding: 20px; margin-top: 10px; margin-bottom: 10px; color: white;}
.redback { background: #720b02; padding: 20px; margin-top: 10px; margin-bottom: 10px; }
/*.tanback {background: tan;}*/


.grayback p, .grayback li, .grayback div .grayback h3, .grayback h5  {color: black; }
.redback p, .redback li, .redback h1, .redback h2, .redback div .redback h3, .redback h4, .redback h5, .redback h6  {color: #ffffff; }

.flexrow > .two-thirds-side { flex: 2;}
/*.flexrow > .moduleside { flex-basis: 35%}
.flexrow > .fiftypercent { flex-basis: 50%}*/
.circle img {border-radius: 50%;}

@media only screen and (min-width: 50.99rem) {
	.flexrow div.two-thirds-side:first-child, .flexrow div.moduleside:first-child { padding-right: 30px;}
	.flexrow div.two-thirds-side:last-child, .flexrow div.moduleside:last-child { padding-left: 30px;}
	
	.flexrow > .two-thirds-side { flex: 2;}
	.flexrow > div { order: 2; }
}
/************ 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; padding: 20px;}

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

@media only screen and (max-width: 50.99rem) {
	.flexrow { flex-direction: column; }
	
	#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);}
}

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