/*
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). KI brand colors/fonts preserved.
Version: 2.0.12
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: #6d6d6d;
  /* BS5 reboot sets --bs-heading-color to inherit; prod h3 borders derive #75787b. */
  --bs-heading-color: #6d6d6d;
  /* 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-top-color: #ccc;
  border-bottom-color: #ccc;
  border-radius: 4px 0 0 4px;
}
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*/

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
body p {
  color: #6d6d6d;
  font-size: 15px;
  line-height: 26px;

}

/* -- Team "P" adjust margin cutoff for read more -- */
.comment-team p {
	margin: 0 0 6px;
}

/*a:link,
a:active{
color: #905849;
}
a:hover{
color: #905849;
}*/

/* Montserrat substitute for font copperplat */
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;
}

h2, h3, h4, h5, h6 {
    color: #6d6d6d;
}

/*.design-partners h3 {
  color: #717f68;
}*/

.under::after {
  background-color: #717f68;
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
.under {
  position: relative;
}
.brand-text {
  min-height:200px;}

  /* -------------------------------------- */
  /* -- responsive line <br> <span>  -- */
  .rwd-break,
  .rwd-line{
    display: block;
  }
  @media screen and (max-width: 1199px) {
    .rwd-break,
    .rwd-line{
      display: inline;
    }
  }


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



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

.locations .facetwp-template .col-sm-4 {
    margin-bottom: 30px;
}

.card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .10), 0 2px 10px 0 rgba(0, 0, 0, .10);
    height: 100%;
}

.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2rem;
}

.card .card-block {
    position: relative;
}

.card-block h3,
.card-block h5 {
    margin-bottom: 1.5rem;
    margin-top: .5rem;
    font-weight: 400;
    padding: 0;
}



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

#team .comment-team {
	margin-bottom: 10px !important;
}


/*.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: #717f68;*/
  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: #717f68;
  opacity: 1;
}

/* Production pins the nav link line box to BS3's @line-height-computed, `line-height:
   20px`, at every breakpoint. BS5 leaves the link on the unitless 1.42857 body value,
   which resolves against the link's OWN font-size rather than the 14px root:
   12px x 1.42857 = 17.1429px, so each link is 37.14px tall instead of 40px.

   Measured on /privacy-policy/ (prod vs dev) at 576/768/992/1200. Font sizes and link
   widths already match exactly - line-height is the only difference. The menu wraps to
   3 rows at md (ul 120px vs 111.42px) and 2 rows at lg (60px vs 54.28px), which is the
   bulk of the shared chrome loss seen on ~20 URLs. At xl the link font-size rises to
   14px, so 14 x 1.42857 = 20px and the two agree by coincidence - that is exactly why
   the xl column measured 0 while every smaller breakpoint ran short. */
#nav ul.navbar-nav > li > a {
  line-height: 20px;
}

/* -------------------------------------- */
/* --#nav Media Query Styles
green #717f68 -- */


/* space between top parent nav links */
@media only screen and (min-width : 1200px) {
  #nav .navbar-nav > li {
    border-right: 1px solid #eee;
    margin-right: 10px;
    padding-right: 10px;
  }
/*
#nav .navbar-nav > li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
*/

/* end @media 768px */
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  /* hover open dropdown */
  #nav .dropdown-menu li:hover .sub-menu {
    visibility: visible;
  }
  #nav .dropdown:hover .dropdown-menu {
    display: block;
  }
  #nav .navbar-nav > li {
    border-right: 1px solid #eee;
    margin-right: 5px;
    padding-right: 5px;
  }

