/* Notification Widget */

/* Global styling */

section.notification {
  z-index: 9999;
  cursor: pointer;
  width: 80%;
  position: fixed;
  right: 1%;
  bottom: 2%;
}

/* Tablet */
@media (min-width: 40em) {
  section.notification { width: 40%; }
}
/* Desktop */
@media (min-width: 60em) {
  section.notification { width: 25%; }
}

section.notification > div > div {
  animation: 1s fadein;
  -moz-animation: 1s fadein;
  -webkit-animation: 1s fadein;
}


section.notification header {
  font-weight: bold;
}

section.notification i.close { 
  position: absolute;
  right: 3px;
  top: 5px;
}

/* Animation */

@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }