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

  top: 0%;
  left: 0%;

  margin: 0;
  padding: 0;

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

  /*change only this*/
}

/*ear div for intro of sound energy*/

#ear {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 50%;
  height: 100%;

  /*border:1px dotted;*/
}

/*soundhear gif*/
#soundHear {
  position: absolute;
  top: 10%;
  left: 15%;

  width: 70%;
}

#earText {
  display: none;
  position: absolute;
  top: 50%;
  font-size: 1.5em;
  /*width property is essential for the text-align property to work*/
  width: 100%;
  text-align: center;
  padding: 3%;
  color: #0a068b;
}

/*replay the gif of man hearing*/
#replayEar {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 0;
  top: 30%;
  right: 50%;
  width: 9%;
  height: 8%;
}

/*sonar example*/
#sonarEx {
  opacity: 0;
  position: absolute;
  top: 8%;
  left: 50%;

  width: 50%;
  height: 100%;

  /*border:1px dotted;*/

  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

#sonarText1,
#sonarText2 {
  position: absolute;
  top: -5%;

  /*width property is essential for the text-align property to work*/
  width: 100%;
  text-align: center;
  padding: 0% 3%;

  font-size: 1.5em;
  color: #0a068b;
}

#sonarText2 {
  top: 61%;
  color: darkblue;
}

#picContainer {
  /*display: none;*/
  position: absolute;
  top: 12%;
  left: 0%;

  width: 100%;
  height: 70%;
}

#pond {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 80%;
}

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