html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.spec-hdr {
	background-color: #003a70 !important;
	padding: 12px 0px;
	text-align: center;
}
.spec-hdr > h1 {
	color: #ffffff;
	font-size: 36px;
	display: inline-block;
	margin: 0px;
}
.spec-hdr > h2 {
	color: #b4daef;
	font-size: 22px;
	display: inline-block;
	margin: 0px;
}

@media

#portal br { display: none; }

li.blue {
  margin-left: 160px !important;
  color: #003a70 !important;
  font-weight: normal !important;
        font-size: 19px !important;
        line-height: 28px !important;
        margin-bottom: 5px !important;
}
li.blue:hover {
  color: #666666 !important;
}
.tempimage {
  width: 1168px !important;
  margin-left: -14px !important;
  margin-top: -42px !important;
}
h1.contentheader {
  text-align: center !important;
  font-weight: 900 !important;
  color: #000000 !important;
  font-family: 'Open Sans Condensed', 'Open Sans', Arial, sans-serif !important;
  font-size: 36px !important;
        margin-top: 35px !important;
        margin-bottom: 35px !important;
}

/*
h2.sub {
  font-size: 28px !important;
  background-color: #003a70 !important;
  font-family: 'Open Sans Condensed', 'Open Sans', Arial, sans-serif !important;
  font-weight: 400 !important;
  /*width: 1168px !important;
  margin-left: -14px !important;
  margin-top: -32px !important;*/
  padding-top: 2px !important;
  padding-bottom: 23px !important;
  padding-left: 0px !important;
text-align: center !important; 
color: #b4daef;
}
*/
p.comappscontent {
  width: 850px !important;
  padding: 5px !important;
  margin: 0 auto !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
        font-weight: 300 !important;
  font-style: italic !important;
  font-size: 19px !important;
  line-height: 28px !important;
  text-align: justify !important;
  margin-top: 10px !important;
        margin-bottom: 10px !important;
}
.dropcapblue {
        font-size: 42px !important;
        font-weight: 700 !important;
        color: #276d9f !important; 
}
.page-title {
  color: #ffffff !important;
  background-color: #003a70 !important;
  margin-left: -14px !important;
  padding-left: 0px !important;
  width: 1168px !important;
  margin-top: -32px !important;
  padding-top: 10px !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-family: 'Open Sans Condensed', 'Open Sans', Arial, sans-serif !important;
        text-align: center !important;
  font-size: 38px !important;
}
 /*#interactivewrapper {
  width: 1168px;
 margin: 0 auto;
}*/
#featuredapplicationsarea {
  position: relative;
  background-color: #9cca63;
  width: 1060px;
  height: 100px;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 20px 20px 0px 0px;
  z-index: 3;
}
#featuredappdivline {
	position: relative;
	width: 100%;
	height: 2px;
	background-color: #000000;
	margin-top: 0px;
	/*margin-left: -14px; */
}
#featuredapplicationsdescarea {
	position: relative;
	background-color: #b5daee;
	width: 1060px;
	/*height: 260px;*/
	margin: 0 auto;
	margin-top: 0px;
	border-radius: 0px 0px 20px 20px;
	z-index: 3;
	/*margin-left: 40px;*/
	margin-bottom: 30px;
	padding: 30px;
}
#featuredapplicationsdescarea h1 {
  margin: 0px;
  /*padding-top: 30px;*/
  padding-left: 0px;
  color: #003a70;
  /*font: bold 25px "Open Sans";*/
  font-weight: bold;
  font-size: 25px;
}
#featuredapplicationsdescarea p {
  margin: auto;
  margin-top: 10px;
  width: 800px;
  /*margin-left: 130px;*/
  color: #6c6c6c;
  /*font: 24px/29px "Open Sans Condensed";*/
  font-size: 18px;
  font-weight: 300;
}
#feat-no-selection {
  
}
#portal {
	position: relative;
	/*width: 1168px;*/
	height: 520px;
	margin-bottom: 0px;
	z-index: 1;
	margin-top: -16px;
}
#commercialportal {
  display: block;
  position: relative;
  width: 33.33%; /* 389px; */
  height: 520px;
  z-index: 1;
  float: left;
  background-image: url(/wp-content/specpanels/saimages/commercialportal.jpg);
  /*margin-left: -14px;*/
}
#multifamilyportal {
  display: block;
  position: relative;
  width: 33.34%; /* 390px; */
  height: 520px;
  z-index: 1;
  float: left;
  background-image: url(/wp-content/specpanels/saimages/multifamilyportal.jpg);
  margin-top: -40px;
}
#singlefamilyportal {
	display: block;
	position: relative;
	width: 33.33%; /*389px;*/
	height: 520px;
	z-index: 1;
	float: left;
	background-image: url(/wp-content/specpanels/saimages/singlefamilyportal.jpg);
	background-position: right;
	margin-top: -80px
}

