@media only screen and (max-width: 570px) {

	#site-intro {
		position: relative;
		bottom: 0 !important;
		margin-top: 15px;
	}

	#site-intro h1 {
		padding: 15px 20px;
		margin-left: 0;
	}

	#site-intro h2 {
		padding: 15px 20px;
		margin-left: 0;
	}

	.our-offices p {
		background: none;
	}

	.our-offices span {
		float: none !important;
		display: block;
		padding: 0 !important;
	}

	#promos {
		margin-top: 30px;
	}

	.promo {
		width: 100% !important;
		margin-right: 0 !important;
	}

	.page-hero .page-hero-image {
		height: 250px;
	}

	.page-title {
		font-size: 23px !important;
		padding: 8px 0 7px 0 !important;
		height: 51px;
		line-height: 1.1;
	}

	.retailers li {
		width: 100%;
		margin-right: 0;
	}

	.people .person .image {
		float: none;
	}

	.people .person .details {
		padding-left: 0;
		margin-top: 20px;
	}

	.our-offices span.data a {
		word-break: break-word;
	}

	.contact-title span.arrow {
		margin-right: 0;
	}

	.grid-panels .panel,
	.grid-panels .panel.tall,
	.grid-panels .panel.wide {
		width: 100%;
		height: 300px;
	}

	.warning {
		margin-top: 15px;
		padding-bottom: 25px;
	}

	.warning-message {
		padding-left: 0;
		background: none;
	}

	.warning-message h1 {
		font-size: 26px;
	}	

	.warning-buttons {
		padding-left: 0 !important;
	}

	.warning-buttons a {
		margin-bottom: 10px !important;
	}

}

