.successNotifications {
  margin: 70px auto;
  padding: 20px;
  padding-left: 30px;
  background: #fff;
  border-radius: 5px;
  border-style: solid;
  border-color: #8eb021;
  border-width: 1px;
  width: 300px;
  position: fixed;
  z-index:99;
  top: 0px;
  right: 20px;
  text-align: center;  
  -moz-animation: cssAnimation 0s ease-in 5s forwards;
/*     Firefox */
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
/*     Safari and Chrome */
  -o-animation: cssAnimation 0s ease-in 5s forwards;
/*     Opera */
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  box-shadow: 10px 10px 5px #444444;
}
.successNotifications:before{
	position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:10%;
    height:100%;
    content:"";
    background-color:#8eb021;
    color: white;
    padding-right: 3px;
    padding-top: 20px;
}
.successNotifications span.dismiss {
    border: 0px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-top: -20px;
    margin-right: -17px;
}
.successNotifications a {
    color:black;
    text-decoration:none;
    font-weight:bold
}


.failNotifications {
	margin: 70px auto;
	padding: 20px;
	padding-left: 30px;
	background: #fff;
	border-radius: 5px;
	border-style: solid;
	border-color: #d04437;
	border-width: 1px;
	width: 300px;
	position: fixed;
	z-index: 9999;
	top: 0px;
	right: 20px;
	transition: all 5s ease-in-out;
	text-align: left;
	box-shadow: 10px 10px 5px #888888;
	padding-left: 40px;
}
.failNotifications:before{
	position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:10%;
    height:100%;
    content:"";
    background-color:#d04437;
    color: white;
    padding-right: 9px;
    padding-top: 30px;
}
.failNotifications span.dismiss {
    border: 0px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-top: -20px;
    margin-right: -17px;
}
.failNotifications a {
    color:black;
    text-decoration:none;
    font-weight:bold
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
        opacity: 0;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
        opacity: 0;
    }