/********************************************  CSS RESET  *********************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, strike, 
strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
ins { text-decoration: none; }
del { text-decoration: line-through; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea {
	padding: 0;
	margin: 0;
	font-size: 100%;
}
textarea { overflow: auto; }
.clearFloat { clear: both; }
.hidden { display: none; }
body, select, input, textarea { font-family: arial, sans-serif; }
select:focus, input:focus, textarea:focus { outline: 0; }
textarea { overflow: auto; }
th { text-align: left; }
address { font-style: normal; }

input[type="hidden"] {
	display: none !important;
	visibility: hidden !important;
	height: 0px !important;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
strong { font-weight: bold; }


/**********************************************  FONTS  ***********************************************/

h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:21px;
    font-weight:500;
    color:#231f20;
}
h2 {
    font-family:Arial, Helvetica, sans-serif;
    text-indent:-9999em;
    width:640px;
    height:70px;
 }
#home h2 {background:url('../images/text-replace/home-header.jpg') left top no-repeat #00b7f1;}
#environment h2 {background:url('../images/text-replace/environment-header.jpg') left top no-repeat #fff;}
#social h2 {background:url('../images/text-replace/social-header.jpg') left top no-repeat #fff;}

h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#fff;
    line-height:160%;
}
p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin-bottom:8px;
    line-height:135%;
    color:#58595b;
}
#home p{font-size:13px;}

a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#58595b;
    
      transition: color 0.25s linear;
    -moz-transition: color 0.25s linear;
    -webkit-transition: color 0.25s linear;
    -o-transition: color 0.25s linear;
}

a:hover {color:#3b3c3d;}

a.more{
    color:#ed1c24;
    font-weight:700;
    text-decoration:none;
    float:right;
    line-height:150%;
    
}

a.more:hover{text-decoration:underline;}

a.more span{
    padding:0 15px 0 25px;
    background:url('../images/icons/icon-learn-more.png') right center no-repeat transparent;
}

.btn{
     transition: border 0.25s linear, background 0.25s linear, width 0.25s linear;
    -moz-transition: border 0.25s linear, background 0.25s linear, width 0.25s linear;
    -webkit-transition: border 0.25s linear, background 0.25s linear, width 0.25s linear;
    -o-transition: border 0.25s linear, background 0.25s linear, width 0.25s linear;
    
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    
    background:#fff;
}

/**********************************************  HEADER  **********************************************/

#headerMain {
    height:120px;
    background:url('../images/bg/bg-header-pattern.gif') 0 0 repeat-x #2a6431;
    position:relative;
    width:100%;
    min-width:965px;
}
#environment #headerMain {background:url('../images/bg/bg-header-pattern.gif') 0 0 repeat-x #2a6431;}
#social #headerMain {background:url('../images/bg/bg-header-pattern.gif') 0 0 repeat-x #f7941e;}

#home #headerMain {background:url('../images/bg/bg-header-pattern.gif') 0 0 repeat-x #fff; height:100px;}

#headerMain h1{float:left; padding:25px 0 0 30px;}

#headerMain .main-logo{float:right}

#headerMain .nav-bar {position:absolute;top:80px; left:30px;}
#headerMain .nav-bar ul{overflow:hidden;}
#headerMain .nav-bar li{float:left;}

#headerMain .nav-bar  li a{
    background:url('../images/sprites/sprites-nav-bar.png') 0 0 no-repeat transparent;
    height:25px;
    line-height:22px;
    display:block;
    text-align:center;
    font-weight:700;
    text-indent:-9999em;
}

#headerMain .nav-bar  li.home a{width:130px;background-position:0 0;}
#headerMain .nav-bar  li.responsible a{width:260px;background-position:-130px 0;}
#headerMain .nav-bar  li.environmental a{width:280px;background-position:-390px 0;}

#headerMain .nav-bar  li.home a:hover{background-position:0 -30px;}
#headerMain .nav-bar  li.responsible a:hover{background-position:-130px -30px;}
#headerMain .nav-bar  li.environmental a:hover{background-position:-390px -30px;}



/**********************************************  FOOTER  **********************************************/

#footerMain{
    min-width:965px;
    width:100%;
    clear:both;
}

#environment #footerMain{background:url('../images/bg/bg-footer-green-pattern.gif') 0 0 repeat-x #fff;}
#social #footerMain{background:url('../images/bg/bg-footer-orange-pattern.gif') 0 0 repeat-x #fff;}

#footerMain #form-block{
    width:965px;
    margin:0 auto;
    padding:0 0 50px 0;   

}

