/*----------------------------------------------------------------------------------*
 * map.csswidth:30%;
 * Softoo Map styles 
 *
 * (c) Softoo Systems, 2011
 * www.softoo.co.th
 *
 *-----------------------------------------------------------------------------------*/

.banner 
{	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 360px;
	color: #fff;
	text-shadow:-2px -2px 0 #0a0a96,  /* Top-left shadow */
				 2px -2px 0 #0a0a96,  /* Top-right shadow */
				-2px  2px 0 #0a0a96,  /* Bottom-left shadow */
				 2px  2px 0 #0a0a96;  /* Bottom-right shadow */
	overflow: hidden;
}
.banner::before 
{	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #0a0a96;
	background-image: url("../../img/banner.png");
	background-repeat: no-repeat;
	background-size: cover;
    opacity: 1.0;
    z-index: -2;
}
.banner::after 
{	content: "FLOOD RISK VISUALIZATION";
    position: absolute;
	transform: translate(-50%,0%);
    left: 50%;
	bottom: -8%;
	font-size: 4.55rem;
	font-weight:700;
	color: #ffffff;
    opacity: 0.4;
	text-shadow: none;
	white-space: nowrap;
    z-index: -1;
}
.banner h1 
{	margin-top: 1.5em;
	font-size: 3.5rem;
	font-weight: 700;
}
.banner h2 
{	margin-top: 0.5em;
	font-size: 1.5rem;
	font-weight: 400;
}