@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
/* Portrait */
@media screen and (orientation: portrait) {
  .wrapper {
    display: none; } }
/* Landscape */
@media screen and (orientation: landscape) {
  .wrapper {
    display: block; } }
body {
  margin: 0px;
  padding: 0 0 20px 0;
  background-color: #000; }

.turnPhone {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  color: #fff;
  font-size: 40px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
  font-family: 'Roboto', sans-serif; }
  @media only screen and (min-width: 450px) {
    .turnPhone {
      display: none; } }

.holder {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 1; }

.wrapper {
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 459px; }
  .wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center; }
    .wrapper > div.active {
      display: block; }
  @media only screen and (min-width: 450px) {
    .wrapper {
      display: block; } }

.backbtn {
  display: block;
  width: 160px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  cursor: pointer; }

.btn {
  display: block;
  width: 160px;
  height: 50px;
  position: absolute;
  bottom: 20px;
  cursor: pointer; }
  .btn.right {
    right: 20px; }
  .btn.left {
    left: 20px; }

#demomessage {
  z-index: 2; }
  #demomessage .content {
    display: block;
    width: 70%;
    margin: 10% auto;
    text-align: center;
    font-size: 20px; }
  #demomessage .close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 24px; }

#mainscreen {
  display: block;
  z-index: 0;
  position: relative;
  background-image: url(resizedimages/MAIN_SCREEN.png); }
  #mainscreen > div {
    position: absolute; }
  #mainscreen .temp {
    font-size: 146px;
    font-weight: 400;
    text-align: right;
    top: 113px;
    right: 284px; }
    #mainscreen .temp sup {
      font-size: 80%;
      vertical-align: top; }
  #mainscreen .tempbtn, #mainscreen .jumptempbtn {
    top: 263px;
    width: 70px;
    height: 50px;
    display: block;
    cursor: pointer; }
    #mainscreen .tempbtn.tempup, #mainscreen .tempup.jumptempbtn {
      right: 60px; }
    #mainscreen .tempbtn.tempdown, #mainscreen .tempdown.jumptempbtn {
      left: 50px; }
  #mainscreen .jumptempbtn {
    top: 300px;
    height: 25px; }
    #mainscreen .jumptempbtn.warm {
      left: 164px; }
    #mainscreen .jumptempbtn.hot {
      left: 354px; }
    #mainscreen .jumptempbtn.veryhot {
      left: 517px;
      width: 105px; }
  #mainscreen .warning {
    display: none;
    top: 153px;
    right: 31px; }
  #mainscreen .barholder {
    width: 504px;
    height: 8px;
    top: 268px;
    left: 145px;
    overflow: hidden;
    position: relative; }
    #mainscreen .barholder #bar {
      -webkit-transition: all 400ms ease;
      -moz-transition: all 400ms ease;
      transition: all 400ms ease;
      width: 50%;
      min-width: 1%;
      height: 10px;
      background-color: #00adee; }
  #mainscreen #wifibtn {
    width: 50px;
    height: 50px;
    top: 28px;
    left: 17px; }
  #mainscreen #systemhealthbtn {
    width: 50px;
    height: 50px;
    top: 28px;
    left: 100px; }
  #mainscreen #settingsbtn {
    width: 25%;
    height: 80px; }
  #mainscreen #statusbtn {
    width: 24%;
    height: 80px;
    left: 200px; }
  #mainscreen #servicebtn {
    width: 24%;
    height: 80px;
    left: 400px; }
  #mainscreen #disablebtn {
    width: 170px;
    height: 70px;
    top: 380px;
    left: 613px; }

#wifistatus {
  background-image: url(resizedimages/WIFI_STATUS.png); }

#wifisetup {
  background-image: url(resizedimages/WIFI_SETUP.png); }

#wifigetstarted {
  background-image: url(./resizedimages/WIFI_SETUP_GET_STARTED.png); }
  #wifigetstarted #wifisetuplater {
    width: 285px;
    height: 118px;
    bottom: 40px;
    right: 69px; }
  #wifigetstarted .backbtn {
    width: 285px;
    height: 118px;
    bottom: 40px;
    left: 65px; }

#settings {
  background-image: url(resizedimages/SETTINGS_MAIN.png); }
  #settings #basicsettingsbtn {
    top: 86px;
    left: 93px;
    width: 190px;
    height: 120px; }
  #settings #configsbtn {
    top: 86px;
    left: 304px;
    width: 190px;
    height: 120px; }
  #settings #schedulesbtn {
    top: 86px;
    left: 516px;
    width: 190px;
    height: 120px; }
  #settings #bacnetbtn {
    top: 232px;
    left: 197px;
    width: 190px;
    height: 120px; }
  #settings #timebtn {
    top: 232px;
    left: 410px;
    width: 190px;
    height: 120px; }
  #settings #wifisetupbtn {
    top: 380px;
    left: 330px;
    width: 140px;
    height: 40px; }

