/*
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). WBS brand colors/fonts preserved.
Version: 2.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, rtl-language-support, theme-options, translation-ready
Text Domain: devdmbootstrap3
Template: devdmbootstrap3

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

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

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

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

/* BS5 derives body and every component that reads these tokens (.dropdown-menu,
   .list-group, .table, .form-control, .accordion) from the two variables
   below, so pin the tokens rather than body alone. 14px x 1.42857143 = 20px,
   which is what BS3's $font-size-base / $line-height-base produced on prod. */
:root {
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.42857143;
  /* BS3 bootstrap.css body color #333 (style-parity rgb(51, 51, 51)); BS5 reboot
     defaults --bs-body-color to #212529 and currentColor-fed border-* drift with it. */
  --bs-body-color: #333;
  /* BS5 reboot sets --bs-heading-color to inherit; prod h3 borders derive #75787b. */
  --bs-heading-color: #75787b;
  /* BS3 bootstrap.css .form-control — prod sidebar search computes #555 text,
     #ccc borders, 4px radius; BS5 reboot bleeds #333 / #dee2e6. */
  --bs-border-color: #ccc;
}
/* BS5 declares every --bs-btn-* token on .btn itself (and re-declares the padding,
   font-size and radius ones on .btn-lg), so the same names set on :root never reach
   the component and the buttons fall back to BS5 rem defaults against html's 10px
   root: 3.75px/7.5px padding and line-height 1.5. Production (BS3 bootstrap.css)
   renders 6px/12px at 1.42857143, and 10px/16px at 1.3333333 for .btn-lg, which made
   every .btn-lg on the site 7.7px shorter and 12px narrower than production.
   Declared on the same selectors BS5 uses so they actually win. */
.btn {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 14px;
  --bs-btn-line-height: 1.42857143;
  --bs-btn-border-radius: 4px;
  /* BS5 dropped BS3's `white-space: nowrap` from .btn, so anchor buttons wrap where
     production keeps them on one line (/news/ "SUBSCRIBE TO OUR BLOG" runs to two
     lines). <button> keeps nowrap from the UA sheet, anchors do not. */
  white-space: nowrap;
}
.btn-lg {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 18px;
  --bs-btn-line-height: 1.3333333;
  --bs-btn-border-radius: 6px;
}
form .form-control {
  color: #555;
  border-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*/

/*
cool grey 2 #d0d0ce rgb(208, 208, 206);
cool grey 5 #b1b3b3 rgb(177, 179, 179);
cool grey 9 #75787b rgb(117, 120, 123);
*/


/* -- center nav tabs -- */
.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
}
.nav-tabs {
    text-align:center;
}
.tab-content {
    margin-top: 40px;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
body p {
  color: #75787b;
  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, h2, h3, h4, h5, h6{
  color: #75787b;
}

h1{
  font-family: 'Montserrat', serif !important;
  font-size: 40px;
  line-height: 50px;
  padding: 0 0 15px;
  text-transform: uppercase;
  font-weight: 700;
}
h2{
  font-family: 'Montserrat', serif !important;
  font-size: 30px;
  line-height: 50px;
  padding: 0 0 15px;
  text-transform: uppercase;
  font-weight: 700;
}
h3{
  font-family: 'Montserrat', serif !important;
  font-size: 25px;
  line-height: 50px;
  padding: 0 0 15px;
  text-transform: uppercase;
  font-weight: 700;
}
#loc h3 {
	font-size: 18px;
	margin: 0;
	padding: 0;
}
#splash h3{
  font-family: 'Montserrat', serif !important;
  font-size: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.design-partners h3 {
  color: #75787b;
}

.under::after {
  background-color: #1B704B;
  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;
    }
  }



/* default home & pros modal content for mobile size */
@media only screen and (max-width : 767px) {
  #defaulthomepro #title .title-con h1 {
	font-size: 20px;
	line-height: 25px;
	}
	#defaulthomepro h3 {
	font-size: 14px !important;
	margin: 0;
	padding: 0;
}
}

/* responsive wordpress video */

.wp-video {
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}
.col-sm-12.col-md-6.video {
  margin: 0;
  padding: 0;
}
video { width: 100% !important; height: auto !important; }


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

@media screen and (max-height: 767px){
#rc-imageselect, .g-recaptcha {
   transform:scale(0.77);
   -webkit-transform:scale(0.77);
   transform-origin:0 0;
   -webkit-transform-origin:0 0;
  }
}

/* -------------------------------------- */
/* -- fancybox styles -- */
.fancybox-wrap h4, .fancybox-wrap .h4 {
	font-size: 16px !important;
	margin-bottom: 3px !important;
	margin-top: 15px !important;
}
.fancybox-wrap p {
	font-size: 14px;
	line-height: 16px;
}

  /* -------------------------------------- */
  /* -- locations styles -- */
  #locations h3 {
    color: #75787b;
    font-size: 24px;
    line-height: 24px;
    margin: 25px 0 5px;
    padding: 0;
  }
  #locations .product-img {
    margin-bottom: 1.71429rem;
  }

  #locations a i.fa-envelope {
    background-color: #c8c0ab;
    border-radius: 24px;
    color: #766b52;
    font-size: 20px;
    height: 40px;
    padding: 8px;
    text-align: center;
    width: 40px;
  }


  /* -------------------------------------- */
  /* -- slideshow styles -- */

  #slideshow h3 {
    margin: 0;
    padding: 0;
    font-size:24px;
  }
  #slideshow .master-slider-parent {
    margin-bottom: 30px;
  }

  @media screen and (max-width: 1199px) {
    #slideshow h3 {
      margin: 0;
      padding: 0;
    }
  }

  @media screen and (max-width: 767px) {
    #slideshow h3 {
      margin-top: 20px;
    }
  }

  /* -------------------------------------- */
  /* -- fix email signup input -- */
  #mc_embed_signup input.email {
    width: 100% !important;
  }

  /* -------------------------------------- */
  /* -- vertical align -- */
  .vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  @media screen and (max-width: 767px) {
    .vertical-align {
      display: inherit;
    }
  }


  /* -------------------------------------- */
  /* -- Read more styles -- */
/*a {
color: #0254EB
}
a:visited {
color: #0254EB
}*/
a.morelink {
  text-decoration:none;
  outline: none;
}
.morecontent span {
  display: none;
}
/*.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}*/



/* -------------------------------------- */
/* -- Global Google Map Styles -- */

/* Flexible iFrame */
.Flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* -------------------------------------- */
/* -- Global Breadcrumb Styles -- */
#breadcrumbs{
  display: none;
}
#breadcrumbs.breadcrumbs-con{
  margin: 0;
  padding: 0;
}
#breadcrumbs .breadcrumbs-title {
  color: #fff;
  font-family: "Montserrat",serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  margin-top: -40px;
  padding: 0;
  text-transform: uppercase;
}
#breadcrumbs p,
#breadcrumbs p a{
  color: #a4a4a4;
  font-family: 'Montserrat',serif;
  font-size: 13px;
  line-height: 13px;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}



