/* 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 } }