//  =================
//      Imports
//  =================

@import '../../base/color_variables';      // Color Variables
@import '../../base/fonticons';            // Fonticons Variables
@import '../../base/urls';                 // URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

/*
    Product Catalog 11
*/
.product-cat11 {
	padding: $p-0;
	.card {
		position: $pos-rel;
		height: 473px;
		border: none;
		&:hover {
			.card-overlay {
				opacity: 1;
			}
		}
	}
	.image {
		display: block;
		width: 100%;
		height: 473px;
	}
	.card-overlay {
		position: $pos-abs;
		top: 1px;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .5s ease;
		background-color: $additional-color-5 !important;
		display: block;
	}
	.card-top-section {
		p {
			color: $white;
			text-align: center;
			padding-left: $p-5;
		}
		span.badge {
			float: $align-right;
			margin-right: 22px;
			width: 46px;
			padding-top: 3px;
			padding-bottom: 3px;
			font-size: 12px;
			font-weight: 600;
		}
	}
	.card-middle-section {
		color: $white;
		position: $pos-abs;
		top: 50%;
		left: 0;
		right: 0;
		text-align: center;
		button {
			background-color: $color_405;
			border-radius: $br-30;
			padding: 6px $p-30;
			padding-top: $p-5;
			box-shadow: $shadow-5;
			will-change: opacity, transform;
			transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
		}
		p {
			width: 40px;
			height: 40px;
			padding: 11px;
			color: $white;
			background-color: $color_47;
			border: $solid $b-width-1 $color_404;
			cursor: pointer;
			border-radius: 50%;
			box-shadow: $shadow-5;
			will-change: opacity, transform;
			transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			i {
				vertical-align: $v-align-text-top;
			}
		}
	}
	.card-bottom-section {
		color: $white;
		font-size: $fs-20;
		position: $pos-abs;
		bottom: 18px;
		left: 0;
		right: 0;
		margin: 0;
		.card-title {
			font-size: 18px;
			margin-bottom: 0px;
		}
		.card-pricing {
			font-size: 17px;
		}
	}
}
