div#prodContain {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    max-height: 700px;
    position: relative;
    margin: auto
}

#prodTop {
    width: 100%;
    position: absolute;
    left: 0;
    top: 60%;
    z-index: 10
}

#prodAnt {
    width: 100%;
    position: absolute;
    left: 0;
    top: 64%;
    z-index: 9
}

#prodCap3 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 74%;
    z-index: 6
}

#prodCap2 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 71.6%;
    z-index: 7
}

#prodCap1 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 76.8%;
    z-index: 8
}

#prodBase {
    width: 100%;
    z-index: 5
}

#pointers {
    width: 100%;
    position: absolute;
    z-index: 20;
    -webkit-clip-path: inset(0 57% 0 43%);
    clip-path: inset(0 57% 0 43%);
    opacity: 0
}

#labels {
    width: 100%;
    position: absolute;
    z-index: 20;
    opacity: 0
}

.pointers {
    -webkit-clip-path: inset(0) !important;
    clip-path: inset(0) !important;
    transition: all 3s ease-in-out;
    transition-delay: 0.2s;
    opacity: 1 !important;
}

.labels {
    opacity: 1 !important;
    transition: all 1s ease-in-out;
    transition-delay: 1.5s
}

.prodTop {
    top: 0 !important;
    transition: top 2s cubic-bezier(0, 0, 0.01, 1)
}

.prodAnt {
    top: 30% !important;
    transition: top 2s cubic-bezier(0, 0, 0.01, 1)
}

.prodCap3 {
    top: 50% !important;
    transition: top 2s cubic-bezier(0, 0, 0.01, 1)
}

.prodCap2 {
    top: 53% !important;
    transition: top 2s cubic-bezier(0, 0, 0.01, 1)
}

.prodCap1 {
    top: 60% !important;
    transition: top 2s cubic-bezier(0, 0, 0.01, 1)
}