@-webkit-keyframes pumbSound1 {
    40% {
        height: 6px;
    }
    60% {
        height: 1px;
    }
    80% {
        height: 49px;
    }
    100% {
        height: 9px;
    }
}

@-moz-keyframes pumbSound1 {
    40% {
        height: 26px;
    }
    60% {
        height: 8px;
    }
    80% {
        height: 47px;
    }
    100% {
        height: 35px;
    }
}

@-o-keyframes pumbSound1 {
    40% {
        height: 40px;
    }
    60% {
        height: 4px;
    }
    80% {
        height: 28px;
    }
    100% {
        height: 37px;
    }
}

@keyframes pumbSound1 {
    40% {
        height: 1px;
    }
    60% {
        height: 40px;
    }
    80% {
        height: 29px;
    }
    100% {
        height: 38px;
    }
}

@-webkit-keyframes pumbSound2 {
    40% {
        height: 12px;
    }
    60% {
        height: 10px;
    }
    80% {
        height: 2px;
    }
    100% {
        height: 24px;
    }
}

@-moz-keyframes pumbSound2 {
    40% {
        height: 43px;
    }
    60% {
        height: 45px;
    }
    80% {
        height: 49px;
    }
    100% {
        height: 6px;
    }
}

@-o-keyframes pumbSound2 {
    40% {
        height: 1px;
    }
    60% {
        height: 7px;
    }
    80% {
        height: 30px;
    }
    100% {
        height: 18px;
    }
}

@keyframes pumbSound2 {
    40% {
        height: 14px;
    }
    60% {
        height: 14px;
    }
    80% {
        height: 33px;
    }
    100% {
        height: 24px;
    }
}

@-webkit-keyframes pumbSound3 {
    40% {
        height: 8px;
    }
    60% {
        height: 43px;
    }
    80% {
        height: 18px;
    }
    100% {
        height: 39px;
    }
}

@-moz-keyframes pumbSound3 {
    40% {
        height: 41px;
    }
    60% {
        height: 20px;
    }
    80% {
        height: 2px;
    }
    100% {
        height: 39px;
    }
}

@-o-keyframes pumbSound3 {
    40% {
        height: 47px;
    }
    60% {
        height: 17px;
    }
    80% {
        height: 9px;
    }
    100% {
        height: 44px;
    }
}

@keyframes pumbSound3 {
    40% {
        height: 34px;
    }
    60% {
        height: 33px;
    }
    80% {
        height: 44px;
    }
    100% {
        height: 29px;
    }
}

@-webkit-keyframes pumbSound4 {
    40% {
        height: 32px;
    }
    60% {
        height: 12px;
    }
    80% {
        height: 36px;
    }
    100% {
        height: 27px;
    }
}

@-moz-keyframes pumbSound4 {
    40% {
        height: 33px;
    }
    60% {
        height: 42px;
    }
    80% {
        height: 39px;
    }
    100% {
        height: 13px;
    }
}

@-o-keyframes pumbSound4 {
    40% {
        height: 26px;
    }
    60% {
        height: 15px;
    }
    80% {
        height: 33px;
    }
    100% {
        height: 5px;
    }
}

@keyframes pumbSound4 {
    40% {
        height: 48px;
    }
    60% {
        height: 30px;
    }
    80% {
        height: 37px;
    }
    100% {
        height: 18px;
    }
}

@-webkit-keyframes pumbSound5 {
    40% {
        height: 23px;
    }
    60% {
        height: 32px;
    }
    80% {
        height: 48px;
    }
    100% {
        height: 16px;
    }
}

@-moz-keyframes pumbSound5 {
    40% {
        height: 2px;
    }
    60% {
        height: 16px;
    }
    80% {
        height: 9px;
    }
    100% {
        height: 9px;
    }
}

@-o-keyframes pumbSound5 {
    40% {
        height: 6px;
    }
    60% {
        height: 41px;
    }
    80% {
        height: 37px;
    }
    100% {
        height: 35px;
    }
}

@keyframes pumbSound5 {
    40% {
        height: 43px;
    }
    60% {
        height: 8px;
    }
    80% {
        height: 3px;
    }
    100% {
        height: 43px;
    }
}

@-webkit-keyframes pumbSound6 {
    40% {
        height: 29px;
    }
    60% {
        height: 34px;
    }
    80% {
        height: 43px;
    }
    100% {
        height: 45px;
    }
}

@-moz-keyframes pumbSound6 {
    40% {
        height: 6px;
    }
    60% {
        height: 22px;
    }
    80% {
        height: 33px;
    }
    100% {
        height: 23px;
    }
}

