/* dropdown multy level */
.dropdown-menu li {
  position: relative;
}

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
  display: block;
}

/* endDropdown */

.lc a {
  color: #131313;
}

.lc i {
  color: rgba(47, 164, 255, 1);
}

.lc a:hover {
  color: #F95700FF;
}

.lc1 i {
  color: #131313;
}


.lc1 a:hover {
  color: rgb(247, 247, 247);
}

/* bg-gradient */
.bg-custom {
  background: rgb(47, 164, 255);
  background: radial-gradient(circle, rgba(47, 164, 255, 1) 0%, rgba(14, 24, 95, 1) 100%);
}

.navbar li:hover {
  background-color: #F95700FF;
}

.navbar .navbar-nav .nav-item {

  transition: all 0.5s;
}

.navbar li:hover>ul.dropdown-menu {
  display: block;
}

/* hoverzoom */
.zoom {
  /* padding: 50px; */
  transition: transform .2s;
  /* Animation */
  width: 100%;
  margin-bottom: 8px;
}

.zoom>strong {
  color: #000;
}

.zoom:hover {
  transform: scale(1.2);
  /* (150% zoom)*/
}

/* endhoverzoom */


/* color plate */
.c1 {
  background-color: #00A4CCFF;
}

.c1 {
  background-color: #F95700FF;
}

.c1 {
  background-color: #0063B2FF;
}

.c1 {
  background-color: #9CC3D5FF;
}

.c1 {
  background-color: #101820FF;
}

.c1 {
  background-color: #FEE715FF;
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

.text-top {
  vertical-align: text-top;

}

/* Search Table */
#myInput {
  width: 100%;
  /* Full-width */
}

.opsi {
  display: none;
}

#showOne {
  border: 1px solid red;
}

#showTwo {
  border: 1px solid green;
}

#showThree {
  border: 1px solid blue;
}

#myTable {
  border-collapse: collapse;
  /* Collapse borders */
  /* width: 100%; /* Full-width */
  /* border: 1px solid #ddd; Add a grey border */
  /* font-size: 18px; Increase font-size */
}

/* #myTable th, #myTable td {
    text-align: left; /* Left-align text */
/* padding: 12px; Add padding */
/* } */

/* #myTable tr {
    /* Add a bottom border to all table rows */
/* border-bottom: 1px solid #ddd; */
/* } */

/* #myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
/* background-color: #f1f1f1; */
/* } */
/* End Search Table */

/* .container {
    position: relative;
    width: 50%;
  }

  .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .container:hover .image {
    opacity: 0.3;
  }
  
  .container:hover .middle {
    opacity: 1;
  }
  
  .text {
    background-color: #04AA6D;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  } */

/* Foto */
#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  object-fit: cover;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

@media (max-width: 600px) {
  #gallery img {
    width: 100%;
  }
}

/* ENDFoto */

.img-custom-responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-justify {
  text-align: justify;
}

a.link-berita {
  color: rgb(0, 133, 133);
  font-size: small;
  transition: .5s ease all;
}

a.link-berita:hover {
  color: rgb(0, 54, 54);
  font-weight: bold;
}


.img-300 {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* loader */
#loading-page {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  overflow-y: hidden;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-wide {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.color {
  background-color: #3395ff;
}

.l1 {
  width: 15px;
  height: 65px;
  position: absolute;
  animation: move-h 1.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

.l2 {
  width: 15px;
  height: 60px;
  position: absolute;
  transform: rotate(90deg);
  animation: move-v 1.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes move-h {
  0% {
    top: 0;
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    top: 30%;
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes move-v {
  0% {
    left: 0;
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    left: 45%;
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.animation-effect-light {
  animation: effect 0.2s 0.1s infinite linear;
}

.animation-effect-light-d {
  animation: effect 0.3s 0.2s infinite linear;
}

.animation-effect-rot {
  animation: rot 0.8s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

.animation-effect-scale {
  animation: scale 0.8s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes effect {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

  50% {
    transform: rotate(180deg);
  }

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

@keyframes scale {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.9;
  }

  100% {
    scale: 1;
  }
}

.e1 {
  width: 1px;
  height: 40px;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 8%;
}

.e2 {
  width: 60px;
  height: 1px;
  opacity: 0.8;
  position: absolute;
  top: 8%;
  left: 0;
}

.e3 {
  position: absolute;
  top: 10%;
  left: 12%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #3395ff;
}

.e4 {
  width: 1px;
  height: 40px;
  opacity: 0.3;
  position: absolute;
  top: 90%;
  right: 10%;
}

.e5 {
  width: 40px;
  height: 1px;
  opacity: 0.3;
  position: absolute;
  top: 100%;
  right: 0;
}

.e6 {
  position: absolute;
  top: 100%;
  right: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 32px;
  color: #3395ff;
}

.e7 {
  width: 1px;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
  animation: height 1s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes height {
  0% {
    bottom: 0%;
    left: 0%;
    height: 0px;
  }

  25% {
    height: 90px;
  }

  50% {
    bottom: 100%;
    left: 100%;
    height: 90px;
  }

  75% {
    height: 0px;
  }

  100% {
    bottom: 0%;
    left: 0%;
    height: 0px;
  }
}

.e8 {
  width: 20px;
  height: 1px;
  position: absolute;
  bottom: 50%;
  left: 0;
  animation: width 1.5s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes width {
  0% {
    left: 0%;
    width: 0px;
  }

  50% {
    left: 100%;
    width: 90px;
  }

  100% {
    left: 0%;
    width: 0px;
  }
}
/* end-loader */