.example {
    margin: 50px auto 0;
    width: 400px;
}
.player {
    background: transparent url("../audiocss/images/lisnt_top.png") no-repeat scroll center top;
    height: 80px;
    position: relative;
    width: 100%;
    z-index: 2;
    margin: auto;
    background-size: 100% 100%;
}
.title, .artist {
    font-family: verdana;
    left: 167px;
    position: absolute;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.title {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    top: 23px;
}
.artist {
    color: #EEEEEE;
    font-size: 12px;
    top: 40px;
}
.pl {
    background: transparent url("../audiocss/images/spr.png") no-repeat scroll -274px -175px;
    cursor: pointer;
    height: 34px;
    left: 270px;
    position: absolute;
    top: 20px;
    width: 32px;
}
.pl:hover {
    top: 21px;
}
.cover {
    /*background: transparent url(../audiocss/data/cover1.jpg) no-repeat scroll center top;*/
    background: none;
    border-radius: 5px 5px 5px 5px;
    height: 94px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 94px;
}
.controls {
    cursor: default;
    height: 23px;
    left: 167px;
    position: absolute;
    top: 65px;
    width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
    background: transparent url("../audiocss/images/spr.png") no-repeat scroll 0 0;
    float: left;
    height: 100%;
    width: 33%;
}
.controls .play {
    background-position: -8px -171px;
}
.controls .pause {
    background-position: -8px -198px;
    display: none;
}
.controls .rew {
    background-position: -54px -171px;
}
.controls .fwd {
    background-position: -100px -171px;
}
.controls .play:hover {
    background-position: -8px -170px;
}
.controls .pause:hover {
    background-position: -8px -197px;
}
.controls .rew:hover {
    background-position: -54px -170px;
}
.controls .fwd:hover {
    background-position: -100px -170px;
}
.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 11px;
    left: 186px;
    position: absolute;
    top: 96px;
    width: 112px;
}
.tracker {
    height: 15px;
    left: 20px;
    position: absolute;
    top: 126px;
    width: 285px;
}
.ui-slider-range {
    /*background: transparent url("../audiocss/images/spr.png") no-repeat scroll 5px -222px;*/
    background: none;
    height: 100%;
    position: absolute;
    top: 0;
}
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
    background: url("../audiocss/images/volume_holder.png");
    background-repeat: no-repeat; 
    height: 16px;
    width: 16px;
    top: -2px;
}
.playlist {
    background-color: #333;
    border-radius: 5px 5px 5px 5px;
    list-style-type: none;
    padding-bottom: 10px;
    padding-top: 15px;
    padding-left: 0px;
    position: relative;
    width: 320px;
    z-index: 1;
    margin: -10px auto 0;
    max-height: 170px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
}
.playlist li {
    color: #eee;
    cursor: pointer;
    margin: 0;
    width: 100%;
    padding: 0 0 5px 20px;
}
.playlist li.active {
    font-weight: bold;
    background: #6669;
    margin: 0 !important;
    padding: 0 0 5px 20px;
    width: 100%;
    cursor: default;
}
span#other, .under_shaer h4, .to span, #snd_hare, #cls, .sudr_logd, 
input.check, div#inner-editor, .set_sec input, .text_dex textarea {
    font-family: 'Open Sans', sans-serif !important;
    letter-spacing: 0.7px !important;
}



/********vi***********************/
.controls .play {
    position: relative;
    right: 105px;
    width: 58px;
    height: 45px;
    bottom: 46px;
    background: none;
    cursor: pointer;
	/*border:1px solid #000;*/
}

.pause.visible {
    position: absolute;
    right: -60px;
    bottom: 40px;
    height: 45px;
    width: 45px;
    background: none;
    cursor: pointer;
	/*border:1px solid #000;*/
}
.volume {
    height: 15px !important;
    left: 185px !important;
    top: 55px !important;
    width: 85px !important;
}



@media only screen and (min-width: 320px) and (max-width: 359px){
    .player {
        height: 75px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: 85px;
        bottom: 55px;
        height: 25px;
        width: 50px;
    }
    .controls .play {
        right: 135px;
        width: 45px;
        height: 30px;
        bottom: 57px;
    }
    .volume {
        height: 18px !important;
        left: 96px !important;
        top: 32px !important;
        width: 50px !important;
    }

}

