Creating Responsive Sprite Images

I have 12 sprite images on my desktop/ipad that I want to scale fluidly down to my iphone. Everything goes awry about 1/2 way through, and other random sprite images start showing up.

The 1st example below is a working sprite image and hover; the 2nd & 3rd examples are what I am trying to scale down the image, but cannot get to work ("before" changes the text size under the image). Any suggestions greatly appreciated.

1. THIS WORKS

<style>
.dark.icon-country{
background: url(https://s3.amazonaws.com/namaste/sprites5.png);
background-position: 0 -4477px;
height:169px;
width:144px;
}
a.dark.icon-country:hover{
background: url(https://s3.amazonaws.com/namaste/sprites5.png);
background-position: 0 -4691px;
height:169px;
width:144px;
</style>
<div><a href="http://folksonica.com"><a/></div>

2. CANNOT GET TO WORK

@media only screen and (max-width: 600px) {
	.dark:before {font-size: 14px !important;line-height: 14px;}
	.dark a {background-size: 250px !important;}
	.dark.icon-country a {background-position: 0 -3494px !important;}
}

3. CANNOT GET TO WORK
@media only screen and (max-width: 470px) {
	.dark:before {font-size: 11px !important;line-height: 20px;}
	.dark a {background-size: 160px !important;}
	.dark.icon-country a {background-position: 0 -2239px !important;}
}</a>