.custom-alert {
	display: block;
	position: relative;
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	background-image: url("/includes/public/assets/images/map/back.png");
	background-repeat: repeat-x;
	overflow: hidden;
	transition: max-height 0.3s ease-out, opacity 0.5s ease;
}
	.custom-alert.is-shown {
		max-height: 400px;
		opacity: 1;
		pointer-events: all;
		transition: max-height 0.6s ease-in;
	}

	.custom-alert .alert-container {
		display: flex;
		flex-direction: row;
		position: relative;
		padding: 10px 0;
		text-align: left;
	}
		.custom-alert .alert-container .closer {
			margin: 0;
			padding: 5px 8px;
			position: absolute;
			top: 5px;
			right: 0;
			color: #f26520;
			background-color: transparent;
		}
			.custom-alert .alert-container .closer .fa {
				font-size: 30px;
				color: #f26520;
			}

			.custom-alert .alert-container .closer:hover .fa { color: #2d1904; }

	.custom-alert .alert-container .image-container {
		text-align: center;
		margin-right: 25px;
	}
		.custom-alert .alert-container .image-container img {}

	.custom-alert .alert-container .text-container { flex: 1; }
		.custom-alert .alert-container .text-container h1 {
			margin: 0 0 5px;
			color: #2d1904;
			font-size: 34px;
			line-height: 34px;
			font-family: 'Big Shoulders Display', cursive;
		}

		.custom-alert .alert-container .text-container p {
			margin-bottom: 10px;
			color: #4f4336;
			font-size: 18px;
			font-weight: 500;
			line-height: 28px;
			font-style: normal;
			font-family: 'Raleway', sans-serif;
			text-rendering: optimizeLegibility;
		}

		.custom-alert .alert-container .text-container .readmore {
			display: inline-block;
			font-weight: bold;
			color: #f26520;
			font-size: 18px;
			line-height: 28px;
			font-style: normal;
			font-family: 'Raleway', sans-serif;
			text-rendering: optimizeLegibility;
		}
			.custom-alert .alert-container .text-container .readmore:hover { color: #2d1904; }

/* Tablet & up */
@media only screen and (min-width: 40.063em) {
	.custom-alert .alert-container .text-container h1 {
		font-size: 34px;
		line-height: 34px;
		text-align: left;
	}
}

/* Desktop & up */
@media only screen and (min-width: 64.063em) {
	.custom-alert .alert-container .text-container h1 {
		font-size: 40px;
		line-height: 40px;
	}
}
