.header-container {
	background-color: white;
	color: black;
}
.header {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5%;
}
.header a { color: #666; }
.header div.logo {
	display: block;
	position: relative;
	z-index: 2;
	float: left;
	margin-top: 6px;
	margin-left: -6px; /* counteract whitespace in image */
}
.header div.logo a {
	display: block; /* no idea why this was needed to make the image clickable */
}
.header .content {
	text-align: right;
}
.header .customLinks {
	position: relative;
	padding: 20px 0 0;
}
.header .customLinks ul {
	margin: 4px 0;
	padding: 2px 0;
	font-size: 9pt;
}
.header .customLinks li {
	padding: 0 8px;
	margin: 0px;
	border: 1px solid white;
	border-right-color: #999;
}
.header .customLinks li.cart {
	position: relative;
	padding: 0 2px;
	z-index: 10;
}
.header .customLinks li.searchparent {
	position: relative;
	z-index: 20; /* expanding search blank needs to cover cart button */
}
.header .customLinks li.cart .maybecartbutton { padding: 0 6px; }

/* javascript moves the li.cart contents into a div named .cartbutton */
.header .customLinks li.cart .cartbutton {
	position: relative;
	z-index: 3;
	margin: -6px 0 -6px 0;
	padding: 6px;
	border: 1px solid white;
}
.header .customLinks li.cart .cartbutton:hover {
	background-color: #EEE;
	border: 1px solid #DDD;
}
.header .customLinks li.cart .cartbutton a { text-decoration: none; }
.header .customLinks li.cart.open .cartbutton { border: 1px solid blue; }
.header .customLinks li.searchparent,
	.header .customLinks li.mobile-show
	{ border-right: none; }
@media (min-width: 601px) {
	.mobile-show { display: none !important; }
}
@media (max-width: 600px) {
	body { font-size: 12pt; }
	.mobile-hide { display: none !important; }
	.header .customLinks ul li { font-size: 12pt; padding-left: 12px !important; border: none; }
	.header .customLinks input.search { background-size: 26px; font-size: 12pt; }
	.header .customLinks input.search:focus { background-size: 1.2em; }
	#cil-image-slider .active-area .caption-area { font-size: 100%; } /* revert font magnification now that whole page has bigger text */
}

#google_translate_element {
	min-width: 150px; /* prevent sideways lurch as it loads */
	position: relative;
	top: -1px; /* baseline calc doesn't line up for some reason... */
}
.header .customLinks .goog-te-gadget-simple,
	.header .customLinks .goog-te-gadget-simple span
{
	color: #666;
	border: none !important;
}
.header .customLinks .search {
	border: 1px solid white;
	border-top: 3px solid #82c341;
	padding: 3px 3px 3px 26px;
	background-image: url(/static/skin/images/bgSearchButton.png);
	background-repeat: no-repeat;
	background-position: left 2px center;
	background-size: 1.2em;
}
.header .customLinks .search:hover {
	border-left-color: #DDD;
	border-right-color: #DDD;
	border-bottom-color: #DDD;
}
@media (max-width: 1000px) {
	.header .customLinks .search { width: 150px; }
}
@media (max-width: 900px) {
	.header .customLinks .search { width: 20px; border-top: none; background-size: 20px; }
	.header .customLinks .search:focus { margin-left: -180px; width: 200px; background-size: 1.2em; }
}
@media (max-width: 700px) {
	.header .customLinks .maybecartbutton img,
		.header .customLinks .cartbutton img { height: 1.1em; }
	.header .customLinks .maybecartbutton span,
		.header .customLinks .cartbutton span { display: none; }
}
.header li,
	.nav-container li,
	.breadcrumbs li
{
	list-style-type: none;
	display: inline-block;
	margin: 4px;
}
.header .block { margin: 0; padding: 0; }

.customLinks .maybecartbutton img,
	.customLinks .cartbutton img { height: .9em; }
.customLinks .maybecartbutton .count
	.customLinks .cartbutton .count { display: inline-block; margin: -1px 1px; padding: 1px 3px; font-weight: bold; }
