/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap"); */

:root {
	/* warna dasar KLH */
	--bg_primary1: #005952 !important;
	--bg_primary2: #e47418 !important; 
	--bg_primary2_ori: #f97910 !important; 
	--bg_second1: #ecebe5 !important;
	--bg_second2: rgb(255, 255, 255) !important;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
}

body {
	width: 100%;
	background-color: var(--bg_second2);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

th {
    text-align: inherit;
}

.container {
	width: 100%;
}

.logo-riseup-transparent {
	background-image: url("logo-riseup-transparent.svg");
	background-repeat: no-repeat;
	background-size: cover; /* atau contain */
	width: 32;
	height: 32;
}

/* NAVIGATION HEADER */
.container-navbar {
	box-sizing: border-box;
	background-color: var(--bg_primary1);
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	border-radius: 0 0 2rem 2rem;
	/* overflow: hidden; */
	position: fixed;
	z-index: 10;
}

.menu-b-625 {
	display: none;
}

.navbar-b {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 4%;
	top: 0;
	max-width: 2000px;
	width: 100%;
	font-size: 0.9rem;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 0 0 2rem 2rem;
	position: relative;
}
.navbar-b .logo-instansi {
	display: flex;
	width: fit-content;
	align-items: center;
}
.navbar-b .logo-instansi img {
	width: 5rem;
	height: 5rem;
	margin-right: 0.7rem;
}
.navbar-b .menu-b {
	display: flex;
	justify-content: flex-end;
	width: fit-content;
	font-size: 0.875rem;
}

/* Styling untuk menu utama */
.navbar-b .menu-item {
	display: flex;
	align-items: center;
	position: relative; /* Membuat elemen li sebagai referensi untuk posisi submenu */
	transition: color 0.3s ease;
	color:azure;
	margin-left: 1rem;
	padding: 0 0.5rem;
	list-style: none;
	cursor: pointer;
  }

.navbar-b .menu-item a {
    color: inherit; /*Mengikuti warna teks item */
	display: grid;
	/* place-content: center; */
	justify-items: center;
	align-content: baseline;
	line-height: 100px;
}

.menu-item::after {
	content: '';
	position: absolute;
	bottom: 25px;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--bg_primary2_ori);
	transition: width 0.3s ease-in-out;
}
.menu-item:hover::after,
.menu-item.active::after {
	width: 100%;
}

.submenu {
	display: none; /* Default sembunyikan submenu */
	background-color: var(--bg_second1);
	padding: 10px;
	color: black;
	border-radius: 5px;
	position: absolute;
	top: 100%; /* Tempatkan submenu tepat di bawah item menu */
    left: 50%; /* Menempatkan titik tengah sub-menu di tengah menu */
    transform: translateX(-50%); /* Menggeser sub-menu ke kiri 50% dari ukurannya agar tepat di tengah */
	width: max-content;
	border: 1px solid #ccc;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Efek bayangan di tepi */
}

.submenu-b-625 {
	display: none; /* Default sembunyikan submenu */
	background-color: var(--bg_second1);
	padding: 10px;
	color: black;
	border-radius: 5px;
	position: absolute;
	top: 100%; /* Tempatkan submenu tepat di bawah item menu */
    left: 50%; /* Menempatkan titik tengah sub-menu di tengah menu */
    transform: translateX(-50%); /* Menggeser sub-menu ke kiri 50% dari ukurannya agar tepat di tengah */
	width: max-content;
	border: 1px solid #ccc;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); /* Efek bayangan di tepi */
}

.submenu span {
	font-weight: 600;
	line-height: 40px;
}

.submenu-list {
	display: inline-flex;
	list-style-type: none;
	padding: 0;
	margin-bottom: 0;
	gap: 0.5rem;
}

.submenu-list-2 {
	list-style-type: none;
	padding: 0;
	margin-bottom: 0;
	display: grid;
	row-gap: 0.4rem;
}

.submenu-list li  {
	cursor: pointer;
	width: 140px;
	height: 130px;
	text-align: center;
}

.submenu-list-2 li  {
	cursor: pointer;
	border-top: 2px solid #d1e0e1;
}

.submenu-list li:hover, .submenu-list-2 li:hover,
.submenu-list li.active, .submenu-list-2 li.active {
	color: var(--bg_primary1);
	background-color: #dfe3e3;
	font-weight: 600;
}

.submenu-list-2 li:hover a, .submenu-list-2 li.active a {
	padding:0.5rem;
	color: var(--bg_primary1);
}

.submenu-list a {
	line-height: 22px !important;
	width: inherit;
	height: inherit;
	padding: 0.5rem 0;
}

.submenu-list-2 a {
	line-height: 26px !important;
	width:100%;
	height:100%;
	padding:0.5rem 0.5rem 0.5rem 0;
	justify-content: left !important;
	transition: padding 0.3s ease-in-out; /* Efek transisi */
	color:black;
}

.menu-item:hover .submenu {
	display: block; /* Tampilkan submenu ketika menu-item di-hover */
}

.menu-item:hover .submenu#subMenuPublikasi {
	display: inline-flex; /* Tampilkan submenu ketika menu-item di-hover */
	min-width: 620px;
	gap: 2rem;
	padding: 10px 20px;
}

.menu-item:hover .submenu2 {
	flex:1;
	font-size: 0.85rem;;
}

.navbar-b .cari-menu-toggle {
	display: none;
}
.navbar-b .menu-b-toggle {
	flex-direction: column;
	height: 18px;
	justify-content: space-between;
	position: relative;
}
.navbar-b .menu-b-toggle input {
	position: absolute;
	height: inherit;
	width: 34px;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
	border-radius: 5px;
	margin-left: -0.275rem;
}
.navbar-b .menu-b-toggle span {
	height: 3px;
	width: 25px;
	background-color: azure;
	border-radius: 3px;
	transition: all 0.5s;
	z-index: 2;
}
.navbar-b .menu-b-toggle div {
	position: absolute;
	z-index: 1;
	width: 34px;
	height: 34px;
	border-radius: 5px;
	margin-top: -0.5rem;
	margin-left: -0.275rem;
	background-color: #818881;
}
.navbar-b .menu-b-toggle input:checked ~ span:nth-child(2) {
	transform: translateY(7.3px) rotate(45deg);
}
.navbar-b .menu-b-toggle input:checked ~ span:nth-child(3) {
	transform: scale(0);
}
.navbar-b .menu-b-toggle input:checked ~ span:nth-child(4) {
	transform: translateY(-7.3px) rotate(-45deg);
}


/* RESPONSIVE NAVIGATION HEADER */
@media screen and (max-width: 1242px) {
	.container-navbar {
		position: relative;
		z-index: 10;
	}
	.navbar-b .logo-instansi {
		padding-top: 0.75rem;
	}
	.navbar-b .menu-b {
		width:100%;
	}
	.navbar-b .menu-item::after {
		bottom: 10px;
	}
	.navbar-b .menu-item a {
		line-height: 60px;
	}
}

@media screen and (max-width: 1095px) {
	.navbar-b .logo-instansi {
		width: 100%;
	}
	.navbar-b .menu-b {
		width: 100%;
		/* margin-top: 0.3rem; */
	}
}

@media screen and (max-width: 675px) {
	 .nama-instansi {
		display: block;
	 }
}


@media screen and (max-width:625px) {
	.container-navbar {
		border-radius: 0 0 1.5rem 1.5rem;
	}
	.navbar-b {
		font-size: 0.875rem;
		padding: 1rem 4% 0.75rem;
		gap: 1rem;
	}
	.navbar-b .logo-instansi {
		padding-top: 0;
	}
	.navbar-b .logo-instansi img {
		width: 4rem;
		height: 4rem;
	}
	.navbar-b .cari-menu-toggle {
		display: flex;
		width: 99%;
		justify-content: flex-end;
		align-items: center;
	}
	.navbar-b .cari-b-toggle {
		/* font-size: 0.8rem; */
		margin-right: 1.1rem;
		margin-bottom: 0.25rem;
		color: azure;
	}
	.navbar-b .menu-b-toggle {
		display: flex;
		margin-bottom: 0.5rem;
	}
	.navbar-b .menu-b {
		display: none;
	}

	.menu-b-625 {
		display: flex;
		position: absolute;
		font-size: 0.875rem;
		flex-direction: column;
		justify-content: space-evenly;
		background-color: var(--bg_primary1);
		width: 46%;
		right: 4%;
		/* top: -100%; */
		padding: 0.5rem 0;
		margin-left: auto;
		border-radius: 5px;
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.5s ease-out, opacity 0.3s ease-out; /* Transisi untuk transform dan opacity */ 
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
		z-index: 9;
	}
	.menu-b-625 .menu-item {
		list-style: none;
		color: azure;
		line-height: 70px;
		cursor: pointer;
		position: relative;
	}
	.menu-b-625  .menu-item a {
		display: inline-block;
		list-style: none;
		width: 100%;
	}
	.menu-b-625  .menu-item > a {
		color: azure;
	}

	.submenu#subMenuPublikasi625 {
		display: inline-flex; /* Tampilkan submenu ketika menu-item di-hover */
		visibility: hidden;  /* Default: Sembunyikan menu */
		opacity: 0;
		transition: opacity 0.3s ease-in-out, visibility 0.3s;
	}

	/* .menu-item:hover .submenu#subMenuPublikasi,  */
	.menu-item:hover .submenu#subMenuPublikasi625 {
		min-width:200%;
		gap: 0.5rem;
		z-index: 11;
		text-align: left;
		line-height: 50px;
		visibility: visible;  
		opacity: 1;
	}

	.submenu {
		position: fixed;
		top:0;
		left: -100%;
		width: 100%;
		transform: translateX(0);
		text-align: center;
	}

	.submenu2 span {
		line-height: 23px !important;
	}

	.submenu-list {
		display: inline-block;
	}
	.submenu-list a {
		color: black;
	}
	.submenu-list li:hover a {
		color: var(--bg_primary1);
	}

	#mb625_sub1.slide,
	#mb625_sub2.slide {
		margin-top: 1rem;
		grid-template-rows: 1fr;
	}
	#faAngles1,
	#faAngles2 {
		transition: transform 0.5s;
	}
	#faAngles1.rotate,
	#faAngles2.rotate {
		transform: rotate(180deg);
	}

	.menu-item::after {
		left: 1.25rem;
		bottom: 13.5px;
	}
	.menu-item:hover::after,
	.menu-item.active::after {
		width: 35%;
	}

	.sp-b-625 {
		padding-left: 1.25rem;
	}
}

