/* ===== servicesfeature ===== */

.servicesfeature ul {
	padding: 0;
}
.servicesfeature li,
.servicesfeature li:hover li,
.servicesfeature li:hover {
	transition: width 0.3s;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
}
.servicesfeature li {
	list-style-type: none;
	float: left;
	background: #eee;
	padding: 20px;
	margin-right: 1px;
	text-align: center;
	color: #888 !important;
	width: 220px;
	height: 100px;
}
.servicesfeature li p {
	overflow: hidden;
	white-space: nowrap;
}
.servicesfeature li p a {
	visibility: hidden;
}
.servicesfeature ul:hover li{
	 width: 210px;
}
.servicesfeature li:hover {
	width: 260px!important;
	background: #5aadce !important;
	cursor: pointer;
	color: #FFF !important;
	text-align: left;
}
.servicesfeature li:hover i {
	float: left;
	line-height: 60px;
	margin: 0 20px 0 5px;
}
.servicesfeature li:hover p a {
	visibility: visible;
	color: #FFF;
}

/* ===== Info Boards ==== */

.info-board {
	margin: 20px 0;
	padding: 15px 30px 15px 15px;
	border-left: 5px solid #eee;
}

/* 1. Info board green */

.info-board-green {
	background-color: #F5FAF0;
	border-color: #72a53b;
}
.info-board h4 {
	margin-top: 0;
}
.info-board p:last-child {
	margin-bottom: 0;
}

/* 2. Info board blue */

.info-board-blue {
	background-color: #EBF9FF;
	border-color: #00B4FF;
}
.info-board h4 {
	margin-top: 0;
}
.info-board p:last-child {
	margin-bottom: 0;
}

/* 3. Info board red */

.info-board-red {
	background-color: #FBF0EE;
	border-color: #E74C3C;
}
.info-board h4 {
	margin-top: 0;
}
.info-board p:last-child {
	margin-bottom: 0;
}

/* 4. Info board orange */

.info-board-orange {
	background-color: #FFF2EB;
	border-color: #FFA973;
}
.info-board h4 {
	margin-top: 0;
}
.info-board p:last-child {
	margin-bottom: 0;
}