@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');

		*{		
			padding:0;		
			margin:0;	
		}		
		body{	
			margin:0; 
			padding:0; 
			background-color:#181818; 
			font-family: 'Roboto', sans-serif;
			color:#FFF;
			overflow-x:hidden;
			font-weight:300;
		}
		.header{
			min-height:10vh;
			position:fixed; width:100%; z-index:999;
		}
		.hide .header{
			visibility:hidden;
		}
		.hide .header.headhide{
			visibility:visible;
		}
		header .area{
			
			background-color: rgba(18, 18, 18, 0.9);
		}
		
		pre.tab {
			 -moz-tab-size: 10; /* Firefox */
			tab-size: 10;
			font-family: 'Roboto', sans-serif;
		}
		a, a:hover{
			cursor:pointer;
			color:#FFF;
			text-decoration:none;
		}
		
		a.linknya:hover{s
			color:#76F013;
		}
		p{
			text-align:justify;
		}
		.bold{
			font-weight:700;
		}
		.clr{
			clear:both;
		}
		.cover{
			max-width:1100px;
			margin:auto;
		}
		.covers{
			max-width:1100px;
			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%;
		}
		main{
			background-color:#181818; 
		}
		.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:10px;
			color:#FFF;
			background-image:url('img/background.jpg');
			background-size:cover;
			background-position:top left;
		}
		footer .cover{
			padding-top:20px;
			padding-bottom:20px;
		}
		footer .left, footer .right{
			float:left;
			width:18%;
			font-size:0.8em;
		}
		footer .right{
			width:10%;
		}
		footer .left img{
			max-width:100%;
			width:150px;
		}
		footer .right{
			text-align: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;
		}
		.navbar-brand img{
			max-width:120px;
		}
		.navbar-nav li{
			color:#FFF;
			text-transform:uppercase;
		}
		.navbar-nav li a{
			cursor:pointer;
			color:#FFF;
		}
		.navbar-dark .navbar-nav .nav-link {
			color: rgba(255,255,255,.5);
			font-weight:500;
		}
		.navbar-dark .navbar-nav .nav-link:hover{
			color:#76F013;
		}
		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:#76F114;
			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:#6DDB14;
			position:absolute;
			z-index:7;
			border-radius:10px;			
			transition-duration: 200ms;
		}
		#peta .titik .jdl_titik{
			display:none;
			background-color: rgba(18, 18, 18, 0.9);
			border:1px solid #6DDB14;
			padding:5px;
			text-align:center;
			font-size:0.5em;
			width:100px;
			margin-top:-15px;
			font-weight:100;
			position:absolute;
			border-radius:5px;
		}
		#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:#181818;
			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:50%;
			margin-top:10px;
			margin-bottom:10px;
		}
		.grids{
			 display: grid;
			  grid-template-columns: 33.3% 33.3% 33.3% ;
			  padding: 10px;
		}
		.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:#FFF;
		}
		.gridscata a .gridsub, .gridscatb a .gridsub{
			color:#FFF;
			text-decoration:none;
			
		}
		.gridscata a .gridsub:hover b, .gridscatb a .gridsub:hover b{
			color:#76EF13;
			text-decoration:none;
		}
		.gridlogo{
			 display: grid;
			  grid-template-columns: auto auto auto auto auto;
			  padding: 10px;
		}
		.gridsub{
			  padding:5px;
		}
		.catatan .gridsub{
			text-transform:uppercase;
			font-size:1.5em;
			padding:50px 0;
		}
		.catatan .gridsub b{
			font-weight:500;
		}
		.gridsub img{
			width:100%;
			margin-bottom:7px;
			filter: grayscale(10%);
			transition: 1s;
		}
		.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 {
			text-align:right;
		}
		.mob, .mobs{
			display:none;
		}
		.desk{
			display:blok;
		}
		#readmore {
			display: none;
		}
		button.nonebut{
			
		}
		img.gbrtext{
			width:700px;
			max-width:70%;
		}
		p.small{
			font-size:0.8em;
		}
		
		#logo-dinas{
			padding-top:20px;
		}
		.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:#62C313;
		}
		.gridsub a.filter:hoverr{
			color:#FFF;
		}
		.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;
		}
		
		::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;
		 color: #000;
		}
		@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.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);
			}
			
			.mob, .desk{
				display:none;
			}
			.mobs{
				display:block;
			}
			#gbrcover{
				
			}
			.cover{
				padding:20px;
			}
			.hide .header{
				visibility:visible;
			}
			.hide .header.headhide{
				visibility:visible;
			}
			.gridsub .judulnya h5{
				font-size:0.8em;
			}
			
		}
		@media only screen and (max-width: 700px) {
			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;
			}
			.square, .utama{
				display:none;
			}
			main section{
				margin-bottom:20px;
			}
			main{
				padding-top:0px;
			}
			.grids{
				 grid-template-columns: auto;
			}
			.gridlogo{
				grid-template-columns: auto auto auto;
			}
			.kolom-2{
				column-count: 1;
			}
			.kolom-3{
				column-count: 1;
			}
				footer .left, footer .right{
				width:100%;
				text-align:center;
				margin-bottom:15px;
			}
			.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.5em;
				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;
			}
		}