/* ACCORIDON */

.ACCORDION .row:not(:last-child) {
	margin-bottom: var(--s5);
}

.ACCORDION .row::before {
	content: '';
	display: block;
	height: 1px;
	background: var(--grey-200);
	margin-bottom: var(--s5);
}

.ACCORDION .row:last-child::after {
	content: '';
	display: block;
	height: 1px;
	background: var(--grey-200);
	margin-top: var(--s5);
}

.ACCORDION .heading {
	z-index: 1;
	padding: 4rem 0;
	margin: -4rem 0;
	position: relative;
	padding-right: var(--s6);
	transition: color 0.25s;
	overflow: hidden;
}

.ACCORDION .toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--s5);
	height: var(--s5);
	text-indent: -9999rem;
	border: none;
	padding: 0;
	margin: 1rem 0 0;
	cursor: pointer;
	background: none;
	box-shadow: inset 0 0 0 1px var(--blue-500);
	color: var(--blue-700);
	border-radius: 9999rem;
	transition: background-color 0.25s, color 0.25s;
}

.ACCORDION .toggle span {
	position: absolute;
	overflow: hidden;
	width: 1rem;
	height: 1rem;
	left: -9999rem;
}

.ACCORDION .toggle svg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--s5);
	height: var(--s5);
	fill: currentColor;
}

.ACCORDION .toggle svg:nth-child(1) {
	display: block;
}

.ACCORDION .toggle::after {
	content: '';
	position: absolute;
	top: var(--ns3);
	right: 0;
	bottom: var(--ns3);
	left: -9999rem;
}

.ACCORDION .toggle:hover {
	background: var(--blue-500);
	color: var(--white);
}

.ACCORDION .wrapper {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s;
}

.ACCORDION .content {
	position: relative;
	padding: var(--s3) var(--s6) 0 0;
	z-index: 1;
}

.ACCORDION .content em {
	font-style: normal;
	color: var(--blue-700);
}

.ACCORDION .content > table:first-child {margin-top: var(--s3) !important;}

.ACCORDION table {position: relative;}
.ACCORDION table td {width: 50%; box-sizing: border-box; border-color: var(--grey-100);}
.ACCORDION table tr:first-child td {border-top: none; padding-top: 0;}
.ACCORDION table tr:last-child td {border-bottom: none; padding-bottom: 0;}
.ACCORDION table td:last-child {border-color: var(--blue-100);}

.ACCORDION table::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--s5);
	background: var(--white);
	transform: translate(-50%, 0);
}

.ACCORDION table ul.b-checklist li {background-image: url(../../assets/images/ui-checkbox-alt.svg);}
.ACCORDION table ul.b-wronglist li {background-image: url(../../assets/images/ui-wrongbox-alt.svg);}

.ACCORDION .expander {
	text-align: right;
	margin-bottom: var(--s4);
}

.ACCORDION .expander .b-button {
	font-size: 20rem;
}

.ACCORDION .row.alt-active::before {background: var(--purple-blue-gradient);}
.ACCORDION .row.alt-active .heading {color: var(--blue-700);}
.ACCORDION .row.alt-active .toggle svg:nth-child(1) {display: none;}
.ACCORDION .row.alt-active .toggle svg:nth-child(2) {display: block;}
.ACCORDION .row.alt-active .wrapper {max-height: var(--height, none);}


.ACCORDION[data-variant="quote"] .heading p {opacity: 0.8; color: var(--black)}
.ACCORDION[data-variant="quote"] .toggle::after {bottom: -9999rem;}
.ACCORDION[data-variant="quote"] .row.alt-active .heading p {opacity: 1;}


@media screen and (max-width: 1440px) {
	.ACCORDION .content {padding-right: 0;}
}

@media screen and (max-width: 960px) {
	.ACCORDION .expander {margin-bottom: var(--s2);}
	.ACCORDION .expander .b-button {font-size: 16rem; margin-left: auto;}
	.ACCORDION .expander .b-button svg {margin-top: -2rem;}

	.ACCORDION table::after {width: var(--s3);}
	.ACCORDION table h4 {font-size: 20rem;}
}



/* image */

.ACCORDION[data-variant="image"] {
	position: relative;
	display: flex;
	justify-content: space-between;
}

.ACCORDION[data-variant="image"] .rows {
	width: calc(33.33% - 22rem);
	box-sizing: border-box;
}

.ACCORDION[data-variant="image"] .image {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: calc(66.66% - 11rem);
	box-sizing: border-box;
	/*transition: opacity 0.25s;*/
}

