@font-face {
  font-family: "CEFB";
  src: url("https://static.igem.wiki/teams/5038/cefb.jpg");
}

* {
  padding: 0;
  margin: 0;
  background-size: 100% 100%;
  font-family: "CEFB";
}
.colorful {
  word-break: keep-all;
  white-space: nowrap;
}

body {
  overflow: hidden;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
@keyframes jump {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.home-container {
  transition: all 1s ease-in-out;
}

.home-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  transform-style: preserve-3d;
}
.item-1 {
  position: absolute;
}
.item-2 {
  position: absolute;
}
.item-3 {
  position: absolute;
}
.item-4 {
  position: absolute;
}
.item-5 {
  position: absolute;
}
.item-6 {
  position: absolute;
}
.item-7 {
  position: absolute;
}
.item-8 {
  position: absolute;
}
.item-9 {
  position: absolute;
}

.item-10 {
  position: absolute;
}
.item-11 {
  position: absolute;
}
.item-12 {
  position: absolute;
}
.item-13 {
  position: absolute;
}
.item-14 {
  position: absolute;
}
.item-15 {
  position: absolute;
}
.item-16 {
  position: absolute;
}
.item-17 {
  position: absolute;
}
.item-18 {
  position: absolute;
}
.item-19 {
  position: absolute;
}
.item-20 {
  position: absolute;
}
.item-21 {
  position: absolute;
}
.item-22 {
  position: absolute;
}
.item-23 {
  position: absolute;
}
.item-24 {
  position: absolute;
}
.item-25 {
  position: absolute;
}
.item-26 {
  position: absolute;
}
.item-27 {
  position: absolute;
}
.item-28 {
  position: absolute;
}
.item-29 {
  position: absolute;
}
.item-30 {
  position: absolute;
}
.item-31 {
  position: absolute;
}
.item-32 {
  position: absolute;
}
.item-33 {
  position: absolute;
}
.item-34 {
  position: absolute;
}
.item-35 {
  position: absolute;
}
.item-36 {
  position: absolute;
}
.item-37 {
  position: absolute;
}
.item-38 {
  position: absolute;
}
/* page-1 */
.page-bg-1 {
  background-color: #fff3fc;
  width: 100vw;
  position: relative;
  left: 0;
  top: 0;
  height: auto;
}
.page-bg-2 {
  background-color: rgb(248, 239, 255);

  width: 100vw;
  position: relative;
  left: 0;
  top: 0;
  height: auto;
}
.page-bg-3 {
  background-color: #e8fff9;

  width: 100vw;
  position: relative;
  left: 0;
  top: 0;
  height: auto;
}
.page-bg-4 {
  background-color: #eefbff;
  width: 100vw;
  position: relative;
  left: 0;
  top: 0;
  height: auto;
}
.page-1 {
  background-size: 100% 100%;
  background-position: 0 0;

  background-image: url("https://static.igem.wiki/teams/5038/img-home/header/header-1-2.png");
  background-size: 100% auto;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
}
.page-1 > .item-1 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 8%;
  animation: item-1-1-ani 0.5s infinite ease-in-out both alternate-reverse;
}
@keyframes item-1-1-ani {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/1.png");
  }
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/2.png");
  }
}
.page-1 > .item-2 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  animation: item-1-2-ani 1.2s infinite both alternate-reverse;
}
@keyframes item-1-2-ani {
  0% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/1.png");
  }
  9% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/2.png");
  }
  18% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/3.png");
  }
  27% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/4.png");
  }
  36% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/5.png");
  }
  45% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/6.png");
  }
  /* 54%{
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/7.png");
  }
  63%{
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/8.png");
  }
  72%{
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/9.png");
  }
  81%{
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/10.png");
  } */
  100% {
    background-image: url("https://static.igem.wiki/teams/5038/img-home/header/start/11.png");
  }
}
/* page-2 */
.page-2 {
  background-color: #fff3fc;
}
.page-2 > * {
  color: #8b61a1;
}
.page-2 .colorful {
  color: rgb(255, 122, 103);
}
.page-2 > .item-1 {
  width: 60%;
  height: 40%;
  left: 5%;
  top: 10%;
  animation: item-2-1-ani 1s ease-in-out both;
}
@keyframes item-2-1-ani {
  0% {
    left: -70%;
  }
  100% {
    left: 5%;
  }
}
.page-2 > .item-2 {
  width: 25%;
  height: 22%;

  right: 5%;
  top: 10%;

  animation: jump 0.7s 1s ease-in-out both;
}

.page-2 > .item-3 {
  width: 60%;
  height: 40%;

  right: 5%;
  top: 55%;
  text-align: right;
  animation: item-2-3-ani 1s ease-in-out both;
}
@keyframes item-2-3-ani {
  0% {
    right: -50%;
  }
  100% {
    right: 5%;
  }
}
.page-2 > .item-4 {
  width: 26%;
  height: 45%;

  left: 5%;
  top: 53%;

  animation: jump 0.7s 1s ease-in-out both;
}

.page-2 .drop-1 {
  animation: drop-2-1-ani 1s 1.4s ease-in both;
  opacity: 0;
}
@keyframes drop-2-1-ani {
  0% {
    opacity: 0;
    transform: translateZ(-400px);
  }
  10% {
    opacity: 1;
    transform: translateZ(-400px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px);
  }
}

.page-2 .drop-2 {
  animation: drop-2-2-ani 1s 1.2s ease-in both;
  opacity: 0;
}
@keyframes drop-2-2-ani {
  0% {
    opacity: 0;
    transform: translateZ(-400px);
  }
  10% {
    opacity: 1;
    transform: translateZ(-400px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0px);
  }
}

.page-2 .drop-3 {
  animation: drop-2-3-ani 1s 1.6s ease-in both;
  transform: scale(0);
}
@keyframes drop-2-3-ani {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* page-3 */
.page-3 {
  background-color: #fff3fc;
}
.page-3 > * {
  color: #8b61a1;
}
.page-3 .colorful {
  color: rgb(255, 122, 103);
}
.page-3 > .item-1 {
  left: 5%;
  top: 11%;
  width: 40%;
  height: 15%;
  animation: item-3-1-ani 1.2s ease-in-out both;
}

@keyframes item-3-1-ani {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(17vw);
  }
}
.page-3 > .item-2 {
  right: 5%;
  top: 11%;
  width: 40%;
  height: 15%;
  animation: item-3-2-ani 1.2s ease-in-out both;
}
@keyframes item-3-2-ani {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-17vw);
  }
}
.page-3 > .item-3 {
  left: 38%;
  top: 11%;
  width: 15%;
  animation: jump 0.8s 1s ease-in-out both;
}

.page-3 > .item-4 {
  right: 35%;
  top: 15%;
  width: 15%;
  animation: jump 0.8s 1.2s ease-in-out both;
}

