/* -- Clean, Lovely, Happy Rainbow Colors -- */
.confidence {
  color: #0165a3;
}
.hope {
  color: #19ace3;
}
.forrest {
  color: #21b473;
}
.easter {
  color: #ffd24d;
}
.holland {
  color: #fe812f;
}
.barbie {
  color: #f6696a;
}
.confidence-bg {
  background-color: #19ace3;
}
.hope-bg {
  background-color: #19ace3;
}
.forrest-bg {
  background-color: #21b473;
}
.easter-bg {
  background-color: #ffd24d;
}
.holland-bg {
  background-color: #fe812f;
}
.barbie-bg {
  background-color: #f6696a;
}
/* -- The Dark Side -- */
.sith {
  color: #1a2526;
}
.anakin {
  color: #273738;
}
.darth-vader {
  color: #33464a;
}
.jabba {
  color: #4f6162;
}
.darth-maul {
  color: #53777a;
}
.sith-bg {
  background-color: #1a2526;
}
.anakin-bg {
  background-color: #273738;
}
.darth-vader-bg {
  background-color: #33464a;
}
.jabba-bg {
  background-color: #4f6162;
}
.darth-maulr-bg {
  background-color: #53777a;
}
.auto-clear:after {
  content: " ";
  display: table;
  clear: both;
}
.hide-text {
  text-transform: capitalize;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
.overflow-ellipsis {
  display: block;
  -o-text-overflow: ellipsis;
  /* Opera */
  text-overflow: ellipsis;
  /* IE, Safari (WebKit) */
  overflow: hidden;
  /* don't show excess chars */
  white-space: nowrap;
  /* force single line */
}
.reset-basic {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
}
.top-left {
  position: absolute;
  top: 0px;
  left: 0px;
}
.top-right {
  position: absolute;
  top: 0px;
  right: 0px;
}
.bottom-left {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.bottom-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.full-size {
  width: 100%;
  height: 100%;
}
.block {
  display: block;
}
.content-box {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* Fonts */
@font-face {
  font-family: 'ec_square_sans_probold';
  src: url('../Fonts/ecsquaresanspro-bold-webfont.eot');
  src: url('../Fonts/ecsquaresanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/ecsquaresanspro-bold-webfont.woff') format('woff'), url('../Fonts/ecsquaresanspro-bold-webfont.ttf') format('truetype'), url('../Fonts/ecsquaresanspro-bold-webfont.svg#ec_square_sans_probold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ec_square_sans_proregular';
  src: url('../Fonts/ecsquaresanspro-regular-webfont.eot');
  src: url('../Fonts/ecsquaresanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/ecsquaresanspro-regular-webfont.woff') format('woff'), url('../Fonts/ecsquaresanspro-regular-webfont.ttf') format('truetype'), url('../Fonts/ecsquaresanspro-regular-webfont.svg#ec_square_sans_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
img,
section,
div,
span,
p,
input {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/*
    'Field' (Body)
    - 'Section'
    ---- 'Container' 
    -------- 'Compartment'
    ----------- 'Box'
    -------------- 'Product'
    ----------------- 'Element'

    In Every type a 'Compilation' can be added to divide, seperate or structurize

 */
/* Z-index Stack */
* {
  /* Prevent any object from being highlighted upon touch event*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  width: 100%;
  height: 100%;
  background: #e2f7fa;
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  font-family: 'ec_square_sans_probold';
}
h1 {
  color: #0165a3;
  font-size: 31px;
  line-height: 38px;
}
h2 {
  color: #33464a;
  font-size: 20px;
  margin: 20px 0 0 0;
}
h3 {
  color: #69d2e7;
  font-size: 20px;
}
h4 {
  color: #33464a;
  font-size: 20px;
  margin: 20px 0 0 0;
}
p {
  color: #33464a;
  font-size: 14px;
}
p.small {
  font-size: 11px;
}
p.bold {
  font-weight: bold;
}
.capitalized {
  text-transform: uppercase;
}
.error {
  color: #cf2b36 !important;
}
.button {
  width: 9px;
  height: 9px;
  display: block;
  padding: 13px 13px 13px 13px;
  background-color: #0165a3;
  background-position: center center;
  border-radius: 7px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 23px;
  text-decoration: none;
  cursor: pointer;
}
.button:focus,
.button:active,
.button:visited {
  color: #fff;
}
.button.single-line {
  width: auto;
  height: auto;
  display: inline-block;
  position: relative;
  margin: 13px 0 0 0;
  font-size: 16px;
  padding: 8px 18px 8px 18px;
}
.button.keyboard {
  width: 20px;
  height: 14px;
  position: absolute;
  top: 21px;
  left: 318px;
  background-image: url(../Images/btn-keyboard.png);
  background-repeat: no-repeat;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .button.keyboard {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-keyboard@2x.png);
    background-size: 30px 30px;
  }
}
.button.close {
  border-radius: 7px;
  position: absolute;
  top: 18px;
  right: 9px;
  bottom: auto;
  left: auto;
  background-image: url(../Images/btn-close.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .button.close {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-close@2x.png);
    background-size: 30px 30px;
  }
}
.application-field {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  opacity: 0;
}
.header-section {
  width: 100%;
  height: 90px;
  top: -140px;
  position: relative;
  min-width: 1024px;
  background-color: #fff;
  z-index: 2000;
  /*display:none;*/
}
.header-section .ec-mark {
  width: 130px;
  height: 100px;
  position: absolute;
  top: 20px;
  right: 50%;
  bottom: auto;
  left: 50%;
  margin: 0 0 0 -50px;
  background-image: url(../Images/ec-mark.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .header-section .ec-mark {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/ec-mark@2x.png);
    background-size: 130px 100px;
  }
}
.scene-section {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 500;
}
.scene-section .scene-compartment {
  width: 100%;
  height: 768px;
  position: absolute;
  top: 0px;
  left: -200px;
  min-width: 1024px;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
}
.scene-section .scene-compartment .background-compartment {
  width: 2500px;
  height: 600px;
  position: absolute;
  top: 0px;
  left: 0px;
  /* Controlled by script */
  -ms-transform: scale(1.1) translate(-300px, -50px);
  -webkit-transform: scale(1.1) translate(-300px, -50px);
  transform: scale(1.1) translate(-300px, -50px);
  background-image: url('../Images/scenes/background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.scene-section .scene-compartment .scene-shading {
  width: 1500px;
  height: 879px;
  position: absolute;
  top: 0px;
  left: 0px;
  /* Controlled by script */
  -ms-transform: scale(1.2) translate(-370px, 90px);
  -webkit-transform: scale(1.2) translate(-370px, 90px);
  transform: scale(1.2) translate(-370px, 90px);
  /*background-image: url('../Images/scenes/10-45-0.png');*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.scene-section .button.home {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 25px;
  left: 25px;
  /*background-image: url('../Images/btn-home.png');
        background-repeat:no-repeat;*/
  background-image: url(../Images/btn-home.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .scene-section .button.home {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-home@2x.png);
    background-size: 20px 20px;
  }
}
.scene-section .button.language {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 115px;
  left: 25px;
  /*background-image: url('../Images/btn-home.png');
        background-repeat:no-repeat;*/
  background-image: url(../Images/flags/btn-language-it.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .scene-section .button.language {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/flags/btn-language-it@2x.png);
    background-size: 20px 20px;
  }
}
.scene-section .button.single-line {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 3px;
  left: 10px;
  background-color: transparent;
  color: #53777a;
  border-radius: 0px;
  font-size: 14px;
}
.info-section {
  width: 430px;
  height: 768px;
  /* 625 - 768 - controlled by script */
  position: absolute;
  top: 0px;
  right: auto;
  bottom: auto;
  left: 700px;
  /* Controlled by script */
  z-index: 600;
}
.info-section .bg-element {
  width: 100%;
  height: 100%;
  background-image: url(../Images/info-bg.png);
  background-repeat: repeat-x;
  position: absolute;
  top: 0px;
  left: 0px;
  top: -500px;
  opacity: 0;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .bg-element {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/info-bg@2x.png);
    background-size: 40px 679px;
  }
}
.info-section .info-content-container {
  width: 430px;
  height: 200px;
  /* Controlled by script */
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.info-section .info-content-container .intro-compartment {
  width: 380px;
  height: 200px;
  position: absolute;
  top: 140px;
  left: 30px;
  opacity: 0;
}
.info-section .info-content-container .intro-compartment .intro-step {
  position: absolute;
  top: 80px;
  left: 0;
  display: none;
  opacity: 0;
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  width: 372px;
  height: 110px;
  margin: 17px 0 0 0;
  border-bottom: 1px solid #cce4d7;
  overflow: hidden;
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li {
  width: 92px;
  height: 25px;
  padding: 65px 0 0 0;
  display: block;
  float: left;
  list-style: none;
  border-right: 1px solid #cce4d7;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  background-position: center -12px;
  color: #33464a;
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li.surface-area-image {
  background-image: url('../Images/profile-factors/opening-surface.png');
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li.roof-angle-image {
  background-image: url('../Images/profile-factors/opening-angle.png');
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li.orientation-image {
  background-image: url('../Images/profile-factors/opening-orientation.png');
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li.shading-image {
  background-image: url('../Images/profile-factors/opening-shading.png');
}
.info-section .info-content-container .intro-compartment #intro-step-1 ul.factors-list li:last-child {
  border: none;
}
.info-section .info-content-container .intro-compartment #intro-step-1 .button.new-profile,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.create-profile,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.continue-profile {
  width: 190px;
  height: 47px;
  position: relative;
  margin: 30px 0 0 0;
}
.info-section .info-content-container .intro-compartment #intro-step-1 .button.new-profile .user,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.create-profile .user,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.continue-profile .user {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 46px;
  right: -10px;
  bottom: auto;
  left: auto;
  background-image: url(../Images/btn-user.png);
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: center center;
  border-radius: 7px;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .info-content-container .intro-compartment #intro-step-1 .button.new-profile .user,
  .info-section .info-content-container .intro-compartment #intro-step-1 .button.create-profile .user,
  .info-section .info-content-container .intro-compartment #intro-step-1 .button.continue-profile .user {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-user@2x.png);
    background-size: 30px 30px;
  }
}
.info-section .info-content-container .intro-compartment #intro-step-1 .button.new-profile.white,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.create-profile.white,
.info-section .info-content-container .intro-compartment #intro-step-1 .button.continue-profile.white {
  width: 138px;
  height: 23px;
  font-size: 15px;
  margin: 20px 0 0 0;
  color: #0165a3;
  background-color: #eaf9d2;
}
.info-section .info-content-container .intro-compartment #intro-step-1 .button.continue-profile {
  display: none;
}
.info-section .info-content-container .intro-compartment #intro-step-2 .location-box {
  width: 365px;
  height: 160px;
  position: relative;
  border-bottom: 1px solid #cce4d7;
  margin: 21px 0 12px 0;
}
.info-section .info-content-container .results-compartment {
  width: 310px;
  height: 370px;
  position: absolute;
  top: 25px;
  left: 145px;
  overflow: hidden;
  display: none;
}
.info-section .info-content-container .results-compartment .results-box {
  height: 50px;
  overflow: hidden;
}
.info-section .info-content-container .results-compartment .results-box .total-result-element {
  width: 40px;
  height: 50px;
  position: relative;
  float: left;
  line-height: 52px;
  margin: 0 5px 8px 0;
  background-color: #33464a;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
}
.info-section .info-content-container .results-compartment .results-box .total-result-element.kwh {
  width: 40px;
  height: 38px;
  margin: 0;
  padding: 12px 0 0 0;
  background-color: #c1d6da;
  font-size: 11px;
  color: #33464a;
  line-height: 13px;
}
.info-section .info-content-container .results-compartment .results-box .total-result-element.roller span {
  width: 1em;
  height: 700px;
  position: absolute;
  top: 0px;
  left: 3px;
  display: block;
}
.info-section .info-content-container .results-compartment .results-box .season-result-element {
  width: 130px;
  height: 35px;
  position: relative;
  margin: 5px 5px 0 0;
  float: left;
  background-color: #c1d6da;
  color: #33464a;
  border-radius: 7px;
  line-height: 13px;
  font-size: 13px;
  opacity: 0;
}
.info-section .info-content-container .results-compartment .results-box .season-result-element span {
  width: 20px;
  height: 35px;
  display: block;
  line-height: 35px;
  padding: 0 0 0 10px;
  float: left;
}
.info-section .info-content-container .results-compartment .results-box .season-result-element span.value {
  width: 81px;
  height: 35px;
  text-align: right;
  font-weight: bold;
  font-size: 16px;
}
.info-section .info-content-container .results-compartment .results-box .default-line {
  width: 265px;
  height: 1px;
  margin: 55px 0 1px 0;
  border-color: #d9ecef;
}
.info-section .info-content-container .results-compartment .button.sizing {
  margin: -3px 0 0 117px;
  background-color: transparent;
}
.info-section .info-content-container .results-compartment .button.sizing.expand {
  background-image: url(../Images/btn-expand.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .info-content-container .results-compartment .button.sizing.expand {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-expand@2x.png);
    background-size: 30px 30px;
  }
}
.info-section .info-content-container .results-compartment .button.sizing.collapse {
  background-image: url(../Images/btn-collapse.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .info-content-container .results-compartment .button.sizing.collapse {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-collapse@2x.png);
    background-size: 30px 30px;
  }
}
.info-section .family-element {
  width: 230px;
  height: 250px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  right: -20px;
  bottom: -300px;
  background-image: url(../Images/family.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .family-element {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/family@2x.png);
    background-size: 230px 250px;
  }
}
.info-section .speech-bubble-container {
  width: 155px;
  height: 75px;
  position: absolute;
  top: auto;
  right: 168px;
  bottom: 130px;
  left: auto;
  /* Controlled by script */
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  display: none;
}
.info-section .speech-bubble-container .tail {
  width: 25px;
  height: 17px;
  position: absolute;
  top: 22px;
  right: 0px;
  bottom: auto;
  left: auto;
  background-image: url(../Images/speech-bubble-tail.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .speech-bubble-container .tail {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/speech-bubble-tail@2x.png);
    background-size: 25px 17px;
  }
}
.info-section .speech-bubble-container .speech-bubble {
  width: 110px;
  height: 55px;
  position: absolute;
  top: 0px;
  right: 24px;
  bottom: auto;
  left: auto;
  border-radius: 7px;
  background-color: #fff;
  font-weight: bold;
  padding: 0 0 0 20px;
}
.info-section .speech-bubble-container .speech-bubble p {
  font-size: 10px !important;
  line-height: 12px;
}
.info-section .speech-bubble-container .button.household {
  border-radius: 7px;
  position: absolute;
  top: 40px;
  right: auto;
  bottom: auto;
  left: -23px;
}
.info-section .speech-bubble-container .button.household.open {
  background-image: url(../Images/btn-open.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .speech-bubble-container .button.household.open {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-open@2x.png);
    background-size: 30px 30px;
  }
}
.info-section .speech-bubble-container .button.household.close {
  background-image: url(../Images/btn-close.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .info-section .speech-bubble-container .button.household.close {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-close@2x.png);
    background-size: 30px 30px;
  }
}
.info-section .family-details-container .button.close {
  position: absolute;
  top: 12px;
  right: 80px;
  bottom: auto;
  left: auto;
}
.info-section .family-details-container #family-details {
  position: absolute;
  top: 110px;
  right: auto;
  bottom: auto;
  left: -586px;
  z-index: 1300;
  display: none;
}
.info-section .family-details-container #family-details ul {
  width: 600px;
  list-style: none;
}
.info-section .family-details-container #family-details ul li {
  float: left;
  width: 128px;
  height: 135px;
  list-style: none;
  background-color: #f6696a;
  padding: 155px 20px 15px 20px;
  margin: 2px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: scale(0);
}
.info-section .family-details-container #family-details ul li.popping {
  -webkit-animation: scalePop 1s;
  -webkit-animation-fill-mode: forwards;
}
.info-section .family-details-container #family-details ul li.poppingDown {
  -webkit-animation: scalePopDown 1s;
  -moz-animation: scalePopDown 1s;
  -o-animation: scalePopDown 1s;
  animation: scalePopDown 1s;
  -webkit-animation-fill-mode: forwards;
}
.info-section .family-details-container #family-details ul li h3 {
  color: #ffd24d;
  text-align: center;
  margin: 0 0 0 5px;
  font-size: 2em;
}
.info-section .family-details-container #family-details ul li p {
  color: #fff;
  font-size: 1em;
  line-height: 1.2em;
  text-align: center;
  margin: 0;
  font-family: 'ec_square_sans_probold';
}
.info-section .family-details-container #family-details ul li p span {
  font-size: 1em;
  display: block;
  font-weight: normal;
  font-family: 'ec_square_sans_proregular';
}
.info-section .family-details-container #family-details ul #lamp {
  background-image: url(../Images/household/icon-spaarlamp.png);
  background-repeat: no-repeat;
  background-position: center 25px;
}
.info-section .family-details-container #family-details ul #computer {
  background-image: url(../Images/household/icon-computer.png);
  background-repeat: no-repeat;
  background-position: center 25px;
}
.info-section .family-details-container #family-details ul #fridge {
  background-image: url(../Images/household/icon-koelkast.png);
  background-repeat: no-repeat;
  background-position: center 25px;
}
.info-section .family-details-container #family-details ul #dish {
  background-image: url(../Images/household/icon-vaatwasser.png);
  background-repeat: no-repeat;
  background-position: center 25px;
  margin-left: 120px;
}
.info-section .family-details-container #family-details ul #tv {
  background-image: url(../Images/household/icon-tv.png);
  background-repeat: no-repeat;
  background-position: center 25px;
}
.profile-section {
  width: 100%;
  height: 160px;
  position: absolute;
  top: 625px;
  left: 0px;
  min-width: 1024px;
  z-index: 1100;
}
.profile-section .profile-container {
  width: 100%;
  height: 160px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(../Images/profile-bar.png);
  background-repeat: repeat-x;
  background-color: #0165a3;
  z-index: 1105;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .profile-container {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-bar@2x.png);
    background-size: 15px 35px;
  }
}
.profile-section .profile-container .profile-items-compartment {
  width: 1024px;
  height: 163px;
  background-image: url(../Images/profile-item-bg.png);
  background-repeat: repeat-x;
  background-position: 0px 35px;
  margin: 0 auto 0 auto;
  position: relative;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .profile-container .profile-items-compartment {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-item-bg@2x.png);
    background-size: 171px 128px;
  }
}
.profile-section .profile-container .profile-items-compartment .edit-element {
  width: 195px;
  height: 160px;
  position: absolute;
  top: 0px;
  left: 0px;
  left: 158px;
  background-image: url(../Images/profile-item-edit-modus.png);
  background-repeat: no-repeat;
  z-index: 1110;
  display: none;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .profile-container .profile-items-compartment .edit-element {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-item-edit-modus@2x.png);
    background-size: 195px 160px;
  }
}
.profile-section .profile-container .profile-items-compartment .item-box {
  width: 169.5px;
  height: 160px;
  z-index: 1200;
  float: left;
  position: relative;
  cursor: pointer;
}
.profile-section .profile-container .profile-items-compartment .item-box .header {
  width: 169px;
  height: 27px;
  display: block;
  position: relative;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 8px 0 0 0;
  margin: 0;
  opacity: 0;
}
.profile-section .profile-container .profile-items-compartment .item-box .header.inactive {
  color: #19ace3;
  text-align: left;
  padding: 8px 0 0 12px;
  width: 157px;
}
.profile-section .profile-container .profile-items-compartment .item-box .header br {
  display: none;
}
.profile-section .profile-container .profile-items-compartment .item-box .button.edit-profile {
  position: absolute;
  top: -10px;
  right: 10px;
  bottom: auto;
  left: auto;
  background-image: url(../Images/btn-edit-blue.png);
  background-repeat: no-repeat;
  display: none;
  background-color: #fff;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .profile-container .profile-items-compartment .item-box .button.edit-profile {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-edit-blue@2x.png);
    background-size: 30px 30px;
  }
}
.profile-section .profile-container .profile-items-compartment .item-box .content {
  width: 100%;
  height: 128px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  top: 27px;
  opacity: 0;
}
.profile-section .profile-container .profile-items-compartment .item-box .content .icon {
  width: 169px;
  height: 140px;
  position: absolute;
  top: 18px;
  right: auto;
  bottom: auto;
  left: 0px;
  background-image: url('../Images/profile-factors/surface-1-active.png');
  background-repeat: no-repeat;
  margin: 0 0 0 0;
}
.profile-section .profile-container .profile-items-compartment .item-box .content .title {
  width: 169px;
  height: 80px;
  position: absolute;
  top: 100px;
  right: auto;
  bottom: auto;
  left: 0px;
  margin: 0 0 0 0;
  color: #fff;
  font-size: 12px;
  text-align: center;
  display: block;
}
.profile-section .profile-container .profile-items-compartment .item-delimiter {
  width: 1px;
  height: 120px;
  background-image: url(../Images/profile-item-delimiter.png);
  background-repeat: no-repeat;
  float: left;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .profile-container .profile-items-compartment .item-delimiter {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-item-delimiter@2x.png);
    background-size: 1px 160px;
  }
}
.profile-section .edit-profile-container {
  width: 100%;
  height: 260px;
  background-image: url(../Images/profile-selection-bg.png);
  background-repeat: repeat-x;
  position: absolute;
  top: 0px;
  left: 0px;
  border-top: 4px solid #fff;
  z-index: 1090;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .edit-profile-container {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-selection-bg@2x.png);
    background-size: 50px 190px;
  }
}
.profile-section .edit-profile-container .edit-profile-compartment {
  width: 986px;
  height: 260px;
  margin: 0 auto 0 auto;
  position: relative;
  padding: 0 0 0 22px;
}
.profile-section .edit-profile-container .edit-profile-compartment .column {
  width: 455px;
  height: 175px;
  margin: 0 28px 0 0;
  float: left;
  position: relative;
}
.profile-section .edit-profile-container .edit-profile-compartment .column p {
  font-size: 13px;
}
.profile-section .edit-profile-container .edit-profile-compartment .column h2 br {
  display: none;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .item {
  width: 75px;
  height: 185px;
  float: left;
  position: relative;
  cursor: pointer;
  display: none;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .item p.header {
  text-align: center;
  padding: 6px 0 0 0;
  font-size: 14px;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .item .icon {
  width: 60px;
  height: 100px;
  background-image: url('../Images/profile-factors/surface-1.png');
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: center top;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .item.active p.header {
  color: #fff !important;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .location-item {
  width: 433px;
  height: 255px;
  padding: 5px 0 0 22px;
  float: left;
  position: relative;
  background-color: #5ac0d9;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .location-item label {
  color: #fff;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .location-item input {
  margin: 5px 0 0 0;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .location-item .button.single-line {
  margin: 20px 0 0 0;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .location-item .button.keyboard {
  left: 314px;
  top: 43px;
}
.profile-section .edit-profile-container .edit-profile-compartment .column .delimiter {
  width: 1px;
  height: 185px;
  background-image: url(../Images/profile-item-selection-delimiter.png);
  background-repeat: no-repeat;
  float: left;
  position: relative;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .profile-section .edit-profile-container .edit-profile-compartment .column .delimiter {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/profile-item-selection-delimiter@2x.png);
    background-size: 1px 168px;
  }
}
.profile-section .edit-profile-container .edit-profile-compartment .column.wide {
  width: 460px;
}
.footer-section {
  width: 100%;
  height: 325px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0px;
  left: 0px;
  background-color: #33464a;
  z-index: 1400;
  min-width: 1024px;
}
.footer-section .button.close-footer {
  border-radius: 7px;
  background-color: #53777a;
  position: absolute;
  top: 18px;
  right: -56px;
  bottom: auto;
  left: auto;
  background-image: url(../Images/btn-close.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .footer-section .button.close-footer {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/btn-close@2x.png);
    background-size: 30px 30px;
  }
}
.footer-section .footer-content-container {
  width: 880px;
  height: 325px;
  margin: 0 auto 0 auto;
  position: relative;
}
.footer-section .footer-content-container .column-compartment {
  width: 400px;
  height: 280px;
  margin: 35px 20px 0 20px;
  float: left;
}
.footer-section .footer-content-container .column-compartment p {
  color: #fff !important;
  font-size: 12px;
  line-height: 20px;
}
.footer-section .footer-content-container .column-compartment a {
  color: #bcfd65;
}
.screensaver-section {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 1024px;
  z-index: 1600;
  display: none;
  background-color: #fff;
}
.screensaver-section .background {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('../Images/screensaver/background.jpg') no-repeat;
}
.screensaver-section h1 {
  position: absolute;
  top: 160px;
  right: auto;
  bottom: auto;
  left: 100px;
  text-transform: uppercase;
  font-size: 50px;
  line-height: 60px;
  font-family: 'ec_square_sans_probold';
}
.screensaver-section .strip {
  width: 3840px;
  height: 60px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 100px;
  left: 120px;
  background-color: #0165a3;
}
.screensaver-section .strip ul {
  width: 3840px;
  height: 60px;
  display: block;
  overflow: hidden;
}
.screensaver-section .strip ul li {
  display: block;
  float: left;
  color: lightblue;
  font-size: 2.0em;
  font-family: 'ec_square_sans_proregular';
  margin: -6px 50px;
}
.screensaver-section .family {
  width: 460px;
  height: 407px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0px;
  left: 40px;
  background: url('../Images/screensaver/family.png') no-repeat;
}
.keyboard-section {
  width: 100%;
  height: 325px;
  position: absolute;
  top: auto;
  right: auto;
  bottom: -350px;
  left: 0px;
  min-width: 1024px;
  z-index: 1800;
  display: block;
  background-color: #fff;
}
.jrc-mark {
  width: 64px;
  height: 43px;
  position: absolute;
  top: auto;
  right: 50%;
  bottom: 0px;
  left: 50%;
  margin: 0 0 0 -34px;
  background-image: url(../Images/jrc-mark.png);
  background-repeat: no-repeat;
}
@media (min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .jrc-mark {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../Images/jrc-mark@2x.png);
    background-size: 64px 43px;
  }
}
label {
  font-style: italic;
  font-size: 13px;
  color: #53777a;
  display: block;
  margin: 15px 0 0 0;
  padding: 0 0 0 5px;
}
input {
  width: 340px;
  height: 20px;
  border: none;
  display: block;
  color: #0165a3;
  padding: 10px;
  margin: 3px 0 0 0;
  font-size: 16px;
  font-weight: bold;
  background-image: url(../Images/btn-keyboard.png) !important;
  background-position: right center;
  background-repeat: no-repeat;
  border-radius: 7px;
}
.ui-keyboard {
  padding: 24px;
  z-index: 6000;
  opacity: 1;
  min-width: 660px;
  background: #e2f7fa;
}
.ui-keyboard-preview-wrapper {
  height: 50px;
}
.ui-keyboard-preview-wrapper input {
  width: 100%;
  height: 46px;
  margin-bottom: 2em;
  padding: 0 15px;
  font-size: 1.3em;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-keyboard.ui-widget-content {
  background: #fff;
}
.ui-widget-content {
  border: none;
  color: #0165a3;
}
.ui-keyboard- {
  background-color: #0165a3 !important;
  opacity: 1  !important;
}
.ui-keyboard- span {
  display: block;
  height: 25px;
}
.ui-keyboard-button {
  padding: 13px;
  min-width: 60px;
  min-height: 60px;
  margin: 3px;
  color: #fff;
  font-size: 24px !important;
  background: none !important;
  background-color: #0165a3 !important;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
}
.ui-keyboard-97 {
  margin-left: 25px;
}
.ui-keyboard-122 {
  margin-left: 50px;
}
.ui-keyboard-space {
  margin-left: 100px;
  width: 390px;
  color: #0165a3 !important;
}
.ui-keyboard-space.ui-state-down {
  color: #0165a3 !important;
}
.ui-keyboard-bksp {
  width: 130px;
  height: 60px !important;
  padding: 3px !important;
  text-transform: lowercase !important;
  float: right;
  margin-right: 18px !important;
}
.ui-keyboard-bksp label {
  font-size: 18px !important;
  display: block !important;
}
.ui-keyboard-bksp label.inner {
  text-transform: capitalize !important;
  color: #fff;
  font-size: 0.5em !important;
  text-align: left;
  line-height: 10px;
  padding: 0 0 0 8px;
}
.ui-keyboard-bksp label.icon {
  float: left;
  margin-left: 10px;
  margin-top: -5px !important;
  font-size: 1.0em !important;
  color: #fff;
  line-height: 34px;
}
.ui-keyboard-accept {
  min-width: 159px;
  background-color: #fe812f !important;
  border: none;
}
.ui-keyboard-button.ui-state-down {
  background-color: #69d2e7 !important;
}
@-webkit-keyframes scalePop {
  0% {
    -webkit-transform: scale(0);
  }
  30% {
    -webkit-transform: scale(1.2);
  }
  60% {
    -webkit-transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(0.9);
  }
}
@-webkit-keyframes scalePopDown {
  0% {
    -webkit-transform: scale(0.9);
  }
  30% {
    -webkit-transform: scale(0.85);
  }
  60% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(0);
  }
}