@media screen and (max-width: 520px) {
	.navbar-b .logo-instansi {
		flex-direction: column;
		text-align: center;
		/* margin-bottom: 1rem; */
	}
	.navbar-b .logo-instansi img {
		width: 3.5rem;
		height: 3.5rem;
		margin-bottom: 0.4rem;
	}

	.menu-item:hover .submenu#subMenuPublikasi625 {
		line-height: 40px;
	}

	.submenu-list-2 a {
		font-size: 0.85rem;
	}
}

@media screen and (max-width: 430px) {
	.submenu-list-2 a {
		font-size: 0.825rem;
	}
}

/* BUTTON UP MUNCUL JIKA SCROLL HAL KE BAWAH */
#btn-up {
	position: fixed;
	bottom: 50px; /* Atur jarak dari bawah */
	right: 5px; /* Atur jarak dari kanan */
	z-index: 9999; /* Pastikan selalu di atas elemen lain */
	background-color: #93999e91; /* Warna tombol */
	color: white;
	border: none;
	padding: 16px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	border-radius: 4px;
	visibility: hidden;
	transition: visibility 0.3s ease-in-out; /* Efek transisi */
}
#btn-up:hover {
	background-color: #6d7175;
}

/* CONTAINER MAIN */
.container-main {
	box-sizing: border-box;
	background-color: var(--bg_second2);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-top: 96px;
}

.c-outside-bg1 {
	box-sizing: border-box;
	background-color: var(--bg_second1);
	width: 100%;
}
.c-outside-bg2 {
	box-sizing: border-box;
	background-color: var(--bg_second2);
	/* background-color: #f4ffec; */
	width: 100%;
}

/* RESPONSIVE CONTAINER-MAIN */
@media (max-width: 1242px) {
	.container-main {
		margin-top: 0;
	}
}

/* TITLE MAIN */
.title-main {
	padding: 2rem 4% 1rem;
}

/* RESPONSIVE TITLE MAIN */
@media (max-width: 1242px) {
	.title-main {
		padding: 1.5rem 4% 0.75rem;
	}
}

@media (max-width: 625px) {
	.title-main {
		padding: 1.25rem 4% 0.5rem;
	}
}

/* INDEX.PHP */
/* IMAGE CAROUSEL */
.hero-carousel {
	max-width: 2000px;
	width: 100%;
	/* top: 0.3rem; */
}
.hero-carousel .item .c-image-carousel img {
	height: 85vh;
}

.hero-carousel .owl-nav button.owl-prev {
	left: 15px;
}
.hero-carousel .owl-nav button.owl-next {
	right: 15px;
}

/* RESPONSIVE IMAGE CAROUSEL */
@media (min-width: 320px) and (max-width: 548px) {
	.hero-carousel .item .c-image-carousel img {
		height: 45vh;
	}
}

@media (min-width: 550px) and (max-width: 765px) {
	.hero-carousel .item .c-image-carousel img {
		height: 55vh;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.hero-carousel .item .c-image-carousel img {
		height: 65vh;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.hero-carousel .item .c-image-carousel img {
		height: 85vh;
	}
}

@media (min-width: 1200px) {
	.hero-carousel .item .c-image-carousel img {
		height: 85vh;
	}
}

@media (min-width: 1400px) {
	.hero-carousel .item .c-image-carousel img {
		height: 800px;
	}
}

/* set font-size default all btn */
.btn {
	font-size: 0.9rem;
}

/* INDEX PROFIL */
.c-profil-idx {
	display: grid;
	grid-template-areas:
		"title-profil-idx title-profil-idx"
		"title-profil-in title-profil-in"
		"btns-profil btns-profil";
	grid-template-columns: auto 2fr;
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	grid-row-gap: 1rem;
}

.title-profil-idx {
	grid-area: title-profil-idx;
	display: grid;
	grid-column: 2;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 4rem;
	border-radius: 2rem 0 0 2rem;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: end;
	cursor: pointer;
}
.title-profil-idx:hover {
	filter: brightness(0.8);
}

.title-profil-idx > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 2.25rem 0 2.25rem;
}

.title-profil-in {
	grid-area: title-profil-in;
	padding: 0 4%;
}

.btns-profil {
	grid-area: btns-profil;
	padding: 0 4% 1.5rem 4%;
	display: flex;
	justify-content: space-evenly;
	z-index: 3;
}

/* RESPONSIVE INDEX PROFIL */
@media screen and (max-width: 535px) {
	.title-profil-idx > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 2rem 0 2rem;
	}
	.btns-profil > button {
		margin: 0 0.4rem 0 0.4rem;
	}
	.btns-profil > div {
		font-size: 0.875rem;
	}
}

/* INDEX BERITA TERKINI */
.c-berita-idx {
	display: grid;
	grid-template-areas:
		"title-berita-idx title-berita-idx"
		"list-berita list-berita"
		"btn-berita-lihat-lgkp btn-berita-lihat-lgkp";
	grid-template-columns: 2fr auto;
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	grid-row-gap: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.title-berita-idx {
	grid-area: title-berita-idx;
	display: grid;
	grid-column: 1;
	background-color: var(--bg_primary1);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 4rem;
	border-radius: 0 2rem 2rem 0;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: start;
	/* cursor: pointer; */
}
/* .title-berita-idx:hover {
	filter: brightness(0.8);
} */

.title-berita-idx > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 2rem 0 2rem;
}

.list-berita {
	grid-area: list-berita;
	padding: 0 4% 0 4%;
}

.list-berita .item {
	background-color: rgb(241, 241, 241);
	border-radius: 1rem;
	margin: 0;
	overflow: hidden;
	transform: scale(0.95);
	transition: transform 0.4s;
}

.list-berita .item:hover {
	transform: scale(1);
	/* box-shadow: #000 0px 4px 16px, #2e701e 0px 8px 24px,
		rgb(56 108 123 / 51%) 0px 16px 60px; */
}
.list-berita .item:hover .image-berita {
	border-bottom: 2px solid #eaf2e6;
}
.list-berita .item:hover .caption-berita > .title-berita {
	background-color: #b5dddf1f;
}

.list-berita .item .image-berita {
	position: relative;
	width: 100%;
	height: 60%;
	background-color: rgb(237, 237, 237);
	border: 2px solid #fff;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	overflow: hidden;
}

.list-berita .item .image-berita img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-berita .item .caption-berita .title-berita {
	width: 100%;
	height: 120px !important;
	background-color: #fff;
}

.list-berita .item .caption-berita .title-berita p {
	padding: 0.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	max-width: 500px;
	height: 114px;
	line-height: 1.1rem;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	-webkit-line-clamp: 6;
	line-clamp: 6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-align: justify;
	color: black;
}

.list-berita .item .caption-berita .lokasi-berita {
	width: 100%;
	height: 40px !important;
	background-color: var(--bg_primary2);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.725rem;
	color: azure;
	text-align: center;
	position: relative;
	padding: 0 0.5rem 0 0.5rem;
}

.btn-berita-lihat-lgkp {
	grid-area: btn-berita-lihat-lgkp;
	justify-self: center;
	margin-bottom: 1.5rem;
	z-index: 3;
}

/* Elemen owl-carousel agar tetap di atas dari elemen btn-up yang ada disamping kanan layar */
/* .owl-carousel {
	z-index: 3;
} */

/* Custom button owl prev next, agar di posisi absolute dikedua tepi Owl-Carousel */
.owl-carousel .owl-nav {
	margin: 0;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	width: 45px;
	height: 45px;
	background-color: rgb(145, 144, 144);
	border-radius: 50%;
	position: absolute;
	top: 45%;
	transform: translateY(-45%);
	opacity: 0.6;
}
.berita-content .owl-nav button.owl-prev {
	left: -25px;
}
.berita-content .owl-nav button.owl-next {
	right: -25px;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	background-color: rgb(0, 0, 0);
}

.owl-carousel .owl-nav button span {
	font-size: 40px;
	font-family: monospace;
	font-weight: 900;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: -0.3rem;
}

.owl-carousel .owl-dots {
	margin-top: 0.5rem;
}

/* RESPONSIVE INDEX BERITA TERKINI */
@media screen and (max-width: 535px) {
	.title-berita-idx > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 1.5rem 0 1.5rem;
	}

	.list-berita .item .caption-berita .title-berita p,
	.btn-berita-lihat-lgkp a {
		font-size: 0.875rem;
	}

	.list-berita .item .caption-berita .lokasi-berita {
		font-size: 0.675rem;
	}

	/* Custom button owl prev next, agar di posisi absolute dikedua tepi Owl-Carousel */
	.owl-carousel .owl-nav button.owl-prev,
	.owl-carousel .owl-nav button.owl-next {
		width: 40px;
		height: 40px;
	}
	.berita-content .owl-nav button.owl-prev {
		left: -20px;
	}
	.berita-content .owl-nav button.owl-next {
		right: -20px;
	}

	.owl-nav button span {
		font-size: 35px;
	}
}