/*#nav .navbar-nav > li {
float: right;
}*/
/*
#nav .navbar-nav > li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
*/
/* end @media 768px */
}
/* Small Devices, Tablets */
@media only screen and (max-width : 992px) {
  #nav .navbar-nav > li {
    border-right: 1px solid #eee;
    margin-right: 5px;
    padding-right: 5px;
  }
  #nav .navbar-nav > li:last-child {
    margin-right: 0;
    padding-right: 0;
    border: none;
  }
}
/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {

  #nav .navbar-collapse {
    border-color: #905849;
    background: #f7f7f7;
  }
  #nav .dropdown-menu > li > a {
    color: #ccc;
  }
  #nav .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #fff;
    background-color: #fff;
  }
  #nav.navbar-inverse .navbar-nav > li > a {
    color: #555;
  }



  #nav.navbar-inverse .navbar-nav > li > a:hover {
    color: #717f68;
    opacity: 1;
  }
  #nav .dropdown-menu > .active > a, #nav .dropdown-menu > .active > a:hover, #nav .dropdown-menu > .active > a:focus {
    background: none !important;
    color: #717f68 !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: #717f68 !important;
    font-weight: bold;
  }
  #nav.navbar-inverse .navbar-nav > li.current-page-parent > a {
    background-color: #f1f1f1 !important;
    color: #717f68 !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: #717f68 !important;
    opacity: 1;
    font-weight: bold;
  }
  /* BS5 mobile dropdown keeps aria-expanded on the link, not .open on li (prod BS3). */
  #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 > .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: #717f68 !important;
    opacity: 1;
    font-weight: bold;
    text-decoration: none;
  }
  #nav.navbar-inverse {
    background-color: #717f68 !important;
    border: none;
  }
  #nav .navbar-nav .open .dropdown-menu {
    background-color: #fff !important;
  }
  #nav .navbar-nav .show .dropdown-menu {
    background-color: #fff !important;
  }

  /* Collapsed nav: prod inlines submenus (static, full-width, no card chrome). */
  html body #nav .navbar-nav .dropdown-menu {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    float: none;
    left: auto;
    margin: 0;
    min-width: 0;
    padding: 0;
    position: static;
    top: auto;
    width: 100%;
    -webkit-box-shadow: none;
  }

  html body #nav .navbar-nav .dropdown {
    float: none;
    width: 100%;
  }

  /* 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: #717f68;
  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: #717f68;
  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-toggle .icon-bar {
  background-color: #fff;
}
#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;

}
.btn-default {
  background-color: #fff;
  border: 1px solid #fff;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #717f68;
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 #717f68;
  background-color: #717f68;
}

body .btn-green,.btn-green {
  color: #ffffff;
  background-color: #717f68;
  border-color: #717f68;
}

.btn-green:hover,
.btn-green:focus,
.btn-green:active,
.btn-green.active,
.open .dropdown-toggle.btn-green {
  color: #ffffff !important;
  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: #717f68;
  border-color: #717f68;
}

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

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

.btn-black .badge {
  color: #333;
  background-color: #ffffff;
}



.btn-search {
  background-color: #717f68;
  border-color: #717f68;
  color: #fff;
}
.btn-search.focus, .btn-search:focus {
  background-color: #31b0d5;
  border-color: #1b6d85;
  color: #fff;
}
.btn-search:hover {
  background-color: #717f68;
  border-color: #717f68;
  color: #fff;
}
.jetpack_subscription_widget input[type="submit"] {
  background-color: #717f68;
  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: #717f68;
  border-color: #717f68;
  color: #fff;
}
.jetpack_subscription_widget input[type="submit"]:hover {
  background-color: #717f68;
  border-color: #717f68;
  color: #fff;
}
.jetpack_subscription_widget h2{
  color: #717f68;
  content: "";
  font-family: 'Montserrat',serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 10px;
  padding: 0;
}


/* -------------------------------------- */
/* --#splash Page Styles -- */

#splash #pro.btn-default,
#splash #home.btn-default {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50% / 25%;
  -moz-border-radius: 50% / 25%;
  -webkit-border-radius: 50% / 25%;
  color: #333;
  font-size: 16px;
  line-height: 16px;
  margin: 20px 0;
  padding: 9px 70px;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  text-transform: uppercase;
}
#splash #pro.btn-default:before,
#splash #home.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%;
}
#splash #pro.btn-default:hover,
#splash #home.btn-default:hover {
  color: #fff;
  border: 1px solid #c53b33;
  background-color: #c53b33;
}


#splash h3 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  margin: 0;
  padding: 0;
}
#splash p {
  color: #fff;
}
#splash hr {
  border-color: #fff;
  border-width: 6px 0 0;
  text-align: left;
  width: 200px;
  margin-left: 0;
  margin-bottom: 30px;
  margin-top: 20px;
}

#splash .container-fluid,
#splash .row {
  height: 100%;
}

#splash div#photo-lg {
  background: rgba(0, 0, 0, 0) url("/images/dream-kitchen.jpg") no-repeat scroll center center / cover ;
}

#splash div#container div#pro {
  background: rgba(0, 0, 0, .5);
  border-bottom: 5px solid #efeae0;
  height: 50%;
  position: relative;
}
#splash div#container div#home {
  background: rgba(113, 128, 104, 0.75);
  border-top: 5px solid #efeae0;
  height: 50%;
  position: relative;
}
#splash div#container div#pro div#pro-con {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
#splash div#container div#home div#home-con {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
#splash div#container {
  border-left: 5px solid #efeae0;
  height: 100%;
  width: 50%;
}
#splash div#logo {
  background: rgba(0, 0, 0, 0);
  border-right: 5px solid #efeae0;
  height: 100%;
  position: relative;
  width: 50%;
}
#splash div#logo img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 2;
}
#splash div#logo h1 {
  color: #fff;
  left: 50%;
  opacity: 0.2;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

/* -------------------------------------- */
/* --#splash Media Query Styles -- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  #splash .col-sm-6 {
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }
  #splash div#photo-lg {
    background: none;
  }
  #splash div#logo {
    background: rgba(0, 0, 0, 0) url("/images/dream-kitchen.jpg") no-repeat scroll center center / cover ;
    border-right: medium none;
    height: 50%;
    position: relative;
    width: 100%;
  }
  #splash div#container {
    border-left: none;
    height: auto;
    width: 100%;
  }
  #splash div#container div#home {
    background: rgba(113, 128, 104, 1);
    /*border-top: none;*/
    height: auto;
    position: relative;
  }
  #splash div#container div#pro {
    background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
    border-top: 10px solid #efeae0;
    height: auto;
    position: relative;
  }
  #splash div#container div#pro div#pro-con {
    left: auto;
    padding: 40px 20px 20px;
    position: relative;
    text-align: center;
    top: auto;
    transform: inherit;
    width: 100%;
  }
  #splash div#container div#home div#home-con {
    left: auto;
    padding: 40px 20px 20px;
    position: relative;
    text-align: center;
    top: auto;
    transform: inherit;
    width: 100%;
  }
  #splash hr {
    border-color: #fff;
    border-width: 6px 0 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-top: 20px;
    text-align: left;
    width: 200px;
  }

  /* end @media 768px */
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

  #splash h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
    padding: 0;
  }

  /* end @media 480px */
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
  /* end @media 320px */
}



