.notif {
	top: 20px;
	right: 20px;
	width: 325px;
	position: fixed;
	margin: 0;
	padding: 0;
	z-index: 9999999;
	-webkit-transform: translateZ(0) scale(1, 1);
	transform: translateZ(0) scale(1, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	filter: blur(0);
	-webkit-filter: blur(0);
	max-width: 90%;
}

.notif__bar {
	background-color: #f09b40;
	border-bottom: 1px solid #E89F3C;
	color: #fff;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
	-ms-transform: translate(0, 0) scale(1, 1);
	transform: translate(0, 0) scale(1, 1);
	-webkit-font-smoothing: subpixel-antialiased;
	cursor: pointer;
	margin: 4px 0;
	overflow: hidden;
	position: relative;
}

.notif__bar_anim_open {
	animation: open-anim 1100ms linear 0s 1 normal both running;
}

.notif__bar_anim_close {
	animation: close-anim 1100ms linear 0s 1 normal both running;
}

.notif__body {
	padding: 10px;
	font-size: 16px;
}

@media only screen and (max-width : 375px) {
  .notif {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
  }
  .notif__bar:first-child {
    margin-top: 0;
  }
  .notif__bar_anim_open {
    animation: inRight 100ms linear 0s 1 normal both running;
  }
}

@keyframes inRight {
   0% {
      transform: translateX(100%);
   }
   100% {
      transform: translateX(0);
   }
} 

@keyframes open-anim { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 450, 0, 0, 1); }
  3.03% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 267.159, 0, 0, 1); }
  6.06% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 117.431, 0, 0, 1); }
  9.09% { transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 20.824, 0, 0, 1); }
  12.12% { transform: matrix3d(1.138, 0, 0, 0, 0, 1.121, 0, 0, 0, 0, 1, 0, -27.409, 0, 0, 1); }
  15.15% { transform: matrix3d(1.071, 0, 0, 0, 0, 1.025, 0, 0, 0, 0, 1, 0, -41.791, 0, 0, 1); }
  18.18% { transform: matrix3d(1.015, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -37.452, 0, 0, 1); }
  21.21% { transform: matrix3d(0.978, 0, 0, 0, 0, 0.934, 0, 0, 0, 0, 1, 0, -25.916, 0, 0, 1); }
  24.24% { transform: matrix3d(0.96, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, -14.144, 0, 0, 1); }
  27.27% { transform: matrix3d(0.958, 0, 0, 0, 0, 0.974, 0, 0, 0, 0, 1, 0, -5.289, 0, 0, 1); }
  30.3% { transform: matrix3d(0.966, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { transform: matrix3d(0.979, 0, 0, 0, 0, 1.018, 0, 0, 0, 0, 1, 0, 2.348, 0, 0, 1); }
  36.36% { transform: matrix3d(0.991, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 2.788, 0, 0, 1); }
  39.39% { transform: matrix3d(1, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 2.268, 0, 0, 1); }
  42.42% { transform: matrix3d(1.006, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 1.455, 0, 0, 1); }
  45.45% { transform: matrix3d(1.008, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0.721, 0, 0, 1); }
  48.48% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0.21, 0, 0, 1); }
  51.52% { transform: matrix3d(1.005, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, -0.071, 0, 0, 1); }
  54.55% { transform: matrix3d(1.003, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, -0.177, 0, 0, 1); }
  57.58% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.179, 0, 0, 1); }
  60.61% { transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, -0.134, 0, 0, 1); }
  63.64% { transform: matrix3d(0.999, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, -0.079, 0, 0, 1); }
  66.67% { transform: matrix3d(0.999, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, -0.035, 0, 0, 1); }
  69.7% { transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, -0.006, 0, 0, 1); }
  72.73% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.008, 0, 0, 1); }
  75.76% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0.012, 0, 0, 1); }
  78.79% { transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0.011, 0, 0, 1); }
  81.82% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.008, 0, 0, 1); }
  84.85% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.004, 0, 0, 1); }
  87.88% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.002, 0, 0, 1); }
  90.91% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.94% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.97% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes close-anim { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 290.637, 0, 0, 1); }
  13.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 500.479, 0, 0, 1); }
  20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 543.603, 0, 0, 1); }
  26.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 497.973, 0, 0, 1); }
  33.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 450, 0, 0, 1); }
  40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 432.585, 0, 0, 1); }
  46.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 437.666, 0, 0, 1); }
  53.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 447.585, 0, 0, 1); }
  60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 452.767, 0, 0, 1); }
  66.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 452.837, 0, 0, 1); }
  73.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 451.005, 0, 0, 1); }
  80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 449.682, 0, 0, 1); }
  86.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 449.41, 0, 0, 1); }
  93.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 449.698, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 450, 0, 0, 1); } 
}