/* -------------------------------------- */
/* -- Global Flexbox Styles -- */
.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class*='col-'] {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .equal2, .equal2 > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
  }

}
/* -- Flexbox Align Vertical -- */
.Aligner {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
}
.Aligner-item {
  flex: 1;
}
.Aligner-item-top {
  align-self: flex-start;
}
.Aligner-item-bottom {
  align-self: flex-end;
}
.Aligner-item-fixed {
  flex: none;
  max-width: 50%;
}

@media screen and (min-width: 768px) {
  .Aligner {
    display: inherit;
  }
}


/* -------------------------------------- */
/* -- Global Top Nav Styles -- */

/*body.elevations_by_wbs #nav{
  display: none;
}*/

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

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

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

#nav.navbar-inverse {
  background-color: #fff;
  border-color: #fff;
  margin-top: 10px;
}

.navbar-nav > li > a{
  color: #333;
}

/* active parent */
#nav.navbar-inverse .navbar-nav > .active > a,
#nav.navbar-inverse .navbar-nav > .active > a:hover,
#nav.navbar-inverse .navbar-nav > .active > a:focus {
  /*background-color: #75787b;*/
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #333;
  font-family: 'Montserrat', serif;
  text-transform: uppercase;
  opacity: 1;
}
/* non active parent */
#nav.navbar-inverse .navbar-nav > li > a {
  font-family: 'Montserrat', serif;
  text-transform: uppercase;
  color: #333;
  opacity: .85;
  padding: 5px;
}
#nav.navbar-inverse .navbar-nav > li > a:hover {
  color: #75787b;
  opacity: 1;
}

/* -------------------------------------- */
/* --#nav Media Query Styles
green #75787b -- */


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

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

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

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



  #nav.navbar-inverse .navbar-nav > li > a:hover {
    color: #75787b;
    opacity: 1;
  }
  #nav .dropdown-menu > .active > a, #nav .dropdown-menu > .active > a:hover, #nav .dropdown-menu > .active > a:focus {
    background: none !important;
    color: #75787b !important;
    font-weight: bold;
  }
  #nav.navbar-inverse .navbar-nav > .active > a, #nav.navbar-inverse .navbar-nav > .active > a:hover, #nav.navbar-inverse .navbar-nav > .active > a:focus {
    background: none !important;
    color: #75787b !important;
    font-weight: bold;
  }
  #nav.navbar-inverse .navbar-nav > li.current-page-parent > a {
    background-color: #f1f1f1 !important;
    color: #75787b !important;
    font-weight: bold;
  }
  #nav.navbar-inverse .navbar-nav > .open > a, #nav.navbar-inverse .navbar-nav > .open > a:hover, #nav.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #fff !important;
    color: #75787b !important;
    opacity: 1;
    font-weight: bold;
  }
  #nav.navbar-inverse {
    background-color: #75787b !important;
    border: none;
  }
  #nav .navbar-nav .open .dropdown-menu,
  #nav .navbar-nav .show .dropdown-menu {
    background-color: #fff !important;
  }

  /* end @media 768px */
}

#nav .dropdown-menu > li > a {
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 3px 20px;
  white-space: nowrap;
}
#nav .dropdown-menu > li > a:hover,
#nav .dropdown-menu > li > a:focus {
  background-color: #eee;
  color: #75787b;
  text-decoration: none;
}
#nav .dropdown-menu > li > a {
  clear: both;
  color: #494949;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 3px 20px;
  white-space: nowrap;
}
#nav .dropdown-menu > .active > a,
#nav .dropdown-menu > .active > a:hover,
#nav .dropdown-menu > .active > a:focus {
  background-color: #75787b;
  color: #fff;
  outline: 0 none;
  text-decoration: none;
}
#nav.navbar-inverse .navbar-nav > .open > a,
#nav.navbar-inverse .navbar-nav > .open > a:hover,
#nav.navbar-inverse .navbar-nav > .open > a:focus {
  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: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 50px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
.btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
.btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}

body .btn-green,.btn-green {
  color: #ffffff;
  background-color: #1B704B;
  border-color: #1B704B;
}

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

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


.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: #1B704B;
  border-color: #1B704B;
  color: #ffffff;
  font-weight: 200;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
  color: #ffffff;
  background-color: #75787b;
  border-color: #75787b;
}

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

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

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



.btn-search {
  background-color: #75787b;
  border-color: #75787b;
  color: #fff;
}
.btn-search.focus, .btn-search:focus {
  background-color: #31b0d5;
  border-color: #1b6d85;
  color: #fff;
}
.btn-search:hover {
  background-color: #75787b;
  border-color: #75787b;
  color: #fff;
}
.jetpack_subscription_widget input[type="submit"] {
  background-color: #75787b;
  border: medium none;
  color: #fff;
  padding: 10px 15px;
  font-family: "Montserrat",sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1.33333;
  padding: 10px 16px;
}
.jetpack_subscription_widget input[type="submit"]:focus {
  background-color: #75787b;
  border-color: #75787b;
  color: #fff;
}
.jetpack_subscription_widget input[type="submit"]:hover {
  background-color: #75787b;
  border-color: #75787b;
  color: #fff;
}
.jetpack_subscription_widget h2{
  color: #75787b;
  content: "";
  font-family: 'Montserrat',serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 10px;
  padding: 0;
}



/* -------------------------------------- */
/* -- Interior Page Styles -- */
hr {
  border-color: #ccc;
  margin-bottom: 20px;
  margin-top: 20px;
}
/*
.pro-tog{
display: none;
}
body.professionals .pro-tog{
display: inline;
}
.home-tog{
display: none;
}
body.homeowners .home-tog{
display: inline;
}
*/
/* header top */
/*#toggle a {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
color: #ffffff;
font-family: "Montserrat",sans-serif;
font-size: 10px;
font-weight: 700;
padding: 7px 15px 5px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#toggle a.pro-tog {
background-color: #75787b;
opacity: 0.5;
padding: 7px 25px 5px 15px;
z-index: 7;
}
#professionals #toggle a.pro-tog {
background-color: #75787b;
opacity: 1;
padding: 7px 25px 5px 15px;
z-index: 9;
}
#toggle a.pro-tog:hover {
opacity: 1;
}
#toggle a.pro-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
#toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: .7;
padding: 7px 20px 5px;
position: relative;
z-index: 7;
}
#toggle a.home-tog:hover {
opacity: 1;
}
#homeowner #toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: 1;
padding: 7px 20px 5px;
position: relative;
z-index: 9;
}
#toggle a.home-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
*/

#header-top li {
  padding: 0;
}
#header-top {
  margin-top: 30px;
}
#header-bottom {
  margin: 30px 0px 30px;
}
div#social li {
  padding: 5px 2px;
}
div#social a i {
  background-color: #c8c0ab;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  color: #75787b;
  font-size: 12px;
  height: 24px;
  padding: 6px;
  text-align: center;
  width: 24px;
}
div#header-bottom a.btn-scheduleanapp {
  background-color: #ffffff;
  border: 2px solid #75787b;
  color: #75787b;
  font-family: "Montserrat",sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 15px;
}
div#header-bottom a.btn-scheduleanapp:hover {
  background-color: #75787b;
  border: 2px solid #75787b;
  color: #ffffff;
}

@media only screen and (max-width : 768px) {
  div#header-bottom .col-sm-7.col-md-8{
    padding-right: 0;
    padding-left: 0;
  }
}