/* -------------------------------------- */
/* -- Interior Page Styles -- */
hr {
  border-color: #c8c0ab;
  margin-bottom: 30px;
  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: #717f68;
opacity: 0.5;
padding: 7px 25px 5px 15px;
z-index: 7;
}
#professionals #toggle a.pro-tog {
background-color: #717f68;
opacity: 1;
padding: 7px 25px 5px 15px;
z-index: 9;
}
#toggle a.pro-tog:hover {
opacity: 1;
}
#toggle a.pro-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
#toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: .7;
padding: 7px 20px 5px;
position: relative;
z-index: 7;
}
#toggle a.home-tog:hover {
opacity: 1;
}
#homeowner #toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: 1;
padding: 7px 20px 5px;
position: relative;
z-index: 9;
}
#toggle a.home-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
*/

#header-top li {
  padding: 0;
}
#header-top {
  margin-top: 30px;
}
#header-bottom {
  margin: 20px 0px 10px;
}
div#social li {
  padding: 5px 2px;
}
div#social a i {
  background-color: #c8c0ab;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  color: #717f68;
  font-size: 12px;
  height: 24px;
  padding: 6px;
  text-align: center;
  width: 24px;
}
div#header-bottom a.btn-scheduleanapp {
  background-color: #ffffff;
  border: 2px solid #717f68;
  color: #717f68;
  font-family: "Montserrat",sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 15px;
}
div#header-bottom a.btn-scheduleanapp:hover {
  background-color: #717f68;
  border: 2px solid #717f68;
  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: #717f68;
  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: #717f68;
  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: #717f68;
  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: #717f68;
  letter-spacing: normal;
  text-align: center;
}
#title .title-con > hr {
  border-color: #717f68;
  border-width: 10px;
  width: 100px;
}

#title .title-con-sm span,
#title .title-con-sm{
  color: #6D6D6D;
  font-size: 16px;
  line-height: 27px;
  font-weight: 300;
}
#contact #title .title-con-sm{
  text-align: center;
}

#one-column #banner .banner-con h1 {
  color: #717f68;
  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: 0px;
  margin-top: 0;
  padding: 0;
}
header div.social a i {
  background-color: #717f68;
  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;
}

header div.social {
	min-height: 30px;
}


/* 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(255, 255, 255, 0.4) none repeat scroll 0 0;
    border: medium none;
    margin-bottom: 0;
}
#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: #efeae0;
  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: #717f68;
}
#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: #717f68 !important;
}
#footer a{
  color: #717f68;
}
#footer h3,
#products #footer h3 {
  color: #333;
  font-size: 15px;
  line-height: 15px;
  margin: 0 0 20px;
  padding: 0;
}
#footer div.social li {
  margin-left: 5px;
  margin-top: 0;
  padding: 0;
}
#footer div.social a i {
  background-color: #717f68;
  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: #717f68;
  border: 1px solid #717f68;
  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;
}

/*- gallery */
#homeowner #gallery,
#professionals #gallery{
  background: rgba(0, 0, 0, .5);
  color: #fff;
  height: 422px;
  position: relative;

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

#homeowner #gallery p,
#professionals #gallery p{
  color: #fff;
  font-size: 15px;
  line-height: 25px;
}
#homeowner #gallery h3,
#professionals #gallery h3{
  color: #fff;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#homeowner #gallery h3.under::after,
#professionals #gallery h3.under::after {
  background-color: #fff;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}

#homeowner #gallery .gallery-img {
  background-image: url("/wp-content/uploads/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%;
}
#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: #717f68;
  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 #717f68;
  background-color: #717f68;
}


/*- tour */
#tour{
  background: rgba(86, 92, 80, .9) 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/Kraftmaid_7.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}
#tour p{
  color: #fff;
  font-size: 15px;
  line-height: 25px;
}
#tour h3{
  color: #fff;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#tour h3.under::after {
  background-color: #fff;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#tour .tour-img {
  background-image: url("/wp-content/uploads/Kraftmaid_7.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: #717f68;
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 #717f68;
  background-color: #717f68;
}



/*- intro */
#intro{
  background: #fff;
  color: #494949;
  padding: 20px 0;
}
#intro p{
  color: #494949;
  font-size: 15px;
  line-height: 25px;
}
#intro .intro-col1{
  padding-right: 50px;
}
#intro .intro-col1 h3,
#intro .intro-col2 h3{
  color: #717f68;
  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: #717f68;
  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 #717f68;
  background-color: #717f68;
}

/* -------------------------------------- */
/* --Media Query Styles -- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  #footer div.social li {
    margin-left: 25px;
    /*margin-top: 40px;*/
    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: #fcfaf7 none repeat scroll 0 0;
  color: #494949;
  font-family: 'Montserrat',serif;
  font-size: 14px;
  padding: 40px 20px;
  /*text-align: center;*/

}

/* end @media 768px */
}
@media only screen and (max-width : 767px) {
  #header-top .text-right,
  #header-bottom .text-right {
    text-align: center;
    margin-bottom: 20px;
  }
  /* end @media 767px */
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

  /* end @media 480px */
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
  /* end @media 320px */
}