/* BERITADETAILS.PHP */
.linkchain-berita {
	font-size: 0.8rem;
	color: black;
	width: 100%;
	max-width: 1400px;
	padding: 1.5rem 4% 0;
}
.linkchain-berita a {
	color: var(--bg_primary1);
}
.linkchain-berita a:hover {
	color: var(--bg_primary2);
}
.berita-details {
	text-align: justify;
	padding: 1rem 4% 0.5rem;
	max-width: 1400px;
	width: 100%;
}
/* .berita-details .berita-title {
	/* text-align: justify; */
	/* padding: 1rem 4% 0.5rem; 
} */
.berita-details .berita-terkini {
	/* /* text-align: justify; */
	padding: 0 0 1rem;
}
.berita-details .berita-img img {
	border-radius: 8px;
	width: 100%;
	object-fit: scale-down;
}

.berita-info {
	padding: 1rem 4% 0.5rem;
	max-width: 1400px;
	width: 100%;
}
.berita-info .list-berita {
	padding: 0;
}

/* INDEX PUSTAKA ARSIP */
.c-arsip-idx {
	display: grid;
	grid-template-areas:
		"title-arsip-idx title-arsip-idx"
		"list-arsip list-arsip"
		"btn-arsip-lihat-lgkp btn-arsip-lihat-lgkp";
	grid-template-columns: auto 2fr;
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	grid-row-gap: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.title-arsip-idx {
	grid-area: title-arsip-idx;
	display: grid;
	grid-column: 2;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 4rem;
	border-radius: 2rem 0 0 2rem;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: end;
	cursor: pointer;
}
.title-arsip-idx:hover {
	filter: brightness(0.8);
}

.title-arsip-idx > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 2rem 0 2rem;
}

.list-arsip {
	grid-area: list-arsip;
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 0 4% 0 4%;
	column-gap: 0.65rem;
	z-index: 3;
	font-size: 0.9rem;
}
.list-kinerja-h {
	display: grid;
	grid-template-rows: 7.5rem 2fr;
	padding: 0 4% 0 4%;
	/* column-gap: 0.65rem; */
	z-index: 3;
	font-size: 0.85rem;
	max-width: 1400px;
	width: 100%;
}

.list-arsip .kategori-arsip {
	display: block;
	/* grid-template-columns: auto; */
}
.list-kinerja-h .kategori-kinerja {
	overflow: hidden;
	justify-content: center;
	border-bottom: 1px solid #ffffff !important;
	width: 100%;
}
.list-kinerja-h .kategori-kinerja .c-nav-link {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	overflow-x: scroll;
}
.list-kinerja-h .kategori-kinerja .c-nav-link::-webkit-scrollbar {
	display: none;
}

.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow,
.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow {
	position: absolute;
	font-size: 2.1rem;
	z-index: 2;
	align-content: center;
	cursor: pointer;
	width: 4rem;
	height: 8rem;
	display: none;
}
.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow {
	left: 2%;
}
.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow {
	justify-self: end;
	text-align: end;
	right: 2%;
}
.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow:hover i,
.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow:hover i {
	opacity: 1;
}
.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow i,
.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow i {
	opacity: 0.4;
}
.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow.active,
.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow.active {
	display: grid;
}

.list-kinerja-h .kategori-kinerja a {
	position: relative;
	color: rgb(255, 255, 255);
	border-radius: 1rem 1rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	padding: 0.5rem 0.1rem;
	width: 12.2rem;
	height: fit-content;
	border-top: 0.1rem solid;
	border-top-color: #ffffff;
	border-right: 0.1rem solid;
	border-right-color: #ffffff;
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}
.list-kinerja-h .kategori-kinerja a:not(.active):hover {
	color: #000;
	background-color: #31313421 !important;
}
.list-kinerja-h .kategori-kinerja a .title-kategori {
	display: block;
}

.list-arsip .kategori-arsip a.nav-link {
	height: 6.5rem;
	transition: height 0.4s;
	border-radius: 0;
	position: relative;
	border-left: 1px solid lightgrey;
}

.list-arsip .kategori-arsip a.nav-link:first-child {
	border-top-left-radius: 1.5rem;
}
.list-kinerja-h .kategori-kinerja a.nav-link:nth-child(2) {
	border-left: 0.1rem solid;
	border-left-color: #ffffff;
}

.list-arsip .kategori-arsip a.nav-link div {
	position: absolute;
	width: 100%;
	height: 100%;
	box-shadow: -3px -4px 13px rgb(21 20 20 / 47%);
	border-top-left-radius: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: white;
	top: 0;
	left: 0;
	padding: 0 1rem;
	border: 1px solid lightgrey;
	border-left: 0;
	border-bottom: 0;
}

.list-arsip .kategori-arsip a.nav-link:nth-child(1) {
	background-color: var(--bg_primary1);
}

.list-arsip .kategori-arsip a.nav-link:nth-child(4n + 3) {
	background-color: var(--bg_primary1);
}

.list-arsip .kategori-arsip a.nav-link:nth-child(4n + 5) {
	background-color: #53ad1e;
}

.list-arsip .kategori-arsip a.nav-link:nth-child(4n + 3) div {
	background-color: #53ad1e;
}

.list-arsip .kategori-arsip a.nav-link:nth-child(4n + 5) div {
	background-color: var(--bg_primary1);
}

.list-arsip .kategori-arsip a.nav-link:hover {
	height: 7.5rem;
}

/* DISINI MASIH MASALAH..CEK LAGI */
.list-arsip .kategori-arsip:hover a.nav-link.active:not(:hover) {
	height: 6.5rem;
}

.list-arsip .kategori-arsip a.nav-link.active {
	height: 7.5rem;
}

.list-arsip .kategori-arsip a.nav-link.active div {
	background-color: #f4f6f8;
	color: black;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	left: -1px;
	width: 100.4%;
}

.list-arsip .kategori-arsip a.nav-link.active:last-child div {
	border-bottom: 1px solid #fff;
}

/* background next element a juga ikut berubah */
.list-arsip .kategori-arsip a.nav-link.active + * + a {
	background-color: #f4f6f8;
	border-left: 1px solid #fff;
}

.list-arsip .kategori-arsip a.nav-link div img {
	margin-right: 0.4rem;
}

.list-arsip .kategori-arsip a.nav-link div span.title-kategori {
	margin-right: auto;
}

.list-arsip .kategori-arsip a.nav-link div span.sp-right-600 i {
	display: grid;
	position: relative;
	font-size: 1.5rem;
	align-items: center;
	visibility: hidden;
}

.list-kinerja-h .kategori-kinerja a.nav-link:nth-child(even) {
	background-color: rgb(21, 128, 108);
}
.list-kinerja-h .kategori-kinerja a.nav-link:nth-child(odd) {
	background-color: rgb(237, 144, 62);
}

.list-arsip .kategori-arsip .tab-pane-670 {
	display: none;
}

.list-arsip .tab-pane.active {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	max-height: 639px;
	padding: 4px 7px 10px 5px;
	overflow-y: auto;
}

.list-kinerja-h .content-kinerja {
	display: grid;
	min-height: 30vh;
	font-size: 0.8rem;
}

.tab-pane-h.active {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	justify-self: center;
	align-self: baseline;
	padding: 1rem 0;
	max-height: fit-content;
	width: 100%;
}

.list-arsip .tab-pane.active:not(.ada-isi) {
	display: grid;
	grid-template-columns: auto;
	place-content: center;
	height: 100%;
}
.tab-pane-h.active:not(.ada-isi) {
	display: grid;
	grid-template-columns: auto;
}

.tab-pane.active:not(.ada-isi) .no-arsip {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	margin: 2rem;
	border: 1px dashed #b6b6b6;
	border-radius: 0.5rem;
	height: 75px;
	font-style: oblique;
	color: #b211af;
}

/* .list-arsip-h .tab-pane a  */
.list-arsip .tab-pane a {
	display: grid;
	grid-template-columns: 0.75fr 4fr;
	height: 5rem;
	background-color: #f4f6f8;
	border-radius: 0.5rem;
	border: 1px solid #ffffff;
	align-items: center;
	padding: 0 0.4rem 0 0.4rem;
	column-gap: 0.2rem;
}

/* .list-arsip-h .tab-pane a:hover  */
.list-arsip .tab-pane a:hover {
	translate: -1px -2px;
	box-shadow: hsla(211, 15%, 15%, 0.3) 3px 7px 7px;
}

.list-arsip .tab-pane a:nth-child(odd),
.list-kinerja-h .tab-pane a:nth-child(odd) {
	color: #192b87;
}

.list-arsip .tab-pane a:nth-child(even),
.list-kinerja-h .tab-pane a:nth-child(even) {
	color: #6e3445;
}

.list-arsip .tab-pane a .image-arsip,
.list-kinerja-h .tab-pane a .image-kinerja {
	justify-self: center;
}

.list-arsip .tab-pane a .image-arsip i,
.list-kinerja-h .tab-pane a .image-kinerja i {
	font-size: 2.3rem;
}

