/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12 Sep, 2019, 2:00:10 AM
    Author     : w3webworldsolutions.com
*/

/*********Final*************/
.static-img {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 625px;
    margin: 0 auto;
}
.static-img .videoHolder {
    position: relative;
    /*padding-top: 25px;*/
    padding-bottom: 50%;
    height: 0;
}
.videoHolder .radio-bg {
    box-sizing: border-box;
    background: url('../img/radio-bg.png') center center no-repeat;/*http://i.stack.imgur.com/zZNgk.png*/
    background-size: contain;
    padding: 34.5% 26.5% 10.5%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*z-index: -100;*/
        /*display: inline-flex;*/
}
#pButton {
    font-size: 17px;
    color: #66380d;
    /* border: 3px solid #ffffff; */
    background: #ead9ac;
    padding: 4px 8px;
    border-radius: 5px;
    text-shadow: 0px 1px 0px #000;
    box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.7);
}
/*********Final end*************/
#playlist{
    width: 100%;
    padding: 10px 5px;
    text-align: left;
    background: #c0a16b;
    z-index: 1;
    list-style: none;
    height: 202px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    display: none;
    
}
#playlist li{
    border-bottom: 1px solid #fff;
    padding: 3px 0;
}
#playlist li a{
    color:#fff;
    text-decoration: none
}
#playlist li a:hover{
    color:#803d04;
}
#playlist .current-song a{
    color:#803d04;
}

/*--------Responsive video------*/
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1280px) {
  .img-logo{
        max-height: 7vh;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1024px) and (max-width: 1279px) {
  
   .dib-logo{
        padding-bottom: 2vh;
        padding-top:6vh;
    }
    .img-logo{
        max-height: 5vh;
    }
    .videoHolder .radio-bg {
    padding: 40.5% 26.5% 15.5%;
    }
  .footer{
        position: fixed;
        bottom: 10px;
        width: 100%;
        z-index: 99999;
    }
    .static-img .videoHolder {
    padding-bottom: 60%;
}
 #playlist {
        height: 350px;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1023px) {
    .videoHolder .radio-bg {
        padding: 45% 15.4% 22.6%;
    }
    .dib-logo{
        padding-bottom: 2vh;
        padding-top:6vh;
    }
    .img-logo{
        max-height: 6vh;
    }
    #playlist {
        height: 250px;
    }
    .footer{
        position: fixed;
        bottom: 10px;
        width: 100%;
        z-index: 99999;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .videoHolder .radio-bg {
    padding: 45% 15.4% 22.6%;
}
.img-logo{
        max-height: 7vh;
    }
  .footer{
        position: relative;
        transform: translateY(100%);
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  
  .footer{
        position: relative;
        transform: translateY(100%);
    }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
    .videoHolder .radio-bg {
        /*padding: 45% 15.4% 33.6%;*/
        padding: 45% 32.4% 38.6%;
    }
    audio {
        width: 113px !important;
        height: 30px;
    }
    .img-logo{
        max-height: 7vh;
    }
    #playlist {
    height: 200px;
    position: absolute;
    left: 0;
}
    #playlist li a {
        font-size: smaller;
    }
    #pButton {
    font-size: 10px;
    }
    .footer{
        position: relative;
        transform: translateY(100%);
    }
}

/*---------------style per veiw-port --------------*/



/* default screen, non-retina */


@media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
    
}
@media
only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* Small screen, retina */
    
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, non-retina */
    audio {
    width: 120px !important;
    height: 30px;
}
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
    /* Medium screen, retina */
    audio {
    width: 120px !important;
    height: 30px;
}
}
@media
only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* Large screen, retina */
    
}

/**********************- Audio setting -*****************/


    audio {
    width: 280px;
    height: 30px;
    filter: sepia(20%) saturate(180%) grayscale(0) contrast(100%) invert(0%);
}
audio::-webkit-media-controls{
    width: inherit;
    height: inherit;
    position: relative;
    direction: ltr;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
audio::-webkit-media-controls-timeline-container{
    -webkit-appearance: media-controls-background;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1;
    -webkit-user-select: none;
    height: 16px;
    min-width: 0;
}
input[type="range" i]::-webkit-media-slider-container {
    display: flex;
    align-items: center;
    flex-direction: row; /* This property is updated by C++ code. */
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(230, 230, 230, 0.35);
    border-radius: 4px;
    background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
}