@media only screen and (min-width: 360px) and (max-width: 419px){
    .player {
        height: 80px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: 54px;
        width: 25px;
        height: 25px;
        bottom: 56px;
    }
    .controls .play {
        right: 121px;
        width: 33px;
        height: 31px;
        bottom: 50px;
    }
    .volume {
        height: 15px !important;
        left: 131px !important;
        top: 43px !important;
        width: 63px !important;
    }

}

@media only screen and (min-width: 420px) and (max-width: 480px){
    .player {
        height: 80px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: 0;
        width: 44px;
        height: 40px;
        bottom: 45px;
    }
    .controls .play {
        right: 111px;
        width: 40px;
        height: 40px;
        bottom: 48px;
    }
    .volume {
        height: 15px !important;
        left: 155px !important;
        top: 52px !important;
        width: 70px !important;
    }
    .sectoin_live {
        width: 100% !important;
        margin-left: 0em !important;
    }

}

@media only screen and (min-width: 481px) and (max-width: 520px){
    .player {
        height: 80px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -30px;
        width:  40px;
        height: 40px;
        bottom: 43px;
    }
    .controls .play {
        right: 100px;
        width: 50px;
        height: 50px;
        bottom: 55px;
    }
    .volume {
        height: 15px !important;
        left: 170px !important;
        top: 55px !important;
        width: 77px !important;
    }
    .sectoin_live {
        width: 100% !important;
        margin-left: 3em !important;
    }

}

@media only screen and (min-width: 521px) and (max-width: 560px){
    .player {
        height: 100px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -70px;
        width: 75px;
        height: 45px;
        bottom: 38px;
    }
    .controls .play {
        right: 95px;
        width: 65px;
        height: 65px;
        bottom: 50px;
    }
    .volume {
        height: 15px !important;
        left: 183px !important;
        top: 60px !important;
        width: 88px !important;
    }
    .sectoin_live {
        width: 100% !important;
        margin-left: 5em !important;
    }

}

@media only screen and (min-width: 561px) and (max-width: 620px){
    .player {
        height: 104px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -100px;
        width: 65px;
        height: 50px;
        bottom: 31px;
    }
    .controls .play {
        right: 95px;
        width: 70px;
        height: 70px;
        bottom: 52px;
    }
    .volume {
        height: 15px !important;
        left: 195px !important;
        top: 71px !important;
        width: 100px !important;
    }
    .sectoin_live {
        width: 100% !important;
        margin-left: 7em !important;
    }

}

@media only screen and (min-width: 621px) and (max-width: 680px){
    .player {
        height: 115px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -153px;
        width: 55px;
        height: 55px;
        bottom: 25px;
    }
    .controls .play {
        right: 95px;
        width: 80px;
        height: 80px;
        bottom: 51px;
    }
    .volume {
        height: 15px !important;
        left: 228px !important;
        top: 80px !important;
        width: 112px !important;
        position: absolute;
    }
     .sectoin_live {
        width: 100% !important;
        margin-left: 8em !important;
    }

}

@media only screen and (min-width: 681px) and (max-width: 720px){
    .player {
        height: 126px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -195px;
        width: 55px;
        height: 55px;
        bottom: 21px;
    }
    .controls .play {
        right: 85px;
        width: 90px;
        height: 85px;
        bottom: 48px;
    }
    .volume {
        height: 15px !important;
        left: 250px !important;
        top: 90px !important;
        width: 123px !important;
    }
     .sectoin_live {
        width: 100% !important;
        margin-left: 9em !important;
    }
}

