// assets--section
// -------------------
.assets--section {
	color: #fff;
	overflow: hidden;
	#gradient .horizontal-three-colors(#959595, #4e4e4e,50%, #959595);

		header {
			position: relative;

				a {
					display: inline-block;
					padding: 8px 10px;
					font-size: 18px;
					color: #fff;
					font-weight: 900;
					font-style: italic;
					.text-center;
					.text-uppercase;
					background-color: @blue-color;

						.no-touch &:hover {
							background-color: darken(@blue-color, 5%);
						}
				}

				h3 {
					font-weight: 300;
					line-height: 30 / 24;
				}
		}

		.slider {


				figure {
					position: relative;
					height: 0;
					padding: 0 0 140px;
					margin-bottom: 15px;
					.text-center;
					overflow: hidden;
					background-color: #B4B4B4;
					.box-shadow(0 0 20px fade(#000, 50%));

						&:hover {

								span {
									display: block;
								}
						}

						span {
							display: none;
						}

						.touch & span {
							display: block;
						}

						.hover {
							.element-center;
							z-index: 2;
							border: 5px solid @blue-color;
						}


						.label {
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							padding: 5px;
							color: #fff;
							font-size: 14;
							.text-center;
							.text-uppercase;
							font-weight: 900;
							background-color: @blue-color;
						}

						&:after {
							content: '';
							display: inline-block;
							height: 100%;
							vertical-align: middle;
						}

						img {
							.image-center;
							min-height: 100%;
							min-width: 100%;
							max-width: 150%;
						}
				}

				h5 {
					line-height: 1.4;
				}
		}
}


@media screen and (min-width: @screen-md-min) {

		.assets--section {
			padding: 40px 0;

				header {
					padding-right: 270px;

						a {
							position: absolute;
							top: 0;
							right: 40px;
							width: 200px;
						}
				}


				.slider {
					margin: 30px 0 0;
					padding: 0 40px;
				}
		}
}


@media screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

		.assets--section {
			padding: 30px 0;

				header {
					padding-right: 220px;

						a {
							position: absolute;
							top: 10px;
							right: 0;
							width: 200px;
						}
				}


				.slider {
					margin: 30px 0 0;
					padding: 0 40px;
				}
		}
}

@media screen and (max-width: @screen-xs-max) {

		.assets--section {
			padding: 20px 0;

				header {
					.text-center;

						a {
							padding: 12px;
							margin-top: 20px;
						}
				}


				.slider {
					margin: 30px 0 0;
				}
		}
}