body{font-family: Arial, Helvetica, sans-serif;  }
a{text-decoration: none; cursor:pointer}
.dib{display:inline-block}
.tac{text-align: center; }
.tar{text-align: right;}
.fl{float: left}
.fr{float: right}
._vtb{vertical-align: text-bottom}
.cb{clear:both}
.lingra{
background: #333;
background-image: linear-gradient(to bottom, rgba(220, 180, 0, 1), rgba(255, 218, 64, 1)); 
}
.mb15{margin-bottom: 15px;} .mt10{margin-top:10px;} .pdr25{padding-right: 25px;}
.main_ct{margin-bottom:75px; overflow-x:hidden;}
.page_gr_bg{background-color:#FFFFFF}


body{margin: 0; background: rgb(13,121,166)}

#frame{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
#frame-inner{
    width: 100%;
    max-width: 450px;
    max-height: 900px;
    min-height: 700px;
}



/********* TOP: Player **********/
#player{background: rgb(13,121,166) url("../img/nowy/tlo.jpg") no-repeat center top; background-size: cover;}
#player:after{position: fixed; top:0; left: 0; bottom: 0; right: 0; background: rgba(13,121,166, 0.8); content: "";  }
#player > *{z-index: 10; position: relative;}

    #play{text-align: center;}
        #main_play_bt{display:inline-block; z-index: 1000; 
                      background: url("../img/ico/play.png") no-repeat center center ;
                      background-size: 68px;
                      padding:0;  width:68px; height: 68px;  
                      margin-top:36px; margin-bottom: 18px;
                      border: 0; 
        
        }
 

        
        #main_play_bt.on{background: url("../img/ico/stop.png") no-repeat center center ; background-size: 68px; }	
        #main_play_bt.starting{background: url("../img/nowy/preloader_dots.svg"), url("../img/ico/stop.png") ; background-repeat: no-repeat; background-position: bottom 9px center, center center; background-size: 20px,  68px; }

    
    #volume {width: 100%; padding: 0 20px; box-sizing: border-box;}
        #volume i { position: absolute; margin-top: -6px; color: #666; }
        i.fa-volume-down { position: absolute; left:20px;}
        i.fa-volume-down:before { color:#fff; }
        i.fa-volume-up { position: absolute; right:20px; }
        i.fa-volume-up:before { color:#fff;}

        #volume-bar {position: absolute;left: 50px;margin: 0 auto;height: 4px;width: calc(100% - 100px);background: #fff;border-radius: 0;}
        .ui-slider-range-min {height: 4px; position: absolute;background: rgb(239,64,87);border: none;border-radius: 0;outline: none;}
        .ui-slider-handle {width: 15px;height: 15px;border-radius: 15px;background: rgb(239,64,87);position: absolute;margin-left: -5px;margin-top: -5px;cursor: pointer;outline: none;}


    
 #muzyka {min-height: 180px; margin-top: 40px; color: #fff; padding-left: 80px; padding-right: 20px; position: relative;}

    #muzyka img{display:none}
    #muzyka ul{padding:0; margin: 0;}
    #muzyka li{list-style: none; margin-bottom: 10px; line-height: 1.3em;}

#muzyka .ramli{color: #fff; margin-bottom: 16px;}

#muzyka li *{color: rgba(255,255,255,0.8)}
#muzyka li.now * {color: #fff;}

#muzyka li.now{color: #fff; position: relative;}
#muzyka li.now:before{content: "LIVE"; padding: 2px 5px; line-height: 1em; background: rgb(239,64,87); color: #fff; font-weight: bold; font-size: 12px; position: absolute; left: -40px; top:0;}
#muzyka li.now:after{  background: url(../img/ico/speaker.svg) no-repeat right center; background-size: 30px; width:36px; height: 30px;  position: absolute; left: -40px; top:18px; content:""}


#muzyka p{margin: 0}
        #muzyka .oa_img{display: none}
        #muzyka .oa_tinfo{font-size: 11px; font-weight: 100; text-transform: uppercase;}
        #muzyka .oa_tinfo2{margin-bottom: 6px; font-size: 14px; font-weight: bold}
        #muzyka .aud{font-size: 14px; color: #fff;}
        #muzyka .oa_perf{font-size: 14px; padding-bottom: 4px; font-weight: bold; display: inline;}
        #muzyka .oa_track{font-size: 14px; font-weight: normal;  display: inline;}
        
        
    
/********* MID: Radio_switch **********/

#rs_text{text-align: center; color:#fff; font-size: 14px; padding: 10px;}
#radio_switch{ display:flex; width: 100%; justify-content: space-between; height: 48px; margin-bottom: 1px; }
    #radio_switch a{display:  block; flex-grow: 1; flex-shrink: 1; border-right: 1px solid #fff; }
    #radio_switch a:last-of-type{border-right: none}
    
    a#ro_play{ background: rgb(13,121,166) url(../img/nowy/ro.png) no-repeat center center; background-size: 80px;}
    a#ro_play.active, a#ro_play:hover{ background: rgb(255,255,255) url(../img/nowy/ro_b.jpg) no-repeat center center; background-size: 90px;}
    

    a#re_play{background: rgb(13,121,166) url(../img/nowy/re.png) no-repeat center center; background-size: 70px;}
    a#re_play.active, a#re_play:hover{background: rgb(255,255,255) url(../img/nowy/re_b.jpg) no-repeat center center; background-size: 85px;}
  
    
    /*
    a#re_play{background: rgb(13,121,166) url(../img/nowy/transmisja_belchatow4.jpg) no-repeat center center; background-size: cover;}
    a#re_play.active, a#re_play:hover{background: rgb(255,255,255) url(../img/nowy/transmisja_belchatow5.jpg) no-repeat center center; background-size: cover;}
   */
    
    a#rwm_play{ background: rgb(13,121,166) url(../img/nowy/rwm.png?v=1) no-repeat center center; background-size: 100px;}
    a#rwm_play.active, a#rwm_play:hover{ background: rgb(255,255,255) url(../img/nowy/rwm_b.jpg?v=1) no-repeat center center; background-size: 108px;}
    
    a#rr_play{ background: rgb(13,121,166) url(../img/nowy/rr.png) no-repeat center center; background-size: 64px;}
    a#rr_play.active, a#rr_play:hover{ background: rgb(255,255,255) url(../img/nowy/rr_b.jpg) no-repeat center center; background-size: 77px;}


    
    

/********* BOTTOM: Articles **********/
#articles{}

    .posluchaj-news-cont{}
        .posluchaj-news-box{width: 100%;}
            .posluchaj-news-box img{width: 100%; height: auto;}
            .posluchaj-news-box p{padding: 10px; margin: 0; color: #fff; line-height: 1.3em; font-size: 15px;}
    

.slick-prev{left:20px; width: 40px; height: 40px; z-index: 100; top:calc(50% - 40px)}
.slick-prev:before{color:#000;}
.slick-next{ right:20px;  width: 40px; height: 40px; z-index: 100;  top:calc(50% - 40px)}
.slick-next:before{color:#000;}


@media (max-device-width:600px){
    #frame{align-items: flex-start}
    #volume{display: none;}
    #muzyka {margin-top: 10px;} 
}