.page-3 > .item-5 {
  left: 38%;
  top: 23%;
  width: 15%;
  animation: jump 0.8s 1.4s ease-in-out both;
}
.page-3 > .item-6 {
  right: 35%;
  top: 29%;
  width: 18%;
  animation: jump 0.8s 1.5s ease-in-out both;
}
.page-3 > .item-7 {
  left: 42%;
  top: 32%;
  width: 7%;
  animation: jump 0.8s 1.6s ease-in-out both;
}
.page-3 > .item-8 {
  left: 8%;
  bottom: 5%;
  width: 24%;
  height: 34%;
  animation: item-3-8-ani 1s 1.4s ease-in-out both;
}
@keyframes item-3-8-ani {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.page-3 > .item-9 {
  left: 5%;
  top: 44%;
  width: 70%;
  height: 17%;
  animation: item-3-9-ani 1.2s ease-in-out both;
}

@keyframes item-3-9-ani {
  0% {
    left: -95%;
  }
  100% {
    left: 16%;
  }
}

.page-3 > .item-10 {
  bottom: 8%;
  width: 60%;
  height: 25%;
  animation: item-3-10-ani 1s 1s ease-in-out both;
}
@keyframes item-3-10-ani {
  0% {
    right: -60%;
  }
  100% {
    right: 5%;
  }
}

/* page-4 */
.page-4 {
  background-color: #fff3fc;
}
.page-4 > * {
  color: #8b61a1;
}
.page-4 .colorful {
  color: rgb(255, 122, 103);
}
.page-4 > .item-1 {
  height: 15%;
  width: 90%;
  top: 11%;
  left: 4%;
}
.page-4 > .item-2 {
  height: 10%;
  width: 6%;
  top: 35%;
  left: 75%;
  animation: item-4-2-ani 10s ease-in-out both;
}
@keyframes item-4-2-ani {
  0% {
    top: 35%;
    left: 75%;
  }
  20% {
    top: 16%;
    left: 5%;
  }
  40% {
    top: 16%;
    left: 5%;
  }
  52% {
    top: 15%;
    left: 80%;
  }
  100% {
    top: 15%;
    left: 80%;
  }
}
.page-4 > .item-2::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  opacity: 0;
  background-image: url("https://static.igem.wiki/teams/5038/img-home/background/select.png");
  animation: click 10s ease-in-out both;
}
@keyframes click {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  52% {
    opacity: 0;
  }
  54% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.page-4 > .item-3 {
  height: 49%;
  width: 21%;
  top: 30%;
  left: -25%;
  animation: item-4-3-ani 0.7s 5.8s ease-in-out both;
}
@keyframes item-4-3-ani {
  0% {
    left: -25%;
  }
  100% {
    left: 4.9%;
  }
}
.page-4 > .item-4 {
  height: 49%;
  width: 21%;
  top: 40%;
  left: -25%;

  animation: item-4-4-ani 0.7s 5.9s ease-in-out both;
}
@keyframes item-4-4-ani {
  0% {
    left: -25%;
  }
  100% {
    left: 13%;
  }
}
.page-4 > .item-5 {
  height: 49%;
  width: 21%;
  top: 32%;
  left: -25%;
  animation: item-4-5-ani 0.7s 6s ease-in-out both;
}
@keyframes item-4-5-ani {
  0% {
    left: -25%;
  }
  100% {
    left: 25%;
  }
}
.page-4 > .item-6 {
  height: 50%;
  width: 53%;
  top: 32%;
  left: 43%;
  animation: item-4-6-ani 0.7s 5.8s ease-in-out both;
}
@keyframes item-4-6-ani {
  0% {
    left: 100%;
  }
  100% {
    left: 50%;
  }
}
/* tag */
.page-4 > .item-7 {
  height: 8%;
  width: 63%;
  top: 15%;
  left: 9%;
  display: inline-block;
  /* background-color: rgba(255, 0, 0, 0.237); */
}
.page-4 > .item-7 > .type-out {
  display: inline-block;
  white-space: nowrap;
  color: black;
  position: relative;
  /* line-height: 100%; */
  font-size: 1.5vw;
  width: 0%;

  overflow: hidden;
  height: 100%;
  border-right: 4px transparent solid;

  animation: type-out 2.5s 2.4s steps(40, end) both;
}
@keyframes type-out {
  from {
    width: 0;
  }
  to {
    width: 96%;
  }
}

.type-out-link-1 {
  display: inline-block;

  white-space: nowrap;
  color: black;
  position: relative;
  top: 25%;
  left: -62.5%;
  line-height: 60%;
  font-size: 1vw;
  width: 0;

  overflow: hidden;
  height: 60%;
  border-right: 4px black solid;
  animation: link 0.7s 2.2s infinite both alternate-reverse;
}
@keyframes link {
  from {
    border-color: black;
  }
  to {
    border-color: transparent;
  }
}

/* page-5 */
.page-5 {
  background-color: #fff3fc;
}
.page-5 > * {
  color: #ebc7ce;
}
.page-5 .colorful {
  color: #e56350;
}
.page-5 .colorful-2 {
  color: #9b72ac;
}
.page-5 > .item-1 {
  height: 25%;
  width: 45%;
  top: 10%;
  left: 5%;

  animation: item-5-1-ani 1s ease-in-out both;
}
@keyframes item-5-1-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 5%;
  }
}
.page-5 > .item-2 {
  height: 20%;
  width: 45%;
  top: 35%;
  left: 10%;
  animation: item-5-2-ani 1s 0.3s ease-in-out both;
}
@keyframes item-5-2-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 5%;
  }
}
.page-5 > .item-3 {
  height: 47%;
  width: 43%;
  top: 9%;
  left: 50%;

  animation: item-5-3-ani 1s ease-in-out both;
}
@keyframes item-5-3-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-5 > .people-container > .item-4 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;

  opacity: 0;
  animation: item-5-4-ani 1s 1s ease-in-out both;
}
@keyframes item-5-4-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-5 > .people-container-2 > .item-6 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;

  opacity: 0;
  animation: item-5-6-ani 1s 1s ease-in-out both;
}
@keyframes item-5-6-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-5 > .people-container > .item-5 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;

  opacity: 0;
  animation: item-5-5-ani 1s 1.5s ease-in-out both;
}
@keyframes item-5-5-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-5 > .people-container-2 > .item-7 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;

  opacity: 0;
  animation: item-5-7-ani 1s 1.5s ease-in-out both;
}
@keyframes item-5-7-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-5 > .item-6 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;
}
.page-5 > .item-7 {
  height: 35%;
  width: 80%;
  bottom: 5%;
  left: 10%;
}
.page-5 > .people-container > .item-8 {
  height: 7%;
  width: 40%;
  bottom: 3%;
  left: 38%;

  opacity: 0;
  animation: item-5-8-ani 1.5s 1s ease-in-out both;
}
@keyframes item-5-8-ani {
  0% {
    opacity: 0;
    left: 38%;
  }
  50% {
    opacity: 1;
    left: 38%;
  }
  100% {
    opacity: 1;
    left: 33%;
  }
}
.page-5 > .people-container-2 > .item-10 {
  height: 7%;
  width: 60%;
  bottom: 3%;
  left: 28%;

  opacity: 0;
  animation: item-5-10-ani 1s 1s ease-in-out both;
}
@keyframes item-5-10-ani {
  0% {
    opacity: 0;
    left: 28%;
  }
  50% {
    opacity: 1;
    left: 28%;
  }
  100% {
    opacity: 1;
    left: 23%;
  }
}
.page-5 > .people-container > .item-9 {
  height: 7%;
  width: 3%;
  bottom: 3%;
  left: 59%;
  color: transparent;
  animation: item-5-9-ani 1s 3s ease-in-out both;
}
@keyframes item-5-9-ani {
  0% {
    color: transparent;
  }
  100% {
    color: #e56350;
  }
}
.page-5 > .people-container-2 > .item-11 {
  height: 6%;
  width: 10%;
  bottom: 3%;
  left: 70.5%;
  color: transparent;
  animation: item-5-11-ani 1s 2s ease-in-out both;
}
@keyframes item-5-11-ani {
  0% {
    color: transparent;
  }
  100% {
    color: #9b72ac;
  }
}
.people-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
}
.people-container-2 {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
}
.tumor-1 {
  animation: tumor-1-ani 1s 1s ease-in-out both !important;
}
@keyframes tumor-1-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* page-6 */
.page-6 {
  background-color: rgb(248, 239, 255);
}
.page-6 > * {
  color: #8b61a1;
  color: rgb(209 162 247);
}
.page-6 .colorful {
  color: rgb(255, 122, 103);
}
.page-6 > .item-1 {
  height: 12%;
  width: 85%;
  top: 12%;
  left: 7.5%;
  border-radius: 3%;
  padding: 0 5%;
}
.page-6 > .item-2 {
  height: 20%;
  width: 70%;
  top: 55%;
  left: 15%;
  border-radius: 2%;

  font-style: italic;
  /* animation: item-6-2-ani 1s 3s linear both; */
}
@keyframes item-6-2-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-6 > .item-3 {
  height: 12%;
  width: 85%;
  top: 24%;
  left: 7.5%;
  border-radius: 3%;
  padding: 0 5%;
}
/* page-7 */
.page-7 {
  background-color: rgb(248, 239, 255);
}
.page-7 {
  perspective-origin: 87.5% 57%;
  transform-style: preserve-3d;
  perspective: 40%;
}
.page-7 > * {
  color: #8b61a1;
}
.page-7 .colorful {
  white-space: nowrap;
  color: rgb(255, 122, 103);
  /* font-size: 3.2%; */
}
.page-7 > .item-1 {
  height: 50%;
  width: 40%;
  top: 35%;

  animation: item-7-1-ani 1s ease-in-out both;
}
@keyframes item-7-1-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 10%;
  }
}
.page-7 > .item-2 {
  height: 45%;
  width: 42%;
  top: 39%;
  left: 51%;

  z-index: 2;
  /* animation: item-7-2-ani 1s ease-in-out both; */
}
@keyframes item-7-2-ani {
  0% {
    left: 100%;
  }
  100% {
    left: 51%;
  }
}
.page-7 > .item-3 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;
  animation: mirna-210-ani 5s ease-in-out both;
  z-index: 3;
}
@keyframes mirna-210-ani {
  0% {
    transform: translateX(31vw) translateY(39vh);
    z-index: 3;
  }
  30% {
    transform: translateX(-8vw) translateY(15vh);
    z-index: 3;
  }
  50% {
    transform: translateX(0) translateY(0) translateZ(0);
    z-index: 1;
  }
  60% {
    transform: translateX(0) translateY(0) translateZ(0);
    z-index: 1;
  }
  100% {
    transform: translateX(-19vw) translateY(-43vh) translateZ(0);
    z-index: 1;
  }
}
/* @keyframes mirna-210-ani {
  0% {
    transform: translateX(var(--x31)) translateY(var(--y39));
    z-index: 3;
  }
  30% {
    transform: translateX(var(--x08)) translateY(var(--y15));
    z-index: 3;
  }
  50% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  60% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  100% {
    transform: translateX(var(--x020)) translateY(var(--y043));
    z-index: 1;
  }
} */
@keyframes item-7-3 {
  0% {
    transform: translateZ(300px);
  }
  50% {
    transform: translateZ(0px);
  }
  100% {
    transform: translateZ(300px);
  }
}
.page-7 > .item-4 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 3;
  animation: mirna-142-ani 5s 1.5s ease-in-out both;
}
@keyframes mirna-142-ani {
  0% {
    transform: translateX(31vw) translateY(39vh) translateZ(0);
    z-index: 3;
  }
  30% {
    transform: translateX(-8vw) translateY(15vh) translateZ(0);
    z-index: 3;
  }
  50% {
    transform: translateX(0) translateY(0) translateZ(0);
    z-index: 1;
  }
  60% {
    transform: translateX(0) translateY(0) translateZ(0);
    z-index: 1;
  }
  100% {
    transform: translateX(-2vw) translateY(-43vh) translateZ(0);
    z-index: 1;
  }
}
.page-7 > .item-5 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 3;
  animation: mirna-ani 5s 3s linear both;
}

