Problems with masthead in responsive mode

Hi, I have a problem with the header in small resolutions.

Here you can see how it is now: http://nimb.ws/7GDrWR

and this is the custom css that I have in the template:

#search-icon .searchform { width: 200px !important; }

.main-navigation ul li a {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 15px;
}

#page-wrapper {
width: 1080px;

-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding-top: 0px;
}

article.post,
article.page {
border-bottom: 1px solid #bbc6e8;
margin-bottom: 40px;
padding-bottom: 40px;
zoom: 1;
}

article.post .entry-header .entry-thumbnail img,
article.page .entry-header .entry-thumbnail img {
width: 50%;
height: auto;
display: block;
padding-left: 180px;
}

article.post .entry-header h1.entry-title,
article.page .entry-header h1.entry-title {
color: #5f6366;
font-family: arial;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 1.5em;
}

article.post .entry-header h1.entry-title a,
article.page .entry-header h1.entry-title a {
color: inherit;
text-decoration: none;
}

div.sharedaddy div.sd-block {
border-top: 25px solid ##bcc6e9;
border-top: 25px solid rgba(188,198,233,);
padding: 50px 5px 5px;
margin-top: 25px;
width: 100% !important;
}

/* Vantage Grid Layout Excerpt Height */

.vantage-grid-loop article .excerpt {
height: auto !important;
}

.vantage-grid-loop article {
width: 50%;

border-bottom: none;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-bottom: 30px;
padding: 0 15px;
}

header#masthead .hgroup #header-sidebar {
padding-top: 15px;
padding-bottom: 15px;
margin-left:180px;
height: 100%;
/* position: absolute; */
right: 0;
top: 0;
float: left;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-pack: center;
-ms-flex-align: center;
display: -ms-flexbox;
-moz-box-pack: center;
-moz-box-align: center;
display: -moz-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;
display: box;
box-pack: center;
box-align: center;
}

body.responsive header#masthead .hgroup .logo {
float: left;
}

This is the result I want for the header: http://esserinstitut.es/wp-content/uploads/2014/10/good-header.png

Can you help?

Thanks in advance and great job with the template

URL: http://esserinstitut.es/