.centertxt {
  text-align: center;
}
.redlink {
  color: #003a70;
  font: 18px "Open Sans";
}
.redlink a {
  color: #003a70;
  text-decoration: none;
}
.redlink a:hover {
        color: #cf0a2c;
  text-decoration: underline;
}


#commercialportalheader, #multifamilyportalheader, #singlefamilyportalheader {
  position: relative;
  background-color: #9cca63;
  width: 305px;
  height: 70px;
  margin-left: 54px;
  margin: 450px auto 0 auto;
  border-radius: 20px 20px 0px 0px;
  z-index: 3;
}

#commercialportalheader h3, #multifamilyportalheader h3, #singlefamilyportalheader h3 {
  /*font: 16px "Open Sans";*/
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  text-transform: uppercase;
  color: #ffffff;
  padding-top: 11px;
  margin-bottom: 0px;
  text-align: center;
}
#commercialportalheader h4, #multifamilyportalheader h4, #singlefamilyportalheader h4 {
  /*font: 17px "Open Sans Condensed";*/
  font-size: 14px;
  line-height: 19px;
  color: #6b6b6b;
  text-align: center;
  margin-top: 6px;
}

#commercialportalheader h4:hover, #multifamilyportalheader h4:hover, #singlefamilyportalheader h4:hover  {
  color: #cf0a2c;
}

@media screen and (max-width: 1200px) {
	.page-title {width: 958px !important; font-size: 34px !important;}
	.sub {width: 958px !important;}
	h2.sub {width: 958px !important; font-size: 26px !important;}
	#commercialportal { /* width: 319px !important;  */ height: 427px !important; background-size: cover; }
	#multifamilyportal { /* width: 320px !important; */ height: 427px !important; background-size: cover; }
	#singlefamilyportal { /* width: 319px !important; */ height: 427px !important; background-size: cover; }
	#commercialportalheader { width: 250px !important; margin-top: 357px !important; }
	#multifamilyportalheader { width: 290px !important; margin-top: 357px !important; margin-left: 15px; }
	#singlefamilyportalheader { width: 250px !important; margin-top: 357px !important; margin-left: 20px; }
	#singlefamilyportalheader h3, #multifamilyportalheader h3, #commercialportalheader h3 { font-size: 13px; }
	#featuredappdivline { width: 100% !important; margin-top: -93px !important; }
	#featuredapplicationsdescarea { width: 856px !important; height: 325px !important; }
	#featuredapplicationsdescarea h1 { padding-left: 0px !important; }
	#featuredapplicationsdescarea p { width: 600px !important; }
	.redlink { font-size: 14px; }
	.spec-hdr > h1 { font-size: 28px; line-height: 32px; }
	.spec-hdr > h2 { font-size: 20px; line-height: 24px; }	
}

