/*
 * IT-world responsive correction v22
 *
 * This file is intentionally loaded AFTER the site/animation styles.
 * It only targets the narrow-desktop range used by the original
 * Revolution Slider responsive stage (779–1239 CSS px).
 */

@media (min-width: 779px) and (max-width: 1239px) {

  /*
   * The original slider uses a 1240 x 500 design stage and scales
   * that stage proportionally below 1240 px.
   */
  .itw-hero-slider {
    height: 40.3225806452vw !important; /* 500 / 1240 * 100 */
    min-height: 0 !important;
    max-height: 500px !important;
  }

  /*
   * Use the viewport width as the scaled stage width. This avoids
   * keeping a fixed 1240px canvas that can push the text outside
   * a narrow desktop viewport.
   */
  .itw-hero-slider__grid {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    transform: none !important;
  }

  /*
   * Revolution Slider's 1240px-level layer scales proportionally:
   * 50px right offset, 50px vertical offset, 55px/35px typography.
   */
  .itw-hero-slider__content {
    right: 4.0322580645vw !important;
    top: calc(50% + 4.0322580645vw) !important;
    transform: translateY(-50%) !important;
  }

  /* The original desktop layer uses 55px / 35px here.
     Keep the typography at those sizes; only the 1240px stage is responsive. */
  .itw-hero-slider__content h3,
  .itw-hero-slider__content .slidersecondline {
    font-size: 55px !important;
    line-height: 1.1 !important;
  }

  .itw-hero-slider__content .sliderfirstline {
    font-size: 35px !important;
    line-height: 1.1 !important;
  }

  /*
   * The original child theme removes the top padding of the
   * homepage content box on this layout. Prevent the generic
   * <=991px 30px padding from creating the visible gap above
   * the hero.
   */
  .home .c-content-box.c-size-md {
    padding-top: 0 !important;
  }

  /* Never create horizontal page scrolling from the full-width hero. */
  html,
  body {
    overflow-x: clip !important;
  }
}

@supports not (overflow: clip) {
  @media (min-width: 779px) and (max-width: 1239px) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }
}