/* Задаем стиль уведомлений: */

notifsection {
	position:fixed;
	z-index:999999;
/*	margin-top:45px;*/
	bottom:25px;
	right: 25px;
 }

.notif {
 width: 280px;
 position: relative;
 margin: 0 auto 25px auto;
 padding: 30px 20px;
 text-align: left;
 border-radius: 12px;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0); 
 cursor: default;
 display: none;
 box-shadow:8px 6px 17px 0px rgba(50, 50, 50, 0.75);
}


.notif p {
 text-align: left;
 font-weight: bold;
 font-size: 16px;
 margin: 0;
 width:200px;
}


/*.notif p:before {

 text-align: center;
 border: 3px solid rgba(255, 255, 255, 1);
 margin-top: -18px;
 top: 50%;
 right: 25px;
 width: 30px;
 content: '!';
 font-size: 30px;
 color: rgba(255, 255, 255, 1);
 position: absolute;
 height: 30px;
 line-height: 30px;
 border-radius: 50%;

}*/

.notif .signmark {
 text-align: center;
 margin-top: -18px;
 top: 50%;
 right: 25px;
 width: 30px;
 font-size: 30px;
 color: rgba(255, 255, 255, 1);
 position: absolute;
 height: 30px;
 line-height: 30px;

}

.notif span {
 width: 0;
 height: 10px;
 background: rgba(255,255,255,0.5);
 position: absolute;
 bottom: 5px;
 left: 3%;
 border-radius: 12px;
 transform: translateZ(0);
 -webkit-transform: translateZ(0);
}


/* Устанавливаем цвета всплывающих уведомлений: */


.notif-color-1 {

 background: #F89406;

}


.notif-color-1 p {
 color: #FFF;

}


.notif-color-2 {

 background: #59ABE3;

}


.notif-color-2 p {
 color: #FFF;

}


.notif-color-3{
 background: #00B16A;

}


.notif-color-3 p {
 color: #FFF;

}
.notif-color-4{
 background: #dc3545;

}


.notif-color-4 p {
 color: #FFF;

}


/* Анимация: */

notifsection .hidden {
	display:none;	
}

notifsection .notifon {

 display: block;
 -webkit-animation: fadeOut 5s linear forwards;
 -moz-animation: fadeOut 5s linear forwards;
 -o-animation: fadeOut 5s linear forwards;
 -ms-animation: fadeOut 5s linear forwards;
 animation: fadeOut 5s linear forwards;


}

notifsection .notifon span {
 -webkit-animation: runProgress 5s linear forwards 0.7s;
 -moz-animation: runProgress 5s linear forwards 0.7s;
 -o-animation: runProgress 5s linear forwards 0.7s;
 -ms-animation: runProgress 5s linear forwards 0.7s;
 animation: runProgress 5s linear forwards 0.7s;

}

@-webkit-keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; -webkit-transform: translateY(0px);}
 99% { opacity: 0; -webkit-transform: translateY(-25px);}
 100% { opacity: 0; }

}

@-moz-keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; -moz-transform: translateY(0px);}
 99% { opacity: 0; -moz-transform: translateY(-25px);}
 100% { opacity: 0; }

}


@-o-keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; -o-transform: translateY(0px);}
 99% { opacity: 0; -o-transform: translateY(-25px);}
 100% { opacity: 0; }

}


@-ms-keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; -ms-transform: translateY(0px);}
 99% { opacity: 0; -ms-transform: translateY(-25px);}
 100% { opacity: 0; }

}


@keyframes fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; transform: translateY(0px);}
 99% { opacity: 0; transform: translateY(-25px);}
 100% { opacity: 0; }

}


@-webkit-keyframes runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }

}


@-moz-keyframes runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }

}


@-o-keyframes runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }

}


@-ms-keyframes runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }

}


@keyframes runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }

}


/* Варианты анимации для 2 и 3 уведомления: */


notifsection .notifon:nth-child(2) {
 -webkit-animation-duration: 5s;
 -moz-animation-duration: 5s;
 -o-animation-duration: 5s;
 -ms-animation-duration: 5s;
 animation-duration: 5s;
 
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s;

}


notifsection .notifon:nth-child(2) .notif-progress {
 -webkit-animation-duration: 5s;
 -moz-animation-duration: 5s;
 -o-animation-duration: 5s;
 -ms-animation-duration: 5s;
 animation-duration: 5s;
 
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s;

}


notifsection .notifon:nth-child(3) {
 -webkit-animation-duration: 5s;
 -moz-animation-duration: 5s;
 -o-animation-duration: 5s;
 -ms-animation-duration: 5s;
 animation-duration: 5s;
 
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s;

}


notifsection .notifon:nth-child(3) .notif-progress {
 -webkit-animation-duration: 5s;
 -moz-animation-duration: 5s;
 -o-animation-duration: 5s;
 -ms-animation-duration: 5s;
 animation-duration: 5s;
 
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s;

}