#container {
    margin: 0 auto;
    width: 50%;
}
#accordion input {
	/*display: none;*/
        opacity: 0;
        position: absolute;
        right: 16px;
        top: 19px;
        z-index: 10;
        cursor: pointer;
}
#accordion label {
	background: #eee;
	border-radius: .25em;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: .25em 1em;
	z-index: 20;
}
#accordion label:hover {
	background: #ccc;
}

#accordion input:checked + label {
	background: #ccc;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: white;
	margin-bottom: 0;
}
#accordion .accord {
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion input:checked .accord {
}
#accordion input:checked ~ i{ position: absolute; transform: translate(-6px, 5px); margin-top: 16px; right: 0;}
#accordion input:checked ~ i:before{transform: translate(-2px, 0) rotate(45deg); content: ""; position: absolute; background-color: #404040; width: 3px; height: 9px; right: 16px !important;} 
#accordion input:checked ~ i:after{transform: translate(2px, 0) rotate(-45deg); content: ""; position: absolute; background-color: #404040; width: 3px; height: 9px; right: 16px !important;}
#accordion input:checked ~ .accord {
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	height: auto;
	margin-bottom: .125em;
}