img.below768 {
  display: none;
}

.highlight.banner {
  background-color: #007473;
  text-align: center;
  /*width: 42%;*/
  width: 100%;
  margin: 0;
  padding: 5px 15px;
  box-shadow: none;
  /*position: absolute;*/
  /*bottom: 30%;*/
  /*right: 0;*/
  /*border-top-right-radius: 0;*/
  /*border-bottom-right-radius: 0;*/
  border-radius: 0;
}

.highlight.banner h2, .highlight.banner p {
  color: #FFF;
  padding: 0;
}

.highlight.banner p {
  font-style: italic;
}


.intro {
  display: table-cell;
  width: 55%;
  vertical-align: top;
  padding-right: 5%;
}

.intro-side {
  display: table-cell;
  margin-top: 25px;
  width: 15%;
  margin-left: 10%;
  vertical-align: top;
}

.animation {
  margin: -42px 0 40px 0;
  padding: 0;
  position: relative;
  display: block;
  clear: both;
}

.refimg img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  padding-top: 200px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.assignment img {
  z-index: 3;
  position: absolute;
  top: 340px;
  left: 0;
  opacity: 0;
  transition-delay: 1s;
  transition: all 1s ease-in-out;
  transform: translate(-10px, 0);
  opacity: 0;
}

.assignment.active img {
  opacity: 1;
  transform: translate(10px, 0);
  left: 0;
}

.teacher img {
  z-index: 4;
  position: absolute;
  top: 121px;
  left: 0;
  opacity: 0;
  /*transform: translate(0,30px);*/
  transition: all 1s ease-in-out;
}

.teacherquestion img {
  z-index: 5;
  position: absolute;
  top: 260px;
  left: 210px;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.teacher.active img {
  opacity: 1;
  top: 101px;
}

.teacherquestion.active img {
  opacity: 1;
}

.sparklinglysosome1 img {
  z-index: 5;
  position: absolute;
  top: 97px;
  left: 282px;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.sparklinglysosome1.active img {
  opacity: 1;
}

.sparklinglysosome2 img {
  z-index: 5;
  position: absolute;
  top: 55px;
  left: 729px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.sparklinglysosome2.active img {
  opacity: 1;
}

.topgirl img {
  z-index: 3;
  position: absolute;
  top: 96px;
  left: 604px;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.topgirl.active img {
  opacity: 1;
  top: 96px;
}

.microscopekid img {
  z-index: 3;
  position: absolute;
  top: 485px;
  left: 936px;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.microscopekid.active img {
  top: 465px;
  opacity: 1;
}

.cellmembrane1 img {
  z-index: 4;
  position: absolute;
  top: 373px;
  left: 603px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.cellmembrane1.active img {
  opacity: 1;
}

.cellmembrane2 img {
  z-index: 4;
  position: absolute;
  top: 244px;
  left: 710px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.cellmembrane2.active img {
  opacity: 1;
}

.girlonlaptop img {
  z-index: 3;
  position: absolute;
  top: 527px;
  left: 498px;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.girlonlaptop.active img {
  opacity: 1;
  top: 507px;
}

.ribosome img {
  z-index: 4;
  position: absolute;
  top: 455px;
  left: 217px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.ribosome.active img {
  opacity: 1;
}

.line1 img {
  z-index: 2;
  position: absolute;
  top: 216px;
  left: 149px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: 1s;
}

.line1.active img {
  opacity: 1;
}

.line2 img {
  z-index: 2;
  position: absolute;
  top: 175px;
  left: 914px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: 1s;
}

.line2.active img {
  opacity: 1;
}

.line3 img {
  z-index: 2;
  position: absolute;
  top: 264px;
  left: 234px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: 1s;
}

.line3.active img {
  opacity: 1;
}

.line4 img {
  z-index: 2;
  position: absolute;
  top: 264px;
  left: 178px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.line4.active img {
  opacity: 1;
}

.refimg img.below1240, .refimg img.below768 {
  display: none;
}

/* .mobile-trigger {
  display: none;
} */


/* @media screen and (max-width: 1240px) {
  .refimg {
      display: block !important;
  }

  .refimg img {
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .refimg img.bkgimg {
      display: none;
  }

  .refimg img.below1240 {
      display: block;
      width: 100%;
      height: auto;
  }

  .group1, .teacher-group, .girl1-group, .boy-group, .bottomgirl-group {
      display: none;
      height: 0;
      width: 100%;
  }
}



@media screen and (max-width: 900px) {
  .animation {
      margin-top: 0;
  }

  .group1 div img, .teacher-group div img, .girl1-group div img, .boy-group div img, .bottomgirl-group div img {
      display: table-row;
      clear: both;
      width: 100%;
      height: auto;
      position: relative;
      top: 0;
      left: 0;
      vertical-align: top;
      margin: 0;
  }

  .refimg, .sparklinglysosome2, .cellmembrane2, .dottedlines {
      display: none;
  }

  .teacherquestion {
      margin-top: -100px;
      width: 70%;
      margin-left: 30%;
  }

  .sparklinglysosome1 {
      margin-top: 150px;
      margin-left: 60px;
      z-index: 3;
      position: absolute;
      width: 80%;
      height: auto;
  }

  .microscopekid {
      position: relative;
      margin-top: 10px;
  }

  .cellmembrane1 img {
      top: 10px;
      margin-left: 0px;
      z-index: 3;
      position: absolute;
      width: 80%;
      height: auto;
  }

  .refimg {
      display: block !important;
  }

  .refimg img.below1240 {
      display: block;
      width: 100%;
      height: auto;
  }


}

@media screen and (max-width: 767px) {
  .refimg img.below1240 {
      display: none;
  }


  .intro, .intro-side {
      display: block;
      clear: both;
      width: 99%;
      margin-left: 0;
  }

  .refimg img, .assignment img {
      max-width: 100%;
      height: auto;
  }

  .microscopekid.active img {
      opacity: 1;
      position: relative;
      top: 0;
  }

  .cellmembrane1.active img {
      opacity: 1;
      position: absolute;
      top: 0;
      z-index: 10;
      left: 0;
  }
  .refimg img.below768 {
      width: 99%;
      display: block;
      height: auto;
  }
} */