.services {

	.menu {
		@include clearfix();
		margin: 0 -10px;
		display: flex;
		flex-wrap: wrap;	

		.menu-item-wrapper {
			width: 25%;
			max-width: 200px;
			padding: 10px;
			display: block;
			box-sizing: border-box;

			.menu-item {
				@include animate();
				position: relative;
				padding: 30px 10px;
				border-radius: 3px;
				background: $darkest_grey;
				display: block;
				text-align: center;
				height: 100%;
				box-sizing: border-box;
				border: 0;

				&:hover {
					background: lighten($dark_grey, 4%);
				}

				&.active {
					background: lighten($dark_grey, 4%);
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;

					&:after {
						height: 10px;
						bottom: -10px;
					}
				}

				&:after {
					content: '';
					display: block;
					width: 100%;
					height: 0;
					position: absolute;
					bottom: 0;
					left: 0;
					background: lighten($dark_grey, 4%);
				}

				.thumbnail {
					margin-bottom: 15px;
					display: inline-block;
				}

				.fa {
					font-size: 40px;
					height: 40px;
					margin-top: 10px;
					margin-bottom: 15px;
				}

				.title {
					margin: 0;
					padding: 0;
					font-weight: bold;
					font-size: 16px;
				}
			}
		}
	}

	.service {
		padding: 20px 20px 10px 20px;
		border-radius: 0 0 3px 3px;
		background: lighten($dark_grey, 4%);
	}
}