#footerMain #form-block .footer-form-desc{height:180px; position:relative;}
#footerMain #form-block .footer-form-desc p{ display:block; text-indent:-99999em;}
#footerMain #form-block .footer-form-desc a.learn-more {position:absolute; bottom:37px; left:780px;}
#environment #footerMain #form-block .footer-form-desc{background:url('../images/text-replace/environment-footer.jpg') 0 0 no-repeat #fff;}
#social #footerMain #form-block .footer-form-desc{background:url('../images/text-replace/social-footer.jpg') 0 0 no-repeat #fff;}
#home #footerMain #form-block .footer-form-desc{background:url('../images/text-replace/home-footer.jpg') 0 0 no-repeat #fff;}
#footerMain #footer-block{
    clear:both;
	height:22px;
	padding-top:8px;
	background:#dcddde;
}


#footerMain #footer-block ul{float:left; padding-left:30px;}
#footerMain #footer-block li{float:left; padding-right:5px;}
#footerMain #footer-block a{color:#12487A;}
#footerMain #footer-block .copyright{float:right;padding-right:30px;margin:0}


/*******************************************  PAGE LAYOUT  ********************************************/

html{background-color:#fff;}
body{background:#fff;}
body#environment {background:#2a6431;}
body#social {background:#f7941e;}


#content{
    min-width:965px;
    width:965px;
    margin: 0 auto;
    position:relative;
}
#home #content{
    padding:0 15px;
    min-width:940px;
    width:910px;

}

/*******************************************  FORM ********************************************/

.fmtForm {padding:0 40px}
#home .fmtForm {padding:0}

.fmtForm >li{float:left; width:360px;padding:0 40px 0 40px; margin:8px 0;}
#home .fmtForm > li{padding:0px; width:400px}
.fmtForm li.full{clear:left; padding-left:480px; margin:10px 0;}
.fmtForm label{
    float:left; 
    width:90px; 
    line-height:30px;
    color:#a7a9ac;
    font-family:Arial;
    font-weight:700;
    font-size:0.825em;
}

.fmtForm label.long{line-height:110%; width:160px;}
#home .fmtForm label.long{width:175px}

.fmtForm label.checkbox {width:330px; padding-left:5px;font-weight:400;}
#home .fmtForm label.checkbox{width:350px;} 

.fmtForm span.field-validation-error{
        color:#ed1c24; 
        clear:both;
        width:255px;
        float:right;
        line-height:110%;
        padding-top:5px;
        font-weight:400;
        font-family:Arial;
        font-size:0.825em;
}
#home .fmtForm span.field-validation-error{width:285px}

#home .fmtForm .full span.field-validation-error,
.fmtForm .full span.field-validation-error{
	float:left;
	padding-left:20px;
}

.fmtForm input[type="text"]{
    float:right; 
    padding:6px 10px; 
    min-width:240px;
    border:1px solid #a7a9ac;
    background:#fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-family:Arial;
    font-size:0.8em;
    color:#666;
    
    transition: border 0.25s linear, background 0.25s linear;
    -moz-transition: border 0.25s linear, background 0.25s linear;
    -webkit-transition: border 0.25s linear, background 0.25s linear; 
    -o-transition: border 0.25s linear, background 0.25s linear;    
}

#home .fmtForm input[type="text"]{min-width:270px}
.fmtForm input[type="checkbox"]{float:left;}
.fmtForm input[type="submit"]{
    border:1px solid #fff;
    font-family:Arial;
    font-size:0.85em;
    font-weight:700;
    text-align:left;
    color:#fff;
    padding:6px 8px;
    width:120px;
    background:url('../images/icons/icon-submit-arrow.png') right center no-repeat #ed1c24;
    cursor:pointer;
    
}