@media only screen and (min-width: 721px) and (max-width: 767px){
    .player {
        height: 135px;
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
    }
    .pause.visible {
        right: -238px;
        width: 70px;
        height: 70px;
        bottom: 13px;
    }
    .controls .play {
        right: 77px;
        width: 87px;
        height: 88px;
        bottom: 44px;
    }
    .volume {
        height: 16px !important;
        left: 265px !important;
        top: 96px !important;
        width: 130px !important;
    }
     .sectoin_live {
        width: 100% !important;
        margin-left: 10em !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 820px){
    .player {
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
        width: 22% !important;
    }
    .top_center_side {
        width: 37% !important; 
    }
    .sectoin_live {
        width: 70% !important;
        margin-left: 25% !important;
    }
    .pause.visible {
        right: 82px;
        width: 40px;
        height: 30px;
        bottom: 55px;
    }
     .controls .play {
        right: 142px;
        width: 50px;
        height: 30px;
        bottom: 55px;
    }
    .volume {
        height: 16px !important;
        left: 100px !important;
        top: 32px !important;
        width: 60px !important;
    }
    #top_images_icon .top_left_image {
        width: 34% !important;
    }
    .wpb_single_image img {
        width: 60%;
        margin-left: 20%;
    }
     .sectoin_live {
        width: 100% !important;
        margin-left: 11em !important;
    }
}

@media only screen and (min-width: 821px) and (max-width: 860px){
    .player {
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
        width: 23% !important;
    }
    .top_center_side {
        width: 37% !important; 
    }
    .pause.visible {
        right: 70px;
        width: 50px;
        height: 35px;
        bottom: 50px;
    }
    .controls .play {
        right: 140px;
        width: 55px;
        height: 40px;
        bottom: 57px;
    }
    .volume {
        height: 16px !important;
        left: 108px !important;
        top: 35px !important;
        width: 58px !important;
    }
    .sectoin_live {
        width: 70% !important;
        margin-left: 25% !important;
    }
    #top_images_icon .top_left_image {
        width: 33% !important;
    }
    .wpb_single_image img {
        width: 60%;
        margin-left: 20%;
    }
     .sectoin_live {
        width: 100% !important;
        margin-left: 15em !important;
    }
}


@media only screen and (min-width: 861px) and (max-width: 920px){
    .player {
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
        width: 23% !important; 
    }
    .top_center_side {
        width: 37% !important; 
    }
    .pause.visible {
        right: 70px;
        width: 45px;
        height: 40px;
        bottom: 50px;
    }
    .controls .play {
        right: 140px;
        width: 60px;
        height: 45px;
        bottom: 62px;
    }
    .volume {
        height: 16px !important;
        left: 112px !important;
        top: 35px !important;
        width: 55px !important;
    }
    .sectoin_live {
        width: 70% !important;
        margin-left: 16em !important;
    }
    #top_images_icon .top_left_image {
        width: 33% !important;
    }
    .wpb_single_image img {
        width: 60%;
        margin-left: 20%;
    }
}

@media only screen and (min-width: 921px) and (max-width: 960px){
    .player {
        background-size: contain;
    }
    #top_images_icon .top_right_image{
        overflow: hidden !important;
        width: 23% !important; 
    }
    .top_center_side {
        width: 37% !important; 
    }
    .pause.visible {
        right: 70px;
        width: 45px;
        height: 40px;
        bottom: 50px;
    }
    .controls .play {
        right: 140px;
        width: 60px;
        height: 45px;
        bottom: 62px;
    }
    .volume {
        height: 16px !important;
        left: 112px !important;
        top: 35px !important;
        width: 55px !important;
    }
    .sectoin_live {
        width: 70% !important;
        margin-left: 16em !important;
    }
    #top_images_icon .top_left_image {
        width: 33% !important;
    }
    .wpb_single_image img {
        width: 60%;
        margin-left: 20%;
    }

}   

@media only screen and (min-width: 961px) and (max-width: 1000px){
    #top_images_icon .top_right_image {
        width: 25% !important;
    }
    #top_images_icon .top_left_image {
        width: 28% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 130px;
        width: 55px;
        height: 35px;
        bottom: 50px;
    }   
    .pause.visible {
        right: 25px;
        bottom: 45px;
        height: 40px;
        width: 40px;
    }
    .volume {
        height: 15px !important;
        left: 118px !important;
        top: 45px !important;
        width: 66px !important;
    }
    .container.header {
        /*height: 190px;*/
        height: auto;
    }
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    }

    
}

