#snackbar {
  visibility: hidden;
  width: 320px;height:64px;
  background-color: #43a159;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: fixed;
  z-index: 1090;
  right: 10px;
  top: 60px;
}

#snackbar .text{
  padding: 16px;
}
#snackbar.error {
	background-color: #f03f3f;
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 102.5s;
  animation: fadein 0.5s, fadeout 0.5s 102.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

#snackbar .progress{height:8px;border-radius:0px;opacity:.5;}

#snackbar.show .progress{
  -webkit-animation: w02100 2.5s;
  animation: w02100 2.5s;
}
@keyframes w02100 {
  from {width: 1%; opacity:.5;}
  to {width: 100%; opacity:.6;}
}
@-webkit-keyframes w02100 {
  from {width: 1%; opacity:.5;}
  to {width: 100%; opacity:.6;}
}