Logo for Mobile

Hello,

Here is my question.

I add a custom logo to my home page using this css it works well however in mobile version because of the colors of logo some letters are not shown with white background.

.home .logo {
background: url(http://sunstall.com/NewLaunch/wp-content/uploads/2016/02/Logo-sunstall-decal-white-text-e1455133719919.png) no-repeat center;
display: block;
height: 120px;
width: 160px;
}

Therefore I add this code :

@media only screen and (max-width: 480px) {
.logo img { opacity: 0; }
.logo a { background-image: url(http://sunstall.com/NewLaunch/wp-content/uploads/2016/02/Logo-Sunstall-website-3-150×66.png); background-repeat: no-repeat; background-size: contain; background-position: 30% 30%; }}

Now it works fine. However the logo I added before to my home page is still showing. How I can I display it.

Thank you !