.wrap-instructors {
	--tf-instructors-gap: 30px;
	margin-left: calc(0px - (var(--tf-instructors-gap) / 2));
	margin-right: calc(0px - (var(--tf-instructors-gap) / 2));

	.slick-slide {
		padding: 0;
	}

	.item {
		padding-left: calc((var(--tf-instructors-gap) / 2));
		padding-right: calc((var(--tf-instructors-gap) / 2));
		margin-bottom: var(--tf-instructors-gap);
	}

}

.tf-instructor {
	.tf-instructor-image {
		position: relative;
		overflow: hidden;
		margin-bottom: 30px;
		image{
			width: 100%;
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--theme-accent-color);
			opacity: 0;
			transition: all 0.3s;
		}

		.image-hover {
			position: absolute;
			top: 30px;
			left: 30px;
			z-index: 10;
			transition: all 0.2s;

			.icon {
				width: 50px;
				height: 50px;
				@include d-flex();
				@include justify-content-center();
				@include align-items-center();
				font-size: 12px;
				color: var(--theme-secondary-color);
				transform: translateX(-50%);
				opacity: 0;
				border: 1px solid rgba(255, 255, 255, 0.2);
				border-radius: 50%;

				&:hover {
					background-color: var(--theme-secondary-color);
					color: #fff;
				}

				&:not(:last-child) {
					margin-bottom: 10px;
				}
			}

			.icon-facebook {
				transition: color .4s .001s ease-out, background .4s .001s ease-out, visibility .4s .1s ease-out, opacity .4s .15s ease-out, transform .4s .1s ease-out;
			}

			.icon-twitter {
				transition: color .4s .001s ease-out, background .4s .001s ease-out, visibility .4s .1s ease-out, opacity .4s .15s ease-out, transform .4s .1s ease-out;
			}

			.icon-instagram {
				transition: color .4s .001s ease-out, background .4s .001s ease-out, visibility .4s .15s ease-out, opacity .4s .15s ease-out, transform .4s .15s ease-out;
			}

			.icon-behance {
				transition: color .4s .001s ease-out, background .4s .001s ease-out, visibility .4s .25s ease-out, opacity .4s .25s ease-out, transform .4s .25s ease-out;
			}
		}
	}

	.tf-instructor-content {
		text-align: center;
	}

	.tab-content {
		padding: 0 7px;
	}

	.tf-instructor-name {
		font-size: 22px;
		line-height: 32px;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.tf-instructor-position {
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 0;
	}

	&:hover {
		.tf-instructor-image::after {
			opacity: 0.7;
		}

		.image-hover {
			.icon {
				transform: translateX(0);
				opacity: 1;
			}
		}
	}
}

.tf-instructors-wrap.show-border {
	.item {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 81%;
			background-color: #D9D9D9;

		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 1px;
			height: 81%;
			background-color: #D9D9D9;
			display: none;
		}

		&:last-child {
			&::after{
				display: block;
			}
		}
	}

	&.column-4 {
		.item:nth-child(5n-1) {
			&::after {
				display: block;
			}
		}

	}

	&.column-3 {
		.item:nth-child(4n-1) {
			&::after {
				display: block;
			}
		}
	}

	&.column-2 {
		.item:nth-child(3n-1) {
			&::after {
				display: block;
			}
		}
	}

	&.column-1 {
		.item:nth-child(2n-1) {
			&::after {
				display: block;
			}
		}
	}

	@media only screen and (max-width: 991px) {
		.item {
			&::before, &::after {
				display: none!important;
			}
		}
	}
}