@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Roboto:400,300,600,700);

  #hero {
	vertical-align: middle;
	position: relative;
	width: 100%;
	min-height: 183px;
	max-height: 668px;
	height: 675px;
	background: url("../img/bkgd/cleveland-skyline.jpg") center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	*opacity: 0;
  }
  #hero h1 {
	color: #fff;
	font-size: 56px;
	font-weight: 800;
	text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
	*padding-top: 275px;
  }
  #panels>article.first h1,
  #panels>article.second h1,
  #panels>article.third h1,
  #panels>article.ninth h1,
  #panels>article.tenth h1 {
	font-size: 42px;
	font-weight: 900;
  }
  #hero h1 span,
  #panels>article.first h1 span,
  #panels>article.second h1 span,
  #panels>article.third h1 span,
  #panels>article.ninth h1 span,
  #panels>article.tenth h1 span {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
  }
@media only screen and (min-width: 240px) and (max-width: 319px) {
  #hero h1 {
	font-size: 36px;
	*font-size: 2.625rem;
  }
  #panels>article.first h1,
  #panels>article.second h1,
  #panels>article.third h1,
  #panels>article.ninth h1,
  #panels>article.tenth h1 {
	font-size: 28px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  #hero h1 {
	font-size: 42px;
	*font-size: 1.625rem;
  }
  #panels>article.first h1,
  #panels>article.second h1,
  #panels>article.third h1,
  #panels>article.ninth h1,
  #panels>article.tenth h1 {
	font-size: 36px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 600px) {
  #hero h1 {
	font-size: 48px;
	*font-size: 2.625rem;
  }
  #panels>article.first h1,
  #panels>article.second h1,
  #panels>article.third h1,
  #panels>article.ninth h1,
  #panels>article.tenth h1 {
	font-size: 38px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 768px) {
  #hero h1 {
	font-size: 52px;
	*font-size: 3.125rem;
  }
  #panels>article.first h1,
  #panels>article.second h1,
  #panels>article.third h1,
  #panels>article.ninth h1,
  #panels>article.tenth h1 {
	font-size: 42px;
  }
}
@media only screen and (min-width: 953px) {
  #hero h1 {
	padding-top: 225px;
	font-size: 80px;
  }
}
  #hero .valign {
	height: 668px;
	background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
  }
@media only screen and (min-width: 240px) and (max-width: 320px) {
  #hero,
  #hero .valign {
	height: 220px;
  }
  .valign > div,
  .valign > article,
  .valign > section,
  .valign > figure {
	display: inline-block;
	vertical-align: baseline;
  }
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
  #hero,
  #hero .valign  {
	height: 380px;
  } 
  #hero h1 {
	padding-top: 75px;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  #hero,
  #hero .valign  {
	height: 541px;
  }
  #hero h1 {
	padding-top: 175px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 952px) {
  #hero,
  #hero .valign  {
	height: 668px;
  }
  #hero h1 {
	padding-top: 225px;
  }
}
/*
@media only screen and (max-width: 769px) {
  #hero {
	max-height: 420px;
  }
}
@media only screen and (max-width: 769px) {
  #hero .valign {
	max-height: 240px;
  }
}
*/
  .parallax {
	background-attachment: fixed !important;
  }
  .oldie .parallax,
  .ie9 .parallax {
	background-attachment: static !important;
  }
  .example-grid .parallax {
	width: 100%;
	height: 300px;
	background-image: url("../img/img_parallax_demo.jpg");
  }
@media only screen and (max-width: 769px) {
  #panels>article,
  #panels>article p,
  #panels>article h3 {
	text-align: center;
  }
}
  #panels>article>.container {
	padding-top: 40px;
	padding-bottom: 40px;
  }
  #panels>article .tooltip {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition-property: opacity,bottom,left;
	-moz-transition-property: opacity,bottom,left;
	-o-transition-property: opacity,bottom,left;
	transition-property: opacity,bottom,left;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
  }
  #panels>article .tooltip.active {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }
  #panels>article .tooltip.ie {
	display: none;
  }
  #panels>article.fifth,
  #panels>article.seventh {
	background: #fff;
  }
  #panels>article.first h1,
  #panels>article.fourth h1,
  #panels>article.fourth h2,
  #panels>article.fourth h3,
  #panels>article.sixth h2,
  #panels>article.eighth h2,
  #panels>article.ninth h1,
  #panels>article.ninth h2,
  #panels>article.ninth h3,
  #panels>article.ninth h4 {
	font-family: 'ProximaExtraBold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #ECECEC;
	*color: #ffe21f;
	*font-weight: 800;
	text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
  }
