:root{
	--main-bg-1: #006135; /*hijau tua*/
	--main-bg-2: #D5EAD9; /*hijau muda*/
	--main-bg-3: #FCEF05; /*kuning*/
	--main-bg-4: #E60217; /*merah*/
	--main-bg-5: #032F1B; /*hijau sangat tua*/
}
html{
	scroll-behavior: smooth;
}
body{
	font-family:"Karla-Regular"; 
	font-size:14px; 
	margin:0; 
	padding:0;
	background: url(../img/ogimage.jpg) center no-repeat;
	background-size:cover;
	background-attachment:fixed;
}
#main-tambahan{
	min-height:80vh;
}
.main-segx{
	min-height:80vh; 
}
.inner-div{
	width:100%; 
	max-width:1100px;
	margin: 0 auto;
	background:lightyellowFF;
}
a.noeffect{
	text-decoration:none;
	color:#000;
}
#main-hat{
	min-height:94px; 
	max-height:94px; 
	clear:both; 
	background:rgba(213,234,217,0.9);
	border-bottom:6px solid #006135; 
	border-bottom:6px solid var(--main-bg-1);
	position:absolute;
	width:100%;
	transition: .7s;
	top:0;
}
#main-hat.hide{
	top:-94px;
	transition: .7s;
	}
#main-hat-toggle{
	font-family:poltekkes; 
	width:25px; 
	height:20px; 
	font-size:18px; 
	color:#FCEF05; 
	color:var(--main-bg-3); 
	background:#006135; 
	background:var(--main-bg-1);
	line-height:30px;
	text-align:center;
	padding:0 10px 4px 10px;
	border-top-left-radius:30px;
	border-top-right-radius:30px;
	top:74px; position:relative;
	margin:0 auto;
	cursor:pointer;
	transition: .2s;
  transition-delay: .5s;
 	transform-origin: bottom center;
	z-index:10;
	}
#main-hat.hide > #main-hat-toggle{
	transform: scaleY(-1);
 	transform-origin: bottom center;
}

#main-menu .inner-div{
	background:lightyellowFFF; 
	min-height:40px; 
	overflow:visible;
}

#main-toolbar{
	min-height:100px;
}
#main-toolbar,
#main-banner,
#main-menu,
#main-news{
	background:lightyellow;
}
#isi,
#main-tambahan{
	background:none;
	/*background:rgba(255,255,255,.1);*/
}
#main-kontak{
	background:#006135; 
	background:var(--main-bg-1);
}
#main-footer{
	background:#032F1B; 
	background:var(--main-bg-5);
}

#main-logo{
	background:url(../img/mark5.jpg) center bottom no-repeat; 
	min-height:90px; 
	max-width:100%;
	cursor:pointer;
	transition:.2s;
}
#main-logo:hover{
	transform:scale(1.1,1.1);
}
/*
#main-menu .inner-div{
	border-top:1px solid #006135;
	border-top:1px solid var(--main-bg-1);
}
*/

.news-item{
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	margin:15px 0 25px 0;
	clear:both;
	min-height:80px;
}
.news-title{
	font-weight:bold;
	font-size:18px;
	text-align:justify;
	color:#000;
}
.news-uploader,.news-time{
	display:table-cell; 
	padding:0px 10px 5px 0;
	color:#666;
	}
