Logo Not Resizing Properly When Mobile Width is Less Than 480px

My logo which is the recommended 340px wide will not re-size properly when the browser is less than 480px wide. I have tried on my mobile phone, safari, chrome, ff. I also upgraded to 3.7 and Enfold 2.4 to resolve this issue. The problem still exists. When the screen size is less than 480px, the logo gets cut off and is not displayed properly. I have even tried several different combinations below from the forums with no luck in the custom styling section.

.logo img { height: 70px !important;
max-height: 100%!important; }

.logo > a { max-height: 70px!important; }

a# LuckyAnchor_228608484_7 { max-height: 70px!important; }

.logo img { height: 70px!important;
max-height: 100%!important; }

Please help, thank you.
Dennis
website URL
http://www.orlandofederallawyer.com/