@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Rokkitt');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');


* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
  font-family: 'Noto Sans', sans serif;
  font-size: 16px;
  transition: 0.3s;
}

.noscript-text {
  font-size: 1em;
  color: #990000;
}

.noscript-text-d {
  font-size: 1em;
  color: #FFF88C;
}

.all-logos {
  text-align: center;
}

.all-logos img {
  width: 6em;
  margin: 1em 0;
}

.main-page {
  background-color: #D5B375;
  margin-top: 2em;
}

.thanks-page {
  background-color: #D5B375;
  margin-top: 2em;
}

.sermons-page {
  background-color: #768F4C;
  margin-top: 2em;
}

.about-page {
  background-color: #C09A6F;
  margin-top: 2em;
}

.contact-page {
  background-color: #355B2F;
  margin-top: 2em;
}

.directions-page {
  background-color: #3F3327;
  margin-top: 2em;
}

.streaming-page {
  background-color: #FFDCAB;
  margin-top: 2em;
}

.giving-page {
  background-color: #96BC70;
  margin-top: 2em;
}

.hrstyle{
  border-bottom:1px solid #272019;
  margin: 0 0 .5em 0;
}

.canceled {
  font-weight: 900;
}

.calendar-page {
  background-color: #D5B375;
  margin-top: 2em;
}

/* Brand */
.brand {
  padding-left: 1em;
}

.brand a {
  text-decoration: none;
  color:  #564531;
}

.brand a:hover {
  cursor: pointer;
}

.warning-txt p{
  font-size: 1.25em;
}

/* Navigation */
.stream-box .home-btn {
  color: #e4e4e4;
}

.btn-box {
  text-align: center;
}

.home-btn {
  color: #e4e4e4;
  background-color: #6D583F;
  padding: .25em .5em;
  text-decoration: none;
  border-radius: .25em;
}

.home-btn:hover {
  color: #395E31;
  background-color: #e4e4e4;
}

.home-btn-p {
  margin-bottom: 1.75em;
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 .5em;
  background-color: #F7FFD0;
  box-shadow: .1em .0625em .125em .125em rgba(109,88,63,.6); 
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
 }

.main-nav img {
  width: 1em;
}

.main-nav ul {
  list-style: none;
  display: flex;
}
  
.main-nav a {
  float: left;
  color: #574636;
  text-align: center;
  text-decoration: none;
 }

.dropdown {
  overflow: hidden;
 }

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 1em;   
  border: none;
  outline: none;
  color: #574636;
  padding: .5em .25em .5em .5em;
  background-color: #F7FFD0;
  font-family: inherit;
  margin: 0;
 }

.dropbtn {
  position: relative;
  cursor: pointer;
  font-size: 1em;   
  border: none;
  outline: none;
  color: #574636;
  padding: .5em .25em .5em .5em;
  background-color: #F7FFD0;
  font-family: inherit;
  margin: 0;
}

.dropbtn-selected {
  position: relative;
  cursor: pointer;
  font-size: 1em;   
  border: none;
  outline: none;
  color: #e4e4e4;
  padding: .5em .25em .5em .5em;
  background-color:#6D583F;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  color: #e4e4e4;
  background-color:#395E31;
  transition: .3s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #574636;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  box-shadow: .2em .125em .25em .0625em rgba(0,0,0,0.3);
  z-index: 1;
 }

.dropdown-content a {
  float: none;
  color: #F7FFD0;
  padding: .5em;
  text-decoration: none;
  border-bottom: .0625em solid #ccc;
  display: block;
  text-align: left;
 }

.dropdown-content a:last-child {
  border: none;
 }

.dropdown-content a:hover {
  background-color: #F7FFD0;
  color: #6D583F;
}

.dropdown-content a:hover:nth-child(2) {
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
}

.show {
  display: block;
}

a.head:link, a.head:visited {
  color:  #6D583F;
  padding: .5em;
  transition: .3s;
}

