Linguini WordPress Theme Responsive Logo

I’ve tried email the author and posting to the support forms on his site, no response in over a week. I’ve tried different things and can’t figure out how to do this. So any help I can get here will be much appreciated.

Here is my problem:
I have a large logo I am using, I’ve added this to the custom CSS in the theme options panel:

button, .button a, button.button-standard, .button-standard a, button.standard, .standard a, .comments .reply a, a#cancel-comment-reply-link, .widget_tag_cloud a:hover, .comments #submit {
background-color:#242424;
}

header.header .logo { width: 531px !important; }
header.header .logo-image { width: 531px !important; }

.logo img{
max-width: 100% !important;
height: auto;
}

And the results can be viewed here: https://imgur.com/a/b58yn

Or live here: arianasofwestcolumbia.com

However, when viewed on smaller devices the logo gets cut off and I would like to know how to make it auto resize down to a smaller one.

Any help would be much appreciated.

Thanks!