:root {
	--item-height: 150px;
	--border-width: 10px;
}

.bdt-vertex-slider {
	.swiper-vertex {
		position: relative;
		overflow: hidden;
		padding: 220px 0;
		&::before {
		position: absolute;
		content: '';
		border: 0;
		height: var(--border-width);
		background: #2b2d42;
		width: 99%;
		margin: auto;
		top: 50%;
		left: 0;
		right: 0;
		transform: translate(0, -50%);
		}
	}
	.bdt-item {
		height: var(--item-height);
		position: relative;
		text-align: center;
		overflow: inherit;
		&.swiper-slide-active {
			.bdt-img {
				transform: scale(1.7);
				margin-top: 0;
			}
			.bdt-content {
				opacity: 1;
			}
		}
	}
	.bdt-img-wrap {
		width: 100%;
		height: 100%;
		position: relative;
		.bdt-img {
			width: var(--item-height);
			height: var(--item-height);
			object-fit: cover;
			border-radius: 25px;
			transform: scale(1);
			transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
			border-width: var(--border-width);
			border-color: #2b2d42;
			border-style: solid;
			background: #2b2d42;
		}
	}
	.bdt-content {
		padding-top: 75px;
		overflow: hidden;
		opacity: 0;
		div {
			line-height: 1;
		}
	}
	.bdt-title {
		font-size: 18px;
		font-weight: 600;
		width: 100%;
		margin: 0;
		text-transform: capitalize;
		a {
			color: #2B2D42;
			transition: all .3s ease;
			&:hover {
				color: #D90429;
			}
		}

	}
	.bdt-category {
		margin-bottom: 10px;
		display: inline-flex;
		a {
			color: #7e8796;
			font-size: 12px;
			text-transform: uppercase;
			transition: all .3s ease;
			&:hover {
				color: #D90429;
			}		
		}
		a + a {
			margin-left: 7px;
		}
	}

	.bdt-navigation-wrap {
		.bdt-navigation-next,
		.bdt-navigation-prev {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 12px;
			color: #fbfbfb;
			transition: all .3s ease;
			z-index: 1;
			background: #2b2d42;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 6px;
			overflow: hidden;
			cursor: pointer;
			&::before {
				content: '';
				position: absolute;
				background-color: #D90429;
				transition: all 300ms ease;
				right: -50%;
				left: auto;
				top: 0;
				width: 0;
				height: 100%;
				transform: skewX(-45deg);
			}
			&:hover {
				&::before {
					width: 260%;
				}
			}
			i {
				transition: transform .3s ease;
				transform: scale(1) translateX(0px);
				display: inline-flex;
			}
		}

		.bdt-navigation-prev {
			left: 0;
			&:hover {
				background: #D90429;
				i {
					transform: scale(1.1) translateX(-3px);
				}
			}
	    }
		.bdt-navigation-next {
			right: 0;
			&:hover {
				background: #D90429;
				i {
					transform: scale(1.1) translateX(3px);
				}
			}
	    }
	}
}

@media (min-width: 1024px) { 
	.bdt-vertex-slider {
		.bdt-title {
			font-size: 25px;
		}
	}
}