after floated images; BS5 has no such
utility and the float escapes its wrapper without it. */
.clear {
clear: both;
}
/* Three things from the parent sheet are deliberately not restored:
.show { display: block !important } - BS3 shipped it as a display utility,
but .show is now the dropdown's state class, and a global !important on it
would hold every submenu open. Nothing in this theme used it as a utility.
body { padding-bottom: 51px } - the theme's own `body, html { padding: 0
!important }` already cancels it on production, so it never applies.
.hide / .hidden / .invisible / .text-hide / .affix - zero occurrences in the
templates or in any theme rule. */
/* BS4 dropped the responsive visibility utilities with no replacement. The
FacetWP panels on /products/ and /design-inspiration-gallery/ use them to pick
one of two filter widgets, so without these both render at once. BS3
breakpoints (768 / 992 / 1200), not BS5's. */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
.visible-xs-block {
display: block !important;
}
.visible-xs-inline {
display: inline !important;
}
.visible-xs-inline-block {
display: inline-block !important;
}
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
.visible-sm-block {
display: block !important;
}
.visible-sm-inline {
display: inline !important;
}
.visible-sm-inline-block {
display: inline-block !important;
}
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
.visible-md-block {
display: block !important;
}
.visible-md-inline {
display: inline !important;
}
.visible-md-inline-block {
display: inline-block !important;
}
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
.visible-lg-block {
display: block !important;
}
.visible-lg-inline {
display: inline !important;
}
.visible-lg-inline-block {
display: inline-block !important;
}
.hidden-lg {
display: none !important;
}
}
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table !important;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
.visible-print-block {
display: block !important;
}
.visible-print-inline {
display: inline !important;
}
.visible-print-inline-block {
display: inline-block !important;
}
.hidden-print {
display: none !important;
}
}
/* --- Components BS5 dropped ------------------------------------------------ */
/* .well has no BS5 equivalent. It is still on the footer newsletter box, the
event detail blocks, and eight occurrences in page content, and the theme's
own `footer .well` only overrides background/border - the box metrics come
from here. */
.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);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 24px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
/* .page-header was removed in BS4; index.php and search-custom.php still use it. */
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
/* .btn-block was removed in BS5 in favour of a .d-grid parent. Rewriting the
FacetWP brand loop to add that wrapper would change the DOM, so restore the
two declarations instead. */
.btn-block {
display: block;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
/* .btn-group-justified has no BS5 equivalent. Twelve occurrences across the
brand and gallery loops; BS5 leaves the group at content width without it. */
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
float: none;
display: table-cell;
width: 1%;
}
.btn-group.btn-group-justified > .btn + .btn {
margin-left: 0;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
/* .caret was dropped in BS4. The nav walker still emits it on dropdown parents,
matching production, and BS5's ::after triangle is not a substitute. */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* BS5 flattened the input group onto flex and removed .input-group-btn, which
searchform.php still uses. BS3 laid it out as a table. */
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
display: table-cell;
}
.input-group .form-control:focus {
z-index: 3;
}
.input-group-addon,
.input-group-btn {
display: table-cell;
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-btn {
position: relative;
font-size: 0;
}
.input-group .form-control:first-child,
.input-group-btn:first-child > .btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group-btn:last-child > .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/* --- Forms and buttons ----------------------------------------------------- */
/* BS3 put the label's bottom margin in its own element rule; BS5 moved it onto
.form-label, which Gravity Forms markup does not carry, so every form label
lost 5px beneath it — 3.19px per field row once the label's line box is
accounted for, which is the whole 15.93px shortfall on the /contact/ form and
its siblings. `display: inline-block` and `font-weight: bold` from the same
BS3 rule already compute correctly here, so only the two properties that
differ are restored. */
label {
max-width: 100%;
margin-bottom: 5px;
}
/* BS3's normalize gave every control `font: inherit`; BS5's reboot inherits only
family, size and line-height, so controls fall back to the UA 400. Production
inherits whatever the surrounding block sets - 500 in the header search and
most Gravity Forms, 300 on the consultation form - so restore inheritance
rather than pinning one weight. */
button,
input,
optgroup,
select,
textarea {
font-weight: inherit;
}
/* BS5 sizes both of these in rem, which resolves against the 10px root above and
comes out roughly 40% short of production. */
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
/* BS3's .form-control declared no weight, so the inherit above applied. BS5's
declares 400 at the same specificity and would otherwise outrank it. */
font-weight: inherit;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
}
/* BS5 dropped `white-space: nowrap` from .btn, so a label longer than its
container now wraps and the button grows by a line per break — "Subscribe to
Our Blog" went from 40.66px to 77.97px at 768px. Production computes `nowrap`,
declared on .btn plus the WordPress controls devdmbootstrap3 folded into the
same rule in the parent sheet. */
.btn,
.comment-reply-link,
.comment-respond #submit,
#wp-calendar #prev a,
#wp-calendar #next a,
#searchform #searchsubmit {
white-space: nowrap;
}
.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
/* The theme scopes .btn-primary per section and never sets a global colour, so
production renders BS3's default blue. BS5's is #0d6efd. */
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
/* --- Grid ------------------------------------------------------------------ */
/* BS5 sizes container and gutter in rem against the 10px root, giving a 7.5px
half-gutter instead of production's 15px, and clamps .container with its own
max-width ladder (540/720/960/1140/1320) that has no BS3 counterpart. */
.container,
.container-fluid {
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* BS3 gave a table-box clearfix to a long list of blocks. BS5 kept it only on
.clearfix, and even there as a block ::after with no ::before, so a first
child's margin-top and a last child's margin-bottom now collapse out of the
box - `#title .title-con h1` and `.title-con-sm h3` are the sitewide case.
Restored for the selectors this theme's markup actually contains. `.row` is on
BS3's list too and is deliberately left off: a BS5 row is a flex container, so
these pseudo-elements would become flex items and take up a grid slot. */
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after,
.clearfix::before,
.clearfix::after,
.nav::before,
.nav::after,
.navbar::before,
.navbar::after,
.navbar-collapse::before,
.navbar-collapse::after {
content: " ";
display: table;
}
.container::after,
.container-fluid::after,
.clearfix::after,
.nav::after,
.navbar::after,
.navbar-collapse::after {
clear: both;
}
#nav > .container-fluid::before,
#nav > .container-fluid::after {
content: none;
}
.row {
margin-left: -15px;
margin-right: -15px;
/* BS3 floated columns kept their own height; a BS5 flex row stretches every
column to the tallest sibling. */
align-items: flex-start;
}
.row > * {
padding-left: 15px;
padding-right: 15px;
}
/* BS3 declared that gutter on the column classes themselves, so anything else
inside a row — a nested `.row`, a bare heading, raw inline markup, all of
which the stored page content authors in `#title` — never received it. BS5
moved the gutter onto `.row > *` and bundled `width: 100%`,
`max-width: 100%` and `margin-top: var(--bs-gutter-y)` into the same rule, so
every non-column child lost 30px of content width: `#title`'s `h3` computes a
740px box on both but a 710px content box on Dev against production's 740px,
which re-wraps its text. */
.row > *:not([class*="col-"]) {
padding-left: 0;
padding-right: 0;
}
/* The same rule's `margin-top` declaration, at (0,1,0), outranks the
element-level `hr { margin-top: 20px }` BS3 and this theme both declare.
`#title` separates its content rows with a horizontal rule authored directly
in the row, which computes a 20px top margin on production and 0 on Dev,
shortening both `page-3d.php` pages by 20px at every breakpoint. Columns are
unaffected — BS3 gave them no top margin — and so is anything declaring its
own margin with a class, such as `img.aligncenter`. The 15px pair mirrors the
theme's own small-screen override, which production applies at 576px. */
.row > hr {
margin-top: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
.row > hr {
margin-top: 15px;
margin-bottom: 15px;
}
}
/* And its `width: 100%` pins a nested row to its parent's content box, which
cancels the two 15px negative margins that are meant to widen it past that
box: production computes 770px on `#title`'s nested row (740px parent content
box plus 30px) and Dev computed 740px, leaving each `.col-md-2` inside it
30px narrow. Scoped to nested rows in a columnless row, which the rule below
keeps in block flow as production does — in a flex row `width: auto` would
size a nested row to max-content instead. */
.row:not(:has(> [class*="col-"])) > .row {
width: auto;
max-width: none;
}
.row.vertical-align {
align-items: center;
/* BS3 declared no flex properties at all, so where this theme's own
`.vertical-align` rule turns a row into a flex container production gets the
initial values — `flex-wrap: nowrap` here, `flex-shrink: 1` and
`max-width: none` on the columns below. BS5 supplies all three differently:
`.row` is `flex-wrap: wrap`, and the grid rules further down pin
`flex-shrink: 0` and `max-width: 100%`. On
`#tour-history > .container-fluid > .row.vertical-align` that let the two
`col-sm-12 col-md-6` children wrap onto separate lines instead of being
forced onto one line and shrunk, which is what production does: at 768px
child 1 is 768 wide at left -133.34 and child 2 shrinks to 266.69 at left
634.66, row height 386.31, document scrollWidth 901; at 991px they are 800
and 296.69. */
flex-wrap: nowrap;
}
/* The theme drops these rows back to `display: inherit` at max-width 767px,
where both environments stack in block flow, so the shrink restoration starts
just above that boundary. It ends where BS3 activates col-md and the two
columns fit one line unaided, above which production and Dev already agree. */
@media (min-width: 767.02px) and (max-width: 991.98px) {
.row.vertical-align > [class*="col-"] {
flex-shrink: 1;
max-width: none;
}
}
/* Below BS3's float breakpoint a BS3 row is a plain block and `.col-sm-*` are
plain blocks, so a column's first-child margin-top and last-child
margin-bottom collapse out of the column, and the image's bottom margin
collapses with the next column's heading margin-top. A BS5 flex row makes the
columns flex items, and a flex item establishes an independent formatting
context, so those margins stay inside the column and adjacent ones stop
collapsing into each other — the design-partners showroom rows came out 20px
taller per row for that reason alone. Restore the block row and BS3's table
clearfix here; above this width production floats the columns, which is
itself an independent formatting context, so the flex row already matches. */
@media (max-width: 767.98px) {
.row {
display: block;
}
.row::before,
.row::after {
content: " ";
display: table;
}
.row::after {
clear: both;
}
}
/* Above that breakpoint a flex row matches production wherever BS5's grid
columns live in it, but the stored page content authors rows holding nothing
but inline markup — `#title` on `/custom-cabinetry/` and
`/remodeling-showroom/` has a row whose children are `strong`, `a`, `br` and
`em`. A flex container blockifies inline children, so production's inline flow
of four 27px lines (row height 108px, the `strong` 65.78px wide at left
226.05) became six full-width flex items of 27px each (162px, every child
stretched to 750px at left 16). A BS3 row with no columns in it is pure inline
flow, so restore the block box and BS3's table clearfix for exactly that case;
rows that do contain columns keep BS5's flex and are untouched. */
.row:not(:has(> [class*="col-"])) {
display: block;
}
.row:not(:has(> [class*="col-"]))::before,
.row:not(:has(> [class*="col-"]))::after {
content: " ";
display: table;
}
.row:not(:has(> [class*="col-"]))::after {
clear: both;
}
/* BS3 floats `.col-sm-*` from 768px but `.col-md-*` only from 992px, so between
those two widths a row whose columns are md-only is still a plain block row of
plain block columns on production — nothing is floated and nothing establishes
a formatting context. BS5's flex row does, and a flex item contains the
margins production lets collapse out through the column's edges: each
`.col-md-2` in `#title`'s nested row measures 436px on production against
451px on Dev, the 5px top margin and 10px bottom margin of the `img` and `p`
inside it, five columns adding 20px to the row. Rows carrying col-xs-* or
col-sm-* are floated by production in this band and keep BS5's flex, as do
`.vertical-align` rows, which the theme's own rule makes flex on production.
BS3's table clearfix is part of the match: it is what stops those margins at
the row's own edges on production. */
@media (min-width: 768px) and (max-width: 991.98px) {
.row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> [class*="col-sm-"])) {
display: block;
}
.row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> [class*="col-sm-"]))::before,
.row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> [class*="col-sm-"]))::after {
content: " ";
display: table;
}
.row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> [class*="col-sm-"]))::after {
clear: both;
}
}
/* BS3 spelled the grid offsets `.col-md-offset-*`; BS5 renamed them to
`.offset-md-*` and ships nothing under the old name. `col-md-offset-1` is
authored in stored page content inside `#title` on `/custom-cabinetry/` and
`/remodeling-showroom/` (the five-tile row), so the nested columns lost their
indent from 992px up: production computes margin-left 8.33333333% and Dev 0px,
shifting every tile left by ~81–109px at lg/xl/xxl. Scoped to `#title` — the
only place this class appears — so `.row.flex` card grids elsewhere stay on
BS5 flex. BS3 activated col-md-* at 992px only; at sm/md the offset is 0 on
both. */
@media (min-width: 992px) {
#title .col-md-offset-1 {
margin-left: 8.33333333%;
}
}
/* BS3 floated col-md-* from 992px inside a plain block row with table clearfix.
The five-tile `#title` row on the two page-3d pages still laid out in BS5 flex
at lg/xl/xxl — columns sat ~83px left of production (first `.col-md-2` at -4px
vs 79px at lg) while document height already matched. Restore block flow and
float only under `#title`, where stored content authors the row; sitewide
`.row.flex` grids such as `/showroom-location/` must keep flex. */
@media (min-width: 992px) {
#title .row:has(> [class*="col-md-"]) {
display: block;
}
#title .row:has(> [class*="col-md-"])::before,
#title .row:has(> [class*="col-md-"])::after {
content: " ";
display: table;
}
#title .row:has(> [class*="col-md-"])::after {
clear: both;
}
#title .row:has(> [class*="col-md-"]) > [class*="col-md-"] {
float: left;
}
}
/* Keeping BS5's flex row matches production everywhere the row's own box sizes
the layout. #exp-sched is the exception, because production's layout there
depends on a float *side effect*: the theme pins the section to
`height: 345px` (base rule below) and at 992px its text column grows to
465.66px, so BS3's floated column overflows the section by 140.66px. The next
section's `#exp .container > .row` carries `clear: both`, so on production the
gallery starts at that float's bottom edge — 60.66px below its static
position. `float` does not apply to flex items, so on Dev the column never
floated, the `clear` had nothing to act on, and every page using this section
pulled its following content up by the overflow. Restore BS3's block row,
table clearfix and column float for this one section.
Scoped to the band where production applies the fixed height: the theme resets
it to `height: auto` at max-width 768px (so nothing overflows at or below
768px), and from 1200px the text fits inside 345px, so no clearance arises
there either way. */
@media (min-width: 768.02px) {
#exp-sched .row {
display: block;
}
#exp-sched .row::before,
#exp-sched .row::after {
content: " ";
display: table;
}
#exp-sched .row::after {
clear: both;
}
#exp-sched .row > [class*="col-"] {
float: left;
}
}
/* BS5 dropped the xs infix, so `.col-xs-6` carries no width at all. The FacetWP
gallery loop emits `product col-xs-6 col-sm-6 col-md-4` from stored content. */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }
/* BS3 activated col-sm-* at 768px; BS5 activates it at 576px. Without this the
576-767px band splits rows production still stacks — but only for elements that
carry col-sm-* alone. FacetWP cards emit col-xs-* col-sm-* together; BS3 still
applies the xs width in this band, so exclude dual-class nodes from the reset. */
@media (min-width: 576px) and (max-width: 767.98px) {
[class*="col-sm-"]:not([class*="col-xs-"]) {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
}
/* Same shift one tier up: BS3 activated col-md-* at 992px, BS5 at 768px. The
col-sm-* rules below re-assert the width production does apply in this band. */
@media (min-width: 768px) and (max-width: 991.98px) {
[class*="col-md-"] {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
[class*="col-md-"].col-sm-1 { width: 8.33333333%; }
[class*="col-md-"].col-sm-2 { width: 16.66666667%; }
[class*="col-md-"].col-sm-3 { width: 25%; }
[class*="col-md-"].col-sm-4 { width: 33.33333333%; }
[class*="col-md-"].col-sm-5 { width: 41.66666667%; }
[class*="col-md-"].col-sm-6 { width: 50%; }
[class*="col-md-"].col-sm-7 { width: 58.33333333%; }
[class*="col-md-"].col-sm-8 { width: 66.66666667%; }
[class*="col-md-"].col-sm-9 { width: 75%; }
[class*="col-md-"].col-sm-10 { width: 83.33333333%; }
[class*="col-md-"].col-sm-11 { width: 91.66666667%; }
[class*="col-md-"].col-sm-12 { width: 100%; }
}
/* The FacetWP result grid emits `article.product.col-*` straight into
`.facetwp-template` with no .row wrapper. BS3 carried float and the gutter on
the column classes themselves; BS5 moved both onto `.row > *`, so outside a
row the cards keep their width, lose the float, and stack one per line. */
.facetwp-template > .product,
.facetwp-template .team-wrap > .product {
position: relative;
min-height: 1px;
}
/* BS3 gutter on the column class; tour/products cards are direct children of
.facetwp-template. #team wraps cards in .team-wrap — production never padded
those articles (only the > .product rule applied there). */
.facetwp-template > .product {
padding-left: 15px;
padding-right: 15px;
}
/* ...but BS3 carried that gutter on a single-class selector, which the theme's
own reset below (`.col-sm-6, .col-sm-12 { padding-left: 0; padding-right: 0 }`
inside `@media only screen and (max-width: 768px)`) then beat on source order,
because the child sheet loads after the parent's bootstrap.css. Restoring the
gutter on the two-class `.facetwp-template > .product` inverted that: the
compat rule now outranks the reset, so these cards kept 15px of padding at and
below 768px where production computes 0px. Yield to the reset with the same
selector set and media condition production uses. Visible on /take-a-tour/ and
/products/, where the cards' `max-width: 100%` images rendered 30px narrower
and, being `height: auto`, proportionally shorter on every grid row. */
@media only screen and (max-width: 768px) {
.facetwp-template > .product.col-sm-6,
.facetwp-template > .product.col-sm-12 {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.facetwp-template > .product,
.facetwp-template .team-wrap > .product {
float: left;
}
}
/* FacetWP grid — BS3 col-md at 992px, col-lg at 1200px; BS5 activates lg at 992px
and lower tiers linger in the cascade. Cards emit col-xs-* col-sm-* col-md-*
col-lg-* from stored content (same class strings on prod and Dev). Scoped to
`.facetwp-template > .product` and `.facetwp-template .team-wrap > .product`. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.facetwp-template > .product[class*="col-lg-"].col-md-1,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-1,
.facetwp-template > .product.col-md-1:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-1:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 8.33333333%;
width: 8.33333333%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-2,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-2,
.facetwp-template > .product.col-md-2:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-2:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 16.66666667%;
width: 16.66666667%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-3,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-3,
.facetwp-template > .product.col-md-3:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-3:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 25%;
width: 25%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-4,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-4,
.facetwp-template > .product.col-md-4:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-4:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 33.33333333%;
width: 33.33333333%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-5,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-5,
.facetwp-template > .product.col-md-5:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-5:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 41.66666667%;
width: 41.66666667%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-6,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-6,
.facetwp-template > .product.col-md-6:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-6:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 50%;
width: 50%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-7,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-7,
.facetwp-template > .product.col-md-7:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-7:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 58.33333333%;
width: 58.33333333%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-8,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-8,
.facetwp-template > .product.col-md-8:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-8:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 66.66666667%;
width: 66.66666667%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-9,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-9,
.facetwp-template > .product.col-md-9:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-9:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 75%;
width: 75%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-10,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-10,
.facetwp-template > .product.col-md-10:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-10:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 83.33333333%;
width: 83.33333333%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-11,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-11,
.facetwp-template > .product.col-md-11:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-11:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 91.66666667%;
width: 91.66666667%;
}
.facetwp-template > .product[class*="col-lg-"].col-md-12,
.facetwp-template .team-wrap > .product[class*="col-lg-"].col-md-12,
.facetwp-template > .product.col-md-12:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-12:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
}
@media (min-width: 1200px) {
.facetwp-template > .product.col-lg-1,
.facetwp-template .team-wrap > .product.col-lg-1 {
flex: 0 0 auto;
max-width: 8.33333333%;
width: 8.33333333%;
}
.facetwp-template > .product.col-lg-2,
.facetwp-template .team-wrap > .product.col-lg-2 {
flex: 0 0 auto;
max-width: 16.66666667%;
width: 16.66666667%;
}
.facetwp-template > .product.col-lg-3,
.facetwp-template .team-wrap > .product.col-lg-3 {
flex: 0 0 auto;
max-width: 25%;
width: 25%;
}
.facetwp-template > .product.col-lg-4,
.facetwp-template .team-wrap > .product.col-lg-4 {
flex: 0 0 auto;
max-width: 33.33333333%;
width: 33.33333333%;
}
.facetwp-template > .product.col-lg-5,
.facetwp-template .team-wrap > .product.col-lg-5 {
flex: 0 0 auto;
max-width: 41.66666667%;
width: 41.66666667%;
}
.facetwp-template > .product.col-lg-6,
.facetwp-template .team-wrap > .product.col-lg-6 {
flex: 0 0 auto;
max-width: 50%;
width: 50%;
}
.facetwp-template > .product.col-lg-7,
.facetwp-template .team-wrap > .product.col-lg-7 {
flex: 0 0 auto;
max-width: 58.33333333%;
width: 58.33333333%;
}
.facetwp-template > .product.col-lg-8,
.facetwp-template .team-wrap > .product.col-lg-8 {
flex: 0 0 auto;
max-width: 66.66666667%;
width: 66.66666667%;
}
.facetwp-template > .product.col-lg-9,
.facetwp-template .team-wrap > .product.col-lg-9 {
flex: 0 0 auto;
max-width: 75%;
width: 75%;
}
.facetwp-template > .product.col-lg-10,
.facetwp-template .team-wrap > .product.col-lg-10 {
flex: 0 0 auto;
max-width: 83.33333333%;
width: 83.33333333%;
}
.facetwp-template > .product.col-lg-11,
.facetwp-template .team-wrap > .product.col-lg-11 {
flex: 0 0 auto;
max-width: 91.66666667%;
width: 91.66666667%;
}
.facetwp-template > .product.col-lg-12,
.facetwp-template .team-wrap > .product.col-lg-12 {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.facetwp-template > .product.col-md-1:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-1:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 8.33333333%;
width: 8.33333333%;
}
.facetwp-template > .product.col-md-2:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-2:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 16.66666667%;
width: 16.66666667%;
}
.facetwp-template > .product.col-md-3:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-3:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 25%;
width: 25%;
}
.facetwp-template > .product.col-md-4:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-4:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 33.33333333%;
width: 33.33333333%;
}
.facetwp-template > .product.col-md-5:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-5:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 41.66666667%;
width: 41.66666667%;
}
.facetwp-template > .product.col-md-6:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-6:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 50%;
width: 50%;
}
.facetwp-template > .product.col-md-7:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-7:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 58.33333333%;
width: 58.33333333%;
}
.facetwp-template > .product.col-md-8:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-8:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 66.66666667%;
width: 66.66666667%;
}
.facetwp-template > .product.col-md-9:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-9:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 75%;
width: 75%;
}
.facetwp-template > .product.col-md-10:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-10:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 83.33333333%;
width: 83.33333333%;
}
.facetwp-template > .product.col-md-11:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-11:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 91.66666667%;
width: 91.66666667%;
}
.facetwp-template > .product.col-md-12:not([class*="col-lg-"]),
.facetwp-template .team-wrap > .product.col-md-12:not([class*="col-lg-"]) {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
}
/* --- Navbar ---------------------------------------------------------------- */
/* Production renders an unstyled full-width div inside #nav, so the BS5 wrapper
must not pick up the page container's width, gutters or auto margins. */
#nav > .container-fluid {
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
/* BS5 gives .navbar .5rem block padding; BS3 gave it none. */
#nav.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* Above the collapse breakpoint BS3 left the navbar, its wrapper and the
collapse as blocks. BS5 makes all three flex, which stops the theme's own
`#nav ul.navbar-nav { display: table; margin: 0 auto; text-align: right }`
from centring and right-aligning the menu the way production does. */
@media (min-width: 768px) {
#nav.navbar.navbar-expand-md {
display: block;
}
#nav.navbar > .container-fluid {
display: block;
}
#nav .navbar-collapse.navbar-1-collapse {
display: block !important;
padding-left: 0;
padding-right: 0;
}
}
/* BS5 moved every `.nav` geometry declaration onto .nav-item / .nav-link, and
this menu carries neither - production's walker emits a bare `
`, so the
walker here keeps doing the same. Without BS3's `.nav > li > a` the anchors go
back to inline, which drops the theme's `padding: 5px` out of the line box and
shrinks the `.current-page-parent` and `.open` background swatches to the text.
`position: relative` on the li is what `#nav .dropdown-menu`'s absolute
positioning resolves against; the nearest positioned ancestor otherwise is
`#nav.navbar`, which throws every submenu to the left edge of the bar. */
#nav .navbar-nav > li {
position: relative;
}
/* BS3 declared the link's line-height as a length - `.navbar-nav > li > a
{ line-height: 20px }` in the parent sheet - which is what production still
computes on every bar link. Dropping it leaves the anchor inheriting the
unitless 1.42857143 pinned on `body`, and the unitless number resolves
against the link's own font-size rather than body's 14px. Under 992px the
theme takes these links down to 12px (`#nav.navbar-inverse .navbar-nav > li
> a { font-size: 12px }`), so the line box came out 12 x 1.42857143 =
17.14px instead of 20px - 2.86px short per nav row, doubled at 768px where
the bar wraps onto two rows. Above 992px the links are 14px and resolved to
20px on their own, which is why only md and lg drifted. */
#nav .navbar-nav > li > a {
position: relative;
display: block;
line-height: 20px;
}
/* Two BS3 rules that it declared globally and then reset above 768px, folded
into the one query so neither depends on source order:
.navbar-nav { margin: 7.5px -15px }
.navbar-collapse { border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1) }
Above the breakpoint the theme's own `#nav ul.navbar-nav { margin: 0 auto }`
already lands on the first. The second matters because the theme paints
`border-color: #905849` on the collapsed bar, which needs a border width
underneath it to have anything to colour. */
@media (max-width: 767px) {
#nav .navbar-nav {
margin: 7.5px -15px;
}
#nav .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* The toggler is a flex item under BS5, so BS3's `float: right` is ignored;
margin-left: auto reproduces it. Padding and margins are BS3's - the theme's
own #nav .navbar-toggler rules below still supply border and background. */
#nav .navbar-toggler {
position: relative;
margin: 8px 15px 8px auto;
padding: 9px 10px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-inverse .navbar-toggler .icon-bar {
background-color: #fff;
}
#nav .navbar-toggler .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
#nav .navbar-toggler .icon-bar + .icon-bar {
margin-top: 4px;
}
/* BS5 rebuilt .dropdown-menu on --bs-dropdown-* tokens sized in rem. */
#nav .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;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
#nav .dropdown-menu.show {
display: block;
}
/* Inside the collapsed bar BS3 unhooked the submenu from absolute positioning so
it expanded the menu inline instead of floating over it. BS5 has no equivalent,
so without this a tap on a parent item opens a bordered white card on top of
the links below. Background stays with the theme's own `!important` white rule
for this breakpoint, and the link padding with its `max-width: 768px` block. */
@media (max-width: 767px) {
#nav .navbar-nav .open .dropdown-menu,
#nav .navbar-nav .show .dropdown-menu,
#nav .navbar-nav .dropdown-menu.show {
position: static;
float: none;
width: auto;
margin-top: 0;
border: 0;
box-shadow: none;
}
#nav .navbar-nav .open .dropdown-menu > li > a,
#nav .navbar-nav .show .dropdown-menu > li > a,
#nav .navbar-nav .dropdown-menu.show > li > a {
line-height: 20px;
}
}
/* -------------------------------------- */
/* -- 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: 500;
}
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 0 15px;
text-transform: uppercase;
font-weight: 700;
}
h3{
font-family: 'Montserrat', serif !important;
font-size: 25px;
line-height: 50px;
padding: 0 0 15px;
text-transform: uppercase;
font-weight: 700;
}
#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:200px;
}
/* -------------------------------------- */
/* -- footer signup form styles -- */
#gform_4 .gform_footer.top_label {
text-align: center;
}
/* -------------------------------------- */
/* -- 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;
}
.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%;
}
/* Production paints no border on these cards, and the rule above is not why.
An inline critical-CSS block carries BS5's card component and is the last
`.card` rule in document order on both environments, so its
`border: var(--bs-card-border-width) solid var(--bs-card-border-color)`
decides the property. Production loads no BS5 stylesheet, so
`--bs-border-color-translucent` is undefined, `--bs-card-border-color`
resolves to nothing and the declaration is invalid at computed-value time:
the border falls back to unset — `border-width: 0px`, `border-style: none`,
`border-color: rgb(51, 51, 51)` (currentColor) — which also suppresses the
`1px solid rgba(0, 0, 0, .125)` declared just above. Dev loads
bootstrap@5.3.8, which defines those variables at `:root`, so the same
declaration computes `1px solid rgba(0, 0, 0, .175)` and every card loses 2px
of content box and shifts 1px right. On `/` that wraps a card heading onto a
second line (`h3` 24px to 48px, document +25); on `/showroom-location/` it
costs each location card 2px (238px to 240px, document +12).
Kept below the specificity of the theme's own `@media (min-width: 992px)`
`.row.flex .card` rule further down, which is the one place production does
render a border — `1px solid rgb(221, 221, 221)` with a 5px radius on the
`/showroom-location/` grid at 992px and above. Border radius needs no fix: it
computes 3.75px on both. */
.row .card {
border: 0;
}
.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 {
margin-bottom: 1.5rem;
margin-top: .5rem;
font-weight: 400;
padding: 0;
}
.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: 767px) {
.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;
}
}
/* -------------------------------------- */
/* -- Global Top Nav Styles -- */
/*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: none;
margin: 0 auto;
text-align: right;
display: table;
padding: 5px 0;
}
#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-inverse {
background-color: #f7f7f7;
border-color: #f7f7f7;
/* margin-top: 10px; */
}
.navbar-nav > li > a{
color: #333;
}
/* active parent */
#nav.navbar-inverse .navbar-nav > .active > a,
#nav.navbar-inverse .navbar-nav > .active > a:hover,
#nav.navbar-inverse .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;
}
/* non active parent */
#nav.navbar-inverse .navbar-nav > li > a {
font-family: 'Montserrat', serif;
text-transform: uppercase;
color: #111;
opacity: .5;
padding: 5px;
}
#nav.navbar-inverse .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 {
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;
}
#nav .dropdown:hover .dropdown-menu {
display: block;
}
#nav .navbar-nav > li {
border-right: 1px solid #eee;
margin-right: 5px;
padding-right: 5px;
}
/*#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-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #fff;
background-color: #fff;
}
#nav.navbar-inverse .navbar-nav > li > a {
color: #555;
}
#nav.navbar-inverse .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-inverse .navbar-nav > .active > a, #nav.navbar-inverse .navbar-nav > .active > a:hover, #nav.navbar-inverse .navbar-nav > .active > a:focus {
background: none !important;
color: #75787b !important;
font-weight: bold;
}
#nav.navbar-inverse .navbar-nav > li.current-page-parent > a {
background-color: #f1f1f1 !important;
color: #75787b !important;
font-weight: bold;
}
#nav.navbar-inverse .navbar-nav > .open > a, #nav.navbar-inverse .navbar-nav > .open > a:hover, #nav.navbar-inverse .navbar-nav > .open > a:focus,
#nav.navbar-inverse .navbar-nav > .show > a, #nav.navbar-inverse .navbar-nav > .show > a:hover, #nav.navbar-inverse .navbar-nav > .show > a:focus {
background-color: #fff !important;
color: #75787b !important;
opacity: 1;
font-weight: bold;
}
#nav.navbar-inverse {
background-color: #75787b !important;
border: none;
}
#nav .navbar-nav .open .dropdown-menu,
#nav .navbar-nav .show .dropdown-menu {
background-color: #fff !important;
}
/* 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-inverse .navbar-nav > .open > a,
#nav.navbar-inverse .navbar-nav > .open > a:hover,
#nav.navbar-inverse .navbar-nav > .open > a:focus,
#nav.navbar-inverse .navbar-nav > .show > a,
#nav.navbar-inverse .navbar-nav > .show > a:hover,
#nav.navbar-inverse .navbar-nav > .show > a:focus {
background-color: #fff;
color: #333;
opacity: 1;
}
#nav.navbar-inverse .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-inverse .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;
}
#nav .navbar-toggler.active .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
background-color: #fff;
}
#nav .navbar-toggler.active .middle-bar {
opacity: 0;
}
#nav .navbar-toggler.active .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);
}
/* -------------------------------------- */
/* -- 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-color: #ccc;
margin-bottom: 20px;
margin-top: 20px;
}
/*
.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;
}
#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%);
width: 600px;
}
#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;
width: 950px;
height: 200px;
}
#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%);
width: 950px;
}
#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%);
width: 950px;
}
#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;
}
#title {
margin-bottom: 60px;
}
#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 (max-width: 767.98px) {
header div.social ul.list-inline,
header div.social ul.pull-right {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
width: 100%;
}
}
/* footer */
footer .well {
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;
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 {
margin-left: auto;
margin-right: 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;
}
.col-sm-6,
.col-sm-12 {
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
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{
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) {
[class*="wcf-column-"], [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.well {
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;
}
/* -------------------------------------- */
/* -- 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-inverse .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;
}*/
/* BS5 dropdown-toggle ::after is not a substitute for production's */
#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;
}
#nav.navbar-inverse .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;
}
header .col-sm-8,
header .col-sm-4 {
position: relative;
min-height: 1px;
padding-left: 0;
padding-right: 0;
}
header .container {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
header .row {
margin-left: 0;
margin-right: 0;
}
#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;
}
#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%);
width: auto;
}
/* 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;
}*/
nav .container {
margin: 0;
padding: 0;
}
.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 h3.wcf-post-title {
font-size: 14px;
line-height: 16px;
}*/
#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 */
/* BS3's bootstrap.css set min-height: 1px on every column class; BS5 dropped it
and this theme only re-pins it on `.col-sm-6` and `.col-sm-12`. The contact
forms wrap `gform_wrapper` in `.row > .col-sm-2 + .col-sm-8 + .col-sm-2`; the
empty spacer columns compute 1px on production and 0px on Dev at sm, which is
the whole 2px scrollHeight gap on `/contact/` and `/contact/request-a-quote/`. */
#contact-form .row > .col-sm-2 {
min-height: 1px;
}
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 */
#events .col-sm-12 {
padding: 0px;
margin: 20px 18px;
}
#events #breadcrumbs .col-sm-12 {
padding: 0px;
margin: 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.well {
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*/
}
/* Mobile nav @≤767 — BS5 flex nav collapses item height; global `a:hover { underline }`
must not apply in #nav. Expanded dropdown parent matches prod: bold, white bg,
no underline (Shobana UAT 2026-09-15, parity with Bellevue/Standard batch). */
@media (max-width: 767.98px) {
#nav .navbar-collapse,
#nav.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
background-color: #f7f7f7 !important;
}
#nav .navbar-nav {
display: block;
margin: 0 !important;
}
#nav .navbar-nav > li,
#nav .navbar-nav > .nav-item {
display: block;
float: none;
}
#nav .navbar-nav > li > a,
#nav .navbar-nav > .nav-item > a,
#nav .navbar-nav .nav-link {
display: block;
padding: 10px;
}
#nav .dropdown-toggle::after {
display: none !important;
}
#nav.navbar-inverse .navbar-nav > .show > a,
#nav.navbar-inverse .navbar-nav > .show > a:hover,
#nav.navbar-inverse .navbar-nav > .show > a:focus,
#nav.navbar-inverse .navbar-nav > .open > a,
#nav.navbar-inverse .navbar-nav > .open > a:hover,
#nav.navbar-inverse .navbar-nav > .open > a:focus,
#nav.navbar-inverse .navbar-nav > .dropdown.show > a,
#nav.navbar-inverse .navbar-nav > .dropdown > a.show,
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"],
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"]:hover,
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"]:focus {
background-color: #fff !important;
color: #75787b !important;
font-weight: bold;
text-decoration: none !important;
}
#nav .navbar-nav .show .dropdown-menu,
#nav .navbar-nav .open .dropdown-menu,
#nav .dropdown-menu.show {
background-color: #fff !important;
border-top: 0 !important;
margin-top: 0 !important;
box-shadow: none !important;
}
#nav .dropdown > a[aria-expanded="true"],
#nav .dropdown.show > a {
text-decoration: none !important;
}
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu > li > a {
text-decoration: none;
border-top: 0;
border-bottom: 0;
}
#nav.navbar-inverse .navbar-nav a:hover,
#nav.navbar-inverse .navbar-nav a:focus,
#nav .dropdown-menu a:hover,
#nav .dropdown-menu a:focus,
#nav .dropdown-menu .dropdown-item:hover,
#nav .dropdown-menu .dropdown-item:focus {
text-decoration: none !important;
}
}
/* Nav links — global reboot `a:hover { underline }` must not apply in #nav. */
#nav.navbar-inverse .navbar-nav a:hover,
#nav.navbar-inverse .navbar-nav a:focus,
#nav .dropdown-menu a:hover,
#nav .dropdown-menu a:focus {
text-decoration: none;
}
/* -------------------------------------- */
/* End CSS