@-o-keyframes pumbSound6 {
    40% {
        height: 48px;
    }
    60% {
        height: 6px;
    }
    80% {
        height: 24px;
    }
    100% {
        height: 8px;
    }
}

@keyframes pumbSound6 {
    40% {
        height: 8px;
    }
    60% {
        height: 28px;
    }
    80% {
        height: 42px;
    }
    100% {
        height: 27px;
    }
}

@-webkit-keyframes pumbSound7 {
    40% {
        height: 4px;
    }
    60% {
        height: 29px;
    }
    80% {
        height: 6px;
    }
    100% {
        height: 23px;
    }
}

@-moz-keyframes pumbSound7 {
    40% {
        height: 12px;
    }
    60% {
        height: 35px;
    }
    80% {
        height: 22px;
    }
    100% {
        height: 28px;
    }
}

@-o-keyframes pumbSound7 {
    40% {
        height: 24px;
    }
    60% {
        height: 47px;
    }
    80% {
        height: 44px;
    }
    100% {
        height: 9px;
    }
}

@keyframes pumbSound7 {
    40% {
        height: 47px;
    }
    60% {
        height: 18px;
    }
    80% {
        height: 3px;
    }
    100% {
        height: 15px;
    }
}

@-webkit-keyframes pumbSound8 {
    40% {
        height: 42px;
    }
    60% {
        height: 4px;
    }
    80% {
        height: 26px;
    }
    100% {
        height: 32px;
    }
}

@-moz-keyframes pumbSound8 {
    40% {
        height: 4px;
    }
    60% {
        height: 43px;
    }
    80% {
        height: 17px;
    }
    100% {
        height: 26px;
    }
}

@-o-keyframes pumbSound8 {
    40% {
        height: 1px;
    }
    60% {
        height: 39px;
    }
    80% {
        height: 47px;
    }
    100% {
        height: 50px;
    }
}

@keyframes pumbSound8 {
    40% {
        height: 39px;
    }
    60% {
        height: 14px;
    }
    80% {
        height: 17px;
    }
    100% {
        height: 7px;
    }
}

@-webkit-keyframes pumbSound9 {
    40% {
        height: 49px;
    }
    60% {
        height: 21px;
    }
    80% {
        height: 5px;
    }
    100% {
        height: 21px;
    }
}

@-moz-keyframes pumbSound9 {
    40% {
        height: 36px;
    }
    60% {
        height: 25px;
    }
    80% {
        height: 32px;
    }
    100% {
        height: 42px;
    }
}

@-o-keyframes pumbSound9 {
    40% {
        height: 1px;
    }
    60% {
        height: 37px;
    }
    80% {
        height: 28px;
    }
    100% {
        height: 39px;
    }
}

@keyframes pumbSound9 {
    40% {
        height: 44px;
    }
    60% {
        height: 20px;
    }
    80% {
        height: 1px;
    }
    100% {
        height: 8px;
    }
}

main {
position: relative;
margin-top: 40px;   
}

main #levels {
    width: 70px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    position: relative;
}

main #levels .level {
    width: 3px;
    height: 50px;
    margin-left: 2px;
    display: inline-block;
    position: relative;
}

main #levels .level:after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(186, 0, 0, 0.5) 0%, rgba(212, 81, 31, 1) 13%, rgba(255, 217, 84, 1) 35%, rgba(0, 255, 46, 1) 66%, rgba(0, 198, 33, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(186, 0, 0, 0.5) 0%, rgba(212, 81, 31, 1) 13%, rgba(255, 217, 84, 1) 35%, rgba(0, 255, 46, 1) 66%, rgba(0, 198, 33, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(186, 0, 0, 0.5) 0%, rgba(212, 81, 31, 1) 13%, rgba(255, 217, 84, 1) 35%, rgba(0, 255, 46, 1) 66%, rgba(0, 198, 33, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80ba0000', endColorstr='#00c621', GradientType=0);
    width: 7px;
}

main #levels .level.level1:after {
    height: 25px;
    animation: pumbSound1 663ms linear infinite alternate;
}

main #levels .level.level2:after {
    height: 36px;
    animation: pumbSound2 511ms linear infinite alternate;
}

main #levels .level.level3:after {
    height: 33px;
    animation: pumbSound3 696ms linear infinite alternate;
}

main #levels .level.level4:after {
    height: 14px;
    animation: pumbSound4 396ms linear infinite alternate;
}

main #levels .level.level5:after {
    height: 49px;
    animation: pumbSound5 783ms linear infinite alternate;
}

main #levels .level.level6:after {
    height: 12px;
    animation: pumbSound6 758ms linear infinite alternate;
}

main #levels .level.level7:after {
    height: 1px;
    animation: pumbSound7 328ms linear infinite alternate;
}