#toastbar {
    visibility: hidden;
    min-width: 250px;
    /* margin-left: -125px; */
    background-color: #FDD000;
    color: #202432;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1500;
    left: 50%;
    bottom: 60px;
    font-size: 18px;
    transform: translate(-50%, 0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";       /* IE 8 */
    /* filter: alpha(opacity=7);   IE 5-7  
    -moz-opacity: 0.7;            Netscape  
    -khtml-opacity: 0.7;         Safari 1.x  
    opacity: 1;               Good browsers */
}

#toastbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 60px; opacity: 0.7;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 60px; opacity: 0.7;}
}

@-webkit-keyframes fadeout {
    from {bottom: 60px; opacity: 0.7;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 60px; opacity: 0.7;}
    to {bottom: 0; opacity: 0;}
}