#services {
	-webkit-font-smoothing: antialiased;

	#hero {
		margin-top: 70px;

		@media(min-width: 992px) {
			.row {
				border-bottom: 1px solid #E6E6E8;
			}
		}

		.image {
			img {
				@media(max-width: 991px) {
					margin: 0 auto;
				}
			}
		}
		.info {			
			@media(min-width: 992px) {
				padding-left: 60px;
			}
			
			@media(max-width: 991px) {
				text-align: center
			}

			h3 {
				font-family: $myriad;
				font-weight: 500;
				margin-top: 70px;
				font-size: 28px;
			}
			p {
				color: #666;
				margin-top: 15px;
				line-height: 23px;
				@media(min-width: 992px) {
					width: 85%;
				}
			}
		}
	}

	#tabs {
		margin-top: 110px;

		@media(max-width: 991px) {
			margin-top: 70px;
		}

		.hexagons {
			text-align: center;

			.hexagon {
				background: url("../../images/hexagon.png") 0 0 no-repeat;
				width: 100px;
				height: 113px;
				position: relative;
				display: inline-block;
				margin-right: 60px;
				cursor: pointer;

				@media(max-width: 991px) {
					margin: 0;
				}

				&:hover,
				&.active {
					background-position: 0 -117px;
					.icon {
						color: #fff;
					}
				}
				&:last-child {
					margin-right: 0px;
				}
				.icon {
					font-size: 48px;
					color: #80939b;
					position: absolute;
					top: 32px;
					left: 0;
					right: 0;
					text-align: center;
				}
			}
		}
		.sections {
			margin-top: 35px;
			position: relative;
			height: 220px;			
			.section {
				display: none;
				position: absolute;
				&.active {
					display: block;
				}

				h4 {
					margin-bottom: 18px;
				}
				p {
					line-height: 25px;
				}
			}
		}
	}

	#grid-first {
		margin-top: 30px;
		.header {
			border-top: 1px solid #E6E6E8;
			padding-top: 55px;
			text-align: center;
			h3 {
				font-size: 25px;
				color: #555C68;
				line-height: 25px;
				font-weight: 400;
				margin-bottom: 13px;
			}
			p {
				font-size: 16px;
				font-weight: 400;
				color: #888;
			}
		}
		.sections {
			margin-top: 45px;

			.section {
				text-align: center;
				
				@media(max-width: 991px) {
					margin-bottom: 40px;
				}

				.pic {
					display: inline-block;
					padding: 15px;
					background: #f5f5f5;
					box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.45), inset 0px 0px 1px 1px #fff;
				}
				.info {
					margin-top: 25px;
					text-align: center;
					
					@media(min-width: 992px) {
						margin-left: 45px;
						width: 80%;
						text-align: left;
					}
					
					strong {
						font-weight: 500;
						font-size: 18px;
						color: #555;
					}
					p {
						color: #666;
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}
	}

	#grid-second {
		margin-top: 80px;

		@media(max-width: 991px) {
			margin-top: 50px;
		}

		.header {
			border-top: 1px solid #E6E6E8;
			padding-top: 55px;
			margin-bottom: 35px;

			h3 {
				font-size: 27px;
				font-family: $myriad;
				color: #444;
				line-height: 25px;
				font-weight: 500;
				margin-bottom: 7px;

				@media(max-width: 991px) {
					text-align: center;
				}
			}
			p {
				font-size: 15px;
				font-weight: 400;
				color: #666;
				width: 50%;
				line-height: 24px;
				margin-top: 15px;

				@media(max-width: 991px) {
					margin: 0 auto;
					width: 90%;
					text-align: center;
				}
			}
		}
		.features {
			margin-bottom: 20px;
			.feature {
				
				@media(max-width: 991px) {
					text-align: center;
					margin-bottom: 30px;
				}

				img {
					max-width: 40px;
					position: relative;
					top: 10px;

					@media(min-width: 992px) {
						float: left;
					}
				}
				.info {
					@media(min-width: 992px) {
						float: left;
						width: 80%;
						margin-left: 20px;
					}
					strong {
						display: block;
						font-weight: 500;
						font-size: 16px;
						color: #444;
						margin-top: 15px;
					}
					p {
						font-weight: normal;
						font-size: 14px;
						color: #797979;
						margin-top: 10px;
						line-height: 24px;
					}
				}				
			}
		}
	}

	#features-hover {
		margin-top: 120px;

		@media(max-width: 991px) {
			margin-top: 60px;
		}

		.images {
			height: 355px;

			@media(max-width: 767px) {
				height: 300px;
			}

			img {
				margin: 0 auto;
				position: absolute;
				left: 0;
				right: 0;
				display: none;
				&.active {
					display: block;
				}
			}
		}
		.features {
			margin-top: 50px;

			@media(max-width: 991px) {
				margin-top: 0px;
			}

			.feature {
				cursor: pointer;
				@media(min-width: 992px) {
					width: 85%;
					margin: 0 auto;
				}
				&.active,
				&:hover {
					strong {
						color: #58B0D5;
					}
					p {
						color: #555;
					}
				}
				strong {					
					color: #b6b6b6;
					font-size: 16px;
					@include transition(color 0.2s linear);
				}
				p {
					margin-top: 15px;
					line-height: 25px;
					color: #b6b6b6;
					@include transition(color 0.2s linear);
				}
			}
		}
	}

	#cta {
		margin-top: 120px;

		.wrapper {
			background: #F7F8FB;
			border: 1px solid #EAEDF7;
			border-radius: 8px;
			padding: 30px 60px;
			box-shadow: inset rgba(100, 100, 100, 0.25) 0 1px 1px;			
			margin: 0 auto;

			@media(max-width: 991px) {
				text-align: center;
			}
		}
		h4 {
			font-size: 20px;
			color: #5F6E7C;
			font-weight: 400;
			float: left;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

			@media(max-width: 767px) {
				font-size: 17px;
				line-height: 23px;
			}
		}
		.button {
			float: right;

			@media(max-width: 991px) {
				float: none;
				margin-top: 20px;
			}
		}
	}
}