/* 
 * Overrides for devices UP TO 768px 
 * These rules will be ignored beyond this threshold
*/
@media only screen and (max-width: 768px) {

	#mainnav {
	    display: none !important;
	}

	#site-intro {
		bottom: 15px;
	}

	#site-intro h1 {
		font-size: 24px;
	}

	#site-intro h2 {
		font-size: 18px;
	}

	.inner {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.left-menu-active  > aside.left {
        width: 100%;
        margin: 40px 0;
    }

	.left-menu-active  > .content,
	.left-menu-active.right-panel-active  > .content,
	.right-panel-active  > .content {
        width: 100%;
	}
    
    .right-panel-active aside.right {
        width: 100%;
        margin: 40px 0 0 0;
    }

    .breadcrumbs {
    	margin-top: 40px;
    }

    .leftAlone {
    	float: none !important;
		margin-left: 0;
	}

	.rightAlone {
		float: none !important;
		margin-right: 0;
	}

	footer {
		padding: 27px 0;
	}

	.contact-section {
		padding: 30px 0 25px 0;
	}

	.fifth {
		width: 100%;
		margin-bottom: 20px;
		margin-right: 0;
		text-align: center;
	}

	footer .fifth:last-child {
		margin-bottom: 0;
	}

	.copyright {
		float: none;
		text-align: center;
	}

	.footer-bottom-links {
		float: none;
		text-align: center;
		width: 100%;
		margin-top: 5px;
	}

	.footer-bottom-links li {
		float: none;
		display: inline-block;
	}

	.footer-bottom-links li:first-child {
		margin-left: 0;
	}

	.promo {
		width: 49%;
		margin-right: 2%;
		margin-bottom: 20px;
	}

	.promo:nth-child(3) {
		margin-right: 0;
	}

	#mobile-link {
		float: left;
		font-family: 'FontAwesome';
		background: #000;
		color: #fff;
		position: absolute;
		top: 0;
		left: -0.6px;
		font-size: 28px;
		padding: 13px 15px;
	}

	#logo {
		margin: 9px 0 15px 57px;
		float: left;
		width: 111px;
		height: 30px;
	}

	#mobile-mainnav {
		background: url('../images/we-logo-mobile.png') no-repeat 20px 6px #1d1d20;
		background-size: 142px 37px;
	}

	section.main {
		padding: 53px 0 40px 0;
	}

	.page-title {
		font-size: 27px;
		padding: 16px 0 9px 0;
	}

	.outages-list .outages-panel {
		margin-top: 0;
		padding: 10px 0;
		float: none;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.warning-message {
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.warning-buttons {
		margin-top: 10px;
		margin-left: 0;
		padding-left: 80px;
		width: 100%;
	}

	.warning-buttons a {
		display: inline-block;
		margin-bottom: 0;
		margin-right: 10px;
	}

}


/* 
 * Structure for all devices over 768px
 * These rules will be applied to all widths beyond this threshold
*/
@media only screen and (min-width: 768px) {

	#mobile-mainnav,
	#mobile-link {
	    display: none !important;
	}

	.inner {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	#mainnav > ul > li > a {
		font-size: 12px;
		padding: 33px 9px 31px 9px;
	}

	.left-menu-active > .content {
		width: 75%;
		float: left;
		margin-left: 3%;
	}

	.right-panel-active > .content {
		width: 75%;
		float: left;
		margin-right: 3%;
	}

	.left-menu-active.right-panel-active > .content {
		margin-right: 0;
	}

	aside.left {
		width: 22%;
		margin-left: 0;
		float: left;
	}

	aside.right {
		width: 22%;
		margin-left: 0;
		float: left;
	}

	.left-menu-active.right-panel-active aside.right {
		width: 75%;
		float: right;
		margin-left: 3%;
		margin-top: 40px;
	}

	.content-section {
		padding-top: 30px;
	}

	.content-section.has-banner{
		padding-top: 55px;
	}

	.content.full-width {
		width: 100%;
		float: left;
	}

	.contact-section h1 {
		margin-left: 0;
		margin-bottom: 4px;
		display: block;
	}

	.contact-section h2 {
		margin-bottom: 0;
	}

	footer .fifth.first {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	footer .fifth.first a {
		margin: 0 auto;
	}

	footer .fifth {
		width: 50%;
		margin-right: 0;
		margin-bottom: 20px;
		text-align: center;
	}

	footer .fifth.last {
		margin-right: 0;
	}

	footer .fifth:nth-child(3),
	footer .fifth.last {
		margin-bottom: 0;
	}

	footer .fifth:last-child {
		margin-right: 0;
	}

	footer .fifth:nth-child(3) {
		clear: both;
	}

	aside .tips-contact {
		text-align: left;
	}

	.warning-message {
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.warning-buttons {
		margin-top: 10px;
		margin-left: 0;
		padding-left: 80px;
		width: 100%;
	}

	.warning-buttons a {
		display: inline-block;
		margin-bottom: 0;
		margin-right: 10px;
	}

}

@media only screen and (min-width: 880px) {

	#mainnav > ul > li > a {
		font-size: 13px;
		padding: 32px 15px 31px 16px;
	}

}

@media only screen and (min-width: 980px) {

	.inner {
		width: 940px;
		margin: 0 auto;
		padding: 0;
	}

	#site-intro {
		bottom: 60px;
	}

	#site-intro h2 {
		max-width: 75%;
	}

	.content {
		width: 650px;
		float: left;
	}

	.left-menu-active.right-panel-active > .content{
		width: 650px;
		margin-left: 50px;
		margin-right: 0;
	}

	.left-menu-active .content{
		width: 650px;
		margin-left: 50px;
	}

	.right-panel-active .content{
		width: 650px;
		margin-right: 50px;
	}

	aside {
		width: 240px;
		margin-left: 20px;
		float: right;
	}

	aside.left {
		width: 240px;
		margin-left: 0;
		float: left;
	}

	aside.right {
		width: 650px;
		margin-left: 50px;
	}

	.left-menu-active.right-panel-active aside.right {
		width: 650px;
		margin-top: 40px;
		margin-left: 50px;
		float: right;
	}

	.Outages aside.right {
		width: 240px;
		margin-left: 0;
		float: right;
		clear: none;
	}

	#mainnav > ul > li > a {
		font-size: 15px;
		padding: 31px 19px 29px 19px;
	}

	.contact-section h1 {
		margin-left: 10px;
		display: inline-block;
	}

	.contact-section h2 {
		margin-bottom: 15px;
	}

	footer .fifth.first,
	footer .fifth {
		width: 222px;
		margin-right: 17px;
		margin-bottom: 0;
		text-align: left;
	}

	footer .fifth:nth-child(3) {
		clear: none;
	}

	aside .tips-contact {
		text-align: center;
	}

	footer .search-bar fieldset {
		width: 183px;
	}

	.promo {
		width: 300px;
		margin-right: 20px;
	}

	.warning-message {
		width: 860px;
	}

	.warning .close {
		right: 0;
	}


}

@media only screen and (min-width: 1200px) {

	.inner {
		width: 1170px;
	}

	.content {
		width: 800px;
	}

	.left-menu-active.right-panel-active  > .content{
		width: 530px;
	}

	.left-menu-active .content{
		width: 880px;
		margin-left: 50px;
	}

	.right-panel-active .content{
		width: 880px;
		margin-right: 50px;
	}

	aside {
		width: 300px;
	}

	aside.right,
	.left-menu-active.right-panel-active aside.right {
		width: 300px;
		margin-top: 0;
		margin-left: 0;
		clear: none;
	}

	footer .fifth.first,
	footer .fifth {
		width: 220px;
	}

	footer .search-bar fieldset {
		width: 183px;
	}

	.promo {
		width: 375px;
	}

	.grid-panels {
		margin: 20px -10px;
	}

	.grid-panels .panel {
		width: 20%;
		height: 200px;
	}

	.grid-panels .panel.tall {
		width: 20%;
		height: 420px;
	}

	.grid-panels .panel.wide {
		width: 40%;
		height: 200px;
	}

	.warning-message {
		width: 780px;
	}

	.warning-buttons {
		margin-left: 40px;
		width: 270px;
	}

	.warning-buttons a {
		margin-bottom: 10px;
	}

}