:root {
    --height_menubar: 110px; /*this is to set the correct top for scrolling elements such as the TOC or when you click on images/references(for the last two, use scroll-margin: var(--height_menubar);)*/
    --purpleDarkest: hsl(233, 30%, 39%);
    --purpleDark: #787FB6;
    --purpleNormal: #A5A8D5;
    --purpleLight: #C7CAEA;
    --purpleLightest: #E9ECFF;
    --backgroundWebsite: white; /*Ruben: I don't know what the background color is, but set the colour of the boxes to this color*/
    --lineColor: hsl(233, 30%, 39%); /* #A5A8D5;*/
    --lineDistance: 20px;
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
}

.row {
    overflow-x: clip;
    overflow-y: visible;
}

    .counter {
        display: flex; /* For centering */
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        font-size: 20vh; /* Adjust size as needed */
        font-weight: bold;
    }
    #text-counter {
        font-size: 10vh;
    }



@media (min-width: 1200px) {
    #main_content_home {
        font-size: 3vh;
    }

    .counter {
        display: flex; /* For centering */
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        font-size: 20vh; /* Adjust size as needed */
        font-weight: bold;
    }

    #text-counter {
        font-size: 10vh;
    }
}


@media (min-width: 992px) and (max-width: 1199px) {

    #main_content_home {
        font-size: 3vh;
    }

    .counter {
        display: flex; /* For centering */
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        font-size: 20vh; /* Adjust size as needed */
        font-weight: bold;
    }

    #text-counter {
        font-size: 10vh;
    }
}


@media (min-width: 576px) and (max-width:768px) {
    #main_content_home {
        font-size: 2vh;
    }

    .counter {
        display: flex; /* For centering */
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        font-size: 15vh; /* Adjust size as needed */
        font-weight: bold;
    }

    #text-counter {
        font-size: 4vh;
    }

}


