Moving providers into subset 'Services'

src/scss/components/_services.scss

@@ -0,0 +1,82 @@
+
+.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%);
+	}
+}