/* banner */
#banner .banner-img {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}
#banner{
  position: relative;
  text-align: center;
  margin-bottom: 0px;
}
#banner .banner-con-sm {
  color: #494949;
  font-size: 16px;
  left: 50%;
  letter-spacing: 1px;
  line-height: 24px;
  position: absolute;
  text-align: center;
  top: 280px;
  transform: translate(-50%, -50%);
  width: 600px;
}
#banner .banner-con {
  background-image: url("/images/banner/banner-title-bgshape-lg.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity : 1;
  width: 950px;
  height: 200px;
}

#brands #banner .banner-con,
#events #banner .banner-con,
#gallery #banner .banner-con,
.new-home-remodeling-team #banner .banner-con {
  background-image: url("/images/banner/banner-title-bgshape-lg.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 170px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 35%;
  transform: translate(-50%, -50%);
  width: 950px;
}
#products #banner .banner-con {
  background-image: url("/images/banner/banner-title-bgshape-lg.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 120px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 950px;
}

#banner .banner-con h1 {
  font-family: "Montserrat",sans-serif;
  font-size: 25px;
  line-height: 25px;
  font-weight: 700;
  color: #75787b;
  margin: 0;
  padding: 60px;
  width: 100%;
  height: 100%;
  letter-spacing: 2px;
}
#banner .banner-con h1 span {
  font-family: 'Montserrat',serif;
  font-size: 35px;
  line-height: 35px;
  color: #75787b;
  letter-spacing: normal;
}
#title {
  margin-bottom: 60px;
}
#title .title-con h1 {
  font-family: "Montserrat",sans-serif;
  font-size: 40px;
  line-height: 46px;
  font-weight: 700;
  color: #75787b;
  margin: 60px 0 40px 0;
  padding: 0;
  width: 100%;
  height: 100%;
  letter-spacing: 2px;
  text-align: center;
}
#title .title-con-sm h3 {
  font-family: "Montserrat",sans-serif;
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
}

#title .title-con h1 span {
  font-family: 'Montserrat',serif;
  font-size: 35px;
  line-height: 35px;
  color: #75787b;
  letter-spacing: normal;
  text-align: center;
}
#title .title-con > hr {
  border-color: #1B704B;
  border-width: 10px;
  width: 100px;
}

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

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

/* header social */
header div.social {
	position: relative;
	z-index: 999;
}
header div.social .list-inline {
  list-style: outside none none;
  margin-left: 15px;
  padding-left: 0;
}
header div.social li {
  margin-left: 0px;
  margin-top: 0;
  padding: 0;
}
header div.social a i {
  background-color: #75787b;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  color: #fff;
  font-size: 17px;
  line-height: 18px;
  height: 34px;
  padding: 8px;
  text-align: center;
  width: 34px;
}
header div.social a:hover i {
  background-color: #333;
}


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

  /* end (max-width : 767px) */
}


/* footer */
#footer{
  margin-top: 50px;
}
#footer .well {
	background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
	border: medium none;
	margin-bottom: 0;
}
#footer .mailing-list{
  background: #F3EEE4;
  padding: 20px 20px 50px 20px;
}
#footer .email-title{
  margin-bottom: 10px;
}

#footer .logo img {
  margin-left: auto;
  margin-right: auto;
  padding: 50px 0;
  text-align: center;
}
#footer .contact{
  padding: 20px 0 0;
}
#footer .footer-top{
  background: #d0d0ce;
  margin-bottom: 10px;
}

#footer .footer-top p{
  /*color: #494949;*/
  font-family: 'Montserrat',serif;
  font-size: 13px;
  line-height: 22px;
}
#footer .footer-bottom{
  background: #fff;
}
#footer .footer-bottom p{
  font-family: 'Montserrat',sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 50px;
  color: #75787b;
}
#footer .footer-top label {
  font-family: 'Montserrat',sans-serif;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 5px;
  max-width: 100%;
  text-transform: uppercase;
  color: #75787b !important;
}
#footer a{
  color: #75787b;
}
#footer h3,
#products #footer h3 {
  color: #75787b;
  font-size: 15px;
  line-height: 15px;
  margin: 0 0 20px;
  padding: 0;
}
#footer div.social li {
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}
#footer div.social li.logo {
  margin-left: 20px;
  margin-top: 0;
  padding: 0;
}
#footer div.social li.logo img {
  width: 50%;
}
#footer div.social a i {
  background-color: #75787b;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  color: #fff;
  font-size: 17px;
  line-height: 22px;
  height: 40px;
  padding: 8px;
  text-align: center;
  width: 40px;
}
#footer div.social a:hover i {
  background-color: #333;
}

#footer .btn-primary {
  background-color: #1B704B;
  border: 1px solid #1B704B;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  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 #75787b;
  background-color: #75787b;
}
#footer .footer-top address .row {
  margin-bottom: 0px;
}
#footer .footer-sublogo img {
  position: relative;
  text-align: right;
  /*top: 12px;*/
  width: 50px;
}

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

}
#homeowner #gallery-bg{
  background-image: url("/wp-content/uploads/homeowner-pros-closeup.jpg");
  background-position: top right;
  background-repeat: no-repeat;
/*   background-size: cover; */
}
#professionals #gallery-bg{
  background-image: url("/wp-content/uploads/homeowner-pros-closeup.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/homeowner-pros-kitchen2.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 422px;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
}
#professionals #gallery .gallery-img {
  background-image: url("/wp-content/uploads/homeowner-pros-kitchen2.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 422px;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
}

#homeowner #gallery .gallery-con,
#professionals #gallery .gallery-con{
  /*padding-top: 40px;*/
  margin-top: 60px;
  margin-left: 40px;
}
#homeowner #gallery .btn-default, #professionals #gallery .btn-default {
  background-color: #fff;
  border: 1px solid #fff;
  color: #75787b;
  font-size: 16px;
  line-height: 16px;
  margin: 20px 0;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  text-transform: uppercase;
}

#homeowner #gallery .btn-default:before,
#professionals #gallery .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#homeowner #gallery .btn-default:hover,
#professionals #gallery .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}


/*- tour */
#tour{
  background: rgba(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/homeowner-pros-closeup2.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/homeowner-pros-kitchen.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 422px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}
#tour .tour-con {
  padding-right: 50px;
  margin-top: 60px;
}
#tour .col-sm-6{
  padding-right: 0;

}
#tour .btn-default {
  background-color: #fff;
  border: 1px solid #fff;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#tour .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#tour .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}



/*- intro */
#intro{
  background: #fff;
  color: #494949;
  padding: 20px 0;
}
#intro p{
  color: #494949;
  font-size: 15px;
  line-height: 25px;
}
#intro .intro-col1{
  padding-right: 50px;
}
#intro .intro-col1 h3,
#intro .intro-col2 h3{
  color: #75787b;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#intro .intro-col1 h3.under::after,