a.head:hover, a.head:active{
  color: #e4e4e4;
  background-color:#395E31;
  transition: .3s;
}

a.selected:link, 
a.selected:visited {
  color: #e4e4e4;
  background-color:#6D583F;
  padding: .5em;
  transition: .3s;
}

a.selected:hover, a.selected:active{
  color: #395E31;
  background-color: #e4e4e4;
  transition: .3s;
}

/* Modal */

.modal{
  display:none;
  position: fixed;
  z-index:11;
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content{
  background-color:#3F3327;
  margin: 8% auto;
  width: 40%;
  border-radius: .5em;
  animation-name:modalopen;
  animation-duration:1s;
}

.modal-body{
  padding: .25em;
}

.modal-body img {
  width: 100%;
}

.closeBtn{
  color:#ccc;
  padding-left: 95%;
  font-size: 2em;
  color:#fff;
}

.closeBtn:hover,.closeBtn:focus{
  color:#000;
  text-decoration: none;
  cursor:pointer;
}

@keyframes modalopen{
  from{ opacity: 0}
  to {opacity: 1}
}

/* Index-Page */
.main {
  width: 100%;
  padding: 1em;
}

.main h2 {
  font-family: 'Rokkitt', serif;
  text-align: center;
  color: #4F6D42;
  text-shadow: .0625em .0625em .125em rgba(52,90,47,.6)
}

.main h4 {
  color: #564531;
}

.main-inner {
  width: 100%;
  text-align: center;
}

.logo-grid {
  padding: .25em 0;
  display: -ms-grid;
  -ms-grid-columns: 3fr 1fr 3fr;
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
}

.main-inner img {
  width: 100%;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
}

/* Information */
#slideshow {
  margin: .275em auto;
  position: relative;
  width: 100%;
  height: 26em;
  padding: .475em;
  z-index: 10;
  box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.4);
  background-color: #FDF898;
  border-radius: .5em;
}

#slideshow > div {
  position: absolute;
  top: .5em;
  left: .5em;
  right: .5em;
  bottom: .5em;
}

#slideshow img {
  width: 100%;
  height: 100%;
}

.slides h2 {
  color: #564531;
}

.text-center {
  text-align: center;
  padding: 4em 0; 
}

.info-grid {
  padding: 2em 0;
  color: #564531;
  display: -ms-grid;
  -ms-grid-columns: 2fr 4fr 2fr;
  -ms-grid-rows: auto;
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
  grid-template-rows: auto;
}

.where {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  -ms-grid-column-align: center;
  -ms-grid-row-align: center;
  grid-column: 1 / span 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  text-align: center;
}

.slides {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-column-align: center;
  grid-column: 2 / span 1;
  grid-row: 1;
  justify-self: center;
}

.when {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  -ms-grid-column-align: center;
  -ms-grid-row-align: center;
  grid-column: 3 / span 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  text-align: center;
}

.line {
  border-bottom: #272019 .0625 solid;
}

.where p,
.when p {
  color: #564531;
}

/* Secondary Navigation */
.secondary-nav {
  width: 100%;
}

.s-nav-inner {
  width: 100%;
  margin: 0 auto;
  padding: .75em;
  text-align: center;
}

.s-nav-inner a {
  font-size: 1.2em;
  font-weight: bold;
  color: #564531;
  padding: 0 .5em;
  text-decoration: none;
  transition: .3s;
}

.s-nav-inner a:hover {
  color: #F9FFCC;
  transition: .3s;
}

/* Icons */
.ico-links-grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  justify-content: center;
  padding: .5em;
}

.icos {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-column-align: center;
  grid-column: 2 / span 1; 
}

.icos img{
  width: 2em;
  padding: .2em;
}

.main-footer h2 {
  text-align: center;
  font-family: 'Rokkitt', serif;
  font-size: .875em;
  color: #284524;
}

.main-footer p {
  text-align: center;
  font-family: 'Rokkitt', serif;
  font-size: 1em;
  color: #284524;
  padding-top: .25em;
}

