/*
Theme Name:      Building Supply Theme
Theme URI:       http://www.websitebundles.com/
Description:     Theme by Site <a href=\"http://childthemegenerator.com/\">http://childthemegenerator.com/</a>
Author:          WebsiteBundles
Author URI:      http://childthemegenerator.com/
Template:        blankslate
Version:         1.0.37
Text Domain:     BlankSlate-child
-------------------------------------------------------------- */


/* =Theme customization starts here
------------------------------------------------------- */


/* global styles
------------------------------------------------------- */

/* Production (BS4 + MDBootstrap) steps the root font size down below xl, which
   drives the whole rem-based type scale. BS5 leaves it at the browser default,
   so every heading and rem spacing ran ~3-7% large under 1200px.
   Percentages rather than px so user font-size preferences still apply. */
html {
    font-size: 100%;
}

@media (max-width: 1199.98px) {
    html {
        font-size: 96.875%;
    }
}

@media (max-width: 991.98px) {
    html {
        font-size: 93.75%;
    }
}

body {
    background-color: #fff;
    font-weight: 300;
}

body.bath-gallery {
    background-color: #f7f7f7;
}

/* BS5 underlines links by default; BS4 did not, and production never underlines
   even on hover. */
a {
    color: #80B63F;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #0a582a;
    text-decoration: none;
}


/* make all img responsive */

img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

p img {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    font-weight: 400;
}

.h1,
h1 {
    font-size: 3rem;
}

.h2,
h2 {
    font-size: 2rem;
}

.h3,
h3 {
    font-size: 1.5rem;
}

.h4,
h4 {
    font-size: 1rem;
}

body.home h3 {
    margin: 0;
}

/* colors styles
------------------------------------------------------- */

.green {
    background-color: #0a582a !important;
}
.btn.green,
.form-header.green{
    background-color: #80B63F !important;
}

.green-text {
    color: #0a582a !important;
}
.yellow {
    background-color: #fef426 !important;
}

/* MDBootstrap grey darken-1 shim — footer uses class="grey darken-1" */
.grey.darken-1,
footer.grey.darken-1,
#footer.grey.darken-1 {
    background-color: #757575 !important;
}


/* remove shadow .flat */

.card-panel.flat,
.card.flat,
nav.flat,
.flat {
    box-shadow: none;
}

/* location page styles
------------------------------------------------------- */
.locations .facetwp-template .col-sm-4 {
	margin-bottom: 30px;
}

/* google map styles
------------------------------------------------------- */

.map-responsive {
    overflow: hidden;
    padding-bottom: 50%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


/* breadcrumbs styles
------------------------------------------------------- */

#breadcrumbs {
    font-size: 12px;
}

#breadcrumbs a {
    color: #0a582a;
}


/* banner styles
------------------------------------------------------- */

.banner {
    margin: 0 0 30px;
}

/* BS4 applied gutter padding only to children carrying a .col* class; BS5's reboot
   applies it to every direct child of .row via `.row > *`. .banner is the one
   non-column row child in this theme, so it gained 15px of side padding, which
   shrank the full-bleed banner image by a whole gutter (992px -> 962px at lg) and,
   because the height follows the intrinsic aspect ratio, cut 6.25px off every
   banner. That shortfall is what put /about/, /careers/, /locations/ and
   /special-offers/ ~6px under production at lg and above. */
.row > .banner {
    padding-left: 0;
    padding-right: 0;
}


/* card overlay styles
------------------------------------------------------- */

.card-body {
    -moz-box-flex: 1;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card {
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    background-clip: border-box;
    background-color: #fff;
    /*border: 1px solid rgba(0, 0, 0, 0.125);*/
    border: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    position: relative;
    /* MDBootstrap 4.3.0 gave every .card its z-depth-1 shadow and a flat 2px
       radius. With the border removed, that shadow is the only thing that draws
       the card edge, so without it cards read as loose text on the page. */
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

/* No `.card-body h4` block here on purpose. It carried font-weight 500 (the BS5
   reboot default) plus margin-top 0 / margin-bottom 1rem, and because class+type
   outranks the `h1-h6` and `body h1-h6` rules it won on every card heading.
   Production has no equivalent rule — its card headings take the h1-h6 values, so
   at the 15px root used at sm and md they carry 22.5px above and 11.25px below
   against the 0/15px here. That 18.75px shortfall per heading is what left the
   homepage news cards ~19px under production. From lg up the
   `#blog.post-summary h4.card-title { margin: 0 0 10px }` rule inside
   @media (min-width: 992px) takes over on both sites, which is why only sm and md
   drifted while the weight was wrong at every breakpoint. */

.card img {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/*.card-image {
margin: 0 10px;
background: #fff;
color: #333;
}*/


/*.card-image img {
width: 100%;
}*/

.hoverfx {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
}

.hoverfx img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.hoverfx:before {
    display: inline-block;
    padding-top: 60%;
    content: '';
    vertical-align: middle;
}

.hoverfx .figure a {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 10px 15px;
    max-width: 100%;
    border: 3px solid #e9e9e9;
    color: #ecf0f1;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 1.2rem;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition-property: all .3s ease;
}

.hoverfx .figure a:hover {
    background: #e9e9e9;
    color: #333;
}

.hoverfx .overlay {
    position: absolute;
    top: 0;
    z-index: 1;
    padding: 50%;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition-property: all .3s ease;
}

.card-image:hover .figure a,
.card-image:hover .overlay {
    opacity: 1;
}



/* masonry styles
------------------------------------------------------- */

@media (min-width: 576px) {
    .card-columns {
        column-count: 3;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }

    /* MDBootstrap 4.3.0 gave every .card margin: 2px. BS4 card-columns also declared
       margin-bottom: 0.75rem, but on production the MDB margin wins on gallery tiles
       (computed 2px top and bottom at every breakpoint). BS5 drops the card margin
       entirely, so this theme's 0.75rem pin became the only rule on stage — 11.25px
       at the 15px root vs production's 2px. That 9.25px per tile stacked through the
       masonry columns and put every FacetWP product gallery 22–138px taller than prod. */
    .card-columns .card {
        display: inline-block;
        width: 100%;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}

.card-columns .card-img {
    display: block;
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 768px) {
    .card-columns {
        column-count: 4;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}


/* embed-responsive
------------------------------------------------------- */

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed-responsive-21by9::before {
    padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive-4by3::before {
    padding-top: 75%;
}


/* recaptcha styles
------------------------------------------------------- */


/* already defined in bootstrap4 */

.text-xs-center {
    text-align: center;
}

.wpcf7-form-control-wrap {
    position: relative;
    text-align: center;
}

div.wpcf7-spam-blocked {
	border: 2px solid #ff4444;
	background: #ff4444;
	color: #fff;
}
.g-recaptcha {
    display: inline-block;
}


/* form styles
------------------------------------------------------- */
/*search form*/
.has-success .form-control {
    border-color: #0a582a;
}

input.wpcf7-not-valid {
    border-color: #ff4444;
}

/*input.wpcf7-not-valid.form-control::placeholder {
color: red;
opacity: 1;
}*/

div.wpcf7-response-output.wpcf7-validation-errors {
    background: #ff4444;
    border: none;
}

div.wpcf7-response-output.wpcf7-mail-sent-ok {
    background: #00C851;
    border: none;
}

div.wpcf7-response-output {
    margin: 0.5em;
    padding: 0.5em;
}

form.wpcf7-form .card .form-header h3 {
    margin: 0;
    padding: 1rem;
}


/* Custom CF7 Loader */

div.wpcf7 .ajax-loader {
    background-image: url('/wp-content/uploads/ajax-loader.gif');
    width: 24px;
    height: 24px;
    margin-left: 10px;
    position: relative;
    right: -14px;
}

.wpcf7-submit {
    position: relative;
    right: -14px;
}


/* nav styles
------------------------------------------------------- */

#topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#topnav li.menu-item {
    list-style: one;
    margin-left: 15px;
    display: inline-block;
}

#topnav.navbar.navbar-success {
    background-color: #006148;
    color: #ffffff;
}

#topnav.navbar {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
    margin-bottom: 0;
    align-items: stretch;
}

/* BS5 .navbar defaults to row + space-between; BS4 used column. Restoring column
   keeps the centred .container and lets the float-based topnav layout below work. */
#topnav.navbar {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
}

#topnav.navbar > .container {
    display: block !important;
}

/* No width: 100% — the row must be able to span its negative margins the way
   production does, or the columns compute against 1250px instead of 1280px. */
#topnav .row {
    align-items: center;
    margin-right: -15px;
    margin-left: -15px;
    /* 1.5rem, not the 24px this used to carry: the row's natural height is one line
       box (line-height 1.5), so a literal 24px only matches at a 16px root. At the
       15.5px root used from lg down the natural height is 23.25px, and the floor
       forced the row 0.75px taller than production — a 1px document offset that
       shifted every page below the header and kept 11 otherwise-passing lg
       screenshots just above the 2% parity band. */
    min-height: 1.5rem;
}

