.growl { position: fixed; z-index: 99999; right: 30px; top: 30px; width: 300px;  }
.growl__item { position: relative; background: #fff; box-shadow: 2px 3px 5px rgba(43, 49, 51, .1); border-left: 2px solid transparent; margin: 0; transition: margin 200ms ease, max-height 200ms, padding 250ms, transform 350ms 200ms cubic-bezier(.175, .885, .32, 1.15), opacity 200ms cubic-bezier(.2, 0, .2, 1); max-height: 0; min-height: 0; -webkit-transform: translateX(120%); transform: translateX(120%); }
.growl__item:before { content: ""; display: inline-block; vertical-align: middle; min-height: 38px; }
.growl__item--shown { -webkit-transform: translateX(0); transform: translateX(0); margin-bottom: 10px; max-height: 200px; padding: 12px 15px 12px 70px; min-height: 62px; }
.growl__item--collapsed { -webkit-transform: translateX(120%); transform: translateX(120%); }
.growl__item--warning { border-left-color: #fdbd00; }
.growl__item--error, .growl__item--danger { border-left-color: #fe4d4a; }
.growl__item--success { border-left-color: #07a23b; }
.growl__ico { position: absolute; width: 40px; height: 40px; top:0; bottom: 0; margin: auto; left: 17px; background: no-repeat 50%; opacity: 0; transition: opacity 250ms 300ms; }
.growl__item--shown > .growl__ico { opacity: 1; }
.growl__item--warning > .growl__ico { background-image: url(i/warning.svg); background-size: 35px; }
.growl__item--error > .growl__ico, .growl__item--danger > .growl__ico { background-image: url(i/error.svg); background-size: 30px; }
.growl__item--success > .growl__ico { background-image: url(i/success.svg); background-size: 35px; }
.growl__text { font: 400 17px/17px 'sf pro display'; display: inline-block; vertical-align: middle; opacity: 0; transition: opacity 250ms 300ms; }
.growl__item--shown > .growl__text { opacity: 1; }