/* -------------------------------------- */
/* --DESIGN PARTNER "elevations & you" Page Styles -- */

/* if homeowners */
body.homeowners .proshowroom{
  display: none;
}

/* if professionals */
body.professionals .homeshowroom{
  display: none;
}


/* -------------------------------------- */
/* --Products Page Styles -- */

/*- products */
#products{
}
/*#products p{
color: #fff;
font-size: 15px;
line-height: 25px;
}*/
#products h3{
  color: #717f68;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#products h3.under::after {
  background-color: #717f68;
  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 #717f68;
  background-color: #717f68;
}

.products #banner .banner-con h1 {
  color: #717f68;
  font-family: 'Montserrat',serif;
  font-size: 35px;
  line-height: 35px;
  height: 100%;
  letter-spacing: normal;
  margin: 0;
  padding: 40px;
  width: 100%;
}

/* -------------------------------------- */
/* -- GALLERY Styles -- */
#gallery .product {
  border-bottom: 0;
  margin: 0 0 3.14286rem;
  padding-bottom: 0;
}
#gallery h3.product-title {
  display: none;
}
#gallery .product-wrap {
  border: 1px solid #5b6355;
  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: #5b6355;
  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 #5b6355;
  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: #5b6355;
  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: #5b6355;
}

@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: #717f68;
  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: #717f68;
}
.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: #717f68;
  font-size: 20px;
  line-height: 20px;
  margin: 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 #717f68 !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 #717f68;
  background-color: #717f68;
}


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: #717f68;
  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 #717f68;
  background-color: #717f68;
}
div#sched p {
  color: #fff;
}


#mc_embed_signup {
  background: rgba(0, 0, 0, 0.03);
  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: #717f68;
}
#contact-form label {
/*   color: #fff !important; */
  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: #d5d3c8;
  color: #494949;
  height: 345px;
  position: relative;
  padding: 20px 0;
}
#exp-sched p{
  color: #494949;
  font-size: 15px;
  line-height: 25px;
}
#exp-sched h3{
  color: #717f68;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#exp h3{
  color: #717f68;
}
#exp-sched h3.under::after {
  background-color: #717f68;
  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: #717f68;
  border: 1px solid #717f68;
/*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 #717f68;
  background-color: #717f68;
}
/*#exp-sched .exp-sched-con {
left: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}*/



/* -- VR Experience Styles -- */

#tour-history {
    background: #5b6355;
    color: #fff;
    /* height: 400px;*/
    position: relative;
    /*padding: 20px 0;*/
}

#tour-history p {
    color: #fff;
    font-size: 15px;
    line-height: 25px;
}

#tour-history h3 {
    color: #fff;
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 40px 0;
    padding: 0;
}


/*
  #tour-history a:link {
  color: #fff;
  text-decoration: underline;
  }*/

#tour-history h3.under::after {
    background-color: #fff;
    bottom: -20px;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 170px;
}

#tour-history .tour-history-con {
    padding-right: 40px;
    padding-left: 40px;
    position: relative;
}


/*#tour-history .tour-history-img {
  background-image: url("/images/homeowners/tour.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  }*/


/* #tour-history .tour-history-con {
  padding-left: 50px;
  }*/

#tour-history .col-sm-6 {
    padding-left: 0;
}

#tour-history .btn-default {
    background-color: #5b6355;
    border: 1px solid #5b6355;
    /*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 #5b6355;
    background-color: #5b6355;
}

@media only screen and (max-width: 992px) {
    #tour-history {
        background: #5b6355;
        color: #fff;
        height: auto;
        position: relative;
        padding: 0;
    }
    #tour-history .col-sm-6 {
        padding-left: inherit;
        width: 100%;
    }
    /*#tour-history .tour-history-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  }*/
    #tour-history .tour-history-con {
        position: relative;
        top: inherit;
        /*padding: 20px;*/
    }
    /* end max-width : 992px*/
}


/* -------------------------------------- */
/* -- 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: #717f68;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 20px;
}
#events h3.under::after {
  background-color: #717f68;
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#events .event-image-date p {
  color: #717f68;
  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: #717f68;
  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 #717f68;
  background-color: #717f68;
}
#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: #717f68;
}
#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: #717f68;
  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: #717f68 !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: #717f68;
  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: #717f68 !important;*/
display: none;
}
/*.blog .sidebar{
border: 1px solid #717f68;
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 #717f68;
  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 #717f68;
  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 */

}

/* 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) {

  #splash .container {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0;
    padding-right: 0;
  }
/*#splash #pro {
text-align: center;
border-bottom: 1px solid #fff;
padding: 20px;
}
#splash #home {
text-align: center;
padding: 20px;
}
*/
#splash #pro {
  background: #717f68;
  border-top: 10px solid #efeae0;
  border-bottom: 5px solid #efeae0;
  height: auto;
  position: relative;
}
/*#splash #pro h3,
#splash #pro p {
color: #384534;
}*/

#splash #home {
  border-top: 5px solid #efeae0;
  background: #905849;
  /* border-top: none; */
  height: auto;
  position: relative;
}
#splash .container-pro-home {
  background: #efeae0;
}

