/* design: doc accordion -------------------------------------------------------------- */

.accordion2 .transition, 
.accordion2 span,
.accordion2 ul li i:before,
.accordion2 ul li i:after {
	transition: all 0.25s ease-in-out;
}

.accordion2 .no-select,
.accordion2 h2 {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 1.5em;
}

.accordion2 h3 {
	margin-top:1em;
}

.accordion2 h4 {
	margin-top:1.5em;
}

.accordion2 span {
	display:block;
	position: relative;
	overflow: hidden;
	opacity: 1;
	transform: translate(0, 0);
	margin-top: 14px;
	z-index: 2;
}

.accordion2 ul {
	list-style: none;
	perspective: 900;
	padding: 0;
	margin: 0;
}

.accordion2 ul li {
	position: relative;
	margin-bottom: 1em;
	padding: 1em 1em 1em 1.5em;
	background-color: #252525;
}

.accordion2 ul li:nth-of-type(1) {
	animation-delay: 0.5s;
}

.accordion2 ul li:nth-of-type(2) {
	animation-delay: 0.75s;
}

.accordion2 ul li:nth-of-type(3) {
	animation-delay: 1s;
}

.accordion2 ul li i {
	position: absolute;
	transform: translate(-6px, 0);
	margin-top: 16px;
	margin-right: 2em;
	right: 0;
}

.accordion2 ul li i:before, ul li i:after {
	content: "";
	position: absolute;
	background-color: #8e5ca3;
	width: 3px;
	height: 9px;
}

.accordion2 ul li i:before {
	transform: translate(-2px, 0) rotate(45deg);
}

.accordion2 ul li i:after {
	transform: translate(2px, 0) rotate(-45deg);
}

.accordion2 ul li input[type=checkbox] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}

.accordion2 ul li input[type=checkbox]:checked ~ span {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
}

.accordion2 ul li input[type=checkbox]:checked ~ i:before {
	transform: translate(2px, 0) rotate(45deg);
}

.accordion2 ul li input[type=checkbox]:checked ~ i:after {
	transform: translate(-2px, 0) rotate(-45deg);
}