/*
Theme Name: devdmbootstrap3-child
Theme URI: http://devdm.com/DevDmBootstrap3
Author: Danny Machal
Author URI: http://devdm.com/
Description: devdmbootstrap3 v1.80 child theme upgraded to Bootstrap 5.3.8 (P3 fan-out from elevationsbybellevue.com). GBS brand colors/fonts preserved.
Version: 2.0.26
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, rtl-language-support, theme-options, translation-ready
Text Domain: devdmbootstrap3
Template: devdmbootstrap3
font-family: 'Montserrat', sans-serif;
font-family: 'Martel', serif;
*/

/* BS5 compatibility: utilities removed or renamed upstream */
/* BS3's `.text-right` carried no `!important`, so on production
   `#header-bottom .text-right { text-align: center }` still wins below 768px and the
   header buttons centre. Only the BS5 spelling keeps BS5's `!important`. */
.text-right {
  text-align: right;
}
.text-end {
  text-align: right !important;
}
.text-left,
.text-start {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
}
.list-inline-item {
  display: inline-block;
}
.pull-right,
.float-end {
  float: right !important;
}
.pull-left,
.float-start {
  float: left !important;
}
/* BS5 dropped .img-responsive and WP's content-width clamp, both of which
   production still gets from the parent BS3 sheet. Verbatim from
   devdmbootstrap3/css/bootstrap.css, and kept here at the top of the child sheet
   so site rules below still override them the way they do on production. */
.img-responsive,
.img-fluid,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* BS3 .table / .table-condensed — BS5 recolours cells white, flips tbody borders
   to border-bottom, and bumps padding/margins. Verbatim from
   devdmbootstrap3/css/bootstrap.css so footer hours tables and any other
   .table-condensed markup match production sitewide. */
.table {
  margin-bottom: 20px;
  vertical-align: baseline;
}
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td,
.table > thead > tr > td {
  background-color: transparent;
  border-top: 1px solid #ddd;
  border-bottom-width: 0;
  color: inherit;
  padding: 8px;
  vertical-align: top;
}
.table > tbody > tr {
  vertical-align: middle;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
/* Recommended CSS from WP for defined content width support — without this the
   attachment pages render img.attachment-medium at its width="2048" attribute. */
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
  max-width: 100%;
  height: auto;
}
/* BS4 dropped .well and BS5 never replaced it, so the grey inset panel production
   renders on /finance-by-cambria/ loses its background, border, radius and 19px
   padding entirely. Verbatim from devdmbootstrap3/css/bootstrap.css, kept above the
   theme rules so `footer .well` below still overrides it as it does on production. */
.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);
}
/* The parent devdmbootstrap3 sheet also carried WordPress's content alignment rules,
   which have no BS5 equivalent. Without them every editor-placed .alignnone image
   loses its `max-width: 96%` and 5px/20px margins - on /design-partners/ each partner
   logo renders 12px wider and 9px taller than production and each row loses 20px.
   Verbatim from devdmbootstrap3/css/bootstrap.css. Only .alignnone and .aligncenter
   are restored: they are the ones this site's content actually uses and that were
   confirmed winning the cascade on production. Kept at the top of this sheet so the
   site rules below still override them the way they do on production, where these
   arrive in the parent sheet ahead of the child. */
.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
img.alignnone {
  max-width: 96%;
  height: auto;
  width: auto;
}
/* .aligncenter carries a 5px top and bottom margin. The five product tiles on
   /custom-cabinetry/ and /remodeling-showroom/ are built from
   `img.img-responsive.img-circle.aligncenter`, so each tile loses that margin-top
   without this rule: production computes margin-top: 5px / margin-bottom: 5px on the
   tile image, Dev computed 0px on both. The bottom 5px collapses into the following
   paragraph's 10px, so the visible cost is the top 5px - every tile measured 5px
   short (229.66px against production's 234.66px at lg), which shortened the tile row
   and with it the document. */
.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* BS5's Reboot sets `ol, ul { padding-left: 2rem }`, where BS3 left the browser
   default alone. `html` carries BS3's `font-size: 10px` (line ~378), so 2rem resolves
   to 20px against the 40px production inherits from the UA sheet - every plain content
   list loses half its indent and each item gains 20px of line width. On
   /showroom-locations/ that lets a six-item address list fit one item onto a single
   line where production wraps it to two, and the page measured 20px short at sm
   (2949 against production's 2969). Production computes padding-left: 40px on that
   list; it is the only plain ul/ol across the 19 captured URLs whose indent differs,
   every other list being a Gravity Forms, `.fa-ul` or `.nav` list that pins its own
   padding and still outweighs this rule. */
ul,
ol {
  padding-left: 40px;
}
/* BS4 removed the responsive visibility utilities and nothing replaced them, so
   on /products/ the mobile facet panel (.hidden-sm.hidden-md.hidden-lg) renders
   next to the desktop one. The markup is in the parent theme / post content, so
   the fix has to be here. Verbatim from devdmbootstrap3/css/bootstrap.css —
   BS3 breakpoints (768 / 992 / 1200), not BS5 ones. Identical @media blocks that
   LESS emitted separately are merged; cascade order is unchanged. */
.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;
  }
}

/* BS5 Reboot: hr opacity 0.25 — prod BS3 had no fade */
hr {
  opacity: 1;
}
/* BS3 set only the margin-top/margin-bottom longhands, so the UA stylesheet's
   `margin-inline: auto` survived and production centres every width-constrained
   rule (#title .title-con > hr is 100px wide inside a 940px column). BS5 reboot
   uses the `margin: 1rem 0` shorthand, which resets the inline margins to 0 and
   pushes those rules hard left. Rules that set a margin shorthand of their own
   (#breadcrumbs hr below) keep overriding this, exactly as on production. */
hr {
  margin-left: auto;
  margin-right: auto;
}
#breadcrumbs hr {
  margin: 8px 0;
}
@media (min-width: 992px) {
  #breadcrumbs hr {
    margin: 20px 0;
  }
}

/* BS5 Reboot pins — restore the BS3 base metrics production still renders with.
   Kept above the theme rules so anything below continues to win, exactly as
   bootstrap.css did when it loaded ahead of style.css on production. */

