.colored_items_menu {
	background: none;
	width: 300px;
}
.colored_items_menu > ul {
	padding: 10px 10px;
	list-style: none;
} 
.colored_items_menu > ul > li {
	background: #2d7795;
	opacity: 0.9;
}
.colored_items_menu > ul > li:hover {
	opacity: 1.0;
}
.colored_items_menu > ul > li:not(:last-child) {
	margin-bottom: 5px;
}
.colored_items_menu > ul > li .item_wrapper {
	position: relative;
	padding: 9px 10px;
}
.colored_items_menu > ul > li .item_wrapper > a {
	color: white;
	display: block;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	line-height: 25px;
	text-transform: uppercase;
	text-shadow: 0px 0px 0.1px white;
}
.colored_items_menu > ul > li .item_wrapper > a:link {
	text-decoration: none;
}
.colored_items_menu > ul > li .arrow_wrapper {
	position: absolute;
	right: 10px;
	top: 20%;
	bottom: 20%;
	font-size: 0;
	text-align:right;
}
.colored_items_menu > ul > li:hover .arrow_wrapper {
	right: 5px;
}
.colored_items_menu > ul > li .arrow_wrapper img {
	height: 100%;
	vertical-align: middle;
}
/*backgrounds*/
.colored_items_menu .background1 {
	background: #2d5f6c;
}
.colored_items_menu .background2 {
	background: #1d4d23;
}
.colored_items_menu .background3 {
	background: #7d347c;
}
.colored_items_menu .background4 {
	background: #4b4b4b;
}
/*end of backgrounds*/
/*animation*/
.colored_items_menu > ul > li:hover, .colored_items_menu > ul > li {
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-delay: 0s;
	transition-timing-function: linear;
}
.colored_items_menu > ul > li:hover .arrow_wrapper,
.colored_items_menu > ul > li .arrow_wrapper {
	transition-property: right;
	transition-duration: 0.2s;
	transition-delay: 0.0s;
	transition-timing-function: cubic-bezier(.45,.05,.55,.95);
}


/*end of animation*/