/* See also "outage.css" as the "master" css for this section */

/* When complete use any styles from the outage.css file for the
 * "outage_center_global.css" file 
*/

.topBannerContainer {
	margin: 25px auto 9px auto;
}

.topBannerContainer {
	margin: 45px auto 0px auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* The six(6) "tabs" used as links on the image */
.waterSixTabsRow {
	width: 100%;
	height: 32%;
	position: absolute;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.waterTab {
	width: 34.75%;
	height: 100%;
}

.waterTab:hover {
	background-color: #efefef;
	opacity: 0.3;
}

.tabRow1 {
	top: 0px;
}

.tabRow2 {
	top: 34%;
}

.tabRow3 {
	top: 67%;
}
/* End six(6) tab links */

.largeHeadingContainer {
	/* Extends global css */
	margin-top: 30px;
	text-align center;
	flex-direction: column;
}

.largeHeading {
	/* Extends global css */
	text-align: center;
	margin: auto;
}

.waterHeadingContainer {
	margin: 45px auto 0px auto;
	position: relative;
}

.findOutMoreButton {
	width: 225px;
	height: 45px;

	width: 25%;
	height: 2%;

	font-size: 20px;
	color: #fff;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: 1px solid #fff;
	bottom: 30px;
	right: 40px;
	z-index: 1;
}

.findOutMoreButton:hover {
	color: #ccc;
	background: rgba(226, 226, 226, 0.2);
}

/* Responsive */
@media screen and (max-width: 995px) {
	.findOutMoreButton {
		font-size: 18px;
	}
}

@media screen and (max-width: 800px) {
    .findOutMoreButton {
        font-size: 14px;
    }
}

@media screen and (max-width: 625px) {
    .findOutMoreButton {
        font-size: 12px;
        right: 20px;
		bottom: 15px;
    }
}