/* BS5 derives body and every component that reads these tokens (.dropdown-menu,
   .list-group, .table, .form-control, .accordion) from the two variables
   below, so pin the tokens rather than body alone. 14px x 1.42857143 = 20px,
   which is what BS3's $font-size-base / $line-height-base produced on prod. */
:root {
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.42857143;
  /* BS3 bootstrap.css body color #333 (style-parity rgb(51, 51, 51)); BS5 reboot
     defaults --bs-body-color to #212529 and currentColor-fed border-* drift with it. */
  --bs-body-color: #333;
  /* BS5 reboot sets --bs-heading-color to inherit; prod h3 borders derive #75787b. */
  --bs-heading-color: #75787b;
  /* BS3 bootstrap.css .form-control — prod sidebar search computes #555 text,
     #ccc borders, 4px radius; BS5 reboot bleeds #333 / #dee2e6. */
  --bs-border-color: #ccc;
}
/* BS5 declares every --bs-btn-* token on .btn itself (and re-declares the padding,
   font-size and radius ones on .btn-lg), so the same names set on :root never reach
   the component and the buttons fall back to BS5 rem defaults against html's 10px
   root: 3.75px/7.5px padding and line-height 1.5. Production (BS3 bootstrap.css)
   renders 6px/12px at 1.42857143, and 10px/16px at 1.3333333 for .btn-lg, which made
   every .btn-lg on the site 7.7px shorter and 12px narrower than production.
   Declared on the same selectors BS5 uses so they actually win. */
.btn {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 14px;
  --bs-btn-line-height: 1.42857143;
  --bs-btn-border-radius: 4px;
  /* BS5 dropped BS3's `white-space: nowrap` from .btn, so anchor buttons wrap where
     production keeps them on one line (/news/ "SUBSCRIBE TO OUR BLOG" runs to two
     lines). <button> keeps nowrap from the UA sheet, anchors do not. */
  white-space: nowrap;
}
.btn-lg {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 18px;
  --bs-btn-line-height: 1.3333333;
  --bs-btn-border-radius: 6px;
}
form .form-control {
  color: #555;
  border-color: #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Production's BS3 body line-height is the unitless 1.42857143, so descendants with
   their own font-size scale it (the notification bar's 15px text computes 21.43px).
   A 20px length here computes the same 20px on body but inherits as a fixed length,
   which flattened those descendants. */
body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}
h1 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 {
  font-size: 18px;
  line-height: 19.8px;
}
/* BS5 reboot gives figure `margin: 0 0 1rem`; BS3 bootstrap.css zeroes it, so on
   production the home cards' <figure> sits flush against the caption block. */
figure {
  margin: 0;
}
/* BS5 reboot underlines links by default and recolours them to #0d6efd; BS3 left them
   undecorated at #337ab7 and only underlined on hover/focus. Verbatim from
   devdmbootstrap3/css/bootstrap.css, so the theme rules below still override it the
   same way they do on production. */
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

/* -------------------------------------- */


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

body p {
    color: #75787b;
    font-size: 16px;
    line-height: 26px;
}

a {
color: #337ab7;
text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

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


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


/* -------------------------------------- */


/* -- Google ReCaptcha  -- */

.g-recaptcha div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}


/* -------------------------------------- */


/* -- responsive line <br> <span>  -- */

.rwd-break,
.rwd-line {
    display: block;
}

@media screen and (max-width: 1199px) {
    .rwd-break,
    .rwd-line {
        display: inline;
    }
}


/* -------------------------------------- */


/* -- locations styles -- */

#locations .cform-location .col-sm-6 {
    width: 100% !important;
}


#locations h3 {
    color: #75787b;
    font-size: 24px;
    line-height: 24px;
    margin: 0 0 15px;
    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;
}


/* -------------------------------------- */


/* -- 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.elevations_by_ki #nav {
    display: none;
}*/

@media screen and (min-width: 768px) {
    /* right align nav but keep li left in order */
    #nav ul.navbar-nav {
        float: right;
        margin: 0;
        text-align: right;
    }
    #nav ul.navbar-nav>li {
        display: inline-block;
        float: none;
        text-align: right;
    }
}

#nav .navbar-collapse {
    padding-left: 0px;
    padding-right: 0px;
}

#nav.navbar {
    border: 1px solid transparent;
    margin-bottom: 0;
    min-height: 50px;
    position: relative;
    border-radius: 0;
}

#nav.navbar-default {
    background-color: #fff;
    border-color: #fff;
}

#nav.navbar-inverse {
    background-color: #fff;
    border-color: #fff;
    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: #333;
    opacity: .5;
    padding: 5px;
}

#nav.navbar-inverse .navbar-nav>li>a:hover {
    color: #75787b;
    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: #f7f7f7;
    }
    #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 {
        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 {
        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 {
    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,
#nav.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}

#nav .navbar-toggler,
#nav .navbar-toggle {
    border: none;
    background: transparent !important;
}

#nav .navbar-toggle:hover {
    background: transparent !important;
}

#nav .navbar-toggle .icon-bar {
    width: 22px;
    transition: all 0.2s;
}

#nav .navbar-toggle.active .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
    background-color: #fff;
}

#nav .navbar-toggle.active .middle-bar {
    opacity: 0;
}

#nav .navbar-toggle.active .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

#nav .navbar-toggle .top-bar {
    transform: rotate(0);
}

#nav .navbar-toggle .middle-bar {
    opacity: 1;
}

#nav .navbar-toggle .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: 700; */
    border: none;
    text-transform: uppercase;
}

