.wrap { position: relative; width: 100%; padding: 30px; max-width: 700px; top: 25%; left: 45%; transform: translateX(-50%); }

.accordion {
	display: block;
	position: relative;
	width: 100%; }

.accordion__item {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	
	&:last-child {
		margin-bottom: 0; }}

.accordion__title {
	display: block;
	position: relative;
	height: 40px;
	line-height: 40px;
	padding: 0px 50px 0 20px;
	font-weight: 500;
	color: #214966;
    font-size: 1rem;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	transition: background-color .2s;

	&: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: 25px;
	background-color: #fff;
	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; }}