/**
 * Theme Name:     Divi Child
 * Author:         Elegant Themes
 * Template:       Divi
 * Text Domain:	   divi-child
 * Description:    Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
 */



/* -------------------------------------- */
/* -------- Start Variables ------- */
/* -------------------------------------- */
:root {
/* ------ Top Menu Bar --------------- */
  --top-menu-bg-color: #d6d6d6; /* medium tan gray */
  --top-menu-font-color: #555; /* dark neutral gray header */
  --top-menu-link-color: #555; /* dark neutral gray header */
  --top-menu-link-hover-color: #000; /* black */
  --top-menu-link-underline-color: rgba(170, 170, 170, 0); /* transparent medium neutral gray */;
  --top-menu-link-hover-underline-color: #AAA; /* medium neutral gray */
  --top-menu-sub-bg-color: #efefef; /* light tan gray  */
  --top-menu-sub-arrow-color: transparent; /* transparent */
  --top-menu-sub-top-border-color: #efefef; /* light tan gray  */
  --top-menu-sub-bottom-border-color: #d6d6d6; /* medium tan gray */
  --top-menu-sub-box-shadow-color: rgba(0, 0, 0, .1); /* mostly transparent black */
  --top-menu-sub-link-color: #555; /* dark neutral gray header */
  --top-menu-sub-link-hover-color: #000; /* black */

/* ------ Search -------- */
  --search-button-icon-color: #555; /* dark neutral gray header */
  --search-button-icon-hover-color: #000; /* black */
  --search-button-bg-color: #d6d6d6; /* medium tan gray */
  --search-button-font-color: #555; /* dark neutral gray header */
  --search-button-bg-hover-color: #efefef; /* light tan gray  */
  --search-field-font-color: #5c5d5e; /* dark tan gray body */
  --search-field-border-color: #d6d6d6; /* medium tan gray */

/* ------ Main Navigation Bar -------- */
  --main-nav-bg-color: #FFF; /* white  */
  --main-nav-font-color: #666; /* dark neutral gray header */
  --main-nav-link-color: #666; /* dark neutral gray header */
  --main-nav-link-hover-color: #000; /* black */
  --main-nav-link-underline-color: rgba(170, 170, 170, 0); /* transparent medium neutral gray */;
  --main-nav-link-hover-underline-color: #AAA; /* medium neutral gray */
  --main-nav-border-color: #e9e9e9; /* light tan gray */
  --main-nav-arrow-color: #d6d6d6; /* medium tan gray */
  --main-nav-sub-border-color: #d6d6d6; /* medium tan gray */
  --main-nav-sub-bg-color: #efefef; /* light tan gray  */
  --main-nav-sub-header-color: #555; /* dark neutral gray header */
  --main-nav-sub-image-bg: #efefef; /* light tan gray */
	
/* ------ Main Navigation Bar Mobile - */
  --main-nav-hamburger-color: #555; /* dark neutral gray header */
  --main-nav-X-color: #555; /* dark neutral gray header */
  --main-nav-mobile-box-shadow-color: rgba(0, 0, 0, .1); /* mostly transparent black */
  --main-nav-mobile-sub-bg-color: #FFF; /* white  */
  --main-nav-mobile-sub-arrow-color: #555; /* dark neutral gray header */

/* ------ Information Footer -------- */
  --footer-info-bg-color: #eeeeee; /* light neutral gray */
  --footer-info-font-color: #555; /* dark neutral gray header */
  --footer-info-link-color: #555; /* dark neutral gray header */
  --footer-info-link-hover-color: #000; /* black */
  --footer-info-link-underline-color: rgba(170, 170, 170, 0); /* transparent medium neutral gray */;
  --footer-info-link-hover-underline-color: #AAA; /* medium neutral gray */
  --footer-info-social-link-color: #555; /* dark neutral gray header */
  --footer-info-social-link-hover-color: #000; /* black */
  --footer-info-accent-color: #000; /* black */
  --footer-info-arrow-color: #555; /* dark neutral gray header */

/* ------ Legal Footer Bar ----------- */
  --footer-legal-bg-color: #d6d6d6; /* medium tan gray */
  --footer-legal-font-color: #555; /* dark neutral gray header */
  --footer-legal-link-color: #555; /* dark neutral gray header */
  --footer-legal-link-hover-color: #000; /* black */
  --footer-legal-link-underline-color: rgba(170, 170, 170, 0); /* transparent medium neutral gray */;
  --footer-legal-link-hover-underline-color: #AAA; /* medium neutral gray */
	
/* ------ General Colors -------------- */
  --general-span-accent-color: #000; /* black */
  --general-link-color: #555; /* dark neutral gray header */
  --general-link-hover-color: #555; /* dark neutral gray header */
  --general-product-price: #666; /* dark neutral gray price */
  --general-product-link-hover: #555; /* dark neutral gray header */
  --general-product-image-border-color: transparent; /* transparent */
  --general-product-image-hover-border-color: #d6d6d6; /* medium tan gray */
  --general-product-overlay-bg-color: rgba(255, 255, 255, 0.6); /* slightly transparent white */
	
/* ------ Featured Button Colors --------- */
  --featured-button-border-color: rgba(0,0,0,0); /* transparent */
  --featured-button-bg-hover-color: rgba(255, 255, 255, 0.6); /* mostly transparent white */
  --featured-button-border-hover-color: #d6d6d6; /* medium tan gray */
  --featured-button-font-color: #555; /* dark neutral gray header */
  --featured-button-arrow-color: #555; /* dark neutral gray header */
  --featured-button-mobile-bg-color: #efefef; /* light tan gray  */
  --featured-button-mobile-border-color: #d6d6d6; /* medium tan gray */
  --featured-button-mobile-text-bg-color: rgba(255, 255, 255, 0.8); /* slightly transparent white */

/* ------ Showroom Colors --------- */
  --showroom-link-hover: #000; /* black */

/* ------ Custom Button Colors --------- */
  --dark-button-bg-color: #efefef; /* light tan gray  */
  --dark-button-border-color: #d6d6d6; /* medium tan gray */
  --dark-button-hover-bg-color: #FFF; /* white */
  --dark-button-hover-font-color: #000; /* black */
  --dark-button-hover-border-color: #d6d6d6; /* medium tan gray */
	
/* ------ Hero Colors --------- */
  --hero-text-bg-color: rgba(255,255,255,0.4); /* mostly transparent white */
  --hero-font-color: #555; /* dark neutral gray header */

/* ------ WooCommerce Stock Colors --------- */
  --woo-stock-in-stock-color: #006600; /* green */
  --woo-stock-backorder-color: #d78700; /* orange */
  --woo-stock-out-of-stock-color: #d50000; /* red */

/* ------ Blog Colors --------- */
  --blog-nav-link-color: #555; /* dark neutral gray header */
  --blog-nav-link-hover-color: #000; /* black */
  --blog-nav-link-underline-color: rgba(170, 170, 170, 0); /* transparent medium neutral gray */;
  --blog-nav-link-hover-underline-color: #AAA; /* medium neutral gray */

/* ------ Custom Gallery Colors --------- */
  --gallery-control-bg-color: rgba(85,85,85,0.8); /* slightly transparent dark grey */
  --gallery-control-active-bg-color: rgba(85,85,85,1); /* slightly transparent dark grey */
  --gallery-arrow-color: #555; /* dark neutral gray header */
  --gallery-arrow-bg-color: rgba(255,255,255,0.6); /* mostly transparent white */

/* ------ Custom Map Colors --------- */
  --map-label-font-color: #555; /* dark neutral gray header */
  --map-search-bar-bg-color: #efefef; /* light tan gray  */
  --map-search-bar-border-color: #d6d6d6; /* medium tan gray */
  --map-search-button-bg-color: #FFF; /* white */
  --map-search-button-font-color: #555; /* dark neutral gray header */
  --map-search-button-border-color: #d6d6d6; /* medium tan gray */
  --map-search-button-hover-font-color: #000; /* black */
  --map-search-field-bg-color: #FFF; /* white */
  --map-search-field-font-color: #555; /* dark neutral gray header */
  --map-search-field-border-color: #d6d6d6; /* medium tan gray */
  --map-dropdown-bg-color: #FFF; /* white */
  --map-dropdown-font-color: #555; /* dark neutral gray header */
  --map-dropdown-border-color: #d6d6d6; /* medium tan gray */
  --map-arrow-color: #d6d6d6; /* medium tan gray */
  
  
/* ------ Set Images ------------------ */
  --product-document-ai-image: url('../image/AssemblyInstructions-Icon-sm.webp'); /* assembly instructions document icon */
  --product-document-data-image: url('../image/Datasheet-Icon-sm.webp'); /* data sheet document icon */
  --menu-image-interior: url('../image/Kalco-menu-image-01.webp'); /* background image for interior menu */
}
/* -------------------------------------- */
/* -------- End Variables ------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* -------- Start Google Fonts ------- */
/* -------------------------------------- */

