* {
  /* font-family: 'Lora', sans-serif; */
  font-family: 'Source Serif Pro', serif;
  /* font-family: 'DM Serif Display'; */
  text-decoration: none !important;
}

body {
  font-size: 1rem;
  /* font-size: 15px; */
  color: #ffffff;
  scroll-behavior: smooth;
  min-height: 100vh;
  position: relative;
}

nav,
main,
footer {
  transition: all 0.3s ease;
  display: none !important;
}

main:not(.fd) {
  padding-bottom: 200px;
}

main.fd {
  height: 100vh;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

th,
td {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #8b4513;
  border-left: 8px solid #fed980;
  border-right: 8px solid #fed980;
  border-bottom: 8px solid #8b4513;
  width: 55px;
  height: 55px;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading,
#file-content-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-main {
  color: #8b4513;
}
.text-main:hover {
  color: #593419;
  text-decoration: underline !important;
}

.main-color {
  color: rgba(131, 67, 4, 0.7) !important;
}

.main-color.nav-link {
  transition: 500ms all ease;
}

.main-color.title {
  color: #8b4513 !important;
}

.title {
  font-weight: 800;
}

.main-color.nav-link:hover {
  opacity: 0.5;
}

.main-color.active:hover {
  opacity: 1;
}

.main-color.active {
  color: #8b4513 !important;
  font-weight: 700;
}

nav {
  z-index: 5;
  position: sticky !important;
  top: 0;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bg-main-color {
  background-color: #fed980 !important;
}

.bg-main-color-3 {
  /* background-color: #ffc16a !important; */
  /* background-color: #fecc80 !important; */
  background-color: #fcd375 !important;
}

.min-width-file {
  min-width: 750px;
}

#download-content {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.bg-sub-color {
  background-color: #8b4513;
}

.bg-main-color-2 {
  transition: 0.3s all ease;
  background-color: rgba(139, 69, 19, 0.7) !important;
  color: #ffffff !important;
}

.bg-main-color-2:hover {
  background-color: #fed980 !important;
  color: #8b4513 !important;
}

.kw {
  background-color: #8b4513 !important;
  transition: 0.3s all ease;
  color: #ffffff !important;
}

.kw:hover {
  background-color: rgba(139, 69, 19, 0.6) !important;
}

.bg-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.bg-img-contain {
  background-size: contain !important;
}

.border-bottom:not(.none) {
  border-bottom-color: #fed980 !important;
}

.file-item {
  font-size: 14px;
}

.file-item.active {
  background-color: rgba(120, 210, 255, 0.4);
  border-bottom-color: transparent !important;
}

.file-item > * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.section-title-colored {
  color: rgba(var(--bs-dark-rgb), 1) !important;
}

.card-img-top {
  width: 100%;
  object-fit: cover;
}

.unit {
  transition: all 0.2s ease;
}

.unit:hover {
  transform: scale(101%);
  color: #8b4513 !important;
}

.unit-img {
  position: relative;
  text-align: center;
  background-position: center center;
  background-size: cover;
  transition: all 300ms ease;
  -webkit-transition: all 0.3s ease;
}

.unit-img:hover,
.unit-img-hovered {
  -webkit-transform: scale(1.1, 1.1) rotate(2.5deg);
  transform: scale(1.1, 1.1) rotate(2.5deg);
}

.card.berita {
  /* box-shadow: none; */
  transition: all 0.3s ease;
}

.card.berita .card-img-top {
  height: 15vw;
  object-fit: cover;
}

.card.berita:hover {
  transform: translateY(-5px);
  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  /* box-shadow: 0px 0px 25px -5px #4f4f4f; */
}

.bg-grey {
  background-color: #fdfdfd;
}

.berita-overlay {
  z-index: 2;
  background-color: rgba(220, 220, 220, 0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  visibility: hidden !important;
  opacity: 0;
  transition: all 0.3s ease;
}

.berita-overlay-hover {
  visibility: visible !important;
  opacity: 1;
}

.berita-overlay-button {
  background-color: #fed980;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(139, 69, 19, 0.7) !important;
  transition: all 0.1s ease;
}

.berita-overlay-button:hover {
  background-color: #fed520;
}

.folder-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.galeri-item {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  transition: 300ms ease;
  transition-property: transform, box-shadow;
}

.galeri-item:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  transform: scale(101%);
}

.video-tag {
  height: 42px;
  width: 42px;
  transition: 300ms ease;
  transition-property: transform;
}

.galeri-item .video-tag i {
  transition: 300ms ease;
  transition-property: transform;
}

.galeri-item:hover .video-tag,
.galeri-item:hover .video-tag i {
  transform: scale(105%);
}

.p-img {
  height: 40vh !important;
  object-fit: cover;
}

.carousel-item {
  transition: all 0.3s ease;
}

.pengurus-desc {
  cursor: pointer;
  transition: all 0.3s ease;
}

.pengurus-desc:hover {
  transform: translateY(-5px);
}

#list-doa div.card {
  transition: 300ms ease;
  transition-property: background-color, color;
}