@media (min-width: 1px) and (max-width: 565px) {
    #main_content_home {
        font-size: 4vw;
    }

    .counter {
        display: flex; /* For centering */
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        font-size: 10vh; /* Adjust size as needed */
        font-weight: bold;
    }

    #text-counter {
        font-size: 5vh;
    }
}



    body {
        font-family: 'White Rabbit', Arial, sans-serif;

    }
    /****************************counter************************************/
    @property --num {
        syntax: '<integer>';
        inherits: true;
        initial-value: 0;
    }



    .counter::before {
        counter-reset: my-counter var(--num);
        content: counter(my-counter);
        animation: count 2s ease-in-out forwards; /* Stop animation after it finishes */
    }

    @keyframes count {
        to {
            --num: 2900000;
        }
    }



    /*second row lines */
    @keyframes leftToRightTranslate {
        0% {
            transform: translateX(100vh)
        }

        100% {
            transform: translateX(0vh)
        }
    }




    @keyframes verticalUpIncreaseHeightPercentage {
        0% {
            height: 0%
        }

        100% {
            height: 100%
        }
    }




    #cont_line_second_row {
        position: relative;
        height: 40%;
        width: 100%;
        top: 0;
        left: 0;
    }

    .vertical_line_1 {
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: calc(100% + 1000px);
        bottom: 0px;
        z-index: -10;
        left: 0;
    }

    .vertical_line_2 {
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: calc(100% + 1000px);
        bottom: var(--lineDistance);
        z-index: -10;
        left: var(--lineDistance);
    }

    .vertical_line_3 {
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: calc(100% + 1000px);
        bottom: calc(var(--lineDistance) * 2);
        z-index: -10;
        left: calc(var(--lineDistance) * 2);
    }

    @keyframes linesVerticalRowOne {
        0% {
            transform: translateY(-100vh)
        }

        100% {
            transform: translateY(0vh)
        }
    }

    #linesVerticalRowOne {
        transform: translateY(-100vh);
        z-index: -10
    }

        #linesVerticalRowOne.startAnimation {
            animation-name: linesVerticalRowOne;
            animation-duration: 1s;
            z-index: -10;
            animation-fill-mode: forwards;
        }

    .horizontal_line1 {
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        width: calc(25vw);
        bottom: 0px;
        left: 0px;
        z-index: -10;
    }

    .horizontal_line2 {
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        width: calc(25vw);
        bottom: var(--lineDistance);
        left: var(--lineDistance);
        z-index: -10;
    }

    .horizontal_line3 {
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        width: calc(25vw);
        bottom: calc(2 * var(--lineDistance));
        left: calc(2 * var(--lineDistance));
        z-index: -10;
    }

    #linesHorizonalRowTwoOne {
        width: 0vw;
    }

    @keyframes linesHorizonalRowTwoOne {
        0% {
            width: 0vw;
        }

        100% {
            width: 25vw;
        }
    }

    #linesHorizonalRowTwoOne.startAnimation {
        animation-name: linesHorizonalRowTwoOne;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }



    #cont_line_second_row1 {
        position: relative;
        top: 0;
        right: 0px;
        height: 40%;
        width: 100%;
    }

    .class-5 {
        left: calc(25vw);
        top: -5px;
        height: calc(100%);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

    .class-6 {
        left: calc(25vw + 20px);
        top: -25px;
        height: calc(100%);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

    .class-7 {
        left: calc(25vw + 40px);
        top: -45px;
        height: calc(100%);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }


    #linesVerticalRowTwoOne {
        height: 0%;
    }


        #linesVerticalRowTwoOne.startAnimation {
            animation-name: verticalUpIncreaseHeightPercentage;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    @keyframes class-8 {
        0% {
            width: 0vw
        }

        100% {
            width: calc(75vw)
        }
    }

    .class-8 {
        left: calc(25vw);
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: 0px;
        right: calc(var(--lineDistance) * 2);
        z-index: -10;
    }

        .class-8.startAnimation {
            animation-name: class-8;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    @keyframes class-9 {
        0% {
            width: 0vw
        }

        100% {
            width: calc(75vw - 20px);
        }
    }

    .class-9 {
        left: calc(25vw + 20px);
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: var(--lineDistance);
        right: calc(var(--lineDistance));
        z-index: -10;
    }

        .class-9.startAnimation {
            animation-name: class-9;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    @keyframes class-10 {
        0% {
            width: 0vw
        }

        100% {
            width: calc(75vw - 40px);
        }
    }

    .class-10 {
        left: calc(25vw + 40px);
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: calc(2 * var(--lineDistance));
        right: 0;
        z-index: -10;
    }

        .class-10.startAnimation {
            animation-name: class-10;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }




    /************************box!!!!************************/
    #animateBoxSecondRowFirst {
        transform: translateX(100vw) translateY(30%);
    }

    @keyframes animateBoxSecondRowFirst {
        0% {
            transform: translateX(100vw) translateY(30%)
        }

        75% { 
            transform: translateX(0) translateY(30%)
        }

        100% {
            transform: translateX(0) translateY(0)
        }
    }

    #animateBoxSecondRowFirst.startAnimation {
        transform: translateX(0) translateY(0);
        animation-name: animateBoxSecondRowFirst;
        animation-duration: 1s;
    }




    #animateBoxSecondRowSecond {
        transform: translateX(100vw);
    }

    @keyframes animateBoxSecondRowSecond {
        0% {
            transform: translateX(100vw)
        }

        100% {
            transform: translateX(0vw)
        }
    }

    #animateBoxSecondRowSecond.startAnimation {
        animation-name: animateBoxSecondRowSecond;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }




    /************third row!*************/
    #cont_line_third_row1 {
        left: 0px;
        position: relative;
        top: 30%;
        width: 100%;
        height: 30%;
    }


    .class-15 {
        left: 0px;
        width: 0vw;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: 0px;
        z-index: -10;
    }

    @keyframes zeroTofullVW {
        0% {
            width: 0vw
        }

        100% {
            width: 100vw
        }
    }

    .class-15.startAnimation {
        animation-name: zeroTofullVW;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }


    .class-15-1 {
        left: 0px;
        width: 0vw;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: var(--lineDistance);
        z-index: -10;
    }

        .class-15-1.startAnimation {
            animation-name: zeroTofullVW;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

    .class-15-2 {
        left: 0px;
        width: 0vw;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: calc(2 * var(--lineDistance));
        z-index: -10;
    }

        .class-15-2.startAnimation {
            animation-name: zeroTofullVW;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }



#boxAnglestAnimateTranslateRightLeft {
    transform: translateX(100vw);
    z-index:99;
}

    @keyframes boxAnglestAnimateTranslateRightLeft {
        0% {
            transform: translateX(100vw);
        }

        100% {
            transform: translateX(0);
        }
    }

