/* NAV TAB BAR */
nav.tabbar {
	--bg-color: #e8e8e8;
	--bg-color-active: var(--corp-blue);
	--bg-color-hover: #ddd;
	--text-color: #868686;
	--text-color-active: #fff;
	--border-radius: 2em;
	--padding-y: 0.875em;
	--padding-x: 0;
	--col-width: 25%;
	--col-gap: 0;
	--row-gap: 0;
	display: flex;
	column-gap: var(--col-gap);
	row-gap: var(--row-gap);
	justify-content: space-between !important;
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
	box-shadow: var(--base-box-shadow);
	margin-left: -3px; /* compensates for rounded corner illusion */
	margin-right: -3px;
	margin-bottom: 3rem;
	> a {
		flex: 0;
		white-space: nowrap;
		min-width: var(--col-width);
		text-decoration: none;
		color: var(--text-color);
		font-weight: var(--font-weight-heavy);
		padding: var(--padding-y) var(--padding-x);
		border-radius: var(--border-radius);
		text-align: center;
	}
	> a.active {
		color: var(--text-color-active);
		background: var(--bg-color-active);
		box-shadow: var(--base-box-shadow);
	}
	> a:not(.active):hover {
		background: var(--bg-color-hover);
	}
}


section.section-pricing {
	--col-gap: 1rem;
	--max-col-width: calc(33% - var(--col-gap));
	.pricing-wrapper.well > .d-flex {
		gap: var(--col-gap);
	}
	.pricing-well.well {
		flex-grow: 1;
		padding-top: 2rem;
		padding-bottom: 2rem;
		max-width: var(--max-col-width);
	}
	.pricing-category { font-weight: var(--font-weight-heavy); text-transform: uppercase; color: var(--corp-blue); font-size: 1em; }
	.pricing-price {
		line-height: normal;
		font-weight: var(--font-weight-heavy);
		margin: 0;
		> * { display: block; }
		> strong { font-size: 1.75em; font-weight: var(--font-weight-black); letter-spacing: 0.875px; }
	}
	hr.thin { margin: 0.5em 0; }
	.pricing-content, .pricing-supplemental, .pricing-cta {font-size: 0.875em;}
	ul { padding-left:1.65em !important; margin-bottom: 0; }
	.columnar {
		display: flex;
		> * { flex-grow: 1; max-width: 50%; padding-left: 1rem; padding-right:1rem; }
		> *:first-child { text-align: end; max-width: 48% }
		h4 { font-weight: var(--font-weight-bold); }
	}
	h3.pricing-header {
		font-size: 1.5em;
		margin: 0.5rem 0 1.5rem 0;
		border-left: solid 4px var(--bs-blue);
		padding-left: 1rem;
	}
}
body.pricing #sections {
	--trans-speed: 0.5s;
	position: relative;
	
	> section {
		position: absolute;
		opacity: 0;
		width: 100%;
		visibility: hidden;
		left: -50px; /* hack */
		right: 0;
		top: 0;
		transform: translateX(10%);
		z-index: -1;
	}
	> section.active {
		visibility: visible;
		position: static;
		left: 0;
		opacity: 1;
		transition: all var(--trans-speed) linear;
		transform: unset;
		z-index: 1;
	}
	> section.fading-in {
		visibility: visible;
		position: absolute;
		transform: translateX(0%);
		opacity: 1;
		z-index: 0;
		left: 0;
		transition: opacity var(--trans-speed) ease-out;

	}
	> section.fading-out {
		visibility: visible;
		transform: translateX(-10%);
		transition: all var(--trans-speed) ease-out;
		opacity: 0;
		left: 0;
		z-index: 1;
	}
	
	
	
}
@media(min-width:992px) {
	section.section-pricing {
		--gap: 2rem;
		.gap-lg-5	{ column-gap: var(--gap) !important; }
		.cols-2 > .well { flex-grow: 1; max-width: calc(50% - (var(--gap) * 0.5)); }
	}
}
@media(max-width:991px) {
	
section.section-pricing {
	--col-gap: 5px;
	font-size: 0.95em;
	.pricing-wrapper.well {
		padding: 0;
		box-shadow: unset !important;
		background: unset;
	}
	.pricing-wrapper .well {
		background: var(--bleached-bone-grey) !important;
		padding-left: 1rem; padding-right: 1rem;
	}
}
}
@media(max-width: 767px) {
	nav.tabbar {
		--border-radius: var(--bs-border-radius);
		--padding-x: 0;
		--row-gap: 0.5rem;
		--col-gap: 4px;
		--row-gap: 4px;
		--col-width: calc(50% - (var(--col-gap) / 2));
		padding: var(--col-gap);
		font-size: 0.75em;
		flex-wrap: wrap;
		>a {
			background: rgba(255,255,255,0.5);
		}
	}
	section.section-pricing {
		--col-gap: 1rem;
		--max-col-width: unset;
		.pricing-wrapper.well > .d-flex {
			flex-direction: column;
		}
		.columnar > *:first-child { max-width:40%}
	}
}