/* Responsive fixes for rlpipes.com — added AFTER css/index.css.
   Desktop (viewport > 1000px): layout unchanged, pixel-identical to the original.
   Mobile/tablet: fluid width, stacked columns, no horizontal scrolling. */

video, .rimage img, .rimage video { max-width: 100%; height: auto; }

@media (max-width: 1000px) {
  /* fixed heights written in the old code overflow on phones -> auto */
  .top { height: auto !important; }
  .nav, .pnav { height: auto !important; padding-bottom: 6px; }
  .clear[style*="height"] { height: auto !important; min-height: 0 !important; margin-bottom: 20px; }
  .aright1[style*="height"] { height: auto !important; }
  .bread9[style*="height"] { height: auto !important; margin-bottom: 14px; }

  .top1, .nav, .pnav, .content, .ibottom, .ibanner {
    width: 100% !important;
    max-width: 980px;
  }
  .acontent { width: auto !important; }
  /* mobile-only: show the main column (banner + content) before the sidebar */
  .acontent { display: flex; flex-direction: column; }
  .acontent .aright { order: -1; }
  .banner { min-width: 0; }
  img { max-width: 100%; height: auto; box-sizing: border-box; }
  video { max-width: 100% !important; height: auto !important; }

  .aleft, .aright, .application, .app, .left, .right, .vright {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .aright { margin-top: 24px; }
  .application, .app { margin-top: 24px; }
  .application ul, .app ul { width: 100%; box-sizing: border-box; }
  table, table[width] { width: 100% !important; max-width: 100% !important; }
  td[width], th[width] { width: auto !important; }

  .nav ul li { float: none; display: inline-block; margin-left: 10px !important; }
  .logo { width: 100%; max-width: 483px; }

  .iapplication, .iapplication2, .iproduct, .iproduct2 {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 10px 0 0 0 !important;
  }
  .aright1, .abenefit, .abread, .abread2, .op, .pdetail, .pright, .pleft {
    width: 100% !important;
  }
  .pright { float: none !important; }
  .ibottom1 ul, .ibottom3 dl { width: 100% !important; }
  .ib2left { width: 100% !important; }
  .ibottom3 dd, .ibottom3 dt { width: auto; }
  #form th, #form td { float: none !important; margin-left: 0 !important; }
  .right1 span, .right2 span { margin-left: 0; }
}