/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------

:: Type Ref
:: Color Ref
:: Shared Styles
:: Grid
:: Header
:: Footer
:: Main

*/
/* -----------------------------------------
:: Type Ref
----------------------------------------- */

/*
	Droid Sans - Regular
		font-family: "droid-sans", sans-serif;
		font-weight: 400;
		font-style: normal;

	Droid Sans - Bold
		font-family: "droid-sans", sans-serif;
		font-weight: 700;
		font-style: normal;

	Noto Sans - Bold
		font-family: "noto-sans", sans-serif;
		font-weight: 700;
		font-style: normal;

	Droid Serif - Bold
		font-family: "droid-serif", serif;
		font-weight: 700;
		font-style: normal;
*/

/* -----------------------------------------
:: Color Ref
----------------------------------------- */

/* -----------------------------------------
:: Shared Styles
----------------------------------------- */

body {
	background:#fff;
	font-family: "droid-sans", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#page {background:#eee;}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: "droid-serif", serif;
	font-weight: 700;
	font-style: normal;
	color: rgb(36, 32, 33)
}
/* 
 * If you adjust heading sizes, do it for both the small break point (above) and "Medium and Up" (below) 
 * Font sizes for the small break point should be smaller
 */

@media print, screen and (min-width: 40em) { /* Medium and Up */
    
}

/* 
 * Link Colors
 */
a, .breadcrumbs a {color: rgb(38, 80, 102);}
a:hover, a:focus {}

.button {background-color: rgb(38, 80, 102); font-weight: 700; color: #fff;}
.button:hover, .button:focus {}

.button.hollow {border-color: rgb(38, 80, 102); color: rgb(38, 80, 102);}

/* -----------------------------------------
:: Grid
----------------------------------------- */

.site-header .grid-container,
.site-footer .grid-container {max-width: 99.25rem;} /* 1200px - header and footer width - edit to match client's existing site */

/* -----------------------------------------
:: Header
----------------------------------------- */

/* Centers nav bar vertically */
.site-header > .grid-container > .grid-x { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

.site-header {background: #fff; padding: 15px 0;}
.site-header #site-navigation ul {
	font-family: "noto-sans", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 15px;
}
.site-header #site-navigation ul li a {
	color: rgb(38, 80, 102); 
	text-transform: none; 
	letter-spacing: 0.45px;
}

.site-header-logo {max-width: 193px; padding-top: 8px;}

@media screen and (max-width: 39.99875em) { /* Small Only */
	.site-header-logo img {max-width:50%;} /* Reduces mobile header logo */
}


/* Black mobile menu toggle - Add if using a white or light color header background*/
#menu-mobile-toggle {background: url(../img/iconfinder_menu_309053.svg) no-repeat;} 

/* -----------------------------------------
:: Footer
----------------------------------------- */

.site-footer {background: rgb(38, 80, 102); color: #fff; }
.site-footer a {color: #fff; text-decoration: underline;}

.site-footer-logo {margin-bottom: 2rem;}

/* -----------------------------------------
:: Main
----------------------------------------- */

/* Find Mouldings By */
#element_moulding-tax-filter-wrap {background: rgb(207, 175, 105);}

/*
 * main Stock Mouldings page
 */
body.page-id-16423 #all-moulding-types,
body.page-id-16423 #moulding-insp-gallery {background: rgb(38, 80, 102); }

/*
 * main Stock Mouldings page - BANNER
 */
#banner-mouldings-home {position: relative;}
#banner-mouldings-home img {width: 100%;}
#banner-mouldings-home .text {
	color: #fff; 
	background:rgba(0,0,0,.5); 
	padding: 30px 50px; 
	display: inline-block; 
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#banner-mouldings-home .text h1 {color: #fff; line-height: 1.1; margin: 0; font-size: 3rem;}
#banner-mouldings-home .text h1 span {display: block;}
#banner-mouldings-home .text h1 .word-1 {margin: 0 0 .25rem 0;}
#banner-mouldings-home .text h1 .word-2 {
	text-transform: uppercase; 
	font-size: 50%; 
	letter-spacing: 3px; 
	font-family: "droid-sans", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#banner-mouldings-home .text h1 .word-2::before {content: "\2014";}
#banner-mouldings-home .text h1 .word-2::after {content: "\2014";}

@media screen and (min-width: 40em) and (max-width: 63.99875em) { /* Medium Only */
	#banner-mouldings-home .text {padding: 20px 30px;}
	#banner-mouldings-home .text h1 {font-size: 2.25rem;}
}
@media screen and (max-width: 39.99875em) { /* Small Only */
	#banner-mouldings-home .text {padding: 15px 30px;}
	#banner-mouldings-home .text h1 {font-size: 1.5rem;}
}

/* ==========================================================
   "Find Mouldings By" finder: focus / highlight colors
   Change the three values below to re-skin per site.
   ========================================================== */
.yhdm-main-finder-control {
  --finder-focus-ring: #265066;       /* outline around the focused input */
  --finder-option-bg: #265066;        /* highlighted option in the list */
  --finder-option-text: #fff;        /* text on the highlighted option */
}

/* Skip in Windows High Contrast so the parent's forced-colors rules still apply */
@media (forced-colors: none) {
  .yhdm-main-finder-control .autocomplete__input--focused {
    outline-color: var(--finder-focus-ring);
  }

  .yhdm-main-finder-control .autocomplete__option--focused:not(.autocomplete__option--no-results),
  .yhdm-main-finder-control .autocomplete__option:not(.autocomplete__option--no-results):hover {
    border-color: var(--finder-option-bg);
    background-color: var(--finder-option-bg);
    color: var(--finder-option-text);
  }
}

/* Global keyboard focus ring (links, Go buttons, other form fields) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .button:focus-visible {
  outline-color: #000;
}

/*
 * Single Moulding Profile
 */
#yhdm-moulding_wrap.yhdm-moulding_single-profile .yhdm-primary .element_full-image,
#yhdm-moulding_wrap.yhdm-moulding_single-profile .yhdm-secondary .element_wishlist {background: #fff;}

#yhdm-moulding_wrap .element_material-filter .yhdm-material-filter-label,
#yhdm-moulding_wrap .element_yhdm-view-switcher p {text-transform: uppercase; font-style: normal; font-weight: 700; color: rgb(38, 80, 102)}

#yhdm-view-switcher button[aria-pressed="true"] { background-color: #fff;}

.element_moulding-tax-filter select,
#yhdm-moulding-type-filters select {background-color: #fff;}