#intro .intro-col2 h3.under::after {
  background-color: #75787b;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#intro .intro-col2{
  border: 1px solid #dc8927;
  padding: 0 50px 30px;
  position: relative;
  border-radius: 30%/10%;
  -moz-border-radius: 30%/10%;
  -webkit-border-radius: 30%/10%;
  top: 15px;
}
#intro .intro-col2.unround-bottom-corners{
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#intro .intro-col2 h3 {
  background-color: #fff;
  clear: both;
  color: #dc8927;
  display: inline-block;
  font-size: 20px;
  left: 50%;
  line-height: 20px;
  margin-top: 0px;
  margin-bottom: 20px;
  padding: 0;
  position: relative;
  text-align: center;
  top: 5%;
  transform: translate(-50%, -50%);
  width: 70%;
}
#intro .intro-col2 p.intro-btn{
  text-align: center;
}
#intro .intro-col2 .btn-default {
  background-color: #dc8927;
  border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#intro .intro-col2 .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#intro .intro-col2 .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}

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

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  #footer div.social li {
    /*margin-left: 25px;*/
    margin-top: 10px;
    padding: 0;
  }
}
@media only screen and (min-width : 1280px) {
  /* bootstrap adjust desktop width to 1280px */
  .container {
    width: 1280px;
  }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  #footer div.social li {
    /*margin-left: 10px;*/
    /*margin-top: 40px;*/
    padding: 0;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

  div.wpcf7 .form-inline .form-group {
    max-width: 100% !important;
  }

  #intro .intro-col1 {
    margin-bottom: 30px;
    padding-right: 0;
  }
  #tour {
    /*background: #eee8dd none repeat scroll 0 0;*/
    /*color: #494949;*/
    height: auto;
    position: relative;
  }
  #tour .tour-con {
    padding-right: 0;
  }
  #tour .tour-img {
    float: left;
    height: auto;
    max-height: 700px;
    min-height: 400px;
    position: relative;
    right: 0;
    width: 100%;
  }
  .Aligner {
    align-items: center;
    display: inherit;
    justify-content: center;
    min-height: 24em;
  }
  #header-top {
    margin-top: 30px;
    text-align: center;
  }
  #header-bottom .logo {
    text-align: center;
    margin: 20px 0;
  }
  
  #footer .footer-bottom {
    text-align: center;
  }
  #footer .footer-bottom .text-right {
    text-align: center;
  }
  #footer .footer-bottom .pull-right {
    float: none !important;
  }
  #footer h3 {
    margin: 20px 0;
  }
  #header-bottom .logo img,
  #footer .footer-top .logo img {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #gallery h3,
  #tour h3,
  #intro .intro-col1 h3 {
    font-size: 30px;
    line-height: 30px;
    margin: 0 0 40px;
    padding: 0;
  }
  #gallery {
    height: auto;
    position: relative;
  }
  #homeowner #gallery .gallery-img {
    display: none;
  }
/*#gallery .gallery-img img {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#gallery .gallery-img {
margin-bottom: 30px;
}*/
#intro .intro-col2 {
  padding: 0 20px 20px;
}
.col-sm-6,
.col-sm-12 {
  min-height: 1px;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
}
/*.col-sm-12 {
padding: 0;
}*/
#footer .footer-top {
  background: #d0d0ce none repeat scroll 0 0;
  color: #494949;
  font-family: 'Montserrat',serif;
  font-size: 14px;
  padding: 40px 20px;
  /*text-align: center;*/

}

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

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

  /* end @media 480px */
}

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


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

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

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


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

/*- products */
#products{
}
/*#products p{
color: #fff;
font-size: 15px;
line-height: 25px;
}*/
#products h3{
  color: #75787b;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#products h3.under::after {
  background-color: #1B704B;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#products .gallery-img img {
  object-fit: cover;
}

#products .gallery-con{
  /*padding-top: 40px;*/
}

#products .btn-default {
  background-color: #dc8927;
  border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#products .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#products .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}

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

/* -------------------------------------- */
/* -- GALLERY Styles -- */
#gallery .product {
  border-bottom: 0;
  margin: 0 0 3.14286rem;
  padding-bottom: 0;
}
#gallery h3.product-title {
  display: none;
}
#gallery .product-wrap {
  border: 1px solid #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 #ccc;
  padding: 20px;
}
#brands .product-img {
  margin-bottom: 1.71429rem;
}
#brands .product-content {
  line-height: 1.71429;
}
#brands .facetwp-facet {
  margin-bottom: 20px;
}
#brands .product-filter-wrap h3.facet-label {
  border-bottom: 1px solid #ccc;
  color: #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: #75787b;
  font-family: 'Montserrat',sans-serif;
  font-size: 25px;
  font-weight: 700;
  height: 100%;
  letter-spacing: 2px;
  line-height: 25px;
  margin: 0;
  padding: 60px;
  width: 100%;
}
body.new-home-remodeling-team #banner {
  /*margin-bottom: 50px;*/
}
.new-home-remodeling-team h3.wcf-post-title {
  background-color: #fff;
  clear: both;
  display: inline-block;
  font-size: 20px;
  left: 50%;
  line-height: 20px;
  margin-bottom: 20px;
  margin-top: 0;
  padding: 0;
  position: relative;
  text-align: center;
  top: 0;
  transform: translate(-50%, -50%);
  width: 70%;
  color: #75787b;
}
.new-home-remodeling-team h3.wcf-post-title {
  border-bottom: none;
  margin: 0 !important;
  padding: 0;
  display: none;
}

.new-home-remodeling-team h3.team-name {
  border-bottom: medium none;
  color: #75787b;
  font-size: 20px;
  line-height: 20px;
  margin: 20px 0 0 !important;
  padding: 0;
}

.new-home-remodeling-team article .wcf-article-wrap{
  /*border: 1px solid #dc8928;*/
  padding: 0 30px 30px;
  position: relative;
/*border-radius: 100%/10%;
-moz-border-radius: 100%/10%;
-webkit-border-radius: 100%/10%;*/
top: 15px;
}
.new-home-remodeling-team .wcf-item-result .wcf-article-wrap{
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.new-home-remodeling-team .wcf-item-result .wcf-article-wrap {
/*border-bottom: 1px solid #75787b !important;
margin: 0 0 3.14286rem !important;
padding-bottom: 30px !important;*/
}

.wcf-form-wrapper {
  margin: 0 20px;
}

@media only screen and (max-width: 992px) {

  [class*="wcf-column-"], [class^="wcf-column-"] {
    float: left;
    width: 25%;
    position: relative;
    min-height: 1px;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  .new-home-remodeling-team article .wcf-article-wrap {
    /* border: 1px solid #dc8928; */
    padding: 0 10px 10px !important;
    position: relative;
    top: 15px;
  }

}

@media only screen and (max-width: 767px) {
  .wcf-column-2, .wcf-column-3, .wcf-column-4 {
    width: 100% !important;
  }

}


/* -------------------------------------- */
/* -- Contact Us Styles -- */
/*
brown #524133
orange #dc8927
*/
div#contact-form .btn-primary {
/*   background-color: #fff;
  border: 1px solid #fff; */
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
/* color: #524133; */
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
div#contact-form .btn-primary:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
div#contact-form .btn-primary:hover{
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}


div#sched .btn-primary {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50% / 25%;
  -moz-border-radius: 50% / 25%;
  -webkit-border-radius: 50% / 25%;
  color: #75787b;
  font-size: 16px;
  line-height: 16px;
  margin: 20px 0;
  padding: 9px 70px;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  text-transform: uppercase;
}
div#sched .btn-primary:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
div#sched .btn-primary:hover{
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}
div#sched p {
  color: #fff;
}
#mc_embed_signup {
  /*background: rgba(0, 0, 0, 0.03);*/
  background: #b1b3b3;
  margin-top: 0 !important;
  padding: 10px 20px 40px 20px;
}

