/* ============================================================
   OnTrac — .loginx slider wrapper

   css/responsive.css:86, inside @media (min-width: 1200px):

       .loginx { margin: 0px 200px; }

   200px of side margin with no corresponding reduction in width. The
   element still computes to the full container width, so instead of
   insetting the slider the margins shove it 200px right and 200px past
   its wrapper's right edge. Measured on six pages at 1440: wrapper ends
   at 1380, .loginx ends at 1580.

   Zeroing the margins is the whole fix.

   DO NOT also set `width: auto`. .loginx is a direct child of a
   Bootstrap `.row.d-flex`, where `.row > * { width: 100% }` is load
   bearing — width:auto makes the flex item shrink to fit content whose
   own width depends on the parent, so it collapses to its own 24px of
   padding. Slick then measures 0 at init and stamps `width: 0px` onto
   every slide, and the slider disappears entirely above 1200px. That
   was the first attempt at this and it blanked the StarTrac screenshots.

   No media query needed: below 1200px the margin was never set, so
   zeroing it changes nothing there.
   ============================================================ */

.loginx {
  margin-left: 0;
  margin-right: 0;
}

/* Centre the slide image.

   Zeroing the margins above put .loginx back inside its wrapper, which
   exposed a second problem that the 200px shove had been masking: the
   images are narrower than the slide they sit in — 841px and 900px
   inside a 1296px slide — and had no horizontal margins, so they sat
   hard against the left edge with 400-455px of empty space to the right.

   Auto margins centre them at whatever width they resolve to, so this
   makes no assumption about any particular page's artwork. StarTrac
   sets its own max-width and radius in a page-scoped rule and is
   unaffected. */
.loginx .gamificationslider {
  display: block;
  margin-left: auto;
  margin-right: auto;
}