/* 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 
*/

.topBannerMenuContainer {
	width: 100%;
	margin: 25px auto 9px auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.topBannerMenuContainer img {
	width: 100%;
}
.mapLinkContainer {
	width: 100%;
	margin: 45px auto 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mapLinkContainer img {
	width: 100%;
}

.mapLink {
	padding: 9px 0px;
	text-align: center;
	position: absolute; width: 37%;
	background-color: #6b6b6b;
	opacity: 0.6;
	font-size: 24px;
	color: #fff;
}

.mapLinkContainer a:hover {
	opacity: 0.92;
}

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

.videoYT {
	margin: auto;
}

.generatorSectionContainer {
	max-width: 84%;
	margin:25px auto 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.generatorSectionLeft {
	width: 55%;
	font-size: 18px;
	text-align: left;
}

.generatorSectionRight {
	width: 45%;
	text-align: center;
}

.generatorMoreInfoLink {
	width: 55%;
	margin: 18px auto 0px auto;
	padding: 8px 8px;
	text-align: center;
	font-size: 18px;
	color: #fff;
	background-color: #00c21d;
}

.generatorMoreInfoLink:hover{
	opacity: 0.7;
}

.stayAwayBannerContainer {
	margin: 45px auto 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.stayAwayBannerContainer img {
	width: 100%;
}

.stayAwayBannerBlurb {
	margin: 25px auto 0px auto;
	font-size: 18px;
}

.stayAwayBannerBlurb a {
	color: #141141;
	text-decoration: underline;
}

.stayAwayBannerBlurb a:hover {
	color: pink;
}

.blackoutsSectionContainer {
	max-width: 84%;
	margin:45px auto 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.blackoutsSectionLeft {
	width: 55%;
	font-size: 18px;
	text-align: left;
}

.blackoutHeading {
	font-size: 48px;
	font-weight: 900;
	letter-spacing: -2.0px;
	color: #000;
}

.blackoutsSectionRight {
	width: 45%;
	text-align: right;
}

.blackoutsSectionRight img {
	max-width: 100%;
}

.stepsContainer {
	height: 100%;
	margin: 45px auto 0px auto;
	display: flex;
	position: relative;
}

.stepsContainer img {
	width: 100%;
}

.stepLink {
	width: 15%;
	/* height: 35%; */
	height: 45%;
	position: absolute;
	top: 30.20%;
	border-radius: 50%;
}

.stepLink:hover {
	background-color: #bfbfbf;
	opacity: 0.6;
}

.stepLink1 { left: 5.5%; }
.stepLink2 { left: 30.25%; }
.stepLink3 { left: 55.1%; }
.stepLink4 { left: 80.25%; }

.stepLinkAnswer {
	width: 76%;
	margin: 22.5% 10% 0px 10%;
	padding: 12px;
	font-size: 16px;
	background-color: #fff;
	display: none;
	position: absolute;
	border: 1px solid #ccc;
	border-radius: 4%;
	box-shadow: -16px 13px 20px -15px rgba(0,0,0,0.26);
	z-index: 1001;
}

.faqHeadingContainer {
	width: 100%;
	margin-top: 45px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.faqHeading {
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -2.0px;
	color: #ffcc00;
}

.faqContainer {
	width: 100%;
	margin: 20px auto 0px auto;
	display: flex;
	justify-content: start;
	align-items: center;
	/* flex-direction: column; */
}

.faqContainerLeft {
	width: 48%;
}

.faqColumnSpacer {
	width: 4%;
}

.faqContainerRight {
	width: 48%;
}

.faqDropdownContainer {
	width: 100%;
	margin: auto;
	position: relative;
	display: flex;
	justify-content: flex-start; 
	align-items: center;
	flex-direction: column;
}

.faqQuestion {
	width: 100%;
	min-height: 69px;
	padding: 7px 0px;
	display: flex; 
	justify-content: flex-start; 
	align-items: center;
	font-size: 16px;
	color: #089cd9;
	position: relative;
	border-top: 1px solid #000;

}

.faqQuestion:after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	width: 36px;
	 /* text-align: center; */
	transform: translateY(-50%);
	font-weight: bold;
	color: inherit;
text-align: right;
}

/* .faqIndicator.contentOpen:after { */
.faqQuestion.contentOpen:after {
	content: "-";
}

.faqQuestion:hover {
	opacity: 0.7;
}

.faqAnswer {
	width: 100%;
	margin-top: -5px;
	margin-bottom: 19px;
	text-align: left;
	display: none;
}

/* Responsive */
@media screen and (max-width: 995px) {
	.largeHeading, .blackoutHeading {
		font-size: 32px;
	}
	
	.mapLink {
		font-size: 18px;
	}

	.generatorSectionLeft, .generatorMoreInfoLink, .stayAwayBannerBlurb, .blackoutsSectionLeft {
		font-size: 16px;
	}

	.stepLinkAnswer {
		font-size: 13px;
	}

	.faqQuestion, .faqAnswer {
		font-size: 14px;
	}


}