Logo resizing incorrectly at different resolutions

Hello,

My logo is longer than most, and doesn’t scale correctly with the default settings. Please see the screenshots:

On mobile: http://cl.ly/image/2g2t3z2j1n1R
On laptop: http://cl.ly/image/3Q292q0s3Q2j

I have the following code in my quick css section:

@media only screen and (max-width: 480px) {
.responsive .logo img {
width: 200px!important;
margin-top:15px!important;
height:none!important;
}}

@media only screen and (max-width: 767px) and (min-width: 481px) {
.responsive .logo img {
max-width: 80%!important;
}}

Thank you!!