.btn-default {
    background-color: #fff;
    border: none;
    /*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: #75787b;
    border-color: #75787b;
}

.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: #75787b;
    border-color: #75787b;
}

.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-red {
    color: #FFFFFF;
    background-color: #940e25;
    border-color: #940e25;
}

.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
    color: #FFFFFF !important;
    background-color: #75787b;
    border-color: #75787b;
}

.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
    background-image: none;
}

.btn-red.disabled,
.btn-red[disabled],
fieldset[disabled] .btn-red,
.btn-red.disabled:hover,
.btn-red[disabled]:hover,
fieldset[disabled] .btn-red:hover,
.btn-red.disabled:focus,
.btn-red[disabled]:focus,
fieldset[disabled] .btn-red:focus,
.btn-red.disabled:active,
.btn-red[disabled]:active,
fieldset[disabled] .btn-red:active,
.btn-red.disabled.active,
.btn-red[disabled].active,
fieldset[disabled] .btn-red.active {
    background-color: #C41230;
    border-color: #C41230;
}

.btn-red .badge {
    color: #C41230;
    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: #c8c0ab;
    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: 30px 0px 30px;
}

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: #c41230;
    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 .list-inline {
    list-style: outside none none;
    margin-left: 15px;
    padding-left: 0;
}

header div.social li {
    margin-left: 5px;
    margin-top: 0;
    padding: 0;
}

header div.social a i {
    background-color: #75787b;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    color: #fff;
    font-size: 17px;
    line-height: 18px;
    height: 34px;
    padding: 8px;
    text-align: center;
    width: 34px;
}

header div.social a:hover i {
    background-color: #333;
}


/* Small Devices, Tablets */

@media only screen and (max-width: 767px) {
    header div.social ul {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 100%;
    }
    /* end (max-width : 767px) */
}


/* footer */

footer .well {
    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;
}

#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: 16px;
    line-height: 15px;
    margin: 0 0 20px;
    padding: 0;
}

#footer div.social li {
    margin-left: 5px;
    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: 700; */
    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 */

#homeowner #gallery,
#professionals #gallery {
    background: rgba(127, 127, 127, .9);
    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: cover; */
}

#professionals #gallery-bg {
    background-image: url("/wp-content/uploads/homeowner-pros-closeup2.jpg");
    background-position: top right;
    background-repeat: no-repeat;
/*     background-size: cover; */
}

#homeowner #gallery p,
#professionals #gallery p {
    color: #fff;
    font-size: 16px;
    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/SileStone_Counters_2.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 */

/*.remodeling-showroom #tour-history {
    display: none;
}*/

#tour {
    background: rgba(148, 14, 37, .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: cover; */
}

#tour p {
    color: #fff;
    font-size: 16px;
    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: 16px;
    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 #75787b;
    background-color: #75787b;
}


/* -------------------------------------- */


/* --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: 30px;
        padding-right: 30px;
        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: 20px 0px;
        /*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: 16px;
  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 2.14286rem;
    padding-bottom: 0;
/* 	min-height:210px; */
}
@media (max-width:992px){
	#gallery .product {
		border-bottom: 0;
		margin: 0 0 2.14286rem;
		padding-bottom: 0;
/* 		min-height:222px; */
	}
}


#gallery h3.product-title {
    display: none;
}

#gallery .product-wrap {
    border: 1px solid #940e25;
    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: #940e25;
    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 #940e25;
    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: #940e25;
    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: #940e25;
}

@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-sched {
    background: #d0d0ce;
    color: #494949;
    height: 345px;
    position: relative;
    padding: 20px 0;
}

#exp-sched p {
    color: #494949;
    font-size: 16px;
    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;
  }*/
    #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: #d0d0ce;
        color: #494949;
        height: auto;
        position: relative;
        padding: inherit;
    }
    #exp-sched .col-sm-6 {
        min-height: 1px;
        padding-left: 0;
        padding-right: 0;
        position: relative;
    }
    #exp-sched .exp-sched-img {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 345px;
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
    }
    #exp-sched .btn-default {
        padding: 9px 30px;
    }
    #exp-sched .exp-sched-con {
        position: relative;
        top: inherit;
        padding: 20px;
    }
    /* blog */
    .blog .sidebar {
        border: 1px solid #75787b;
        padding: 0 30px 30px;
        position: relative;
        border-radius: 30%/10%;
        -moz-border-radius: 30%/10%;
        -webkit-border-radius: 30%/10%;
        top: 15px;
    }
    /* contact page */
    div#contact-us div#contact-form form input {
        margin: 0 0 10px;
        /* padding-left: 10px; */
    }
    div#contact-us div#map-container div#map div#contact-in {
        height: auto;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 99;
        clear: both;
    }
    div#contact-us div#map-container div#map div#contact-in div {
        padding: 20px;
        position: relative;
        top: 0;
        transform: none;
    }
    div#contact-us div#map-container div#map div#contact-in h3 {
        color: #d4602f;
        margin: 0px 0px 30px 0px;
    }
    /* events */
    #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: #940e25;
    color: #fff;
    /* height: 400px;*/
    position: relative;
    /*padding: 20px 0;*/
}
#gallery #tour-history {
    display:none;
}

#tour-history p {
    color: #fff;
    font-size: 16px;
    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: #940e25;
    border: 1px solid #940e25;
    /*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 #940e25;
    background-color: #940e25;
}

@media only screen and (max-width: 992px) {
    #tour-history {
        background: #940e25;
        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 0;
    }
    /* end max-width : 992px*/
}


/* -------------------------------------- */


/* End CSS */
/* =============================================================================
   BS5 structural parity (P3 fan-out) - layout/reboot only; GBS palette unchanged
   ============================================================================= */

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

#footer,
#breadcrumbs {
  font-size: 14px;
  line-height: 20px;
}

/* Production leaves #footer inheriting body #333 and greys only the links
   (#footer a, ~line 2014). Setting the grey on #footer itself dropped the
   copyright line to a 4.44:1 contrast ratio against white - below the 4.5:1
   AA threshold that production clears at 12.6:1. */
#breadcrumbs {
  color: #75787b;
}

/* BS5 derives .container padding from the gutter (calc(var(--bs-gutter-x) * .5)),
   so pinning the gutter to production's 30px already yields the 15px sides. The
   explicit padding declarations that used to sit here were unconditional and, being
   later in this file, overrode the theme's own "mobile container padded sides" rule
   at line ~4182 (@media max-width: 768px, 20px sides) that production still honours.

   `.container-fluid` needs the same pin and is the sitewide +8px overflow: BS5
   declares `--bs-gutter-x: 1.5rem` on `.container-fluid` itself, and `html` carries
   BS3's `font-size: 10px` (line ~378), so 1.5rem resolves to 15px and the sides
   compute calc(15px * .5) = 7.5px against production's 15px. `.row` is already
   pinned to a 30px gutter (-15px side margins) below, so inside a `.container-fluid`
   the row overhangs the padding by 7.5px each side. The left overhang is unreachable,
   the right one lands in the scrollable region, and the capture records
   scrollWidth = viewport + 7.5 -> ceil = viewport + 8 at every breakpoint
   (576->584, 768->776, 992->1000, 1200->1208, 1400->1408).
   Production measures 15px on `#tour-history > .container-fluid` at all five. */
