.quickmenu {
	.notification {
		opacity: 0;
		left: 25%;
	}
}



.notification {
	position: fixed;
	z-index: 999;
	left: 50%;
	bottom: 30px;
	transform: translate(-50%, 0);

	opacity: 1;
	transition: all .3s $easeExpo;

	width: 90%;
	margin: 0 auto;
	max-width: 1024px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 20px 10px;

	border-radius: 4px;

	border: 1px solid darken(#b8d9ff, 10%);
	background: #b8d9ff;
	
	color: #00499e;


	@include colorset(notification);

	
	h1, h2, h3 {
		margin-bottom: .5rem;
		font-weight: bold;
	}

	h1 {
		font-size: 1.3rem;
	}

	h2 {
		font-size: 1.2rem;
	}

	h3 {
		font-size: 1.1rem;
	}

	p {
		font-size: 1rem;
		line-height: 1.5;
	}

	a {
		font-size: 1rem;
		line-height: 1.5;
		 
		&:hover {
			text-decoration: none;
		}
	}

	small {
		margin: 0;
		display: inline-block;
	}



	.message {
		flex: 0 0 100%;

		margin-bottom: 1rem;
	}



	.close-notification {
		left: 15px;
		cursor: pointer;
		font-size: 1rem;
		
		text-align: right;
		flex: 0 0 100%;


		i {
			position: relative;
			top: 3px;
			font-size: 1.2rem;
			margin-right: 3px;
		}
	}


	@media (min-width: $md) {
		padding: 20px;
		width: 100%;

		top: 100px;
		bottom: auto;

		p {
			font-size: .95rem;
		}

		.message {
			flex: 1 0 89%;
			margin-right: 1%;
			margin-bottom: 0;
		}

		.close-notification {
			flex: 0 0 10%;
		}
	}
}