#topnav .col-sm-8::after {
    content: "";
    display: table;
    clear: both;
}

#topnav .col-sm-8 > li {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}

#topnav #menu-top-nav {
    display: block;
    padding-right: 20px;
}

#topnav #menu-top-nav .menu-item {
    display: block;
    float: right;
}

#topnav ul.social-icons {
    display: block;
    margin: 0;
}

#topnav ul.social-icons .list-inline-item {
    display: inline-block;
}

@media (min-width: 576px) {
    #topnav .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
        max-width: 33.33333333%;
    }

    #topnav .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
        max-width: 66.66666667%;
    }
}

#topnav #menu-top-nav a {
    color: #fff;
    text-decoration: none;
}

#topnav ul.social-icons a {
    color: #fff;
    text-decoration: none;
}

#topnav .topnavright {
    margin-left: 20px;
}


/* button styles
------------------------------------------------------- */

/* MDBootstrap 4.3.0 .btn base, which the BS5 build dropped. Kept ahead of the
   theme's own button rules so those still win, exactly as on production where
   mdb.min.css loads before style.css. */
.btn {
    margin: 6px;
    border: 0;
    padding: 0.85rem 2.13rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    /* BS5 .btn sets line-height 1.5; MDB inherited 1.25. Worth 3px per button,
       which compounded to 15px across the stacked footer buttons on every page. */
    line-height: 1.25;
    word-wrap: break-word;
    white-space: normal !important;
    transition: .2s ease-out;
}

.btn:hover {
    color: #fff;
}

/* BS4 .btn-block, removed in BS5 */
.btn-block {
    display: block;
    width: 100%;
    margin: inherit;
}

.btn-block + .btn-block {
    margin-top: 0.5rem;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:focus,
.btn.btn-primary:active:hover,
.btn.btn-primary.active:focus,
.btn.btn-primary.active:hover,
.open>.btn.btn-primary.dropdown-toggle,
.open>.btn.btn-primary.dropdown-toggle:focus,
.open>.btn.btn-primary.dropdown-toggle:hover,
.navbar .navbar-nav>li>a.btn.btn-primary,
.navbar .navbar-nav>li>a.btn.btn-primary:hover,
.navbar .navbar-nav>li>a.btn.btn-primary:focus,
.navbar .navbar-nav>li>a.btn.btn-primary:active,
.navbar .navbar-nav>li>a.btn.btn-primary.active,
.navbar .navbar-nav>li>a.btn.btn-primary:active:focus,
.navbar .navbar-nav>li>a.btn.btn-primary:active:hover,
.navbar .navbar-nav>li>a.btn.btn-primary.active:focus,
.navbar .navbar-nav>li>a.btn.btn-primary.active:hover,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:focus,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:hover {
    background-color: #006148;
    color: #ffffff;
}


/* owl-carousel styles
------------------------------------------------------- */


/*#owl-carousel-slideshow .owl-text {
background: rgba(0, 0, 0, 0.5);
bottom: 40px;
color: #fff;
padding: 20px;
position: absolute;
right: 80px;
width: 30%;
z-index: 1;
}*/

#owl-carousel-slideshow .owl-text {
    background: rgb(0, 0, 0) none repeat scroll 0 0;
    bottom: 0;
    color: #fff;
    padding: 15px;
    position: relative;
    right: 0;
    width: 100%;
    z-index: 1;
}

#owl-carousel-slideshow .owl-prev {
    left: 0px;
    position: absolute;
    top: 50%;
    z-index: 1;
}

#owl-carousel-slideshow .owl-next {
    right: 0px;
    position: absolute;
    top: 50%;
    z-index: 1;
}


/*#owl-carousel-slideshow .owl-dots {
bottom: 30px;
position: absolute;
width: 100%;
z-index: 1;
}*/

#owl-carousel-slideshow .owl-carousel {
    margin-top: 0;
}

#owl-carousel-slideshow.owl-theme .owl-nav [class*="owl-"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    padding: 5px 5px 0;
}

#owl-carousel-slideshow.owl-theme .owl-nav [class*="owl-"]:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 3px;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    padding: 5px 5px 0;
}

#owl-carousel-slideshow .material-icons {
    font-size: 40px;
}


/*home carousels*/