#mc_embed_signup input.email {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555555;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
}

div#contact-us {
  border-top: 1px solid #c8c0ab;
  margin: 10px 0 0;
  padding: 10px 0 0;
}
#contact-form p {
  color: #fff;
}
#contact-form a {
  color: #fff;
  text-decoration: underline;
}
#contact-form a:hover {
  color: #75787b;
}
#contact-form label {
  /*color: #75787b !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: #75787b;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
  padding: 0;
}
#exp h3{
  color: #75787b;
}
#exp-sched h3.under::after {
  background-color: #1B704B;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#exp-sched .exp-sched-con {
  padding-right: 40px;
  padding-top: 40px;
  position: relative;
}
#exp-sched .exp-sched-img {
  /*background-image: url("/images/homeowners/tour.jpg");*/
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 345px;
  position: absolute;
  right: 0;
  top: 0;
  width: 49%;
}
#exp-sched .exp-con {
  padding-right: 50px;
}
#exp-sched .col-sm-6{
  padding-right: 0;
}
#exp-sched .btn-default {
  background-color: #75787b;
  border: 1px solid #75787b;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 10px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#exp-sched .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#exp-sched .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}
/*#exp-sched .exp-sched-con {
left: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}*/



/* -------------------------------------- */
/* -- Events Styles -- */


#events .wcf-form-wrapper hr {
  border-color: #c8c0ab;
  margin-bottom: 40px;
  margin-top: 40px;
}

#events .event-image-con {
  position: relative;
}
#events .event-image-date {
  background-image: url("/images/events/e-poli.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  bottom: -50px;
  height: auto;
  padding: 15px 0 40px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
}
#events h3.event-title {
  color: #75787b;
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 20px;
}
#events h3.under::after {
  background-color: #1B704B;
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
#events .event-image-date p {
  color: #75787b;
  font-family: 'Montserrat',sans-serif;
  font-size: 35px;
  font-weight: 700;
  padding: 10px 0 0;
}
#events .event-image {
  position: relative;
}
#events .event-image img {
}
#events .event-details.well {
  background-color: #fff;
  border: 1px solid #c8c0ab;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin: 20px 0;
  min-height: 20px;
  padding: 19px;
}
#events .event-details p {
  text-align: center;
}
#events .event-details i.fa {
  color: #75787b;
  font-size: 60px;
}
#events .event-rsvp a{
  color: #FFF;
}
#events .event-rsvp .btn-default {
  background-color: #dc8927;
  border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#events .event-rsvp .btn-default:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#events .event-rsvp .btn-default:hover {
  color: #fff;
  border: 1px solid #75787b;
  background-color: #75787b;
}
#events .event-details .e-line-dot::after {
  background-image: url("/images/events/e-line-dot.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 140px;
  position: absolute;
  right: -10px;
  top: 0;
  width: 20px;
}

/* -------------------------------------- */
/* -- Booking "bookly" Styles -- */

#booking .booking-con{
  margin-bottom: 50px;
}
#booking .booking-con h3{
  color: #75787b;
}
#booking .booking-con .bookly-form {
  border: 1px solid #eee;
  margin: 0 auto;
  padding: 20px;
}

/* -------------------------------------- */
/* -- Blog Styles -- */
.blog #banner{
  margin-bottom: 50px;
}
.blog h2,
.blog h2 a{
  content: "";
  color: #75787b;
  padding: 0px;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 400;
  font-family: 'Montserrat',serif;
  line-height: 28px;
}
/*.blog .sidebar a{
content: "";
color: #DC8927;
}*/
.blog .sidebar h3{
  content: "";
  color: #75787b !important;
  border-bottom: 1px solid #777;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 18px !important;
  font-weight: 400;
  font-family: 'Montserrat',serif;
  line-height: 20px;
}
.blog .sidebar h3.under::after {
  background-color: #1B704B;
  bottom: -20px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 170px;
}
.blog .sidebar ul{
  margin: 0;
  padding: 0;
}
.blog .sidebar ul li {
  list-style: outside none none;
  margin-bottom: 10px;
  padding: 0;
}
.blog .sidebar .tagcloud a{
  margin-right: 10px;
  color: #DC8927;
  font-size: 12px !important;
}

.blog .sidebar h3.sidebar-title {
/*background-color: #fff;
clear: both;
display: inline-block;
font-size: 20px;
left: 50%;
line-height: 20px;
margin-bottom: 20px;
margin-top: 0;
padding: 0;
position: relative;
text-align: center;
top: 5%;
transform: translate(-50%, -50%);
width: 70%;
border: none;
color: #75787b !important;*/
display: none;
}
/*.blog .sidebar{
border: 1px solid #75787b;
padding: 0 50px 30px;
position: relative;
border-radius: 30%/10%;
-moz-border-radius: 30%/10%;
-webkit-border-radius: 30%/10%;
top: 15px;
}*/
.blog .sidebar {
  border: medium none;
  border-radius: 30% / 10%;
  padding: 0;
  position: relative;
  top: 0;
}
.blog .sidebar.unround-bottom-corners{
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.blog .subscribebtn {
  border-top: 1px solid #75787b;
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
}
.blog .sidebar .subscribebtn a,
#blog a.btn-search  {
  color: #fff;
}
.blog article {
  border-bottom: 1px solid #75787b;
  margin-bottom: 40px;
  padding-bottom: 40px;
}
#blog .screen-reader-text,
#blog .all-posts .screen-reader-text {
  clip: inherit;
  height: inherit;
  position: relative !important;
  width: inherit;
}
#blog .blogsingle-con,
#blog .blogsearch-con {
  margin-bottom: 50px;
  margin-top: 50px;
}


/* -------------------------------------- */
/* -- Product brand pages -- */

#products.cabinetry .products-img-wrap{
  position: relative
}
#products.cabinetry .products-img-logo{
  position: absolute;
  bottom: 0;
  left: 0;
}
#products.cabinetry .products-img-logo {
  background-image: url("/images/products/product-logo-bgshape.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: 0;
  height: 70px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
  opacity : 1;
  width: 400px;
  height: 70px;
}

#products.cabinetry .products-img-logo img {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}


/* -------------------------------------- */
/* -- Privacy & Terms -- */
.terms-of-use h3,
.privacy-policy h3 {
  font-size: 20px;
  line-height: 20px;
}




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

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

}
@media only screen and (min-width : 1280px) {
  /* bootstrap adjust desktop width to 1280px */

}





