/* Dasar */

@font-face {
	font-family: "PTSans-Regular";
	src: url('../aset/PTSans-Regular.ttf');
}

@font-face {
	font-family : 'PTSans-Bold';
	src : url('../aset/PTSans-Bold.ttf');
}

body {
	background : #0846a1;
	color : #06367c;
	font-family : 'PTSans-Regular';
	font-size : 1rem;
}

a {
	color : #06367c;
	cursor : pointer;
	text-decoration : none;
}

p, ul {
	margin-bottom : 0.6rem;
}

header {
	color : #FFF;
	flex-shrink : 0;
	font-family : 'PTSans-Bold';
	font-size : 1.1rem;
	padding : 0.5rem 0;
}

header .bahasa {
	cursor : pointer;
	font-weight : bold;
	position : absolute;
	right : 0;
}

header small {
	font-family : 'PTSans-Regular';
}

footer {
	color : #FFF;
	flex-shrink : 0;
	font-size : 1.1rem;
	padding : 10px 30px 20px 30px;
}

footer a { color : white; text-decoration : none; }

footer .haki {
	font-size : 0.9rem;
}

footer .judul {
	border-bottom : 1px solid rgba(255, 255, 255, 0.27);
	font-size : 1.5rem;
	margin-bottom : 12px;
	width : fit-content;
}

footer .kanan {
	float : right;
	text-align : left;
	width : fit-content;
}

footer .tengah {
	margin : auto;
	text-align : left;
	width : fit-content;
}

main {
	background : white;
	margin-top : 6.4rem;
}

#atas {
	background : #06367c;
}

#bawah {
	background : #0846a1;
}

#b3 {
	background : #35A344;
}

#laman .deskripsi {
	margin-bottom : -0.9rem;
	text-align : justify;
}

#laman .nama {
	font-family : 'PTSans-Bold';
	font-size : 2rem;
}

#laman .telusur {
	width : 300px;
}

#laman .accordion-body .telusur {
	margin : 2px 0 0 2px;
}

#royal {
	background : #9C4880;
}

/* Modul */

#album {position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:1000px;overflow:hidden;visibility:hidden;background:#164ea1;border:3px solid #164ea1;border-radius:1rem;}
#album .arrowleft, #album .arrowright {width:65px;height:65px;top:0px;}
#album .arrowleft {left:25px;}
#album .arrowright {right:25px;}
#album .jssorl-009-spin {position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:white;}			
#album .jssorl-009-spin img {animation-name: jssorl-009-spin;animation-duration: 1.6s;animation-iteration-count: infinite;animation-timing-function: linear;margin-top:-19px;position:relative;top:50%;width:38px;height:38px;}
@keyframes jssorl-009-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
#album .jssorb032 {position:absolute;bottom:12px;right:12px;}
#album .jssorb032 .i {position:absolute;cursor:pointer;width:16px;height:16px;}
#album .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
#album .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
#album .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
#album .jssorb032 .i.idn {opacity:.3;}
#album .jssora051 {display:block;position:absolute;cursor:pointer;}
#album .jssora051 svg, #album .jssorb032 svg {position:absolute;top:0;left:0;width:100%;height:100%;}
#album .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
#album .jssora051:hover {opacity:.8;}
#album .jssora051.jssora051dn {opacity:.5;}
#album .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
#album .slides {cursor:default;position:relative;top:0px;left:0px;width:1500px;height:1000px;overflow:hidden;}
#album .slides img { object-fit : cover; }
#album .slides .keterangan { position : absolute; bottom : 0rem; left : 0rem; background : #000; color : white; font-size : 2rem !important; opacity : 0.5; padding : 3rem 4rem; width : 100%; }

#aplikasi {
	position : relative;
}

#berita {
	text-align : justify;
}

#berita img {
	border-radius : 1rem;
	height : 15rem;
	object-fit : cover;
	width : 100%;
}

#berita .deskripsi {
	margin-bottom : -0.4rem;
	margin-top : 0.3rem;
	text-align : justify;
}

#berita .judul {
	font-family : 'PTSans-Bold';
	font-size : 1.1rem !important;
	margin-top : 0.1rem;
}

#berita .selengkapnya {
	margin-bottom : -0.4rem;
	margin-top : 0.2rem;
	text-align : right;
}

#berita .tanggal {
	font-size : 0.8rem;
	margin-top : 0.75rem;
}

#galeri img {
	background : #164ea1;
	border : 1px solid #164ea1;
	height : 15rem;
	object-fit : cover;
	width : 100%;
}

