html, body { border:0; margin:0; }

body { 
  font-family: "Prompt", sans-serif !important;
  font-size: 16px; 
  font-weight: 300 !important;
  background-image:url('../images/bg.png');
  background-size: 800px; 
  background-position: top center; 
  background-repeat: repeat;
} /* font size is set to browser default, typically 16; line height: 16 x 1.125 = 18 */

a { cursor: pointer; }
a:link, a:visited 	{ color: #FFF !important; text-decoration: none;  }
a:hover, a:active	{ color: #FFF !important; }

.invalid-feedback{
  color: #be1e2d !important;
}

#worship_header{
  color:#2a2929; font-size:1.5em;
}

fieldset.status {
  border: 1px groove #ddd !important;
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow:  0px 0px 0px 0px #000;
          box-shadow:  0px 0px 0px 0px #000;
}
legend.status {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width:auto;
  padding:0 10px;
  border-bottom:none;
}

h1{
  color: #4972b1 !important;
  font-weight: 600 !important;
  font-size: 2em !important;
  padding: .75em 0px;
}
h2{
  color: #4972b1 !important;
  font-weight: 600 !important;
  font-size: 1.6em !important;
  padding: .75em 0px;
}
h3{
  color: #4972b1 !important;
  font-weight: 600 !important;
  font-size: 1.4em !important;
  padding: .75em 0px;
}
h4{
  color: #4972b1 !important;
  font-weight: 600 !important;
  font-size: 1.2em !important;
  padding: .75em 0px;
}
h5, h6{
  color: #4972b1 !important;
  font-weight: 600 !important;
  font-size: 1em !important;
  padding: .75em 0px;
}

#content {
  /* background-color: #FFF; */
}
#navbar_top_main {
  z-index: 999 !important;
}

.input_search {
  padding: .5em 1em !important;
  border: 0px !important;
  background-color: #e0effa !important;
  border-radius: 16px;
  font-weight: 300;
}

.shimmerBG {
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #999;
  /* background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%) fixed; */
  background: #f0f0f0 linear-gradient(to right, transparent 0%, rgba(100, 100, 100, 0.2) 10%, transparent 20%);
  background-size: 100vw 100%;
}
@keyframes shimmer {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: .1;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

#edit_content ul {
  list-style: disc !important;
  margin: .75em;
  padding: .75em;
}
#edit_content ol {
  list-style: decimal !important;
  margin: .75em;
  padding: .75em;
}
#edit_content table {
}
#edit_content table td {
  border: 1px solid #333;
  padding: .5em;
}

.text_type {
  border:1px solid #2b2b2b;
  border-radius:1rem;
  background-color: #2b2b2b;
  color:#fff;
  font-size: .7em;
}
.link-color-b {
  
  color: #333;
  font-weight: bold;
  font-size: .9em;
  text-decoration: underline;
}


.shadow {
  -webkit-box-shadow: 1px 1px 2px 5px rgba(120,120,120,.1) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 2px 5px rgba(120,120,120,.1) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 2px 5px rgba(120,120,120,.1) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.shadow_top {
  -webkit-box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 0px rgba(120,120,120,.1), 0px -3px 3px rgba(120,120,120,.3) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.shadow-promotion {
  -webkit-box-shadow: 1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.shadow-news {
  -webkit-box-shadow: 1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 2px 2px rgba(120,120,120,.1) !important;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.content-box {
  background-color: rgba(255, 255, 255, 1);
}
.head_txt {
  color: #4972b1;
  font-weight: 600;
  font-size: 2em;
}
.head_txt_2 {
  color: #4972b1;
  font-weight: 600;
  font-size: 1.5em;
}
.head_txt_sub {
  color: #221f20;
  font-weight: 300;
  font-size: 1.25em;
}
.head_txt_3 {
  color: #01bab5;
  font-weight: 600;
  font-size: 2em;
}
.zline {
  width:25%;
  max-width: 200px;
  height: 3px;
  background-color: #4872ae;
}
.zline2 {
  width:25%;
  max-width: 100px;
  height: 3px;
  background-color: #01bab5;
}
.txt-more {
  color: #01bab5;
  font-size:.9em;
}
.btn-read-all {
  background-color: #01bab5;
  border-radius: 12px;
  padding: .75em 2em;
  color: #FFF;
  font-size:1em;
}
.btn-more {
  background-color: #01bab5;
  border-radius: 12px;
  padding: .5em 1em;
  color: #FFF;
  font-size:.9em;
}

#lasted_box {
  font-family: "Prompt", sans-serif !important;
}
#lasted_box .topic {
  width:100%; font-size:1.25em; line-height:1.25em; min-height:24px; font-weight:bold; color:#263752 !important;
}
#lasted_box .desc {
  width:100%; min-height:20px;
  color:#263752 !important;
}
#lasted_box .date {
  width:100%; min-height:20px;
  color:#263752 !important;
}
#vdo_playlist {
  
}
#vdo_playlist .active {
  background-color: #01bab5;
  color: #FFF !important;
}
#vdo_playlist .topic {
  width:100%; font-size:1.25em; line-height:1.25em; min-height:24px; font-weight:bold; color:#263752 !important;
}
#vdo_playlist .desc {
  width:100%; min-height:20px;
  color:#263752 !important;
}
#vdo_playlist .date {
  width:100%; min-height:20px;
  color:#263752 !important;
}

