*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-style: italic;
	font-family: Helvetica, Arial, Sans-Serif;
	}

.container {
	width: 100vw;
	height:100vh;
	position: relative;
	background-image: url("../img/2023 Choir.jpg");
	background-repeat:no-repeat;
	background-size: cover;
	background-size: 100%;
	background-position: top;
	background-blend-mode: multiply;
	text-align: center;
	}

.container_1 {
	text-align: center;
	}

.centered_0 {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

.centered_1 {
	position: absolute;
	top: 28%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

.centered_2 {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

.icon-inline {
	vertical-align: middle; /* Aligns the image vertically with the text */
	margin-left: 3vw;       /* Adds space after the text */
//	float: left;
//	margin-right: -12vw;
	width: 4%;
	height: auto;
	}

.icon {
	display: block;
	float: left;
	margin: 0vw 0 0 15vw;
	width: 4%;
	height: auto;
	}

a:link {
	color: red;
	background-color: transparent;
	}

a:visited {
	color: blue;
	background-color: transparent;
	}

a:hover {
	color: blue;
	background-color: transparent;
	}

a:active {
	color: yellow;
	background-color: transparent;
	text-decoration: underline;
	}

#main-nav
	{
	background: #ccc;
	padding: 0;
	position: absolute;
	z-index: 100;

	/* gradient */
	background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
	background: -moz-linear-gradient(top,  #b9b9b9,  #6a6a6a);

	/* box shadow */
	-webkit-box-shadow: inset 0 .1vw 0 rgba(255,255,255,.3), 0 .1vw .1vw rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 .1vw 0 rgba(255,255,255,.3), 0 .1vw .1vw rgba(0,0,0,.4);
	box-shadow: inset 0 .1vw 0 rgba(255,255,255,.3), 0 .1vw .1vw rgba(0,0,0,.4);
	}

#main-nav li
	{
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
	}

#main-nav a
	{
	color: black;
	text-shadow: .2vw .2vw .4vw yellow;
	font-weight: bold;
	display: block;
	}

#main-nav a:hover
	{
	color: #00ff00;
	background: #474747;

	/* gradient */
	background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
	background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
	background: linear-gradient(-90deg, #282828, #4f4f4f);
	}

.table1,	 /* monthly hymns */
.table2,	 /* sound bites */
.table3,	 /* hymns html */
.table4,	 /* videos */
.table5 {	 /* members */
	width: 100%;
	}

.table1 thead th,	 /* monthly hymns */
.table1 thead tr,
.table2 thead th,	 /* sound bites */
.table2 thead tr,
.table3 thead th,	 /* hymns html */
.table3 thead tr,
.table4 thead th,	 /* videos */
.table4 thead tr,
.table5 thead th,	 /* members */
.table5 thead tr {
	color: red;
	font-weight: medium;
	}

.table1 thead th,	/* monthly hymns */
.table1 thead tr,
.table2 thead th,	/* sound bites */
.table2 thead tr{
	text-align: center;
	}

.table1 th,		/* monthly hymns */
.table1 td,
.table2 th,		/* sound bites */
.table2 td,
.table3 thead th,	/* hymns html */
.table3 thead tr,
.table3 th,		/* hymns html */
.table3 td,
.table4 thead th,	/* videos */
.table4 thead tr,
.table4 th,	 	/* videos */
.table4 td,
.table5 thead th,	/* members */
.table5 thead tr,
.table5 th,		/* members */
.table5 td {
	text-align: left;
	}

h11, h12 {
	float: none;
	color: blue;
	text-align: center;
	}

h11{
	color: magenta;
	font-weight: bold;
	text-shadow: .2vw .2vw .4vw yellow;
	}

h13{
	color: red;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	}

/* responsive navigation settings */
audio { /* customized player */
	margin: -3vw 53vw;
	width: 28vw;
	display: block;
	}

div.a {
  	text-indent: 15vw;
	}

.centered_0 {
	top: 26%;
	left: 20vw;
	transform: translate(-.4vw);
	}

.centered_1 {
	top: 30%;
	left: 22vw;
	transform: translate(-.2vw);
	}

.centered_2 {
	top: 34%;
	left: 32vw;
	transform: translate(-.6vw);
	}

.myButton {
	width: 15vw;
	height: 3vw;
	border-radius: 2vw;
	font-size: 2vw;
	}

.fa-volume-up {
	font-size: 1.5vw;
	}

#main-nav
	{
	width: 70%;
	margin: 0vw 13vw;
	top: 7vw;	/* top location of navigation bar menu */

	/* rounded corner */
	-webkit-border-radius: 2.5vw;
	-moz-border-radius: 2.5vw;
	border-radius: 2.5vw;
	}

#main-nav li
	{
	margin: .4vw 2vw .4vw 2vw;	/* margin: top right bottom (text spacing) */
	}

#main-nav li:first-child
	{
	margin-left: 2.5vw;
	}

#main-nav a
	{
	font-size: 2.5vw;
	}

.table1,	 /* monthly hymns */
.table2,	 /* sound bites */
.table3,	 /* hymns html*/
.table4,	 /* videos */
.table5 {	 /* members */
	margin-top: 6vw;
	}

.table2 thead th,	 /* not used */
.table5 thead th {	 /* members */
	font-size: 1.5vw;
	line-height: 1.2vw;
	padding: 0vw 0vw 0vw 8vw;
	}

.table2 tr td,	/* not used */
.table5 tr td{	/* members */
	font-size: 1.25vw;
	padding: 0vw 0vw 0vw 8vw;
	}

.table1 thead th,	 /* monthly hymns */
.table3 thead th,	 /* hymns html */
.table4 thead th{	 /* videos */
	font-size: 1.5vw;
	line-height: 1.2vw;
	padding: 0vw 0vw 0vw 3vw;
	}

.table1 tr td,	/* monthly hymns */
.table3 tr td,	/* hymns html */
.table4 tr td{	/* videos */
	font-size: 1.25vw;
	padding: 0vw 0vw 0vw 3vw;
	}

h11{
	font-size: 2.5vw;
	line-height: 2.5vw;
	}

h12, h14{
	font-size: 2vw;
	line-height: 2vw;
	}

h13{
	font-size: 1.5vw;
	line-height: 1.5vw;
	}

/* settings for smaller screen */
@media only screen and (max-width: 480px) {
.icon {
	display: block;
	float: left;
	margin: .3vw 0 0 4vw;
	width: 4%;
	height: auto;
	}

audio { /* customized player */
	margin: -7.25vw 50vw;
	width:40vw;
	display: block;
	}

div.a {
  	text-indent: 10vw;
	}

.centered_0 {
	top: 28%;
	left: 3.6vw;
	transform: translate(-.4vw);
	}

.centered_1 {
	top: 29%;
	left: 6vw;
	transform: translate(-.2vw);
	}

.centered_2 {
	top: 30%;
	left: 25vw;
	transform: translate(-.6vw);
	}

#main-nav
	{
	width: 80%;
	margin: 0vw 10vw;
	top: 12vw;	/* top location of navigation bar menu */

	/* rounded corner */
	-webkit-border-radius: 2.5vw;
	-moz-border-radius: 2.5vw;
	border-radius: 2.5vw;
	}

#main-nav a
	{
	font-size: 3.0vw;
	}

h11{
	font-size: 3.5vw;
	line-height: 3.5vw;
	}

h12{
	font-size: 3vw;
	line-height: 3vw;
	}

h13{
	font-size: 2.5vw;
	line-height: 2.5vw;
	}

h14{
	font-size: 3vw;
	line-height: 3vw;
	}
}