/* Things Avada's JavaScript used to do, done in CSS instead. */

/* Entrance animations: content started hidden until a script revealed it. */
.fusion-animated, [data-animationtype] { visibility: visible !important; opacity: 1 !important; animation: none !important; }

/* Mobile menu (Avada cloned the desktop menu into this holder with JS). */
.fusion-mobile-nav-holder > ul { display: none; }
.fusion-mobile-nav-holder.fusion-mobile-menu-expanded { display: block !important; }
.fusion-mobile-nav-holder.fusion-mobile-menu-expanded > ul { display: block; }
.fusion-mobile-nav-holder .mobile-nav-heading > span { display: block; padding: 0 20px; font-family: Montserrat, Arial, Helvetica, sans-serif; color: #333; }

/* Phone menu button: at least 44x44px and dark enough to see (it was 21px, light grey on white).
   The icon itself is drawn by the ::before glyph, which carried its own light grey colour. */
.fusion-mobile-menu-icons a.fusion-icon { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 28px !important; color: #1f2933 !important; }
.fusion-mobile-menu-icons a.fusion-icon::before, .fusion-mobile-menu-icons a.fusion-icon::after { color: #1f2933 !important; }

/* Static first slide in place of Revolution Slider. */
.static-hero { background-size: cover; background-position: center center; min-height: 380px; display: flex; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; }
/* width is explicit so aspect-ratio + min-height can't widen the hero past the screen on phones */
.static-hero-inner { min-width: 0; box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 0 30px; width: 100%; }
.static-hero-inner p { max-width: 560px; color: #fff; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; background: rgba(3, 83, 160, .85); padding: 20px 25px; margin: 0; }

/* Home hero text sits on a dark panel so every line reads against the floor photo (all lines were under 3:1). */
.hero-panel > .fusion-column-wrapper { background-color: rgba(8, 20, 36, .84) !important; padding: 24px 28px !important; box-sizing: border-box; }

/* Acid Stain page, lower Quick Contact form: a solid dark panel with light text, so every heading, label and
   instruction reads whatever the photo behind it shows (round 3 measured CONTACT at 1.04:1 and labels under 4.5:1). */
.acid-contact { background: #081424 !important; color: #fff; padding: 24px 20px; box-sizing: border-box; }
.acid-contact .contact-titletop p, .acid-contact .contact-titletop p *:not(.red), .acid-contact .contact-middle-titlt p, .acid-contact .label p, .acid-contact .label { color: #fff !important; }
.acid-contact .contact-titletop .red, .acid-contact .contact-titletop p span.red { color: #4fc3f7 !important; }
.acid-contact .contact-middle-titlt a { color: #7fd4ff !important; }
.acid-contact .contact-middle-titlt i { color: #4fc3f7 !important; }

/* Acid Stain page, "Benefits of / Acid Stain Concrete Surfaces": its own dark panel (the band image behind it
   is hidden on phones and tablets, which left white text on white), and room between the two headings. */
.benefits-head { background: #0b2a45; padding: 22px 26px 8px; box-sizing: border-box; }
.benefits-head h2.inner-serv-top { color: #4fc3f7 !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
.benefits-head .middle-white-big { color: #fff !important; line-height: 1.2 !important; margin: 0 0 14px; }
.benefits-head .white, .benefits-head .white.ohio-text { color: #fff !important; }

/* Lead form honeypot: off-screen, never seen by people. */
.lead-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-response-output[hidden] { display: none; }
form.sent .wpcf7-response-output { border: 2px solid #46b450; }
form.failed .wpcf7-response-output, form.invalid .wpcf7-response-output { border: 2px solid #dc3232; }

/* Service cards with their own photo: same shape for every card, whatever the photo's proportions. */
.card-photo, .card-photo img { display: block; width: 100%; }
.card-photo img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Mobile menu items (Avada 7 styles these when its JS builds the menu).
   Rows are at least 44px tall, long service names wrap instead of running past the screen edge. */
.fusion-mobile-nav-holder { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; }
.fusion-mobile-nav-holder .fusion-mobile-menu { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; }
.fusion-mobile-nav-holder .fusion-mobile-nav-item { box-sizing: border-box; max-width: 100%; }
.fusion-mobile-nav-holder .fusion-mobile-nav-item a { display: flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 8px 20px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid #e5e5e5; color: #333; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 14px; }
.fusion-mobile-nav-holder .fusion-mobile-sub-item a { padding-left: 36px; }
.fusion-mobile-nav-holder .fusion-mobile-current-nav-item > a, .fusion-mobile-nav-holder .fusion-mobile-current-nav-item > a .menu-text { color: #fff; }

/* Lazy-load placeholders are gone; never hide images waiting for a script. */
img.lazyload, img.lazyloading, .lazyload { opacity: 1 !important; visibility: visible !important; }

/* Font Awesome 4.7 icon font, self-hosted (the old sites loaded it from use.fontawesome.com). */
@font-face { font-family: 'FontAwesome'; src: url('/fonts/fa4/fontawesome-webfont.woff2') format('woff2'), url('/fonts/fa4/fontawesome-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; }
@font-face { font-family: 'fontawesome'; src: url('/fonts/fa4/fontawesome-webfont.woff2') format('woff2'), url('/fonts/fa4/fontawesome-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; }

/* Avada "100% height" containers: its JS set them to the window height minus the header, growing with the content.
   Without that JS they fall back to a fixed height and taller content spills under the header. */
.fullwidth-box.hundred-percent-height { height: auto !important; min-height: calc(100vh - 160px); }
.fullwidth-box.hundred-percent-height > .fusion-fullwidth-center-content { height: auto !important; min-height: inherit; }

/* WordPress theme page preloaders: their hide-on-load script is not carried over, so they would cover the page forever. */
#ct-loadding,.ct-loader,#preloader,.preloader,#page-preloader,.page-loader,#loader-wrapper,.site-loader{display:none!important}