#vdo_playlist .active .topic {
  color: #FFF !important;
}
#vdo_playlist .active .desc {
  color: #FFF !important;
}
#vdo_playlist .active .date {
  color: #FFF !important;
}

#recommend_box {
  
}
#recommend_box .topic {
  width:100%; font-size:1em; min-height:24px; font-weight:bold; color:#263752 !important;
}
.grid-sizer {
  /* width: 33.33%; */
}
.grid-item {
  /* width: 33.33%; */
  padding: 5px;
  box-sizing: border-box;
}

/* menu main */
.menu, .drop-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* font-family: "Prompt", sans-serif; */
  font-weight: 300;
}

.menu .menu-item {
  /* display: inline-block; */
  color: #333;
  background-color: #FFF;
  position: relative;
  /* border: 1px solid rgba(90,90,90,.1); */
  z-index: 11;
}
.menu .menu-item:hover {
  color:#FFF;
  /* background: rgb(212,206,184); */
  /* background: linear-gradient(90deg, rgba(212,206,184,1) 0%, rgba(189,174,148,1) 65%, rgba(178,164,135,1) 100%); */
}
.nav-link {
  color:#333 !important;
}
.menu .menu-item:hover .m_main{
  color:#333 !important;
}

.menu .menu-item a {
  text-decoration: none;
  padding: 6px 10px 5px 10px;
  /* padding: .5em 1em .3em 1em; */
  color: #333;
  display: block;
  text-align: center;
}

.menu .drop-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  z-index: 11;
}

.menu .drop-menu-item {
  width: 100%;
  font-size: .9em !important;
}

.menu .drop-menu-item:hover a{
  color: #FFF !important;
  background-color: #01bab5;
  text-align: left !important;
}

.menu .drop-menu-item a {
  color: #333 !important;
  text-align: left !important;
  padding: 7px 10px 5px 10px;
  /* padding: .5em 1em .3em 1em; */
}

.menu .menu-item:hover .drop-menu {
  display: block;
}

.gray-filter-page {
  filter: grayscale(90%);
  color: #999;
}
.gray-filter {
  filter: grayscale(90%);
  color: #999; /* Adjust text color as needed */
}
.gray-filter:hover {
  filter: none; /* Remove the grayscale filter on hover */
}

.ng-mode-filter {
  background-color: #000;
  filter: invert(100%) contrast(150%);
  /* filter: contrast(150%); */
  /* mix-blend-mode: difference; */
}
.add-underline {
  text-decoration: underline !important;
}
.chage-font-ui {
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
  font-weight: 100 !important;
}
.eye-care {
  filter: brightness(0.9) contrast(0.85) sepia(0.2);
  background-color: #fef4e5; /* A softer background color */
  color: #333; /* Darker text color for better readability */
}

/* menu fixed */
.sub_menu, .drop-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sub_menu .menu-item {
  /* display: inline-block; */
  color: #FFF;
  /* background-color: #FFF; */
  position: relative;
  /* border: 1px solid rgba(90,90,90,.1); */
  z-index: 10;
}
.sub_menu .menu-item:hover {
  color:#FFF;
  /* background: rgb(212,206,184); */
  /* background: linear-gradient(90deg, rgba(212,206,184,1) 0%, rgba(189,174,148,1) 65%, rgba(178,164,135,1) 100%); */
}

.sub_menu .menu-item:hover .m_main{
  color:#FFF !important;
}

.sub_menu .menu-item a {
  text-decoration: none;
  padding: 12px 10px 10px 10px;
  /* height: 60px; */
  color: #FFF;
  display: block;
  text-align: center;
}

.sub_menu .drop-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 200px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  z-index: 9;
}

.sub_menu .drop-menu-item {
  width: 100%;
}

.sub_menu .drop-menu-item:hover a{
  color: #FFF !important;
  background-color: #01bab5;
  text-align: left !important;
}

.sub_menu .drop-menu-item a {
  color: #01bab5 !important;
  text-align: left !important;
}

