/* 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: 0px; 
	border-style: solid;
	border-color: #CCC;
	background-color:none;
}

#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	: 0px;
	margin-right: 10px; 
	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		: -30px;
    top			: -10px;
}

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

#image-narasumber 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 */
	width	: 200px;
	
    /* 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;
}

#nama {
    /* CSS Untuk croping gambar / foto  ------------ Disini Anda dapat menentukan lebar dan tinggi image */
    width			: 200px;
	height			: 20px;   
    overflow		: hidden;
    /* CSS Untuk mengatur posisi gambar ------------ Menjadikan frame / bingkai sebagai patokan koordinat left/top */
    position		: absolute;
	float			: left;
	margin-top		: 210px; 
	margin-left		: 0px;
	margin-right	: 10px; 
	border-width	: 1px; 
	border-style	: solid;
	border-color	: #CCC;
	background-color: #000000;
	color			: #FFFFFF;
	text-align		: center;
}

#nama 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 */
	width	: 200px;
	
    /* 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 {
    /* CSS Untuk croping gambar / foto  ------------ Disini Anda dapat menentukan lebar dan tinggi image */
    width		: 100px;
    height		: 100px;
    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 {
	width		: 200px;
	height		: 200px;
    position	: absolute;
    left		: -30px;
    top			: 0px;}
		
}

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

	#image-hl {
		width			: 100%;
		background-color:none;
		height			:250px;}

	#image-feed {
		width	:80px;
		height	:80px;
		margin-top	: 0px; 
		margin-left	: 0px;
		margin-right: 0px;}
	#image-feed img {
		max-height	: 120px;}
		
	#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:none;
		height			:150px;}
}