/* This HTML page and script files are developed by
    Piyali Chattopadhyay
    Project Scientist-Technical,
    Virtual Labs IIT Kharagpur.*/


/*.col-md-5{
	
    width: 41.67%;
    min-width: 231px;
    float:left;
    /*position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
	background-color: none;
    text-align: center;
}

/*div.col-xs-6:nth-child(1){
    background-color: rgb(0,255,0);
}*/



/*.col-md-5 img{
    max-width: 100%;
}*/
.img-container {
    display: inline-block;
    position: relative;
}


.pipe {
	background-color: rgb(0 0 0 / 0%);;
	border: 2px solid none;
	position: absolute;
	width: 24px;
		height: 0px;
				
		
}
#pipe{
		top: 9%;
		left: 68%;
		z-index: 10;
	
}
#pipe2{
		top: 37%;
		left: 63%;
		z-index: 10;
	
}
#pipe3{
		top: 41.5%;
		left: 63%;
		z-index: 10;
	
}

#pipe4{
		top: 71%;
		left: 54%;
		z-index: 10;
	
}
#pipe5{
		top: 77%;
		left: 54%;
		z-index: 10;
	
}
#pipe6{
		top: 83%;
		left: 54%;
		z-index: 10;
	
}

.upipe {
	background-color: rgb(0 0 0 / 0%);;
	border: 2px solid none;
	position: absolute;
	width: 24px;
		height: 0px;
				
		
}
#upipe1{
		bottom: 14%;
		left: 72%;
		z-index: 10;
	
}
#upipe2{
		bottom: 18.5%;
		left: 72%;
		z-index: 10;
	
}
#upipe3{
		bottom: 36.5%;
		left: 76.5%;
		z-index: 10;
	
}

#upipe4{
		bottom: 90%;
		left: 40%;
		z-index: 10;
		width:10%
	
}
#upipe5{
		top: 4%;
		left: 70%;
		z-index: 10;
	
}
/*-----------------------------for upipe1------------------------*/
.uflow1{
	animation:uflow1 1s linear forwards;	
}

@keyframes uflow1 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 3%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/
/*-----------------------------for upipe2------------------------*/
.uflow2{
	animation:uflow2 1s linear forwards;	
}

@keyframes uflow2 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 5%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/
/*-----------------------------for upipe3------------------------*/
.uflow3{
	animation:uflow3 1s linear forwards;	
}

@keyframes uflow3 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 56%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/
/*-----------------------------for upipe4------------------------*/
.uflow4{
	animation:uflow4 1s linear forwards;	
}

@keyframes uflow4 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 5%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/
/*-----------------------------for upipe5------------------------*/
.uflow5{
	animation:uflow5 1s linear forwards;	
}

@keyframes uflow5 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 4%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/






















/*-----------------------------for pipe1------------------------*/
.tank1flow{
	animation:config1flow 2s linear forwards;	
}

@keyframes config1flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 25%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/

/*-----------------------------for between small flow/pipe2--------------------*/	
.smallflow{
	animation:smallflow 2s linear forwards;	
}

@keyframes smallflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 4%;}/*background-color:#0db4fd}*/
}	
/*------------------------------------------------------------------------*/

/*-----------------------------for tank2/pipe3 flow---------------------------*/	
.tank2flow{
	animation:tank2flow 2s linear forwards;	
}

@keyframes tank2flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 25%;}/*background-color:#0db4fd}*/
}	
/*-------------------------------------------------------------------------*/	
	
/*-----------------------------for tank2/pipe3 flow---------------------------*/	
.basinflow1{
	animation:basinflow1 2s linear forwards;	
}

@keyframes basinflow1 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 3%;}/*background-color:#0db4fd}*/
}	
/*-------------------------------------------------------------------------*/		
	
.basinflow2{
	animation:basinflow2 2s linear forwards;	
}

@keyframes basinflow2 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 4.5%;}/*background-color:#0db4fd}*/
}	
/*-------------------------------------------------------------------------*/		
.basinflow3{
	animation:basinflow3 2s linear forwards;	
}

