/* ======================================================
   <!-- Team Focus -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
$team-info-width: 300px;

.uix-team-focus__info {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 12;
	width: $team-info-width;
	padding-left: 2rem;
	cursor: pointer;
	opacity: 0;
	display: none;

	.uix-team-focus__info__text {

	}

	h4 {

		em {
			display: block;
			font-size: 0.75rem !important;
		}

		span {
			display: block;
		}

		&::after {
			content: '';
			display: block;
			height: 3px;
			width: 35px;
			background: var(--uix-highlight-color1);
			margin: .5rem 0;
		}
	}
}
.uix-team-focus__mask {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
	content: '';
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	display: none;
}

.uix-team-focus {
	position: relative;
	z-index: 10;


	> div {
		float: left;
		cursor: pointer;
		z-index: 4;
		text-align: center;


		img {
			width: 90%;
		}



		&.is-active {

		}

		&.focus {
			position: absolute;
			top: 0;
			left: 50%;
			height: 100px;
			transform: translateX(-50%);
			z-index: 5;
			margin-left: -$team-info-width;

			img {
				transform: scale(1.3);
				@include outer-shadow( 'highlight', var(--uix-highlight-color1) );
			}

		}



	}
}