@import "base.less";
@import "loading.less";
.special-list{
	// padding-top: 10px;
	a{
		width: 100%;
		margin-bottom: 10px;
		display: block;
		overflow: hidden;
		position: relative;

		img{
			width: 100%;
			position: absolute;
			top: -10px;
		}

		.background{
			background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			height: 50%;
			width: 100%;
			position: absolute;
			bottom: -1px;
			left: 0;
		}

		div.title-con{
			// box-shadow: 0 -25px 25px #191919 inset;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 50px;
			width: 100%;
			color: #fff;
			padding: 7px 10px;
			font-size: 1.0em;
			box-sizing: border-box;
			line-height: 3.5em;

			.caption{
				font-size: 0.85em;
				display: block;
			}
			
		}
	} 
	
	.placeholder{
		background-color: #000;
	    background-image: url("img/placeholder.png");
	    background-position: center center;
	    background-repeat: no-repeat;
	    background-size: contain;
	}
} 
@media screen and (min-width: 414px){
	.special-list{
		padding-top: 15px;
		a{
			margin-bottom: 15px;
			div.title-con{
				height: 60px;
				font-size: 1.3em;
				// box-shadow: 0 -30px 30px #191919 inset;
				line-height: 3.4em;
			}

		}
	}
	
}

@media screen and (min-width: 768px){
	.special-list{
		padding-top: 20px;
		a{
			margin-bottom: 20px;
			div.title-con{
				height: 100px;
				// box-shadow: 0 -50px 50px #191919 inset;
				font-size: 1.5em;
				padding: 15px 20px;
				line-height: 5.5em;
			}

		}
	}
	
}