/*****************************************************************\
                      product menu styling
\*****************************************************************/
div.productSection {
	background-color: var(--productCategoryBackgroundColor);
	border-radius: 10px;
	position: relative;
/* 	margin-top: 2px; */
/* 	margin-bottom: 2px; */
}
div.productCategory {
/* 	background-color: var(--productCategoryBackgroundColor); */
/* 	border-radius: 10px; */
	cursor: pointer;
	overflow: hidden;
	position: relative;
	margin-top: 2px;
	margin-bottom: 2px;
	--productIconSize: max(100px, min(200px, 25vw));
	--productTitleHeight: 32px;
	--productPromoSlideShowHeight: var(--productIconSize);
}
div.productIcon {
	display: inline-block;
	width: var(--productIconSize);
	height: var(--productIconSize);
	text-align: center;
}
img.productIcon {
	max-width: var(--productIconSize);
	max-height: var(--productIconSize);
	width: auto;
	height: auto;
}
div.productTitle {
	display: inline-block;
	width: calc(100% - var(--productIconSize));
	vertical-align: top;
}
div.productTitle p {
	margin-top: 5px;
	margin-bottom: 5px;
}
label.productTitle {
	display: block;
	height: var(--productTitleHeight);
	margin-left: 10px;
	font-size: min(14cqw, 32px);
	font-style: italic;
	cursor: pointer;
	text-wrap: nowrap;
}
h1.productTitle {
	font-size: 20px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}