.fjalla-one-regular {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.mulish-<uniquifier> {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* -------------------------------------- */
/* -------- End Google Fonts ------- */
/* -------------------------------------- */


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

/* -------------------------------- */
/* --- Start header.php Styling --- */
/* -------------------------------- */

/* Start Top Menu */
.desktop-top-nav,
.mobile-top-nav
{
    background-color: var(--top-menu-bg-color);
    display: flex;
    flex-direction: row;
    align-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	border-bottom: solid 0px;
}

.desktop-top-nav{
    padding: 5px 20px;
}

.mobile-top-nav{
    padding: 5px 0px;
}
	
.desktop-top-nav ul{
	display: flex;
	flex-direction: row;
}

.mobile-top-menu-container{
	width:100%;
}

.mobile-top-nav ul{
	justify-content: space-between;
    width: 100%;
	padding-top:2px;
    align-items: center;
    display: flex;
	flex-direction: row;
	word-break: break-all;
}

.desktop-top-nav a
{
	color: var(--top-menu-link-color);
	text-transform: uppercase;
	margin: 0 10px 0 10px;
	vertical-align: middle;
	font-weight:700;
	text-decoration: underline solid var(--top-menu-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;

}

.mobile-top-nav a {
	color: var(--top-menu-link-color);
	text-transform: uppercase;
	margin: 0 10px 0 10px;
	vertical-align: middle;
	display: flex;
    flex-direction: column;
    align-items: center;
	word-break: keep-all;
    text-align: center;
	line-height: 2.2em;
	font-size: 9px;
	font-weight:700;
}

.mobile-top-nav .brands a {
	width: 50px;
}

.mobile-top-nav a span.text {
	display: none;
}

.desktop-top-nav a:hover
{
	color: var(--top-menu-link-hover-color);
	text-decoration: underline solid var(--top-menu-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

.mobile-top-nav a:hover
{
	color: var(--top-menu-link-hover-color);
}


/* Show submenus on hover */
.mobile-top-menu-container > ul li:hover > .sub-menu{
    display: flex;
}

.mobile-top-menu-container > ul li:hover > .sub-menu:before{
    opacity: 1;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
	.mobile-top-menu-container > ul .sub-menu {
		top: calc(41px + var(--top-offset, 0px));
	}
}

/* Mobile Styles */
@media all and (max-width: 768px) {
	.mobile-top-menu-container > ul .sub-menu {
		top: calc(51px + var(--top-offset, 0px));
	}
}

.mobile-top-menu-container > ul .sub-menu {
	flex-direction:column;
	display: none;
	align-items:center;
    position: absolute;
    left: 0px;
    background: var(--top-menu-sub-bg-color);
    padding: 10px 10px;
    box-shadow: 0 2px 5px var(--top-menu-sub-box-shadow-color);
    z-index: 1000;
	white-space: nowrap;
	border-top: 2px solid var(--top-menu-sub-top-border-color);
    border-bottom: 1px solid var(--top-menu-sub-bottom-border-color);
}

.mobile-top-menu-container > ul .sub-menu li{
	padding: 0.1em 0;
}

.desktop-top-nav
{
    justify-content: space-between;
}

.mobile-top-nav{
	display: none;
    justify-content: center;
}

.desktop-top-nav .et-pb-icon,
.mobile-top-nav .et-pb-icon {
	font-weight: 700;
}

.logo-container {
	height: 190px;
    text-align: center;
	padding: 0;
}

.logo-container img {
	height: 100%;
	width: auto;
}

.main-nav{
	background-color: var(--main-nav-bg-color);
	border-top: solid 1px var(--main-nav-border-color);
	border-bottom: solid 1px var(--main-nav-border-color);
}

.mobile-main-nav{
	background-color: var(--main-nav-bg-color);
	border-top: solid 1px var(--main-nav-border-color);
	border-bottom: solid 1px var(--main-nav-border-color);
}

.primary-menu{
	display: flex;
	justify-content: space-between;
}

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

/* Ensure all submenus are initially hidden */

/* Show submenus on hover */
.secondary-menu-container > ul li:hover > .sub-menu{
    display: flex;
}

.secondary-menu-container > ul li:hover > .sub-menu:before{
    opacity: 1;
}

.secondary-menu-container > ul .sub-menu {
	flex-direction:column;
	display: none;
    position: absolute;
    right: 20px;
	top: calc(3.44em + var(--top-offset, 0px));
    background: var(--top-menu-sub-bg-color);
    padding: 10px 10px;
    z-index: 1000;
}

.secondary-menu-container > ul .sub-menu li{
	padding: 0.5em 0 0 0;
}

/* submenu arrow effect */
.secondary-menu-container > ul .sub-menu:before
{
	content: '';
    position: absolute;
    top: -8px; /* This likely does not need adjusting */
    left: calc(50% - 8px);
    margin: 0 auto;
    width: 0;
    height: 0;
	opacity: 0;
    border-bottom: 8px solid var(--top-menu-sub-arrow-color);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
	transition: opacity 80ms linear;
}

/* -------------------------------------------- */
/* start search styling */

.main-nav .search-button{
	margin-right: 35px !important;
    border: none;
    background: none;
	cursor: pointer;
}
.main-nav .search-button svg{
	fill: var(--search-button-icon-color);	
}

.main-nav .search-button:hover svg{
	fill: var(--search-button-icon-hover-color);	
}

/* Initially hidden */
.main-nav .aws-container {
	display: block;
    pointer-events: none; 
    visibility: hidden;
    opacity: 0;
    position: absolute;
	top: -50px!important;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 1000ms ease-in-out;
}

.main-nav .search-wrapper{
    display:flex;
  }

/* When the search button is clicked OR the search form is focused */
.main-nav .search-wrapper:focus-within .aws-container {
	display:block;
    pointer-events: auto; 
    visibility: visible;  
    opacity: 1;
    top: calc(113.25px + var(--top-offset-half, 0px))!important;
}


.main-nav .aws-search-result{
	left: 0vw!important;
    width: 100vw!important;
}

.main-nav .aws-container .aws-search-form {
    width: 97%;
	height: 39.5px;
}

.main-nav .aws-container .aws-search-form .aws-wrapper {
	margin: 0 0 0 3%!important;
}

.main-nav .aws-container .aws-search-form .aws-form-btn{
	background-color: var(--search-button-bg-color);
	border: 0px solid;
}

.main-nav .aws-container .aws-search-form .aws-form-btn:hover{
	background-color: var(--search-button-bg-hover-color);
}

.main-nav .aws-container .aws-search-form .aws-search-btn_icon {
	color: var(--search-button-font-color)!important;
}

.main-nav .aws-container .aws-search-field {
    color: var(--search-field-font-color);
    border: 1px solid var(--search-field-border-color);

}

/* mobile search styling */
/* start search styling */

.mobile-main-nav .search-button{
	margin-right: 0px !important;
    border: none;
    background: none;
	cursor: pointer;
}
.mobile-main-nav .search-button svg{
	fill: var(--search-button-icon-color);	
}

.mobile-main-nav .search-button:hover svg{
	fill: var(--search-button-icon-hover-color);	
}

/* Initially hidden */
.mobile-main-nav .aws-container {
	display: block;
    pointer-events: none; 
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -50px!important;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 1000ms ease-in-out;
}

.mobile-main-nav .search-wrapper{
    display:flex;
  }

/* When the search button is clicked OR the search form is focused */
.mobile-main-nav .search-wrapper:focus-within .aws-container {
	display:block;
    pointer-events: auto; 
    visibility: visible; 
    opacity: 1;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
	.mobile-main-nav .search-wrapper:focus-within .aws-container {
		top: calc(117px + var(--top-offset-half, 0px))!important;
	}
}

/* Mobile Styles */
@media all and (max-width: 768px) {
	.mobile-main-nav .search-wrapper:focus-within .aws-container {
		top: calc(121px + var(--top-offset-half, 0px))!important;
	}
}



.mobile-main-nav .aws-search-result{
	left: 0vw!important;
    width: 100vw!important;
}

.mobile-main-nav .aws-container .aws-search-form {
    width: 97%;
	height: 45px;
}

.mobile-main-nav .aws-container .aws-search-form .aws-wrapper {
	margin: 0 0 0 3%!important;
}

.mobile-main-nav .aws-container .aws-search-form .aws-form-btn{
	background-color: var(--search-button-bg-color);
	border: 0px solid;
}

.mobile-main-nav .aws-container .aws-search-form .aws-form-btn:hover{
	background-color: var(--search-button-bg-hover-color);
}

.mobile-main-nav .aws-container .aws-search-form .aws-search-btn_icon {
	color: var(--search-button-font-color)!important;
}

.mobile-main-nav .aws-container .aws-search-field {
    color: var(--search-field-font-color);
    border: 1px solid var(--search-field-border-color);

}


/* end search styling */
/* ----------------------------------------- */

/* -------------------------------- */
/* --- Start Mega Menu Styling --- */
/* -------------------------------- */

/* -------------------------------- */
/* --- Start Primary Navigation --- */
/* -------------------------------- */

/* Ensure the main nav and menu container are full width */
.main-nav, 
.main-nav > .primary-menu-container, 
.main-nav > .primary-menu-container > ul {
    width: 100%;
    justify-content: space-between;
    padding-left: 2.6%;
    text-transform: uppercase;
    padding: 0.2em 20px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Default Link Styling */
.main-nav a, 
.main-nav > .primary-menu-container a, 
.main-nav > .primary-menu-container > ul a {
    color: var(--main-nav-link-color);
	font-weight: 600;
	text-decoration: underline solid var(--main-nav-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Hover Effect */
.main-nav a:hover, 
.main-nav > .primary-menu-container a:hover, 
.main-nav > .primary-menu-container > ul a:hover {
    color: var(--main-nav-link-hover-color);
	text-decoration: underline solid var(--main-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Prevent menu from wrapping */
.main-nav {
    flex-wrap: nowrap !important;
}

/* Keep menus in a single line */
.main-nav > .primary-menu-container > ul, 
.main-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}

/* -------------------------------- */
/* --- Mega Menu Submenu Styling --- */
/* -------------------------------- */

/* Prevent all submenus from displaying initially */
.main-nav .mega-menu > ul.sub-menu,
.main-nav .mega-menu > ul.sub-menu > li > ul.sub-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: calc(263px + var(--top-offset, 0px));
    width: 100vw; /* Full screen width */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    background-color: var(--main-nav-sub-bg-color);
    padding: 10px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    z-index: 1000;
    border-top: 4px solid var(--main-nav-sub-border-color);
}

/* Ensure submenus show only on hover */
.main-nav .mega-menu:hover > ul.sub-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

/* Ensure submenus stay open when moving between them */
.main-nav .mega-menu:hover > ul.sub-menu,
.main-nav .mega-menu > ul.sub-menu:hover {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Hide deeper submenus unless hovering */
.main-nav .mega-menu:hover > ul.sub-menu > li > ul.sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    padding: 0 0 0 35px;
    width: 100%;
    border: none;
    box-shadow: none;
    font-size: 11px;
}

/*mega menu inside links padding */
.main-nav .mega-menu:hover > ul.sub-menu > li > ul.sub-menu li:not(.menu-image) {
	padding: 0 0 0.5em 0;
}

/* Keep the mega menu item bold when hovering over the submenu */
.main-nav .mega-menu:hover > a {
	text-decoration-color: var(--main-nav-link-underline-color)!important;
	cursor:context-menu!important;
    color: var(--main-nav-link-hover-color)!important;
}

.main-nav .mega-menu:hover > a:hover {
	text-decoration-color: var(--main-nav-link-underline-color)!important;
}

/* Ensure submenu links remain normal weight until hovered */
.main-nav .mega-menu > ul.sub-menu > li > a {
    font-weight: 600;
	text-decoration: underline solid var(--main-nav-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Only bold the submenu link when it is directly hovered */
.main-nav .mega-menu > ul.sub-menu > li > a:hover {
    font-weight: 800;
    color: var(--main-nav-link-hover-color);
	text-decoration: underline solid var(--main-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Style mega menu items */
.main-nav .mega-menu > ul.sub-menu > li {
    position: relative;
    padding: 15px;
}

/* Mega menu links */
.main-nav .mega-menu > ul.sub-menu > li:not(.menu-image) > a {
    display: none; /*hide menu header*/
    padding: 10px 20px;
    color: var(--main-nav-sub-header-color);
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    pointer-events: none;
	text-decoration: underline solid var(--main-nav-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Hide menu image links */
.main-nav .menu-image a {
    display: none;
}

/* Hover effect for submenu items */
.main-nav .mega-menu > ul.sub-menu > li a:hover {
    color: var(--main-nav-link-hover-color);
	text-decoration: underline solid var(--main-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/* Keep the pointer active for the mega menu */
.main-nav .mega-menu:hover > a,
.main-nav .mega-menu:hover > ul {
    pointer-events: auto;
}


/* -------------------------------- */
/* --- Arrow Indicator for Mega Menu --- */
/* -------------------------------- */

.main-nav .mega-menu > a:before {
    content: '';
    position: relative;
    bottom: -2px;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--main-nav-arrow-color); /* Arrow color */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Show arrow when hovering */
.main-nav .mega-menu:hover > a:before {
    opacity: 1;
}

/* -------------------------------- */
/* --- Mega Menu Layout --- */
/* -------------------------------- */

.main-nav .mega-menu > ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    height: 45vh !important;
}

/* Mega menu image container */
.main-nav .mega-menu > ul > li.menu-image {
    margin-right: 50px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center !important;
    transition: all 500ms ease-in-out !important;
    background-color: var(--main-nav-sub-image-bg);
}

/* ------- Image Container Images ------- */
/* Default background image for Interior */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-image {
  background-image: var(--menu-image-interior);
}


/* Ensure submenus stay hidden unless hovered */
.main-nav .mega-menu > ul > li:not(.menu-image) {
    width: 29%;
}


/* --- Mobile Mega-Menu Styling ---- */

/* Hide submenus by default */
.mobile-main-nav .primary-menu .mega-menu > .sub-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

/* Expand the mega menu when hovered or clicked (CSS-only) */
.mobile-main-nav .primary-menu .mega-menu:has(:hover) > .sub-menu,
.mobile-main-nav .primary-menu .mega-menu:has(:focus-within) > .sub-menu {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
}

/* Hide menu headers (Column 1, Column 2) */
.mobile-main-nav .primary-menu .mega-menu .menu-header > a {
    display: none;
}

/* Show only the items inside the expanded .menu-header */
.mobile-main-nav .primary-menu .mega-menu .menu-header .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
	background-color: var(--main-nav-mobile-sub-bg-color);
    padding: 10px 0;
    margin-bottom: 2.5px;
}

/* Completely hide menu images */
.mobile-main-nav .primary-menu .menu-image {
    display: none;
}

/* Add an arrow next to mega-menu items */
.mobile-main-nav .primary-menu .mega-menu > a {
    position: relative;
    display: flex;
    align-items: center;
	justify-content:center;
}

/* Default arrow (collapsed state) */
.mobile-main-nav .primary-menu .mega-menu > a::after {
    font-size: 12px;
	font-family: ETmodules !important;
    font-weight: 400 !important;
    content: "\43";
    color: var(--main-nav-mobile-sub-arrow-color);
    padding-left: 5px;
    transition: transform 0.3s ease-in-out;
}

/* Rotate arrow when expanded */
.mobile-main-nav .primary-menu .mega-menu:has(.sub-menu:visible) > a::after {
    transform: rotate(180deg);
}

.all-product{
	margin-top: 1em;
}




/* -------------------------------- */
/* --- End Mega Menu Styling --- */
/* -------------------------------- */

/* Ensure the main nav and menu container are full width */
.mobile-main-nav, 
.mobile-main-nav > .primary-menu-container, 
.mobile-main-nav > .primary-menu-container > ul {
    width: 100%;
    justify-content: center;
    padding-left: 2.6%;
    text-transform: uppercase;
    padding: 0.2em 0px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Default Link Styling */
.mobile-main-nav a, 
.mobile-main-nav > .primary-menu-container a, 
.mobile-main-nav > .primary-menu-container > ul a {
    color: var(--main-nav-link-color);
	line-height: 2.7em;
}

/* Default Link Styling */
.mobile-main-nav .primary-menu .mega-menu .menu-header .sub-menu a {
	line-height: 2em;
	font-size: 12px;
	
}

/* Hover Effect */
.mobile-main-nav a:hover, 
.mobile-main-nav > .primary-menu-container a:hover, 
.mobile-main-nav > .primary-menu-container > ul a:hover {
    color: var(--main-nav-link-hover-color);
}

/* Prevent menu from wrapping */
.mobile-main-nav {
	display: none;
    flex-wrap: nowrap !important;
	justify-content: space-between;
	flex-direction:row;
	padding: 0.2em 20px;
}

/* Keep menus in a single line */
.mobile-main-nav > .primary-menu-container > ul {
    flex-wrap: nowrap;
    white-space: nowrap;
    display: none;
    flex-direction: column;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
	.mobile-main-nav > .primary-menu-container {
		top: calc(278px + var(--top-offset, 0px));
	}
}

/* Mobile Styles */
@media all and (max-width: 768px) {
	.mobile-main-nav > .primary-menu-container {
		top: calc(286px + var(--top-offset, 0px));
	}
}

/* Hide menu by default */
	.mobile-main-nav > .primary-menu-container {
    	display: none;
    	position: absolute;
    	left: 0;
		z-index:999;
   		width: 100%;
    	background-color: var(--main-nav-sub-bg-color);
    	flex-direction: column;
    	text-align: center;
		padding: 10px 0px;
   	 	box-shadow: 0 2px 5px var(--main-nav-mobile-box-shadow-color);
    	border-top: 2px solid var(--main-nav-sub-border-color);
		border-bottom: 1px solid var(--main-nav-sub-border-color);
	}


/* Hamburger button styles */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    background: none;
    border: none;
    z-index: 999;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--main-nav-hamburger-color);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


/* Show menu when button is clicked */
.mobile-main-nav:has(.hamburger-menu:active) .primary-menu-container,
.mobile-main-nav:has(.hamburger-menu:focus-within) .primary-menu-container,
.mobile-main-nav:has(.primary-menu-container:active) .primary-menu-container,
.mobile-main-nav:has(.primary-menu-container:focus-within) .primary-menu-container{
    display: flex;
}

/* Animate hamburger into "X" */
.mobile-main-nav:has(.hamburger-menu:active) .hamburger-menu span:nth-child(1),
.mobile-main-nav:has(.hamburger-menu:focus-within) .hamburger-menu span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
	background-color: var(--main-nav-X-color);
}

.mobile-main-nav:has(.hamburger-menu:active) .hamburger-menu span:nth-child(2),
.mobile-main-nav:has(.hamburger-menu:focus-within) .hamburger-menu span:nth-child(2) {
    opacity: 0;
}

.mobile-main-nav:has(.hamburger-menu:active) .hamburger-menu span:nth-child(3),
.mobile-main-nav:has(.hamburger-menu:focus-within) .hamburger-menu span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
	background-color: var(--main-nav-X-color);
}

/* --- Header Media Queries --- */


/* Mobile Styles and Tablet Styles */
@media all and (max-width: 820px) {
    .mobile-top-nav{
	  display: flex;
	}  
	.desktop-top-nav{
	  display: none;
	} 
	

	.mobile-main-nav > .primary-menu-container > ul, 
	.mobile-main-nav {
    	display: flex;
	}
	

	.main-nav > .primary-menu-container > ul, 
	.main-nav {
    	display: none;
	}
	
	
}




/* -------------------------------- */
/* ---End header.php Styling --- */
/* -------------------------------- */


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


/* ----------------------------------------- */
/* --- Start General Font Custom Styling --- */
/* ----------------------------------------- */

span.accent {
	color: var(--general-span-accent-color);
	text-transform: uppercase;
	font-weight:700;
	font-size: 0.8em;
}

a{
	font-weight:600;
	transition:all 500ms ease;
}

a:hover{
	color: var(--general-link-hover-color);
}


.product .woocommerce-loop-product__title {
	font-size: 1em !important;
	transition:all 500ms ease;
}

.product .woocommerce-Price-amount {
	font-size: 1em !important;
	color: var(--general-product-price);
	transition:all 500ms ease;
}

li.product a:hover .woocommerce-loop-product__title,
li.product a:hover .woocommerce-Price-amount{
	color: var(--general-product-link-hover)!important;
	font-weight:700!important;
	
}


@media all and (min-width: 981px){
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product .woocommerce-loop-product__title,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product .woocommerce-Price-amount
	{
		font-size: 0.9em !important;
	} 
}


/* --------------------------------------- */
/* --- End General Font Custom Styling --- */
/* --------------------------------------- */

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

/* ------------------------------ */
/* ----- Start Hero Styling ----- */
/* ------------------------------ */

.hero{
	padding: 0!important;	
}

.et_pb_fullwidth_header:not(.et_pb_fullscreen) .et_pb_fullwidth_header_container,
.et_pb_fullwidth_header .et_pb_fullwidth_header_container{
	max-width: none!important;
	width:100%!important;
}

.hero .header-content-container{ 
	position:absolute;
	padding-bottom: 8%;
}

.hero .header-content{
	margin: 0px auto!important;
    width: 100%!important;
    max-width: 1600px!important;
    background-color: var(--hero-text-bg-color);
    padding: 40px;
}

@media all and (max-width: 980px){
	.hero .header-content-container{ 
	  padding-bottom: 0;
	}
}

@media all and (max-width: 767px){
    .hero .header-content{
        padding: 40px 10px;
    }
    .hero .header-content-container{ 
        padding-top: 15%;
    }
}

.hero .header-content > h1,
.hero .header-content > span 
{
    font-family: 'Mulish', Helvetica, Arial, Lucida, sans-serif;
    color: var(--hero-font-color)!important;
}

.hero .header-content > h1 {  
    font-weight: 300;
    text-transform: uppercase;
    font-size: 2vw;
    line-height: 1.5em; 
    padding-bottom: 30px!important;
}

@media all and (min-width: 768px) and (max-width: 980px){
	.hero .header-content > h1{
	  font-size: 2.3em;
	}
}

@media all and (max-width: 767px){
	.hero .header-content > h1{
	  font-size: 1.8em;
	}
}

.hero .header-content > span {
    font-size: 1.2vw;
    line-height: 1.8em;
}

@media all and (min-width: 768px) and (max-width: 980px){
	.hero .header-content > span{
	  font-size: 20px;
	}
}

@media all and (max-width: 767px){
	.hero .header-content > span{
	  font-size: 20px;
	}
}

.et_pb_fullwidth_header .header-image{
	margin-left: 0!important;
	margin-right: 0!important;
}

html :where(img[class*=wp-image-]) {
    height: auto!;
    max-width: none;
    width: 100%;
}



/* ---------------------------- */
/* ----- End Hero Styling ----- */
/* ---------------------------- */

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

/* ----------------------------------------------- */
/* --- Start Woocommerce General Stock Styling --- */
/* ----------------------------------------------- */

/* General Stock Status Styling  */
.woocommerce_stock_wrapper {
    font-size: 14px;
    font-weight: 600!important;
    margin-top: 5px;
    display: inline-block;
}

/* In Stock (WooCommerce Green) */
.woocommerce_stock_wrapper.in-stock, .woocommerce div.product .stock.in-stock{
    color: var(--woo-stock-in-stock-color)!important;
}

/* Backorder (WooCommerce Orange) */
.woocommerce_stock_wrapper.backorder, .woocommerce div.product .stock.backorder{
    color:var(--woo-stock-backorder-color)!important;
}

/* Out of Stock (WooCommerce Red) */
.woocommerce_stock_wrapper.out-of-stock, .woocommerce div.product .stock.out-of-stock{
    color: var(--woo-stock-out-of-stock-color)!important;
}


/* ----------------------------------------------- */
/* --- End Woocommerce General Stock Styling --- */
/* ----------------------------------------------- */




/* ----------------------------------------------------- */
/* --- Start Woocommerce Product Page Column Styling --- */
/* ----------------------------------------------------- */

.woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.woocommerce-page ul.products li.product a img, .woocommerce ul.products li.product a img{
  margin: 0!important;
  transition: all 500ms ease-in-out;
}

.woocommerce-page ul.products li.product a img:hover, 
.woocommerce ul.products li.product a img:hover{
  transition: all 500ms ease-in-out;
}

.et_shop_image{
  border: 2px solid var(--general-product-image-border-color)!important;
  transition: all 500ms ease-in-out;
}

.et_shop_image:hover{
  border: 2px solid var(--general-product-image-hover-border-color)!important;
  transition: all 500ms ease-in-out;
}


@media all and (min-width:768px) and (max-width:980px){
	.woocommerce ul.product li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
	.et_pb_shop ul.products.columns-1 li.product,
	.et_pb_shop ul.products.columns-2 li.product,
	.et_pb_shop ul.products.columns-3 li.product,
	.et_pb_shop ul.products.columns-4 li.product,
	.et_pb_shop ul.products.columns-5 li.product,
	.et_pb_shop ul.products.columns-6 li.product
	{
    	width: calc(33.333333333333% - 10px)!important;
		margin: 0 15px 15px 0 !important;
   	}
	
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li:nth-child(3n+3), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li:nth-child(3n+3), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li:nth-child(3n+3), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li:nth-child(3n+3), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li:nth-child(3n+3), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li:nth-child(3n+3),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li:nth-child(3n+3),
	.et_pb_shop ul.products.columns-1 li.product:nth-child(3n+3),
	.et_pb_shop ul.products.columns-2 li.product:nth-child(3n+3),
	.et_pb_shop ul.products.columns-3 li.product:nth-child(3n+3),
	.et_pb_shop ul.products.columns-4 li.product:nth-child(3n+3),
	.et_pb_shop ul.products.columns-5 li.product:nth-child(3n+3),
	.et_pb_shop ul.products.columns-6 li.product:nth-child(3n+3)
	{
		margin-right: 0!important;
	}
}


@media all and (max-width:767px){
	.woocommerce ul.product li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
	.et_pb_shop ul.products.columns-1 li.product,
	.et_pb_shop ul.products.columns-2 li.product,
	.et_pb_shop ul.products.columns-3 li.product,
	.et_pb_shop ul.products.columns-4 li.product,
	.et_pb_shop ul.products.columns-5 li.product,
	.et_pb_shop ul.products.columns-6 li.product{
    	width: calc(50% - 10px)!important;
		margin: 0 15px 15px 0 !important;
   	}
	
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li:nth-child(2n+2), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li:nth-child(2n+2), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li:nth-child(2n+2), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li:nth-child(2n+2), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li:nth-child(2n+2), 
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li:nth-child(2n+2),
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li:nth-child(2n+2),
	.et_pb_shop ul.products.columns-1 li.product:nth-child(2n+2),
	.et_pb_shop ul.products.columns-2 li.product:nth-child(2n+2),
	.et_pb_shop ul.products.columns-3 li.product:nth-child(2n+2),
	.et_pb_shop ul.products.columns-4 li.product:nth-child(2n+2),
	.et_pb_shop ul.products.columns-5 li.product:nth-child(2n+2),
	.et_pb_shop ul.products.columns-6 li.product:nth-child(2n+2)
	{
		margin-right: 0!important;
	}
}


/* ----------------------------------------------------- */
/* --- End Woocommerce Product Page Column Styling --- */
/* ----------------------------------------------------- */
/* ---- Start product carousel styling ---- */
.dwe_single_woo_product img {
  border: 2px solid var(--general-product-image-border-color);
 transition: all 300ms ease;
}

.dwe_single_woo_product:hover img{
  border: 2px solid var(--general-product-image-hover-border-color);
 transition: all 300ms ease;
}

.dwe_single_woo_product .dwe_single_woo_product_thumbnail a:after{
   transition: all 500ms ease!important;
    color: var(--general-link-color);
    font-family: ETmodules !important;
    font-size: 32px;
    display:flex;
    justify-content:center;
    align-items: center!important;
}

.dwe_single_woo_product:hover .dwe_single_woo_product_thumbnail a:after {
    background: var(--general-product-overlay-bg-color);
    content: '\54';
    color: var(--general-link-color);
	font-weight: normal;
}

.dwe_single_woo_product .dwe_single_woo_product_title a, .dwe_single_woo_product .dwe_single_woo_product_price  {
    font-weight: normal!important;
    color: var(--general-product-price);
    transition: all 300ms ease;
}

.dwe_single_woo_product:hover .dwe_single_woo_product_title a, .dwe_single_woo_product:hover .dwe_single_woo_product_price  {
    font-weight: 700!important;

}
/* ---- End product carousel styling --- */

/* -------------------------------------------------- */
/* --- Start Woocommerce Product Carousel Styling --- */
/* -------------------------------------------------- */


/* ------------------------------------------------ */
/* --- End Woocommerce Product Carousel Styling --- */
/* ------------------------------------------------ */


/* -------------------------------------- */
/* --- Start Product Documents Styles --- */
/* -------------------------------------- */

.pd-doc-list{
  display: flex;
  flex-direction: row;
  list-style: none!important;
  padding: 0 0 23px 0em!important;
}

.pd-doc-list li{
  margin-right:1em;
}

.pd-doc-ai, 
.pd-doc-data {
  background-size: cover;
  width: 50px;
  height: 50px; 
}

.pd-doc-ai {
  background-image: var(--product-document-ai-image);
}

.pd-doc-data {
  background-image: var(--product-document-data-image);
}

.pd-doc-list li.pd-doc-ai a,
.pd-doc-list li.pd-doc-data a
{
    display: block; /* Make the link fill the entire  */
    width: 100%;
    height: 100%;
}


/* -------------------------------------- */
/* --- End Product Documents Styles --- */
/* -------------------------------------- */



/* ---------------------------------- */
/* --- Start Simple Banner Styles --- */
/* ---------------------------------- */

/* ---- start simple banner styling ---- */
.simple-banner-text span{
	display: flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}

#notice-icon{
	font-size: 2em!important;
	color: #627D98!important;
	padding-right:0.5em!important;
}

#notice-content{
	display:flex;
	flex-direction:column;
	padding-right:0.75em;
	align-items:flex-start;
	font-family: 'Mulish', Helvetica, Arial, Lucida, sans-serif;
}

#notice-title{
	letter-spacing: 1px;
	font-size: 0.9em;
	text-transform:uppercase;
	font-weight:800;
	padding-right:0.5em;
	text-align:left;
}

#notice-desc{
	text-align:left;
	display: inline;
	font-weight: 600;
}
/* ---- end simple banner styling ---- */

/* -------------------------------- */
/* --- End Simple Banner Styles --- */
/* -------------------------------- */


/* ------------------------------------------ */
/* --- Start Custom Gallery Slider Styles --- */
/* ------------------------------------------ */

/* ---- Start gallery slider styling ---- */
/*set the height of the slide image*/
.et_pb_gallery_fullwidth .et_pb_gallery_image img {
   width: auto;
   height: 80vh;
   max-height: 1500px;
  object-fit: contain;
}
/*align the slide image to the middle*/
.et_pb_gallery_image {
   line-height: 0;
   padding-top: auto;
   padding-bottom: auto;
   text-align: center;
}

/* style navigation dots*/
.et-pb-controllers {
	position:relative;
	padding:0.25em;
	height: auto;
	bottom: 0;
}

.et-pb-controllers a {
	line-height: 4px;
	width: 17px!important;
    height: 4px!important;
    font-size:1em;
	background-color: var(--gallery-control-bg-color)!important;
}

.et-pb-controllers .et-pb-active-control{
	background-color: var(--gallery-control-active-bg-color)!important;
}

/*style the slider previous and next buttons*/
a.et-pb-arrow-prev,
a.et-pb-arrow-next{
	margin-top: -65px;
	border-radius: 5px;
    font-size: 2.5em;
	color: var(--gallery-arrow-color)!important;
    text-decoration: none!important;
    background: var(--gallery-arrow-bg-color);
	opacity: 1!important;
}

a.et-pb-arrow-prev {
   margin-left: 10px!important;
}

.et-pb-arrow-prev:before {
    content: "\44";
}

a.et-pb-arrow-next {
   margin-right: 10px!important;
}

.et-pb-arrow-next:before {
    content: "\45";
}

@media all and (min-width: 768px) {
   .et-pb-arrow-next {
      opacity: 1;
      right: 22px;
   }
   .et-pb-arrow-prev {
      opacity: 1;
      left: 22px;
   }
}
@media all and (max-width: 767px) {
   .et-pb-arrow-next {
      opacity: 1;
      right: 0;
   }
   .et-pb-arrow-prev {
      opacity: 1;
      left: 0;
   }

}

@media all and (max-width:980px){
		/*set the height of the slide image*/
   .et_pb_gallery_fullwidth .et_pb_gallery_image img {
     width: auto;
     height: 60vh;
     max-height: 1500px;
     object-fit: contain;
   }
}

/* ---- End gallery slider styling ---- */


/* ---------------------------------------- */
/* --- End Custom Gallery Slider Styles --- */
/* ---------------------------------------- */





/* -------------------------------------- */
/* --- Start Custom Map Styles --- */
/* -------------------------------------- */

/** --- start map color styling --- **/

#wpsl-wrap label {
  	text-transform: uppercase !important;
    color: var(--map-label-font-color) !important;
    font-size: 12px !important;
    font-weight: 700;
    white-space: nowrap;
}

.wpsl-search  {
	background: var(--map-search-bar-bg-color)!important;
	border:1px solid var(--map-search-bar-border-color)!important;
}

.wpsl-search #wpsl-search-btn{
	background: var(--map-search-button-bg-color)!important;
	color: var(--map-search-button-font-color)!important;
	border-radius: 0!important;
	font-weight:600!important;
	text-transform: uppercase!important;
	border: 1px solid var(--map-search-button-border-color)!important;
	transition: all 300ms ease!important;
}

.wpsl-search #wpsl-search-input{
	background: var(--map-search-field-bg-color)!important;
	color: var(--map-search-field-font-color)!important;
	border-radius: 0!important;
	font-weight:600!important;
	border: 1px solid var(--map-search-field-border-color)!important;
	transition: all 300ms ease!important;
}

.wpsl-search #wpsl-search-btn:hover{
	color: var(--map-search-button-hover-font-color)!important;
}

.wpsl-dropdown .wpsl-selected-item, .wpsl-dropdown li{
	background: var(--map-dropdown-bg-color)!important;
	color: var(--map-dropdown-font-color)!important;
	font-weight:500!important;
}

.wpsl-dropdown, #wpsl-search-wrap .wpsl-dropdown div{
	border-radius: 0px!important;
	border: 1px solid var(--map-dropdown-border-color)!important;
}

	
.wpsl-active .wpsl-selected-item:after {
    margin-top: -10px;
    border: 6px solid transparent;
    border-bottom: 8px solid var(--map-arrow-color);
}
.wpsl-selected-item:after {
    position: absolute;
    content: "";
    right: 12px;
    top: 50%;
    margin-top: -4px;
    border: 6px solid transparent;
    border-top: 8px solid var(--map-arrow-color);
}

.wpsl-store-details.wpsl-store-listing.wpsl-active-details:before {
    border-bottom: 5px solid var(--map-arrow-color)!important;
    border-top: none!important;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.wpsl-store-details.wpsl-store-listing.wpsl-active-details:before, .wpsl-store-details.wpsl-store-listing:before {
    position: absolute;
    content: '';
    bottom: 6px;
    right: 0;
    border-top: 5px solid var(--map-arrow-color);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.wpsl-input label, #wpsl-radius label, #wpsl-category label {
	width:auto!important;
}

/* -------------------------------------- */
/* --- End Custom Map Styles --- */
/* -------------------------------------- */


/* --------------------------------- */
/* --- Start Custom Video Styles --- */
/* --------------------------------- */

.plyr__control--overlaid, .plyr__control--overlaid:hover{
	background-color:#3b694e !important;
}

.plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #3b694e;
}

/* --------------------------------- */
/* --- End Custom Video Styles --- */
/* --------------------------------- */



/* ------------------------------------ */
/* ---Start Featured Button Styling --- */
/* ------------------------------------ */


/* -------- Start Front Page Featured Button Styling ------ */

@media all and (min-width: 1405px) {
	.featured-stretch .featured-button{
		aspect-ratio:1/1!important;
	}
}

@media all and (min-width: 981px){
	.featured-stretch {
		height:100%;
		align-items:stretch;
	}
	
	.featured-square .featured-button{
		aspect-ratio:1/1!important;
	}
	
	.featured-button{
  		margin: 0.25em!important;
  		border:2px solid var(--featured-button-border-color)!important;
  		display:flex!important;
  		align-items:center!important;
  		justify-content:center;
  		flex-direction: row!important;
  		transition: all 500ms ease!important;
  		background-blend-mode: saturation;
  		padding-left:1em;
	}

	.featured-button:hover {
  		background-color: var(--featured-button-bg-hover-color)!important;
  		border: 2px solid var(--featured-button-border-hover-color)!important;
	}

	.featured-square .featured-button:after{
  		font-family: ETmodules !important;
  		content:'\35';
  		font-size: 3em!important;
  		opacity: 0!important;
  		transition: all 800ms ease!important;
  		margin:0em 4em 0em -5.5em;
  		color: var(--featured-button-arrow-color)!important;
  		z-index: 1;
	}
	
	.featured-stretch .featured-button:after{
  		font-family: ETmodules !important;
  		content:'\35';
  		font-size: 2em!important;
  		opacity: 0!important;
  		transition: all 800ms ease!important;
  		margin:0em 4em 0em -5.5em;
		padding-bottom: 5px;
  		color: var(--featured-button-arrow-color)!important;
  		z-index: 1;
	}

	.featured-button p, .featured-button h2{
  		opacity:0;
  		transition: all 500ms ease!important;
  		color: var(--featured-button-font-color) !important;
	}

	.featured-button:hover p, .featured-button:hover h2{
  		opacity:1;
	}

	.featured-button:hover:after{
  		opacity: 1!important;
  		margin:0em 0em 0em 0em;
	}
}

@media all and (max-width: 980px){
	.featured-stretch .featured-button{
		aspect-ratio:1/1!important;
	}
	
	.featured-button {
		border:1px solid var(--featured-button-mobile-border-color)!important;
		background-color: var(--featured-button-mobile-bg-color);
	}
		
	.featured-stretch .featured-button .featured-text p,
	.featured-stretch .featured-button .featured-text h2{
		padding: 0!important;
		font-weight:600;
	}
	
	.featured-square .featured-button p {
		padding: 0em 1em 0.5em 1em!important;
	}
	
	.featured-square .featured-button h2 {
		font-weight: 500!important;
		padding-bottom: 0!important;
	}
	
}

@media all and (min-width: 768px) and (max-width: 980px){
  	.featured-button
  	{
    	margin: 0.25em!important;
  	}
	.featured-stretch .featured-button .featured-text{
		margin: 72% 0 0.5em 0;
    	padding: 1em;
    	background-color: var(--featured-button-mobile-text-bg-color);
    	text-align: center;	
	}
}

@media all and (max-width:767px){
  	.featured-button
  	{
    	margin: 5px 0 5px 0!important;
  	}
	.featured-stretch .featured-button .featured-text{
		margin: 80% 0 0.5em 0;
    	padding: 1em;
    	background-color: var(--featured-button-mobile-text-bg-color);
    	text-align: center;	
	}
}

@media (max-width: 479px) {
    .et_pb_gutters1 .et_pb_column, .et_pb_gutters1.et_pb_row .et_pb_column {
        margin: 5px 0 5px 0 !important;
    }
}


/* -------- End Front Page Featured Button Styling ------ */

/* ---------------------------------- */
/* ---End Featured Button Styling --- */
/* ---------------------------------- */

/* ----------------------------- */
/* ---Start Showroom Styling --- */
/* ----------------------------- */

/* start showroom display css styles */
@media all and (min-width: 981px){
  #customiframe{ 
  aspect-ratio: 16/9!important;
}
}

@media all and (min-width: 768px) and (max-width: 980px){
  #customiframe {
  aspect-ratio: 9/13!important;
} 
}

@media all and (max-width: 767px){
  #customiframe {
  aspect-ratio: 9/16!important;
}
}

