#first {
	width: 50%;
	border-top: ridge 10px #F13131;
	border-left: ridge 10px #F13131;
	border-right: groove 10px #F13131;
	border-bottom: groove 10px #F13131;
}

#first {
	transition: width 0.5s ease;
}

#first:hover {
	width: 60%;
}

#second {
	width: 60%;
	border-top: ridge 10px #F16C31;
	border-left: ridge 10px #F16C31;
	border-right: groove 10px #F16C31;
	border-bottom: groove 10px #F16C31;
}

#second {
	transition: width 0.5s ease;
}

#second:hover {
	width: 75%;
}

#third {
	width: 60%;
	border-top: ridge 10px #F1CC31;
	border-left: ridge 10px #F1CC31;
	border-right: groove 10px #F1CC31;
	border-bottom: groove 10px #F1CC31;
}

#third {
	transition: width 0.5s ease;
}

#third:hover {
	width: 75%;
}

#fourth {
	width: 60%;
	border-top: ridge 10px #31F18E;
	border-left: ridge 10px #31F18E;
	border-right: groove 10px #31F18E;
	border-bottom: groove 10px #31F18E;
}

#fourth {
	transition: width 0.5s ease;
}

#fourth:hover {
	width: 75%;
}

#fifth {
	width: 45%;
	border-top: ridge 10px #4FD0FF;
	border-left: ridge 10px #4FD0FF;
	border-right: groove 10px #4FD0FF;
	border-bottom: groove 10px #4FD0FF;
}

#fifth {
	transition: width 0.5s ease;
}

#fifth:hover {
	width: 60%;
}

#total li {
	text-align: left;
}