.container,
.container-fluid {
  --bs-gutter-x: 30px;
}

/* BS3 gave `.container` and `.container-fluid` a table-box clearfix; BS5 dropped it,
   so a first child's margin-top and a last child's margin-bottom now collapse straight
   out of the container. `#title .title-con h1 { margin: 60px 0 40px }` and
   `.title-con-sm h3 { margin: 0 0 10px }` are the sitewide case on production. */
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after {
  content: " ";
  display: table;
}
.container::after,
.container-fluid::after {
  clear: both;
}
#nav > .container-fluid::before,
#nav > .container-fluid::after {
  content: none;
}

/* BS5 re-declares --bs-gutter-x: 1.5rem on .row itself, so the .container pin above
   never reaches the columns — a local declaration beats an inherited one. Production
   (BS3) runs a 30px gutter: .row margin -15px, .col-* padding 15px. */
.row {
  --bs-gutter-x: 30px;
  /* BS3 floated columns kept content height; BS5 flex rows stretch every
     column to the tallest sibling (footer empty col-md-4, design-partners text). */
  align-items: flex-start;
}
/* BS5 moved the gutter onto `.row > *`; non-column children in stored page content
   (nested `.row`, bare headings, inline markup in `#title`) must not receive it. */
.row > *:not([class*="col-"]) {
  padding-left: 0;
  padding-right: 0;
}
/* BS5's `.row > * { margin-top: var(--bs-gutter-y) }` zeroes the top margin on `<hr>`
   authored inside a row; production keeps the theme's 20px (15px below 768px). */
.row > hr {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .row > hr {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
/* BS5 pins nested rows to the parent content box via `width: 100%`; production's BS3
   nested row stays auto-width and widens past the parent by its negative margins. */
.row:not(:has(> [class*="col-"])) > .row {
  width: auto;
  max-width: none;
}
/* Stored page content authors rows of inline markup with no columns — `#title` on
   `/custom-cabinetry/` and `/remodeling-showroom/` hold `strong`, `a`, `br`, `em`.
   BS3 rows are block boxes; BS5 flex blockifies each inline child into a full-width
   flex item. Restore block flow only when the row holds no grid columns. */
.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 widths a row whose columns are md-only is a plain block row on production.
   BS5's flex row establishes a formatting context on each column, trapping margins
   that production lets collapse (+20px on the five-tile `#title` row @768). Rows
   with col-xs-* or col-sm-* stay flex here; `.vertical-align` rows are flex on prod. */
@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;
  }
  /* `#title .title-con-sm` holds col-sm rows authored in page content on
     `/custom-cabinetry/` and `/remodeling-showroom/`. BS3 rows are block boxes with
     floated col-sm-* from 768px; BS5 flex traps column margins (+30px on the location
     nested row @768). Restore block flow and BS3 float under `#title` only — the phone
     band rule above already does this below 768px without float because col-sm is
     neutralized to 100% width there. */
  #title .title-con-sm > .row {
    display: block;
  }
  #title .title-con-sm > .row::before,
  #title .title-con-sm > .row::after {
    content: " ";
    display: table;
  }
  #title .title-con-sm > .row::after {
    clear: both;
  }
  #title .title-con-sm > .row > [class*="col-sm-"] {
    float: left;
  }
  #title .title-con-sm > .row > .row {
    display: block;
    clear: both;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  #title .title-con-sm > .row > .row::before,
  #title .title-con-sm > .row > .row::after {
    content: " ";
    display: table;
  }
  #title .title-con-sm > .row > .row::after {
    clear: both;
  }
  #title .title-con-sm > .row > .row > [class*="col-sm-"] {
    float: left;
  }
}

.row.vertical-align {
  align-items: center;
}

/* 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 page content
   (the five-tile product row on /custom-cabinetry/ and /remodeling-showroom/), not in
   a template, so no codemod reached it and the row lost its indent: production
   computes margin-left: 80.8281px on the 970px row (BS3's 8.33333333%), Dev computes
   0px, shifting all five tiles 80.83px left. Scoped to min-width 992px because that is
   where BS3 activated col-md-*; production measures margin-left: 0px at sm and md. */
@media (min-width: 992px) {
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
}

/* The FacetWP result grid emits `article.product.col-sm-6.col-md-4` straight into
   `.facetwp-template`, with no `.row` wrapper. BS3 carried `float: left` and the 15px
   gutter on the column classes themselves, so the cards laid out 3-up; BS5 moved both
   onto `.row > *`, so outside a row they keep their width and lose the float, and
   /products/ renders one card per row. Float only from 768px up, which is where BS3's
   `.col-sm-*` first set a width - below that production stacks them too, and
   `#brands .product.col-sm-6` already zeroes the padding there. */
.facetwp-template > .product {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  /* Match the theme's `.col-sm-6, .col-sm-12` 30px gutter at exactly 768px —
     the generic 15px pin above outweighed that rule and shrank product cards. */
  .facetwp-template > .product.col-sm-6,
  .facetwp-template > .product.col-sm-12 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 768px) {
  .facetwp-template > .product {
    float: left;
  }
}
/* BS3's grid tiers are not BS5's: BS3 starts md at 992 and lg at 1200, BS5 starts them
   at 768 and 992, and BS5 dropped col-xs-* altogether. These cards carry BS3 markup
   (col-xs-6 col-sm-6 col-md-4 col-lg-3), so under BS5 each tier fires one breakpoint
   early - /take-a-tour/ runs 4-up at 992 where production runs 3-up, and below 576 the
   cards lose their width and float and stack one per row. Restore production's column
   count at production's boundaries. */
