/* ==== Naming grid items to facilitate placement in the grid. ==== */

#header_main .widget { grid-area: widget; }
#header_main .av-logo-container {grid-area: logo;}
#header_main #header_main_alternate {grid-area: nav; }



#header_main {
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr); 
  grid-template-areas:
    "logo widget"
    "nav nav";
}

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

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

#header_main #header_main_alternate {
  width: 100%;
}

#header_main #header_main_alternate .main_menu {
  width: auto;
  /* ===  left: 50%; transform: translateX(-50%); === */
}



@media only screen and (max-width: 989px) {
  #header_main {
    display: grid !important;
    grid-template-columns: 1fr 1fr 100px; 
    grid-template-areas:
      "logo widget nav";
  }

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

  #header_main #header_main_alternate {
    width: auto;
    justify-self: end;
    margin-right: 20px;
    border-top: none;
  }

  #header_main #header_main_alternate .main_menu {
    width: auto;
    top: 0 !important;
    position: relative !important;
    height: auto !important;
  }

  /* ==== no switch to enfold default behaviour - to make the header_alternate invisible  ==== */
  .responsive #top #wrap_all .av-logo-container .main_menu {
    display: none;
  }
  .responsive #top  #header_main_alternate {
    display: block !important;
  }
}



@media only screen and (max-width: 501px) {
  #header_main {
    grid-template-columns: 1fr 2fr 60px;
  }
  #header_main #header_main_alternate {
    margin-right: 5px;
  }
  .responsive #top .logo {
    width: 100%;
  }
  #header_main .widget .avia-button.avia-size-medium {
    padding: 10px 8px 8px;
    font-size: 14px;
    min-width: unset;
  }
}