@media only screen and (min-width : 768px) {
  #footer .footer-sublogo {
    margin-right: 10px;
  }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  header .container {
    width: 100%;
  }
  #nav.navbar-inverse .navbar-nav > li > a {
    font-size: 12px;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {


/*#header-top .text-right,
#header-bottom .text-right {
  text-align: center;
  margin-bottom: 20px;
  }*/

  #nav.navbar-inverse .navbar-nav > li > a {
    padding: 10px 10px;
  }
  #nav .dropdown-menu > li > a {
    padding: 5px 40px;
  }

  header .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
    border: none;
  }
  header .col-sm-8,
  header .col-sm-4 {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
  }

  header .container {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  header .row {
    margin-left: 0;
    margin-right: 0;
  }

  #nav.navbar-default {
    background-color: #f8f8f8;
    border-color: #f8f8f8;
  }
  hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #eeeeee;
  }
  h3{
    font-family: 'Montserrat', serif !important;
    font-size: 30px;
    line-height: 30px;
    padding: 0 0 15px;
    text-transform: uppercase;
  }
  #gallery h3, #tour h3, #intro .intro-col1 h3 {
    font-size: 22px;
    line-height: 26px;
    margin: 0 0 40px;
    padding: 0;
  }
  /* nav */
  .navbar-nav {
    margin: 0;
  }
  /* banner */
  #banner .banner-con {
    min-width: 320px;
  }
  #banner .banner-con h1,
  #brands #banner .banner-con h1,
  .new-home-remodeling-team #banner .banner-con h1 {
    font-family: 'Montserrat',sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #75787b;
    margin: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
    letter-spacing: 2px;
  }
  #banner .banner-con-sm {
    font-size: 13px;
    line-height: 22px;
    width: 100%;
  }
  #banner .banner-con {
    height: auto;
    top: 30%;
  }
  .experience-home-remodeling #banner .banner-con,
  .blog #banner .banner-con,
  #contact #banner .banner-con {
    height: auto;
    top: 50%;
  }
  #brands #banner .banner-con,
  #events #banner .banner-con,
  #gallery #banner .banner-con,
  .new-home-remodeling-team #banner .banner-con {
    height: auto;
    top: 30%;
    width: inherit;
  }

  /* breadcrumbs */
  #breadcrumbs.breadcrumbs-con {
    margin: 20px;
    padding: 0;
  }
  #breadcrumbs .breadcrumbs-title {
    font-family: 'Montserrat', serif;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
    color: #75787b;
    margin: 0;
    padding: 0;
  }

  /* banner */
  #banner .banner-con h1 span {
    font-family: 'Montserrat',serif;
    font-size: 25px;
    line-height: 25px;
    color: #75787b;
    letter-spacing: normal;
  }
  #banner {
    margin-bottom: 30px;
  }
  #banner .banner-con {
    background-size: cover;
    width: 90%;
  }
  #banner .banner-con h1 {
    padding: 30px;
  }

  #banner .banner-con-sm {
    width: 100%;
    padding: 20px;
  }
  #products #banner .banner-con {
    background-image: url("/images/banner/banner-title-bgshape-lg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 120px;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 40%;
    transform: translate(-50%, -50%);
    width: auto;
  }

  /* mobile container padded sides */
  .container {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 20px;
    padding-right: 20px;
  }
/*#brands .container {
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}*/
nav .container {
  margin: 0;
  padding: 0;
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-left: 0;
  margin-right: 0;
}

/* brand gallery */
#brands .wcf-field-checkbox.wcf-horizontal .wcf-checkbox-wrapper, #brands .wcf-field-taxonomy_checkbox.wcf-horizontal .wcf-checkbox-wrapper, #brands .wcf-field-radio.wcf-horizontal .wcf-radio-wrapper, #brands .wcf-field-taxonomy_radio.wcf-horizontal .wcf-radio-wrapper {
  margin: 10px 5px;
}
#brands [type="checkbox"].wcf-checkbox-item:not(:checked) + label:after {
  margin-left: 5px;
}
#brands [type="checkbox"].wcf-checkbox-item:checked + label:after {
  margin-left: 5px;
}

/*#brands input[type=radio] + label, #brands input[type=checkbox] + label {
display: inline-block;
margin: 0;
padding: 8px 10px;
margin-bottom: 0;
font-size: 13px;
line-height: 14px;
color: #75787b;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #fff;
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #75787b;
min-width: auto;
text-align: left;
}*/
#brands .wcf-input_query, #brands .wcf-form-title {
  display: none !important;
}
body#brands #banner {
  margin-bottom: 30px;
}
/*#brands h3.wcf-post-title {
font-size: 14px;
line-height: 16px;
}*/
#brands h3.wcf-post-title {
  display: none;
}
/* experience */
.intro-col1 {
  margin-bottom: 20px;
}
#exp-sched {
  background: #d5d3c8;
  color: #494949;
  height: auto;
  position: relative;
  padding: inherit;
}
#exp-sched .col-sm-6 {
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
#exp-sched .exp-sched-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 345px;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
}
#exp-sched .btn-default {
  padding: 9px 30px;
}
#exp-sched .exp-sched-con {
  position: relative;
  top: inherit;
  padding: 20px;
}

/* blog */
.blog .sidebar {
  border: 1px solid #75787b;
  padding: 0 30px 30px;
  position: relative;
  border-radius: 30%/10%;
  -moz-border-radius: 30%/10%;
  -webkit-border-radius: 30%/10%;
  top: 15px;
}

/* contact page */
div#contact-us div#contact-form form input {
  margin: 0 0 10px;
  /* padding-left: 10px; */
}
div#contact-us div#map-container div#map div#contact-in {
  height: auto;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 99;
  clear: both;
}
div#contact-us div#map-container div#map div#contact-in div {
  padding: 20px;
  position: relative;
  top: 0;
  transform: none;
}
div#contact-us div#map-container div#map div#contact-in h3 {
  color: #d4602f;
  margin: 0px 0px 30px 0px;
}

/* events */
#events .col-sm-12 {
  padding: 0px;
  margin: 20px 18px;
}
#events #breadcrumbs .col-sm-12 {
  padding: 0px;
  margin: 0px;
}
#events .event-details .e-line-dot::after {
  background-image: none;
}
#events .event-rsvp {
  text-align: center;
}
#events .event-rsvp a {
  color: #fff;
}
#events .event-image-date p {
  color: #75787b;
  font-family: 'Montserrat',sans-serif;
  font-size: 24px;
  font-weight: 700;
  padding: 15px 0 0;
}
#events h3.event-title {
  color: #75787b;
  font-size: 30px;
  line-height: 30px;
  margin: 0 0 20px;
}
#events .event-details.well {
  margin: 0;
}

/* footer */
#footer {
  margin-top: 30px;
}

/* end @media 768px */
}

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

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

/* -- VR Experience Styles -- */

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

#tour-history .btn-green {
	color: #777;
	background-color: #eee;
	border-color: #eee;
}

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





/* -------------------------------------- */
/* End CSS */

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

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

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

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

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

   `.container-fluid` needs the same pin: BS5 declares `--bs-gutter-x: 1.5rem` on
   `.container-fluid` itself, and `html` carries BS3's `font-size: 10px` (line ~413),
   so 1.5rem resolves to 15px and the sides compute calc(15px * .5) = 7.5px against
   production's 15px. */
.container,
.container-fluid {
  --bs-gutter-x: 30px;
}

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

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

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

