/* --------------------------------------------------
	Template Picker
-------------------------------------------------- */
@import 'settings';

.template-picker-hero {
	position: relative;
	background: #ccc url(../../assets/images/templates-demo-img/hero-bg.jpg);
	background-size: cover;
	background-position: 0;

	.bg-overlay {
		width: 100%;
		height: 100%;
		background: rgba(17,17,17, .7);
	}

	.tp-wrapper {
		margin-top: 100px;
		margin-bottom: 75px;
		padding: 70px 100px;
		text-align: center;
		background: rgba(17,17,17, .8);

		h4 {
			color: $gray-light;
			line-height: 2em;
		}

		.tp-lead {
			margin-bottom: 40px;
			color: $light;
			font-weight: 700;
			font-size: 2.5em;
		}

		.btn {
			margin-left: 5px;
			margin-right: 5px;
		}
	}

	.btn-label {
		position: absolute;
		right: -25px;
		top: -10px;
	}
} // .template-picker-hero


@media (max-width: $screen-sm) {
	.template-picker-hero {

		.bg-overlay {
			padding-left: 35px;
			padding-right: 35px;
		}

		.tp-wrapper {
			padding-left: 35px;
			padding-right: 35px;
			
			h4 {
				line-height: 1.7em;
			}

			.tp-lead {
				font-size: 2em;
			}

			.btn {
				margin-bottom: 10px;
			}
		}
	}
} // @media (max-width: $screen-sm)



.template-picker {

	.mb-75 {
		margin-bottom: 75px;
	}

	.new-badge {
		display: inline-block;
		width: 60px;
		height: 50px;
		background: #DB211E;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		padding-top: 9px;
		position: absolute;
		right: -5px;
		top: -17px;
		font-family: "montserrat";
		font-size: .8em;
		letter-spacing: 1.5px;
		border: 4px solid #fff;
	}

	.template-item {

		a {
			display: block;
			text-decoration: none;

			&:focus,
			&:hover {
				text-decoration: none;
			}

			&:hover {

				.new-badge {
					transform: translateX(50px);
					opacity: 0;
					transition: all .3s
				}
			}

			.new-badge {
				transition: all 1s;
			}
		}

		img {
			transition: all .3s;
			box-shadow: 0px 1px 1px rgba(0,0,0,0.3);

			&:hover {
				transform: translateY(-6px);
				box-shadow: 0 22px 43px rgba(0,0,0,0.15);
			}
		}
	}
} // .template-picker