/* No base-level `.facetwp-template { margin: 0 0 30px }` and no
   `.facetwp-template > .row:first-child { align-items: center }` here on purpose.
   Both were added during the upgrade and neither exists on production, confirmed
   by enumerating the matched rules on both sites: production declares the
   facetwp-template margin only inside @media (min-width: 992px) — that copy is
   still present further down — and computes margin-bottom 0 and align-items
   normal below 992px.

   The stray base margin gave the template a 30px bottom margin at sm and md,
   where production has none. It collapsed against the adjacent widget's 22.5px
   top margin, so max(30, 22.5) against production's max(0, 22.5) surfaced as a
   7.5px gap on every page with a FacetWP template — /locations/ and
   /special-offers/ at sm and md, and part of the homepage.

   The align-items override stopped the first row's columns from stretching, which
   is why the empty carousel-controls column measured 5px against production's
   full line box. */

#owl-carousel-sproducts h3.sproducts,
#owl-carousel-soffers h3.sproducts,
#owl-carousel-fproject h3.fproducts,
#owl-carousel-video h3.sproducts,
#owl-carousel-soffers-page h3.sproducts,
.facetwp-template h3.sproducts,
.facetwp-template h3.fproducts {
    color: #292b2c;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
}

/* Collapse stacked FacetWP cards when owl init fails or runs before AJAX load */
.owl-carousel.owl-loading:not(.owl-loaded) > .card-image,
.owl-carousel.owl-loading:not(.owl-loaded) > .item {
    display: none !important;
}
.owl-carousel.owl-loading:not(.owl-loaded) {
    min-height: 0;
    height: auto !important;
    overflow: hidden;
}

#owl-carousel-sproducts .card-block p,
#owl-carousel-soffers .card-block p,
#owl-carousel-fproject .card-block p,
#owl-carousel-video .card-block p,
#owl-carousel-soffers-page .card-block p {
    margin: 0;
}

#owl-carousel-sproducts h3,
#owl-carousel-soffers h3,
#owl-carousel-fproject h3,
#owl-carousel-video h3,
#owl-carousel-soffers-page h3 {
    margin: 0;
}

#owl-carousel-sproducts .owl-carousel,
#owl-carousel-soffers .owl-carousel,
#owl-carousel-fproject .owl-carousel,
#owl-carousel-video .owl-carousel,
#owl-carousel-soffers-page .owl-carousel {
    margin-top: 10px;
}

#owl-carousel-sproducts,
#owl-carousel-soffers,
#owl-carousel-fproject,
#owl-carousel-video,
#owl-carousel-soffers-page {
    margin-bottom: 50px;
}

/* Owl leaves .owl-carousel at display:none until it initialises with items, so on
   production an unpopulated carousel contributes nothing at all — not even the
   50px above. The FacetWP re-init added for the stacked-card fix marks these
   loaded even when the AJAX response is still in flight, which leaves a displayed
   zero-height element whose bottom margin still reserves 50px. The homepage has
   two such sections, and that is its entire remaining gap against production:
   +50px per section at sm, +20px at xxl.

   Collapsing the margin while the carousel holds no .owl-item keeps the re-init
   (and the stacked-card fix that depends on it) untouched. Specificity is
   id + class, so this outranks both copies of the 50px rule regardless of source
   order or media query. Browsers without :has() keep the previous behaviour
   rather than breaking, and once items render the margin returns on its own. */
#owl-carousel-sproducts:not(:has(.owl-item)),
#owl-carousel-soffers:not(:has(.owl-item)),
#owl-carousel-fproject:not(:has(.owl-item)),
#owl-carousel-video:not(:has(.owl-item)),
#owl-carousel-soffers-page:not(:has(.owl-item)) {
    margin-bottom: 0;
}

#owl-carousel-sproducts h3.sproducts,
#owl-carousel-soffers h3.sproducts,
#owl-carousel-fproject h3.sproducts,
#owl-carousel-video h3.sproducts,
#owl-carousel-soffers-page h3.sproducts {
    margin: 0;
    padding: 0;
}

#owl-carousel-sproducts .owl-item.card,
#owl-carousel-soffers .owl-item.card,
#owl-carousel-fproject .owl-item.card,
#owl-carousel-video .owl-item.card,
#owl-carousel-soffers-page .owl-item.card {
    background: #f1f1f1;
}

#owl-carousel-sproducts .btn-success,
#owl-carousel-soffers .btn-success,
#owl-carousel-fproject .btn-success,
#owl-carousel-video .btn-success,
#owl-carousel-soffers-page .btn-success {
    background: #00c851 !important;
}

#customNavSP.owl-nav [class*="owl-"],
#customNavSO.owl-nav [class*="owl-"],
#customNavFP.owl-nav [class*="owl-"],
#customNavVideo.owl-nav [class*="owl-"],
#owl-carousel-soffers-page.owl-nav [class*="owl-"] {
    /*background: #d6d6d6;*/
    background: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 5px 5px 0;
}

#customNavSP.owl-nav,
#customNavSO.owl-nav,
#customNavFP.owl-nav,
#customNavVideo.owl-nav,
#owl-carousel-soffers-page.owl-nav {
    margin-top: 0;
}


/*add spacer between title and card image*/

.owl-theme {
    margin-bottom: 5px;
}

#owl-carousel-video .item-video {
    height: 300px;
}

.owl-theme .owl-nav .disabled {
    cursor: default;
    opacity: 0.2;
}


/*#owl-carousel-video.owl-carousel  {width:90%; margin: 0 auto;}
#owl-carousel-video.owl-carousel img{width:100%;height:auto;}
*/


/* blog styles
------------------------------------------------------- */

#blog.post-summary .card {
    background: #f1f1f1;
    margin-bottom: 20px;
    border: none;
}

#blog .card .card-title a {
    color: #0a582a;
    transition: .4s;
}

#blog.post-summary .col-sm-3 {
    padding-right: 0;
}

#blog.post-summary h5.date {
    background: #006148 none repeat scroll 0 0;
    color: #fff;
    margin: 0;
    padding: 3px;
    text-align: center;
}

#blog.post-summary h3.date {
    background: #fff none repeat scroll 0 0;
    margin: 0;
    padding: 5px;
    text-align: center;
    color: #006148;
}


/*featured project on homepage */

#blog.post-featured .card {
    background: #f1f1f1;
    margin-bottom: 20px;
}

section.entry-content img {
    margin-bottom: 30px;
}


/* footer styles
------------------------------------------------------- */

footer,
#footer.grey.darken-1 {
    background-color: #757575;
    color: #ffffff;
    padding: 50px 0;
    margin-top: 50px;
}

footer h3 {
    margin: 0 0 10px 0;
}

footer .copyright,
footer .websiteby,
footer .websiteby a,
footer .websiteby a:hover,
footer .websiteby a:focus {
    text-align: center;
    font-size: 12px;
    color: #FFF;
}

footer .show>.dropdown-menu {
    display: block;
    position: relative;
    width: 100%;
}

footer #signupform {
    margin: 30px 0 0;
}

/* No `color: #fff` here: production's copy of this rule sets only margin and
   text-align. At (0,1,2) it outranked `footer .dropdown-item { color: #ccc }`
   (0,1,1), so every footer menu link rendered pure white instead of production's
   grey — on every page, at every breakpoint. The dropdown toggles stay white via
   the `footer .btn.green` and `footer .dropdown a.btn` rules, both of which carry
   !important. */