.ACCORDION[data-variant="image"] .image .b-img {
	border-radius: var(--s3);
	overflow: hidden;
}

.ACCORDION[data-variant="image"] .spacer {
	width: calc(66.66% - 11rem);
	box-sizing: border-box;
	opacity: 0;
	position: relative;
}

.ACCORDION[data-variant="image"] .row.alt-active .toggle {pointer-events: none;}
.ACCORDION[data-variant="image"] .row.alt-active .image {opacity:1;}

.ACCORDION[data-variant="image"][data-img-border] .image .b-img {
	border: 1px solid var(--blue-500);
}

@media (width > 960px) {
	.ACCORDION[data-variant="image"][data-layout="50-50"] .rows {width: calc(50% - 16rem);}
	.ACCORDION[data-variant="image"][data-layout="50-50"] .image,
	.ACCORDION[data-variant="image"][data-layout="50-50"] .spacer {width: calc(50% - 16rem);}
}

@media (width <= 960px) {
	.ACCORDION[data-variant="image"] {display: block;}
	.ACCORDION[data-variant="image"] .rows {min-height: 0 !important; width: auto; padding-right: 0;}
	.ACCORDION[data-variant="image"] .image {position:static; width:auto; padding: 0; margin-top: var(--s3); opacity: 1 !important;}
	.ACCORDION[data-variant="image"] .spacer {display: none;}
}



/* quote */

.ACCORDION[data-variant="quote"] .wrapper {
	display: flex;
	justify-content: space-between;
}

.ACCORDION[data-variant="quote"] .content {
	flex-grow: 1;
}

.ACCORDION[data-variant="quote"] .quote {
	flex: 0 0 auto;
	width: var(--col-4);
	margin-left: var(--s3);
}

.ACCORDION[data-variant="quote"] .content ul {
	font-size: 16rem;
	opacity: 0.8;
}

@media (width <= 960px) {
	.ACCORDION[data-variant="quote"] .wrapper {flex-wrap: wrap;}
	.ACCORDION[data-variant="quote"] .quote {width: 100%; margin: var(--s5) 0 0 0;}
	.ACCORDION[data-variant="quote"] .content ul {font-size: 14rem;}
}



/* problem-solution */

.ACCORDION[data-variant="problem-solution"] {
	position: relative;
	padding-top: var(--s7);
}