/*#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: #717f68;
  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: #717f68;
  margin: 0;
  padding: 0;
}

/* banner */
#banner .banner-con h1 span {
  font-family: 'Montserrat',serif;
  font-size: 25px;
  line-height: 25px;
  color: #717f68;
  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: #717f68;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #fff;
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #717f68;
min-width: auto;
text-align: left;
}*/
#brands .wcf-input_query, #brands .wcf-form-title {
  display: none !important;
}
body#brands #banner {
  margin-bottom: 30px;
}
/*#brands h3.wcf-post-title {
font-size: 14px;
line-height: 16px;
}*/
#brands h3.wcf-post-title {
  display: none;
}
/* experience */
.intro-col1 {
  margin-bottom: 20px;
}
#exp-sched {
  background: #d5d3c8;
  color: #494949;
  height: auto;
  position: relative;
  padding: inherit;
}
#exp-sched .col-sm-6 {
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
#exp-sched .exp-sched-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 345px;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
}
#exp-sched .btn-default {
  padding: 9px 30px;
}
#exp-sched .exp-sched-con {
  position: relative;
  top: inherit;
  padding: 20px;
}

/* blog */
.blog .sidebar {
  border: 1px solid #717f68;
  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: #717f68;
  font-family: 'Montserrat',sans-serif;
  font-size: 24px;
  font-weight: 700;
  padding: 15px 0 0;
}
#events h3.event-title {
  color: #717f68;
  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 */
}




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


/* End CSS */

/* =============================================================================
   BS5 structural parity (P3 fan-out) — layout/reboot only; KI palette unchanged
   ============================================================================= */

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

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


/* GBS generic P3 row/container fixes (fan-out) */
.container,
.container-fluid {
  --bs-gutter-x: 30px;
}
.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;
}
.row > *:not([class*="col-"]) {
  padding-left: 0;
  padding-right: 0;
}
/* BS5's `.row > *` carries `margin-top: var(--bs-gutter-y)`, which zeroes the top
   margin of an `hr` placed directly in a row; BS3 left the `hr` cascade alone.
   Production measures `margin-top: 15px` at 576/768 and `20px` at 992/1200/1400 on
   `#title .title-con-sm > .row > hr` (/custom-cabinetry/, /remodeling-showroom/).
   `margin-bottom` already matches production (15px / 30px) off the theme cascade,
   so only the top margin is pinned here. */
.row > hr {
  margin-top: 20px;
}
@media only screen and (max-width: 768px) {
  .row > hr {
    margin-top: 15px;
  }
}
.row:not(:has(> [class*="col-"])) > .row {
  width: auto;
  max-width: none;
}
.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;
}
@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 > .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;
  }
}
@media (min-width: 992px) {
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
}
@media (min-width: 768px) {
  #title .title-con-sm > .row > p {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .row.vertical-align:has(> .video) {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .row.vertical-align:has(> .video) > [class*="col-"] {
    flex-shrink: 1;
  }
}

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

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

/* 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` must stay a flex row in the 768-991px band: BS5 columns have no
   float, so a block row stacks them one per line and the header logo loses its
   side-by-side split with the buttons/nav column.

   Production computes `align-items: center; justify-content: center` on this row at
   EVERY breakpoint (measured on /privacy-policy/ at 576/768/992/1200 - block at 576,
   flex and centred from 768 up). The earlier `flex-start` pin was wrong and sat the
   logo high through the whole 768-991 band. */
@media (max-width: 991px) {
  .row.vertical-align {
    align-items: center;
    display: flex;
    justify-content: center;
  }
}

@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;
  }
  /* Phone band: nested `.row` inside `#title .title-con-sm` (page content on
     /custom-cabinetry/ and /remodeling-showroom/). BS5 flex rows trap margins and
     clamp nested row width; block flow restores production's floated BS3 layout. */
  #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;
  }
  /* 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;
  }
}

/* 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: none;
  }
  /* 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: none;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body .container {
    max-width: none !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: none;
    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%;
  }
}

/* BS3 sized `.container` with `width` alone, so production computes `max-width: none`
   at every breakpoint; BS5 sizes it with `max-width` and a `width: 100%` base. Carrying
   BS5's `max-width` here as well was redundant - the explicit `width` already pins the
   box - and it is 80 of the report's mismatches on `#title > .container` alone. Pinning
   `none` and keeping `width` was verified to move nothing: 0 elements changed width,
   height or offset across four pages at all five breakpoints. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body .container {
    max-width: none !important;
    width: 970px;
  }
}

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

@media (min-width: 1280px) {
  body .container {
    max-width: none !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: none !important;
    width: 100%;
  }
}

/* BS5's `.row > *` sets `max-width: 100%`; BS3 set no max-width on columns, so
   production computes `none`. Inert on its own - a column is already inside its row -
   but it is the rest of the report's 120 max-width mismatches. */
.row > * {
  max-width: none;
}

@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: left;
    max-width: none;
  }
  /* Only `> li` here. The walker puts `.nav-item` on every item, and
     `#nav .navbar-nav > .nav-item` outweighs the theme's own
     `#nav ul.navbar-nav > li { display: inline-block; float: none; text-align: right }`,
     which is what right-aligns the menu on production. Floating the items left
     instead left the wrapped CONTACT item hanging off the left edge. */
  #nav .navbar-nav > li {
    display: block;
    float: left;
  }
  #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;
    padding: 15px;
    text-decoration: none;
  }
  #nav .dropdown-toggle::after {
    display: none !important;
  }
  #nav .caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    /* BS3 draws the caret with a dashed top border; on a 0x0 box it renders the same
       triangle as `solid`, but production computes `dashed`. */
    border-top: 4px dashed #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 .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%;
}

