html {
  scroll-behavior: smooth;
}

.onthispage {
padding:15px;
background:#f1f2f3;
margin-top: 15px;
}

.onthispage ul {
margin-top:0;
}
/*Change megamenu layout to fit Smart Grid in topnav*/
/*desktop*/

@media only screen and (min-width:1124px) {	
 body .headerWrapper {
    height: 110px;
 }
	
.headerWrapper  #menuWrapper {
   top: 65px;
 }


.french #menuTabs li a.topnav  {
	font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    }
}
/*tablet*/
@media only screen and (min-width:481px) and (max-width: 1123px) {	
body .headerWrapper {
    height: 87px;
}
.headerWrapper  #menuWrapper {
   top: 59px;
}

.french #menuTabs li a.topnav {
    padding: 7px 7px;
}
}

/*END OF Change megamenu layout to fit Smart Grid in topnav */

/*footer social icons*/

.ftrLinks .ftrLinksCol a.ftrLinkFacebook:after {
	content: url(/media/1489846/social-icons-fb-grey-12.png);
	padding-left: 3px;
	margin-top: 12px;
}

.ftrLinks .ftrLinksCol a.ftrLinkInstagram:after {
	content: url(/media/1489847/social-icons-insta-grey-12.png);
	padding-left: 3px;
	margin-top: 12px;
}

.ftrLinks .ftrLinksCol a.ftrLinkLinkedin:after {
	content: url(/media/1489848/social-icons-linkedin-grey-12.png);
	padding-left: 3px;
	margin-top: 12px;
}

/*homepage social colour icons*/
.footerSocialNetwork .ftrSocialLinks a.ftrFacebook {

    background-image: url(/media/1489849/social-icons-fb-31.png);
    background-position: center 12px;
    background-size: 26px 26px;
    border-left: 0;

}

.footerSocialNetwork .ftrSocialLinks a.ftrInstagram {

    background-image: url(/media/1489850/social-icons-insta-31.png);
    background-position: center 12px;
    background-size: 26px 26px;
    border-left: 0;

}

.footerSocialNetwork .ftrSocialLinks a.ftrLinkedin {

    background-image: url(/media/1489851/social-icons-linkedin-31.png);
    background-position: center 12px;
    background-size: 26px 26px;
    border-left: 0;

}

/*contactForm style*/


.contactFormAtlanticBlue {
background: #314451; 
	padding:20px;
}

.contactFormAtlanticBlue .redRequiredIndicator,.contactFormAtlanticBlue .fieldLabel, .contactFormAtlanticBlue label,.contactFormAtlanticBlue h2,.contactFormAtlanticBlue p  {
color:#fff;
}

.contactFormCoastalGrey {
background: #f2f2f2; 
	padding:20px;
}

.contactFormCoastalGrey .redRequiredIndicator,.contactFormCoastalGrey  .fieldLabel, .contactFormCoastalGrey label,.contactFormCoastalGrey p  {
color:#1c212a;
}

.contactFormCoastalGrey h2 {
color:#e26c24;
}
.contactInfoForm fieldset > div > div > span:first-child, .contactInfoForm fieldset > div > div > span:first-child > input {
    width: auto !important;
}


.contactInfoForm .fieldLabel, .contactInfoForm label {
font-size:110%;
}

.contactInfoForm h2 {
margin-bottom:10px;
font-weight:bold;
font-size:150%;
border-bottom:0;
}

.contactInfoForm p {
font-size:120%;
font-weight:bold;
line-height:120%;
margin-bottom: 16px;
}

/*eof contactForm style*/

/* Pagination */

ul.pagination {
	display: inline-block;
	margin-left: 0px;
}
	
ul.pagination .active {
	color: #333;
	font-weight: normal;
}

ul.pagination li {
	margin-right: 10px;
	float: left;
	list-style: outside none none;
}

