.d-snackbar{
  position:fixed;
  top:150%;
  left:50%;
  background:#333;
  padding:15px;
  color:#fff;
  font-size:16px;
  box-shadow:0 0 25px rgba(33,33,33,0.4);
  border-radius:3px;
  box-sizing:border-box;
  transform: translate(-50%,-50%);
  opacity:0;
  z-index: 1;
}
.d-snackbar.active{
  top:90%;
  opacity:1;
  animation:0.3s snackbar-up ease 1;
  display:block;
}
.d-snackbar>.text{
  height:40px;
  line-height:40px;
  padding:0 10px;
  text-align:center;
  float:left;
}
.d-snackbar>.close{
  height:40px;
  width:40px;
  line-height:40px;
  border-radius:50%;
  text-align:center;
  position:relative;
  cursor:pointer;
  overflow:hidden;
  float:right;
  background:rgba(0,0,0,0.1);
  font-size:12px;
}
.d-snackbar .ripple{
  overflow:hidden;
  position:relative;
}
.d-snackbar .ripple::after{
  content:'';
  width:0;
  height:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  display:none;
}
.d-snackbar .close .text{
  padding:0;
  text-align:center;
  width:100%;
  height:100%;
}
.d-snackbar .ripple:hover::after{
  content:'';
  display:block;
  width:100%;
  height:100%;
  animation:0.7s snackbar-rip ease 1;
}
@keyframes snackbar-rip{
  0%{
    width:5px;
    height:5px;
  }
  75%{
    transform:scale(4);
  }
}
@keyframes snackbar-up{
  0%{
    display:none;
    top:100%;
    opacity:0;
  }
  75%{
    top:90%;
    opacity:1;
  }
  100%{
    display:block;
  }
}
@keyframes snackbar-sup{
  0%{
    display:none;
    top:100%;
    transform:translateY(0%);
    opacity:0;
  }
  75%{
    top:100%;
    transform:translateY(-100%);
    opacity:1;
  }
  100%{
    display:block;
  }
}
@keyframes snackbar-sdown{
  0%{
    top:100%;
    opacity:1;
    display:block;
    transform:translateY(-100%);
  }
  75%{
    top:150%;
    opacity:0;
    transform:translateY(0%);
  }
  100%{
    display:block;
  }
}
@media only screen and (max-width:560px){
  .d-snackbar,.d-snackbar.active{
    width:100%;
    top:100%;
    transform:translateY(-100%);
    left:0;
    border-radius:0;
    animation:0.3s snackbar-sdown ease 1;
  }
  .d-snackbar.active{
    animation:0.3s snackbar-sup ease 1;
  }
}