/* ======================================================
   <!-- Advanced Slider (Special Effects) -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. Initialize the slider style
 * 2. Pagination dots
 * 3. Next/Prev buttons
*/

/*
 ---------------------------
 1. Initialize the slider style
 ---------------------------
 */

.uix-advanced-slider-sp__wrapper {
	position: relative;
}

/* Prevent content overflow */
.uix-advanced-slider-sp__wrapper,
.uix-advanced-slider-sp__inner,
.uix-advanced-slider-sp__canvas-container {
	//max-height: 100vh;
	overflow: hidden;
}

.uix-advanced-slider-sp__canvas-container {
	position: relative;
	z-index: 2;
	display: block;
	height: 100%; /* Required, It will make the canvas fill up */
}
.uix-advanced-slider-sp {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	background-color: transparent;

	canvas {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}


	.uix-advanced-slider-sp__inner {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		height: 100%;/* Required */

		.uix-advanced-slider-sp__item {
			width: 100%;
			opacity: 0;


			.uix-advanced-slider-sp__txt {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%) !important;
				z-index: 15;

				/* Allow button clicks */
				pointer-events: all !important;

				h3 {
					margin-bottom: 0;
				}
			}


			@include securityWidthForElement( '.uix-advanced-slider-sp__txt' ) ;



			img {
				width: 100%;
				visibility: hidden;
			}

			&.leave {
				opacity: 0;
			}
			&.is-active {
				opacity: 1;
			}


		}

	}



}

/* If the browser does not support webGL then use the default video load event */
.webgl .uix-advanced-slider-sp {

	video {
		display: none;
	}

}

.no-webgl .uix-advanced-slider-sp {
	canvas {
		display: none;
	}

	.uix-advanced-slider-sp__inner {

		position: relative;

		.uix-advanced-slider-sp__item {

			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;

			img {
				visibility: visible;
			}
		}
	}
}


@media all and (max-width: 768px) {

	.uix-advanced-slider-sp {

		.uix-advanced-slider-sp__inner {

			.uix-advanced-slider-sp__item {

				.uix-advanced-slider-sp__txt {

					h3 {
						font-size: 1rem;

					}

					p {
						font-size: 0.875rem;
					}

					h3,
					p {
						margin-bottom: 0;
						padding-bottom: 0;
						line-height: 1.2;
					}

					[class*='uix-core-grid__col-'] {
						width: 100%;
					}

					.uix-btn {
						margin-top: .3rem;
						padding: .3rem 1rem;
						font-size: 0.75rem;
					}

				}

			}

		}


	}
}


/*
 ---------------------------
 2. Pagination dots
 ---------------------------
 */
.uix-advanced-slider-sp__pagination {

	position: relative;
	transform: translateY(-40px);
	z-index: 2;

	ul {
		list-style: none;
		left: 0;
		bottom: 0;
		font-size: 0;/*Fighting the Space Between Inline Block Elements*/
		display: block;
		width: 100%;
		text-align: center; /*require*/
		position: relative;
		transform: translateY(.5rem);

		li {
			font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
			display: inline-block; /*require*/
			margin: 0 .2rem;

			a {
				width: 12px;
				height: 12px;
				display: block;
				box-shadow: 0px 3px 22px 0px rgba(0,0,0,0.45);
				background: rgba(255, 255, 255, .6);
				cursor: pointer;
				text-indent: -9999px;
				border-radius: 20px;

				&:hover,
				&.is-active {
					background: rgba(255, 255, 255, 1);
					width: 25px;
				}
			}

		}


	}



}

//******** Style 2 **********
//
//.uix-advanced-slider-sp__pagination {
//	margin: 0;
//	padding: 0;
//	list-style: none;
//	position: absolute;
//	right: 40px;
//	top: 50%;
//	width: 20px;
//	z-index: 4;
//
//	li {
//		margin: 0;
//		padding: 0;
//		list-style: none;
//		margin-right: 10px;
//		margin-bottom: 15px;
//
//		a {
//			width: 8px;
//			height: 8px;
//			display: block;
//			background: rgba(255, 255, 255, 0.3);
//			cursor: pointer;
//			text-indent: -9999px;
//			border-radius: 20px;
//			box-shadow: 0px 6px 23px -2px rgba(0, 0, 0, 0.36);
//			position: relative;
//
//
//
//			&:hover,
//			&.is-active {
//				background: rgba(255, 255, 255, 1);
//
//
//				&::after {
//					content: '';
//					display: block;
//					width: 18px;
//					height: 18px;
//					border: 1px solid #fff;
//					border-radius: 100%;
//					position: absolute;
//					top: -5px;
//					left: -5px;
//				}
//			}
//		}
//	}
//}




/*
 ---------------------------
 3. Next/Prev buttons
 ---------------------------
 */
.uix-advanced-slider-sp__arrows {
	position: relative;
	transform: translateY(-65px);
	z-index: 3;


	a {
		box-shadow: 0px 10px 54px 0px rgba(19, 32, 62, 0.21);
		border-radius: 100%;
		width: 50px;
		height: 50px;
		position: absolute;
		transition: .3s ease-in-out;
		line-height: 50px;
		text-align: center;
		background: #fff;

	}

	.uix-advanced-slider-sp__arrows--prev {
		left: 15px;

		&.is-disabled {
			visibility: hidden;

		}

	}
	.uix-advanced-slider-sp__arrows--next {
		right: 15px;

		&.is-disabled {
			visibility: hidden;
		}



	}

}