/* BS3 spelled the grid offsets `.col-md-offset-*`; BS5 renamed them to `.offset-md-*`
   and ships nothing under the old name. `col-md-offset-1` is authored in page content
   (the five-tile product row on /custom-cabinetry/ and /remodeling-showroom/), not in
   a template, so no codemod reached it and the row lost its indent on Dev. Scoped to
   min-width 992px because that is where BS3 activated col-md-*. */
@media (min-width: 992px) {
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
}

/* The FacetWP result grid emits `article.product.col-sm-6.col-md-4` straight into
   `.facetwp-template`, with no `.row` wrapper. BS3 carried `float: left` and the 15px
   gutter on the column classes themselves, so the cards laid out 3-up; BS5 moved both
   onto `.row > *`, so outside a row they keep their width and lose the float, and
   /products/ renders one card per row. Float only from 768px up, which is where BS3's
   `.col-sm-*` first set a width - below that production stacks them too, and
   `#brands .product.col-sm-6` already zeroes the padding there. */
.facetwp-template > .product {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  /* Match the theme's `.col-sm-6, .col-sm-12` 30px gutter at exactly 768px —
     the generic 15px pin above outweighed that rule and shrank product cards. */
  .facetwp-template > .product.col-sm-6,
  .facetwp-template > .product.col-sm-12 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 768px) {
  .facetwp-template > .product {
    float: left;
  }
}
/* BS3's grid tiers are not BS5's: BS3 starts md at 992 and lg at 1200, BS5 starts them
   at 768 and 992, and BS5 dropped col-xs-* altogether. These cards carry BS3 markup
   (col-xs-6 col-sm-6 col-md-4 col-lg-3), so under BS5 each tier fires one breakpoint
   early - /take-a-tour/ runs 4-up at 992 where production runs 3-up, and below 576 the
   cards lose their width and float and stack one per row. Restore production's column
   count at production's boundaries. */
.facetwp-template > .product.col-xs-6 {
  float: left;
  width: 50%;
}
@media (min-width: 768px) {
  .facetwp-template > .product.col-sm-6 {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .facetwp-template > .product.col-md-4 {
    width: 33.33333333%;
  }
}
@media (min-width: 1200px) {
  .facetwp-template > .product.col-lg-3 {
    width: 25%;
  }
}
/* The team tabs nest the same bare-column markup one level deeper —
   `.facetwp-template > .tab-content > .tab-pane > .product.col-sm-4.d-flex` — so the
   direct-child rules above never reach it. BS3 declared the 15px gutter and the float
   on the `.col-*` classes themselves; BS5 moved both onto `.row > *`, and these cards
   have no `.row` parent. Dev therefore renders the card content box 30px wider than
   production and stacks the cards one per row instead of three
   (/contact/new-home-remodeling-team/, all breakpoints). Float from 768px up only,
   which is where BS3's `.col-sm-*` first laid out side by side. */
.facetwp-template .tab-pane > .product {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
@media (min-width: 768px) {
  .facetwp-template .tab-pane > .product {
    float: left;
  }
}

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

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

  /* `#title .title-con-sm` holds a `.row` nested directly inside a `.row` (authored in
     page content on /custom-cabinetry/ and /remodeling-showroom/). BS5 turns the outer
     `.row` into a flex container, which traps column margins and clamps nested rows.
     Restore production's block row and auto-width nested row in the phone band only. */
  #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;
  }
}

/* wpautop `<p><a name="locations"></a></p>` between floated columns and a nested row
   inside `#title .title-con-sm` — BS5 flex gives the empty paragraph its own flex line
   (+10px row height on /custom-cabinetry/ and /remodeling-showroom/ @md+). Production's
   BS3 float layout ignores it. Phone band excluded: the block rule above already
   collapses the margin there. */
@media (min-width: 768px) {
  #title .title-con-sm > .row > p {
    margin-bottom: 0;
  }
}

/* Nav wrapper — production renders an unstyled full-width div inside #nav, so the
   BS5 wrapper must not pick up the page container's width, gutters or auto margins. */
#nav > .container-fluid {
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 100%;
  }
  /* BS3 activated col-sm-* at 768px, BS5 activates them at 576px, so this band
     splits rows production still stacks (e.g. /news/ .col-sm-9 next to its
     sidebar). Neutralize the columns here instead of remapping ~20 templates. */
  [class*="col-sm-"] {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  /* With every column neutralized to full width, production's BS3 row is a plain
     block box here and its unfloated columns let the first child's margin-top and
     the last child's margin-bottom collapse through. BS5 flex items trap both:
     /locations/ measured 635px per location column on production against 670px on
     Dev, 20px on the page. Restore the block row and BS3's clearfix. Rows carrying
     col-xs-* keep BS3 widths in this band, and `.vertical-align` / the VR video rows
     are handled by their own rules below. */
  .row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> .video)) {
    display: block;
  }
  .row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> .video))::before,
  .row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> .video))::after {
    content: " ";
    display: table;
  }
  .row:not(.vertical-align):not(:has(> [class*="col-xs-"])):not(:has(> .video))::after {
    clear: both;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body .container {
    max-width: 750px !important;
    width: 750px;
  }
  /* BS3 activated col-md-* at 992px, BS5 activates them at 768px, so this band
     splits rows production still lays out on col-sm-* (e.g. the footer contact
     block .col-sm-12.col-md-5, full width on production, 5/12 here). Neutralize
     col-md-* the same way the 576-767.98px band neutralizes col-sm-*. */
  [class*="col-md-"] {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  /* ...but col-sm-* IS active at BS3's sm breakpoint (>=768px), so a col-sm-*
     on the same element still has to win. */
  [class*="col-md-"].col-sm-1 {
    width: 8.33333333%;
  }
  [class*="col-md-"].col-sm-2 {
    width: 16.66666667%;
  }
  [class*="col-md-"].col-sm-3 {
    width: 25%;
  }
  [class*="col-md-"].col-sm-4 {
    width: 33.33333333%;
  }
  [class*="col-md-"].col-sm-5 {
    width: 41.66666667%;
  }
  [class*="col-md-"].col-sm-6 {
    width: 50%;
  }
  [class*="col-md-"].col-sm-7 {
    width: 58.33333333%;
  }
  [class*="col-md-"].col-sm-8 {
    width: 66.66666667%;
  }
  [class*="col-md-"].col-sm-9 {
    width: 75%;
  }
  [class*="col-md-"].col-sm-10 {
    width: 83.33333333%;
  }
  [class*="col-md-"].col-sm-11 {
    width: 91.66666667%;
  }
  [class*="col-md-"].col-sm-12 {
    width: 100%;
  }

  /* VR experience rows (Adwords TPL + 3D Experience TPL): production keeps a nowrap
     flex row that shrinks its columns past the viewport; BS5 `.row > * { flex: 0 0 auto }`
     above prevents shrink and wraps instead. `:has(> .video)` scopes to the video+copy
     pair and skips the header `.row.vertical-align`. */
  .row.vertical-align:has(> .video) {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .row.vertical-align:has(> .video) > [class*="col-"] {
    flex-shrink: 1;
  }
}

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

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

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

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

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

@media (min-width: 768px) {
  #nav.navbar.navbar-expand-md {
    align-items: normal;
    display: block;
    padding-bottom: 0;
    padding-top: 0;
  }
  /* The theme's `body.elevations_by_wbs #nav { display: none }` is commented out, so
     production renders the main menu on the home page: #nav is 631.33x62 at 992px.
     Reinstating it here hid the whole menu on Dev and cost 48px of header height. */
  #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;
    border-top: 4px solid #333;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
  }
}