.facetwp-template > .product.col-xs-6 {
  float: left;
  width: 50%;
}
@media (min-width: 768px) {
  .facetwp-template > .product.col-sm-6 {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .facetwp-template > .product.col-md-4 {
    width: 33.33333333%;
  }
}
@media (min-width: 1200px) {
  .facetwp-template > .product.col-lg-3 {
    width: 25%;
  }
}

/* `.vertical-align` drops to `display: inherit` (block) below 992px so that production's
   floated BS3 columns take over from the flex centering. BS5 columns have no float and
   depend on the flex row, so a block row stacks them one per line — the header logo and
   the buttons/nav column lose their side-by-side split in the 768-991px band, and the
   `.logo` margin collapses into #header-bottom instead of adding to it. Keep the row a
   flex row and drop only the centering production drops. */
@media (max-width: 991px) {
  .row.vertical-align {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  /* Production drops `.vertical-align` to `display: inherit` (block) on phones,
     so logo margins collapse into the column; the 768-991 flex row above does not. */
  .row.vertical-align {
    display: block;
  }
  /* BS3 .row clearfix ::before/::after — production still gets the leading gap
     before stacked header columns on phones. */
  .row.vertical-align::before,
  .row.vertical-align::after {
    content: " ";
    display: table;
  }

  /* `#title .title-con-sm` holds a `.row` nested directly inside a `.row` (authored in
     page content on /custom-cabinetry/ and /remodeling-showroom/; no other page in the
     URL list has the pattern). BS5 turns the outer `.row` into a flex container, which
     costs production parity twice on phones:

     1. Each column becomes a flex item, so it establishes an independent formatting
        context and its children's margins can no longer collapse out of it the way they
        do through production's floated BS3 columns. `.col-sm-8` holds the same 266px of
        children in both environments yet measured 286px on production and 326px here.
     2. The nested `.row` matches BS5's `.row > *`, which pins `width: 100%`,
        `max-width: 100%` and 15px side padding onto it. Production's BS3 nested row is a
        plain auto-width block whose -15px side margins widen it past its parent, so it
        measures 596px with a 596px content box and its `.col-sm-6` gets 536px of content.
        Clamped and padded here it measured 566px/536px content and only 476px for the
        column, 60px narrower, so the copy wrapped to more lines.

     Together those put the page 69px taller than production. Restoring production's own
     block row and auto-width nested row recovered the width and all but 10px of the
     height; items 3 and 4 close the rest.

     3. The nested `.row` stays a flex container even once its parent is a block, so its
        `.col-sm-6` is still a flex item with an independent formatting context and still
        holds its children's margins in. Production's nested row is a block and its
        column a plain block, so those margins collapse straight out: identical children
        measured 220px on production against 250px here, which fed +10px into the nested
        row and +5px into the outer one. Production stacks these columns full width in
        this band anyway (the 576-767.98px band neutralizes `col-sm-*` to 100%), so a
        block nested row renders the same and collapses the same.

     4. BS3 gave every `.row` the table-box clearfix; BS5 dropped it. It only matters
        where the row is a block, which in this band is exactly these rows, and there it
        is what stops the first child's margin-top and the last child's margin-bottom
        collapsing out through the row's edges. On the five-tile row the tiles measure
        production's heights exactly, yet the row came out 15px short - the leading 5px
        of the first tile image's `.aligncenter` margin plus the trailing 10px of the
        last tile paragraph, both escaping a row that no longer contains them
        (production 2271px, 2256px here). Restored only for the rows made blocks above:
        `::before`/`::after` on a row that is still a flex container would become two
        extra flex items.

     Together they land the document at 586x6205 on /custom-cabinetry/ and 586x6227 on
     /remodeling-showroom/ - production's exact width and height on both.

     Phone band only: at 768px and up these columns are side-by-side flex percentages,
     and a block row would strip their float-less layout and stack them full width. */
  #title .title-con-sm > .row {
    display: block;
  }
  #title .title-con-sm > .row > .row {
    display: block;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  #title .title-con-sm > .row::before,
  #title .title-con-sm > .row::after,
  #title .title-con-sm > .row > .row::before,
  #title .title-con-sm > .row > .row::after {
    content: " ";
    display: table;
  }
  #title .title-con-sm > .row::after,
  #title .title-con-sm > .row > .row::after {
    clear: both;
  }
}

/* The same block holds `<p><a name="locations"></a></p>` - a wpautop artifact wrapping
   a bare in-page anchor target - between `.col-sm-8` and the nested `.row`. It renders
   nothing (height 0) and on production it costs nothing either: the BS3 row is a block
   container, its columns float, and the nested `.row` carries this theme's
   `.row { clear: both }` (line ~3369), so the nested row's top is set by the float
   bottom and this paragraph's 10px bottom margin never separates anything. Production
   measures the paragraph at offset 0 inside the row, behind the floats, and the nested
   row at 300px, for a 587px row.

   BS5 makes the row a flex container, and flex layout ignores both float and clear. The
   paragraph becomes a flex item occupying a line of its own whose cross size is exactly
   its 10px bottom margin, pushing the nested row to 310px for a 597px row - the +10px
   measured at lg, xl and xxl on both pages. Restore production's zero contribution.

   Phone band excluded: below 768px the rule above already makes the outer row a block
   container, so the margin collapses against the nested row just as it does on
   production, and zeroing it there would cost 10px production spends. This selector
   matches exactly one element per page; the two pages carrying this block are the only
   ones in the URL list with a `.row > p` at all. */
@media (min-width: 768px) {
  #title .title-con-sm > .row > p {
    margin-bottom: 0;
  }
}

