/* VOT Style Sheet, Revised: 2019-09-07 */

/* Use for testing */
.brdr2-black { border: 2px solid black; }
.brdr2-blue  { border: 2px solid blue; }
.brdr2-green { border: 2px solid green; }
.brdr2-red   { border: 2px solid red; }
.brdr2-yellow { border: 2px solid yellow; }

.bg-amber {background-color:amber;}
.bg-black {background-color:black;}
.bg-blue  {background-color:blue;}
.bg-cyan  {background-color:cyan;}
.bg-ltgreen {background-color:lightgreen;}
.bg-red   {background-color:red;}
.bg-skyblue	{background-color:#87CEEB;}
.bg-yellow  {background-color:yellow;}

ins { color: teal; background-color: #FFFF00; text-decoration: underline;}
del { color: red; background-color: #FFFF00; text-decoration: line-through; }

/* Responsive Web Design
Start styling with general and cellphone (small screen) definitions */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body { 
  background: #f7f5ed;  /* #f7f5ed;  #dacda7; */
  height: auto;
  margin: 0; /* 0 5px 0 */
  line-height:1.4;
  
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.fs16px  { font-size:16px; } /*100.00%*/
.fs20px  { font-size:20px; } /*125.00%*/
.fs24px  { font-size:24px; } /*150.00%*/
.fs32px  { font-size:32px; } /*200.00%*/
.fs36px  { font-size:36px; } /*225.00%*/
.fs48px  { font-size:48px; } /*300.00%*/

.line-h125 {line-height:1.25}

.mgn-auto { margin:auto; }
.audio-player {
	margin-top:0;
	margin-bottom:0;
  margin-left: auto;
  margin-right: auto;
  
}

.pad8-tb { padding-top:8px; padding-bottom:8px; }
.pad16-tb { padding-top:16px; padding-bottom:16px; }

.wht--maroon, .hvr-wht--maroon:hover {color:#fff; background-color:#800000;}


.page {
  /*use base color #dacda7 and w3s color picker to get other shades*/
  background-image: linear-gradient( rgba(225,214,183,1),
    rgba(232,225,201,0.6) ); /* rgba(240,235,219,0.01) */
  /*background: #dacda7;*/
  height: auto;
  max-width:960px;
  margin: 0 auto 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 24px;
  /*border:2px solid red;*/
}
.pg-header {
  height: auto;
  /*width: 100%;*/
  max-width:960px;
  margin: 0;
  padding: 0;
  /*border:2px solid green;*/
}
.pg-header img {
  width:100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom; /* use so that there is no 4px bottom gap */
  /*border:2px solid blue;*/
}

.content {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  margin: 50px auto 0;
  /* padding: 0 5px; */
  width: 90%;
}
.content h1, h2, p {
  text-align: center;
}
.content h1 {
  font-size: 48px;
  /*border: 2px solid red;*/
}
.content h2 {
  font-size: 24px;
}
.content p {
  line-height:120%;
}

.learn {
  border-radius:22px;
  border:6px solid #800000;
  text-align:center;
  margin: 16px auto;
  width: 80%;
}

.learn-header {
  color:#fff;
  background-color:#800000;
  padding:8px 0;
}

.learn .link{
  margin: 0 auto;
  /*text-align: center;*/
}
.link a { /* .learn .link */
  display: block;
  background-color: lightgray;
  border:1px solid darkgray;
  border-radius:14px;
  color: blue;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  margin: 16px auto;
  padding: 5px 6px;
  max-width: 85%;
}
.link a:hover, a:active {
  background-color: darkgray;
}

.hr80 { margin: 30px 10%; }
.hr90 { margin: 30px 5%; }

/* Main Navigation Menu */
.nav-main {
  background-color: #111;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav-main a {
  background-color: #111;
  display: inline-block;
  color: white;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  margin: 8px 0;
  padding: 8px 5px;
  width: 120px;
}
.nav-main a:hover {
  background-color: #444;
}
.nav-main .pg-select {
  background-color: #800000; /* #7a1a02 #800000=Maroon */
}

/*Newsletter Navigation Menu */

.newslttr-nav{
  margin: 0 auto 30px;
  text-align: center;
}
.newslttr-nav a {
  display: inline-block;
  background-color: lightgray;
  border:1px solid #800000;
  border-radius:10px;
  color: #800000;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  margin: 8px 2px;
  padding: 5px 4px;
  width: 102px;
}
.newslttr-nav a:hover, a:active {
  background-color: darkgray;
}
.newslttr-nav .tab-select {  /*need to write js code to make it work*/
  color: #fff;
  background-color: #800000; /* #7a1a02 #800000=Maroon */
  border:1px solid #800000;
}

/* Footer */
.footer {
  text-align:center;
  margin: 0 auto 5px;
  width: 80%;
}
.footer p {
  font-size: 16px;
}
/*Footer Navigation Menu */
.footer nav{
  margin: 0 auto 30px;
  text-align: center;
}
.footer nav a {
  display: inline-block;
  background-color: lightgray;
  border:1px solid blue;
  border-radius:10px;
  color: blue;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  margin: 8px 2px;
  padding: 5px 4px;
  width: 102px;
}
.footer nav a:hover, a:active {
  background-color: darkgray;
}

/* Sermons, Audios Page */
/*Free Bible Study*/
.bible-study {
  font-size: 20px;
  text-align: center;
  margin:0 0 32px;
  /*border: 2px solid red;*/
}
.wbsOrg1 {
  display: block;
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  text-align: center;
  /*border: 2px solid blue;*/
}
.wbsOrg1 a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
}
.wbsOrg1 a:hover, a:active {
  text-decoration: underline;
}
/*Bible Study Page*/
.wbslogo {
  color: #fff;
  display: inline-block;
  width: 100px!important;
  height: 46px;
}

.boxPic {
  display: block;
  margin: 0 auto;
  width: 60%;
  /*border: 2px solid green;*/
}
.boxPic img {
  width:100%;
}

/*Sermon, Audio Media List*/
li { margin-bottom: .25em; }	/*use either: .25em .375em .5em*/
.medialist {
  margin:0 auto;
  width:94%;
  /*border: 2px solid red;*/
}
.medialist a:link, a:visited { text-decoration: none; }
.medialist a:hover, a:active { text-decoration: underline; }
.new {
  color: red;
  font-size: .625em;
  vertical-align: 5%;
}

/* About Us Page */
.au-list {
  margin:0 auto;
  padding-left:30px;
  width:95%;
}

/* Contact Us Page */
.formcu {
  width:100%;
  font-size: medium;
  margin-right:auto;
  margin-left:auto;
  padding:0;
}
.cu-table {
  margin-right:auto;
  margin-left:auto;

}
table, th, td {
  border: 2px solid gray;
  border-collapse: collapse;}

.cu-list {
  margin:0 auto;
  width:94%;
  /*border: 2px solid red;*/
}
/*
.tablecu {
  margin: 0 auto;
}
*/


/* Style definitions for tablets and desktops */
@media only screen and (min-width: 720px) {
  .content {
    width: 80%;
  }
  /*Audio-Sermon Media List*/
  .medialist {
    margin: 0 auto;
    width: 70%;
  }
   /*About Us Page*/
  .au-list {
    margin:0 auto;
    width:65%;
  }
   /*Contact Us Page*/
  .formcu {
    width: auto;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
  }
}