.services {

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

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

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

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

				&:active {
					-moz-transform: scale(0.98);
					-webkit-transform: scale(0.98);
					transform: scale(0.98);
				}

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

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

				&: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;
				}

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

					&--svg {
						opacity: 0.8;
					}
				}

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

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

		.field:last-child {
			padding-bottom: 0;
		}
	}

	@include responsive($bp_medium){
		.menu {
			.menu-item-wrapper {
				width: 50%;
				max-width: none;
				min-width: none;
				padding-bottom: 5px;

				.menu-item {
					padding-top: 10px;
					padding-bottom: 10px;

					&:after {
						display: none;
					}
				}
			}
		}

		.service {
			margin-top: 5px;
		}
	}
}