.sub_menu .menu-item:hover .drop-menu {
  display: block;
}

.menu .chevron{
  width: 12px;
  margin-left: .25em;
  margin-top: -1px;
  transition: transform 0.3s;
  transform-origin: center;
}
.menu .menu-item:hover .chevron{
  transform: rotate(90deg);
}
.menu .chevron::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 10px;
  line-height: 10px;
  color: #01bab5;
  cursor: pointer;
}
.menu .menu-item:hover .chevron::before {
  color: #01bab5;
}

.sub_menu .chevron{
  width: 20px;
  margin-left: .25rem;
  padding-top: .25rem;
  transition: transform 0.3s;
  transform-origin: center;
}
.sub_menu .menu-item:hover .chevron{
  transform: rotate(90deg);
}
.sub_menu .chevron::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 12px;
  line-height: 12px;
  color: #FFF;
  cursor: pointer;
}
.sub_menu .menu-item:hover .chevron::before {
  color: #fff;
}


.chevron-more{
  width: 20px;
  margin-left: .25em;
  padding-top: .5em;
  transition: transform 0.3s;
  transform-origin: center;
}
.chevron-more::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: .6em;
  line-height: normal;
  color: #B6BDC7;
  cursor: pointer;
}

.chevron-news-more{
  width: auto;
  margin-left: .25rem;
  transition: transform 0.3s;
  transform-origin: center;
  margin:.425rem;
}
.chevron-news-more::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 8px;
  line-height: 6px;
  color: #B6BDC7;
  cursor: pointer;
}
.chevron-nav {
  width: 20px;
  margin-left: .5em;
  /* margin-top: -.1em; */
  transition: transform 0.3s;
  transform-origin: center;
}
.chevron-nav::before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 1em;
  line-height: normal;
  color: #FFF;
  cursor: pointer;
}

.item-about {
  /* border-left: 1px solid rgba(90,90,90,.3);
  border-right: 1px solid rgba(90,90,90,.3); */
  transition: all 150ms ease-in-out !important;
}
.item-about:hover {
  /* background-color: #01bab5;
  border-radius: 12px; */
  /* transform: scale(1.1) !important; */
}
.item-about:hover .item {
  display: none;
}
.item-about .item_hover {
  display: none;
}
.item-about:hover .item_hover {
  display: block;
}

.item-religious {
  border-radius: 12px !important;
  position: relative;
}
.item-religious > .bgroll {
  display: none !important;
}
.item-religious.swiper-slide-active > .bgroll{
  display: block !important;
}

.item-promotion {
  cursor: pointer;
}
.item-news {
  cursor: pointer;
}

.news_box {

}
.news_box a {
  color: #333 !important;
}
.news_box a:hover {
  color: #333 !important;
}
.news_box a:visited {
  color: #333 !important;
}
.news_box a:active {
  color: #333 !important;
}

.map_point .pot-active{
 display: none;
}
.map_point.active .pot-active{
  display: block;
  /* transition: all .5s;
  transform: scale(1.2); */
}

.news_box .topic {
  color: #333;
  font-weight: bold;
}
.news_box .date {
  color: #4872b0;
  font-weight: 300;
}

.news_box .head_txt {
  color: #221f20 !important;
  font-weight: bold;
  font-size: 1.5em;
}
.news_box .content {
  color: #333;
  font-weight: 300;
}

.pagination {
  /* 
  font-size: 1em;
  line-height: normal; */
}
.pagination a.item, a:hover.item {
  color: #333 !important;
  font-weight: bold;
  background-color: #fff;
  border: 1px solid rgba(90,90,90,.1);
  border-radius: 6px;
  width: auto;
  padding: 8px 10px;
  text-align: center;
  line-height: 1em;
  margin: .25em;
}
.pagination .item_active {
  color: #fff !important;
  font-weight: bold;
  background-color: #01bab5;
  border: 1px solid rgba(90,90,90,0);
  border-radius: 6px;
  width: auto;
  padding: 8px 10px;
  text-align: center;
  line-height: 1em;
  margin: .25em;
}

.parent {
  overflow: hidden;
}
.child {
  transition: all .5s;
}
.child::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: rgba(52, 73, 94, 0.75); */
}

.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}
.item-news:hover .child,
.item-news:focus .child {
  transform: scale(1.2);
}

.box {
  background-color: #FFF;
}
.box-banner{
  width:40% !important;
}
.text-banner {
  font-size:2.5rem; line-height:3rem;
}

.h_topic{
  font-weight: bold;
  line-height: normal;
  color: #01bab5;
}
.h_more{
  font-size: .6em;
  line-height: normal;
  color: #273852;
  margin: .5em;
  position: relative;
  cursor:pointer;
}

.border_bottom{
  width:100%; 
  border-bottom: .8px solid #2b2b2b;
}

.page_name{
  font-weight: bold;
  line-height: normal;
  color: #000;
  font-size: 1.2em;
}

.title_topic{
  /* font-weight: bold; */
  line-height: normal;
  color: #000;
  font-size: 1.7em;
}

.page_desc{
  line-height: normal;
  /* margin: .2em; */
  position: relative;
  cursor:pointer;
  color: #2b2b2b;
}

.promotion {
  font-size: 16px !important;
}
.religious{
  overflow: visible !important;;
}
.religious_message {
  color:#3C5076; width:100%; font-weight: bold; font-size:2rem; line-height:2rem; text-align: center;
}
.box-news {
  color: #FFF !important;
  position: absolute !important;
}

#footer {
  font-family: "Prompt", sans-serif;
  font-size: 1em;
  font-weight: 300;
  color: #FFF;
  background-color:#E16762;
}

.footer_menu{
  /* font-family: "Prompt", sans-serif; */
  font-size:1em;
  color:#FFF;
  text-align: left !important;
}
.footer_sub_menu{
  /* font-family: "Prompt", sans-serif; */
  font-size:.75em;
  opacity: .8;
  height: auto;
  color:#FFF;
  text-align: left !important;
}
.footer_sub_menu a {
  margin: .25em 0px;
  text-align: left !important;
}

.txt-eba-1 {
  font-size: 1em;
}
.water-drop-1 {
  max-width:80px; position: absolute; top:-100px; right:16%;
}
.water-drop-2 {
  max-width:70px; position: absolute; top:-40px; right:2%;
}
.privacy_box {
  font-size: 1em;
}
.btn-accept {
  background-color: #01bab5;
  border-radius: 12px;
  padding: .5em 1em;
  color: #FFF;
  font-size:.9em;
}
.btn-dont-accept {
  background-color: #777;
  border-radius: 12px;
  padding: .5em 1em;
  color: #FFF;
  font-size:.9em;
}

#accessibility_tools {
  width: auto;
  position: fixed;
  top: 25%;
  left: 0px;
  z-index: 99;
}


.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media only screen and (max-width: 1024px) {
  h3 {
    font-size: 2em !important;
  }
  .box-banner{
    width: 50% !important;
  }
	.text-banner {
    font-size:2rem; line-height:2.5rem;
  }
  .religious{
    overflow: hidden !important;
  }
  .religious_message {
    font-size:1.5rem; line-height:1.5rem;
  }
  .promotion {
    font-size: 14px !important;
  }
  .box-news {
    /* color: #333 !important; */
    position: absolute !important;
  }
  .footer_menu{
    text-align: center !important;
  }
  .footer_sub_menu {
    text-align: center !important;
  }
  .footer_sub_menu a {
    text-align: center !important;
  }
  .footer_menu_item {
    text-align: center !important;
  }
  .privacy_box {
    font-size: .8em;
  }

}

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

  /* .content {
    font-size: .8em !important;
  } */

  #worship_header{
    color:#2a2929; font-size:1.2em;
  }

  h3 {
    font-size: 1.5em !important;
  }
  .box-banner{
    width: 70% !important;
  }
	.text-banner {
    font-size:1.5rem; line-height:2rem;
  }
  .religious{
    overflow: hidden !important;
  }
  .religious_message {
    font-size:1.5rem; line-height:1.5rem;
  }
  .promotion {
    font-size: 16px !important;
  }
  .box-news {
    color: #333 !important;
    position: static !important;
  }

  .head_txt {
    color: #4972b1;
    font-weight: 600;
    font-size: 1.8em;
  }
  .head_txt_2 {
    color: #4972b1;
    font-weight: 600;
    font-size: 1.4em;
  }
  .head_txt_sub {
    color: #221f20;
    font-weight: 300;
    font-size: 1em;
  }
  .head_txt_3 {
    color: #01bab5;
    font-weight: 600;
    font-size: 1.5em;
  }
  

  .banner_effect_1 {
    /* height:100px; background-size: 800px; */
  }
  .banner_effect_2 {
    /* height:40%; */
  }

  .water-drop-1 {
    max-width:40px; position: absolute; top:-30px; right:12%;
  }
  .water-drop-2 {
    max-width:30px; position: absolute; top:-10px; right:0%;
  }
  .footer_menu{
    text-align: center !important;
  }
  .footer_sub_menu {
    text-align: center !important;
  }
  .footer_sub_menu a {
    text-align: center !important;
  }
  .footer_menu_item {
    text-align: center !important;
  }
  .privacy_box {
    font-size: .8em;
  }

}