/*
------ 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;
}

/*************** welcome **************/
#row-welcome {
  background-color: #eee;
/*  padding: 20px 5% 50px 5%;*/
  padding: 10px 2% 50px 2%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.heading-box {
  width: 100%;
  padding: 0;
}

#col-figure {
  padding: 5px;
  width: 20%;
  margin: 0;
  align-self: center;
}

#col-welcome {
  width: 55%;
}
#col-welcome {
  line-height: 1.7;
}
.card-footer {
  padding-bottom: 20px;
}
.card-footer a {
  width: 120px;
  border-radius: 10px;
  font-size: 0.96em;
  background: #900;
  padding: 8px 15px;
  text-align: center;
  color: white;
}

#row-welcome a{
  width: 140px;
  border-radius: 10px;
  font-size: 0.96em;
  background: #900;
  margin: 6px auto;
  padding: 5px 6px;
  text-align: center;
  color: white;
}

#col-buttons {
  width: 12%;
  display: flex;
  flex-flow: column nowrap;
  align-self: center;
  text-align: center;
}


/*================= 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;
  }

  /*Welcome Row */
  #row-welcome #col-figure {
    display: none;
  }

  #row-welcome #col-welcome {
    padding-left: 5%;
    width: 65%;
  }

  #row-welcome #col-buttons {
    width: 30%;
  }
}

@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;
  }


  .card-body-column {
    width:100%;
  }

  /*Welcome Row */
  #row-welcome {
    padding: 10px 5% 30px 5%;
  }

  #row-welcome #col-welcome {
    width: 90%;
    display: none;
  }

  #row-welcome #col-figure {
    display: block;
    width: 40%
  }

  #row-welcome #col-buttons {
    width: 50%;
  }  
}


@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;
  }
}