/*keep this same for all*/
/*the main div container parallel to and above mainBox div*/
#wepLab9 {
  position: relative;
  width: 100%;
  height: 100%;

  top: 0%;
  left: 0%;

  margin: 0;
  padding: 0;

  /*background-color: #37C2DA;*/

  /*change only this*/
}

/*instruction */
#lab9instr,
#lab9instr2,
#lab9conclusion,
#lab9conclusion2 {
  position: absolute;
  top: 3%;
  left: 0%;
  width: 100%;
  height: 10%;

  text-align: center;

  color: white;

  font-size: 1.5em;
}

#lab9instr2 {
  top: 12%;
  color: darkblue;

  font-size: 1.3em;
}

#lab9conclusion {
  display: none;
  top: 5%;
}

#lab9conclusion2 {
  display: none;
  top: 70%;
}

/*drop group*/
#dropGrp {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  height: 40%;

  /*border:1px solid red;*/
}

#dropRiver,
#dropTransmission,
#dropHome,
#dropfan {
  position: absolute;
  top: 0%;
  left: 0%;

  height: 100%;
  width: 24%;

  background-color: rgba(255, 255, 255, 0.5);

  border-radius: 2%;

  /*border:1px solid blue;*/
}

#dropTransmission {
  left: 26%;
}

#dropHome {
  left: 52%;
}

#dropfan {
  left: 78%;
  width: 22%;
}

/*drop div images*/
#river,
#transmission,
#home,
#fanBody,
#fan {
  display: none;
  position: absolute;
  top: 10%;
  left: 0%;

  width: 100%;
}

#transmission {
  top: 25%;
}

#home {
  top: 10%;
  left: 0%;
  width: 100%;
}

#window {
  display: none;
  position: absolute;
  top: 47%;
  left: 34%;
  width: 54%;
}

#fanBody {
  position: absolute;
  top: 2%;
  left: 10%;
  width: 80%;
}

#fan {
  position: absolute;
  top: 5.5%;
  left: 26%;
  width: 60%;
}
/*applies all span the similar properties*/
#dropGrp span {
  display: none;
  position: absolute;
  top: 50%;
  left: 95%;

  color: #334da1;

  font-size: 1.7em;
}

/*drag group*/

#dragGrp {
  position: absolute;
  top: 72%;
  left: 5%;

  width: 90%;
  height: 25%;

  /*border:1px solid red;*/
}

/*dragabble images*/
#dragRiver,
#dragTransmission,
#dragFan,
#dragHome {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 20%;

  cursor: move;
}

#dragFan {
  top: 0%;
  left: 25%;
  width: 11%;
}

#dragTransmission {
  top: 5%;
  left: 45%;
  width: 30%;
}

#dragHome {
  top: 5%;
  left: 85%;
  width: 18%;
}

/*electrical energy*/
#electricEnergy {
  display: none;
  position: absolute;
  top: 85%;
  left: 0%;

  /*width 100% and align center for making the text at center of screen*/
  width: 100%;
  text-align: center;

  font-size: 2em;

  color: rgb(2, 66, 83);

  padding: 0% 2%;

  border-radius: 5%;
  background-color: rgba(185, 228, 238, 0.7);
}