.notif {
    position: fixed;
    left: 20px;
    bottom: 50px;
    background-color: #323232;
    padding: 12px 24px 17px 24px;
    vertical-align: middle;
    color: #fff;
    box-shadow: 0 7px 18px rgba(0,0,0,0.2);
    border-radius: 1px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    z-index: 99999;
}

.notif-success {
    background-color: #009688;
}

.notif-info {
    background-color: #00bcd4;
}

.notif-warning {
    background-color: #ffc107;
}

.notif-danger {
    background-color: #f44336;
}

.peek {
    -webkit-animation: peek 5s forwards;
    -webkit-animation-delay: 0.5s;
    animation: peek 5s forwards;
    animation-delay: 500ms;
}

.show {
    -webkit-animation: show 0.5s forwards;
    -webkit-animation-delay: 0.5s;
    animation: show 0.5s forwards;
    animation-delay: 500ms;
}

@-webkit-keyframes peek {
    0% {
        bottom: -51px;
    }

    10% {
        bottom: 80px;
    }
    /*demo purposes; change to 20px*/
    90% {
        bottom: 80px;
    }
    /*demo purposes; change to 20px*/
    100% {
        bottom: -51px;
    }
}

@keyframes peek {
    0% {
        bottom: -51px;
    }

    10% {
        bottom: 80px;
    }
    /*demo purposes; change to 20px*/
    90% {
        bottom: 80px;
    }
    /*demo purposes; change to 20px*/
    100% {
        bottom: -51px;
    }
}


@-webkit-keyframes show {
    100% {
        bottom: 20px;
    }
}

@keyframes show {
    100% {
        bottom: 20px;
    }
}