/*  
Theme Name: SGG
Theme URI: http://www.sgg.org/
Description: St. Gertrude the Great Website
Version: 2.20
Author: Nick McClorey, Andrew Richesson

*/


* {
	font-family: "Times New Roman", Times, serif;
}

body {
	margin: 0px;
	min-height: 100vh;
	background: rgb(240, 240, 240);
	display: grid;
}
a {
	color: #990033;
	text-decoration: none;
}
a:hover {
	color: #CC3366;
}
#s {
	border: 1px solid black;
	height: 18px;
	width: 100px;
}
#contentWrapper {
	min-height: 80vh;
	padding-bottom: 50px;
}
#container {
	margin: auto;
	padding: 40px 50px 20px 50px;
}
#footer {
	align-self: center;
	border-top: 4px solid #DDD;
	background: #EEE;
	padding: 10px 50px 10px 50px;
	color: black;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-content: center;
	text-align: center;
}
#footer div {
	display: inline;
}
.address {
	font-size: 17px;
}
#footer p, #footer a {
	font-size: 17px;
	margin: 0px;
}

.single h2 a, .archivepage h2 {
	font-size: 30px;
	margin: 0px 0px 10px 0px;
}
.post {
	border-top: 1px solid #000;
	padding: 5px 0px 0px 0px;
}
.post p, .post ul {
	margin: 0px 0px 0px 00px;
	list-style-type: none;
}
.post p {
	line-height: 120%;
	padding: 5px 0px 5px 0px;
	text-align: justify;
}
.post h4 {
	padding: 10px 0px 5px 135px;
	text-align: justify;
}
.mediatitle {
	font-size: 20px;
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 5px 0px;
	display: block;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.post h3 a {
	font-size: 20px;
}
.post .category {
	/* color: #999999; */
	float: left;
	text-transform: uppercase;
	font-size: 15px;
	padding: 3px 0px 0px 0px;
}
.single {
	float: left;
	width: 100%;
	text-align: justify;
}
.single p, .archivepage p {
	padding: 0px 0px 10px 0px;
	line-height: 18px;
}
.single ul, .single li {
	list-style-type: disc;
	padding: 10px;
}
.single h4 {
	padding: 10px 0px 5px 0px;
}
.single .times td, .single .times th {
	padding: 5px;
	text-align: left;
}
.single .times th {
	width: 70px;
}
.single .postmetadata {
	margin: 10px 0px 0px 0px;
	border-top: 1px solid black;
	padding: 10px 0px 0px 0px;
	color: #999;
}
.archivepage .post h3, .archivepage .post p {
	margin-left: 0px;
}
.archivepage small {
	color: #999999;
}
.archive {
	margin: -5px 0px 5px 0px;
}

.sermonnav {
	margin: 30px 0px 0px 0px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	row-gap: 30px;
}

#sermon-bulletin-wrapper .announcementnav {
	padding-bottom: 30px;
}

#sermon-bulletin-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: flex-start;

	> div {
		width: 100%;
	}
	gap: 30px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
}

#calendar {
	width: 90vw;
	padding-left: 5vw;
	padding-right: 5vw;
	height: 80vh;
}

.sermonnav a {
	color: #FFFFFF;
	font-family: verdana, helvetica, arial;
	font-size: 0.9vw;
	max-width: 500px;
	text-align: center;
	margin: 0;
	padding: 10px 15px 10px 30px;
}
@media (max-width: 1300px) { 
	.sermonnav a {
		font-size: 0.7vw;
	}
}

