body { background-color: #999; }

#hastalaluna { max-width: 80%; max-height: 80%; position: absolute; top:50%; left:50%}
#hastalaluna-small { display: none; max-width: 80%; max-height: 80%; position: absolute; top:50%; left:50% }


.logo {
	max-width: 100%;
	max-height: 100%;
	width: 500px;
}

.logo-small {
	width: 250px;
	max-height: 339px
}

@media only screen 
and (max-width : 320px) {
	
	#hastalaluna {
		display: none
	}
	
	#hastalaluna-small {
		display: block
	}

	.logo-small {
	max-width: 100%;
	max-height: 100%;
	width: 250px;
}
}




@media all
	and (orientation : landscape)
	and (max-device-width : 320px)  {
	
	#hastalaluna {
		display: block
	}
	
	#hastalaluna-small {
		display: none
	}
	
	.logo {
	max-width: 100%;
	max-height: 100%;
	width: 200px;
}
	
}

@media all
	and (orientation : portrait)
	and (max-device-width : 320px)  {
	
	#hastalaluna {
		display: none
	}
	
	#hastalaluna-small {
		display: block
	}
	
	.logo-small {
	max-width: 100%;
	max-height: 100%;
	width: 150px;
}
	
}