/*
  #panels>article.first .container {
	margin-right:auto;
	margin-left:auto;
	padding-left:15px;
	padding-right:15px;
  }
@media (min-width:768px) {
  #panels>article.first .container {
	width:750px;
  }
}
@media (min-width:992px) {
  #panels>article.first .container {
	width:970px;
  }
}
@media (min-width:1200px) {
  #panels>article.first .container {
	width:1170px;
  }
}
*/
  #panels>article.second h1 {
	color: #000000;
	font-weight: 800;
  }
  #panels>article.third .container {
	background: rgba(0, 0, 32, 0.5) none repeat scroll 0% 0%
  }
  #panels>article.ninth .container {
	background: rgba(32, 0, 0, 0.5) none repeat scroll 0% 0%;
  }
  #panels>article.tenth .container {
	background: rgba(0, 32, 0, 0.5) none repeat scroll 0% 0%;
  }
  #panels>article.third h3,
  #panels>article.third h4,
  #panels>article.tenth h3,
  #panels>article.tenth h4 {
	font-family: 'ProximaExtraBold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #ECECEC;
	*color: #ffffff;
	*font-weight: 800;
	text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
  }
  #panels>article.third h1,
  #panels>article.third h2,
  #panels>article.tenth h1,
  #panels>article.tenth h2 {
	font-family: 'ProximaExtraBold', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #ECECEC;
	*color: #ff851b;
	*font-weight: 800;
	text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
  }
  #panels>article.first .caption {
	*border-bottom: 4px double #4c4c4c;
  }
  #panels>article.third .caption,
  #panels>article.tenth .caption {
	*border-bottom: 4px double #ffffff;
	*text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
  }
  #panels>article.ninth .caption {
	*border-bottom: 4px double #ffff00;
  }
  #panels>article.first p,
  #panels>article.third p,
  #panels>article.fourth p,
  #panels>article.sixth p,
  #panels>article.eighth p,
  #panels>article.ninth p,
  #panels>article.tenth p {
	font-family: "Lato", "Arial Narrow", Arial, Helvetica, sans-serif;
	color: #fff;
	text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b;
  }
  #panels>article.first .about-us {
	color: #939393;
  }
  #panels>article.fifth h2,
  #panels>article.fifth h3,
  #panels>article.seventh h2,
  #panels>article.eleventh h2 {
	color: #c11;
	text-shadow: 0 1px 2px #666666, 0 1px 0 #666666;
  }
  #panels>article.second p {
	color: #000;
  }
  #panels>article.fifth p,
  #panels>article.seventh p,
  #panels>article.eleventh p {
	color: #000;
	text-shadow: 0 1px 2px #999999, 0 1px 0 #999999;
  }
  #panels>article.first {
	background-color: #272727;
  }
  #panels>article.second {
	background-color: #ECECEC;
  }
@media only screen and (max-width: 769px) {
  #panels>article.first {
	background-color: #272727;
  }
  #panels>article.second {
	background-color: #ECECEC;
  }
  #panels>article.first .client,
  #panels>article.second .client {
	width: 130px;
  }
  #panels>article.first .about-us,
  #panels>article.second .about-us {
	text-align: center !important;
  }
}
  #panels>article.third {
	background-image: url("../img/bkgd/blueprint_floorplan13.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color: #336600;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
@media only screen and (max-width: 769px) {
  #panels>article.third {
	*background: url("../img/superio_hero.jpg") no-repeat center center fixed #336600;
	background-image: url("../img/bkgd/blueprint_floorplan13.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-color: #336600;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
  #panels>article.fourth {
	background: url("../img/bkgd/bondletter2.jpg") no-repeat center center fixed #233441;
  }
@media only screen and (max-width: 769px) {
  #panels>article.fourth {
	background: url("../img/bkgd/bondletter2.jpg") no-repeat center center fixed #233441;
  }
}
  #panels>article.fifth {
	background: url("../img/bkgd/ULbanner.png") no-repeat center center fixed #dddede;
  }
@media only screen and (max-width: 769px) {
  #panels>article.fifth {
	background: url("../img/bkgd/ULbanner.png") no-repeat center center fixed #dddede;
  }
}
  #panels>article.sixth {
	background: url("../img/bkgd/NFPAbanner.png") no-repeat center center fixed #c11;
  }
@media only screen and (max-width: 769px) {
  #panels>article.sixth {
	background: url("../img/bkgd/NFPAbanner.png") no-repeat center center fixed #c11;
  }
}
  #panels>article.seventh {
	background: url("../img/bkgd/united-states_map.png") no-repeat center center fixed #dddede;
  }
