@media screen and (min-width: 989px) {

/* START APEX BUILT IN THEME OVERRIDE */
  .apex_grid_container { width:988px }
  .apex_span_1 { width:80px }
  .apex_span_2 { width:160px }
  .apex_span_3 { width:240px }
  .apex_span_4 { width:320px }
  .apex_span_5 { width:400px }
  .apex_span_6 { width:480px }
  .apex_span_7 { width:560px }
  .apex_span_8 { width:640px }
  .apex_span_9 { width:720px }
  .apex_span_10 { width:800px }
  .apex_span_11 { width:880px }
  .apex_span_12 { width:987px }
/* END APEX BUILT IN THEME OVERRIDE */

  .desktop-only {
    display: initial !important;
  }
  .mobile-only {
    diplay: none !important;
    height: 0;
  }
}


@media screen and (max-width: 988px) {
  .desktop-only {
    diplay: none !important;
    height: 0;
  }
  .mobile-only {
    display: initial !important;
  }

  /* Maybe only for narrow, but maybe here? 
  header#uHeader nav ul.uMainNav li {
    display: block !important;
    clear: left;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  header#uHeader nav ul.uMainNav li a,
  header#uHeader nav ul.uMainNav li a.active {
    width: 100% !important;
    height: 100% !important;
    margin-left: 0;  margin-right: 0;
    padding-left: 0; padding-right: 0;
  }
  /**/

  /* Maybe buggy?  */
  header#uHeader nav, header#uHeader nav .apex_grid_container {
    overflow: visible !important;
  }
  /**/

  div#uOneCol.extraWide {
    width: auto !important;
    margin: 0 10px 0 10px !important;
  }
  div#uOneCol.extraWide > section.uRegion {
    display: block;
  }
  div#uOneCol.extraWide {
    text-align: left;
  }

}

@media screen and (max-width: 767px) {
  .desktop-only {
    display: none !important;
    height: 0;
  }
  .mobile-only {
    display: initial !important;
  }

  #uLogo {
    display: block;
    clear: left;
    float: left;
    max-width: 99%;
    height: auto;
  }
  #headerLinks {
    display: block;
    position: static !important;
  }

 /*
  #uLogo img.LG {
      display: none !important;
      height: 0 !important;
  }
  #uLogo img.SM {
      display: initial !important;
  }
  #uLogo span.alt-text {
    display: initial !important;
    font-weight: bold;
    font-size: 18px;
    font-weight: bold;
    color: #700017;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    display: block;
  }
  */

  header#uHeader nav ul.uMainNav {
    height: 100% !important;
  }

  header#uHeader nav ul.uMainNav li {
    display: block !important;
    clear: left;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  header#uHeader nav ul.uMainNav li a,
  header#uHeader nav ul.uMainNav li a.active {
    width: 100% !important;
    margin-left: 0;  margin-right: 0;
    padding-left: 0; padding-right: 0;
  }

  .apex_span_1, .apex_span_2, .apex_span_3, .apex_span_4,
  .apex_span_5, .apex_span_6, .apex_span_7, .apex_span_8,
  .apex_span_9, .apex_span_10, .apex_span_11, .apex_span_12,
  .apex_grid_container {
    width: 100%;
    padding-left: 0;
  }

  #uFooter div.uRight {
    float: left !important;
  }

}

@media screen and (max-width: 480px) {
  input.text_field { max-width: 70% !important; }
}