.main-footer a {
  text-decoration: none;
  color: #284524;
}

.main-footer a:hover {
  color: #6D583F;
  transition: .3s;
}

/* Sermons-Page */
.sermons-main {
  padding: 1em 0;
  text-align: center;
}

.sermons-main img {
  width: 6em;
  margin: .5em 0;
}

.sermons-main h3,
.sermons-main h4,
.sermons-main p {
  color: #FDF898;
}

/* .sermons-main a:hover {
  color: #F8CD90;
  transition: 0.3s;
} */

.sermons-main span {
  color: #564531;
  font-size: .875em;
}

.sbtns {
  text-align: center;
  margin: 0 auto;
}

.sbtns ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.sbtns ul li {
  padding: .5em;
}

.sbtn-home {
  color: #e4e4e4;;
  background-color: #6D583F;
  padding: .25em .5em;
  text-decoration: none;
  border-radius: .25em;
}

.sbtn-home:hover {
  color: #395E31;
  background-color: #e4e4e4;
}

.sbtn-link {
  color: #6D583F;
  background-color:#FDF898;
  padding: .25em .5em;
  text-decoration: none;
  border-radius: .25em;
}

.sbtn-link:hover {
  color: #e4e4e4;
  background-color: #284524;

}


/* .sbtns ul li a:link,
.sbtns ul li a:visited {
  color: #6D583F;
  background-color:#FDF898;
  padding: .25em .5em;
  border-radius: .25em;
  transition: .3s;
}

.sbtns ul li a:hover, .sbtns ul li a:active{
  color:  #FDF898;
  background-color:#564531;
  transition: .3s;
} */

.sermons-main h3 {
  padding: 1em 0;
}

.sermons-main h4 {
  padding: 1em 0;
}

.filelist {
  width: 100%;
  padding: .5em 0;
  margin-bottom: 1em;
}

.filelist-inner {
  width: 60%;
  height: 31em;
  font-size: .875em;
  margin: 0 auto;
  background-color: #84A663;
  border: .4em solid #728F55;
  border-radius: .5em;
  box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.6);
  overflow-x: hidden;
  overflow-y: scroll;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: .5em .25em .5em .25em;
  border-bottom: .0625em solid #F9FFCC;
}

td:nth-child(1) {
  text-align: left;
}

td:nth-child(2) {
  border-left: .0625em solid #F9FFCC;
  width: 7%;
  padding: 0 0 0 .875em;
}

/* td:nth-child(3) {
  width: 10%;
} */

.title {
  color: #FDF898;
}

.stream {
  padding: .5em .5em;
}

/* .download {
  padding: .5em .5em;
} */

.table-links {
  color: #FDF898;
  text-decoration: none;
  padding-right: 1em;
}

.table-links:hover {
  color: #564531;
}

/* About-Page */

.video-player {
  width: 100%;
  height: auto;
  padding: 1em;
}

.video-player-inner {
  width: 863px;
  height: 490px;
  border-radius: .5em;
  /* max-width: 70em; */
  margin: 0 auto;
  border: .3125em solid #6D583F;
  box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.6);
}

.about-outer {
  width: 100%;
}

.about-inner {
  padding: 1em 0;
  text-align: center;
}

.about-inner img {
  width: 6em;
  margin: .5em 0;
}

.about-us {
  width: 100%;
  padding: .5em;
}

.about-us h4 {
  color: #564531;
  padding: 1em 0;
  text-align: center;
}

.about-us-inner {
  width: 60%;
  height: 32em;
  margin: 0 auto;
  padding: 0 .75em;
  background-image: url(../images/bg1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  border: .3125em solid #6D583F;
  box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.6);
  border-radius: .5em;
  overflow-x: hidden;
  overflow-y: scroll;
}

.about-us-inner h3 {
  color: #3F3327;
  padding: .75em 0;
}

