body {
    overflow-x: hidden;
}

.headline {

    text-align: left;
    font-size: 18px;
    font-family: arial;
    color: #FFFFFF;
}

.topline {

    text-align: left;
    font-size: 22px;
    font-family: arial;
    color: #000000;
}
.topline2 {

    text-align: left;
    font-size: 18px;
    font-family: arial;
    color: #000000;
}

.kp {
    background-image: url("pixel.png");
    text-align: center;
    font-size: 10px;
    font-family: arial;
    opacity: 1.0;
    color: #FFFFFF;
}

.kptext {
    background-image: url("pixel.png");
    text-align: right;
    font-size: 10px;
    font-family: arial;
    opacity: 1.0;
    color: #FFFFFF;
}

.time {
    text-align: center;
    font-size: 10px;
    color: #FFFFFF;
    font-family: arial;
    background: #949494;
}
.timeday{
    text-align: center;
    font-size: 10px;
    color: #FFFFFF;
    font-family: arial;
    background: #d3d3d3;
}

.sky-col {
    font-family: arial;
    font-size: 10px;
    color: #000000;
}

.sky {
    background: #FFFFFF;
    text-align: center;
}

.sky1 {
    background: #f4f4f4;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky2 {
    background: #e8e8e8;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky3 {
    background: #dcdcdc;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky4 {
    background: #d1d1d1;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky5 {
    background: #c5c5c5;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky6 {
    background: #b9b9b9;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky7 {
    background: #aeaeae;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky8 {
    background: #a2a2a2;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky9 {
    background: #979797;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.sky10 {
    background: #6E6E6E;
    text-align: center;
    font-size: 10px;
    color: #000000;
    font-family: arial;

}

.skypast {
    background-color: #FFFFFF;
    background-image: url("https://www.transparenttextures.com/patterns/diagonal-noise.png");

}

.location {
    text-align: right;
    font-size: 10px;
    color: #000000;
    font-family: arial;
}

.time2 {
    text-align: center;
    font-size: 9px;
    color: #FFFFFF;
    font-family: arial;
    background: #CCCCCC;
}

.date {
    text-align: left;
    font-size: 12px;
    font-family: arial;

}
.loc {
    text-align: right;
    font-size: 12px;
    font-family: arial;

}

.data {
    text-align: center;
    font-size: 10px;
    font-family: arial;
    color: #000000;

}