.sermonnav a:hover {
	cursor: pointer;
}
.sermonnav .download {
	background: url(images/download-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}
.sermonnav .preview {
	background: url(images/church-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}
.sermonnav .read {
	background: url(images/book-open-reader-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}
.sermonnav .sermonarchive {
	background: url(images/play-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}
.sermonnav .newsletter {
	background: url(images/envelope-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}
.sermonnav .massrequests {
	background: url(images/cross-solid.svg) #990033 no-repeat 10px 50%;
	background-size: auto 70%;
}


/* This is a mp3 player */
.mejs-container {
	z-index: 0;
	width: 100% !important;
}

/* html {
	padding-top: 0px;
	margin-top: 0px;
} */

#topbar {
	background-color: rgb(240, 240, 240);
	padding: 10px 0% 10px 0%;
	box-shadow: 0px 0px 4px gray;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: fixed;
	width: 100%;
	z-index: 2;
}
nav {
	justify-self: end;
	padding: 10px 10% 10px 10px;
	position: fixed;
	right: 10px;
	display: inline-block;
	z-index: 3;
}
nav .menuitem {
	background-color: transparent;
	padding: 10px 10px 5px 10px;
	margin-right: 10px;
	color: #990033;
	border-width: 1px;
	border-color: #990033;
	display: inline-block;
	grid-template-columns: 1fr;
}
nav .feedscontent {
	display: none;
}
nav .menuitem:hover {
	background-color: #990033;
	color: rgb(240, 240, 240);
}
#logo {
	background: url(images/bolnisi_cross.png) no-repeat;
	margin-left: 10%;
	padding-left: 60px;
	font-size: 150%;
	line-height: 200%;
	display: inline;
	background-position-y: 50%;
	background-size: 40px;
}
#topspacer {
	height: 55px;
}

#centerpiece {
	width: 100%;
	padding-bottom: 20%;
	background: url(images/building_2024.jpg) no-repeat bottom center;
	background-position: 0px 0px 50% 50%;
	background-size: cover;
	color:#990033;
	font-family: 'Times New Roman'
}
#centerpiece div {
	padding: 40px 70px 40px 70px;
	display:inline-block;
}
#centerpiece h1 {
	font-size: 400%;
	margin: 0px;
}
#centerpiece p {
	font-size: 150%;
	margin: 0px;
}

#bottom {
	display: grid;
	grid-template-columns: 3fr 3fr;
	column-gap: 0px;
	padding-left: 50px;
	padding-right: 50px;
	background-color: rgb(240, 240, 240);
}

@media (max-width: 1200px) {
	#bottom {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}

	.sermonnav a {
		font-size: 1vh
	}

}

#bottom > div {
	margin: 0px 20px 0px 20px;
	padding: 10px;
	padding-top: 30px;
}

#sermon-bulletin-wrapper {
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	background-color: white;
	padding: 20px;
	padding-top: 10px;
}

#livestream-wrapper {
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	background-color: white;
	padding: 20px;
	padding-top: 10px;
}

.bottomColumn {
	max-width: 1080px;
}

#leftcolumn {
	justify-self: end; 
}

#leftcolumn h1 {
	font-size: 200%;
	margin-top: 20px;
}
#middlecolumn > h1 {
	font-size: 200%;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	background-color: white;
	margin-top: 20px;
	margin-bottom: 0px;
}

.old-articles {
	font-size: 20px;
	background-color: #990033;
	color: white;
	padding: 10px;
}

nav a,
nav form {
	text-decoration: none;
	color: #990033;
}
  
nav {
	font-family: monospace;
	font-size: 18px;
}
  
nav ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	font-size: inherit;
}
  
nav li {
	color: #990033;
	background: rgb(240, 240, 240);
	display: block;
	float: left;
	padding: 1rem;
	position: relative;
	text-decoration: none;
	font-size: inherit;
	transition-duration: 0.5s;
	margin-right: 10px;
}
	
nav li a {
	color: #990033;
  }

nav li:hover > a {
	color: rgb(240, 240, 240);
}
  
nav li:hover {
	background: #990033;
	color:rgb(240, 240, 240);
	cursor: pointer;
}
  
nav ul li ul {
	background: orange;
	visibility: hidden;
	opacity: 0;
	min-width: 5rem;
	position: absolute;
	transition: all 0.5s ease;
	margin-top: 1rem;
	left: 0;
	display: none;
}
  
.activeDropdown,
nav ul li:hover > ul,
nav ul li ul:hover {
	visibility: visible;
	opacity: 1;
	display: flex;
	flex-direction: column;
	/* box-shadow: 0px 0px 4px 4px gray; */
	box-shadow: 0px 8px 6px -10px black,
	8px 8px 6px -10px black, -8px 8px 6px -10px black;
}

nav ul li ul li {
	margin: 0;
	padding-right: 40px;
}

@media (max-width: 1000px) {
	#topspacer {
		height: 100px;
	}

	#topbar {
		height: 80px;
	}

	nav {
		padding: 0px;
		left: 0px;
		width:100%;
		right:auto;
		font-size: 2.5vw;
	}

	#logo {
		display: none;
	}


	#footer {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 2fr;
		text-align: start;
	}

	.address {
		display: grid;
		grid-template-rows: 1fr 1fr;
	}

	.copyright {
		grid-row-start: 1;
		grid-column-start: 2;
	}
}