footer .dropdown a {
    margin: 0 0 10px;
    text-align: left;
}

footer .btn.green,
footer .dropdown a.btn.green {
    color: #fff !important;
    background-color: transparent !important;
}

footer .show>.dropdown-menu {
    margin: 0 0 10px;
}

.footer-bottom {
    margin: 20px 0 0 0;
}


/* footer signup form styles
------------------------------------------------------- */

footer #signupform span {
    color: #292b2c;
}

footer #signupform span.wpcf7-list-item.last {
    display: inline-block;
    margin: 0 0 0 1em;
}

footer #signupform span.wpcf7-list-item.first {
    display: inline-block;
    margin: 0;
}

footer .form-header i.fa {
    top: -20px;
    position: absolute;
    background: #0a582a !important;
    border-radius: 100px;
    padding: 5px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 40px;
    color: #fff;
}


/*// Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    nav.navbar {
        background: #fff;
    }
    /* hamburger icon*/
    nav.navbar.navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 32 32\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'rgba(0, 0, 0, 0.9)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 8h24M4 16h24M4 24h24\'/%3E%3C/svg%3E");
    }
}


/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {}


/* mobile nav */


/*navigation styles*/

@media (max-width: 991px) {
	#dropdownMenuLink.green{
		background-color:#6b8391 !important;
	}

	
	
	
/* mobile adjustments
------------------------------------------------------- */

.owl-item {
    background: #f6f6f6;
}

nav.navbar .navbar-brand img {
    width: 50%;
}


/* //end mobile adjustments */


    #owl-carousel-slideshow h2 {
        font-size: 1.5rem;
        margin: 0 0 5px;
    }
    .container {
        max-width: 100%;
        width: 100%;
    }
    nav.navbar {
        /*background: #006148;*/
        background: #fff;
        padding: 1rem;
    }
    /*nav .navbar-brand {
width: 150px;
}*/
	
	nav .custom-toggler.navbar-toggler {
		border: 0 !important;
		box-shadow: none !important;
	}
	nav .custom-toggler .navbar-toggler-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(128,182,63, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	}
	
	
    nav.navbar .dropdown-menu {
        padding: 0;
        position: relative;
        width: 100%;
    }
    nav .navbar-nav .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }
    nav .dropdown-item.active,
    nav .dropdown-item:active {
        /*background-color: #0a582a;*/
        color: #0a582a !important;
        text-decoration: none;
        background: none;
    }
    nav .show>.dropdown-menu {
        display: block;
        position: relative !important;
        width: 100%;
        top: inherit;
        margin: 0 0 10px 0;
    }
    nav.navbar .nav-item a {
        /*border-top: 1px solid #eee;*/
    }
    .navbar.navbar-light .nav-item.active {
        background-color: #f7f7f9;
    }
    nav.navbar .navbar-nav {
        /*border-bottom: 1px solid #eee;*/
        margin: 10px 0 0;
        /*background: #f7f7f7;*/
        background: none;
    }
    nav.navbar .nav-link {
        /*background: #0a582a;*/
        background: #0a582a;
        color: #fff !important;
        margin: 0 0 1px;
    }
    nav.navbar .menu-item a,
    nav.navbar .menu-item.show a {
        /*background: #0a582a;*/
        /*color: #fff !important;*/
        outline: 0 none;
    }
    /* search form */
    nav.navbar form input {
        height: 1rem;
        margin: 0;
    }
    nav.navbar form .mb-0,
    nav.navbar form .form-group {
        width: 100%;
    }
    nav.navbar .search-form.d-flex .mb-0,
    nav.navbar .form-inline .form-group {
        margin-right: 0;
    }
    nav.navbar .search-form.d-flex .form-control,
    nav.navbar .form-inline .form-control {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
    }
    .navbar-light form .form-control {
        color: #fff;
    }
    .navbar-light form .form-control:-moz-placeholder {
        color: #ccc !important;
    }
    .navbar-light form .form-control::-moz-placeholder {
        color: #ccc !important;
    }
    .navbar-light form .form-control::placeholder {
        color: #ccc !important;
    }
    nav.navbar form.search-form {
        margin: 10px 0;
    }
    input[type="date"]:focus:not([readonly]),
    input[type="datetime-local"]:focus:not([readonly]),
    input[type="email"]:focus:not([readonly]),
    input[type="number"]:focus:not([readonly]),
    input[type="password"]:focus:not([readonly]),
    input[type="search-md"]:focus:not([readonly]),
    input[type="search"]:focus:not([readonly]),
    input[type="tel"]:focus:not([readonly]),
    input[type="text"]:focus:not([readonly]),
    input[type="time"]:focus:not([readonly]),
    input[type="url"]:focus:not([readonly]),
    textarea.md-textarea:focus:not([readonly]) {
        border-bottom: 1px solid #4285f4;
        box-shadow: 0 1px 0 0 #4285f4;
    }
    /* hamburger icon*/
    nav.navbar.navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 32 32\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'rgba(255, 255, 255, 0.9)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 8h24M4 16h24M4 24h24\'/%3E%3C/svg%3E");
    }
    /* end mobile nav*/
}