.news-uploader:after{content:', ';}
.news-img{
	position:relative;
	float:left;
	margin:5px 15px 5px 0;
	width:100vw;
	max-width:240px;
	height:75vw;
	max-height:180px;
	clear:both;
}
.news-img-kecil{
	margin-top:0;
	width:100px;
	max-width:100px;
	height:75px;
	max-height:75px;
}
.news-img,
.news-img-kecil{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.news-content,.news-content *{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.7em;
	clear:both;
}
.news-content p{margin:0; text-align:justify;}
.news-share{
	min-height:35px;
	display:flex;
	justify-content:right;
	padding:5px 0;
	width:100%;
}
.btn-lanjut{
	cursor:pointer;
	color:#993333;
}
.btn-lanjut a{
	color:#993333;
	text-decoration:none;
}
.btn-lanjut:after{
	font-family:poltekkes;
	content:'F';
	margin-left:5px;
}

.skedul-item{
	display:flex;
	margin: 5px 0;
}
.skedul-waktu{
	display:block;
	position:relative;
	min-height:50px;
	min-width:50px;
	max-height:50px;
	max-width:50px;
	background:#006135;
	background:var(--main-bg-1);
	margin:5px;
	padding:2px;
	color:lightyellow;
	border-radius:5px;
}
.skedul-waktu>div{
	text-align:center;
}
.skedul-tgl{
	font-size:25px;
	line-height:25px;
	background:lightyellow;
	border-radius:2px;
	margin:0 2px;
	color:#006135;
	color:var(--main-bg-1);
	
}
.skedul-ket{
	padding:5px;
}

.main-link{
	min-height:40px;
	border:1px solid red;
	margin:5px 0;
	width:100%;
}
.sep-ver{
	flex-grow:10;
}
.sep{
	min-height:30px;
	width:100%;
	display:block;
	background:url(../img/sep2.jpg) center no-repeat;
	background-size:contain;
	border-top:20px solid lightyellow;
	border-bottom:20px solid lightyellow;
}
.skedul-item a{
	color:#000;
	text-decoration:none;
}
.label{
	display:inline-block; 
	min-width:90px;
	color:#999999;
	font-size:0.9em;
	line-height:1.4em;
}

.admin-aksi{
	min-width:100%;
	clear:both;
	display:flex;
	justify-content:right;
	border-bottom:1px solid #CCC;
}


#cat-gal-vid{
	min-width:216px;
}
.vid-item,
.img-item{
	position:relative;
	float:left;
	margin:5px 15px 5px 0;
	width:75vw;
	max-width:216px;
	height:75vw;
	max-height:180px;
	border:1px solid red;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	background-color:#000;
	display:flex;
	flex-wrap:wrap;
	align-content:end;
	overflow:hidden;
	cursor:pointer;
}
.vid-desc{
	color:lightyellow;
	width:100%;
	padding:10px 2px;
	background:rgba(0,0,0,0.5);
	position:relative;
	top:100%;
	transition:0.5s;
}
.vid-item:hover .vid-desc,
.img-item:hover .vid-desc{
	top:0;
}

.img-item{
	position:relative;
	float:left;
	margin:5px 15px 5px 0;
	width:75vw;
	max-width:216px;
	height:75vw;
	max-height:180px;
	border:1px solid red;
}


#main-news-seg,
#main-gal-seg{
	display:flex;
	padding:10px;
	flex-wrap:wrap;
	align-items:start;
	justify-content:space-around;
}
#main-news-seg > div,
#main-gal-seg > div{
	margin:10px;
}
#cat-news-seg,
#cat-gal-img{
	width:700px;
	max-width:100%;
	flex:3 1 auto;
}
#cat-skedul-seg{
	width:340px;
	flex:3 1 auto;
	align-self:stretch;
	flex-direction:column;
	display:flex;
}
#cat-gal-vid{
	width:140px;
	flex:3 1 auto;
}
.cat-title{
	font-size:25px;
	border-bottom:2px solid #006135;
	color:#006135;
	font-weight:bold;
	margin-bottom:10px;
	line-height:34px;
}
.cat-title > span{
	padding-right:25px;
	border-bottom:5px solid #E60217;
}

#modal{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:block;
	z-index:32001;
	background:#000;
	visibility:hidden;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:center;
}

