/*
 * 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;
    }
  }
}

/*
 * Mobile header while scrolling: the restored scroll-state rules in site.css
 * are desktop rules. On <=991px they showed the inverse logo next to the
 * mobile logo (logo appeared twice) and removed the side margin.
 */
@media (max-width: 991px) {
  .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand {
    margin: 20px 15px 21px;
  }
  .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-brand .c-desktop-logo-inverse {
    display: none;
  }
  .c-page-on-scroll.c-layout-header-fixed .c-layout-header .c-mega-menu .nav.navbar-nav > li > .c-link {
    padding: 10px 20px;
    min-height: 0;
  }
}

/*
 * Mobile main menu: site.js toggles .c-shown on the menu and .c-open on a
 * dropdown item, but the matching display rules were missing, so the menu
 * did not open. The arrow glyph is missing from the icon font subset and is
 * drawn with CSS instead.
 */
@media (max-width: 991px) {
  .c-layout-header .c-navbar .c-mega-menu.c-shown {
    display: block;
    overflow-y: auto;
  }
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-open > .dropdown-menu {
    display: block;
  }
  .c-layout-header .c-navbar .c-mega-menu.c-mega-menu-light.c-mega-menu-dark-mobile > .nav.navbar-nav > li > .dropdown-menu {
    background: transparent !important;
    box-shadow: none;
  }
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li a.dropdown-toggle > .c-arrow {
    cursor: pointer;
  }
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li a.dropdown-toggle > .c-arrow:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-open a.dropdown-toggle > .c-arrow:before {
    transform: rotate(-135deg);
    margin-top: 6px;
  }
  .c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li.c-active > a,
  .c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark-mobile > .nav.navbar-nav > li .dropdown-menu > li:hover > a {
    color: #c0cf48;
  }
}

/* Mobile phone bar (⋮ button): site.js sets .c-topbar-expanded on <body>. */
@media (max-width: 991px) {
  .c-layout-header-topbar-collapse.c-topbar-expanded .c-layout-header .c-topbar {
    display: block;
  }
}