body {margin:0; font-family: 'Open Sans', sans-serif; background-color: lightblue;}
img {display:block; width:100%; margin-left:auto; margin-right:auto;}
h1 {font-size: 2em; line-height: 1.6; color:#405d27; border-bottom: 1px solid #ccc;}
h2 {font-size: 1.2em; color:#405d27;}
p {font-size: 1em; line-height: 1.6; color: #000;}

a:link {color: #000;}
a:hover {color: #225799; text-decoration: underline;}
a:active {color: #000;}
a:visited {color: #000;}

p.alink a:link {color:#000;}
p.alink a:visited {color:#000;}
p.alink a:hover {color:#225799;}
p.alink a:active {color:#000;}


ul.alink a:link {color:#000;}
ul.alink a:visited {color:#000;}
ul.alink a:hover {color:#225799;}
ul.alink a:active {color:#000;}

video {width: 100%;}
map {width: 580px; height: 580px;}

select {height:40px; font-size: 1.2em;}

.break {word-break: break-all; overflow-wrap: normal;}


.wrapper {width:100%; max-width:980px; margin:0 auto}
.heading {width:100%; margin:0 auto; padding:0;}
.container {width:100%; margin:0 auto; padding:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.container-table {width:100%; margin:0 auto; padding:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
/* Two Column Layout */
.main, .right {background-color: #fff;}
.main {width:70%; padding:0 20px;}
.right {width:30%; padding:0 20px;}
.main-full {background-color: #fff;}
.main-full {width:100%; padding:0 20px;}

.content-box {border: 1px solid #ccc; margin-top: 20px; padding:0 20px;}
.content-box:last-child {margin-bottom: 20px;}
.right-box {background-color: #f8f8f8; color: #fff; border: 1px solid #576979; margin-top: 20px; padding:0 20px;}
.footer {width:100%; max-width:960px; margin:0 auto; padding:0 1%; padding-bottom:1px; text-align:center; border-top: 1px solid #ccc; background-color: #fff;}

/* responsive table */ 

/* .responsive-table{overflow-x:auto;} */
.mytable-responsive {
	border-collapse: collapse;
	width: 100%;
	margin-top:20px;
	margin-bottom:20px;
}
.mytable-responsive td, .mytable-responsive th {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}
.mytable-responsive th {
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: #86af49;
	color: white;
}
.mytable-responsive tr:nth-child(even){background-color: #f2f2f2;}
.mytable-responsive tr:hover {background-color: #92a8d1}
.hl-today { background-color: #98FB98; font-weight: bold;}
.hl-friday { background-color: #86af49; color: #fff; font-weight: bold;}
.hl-bold {font-weight: bold;}

/* table */
.mytable {
	border-collapse: collapse;
	width: 100%;
	margin-top:20px;
	margin-bottom:20px;
}
.mytable td, .mytable th {
	border: 1px solid #ddd;
	padding: 8px;
	width: 50%;
	text-align: center;
}
.mytable th {
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: #86af49;
	color: white;
}
.mytable tr:nth-child(even){background-color: #f2f2f2;}
.mytable tr:hover {background-color: #ddd;}

/* my button */
.mybutton:first-child {margin-top: 20px;}
.mybutton a:link, a:visited {
	background-color: #225799;
	color: white;
	margin-bottom: 10px;
	padding: 14px 0;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
}
.mybutton a:hover, a:active {
  background-color: #92a8d1;
}

/* my nav */			
.my-nav {
	width: 100%;
	font-size: 11pt;
	position: relative;
	border-bottom: 1px solid #86af49;
	margin:0;
	padding:0;
}
.my-nav ul {
	height: 40px;
	padding: 0;
	margin:auto;
	background-color: #d5e1df;
}
.my-nav li {
	display: inline;
	float: left;
	background-color: #d5e1df;
}
.my-nav a {
	color: #000;
	display: inline-block;
	padding-left: 18px;
	padding-right: 18px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
}
.my-nav li a {
	border-right: 1px solid #405d27;			
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.my-nav li:first-child a {
	 border-left: 0;
	 /* border-left: 1px solid #405d27; */
}
.my-nav li:last-child a {
	 border-right: 0;
}
.my-nav a:hover {
	background-color: #92a8d1;
	color: #fff;
}
.my-nav a:active {
	background-color: #225799;
	color: #fff;
	font-weight: bold;
}		
.my-nav a#pull {
	display: none;
}

/* my nav two */			
.my-nav-two {
	width: 100%;
	font-size: 11pt;
	position: relative;
	border-bottom: 1px solid #86af49;
	margin:0;
	padding:0;
}
.my-nav-two ul {
	height: 40px;
	padding: 0;
	margin:auto;
	background-color: #d5e1df;
}
.my-nav-two li {
	display: inline;
	float: left;
	background-color: #d5e1df;
}
.my-nav-two a {
	color: #000;
	display: inline-block;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
}
.my-nav-two li a {
	border-right: 1px solid #405d27;			
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.my-nav-two li:first-child a {
	 border-left: 0;
	 /* border-left: 1px solid #405d27; */
}
.my-nav-two li:last-child a {
	 border-right: 0;
}
.my-nav-two a:hover {
	background-color: #92a8d1;
	color: #fff;
}
.my-nav-two a.active {
	background-color: #86af49;
	color: #fff;
	font-weight: bold;
}		
.my-nav-two a#pulltwo {
	display: none;
}

/* Active Link  */
body#home		a#home,
body#visits		a#visits,
body#prayer		a#prayer,
body#about		a#about,
body#services	a#services,
body#gmbc		a#gmbc,
body#gallery	a#gallery, 
body#audio		a#audio, 
body#find		a#find,
body#live		a#live,
body#jan		a#jan,
body#feb		a#feb,
body#mar		a#mar,
body#apr		a#apr,
body#may		a#may,
body#jun		a#jun,
body#jul		a#jul,
body#aug		a#aug,
body#sep		a#sep,
body#oct		a#oct,
body#nov		a#nov,
body#dec		a#dec
{
	background-color: #225799;
	color: #fff;
}


/*Styles for screen 960px and lower*/
@media screen and (max-width: 960px) {
	.my-nav { 
		height: auto;
		border-bottom: 0;
	}
	.my-nav ul {
		width: 100%;
		display: none;
		height: auto;
	}
	.my-nav li {
		display: block;
		float: none;
		width: 100%;
	}	
	.my-nav li a {
		border-bottom: 1px solid #405d27;
		border-left: 1px solid #405d27;
	}
	.my-nav li:first-child {
		border-top: 1px solid #405d27;
	}
	.my-nav li:last-child a {
		 border-right: 1px solid #405d27;
	}	
	.my-nav a {
		text-align: center;
		width: 100%;
		text-indent: 25px;
		padding: 0;
	}			
	.my-nav a#pull {
		display: block;
		background-color: #333;
		color: #fff;
		width: 100%;
		position: relative;
		font-weight: bold;
	}
	.my-nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}


	.my-nav-two { 
		height: auto;
		border-bottom: 0;
	}
	.my-nav-two ul {
		width: 100%;
		display: none;
		height: auto;
	}
	.my-nav-two li {
		display: block;
		float: none;
		width: 100%;
	}	
	.my-nav-two li a {
		border-bottom: 1px solid #405d27;
		border-left: 1px solid #405d27;
	}
	.my-nav-two li:first-child {
		border-top: 1px solid #405d27;
	}
	.my-nav-two li:last-child a {
		 border-right: 1px solid #405d27;
	}	
	.my-nav-two a {
		text-align: center;
		width: 100%;
		text-indent: 25px;
		padding: 0;
	}			
	.my-nav-two a#pulltwo {
		display: block;
		background-color: #333;
		color: #fff;
		width: 100%;
		position: relative;
		font-weight: bold;
	}
	.my-nav-two a#pulltwo:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
	
	.main, .right {width:90%; padding:0 5%;}
	.main-full {width:90%; padding:0 5%;}
	.footer {width:90%; padding:0 5%; padding-bottom:1px;}
	
	.container-table {width:100%; padding:0;}
	.mytable-responsive {padding:0;}		
	
	video {width: 100%;}
	iframe {width: 100%; height: 300px;}
	iframe.live {width: 100%; height: 180px;}

	
	.myOrder {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient:vertical; -webkit-box-direction:reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse;}
	.myOrderOther {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
	
	/* Ordering 
	.myOrder {display:flex; flex-direction: column;}
	.myOrderOne {background-color:red; order:1;}
	.myOrderTwo {background-color:blue; order:2;}
	.myOrderThree {background-color:green; order:3;} */
	
}