.cart-popup-transition { /* covers up the border between the button and the menu */
	position: absolute;
	display: none;
	z-index: 3;
	top: 100%;
	margin-top: -2px;
	left: 0;
	right: 0;
	height: 8px;
	background-color: white;
}
.cart-popup {
	position: absolute;
	z-index: 2; /* below the transition element */
	top: 100%;
	min-width: 400px;
	max-width: 500px;
}
.cart.open .cartbutton { box-shadow: 1px 0 2px; }
.cart.open .cart-popup-transition { display: block; }
.cart.open .cart-popup { box-shadow: 1px 2px 3px; }
.cart-popup .cart-body {
	position: relative;
	z-index: 2;
	background-color: white;
	border: 1px solid blue;
	padding: 1em;
	text-align: left;
}
.cart-popup .cart-body a { color: #0072bc; }
.cart-popup tr, .cart-popup td {
	border: none;
	margin: 0;
	padding: 0 0 4px 0;
	vertical-align: top;
}
.cart-popup tr {
	-webkit-transition:background 1s;
	-moz-transition:background 1s;
	-o-transition:background 1s;
	transition:background 1s
}
.cart-popup table {
	border: none;
	margin: 1em 0 0 0;
	padding: 0;
}
.cart-popup .photo {
	vertical-align: top;
	text-align: center;
	padding-right: 4px;
}
.cart-popup .photo .img-cont {
	width: 50px;
	min-height: 50px;
}
.cart-popup .photo img {
	display: block;
	width: 100%;
	max-height: 50px;
	object-fit: contain;
}
.cart-popup .sku {
	font-weight: bold;
	width: 70%;
	white-space: nowrap;
}
.cart-popup .quantity {
	width: 10%;
}
.cart-popup .quantity, .cart-popup .price, .cart-popup .adjust, .cart-popup .subtotal {
	font-family: monospace;
	text-align: right;
	padding-left: .8em;
	white-space: nowrap;
}
.cart-popup .discount { color: #292; }
.cart-popup .desc { font-size: 80%; padding: .25em 0 1em; }
.cart-popup .checkout { padding: 8px; }
.cart-popup .checkout a {
	display: block;
	margin: 0 64px;
	padding: .5em;
	color: white;
	text-align: center;
	font-size: 110%;
	/*font-weight: bold;*/
	background-color: #82c341;
	border-radius: .25em;
}

.cart-scroll-parent {
	position: relative;
}
.cart-scroll-parent .scroller {
	max-height: 250px;
	overflow-y: auto;
}
.scroll-shadow {
	position: absolute;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 10px;
	opacity: 0;
}
.scroll-shadow.top {
	top: 0;
	background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent);
}
.scroll-shadow.bottom {
	bottom: 0;
	background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent);
}


.mobile-menu-container {
	position: relative;
}
.header .customLinks .mobile-menu-button-gap {
	display: inline-block;
	width: 22px;
	height: 22px;
	padding: 0;
	vertical-align: top;
	border: 1px solid white;
}
.mobile-menu-container .toggle {
	display: block;
	margin: 0;
	position: absolute;
	right: 0;
	top: -28px;
	height: 22px;
	width: 24px;

	/* hidden checkbox to toggle menu: https://stackoverflow.com/questions/42177216/manipulate-css-class-without-javascript */
	opacity: 0;
	-webkit-appearance: none;
	border: 1px solid black;
	z-index: 100;
	cursor: pointer;
}
.mobile-menu-container .menubar1,
	.mobile-menu-container .menubar2,
	.mobile-menu-container .menubar3
{
	position: absolute;
	right: 0;
	width: 24px;
	height: 3px;
	background-color: #666;
	margin: 0;
	z-index: 10;
	transition: 0.3s;
}
.mobile-menu-container .menubar1 { top: -32px; }
.mobile-menu-container .menubar2 { top: -24px; }
.mobile-menu-container .menubar3 { top: -16px; }

.mobile-menu-container .toggle:checked ~ .menubar1 {
    -webkit-transform: translate(0, 8px) rotate(-45deg);
    transform: translate(0, 8px) rotate(-45deg);
}
.mobile-menu-container .toggle:checked ~ .menubar2 { opacity: 0; }
.mobile-menu-container .toggle:checked ~ .menubar3 {
    -webkit-transform: translate(0, -8px) rotate(45deg);
    transform: translate(0, -8px) rotate(45deg);
}