.link-nav{
	padding:5px 15px;
	margin:3px 10px;
	border:1px solid #993333;
	line-height:20px;
	text-decoration:none;
	color:#993333;
	cursor:pointer;
}
.link-nav:hover{
 background:#933;
 color:lightyellow;
}
#nav-prev:before,
#nav-next:after{
	font-family:poltekkes;
	transition:0.5s;	
}
#nav-prev:before{
	content:'D';
	text-align:left;
	padding-right:5px;
}
#nav-next:after{
	content:'B';
	text-align:right;
	padding-left:5px;
}
.full-line{
	width:100%;
}
.info-content{
	padding:15px 10px;
	width:100%;
	text-align:center;
}
.btn-group{
	display:flex;
	flex-wrap:wrap;
	padding:15px 10px;
	justify-content:center;
}
.btn{
	display:inline-block;
	padding:5px 10px;
	font-weight:bold;
	cursor:pointer;
	margin:10px;
}
.btn:hover{
	text-decoration:underline;
}
.btn-hijau{
	color:lightyellow;
	background:#006135;
}
.btn-merah{
	color:lightyellow;
	background:#E60217;
}
@media screen and (max-width:350px){
	.link-nav{display:block;}
}
@media screen and (max-width:475px){
	#main-logo{
		background-size:contain;
		min-height:40px; 
		border-top:30px solid lightyellow;
	}
}
@media screen and (max-width:500px){
	.news-img{
		max-width:calc(100%);
	}
	.img-item,.gal-btn{
		width:calc(100%);
		max-width:calc(100%);
	}
	.vid-item{
		width:100%;
		max-width:100%;
	}
}

@media screen and (min-width:710px){
#main-menu-ul {
	position:relative; 
	background:lightyellow; 
	display:flex; 
	flex-wrap:wrap; 
	flex-basis:content;
	flex-direction:row; 
	align-items:center;
	list-style:none; 
	padding:0; 
	line-height:1;
	margin:0 auto;
	visibility:visible;
	top:0px;
	z-index:900;

}

#main-menu-ul ul{
	background:rgba(150,9,15,0.7); 
	position:absolute; 
	padding:0;
	min-width:200px;
	max-width:200px;
	visibility:hidden;
}

#main-menu-ul ul ul{
	background:rgba(150,9,15,0.7); 
	position:absolute; 
	padding:0;
	margin-left:199px;
	margin-top:-40px;
	visibility:hidden;
}

#main-menu-ul * {list-style:none; text-decoration:none;}
#main-menu-ul a {
	display:table-cell;
	height:50px;
	vertical-align:middle;
	padding:0 20px 0 40px;
	color:#006135;
	color:var(--main-bg-1);
}
#main-menu-ul >li > a {
	padding:0 25px 0 15px;
	white-space:nowrap;
}

#main-menu-ul > li{ max-height:50px;  overflow:hidden; max-width:140px;}
#main-menu-ul ul > li{ max-height:50px; overflow:hidden;max-width:350px;}
.main-menu-hover,
#main-menu-ul > li:hover,
#main-menu-ul ul > li:hover{
	overflow:visible;
	background:#CC3300;
}
.main-menu-hover a,
#main-menu-ul li:hover a{color:lightyellow;}
#main-menu-ul li:hover>ul{visibility:visible;}

#main-menu-ul .has-child0:after{
	content:'\0043';
	font-family:poltekkes;
	position:relative;
	float:right;
	right:-4px;
	font-size:10px;
	line-height:1.4;
	overflow:visible;
	width:0px;
}
#main-menu-ul .has-child1{
	background-image:url(../img/rdir.png);
	width:134px;
	background-repeat:no-repeat;
	background-position:center right;
}
}

