header, nav, main, footer {display: block;}
*, *::before, *::after {box-sizing: border-box;}

header {
	width: 100%;
	position: sticky;
	top: 0;
	
	margin-top: 1.7em;
	margin-bottom: 1.7em;
	
	background-repeat: no-repeat;
	background-size: 368px 160px;
	
	z-index: 999; /*Fixes the <audio> tag showing up above the title*/
	transition: all 0.5s;
	}
	
.headerScroll {
	/*background-color: #554433;*/
	background-color: #403520;
	background-color: #336538;
	background-image: url(images/nav/prov_temp5_trans2_mini_cropped5.png);
	background-position: center left;
	box-shadow: 0px 0px 15px #222222;
}

.headerDivScroll {
	background-image: url();
	background-color: transparent;
	border: 0px solid #000000;
	border-radius: 0;
	
	transition: all 0.5s;
}
	
nav {
	float: top;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 0px;
	/*max-width: 180px;*/

	display: flex;
	}
	
nav div {
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 40px;
}

nav ul a {
	text-decoration: none;
	color: #ffffff;
	font-style: normal;
	font-family: "Times New Roman";
	/*display: flex;*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 130px;
	/*background-color: #1a2a3a;*/
	background-color: #403520;
	background-color: #225522;
	transition: all 0.1s;
	}
	
nav ul a:hover {
	text-decoration: none;
	font-style: normal;
	text-shadow: 1px 1px 3px #fff;
	background-color: #22bb22;
	transition: all 0.1s;
	}
	
#headerdiv a {display: flex;}
	
#headerdiv h1 {margin-bottom: auto; margin-top: auto;}
	
#headerdiv img {
	margin-left: 10px;
	margin-right: 10px;
	width: 40px;
	height: 64px;
	}
	
nav ul img {
	vertical-align: middle;
	width: 16px;
	height: 16px;
	}
	
nav span {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
}
	
nav ul {
	list-style-type: none;
	padding: 6px;
	/*background-color: #1a2a3a;*/
	
	display: inline-block;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 0;
	margin-left: auto;
	}
	
nav ul li {
	text-align: left;
	display: inline-block;
	overflow: hidden;
	border: 1px solid #112211;
	border-radius: 10px;
	margin-left: 2px;
	margin-right: 2px;
	
	font-weight: bold;
	}
	
nav ul ul {
	position: absolute;
	/*left: 175px;*/
	/*top: 36px;*/
	/*border: 1px solid #000000;
	background-color: #1a2a3a; */
	display: none;
	padding-left: .2em;
	padding-top: .2em;
	padding-right: .2em;
	padding-bottom: .2em;
}

nav ul ul li {
	position: relative;
	
	display: block;
	
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 0;
	margin-right: 0;
	
}

nav li:hover ul {display: block;}

nav ul ul a	{width: 130px;}

a {
	color: #2360dd;
	font-style: italic;
	}

main {
	padding-top: 0px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-left: 180px;*/
	overflow: auto;
	background-color: #ebebe5;
	/*background-color: #02090f;*/
	/*background-color: #eceff1;*/
	
	min-height: 250px;
	
	color: #333333;
	}

body {
	/*color: #ddd;*/
	background-color: #93796a;
	background-image: url(images/background.png);
	background-repeat: no-repeat;
	
	/*background-color: #000000;*/
	background-size: 100% auto;
	margin: 0;
	}

footer {
	padding-top: 12px;
	text-align: center;
	/*background-color: #223355;*/
	background-color: #3a3a3a;
	font-size: 10px;
	font-family: arial;
	
	color: #eee;

	}
	
footer a {font-weight: bold;}

#wrapperHeader {
	width: 80%;
	margin: auto;
	/*background-color: #1a2a3a;*/
	border: 1px solid #000000;
	box-shadow: 2px 2px 2px #222;
	}
	
#wrapperBody {
	margin-top: 5em;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	/*background-color: #1a2a3a;*/
	/*border: 1px solid #000000;*/
	box-shadow: 0px 0px 15px #444444;
	}
	
#HomePictures {
	height: 28em;
	
	max-width: 45em;
	min-width: 20em;
	/*need to modify width/height in mobile view*/

	margin-left: auto;
	margin-right: auto;
	position: relative;
	
	border: 1px solid #404040;
	box-shadow: 0px 0px 6px #202020;
	
	transition: all 0.5s;
	
}

#HomePictures img {
	height: 100%;
	width: 100%;
	position: absolute;
	/*background-image: url(images/home/image0.jpeg);
	background-size: 100% 100%;*/
	transition: all 0.5s;

}

