/* ------------------------------------------------  
	ACCORDION / ABO
	------------------------------------------------  */	
	/*display first*/
	.accordion__item .accordion-body {display: none;}
	
	/*
	.accordion { background: #dfdfdf;}
	.accordion-header { background: red;}
	.accordion-body { background: #444;}
	.rectangle-icon {background: #666;}
	*/
	
	 /*grid*/
	.accordion-header .title,
	.accordion-header .rectangle { display: inline-block; }
	.accordion-header .title,
	.accordion-body { width: calc(100% - 50px); }
	.accordion-header .rectangle { 
		width: 50px; 
		vertical-align: top;
	}
	
	/*style*/
	.accordion-header { 
		position: relative; 
		margin: 1rem 0; 
	}
	.accordion-body { 
		margin-bottom: 1.5rem; 
		padding-left: 1.5rem;
	}
	.accordion p { 
		margin: 0; 
		padding-right: 2rem;
	}
	.accordion__item { border-bottom: 1px solid #FFE6FF; }
	
	/*header*/
	.accordion-header,
	.rectangle,
	.rectangle:hover { 
		cursor: pointer; 
		outline: none;
	    caret-color: transparent;
	}
	
	/*rectangle*/
	.rectangle-icon,
	.rectangle span { display: inline-block; }
	
	.rectangle-icon {
		position: relative;
		width: 2rem;
		height: 2rem;
	}
	.rectangle span {
		position: absolute;
		top: 1rem;
		
		width: 1.2rem;
		height: 3px;
		background: #D3FF64;
		transition: all .2s ease;
	}
	
	.rectangle span:first-of-type {
		left: 0;
		transform: rotate(45deg);
	}
	.rectangle span:last-of-type {
		right: 0;
		transform: rotate(-45deg);
	}
	
	/* hover / active */	
	.accordion-header:hover .rectangle span:first-of-type,
	.rectangle:hover span:first-of-type,
    .accordion__item.active .rectangle span:first-of-type {transform: rotate(-45deg);}
	.accordion-header:hover .rectangle span:last-of-type,
	.rectangle:hover span:last-of-type,
    .accordion__item.active .rectangle span:last-of-type {transform: rotate(45deg);}