.datalist {
	width:100%;
	margin: auto;
	position: relative;
}

.datalist.active .datalist-ul {
	transform: scale(1,1);
	transform-origin: top;
	transition: transform .3s;
}

i {
	position: absolute;
	right: 20px;
	top: 20px;
	transition: transform 0.2s ease;
}

.datalist.active i {
	transform: rotate(270deg);
}

.datalist-ul {
	transform: scale(1,0);
	transform-origin: top;
	transition: transform .3s;
	position: absolute;
	padding: 0.4em 0;
	max-height: 200px;
	top: 100%;
	left: 0;
	list-style: none;
	border-radius: 2px;
    background: #faf7f2;
	overflow: hidden;
	overflow-y: auto;
	z-index: 120;
	text-transform: uppercase;
}

.datalist-ul li {
	display: block;
	text-align: center;
	padding: 0.3em 1em 0.3em 1em;
	color:#61002f;
    cursor: pointer;
    font-size: 1.2vmax;
}

.datalist-ul li:hover {
	color:#fba146;
}