#boxAnglestAnimateTranslateRightLeft.startAnimation {
    transform: translateX(0);
    animation-name: boxAnglestAnimateTranslateRightLeft;
    animation-duration: 1s;
    z-index: 99;
}




    #cont_line_third_row2 {
        right: 0px;
        position: relative;
        top: 30%;
        width: 100%;
        height: 30%;
    }

    @keyframes class-22 {
        0% {
            width: 0
        }

        100% {
            width: 80vw
        }
    }

    .class-22.startAnimation {
        animation-name: class-22;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-22 {
        right: 0px;
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: 0px;
        z-index: -10;
    }

    @keyframes class-21 {
        0% {
            width: 0
        }

        100% {
            width: calc(80vw + var(--lineDistance));
        }
    }

    .class-21.startAnimation {
        animation-name: class-21;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-21 {
        right: 0px;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        width: 0;
        bottom: var(--lineDistance);
        z-index: -10;
    }

    @keyframes class-21-1 {
        0% {
            width: 0
        }

        100% {
            width: calc(80vw + var(--lineDistance) * 2);
        }
    }

    .class-21-1.startAnimation {
        animation-name: class-21-1;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }


    .class-21-1 {
        right: 0px;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        bottom: calc(2 * var(--lineDistance));
        z-index: -10;
        width: 0;
    }


    #cont_line_third_row3 {
        left: 0px;
        position: relative;
        top: 30%;
        width: 100%;
        height: 40%;
    }

    @keyframes class-23 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + 5px)
        }
    }

    .class-23.startAnimation {
        animation-name: class-23;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-23 {
        right: 80vw;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0px;
        top: -5px;
        z-index: -10;
    }

    @keyframes class-24 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + var(--lineDistance) + 5px);
        }
    }

    .class-24.startAnimation {
        animation-name: class-24;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-24 {
        right: calc(80vw + 20px);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0px;
        top: calc(-1 * var(--lineDistance) - 5px);
        z-index: -10;
    }

    @keyframes class-25 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + 2 * var(--lineDistance) + 5px);
        }
    }

    .class-25.startAnimation {
        animation-name: class-25;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-25 {
        right: calc(80vw + 40px);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        top: calc(var(--lineDistance) * -2 - 5px);
        z-index: -10;
        height: 0px;
    }


    /*******fourth row**********/
    #cont_line_fourth_row1 {
        min-height: 1px;
        position: relative;
        top: 0px;
        width: 100%;
        height: 50%;
        right: 0px;
    }
