#notification_widget {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    max-width: 100%;
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;

    padding: 1em;
}

#notification_widget .notif {
    transition: background-color 0.3s ease;
    
    background-color: #323232;
    border-radius: 0.1em;
    margin-top: 1em;
    width: 100%;
    
    color: white;
    padding: 0.7em 1.3em;
    opacity: 1;
    
    line-height: 1.5em;
}

#notification_widget .notif:hover {
    background-color: #151515;
    cursor: pointer;
}

.notificationAnim {
    opacity: 0;
    visibility: hidden;
    position: relative;
    -webkit-animation: fadeOut 5s linear;
       -moz-animation: fadeOut 5s linear;
        -ms-animation: fadeOut 5s linear;
         -o-animation: fadeOut 5s linear;
            animation: fadeOut 5s linear;
}

@-webkit-keyframes fadeOut {
      0% { opacity: 0; visibility: visible; }
      5% { opacity: 1; visibility: visible; }
     90% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@-moz-keyframes fadeOut {
      0% { opacity: 0; visibility: visible; }
      5% { opacity: 1; visibility: visible; }
     90% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@-ms-keyframes fadeOut {
      0% { opacity: 0; visibility: visible; }
      5% { opacity: 1; visibility: visible; }
     90% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@media screen and (max-width: 1024px) {
    #notification_widget .notif {
        width: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
}