@font-face {
    font-family: menuFont;
    src: url(../fonts/alexander.otf);
}

body {
  font-family: Arial;
  background: url('../images/zwack.png') no-repeat center center fixed;
  background-color: #2e3434;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.zwack_div{
    display: block;
}

.zwack_imgdiv1{
    display: none;
    position: fixed;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    background: url('../images/01-final.jpg') no-repeat center center fixed;
    background-color: #2e3434;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    overflow: hidden;
}

.zwack_imgdiv2{
    display: none;
    position: fixed;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    background: url('../images/02-final.jpg') no-repeat center center fixed;
    background-color: #2e3434;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    overflow: hidden;
}

.zwack_imgdiv3{
    display: none;
    position: fixed;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    background: url('../images/03-final.jpg') no-repeat center center fixed;
    background-color: #2e3434;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    overflow: hidden;
}

.zwack_imgdiv4{
    display: none;
    position: fixed;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    background: url('../images/04-final.jpg') no-repeat center center fixed;
    background-color: #2e3434;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    overflow: hidden;
}

.text_megt{
    position: relative;
    font-weight: bold;
    text-align: center;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 5%;
    font-size: 1.2vw;
}

.data_electric{
    position: absolute;
    top: 56%;
    left: 6%;
    width: 30%;
    height: 38%;
}

.data_text{
    position: relative;
    font-weight: normal;
    text-align: center;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 72%;
    font-size: 1.1vw;
}

.data_value{
    position: absolute;
    font-weight: bold;
    text-align: center;
    color: #d49e45;
    width: 100%;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 91%;
    font-size: 1.1vw;
}

.bulb_img{
    left: 15%;
    background: url("../images/bulb.svg") no-repeat;
    background-size: contain;
    z-index: 1;
}

.esign_img{
    position: absolute;
    width: 4.5vw;
    height: 4.5vh;
    left: 2vw;
    top: 2vh;
    background: url("../images/esign.svg") no-repeat;
    background-size: contain;
    z-index: 1;
}

.esign_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 2.4vh;
    left: 5vw;
    width: 50%;
    font-size: 1.5vw;
}

.esign_range{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 2.4vh;
    left: 66vw;
    width: 30%;
    font-size: 1.2vw;
}

.data_img{
    position: relative;
    width: 60%;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
    top: -9%;
}

.data_gas{
    position: absolute;
    top: 56%;
    left: 65%;
    width: 30%;
    height: 38%;
}
    
.gas_img{
    left: 10%;
    background: url("../images/gas.svg") no-repeat;
    background-size: contain;
    z-index: 1;
}

.data_co2{
    position: absolute;
    width: 40%;
    height: 38%;
    left: 32%;
    top: 18%;
}

.co2_img{
    background: url("../images/co2.svg") no-repeat;
    background-size: contain;
    z-index: 1;
}


.zwack_logo{
    position: absolute;
    width: 10vw;
    height: 16vh;
    left: 90vw;
    top: 5vh;
    background: url("../images/zwack_corner.png") no-repeat;
    background-size: contain;
    z-index: 1;
}

.napelemek_text{
    position: absolute;
    font-weight: bold;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 15vh;
    left: 10vw;
    font-size: 1.3vw;
}

.napelemek_act_power{
    position: absolute;
    font-weight: bold;
    text-align: center;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 19vh;
    left: 20.1vw;
    width: 11.9vw;
    font-size: 1.8vw;
}

.napelemek_napi_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 33vh;
    left: 10vw;
    font-size: 1.1vw;
}

.napelemek_napi_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 33vh;
    left: 20.5vw;
    width: 11.5vw;
    font-size: 1.1vw;
}

.napelemek_tegnapi_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 37vh;
    left: 10vw;
    font-size: 1.1vw;
}

.napelemek_tegnapi_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 37vh;
    left: 22vw;
    width: 10vw;
    font-size: 1.1vw;
}

.napelemek_osszes_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 41vh;
    left: 10vw;
    font-size: 1.1vw;
}

.napelemek_osszes_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 41vh;
    left: 22vw;
    width: 10vw;
    font-size: 1.1vw;
}

.napelem{
    width: 12vw;
    height: 12vh;
    background: url("../images/napelem.png") no-repeat;
    background-size: contain;
    z-index: 1;
}

.napelem_pos{
    position: absolute;
    left: 16vw;
    top: 20vh;
}

.hoszivattyu_text{
    position: absolute;
    font-weight: bold;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 15vh;
    left: 67vw;
    font-size: 1.3vw;
}

.hoszivattyu_act_power{
    position: absolute;
    font-weight: bold;
    text-align: center;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 18vh;
    left: 72vw;
    width: 11.5vw;
    font-size: 1.8vw;
}

.hoszivattyu{
    width: 11vw;
    height: 11vh;
    background: url("../images/hoszivattyu.png") no-repeat;
    background-size: contain;
    z-index: 1;
}

.hoszivattyu_pos{
    position: absolute;
    left: 73vw;
    top: 21vh;
}

.hoszivattyu_napi_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 33vh;
    left: 67vw;
    font-size: 1.1vw;
}

.hoszivattyu_napi_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 33vh;
    left: 79.5vw;
    width: 10vw;
    font-size: 1.1vw;
}

.hoszivattyu_tegnapi_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 37vh;
    left: 67vw;
    font-size: 1.1vw;
}

.hoszivattyu_tegnapi_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 37vh;
    left: 81vw;
    width: 8.5vw;
    font-size: 1.1vw;
}

.hoszivattyu_osszes_text{
    position: absolute;
    font-weight: normal;
    text-align: left;
    color: white;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 41vh;
    left: 67vw;
    font-size: 1.1vw;
}

.hoszivattyu_osszes_value{
    position: absolute;
    font-weight: bold;
    text-align: right;
    color: #d49e45;
   text-shadow:
    -0.3px -0.3px 0 #000,
    0.3px -0.3px 0 #000,
    -0.3px 0.3px 0 #000,
    0.3px 0.3px 0 #000;
    top: 41vh;
    left: 81vw;
    width: 8.5vw;
    font-size: 1.1vw;
}

.jqplot-target{
     color: #ffffff !important ;

 }
.jqplot-table-legend{
    color: #666666 !important ;

}

.jqplot-title{
    color: #ffffff;
}

.jqplot-xaxis-label{
    color: #ffffff;
}
.jqplot-yaxis-label{
    color: #ffffff;
}

.middle_box {
    position: absolute;
    background-color: rgba(80, 80, 80, 0.25);
    width: 30vw;
    height: 40vh;
    left: 35vw;
    top: 8vh;
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    border-radius: 48px;
}

#diag_cont{
    position: absolute;
    top: 50%;
    left: 10%;
    background: #3b424266;
    width: 80vw;
    height: 45vh;
}


#diagram{
    position: relative;
    left: 2.5%;
    top: 2.5%;
    height: 95%;
    width: 95%;
}

.jqplot-title { 
     font-size: 0.75vw; 
}