.showroom a{
    padding: 0 2.3em 0 1em;
	text-decoration: none !important;
}

.showroom a:hover{
  text-decoration: none !important;
  color: var(--showroom-link-hover)!important;
}

.showroom ul li.et_pb_tab_active a:after
{
  content: "\e081";
  font-size: 1em;
    line-height: 1.6em;
    opacity: 1;
    position: absolute;
    margin-left: 10px;
    -webkit-transition: all .2s;
    transition: all .2s;
    text-transform: none;
    -webkit-font-feature-settings: "kern" off;
    font-feature-settings: "kern" off;
    font-variant: none;
    font-style: normal;
    font-weight: 400;
    text-shadow: none;
  font-family: ETmodules !important;
}

.showroom ul li a:hover,
.showroom ul li a:hover:after,
.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li a:hover, 
.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a:hover
{
    color: var(--showroom-link-hover)!important;
    
}
/* end showroom display css styles */

/* --------------------------- */
/* ---End Showroom Styling --- */
/* --------------------------- */

/* ---------------------------------- */
/* --- Start Custom Button Styling -- */
/* ---------------------------------- */

.dark-button
{
	background-color: var(--dark-button-bg-color)!important;
	border: solid var(--dark-button-border-color)!important;
	border-width: 1px !important;
}


