/* Responsive overrides for the fixed-width layout in application-*.css.
   Viewports of 1200px and wider keep the original rules. */

.navbar-phone {
  display: none;
}

#phone-footer {
  font-size: 24px;
  color: #333;
}

/* body is a centering flex column: width:auto would shrink-wrap #main to its widest child. */
@media (max-width: 1199px) {
  #main.products {
    width: 100%;
    max-width: 1170px;
  }
}

@media (max-width: 991px) {
  #main {
    width: 100%;
    max-width: 940px;
  }

  /* The side menu is pinned with position:fixed for the two-column desktop layout. */
  #price-menu {
    position: static;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .navbar-phone {
    display: block;
    float: left;
    padding: 15px 6px;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
  }

  .navbar-phone:hover,
  .navbar-phone:focus {
    color: #000;
    text-decoration: none;
  }

  /* The header link above replaces the phone inside the collapsed menu. */
  .top-phone {
    display: none;
  }

  body {
    font-size: 16px;
    line-height: 1.5;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }
}

@media (max-width: 359px) {
  .navbar-phone {
    font-size: 14px;
    padding-left: 2px;
    padding-right: 2px;
  }
}