/* CSS Document */

/**************************************
**
** Variables
**
***************************************/

:root {
	/* --blue: #007bff; */
	/* --indigo: #6610f2; */
	/* --purple: #6f42c1; */
	/* --pink: #e83e8c; */
	--red: #3869a1;
	/* --orange: #fd7e14; */
	/* --yellow: #ffc107; */
	/* --green: #28a745; */
	/* --teal: #20c997; */
	/* --cyan: #17a2b8; */
	/* --white: #ffffff; */
	--black: #000000;
	--gray: #8f9d9e;
	--gray-light: #e6eaeb;
	--gray-medium-light: #d0dad9;
	--gray-medium: #8f9d9e;
	/* --gray-dark: #343a40; */
	/* --primary: #007bff; */
	--secondary: #6c757d;
	/* --success: #28a745; */
	/* --info: #17a2b8; */
	/* --warning: #ffc107; */
	--danger: #d82232;
	/* --light: #f8f9fa; */
	/* --dark: #343a40; */
	/* --breakpoint-xs: 0; */
	/* --breakpoint-sm: 576px; */
	/* --breakpoint-md: 768px; */
	/* --breakpoint-lg: 992px; */
	/* --breakpoint-xl: 1200px; */
}

/**************************************
**
** Bootstrap Overrides
**
***************************************/

.bg-secondary {
	background-color: #8b9596 !important;
	background-color: var(--secondary) !important;
}
.btn-secondary {
	color: #fff;
	background-color: #5c6063;
	border-color: #5c6063;
}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1em;
}
.container-fluid,
.sub .outer {
	/* increase so that content width is 1200 */
	max-width: 1230px;
}
#content-center hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 1px solid rgba(0,0,0,.15);
}

/**************************************
**
** Custom Classes
**
***************************************/
.bg-gray-light {
	background-color: #e6eaeb;
	background-color: var(--gray-light);
}
.bg-gray-medium {
	background-color: #8f9d9e;
	background-color: var(--gray-medium);
}


/**************************************
**
** Applications
**
***************************************/

.app-col img {margin-top:5px;}
.app-col {height:350px;}

/**************************************
**
** Structure
**
***************************************/
#main-header {
	/* position: static; */
	position: relative; /* z-index support */
	margin-top: 1px;
	transition: margin-top 0.1s; /* dummy transition to trigger resize function */
}
@media (min-width:768px) { 
	#main-header {
		position: fixed;
		margin-top: 0px;
	}
}
.container-fluid,
.sub .outer {
	position: relative;
}
#main-header
.header-shadow {
	-webkit-box-shadow: 0px -10px 16px 13px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px -10px 16px 13px rgba(0,0,0,0.25);
	box-shadow: 0px -10px 16px 13px rgba(0,0,0,0.25);
}

#upper-nav,
#middle-nav,
#lower-nav {
	position:relative;
}
#middle-nav {
	z-index: 2;
}
#lower-nav {
	z-index: 1;
}
#content-outer {
	flex: 1 1 1024px;
}



/**************************************
**
** Google Translate Bar Fix
**
***************************************/
/* fix for translate bar obscuring header */
html.translated-ltr #main-header,
html.translated-rtl #main-header {
	margin-top: 39px;
}
html.translated-ltr body,
html.translated-rtl body {
	top: 39px !important;
}
.skiptranslate .goog-te-banner-frame {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -box-shadow: none;
}


/**************************************
**
** Header Upper Section
** (Companies, Search, Icons, Phone)
**
***************************************/

#upper-nav {
	border-bottom: 2px solid;
	border-bottom-color: #d82232;
	border-bottom-color: var(--red);
	position: relative;
}
@media (min-width:768px) {
	#upper-nav {
		padding-left: 0;
		padding-right: 0;
	}
}
#upper-nav .nav-translate {
	padding-left: 12px;
	padding-right: 13px;
}
#upper-nav .nav-contact {
	padding-left: 10px;
	padding-right: 11px;
}
#upper-nav-right {
	margin-top: 0.5em;
}
#upper-nav-right .nav-item {
	margin-left: 32px;
}
#upper-nav-right .navbar-nav {
	flex-direction: row;
    align-items: stretch;
	justify-content: space-between;
}
@media (min-width:500px) {
	/*#upper-nav-right*/
    .navbar-expand-sm .navbar-collapse {
		margin-top: 0;
	}
	#upper-nav-right .navbar-nav {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}
}
#upper-nav-right .nav-item {
    margin-left: 0;
}
#upper-nav-right button:hover svg #magnify,
#upper-nav-right .nav-link:hover svg #globe,
#upper-nav-right .nav-link:hover svg #envelope {
	stroke: #8f9d9e;
	stroke: var(--gray);
}
#upper-nav .brands img {
	margin-top: 3px;
	margin-bottom: 2px;
}
#upper-nav .navbar-nav li,
#upper-nav .navbar-nav a,
#upper-nav .navbar-nav button {
	display: flex;
	align-items: center;
}
#upper-nav .navbar-nav img {
	margin-right: 5px;
}
.navbar-brand {
	font-size: 1rem;
}


/**************************************
**
** Search Icon/Form
**
***************************************/

#nav-item-search {
	position:relative;
}
#search {
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: .2rem;
	padding: 0;
	position: relative;
	width: 48px;
	height: 30px;
	transition: width 0.5s ease, border-color 0.5s ease;
	background-color: #343a40;
	background-color: var(--dark);
}
#search .form-control {
	display: none;
}
@media (min-width:500px) {
	#search {
		width: 180px;
		border-color: white;
	}
	#search .form-control {
		background-color: transparent;
		height: 100%;
		color: white;
		padding: auto 0;
		margin-left: 11px;
		position: absolute;
		height: 28px;
		top: 0; left: 0; bottom: 0; right: 48px;
		padding-top: 0;
		padding-bottom: 3px !important;
		transition: opacity 0.5s ease;
		opacity: 1;
		display: block;
	}
}
@media (min-width:576px) {
	#search {
		/*position: absolute;*/
		right: 0;
		border: 1px solid transparent;
		width: 48px;
	}
	#search .form-control {
		opacity: 0;
		display: none;
	}
	#search:hover,
	#search:focus {
		opacity: 1;
		width: 180px;
		border-color: white;
	}
	#search:hover .form-control,
	#search:focus .form-control {
		opacity: 1;
		display: block;
	}
}

#search .form-control:focus {
	box-shadow: none;
}
#search .btn {
	position: absolute;
	top: 0;
	right: 5px;
	bottom: 0;
}
#search .btn,
#search .btn img {
	display: block;
}
#search .btn img {
	padding: 0 14px 0 13px;
}

.bg-dark ::-webkit-input-placeholder {
  color: #ffffff !important;
}

.bg-dark :-moz-placeholder { /* Firefox 18- */
  color: #ffffff !important;
}

.bg-dark ::-moz-placeholder { /* Firefox 19+ */
  color: #ffffff !important;
}

.bg-dark :-ms-input-placeholder { /* IE 10+ */
  color: #ffffff !important;
}

