.notif {
    position: fixed;
    right: 20px;/*left*/
    top: 50px;/*bottom -50px*/
    background-color: #323232;
    padding: 12px 24px 17px 24px;
    vertical-align: middle;
    color: #fff;
    box-shadow: 0 7px 18px rgba(0,0,0,0.2);
    border-radius: 1px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    z-index: 8364;
}
@media (max-width: 768px){
    .notif {
        left: 20px;
    }
}
.notif:hover{
    cursor: pointer;
}
.n-success{
    color: #fff;
    background-color: #43A047;
}
.n-warn{
    color: #fff;
    background-color: #EF6C00;
}
.n-err{
    color: #fff;
    background-color: #F44336;
}

.peek {
    -webkit-animation: peek 1s forwards;
    /*-webkit-animation-delay: 0.5s;*/
    animation: peek 1s forwards;
    animation-delay: 0ms;/*500*/
}

.show {
    -webkit-animation: show 0.5s forwards;
    /*-webkit-animation-delay: 0.5s;*/
    animation: show 0.5s forwards;
    animation-delay: 0ms;/*500*/
}

@-webkit-keyframes peek {
    0% { top: 0px; }
    /*10% { top: 40px; }  demo purposes; change to 20px
    90% { top: 40px; }  /*demo purposes; change to 20px*/
    100% { top: 60px; }
}

@keyframes peek {
    0% { top: 0px; }
    /*10% { top: 40px; }  demo purposes; change to 20px
    90% { top: 40px; }  /*demo purposes; change to 20px*/
    100% { top: 60px; }
}


@-webkit-keyframes show {
    100% { top: 60px; }/*bottom 20px*/
}

@keyframes show {
    100% { top: 60px; }/*bottom 20px*/
}

/*
VECCHIO ALERT

#black_screen_alert {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10;
        overflow: hidden;
}

#alert {
        width: 390px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -195px;
        z-index: 11;
}

#alert #headalert {
        width: 360px;
        height: 5px;
        background: #fa4b2a;
        -webkit-border-radius:	5px 5px 0px 0px;
        -moz-border-radius: 	5px 5px 0px 0px;
        border-radius: 			5px 5px 0px 0px;
        float: left;
}

#alert #action_alert {
        width: 360px;
        padding: 15px;
        background: #f5f5f5;
        color: #cbc2c2;
        font-family: arial;
        font-size: 17px;
        float: left;
}

#alert #message {
        width: 360px;
        padding: 15px;
        background: #fff;
        color: #978888;
        font-family: arial;
        font-size: 14px;
        float: left;
        -webkit-border-radius:	0px 0px 5px 5px;
        -moz-border-radius: 	0px 0px 5px 5px;
        border-radius: 			0px 0px 5px 5px;
}

#alert #messagetext {
        width: 360px;
        float: left;
}

#alert #closebutton {
        height: 30px;
        line-height: 30px;
        float: right;
        padding: 0px 10px;
        padding-right: 23px;
        color: #fff;
        font-family: arial;
        font-size: 14px;
        -webkit-border-radius:	5px;
        -moz-border-radius: 	5px;
        border-radius: 			5px;
        background: #fa4b2a;
        background: #fa4b2a url('image/iconclosealert.png') right no-repeat;
        cursor: pointer;
}
#alert #closebutton:hover{
    cursor: pointer;
}*/