body { background-color:transparent;}

.sssaudioplayer{ position:relative;}
.sssvideoplayer{ position:relative;}

        #mp3_audio_player{
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            /*background-color: rgba(0,0,0,0.5);*/
            background-color: transparent;
            z-index: 5;
        }
        #mp3_audio_player .center_btn{
            position: absolute;
            top:45%;
            left:45%;
            z-index:10;
            opacity:0.5;
            
        }
        #mp3_audio_player:hover .center_btn{
            opacity:0.7;
        }
        #mp3_audio_player .top_btns{
            position: absolute;
            top:15px;
            left:40%;
            z-index:10;
            opacity:0.5;
            
        }
        #mp3_audio_player:hover .top_btns{
            opacity:0.7;
        }
        #mp3_audio_player .left_btn, #mp3_audio_player .right_btn{
            position: absolute;
            top:0%;
            width: 55px;
            z-index:10;
            opacity:0;
            height:100%;
            padding:10px;            
        }
        #mp3_audio_player:hover .left_btn, #mp3_audio_player:hover .right_btn{
            opacity:0.7;
        }
        #mp3_audio_player:hover .left_btn { left:0%; }
        #mp3_audio_player:hover .right_btn { right:0%; }
        
        #mp3_audio_box{
            position: absolute;
            height: 56px;
            border-top: 2px solid gray;
            width: 100%;
            right: 0;
            bottom: 5px;
            background-color: rgba(0,0,0,0.2);
        }
        #mp3_audio_box audio{
            opacity:0.5;
            position:absolute;
            width:100%;
            z-index:6;
        }
        #mp3_audio_box .controls{
            position: relative;
            z-index:5;
        }
        
        @media screen and (max-width:600px){
    #mp3_audio_player .center_btn{ opacity:1;}
    #mp3_audio_player .top_btns{ opacity:1; left:30%; }
    #mp3_audio_player .left_btn{ opacity:1; width: 35px;}
    #mp3_audio_player .right_btn{ opacity:1; width: 35px;}
    #mp3_audio_player .right_btns{ opacity:1; }
    #mp3_audio_box audio{ opacity:0.7;}
    #mp3_panel{ top: -30px; 
    
    }
}
        
        
        #mp3_audio_box:hover audio{opacity:0.8;}
        #mp3_panel{
            position: absolute;
            bottom: 5px;
            background-position: center top;
            background-attachment: local;
            background-repeat: no-repeat;
            background-size: cover;
            left: 5px;
            top: 65px;
            right: 5px;
            
        }
        #mp3_audio_analyser{
            width: 100%;                
            position: absolute;
            bottom: 55px;
            top: 10px;
            overflow: hidden;
        }
        #mp3_marquee{
                position: absolute;
    color: #fff;
    display: block;
    width: 100%;
            
        }
        .bar{
            position: absolute; left:2px; top:10%; width:4px; bottom:0px;  z-index:9; border:1px solid gray; opacity:0.7; background-color:#ffffff; /*background: linear-gradient(to top, #ffff00 0%, #ff0000 100%); */ overflow:hidden;
            
        }
        .bar_in{
            background-image:
                linear-gradient(
                  to top, 
                   
                  
                  green,
                  rgb(255, 255, 0), 
                  #f06d06, 
                  red
                  
                );
        }
        
        .bgicon{    position: relative;
            height: 230px; animation-name: zooming;
            animation-duration: 4s;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            
            background-position: center top;
            background-attachment: local;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        @keyframes zooming {
          
          
          0%   {transform: scale(1);}
          25%  {transform: scale(1.2);}
          100%  {transform: scale(2.2);}
          
        }
        
        @keyframes bluring {
          
          from {filter: blur(0px);}
          to {filter: blur(8px);}
          
          
        }
        
        
        
        
#video_player{
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            background-color: rgba(0,0,0,0.5);
        }
        #video_player .center_btn{
            position: absolute;
            top:45%;
            left:45%;
            z-index:20;
            opacity:0;
            
        }
        #video_player:hover .center_btn{
            opacity:0.7;
        }
        #video_box{
            position: absolute;
            height: 100%;
            border-top: 2px solid gray;
            width: 100%;
            top:0; left:0;
            right: 0;
            bottom: 0px;
            background-color: rgba(0,0,0,0.2);
        }
        #video_box video{
            
            position:absolute;
            width:100%;
            z-index:6;
            top:0; left:0;
        }
        #video_box .controls{
            position: relative;
            z-index:5;
        }
        #video_box:hover video{top:5px; left:5px;}
        
        #video_analyser{
            width: 100%;                
            position: absolute;
            bottom: 55px;
            top: 10px;
            overflow: hidden;
        }