.bg-dark ::-ms-input-placeholder { /* Edge */
  color: #ffffff !important;
}

.bg-dark :placeholder-shown { /* Standard one last! */
  color: #ffffff !important;
}


/**************************************
**
** Header Middle Section (Logo/Quick Contact)
**
***************************************/
#middle-nav {
	background-color: #ffffff;
	background-color: var(--white);
	overflow: visible;
}
#middle-nav .logo { 
	line-height: 1.2;
	overflow: hidden;
	transition: transform 0.25s ease, height 0.25s ease;
	height: 104px;
}
#middle-nav .logo a {
	display: inline-block;
}
#middle-nav .logo img {
	width: auto;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: transform 0.25s ease;
}
#main-header.shadow .logo {
	height: 0;
}
#main-header.shadow .logo img {
	transform-origin: left top;
	transform: scale(0);
}


/**************************************
**
** Quick Contact Form
**
***************************************/
/*
	<div id="middle-nav" class="scroll position-relative bg-white">
		<div class="container-fluid position-relative">
			<div id="qc" class="border border-secondary position-absolute">
				<!-- quick contact -->
				<a id="qc-toggle" class="text-center text-secondary" data-toggle="collapse" href="#qc-collapse" role="button" aria-expanded="false" aria-controls="qc-collapse">
					Quick Contact
				</a>
				<div id="qc-collapse" class="collapse border-top border-secondary">
					<form method="post" action="/processLead.php">
						<div class="form-group">
							<label for="qc-phone" class="sr-only">Telephone Number</label>
							<input type="tel" class="form-control form-control-sm" name="phone" id="qc-phone" placeholder="Telephone:" autocomplete="tel" maxlength="16" required>
						</div>
						<button type="submit" id="qc-submit" tabindex="0" class="btn btn-primary btn-block btn-sm btn-secondary">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div>
*/

#middle-nav > .container-fluid {
	padding-left: 0;
	padding-right: 0;
}
#qc {
	/*background-color: #ffffff;*/
	width: 100%;
	overflow: hidden;
	position: relative;
	/*pointer-events: none;*/
}
#qc form {
	padding: 15px;
}
#qc-toggle,
#qc-collapse {
	/*pointer-events: auto;*/
}
#qc-toggle {
	display: block;
	text-align: center;
	font-weight: bold;
	color: #8f9d9e;
	color: var(--gray);
	background-color: #ffffff;
    background-color: var(--white);
	padding: 10px;
    position: relative;
	z-index: 1;
}
/*@media (min-width:768px)*/
@media (min-width:860px) {
	#qc-toggle {
		padding: 4px;
	}
}
@media (max-width:768px) {
	#qc .form-control-sm, 
	#qc .btn-sm {
    	font-size: 1rem;
	}
}
#qc-toggle:hover,
#qc-toggle:focus {
	text-decoration: none;
}
#qc-collapse {
	display: block;
    z-index: 0;
    position: relative;
	background-color: #ffffff;
	background-color: var(--white);
	transition: transform 0.5s;
	transform: translateY(0);
}
#qc-collapse.collapse {
	display: none; /* mobile */
}
#qc .form-group {
	margin-bottom: 0.5rem;
}
#qc-submit { margin-top: 15px; }
.fc { 
	display:none;
	visibility:hidden;
}
/*@media (min-width:768px)*/
@media (min-width:860px) {
	#main-header.shadow #middle-nav #qc {
		top: 3px;
	}
	#qc-collapse.collapse {
		transform: translateY(-100%); /* desktop */
	}
	#middle-nav > .container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
	#qc {
		position: absolute;
		right: 15px;
		top: 1rem;
		transition: top 0.5s ease;
		width: 240px;
	}
	#qc-toggle {
    	border: 1px solid #6c757d !important;
	}
	#qc-collapse {
		border: 1px solid #8b9596;
		border: 1px solid var(--secondary);
		border-top: 0;
	}
}

/**************************************
**
** Header Lower Section (Menus)
**
***************************************/

#lower-nav {
	position: relative;
	padding: 0;
	clear: left;
	width: 100%;
	
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	
	/* -ms-word-break: break-all; */
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	/* word-break: break-all; */
	/* Instead use this non-standard one: */
	/* word-break: break-word; */
	
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	/* -ms-hyphens: auto; */
	/* -moz-hyphens: auto; */
	/* -webkit-hyphens: auto; */
	/* hyphens: auto; */
}

/**************************************************************
** BEGIN: Safari fix for white line below nav/above banners
***************************************************************/
/* we will position the lower nav at the absolute bottom
** and also set the background color on the header to 
** the same color as the lower nav, so that should there be
** some spacing somehow, it won't be noticable.
*/
@media (min-width:576px) {
	#main-header {
		padding-bottom: 40px;
		background-color: #8b9596 !important;
		background-color: var(--secondary) !important;
	}
	#lower-nav {
		position: absolute;
		bottom: 0;
		min-height: 40px;
	}
}
/**************************************************************
** END safari fix
***************************************************************/

