/* ========================================================================== triplerind.com - responsive layer for the flattened FlexSite build Loaded last, after publicstyle.css / mbcsmbmcp.css. Desktop is untouched; everything here is inside a max-width media query except the form styles. ========================================================================== */ /* ---------- contact / quote forms (all widths) --------------------------- */ .rrrForm { margin: 0; } .rrrFormTable { border: 0; } .rrrFormTable td { border: none; padding: 6px 6px; vertical-align: top; } .rrrFormTable .rrrLabel { white-space: nowrap; padding-top: 12px; } .rrrFormTable .rrrReq { color: #cc0000; font-weight: bold; padding-top: 12px; } .rrrForm input[type="text"], .rrrForm input[type="email"], .rrrForm input[type="tel"], .rrrForm textarea { width: 302px; max-width: 100%; box-sizing: border-box; padding: 8px 10px; font-family: inherit; font-size: 15px; border: 1px solid #c6c6c6; background: #fff; color: #000; border-radius: 2px; } .rrrForm textarea { min-height: 150px; resize: vertical; } .rrrForm input:focus, .rrrForm textarea:focus { outline: none; border-color: #26246a; box-shadow: 0 0 0 2px rgba(38,36,106,.18); } .rrrForm .rrrHint { font-size: 12px; color: #666; margin-top: 4px; } .rrrSubmit { display: inline-block; border: 0; cursor: pointer; background: #d9463f; color: #fff; font-family: inherit; font-weight: bold; font-size: 15px; letter-spacing: .04em; padding: 12px 28px; border-radius: 2px; } .rrrSubmit:hover { background: #c13b34; } /* honeypot - off-screen, never shown to a human */ .rrrHp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* sidebar "HOW CAN WE HELP?" quick-quote form (replaces the old iform iframe) */ .rrrMini { max-width: 280px; } .rrrMini p { margin: 0 0 8px; } .rrrMini input[type="text"], .rrrMini input[type="email"], .rrrMini input[type="tel"] { width: 100% !important; } .rrrSubmitMini { width: 150px; padding: 11px 0; } .rrrFormMsg { padding: 14px 18px; margin: 0 0 18px; border-radius: 3px; font-size: 16px; } .rrrFormOk { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; } .rrrFormErr { background: #fdecea; border: 1px solid #f5b5ae; color: #a3241b; } /* the reCAPTCHA iframe is a fixed 304px - let it shrink on small screens */ @media (max-width: 380px) { .g-recaptcha { transform: scale(.85); transform-origin: 0 0; } } /* ---------- mobile nav: hidden at every width by default ----------------- */ /* rrr-mobile.js appends the burger, the slide-in panel and its backdrop to on every page. They are only ever shown by the <=900px block below, so they MUST be hidden here at base level - otherwise the panel's links and its close button render as loose text under the footer on desktop. */ #rrrBurger, #rrrNav, #rrrBackdrop { display: none; } /* ========================================================================== <= 900px : fluid header, hamburger nav, fluid tables ========================================================================== */ @media (max-width: 900px) { /* The whole page is a legacy layout with fixed pixel widths (1000px / 1200px). A table will not render narrower than its min-content width no matter what width you set on it - setting width:auto only makes it shrink-to-fit that same minimum. The only reliable fix is to stop the cells behaving as table cells at all, so they stack in source order. The slider and the gallery widget manage their own layout and are left alone. */ table, tbody, tr, td, th { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; } td, th { padding-left: 0 !important; padding-right: 0 !important; } /* Padding has to sit on the CELLS: padding on a

does not inset its rows. Applied to the outermost cell of each page section so every nested block inherits the same gutter. */ .bigTable > tbody > tr > td, #rowHome > td, #rowFooter > td, [id^="rowSubFooter"] > td, [id^="rowPage"] > td, [id^="rowFooter"] > td { padding-left: 18px !important; padding-right: 18px !important; } /* full-bleed sections keep their edge-to-edge look */ #rowSlideshow > td, .header > *, .bigTable > tbody > tr > td:has(> .header), .bigTable > tbody > tr > td:has(> .converter) { padding-left: 0 !important; padding-right: 0 !important; } #layerslider table, #layerslider tbody, #layerslider tr, #layerslider td, .fp-slides table, .fp-slides tbody, .fp-slides tr, .fp-slides td { display: revert !important; } colgroup, col { display: none !important; } img { max-width: 100%; height: auto; } /* Catch-all for content authored with a fixed pixel width in an inline style (e.g. the 600px block on the blog post). The slider positions its own layers absolutely and must keep its declared widths. */ div[style*="width:"], p[style*="width:"], span[style*="width:"], img[style*="width:"], iframe[style*="width:"] { max-width: 100% !important; } #layerslider, #layerslider *, #layerslider-container-fw { max-width: none !important; } iframe { max-width: 100% !important; } body { overflow-x: hidden; } /* --- header ----------------------------------------------------------- */ /* The header is a 1000px table laying out: logo | estimate CTA + phone + search. Its min-content width is ~594px and a

will not shrink below that no matter what width you set, so the cells are made block-level and allowed to stack instead. */ .header { position: static !important; height: auto !important; background: #fff !important; padding: 14px 0 12px !important; } .header table, .header tbody, .header tr, .header td { display: block !important; width: 100% !important; max-width: 100% !important; } .header td { text-align: center !important; padding: 0 !important; height: auto !important; } .header img { max-width: 100% !important; height: auto !important; } .header div[align="right"] { text-align: center !important; } .header [style*="text-align: right"], .header [style*="text-align:right"] { text-align: center !important; } .header table { margin: 0 auto !important; } /* stacked, centred: logo -> estimate CTA -> phone -> search */ .header .rrrLogo { display: block !important; width: 200px !important; margin: 0 auto 14px !important; } .header .rrrCta { display: block !important; width: min(300px, 86%) !important; height: auto !important; margin: 0 auto 12px !important; } .header strong, .header span { font-size: 16px !important; } /* The search input and its button must stay side by side, so this one nested table keeps real table layout after the global block reset. */ .header .rrrSearch, .header .rrrSearch tbody, .header .rrrSearch tr, .header .rrrSearch td { display: revert !important; width: auto !important; } .header .rrrSearch { display: inline-table !important; margin: 10px auto 2px !important; background: #d7d7d7; border-radius: 3px; overflow: hidden; } .header .rrrSearch td { vertical-align: middle !important; padding: 0 !important; } .header #txtSearchBar { width: 200px !important; height: 34px !important; font-size: 15px !important; } .header .rrrSearch img { display: block; margin: 0 8px; } /* the desktop image menu cannot fit - replaced by the hamburger below */ .converter, #mbmcpebul_table, #mbmcpebul_table_burger { display: none !important; } #rrrBurger { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1002; width: 100%; box-sizing: border-box; background: #000; border: 0; padding: 15px 18px; text-align: left; cursor: pointer; -webkit-appearance: none; } /* only the bars - NOT the label - get bar styling */ #rrrBurger .rrrBurgerBars { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; flex: 0 0 24px; } #rrrBurger .rrrBurgerBars span { display: block; width: 24px; height: 3px; margin: 0; background: #fff; border-radius: 2px; } #rrrBurger .rrrBurgerLabel { color: #fff; font-weight: bold; letter-spacing: .1em; font-size: 14px; line-height: 1; text-transform: uppercase; } /* --- slide-in nav ------------------------------------------------------ */ #rrrNav { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: #14123f; z-index: 1100; overflow-y: auto; transform: translateX(-100%); visibility: hidden; box-shadow: 2px 0 14px rgba(0,0,0,.4); padding: 18px 0 40px; } #rrrNav.open { transform: translateX(0); visibility: visible; } #rrrNav a { display: block; padding: 14px 22px; color: #fff; text-decoration: none; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.12); } #rrrNav a:hover { background: rgba(255,255,255,.08); } #rrrNavClose { display: block; width: 100%; box-sizing: border-box; text-align: right; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 4px 20px 14px; cursor: pointer; } #rrrBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; display: none; } #rrrBackdrop.open { display: block; } body.rrrNavOpen { overflow: hidden; } /* the quote CTA + phone sit side by side on desktop; stack them */ .header a img[src*="request-a-free-estrimate"] { max-width: 260px; } /* --- slider ----------------------------------------------------------- */ /* LayerSlider is built responsive:false here: every caption layer is absolutely positioned against a fixed 1200px stage, so on a phone the headline runs off the edge ("HIGHWAY SAE..."). Rescaling the type does not help because the left offsets are pixel values too. Show the slide photography only and drop the text layers - the same headlines are the page's own H1s directly below. */ #layerslider, #layerslider-container-fw { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } #layerslider { height: 42vw !important; min-height: 150px; max-height: 260px; } #layerslider .ls-s1, #layerslider .ls-s2, #layerslider .ls-s3 { display: none !important; } /* keep the slide photo filling the stage */ #layerslider .ls-bg { height: 100% !important; width: auto !important; max-width: none !important; } /* --- home 3-up columns ------------------------------------------------- */ #rowHome td[style*="width: 30%"], #rowHome td[style*="width:30%"], #rowHome td[style*="width: 33%"], #rowHome td[style*="width:33%"] { display: block; width: 100% !important; padding: 0 18px 22px !important; box-sizing: border-box; } /* --- footer / sub-footer ----------------------------------------------- */ [id^="rowSubFooter"] td, #rowFooter td { padding-left: 18px; padding-right: 18px; } [id^="rowSubFooter"] table td[style*="width: 30%"], [id^="rowSubFooter"] table td[style*="width:30%"] { display: block; width: 100% !important; padding: 0 0 22px !important; } /* --- page content ------------------------------------------------------ */ #rowHome > td, [id^="rowPage"] > td { padding-left: 0; padding-right: 0; } h1.pageHeader { font-size: 26px; padding-left: 18px; padding-right: 18px; } /* google map embed */ iframe[src*="google.com/maps"] { width: 100% !important; max-width: 100%; height: 280px; } /* gallery thumbs 2-up */ .fp-slides, .fp-slidesContainer { max-width: 100% !important; } } /* ========================================================================== <= 600px : single column ========================================================================== */ @media (max-width: 600px) { #layerslider .ls-s1 { font-size: 6vw !important; } h1.pageHeader { font-size: 22px; } .rrrFormTable, .rrrFormTable tbody, .rrrFormTable tr, .rrrFormTable td { display: block; width: 100% !important; } .rrrFormTable .rrrReq { display: none; } .rrrFormTable .rrrLabel { padding: 10px 0 2px; font-weight: bold; } .rrrForm input[type="text"], .rrrForm input[type="email"], .rrrForm input[type="tel"], .rrrForm textarea { width: 100%; } .rrrSubmit { width: 100%; } }