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

.ns-box {
	position: fixed;
	background: rgba(42,45,50,0.85);
	padding: 22px;
	line-height: 1.4;
	pointer-events: none;
	color: rgba(250,251,255,0.95);
	font-size: 90%;
	font-family: 'Lato', sans-serif;
	box-sizing: border-box;
	box-shadow: inset 5.3em 0 rgba(0,0,0,0.85);
	-webkit-box-shadow: inset 5.3em 0 rgba(0,0,0,0.85);
}

.ns-box.ns-error {
    background-color: #e74c3c;
	box-shadow: inset 5.3em 0 #c0392b;
}

.ns-box.ns-success {
	background-color: #1abc9c;
	box-shadow: inset 5.3em 0 #16a085;
}

.spl-notice-action-lostpassword {
    background-color: #1abc9c;
    box-shadow: inset 5.3em 0 #16a085;
}

.ns-box,
.ns-box.ns-show {
	z-index: 100001;
}

.ns-box.ns-hide {
	z-index: 100000;
	-webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0);
}

.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;
}


/* To bar notifications */
.ns-box.ns-bar {
	top: 0;
	left: 0;
	width: 100%;
}



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

/* Individual Effects */

/* Slide on top */
.ns-effect-slidetop {
	
}

.ns-effect-slidetop .icon {
	position: absolute;
	display: block;
	font-size: 33px;
	top: 50%;
	left: 0.5em;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

.ns-effect-slidetop p {
	padding: 0 3.2em;
	font-size: 1.2em;
	display: inline-block;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show .ns-notice {
	-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;
}

.ns-effect-slidetop.ns-show .ns-notice {
	-webkit-animation-name: animFade;
	animation-name: animFade;
}

@-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); }
}


.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

@-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); }
}

@-webkit-keyframes animFade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes animFade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
/* icon */
.ns-template {
	display:none;
}

.ns-notice {
	margin-left: 70px;
	font-size:14px;
}

.ns-box-inner .icon:before, .ns-effect-slidetop .ns-close:before {
	font-family: 'slide-login';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ns-effect-slidetop.ns-message .ns-box-inner .icon:before {
	content: "\e0bd";
	color: #fff;
}

.ns-effect-slidetop.ns-error .ns-box-inner .icon:before {
	content: "\e333";
	color: #fff;
}

.ns-effect-slidetop.ns-success .ns-box-inner .icon:before {
	content: "\e2a1";
	color: #fff;
}

.ns-effect-slidetop.spl-notice-action-lostpassword .ns-box-inner .icon:before {
	content: "\e011";
	color: #fff;
}




.ns-effect-slidetop .ns-close {
	position: absolute;
	display: block;
	font-size: 109%;
	top: 50%;
	right:1em;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
	cursor:pointer;
}

.ns-effect-slidetop .ns-close:before {
	content: "\e262";
	color: #fff;
}

@media screen and (max-width:480px) {
	.ns-notice {
		margin-right: 30px;
	}
}