.fmtForm input[type="submit"]:hover,
.fmtForm input[type="submit"]:active{background:url('../images/icons/icon-submit-arrow.png') right center no-repeat #ed3138}


.fmtForm input[type="submit"]:hover{width:140px;}

.fmtForm input[type="text"]:focus{border:1px solid #00b7f1;background:#f0f9fc;}

.fmtForm input[type="text"].error,
.fmtForm .error input[type="text"],
.fmtForm input[type="text"].error:hover,
.fmtForm .error input[type="text"]:hover{
    border:1px solid #ed1c24;
    background:#faeaeb;
}

.feedbackMsg{
	width:80%;
	margin:2em auto;
	border:1px solid #A7A9AC;
	padding:25px 20px;
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	border-radius: 8px;
	
	transition: display 1s linear, visibility 1s linear;
    -moz-transition: display 1s linear, visibility 1s linear;
    -webkit-transition: display 1s linear, visibility 1s linear; 
    -o-transition: display 1s linear, visibility 1s linear;
	
	animation: animFeedback 2s;
	-moz-animation: animFeedback 2s; 
	-webkit-animation: animFeedback 2s; 
	-o-animation: animFeedback 2s;
}


@keyframes animFeedback
{
from {opacity: 0;}
to {opacity: 1;}
}

@-moz-keyframes animFeedback 
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes animFeedback 
{
from {opacity: 0;}
to {opacity: 1;}
}

@-o-keyframes animFeedback 
{
from {opacity: 0;}
to {opacity: 1;}
}

.feedbackMsg p{
	text-align:center;
	font-weight:700;
}
.successMsg{
	border:1px solid #cdf9bd;
	background:#edfae8;
}

.errorMsg{
	border:1px solid #fddcde;
	background:#faeaeb;
}

/************************************ BUBBLE AND CONTENT **************************************************************/

/*GENERIC*/
.content-block .box{
    background:url('../images/bg/bg-iconless-pattern-bottom.png') bottom right no-repeat transparent;
    padding:0 0 20px 0;
}
.content-block .box-content{
    background:url('../images/bg/bg-iconless-pattern-top.png') top right no-repeat transparent;
    padding: 20px 25px 0px 125px;
    overflow:hidden;
}


.content-block{position:relative;clear:both;}
.content-block .block-body{position:absolute;}
.content-block .box{width:580px;}
.content-block .bubble{
    display:block;
    width:227px;
    height:240px;
    text-indent:-9999em;
    position:absolute;
}

.content-block h3 {
    margin-left:120px;
    height:25px;
    display:block;
    width:400px;
    text-indent:-99999em;
}

.content-block.block1 .block-body{top:25px; left:90px;}

.content-block.block2 h3{margin-left:10px;}
.content-block.block2 .block-body{top:10px;left:190px}
.content-block.block2 .box-content{padding-left:25px;}
.content-block.block2 .box{width:713px;}


.content-block.block7 .bubble{
    background:url('../images/bubble/bubble-bottom.png') center center no-repeat transparent;
    width:447px;
    height:510px;
    top:5px;
    right:45px;
}

/*HOME*/
#home .block1{background:url('../images/bg/bg-home-part1.jpg') top center no-repeat #fff; height:165px;}


/*ENVIRONMENT*/
#environment .block1{background:url('../images/bg/bg-green-part1.jpg') top center no-repeat #2a6431; height:200px;}
#environment .block2{background:url('../images/bg/bg-green-part2.jpg') top center no-repeat #2a6431; height:250px;}
#environment .block3{background:url('../images/bg/bg-green-part3.jpg') top center no-repeat #2a6431; height:290px;}
#environment .block4{background:url('../images/bg/bg-green-part4.jpg') top center no-repeat #2a6431; height:250px;}
#environment .block5{background:url('../images/bg/bg-green-part5.jpg') top center no-repeat #2a6431; height:260px;}
#environment .block6{background:url('../images/bg/bg-green-part6.jpg') top center no-repeat #2a6431; height:280px;}
#environment .block7{background:url('../images/bg/bg-green-part7.jpg') top center no-repeat #2a6431; height:600px;}


#environment .block2 h3{background:url('../images/text-replace/text-intro.png') top left no-repeat transparent;}
#environment .block3 h3{background:url('../images/text-replace/text-sustainability.png') top left no-repeat transparent;}
#environment .block4 h3{background:url('../images/text-replace/text-smart-city.png') top left no-repeat transparent;}
#environment .block5 h3{background:url('../images/text-replace/text-information-management.png') top left no-repeat transparent;}
#environment .block6 h3{background:url('../images/text-replace/text-transportation.png') top left no-repeat transparent;}


#environment .content-block.block3 .box-content,
#environment .content-block.block3 h3 {padding-left:120px}
#environment .content-block.block3 .block-body{top:40px;left:190px}
#environment .content-block.block3 .box{width:713px;}
#environment .content-block.block3 .bubble{
    background:url('../images/bubble/bubble-top-green.png') center center no-repeat transparent;
    width:284px;
    height:282px;
    top:-37px;
    left:-190px;
}


#environment .content-block.block4 .block-body{top:30px;left:315px}
#environment .content-block.block4 .bubble{
    background:url('../images/bubble/bubble-smart-city.png') center center no-repeat transparent;
    top:-45px;
    left:-125px;
}


#environment .content-block.block5 .block-body{top:55px;left:315px}
#environment .content-block.block5 .bubble{
    background:url('../images/bubble/bubble-information-management.png') center center no-repeat transparent;
    top:-25px;
    left:-125px;
}


#environment .content-block.block6 .block-body{top:90px;left:315px}
#environment .content-block.block6 .bubble{
    background:url('../images/bubble/bubble-transportation.png') center center no-repeat transparent;
    top:-50px;
    left:-125px;
}


#environment .content-block.block7 p.tag-line{
    color:#72b744;
    font-size:28px;   
    width:380px;
    position:absolute;
    bottom:130px;
    left:30px;
}


