@media screen and (max-width: 900px) {

  .headergraphic {
    width: 100%;
    height: auto;
  }



  #container, .container {
    width: 100%;
  }

  .zoomImg { display: none !important }

  HTML, BODY {
         box-sizing: border-box;
         width: 100%;

    margin: 0;
    padding: 8px;
    overflow-x: hidden;
  }

  #breadcrumbs A {
    display: block;
  }

  #breadcrumbs .raquo {
    display: none;
  }

  #hero {
    width: 100% !important;
    background-size: contain !important;
    height: auto !important;
  }

  #logo {
    position: absolute;
    clip: rect(0px,137px,80px,0px);
  }

  .benefit {
    width: 48% !important;
    text-align: center !important;
  }

   .benefit figcaption { width: 100% !important; }

  .benefit2 {
    float: left !important;
    margin-right: 6px;
    margin-left: 0px;
  }

.statements DIV { display: block; line-height: 1.5em }

  .heromob { width: 100% !important; }

  #heroi img.background {
    height: auto !important;
  }

  #hero {
    /* height: auto !important; */
  }

  #heroi:after { content: ""; diaply: table; clear: both; }

  .xproductpics {
    display: block;
    float: none !important;
  }

  .xproductdescription {
    display: block;
    float: none;
    margin-left: 0 !important;
  }

  TD.mainc { width: 100%; }
  TD.sidebar { width: 0%; display: none; }

  #tipoffs { display: none; }

  #nav li { margin-right: 0px; }
  #nav li:hover ul{ display: none; }
  #navbar {
    height: auto;
  }

  #boxes { clear: both; }
  .front {
    margin-top: 0px !important;
  }
  #boxes .box .main { background-size: cover;  }
  #boxes .box { width: 48%;  margin-bottom: 12px }

  #boxes .box:nth-child(even) { margin-right: 0; }

  #footerbar TABLE TD {
    display: inline-block;
    width: 100%;
  }

  .accessible-megamenu { width: 100%; }

  #navbar #search {
    display: none;
    float: none;
  }

  #anav li a {
    display: block;
    float: none;
  }

  .nomob { display: none !important }
  .onlymob { display: inline !important }

    .benefits { display: none; }

}