Centered Logo with menu on left and right

Hello,

I was playing around with this this guide https://kriesi.at/documentation/enfold/menu/#logo-center-split-menu to make my logo center and menu on the left and right. It looks great but I need to make the logo larger. How about I go about doing that keeping the logo centered? I did add some code to make the logo go below the header link as well.

Here is my current code

 /*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(2) {
  /* Adjust the width of the logo */
    margin-right:150px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 450px;  
}
}

span.logo {
    position: absolute;
    bottom: -40px;
}
#top .av-main-nav > li > a { font-family: espen; }