/* 6.12 Notification Bar
----------------------------------------------------------*/

#notification-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    font-weight: 300;
    color: #fff;
    z-index: 960;
    @include transition(all 0.4s ease-out);
    @include translateY(100%);
    visibility: hidden;
    text-align: center;
    @include box-shadow(0px 0px 40px 0px rgba(0,0,0,.1));
    font-family: $font-secondary;

    > div {
        padding: 1.5rem;
        font-size: 14px;

         &.success {
            background-color: $color-green;
        }

        &.error {
            background-color: $color-red;
        }
    }

    &.visible {
        @include translateY(0);
        visibility: visible;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1rem;
    }
}