#basicsettings {
  background-image: url(resizedimages/BASIC_SETTINGS.png); }
  #basicsettings .demo {
    width: 770px;
    height: 300px;
    top: 61px;
    left: 13px; }

#configs {
  background-image: url(resizedimages/CONFIG_SETTINGS.png); }
  #configs .demo {
    width: 570px;
    height: 204px;
    top: 61px;
    left: 13px; }
  #configs #leakdetected, #configs #shutoff {
    position: absolute;
    top: 277px;
    left: 407px; }
    #configs #leakdetected > div, #configs #shutoff > div {
      display: none; }
      #configs #leakdetected > div img, #configs #shutoff > div img {
        display: none; }
      #configs #leakdetected > div.isactive, #configs #shutoff > div.isactive {
        display: block; }
        #configs #leakdetected > div.isactive .set, #configs #shutoff > div.isactive .set {
          display: block; }
    #configs #leakdetected.beingmodified .isactive .set, #configs .beingmodified#shutoff .isactive .set {
      display: none; }
    #configs #leakdetected.beingmodified .isactive .highlight, #configs .beingmodified#shutoff .isactive .highlight {
      display: block; }
  #configs #shutoff {
    top: 320px; }
  #configs #arrows {
    position: absolute;
    bottom: 15px;
    left: 400px;
    display: none; }
    #configs #arrows.forshutoff, #configs #arrows.forleakdetected {
      display: block; }

#schedules {
  background-image: url(resizedimages/SCHEDULE.png); }
  #schedules .demo {
    width: 100%;
    height: 390px;
    top: 60px;
    left: 0; }

#bacnet {
  background-image: url(resizedimages/BACNET.png); }
  #bacnet .demo {
    width: 100%;
    height: 310px;
    top: 60px;
    left: 0; }

#time {
  background-image: url(resizedimages/TIME_DATE.png); }
  #time .demo {
    width: 100%;
    height: 390px;
    top: 60px;
    left: 0; }

#status {
  background-image: url(resizedimages/STATUS.png); }
  #status .demo {
    width: 760px;
    height: 290px;
    top: 70px;
    left: 20px; }
  #status .morebtn {
    width: 170px;
    height: 70px;
    top: 380px;
    left: 613px; }
  #status .wifistatusbtn {
    width: 413px;
    height: 70px;
    top: 380px;
    left: 193px; }

#status-more {
  background-image: url(resizedimages/STATUS_MORE.png); }
  #status-more .demo {
    width: 760px;
    height: 290px;
    top: 70px;
    left: 20px; }
  #status-more .morebtn {
    width: 170px;
    height: 70px;
    top: 380px;
    left: 613px; }
  #status-more .wifistatusbtn {
    width: 413px;
    height: 70px;
    top: 380px;
    left: 193px; }

#service {
  background-image: url(resizedimages/SERVICE_MAIN.png); }
  #service .servicebutton {
    width: 160px;
    height: 140px;
    top: 219px; }
    #service .servicebutton#currentalarmsbtn {
      left: 50px; }
    #service .servicebutton#alarmhistorybtn {
      left: 230px; }
    #service .servicebutton#systemhealthbtn {
      left: 408px; }
    #service .servicebutton#servicealertsbtn {
      left: 586px; }

#currentalarms {
  background-image: url(resizedimages/CURRENT_ALARMS.png); }
  #currentalarms .demo {
    width: 170px;
    height: 70px;
    top: 380px;
    left: 613px; }
  #currentalarms .moreinfobtn {
    width: 406px;
    height: 70px;
    top: 380px;
    left: 200px; }

#moreinfo {
  background-image: url(resizedimages/CURRENT_ALARM_MORE_INFO.png); }

#alarmhistory {
  background-image: url(resizedimages/ALARM_HISTORY.png); }
  #alarmhistory .demo {
    width: 170px;
    height: 70px;
    top: 380px;
    left: 613px; }

#systemhealth {
  background-image: url(resizedimages/SERVICE_SYSTEM_HEALTH.png); }
  #systemhealth .blinky {
    width: 28px;
    height: 28px;
    display: block;
    position: absolute;
    background: url(resizedimages/blinky.gif) no-repeat center center; }
    #systemhealth .blinky.one {
      top: 75px;
      left: 540px; }
    #systemhealth .blinky.two {
      top: 186px;
      left: 251px; }

#servicealerts {
  background-image: url(resizedimages/SERVICE_ALERTS_ALL_ENABLED.png); }
  #servicealerts .demo {
    width: 770px;
    height: 190px;
    top: 110px;
    left: 13px; }