#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 50%; /* 30px from the bottom */
	font-size: 16px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

#snackbar.success::before {
    content: '';
    position: relative;
    background-image: url('https://s3-us-west-2.amazonaws.com/ar.com.sinergiasoluciones.web/publica/australis/pagina/home_cadena/logo_australis-01.png');
    width: 100px;
}
#snackbar.success {
    /* visibility: hidden; */
    min-width: 500px;
    margin-left: -250px;
    background-color: #fff;
    color: #a1b1c1;
    /* text-shadow: 1px 1px 1px black; */
    z-index: 999;
    left: 50%;
    top: 30%;
    height: 230px;
    font-size: 20px;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.15);
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 50%; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 50%; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 50%px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 50%; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}