:root { --background: rgba(85, 214, 170, .85); }
*, *::before, *::after { box-sizing: border-box; }
* {
	margin: 0;
	padding: 0;
}
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	display: grid;
	grid-template-rows: 2em 400px 3.15em auto auto;
	grid-template-columns: auto;
	grid-template-areas:
		"headtop" 
		"header"
		"nav"
		"main"
		"footer";
}
	img {
		display: block;
		width: 100%;
		height: auto;
	}

	p {
		margin: 0;
		padding: 1em 0;
	}

/* TOP HEADER */
.head-top {
	grid-area: headtop;
	background: rgb(43, 59, 86);
	text-align: center;
	display: flex;
	-webkit-display: flex;
	-ms-display: flex;
	-o-display: flex;
	justify-content: center;
	flex: 1;
}
	.head-top h4,
	.head-top > div { 
		margin: auto;
		justify-content: space-around;
	}
	.head-top .head-main-info {
		margin: auto;
		text-align: center;
		display: flex;
		-webkit-display: flex;
		-ms-display: flex;
		-o-display: flex;
		justify-content: center;
		align-items: center;
	}
	.head-top .head-main-info h4 {
		margin: auto 1.5em;
		color: lightyellow;
	}
	.head-top #address a {
		text-decoration: none;
		cursor: pointer;
		color: lightyellow;
	}
	.head-top #login {
		cursor: pointer;
		color: lightyellow;
	}
	.head-top .logged {
		
	}
		.head-top .logged:hover .logged-content {
			display: block;
		}
		.head-top .logged:hover #loggedin {
			color: rgb(43, 59, 86);
			background: lightyellow;
		}
		.head-top .logged #loggedin {
			cursor: pointer;
			color: lightyellow;
			position: relative;
    		display: inline-block;
    		padding: 0.4em 1em;
		}
		.head-top .logged .logged-content {
			display: none;
    		position: absolute;
    		color: lightyellow;
    		background: rgb(43, 59, 86);
    		box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
    		z-index: 5;
		}
			.head-top .logged .logged-content a {
				color: lightyellow;
				background: rgb(43, 59, 86);
			    padding: 1em;
			    text-decoration: none;
			    display: block;
			}
				.head-top .logged .logged-content a:hover {
					color: rgb(43, 59, 86);
					background: lightyellow;
				}

/* HEADER */
header {
	grid-area: header;
	text-align: center;
}
	header .head-img {
		position: absolute;
		background: #333 url('../img/layout/building.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 400px;
		opacity: 0.9;	/* fade image out */
		overflow: none;
	}
	header .section-content {
		margin: auto;
		z-index: 1;
		font-size: 2.5em;
	}
	header h1 {
		margin-bottom: 1em;
		text-shadow: -2px 2px 6px #000000;
	}
	header p {
		border: 1px solid #333;
		background: rgba(255, 255, 255, 0.8);
	}
	header a {
		text-decoration: none;
		color: white;
	}

/* NAV STUFF */
.nav {
	background: rgb(43, 59, 86);
	text-align: center;
	z-index: 999;
}
	.nav #nav-wide-title a {
		text-decoration: none;
	}
		.nav #nav-wide-title div {	/* was a */
			display: flex;
			-webkit-display: flex;
			-ms-display: flex;
			-o-display: flex;
			justify-content: space-evenly;
			align-items: center;
		}
			.nav #nav-wide-title div .logged {
				
			}
			.nav #nav-wide-title div .logged:hover .logged-content {
				display: block;
			}
				.nav #nav-wide-title div .logged:hover #loggedin {
					color: rgb(43, 59, 86);
					background: lightyellow;
				}
				.nav #nav-wide-title div .logged #loggedin {
					cursor: pointer;
					color: lightyellow;
					position: relative;
		    		display: inline-block;
		    		padding: 0.4em 1em;
				}
				.nav #nav-wide-title div .logged .logged-content {
					display: none;
		    		position: absolute;
		    		color: lightyellow;
		    		background: rgb(43, 59, 86);
		    		box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
		    		z-index: 5;
		    		top: 2em;
				}
					.nav #nav-wide-title div .logged .logged-content a {
						color: lightyellow;
						background: rgb(43, 59, 86);
					    padding: 1em;
					    text-decoration: none;
					    display: block;
					}
						.nav #nav-wide-title div .logged .logged-content a:hover {
							color: rgb(43, 59, 86);
							background: lightyellow;
						}

		.nav h2.nw-title {
			min-width:14.25em;
		}
		.nav #nav-wide-title .nw-title,
		.nav #nav-icon h2 {
			color: lightyellow;
		}
	.nav #nav-icon {
		padding: 10px;
		cursor: pointer;
	}
	nav {
		background: lightgray;
	}
	nav ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;
		-webkit-display: flex;
		-ms-display: flex;
		-o-display: flex;
		justify-content: center;
		flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		-o-flex-direction: row;
		
	}
	nav li {
		margin-left: 0;	/* was 1em */
		margin-bottom: 0;	/* was 1em */
		text-align: center;
		flex: 1 0 auto;
	}
	nav a {
		color: rgb(7, 62, 153);
		display: block;
		padding: 0.8rem 1rem;
		text-decoration: none;
		font-size: 1.2rem;
		text-transform: uppercase;
	}
	nav a:hover {
		color: rgb(77, 121, 193);
		box-shadow: inset 0 -3px 0 0 rgb(43, 59, 86);
	}
	.navActive {
		color: rgb(77, 121, 193);
		box-shadow: inset 0 -3px 0 0 rgb(43, 59, 86);
	}