.breadcrumbContainer ul.breadcrumbs, .breadcrumbContainer ul.breadcrumbs li a {
    color: #767676;
}


ul.pagination a
{
	color: #e26c24;
}


.newsItem {
	margin: 8px 0px;
}

.validation-summary-valid {
    display: none;
}

/*footer logo*/
#ftrLogoEconergie {
	display:none;
}
#ftrLogoEnergySmart {
	display:none;
}

/*darken form field borders*/
/*contact us form  and header search box*/

.mainContent .searchInput,.headerWrapper .searchInput{
    border: 1px solid #b1b1b1;
}
/*all other fields*/
/*.mainContent fieldset input[type="text"],.mainContent  fieldset input[type="password"],.mainContent  fieldset input[type="file"],.mainContent  input[type="tel"],.mainContent  input[type="email"],.mainContent  input[type="number"],.mainContent  fieldset select,.mainContent fieldset textarea {
    border: 1px solid #b1b1b1;
}*/

fieldset input[type="text"], fieldset input[type="password"], fieldset input[type="file"], input[type="tel"], input[type="email"], input[type="number"], fieldset select,fieldset textarea {
    border: 1px solid #b1b1b1;
}

				
/* Default buttons are blue for CMS pages. In the WSS site they are orange and larger. */
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	background-color: #5bd1f6;
	border: 1px solid #5bd1f6;
	padding: 6px 15px;
	text-transform: none;
}

/*ADDED NBP*/
/*mobile layout fixes*/
/*@media only screen and (max-width: 480px) {
	.navigationLevel3 p , .navigationLevel3 .navHeader, .navigationLevel3 .navHeader a{	
		text-align: center;
	}

}*/


@media only screen and (min-width: 481px) and (max-width: 1123px) {
p {
    margin-bottom: 0;
}
}


@media only screen and (max-width: 480px) {
	.calloutSection {
		 padding: 15px;
	}
		/*wrap breadcrumbs on mobile*/   
    ul.breadcrumbs li {
      white-space: normal;
      }
}
	
	
	

/*buttons*/

@media only screen and (min-width:481px) and (max-width: 1123px) {
	.mainContentNav .lev2NavButton {
    	padding: 3px;
	}
}

/*table fixes*/
td p {
	font-size:12px;
}

th {
  background-color: #5e6e94; 
}
			
/*mobile tables classes*/
@media only screen and (max-width: 480px) {	
				/*add to parent row to display columns as rows*/
			.mobileRow td {
				display:block;
					padding-left:20px;
			}
}
			

/*SMART HABITS*/
			
@font-face {
    font-family: "whizbangpow";
    font-style: normal;
    font-weight: normal;
    src: url("/media/1267457/whizbangpow.ttf") format("woff"), url("/media/1267457/whizbangpow.ttf") format("truetype");
}

.smartHabits ul, .smartHabits ol {
    margin-left: 25px;
}
			
/*margin fixing classes*/
.marginTop{
	margin-top:20px;
}
			
.marginBottom{
	margin-bottom:20px;
}
				
/*end of margin fixing */


/*CONTENT */
		
.nbpContourForm fieldset > div > div > span:first-child > input {
width:auto !important;
}
				
h2,h3 {
margin-top:20px;
}

h2.titleCallout {
	color:#b84f14;
	border: 0;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px
}

p.footnote {
 color: #767676;
  font-size: 12px;
}
		
.removeTopMargin{ /*hack figure this out*/
	margin-top:0;		
}

/*mix in callout sections within a checkmark list*/
ul.listCheckmarks.small li{
	font-size:14px;
}

ul.listCheckmarks .checkMarkCallout {
	background: none repeat scroll 0 0 #f2f2f2;
    margin-bottom: 10px;
    margin-left: -25px;
    margin-top: 10px;
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0px;
    padding-top: 0;

}

ul.listCheckmarks .checkMarkCallout p{
 	margin-bottom: 20px;
   	padding: 20px;
	margin-left:20px;
}