#HomePictures ul {
	list-style-type: none;
	position: absolute;
	
	width: 100%;
	
	padding: 10px;
	
	/*background-color: #ff0000;*/
	display: flex;
	justify-content: right;
	font-size: 0;
	
}

#HomePictures ul li {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	
	box-shadow: 0px 0px 3px #ffffff;
}

.HomePicturesButton {
	border: 1px solid #ffffff;
	background-color: #ebebe5;
	opacity: 0.6;
}

#HomePictures ul li:hover, .HomePicturesButtonSelected {
	border: 1px solid #ebebe5;
	background-color: #ffffff;
	opacity: 0.9;
}

/*#HomePicturesImg0 {
	opacity: 0.0;
	}
#HomePicturesImg1 {
	opacity: 0.0;
	}
#HomePicturesImg2 {
	opacity: 0.0;
	}*/
	
.HomePictureHidden {
	opacity: 0.0;
	transition: all 0.5s;
}
	
#footerContact {
	position: relative;
	/*background-color: #330000;*/
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	
}

#footerSocials {
	display: inline-block;
	position: relative;
	background-color: #333333;
	margin-top: 6px;
	margin-bottom: 6px;
	margin-right: auto;
	margin-left: auto;
	padding: 6px;

	max-width: 40%;
	vertical-align: top center;
	/*box-shadow: 0px 0px 10px #333333;*/
	box-shadow: 0px 0px 15px #202020;
}

footer div ul {
	display: inline-block;
	padding-left: 0;
	margin: 0;
	text-align: bottom;
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5px;
	padding-right: 5px;
	/*background-color: #225522;*/
	background-color: #333333;
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 15px #202020;
	
	/*background-color: #1a2a3a;*/
	/*border: 1px solid #000000;
	box-shadow: 2px 2px 2px #222;*/
	}
	
footer div ul li {
	/*background-color: #336538;*/
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: top;
	text-align: left;
	width: 300px;
	height: 300px;
	display: inline-block;
	/*border: 1px solid #ffffff;*/
	border-radius: 10px;
	}
	
#footerDirSubBarrier {
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 2px;
	height: 300px;
	
	display: inline-block;
	border: 1px solid #999;
	/*later include something to hide this if the page size is phone'd*/
	}
	
footer div ul li h3 {
	color: #ccc;
	text-shadow: 0px 0px 5px #111;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
footer div ul li span {
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	}
	
#footerSocBarrier {
	margin-left: 4px;
	margin-right: 4px;
	width: 2px;
	height: 24px;
	
	display: inline-block;
	border: 1px solid #999;
	/*later include something to hide this if the page size is phone'd*/
	}

#map {
	background-color: #000038;
	height: 240px;
    
	margin-left: 2px;
	margin-right: 2px;
}

#footerCredits {
	position: relative;
	background-color: #051550;
	margin-right: auto;
	margin-left: auto;
	padding: 6px;
	width: 100%;
	box-shadow: 0px 0px 15px #202020;
}

h1 {
	text-decoration: none;
	font-style: normal;
	font-family: "Times New Roman";
	font-size: 38px;
	text-align: left;
	font-family: arial, sans-serif;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	margin: 0px;
	transition: all 0.1s;
	}
	
.h1scroll {
	text-shadow: 1px 1px 3px #ccc;
}
	
h1:hover {
	text-shadow: 1px 1px 3px #ccc;
	transition: all 0.1s;
	}
	
.h1scroll:hover {
	text-shadow: 1px 1px 5px #fff;
}
	
h2 {
	font-family: arial, sans-serif;
	font-size: 32px;
	/*color: #2360dd;*/
	color: #000000;
	text-shadow: 0px 0px 3px #ccc;
	}
	
h3 {
	font-family: arial, sans-serif;
	font-size: 26px;
	/*color: #2360dd;*/
	color: #000000;
	text-shadow: 0px 0px 3px #ccc;
	}
	
h4 {
	font-family: arial, sans-serif;
	font-size: 22px;
	color: #000000;
	}

p, span {
	font-family: arial;
	}
	
p {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 20px;
	/*line-height: 25px;*/
	}

span {
	padding-left: 4px;
	padding-right: 4px;
	font-size: 16px;
	line-height: 20px;
	}
	
/************************************
 *			SERMON SECTION			*
 ************************************/
	
#sermon {
	padding-top: .25em;
	padding-bottom: .001em;
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	
	background-color: #dFdFdF;
	box-shadow: 0px 0px 1px #202020;
	
}

#sermon h3 {
	font-size: 1.75em;
	/*margin-top: .5em;
	margin-bottom: 1em;*/
	margin-top: .5em;
	margin-bottom: .5em;
}

#sermon p {
	margin-top: .75em;
	margin-bottom: .75em;
}