#lower-nav .nav {
	margin-right: 240px;
}
#navbarCollapse .nav-item {
	white-space: nowrap;
}
#lower-nav .dropdown-menu {
	margin-top: 0;
	color: #212529;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border: none;
	z-index: -1;
    font-size: 1rem;
	padding: 15px;
}
.navbar-nav .nav-link {
	padding-right: 15px;
	padding-left: 15px;
}
@media (max-width:399px) {
	.dropdown-menu > .row {
		margin-left: 0;
		margin-right: 0;
	}
	#lower-nav .col-6 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (min-width:768px) {
	#lower-nav .dropdown-menu {
		/* font-size: 13px; */
		padding: 15px;
	}
}
#lower-nav .dropdown-toggle::after {
	display: none !important;
}
#lower-nav .nav-item .tick2 {
	position: absolute;
	bottom: -14px;
	left: 0;
	display: none;
	height: 14.297px;
}
#lower-nav .nav-item .tick2 img {
	vertical-align: top;
}
#lower-nav .nav-item.show .tick2 {
	animation-name: slidetick;
	animation-duration: 0.25s; /* or: Xms */
	animation-iteration-count: 1;
	animation-direction: normal; /* or: normal */
	animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
	animation-fill-mode: forwards; /* or: backwards, both, none */
	animation-delay: 0s; /* or: Xms */
	display: block;
	margin-left: -8.25px;
}
@keyframes slidetick {
	0% {
		left: 0;
	}
	100% {
		left: 50%;
	}
}
#lower-nav .nav > .nav-item > a {
	color: #ffffff;
}
#lower-nav .nav > .nav-item > a:hover,
#lower-nav .nav > .nav-item > a:focus {
	color: #bfcbcb;
	color: rgba(255, 255, 255, 0.8);
}
#lower-nav .dropdown-item,
#lower-nav .dropdown-heading {
	color: #8f9d9e;
	color: var(--gray);
}
#lower-nav .dropdown-heading {
	font-weight: bold;
}
#lower-nav .dropdown-item {
	padding-left: 5px;
	padding-right: 5px;
}
@media (min-width:400px) {
	#nav-products .dropdown-item,
	#nav-solutions .dropdown-item {
		 padding: .25rem 0;
	}
	#nav-products .dropdown-heading {
		font-weight: normal;
		padding: .25rem 0;
	}
	#lower-nav .dropdown-item {
		padding-left: 15px;
		padding-right: 15px;
	}
}
#lower-nav .dropdown-item:focus, 
#lower-nav .dropdown-item:hover {
	color: #000000;
	background: rgba(143, 157, 158, 0.1);
}
#nav-products .dropdown-menu,
#nav-solutions .dropdown-menu {
	max-width:100%;
}
@media (min-width:768px) {
	#nav-products .dropdown-menu {
		min-width: 690px;
	}
	#nav-solutions .dropdown-menu {
		min-width: 600px;
	}
}
@media (min-width: 1200px) {
	#nav-solutions .dropdown-menu {
		min-width: 720px;
	}
}
#nav-products .dropdown-menu .dropdown-items,
#nav-products .dropdown-items .dropdown-item {
	display: block;
	max-width: 100%;
}
@media (min-width: 400px) {
	#nav-products .dropdown-menu .dropdown-items,
	#nav-products .dropdown-items .dropdown-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: stretch;
	}
	#nav-products .dropdown-items .dropdown-item {
		flex-wrap: nowrap;
		flex: 0 0 auto;
	}
}
@media (min-width: 768px) {
	#nav-products .dropdown-items .dropdown-item {
		flex: 1 1 0%;
	}
}
@media (max-width: 767px) {
	.dropdown {
		position: static;
	}
	.dropdown-menu {
		left: 0;
		right: 0;
		width: 100%;
	}
}
.dropdown-section + .dropdown-section {
	margin-top: 1em;
}
@media (min-width: 400px) {
	#nav-products .dropdown-item,
	#nav-solutions .dropdown-item {
		padding: 0 0 0 0;
		line-height: 1.2;
	}
	.dropdown-section + .dropdown-section {
		margin-top: 0;
	}
	#nav-products .dropdown-menu .dropdown-section {
		flex-grow: 1;
	}
	#nav-products .dropdown-menu .section-dc {
		flex-grow: 2;
	}
	#nav-products .dropdown-heading {
		font-weight: bold;
		text-align: center;
	}
	#nav-products .dropdown-menu:before,
	#nav-solutions .dropdown-menu:before {
		content: none;
	}
	#nav-products .product-categories .dropdown-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: stretch;
		white-space: normal;
		/* auto width to fill column 
		* width: 152px;
		*/
		min-height: 62px;
	}
}
@media (max-width: 1199px) {
	#nav-solutions .dropdown-menu .cols {
		width: 530px;
	}
}
#nav-products .row > div,
#nav-solutions .row > div {
	padding-left: 4px;
	padding-right: 4px;
}
#nav-products .row,
#nav-solutions .row {
	margin-left: -4px;
	margin-right: -4px;
}
#nav-solutions .dropdown-items .dropdown-item {
	
	/* self */
	/* cant set flex basis, it breaks col- breakpoints */
	/* this actually overrides the col- breakpoints */
	/*
	flex: 1 1 auto;
	flex-shrink: 1;
	flex-grow: 1;
	*/

	/* children */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	white-space: normal;
	/* min-width: 165px; */
}
@media (min-width:1200px) {
}
#nav-solutions .dropdown-item:last-child {
	margin-bottom: 0;
}
@media (min-width:400px) {
	#nav-products .dropdown-item,
	#nav-solutions .dropdown-item {
		border: 1px solid transparent;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	#nav-solutions .dropdown-items .dropdown-item {
		height: 62px;
	}
}
#nav-products .dropdown-item:hover,
#nav-products .dropdown-item:focus,
#nav-solutions .dropdown-item:hover,
#nav-solutions .dropdown-item:focus {
	background: none;
}
#lower-nav .dropdown-item:hover,
#lower-nav .dropdown-item:focus {
	border-color: #c2c9ca;
}

#nav-products .dropdown-item .item-thumb,
#nav-solutions .dropdown-item .item-thumb {
	display: none;
	border: none;
	margin: none;
}
@media (min-width:400px) {
	#nav-products .dropdown-item .item-thumb,
	#nav-solutions .dropdown-item .item-thumb {
		display: inline-block;
		min-width: 60px;
		width: 60px;
		height: auto;
		border-right: 1px solid #dee2e6;
		margin-right: 7px;
	}
}
.navbar-brand svg {
	fill: #808080;
}
#icon-nacinc {
	margin-right: 3px;
}
#nav-nacinc.active svg,
#nav-nacinc .nav-link:hover svg {
	fill: #53b852;
}
#nav-electrocraft .nav-link {
	padding-left: 0;
}
#nav-electrocraft.active svg,
#nav-electrocraft .nav-link:hover svg {
	fill: #d82231;
}
#nav-tel { padding-right:0; }
.navbar .navbar { padding:0; }
/*@media (min-width: 576px) {
	.navbar-expand-sm .navbar-nav {
		-ms-flex-direction: row;
		flex-direction: row;
	}
	.navbar-collapse {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		-ms-flex-positive: 0;
		flex-grow: 0;
	}
}*/

@media (min-width: 1044px) {
	.navbar-expand-sm .navbar-nav {
		-ms-flex-direction: row;
		flex-direction: row;
	}
	.navbar-collapse {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		-ms-flex-positive: 0;
		flex-grow: 0;
	}
}

#lower-nav .additional-items {
    padding-bottom: 10px;
	border-bottom: 1px solid;
	margin-bottom: 10px;
}
@media (min-width:400px) {
	#lower-nav .additional-items {
		padding-bottom: 0;
	}
}
#lower-nav .additional-items,
#lower-nav .dropdown-divider {
	border-color: #dee2e6;
}
#lower-nav .additional-items .dropdown-item {
    padding: 5px;
    min-height: 20px;
}
#lower-nav .additional-items .dropdown-item:hover,
#lower-nav .additional-items .dropdown-item:focus {
	border-color: #c2c9ca;
}
#nav-solutions .additional-items .dropdown-item:last-child {
    margin-bottom: 3px;
}
@media (min-width:400px) {
	#lower-nav .additional-items {
		text-align: center;
	}
	#lower-nav .additional-items .dropdown-item {
		min-height: 20px;
		margin-left: 3px;
		margin-right: 3px;
		padding: 10px;
	}
}





/**************************************
**
** Main Content
**
***************************************/
/* body padding to keep contents below sticky header */

