*{
	margin: 0px;
	padding: 0px;

	-webkit-transition: all 1400ms cubic-bezier(0.250, 0.250, 0.475, 0.910); 
   -moz-transition: all 1400ms cubic-bezier(0.250, 0.250, 0.475, 0.910); 
     -o-transition: all 1400ms cubic-bezier(0.250, 0.250, 0.475, 0.910); 
        transition: all 1400ms cubic-bezier(0.250, 0.250, 0.475, 0.910); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.475, 0.910); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.475, 0.910); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.475, 0.910); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.475, 0.910); /* custom */
}

html{
	background: #EFEFEF;
}
h2{
	text-align: center;
	font-size: 20px;
	color: blue;
}

.painel td{
	font-size: 12px;
	padding-left: 5px;
	width: 150px;

}
.painel tr td:first-child{
	width: 100px;
	font-weight: 700;
}
.content{
	background: #EFEFEF;
	width: 90%;
	height: 600px;
	padding: 10px 0px 0px 10px;


}

/* Painel de dados */

.painel{
	width: 250px;
	height: 150px;
	border: 1px solid #212121;
	margin-top: 20px;
}

/* Area Interna */

.area-interna{
	position: absolute;
	width: 550px;
	height: 270px;
	left: 400px;
	top: 50px;
	background: #CEECF5;
	border: 1px dashed #212121;
}

.tmp{
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	width: 100px;
	height: 130px;
	border: 1px solid #212121;
	text-align: center;
}

.tmp h4{
	margin-top: 10px;
	margin-bottom: 10px;
}
.display{
	background: #04B486;
	border-radius: 1px;
	border-left: 10px solid #212121;
	border-right: 10px solid #212121;
	padding: 5px;
	border-top: 1px solid #212121;
	border-bottom: 1px solid #212121;

}
.tmp h3{
	margin-left: 5px;
	margin-right: 5px;
	font-size: 15px;
}

.tmp h3 img{
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

.img-split{
    position: absolute;
	z-index: 2;
	left: 100px;
	top: 10px;
}

.img-power{
    position: absolute;
	z-index: 2;
	top: 10px;
}


.img-split img{
	width: 380px;
	height: 100px;
}

.img-power img{
	position: absolute;
	width: 70px;
	height: 100px;
	left: 10px;
	cursor: pointer;
}



/* Area Externa */

.tmp-externa{
  position: absolute;
  top: 250px;
  left: 190px;
  background: #A4A4A4;
  /* color: #FFF; */
}
.img-exaustor{
	position: absolute;
	top: 401px;
	left: 100px;
}
.img-exaustor img{
	width: 260px;
	height: 170px;
}

/* Criação do Tanque com CSS */

.img-tanque{
   position: absolute;
   top: 350px;
   left: 550px;
}
.tampa{
   position: absolute;
   border: 1px	solid #212121;
   width: 300px;
   height: 20px;
}
.quadrado{
   position: absolute;
   left: 10px;
   top: 21px;
   border: 1px	solid #212121;
   width: 280px;
   height: 200px;
}
.agua{
	position: absolute;
	bottom: 0px;
	background: #2E9AFE;
	width: 100%;
	height: 0px;

}

.nivel{
	position: absolute;
	width: 40px;
	height: 5px;
	background: #212121;
	right: -15px;
	top: 30px;
	z-index: 4;
}
.nivel p{
	position: absolute;
/* 	background: transparent; */
	color: #212121;
	left: 50px;
	width: 100px;
	text-align: center;
	padding: 10px;
	border: 1px solid #212121;
}

.alerta{
	background: red;
	color: #FFF;
}
 
.alerta {
	background: #FA5858;
}

.mangueiras-split{
	position: absolute;
	left: 600px;
	top: 160px;
	z-index: 3;
}
.mg-split{
	position: absolute;
	width: 8px;
	height: 300px;
	/* background: #0B2161; */
	background: #2E9AFE;
	border: 1px solid #212121;
}
.left{
	height: 230px;
}
.right{
  position: absolute;
  left: 150px;
  height: 350px;
}

.mangueiras-exaustor{
	position: absolute;
	left: 350px;
	top: 450px;
	z-index: 3;
}
.mg-exaustor{
	position: absolute;
	width: 300px;
	height: 8px;
	background: #FF8000;
	/* border: 1px solid #212121; */
	/* border-right: 0px; */
}
.up{
	
}
.down{
  position: absolute;
  top: 80px;
}

/* REsistor */

.res{
	position: absolute;
	background: transparent;
	width: 35px;
	height: 25px;
	border-radius: 50%;
	left: 280px;
	border: 8px solid  #FF8000;
}

.res-1{
	top: 0px;
}
.res-2{
    top: 25px;
}

.res-3{
   top: 48px;
}

.ex-fluxo{
	display: none;
   position: absolute;
   width: 40px;
   height: 5px;
   z-index: 4;
   background: #fff;
   
}

.up .ex-fluxo{
	top: 1px;
}
.down .ex-fluxo{
	top: 1px;
}

.ani-ex-fluxo1{
	display: block;
	animation: ex-fluxo1 1s infinite;
}

@keyframes ex-fluxo1{
	from{ left: 275px; }
	to {left:0px;}
}

.ani-ex-fluxo2{
	display: block;
	animation: ex-fluxo2 1s infinite;
}

@keyframes ex-fluxo2{
	from{ left: 0px; }
	to {left:275px;}
}


.mg-split .ex-fluxo{
	/* background: #2E9AFE; */

}
.ani-split-fluxo1{
	display: block;
	left: 1px;
	width: 5px;
	height: 30px;
	animation: split-fluxo1 1.3s infinite;
}

@keyframes split-fluxo1{
	from{ top: 0px; }
	to {top:198px;}
}

.ani-split-fluxo2{
	display: block;
	left: 1px;
	width: 5px;
	height: 30px;
	animation: split-fluxo2 .8s infinite;
}

@keyframes split-fluxo2{
	from{ top: 300px; }
	to {top:1px;}
}


/* TErmometro */


.termometro{
	position: absolute;
	width: 80px;
	display: inline;
}
/* .termometro span{
	display: inline;

} */

.left .termometro,.right .termometro{
	bottom: -10px;
	left: 10px;
}

.termometro img, .fluxometro img{
	width: 15px;
	height: 20px;
	/* display: inline; */
	vertical-align: middle;
}

.up .termometro, .down .termometro{
	left: 50px;
	top:  -30px;
}


.fluxometro{
	position: absolute;
	top : 100px;
	left: -90px;
}

.image-fluxometro::before{
  position: absolute;
  background: transparent;
  width: 50px;
  height: 20px;
  content: "";
  border-bottom:2px solid white ;
  border-radius: 50%;
  top:-25px;
}

.image-fluxometro{
	position: absolute;
	width: 50px;
	height: 10px;
	background: #FAFAFA;
	left: 70px;
	border:1px solid #CDCDCD ;
}

.image-fluxometro::after{
  position: absolute;
  background: transparent;
  width: 50px;
  height: 20px;
  content: "";
  top:20px;
  border-top:2px solid white ;
  border-radius: 50%;
  top:13px;
}