/* Nav wrapper — 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%;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 100%;
  }
  /* BS3 activated col-sm-* at 768px, BS5 activates them at 576px, so this band
     splits rows production still stacks (e.g. /news/ .col-sm-9 next to its
     sidebar). Neutralize the columns here instead of remapping ~20 templates. */
  [class*="col-sm-"] {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body .container {
    max-width: 750px !important;
    width: 750px;
  }
  /* BS3 activated col-md-* at 992px, BS5 activates them at 768px, so this band
     splits rows production still lays out on col-sm-* (e.g. the footer contact
     block .col-sm-12.col-md-5, full width on production, 5/12 here). Neutralize
     col-md-* the same way the 576-767.98px band neutralizes col-sm-*. */
  [class*="col-md-"] {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  /* ...but col-sm-* IS active at BS3's sm breakpoint (>=768px), so a col-sm-*
     on the same element still has to win. */
  [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%;
  }

  /* Production overflows the viewport by 143px here on tablets, and the upgrade is not
     the place to change that - stakeholders are told nothing changed, so production's
     tablet rendering has to be reproduced rather than corrected.

     BS3's `.row` is not a flex container; the theme's own `.vertical-align` is the only
     thing that makes this one flex, so it takes flex's default `flex-wrap: nowrap`.
     BS5 declares `flex-wrap: wrap` on `.row` itself, which is what lets Dev stack the
     two columns instead.

     Both children are `.col-sm-12.col-md-6` and compute `width: 100%` (768px) in this
     band in both environments - BS3 activated `col-md-*` at 992px, and the
     neutralization rule above reproduces that - so a single nowrap line needs 1536px of
     a 768px row. Production resolves that by shrinking: its columns keep flex's default
     `flex-shrink: 1`, while BS5's `.row > *` and the rule above pin `flex: 0 0 auto`, so
     on Dev nothing can shrink and the row wraps. With shrink restored, `min-width: auto`
     clamps each column at its min-content width - the video column will not go below
     768px and the copy column bottoms out at 286.688px - for a 1054.688px line, and
     `justify-content: center` splits the 286.688px of overflow evenly:

       child 1 (.video)  left -143.34, width 768
       child 2           left  624.66, width 286.688, right edge 911.34

     which is production's 911px document. `align-items` has to come back to center too;
     it carries no height (neither value stretches these columns) but it is what centers
     the shorter video column against the copy, and the `max-width: 991px` rule above
     drops it to flex-start for the header row.

     Band boundaries verified against production at all four edges. At 767px and below
     production's `.vertical-align { display: inherit }` makes the row a block, which
     this theme matches with `.row.vertical-align { display: block }` - both environments
     compute `display: block` and identical 777px documents, so nothing here may reach
     that band. At 992px and above BS3's `col-md-6` gives each column 50%, both fit on
     one line and wrap stops mattering - both environments measure 496px at left 0 and
     496px at left 496. */
  /* VR experience rows (Adwords TPL + 3D Experience TPL): `#tour-history > .container-fluid
     > .row.vertical-align` on /custom-cabinetry/, /remodeling-showroom/, and
     /3d-kitchen-design-planning/. `:has(> .video)` scopes to the video+copy pair and
     skips the header `.row.vertical-align` (no `.video` column). */
  .row.vertical-align:has(> .video) {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .row.vertical-align:has(> .video) > [class*="col-"] {
    flex-shrink: 1;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body .container {
    max-width: 970px !important;
    width: 970px;
  }
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
  body .container {
    max-width: 1170px !important;
    width: 1170px;
  }
}

@media (min-width: 1280px) {
  body .container {
    max-width: 1280px !important;
    width: 1280px;
  }
}

/* The header container is full-bleed up to 992px on production
   (`header .container { width: 100% }`); the widths above must not clamp it. */
@media (max-width: 992px) {
  header .container {
    max-width: 100% !important;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  #homeowner #intro > .container,
  #homeowner #tour .container,
  #homeowner #gallery .container,
  #homeowners #intro > .container,
  #homeowners #tour .container,
  #homeowners #gallery .container,
  #professionals #intro > .container,
  #professionals #tour .container,
  #professionals #gallery .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 768px) {
  #nav.navbar.navbar-expand-md {
    align-items: normal;
    display: block;
    padding-bottom: 0;
    padding-top: 0;
  }
  /* `#nav.navbar.navbar-expand-md { display: block }` outweighs
     `body.elevations_by_ki #nav { display: none }` on the home page. */
  body.elevations_by_ki #nav.navbar.navbar-expand-md {
    display: none;
  }
  #nav.navbar > .container-fluid {
    display: block;
  }
  #nav .navbar-collapse.navbar-1-collapse {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
  }
  #nav .navbar-nav {
    display: block;
    float: right;
    margin: 0;
    max-width: none;
    text-align: right;
  }
  /* Production right-aligns the menu with `inline-block` items inside a floated
     `ul`. The prior `float: left` on each `li` reflowed CONTACT/CREDIT to a
     second row once link padding was restored (Shobana UAT 2026-09-16). */
  #nav .navbar-nav > li,
  #nav .navbar-nav > .nav-item {
    display: inline-block;
    float: none;
    text-align: right;
  }
  #nav .navbar-nav::after {
    clear: both;
    content: "";
    display: table;
  }
  #nav .navbar-nav > li > a,
  #nav .navbar-nav > .nav-item > a,
  #nav .navbar-nav .nav-link {
    display: block;
    text-decoration: none;
  }
  #nav .dropdown-toggle::after {
    display: none !important;
  }
  #nav .caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
  }
}

#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: transparent;
  color: #75787b;
}

/* The button was `.navbar-toggle` on production, so every `#nav .navbar-toggle` rule
   further up this sheet stopped matching once it became `.navbar-toggler`. Production
   computes: no border (the theme overrides BS3's), transparent background, 9px/10px
   padding, 8px/15px margins, floated right, and white 22x2 bars 4px apart. BS5 puts
   the toggler first in a flex row, so `margin-left: auto` stands in for the float. */
#nav.navbar {
  padding-bottom: 0;
  padding-top: 0;
}
#nav .navbar-toggler {
  background: transparent;
  border: none;
  margin: 8px 15px 8px auto;
  padding: 9px 10px;
}
#nav .navbar-toggler:focus,
#nav .navbar-toggler:focus-visible,
#nav .navbar-toggler:active {
  box-shadow: none;
  outline: none;
}
#nav .navbar-toggler .icon-bar {
  background-color: #fff;
  border-radius: 1px;
  display: block;
  height: 2px;
  margin: 0;
  transition: all 0.2s;
  width: 22px;
}
#nav .navbar-toggler .icon-bar + .icon-bar {
  margin-top: 4px;
}
#nav .navbar-toggler.active .top-bar,
#nav .navbar-toggler[aria-expanded="true"] .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
#nav .navbar-toggler.active .middle-bar,
#nav .navbar-toggler[aria-expanded="true"] .middle-bar {
  opacity: 0;
}
#nav .navbar-toggler.active .bottom-bar,
#nav .navbar-toggler[aria-expanded="true"] .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

/* Nav dropdown — BS5 inherits html 10px font-size; prod submenu is 14px/20px with
   160px min-width and desktop card shadow. BS5 underlines expanded toggles (UAT WBS). */
#nav .dropdown-menu {
  font-size: 14px;
  line-height: 20px;
  min-width: 160px;
}

#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu > li > a {
  text-decoration: none;
  border-top: 0;
  border-bottom: 0;
}

