#frame{max-width:100%;}
#kanvas{maxwidth:1400px;margin:0px auto;margin-top:4em;}
#kanvas::-webkit-scrollbar{display:none;}
#header a,#header p,#header i,#header .fa{cursor:pointer;display:inline-block;float:left;height:64px;line-height:64px;vertical-align:middle;}

#menul{height:64px;line-height:64px;vertical-align:middle;position:fixed;top:0.75em;z-index:55;left:2em;float:left;margin-left:2em;color:#006699;font-size:11pt;}
#menul a{color:#006699;display:inline-block;float:left;}
#menu{position:fixed;height:64px;line-height:64px;vertical-align:middle;top:0px;z-index:55;right:3em;float:right;margin-right:2em;color:#006699;}
#menul p{cursor:pointer;position:relative;display:inline-block;padding:0.5em;}
.label{margin:0px 1em;padding:0.25em;}
#menubutton{height:64px;line-height:64px;vertical-align:middle;}
.barmenu{top:0.75em;}
.bar1, .bar2, .bar3 {background-color:#006699;}
.submenu{position:absolute;top:0.75em;min-width:256px;left:0;padding:0px;padding-left:0.15em;display:none;background:#fff;}
.submenu li{padding-left:1em;width:100%;letter-spacing:2px;list-style-type:none;white-space:normal;word-wrap:break-word;float:left;}
#tutup{cursor:pointer;font-weight:bold;position:absolute;z-index:52;top:-0.5em;right:-0.5em;border-radius:50%;width:1.5em;height:1.5em;line-height:1.5em;vertical-align:middle;text-align:center;font-size:15pt;background-color:#fff;border:2.5px #ff6666 solid;color:#ff6666;padding:0.175em;}
#tutup:hover{background-color:#efefef;border:2.5px #aaa solid;color:#aaa;}

.klikslide{display:none;cursor:pointer;margin-top:65vh;margin:0px 1em;position:absolute;bottom:2em;z-index:50;}
#s1{left:40%;}#s2{left:45%;}#s3{left:50%;}#s4{left:55%;}#s5{left:60%;}
#slider {height:89vh;position:relative;perspective:1000px;transform-style: preserve-3d;margin:4em auto;}
#slider label{margin: auto;border-radius: 4px;position: absolute;left:0;right:0;transition: transform 0.4s ease;height:89vh;width:65%;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url('http://smpn5sby.sch.id/contents/image404.gif');}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,#s3:checked ~ #slide1, #s4:checked ~ #slide2,#s5:checked ~ #slide3 {box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);transform: translate3d(-30%,0,-200px);}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,#s3:checked ~ #slide2, #s4:checked ~ #slide3,#s5:checked ~ #slide4 {box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);transform: translate3d(-15%,0,-100px);}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,#s3:checked ~ #slide3, #s4:checked ~ #slide4,#s5:checked ~ #slide5 {box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);transform: translate3d(0,0,0);}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,#s3:checked ~ #slide4, #s4:checked ~ #slide5,#s5:checked ~ #slide1 {box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);transform: translate3d(15%,0,-100px);}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,#s3:checked ~ #slide5, #s4:checked ~ #slide1,#s5:checked ~ #slide2 {box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);transform: translate3d(30%,0,-200px);}
.slidearea{position:absolute;z-index:24;bottom:3em;right:2em;padding:0.5em 1.5em;background-image:linear-gradient(to right, rgba(255,255,255,0), rgba(55,55,55,0.25), rgba(55,55,55,0.65), rgba(0,0,0,0.25));}
.slidearea h3, .slidearea p{text-align:right;margin:0.25em auto;cursor:pointer;text-shadow: 3px 4px 7px rgba(81,67,21,0.8);}
.slidearea h3{color:#fff;font-size:15pt;font-weight:normal;}
.slidearea p{color:#fff;font-size:10pt;}


.avatar,.avater,.avatur{display:block;float:none;margin-bottom:1em auto;border-radius:50%;overflow:hidden;vertical-align:middle;}
.avatar{width:128px;height:128px;line-height:128px;}
.avater{width:164px;height:164px;line-height:164px;display:inline-block;float:left;margin:1em;}
.avatur{width:256px;height:256px;line-height:256px;margin:1.5em auto;}
.avatar img,.avater img,.avatur img{width:100%;object-fit:cover;opacity:}
.avatar img{height:128px;} 
.avater img{height:164px;} 
.avatur img{height:256px;}
.hijaugra{background-image:linear-gradient(to bottom right,rgba(102,153,102,0),rgba(102,153,102,0.5),rgba(102,153,102,1));color:#fff;}
.ddd{background-image:linear-gradient(to bottom right,rgba(221,221,221,0),rgba(221,221,221,0.5),rgba(221,221,221,1));color:#222;}
.fff{background-image:linear-gradient(to bottom right,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,1));color:#777;}
.aaa{background-image:linear-gradient(to bottom right,rgba(170,170,170,0),rgba(170,170,170,0.5),rgba(170,170,170,1));color:#fff;}
.panelmuka{max-height:172px;overflow:hidden;position:relative;}
.panelmuka img{display:none;}
.selengkapnya{width:100%;position:absolute;float:right;bottom:-0.5em;text-align:right;opacity:1.0;cursor:pointer;font-size:10pt;}
.namnamnam{background-image:linear-gradient(to bottom right,rgba(102,102,102,0),rgba(102,102,102,0.5),rgba(102,102,102,1));color:#fff;}
.hzparent{display:flex;overflow-x:auto;}
.hzchild{float:left;display:inline-block;margin:0.5em 2em;padding:1em;border-radius:9px;}
.hzparent::-webkit-scrollbar{display:none;scroll-behavior: smooth;}
.hzchild:hover{cursor:pointer;opacity:1.25;transform:scale(0.95);contrast(135%);box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.1);}
.datashow{padding:1em 2em;border-bottom:0.3px solid #bbb;}
.agp{width:65%;padding:0px;border-radius:15px 0px 7px 7px;}
.strip{height:64px;line-height:64px;vertical-align:middle;background-color:rgba(255,255,255,0.90);position:fixed;top:0px;z-index:50;width:100%;border-bottom:1px solid #006699;overflow:hidden;}
.mainmenu{width:92px;position:relative;display:inline-block;padding:0px 0.5em;}
.mainmenu:hover,.underline{border-bottom:3px solid #333;color:#555;}
.dropdown{display:none;position:absolute;top:64px;background:#f9f9f9;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown p{min-width:192px;padding:0px 0.5em;}
.dropdown p:hover{background-color: #f1f1f1;}
.layanan{left:164px;}
.info{left:88px;}
@media screen and (max-width: 860px) {
#menul{left:1.5em;margin-left:1.5em;}
}

@media screen and (max-width: 640px) {
.profil, .info, .layanan{left:0px;top:0px;}
.dropdown, .mainmenu{position:relative;clear:both;width:100%;}
.dropdown p{border-bottom:0.1px solid #eee;color:#006699;font-size:11pt;width:100%;}
.mainmenu{border-bottom:0.15px solid #dedede;color:#006699;}
.mainmenu:hover,.underline{border-top:0.15px solid #006699;border-bottom:0.1px solid #006699;color:#006677;}
.agp{width:85%;}
.avater{display:block;clear:both;margin:1em auto;float:none;}
.klikslide,#strip{display:block;}
#menu{background:#fff;padding:0px;left:0;top:0;min-height:100vh;width:100%;z-index:56;top:64px;margin-right:0px;overflow-y:auto;}
#menul{top:0.25em;left:0.25em;margin-left:0.25em;}
#slider{margin-top:0px;}
#slider label{width:100%;}
}