/* MAIN BODY */
.main {
	grid-area: main;
	background: rgb(43, 59, 86);
}

		/* settings */
	.main-settings {
		margin: 2em;
		padding: 1em;
		background: lightgray;
	}
		.main-settings .user-title { 
			text-align: center; 
			margin: 0 auto 0.5em auto;
		 }
		.main-settings .user-setting {

		}
			.main-settings .user-setting > form {
				text-align: center;
				padding: 0.8em;
				border: 2px solid black;
				display: flex;
				-webkit-display: flex;
				-ms-display: flex;
				-o-display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
				.main-settings .user-setting > form input {
					margin: 0.3em 0;
					font-size: 14pt;
				}
				.main-settings .user-setting > form .addbtn {
					margin-top: 0.5em;
					padding: 0.5em 2em;
					cursor: pointer;
				}
					.main-settings .user-setting > form .addbtn:hover {
						color: #fff;
						background: rgb(7, 62, 153);
					}
		.main-settings .user-addedit {
			display: flex;
			-webkit-display: flex;
			-ms-display: flex;
			-o-display: flex;
			justify-content: space-evenly;
			align-items: center;
			border-bottom: 1px solid black;
		}
			.main-settings .user-addedit > div { 
				border-top: 1px dotted black; 
				border-left: 1px dotted black; 
				border-right: 1px dotted black; 
			}
			.main-settings .user-addedit > div:hover a {
				background: rgb(7, 62, 153);
				color: #fff;
			}
				.main-settings .user-addedit > div a {
					padding: 1em;
					text-decoration: none;
					display: block;
					
				}
			.main-settings .user-showedit { 				
				text-align: center;
				
				border-top: 1px solid black;
				border-right: 2px solid black;
				border-bottom: 2px solid black;
				border-left: 2px solid black;
				background: rgb(7, 62, 153);
			}
			.main-settings .user-showedit .mod { 
				
				display: grid;
				grid-template-columns: minmax(15em, 100%);
				grid-template-rows: 4em auto;
				grid-template-areas:
					"addstuff"
					"editstuff";
				justify-content: center;
				align-items: center;
			}
			.main-settings .user-showedit .mod > div {
				grid-area: addstuff;
				margin-top: 1em;

				display: flex;
				-webkit-display: flex;
				-ms-display: flex;
				-o-display: flex;
				align-items: center;
				justify-content: center;
			}
				.main-settings .user-showedit .mod div > button {
					padding: 1em;	
					font-size: 1em;
				}
				.main-settings .user-showedit .mod div > button:hover {
					cursor: pointer;
					box-shadow: inset 0 0 0 2px rgb(7, 62, 153);
				}
		/* add modal settings */	
		#editModal .modal-content #addMod > form {
				display: flex;
				-webkit-display: flex;
				-ms-display: flex;
				-o-display: flex;
				flex-direction: column;
				justify-content: stretch;
				align-items: center;
				justify-self: center;
		}
			#editModal .modal-content #addMod > form > table { 

				max-width: 26.25em;
				min-width: 200px;
				height: 15em;
				border: 1px solid #000;
				text-align: center;
				background: lightgray;
				padding: 1em;
			}
				#editModal .modal-content #addMod > form > table #add-event-comment { 
					max-width: 212px; 
					min-width: 212px;
					max-height: 74px;
					min-height: 30px; 
				}
			#editModal .modal-content #addMod > form > table td {
				margin: 0.3em 0;
				font-size: 14pt;
			}
				#editModal .modal-content #addMod > form > table td input {
					width: 16em;
				}
			#editModal .modal-content #addMod > form > table td .addbtn {
				margin-top: 0.5em;
				padding: 0.5em 2em;
				cursor: pointer;
				font-size: 14pt;
			}
				#editModal .modal-content #addMod > form > table td .addbtn:hover {
					color: #fff;
					background: rgb(7, 62, 153);
				}
				
			.main-settings .user-showedit .mod .ae-prev {
				grid-area: editstuff;
				width: 100%;
				margin-top: 1em;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				align-items: center;
			}
				.main-settings .user-showedit .mod .ae-prev .prev-title { margin-bottom: 0.5em; color: white; }	
	/* events	*/		
				.main-settings .user-showedit .mod .ae-prev .event-group-edit {
					width: 80%;
					background: white;
					padding: 1em;
					margin: 0.5em 0;
					border: 1px solid black;
					cursor: pointer;
					
				}
					.main-settings .user-showedit .mod .ae-prev .event-group-edit:hover {
						background: rgb(43, 59, 86);
						color: white;
					}
				.main-settings .user-showedit .mod .ae-prev .event-group-btn {
					width: 5em;
					height: 3em;
				} 
					.main-settings .user-showedit .mod .ae-prev .event-group-btn > input {
						width: 100%;
						height: 100%;
						cursor: pointer;
					}
						.main-settings .user-showedit .mod .ae-prev .event-group-btn > input:hover { background: rgb(43, 59, 86); color: white; }
				.main-settings .user-showedit .mod .ae-prev .event-images {
					width: 100%;
					margin-bottom: 1em;
				}
					.main-settings .user-showedit .mod .ae-prev .event-images > div {
						display: flex;
						flex-flow: row wrap;
						justify-content: center;
					}
					.main-settings .user-showedit .mod .ae-prev .event-images > div > div {
						flex-direction: column;
						max-width: 12em;
						max-height: 12em;
						margin: 0.3em;
						background-color: lightgray;
					}
					.main-settings .user-showedit .mod .ae-prev .event-images > div > div img {
						width: 10em;
						height: 10em;
						/*cursor: pointer;*/
						border: 1px solid black;
					}
						.main-settings .user-showedit .mod .ae-prev .event-images > div > div img:hover {
							/*opacity: 0.6;*/
						}
					.main-settings .user-showedit .mod .ae-prev .event-images > div > div input {
						padding: 0.1em 0.5em;
						width: 4em;
						height: 2em;
						cursor: pointer;
					}
	/* sermon	*/		
				.main-settings .user-showedit .mod .ae-prev .sermon-group {
					width: 80%;
					background: white;
					margin-top: 1em;
					padding: 0.5em 1em;
					border: 1px solid black;
				}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-cnt {
						width: 80%;
						text-align: left;
					}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-editbtn {
						width: 20%;
						text-align: right;
					}
						.main-settings .user-showedit .mod .ae-prev .sermon-group .s-editbtn > input {
							padding: 0.5em 1.5em;
							cursor: pointer;
						}
						.main-settings .user-showedit .mod .ae-prev .sermon-group .s-editbtn > input:hover {
							background: rgb(43, 59, 86); 
							color: white;
						}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-play {
						text-align: center;
					}
						.main-settings .user-showedit .mod .ae-prev .sermon-group .s-play audio {
							width: 100%;
						}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-title {
						
						text-align: left;
					}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-date {
						
						text-align: left;
					}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-pastor {
						text-align: left;
					}
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-series {
						text-align: left;
					}	
					.main-settings .user-showedit .mod .ae-prev .sermon-group .s-info {
						border-top: 1px solid black;
						padding: 0.5em;
					}
	/* Ministries */
				.main-settings .user-showedit .mod .ae-prev .min-group {
					 margin: 0.5em 0; 
					 padding: 0.5em; 
					 width: 100%;
				} 
					.main-settings .user-showedit .mod .ae-prev .min-group tr {
						background: white;
					}
						.main-settings .user-showedit .mod .ae-prev .min-group tr td {
							padding: 0.5em;
						}
						.main-settings .user-showedit .mod .ae-prev .min-group .ebtn {
							padding: 0.1em;
						}
							.main-settings .user-showedit .mod .ae-prev .min-group tr td input {
								padding:0.5em 1em;
							}
							.main-settings .user-showedit .mod .ae-prev .min-group tr td input:hover {
								cursor: pointer;
								color: white;
								background: rgb(43, 59, 86);
							} 
						.main-settings .user-showedit .mod .ae-prev .min-group .logo {
							width: 25%;
							background: lightgray;
							padding: 0;
						} 
							.main-settings .user-showedit .mod .ae-prev .min-group .logo img {
								height: auto;
								max-height: 110px;
							}
						.main-settings .user-showedit .mod .ae-prev .min-group .info {
							background: white;
						 	width: 80%;
						}

		/* section a */
	.main #section-a {
		background: #eaeaea;
		color: #333;
		padding: 0 0 2em 0;
		
	}
		.main #section-a .section-content {
			padding: 0.5em 1.5em 0 1.5em;
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: auto;
			grid-template-areas:
				"title"
				"sections";
		}
			.main #section-a .section-content .section-title {
				grid-area: title;
				border-bottom: 1px solid black;
			}
			.main #section-a .section-content .slides {
				grid-area: sections;
				
				display: grid;
				grid-template-columns: auto;
				grid-template-rows: minmax(8em, 12em);
				grid-template-areas: 
						"slidevid slidetxt";
			}
				.main #section-a .section-content .slides .slide-vid {
					grid-area: slidevid;
					width: 100%;
					height: auto;
					padding: 0.5em 0 0.5em 0;
					align-self: stretch;
				}
					.main #section-a .section-content .slides .slide-vid > img {
						height: 100%;
						width: 100%;
					}
					.main #section-a .section-content .slides .slide-vid #vidplay {
						  position: relative;
						  top: -65%;
						  left: 40%;
						  width: 5em;
						  height: 5em;
						  margin: 0;
						  z-index: 10;
						  content: url("../img/layout/play-white.png");
					}
						.main #section-a .section-content .slides .slide-vid:hover {
							cursor: pointer;
						}
						.main #section-a .section-content .slides .slide-vid:hover #vidplay {
							content: url("../img/layout/play-black.png");
						}
						.main #section-a .section-content .slides .slide-vid:hover > img {
							opacity: 0.4;
						}
				.main #section-a .section-content .slides .slide-text {
					grid-area: slidetxt;
					padding: 0.5em;
				}
					.main #section-a .section-content .slides .slide-text > h4 {
						padding: 0 0.5em 0.5em 0.5em;
					}
					.main #section-a .section-content .slides .slide-text > p {
						padding: 0.5em;
						border-top: 1px solid black;
					}
				.main #section-a .section-content .slides > a {
					text-decoration: none;
					color: rgb(43, 59, 186);
					padding: 0.5em 0.5em 0 0;
				}
				.main #section-a .section-content .slides a:hover {
					text-decoration: underline;
				}

		/* section b */
	.main #section-b {
		padding: 2em 1em 1em;
	}
		.main #section-b ul {
			display: flex;
			justify-content: space-around;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.main #section-b li {
			width: 31%;
			margin: 0 0 1em 0;
			background: #fff;
			color: #333;
		}
			.main #section-b .card:hover a {
				text-decoration: none;
				border-bottom: 2px solid blue;
				color: rgb(43, 59, 186);
			}
				.main #section-b .card-content {
					padding: 1.5em;
				}
	/* section c */
	.main #section-c {
		background: #fff;
		color: #333;
		padding: 1em 2em 2em 2em;
	}
		.main #section-c .section-title {
			border-bottom: 1px solid black;
		}
		.main #section-c a:hover #ministry-more {
			border-bottom: 2px solid blue;
			color: rgb(43, 59, 186);
		}

	/* section d */
	.main #section-d {
		display: flex;
		-webkit-display: flex;
		-ms-display: flex;
		-o-display: flex;
	}
		.main #section-d .box {
			padding: 2em;
			color: #fff;



		}
		.main #section-d .box h2.content-title {
			
		}
		.main #section-d .box a {
			text-decoration: none;
			color: #fff;
		}
			.main #section-d .box a:hover {
				color: rgb(43, 59, 186);
			}
		.main #section-d .box:first-child {
			background: #2690d4;
			width: 20em;
		}
			.main #section-d .box:first-child > div {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
			    justify-content: space-around;
			}
				.main #section-d .box:first-child > div img {
					width: 32px; 
					height: 32px;
					margin: 0 auto;
				}
		.main #section-d .box:last-child > div {
			line-height: 1.5em;
			font-size:1.25em;
		}
			.main #section-d .box:last-child > div > table {
				max-width: 500px;
				border: 2px solid white;
				border-collapse: collapse;

			}
				.main #section-d .box:last-child > div > table > th:first-child {
					border: 2px solid white;
				}

				.main #section-d .box:last-child > div > table th {
					border: 1px solid white;
				}
				.main #section-d .box:last-child > div > table td {
					border: 1px solid white;
					padding: 1em 0.2em 0 0.2em;
					text-align: center;
				}
				.main #section-d .box:last-child > div > table > td > a {
					
				}
					.main #section-d .box:last-child > div > table > tr:first-child > td {

					}

	.section-title, 
	.content-title, 
	.card-title {
		margin: 0;
		padding: 1em 0 0.5em 0;
	}


