/*** 3eme l top 70 vh */

body {
    background-color: #374859;
    --first-line-top: 0%;
    --second-line-top: calc(50% - 5vh);
    --third-line-top: calc(100% - calc( 39vh / 3));
    --start-point: -5vw;
    --second-left: calc(calc(50% - 5vw) - 34%);
    --third-left: calc(calc(50% - 5vw) - 17%);
    --fifth-left: calc(calc(50% - 5vw) + 17%);
    --sixth-left: calc(calc(50% - 5vw) + 34%);
    --last-left: calc(calc(100% - 5vw));
    --center-horizontal: calc(50% - 5vw);
}

.container {
    width: 50vw;
    height: 39vh;
    position: fixed;
    left: 25vw;
    top: 50vh;
}

@media screen and (max-width: 1024px) {
    .container {
        width: calc(100vw - 10vw);
        left: 5vw;
    }
}

@keyframes blinker {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

@keyframes display {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

div.logo {
    width: 10vw;
    height: calc(39vh / 3);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.hub {
    position: absolute;
    left: var(--center-horizontal);
    top: var(--second-line-top);
    animation: rebounds 3s ease-in;
}

.hub path.b,
.hub path.c {
    animation: blinker 2s 3s linear infinite;
}

@keyframes rebounds {
    0% {
        width: 0;
        height: 0;
    }
    40% {
        width: 10vw;
        height: calc(39vh / 3);
    }
    50% {
        width: 9vw;
        height: calc( calc(39vh / 3) - 1vw);
    }
    60% {
        width: 10vw;
        height: calc(39vh / 3);
    }
    70% {
        width: 9vw;
        height: calc( calc(39vh / 3) - 1vw);
    }
    100% {
        width: 10vw;
        height: calc(39vh / 3);
    }
}

div.plug {
    top: var(--second-line-top);
    left: var(--fifth-left);
    animation: plug 3s ease-out;
}

@keyframes plug {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    50% {
        top: var(--first-line-top);
        left: var(--last-left);
    }
    75% {
        top: var(--second-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--second-line-top);
        left: var(--fifth-left);
    }
}

.bag {
    top: var(--second-line-top);
    left: var( --sixth-left);
    animation: bag 3s 0.5s ease-out;
}

.bag svg {
    animation: display 0.6s ease-out;
}

@keyframes bag {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    60% {
        top: var(--first-line-top);
        left: var(--last-left);
    }
    75% {
        top: var(--second-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--second-line-top);
        left: var( --sixth-left);
    }
}

.position {
    top: var(--second-line-top);
    left: var(--last-left);
    animation: position 3s 1s ease-out;
}

.position svg {
    animation: display 1.1s ease-out;
}

@keyframes position {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    60% {
        top: var(--first-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--second-line-top);
        left: var(--last-left);
    }
}

.arrow-top-right {
    top: var(--first-line-top);
    left: calc(var(--last-left) - 25px);
    animation: arrow-top-right 3s 1.5s ease-out;
}

.arrow-top-right svg {
    animation: display 1.6s ease-out;
    transform: translate3d( 0px, 20px, 0px);
}

@keyframes arrow-top-right {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: calc(var(--last-left) - 25px);
    }
}

.etc {
    top: var(--first-line-top);
    left: var( --sixth-left);
    animation: etc 3s 2s ease-out;
}

.etc svg {
    animation: display 2.1s ease-out;
}

@keyframes etc {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: var( --sixth-left);
    }
}

.shopping-cart {
    top: var(--first-line-top);
    left: var(--fifth-left);
    animation: shopping-cart 3s 2.5s ease-out;
}

.shopping-cart svg {
    animation: display 2.6s ease-out;
}

@keyframes shopping-cart {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: var( --fifth-left);
    }
}

.delivery {
    top: var(--first-line-top);
    left: var(--center-horizontal);
    animation: delivery 3s 3s ease-out;
}

.delivery svg {
    animation: display 3.1s ease-out;
}

@keyframes delivery {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: var( --center-horizontal);
    }
}

.screen {
    top: var(--first-line-top);
    left: var(--third-left);
    animation: screen 3s 3.5s ease-out;
}

.screen svg {
    animation: display 3.6s ease-out;
}

@keyframes screen {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: var( --third-left);
    }
}

.phone {
    top: var(--first-line-top);
    left: var(--second-left);
    animation: phone 3s 4s ease-out;
}

.phone svg {
    animation: display 4.1s ease-out;
}

@keyframes phone {
    0% {
        top: var(--first-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--first-line-top);
        left: var( --second-left);
    }
}

.arrow-top-left {
    top: var(--first-line-top);
    left: var(--start-point);
}

.arrow-top-left svg {
    animation: display 6s ease-out;
    transform: rotate(-90deg) translate3d(-20px, 20px, 0px);
}

div.wallet {
    top: var(--second-line-top);
    left: var( --third-left);
    animation: wallet 3s ease-out;
}

@keyframes wallet {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    50% {
        top: var(--third-line-top);
        left: var(--start-point);
    }
    75% {
        top: var(--second-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--second-line-top);
        left: var(--third-left);
    }
}

div.people {
    top: var(--second-line-top);
    left: var( --second-left);
    animation: people 3s 0.5s ease-out;
}

.people svg {
    animation: display 0.6s ease-out;
}

@keyframes people {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    60% {
        top: var(--third-line-top);
        left: var(--start-point);
    }
    75% {
        top: var(--second-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--second-line-top);
        left: var( --second-left);
    }
}

div.cloud {
    top: var(--second-line-top);
    left: var( --start-point);
    animation: cloud 3s 1s ease-out;
}

.cloud svg {
    animation: display 1.1s ease-out;
}

@keyframes cloud {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    60% {
        top: var(--third-line-top);
        left: var(--start-point);
    }
    100% {
        top: var(--second-line-top);
        left: var( --start-point);
    }
}

div.arrow-bottom-left {
    top: var(--third-line-top);
    left: var(--start-point);
    animation: arrow-bottom-left 3s 1.5s ease-out;
    justify-content: flex-end !important;
}

.arrow-bottom-left svg {
    animation: display 1.6s ease-out;
    transform: translate3d(25px, 0px, 0px);
}

@keyframes arrow-bottom-left {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var(--start-point);
    }
}

div.etc2 {
    top: var(--third-line-top);
    left: var( --second-left);
    animation: etc2 3s 2s ease-out;
    justify-content: flex-end;
}

.etc2 svg {
    animation: display 2.1s ease-out;
}

@keyframes etc2 {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var( --second-left);
    }
}

div.tools {
    top: var(--third-line-top);
    left: var( --third-left);
    animation: tools 3s 2.5s ease-out;
    justify-content: flex-end;
}

.tools svg {
    animation: display 2.6s ease-out;
}

@keyframes tools {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var( --third-left);
    }
}

div.painter {
    top: var(--third-line-top);
    left: var( --center-horizontal);
    animation: painter 3s 3s ease-out;
    justify-content: flex-end;
}

.painter svg {
    animation: display 3.1s ease-out;
}

@keyframes painter {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var( --center-horizontal);
    }
}

div.pharma {
    top: var(--third-line-top);
    left: var( --fifth-left);
    animation: pharma 3s 3.5s ease-out;
    justify-content: flex-end;
}

.pharma svg {
    animation: display 3.6s ease-out;
}

@keyframes pharma {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var( --fifth-left);
    }
}

div.box {
    top: var(--third-line-top);
    left: var( --sixth-left);
    animation: box 3s 4s ease-out;
    justify-content: flex-end;
}

.box svg {
    animation: display 4.1s ease-out;
}

@keyframes box {
    0% {
        top: var(--third-line-top);
        left: var(--last-left);
    }
    100% {
        top: var(--third-line-top);
        left: var( --sixth-left);
    }
}

.arrow-bottom-right {
    top: var(--third-line-top);
    left: var(--last-left);
    justify-content: flex-end !important;
}

.arrow-bottom-right svg {
    animation: display 6s ease-out;
    transform: rotate(90deg) translate3d(0px, 20px, 0px);
}