@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');
		*{
			padding:0;
			margin:0;
		}
		html, body{
			font-family:arial;
			height: 100%;
		}
		a {
			color: #000;
		}
		a:hover {
			color: #555;
		}
		a, a:hover{
			text-decoration:none;
		}
		
		body{
			font-family: 'Montserrat', sans-serif;
			background:#FFF;
			background-image:url('latar logo pesbon.png'); 
			background-size:cover; 
			background-position:center; 
			background-repeat:no-repeat;
			color:#000;
			
		}
		button{
			padding:7px;
			background:#D8C023;
			border:none;
			color:#000;
			border-radius:3px;
		}
		button:hover{
			background:#5A4F1D;
		}
		#cover, .cover{
			width:1400px;
			max-width:95%;
			margin:auto;
			margin-top:20px;
			margin-bottom:20px;
		}
		.obj{
			position: absolute; 
			top: 47%; 
			left: 76%; 
			z-index:999;
			width:10%;
		}
		.indo{
			width:100%;
		}
		.other{
			width:100%;
			margin-top:5%;
		}
		.obj a img{
			filter: grayscale(100%) brightness(180%);
		}
		.obj a:hover img{
			filter: grayscale(0%);
			cursor:pointer;
		}
		#black{
			display:none;	
			width:100%;
			height:100vh;	
			position:absolute;
			background:#FFF;
			top:0;
			left:0;
			z-index:9999999999;
			overflow:hidden;
		}
		#rotate{
			display:none;
			width:100%;
			max-height:100vh;
			max-width:1000px;
			color: #000;
			border-radius: 3px;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			padding:10px;
			margin: 0;
			margin:auto;
			position: absolute; 
			top: 50%;  
			left: 50%;
			transform: translate(-50%, -50%);
			z-index:9999999999999;
			text-align:center;
			overflow:hidden;
		}
		 .example-container {
			
		}
		.logo{
			float:left;
			text-align:center;
			width:40%;
		}
		.logo2{
			float:left;
			width:500px;
			max-width:50%;
			margin-left:20px;
			text-align:center;
			display:none;
		}
		.dateprog{
			width:60%;
			height:7%;
			float:left;
			text-align:center;
			color:#F17EA2;
			font-weight:500;
		}
		.dateprog img{
			max-height:100%;
			max-width:100%:
		}
		.socmed{
			width:20%;
			height:6%;
			float:left;
			text-align:right;
		}
		.socmed img{
			height:100%;
			margin-left:4%;
		}
		.logo img{
			max-height:100%;
			max-width:100%;
		}
		.contentnya .left.area, .contentnya .right.area, .contentnya .center.area{
			float:left;
			width:30%;
			margin:1.1111%;
		}
		.contentnya .left.area, .contentnya .center.area, .contentnya .right.area{
			background-size:cover;
			background-position:center top; 
			background-repeat:no-repeat;
		}
		
		.contentnya{
			margin-top:50px;
			margin-bottom:50px;
			min-height:50%;
		}
		
		
		.contentnya .span{
			float:left;
			width:5%;
			height:70%;
		}
		.contentnya .area .tit{
			text-align:center;
			height:7%;
			background:#D7CFCD;
			color:#000;
			font-weight:700;
			padding-top:20px;
			
		}
		.contentnya .area .regis{
			text-align:center;
			color:#FE9F1A;
			font-weight:700;
			padding-top:20px;
			font-size:1.5em;
		}
		.contentnya .area .gambar{
			height:70%;
			text-align:center;
			overflow:hidden;
			cursor:pointer;
		}
		.contentnya .area .gambar img{
			width:100%;
			filter: grayscale(100%);
			
		}
		
		.area:hover  .tit{
			color:#F15F90;
			
		}
		.area:hover .regis{
			color:#353785;
			cursor:pointer;
			
		}
		.area:hover .regis a{
			color:#FFF;
			
		}
		.area:hover .gambar img{
			 filter: grayscale(0%);
		}
		.socmeds{
			margin-top:20px;
		}
		.socmeds img{
			width:30px;
			margin-right:10px;
			text-decoration:none;
		}
		.kolom3{
			float:left;
		}
		.lebar20{
			width:20%;	
		}
		.lebar30{
			width:30%;	
		}
		.lebar50{
			width:50%;
		}
		.footer{
			font-size:0.9em;
			color:#000;
			padding:20px; 
			padding-top:20px; 
			padding-bottom:20px;
			background:#FFF;
		}
		.contentnya .kanan{
			text-align:left;
		}
		.kanan{
			text-align:right;
		}
		.kanan .imgutama{
			width:100%;
		}
		.kanan .text{
			padding:50px;
			font-weight:300;
			text-align:left;
		}
		
		.linkset a img{
			filter:grayscale(100%) brightness(150%);
		}
		.linkset a img:hover{
			filter:grayscale(0%) brightness(100%);
		}
		a{
			text-decoration:none;
		}
		a img{
			text-decoration:none;
		}
		.videoWrapper {
		  position: relative;
		  padding-bottom: 56.25%; /* 16:9 */
		  height: 0;
		}
		.videoWrapper iframe {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}
		.pilih-bahasa{
			float:right;
		}
		.contentnya{
			
		}
		.contentnya .kiri{
			float:left;
			width:25%;
			min-height:80vh;
		}
		.contentnya .kanan{
			float:left;
			width:75%;
			min-height:80vh;
			background:#79A580;
			color:#FFF;
		}
		.contentnya .kiri.hitam{
			color:#000;
		}
		.contentnya .kanan.hitam{
			background:#000;
		}
		.contentnya .kanan .listcont .daftar{
			width:45%;
			margin-left:5%;
			margin-top:0;
			margin-bottom:0;
			float:left;
		}	
		.contentnya .kanan .listcont .daftar img{
			width:100%;
		}
		.contentnya .kanan .listcont .daftar .kateg{
			color:#EEAC4A;
			margin-top:1%;
			margin-bottom:1%;
		}
		.contentnya .kanan .listcont .daftar .judul{
			font-weight:700;
		}
		
		.contentnya .kanan .listcont .text{
			padding:20px;
			color:#FFF;
		}
		
		.menucont{
			color:#000;
			padding:20%;
		}
		.kiri.hitam .menucont{
			color:#000;
			padding:20%;
		}
		.menucont .day{
		}
		.menucont .day.active{
			color:#EEAC4A;
			font-size:2em;
		}
		.menucont a, .menucont a .day{
			text-decoration:none;
			color:#000;
		}
		.kiri.hitam .menucont a, .kiri.hitam .menucont a .day{
			text-decoration:none;
			color:#000;
		}
		.menucont .hari:hover a .day{
			font-size:1em;
		}
		.menucont  .hari a .day:hover{
			color:#EEAC4A;
			font-size:2em;
		}
		.menucont .subkateg{
			padding-top:30px;
			padding-bottom:20px;
			line-height:200%;
		}
		.menucont .subkateg li{
			margin-left:20px;
			/*text-transform:uppercase;*/
		}
		.menucont .subkateg li, .menucont .subkateg a, .menucont .subkateg:hover li.active, .menucont .subkateg:hover li.active a{
			color:#000;
			text-decoration:none;
		}
		.kiri.hitam .menucont .subkateg li, .kiri.hitam .menucont .subkateg a, .kiri.hitam .menucont .subkateg:hover li.active, .kiri.hitam .menucont .subkateg:hover li.active a{
			color:#000;
			text-decoration:none;
		}
		.menucont .subkateg li:hover, .menucont .subkateg li:hover a, .menucont .subkateg li.active:hover, .menucont .subkateg li.active:hover a, .menucont .subkateg li.active, .menucont .subkateg li.active a{
			color:#FFF;
			cursor:pointer;
		}
		.kiri.hitam .menucont .subkateg li:hover, .kiri.hitam .menucont .subkateg li:hover a, .kiri.hitam .menucont .subkateg li.active:hover, .kiri.hitam .menucont .subkateg li.active:hover a, .kiri.hitam .menucont .subkateg li.active, .kiri.hitam .menucont .subkateg li.active a{
			color:#FFF;
			cursor:pointer;
		}
		.menucont .date{
			padding-top:1vw;
			margin-top:1vw;
			border-top:1px solid #000;
		}
		.menucont .tit.pink{
			color:#EEAC4A;
			font-weight:500;
		}	
		.menucont .tit{
			padding-top:15px;
		}
		.menucont .bold{
			font-weight:700;
		}
		.btnregist{
			padding:1vh;
			background:#F5EFE8;
			color:#000;
			border:2px solid #000;
			border-bottom:3px solid #000;
			text-align:center;
			font-weight:700;
			margin-top:20px;
		}
		.btnregist:hover{
			cursor:pointer;
			background:#EEAC4A;
		}
		
		.carousel{
			height:100%;
		}
		.carousel-inner > .item > img,
		  .carousel-inner > .item > a > img {
			width: 100%;
			margin: auto;
		  }
		  .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
			width: 50px;
			height: 50px;
			margin-top: -30px;
			font-size: 50px;
		}
		.menu.full{
			width:100%;
			float:right;
			padding-top:10px;
			
		}
		.menu{
			width:40%;
			float:right;
			padding-top:10px;
			
		}
		
		.menu li, .menu:hover li, .menu:hover li.active{
			list-style-type:none;
			float:left;
			width:24%;
			margin-left:1%;
			background:#FFEED9;
			border:3px solid #000;
			border-bottom:5px solid #000;
			text-align:center;
			font-weight:700;
			padding-top:10px;
			padding-bottom:10px;
			color:#000;
		}
		.menu.hitam li, .menu.hitam:hover li, .menu.hitam:hover li.active{
			border:3px solid #000;
			border-bottom:5px solid #000;
			color:#000;
		}
		.menu li.cilikan{
			width:5%;
		}
		.menu li a, .menu li a:hover{
			color:#000;
			text-decoration:none
		}
		.menu li:hover, .menu li.active, .menu li.active:hover{
			background:#F47C95;
			cursor:pointer;
		}
		.kotakatas{
			padding-bottom:20px;
			background:#F6FFF9;
		}
		.butconts{
			padding:7px;
			color:#000;
			font-weight:400;
			border-radius:5px;
			border:none;
		}
		b, strong {
			font-weight: 500;
		}
		.desk{
			display:block;
		}
		.mob{
			display:none;
		}
		
		@keyframes zoominoutsinglefeatured {
					0% {
						transform: scale(1,1);
					}
					50% {
						transform: scale(0.9,0.9);
					}
					100% {
						transform: scale(1,1);
					}
				}

				.aktiv img {
					animation: zoominoutsinglefeatured 1s infinite ;
				}
				.aktivr {
					animation: zoominoutsinglefeatured 1s infinite ;
				}
		@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
			.desk{
				display:none;
			}
			.mob{
				display:block;
			}
			.menu{
				width:100%;
			}
			.menu li, .menu:hover li, .menu:hover li.active{
				list-style-type:none;
				float:none;
				margin:auto;
				width:90%;
				margin-bottom:10px;
			}
			.menu li.cilikan{
				width:90%;
			}
			.logo{
				width:100%;
				margin:auto;
				margin-bottom:20px;
				height:auto;
			}
			.logo2{
				width:100%;
				max-width:100%;
				margin:auto;
			}
			.logo img{
				max-width:300px;
			}
			.logo2 img{
				max-width:300px;
			}
			.footer{
				bottom:0;
				text-align:center;
				
			}
			.footer .kolom3{
				margin-bottom:20px;
				font-size:0.8em;
			}
			.footer .kanan{
				text-align:right;
			}
			.lebar20{
				width:100%;	
			}
			.lebar30{
				width:100%;
			}
			.lebar50{
				width:100%;
			}
			.contentnya{
				margin-top:20px;
				margin-bottom:20px;
			}
			.contentnya .left.area, .contentnya .right.area, .contentnya .center.area{
				width:100%;
			}
			.contentnya .area .gambar img{
				width:70%;
			}
			#cover, .cover{
				width:95%;
				margin:auto;
				margin-top:2%;
				margin-bottom:2%;
			}
			.footer .kanan{
				text-align:center;
			}
			.pilih-bahasa{
				float:none;
				text-align:center;
			}
			.contentnya .kiri{
				float:left;
				width:100%;
				min-height:10vh;
			}
			.contentnya .kanan{
				float:left;
				width:100%;
				min-height:10vh;
				
			}
			.menucont{
				padding:30px;
			}
			.menucont .subkateg{
				padding-top:20px;
				padding-bottom:20px;
			}
			ul{
				margin-bottom:0;
			}
			.contentnya .kanan .listcont .daftar {
				width: 100%;
				margin-left: 0%;
				margin-top: 0;
				margin-bottom: 3%;
				float: left;
			}
			.kanan .text{
				padding:20px;
			}	
		}