#main-header + #main-content {
	/* full header */
	padding-top: 0;
	transition: padding-top 0.25s;
}
#main-content:before {
	content: none;
}
@media (min-width:768px) {
	#main-header.shadow + #main-content {
		padding-top: 98px;
	}
}
@media (min-width:992px) {
	#main-header + #main-content {
		padding-top: 202px;
	}
	.sub #content-inner {
		display: flex;
	}
}
.sub .inner,
.resources-bldc #content-wrap {
    overflow: hidden;
    zoom: 1;
    background: url(../red-bar.html) no-repeat left top;
	padding-top: 30px;
	display: block;
}
@media (min-width: 768px) {
	.sub .inner,
	.resources-bldc #content-wrap {
		display: flex;
	}
}
@media (min-width:1230px) {
	.sub .outer {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}
}
#content-center {
	padding: 0 15px 4rem 15px;
}
@media (min-width:992px) {
	#content-center {
		min-height: 70vh;
		padding: 0 2rem 2rem 2rem;
		border-right: 0px #e6e6e6 solid;
	}
	.no-sidebar #content-center {
	    border-right: 0;
	}
}
#sidebar-right {
	padding: 0 2rem 2rem 2rem;
}
.long-scroll .inner,
.long-scroll #main-content {
	display: block;
}
.no-sidebar #content-center::before {
    content: '';
    display: none;
    width: 0;
    height: 0;
    float: right;
}
@media (min-width:992px) {
	.no-sidebar.sub_specific #content-center::before {
        height: auto;
	}
	.products.sub_specific .overview {
		display: block;
		margin: 0 0px;
	}
	.specific_cat_ban {
		margin-left: -30px;
		margin-right: -50px;
	}
	.no-sidebar #content-center::before {
		display: block;
		width: 250px;
		height: 250px;
	}
	#content-center {
		padding: 0 2rem 6rem 2rem;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0px;
	}
	#sidebar-right {
		margin-top: 239px;
		font-size: 1rem;
		padding: 0 15px 1rem 15px;
		padding: 1rem 1rem 6rem 1rem;
		flex: 0 0 254px;
		min-width: 254px;
		max-width: 254px;
	}
	#sidebar-right .linkspace {
		text-align: right;
	}
	@media (min-width:768px) {
		#sidebar-right {
			font-size: 0.75rem;
		}
	}
}


/**************************************
**
** Long Scroll Sections
**
***************************************/
.long-scroll .section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
@media (min-width:992px) {
	.long-scroll .section, 
	#cta,
    #news,
	#main-footer {
		padding-top: 6.25rem;
		padding-bottom: 6.25rem;
	}
}



/**************************************
**
** Intro Section
**
***************************************/
.breadcrumbs + .section {
	padding-top: 2rem;
}
#intro p {
	font-size: 1.25rem;
	line-height: 2.25rem;
	max-width: 825px;
	margin-left: auto;
	margin-right: auto;
}
#intro .buttons {
	margin-top: 2.86rem;
}
#intro .btn {
	margin: 1em 30px;
}
.page-home #intro p {
	margin-left: 0;
}


/**************************************
**
** Company Description
**
***************************************/
#intro-genius img {
	display: none;
}
@media (min-width:576px) {
	#intro-genius img {
		display: inline;
		float: left;
		width: 100%;
		max-width: 20vw;
		margin: 10px 2rem 10px 0;
	}
	.products.sub_specific .overview {
		display: block;
		margin: 0 0px;
	}
}
@media (min-width:768px) {
	#intro-genius img {
		float:none;
		max-width: 250px;
	}
}


/**************************************
**
** Home Page Slides
**
***************************************/
.page-home .carousel {
	background-color: black;
}
.wide-image img,
.carousel-item img {
	/* set image to take up 40% of viewport (screen) */
	width: auto !important;
	height: 40vw !important;
	
	/* image (block) centering */
	margin-left: 50%; /* move left edge of image to 50% (center) of container */
	transform: translateX(-50%); /* then move left edge -50% of the entire image width */
}
.carousel-caption {
	background-color: rgba(0, 0, 0, 0.6);
}
.carousel-indicators li {
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background-color: rgba(0,0,0,.1);
	border: 1px solid rgba(255,255,255,.5);
}
.carousel-indicators .active {
	background-color: #fff;
}
/* changing paging icons to angle brackets */
.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
@media (min-width:1200px) {
	.wide-image img,
	.carousel-item img {
		/* set image size to full */
		max-width: 2100px !important;
		height: auto !important;
	}
}


/**************************************
**
** Home Page Intro Banners (MCMA, Etc)
**
***************************************/
.intro-banners-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
@media (min-width: 992px) {
	.intro-banners-inner {
		flex-direction: column;
	}
}
.intro-text-inner {
	margin: 0;
}
@media (min-width:576px) {
	.intro-text-inner {
		margin: 0 25px;
	}
}
.intro-banners-inner > div {
	margin-bottom: 28px;
	text-align: center;
}
.intro-banners-inner a {
	display: inline-block;
}


/**************************************
**
** Footer
**
***************************************/
#main-footer {
	padding-top: 2rem;
	padding-bottom: 1rem;
	background-color: black !important;
}
#cta {
	background-color: #cecece;
	color: #333333;
}
#news {
	background-color: #f0f1f6;
	color: #333333;
}
#news a {
	color: #0069d9;
}
#main-footer a,
.footer-nav-title {
	color: #ffffff;
	color: var(--white);
}
#main-footer,
#footer-nav a {
	color: rgba(255, 255, 255, 0.6);
}
#footer-nav .footer-nav-section {
	margin-bottom: 2rem;
}
#footer-nav .footer-nav-section + .footer-nav-section {
	margin-top: 2rem;
}
#footer-nav a {
	display: block;
}
#footer-social a {
	display: inline-block;
}
#footer-social img {
	padding: 10px 10px;
	margin-left: -10px;
	height: 48px;
}
.footer-nav-title {
	font-weight: normal;
    font-size: 1.05rem;
}
@media (min-width: 768px) {
	#main-footer {
		padding-top: 5rem;
		padding-bottom: 1rem;
	}
	#footer-nav {
		margin-bottom: 2rem;
	}
	#footer-copyright,
	#footer-privacy {
		font-size: smaller;
	}
}
@media (max-width: 768px) {
	#footer-nav a {
		padding: 8px 0;
	}
}

/**************************************
**
** Paralax Product Collage Banner
**
***************************************/
/* no longer in use - commented to test
#parallax-products {
	border-top: 1px solid #d0dadb;
	border-bottom: 1px solid #000000;
	position: relative;
	overflow: hidden;
	/* height: 500px; */
/*
}
#parallax-products img {
	/* center block larger than its parent */
/*
	min-width: 100%;
}
/*
x.parallax-container {
	position: relative;
	overflow: hidden;
	height: 470px; /* less than image */
/*
}
x.parallax-container .parallax {
/* is clamped to the container */
/*
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
x.parallax-container .parallax img {
/* is larger than the container */
/*
	position: absolute;
	left: 50%;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}
ximg {
	max-width: 100%;
	height: auto;
}
x* {
	box-sizing: border-box;
}
*/


