/*
------ Google Fonts-Chinese -----
font-family: 'Ma Shan Zheng', cursive;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;
font-family: 'Noto Serif SC', serif;

------ Google Fonts-English ------
font-family: 'BenchNine', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Rancho', cursive;
font-family: 'Roboto', sans-serif;

------- Color choices --------
red: #dd0000;(heading1)
blue: #308 (regular link), #006 (menu item)
grey: lightgrey (header, footer), #eee (content background)

----------------Icons choices-good to rotate
Font-awesome 5: fas fa-dove, fa-gift, fa-globe, fa-donate, fa-heart,fa-address-book, far fa-sun
Font-awesome 4: fa fa-gear, fa-diamond. fa-group
*/

/*================= Carousel and Bulletin ==================*/
#section-carousel {
  background-color: white;
  /* display: flex;
  flex-flow: row wrap; */
}

#container-carousel {
  width: 70%;
  align-self: center;
}
.carousel-caption {
  background-color: rgba(100, 100, 100, 0.4);
}
.carousel-indicators li {
  height: 7px;
  width: 7px;
  margin-right: 8px;
  border-radius: 50%;
}

#container-carousel h3 {
  font-size: 2em;
  font-family: 'Courgette', cursive;
  color: white;
}

#container-schedule {
  width: 30%;
  align-self: center;
  padding: 5px 15px 0 5px;
  text-align: center;
}

/*================= Events Bulletin ==================*/
#section-events {
  background-color: #eee;
  padding: 10px 5% 30px 5%;
}
#section-events h1 {
  width: 100%;
  text-align: center;
}
.container-events {
  width: 45%;
  display: flex;
  flex-flow: column;
}
.content-unit {
  display: flex;
  padding: 4px 0;
}
.container-events .fas, .container-events .far {
  width:55px;
  font-size: 40px;
  color: navy;
  padding-right: 15px;
  padding-top: 2px;
}

.sub-heading {
  font-size: 1.05em;
  font-weight: bold;
  margin-right: 10px;
}
/*=================Sunday ==================*/
#section-sunday {
  background-color: white;
  padding: 10px 5% 30px 5%;
}
#section-sunday h1 {
  text-align: left;
}
.container-sunday {
  width: 45%;
}

.anchor-img-case {
  margin-right: 18px;
}

.anchor-img-case img{
  padding: 5px;
  box-shadow: 0 0 12px lightgray;
  width: 100px;
}

/*================= Join Us ==================*/
#section-join-us {
  background-color: #eee;
  padding: 20px 5% 50px 5%;
}

.container-join-us {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  justify-content: space-evenly;
}
figure {
  align-self: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);
}
.card {
  background-color: white;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);
}

.card-heading {
  background-color: #900;
  padding: 8px 0;
  text-align: center;
  color: white;
  font-size: 1.3em;
}

.card-body {
  padding: 10px;
}

.card-body-column {
  width: 45%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
}

a.visit {
  margin: 4px;
}

hr {
  padding: 0;
  margin: 0;
}

/*================= Photo Flash Gallery ==================*/
#section-gallery-carousel-md {
  display: none;
}
#section-gallery-carousel-sm {
  display: none;
}

.two-imgs {
  display: grid !important;
  grid-template-columns: auto auto;
  justify-content: space-evenly;
}

.three-imgs {
  display: grid !important;
  grid-template-columns: auto auto auto;
  justify-content: space-evenly;
}
/*================= Responsive ==================*/

@media only screen and (max-width: 960px) {
  .container-events .fas, .container-events .far {
    width:45px;
    font-size: 30px;
  }
  #section-gallery-carousel {
    display: none;
  }
  #section-gallery-carousel-md {
    display: block;
  }
}

@media only screen and (max-width: 840px) {

  #container-carousel {
    width: 100%;
  }
  #container-carousel h3 {
    font-size: 1.5em;
  }

  #container-schedule {
    width: 100%;
  }

  .schedule-unit {
    display: flex;
  }
  .schedule-unit h2 {
    text-align: right;
    width: 48%;
    margin-left:auto;
    margin-right: 8px;
    align-self:baseline;
  }

  .schedule-unit p {
    text-align: left;
    width: 52%;
    margin-right:auto;
    align-self:baseline;
  }

  #section-events h1 {
    text-align: left;
    margin-left: 10%;
  }

  .container-events {
    width: 80%;
  }
  .container-events .fas, .container-events .far {
    width:40px;
    font-size: 30px;
  }
  .container-sunday {
    width: 80%;
  }

  .sub-heading {
    font-size: 1.0em;
  }

  .anchor-img-case img{
    width: 90px;
  }

  .anchor-img-case {
    margin-right: 18px;
  }

  #section-join-us {
    padding: 20px 3% 40px 3%;
  }

  .container-join-us {
    grid-template-columns: 42% 42%;
  }
  .container-join-us figure {
    display: none;
  }

}
@media only screen and (max-width: 680px) {
  .carousel-indicators li {
    height: 5px;
    width: 5px;
  }

  .container-events .fas, .container-events .far {
    width:36px;
    font-size: 24px;
  }

  .container-join-us {
    grid-template-columns: 40% 40%;
  }
  .card-body-column {
    width:100%;
  }

  #section-join-us {
    padding: 10px 3% 30px 3%;
  }
}

@media only screen and (max-width: 576px) {

  #section-sunday, #section-events {
    padding: 10px 0;
  }

  #section-sunday h1, #section-events h1{
    text-align: center;
    margin-left: 0;
  }

  .container-sunday, .container-events {
    width: 92%;
  }

  .anchor-img-case img{
    width: 70px;
  }
  .anchor-img-case {
    margin-right: 12px;
  }

  #container-join-us {
    grid-template-columns: 100%;
  }
  .card-img-top {
    display: none;
  }
  .card-body {
    margin-bottom: 15px;
  }

  #container-welcome {
    width: 90%;
  }
  #container-video {
    width: 100%;
  }
  #section-gallery-carousel-md {
    display: none;
  }
  #section-gallery-carousel-sm {
    display: block;
  }
}