@keyframes alertSlideInFromBottomLeft {
  0% {
    transform: translate(-100%, 100%);
  }
  100% {
    transform: translateX(0);
  }
}

.alert {position: fixed; z-index: 999; display: none; left: 0; bottom: 0; padding: 1.5rem 3rem; width: 400px; max-width: 80%; background: #fff;
    -webkit-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.2);
    -moz-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.2);
    box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.2);

    animation: 2s ease-out 0s 1 alertSlideInFromBottomLeft;
}
.alert .content {}
.alert .close {position: absolute; right: .25rem; top: .25rem; padding: .5rem; width: auto; background: transparent; color: #000; border: 0; line-height: 1;}
.alert .close:after {content: '\d7'; font-size: 2rem;}
.alert .close span {display: none;}