/* ACCORIDON */

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

.ACCORDION .heading {
	z-index: 1;
	margin: 0;
	position: relative;
	background: var(--white);
	padding: var(--s5) var(--s9) var(--s5) var(--s5);
	transition: color 0.25s;
}

.ACCORDION .toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999rem;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none
}

.ACCORDION .toggle::before {
    content: '';
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    width: 54rem;
    height: 54rem;
    background: no-repeat center url(../../assets/images/ui-accordion-arrow-close.svg);
}


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

.ACCORDION .content {
	position: relative;
	padding: var(--s4);
	z-index: 1;
	background: var(--light-blue-300);
	box-shadow: inset 0 0 0 1rem var(--light-blue-300);
}

.ACCORDION .row.alt-active .wrapper {max-height: var(--height, none);}

.ACCORDION .row.alt-active .heading {background: var(--light-blue-300);}
.ACCORDION .row.alt-active h5 {color: var(--med-blue-400);}
.ACCORDION .row.alt-active .toggle::before {background: no-repeat center url(../../assets/images/ui-accordion-arrow.svg);}


@media screen and (max-width: 960px) {
	.ACCORDION .row:not(:last-child) {margin-bottom: var(--s3);}
	.ACCORDION .toggle::before {top: var(--s2);right: var(--s1);}
	.ACCORDION .heading {padding: var(--s4) var(--s8) var(--s4) var(--s4);}
	.ACCORDION .content {padding: var(--s4);}
}



/* image */

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

.ACCORDION[data-variant="image"] .rows {
	width: calc(33.333333% - 5rem);
	box-sizing: border-box;
	padding-right: var(--s3);
}

.ACCORDION[data-variant="image"] .image {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: calc(66.666666% + 5rem);
	box-sizing: border-box;
	padding-left: var(--s6);
	transition: opacity 0.25s;
}

.ACCORDION[data-variant="image"] .spacer {
	width: calc(66.666666% + 5rem);
	padding-left: var(--s6);
	box-sizing: border-box;
	opacity: 0;
}

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

@media screen and (max-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;}
	.ACCORDION[data-variant="image"] .spacer {display: none;}
}