/* ==== Naming grid items to facilitate placement in the grid ==== */
#header_main .av-logo-container .widget { grid-area: widget; }
#header_main .av-logo-container .logo {grid-area: logo;}
#header_main .av-logo-container .main_menu {grid-area: nav; }



/* ==== starting the layout of the header  ==== */
#header_main .inner-container {
  display: grid !important;
  grid-auto-flow: row;

/* ==== adjust first value to your logo width - last value if your menu is a larger one ==== */
  grid-template-columns: 400px 1fr 1fr;   
  grid-template-areas:
    "logo widget nav";
}

#header_main > * {
  justify-self: start;
  align-self: center;
}

#header_main .widget { 
  justify-self: center; 
  margin-right: 0px;
  padding: 0;
}

#header_main #header_main_alternate {
  width: 100%;
}

#header_main #header_main_alternate .main_menu {
  width: auto;
}


/* responsive case */
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }
  #header_main .inner-container {
    grid-template-columns: 1fr 1fr 80px;
  }
}

@media only screen and (max-width: 501px) {
  .responsive #header_main .inner-container {
    display: flex !important;
    flex-flow: row wrap-reverse;
    justify-content: space-between;
  }
  #header_main .inner-container > * {
    height:  80px !important;
    line-height: 80px !important;
  }

  #header_main .inner-container .widget,
  #header_main .inner-container .main_menu {
    flex: 0 1 auto;
  }

  #header_main .inner-container .logo {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    height: auto !important;
  }

  #header_main .inner-container .av-burger-menu-main > a {
    position: relative;
    line-height: 80px !important;
    height: 80px !important;
  }
}