main[data-page="products"] > section > header > h1:before {
	content: "Tholian's Cyber Defense Products";
}

main[data-page="products"] > section > header > h2:before {
	content: "Managed Cyber Security Automation Services for your Infrastructure";
}

main[data-page="products"] > section {
	display: block;
	width: auto;
	height: auto;
	margin: 128px auto;
	padding: 0px;
	text-align: center;
}

main[data-page="products"] > section > article {
	display: inline-block;
	position: relative;
	width: 320px;
	height: calc(512px + 64px);
	margin: 64px 8px 0px 8px;
	padding: 16px;
	text-align: left;
	vertical-align: top;
	background: var(--surface-default-background);
	border: 1px solid var(--layout-default-color);
	border-radius: 8px;
	transition: 200ms transform ease-out;
	z-index: 1;
}

main[data-page="products"] > section > article p.price {
	display: block;
	position: absolute;
	margin: 0px;
	padding: 0px;
	top: auto;
	right: 16px;
	bottom: 64px;
	left: 16px;
	text-align: right;
}

main[data-page="products"] > section > article p.price data {
	display: block;
	font-family: 'vera-mono';
	font-size: 16px;
	text-align: right;
}

main[data-page="products"] > section > article div {
	display: block;
	position: absolute;
	margin: 0px;
	padding: 0px;
	top: auto;
	right: 16px;
	bottom: 16px;
	left: 16px;
	text-align: right;
}

main[data-page="products"] > section > article.active {
	background: #1a1a1a;
	transform: scale(1.1);
	transition: 200ms transform ease-out;
	z-index: 2;
}

main[data-page="products"] > section > article h3 {
	margin-left: 48px;
}

main[data-page="products"] > section > article h3:before {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	content: "";
	width: 32px;
	height: 32px;
	margin: 0px 16px 0px -48px;
	line-height: 32px;
	border: 2px solid #ffffff;
	border-radius: 16px;
	background: #ffffff;
	vertical-align: middle;
}

main[data-page="products"] > section > article div button {
	padding: 0px 16px;
}

main[data-page="products"] > section > article[data-product="tholian-white"]  h3        { border-color: #ffffff; }
main[data-page="products"] > section > article[data-product="tholian-blue"]   h3        { border-color: #22ccff; }
/* main[data-page="products"] > section > article[data-product="tholian-purple"] h3        { border-color: #ff22cc; } */
main[data-page="products"] > section > article[data-product="tholian-purple"] h3        { border-color: #882288; }
main[data-page="products"] > section > article[data-product="tholian-black"]  h3        { border-color: #000000; }
main[data-page="products"] > section > article[data-product="tholian-white"]  h3:before { background: #ffffff; }
main[data-page="products"] > section > article[data-product="tholian-blue"]   h3:before { background: #22ccff; }
main[data-page="products"] > section > article[data-product="tholian-purple"] h3:before { background: #882288; }
main[data-page="products"] > section > article[data-product="tholian-black"]  h3:before { background: #000000; }

main[data-page="products"] > section > article[data-product="tholian-white"]  div button { background-color: #ffffff; color: #1a1a1a; }
main[data-page="products"] > section > article[data-product="tholian-blue"]   div button { background-color: #22ccff; color: #ffffff; }
main[data-page="products"] > section > article[data-product="tholian-purple"] div button { background-color: #882288; color: #ffffff; }
main[data-page="products"] > section > article[data-product="tholian-black"]  div button { background-color: #000000; color: #ffffff; }

main[data-page="products"] > section > article[data-product="tholian-white"] div button:hover,
main[data-page="products"] > section > article[data-product="tholian-white"] div button:focus {
	color: #000000;
	box-shadow: 0px 0px 8px 2px #ffffff;
}

main[data-page="products"] > section > article[data-product="tholian-blue"] div button:hover,
main[data-page="products"] > section > article[data-product="tholian-blue"] div button:focus {
	color: #ffffff;
	box-shadow: 0px 0px 8px 2px #22ccff;
}

main[data-page="products"] > section > article[data-product="tholian-purple"] div button:hover,
main[data-page="products"] > section > article[data-product="tholian-purple"] div button:focus {
	color: #ffffff;
	box-shadow: 0px 0px 8px 2px #882288;
}

main[data-page="products"] > section > article[data-product="tholian-black"] div button:hover,
main[data-page="products"] > section > article[data-product="tholian-black"] div button:focus {
	color: #ffffff;
	box-shadow: 0px 0px 8px 2px #000000;
}



@media (max-width: 1400px) {

	main[data-page="products"] > section > article {
		display: block;
		width: 640px;
		height: auto;
		margin: 64px auto;
		padding: 16px;
	}

	main[data-page="products"] > section > article p.price {
		position: static;
		top: unset;
		right: unset;
		bottom: unset;
		left: unset;
		margin: 16px 0px;
	}

	main[data-page="products"] > section > article div {
		position: static;
		top: unset;
		right: unset;
		bottom: unset;
		left: unset;
	}

}

@media (max-width: 720px) {

	main[data-page="products"] > section > article {
		display: block;
		width: auto;
	}


	main[data-page="products"] > section > article.active {
		transform: unset;
	}

}