@keyframes notify {
	0%  {width:285px}
	13% {width:285px;}
	74% {width:285px;}
	80% {width:285px;  border-radius: 7px; border-top-left-radius:26px; border-bottom-left-radius:26px; }
	85% {width:52px; border-radius: 50%;}
	100%  {width:52px; border-radius: 50%;  }
}

@keyframes notifyphone {
	0% {opacity: 0.01; top:-70px;}
	10% {opacity: 1; top:54px;}
	90% {opacity: 1; top:54px;}  
	100% {opacity: 0.01; top:-70px;} 
}

@keyframes spin { 100% { transform:rotate(720deg); } }


@media (min-width: 600px){
	@keyframes exit {
		0% {opacity: 1;visibility:visible;}
		55% {opacity: 1; visibility:visible;}
		65% {opacity: 0;visibility:hidden;}  
		100% {opacity: 0; visibility:hidden;} 
	}		
	
	.alwaysphone{display:none}

	@keyframes hover {
		/*0%  {width:52px; border-radius: 50%;  }  
		15% {width:52px; border-radius: 50%;}*/
		20% {width:285px;  border-radius: 7px; border-top-left-radius:26px; border-bottom-left-radius:26px; }
		25% {width:285px;}
		87% {width:285px;}
		100%  {width:285px}
	}
	
		
	
	#n-wrapper { position: fixed;  z-index:10000;  right: 1em;  bottom: 5em;  }
	.n-box{  position: relative;  width: 285px;  height: 52px; min-width: 52px !important;  border-radius: 7px;  background-color: #002769;  right:0; color:#fff; margin-bottom:20px;
	transform-origin: right;
	float:right; clear:both;
	animation: notify 5s ease-in-out 1;
	animation-fill-mode: forwards;
	border-top-left-radius:26px; border-bottom-left-radius:26px;
	cursor:pointer;
	}

  
	.n-box .n-dont{display:none}
	.n-box .n-full{display:block; width:270px; height:100%;position: absolute;  /*animation: exit 6s ease-in-out 1; animation-fill-mode: forwards;*/}
	.n-box .n-full-back{display:block; width:270px; height:100%;position: absolute; display:none !important}
	
	.n-box-mini{margin-bottom:20px; margin-right:20px; border-radius: 28px; position:relative; width:56px; height:56px; cursor:pointer; /*animation-fill-mode: forwards; */}
	.n-loader{background: linear-gradient(288deg, #f878c6, #8b54e6); border-radius: 28px; width:56px; height:56px; position:absolute; top:0; left:0; /*display:none */}
	.n-box .n-loader{top:-2px; left:-2px;}
	.n-box-mini .n-picobal{top:2px; left:2px;}
	
	.n-teraz{color:#fed208;font-size:10px;}
} 
.run-spin{animation: spin 2s ease-in-out; }
.n-close { display: block; background:url('https://www.autobazar.eu/images/notify/notify-close.svg');  background-size: auto;  position: absolute; top: 0px; right: 0px; width: 10px; height: 10px; }
.n-picture { height: 52px; display: block; top:0; }
.n-picobal {text-align:center;  border-radius:26px; width:52px; height:52px; overflow:hidden;position: absolute;  background:#0A3F89;  /*box-shadow: 0 0 12px 1px #0a0a0a;*/}
.n-message {display: block;  width: 220px; right:3px;  position:absolute;  top:3px;  color: #04184d; overflow:hidden; animation: exit 6s ease-in-out 1; animation-fill-mode: forwards;}
.n-message a { color: #1ebef9; font-size:10px; font-weight:bold; display:inline-block; overflow:hidden; height:25px;}
.n-box .title{line-height:14px; display:inline-block; overflow:hidden; height:14px;  color:#fff;}
.n-box .price{    font-weight:bold; font-size:12px; line-height:15px; text-align:right; color:#fff;}
.n-box{background:#fff; box-shadow: 0 0 3px 1px #222;}
.n-box .title,.n-box .price{ color: #04184d;}
.n-teraz{color:#07214A;line-height:10px; position:relative; top:-2px;}
.n-box:hover{animation-play-state: paused;}
.n-box:hover .n-message{animation-play-state: paused;}


@media (max-width: 599px){
	#n-wrapper { position: absolute;  z-index:auto !important;  left: 0;  top: 0;  width:100%;}
	.n-box{position:relative; left:0; top:54px;   width:100%; height:62px; background:#00225f;    padding-top:5px; padding-bottom:5px;  
	animation: notifyphone 7s ease-in-out 1;
	animation-fill-mode: forwards; 
	z-index:19500;
	}
	
	.n-message {display: block;  width: auto; left:80px; top:9px;} 
	.n-message a {font-size:12px;}
	.n-box .n-full{display:block !important; margin-right:85px;  height:55px; position:relative; z-index:500;}
	 .n-box-mini .n-picture { height: 22px; }
	.n-box .n-dont{color:#828aa5; position:absolute; right:10px; bottom:15px; font-size:11px; cursor:pointer;}
	.n-box .n-dont:hover{color:#ccc;}
	.n-box .n-close{display:none}  
	.n-picobal { top:6px; left:10px;}
	.n-box-mini{position:absolute; width:24px; height:24px; cursor:pointer; top:15px; right:118px; z-index:24000;}
	.n-box-mini .n-picobal{ width:20px; max-height:20px;}
	.n-loader{background: linear-gradient(288deg, #f878c6, #8b54e6); border-radius: 28px; width:24px; height:24px; position:absolute; top:0; left:0;   }
	.n-box .n-loader{height:56px; width:56px; top:4px; left:8px;}
	.n-box-mini .n-picobal{top:2px; left:2px; }
	.n-teraz{color:#F1CB09;}
	.n-box .title,.n-box .price{ color: #fff;}
}