#cont_line_fourth_row3 {
    position: relative;
    top: 0px;
    width: 100%;
    height: 50%;
    left: 0px;
}

    @keyframes class-26 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + 5px);
        }
    }

    .class-26.startAnimation {
        animation-name: class-26;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-26 {
        right: calc(80vw);
        top: -5px;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0;
        z-index: -10;
    }

    @keyframes class-27 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + var(--lineDistance) + 5px)
        }
    }

    .class-27.startAnimation {
        animation-name: class-27;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

.class-27 {
    right: calc(80vw + 20px);
    top: -5px;
    position: absolute;
    width: 5px;
    background-color: var(--lineColor);
    height: 0;
    z-index: -10;
}

    @keyframes class-28 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + 2 * var(--lineDistance) + 5px)
        }
    }

    .class-28.startAnimation {
        animation-name: class-28;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

.class-28 {
    right: calc(80vw + 40px);
    top: -5px;
    position: absolute;
    width: 5px;
    background-color: var(--lineColor);
    height: 0;
    z-index: -10;
}

    @keyframes fourthrowLeftRight {
        0% {
            width: 0vw
        }

        100% {
            width: calc(50vw + 45px)
        }
    }


.class-29 {
    right: calc(30vw - 40px - 5px);
    width: 0;
    position: absolute;
    height: 5px;
    background-color: var(--lineColor);
    bottom: 0px;
    z-index: -10;
}

        .class-29.startAnimation {
            animation-name: fourthrowLeftRight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    .class-30 {
        right: calc(30vw - 20px - 5px);
        bottom: calc(-20px);
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

        .class-30.startAnimation {
            animation-name: fourthrowLeftRight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    .class-31 {
        right: calc(30vw - 5px);
        bottom: calc(-40px);
        width: 0;
        position: absolute;
        height: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

        .class-31.startAnimation {
            animation-name: fourthrowLeftRight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }

    #cont_line_fourth_row2 {
        position: relative;
        top: 0;
        width: 100%;
        left: 0px;
        height: 50%;
    }


    @keyframes class-32 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% - 40px + 5px)
        }
    }

    .class-32.startAnimation {
        animation-name: class-32;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-32 {
        right: calc(30vw - 5px);
        top: 35px;
        height: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

    @keyframes class-33 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% - 20px + 5px)
        }
    }

    .class-33.startAnimation {
        animation-name: class-33;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-33 {
        right: calc(30vw - 20px - 5px);
        top: 15px;
        height: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

    @keyframes class-34 {
        0% {
            height: 0
        }

        100% {
            height: calc(100% + 5px)
        }
    }

    .class-34.startAnimation {
        animation-name: class-34;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    .class-34 {
        right: calc(30vw - 40px - 5px);
        top: -5px;
        height: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }

    /*boxes third row***/



    #boxOneFuorthRow {
        transform: translateX(100vw) translateY(50vh);
    }

    #boxTwoFuorthRow {
        transform: translateX(100vw) translateY(50vh);
    }

    #boxThreeFuorthRow {
        transform: translateX(100vw) translateY(50vh);
    }

    /*three boxes large and larger*/
    @keyframes boxFuorthRowXl {
        0% {
            transform: translateX(100vw) translateY(-100%)
        }

        33% {
            transform: translateX(var(--translateXminus)) translateY(-100%)
        }

        66% {
            transform: translateX(var(--translateXminus)) translateY(0)
        }

        100% {
            transform: translateX(0) translateY(0)
        }
    }

    @media (min-width: 1200px) {
        #boxThreeFuorthRow.startAnimation {
            animation-name: boxFuorthRowXl;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -50vw;
        }

        #boxTwoFuorthRow.startAnimation {
            animation-name: boxFuorthRowXl;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -28vw;
            animation-delay: 1s;
        }

        #boxOneFuorthRow.startAnimation {
            animation-name: boxFuorthRowXl;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: 0vw;
            animation-delay: 2s;
        }
    }

    /*three boxes LG and larger*/
    @keyframes boxFuorthRowLG {
        0% {
            transform: translateX(100vw) translateY(-40vh)
        }

        33% {
            transform: translateX(var(--translateXminus)) translateY(-100%)
        }

        66% {
            transform: translateX(var(--translateXminus)) translateY(0)
        }

        100% {
            transform: translateX(0) translateY(0)
        }
    }

    @keyframes boxFuorthRowLGLowerBox {
        0% {
            transform: translateX(100vw) translateY(-80vh)
        }

        25% {
            transform: translateX(var(--translateXminus)) translateY(-80vh)
        }

        50% {
            transform: translateX(var(--translateXminus)) translateY(-10vh)
        }

        66% {
            transform: translateX(10vw) translateY(-10vh)
        }

        100% {
            transform: translateX(20vw) translateY(0)
        }
    }


    @media (min-width: 992px) and (max-width: 1199px) {
        #boxThreeFuorthRow.startAnimation {
            animation-name: boxFuorthRowLGLowerBox;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -20vw;
        }

        #boxTwoFuorthRow.startAnimation {
            animation-name: boxFuorthRowLG;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -40vw;
            animation-delay: 1s;
        }

        #boxOneFuorthRow.startAnimation {
            animation-name: boxFuorthRowLG;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -8vw;
            animation-delay: 2s;
        }
    }


    /*three boxes md and larger*/
    @keyframes boxFuorthRowmd {
        0% {
            transform: translateX(100vw) translateY(-100%)
        }

        33% {
            transform: translateX(var(--translateXminus)) translateY(-100%)
        }

        66% {
            transform: translateX(var(--translateXminus)) translateY(0)
        }

        100% {
            transform: translateX(0) translateY(0)
        }
    }

    @keyframes boxFuorthRowmdLowerBox {
        0% {
            transform: translateX(100vw) translateY(-250%)
        }

        25% {
            transform: translateX(var(--translateXminus)) translateY(-250%)
        }

        50% {
            transform: translateX(var(--translateXminus)) translateY(-10vh)
        }

        66% {
            transform: translateX(10vw) translateY(-10vh)
        }

        100% {
            transform: translateX(20vw) translateY(0)
        }
    }


    @media (min-width: 768px) and (max-width:991px) {
        #boxThreeFuorthRow.startAnimation {
            animation-name: boxFuorthRowmdLowerBox;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -20vw;
        }

        #boxTwoFuorthRow.startAnimation {
            animation-name: boxFuorthRowmd;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -40vw;
            animation-delay: 1s;
        }

        #boxOneFuorthRow.startAnimation {
            animation-name: boxFuorthRowmd;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: -8vw;
            animation-delay: 2s;
        }
    }


    /*three boxes md and smaller*/


    @keyframes boxFuorthRow {
        0% {
            transform: translateX(100vw) translateY(var(--translateY))
        }

        33% {
            transform: translateX(var(--translateXminus)) translateY(var(--translateY))
        }

        66% {
            transform: translateX(0) translateY(-10vh)
        }

        100% {
            transform: translateX(0) translateY(0)
        }
    }


    @media (min-width: 1px) and (max-width: 767px) {
        #boxThreeFuorthRow.startAnimation {
            animation-name: boxFuorthRow;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: 0;
            --translateY: -300%;
        }

        #boxTwoFuorthRow.startAnimation {
            animation-name: boxFuorthRow;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: 0;
            --translateY: -200%;
            animation-delay: 1s;
        }

        #boxOneFuorthRow.startAnimation {
            animation-name: boxFuorthRow;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            --translateXminus: 0;
            animation-delay: 2s;
            --translateY: -100%;
        }
    }


    .cont-comes-in {
        position: relative;
        background-color: var(--purpleDarkest);
        height: 20vw;
    }



    /*********fifth row*********/
    #cont_line_fifth_row1 {
        position: relative;
        top: 0px;
        width: 100%;
        height: 30%;
        right: 0px;
    }

    @keyframes fifthDown {
        0% {
            height: 0%
        }


        100% {
            height: var(--height)
        }
    }