.mobile-menu { display: none; }
.mobile-menu-container .toggle:checked ~ .mobile-menu {
	display: block;
	margin: 0 0 1em 0;
	padding: 0;
	border-bottom: 1px solid #666;
}
.mobile-menu li {
	display: block;
	margin: 0;
	border-top: 1px solid #666;
	text-align: left;
}
.mobile-menu li a {
	display: block;
	padding: 16px;
	font-size: 150%;
	color: #666;
}
.mobile-menu li a::after { content: '>'; float: right; }

.region-navigation {
	color: black;
	background-color: white;
	margin: 0;
	padding: 0 0 12px 0;
}
@media (max-width: 600px) {
	.region-navigation { padding-bottom: 4px; }
}

.nav-container.block { margin: 0; padding: 0; }
.nav-container.block .content {
	background: #0072bc;
	background: linear-gradient(90deg, #0072bc 50%, #013674 51%);
}
#nav {
	max-width: 1100px;
	margin: 0 auto;
	padding: .6em 1.5% .4em;
	color: white;
	background: #0072bc;
	background: linear-gradient(90deg, #0072bc 0%, #013674 80%);
}
#nav a {
	display: inline-block;
	color: white;
	padding: 6px;
}
#nav a::after {
	display: inline-block;
	width: 1px;
	position: relative;
	left: 12px;
	height: 1em;
	vertical-align: middle;
	border-right: 1px solid #ABC;
	content: ' ';
}
/* shrink the menu to remain on one line.  This will need updaated if the menu items change. */
@media (max-width: 800px) {
	#nav { font-size: 95%; }
	#nav a { padding-left: 4px; padding-right: 4px; }
	#nav a::after { left: 10px; }
}
@media (max-width: 700px) {
	#nav { font-size: 90%; }
	#nav a { padding-left: 0px; padding-right: 0px; }
	#nav a::after { left: 6px; }
}
#nav ul { display: none; } /* hide sub-menus for now */
#nav > li {
	text-transform: uppercase;
	margin: 0px;
	padding: 0 6px;
	letter-spacing: .5px;
}
#nav > li.first {
	margin-left: -12px; /* cancel padding on left edge */
}
#nav > li.last a::after {
	border-right: none;
}
.breadcrumbs {
	position: relative;
	margin: 0 0 8px 0;
	padding: 6px;
	border-bottom: 1px solid #999;
	color: #666;
}
.print-bare .breadcrumbs { display: none; }
.breadcrumbs a {
	color: black;
}
/*.breadcrumbs a:last-child {
	font-weight: bold;
}*/
/* for mobile, change the breadcrumbs background to blue */
@media (max-width: 600px) {
	.breadcrumbs {
		background: #0072bc;
		background: linear-gradient(90deg, #0072bc 0%, #013674 80%);
		padding: 6px;
		color: white;
		font-size: 90%;
		font-weight: bold;
	}
	.breadcrumbs a { display: inline-block; color: white; padding: 6px 2px; }
}

.pageWrapper > .page {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  flex-direction: column;
  justify-content: flex-start;
}

.main-container {
	max-width: 100%;
	position: relative;
	flex: 1 0;
	display: flex;
	align-content: stretch;
	justify-content: space-around;
}
.main {
	flex: 1 0;
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5%;
	display: flex;
	flex-direction: column;
	align-content: stretch;
}
@media (max-width: 1100px) {
	.main { max-width: 100%; }
}
/* at 600px, remove all page body side padding */
@media (max-width: 600px) {
	.main { padding: 0; }
	.content > * { padding-left: 4px; padding-right: 4px; }
	.store { padding-left: 4px; padding-right: 4px; }
}
.footer-container {
	margin-top: auto;
	color: white;
	background-color: #013573;
}
.footer-container .footer { margin: 0; padding: 0; }
.region-footer {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5%;
}

.footerLinks {
	position: relative;
	display: flex;
	margin: 0px;
	padding: 10px 0 4px 0;
	justify-content: space-between;
}
.footerLinks a { color: inherit; }
.footerLinks > li {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: top;
	font-size: 90%;
	list-style-type: none;
	color: white;
}
.footerLinks > li > ul {
	vertical-align: top;
	margin: 0;
	padding: 10px 0 0 0;
}
.footerLinks > li > ul > li {
    margin: 0;
	padding: 0;
	font-size: 90%;
	list-style-type: none;
	color: #CCC;
}
.footer-container .footer .block { margin: 0; }
@media (max-width: 800px) {
	.footerLinks {
		flex-wrap: wrap;
		font-size: 120%;
		column-gap: 20px;
	}
}
@media (max-width: 600px) {
	.footer-container {
		padding-top: 20px;
		color: #333;
		background-color: #FFF;
	}
	.footer-container .footer {
		color: #333;
		background-color: #EEE;
		padding-top: 16px;
	}
	.footerLinks {
		display: block;
		font-size: 100%;
		padding: 50px 0 0 0;
		margin: 0 8px 8px 8px;
		background: top left no-repeat url("/static/images/clippard-mono.png");
	}
	.footerLinks > li {
		display: block;
		color: #333;
		padding: .7em;
		border-top: 1px solid #666;
		border-bottom: 1px solid #666;
		margin-bottom: -1px;
		cursor: pointer;
	}
	.footerLinks > li::before {
		content: '+';
		float: right;
		display: inline-block;
		font-weight: bold;
		cursor: pointer;
	}
	.footerLinks > li.open::before {
		content: '-';
	}
	.footerLinks > li > ul {
		cursor: auto;
		display: none;
		margin-left: 1em;
	}
	.footerLinks > li.open > ul {
		display: block;
	}
	.footerLinks > li > ul > li {
		color: #333;
		padding: 0;
	}
	.footerLinks > li > ul > li > a {
		display: inline-block;
		padding: .5em;
		color: rgb(0, 96, 223);
	}
}
.footerLinksMobileExtra {
	padding: .7em;
	color: #888;
	font-size: 90%;
	line-height: 1.7em;
}
.footerLinksMobileExtra .bottom-line-links a {
	color: #666;
	padding-left: .7em;
	margin-left: .7em;
	border-left: 1px solid #BBB;
	line-height: 1em;
}
.footerLinksMobileExtra .bottom-line-links a:first-child {
	margin: 0;
	padding: 0;
	border: none;
}

.col-left {
  float: left;
  margin-left: 40px;
  width: 220px;
  padding: 15px 15px 0 0;
}

.share-links {
	position: absolute;
	right: 0;
	bottom: -40px;
	color: #CCC;
	font-size: 14px;
}
.share-links:hover { color: #666; }
.share-links * { vertical-align:middle; }
.share-links a {
	display: inline-block;
	position:relative; top:-2px;
	margin: 1px; padding: 1px;
	border: 1px solid white;
	color: inherit;
}
.share-links a:hover, .share-links a:focus { color: #0072bc; text-decoration: none; border: 1px solid #0072bc; }
.share-links svg { scale: 80%; color: inherit; }

.loading-mask {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loading-mask * { z-index: 10; }
.loading-mask::before {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: #FFF;
	opacity: .6;
	content: '';
	z-index: 5;
}
.loading-spinner {
	display: inline-block;
	z-index: 11;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	margin: .6em;/* .6em -.2em .6em;*/
	vertical-align: middle;
	position: relative;
}
.loading-spinner::after {
    position: absolute;
	display: block;
	left: 0; top: 0;
    width: 100%; height: 100%;
    background: url("/static/images/materialdesignicons-cog-outline.svg");
    background-size: cover;
    content: '';
	opacity: .8;
    -webkit-animation: spin 1.8s linear infinite;
    animation: spin 1.8s linear infinite;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%; }
	100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 50% 50%; }
}
@keyframes spin {
	0% { transform: rotate(0deg); transform-origin: 50% 50%; }
	100% { transform: rotate(360deg); transform-origin: 50% 50%; }
}

/* Front Page */

.cms-home .page {
	background-color: #f2f2f2; /* to extend the products box background color down to the footer */
}

/* to extend backgrounds of main page blocks sideways to edge */
.cms-home .main { max-width: 100%; margin: 0; padding: 0; }

/* Front Page Image Sldier */

#block-cil-image-slider-imagebox {
	margin: 0; /* bottom margin will be wrong color, need padding-top on next block */
	padding: 0 0 0 1.5%;
	background: #0072bc;
	background: linear-gradient(90deg, #0072bc 0%, #0072bc 49%, #013674 50%);
	transform-origin: 0 0;
}
/* at 900, cut all edge padding in half */
@media (max-width: 900px) {
	#block-cil-image-slider-imagebox .active-area { padding-left: 20px; }
	#block-cil-image-slider-imagebox .seek-control { left: 20px; }
}
@media (max-width: 800px) {
	#block-cil-image-slider-imagebox .content { height: 300px; }
	#block-cil-image-slider-imagebox .cil-image-slider { transform-origin: 0 0; transform: scale(.857); }
}
@media (max-width: 700px) {
	#block-cil-image-slider-imagebox .content { height: 250px; }
	#block-cil-image-slider-imagebox .cil-image-slider { transform-origin: 0 0; transform: scale(.714); }
}
#block-cil-image-slider-imagebox .content {
	overflow: hidden;
}
#block-cil-image-slider-imagebox .content .cil-image-slider {
 	max-width: 1100px;
	margin: 0 auto;
}
#block-cil-image-slider-imagebox .caption-area {
	font-size: 140%;
}