@media (min-width: 768px) {
  #nav .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    box-shadow: rgba(0, 0, 0, 0.176) 0 6px 12px 0;
    margin: 0;
  }

  #nav .dropdown-menu > li > a,
  #nav .dropdown-menu .dropdown-item {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 767.98px) {
  #nav .dropdown > a[aria-expanded="true"],
  #nav .dropdown.show > a,
  #nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"] {
    text-decoration: none !important;
  }

  #nav .dropdown-menu {
    border: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
    margin: 0;
  }
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c41230;
  --bs-btn-border-color: #c41230;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #75787b;
  --bs-btn-hover-border-color: #c41230;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #75787b;
  --bs-btn-active-border-color: #c41230;
}

/* BS5 flex rows trap first-child margin-top inside columns; BS3 block rows
   let it collapse. Column widths already match — only the 576–767.98px band
   (where col-sm-* is neutralized to stack) still differs. flow-root on the
   footer contact row contains the table margin-bottom production still counts
   in row height (40px).
   The showroom rows are deliberately excluded: restoring their <hr> already
   brings both sections to production height, and blocking them as well
   overshoots by 20px.

   #products rows need flow-root rather than block: production's BS3 .row carries
   a clearfix ::after, which keeps the last <p>'s 10px margin-bottom inside the
   row (203px). A plain block row lets that margin collapse out and measures
   193px, so each row ran 10px short. */
@media (min-width: 576px) and (max-width: 767.98px) {
  #footer address.contact > .row {
    display: flow-root;
  }

  #products .container > .row {
    display: flow-root;
  }

  /* /privacy-policy/ @sm — empty subtitle slot: prod #title > .container is 190px. */
  body.privacy-policy #title > .container {
    min-height: 190px;
    box-sizing: border-box;
  }
}

/* /privacy-policy/ @md+ — prod #title > .container is 145px (md) / 155px (lg+). */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.privacy-policy #title > .container {
    min-height: 145px;
    box-sizing: border-box;
  }
}

@media (min-width: 992px) {
  body.privacy-policy #title > .container {
    min-height: 155px;
    box-sizing: border-box;
  }
}

/* Brand/blog pages: .row.dmbs-content must stay flex. Measured on production,
   .dmbs-content is 345px at every breakpoint while .dmbs-main is 305px, so the
   parent is the taller box. display:block collapses the parent onto the main
   column, giving 305px and leaving the page 30-50px short (corian 1196 vs 1226
   @576 and 956 vs 986 @768; formica and azek 951 vs 1001 @576).

   Injection testing at 576/768/992/1200/1400 shows removing this rule improves
   7 metrics and regresses none, landing document height and .dmbs-content
   height exactly on production. The stretched .dmbs-main is an empty container
   and costs no pixels. Do not reinstate without a prod-vs-dev measurement that
   contradicts the above. */

/* gform_6 on main /contact/ @md+ — production resolves body's unitless 1.42857143
   against each .large control's 15px font-size (21.4286px line-height, 41.42px height).
   A prior pin forced 20px (the 14px-field value used on request-a-quote subpages),
   shaving 1.42px per text/email/tel field and leaving the page 5–6px short @md/lg.
   Subpages stay on body.request-a-quote / body.request-a-consultation; scope to gform_6. */
@media (min-width: 768px) {
  body#contact #gform_6 input.large:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="submit"]):not([type="button"]) {
    line-height: 21.4286px;
  }
}

/* md nav — BS5 collapse stays height:0 while the ul wraps two rows; production
   is 82px tall. display:block + min-height matches measured production nav#nav. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #nav .navbar-collapse.navbar-1-collapse {
    display: block;
    height: auto;
    overflow: visible;
  }

  #nav.navbar {
    min-height: 82px;
  }
}

/* lg/xl nav — floated .navbar-nav overflows #nav's 50px min-height when the menu
   wraps to two rows (ul 60px, nav 62px on production). Clearfix on the collapse
   sizes #nav to its content; band stops at 1399.98px so xxl single-row nav stays 50px. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  #nav .navbar-collapse.navbar-1-collapse {
    display: block;
    height: auto;
    overflow: visible;
  }

  #nav .navbar-collapse.navbar-1-collapse::after {
    clear: both;
    content: "";
    display: table;
  }
}

/* /exterior-siding/ products-img — production parent theme margins on the img */
#products .products-img img {
  margin-top: 5px;
  margin-bottom: 20px;
  margin-right: 20px;
}

/* Blog sidebar search widget — BS3 .input-group used display:table with table-cell
   children; BS5 flex lets .form-control flex-grow to full width (93px vs prod 26px)
   and stacks the group 23px taller. Measured on masonite @768 against production. */
aside#search-3 .search-form .input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}
aside#search-3 .search-form .input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table-cell;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 12px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
aside#search-3 .search-form .input-group .input-group-btn {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  font-size: 0;
}
aside#search-3 .search-form .input-group .input-group-btn > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
aside#search-3 {
  margin-bottom: 5px;
}

/* Home 3-up card row — BS5 .card border (1px each side) narrows the text column 2px
   vs production (360px), re-wraps card 3 copy (+26px), and pushes the row +16px.
   Production BS3 cards compute border 0 on this row. Measured on / @1200. */
body#home .row.d-flex.align-items-stretch .card.d-flex.align-items-start {
  border: 0;
  /* .card/.d-flex/.flex-column/.mt-auto come from the page content and are inert on
     production's BS3. Under BS5 the card becomes a flex container, so the caption
     block is a flex item: its h3 top margin and last p bottom margin no longer
     collapse out (+30px per card) and .mt-auto pushes the button to the bottom of a
     stretched column. Block flow restores production's ragged card bottoms. */
  display: block;
}

/* Main /contact/ gform_6 @sm — BS5 .row flex vs production block on the three-column
   form shell costs 2px (prod 576x3351 vs dev 3349). col-sm-2 gutters also collapse to
   0 vs production 1px. Subpages use body.request-a-quote; this block is body#contact only. */
@media (max-width: 767.98px) {
  body#contact #contact-form > .container > .row {
    display: block;
  }
  body#contact #contact-form > .container > .row::before,
  body#contact #contact-form > .container > .row::after {
    content: " ";
    display: table;
  }
  body#contact #contact-form > .container > .row::after {
    clear: both;
  }
  body#contact #contact-form > .container > .row > .col-sm-2,
  body#contact #contact-form > .container > .row > .col-sm-8 {
    min-height: 1px;
  }
}

