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

  top: 0%;
  left: 0%;

  margin: 0;
  padding: 0;

  /*hide the scroll bar of the page when any element should be kept or any part of it out of viewport window*/
  overflow: hidden;

  /*change only this*/
}

/*conveyor machine*/
#conveyor {
  display: none;
  position: absolute;
  top: 20%;
  left: 66%;

  width: 34%;
}

/*container div for all material*/
#allMaterial {
  display: none;
  position: absolute;
  top: 2%;
  left: 87%;

  width: 15%;
  height: 15%;
  /*border:1px solid red;*/
}

#allMaterial > img {
  position: absolute;
  top: 0%;
  left: 20%;

  width: 40%;
}

#allMaterial > img:nth-of-type(n + 2) {
  display: none;
}

/*divs for making the magnetic and non magnetic baskets blink*/

#nonMagneticBasket,
#magneticBasket {
  position: absolute;
  top: 73.7%;
  left: 68%;
  width: 6.3%;
  height: 7.2%;

  display: none; /* with this property this two divs are not visible and clickable at first */

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

#magneticBasket {
  left: 77.3%;
}

/*magnetic material and non magnetic material collection*/
#magnetCollect,
#nonMagnetCollect {
  display: none;
  position: absolute;
  top: 20%;
  left: 43%;
  width: 30%;
}

/*text for magnetic and non magnetic materials*/
#textMagneticMaterial,
#textNonMagneticMaterial {
  display: none;
  position: absolute;
  top: 19%;
  left: 50%;

  color: brown;
}

/*seeSeparatorWork*/
#whatSeparatorDoes1,
#whatSeparatorDoes2 {
  display: none;
  position: absolute;
  top: 5%;
  left: 40%;

  width: 50%;
  text-align: center;

  font-size: 1.3em;

  color: yellow;
}

#whatSeparatorDoes2 {
  width: 30%;
  left: 40%;
  top: 55%;
  color: darkblue;
}

/*magnet example*/
#magnetEx {
  position: absolute;
  top: 20%;
  left: 0%;
  width: 40%;
}

/*seeSeparatorWork*/
#seeMagnetWork {
  position: absolute;
  top: 5%;

  padding: 0% 0.7%;
  width: 40%;
  text-align: center;

  font-size: 1.3em;

  color: yellow;
}

/*replay the gif of magnet*/
#replayMagnet {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 0;
  top: 40%;
  left: 33%;
  width: 5%;
  height: 9%;
}

/*border*/
#border {
  display: none;
  position: absolute;
  top: 0%;
  left: 40%;

  width: 0%;
  height: 90%;

  border: 0.12em dotted rgba(0, 0, 0, 0, 0.5);
}

/*magnetic energy text*/
#magneticEnergy {
  /*display: none;*/
  position: absolute;
  top: 91%;
  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);
}