/* FOOTER */
footer {
	grid-area: footer;
	background: lightgray;
	text-align: center;
	padding: 2em;
}

/* MISC CLASSES */
.grid {
	display: grid;
}
.flex {
	display: flex;
}
.section-content {
	padding: 0 1.5em;
}
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}
.hidden {
	display: none;
}
.shown {
	display: block;
}
.noDecoration {
	text-decoration: none;
	color: #000;
}
.noscroll {
    /*position: fixed!important;*/
    overflow: hidden;
}
.yesOpacity {
	opacity: 1;
}
/* for add/edit buttons */
.btnSelected {
	background: rgb(7, 62, 153);
	color: #fff;
}
.error h3 {
	color: red;
	text-align: center;
	margin-bottom: 1em;
}

.modal {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	overflow: hidden;
}
	.modal .close { margin-top:0.5em; }
	.modal .close:hover { cursor:pointer; color:darkgray; }
	
	.modal .modal-content {
		width: auto;
		max-width: 750px;
		min-width: 320px;
		height: auto;
		border-radius: 3px;
		border: 2px solid black;
		margin-top: 1em;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	}

		.modal .modal-content h3 {
			margin-top:0.2em;
		}
	
		.modal .modal-content #eventMod {
			width: 100%;
		}
			.modal .modal-content #eventMod table {
				margin: 0 auto;
				border-spacing: 0.3em 0.5em;
			}
				.modal .modal-content #eventMod table tr {
					margin: 1em 0;
				}
				.modal .modal-content #eventMod table tr th {
					text-align: right;
				}
				.modal .modal-content #eventMod table tr td {
					text-align: left;
				}
				.modal .modal-content #eventMod #editButtons { text-align: center;}
					.modal .modal-content #eventMod .editEventBtns { 
						padding: 0.5em 1em;
						margin: 0 0.5em;
						cursor: pointer;
					}
					.modal .modal-content #eventMod .editEventBtns:hover { background: lightblue; } 
			.modal .modal-content #eventMod img {
				height: 25em;
				max-width: 100%;
				margin-bottom: 0.5em;
			}

		.modal#vidmodal .modal-content {
			margin: 1em auto;
		}

		.modal .modal-content#vidmodcon {
			margin: 1em auto;
		}
		.modal .modal-content .modal-header {
			width: 100%;
			height: 2em;
			padding: 0.5em;
			background: #fff;
			text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
			text-align: center;
		}
		.modal .modal-content .modal-body video {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			padding: 0;
		}
		.modal .modal-content .modal-body > div {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			padding: 0;
		}


		/******************************
					Login
		*******************************/
