/* ==================
   EXTENDED ACCORDION
   ================== */	
   
/* Structure */
.extended-accordion {
	background: var(--color__light-gray); }

.extended-accordion__container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--layout__max-width);
	display: flex;
	flex-wrap: nowrap; }

.extended-accordion__nav {
	flex: 0 0 30%;
	list-style: none;
	background: var(--color__midnight);
	padding: 3rem;
	position: relative;
	flex-basis: 25%;
	z-index: 2; }

/* Fill horizontal space with color */	
.extended-accordion__nav:before {
	content: '';
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	width: 100vw;
	height: 100%;
	z-index: 0;
	background: var(--color__midnight); }

/* Themes */
.extended-accordion__oiablue .extended-accordion__nav,
.extended-accordion__oiablue .extended-accordion__nav:before {
	background: var(--color__oia-blue); }


.extended-accordion__content-container {
	flex: 1; /* Remaining 70% */
	padding: var(--spacing__x);
	overflow-y: scroll; }
	
.extended-accordion__content {
	display: none; 
	background: #f9f9f9;
	padding: var(--spacing__x); }

.extended-accordion__content.active {
	display: block; }
	

@media (max-width: 768px) {
	.extended-accordion__container {
		flex-direction: column; }
	
	.extended-accordion__list {
		flex: unset;
		width: 100%;
		border-right: none; }
	
	.extended-accordion__nav {
		padding: 0; }
	
	.extended-accordion__content-container {
		display: none; }
	
	.extended-accordion__item {
		display: block; }
	
	.extended-accordion__link + .extended-accordion__content {
		display: none; }
	
	.extended-accordion__content.active {
		display: block; }
		
	.extended-accordion__content {
		padding: 0; }
	
	.extended-accordion__content .container {
		padding: var(--spacing__x); }
		
}

/* Items */		
.extended-accordion__content .image {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 3rem; }	
	
.extended-accordion__content .image img {
	max-width: 100%; }


@media (max-width: 768px) {
	
	.extended-accordion__content .image {
		border-radius: 0; }
	
}	
	
	
/* Nav */
.extended-accordion__nav li.extended-accordion__item {
	cursor: pointer;
	position: relative;
	opacity: .4; }

.extended-accordion__nav li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding: 1rem 0;
	padding-right: 2em;
	color: #fff; }
	
.extended-accordion__nav li.active {
    opacity: 1; }
	   
.extended-accordion__nav li a:after {
	content: '';
	position: absolute;
	display: block;
	top: 1em;
	right: 0;
	width: 1em;
	height: 1em;
	z-index: 3;
	transition: all .3s;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg width='11px' height='18px' viewBox='0 0 11 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.031613, -0.031613)' fill='%23FFFFFF'%3E%3Cpolygon id='Fill-1' transform='translate(5.500000, 9.000000) rotate(90.000000) translate(-5.500000, -9.000000) ' points='12.1493949 14.5 5.50063838 8.05533997 -1.14971406 14.5 -3.5 12.2224073 5.50079798 3.5 14.5 12.2224073'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
    

/* Max heights */
@media (min-width: 768px) {
	
	.extended-accordion,
	.extended-accordion__nav {
		min-height: 600px; }
		
	.extended-accordion__content-container {
		max-height: 600px; }

}



@media (max-width: 768px) {
		
		.extended-accordion__nav {
			padding: 0; }
		
		.extended-accordion__nav li {
			border-bottom: 1px solid rgba(255,255,255,.2); 		}
		.extended-accordion__nav li a {
			padding: var(--spacing__x); }
		
		.extended-accordion__nav li a:after {
			top: 1.5em;
		   right: 1em; }
			
		.extended-accordion__nav li a:after {
			transform: rotate(90deg); }
			
		.extended-accordion__nav li.active a:after {
			transform: rotate(270deg); }	
		
}