/* Desktop dropdown card chrome — font-size token pinned below; prod min-width/shadow. */
#nav .dropdown-menu {
  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;
  }
}

@media (max-width: 767.98px) {
  #nav.navbar {
    align-items: normal;
    display: block;
    min-height: 50px;
  }

  #nav.navbar > .container-fluid {
    display: block;
  }

  #nav.navbar > .container-fluid::before,
  #nav.navbar > .container-fluid::after {
    content: " ";
    display: table;
  }

  #nav.navbar > .container-fluid::after {
    clear: both;
  }

  #nav .navbar-toggler {
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #nav .navbar-collapse,
  #nav.navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {
    background-color: #f7f7f7 !important;
  }

  #nav .navbar-collapse {
    clear: both;
  }

  #nav .navbar-nav {
    display: block;
    margin: 0 !important;
  }

  #nav .navbar-nav > li,
  #nav .navbar-nav > .nav-item {
    display: block;
    float: none;
  }

  #nav .navbar-nav > li > a,
  #nav .navbar-nav > .nav-item > a,
  #nav .navbar-nav .nav-link {
    display: block;
    padding: 10px;
    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 !important;
  }

  #nav .navbar-nav .show .dropdown-menu,
  #nav .navbar-nav .open .dropdown-menu,
  #nav .dropdown-menu.show {
    background-color: #fff !important;
    border-top: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  #nav .dropdown > a[aria-expanded="true"],
  #nav .dropdown.show > a {
    text-decoration: none !important;
  }

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

  #nav.navbar-inverse .navbar-nav a:hover,
  #nav.navbar-inverse .navbar-nav a:focus,
  #nav .dropdown-menu a:hover,
  #nav .dropdown-menu a:focus,
  #nav .dropdown-menu .dropdown-item:hover,
  #nav .dropdown-menu .dropdown-item:focus {
    text-decoration: none !important;
  }
}

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

/* 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. */

/* Expanded nav (>=768px) — `#nav .navbar-nav` is floated to reproduce production's
   BS3 menu, but BS5's `.navbar-collapse` has no clearfix, so the floated ul escapes
   it and `#nav` falls back to its 50px min-height. Production's BS3 `.navbar-collapse`
   carries the standard clearfix and therefore sizes to the menu: measured #nav is
   125px at md (3 wrapped rows) and 65px at lg, xl and xxl (2 rows). Restoring the
   clearfix reproduces all four.

   This replaces two earlier workarounds: a `min-height: 82px` pin at md (production is
   125px there, so the pin was both wrong and, with the nav link line-height above
   corrected, inert) and a clearfix banded to 992-1399.98px, which left xxl at 50px
   against production's 65px. The band restriction is gone - production wraps to two
   rows at xxl as well. */
@media (min-width: 768px) {
  #nav .navbar-collapse.navbar-1-collapse {
    display: block;
    height: auto;
    overflow: visible;
  }

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

  #nav .navbar-collapse.navbar-1-collapse::after {
    clear: both;
  }
}

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

/* Gravity Forms labels on /contact/: production computes line-height 18.2px and
   margin-bottom 5px on `.gfield_label` (14px font). The line-height is Gravity Forms'
   own `.gform_legacy_markup_wrapper .top_label .gfield_label { line-height: 1.3 }`,
   which loads at the same version here but is outranked by this rule; the 5px is BS3's
   `label` reboot rule, which BS5 dropped. Measured at 576/768/992/1200/1400 on
   /contact/, /contact/request-a-quote/ and /contact/request-a-consultation/ - the same
   pair of values at every breakpoint. */
body#contact #contact-form .gfield_label.gform-field-label {
  line-height: 18.2px;
  margin-bottom: 5px;
}

/* Gravity Forms on /contact/ use .large / .gfield_select, not .form-control.
   Production resolves field text as #333 (rgb(51,51,51)); BS5 reboot leaves #000.
   v2.0.7 used #75787b (bellevue pattern) — too light on ki; measured live prod 2026-09-15. */
body#contact #contact-form .gform_wrapper input.large:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body#contact #contact-form .gform_wrapper select.gfield_select,
body#contact #contact-form .gform_wrapper textarea.textarea {
  color: #333;
}

/* /contact/ @md+ — GF inputs: prod line-height 21.4286px (h=41) vs BS5 reboot 20px (h=40). */
@media (min-width: 768px) {
  body#contact #contact-form input,
  body#contact #contact-form select,
  body#contact #contact-form textarea {
    line-height: 21.4286px !important;
  }
}

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

/* Footer contact block — production keeps BS3's `address { margin-bottom: 20px }`
   (@line-height-computed); BS5 Reboot halves it to 10px. The address box itself is
   identical (165px at sm/md, 145px at lg+), so this is a flat 10px of footer height
   lost on every page. Measured on /privacy-policy/ at 576/768/992/1200. */
address {
  margin-bottom: 20px;
}

