html {
	scroll-behavior: smooth;
}

.main-header {
	box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 5px rgba(0,0,0,.2);
}

.main-header .brand-image {
	height: 60px!important;
}

.control-sidebar {
	width: 350px;
}

.search-tgl-bhs .tgl-bhs {
	display: flex;
}

.search-tgl-bhs .tgl-bhs .tgl {
	font-size: smaller;
	font-style: italic;
	color: green;
}

.page-title h3 {
	width: 100%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1.5rem;
}

.welcome h3 {
	width: 100%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1.5rem;
}

.welcome .img {
	background-size: cover;
	width: 100%;
	height: 200px;
	border-radius: .25rem;
}

.welcome p {
	text-align: justify;
}

.icon-menu .tittle {
	font-weight: bold;
	font-size: larger;
}

.icon-menu .tittle::after {
    content: '';
    display: block;
    border-bottom: 2px solid #ffffffa8;
    width: 100%;
    margin-top: 5px;
}

.icon-menu .description {
	font-weight: 300;
	text-align: justify;
	max-height: 100px;
	overflow: hidden;
}

.icon-menu .description-box {
	text-align: center;
	max-height: 100px;
	overflow: hidden;
	font-weight: bold;
}

.icon-menu .big-icon {
	font-size: 100px;
}

.icon-menu .info-box {
	transition: .2s;
}

.icon-menu .info-box .info-box-content {
	justify-content:  start;
	text-align: center!important;
}

.icon-menu .bg-yelow-warning {
	height: 100%;
	transition: color .2s ease-in-out, background .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
	color: #fff;
}

.icon-menu .col-12:nth-child(1) .bg-yelow-warning {
	background: rgb(255 197 25);
	/* background: rgb(241,234,0);
	background: linear-gradient(45deg, rgba(241,234,0,1) 0%, rgba(255,193,7,1) 100%);  */
}

.icon-menu .col-12:nth-child(1) .bg-yelow-warning:hover {
	background: rgb(224 175 28);
	/* background: rgb(241,234,0);
	background: linear-gradient(45deg, rgba(221,214,0,1) 0%, rgba(255,193,7,1) 100%);  */
}

.icon-menu .col-12:nth-child(2) .bg-yelow-warning {
	background: rgb(255 197 25);
	/* background: rgb(255,193,7);
	background: linear-gradient(45deg, rgba(255,193,7,1) 0%, rgba(241,133,0,1) 100%);  */
}

.icon-menu .col-12:nth-child(2) .bg-yelow-warning:hover {
	background: rgb(224 175 28);
	/* background: rgb(255,193,7);
	background: linear-gradient(45deg, rgba(235,173,7,1) 0%, rgba(241,133,0,1) 100%);  */
}

.icon-menu .col-12:nth-child(3) .bg-yelow-warning {
	background: rgb(255 197 25);
	/* background: rgb(241,133,0);
	background: linear-gradient(45deg, rgba(241,133,0,1) 0%, rgba(255,7,7,1) 100%);  */
}

.icon-menu .col-12:nth-child(3) .bg-yelow-warning:hover {
	background: rgb(224 175 28);
	/* background: rgb(241,133,0);
	background: linear-gradient(45deg, rgba(221,113,0,1) 0%, rgba(255,7,7,1) 100%);  */
}

.icon-menu .col-12:nth-child(4) .bg-yelow-warning {
	background: rgb(255 197 25);
	 /* background: rgb(255,7,7);
	background: linear-gradient(45deg, rgba(255,7,7,1) 0%, rgba(255,236,7,1) 100%);   */
}

.icon-menu .col-12:nth-child(4) .bg-yelow-warning:hover {
	background: rgb(224 175 28);
	 /* background: rgb(255,7,7);
	background: linear-gradient(45deg, rgba(235,7,7,1) 0%, rgba(235,236,7,1) 100%);   */
}

.berita-pengumuman .card {
	height: 100%;
}

.berita-pengumuman .card-body,
.foto-video-agenda .agenda .card-body {
	max-height: 250px;
	overflow-y: scroll;
	scrollbar-width: thin;
}

.berita-pengumuman .products-list .product-description {
	white-space: normal;
}

.back-to-top {
	opacity: 0;
} 

.sticky-top {
	top: 75px;
}

.foto-video-agenda .foto,
.foto-video-agenda .video {
	height: 100%;
}

.foto-video-agenda .foto .description,
.foto-video-agenda .video .description {
	position: absolute;
	bottom: 0;
	background-color: #0000006e;
	font-size: smaller;
	color: #fff;
	display: block;
	width: 100%;
	padding: 5px 1rem 1rem 1rem;
	font-weight: 300;
}

.foto-video-agenda .foto .carousel-indicators,
.foto-video-agenda .video .carousel-indicators {
	margin-bottom: 0;
}

aside.control-sidebar {
	height: 100%;
}

video {
	width: 100%;
	height: auto;
}

.content-header {
	background-color: #cccccc52;
}

.content-header .breadcrumb .breadcrumb-item a:not(:hover) {
	color: #000;
}

.content-header .breadcrumb .breadcrumb-item a:hover {
	color: rgba(0,0,0,.5);
}

.content-header .breadcrumb .breadcrumb-item.active {
	color: #06060657
}

.js-app-guides .card {
	height: 100%;
}

/*animasi slide-in*/
.card,
.info-box {
	opacity: 0;
}

.come-in {
  opacity: 1;
  transform: translateY(50px);
  animation: come-in 1s ease forwards;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.come-in:nth-child(odd) {
  animation-duration: 0.8s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}
/*end animasi slide-in*/

/*footer*/
footer.main-footer {
	background: #616161;
	color: #fff;
	font-size: 8pt;
}

footer.main-footer img {
	width: 100%;
}

footer.main-footer .desc,
footer.main-footer .desc a {
	color: #c5c5c5!important;
	line-height:1.5;
}

footer.main-footer .title {
	font-weight: 600;
}

/*end footer*/

.tooltip {
	position: relative;
	display: inline-block;
	opacity: 1;
	height: 100%;
	z-index: 0;
  }
  
  .tooltip .tooltiptext {
	visibility: hidden;
	width: 300px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: calc(-300px/2);
	opacity: 0;
	transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
  }

  .info-content {
	position: absolute;
    right: 10px;
    border-radius: 10%;
    width: 30px;
	height: 30px;
	text-align: center;
	background: #9a9a9a;
  }

  /*responsive*/

 @media only screen and (max-width: 768px) {
 	footer.main-footer .location p {
 		text-align: center;
 	}
 }