.img0 {
    background-image: url("pixel.png");
    opacity: 0.0;
    filter: alpha(opacity=10); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img1 {
    background-image: url("pixel.png");
    opacity: 0.08;
    filter: alpha(opacity=20); /* For IE8 and earlier */
    text-align: center;
    font-size: 8px;
    font-family: arial;
    color: black;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img2 {
    background-image: url("pixel.png");
    opacity: 0.2;
    filter: alpha(opacity=30); /* For IE8 and earlier */
    text-align: center;
    font-size: 8px;
    font-family: arial;
    color: #FFFFFF;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;

}

.img3 {
    background-image: url("pixel.png");
    opacity: 0.5;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img4 {
    background-image: url("pixel.png");
    opacity: 0.8;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img5 {
    background-image: url("pixel.png");
    opacity: 1.0;
    text-align: center;
    font-size: 8px;
    font-family: arial;
    color: #FFFFFF;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img6 {
    background-image: url("high.png");
    opacity: 0.25;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img7 {
    background-image: url("high.png");
    opacity: 0.5;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img8 {
    background-image: url("high.png");
    opacity: 0.7;
    text-align: center;
    font-size: 9px;
    font-family: arial;
    color: #FFFFFF;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
}

.img9 {
    background-image: url("high.png");
    opacity: 1.0;
    text-align: center;
    font-size: 8px;
    font-family: arial;
    color: #FFFFFF;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.test2 {
    text-align: center;
    font-size: 9px;
    color: #FFFFFF;
    font-family: arial;
    background: #559dff;
}

.test3 {
    text-align: center;
    font-size: 9px;
    color: #FFFFFF;
    font-family: arial;
    background: #83b0ed;
}

.meter {

    text-align: left;
    font-size: 9px;
    font-family: arial;
    color: #000000;

    clip: rect(0px, 60px, 200px, 0px);

    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.active {

    text-align: left;
    font-size: 12px;
    font-family: arial;
    color: #000000;

}

#logo {
    position: relative;
    bottom: -50px;
    left: 850px;

}

.scale9 {
    width: 30px;
    height: 180px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #ff52d8;
    animation-name: scale9;
}

@keyframes scale9 {
    from { height: 0px;
          background-color: white;

}
    to { height: 180px;
         background-color: #ff52d8}
}

.scale8 {
    width: 30px;
    height: 160px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #ff8be5;
    animation-name: scale8;
}
@keyframes scale8 {
    from { height: 0px;
          background-color: white;

}
    to { height: 160px;
         background-color: #ff8be5}
}

.scale7 {
    width: 30px;
    height: 140px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #ffc4f2;
    animation-name: scale7;
}
@keyframes scale7 {
    from { height: 0px;
          background-color: white;

}
    to { height: 140px;
         background-color: #ffc4f2}
}

.scale6 {
    width: 30px;
    height: 120px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #56c811;
    animation-name: scale6;
}
@keyframes scale6 {
    from { height: 0px;
          background-color: white;

}
    to { height: 120px;
         background-color: #56c811}
}

.scalex {
    width: 30px;
    height: 100px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #79d341;
    animation-name: scalex;
}
@keyframes scalex {
    0% { height: 0px;
          background-color: white;

}
    100% { height: 100px;
         background-color: #79d341}
}

.scale4 {
    width: 30px;
    height: 80px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #9ade70;
    animation-name: scale4;
}
@keyframes scale4 {
    from { height: 0px;
          background-color: white;

}
    to { height: 80px;
         background-color: #9ade70}
}
.scale3 {
    width: 30px;
    height: 60px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #bce9a0;
    animation-name: scale3;
}
@keyframes scale3 {
    from { height: 0px;
          background-color: white;

}
    to { height: 60px;
         background-color: #bce9a0}
}
.scale2 {
    width: 30px;
    height: 40px;
margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #ddf4cf;
    animation-name: scale2;
}
@keyframes scale2 {
    from { height: 0px;
          background-color: white;

}
    to { height: 40px;
         background-color: #ddf4cf}
}

.scale1 {
    width: 30px;
    height: 20px;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: -3px;
    background-color: #f6fcf3;
    animation-name: scale1;
}
@keyframes scale1 {
    from { height: 0px;
          background-color: white;

}
    to { height: 20px;
         background-color: #f6fcf3}
}
.scale0 {
    width: 30px;
    height: 0px;

    background-color: #57c811;
    animation-name: scale0;
}
@keyframes scale0 {
    from { height: 0px;
          background-color: white;

}
    to { height: 0px;
         background-color: #57c811}
}

#day1 {
    animation-duration: 1.5s;
}
#day2 {
    animation-duration: 2.5s;
}
#day3 {
    animation-duration: 4s;
}





.scale5 {
    width: 30px;
    height: 100px;
background-color: #57c811;
	-webkit-animation: scale5 2s both;
	        animation: scale5 2s both;
}


@-webkit-keyframes scale5 {
  0% {
    -webkit-transform: scaleY(0.0);
            transform: scaleY(0.0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes scale5 {
  0% {
    -webkit-transform: scaleY(0.0);
            transform: scaleY(0.0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}


.circle { 
		width: 7px; 
		height: 7px; 
		background-color: #56c811; 
		border-radius: 50%; 
		animation-name: live;
	
		-webkit-animation: live 5s infinite; /* Safari 4+ */
      -moz-animation: live 5s infinite; /* Fx 5+ */
  -o-animation: live 5s infinite; /* Opera 12+ */
  -animation: live 5s infinite; /* IE 10+, Fx 29+ */
		}
		
		@-webkit-keyframes live {
  0%   { opacity: 0; }
  25%  { opacity: 0.50; }
  50%  { opacity: 0.1; }
  75%  { opacity: 0.50; }
  100% { opacity: 0; }
}
@-moz-keyframes live {
  0%   { opacity: 0; }
  25%  { opacity: 0.50; }
  50%  { opacity: 0.1; }
  75%  { opacity: 0.50; }
  100% { opacity: 0; }
}
@-o-keyframes live {
  0%   { opacity: 0; }
  25%  { opacity: 0.50; }
  50%  { opacity: 0.1; }
  75%  { opacity: 0.50; }
  100% { opacity: 0; }
}
@keyframes live {
  0%   { opacity: 0; }
  25%  { opacity: 0.50; }
  50%  { opacity: 0.1; }
  75%  { opacity: 0.50; }
  100% { opacity: 0; }
}