@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap');
@font-face {
   font-family: ketahananpangan;
   src: url(KetahanPanganBaru-Regular.ttf);
}
@font-face {
   font-family: kembul;
   src: url(Kemboel-Regular.ttf);
}
@font-face {
   font-family: angkringan;
   src: url(AngkringanKotagede.ttf);
}	
@font-face {
   font-family: gaya2024;
   src: url(KemasyuranJawaRegular.ttf);
}	
@font-face {
   font-family: scale;
   src: url(Scale VF.otf);
}		
@font-face {
   font-family: gaya1;
   src: url(Gaya-Regular.otf);
}		
@font-face {
   font-family: gaya2;
   src: url(Gaya-Italic.otf);
}		
@font-face {
   font-family: scalevf;
   src: url(Scale-VF.otf);
}	
		*{		
			padding:0;		
			margin:0;	
		}		
		
		body{	
			margin:0; 
			padding:0;  
			font-family: 'scalevf';
			letter-spacing:0.1em;
			color:#000;
			overflow-x:hidden;
			font-weight:300;
			/* background: url(img/pattern2.png) center repeat; */
			background: #ECE0CA;
			font-size:1.2em;
			background-image:url('img/footerdesk.png?x=1');
			background-repeat:no-repeat;
			background-position:center bottom;
			background-size:100%;
		}
		body.home{	
			background-image:url('img/footnya.png?x=3');
		}
		
		.bold{
			font-weight:700;
		}
		.header{
			/*
				min-height:10vh;
				position:fixed; 
			*/
			width:97%; 
			margin:auto;
			font-family: 'gaya1';
			z-index:999;
			position:sticky;
			top:0;
		}
		
		.fontangkringan{
			font-family: 'gaya1';
		}
		.fontkembul{
			font-family: 'gaya2';
		}
		h1.fontkembul, h1.fontangkringan{
			color:#BA5261;
			font-size:2em;
			letter-spacing:0.01em;
			text-shadow: -1px -1px 0 #F1CB41,  
							1px -1px 0 #F1CB41,
							-1px 1px 0 #F1CB41,
							 1px 1px 0 #F1CB41, 
							 4px 4px 0 #F1CB41;
			text-transform:capitalize;	
			letter-spacing:.1em; 
		}
		h3.fontangkringan{
			letter-spacing:.1em; 
		}
		.pengumuman h1.fontkembul, .pengumuman h1.fontangkringan{
			color:#FFFFFF;
			font-size:3em;
			letter-spacing:-4px;
			text-shadow: 3px 3px #FF0000;
		}
		.pengumuman h1.fontkembul:hover, .pengumuman h1.fontangkringan:hover{
			color:#BA5261;
			text-shadow: 3px 3px #FF0000;
			text-shadow: 3px 3px #F1CB41;
		}
		.hide .header{
			visibility:hidden;
		}
		.hide .header.headhide{
			visibility:visible;
		}
		header .area{
			/* background-color: rgba(0, 123, 0, 0.99); */
			/* background-color: #BC5262; */
			/* background-image: url(img/fkymenu.png); */
			background-image: url(img/bgmenucenter.png);
			background-repeat:repeat-x;
			background-position:center top;
			background-size:auto 100%;
			
		}
		header .area2{
			/* background-color: rgba(0, 123, 0, 0.99); */
			/* background-color: #ECE0CA;
			background-image: url(img/fkymenu2.png);
			background-repeat:repeat-x;
			background-position:center bottom; */
			
		}
		header .areakan{
			/* background-color: rgba(0, 123, 0, 0.99); */
			/* background-color: #BC5262; */
			background-image: url(img/ataskanan.png);
			background-repeat:no-repeat;
			background-position:right top;
			background-size:auto 100%;
		}
		header .areakir{
			/* background-color: rgba(0, 123, 0, 0.99); */
			/* background-color: #BC5262; */
			background-image: url(img/ataskiri.png);
			background-repeat:no-repeat;
			background-position:left top;
			background-size:auto 100%;

		}
		pre.tab {
			 -moz-tab-size: 10; /* Firefox */
			tab-size: 10;
			font-family: 'Roboto', sans-serif;
		}
		a{
			cursor:pointer;
			color:#BB5261;
			text-decoration:none;
		}
		a, a:hover{
			color:#037D03;
			
		}
		
		a.linknya{
			color:#037D03;
		}
		a.linknya:hover{
			font-weight:500;
			color:#B33E3D;
		}
		footer a:hover{
			color:#F1CB41;
		}
		p{
			text-align:left;
			line-height:130%;
			padding-bottom: 0.7rem;
			margin-bottom:0;
		}
		.bold{
			font-weight:700;
		}
		.clr{
			clear:both;
		}
		.cover{
			width:76%;
			/* max-width:1280px; */
			margin:auto;
			padding:20px;
			min-height:80vh;
		}
		.left-top{
			width:100%;
			background-image: url(img/left-top.png?id=2);
			background-position:left top;
			background-size:12%;
			background-repeat:repeat-y;
		}
		.right-top{
			width:100%;
			background-image: url(img/right-top.png?id=2);
			background-position:right top;
			background-size:12%;
			background-repeat:repeat-y;
		}
		.left-bottom{
			position:absolute;
			bottom:150px;
			left:0;
			height:40vh;
			width:12%;
			background-image: url(img/left-bottom.png);
			background-position:left bottom;
			background-size:100%;
			background-repeat:no-repeat;
		}
		.right-bottom{
			position:absolute;
			bottom:150px;
			right:0;
			height:40vh;
			width:12%;
			background-image: url(img/right-bottom.png);
			background-position:right bottom;
			background-size:100%;
			background-repeat:no-repeat;
		}
		.coverx{
			max-width:1200px;
			margin:auto;
		}
		.coverfull{
			padding:30px 0;
		}
		.coverbig{
			max-width:1600px;
			margin:auto;
			
		}
		.covers{
			max-width:1400px;
			margin:auto;
		}
		.center{
			text-align:center;
			margin:auto;
		}
		h3.s300{
			font-weight: 300;
		}
		h3.s500{
			font-weight:500;
		}
		h3.s700{
			font-weight:700;
		}
		.pc10{
			width:15%;
			float:left;
		}
		.pc80{
			width:70%;
			float:left;
		}
		.top-0{
			padding-top:0px;
			padding-bottom:0px;
		}
		.top-50{
			padding-top:50px;
			padding-bottom:50px;
		}
		.top-100{
			padding-top:100px;
			padding-bottom:100px;
		}
		.bottom-50{
			margin-bottom:50px;
		}
		.bottom-100{
			margin-bottom:100px;
		}
		.bottom-0{
			margin-bottom:0px;
		}
		.bottom-50{
			margin-bottom:50px;
		}
		.bottom-100{
			margin-bottom:100px;
		}
		.logokiri, .logokanan{
			float:left;
			width:50%;
		}
		.logokanan{
			text-align:right;
		}
		.logokiri img{
			width:200px;
			max-width:70%;
		}
		.logokanan img{
			width:200px;
			max-width:70%;
		}
		.listsub{
			padding-top:15px;
			padding-bottom:10px;
		}
		.listsub h3{
			text-shadow: 2px 2px #F1CB41;
		}
		.listsub .isicontent{
			padding-left:0px;
		}
		.isicontent ol{
			padding-left:20px;
		}
		.isicontent li{
			
		}
		strong{
			font-weight:700;
		}
		#subjudul{
			padding-top:20px;
		}
		main{
			/* background: url(img/bgall.png) bottom no-repeat; */
			background-size: 100%;
			/* 
			padding-bottom:250px;
			*/
			
		}
		main.spc{
			/* background: url(img/bg-ratux.png) bottom no-repeat; */
			background-size: 100%;
			/* padding-bottom:35vh;
			min-height:80vh; */
		}
		.logo{
			text-align:center;
		}
		.logo img{
			width:500px;
			max-width:70%;
		}
		main.openingimage{
			min-height:100vh;
			background-image:url('img/bg-opening2.png');
			background-size:100%;
			background-position:top left;
			background-repeat:no-repeat;
		}
		.kolom-2{
			column-count: 2;
		}
		.kolom-3{
			column-count: 3;
		}
		footer{
			position:relative;
			padding:0px;
			color:#FFF;
			/* background-image:url('img/footnya.png'); */
			background-size:100%;
			background-position:center top;
		}
		footer .cover{
			width:95%;
			padding-top:15vh;
			padding-bottom:5vh;
			min-height:15vh;
		}
		footer .leftbgt{
			float:left;
			width:7%;
			padding-right:2%;
		}
		footer .left{
			width:15%;
			float:left;
			font-size:0.7em;
			text-align:left;
		}
		footer .right{
			width:15%;
			float:left;
			font-size:0.7em;
		}
		footer .left img, footer .leftbgt img{
			max-width:90%;
			width:150px;
		}
		footer .left.citra{
			width:35%;
			text-align:left;
		}
		footer .right{
			text-align:right;
			float:right;
		}
		footer .right img{
			margin-left:5px;
			margin-bottom:5px;
			width:25px;
			max-width:40%;
		}
		footer .right  a:hover img{
			filter:opacity(70%);
		}
		footer .center{
			text-align:center;
		}
		footer a{
			color:#FFF;
			text-decoration:none;
		}
		footer a:hover{
			color:#BA5261;
		}
		.navbar-brand img{
			max-width:70px;
			transition: transform .2s; 
		}
		.navbar-brand img:hover{
			transform: scale(1.1);
		}
		.navbar-nav{
			width:100%;
		}
		.navbar-nav li{
			color:#000;
			
			font-size:1.2em;
			width:20%;
			text-align:center;
		}
		.navbar-nav li a{
			cursor:pointer;
			color:#000;
		}
		.navbar-dark .navbar-nav .nav-link {
			color: rgba(0, 0, 0, .5);
		}
		.navbar-dark .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
			color: #BC5262;
			font-weight:500;
			text-shadow: 1px 1px #115B48;
			padding-top:.5rem;
			padding-bottom:.9rem;
		}
		
		.navbar-dark .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover{
			color:#67AE7B;
			text-shadow: 1px 1px #F2CD3E;
		}
		.navbar-dark .navbar-toggler, .navbar-light .navbar-toggler {
			color:#1B604E;
			border-color:#1B604E;
			background-color:#67AE7B;
		}
		.navbar-dark .navbar-toggler-icon {
			background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(227,63,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		}
		
		.navbar-dark .navbar-toggler-icon {
			
		}
		main section{
			margin-bottom:50px;
		}
		section img.full{
			width:100%;
		}
		section img.fullcnt{
			width:100%;
			margin-bottom:5px;
		}
		section img{
			max-width:100%;
		}
		section#latar{
			height: calc(100vw/1.8);
			/*height:110vh;*/
			/*background-image:url('img/depanku.png'); background-position:center; background-size:100% ; background-repeat:no-repeat;*/
		}
		section#videoopening{
			
		}
		section#videoopening iframe{
			width:100%;
			height: calc(100vw/1.77);
			max-height:100vh;
		}
		#iframevid iframe{
			width:100%;
			height: calc(100vw/1.77);
			max-height:100vh;
		}
		.iframevid iframe{
			width:100%;
			height: calc(100vw/2);
			max-height:100vh;
		}
		.blockvidtop{
			position:absolute;
			width:100%;
			height: calc(100vw/2);
			max-height:90vh;
			z-index:7;
			/* background:rgba(76, 175, 80, 0.3) ; */
		}
		.blockvidright{
			position:absolute;
			width:40%;
			left:60%;
			height: calc(100vw/1.77);
			max-height:100vh;
			z-index:7;
		}
		section#peta{
					position:relative;
				}
				
				section#sambatan{
					
				}
		section#tim{
			
		}
		section#tim h3{
			text-align:center;
			font-weight:300;
			margin-bottom:50px;
		}
		section#tim h5:first-child{
			margin-top:0px;
		}
		section#tim h5{
			color:#006590;
			margin-top:10px;
		}
		section#animasingisor{
			padding-top:0px; 
			padding-bottom:25vw;
		}
		.container {
			width:100vw;
		}
		.utama {
			position: absolute;
			z-index:0;
		}
		.utama img{
			width:7vw;
		}
		
		.square {
		  position: absolute;
		  z-index:0;
		  width:9vw;
		}
		.square img{
			opacity: 1;
		}
		.square-size2 {
		  width:15vw;
		}
		.square-size1 {
		  width:7vw;
		}
		.square-size0 {
		  width:900px;
		  max-width:90vw;
		}
		
		#peta .titik{
			width:10px;
			height:10px;
			background-color:#B33E3D;
			position:absolute;
			z-index:7;
			border-radius:10px;			
			transition-duration: 200ms;
		}
		#peta .titik .jdl_titik{
			display:none;
			background-color: rgba(210, 184, 41, 0.9);
			border:1px solid #B33E3D;
			padding:5px;
			text-align:center;
			font-size:0.5em;
			width:100px;
			margin-top:-15px;
			font-weight:100;
			position:absolute;
			border-radius:5px;
			color:#FFF;
		}
		#peta .titik:hover{
			cursor:pointer;
			transform: scale(1.5);
			z-index:9;
		}
		#peta .titik:hover .jdl_titik{
			transform: scale(1);
		}
		#peta .titik:hover .jdl_titik{
			display:block;
		}
		.buttonopen{
			width:10vw;
			height:10vw;
			margin:auto;
			text-align:center;
		}
		
		.buttonopen img.tombolnya{
			margin-top:4vw;
		}
		.texttombol{
			position:absolute;
			text-align:center;
			width:10vw;
			margin-top:7.7vw;
			font-size:1.7vw;
			z-index:9;
			color:#F5F5F5;
			font-weight:500;
			transition-duration: 500ms;
			cursor:pointer;
		}
		.texttombol img{
			width:7vw;
		}
		.floatkiri{
			position:absolute;
			right: 50%;
			transform: translate(-60%);
			width:25vw;
			margin-top:20px;
			transition-duration: 500ms;
		}
		.floatkanan{
			position:absolute;
			left: 50%;
			transform: translate(60%);
			width:25vw;
			transition-duration: 500ms;
		}
		.floatbawah{
			position:absolute;
			left:50%;
			transform: translate(-50%, -50%);
			margin-top:27vw;
			width:25vw;
			transition-duration: 500ms;
		}
		.buttonopen .texttombol:hover ~ img.tombolnya, .buttonopen.activ img.tombolnya{
			animation: rotation 4s infinite linear;
		}
		.buttonopen .texttombol:hover{
			transform: scale(1.1);
		}
		.buttonopen .texttombol:hover ~ img.floatkiri{
			
			right: 42%;
		}
		.buttonopen .texttombol:hover ~ img.floatkanan{
			left: 42%;
		}
		.buttonopen .texttombol:hover ~ img.floatbawah{
			margin-top:20vw;
		}
		.logosub img{
			width:300px;
			max-width:70%;
			margin-top:30px;
			margin-bottom:20px;
		}
		.grids{
			 display: grid;
			  grid-template-columns: 33.3% 33.3% 33.3% ;
			  padding: 0px;
		}
		
		.gridscata{
			 display: grid;
			 text-align:center;
			  grid-template-columns: 25% 25% 25% 25%;
			  padding: 10px;
		}
		.gridscatb{
			 display: grid;
			 text-align:center;
			  grid-template-columns: 12.5% 25% 25% 25% 12.5%;
			  padding: 10px;
		}
		.grids.kaitan{
			grid-template-columns: auto auto auto auto auto auto;
		}
		#daftar .gridscata a, #daftar .gridscatb a{
			text-decoration:none;
			color:#000;
		}
		.gridscata a .gridsub, .gridscatb a .gridsub{
			color:#000;
			text-decoration:none;
			
		}
		.gridscata a .gridsub:hover b, .gridscatb a .gridsub:hover b{
			color:#B33E3D;
			text-decoration:none;
		}
		.gridlogo{
			 display: grid;
			  grid-template-columns: 16.6% 16.5% 16.6% 16.6% 16.6% 16.6%;
			  padding: 20px;
		}
		.gridsub{
			  padding:10px;
		}
		.catatan .gridsub{
			text-transform:uppercase;
			font-size:1.2em;
			padding:50px 0;
		}
		.catatan .gridsub b{
			font-weight:500;
		}
		.gridsub img{
			width:100%;
			margin-bottom:7px;
			filter: grayscale(50%);
			transition: .2s;
		}
		.gridsub:hover img{
			filter: grayscale(0%);
		}
		.gridsub h5{
			font-weight:500;
			font-size:1em;
			margin-bottom:5px;
		}
		.gridsub p{
			font-size:1em;
			font-weight:300;
		}
		.navbar-nav li {
			
		}
		.mob, .mobs{
			display:none;
		}
		.desk{
			display:block;
		}
		#readmore {
			display: none;
		}
		/*
		button{
			padding:5px 10px;
			background:#198819;
			border:1px solid #F1CB41;
			color:#FFF;
			font-weight:normal;
			font-size:0.8em;
			border-radius:5px;
		}
		button:hover{
			border:1px solid #BA5261;
			color:#FFF;
			
		}
		*/
		button{
				font-size:1em;
				padding:7px 20px;
				background:#F1CB41;
				text-shadow: -2px 2px #FFF;
				border:2px solid #0E5948;
				color:#0E5948;
				border-radius:7px;
			}
		button:hover{
				border:2px solid #0E5948;
				color:#FFF;
				background:#BA5261;
				text-shadow: -2px 2px #0E5948;
			}
		button.nonebut{
			
		}
		img.gbrtext{
			width:700px;
			max-width:70%;
		}
		p.small{
			font-size:0.8em;
		}
		
		#logo-dinas{
			padding-top:20px;
		}
		.grid4{
			  grid-template-columns: 25% 25% 25% 25% ;
		}
		.show-on-scroll {
			  opacity: 0;
			 
			  transition: transform 5s .25s cubic-bezier(0,1,.3,1),
						  opacity 1s .25s ease-out;
			 
			  will-change: transform, opacity;
			}

		.show-on-scroll.is-visible {
			  opacity: 1;
			}
		.gridsub a.filter{
			color:#B33E3D;
		}
		.gridsub a.filter:hoverr{
			color:#000;
		}
		.gridsub .judulnya{
			display:none;
			width:16%; 
			position:absolute; 
			background-color: rgba(18, 18, 18, 0.4);
		
		}
		.gridsub .judulnya h5{
			padding:10px;
		}
		.gridsub:hover .judulnya{
			display:block;
		}
		#tim-pelaksana h5{
			padding-top:10px;
		}
		#tim-pelaksana ol li{
			margin-left:10px;
		}
		::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		  color: #000;
		  opacity: 1; /* Firefox */
		}

		:-ms-input-placeholder { /* Internet Explorer 10-11 */
		  color: #000;
		}

		::-ms-input-placeholder { /* Microsoft Edge */
		 color: #000;
		}
		
		.zoom-in-out-box {
		  /* animation: zoom-in-zoom-out 2s ease infinite; */
		}
		
		.geber{
			margin:auto; width:95%; position:relative;
		}
		
		@keyframes zoom-in-zoom-out {
		  0% {
			transform: scale(1, 1);
		  }
		  50% {
			transform: scale(1.1, 1.1);
		  }
		  100% {
			transform: scale(1, 1);
		  }
		}
		
		
		@keyframes rotation {
			  0%   {transform: rotate(0deg) scale(1);}
			  25%  {transform: rotate(90deg) scale(0.8);}
			  50%  {transform: rotate(180deg) scale(1);}
			  75%  {transform: rotate(270deg) scale(0.8);}
			  100% {transform: rotate(359deg) scale(1);}
		 
		}
		@media only screen and (max-width: 1060px) {
			
			main{
				padding-bottom:0px;
			}
				main.spc{
						padding-bottom:0vh;
				}
				main.openingimage{
				min-height:10vh;
				padding-bottom:0px;
			}
			
			.square, .utama{
				display:none;
			}
			
			.kolom-2{
				column-count: 2;
			}
			.kolom-3{
				column-count: 2;
			}
			
			section#latar, section#opening{
				min-height: calc(100vw/1.7);
			}
			section#latar{
				height: calc(100vw/1.7);
			}
			
			
			#gbrcover{
				
			}
			.cover{
				padding:20px;
			}
			.hide .header{
				visibility:visible;
			}
			.hide .header.headhide{
				visibility:visible;
			}
			.gridsub .judulnya h5{
				font-size:0.8em;
			}
			.navbar-nav li {
				
			}
			
			.geber{
				width:100%;
			}
			
		}
		@media only screen and (max-width: 992px) {
			.navbar-nav li:nth-child(0) {
				font-size:1.1em;
			}
			.navbar-nav li:nth-child(1) {
				font-size:1.5em;
			}
			.navbar-nav li:nth-child(2) {
				font-size:2.0em;
			}
			.navbar-nav li:nth-child(3) {
				font-size:1.7em;
			}
			.navbar-nav li:nth-child(4) {
				font-size:1.5em;
			}
			.navbar-nav li:nth-child(5) {
				font-size:1.1em;
			}
			.navbar-nav li:nth-child(6) {
				font-size:1.2em;
			}
			.mob, .desk{
				display:none;
			}
			.mobs{
				display:block;
			}
			.header{
			width:100%; 
			}
			body{
				font-size:1em;
				background-image:none;
				background-repeat:no-repeat;
				background-position:center bottom;
				background-size:100%;
			}
			h2{
				font-size:1.5em;
			}
			h3{
				font-size:1.3em;
			}
			h4{
				font-size:1.2em;
			}
			main{
				
			}
				main.spc{
					
					
				}
			.cover{
				width:100%;
				max-width:1280px;
				margin:auto;
				padding:10px;
				min-height:80vh;
			}
			.left-top, .right-top{
				background:none;
			}
			.left-bottom, .right-bottom{
				display:none;
			}
			.pengumuman h1.fontkembul, .pengumuman h1.fontangkringan{
				color:#FFFFFF;
				font-size:2em;
				letter-spacing:-4px;
				text-shadow: 3px 3px #FF0000;
			}
			h1.fontkembul, h1.fontangkringan{
				font-size:2em;
			}
			
			section#latar{
				padding-top:80px;
				height: calc(100vw/1.6);
			}
			.desk, .mobs{
				display:none;
			}
			.desk img, .mobs img{
				display:none;
				visibility:hidden;
			}
			.mob{
				display:block;
			}
			.bottom-50{
				margin-bottom:25px;
			}
			#gbrcoverstill{
				
			}
			header{
				min-height:0vh;
			}
			header .area{
				/* background-color: rgba(0, 123, 0, 0.99); */
				/* background-color: #BC5262; */
				background-image: none;
				background:#EDE2CB;
				border-bottom:2px solid #105A49;
				border-top:2px solid #105A49;
			}
			header .areakan, header .areakir{
				/* background-color: rgba(0, 123, 0, 0.99); */
				/* background-color: #BC5262; */
				background: none;

			}
			.square, .utama{
				display:none;
			}
			main section{
				margin-bottom:20px;
			}
			main{
				padding-top:0px;
			}
			.coverfull{
				padding:0;
			}
			.grids{
				 grid-template-columns: auto;
			}
			.grid4{
				  grid-template-columns: 50% 50% ;
			}
			.gridlogo{
				grid-template-columns: auto auto auto;
				padding:7px;
			}
			.kolom-2{
				column-count: 1;
			}
			.kolom-3{
				column-count: 1;
			}
			footer .left, footer .leftbgt, footer .right, footer .left.citra{
		
				width:100%;
				text-align:center;
				margin-bottom:15px;
			}
			footer .leftbgt img{
				width:70px;
			}
			.floatkiri, .floatkanan, .floatbawah{
				display:none;
			}
			main.openingimage{
				
				
			}
			.buttonopen{
				width:30vw;
				height:30vw;
			}
			.buttonopen img.tombolnya{
				margin-top:0vw;
			}
			.texttombol{
				position:absolute;
				text-align:center;
				width:30vw;
				margin-top:12vw;
				font-size:5vw;
			}
			
			.gambarngisor{
				position:absolute;
			}
			.gambarngisor img{
				width:100vw;
			}
			main.openingimage{
				min-height:10vh;
			}
			.texttombol img{
				width:17vw;
			}
			.gridscata, .gridscatb{
				  grid-template-columns: 100%;
				  padding:0;
				  margin:0;
			}
			.catatan .gridsub{
				font-size:1.2em;
				padding:30px 0 0 0;
			}
			.blockvidtop{
				display:none;
			}
			.blockvidright{
				display:none;
			}
			#peta .titik{
				width:5px;
				height:5px;
			}
			.grids.kaitan{
				grid-template-columns: auto auto auto;
			}
			.gridsub .judulnya{
				display:none;
				width:31%; 
				position:absolute; 
				background-color: rgba(18, 18, 18, 0.6);
			
			}
			.gridsub .judulnya h5{
				padding:10px;
				font-size:0.8em;
			}
			.gridsub:hover .judulnya{
				display:none;
			}
				footer{
					background-image:url('img/footerx.png');
					background-size:cover;
					background-position:center;
				}
				
			.navbar{
				text-align:right;
				display:block;
			}
			.navbar-nav li{
				text-align:center;
				width:100%;
			}
			.navbar-dark .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link {
				padding-top: 5px;
				padding-bottom: 5px;
			}
		}