.notification-holder {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
}

    .notification-holder .notification {
        float: left;
        clear: both;
        color: #fff;
        position: relative;
        border: none;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.35);
        -ms-box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.35);
        box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.35);
        opacity: 0;
        margin-top: -80px;
        padding: 8px 30px 8px 8px; /* Allow room for the close button */
        left: 10%;
        width: 80%;
    }

@media (min-width: 768px) {
    .notification-holder .notification {
        width: 50%;
        left: 25%;
    }
}

        .notification-holder .notification.information {
            background: #003366;
        }

        .notification-holder .notification.success {
            background: #5e9b29;
        }

        .notification-holder .notification.warning {
            background: #ffa500;
        }

        .notification-holder .notification.error {
            background: #a51b00;
        }

        /* States */
        .notification-holder .notification.active {
            opacity: 1;
            margin-top: 0;
        }

        .notification-holder .notification .close {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 5px;
            font-size: 1.5em;
        }