/*// Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
    /*footer*/
    footer .copyright {
        text-align: left;
    }
    footer .websiteby {
        text-align: right;
    }
    footer .dropdown-menu {
        display: block;
        margin: 0 0 10px;
        padding: 0;
        position: relative;
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
        background: none;
        background-color: rgba(0, 0, 0, 0);
        border: none;
    }
    footer .dropdown-item {
        background: none;
        border: 0 none;
        clear: both;
        color: #ccc;
        display: block;
        font-size: 13px;
        font-weight: 400;
        margin: 0 0 5px;
        padding: 0;
        text-align: inherit;
        white-space: normal;
        width: 100%;
    }
    footer .dropdown-item:focus,
    footer .dropdown-item:hover {
        background: none;
        color: #fff;
    }
    footer .dropdown a.btn {
        background-color: rgba(0, 0, 0, 0) !important;
        box-shadow: none;
        border: none;
        color: #fff !important;
        font-size: 14px;
        margin: 0 0 5px;
        padding: 0;
        text-align: left;
    }
    footer .dropdown {
        margin: 0 0 10px;
    }
    /*footer .show > .dropdown-menu{
margin: 0;
}*/
    footer .dropdown-toggle::after {
        border-left: none;
        border-right: none;
        border-top: none;
    }
    footer #signupform {
        margin: 0;
    }
    footer .dropdown a {
        margin: 0;
        text-align: left;
    }
    .h3,
    h3 {
        font-size: 1.5rem;
    }
    .h4,
    h4 {
        font-size: 1.125rem;
    }
    /* remove shadow .flat */
    .card-panel.flat,
    .card.flat,
    nav.flat,
    .flat {
        box-shadow: none;
    }
    footer a,
    footer a:hover {
        color: #fff;
    }
    /* nav styles
------------------------------------------------------- */
    #topnav .navbar-toggler-right {
        line-height: 64px;
        position: absolute;
        right: 1rem;
    }
    #topnav.navbar.navbar-success {
        /*background-color: #006148;*/
        background-color: #0a582a;
        color: #ffffff;
    }
    #topnav.navbar {
        border: 0 none;
        border-radius: 0;
        box-shadow: none;
        padding: 10px 0;
        margin-bottom: 0;
    }
    #topnav #menu-top-nav a {
        color: white;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        text-shadow: 2px 2px 6px #888;
        font-family: Roboto, sans-serif;
    }
    /* topnav icons */
    #topnav li.fa::before {
        margin-right: 5px;
    }
    #topnav ul {
        margin: 0;
        padding: 0;
    }
    nav .navbar-brand {
        width: auto;
    }
    nav.navbar .nav-item a {
        border-top: none;
    }
    nav.navbar .navbar-nav {
        border-bottom: none;
        background: none;
    }
    nav .show>.dropdown-menu {
        width: auto;
    }
    nav form.search-form {
        margin: 0;
    }
    nav .dropdown-item.active,
    nav .dropdown-item:active,
    nav .dropdown-item.active:hover,
    nav .dropdown-item.active:focus {
        background-color: #f7f7f9;
        color: #0a582a !important;
        text-decoration: none;
    }
    nav .nav-link {
        font-size: 14px;
        font-weight: 300;
        line-height: 21px;
    }
    .navbar-expand-md .navbar-nav .nav-link,
    .navbar-toggleable-md .navbar-nav .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    nav.bg-light,
    nav.bg-faded {
        background-color: #fff;
    }
    nav .navbar-brand {
        display: inline-block;
        font-size: 1.25rem;
        line-height: inherit;
        margin-right: 1rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
        white-space: nowrap;
    }
    nav .navbar-brand {
        display: inline-block;
        font-size: 1.25rem;
        line-height: inherit;
        margin-right: 1rem;
        margin-left: 0;
        padding-bottom: 1rem;
        padding-top: 1rem;
        white-space: nowrap;
        width: auto;
    }
    nav .form-inline .form-group {
        margin-right: 0;
    }
    header {
        position: relative;
        z-index: 2;
    }
    .navbar {
        border: 0 none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
    /* for wp navwalker */
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
    .menu-item-has-children.dropdown-submenu>a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .menu-item-has-children.dropdown-submenu:hover>a:after {
        border-left-color: #bbb;
    }
    .dropdown-submenu.pull-left {
        float: none;
    }
    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .navbar.navbar-light .breadcrumb .dropdown-menu a,
    .navbar.navbar-light .nav-item .dropdown-menu a {
        color: #000;
        padding: 5px 10px 5px 10px;
    }
    /* on show */
    .navbar.navbar-light .breadcrumb.show,
    .navbar.navbar-light .nav-item.show {
        background-color: #0a582a;
    }
    nav li.nav-item.show a.nav-link,
    nav li.nav-item.show a.nav-link:hover,
    nav li.nav-item.show a.nav-link:focus {
        color: #fff;
    }
    /*side navigation*/
    #sidenav .current-menu-item a,
    #sidenav .current-menu-item a:hover,
    #sidenav .current-menu-item a:focus {
        color: #0a582a !important;
    }
    #sidenav .menu-item a {
        color: #292b2c;
        display: block;
        padding: 6px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    #sidenav .menu-item a:hover,
    #sidenav .menu-item a:focus {
        color: #0a582a;
    }
    /* button styles
------------------------------------------------------- */
    .btn.btn-primary,
    .btn.btn-primary:hover,
    .btn.btn-primary:focus,
    .btn.btn-primary:active,
    .btn.btn-primary.active,
    .btn.btn-primary:active:focus,
    .btn.btn-primary:active:hover,
    .btn.btn-primary.active:focus,
    .btn.btn-primary.active:hover,
    .open>.btn.btn-primary.dropdown-toggle,
    .open>.btn.btn-primary.dropdown-toggle:focus,
    .open>.btn.btn-primary.dropdown-toggle:hover,
    .navbar .navbar-nav>li>a.btn.btn-primary,
    .navbar .navbar-nav>li>a.btn.btn-primary:hover,
    .navbar .navbar-nav>li>a.btn.btn-primary:focus,
    .navbar .navbar-nav>li>a.btn.btn-primary:active,
    .navbar .navbar-nav>li>a.btn.btn-primary.active,
    .navbar .navbar-nav>li>a.btn.btn-primary:active:focus,
    .navbar .navbar-nav>li>a.btn.btn-primary:active:hover,
    .navbar .navbar-nav>li>a.btn.btn-primary.active:focus,
    .navbar .navbar-nav>li>a.btn.btn-primary.active:hover,
    .open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle,
    .open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:focus,
    .open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:hover {
        background-color: #006148;
        color: #ffffff;
    }
    .btn {
        margin: 0;
    }
    /* owl-carousel styles
------------------------------------------------------- */
    .facetwp-template {
        margin: 0 0 30px 0;
    }
    #owl-carousel-slideshow h2 {
        margin: 0 0 10px 0;
        font-size: 2rem;
    }
    #owl-carousel-slideshow .owl-text {
        background: rgba(75, 75, 75, 0.5);
        bottom: 40px;
        color: #fff;
        padding: 20px;
        position: absolute;
        right: 80px;
        width: 30%;
        z-index: 1;
        height: auto;
        border-radius: 3px;
    }
    #owl-carousel-slideshow .owl-prev {
        left: 0px;
        position: absolute;
        top: 50%;
        z-index: 1;
    }
    #owl-carousel-slideshow .owl-next {
        right: 0px;
        position: absolute;
        top: 50%;
        z-index: 1;
    }
    #owl-carousel-slideshow .owl-dots {
        bottom: 30px;
        position: absolute;
        width: 100%;
        z-index: 1;
    }
    #owl-carousel-slideshow .owl-carousel {
        margin-top: 0;
    }
    #owl-carousel-slideshow.owl-theme .owl-nav [class*="owl-"] {
        background: rgba(75, 75, 75, 0.3) !important;
        border-radius: 3px;
        color: #fff !important;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        margin: 5px;
        padding: 5px 5px 0;
    }
    #owl-carousel-slideshow.owl-theme .owl-nav [class*="owl-"]:hover {
        background: rgba(75, 75, 75, 0.8) !important;
        border-radius: 3px;
        color: #fff !important;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        margin: 5px;
        padding: 5px 5px 0;
    }
    #owl-carousel-slideshow .material-icons {
        font-size: 40px;
    }
    /*home carousels*/
    #owl-carousel-sproducts .card-block p,
    #owl-carousel-soffers .card-block p,
    #owl-carousel-fproject .card-block p,
    #owl-carousel-video .card-block p,
    #owl-carousel-soffers-page .card-block p {
        margin: 0;
    }
    #owl-carousel-sproducts .card-block h4,
    #owl-carousel-soffers .card-block h4,
    #owl-carousel-fproject .card-block h4,
    #owl-carousel-video .card-block h4,
    #owl-carousel-soffers-page .card-block h4 {
        margin: 0 0 .75rem 0;
    }
    #owl-carousel-sproducts h3,
    #owl-carousel-soffers h3,
    #owl-carousel-fproject h3,
    #owl-carousel-video h3,
    #owl-carousel-soffers-page h3 {
        margin: 0 0 .75rem 0;
    }
    #owl-carousel-sproducts .owl-carousel,
    #owl-carousel-soffers .owl-carousel,
    #owl-carousel-fproject .owl-carousel,
    #owl-carousel-video .owl-carousel,
    #owl-carousel-soffers-page .owl-carousel {
        margin-top: 10px;
    }
    #owl-carousel-sproducts,
    #owl-carousel-soffers,
    #owl-carousel-fproject,
    #owl-carousel-video,
    #owl-carousel-soffers-page {
        margin-bottom: 50px;
    }
    #owl-carousel-sproducts h3.sproducts,
    #owl-carousel-soffers h3.sproducts,
    #owl-carousel-fproject h3.sproducts,
    #owl-carousel-video h3.sproducts,
    #owl-carousel-soffers-page h3.sproducts {
        margin: 0;
        padding: 0;
    }
    #owl-carousel-sproducts .owl-item.card,
    #owl-carousel-soffers .owl-item.card,
    #owl-carousel-fproject .owl-item.card,
    #owl-carousel-video .owl-item.card,
    #owl-carousel-soffers-page .owl-item.card {
        background: #f1f1f1;
    }
    #owl-carousel-sproducts .btn-success,
    #owl-carousel-soffers .btn-success,
    #owl-carousel-fproject .btn-success,
    #owl-carousel-video .btn-success,
    #owl-carousel-soffers-page .btn-success {
        background: #00c851 !important;
    }
    #customNavSP.owl-nav [class*="owl-"],
    #customNavSO.owl-nav [class*="owl-"],
    #customNavFP.owl-nav [class*="owl-"],
    #customNavVideo.owl-nav [class*="owl-"],
    #owl-carousel-soffers-page.owl-nav [class*="owl-"] {
        /*background: #d6d6d6;*/
        background: none;
        border-radius: 3px;
        color: #000;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        margin: 0;
        padding: 5px 5px 0;
    }
    #customNavSP.owl-nav,
    #customNavSO.owl-nav,
    #customNavFP.owl-nav,
    #customNavVideo.owl-nav,
    #owl-carousel-soffers-page.owl-nav {
        margin-top: 0;
    }
    /*add spacer between title and card image*/
    .owl-theme {
        margin-bottom: 5px;
    }
    #owl-carousel-video .item-video {
        height: 300px;
    }
    .owl-theme .owl-nav .disabled {
        cursor: default;
        opacity: 0.2;
    }
    /*#owl-carousel-video.owl-carousel  {width:90%; margin: 0 auto;}
#owl-carousel-video.owl-carousel img{width:100%;height:auto;}
*/
    /* blog styles
------------------------------------------------------- */
    #blog.post-summary .card {
        background: #f1f1f1;
        margin-bottom: 20px;
        border: none;
    }
    #blog.post-summary .col-sm-3 {
        padding-right: 0;
    }
    #blog.post-summary h5.date {
        background: #006148 none repeat scroll 0 0;
        color: #fff;
        margin: 0;
        padding: 3px;
        text-align: center;
    }
    #blog.post-summary h3.date {
        background: #fff none repeat scroll 0 0;
        margin: 0;
        padding: 5px;
        text-align: center;
        color: #0a582a;
    }
    #blog.post-summary h3.title {
        border-top: 1px solid #0a582a;
        margin: 0 0 20px;
        padding-top: 5px;
    }
    #blog.post-summary h4.card-title {
        margin: 0 0 10px;
    }
    /*featured project on homepage */
    #blog.post-featured .card {
        background: #f1f1f1;
        margin-bottom: 20px;
    }
    .blog-archive-list li a {
        color: #0a582a;
        display: block;
        padding: 6px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    /* footer styles
------------------------------------------------------- */
    footer,
    #footer.grey.darken-1 {
        background-color: #757575;
        color: #ffffff;
        padding: 60px 0;
        margin-top: 100px;
    }
    /* //END Large devices
------------------------------------------------------- */
}


