/* Small responsive fixes layered on top of the (otherwise untouched) portgenix.com
   theme in style.css, so the original theme files can stay a verbatim copy. */

/* The logo renders at its natural 300x111 px size with nothing scaling it down,
   so on narrow phones it overflows past the right edge of the navbar. Cap it to
   the available width instead - this is a no-op on wider screens where there's
   already plenty of room. */
.navbar-brand img {
  max-width: 100%;
  height: auto;
}

/* bootstrap.css ships with an unconditional `.navbar { margin-left: 30px; }`
   rule that shifts the whole bar (brand, links, button) 30px past the right
   edge on narrow/collapsed (navbar-expand-lg) screens, clipping the logo.
   Remove the shift below the lg breakpoint where the navbar collapses. */
@media screen and (max-width: 991.98px) {
  .navbar {
    margin-left: 0;
  }
}

@media screen and (max-width: 520px) {
  .navbar-brand img {
    max-width: 220px;
  }

  /* The two hero buttons are inline-block with a fixed left margin on the
     second one, so on very narrow screens their combined width is wider than
     the viewport and the pair gets clipped off the left edge. Stack them
     full-width instead so they can never overflow horizontally. */
  .fh5co-hero-inner .download-btn-first,
  .fh5co-hero-inner .features-btn-first {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 15px;
  }

  /* The hero phone mockup is positioned with left:0 + right:0 while only a
     fixed height is set, which lets the browser pick an intrinsic width that
     overflows the viewport. Drop out of absolute positioning on narrow
     screens so it just flows under the buttons (centered via the
     text-align: center already set on .fh5co-hero-inner at this breakpoint)
     instead of trying to replicate the desktop overlay layout. */
  .fh5co-hero-inner .fh5co-hero-smartphone {
    position: static;
    width: 70%;
    max-width: 260px;
    height: auto;
    margin: 30px auto 0;
  }

  /* With the phone mockup now flowing normally instead of being absolutely
     positioned, let the wrapper grow to fit its content rather than clipping
     it at a fixed height. */
  #fh5co-hero-wrapper {
    height: auto;
    padding-bottom: 40px;
  }

  /* The feature-row phone mockups all share a fixed `height: 550px` with no
     width constraint; that's fine for the tall portrait screenshots, but the
     one landscape screenshot (waitabit-1.png) computes an aspect-correct
     width of ~700px at that height, which blows past its 295px column.
     Cap width so the browser rescales height to match instead. */
  .fh5co-features-outer .col-sm-6 img {
    max-width: 100%;
    height: auto;
  }
}