.page-7 > .item-6 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;
  z-index: 1;

  animation: mirna-ani 5s 4.5s linear both;
}

.page-7 > .item-7 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;
  z-index: 1;

  animation: mirna-ani 5s 6s linear both;
}
.page-7 > .item-8 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;
  z-index: 1;

  animation: mirna-ani 5s 6s linear both;
}
.page-7 > .item-8 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 1;

  animation: mirna-ani 5s 7.5s linear both;
}
.page-7 > .item-9 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 1;

  animation: mirna-ani 5s 9s linear both;
}
.page-7 > .item-10 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 1;

  animation: mirna-ani 5s 10.5s linear both;
}
.page-7 > .item-11 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 1;

  animation: mirna-ani 5s 12s linear both;
}
.page-7 > .item-12 {
  height: 16.2%;
  width: 15.4%;
  top: 66%;
  left: 75%;

  z-index: 1;

  animation: mirna-ani-2 5s 13.5s linear both;
}

@keyframes mirna-ani {
  0% {
    transform: translateX(31vw) translateY(39vh);
    z-index: 3;
  }
  30% {
    transform: translateX(-8vw) translateY(15vh);
    z-index: 3;
  }
  50% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  60% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  100% {
    transform: translateX(40vw) translateY(-60vh);
    z-index: 1;
  }
}
@keyframes mirna-ani-2 {
  0% {
    transform: translateX(31vw) translateY(39vh);
    z-index: 3;
  }
  30% {
    transform: translateX(-8vw) translateY(15vh);
    z-index: 3;
  }
  50% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  60% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    z-index: 1;
  }
}