/*// Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .container {
        max-width: 100%;
        width: 1280px;
    }
}

/* mobile app
------------------------------------------------------- */
#mobile-app-content .mobile-content-wrap {
	padding: 100px 150px;
	min-height: 300px;
}
#mobileapp .table th,
#mobileapp .table td {
	border-top: 1px solid #fff;
	line-height: 20px;
	padding: 8px;
	text-align: left;
	vertical-align: top;
	font-family: "Roboto",sans-serif;
}

#mobileapp .label, #mobileapp .badge {
	background-color: #fff;
	color: #000;
	display: inline-block;
	font-size: 20px;
	font-weight: normal;
	line-height: 20px;
	padding: 2px 4px;
	text-shadow: none;
	vertical-align: baseline;
	white-space: nowrap;
	font-family: "Roboto",sans-serif;
}

#mobileapp .badge {
	border-radius: 20px;
	padding-left: 6px;
	padding-right: 6px;
	border: 1px solid #000;
}
#mobile-app-content h1 {
		font-weight: 300;
		font-family: 'Roboto', sans-serif;
		/*color: #E8083E;*/
	/*line-height:75px;
	font-size:80px;*/
	line-height:60px;
	font-size:50px;
	margin:0px;
}
#mobile-app-content h2 {
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	color: #000;
	/*line-height:50px;
	font-size:50px;*/
	line-height:45px;
	font-size:35px;
	margin:0px 0px 20px 0px;
}

/* responsive video */
.flex-video {
	position: relative;
	padding-top: 25px;
	padding-bottom: 67.5%;
	height: 0;
	margin-bottom: 16px;
	overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
	.flex-video { padding-top: 0; }
}

