/* CSS Document */

/*  GRID OF TWO   ============================================================================= */

.col {
	padding: 0;
}

.span_2_of_2 {
	width: 70%;min-height:200px;
}

.span_1_of_2 {
	width: 30%;min-height:200px;
}

/* bagian atas : logo, pendaftaran, login/search, hotline */
.tiga1 {
	width:34%; vertical-align:middle; text-align:center;
}
.tiga2 {
	width:33%;margin-top:15px;
}
.tiga3 {
	width:33%;
}
.tiga3x {
		width:70%; margin-top:15px; margin-bottom:10px;
}
.satu1 {
	width:100%; height:200px; background-color:red;
}
.empat {
	width:25%; top:0px;
}
.dua1 {
	width:75%; top:0px;
}
.dua2 {
	width:25%;top:0px;
}
.duaa {
	width:70%; top:0px;
}
.duab {
	width:30%;top:0px;
}

.produk {
width:24.8%;
text-align:center;
}
.turun {
width:45%; height:0px; background-color:blue;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
	padding:2px 0;
}
	.span_2_of_2 {
		width: 100%; min-height:200px;
	}
	.span_1_of_2 {
		width: 100%;min-height:200px;
	}
	.tiga1 {
		width:100%; 
	}
	.tiga2 {
		width:100%; margin-top:5px;
	}
	.tiga3 {
		width:100%; 
	}
	.tiga3x {
		width:70%; margin-top:5px; margin-bottom:5px;
	}
	.satu1 {
		width:100%; height:80px;
	}
	.empat {
		width:100%; 
	}
	.dua1 {
		width:100%; 
	}
	.dua2 {
		width:100%;
		margin-top:5px;
	}
	.duaa {
		width:100%; 
	}
	.duab {
		width:100%;
		margin-top:10px;
	}
	
	.produk {
	width:49.6%;
	text-align:center;
	}
	.turun {
	width:90%; height:0px;
	}

}
.textmiddle {vertical-align:middle;}