.tm-view-demo {
	.item-wrap {
		border-radius: 10px;
		box-shadow: 0 7px 20px rgba(0, 0, 0, .06);
		&:hover {
			.overlay {
				visibility: visible;
				opacity: .9;
			}
			.overlay-content {
				visibility: visible;
				opacity: 1;
				@include transit3;
				transform: translateY(-28px);
			}
		}
	}
	.info {
		padding: 38px 15px;
		background: #fff;
		text-align: center;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.heading {
		font-size: 20px;
		line-height: 1.15;
		a {
			color: inherit;
		}
	}
	.thumbnail {
		position: relative;
		overflow: hidden;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #fff;
		img {
			width: 100%;
		}
	}
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		visibility: hidden;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity .3s;
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F2B636),color-stop(99%,#D16D20));
		background: -moz-linear-gradient(left,#F2B636 0,#D16D20 99%);
		background: -webkit-linear-gradient(left,#F2B636 0,#D16D20 99%);
		background: -o-linear-gradient(left,#F2B636 0,#D16D20 99%);
		background: -ms-linear-gradient(left,#F2B636 0,#D16D20 99%);
		background: linear-gradient(left,#F2B636 0,#D16D20 99%);
	}
	.overlay-content {
		position: absolute;
		top: 50%;
		left: 0;
		visibility: hidden;
		width: 100%;
		text-align: center;
		opacity: 0;
		transform: translateY(-68px);
	}
	.badge {
		position: absolute;
		top: -15px;
		left: -15px;
		width: 85px;
		height: 85px;
		background: transparent url(assets/images/new-badge.png) no-repeat;
		z-index: 999;
	}
}

@include media-breakpoint-up(xl) {
	.tm-view-demo {
		.thumbnail {
			border-radius: 5px;
		}
		.overlay-content {
			top: auto;
			bottom: 20px;
			transform: translateY(0);
		}
		.info {
			visibility: hidden;
			opacity: 0;
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			transform: translateY(-50%);
			color: #fff;
			background-color: transparent;
			margin-top: -30px;
			transition: margin .3s;
			a {
				color: #fff;
			}
		}
		.item-wrap {
			&:hover {
				.overlay {
					visibility: visible;
					opacity: .9;
				}
				.overlay-content {
					transform: translateY(0);
					bottom: 50px;
				}
				.info {
					margin-top: 0;
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}
}