.list-arsip .tab-pane a .desc-arsip,
.list-kinerja-h .tab-pane a .desc-kinerja {
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.btn-arsip-lihat-lgkp {
	grid-area: btn-arsip-lihat-lgkp;
	justify-self: center;
	margin-bottom: 1.5rem;
	z-index: 3;
}

/* RESPONSIVE PUSTAKA ARSIP */
@media screen and (max-width: 960px) {
	.list-arsip {
		grid-template-columns: 1.75fr 2fr;
	}
	.list-arsip .content-arsip .tab-pane.active {
		grid-template-columns: 1fr;
	}

	.tab-pane-h.active {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 670px) {
	.list-arsip {
		grid-template-columns: auto;
	}
	.list-arsip .content-arsip {
		display: none;
	}

	.list-arsip .kategori-arsip a.nav-link div span.sp-right-600 i {
		visibility: visible;
		transition: transform 0.5s;
	}
	.list-arsip .kategori-arsip a.nav-link.active {
		height: 4rem;
	}
	.list-arsip .kategori-arsip a.nav-link.active div span.sp-right-600 i {
		transform: rotate(90deg);
	}
	.list-arsip .kategori-arsip a.nav-link.active + div.tab-pane-670 {
		min-height: 75px;
		height: auto;
		max-height: 300px;
		width: auto;
		display: grid;
		overflow-y: auto;
		padding: 0.5rem;
		gap: 0.5rem;
	}
	.list-arsip .kategori-arsip a.nav-link.active + * + a {
		background-color: transparent;
		border-left: 0;
	}

	/* DISINI MASIH MASALAH..CEK LAGI */
	.list-arsip .kategori-arsip:hover a.nav-link.active:not(:hover) {
		height: 4rem;
	}

	.list-kinerja-h .kategori-kinerja .c-nav-link .left-arrow {
		left: 1%;
	}
	.list-kinerja-h .kategori-kinerja .c-nav-link .right-arrow {
		right: 1%;
	}

	.tab-pane-h.active {
		gap: 0.5rem;
		padding: 0.5rem 0;
	}
}

@media screen and (max-width: 570px) {
	.title-arsip-idx > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 1.5rem 0 1.5rem;
	}

	.list-arsip .tab-pane-670.active {
		grid-template-columns: 1fr;
	}

	.list-arsip,
	.btn-arsip-lihat-lgkp a {
		font-size: 0.875rem;
	}

	.tab-pane-h.active {
		grid-template-columns: 1fr;
	}
}

/* INDEX GALERI */
.c-galeri-idx {
	display: grid;
	grid-template-areas:
		"title-galeri-idx title-galeri-idx"
		"list-galeri list-galeri"
		"btn-galeri-lihat-lgkp btn-galeri-lihat-lgkp";
	grid-template-columns: 2fr auto;
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	grid-row-gap: 1rem;
	margin-left: auto;
	margin-right: auto;
}

.title-galeri-idx {
	grid-area: title-galeri-idx;
	display: grid;
	grid-column: 2;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 4rem;
	border-radius: 2rem 0 0 2rem;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: start;
	cursor: pointer;
}
.title-galeri-idx:hover {
	filter: brightness(0.8);
}

.title-galeri-idx > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 2rem 0 2rem;
}

.list-galeri {
	grid-area: list-galeri;
	padding: 0 4% 0 4%;
	display: grid;
	grid-template-columns: 23vw 23vw 23vw 23vw;
	grid-template-rows: 23vw;
	grid-auto-rows: 23vw;
	gap: 0.3rem;
	justify-content: center;
}

.btn-galeri-lihat-lgkp {
	grid-area: btn-galeri-lihat-lgkp;
	justify-self: center;
	margin-bottom: 1.5rem;
	z-index: 3;
}

.c-foto {
	position: relative;
	width: 100% !important;
	border-radius: 4px;
	overflow: hidden;
	z-index: 3;
}

.c-foto:hover .data-foto {
	top: 0;
	bottom: 75%;
}

.c-foto img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.c-foto .data-foto {
	position: absolute;
	top: 75%;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #f1f1f1;
	width: 100% !important;
	padding: 0.5rem;
	transition: bottom 0.5s ease-in-out, top 0.5s ease-out;
}

.c-foto .data-foto span {
	font-size: 0.9rem;
	text-align: left;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	-webkit-line-clamp: 2;
	line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.c-video {
	position: relative;
	z-index: 3;
	border-radius: 4px;
	overflow: hidden;
}

.c-video:hover .overlay-iframe {
	background-color: #00000054;
}

.c-video iframe {
	object-fit: cover;
	height: 77%;
}

.c-video .overlay-iframe {
	position: absolute;
	top: 0;
	background-color: #52ad1e00;
	width: 100%;
	height: 77%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-video .caption-video {
	background: rgba(168, 167, 167, 0.5);
	color: #000000;
	height: 25%;
	margin-top: -0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
}

.c-video:hover .caption-video {
	background-color: #00000054;
}

.c-video .caption-video p {
	font-size: 0.9rem;
	text-align: center;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	-webkit-line-clamp: 2;
	line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	margin: 0;
}

/* Customize form modal galeri */
.modal-dialog .modal-content {
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	max-width: 100vw;
	z-index: 3;
	border: 0;
}

.modal-dialog .modal-content .modal-title-custom {
	display: flex;
	justify-content: space-between;
	z-index: 3;
	margin-bottom: 0.3rem;
}

.modal-dialog .modal-content .modal-title-custom a i {
	font-size: 1.4rem;
	color: #ccc;
	padding: 0.1rem 0.3rem;
	border-radius: 3px;
	border: 1px dashed #ccc;
}

.modal-dialog .content-video .modal-title-custom {
	justify-content: flex-end;
}

.modal-dialog .modal-content .modal-title-custom a:hover i {
	color: #fff;
	border: 1px dashed #fff;
}

.modal-dialog .modal-content .modal-body {
	padding: 0;
	background-color: white;
	box-shadow: #000 0px 4px 16px, #0f0f0f 0px 8px 24px,
		rgb(56 108 123 / 51%) 0px 16px 60px;
	height: 100%;
}

.modal-dialog .content-foto {
	width: fit-content;
}

/* .modal-dialog .content-foto img {
} */

.modal-dialog .content-video {
	width: 100%;
	height: 500px;
}

.modal-dialog .content-video iframe {
	height: 500px;
}

.list-galeri-h {
	display: grid;
	grid-template-rows: 4rem 2fr;
	padding: 0 4% 1.5rem 4%;
	row-gap: 2rem;
	font-size: 0.85rem;
	max-width: 1400px;
	width: 100%;
	justify-content: center;
}
.list-galeri-h .kategori-galeri {
	justify-content: center;
	border-top: 1px solid #ffffff;
}

.kategori-galeri .c-galeri-link a.nav-galeri-link {
	position: relative;
	color: rgb(255, 255, 255);
	border-radius: 0 0 1rem 1rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	width: 10.7rem;
	border-bottom: 0.1rem solid;
	border-left: 0.1rem solid;
	border-right: 0.1rem solid;
	border-color: #ffffff;
	height: 100%;
	display: inline-flex;
	column-gap: 0.5rem;
	padding-left: 1rem;
}
.kategori-galeri .c-galeri-link a.nav-galeri-link:nth-child(odd) {
	background-color: rgb(21, 128, 108)
}
.kategori-galeri .c-galeri-link a.nav-galeri-link:nth-child(even) {
	background-color: rgb(237, 144, 62);
}
.kategori-galeri .c-galeri-link a.nav-galeri-link:not(.active):hover {
	color: #000;
	background-color: #f4f6f89b;
}
.kategori-galeri .c-galeri-link a.nav-galeri-link:nth-child(odd).active {
	color: #000;
	background-color: #f4f6f89b;
	border-bottom: 4px solid;
	border-bottom-color: rgb(21, 128, 108);
	border-left: 0;
	border-right: 0;
}
.kategori-galeri .c-galeri-link a.nav-galeri-link:nth-child(even).active {
	color: #000;
	background-color: #f4f6f89b;
	border-bottom: 4px solid;
	border-bottom-color: rgb(237, 144, 62);
	border-left: 0;
	border-right: 0;
}

.list-galeri-h .content-galeri {
	justify-self: center;
}

.c-galeri-link a.nav-galeri-link .title-kategori {
	align-content: center;
}

.tab-pane-galeri.active {
	display: grid;
	grid-template-columns: 23vw 23vw 23vw 23vw;
	grid-template-rows: 23vw;
	grid-auto-rows: 23vw;
	gap: 0.3rem;
}

/* RESPONSIVE GALERI */
@media screen and (max-width: 999px) {
	.c-foto .data-foto {
		top: 60%;
	}
	.c-foto:hover .data-foto {
		top: 0;
		bottom: 60%;
	}
	.c-foto .data-foto span {
		font-size: 0.8rem;
	}

	.c-video .caption-video p {
		font-size: 0.8rem;
	}
}

@media screen and (max-width: 750px) {
	.kategori-galeri .c-galeri-link a.nav-galeri-link {
		width: 9.7rem;
		height: 90%;
		padding-left: 0.5rem;
	}
}

@media screen and (max-width: 670px) {
	.list-galeri .modal-dialog .content-video,
	.list-galeri .modal-dialog .content-video iframe {
		height: 300px;
	}

	.c-foto .data-foto {
		top: 60%;
	}
	.c-foto:hover .data-foto {
		top: 0;
		bottom: 60%;
	}
	.c-foto .data-foto span {
		font-size: 0.75rem;
	}

	.c-video .caption-video p {
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 535px) {
	.title-galeri-idx > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 1.5rem 0 1.5rem;
	}

	.btn-galeri-lihat-lgkp a {
		font-size: 0.875rem;
	}
}

/* PROFIL.PHP */
/* DAFTAR ISI PROFIL */
.c-daftar-isi {
	display: grid;
	grid-template-areas:
		"title-profil title-profil title-profil"
		"btn-sejarah btn-tugasfungsi btn-org";
	grid-template-columns: 1fr 1fr 1fr;
	box-sizing: border-box;
	padding: 1.5rem 4%;
	max-width: 1400px;
	grid-column-gap: 7rem;
	grid-row-gap: 1rem;
	margin-top: 3.2rem;
}

.title-profil {
	grid-area: title-profil;
}

.btn-sejarah {
	grid-area: btn-sejarah;
}

.btn-tugasfungsi {
	grid-area: btn-tugasfungsi;
}

.btn-org {
	grid-area: btn-org;
}

.btn-sejarah, .btn-tugasfungsi, .btn-org {
	color: black;
	border: 1px solid var(--bg_primary1);
	box-shadow: inset 5px 5px 20px rgba(0, 0, 0, 0.15);
}

.btn-sejarah:hover, .btn-tugasfungsi:hover, .btn-org:hover {
	/* background-color: var(--bg_second1); */
	background-color: #ecffff;
}

/* RESPONSIVE DAFTAR ISI PROFIL */
@media screen and (max-width: 4000px) {
	.c-daftar-isi {
		grid-column-gap: 4rem;
		margin-top: 45px;
	}
}
@media screen and (max-width: 1092px) {
	.c-daftar-isi {
		grid-column-gap: 4rem;
		margin-top: 0;
	}
}
@media screen and (max-width: 920px) {
	.c-daftar-isi {
		grid-column-gap: 4rem;
		margin-top: 0;
	}
}

@media screen and (max-width: 820px) {
	.c-daftar-isi {
		grid-column-gap: 2rem;
		margin-top: 0;
	}
}

@media screen and (max-width: 742px) {
	.c-daftar-isi {
		grid-column-gap: 1.5rem;
		margin-top: 0;
	}
}

@media screen and (max-width: 535px) {
	.c-daftar-isi {
		grid-column-gap: 1.2rem;
		margin-top: 0;
	}

	.btn-sejarah > div,
	.btn-tugasfungsi > div,
	.btn-org > div {
		font-size: 0.875rem;
	}
}

@media screen and (max-width: 425px) {
	.c-daftar-isi {
		grid-column-gap: 0.9rem;
	}
}

/* SEJARAH */
.c-sejarah {
	display: grid;
	grid-template-areas:
		"title-sejarah title-sejarah"
		"content-sejarah content-sejarah"
		"infografik-sejarah infografik-sejarah";
	grid-template-columns: 1fr minmax(260px, 1.2fr);
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	/* background-color: var(--bg_second2); */
	grid-row-gap: 1rem;
	justify-items: center;
	overflow-y: auto;
	margin-left: auto;
	margin-right: auto;
}

.title-sejarah {
	display: grid;
	grid-area: title-sejarah;
	grid-column: 2;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 5rem;
	border-radius: 3rem 0 0 3rem;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: end;
}

.title-sejarah > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 1.8rem 0 1.8rem;
	display: flex;
	align-items: center;
}

.content-sejarah {
	grid-area: content-sejarah;
	color: #000;
	text-align: justify;
	padding: 0 4%;
	margin-top: 1rem;
}

.infografik-sejarah {
	grid-area: infografik-sejarah;
	width: 80%;
}

/* RESPONSIVE SEJARAH */
@media screen and (max-width: 742px) {
	.infografik-sejarah {
		width: 90%;
	}
}

@media screen and (max-width: 535px) {
	.title-sejarah > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 2rem 0 2rem;
	}
	.content-sejarah {
		font-size: 0.875rem;
	}
	.infografik-sejarah {
		width: 100%;
	}
}

