accordeon.css

#accordeon {
	margin: auto;
  	position: absolute;
    top: 12%; 
    left: 0;
    bottom: 0; 
    right: 0;
 	width: 50%;
}

.item {
	background: #E7E7E7;
	border-radius: 20px;
	margin-bottom: 8px;
}

.item_title {
	border-radius: 20px;
	color: #FFF;
	min-height: 20px;
	padding: 10px 20px;
	cursor: pointer;
	font-weight: bold;
	z-index: 2;
}

.item:nth-child(even) .item_title {
	background: #E7E7E7;
	color: #4F4F4f;
}

.item:nth-child(odd) .item_title {
	background: #696666;
    color: #FFF;
}

.item.open .item_title {
	background: #FF8663;
	color: #FFF;
}

.item_list {
	margin: 0px;
	height: 100%;
    color: #4F4F4F;
    line-height: 27px;
    overflow: hidden;
}

.item:not(.open) .item_list {
	max-height: 0px;
    padding: 0px;
    transition: max-height 0.6s, padding 0.2s 0.5s;
}

.item.open .item_list {
	transition: max-height 2s;
	max-height: 1000px;
	padding: 10px 20px;
}

.item_list li {
	list-style-type: none;
}

.item .item_title:after {
	content: '';
    position: relative;
    width: 0;
    height: 0;
    border-top: solid 16px #FF8663;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    display: inline-block;
    float: right;
    margin-top: 2px;
    transition: border 0.2s 0.2s;
}

.item.open .item_title:after {
	border-bottom: solid 16px #FFF;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    border-top: 0px;
    margin-top: 1px;
}

.item .item_title:hover {
	background: #FF8663;
	color: #FFF;
}

.item .item_title:hover:after {
	border-bottom-color: #FFF;
	border-top-color: #FFF;
}

.header {
	width: 100%;
	height: 87px;
	background: url(logo.png) no-repeat 50% 0;
}