ul.listCheckmarks .checkMarkCallout .imgContainer, li.callout .imgContainer{
 margin-bottom: 0;
}

li.callout {
	background: none repeat scroll 0 0 #f2f2f2;
    margin-bottom: 10px;
    margin-left: -25px;
    margin-top: 10px;
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-top: 0;
	list-style: outside none none;
}

li.callout p{
 	margin-bottom: 20px;
   	padding: 20px 20px 0;
	
}

#interiorMainContentColumn p {/*hack to override giant margin*/
 /*margin-bottom:15px !important;*/
}

tr.emptyRow{
	background:#ffffff;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%;
	z-index: 998;
} 
		
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

/*lighten color of anchors within accordion contents*/
.accordion .body a {
	/*color:rgb(107, 175, 201);*/
	color:#5bd1f6;
}

/*Megamenu a padding bottom */
/*Commenting out to test permanent fix
#menuTabs .megaMenu a {
    padding: 0 0 10px;
}*/

/*reading your bill*/

#interiorMainContentColumn .billExplainer p {
    margin-bottom: 0 !important;
}

.billExplainer tr td:first-child {
    background:#fff;
}
	
.billExplainer td {
	vertical-align:middle;
	padding:10px;
}

.annotatedBill {
	display:block;
}

.billInserts td{
	vertical-align:middle;
}
		
/*HIGHLIGHT TEXT TO BE TRANSLATED*/

.highlightForTranslation {
	background:#FFF41C;
	color:#10212a;
}

.flagForReview {
	background:#5EFF7A;
	color:#10212a;
}


/*EOF CONTENT*/		

/*HOMEPAGE CAROUSEL //Added NBP*/

.homeCarousel .carousel-caption {
 left: 125px;
 top: 35px;
}
			
.homeCarousel .carousel-caption h1{
 color: #fff;
}

.homeCarousel .carousel-caption h1 .sub{
 color: #fff;
 font-size:20px;
 display:block;
}



/*IMAGES */

.imgResponsive {
	display: block;
    height: auto;
    max-width: 100%;/*keeps images from going wider than original width*/
}

/*We have a alot of images with varying widths that will need to be centered.
Use this class if the image is smaller than the imgContainer width 
and/or smaller than 100% width on mobile*/
.centerBlock { 
	margin:0 auto;
}

/*for floating and sizing responsive images with text wrapping*/
.imgContainer.small {
	width:170px;
}

.imgContainer.extraSmall {
	width:130px;
}

.imgContainer.left {
	margin:0 20px 20px 0;
	clear:left;
}

.imgContainer.right {
	margin:0 0 20px 20px;
	clear:right;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
	.imgContainer, .imgContainer.small, .imgContainer.extraSmall {
	 width:100%;
	}
			
	ul.listCheckmarks .checkMarkCallout .imgContainer.right, 
	ul.listCheckmarks .checkMarkCallout .imgContainer.left,
	li.callout .imgContainer.right,
	li.callout .imgContainer.left
	{
	  margin:20px 0 20px 0;		
	}
	
	table {
			width: 100%;
	}
}

/*EOF IMAGES*/

/*ALERT*/
#saveEnergyAlert {
display:none;
}
.alert{padding:0;}
	
/* EOF ADDED NBP*/
	
@media only screen and (max-width: 480px) {
	.sideNav {
		width: 100%;
	}

	.col h2 {
		 left: 0 !important;
	}
}

/* START - RESPONSIVE GRID CSS */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.col {
	display: block;
	float:left;
	/* //! REVIEW margin: 1% 0 1% 1.6%; */ 
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { 
		margin: 0 0 1px 0%;
	}
}
	
/* GRID OF TWO */
.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}

/* GRID OF THREE */
	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%; 
	}
}

/* GRID OF FOUR */
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}




/* END - RESPONSIVE GRID CSS */
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */