/* HEADLINE */
 
#image-hl {
    /* CSS Untuk croping gambar / foto  ------------ Disini Anda dapat menentukan lebar dan tinggi image */
    width		: 482px;
    height		: 363px;
    overflow	: hidden;
    /* CSS Untuk mengatur posisi gambar ------------ Menjadikan frame / bingkai sebagai patokan koordinat left/top */
    position	: relative;
	float		: left;
	margin-top	: 10px; 
	margin-right: 13px; 
	border-width: 1px; 
	border-style: solid;
	border-color: #CCC;
	background-color:#000000;
}

#image-hl img {
    /* CSS Untuk croping gambar --- Membatasi tinggi gambar, membiarkan width-nya auto --- Bisa juga diganti jadi height: 320px jika tinggi gambar mau dipaksakan jadi 320px */
	max-height	: 482px;
	
    /* CSS Untuk mengatur posisi gambar --- Left/top berpatokan pada frame --- Diisi engan nilai minus untuk memposisikan keluar dari frame --- karena frame overflow-nya dibuat jadi hidden
    posisi yg keluar area frame jadi tidak terlihat --- Disini Anda dapat mengatur bagian/posisi gambar yg mana yg akan ditampilkan */
    position	: absolute;
    left		: 0px;
    top			: 0px;
}

 /* BERITA UTAMA */
 
#image-utama {
    width		: 215px;
    height		: 135px;
    overflow	: hidden;    
    position	: relative;
	background-color:#000000;

}

#image-utama img {
	max-height	: 400px;
    position	: absolute;
    left		: 0px;
    top			: 0px;
}

 /* index */
 
#image-index {
    /* CSS Untuk croping gambar / foto  ------------ Disini Anda dapat menentukan lebar dan tinggi image */
    width		: 84px;
    height		: 63px;
    overflow	: hidden;
    /* CSS Untuk mengatur posisi gambar ------------ Menjadikan frame / bingkai sebagai patokan koordinat left/top */
    position	: relative;
	float		: left;
	border-width: 1px; 
	border-style: solid;
	border-color: #CCC;
	background-color:#000000;
}

#image-index img {
    /* CSS Untuk croping gambar --- Membatasi tinggi gambar, membiarkan width-nya auto --- Bisa juga diganti jadi height: 320px jika tinggi gambar mau dipaksakan jadi 320px */
	max-height	: 110px;
	
    /* CSS Untuk mengatur posisi gambar --- Left/top berpatokan pada frame --- Diisi engan nilai minus untuk memposisikan keluar dari frame --- karena frame overflow-nya dibuat jadi hidden
    posisi yg keluar area frame jadi tidak terlihat --- Disini Anda dapat mengatur bagian/posisi gambar yg mana yg akan ditampilkan */
    position	: absolute;
    left		: 0px;
    top			: 0px;
}

#image-feed {
    /* CSS Untuk croping gambar / foto  ------------ Disini Anda dapat menentukan lebar dan tinggi image */
    width		: 110px;
    height		: 110px;
    overflow	: hidden;
    /* CSS Untuk mengatur posisi gambar ------------ Menjadikan frame / bingkai sebagai patokan koordinat left/top */
    position	: relative;
	float		: left;
	margin-top	: 3px; 
	margin-left	: 5px;
	margin-right: 2px; 
	border-width: 1px; 
	border-style: solid;
	border-color: #CCC;
	background-color:#000000;
}

#image-feed img {
    /* CSS Untuk croping gambar --- Membatasi tinggi gambar, membiarkan width-nya auto --- Bisa juga diganti jadi height: 320px jika tinggi gambar mau dipaksakan jadi 320px */
	max-height	: 240px;
	
    /* CSS Untuk mengatur posisi gambar --- Left/top berpatokan pada frame --- Diisi engan nilai minus untuk memposisikan keluar dari frame --- karena frame overflow-nya dibuat jadi hidden
    posisi yg keluar area frame jadi tidak terlihat --- Disini Anda dapat mengatur bagian/posisi gambar yg mana yg akan ditampilkan */
    position	: absolute;
    left		: 0px;
    top			: 0px;
}

@media screen and (max-width: 1095px){

	#image-feed {
		width	:100px;
		height	:100px;
		margin-top	: 0px; 
		margin-left	: 3px;
		margin-right: 0px;}
	#image-feed img {
		height	: 100px;}
}

@media screen and (max-width: 669px){

	#image-hl {
		width: 100%;
		background-color:#fff;
		height:400px;}

	#image-feed {
		width	:80px;
		height	:80px;
		margin-top	: 0px; 
		margin-left	: 3px;
		margin-right: 0px;}
	#image-feed img {
		height	: 80px;}
		
	#image-index {
		width	:70px;
		height	:70px;
		margin-top	: 0px; 
		margin-left	: 3px;
		margin-right: 0px;}
	#image-index img {
		height	: 70px;}

}

@media screen and (max-width: 558px){

	#image-hl {
		width: 100%;
		background-color:#fff;
		height:200px;}
		
}