/**************************************
**
** Applications
**
***************************************/
.cards-4x .card-deck {
	margin-top: 0.5rem;
	margin-bottom: 2.5rem;
	margin-right: -2%;
	margin-left: -2%;
	justify-content: center;
}
.cards-4x .card {
	border: none;
	background-color: transparent;
	margin: 1% 2%;
	flex-basis: auto;
	flex-shrink: 1;
	flex-grow: 0;
	/* display: block; */
}
.cards-4x .card,
.cards-4x .card > a {
	color: #000000;
	color: var(--black);
}
.cards-4x .card > a {
	height: 100%;
}
.cards-4x .card-img-top {
	border: 1px solid;
	border-color: #e6eaeb;
	border-color: var(--gray-light);
}
.cards-4x .card-img-top {
	/*
	background-color: #e6eaeb;
	background-color: var(--gray-light);
	*/
}
.cards-4x .card:hover .card-img-top {
	border-color: #d0dad9;
	border-color: var(--gray-medium-light);
}
.cards-4x .card-title {
	margin-bottom: 0;
	font-size: 1rem;
	/*font-weight: 600;*/
}
.cards-4x .card-body {
	padding: 0.75rem;
}

@media (min-width:400px) {
	.cards-4x .card-title {
		/*font-size: 1.25rem;*/
	}
}
@media (min-width:576px) {
	.cards-4x .card {
		width: calc(50% - 4%);
	}
}
@media (min-width:768px) {
	.cards-4x .card {
		width: calc(33% - 4%);
	}
}
@media (min-width:992px) {
	.cards-4x .card {
		width: calc(25% - 4%);
	}
}



/**************************************
**
** Bread Crumbs
**
***************************************/
.breadcrumbs {
	margin-top: 1em;
}
.sub .breadcrumbs {
	margin-top: 0;
}
li.breadcrumb-item:first-child {
	padding-left: 19px;
}
li.breadcrumb-item {
    width: 100%;
}
/* bootstrap overrides */
.breadcrumb {
	background-color: transparent;
	padding-left: 0;
	padding-right: 0;
}
.breadcrumb-item + .breadcrumb-item {
	padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: ">";
}
.sub .breadcrumb {
	padding-left: 0;
	margin-bottom: 2rem;
}
.no-crumbs #content-center {
	padding-top: 2rem;
}
@media (min-width:576px) {
	.breadcrumb {
		padding-left: 1rem;
	}
	li.breadcrumb-item:first-child {
		padding-left: 0;
	}
	li.breadcrumb-item {
		width: auto;
	}
	.breadcrumb-item + .breadcrumb-item {
		padding-left: .5rem;
	}
}


/**************************************
**
** Hero Banners
**
***************************************/
/* I believe this is no longer in use - commented to test if plx still works
.hero {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	background-color: #aeaeae;
}
.hero img {
	min-width:100%;
	min-height:100%;
	position: static;
	left: 0;
	top: 0;
	transform: none;
}
@media (min-width:1200px) {
	.hero {
		height: 48.25vh;
		max-height: 526px;
		overflow: hidden;
		position: relative;
		background-color: #aeaeae;
	}
	.hero img {
		min-width: 100%;
		min-height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}
#main-content .hero img { max-width: none; }
*/


/**************************************
**
** Headings
**
***************************************/
.sub h1 {
	margin-bottom: 2.5rem;
	color: #8b9596;
	color: var(--secondary);
	font-size: 2rem;
	line-height: 1.2;
}
.sub #content-center > h1:first-of-type,
.sub .top > h1:first-of-type {
	margin-top: 1em;
}
.sub h2 {
	font-size: 1.5rem; /* 24px */
	margin-top: 1.5em;
	margin-bottom: 1em;
}
.sub h3 {
	font-size: 1.375rem; /* 22px */
	font-size: 1.25rem; /* 20px */
	margin-bottom: 1.5rem;
}
.sub h4 {
	font-size: 1.25rem; /* 20 */
}
.sub h5 {
	font-size: 1.125rem; /* 18 */
}
.sub h6 {
	font-size: 1rem; /* 16 */
}

.long-scroll h1,
.long-scroll h2 {
	text-align: center;
}
.long-scroll h1 {
	font-size: 2.25rem;
}
.long-scroll h2 {
	font-size: 2rem;
}
.page-home h1 {
	text-align: left;
}
.page-home h1 .lead {
	font-weight: normal;
}
/* quote form */
.quote-form h3 {
	padding-bottom: 1rem;
	border-bottom: 1px solid #cccccc;
	margin: 2rem 0 1.5rem 0;
}



/**************************************
**
** Misc Sections
**
***************************************/
.long-scroll #applications {
	background-color: #d0dad9;
	background-color: var(--gray-medium-light);
}
.long-scroll #applications h2 {
	color: #000000;
	color: var(--black);
}



/**************************************
**
** Content
**
***************************************/

/* CSS Document */
.red {
    color: #C4262E;
}
.promo_arrow {
    vertical-align: baseline;
    margin-left: 3px;
}

#content-wrap:after,
.center:after,
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}


.buildyourown #content {
	background: none;
}
.buildyourown .center {
	margin-left: 0;
	background: url(../gradient.html) no-repeat left top;
}
.buildyourown .center div.contain3_top {
	background-none;
}






.partner {
	position: absolute;
	top: 40px;
	left: 302px;
	width: 215px;
	border-left: 1px solid #000;
	padding-left: 10px;
	padding-top: 0;
}
.partner img { margin-bottom:5px; }



#brushless-servo-guide {
	position:relative;
    width:163px;
    height:278px;
    margin:auto;
    color:#d82231;
    margin-bottom:1em;
}
#brushless-servo-guide > a {
	position:absolute;
    width:100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align:center;
	padding-top: 200px;
	font-size: 0.75rem;
}
.applications h2 {
	font-size: inherit;
	font-weight: bold;
}



