@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Dosis:500);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@charset "UTF-8";
/* Base Styles */
body { overflow-x: hidden; overflow-y: auto; max-width:980px; min-width:300px; margin:20px auto; background-attachment: fixed; background-position: top center; font-family:Open Sans,Calibri,Arial; font-size:14px;
}

a { text-decoration:none; color:#C30}
a:hover { color:#036 }
.blue {color:#069; }
header { width:100%; max-width:980px; height:14vw; min-height:85px; 

/*background-image: url(../images/header.jpg);
background-repeat:repeat-x;
background-size:contain;*/
font-family:Dosis,Calibri,Arial;
position:relative;
z-index:-99;
border-bottom:5px solid #333;
}
header .logo { float:left; margin:1.5% 2.5% auto 3%; width:10.5vw; height:10.5vw; min-width:55px; min-height:55px; }
header .text { float:left; margin:1.5% 2.5% auto 1%; width:65%; height:auto; min-width:190px; min-height:50px; z-index:999; text-shadow: 1px 0px 10px rgba(0, 0, 0, 0.47); }
header h1 { margin:0px; font-size:2.2vw;  
font-family:Oswald; color:#ff0;
}
header p {margin:0px; font-size:1.3vw; z-index:9999; 
}
.content-left { margin-right:20px; font-size:13px }
.foto-header { float:right; }
.foto-header img { float:right; position:absolute; top:0px; right:0px; z-index:-9; width:25vw; height:18vw;   min-height:50px; -webkit-border-radius:0px 3px 3px 180px; -moz-border-radius:0px 3px 3px 180px; border-radius:0px 3px 3px 190px; max-height:180px;
 }
.fotokepsek { max-width:100px; max-height:140px; float:left; margin:0px 10px 10px 0px; padding:3px; border:1px solid #EAEAEA } 
#teksjalan { width:100%; max-width:980px; min-height:23px; margin-top:3px; 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
background:#fff;
 }
#teksjalan table { margin:3px 10px 3px 10px; width:98%; font-family:Calibri, Arial; font-size:14px }
#wrapper { width:100%; max-width:980px; margin-right:2px; height:auto; overflow:hidden; margin-top:3px; padding-top:10px; 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
background:#fff;
color:#333;
 }
footer { width:100%; max-width:980px; height:80px;
overflow:hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius:3px;
/*background:#fff url(../images/header.jpg);
background-repeat:repeat-x;*/
margin-bottom:5px;
border-bottom:5px solid #333;
}
.konten-kanan { max-width:620px; width:96%; height:auto; margin:0px 0px 10px 10px; float:left; overflow:hidden }
.batas{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.blok-berita { border-bottom:1px solid #EAEAEA; margin-bottom:5px }
.blok-berita h4 { margin:0px 5px 0px 0px; }
.blok-berita p { margin-top:0px; font-size:12px; text-align:justify }
.blok-berita img { float:left; margin:0px 10px 5px 0px; }
.imgborder { padding:3px; border:1px solid #EAEAEA }
h3 { border-bottom:1px solid #EAEAEA; margin:0px 10px 10px 0px; font-family:Oswald, Open Sans; color:#333 }
h4 { font-family:Dosis,Calibri; }
.more { text-align:right; margin:-10px 0px 10px 10px; font-size:11px }
.other { text-align:right; margin:-10px 10px 10px 10px; font-weight:bold; font-family:Dosis,Calibri; font-size:12px }
.datecat { font-size:11px; margin:2px 10px 4px 0px }
.search { width:250px; padding:3px }
.blok-bawah { width:311px; min-height:150px; border-right:1px solid #EAEAEA; margin:0px 0px 10px 10px; float:left }
.banner-right { max-width:310px; width:99%; padding:3px; border:1px solid #EAEAEA; }
.list { list-style:url(../images/down_right-16.png); background:none; font-family:Open Sans; font-size:12px; margin-right:10px; padding-left:20px; }
.list li a { font-family:Open Sans; font-size:12px; font-weight:bold; }
footer { font-size:12px; }
.copyright { text-align:center; padding:10px; margin-bottom:0px }
.copyright a { color:#FFF }
.berita-home { max-width:410px; height:auto; overflow:hidden; margin:0px 10px 10px 0px; float:left }
.home-kiri { width:320px; height:auto; overflow:hidden; margin:0px 10px 10px 10px; float:left }
.calendar { width:188px; height:auto; overflow:hidden; float:left; border-right:1px solid #EAEAEA; margin-right:10px }
table { border-collapse:collapse; max-width:97% }
table tr td { border:1px solid #d9d9d9; vertical-align:top }
.agendax { display:none; }
.loginform { margin-bottom:25px;  }
.loginform input { width:90%; border:1px solid #ccc; padding:4px; margin-bottom:4px; }
.loginform select { width:60% border:1px solid #ccc; padding:4px; margin-bottom:4px; }
.loginform .submit { width:auto; padding:3px }
.filter-ctg .fil { width:60% border:1px solid #ccc; padding:3px; margin-bottom:4px; }
.filter-ctg .submit { border:1px solid #ccc; padding:3px; margin-bottom:4px; }
#teksjalan table tr td { border:none }
#teksjalan { padding:1px }
.kalender tr td:hover { background:#FF9; font-weight:bold }
.paging { margin:15px;}
.paging span { padding-left:7px; padding-right:7px; border:1px solid #d9d9d9; border-radius:2px; margin-right:1px; font-family:Dosis }
.detailkonten { max-width:655px; height:auto; overflow:hidden; margin:0px 10px 10px 0px; float:left; padding-left:10px; padding-right:30px; }
table.noborder { border:none; } 
table.noborder tr td { border:none; padding:5px; vertical-align:top }
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  position: relative;
}
.frm-strorg { width:680px; height:1200px; border:1px solid #d9d9d9 }
#cssmenu ul li ul li { line-height:2; }
#cssmenu a {
  line-height: 1.5;
}
#cssmenu ul li ul li a:hover { font-weight:bold }
#cssmenu {
  width: 100%;
  background: none;
}
#cssmenu > ul {
  border: 1px solid #000000;
  -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul:after {
  clear: both;
  content: '';
  display: table;
}


.search { border:1px solid #d9d9d9; }
.submit { padding:2px; border:1px solid #d9d9d9; background:#EAEAEA; cursor:pointer;  }

<!-- Share -->
.share {
border-bottom: 1px dotted #999;
border: 1px dotted #999;
font-family: Oswald, Arial, sans-serif;
font-size: 16px;
line-height: 1.8em;
position: relative;
text-transform: uppercase;
margin: 20px 0;
padding: 3px 0 4px;
overflow:hidden;
width:auto;
}
.share a {
color: #fff;
font-size: 14px;
margin-right: 10px;
text-align: center;
text-transform: none;
}
.share a:hover {
color: #fff;
}
.share_facebook {
background: #0182c4;
padding: 3px 13px;
float:left;
margin-bottom:5px;
}
.share_facebook:hover {
background: #01689d;
float:left;
margin-bottom:5px;
}
.share_google {
background: #d44132;
padding: 3px 17px;
float:left;
margin-bottom:5px;
}
.share_google:hover {
background: #aa3428;
float:left;
margin-bottom:5px;
}
.share_twitter {
background: #20b8ff;
padding: 3px 19px;
float:left;
margin-bottom:5px;
width:50px
}
.share_twitter:hover {
background: #1a93cc;
float:left;
margin-bottom:5px;
}
.lintas{background:#f7c56c; padding: 3px 12px;
 float:left; margin-bottom:5px; width:65px; }
.lintas:hover { background:#F93} 
.detail p { font-size:13px }

@media all and (max-width: 1000px) {
body { margin: 0 auto; }
	marquee { width:98% }
	.konten-kanan { max-width:none; width:98% }
	.content-left { width:98%; max-width:none }
	.berita-home { width:75%; max-width:none }
  #cssmenu > ul {
    max-height: 32px;
    overflow: hidden;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
  #cssmenu.expand ul {
    max-height: 900px;
  }

}
#cssmenu > ul > li {
  border-right: 1px solid #000000;
  -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
  float: left;
}
#cssmenu > ul > li.mobile {
  display: none;
}
#cssmenu > ul > li.active {
  background: #444444;
  background: -moz-linear-gradient(#444444 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#444444 0%, #323232 100%);
  background: linear-gradient(#444444 0%, #323232 100%);
}
@media all and (max-width: 1000px) {
.frm-strorg { width:98%; height:900px;}
.detail img { max-width:97%; height:auto }	
.detailkonten { width:80%; }
  #cssmenu > ul > li {
    border-right: 0 none;
    -moz-box-shadow: 0 0 0 transparent;
    -webkit-box-shadow: 0 0 0 transparent;
    box-shadow: 0 0 0 transparent;
    display: block;
    float: none;
  }
  #cssmenu > ul > li.mobile {
    display: block;
  }
  #cssmenu > ul > li.mobile i {
    float: right;
    font-style: normal;
  }
  .home-kiri { width:95% }
  .loginform br { display:none }
  .youtube { width:65%; height:40vw }
}
#cssmenu > ul > li:last-child {
  border-right: 0 none;
  -moz-box-shadow: 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
#cssmenu > ul > li:last-child ul {
  left: auto;
  right: 0;
}
#cssmenu > ul > li.mobile {
  border-right: 0 none;
  -moz-box-shadow: 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
  margin: 0 0 2px 0;
  font-size: 12px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
  display: block;
  padding: 6px 10px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
  text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
  background: #f9f9f9;
  border: 1px solid #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  padding: 5px 12px;
  display: none;
  position: absolute;
  top: 33px;
  left: 0;
  width: 200px;
  z-index: 1;
}

@media all and (max-width: 960px) {
.detailkonten { width:65%; }	
  #cssmenu ul ul {
    position: relative;
    top: 0;
    width: 100%;
  }
.blok-kiri { max-width:none; width:99%; }
}
@media all and (max-width: 900px) {
.detailkonten { width:60%; }	
.berita-home { width:70%; max-width:none }	
}
@media all and (max-width: 800px) {
.detailkonten { width:55%; }	
.berita-home { width:60%; max-width:none }	
}
@media all and (max-width: 700px) {
.detailkonten { width:50%; }	
.berita-home { width:55%; max-width:none }	
}
@media all and (max-width: 600px) {
.detail img { max-width:97%; height:auto }	
.blok-bawah { max-width:350px; }
.calendar { display:none }
.agendax { display:block; width:90%; }	
.detailkonten { width:87%; }
.berita-home { width:30%; max-width:none }	
header h1 {font-size:12px; }
header p { font-size:8px; 
}
.foto-header { display:none }
.search { width:200px;
}

#cssmenu ul ul li {
  padding: 3px 0;
}
#cssmenu ul ul a {
  color: #666666;
  display: block;
  font-size: 12px;
  font-weight: bold;
}
#cssmenu ul ul a:hover {
  color: #C30;
}
.copyright { padding:3px; }
iframe { max-width:280px; }
.berita-home { width:98%; max-width:none; }
.youtube { width:97%; min-height:200px }
.blok-bawah{ width:97%; overflow:hidden }
.banner-right { width:95% }
.loginform { margin-bottom:25px;  }
.loginform input { width:90%; border:1px solid #ccc; padding:4px; margin-bottom:4px; }
.loginform select { width:60% border:1px solid #ccc; padding:5px; margin-bottom:4px; }
.loginform .submit { width:auto }
.loginform br { display:block }
}
/* EFEK GAMBAR */
.blur{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
	filter: blur(5px);
}
.hitamputih {
	 -webkit-filter: grayscale(100%);
	 -moz-filter: grayscale(100%);
	 -o-filter: grayscale(100%);
	 -ms-filter: grayscale(100%);
	 filter: grayscale(100%);
}
.sepia{
	-webkit-filter: sepia(100%);
	-moz-filter: sepia(100%);
	-o-filter: sepia(100%);
	-ms-filter: sepia(100%);
	filter: sepia(100%);
}
.bright {
	 -webkit-filter: brightness(150%);
	 -moz-filter: brightness(150%);
	 -o-filter: brightness(150%);
	 -ms-filter: brightness(150%);
	 filter: brightness(150%);
}
.saturasi{
	 -webkit-filter: saturate(50%);
	 -moz-filter: saturate(50%);
	 -o-filter: saturate(50%);
	 -ms-filter: saturate(50%);
	 filter: saturate(50%);
}
.kontras{
	-webkit-filter: contrast(180%);
	-moz-filter: contrast(180%);
	-o-filter: contrast(180%);
	-ms-filter: contrast(180%);
	filter: contrast(180%);
}
.negatif{
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	-ms-filter: invert(100%);
	filter: invert(100%);
}
img:hover {

	 -webkit-filter: brightness(145%);
	 -moz-filter: brightness(145%);
	 -o-filter: brightness(145%);
	 -ms-filter: brightness(145%);
	 filter: brightness(145%);
	-webkit-filter: contrast(120%);
	-moz-filter: contrast(120%);
	-o-filter: contrast(120%);
	-ms-filter: contrast(120%);
	filter: contrast(120%);
	border:1px solid #CCC;
	border-radius:20px;
}
.mengetik
{
	width: 740px;
	white-space:nowrap;
	overflow:hidden;
	-webkit-animation: ketik 5s steps(50, end);
	animation: ketik 5s steps(50, end);
}

@keyframes ketik{
		from { width: 0; }
}

@-webkit-keyframes ketik{
		from { width: 0; }
}