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

	&.has-icon {
		&:hover .thumbnail {
			.icon.shortcode,
			img {
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				border-color: @accent-color-8;
			}
		}
	}

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

		img {
			margin: 0px;
			border-radius: 0px;
			padding: 0px;
			border: none;
			transition: border-color .3s, background .3s;
		}

		a {
			display: block;
			position: relative;

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

				&:before,
				&:after {
					content: "";
					display: none;
					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: 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 {
			background: @accent-color-1;
			color: @accent-color-8;
			padding: 20px;
			border-radius: 100%;
			text-align: center;
			min-height: inherit;
			min-width: inherit;
			position: relative;
			line-height: 100%;
			-webkit-transform: scale(0.9);
			-ms-transform: scale(0.9);
			transform: scale(0.9);
			margin-bottom: 10px;
			border: solid 5px @accent-color-1;

			&:after {
				left: 50%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				border-top-color: @accent-color-1;
				border-width: 0.4em;
				margin-left: -0.4em;
				bottom: -0.6em;
				z-index: -1;
			}
		}
	}

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

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

		.sep-2 {
			margin: 10px 0 20px;
			padding: 0;
			display: none;
		}
	}

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

		ul {
			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 .2s);
	}

	&:hover {
		.thumbnail .icon,
		.services-title a,
		.sep-2,
		.services-button-wrap a {
			border-color: @css_link_color;
			color: @css_link_color;
		}

		.thumbnail {
			a {
				font-size: 120% !important;

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

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

	html.touch & {
		.services-content {
			display: block;
		}
	}

	html.touch &,
	&.transitionable.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;
		}
	}

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

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

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