.highlight_slider{
	position: relative;
	.highlight-slider{
	@extend .tns-slider;
		.dots{
			position: relative;
			user-select: none;
			.plus {
				position: absolute;
				z-index: 2000;
				border-radius: 50%;
				color: #FFF;
				cursor: pointer;
				font-family: "Font Awesome 5 Pro";
				line-height: 2rem;
				text-align: center;
				margin-left: -1rem;
				margin-top: -1rem;
				width: 2rem;
				height: 2rem;
				text-align: center;
				&:before {
					content: "\f03a";
					font-family: "Highbiza";
					font-size: 1.1rem;
					display: block;
					text-align: center;
				}
			}
			img{
				width: 100%;
				height: auto;
			}
		}
	}
	.product-information {
		user-select: none;
		width: 100%;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 2001;
		position: absolute;
		max-width: 15rem;
		transform: translate(-50%, -50%);
		transition: .2s ease;
		animation: invis .2s linear;
        @include media-breakpoint-down(lg){
        	// Ignore positions added by javascript
        	top: 50% !important;
        	left: 50% !important;
        	max-width: calc(100vw - 4rem);
        	.overlay{
        		content: "";
        		display: block;
        		position: absolute;
        		height: 100vh;
        		width: 100vw;
        		top: 50%;
        		left: 50%;
        		transform: translate(-50%, -50%);
        		background: red;
        		z-index: -1;
        	}
		}
		&:not(.active) {
			transform: translate(-50%, -50%) scale(0);
			user-select: none;
			pointer-events: none;
			opacity: 0;
		}
		.inner-box { 
			background-color: #FFF;
			user-select: none;
			.row{
				margin: 0;
			}
			.product-header{
				padding: .25rem .5rem;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.product-icon{
				width: 2rem;
				height: 2rem;
				font-size: 1.1rem;
				color: white;
				position: relative;
				i{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: white;
				}
			}
			.inline-box{
				background: $white;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
			}
			.close {
				top: -.75rem;
				right: -.75rem;
				position: absolute;
				z-index: 1;
				font-size: 1.3rem;
				width: 2rem;
				height: 2rem;
				text-align: center;
				box-shadow: unset;
				outline: unset;
				opacity: 1;
				color: #fff;
				border-radius: 100%;
				font-weight: 300;
				border: 0;
				line-height: unset;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				i{
					transform: rotate(45deg);
				}
			}
			a {
				display: block;
				color: #333;
				text-decoration: none;
			}
		}
	}
    @include media-breakpoint-down(lg){
		.highlight_slider-overlay{
    		display: block;
    		position: fixed;
    		height: 100vh;
    		width: 100vw;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		background: rgba(0,0,0,.65);
    		z-index: 5;
    		transition: .4s ease;
    		&:not(.active){
    			opacity: 0;
    			pointer-events: none;
    			user-select: none;
    		}
    	}
	}
}

@keyframes invis{
	from{ opacity: 0; }
	to{ opacity: 0; }
}