.dark-button:hover
{
	color: var(--dark-button-hover-font-color)!important;
	background-color: var(--dark-button-hover-bg-color)!important;
	border: 1px solid var(--dark-button-hover-border-color)!important;
}



/* ---------------------------------- */
/* --- End Custom Button Styling ---- */
/* ---------------------------------- */

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

/* ---------------------------------- */
/* --- Start Blog Styling ---- */
/* ---------------------------------- */

/* blog catalog title */
.pa-blog-image-16-9 .et_pb_blog_grid h2 {
	font-size:16px!important;
}

/*blog image aspect ratio landscape 16:9*/
.pa-blog-image-16-9 .entry-featured-image-url {
  padding-top: 56.25%!important;
  display: block!important;
}
.pa-blog-image-16-9 .entry-featured-image-url img {
  position: absolute!important;
  height: 100%!important;
  width: 100%!important;
  top: 0!important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  object-fit: cover!important;
}


/*---- start blog navigation styles ----*/

#blog-nav a 
{
	color:var(--blog-nav-link-color)!important;
	font-weight: 600!important;
	text-transform:uppercase!important;
	transition: all 300ms ease;
	text-decoration: underline solid var(--blog-nav-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;

}

#blog-nav a:hover
{
	color:var(--blog-nav-link-hover-color)!important;
	text-decoration: underline solid var(--blog-nav-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

/*---- end blog navigation styles ----*/

/* ---------------------------------- */
/* --- End Blog Styling ---- */
/* ---------------------------------- */


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


/* -------------------------------- */
/* --- Start footer.php Styling --- */
/* -------------------------------- */

/* Footer Information Columns */
.footer-columns {
    background-color: var(--footer-info-bg-color);
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px;
    border-top: solid 0px;
}

.footer-column {
    width: 22%;
}

.footer-column h4,
.footer-columns a,
.footer-column ul li > p {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--footer-info-font-color);
	text-decoration: underline solid var(--footer-info-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

.footer-columns a {
    white-space: nowrap;
    transition: color 300ms ease-in-out;
}

.footer-column ul li > p {
    padding: 2px 0px 2px 6px;
    margin: 0;
    font-size: 12px;
}

.footer-columns a:hover {
    color: var(--footer-info-link-hover-color);
	text-decoration: underline solid var(--footer-info-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}


/* Bottom Legal Footer */

.footer-legal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 10px;
    padding: 5px 20px 35px 20px;
    background-color: var(--footer-legal-bg-color);
    border-top: solid 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--footer-legal-font-color);
}

@media all and (max-width: 820px){
	.footer-legal {
		padding: 5px 0px 35px 0px;
		flex-direction: column;
		justify-content: center;
	}
}

/* Copyright */
#footer-info {
    font-weight: 700;
}


/* Terms, Privacy, etc. */

.footer-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-menu a {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--footer-legal-link-color);
    margin: 0 10px;
    transition: color 300ms ease-in-out;
	text-decoration: underline solid var(--footer-legal-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

.footer-menu a:hover {
    color: var(--footer-legal-link-hover-color);
	text-decoration: underline solid var(--footer-legal-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}


/* Toggles Effects & Styling for Locations & Other Brands */

details {
    interpolate-size: allow-keywords;
}

details::details-content {
    transition: block-size 1s, content-visibility 1s allow-discrete;
    overflow: hidden;
    block-size: 0;
}

details[open]::details-content {
    block-size: auto;
}

details > summary {
    padding: 2px 6px;
    width: 100%;
    border: none;
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--footer-info-font-color);
    font-size: 12px;
    transition: color 300ms ease-in-out;
	text-decoration: underline solid var(--footer-info-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

details > summary:hover {
    color: var(--footer-info-link-hover-color);
    font-weight: 700;
	text-decoration: underline solid var(--footer-info-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    font-family: ETmodules !important;
    font-weight: 400 !important;
    content: "\43";
    float: right;
    color: var(--footer-info-arrow-color);
    padding-right: 20px;
}

details[open] summary:after {
    content: "\42";
}

details > p {
    padding: 2px 0px 2px 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 11px;
    white-space: nowrap;
}

details > p.accent {
    color: var(--footer-info-accent-color);
}

details > p a {
    transition: color 300ms ease-in-out;
	text-decoration: underline solid var(--footer-info-link-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}

details > p a:hover {
    color: var(--footer-info-link-hover-color);
	text-decoration: underline solid var(--footer-info-link-hover-underline-color) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
}


/* Follow Us Column  */

.social-links {
    display: flex;
    font-size: 1.25em;
    padding: 5px;
}

.social-links a {
    margin-right: 20px;
    text-decoration: none;
    color: var(--footer-info-social-link-color);
    transition: color 300ms ease-in-out;
}

.social-links a:hover {
    color: var(--footer-info-social-link-hover-color);
}


/* --- Footer Media Queries --- */

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
    .footer-column {
        width: 44%;
        margin-bottom: 3vh;
    }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
    .footer-columns {
        flex-direction: column;
    }

    .footer-column {
        width: 100%;
        margin-bottom: 6vh;
    }
	
	.footer-column:last-of-type {
        width: 100%;
        margin-bottom: 0vh;
    }
	
	#footer-info {
    	margin-top: 1vh;
	}
	
}


/* -------------------------------- */
/* ---- End footer.php Styling ---- */
/* -------------------------------- */

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