.md-snackbar {
    display: inline-block;
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    overflow: hidden;
}

    .md-snackbar--left{
        left: 20px;
    }

    .md-snackbar--right{
        right: 20px;
    }

    .md-snackbar--full{
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
    }

.md-snackbar__inner {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    background-color: #323232;
    color: #fff;
    min-width: 20%;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0, .12), 0 1px 2px rgba(0,0,0, .24) ;
}

    .md-snackbar__inner--rounded{
        border-radius: 2px;
    }

    .md-snackbar__inner--toast{
        border-radius: 50px;
    }

    .md-snackbar__inner--animated{
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .md-snackbar__inner--animated-slideup-in {
        -webkit-animation-name: slide-up-in;
        animation-name: slide-up-in;
    }

    .md-snackbar__inner--animated-slideup-out {
        -webkit-animation-name: slide-up-out;
        animation-name: slide-up-out;
    }

    .md-snackbar__inner--animated-fade-in {
        -webkit-animation-name: fade-in;
        animation-name: fade-in;
    }

    .md-snackbar__inner--animated-fade-out {
        -webkit-animation-name: fade-out;
        animation-name: fade-out;
    }

/* aninmations */
@-webkit-keyframes slide-up-in {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-up-in {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes slide-up-out {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slide-up-out {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}