body{
    background-image: url("https://static.igem.wiki/teams/5542/home/home-footer-bg.webp") !important;
    background-position: center center;
    background-repeat: repeat;
    background-size: contain;
}
.home-page{
    width: 100dvw;
    position: relative;
}
.home-page-cover{
    /* width: 100%; */
    width: 100dvw;
    display: block;
}
.home-page-part{
    transition: all 0.3s ease;
    position: absolute;
}
#home-cover-text{
    width: 96.3%;
    left: 49.6%;
    top: 82%;
    transform: translate(-50%, -50%);
}
#home-cover-abcs{
    width: 62.6%;
    transition-duration: 1s;
    transition-timing-function: linear;
    left: 39.05%;
    top: 81.2%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-cover-abcs.active{
    clip-path: inset(0 0 0 0);
}
/* #home-cover-dna{
    width: 95%;
    left: 0;
    top: 2%;
} */
/* #home-cover.active #home-cover-dna{
    animation: shining 3s ease infinite;
} */
/* #home-cover-cells{
    width: 56.5%;
    left: 0.5%;
    top: 10.5%;
}
#home-cover.active #home-cover-cells{
    animation: shining 3s ease infinite;
} */
@keyframes shining {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.15);
    }
    100% {
        filter: brightness(1);
    }
}
/* #home-1-cover{
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
} */
/* #home-1.sticky #home-1-cover{
    position: sticky;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
} */
/* #home-1.fixed #home-1-cover{
    position: fixed;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
} */
/* #home-1.hide #home-1-cover{
    opacity: 0;
} */
/* #home-1-occupy{
    width: 100dvw;
    opacity: 0;
    display: none;
} */
/* #home-1.fixed #home-1-occupy{
    display: block;
} */
/* #home-1-layer{
    width: 100dvw;
    height: 100%;
    z-index: 20;
    transition: opacity 0.3s ease;
    opacity: 1;
    position: absolute;
    top: 0;
}
#home-1.hide #home-1-layer{
    opacity: 0;
} */
/* #home-1-layerin{
    width: 100dvw;
    height: 100%;
    position: relative;
}
#home-1-layerinin{
    width: 100dvw;
    aspect-ratio: 2600 / 1481;
} */
/* #home-1.sticky #home-1-layerinin{
    position: sticky;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-1.fixed #home-1-layerinin{
    position: fixed;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-1-layerininin{
    width: 100dvw;
    height: 100%;
    position: relative;
} */
#home-1-dialog{
    width: 22%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 22%;
    top: 27%;
    transform: translate(-50%, -50%);
}
#home-1.active #home-1-dialog{
    opacity: 1;
}
#home-1-people{
    width: 14%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 22%;
    top: 25%;
    transform: translate(-50%, -50%);
}
#home-1.active #home-1-people{
    opacity: 1;
    /* transition-delay: 0.3s; */
}
#home-1-stars{
    width: 30%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 20%;
    top: 44%;
    transform: translate(-50%, -50%);
}
#home-1.active #home-1-stars{
    opacity: 1;
    /* transition-delay: 1s; */
}
#home-1-text{
    width: 55%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 67%;
    top: calc(54% + 4rem);
    transform: translate(-50%, -50%);
}
#home-1-text.active{
    opacity: 1;
    top: 54%;
}
/* #home-2{
    opacity: 0;
    transform: translateY(-50%);
}
#home-1.hide:not(.go) #home-2{
    opacity: 1;
    position: fixed;
    top: calc(50dvh + 35px);
} */
/* #home-1.go #home-2{
    position: relative;
    transform: translateY(0);
    opacity: 1;
} */
/* #home-2-occupy{
    width: 100dvw;
    display: none;
}
#home-1.hide #home-2-occupy{
    display: block;
}
#home-1.go #home-2-occupy{
    display: none;
} */
/* #home-2-dialog{
    width: 22%;
    left: 22%;
    top: 27%;
    transform: translate(-50%, -50%);
} */
#home-2-people{
    width: 14%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 22%;
    top: 25%;
    transform: translate(-50%, -50%);
}
#home-1.active #home-2-people{
    opacity: 1;
    transition-delay: 1s;
}
#home-2-stars{
    width: 30%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 23.5%;
    top: 60%;
    transform: translate(-50%, -50%);
}
#home-1.active #home-2-stars{
    opacity: 1;
    transition-delay: 1s;
}
/* #home-2-text{
    width: 55%;
    left: 66%;
    top: 51%;
    transform: translate(-50%, -50%);
} */
/* #home-3-cover{
    z-index: 10;
    opacity: 1;
}
#home-3.sticky #home-3-cover{
    position: sticky;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-3.fixed #home-3-cover{
    position: fixed;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-3.hide #home-3-cover{
    opacity: 0;
}
#home-3-occupy{
    width: 100dvw;
    opacity: 0;
    display: none;
}
#home-3.fixed #home-3-occupy{
    display: block;
}
#home-3-layer{
    width: 100dvw;
    height: 100%;
    z-index: 20;
    transition: opacity 0.3s ease;
    opacity: 1;
    position: absolute;
    top: 0;
}
#home-3.hide #home-3-layer{
    opacity: 0;
}
#home-3-layerin{
    width: 100dvw;
    height: 100%;
    position: relative;
} */
/* #home-3-layerinin{
    width: 100dvw;
    aspect-ratio: 2600 / 1481;
} */
/* #home-3.sticky #home-3-layerinin{
    position: sticky;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-3.fixed #home-3-layerinin{
    position: fixed;
    top: calc(50dvh + 35px);
    transform: translateY(-50%);
}
#home-3-layerininin{
    width: 100dvw;
    height: 100%;
    position: relative;
} */
#home-3-knife{
    width: 12%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 84%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#home-3.active #home-3-knife{
    opacity: 1;
}
#home-3-hand{
    width: 30%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 82%;
    top: 52%;
    transform: translate(-50%, -50%);
}
#home-3.active #home-3-hand{
    opacity: 1;
    transition-delay: 0.3s;
}
#home-3-line{
    width: 84%;
    transition-duration: 1.5s !important;
    left: 7.5%;
    top: 63%;
    clip-path: inset(0 0 0 100%);
}
#home-3.active #home-3-line{
    transition-delay: 0.3s;
    clip-path: inset(0 0 0 0);
}
#home-3-text{
    width: 53%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 37%;
    top: calc(48% + 4rem);
    transform: translate(-50%, -50%);
}
#home-3-text.active{
    opacity: 1;
    top: 48%;
}
/* #home-4{
    opacity: 0;
    transform: translateY(-50%);
}
#home-3.hide:not(.go) #home-4{
    opacity: 1;
    position: fixed;
    top: calc(50dvh + 35px);
}
#home-3.go #home-4{
    transform: translateY(0);
    opacity: 1;
}
#home-4-occupy{
    width: 100dvw;
    display: none;
}
#home-3.hide #home-4-occupy{
    display: block;
}
#home-3.go #home-4-occupy{
    display: none;
} */
#home-4-woman{
    width: 21%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 84%;
    top: 47%;
    transform: translate(-50%, -50%);
}
#home-4.active #home-4-woman{
    opacity: 1;
}
#home-4-tears{
    width: 1%;
    left: 86%;
    top: 31%;
    transform: translate(-50%, -50%);
}
#home-4.active #home-4-tears{
    animation: water-drop 2s ease 0.7s infinite;
}
#home-4-tears2{
    width: 64%;
    left: 38%;
    top: 46%;
    transform: translate(-50%, -50%);
}
#home-4.active #home-4-tears2{
    animation: water-drop 2.5s ease 0.7s infinite;
}
#home-4-line{
    width: 84%;
    transition-duration: 1.5s !important;
    left: 7.5%;
    top: 63%;
    clip-path: inset(0 0 0 100%);
}
#home-4.active #home-4-line{
    transition-delay: 0.7s;
    clip-path: inset(0 0 0 0);
}
#home-4-text{
    width: 53%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 37%;
    top: calc(48% + 4rem);
    transform: translate(-50%, -50%);
}
#home-4-text.active{
    opacity: 1;
    top: 48%;
}
#home-5-footprint1{
    width: 92%;
    transition-duration: 2s !important;
    transition-timing-function: linear;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 0 0 100%);
}
#home-5.active #home-5-footprint1{
    clip-path: inset(0 0 0 0);
}
#home-5-footprint2{
    width: 36%;
    transition-duration: 0.7s !important;
    left: 58%;
    top: 89%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-5.active #home-5-footprint2{
    transition-delay: 3s;
    clip-path: inset(0 0 0 0);
}
#home-5-clock{
    width: 32.5%;
    opacity: 0;
    transition-duration: 0.5s !important;
    left: 60.8%;
    top: 16.7%;
    transform: translate(-50%, -50%);
}
#home-5.active #home-5-clock{
    opacity: 1;
    transition-delay: 0.5s;
}
#home-5-sunshine{
    width: 24%;
    transition-duration: 1s !important;
    left: 17%;
    top: 80%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 0 100% 0);
}
#home-5.active #home-5-sunshine{
    transition-delay: 2s;
    clip-path: inset(0 0 0 0);
}
#home-5-tears{
    width: 2%;
    left: 89%;
    top: 68%;
    transform: translate(-50%, -50%);
    animation: water-drop 3s ease infinite;
}
#home-5-text{
    width: 68%;
    opacity: 0;
    scale: 0.8;
    transition-duration: 0.7s !important;
    left: 47%;
    top: 48%;
    transform: translate(-50%, -50%);
}
#home-5-text.active{
    opacity: 1;
    scale: 1;
}
#home-6-shield{
    width: 35%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 27.5%;
    top: 52%;
    transform: translate(-50%, -50%);
}
#home-6.active #home-6-shield{
    opacity: 1;
}
#home-6-cjuh{
    width: 24%;
    left: 15%;
    top: 30%;
    transform: translate(-50%, -50%);
}
#home-6-block1{
    width: 20%;
    /* transition-duration: 0.7s !important; */
    top: 78%;
    left: 0;
    transform: translate(-100%, -50%);
}
#home-6.active #home-6-block1{
    left: 15%;
    transition-delay: 0.3s;
    transform: translate(-50%, -50%);
}
#home-6-block2{
    width: 20%;
    transition-duration: 0.7s !important;
    left: 100%;
    top: 23%;
    transform: translate(0, -50%);
}
#home-6.active #home-6-block2{
    left: 48%;
    transition-delay: 0.3s;
    transform: translate(-50%, -50%);
}
#home-6-molecule{
    width: 11%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 15%;
    top: 78%;
    transform: translate(-50%, -50%);
}
#home-6.active #home-6-molecule{
    opacity: 1;
    transition-delay: 0.6s;
}
#home-6-body{
    width: 15%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 49%;
    top: 27%;
    transform: translate(-50%, -50%);
}
#home-6.active #home-6-body{
    opacity: 1;
    transition-delay: 1s;
}
#home-6-text{
    width: 68%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 60%;
    top: calc(57% + 4rem);
    transform: translate(-50%, -50%);
}
#home-6-text.active{
    opacity: 1;
    top: 57%;
}
#home-7-cells1{
    width: 11%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 16.5%;
    top: 34%;
    transform: translate(-50%, -50%);
}
#home-7.active #home-7-cells1{
    opacity: 1;
}
#home-7-arrow1{
    width: 13%;
    /* transition-duration: 0.7s !important; */
    left: 33%;
    top: 33%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-7.active #home-7-arrow1{
    transition-delay: 0.3s;
    clip-path: inset(0 0 0 0);
}
#home-7-cells2{
    width: 11%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 51%;
    top: 30%;
    transform: translate(-50%, -50%);
}
#home-7.active #home-7-cells2{
    opacity: 1;
    transition-delay: 0.6s;
}
#home-7-arrow2{
    width: 13%;
    /* transition-duration: 0.7s !important; */
    left: 69%;
    top: 32.5%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-7.active #home-7-arrow2{
    transition-delay: 0.9s;
    clip-path: inset(0 0 0 0);
}
#home-7-cells3{
    width: 11%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 84%;
    top: 33%;
    transform: translate(-50%, -50%);
}
#home-7.active #home-7-cells3{
    opacity: 1;
    transition-delay: 1.2s;
}
#home-7-particles{
    width: 94%;
    transition-duration: 1s !important;
    left: 49%;
    top: 46%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-7.active #home-7-particles{
    transition-delay: 1.5s;
    clip-path: inset(0 0 0 0);
}
#home-7-text{
    width: 60%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 50%;
    top: calc(78% + 4rem);
    transform: translate(-50%, -50%);
}
#home-7-text.active{
    opacity: 1;
    top: 78%;
}
#home-8-rna{
    width: 18%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 51%;
    top: 22%;
    transform: translate(-50%, -50%);
}
#home-8.active #home-8-rna{
    opacity: 1;
}
#home-8-body{
    width: 5%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 51%;
    top: 48%;
    transform: translate(-50%, -50%);
}
#home-8.active #home-8-body{
    opacity: 1;
    transition-delay: 0.3s;
}
#home-8-signal1{
    width: 21%;
    transition-duration: 0.7s !important;
    left: 51%;
    top: 48%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 50% 0 50%);
}
#home-8.active #home-8-signal1{
    transition-delay: 0.6s;
    clip-path: inset(0 0 0 0);
}
#home-8-signal2{
    width: 75%;
    transition-duration: 1s !important;
    left: 51%;
    top: 37%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 50% 0 50%);
}
#home-8.active #home-8-signal2{
    transition-delay: 1s;
    clip-path: inset(0 0 0 0);
}
#home-8-ray{
    width: 100%;
    transition-duration: 1.5s !important;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 50% 0 50%);
}
#home-8.active #home-8-ray{
    transition-delay: 1s;
    clip-path: inset(0 0 0 0);
}
#home-8-text{
    width: 80%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 50%;
    top: calc(80% + 4rem);
    transform: translate(-50%, -50%);
}
#home-8-text.active{
    opacity: 1;
    top: 80%;
}
#home-9-adipocyte{
    width: 22%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 15%;
    top: 40%;
    transform: translate(-50%, -50%);
}
#home-9.active #home-9-adipocyte{
    opacity: 1;
}
#home-9-injector{
    width: 6%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 9%;
    top: 18%;
    transform: translate(-65%, -80%) rotate(-15deg);
    transform-origin: right bottom;
}
#home-9.active #home-9-injector{
    opacity: 1;
    transition-delay: 0.7s;
    transform: translate(-50%, -50%);
}
#home-9-cells1{
    width: 1.7%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 9.8%;
    top: 20.5%;
    transform: translate(-50%, -50%);
}
#home-9.active #home-9-cells1{
    opacity: 1;
    transition-delay: 1s;
}
#home-9-arrow1{
    width: 14%;
    transition-duration: 0.7s !important;
    left: 37%;
    top: 35%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-9.active #home-9-arrow1{
    transition-delay: 1.3s;
    clip-path: inset(0 0 0 0);
}
#home-9-cells2{
    width: 11%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 52%;
    top: 32%;
    transform: translate(-50%, -50%);
}
#home-9.active #home-9-cells2{
    opacity: 1;
    transition-delay: 2s;
}
#home-9-arrow2{
    width: 15%;
    transition-duration: 0.7s !important;
    left: 45%;
    top: 15%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 100% 0);
}
#home-9.active #home-9-arrow2{
    transition-delay: 2.3s;
    clip-path: inset(0 0 0 0);
}
#home-9-arrow3{
    width: 13%;
    transition-duration: 0.7s !important;
    left: 67%;
    top: 35%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-9.active #home-9-arrow3{
    transition-delay: 3s;
    clip-path: inset(0 0 0 0);
}
#home-9-cells3{
    width: 10%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 81%;
    top: 38%;
    transform: translate(-50%, -50%);
}
#home-9.active #home-9-cells3{
    opacity: 1;
    transition-delay: 3.7s;
}
#home-9-cells4{
    width: 12%;
    opacity: 0;
    /* transition-duration: 0.7s !important; */
    left: 81%;
    top: 38%;
    transform: translate(-50%, -50%);
}
#home-9.active #home-9-cells4{
    opacity: 1;
    transition-delay: 4.4s;
    animation: vaguely 4s ease 6.9s infinite;
}
#home-9-text{
    width: 80%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 50%;
    top: calc(76% + 4rem);
    transform: translate(-50%, -50%);
}
#home-9-text.active{
    opacity: 1;
    top: 76%;
}
#home-10-lines{
    width: 66%;
    left: 8%;
    top: 37%;
    transform: translate(0, -50%);
    animation: vaguely 3s ease infinite;
}
@keyframes vaguely {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#home-10-particle{
    width: 30%;
    transition-duration: 0.7s !important;
    left: 53%;
    top: 43%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-10.active #home-10-particle{
    clip-path: inset(0 0 0 0);
    animation: floating-ud 3s ease infinite;
}
#home-10-hand{
    width: 25%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 75%;
    top: 60%;
    transform: translate(0, -50%);
}
#home-10.active #home-10-hand{
    opacity: 1;
    transition-delay: 0.7s;
}
#home-10-scar{
    width: 3%;
    /* scale: 0 1; */
    transform-origin: center center;
    transition-duration: 0.7s !important;
    left: 80%;
    top: 40%;
    transform: translate(-50%, -50%) scaleX(0);
}
#home-10.active #home-10-scar{
    /* scale: 1; */
    transition-delay: 1.4s;
    transform: translate(-50%, -50%);
}
#home-10-text{
    width: 60%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 5%;
    top: calc(70% + 4rem);
}
#home-10-text.active{
    opacity: 1;
    top: 70%;
}
#home-11-adipocyte{
    width: 12%;
    opacity: 0;
    left: 15%;
    top: 32%;
    transform: translate(-50%, -50%);
}
#home-11.active #home-11-adipocyte{
    opacity: 1;
    animation: shaking 4s ease infinite;
}
#home-11-rna1{
    width: 37%;
    transition-duration: 1.2s !important;
    left: 40%;
    top: 29%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-11.active #home-11-rna1{
    transition-delay: 0.3s;
    clip-path: inset(0 0 0 0);
}
#home-11-gate{
    width: 11%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 62%;
    top: 28%;
    transform: translate(-50%, -50%);
}
#home-11.active #home-11-gate{
    opacity: 1;
    transition-delay: 1.3s;
}
#home-11-rna2{
    width: 35%;
    transition-duration: 1.2s !important;
    left: 40%;
    top: 29%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-11.active #home-11-rna2{
    transition-delay: 1.8s;
    clip-path: inset(0 0 0 0);
}
#home-11-flame{
    width: 30%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 61%;
    top: 28%;
    transform: translate(-50%, -50%);
}
#home-11.active #home-11-flame{
    opacity: 1;
    transition-delay: 2.8s;
    animation: breathing 3s ease infinite;
}
#home-11-arrow{
    width: 8%;
    transition-duration: 0.7s !important;
    left: 79%;
    top: 27%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-11.active #home-11-arrow{
    clip-path: inset(0 0 0 0);
    transition-delay: 3.5s;
}
#home-11-dot{
    width: 4%;
    opacity: 0;
    left: 88%;
    top: 28%;
    transform: translate(-50%, -50%);
}
#home-11.active #home-11-dot{
    opacity: 1;
    transition-delay: 4.2s;
}
#home-11-wink{
    width: 12%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 88%;
    top: 26%;
    transform: translate(-50%, -50%);
}
#home-11.active #home-11-wink{
    opacity: 1;
    transition-delay: 4.5s;
    animation: breathing 3s ease infinite;
}
#home-11-text{
    width: 80%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 50%;
    top: calc(80% + 4rem);
    transform: translate(-50%, -50%);
}
#home-11-text.active{
    top: 80%;
    opacity: 1;
}
@keyframes shaking {
    0% {
        rotate: 0deg;
    }
    50% {
        rotate: 10deg;
    }
    100% {
        rotate: 0deg;
    }
}
#home-12-cells{
    width: 19%;
    opacity: 0;
    left: 15%;
    top: 30%;
    transform: translate(-50%, -40%);
}
#home-12.active #home-12-cells{
    opacity: 1;
    transform: translate(-50%, -50%);
}
#home-12-arrow1{
    width: 12%;
    transition-duration: 0.7s !important;
    left: 32%;
    top: 32%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-12.active #home-12-arrow1{
    transition-delay: 0.3s;
    clip-path: inset(0 0 0 0);
}
#home-12-particle1{
    width: 8%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 31%;
    top: 34%;
    transform: translate(-50%, -50%);
}
#home-12.active #home-12-particle1{
    opacity: 1;
    transition-delay: 0.3s;
    animation: floating-ud 3s linear infinite;
}
#home-12-adipocyte{
    width: 30%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 53%;
    top: 30%;
    transform: translate(-50%, -50%);
    animation: floating 4s ease infinite;
}
#home-12.active #home-12-adipocyte{
    opacity: 1;
    transition-delay: 0.8s;
}
#home-12-arrow2{
    width: 15%;
    transition-duration: 0.7s !important;
    left: 72%;
    top: 15%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-12.active #home-12-arrow2{
    transition-delay: 1.3s;
    clip-path: inset(0 0 0 0);
}
#home-12-particle2{
    width: 13%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 72%;
    top: 14%;
    transform: translate(-50%, -50%);
}
#home-12.active #home-12-particle2{
    opacity: 1;
    transition-delay: 1.3s;
    animation: floating-ud 3s linear infinite;
}
#home-12-ep{
    width: 12%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 80%;
    top: 41%;
    transform: translate(-50%, -50%);
}
#home-12.active #home-12-ep{
    opacity: 1;
    transition-delay: 1.8s;
}
#home-12-text{
    width: 85%;
    opacity: 0;
    transition-duration: 0.7s !important;
    left: 50%;
    top: calc(78% + 4rem);
    transform: translate(-50%, -50%);
}
#home-12-text.active{
    opacity: 1;
    top: 78%;
}
@keyframes floating {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.025;
    }
    100% {
        scale: 1;
    }
}
@keyframes floating-ud {
    0% {
        transform: translate(-50%, -50%);
    }
    /* 25% {
        transform: translate(-50%, -57%);
    } */
    50% {
        /* transform: translate(-50%, -50%); */
        transform: translate(-50%, -57%);
    }
    /* 75% {
        transform: translate(-50%, -43%);
    } */
    100% {
        transform: translate(-50%, -50%);
    }
}
#home-13-drop{
    width: 5%;
    left: 24%;
    top: 59%;
    transform: translateX(-50%);
}
#home-13.active #home-13-drop{
    animation: water-drop 3.5s ease infinite;
}
#home-13-arrow{
    width: 20%;
    transition-duration: 0.7s !important;
    /* transition-delay: 0.5s; */
    top: 38%;
    right: 34%;
    transform: translate(-50%, -50%);
    clip-path: inset(0 100% 0 0);
}
#home-13.active #home-13-arrow{
    clip-path: inset(0 0 0 0);
}
#home-13-flame{
    width: 18%;
    opacity: 0;
    transition-duration: 0.7s !important;
    /* transition-delay: 0.5s; */
    animation: breathing 3s linear infinite;
    top: 40%;
    right: 13%;
    /* right: calc(13% - 4rem); */
    transform: translate(-50%, -50%);
    clip-path: inset(0 0 0 100%);
}
#home-13.active #home-13-flame{
    opacity: 1;
    transition-delay: 0.3s;
    /* right: 13%; */
    clip-path: inset(0 0 0 0);
}
#home-13-text{
    width: 80%;
    opacity: 0;
    transition-duration: 0.7s;
    top: calc(83% + 4rem);
    left: 50%;
    transform: translate(-50%, -50%);
}
#home-13-text.active{
    top: 83%;
    opacity: 1;
}
@keyframes water-drop {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 0%);
        opacity: 0;
    }
}
@keyframes breathing {
    0% {
        filter: brightness(1);
        scale: 1;
    }
    50% {
        filter: brightness(1.05);
        scale: 1.05;
        transform: translate(-48%, -48%);
    }
    100% {
        filter: brightness(1);
        scale: 1;
    }
}
#home-promotion-video{
    opacity: 0;
    transition: all 0.7s ease;
    transform: translateX(-2rem);
}
#home-href.active #home-promotion-video{
    opacity: 1;
    transform: translateX(0);
}
#home-promotion-video iframe{
    transition: all 0.3s ease;
}
#home-promotion-video iframe:hover{
    transform: scale(1.05);
}
#home-hyperlink{
    opacity: 0;
    transition: all 0.7s ease;
    transform: translateX(2rem);
}
#home-href.active #home-hyperlink{
    opacity: 1;
    transform: translateX(0);
}
#home-hyperlink img{
    transition: all 0.3s ease;
}
#home-hyperlink img:hover{
    transform: scale(1.1);
}