/**************************************
**
** Helpful Links Box
**
**************************************/
.hlinks { position:relative; width:163px; margin:auto; background: url(../helpful-links-repeat.html) repeat-x bottom center; padding-bottom:15px; margin-bottom:1em; color:#d82231; }
.hlinks-inner { border:1px solid #a4aeb5; border-radius:18px; overflow:hidden; background-color:#fff; }
.hlinks-header { background: url(../helpful-links-header.html) no-repeat center top; height:59px; }
.hlinks-body { padding: 0 5px 5px 5px; }
.hlinks-catalog { position:relative;top:-7px;text-align:center; margin-bottom:-9px; }
.hlinks a { text-align:center; display:block; border-top:1px solid #a4aeb5; padding:5px 10px }
.hlinks-catalog a { padding:0; display:block; }
.hlinks a:first-child { border-top: none; }
.hlinks a:link, .hlinks a:visited { color:#0073CF; text-decoration:none; }
.hlinks a:hover, .hlinks a:focus { color:#C4262E; text-decoration:underline; }



/**************************************
**
** Resources Section
**
**************************************/
.resources-catalogs .cataloglinks .row,
.resources-whitepapers .downloads .row,
.resources-bldc .downloads .row  {
	margin-top: 1em;
	margin-bottom: 1em;
	border-top: 1px solid #e5e5e5;
	padding-top: 1em;
}
.resources .nav-tabs {
	margin-bottom: 2rem;
}



/**************************************
**
** Careers
**
**************************************/
.page-company-careers h2 {
	margin: 1em 0;
}
.page-company-careers .job-posts * { padding-left:0; margin-left:0; }
.page-company-careers .job-posts ul,
.page-company-careers .job-posts ol { margin-left:15px; }
.page-company-careers .job-posts { }
.page-company-careers .job-post { margin-left:15px; border-top: 1px solid #ccc; padding:1em 15px; }
.page-company-careers .job-post h3 { margin:1em 0; font-size: 1rem; }
.page-company-careers .job-post h3 small { font-weight:normal; }
.page-company-careers .job-post h4 { margin:1em 0; font-size:13px; }
.page-company-careers .job-post .submissions { font-weight:bold; }



/**************************************
**
** Sales Reps
**
**************************************/
.page-sales h2 {
	/* font-size: inherit; */
	margin: 2rem 0;
}
#sales_rep_table_wrap {
    font-size: 12px;
}
.return {
	text-align:right;
	margin:0 15px;
}
.jqvmap-label {
	z-index:2;
}
.jqvmap-zoomin,
.jqvmap-zoomout {
	width: 17px;
	height: 18px;
}



/**************************************
**
** Combined NAC Product Page
**
**************************************/
.combined-product-list {
	margin-left: 15px;
	/* width: 580px; */
	text-align: center;
}
.combined-product-list a,
.combined-product-list img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.combined-product-list .product_image,
.combined-product-list .product_title {
	border-left: 1px solid #adb6bc;
	border-right: 1px solid #adb6bc;
}
.combined-product-list .product {
	float: left;
	width: 190px;
	border-bottom: none;
	margin-bottom: 5px;
	padding-bottom: 17px;
	border-top: 1px solid #adb6bc;
	background: url(../home-products-gradient.html) repeat-x left bottom;
}
.combined-product-list .product + .product {
	border-left: 0;
}
.combined-product-list .product_title a {
	color: #fff;
	background-color: #4d4d4d;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	line-height: 2em;
}



/**************************************
**
** Left Nav
**
***************************************/
#sidebar-nav {
	/* background-color: var(--dark); */
	background-color: transparent;
	display: none;
}
#sidebar-nav .gears {
	display: none;
}
@media (min-width:768px) {
	#sidebar-nav .gears {
		display: block;
		text-align: center;
		margin: 25px 0;
	}
}
#subnav {
    padding-top: 0;
    color: #000;
    background-color: transparent;
    display: block;
    position: relative;
    height: auto !important;
    z-index: 2;
    width: auto;
	margin-top: 0;
	padding-bottom: 0;
}
@media (min-width:768px) {
	#sidebar-nav,
	#subnav,
	#subnav div.red a,
	#subnav div.red a:link,
	#subnav div.red a:visited {
		font-size: 13px;
	}
}

/* THE TOPMOST ITEM INDICATING CURRENT PAGE (WHITE ON RED BACKGROUND) */
#subnav div.red {
    margin: -30px 0 0 0;
    color: #FFFFFF;
    white-space: nowrap;
    text-indent: 0;
	padding-left: 0;
	height: auto;
}
#subnav div.red a, 
#subnav div.red a:link, 
#subnav div.red a:visited {
    background: none;
	padding: 0;
	font-weight: normal;
	width: 300px;
	height: 30px;
	line-height: 30px;
	margin: 0 10px;
}
#subnav .flyout .title {
	color: #ffffff;
}
#subnav li.thin a.flyout:hover span {
    display: none;
}
#sidebar-nav {
	float: none;
	width: auto;
	min-height: 0;
	padding: 0;
}
#subnav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#subnav li {
    text-align: left;
	/* display: none; */
	flex-grow: 1;
	color: #000000;
}
#subnav li.thin,
#subnav li.thin_teal,
#subnav li.thin_green,
#subnav li.thin_red,
#subnav li.thin_blue,
#subnav li.thinner_black {
    margin-left: 0;
}
#subnav a,
#subnav a:link {
    text-decoration: none;
    color: #FFFFFF;
	background-color: var(--secondary);
}
#subnav li.thin a:link,
#subnav li.thin a:visited {
	color: #000000;
	color: inherit;
}
#subnav li.thin a,
#subnav li.thin a.flyout {
	background-color: #e6e6e6;
	color: #000000;
}
#subnav li.thin a:hover,
#subnav li.thin a:focus,
#subnav a:hover,
#subnav a:active {
    color: #FFFFFF;
    background-color: #0074ba;
}
#subnav li.active a {
    background-color: #a4aeb5 /*#343a40*/;
    color: white;
}
#subnav li.thin.active a {
    background-color: #0074ba;
    color: white;
}
#subnav li.ad {
	background: transparent;
}
#subnav li .rotate-text {
	color: white;
}

#subnav li.thinner_red a.flyout,
#subnav li.thinner_blue a.flyout,
#subnav li.thinner_green a.flyout,
#subnav li.thinner_black a.flyout {
    background-color: #e6e6e6;
    color: #000000;
}
#subnav li.thinner_red a.flyout:hover,
#subnav li.thinner_blue a.flyout:hover,
#subnav li.thinner_green a.flyout:hover {
    color: #ffffff;
}
#subnav li.thinner_black a.flyout:hover {
	background-color: #000000;
	color: #ffffff;
}
@media (min-width: 768px) {
	#sidebar-nav {
		display: block;
		margin: 0;
		padding: 0 0 20px 0;
		flex: 0 0 206px;
		max-width: 206px;
	}
	#subnav {
	    padding-bottom: 20px;
	}
	#subnav ul {
		display: block;
	}
	#subnav li {
		text-align: right;
	}
	#subnav li.thin a.flyout:hover span {
		display: block;
	}
	#subnav div.red a,
	#subnav div.red a:link,
	#subnav div.red a:visited {
		text-align: left;
	}
}



/**************************************
**
** News
**
***************************************/
.news-post {
	padding-bottom: 1rem;
	border-bottom: 1px solid rgb(0,0,0,.15);
	margin: 2rem 0 1rem 0;
}
.news-post h2 {
	font-size: 1.2rem;
}
.news-post h2 a {
	color: #343a40;
	color: var(--dark);
}
.news-post .date {
	margin: 0.5rem 0;
	color: #8b9596;
	color: var(--secondary);
}
.news-post .read-more {
	white-space: nowrap;
}


/**************************************
**
** Newsletter Archive
**
***************************************/
.newsletters { margin-top: 2em; }
.newsletter { overflow: auto; }
.newsletters h2 { font-size: 1rem; }
.newsletter-thumbnail { display:none; }
@media (min-width:576px) {
	.newsletter-thumbnail { display:block; float:left; width:190px; }
	.newsletter-contents { margin-left:225px; }
	.newsletter-articles { padding-left:15px; }
}


/**************************************
**
** Product Category Listings
**
***************************************/
.products .overview {
	display: block;
}
/* product page intro gears icon */
.powering_icon {
	display: none;
}
@media (min-width:576px) {
	.powering_icon,
	.ecnow_icon_landing {
		display: block;
		margin: 0;
		margin-top: 30px;
		text-align: center;
		flex-grow: 0;     /* do not grow   - initial value: 0 */
		flex-shrink: 0;   /* do not shrink - initial value: 1 */
		flex-basis: auto; /* width/height  - initial value: auto */
	}
	.products .tech-overview {
		border-left: 1px #A4AEB5 solid;
	}
	.products .overview {
		display: flex;
		margin: 0 -15px;
	}
	/* product page intro right */
	.products .powering_icon,
	.products .ecnow_icon_landing,
	.products .tech-overview {
		padding: 0 15px;
	}
}
/* template_tech */
.center div.tech-overview {
	min-height: 200px;
	min-height: 0;
	padding-bottom: 2em;
}