#galeri .album {
	background : #164ea1;
	border-radius : 1rem;
	color : white;
	font-size : 1.1rem;
	font-weight : bold;
	margin-bottom : 0.1rem;
	padding : 1rem 1.5rem;
}

#galeri .nama {
	background : #164ea1;
	color : white;
	font-family : 'PTSans-Regular';
	font-size : 1rem;
	font-weight : 500;
	margin : 0 0 0.01rem 0 !important;
	padding : 0.75rem 1rem;
}

#keberlanjutan ol {
	margin : 0.5rem 0 -0.3rem 0;
}

#keberlanjutan li {
	margin-left : -17px;
}

#keberlanjutan #laporan img {
	border-radius : 1.5rem;
}

#keberlanjutan #spanduk {position:relative;margin:0 auto;top:0px;left:0px;width:967px;height:433px;overflow:hidden;visibility:hidden;border-radius:25px;}
#keberlanjutan #spanduk .slides {cursor:default;position:relative;top:0px;left:0px;width:967px;height:433px;overflow:hidden;}
#keberlanjutan #spanduk .tombol {
	height : 100%;
	position : absolute;
	width : 100%;
}
#keberlanjutan #spanduk .tombol .btn {
	font-size : 2.5rem;
	font-weight : bold;
}

#keberlanjutan .b3 .deskripsi {
	margin : 1rem 0 -0.3rem 0;
	text-align : left;
}

#keberlanjutan .b3 .slogan {
	font-size : 1.5rem;
	font-weight : bold;
	margin : 0.9rem 0 -0.5rem 0;
	max-width : 500px;
}

#keberlanjutan .judul {
	font-family : 'PTSans-Bold';
	font-size : 1.5rem;
}

#keberlanjutan .mitra img {
	margin : 1rem 1rem 0 1rem;
	width : 15rem;
}

#keberlanjutan .mitra .garis {
	background : #0846a1;
	margin-top : 1rem;
	padding : 0.1rem;
	width : 3rem;
}

#keberlanjutan .tajuk .col-md-4 {
	margin-top : 1rem;
}

#komersial .judul {
	font-size : 1.5rem;
	margin-top : -0.6rem !important;
}

#komersial .pilar {
	display : flex !important;
	flex-direction : column !important;
	margin-top : 1.5rem;
}

#komersial .pilar .bawah {
	background : #CDE6FD;
	border-bottom-left-radius : 1.5rem;
	border-bottom-right-radius : 1.5rem;
	padding : 0.6rem;
}

#komersial .pilar .kotak {
	background : #CDE6FD;
	height : 100%;
}

#komersial .pilar .kotak .info {
	padding : 1rem 1.25rem 0rem 1.25rem;
}

#komersial .separator {
	background : #06367c;
	height : 1px;
	margin : 1.7rem 0 2rem 0;
}

#komersial .jssorl-009-spin img {
	animation-name: jssorl-009-spin;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
	from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
#komersial .jssorb053 .i {position:absolute;cursor:pointer;}
#komersial .jssorb053 .i .b {fill:#fff;fill-opacity:0.3;}
#komersial .jssorb053 .i:hover .b {fill-opacity:.7;}
#komersial .jssorb053 .iav .b {fill-opacity: 1;}
#komersial .jssorb053 .i.idn {opacity:.3;}
#komersial .jssora093 {display:block;position:absolute;cursor:pointer;}
#komersial .jssora093 .c {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
#komersial .jssora093 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
#komersial .jssora093:hover {opacity:.8;}
#komersial .jssora093.jssora093dn {opacity:.6;}
#komersial .jssora093.jssora093ds {opacity:.3;pointer-events:none;}

#layanan {
	color : #174DA1;
	margin-bottom : -7px;
	margin-top : -5px;
	text-align : justify;
}

#layanan a {
	color : #06367c;
	text-decoration : none;
}

#layanan img {
	margin-top : 0.5rem;
	width : 2rem;
}

#layanan .deskripsi {
	margin-bottom : 0.7rem;
	text-align : justify;
}

#layanan .deskripsi p:last-child {
	margin-bottom : 0;
}

#layanan .detail {
	margin-bottom : 1.1rem;
}

#layanan .garis {
	background : #174DA1;
	height : 0.25rem;
}

#layanan .nama {
	font-size : 1.5rem !important;
	margin : 0 !important;
}

#layanan .royal {
	width : 100%;
}

#manajemen {
	color : #174DA1;
	font-family : 'PTSans-Regular';
	font-size : 1rem;
}

#manajemen a {
	color : #174DA1;
	text-decoration : none;
}

