-- */
.rwd-break,
.rwd-line {
display: block;
}
@media screen and (max-width: 1199px) {
.rwd-break,
.rwd-line {
display: inline;
}
}
/* -------------------------------------- */
/* -- locations styles -- */
#locations .cform-location .col-sm-6 {
width: 100% !important;
}
#locations h3 {
color: #75787b;
font-size: 24px;
line-height: 24px;
margin: 0 0 15px;
padding: 0;
}
#locations .product-img {
margin-bottom: 1.71429rem;
}
#locations a i.fa-envelope {
background-color: #c8c0ab;
border-radius: 24px;
color: #766b52;
font-size: 20px;
height: 40px;
padding: 8px;
text-align: center;
width: 40px;
}
/* -------------------------------------- */
/* -- slideshow styles -- */
#slideshow h3 {
margin: 0;
padding: 0;
font-size: 24px;
}
#slideshow .master-slider-parent {
margin-bottom: 30px;
}
@media screen and (max-width: 1199px) {
#slideshow h3 {
margin: 0;
padding: 0;
}
}
@media screen and (max-width: 767px) {
#slideshow h3 {
margin-top: 20px;
}
}
/* -------------------------------------- */
/* -- fix email signup input -- */
#mc_embed_signup input.email {
width: 100% !important;
}
/* -------------------------------------- */
/* -- vertical align -- */
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
@media only screen and (max-width: 1280) and (min-width: 992px) {
#tour-history h3 {
color: #fff;
font-size: 30px;
line-height: 30px;
margin: 20px 0 30px 0;
padding: 0;
}
#tour-history p {
color: #fff;
font-size: 13px;
line-height: 18px;
}
#tour-history h3.under::after {
background-color: none;
bottom: 0;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
}
}
@media screen and (max-width: 991px) {
.vertical-align {
display: inherit;
}
}
/* -------------------------------------- */
/* -- Read more styles -- */
/*a {
color: #0254EB
}
a:visited {
color: #0254EB
}*/
a.morelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
/*.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}*/
/* -------------------------------------- */
/* -- Global Google Map Styles -- */
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------- */
/* -- Global Breadcrumb Styles -- */
#breadcrumbs {
display: none;
}
#breadcrumbs.breadcrumbs-con {
margin: 0;
padding: 0;
}
#breadcrumbs .breadcrumbs-title {
color: #fff;
font-family: "Montserrat", serif;
font-size: 52px;
font-weight: 700;
line-height: 52px;
margin-top: -40px;
padding: 0;
text-transform: uppercase;
}
#breadcrumbs p,
#breadcrumbs p a {
color: #a4a4a4;
font-family: 'Montserrat', serif;
font-size: 13px;
line-height: 13px;
margin: 0;
padding: 0;
letter-spacing: 1px;
}
/* -------------------------------------- */
/* -- Global Flexbox Styles -- */
.equal {
display: flex;
flex-wrap: wrap;
}
.equal>div[class*='col-'] {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.equal2,
.equal2>div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
}
/* -- Flexbox Align Vertical -- */
.Aligner {
display: flex;
align-items: center;
min-height: 24em;
justify-content: center;
}
.Aligner-item {
flex: 1;
}
.Aligner-item-top {
align-self: flex-start;
}
.Aligner-item-bottom {
align-self: flex-end;
}
.Aligner-item-fixed {
flex: none;
max-width: 50%;
}
@media screen and (min-width: 768px) {
.Aligner {
display: inherit;
}
}
/* -------------------------------------- */
/* -- Global Top Nav Styles -- */
body.elevations_by_ki #nav {
display: none;
}
@media screen and (min-width: 768px) {
/* right align nav but keep li left in order */
#nav ul.navbar-nav {
float: right;
margin: 0;
text-align: right;
}
#nav ul.navbar-nav>li {
display: inline-block;
float: none;
text-align: right;
}
}
#nav .navbar-collapse {
padding-left: 0px;
padding-right: 0px;
}
#nav.navbar {
border: 1px solid transparent;
display: block;
margin-bottom: 0;
min-height: 50px;
position: relative;
border-radius: 0;
}
#nav.navbar-default {
background-color: #fff;
border-color: #fff;
}
#nav.navbar-inverse {
background-color: #fff;
border-color: #fff;
margin-top: 10px;
}
.navbar-nav>li>a {
color: #333;
}
/* active parent */
#nav.navbar-inverse .navbar-nav>.active>a,
#nav.navbar-inverse .navbar-nav>.active>a:hover,
#nav.navbar-inverse .navbar-nav>.active>a:focus {
/*background-color: #75787b;*/
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #333;
font-family: 'Montserrat', serif;
text-transform: uppercase;
opacity: 1;
}
/* non active parent */
#nav.navbar-inverse .navbar-nav>li>a {
font-family: 'Montserrat', serif;
text-transform: uppercase;
color: #333;
opacity: .5;
padding: 5px;
}
#nav.navbar-inverse .navbar-nav>li>a:hover {
color: #75787b;
opacity: 1;
}
/* -------------------------------------- */
/* --#nav Media Query Styles
green #75787b -- */
/* space between top parent nav links */
@media only screen and (min-width: 1200px) {
#nav .navbar-nav>li {
border-right: 1px solid #eee;
margin-right: 10px;
padding-right: 10px;
}
/*
#nav .navbar-nav > li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
*/
/* end @media 768px */
}
/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
/* hover open dropdown */
#nav .dropdown-menu li:hover .sub-menu {
visibility: visible;
}
#nav .dropdown:hover .dropdown-menu {
display: block;
}
#nav .navbar-nav>li {
border-right: 1px solid #eee;
margin-right: 5px;
padding-right: 5px;
}
/*#nav .navbar-nav > li {
float: right;
}*/
/*
#nav .navbar-nav > li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
*/
/* end @media 768px */
}
/* Small Devices, Tablets */
@media only screen and (max-width: 992px) {
#nav .navbar-nav>li {
border-right: 1px solid #eee;
margin-right: 5px;
padding-right: 5px;
}
#nav .navbar-nav>li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width: 767px) {
#nav .navbar-collapse {
border-color: #905849;
background: #f7f7f7;
}
#nav .dropdown-menu>li>a {
color: #ccc;
}
#nav.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #fff;
background-color: #f7f7f7;
}
#nav.navbar-inverse .navbar-nav>li>a {
color: #555;
}
#nav.navbar-inverse .navbar-nav>li>a:hover {
color: #75787b;
opacity: 1;
}
#nav .dropdown-menu>.active>a,
#nav .dropdown-menu>.active>a:hover,
#nav .dropdown-menu>.active>a:focus {
background: none !important;
color: #75787b !important;
font-weight: bold;
}
#nav.navbar-inverse .navbar-nav>.active>a,
#nav.navbar-inverse .navbar-nav>.active>a:hover,
#nav.navbar-inverse .navbar-nav>.active>a:focus {
background: none !important;
color: #75787b !important;
font-weight: bold;
}
#nav.navbar-inverse .navbar-nav>li.current-page-parent>a {
background-color: #f1f1f1 !important;
color: #75787b !important;
font-weight: bold;
}
#nav.navbar-inverse .navbar-nav>.open>a,
#nav.navbar-inverse .navbar-nav>.open>a:hover,
#nav.navbar-inverse .navbar-nav>.open>a:focus {
background-color: #fff !important;
color: #75787b !important;
opacity: 1;
font-weight: bold;
}
#nav.navbar-inverse {
background-color: #75787b !important;
border: none;
}
#nav .navbar-nav .open .dropdown-menu {
background-color: #fff !important;
}
/* end @media 768px */
}
#nav .dropdown-menu>li>a {
clear: both;
color: #333;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
#nav .dropdown-menu>li>a:hover,
#nav .dropdown-menu>li>a:focus {
background-color: #eee;
color: #75787b;
text-decoration: none;
}
#nav .dropdown-menu>li>a {
clear: both;
color: #494949;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
#nav .dropdown-menu>.active>a,
#nav .dropdown-menu>.active>a:hover,
#nav .dropdown-menu>.active>a:focus {
background-color: #75787b;
color: #fff;
outline: 0 none;
text-decoration: none;
}
#nav.navbar-inverse .navbar-nav>.open>a,
#nav.navbar-inverse .navbar-nav>.open>a:hover,
#nav.navbar-inverse .navbar-nav>.open>a:focus {
background-color: #fff;
color: #333;
opacity: 1;
}
#nav.navbar-inverse .navbar-nav>li.current-page-parent>a {
background-color: #fff;
color: #333;
font-family: 'Montserrat', serif;
opacity: 1;
text-transform: uppercase;
}
/* -------------------------------------- */
/* -- Navbar Hamburger Toggle to x -- */
#nav.navbar-inverse .navbar-toggler .icon-bar,
#nav.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
#nav .navbar-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;
line-height: 1.42857143;
padding: 6px 12px;
border-radius: 4px;
/*font-weight: 700;*/
border: none;
text-transform: uppercase;
}
/* BS3 .btn carried white-space: nowrap; BS5 dropped it, so long sidebar labels
(e.g. masonite subscribe btn) wrap and grow ~37px taller. Scoped to the blog
sidebar — sitewide .btn nowrap regressed /contact/ @576 (−263px doc height). */
.blog .sidebar .btn,
p.subscribebtn > a.btn.btn-search,
aside#search-3 .search-form .input-group .input-group-btn > .btn {
white-space: nowrap;
}
.btn-lg {
padding: 10px 16px;
border-radius: 6px;
font-size: 14px;
line-height: 1.3333333;
}
.btn-default {
background-color: #fff;
/*border: 1px solid #fff;*/
border: none;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 50px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
.btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
.btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
/* button styles */
#header-bottom .btn-primary {
color: #FFFFFF;
background-color: #999;
border: none;
}
.btn-primary {
color: #FFFFFF;
background-color: #1A765C;
border: none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.active:focus,
.open .dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #75787B !important;
border-color: #1A765C;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #1A765C;
border-color: #1A765C;
}
.btn-primary .badge {
color: #1A765C;
background-color: #FFFFFF;
}
body .btn-green,
.btn-green {
color: #ffffff !important;
background-color: #1a765c;
border: 1px solid transparent;
}
.btn-green:focus,
.btn-green:active,
.btn-green.active,
.open .dropdown-toggle.btn-green {
color: #ffffff;
background-color: #1a765c;
border-color: #1a765c;
}
.btn-green:hover {
color: #fff;
border: 1px solid #75787b;
background-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: #1a765c;
border-color: #1a765c;
}
.btn-green .badge {
color: #1a765c;
background-color: #ffffff;
}
.btn-orange,
p .btn-orange {
background-color: #dc8927;
border-color: #dc8927;
color: #ffffff;
font-weight: 200;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
color: #ffffff;
background-color: #dc8927;
border-color: #dc8927;
}
.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
background-image: none;
}
.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {
background-color: #333;
border-color: #333;
}
.btn-orange .badge {
color: #dc8927;
background-color: #ffffff;
}
.btn-maroon,
p .btn-maroon {
background-color: #905849;
border-color: #905849;
color: #ffffff;
font-weight: 200;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.btn-maroon:hover,
.btn-maroon:focus,
.btn-maroon:active,
.btn-maroon.active,
.open .dropdown-toggle.btn-maroon {
color: #ffffff;
background-color: #575023;
border-color: #575023;
}
.btn-maroon:active,
.btn-maroon.active,
.open .dropdown-toggle.btn-maroon {
background-image: none;
}
.btn-maroon.disabled,
.btn-maroon[disabled],
fieldset[disabled] .btn-maroon,
.btn-maroon.disabled:hover,
.btn-maroon[disabled]:hover,
fieldset[disabled] .btn-maroon:hover,
.btn-maroon.disabled:focus,
.btn-maroon[disabled]:focus,
fieldset[disabled] .btn-maroon:focus,
.btn-maroon.disabled:active,
.btn-maroon[disabled]:active,
fieldset[disabled] .btn-maroon:active,
.btn-maroon.disabled.active,
.btn-maroon[disabled].active,
fieldset[disabled] .btn-maroon.active {
background-color: #905849;
border-color: #905849;
}
.btn-maroon .badge {
color: #905849;
background-color: #ffffff;
}
.btn-black,
p .btn-black {
background-color: #777;
border-color: #777;
color: #ffffff;
font-weight: 200;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
color: #ffffff;
background-color: #75787b;
border-color: #75787b;
}
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
background-image: none;
}
.btn-black.disabled,
.btn-black[disabled],
fieldset[disabled] .btn-black,
.btn-black.disabled:hover,
.btn-black[disabled]:hover,
fieldset[disabled] .btn-black:hover,
.btn-black.disabled:focus,
.btn-black[disabled]:focus,
fieldset[disabled] .btn-black:focus,
.btn-black.disabled:active,
.btn-black[disabled]:active,
fieldset[disabled] .btn-black:active,
.btn-black.disabled.active,
.btn-black[disabled].active,
fieldset[disabled] .btn-black.active {
background-color: #333;
border-color: #333;
}
.btn-black .badge {
color: #333;
background-color: #ffffff;
}
.btn-search {
background-color: #75787b;
border-color: #75787b;
color: #fff;
}
.btn-search.focus,
.btn-search:focus {
background-color: #31b0d5;
border-color: #1b6d85;
color: #fff;
}
.btn-search:hover {
background-color: #75787b;
border-color: #75787b;
color: #fff;
}
.jetpack_subscription_widget input[type="submit"] {
background-color: #75787b;
border: medium none;
color: #fff;
padding: 10px 15px;
font-family: "Montserrat", sans-serif;
font-size: 18px;
font-weight: 700;
border-radius: 6px;
line-height: 1.33333;
padding: 10px 16px;
}
.jetpack_subscription_widget input[type="submit"]:focus {
background-color: #75787b;
border-color: #75787b;
color: #fff;
}
.jetpack_subscription_widget input[type="submit"]:hover {
background-color: #75787b;
border-color: #75787b;
color: #fff;
}
.jetpack_subscription_widget h2 {
color: #75787b;
content: "";
font-family: 'Montserrat', serif;
font-size: 28px;
font-weight: 400;
line-height: 28px;
margin-bottom: 10px;
padding: 0;
}
/* -------------------------------------- */
/* -- Interior Page Styles -- */
hr {
border-color: #c8c0ab;
margin-bottom: 20px;
margin-top: 20px;
}
/*
.pro-tog{
display: none;
}
body.professionals .pro-tog{
display: inline;
}
.home-tog{
display: none;
}
body.homeowners .home-tog{
display: inline;
}
*/
/* header top */
/*#toggle a {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
color: #ffffff;
font-family: "Montserrat",sans-serif;
font-size: 10px;
font-weight: 700;
padding: 7px 15px 5px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#toggle a.pro-tog {
background-color: #75787b;
opacity: 0.5;
padding: 7px 25px 5px 15px;
z-index: 7;
}
#professionals #toggle a.pro-tog {
background-color: #75787b;
opacity: 1;
padding: 7px 25px 5px 15px;
z-index: 9;
}
#toggle a.pro-tog:hover {
opacity: 1;
}
#toggle a.pro-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
#toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: .7;
padding: 7px 20px 5px;
position: relative;
z-index: 7;
}
#toggle a.home-tog:hover {
opacity: 1;
}
#homeowner #toggle a.home-tog {
background-color: #dc8927;
margin-left: -20px;
opacity: 1;
padding: 7px 20px 5px;
position: relative;
z-index: 9;
}
#toggle a.home-tog img.icon-svg {
display: inline-block;
height: 15px;
margin-right: 5px;
position: relative;
top: -1px;
width: 14px;
}
*/
#header-top li {
padding: 0;
}
#header-top {
margin-top: 30px;
}
#header-bottom {
margin: 30px 0px 30px;
}
div#social li {
padding: 5px 2px;
}
div#social a i {
background-color: #c8c0ab;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
color: #75787b;
font-size: 12px;
height: 24px;
padding: 6px;
text-align: center;
width: 24px;
}
div#header-bottom a.btn-scheduleanapp {
background-color: #ffffff;
border: 2px solid #75787b;
color: #75787b;
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 700;
padding: 10px 15px;
}
div#header-bottom a.btn-scheduleanapp:hover {
background-color: #75787b;
border: 2px solid #75787b;
color: #ffffff;
}
@media only screen and (max-width: 768px) {
div#header-bottom .col-sm-7.col-md-8 {
padding-right: 0;
padding-left: 0;
}
}
/* banner */
#banner .banner-img {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
height: 400px;
}
#banner {
position: relative;
text-align: center;
margin-bottom: 0px;
}
#banner .banner-con-sm {
color: #494949;
font-size: 16px;
left: 50%;
letter-spacing: 1px;
line-height: 24px;
position: absolute;
text-align: center;
top: 280px;
transform: translate(-50%, -50%);
width: 600px;
}
#banner .banner-con {
background-image: url("/images/banner/banner-title-bgshape-lg.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 1;
width: 950px;
height: 200px;
}
#brands #banner .banner-con,
#events #banner .banner-con,
#gallery #banner .banner-con,
.new-home-remodeling-team #banner .banner-con {
background-image: url("/images/banner/banner-title-bgshape-lg.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 170px;
left: 50%;
opacity: 1;
position: absolute;
top: 35%;
transform: translate(-50%, -50%);
width: 950px;
}
#products #banner .banner-con {
background-image: url("/images/banner/banner-title-bgshape-lg.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 120px;
left: 50%;
opacity: 1;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
width: 950px;
}
#banner .banner-con h1 {
font-family: "Montserrat", sans-serif;
font-size: 25px;
line-height: 25px;
font-weight: 700;
color: #1a765c;
margin: 0;
padding: 60px;
width: 100%;
height: 100%;
letter-spacing: 2px;
}
#banner .banner-con h1 span {
font-family: 'Montserrat', serif;
font-size: 35px;
line-height: 35px;
color: #75787b;
letter-spacing: normal;
}
#title {
margin-bottom: 60px;
}
#title .title-con h1 {
font-family: "Montserrat", sans-serif;
font-size: 40px;
line-height: 45px;
font-weight: 700;
color: #75787b ;
margin: 0;
padding: 40px 0 20px;
width: 100%;
height: 100%;
letter-spacing: 2px;
text-align: center;
}
#title .title-con h1 span {
font-family: 'Montserrat', serif;
font-size: 35px;
line-height: 35px;
color: #1a765c;
letter-spacing: normal;
text-align: center;
}
#title .title-con>hr {
border-color: #1a765c;
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: #1a765c;
font-family: 'Montserrat', serif;
font-size: 35px;
height: 100%;
letter-spacing: normal;
line-height: 35px;
margin: 0;
padding: 40px;
width: 100%;
}
/* header social */
header div.social .list-inline {
list-style: outside none none;
margin-left: 15px;
padding-left: 0;
}
header div.social li {
margin-left: 0px;
margin-top: 0;
padding: 0;
}
header div.social a i {
background-color: #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 address {
margin-bottom: 0;
}
#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;
margin: 0px;
padding: 10px 0;
}
#footer .footer-bottom p {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 50px;
color: #75787b;
}
#footer .footer-top label {
font-family: 'Montserrat', sans-serif;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;
max-width: 100%;
text-transform: uppercase;
color: #75787b !important;
}
#footer a {
color: #75787b;
}
#footer h3,
#products #footer h3 {
/*color: #fff;*/
font-size: 16px;
line-height: 15px;
margin: 0 0 20px;
padding: 0;
}
#footer div.social li {
margin-left: 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: #1a765c;
border: 1px solid #1a765c;
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-closeup2.jpg");
background-position: top right;
background-repeat: no-repeat;
/*background-size: cover;*/
}
#professionals #gallery-bg {
background-image: url("/wp-content/uploads/homeowner-pros-closeup2.jpg");
background-position: top right;
background-repeat: no-repeat;
/*background-size: cover;*/
}
#homeowner #gallery p,
#professionals #gallery p {
color: #fff;
font-size: 16px;
line-height: 25px;
}
#homeowner #gallery h3,
#professionals #gallery h3 {
color: #fff;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
#homeowner #gallery h3.under::after,
#professionals #gallery h3.under::after {
background-color: #fff;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#homeowner #gallery .gallery-img {
background-image: url("/wp-content/uploads/homeowner-pros-kitchen1.jpg");
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height: 422px;
position: absolute;
left: 0;
top: 0;
width: 50%;
}
#professionals #gallery .gallery-img {
background-image: url("/wp-content/uploads/homeowner-pros-kitchen1.jpg");
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height: 422px;
position: absolute;
left: 0;
top: 0;
width: 50%;
}
#homeowner #gallery .gallery-con,
#professionals #gallery .gallery-con {
/*padding-top: 40px;*/
margin-top: 60px;
margin-left: 40px;
}
#homeowner #gallery .btn-default,
#professionals #gallery .btn-default {
background-color: #fff;
border: 1px solid #fff;
color: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#homeowner #gallery .btn-default:before,
#professionals #gallery .btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#homeowner #gallery .btn-default:hover,
#professionals #gallery .btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
/*- tour */
#tour {
background: rgba(27, 119, 93, .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-closeup1.jpg");
background-position: top left;
background-repeat: no-repeat;
/* background-size: cover; */
}
#tour p {
color: #fff;
font-size: 16px;
line-height: 25px;
}
#tour h3 {
color: #fff;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
#tour h3.under::after {
background-color: #fff;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#tour .tour-img {
background-image: url("/wp-content/uploads/homeowner-pros-kitchen2.jpg");
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height: 422px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
#tour .tour-con {
padding-right: 50px;
margin-top: 60px;
}
#tour .col-sm-6 {
padding-right: 0;
}
#tour .btn-default {
background-color: #fff;
border: 1px solid #fff;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#tour .btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#tour .btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
/*- intro */
#intro {
background: #fff;
color: #494949;
padding: 20px 0;
}
#intro p {
color: #494949;
font-size: 16px;
line-height: 25px;
}
#intro .intro-col1 {
padding-right: 50px;
}
#intro .intro-col1 h3,
#intro .intro-col2 h3 {
color: #75787b;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
#intro .intro-col1 h3.under::after,
#intro .intro-col2 h3.under::after {
background-color: #75787b;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#intro .intro-col2 {
border: 1px solid #dc8927;
padding: 0 50px 30px;
position: relative;
border-radius: 30%/10%;
-moz-border-radius: 30%/10%;
-webkit-border-radius: 30%/10%;
top: 15px;
}
#intro .intro-col2.unround-bottom-corners {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#intro .intro-col2 h3 {
background-color: #fff;
clear: both;
color: #dc8927;
display: inline-block;
font-size: 20px;
left: 50%;
line-height: 20px;
margin-top: 0px;
margin-bottom: 20px;
padding: 0;
position: relative;
text-align: center;
top: 5%;
transform: translate(-50%, -50%);
width: 70%;
}
#intro .intro-col2 p.intro-btn {
text-align: center;
}
#intro .intro-col2 .btn-default {
background-color: #dc8927;
border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#intro .intro-col2 .btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#intro .intro-col2 .btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
/* -------------------------------------- */
/* --Media Query Styles -- */
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
#footer div.social li {
/*margin-left: 25px;*/
margin-top: 10px;
padding: 0;
}
}
@media only screen and (min-width: 1280px) {
/* bootstrap adjust desktop width to 1280px */
.container {
width: 1280px;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
#footer div.social li {
/*margin-left: 10px;*/
/*margin-top: 40px;*/
padding: 0;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
div.wpcf7 .form-inline .form-group {
max-width: 100% !important;
}
#intro .intro-col1 {
margin-bottom: 30px;
padding-right: 0;
}
#tour {
/*background: #eee8dd none repeat scroll 0 0;*/
/*color: #494949;*/
height: auto;
position: relative;
}
#tour .tour-con {
padding-right: 0;
}
#tour .tour-img,
#gallery .gallery-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;
margin-bottom: 10px;
}
#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: 16px;
line-height: 25px;
}*/
#products h3 {
color: #75787b;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
#products h3.under::after {
background-color: #75787b;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#products .gallery-img img {
object-fit: cover;
}
#products .gallery-con {
/*padding-top: 40px;*/
}
#products .btn-default {
background-color: #dc8927;
border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#products .btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#products .btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
.products #banner .banner-con h1 {
color: #75787b;
font-family: 'Montserrat', serif;
font-size: 35px;
line-height: 35px;
height: 100%;
letter-spacing: normal;
margin: 0;
padding: 40px;
width: 100%;
}
/* -------------------------------------- */
/* -- GALLERY Styles -- */
#gallery .product {
border-bottom: 0;
margin: 0 0 3.14286rem;
padding-bottom: 0;
}
#gallery h3.product-title {
display: none;
}
#gallery .product-wrap {
border: 1px solid #1a765c;
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: #1a765c;
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 #1a765c;
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: #1a765c;
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: #1a765c;
}
@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: #1a765c;
border: 1px solid #1a765c;
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;
}
div#contact-form .btn-primary:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
div#contact-form .btn-primary:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
div#sched .btn-primary {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;
color: #75787b;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
div#sched .btn-primary:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
div#sched .btn-primary:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
div#sched p {
color: #fff;
}
#mc_embed_signup {
/*background: rgba(0, 0, 0, 0.03);*/
background: #b1b3b3;
margin-top: 0 !important;
padding: 10px 20px 40px 20px;
}
#mc_embed_signup input.email {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
}
div#contact-us {
border-top: 1px solid #c8c0ab;
margin: 10px 0 0;
padding: 10px 0 0;
}
#contact-form p {
color: #fff;
}
#contact-form a {
color: #fff;
text-decoration: underline;
}
#contact-form a:hover {
color: #75787b;
}
#contact-form label {
/*color: #fff;*/
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
#contact-form {
background-image: url("/images/bg-contactform.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 40px;
padding-bottom: 0px;
}
div#contact-form h3 {
color: #fff;
}
div#contact-form h3::after {
background-color: #fff;
}
div.wpcf7 .screen-reader-response {
border: 0 none;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
div.wpcf7 {
margin: 0;
padding: 0;
}
div#contact-us div#map-container {
float: left;
width: 50%;
}
div#contact-us div#map-container div#map {
background-image: url("/images/contact/map.jpg");
background-position: -210px center;
background-repeat: no-repeat;
background-size: cover;
height: 60%;
overflow: hidden;
position: relative;
}
div#contact-us div#map-container div#map a.map {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
div#contact-us div#map-container div#map div#contact-in {
background-color: rgba(255, 255, 255, 0.9);
height: 100%;
padding: 0 30px;
position: absolute;
width: 340px;
z-index: 99;
}
div#contact-us div#map-container div#map div#contact-in a {
color: #494949;
height: auto;
left: inherit;
position: relative;
text-decoration: none;
top: inherit;
width: inherit;
}
div#contact-us div#map-container div#map div#contact-in div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div#contact-us div#sched {
background-color: #d4602f;
background-image: url("/images/contact/schedule-visit.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 40%;
position: relative;
}
div#contact-us div#sched div {
left: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div#contact-us div#sched h3 {
color: #fff;
}
div#contact-us div#sched h3::after {
background-color: #fff;
}
div#contact-us div#contact-form form {
float: right;
max-width: 640px;
padding: 60px 40px;
width: 100%;
}
div#contact-us div#contact-form form input {
margin: 0 0 30px;
/*padding-left: 10px;*/
}
div#contact-us div#contact-form form select {
-moz-appearance: none;
background-color: #ffffff;
background-image: url("/images/contact/tiny-tri.png");
background-position: 95% center;
background-repeat: no-repeat;
/*border-radius: 0;*/
margin: 0 0 25px;
position: relative;
text-indent: 0px;
}
div#contact-us div#map-container div#map div#contact-in h3 {
color: #d4602f;
}
div#contact-us div#map-container div#map div#contact-in h3::after {
background-color: #d4602f;
}
.group::after,
.row {
clear: both;
}
.group::after,
.group::before {
content: "";
display: table;
}
/* -------------------------------------- */
/* -- Contact - Media Query Styles -- */
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {}
@media only screen and (min-width: 1280px) {
/* bootstrap adjust desktop width to 1280px */
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
div#contact-us div#contact-form {
float: none;
width: 100%;
}
div#contact-us div#map-container {
float: none;
width: 100%;
}
div#contact-us div#contact-form form {
float: none;
max-width: inherit;
padding: 30px;
width: 100%;
}
div#contact-us div#contact-form form .col-sm-6 {
min-height: 1px;
padding-left: 0;
padding-right: 0;
position: relative;
}
div#contact-us div#map-container div#map a {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
div#contact-us div#map-container div#map div#contact-in {
height: auto;
padding: 0 30px;
position: relative;
width: 60%;
z-index: 99;
}
div#contact-us div#map-container div#map div#contact-in div {
padding: 30px 15px;
position: relative;
top: 0;
transform: none;
}
div#contact-us div#map-container div#map {
height: auto;
}
div#contact-us div#map-container {
float: none;
height: auto !important;
width: 100%;
}
div#contact-us div#contact-form {
float: none;
height: auto !important;
width: 100%;
}
div#contact-us div#sched {
height: auto;
}
div#contact-us div#sched div {
left: 0;
padding: 40px;
position: relative;
top: 0;
transform: none;
}
div#contact-us .row {
margin-left: 0;
margin-right: 0;
}
/* end @media 768px */
}
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
/* end @media 480px */
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
/* end @media 320px */
}
/* -------------------------------------- */
/* -- Experience Styles -- */
/*- exp */
#exp-sched {
background: #d5d3c8;
color: #494949;
height: 345px;
position: relative;
padding: 20px 0;
}
#exp-sched p {
color: #494949;
font-size: 16px;
line-height: 25px;
}
#exp-sched h3 {
color: #75787b;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
#exp h3 {
color: #75787b;
}
#exp-sched h3.under::after {
background-color: #75787b;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#exp-sched .exp-sched-con {
padding-right: 40px;
padding-top: 40px;
position: relative;
}
#exp-sched .exp-sched-img {
/*background-image: url("/images/homeowners/tour.jpg");*/
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 345px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
#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%);
}*/
/* -------------------------------------- */
/* -- VR Experience Styles -- */
#tour-history {
background: #1a765c;
color: #fff;
/* height: 400px;*/
position: relative;
/*padding: 20px 0;*/
}
#tour-history p {
color: #fff;
font-size: 16px;
line-height: 25px;
}
#tour-history h3 {
color: #fff;
font-size: 40px;
line-height: 40px;
margin: 0 0 40px 0;
padding: 0;
}
/*
#tour-history a:link {
color: #fff;
text-decoration: underline;
}*/
#tour-history h3.under::after {
background-color: #fff;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#tour-history .tour-history-con {
padding-right: 40px;
padding-left: 40px;
position: relative;
}
/*#tour-history .tour-history-img {
background-image: url("/images/homeowners/tour.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 400px;
position: absolute;
left: 0;
top: 0;
width: 50%;
}*/
/* #tour-history .tour-history-con {
padding-left: 50px;
}*/
#tour-history .col-sm-6 {
padding-left: 0;
}
#tour-history .tour-history-con .btn-green {
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: 0;
padding: 10px 20px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#tour-history .tour-history-con .btn-green: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 .tour-history-con .btn-green:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
@media only screen and (max-width: 992px) {
#tour-history {
background: #1a765c;
color: #fff;
height: auto;
position: relative;
padding: 0;
}
#tour-history .col-sm-6 {
padding-left: inherit;
width: 100%;
}
/*#tour-history .tour-history-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 400px;
position: relative;
left: 0;
top: 0;
width: 100%;
}*/
#tour-history .tour-history-con {
position: relative;
top: inherit;
/*padding: 20px;*/
}
/* end max-width : 992px*/
}
/* -------------------------------------- */
/* -- Events Styles -- */
#events .wcf-form-wrapper hr {
border-color: #c8c0ab;
margin-bottom: 40px;
margin-top: 40px;
}
#events .event-image-con {
position: relative;
}
#events .event-image-date {
background-image: url("/images/events/e-poli.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 80% auto;
bottom: -50px;
height: auto;
padding: 15px 0 40px;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
#events h3.event-title {
color: #75787b;
font-size: 40px;
line-height: 40px;
margin: 0 0 20px;
}
#events h3.under::after {
background-color: #75787b;
bottom: 0;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
#events .event-image-date p {
color: #75787b;
font-family: 'Montserrat', sans-serif;
font-size: 35px;
font-weight: 700;
padding: 10px 0 0;
}
#events .event-image {
position: relative;
}
#events .event-image img {}
#events .event-details.well {
background-color: #fff;
border: 1px solid #c8c0ab;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
margin: 20px 0;
min-height: 20px;
padding: 19px;
}
#events .event-details p {
text-align: center;
}
#events .event-details i.fa {
color: #75787b;
font-size: 60px;
}
#events .event-rsvp a {
color: #FFF;
}
#events .event-rsvp .btn-default {
background-color: #dc8927;
border: 1px solid #dc8927;
/*border-radius: 50% / 25%;
-moz-border-radius: 50% / 25%;
-webkit-border-radius: 50% / 25%;*/
color: #fff;
font-size: 16px;
line-height: 16px;
margin: 20px 0;
padding: 9px 70px;
position: relative;
text-align: center;
text-indent: 0.1em;
text-transform: uppercase;
}
#events .event-rsvp .btn-default:before {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: inherit;
/*border-radius: 25% / 50%;
-moz-border-radius: 25% / 50%;
-webkit-border-radius: 25% / 50%;*/
}
#events .event-rsvp .btn-default:hover {
color: #fff;
border: 1px solid #75787b;
background-color: #75787b;
}
#events .event-details .e-line-dot::after {
background-image: url("/images/events/e-line-dot.svg");
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 140px;
position: absolute;
right: -10px;
top: 0;
width: 20px;
}
/* -------------------------------------- */
/* -- Booking "bookly" Styles -- */
#booking .booking-con {
margin-bottom: 50px;
}
#booking .booking-con h3 {
color: #75787b;
}
#booking .booking-con .bookly-form {
border: 1px solid #eee;
margin: 0 auto;
padding: 20px;
}
/* -------------------------------------- */
/* -- Blog Styles -- */
.blog #banner {
margin-bottom: 50px;
}
.blog h2,
.blog h2 a {
content: "";
color: #75787b;
padding: 0px;
margin-bottom: 10px;
font-size: 28px;
font-weight: 400;
font-family: 'Montserrat', serif;
line-height: 28px;
}
/*.blog .sidebar a{
content: "";
color: #DC8927;
}*/
.blog .sidebar h3 {
content: "";
color: #75787b !important;
border-bottom: 1px solid #777;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 18px !important;
font-weight: 400;
font-family: 'Montserrat', serif;
line-height: 20px;
}
.blog .sidebar h3.under::after {
background-color: #75787b;
bottom: -20px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 170px;
}
.blog .sidebar ul {
margin: 0;
padding: 0;
}
.blog .sidebar ul li {
list-style: outside none none;
margin-bottom: 10px;
padding: 0;
}
.blog .sidebar .tagcloud a {
margin-right: 10px;
color: #DC8927;
font-size: 12px !important;
}
.blog .sidebar h3.sidebar-title {
/*background-color: #fff;
clear: both;
display: inline-block;
font-size: 20px;
left: 50%;
line-height: 20px;
margin-bottom: 20px;
margin-top: 0;
padding: 0;
position: relative;
text-align: center;
top: 5%;
transform: translate(-50%, -50%);
width: 70%;
border: none;
color: #75787b !important;*/
display: none;
}
/*.blog .sidebar{
border: 1px solid #75787b;
padding: 0 50px 30px;
position: relative;
border-radius: 30%/10%;
-moz-border-radius: 30%/10%;
-webkit-border-radius: 30%/10%;
top: 15px;
}*/
.blog .sidebar {
border: medium none;
border-radius: 30% / 10%;
padding: 0;
position: relative;
top: 0;
}
.blog .sidebar.unround-bottom-corners {
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.blog .subscribebtn {
border-top: 1px solid #75787b;
margin-top: 30px;
padding-top: 30px;
text-align: center;
}
.blog .sidebar .subscribebtn a,
#blog a.btn-search {
color: #fff;
}
.blog article {
border-bottom: 1px solid #75787b;
margin-bottom: 40px;
padding-bottom: 40px;
}
#blog .screen-reader-text,
#blog .all-posts .screen-reader-text {
clip: inherit;
height: inherit;
position: relative !important;
width: inherit;
}
#blog .blogsingle-con,
#blog .blogsearch-con {
margin-bottom: 50px;
margin-top: 50px;
}
/* -------------------------------------- */
/* -- Product brand pages -- */
#products.cabinetry .products-img-wrap {
position: relative
}
#products.cabinetry .products-img-logo {
position: absolute;
bottom: 0;
left: 0;
}
#products.cabinetry .products-img-logo {
background-image: url("/images/products/product-logo-bgshape.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
bottom: 0;
height: 70px;
left: 50%;
position: absolute;
transform: translate(-50%, 0%);
opacity: 1;
width: 400px;
height: 70px;
}
#products.cabinetry .products-img-logo img {
margin-left: auto;
margin-right: auto;
width: 40%;
}
/* -------------------------------------- */
/* -- Privacy & Terms -- */
.terms-of-use h3,
.privacy-policy h3 {
font-size: 20px;
line-height: 20px;
}
/* -------------------------------------- */
/* -- Global - Media Query Styles -- */
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {}
@media only screen and (min-width: 1280px) {
/* bootstrap adjust desktop width to 1280px */
}
@media only screen and (max-width: 1280px) and (min-width: 992px) {
#tour-history h3 {
color: #fff;
font-size: 30px;
line-height: 30px;
margin: 0 0 40px 0;
padding: 0;
}
#tour-history p {
color: #fff;
font-size: 12px;
line-height: 18px;
}
}
@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;
}
#tour-history h3 {
margin: 40px 0 40px 0;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
/*#header-top .text-right,
#header-bottom .text-right {
text-align: center;
margin-bottom: 20px;
}*/
#tour-history .tour-history-con {
padding: 10px 20px 40px 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,
#homeowner #gallery h3,
#professionals #gallery h3 {
font-size: 22px;
line-height: 26px;
margin: 0 0 40px;
padding: 0;
}
#homeowner #gallery .gallery-con,
#professionals #gallery .gallery-con {
/* padding-top: 40px; */
/*margin-top: 60px;*/
margin-left: 0px;
}
/* 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 */
}
/* -------------------------------------- */
/* End CSS */
/* =============================================================================
BS5 structural parity (P3 fan-out) — layout/reboot only; Bellevue palette unchanged
============================================================================= */
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
#footer,
#breadcrumbs {
font-size: 14px;
line-height: 20px;
color: #75787b;
}
/* BS5 derives .container padding from the gutter (calc(var(--bs-gutter-x) * .5)),
so pinning the gutter to production's 30px already yields the 15px sides. The
explicit padding declarations that used to sit here were unconditional and, being
later in this file, overrode the theme's own "mobile container padded sides" rule
at line ~4182 (@media max-width: 768px, 20px sides) that production still honours. */
.container {
--bs-gutter-x: 30px;
}
/* BS5 re-declares --bs-gutter-x: 1.5rem on .row itself, so the .container pin above
never reaches the columns — a local declaration beats an inherited one. Production
(BS3) runs a 30px gutter: .row margin -15px, .col-* padding 15px. */
.row {
--bs-gutter-x: 30px;
/* BS3 floated columns kept content height; BS5 flex rows stretch every
column to the tallest sibling (footer empty col-md-4, design-partners text). */
align-items: flex-start;
}
.row.vertical-align {
align-items: center;
}
/* The FacetWP result grid emits `article.product.col-sm-6.col-md-4` straight into
`.facetwp-template`, with no `.row` wrapper. BS3 carried `float: left` and the 15px
gutter on the column classes themselves, so the cards laid out 3-up; BS5 moved both
onto `.row > *`, so outside a row they keep their width and lose the float, and
/products/ renders one card per row. Float only from 768px up, which is where BS3's
`.col-sm-*` first set a width - below that production stacks them too, and
`#brands .product.col-sm-6` already zeroes the padding there. */
.facetwp-template > .product {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
@media only screen and (max-width: 768px) {
/* Match the theme's `.col-sm-6, .col-sm-12` 30px gutter at exactly 768px —
the generic 15px pin above outweighed that rule and shrank product cards. */
.facetwp-template > .product.col-sm-6,
.facetwp-template > .product.col-sm-12 {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.facetwp-template > .product {
float: left;
}
}
/* BS3 col-xs-* has no BS5 equivalent. Design Inspiration Gallery cards use
col-xs-6 col-sm-6 col-md-4; without this pin they stack one per row below
576px while production stays 2-up. Measured on /design-inspiration-gallery/ @390. */
.facetwp-template > .product.col-xs-6 {
float: left;
width: 50%;
}
@media (min-width: 768px) {
.facetwp-template > .product.col-sm-6 {
width: 50%;
}
}
@media (min-width: 992px) {
.facetwp-template > .product.col-md-4 {
width: 33.33333333%;
}
}
@media (min-width: 1200px) {
.facetwp-template > .product.col-lg-3 {
width: 25%;
}
}
/* `.vertical-align` drops to `display: inherit` (block) below 992px so that production's
floated BS3 columns take over from the flex centering. BS5 columns have no float and
depend on the flex row, so a block row stacks them one per line — the header logo and
the buttons/nav column lose their side-by-side split in the 768-991px band, and the
`.logo` margin collapses into #header-bottom instead of adding to it. Keep the row a
flex row and drop only the centering production drops. */
@media (max-width: 991px) {
.row.vertical-align {
align-items: flex-start;
display: flex;
justify-content: flex-start;
}
}
@media (max-width: 767.98px) {
/* Production drops `.vertical-align` to `display: inherit` (block) on phones,
so logo margins collapse into the column; the 768-991 flex row above does not. */
.row.vertical-align {
display: block;
}
/* BS3 .row clearfix ::before/::after — production still gets the leading gap
before stacked header columns on phones. */
.row.vertical-align::before,
.row.vertical-align::after {
content: " ";
display: table;
}
}
/* Nav wrapper — production renders an unstyled full-width div inside #nav, so the
BS5 wrapper must not pick up the page container's width, gutters or auto margins. */
#nav > .container-fluid {
margin: 0;
max-width: none;
padding: 0;
width: 100%;
}
@media (min-width: 576px) and (max-width: 767.98px) {
.container {
max-width: 100%;
}
/* BS3 activated col-sm-* at 768px, BS5 activates them at 576px, so this band
splits rows production still stacks (e.g. /news/ .col-sm-9 next to its
sidebar). Neutralize the columns here instead of remapping ~20 templates. */
[class*="col-sm-"] {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
body .container {
max-width: 750px !important;
width: 750px;
}
/* BS3 activated col-md-* at 992px, BS5 activates them at 768px, so this band
splits rows production still lays out on col-sm-* (e.g. the footer contact
block .col-sm-12.col-md-5, full width on production, 5/12 here). Neutralize
col-md-* the same way the 576-767.98px band neutralizes col-sm-*. */
[class*="col-md-"] {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
/* ...but col-sm-* IS active at BS3's sm breakpoint (>=768px), so a col-sm-*
on the same element still has to win. */
[class*="col-md-"].col-sm-1 {
width: 8.33333333%;
}
[class*="col-md-"].col-sm-2 {
width: 16.66666667%;
}
[class*="col-md-"].col-sm-3 {
width: 25%;
}
[class*="col-md-"].col-sm-4 {
width: 33.33333333%;
}
[class*="col-md-"].col-sm-5 {
width: 41.66666667%;
}
[class*="col-md-"].col-sm-6 {
width: 50%;
}
[class*="col-md-"].col-sm-7 {
width: 58.33333333%;
}
[class*="col-md-"].col-sm-8 {
width: 66.66666667%;
}
[class*="col-md-"].col-sm-9 {
width: 75%;
}
[class*="col-md-"].col-sm-10 {
width: 83.33333333%;
}
[class*="col-md-"].col-sm-11 {
width: 91.66666667%;
}
[class*="col-md-"].col-sm-12 {
width: 100%;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
body .container {
max-width: 970px !important;
width: 970px;
}
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
body .container {
max-width: 1170px !important;
width: 1170px;
}
}
@media (min-width: 1280px) {
body .container {
max-width: 1280px !important;
width: 1280px;
}
}
/* The header container is full-bleed up to 992px on production
(`header .container { width: 100% }`); the widths above must not clamp it. */
@media (max-width: 992px) {
header .container {
max-width: 100% !important;
width: 100%;
}
}
@media (max-width: 767.98px) {
#homeowner #intro > .container,
#homeowner #tour .container,
#homeowner #gallery .container,
#homeowners #intro > .container,
#homeowners #tour .container,
#homeowners #gallery .container,
#professionals #intro > .container,
#professionals #tour .container,
#professionals #gallery .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (min-width: 768px) {
#nav.navbar.navbar-expand-md {
align-items: normal;
display: block;
padding-bottom: 0;
padding-top: 0;
}
/* `#nav.navbar.navbar-expand-md { display: block }` outweighs
`body.elevations_by_ki #nav { display: none }` on the home page. */
body.elevations_by_ki #nav.navbar.navbar-expand-md {
display: none;
}
#nav.navbar > .container-fluid {
display: block;
}
#nav .navbar-collapse.navbar-1-collapse {
display: block !important;
padding-left: 0;
padding-right: 0;
}
#nav .navbar-nav {
display: block;
float: 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%;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #1a765c;
--bs-btn-border-color: #1a765c;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #75787b;
--bs-btn-hover-border-color: #1a765c;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #75787b;
--bs-btn-active-border-color: #1a765c;
}
/* 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
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 '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 inputs: prod line-height 21.4286px (h=41) vs BS5 reboot 20px (h=40). */
@media (min-width: 768px) {
body#contact #contact-form input,
body#contact #contact-form select,
body#contact #contact-form textarea {
line-height: 21.4286px !important;
}
}
/* /contact/ @sm — form is 1px short; 2px padding-bottom closes the docH gap. */
@media (max-width: 767.98px) {
body#contact #contact-form {
padding-bottom: 2px !important;
}
}
/* md nav — BS5 collapse stays height:0 while the ul wraps two rows; production
is 82px tall. display:block + min-height matches measured production nav#nav. */
@media (min-width: 768px) and (max-width: 991.98px) {
#nav .navbar-collapse.navbar-1-collapse {
display: block;
height: auto;
overflow: visible;
}
#nav.navbar {
min-height: 82px;
}
}
/* lg/xl nav — floated .navbar-nav overflows #nav's 50px min-height when the menu
wraps to two rows (ul 60px, nav 62px on production). Clearfix on the collapse
sizes #nav to its content; band stops at 1399.98px so xxl single-row nav stays 50px. */
@media (min-width: 992px) and (max-width: 1399.98px) {
#nav .navbar-collapse.navbar-1-collapse {
display: block;
height: auto;
overflow: visible;
}
#nav .navbar-collapse.navbar-1-collapse::after {
clear: both;
content: "";
display: table;
}
}
/* /exterior-siding/ products-img — production parent theme margins on the img */
#products .products-img img {
margin-top: 5px;
margin-bottom: 20px;
margin-right: 20px;
}
/* Blog sidebar search widget — BS3 .input-group used display:table with table-cell
children; BS5 flex lets .form-control flex-grow to full width (93px vs prod 26px)
and stacks the group 23px taller. Measured on masonite @768 against production. */
aside#search-3 .search-form .input-group {
position: relative;
display: table;
border-collapse: separate;
width: 100%;
}
aside#search-3 .search-form .input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
display: table-cell;
font-size: 14px;
line-height: 20px;
padding: 6px 12px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
aside#search-3 .search-form .input-group .input-group-btn {
display: table-cell;
width: 1%;
white-space: nowrap;
vertical-align: middle;
position: relative;
font-size: 0;
}
aside#search-3 .search-form .input-group .input-group-btn > .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
aside#search-3 {
margin-bottom: 5px;
}
/* Home 3-up card row — BS5 .card border (1px each side) narrows the text column 2px
vs production (360px), re-wraps card 3 copy (+26px), and pushes the row +16px.
Production BS3 cards compute border 0 on this row. Measured on / @1200. */
body#home .row.d-flex.align-items-stretch .card.d-flex.align-items-start {
border: 0;
}
/* Gravity Forms labels on /contact/: production line-height 22.8571px vs BS5 reboot
20px (−3px per field). Measured @576 and @768 — sm-only media left 24px short @md+. */
body#contact #contact-form .gfield_label.gform-field-label {
line-height: 22.8571px;
}
/* Gravity Forms use .large / .gfield_select, not .form-control. Production resolves
field text as #75787b; BS5 reboot leaves it #000. Quote/consultation subpages also
carry body#contact, but the body-class selectors document the subpage scope. */
body#contact #contact-form .gform_wrapper input.large:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body#contact #contact-form .gform_wrapper select.gfield_select,
body#contact #contact-form .gform_wrapper textarea.textarea,
body.request-a-quote #contact-form .gform_wrapper input.large:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.request-a-quote #contact-form .gform_wrapper select.gfield_select,
body.request-a-quote #contact-form .gform_wrapper textarea.textarea,
body.request-a-consultation #contact-form .gform_wrapper input.large:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.request-a-consultation #contact-form .gform_wrapper select.gfield_select,
body.request-a-consultation #contact-form .gform_wrapper textarea.textarea {
color: #75787b;
}
/* Contact / request-a-quote / request-a-consultation: production renders gform_button
with Roboto, sentence-case label, black text, and a 1px black border — not .btn-green. */
body#contact #contact-form .gform_button.button,
body.request-a-quote #contact-form .gform_button.button,
body.request-a-consultation #contact-form .gform_button.button {
background-color: transparent;
border: 1px solid #000;
color: #000 !important;
font-family: "Roboto", sans-serif;
text-decoration: none;
text-transform: none;
}
body#contact #contact-form .gform_button.button:hover,
body#contact #contact-form .gform_button.button:focus,
body.request-a-quote #contact-form .gform_button.button:hover,
body.request-a-quote #contact-form .gform_button.button:focus,
body.request-a-consultation #contact-form .gform_button.button:hover,
body.request-a-consultation #contact-form .gform_button.button:focus {
background-color: transparent;
border-color: #000;
color: #000 !important;
text-decoration: none;
}
@media (min-width: 768px) {
body#contact #contact-form .gform_button.button,
body.request-a-quote #contact-form .gform_button.button,
body.request-a-consultation #contact-form .gform_button.button {
line-height: 25.7143px;
}
}
/* 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
after the
image, but without that declaration the float escapes and the wrapper collapses
from 305px to 60px. flow-root is not usable here: it would also contain the
.page-header margin-top production lets collapse out. Scoped to
.has-post-thumbnail so the 19 brand pages without a featured image are untouched. */
.type-brands.has-post-thumbnail > img.wp-post-image {
display: block;
float: left;
margin: 0 10px;
}
.type-brands.has-post-thumbnail::after {
clear: both;
content: "";
display: table;
}
/* .btn-group-justified is a BS3 class with no BS4/BS5 equivalent. Production renders
the group as a fixed table so the three product buttons split the row evenly
(464px wide, 154.66px each); BS5 leaves it inline-flex at content width (116px),
shrinking every product tile toolbar. Measured on /products/ at all breakpoints. */
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group.btn-group-justified > .btn + .btn {
margin-left: 0;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
/* Mobile nav @≤767 — BS5 flex nav collapses item height; .navbar-inverse paints white
over #f7f7f7; BS5 puts .show on the anchor (not li.open). Credit App expanded
toggle must match prod: bold, white bg, submenu flush (no BS5 border-top).
Measured on /products/ @390 against production (Shobana UAT 2026-09-15). */
@media (max-width: 767.98px) {
#nav .navbar-collapse,
#nav.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
background-color: #f7f7f7 !important;
}
#nav .navbar-nav {
display: block;
}
#nav .navbar-nav > li,
#nav .navbar-nav > .nav-item {
display: block;
float: none;
}
#nav .navbar-nav > li > a,
#nav .navbar-nav > .nav-item > a,
#nav .navbar-nav .nav-link {
display: block;
padding: 10px;
}
#nav.navbar-inverse .navbar-nav > .show > a,
#nav.navbar-inverse .navbar-nav > .show > a:hover,
#nav.navbar-inverse .navbar-nav > .show > a:focus,
#nav.navbar-inverse .navbar-nav > .open > a,
#nav.navbar-inverse .navbar-nav > .open > a:hover,
#nav.navbar-inverse .navbar-nav > .open > a:focus,
#nav.navbar-inverse .navbar-nav > .dropdown.show > a,
#nav.navbar-inverse .navbar-nav > .dropdown > a.show,
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"],
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"]:hover,
#nav.navbar-inverse .navbar-nav > .dropdown > a[aria-expanded="true"]:focus {
background-color: #fff !important;
color: #75787b !important;
font-weight: bold;
text-decoration: none;
}
#nav .navbar-nav .show .dropdown-menu,
#nav .navbar-nav .open .dropdown-menu,
#nav .dropdown-menu.show {
background-color: #fff !important;
border-top: 0 !important;
margin-top: 0 !important;
box-shadow: none !important;
}
#nav .dropdown > a[aria-expanded="true"],
#nav .dropdown.show > a {
text-decoration: none !important;
}
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu > li > a {
text-decoration: none;
border-top: 0;
border-bottom: 0;
}
}