div.productDescription {
	vertical-align:top;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
div.productDetails {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
div.productDetails table {
	width:100%;
}
video.productAnimation {
	max-width: 100%;
	max-height: calc(100% - var(--headerHeight));
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
img.productAnimation {
	display: block;
	margin: auto;
	max-height: 80vh;
	max-width: 100%;
}
div.showMoreOrLess {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: auto;
	width: 50px;
	cursor: pointer;
}
svg.more {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: auto;
	width: 50px;
	cursor: pointer;
}
img.productInformationSymbol,
svg.productInformationSymbol {
	position: absolute;
	opacity: 0.5;
	bottom: 10px;
/* 	left: 0; */
	right: 0;
	margin: auto;
	height: 50px;
	width: 50px;
/* 	pointer-events: none; */
	animation-name: stretchSymbolDown;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	cursor: pointer;
}
@keyframes stretchSymbolDown {
	0% {
		transform: scaleY(1) translateY(0);
	}
	50% {
		transform: scaleY(1.2) translateY(5px);
	}
	100% {
		transform: scaleY(1) translateY(0);
	}
}
@keyframes stretchSymbolUp {
	0% {
		transform: scaleY(1) translateY(0);
	}
	50% {
		transform: scaleY(1.2) translateY(-5px);
	}
	100% {
		transform: scaleY(1) translateY(0);
	}
}
div.productInformation {
	overflow: hidden;
	--animationDuration: 500ms;
}
div.productInformation.visible {
	animation: productInformationExpand var(--animationDuration) ease-in-out;
}
div.productInformation.hidden {
	animation: productInformationCollapse var(--animationDuration) ease-in-out; /* Set timeout in toggleElementDisplayAnimation function in productView.js */
}
/* div.productInformation:not([style*="display: none;"]) { */
/* 	transition: height 5s ease-in-out; */
/* 	height: 500px; */
/* } */
/* div.productInformation[style="display: initial;"] { */
/* 	animation-name: productInformationScroll; */
/* 	animation-duration: 2s; */
/* 	animation-iteration-count: 1; */
/* 	animation-timing-function: ease-in-out; */
/* } */
@keyframes productInformationExpand {
	0% {
		max-height: 0vh;
	}
	100% {
		max-height: 100vh;
	}
}
@keyframes productInformationCollapse {
	0% {
		max-height: 100vh;
	}
	100% {
		max-height: 0vh;
	}
}
div.productInformation > div {
	padding-top: 10px;
	padding-bottom: 10px;
}
div.productInformation > div:last-child {
	padding-top: 0;
	padding-bottom: 0;
}
div.productInformation > div:nth-child(2n) {
	background-color: var(--productCategoryBackgroundColor);
}
h1.productLogo {
	font-size: 5vw;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media only screen and ( min-width: 961px ) {
	h1.productLogo {
		font-size: 48px;
	}
}

/*****************************************************************\
                      product slideshow styling
\*****************************************************************/
div.slideGroup {
	--width: 600px;
	--height: 400px;
	width: var(--width);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
img.slideShow {
	object-fit: contain;
	width: var(--width);
	max-width: 100%;
	height: var(--height);
}
img.slideShowAnimated:not(:only-child) {
	animation-name:slideShow;
	animation-iteration-count:infinite;
	display:none;
}
img.slideShowShortAnimation {
	animation-duration:5s;
}
img.slideShowLongAnimation {
	animation-duration:10s;
}
@keyframes slideShow {
    0% {opacity:0;}
   20% {opacity:1;}
   80% {opacity:1;}
  100% {opacity:0;}
}
button.slideControl {
	position: absolute;
	margin: auto;
	padding: 0;
	top: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border: none;
	opacity: 0.1;
}
div.slideGroup:hover > button.slideControl {
	opacity: 1;
}
button.nextSlide {
	right: 0;
}
button.prevSlide {
	left: 0;
}
/*****************************************************************\
                      product promo slideshow styling
\*****************************************************************/
div.productPromo {
	container-type: inline-size;
}
@media only screen and ( max-width: 961px ) {
	div.productPromo {
		position: absolute;
		left: var(--productIconSize);
		bottom: 0;
		width: calc(100% - var(--productIconSize));
	}
}
@media only screen and ( min-width: 961px ) {
	div.productPromo {
		position: absolute;
		left: var(--productIconSize);
		bottom: 0;
		width: calc(100% - var(--productIconSize));
	}
}
a.productPromoSlideShow {
	position: relative;
	height: var(--productPromoSlideShowHeight);
	margin: 5px;
	animation-name: productPromoSlideShow;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	border-radius: 5px;
	background-color: var(--productCategoryBackgroundColor);
	overflow: hidden;
}
a.productPromoSlideShow img {
	height: var(--productPromoSlideShowHeight);
	display: inline-block;
}
a.productPromoSlideShow > div {
	display: inline-block;
	width: calc(100% - var(--productIconSize));
	height: var(--productPromoSlideShowHeight);
	vertical-align: top;
}
p.productPromo {
	font-size: min(4cqw, 12pt);
	margin: 5px 0 5px 5px;
}
p.productPromoTitle {
	font-weight: bold;
/* 	text-wrap: nowrap; */
}
@keyframes productPromoSlideShow {
    0% {
    	opacity: 0;
    	right: 0;
   	}
   	60% {
		opacity: 1;
    	right: 0;
	}
	80% {
		opacity:1;
    	right: 0;
	}
	100% {
		opacity:0;
    	right: 0;
	}
}
/*****************************************************************\
                      rotatable image styling
\*****************************************************************/
div.rotatableImage {
	position: relative;
	width: round(down, 100%, 1px);
	max-width: var(--maxWidth);
	overflow: hidden;
	cursor: ew-resize;
	margin-left: auto;
	margin-right: auto;
}
/* div.rotatableImage:after { */
/* 	position: absolute; */
/* 	top: 50%; */
/* 	left: 50%; */
/* 	width: 100%; */
/* 	height: 100%; */
/* 	line-height: 100%; */
/* 	content: '<- rotate ->'; */
/* } */
img.sprite {
	position: relative;
	top: 0;
	left: 0; 
}
img.spriteRotateSymbol {
	position: absolute;
	opacity: 0.5;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	pointer-events: none;
	animation-name: oscillate;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes oscillate {
	0% {
		transform: translate(-10px);
	}
	50% {
		transform: translate(10px);
	}
	100% {
		transform: translate(-10px);
	}
}
/*****************************************************************\
                      product fitment table styling
\*****************************************************************/
table.productFitmentTable {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}
/*****************************************************************\
                      product detail view styling
\*****************************************************************/
div.interactiveDetailView {
	--detailViewSize: 160px;
	--detailViewSpace: 40px;
	position: relative;
	width: 100%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
div.productDetailImage {
	display: inline-block;
	width: calc(100% - var(--detailViewSize) / 2);
	height: 100%;
	vertical-align: top;
}
div.detailViews {
	position: relative;
	z-index: 2;
	width: calc(var(--detailViewSize) / 2);
	display: inline-block;
	height: 100%;
	vertical-align: top;
}
figure.detailView {
	width: var(--detailViewSize);
	height: var(--detailViewSize);
	text-align: center;
	margin: 0;
	margin-bottom: var(--detailViewSpace);
	float: right;
}
figure.detailView:last-child {
	margin-bottom: 0px;
}
figure.detailView img {
	max-width: 100%;
	max-height: 100%;
	line-height: calc(var(--detailViewSize) + 20px);
}
figure.detailView img:before {
	content: attr(alt);
	display: block;
}
img.productDetailImage {
	width: calc(100% - var(--detailViewSize) / 2 - var(--detailViewSpace));
}
svg.detailLines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
/*****************************************************************\
                      Order list table styling
\*****************************************************************/
table#orderFormTable {
	table-layout: fixed;
	width: min(100%, 600px);
	min-width: 340px;
	margin: auto;
	border-spacing: 0;
	--borderRadius: 10px;
	--background-color: var(--sectionBackgroundColor);
}
table#orderFormTable tr {
	border-color: var(--bodyTextColor);
}
table#orderFormTable thead tr:first-child th {
	border-top: solid 1px;
	border-bottom: solid 1px;
	background-color: var(--background-color);
}
table#orderFormTable thead tr:first-child th:first-child {
	border-left: solid 1px;
	border-top-left-radius: var(--borderRadius);
}
table#orderFormTable thead tr:first-child th:last-child {
	border-right: solid 1px;
	border-top-right-radius: var(--borderRadius);
}
table#orderFormTable tbody:first-of-type td:first-child {
	border-left: solid 1px;
	background-color: var(--background-color);
}
table#orderFormTable tbody:first-of-type tr:last-child td:first-child {
	border-bottom-left-radius: var(--borderRadius);
}
table#orderFormTable tbody td {
	line-height: 32px;
	vertical-align: top;
	background-color: var(--background-color);
}
table#orderFormTable tbody td:last-child {
	border-right: solid 1px;
}
table#orderFormTable tbody tr:last-child td {
	border-bottom: solid 1px;
}
table#orderFormTable tbody:last-child th:not(:first-child) {
	border-left: solid 1px;
	background-color: var(--background-color);
}
table#orderFormTable tbody:last-child tr:last-child th:not(:first-child) {
	border-bottom: solid 1px;
	border-bottom-left-radius: var(--borderRadius);
}
table#orderFormTable tbody:last-child tr:last-child td:last-child {
	border-bottom: solid 1px;
	border-bottom-right-radius: var(--borderRadius);
}
table#orderFormTable td span.leadTime {
	display: inline-block;
	line-height: 1;
}
table#orderFormTable td span.outStock {
	color: red;
}
table#orderFormTable td span.inStock {
	color: green;
}