#manajemen .detail img {
	max-width : 600px;
	width : 100%;
}

#manajemen .detail .pejabat {
	margin : auto;
	margin-top : -15px;
	max-width : 600px;
	width : 100%;
}

#manajemen .detail .pejabat .jabatan {
	margin : 0;
	text-align : center;
}

#manajemen .detail .pejabat .nama {
	font-size : 2rem;
	font-weight : bold;
	margin : 0;
	text-align : center;
}

#manajemen .detail .profil {
	margin-top : 1.3rem;
}

#manajemen .detail .profil p:last-child {
	margin-bottom : -0.4rem;
}

#manajemen .col-lg-4 {
	display : flex !important;
	flex-direction : column !important;
}

#manajemen .col-lg-4 img {
	width : 100%;
}

#manajemen .col-lg-4 .pejabat, #manajemen .detail .pejabat {
	background : #274797;
	color : white;
	cursor : pointer;
	padding : 8px 20px 15px 20px;
	text-align : left;
	width : 100%;
}

#manajemen .col-lg-4 .pejabat .jabatan {
	font-family : 'PTSans-Regular';
	font-size : 1.1rem;
}

#manajemen .col-lg-4 .pejabat .nama {
	font-family : 'PTSans-Bold';
	font-size : 1.2rem;
	margin : 0;
}

#manajemen .judul {
	color : #274797 !important;
	font-family : 'PTSans-Bold';
	font-size : 2rem;
	margin-bottom : -0.8rem;
	margin-top : -0.8rem;
	text-shadow : none !important;
}

#manajemen .separator {
	background : #174DA1;
	height : .25rem;
	width : 5rem;
}

#rute {
	margin-top : 0.5rem;
}

#rute a {
	color : grey;
	text-decoration : none;
}

#rute a:hover {
	color : black;
	text-decoration : none;
}

#rute .nama {
	align-items : center;
	display: flex;
	font-family : 'PTSans-Regular';
	font-size : 0.9rem !important;
	margin : 0 0 0 0.5rem !important;
}

#rute .nomor {
	align-items : center;
	background : red;
	border-radius : 100%;
	color : white;
	display : flex;
	font-size : 0.75rem;
	font-weight : 750;
	height : 44px;
	justify-content : center;
	max-width : 44px;
	min-width : 44px;
}

#menu {
	background : #F1F1F1;
	box-shadow : 0px 5px 6px 0px rgba(0, 0, 0, 0.25);
	padding : 2.5rem 0;
}

#menu .garis {
	background : #A9A9A9;
	height : 1px;
	margin : 2rem auto;
}

#menu .kotak {
	align-items : center;
	cursor : pointer;
	display: flex;
	height : 150px;
	padding : 15px;
	justify-content : center;
	text-align : center;
	width : 20%;
}

#menu .kotak img {
	height : 37.5px;
}

#menu .separator {
	border : 1px solid #A9A9A9;
	border-bottom-color : transparent;
	border-top-color : transparent;
}

#menu .teks {
	break-after: always;
	color : #5B5B5B;
	margin-top : 5px;
}

#penghargaan img {
	background : #164ea1;
	border : 1px solid #164ea1;
	height : 15rem;
	object-fit : cover;
	width : 100%;	
}

#penghargaan .galeri {
	background : #164ea1;
}

#penghargaan .nama {
	color : white;
	font-family : 'PTSans-Regular';
	font-size : 1rem;
	font-weight : 500;
	margin : 0 0 0.01rem 0 !important;
	padding : 0.75rem 1rem;
}

#spanduk {position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:430px;overflow:hidden;visibility:hidden;}
#spanduk .arrowleft, #spanduk .arrowright {width:65px;height:65px;top:0px;}
#spanduk .arrowleft {left:25px;}
#spanduk .arrowright {right:25px;}
#spanduk .jssorl-009-spin {position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:white;}			
#spanduk .jssorl-009-spin img {animation-name: jssorl-009-spin;animation-duration: 1.6s;animation-iteration-count: infinite;animation-timing-function: linear;margin-top:-19px;position:relative;top:50%;width:38px;height:38px;}
@keyframes jssorl-009-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
#spanduk .jssorb032 {position:absolute;bottom:12px;right:12px;}
#spanduk .jssorb032 .i {position:absolute;cursor:pointer;width:16px;height:16px;}
#spanduk .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
#spanduk .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
#spanduk .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
#spanduk .jssorb032 .i.idn {opacity:.3;}
#spanduk .jssora051 {display:block;position:absolute;cursor:pointer;}
#spanduk .jssora051 svg, #spanduk .jssorb032 svg {position:absolute;top:0;left:0;width:100%;height:100%;}
#spanduk .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
#spanduk .jssora051:hover {opacity:.8;}
#spanduk .jssora051.jssora051dn {opacity:.5;}
#spanduk .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
#spanduk .slides {cursor:default;position:relative;top:0px;left:0px;width:1300px;height:430px;overflow:hidden;}