#sermon ul {
	margin: 0;
	padding: 0;
	font-size: 0px;
}

#sermon ul li {
	display: inline-block;
	overflow: hidden;
}

#sermonuldivcontainer {
	margin-top: .75em;
	margin-bottom: .75em;
}
	
#sermon-about li {
	/*margin-left: 4px;
	margin-right: 4px;*/
	margin-right: 8px;
	
	background-color: #afafaf;
	box-shadow: 0px 0px 1px #202020;
}

#sermon-about span {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	padding-left: 0px;
	padding-right: 0px;
	margin-right: 5px;
}

#sermon-about img {
	display: flex;
	vertical-align: middle;
	width: 30px;
	height: 30px;

	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 0px;
}

#sermon-about-date {
	/*width: 140px;*/
}

#sermon-about li div {
	justify-content: center;
	display: flex;
}

#sermon-about-time {
	/*width: 70px;*/
}

#sermon-about-speaker {
	width: 240px;
}
	
#sermon-media {
	/*background-color: #ffffff;*/
	display: flex;/*see about switching this to inline-block once you can figure out where that extra pixel is coming from. probably from fontsize...*/
}

#sermon-media li {
	border: 1px solid #112211;
	margin-right: 10px;
	border-radius: 120px; 
}

#sermon-media img {
	display: flex;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 12px;
	padding: 4px;
}

#sermon-media-audio {
	/*set to the max because the max curve is controlled by the <audio> element*/
}
	
#sermon-media-download {
	background-color: #f1f3f4;
	/*width: 56px;*/
	/*height: 56px;*/
}

#sermon-media-download a {
	display:inline-block;
}

#sermon-media-download img:hover {
	background-color: #e5e7e8;
	border-radius: 40px; 
	
	transition: all 0.2s;
}
	
	
	
	
	
	
	
	
	
table {
	background-color: #22292f;
	color: #fff;
	border-spacing: 0;
	}
	
td, th {
	padding-top: .25em;
	padding-bottom: .25em;
	padding-right: .5em;
	padding-left: .25em;
	font-family: arial;
}

th {text-align: center;}
	
tr:first-of-type {background-color: #051550; color: #eaeaea;}
tr:nth-of-type(even) { background-color: #42494f; }

.listcompat {
	color: #ddd;
	font-family: arial, sans-serif;
	border: 1px solid #051550;
	padding: .3em;
	padding-left: 2em;
	background-color: #000000;
	}
	
.listcompat li {padding: .2em;}
	
.floatright {
	float: right;
	clear: right;
	border: 1px solid #051550;
	margin-left: 1em;
	}
	
.floatleft {
	float: left;
	clear: left;
	border: 1px solid #051550;
	margin-right: 1em;
	}
	
.container {
	overflow: auto;
	text-align: left;
	margin-bottom: 2em;}
	
.filepath {
	color: #2360dd;
	font-weight: bold;
	}
	
.faqq {font-size: 18px;
	font-weight: bold;
}

.faqa {margin-left: 1em;}

.thejispronouncedh {color: #2360dd;}

.godown {margin-top: 2em;}

.nounderline {text-decoration: none;}

.underline {text-decoration: underline;}

.makesmall {
	width:2.5em;
	height:2.5em
}

.center {
	text-align: center;
}

.anchor {
	scroll-margin-top: calc(20px + var(--nav-height, 90px));
    /*scroll-margin-top: 100px;*/
}

@media only screen and (min-width: 1651px) {
	body {background-size: 100% auto;}
	
	}

@media only screen and (max-width: 1024px) {
	header {
		margin: 0px;
		padding-bottom: .75em;
		padding-top: .75em;
		}
	
	body {margin: 0;}
		
	#wrapperBody {
		width: 100%;
		box-shadow: none;
		}

	h2 {text-align: center;}
		
	main {margin-left: 0;}
		
	nav {
		min-width: 100%;
		text-align: center;
		padding-left: 0;
		}
		
	nav a {
		padding-bottom: 1em;
		padding-top: 1em;
		}

	.anchor {
		scroll-margin-top: calc(40px + var(--nav-height, 130px));
		/*scroll-margin-top: 130px;*/
	}
		
	}

@media only screen and (max-width: 768px) {
	h1 {
		font-size: 1.5em;
		text-align: center;
		margin: 0;
		}
		
	main {padding-top: 0px;}
		
	h3 {text-align: center;}

	.phonehide {display: none;}

	#headerdiv {
		margin: 0;
		}
		
	footer div ul li {

		display: block;
		}
		
	#footerDirSubBarrier {
		display: none;
		border: 1px solid #fff;
		}
	
	}