#topmenu {position: fixed; top: 0; right: 0; width: 100%; min-height: 50px ; overflow: hidden; z-index: 300; color: black; background-color:rgba(50, 50, 50, 0.1);}
#topmenu.no_ban {color: white; background-color: rgb(50,50,50); }

/*
#topmenu {position: fixed; top: 0; left: 0; width: 100%; min-height: 50px ; overflow: hidden; z-index: 300; color: black; background-color:transparent;}
#topmenu.no_ban {color: white; background-color: rgb(50,50,50); }
*/

#ban {position: relative ; width : 100% ; height:107% ; max-height : 680px ; background-color:rgb(160,160,160) ; pointer-events: none; 
	background-image: url("gambar.php?a=1");  background-position: 50% 50% ; background-repeat: no-repeat; background-attachment: scroll; background-size:cover; }
.dist {width:100% ; min-height:680px; padding:40px 4% 40px 8%; background-color:rgb(160,160,160) ; 
	background-image: url("gambar.php?a=2"); background-repeat: no-repeat; background-size:cover; background-position: center center ; pointer-events: none; }
.bengkel {width:100% ; min-height:680px; padding:40px 4% 40px 8%; background-color:rgb(160,160,160) ; 
	background-image: url("gambar.php?a=3"); background-repeat: no-repeat; background-size:cover; background-position: center center ; pointer-events: none; }
/*
.blok_atas { padding:100px 19%; background-color:rgb(225,245,225);  }
 .blok_atas2 { padding:60px; background-color:white;  border-radius: 6px;  } */
.blok_atas { padding:100px 0; background-color:rgb(225,245,225);  }
.blok_atas2 { max-width:820px ; padding:60px; margin:auto; background-color:white;  border-radius: 6px;  }

@media screen and (max-width: 960px ) {
	#topmenu {background-color:transparent; }
	#ban { background-position: 45% 50% ; }
	.dist, .bengkel {padding:40px 4% 40px 9% } 
	.blok_atas { padding:50px 5%; }	
    .blok_atas2 { padding:7%; }

	} 

@media screen and (max-width: 700px) {
	.dist, .bengkel {background-position: 80% 50% } 	
}