/*/General/*/
html {
width: 100%;
}
body
{
height: 100%;
width: 100%;
font-family: "Roboto Slab", Sans-Serif;
color: #333;
margin: 0;
padding: 0;
background-color: #fff;
overflow:hidden;
}
#wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
article {
height: 100%;
width: 100%;
}
section {
width: 100%;
z-index: 0;
}
h1 {
font-family: "Roboto Slab", Sans-Serif;
font-size: 30px;
color: #fff;
font-weight: 700;
}
h2 {
font-family: "Roboto Slab", Sans-Serif;
font-size: 28px;
color: #313131;
font-weight: 700;
text-align: left;
}
h3{
font-size: 22px;
font-weight: 700;
margin-bottom: 3px;
}
p{
font-family: 'Roboto', Sans-serif;
font-size: 16px;
font-weight: 300;
text-align: left;
line-height: 25px;
}
a > img {
border: none;
}
/*#####NAV#####*/
.topNavLinksMobile{
display: none;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
}
.navContentCont{
position: relative;
width: 100%;
height: 70px;
margin-left: auto;
margin-right: auto;
display: block;
}
.topNav {
position: fixed;
top: -80px;
height: 70px;
width: 100%;
z-index: 9999999;
font-family: 'Roboto', Sans-serif;
font-weight: 300;
background-color: #fff;
border-bottom: 1px solid #f3f3f3;
opacity: 0.7;
}
.heroNav{
position: absolute;
top: 10px;
height: 70px;
width: 100%;
z-index: 9999999;
font-family: 'Roboto', Sans-serif;
font-weight: 300;
color: #fff!important;
opacity: 1;
}
#topNavContainer {
position: relative;
height: 100%;
width: 75%;
margin-left: 50%;
left: -37.5%;
margin-right: auto;
display: block;
}
.logo {
position: absolute;
left: 8%;
width: 67px;
height: auto;
margin-top: 22px;
}
.topNavLinks{
padding: 0px;
margin: 0px;
position: absolute;
right: 3%;
font-size: 9px;
line-height: 72px;
top: 0px;
}
#white {
color: #fff;
}
.topNavLink{
margin-left: 15px;
text-align: right;
color: #545454;
text-decoration: none;
font-size: 9px;
opacity: 1;
-webkit-transition: 1000ms;
transition: 1000ms;
}
.topNavLink:hover{
opacity: 0.7;
}
.topNavLinkCurrentPage{
margin-left: 15px;
text-align: right;
font-weight: 700;
color: #545454;
font-size: 9px;
text-decoration: none;
}
.topNavResponsiveButton{
display: none;
}
.topNavResponsiveButtonCont{
display: none;
}
.fixCont650{
display: none;
}
@media(max-width: 1250px) {
.navContentCont{
position: relative;
width: 791px;
height: 70px;
margin-left: auto;
margin-right: auto;
display: block;
}
.logo {
position: absolute;
left: 0px;
width: 67px;
height: auto;
margin-top: 22px;
}
.topNavLinks{
padding: 0px;
margin: 0px;
position: absolute;
right: 0px;
font-size: 9px;
line-height: 72px;
top: 0px;
}
}
/*/Hero Module/*/
.heroSection {
height: 100%;
background-position:50% 50%;
background-repeat: no-repeat;
z-index: 9;
position: relative;
display: table;
}
.centerModCont{
position: relative;
display: block;
width: 36px;
top: 28px;
margin-right: auto;
margin-left: auto;
}
.centerModSelected{
position: relative;
display: inline-block;
width: 6px;
height: 6px;
background: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.centerModUnselected{
position: relative;
display: inline-block;
width: 4px;
height: 4px;
background: transparent;
border: 0.5px solid white;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.centerModUnselected:hover{
cursor: default;
}
.centerModSelected:hover{
cursor: default;
}
#hwh {
background-image: url('../img/home/v2/how-we-help/how-we-help-bg.jpg');
background-size: cover;
}
#index {
background-image: url('../img/home/v2/heroBackground-building7.jpg');
background-size: cover;
}
#jobs {
background-image: url('../img/home/v2/heroBackground-jobs.png');
background-size: cover;
}
#about {
background-image: url('../img/home/v2/about/aboutBgOrientation3.jpg');
background-size: cover;
}
#heroSectionJobs {
background-image: url('../img/home/v2/jobs.png');
height: 100%;
background-position:50% 50%;
background-size: 100%;
z-index: 9;
position: relative;
}
#heroCenterModuleContVerticalAlign{
position: relative;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.heroCenterModuleContHorizontalAlign{
width: 850px;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}
#center1{
position: absolute;
display: block;
width: 850px;
top: -100px;
left: 0px;
}
#center2{
left: -100%;
opacity: 0;
position: absolute;
display: block;
width: 850px;
top: -100px;
}
#center3{
left: -100%;
opacity: 0;
position: absolute;
display: block;
width: 850px;
top: -100px;
}
#center4{
left: -100%;
opacity: 0;
position: absolute;
display: block;
width: 850px;
top: -100px;
}
#heroDocs {
position: relative;
margin: 0 auto -50px auto;
display: block;
width: 300px;
height: auto;
}
#heroH1 {
position: relative;
margin: 0px;
margin-left: -3px;
margin-top: 0px;
text-align: center;
z-index: 9;
}
#heroCopy {
position: relative;
margin: 0px;
display: block;
font-family: 'Roboto', Sans-serif;
font-size: 17px;
line-height: 26px;
font-weight: 300;
color: #fff;
text-align: center;
margin-top: 7px;
z-index: 9;
}
.heroDataArt {
position: absolute;
width: 100%;
bottom: 0px;
}
.heroButton{
position: relative;
border: 1px solid white;
box-shadow: none;
background-color: rgba(0,0,0,0);
background-color: transparent;
padding: 12px 30px 12px 30px;
color: #fff;
text-transform: uppercase;
margin-top: 12px;
font-family: 'Roboto', Sans-serif;
font-weight: 300;
opacity: 1.0;
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition: 1000ms;
transition: 1000ms;
}
.heroButton:hover{
cursor: pointer; cursor: hand;
opacity: 0.7;
}
.heroButton:focus {
outline-color: transparent;
outline-style: none;
}
#logoBanner{
position: absolute;
width: 791px;
margin-left: 50%;
left: -391.5px;
bottom: 30px;
}
.homeLogo{
width: 137px;
display: inline-block;
margin-right: 40px;
}
.homeLogoLarge{
width: 80px;
display: inline-block;
margin-right: 40px;
}
.homeLogoImg{
position: relative;
width: 100%;
opacity: 0.5;
-webkit-transition: 500ms;
transition: 500ms;
}
.thin{
margin-bottom: -11px;
}
#vertCent{
margin-bottom: -9px;
}
.homeLogoImg:hover{
cursor: pointer; cursor: hand;
opacity: 1;
opacity: 0.9;
}
/*/Fixed Documents Background/*/
#scrollFixed{
position: fixed;
bottom: 0px;
height: 100%;
z-index: 0;
background-color: #fff;
}
#scrollFixedBgCover{
position: absolute;
height: 100%;
width: 100%;
bottom: 0px;
display: block;
opacity: 1;
background-color: #fff;
}
#scrollFixedBgCover2{
position: absolute;
height: 100%;
width: 100%;
bottom: 0px;
display: block;
opacity: 0;
background-color: #fff;
}
#scrollFixedBgScale{
position: absolute;
height: 100%;
width: 100%;
bottom: 0px;
display: block;
opacity: 1;
}
#scrollFixedBgStart{
position: absolute;
height: 100%;
width: auto;
bottom: 0px;
display: block;
opacity: 1;
}
#scrollFixedBg2{
position: absolute;
width: auto;
height: 100%;
bottom: 0px;
}
#dataCanvasCont{
position: relative;
width: 791px;
margin-bottom: 80px;
margin-top: 60px;
}
#dataCanvas{
position: relative;
width: 100%;
bottom: 0px;
height: 300px;
}
.cityName{
font-size: 16px;
}
#dataCanvasAxis{
width: 100%;
}
#dataNav {
position: absolute;
width: 100%;
height: 100px;
top: 0px;
background-color: #f6f6f6;
-moz-box-shadow: 1px 1px 1px 0px #e2e2e2;
-webkit-box-shadow: 1px 1px 1px 0px #e2e2e2;
box-shadow: 1px 1px 1px 0px #e2e2e2;
}
#dataTitle{
position: absolute;
width: 791px;
margin-left: 50%;
left: -395.5px;
color: #333333;
font-family: "Roboto Slab";
font-size: 24px;
font-weight: 700;
text-align: left;
line-height: 100px;
margin-top: 0px;
margin-bottom: 0px;
}
/*/Deliverables/*/
.graphCont{
position: relative;
top: 35px;
}
.deliverableCont{
width: 100%;
height: 350px;
position: relative;
display: block;
}
#dataClick{
position: absolute;
left: 0px;
top: 135px;
width: 145px;
}
#dataDeskBlue{
position: absolute;
width: 500px;
left: -250px;
margin-left: 50%;
bottom: 0px;
opacity: 0;
}
#dataDesk{
position: absolute;
width: 500px;
left: -250px;
margin-left: 50%;
bottom: 0px;
}
#dataTabBlue{
position: absolute;
width: 150px;
left: 160px;
bottom: -15px;
opacity: 0;
}
#dataTab{
position: absolute;
width: 150px;
left: 160px;
bottom: -15px;
}
#dataLapBlue{
position: absolute;
width: 300px;
right: 0px;
bottom: 0px;
opacity: 0;
}
#dataLap{
position: absolute;
width: 300px;
right: 0px;
bottom: 0px;
}
/*/Classes/*/
.sectionCont{
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 791px;
}
.nonHomeSection{
position: relative;
background-color: #fff;
z-index: 9;
}
.inlineLink{
color: #000;
}
/*/Space between Quote and "peek at our data"/*/
#mod1SectionSpecial{
margin-top: 300px;
}
#IELink{
display: none;
}
/*/Module 1/*/
#module1 {
position: relative;
z-index: 9;
padding-top: 50px;
}
#module1Padder{
position: relative;
z-index: 9;
padding-top: 50px;
padding-bottom: 80px;
}
#module1About {
position: relative;
z-index: 9;
padding-top: 80px;
padding-bottom: 80px;
}
#mod1SectionIcon {
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 145px;
padding: 120px 0 75px 0;
}
.doubleCont0{
position: relative;
margin: 40px auto 0 auto;
width: 100%;
height: 215px;
display: block;
}
.pRight{
position: absolute;
left: 0px;
text-align: left;
width: 48%;
margin-top: 0px;
}
.pLeft{
position: absolute;
right: 0px;
text-align: right;
width: 48%;
margin-top: 0px;
}
.pSmall{
width: 40%;
}
.iRight{
position: absolute;
left: 37px;
top: 15px;
width: 43%;
height: auto;
}
.iRightC{
position: absolute;
left: 110px;
top: 15px;
width: 18%;
height: auto;
}
.iLeft{
position: absolute;
right: 37px;
top: 15px;
width: 43%;
height: auto;
}
.iLeftC{
position: absolute;
right: 110px;
top: 15px;
width: 18%;
height: auto;
}
.h3Left{
text-align: right;
}
/*/Module2/*/
#module2FooterExtend{
border-top: 0px;
z-index: 9;
position: relative;
margin-bottom: 0px;
padding-bottom: 80px;
}
.center{
text-align:center;
}
#mod2SectionIcon {
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 145px;
padding: 75px 0 0 0;
}
.centerQuoteCont{
position: relative;
margin: 0 auto 0 auto;
width: 791px;
padding-top: 25%;
font-size: 36px;
font-weight: 700;
}
.centerQuoteText{
text-align: center;
width: 90%;
margin: 0 auto 0 auto;
display: block;
position: relative;
}
.quotePic{
position: relative;
margin-top: 25px;
width: 250px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
/*/Module3/*/
#module3{
height: 900px;
position: relative;
margin-top: 0px;
margin-bottom: 400px;
z-index: 8;
-moz-box-shadow: 1px 1px 1px 0px #000;
-webkit-box-shadow: 1px 1px 1px 0px #000;
box-shadow: 1px 1px 1px 0px #000;
}
.mobileDeliverableCont{
display: none;
}
.mobileBg{
width: 100%;
position: absolute;
z-index: 0;
opacity: 0.4;
display: none;
}
/*/Footer/*/
.blackFix{
position: absolute;
background-color: #fff;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
#footer{
position: relative;
width: 100%;
height: 400px;
top: 0px;
background-color: #262a2c;
z-index: 999999;
}
.footerLogo{
position: absolute;
left: 0px;
width: 73px;
height: auto;
margin-top: 25px;
opacity: 0.5;
}
.socialCont{
position: absolute;
right: 0px;
}
.socialButton{
position: relative;
width: 26px;
display: inline-block;
right: 0px;
margin-top: 29px;
margin-left: 10px;
opacity: 0.5;
-webkit-transition: 500ms;
transition: 500ms;
}
.socialButton:hover{
opacity: 0.8;
}
#footerBackground{
position: absolute;
width: 100%;
bottom: -15px;
}
#footerContent{
position: absolute;
height: 80px;
bottom: 0px;
width: 100%;
border-top: 1px solid #969695;
}
#footerContentCont{
width: 791px;
display: block;
position: relative;
margin: 0 auto 0 auto;
}
.footerHead{
position: absolute;
width: 791px;
margin-left: 50%;
left: -395.5px;
color: #fff;
bottom: 180px;
opacity: 0.5;
font-size: 34px;
}
.footerButton {
position: absolute;
height: 35px;
line-height: 35px;
border: 1px solid #fff;
font-family: 'Roboto', Sans-serif;
font-weight:300;
font-size: 10px;
font-weight: 700;
color: #fff;
background-color: transparent;
text-transform: uppercase;
text-decoration: none;
padding: 0px 20px 0px 20px;
display: block;
bottom: 84px;
left: 0px;
opacity: 0.5;
-webkit-transition: 500ms;
transition: 500ms;
}
.footerButton:hover{
cursor: pointer; cursor: hand;
opacity: 0.8;
}
/*/D3/*/
svg {
position: absolute;
color: #fff;
top: -4px;
}
.circleCont {
top: 325px;
/*/Add 45px of padding so circles fit within viewport and then add negative margin so viewport still aligns with axis/*/
padding-left: 45px;
margin-left: -45px;
width: 900px;
}
.circleTest{
top: 500px;
}
.focusData {
font-size: 7px;
font-weight: 700;
font-family: 'Roboto', Sans-serif, Sans-Serif;
}
.appear{
display: block;
}
.disappear{
display: none;
}
.focusCircle {
opacity: 0.2;
position: absolute;
top: 0px;
}
.circlePosition {
opacity: 0.2;
}
.centerText {
position: absolute;
width: 100%;
font-family: 'Raleway';
font-size: 14px;
font-weight: 200;
letter-spacing: 6px;
color: #fff;
text-align: center;
top: 625px;
opacity: 0.8;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.centerText:hover {
cursor: pointer; cursor: hand;
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: #fff;
stroke-weight: 0.5px;
shape-rendering: crispEdges;
}
.axis--y path {
display: none;
}
.citiesPoly {
fill: #fff;
}
.cities {
fill: none;
stroke: #22272b;
stroke-width: 0.5px;
opacity: 0.5;
}
.city--hover {
stroke: #22272b;
opacity: 0.2;
stroke-width: 1;
}
.focus {
font-family: 'Raleway';
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
color: #fff;
}
.voronoi path {
fill: none;
pointer-events: all;
}
.voronoi--show path {
stroke: red;
stroke-opacity: .2;
}
#form {
position: absolute;
bottom: 0px;
right: 30px;
display: none;
}
/*/End D3 /*/
/*/HWH/*/
#module1Special{
position: relative;
z-index: 9;
padding-top: 50px;
padding-bottom: 150px;
margin-bottom: 0px;
}
.circleImg {
width: 150px;
position: absolute;
left: 0px;
display: block;
}
.hwhText {
width: 791px;
margin-top: 60px;
position: relative;
display: block;
height: 190px;
}
.hwhCopy{
width: 73%;
right: 0px;
position: absolute;
margin-top: 35px;
}
.hwhH3{
position: absolute;
width: 73%;
right: 0px;
margin-top: 0px;
}
/*/About/*/
.cleantechAboutLink{
width: 250px;
position: relative;
height: auto;
margin: 0 auto 0 auto;
display: block;
-webkit-transition: 500ms;
transition: 500ms;
opacity: 1;
}
.cleantechAboutLink:hover{
opacity: 0.8;
cursor: pointer; cursor: hand;
}
.cleantechAbout{
width: 100%;
position: relative;
display: block;
}
#aboutMapSection{
position: relative;
background-image: url("../img/home/v2/about/sunitSubHero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
width: 100%;
height: 350px;
padding-top: 80px;
padding-bottom: 80px;
}
.aboutMapText{
position: relative;
width: 55%;
margin: 0 auto 0 auto;
display: block;
text-align: center;
line-height: 38px;
margin-top: 105px;
padding: 0px;
font-size: 22px;
z-index: -9;
color: #fff;
}
.aboutButton {
position: relative;
width: 80px;
height: 40px;
line-height: 40px;
border: 2px solid #fff;
font-family: 'Roboto', Sans-serif;
font-size: 10px;
font-weight: 700;
color: #fff;
text-decoration: none;
padding: 0px 40px 0px 40px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 187px;
}
/*/Jobs/*/
#jobsMapSection{
position: relative;
background-image: url("../img/home/v2/jobs/jobsMap.jpg");
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
width: 100%;
height: 350px;
padding-top: 80px;
padding-bottom: 80px;
}
.jobsMap{
position: relative;
width: 100%;
}
.jobsMapText{
position: absolute;
width: 100%;
text-align: center;
line-height: 400px;
top: 0px;
padding: 0px;
font-size: 30px;
z-index: -9;
}
.jobsContentCont{
position: relative;
width: 791px;
display: block;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
.mapButton {
position: relative;
width: 80px;
height: 40px;
line-height: 40px;
border: 2px solid #07b4e2;
font-family: 'Roboto', Sans-serif;
font-size: 10px;
font-weight: 700;
color: #07b4e2;
text-decoration: none;
padding: 0px 35px 0px 45px;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 187px;
}
#accordian {
background: #fff;
width: 100%;
margin: 20px auto 0 auto;
padding-bottom: 100px;
color: white;
}
#accordian button {
font-family: "Roboto Slab";
font-size: 18px;
font-weight: 700;
color: #fff;
height: 62px;
cursor: pointer;
line-height:13px;
padding-left: 35px;
padding-top: 45px;
padding-bottom: 45px;
margin: 0px;
background: #07b4e2;
opacity: 1;
border: none;
width: 100%;
-webkit-transition: 1000ms;
transition: 1000ms;
z-index: 9;
}
#accordian button:hover{
opacity: 0.7;
}
button:focus {
outline:0 !important;
}
.accordianTextCont{
position: relative;
width: 100%;
display: block;
margin-top: -13px;
z-index: 0;
pointer-events: none;
}
.accordianHeader{
position: relative;
display: block;
text-align: left;
pointer-events: none;
}
h5{
font-size: 16px;
color: #000;
padding-left: 30px;
margin-bottom: 10px;
}
#accordian p{
color: #000;
font-size: 12px;
padding-left: 30px;
padding-right: 30px;
line-height: 20px;
}
.accordianSubHead{
font-family: 'Roboto', Sans-serif;
font-size: 8px;
font-weight: 300;
position: relative;
left: 0px;
display: block;
text-align: left;
margin-top: 9px;
pointer-events: none;
}
/*list items*/
#accordian li {
margin-top: 1px;
}
.accordianBr{
line-height: 1px;
}
#accordian ul{
padding: 0px;
background-color: #f8f8f8;
width: 100%;
cursor: pointer;
}
.jobsBullet{
font-family: 'Roboto', Sans-serif;
list-style-type: disc;
color: #000;
font-size: 12px;
padding-left: 0px;
margin-left: 45px;
padding-right: 30px;
margin-top: -40px;
line-height: 20px;
font-weight: 300;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
padding: 0px;
margin: 0px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
@media(max-width: 950px) {
p {
font-size: 15px;
}
h3 {
font-size: 20px;
}
.heroCenterModuleContHorizontalAlign{
width: 700px;
}
.centerModCont{
top: 28px;
}
#center1{
width: 700px;
}
#center2{
width: 700px;
}
#center3{
width: 700px;
}
#center4{
width: 700px;
}
.navContentCont{
width: 700px;
}
#heroH1{
font-size: 25px;
}
#heroCopy {
font-size: 16px;
line-height: 24px
}
.heroButton{
padding: 11px 21px 11px 21px;
}
#logoBanner{
position: absolute;
width: 600px;
left: -300px;
bottom: 45px;
}
.vertCent{
margin-bottom: -8px;
}
.homeLogo{
width: 95px;
display: inline-block;
margin-right: 25px;
}
.homeLogoLarge{
width: 70px;
}
.thin{
margin-bottom: -6px;
}
.sectionCont{
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 600px;
}
.iRightC{
position: absolute;
left: 61px;
top: 15px;
width: 24%;
height: auto;
}
.iLeftC{
position: absolute;
right: 51px;
top: 16px;
width: 24%;
height: auto;
}
.pRight{
width: 51%;
}
.pLeft{
width: 51%;
}
.iRight{
position: absolute;
left: -17px;
top: 48px;
width: 48%;
height: auto;
}
.iLeft{
position: absolute;
right: -20px;
top: 40px;
width: 48%;
height: auto;
}
#dataClick{
position: absolute;
left: 0px;
top: 80px;
width: 105px;
}
#dataDeskBlue{
position: absolute;
width: 500px;
left: -250px;
margin-left: 50%;
bottom: 0px;
opacity: 0;
}
#dataDesk{
position: absolute;
width: 500px;
left: -250px;
margin-left: 50%;
bottom: 0px;
}
#dataTabBlue{
position: absolute;
width: 135px;
left: 70px;
bottom: -15px;
opacity: 0;
}
#dataTab{
position: absolute;
width: 135px;
left: 70px;
bottom: -15px;
}
#dataLapBlue{
position: absolute;
width: 260px;
right: 0px;
bottom: 0px;
opacity: 0;
}
#dataLap{
position: absolute;
width: 260px;
right: 0px;
bottom: 0px;
}
.graphCont{
display: none;
}
/*/HWH950/*/
.hwhCopy{
width: 80%;
}
.hwhH3{
width: 80%;
}
.hwhText {
width: 600px;
}
.circleImg{
width: 90px;
}
/*/Jobs950/*/
.jobsMapText{
font-size: 22px;
}
#jobsMapSection{
background-size: 150%;
}
.jobsContentCont{
width: 600px;
}
.mapButton {
margin-top: 177px;
}
/*/Footer950/*/
#footerContentCont{
width: 600px;
}
.footerHead{
width: 600px;
left: -300px;
font-size: 25px;
}
.footerButton{
bottom: 72px;
}
.centerQuoteCont{
width: 100%;
}
}
@media(max-width: 650px) {
.sectionContMobileFix{
margin-top: -115px;
}
.fixCont650{
position: absolute;
width: 415px;
display: block;
}
.m650-1{
position: absolute;
width: 48%;
top: 144px;
left: -12px;
}
.m650-2{
position: absolute;
width: 48%;
right: 122px;
top: 91px;
}
.m650-3{
position: absolute;
width: 48%;
right: 15px;
top: 39px;
}
p {
font-size: 15px;
}
h2{
font-size: 25px;
}
h3 {
font-size: 18px;
width: 70%;
}
.navContentCont{
width: 415px;
}
.topNavResponsiveButton{
width: 43px;
position: absolute;
top: 32px;
right: 0px;
display: block;
}
.topNavResponsiveButtonCont{
height: 70px;
width: 80px;
position: absolute;
right: 0px;
display: block;
}
.topNavLinks{
display: none;
}
.topNavLinksMobile{
display: none;
left: 0px;
height: 360px;
top: 71px;
background-color: #fff;
}
.topNavLink{
display: block;
height: 71px;
line-height: 71px;
width: 100%;
margin: 0px;
text-align: center;
border-bottom: 1px solid #f3f3f3;
}
.topNavLinkCurrentPage{
display: block;
height: 71px;
line-height: 71px;
font-weight: 700;
width: 100%;
margin: 0px;
text-align: center;
border-bottom: 1px solid #f3f3f3;
}
.mod1 {
right: 0px;
position: absolute;
margin: 0px;
padding: 0px;
}
.h3Left{
right: 0px;
position: absolute;
margin: 0px;
padding: 0px;
text-align: left;
width: 70%;
}
.heroCenterModuleContHorizontalAlign{
width: 490px;
}
.centerModCont{
top: 0px;
}
.heroButton{
font-size: 8px;
padding: 11px 21px 11px 21px;
}
#center1{
width: 490px;
}
#center2{
width: 490px;
}
#center3{
width: 490px;
}
#center4{
width: 490px;
}
#heroH1{
font-size: 18px;
}
#heroCopy {
font-size: 13px;
line-height: 22px
}
#logoBanner{
display: none;
}
.sectionCont{
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 415px;
}
.iRightC{
position: absolute;
left: 0px;
top: 6px;
width: 24%;
height: auto;
}
.iLeftC{
position: absolute;
left: 0px;
top: 6px;
width: 24%;
height: auto;
}
.pRight{
width: 70%;
right: 0px;
margin-top: 25px;
left: auto;
}
.pLeft{
width: 70%;
right: 0px;
margin-top: 25px;
left: auto;
text-align: left;
}
.iRight{
position: absolute;
left: -17px;
top: 48px;
width: 48%;
height: auto;
display: none;
}
.iLeft{
position: absolute;
right: -20px;
top: 40px;
width: 48%;
height: auto;
display: none;
}
.doubleCont0{
height: 200px;
}
.centerQuoteCont{
width: 100%;
}
/*/Deliverables650/*/
#module2FooterExtend{
margin-bottom: 0px;
}
.graphCont{
display: none;
}
.deliverableCont{
width: 100%;
height: 350px;
position: absolute;
display: block;
top: -105px;
}
#dataClick{
display: none;
}
#dataDeskBlue{
position: absolute;
width: 300px;
left: -200px;
margin-left: 50%;
bottom: 0px;
opacity: 0;
}
#dataDesk{
position: absolute;
width: 300px;
left: -200px;
margin-left: 50%;
bottom: 0px;
}
#dataTabBlue{
position: absolute;
width: 96px;
left: 20px;
bottom: -15px;
opacity: 0;
}
#dataTab{
position: absolute;
width: 96px;
left: 20px;
bottom: -15px;
}
#dataLapBlue{
position: absolute;
width: 200px;
right: 25px;
bottom: 0px;
opacity: 0;
}
#dataLap{
position: absolute;
width: 200px;
right: 25px;
bottom: 0px;
}
/*/About650/*/
#aboutFix0{
height: 173px;
}
.aboutMapText{
margin-top:50px;
}
#module1Padder{
margin-bottom: 80px;
}
#aboutFix1{
height: 250px;
}
/*/HWH650/*/
.hwhCopy{
width: 80%;
}
.hwhH3{
width: 80%;
}
.hwhText {
width: 415px;
height: 250px;
}
.circleImg{
width: 60px;
}
/*/Jobs650/*/
.jobsMapText{
font-size: 15px;
line-height: 480px;
}
.jobsContentCont{
width: 415px;
}
#accordian h3{
width: 381px;
}
.mapButton {
display: none;
}
/*/Footer650/*/
#footerContentCont{
width: 415px;
}
.footerHead{
width: 415px;
left: -207.5px;
font-size: 18px;
}
.footerButton{
bottom: 72px;
font-size: 8px;
height: 31px;
line-height: 31px;
}
#footerBackground{
bottom: 0px;
}
.iRight{
position: absolute;
left: -12px;
top: -569px;
width:48%;
height: auto;
}
.iLeft{
position: absolute;
right: 122px;
top: -404px;
width: 48%;
height: auto;
}
#bottomP{
width: 100%;
}
#iLeftBottom{
top: -914px;
right: 14px;
}
#mod1SectionPSpecial{
margin-top: 225px;
}
#h3LeftBottom{
left: 0px;
}
.pRight{
margin-top: 0px;
}
.pRightabout{
margin-top: 25px;
}
#module3{
display: none;
}
#firstDoubleCont0{
margin-top: 62px;
margin-bottom: -22px;
}
#h2Different{
margin-top: 45px;
}
.mobileDeliverableCont{
width: 100%;
position: relative;
height: auto;
display: block;
}
#pRightTop{
margin-top: 25px;
}
.mobileDeliverable{
width: 100%;
margin-top: 10px;
}
.downloadMobileDeliverable {
width: 100%;
height: 71px;
display: block;
position: relative;
border: 1px solid #919191;
line-height: 71px;
text-align: center;
font-family: 'Roboto', Sans-serif;
text-transform: uppercase;
color: #919191;
text-decoration: none;
font-size: 10px;
margin: 12px 0 36px 0;
}
#dataCanvasCont{
display: none;
}
/*/Footer650/*/
#footer{
position: relative;
height: 300px;
}
#footerContent{
position: absolute;
}
#footerBackground{
position: absolute;
}
.blackFix{
display: none;
}
#footerContentCont{
width: 300px;
}
.footerHead{
position: absolute;
width: 300px;
left: -150px;
font-size: 13px;
}
.footerButton{
bottom: 72px;
font-size: 8px;
}
#footerBackground{
bottom: 0px;
}
#scrollFixed{
display: none;
}
.heroNav{
display: none;
}
}
@media(max-width: 450px) {
section{
background-color: #fff;
}
#module2{
padding-top: 20px;
}
#scrollFixed{
display: none;
}
.centerQuoteCont{
width: 100%;
}
#module3{
display: none;
}
.navContentCont{
width: 300px;
}
.topNavResponsiveButton{
width: 43px;
position: absolute;
top: 32px;
right: 0px;
display: block;
}
.topNavResponsiveButtonCont{
height: 70px;
width: 80px;
position: absolute;
right: 0px;
display: block;
}
.topNavLinksMobile{
display: none;
left: 0px;
height: 360px;
top: 71px;
background-color: #fff;
}
.topNavLink{
display: block;
height: 71px;
line-height: 71px;
width: 100%;
margin: 0px;
text-align: center;
border-bottom: 1px solid #f3f3f3;
}
.topNavLinkCurrentPage{
display: block;
height: 71px;
line-height: 71px;
font-weight: 700;
width: 100%;
margin: 0px;
text-align: center;
border-bottom: 1px solid #f3f3f3;
}
p {
font-size: 12px;
line-height: 18px;
}
h2{
font-size: 18px;
margin-top: 40px;
}
h3 {
font-size: 13px;
width: 70%;
}
.mod1 {
right: 0px;
position: absolute;
margin: 0px;
padding: 0px;
}
.h3Left{
right: 0px;
position: absolute;
margin: 0px;
padding: 0px;
text-align: left;
width: 70%;
}
.heroCenterModuleContHorizontalAlign{
width: 300px;
}
.centerModCont{
top: 50px;
}
#center1{
width: 300px;
}
#center2{
width: 300px;
}
#center3{
width: 300px;
}
#center4{
width: 300px;
}
#heroH1{
font-size: 20px;
}
#heroCopy {
font-size: 13px;
line-height: 18px;
}
.sectionCont{
position: relative;
margin: 0 auto 0 auto;
display: block;
width: 300px;
}
.iRightC{
position: absolute;
left: 0px;
top: 6px;
width: 24%;
height: auto;
}
.iLeftC{
position: absolute;
left: 0px;
top: 6px;
width: 24%;
height: auto;
}
.pRight{
width: 70%;
right: 0px;
margin-top: 25px;
left: auto;
}
.pLeft{
width: 70%;
right: 0px;
margin-top: 25px;
left: auto;
text-align: left;
}
.fixCont650{
display: none;
}
.sectionContMobileFix{
margin-top: auto;
}
.iRight{
position: absolute;
left: -12px;
top: -471px;
width: 52%;
height: auto;
display: block;
}
.iLeft{
position: absolute;
right: 71px;
top: -341px;
width: 52%;
height: auto;
display: block;
}
#h3LeftBottom {
position: relative;
text-align: left;
left: 0px;
right: auto;
margin-bottom: 3px;
margin-top: 65px;
}
#iLeftBottom{
top: -725px;
right: -12px;
}
#bottomP{
width: 100%;
margin-top: 0px;
}
.doubleCont0{
height: 130px;
}
#doubleCont0Special {
margin-top: 23px;
}
#mod1SectionPSpecial{
margin-top: 200px;
}
#mod1SectionSpecial{
margin-top: 0px;
}
.centerQuoteCont {
font-size: 18px;
padding-top: 0%;
padding-bottom: 0%;
}
.centerQuoteText{
display:none;
}
#p2Different{
display: none;
}
#h2Different{
display: none;
}
.quotePic{
display: none;
}
.mobileBg{
display: block;
}
.mobileDeliverableCont{
width: 100%;
position: relative;
height: auto;
display: block;
}
.mobileDeliverable{
width: 100%;
margin-top: 10px;
}
.downloadMobileDeliverable {
width: 100%;
height: 71px;
display: block;
position: relative;
border: 1px solid #919191;
line-height: 71px;
text-align: center;
font-family: 'Roboto', Sans-serif;
text-transform: uppercase;
color: #919191;
text-decoration: none;
font-size: 10px;
margin: 12px 0 36px 0;
}
/*/Nav450/*/
/*/HWH450/*/
#module1Special{
padding-bottom: 150px;
margin: 0px;
}
.hwhCopy{
width: 80%;
margin-top: 21px;
}
.hwhH3{
width: 80%;
}
.hwhText {
width: 300px;
height: 225px;
margin-top: 50px;
}
.circleImg{
width: 44px;
}
/*/Deliverable450/*/
#module2FooterExtend{
margin-bottom: 0px;
}
.graphCont{
display: none;
}
.deliverableCont{
width: 100%;
height: 350px;
position: relative;
display: block;
margin-top: -360px;
}
#dataClick{
display: none;
}
#dataDeskBlue{
position: absolute;
width: 270px;
left: -150px;
margin-left: 50%;
bottom: 0px;
opacity: 0;
}
#dataDesk{
position: absolute;
width: 270px;
left: -150px;
margin-left: 50%;
bottom: 0px;
}
#dataTabBlue{
position: absolute;
width: 83px;
left: 3px;
bottom: -12px;
opacity: 0;
}
#dataTab{
position: absolute;
width: 83px;
left: 3px;
bottom: -12px;
}
#dataLapBlue{
position: absolute;
width: 175px;
right: 7px;
bottom: 0px;
opacity: 0;
}
#dataLap{
position: absolute;
width: 175px;
right: 7px;
bottom: 0px;
}
/*/About450/*/
#module1About{
padding-top: 25px;
margin-bottom: 0px !important;
}
#aboutFix1{
top: 30px;
height: 135px;
}
#aboutFix2{
top: -30px;
}
#aboutFix3{
top:13px;
}
#aboutFix4{
top: 60px;
}
#aboutMapSection{
margin-top: 80px;
height: 200px;
}
.aboutMapText{
width: 80%;
margin: 0 auto 0 auto;
font-size: 16px;
top: 30px;
display: block;
line-height: 30px;
position: relative;
}
.cleantechAboutLink{
width: 200px;
margin-top: 40px;
}
/*/Jobs450/*/
#jobsMapSection{
display: none;
}
#jobsLongText{
height: 157px;
}
.jobsMapText{
font-size: 15px;
line-height: 480px;
}
.jobsContentCont{
width: 300px;
}
#accordian h3{
width: 265px;
}
.heroNav{
display: none;
}
.mapButton {
display: none;
}
/*/Footer450/*/
#footerContent{
position: absolute;
}
#footerBackground{
position: absolute;
}
.blackFix{
display: none;
}
#footerContentCont{
width: 300px;
}
.footerHead{
position: absolute;
width: 300px;
left: -150px;
font-size: 13px;
}
.footerButton{
bottom: 72px;
font-size: 8px;
}
#footerBackground{
bottom: 0px;
}
}