/* Common, default styles for the notification box */

.ns-box {
	position: fixed;
	background: rgba(42, 45, 50, 0.85);
	padding: 15px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: rgba(250, 251, 255, 0.95);
	font-size: 90%;
	font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
}

.ns-box.ns-show {
	pointer-events: auto;
}

.ns-box a {
	color: inherit;
	opacity: 0.7;
	font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
	opacity: 1;
}

.ns-box p {
	margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
	pointer-events: auto;
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
	outline: none;
}

.ns-close::before,
.ns-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
	background: #fff;
}

.ns-close::before {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}

.ns-close::after {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}


/* Growl-style notifications */

.ns-growl {
	top: 60px;
	right: 30px;
	max-width: 400px;
	border-radius: 5px;
}

.ns-growl p {
	margin: 0;
	line-height: 1.3;
}

[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}


/* Individual effects */


/* Slide */

.ns-effect-slide {
	background: rgba(0, 0, 0, 0.5);
	top: auto;
	top: 95px;
	right: 120px;
	font-size: 16px;
}

.ns-effect-slide .ns-close::before,
.ns-effect-slide .ns-close::after {
	background: #bbb;
}

.ns-effect-slide .ns-close:hover::before,
.ns-effect-slide .ns-close:hover::after {
	background: #fff;
}

.ns-effect-slide.ns-show {
	-webkit-animation-name: animSlideElastic;
	animation-name: animSlideElastic;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}


/* Generated with Bounce.js. Edit at http://goo.gl/akZHSq */

@-webkit-keyframes animSlideElastic {
	0% {
		-webkit-transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
		transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes animSlideElastic {
	0% {
		-webkit-transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
		transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.ns-effect-slide.ns-hide {
	-webkit-animation-name: animSlide;
	animation-name: animSlide;
	-webkit-animation-duration: 0.25s;
	animation-duration: 0.25s;
}

@-webkit-keyframes animSlide {
	0% {
		-webkit-transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
		transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes animSlide {
	0% {
		-webkit-transform: translate3d(30px, 0, 0) translate3d(-100%, 0, 0);
		transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}