div.categoryBox {
	display: block;
	width: 100%;
}

div.productList {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

div.productItem {
	flex: 0 1 calc(25% - 1em);
	border: 0.5em solid transparent;
}

div.productList.big div.productItem {
	flex: 0 1 calc(50% - 1em);
}

div.productItem a {
	display: block;
	width: calc(100% - 1em);
	height: calc(100% - 1em);
	padding: 0.5em;
	transition: all 0.3s ease;
}

div.productItem a:hover {
	opacity: 1;
	background-color: #FFFFFF;
}

div.productItem a:hover figure {
	transform: scale(1.075);
}

div.productItem a:hover p.pITitle { text-decoration: underline; }

@media (max-width: 799px) {
	
	div.productList {
		justify-content: center;
	}
	
	div.productItem {
		flex: 1 1 40%;
		border: 0.5em solid transparent;
	}
}

div.productItem div.productItemImage {
	display: block;
	width: 100%;
	height: 10em;
	overflow: hidden;
	transition: all 0.3s ease;
}

div.productList.big div.productItem div.productItemImage {
	height: 15em;
}

div.productItem figure {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	transition: all 0.3s ease;
}

div.productList.big div.productItem figure {
	background-position: center;
}

div.productItem div.productItemText {
	display: grid;
	text-align: center;
	padding-top: 1em;
	height: 7.3em;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(1.8em, auto) minmax(auto, 4.5em) 1em;
}

div.productItemText p {
	display: block;
	font-size: 0.8em;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.productItemText p.pITitle {
	font-size: 1.2em;
}

div.productItemText p.pIDesc {
	color: #2b2d42 !important;
}

div.productItemText p.pIVendor {
	text-align: right;
	font-size: 0.6em;
	color: #d8d5db !important;
}

@media (max-width: 799px) {
	div.productItemText p.pIVendor {
		font-size: 0.8em
	}
}

div.moreProducts {
	display: block;
	padding: 0.5em;
	text-align: right;
}


/* Product List */

div.categoryHero {
	display: block;
	width: 100%;
	padding-bottom: 5em;
	min-height: 20em;
	position: relative;
	justify-content: center;
	text-align: center;
	background-color: #d8d5db;
	background-image: url('/images/1581479184-grey-leaf.svg');
	background-repeat: no-repeat;
	background-size: 35%;
	background-position: bottom -90% right -10%;
}

div.categoryHero header {
	display: block;
	text-align: center;
	height: 4em;
	margin-top: 5em;
}

div.categoryHero h2 {
	opacity: 0;
	text-transform: uppercase;
}

@media (max-width: 799px) {
	
	div.categoryHero h2 {
		font-size: 4em;
		text-align: center;
		padding-left: 0 !important;
	}

}


div.categoryHeroImage {
	display: block;
	width: 100%;
	position: relative;
}

div.categoryHeroImage header {
	display: block;
	width: 100%;
	min-height: 90vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

div.cHIContent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
}

div.cHIContent h1 {
	display: block;
	position: absolute;
	right: 1em;
	font-family: 'Anton', sans-serif;
	top: 2em;
	font-size: 350%;
	word-spacing: 9999rem;
	line-height: 1.2em;
	text-align: right;
	color: #ffba00;
	opacity: 0;
	text-shadow: 1px 1px 2px #fff;
}

div.cHISubCats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	position: absolute;
	bottom: 1em;
	opacity: 0;
}

div.cHISubCats div.cHISCItem {
	border: 0.5em solid transparent;
	height: 3em;
}

div.cHISubCats div.cHISCItem div {
	background-color: #121177;
	color: #FFF;
	padding: 0.5em;
	transition: all 0.2s;
}

div.cHISubCats div.cHISCItem a:hover {
	opacity: 1 !important;
}

div.cHISubCats div.cHISCItem a:hover div {
	background-color: #ffba00;
	color: #000;
	transition: all 0.2s;
}

div.afterHeroWrapper {
	background-color: #1f1f28;
}

div.afterHero {
	display: flex;
	flex-wrap: wrap;
	min-height: 12rem;
	padding: 5em 1em;
	text-align: center;
	align-items: center;
	color: #FFF;
}

div.afterHero div.afBlock {
	flex: 1 0 30%;
	padding: 0 0.5em;
}

/* Other Products List */

div.displaySidebar aside.sidebar {
	background-color: #fafafa;
	padding: 0;
	font-size: 0.8em;
	text-align: center;
}

aside.sidebar h4 {
	margin: 0 auto 0.5em auto !important;
	padding-top: 0.3em;
	display: block;
	background-color: #f0f0f0;
	color: #121177;
}

ul.otherProductsList {
	display: block;
	width: calc(100% - 1em);
	padding: 0.5em;
	list-style: none;
}

ul.otherProductsList li {
	display: block;
	padding: 0.2em;
	border-radius: 5px;
	text-align: center;
}

ul.otherProductsList li figure {
	display: block;
	height: 4em;
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

ul.otherProductsList li.seeMore {
	display: block;
	margin-top: 1em;
	font-weight: 700;
}

ul.otherProductsList li ~ li {
	margin-top: 0.5em;
}

ul.otherProductsList li.selected {
	background-color: #333;
	color: #FFF;
	
}

/* Product View */

header.pageHeaderSocial {
	display: flex;
}

header.pageHeaderSocial h3 {
	flex: 1 0 60%;
	border: none !important;
}

header.pageHeaderSocial ul.socialShareIcons {
	list-style: none;
	width: 100%;
	text-align: right;
}

header.pageHeaderSocial ul.socialShareIcons li {
	margin: 0.25em;
}

header.productHeader {
	width: 100%;
	min-height: 10em;
	display: flex;
	overflow: hidden;
}

div.productInfo p.productVendor {
	text-align: right;
	color: #d8d5db !important;
}

/* Product Spec */

div.productSpecs {
	font-size: 1em;
	margin: 1em;
	background-color: #f0f0f0;
	display: flex;
	flex-wrap: wrap;
}

div.productSpecs div.specItem {
	flex: 1 1 30%;
	padding: 0.5em;
	cursor: default;
}

div.productFacts div.specItem:hover {
	
}

div.specItem span {
	display: block;
}

div.specItem span.specTitle {
	text-align: left;
	color: #6d6e94;
	font-size: 0.7em;
}

div.specItem span.specValue {
	text-align: center;
}


/* Product Addons */
div.productAddons {
	display: block;
}

div.productAddonCat {
	display: grid;
	grid-template-areas: "title content" "title scroll";
	grid-template-columns: 1.5em auto;
	grid-template-rows: auto 8em;
	grid-gap: 0.5em;
	margin: 1em 0;
	transition: all 0.5s;
}

div.pacTitle {
	grid-area: title;
	background-color: #121177;
	color: #FFFFFF;
}

div.pacTitle p {
	writing-mode: vertical-lr;
	padding: 1em 0;
}


div.pacViewport {
	grid-area: content;
}

div.pacItem {
	display: flex;
}

div.pacItem div.paciImage {
	display: inline-block;
}

div.pacItem div.paciImage img {
	max-width: 6em;
	margin: 1em;
}

div.pacItem div.paciText {
	display: inline-block;
}

div.pacItem div.paciPrice {
	display: block;
	width: 100%;
	text-align: right;
	font-weight: 700;
}

div.pacScroll {
	grid-area: scroll;
	background-color: #FFF;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

div.pacScroll div.pacisItem {
	padding: 0 1em;
	height: 7.8em;
	border-bottom: 0.2em solid #FFFFFF;
	cursor: pointer;
	transition: all 0.2s;
}

div.pacScroll div.pacisItem.selected {
	background-color: #f0f0f0;
	border-bottom: 0.2em solid #121177;
}

div.pacScroll div.pacisItem:hover {
	background-color: #d8d8d8;
}

div.pacisItem figure {
	display: block;
	font-size: 80%;
	overflow: hidden;
	height: 100%;
	
}

div.pacisItem figure img {
	display: block;
	height: 60%;
	margin: auto;
	padding: 1em;
}

div.pacisItem figure figcaption {
	display: block;
	text-align: center;
	height: 30%;
}

/* Category Highlights */

div.productHighlights, div.categoryHighlights {
	display: flex;
	margin-top: 4em;
	margin-bottom: 6em;
	flex-wrap: wrap;
	justify-content: center;
}

div.productHighlights header, div.categoryHighlights header {
	flex: 0 1 33%;
	min-height: 15em;
}

div.productHighlights header.fullWidthItem, div.categoryHighlights header.fullWidthItem {
	flex: 1 0 100%;
	position: relative;
	height: 30em;
	background-position: center;
	background-size: cover;
}

div.productHighlights div.subText, div.categoryHighlights div.subText {
	display: block;
	padding: 1.5em;
	line-height: 1.5em;
	text-align: center;
}

div.productHighlights header.fullWidthItem div.subText, div.categoryHighlights header.fullWidthItem div.subText {
	width: calc(100% - 3em);
	background-color: #121177;
	background-image: linear-gradient(#19197b, #003399);
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	bottom: 0;
}

div.productHighlights div.subText > *, div.categoryHighlights div.subText > * {
}

div.productHighlights div.subText h4, div.categoryHighlights div.subText h4 {
	text-align: center;
}


div.productDisclaimer {
	display: block;
	margin-top: 4em;
}

div.productDisclaimer p {
	display: block;
	margin-left: 1em;
}

















@media all and (max-width: 59.9rem) {

	.displaySidebar {
		display: grid;
		grid-template-columns: 1fr;
	}
	
	.displaySidebar > aside {
		display: none;
	}
	
	header.productHeader {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	header.productHeader div.productInfo {
		flex: 1 0 100%;
	}

	img.productImage {
		display: block;
		height: 20em;
		max-width: 80vw;
		margin: 1em auto 0.5em auto;
		border-radius: 5px;
	}

	div.moreImages {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 1.2em;
	}
	
	header.productHeader div.moreImages > * {
		margin: 0.5em;
	}

	div.productBody div.moreImages > * {
		margin: 1em;
	}

	header.productHeader img.productOtherImage {
		display: block;
		height: 5em;
		max-width: 10vw;
		border-radius: 5px;
	}
	
	div.productBody img.productOtherImage {
		height: 8em;
		max-width: 10em;
		border-radius: 5px;
	}

	header.productHeader h1.productTitle {
		border-bottom: 0 !important;
		text-align: right;
	}

	header.productHeader aside.facts {
		text-align: right;
	}
	
	header.productHeader aside.facts table {
		border-spacing: 5px;
		font-size: 1em;
	}
	
	header.productHeader aside.facts > * {
		margin-left: auto;
	}

	header.productHeader aside.facts p.features {
		margin-bottom: 1.2em;
		font-size: 1em;
	}

	header.productHeader aside.facts div.priceBox {
		display: block;
		min-width: 20em;
		float: right;
		padding: 2em 0.5em;
	}

	header.productHeader aside.facts p.pricePrefix {
		font-size: 12px;
	}

	header.productHeader aside.facts .fade {
		opacity: .7;
		vertical-align: super;
	}

	header.productHeader aside.facts span.price {
		color: #19197b;
		font-weight: 700;
		font-size: 32px;
	}

	header.productHeader aside.facts p.legal {
		font-size: 10px;
		font-style: italic;
	}

	header.productHeader aside.facts a.btn {
		margin: 1.5em 0;
	}
	
	header.productHeader aside.facts p.leaseInfo {
		font-size: 80%;
	}


	div.productBody {
		margin-bottom: 50px;
		margin-left: 5vw;
	}

	div.productHighlights header, div.categoryHighlights header {
		flex: 0 1 100%;
	}


	div.downloads {
		display: flex;
	}

	div.downloads > * ~ * {
		margin-left: 20px;
	}
	
	
}

@media all and (min-width: 60rem) {

	.displaySidebar {
		display: grid;
		grid-template-columns: auto 15em;
		grid-gap: 0 2em;
	}
	
	header.productHeader > div.productInfo {
		flex: 1 0 400px;
	}


	header.productHeader img.productImage {
		display: block;
		height: 10em;
		max-width: 300px;
		margin: 20px auto 5px auto;
		border-radius: 5px;
	}

	div.moreImages {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 1em;
	}
	
	header.productHeader div.moreImages > * {
		margin: 5px;
	}

	div.productBody div.moreImages > * {
		margin: 10px;
	}

	header.productHeader img.productOtherImage {
		display: block;
		height: 3em;
		border-radius: 5px;
	}
	
	div.productBody img.productOtherImage {
		display: block;
		max-height: 5em;
		border-radius: 5px;
	}

	header.productHeader h1.productTitle {
		border-bottom: 0 !important;
		text-align: right;
	}

	header.productHeader aside.facts {
		text-align: right;
	}
	
	header.productHeader aside.facts > * {
		margin-left: auto;
	}
	
	header.productHeader aside.facts table {
		border-spacing: 5px;
		font-size: 1em;
	}

	header.productHeader aside.facts p.features {
		margin-bottom: 20px;
		font-size: 14px;
	}

	header.productHeader aside.facts div.priceBox {
		display: block;
		min-width: 200px;
		float: right;
		padding: 2em 0.5em;
	}

	header.productHeader aside.facts p.pricePrefix {
		font-size: 12px;
	}

	header.productHeader aside.facts .fade {
		opacity: .7;
		vertical-align: super;
	}

	header.productHeader aside.facts span.price {
		color: #19197b;
		font-weight: 700;
		font-size: 32px;
	}

	header.productHeader aside.facts p.legal {
		font-size: 10px;
		font-style: italic;
	}

	header.productHeader aside.facts a.btn {
		margin: 1.5em 0;
	}
	
	header.productHeader aside.facts p.leaseInfo {
		font-size: 80%;
	}

	div.productBody {
		margin-bottom: 50px;
		margin-left: 10px;
	}


	div.downloads {
		display: flex;
	}

	div.downloads > * ~ * {
		margin-left: 20px;
	}
	
}


div.downloads {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 10em;
	margin-top: 2em;
	justify-content: center;
	flex-wrap: wrap;
}



div.downloadButtons {
	display: flex;
	flex-wrap: wrap;
	margin: 1em;
	justify-content: flex-start;
}

div.downloadButtons > div {
	border: 0.5em solid transparent;
}