/* banggaS*/

html,body{font-family: 'Roboto', sans-serif;background:#fff;color:#333;}
html{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}
p,h1,h2,h3,h4{margin:0.25em auto;clear:both;}

/* part */
#frame{margin:0px auto;max-width:1400px;min-height:100vh;overflow-y:auto;}
#kanvas{clear:both;display:block;margin:0px;min-height:90vh;}
#futer{width:100%;clear:both;display:block;margin:0px;auto;border-top:0.5px solid #666;height:10vh;padding:0.75em;bottom:0px;overflow:hidden;font-size:10pt;}
#futer a{text-decoration:none;color:#111;}
.padding{padding:0.5em;} .padding1{padding:1em;} .margin{margin:1em auto;}
.nam,.half,.pertiga,.perempat{float:left;margin:0px;padding:0px;display:inline-block;overflow:auto;}
.whole{width:100%;clear:both;margin:0px auto;}.half{width:50%;}.nam{width:66.666%;}.pertiga{width:32.666%;}.perempat{width:25%;}.perdelapan{width:11%;}
.fixed{position:fixed;overflow:hidden;right:0;width:100%;}
.noscroll{max-height:100vh;overflow:hidden;}
.border{border:1px solid #666;}.border-top{border-top:1px solid #666}.border-left{border-left:1px solid #666}.border-right{border-right:1px solid #666}.border-bottom{border-bottom:1px solid #666}.noborder{border:0;}
.bayang, .klik:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.hover{cursor:pointer;text-decoration:none;}
.hover:hover,.opaci{opacity:0.45;}. .noopaci{opacity:1.0;}
.caption{-webkit-transition: all 0.5s ease-in-out;background-image: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,1), rgba(255,255,255,0));position:absolute;bottom:1em;left:1.5em;margin-right:1em;padding:0.5em 2em;font-size:13pt;color:#FFF;opacity:1.0;}
.cap{min-height:100vh;margin:0;background-image:url('cover.jpg');background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-opacity:0.85;}
.frames{display:inline-block;float:left;width:256px;height:256px;overflow:hidden;margin-right:1em;}
.frames img{display:block;height:100%;width:auto;overflow:hidden;text-align:center;}
.paragraf{display:inline-block;margin-right:0.5em;}
.artikelist{display:block;width:100%;clear:both;margin:1em;padding:1em;overflow:hidden;height:256px;position: relative;}
.artikelist h3{color:#FF9900;margin-top:0px;margin-right:1em;display:inline-block;}
.paragraf{width:66.666%;display:inline-block;float:left;overflow:auto;color:#333;margin:0px;margin-right:1em;}
.selengkapnya{width:100%;height:64px;position:absolute;bottom:0px;padding:2em 0.25em 0.25em 0px;color:#CC3300;opacity:1.0;cursor:pointer;font-weight:bold;text-align:center;background-image:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,1));}
.even{background:#fff;color:#444;}
.odd{background:#efefef;color:#222;}

.mendatarkanvas{width:100%;text-align:center;position:absotute;margin:0;left:0px;display:flex;overflow-y:hidden;overflow-x:auto;}
.mendatar{color:#666;float:left;padding:1.25em 1.75em;display:inline-block;cursor:pointer;border-bottom:2px solid transparent;}
.mendatar img{height:96px;width:auto;overflow:hidden;opacity: 0.55;}
.mendatar p{font-size:12pt;text-align:center;white-space:nowrap;overflow:hidden;margin-top:1em;}
.mendatar:hover{color:#111;border-bottom:2px solid #336633;}
.mendatar:hover img{opacity:1;}


 /*menu*/
menu,#navigasi{cursor:pointer;color:#fff;font-weight:bold;text-align:center;margin:0;padding:1em;}
#navigasi{position:fixed;top:4em;right:0;background:#333;padding:1em;z-index:55;}
#menu{position:fixed;top:7em;right:0;z-index:55;}
.menu,.menund,.drop{display:block;clear:both;font-size:12pt;margin:1em auto;padding:0.25em;}
.selected, .menu:hover,.menund:hover,.drop:hover{cursor:pointer;color:#111;background-color:#f5f5f5;}
.submenu{display:none;list-style-type:none;width:auto;}
.submenu li{margin:1em auto;cursor:pointer;}

#nav{position:fixed;z-index:50;width:100%;margin:0;top:0;}
#menubar{font-size:16pt;margin:1em;display:none;color:#fff;}
.menuho{display:inline-block;font-size:15pt;margin:1em;display:float:right;color:#fff;text-shadow: 1px 1px 2px #aaa;}
.menuho:hover{color:#efefef;cursor:pointer;}
.menuhosel{text-shadow: 2px 2px 2px #555;}
.navscroll{background:#333;opacity:0.85;}

.barmenu{cursor:pointer;position:fixed;top:1em;right:1em;top:36px;z-index:100;}
.bar1, .bar2, .bar3 {box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 11px 0 rgba(0, 0, 0, 0.19);width:30px;height:4px;background-color:#fff;margin:6px 6px;transition: 0.4s;}
.change .bar1 {transform:translate(0, 10px) rotate(-45deg);}
.change .bar2 {opacity:0;}
.change .bar3 {transform:translate(0, -10px) rotate(45deg);}


/* pop */
#black{color:#fff;background:rgba(0, 0, 0, 1.0);display:block;position:fixed;top:0;height:100%;width:100%;z-index:50;overflow:hidden;margin:0;}
#blank{background:rgba(51, 51, 51, 0.35);display:none;position:fixed;top:0;left:0;height:100%;width:100%;z-index:50;overflow:hidden;margin:0;}
#proses{background:rgba(51, 51, 51, 0.75);display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:60;overflow:hidden;margin:0;font-size:64px;}
.popup{width:640px;background:#fff;padding:1em;z-index:51;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
.popsq{width:520px;max-height:75vh;background:#fff;padding:0px;z-index:53;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.spin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;color:#fff;}
#alert{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;}
#close{clear:both;cursor:pointer;position:absolute;z-index:52;padding:0.25em;font-weight:bold;top:-1em;right:0.35em;border-radius:50%;width:1.75em;height:1.75em;line-height:1.75em;vertical-align: middle;text-align:center;font-size:16pt;background-color:#fff;border:3px #111 solid;color:#111;}
#close2{clear:both;cursor:pointer;position:absolute;z-index:54;padding:0.25em;font-weight:bold;top:-1em;right:0.35em;border-radius:50%;width:1.75em;height:1.75em;line-height:1.75em;vertical-align: middle;text-align:center;font-size:16pt;background-color:#ccc;border:3px #333 solid;color:#333;}
#close:hover,#close2:hover{border:3px #f30 solid;color:#f30;}
.result{position:absolute;z-index:55;left:50%;top:50%;padding:1em;background-color:#14c0d6;color:#fff;display:block;width:auto;}
.absolute{position:absolute;top:50%;left:50%;z-index:55;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}

/* form */
.klik{padding:0.5em;min-width:7.5em;letter-spacing:1.5px;cursor:pointer;display:inline-block;text-align:center;border:1px solid transparent;margin:1em auto;}
.klik:hover{opacity:0.45;color:#000;}
input,select{padding:0.75em;border:1px solid #aaa;}
.textarea{width:100%;min-height:6em;padding:0.75em;background-color:#fff;color:#333;border:0px solid transparent;}
.redactor{min-height:6em;border:0px solid transparent;width:100%;}
.bulat{border-radius:50%;text-decoration:none;position:relative;text-align:center;vertical-align:middle;font-weight:bold;font-size:1.5em;width:2.45em;height:2.45em;line-height:2.45em;border:1px solid transparent;background:#fff;color:#333;}
.butlat img{height:2.45em;width:100%;object-fit:cover;}
.avatar{height:32px;width:32px;line-height:32px;vertical-align:middle;float:left;margin-right:1em;border-radius:50%;overflow:hidden;display:inline-block;}
.avatar img{height:32px;width:100%;object-fit:cover;}

/* align */
.center{text-align:center;}.left{text-align:left;}.right{text-align:right;}.tengah{float:none;text-align:center;vertical-align:middle;}
right{float:right;}

/* warna */
.toska{background-color:#14c0d6;color:#fff;}
.blewa{background-color: #ffcc66;color:#000;}
.jambon{background-color:#ff6666;color:#fff;}
.ungu{background-color:#9966FF;}
.abu{ background-color:#999;color:#fff; }
.abumuda{ background-color:#ddd;color:#000; }
.biru{background-color:#6699CC;color:#fff; }
.ijo{background-color:#009966;color:#fff;}
.pandan{background-color:#b9ff6d;color:#333;}
.salem{background-color:#f37b6f;color:#000;}
.lemah{background-color:#666633;color:#fff;}
.coklat{background-color:#663300;color:#fff;}
.lemon{background-color:#FFFF66;color:#333;}
.pink{background-color:#FF6699;color:#111;}
.jingga{background-color:#FF9900;color:#111;}
.tembus{ background:transparent;color:#333;text-align:left;}
.kuning{background-color:#FFFF99;}
.telurasin{background-color:#33CCCC;} 
.mangsi{background-color:#666699;} 
.putih{ background-color:#fff;}
.gelap{background-color:#aaa;} 
.pale{background:#b6fcb6;color:#333;}
.notepink{background:#ffccff;color:#444;}
.blue{background:#cce5ff;color:#444;}
.violet{background:#b366ff;color:#fff;}
.orange{background:#ffd480;color:#222;}

.text-kuning{color:#FFFF99;}
.text-telurasin{color:#33CCCC;}
.text-mangsi{color:#666699;}
.text-putih{color:#fff;}
.text-gelap{color:#aaa;} 
.text-toska{color:#14c0d6;}
.text-pandan{color:#b9ff6d;}
.text-blewa{color:#ffcc66;}
.text-jambon{color:#ff6666;}
.text-ungu{color:#9966FF;}
.text-abu{color:#aaa;}
.text-abumuda{color:#ddd;}
.text-biru{color:#6699CC;}
.text-ijo{color:#009966;}
.text-salem{color:#f37b6f;}

.border-jambon{border-color:#ff6666;}
.border-pandan{border-color:#b9ff6d;}
.border-salem{border-color:#f37b6f;}
.border-toska{border-color:#14c0d6;}
.border-blewa{border-color:#ffcc66;}
.border-biru{border-color:#6699CC;}



/* table */
table{overflow:auto;border-collapse:collapse;margin:0.5em auto;width:100%;display:table;}
table th{text-align:center;border-bottom:0.5px solid #ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
table td{text-align:left;}
table th{position: -webkit-sticky;position: sticky;top: 0;z-index:10;}

/*media*/
.video {position:relative;width:50%;overflow:hidden;padding-top:50%; /* 1:1 Aspect Ratio */}
.video iframe {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  border: none;}
.backfix{height:100%;background-image:url('http://smpn5sby.sch.id/schi/image404.gif');background-size:cover;background-repeat:no-repeat;background-position:center;}
.bingkai{width:50%;float:left;display:inline-block;padding:1em;height:192px;overflow:hidden;position:relative;margin:1em auto;}
.bingkai-hapus{display:none;}
.bingkai:hover .hapus{display:block;}
.bingkai ul {list-style-type: none;}

/* login */
#seepass{cursor:pointer;position:absolute;right:0.5em;top:0.75em;font-size:13pt;}
.inlogin{background:transparent;font-size:14pt;width:100%;margin:0px auto;padding:0.75em;border:0px solid transparent;text-align:center;}
.login{margin:0.85em auto;position:relative;border-bottom:1.5px solid #aaa;width:100%;border-radius:0.25em;}

/* paging */
#pagenation{position:absotute;margin:0;left:0px;display:flex;overflow-y:hidden;overflow-x:auto;text-align:right;}
.page{display:inline-block;cursor:pointer;}

/* print */
.iprint, td .iprint, th .iprint{display:none;}
@media print {
	body{font-family:"Times New Roman";}
	::-webkit-scrollbar {width:0;}
	#frame{width:100%;}
	#iprint,.iprint, td .iprint, th .iprint{display:block;}
	h1,h2,h3,h4,h5,b,p{margin:0.25em auto;}
	#sidebar, .klik, .w3-button, .noprint, td .noprint, #noprint, button, #futer{display:none;width:0px;}
	#main{background:#fff;color:#000;width:100%;position:fixed;width:100%;overflow:auto;padding:0px;margin:0px;eft:0px;top:0px;z-index:50;}
	table{cellpadding:0;margin:0 auto;padding:0;table-layout:fixed;margin:0.25em auto;}
	
	@page {
	size: 216mm 330mm;
	margin:5mm;
	}
}

@media screen and (max-width: 720px) {
#sidebar{overflow-x:hidden;padding:0.15em;margin:0px;}
.caption{left:0px;margin-right:0px;padding:1em 1em;}
.video{width:100%;padding-top:100%;}
.menuho{display:none;}
.bar1, .bar2, .bar3{height:2px;margin:8px 8px;}
.artikelist{height:320px;}
.frames{height:190px;margin-right:0px;}
#menubar{display:inline-block;float:right;}
.showmenu{-webkit-transition: all 0.5s ease-in-out;width:100%;display:block;clear:both;width:100%;text-align:center;background:#333;margin:0px;padding:1em;border-top :1px solid #ededed; } 
.popup{width:85%;}
.half,.nam,.artikelist,.frames{width:100%;display:block;float:none;}
.pertiga,.bingkai,.perempat{width:50%;}
}