.about-us-inner p {
  color: #3F3327;
  margin-bottom: .75em;
}

.about-us-inner img {
  width: 100%;
}

/* Directions Page */
/* ************************************************************************ */

.directions-inner {
  width: 100%;
}

.directions {
  text-align: center;
  color: #C09A6F;
  padding: .125em 0;
}

.dir-where {
  text-align: center;
  padding: .25em 0;
}

.dir-where p{
  color: #F9FFCC;
}

.dir-where p:first-of-type{
  text-decoration: none;
  margin: .125em 0;
  color: #C09A6F;
}

.dir-1 {
  width: 40%;
  text-align: left;
  padding: 1em;
  margin: 0 auto;
  transition: 0.3s;
}

.clickit{
  margin: .5em 0;
  color: #F9FFCC;
}

.dir-1 p{
  padding: 0 1em;
}

.dir-map {
  width: 40%;
  margin: 0 auto;
  transition: 0.3s;
}

.dir-map a:hover {
  cursor: pointer;
}

.dir-map img {
  width: 100%;
  border: .3125em solid #6D583F;
  border-radius: .5em;
  box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.6);
}

.dir-footer {
  text-align: center;
  font-family: 'Rokkitt', serif;
  font-size: .875em;
  color: #C09A6F;
  padding: .5em 0 2em 0;
}

/* Contact Page */
/* ************************************************************* */
.contacts {
  padding: 1em 0;
  text-align: center;
}

.contacts img {
  width: 6em;
  margin: .5em 0;
}

.contacts h2 {
  color: #272019;
  margin: .5em 0;
}

.contacts h4 {
  color: #272019;
}

.contacts p {
  color: #272019;
}

.contacts a {
  color: #84A663;
  text-decoration: none;
  transition: 0.3s;
}

.contacts a:hover {
  color: #F8CD90;
  transition: 0.3s;
}

.contact-footer {
  text-align: center;
  font-family: 'Rokkitt', serif;
  font-size: .875em;
  color: #84A663;
  padding-top: .5em;
}

/* Streaming Page */
.stream-box {
  width: 100%;
  text-align: center; 
}

.stream-box a {
  text-decoration: none;
  color: #564531;
  font-weight: 600;
  transition: 0.3s;
}

.stream-box span {
  text-decoration: underline;
}

.stream-box a:hover {
  color: #4F6D42;
  transition: 0.3s;
}

.stream-box-inner {
  position: relative;
  width: 50%;
  height: 26em;
  margin: 1em auto;
  z-index: 1;
}

.stream-box-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 26em;
}

.stream-box h2, 
.stream-box p {
  color: #564531;
  margin: 1em 0;
}

.stream-logo {
  padding: 1em 0;
  text-align: center;
}

.stream-logo img {
  width: 6em;
  margin: .5em 0;
}

.stream-ico {
  display: flex;
  justify-content: center;
}

.stream-ico img {
  width: 2em;
  margin: .75em
}

/* Prayer Page */
.prayer {
  width: 100%;
  padding: 0 20em;
  text-align: center;
}

.prayer-outer {
  width: 100%;
  padding: 1em 0;
}

.prayer-inner {
  width: 15%;
  margin: 0 auto;
}

.prayer-inner img {
  width: 100%;
}

.prayer h1 {
  color: #564531
}

.prayer h3 {
  padding: 1em 0;
}

.prayer p {
  color: #564531;
  font-size: 1.2em;
}

.prayer a {
  color:#FDF78A;
  text-decoration: underline;
}

.prayer a:hover {
  color: #6D583F;
  transition: 0.3s;
}

.prayer img {
  width: 6em;
  padding: 2em 0;
}


/* Calender-Page */
.cal-logo {
  width: 100%;
  text-align: center;
}

.cal-logo h2 {
  padding: .5em 0;
  color: #564531;
}

.cal-logo-inner {
  padding: 1em 0;
}

.cal-logo-inner img {
  width: 6em;
  margin: .5em 0;
}

