.sound-test, .contorls {
    position: relative;
    margin: 0 auto 34px;
    width: 850px;
    min-height: 170px;
    font-family: "Open Sans",Arial,sans-serif;
}
.sound-test .sound.sound-left {
    left: 0;
}
.sound-test .sound {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 160px;
    height: 164px;
    cursor: pointer;
    background-position: 0 0;
    background: url(../images/sound-test-icons.png) no-repeat;
}
.sound-test .sound .sound-icon {
    display: block;
    position: absolute;
    top: 64px;
    left: 58px;
    z-index: 2;
    width: 38px;
    height: 38px;
    background-position: -160px 0;
}
.sound-test .sound-icon{
    background: url(../images/sound-test-icons.png) no-repeat;
}
.sound-test .volume-box {
    position: absolute;
    top: 10px;
    left: 176px;
    z-index: 0;
    width: 494px;
    height: 143px;
    background: url(../images/volume-bg.png) no-repeat;
}
.sound-test .volume-icon.volume-left {
    left: 0;
}
.sound-test .volume-icon {
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 247px;
    height: 143px;
    overflow: hidden;
}
.sound-test .volume-icon.volume-left em.one {
    left: 0;
    width: 21px;
    background-position: 0 0;
}
.sound-test .volume-icon.volume-left em.two {
    left: 21px;
    width: 26px;
    background-position: -21px 0;
    transition-delay: .1s;
}
.sound-test .volume-icon.volume-left em, .sound-test .volume-icon.volume-right em {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    height: 143px;
    opacity: 0;
    visibility: hidden;
    background: url(../images/volume-icon.png) no-repeat;
    transition: opacity .05s .05s ease-in-out;
}
.sound-test .volume-icon.volume-left em.three {
    left: 47px;
    width: 26px;
    background-position: -47px 0;
    transition-delay: .15s;
}
.sound-test .volume-icon.volume-left em.four {
left: 73px;
width: 31px;
background-position: -73px 0;
transition-delay: .2s;
}
.sound-test .volume-icon.volume-left em.five {
left: 104px;
width: 30px;
background-position: -104px 0;
transition-delay: .25s;
}
.sound-test .volume-icon.volume-left em.six {
left: 134px;
width: 31px;
background-position: -134px 0;
transition-delay: .3s;
}
.sound-test .volume-icon.volume-left em.seven {
left: 165px;
width: 33px;
background-position: -165px 0;
transition-delay: .35s;
}
.sound-test .volume-icon.volume-left em.eight {
left: 198px;
width: 33px;
background-position: -198px 0;
transition-delay: .4s;
}
.sound-test .volume-icon.volume-left em.nine {
right: 0;
width: 18px;
background-position: -231px 0;
transition-delay: .45s;
}
.sound-test .volume-icon.volume-right {
right: 0;
}
.sound-test .volume-icon.volume-right em.one {
right: 0;
width: 21px;
background-position: -473px 0;
}
.sound-test .volume-icon.volume-right em.two {
right: 21px;
width: 26px;
background-position: -447px 0;
transition-delay: .1s;
}
.sound-test .volume-icon.volume-right em.three {
right: 47px;
width: 27px;
background-position: -420px 0;
transition-delay: .15s;
}
.sound-test .volume-icon.volume-right em.four {
right: 74px;
width: 31px;
background-position: -389px 0;
transition-delay: .2s;
}
.sound-test .volume-icon.volume-right em.five {
right: 105px;
width: 30px;
background-position: -359px 0;
transition-delay: .25s;
}
.sound-test .volume-icon.volume-right em.six {
right: 135px;
width: 30px;
background-position: -329px 0;
transition-delay: .3s;
}
.sound-test .volume-icon.volume-right em.seven {
right: 165px;
width: 33px;
background-position: -296px 0;
transition-delay: .35s;
}
.sound-test .volume-icon.volume-right em.eight {
left: 17px;
width: 32px;
background-position: -264px 0;
transition-delay: .4s;
}
.sound-test .volume-icon.volume-right em.nine {
left: 0;
width: 18px;
background-position: -247px 0;
transition-delay: .45s;
}
.sound-test .sound.sound-right {
right: 0;
}
.sound-test .sound.sound-right .sound-icon {
left: 66px;
background-position: -160px -38px;
}
.sound-test .volume-icon.volume-left.on em, .sound-test .volume-icon.volume-right.on em {
opacity: 1;
visibility: visible;
}
.sound-test .volume-icon.volume-left em.one {
left: 0;
width: 21px;
background-position: 0 0;
}
.volume-icon.volume-left em.three {
left: 47px;
width: 26px;
background-position: -47px 0;
transition-delay: .15s;
}
audio{display:none;}
.contorls {display: flex; justify-content:center;min-height:auto;}
.contorls button{padding: 12px 70px; border:1px solid #ccc; cursor: pointer;background:green; color:#fff;font-size:15px;font-weight: bold;font-family: verdana;}
.contorls button.sleft, .contorls button.sright{display:none;background:red;}
@media(max-width:991px){
    .sound-test{
        zoom:0.8;
    }
    .contorls{
        width:90%;
        margin:auto;
    }
    .contorls button{
        padding-left:0px;
        padding-right:0px;
        flex:1;
    }
}
@media(max-width:800px){
    .sound-test{
        zoom:0.6;
    }
}
@media(max-width:550px){
    .sound-test{
        zoom:0.4;
    }
}