@charset "utf-8";
/* CSS Document */
/* green color scheme ccc2018-11c layout 
 bright green (lg hd; borders): #c9d896;
 med green 1 (headings): #99b342;
 med green 2 (backgrd): #8c9b59;
 dk green (links): #7c8a4f;
 dk gray (main text, bgs): #525252;
 pale brown (box bg): #f4f2ec;
 pale yellow (theme link menu): #efe2c0;
 dk brown (box text): #7e7763;

CASLON PRO
font-family:"adobe-caslon-pro"

FIRA
font-family:"fira-sans" or .sans
Fira weights:
	Light:300
	Medium:500
	Ultra:900
*/
* { margin-top:0; margin-bottom:0; box-sizing:border-box; }
:root {
	--brightCol: #c9d896;
	--neutCol:#525252;
}
a {text-decoration:none; }
img {max-width:100%; height:auto;}
body {
	margin:0;
	padding:0;
	font-family:"fira-sans", Verdana, Geneva, sans-serif;
	background: url(/images/backgroundRedLarge.jpg) center top;
	overflow-x:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100vh;
}
.banner, header,footer {flex-shrink:0;}
.main {flex:1 0 auto;}
footer { margin-top:auto; flex-basis:content;}

h4 {
	font-weight:normal;	
}
blockquote {
	padding:.1em .8em .7em;
	font-size:.9em;	
	position:relative;
}
blockquote:after {
	content:"\201c";
	color:#99b342;
	position:absolute;
	width:2em;
	height:100%;
	font-size:4em;
	left:-.35em;
	top:calc(50% - .25em);
	line-height:1;
	vertical-align: middle;
}
.banner, footer {
	color:var(--brightCol);	
}
.banner, .banner:before, footer, footer:before {
	background:var(--neutCol);
}
.banner, footer { position:relative; }
.banner:before, footer:before {
	position:absolute;
	content:'';
	height:100%;
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);

}
.banner address {
	position:relative;
	font-style:normal;
	text-align:center;
	color:#dfdfdf;
}
.banner address, .banner .navigation, .banner .churchname { align-self:center;}
h1, .churchname { font-weight:900;}
header span { display:block;}
.subtitle {
	font-weight:normal;
	font-family:"adobe-caslon-pro", serif;
	font-style:italic;
	font-size:.56em;
	display:block;
}
header { 
	color:#fff;
	text-align:center;
	position:relative;
}
.churchname {
	font-size:1.333em;
}
header .churchname {
	position:absolute;
}
.churchname a {color:#fff;}
header h1 {
	background:rgba(0,0,0,.6);
	border:6px solid rgba(201,216,150,.7);
	border-radius:0 20px 0 20px;
	font-size:2.1em;
	position:absolute;
	background-clip:padding-box;
}
header .focus {
	color:#c9d896;
	font-size:1.92em;
	line-height:.85;
}
.main {
	background:#fff;
	position:relative;
	line-height:1.32;
}
article {
	color:#5b584d;
}
h1, h2, h3 { font-family:"fira-sans", sans-serif; }
hr {margin-bottom:1em;}
article h1 {
	font-size:1.875em;
	color:#99b342;	
}
article h1.superbig {font-size:3em;}
article h3 {
	font-size:.9em;
	padding:.2em 0 .65em;
	font-weight:500;
	border-top:1px solid #ddd;
}
article .note {
	padding:0 0 .7em;
	font-style:italic;
	color:#000;
	font-size:.9em;
}
aside {
	font-size:.9167em;
}
.about {
	color:#7c8a4f;
	font-size:.9em;
	margin-top:20px;
}
.main a { color:#7c8a4f; font-style:italic; }
.main a:hover, .main a:active, .main a:focus {
	color: #2282B0;
}
.main h1 { padding-bottom:.5em; }
article h2 {
	padding:.3em 0;
	font-size:1.2em;
	font-weight:400;
	color: #99b342;
	font-family:"adobe-caslon-pro",serif;
	font-style:italic;
}
article ul, article li, article dl {list-style-type:none; padding:0 1em .6em 0;}
article li:before, article dt:before {
	color:#99b342;
	content:'\25cf';
	margin:0 .4em 0 1em;
}
article dt {
	margin-bottom: 0.2em;
	color: #8c9b59;
}
article dd { margin:.1em 1em .6em 2.2em; font-size:.9em;}
.hilite-display {
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:12px;
}
.peoplebox .hilite-content {
	display:flex;
	flex-direction:row;
}
.peoplebox .text {width:calc(60% - 12px);}
.peoplebox .images {
	order:-1;
	margin:0 12px 0 -12px;
	width:40%;
}
.peoplebox .hilite-content.full-width { flex-direction:column;}
.hilite-content.full-width .text {width:100%;}
.hilite-content.full-width .images {
	margin:0 -12px 8px -12px !important;
	width:calc(100% + 24px);	
}


.about h3 {
	background:url(/images/icon-info.png) center left no-repeat;
	color:#99b342;
	padding:4px 0 34px 80px;
	font-weight:300;
	font-size:1.05em;
}
.about ul, .about li {
	list-style-type:none;
	margin:0;
	font-family:"adobe-caslon-pro";
}
.about ul { margin-top:-22px; }
.about li { padding-bottom:.3em; }
footer img { display:block; margin:0 auto;}
.credit, footer img { position:relative; }
.credit {text-transform:uppercase; color:#dfdfdf; }
.credit a { color:#dfdfdf; }
.credit a:hover, .credit a:active, .credit a:focus {
	color:#c9d896;
}

/* contact form */
form.contactform {
	background: #f4f2ec;
	color: #6d5952;
	font-size: 0.85em;
	padding: 14px 8%;
	border-radius: 0 28px 0 28px;
	border: 3px solid #DED9C7;
}
legend {
	padding-left:40px;
	font-size:1.11em;
}
fieldset {
	border-color: #DED9C7;
	border-width: 1px;
	padding: 4px 8px;
	margin: 4px 0;
	display: flex;
	flex-direction: row;
	align-items:center;
}
label { width:100px; }
input, textarea { border:1px solid #d0d0d0;}
textarea { width:100%; height:10em;}
input[type=submit] {
	color:6d5952;
	font-family:inherit;
	font-size:1em;
	margin-left:9px;
}
input::placeholder, textarea::placeholder { color:#999; }
form p {
	margin:8px 0 0 9px;
	font-style:italic;
	font-size:.85em;
}




@media screen and (max-width:579px) {
	.pg-hero .banner {margin-bottom:97px;}
	header h1 {font-size:1em; }
	.pg-hero header h1 {
		bottom:100%;
		width:100%;
		padding:.2em;
		border-radius:0;
		text-align:center;
		border-width:4px;
	}
	header h1 .focus { font-size:1.7em;}
	.pg-hero header .subtitle { font-size:.75em; }
}
@media screen and (min-width:580px) and (max-width:699px) {
		header h1 {font-size:1.3em; }
	.pg-home header h1 {
		top:25%;
		width:310px;
		padding:.2em;
		border-radius:0 28px 0 28px;
		left:calc(50% - 157px);
		border-width:4px;
	}
	header .subtitle { font-size:.7em; }
}
@media screen and (max-width:699px) {
	.banner address {font-size:.8em;}
	
	body { font-size:19px; padding:0 15px; }
	.pg-home header {
	  background:url(/images/ccc2018-front-med.jpg) no-repeat;
	  background-size:100%;
	  padding-top:57.427%;
	 }
	

	.main {padding:10px 10%;}
	.fb-like {margin-bottom:12px;}
	article {padding-bottom: 15px;}
	
	aside section { margin-bottom:20px; }
	.about h3, .about ul {
		padding-left:80px;	
	}
	footer {
		font-size:.7em;
	}
	footer .credit {
		font-size:.75em;
		padding:.5em 0;
		letter-spacing:.015em;
	}
	footer .navigation {padding:16px 0 22px;}
	body.audio .grid-container {
		margin-top:14px !important;
	}
}
@media screen and (min-width:700px) {
	.banner address {font-size:.59em;}
}
@media screen and (min-width:700px) and (max-width:999px) {
	body { font-size:21px; padding:0 40px; }
	.pg-home header {
	  background:url(/images/ccc2018-front-med.jpg) no-repeat;
	  background-size:100%;
	  padding-top:57.427%;
	  max-height:750px;
	}
	
	header h1 {font-size:1.45em; }
	.pg-home header h1 {
		top:21%;
		width:350px;
		padding:.3em .5em;
		border-radius:0 28px 0 28px;
		left:calc(50% - 178px);
	}
	.main {padding:12px 10%;}
	.fb-like {margin-bottom:15px;}
	article {padding-bottom: 18px;}
	aside section { margin-bottom:20px; }
	.about h3, .about ul {
		padding-left:80px;	
	}
	footer {
		font-size:.7em;
	}
	footer .credit {
		font-size:.75em;
		padding:.5em 0;
		letter-spacing:.015em;
	}
	footer .navigation {padding:16px 0 22px;}
}
@media screen and (max-width:999px) {
	header .churchname {
		display:none;	
	}
	.banner .churchname {
		background:url(/images/logo-CCC2018-sm.png) center left no-repeat;
		padding:25px 0px 25px 70px;
		line-height:1.3;
		position:relative;
		text-align:center;
		color:#fff;
		font-size:1.1em;
		width:320px;
		margin:0 auto !important;
	}
	.banner .subtitle {display:block; font-size:.8em;}
	.banner address { padding:15px 0; }
	.banner .navigation {padding-bottom:12px; }
	.content p, article ul { padding-bottom:.6em; }
	.hilite-display {grid-template-columns:1fr;}
}
@media screen and (min-width:1000px){
	.banner, footer {
		display:grid;
		grid-template-areas:". add nav";
		grid-template-columns:30% 40% 30%;
	}
	address { grid-area:add;}
	.navigation { grid-area:nav; }
	footer {
		grid-template-areas:"cred logo nav";	
	}
	footer img {grid-area:logo;}
	.credit {grid-area:cred;}
	body { font-size:24px; padding:0 50px; }
	.banner, .cont-hdr, .main, footer {
		width:1306px;
		max-width:100%;
		margin:0 auto;	
	}
	.banner {
		padding:20px 0;	
	}
	.pg-sub .banner .churchname {
		background:url(/images/logo-CCC2018-sm.png) center left no-repeat;
		padding:25px 0px 25px 67px;
		line-height:1.3;
		position:relative;
		text-align:center;
		color:#fff;
		font-size:.9em;
		width:240px;
	}
	.banner .churchname {display:none; }
	.pg-sub .banner .churchname {display:block !important;}
	footer {
		padding:20px 0 30px;
		margin-top:30px;	
	}
	.pg-home header {
		background:url(/images/ccc2018-front-lg.jpg) no-repeat;
		background-size:100%;
		padding-top:57.427%;
		max-height:750px;
	}
	header .churchname {
		background:url(/images/logo-CCC2018.png) center left no-repeat;
		padding:28px 0 28px 133px;
		top:-20px;
		left:-29px;
		line-height:1.25;
	}
	
	.pg-home header h1 {		
		top:20%;
	}
	.main { 
		display:flex;
	}
	article {padding-bottom:20px;}
	aside {
		width:398px !important;
		order:-1;
		margin-right:3.6%;
	}
	aside section { margin-bottom:20px; }
	.content { width:calc(100% - 398px - 3.6%); }
	.credit {font-size:.5em; align-self:center;}
	footer .navigation { align-self:center; }
}
@media screen and (max-width:1338px) {
	 nav ul.base-nav {font-size:.8em;}
}
@media screen and (min-width:1000px) and (max-width:1160px) {
	.hilite-display {grid-template-columns:1fr;}	
}
@media screen and (min-width:1000px) and (max-width:1338px) {
 	.navigation {font-size:.7em; }
	header h1 {
		font-size:1.6em;	
	}
	.pg-home header h1 {
		top:25%;
		width:500px;
		padding:.4em .5em;
		border-radius:0 28px 0 28px;
		left:calc(50% - 253px);
	}
	.main { padding:10px 15px 15px; }
	.fb-like {margin:9px 0 16px;}
	.content { font-size:.9em; }
	.content p, article ul { padding-bottom:.5em; }
	aside {margin-top:10px; }
	.about h3, .about ul {
		padding-left:75px;	
	}
}
@media screen and (min-width:1339px) {
	nav ul.base-nav {
	font-size:.67em;
	}
	.pg-home header h1 {
		top:25%;
		width:640px;
		padding:.5em .8em;
		border-radius:0 28px 0 28px;
		left:calc(50% - 323px);
	}
	.main { padding:10px 30px 30px; }
	.fb-like {margin-bottom:18px;}
	.content p { padding-bottom:.65em; }
	.pg-hero aside {
		margin-top:-100px;
	}
	.about h3, .about ul {
		padding-left:80px;	
	}
}
/* footer {
/* flex-shrink:0;	*/
/*margin-top:auto;
} */