/* ==========================================================================
   Main styles EN
   ========================================================================== */

html,button,input,select,textarea{color:#222}
body{font-size:18px;line-height:1.4;font-family:'UniversLTStd',sans-serif;color: #071E51;}

a{color:#003BCB;text-decoration:none;font-family:'UniversLTStd-Bold',sans-serif;}
a:hover{text-decoration:underline}

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
img{vertical-align:middle}
fieldset{border:0;margin:0;padding:0}
textarea{resize:vertical}

.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}

@font-face {font-family: 'UniversLTStd';src: url('../fonts/UniversLTStd.eot');src: local('0'), url('../fonts/UniversLTStd.woff') format('woff'), url('../fonts/UniversLTStd.ttf') format('truetype'), url('../fonts/UniversLTStd.svg') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'UniversLTStd-Bold';src: url('../fonts/UniversLTStd-Bold.eot');src: local('0'), url('../fonts/UniversLTStd-Bold.woff') format('woff'), url('../fonts/UniversLTStd-Bold.ttf') format('truetype'), url('../fonts/UniversLTStd-Bold.svg') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'UniversLTStd-Cn';src: url('../fonts/universltstd-cn-webfont.eot');src: url('../fonts/universltstd-cn-webfontd41d.eot?#iefix') format('embedded-opentype'),url('../fonts/universltstd-cn-webfont.woff') format('woff'),url('../fonts/universltstd-cn-webfont.ttf') format('truetype'),url('../fonts/universltstd-cn-webfont.svg#univers_lt_std_57_cnregular') format('svg');font-weight: normal;font-style: normal;}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 650px;
  top: 0;
  left: 0;
  overflow: hidden;
}
.wrap {
  width: 730px;
  margin: 0 auto;
}
.cont {
  padding: 107px 0 0;
  min-height: 410px;
}
p {
  margin: 0 0 5px;
}
label {
  display: block;
}
strong,b {
  font-weight: normal;
  font-family: 'UniversLTStd-Bold', sans-serif;
}
header {
  padding: 50px 0 20px;
}
h2 {
  color: #003BCB;
  font-weight: normal;
  margin: 0;
  font-family: 'UniversLTStd-Cn',sans-serif;
}
h3 {
  font-size: 24px;
  margin: 0 0 5px;
  font-weight: normal;
  font-family: 'UniversLTStd-Bold', sans-serif;
}
h3 span.small {
  font-family: 'UniversLTStd', sans-serif;
  font-size: 18px;
}
h4 {
  margin: 0 0 20px;
}
.intro {
  color: #071E51;
  text-align: center;
  margin: 0 0 30px;
}
.intro h3{
  color: #003BCB;
}
.intro small {
  font-size: 14px;
  display: block;
}
button {
  background: #6AE36F;
  border: none;
  border-radius: 10px;
  color: #071E51;
  padding: 0;
  line-height: 55px;
  font-size: 24px;
}
button:hover {
  color: #FFF;
  background: #071E51;
}
button.active {
  color: #FFF;
  background: #003BCB;
}
.directionNav {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  position: absolute;
  top: 550px;
  width: 100%;
}
.directionNav li {
  display: inline-block;
  margin: 0 15px;
}
.directionNav .disabled {
  display: none;
}
.directionNav button {
  width: 49px;
  height: 37px;
  text-indent: -9999px;
  background: url(../img/arrows.png);
}
.directionNav .prev {
  background-position: 0 0;
}
.directionNav .prev:hover {
  background-position: 0 -37px;
}
.directionNav .next {
  background-position: -49px 0;
}
.directionNav .next:hover {
  background-position: -49px -37px;
}
input[type="text"] {
  font-size: 24px;
  color: #071E51;
  border: 2px solid #6AE36F;
  border-radius: 10px;
  padding: 12px 5px;
  text-align: center;
}
.col {
  display: inline-block;
  vertical-align: top;
}
.bars {
  position: absolute;
  width: 100%;
  height: 230px;
  bottom: 41px;
}
.bar {
  position: absolute;
  width: 86px;
  border-radius: 10px;
  bottom: 0;
}
.bar.Millicare {
  right: 157px;
}
.bar.hwe {
  right: 15px;
}

.steps {
  position: absolute;
  width: 100%;
  left: 100%;
  top: 0;
}
.steps.step1 {
  left: 0;
}

/* Step 1 */

.step1 .cont {
  padding: 0;
}
.select-language {
  background: url(../img/planet.png) no-repeat 50% 0;
  text-align: center;
  padding: 160px 0 8px;
  margin: 0;
}
.languages {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  width: 430px;
}
.languages li {
  float: left;
  width: 184px;
  margin: 0 15px 15px;
}
.languages button {
  width: 184px;
}

/* Step 2 */

.step2 {
  text-align: center;
}
.step2 .col {
  width: 250px;
  margin: 0 12px;
}
.step2 .col input[type="text"] {
  width: 226px;
  margin: 5px 0 8px;
}
.step2 button {
  width: 100%;
  margin: 0 0 16px;
}

/* Step 3 */

.step3 .wrap {
  text-align: center;
  width: 740px;
}
.step3 .col {
  width: 320px;
  margin: 0 5px;
}
.step3 .field {
  margin: 0 0 10px;
  padding: 0 0 0 92px;
  min-height: 63px;
}
.step3 .field.truck {
  background: url(../img/truck.png) no-repeat 27px 82%;
}
.step3 .field.portable {
  background: url(../img/portable.png) no-repeat 76px 50%;
}
.step3 button {
  width: 170px;
}
.step3 input[type="text"] {
  width: 210px;
  margin: 5px 0 15px;
}

.location2 {
  border: 2px solid #bcc95c;
  border-radius: 10px;
  padding: 12px 5px;
  position: absolute;
  width: 210px;
  margin-left: 48px;
}
.location2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.location2 li:hover {
  cursor: pointer;
  text-decoration: underline;
}

/* Step 4 */

.step4 {
  text-align: center;
}
.step4 .col {
  /*width: 240px;*/
  width: 210px;
}
.step4 h4 {
  /*padding: 18px 0px;*/
  padding: 18px 0px 64px;
  text-decoration: underline;
  /*margin: 0;*/
  margin: 0px 0px 20px;
  font-family: 'UniversLTStd', sans-serif;
  font-weight: normal;
}
.water-usage h4 {
  /*background: url(../img/water.png) no-repeat 0 50%;*/
  background: url(../img/water.png) no-repeat bottom center;
}
.energy-usage h4 {
  /*background: url(../img/windmill.png) no-repeat 0 50%;*/
  background: url(../img/windmill.png) no-repeat bottom center;
}
.emissions-production h4 {
  /*background: url(../img/bicycle.png) no-repeat 0 50%;*/
  background: url(../img/bicycle.png) no-repeat bottom center;
  /*margin-left: -20px;*/
  /*padding-left: 60px;*/
}
.step4 .col strong {
  display: block;
  font-size: 60px;
  line-height: normal;
}
.step4 .col p {
  font-family: 'UniversLTStd-Bold', sans-serif;
  font-size: 14px;
  margin: -15px 0 24px;
}
.step4 button {
  width: 146px;
  line-height: 38px;
  font-size: 18px;
}
.water-usage button {
  color: #FFF;
  background: #003BCB;
}
.water-usage button:hover {
  background: #18bef9;
}
.emissions-production button {
  background: #fbbb46;
}
.emissions-production button:hover {
  background: #ffcf78;
}

/* Water Savings */

.chart .col {
  width: 180px;
  margin: 40px 0 0;
  float: left;
}
.col.chart {
  width: 340px;
  position: relative;
  margin: 0 23px 0 0;
}
.col.total {
  width: 154px;
}
.col.chart ul {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1.6;
}
.col.chart .horizontal {
  display: inline-block;
  border-top: 1px solid #919181;
  margin: 5px 0 0;
  width: 100%;
  font-family: 'UniversLTStd-Bold', sans-serif;
}
.col.chart .horizontal li {
  display: inline-block;
}
.col.chart .horizontal .first {
  width: 97px;
  font-family: 'UniversLTStd', sans-serif;
}
.col.chart .horizontal .middle {
  font-family: 'UniversLTStd-Bold', sans-serif;
  width: 156px;
}
.water-savings .bar {
  background: #003BCB;
}
.chart .col p {
  font-family: 'UniversLTStd-Bold', sans-serif;
}
.chart .col p strong {
  display: block;
  font-size: 48px;
  line-height: 1;
}
.chart .col p span.or {
  display: block;
  font-family: 'UniversLTStd', sans-serif;
}
.chart .col button {
  line-height: 38px;
  font-size: 18px;
  width: 154px;
  margin: 15px 0 0;
}

/* Energy Savings */

.energy-savings .intro {
  color: #071E51;
}
.energy-savings .bar {
  background: #6AE36F;
}

/* Emissions */

.emissions-savings .intro {
  color: #071E51;
}
.emissions-savings .bar {
  background: #fbbb46;
}

/* Print Report */

.print-report {
  display: none;
}
.print-report header {
  padding-bottom: 10px;
}
.print-report .cont {
  padding: 0;
}
.print-report .intro {
  color: #757562;
  font-size: 14px;
  text-align: left;
  margin: 0 0 20px;
}
.print-report .col {
  width: 236px;
  float: left;
}
.print-report .username {
  color: #003BCB;
}
.print-report h4 {
  font-size: 14px;
  text-align: center;
  padding: 65px 0 0;
  font-family: 'UniversLTStd-Bold', sans-serif;
  white-space: nowrap;
}
.print-report .water h4 {
  color: #003BCB;
  background: url(../img/water.png) no-repeat 50% 0;
}
.print-report .energy h4 {
  color: #003BCB;
  background: url(../img/windmill.png) no-repeat 50% 0;
}
.print-report .emissions h4 {
  color: #003BCB;
  background: url(../img/bicycle.png) no-repeat 50% 0;
}
.print-report .energy h4 {
  color: #6AE36F;
}
.print-report .emissions h4 {
  color: #fbbb46;
}
.print-report .chart {
  width: 206px;
  margin: 0 0 17px;
  position: relative;
}
.print-report ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
}
.print-report .horizontal {
  border-top: 1px solid #757562;
}
.print-report .horizontal li {
  display: inline-block;
  font-family: 'UniversLTStd-Bold', sans-serif;
}
.print-report .horizontal .first {
  width: 51px;
  font-family: 'UniversLTStd', sans-serif;
}
.print-report .horizontal .middle {
  width: 94px;
}
.print-report .bars {
  bottom: 25px;
  height: 150px;
}
.print-report .bar {
  width: 70px;
  position: absolute;
}
.print-report .bar.Millicare {
  right: 87px;
}
.print-report .bar.hwe {
  right: 3px;
}
.print-report p {
  font-size: 14px;
  font-family: 'UniversLTStd-Bold', sans-serif;
  line-height: normal;
}
.print-report p strong {
  font-size: 24px;
}

.print-report .bars img {
  display: block;
}

/* Footer */

h1 {
  margin: 0;
  position: fixed;
  bottom: 10px;
  left: 40px;
}
.clean {
  width: 188px;
  height: 15px;
  text-indent: -9999px;
  position: fixed;
  bottom: 20px;
  right: 40px;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  .steps, .directionNav {
    display: none;
  }
  .print-report {
    display: block;
  }

}
.mr-top-22{
  margin-top: 22px !important;
}
.pd-top-37{
  padding-top: 37px !important;
}
.text-center{
  text-align: center;
}