.notifier-container {
	position:fixed;
	top:30px;
	right:30px;
	max-width:300px;
	z-index:60000;
}
#notifier-bottom {
	top:auto;
	bottom:30px;
}
.notifier-container > div {
	border:1px solid #555;
	background:#F8F2C7;
	padding:5px 10px;
	margin-top:4px;
	font-size:12px;
	color:#555;
	border-radius:3px;	
	box-shadow:0px 0px 3px rgba(0,0,0,0.2);
}
@-webkit-keyframes slidex {
    0% {
		opacity:0;
		transform:translateX(-80px);
		-webkit-transform: translateX(-80px);
	}
    100% {
		opacity:1; 
		transform:translateX(0px);
		-webkit-transform: translateX(0px);
	}
}
@keyframes slidex {
	0% { transform:translateX(-80px) }
    100% { transform:translateX(0px) }
}
@-webkit-keyframes slideout {
    0% {
		opacity:1;
		transform:translateX(0px);
		-webkit-transform: translateX(0px);
	}
    100% { 
		transform:translateX(300%);
		-webkit-transform: translateX(300%);
		transform:translateX(100vw);
		-webkit-transform: translateX(100vw);
		opacity:0.5;
	}
}
@keyframes slideout {
	0% { transform:translateX(0px) }
    100% {
		transform:translateX(300%);
		transform:translateX(100vw);
	}
}
.visible .notifier-container > div {
	-webkit-animation: slidex 0.25s forwards;
	animation: slidex 0.25s forwards;
}
.visible .notifier-container > div.slideout {
	-webkit-animation: slideout 1s forwards;
	animation: slideout 1s forwards;
}