.column-1 {
  position: absolute;
  width: 4.6%;
  height: 28%;
  left: 56.6%;
  bottom: 17.4%;
  height: 17%;
  background-color: #f17766;
  animation: column-1-ani 13.8s 2.6s both;
}
@keyframes column-1-ani {
  0% {
    height: 17%;
    background-color: #f17766;
    height: 0;
    background-color: transparent;
  }
  8% {
    height: 17%;
    background-color: #f17766;
  }
  11.11% {
    height: 9.8%;
    background-color: #fdbb71;
  }
  19.11% {
    height: 9.8%;
    background-color: #fdbb71;
  }
  22.22% {
    height: 8.65%;
    background-color: #ffdc93;
  }
  30.22% {
    height: 8.65%;
    background-color: #ffdc93;
  }
  33.33% {
    height: 7.81%;
    background-color: #c0e9ec;
  }
  41.33% {
    height: 7.81%;
    background-color: #c0e9ec;
  }
  44.44% {
    height: 6.47%;
    background-color: #ffbedc;
  }
  52.44% {
    height: 6.47%;
    background-color: #ffbedc;
  }
  55.55% {
    height: 6.13%;
    background-color: #c6e2ff;
  }
  63.55% {
    height: 6.13%;
    background-color: #c6e2ff;
  }
  66.66% {
    height: 6%;
    background-color: #dcbee3;
  }
  74.66% {
    height: 6%;
    background-color: #dcbee3;
  }
  77.77% {
    height: 5.65%;
    background-color: #d6baeb;
  }
  85.77% {
    height: 5.65%;
    background-color: #d6baeb;
  }
  88.88% {
    height: 5.46%;
    background-color: #ffcfd8;
  }
  96.88% {
    height: 5.46%;
    background-color: #ffcfd8;
  }
  100% {
    height: 4%;
    background-color: #fecfd5;
  }
}
.column-2 {
  position: absolute;
  width: 4.6%;
  height: 28%;
  left: 65.6%;
  bottom: 17.4%;
  height: 17%;
  background-color: #f17766;
  animation: column-2-ani 13.8s 2.6s both;
}
@keyframes column-2-ani {
  0% {
    height: 23.8%;
    background-color: #f17766;
    height: 0;
    background-color: transparent;
  }
  8% {
    height: 23.8%;
    background-color: #f17766;
  }
  11.11% {
    height: 14%;
    background-color: #fdbb71;
  }
  19.11% {
    height: 14%;
    background-color: #fdbb71;
  }
  22.22% {
    height: 1.4%;
    background-color: #ffdc93;
  }
  30.22% {
    height: 1.4%;
    background-color: #ffdc93;
  }
  33.33% {
    height: 1.4%;
    background-color: #c0e9ec;
  }
  41.33% {
    height: 1.4%;
    background-color: #c0e9ec;
  }
  44.44% {
    height: 4.2%;
    background-color: #ffbedc;
  }
  52.44% {
    height: 4.2%;
    background-color: #ffbedc;
  }
  55.55% {
    height: 1.4%;
    background-color: #c6e2ff;
  }
  63.55% {
    height: 1.4%;
    background-color: #c6e2ff;
  }
  66.66% {
    height: 5.6%;
    background-color: #dcbee3;
  }
  74.66% {
    height: 5.6%;
    background-color: #dcbee3;
  }
  77.77% {
    height: 1.4%;
    background-color: #d6baeb;
  }
  85.77% {
    height: 1.4%;
    background-color: #d6baeb;
  }
  88.88% {
    height: 5.6%;
    background-color: #ffcfd8;
  }
  96.88% {
    height: 5.6%;
    background-color: #ffcfd8;
  }
  100% {
    height: 3%;
    background-color: #fecfd5;
  }
}
.row-1 {
  position: absolute;
  top: 43.3%;
  left: 53.6%;
  width: 37%;
  height: 3%;
  /* background-color: red; */
}
.jdt {
  z-index: 3;
  position: absolute;
  top: -74%;
  left: 0;
  width: 13%;
  height: 10%;

  animation: jdt 19s -2s linear both;
}
@keyframes jdt {
  0% {
    left: 0;
  }
  100% {
    left: 90%;
  }
}
.page-7 > .item-13 {
  position: absolute;
  top: 10%;
  left: 55%;
  width: 15%;
  height: 10%;
}
.page-7 > .item-14 {
  position: absolute;
  top: 10%;
  left: 73%;
  width: 15%;
  height: 10%;
}
.page-7 > .item-15 {
  position: absolute;
  top: 15%;
  left: 61%;
  width: 7%;
  height: 7%;
  opacity: 0;
  animation: t1-ani 1s 4.5s ease-in-out both;
}
@keyframes t1-ani {
  0% {
    opacity: 0;

    transform: rotateZ(-15deg);
  }
  75% {
    opacity: 1;

    transform: rotateZ(10deg);
  }
  100% {
    opacity: 1;

    transform: rotateZ(0deg);
  }
}
.page-7 > .item-16 {
  position: absolute;
  top: 15%;
  left: 74.8%;
  width: 7%;
  height: 7%;
  animation: t2-ani 1s 6s ease-in-out both;
}
@keyframes t2-ani {
  0% {
    opacity: 0;

    transform: rotateZ(15deg);
  }
  75% {
    opacity: 1;

    transform: rotateZ(-10deg);
  }
  100% {
    opacity: 1;

    transform: rotateZ(0deg);
  }
}
/* page-8 */
.page-8 {
  background-color: rgb(248, 239, 255);
}
.page-8 > * {
  color: #8b61a1;
}
.page-8 .colorful {
  color: rgb(255, 122, 103);
}

.page-8 .colorful-2 {
  color: rgb(255, 122, 103);
}
.page-8 .colorful-3 {
  color: #beda63;
}
.page-8 .colorful-4 {
  color: #5c73a2;
}