/* collapsible read more links */
.more-hidden .more-content {
	display: none;
}
.read-more .more-link {
	white-space: nowrap;
}
.read-more .more-link .rtrif {
	font-size: larger;
	color: red;
}

/************************************
**
** product listings
**
*************************************/
ul.product_list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	clear: left;
	width: 100%;
	margin-bottom: 2.25em;
}
ul.product_list > li {
	list-style-type: none;
    padding-top: 2em;
    border-top: 1px solid rgb(0,0,0,.15);
    /* margin-top: 2em; */
	margin-bottom: 2em;
}
ul.product_list > li:first-child {
	border-top: 0;
}
ul.product_list h3 { 
	margin-left: 0;
	margin-bottom: 0.5em;
}
ul.product_list .pl_image {
    width: 100%;
    margin-right: 0;
    text-align: center;
    display: block;
    float: none;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	max-width: 150px;
}
ul.product_list .pl_image img {
    max-width: 150px;
    max-height: none;
	width:100%;
}
#main-content .product_list .pl_image img {
	float: none;
	margin: auto;
}
ul.product_list .pl_details {
    margin-left: 0;
    margin-top: 1em;
    font-size: 15px;
}
ul.product_list .pl_details p { 
	padding-left: 0;
	margin-bottom:1em;
}
ul.product_list .pl_details .button {
	padding: 5px 10px;
	background-color: #D82232;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
}
@media (min-width:576px) {
	ul.product_list {
		margin: 2em 0 1em 0;
	}
	ul.product_list > li {
		padding-top: 0;
		border-top: 0;
		/* margin-top: 0; */
		margin-bottom: 3em;
	}
	ul.product_list .pl_details {
		margin-left:135px;
		margin-top: 0;
		font-size: inherit;
	}
	ul.product_list .pl_image {
		width: 115px;
		margin-right: 20px;
		text-align: center;
		display: block;
		float: left;
		overflow: hidden;
		margin-top: 0;
		margin-bottom: 1em;
	}
	ul.product_list .pl_image img {
		max-width: 115px;
		max-height: 115px;
	}
	#main-content .product_list .pl_image img {
		float: none;
		margin: auto;
	}
}


.tech-products {
	margin-top: 3em;
}
.tech-products h2 {
	margin: 1em 15px 1em 0;
	border-bottom: 1px solid #DDD;
	padding-bottom: 18px;
}
.brand {
	padding: 1em 1em;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,e6e6e6+100 */
	background: rgb(204,204,204); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(230,230,230,0.65) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,0.65)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(230,230,230,0.65) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(230,230,230,0.65) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(230,230,230,0.65) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(230,230,230,0.65) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6e6e6e6', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
}
.brand h2.brand-title {
	padding: 0;
	border: 0;
	padding-bottom: 10px;
	margin-bottom: 13px;
	border-bottom: 1px solid #E4E4E4;
	margin-top: 0.5em;
	color: #C71925;
}
/* product page anchor buttons */
.anchors {
	/* float:left; */
	margin: 15px 0;
}
@media (min-width: 576px) {
	.anchors {
		/* float:left; */
		margin-left: 15px;
		margin-right: 15px;
	}
}
.anchors ul {
    margin-left: 0;
    padding-left: 0;
}
.anchors li {
	margin-bottom: 0.5em;
	list-style-type: none;
}
.anchors .btn {
	white-space: normal;
}


/* the motor compatibility checkmark link */
.h-links h2 {
	margin-left: 0;
	margin-bottom: 0.5em;
}
.h-links {
	padding: 0 1em 1em 1em;
}
.h-links a {
	display: block;
	text-decoration: none;
}
.h-links a:hover,
.h-links a:focus {
	text-decoration: underline;
}
.h-links .check {
	font-size: larger;
	font-weight: bold;
	color: #D82232;
}



/**************************************
**
** Product Detail Pages
**
***************************************/
#main-content img { max-width:100%; }
#main-content .carousel img { max-width: none; }
.product-detail #content-inner {
	display: block;
}
.product-detail #content-center {
    min-height: 0;
    padding-bottom: 0;
	margin-bottom: 2rem;
	border-right: none;
}
.product-detail #content-full {
	margin: 2rem 0;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width:992px) {
	.product-detail #content-full {
		padding-left: 2rem;
		padding-right: 1rem;
	}
}
@media (min-width:1200px) {
	.product-detail #content-full {
		padding-right: 0;
	}
}
.product-detail #main-content img {
	max-width: 100%;
}
.product-detail .legend {
	margin: 2rem 0;
}
.product-detail .legend img {
	/* width: 100%; commented for now until we can either save larger or convert to vector */
	height: auto;
	margin-left: -8px;
	max-width: 100%;
}
.product-detail #product-intro {
    display: block;
}
@media (min-width:900px) {
	.product-detail #product-intro {
		display: flex;
	}
}
@media (min-width:992px) {
	.product-detail .legend img {
		margin-left: -22px;
	}
}
.product-detail #product-image { 
	margin-right: 50px; 
	max-width: 220px;
}
.product-detail #product-links {
	margin: 2rem 0;
}
#product-image,
#product-summary {
	margin-bottom: 2rem;
}
.product-detail #product-links ul { list-style-type: none; }
@media (min-width: 992px) {
	.product-detail #product-intro,
	.product-detail #product-description {
		margin: 2rem 0;
	}
	#product-image,
	#product-summary {
		margin-bottom: 0;
	}
}
.product-detail #product-legend {
	width: 100%;
	height: auto;
}

