.notification {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 15rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.4),
    0 0 29px rgba(0,0,0,0.2);
  color: #FFF;
  z-index: 1;
  pointer-events: none;
}

/**
 * @deg90,
 * @deg270
 */

.deg90 .notification,
.deg270 .notification {
  width: 100vh;
  height: 100vw;
  padding-bottom: 4.8rem;
  transform: rotate(90deg) translate(0%, -100%);
  transform-origin: 0 0;
}

/**
 * @deg90
 */

.deg90 .notification {
  transform: rotate(-90deg) translate(-100%, 0%);
}

/**
 * @deg180
 */

.deg180 .notification {
  transform: rotate(180deg);
}

/** Item
 ---------------------------------------------------------*/

.notification > li {}

/**
 * @hidden
 */

.notification > li.hidden {
  display: none;
}

/** Item Text
 ---------------------------------------------------------*/

.notification > li > span {
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

/** Notification Icon
 ---------------------------------------------------------*/

.notification > li:before {
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: #D92E2E;
  text-shadow: none;
}