/* `.media` is a BS3 component the BS5 parent rebuild dropped. Post content still emits
   `figure.media > img.media__img`, and that image is a fixed 750px wide with a negative
   right margin (-184px at sm, -195px at md, -22.5px at lg). Production's
   `.media { overflow: hidden }` clips the excess; without it the image extends the
   document, which is the only horizontal overflow on the site
   (/ki-lumber-louisville-expansion-shows-off-ways-spruce-home/ ran +179px wide at sm,
   +170px at md, +12px at lg). The same declaration restores the block formatting
   context that keeps the figure's last child margin inside it, worth 10px of height
   (prod 513px vs dev 503px at sm/md). */
.media {
  overflow: hidden;
}

/* Production lays the theme's marketing sections out as BS3 block rows with floated
   columns. BS5 flex rows change two things that cost height:

   1. `#exp-sched`'s columns are floats that overrun their 345px-tall section by
      50.66px. The next row carries `clear: both`, so on production it takes 19.66px of
      clearance. Flex items are not floats, so the upgraded page had none.
   2. The tour `<iframe>` is an inline replaced element on production and sits in a line
      box 6px taller than itself. As a flex item it is blockified to `display: block`
      and loses that 6px.

   Restoring the block rows, the BS3 row clearfix and the column floats reproduces both.
   Measured at 992px, where /take-a-tour/ ran 43px short.

   v2.0.4 scoped this to `body.take-a-tour` and to `body.pros-designer-showroom` below
   768px. The report then found the same mechanism on a third and fourth page family
   (`#exp` on /custom-cabinetry/ and /remodeling-showroom/, `.proshowroom` at lg and up,
   the single-post `.blogsingle-con` row), so it is now keyed on the sections themselves
   rather than copied per page.

   Two things this rule must NOT do:

   1. Touch `.row.vertical-align`. Production keeps that one a centred flex row at md
      and up (the theme's own `.vertical-align` rule), and blanket-blocking it dropped
      `#tour-history`'s text column 6.22px off centre on /custom-cabinetry/.
   2. Float the columns below 768px. BS3 floats `.col-sm-*` from 768px only, so
      production computes `float: none` at sm - which is exactly what `#exp-sched`
      wanted there, the opposite direction from lg and up.

   The float is also what makes the single-post column measure right: a floated column
   establishes a BFC and keeps the article's 20/40px margins inside it (175px, as
   production does at md and up), while below 768px the unfloated block column lets
   them collapse out (115px). As flex items they were 175px at every breakpoint. */
#exp .row:not(.vertical-align),
#exp-sched .row:not(.vertical-align),
#tour-history .row:not(.vertical-align),
.proshowroom .container > .row:not(.vertical-align),
.homeshowroom .container > .row:not(.vertical-align),
.blogsingle-con > .row:not(.vertical-align) {
  align-items: normal;
  display: block;
}

#exp .row:not(.vertical-align)::before,
#exp .row:not(.vertical-align)::after,
#exp-sched .row:not(.vertical-align)::before,
#exp-sched .row:not(.vertical-align)::after,
#tour-history .row:not(.vertical-align)::before,
#tour-history .row:not(.vertical-align)::after,
.proshowroom .container > .row:not(.vertical-align)::before,
.proshowroom .container > .row:not(.vertical-align)::after,
.homeshowroom .container > .row:not(.vertical-align)::before,
.homeshowroom .container > .row:not(.vertical-align)::after,
.blogsingle-con > .row:not(.vertical-align)::before,
.blogsingle-con > .row:not(.vertical-align)::after {
  content: " ";
  display: table;
}

#exp .row:not(.vertical-align)::after,
#exp-sched .row:not(.vertical-align)::after,
#tour-history .row:not(.vertical-align)::after,
.proshowroom .container > .row:not(.vertical-align)::after,
.homeshowroom .container > .row:not(.vertical-align)::after,
.blogsingle-con > .row:not(.vertical-align)::after {
  clear: both;
}

@media (min-width: 768px) {
  #exp .row:not(.vertical-align) > [class*="col-"],
  #exp-sched .row:not(.vertical-align) > [class*="col-"],
  #tour-history .row:not(.vertical-align) > [class*="col-"],
  .proshowroom .container > .row:not(.vertical-align) > [class*="col-"],
  .homeshowroom .container > .row:not(.vertical-align) > [class*="col-"],
  .blogsingle-con > .row:not(.vertical-align) > [class*="col-"] {
    float: left;
  }
}

/* BS3 put `min-height: 1px` on every numbered column; BS5 does not. It only shows on
   EMPTY columns, and there it is the whole story behind five "missing" rows: the
   showroom rows on /design-partners/design/ and the `#tour-history` row on
   /take-a-tour/ are emitted by the templates and empty on production too, so
   production renders them 1-2px tall while the upgrade rendered them 0px. A zero-height
   row fails the capture's visibility filter, which is what turned an inert 2px into a
   missing-post. It is also the whole of the -4px /design-partners/design/ residual:
   2px per empty showroom row, twice. */
[class*="col-"] {
  min-height: 1px;
  /* BS3's grid also made every numbered column a containing block. Inert until
     something inside is absolutely positioned, but production computes it. */
  position: relative;
}

/* BS3's media object carried `margin-top: 15px` (zeroed on the first child); BS5
   dropped the component entirely. The featured figure on the single-post template sits
   after a `p` with `margin-bottom: 10px`, so the collapsed margin went 15px -> 10px and
   every single post came out 5px short at every breakpoint. */
.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}