.modal#login-modal .modal-content {
	margin: 1em auto;
}		
.login-header {
	background: black;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: auto;
  	grid-template-rows: auto 1fr auto;
  	grid-template-areas:
  		"login-error"
  		"login-image"
  		"login-form";
  	justify-items: center;
  	align-items: center;
  	justify-content: stretch;
  	align-content: stretch;
}
	.login-header #errors {
		grid-area: login-error;
		background: lightgray;
		color: red;
		font-size: 20pt;
		position: absolute;
	}
	.login-header a img {
		grid-area: login-image;
	}
	.login-header #login-form {
		grid-area: login-form;
		width: 100%;
		height: 100%;
		text-align: center;
		display: grid;
		grid-template-columns: auto;
	  	grid-template-rows: repeat(3, 1fr);
	  	grid-template-areas:
	  		"login-user"
	  		"login-pass"
	  		"login-but";
	}
		.login-header #login-form > input {
			text-align: center;
 			font-size: 1.5em;
		}
		.login-header #login-form #username {
			grid-area: login-user;
		}
		.login-header #login-form #password {
			grid-area: login-pass;
		}
		.login-header #login-form #login-submit {
			grid-area: login-but;
			background: rgb(43, 59, 86);
			color: lightyellow;
			padding: 0.5em 0;
			cursor: pointer;
		}
			.login-header #login-form #login-submit:hover {
				background: lightgray;
				color: rgb(43, 59, 86);
			}