.page-8 > .item-1 {
  height: 23%;
  width: 50%;
  top: 15%;
  animation: item-8-1-ani 1s ease-in-out both;
}
@keyframes item-8-1-ani {
  0% {
    left: 100%;
  }
  100% {
    left: 53%;
  }
}
.page-8 > .item-2 {
  height: 43%;
  width: 36%;
  top: 48%;
  left: 55%;
  opacity: 0;
  animation: item-8-2-ani 1s 1s ease-in-out both;
}
@keyframes item-8-2-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-8 > .item-3 {
  height: 34%;
  width: 61%;
  top: 57%;
  left: 2%;
  opacity: 0;
  animation: item-8-3-ani 1s 2s ease-in-out both;

  overflow: hidden;
}
@keyframes item-8-3-ani {
  0% {
    opacity: 1;
    -webkit-clip-path: polygon(100% 0%, 100% 100%, 99.9% 100%, 99.9% 0);
    clip-path: polygon(100% 0%, 100% 100%, 99.9% 100%, 99.9% 0);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 0);
  }
}
.page-8 > .item-4 {
  height: 68%;
  width: 44%;
  top: 19%;
  left: 3%;
  opacity: 0;
  animation: item-8-4-ani 1s 4s ease-in-out both;
}
@keyframes item-8-4-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-8 > .item-5 {
  height: 39%;
  width: 45%;
  top: 3%;
  left: 2%;
  opacity: 0;
  animation: item-8-5-ani 4s 1.5s ease-in-out both;
}
@keyframes item-8-5-ani {
  0% {
    opacity: 0;
    top: -40%;
  }
  40% {
    opacity: 0;
    top: -40%;
  }
  70% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 50%;
  }
}
.page-8 > .item-6 {
  height: 39%;
  width: 45%;
  top: 3%;
  left: 2%;
  opacity: 0;
  animation: item-8-5-ani 4s 1.5s ease-in-out both;
}
@keyframes item-8-6-ani {
  0% {
    opacity: 0;
    top: -40%;
  }
  40% {
    opacity: 0;
    top: -40%;
  }
  40% {
    opacity: 1;
    top: -40%;
  }
  70% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 50%;
  }
}

.page-8 > .item-7 {
  height: 68%;
  width: 44%;
  top: 19%;
  left: 3%;
  opacity: 0;
  animation: item-8-7-ani 1s 2.8s ease-in-out both;
}
@keyframes item-8-7-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.double-arm {
  opacity: 0;
  animation: double-arm-ani 1s 1s linear both !important;
}
@keyframes double-arm-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* page-9 */
@keyframes disappear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-9 {
  background-color: rgb(248, 239, 255);
}
.page-9 > * {
  color: #8b61a1;
}
.page-9 .colorful {
  color: rgb(255, 122, 103);
}
.page-9 .colorful-2 {
  color: #beda63;
}
.page-9 .colorful-3 {
  color: #4256c5;
}
.page-9 .colorful-4 {
  color: #6077a8;
}
.page-9 .colorful-5 {
  color: #4d92d1;
}
.page-9 .colorful-6 {
  color: #fed070;
}
.page-9 .colorful-7 {
  color: #c0b6f7;
}
.page-9 > .item-1 {
  height: 50%;
  width: 43%;
  top: 20%;
  left: 5%;

  animation: item-9-1-ani 1s ease-in-out both;
}
@keyframes item-9-1-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 5%;
  }
}
.page-9 > .item-11 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;
}
.page-9 > .item-2 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;
  opacity: 0;
  animation: page-9-appear-2 1s ease-in-out both;
}
@keyframes page-9-appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes page-9-appear-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-9 > .item-3 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;
  animation: page-9-appear-2 1s 0s ease-in-out both;
}

.page-9 > .item-4 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 0.5s ease-in-out both;
}

.page-9 > .item-5 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1s ease-in-out both;
}

.page-9 > .item-6 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1.5s ease-in-out both;
}

.page-9 > .item-7 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2s ease-in-out both;
}

.page-9 > .item-8 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2.5s ease-in-out both;
}

.page-9 > .item-9 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 3s ease-in-out both;
}

.page-9 > .item-10 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1.5s 3.5s ease-in-out both;
}
.page-9 > .item-12 {
  height: 50%;
  width: 43%;
  top: 20%;

  animation: item-9-12-ani 1s ease-in-out both;
}

@keyframes item-9-12-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 5%;
  }
}

.page-9 > .item-13 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 0s ease-in-out both;
}

.page-9 > .item-14 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 0.5s ease-in-out both;
}

.page-9 > .item-15 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1s ease-in-out both;
}

.page-9 > .item-16 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1.5s ease-in-out both;
}

.page-9 > .item-17 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2s ease-in-out both;
}

.page-9 > .item-18 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2.5s ease-in-out both;
}

.page-9 > .item-19 {
  height: 58%;
  width: 43%;
  top: 19%;

  animation: item-8-19-ani 1s 0s ease-in-out both;
}

.page-9 > .item-20 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 0s ease-in-out both;
}

.page-9 > .item-21 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 0.5s ease-in-out both;
}

.page-9 > .item-22 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1s ease-in-out both;
}