/* Front Page Clippard News (links to KB) */

#block-views-clippard-news-block {
	margin: 0;
	background-color: white;
}
#block-views-clippard-news-block .content {
	position: relative;
	max-width: 1100px;
	margin: 0px auto;
	padding: 16px 1.5%;
}
#block-views-clippard-news-block .block-title { display: none; }
@media (max-width: 800px) {
	#block-views-clippard-news-block .kb-search-result:nth-child(5),
	#block-views-clippard-news-block .kb-search-result:nth-child(4) {
		display: none;
	}
}
@media (max-width: 600px) {
	#block-views-clippard-news-block .kb-search-result:nth-child(3),
	#block-views-clippard-news-block .kb-search-result:nth-child(2) {
		display: none;
	}
}

/* Front Page Clippard product Categories */

#block-block-4 { 
	background-color: #f2f2f2;
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px 1.5% 24px 1.5%;
}
#block-block-4 .product-category-cards {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 8px;
}
#block-block-4 .product-category-card {
	background-color: white;
	padding: 10px 8px;
	flex: 1 1 14%;
}
@media (max-width: 900px) {
	#block-block-4 .product-category-cards {
		flex-wrap: wrap;
	}
	#block-block-4 .product-category-card {
		flex: 0 1 25%;
		max-width: 35%;
	}
}
#block-block-4 .product-category-card a {
	display: block;
	text-align: center;
}
#block-block-4 .product-category-card, #block-block-4 .product-category-card a {
	font-weight: bold;
	font-size: 14px;
	color: #666;
}
#block-block-4 .product-category-card .imgwrap {
	/* stackoverflow 20157752, img height relative to width */
	display: block;
	position: relative;
	padding-top: 90%;
	height: 0;
}
#block-block-4 .product-category-card .imgwrap span {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#block-block-4 .product-category-card .imgwrap span img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Front Knowledge Base Page */
.page-node-1 #content-header, #kb-search-header {
	color: white;
	background: #0072bc;
	background: linear-gradient(90deg, #0072bc 0%, #013674 80%);
	padding: 0;
	margin: 0;
}
.page-node-1 #content-header .title {
	margin: 0 auto;
	padding: 16px 16px 0 16px;
	max-width: 600px;
	color: white;
}
.page-node-1 #content-header .tabs {
	display: none; /* hide the Drupal edit bar.  All content on this page comes from blocks. */
}
#kb-search-header {
	margin-bottom: 2em;
}
#kb-search-header div.search {
	margin: 0 auto 16px auto;
	padding: 6px 16px;
	max-width: 600px;
}
#kb-search-header div.search input.search {
	display: block;
	padding: 10px 0 7px 36px;
	border: 1px solid #666;
	width: 100%;
	font-size: 18px;
	line-height: 1em;
	background-image: url(/static/skin/images/bgSearchButton.png);
	background-repeat: no-repeat;
	background-position: 6px 50%;
	background-size: 1.2em;
}
/*@media (max-width: 900px) {
	.page-node-1 #content-header .title,
		#kb-search-header div.search
		{ margin-left: 10%; margin-right: 10%; }
}*/
@media (max-width: 600px) {
	/*.page-node-1 #content-header .title,
		#kb-search-header div.search
		{ margin-left: 5%; margin-right: 5%; }*/
	#kb-search-header { margin-bottom: 1em; }
}

