/* Theme Name: devdmbootstrap3-child Theme URI: http://devdm.com/DevDmBootstrap3 Author: Danny Machal Author URI: http://devdm.com/ Description: devdmbootstrap3 v1.80 child theme upgraded to Bootstrap 5.3.8 (P3 migration). WP Engine Version: 2.2.84 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, rtl-language-support, theme-options, translation-ready Text Domain: devdmbootstrap3 Template: devdmbootstrap3 */ /* BS5 compatibility: utilities removed or renamed upstream */ .text-right, .text-end { text-align: right !important; } .text-left, .text-start { text-align: left !important; } .text-center { text-align: center !important; } .list-inline { padding-left: 0; list-style: none; } .list-inline > li { display: inline-block; } .list-inline-item { display: inline-block; } /* v2.2.55 — BS3's scaffolding sets `html { font-size: 10px }`; BS5 dropped it, so dev fell back to the browser default 16px. Every rem in the theme's own CSS (.card-block padding 2rem, .card-block h3 margins, etc.) was authored against the 10px root, so on the upgrade they all rendered 60% too large until they were pinned back one at a time in px. */ html { font-size: 10px; } /* BS3 .img-responsive removed in BS5 (.img-fluid) — WP page content still uses img-responsive */ .img-responsive { display: block; height: auto; max-width: 100%; } /* BS3 .clear removed from BS5 utilities — brand singles (index.php) use div.clear after floated thumb */ .clear { clear: both; } /* BS5 container parity: BS3 width tiers + 15px horizontal padding site-wide. v2.2.60 — dropped `--bs-gutter-x: 30px`; prod BS3 never declares it, and explicit padding already supplies the 15px sides. Row shims zero --bs-gutter-x locally. */ .container { padding-left: 15px; padding-right: 15px; } /* BS5: nav wrapper container matches prod BS3 centered width + 15px inner padding */ #header-nav .container { padding-left: 15px; padding-right: 15px; } /* BS5: inner nav container matches prod BS3 centered width + 15px inner padding */ #nav .container { padding-left: 15px; padding-right: 15px; } /* --------------------------------------------------------------------------- v2.2.49 — container box model pinned to prod. Mirrors prod devdmbootstrap3-child style.css, which overrides the BS3 defaults as: @media (max-width: 768px) { .container { margin: 0; padding: 0 20px } } @media (max-width: 768px) { header .container { margin: 0; padding: 0 } header .row { margin: 0 } } @media (max-width: 992px) { header .container { width: 100% } } nav .container { margin: 0; padding: 0 } Prod is border-box throughout; the BS5 build had drifted to content-box, which made a 750px container measure 780px and pushed every md capture 20px wide. --------------------------------------------------------------------------- */ @media (max-width: 768px) { .container { box-sizing: border-box; margin-left: 0; margin-right: 0; max-width: none; padding-left: 20px; padding-right: 20px; } /* the `html body# .container` blocks further down are id-scoped, so the header override needs its own id to stay ahead of them */ html body header .container, html body div#header-bottom > .container, html body div#header-nav > .container { padding-left: 0; padding-right: 0; } /* specificity has to clear both the global `.container > .row` -15px gutter and the id-scoped `#header-bottom .container > .row` / `html body# .container > .row` rules */ html body header .row, html body header .container > .row, html body header .row .row, html body div#header-bottom > .container > .row, html body div#header-nav > .container > .row, html body div#header-bottom > .container .row, html body div#header-nav > .container .row { margin-left: 0; margin-right: 0; } /* prod: `header .col-sm-8, header .col-sm-4 { padding: 0 }` and `div#header-bottom .col-sm-7.col-md-8 { padding: 0 }` */ html body header .col-sm-4, html body header .col-sm-8, html body #header-bottom .col-sm-7.col-md-8 { padding-left: 0; padding-right: 0; } /* prod: `.col-sm-6, .col-sm-12 { padding: 0 }` below the md tier. Repeated at the specificity of the theme's own footer/address column rules so it actually wins. */ html body .col-sm-6, html body .col-sm-12, html body .row > .col-sm-6, html body .row > .col-sm-12, html body .row .row > .col-sm-6, html body .row .row > .col-sm-12, html body #footer .footer-top address .row > .col-sm-6, html body #footer .footer-top address .row > .col-sm-12, html body #footer .footer-top .container > .row > .col-sm-12, html body #footer .footer-bottom .container > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } } /* v2.2.49 — BS3 gutters on nested rows. The child theme zeroes --bs-gutter-x on .container > .row and BS5 inherits it to every descendant row, collapsing the -15px gutters prod keeps on nested rows (footer address block is the worst case). */ .row .row { --bs-gutter-x: 0; margin-left: -15px; margin-right: -15px; } .row .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } /* BS3 floats every col from 768px up; the existing shim only covers .container > .row */ @media (min-width: 768px) { .row .row { display: block; } .row .row::before, .row .row::after { content: " "; display: table; } .row .row::after { clear: both; } .row .row > [class*="col-"] { flex: none; float: left; } } /* v2.2.49 — BS3's md tier starts at 992px but BS5's starts at 768px, so col-md-* fires 224px early. Between 768 and 992 prod resolves these to the col-sm-* width, or to full width where the element carries no col-sm-* class. */ @media (min-width: 768px) and (max-width: 991.98px) { html body [class*="col-md-"]:not([class*="col-sm-"]) { flex: 0 0 100%; max-width: 100%; width: 100%; } html body .col-sm-1 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 8.33333333%; } html body .col-sm-2 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 16.66666667%; } html body .col-sm-3 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 25%; } html body .col-sm-4 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 33.33333333%; } html body .col-sm-5 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 41.66666667%; } html body .col-sm-6 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 50%; } html body .col-sm-7 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 58.33333333%; } html body .col-sm-8 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 66.66666667%; } html body .col-sm-9 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 75%; } html body .col-sm-10 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 83.33333333%; } html body .col-sm-11 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 91.66666667%; } html body .col-sm-12 { flex: 0 1 auto; max-width: none; min-height: 1px; width: 100%; } } /* v2.2.51/52 — BS3 col-sm-* is inactive below 768px; BS5 activates at 576px. !important beats #header-bottom sm col rules and BS5 bundle col-sm flex. */ @media (min-width: 576px) and (max-width: 767.98px) { html body [class*="col-sm-"] { flex: 0 1 auto !important; max-width: none !important; } } /* prod: header containers run full-bleed below the lg tier */ @media (max-width: 992px) { #header-bottom > .container, #header-nav > .container { margin-left: 0; margin-right: 0; max-width: none; width: 100%; } } /* The BS5 navbar adds an inner .container that prod's BS3 markup does not have. Neutralise it below xl, where the header tiers already match prod. */ @media (max-width: 1199.98px) { #nav > .container { margin-left: 0; margin-right: 0; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } } @media (min-width: 576px) and (max-width: 767.98px) { /* v2.2.19 — footer-top sm: prod full-width cols (BS5 col-sm-* at 576px narrows col-sm-5 to 428px) */ html body #footer .footer-top .container > .row > [class*="col-sm-"], html body #footer .footer-top .container > .row > [class*="col-md-"] { flex: none; float: none; max-width: 100%; width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { body .container { box-sizing: border-box; max-width: 750px; width: 750px; } } @media (min-width: 992px) and (max-width: 1199.98px) { body .container { box-sizing: border-box; max-width: 970px; width: 970px; } } @media (min-width: 1200px) and (max-width: 1279.98px) { body .container { max-width: 1170px !important; width: 1170px; } } @media (min-width: 1280px) { body .container { max-width: 1280px !important; width: 1280px; } } /* BS5: restore BS3 15px grid gutters on standard content rows */ .container > .row { --bs-gutter-x: 0; margin-left: -15px; margin-right: -15px; } .container > .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } /* BS5: parent theme default content grid (.dmbs-content from devdmbootstrap3) */ .row.dmbs-content { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: -15px; margin-right: -15px; } .row.dmbs-content > [class*="col-"] { padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .row.dmbs-content { display: block; } .row.dmbs-content::before, .row.dmbs-content::after { content: " "; display: table; } .row.dmbs-content::after { clear: both; } .row.dmbs-content > [class*="col-"] { flex: none; float: left; } } /* BS5: intro/tour/gallery row gutters + flex-start (abc v2.0.57–59) */ #intro > .container > .row, #exp > .container > .row, #homeowner #tour .container > .row, #homeowner #gallery .container > .row, #professionals #tour .container > .row, #professionals #gallery .container > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: -15px; margin-right: -15px; } #intro > .container > .row { align-items: flex-start; } /* BS5: BS3 float grid shim — content rows only (style-parity col width drift) */ @media (min-width: 768px) { .container > .row { display: block; } .container > .row::before, .container > .row::after { content: " "; display: table; } .container > .row::after { clear: both; } .container > .row > [class*="col-"] { flex: none; float: left; } } /* v2.2.55 — BS3's `.container-fixed()` mixin ships the clearfix pseudo-elements on `.container` / `.container-fluid` itself, not just on `.row`. BS5's container has none. Only the `.row` variants had been pinned, so on the upgrade a last child's bottom margin collapsed out through the container instead of being contained by it: `#title p`'s margin put prod's `#title` at 318px against 308px on dev. Unconditional on prod, so unconditional here. */ .container::before, .container::after, .container-fluid::before, .container-fluid::after { content: " "; display: table; } .container::after, .container-fluid::after { clear: both; } /* v2.2.55 — BS3's bootstrap.css sets `label { margin-bottom: 5px }` (forms.less); BS5's Reboot dropped it and computes 0. Every Gravity Forms `label.gfield_label` therefore sat 5px closer to its input than prod, which cost 3.19px of row height per form row — -15.93px over the five rows of the /contact/ form at every breakpoint. */ label { margin-bottom: 5px; } /* v2.2.52 — #header-bottom removed: prod uses block + float at md; flex row was overriding v2.2.51 display:block and kept cols at float:none (col-sm-7 h 50px vs prod 44px). */ @media (min-width: 768px) { #header-nav .container > .row, #intro > .container > .row, #exp > .container > .row, #homeowner #tour .container > .row, #homeowner #gallery .container > .row, #professionals #tour .container > .row, #professionals #gallery .container > .row { display: flex; } #header-nav .container > .row > [class*="col-"], #intro > .container > .row > [class*="col-"], #exp > .container > .row > [class*="col-"], #homeowner #tour .container > .row > [class*="col-"], #homeowner #gallery .container > .row > [class*="col-"], #professionals #tour .container > .row > [class*="col-"], #professionals #gallery .container > .row > [class*="col-"] { float: none; } } @media (min-width: 768px) { #footer .row { display: block; } #footer .row::before, #footer .row::after { content: " "; display: table; } #footer .row::after { clear: both; } #footer .row > [class*="col-"] { flex: none; float: left; } } /* BS5 col-sm-* starts at 576px; BS3 sm was 768px — stack site-wide below md */ @media (max-width: 767.98px) { [class*="col-sm-"]:not(.col-sm-12) { flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 15px; padding-right: 15px; } .container > .row > .col-sm-12 { flex: 0 1 auto; max-width: none; padding-left: 0; padding-right: 0; } } @media (min-width: 992px) { .container.blog > .row { display: block; } .container.blog > .row::before, .container.blog > .row::after { content: " "; display: table; } .container.blog > .row::after { clear: both; } .container.blog > .row > [class*="col-"] { flex: none; float: left; } .container.blog > .row > .col-sm-4 { width: 33.33333333%; } .container.blog > .row > .col-sm-8 { width: 66.66666667%; } } /* BS5: footer + one-column containers — BS3 padding (widths via .container tiers above) */ #footer .footer-top .container, #footer .footer-bottom .container, #one-column .container { width: 100%; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) and (max-width: 991.98px) { #footer .footer-top .container, #footer .footer-bottom .container { padding-left: 20px; padding-right: 20px; width: 750px; max-width: 750px; } } @media (min-width: 992px) { #footer .footer-top .container, #footer .footer-bottom .container { padding-left: 15px; padding-right: 15px; } } @media (min-width: 992px) and (max-width: 1199.98px) { #footer .footer-top .container, #footer .footer-bottom .container { width: 970px; max-width: 970px; } } @media (min-width: 1200px) and (max-width: 1279.98px) { #footer .footer-top .container, #footer .footer-bottom .container { width: 1170px; max-width: 1170px; } } @media (min-width: 1280px) { #footer .footer-top .container, #footer .footer-bottom .container { width: 1280px; max-width: 1280px; } } #footer .footer-top .container > .row, #footer .footer-bottom .container > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: -15px; margin-right: -15px; } #footer .footer-top .container > .row > [class*="col-"], #footer .footer-bottom .container > .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } #footer .footer-top .logo { margin-bottom: 0; text-align: center; } #footer div.social { text-align: center; } #footer div.social .list-inline { margin-bottom: 10px; padding-left: 0; } #footer div.social .list-inline > li { display: inline-block; vertical-align: top; float: none; line-height: 1; } #footer .footer-top address .row { --bs-gutter-x: 0; margin-left: -15px; margin-right: -15px; } #footer .footer-top address .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } #footer .footer-top address { /* BS5 Reboot sets address margin-bottom to 1rem (16px); prod BS3 uses 20px */ margin-bottom: 20px; } /* BS5 style-parity: landing sm padding, intro/exp rows, events cols */ @media (max-width: 767.98px) { body#home #intro > .container, body#home #exp > .container, #intro > .container, #exp > .container, #homeowner #tour .container, #homeowner #gallery .container, #professionals #tour .container, #professionals #gallery .container { padding-left: 20px !important; padding-right: 20px !important; } body#home #intro > .container > .row, body#home #exp > .container > .row, #intro > .container > .row, #exp > .container > .row, #events .container > .row { margin-left: 0; margin-right: 0; } body#home #intro > .container > .row > [class*="col-"], body#home #exp > .container > .row > [class*="col-"], #intro > .container > .row > [class*="col-"], #exp > .container > .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } #events .container > .row > .col-sm-12, #events .col-sm-12 { margin: 20px 18px; padding: 0; } #events #breadcrumbs .col-sm-12 { margin: 0; padding: 0; } } @media (min-width: 768px) and (max-width: 991.98px) { #intro > .container, #exp > .container { max-width: 750px !important; width: 750px !important; } #intro .intro-col1, #exp .intro-col1 { padding-right: 50px !important; } /* v2.2.74 — col-sm-12 gallery rows must stay full width; 50% pin is for split intro cols only */ #intro > .container > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12), #exp > .container > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12) { flex: 0 0 50%; max-width: 50%; } #intro > .container > .row > .col-sm-12, #intro > .container > .row > .col-md-12, #exp > .container > .row > .col-sm-12, #exp > .container > .row > .col-md-12 { flex: 0 0 100%; max-width: 100%; width: 100%; } #intro > .container > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12):first-child, #exp > .container > .row > [class*="col-"]:not(.col-sm-12):not(.col-md-12):first-child { padding-right: 0; } #events .container > .row { margin-left: 0; margin-right: 0; } #events .container > .row > .col-sm-12 { margin: 20px 18px; padding: 0; } #events #breadcrumbs .col-sm-12 { margin: 0; padding: 0; } #events .col-sm-8 { flex: 0 0 500px; max-width: 500px; width: 500px; padding-left: 15px; padding-right: 15px; } #events .col-sm-8 .col-sm-12 { flex: 0 0 500px; margin: 20px 18px; max-width: 500px; min-width: 500px; padding: 0; width: 500px; } #events .col-sm-8 > .row { margin-left: -15px; margin-right: -15px; } } @media (max-width: 768px) { #events #breadcrumbs .col-sm-12 { margin: 0; padding: 0; } } /* BS5: footer-top logo + social — stack below md, no column stretch */ @media (max-width: 767.98px) { #footer .footer-top .container > .row > [class*="col-"], #footer .footer-bottom .container > .row > [class*="col-"] { flex: 0 0 100%; float: none; max-width: 100%; width: 100%; } /* v2.2.49: the 30px sm override here was double prod's BS3 gutter; prod keeps 15px */ #footer .footer-top address .row > [class*="col-sm-"] { flex: 0 0 100%; float: none; max-width: 100%; width: 100%; } #footer .footer-top address { margin-bottom: 0; } #footer .footer-top address .row:last-child { margin-bottom: 0; } /* v2.2.55 — removed `#footer div.social .list-inline { margin-bottom: 0 }`. Prod keeps BS3's 10px ul margin here, and because the footer-bottom row is a BS3 block with clearfix pseudo-elements that margin is contained, making prod's footer-bottom row 100px against stage's 90px. */ } /* -------------------------------------- */ /* -- Global Theme Reset -- */ /* bookly orange: f4662f*/ /* cool grey 2 #d0d0ce rgb(208, 208, 206); cool grey 5 #b1b3b3 rgb(177, 179, 179); cool grey 9 #75787b rgb(117, 120, 123); */ body, html { height: 100%; width: 100%; margin: 0; padding: 0 !important; } body { font-family: 'Roboto', sans-serif; font-weight: 400; /* BS5 Reboot parity: prod BS3 body typography */ font-size: 14px; /* v2.2.55 — must stay the unitless ratio prod declares, not its computed 20px. A number inherits as a ratio and re-resolves against each descendant's own font-size; a length inherits as a fixed 20px. Pinning 20px matched body itself but shrank the line box of every descendant that inherits line-height at a font-size other than 14px — the theme sets `line-height: inherit` inline on several headings, so e.g. the 25px `h3` in .location-contactform came out 20px against prod's 35.71px. */ line-height: 1.42857; color: #333; } body p { color: #75787b; font-size: 16px; line-height: 26px; } /*a:link, a:active{ color: #905849; } a:hover{ color: #905849; }*/ /* Montserrat substitute for font copperplat */ h1, h2, h3, h4, h5, h6{ color: #75787b; } h1{ font-family: 'Montserrat', serif !important; font-size: 40px; line-height: 50px; padding: 0 0 15px; text-transform: uppercase; font-weight: 700; } h2{ font-family: 'Montserrat', serif !important; font-size: 40px; line-height: 50px; padding: 0; text-transform: uppercase; font-weight: 700; /* BS5 Reboot parity: prod BS3 h2 margins + page-header border */ margin-top: 40px; padding-bottom: 9px; border-bottom: 1px solid #eee; } h3{ font-family: 'Montserrat', serif !important; font-size: 25px; line-height: 50px; padding: 0 0 15px; text-transform: uppercase; font-weight: 700; /* BS5 Reboot parity: prod BS3 h3 top margin */ margin-top: 20px; } /* BS5 Reboot parity: prod BS3 heading bottom margin */ h2 { margin-bottom: 20px; } h3 { margin-bottom: 10px; } /* BS5 Reboot parity: prod BS3 h4 typography + spacing */ h4 { font-size: 18px; line-height: 19.8px; margin-top: 10px; margin-bottom: 10px; } #splash h3{ font-family: 'Montserrat', serif !important; font-size: 30px; line-height: 30px; padding: 0; margin: 0; text-transform: uppercase; font-weight: 700; } .design-partners h3 { color: #75787b; } .under::after { background-color: #c41230; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } .under { position: relative; } .brand-text { min-height:220px; } /* -------------------------------------- */ /* gravity forms */ .gform_wrapper form.gform5 { text-align: center !important; } /* -------------------------------------- */ /* -- fancybox styles -- */ .fancybox-wrap h4, .fancybox-wrap .h4 { font-size: 16px !important; margin-bottom: 3px !important; margin-top: 15px !important; } .fancybox-wrap p { font-size: 14px; line-height: 16px; } /* responsive wordpress video */ .wp-video { max-width: 100% !important; height: auto !important; overflow: hidden !important; } .col-sm-12.col-md-6.video { margin: 0; padding: 0; } video { width: 100% !important; height: auto !important; } /* -------------------------------------- */ .g-recaptcha div { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 20px; } @media screen and (max-height: 767px){ #rc-imageselect, .g-recaptcha { transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0; } } /* -------------------------------------- */ /* -- responsive line
-- */ .rwd-break, .rwd-line{ display: block; } @media screen and (max-width: 1199px) { .rwd-break, .rwd-line{ display: inline; } } /* -------------------------------------- */ /* -- locations styles -- */ /* #locations h3 { color: #75787b; font-size: 24px; line-height: 24px; margin: 25px 0 5px; padding: 0; } #locations .product-img { margin-bottom: 1.71429rem; } #locations a i.fa-envelope { background-color: #c8c0ab; border-radius: 24px; color: #766b52; font-size: 20px; height: 40px; padding: 8px; text-align: center; width: 40px; } */ .locations .facetwp-template .col-sm-4 { margin-bottom: 30px; } /* v2.2.80 — /showroom-location/ location cards: prod BS3 .card computes border 0; BS5 bundle adds 1px (+10px page height sm/md). Badge pill typography matches prod 12px. */ html body#locations .card { border-width: 0; border-style: none; } html body#locations .badge { font-size: 12px; line-height: 12px; padding-bottom: 3px; padding-top: 3px; } /* v2.2.81 — sm gate: prod card-body stack is ~2px shorter than BS5 20px bottom pad. */ html body#locations .card > .card-body { padding-bottom: 19px; } /* v2.2.81 — /contact/ sm capture 3277 vs prod 3279 (+2px). */ html body#contact #contact-form { padding-bottom: 2px; } .card { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex:1; background-color: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .10), 0 2px 10px 0 rgba(0, 0, 0, .10); height: 100%; } .card-block { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 2rem; } .card .card-block { position: relative; } .card-block h3, .card-block h5, .card-body h3, .card-body h5 { margin-bottom: 1.5rem; margin-top: .5rem; font-weight: 400; padding: 0; } /* BS5 renamed .card-block → .card-body; prod BS3 card-block padding was 2rem (20px). html body beats the BS5 bundle's .card-body { padding: var(--bs-card-spacer-y) } (10px). */ html body .card > .card-body { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 20px; position: relative; } .location-contactform .caldera-grid .col-sm-6 { width: 100% !important; } /* -------------------------------------- */ /* -- flexbox styles -- */ .mb-5 { margin-bottom: 30px; } @media only screen and (min-width : 992px) { .row.flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row.flex .card { border: 1px solid #ddd; border-radius: 5px; padding: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; } } /* -------------------------------------- */ /* -- slideshow styles -- */ #slideshow h3 { margin: 0; padding: 0; font-size:24px; } #slideshow .master-slider-parent { margin-bottom: 30px; } @media screen and (max-width: 1199px) { #slideshow h3 { margin: 0; padding: 0; } } @media screen and (max-width: 767px) { #slideshow h3 { margin-top: 20px; } } /* -------------------------------------- */ /* -- fix email signup input -- */ #mc_embed_signup input.email { width: 100% !important; } /* -------------------------------------- */ /* -- vertical align -- */ .vertical-align { display: flex; align-items: center; justify-content: center; flex-direction: row; } @media screen and (max-width: 992px) { .vertical-align { display: inherit; } } /* -------------------------------------- */ /* -- Read more styles -- */ /*a { color: #0254EB } a:visited { color: #0254EB }*/ a.morelink { text-decoration:none; outline: none; } .morecontent span { display: none; } /*.comment { width: 400px; background-color: #f0f0f0; margin: 10px; }*/ /* -------------------------------------- */ /* -- Global Google Map Styles -- */ /* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------------------------------------- */ /* -- Global Breadcrumb Styles -- */ #breadcrumbs{ display: none; } #breadcrumbs.breadcrumbs-con{ margin: 0; padding: 0; } #breadcrumbs .breadcrumbs-title { color: #fff; font-family: "Montserrat",serif; font-size: 52px; font-weight: 700; line-height: 52px; margin-top: -40px; padding: 0; text-transform: uppercase; } #breadcrumbs p, #breadcrumbs p a{ color: #a4a4a4; font-family: 'Montserrat',serif; font-size: 13px; line-height: 13px; margin: 0; padding: 0; letter-spacing: 1px; } /* -------------------------------------- */ /* -- Global Flexbox Styles -- */ .equal { display: flex; flex-wrap: wrap; } .equal > div[class*='col-'] { display: flex; flex-direction: column; } @media screen and (min-width: 768px) { .equal2, .equal2 > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:1 0 auto; } } /* -- Flexbox Align Vertical -- */ .Aligner { display: flex; align-items: center; min-height: 24em; justify-content: center; } .Aligner-item { flex: 1; } .Aligner-item-top { align-self: flex-start; } .Aligner-item-bottom { align-self: flex-end; } .Aligner-item-fixed { flex: none; max-width: 50%; } @media screen and (min-width: 768px) { .Aligner { display: inherit; } /* BS5: #tour has fixed height — drop Aligner min-height on tour wrapper only */ #tour.Aligner { align-items: inherit; justify-content: inherit; min-height: 0; } /* Gallery text column: vertically center like prod BS3 */ #gallery .Aligner { align-items: stretch; display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; max-width: none; min-height: 100%; align-self: stretch; } #gallery .gallery-con { width: 100%; } } /* card overlay styles ------------------------------------------------------- */ body.cabinet-installation .controls { margin-bottom: 20px; } body.cabinet-installation .btn-default { background-color: #fff; border: 1px solid #75787b; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #75787b; font-size: 16px; line-height: 16px; margin: 0; padding: 9px 9px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } body.cabinet-installation .btn-default.mixitup-control-active { background-color: #eee !important; } body.cabinet-installation .btn-default.mixitup-control-active:hover { background-color: #eee !important; color: #75787b !important; } body.cabinet-installation .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } body.cabinet-installation .card-body, html body#projects.cabinet-installation .card-body { min-height: 1px; padding: 12.5px; } body.cabinet-installation .card-body p { line-height: 18px; } body.cabinet-installation .card{ /*transform: translateX(-100%); transition: transform 0.3s, box-shadow 0.3s;*/ } body.cabinet-installation .card { word-wrap: break-word; -moz-box-direction: normal; -moz-box-orient: vertical; background-clip: border-box; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); /*border: none;*/ position: relative; /*display: -ms-flexbox;*/ /*display: flex;*/ /*-ms-flex-direction: column;*/ /*flex-direction: column;*/ min-width: 0; overflow-wrap: break-word; position: relative; /*margin-bottom: 20px;*/ /*display: inline-block;*/ } body.cabinet-installation .card-body h4 { font-weight: 500; margin-bottom: 1rem; margin-top: 0; } body.cabinet-installation .card img { text-align: center; margin-left: auto; margin-right: auto; } body.cabinet-installation .card-img, body.cabinet-installation .card-img-bottom, body.cabinet-installation .card-img-top { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; } body.cabinet-installation .card-img, body.cabinet-installation .card-img-top { border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); } /* Container ---------------------------------------------------------------------- */ /*.card-container { padding: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; }*/ body.cabinet-installation .card-container, html body#projects.cabinet-installation .card-container { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } body.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .card-container .mix { display: inline-block; width: 100%; margin-bottom: 1.75rem; vertical-align: top; -webkit-column-break-inside: avoid; break-inside: avoid-column; page-break-inside: avoid; } body.cabinet-installation .mix, html body#projects.cabinet-installation .mix { position: relative; display: inline-block; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; vertical-align: top; } @media (min-width: 768px) { body.cabinet-installation .card-container, html body#projects.cabinet-installation .card-container { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } @media (min-width: 992px) { body.cabinet-installation .card-container, html body#projects.cabinet-installation .card-container { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } @media (min-width: 1200px) { body.cabinet-installation .card-container, html body#projects.cabinet-installation .card-container { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; -webkit-column-gap: 1.25rem; -moz-column-gap: 1.25rem; column-gap: 1.25rem; orphans: 1; widows: 1; } } /* -------------------------------------- */ /* -- Global Top Nav Styles -- */ /* BS3 .dropdown-menu — prod computed pin (v2.2.68) */ html body .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; } /*body#home #nav{ display: none; } */ @media screen and (min-width: 768px) { /* right align nav but keep li left in order */ #nav ul.navbar-nav { float: right; margin: 0; text-align: right; } #nav ul.navbar-nav > li { display: inline-block; float: none; text-align: right; } } #nav .navbar-collapse { padding-left: 0px; padding-right: 0px; } #nav.navbar { border: 1px solid transparent; margin-bottom: 0; min-height: auto; position: relative; border-radius: 0; } #nav.navbar-default { background-color: #fff; border-color: #fff; } #header-nav { background:#f7f7f7; } #nav.navbar-dark { background-color: #f7f7f7; border-color: #f7f7f7; /* margin-top: 10px; */ } .navbar-nav > li > a{ color: #333; } /* active parent */ #nav.navbar-dark .navbar-nav > .active > a, #nav.navbar-dark .navbar-nav > .active > a:hover, #nav.navbar-dark .navbar-nav > .active > a:focus { /*background-color: #75787b;*/ background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #333; font-family: 'Montserrat', serif; text-transform: uppercase; opacity: 1; text-decoration: none; } /* non active parent */ #nav.navbar-dark .navbar-nav > li > a { font-family: 'Montserrat', serif; text-transform: uppercase; color: #111; opacity: .5; padding: 5px; text-decoration: none; } #nav.navbar-dark .navbar-nav > li > a:hover, #nav.navbar-dark .navbar-nav > li > a:focus { text-decoration: none; } #nav.navbar-dark .navbar-nav > li > a:hover { color: #555; opacity: 1; } /* -------------------------------------- */ /* --#nav Media Query Styles green #75787b -- */ /* space between top parent nav links */ @media only screen and (min-width : 1200px) { #nav .navbar-nav > li, #nav .navbar-nav > .nav-item { border-right: 1px solid #eee; margin-right: 10px; padding-right: 10px; } /* #nav .navbar-nav > li:last-child { margin-right: 0; padding-right: 0; border: none; } */ /* end @media 768px */ } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { /* hover open dropdown */ #nav .dropdown-menu li:hover .sub-menu { visibility: visible; } /* v2.2.73 — global .dropdown-menu pin uses margin-top: 2px; prod #nav uses 0. A 2px gap between toggle and menu breaks :hover and the submenu snaps shut. */ #nav .dropdown-menu { margin-top: 0; } #nav .dropdown:hover .dropdown-menu { display: block; } /* v2.2.55 — `.nav-item` added here to match the `min-width: 1200px` block above. Prod's walker emits bare `li`, so both blocks match at (1,1,2) and this later one wins the tie at 5px. The BS5 walker adds `nav-item`, which made the 1200px block match at (1,2,1) and win instead — 10px per item, so the menu came out 80px wide of prod and 24px off-centre at xl and xxl. */ #nav .navbar-nav > li, #nav .navbar-nav > .nav-item { border-right: 1px solid #eee; margin-right: 5px; padding-right: 5px; } #nav ul.navbar-nav { float: none; margin: 0 auto; text-align: right; display: table; padding: 5px 0; } /*#nav .navbar-nav > li { float: right; }*/ /* #nav .navbar-nav > li:last-child { margin-right: 0; padding-right: 0; border: none; } */ /* end @media 768px */ } /* Small Devices, Tablets */ @media only screen and (max-width : 992px) { #nav .navbar-nav > li { border-right: 1px solid #eee; margin-right: 5px; padding-right: 5px; } #nav .navbar-nav > li:last-child { margin-right: 0; padding-right: 0; border: none; } } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { #nav .navbar-collapse { border-color: #905849; background: #f7f7f7; } #nav .dropdown-menu > li > a { color: #ccc; } #nav .navbar-dark .navbar-collapse, .navbar-dark .navbar-form { border-color: #fff; background-color: #fff; } #nav.navbar-dark .navbar-nav > li > a { color: #555; } #nav.navbar-dark .navbar-nav > li > a:hover { color: #75787b; opacity: 1; } #nav .dropdown-menu > .active > a, #nav .dropdown-menu > .active > a:hover, #nav .dropdown-menu > .active > a:focus { background: none !important; color: #75787b !important; font-weight: bold; } #nav.navbar-dark .navbar-nav > .active > a, #nav.navbar-dark .navbar-nav > .active > a:hover, #nav.navbar-dark .navbar-nav > .active > a:focus { background: none !important; color: #75787b !important; font-weight: bold; } #nav.navbar-dark .navbar-nav > li.current-page-parent > a { background-color: #f1f1f1 !important; color: #75787b !important; font-weight: bold; } /* v2.2.83 — BS5 mobile dropdown keeps aria-expanded on the link, not .show on li (prod BS3 adds .open on li). Pin bold open-parent styling for both. */ #nav.navbar-dark .navbar-nav > .show > a, #nav.navbar-dark .navbar-nav > .show > a:hover, #nav.navbar-dark .navbar-nav > .show > a:focus, #nav.navbar-dark .navbar-nav > .open > a, #nav.navbar-dark .navbar-nav > .open > a:hover, #nav.navbar-dark .navbar-nav > .open > a:focus, #nav.navbar-dark .navbar-nav > .dropdown > a[aria-expanded="true"], #nav.navbar-dark .navbar-nav > .dropdown > a[aria-expanded="true"]:hover, #nav.navbar-dark .navbar-nav > .dropdown > a[aria-expanded="true"]:focus { background-color: #fff !important; color: #75787b !important; opacity: 1; font-weight: bold; } #nav.navbar-dark { background-color: #75787b !important; border: none; } #nav .navbar-nav .show .dropdown-menu { background-color: #fff !important; } /* v2.2.84 — sm collapse: prod inlines submenus (static, full-width, no card chrome). BS5 + v2.2.68 global .dropdown-menu pin leaves float/border/shadow on mobile. */ html body #nav .navbar-nav .dropdown-menu { border: 0; border-radius: 0; box-shadow: none; float: none; left: auto; margin: 0; min-width: 0; padding: 0; position: static; top: auto; width: 100%; -webkit-box-shadow: none; } html body #nav .navbar-nav .dropdown { float: none; width: 100%; } /* v2.2.82 — BS5 .nav-link is inline; prod BS3 collapse stacks block links. */ #nav .navbar-nav > li > a, #nav .navbar-nav > .nav-item > a, #nav .navbar-nav .nav-link { display: block; } /* end @media 768px */ } #nav .dropdown-menu > li > a { clear: both; color: #333; display: block; font-weight: normal; line-height: 1.42857; padding: 3px 20px; white-space: nowrap; } #nav .dropdown-menu > li > a:hover, #nav .dropdown-menu > li > a:focus { background-color: #eee; color: #75787b; text-decoration: none; } #nav .dropdown-menu > li > a { clear: both; color: #494949; display: block; font-weight: normal; line-height: 1.42857; padding: 3px 20px; white-space: nowrap; } #nav .dropdown-menu > .active > a, #nav .dropdown-menu > .active > a:hover, #nav .dropdown-menu > .active > a:focus { background-color: #75787b; color: #fff; outline: 0 none; text-decoration: none; } #nav.navbar-dark .navbar-nav > .show > a, #nav.navbar-dark .navbar-nav > .show > a:hover, #nav.navbar-dark .navbar-nav > .show > a:focus { background-color: #fff; color: #333; opacity: 1; } #nav.navbar-dark .navbar-nav > li.current-page-parent > a { background-color: #fff; color: #333; font-family: 'Montserrat',serif; opacity: 1; text-transform: uppercase; } /* -------------------------------------- */ /* -- Navbar Hamburger Toggle to x -- */ #nav .navbar-dark .navbar-toggler .icon-bar { background-color: #fff; } #nav .navbar-toggler { border: none; background: transparent !important; } #nav .navbar-toggler:hover { background: transparent !important; } #nav .navbar-toggler .icon-bar { width: 22px; transition: all 0.2s; } /* v2.2.82 — BS5 toggler uses aria-expanded, not .active (prod BS3 .navbar-toggle.active). */ #nav .navbar-toggler.active .top-bar, #nav .navbar-toggler[aria-expanded="true"] .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; background-color: #fff; } #nav .navbar-toggler.active .middle-bar, #nav .navbar-toggler[aria-expanded="true"] .middle-bar { opacity: 0; } #nav .navbar-toggler.active .bottom-bar, #nav .navbar-toggler[aria-expanded="true"] .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } #nav .navbar-toggler .top-bar { transform: rotate(0); } #nav .navbar-toggler .middle-bar { opacity: 1; } #nav .navbar-toggler .bottom-bar { transform: rotate(0); } @media (min-width: 768px) { /* BS5 navbar: restore prod BS3 block + float layout + 15px nav link padding */ #nav.navbar.navbar-expand-md { align-items: normal; display: block; padding-bottom: 0; padding-top: 0; } /* v2.2.55 — dropped the 15px inline padding. Prod zeroes .navbar-collapse padding at every breakpoint (`#nav .navbar-collapse` above), which is what lets its nav ul span the full width. v2.2.54 already established this and corrected it for md only; the same 15px was still narrowing the ul at lg, xl and xxl. */ #nav .navbar-collapse.navbar-1-collapse { display: block !important; } #nav .navbar-nav { display: block; float: left; max-width: none; } #nav .navbar-nav > li, #nav .navbar-nav > .nav-item { display: block; float: left; } #nav .navbar-nav::after { clear: both; content: ""; display: table; } #nav .navbar-nav a { white-space: normal; } #nav .navbar-nav > li > a, #nav .navbar-nav > .nav-item > a, #nav .navbar-nav .nav-link { display: block; padding: 5px; text-decoration: none; } /* BS5: hide default dropdown-toggle caret; prod uses inline .caret span */ #nav .dropdown-toggle::after { display: none !important; } #nav .caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #75787b; display: inline-block; height: 0; margin-left: 2px; vertical-align: middle; width: 0; } } @media (min-width: 992px) { #nav .navbar-nav > li > a, #nav .navbar-nav > .nav-item > a, #nav .navbar-nav .nav-link { padding: 15px; } } /* v2.2.55 — BS3's navbar sets `.navbar-nav > li > a { line-height: 20px }` as an explicit length (its @line-height-computed); BS5's .nav-link inherits instead. With body's line-height correctly back to the 1.42857 ratio, these 12px links resolved to 17.14px and each nav row lost 2.86px — 5.72px at md where the menu wraps to two rows. Prod computes 20px at every breakpoint, so this is unconditional. */ #nav .navbar-nav > li > a, #nav .navbar-nav > .nav-item > a, #nav .navbar-nav .nav-link { line-height: 20px; } /* BS5: header-bottom + header-nav sm/md parity (abc v2.0.57–64) */ @media (max-width: 991.98px) { #header-bottom .container > .row, #header-nav .container > .row { --bs-gutter-x: 0; margin-left: -15px; margin-right: -15px; } #header-bottom .container > .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; } #header-nav .container > .row > [class*="col-"] { padding-left: 0; padding-right: 0; } } @media (max-width: 767.98px) { #header-bottom .container > .row, #header-nav .container > .row { margin-left: 0; margin-right: 0; } /* v2.2.52 — prod header cols at sm: flex 0 1 auto, max-width none (not BS5 0 0 100%) */ #header-bottom .container > .row > [class*="col-"] { flex: 0 1 auto; max-width: none; width: 100%; } #header-bottom .container > .row.vertical-align { display: block; } #header-bottom .container > .row.vertical-align::after { clear: both; content: ""; display: table; } #header-bottom .logo { margin: 20px 0; text-align: center; } #header-bottom .logo img { display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; width: auto; } header .logo { top: 0; } #header-nav .container { max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } #nav .container { max-width: 100%; width: 100%; } /* v2.2.83 — prod nav has no inner .container; BS5 wrapper must not inset collapse (360px vs 390px sm band). Prod nav .container { padding: 0 } site-wide. */ #nav.navbar > .container { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; margin-right: 0; max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } /* v2.2.49: prod's child theme sets `#nav.navbar { min-height: auto }`, overriding BS3's 50px, and adds no vertical padding — the navbar is 48px at sm, not 50px. */ #nav.navbar { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; min-height: auto; } #nav .navbar-toggler { margin-left: 0; padding: 9px 10px; } #nav .navbar-collapse.navbar-1-collapse:not(.show) { display: none !important; } #nav .navbar-collapse.navbar-1-collapse.show { flex-basis: 100%; width: 100%; } #banner { overflow: hidden; } #banner .banner-con, #brands #banner .banner-con, #events #banner .banner-con, #gallery #banner .banner-con, .new-home-remodeling-team #banner .banner-con, #products #banner .banner-con { height: auto; left: auto; max-width: 100%; position: relative; top: auto; transform: none; width: 100%; } #banner .banner-con-sm { left: auto; max-width: 100%; position: relative; top: auto; transform: none; width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { /* v2.2.52 — prod #header-bottom row is block + float cols (not flex); 70px total height */ #header-bottom .container > .row, #header-bottom .container > .row.vertical-align { align-items: center; display: block; } #header-bottom .container > .row::before, #header-bottom .container > .row::after, #header-bottom .container > .row.vertical-align::before, #header-bottom .container > .row.vertical-align::after { content: " "; display: table; } #header-bottom .container > .row::after, #header-bottom .container > .row.vertical-align::after { clear: both; } #header-bottom .container > .row > [class*="col-"] { flex: 0 1 auto; float: left; min-height: 1px; } /* v2.2.66 — VRT md captures at 768px (not 780). Prod .logo margin 20px there; v2.2.63's margin:0 was probed at 780 where prod collapses to 0. Restores v2.2.56 gate geometry. */ #header-bottom .logo { margin: 20px 0 !important; text-align: left; } header .logo { top: 0; } #header-bottom .logo img { display: block; margin-left: 0; margin-right: 0; max-width: 100%; width: auto; } #header-bottom .text-right, #header-bottom .text-end { text-align: center !important; } } @media (min-width: 992px) { #header-bottom .container > .row { align-items: flex-start; } #header-bottom .container > .row.vertical-align { align-items: center; } #header-bottom .text-right, #header-bottom .text-end { text-align: right !important; } #header-bottom .logo img { display: block; } } /* -------------------------------------- */ /* -- Global Button Styles -- */ /* block buttons on mobile */ /*@media only screen and (max-width : 767px) { #header-bottom .btn { display: block; width: 100%; } }*/ .btn{ font-family: "Montserrat",sans-serif; font-size: 14px; font-weight: 400 !important; text-transform: uppercase; } .btn-default { background-color: #fff; border: 1px solid #fff; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #75787b; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 50px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } body .btn-green,.btn-green { color: #ffffff !important; background-color: #c41230; border-color: #c41230; } .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green { color: #ffffff; background-color: #333; border-color: #333; } .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green { background-image: none; } .btn-green.disabled, .btn-green[disabled], fieldset[disabled] .btn-green, .btn-green.disabled:hover, .btn-green[disabled]:hover, fieldset[disabled] .btn-green:hover, .btn-green.disabled:focus, .btn-green[disabled]:focus, fieldset[disabled] .btn-green:focus, .btn-green.disabled:active, .btn-green[disabled]:active, fieldset[disabled] .btn-green:active, .btn-green.disabled.active, .btn-green[disabled].active, fieldset[disabled] .btn-green.active { background-color: #333; border-color: #333; } .btn-green .badge { color: #333; background-color: #ffffff; } body .btn-white,.btn-white { color: #333; background-color: #ffffff; border-color: #ffffff; } .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { color: #ffffff; background-color: #333; border-color: #333; } .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { background-image: none; } .btn-white.disabled, .btn-white[disabled], fieldset[disabled] .btn-white, .btn-white.disabled:hover, .btn-white[disabled]:hover, fieldset[disabled] .btn-white:hover, .btn-white.disabled:focus, .btn-white[disabled]:focus, fieldset[disabled] .btn-white:focus, .btn-white.disabled:active, .btn-white[disabled]:active, fieldset[disabled] .btn-white:active, .btn-white.disabled.active, .btn-white[disabled].active, fieldset[disabled] .btn-white.active { background-color: #ffffff; border-color: #ffffff; } .btn-white .badge { color: #333; background-color: #ffffff; } .btn-orange, p .btn-orange { background-color: #dc8927; border-color: #dc8927; color: #ffffff; font-weight: 200; letter-spacing: 0.05em; text-transform: uppercase; } .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange { color: #ffffff; background-color: #dc8927; border-color: #dc8927; } .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange { background-image: none; } .btn-orange.disabled, .btn-orange[disabled], fieldset[disabled] .btn-orange, .btn-orange.disabled:hover, .btn-orange[disabled]:hover, fieldset[disabled] .btn-orange:hover, .btn-orange.disabled:focus, .btn-orange[disabled]:focus, fieldset[disabled] .btn-orange:focus, .btn-orange.disabled:active, .btn-orange[disabled]:active, fieldset[disabled] .btn-orange:active, .btn-orange.disabled.active, .btn-orange[disabled].active, fieldset[disabled] .btn-orange.active { background-color: #333; border-color: #333; } .btn-orange .badge { color: #dc8927; background-color: #ffffff; } .btn-maroon, p .btn-maroon { background-color: #905849; border-color: #905849; color: #ffffff; font-weight: 200; letter-spacing: 0.05em; text-transform: uppercase; } .btn-maroon:hover, .btn-maroon:focus, .btn-maroon:active, .btn-maroon.active, .open .dropdown-toggle.btn-maroon { color: #ffffff; background-color: #575023; border-color: #575023; } .btn-maroon:active, .btn-maroon.active, .open .dropdown-toggle.btn-maroon { background-image: none; } .btn-maroon.disabled, .btn-maroon[disabled], fieldset[disabled] .btn-maroon, .btn-maroon.disabled:hover, .btn-maroon[disabled]:hover, fieldset[disabled] .btn-maroon:hover, .btn-maroon.disabled:focus, .btn-maroon[disabled]:focus, fieldset[disabled] .btn-maroon:focus, .btn-maroon.disabled:active, .btn-maroon[disabled]:active, fieldset[disabled] .btn-maroon:active, .btn-maroon.disabled.active, .btn-maroon[disabled].active, fieldset[disabled] .btn-maroon.active { background-color: #905849; border-color: #905849; } .btn-maroon .badge { color: #905849; background-color: #ffffff; } .btn-black, p .btn-black { background-color: #777; border-color: #777; color: #ffffff; font-weight: 200; letter-spacing: 0.05em; text-transform: uppercase; } .btn-black:hover, .btn-black:focus, .btn-black:active, .btn-black.active, .open .dropdown-toggle.btn-black { color: #ffffff; background-color: #c41230; border-color: #c41230; } .btn-black:active, .btn-black.active, .open .dropdown-toggle.btn-black { background-image: none; } .btn-black.disabled, .btn-black[disabled], fieldset[disabled] .btn-black, .btn-black.disabled:hover, .btn-black[disabled]:hover, fieldset[disabled] .btn-black:hover, .btn-black.disabled:focus, .btn-black[disabled]:focus, fieldset[disabled] .btn-black:focus, .btn-black.disabled:active, .btn-black[disabled]:active, fieldset[disabled] .btn-black:active, .btn-black.disabled.active, .btn-black[disabled].active, fieldset[disabled] .btn-black.active { background-color: #333; border-color: #333; } .btn-black .badge { color: #333; background-color: #ffffff; } .btn-search { background-color: #75787b; border-color: #75787b; color: #fff; } .btn-search.focus, .btn-search:focus { background-color: #31b0d5; border-color: #1b6d85; color: #fff; } .btn-search:hover { background-color: #75787b; border-color: #75787b; color: #fff; } .jetpack_subscription_widget input[type="submit"] { background-color: #75787b; border: medium none; color: #fff; padding: 10px 15px; font-family: "Montserrat",sans-serif; font-size: 18px; font-weight: 700; border-radius: 6px; line-height: 1.33333; padding: 10px 16px; } .jetpack_subscription_widget input[type="submit"]:focus { background-color: #75787b; border-color: #75787b; color: #fff; } .jetpack_subscription_widget input[type="submit"]:hover { background-color: #75787b; border-color: #75787b; color: #fff; } .jetpack_subscription_widget h2{ color: #75787b; content: ""; font-family: 'Montserrat',serif; font-size: 28px; font-weight: 400; line-height: 28px; margin-bottom: 10px; padding: 0; } /* -------------------------------------- */ /* -- Interior Page Styles -- */ hr { border: 0; border-top: 1px solid #ccc; border-color: #ccc; height: 0; margin-bottom: 20px; margin-top: 20px; opacity: 1; } /* .pro-tog{ display: none; } body.professionals .pro-tog{ display: inline; } .home-tog{ display: none; } body.homeowners .home-tog{ display: inline; } */ /* header top */ /*#toggle a { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #ffffff; font-family: "Montserrat",sans-serif; font-size: 10px; font-weight: 700; padding: 7px 15px 5px; position: relative; text-decoration: none; text-transform: uppercase; } #toggle a.pro-tog { background-color: #75787b; opacity: 0.5; padding: 7px 25px 5px 15px; z-index: 7; } #professionals #toggle a.pro-tog { background-color: #75787b; opacity: 1; padding: 7px 25px 5px 15px; z-index: 9; } #toggle a.pro-tog:hover { opacity: 1; } #toggle a.pro-tog img.icon-svg { display: inline-block; height: 15px; margin-right: 5px; position: relative; top: -1px; width: 14px; } #toggle a.home-tog { background-color: #dc8927; margin-left: -20px; opacity: .7; padding: 7px 20px 5px; position: relative; z-index: 7; } #toggle a.home-tog:hover { opacity: 1; } #homeowner #toggle a.home-tog { background-color: #dc8927; margin-left: -20px; opacity: 1; padding: 7px 20px 5px; position: relative; z-index: 9; } #toggle a.home-tog img.icon-svg { display: inline-block; height: 15px; margin-right: 5px; position: relative; top: -1px; width: 14px; } */ #header-top li { padding: 0; } #header-top { margin-top: 30px; } #header-bottom { margin: 20px 0px 10px; } div#social li { padding: 5px 2px; } div#social a i { background-color: #c8c0ab; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: #75787b; font-size: 12px; height: 24px; padding: 6px; text-align: center; width: 24px; } div#header-bottom a.btn-scheduleanapp { background-color: #ffffff; border: 2px solid #75787b; color: #75787b; font-family: "Montserrat",sans-serif; font-size: 14px; font-weight: 700; padding: 10px 15px; } div#header-bottom a.btn-scheduleanapp:hover { background-color: #75787b; border: 2px solid #75787b; color: #ffffff; } @media only screen and (max-width : 768px) { div#header-bottom .col-sm-7.col-md-8{ padding-right: 0; padding-left: 0; } } /* banner */ #banner .banner-img { background-position: center top; background-repeat: no-repeat; background-size: cover; height: 400px; } #banner{ position: relative; text-align: center; margin-bottom: 0px; } @media (min-width: 768px) { #banner .banner-con-sm { width: 600px; } #banner .banner-con { width: 950px; height: 200px; } #brands #banner .banner-con, #events #banner .banner-con, #gallery #banner .banner-con, .new-home-remodeling-team #banner .banner-con { width: 950px; } #products #banner .banner-con { width: 950px; } } #banner .banner-con-sm { color: #494949; font-size: 16px; left: 50%; letter-spacing: 1px; line-height: 24px; position: absolute; text-align: center; top: 280px; transform: translate(-50%, -50%); } #banner .banner-con { background-image: url("/images/banner/banner-title-bgshape-lg.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); opacity : 1; } #brands #banner .banner-con, #events #banner .banner-con, #gallery #banner .banner-con, .new-home-remodeling-team #banner .banner-con { background-image: url("/images/banner/banner-title-bgshape-lg.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; height: 170px; left: 50%; opacity: 1; position: absolute; top: 35%; transform: translate(-50%, -50%); } #products #banner .banner-con { background-image: url("/images/banner/banner-title-bgshape-lg.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; height: 120px; left: 50%; opacity: 1; position: absolute; top: 40%; transform: translate(-50%, -50%); } #banner .banner-con h1 { font-family: "Montserrat",sans-serif; font-size: 25px; line-height: 25px; font-weight: 700; color: #75787b; margin: 0; padding: 60px; width: 100%; height: 100%; letter-spacing: 2px; } #banner .banner-con h1 span { font-family: 'Montserrat',serif; font-size: 35px; line-height: 35px; color: #75787b; letter-spacing: normal; } #gallery #title { margin-bottom: 0px; } #title { margin-bottom: 60px; } body.design-gallery #title { margin-bottom: 0px; } #title .title-con h1 { font-family: "Montserrat",sans-serif; font-size: 40px; line-height: 45px; font-weight: 700; color: #75787b; margin: 0; padding: 40px 0 20px; width: 100%; height: 100%; letter-spacing: 2px; text-align: center; } #title .title-con h1 span { font-family: 'Montserrat',serif; font-size: 35px; line-height: 35px; color: #75787b; letter-spacing: normal; text-align: center; } #title .title-con > hr { border-color: #c41230; border-width: 10px; width: 100px; } #title .title-con-sm span, #title .title-con-sm{ color: #75787b; font-size: 16px; line-height: 27px; font-weight: 300; } #contact #title .title-con-sm{ text-align: center; } #one-column #banner .banner-con h1 { color: #75787b; font-family: 'Montserrat',serif; font-size: 35px; height: 100%; letter-spacing: normal; line-height: 35px; margin: 0; padding: 40px; width: 100%; } /* header social */ header div.social { position: relative; z-index: 999; } header div.social .list-inline { list-style: outside none none; margin-left: 15px; padding-left: 0; } header div.social li { margin-left: 0px; margin-top: 0; padding: 0; } header div.social a i { background-color: #75787b; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: #fff; font-size: 17px; line-height: 18px; height: 34px; padding: 8px; text-align: center; width: 34px; } header div.social a:hover i { background-color: #333; } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { header div.social ul { margin-left: auto; margin-right: auto; text-align: center; width: 100%; } /* end (max-width : 767px) */ } /* footer */ footer .well, footer .card.card-body { background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; border: medium none; margin-bottom: 0; } footer .alert-warning.alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } #footer{ margin-top: 50px; } #footer .mailing-list{ background: #F3EEE4; padding: 20px 20px 50px 20px; } #footer .email-title{ margin-bottom: 10px; } #footer .logo img { margin-left: auto; margin-right: auto; padding: 50px 0; text-align: center; } #footer .contact{ padding: 20px 0 0; } #footer .footer-top{ background: #d0d0ce; margin-bottom: 10px; } #footer .footer-top p{ /*color: #494949;*/ font-family: 'Montserrat',serif; font-size: 13px; line-height: 22px; } #footer .footer-bottom{ background: #fff; padding-top:20px; } #footer .footer-bottom p{ font-family: 'Montserrat',sans-serif; font-size: 13px; font-weight: 300; line-height: 50px; color: #75787b; } #footer .footer-top label { font-family: 'Montserrat',sans-serif; display: inline-block; font-weight: bold; margin-bottom: 5px; max-width: 100%; text-transform: uppercase; color: #75787b !important; } #footer a{ color: #75787b; } #footer h3, #products #footer h3 { /* color: #fff; */ font-size: 15px; line-height: 15px; margin: 0 0 20px; padding: 0; } #footer div.social li { margin-left: 0; margin-top: 0; padding: 0; } #footer div.social li.logo { margin-left: 20px; margin-top: 0; padding: 0; } #footer div.social li.logo img { width: 50%; } #footer div.social a i { background-color: #75787b; border-radius: 24px; -moz-border-radius: 24px; -webkit-border-radius: 24px; color: #fff; font-size: 17px; line-height: 22px; height: 40px; padding: 8px; text-align: center; width: 40px; } #footer div.social a:hover i { background-color: #333; } #footer .btn-primary { background-color: #75787b; border: 1px solid #75787b; color: #fff; font-size: 16px; font-weight: 200; line-height: 16px; /*margin: 20px 0;*/ /*padding: 9px 20px;*/ position: relative; text-align: center; text-indent: 0.1em; /*text-transform: uppercase;*/ } #footer .btn-primary:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #footer .btn-primary:hover { color: #fff; border: 1px solid #333; background-color: #333; } #footer .footer-top address .row { margin-bottom: 0px; } #footer .footer-sublogo img { position: relative; text-align: right; /*top: 12px;*/ width: 50px; } /*- gallery */ /* #gallery #title { margin-bottom: 0px; } */ #homeowner #gallery, #professionals #gallery{ background: rgba(88, 88, 88, .8); color: #fff; height: 422px; position: relative; } #homeowner #gallery-bg{ background-image: url("/wp-content/uploads/homeowner-pros-closeup2.jpg"); background-position: top right; background-repeat: no-repeat; background-size: contain; } #professionals #gallery-bg{ background-image: url("/wp-content/uploads/homeowner-pros-closeup2.jpg"); background-position: top right; background-repeat: no-repeat; background-size: contain; } #homeowner #gallery p, #professionals #gallery p{ color: #fff; font-size: 15px; line-height: 25px; } #homeowner #gallery h3, #professionals #gallery h3{ color: #fff; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } #homeowner #gallery h3.under::after, #professionals #gallery h3.under::after { background-color: #fff; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #homeowner #gallery .gallery-img { background-image: url("/wp-content/uploads/homeowner-pros-kitchen1.jpg"); background-position: top left; background-repeat: no-repeat; background-size: cover; height: 422px; position: absolute; left: 0; top: 0; width: 50%; } #professionals #gallery .gallery-img { background-image: url("/wp-content/uploads/homeowner-pros-kitchen1.jpg"); background-position: top left; background-repeat: no-repeat; background-size: cover; height: 422px; position: absolute; left: 0; top: 0; width: 50%; } #homeowner #gallery .gallery-con, #professionals #gallery .gallery-con{ /*padding-top: 40px;*/ margin-top: 60px; margin-left: 40px; } #homeowner #gallery .btn-default, #professionals #gallery .btn-default { background-color: #fff; border: 1px solid #fff; color: #75787b; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 10px 20px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #homeowner #gallery .btn-default:before, #professionals #gallery .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #homeowner #gallery .btn-default:hover, #professionals #gallery .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } /*- tour */ #tour{ background: rgba(196, 18, 48, .8) none repeat scroll 0 0; color: #fff; height: 422px; position: relative; padding: 0; /*border-bottom: 2px solid #fff;*/ } #tour-bg{ background-image: url("/wp-content/uploads/homeowner-pros-closeup1.jpg"); background-position: top left; background-repeat: no-repeat; background-size: contain; } #tour p{ color: #fff; font-size: 15px; line-height: 25px; } #tour h3{ color: #fff; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } #tour h3.under::after { background-color: #fff; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #tour .tour-img { background-image: url("/wp-content/uploads/homeowner-pros-kitchen2.jpg"); background-position: top left; background-repeat: no-repeat; background-size: cover; height: 422px; position: absolute; right: 0; top: 0; width: 50%; } #tour .tour-con { padding-right: 50px; margin-top: 60px; } #tour .col-sm-6{ padding-right: 0; } #tour .btn-default { background-color: #fff; border: 1px solid #fff; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #75787b; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 10px 20px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #tour .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #tour .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } /*- intro */ #intro{ background: #fff; color: #494949; padding: 20px 0; } #intro p{ color: #494949; font-size: 15px; line-height: 25px; } #intro .intro-col1{ padding-right: 50px; } #intro .intro-col1 h3, #intro .intro-col2 h3{ color: #75787b; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } #intro .intro-col1 h3.under::after, #intro .intro-col2 h3.under::after { background-color: #75787b; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #intro .intro-col2{ border: 1px solid #dc8927; box-sizing: border-box; padding: 0 50px 30px; position: relative; border-radius: 30%/10%; -moz-border-radius: 30%/10%; -webkit-border-radius: 30%/10%; top: 15px; } #intro .intro-col2.unround-bottom-corners{ -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #intro .intro-col2 h3 { background-color: #fff; clear: both; color: #dc8927; display: inline-block; font-size: 20px; left: 50%; line-height: 20px; margin-top: 0px; margin-bottom: 20px; padding: 0; position: relative; text-align: center; top: 5%; transform: translate(-50%, -50%); width: 70%; } #intro .intro-col2 p.intro-btn{ text-align: center; } #intro .intro-col2 .btn-default { background-color: #dc8927; border: 1px solid #dc8927; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #fff; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #intro .intro-col2 .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #intro .intro-col2 .btn-default:hover { color: #fff; border: 1px solid #333; background-color: #333; } /* -------------------------------------- */ /* --Media Query Styles -- */ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { #footer div.social li { /*margin-left: 25px;*/ margin-top: 10px; padding: 0; } } @media only screen and (min-width : 1280px) { /* bootstrap adjust desktop width to 1280px */ .container { width: 1280px; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { #footer div.social li { /*margin-left: 10px;*/ /*margin-top: 40px;*/ padding: 0; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { div.wpcf7 .form-inline .form-group { max-width: 100% !important; } #intro .intro-col1 { margin-bottom: 30px; padding-right: 0; } #tour { /*background: #eee8dd none repeat scroll 0 0;*/ /*color: #494949;*/ height: auto; position: relative; } #tour .tour-con { padding-right: 0; } #tour .tour-img { float: left; height: auto; max-height: 700px; min-height: 400px; position: relative; right: 0; width: 100%; } .Aligner { align-items: center; display: inherit; justify-content: center; min-height: 24em; } #header-top { margin-top: 30px; text-align: center; } #header-bottom .logo { text-align: center; margin: 20px 0; } #footer .footer-bottom { text-align: center; } #footer .footer-bottom .text-right { text-align: center; } #footer .footer-bottom .pull-right { float: none !important; } #footer h3 { margin: 20px 0; } #header-bottom .logo img, #footer .footer-top .logo img { display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; width: auto; text-align: center; } #gallery h3, #tour h3, #intro .intro-col1 h3 { font-size: 30px; line-height: 30px; margin: 0 0 40px; padding: 0; } #gallery { height: auto; position: relative; } #homeowner #gallery .gallery-img { display: none; } /*#gallery .gallery-img img { margin-left: auto; margin-right: auto; text-align: center; } #gallery .gallery-img { margin-bottom: 30px; }*/ #intro .intro-col2 { padding: 0 20px 20px; } #splash .col-sm-6, #splash .col-sm-12 { min-height: 1px; padding-left: 0; padding-right: 0; position: relative; } /*.col-sm-12 { padding: 0; }*/ #footer .footer-top { background: #d0d0ce none repeat scroll 0 0; color: #494949; font-family: 'Montserrat',serif; font-size: 14px; padding: 40px 20px; /*text-align: center;*/ } /* end @media 768px */ } @media only screen and (max-width : 767px) { #header-top .text-right, #header-bottom .text-right { text-align: center; margin-bottom: 20px; } /* end @media 767px */ } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { /* end @media 480px */ } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { /* end @media 320px */ } /* -------------------------------------- */ /* --DESIGN PARTNER "elevations & you" Page Styles -- */ /* if homeowners */ body.homeowners .proshowroom{ display: none; } /* if professionals */ body.professionals .homeshowroom{ display: none; } /* -------------------------------------- */ /* --Products Page Styles -- */ /*- products */ #products{ } /*#products p{ color: #fff; font-size: 15px; line-height: 25px; }*/ #products h3.under { color: #75787b; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } #products h3.under::after { background-color: #75787b; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #products .gallery-img img { object-fit: cover; } #products .gallery-con{ /*padding-top: 40px;*/ } #products .btn-default { background-color: #dc8927; border: 1px solid #dc8927; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #fff; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #products .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #products .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } .products #banner .banner-con h1 { color: #75787b; font-family: 'Montserrat',serif; font-size: 35px; line-height: 35px; height: 100%; letter-spacing: normal; margin: 0; padding: 40px; width: 100%; } /* -------------------------------------- */ /* -- GALLERY Styles -- */ #gallery .product { border-bottom: 0; margin: 0 0 3.14286rem; padding-bottom: 0; } #gallery h3.product-title { display: none; } #gallery .product-wrap { border: 1px solid #c41230; padding: 20px; } #gallery .product-img { margin-bottom: 1.71429rem; } #gallery .product-content { line-height: 1.71429; } #gallery .facetwp-facet { margin-bottom: 20px; } #gallery .product-filter-wrap h3.facet-label { border-bottom: 1px solid #ccc; color: #c41230; font-size: 25px; font-weight: 400; line-height: 25px; margin: 0 0 10px; padding: 0 0 5px; } #gallery .facetwp-selections > ul { margin: 0 0 9px 0; padding: 0 0 0 15px; } @media only screen and (max-width: 1280px) { #gallery .brand-text { font-size: 13px; line-height: 19px; } /* end 992px */ } @media only screen and (max-width: 1199px) { #gallery .brand-text { font-size: 13px; line-height: 16px; } /* end 992px */ } @media only screen and (max-width: 992px) { #gallery .brand-text { font-size: 13px; line-height: 16px; } /* end 992px */ } @media only screen and (max-width: 767px) { #gallery .product.col-sm-6, #gallery .product.col-sm-12 { min-height: 1px; padding-left: 0px; padding-right: 0px; position: relative; margin: 0; } #gallery .brand-text { min-height: auto; } #gallery .product-img a img, #gallery .brand-logo a img { margin-left: auto; margin-right: auto; text-align: center; } #gallery .facetwp-selections > ul { margin: 0 0 9px; padding: 0; } #gallery .product-img { margin-bottom: 0; } /* end 767px */ } /* -------------------------------------- */ /* -- BRANDS Styles -- */ #brands .product { border-bottom: 0; margin: 0 0 3.14286rem; padding-bottom: 0; } #brands h3.product-title { display: none; } #brands .product-wrap { border: 1px solid #ccc; padding: 20px; } #brands .product-img { margin-bottom: 1.71429rem; } #brands .product-content { line-height: 1.71429; } #brands .facetwp-facet { margin-bottom: 20px; } #brands .product-filter-wrap h3.facet-label { border-bottom: 1px solid #ccc; color: #c41230; font-size: 25px; font-weight: 400; line-height: 25px; margin: 0 0 10px; padding: 0 0 5px; } #brands .facetwp-selections > ul { margin: 0 0 9px 0; padding: 0 0 0 15px; } /* brand pagination styles */ .facetwp-pager { border-radius: 4px; display: inline-block; margin: 20px 0; padding-left: 16px; } /* page #s */ .facetwp-page { background-color: #fff; border: 1px solid #ddd; color: #337ab7; float: left; line-height: 1.42857; margin-left: -1px; padding: 6px 12px !important; position: relative; text-decoration: none; } /* active page */ .facetwp-page.active { background-color: #337ab7; border-color: #337ab7; color: #fff; cursor: default; z-index: 3; } .facetwp-pager-label { display: inline-block; margin-right: 12px; padding: 6px 12px !important; } .facetwp-selections li:hover { color: #c41230; } @media only screen and (max-width: 1280px) { #brands .brand-text { font-size: 13px; line-height: 19px; } /* end 992px */ } @media only screen and (max-width: 1199px) { #brands .brand-text { font-size: 13px; line-height: 16px; } /* end 992px */ } @media only screen and (max-width: 992px) { #brands .brand-text { font-size: 13px; line-height: 16px; } /* end 992px */ } @media only screen and (max-width: 767px) { #brands .product.col-sm-6, #brands .product.col-sm-12 { min-height: 1px; padding-left: 0px; padding-right: 0px; position: relative; } #brands .brand-text { min-height: auto; } #brands .product-img a img, #brands .brand-logo a img { margin-left: auto; margin-right: auto; text-align: center; } #brands .facetwp-selections > ul { margin: 0 0 9px; padding: 0; } /* end 767px */ } /* -------------------------------------- */ /* -- About Us Team -- .about-designer-showroom{} .new-home-remodeling-team{} */ .new-home-remodeling-team a i.fa-envelope { background-color: #c8c0ab; border-radius: 24px; color: #766b52; font-size: 20px; height: 40px; padding: 8px; text-align: center; width: 40px; } .new-home-remodeling-team #banner .banner-con h1 { color: #75787b; font-family: 'Montserrat',sans-serif; font-size: 25px; font-weight: 700; height: 100%; letter-spacing: 2px; line-height: 25px; margin: 0; padding: 60px; width: 100%; } body.new-home-remodeling-team #banner { /*margin-bottom: 50px;*/ } .new-home-remodeling-team h3.wcf-post-title { background-color: #fff; clear: both; display: inline-block; font-size: 20px; left: 50%; line-height: 20px; margin-bottom: 20px; margin-top: 0; padding: 0; position: relative; text-align: center; top: 0; transform: translate(-50%, -50%); width: 70%; color: #75787b; } .new-home-remodeling-team h3.wcf-post-title { border-bottom: none; margin: 0 !important; padding: 0; display: none; } .new-home-remodeling-team h3.team-name { border-bottom: medium none; color: #75787b; font-size: 20px; line-height: 20px; margin: 20px 0 0 !important; padding: 0; } .new-home-remodeling-team article .wcf-article-wrap{ /*border: 1px solid #dc8928;*/ padding: 0 30px 30px; position: relative; /*border-radius: 100%/10%; -moz-border-radius: 100%/10%; -webkit-border-radius: 100%/10%;*/ top: 15px; } .new-home-remodeling-team .wcf-item-result .wcf-article-wrap{ -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .new-home-remodeling-team .wcf-item-result .wcf-article-wrap { /*border-bottom: 1px solid #75787b !important; margin: 0 0 3.14286rem !important; padding-bottom: 30px !important;*/ } .wcf-form-wrapper { margin: 0 20px; } @media only screen and (max-width: 992px) { .new-home-remodeling-team [class*="wcf-column-"], .new-home-remodeling-team [class^="wcf-column-"] { float: left; width: 25%; position: relative; min-height: 1px; padding-right: 0px !important; padding-left: 0px !important; } .new-home-remodeling-team article .wcf-article-wrap { /* border: 1px solid #dc8928; */ padding: 0 10px 10px !important; position: relative; top: 15px; } } @media only screen and (max-width: 767px) { .wcf-column-2, .wcf-column-3, .wcf-column-4 { width: 100% !important; } } /* -------------------------------------- */ /* -- Contact Us Styles -- */ /* brown #524133 orange #dc8927 */ div#contact-form .btn-primary { /* background-color: #fff; */ /* border: 1px solid #fff; */ /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ /* color: #524133; */ font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } div#contact-form .btn-primary:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } div#contact-form .btn-primary:hover{ color: #fff; border: 1px solid #75787b; background-color: #75787b; } div#sched .btn-primary { background-color: #fff; border: 1px solid #fff; border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%; color: #75787b; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } div#sched .btn-primary:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } div#sched .btn-primary:hover{ color: #fff; border: 1px solid #75787b; background-color: #75787b; } div#sched p { color: #fff; } #mc_embed_signup { /*background: rgba(0, 0, 0, 0.03);*/ background: #b1b3b3; margin-top: 0 !important; padding: 10px 20px 40px 20px; } #mc_embed_signup input.email { background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555555; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } div#contact-us { border-top: 1px solid #c8c0ab; margin: 10px 0 0; padding: 10px 0 0; } #contact-form p { color: #fff; } #contact-form a { color: #fff; text-decoration: underline; } #contact-form a:hover { color: #75787b; } #contact-form label { /*color: #fff;*/ text-transform: uppercase; font-family: 'Montserrat',sans-serif; } #contact-form { background-image: url("/images/bg-contactform.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; /* padding-top: 40px; */ padding-bottom: 0px; } div#contact-form h3 { color: #fff; } div#contact-form h3::after { background-color: #fff; } div.wpcf7 .screen-reader-response { border: 0 none; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; } div.wpcf7 { margin: 0; padding: 0; } div#contact-us div#map-container { float: left; width: 50%; } div#contact-us div#map-container div#map { background-image: url("/images/contact/map.jpg"); background-position: -210px center; background-repeat: no-repeat; background-size: cover; height: 60%; overflow: hidden; position: relative; } div#contact-us div#map-container div#map a.map { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } div#contact-us div#map-container div#map div#contact-in { background-color: rgba(255, 255, 255, 0.9); height: 100%; padding: 0 30px; position: absolute; width: 340px; z-index: 99; } div#contact-us div#map-container div#map div#contact-in a { color: #494949; height: auto; left: inherit; position: relative; text-decoration: none; top: inherit; width: inherit; } div#contact-us div#map-container div#map div#contact-in div { position: absolute; top: 50%; transform: translateY(-50%); } div#contact-us div#sched { background-color: #d4602f; background-image: url("/images/contact/schedule-visit.jpg"); background-repeat: no-repeat; background-size: cover; height: 40%; position: relative; } div#contact-us div#sched div { left: 30px; position: absolute; top: 50%; transform: translateY(-50%); } div#contact-us div#sched h3 { color: #fff; } div#contact-us div#sched h3::after { background-color: #fff; } div#contact-us div#contact-form form { float: right; max-width: 640px; padding: 60px 40px; width: 100%; } div#contact-us div#contact-form form input { margin: 0 0 30px; /*padding-left: 10px;*/ } div#contact-us div#contact-form form select { -moz-appearance: none; background-color: #ffffff; background-image: url("/images/contact/tiny-tri.png"); background-position: 95% center; background-repeat: no-repeat; /*border-radius: 0;*/ margin: 0 0 25px; position: relative; text-indent: 0px; } div#contact-us div#map-container div#map div#contact-in h3 { color: #d4602f; } div#contact-us div#map-container div#map div#contact-in h3::after { background-color: #d4602f; } .group::after, .row { clear: both; } .group::after, .group::before { content: ""; display: table; } /* -------------------------------------- */ /* -- Contact - Media Query Styles -- */ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } @media only screen and (min-width : 1280px) { /* bootstrap adjust desktop width to 1280px */ } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { div#contact-us div#contact-form { float: none; width: 100%; } div#contact-us div#map-container { float: none; width: 100%; } div#contact-us div#contact-form form { float: none; max-width: inherit; padding: 30px; width: 100%; } div#contact-us div#contact-form form .col-sm-6 { min-height: 1px; padding-left: 0; padding-right: 0; position: relative; } div#contact-us div#map-container div#map a { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } div#contact-us div#map-container div#map div#contact-in { height: auto; padding: 0 30px; position: relative; width: 60%; z-index: 99; } div#contact-us div#map-container div#map div#contact-in div { padding: 30px 15px; position: relative; top: 0; transform: none; } div#contact-us div#map-container div#map { height: auto; } div#contact-us div#map-container { float: none; height: auto !important; width: 100%; } div#contact-us div#contact-form { float: none; height: auto !important; width: 100%; } div#contact-us div#sched { height: auto; } div#contact-us div#sched div { left: 0; padding: 40px; position: relative; top: 0; transform: none; } div#contact-us .row { margin-left: 0; margin-right: 0; } /* end @media 768px */ } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { /* end @media 480px */ } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { /* end @media 320px */ } /* -------------------------------------- */ /* -- Experience Styles -- */ /*- exp */ #exp{ margin-top: 80px; } #exp-sched{ background: #d0d0ce; color: #75787b; height: 345px; position: relative; padding: 20px 0; } #exp-sched p{ color: #75787b; font-size: 15px; line-height: 25px; } #exp-sched h3{ color: #75787b; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } #exp h3{ color: #75787b; } #exp-sched h3.under::after { background-color: #75787b; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #exp-sched .exp-sched-con { padding-right: 40px; padding-top: 40px; position: relative; } #exp-sched .exp-sched-img { /*background-image: url("/images/homeowners/tour.jpg");*/ background-position: center center; background-repeat: no-repeat; background-size: cover; height: 345px; position: absolute; right: 0; top: 0; width: 49%; } #exp-sched .exp-con { padding-right: 50px; } #exp-sched .col-sm-6{ padding-right: 0; } #exp-sched .btn-default { background-color: #75787b; border: 1px solid #75787b; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #fff; font-size: 16px; line-height: 16px; margin: 10px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #exp-sched .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #exp-sched .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } /*#exp-sched .exp-sched-con { left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }*/ /* -------------------------------------- */ /* -- Events Styles -- */ #events .wcf-form-wrapper hr { border-color: #c8c0ab; margin-bottom: 40px; margin-top: 40px; } #events .event-image-con { position: relative; } #events .event-image-date { background-image: url("/images/events/e-poli.svg"); background-position: center center; background-repeat: no-repeat; background-size: 80% auto; bottom: -50px; height: auto; padding: 15px 0 40px; position: absolute; text-align: center; width: 100%; z-index: 1; } #events h3.event-title { color: #75787b; font-size: 40px; line-height: 40px; margin: 0 0 20px; } #events h3.under::after { background-color: #75787b; bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #events .event-image-date p { color: #75787b; font-family: 'Montserrat',sans-serif; font-size: 35px; font-weight: 700; padding: 10px 0 0; } #events .event-image { position: relative; } #events .event-image img { } #events .event-details.card { background-color: #fff; border: 1px solid #c8c0ab; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset; margin: 20px 0; min-height: 20px; padding: 19px; } #events .event-details p { text-align: center; } #events .event-details i.fa { color: #75787b; font-size: 60px; } #events .event-rsvp a{ color: #FFF; } #events .event-rsvp .btn-default { background-color: #dc8927; border: 1px solid #dc8927; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #fff; font-size: 16px; line-height: 16px; margin: 20px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #events .event-rsvp .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #events .event-rsvp .btn-default:hover { color: #fff; border: 1px solid #75787b; background-color: #75787b; } #events .event-details .e-line-dot::after { background-image: url("/images/events/e-line-dot.svg"); background-repeat: no-repeat; background-size: contain; content: ""; height: 140px; position: absolute; right: -10px; top: 0; width: 20px; } /* -------------------------------------- */ /* -- Booking "bookly" Styles -- */ #booking .booking-con{ margin-bottom: 50px; } #booking .booking-con h3{ color: #75787b; } #booking .booking-con .bookly-form { border: 1px solid #eee; margin: 0 auto; padding: 20px; } /* -------------------------------------- */ /* -- Blog Styles -- */ .blog #banner{ margin-bottom: 50px; } .blog h2, .blog h2 a{ content: ""; color: #75787b; padding: 0px; margin-bottom: 10px; font-size: 28px; font-weight: 400; font-family: 'Montserrat',serif; line-height: 28px; } /*.blog .sidebar a{ content: ""; color: #DC8927; }*/ .blog .sidebar h3{ content: ""; color: #75787b !important; border-bottom: 1px solid #777; padding-bottom: 10px; margin-bottom: 10px; font-size: 18px !important; font-weight: 400; font-family: 'Montserrat',serif; line-height: 20px; } .blog .sidebar h3.under::after { background-color: #75787b; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } .blog .sidebar ul{ margin: 0; padding: 0; } .blog .sidebar ul li { list-style: outside none none; margin-bottom: 10px; padding: 0; } .blog .sidebar .tagcloud a{ margin-right: 10px; color: #DC8927; font-size: 12px !important; } .blog .sidebar h3.sidebar-title { /*background-color: #fff; clear: both; display: inline-block; font-size: 20px; left: 50%; line-height: 20px; margin-bottom: 20px; margin-top: 0; padding: 0; position: relative; text-align: center; top: 5%; transform: translate(-50%, -50%); width: 70%; border: none; color: #75787b !important;*/ display: none; } /*.blog .sidebar{ border: 1px solid #75787b; padding: 0 50px 30px; position: relative; border-radius: 30%/10%; -moz-border-radius: 30%/10%; -webkit-border-radius: 30%/10%; top: 15px; }*/ .blog .sidebar { border: medium none; border-radius: 30% / 10%; padding: 0; position: relative; top: 0; } .blog .sidebar.unround-bottom-corners{ -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .blog .subscribebtn { border-top: 1px solid #75787b; margin-top: 30px; padding-top: 30px; text-align: center; } .blog .sidebar .subscribebtn a, #blog a.btn-search { color: #fff; } .blog article { border-bottom: 1px solid #75787b; margin-bottom: 40px; padding-bottom: 40px; } #blog .screen-reader-text, #blog .all-posts .screen-reader-text { clip: inherit; height: inherit; position: relative !important; width: inherit; } #blog .blogsingle-con, #blog .blogsearch-con { margin-bottom: 50px; margin-top: 50px; } /* -------------------------------------- */ /* -- Brand child pages (brand_brands/*) -- */ .brand_brands #banner .banner-con h1, #brands #banner .banner-con h1 { color: #75787b; font-family: 'Montserrat', serif; font-size: 25px; font-weight: 700; height: 100%; letter-spacing: 2px; line-height: 25px; margin: 0; padding: 60px; width: 100%; } body.brand_brands #banner, body#brands #banner { margin-bottom: 50px; } .brand_brands h3.wcf-post-title { background-color: #fff; border-bottom: none; box-sizing: border-box; clear: both; display: inline-block; font-size: 20px; left: 50%; line-height: 20px; margin-bottom: 20px; margin-top: 0; max-width: none; padding: 0; position: relative; text-align: center; top: 0; transform: translate(-50%, -50%); width: 70%; } .brand_brands h3:not(.wcf-post-title) { border-bottom: none; margin-bottom: 0; } body#brands:not(.products) h3 { border-bottom: none; margin: 0 0 20px !important; } .brand_brands article .wcf-article-wrap, #brands article .wcf-article-wrap { border: 1px solid #75787b; border-radius: 100%/10%; -moz-border-radius: 100%/10%; -webkit-border-radius: 100%/10%; padding: 0 30px 30px; position: relative; top: 15px; } .brand_brands .wcf-item-result .wcf-article-wrap, #brands .wcf-item-result .wcf-article-wrap { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid #75787b !important; margin: 0 0 3.14286rem !important; padding-bottom: 30px !important; } @media (min-width: 768px) and (max-width: 991.98px) { .brand_brands .wcf-item-result.wcf-column-3, #brands .wcf-item-result.wcf-column-3 { flex: 0 0 240px; max-width: 240px; width: 240px; } .brand_brands h3.wcf-post-title, .brand_brands article h3 { width: 70%; } .brand_brands article .wcf-article-wrap, #brands article .wcf-article-wrap { padding-left: 25px; padding-right: 25px; } } /* -------------------------------------- */ /* -- Product brand pages -- */ #products.cabinetry .products-img-wrap{ position: relative } #products.cabinetry .products-img-logo{ position: absolute; bottom: 0; left: 0; } #products.cabinetry .products-img-logo { background-image: url("/images/products/product-logo-bgshape.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; bottom: 0; height: 70px; left: 50%; position: absolute; transform: translate(-50%, 0%); opacity : 1; width: 400px; height: 70px; } #products.cabinetry .products-img-logo img { margin-left: auto; margin-right: auto; width: 40%; } /* -------------------------------------- */ /* -- Privacy & Terms -- */ .terms-of-use h3, .privacy-policy h3 { font-size: 20px; line-height: 20px; } /* -------------------------------------- */ /* -- Global - Media Query Styles -- */ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } @media only screen and (min-width : 1280px) { /* bootstrap adjust desktop width to 1280px */ } @media only screen and (min-width : 768px) { #footer .footer-sublogo { margin-right: 10px; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { header .container { width: 100%; } #nav.navbar-dark .navbar-nav > li > a { font-size: 12px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { /*#header-top .text-right, #header-bottom .text-right { text-align: center; margin-bottom: 20px; }*/ #nav.navbar-dark .navbar-nav > li > a { padding: 10px 10px; } #nav .dropdown-menu > li > a { padding: 5px 40px; } header .navbar-collapse { padding-right: 0; padding-left: 0; border: none; } #nav.navbar-default { background-color: #f8f8f8; border-color: #f8f8f8; } hr { margin-top: 15px; margin-bottom: 15px; border: 0; border-top: 1px solid #eeeeee; } h3{ font-family: 'Montserrat', serif !important; font-size: 30px; line-height: 30px; padding: 0 0 15px; text-transform: uppercase; } #gallery h3, #tour h3, #intro .intro-col1 h3 { font-size: 22px; line-height: 26px; margin: 0 0 40px; padding: 0; } /* nav */ .navbar-nav { margin: 0; } /* banner */ #banner .banner-con { min-width: 320px; } #banner .banner-con h1, #brands #banner .banner-con h1, .new-home-remodeling-team #banner .banner-con h1 { font-family: 'Montserrat',sans-serif; font-size: 18px; line-height: 24px; font-weight: 700; color: #75787b; margin: 0; padding: 20px; width: 100%; height: 100%; letter-spacing: 2px; } #banner .banner-con-sm { font-size: 13px; line-height: 22px; width: 100%; } #banner .banner-con { height: auto; top: 30%; } .experience-home-remodeling #banner .banner-con, .blog #banner .banner-con, #contact #banner .banner-con { height: auto; top: 50%; } #brands #banner .banner-con, #events #banner .banner-con, #gallery #banner .banner-con, .new-home-remodeling-team #banner .banner-con { height: auto; top: 30%; width: inherit; } /* breadcrumbs */ #breadcrumbs.breadcrumbs-con { margin: 20px; padding: 0; } #breadcrumbs .breadcrumbs-title { font-family: 'Montserrat', serif; font-size: 16px; line-height: 16px; text-transform: uppercase; color: #75787b; margin: 0; padding: 0; } /* banner */ #banner .banner-con h1 span { font-family: 'Montserrat',serif; font-size: 25px; line-height: 25px; color: #75787b; letter-spacing: normal; } #banner { margin-bottom: 30px; } #banner .banner-con { background-size: cover; width: 90%; } #banner .banner-con h1 { padding: 30px; } #banner .banner-con-sm { width: 100%; padding: 20px; } /* mobile container padded sides */ .container { margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; } /*#brands .container { margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; }*/ /* BS5: legacy navbar-header shim — do not zero #nav .container (v2.1.0 parity) */ .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-left: 0; margin-right: 0; } /* brand gallery */ #brands .wcf-field-checkbox.wcf-horizontal .wcf-checkbox-wrapper, #brands .wcf-field-taxonomy_checkbox.wcf-horizontal .wcf-checkbox-wrapper, #brands .wcf-field-radio.wcf-horizontal .wcf-radio-wrapper, #brands .wcf-field-taxonomy_radio.wcf-horizontal .wcf-radio-wrapper { margin: 10px 5px; } #brands [type="checkbox"].wcf-checkbox-item:not(:checked) + label:after { margin-left: 5px; } #brands [type="checkbox"].wcf-checkbox-item:checked + label:after { margin-left: 5px; } /*#brands input[type=radio] + label, #brands input[type=checkbox] + label { display: inline-block; margin: 0; padding: 8px 10px; margin-bottom: 0; font-size: 13px; line-height: 14px; color: #75787b; text-align: center; vertical-align: middle; cursor: pointer; background-color: #fff; background-repeat: repeat-x; border: 1px solid #ccc; border-color: #75787b; min-width: auto; text-align: left; }*/ #brands .wcf-input_query, #brands .wcf-form-title { display: none !important; } body#brands #banner { margin-bottom: 30px; } /* Brands listing grid — child brand pages use .brand_brands */ #brands h3.wcf-post-title { display: none; } /* experience */ .intro-col1 { margin-bottom: 20px; } #exp-sched { background: #d5d3c8; color: #494949; height: auto; position: relative; padding: inherit; } #exp-sched .col-sm-6 { min-height: 1px; padding-left: 0; padding-right: 0; position: relative; } #exp-sched .exp-sched-img { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 345px; position: relative; right: 0; top: 0; width: 100%; } #exp-sched .btn-default { padding: 9px 30px; } #exp-sched .exp-sched-con { position: relative; top: inherit; padding: 20px; } /* blog */ .blog .sidebar { border: 1px solid #75787b; padding: 0 30px 30px; position: relative; border-radius: 30%/10%; -moz-border-radius: 30%/10%; -webkit-border-radius: 30%/10%; top: 15px; } /* contact page */ div#contact-us div#contact-form form input { margin: 0 0 10px; /* padding-left: 10px; */ } div#contact-us div#map-container div#map div#contact-in { height: auto; padding: 0; position: relative; width: 100%; z-index: 99; clear: both; } div#contact-us div#map-container div#map div#contact-in div { padding: 20px; position: relative; top: 0; transform: none; } div#contact-us div#map-container div#map div#contact-in h3 { color: #d4602f; margin: 0px 0px 30px 0px; } #events .event-details .e-line-dot::after { background-image: none; } #events .event-rsvp { text-align: center; } #events .event-rsvp a { color: #fff; } #events .event-image-date p { color: #75787b; font-family: 'Montserrat',sans-serif; font-size: 24px; font-weight: 700; padding: 15px 0 0; } #events h3.event-title { color: #75787b; font-size: 30px; line-height: 30px; margin: 0 0 20px; } #events .event-details.card { margin: 0; } /* footer */ #footer { margin-top: 30px; } /* end @media 768px */ } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { /* end @media 480px */ } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { /* end @media 320px */ } /* -- VR Experience Styles -- */ #tour-history { background: #c41230; color: #fff; /* height: 400px;*/ position: relative; /*padding: 20px 0;*/ } #tour-history p { color: #fff; font-size: 15px; line-height: 25px; } #tour-history h3 { color: #fff; font-size: 40px; line-height: 40px; margin: 0 0 40px 0; padding: 0; } /* #tour-history a:link { color: #fff; text-decoration: underline; }*/ #tour-history h3.under::after { background-color: #fff; bottom: -20px; content: ""; height: 5px; left: 0; position: absolute; width: 170px; } #tour-history .tour-history-con { padding-right: 40px; padding-left: 40px; position: relative; } /*#tour-history .tour-history-img { background-image: url("/images/homeowners/tour.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 400px; position: absolute; left: 0; top: 0; width: 50%; }*/ /* #tour-history .tour-history-con { padding-left: 50px; }*/ #tour-history .col-sm-6 { padding-left: 0; } #tour-history .btn-default { background-color: #c41230; border: 1px solid #c41230; /*border-radius: 50% / 25%; -moz-border-radius: 50% / 25%; -webkit-border-radius: 50% / 25%;*/ color: #fff; font-size: 16px; line-height: 16px; margin: 10px 0; padding: 9px 70px; position: relative; text-align: center; text-indent: 0.1em; text-transform: uppercase; } #tour-history .btn-default:before { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: inherit; /*border-radius: 25% / 50%; -moz-border-radius: 25% / 50%; -webkit-border-radius: 25% / 50%;*/ } #tour-history .btn-default:hover { color: #fff; border: 1px solid #c41230; background-color: #c41230; } @media only screen and (max-width: 992px) { #tour-history { background: #c41230; color: #fff; height: auto; position: relative; padding: 0; } #tour-history .col-sm-6 { padding-left: inherit; width: 100%; } /*#tour-history .tour-history-img { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 400px; position: relative; left: 0; top: 0; width: 100%; }*/ #tour-history .tour-history-con { position: relative; top: inherit; padding: 20px; } /* end max-width : 992px*/ } /* BS5 Reboot parity — final cascade (beats BS5 reboot + mid-file drift) */ @media (max-width: 767.98px) { .container { max-width: 100%; width: 100%; } } html body { font-size: 14px; /* v2.2.55 — see the `body` rule above: prod declares the ratio, not the length. */ line-height: 1.42857; color: #333; } /* h2: prod BS3 main content — no reboot border (brand + interior pages) */ html body h2, html body .h2 { margin-top: 40px; margin-bottom: 20px; padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 9px; border-bottom-width: 0; border-bottom-style: none; border-bottom-color: #75787b; } /* h2.page-header: filter/listing divider where prod keeps BS3 border */ html body h2.page-header { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eee; } /* Homepage h2: prod spacing + no border (style-parity / groupedFixes) */ html body#home h2, html body#home .h2 { margin-top: 20px; margin-bottom: 10px; padding-bottom: 15px; line-height: 45px; border-bottom-width: 0; border-bottom-style: none; border-bottom-color: #75787b; } html body article h2 { margin-top: 20px; border-bottom-width: 0; border-bottom-style: none; border-bottom-color: #75787b; } html body h3, html body .h3 { margin-top: 20px; margin-bottom: 10px; } /* v2.2.55 — removed the /products/ landing h3 `!important` pin. It was added to outrank `body#brands:not(.products) h3 { margin: 0 0 20px !important }`, but that selector cannot match a body that carries `.products`, so there was nothing to beat. What it did instead was force 20px/10px on *every* h3 on the page — the two sidebar facet labels and both footer headings included — and its `!important` silently outranked the narrower pins for those (`h3.facet-label`, `#footer .well h3`, `#footer address.contact h3`). The generic `html body h3` rule above already supplies the same values for content headings. */ /* prod BS3 article column widths — home #intro/#exp headings use width:auto below */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home h2, html body#home .h2, html body#home h3, html body#home .h3 { width: 740px; } html body#home #intro h2, html body#home #intro .h2, html body#home #intro h3, html body#home #intro .h3, html body#home #exp h2, html body#home #exp .h2, html body#home #exp h3, html body#home #exp .h3 { max-width: 100%; width: auto; } } @media (min-width: 992px) and (max-width: 1199.98px) { html body#home h2, html body#home .h2, html body#home h3, html body#home .h3 { width: 940px; } html body#home #intro h2, html body#home #intro .h2, html body#home #intro h3, html body#home #intro .h3, html body#home #exp h2, html body#home #exp .h2, html body#home #exp h3, html body#home #exp .h3 { max-width: 100%; width: auto; } } @media (min-width: 1200px) and (max-width: 1279.98px) { html body#home h2, html body#home .h2, html body#home h3, html body#home .h3 { width: 1140px; } html body#home #intro h2, html body#home #intro .h2, html body#home #intro h3, html body#home #intro .h3, html body#home #exp h2, html body#home #exp .h2, html body#home #exp h3, html body#home #exp .h3 { max-width: 100%; width: auto; } } @media (min-width: 1280px) { html body#home h2, html body#home .h2, html body#home h3, html body#home .h3 { width: 1250px; } html body#home #intro h2, html body#home #intro .h2, html body#home #intro h3, html body#home #intro .h3, html body#home #exp h2, html body#home #exp .h2, html body#home #exp h3, html body#home #exp .h3 { max-width: 100%; width: auto; } } @media (min-width: 768px) { html body article h2 { width: 525px; } } @media (min-width: 768px) and (max-width: 991.98px), (min-width: 1200px) { html body article h3 { width: 274.156px; } } /* FacetWP products grid — BS3 columns without .row parent (/products/) */ @media (min-width: 768px) { /* v2.2.49 — prod's .facetwp-template is a plain block inside .col-sm-9, not a row; the -15px gutters here pushed the whole product grid 15px left and 30px wide. */ html body#brands.products .facetwp-template, html body.products#brands .facetwp-template { display: block; margin-left: 0; margin-right: 0; } html body#brands.products .facetwp-template::before, html body#brands.products .facetwp-template::after, html body.products#brands .facetwp-template::before, html body.products#brands .facetwp-template::after { content: " "; display: table; } html body#brands.products .facetwp-template::after, html body.products#brands .facetwp-template::after { clear: both; } html body#brands.products .facetwp-template > article.product, html body.products#brands .facetwp-template > article.product { box-sizing: border-box; float: left; flex: none; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } } @media (min-width: 768px) and (max-width: 991.98px) { html body#brands.products .facetwp-template > article.product.col-sm-6, html body.products#brands .facetwp-template > article.product.col-sm-6 { max-width: 50%; padding-left: 15px; padding-right: 15px; width: 50%; } } @media (min-width: 992px) { html body#brands.products .facetwp-template > article.product.col-md-4, html body.products#brands .facetwp-template > article.product.col-md-4 { max-width: 33.33333333%; padding-left: 15px; padding-right: 15px; width: 33.33333333%; } html body#brands.products .facetwp-template > article.product.col-sm-6, html body.products#brands .facetwp-template > article.product.col-sm-6 { padding-left: 15px; padding-right: 15px; } } /* FacetWP card grid — body#gallery (/design-gallery/, /take-a-tour/) and body#team */ @media (max-width: 767.98px) { html body#gallery .facetwp-template, html body#team .facetwp-template { display: block; margin-left: 0; margin-right: 0; } html body#gallery .facetwp-template::before, html body#gallery .facetwp-template::after, html body#team .facetwp-template::before, html body#team .facetwp-template::after { content: " "; display: table; } html body#gallery .facetwp-template::after, html body#team .facetwp-template::after { clear: both; } html body#gallery .facetwp-template > article.product, html body#team .facetwp-template article.product { box-sizing: border-box; float: left; flex: none; min-height: 1px; padding-left: 0; padding-right: 0; position: relative; } html body#gallery .facetwp-template > article.product.col-xs-6, html body#gallery .facetwp-template > article.product.col-sm-6, html body#team .facetwp-template article.product.col-xs-6, html body#team .facetwp-template article.product.col-sm-6 { max-width: 50%; width: 50%; } } @media (min-width: 768px) { html body#gallery .facetwp-template, html body#team .facetwp-template { display: block; margin-left: 0; margin-right: 0; } html body#gallery .facetwp-template::before, html body#gallery .facetwp-template::after, html body#team .facetwp-template::before, html body#team .facetwp-template::after { content: " "; display: table; } html body#gallery .facetwp-template::after, html body#team .facetwp-template::after { clear: both; } html body#gallery .facetwp-template > article.product, /* #team wraps cards in .team-wrap — not a direct child of .facetwp-template */ html body#team .facetwp-template article.product { box-sizing: border-box; float: left; flex: none; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } } @media (min-width: 768px) and (max-width: 991.98px) { html body#gallery .facetwp-template > article.product.col-sm-6, html body#gallery .facetwp-template > article.product.col-md-4, html body#team .facetwp-template article.product.col-sm-6, html body#team .facetwp-template article.product.col-md-4 { max-width: 50%; width: 50%; } } @media (min-width: 992px) { html body#gallery .facetwp-template > article.product.col-md-4, html body#team .facetwp-template article.product.col-md-4 { max-width: 33.33333333%; width: 33.33333333%; } } @media (min-width: 1200px) { /* /take-a-tour/ Explore Elevations — col-lg-3 4-up; design-gallery has no col-lg-3 */ html body#gallery .facetwp-template > article.product.col-lg-3 { max-width: 25%; width: 25%; } } /* /contact/kitchen-designers/ — BS5 reboot hr opacity 0.25 vs prod #ccc (v2.2.71) */ html body#team article.product hr { border-top: 1px solid #ccc; height: 0; margin-bottom: 20px; margin-top: 20px; opacity: 1; } /* WCF brand listing grid — float row inside col-sm-9 sidebar layout */ @media (min-width: 768px) { html body#brands:not(.products) .wcf-row.wcf-items-results { display: block; margin-left: -15px; margin-right: -15px; } html body#brands:not(.products) .wcf-row.wcf-items-results::before, html body#brands:not(.products) .wcf-row.wcf-items-results::after { content: " "; display: table; } html body#brands:not(.products) .wcf-row.wcf-items-results::after { clear: both; } html body#brands:not(.products) .wcf-item-result[class*="wcf-column-"] { box-sizing: border-box; float: left; flex: none; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } } @media (min-width: 992px) { html body#brands:not(.products) .wcf-item-result.wcf-column-3 { max-width: 33.33333333%; width: 33.33333333%; } } /* BS3 responsive hidden utilities — BS5 breakpoint rename dropped hidden-* */ @media (max-width: 767.98px) { html body .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { html body .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { html body .hidden-md { display: none !important; } } @media (min-width: 1200px) { html body .hidden-lg { display: none !important; } } /* BS3 btn-group-justified — product + WCF card action rows */ html body .btn-group.btn-group-justified { border-collapse: separate; display: table; table-layout: fixed; width: 100%; } html body .btn-group.btn-group-justified > .btn, html body .btn-group.btn-group-justified > .btn-group { display: table-cell; float: none; width: 1%; } html body .btn-group.btn-group-justified > .btn-group .btn { width: 100%; } /* Header logo sm — BS3 col-sm-* starts at 768px; BS5 applies at 576px */ @media (max-width: 767.98px) { html body #header-bottom .container > .row > [class*="col-sm-"], html body #header-bottom .container > .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; width: 100%; } /* v2.2.49: the logo's 20px top margin used to be zeroed here and re-added as padding-top on #header-bottom. That kept the logo in the right place but made the header 8px taller than prod, which pushed every page's content down at sm. Prod keeps the margin on .logo and no padding on #header-bottom. */ html body #header-bottom .logo { margin-bottom: 20px; margin-top: 20px; } html body .row.dmbs-content { display: block; margin-left: 0; margin-right: 0; } html body .row.dmbs-content > [class*="col-"] { flex: none; float: none; max-width: 100%; width: 100%; } } /* /products/ — prod BS3 rem base (10px) margins + no banner gap on listing */ /* v2.2.55 — bounded to >768px. Prod's own `@media only screen and (max-width: 768px)` gives `#banner` a 30px bottom margin, and this unconditional override outranked it at (1,2,1), so everything from #title down sat 30px high at md. Above 768px prod computes 0. */ @media (min-width: 768.02px) { html body#brands.products #banner { margin-bottom: 0; } } /* v2.2.56 — prod BS3 `@media (max-width: 768px)` gives /products/ #banner 30px bottom margin at sm */ @media (max-width: 767.98px) { html body#brands.products #banner, html body.products#brands #banner { margin-bottom: 30px; } /* v2.2.57 — BS5 sets overflow:hidden on #banner; prod is visible (/contact/, /showroom-location/). */ html body #banner { overflow: visible; } } html body#brands.products .product { margin-bottom: 31.4286px; } html body#brands.products .product-img { margin-bottom: 17.1429px; } /* WCF brand listing grid — sm float row (v2.1.5 covered 768px+ only) */ @media (max-width: 767.98px) { html body#brands:not(.products) .wcf-row.wcf-items-results { display: block; margin-left: -15px; margin-right: -15px; } html body#brands:not(.products) .wcf-row.wcf-items-results::before, html body#brands:not(.products) .wcf-row.wcf-items-results::after { content: " "; display: table; } html body#brands:not(.products) .wcf-row.wcf-items-results::after { clear: both; } html body#brands:not(.products) .wcf-item-result[class*="wcf-column-"] { box-sizing: border-box; float: left; flex: none; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; width: 100%; } } /* /products/ sm — nested sidebar row + full-width product cards (v2.2.7) */ @media (max-width: 767.98px) { html body#brands.products .product-filter-wrap { margin-bottom: 20px; } html body#brands.products .facetwp-template > article.product .product-wrap, html body.products#brands .facetwp-template > article.product .product-wrap { padding: 20px; } html body#brands.products .facetwp-template > article.product .product-img img, html body.products#brands .facetwp-template > article.product .product-img img { display: block; height: auto; max-width: 100%; } } /* /products/ sm — nested .col-sm-9 inside .col-sm-3; descendant selector (v2.2.6) */ @media (max-width: 767.98px) { /* v2.2.49 — prod keeps the BS3 -15px gutter on this nested row and 15px on its columns; only the stacking (BS3 col-sm-* is inactive below 768px) is ours. */ html body#brands.products .col-sm-12 > .row, html body.products#brands .col-sm-12 > .row { display: block; margin-left: -15px; margin-right: -15px; } html body#brands.products .col-sm-12 > .row > .col-sm-3, html body.products#brands .col-sm-12 > .row > .col-sm-3, html body#brands.products .col-sm-12 > .row .col-sm-9, html body.products#brands .col-sm-12 > .row .col-sm-9 { flex: 0 1 auto; float: none; max-width: none; padding-left: 15px; padding-right: 15px; width: 100%; } html body#brands.products .facetwp-template, html body.products#brands .facetwp-template { display: block; margin-left: 0; margin-right: 0; } html body#brands.products .facetwp-template::before, html body#brands.products .facetwp-template::after, html body.products#brands .facetwp-template::before, html body.products#brands .facetwp-template::after { display: none; } html body#brands.products .facetwp-template > article.product, html body.products#brands .facetwp-template > article.product, html body#brands.products .facetwp-template > article.product.col-sm-6, html body.products#brands .facetwp-template > article.product.col-sm-6, html body#brands.products .facetwp-template > article.product.col-md-4, html body.products#brands .facetwp-template > article.product.col-md-4 { flex: 0 1 auto; float: none; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } } /* /products/ md+ — filter sidebar float row scoped to content grid (v2.1.8 global .col-sm-3 broke footer) */ @media (min-width: 768px) { html body#brands.products .col-sm-12 > .row, html body.products#brands .col-sm-12 > .row { display: block; } html body#brands.products .col-sm-12 > .row::before, html body#brands.products .col-sm-12 > .row::after, html body.products#brands .col-sm-12 > .row::before, html body.products#brands .col-sm-12 > .row::after { content: " "; display: table; } html body#brands.products .col-sm-12 > .row::after, html body.products#brands .col-sm-12 > .row::after { clear: both; } html body#brands.products .col-sm-12 > .row > .col-sm-3, html body.products#brands .col-sm-12 > .row > .col-sm-3 { flex: none; float: left; min-height: 1px; width: 25%; max-width: 25%; } html body#brands.products .col-sm-12 > .row .col-sm-9, html body.products#brands .col-sm-12 > .row .col-sm-9 { display: block; flex: none; float: none; min-height: 1px; overflow: hidden; width: 75%; } html body#brands.products .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type, html body.products#brands .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type { display: block; } html body#brands.products .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::before, html body#brands.products .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::after, html body.products#brands .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::before, html body.products#brands .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::after { content: " "; display: table; } html body#brands.products .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::after, html body.products#brands .col-sm-12 > .row .col-sm-9 > .clearfix:first-of-type::after { clear: both; } } /* /products/ md — prod BS3 15px gutter on floated col-sm-6 cards (v2.2.56 spot-capture pin) */ @media (min-width: 768px) and (max-width: 991.98px) { /* v2.2.75 — v2.2.58 max-width:100% capped the row at 740px; prod bleeds -15px gutters to 770px at the md capture width (768px viewport), shrinking FacetWP cards and page height. */ html body#brands.products .col-sm-12 > .row, html body.products#brands .col-sm-12 > .row { box-sizing: border-box; margin-left: -15px; margin-right: -15px; max-width: none; width: auto; } html body#brands.products .col-sm-12 > .row > .col-sm-3, html body.products#brands .col-sm-12 > .row > .col-sm-3, html body#brands.products .col-sm-12 > .row .col-sm-9, html body.products#brands .col-sm-12 > .row .col-sm-9 { padding-left: 15px; padding-right: 15px; } /* v2.2.76 — prod md capture: article padding 0 (not 15px); gutters come from row bleed */ html body#brands.products .facetwp-template > article.product, html body.products#brands .facetwp-template > article.product { padding-left: 0; padding-right: 0; } html body#brands.products .facetwp-template > article.product.col-sm-6, html body.products#brands .facetwp-template > article.product.col-sm-6 { flex: none; max-width: 50%; padding-left: 0; padding-right: 0; width: 50%; } } @media (min-width: 992px) { /* v2.2.55 — removed `height: 84px; object-fit: contain; width: auto`. Prod computes `height: auto`, so its 380x200 thumbnail is clamped by max-width to the 238px column and renders 238x125.25. The fixed height instead capped it at 84px and let width shrink to 159.59px, costing ~41px per product row — the bulk of /products/' -115px at xxl. */ html body#brands.products .product-img img { height: auto; max-width: 100%; } html body#brands.products .facetwp-pager { margin-bottom: 20px; margin-top: 20px; } html body#brands.products .col-sm-12 > .row .col-sm-9 > .clearfix:last-of-type, html body.products#brands .col-sm-12 > .row .col-sm-9 > .clearfix:last-of-type { margin-bottom: 0; padding-bottom: 0; } html body#brands.products .product-wrap { padding: 20px; } } /* brand_brands/* sm — prod BS3 dmbs-content clearfix row box (+40–60px) */ @media (max-width: 767.98px) { html body .row.dmbs-content::before, html body .row.dmbs-content::after { content: " "; display: table; } html body .row.dmbs-content::after { clear: both; } html body .row.dmbs-content > .dmbs-main, html body .row.dmbs-content > [class*="col-"].dmbs-main { min-height: 1px; } } /* Footer mailing-list — BS5 .card.card-body vs prod BS3 .well padding (v2.2.1) */ html body footer .card.card-body { display: block; flex: none; min-height: 20px; padding: 19px; } /* /cabinet-installation/ — prod 10px rem base; column-count masonry on body#projects.cabinet-installation */ html body#projects.cabinet-installation .controls { margin-bottom: 20px; } /* v2.2.49: every p, not just p + p — BS5 reboot gives the first one 1rem/16px where prod's BS3 base is 10px */ html body#projects.cabinet-installation .col-sm-12 > p { margin-bottom: 10px; } /* Home intro/exp — BS3 block+float row (v2.1.8 flex + h2/h3 width pins caused md/lg overflow) */ html body#home #intro h2, html body#home #intro .h2, html body#home #intro h3, html body#home #intro .h3, html body#home #exp h2, html body#home #exp .h2, html body#home #exp h3, html body#home #exp .h3 { max-width: 100%; width: auto; } @media (min-width: 768px) { html body#home #intro > .container > .row, html body#home #exp > .container > .row { display: block; } html body#home #intro > .container > .row::before, html body#home #intro > .container > .row::after, html body#home #exp > .container > .row::before, html body#home #exp > .container > .row::after { content: " "; display: table; } html body#home #intro > .container > .row::after, html body#home #exp > .container > .row::after { clear: both; } html body#home #intro > .container > .row > [class*="col-"], html body#home #exp > .container > .row > [class*="col-"] { flex: none; float: left; max-width: 50%; width: 50%; } } /* Home md/lg/xl — h2/h3 width pins apply to full-width cols only (v2.2.0 scrollWidth fix) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home [class*="col-sm-"]:not(.col-sm-12) h2, html body#home [class*="col-sm-"]:not(.col-sm-12) .h2, html body#home [class*="col-sm-"]:not(.col-sm-12) h3, html body#home [class*="col-sm-"]:not(.col-sm-12) .h3, html body#home [class*="col-md-"]:not(.col-md-12) h2, html body#home [class*="col-md-"]:not(.col-md-12) .h2, html body#home [class*="col-md-"]:not(.col-md-12) h3, html body#home [class*="col-md-"]:not(.col-md-12) .h3 { max-width: 100%; width: auto; } } @media (min-width: 992px) and (max-width: 1199.98px) { html body#home [class*="col-sm-"]:not(.col-sm-12) h2, html body#home [class*="col-sm-"]:not(.col-sm-12) .h2, html body#home [class*="col-sm-"]:not(.col-sm-12) h3, html body#home [class*="col-sm-"]:not(.col-sm-12) .h3, html body#home [class*="col-md-"]:not(.col-md-12) h2, html body#home [class*="col-md-"]:not(.col-md-12) .h2, html body#home [class*="col-md-"]:not(.col-md-12) h3, html body#home [class*="col-md-"]:not(.col-md-12) .h3 { max-width: 100%; width: auto; } } @media (min-width: 1200px) and (max-width: 1279.98px) { html body#home [class*="col-sm-"]:not(.col-sm-12) h2, html body#home [class*="col-sm-"]:not(.col-sm-12) .h2, html body#home [class*="col-sm-"]:not(.col-sm-12) h3, html body#home [class*="col-sm-"]:not(.col-sm-12) .h3, html body#home [class*="col-md-"]:not(.col-md-12) h2, html body#home [class*="col-md-"]:not(.col-md-12) .h2, html body#home [class*="col-md-"]:not(.col-md-12) h3, html body#home [class*="col-md-"]:not(.col-md-12) .h3 { max-width: 100%; width: auto; } } @media (min-width: 1280px) { html body#home [class*="col-sm-"]:not(.col-sm-12) h2, html body#home [class*="col-sm-"]:not(.col-sm-12) .h2, html body#home [class*="col-sm-"]:not(.col-sm-12) h3, html body#home [class*="col-sm-"]:not(.col-sm-12) .h3, html body#home [class*="col-md-"]:not(.col-md-12) h2, html body#home [class*="col-md-"]:not(.col-md-12) .h2, html body#home [class*="col-md-"]:not(.col-md-12) h3, html body#home [class*="col-md-"]:not(.col-md-12) .h3 { max-width: 100%; width: auto; } } /* BS3 col-sm-12 — prod zero padding at md; BS5 row gutter adds 15px (v2.2.0) */ @media (min-width: 768px) and (max-width: 991.98px) { html body .container > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } } /* /cabinet-installation/ masonry — prod img-responsive display:block; BS5 img-fluid stays inline (v2.2.0) */ html body#projects.cabinet-installation .mix img, html body#projects.cabinet-installation .card-container img { display: block; height: auto; max-width: 100%; } html body#projects.cabinet-installation .card-wrap { display: block; } /* /cabinet-installation/ md — BS3 750px container only; v2.2.1 full-width caused md regression (783×3967) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#projects.cabinet-installation .container > .row > .col-sm-12 { float: left; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } } /* /cabinet-installation/ lg — prod fluid header (992px) + block/float gallery row; keep 970px content tier (v2.2.4) */ @media (min-width: 992px) and (max-width: 1199.98px) { html body#projects.cabinet-installation #header-nav .container, html body#projects.cabinet-installation #header-bottom .container { max-width: none !important; width: 100% !important; } html body#projects.cabinet-installation #header-bottom .row.vertical-align { display: block; } html body#projects.cabinet-installation #header-bottom .row.vertical-align::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation #header-bottom .row.vertical-align > [class*="col-"] { float: left; } html body#projects.cabinet-installation #header-nav .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation #title + .container > .row > .col-sm-12 { float: left; max-width: none; padding-left: 15px; padding-right: 15px; width: 100%; } html body#projects.cabinet-installation #title .title-con-sm p { margin-bottom: 10px; } } /* /cabinet-installation/ xl — extend lg fluid header + block/float gallery (v2.2.7) */ @media (min-width: 1200px) and (max-width: 1279.98px) { /* v2.2.55 — dropped the fluid-header override here (container `max-width/width: 100% !important` plus the block+float `.row.vertical-align`). Prod's header container is 1170px and flex-centred at xl; only lg is genuinely fluid on this page, and the `!important` was also outranking the v2.2.55 generic header centring. */ html body#projects.cabinet-installation #header-nav .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation #title + .container > .row > .col-sm-12 { float: left; max-width: none; padding-left: 15px; padding-right: 15px; width: 100%; } html body#projects.cabinet-installation .container > .row > .col-sm-12 { float: left; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } } @media (min-width: 1280px) { /* v2.2.55 — same fluid-header override removed as in the xl block above. Prod's header container is 1280px and flex-centred at xxl, which made dev's header 9.5px taller (the logo scaled to a 1400px container) and left the row top-aligned. */ html body#projects.cabinet-installation #title + .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation #title + .container > .row > .col-sm-12 { float: left; max-width: none; padding-left: 15px; padding-right: 15px; width: 100%; } } /* Home md — footer address nested col-sm-12: prod zero padding (BS5 adds 15px, +86px stack) (v2.2.1) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home #footer .footer-top address > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } html body#home #footer .footer-top address .row .row > .col-sm-6 { float: left; max-width: none; width: 50%; } } /* Home lg — prod fluid header + table-nav inline items; footer h3 width pin (v2.2.3) */ @media (min-width: 992px) and (max-width: 1199.98px) { html body#home #header-nav .container, html body#home #header-bottom .container { max-width: none !important; width: 100% !important; } #nav ul.navbar-nav > li, #nav ul.navbar-nav > .nav-item, #nav .navbar-nav > li, #nav .navbar-nav > .nav-item { display: inline-block; float: none; } html body#home #footer h2, html body#home #footer .h2, html body#home #footer h3, html body#home #footer .h3 { max-width: 100%; width: auto; } html body#home #footer .footer-top address .row .row > .col-sm-6 { float: left; max-width: none; width: 50%; } } /* Home xxl — 4px scroll delta vs prod (v2.2.0 note) */ @media (min-width: 1280px) { html body#home #slideshow .master-slider-parent { margin-bottom: 26px; } } /* brand_brands/* CPT — body#blog + .brand_brands + .type-brands (v2.2.7) */ html body.brand_brands h2.page-header a, html body#blog .type-brands h2.page-header a, html body#blog [class*="brand_brands-"].hentry h2.page-header a { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: none; text-transform: inherit; } html body.brand_brands #banner, html body#blog #banner { margin-bottom: 50px; } /* brand_brands CPT h2.page-header — prod BS3 margin-top + divider (style-parity v2.2.10) */ html body.brand_brands .type-brands h2.page-header, html body.brand_brands [class*="brand_brands-"].hentry h2.page-header, html body#blog .type-brands h2.page-header, html body#blog [class*="brand_brands-"].hentry h2.page-header { margin-top: 40px; margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); } /* brand_brands CPT h3 — prod margin-bottom 0 (style-parity v2.2.10) */ html body.brand_brands .type-brands h3:not(.wcf-post-title), html body.brand_brands [class*="brand_brands-"].hentry h3:not(.wcf-post-title), html body#blog .type-brands h3:not(.wcf-post-title), html body#blog [class*="brand_brands-"].hentry h3:not(.wcf-post-title) { border-bottom: none; margin-bottom: 0; } html body.brand_brands .type-brands img:not(.wp-post-image), html body.brand_brands [class*="brand_brands-"].hentry img:not(.wp-post-image), html body#blog .type-brands img:not(.wp-post-image), html body#blog [class*="brand_brands-"].hentry img:not(.wp-post-image) { display: block; height: auto; max-width: 100%; } @media (max-width: 767.98px) { html body.brand_brands .row.dmbs-content, html body#blog .row.dmbs-content { display: block; margin-left: 0; margin-right: 0; } /* v2.2.49: padding stays at BS3's 15px — .dmbs-main is not one of the col-sm-6 / col-sm-12 classes prod zeroes below 769px */ html body.brand_brands .row.dmbs-content > .dmbs-main, html body.brand_brands .row.dmbs-content > [class*="col-"].dmbs-main, html body#blog .row.dmbs-content > .dmbs-main, html body#blog .row.dmbs-content > [class*="col-"].dmbs-main { flex: none; float: none; max-width: 100%; min-height: 1px; width: 100%; } /* v2.2.55 — removed the 13px bottom margin on the brand post wrapper. Prod computes 0; the 13px was buying back height that the flow-root above had displaced. */ /* Home sm — prod centered intro copy; no fixed h2/h3 width (566px caused 625px capture) */ html body#home #intro .intro-col1, html body#home #intro .intro-col1 p, html body#home #intro .intro-col1 h3 { text-align: center; } /* v2.2.19's fixed 458px h3 width dropped in v2.2.49. Same mistake as the home 566px pin: 458px was measured off one heading, then applied to every h3 on the page, so the footer address heading came out 68px short of prod's 526px. Prod sets no width on h3 at all and lets each one fill its own column. */ html body.brand_brands h3:not(.wcf-post-title), html body.brand_brands .h3, html body#blog .type-brands h3:not(.wcf-post-title), html body#blog [class*="brand_brands-"].hentry h3:not(.wcf-post-title), html body#blog:has(.type-brands) .hentry h3:not(.wcf-post-title), html body#blog #footer h3:not(.wcf-post-title), html body#blog #footer .h3 { max-width: none; width: auto; } /* v2.2.15 — azek/cambria sm: prod h2.page-header height 60px (not 110px multi-line capture) */ html body#blog.azek .type-brands h2.page-header, html body#blog.azek [class*="brand_brands-"].hentry h2.page-header, html body#blog.cambria .type-brands h2.page-header, html body#blog.cambria [class*="brand_brands-"].hentry h2.page-header { height: 60px; } /* v2.2.18's fixed 566px width on every home h2/h3 dropped in v2.2.49. 566px is the sm content-column width, so the pin also hit the footer headings that live in narrower columns and pushed the document to 625px. Prod leaves these at width:auto and lets each heading fill its own column. */ html body#home h2, html body#home .h2, html body#home h3:not(.wcf-post-title), html body#home .h3 { max-width: none; width: auto; } html body.brand_brands #footer .footer-top, html body#blog #footer .footer-top { padding-bottom: 40px; padding-top: 40px; } } @media (min-width: 768px) { html body.brand_brands .row.dmbs-content, html body#blog .row.dmbs-content { display: block; margin-left: -15px; margin-right: -15px; } html body.brand_brands .row.dmbs-content::before, html body.brand_brands .row.dmbs-content::after, html body#blog .row.dmbs-content::before, html body#blog .row.dmbs-content::after { content: " "; display: table; } html body.brand_brands .row.dmbs-content::after, html body#blog .row.dmbs-content::after { clear: both; } html body.brand_brands .row.dmbs-content > [class*="col-"]:not(.dmbs-main), html body#blog .row.dmbs-content > [class*="col-"]:not(.dmbs-main) { flex: none; float: left; min-height: 1px; } html body.brand_brands .row.dmbs-content > .dmbs-main, html body.brand_brands .row.dmbs-content > [class*="col-"].dmbs-main, html body#blog .row.dmbs-content > .dmbs-main, html body#blog .row.dmbs-content > [class*="col-"].dmbs-main { flex: none; float: none; min-height: 1px; overflow: hidden; width: auto; } } @media (min-width: 768px) and (max-width: 991.98px) { html body.brand_brands .row.dmbs-content > [class*="col-"], html body#blog .row.dmbs-content > [class*="col-"] { padding-left: 15px; padding-right: 15px; } html body.brand_brands .row.dmbs-content > [class*="col-sm-3"], html body#blog .row.dmbs-content > [class*="col-sm-3"] { max-width: 25%; width: 25%; } } @media (min-width: 992px) { html body.brand_brands .row.dmbs-content > [class*="col-"], html body#blog .row.dmbs-content > [class*="col-"] { padding-left: 15px; padding-right: 15px; } } /* brands listing — page-brands.php sidebar; scoped after #banner (v2.2.6) */ @media (max-width: 767.98px) { html body#brands:not(.products) #banner ~ .container > .row { display: block; margin-left: 0; margin-right: 0; } html body#brands:not(.products) #banner ~ .container > .row > .col-sm-3, html body#brands:not(.products) #banner ~ .container > .row > .col-sm-9 { flex: none; float: none; max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } } @media (min-width: 768px) { html body#brands:not(.products) #banner ~ .container > .row { display: block; margin-left: -15px; margin-right: -15px; } html body#brands:not(.products) #banner ~ .container > .row::before, html body#brands:not(.products) #banner ~ .container > .row::after { content: " "; display: table; } html body#brands:not(.products) #banner ~ .container > .row::after { clear: both; } html body#brands:not(.products) #banner ~ .container > .row > .col-sm-3 { flex: none; float: left; min-height: 1px; max-width: 25%; width: 25%; } html body#brands:not(.products) #banner ~ .container > .row > .col-sm-9 { display: block; flex: none; float: none; min-height: 1px; overflow: hidden; width: auto; } } @media (min-width: 768px) and (max-width: 991.98px) { html body#brands:not(.products) #banner ~ .container > .row > .col-sm-3, html body#brands:not(.products) #banner ~ .container > .row > .col-sm-9 { padding-left: 15px; padding-right: 15px; } html body#brands:not(.products) .wcf-item-result.wcf-column-3 { flex: none; float: left; max-width: 50%; width: 50%; } } @media (min-width: 992px) { html body#brands:not(.products) #banner ~ .container > .row > .col-sm-3, html body#brands:not(.products) #banner ~ .container > .row > .col-sm-9 { padding-left: 15px; padding-right: 15px; } } /* Home sm/md reflow — prod BS3 sm breakpoint at 768px (v2.2.9) */ @media (max-width: 767.98px) { html body#home #slideshow { overflow: hidden; } html body#home #slideshow .master-slider-parent { margin-bottom: 30px; } html body#home #intro .intro-col1 { margin-bottom: 30px; padding-right: 0; } html body#home #intro .intro-col2 { padding: 0 20px 20px; top: 0; } } @media (min-width: 768px) and (max-width: 991.98px) { html body#home #intro > .container > .row, html body#home #exp > .container > .row { display: block; } html body#home #intro > .container > .row::before, html body#home #intro > .container > .row::after, html body#home #exp > .container > .row::before, html body#home #exp > .container > .row::after { content: " "; display: table; } html body#home #intro > .container > .row::after, html body#home #exp > .container > .row::after { clear: both; } html body#home #intro > .container > .row > [class*="col-"], html body#home #exp > .container > .row > [class*="col-"] { flex: none; float: left; max-width: 50%; width: 50%; } html body#home #intro .intro-col1 { margin-bottom: 0; padding-right: 50px; } html body#home #intro .intro-col2 { padding: 0 50px 30px; top: 15px; } html body#home #slideshow .master-slider-parent { margin-bottom: 26px; } html body#home #exp > .container > .row > [class*="col-"]:last-child { margin-bottom: 0; } } /* v2.2.14 — md navbar single-row parity (BS5 flex vs prod BS3 table layout) */ @media (min-width: 768px) and (max-width: 991.98px) { #header-nav .container > .row { display: block; } #nav.navbar.navbar-expand-md { align-items: normal; display: block; flex-wrap: nowrap; } #nav.navbar.navbar-expand-md > .container { display: block; max-width: 100%; width: 100%; } /* v2.2.54 — BS3 zeroes .navbar-collapse padding at >=768px, so prod's nav ul spans the full 766px. The 15px here narrowed it to 736px and moved the wrap points. */ #nav .navbar-collapse.navbar-1-collapse { display: block !important; flex-basis: auto; flex-grow: 0; padding-left: 0; padding-right: 0; } #nav ul.navbar-nav, #nav .navbar-nav { display: table !important; float: none !important; flex-direction: row !important; flex-wrap: nowrap !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; text-align: right; width: auto !important; } #nav ul.navbar-nav > li, #nav ul.navbar-nav > .nav-item, #nav .navbar-nav > li, #nav .navbar-nav > .nav-item { display: inline-block !important; float: none !important; white-space: nowrap; } /* v2.2.66 — VRT md captures at 768px. Prod nav-link padding 10px there (#nav 92px band); v2.2.61's 5px was probed at 780 where prod reads 72px. */ #nav .navbar-nav > li > a, #nav .navbar-nav > .nav-item > a, #nav .navbar-nav .nav-link { padding: 10px !important; } #nav.navbar-dark .navbar-nav > li > a { font-size: 12px; } } /* v2.2.14 — brand_brands CPT sm: hide empty sidebar cols (prod single-column) */ @media (max-width: 767.98px) { html body#blog:has(.type-brands) .row.dmbs-content > [class*="col-"]:not(.dmbs-main) { display: none; } } /* v2.2.14 — brand_brands CPT md: footer address nested cols + page-header divider */ @media (min-width: 768px) and (max-width: 991.98px) { /* v2.2.78 — prod col-sm-12 has zero pad (same pin as body#home v2.2.1); inner row is ~277px with two 50% floats, not the 250px box v2.2.64 forced (+20px footer stack). */ html body#blog #footer .footer-top address > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } html body#blog #footer .footer-top address .row .row { margin-left: -15px; margin-right: -15px; max-width: none; width: auto; } html body#blog #footer .footer-top address .row .row > .col-sm-6 { float: left; max-width: none; width: 50%; } html body#blog .type-brands h2.page-header, html body#blog [class*="brand_brands-"].hentry h2.page-header { padding-bottom: 9px; } } /* v2.2.14 — brand_brands CPT: footer card h3 margin (prod zero bottom gap) v2.2.49: scoped to the card heading it was written for. The bare `#footer h3` also matched the address heading, where prod keeps a 20px bottom margin, and its two ids outranked the address-specific rule. */ html body#blog:has(.type-brands) #footer .card h3 { margin-bottom: 0; } /* v2.2.14 — home md: footer-top row block layout (flex stretch +34px scroll) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home #footer .footer-top .container > .row { display: block; } html body#home #footer .footer-top .container > .row::before, html body#home #footer .footer-top .container > .row::after { content: " "; display: table; } html body#home #footer .footer-top .container > .row::after { clear: both; } html body#home #footer .footer-top .container > .row > [class*="col-"] { flex: none; float: left; } } /* v2.2.16 — /design-partners/ md/lg: prod h3 margin-bottom 0 (scroll height +70–102px) */ @media (min-width: 768px) and (max-width: 1199.98px) { html body.design-partners .container > .row > .col-sm-8 h3, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3, html body.design-partners .container > .row > .col-sm-8 .h3, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3 { margin-bottom: 0; } html body.design-partners .proshowroom .container > .row > .col-sm-8 p:last-child { margin-bottom: 10px; } } /* v2.2.15 — /design-partners/ BS3 block+float col-sm-4/8 (flex stretch +88px sm scroll) v2.2.49: the row gutters and column padding were zeroed here as a pair; measured against prod they are BS3's -15px row / 15px column at sm, so only the block layout and full-width columns are pinned now. col-sm-4/col-sm-8 are not covered by prod's `.col-sm-6, .col-sm-12 { padding: 0 }` rule, so they keep their padding. */ @media (max-width: 767.98px) { html body.design-partners .container > .row, html body.design-partners .proshowroom .container > .row { display: block; } html body.design-partners .container > .row > [class*="col-"], html body.design-partners .proshowroom .container > .row > [class*="col-"] { flex: none; float: none; max-width: 100%; width: 100%; } html body.design-partners #footer .footer-top .container > .row { align-items: flex-start; display: block; } } @media (min-width: 768px) { html body.design-partners .container > .row, html body.design-partners .proshowroom .container > .row { display: block; margin-left: -15px; margin-right: -15px; } html body.design-partners .container > .row::before, html body.design-partners .container > .row::after, html body.design-partners .proshowroom .container > .row::before, html body.design-partners .proshowroom .container > .row::after { content: " "; display: table; } html body.design-partners .container > .row::after, html body.design-partners .proshowroom .container > .row::after { clear: both; } html body.design-partners .container > .row > .col-sm-4, html body.design-partners .proshowroom .container > .row > .col-sm-4 { flex: none; float: left; max-width: 33.333333%; min-height: 1px; padding-left: 15px; padding-right: 15px; width: 33.333333%; } html body.design-partners .container > .row > .col-sm-8, html body.design-partners .proshowroom .container > .row > .col-sm-8 { flex: none; float: left; max-width: 66.666667%; min-height: 1px; padding-left: 15px; padding-right: 15px; width: 66.666667%; } html body.design-partners #footer .footer-top .container > .row { align-items: flex-start; display: block; } } /* v2.2.22 — /products/ article links: prod BS3 link color (style-parity) */ html body article a { color: rgb(51, 122, 183); text-decoration: none; } /* v2.2.22 — /cabinet-installation/ sm: keep prod 2-col masonry below md (v2.2.21 column-count:1 caused 14182px sm height) */ @media (max-width: 767.98px) { html body#projects.cabinet-installation #title + .container > .row, html body#projects.cabinet-installation .container > .row { display: block; /* v2.2.49: gutters stay at BS3 -15px — prod keeps them here */ } html body#projects.cabinet-installation #title + .container > .row > .col-sm-12, html body#projects.cabinet-installation .container > .row > .col-sm-12 { flex: none; float: none; max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; max-width: 100%; width: 100%; } } /* v2.2.23 — /cabinet-installation/ md: block gallery row (BS5 flex breaks column-count masonry) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#projects.cabinet-installation #title + .container > .row, html body#projects.cabinet-installation .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row::after, html body#projects.cabinet-installation .container > .row::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { max-width: 100%; width: 100%; } } /* v2.2.23 — /design-partners/ md/lg: hr + col-sm-8 stack spacing (v2.2.20 pins, no overflow-x clip) */ @media (min-width: 768px) and (max-width: 1199.98px) { html body.design-partners .container > hr, html body.design-partners .proshowroom > hr, html body.design-partners .proshowroom .container > hr { margin-bottom: 20px; margin-top: 20px; } html body.design-partners .container > .row > .col-sm-8 p, html body.design-partners .proshowroom .container > .row > .col-sm-8 p { margin-bottom: 10px; } html body.design-partners .container > .row > .col-sm-8 p:last-child, html body.design-partners .proshowroom .container > .row > .col-sm-8 p:last-child { margin-bottom: 10px; } html body.design-partners .container > .row > .col-sm-8 h3, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3, html body.design-partners .container > .row > .col-sm-8 .h3, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3 { margin-top: 0; } html body.design-partners .container > .row > .col-sm-4 img, html body.design-partners .proshowroom .container > .row > .col-sm-4 img { display: block; height: auto; margin-bottom: 0; max-width: 100%; } html body.design-partners .proshowroom #title { margin-bottom: 60px; } } /* v2.2.24 — interior sm (576–767): restore BS3 row/col gutters (v2.2.9 zero drift on brand/products/contact) */ @media (min-width: 576px) and (max-width: 767.98px) { html body#blog .container, html body.brand_brands .container, html body#brands .container, html body#products .container, html body#projects .container, html body.design-partners .container, html body#contact .container, html body#one-column .container, html body#events .container, html body#gallery .container, html body#locations .container { /* v2.2.49 — prod is 20px below the md tier, not 15px */ padding-left: 20px; padding-right: 20px; } html body#blog .container > .row, html body.brand_brands .container > .row, html body#brands .container > .row, html body#products .container > .row, html body#projects .container > .row, html body.design-partners .container > .row, html body#contact .container > .row, html body#one-column .container > .row, html body#events .container > .row, html body#gallery .container > .row, html body#blog .row.dmbs-content, html body.brand_brands .row.dmbs-content { margin-left: -15px; margin-right: -15px; } /* v2.2.49 — :not() exclusions so prod's `.col-sm-6, .col-sm-12 { padding: 0 }` below the md tier is not overridden by these id-scoped selectors */ html body#blog .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body.brand_brands .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#brands .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#products .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#projects .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body.design-partners .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#contact .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#one-column .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#events .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#gallery .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#blog .row.dmbs-content > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body.brand_brands .row.dmbs-content > [class*="col-"]:not(.col-sm-6):not(.col-sm-12) { padding-left: 15px; padding-right: 15px; } html body.brand_brands .row.dmbs-content > .dmbs-main, html body.brand_brands .row.dmbs-content > [class*="col-"].dmbs-main, html body#blog .row.dmbs-content > .dmbs-main, html body#blog .row.dmbs-content > [class*="col-"].dmbs-main { flex: none; float: none; max-width: 100%; width: 100%; } /* v2.2.27's 576px pin on dmbs-main dropped in v2.2.49 — prod's column does fill the bleeding row at 606px, and the 606px h2 it was trying to suppress is prod's own width once the column keeps its BS3 15px padding */ } /* v2.2.24 — /design-partners/ banner intro copy centered (prod #title .title-con-sm) */ html body.design-partners #title .title-con-sm, html body.design-partners #title .title-con-sm p, html body.design-partners #title .title-con-sm span { text-align: center; } /* v2.2.24 — home md: prod centered welcome column copy */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home #intro .intro-col1, html body#home #intro .intro-col1 p, html body#home #intro .intro-col1 h2, html body#home #intro .intro-col1 h3 { text-align: center; } } /* v2.2.24 — /cabinet-installation/ sm: v2.2.20 gallery box + prod 10px-rem masonry gaps (keep v2.2.22 2-col) */ @media (max-width: 767.98px) { html body#projects.cabinet-installation #title + .container > .row, html body#projects.cabinet-installation .container > .row { margin-left: -15px; margin-right: -15px; } /* v2.2.49: col-sm-12 padding stays 0 below 769px — prod zeroes it there */ html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { -webkit-column-gap: 12.5px; -moz-column-gap: 12.5px; column-gap: 12.5px; } html body#projects.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .mix { margin-bottom: 17.5px; } } /* v2.2.28 — /cabinet-installation/ masonry: prod 10px-rem px gaps md+ (BS5 1rem=16px drift; sm uses 27.5px below) */ html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { -webkit-column-gap: 12.5px; -moz-column-gap: 12.5px; column-gap: 12.5px; } html body#projects.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .mix, html body.cabinet-installation .card-container .mix, html body.cabinet-installation .mix { margin-bottom: 17.5px; } /* v2.2.28 — /cabinet-installation/ lg+: block gallery row for column-count masonry (extend v2.2.23 md) */ @media (min-width: 992px) { html body#projects.cabinet-installation #title + .container > .row, html body#projects.cabinet-installation .container > .row { display: block; } html body#projects.cabinet-installation #title + .container > .row::after, html body#projects.cabinet-installation .container > .row::after { clear: both; content: ""; display: table; } html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { max-width: 100%; width: 100%; } } /* v2.2.28 — /design-partners/ md: first + proshowroom col-sm-4 image block (BS5 flex shrink) */ @media (min-width: 768px) and (max-width: 1199.98px) { html body.design-partners .container > .row > .col-sm-4, html body.design-partners .proshowroom .container > .row > .col-sm-4 { min-height: 1px; } html body.design-partners .container > .row > .col-sm-8 h3:first-child, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3:first-child, html body.design-partners .container > .row > .col-sm-8 .h3:first-child, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3:first-child { margin-top: 0; } } /* v2.2.28 — /design-partners/ md: footer-top nested address cols (brand md v2.2.14 pattern) */ @media (min-width: 768px) and (max-width: 991.98px) { html body.design-partners #footer .footer-top address > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } html body.design-partners #footer .footer-top address .row .row > .col-sm-6 { float: left; max-width: none; width: 50%; } } /* v2.2.28 — brand_brands CPT md: hide empty sidebar cols + full-width dmbs-main (prod single-column) */ @media (min-width: 768px) and (max-width: 991.98px) { html body#blog:has(.type-brands) .row.dmbs-content > [class*="col-"]:not(.dmbs-main), html body#blog:has([class*="brand_brands-"]) .row.dmbs-content > [class*="col-"]:not(.dmbs-main) { display: none; } html body#blog:has(.type-brands) .row.dmbs-content > .dmbs-main, html body#blog:has([class*="brand_brands-"]) .row.dmbs-content > .dmbs-main, html body#blog:has(.type-brands) .row.dmbs-content > [class*="col-"].dmbs-main, html body#blog:has([class*="brand_brands-"]) .row.dmbs-content > [class*="col-"].dmbs-main { flex: none; float: none; max-width: 100%; overflow: visible; width: 100%; } html body#blog:has(.type-brands) #footer .footer-top .container > .row, html body#blog:has([class*="brand_brands-"]) #footer .footer-top .container > .row { display: block; } html body#blog:has(.type-brands) #footer .footer-top .container > .row::before, html body#blog:has(.type-brands) #footer .footer-top .container > .row::after, html body#blog:has([class*="brand_brands-"]) #footer .footer-top .container > .row::before, html body#blog:has([class*="brand_brands-"]) #footer .footer-top .container > .row::after { content: " "; display: table; } html body#blog:has(.type-brands) #footer .footer-top .container > .row::after, html body#blog:has([class*="brand_brands-"]) #footer .footer-top .container > .row::after { clear: both; } html body#blog:has(.type-brands) #footer .footer-top .container > .row > [class*="col-"], html body#blog:has([class*="brand_brands-"]) #footer .footer-top .container > .row > [class*="col-"] { flex: none; float: left; } } /* v2.2.55 — removed v2.2.28's md brand-thumb block. Superseded by the single .attachment-post-thumbnail rule further down, which restores what prod actually ships rather than re-guessing it per breakpoint. */ /* v2.2.26 — sm heading width pins (use width not max-width; brand h2 → v2.2.27 dmbs-main) */ @media (min-width: 576px) and (max-width: 767.98px) { html body#projects.cabinet-installation #title h1, html body#projects.cabinet-installation #title .h1, html body#projects.cabinet-installation #title h3, html body#projects.cabinet-installation #title .h3, html body.design-partners #title h1, html body.design-partners #title .h1, html body.design-partners #title h3, html body.design-partners #title .h3, html body#contact #title .title-con h1, html body#contact #title .title-con .h1, html body#contact #title .title-con-sm h3, html body#contact #title .title-con-sm .h3, html body#brands.products #title .title-con h1, html body.products#brands #title .title-con h1, html body#brands.products #title .title-con .h1, html body.products#brands #title .title-con .h1, html body#brands.products #title .title-con-sm h3, html body.products#brands #title .title-con-sm h3, html body#brands.products #title .title-con-sm .h3, html body.products#brands #title .title-con-sm .h3, html body#products #title .title-con h1, html body#products #title .title-con .h1, html body#products #title .title-con-sm h3, html body#products #title .title-con-sm .h3, html body#locations #title .title-con h1, html body#locations #title .title-con .h1, html body#locations #title .title-con-sm h3, html body#locations #title .title-con-sm .h3 { box-sizing: border-box; max-width: none; width: 536px; } /* v2.2.41's 536px #title container pin dropped in v2.2.49. 536px is prod's *content* width (576px box less 2x20px padding); pinning it as the border-box and zeroing the padding moved the container 20px right of prod. The container tier rules give the right box already, and the 536px heading pin above is correct inside it. */ } /* v2.2.28 — /cabinet-installation/ sm: drop overflow clip on masonry (v2.2.49 removed the zero-gutter row override — prod keeps BS3 -15px here) */ @media (max-width: 767.98px) { html body#projects.cabinet-installation #title + .container > .row > .col-sm-12, html body#projects.cabinet-installation .container > .row > .col-sm-12 { padding-left: 0; padding-right: 0; } html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { overflow: visible; } html body#projects.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .mix { margin-bottom: 17.5px; /* v2.2.49: prod value; was a 27.5px compensation */ } /* v2.2.55 — margins restored to prod's 15px. This rule's two ids outranked the generic `html body #title .title-con > hr` 15px pin, closing the gap between the h1 and the underline bar and costing 15px of page height at sm. */ html body#projects.cabinet-installation #title .title-con > hr { border-color: #c41230; border-width: 10px; border-top-width: 10px; display: block; margin-bottom: 15px; margin-top: 15px; opacity: 1; width: 100px; } } /* v2.2.28 — interior md: prod doc scroll 780px (750 container + 15px row bleed); cabinet/design-partners were 770 */ @media (min-width: 768px) and (max-width: 991.98px) { html body#projects.cabinet-installation .container > .row, html body#projects.cabinet-installation #title + .container > .row, html body.design-partners .container > .row, html body.design-partners .proshowroom .container > .row { margin-left: -15px; margin-right: -15px; } /* v2.2.49: prod's `@media (max-width: 768px) { .col-sm-6, .col-sm-12 { padding: 0 } }` is inclusive of 768, which is exactly where md is captured — so those two column classes are excluded here and re-padded from 769px up in the block below */ html body#projects.cabinet-installation .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body#projects.cabinet-installation #title + .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body.design-partners .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12), html body.design-partners .proshowroom .container > .row > [class*="col-"]:not(.col-sm-6):not(.col-sm-12) { padding-left: 15px; padding-right: 15px; } html body#projects.cabinet-installation .card-container, html body.cabinet-installation .card-container { display: block; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; max-width: 100%; width: 100%; } html body#projects.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .mix { margin-bottom: 17.5px; } html body.design-partners .container > .row, html body.design-partners .proshowroom .container > .row { display: block; } html body.design-partners .container > .row::after, html body.design-partners .proshowroom .container > .row::after { clear: both; content: ""; display: table; } html body.design-partners .container > .row > .col-sm-4, html body.design-partners .proshowroom .container > .row > .col-sm-4 { flex: none; float: left; max-width: 33.333333%; width: 33.333333%; } html body.design-partners .container > .row > .col-sm-8, html body.design-partners .proshowroom .container > .row > .col-sm-8 { flex: none; float: left; max-width: 66.666667%; width: 66.666667%; } } /* v2.2.28 — brand_brands CPT sm/md: prod BS3 link-blue h2.page-header anchor */ html body#blog .type-brands h2.page-header a, html body#blog [class*="brand_brands-"].hentry h2.page-header a { color: rgb(51, 122, 183); text-decoration: none; } /* v2.2.30 — /design-partners/ col-sm-8 h3.under bar (BS5 overflow clips ::after) */ html body.design-partners .container > .row > .col-sm-8, html body.design-partners .proshowroom .container > .row > .col-sm-8 { overflow: visible; } html body.design-partners .container > .row > .col-sm-8 h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3.under, html body.design-partners .container > .row > .col-sm-8 .h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3.under { position: relative; } html body.design-partners .container > .row > .col-sm-8 h3.under::after, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3.under::after, html body.design-partners .container > .row > .col-sm-8 .h3.under::after, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3.under::after { background-color: #c41230; bottom: 0; content: ""; display: block; height: 5px; left: 0; position: absolute; width: 170px; } /* v2.2.30 dropped in v2.2.49 — it padded cabinet col-sm-12 across the whole md tier including 768px, where prod zeroes it; the 769px-up block near the end restores the padding for the rest of the tier */ /* v2.2.30's 37.5px sm masonry gap dropped in v2.2.49 — measured prod is 17.5px, same as md+; the 27.5/37.5 escalations were chasing a scrollWidth artefact */ @media (max-width: 767.98px) { html body#projects.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .mix { margin-bottom: 17.5px; } } /* v2.2.51 — removed v2.2.30 home overflow-x clip; prod body stays overflow-x: visible at sm. */ /* v2.2.30 — brand_brands CPT sm: superseded v2.2.33 (float-left 50% restores prod sm layout) */ /* v2.2.30 — /design-partners/ md: proshowroom #title + section hr spacing (+97px prod scroll) */ @media (min-width: 768px) and (max-width: 991.98px) { html body.design-partners .proshowroom > hr { margin-bottom: 15px; margin-top: 15px; } html body.design-partners .proshowroom #title { margin-bottom: 60px; } html body.design-partners .proshowroom #title .title-con > hr { border-color: #c41230; border-width: 10px; border-top-width: 10px; display: block; margin-bottom: 15px; margin-top: 15px; opacity: 1; width: 100px; } } /* v2.2.49 — removed v2.2.31 interior md content-box container: prod is border-box 750px with 20px padding, not content-box 750+30. Handled by the container tiers. */ /* v2.2.31 — /design-partners/ md: prod #title hr + section stack (+127px scroll) */ @media (min-width: 768px) and (max-width: 991.98px) { html body.design-partners #title { margin-bottom: 60px; } html body.design-partners #title .title-con > hr { border-color: #c41230; border-width: 10px; border-top-width: 10px; display: block; margin-bottom: 15px; margin-top: 15px; opacity: 1; width: 100px; } html body.design-partners .container > hr, html body.design-partners .proshowroom .container > hr { margin-bottom: 15px; margin-top: 15px; } html body.design-partners .container > .row + hr, html body.design-partners .proshowroom .container > .row + hr { margin-bottom: 15px; margin-top: 15px; } } /* v2.2.31 — brand_brands CPT: prod blue h2, no page-header divider on singles */ html body#blog:has(.type-brands) h2.page-header, html body#blog:has([class*="brand_brands-"]) h2.page-header { border-bottom: none; margin-bottom: 20px; margin-top: 40px; } html body#blog:has(.type-brands) h2.page-header a, html body#blog:has([class*="brand_brands-"]) h2.page-header a { color: rgb(51, 122, 183); } /* v2.2.55 — removed v2.2.31's sm brand-thumb block (see .attachment-post-thumbnail below). */ /* v2.2.31 dropped in v2.2.49. It clipped home's header and slideshow to chase a wide capture, but prod carries no overflow-x clipping anywhere — the real cause was the fixed 566px h2/h3 width, now removed. The clip also made the header a block formatting context, trapping #header-bottom's 20px top margin that collapses out on prod and adding 20px to every home capture at sm. */ @media (min-width: 576px) and (max-width: 767.98px) { html body#home header, html body#home #header-bottom, html body#home #header-nav, html body#home #slideshow { margin-left: auto; margin-right: auto; } } /* v2.2.31 — home md: footer-top row stretch (+14px scroll vs prod) */ /* v2.2.55 — dropped v2.2.44's `padding-bottom: 26px` here. Prod computes 40px at md from its own `@media only screen and (max-width: 768px)` rule; 26px was reverse-engineered to buy back 14px of scroll height the home page was losing elsewhere, and it was the whole of the remaining -14px once those causes were fixed at source. */ @media (min-width: 768px) and (max-width: 991.98px) { html body#home #footer .footer-top .container > .row > [class*="col-"] { flex: none; float: left; max-width: none; } } /* v2.2.41 — brand_brands CPT sm h2.page-header: default prod 60px; multi-line titles 110px */ @media (min-width: 576px) and (max-width: 767.98px) { html body#blog .type-brands h2.page-header, html body#blog [class*="brand_brands-"].hentry h2.page-header { height: 60px; padding-bottom: 9px; } html body#blog.andersen .type-brands h2.page-header, html body#blog.andersen [class*="brand_brands-"].hentry h2.page-header, html body#blog.caesarstone-countertops .type-brands h2.page-header, html body#blog.caesarstone-countertops [class*="brand_brands-"].hentry h2.page-header, html body#blog.jameshardie-vinyl-siding-red .type-brands h2.page-header, html body#blog.jameshardie-vinyl-siding-red [class*="brand_brands-"].hentry h2.page-header, html body#blog.marvin-doors .type-brands h2.page-header, html body#blog.marvin-doors [class*="brand_brands-"].hentry h2.page-header { height: 110px; } } /* v2.2.32 — interior md: prod h1/h3 width 710px inside content-box 780px container */ @media (min-width: 768px) and (max-width: 991.98px) { html body#projects.cabinet-installation #title h1, html body#projects.cabinet-installation #title .h1, html body#projects.cabinet-installation #title h3, html body#projects.cabinet-installation #title .h3, html body.design-partners #title h1, html body.design-partners #title .h1, html body.design-partners #title h3, html body.design-partners #title .h3, html body.design-partners .proshowroom #title h1, html body.design-partners .proshowroom #title .h1, html body.design-partners .proshowroom #title h3, html body.design-partners .proshowroom #title .h3, html body#brands.products #title .title-con h1, html body.products#brands #title .title-con h1, html body#brands.products #title .title-con .h1, html body.products#brands #title .title-con .h1, html body#brands.products #title .title-con-sm h3, html body.products#brands #title .title-con-sm h3, html body#brands.products #title .title-con-sm .h3, html body.products#brands #title .title-con-sm .h3, html body#locations #title .title-con h1, html body#locations #title .title-con .h1, html body#locations #title .title-con-sm h3, html body#locations #title .title-con-sm .h3 { box-sizing: border-box; max-width: none; width: 710px; } } /* v2.2.49 — removed v2.2.33 body overflow-x clip and v2.2.34 content-box header/footer tiers. Prod does not clip; with the container box model corrected the md document scroll width matches prod on its own. */ /* v2.2.54 — was v2.2.33, which inflated these rules (h3.under 25px/5px, hr 50px and 30px) to buy back scroll height lost to the md header deficit. That deficit is fixed at source now, so these go back to the values prod actually computes: h3.under 20/10 margins with a 15px underline gutter, and BS3's uniform 15px hr margins. */ /* v2.2.55 — the `margin: 0` pin on these headings runs to 1199.98px but the restore above stopped at 991.98px, leaving lg uncovered: prod computes 20px/10px there too, so each of the four col-sm-8 blocks was 30px short (-31px on the page). Only the margins are wrong at lg — the 65px heading height already matches, so the underline gutter is left alone. */ @media (min-width: 992px) and (max-width: 1199.98px) { html body.design-partners .container > .row > .col-sm-8 h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3.under, html body.design-partners .container > .row > .col-sm-8 .h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3.under { margin-bottom: 10px; margin-top: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { html body.design-partners .container > .row > .col-sm-8 h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 h3.under, html body.design-partners .container > .row > .col-sm-8 .h3.under, html body.design-partners .proshowroom .container > .row > .col-sm-8 .h3.under { margin-bottom: 10px; margin-top: 20px; padding-bottom: 15px; } html body.design-partners .container > hr, html body.design-partners .proshowroom .container > hr, html body.design-partners .container > .row + hr, html body.design-partners .proshowroom .container > .row + hr { margin-bottom: 15px; margin-top: 15px; } html body.design-partners .proshowroom > hr { margin-bottom: 15px; margin-top: 15px; } } /* v2.2.49 — removed v2.2.35/36/37/38 content-box header/footer tiers and footer row zero-bleed. Prod keeps the BS3 -15px row margins in the footer; that bleed is what puts prod's md document scroll width at 780px. */ /* v2.2.55 — removed v2.2.39's `display: flow-root` on the brand post wrapper. It was the block formatting context that trapped h2.page-header's 40px/20px margins inside the post at sm. Prod's post is a plain block, so those margins collapse out through the post and .dmbs-main and are contained by the BS3 .row clearfix instead — which is why prod measured .dmbs-main at 60px offset 40px down, and stage at 120px. */ /* v2.2.49 — removed both v2.2.39 md blocks (780px max-width content wrapper and the products/showroom content-box tier). Both encoded the same 780px mis-measurement. */ /* v2.2.55 — removed v2.2.43's lg+ brand-thumb block (see .attachment-post-thumbnail below). */ /* v2.2.49 — removed v2.2.44 md body overflow-x clips and the 780px proshowroom wrapper. */ /* v2.2.55 — post thumbnails. Prod styles these from the devdmbootstrap3 parent's bundled css/bootstrap.css: .attachment-post-thumbnail { float: left; margin: 0 10px } Swapping that file for the BS5.3.8 CDN build dropped the declaration, and v2.2.28 / v2.2.31 / v2.2.43 / v2.2.44 each re-guessed it for one breakpoint with a margin-bottom prod does not have. The 10px bottom margin pushed the clearing div below the thumb down 10px on cambria and emtek at every breakpoint, and v2.2.44's `float: none` also moved the thumb 10px left of prod. Restore the parent rule once. `float: left` is what blockifies the image on prod — no display declaration needed. */ html body .attachment-post-thumbnail { float: left; margin: 0 10px; } /* v2.2.49 — removed v2.2.44 brand_brands content-box header/footer tiers and footer row zero-bleed; the shared #blog chrome now follows the corrected container tiers. */ /* v2.2.45 — BS5 reboot link parity: prod BS3 had no default underline; --bs-link-color drift */ :root { --bs-link-color: #337ab7; --bs-link-hover-color: #23527c; } html body a { text-decoration: none; } html body a:hover, html body a:focus { text-decoration: none; } html body #footer a, html body #footer div.social a { color: #75787b !important; text-decoration: none !important; } html body #header-bottom a:not(.btn):not(.btn-scheduleanapp) { color: #337ab7; text-decoration: none; } html body a.facetwp-toggle { color: #337ab7; text-decoration: none; } /* v2.2.46 — #title banner hr: prod centered 100px red bar (BS5 reboot gray, full-width, left-aligned) */ html body #title .title-con > hr { display: block; width: 100px; max-width: 100px; height: 0; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; padding: 0; border: 0; border-top: 10px solid #c41230; opacity: 1; background-color: transparent; color: #c41230; } /* v2.2.47 — UAT parity: remove Twitter (prod markup), home card borders, mailing-list well */ .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } html body#home .col-sm-4 .card { border: none; } /* v2.2.49 — BS3's .btn-lg is `padding: 10px 16px`; BS5's is `.5rem 1rem`, i.e. 8px vertical. That 4px per button is why the footer mailing-list form is 4px short of prod on every page, and it applies at every breakpoint. */ /* v2.2.55 — base .btn metrics. BS3 ships `padding: 6px 12px; line-height: 1.42857143` (20px at 14px); BS5 resolves to 3.75px vertical padding (0.375rem on the 10px root) and line-height 1.5 (21px), making every button 3.5px shorter than prod. On /products/ that is one button row per product card, so it compounded to -31.5px per column at sm. It had been hidden by the over-broad h3 `!important` removed above, which was padding the same column out by a similar amount. Declared before the .btn-lg block below so the large variant's own padding and line-height still win. */ html body .btn { line-height: 1.42857143; padding-bottom: 6px; padding-top: 6px; } /* v2.2.55 — the horizontal half of the same rule. BS3's is `10px 16px`; only the vertical padding was pinned, so every .btn-lg came out 12px narrower than prod. */ html body .btn-lg, html body .btn-group-lg > .btn { padding-bottom: 10px; padding-left: 16px; padding-right: 16px; padding-top: 10px; } /* v2.2.49 — home cards. Both environments make .card a column flexbox, so that part already matches. What differs is the `align-items-start` class on the card: BS5 defines it, BS3 does not, so on prod the card's children stretch to the full 536px and on stage they shrink-wrap to their text (the .mt-auto footer measured 131-207px). Restore the default cross-axis stretch that prod gets by simply not having the utility. BS5 ships the utility as `align-items: flex-start !important`, so the pin has to carry !important too. Scoped to sm deliberately: measured against prod, the card children stretch below 768px but shrink-wrap from 768px up, and stage already matches prod above sm — an unscoped pin stretched them to 396px at xl/xxl and regressed those breakpoints. */ @media (max-width: 767.98px) { html body#home .card.align-items-start { align-items: normal !important; } } /* v2.2.49 — above 768px prod restores the BS3 15px column padding that its own `max-width: 768px` rule zeroes, so re-pad col-sm-6/col-sm-12 from 769px through md */ @media (min-width: 768.02px) and (max-width: 991.98px) { html body#projects.cabinet-installation .container > .row > .col-sm-6, html body#projects.cabinet-installation .container > .row > .col-sm-12, html body#projects.cabinet-installation #title + .container > .row > .col-sm-6, html body#projects.cabinet-installation #title + .container > .row > .col-sm-12, html body.design-partners .container > .row > .col-sm-6, html body.design-partners .container > .row > .col-sm-12, html body.design-partners .proshowroom .container > .row > .col-sm-6, html body.design-partners .proshowroom .container > .row > .col-sm-12 { padding-left: 15px; padding-right: 15px; } } /* --------------------------------------------------------------------------- v2.2.49 — header chrome, last word. The header markup is identical on every page, but several page-scoped blocks above (cabinet-installation, design-partners, products, locations) use a bare `.container > .row`, which also matches #header-bottom / #header-nav and drops the header into `display: block` with -15px gutters. Prod's header at and below the md tier is: container full-bleed with no padding, rows with no gutters, and `div#header-bottom .col-sm-7.col-md-8` with no padding. --------------------------------------------------------------------------- */ @media (max-width: 768px) { html body #header-bottom > .container, html body #header-nav > .container { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } html body #header-bottom > .container .row, html body #header-nav > .container .row { margin-left: 0 !important; margin-right: 0 !important; } html body #header-bottom > .container > .row > .col-sm-7.col-md-8, html body #header-bottom > .container > .row > .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; } } /* v2.2.49 — header height at sm. Two BS5 defaults made the header 8px taller than prod on every page, shifting all content below it: `.navbar { padding: 8px 0 }`, which prod's BS3 navbar-inverse does not have, and `1rem` bottom margin on the social list where BS3 gives lists 10px. */ @media (max-width: 767.98px) { html body header #nav.navbar { padding-bottom: 0; padding-top: 0; } /* v2.2.55 — the header social list margin moved out of this sm-only block; prod gives it 10px at every breakpoint. See the end of the file. */ /* prod's header rows are BS3 blocks at sm, so the logo's 20px margins collapse through the column and the row. A flex row establishes a new formatting context and traps them instead, which changes the header height. */ html body #header-bottom > .container > .row, html body #header-nav > .container > .row { display: block; } /* BS3 styled the three .icon-bar spans in the toggle button directly; BS5 dropped those rules for a .navbar-toggler-icon background image. The markup still ships the spans, so with no rules they render as 0x0 inline boxes and the mobile menu button is invisible. Prod: three 22x2 white bars 4px apart in a 42x32 button with 8px vertical margins, 15px clear of the right edge, and no border. */ html body #nav .navbar-toggler .icon-bar { background-color: #fff; border-radius: 1px; display: block; height: 2px; width: 22px; } html body #nav .navbar-toggler .icon-bar + .icon-bar { margin-top: 4px; } html body #nav .navbar-toggler { border: none; border-radius: 4px; margin-bottom: 8px; margin-left: auto; margin-right: 15px; margin-top: 8px; padding: 9px 10px; } /* BS3's .row ships both clearfix pseudo-elements. The ::before matters here as more than a clearfix: its table box stops the logo's top margin collapsing out of the row, which is what keeps prod's #header-bottom at 213px rather than 193px. */ html body #header-bottom > .container > .row::before, html body #header-nav > .container > .row::before, html body #header-bottom > .container > .row::after, html body #header-nav > .container > .row::after { content: " "; display: table; } html body #header-bottom > .container > .row::after, html body #header-nav > .container > .row::after { clear: both; } /* Prod is BS3, where every .row is a block with BS3's two clearfix pseudo-elements and floated columns. BS5 makes .row a flexbox, which changes page height wherever a child margin would have collapsed through the row. Earlier passes pinned this per page and per section, which is why the same defect kept reappearing on the next page; pin it once for the whole document at sm instead. */ html body .row { display: block; } html body .row::before, html body .row::after { content: " "; display: table; } html body .row::after { clear: both; } /* Same story in the footer, which is shared by all 29 URLs: prod's footer rows are BS3 blocks and stage's are flex, so the footer came out 22px shorter than prod (footer-top row 740 -> 708, footer-bottom row 100 -> 90). This covers the nested rows inside address.contact too, where a flex row traps the list margins that collapse out on prod. */ html body #footer .row { display: block; } html body #footer .row::before, html body #footer .row::after { content: " "; display: table; } html body #footer .row::after { clear: both; } /* v2.2.55 — the footer social float and the footer ul margin both moved out of this sm-only block; prod applies them wider than sm. See below. */ html body #footer .footer-top address.contact, html body #footer .footer-top address.contact h3 { margin-bottom: 20px; } } /* v2.2.53 — prod #header-bottom row is display:block + float cols at md (probe: 70px height). v2.2.44 flex !important here overrode every earlier block rule and kept col-sm-7 at 50px vs prod 44px. Navbar row stays flex. */ @media (min-width: 768px) and (max-width: 991.98px) { html body #header-bottom > .container > .row, html body #header-bottom > .container > .row.vertical-align { display: block !important; } html body #header-bottom > .container > .row > [class*="col-"] { flex: 0 1 auto !important; float: left !important; min-height: 1px; } html body #header-nav > .container > .row { display: flex !important; } } /* v2.2.54 — BS3 block spacing at md/sm. These are the repeating units whose small per-block deficit compounded down the long content pages: BS5 Reboot ships p at 1rem/16px and hr at 1rem/16px (20px once the theme's own rule lands), where prod's BS3 stack computes 10px and 15px. Prod values taken from /products/, /design-partners/ and /cabinet-installation/ at 768. */ /* v2.2.55 — `p` lifted out of the md-and-below media query. BS3's `p { margin: 0 0 10px }` is unconditional, and prod computes 10px at lg/xl/xxl too. It only looked like an sm/md-only problem because without the `.container` clearfix above, a trailing p's bottom margin collapsed out of its container and never showed up in the page height. With the clearfix restored it is contained, so the 6px surplus became a flat +6px on every page sharing the `#title` block at lg, xl and xxl. `hr` stays bounded at 991.98px — prod already matches dev above that, so unscoping it would regress. */ p { margin-bottom: 10px; } @media (max-width: 991.98px) { hr { margin-bottom: 15px; margin-top: 15px; } html body #title .title-con > hr { margin-bottom: 15px; margin-top: 15px; } /* The blanket `h3 { margin-top: 20px }` heading pin is right for content headings but wrong for these two, where prod computes something else. */ html body #footer .well h3 { margin-bottom: 0; margin-top: 0; } /* v2.2.66 — prod address.contact h3 margin-top 20px at sm/md capture widths (576/768). v2.2.63's margin-top:0 matched a 780px probe only. */ html body #footer address.contact h3 { margin-bottom: 20px; margin-top: 20px; } } /* v2.2.55 — facet-label lifted out of the md-and-below query. Prod computes margin-top 0 at md, lg, xl and xxl alike, so the blanket `h3 { margin-top: 20px }` pin was adding 20px to each of the two /products/ facet headings above 992px: the first collapsed out and pushed #product-filter down 20px, the second added 20px inside it. */ html body h3.facet-label { margin-top: 0; } /* v2.2.55 — the lg-and-up counterpart of the two footer heading pins above, which stopped at 991.98px and let the blanket `h3 { margin-top: 20px }` through. Prod computes margin-top 0 on both at lg, xl and xxl (and margin-bottom 0 on the .well heading). It only shows up in the page height where .well is the tallest footer column — /products/, where the footer measured 314px against prod's 294px. */ @media (min-width: 992px) { html body #footer .well h3 { margin-bottom: 0; margin-top: 0; } html body #footer address.contact h3 { margin-top: 0; } } /* v2.2.54 — /cabinet-installation/ masonry. Prod leaves these inline-block cards on the baseline, so every card's line box carries the strut's descender space; `top` dropped ~6px per card and compounded to -42px at md and -32px at lg down the columns. Held to 1199.98px and below: at xl/xxl the column split is different and prod already matches there, so baseline overshoots. v2.2.55 — unbounded. Prod computes `baseline` at xl and xxl too; the "already matches" reading held only while the fluid-header override was inflating the page. With that gone, the cards drifted a cumulative 6px each (-24px over the four at xxl). */ body.cabinet-installation .card-container .mix, html body#projects.cabinet-installation .card-container .mix { vertical-align: baseline; } /* v2.2.55 — footer list spacing. BS3 gives every ul a 10px bottom margin; BS5 Reboot gives 1rem/16px. The v2.2.49 pin for this was scoped to sm, so md/lg/xl/xxl kept 16px on both address.contact fa-ul lists and the footer came out 6px tall on every page at those four breakpoints (md footer 421 vs prod 415). Prod computes 10px at sm, md, lg and xxl alike, so the pin is unconditional. */ html body #footer ul { margin-bottom: 10px; } /* v2.2.55 — BS3's .btn-lg line-height is 1.3333333 (18.67px at 14px); BS5's resolves to 1.5 (21px), making the footer mailing-list submit button 2.34px taller than prod at every breakpoint. v2.2.49 pinned the .btn-lg padding but not the line-height. */ html body .btn-lg, html body .btn-group-lg > .btn { line-height: 1.3333333; } /* v2.2.55 — footer social list. Prod drops the float at its own `max-width: 768px` breakpoint, not at 767.98px, so md was still floating: stage put the two icons 70px right of prod and collapsed .social to 0 height. BS3's .list-inline also carries margin-left: -5px, which is what centres the pair over prod's 221.66px list rather than 2px off. Prod floats the list again at lg and above, where stage already matches, so this stays bounded at 768px. */ @media (max-width: 768px) { html body #footer .social ul.list-inline { float: none !important; /* BS5 ships .float-end as float: right !important */ margin-left: -5px; } } /* v2.2.55 — header social list margin. Same sm-scoping mistake as the footer list: prod's BS3 ul margin is 10px at every breakpoint, and at xl/xxl that 6px is what decides the height of the column the header row centres, so it has to be right before the flex pin below can land. */ html body header .social ul.list-inline { margin-bottom: 10px; } /* v2.2.55 — header vertical centring at xl/xxl. The theme's own `.vertical-align { display: flex; align-items: center }` ships on prod and stage alike, but the upgrade-only `@media (min-width: 768px) { .container > .row { display: block } }` outranks it at (0,2,0) vs (0,1,0), so stage laid the header row out as a block at every breakpoint from md up. Prod only falls back to block at <=992px, where its own `@media screen and (max-width: 992px) { .vertical-align { display: inherit } }` applies — above that it centres, which put prod's social column at y=45 against stage's y=20 on all 29 URLs at xl and xxl. Bounded at 993px so lg keeps prod's block fallback. */ @media (min-width: 993px) { html body #header-bottom > .container > .row.vertical-align { align-items: center; display: flex; } } /* v2.2.55 — nav wrapper at xl/xxl. Prod's walker wraps the navbar in a plain
, which fills #nav's content box (1248px at xxl). The BS5 walker emits
, so BS5's container max-width plus its 15px inline padding put .navbar-collapse at 1250px starting 15px right of prod, taking the whole menu with it. The md block already neutralises this container; lg happens to match because BS5's 960px container and #nav's width coincide, so only xl and xxl are left. Not the markup fix — the walker still differs from prod — but it lands the box in the same place. */ @media (min-width: 1200px) { html body #nav.navbar > .container { display: block; max-width: none; padding-left: 0; padding-right: 0; width: 100%; } } /* -------------------------------------- */ /* End CSS