.class-35.startAnimation {
    animation-name: fifthDown;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    --height: calc(100% + 2 * var(--lineDistance) + 5px);
}

    .class-35 {
        right: calc(30vw - 40px - 5px);
        top: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0px;
        z-index: -10;
    }


    .class-36 {
        right: calc(30vw - 20px - 5px);
        top: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0;
        z-index: -10;
    }

        .class-36.startAnimation {
            animation-name: fifthDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height: calc(100% + var(--lineDistance) + 5px);
        }


    .class-37 {
        right: calc(30vw - 5px);
        top: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        height: 0;
        z-index: -10;
    }

        .class-37.startAnimation {
            animation-name: fifthDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height: calc(100% + 5px);
        }



    @keyframes horizontal {
        0% {
            width: 0%
        }


        100% {
            width: var(--width)
        }
    }

.class-38 {
    right: calc(30vw - 5px);
    width: 0;
    bottom: -5px;
    position: absolute;
    height: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}

        .class-38.startAnimation {
            animation-name: horizontal;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --width: calc(20vw);
        }

.class-39 {
    right: calc(30vw - 20px - 5px);
    bottom: calc(-25px);
    width: 0;
    position: absolute;
    height: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}


        .class-39.startAnimation {
            animation-name: horizontal;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --width: calc(20vw);
        }