#kb-search-header .kb-menu-container {
	background-color: #2586c5;
	color: white;
	margin: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
#kb-search-header .kb-menu-container .button-container {
	display: none;
	flex: 0 0 32px;
	height: 32px;
	margin: 8px;
}
#kb-search-header .kb-menu-container .button-container button {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	background-color: #FFFFFF44;
	color: white;
}
#kb-search-header .kb-menu-container .button-container button[disabled] {
	color: silver;
}
#kb-search-header .kb-menu {
	flex: 0 1 900px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	overflow: hidden;
}
/* these elements just add padding at ends of the menu that disappears first when it starts shrinking things */
#kb-search-header .kb-menu-item {
	display: block;
	flex: 0 1 120px;
	min-height: 72px;
	min-width: 100px;
	color: white;
	font-weight: bold;
	text-align: center;
	border: 1px solid transparent;
	overflow: hidden;
}
#kb-search-header .kb-menu-item:hover {
	border: 1px solid white;
	text-decoration: none;
}
#kb-search-header .kb-menu-item.selected {
	background-color: #5f9cc5;
	border: 1px solid white;
}

#kb-search-header .kb-menu-item img {
	display: block;
	height: 32px;
	margin: 0 auto;
	padding: 6px;
	width: auto;
}
@media (max-width: 800px) {
	#kb-search-header .kb-menu-container { padding: 16px 8px; }
	#kb-search-header .kb-menu-container .button-container { display: block; }
	#kb-search-header .kb-menu-item { display: none; font-size: 9pt; }
	#kb-search-header .kb-menu-item.vis5 { display: block; }
}
@media (max-width: 675px) {
	#kb-search-header .kb-menu-item.vis5 { display: none; }
	#kb-search-header .kb-menu-item.vis5.vis3 { display: block; }
}
.page-node-1 .kb-search-results {
	max-width: 1000px;
	margin: 0 auto;
}
@media (max-width: 1000px) {
	.page-node-1 .kb-search-results { max-width: 100%; }
}