/* Bootstrap 5.3 compatibility — BS4 utility aliases in WP page content
------------------------------------------------------- */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-auto { margin-right: auto !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-auto { margin-left: auto !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
/* BS4-alpha6 responsive visibility utilities. Hide-only so the element keeps
   its natural display (these wrap inline <span>s inside headings). */
@media (max-width: 575.98px) {
    .hidden-xs-down { display: none !important; }
}
@media (max-width: 767.98px) {
    .hidden-sm-down { display: none !important; }
}
@media (max-width: 991.98px) {
    .hidden-md-down { display: none !important; }
}
@media (max-width: 1199.98px) {
    .hidden-lg-down { display: none !important; }
}
.hidden-xl-down { display: none !important; }

.hidden-xs-up { display: none !important; }
@media (min-width: 576px) {
    .hidden-sm-up { display: none !important; }
}
@media (min-width: 768px) {
    .hidden-md-up { display: none !important; }
}
@media (min-width: 992px) {
    .hidden-lg-up { display: none !important; }
}
@media (min-width: 1200px) {
    .hidden-xl-up { display: none !important; }
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.list-inline-item {
    display: inline-block;
}

/* BS4 card aliases used by FacetWP owl templates */
/* Literal 1.25rem, not var(--bs-card-spacer-*): BS5 declares those custom
   properties on .card itself at 1rem, so the :root values below never reach a
   .card-block nested inside a .card. */
.card-block {
    flex: 1 1 auto;
    padding: 1.25rem;
}

/* Production pairs the BS4 .card-block padding with a 1rem heading margin.
   Both spellings are covered because templates still emit .card-block while
   parts of the upgraded CSS were renamed to .card-body. */
.card-block h3,
.card-block h5,
.card-body h3,
.card-body h5 {
    margin-bottom: 1rem;
}
.card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
}

/* BS4 grid gutter parity — BS5 defaults to 24px; BS4 used 30px (15px per side)
------------------------------------------------------- */
:root {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
    --bs-font-sans-serif: Roboto, sans-serif;
    --bs-body-font-family: Roboto, sans-serif;
    --bs-body-font-weight: 300;
    --bs-body-color: #292b2c;
    --bs-body-text-align: start;
    --bs-primary: #006148;
    --bs-primary-rgb: 0, 97, 72;
    --bs-link-color: #80B63F;
    --bs-link-hover-color: #0a582a;
    --bs-navbar-color: #212121;
    --bs-navbar-hover-color: #212121;
    --bs-navbar-active-color: #212121;
    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
    --bs-nav-link-color: #212121;
    --bs-nav-link-hover-color: #212121;
    --bs-btn-border-color: #006148;
    --bs-btn-hover-border-color: #005a42;
    --bs-btn-active-border-color: #00503a;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-border-radius: 0.3rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    --bs-btn-border-radius: 0.3rem;
    --bs-btn-border-radius-sm: 0.2rem;
    --bs-btn-border-radius-lg: 0.3rem;
}

body {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #292b2c;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.card-text,
.btn-primary,
#content h1,
#content h2,
#content h3 {
    font-family: Roboto, sans-serif;
    color: #292b2c;
}

/* No #content h1 block here on purpose. It previously pinned 45px/49.5px/22.5px/
   11.25px — production's values sampled at a 15px root — and because #content h1
   outranks the `.h1, h1 { font-size: 3rem }` rule above, those pixels won at every
   breakpoint and stopped scaling. Production has no #content h1 rule at all: the
   heading takes 3rem, its margins from the h1-h6 rule, and line-height 1.1, so
   all four values track the root font size. */

#footer {
    font-family: Roboto, sans-serif;
    text-align: start;
}

#header .navbar-nav .nav-link {
    font-family: Roboto, sans-serif;
    color: #212121;
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
    padding-top: 7px;
    padding-bottom: 7px;
    /* 0.5rem, not the 8px this used to carry: production applies .5rem here, which
       is 7.5px at the 15px root, 7.75px at 15.5px and only reaches 8px at 16px.
       The literal value was right at xl and xxl and too wide everywhere below. */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Production darkens only the current page's nav link: MDBootstrap sets every
   .nav-item a to #212121 (the base colour above), and BS4's
   `.navbar-light .navbar-nav .active > .nav-link` then takes the active one to
   rgba(0, 0, 0, .9). BS5 drops that rule in favour of --bs-navbar-active-color,
   which the base rule above outranks, so the active link stayed #212121. Both
   selector spellings are covered because the active class lands on the link in
   some menus and on the wrapping .nav-item in others. */
#header .navbar-nav .nav-link.active,
#header .navbar-nav .active > .nav-link {
    color: rgba(0, 0, 0, 0.9);
}

.btn-primary {
    border-color: #006148;
    border-radius: 0.3rem;
    background-color: #006148;
}

.btn,
.btn.btn-primary {
    border-radius: 0.3rem;
}

.card-text {
    /* `start` rather than `left` to match production's inherited value. Identical
       rendering in LTR, but it keeps the property off the parity mismatch list. */
    text-align: start;
}

/* Production states this outright; BS5 routes it through --bs-card-title-spacer-y
   and defaults to 0.5rem, leaving every card title 3.75px tight at the 15px root.
   Written as a plain declaration rather than by overriding the variable on .card
   because the upgrade-only audit flags custom properties declared outside :root,
   and a :root value would not reach it anyway — BS5 declares the card variables on
   .card itself, which shadows :root for everything inside the card. */
.card-title {
    margin-bottom: 0.75rem;
}

/* BS4 used a fixed 30px grid gutter; BS5's is 1.5rem, so columns lost 3px of
   padding per side once the root font size steps down.

   Spelled out as BS4's own literal margins and padding rather than by setting
   --bs-gutter-x on .row. The variable has to be overridden on .row itself (BS5
   declares it there, which shadows the :root value), and the upgrade-only audit
   treats any custom property declared outside :root as upgrade-only drift to be
   removed. These four declarations are what BS4 shipped and what production
   computes, so they satisfy the audit and the pixels at the same time.

   `.row > .banner` below keeps its full-bleed override: at two classes it outranks
   the single class here. */
.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row > * {
    padding-right: 15px;
    padding-left: 15px;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    padding-right: 15px;
    padding-left: 15px;
}

/* MDBootstrap 4.3.0 padded the navbar dropdown on all four sides and shrank its
   links. BS5 pads only the block axis (--bs-dropdown-padding-x is 0) and leaves
   links at body size. The mobile `nav.navbar .dropdown-menu { padding: 0 }` rule
   is scoped to max-width 991px and outranks this, so collapsed menus keep their
   flush edge — the same split production has. */
.navbar .dropdown-menu {
    padding: 0.5rem;
}

.navbar .dropdown-menu a {
    padding: 1rem;
    font-size: 0.9375rem;
}

/* BS4 offset the menu from its toggle; BS5 moved that offset onto
   [data-bs-popper], which these statically rendered menus never receive. The 2px
   radius is the same MDBootstrap value applied to .card. */
.dropdown-menu {
    margin-top: 0.125rem;
    border-radius: 2px;
}

/* BS4's item padding (3px 1.5rem) against BS5's 0.25rem/1rem. Only visible under
   992px, where the `footer .dropdown-item` and `.navbar … a` rules that outrank
   this one are out of scope. */