@media screen and (max-width: 1000px) {
	.page-title {width: 748px !important; font-size: 33px !important; text-align: left !important; padding-left: 30px !important;}
	h2.sub {width: 748px !important; font-size: 24px !important; padding-top: 10px !important; padding-bottom: 15px !important; text-align: left !important; padding-left: 30px !important; padding-right: 30px !important;}
	h1.contentheader {font-size: 40px !important;}
	p.comappscontent {width: 600px !important;}
	#interactivewrapper {width: 100% !important;}
	#portal { width: 100% !important; }
	#commercialportal, #multifamilyportal, #singlefamilyportal { margin-top: 0px; }
	#commercialportal {width: 100% !important; height: 600px !important; background-size: cover !important;}
	#commercialportalheader {width: 100% !important; border-radius: 0px 0px 0px 0px !important; margin-left: 0px !important; margin-top: 530px !important;}
	#commercialportalheader h3, h4 { font-size: 18px !important; }
	#multifamilyportal {width: 100% !important; height: 600px !important; background-size: cover !important; margin-left: 0 !important;}
	#multifamilyportalheader {width: 100% !important; border-radius: 0px 0px 0px 0px !important; margin-left: 0px !important; margin-top: 530px !important;}
	#multifamilyportalheader h3, h4 { font-size: 18px !important; }
	#singlefamilyportal {width: 100% !important; height: 600px !important; background-size: cover !important; margin-left: 0 !important;}
	#singlefamilyportalheader {width: 100% !important; border-radius: 0px 0px 0px 0px !important; margin-left: 0px !important; margin-top: 530px !important;}
	#singlefamilyportalheader h3, h4 { font-size: 18px !important; }
	#featuredapplicationsdescarea { width: 100% !important; margin-top: 1375px !important;  background-color: #fff !important; margin-left: 0 !important;}
	#featuredapplicationsdescarea h1 { padding-left: 30px !important; text-align: left !important; margin-top: -90px !important; }
	#featuredapplicationsdescarea p { padding-left: 30px !important; width: auto !important; text-align: left !important; margin-left: 0px !important;}
	#featuredappdivline { display: none !important; }
	.spec-hdr > h1 { font-size: 22px; line-height: 26px; }
	.spec-hdr > h2 { font-size: 14px; line-height: 18px; }
}

@media screen and (max-width: 768px) {
	#interactivewrapper {width: 100% !important;}
	.page-title {width: 100% !important; padding-right: 40px !important; margin-left:-15px !important;}
	h2.sub {width: 100% !important; padding-right: 40px !important; margin-left: -15px !important;}
	#multifamilyinteractive {width: 100% !important; height: 0px !important; padding-top: 50% !important; background-size: contain !important; margin-left: 0 !important;}
	#featuredapplicationsarea {width: 100% !important;}
	h1.contentheader {width: 100% !important;}
	#commercialportal { width: 100% !important; height: 103% !important; background-size: cover !important; position: relative !important; z-index: 200; } 
	#commercialportalheader { width: 100% !important; position: relative !important; z-index: 999; }
	#multifamilyportal { width: 100% !important; height: 103% !important; background-size: cover !important; position: relative !important; z-index: 200; margin-top: 65px !important; }
	#multifamilyportalheader { width: 100% !important; position: relative !important; z-index: 999; }
	#singlefamilyportal { width: 100% !important; height: 103% !important; background-size: cover !important; position: relative !important; z-index: 200; margin-top: 65px !important; }
	#singlefamilyportalheader { width: 100% !important; position: relative !important; z-index: 999; }
	#featuredapplicationsdescarea { width: 100% !important; margin-bottom: 150px !important; }
	#featuredapplicationsdescarea h1 { padding: 0px !important; padding-left: 10% !important; padding-right: 10% !important; margin: 0px !important; margin-top: -50px !important; font-size: 28px !important; width: 100% !important; }
	#featuredapplicationsdescarea p { padding-left: 10% !important; padding-right: 10% !important; width: 100% !important;}
	#featuredappdivline { display: none !important; }
	.redlink { font-size: 15px !important; }	
}