#list-doa div.card.active,
#list-doa div.card:hover {
  background-color: #593419;
  color: #fff;
}

.slide-delay-100 {
  transition-delay: 100ms;
}

.slide-delay-150 {
  transition-delay: 150ms;
}

.slide-delay-200 {
  transition-delay: 200ms;
}

.slide-delay-250 {
  transition-delay: 250ms;
}

.slide-delay-300 {
  transition-delay: 300ms;
}

.slide-delay-350 {
  transition-delay: 350ms;
}

.slide-delay-400 {
  transition-delay: 400ms;
}

.slide-delay-450 {
  transition-delay: 450ms;
}

.animation {
  transition-duration: 500ms;
  transition-timing-function: ease-out;
}

.slide-left {
  transform: translateX(-20%);
  opacity: 0%;
}

.slide-left.active {
  transform: translateX(0%);
  opacity: 100%;
}

.slide-right {
  transform: translateX(20%);
  opacity: 0%;
}

.slide-right.active {
  transform: translateX(0%);
  opacity: 100%;
}

.slide-up {
  transform: translateY(20%);
  opacity: 0%;
}

.slide-up.active {
  transform: translateX(0%);
  opacity: 100%;
}

.slide-down {
  transform: translateY(-20%);
  opacity: 0%;
}

.slide-down.active {
  transform: translateX(0%);
  opacity: 100%;
}

.fade-in {
  opacity: 0%;
}

.fade-in.active {
  opacity: 100%;
}

.berita-img {
  min-height: 250px;
  max-height: 300px;
}

.berita-img-single {
  min-height: 350px;
  max-height: 450px;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

.bg-content {
  background-color: rgba(20, 20, 20, 0.7);
}

.bg-loading {
  background-color: rgba(15, 15, 15, 0.6);
  z-index: 999;
}

@media screen and (max-width: 428px) {
  .pengurus-img {
    height: 180px;
  }

  a,
  p,
  label,
  input,
  span,
  h6 {
    /* font-size: calc(0.7vw + 0.7vh + 1vmin) !important; */
    font-size: 15px !important;
  }

  h3 {
    /* font-size: calc(1vw + 1vh + 1.7vmin) !important; */
    font-size: 18px !important;
  }

  h4 {
    font-size: 16px !important;
  }

  h5 {
    font-size: calc(10px + 1vw) !important;
  }

  #profil-img div {
    height: 250px !important;
  }

  #logo-yayasan {
    width: 8vw;
  }
}

@media screen and (min-width: 428px) {
  .pengurus-img {
    height: 180px;
  }

  #profil-img div {
    min-height: 370px !important;
    height: 75vh;
  }
}

@media screen and (min-width: 768px) {
  .pengurus-img {
    height: 260px;
  }
}

@media screen and (min-width: 992px) {
  .pengurus-img {
    height: 200px;
    /* margin-bottom: 2rem !important; */
  }
}

@media screen and (min-width: 1440px) {
  .pengurus-img {
    height: 250px;
    /* margin-bottom: 4rem !important; */
  }
}