@media only screen and (max-width: 769px) {
  #panels>article.seventh {
	background: url("../img/bkgd/united-states_map.png") no-repeat center center fixed #dddede;
  }
}
  #panels>article.eighth {
	background: url("../img/bkgd/blueprint_floorplan13.jpg") no-repeat center center fixed #233441;
  }
@media only screen and (max-width: 769px) {
  #panels>article.eighth {
	background: url("../img/bkgd/blueprint_floorplan13.jpg") no-repeat center center fixed #233441;
  }
}
  #panels>article.ninth {
	*background: url("../img/bkgd/firestopping.jpg") no-repeat center center fixed #c11;
	background-image: url("../img/bkgd/firestopping.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color: #c11;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
@media only screen and (max-width: 769px) {
  #panels>article.ninth {
	*background: url("../img/bkgd/firestopping.jpg") no-repeat center center fixed #c11;
	background-image: url("../img/bkgd/firestopping.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-color: #c11;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
  #panels>article.tenth {
	*background: url("../img/bkgd/estimator-example.jpg") no-repeat center center fixed #233441;
	background-image: url("../img/bkgd/estimator-example.jpg");
	background-repeat: repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color: #233441;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
@media only screen and (max-width: 769px) {
  #panels>article.tenth {
	*background: url("../img/bkgd/estimator-example.jpg") no-repeat center center fixed #233441;
	background-image: url("../img/bkgd/estimator-example.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-color: #c11;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
  #panels>article.eleventh {
	background: url("../img/bkgd/kilowatt.jpg") no-repeat center center fixed #dddede;
  }
@media only screen and (max-width: 769px) {
  #panels>article.eleventh {
	background: url("../img/bkgd/kilowatt.jpg") no-repeat center center fixed #dddede;
  }
}
  #panels>article.second>.container,
  #panels>article.third>.container,
  #panels>article.fourth>.container,
  #panels>article.fifth>.container,
  #panels>article.sixth>.container,
  #panels>article.seventh>.container,
  #panels>article.eighth>.container,
  #panels>article.ninth>.container,
  #panels>article.tenth>.container,
  #panels>article.eleventh>.container {
	padding-bottom: 30px;
  }
  #panels>article.second>.container>.row,
  #panels>article.third>.container>.row,
  #panels>article.fourth>.container>.row,
  #panels>article.fifth>.container>.row,
  #panels>article.sixth>.container>.row,
  #panels>article.seventh>.container>.row,
  #panels>article.eighth>.container>.row,
  #panels>article.ninth>.container>.row,
  #panels>article.tenth>.container>.row,
  #panels>article.eleventh>.container>.row {
	min-height: auto;
	padding-bottom: 0;
	position: relative;
  }
@media only screen and (max-width: 769px) {
  #panels>article.second>.container>.row,
  #panels>article.third>.container>.row,
  #panels>article.fourth>.container>.row,
  #panels>article.fifth>.container>.row,
  #panels>article.sixth>.container>.row,
  #panels>article.seventh>.container>.row,
  #panels>article.eighth>.container>.row,
  #panels>article.ninth>.container>.row,
  #panels>article.tenth>.container>.row,
  #panels>article.eleventh>.container>.row {
	min-height: 0;
	padding-bottom: 30px;
  }
}
  #panels>article.second,
  #panels>article.third,
  #panels>article.fourth,
  #panels>article.fifth,
  #panels>article.sixth,
  #panels>article.seventh,
  #panels>article.eighth,
  #panels>article.ninth,
  #panels>article.tenth,
  #panels>article.eleventh {
	overflow: visible;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
