@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');

body {font-family: 'Open Sans', sans-serif; margin:0;}

#content {padding-left: 24px; padding-right:24px}
#frame {position:relative; height:0; overflow:hidden; padding-bottom:75%;} /* adjust as needed */
#frame iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

* {
	box-sizing:border-box;
}

h2 {text-align:center; font-family:'Cinzel Decorative', cursive; color:#135699;} /* bluish */
h4 {font-weight: bold; font-family:Alkatra; font-size: 1.4em; text-align:left; color:#135699;}
blockquote {width:100%;	margin: 8px 0 0 0; padding:2rem 1.5rem; color:#fff; background:#135699; clear:both}
blockquote p{
			max-width:800px;margin:auto;
			font-family:'Open Sans', sans-serif;
			font-style:italic;
			padding-left:1rem;
			border-left:4px solid #fff;}
q {font-style:italic; color:#333; font-family:Arial, Helvetica, sans-serif;}
q:before {content:open-quote;}
q:after {content:close-quote;}			
			
img {
  max-width: 100%;
  height: auto;}
.pic {float:none; clear:both; text-align:center;} /* figure classes */
.caption {font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; padding-top:8px}
.float {float:left; padding-right:14px}
.round {border-radius:8px;}
.staff {clear:both;}
.narrow-wrapper {background-color:#ffffff; padding:24px; max-width:900px; margin:auto}
.bg-grey {background-color:#f2f2f2;}
.bg-white {background-color:#ffffff;}
a {color:#C70094; display:inline-block; font-weight: bold; text-decoration:none;
	padding:0px 0px; margin:0; border-radius:0px; transition: none;}
a:hover {color:#00489E}
.shadow img:hover {box-shadow:0px 5px 6px #99C}

.dropcap {font-family: 'Cinzel Decorative', cursive; color:#135699; font-weight: bold; font-size:2.2rem; float:left;}
.first {font-family: 'Cinzel Decorative', cursive; color:#135699; font-weight: bold; font-size:1.5em} /* need both first and dropcap - sometimes dropcap does not work */
.newLife {font-weight: bold; font-family:Alkatra}
.bullet {font-size: 1.15em; font-weight:500}
.bullet li {list-style:none}
.bullet li {list-style-image:url('images/NewLifeFavIcon18.png'); padding-top:4px; padding-right:10px}
/* .bullet li::before {content:"\271F"; padding-right:10px; color:#AA002E} */ /* royal red 271F=cross*/
.center {text-align:center}
.big {font-size:1.3em; font-weight: bold}

.headings {
	position:relative;
	padding-top:16px;
	display:inline-block;
}
.headings::before {
	content:'';
	/*display:inline-block;*/
	position:absolute;
	left:0;top:0;
	/*vertical-align:middle;*/
	width:40px;
	height:5px;
	/* background:purple; */ /* created line above heading */
	margin-right:10px;
	
}
h2.headline {
	display:block;
	text-align:center;
	position:relative;
}
h2.headline:before {
	content:'';
	width:40px;
	height:10px;
	left:50%;
	transform:translate(-50%)
}

.social {font-size:1.3em;}
.social i {color:#135699} /* Nav blue */
.social i:hover {background-color:#C4A5A5;}

/* Make YouTube iframe repsonsive */
.m_video-wrapper {position:relative; height:0; padding-top:56.25%;}
.m_video-wrapper iframe{position:absolute; left:0; top:0; width:100%; height:100%;}

/**** typography ****/
.note {
	border-left:6px solid purple;
	padding-left:20px;
}
/**** bulleted list *****/
.iconlist li {
	list-style-type:none;
	margin-bottom:.5rem
}
.iconlist li i {
	color:purple;
	width:14px;height:14px;
	margin-right:14px;
}

label sup {font-weight: bold; font-size: 1.25em; color:#FF66CC }

/*** nav **/
div.navigation {
  width: 100%;  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: center;*/
  background:#135699;
	
}
nav ul {
  list-style-type: none;
  background-color:#135699;
  position: relative;
  margin: 0;
  padding: 0;
	
}
nav ul li {
  display: inline-block;
  position: relative;
background-color:#18191A;
}
nav ul li:hover {
  background-color: #b931aa;
}
nav a:hover{color:#fff}
nav ul li.current {
  position: relative;
  background: #b931aa;
}
nav ul li.current a {
  color: #fff;
}
nav ul li a {
  color:#fff;
  text-decoration: none;
  font-size: 18px;
  font-weight:500;
  /*text-transform:uppercase;*/
  padding: 10px 12px;
  /*padding: 15px;*/
display: block;
}
nav ul ul {
  position: absolute;
  background:#114880;
  min-width: 200px;
  display: none;
  z-index: 1000 !important;
}
nav ul ul li {
  display: block;
	background-color:#444;
	border-bottom:dotted 1px #999;
}
nav ul li:hover ul {
  display: block;
}
.fa-caret-down {
  margin-left: 10px;
}
nav div {
  background-color:#135699;
  color: rgb(240, 240, 240);
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  display: none;
}
/*** end nav ****/

/***header***/
.pageHeader {
  overflow: visible;
}
/*** top row header ***/
.pageHeader section {
background: url("images/heavenly-sky-637783348.jpg") no-repeat top center!important;
  background-size: cover!important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 15px;
}
.pageHeader a.donate, .pageHeader a.admin {
  background: #b931aa;
  color: #fff;
  display: inline-block;
  padding: 6px 18px;
  text-decoration: none;
  border-radius: 20px;
  font-weight: 500;
  transition: background 2s ease-out;
  margin: 10px 8px;
}
.pageHeader a.donate:hover {
  background: #014489;
}
.pageHeader a.admin {
  background: #135699
}
.pageHeader a.admin:hover {
  background: #b931aa
}
/***** hero ******/
.hero {
  display: block;
  padding-top: 35%;
  background: url("images/New-Life-Header.jpg") no-repeat center center;	
  background-size: cover;
  position: relative;
}
.hero h1 {
  position: absolute;
  color: #fff;
  bottom: -1%;
  left: 50%;
  transform: translate(-50%);
  font-size: 4vw;
  background:rgba(19,86,153,0.2);
  text-align: center;
  padding:10px;
  width: 40%;
  font-weight:600;
  border-radius:25px;
  text-shadow: 0 0 12px rgba(0,56,111,.9);
}
/**** intro section ****/
.intro {
    margin: 4rem auto 3rem auto;
    max-width: 1100px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.intro h2, .twocol-media-right h2 {
    font-size: 2rem;
    color: #135699;
    text-align: center;
    line-height: 2.2rem
}
.intro p.lead {
    font-size: 1.2rem;
    line-height: 1.6rem;
}
.intro a {
	background:#135699;
	color:#fff;
	display:inline-block;
	padding:5px 15px;
	text-decoration:none;
	border-radius:18px;
}

.row-wrapper {
	background:#f7f7f7;
}

/*** three cards ***/
.threecards {
  padding: 0;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
	max-width:1600px;
}
.threecards li {
  list-style: none;
  text-align: center;
  background: #333;
  color: #fff;
  border-radius: 6px;
  max-width: 600px;
  margin: 1rem auto;
}
/**** thre-col for worship-schedule ****/
.threecol {
    min-height: 350px;
    background: url("images/sunday-worship-schedule.jpg") no-repeat center center;
    background-size: cover;
    margin-top: -3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
	.threecol section:first-child, .threecol section:last-child {
		background:rgba(255,255,255,0.5);
		border-radius:25px;
		border:1px solid #fff;
		padding:1.5rem;
		text-align:center;
		font-size:18px;
		font-weight:500;
		min-width:300px;
		margin:auto;
	}
	.threecol section:nth-child(2){
		display:none;
		width:0;
		height:0;
	}
/***** three-col-event ******/
.three-col-event {
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			padding:0;
			margin:2rem auto;
			background:#f2f2f2;
}
		.img-back {display:none}
		.three-col-event .description {
			padding:1.5rem;
		}
		.three-col-event .description h3 {
			text-align:center;
		}
		.three-col-event .date-times {
           text-align:center;
			padding:1.5rem;
		}
		img.backup-img {
			max-width:100%;
			display:block;
			margin:auto;
		}
			
/*** four cards ***/
.fourcards {
  padding: 0rem;
  display: flex;
  flex-direction: column;
  align-content: center;
	max-width:600px;
	margin:2rem auto;
	
}
.fourcards li {
  list-style: none !important;
  text-align: center;
  border-radius: 12px;
  max-width: 600px;
  margin: 1rem 1.5rem;
  padding-bottom:1.5rem;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
display:flex; 
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.fourcards li:hover {
	 box-shadow:0px 0px 15px rgba(0,0,0,.5)
}

.fourcards li p {
	padding:0 1rem;
	min-height:100px;
	text-align:left;
	}
.fourcards img {
  border-radius: 5px;
}
.fourcards a {
	text-decoration:none;
	padding:5px 15px;
	color:#fff;
	border-top:1px solid #b931aa;
	background:#b931aa;
	border-radius:16px;
	transition:background 0.8s ease-in-out
}
.fourcards a:hover {
	background:#135699
} 
h2.headline {
	font-size:2rem;
	text-align:center;
}

/** end four cards **/
/**** two columns media left ******/
/**** two columns media left ******/
.twocol-media-left, .twocol-media-right {
	max-width:1600px;
	margin:1.5rem auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	}

.twocol-media-left .rightcol, .twocol-media-right .leftcol {
	padding:2rem;
}
.twocol-media-left img, .twocol-media-right img {
	display:block;
	margin:auto;
}
a.btn {
	background:#C70094; /* violet */
	display:inline-block;
	text-decoration:none;
	text-align:center;
	color:#fff;
	padding:8px 15px;
	margin:0.5rem;
	border-radius:18px;
	transition:background 1s ease-in-out;
}
/**** two columns media right******/

a.btn:hover {
	background:#00489E;
}
		
/**** footer *****/
.pageFooter {
  display: flex;
  background: rgb(19,86,153);
  color: #ddd;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}
.pageFooter h2 {
  text-align: center;
  font-size: 1.3rem;
  color:#ddd;
}
.pageFooter a {color: #fff; font-style:normal; font-weight:normal}
.pageFooter a:hover {
  color: #FF2BD6
}
.pageFooter > div, .pageFooter > section {
  width: 100%;
  padding-bottom: 1rem;
  text-align: center;
  border-bottom: 1px dotted rgba(255, 255, 255, .5)
}
.pageFooter address a {
  text-decoration: none;
}
.pageFooter ul {
  list-style: none;
  padding: 0;
  max-width: 150px;
  margin: 0 auto;
  text-align: left;
}
.pageFooter ul li {
  margin-bottom: 0.5rem;
}
.pageFooter ul a {
  text-decoration: none;
  padding: 8px auto;
}
.pageFooter ul a:hover {
  color: #FF31BE;
}
.pageFooter i {
  font-size: 1.8rem;
  color: #ddd;
  border-radius: 6px;
  padding: 0.3rem;
  display: inline-block;
  margin: 0.5rem
}
.pageFooter i:hover {
  background-color: #DC008F;
}
address {
  font-style: normal;
  margin: 1rem auto;
  font-family: Alkatra;		
}
.pageFooter form {
  max-width: 200px;
  margin: auto;
  text-align: left;
}
.pageFooter form label {
  display: block;
}
.pageFooter form input {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: none;
}
.pageFooter form button {
  width: 212px;
  background: #D800A1; /* purple */
  color: #fff;
  padding: 6px;
  margin-top: 5px;
  border-radius: 6px;
  border: none;
  transition:background 1s ease-in-out;
}
.pageFooter form button:hover {background:#88489E;}

.copyright {
  padding: 1rem;
  text-align: center;
  background: #000;
  color: #ddd;
  border-top: 1px dotted rgba(255, 255, 255, .5)
}
.copyright a {color:#fff}
@media(max-width: 880px) {
  nav div {
    display: block;
  }
  nav ul {
    display: none;
    position: static;
    background-color: rgb(36, 36, 36);
	  
  }
  nav ul li {
    display: block;
	  
  }
  nav ul ul {
    position: static;
    background-color: rgb(36, 36, 36);
  }
}

@media only screen and (min-width:618px) {
  .pageHeader {
    background: #fff;
  }
  .pageHeader section {
    flex-direction: row;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .pageHeader section div:first-child {
    flex: 33%;
    padding: 0px 10px;
  } /* logo image was 58% */
  .pageHeader section div:nth-child(2) { 
    flex: 33%;
    padding: 0px 10px;
    text-align: center;
    font-family:Alkatra;
  } /* middle address added by fjw */
  .pageHeader section div:nth-child(3) {
    flex: 33%;
    padding: 0px 10px;
    text-align: right;
  } /* Donate button was 38% and (2) */
  .hero h1 {background:rgba(19,86,153,0);}
	
.pic {float:right;}	
.noShow {display:none}
}
@media only screen and (min-width:768px) {
  .fourcards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	  max-width:1600px;
  }
  .fourcards li {
    flex-basis: 46%;
    max-width: 600px;
    margin: 2% 2%;
  }
  .threecards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .threecards li {
    flex: 1;
    margin: 0.5% 0.5%
  }
	
	.threecol {
    flex-direction: row;
	flex-wrap:wrap;
}
	.threecol section:first-child, .threecol section:last-child  {
		flex-basis:30%;
	}

  /***** footer 768px *****/
  .pageFooter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .pageFooter > div, .pageFooter > section {
    flex-basis: 48%;
    border-bottom: none;
    margin-bottom: 2rem;
    border-right: 1px dotted rgba(255, 255, 255, 0.5)
  }
  .pageFooter > section:nth-child(2), .pageFooter > section:nth-child(4) {
    border-right: none
  }
}
@media only screen and (min-width:868px) {
  div.navigation {
    flex-direction: row;
  }
	nav ul li {
	background-color:#135699;
}
	
/** three-col-event 868px **/
.three-col-event {
	flex-direction:row;
	align-items:stretch;
	background:#f2f2f2;
	max-width:1400px; margin:2rem auto;
	border:1px solid #c2c2c2
	}
.img-back {display:flex;flex-basis:26.9%;align-items:stretch;}
.three-col-event .description {
	flex-basis:48%;
	padding-left:1%;
	padding-right:1%;
	border-right:1px solid #c2c2c2;
	}
.three-col-event .date-times {
	flex-basis:25%;
	display:flex;
	flex-direction:column;
	align-self:center;
	align-items:center;
	padding:auto 1.5rem;
	}
img.backup-img {
	display:none;
	}
}
@media only screen and (min-width:1025px){
.twocol-media-left, .twocol-media-right {
	flex-direction:row;
	align-items:center;
	padding:0;
	max-width:1490px;
	margin:3rem auto 3rem auto;
		}
.twocol-media-left .leftcol, 
.twocol-media-left .rightcol {
	flex-basis:50%;
	}
.twocol-media-right .leftcol, 
	.twocol-media-right .rightcol {
		flex-basis:50%;
	}
	
.twocol-media-right .rightcol {	
	order:-1
}
	/***** intro  CTA block *****/
.intro-cta {
	flex-direction:row;
    width:1600px;
	margin:auto;
	margin-top:4rem;
}
	
	.intro-cta > div {
		flex-basis:33%;
		margin-top:-5rem;
	}
	.intro-cta > section {
		flex-basis:66%;
		text-align:left;
	}
	.intro {
    flex-direction: row;
}
.intro h2 {
    text-align: right;
}
.intro section:first-child {
    flex-basis: 25%;
    padding-right: 1.5rem;
}
.intro section:nth-child(2) {
    flex-basis: 70%;
    border-left: 2px solid #135699;
    padding-left: 1.5rem
}
}
@media only screen and (min-width:1200px) {
	nav ul li a {font-size: 24px;}
	nav ul ul {min-width: 300px;}
	p, blockquote {font-size: 1.2rem}
	blockquote p, .narrow-wrapper {max-width:900px;margin:auto;}
	.intro p.lead {font-size: 1.4rem; line-height: 1.8rem;}
	h2, h3, h4 {font-size: 1.4em}		
	.hero h1 {
    bottom:1%;
    font-size: 3.3rem; /* was 4rem */
	line-height:3.6rem; /* was 4.3rem */
    text-align: center;
    /* padding: 1.5rem 3rem; had to remove when h1 displayed on top of nav in Edge */
    width: 40%;
	font-weight:600
  }
  .fourcards {
    max-width: 1520px;
    margin: 2rem auto 2rem auto;
  }
  .fourcards li {
    flex-basis: 23%;
    margin: 1% 1%;
  }
  /***** footer ****/
  .pageFooter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .pageFooter > div, .pageFooter > section {
    flex-basis: 23%;
    margin-bottom: 1px;
  }
  .pageFooter > section:nth-child(2) {
    border-right: 1px dotted rgba(255, 255, 255, .5);
  }
}

@media only screen and (min-width:1400px) {
  nav ul li a {font-size: 30px;}	
  p, blockquote {font-size: 1.4rem}
  blockquote p, .narrow-wrapper {max-width:1000px;margin:auto;}
  .intro p.lead {font-size: 1.6rem; line-height: 2rem;}
  h2, h3, h4 {font-size: 1.6em}		
  .hero h1 {
    font-size: 4rem; 
    line-height:4.3rem; 
    /* padding: 1.5rem 3rem; had to remove when h1 displayed on top of nav in Edge */
  }
}