@media only screen and (min-width: 1001px) and (max-width: 1040px){
    #top_images_icon .top_right_image {
        width: 23% !important;
    }
    #top_images_icon .top_left_image {
        width: 30% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 130px;
        width: 55px;
        height: 35px;
        bottom: 50px;
    }   
    .pause.visible {
        right: 23px;
        bottom: 45px;
        height: 40px;
        width: 40px;
    }
    .volume {
        height: 15px !important;
        left: 118px !important;
        top: 45px !important;
        width: 55px !important;
    }
    .container.header {
        /*height: 190px;*/
        height: auto;
    }
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    }    
}

@media only screen and (min-width: 1041px) and (max-width: 1080px){
    #top_images_icon .top_right_image {
        width: 26% !important;
    }
    #top_images_icon .top_left_image {
        width: 27% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 130px;
        width: 55px;
        height: 35px;
        bottom: 50px;
    }   
    .pause.visible {
        right: 20px;
        bottom: 45px;
        height: 40px;
        width: 40px;
    }
    .volume {
        height: 15px !important;
        left: 118px !important;
        top: 40px !important;
        width: 50px !important;
    }
    /*.container.header {
        height: 190px;
    }*/
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    }    
}
@media only screen and (min-width: 1081px) and (max-width: 1120px){
    #top_images_icon .top_right_image {
        width: 26% !important;
    }
    #top_images_icon .top_left_image {
        width: 27% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 130px;
        width: 55px;
        height: 35px;
        bottom: 50px;
    }   
    .pause.visible {
        right: 0px;
        bottom: 45px;
        height: 40px;
        width: 40px;
    }
    .volume {
        height: 15px !important;
        left: 118px !important;
        top: 45px !important;
        width: 55px !important;
    }
    /*.container.header {
        height: 190px;
    }*/
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    }    
}
@media only screen and (min-width: 1121px) and (max-width: 1160px){
    #top_images_icon .top_right_image {
        width: 26% !important;
    }
    #top_images_icon .top_left_image {
        width: 27% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 130px;
        width: 55px;
        height: 35px;
        bottom: 50px;
    }   
    .pause.visible {
        right: 0px;
        bottom: 45px;
        height: 40px;
        width: 40px;
    }
    .volume {
        height: 15px !important;
        left: 125px !important;
        top: 45px !important;
        width: 60px !important;
    }
    /*.container.header {
        height: 190px;
    }*/
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    }    
}

@media only screen and (min-width: 1161px) and (max-width: 1200px){
   /* .container.header {
        height: 190px;
    }*/
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    } 
    #top_images_icon .top_left_image {
        width: 27% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 115px;
        width: 58px;
        height: 40px;
        bottom: 46px;
    }  
    .pause.visible {
        right: -15px;
        bottom: 40px;
        height: 40px;
        width: 45px;
    }
    .volume {
        height: 15px !important;
        left: 137px !important;
        top: 45px !important;
        width: 65px !important;
    }
         
}

@media only screen and (min-width: 1201px) and (max-width: 1240px){
    .container.header {
        height: 190px;
    }
    .container.header .row {
        height: 100%;
    }
    .container.header .row .col-sm-12 {
        height: 100%;
    } 
    #top_images_icon .top_left_image {
        width: 27% !important;
    }
    .player {
        height: 65px;
    }
    .controls .play {
        right: 115px;
        width: 58px;
        height: 40px;
        bottom: 46px;
    }  
    .pause.visible {
        right: -25px;
        bottom: 40px;
        height: 40px;
        width: 45px;
    }
    .volume {
        height: 15px !important;
        left: 140px !important;
        top: 45px !important;
        width: 70px !important;
    }
}

@media only screen and (min-width: 1241px) and (max-width: 1280px){
    .volume {
        left: 140px !important;
    }
    .controls .play {
        bottom: 55px;
    }
    .pause.visible {
        right: -34px;
        bottom: 45px;
        height: 36px;
        width: 45px;
    }
    #top_images_icon .top_left_image {
        width: 28% !important;
    }

}

@media only screen and (min-width: 1281px) and (max-width: 1330px){
    .volume {
        left: 140px !important;
    }
    .controls .play {
        bottom: 55px;
    }
    .pause.visible {
        right: -44px;
        bottom: 45px;
        height: 36px;
        width: 45px;
    }
    #top_images_icon .top_left_image {
        width: 28% !important;
    }

}