/* PIMPINAN MASA KE MASA */
.c-pimpinan {
	box-sizing: border-box;
	max-width: 1400px;
	width: 100%;
	background-color: var(--bg_second1);
	/* margin: 0 0 1rem 0; */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.c-tbl-pimpinan {
	width: 100%;
}
.tbl-pimpinan {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}

.tbl-pimpinan tr th {
	background: var(--bg_primary1);
	color: azure;
	font-weight: 500;
	text-align: center;
}

.tbl-pimpinan tr {
	color: #000;
}

.tbl-pimpinan tr:nth-child(odd) {
	background-color: var(--bg_second1);
}

.tbl-pimpinan tr:nth-child(even) {
	background-color: #ffffff;
}

.tbl-pimpinan td:first-child,
.tbl-pimpinan th:first-child {
	border-radius: 0.5rem 0 0 0.5rem;
}
.tbl-pimpinan td:last-child,
.tbl-pimpinan th:last-child {
	border-radius: 0 0.5rem 0.5rem 0;
}

.tbl-pimpinan tr:hover {
	background-color: var(--bg_primary2);
	color: azure;
}

/* RESPONSIVE TABEL PIMPINAN */
@media screen and (max-width: 742px) {
	.tbl-pimpinan {
		width: 90%;
	}
}

@media screen and (max-width: 535px) {
	.tbl-pimpinan {
		width: 100%;
		font-size: 0.875rem;
	}
}

/* TUGAS DAN FUNGSI */
.c-tugasfungsi {
	display: grid;
	grid-template-areas:
		"title-tugasfungsi title-tugasfungsi"
		"content-tugasfungsi content-tugasfungsi";
	grid-template-columns: minmax(330px, 3.5fr) 1fr;
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	background-color: var(--bg_second2);
	grid-row-gap: 1rem;
	justify-items: center;
	margin-left: auto;
	margin-right: auto;
}

.title-tugasfungsi {
	display: grid;
	grid-area: title-tugasfungsi;
	grid-column: 1;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 5rem;
	border-radius: 0 3rem 3rem 0;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: start;
}

.title-tugasfungsi > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 1.8rem 0 1.8rem;
	display: flex;
	align-items: center;
}

.content-tugasfungsi {
	grid-area: content-tugasfungsi;
	color: #000000;
	text-align: justify;
	padding: 0 4%;
	margin-top: 1rem;
}

.content-tugasfungsi .img-tugasfungsi {
	text-align: center;
}

.content-tugasfungsi img {
	width: 90%;
	border-radius: 1rem;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.6);
}

/* RESPONSIVE TUGAS DAN FUNGSI */
@media screen and (max-width: 535px) {
	.title-tugasfungsi > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 1rem 0 1rem;
	}
	.content-tugasfungsi {
		font-size: 0.875rem;
	}
}

/* ORGANISASI */
.c-org {
	display: grid;
	grid-template-areas:
		"title-org title-org"
		"content-org content-org";
	grid-template-columns: 1fr minmax(330px, 3.5fr);
	box-sizing: border-box;
	max-width: 2000px;
	width: 100%;
	background-color: var(--bg_second1);
	grid-row-gap: 1rem;
	justify-items: center;
	margin-left: auto;
	margin-right: auto;
}

.title-org {
	display: grid;
	grid-area: title-org;
	grid-column: 2;
	background-color: var(--bg_primary2);
	margin-top: 1rem;
	text-align: center;
	place-content: center;
	height: 5rem;
	border-radius: 3rem 0 0 3rem;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.6);
	justify-self: end;
}

.title-org > div {
	font-size: 1.9rem;
	font-weight: 500;
	padding: 0 1.8rem 0 1.8rem;
	display: flex;
	align-items: center;
}

.content-org {
	grid-area: content-org;
	color: #000;
	text-align: justify;
	padding: 0 4%;
	margin: 1rem 0 1rem 0;
}

/* RESPONSIVE ORGANISASI */
@media screen and (max-width: 535px) {
	.title-org > div {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0 1rem 0 1rem;
	}
	.content-org {
		font-size: 0.875rem;
	}
}

/* SISTEMINFORMASI.PHP  SIEKO */
.frame-map {
	width: 100%;
	height: 550px;
	max-width: 1400px;
	padding: 0 4% 2rem 4%;
}