.page-9 > .item-23 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 1.5s ease-in-out both;
}
.page-9 > .item-24 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2s ease-in-out both;
}
.page-9 > .item-25 {
  height: 80%;
  width: 43%;
  top: 15%;
  right: 5%;

  animation: page-9-appear-2 1s 2.5s ease-in-out both;
}
@keyframes item-8-19-ani {
  0% {
    left: -50%;
  }
  100% {
    left: 5%;
  }
}
.page-9 > .item-26 {
  height: 4.8%;
  width: 4.5%;
  top: 58.4%;
  right: 29.7%;
  display: none;
  opacity: 0;
  transform-origin: 100% 100%;

  animation: item-9-26-ani 1s 2.5s ease-in-out both;
  /* transform: rotateZ(150deg); */
}
@keyframes item-9-26-ani {
  0% {
    opacity: 0;
    transform: rotateZ(0deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(150deg);
  }
}
/* page-10 */
.page-10 {
  background-color: rgb(248, 239, 255);
}
.page-10 > * {
  color: #8b61a1;
}
.page-10 .colorful {
  color: #bdb6f7;
}
.page-10 .colorful-2 {
  color: #fed070;
}
.page-10 .colorful-6 {
  color: #fed070;
}
.page-10 .colorful-7 {
  color: #c0b6f7;
}
.page-10 > .item-1 {
  height: 30%;
  width: 45%;
  top: 10%;
  left: 5%;
  animation: jump 0.5s 1.3s ease-in-out both;
}
.page-10 > .item-2 {
  height: 30%;
  width: 45%;
  top: 10%;
  right: 5%;
  animation: jump 0.5s 1.8s ease-in-out both;
}
.page-10 > .item-3 {
  height: 30%;
  width: 90%;
  left: 5%;
  top: 60%;
  animation: jump 0.8s 0.3s ease-in-out both;

  /* animation: item-10-3-ani 0.8s 2s ease-in-out both; */
  /* opacity: 0; */
}
@keyframes item-10-3-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* page-11 */
.page-11 {
  background-color: #e8fff9;
}
.page-11 > * {
  color: #5c913b;
}
.page-11 .colorful-2 {
  color: #88c9f9;
  white-space: normal;
}
.page-11 > .item-1 {
  height: 65%;
  width: 50%;
  top: 20%;
  left: 6%;
}
.page-11 > .item-2 {
  height: 90%;
  width: 55%;
  top: 5%;
  left: 55%;

  animation: item-11-2-ani 2s ease-in-out both;
}

@keyframes item-11-2-ani {
  0% {
    left: 100%;
    transform: rotateZ(0deg);
  }
  70% {
    left: 55%;
    transform: rotateZ(5deg);
  }
  100% {
    left: 55%;
    transform: rotateZ(0deg);
  }
}
.page-11 > .item-3 {
  height: 90%;
  width: 55%;
  top: 5%;
  left: 55%;

  animation: item-11-3-ani 1s 2s ease-in-out both;
}
@keyframes item-11-3-ani {
  0% {
    -webkit-clip-path: polygon(
      55% 22%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22%
    );
    clip-path: polygon(
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22.1%,
      55% 22%
    );
  }
  100% {
    -webkit-clip-path: polygon(
      100% 0%,
      100% 37%,
      100% 80%,
      100% 100%,
      19% 100%,
      0 100%,
      0% 2%
    );
    clip-path: polygon(
      100% 0%,
      100% 37%,
      100% 80%,
      100% 100%,
      19% 100%,
      0 100%,
      0% 2%
    );
  }
}
/* page-12 */
.page-12 {
  background-color: #e8fff9;
}
.page-12 > * {
  color: #9bc9ea;
}

.page-12 .colorful-2 {
  color: #88c9f9;
}
.page-12 .colorful-3 {
  color: #e0a8e5;
}

.page-12 > .item-1 {
  height: 75%;
  width: 40%;
  top: 18%;
  right: 3%;
}

.page-12 > .item-2 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;

  transform-origin: 65% 20%;
  animation: jump 0.8s ease-in-out both;
}
.page-12 > .item-3 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;
  /* -webkit-clip-path: polygon(98% 99%, 49% 1%, 45% 1%, 57% 19%);
  clip-path: polygon(98% 99%, 49% 1%, 45% 1%, 57% 19%); */
  animation: item-12-3-ani 1.3s 0.8s ease-in-out both;
}

@keyframes item-12-3-ani {
  0% {
    -webkit-clip-path: polygon(98% 99%, 49% 1%, 45% 1%, 57% 19%);
    clip-path: polygon(98% 99%, 49% 1%, 45% 1%, 57% 19%);
  }
  100% {
    -webkit-clip-path: polygon(98% 99%, 49% 1%, 0 0, 0 41%);
    clip-path: polygon(98% 99%, 49% 1%, 0 0, 0 41%);
  }
}
.page-12 > .item-4 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;

  transform-origin: 15% 40%;

  animation: jump 0.8s ease-in-out both;
}
.page-12 > .item-5 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;
  animation: item-12-5-ani 1.5s 0.8s ease-in-out both;
}
@keyframes item-12-5-ani {
  0% {
    -webkit-clip-path: polygon(100% 0, 0 52%, 0 61%, 6% 60%);
    clip-path: polygon(100% 0, 0 52%, 0 61%, 6% 60%);
  }
  100% {
    -webkit-clip-path: polygon(100% 0, 0 52%, 0 100%, 42% 100%);
    clip-path: polygon(100% 0, 0 52%, 0 100%, 42% 100%);
  }
}
.page-12 > .item-6 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;

  transform-origin: 50% 60%;

  animation: jump 0.8s ease-in-out both;
}
.page-12 > .item-7 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;

  animation: item-12-7-ani 1.3s 0.8s ease-in-out both;
}
@keyframes item-12-7-ani {
  0% {
    -webkit-clip-path: polygon(0 0, 49% 100%, 62% 100%, 66% 90%);
    clip-path: polygon(0 0, 49% 100%, 62% 100%, 66% 90%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 55% 100%, 100% 100%, 100% 54%);
    clip-path: polygon(0 0, 55% 100%, 100% 100%, 100% 54%);
  }
}
.page-12 > .item-8 {
  height: 90%;
  width: 50%;
  top: 10%;
  left: 2%;

  transform-origin: 85% 45%;

  animation: jump 0.8s ease-in-out both;
}

/* page-13 */
.page-13 {
  background-color: #e8fff9;
}
.page-13 > .item-1 {
  top: 3%;
  height: 15%;
  width: 85%;
  animation: item-13-1-ani 1s ease-in-out both;
}
@keyframes item-13-1-ani {
  0% {
    left: -90%;
  }
  100% {
    left: 0.5%;
  }
}
.page-13 > .item-2 {
  top: 25%;
  height: 15%;
  width: 83.5%;
  animation: item-13-2-ani 1s 1s ease-in-out both;
}

@keyframes item-13-2-ani {
  0% {
    left: 100%;
  }
  100% {
    left: 13.5%;
  }
}
.page-13 > .item-3 {
  top: 38%;
  height: 15%;
  width: 85%;

  animation: item-13-3-ani 1s 1s ease-in-out both;
}

@keyframes item-13-3-ani {
  0% {
    left: -90%;
  }
  100% {
    left: 0.5%;
  }
}
.page-13 > .item-4 {
  top: 61%;
  height: 15%;
  width: 83.5%;
  animation: item-13-4-ani 1s 2s ease-in-out both;
}
@keyframes item-13-4-ani {
  0% {
    left: 100%;
  }
  100% {
    left: 13.5%;
  }
}
.page-13 > .item-5 {
  top: 74%;
  height: 15%;
  width: 85%;
  animation: item-13-5-ani 1s 2s ease-in-out both;
}
@keyframes item-13-5-ani {
  0% {
    left: -90%;
  }
  100% {
    left: 0.5%;
  }
}
/* page-14 */
.page-14 {
  background-color: #eefbff;
}
.page-14 > .item-1 {
  top: 8.12%;

  width: 100%;
  height: 100%;
}