/*SOCIAL*/
#social .block1{background:url('../images/bg/bg-orange-part1.jpg') top center no-repeat #f7941e; height:200px;}
#social .block2{background:url('../images/bg/bg-orange-part2.jpg') top center no-repeat #f7941e; height:250px;}
#social .block3{background:url('../images/bg/bg-orange-part3.jpg') top center no-repeat #f7941e; height:290px;}
#social .block4{background:url('../images/bg/bg-orange-part4.jpg') top center no-repeat #f7941e; height:250px;}
#social .block5{background:url('../images/bg/bg-orange-part5.jpg') top center no-repeat #f7941e; height:260px;}
#social .block6{background:url('../images/bg/bg-orange-part6.jpg') top center no-repeat #f7941e; height:280px;}
#social .block7{background:url('../images/bg/bg-orange-part7.jpg') top center no-repeat #f7941e; height:600px;}


#social .block2 h3{background:url('../images/text-replace/text-intro.png') top left no-repeat transparent;}
#social .block3 h3{background:url('../images/text-replace/text-responsible.png') top left no-repeat transparent;}
#social .block4 h3{background:url('../images/text-replace/text-earthmoving.png') top left no-repeat transparent;}
#social .block5 h3{background:url('../images/text-replace/text-information-management.png') top left no-repeat transparent;}
#social .block6 h3{background:url('../images/text-replace/text-electronic-systems.png') top left no-repeat transparent;}


#social .content-block.block3 .box-content,
#social .content-block.block3 h3 {padding-left:120px}
#social .content-block.block3 .block-body{top:40px;left:190px}
#social .content-block.block3 .box{width:713px;}
#social .content-block.block3 .bubble{
    background:url('../images/bubble/bubble-top-orange.png') center center no-repeat transparent;
    width:284px;
    height:282px;
    top:-37px;
    left:-190px;
}

#social .content-block.block4 .block-body{top:25px;left:315px}
#social .content-block.block4 .bubble{
    background:url('../images/bubble/bubble-earthmoving.png') center center no-repeat transparent;
    top:-25px;
    left:-125px;
}

#social .content-block.block5 .block-body{top:50px;left:315px}
#social .content-block.block5 .bubble{
    background:url('../images/bubble/bubble-information-management.png') center center no-repeat transparent;
    top:-30px;
    left:-125px;
}

#social .content-block.block6 .block-body{top:70px;left:315px}
#social .content-block.block6 .bubble{
    background:url('../images/bubble/bubble-electronic-systems.png') center center no-repeat transparent;
    top:-40px;
    left:-125px;
}

#social .content-block.block7 p.tag-line{
    color:#ffd100;
    font-size:28px;   
    width:500px;
    position:absolute;
    bottom:130px;
    left:30px;
}

/************************************ HOME / LANDING **************************************************************/

.top-block img{
    float:left;
    padding:0 10px 35px 10px;
}

.top-block .intro-content{
    padding:10px 20px 10px 0;
    width:710px;
    float:right;
}

.top-block .intro-content h3{
    margin:0;
    text-indent:0;
    width:auto;
    display:block;
    color:#58595B;
    height:auto;
    line-height:130%;
    font-weight:700;
    font-size:16px;
    margin-bottom:8px;
}

.nav-controller {
    width:864px;
    margin:0 auto;
}

.nav-controller ul{overflow:hidden;}

.nav-controller li{
    width:412px;
    height:213px;
    margin-bottom:10px;
    background:url('../images/sprites/sprites-landing-tiles.jpg') no-repeat #fff;
    float:left;
    margin:0 10px;
    position:relative;
}

.nav-controller li.social{background-position:0 0}
.nav-controller li.environment{background-position:0 -218px}

.nav-controller li div{
    padding:60px 10px 0 0;
    width:160px;
    float:right;
}

.nav-controller li div p{color:#fff; padding-bottom:8px}
.nav-controller li div a{position:absolute;bottom:50px;left:245px;}
.nav-controller li div a,
a.learn-more{
    background:url('../images/icons/icon-submit-arrow.png') right center no-repeat #ed1c24;
    border:1px solid #fff;
    color:#fff;
    text-decoration:none;
    text-align:left;
    font-weight:700;
    display:block;
    width:80px;
    padding:5px 10px 5px 8px;
    line-height:110%;   
}
.nav-controller li div a:hover,
a.learn-more:hover{
    background:url('../images/icons/icon-submit-arrow.png') right center no-repeat #f0343b; 
    width:100px;   
}

.form-content{
    float:right;
    position:relative;
    width:400px;
    padding-top:80px;
}

.form-content h3{
    position:absolute;
    width:451px;
    height:153px;
    display:block;
    text-indent:-9999em;
    background:url('../images/text-replace/text-learn-more.png') 0 0 no-repeat transparent;
    right:0;
    top:-80px;
}