.list-sieko {
	display: grid;
	grid-template-rows: 4rem 2fr;
	padding: 0 4% 1.5rem 4%;
	row-gap: 2rem;
	/* z-index: 3; */
	font-size: 0.85rem;
	max-width: 1400px;
	width: 100%;
	justify-content: center;
}
.list-sieko .kategori-sieko {
	overflow: hidden;
	border-bottom: 2px solid #ffffff;
	height: fit-content;
	justify-content: center;
}
.list-sieko .kategori-sieko .c-sieko-link {
	overflow-x: scroll;
	/* width: 100%; */
	/* position: relative; */
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.list-sieko .kategori-sieko .c-sieko-link::-webkit-scrollbar {
	display: none;
}
.list-sieko .kategori-sieko .c-sieko-link .left-arrow,
.list-sieko .kategori-sieko .c-sieko-link .right-arrow {
	position: absolute;
	font-size: 2.1rem;
	z-index: 2;
	align-content: center;
	cursor: pointer;
	width: 4rem;
	height: 8rem;
	display: none;
}
.list-sieko .kategori-sieko .c-sieko-link .left-arrow {
	left: 2%;
}
.list-sieko .kategori-sieko .c-sieko-link .right-arrow {
	justify-self: end;
	text-align: end;
	right: 2%;
}
.list-sieko .kategori-sieko .c-sieko-link .left-arrow:hover i,
.list-sieko .kategori-sieko .c-sieko-link .right-arrow:hover i {
	opacity: 1;
}
.list-sieko .kategori-sieko .c-sieko-link .left-arrow i,
.list-sieko .kategori-sieko .c-sieko-link .right-arrow i {
	opacity: 0.4;
}
.list-sieko .kategori-sieko .c-sieko-link .left-arrow.active,
.list-sieko .kategori-sieko .c-sieko-link .right-arrow.active {
	display: grid;
}

.kategori-sieko .c-sieko-link a.sieko-link {
	position: relative;
	color: rgb(255, 255, 255);
	border-radius: 1rem 1rem 0 0;
	text-align: center;
	font-weight: 500;
	width: 11.7rem;
	height: 7rem;
	border-top: 0.1rem solid;
	border-left: 0.1rem solid;
	border-right: 0.1rem solid;
	border-bottom: 0.1rem solid;
	border-color: #ffffff;
	display: inline-flex;
	padding: 0.5rem;
	justify-content: center;
}
.kategori-sieko .c-sieko-link a.sieko-link:nth-child(odd) {
	background-color: rgb(39 172 39);
}
.kategori-sieko .c-sieko-link a.sieko-link:nth-child(even) {
	background-color: rgb(184 151 43);
}
.kategori-sieko .c-sieko-link a.sieko-link:not(.active):hover {
	color: #000;
	background-color: #f4f6f89b;
}
.kategori-sieko .c-sieko-link a.sieko-link:nth-child(odd).active {
	color: #000;
	background-color: #f4f6f89b;
	border-top: 4px solid;
	border-top-color: rgb(39 172 39);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.kategori-sieko .c-sieko-link a.sieko-link:nth-child(even).active {
	color: #000;
	background-color: #f4f6f89b;
	border-top: 4px solid;
	border-top-color: rgb(184 151 43);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

.list-sieko .content-sieko {
	justify-self: center;
}

.c-sieko-link a.sieko-link .title-kategori {
	align-content: center;
}

.tab-pane-sieko.active {
	display: grid;
	grid-template-areas:
		"title-sieko1 title-sieko1"
		"table-sieko1 c-pie-chart1"
		"c-bar-chart1 c-bar-chart1"
		"title-sieko2 title-sieko2"
		"table-sieko2 c-pie-chart2"
		"c-bar-chart2 c-bar-chart2"
		"title-sieko3 title-sieko3"
		"table-sieko3 c-pie-chart3"
		"c-bar-chart3 c-bar-chart3";
	grid-template-columns: 1fr 2fr;
	gap: 0.3rem;
	margin: 1.5rem 0 1.5rem 0;
}

/* CSS classes di SIEKO - Tab */
.title-sieko1 {
	grid-area: title-sieko1;
}
.table-sieko1 {
	grid-area: table-sieko1;
	height: 100% !important;
}
.c-pie-chart1 {
	grid-area: c-pie-chart1;
	display: flex;
	width: 100%;
}
.c-bar-chart1 {
	grid-area: c-bar-chart1;
	display: grid;
	width: 85%;
	justify-self: center;
}

.title-sieko2 {
	grid-area: title-sieko2;
	margin-top: 1rem;
	border-top: 2px solid #ffffff;
}
.table-sieko2 {
	grid-area: table-sieko2;
	height: 100% !important;
}
.c-pie-chart2 {
	grid-area: c-pie-chart2;
	display: flex;
	width: 100%;
}
.c-bar-chart2 {
	grid-area: c-bar-chart2;
	display: grid;
	width: 85%;
	justify-self: center;
}

.title-sieko3 {
	grid-area: title-sieko3;
	margin-top: 1rem;
	border-top: 2px solid #ffffff;
}
.table-sieko3 {
	grid-area: table-sieko3;
	height: 100% !important;
}
.c-pie-chart3 {
	grid-area: c-pie-chart3;
	display: flex;
	width: 100%;
}
.c-bar-chart3 {
	grid-area: c-bar-chart3;
	display: grid;
	width: 85%;
	justify-self: center;
}

#pieChartTPA,
#pieChartSistemOperasi,
#pieChartSampahDiterimaTPA,
#pieChartSampahInduk,
#pieChartSampahDiterimaInduk,
#pieChartSampahUnit,
#pieChartSampahUnitTerkelola {
	height: 400px !important;
	width: 100% !important;
}

#barChartTPA,
#barChartTPASistemOperasi,
#barChartTPADiterima,
#barChartSampahInduk,
#barChartSampahIndukDiterima,
#barChartSampahUnit,
#barChartSampahUnitTerkelola {
	height: 400px !important;
	width: 100% !important;
}

/* RESPONSIVE SISTEMINFORMASI.PHP  SIEKO  */
@media screen and (max-width: 750px) {
	.tab-pane-sieko.active {
		grid-template-columns: 1.25fr 1.75fr;
	}

	.c-bar-chart1,
	.c-bar-chart2,
	.c-bar-chart3 {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.tab-pane-sieko.active {
		grid-template-columns: 1.5fr 1.5fr;
	}
}

@media screen and (max-width: 500px) {
	.tab-pane-sieko.active {
		grid-template-areas:
			"title-sieko1"
			"table-sieko1"
			"c-pie-chart1"
			"c-bar-chart1"
			"title-sieko2"
			"table-sieko2"
			"c-pie-chart2"
			"c-bar-chart2"
			"title-sieko3"
			"table-sieko3"
			"c-pie-chart3"
			"c-bar-chart3";
		grid-template-columns: auto;
	}
}

/* FOOTER */
.container-footer {
	box-sizing: border-box;
	background-color: var(--bg_primary1);
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	position: relative;
	border-radius: 3rem 3rem 0 0;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.footer-c {
	display: grid;
	grid-template-areas:
		"logo instansi-alamat tautan"
		"links-medsos links-medsos tautan";
	grid-template-columns: 0.2fr 1.8fr 1fr;
	grid-row-gap: 2rem;
	max-width: 1600px;
	width: 100%;
	bottom: 0;
	padding: 1.5rem 4%;
	font-size: 0.8rem;
	border-radius: 3rem 3rem 0 0;
	color: azure;
}

.footer-c .logo {
	grid-area: logo;
	display: flex;
	width: fit-content;
	align-self: flex-start;
}
.logo img {
	width: 4rem;
}
.logo .instansi-p3es1 {
	display: none;
}
.footer-c .instansi-alamat {
	grid-area: instansi-alamat;
	margin-left: 1rem;
	margin-right: 1rem;
}
.instansi-alamat .instansi-p3es2 {
	font-weight: 600;
}
.instansi-alamat .alamat-p3es {
	padding-top: 0.8rem;
	margin-bottom: -1rem;
	max-width: 85%;
}
.instansi-alamat .kontak-map {
	position: relative;
	/* z-index: 3; */
	padding-top: 1.2rem;
}
.instansi-alamat .kontak-map a {
	color: azure;
	text-decoration: none;
	margin-right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.15rem;
}
.instansi-alamat .kontak-map a:hover {
	color: var(--bg_primary2_ori); 
	/* rgb(217, 179, 52); */
}
.instansi-alamat .kontak-map a .fa-solid {
	margin-right: 0.3rem;
}
.footer-c .links-medsos {
	grid-area: links-medsos;
	line-height: 1.5rem;
	/* z-index: 3; */
}
.links-medsos .ikuti-kami {
	margin-bottom: 0.7rem;
	width: 65%;
	text-align: left;
}
.links-medsos .links {
	display: flex;
	justify-content: flex-start;
	width: 65%;
	flex-wrap: wrap;
}
.links-medsos a {
	color: azure;
	padding-right: 3rem;
}
.links-medsos a:hover {
	/* color: rgb(217, 179, 52); */
	color: var(--bg_primary2_ori); 
}

.footer-c .tautan {
	grid-area: tautan;
	line-height: 2.2rem;
	/* z-index: 3; */
	text-align: left;
	margin-top: -0.5rem;
}

.tautan .list-tautan a {
	display: block;
	color: azure;
}
.tautan .list-tautan a:hover {
	/* color: rgb(217, 179, 52); */
	color: var(--bg_primary2_ori); 
}

.list-tautan a img {
	width: 1.5rem;
}

/* RESPONSIVE FOOTER */
@media screen and (max-width: 950px) {
	.footer-b .links-medsos .links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 45%;
	}
	.footer-b .links-medsos a {
		text-align: center;
		line-height: 2.2rem;
	}

	.footer-c {
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 865px) {
	.instansi-alamat .alamat-p3es {
		max-width: 96%;
	}

	.links-medsos a {
		padding-right: 2rem;
	}
}

@media screen and (max-width: 835px) {
	.instansi-alamat .alamat-p3es {
		max-width: 100%;
	}
}

@media screen and (max-width: 760px) {
	.footer-b {
		flex-wrap: wrap;
	}
	.footer-b .instansi-alamat {
		max-width: 65%;
	}
	.footer-b .links-medsos {
		flex-direction: row;
		width: 100%;
		justify-content: flex-end;
		margin-top: 0.25rem;
	}
	.footer-b .links-medsos .ikuti-kami {
		margin-bottom: 0;
		width: 25%;
		text-align: center;
	}
	.footer-b .links-medsos .links {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: 30%;
	}

	.footer-c {
		grid-template-areas:
			"logo  instansi-alamat instansi-alamat  instansi-alamat"
			"tautan tautan links-medsos links-medsos";
		grid-template-columns: 0.2fr 3fr 1fr 1fr;
	}

	.instansi-alamat .alamat-p3es {
		max-width: 85%;
	}

	.footer-c .links-medsos .links {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 700px) {
	.footer-b .instansi-alamat {
		max-width: 71%;
	}
	.footer-b .links-medsos .ikuti-kami {
		width: 30%;
	}
}
@media screen and (max-width: 630px) {
	.footer-b .instansi-alamat {
		max-width: 78%;
	}

	.footer-c {
		/* grid-template-areas: 
			"logo  instansi-alamat instansi-alamat  instansi-alamat"
			"tautan tautan links-medsos links-medsos"; */
		grid-template-columns: 0.2fr 2.5fr 1.5fr 1fr;
	}
}

@media screen and (max-width: 600px) {
	.footer-b .instansi-alamat {
		max-width: 80%;
	}
	.footer-b .links-medsos {
		justify-content: center;
		margin-top: 1.25rem;
	}
	.footer-b .links-medsos .ikuti-kami {
		width: 35%;
	}
	.footer-b .links-medsos .links {
		width: 35%;
	}
}

@media screen and (max-width: 580px) {
	.footer-b {
		display: flex;
	}
	.footer-b .logo {
		display: flex;
		width: 98%;
	}
	.footer-b .logo .logo-img {
		width: 20%;
		text-align: right;
	}
	.footer-b .logo .instansi-p3es1 {
		display: flex;
		font-weight: 600;
		text-align: left;
		margin-left: 0.75rem;
		align-self: center;
		width: 76%;
	}
	.footer-b .instansi-alamat {
		grid-area: instansi-alamat;
		max-width: 100%;
		margin-left: 2rem;
		margin-right: 2rem;
		text-align: center;
	}
	.footer-b .instansi-alamat .instansi-p3es2 {
		display: none;
	}
	.footer-b .links-medsos {
		grid-area: links-medsos;
	}
	.footer-b .links-medsos .ikuti-kami {
		width: auto;
		text-align: center;
	}
	.footer-b .links-medsos .links {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: 42%;
	}

	.footer-c .instansi-alamat {
		margin-right: 0;
	}

	.instansi-alamat .alamat-p3es {
		max-width: 100%;
	}

	.links-medsos .ikuti-kami {
		width: 100%;
	}

	.links-medsos a {
		padding-right: 1.5rem;
	}
}

@media screen and (max-width: 465px) {
	.footer-b .logo .logo-img {
		width: 25%;
	}
	.footer-b .logo .instansi-p3es1 {
		text-align: left;
		width: 65%;
	}
}

@media screen and (max-width: 430px) {
	.footer-b {
		flex-direction: column;
	}
	.footer-b .logo {
		align-self: center;
	}
	.footer-b .instansi-alamat {
		text-align: justify;
		max-width: 100%;
		margin: 0 0 1rem 0;
	}

	.footer-b .links-medsos {
		flex-direction: column;
		align-items: center;
		width: 90%;
		margin-top: 0;
	}
	.footer-b .links-medsos .ikuti-kami {
		margin-bottom: 0.3rem;
		width: auto;
		text-align: center;
	}
	.footer-b .links-medsos .links {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: 56%;
	}

	.links-medsos a {
		padding-right: 1rem;
	}
}

@media screen and (max-width: 400px) {
	.footer-c .links-medsos .links {
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		width: auto;
		padding: 0 1rem 0 1rem;
	}

	.links-medsos a {
		/* padding-right: 0.5rem; */
		text-align: end;
		line-height: 2.5rem;
	}
}

/* .icon-box-content {
	position: absolute;
	left: 0;
	top: 210px;
	width: 100%;
	height: 100%;
	background: #535b63;
	opacity: 0.9;
	/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
	color: #fff;
	z-index: -1;
	padding: 20px 30px 30px 30px;
	-webkit-transition: 0.6s;
	transition: 0.3s;
	cursor: pointer;
}

.icon-box-content-video {
	position: absolute;
	left: 0;
	top: 210px;
	width: 100%;
	height: 100%;
	background: #535b63;
	opacity: 0.9;
	/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
	color: #fff;
	z-index: -1;
	padding: 20px 30px 30px 30px;
	-webkit-transition: 0.6s;
	transition: 0.3s;
	cursor: pointer;
}
.icon-box-content:hover {
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.8) 20%,
		rgba(0, 212, 255, 0) 100%
	);
	opacity: 1;
	transition: 0.4s;
	text-align: left;
	top: 0;
}

.iconbox-content-heading {
	font-size: 18px;
	color: #fff;
	margin-top: -10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.iconbox-content-span {
	color: #fff;
	margin-top: -5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.iconbox-content-body p {
	color: #e5e5e5;
	font-size: 14px;
	text-align: justify;
	margin-bottom: 50px;
}

.iconbox-content-body p:hover {
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.8) 20%,
		rgba(0, 212, 255, 0) 100%
	);
	opacity: 1;
	transition: 0.4s;
	text-align: left;
	top: 0;
}

.services {
	margin-top: -135px;
	position: absolute;
	width: 100%;
}

.services .item {
	background-image: url(../images/service-item-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 20px;
	text-align: center;
	color: #fff;
	padding: 40px;
}

.services .item .icon {
	max-width: 60px;
	margin: 0 auto;
}

.services .item h4 {
	margin-top: 25px;
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 600;
}

.services .item p {
	color: #fff;
	font-size: 13px;
}

.services .owl-nav {
	display: inline-block !important;
	text-align: center;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-25px);
}

.services .owl-nav .owl-prev {
	margin-right: 10px;
	outline: none;
	position: absolute;
	left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
	opacity: 0;
}

.services .owl-nav .owl-prev:before {
	display: inline-block;
	font-family: "FontAwesome";
	color: #1e1e1e;
	font-size: 25px;
	font-weight: 700;
	content: "\f104";
	background-color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 50px;
}

.services .owl-nav .owl-prev {
	opacity: 1;
	transition: all 0.5s;
}

.services .owl-nav .owl-prev:hover {
	opacity: 0.9;
}

.services .owl-nav .owl-next {
	opacity: 1;
	transition: all 0.5s;
}

.services .owl-nav .owl-next:hover {
	opacity: 0.9;
}

.services .owl-nav .owl-next {
	margin-left: 10px;
	outline: none;
	position: absolute;
	right: -85px;
}

.services .owl-nav .owl-next:before {
	display: inline-block;
	font-family: "FontAwesome";
	color: #1e1e1e;
	font-size: 25px;
	font-weight: 700;
	content: "\f105";
	background-color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 50px;
} */

/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

/* section.upcoming-meetings {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
} */
/* 
section.upcoming-meetings .section-heading {
	text-align: center;
}

section.upcoming-meetings .categories {
	background-color: #fff;
	border-radius: 20px;
	padding: 40px;
	margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
	font-size: 18px;
	font-weight: 600;
	color: #1f272b;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
	display: inline-block;
	margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
	font-size: 15px;
	color: #1f272b;
	font-weight: 500;
	transition: all 0.3s;
}

section.upcoming-meetings .categories ul li a:hover {
	color: #a12c2f;
}

section.upcoming-meetings .categories .main-button-red {
	border-top: 1px solid #eee;
	padding-top: 30px;
	margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
	width: 100%;
	text-align: center;
} */

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/
@media (min-width: 320px) and (max-width: 424px) {
	/* .content p {
		font-size: 0.85rem;
	}

	.content div img {
		width: 80%;
	}

	.table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	} */

	/* .berita {
		max-width: 685px;
		text-align: justify;
	}

	.berita div div img {
		width: 18.5rem;
		object-fit: cover;
	} */

	/* .beritadetails {
		max-width: 685px;
		text-align: justify;
	}

	.beritadetails div img {
		width: 18rem;
		object-fit: cover;
	} */

	/* .beritainfo img {
		width: 5rem !important;
		height: 3rem;
		object-fit: cover;
		border-radius: 0.3rem;
	} */

	/* .beritainfo span {
		max-width: 200px;
		height: 40px;
		line-height: 1.2rem !important;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: justify;
	} */

	/* section.our-courses {
		padding: 0.5rem !important;
	}

	section.upcoming-meetings .arsip {
		margin-top: 750px !important;
		margin-left: -150px;
	} */

	/* .tabelarsip {
		width: 150px !important;
		margin-left: -150px;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 250px !important;
	}

	.linkarsip {
		width: 280px !important;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 250px !important;
		font-size: 1rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	}

	.content div img {
		width: 100%;
		float: left;
	}

	.container1 .content-video .titlevideo a h4 {
		padding: 0.8rem;
		font-size: 0.9rem;
		max-width: 350px;
		height: 48px;
		line-height: 1.1rem;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: justify;
	}

	.galerikategorivideo div .container1 .overlay {
		width: 18rem !important;
		height: 100% !important;
		border-bottom-left-radius: 0rem;
		border-bottom-right-radius: 0rem;
		position: absolute;
	}

	.page-item.active .page-link {
		z-index: 3;
		color: #fff;
		background-color: #b8972b;
		border-color: rgb(240, 230, 200);
	}

	.arsip .tab-pane .row {
		margin-top: 680px;
		margin-left: -280px;
		padding: 10px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		font-size: 0.8rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 300px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 270px;
		font-size: 0.8rem !important;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		margin-left: 10px !important;
		max-width: 300px !important;
		font-size: 0.8rem;
	}

	.dataTables_info {
		display: none !important;
	} */
}

@media (min-width: 375px) and (max-width: 421px) {
	/* .table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	}

	section.upcoming-meetings .arsip {
		margin-top: 720px !important;
		margin-left: -250px;
	}

	.tabelarsip {
		width: 350px !important;
		margin-left: -80px;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 350px !important;
	}

	.linkarsip {
		width: 350px !important;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 300px !important;
		font-size: 1rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	}

	.arsip .tab-pane .row {
		margin-top: 540px;
		margin-left: -320px;
		padding: 10px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 300px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 270px;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		margin-left: 10px !important;
		max-width: 300px !important;
		font-size: 0.8rem;
	} */
}

@media (min-width: 425px) and (max-width: 548px) {
	/* .content p {
		font-size: 0.85rem;
	}

	.content div img {
		align: center;
		width: auto;
	}

	.contentprofil div img {
		width: 25rem !important;
		max-height: 20rem;
		object-fit: cover;
	}

	.table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	} */

	/* .berita {
		max-width: 685px;
		text-align: justify;
	}

	.berita div img {
		width: 25rem;
		object-fit: cover;
	} */

	/* .beritadetails {
		max-width: 685px;
		text-align: justify;
	}

	.beritadetails div img {
		width: 25rem;
		object-fit: cover;
	} */

	/* .beritainfo img {
		width: 5rem;
		height: 3rem;
		object-fit: cover;
		border-radius: 0.3rem;
	}

	.beritainfo span {
		max-width: 200px;
		height: 40px;
		line-height: 1.2rem !important;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: justify;
	}

	section.upcoming-meetings .categories {
		background-color: #fff;
		border-radius: 20px;
		padding: 0;
		margin-right: 60px;
		margin-left: 20px;
	}

	section.upcoming-meetings .arsip {
		margin-top: 580px !important;
		margin-left: -300px;
	}

	.tabelarsip {
		width: 350px !important;
		margin-left: -80px;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 350px !important;
	}

	.linkarsip {
		width: 350px !important;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 340px !important;
		font-size: 1rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	}

	.galerikategorivideo .overlay {
		height: 240px !important;
		position: absolute;
		bottom: 0;
		background: rgb(0, 0, 0);
		background: rgba(0, 0, 0, 0.5); /* Black see-through 
		color: #f1f1f1;
		width: 280px !important;
		transition: 0.5s ease;
		opacity: 0;
		color: white;
		font-size: 15px;
	}

	.page-item.active .page-link {
		z-index: 3;
		color: #fff;
		background-color: #b8972b;
		border-color: rgb(240, 230, 200);
	}

	.arsip .tab-pane .row {
		margin-top: 550px;
		margin-left: -350px;
		padding: 10px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		font-size: 0.9rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 380px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 350px;
		font-size: 0.9rem;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		margin-left: 10px !important;
		max-width: 380px !important;
		font-size: 0.9rem;
	}

	.dataTables_info {
		display: none !important;
	} */
}

@media (min-width: 470px) {
	/* .arsip .tab-pane .row {
		margin-top: 480px;
		margin-left: -380px;
		padding-bottom: 5px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		font-size: 0.9rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 380px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 350px;
		font-size: 0.9rem;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		margin-left: 10px !important;
		max-width: 380px !important;
		font-size: 0.9rem;
	} */
}

@media (min-width: 480px) and (max-width: 495px) {
	/* .arsip .tab-pane .row {
		margin-top: 500px;
		margin-left: -380px;
		padding-bottom: 5px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 380px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 350px;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		margin-left: 10px !important;
		max-width: 380px !important;
		font-size: 0.8rem;
	} */
}

@media (min-width: 550px) and (max-width: 765px) {
	/* .content p {
		font-size: 1.2rem;
	}

	.content img {
		max-width: 100%;
		max-height: 80px;
	}

	.contentprofil div img {
		width: 11rem !important;
		max-height: 20rem;
		object-fit: cover;
	}

	.table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	} */

	/* .berita {
		max-width: 685px;
		text-align: justify;
	}

	.berita div img {
		width: 32.2rem;
		object-fit: cover;
	} */

	/* .beritadetails {
		max-width: 685px;
		text-align: justify;
	}

	.beritadetails div img {
		width: 32.2rem;
		object-fit: cover;
	} */

	/* .beritainfo img {
		width: 5rem;
		height: 3rem;
		object-fit: cover;
		border-radius: 0.3rem;
	}

	.beritainfo span {
		max-width: 200px;
		height: 40px;
		line-height: 1.2rem !important;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: justify;
	}

	.our-courses .item img {
		height: 120px !important;
		max-width: 100%;
	}

	.our-courses .item .down-content h4 {
		min-height: 35px !important;
		padding: 0.4rem;
		font-size: 0.6rem;
		font-weight: 500;
		color: #1f272b;
		text-align: left;
	}

	.our-courses .item .down-content .info span {
		font-size: 0.6rem;
		font-weight: 500;
		display: inline-block;
		padding-left: 0.2rem;
		margin-left: 0.5rem;
	}

	section.upcoming-meetings .categories {
		background-color: #fff;
		border-radius: 20px;
		padding: 0;
		margin-right: 45px;
		margin-left: 20px;
	}

	.page-item.active .page-link {
		z-index: 3;
		color: #fff;
		background-color: #b8972b;
		border-color: rgb(240, 230, 200);
	}

	.arsip .tab-pane .row {
		margin-top: 500px;
		margin-right: 20px;
		padding-bottom: 5px;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
		max-width: 380px;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		max-width: 350px;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		max-width: 380px !important;
		font-size: 0.8rem;
	} */
}

@media (min-width: 768px) and (max-width: 991px) {
	/* .content p {
		font-size: 0.85rem;
	}

	.content div img {
		max-width: 100%;
		max-height: 100px;
		border-radius: 10px;
	}

	.contentprofil div img {
		width: 15rem !important;
		max-height: 10rem;
		object-fit: cover;
	}

	.table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	}

	.our-courses .item img {
		height: 120px !important;
		max-width: 100%;
	}

	section.upcoming-meetings .categories {
		background-color: #fff;
		border-radius: 20px;
		padding: 0;
		margin-right: 45px;
		margin-left: 20px;
	}

	.page-item.active .page-link {
		z-index: 3;
		color: #fff;
		background-color: #b8972b;
		border-color: rgb(240, 230, 200);
	}

	section.upcoming-meetings .categories {
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.arsip {
		margin-top: 0;
		font-size: 0.8rem;
		margin-right: 150px;
		margin-bottom: 5px;
	}

	.arsip .card div div p a b {
		font-size: 0.8rem;
		color: azure;
	}

	.arsip .card div div span {
		font-size: 0.8rem;
		color: azure;
	}

	.arsip .tab-pane .row {
		margin: 0;
		padding-bottom: 5px;
		display: block;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		width: 200px !important;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		font-size: 0.8rem;
		max-width: 300px !important;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		max-width: 300px !important;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 280px !important;
		font-size: 0.9rem;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 300px !important;
		font-size: 0.9rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	} */
}

@media (min-width: 1024px) and (max-width: 1199px) {
	/* .table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	}

	.content p {
		font-size: 0.85rem;
	}

	.content div img {
		width: 80%;
		max-height: 100%;
		margin-bottom: 50px;
	}

	.contentprofil div img {
		width: 19rem !important;
		max-height: 18rem;
		object-fit: cover;
	}

	section.upcoming-meetings .categories {
		margin: 0;
	}

	.beritacontent .owl-item .item .down-content a h4 {
		font-size: 0.8rem;
	}

	.arsip .tab-pane .row {
		margin-top: 0;
		margin-left: 0;
		font-size: 0.8rem;
		padding-bottom: 5px;
	}

	.arsip .tab-pane .card {
		min-height: 80px;
	}

	.ar1 :hover {
		font-size: 1rem;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		max-width: 300px;
		font-size: 1rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		font-size: 0.8rem;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		max-width: 350px !important;
		font-size: 1rem;
	}

	table.dataTable {
		margin-top: -10px !important;
		max-width: 700px !important;
	}

	.linkarsip {
		width: 600px !important;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 650px !important;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 600px !important;
		font-size: 1rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	} */
}

@media (min-width: 1200px) {
	/* .content p {
		font-size: 0.85rem;
	}

	.content div img {
		width: 80%;
		max-height: 100%;
		margin-bottom: 50px;
	}

	.contentprofil div img {
		width: 22rem !important;
		max-height: 18rem;
		object-fit: cover;
	}

	.table-informasi {
		display: block;
		margin-left: -5px;
		font-size: 0.8rem;
	}

	.table-informasi tr th {
		background: #ffc000;
		color: azure;
		font-weight: 500;
		text-align: center;
	}

	.table-informasi,
	th,
	td {
		padding: 0.5rem;
		text-align: left;
	}

	.table-informasi tr:nth-child(odd) {
		background-color: #ffffff;
	}

	.table-informasi tr:nth-child(even) {
		background-color: var(--bg_second1);
	}

	.table-informasi tr:hover {
		background-color: rgb(39, 172, 39);
		color: azure;
	}

	section.upcoming-meetings .categories {
		margin: 0;
	}

	.arsip .tab-pane .row {
		margin-top: 0;
		margin-left: 0;
	}

	.ar1 :hover {
		font-size: 1rem;
	}

	.ar1 a {
		text-decoration: none;
		color: black;
		padding: 0.6rem;
		display: inline-block;
		text-align: justify;
		line-height: 1rem;
		max-width: 320px;
		font-size: 1rem;
	}
	.ar1 ul {
		display: inline;
		margin: 0;
		padding: 0;
	}
	.ar1 a:hover {
		color: white;
		text-align: justify;
		font-size: 1rem;
	}
	.ar1 ul li {
		display: block;
	}
	.ar1 ul li:hover {
		background: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		max-width: 300px;
		font-size: 1rem;
	}

	table.dataTable {
		margin-top: -10px !important;
		max-width: 800px !important;
	}

	.tablearsip {
		width: 700px !important;
	}

	.linkarsip a {
		text-decoration: none;
		color: black;
		padding: 0.5rem;
		display: inline-block;
		text-align: justify;
		line-height: 1.5rem !important;
		width: 700px !important;
	}

	.linkarsip a:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		width: 700px !important;
		font-size: 1rem;
	}

	.linkarsip:hover {
		background-color: rgb(0, 100, 0);
		border-radius: 3rem;
		color: white !important;
		font-size: 1rem;
	}

	.linkarsip i {
		padding-bottom: 1rem;
	}

	.content p {
		font-size: 0.85rem;
	}

	.content img {
		max-width: 100%;
		max-height: 50%;
	}

	.contentprofil div img {
		width: 26rem !important;
		max-height: 18rem;
		object-fit: cover;
	}

	.cardframe {
		width: 270px;
		height: 30%;
		border-radius: 0rem;
	} */
}