.services {
	.services-title:empty {
		display: none;
	}

	.thumbnail {
		display: block;
		max-height: none !important;
		text-align: center;

		img {
			margin: auto;
			border-radius: 100000px;
			padding: 8px;
			border: 1px solid @default-line-color;
			transition: border-color .3s, background .3s;
		}

		a {
			display: block;
			position: relative;

			&.has-border {
				@triangle-size: 10px;
				padding-bottom: @triangle-size;

				&:before,
				&:after {
					content: "";
					display: block;
					width: 0;
					height: 0;
					border: @triangle-size solid transparent;
					border-top-color: @default-line-color;
					border-bottom: 0;
					position: absolute;
					bottom: 1px;
					left: 50%;
					margin-left: -@triangle-size;
					transition: border-color .3s;
				}

				&:after {
					border-width: @triangle-size - 2px;
					border-top-color: @default-bg-color;
					border-bottom: 0;
					bottom: 2px;
					margin-left: 2px - @triangle-size;
				}
			}
		}

		.icon {
			padding: 17px 0;
		}
	}

	.services-inside {
		margin: 0;
		padding: 0;
		display: block;

		.services-title {
			margin: 12px 0 0 0;
			line-height: 1;

			a {


				&:hover {
					text-decoration: none !important;
				}
			}
		}
	}

	.services-content {
		padding: 5px 0 10px 0;

		ul {
			margin-top: 10px;
			margin-bottom: 10px;
			padding: 0;

			.ie8 & {
				list-style-position: inside;
			}
		}

		/* clear the bottom margin */
		&:last-child,
		&:last-child {
			padding-bottom: 0 !important;
			margin-bottom: 0;
		}

		&:empty {
			display: none;
		}
	}

	.thumbnail .icon,
	.services-title a,
	.services-button-wrap a {
		.transition(color .3s);
	}

	&:hover {
		.thumbnail .icon,
		.services-button-wrap a {
			color: @css_link_hover_color !important;
		}

		.thumbnail {
			a {
				img {
					background: @accent-color-1;
					border-color: @accent-color-1;
				}

				&:before,
				&:after {
					border-top-color: @accent-color-1;
				}
			}
		}
	}
}

/* Services with icon or small image ---------------------------------------- */
.services.smallimage {
	@iconsize: 60px;
	@transition-time: .2s;

	.services-inside {
		box-shadow: 0 0 0 transparent;
		margin: 0;
		padding: 0;
	}

	&.transitionable {
		&,
		.services-inside {
			.transition(all @transition-time ease);
		}

		&.state-hover {
			.services-inside {
				margin: -13px !important;
				background: @main-background-color;
				box-shadow: 0 0 4px rgba(0,0,0,.2);
				padding: 13px;
			}

			a {
				text-decoration: none;
				color: @css_link_hover_color;
			}

			.services-content{
				opacity: 1;
			}
		}
	}

	.shrinking {
		position: relative;
		background: @accent-color-1;
		text-align: center;
		height: 0;
		overflow: hidden;

		.icon {
			padding: 0;
			font-size: @iconsize;
			color: @accent-color-8;
			-webkit-font-smoothing: subpixel-antialiased;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateZ(0);
			-webkit-transform: translateZ(0);
		}
	}

	.services-title {
		margin: 12px 6px 0 6px;
	}

	.services-content {
		padding: 8px 6px 0 6px;
		display: none;
	}
}