






.wrap { 
	/*position: absolute;*/ 
	/*width: 100%; */
	/*padding: 5px;*/ 
	/*max-width: 700px;*/ 
	/*top: 25%;*/ 
	/*left: 50%;*/ 
	/*transform: translateX(-5%);*/
}

.accordion {
	display: block;
	/*position: relative;*/
	width: 100%; }

.accordion h3 {
font-size:2rem;
line-height: 1.8rem;
margin-top: 1rem;
margin-bottom:1rem;
letter-spacing:0rem;
}

.accordion__item {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	
	&:last-child {
		margin-bottom: 0; }}

.accordion__title {
	display: block;
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0px 5px 0 5px;
	/*font-size: .875em;
	font-weight: 500;*/
	background-color: #412226; 
	/*color: white;*/
	/*border-bottom: 1px solid #eee;*/
	overflow: hidden;
	transition: background-color .2s;
	text-decoration: none;

	&:hover {
		background-color: #fafafa; }

	&.active {
		background: hsl(95,70%,90%);
	
		& .x7 {
		transform: rotate(-90deg);
		
		& .btop {
			width: 67%;
			top: 2px;
			transform: translateY(-50%) rotate(-45deg);
			transform-origin: 50% 50%; }
		& .bmid {
			opacity: 0; }
		& .bbot {
			width: 67%;
			bottom: 2px;
			transform: translateY(50%) rotate(45deg);
			transform-origin: 50% 50%; }}}}


.accordion__content {
	display: none;
	position: relative;
	overflow: hidden;
	/*border: 1px solid #eee;*/
	border-top: none;
	line-height: 1.65;
	padding: 5px;
	/*background-color: #d3c8c2;*/
	font-size: .875em; }

// --- Icon ---
.bmenu { 
	width: 26px; 
	height: 16px; 
	display: block; 
	position: absolute;
	right: 15px;
	top: 12px; }

.btop, .bmid, .bbot {
	right: 0;
	width: 100%;
	height: 2px;
	position: absolute;
	background-color: #333;
	border-radius: 1px; }

.btop {
	width: 40%; }

.bmid {
	width: 60%; }

.bbot {
	width: 80%; }

.x7 {
	transition: transform .3s ease-out;
	transform-origin: 60% 75%;
	
	& .btop {
		top: 0;
		transition: width .3s, transform .3s, top .0s;
		transition-timing-function: ease-out; }

	& .bmid {
		top: calc(50% - 1px);
		transform-origin: 100% 50%;
		transition: opacity .1s;
		transition-timing-function: ease-out; }

	& .bbot {
		bottom: 0;
		transition: width .3s, transform .3s, bottom .0s;
		transition-timing-function: ease-out; }}