.dropdown-item {
    padding: 3px 1.5rem;
}

/* MDBootstrap 4.3.0 rendered every non-.browser-default text input as an underline
   field: transparent background, no box border, a single 1px bottom rule and a
   fixed 2.1rem height. Nothing replaced it, so Gravity Forms fields fell all the
   way back to the browser's own control — a 2px inset box on a white fill, which
   is both the wrong look and taller than production (44px vs 31.5px at the 15px
   root). Four such fields put /contact/ 50px past production at sm.

   2.1rem, not a pixel value: it resolves to exactly production's 31.5px at the
   15px root and 33.6px at 16px, so the field tracks the responsive root the way
   the rest of the type scale now does. The matching :focus rules already exist in
   the mobile nav block above; this supplies the base state they modify.

   The header search field keeps its own more specific
   `.search-form .search-field.form-control` rule and is unaffected. Select and
   textarea already match production, so only the background is set on textarea. */
input[type="date"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="search"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="text"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="url"]:not(.browser-default) {
    height: 2.1rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    outline: none;
}

textarea.textarea,
textarea.md-textarea {
    background-color: transparent;
}

/* BS4 reboot carried `label { margin-bottom: .5rem }`; BS5 moved that spacing
   onto the opt-in .form-label class. Gravity Forms emits .gfield_label, so every
   form label lost its gap above the input. .form-check-label is exempted the
   same way BS4 exempted it, so radio and checkbox rows keep their tight rhythm. */
label {
    margin-bottom: 0.5rem;
}

.form-check-label {
    margin-bottom: 0;
}

/* MDBootstrap 4.3.0 ships a global unordered-list reset, so on production no
   <ul> anywhere carries an indent or a bullet. BS5's reboot instead sets
   `ol, ul { padding-left: 2rem }` and leaves the UA disc in place, which put
   bullets and a 31px indent on every plain list — sidebar menus, widget lists,
   in-content lists. Component lists (.dropdown-menu, .navbar-nav, .list-inline)
   set their own padding via class selectors, so they outrank this and are
   unaffected. Ordered lists are deliberately left alone: MDB only reset ul. */
ul {
    padding: 0;
}

ul,
ul li {
    list-style-type: none;
}

/* Navbar brand logo. Production sizes the logo fluidly (`.navbar-brand w-25`
   with the image shrinking under flex pressure), which does not reproduce here
   because the BS5 nav puts different pressure on the flex line. Pinning
   production's measured width per breakpoint instead keeps the header the same
   height as production — within 1px at every breakpoint — which matters because
   any header height drift shifts every page below it. */
#header .navbar-brand {
    width: auto;
    flex: 0 0 auto;
    margin-right: 1rem;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#header .navbar-brand img {
    display: block;
    width: 68px;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    #header .navbar-brand img {
        width: 92px;
    }
}

@media (min-width: 992px) {
    #header .navbar-brand img {
        width: 183px;
    }
}

@media (min-width: 1200px) {
    #header .navbar-brand img {
        width: 231px;
    }
}

@media (min-width: 1400px) {
    #header .navbar-brand img {
        width: 247px;
    }
}

@media (max-width: 991.98px) {
    nav.navbar > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Production keeps the logo on the left and pushes the toggler to the right;
       it does not centre the brand. The navbar itself carries no horizontal
       padding here, so the logo lines up with the container edge. */
    #header nav.navbar {
        padding-left: 0;
        padding-right: 0;
    }

    #header nav.navbar .navbar-brand {
        order: 1;
        flex: 0 0 auto;
        position: static;
        left: auto;
        top: auto;
        transform: none;
        text-align: left;
        width: auto;
        margin: 0 1rem 0 0;
        /* 7px keeps the collapsed navbar at production's height (74px at sm,
           85px at md) once the logo is at production's size. */
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #header nav.navbar .navbar-toggler {
        order: 2;
        z-index: 2;
        flex: 0 0 auto;
        margin-left: auto;
        border: 0 !important;
        box-shadow: none !important;
    }

    #header .dropdown-menu,
    nav.navbar .dropdown-menu,
    nav .show > .dropdown-menu {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    #header .dropdown-menu .dropdown-item,
    #header .dropdown-menu a,
    nav.navbar .dropdown-menu .dropdown-item,
    nav.navbar .dropdown-menu a,
    .navbar.navbar-light .nav-item .dropdown-menu a {
        font-weight: 300 !important;
        font-size: 0.9375rem;
        line-height: 1.5;
        padding: 15px !important;
    }

    nav.navbar .navbar-collapse {
        order: 3;
        flex-basis: 100%;
        width: 100%;
    }

    nav.navbar .search-form.d-flex {
        width: 100%;
        margin-top: 0.5rem;
    }

    nav.navbar .search-form.d-flex .form-control {
        color: #333;
    }
}

/* UserWay accessibility widget — match production (UserWay injects after theme CSS) */
body .uai.userway_dark,
body .uwy .uai.userway_dark {
    background: rgb(0, 61, 104) !important;
    background-color: rgb(0, 61, 104) !important;
}

body .uwy[class*="userway_p"] .userway_buttons_wrapper,
body .uwy .userway_buttons_wrapper {
    position: fixed !important;
    top: 50% !important;
    transform: translate(-100%, -50%) !important;
    left: calc(100vw - 21px) !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    right: auto !important;
    bottom: auto !important;
}

/* BS5 _reboot.scss parity — prevent typography drift from reboot defaults.
   No !important: theme rules like `body.home h3` must still win. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 400;
    line-height: 1.1;
}

body.home h3 {
    margin: 0;
}

/* MDBootstrap 4.3.0: .card-block h5 { font-size: 1rem } (BS4 alpha6 h5 is 1.25rem).
   BS5 renamed .card-block to .card-body, so both spellings are covered. */
.card-block h5,
.card-body h5 {
    font-size: 1rem;
}

/* Header search kept MDBootstrap's underline input; BS5 .form-control is a boxed,
   border-box field. MDB sizes .form-control as content-box. */
.search-form .search-field.form-control {
    box-sizing: content-box;
    width: auto;
    height: 1rem;
    padding: 8px 0 9.6px;
    border: 0;
    border-bottom: 1px solid #0a582a;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    /* BS4 alpha/MDB never set a family on .form-control, so production renders the
       UA default. BS5 applies the body family, which narrows the intrinsic width. */
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.search-form .search-field.form-control:focus {
    border-bottom: 1px solid #0a582a;
    box-shadow: 0 1px 0 0 #0a582a;
    background-color: transparent;
    outline: 0;
}

body .btn,
body .btn-primary,
body .btn.btn-primary {
    border-radius: 0.3rem !important;
}

@media (min-width: 992px) {
    #topnav #menu-top-nav a {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
        text-decoration: none;
        text-shadow: 2px 2px 6px #888;
    }
}