//	=================
//    	Imports
//	=================

@import '../../../base/color_variables';   	// Color Variables
@import '../../../base/fonticons';   			// Fonticons Variables
@import '../../../base/urls';   				// URLS Variables
@import '../../../base/utilities_variables';  // Utilities Variables

@-webkit-keyframes "animScaleUp" {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1);
	}
}
@keyframes "animScaleUp" {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1);
		transform: translate3d(0,-50%,0) scale3d(0,0,1);
	}
	100% {
		opacity: 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1);
		transform: translate3d(0,-50%,0) scale3d(1,1,1);
	}
}
@-webkit-keyframes "animSlideTop" {
	0% {
		-webkit-transform: translate3d(0,-100%,0);
	}
	100% {
		-webkit-transform: translate3d(0,0,0);
	}
}
@keyframes "animSlideTop" {
	0% {
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0);
	}
	100% {
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}
/* 
	Expanding Loader
*/
@-webkit-keyframes "animLoad" {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0,0.3,1);
	}
	33% {
		opacity: 1;
		-webkit-transform: scale3d(0.5,0.3,1);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(0.6,0.3,1);
	}
	80%,85% {
		opacity: 1;
		-webkit-transform: scale3d(1,0.3,1);
		-webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
	}
}
@keyframes "animLoad" {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0,0.3,1);
		transform: scale3d(0,0.3,1);
	}
	33% {
		opacity: 1;
		-webkit-transform: scale3d(0.5,0.3,1);
		transform: scale3d(0.5,0.3,1);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale3d(0.6,0.3,1);
		transform: scale3d(0.6,0.3,1);
	}
	80%,85% {
		opacity: 1;
		-webkit-transform: scale3d(1,0.3,1);
		transform: scale3d(1,0.3,1);
		-webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1);
		animation-timing-function: cubic-bezier(0.7,0,0.3,1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1);
	}
}
@-webkit-keyframes "animFadeMove" {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
	}
}
@keyframes "animFadeMove" {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,10px,0);
		transform: translate3d(0,10px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}
@-webkit-keyframes "animFade" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes "animFade" {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* To bar notifications */
.ns-box.ns-bar {
	top: 0;
	left: 0;
	width: 100%;
}
.ns-bar {
	.ns-close {
		background: $color_none;
		top: 50%;
		right: 20px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		&::before {
			background: $white;
		}
		&::after {
			background: $white;
		}
	}
}
[class^="ns-effect-"].ns-bar.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}
[class*=" ns-effect-"].ns-bar.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

/* Individual Effects */
/* Slide on top */
.ns-effect-slidetop {
	.icon {
		position: $pos-abs;
		display: block;
		font-size: 109%;
		top: 50%;
		left: 1em;
		-webkit-transform: translate3d(0,-50%,0);
		transform: translate3d(0,-50%,0);
	}
	p {
		padding: $p-0 3.2em;
		font-size: 1.2em;
		display: inline-block;
	}
	.ns-close {
		&::before {
			width: 2px;
			background: $color_437;
		}
		&::after {
			width: 2px;
			background: $color_437;
		}
		&:hover {
			&::before {
				background: $white;
			}
			&::after {
				background: $white;
			}
		}
	}
}
.ns-effect-slidetop.ns-show {
	.icon {
		-webkit-animation-name: animScaleUp;
		animation-name: animScaleUp;
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	p {
		-webkit-animation-name: animScaleUp;
		animation-name: animScaleUp;
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: animFade;
		animation-name: animFade;
	}
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	z-index: 1350;
}
.ns-effect-slidetop.ns-hide {
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	z-index: 1350;
}
.ns-effect-exploader {
	background: $additional-color-10;
	color: $white;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-shadow: $shadow-7;
	.icon {
		position: $pos-abs;
		left: 0.25em;
		top: 50%;
		-webkit-transform: translate3d(0,-50%,0);
		transform: translate3d(0,-50%,0);
	}
	.ns-box-inner {
		position: $pos-rel;
	}
	p {
		padding: 0.25em 2em 0.25em 3em;
	}
	.ns-close {
		&:hover {
			&::before {
				background: $color_436;
			}
			&::after {
				background: $color_436;
			}
		}
	}
}
.ns-effect-exploader.ns-show {
	-webkit-animation-name: animLoad;
	animation-name: animLoad;
	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
	z-index: 1350;
	.ns-box-inner {
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-delay: 2.4s;
		animation-delay: 2.4s;
		-webkit-animation-name: animFadeMove;
		animation-name: animFadeMove;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	.ns-close {
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-delay: 2.4s;
		animation-delay: 2.4s;
		-webkit-animation-name: animFade;
		animation-name: animFade;
	}
}
.ns-effect-exploader.ns-hide {
	-webkit-animation-name: animFade;
	animation-name: animFade;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}