@media only screen and (max-width: 769px) {
  #panels>article.second,
  #panels>article.third,
  #panels>article.fourth,
  #panels>article.fifth,
  #panels>article.sixth,
  #panels>article.seventh,
  #panels>article.eighth,
  #panels>article.ninth,
  #panels>article.tenth,
  #panels>article.eleventh {
	overflow: visible;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
@media only screen and (max-width: 500px) {
  #panels>article.second,
  #panels>article.third,
  #panels>article.fourth,
  #panels>article.fifth,
  #panels>article.sixth,
  #panels>article.seventh,
  #panels>article.eighth,
  #panels>article.ninth,
  #panels>article.tenth,
  #panels>article.eleventh {
	overflow: visible;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
@media only screen and (max-width: 320px) {
  #panels>article.second,
  #panels>article.third,
  #panels>article.fourth,
  #panels>article.fifth,
  #panels>article.sixth,
  #panels>article.seventh,
  #panels>article.eighth,
  #panels>article.ninth,
  #panels>article.tenth,
  #panels>article.eleventh {
	overflow: visible;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
@media only screen and (max-width: 240px) {
  #panels>article.second,
  #panels>article.third,
  #panels>article.fourth,
  #panels>article.fifth,
  #panels>article.sixth,
  #panels>article.seventh,
  #panels>article.eighth,
  #panels>article.ninth,
  #panels>article.tenth,
  #panels>article.eleventh {
	overflow: visible;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
}
  * {
	margin: 0;
	padding: 0;
  }
  #staff,
  #client {
	min-height: 33%;
	width: 80%;
	margin: 0 auto;
	background: #e3e3e3;
	color: black;
	padding: 10px;
	position: absolute;
	top: 20%;
	left: 10%;
	z-index: 1000;
	display: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
  }
  #mask,
  #mask1 {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 500;
	width: 100%;
	height: 100%;
	display: none;
  }
  #staff:target,
  #staff:target + #mask,
  #client:target,
  #client:target + #mask1 {
	display: inline;
	opacity: 1;
  }
  #open-overlay {
	display: relative;
  }
  .image.small {
	width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
  }
  .image.small.circle {
	border: 10px solid #ECECEC;
	box-shadow: 0px 1px 2px #191A1B, 0px 1px 0px #191A1B;
	background: #ffffff;
  }
  .client {
	*border-radius: 5px;
	*padding: 5px;
	*background: #ECECEC;
  }
  #panels>article.ninth .image.small.circle:hover {
	*border: 10px solid #ff851b;
	transition: all 0.2s ease-in-out 0s;
  }
  .image.small.circle:hover {
	*border: 10px solid #ffe21f;
	transition: all 0.2s ease-in-out 0s;
  }
  .focus-box:nth-child(4n+1) .image.small.circle:hover {
	border: 10px solid #e96656;
  }
  .focus-box:nth-child(4n+2) .image.small.circle:hover{
	border: 10px solid #34d293;
  }
  .focus-box:nth-child(4n+3) .image.small.circle:hover {
	border: 10px solid #3ab0e2;
  }
  .focus-box:nth-child(4n+4) .image.small.circle:hover {
	border: 10px solid #f7d861;
  }
  .focus-box:nth-child(4n+1) .red-border-bottom:before {
	background: #e96656;
  }
  .focus-box:nth-child(4n+2) .red-border-bottom:before {
	background: #34d293;
  }
  .focus-box:nth-child(4n+3) .red-border-bottom:before {
	background: #3ab0e2;
  }
  .focus-box:nth-child(4n+4) .red-border-bottom:before {
	background: #f7d861;
  }
  .focus-box h2 {
	color: #404040;
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	margin-top: 0px;
	margin-bottom: 20px;
	*font-weight: bold;
	font-size: 20px;
	float: none;
    width: auto;
    background: none;
  }
  .image.small.circle:active {
	border: 10px solid #a32c2c;
	transition: all 0.2s ease-in-out 0s;
  }
  .overlay {
	position: relative;
  }
  .overlay:before {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 0;
  }
  .overlay:hover:before {
	display: block;
	transition: all 0.2s ease-in-out 0s;
  }
  .red:before {
	background-color: rgba(255, 0, 0, 0.5);
  }
  .blue:before {
	background-color: rgba(0, 0, 255, 0.5);
  }
  .green:before {
	background-color: rgba(0, 255, 0, 0.5);
  }
  .orange:before {
	background-color: rgba(255, 153, 0, 0.5);
  }
  .gray:before {
	background-color: rgba(85, 85, 85, 0.5);
  }
  .skiplink.basic:hover {
	border-bottom: none;
  }
  .skiplink.basic [class^="icon-"],
  .skiplink.basic [class*=" icon-"] {
	position: relative;
	bottom: -1.481em;
	font-size: 3rem;
	color: #fff;
	-webkit-transition: bottom 0.3s;
	-moz-transition: bottom 0.3s;
	transition: bottom 0.3s;
	text-shadow: 0px 1px 2px #191A1B, 0px 1px 0px #191A1B;
  }
  .skiplink.basic:hover [class^="icon-"],
  .skiplink.basic:hover [class*=" icon-"] {
	bottom: -1.389em;
  }
  .skiplink {
	background: none;
	display: none;
  }
@media screen and (min-width: 53.75em) {
  .skiplink {
	display: block;
  }
}
  .clear.lead {
	margin-top: 12px;
	margin-bottom: 12px;
	border-bottom: 1px dotted rgba(227, 227, 227, 277);
  }