.notifit{
    position: fixed;
    top: 10px;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    -wekbit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    z-index: 2000;
    padding: 15px;
    animation-name: pump;
    animation-duration: .5s;
    animation-iteration-count: 1;
    min-width: 150px;
}
.notifit.removing {
    animation-name: remove;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.notifit:hover{
    opacity: 1 !important;
}
.notifit p{
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
}
.notifit-close{
	position: absolute;
	color: #FFF;
	top: 0;
	padding: 0px 5px;
	right: 0;
}
.notifit-close:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Color setup */
/* You are free to change all of this */
.notifit.success{
    background-color: yellowgreen;
    color: white;
    border-bottom: 2px solid #76b532;
}
.notifit.error{
    background-color: orangered;
    color: white;
    border-bottom: 2px solid #e14500;
}
.notifit.warning{
    background-color: orange;
    color: white;
    border-bottom: 2px solid #e18700;
}
.notifit.info{
    background-color: deepskyblue;
    color: white;
    border-bottom: 2px solid #009bff;
}
.notifit.default{
    background-color: #EEE;
    color: #444;
    border-bottom: 2px solid #AAA;
}


/* animations */
@keyframes pump{
    0% {
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
    }
    20% {
        -webkit-transform: scale(1.3, 1.2);
        -ms-transform: scale(1.3, 1.2);
        -o-transform: scale(1.3, 1.2);
        transform: scale(1.3, 1.2);
    }
    100% {
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
    }
}

@keyframes remove{
    0% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    20% {
        -webkit-transform: scale(1.3, 1.2);
        -ms-transform: scale(1.3, 1.2);
        -o-transform: scale(1.3, 1.2);
        transform: scale(1.3, 1.2);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        opacity: 0;
    }
}