#tentang #vmw .kotak {
	background : #164ea1;
	border-radius : 25px;
	color : white;
	padding : 2rem;
}

#tentang .judul {
	color : white;
	font-weight : bold;
	text-shadow : 0 0 15px #000, 0 0 15px #000;
}

#tentang .konten .deskripsi {
	margin-bottom : -1rem;
	margin-top : -0.5rem;
	text-align : justify;
}

#tentang .konten .deskripsi .img-thumbnail {
	margin : 0.5rem 0 1rem 0;
}

#tentang .konten .judul {
	font-size : 2rem;
}

#tentang .konten .kotak {
	border : 1px solid;
	border-radius : 5px;
	padding : 1rem 1.5rem;
}

#tentang #vmw .kotak:last-child {
	margin-bottom : 0;
}

#tentang .konten .kotak li {
	margin-left : -0.9rem;
}

#tentang .konten .kotak ul {
	margin-bottom : 0.15rem;
}

#tentang .sejarah {
	margin-bottom : -0.4rem;
}

/* Modifikasi */

.accordion-body {
	padding : 2.5rem;
}

.accordion-button:focus {
	background : #cdd6e4;
	box-shadow : none;
	outline : none;
}

.accordion-button:not(.collapsed) {
	background : #e6eaf1;
}

.input-group .form-control:focus {
	border-color : #ced4da;
	box-shadow : none;
}

.nav-item {
	font-size : 1.25rem;
	margin : 0 10px;
}

.nav-link {
	color : #FFF;
	padding: 0;
}

.page-item:first-child .page-link {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.page-item.active .page-link {
	color: #fff !important;
	background-color: #3685c3 !important;
	border-color: #1e4f9c !important; 
}

.page-link {
	color: #1e4f9c !important;
	background-color: #fff !important;
	border: 1px solid #1e4f9c !important; 
}

.page-link:focus {
	z-index: 2;
	outline: 0;
	box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0);
}

.page-link:hover {
	color: #fff !important;
	background-color: #9ac2e1 !important;
	border-color: #1e4f9c !important; 
}
  
.paginate_button {
	border : 0 !important; 
}

.pointer {
	cursor : pointer;
}

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

.top-75 {
	top : 75% !important;
}

@media (min-width : 992px) {

	#berita .col-lg-4, #berita .jarak, #galeri .col-lg-4, #galeri .jarak {
		margin-bottom : 3rem;
	}

	#berita hr {
		display : none;
	}

	#keberlanjutan {
		padding : 0 0 3rem 0;
	}

	#keberlanjutan #laporan, #keberlanjutan #spanduk {
		margin-top : 3rem;
	}

	#keberlanjutan .b3 {
		margin-top : 1.5rem;
	}

	#keberlanjutan .judul {
		margin : 2.4rem 0 -0.5rem 0;
	}

	#keberlanjutan .prakata {
		margin : 2.3rem 0 -0.3rem 0;
	}
	
	#keberlanjutan .tajuk {
		margin-top : 2rem;
	}

	#komersial .gambar {
		margin : 3rem 0;
	}

	#laman .konten {
		/* margin : 9.4rem auto 3rem auto; */
		padding : 3rem 0;
	}

	#laman .nama {
		margin-bottom : 2.2rem;
		margin-top : -0.9rem;
	}
	
	#layanan .col-lg-4, #layanan .detail {
		margin-top : 1.5rem;
	}

	#manajemen .col-lg-4 .pejabat {
		height : 6.5rem;
	}

	#pariwara {
		margin : 3rem auto;
	}

	#penghargaan .row {
		--bs-gutter-x : 2.5rem;
		--bs-gutter-y : 2.5rem;
	}

	#seksi3 #berita {
		margin-top : 2.2rem;
	}

	#tentang #vmw .kotak {
		margin-bottom : 3rem;
	}

	.accordion-button {
		font-size : 1.25rem;
		padding : 1.75rem 2.5rem;
	}

	.dropdown-item:focus, .dropdown-item:hover {
		color : #6f8398;
		text-decoration : none;
		background-color : #ebf3f9;
	}

	.dropdown-menu {
		background : #fafcfe;
		border-color : #1e4f9c;
		left : 50% !important;
		right : auto !important;
		top : 116% !important;
		transform : translate(-50%, 0) !important;
	}

	.dropdown-menu:after {
		position : absolute;
		left : 50% !important;
		right : auto !important;
		top : -10px !important;
		transform : translate(-50%, 0) !important;
		display : inline-block;
		border-right : 10px solid transparent;
		border-bottom : 10px solid #ffffff;
		border-left : 10px solid transparent;
		content : '';
	}

}