.ACCORDION[data-variant="problem-solution"]::before {
	content: 'Problem';
	position: absolute;
	top: 0;
	left: 0;
	width: var(--col-6);
	font-size: 18rem;
	text-transform: uppercase;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.ACCORDION[data-variant="problem-solution"]::after {
	content: 'Solution';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--col-5);
	font-size: 18rem;
	text-transform: uppercase;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.ACCORDION[data-variant="problem-solution"] .wrapper {
	display: flex;
	justify-content: space-between;
}

.ACCORDION[data-variant="problem-solution"] .content {
	width: calc(50% - var(--s3));
	flex: 0 0 auto;
	padding: var(--s1) 0 0;
}

.ACCORDION[data-variant="problem-solution"] .solution {
	width: var(--col-5);
	flex: 0 0 auto;
	padding: 6rem var(--s7) 0 0;
	position: relative;
	box-sizing: border-box;
}

.ACCORDION[data-variant="problem-solution"] .solution::after {
	content: '';
	position: absolute;
	top: 8rem;
	left: -116rem;
	width: var(--s6);
	height: var(--s5);
	background: url('../../assets/images/ui-arrow-blue.svg') no-repeat center / 32rem auto;
}

@media (width > 960px) {
	.ACCORDION[data-variant="problem-solution"] .toggle {display: none;}
	.ACCORDION[data-variant="problem-solution"] .row .wrapper {max-height: var(--height, none);}
	.ACCORDION[data-variant="problem-solution"] .row::before {background: var(--grey-200);}
	.ACCORDION[data-variant="problem-solution"] .row .heading {color: var(--black);}
}

@media (width <= 960px) {
	.ACCORDION[data-variant="problem-solution"] {padding-top: 0;}
	.ACCORDION[data-variant="problem-solution"]::before {display: none;}
	.ACCORDION[data-variant="problem-solution"]::after {display: none;}

	.ACCORDION[data-variant="problem-solution"] .wrapper {display: block;}
	.ACCORDION[data-variant="problem-solution"] .content {width: auto; padding-top: var(--s3);}
	.ACCORDION[data-variant="problem-solution"] .heading {overflow: visible; padding-top: var(--s2); padding-bottom: 0; transform: translate(0, 4rem);}

	.ACCORDION[data-variant="problem-solution"] .solution {width: auto; padding-top: var(--s5); margin-top: var(--s2); position: relative;}
	.ACCORDION[data-variant="problem-solution"] .solution::after {display: none;}

	.ACCORDION[data-variant="problem-solution"] .heading::before {
		content: 'Problem';
		position: absolute;
		top: var(--ns1);
		left: 0;
		font-size: 12rem;
		text-transform: uppercase;
		line-height: 1.3;
		font-weight: 500;
		letter-spacing: 0.05em;
		color: var(--black);
	}

	.ACCORDION[data-variant="problem-solution"] .solution::before {
		content: 'Solution';
		position: absolute;
		top: var(--s2);
		left: 0;
		font-size: 12rem;
		text-transform: uppercase;
		line-height: 1.3;
		font-weight: 500;
		letter-spacing: 0.05em;
		color: var(--black);
	}
}



/* chart-1 */

.ACCORDION.alt-chart-1 .spacer {
	opacity: 0.5;
}

.ACCORDION.alt-chart-1 .trigger {
	position: absolute;
	top: 345rem;
	left: calc(50% - 2rem);
	border-radius: 9999rem;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.25;
}

.ACCORDION.alt-chart-1 .trigger:hover {
	border-color: var(--purple-700) !important;
}

.ACCORDION.alt-chart-1 .trigger::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 9999rem;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ACCORDION.alt-chart-1 .trigger[data-row="1"] {width: 128rem; height: 128rem; border: 64rem solid transparent; z-index: 9;}
.ACCORDION.alt-chart-1 .trigger[data-row="2"] {width: 208rem; height: 208rem; border: 80rem solid transparent; z-index: 8;}
.ACCORDION.alt-chart-1 .trigger[data-row="3"] {width: 294rem; height: 294rem; border: 42rem solid transparent; z-index: 7;}
.ACCORDION.alt-chart-1 .trigger[data-row="4"] {width: 385rem; height: 385rem; border: 45rem solid transparent; z-index: 6;}
.ACCORDION.alt-chart-1 .trigger[data-row="5"] {width: 686rem; height: 686rem; border: 150rem solid transparent; z-index: 5;}

.ACCORDION.alt-chart-1 .trigger[data-row="2"]::after {width: 128rem; height: 128rem;}
.ACCORDION.alt-chart-1 .trigger[data-row="3"]::after {width: 208rem; height: 208rem;}
.ACCORDION.alt-chart-1 .trigger[data-row="4"]::after {width: 294rem; height: 294rem;}
.ACCORDION.alt-chart-1 .trigger[data-row="5"]::after {width: 385rem; height: 385rem;}

@media (width <= 1440px) {
	.ACCORDION.alt-chart-1 .trigger {top: 241rem; left: calc(50% - 1rem);}
	.ACCORDION.alt-chart-1 .trigger {transform: translate(-50%, -50%) scale(0.695);}
}



/* chart-2 */

.ACCORDION.alt-chart-2 .spacer {opacity: 1;}
.ACCORDION.alt-chart-2 .spacer .b-img {opacity: 0;}

.ACCORDION.alt-chart-2 .trigger {
	position: absolute;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.1;
	width: 365rem;
	height: 31rem;
	transform: skew(60deg, -30deg);
	z-index: 3;
}

.ACCORDION.alt-chart-2 .trigger:hover {
	background-color: var(--purple-700) !important;
}

.ACCORDION.alt-chart-2 .trigger[data-row="1"] {top: 106rem; left: 93rem;}
.ACCORDION.alt-chart-2 .trigger[data-row="2"] {top: 195rem; left: 251rem;}
.ACCORDION.alt-chart-2 .trigger[data-row="3"] {top: 287rem; left: 411rem;}

@media (width <= 1440px) {
	.ACCORDION.alt-chart-2 .trigger {transform: skew(60deg, -30deg) scale(0.695);}
	.ACCORDION.alt-chart-2 .trigger[data-row="1"] {top: 69rem; left: 10rem;}
	.ACCORDION.alt-chart-2 .trigger[data-row="2"] {top: 133rem; left: 120rem;}
	.ACCORDION.alt-chart-2 .trigger[data-row="3"] {top: 196rem; left: 230rem;}
}