@import url(https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Hind:300,400|Simonetta);

html,body{margin:0;padding:0}
body { font: 100%/1.1 Hind; color: #000000; text-align: left; background: #FFF5E6; padding-bottom: 35px } /* 85%/1.3 */
a { color: #0066B3; background: inherit; text-decoration: none;}
/*div { border: 1px solid white; }*/

#shbc-logo { display: block; margin: auto; }
#shbc-logo img { padding: 0px; max-width: 300px; }
/*#shbc-logo img { padding: 0px; width: 300px; height: 70px; }*/

.embed-header { display: block; width: 100%; height: 139px; position: fixed; left: 0; top: 0; z-index: 1; }
.embed-footer { display: block; width: 100%; }

.divider { width: 200px; height: 6px; background-color: #663D00; border-radius: 3px; margin: 0px auto; }

#navbar { margin: 0px 20px; float: left; position: relative; }
ul.topnav { position: relative; list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; }
ul.topnav li { position: relative; display: inline; margin: 0px auto; float: left; }
ul.topnav li a {
  display: block;
  color: #FFFFFF;
  text-align: center;
  vertical-align: bottom;
  padding: 10px 30px 7px 30px;
  position: relative;
  text-decoration: none; }
ul.topnav li a:hover { background-color: rgba(0,51,0,0.5); border-bottom: 3px solid #FFF5E6; }

button.topnav { position: relative; list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; left: -50%; }

ul.sidenav { margin: 0px; padding: 20px 0px; width: 300px; font: 18px 'Noto Serif'; float: left; }
ul.sidenav li { display: block; color: #000000; padding: 20px 10px 20px 30px; text-decoration: none; text-transform: uppercase; }
ul.sidenav li a { padding: 5px 0px; color: #000000; }
ul.sidenav li a:hover { border-bottom: 2px solid #999933; border-top: 2px solid #999933; }
li.sidenav-current a { border-bottom: 2px solid #003300; border-top: 2px solid #003300; }

div#about { font: 36px 'Noto Serif'; color: #FFFFFF; background: #663300; margin-bottom: 10px; padding: 20px 30px; text-align: center; }

#about-body { margin-left: 300px; padding: 5px 0px 0px 0px; }
#about-body h1 { font: bold italic 24px 'Noto Sans'; color: #000000; margin: 0; padding-top: 20px; text-transform: uppercase; }
#about-body p { padding: 10px 30px 0px 0px; margin: 0; font: 1em 'Noto Serif'; }

div#header {
  color: #FFFFFF;
  /*background: #003300 url("img/BrownPattern.jpg") no-repeat left top;*/
  background-color: #003300; /*663D00*/
  /*opacity: 0.9;*/
  /*box-shadow: 0px 5px 15px #888888;*/
  height: 150px;
  width: 100%;
  top: 0px;
  position: fixed;
  overflow: hidden;
  padding: 10px 50px 0px 50px;
  z-index: 1; }

div#info_bar {
  font: bold 18px 'Noto Sans';
  text-align: center;
  padding: 5px;
  position: fixed;
  z-index: 100;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: red;
  color: #FFFFFF;
  transition: linear 0.5s; }

div#imagelinks { display: block; position: relative; margin: 10px auto; padding: 10px; text-align: center; }
.imagelink { display: inline-block; margin: 0px 10px; padding: 0px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; }
.imagelink:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); }

#content { font: 18px Hind; margin: 135px 0px 100px 0px; border: 0px; }
#left { font: 18px Hind; float: left; width: 60%; padding: 10px; background: #FFF2CC; text-align: left; }
#body1 { font: 18px 'Noto Serif'; text-align: center; margin: 0px 20%; }

#service-times {
  color: #FFFFFF;
  display: block;
  float: right;
  margin: 15px 20px;
  min-width: 250px;
  max-height: 40px;
  vertical-align: middle; }

#external-links { display: block; margin: 10px auto; padding: 0px 30px; text-align: center; }
#external-links a { position: relative; display: inline-block; background: #663D00; color: #FFFFFF; border: 1px solid #665A00; text-align: center; margin: 0px 40px; padding: 10px 30px; min-width: 150px; max-width: 200px; text-decoration: none; }
#external-links a:hover { background-color: #665A00; }

#DougWelcomeVid { border: 0px; width: 95%; max-width: 500px; height: 281px; }

.verse { font: normal 32px Simonetta; text-align: center; margin: 10px 100px; line-height: 120% }
.verse-ref { font: normal 24px Simonetta; text-align: center; margin: 0px 100px; }

.tooltip {
  font-size: 0.8em;
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  font: 'Noto Sans';
  visibility: hidden;
  width: 400px;
  background-color: #FFFFFF;
  color: #663300;
  text-align: left;
  line-height: 110%;
  border-radius: 0px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -200px;
  box-shadow: 5px 5px 15px gray;
}

.tooltiptext > strong {
  font-size: 0.75em;
  color: #663300;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#prayer-engine {
  border: 0px;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 70%;
  height: 1600px; }

div#footer {
  font: 14px Hind;
  color: #FFFFFF;
  background: #663D00;
  padding: 20px 30px;
  margin: 0px;
  line-height: 100%;
  clear: both; }

div#footer img { position: relative; float: right; margin: 0px 0px 0px 15px; border-radius: 18px 16px; }
div#footer img:hover { box-shadow: 0px 0px 10px #FFFFFF; }

 /* Slideshow container */
#slideshow-container {
  display: block;
  max-width: 1000px;
  position: relative;
  margin: 0 auto; }

#fade-images img { width: 100%; position: absolute; opacity: 1; animation: fading 24s infinite; }
#fade-images img:nth-child(1) { animation-delay: 16s; }
#fade-images img:nth-child(2) { animation-delay: 8s; }
#fade-images img:nth-child(3) { animation-delay: 0s; }

@keyframes fading {
  0% {opacity:1;}
  26% {opacity:1;}
  33% {opacity:0;}
  93% {opacity:0;}
  100% {opacity:1;} }

.CalendarEvent {
  font-family: 'Hind';
  font-size: 28px;
  font-weight: bold;
  color: #663D00;
  text-align: center;
  margin: 0px;
  padding-top: 10px;
  border-top: 1px solid #663D00; }

.CalendarDate {
  font-family: Hind;
  font-size: 18px;
  font-weight: normal;
  color: #663D00;
  text-align: center;
  margin: 0px;
  padding-bottom: 15px; }