.loader {
    width: 150px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.drawit {
    fill: transparent;
    opacity: .3;
    stroke: #000;
    stroke-width: 3px;
    stroke-dasharray: 700;
    stroke-dashoffset: -700;
    animation: dash 6s linear .5s infinite alternate;
}

.jobing-j {
    stroke: #cecece;
    fill: #ffffff;
}

/* path {
    opacity: 0.1;
    fill: #cecece;
} */

/* Keyframes */

@keyframes dash {
    0% {
        stroke-dashoffset: 700;
        opacity: .3;
    }
    90% {
        stroke-dashoffset: -600;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -700;
        opacity: .3;
    }
}

@keyframes pisca {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.6;
    }
}

#shape1 {
    animation: pisca 1.5s linear 0s infinite alternate;
}

#shape2 {
    animation: pisca 1.5s linear .15s infinite alternate;
}

#shape3 {
    animation: pisca 1.5s linear .25s infinite alternate;
}

#shape4 {
    animation: pisca 1.5s linear .35s infinite alternate;
}

#shape5 {
    animation: pisca 1.5s linear .45s infinite alternate;
}

#shape6 {
    animation: pisca 1.5s linear .55s infinite alternate;
}

#shape7 {
    animation: pisca 1.5s linear .65s infinite alternate;
}

#shape8 {
    animation: pisca 1.5s linear .75s infinite alternate;
}

#shape9 {
    animation: pisca 1.5s linear .85s infinite alternate;
}

#shape10 {
    animation: pisca 1.5s linear .95s infinite alternate;
}