div.star {
    width: 30px;
    height: 30px;
    opacity: 1;
    position: absolute;
    bottom: 0;
    display: none;
    z-index: 0;
}

.colOne {
    color: red;
}

.colTwo {
    color: white;
}

.colThree {
    color: pink;
}

.colFour {
    color: red;
}

.colFive {
    color: white;
}

.colSix {
    color: pink;
}

@keyframes flowOne {
    0% {
        opacity: 0;
        bottom: 0;
        left: 14%
    }

    40% {
        opacity: .8;
    }

    50% {
        opacity: 1;
        left: 21%;
    }

    60% {
        opacity: .2;
    }

    80% {
        bottom: 80%
    }

    100% {
        opacity: 0;
        bottom: 100%;
        left: 18%
    }
}

@keyframes flowTwo {
    0% {
        opacity: 0;
        bottom: 0;
        left: 50%;
    }

    40% {
        opacity: .8;
    }

    50% {
        opacity: 1;
        left: 60%
    }

    60% {
        opacity: .2;
    }

    80% {
        bottom: 60%
    }

    100% {
        opacity: 0;
        bottom: 80%;
        left: 55%;
    }
}

@keyframes flowThree {
    0% {
        opacity: 0;
        bottom: 0;
        left: 75%;
    }

    40% {
        opacity: .8;
    }

    50% {
        opacity: 1;
        left: 68%
    }

    60% {
        opacity: .2;
    }

    80% {
        bottom: 70%
    }

    100% {
        opacity: 0;
        bottom: 90%;
        left: 63%;
    }
}

@keyframes flowFour {
    0% {
        opacity: 0;
        bottom: 0;
        left: 30%;
    }

    40% {
        opacity: .8;
    }

    50% {
        opacity: 1;
        left: 38%
    }

    60% {
        opacity: .2;
    }

    80% {
        bottom: 70%
    }

    100% {
        opacity: 0;
        bottom: 90%;
        left: 35%;
    }
}

@keyframes flowFive {
    0% {
        opacity: 0;
        bottom: 0;
        left: 90%;
    }

    40% {
        opacity: .8;
    }

    50% {
        opacity: 1;
        left: 82%
    }

    60% {
        opacity: .2;
    }

    80% {
        bottom: 70%
    }

    100% {
        opacity: 0;
        bottom: 90%;
        left: 85%;
    }
}

@media only screen and (max-width: 600px) {
    @keyframes flowOne {
        0% {
            opacity: 0;
            bottom: 0;
            left: 14%
        }

        40% {
            opacity: .8;
        }

        50% {
            opacity: 1;
            left: 25%;
        }

        60% {
            opacity: .2;
        }

        80% {
            bottom: 80%
        }

        100% {
            opacity: 0;
            bottom: 100%;
            left: 18%
        }
    }

    @keyframes flowTwo {
        0% {
            opacity: 0;
            bottom: 0;
            left: 50%;
        }

        40% {
            opacity: .8;
        }

        50% {
            opacity: 1;
            left: 60%
        }

        60% {
            opacity: .2;
        }

        80% {
            bottom: 60%
        }

        100% {
            opacity: 0;
            bottom: 80%;
            left: 55%;
        }
    }

    @keyframes flowThree {
        0% {
            opacity: 0;
            bottom: 0;
            left: 75%;
        }

        40% {
            opacity: .8;
        }

        50% {
            opacity: 1;
            left: 65%
        }

        60% {
            opacity: .2;
        }

        80% {
            bottom: 70%
        }

        100% {
            opacity: 0;
            bottom: 90%;
            left: 60%;
        }
    }

    @keyframes flowFour {
        0% {
            opacity: 0;
            bottom: 0;
            left: 30%;
        }

        40% {
            opacity: .8;
        }

        50% {
            opacity: 1;
            left: 40%
        }

        60% {
            opacity: .2;
        }

        80% {
            bottom: 70%
        }

        100% {
            opacity: 0;
            bottom: 90%;
            left: 35%;
        }
    }

    @keyframes flowFive {
        0% {
            opacity: 0;
            bottom: 0;
            left: 90%;
        }

        40% {
            opacity: .8;
        }

        50% {
            opacity: 1;
            left: 75%
        }

        60% {
            opacity: .2;
        }

        80% {
            bottom: 70%
        }

        100% {
            opacity: 0;
            bottom: 90%;
            left: 80%;
        }
    }
}