/*------------------------------------*\
    #Features
\*------------------------------------*/
.feature-panel {
	position: relative;

	.feature-icon {
		color: $color-theme;
		font-size: 55px;
		line-height: 1;
		margin-bottom: 35px;
	}

	.feature-img {
		width: 70px;
		height: 70px;
		line-height: 70px;
		@include rounded(50%);
		margin-bottom: 40px;
		text-align: center;
	}

	.feature-content {
		h3 {
			font-size: 20px;
			font-weight: 500;
			line-height: 1;
			margin-bottom: 19px;
		}

		p {
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			margin-bottom: 0;
		}

		ul {
			padding: 0;
			margin: 24px 0 0 0;
			list-style: none;

			li {
				padding-left: 26px;
				font-size: 14px;
				font-weight: 400;
				line-height: 26px;
				position: relative;
				margin-bottom: 15px;

				&:before {
					position: absolute;
					left: 0;
					top: 0;
					content: "\f00c";
					font-family: $awesome;
					font-size: 14px;
					line-height: 26px;
					color: $color-theme;
				}
			}
		}
	}
}

.feature-center {
	text-align: center;

	.feature-img {
		margin-right: auto;
		margin-left: auto;
	}
}

.feature-2 {
	.feature-panel {
		position: relative;
		padding-top: 100px;

		.feature-content {
			h3 {
				font-size: 36px;
				line-height: 42px;
				margin-bottom: 24px;
			}

			p {
				font-size: 16px;
				margin-bottom: 12px;
			}
		}
	}
}


.feature-3 {
	.feature-panel {
		position: relative;
		margin-bottom: 40px;
		padding: 40px;
		text-align: center;

		&:hover {
			@include prefix(box-shadow, 0 10px 40px 0 rgba(32, 62, 84, 0.08), moz webkit);
			@include rounded(4px);
		}

		.feature-img {
			width: 80px;
			height: 80px;
			line-height: 80px;
			@include rounded(50%);
			margin: 0 auto 33px auto;
			text-align: center;
			background: #eff8ff;
		}

		.feature-content {
			h3 {
				font-size: 18px;
				margin-bottom: 20px;
			}

			p {
				font-size: 14px;
			}
		}
	}

}

.feature-left {
	.feature-panel {
		margin-bottom: 40px;

		&:last-of-type {
			margin-bottom: 0;
		}

		.feature-img {
			position: absolute;
			left: 0;
			top: 0;
			line-height: 40px;
			width: auto;
		}

		.feature-content {
			padding-left: 70px;

			h3 {
				font-size: 18px;
				margin-bottom: 15px;
			}

			p {
				font-size: 14px;
				max-width: 300px;
			}
		}
	}
}

.img-shadow {
	@include prefix(box-shadow, 0 10px 25px 0 rgba(32, 62, 84, 0.2), moz webkit);
	@include rounded(4px);
}

.hr-bar {
	border-top-color: #e0e0e0;
	margin: 0;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width : 767px) {

	.feature-panel,
	.feature-left .feature-panel {
		margin-bottom: 30px;

		.feature-icon {
			margin-bottom: 10px;
		}

		.feature img {
			max-width: 100%;
			height: auto
		}

		.feature-content {

			ul {
				li {
					&:before {
						position: relative;
						padding-right: 10px;
					}
				}
			}

		}


	}

	.feature-2 {
		.feature-panel {

			.feature-content {
				h3 {
					font-size: 30px;
					line-height: 36px;
				}
			}
		}
	}


}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width : 991px) {
	.feature-panel {
		margin-bottom: 20px;
	}

	.feature-3 .feature-panel {
		padding: 10px;
	}

	.feature-2 {
		.feature-panel {

			.feature-content {
				h3 {
					font-size: 30px;
					line-height: 36px;
				}
			}
		}
	}
}