.page-14 > .item-2 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  transform-origin: 83% 42%;

  animation: item-14-2-ani 1s 0.2s ease-in-out both;
}
@keyframes item-14-2-ani {
  0% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  30% {
    opacity: 1;
    transform: rotateZ(-50deg);
  }
  40% {
    opacity: 1;
    transform: rotateZ(-50deg);
  }
  70% {
    opacity: 1;
    transform: rotateZ(10deg);
  }
  100% {
    transform: rotateZ(0deg);
    opacity: 0;
  }
}
.page-14 > .item-3 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  transform-origin: 83% 42%;
  animation: item-14-3-ani 1s 0.2s ease-in-out both;
  transform: rotateZ(50deg);
  opacity: 0;
}
@keyframes item-14-3-ani {
  0% {
    opacity: 0;
    transform: rotateZ(50deg);
  }
  30% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  40% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  70% {
    opacity: 0;
    transform: rotateZ(60deg);
  }
  100% {
    opacity: 0;
    transform: rotateZ(50deg);
  }
}
.page-14 > .item-4 {
  top: 8.12%;

  width: 100%;
  height: 100%;
}
.page-14 > .item-5 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  opacity: 1;

  animation: item-14-5-ani 2s 1s ease-in-out both;
}
@keyframes item-14-5-ani {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-14 > .item-31 {
  top: 10.12%;

  width: 100%;
  height: 100%;
  opacity: 0;

  animation: item-14-31-ani 2s 1s ease-in-out both;
}
@keyframes item-14-31-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-14 > .item-6 {
  top: 8.12%;

  width: 40%;
  height: 20%;
  right: 5%;
  opacity: 1;
  animation: item-14-6-ani 2s 1.5s ease-in-out both;
}
@keyframes item-14-6-ani {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-14 > .item-7 {
  top: 8.12%;

  width: 40%;
  height: 20%;
  right: 5%;
  opacity: 0;
  animation: item-14-7-ani 2s 1.5s ease-in-out both;
}
@keyframes item-14-7-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes jump-rotate-1 {
  0% {
    transform: scale(0) rotateZ(-15deg);
  }
  80% {
    transform: scale(1.1) rotateZ(7deg);
  }
  100% {
    transform: scale(1) rotateZ(0deg);
  }
}
@keyframes jump-rotate-2 {
  0% {
    transform: scale(0) rotateZ(15deg);
  }
  80% {
    transform: scale(1.1) rotateZ(-7deg);
  }
  100% {
    transform: scale(1) rotateZ(0deg);
  }
}
.page-14 > .item-8 {
  top: 8.12%;

  width: 100%;
  height: 100%;

  transform-origin: 13% 70%;
  animation: jump-rotate-1 1.5s 1.5s ease-in-out both;
}

.page-14 > .item-9 {
  top: 8.12%;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform-origin: 32% 50%;
  animation: jump 1.5s 1.5s ease-in-out both;
}
.page-14 > .item-10 {
  top: 1.12%;
  left: 3%;
  z-index: 2;

  width: 100%;
  height: 100%;
  transform-origin: 68% 40%;

  animation: jump 1.5s 1.5s ease-in-out both;
}
.page-14 > .item-11 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump-rotate-2 1.5s 1.5s ease-in-out both;
}
.page-14 > .item-32 {
  top: 10.12%;

  width: 100%;
  height: 100%;
  display: none;

  opacity: 1;
  animation: item-14-32-ani 2s ease-in-out both;
}
@keyframes item-14-32-ani {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-14 > .item-12 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;

  animation: item-14-12-ani 2s ease-in-out both;
}
@keyframes item-14-12-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-14 > .item-13 {
  top: 8.12%;

  display: none;
  width: 45%;
  height: 25%;
  right: 5%;
  opacity: 0;

  animation: item-14-13-ani 1.5s 0.5s ease-in-out both;
}
@keyframes item-14-13-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-14 > .item-14 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 14% 75%;

  animation: jump-rotate-1 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-15 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 33% 53%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-16 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-17 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump-rotate-2 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-33 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  display: none;

  opacity: 1;
  animation: item-14-33-ani 2s ease-in-out both;
}
@keyframes item-14-33-ani {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-14 > .item-18 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;

  animation: item-14-18-ani 1.5s 0.5s ease-in-out both;
}
@keyframes item-14-18-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-14 > .item-19 {
  top: 8.12%;

  display: none;
  width: 45%;
  height: 25%;
  right: 5%;
  opacity: 0;

  animation: item-14-19-ani 1.5s 0.5s ease-in-out both;
}
@keyframes item-14-19-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.page-14 > .item-20 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 14% 75%;

  animation: jump-rotate-1 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-21 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 33% 53%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-22 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-23 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump-rotate-2 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-24 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump-rotate-2 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-25 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;

  animation: item-14-25-ani 2s ease-in-out both;
}
@keyframes item-14-25-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.page-14 > .item-26 {
  top: 8.12%;

  display: none;
  width: 35%;
  height: 20%;
  right: 5%;
  opacity: 0;

  animation: item-14-26-ani 1.5s 0.5s ease-in-out both;
}
@keyframes item-14-26-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.page-14 > .item-27 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 14% 75%;

  animation: jump-rotate-1 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-28 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 70% 40%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-29 {
  top: 8.12%;

  display: none;
  width: 100%;
  height: 100%;
  transform-origin: 82% 75%;

  animation: jump 1.5s 0.5s ease-in-out both;
}
.page-14 > .item-30 {
  top: 8.12%;

  width: 100%;
  height: 100%;
}

.place {
  position: absolute;
  width: 1%;
  height: 1%;
  left: 33%;
  top: 53%;
  background-color: red;
}