#tabs {
	overflow: auto;
	position: static;
	width: auto;
}
.product-detail .tab-pane {
	padding: 2rem 0 6rem 0;
	/* text-align: center; */
}
.product-detail .tab-pane img + img {
	margin: 1em auto;
}
.product-detail h2:first-child {
	margin-top: 0;
}
.product-detail h2 {
	margin-bottom: 1em;
}
.product-detail #product-tabs .nav-item a {
	padding: .25rem 0;
}
@media (min-width:1200px) {
	.product-detail h2 {
		margin-bottom: 1.5rem;
	}
	.product-detail #product-tabs .nav-item a {
		padding: .5rem .75rem;
	}
}
.product-detail .nav-link {
    display: inline-block;
    padding: .5rem 0;
}
.product-detail #product-specs h2 { font-size: inherit; }
.description .red { color:#c4262e; }

.datasheets li { text-align:left; }
.zoomContainer { z-index: 100; }
.windings {
	font-size: 0.75rem;
}
.windings h3 {
	margin-bottom: 0.5em;
	margin-left: 12px;
	font-size: 1rem;
	text-align: left;
	font-weight: bold;
}
.windings h4 {
	margin: 1em 0 5px 5px;
	font-size: 1rem;
	font-weight: bold;
}
.windings table {
	box-sizing: border-box;
	width: 98%;
	margin: 0 1% 1em 1%;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}
.windings th,
.windings td,
.specs th,
.specs td {
	border: 1px solid #000000;
}
.windings .heading th {
	border: none;
	padding: 0;
}
.windings thead th {
	padding: 2px 0;
}
.windings tbody th {
	padding: 2px 5px;
	font-weight: normal;
}
.windings td {
	padding: 2px;
}
.windings thead {
	vertical-align: top;
}
.windings thead,
.windings td {
	text-align: center;
}
.windings .al { text-align:left; padding-left:5px; }
.windings .ar { text-align:right; padding-right:5px; }
.windings thead,
.specs thead {
	background-color:#d1d3d4;
}
.windings thead .units,
.specs thead .units {
	background-color:#e6e7e8;
}
.windings tbody tr:nth-child(even) {
	background-color:#e6e7e8;
}
.windings .heading,
.windings tbody th { text-align:left; }
.windings tbody th { width: 145px; }

/* Silver Series Products - Existing Customers Only */
.silver-product {
	clear: left;
	background-color: #b6babd;
	border-radius: 4px;
	margin-bottom: 1em;
	margin-left: 16px;
	width: 540px;
	color: #333333;
	padding: 15px 20px;
	font-size: 12px;
	line-height: 1.2;
}
.silver-product .silver-title {
	color: #fff;
	font-size: 17px;
	margin-bottom: 3px;
}


/* stepper drawing key tables */
.drawing-key {
	text-align:center;
	border-spacing: 0;
	border-collapse: collapse;
	width: 500px;
	font-size: 9px;
	margin: 0 auto 1em auto;
}
.drawing-key thead {
	color: #fff;
}
.drawing-key thead th {
	background-color: #30373a;
}
.drawing-key .drawing-key-title th {
	font-size: 11px;
	background-color: #00509e;
}
.drawing-key tbody th {
	background-color: #f0efed;
}
.drawing-key th, .drawing-key td {
	padding-top: 4px;
	padding-bottom: 4px;
}
.drawing-key .ul { text-decoration:underline; }

#cad-form {
	margin:auto;
	text-align: left;
}
@media (min-width:992px) {
	#cad-form {
		width: 50%;
	}
}
#cad-form .title {
	margin-bottom:1em;
	background:#000000;
	color:#ffffff;
	padding:8px 20px 5px;
	text-align: center;
}
#cad-form p {
	padding:0;
	margin:1em 0;
}
.cpp-logo {
	margin-bottom: 0.5em;
}
.cad-notice { 
	display:none; 
}
.ecnow-results {
	min-height: 10em;
	max-height: 20em;
	overflow-y: scroll;
	border: 1px solid #a4aeb5;
	margin-top: 1em;
	margin-bottom: 2em;
}
.ecnow-results table {
	width: 100%;
}
#ecnow h3 {
	margin-top: 1em;
	color: #cb434a;
	margin-bottom: 0.5em;
}
.ecnow-results table thead {
	background-color: #5f6062;
	color: #ffffff;
}
.ecnow-results thead th {
	font-weight: normal;
}
.ecnow-results table th,
.ecnow-results table td {
	vertical-align: top;
	padding: 3px 10px;
}
.ecnow-results table .leadtime {
   width: 1px;
}
.ecnow-results table .part,
.ecnow-results table .leadtime {
	white-space: nowrap;
}
.ecnow-results .none {
	font-style: italic;
	color: #8f9d9e;
	color: var(--gray);
}



/**************************************
**
** Parallax Background Images
**
***************************************/
/* Change.2018-7-13.zt */

#main-content, body {background: none !important;}
/* TEST - ISSUE, SCROLLING QUICKLY TO TOP YIELDS WHITE BAR
*  padding-top is set via javascript - so this shouldnt be needed 
* .long-scroll #main-content {padding-top: 205px;} */

.plx-hero {position: relative;overflow: hidden;}
.plx-hero-top {height: 70vh !important;}
.plx-hero-bottom {height: 600px !important;}
.plx-hero .plx-hero-inner {
	/*background-image: url('../images/solutions/agriculture.full.2000.jpg'); */
    /* background-image: url('../images/solutions/medical-mobility.full.2000.jpg');  */
	position: absolute;
	width: 100%;
	height: 150%;
	top: -30%;
	left: 0;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}
.cards-4x {overflow: hidden;}


@media (max-width: 1100px) {
	.plx-hero-top {height: 60vh !important;}
}

@media (max-width: 992px) {
	
	.plx-hero-top {height: 32vh !important;}
}
@media screen and (max-width: 992px) and (orientation: portrait) {

	/*.plx-hero-bottom .plx-hero-inner {background-image: url('../images/solutions/agriculture.full.1800.jpg'); background-size: 200% auto;} */
    .plx-hero-bottom .plx-hero-inner {/*background-image: url('../images/solutions/medical-mobility.full.1800.jpg');*/ background-size: 200% auto;}

}

@media (max-width: 767px) {
	.plx-hero-top .plx-hero-inner {background-size: 220% auto;}

	.plx-hero-bottom {height: 300px !important;}
	.plx-hero-bottom .plx-hero-inner {background-size: 280% auto;}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
	.plx-hero-top {height: 70vh !important;}
	
	.plx-hero-top .plx-hero-inner {background-size: 150% auto;}
	.plx-hero-bottom .plx-hero-inner {background-size: 150% auto;}
}



/**************************************
**
** Misc
**
***************************************/
/************************************************************
**
** .offset is used to offset anchor points
** it corrects an issue caused by fixed headers
** where page achors scroll content to the top, but it remains
** hidden behind the header, not visible to the user
** https://css-tricks.com/hash-tag-links-padding/
**
*************************************************************
**
** example usage:
** <a id="LANDING" class="offset></a>
** <div>...
**
** place an empty anchor tag with your anchor id and 
** class="offset" , just before the content you want visible
**
*************************************************************/
/* header switches to fixed at 768px */
@media (min-width:768px) {
	.offset:before {
		display: block;
		content: " ";
		margin-top: -220px;
		height: 220px;
		/* uncollapsed header height
		margin-top: -98px;
		height: 98px;
		*/
		visibility: hidden;
	}
	#qc form {height: 411px;}/* was 371px 2020-07-14 */
    #qc #qc-message{height:63px;}
}


.page-company-locations hr {
	margin-top: 3em;
	margin-bottom: 3em;
}

/* Tab content on video pages */
.tab-content {margin-top:20px !important;padding-left:15px !important;}


.page-downloads h2 {
	background-color: black;
    color: white;
    padding: 0.5em;
	font-size: 1.5em;
}
.page-downloads h3 {
	font-size: 1.125em;
	margin-top: 2rem;
}


/**************************************
**
** .alert-warning coloring for .badge
** used for End-of-Life products
**
***************************************/
.badge-limited-availability {
    color: #856404;
    background-color: #fff3cd;
    font-weight: normal;
}