.cal-outer {
  width: 100%;
}

.cal-inner {
  width: 60%;
  margin: 0 auto;
}

.cal-inner iframe {
  border: solid .25em #F8CD90;
  border-radius: .75em;
  box-shadow: 0 0 2.25em rgba(66, 53, 41, 0.9);
}

/* Giving Page */
.giving-outer {
  width: 100%;
  text-align: center;
}

.giving-logo {
  padding: 1em 0;
}

.giving-logo img {
  width: 6em;
  margin: .5em 0;
}

.giving-inner {
  text-align: center;
  width: 60%;
  margin: 0 auto;
}

.giving-inner h2 {
  color: #3F3327;
  line-height: 1.25em;
  padding-bottom: .5em;
}

.giving-inner h4 {
  color: #5A4938;
}

.giving-inner p {
  color: #564531;
  padding: 1em 0;
}

.thanks h2 {
  color: #564531;
  text-align: center;
  margin: 2em 0 2em 0;
}


/* Media Queries */
/* 1170px */
@media only screen and (max-width: 73.125em) {
  .prayer {
    padding: 1em 6em;
    transition: 0.3s;
  }
  .dir-1, .dir-2 {
    width: 60%;
    transition: 0.3s;
  }
  .dir-map {
    width: 60%;
    transition: 0.3s;
  }
  .modal-content {
    width: 60%;
  }
  .cal-inner {
    width: 70%;
  }
  .stream-box-inner {
    width: 90%;
  }
}

/* 992px */
@media only screen and (max-width: 62em) {
  /* body{
      background-color: red;
  } */
  html {
    font-size: 14px;
    transition: 0.3s;
  }
  .main-nav {
    padding-right: .5em;
  }
  .brand {
    padding-left: .5em;
  }
  .slides {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    grid-column: 1 / span 3;
    grid-row: 1;
  }
  #slideshow {
    width: 98%;
  }
  .where {
    padding-top: 1em;
    padding-left: 2em;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    grid-column: 1 / span 3;
    grid-row: 2;
  }
  .when {
    padding-top: 1em;
    padding-left: 2em;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
    grid-column: 1 / span 3;
    grid-row: 3;
  }
  .about-inner {
    width: 40%;
  }
  .about-inner img {
    width: 100%;
    transition: 0.3s;
  }
  .about-us-inner {
    width: 80%;
    transition: .3s;
  }
  .filelist-inner {
    width: 80%;
  }
  .prayer {
    padding: 1em 3em;
  }
  .dir-1, .dir-2 {
    width: 90%;
    transition: 0.3s;
  }
  .dir-map {
    width: 80%;
    transition: 0.3s;
  }
  .cal-inner {
    width: 80%;
  }
  .modal-content {
    width: 80%;
  }
  .giving-inner {
    width: 80%;
  }

}

/* 768px */
@media only screen and (max-width: 48em) {
  /* body{
      background-color: green;
  } */
  html {
    font-size: 12px;
    transition: 0.3s;
  }
  .main-nav {
    padding-right: .25em;
  }
  .brand {
    padding-left: .25em;
  }
  .logo-grid {
    padding: .75em 0;
    transition: .3s;
  }
  .main-inner img {
    width: 100%;
    max-width: 21em;
    margin-left: auto;
    margin-right: auto;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
  }
  .about-us-inner {
    width: 95%;
    transition: .3s;
  }
  .filelist-inner {
    width: 95%;
  }
  .prayer {
    padding: 1em 1em;
  }
  .dir-1, .dir-2 {
    width: 90%;
    transition: 0.3s;
  }
  .dir-map {
    width: 90%;
    transition: 0.3s;
  }
  .cal-inner {
    width: 90%;
  }
  .modal-content {
    width: 95%;
  }
}

/* 360px */
@media only screen and (max-width: 23em) {
  html {
    font-size: 10px;
    transition: 0.3s;
  }
  .cal-inner {
    width: 98%;
  }
}