/* Mobile/tablet header (<=980px, where the hamburger shows).
   Divi stacks the logo and menu columns and pulls the menu up with a negative
   margin; once the header turns sticky its fixed 89px height pushes the
   hamburger onto the bottom border. Lay the row out side by side instead. */
@media only screen and (max-width: 980px) {
  .et_pb_row_1_tb_header.et_pb_row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  .et_pb_row_1_tb_header > .et_pb_column_2_tb_header {
    flex: 1 1 auto;
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .et_pb_row_1_tb_header > .et_pb_column_3_tb_header {
    flex: 0 0 auto;
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .et_pb_blurb_0_tb_header.et_pb_blurb {
    margin-bottom: 0 !important;
  }
  .et_pb_menu_0_tb_header.et_pb_menu {
    margin-top: 0 !important;
  }
  /* Divi's base .mobile_menu_bar{bottom:10px} lifts the icon off the row's centre line. */
  .et_pb_menu_0_tb_header .mobile_menu_bar {
    bottom: 0 !important;
  }

  /* Let the dropdown span the whole row, as it did when the columns stacked. */
  .et_pb_row_1_tb_header > .et_pb_column_3_tb_header,
  .et_pb_menu_0_tb_header,
  .et_pb_menu_0_tb_header .et_pb_menu_inner_container,
  .et_pb_menu_0_tb_header .et_pb_menu__wrap,
  .et_pb_menu_0_tb_header .et_mobile_nav_menu,
  .et_pb_menu_0_tb_header .mobile_nav {
    position: static !important;
  }
  .et_pb_menu_0_tb_header .et_mobile_menu {
    top: 100%;
  }

  /* Sticky state: size to the content instead of a fixed 89px. */
  .et_pb_sticky.et_pb_section_1_tb_header {
    height: auto !important;
    padding-bottom: 0 !important;
  }
  .et_pb_sticky .et_pb_row_1_tb_header.et_pb_row {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}