.error_wrap {
  position: fixed;
  top: -100px;
  left: 50%;
  z-index: 9999999999999;
  transform: translateX(-50%);
  min-width: 400px;
  max-width: 90%;
  padding: 20px 20px;
  text-align: center;
  background: white;
  color: black;
  border-radius: 10px;
  transition: all .5s;
  font-size: 20px;
  animation: showError 5s forwards;
  opacity: .8;
  -webkit-animation: showError 5s forwards;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

@keyframes showError {
  0% {
    top: -100px;
    opacity: 0;
  }

  10% {
    top: 20px;
    opacity: .8;
  }

  50% {
    top: 20px;
    opacity: .8;
  }

  70% {
    top: 20px;
    opacity: .8;
  }

  90% {
    top: 20px;
    opacity: .8;
  }

  100% {
    top: -100px;
    opacity: 0;
  }
}