.flash-message {
	font: normal 16px/24px Arial, sans-serif;
	background: #fc796b;
	color: $white;
	width: 100%;
	padding: 0.8rem 0;
	margin: 0 0 20px 0;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	position: relative;
	border-radius: 0;
	transition: opacity 0.3s ease-in;

    &__content {
        text-align: center;
    }

	&__close {
		font-family: $baseFont;
        font-size: 1.8rem;
        line-height: 1;
		width: 1.8rem;
		height: 1.8rem;
		padding: 0;
		text-align: center;
		color: $white;
		border: none;
		display: block;
		position: absolute;
		right: 0.75rem;
		top: 0.4rem;
		background: none;
        opacity: 0.8;
        transition: opacity 0.07s ease-out;

		&:hover {
			opacity: 1;
		}
	}

	&--hidden {
		opacity: 0;
		pointer-events: none;
	}

	&--danger {
		background: #d14233;
		color: $white;

		.flash-message__close {
			color: #912519;
		}
	}

	&--success {
		background: $yellow;
		color: $white;

		.flash-message__close {
			color: $black;
		}
	}
}

#flash-messages {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;

	.flash-message {
		margin: 0 auto;
		width: 100%;
		display: block;
	}
}