Two Logo's one for mobile one for desktop

Hey awesome support people of Enfold..

I have been trying to get two logo’s for some clients who have purchased the theme but I am not having great results..

I followed directions here >> https://kriesi.at/support/topic/two-logo-images-one-for-desktop-site-and-one-for-mobile/

and used this css in the quick css

====================

@media only screen and (min-width: 768px) {
.logo{
background: url(http://adrianholmesphotography.ca/wp-content/uploads/2015/04/Adrian-Holmes-Photography-Icon-and-wordmark-v01.png);
}
}

@media only screen and (max-width: 767px) {
.logo{
background: url(http://adrianholmesphotography.ca/wp-content/uploads/2015/05/Adrian-Holmes-Photography-Logo-Mobile-Version.png);
}
}

================================

And as you can see it’s looking really wrong.
Maybe I need to get rid of the ‘background’ tag?

Please help,

thank you.

Cheers..