.TABS .tabs {
	border-bottom: 1px solid var(--black);
	margin-bottom: 60rem;
}

.TABS .tabs:last-child {
	margin-bottom: 0;
}

.TABS .tab {
	display: inline-block;
	vertical-align: bottom;
	margin-right: 30rem;
	border-bottom: 5rem solid transparent;
	padding-bottom: 10rem;
	margin-bottom: -1px;
	transition: border-color 0.25s;
}

.TABS .tab a,
.TABS .tab button {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	box-sizing: border-box;
	color: var(--black);
	font-family: 'dm-sans', sans-serif;
	font-weight: 400;
	font-size: 22rem;
	line-height: 1.25;
	text-align: left;
	width: auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: color 0.25s;
}

.TABS .tab a:hover,
.TABS .tab button:hover {
	color: var(--blue);
}

.TABS .panels {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	height: 9999rem;
	max-height: 500rem;
	transition: max-height 0.25s;
}

.TABS .panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
	overflow: hidden;
}

.TABS[data-active="1"] .tab:nth-child(1),
.TABS[data-active="2"] .tab:nth-child(2),
.TABS[data-active="3"] .tab:nth-child(3),
.TABS[data-active="4"] .tab:nth-child(4),
.TABS[data-active="5"] .tab:nth-child(5),
.TABS[data-active="6"] .tab:nth-child(6),
.TABS[data-active="7"] .tab:nth-child(7),
.TABS[data-active="8"] .tab:nth-child(8),
.TABS[data-active="9"] .tab:nth-child(9),
.TABS[data-active="10"] .tab:nth-child(10) {border-color: var(--blue); pointer-events: none;}

.TABS[data-active="1"] .panel:nth-child(1),
.TABS[data-active="2"] .panel:nth-child(2),
.TABS[data-active="3"] .panel:nth-child(3),
.TABS[data-active="4"] .panel:nth-child(4),
.TABS[data-active="5"] .panel:nth-child(5),
.TABS[data-active="6"] .panel:nth-child(6),
.TABS[data-active="7"] .panel:nth-child(7),
.TABS[data-active="8"] .panel:nth-child(8),
.TABS[data-active="9"] .panel:nth-child(9),
.TABS[data-active="10"] .panel:nth-child(10) {opacity: 1; pointer-events: all;}

.TABS.no-js .panels {max-height: none; height: auto;}
.TABS.no-js .panel:first-child {position: static; opacity: 1; pointer-events: all;}


@media screen and (min-width: 961px) {
	.TABS .panel .b-columns {flex-direction: row-reverse;}
	.TABS .panel .image {margin: 0 0 0 20rem;}


	.TABS.alt-product .content {padding-left: 500rem;}
	.TABS.alt-product h3,
	.TABS.alt-product h4 {float: left; clear: left; width: 460rem; margin-left: -500rem;}
}

@media screen and (max-width: 960px) {
	.TABS .tabs {border-bottom: none; border-left: 1px solid var(--black); margin-bottom: 40rem;}
	.TABS .tab {display: block; padding: 0 0 0 15rem; margin: 0 0 0 -1px; border-bottom: none; border-left: 5rem solid transparent;}
	.TABS .tab a,
	.TABS .tab button {font-size: 14rem;}

	.TABS.alt-product h3 {display: none;}
	.TABS.alt-product h4 {margin-top: 0;}
}



/* BUTTON STYLE */

@media screen and (min-width: 961px) {
	.TABS[data-style="buttons"] .tabs {
		text-align: center;
		margin-right: -20rem;
		border-bottom: none;
		margin-bottom: 40rem;
	}

	.TABS[data-style="buttons"] .tab {
		border: none;
		padding-bottom: 0;
		margin: 0 20rem 20rem 0;

	}

	.TABS[data-style="buttons"] .tab button {
		font-size: 16rem;
		background: var(--white);
		padding: 15rem 30rem;
		border-radius: 10rem;
		box-shadow: inset 0 0 0 1px var(--black);
		font-weight: 700;
	}

	.TABS[data-style="buttons"][data-active="1"] .tab:nth-child(1) button,
	.TABS[data-style="buttons"][data-active="2"] .tab:nth-child(2) button,
	.TABS[data-style="buttons"][data-active="3"] .tab:nth-child(3) button,
	.TABS[data-style="buttons"][data-active="4"] .tab:nth-child(4) button,
	.TABS[data-style="buttons"][data-active="5"] .tab:nth-child(5) button,
	.TABS[data-style="buttons"][data-active="6"] .tab:nth-child(6) button,
	.TABS[data-style="buttons"][data-active="7"] .tab:nth-child(7) button,
	.TABS[data-style="buttons"][data-active="8"] .tab:nth-child(8) button,
	.TABS[data-style="buttons"][data-active="9"] .tab:nth-child(9) button {background: var(--black); color: var(--white);}
}