div.orderFormDiv {
	width: min(100%, 600px);
	overflow: hidden;
	min-width: 340px;
	margin: auto;
}
div.orderSubmissionFormDiv {
	--formWidth: min(100%, 600px);
	width: var(--formWidth);
	overflow: hidden;
	min-width: 340px;
	margin: auto;
}
div.orderSubmissionFormDiv input, div.orderSubmissionFormDiv select {
	box-sizing: border-box;
	--fieldMargin: 2px;
	margin: var(--fieldMargin);
	width: calc(var(--fieldWidth) - var(--fieldMargin) * 2);
}
div.orderSubmissionFormDiv input#firstName {
	--fieldWidth: 50%;
}
div.orderSubmissionFormDiv input#lastName {
	--fieldWidth: 50%;
}
div.orderSubmissionFormDiv input#company {
	--fieldWidth: 100%;
}
div.orderSubmissionFormDiv input#shipaddress {
	--fieldWidth: 100%;
}
div.orderSubmissionFormDiv input#shipcity {
	--fieldWidth: 50%;
}
div.orderSubmissionFormDiv select#shipstate {
	--fieldWidth: 30%;
}
div.orderSubmissionFormDiv input#shipzip {
	--fieldWidth: 20%;
}
div.orderSubmissionFormDiv input#email {
	--fieldWidth: 50%;
}
div.orderSubmissionFormDiv input#phone {
	--fieldWidth: 50%;
}

/*****************************************************************\
                      Payment form styling
\*****************************************************************/
div.paymentOption {
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	min-height: 40px;
}
div.paymentOption button {
	width: var(--formWidth);
	box-sizing: border-box;
	outline: none;
}
div.paymentOption button.gpay-card-info-container.white.border-inset {
	outline: none;
}
div.paymentOption button:hover {
	margin: 0;
	border: none;
}
div.creditCardForm input[type="submit"] {
	cursor: pointer;
}
img.creditCard {
	background-color: white;
	border-radius: 10%;
	--cardCount: 4;
	--cardMargin: 10px;
	margin-right: var(--cardMargin);
	width: calc((var(--formWidth) - var(--cardMargin) * (var(--cardCount) - 1)) / var(--cardCount));
}
img.creditCard:last-child {
	margin-right: 0px;
}
form#hosted-fields-form .hosted-field {
	height: 32px;
	border-color: red;
	background: rgb(255,235,235);
/* 	border: solid red 1px; */
	border-radius: 5px;
	box-sizing: border-box;
	margin: 5px 0px;
}
form#hosted-fields-form .braintree-hosted-fields-valid {
	border-color: green;
	background: rgb(235,255,235);
}
form#hosted-fields-form input[type="submit"] {
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	height: 40px;
	background-color: white;
	margin-left: 0;
	margin-right: 0;
}
form#hosted-fields-form input[type="submit"]:disabled {
	background-color: rgb(200,200,200);
	cursor: not-allowed;
}