@media screen and (max-width:710px){
	#main-menu-toggle:before{
		font-family:poltekkes;
		content:'\00a2';
		line-height:40px;
		font-size:30px;
		background:#006135;
		background-color:var(--main-bg-1);
		color:lightyellow;
		display:block;
		height:40px;
		width:40px;
		border-radius:5px;
		margin:0 5px 0 10px;
		padding:0 0 0 8px;
		border:2px solid #DDD;
	}
	#main-menu .inner-div{
		background-color:#DDD;
	}
	#main-menu-ul {
		visibility:hidden;
		background:rgba(150,9,15,0.8);
		position:fixed; 
		padding:10px;
		margin:0 auto;
		width:calc(100vw - 20px);
		max-width:calc(100vw - 20px);
		height:calc(100vh - 20px);
		max-height:calc(100vh - 20px);
		overflow-y:scroll;
		overflow-x:hidden;
		
		top:-100vh;
		transition: .3s;
		z-index:999;
	}
	#main-menu-ul:before{
		content:'MENU';
		display:table-cell;
		text-align:center;
		border-bottom:2px solid lightyellow;
		font-size:18px;
		font-weight:bold;
		line-height:50px;
		color:lightyellow;
		background:none;
		height:50px;
		width:100vw;
		position:relative;
		float:left;
		top:-10px;
		left:-10px;
		z-index:999;
	}
	#main-menu-ul:after{
		font-family:"poltekkes";
		content:'\0051';
		font-size:20px;
		display:table-cell;
		text-align:center;
		vertical-align:middle;
		line-height:30px;
		color:lightyellow;
		background:rgba(150,9,15,1);
		border-radius:25px;
		height:30px;
		width:30px;
		position:fixed;
		top:10px;;
		left:calc(100vw - 50px);
		z-index:9999;
		cursor:pointer;
	}
	#main-menu-ul,#main-menu-ul ul {
		list-style:none;
	}
	#main-menu-ul a{
		display:block;
		color:lightyellow;
		padding:10px 10px 10px 14px;
		text-decoration:none;
	}
}
	
.not-found{
	width:calc(100% - 40px);
	text-align:center;
	display:block;
	clear:both;
	padding:20px 0;
	border:20px solid lightyellow;
	font-style:italic;
	background:#EEE;
}

	.share-copy{
		margin-right:25px;
	}
	.news-content{
		line-height:2em;
	}
	.share-copy.copy:before{
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		content:'url terkopi';
		display:inline-block;
		position:relative;
		float:left;
		clear:none;
		padding:5px;
		color:lightyellow;
		background:#333;
		top:-5px;
		animation:shownta 1s 0.5s;
		opacity:1;
	}
	@keyframes shownta{
		from{opacity:1;}
		to{opacity:0;}
	}
	.share-item{
		font-family:poltekkes;
		font-size:40px;
		color:#000;
		text-decoration:none;
	}
	.share-item:hover:not(.share-copy){
		transform:scale(1.2,1.2);
	}
	.share-tw{color:#00ACED;}
	.share-fb{color:#3A559F;}
	.share-wa{color:#48C857;}

#main-banner{
	overflow:hidden;
}
#banner{
	width:100%;
	height:80%;
	min-width:100%;
	min-height:80vh;
	max-height:80vh;
	display:block;
	overflow:hidden;
}
.banner-img{
	display:inline-table;
	width:100vw;
	height:80vh;
	min-width:100vw;
	max-width:100vw;
	min-height:80vh;
	margin:0;
}
#banner-handle{
  position: relative;
	animation-name:slidebanner;
	animation-delay:0s;
	animation-iteration-count:infinite;
	z-index:0;
	background:lightyellow;
}
#div-motto{
	font-size:40px;
	text-align:center;
	padding:120px 0;
	border-bottom:40px solid lightyellow;
	background:#EEE;
}
#div-motto:before,
#div-motto:after
{
	font-family:poltekkes;
	font-size:50px;
	clear:both;
}
#div-motto:before{
	content:'\0070';
}
#div-motto:after{
	content:'\0071';
}
#page-nav{
	font-family:poltekkes;
	font-size:40px;
	position:fixed;
	bottom:5px;
	right:5px;
	border-radius:35px;
	z-index:999;
	background:rgba(0,0,0,.3);
	width:42px;
	height:42px;
	color:#FCEF05;
	padding:5px;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	visibility:hidden;
}
#loader{
	display:flex;
	position:fixed;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,.8);
	top:0;
	left:0;
	z-index:999;
	justify-content:center;
	align-items:center;
	visibility:hidden;
}
#loader>div{
	text-align:center;
	color:lightyellow;
	animation:mymove 1s infinite;
}
#loader>div:before{
	position:relative;
	display:block;
	content:'\0021';
	font-family:poltekkes;
	text-align:center;
	color:lightyellow;
	vertical-align:middle;
	font-size:200px;
	animation:mymove 1s infinite;
}
@keyframes mymove{
  0%   {color: red;}
  25%  {color: white;}
  50%  {color: red;}
  75%  {color: red;}
  100% {color	: white;}
}
#alert{
	display:flex;
	position:fixed;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,.8);
	top:0;
	left:0;
	z-index:999;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	visibility:hidden;
}
#alert>#content{
	max-width:100vw;
	max-height:100vh;
	background:rgba(230,2,23,.8);
	padding:25px;
	color:lightyellow;
	position:relative;
	border-radius:15px;
	text-align:center;
}
#alert.geleng{
	visibility:visible;
}
#alert.geleng > #content,
#alert.geleng > #close
{
	animation:geleng 0.2s 0.5s 2;
}
#alert #close{
	position:relative;
	font-family:poltekkes;
	background:lightyellow;
	border-radius:20px;
	color:#FF0000;
	top:10px;
	cursor:pointer;
	display:block;
	padding:1px;
	font-size:20px;
	z-index:1;
}
@keyframes geleng{
	0%	{margin:0px 0px 0 0;}
	25%	{margin:0px 20px 0 0;}
	50%	{margin:0px 0px 0 0;}
	72%	{margin:0px 0 0 20px;}
	100%{margin:0px 0px 0 0;}
}
#alert .geleng{
	visibility:visible;
}
/*font face*/
	