.class-40 {
    right: calc(30vw - 40px - 5px);
    bottom: calc(-45px);
    width: 0;
    position: absolute;
    height: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}


        .class-40.startAnimation {
            animation-name: horizontal;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --width: calc(20vw);
        }


    #cont_line_fifth_row2 {
        position: relative;
        bottom: 0px;
        width: 100%;
        height: 70%;
        right: 0px;
    }

.class-41 {
    right: calc(50vw - 5px);
    top: 0;
    height: 0;
    position: absolute;
    width: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}

        .class-41.startAnimation {
            animation-name: fifthDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height: calc(100%);
        }

.class-42 {
    right: calc(50vw - 20px - 5px);
    top: 20px;
    height: 0;
    position: absolute;
    width: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}

        .class-42.startAnimation {
            animation-name: fifthDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height: calc(100% - 20px);
        }

.class-43 {
    right: calc(50vw - 40px - 5px);
    top: 40px;
    height: 0;
    position: absolute;
    width: 5px;
    background-color: var(--lineColor);
    z-index: -10;
}

        .class-43.startAnimation {
            animation-name: fifthDown;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height: calc(100% - 40px);
        }


    @keyframes boxAboveWereWeComeIn {
        0% {
            transform: translateY(100vh);
            opacity: 100%;
        }

        100% {
            transform: translateY(0);
            opacity: 100%;
        }
    }

    #boxAboveWereWeComeIn.startAnimation {
        animation-name: boxAboveWereWeComeIn;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    #boxAboveWereWeComeIn {
        transform: translateY(100vh);
        opacity: 0%;
    }

    @keyframes increaseheight {
        0% {height: 0%}
        100% {height: var(--height2)}
    }

    .class-48 {
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
        right: calc(50vw - 40px - 5px);
        top: 0;
        height: 0;
    }
        .class-48.startAnimation {
            animation-name: increaseheight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height2: calc(100%);
        }



    .class-49 {
        right: calc(50vw - 20px - 5px);
        top: 0;
        height: 0;
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }
.class-49.startAnimation {
    animation-name: increaseheight;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    --height2: calc(100%);
}
    .class-50 {
        right: calc(50vw - 5px);
        top: 0;
        height: calc(0);
        position: absolute;
        width: 5px;
        background-color: var(--lineColor);
        z-index: -10;
    }
.class-50.startAnimation {
    animation-name: increaseheight;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    --height2: calc(100%);
}



        #seventrowbox1 {
            width: 60%;
            left: 10%;
            top: 55%;
        }


  

        .class-51 {
            position: absolute;
            width: 5px;
            background-color: var(--lineColor);
            z-index: -10;
            right: calc(50vw + 7px);
            top: -300px;
            height: calc(0px)
        }



        .class-52 {
            right: calc(50vw + 7px - 20px);
            top: -300px;
            height: calc(0px);
            position: absolute;
            width: 5px;
            background-color: var(--lineColor);
            z-index: -10;
        }

        .class-53 {
            right: calc(50vw + 7px - 40px);
            top: -300px;
            height: calc(0px);
            position: absolute;
            width: 5px;
            background-color: var(--lineColor);
            z-index: -10;
        }
        .class-51.startAnimation {
            animation-name: increaseheight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height2: calc(50% + 300px);
        }

        .class-52.startAnimation {
            animation-name: increaseheight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height2: calc(50% + 300px);
        }

        .class-53.startAnimation {
            animation-name: increaseheight;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            --height2: calc(50% + 300px);
        }

  


@keyframes ComeInAbove {
    0% {
        transform: translateY(-100vh);
        opacity: 100%;
    }

    100% {
        transform: translateY(0);
        opacity: 100%;
    }
}

#seventrowbox2 {
    transform: translateY(-100vh);
    opacity: 0%;
}

    #seventrowbox2.startAnimation {
        animation-name: ComeInAbove;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

#seventrowbox1 {
    transform: translateY(-100vh);
    opacity: 0%;
}
    #seventrowbox1.startAnimation {
        animation-name: ComeInAbove;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }