How to solve it by being displayed in half

I have a page where I am positioning the logo of the company, the positioning is getting correct, but the same is being displayed cortado I have already reviewed my css and I could not solve it, what I am doing is to show the logo with a larger size when the page does not scroll and a smaller image when scrolling, I have done this so far:

Logo and scrolling CSS:

.logo { 
    position:absolute;
    top:0;
    left:0;
    bottom:0px;
    width:185px;
    z-index:10000;

}

.large-logo {display:block;}
.scrolling-logo {display:none;}
.scrolling .large-logo {display:none;}
.scrolling .scrolling-logo {display:block;}

.navbar-brand {
    position: relative;
    padding: 27px 0;
    margin: 0!important;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

The logo div looks like this:

          <div class="logo img-responsive col-md-4">
      <a class="navbar-brand large-logo" href="index.php"><img src="images/anc.fw.png" /></a>
      <a class="navbar-brand scrolling-logo" href="index.php"><img src="images/anc.small.fw.png" /></a>          
      </div>

I have a .js linked:

$(window).scroll(function(){
    if ( $(window).scrollTop() > 30 ) {
      $('.logo').addClass('scrolling');
    } else {
      $('.logo').removeClass('scrolling');
  }
});

The project page can be viewed here: Project