/* featured content ------------------------------------------------------- */

#block-views-featured-content-block {
	margin: 0 0 12px 0; padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#block-views-featured-content-block .block-title {
	width: 100%;
	max-width: 800px;
}
.view-featured-content .views-row {
	max-width: 800px;
	display: flex;
}
.view-featured-content .views-row .views-field-field-image-wiki {
	display: block;
	position: relative;
	flex: 0 1 400px;
}
.view-featured-content .views-row .views-field-field-image-wiki a {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.view-featured-content .views-row .views-field-field-image-wiki img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.view-featured-content .views-row .views-field-rendered-entity {
	display: block;
	position: relative;
	flex: 0 1 400px;
	padding-left: 2em;
}
.view-featured-content .views-row .views-field-rendered-entity a { display: block; }
.view-featured-content .views-row .views-field-rendered-entity a:hover { text-decoration: none; }
.view-featured-content .views-row .views-field-rendered-entity a:hover .search-title { text-decoration: underline; }
.view-featured-content .views-row .views-field-rendered-entity .search-title {
	display: block;
	margin-bottom: 12px;
	font-size: 20px;
	color: #82c341;
	font-weight: 500;
}
.view-featured-content .views-row .views-field-rendered-entity .snippet {
	display: block;
	font-size: 14px;
	line-height: 1.3em;
	color: #222;
}
.view-featured-content .pager { display: none; }

/* recent ----------------------------------------------------------------- */

#block-views-recent-articles-block {
	position: relative;
	margin: 20px 0;
	padding: 10px 8px 0 8px;
	background: linear-gradient(180deg,
		#EEE   10px, #EEE  210px, #FFF  210px, #FFF  410px,
		#EEE  410px, #EEE  610px, #FFF  610px, #FFF  810px,
		#EEE  810px, #EEE 1010px, #FFF 1010px, #FFF 1210px,
		#EEE 1210px, #EEE 1410px, #FFF 1410px);
	min-width: 416px;
}
#block-views-recent-articles-block .block-title {
	height: 20px;
	margin-bottom: -20px;
}
.view-recent-articles .view-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	min-width: 402px;
}
.view-recent-articles .views-row {
	flex: 0 1 184px;
	margin: 0; padding: 20px 0 8px;
	height: 172px;
	max-height: 172px;
	overflow: hidden;
}
.view-recent-articles .views-row .views-field-field-image-wiki {
	display: block;
	/* stackoverflow 20157752, img height relative to width */
	position: relative;
	padding-top: 60%;
	margin-bottom: 12px;
	height: 0;
}
.view-recent-articles .views-row .views-field-field-image-wiki a {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.view-recent-articles .views-row .views-field-field-image-wiki img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.view-recent-articles .views-row .views-field-title,
	.view-recent-articles .views-row .views-field-title a
{
	color: #333;
	font-size: 14px;
	font-weight: 200;
}

@media (max-width: 700px) {
	/* overrides for the many content pages of the knowledge base */
	.node-wiki.view-mode-full .content p { max-width: 100%; }
	.node-wiki.view-mode-full .content iframe { max-width: 100%; }
	.node-wiki.view-mode-full .content * { overflow-x: auto; }
}

.form-list label { display: inline-block; }
.form-list { margin: 0; padding: 0; }
.fieldset .form-list { margin: 15px 0; padding: 0 0 0 32px; }
.form-list input.input-text { width: 254px; }
.form-list .field {
  display: inline-block;
  width: 275px;
}
.form-list li { list-style-type: none; margin: 0 0 8px; padding: 0; }
.form-list li label.required:after { content: '*'; padding: 0px 4px; color: #eb340a; }

.clickrect {
	position: absolute;
	display: block;
	z-index: 2;
	top: 0; left: 0; bottom: 0; right: 0;
}

/* Custom Catalog Listing =================================================================== */
div.part-list-pager { clear:both; }
.toolbar { border:1px solid #CCC; background-color: #EDEDED; clear:both; margin-bottom:15px; padding: 7px; min-height:22px; text-align:left;}
.toolbar p { margin:0px;}
.toolbar select { padding:2px;}
.toolbar .pager { padding-right: 250px; }
.toolbar .sorter { padding-left: 450px; }
.toolbar-bottom {}

.toolbar .amount { display:inline-block; line-height:22px; }
.toolbar .limiter { display:inline-block; margin-left: 20px; }
.toolbar .pages {text-align:center; display:inline-block; margin-left:25px;line-height:22px; }
.toolbar .pages ol { display:inline; }
.toolbar .pages li { display:inline; }
.toolbar .pages .current {}

.bare-search { padding: 1em; }

/* Shopping Cart ============================================================================ */
.cart {}
.cart .cart-table { background-color:#FFF; }
.cart-table td {padding:10px;}
.cart .cart-table .btn-continue { float:left;}
/*.cart .cart-table thead { height:35px; border-top: solid 1px #CCC; background-image: url(/static/skin/images/bgBar.jpg); background-position: center top; }*/
.cart .cart-table tbody tr.even { background-color:transparent; border-top:solid 1px #DDD; border-bottom:solid 1px #DDD;}
.cart .cart-table tfoot { height:60px; border-top: solid 1px #DDD;}
.cart .cart-table td, .cart .cart-table th { vertical-align:inherit; border:none;}

/* Tabbed JS content area of category and product pages ===================================== */
.tabview {
	margin: 2em 0px;
	padding: 0px;
	position: relative;
	line-height: 1;
	clear: both;
}
.tabview-tab {
	position: relative;
	z-index: 1;
	min-width: 12em;
	display: inline-block;
	margin: 0 .3em 0 0;
	padding: .9em .9em;
	border: 1px solid #222;
	border-bottom: 1px solid white;
	color: #222;
	background-color: #EEE;
	font-weight: bold;
	font-size: 9pt;
	text-align: left;
}
@media (max-width: 800px) {
	.tabview-tab { min-width: 11em; }
}
@media (max-width: 700px) {
	.tabview-tab { min-width: 10em; font-size: 8pt; }
	.tabview-tab-body { padding: 10px; }
}
@media (max-width: 600px) {
	.tabview-tab { min-width: 8em; }
	.tabview-tab-body { padding: 8px; }
}
.tabview-tab.active {
	z-index: 3;
	color: #0072bc;
	background-color: white;
}
.tabview-tab-body {
	position: relative;
	z-index: 2;
	margin: -1px 0 0 0;
	padding: 12px;
	border: 1px solid #222;
	display: none;
	line-height: 1.5;
}
.tabview-tab-body.active {
	display: block;
}

@media (max-width: 800px) {
	.no-mobile { display: none !important; }
	.no-mobile-table { display: none !important; }
	.only-mobile { display: block !important; }
	.only-mobile-table { display: table !important; }
}

@media (min-width: 800px) {
	.no-mobile { display: block !important; }
	.no-mobile-table { display: table !important; }
	.only-mobile { display: none !important; }
	.only-mobile-table { display: none !important; }
}

/* Distributor lookup page */

.distrib_sel {
	padding-bottom: 2em;
}
.distrib_sel .field {
	margin: 0.3em 0.3em;
	padding: 0.3em 0 0.3em 8em;
}
.distrib_sel .label {
	display: inline-block;
	width: 7em;
	font-weight: bold;
	margin: 0 0 0 -7em;
}
.info_field { font-weight: bold; }
.distrib_list {
	margin: 0 0;
	border-top: 1px solid silver;
	padding: 3em 0;
}
.distrib_list .distributor {
	margin: 1em 1em 1em 200px;
	clear: both;
}
.distrib_list .logo-container {
	float: left;
	margin: 0 0 0 -200px;
	width: 180px;
	text-align: center;
}
@media (max-width: 800px) {
	.distrib_list .distributor { margin-left: 170px; }
	.distrib_list .logo-container { margin-left: -170px; width: 150px; }
}
@media (max-width: 600px) {
	.distrib_list .distributor { margin-left: 140px; }
	.distrib_list .logo-container { margin-left: -140px; width: 120px; }
}

.distrib_list .offices {
	margin-top: 1em;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.distrib_list .office {
	flex: 0 0 16em;
	margin: .3em 1em 1em 0;
}
.distrib_list .dist_name {
	font: bold 12pt/1em "Georgia", serif;
}
.distrib_list .dist_link {
	font: 80%;
}

.captcha-button {
	padding: 1em;
	background-color: #EEF;
	border: 1px solid blue;
	border-radius: 10px;
	white-space: nowrap;
}
.captcha-button .checkmark {
	display: inline-block;
	border: 1px solid black;
	vertical-align: middle;
	line-height: .9em;
	margin-right: .7em;
	font-size: 20px;
	font-weight: bolder;
	width: 1em;
	height: 1em;
}
.captcha-popup {
	display:none;
	position: absolute;
	background-color: white;
	padding: 8px;
	z-index: 10;
	box-shadow: 1px 2px 4px;
}
.captcha-body {
	position: relative;
	min-width: 300px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}
.captcha-body .images {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 4px;
	max-width: 400px;
}
.captcha-body .images .img-cont {
	width: 124px;
	height: 124px;
	padding: 2px;
	border: 3px solid white;
	background-color: white;
	box-shadow: .5px .5px 1.2px #AAA;
}
.captcha-body .images .img-cont.selected {
	border: 3px solid #82c341;
}
.captcha-body .images img {
	display: block;
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.instruction {
	font-size: 20px;
}
.instruction b {
	font-size: 22px;
	color: #225;
}
.instruction button {
	float: right;
	padding: 6px 20px;
}