#nav.navbar-inverse .navbar-nav > .show > a,
#nav.navbar-inverse .navbar-nav > .show > a:hover,
#nav.navbar-inverse .navbar-nav > .show > a:focus {
  background-color: transparent;
  color: #75787b;
}

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

/* Nav dropdown typography — BS5 --bs-dropdown-font-size inherits html { font-size: 10px }
   on every viewport; production submenu links compute 14px/20px. Desktop card chrome
   (border, radius, shadow) measured on Contact dropdown @1200 against prod 2026-09-15. */
#nav .dropdown-menu {
  font-size: 14px;
  line-height: 20px;
  min-width: 160px;
}

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

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

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

/* Collapsed nav — production's BS3 data-api toggled .open on the parent li and
   scripts-global.js toggled .active on .navbar-toggle; BS5 uses aria-expanded on
   the toggler and .show on the dropdown instead. Pin measured prod values below 768px. */
@media (max-width: 767.98px) {
  #nav .navbar-nav > li > a,
  #nav .navbar-nav > .nav-item > a,
  #nav .navbar-nav .nav-link {
    display: block;
    padding: 10px;
  }

  #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;
    color: #75787b;
    font-weight: 700;
    text-decoration: none;
  }

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

  /* Mobile inline stack — override desktop card chrome; typography from global pin above. */
  #nav .dropdown-menu {
    border: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: none;
    margin: 0;
  }
}

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

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

/* /contact/ @md+ — GF line-height on this site (not sibling P3 sites): inputs/selects
   38px, textarea 21px, submit 14px. The prior 21.4286px pin came from bellevue/ki. */
@media (min-width: 768px) {
  body#contact #contact-form input:not([type="submit"]),
  body#contact #contact-form select {
    line-height: 38px !important;
  }
  body#contact #contact-form textarea {
    line-height: 21px !important;
  }
  body#contact #contact-form input[type="submit"],
  body#contact #contact-form .gform_button {
    line-height: 14px !important;
  }
}

/* md nav — BS5's .navbar-collapse has no clearfix, so the floated .navbar-nav escapes
   it and the collapse measures 0. Production sizes each nav to its own content: 82px
   for the header nav, whose menu wraps to two rows inside .col-sm-7, and 50px for the
   full-width #nav that /news/ and /design-partners/* render after </header>. A flat
   82px min-height gave that second nav 82px against production's 50px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #nav .navbar-collapse.navbar-1-collapse {
    display: block;
    height: auto;
    overflow: visible;
  }

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

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

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

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

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

/* Gravity Forms labels on /contact/: production line-height 20.02px at 576/768/992,
   so the 22.8571px pin added 2.84px per field row — 17px over the six rows at lg/xl/xxl
   and 31px over the eleven single-column rows at sm. */
body#contact #contact-form .gfield_label.gform-field-label {
  line-height: 20.02px;
}

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

/* Production pins BS3's `.navbar-nav > li > a { line-height: 20px }`. BS5 leaves the
   unitless 1.42857 body value, which resolves against the link's own 12px font-size
   to 17.14px: production measures 30px per nav link at 992px against 27.14px on Dev,
   5.72px over the two rows the menu wraps to, on every page that shares the header. */
#nav ul.navbar-nav > li > a {
  line-height: 20px;
}

/* wpautop wraps the `<!-- //col -->` and `<!-- //row -->` comments in stored page
   content in `<p>`. BS3's block row lets that empty paragraph overlap the floated
   columns, so its 10px bottom margin costs no height; BS5's flex row gives it a flex
   line of its own below the columns and counts the margin. Measured on /locations/ at
   992px: the location row is 670px on production against 680px on Dev. */
.row:has(> [class*="col-"]) > p:empty {
  margin-top: 0;
  margin-bottom: 0;
}

/* BS5 Reboot halves BS3's `address { margin-bottom: 20px }` to 1rem, which resolves
   against html's 10px font-size. Production measures #footer address.contact at
   margin-bottom 20px and 496x145 at every breakpoint. */
#footer address.contact {
  margin-bottom: 20px;
}

/* BS3 bootstrap.css carries `min-height: 1px` on every grid column; BS5 does not, so
   empty columns collapse to 0 on Dev. That drops 1px per stacked empty column
   (#footer .footer-top .col-sm-5), and because a zero-area box is left out of the
   document scroll width it also narrowed the captured page on /team_location/appleton/
   to 992px where production's empty, overflowing `.row.dmbs-content >
   .col-md-12.dmbs-main` measures 1px tall and 1022px wide, giving 1007px. */
[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
  min-height: 1px;
}

/* BS5 replaced BS3's `.nav-tabs` box model with `.nav-link`, which this markup does
   not carry, so the team tabs lost their padding, border and block display entirely:
   production measures each tab link 158.7x42 with `padding: 10px 15px` and a 1px
   transparent border, against 126.7x17 inline on Dev — 104px over the tab rows on
   /contact/new-home-remodeling-team/. The list border is #ddd on production, where BS5
   derives `--bs-nav-tabs-border-color` from this sheet's `--bs-border-color: #ccc`. */
.nav-tabs {
  display: block;
  border-bottom-color: #ddd;
}
.nav-tabs > li {
  position: relative;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  position: relative;
  display: block;
  margin-right: 2px;
  padding: 10px 15px;
  line-height: 20px;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

/* `.card` and the flex utilities are BS4/BS5 class names authored in stored page
   content; BS3 declared none of them, and no template in this theme emits them. The
   Customizer's Additional CSS holds a pasted BS5 card block whose `border: … solid
   var(--bs-card-border-color)` resolves through `--bs-border-color-translucent`, which
   nothing defines on production — the shorthand is invalid there, so production
   computes `0px none rgb(51, 51, 51)`, while BS5.3.8 defines it and paints 1px. That
   block is printed after this stylesheet, so the element selector is needed to outrank
   its `.card`. Measured on / from 576px to 1400px: production cards compute a 0px
   border and a 506px content box against 1px and 504px on Dev, which rewrapped the
   first card h3 from 45px to 75px and cost the page 31px at 576px. */
div.card {
  border: 0 none;
}
.card.align-items-start {
  align-items: normal !important;
}

/* Below 768px production leaves the team cards as unfloated blocks, so the first and
   last child margins collapse out of them; `.d-flex` makes them flex containers that
   trap 65px per card. Production measures `display: block` here against `flex` on Dev.
   From 768px up the `float: left` above establishes the same block formatting context
   as flex, so the utility costs nothing and production's own float boundary is where
   this stops. */
@media (max-width: 767.98px) {
  .facetwp-template .tab-pane > .product.d-flex {
    display: block !important;
  }
}

/* Nav links — BS5 reboot `a:hover, a:focus { text-decoration: underline }` must not
   apply in #nav (desktop + mobile). */
@media (max-width: 767.98px) {
  #nav .navbar-collapse,
  #nav.navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {
    background-color: #f7f7f7 !important;
  }

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

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