:root {
    --fadein: .5s;
}

#cloud-wrapper {
    display: none;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
}

#cloud-diagram {
    height: 500px;
    width: 1000px;
}

#cloud-header-start {
    transition: all 1s ease-in;
}

#cloud-advance {
    z-index: 3;
}

.cloud01-a02 {
    animation: cloud01-a02-step var(--fadein) ease-in normal;
}

.cloud-fade-element {
    transition: opacity var(--fadein) ease-in;
}

#cloud03-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud04-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud05-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud06-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud07-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud07-cpu {
    transition: opacity var(--fadein) .5s;
}

#cloud07-storage {
    transition: opacity var(--fadein) 1s;
}

#cloud07-memory {
    transition: opacity var(--fadein) 1.5s;
}

#cloud08-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud09-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud10-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud11-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud12-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud13-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud13-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud14-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud15-a01 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud15-a02 {
    transition: opacity var(--fadein) .5s ease-in;
}

#cloud15-a03 {
    transition: opacity var(--fadein) .7s ease-in;
}

#cloud15-a04 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud16-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud17-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud17-a02 {
    transition: opacity var(--fadein) ease-in;
}

#cloud17-a03 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud17-a04 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud17-a05 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud18-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud18-a02 {
    transition: opacity var(--fadein) ease-in;
}

#cloud18-a03 {
    transition: opacity var(--fadein) ease-in;
}

#cloud18-a04 {
    transition: opacity var(--fadein) ease-in;
}

#cloud18-a05 {
    transition: opacity var(--fadein) ease-in;
}

#cloud18-a06 {
    transition: opacity var(--fadein) ease-in;
}

#cloud19-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud20-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud20-a02 {
    transition: opacity var(--fadein) ease-in;
}

#cloud20-a03 {
    transition: opacity var(--fadein) ease-in;
}

#cloud21-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud21-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud22-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud22-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud22-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud23-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud23-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud23-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud23-a04 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud23-a05 {
    transition: opacity var(--fadein) 1.2s ease-in;
}

#cloud23-a06 {
    transition: opacity var(--fadein) 1.5s ease-in;
}

#cloud23-a07 {
    transition: opacity var(--fadein) 1.8s ease-in;
}

#cloud24-a01 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud24-a02 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud25-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud25-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud25-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud25-a04 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud25-a05 {
    transition: opacity var(--fadein) 1.2s ease-in;
}

#cloud26-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud26-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud26-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud26-a04 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud26-a05 {
    transition: opacity var(--fadein) 1.2s ease-in;
}

#cloud26-a06 {
    transition: opacity var(--fadein) 1.5s ease-in;
}

#cloud26-a07 {
    transition: opacity var(--fadein) 1.8s ease-in;
}

#cloud27-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud27-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud27-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

#cloud27-a04 {
    transition: opacity var(--fadein) .9s ease-in;
}

#cloud28-a01 {
    transition: opacity var(--fadein) ease-in;
}

#cloud28-a02 {
    transition: opacity var(--fadein) .3s ease-in;
}

#cloud28-a03 {
    transition: opacity var(--fadein) .6s ease-in;
}

@keyframes cloud01-a02-step {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}