@font-face {
  font-family: "poltekkes";
  src: url("fonts/poltekkes2.eot"); /* IE9 Compat Modes */
  src: url("fonts/poltekkes2d41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/poltekkes2.html") format("opentype"), /* Open Type Font */
    url("fonts/poltekkes2.svg") format("svg"), /* Legacy iOS */
    url("fonts/poltekkes2.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/poltekkes2.woff") format("woff"), /* Modern Browsers */
    url("fonts/poltekkes2-2.html") format("woff2"); /* Modern Browsers */
  font-style: normal;
  font-weight: 100;
  font-display: block;
}
	
@font-face {
  font-family: "Karla-Regular";
  src: url("fonts/Karla-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Karla-Regulard41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Karla-Regular.html") format("opentype"), /* Open Type Font */
    url("fonts/Karla-Regular.svg") format("svg"), /* Legacy iOS */
    url("fonts/Karla-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Karla-Regular.woff") format("woff"), /* Modern Browsers */
    url("fonts/Karla-Regular-2.html") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Karla-Bold";
  src: url("fonts/Karla-Bold.eot"); /* IE9 Compat Modes */
  src: url("fonts/Karla-Boldd41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Karla-Bold.html") format("opentype"), /* Open Type Font */
    url("fonts/Karla-Bold.svg") format("svg"), /* Legacy iOS */
    url("fonts/Karla-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Karla-Bold.woff") format("woff"), /* Modern Browsers */
    url("fonts/Karla-Bold-2.html") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Karla-Italic";
  src: url("fonts/Karla-Italic.eot"); /* IE9 Compat Modes */
  src: url("fonts/Karla-Italicd41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Karla-Italic.html") format("opentype"), /* Open Type Font */
    url("fonts/Karla-Italic.svg") format("svg"), /* Legacy iOS */
    url("fonts/Karla-Italic.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Karla-Italic.woff") format("woff"), /* Modern Browsers */
    url("fonts/Karla-Italic-2.html") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Karla-BoldItalic";
  src: url("fonts/Karla-BoldItalic.eot"); /* IE9 Compat Modes */
  src: url("fonts/Karla-BoldItalicd41d.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Karla-BoldItalic.html") format("opentype"), /* Open Type Font */
    url("fonts/Karla-BoldItalic.svg") format("svg"), /* Legacy iOS */
    url("fonts/Karla-BoldItalic.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Karla-BoldItalic.woff") format("woff"), /* Modern Browsers */
    url("fonts/Karla-BoldItalic-2.html") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}