@keyframes basinflow3 {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 6%;}/*background-color:#0db4fd}*/
}	
/*-------------------------------------------------------------------------*/		
	
	
	
	
	
	
/*wave animation if needed in future*/	
/* .wave
{
	position: absolute;
	width: 98%;
	height: 1%;
	bottom:1%;
	left:0%;
	background:#5eb5f3;
	border-radius: 11%;
	box-shadow: inset 0 0 50px rgb(187 187 219);
	/*transition: all 3s ease-out;
	animation:linear 3s forwards;
}
.wave:before,
.wave:after
{
	content: '';
	position: absolute;
	width: 95%;
	height: 63%;
	
	left: 50%;
	bottom:1%;
	transform: translate(-50%,-75%);
	background: #000;
	
}
.wave:before
{
	border-radius: 45%;
	background: rgba(255,255,255,1);
	animation: animate 10s linear infinite;
}
.wave:after
{
	border-radius: 40%;
	background: rgba(255,255,255,.5);
	animation: animate 5s linear infinite;
}
@keyframes animate
{
	0%
	{
		transform: translate(-50%,-70%) rotate(0deg);
	}
	100%
	{
		transform: translate(-50%,-75%) rotate(360deg);
	}
}

@keyframes wavy{
	
	from {height: 6%;}
	to   {height: 70%;}
}


.tankfill{
	
	animation:wavy 4s linear forwards;
}	

#glass {
background: rgba( 255, 255, 255, 0.50);
width: 12%;
height: 26%;
top:8%;
left:55%;
position: absolute;
  border-radius: 83%;
}*/
	
.tankwater{
	
	position: absolute;
	width: 14%;
	height: 0%;
		
	
	
}
.basinwater{
	
	position: absolute;
    width: 57%;
    height: 12%;
    bottom: 8%;
    left: 21.5%;
    border-radius: 50%;	
	
	
}



#level1{
	bottom:66%;
	left:61.5%;
	
}
#level2{
	bottom:33%;
	left:54.5%;
	
}
:root {
  --change: 1000px;
}
:root2 {
  --change2: 1000px;
}


@keyframes tcon1{
	
	from {height: 2%;}
	to   {height: var(--change);}
}


.tankfill{
	
	animation:tcon1 4s linear forwards;
}	

@keyframes t2con1{
	
	from {height: 2%;}
	to   {height: var(--change2);}
}


.tank2fill{
	
	animation:t2con1 4s linear forwards;
}









 
  


/* Start animations 

.valve-rotate {
	-webkit-animation: spin 2s linear;
  -moz-animation: spin 2s linear;
  animation: spin 2s linear;
}

@-moz-keyframes spin { 
  100% { -moz-transform: rotate(180deg); }
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(180deg); } 
}
@keyframes spin { 
  100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
}

.valve-rotate-reverce {
	-webkit-animation: spinReverce 2s linear;
  -moz-animation: spinReverce 2s linear;
  animation: spinReverce 2s linear;
}

@-moz-keyframes spinReverce { 
  100% { -moz-transform: rotate(-180deg); } 
}
@-webkit-keyframes spinReverce { 
  100% { -webkit-transform: rotate(-180deg); } 
}
@keyframes spinReverce {
  100% { transform:rotate(-180deg); } 
}*/
  
 #b1{
display:none;
position:absolute;
top:0%;
left:60%;
width:3%;
height:5%;
 } 
  
 #b2{
display:none;
position:absolute;
top:0.3%;
left:59%;
width:3%;
height:5%;
 }  
  
 #c1{
display:none;
position:absolute;
top:0.5%;
left:13%;
width:3%;
height:4%;
 }  
  
 #c2{
display:none;
position:absolute;
top:0%;
left:12%;
width:3.3%;
height:5%;
 }  
  
 #r1{
display:none;
position:absolute;
top:1%;
left:16%;
width:3%;
height:4%;
 }  
  
#r2{
display:none;
position:absolute;
top:0%;
left:15.3%;
width:3%;
height:5%;
 }   
  
 #sc1{
	display:none;
position:absolute;
top:65%;
left:93%;
width:4%;
height:7%; 
	 
	 
 } 
  
  #sc2{
	  
	display:none;
position:absolute;
top:52%;
left:91%;
width:3%;
height:5.4%;  
	  
	  
  }