/* The footer runs the same BS3 block-row mechanism as the marketing sections above,
   on shared chrome, so it costs height on all 26 URLs rather than on one page family.
   `address` carries `margin-bottom: 20px`; production's block column lets that margin
   collapse out of the column, while a BS5 flex column establishes a block formatting
   context and traps it - `.footer-top .col-sm-5` measured 185px against production's
   165px, and `.footer-bottom .col-sm-4` 50px against 40px. The nested contact row
   inside `address` is a block row on production too. Total footer height happened to
   agree because the trapped margin never made the tallest column the tallest, which is
   why this never surfaced as a document-height diff. */
#footer .footer-top > .container > .row:not(.vertical-align),
#footer .footer-bottom > .container > .row:not(.vertical-align),
#footer .footer-top address .row:not(.vertical-align) {
  align-items: normal;
  display: block;
}

#footer .footer-top > .container > .row:not(.vertical-align)::before,
#footer .footer-top > .container > .row:not(.vertical-align)::after,
#footer .footer-bottom > .container > .row:not(.vertical-align)::before,
#footer .footer-bottom > .container > .row:not(.vertical-align)::after,
#footer .footer-top address .row:not(.vertical-align)::before,
#footer .footer-top address .row:not(.vertical-align)::after {
  content: " ";
  display: table;
}

#footer .footer-top > .container > .row:not(.vertical-align)::after,
#footer .footer-bottom > .container > .row:not(.vertical-align)::after,
#footer .footer-top address .row:not(.vertical-align)::after {
  clear: both;
}

@media (min-width: 768px) {
  #footer .footer-top > .container > .row:not(.vertical-align) > [class*="col-"],
  #footer .footer-bottom > .container > .row:not(.vertical-align) > [class*="col-"],
  #footer .footer-top address .row:not(.vertical-align) > [class*="col-"] {
    float: left;
  }
}

/* BS3's `.list-inline` pulled itself 5px left to offset the 5px padding it put on each
   `li`. The theme zeroes that padding but production keeps the negative margin, so the
   footer social list sits 5px further left there (541px wide against 536px). BS5's
   `.list-inline` has neither declaration. */
.list-inline {
  margin-left: -5px;
}

/* BS3's `.nav > li` / `.nav > li > a` were block and position: relative. Without them
   BS5 leaves the items as `list-item` and static. */
#nav .nav > li {
  display: block;
  position: relative;
}

#nav .nav > li > a {
  position: relative;
}

/* The navwalker still emits `<span class="caret">`, and its box already matches
   production (inline-block, 0x0, 4px borders, 2px left margin) at every breakpoint -
   except the top border, which the conversion draws `solid` where BS3 draws `dashed`.
   On a zero-sized box both paint the same triangle, so this is a computed-style
   difference only; pinned so a probe on `.caret` cannot report a fix. The
   `#nav .caret` rule in the `min-width: 768px` block above is corrected to match. */
.caret {
  border-top-style: dashed;
}

/* `--bs-dropdown-font-size` defaults to `1rem`, and the theme sets the root font to
   10px, so submenu text opened at 10px/14.29px against production's 14px/20px. The
   token is independent of the `--bs-body-font-size` pin higher up in this file.
   Screenshots never hover, so the pixel gate cannot see this one. */
.dropdown-menu {
  --bs-dropdown-font-size: 14px;
}

/* The home and locations templates use `.card` / `.card-img-top`, and production's theme
   defines `.card` with no border at all (computed `0px` / `none`). BS5's component adds
   `1px solid rgba(0,0,0,.176)` on all four sides, and because the card is border-box that
   1px comes out of the image's content width: the slider card image measured 534px wide
   against production's 536px, and 291.33px against 293.33px at lg. The lost width shortens
   the image proportionally, so each card ran ~8.5px short - the whole of the home page's
   +8px at lg and, with three cards stacked, its +25px at sm. Using `border: 0` rather than
   zeroing `--bs-card-border-width` also drops the style to `none` and the colour back to
   `currentColor`, which is what production computes.

   Production reaches `0px none` by accident: its inline BS5 card block resolves
   `border: var(--bs-card-border-width) var(--bs-card-border-style) var(--bs-card-border-color)`
   against a `--bs-border-color` nothing defines there, so the shorthand is invalid at
   computed-value time and falls back to the initial value. BS5.3.8 does define
   `--bs-border-color`, so the border paints here. That inline block sits after this
   stylesheet, so a plain `.card` cannot outrank it - hence `div.card`. */
div.card {
  border: 0;
}

/* /locations/ runs the block-row mechanism on two levels - the page container's own row
   and the FacetWP template's `.row.display-flex`, which production computes as `block`
   despite the class name. Once the card border above stops shortening the location
   images, this row structure is the rest of the page's +26px at md and xl. Scoped to the
   template's body class because it reaches a generic `.container > .row`. */
body.locations > .container > .row,
body.locations .facetwp-template > .row {
  align-items: normal;
  display: block;
}

body.locations > .container > .row::before,
body.locations > .container > .row::after,
body.locations .facetwp-template > .row::before,
body.locations .facetwp-template > .row::after {
  content: " ";
  display: table;
}

body.locations > .container > .row::after,
body.locations .facetwp-template > .row::after {
  clear: both;
}

@media (min-width: 768px) {
  body.locations > .container > .row > [class*="col-"],
  body.locations .facetwp-template > .row > [class*="col-"] {
    float: left;
  }
}

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