.page-14 > .item-34 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  display: none;

  opacity: 1;
  animation: item-14-34-ani 2s ease-in-out both;
}
@keyframes item-14-34-ani {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.page-14 > .item-35 {
  top: 8.12%;

  width: 100%;
  height: 100%;
  display: none;

  opacity: 1;
  animation: item-14-18-ani 2s ease-in-out both;
}
@keyframes item-14-35-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.page-14 .home-p-tree {
  color: #8c4646;

  font-size: 1.75vw;
}
/* page-15 */
.page-15 {
  /* background-color: #fff3fc; */
}

.page-15 > .item-2 {
  width: 11%;
  height: 9vw;
  top: 10.5%;
  left: 53%;
  z-index: 100;
}
.page-15 > .item-2 > img {
  transform: rotateZ(0deg) scale(1);
  transition: all 1s;
}
.page-15 > .item-2:hover img {
  transform: rotateY(20deg) scale(1.2);
}
.page-15 > .item-2::after {
  content: "Design";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 90%;

  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;
}
.page-15 > .item-3 {
  width: 11%;
  height: 8.5vw;
  top: 12%;
  left: 68%;
}
.page-15 > .item-3 > img {
  transform: rotateZ(0deg) scale(1);
  transition: all 1s;
}
.page-15 > .item-3:hover img {
  transform: rotateY(20deg) scale(1.2);
}
.page-15 > .item-3::after {
  content: "Results";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 90%;

  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;
}
.page-15 > .item-4 {
  width: 12%;
  height: 9vw;
  top: 10%;

  left: 82%;
  transform: rotateZ(0deg);

  transition: all 1s;
}
.page-15 > .item-4 > img {
  transform: scale(1);
  transition: all 1s;
}
.page-15 > .item-4:hover img {
  transform: scale(1.1);
}

.page-15 > .item-4::after {
  content: "Engineering";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 90%;

  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;

  /* animation: page-16-font 3s ease-in-out infinite alternate-reverse; */
}
@keyframes page-16-font {
  0% {
    top: 106%;
  }
  25% {
    top: 115%;
  }
  50% {
    top: 110%;
  }
  100% {
    top: 110%;
  }
}
.page-15 > .item-5 {
  width: 11%;
  height: 9vw;
  top: 34%;
  left: 50%;
}
.page-15 > .item-5 > img {
  transform: rotateZ(-10deg) scale(1);
  transition: all 1s;
}
.page-15 > .item-5:hover img {
  transform: rotateY(20deg) scale(1.1);
}
.page-15 > .item-5::after {
  content: "Model";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 95%;

  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;
}
.page-15 > .item-6 {
  width: 11%;
  height: 9vw;
  top: 34.2%;
  left: 63.5%;
}
.page-15 > .item-6 > img {
  transform: rotateZ(-10deg) scale(1);
  transition: all 1s;
}
.page-15 > .item-6:hover img {
  transform: rotateY(20deg) scale(1.2);
}
.page-15 > .item-6::after {
  content: "IHP";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 95%;

  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;
}
.page-15 > .item-7 {
  width: 11%;
  height: 9vw;
  top: 36%;
  left: 79%;
}
.page-15 > .item-7 > img {
  transform: rotateZ(-10deg) scale(1);
  transition: all 1s;
}
.page-15 > .item-7:hover img {
  transform: rotateY(20deg) scale(1.1);
}
.page-15 > .item-7::after {
  content: "Education";
  position: absolute;
  line-height: 2%;
  width: 100%;
  left: 0%;
  top: 85%;
  text-align: center;
  color: #c1b7f7;
  font-size: 1vw;
}

iframe {
  height: 97%;
  width: 98%;
  left: 1%;
  border-radius: 1%;
}
.page-15 > .item-1 {
  height: 39%;
  width: 39%;
  top: 12%;
  left: 6%;
}

.promotion-video::before {
  z-index: -1;
  content: "";
  position: absolute;
  box-sizing: content-box;
  left: -1%;
  top: -1%;
  width: 100%;
  height: 100%;
  border-radius: 2%;
  background-image: linear-gradient(
    150deg,
    rgb(255, 255, 255),
    rgb(189, 182, 247),
    rgb(223, 190, 244),
    rgb(176, 212, 249)
  );
}

body {
  background-image: none;
}
.row {
  margin-top: -1.5% !important;
}

.line-container {
  left: -2vw;
  word-spacing: 15px;
  font-size: 6vw;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

svg {
  position: absolute;
  /* width: 100%; */
  /* height: 100%; */
}

.text {
  font-size: 6vw;
  left: -2vw;

  fill: none;
  stroke-width: 2;
  stroke-dasharray: 0 240;
  stroke-dashoffset: 0;
}

.text:nth-child(4n + 1) {
  stroke: rgb(210 162 246);
  animation: text1 1.5s ease-in-out forwards;
}
.text:nth-child(4n + 2) {
  stroke: rgb(241 159 196);

  animation: text2 1.5s ease-in-out forwards;
}
.text:nth-child(4n + 3) {
  stroke: rgb(146 156 246);
  animation: text3 1.5s ease-in-out forwards;
}
.text:nth-child(4n + 4) {
  stroke: rgb(146 156 246);

  animation: text4 1.5s ease-in-out forwards;
}

@keyframes text1 {
  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 60 180;
  }
}

@keyframes text2 {
  100% {
    stroke-dashoffset: 1060;
    stroke-dasharray: 60 180;
  }
}

@keyframes text3 {
  100% {
    stroke-dashoffset: 1120;
    stroke-dasharray: 60 180;
  }
}

@keyframes text4 {
  100% {
    stroke-dashoffset: 1180;
    stroke-dasharray: 60 180;
  }
}

footer {
  transform: scale(0.9);
}

.prize-btn {
  z-index: 3;

  position: absolute;

  width: 10vw;
  height: 10vw;
  left: 62vw;
  top: -4vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/award-1.webp");
  transform: rotateZ(5deg);
  transition: all 1s;
}

.prize-btn:hover {
  transition: all 1s;
  transform: rotateZ(-8deg);
}

.prize-btn:hover + .medal-container {
  opacity: 1;
  transition: all 1s 0.2s;
}

.prize-btn:hover::after {
  transition: all 1s;
  transform: scale(1.1);
}

.prize-btn::after {
  transition: all 1s;
  transform: scale(1);

  content: "";
  position: absolute;
  top: 42%;
  left: -11%;
  width: 140%;
  height: 100%;

  background-repeat: no-repeat;
  background-image: url("https://static.igem.wiki/teams/5038/medal/award-2.webp");
}

.prize-container {
  position: absolute;
  width: 70vw;
  left: 15vw;
  height: 28.5vw;
  top: 35vh;
}

.medal-container {
  opacity: 0;
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("https://static.igem.wiki/teams/5038/medal/award-bg.webp");
}
.medal-item:nth-child(1) {
  position: absolute;
  top: 1vw;
  left: 2vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/goldmedal.webp");
}

.medal-item:nth-child(2) {
  position: absolute;
  top: 13vw;

  left: 13vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/bestdp.webp");
}
.medal-item:nth-child(3) {
  position: absolute;
  top: 1vw;
  left: 24vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/bestmod.webp");
}

.medal-item:nth-child(4) {
  position: absolute;
  top: 13vw;
  left: 35vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/bestihp.webp");
}
.medal-item:nth-child(5) {
  position: absolute;
  top: 1vw;
  left: 46vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/bestedu.webp");
}
.medal-item:nth-child(6) {
  position: absolute;
  top: 13vw;

  left: 57vw;
  width: 11vw;
  height: 11vw;

  background-image: url("https://static.igem.wiki/teams/5038/medal/bestwiki.webp");
}
.medal-item:nth-child(1)::after {
  content: "Gold Medal";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;

  text-align: center;
}
.medal-item:nth-child(2)::after {
  content: "Best Diagnostics Project nomination";
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 100%;

  text-align: center;
}
.medal-item:nth-child(3)::after {
  content: "Best Model  nomination";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 50%;
  height: 100%;

  text-align: center;
}
.medal-item:nth-child(4)::after {
  content: "Best IHP nomination";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 50%;
  height: 100%;

  text-align: center;
}
.medal-item:nth-child(5)::after {
  content: "Best Education nomination";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;

  text-align: center;
}
.medal-item:nth-child(6)::after {
  content: "Best Wiki nomination";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 50%;
  height: 100%;

  text-align: center;
}
.medal-item::after{
  color: #DA8500;
}