@font-face {
  font-family: "tagline";
  font-style: normal;
  font-weight: normal;
  src: url("tagline") format("woff");
}

@font-face {
  font-family: "banner";
  font-style: normal;
  font-weight: normal;
  src: url("banner") format("woff");
}

@font-face {
  font-family: "paragraph";
  font-style: normal;
  font-weight: normal;
  src: url("paragraph") format("woff");
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{margin:0; padding:0;font-family:paragraph, Arial, Helvetica ; font-size:16px; color: rgb(70,80,80); background-color:white; line-height:150% ; }
.par { font-family: paragraph; font-size: 16px; color: black; }
div2 {pointer-events: none; }
.alfa { list-style-type: lower-alpha; margin-bottom:0; }
ul.dashed { list-style-type: none; }
ul.dashed li:before {
  content: '-';
  position: absolute;
  margin-left: -15px;	
}

b { font-weight:normal;}
img { margin:0; padding:0; border: 0 none; pointer-events: none; }

.grs_bawah { text-decoration: underline; }
#menu_icon {float:right; margin: 8px 15px 0 0; cursor: pointer; display: none; }
.menu_icon1, .menu_icon2, .menu_icon3 {width: 35px; height: 5px; background-color: rgb(0,255,0); margin: 6px 0; transition: 0.4s; }
.change .menu_icon1  {-webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
.change .menu_icon2 {opacity: 0;}
.change .menu_icon3  {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

#menu_item {float:right; overflow: hidden;  min-height:50px; margin-right:30px; display: block; background:transparent; }
#menu_item a {font-family: paragraph, arial; font-size:16px; text-decoration: none; color: inherit; float: left; display: block; text-align: center; padding: 9px; }
#menu_item a:hover {text-decoration: underline ; }
#menu_item .menu_item2 {font-family: paragraph, arial; font-size:16px; text-decoration: none; color: inherit; 
        float: left; display: block; text-align: center; padding: 9px; cursor: -webkit-grab; cursor: grab; }
#menu_item .menu_item2:hover {text-decoration: underline ; }
.fbesar {font-size:17px; }

.pp_icon {position:fixed; top:9px; left:20px; z-index: 302;} 

.jd26 {font-weight: normal; font-family:paragraph; font-size:26px; margin:0 0 10px 0; color:rgb(80,80,80);  }
.jd28 {font-weight: normal; font-family:paragraph; font-size:28px; margin:0 0 10px 0; color:rgb(80,80,80);  }
.jd20u {font-weight: normal; font-family:paragraph; font-size:20px; margin:0 0 10px 0; color:rgb(80,80,80); text-decoration:underline; }
.jd18u {font-weight: normal; font-family:paragraph; font-size:18px; margin:0 0 10px 0; color:rgb(80,80,80); text-decoration:underline; }
.inh {font-weight: inherit; font-family:inherit; font-size:inherit; margin:inherit; color: inherit; line-height:inherit; }

.blok {max-width:900px; margin:auto ; }
.blok0 {max-width:800px; margin:auto ; }
.batas {max-width:900px; margin:auto; border-bottom: 1px solid rgb(200,200,200) ; }
.blok_j {font-family: arial, helvetica; font-size: 16px; line-height:90%; margin:0; padding-bottom:10px; font-weight: bold; }
.bot0 { margin-bottom:0; }
.bot2 { margin-bottom: 2px ;}
.bot5 { margin-bottom: 5px ;}
.bot10 { margin-bottom: 10px ;}
.bot15 { margin-bottom: 15px ;}
.bot20 { margin-bottom: 20px ;}
.bot30 { margin-bottom: 30px ;}
.bot50 { margin-bottom: 50px ;}
.bot100 { margin-bottom: 100px ;}
.top100 { margin-top: 100px ;}
.top100t { margin-top: 100px ;}
.top0 { margin-top: 0;}
.top15 { margin-top: 15px ;}
.top30 { margin-top: 30px ;}
.top50 { margin-top: 60px ;}

.left20 {margin-left:20px;}
.left25 {margin-left:25px;}

.blok1 {width:25%; margin:auto; }
.blok2 {width:75%;  padding: 0 20px; }
.fleft {float:left; }
.fright {float:right; }
.fright2 {float:right; }
.gb1 { display: block; max-width: 100%; height: auto; margin-left:auto; margin-right:auto; }	
.gb2 { display: block; max-width: 90%; height: auto; margin-left:auto; margin-right:auto; }	
.gb0 { display: block; max-width: 100%; height: auto; margin-left:auto; margin-right:auto; }	
.scrgb0{width:100%; margin-left:auto; margin-right:auto; }

.scrgb {max-width: 90%; overflow:auto; margin-left:auto; margin-right:auto; }
.tebal{margin:0 0 10px 0; font-family: banner; font-size:18px; color: rgb(70,70,70); line-height: 100%; }
.tebal2{margin:0 0 10px 0; font-family: banner; font-size:22px; color: rgb(90,90,90); line-height: 100%; }
.link {color: rgb(255,130,0); text-decoration: underline; cursor: -webkit-grab; cursor: grab; pointer-events: auto; }
.kursor1 {cursor: -webkit-grab; cursor: grab; }
.putih {color:white;}
.bputih {background-color:white;}
.hitam {color:rgb(90,90,90);}

.footer {width:100% ; min-height:240px; background-color:rgb(60,60,60); padding:50px 0 ; color:white ; }
.foot { max-width: 480px ; margin:0 auto ; }

#down, #about, #harga {position: absolute; top:55px; left:-1000px; max-width: 640px; padding:20px 30px; background-color:rgb(250,255,200); display:block; z-index: 1; }

@media screen and (max-width: 960px ) {
	#menu_icon {display:block ; } 
	#menu_item {display: none;} 
	/* calc gagal pada android. resiko margin kanan berkurang / hilang. aman 95% krn ada margin kanan */
	#menu_item.responsive {display:block; float:none ; margin: 50px 20px 0 auto ;
		width:92% ; max-width:250px; background-color:rgb(70,70,70); color:white; }  
	#menu_item.responsive a {float: none; text-align: left; padding: 9px 6px 9px 14%; font-size:14px; }
	#menu_item.responsive a:nth-child(-n+12) { border-bottom: 1px solid rgb(100,100,100);}
	#menu_item.responsive a:hover {  background-color: rgb(120,120,120);} 
	#menu_item.responsive .menu_item2 {float: none; text-align: left; padding-left: 14%; font-size:14px; }
	#menu_item.responsive .menu_item2:nth-child(-n+12) { border-bottom: 1px solid rgb(100,100,100);}
	#menu_item.responsive .menu_item2:hover {  background-color: rgb(120,120,120);} 
	

	.pp_icon {position:absolute; top:12px; left:15px; }	
	.blok {padding: 0 9% ;}
	.blok0 {padding: 0 9% ;}
	.bot100 { margin-bottom: 40px ;}
	.top100 { margin-top: 40px ;}	
	.top100t { margin-top: 60px ;}	
	.fleft, .fright {float:none; }
	.gb1 { max-width: 80%; }	
	.blok1 {width:100%; padding-left:5px; padding-right:5px; padding-bottom:20px;}
	.blok2 {width:100%; padding-left:9%; padding-right:4%; }
 } 

@media screen and (max-width: 700px) {
	/* background full - hp landscape */
	.footer { padding:50px 5% 50px 9%;}		
	
}