.sub-barang{
text-align:center;

width:17%;
float:left;
background-color: #fff;
border-bottom: #CCC solid 2px;
border-top: #CCC solid 2px;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.sub-barang:hover{ background-color: #ffed00;}
.jdl-brg{
	
font-weight:bold;
	font-size:8px;
height:  inherit;
font-family: "Arial", Gadget, sans-serif;

}
.p-judul{
	font-weight:bold;
	font-size:10px;
		
		
	}

.p-data{
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}
.zoomeffect {
	padding-bottom:2px;
width:80%;
height:60%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect img {

display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}





.img-oke {
padding:0px;
background-color:000066;
border-radius:20px;
}






















.sub-barang2{
text-align:center;
padding:4px;
width:100%;
float:left;
background-color:  #ffed00 ;

 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}

.sub-barang2:hover {
	background-color: #FF2;
	
}
.jdl-brg2{
	
font-size:11px;
height: 50px;

font-family: "Impact", Gadget, sans-serif;
vertical-align:middle;
}
.p-judul2{
	font-weight:bold;
	
		position:   relative;
		top: 1px;
		z-index: 2;
		color: #000;
		
	}
	
	
.p-gambar2{
	
 	position:   relative;
	
		top: 1px;
		z-index: 3;
		
		
	}
	
	.p-judul-detail2{
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;

	}
.p-detail2{
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:16px;
	

	}
	
	.p-page2 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up2 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}
.zoomeffect2 {
width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect2 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect2:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}





.img-oke2 {
padding:0px;
background-color:000066;
border-radius:20px;
}




































.sub-barang3{
text-align:center;
padding:2px;
width:17%;
float:left;
background-color:  #FFF;
border-bottom: #CCC solid 2px;
border-top: #CCC solid 2px;

 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:4px 4px 4px 4px;
}

.sub-barang3:hover {
	background-color: #ffed00;
	
}
.jdl-brg3{

font-weight:bold;
	font-size:8px;
height:  inherit;
font-family: "Arial", Gadget, sans-serif;
}
.p-judul3{
	font-weight:bold;
	font-size:12px;
	font-family: "Arial", Gadget, sans-serif;
		position:   relative;
				color: #000;
		
	}
.p-gambar3{
	
 	position:   relative;
	font-size:12px;
	color:#000;
	font-weight:bold;
	}
.p-data3{
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page3 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up3 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}
.zoomeffect3 {
width:80%;
height:60%px;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect3 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect3:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
}





.img-oke3 {
padding:0px;
background-color:000066;
border-radius:20px;
}
























.sub-barang4{
text-align:center;
padding:4px;
width:200px;
float:left;
background-color: #EAEAEA;
border-bottom: #ffed00 solid 2px;
border-top: #ffed00 solid 2px;
 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}

.sub-barang4:hover {
	background-color: #ffed00 ;
	
}
.jdl-brg4{

	
font-size:11px;
height:270px;
font-family: "Impact", Gadget, sans-serif;
}
.p-judul4{
	font-weight:bold;
	
		position:   relative;
		top: 1px;
		z-index: 2;
		color: #000;
		
	}
.p-gambar4{
	
 	position:   relative;
	font-size:12px;
	color:#000;
	font-weight:bold;
	}
.p-data4{
	
	
		top: 1px;
		background-color:#FFF;
		
		
	}
	
	.p-page4 {
border-style: solid;
border-width: 15px;
border-color:  #FFF4EA;
background-color: #FFEEE6;
}

.p-up4 {

border-color:   #F0F0F0;
background-color:   #FFEBD7;
}
.zoomeffect4 {
width:80%;

text-align:center;
overflow:hidden;
position:relative;
cursor:default;

}

.zoomeffect4 img {
display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;



}

.zoomeffect4:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
}





.img-oke4 {
padding:0px;
background-color:000066;
border-radius:20px;
}







.active1 {
	color:#ffed00;
}


.active1:hover {

	font-weight:bold;
}


.non {
	color: #fff;
}
.non:hover {
	font-weight:bold; }





.pilihan {
  width: 150px;
  height: 34px;

  background: #E8F3FF;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  transition:ease all 0.3s;
  -webkit-transition:ease all 0.3s;
  
}
.pilihan:hover{
  box-shadow:0 0 7px 5px lightblue;
}
.pilihan select {
  background: transparent;
  width: 220px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 1;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}




.slick{
text-align:center;
padding:4px;
width:200px;
float:left;
border:#06F solid 2px;
background-color:   #FFF;

 -moz-border-radius:4px;
 -khtml-border-radius: 4px;
 -webkit-border-radius: 4px;
 margin:5px 5px 5px 5px;
}
.slick:hover{
	background-color:#B3D9FF;	
}
.jdl-slick{
	
font-size:11px;
height:300px;

font-family: "Impact", Gadget, sans-serif;

}

.gbr-slick{
	width:100%;
height:100%;
text-align:center;
overflow:hidden;
position:relative;
cursor:default;
}
.gbr-slick img{
	display:block;
position:relative;
cursor:pointer;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width:100%;
}


.sip-tabel table{
  width:100%;
  border: 1px solid #999;
  
  border-spacing:0;
  border-collapse:collapse;
  overflow:hidden;
}

.sip-tabel table td,table th{
	border-right: solid 1px #999;
		border-left: solid 1px #999;
  padding:5px 5px;
 
 
  font-family:sans-serif;
}



.rspv-tabel{
  overflow-x:auto;
}
.rspv-tabel thead tr,table tr:nth-child(2n){

  background: #EBEBEB;
}
.rspv-tabel table{
  width:100%;
  border: 1px solid #999;
  
  border-spacing:0;
  border-collapse:collapse;
  overflow:hidden;
}
.rspv-tabel table caption{
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  padding:5px 0;
}
.rspv-tabel table td,table th{
	border-right: solid 1px #999;
		border-left: solid 1px #999;
  padding:5px 5px;
 
 
  font-family:sans-serif;
}


.table-oke2 { 

border: 1px solid  #CCC;  

width:100%;
caption-side: top;
}


caption, table-oke2 th {

padding:10px;
color:#fff;
background-color:#2A72BA;
border-top:1px black solid;
border-bottom:1px black solid;
}
caption, .table-oke2 td {
background-color:#FFF;
padding:10px;
border-top:1px  #fff solid;
border-bottom:1px  #000 solid;
text-align:left; 

}   
caption {

font-style: italic;
}
table-oke2 .left {
text-align: left;
padding: 7px;
}

table-sip
{
    border: 1px solid #000;
}
table-sip.thead
{
    background-color: ;
}

table-sip.tbody tr:nth-child(even) 
{
    background-color: #333;
}

a{
	color:  #000;
}
a:hover{
	color: #ffed00 ;
}
@media screen and (max-width:800px){
.rspv-tabel{
  overflow-y:hidden;
  -ms-overflow-style:-ms-autohiding-scrollbar;
}
.rspv-tabel table td,table th{
	
  white-space:nowrap;
}
</style>