/* Gravity Forms labels on /contact/: production line-height 22.8571px vs BS5 reboot
   20px (−3px per field). Measured @576 and @768 — sm-only media left 24px short @md+. */
body.request-a-quote #contact-form .gfield_label.gform-field-label,
body.request-a-consultation #contact-form .gfield_label.gform-field-label {
  line-height: 18.2px;
  margin-bottom: 5px;
}

@media (max-width: 767.98px) {
  body.request-a-quote #contact-form > .container > .row,
  body.request-a-consultation #contact-form > .container > .row {
    display: block;
  }
  body.request-a-quote #contact-form > .container > .row::before,
  body.request-a-consultation #contact-form > .container > .row::before,
  body.request-a-quote #contact-form > .container > .row::after,
  body.request-a-consultation #contact-form > .container > .row::after {
    content: " ";
    display: table;
  }
  body.request-a-quote #contact-form > .container > .row::after,
  body.request-a-consultation #contact-form > .container > .row::after {
    clear: both;
  }
  body.request-a-quote #contact-form > .container > .row > .col-sm-2,
  body.request-a-consultation #contact-form > .container > .row > .col-sm-2,
  body.request-a-quote #contact-form > .container > .row > .col-sm-8,
  body.request-a-consultation #contact-form > .container > .row > .col-sm-8 {
    min-height: 1px;
  }
}

@media (max-width: 767.98px) {
  #gallery .container > .row > .col-sm-12 > .row {
    display: block;
  }
  #gallery .container > .row > .col-sm-12 > .row::before,
  #gallery .container > .row > .col-sm-12 > .row::after {
    content: " ";
    display: table;
  }
  #gallery .container > .row > .col-sm-12 > .row::after {
    clear: both;
  }
  #gallery .container > .row > .col-sm-12 > .row > .col-sm-3 {
    min-height: 1px;
  }
}

/* Brand featured image — production floats the 300x225 post thumbnail with a 10px
   horizontal margin, so it sits at x=10; BS5 reboot leaves it inline at x=0. The
   offset is viewport-independent, which is why corian/cambria/emtek each showed an
   identical 310x225 diff at every breakpoint.

   The clearfix replaces the parent theme's `.clear { clear: both }`, which the BS5
   parent rebuild dropped — the template still emits <div class="clear"> after the
   image, but without that declaration the float escapes and the wrapper collapses
   from 305px to 60px. flow-root is not usable here: it would also contain the
   .page-header margin-top production lets collapse out. Scoped to
   .has-post-thumbnail so the 19 brand pages without a featured image are untouched. */
.type-brands.has-post-thumbnail > img.wp-post-image {
  display: block;
  float: left;
  margin: 0 10px;
}

.type-brands.has-post-thumbnail::after {
  clear: both;
  content: "";
  display: table;
}

/* .btn-group-justified is a BS3 class with no BS4/BS5 equivalent. Production renders
   the group as a fixed table so the three product buttons split the row evenly
   (464px wide, 154.66px each); BS5 leaves it inline-flex at content width (116px),
   shrinking every product tile toolbar. Measured on /products/ at all breakpoints. */
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}

.btn-group.btn-group-justified > .btn + .btn {
  margin-left: 0;
}

.btn-group-justified > .btn-group .btn {
  width: 100%;
}

/* Mobile nav @≤767 — BS5 flex nav collapses item height; .navbar-inverse paints white
   over #f7f7f7; BS5 puts .show on the anchor (not li.open). Credit App expanded
   toggle must match prod: bold, white bg, submenu flush (no BS5 border-top).
   Measured @390 against production (Shobana UAT 2026-09-15). */
@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;
  }

  #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;
    text-decoration: none;
  }

  #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;
  }

  #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;
}

/* Notification bar (Notibar) — stage runs Notibar v3 with `padding: 10px 0` on
   `.njt-nofi-content`; production v2.1.7 uses `10px 50px` + `.njt-nofi-text { 5px }`
   so the message wraps at sm/md to the same bar height (Shobana UAT 2026-09-16).
   Notibar v3 also sets `.njt-nofi-container { z-index: 10000 }`, which stacks above
   Fancybox overlay (8010) and leaves the red bar uncovered; prod v2 uses 999. */
.njt-nofi-container {
  z-index: 999;
}

.njt-nofi-notification-bar .njt-nofi-content,
.njt-nofi-notification-bar .njt-nofi-content-deskop,
.njt-nofi-notification-bar .njt-nofi-content-desktop {
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21.4286px;
  padding: 10px 50px;
}

.njt-nofi-notification-bar .njt-nofi-text {
  display: inline-block;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  padding: 5px;
}

/* Prod v2 notibar.css only drops to 10px 20px at 480px — not 768px. Using 767px
   here kept the banner single-line at 576px and the copy looked larger than prod. */
@media (max-width: 480px) {
  .njt-nofi-notification-bar .njt-nofi-content,
  .njt-nofi-notification-bar .njt-nofi-content-deskop,
  .njt-nofi-notification-bar .njt-nofi-content-desktop {
    padding: 10px 20px;
  }
}

/* njt-notibar v3 on stage sets `body { padding-top: 73px !important }` while Custom CSS
   also sets `header { margin-top: 70px }`. Production notibar v2 sets body padding-top
   without !important (theme zeros computed padding) so header margin alone positions the
   logo ~17px below the red banner. Stage must cancel the !important body offset
   (margin-top: -3px → header top 70) and zero #header-bottom margin-top — the base
   30px margin no longer collapses once body padding is pinned (v2.0.25 measured 47px
   gap without this; Shobana UAT 2026-09-16). */
body[style*="padding-top"][style*="!important"] header {
  margin-top: -3px !important;
}

body[style*="padding-top"][style*="!important"] #header-bottom {
  margin-top: 0 !important;
}

/* Header columns stay block/float on desktop like production — flex on the columns
   shifted nav vertical alignment and horizontal offset vs prod float-right nav. */
@media (min-width: 768px) {
  #header-bottom .col-sm-5.col-md-4,
  #header-bottom .col-sm-7.col-md-8 {
    display: block;
    float: left;
  }

  #nav.navbar-inverse .navbar-nav > li > a,
  #nav.navbar-inverse .navbar-nav > .nav-item > a,
  #nav.navbar-inverse .navbar-nav .nav-link {
    line-height: 20px;
  }
}