@media (min-width: 768px) {

	#aplikasi .tombol {
		right : 0;
		margin : -4.6rem 2.1rem 0 0;
		position : absolute;
	}

	#aplikasi .tombol img {
		height : 50px;
	}

	#manajemen .col-lg-4 {
		margin-top : 2.6rem;
	}

	#manajemen .col-md-6 .pejabat {
		height : 6.5rem;
	}

	#manajemen .detail img {
		margin-top : 2.5rem;
	}

	#manajemen .separator {
		margin : 3rem auto;
	}

	#tentang .judul {
		font-size : 4.8vw;
	}

}

@media (max-width: 1199.98px) {

	#laman {
		margin : 0 1.75rem;
	}

}

@media (max-width : 991.98px) {

	header .bahasa {
		position : relative;
		left : 10px;
	}

	footer {
		padding-top : 20px;
	}

	footer .kanan {
		float : left;
	}

	footer .tengah {
		margin : 0;
	}

	#berita .col-lg-4, #berita .jarak, #galeri #album, #galeri .col-lg-4, #galeri .jarak {
		margin-bottom : 2rem;
	}

	#berita hr {
		margin : 2rem 0;
	}

	#keberlanjutan {
		padding : 0 0 2rem 0;
	}

	#keberlanjutan #laporan {
		margin-top : 1rem;
	} 

	#keberlanjutan #laporan img {
		margin-top : 1rem;
	}

	#keberlanjutan #spanduk {
		margin-top : 2rem;
	}

	#keberlanjutan #spanduk .tombol .btn {
		font-size : 2.2rem !important;
		width : 15rem;
	}

	#keberlanjutan .b3 {
		margin-top : 0.5rem;
	}

	#keberlanjutan .judul {
		margin : 1.4rem 0 -0.5rem 0;
	}

	#keberlanjutan .prakata {
		margin : 1.4rem 0 -0.3rem 0;
	}
	
	#keberlanjutan .tajuk {
		margin-top : 1rem;
	}

	#komersial .gambar {
		margin : 2rem 0;
	}

	#laman {
		margin : 0 0.75rem;
	}

	#laman .konten {
		/* margin : 8.4rem auto 2rem auto;  */
		padding : 2rem 0; 
	}

	#laman .nama {
		margin-bottom : 1.2rem;
		margin-top : -0.8rem;
	}

	#layanan .col-lg-4, #layanan .detail {
		margin-top : 0.75rem;
	}

	#menu .nama {
		font-size : 0.8rem;
	}

	#pariwara {
		margin : 2rem auto;
	}

	#penghargaan .row {
		--bs-gutter-y : 1.5rem;
	}

	#seksi3 #berita {
		margin-top : 1.2rem;
	}

	#tentang .col-md-4 {
		margin-top : 2rem;
	}
	
	#tentang #vmw .kotak {
		margin-bottom : 2rem;
	}

	.accordion-body {
		padding : 1.25rem;
	}

	.dropdown-menu {
		margin-bottom : 0.3rem;
	}

	.mt-5 {
		margin-top : 2rem !important;
	}

	.navbar-nav {
		border-top : 1px solid white;
		margin-top : 8px;
		padding-top : 7px;
	}

	.nav-link { padding : 0; }

}

@media (max-width : 767.98px) {

	#aplikasi .tombol {
		margin-top : 0.3rem;
		text-align : center;
	}

	#aplikasi .tombol img {
		height : 40px;
	}

	#judul {
		font-size : 2.2rem;
	}

	#manajemen .col-lg-4 {
		margin-top : 2rem;
	}

	#manajemen .detail img {
		margin-top : 1.5rem;
	}

	#manajemen .separator {
		margin : 2rem auto;
	}

	#menu .kotak {
		height : 75px;
	}

	#menu .kotak img {
		height : 37.5px;
	}

	#menu .teks {
		display : none;
	}

	#tentang .judul {
		font-size : 2rem;
	}

}

@media (max-width: 575.98px) {

	.navbar {
		margin : 0 0.75rem;
	}

}