@font-face {
font-family: Jura_DemiBold;
	src: url('../fonts/Jura_DemiBold.otf');
} 

h1 {
font-family: Jura_DemiBold, Sans Serif;
color: #1FEF01;
}

h2 {
font-family: Jura_DemiBold, Sans Serif;
color: #1FEF01;
}

h3 {
font-family: Jura_DemiBold, Sans Serif;
color: #1FEF01;
}

p {
font-family: Jura_DemiBold, Sans Serif;
color: #1FEF01;
}

ul {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

*{
margin: 0;
padding: 0;
}

html{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

body {
background-image: url('../img/Bottom_texture.gif') ;
background-position: 0% top left; 
background-repeat: repeat;
height: 100%;
font-family: Jura_DemiBold, Sans Serif;
margin: 0;
padding: 0;
}



footer {
position: fixed;
left: 0;
bottom: 0;
height: 20px;
width: 100%;
background-image: url('../img/body_texture.png');
border-top:1px solid rgba(110, 110, 110, 0.8);
-moz-box-shadow: 0 0 5px #999; 
-webkit-box-shadow: 0 0 5px #999; 
box-shadow: 0 0 5px #999;
text-align: left;
padding-left: 2%;
margin-bottom: 0;
}

.background{
background-image: url('../img/body_texture.png');
background-repeat: repeat;
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;

}

.top {
position: relative;
width:100%;
left:0;
top: 0;
}

.logoBack {
	position: relative;
  float: left;
  padding: 10px 20px 10px;
  left: 0;
  top:10px;
  max-width: 100%;

}

.logo{
max-width: 80%;
}

.headholder{
position: relative;
margin-top: 5%;
padding: 0;
font-size: 2.5em !important; 
background-image: url('../img/body_texture.png');
border:1px solid rgba(110, 110, 110, 0.8);
-moz-box-shadow: 0 0 5px #999; 
-webkit-box-shadow: 0 0 5px #999; 
box-shadow: 0 0 5px #999;
margin-bottom: 5%;
}


 
.imagel {
max-width: 100%;
float:left;
position:relative;
}
 
.names {
text-align: center;
} 
  

  
 /* The side navigation menu */
.openNav {
font-size: 3em;
}

.btnBg2 {
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
position: absolute;
right: -15px;
top: 25px;
color: #1FEF01;
line-height: 0.95;
padding-top: 7px;
padding-left: 7px;
padding-right: 7px;
cursor: pointer;
transition: 0.5s;
}

.btnBg2:hover {
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
color:#444;
}

#navBtns {
top: 25%;
position: absolute;
width: 100%;
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #000;
opacity: 1;
border-left:1px solid rgba(110, 110, 110, 0.8);
-moz-box-shadow: 0 0 5px #999; 
-webkit-box-shadow: 0 0 5px #999; 
box-shadow: 0 0 5px #999;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
	background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
width: 100%;
margin-bottom: 2%;
    padding: 8px 0 8px 0;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    color: #1FEF01;
    display: block;
    transition: 0.5s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
color:#444;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
position: absolute;
right: 25px;
top: 25px;
font-size: 3em;
color: #1FEF01;
line-height: 0.95;
padding-top: 7px;
padding-bottom: 20;
padding-left: 7px;
padding-right: 7px;
cursor: pointer;
transition: 0.5s;
}

.sidenav .closebtn:hover, .closebtn:focus{
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
color:#444;

}




/* The side navigation menu - end */

/*tunes - buttons*/

.controlsOuter {
position: absolute;
width:100%;
left:5%;
bottom: 35px;
}


.btnBg {
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(125, 125, 125, 0.8) 40%, rgba(128, 128, 128, 0.8) 50%, rgba(125, 125, 125, 0.8) 60%, rgba(89, 89, 89, 0.8) 100%) no-repeat;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
-moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
width: 100%;
height: 70px;
position: relative;
float: left;
padding-top: 15px;
padding-left: 0 !important;
color: #1FEF01;
text-align: center !important;
line-height: 1;
cursor: pointer;
transition: 0.5s;
}

.btnBg:hover {
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
color:#444;
}

.glyphicon-play,
.glyphicon-pause {
margin-left: 2px !important;	
}
.glyphicon-volume-down {
margin-left: 5px !important;
}

.playlistBtn {
font-size: 3em;
margin-left: 1.4%;
}

.volumeBtn {
font-size: 3em;
margin-left: 1%;
}

.playBtn {
font-size: 3em;
margin-left: 1%;
}

.pauseBtn {
font-size: 3em;
margin-left: 1%;
}

.prevBtn {
font-size: 3em;
margin-left: 1%;
}

.nextBtn {
font-size: 3em;
margin-left: 1%;
}

#playBtn {  
  width: 100%;
  height: 70px;
}
#pauseBtn {  
  width: 100%;
  height: 70px;
  display: none;
}
#prevBtn {  
  width: 100%;
  height: 70px;
}
#nextBtn { 
  width: 100%;
  height: 70px;
}
#playlistBtn {  
  width: 100%;
  height: 70px;
}
#volumeBtn {  
  width: 100%;
  height: 70px; 

}

/*tunes - buttons - end*/

/* Playlist */
#playlist {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
#list {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('../img/body_texture.png');
  top: 0;
  left: 0;
  padding-top: 5%;
  margin: auto;
}
.list-song {
  width: 100%;
  font-family: Jura_DemiBold, Sans Serif;
  font-size: 2.2em !important;
  line-height: 1.5;
  text-align: center;
   color: #1FEF01;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  transition: 0.5s;
    cursor: pointer;
}
.list-song:hover {
  background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -webkit-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -moz-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -o-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: -ms-linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
-svg-background: linear-gradient(top, rgba(176, 176, 176, 0.8) 0, rgba(207, 207, 207, 0.8) 40%, rgba(209, 209, 209, 0.8) 50%, rgba(207, 207, 207, 0.8) 60%, rgba(176, 176, 176, 0.8) 100%) no-repeat;
color:#444;
}


/* Playlist - end*/

/* Top Info */
#title {
  position: relative;
  top: 3%;
  text-align: center;
  opacity: 1;
  color:#1FEF01;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#timer {
  position: absolute;
  top: 0;
  left: 3%;
  text-align: left;
  opacity: 1;
  color:#1FEF01;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#duration {
  position: absolute;
  top: 0;
  right: 3%;
  text-align: right;
  opacity: 0.5;
  color:#1FEF01;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}



/* Progress */
#waveform {
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -15% auto;
  display: none;
  cursor: pointer;
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}
#waveform:hover {
  opacity: 1;
}
#bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(31,239,1, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  opacity: 0.9;
}
#progress {
  position: absolute;
  top: 37.5%;
  left: 0;
  width: 0%;
  height: 25%;
background: -moz-linear-gradient(270deg, #d0d0d0 0%, #787878 50%, #c2c1c3 100%);/* FF3.6+ */
background: -webkit-gradient(linear, 270deg, color-stop(0%, #d0d0d0), color-stop(50%, #787878), color-stop(100%, #c2c1c3));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(270deg, #d0d0d0 0%, #787878 50%, #c2c1c3 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(270deg, #d0d0d0 0%, #787878 50%, #c2c1c3 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(270deg, #d0d0d0 0%, #787878 50%, #c2c1c3 100%);/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d0d0', endColorstr='#c2c1c3', GradientType='1'); /* for IE */
background: linear-gradient(180deg, #d0d0d0 0%, #787878 50%, #c2c1c3 100%);/* W3C */border:1px solid rgba(110, 110, 110, 0.8);
opacity: 0.3;  
  z-index: -1;
}

/* Loading */
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  display: none;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}



/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
}
.bar {
  position: absolute;
  top: 50%;
  left: 5%;
  margin: -5px auto;
  height: 10px;
  background-color: rgba(31,239,1, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#barEmpty {
  width: 90%;
  opacity: 0.5;
  box-shadow: none;
  cursor: pointer;
}
#barFull {
  width: 90%;
}
#sliderBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 93.25%;
  margin: -25px auto;
  background-color: rgba(31,239,1, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  border-radius: 25px;
  cursor: pointer;
}

/* Fade-In */
.fadeout {
  webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}
.fadein {
  webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

 @media (max-width: 1280px) {
.logoBack {
margin-left: 0;
}

.sidenav .closebtn {
right: 15px;
}

.background{
overflow-y: auto;
overflow-x: hidden;
}

}
 @media (max-width: 1024px) {

  }

@media (max-width: 980px) {
		
  .logoBack {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }
            
  }
  
 @media (max-width: 800px) { 
  .headholder{
font-size: 2em !important;
}
  
  .list-song {
font-size: 2em !important;
}
    
  }
  
   @media (max-width: 768px) {

  

      
  }  
  
  @media (max-width: 640px) {  	 
  .headholder{
font-size: 1.5em !important;
}

.list-song {
font-size: 1.5em !important;
}

.btnBg { 
height: 50px;
padding-top: 10px;
}

.playlistBtn {
font-size: 2em !important;
}

.volumeBtn {
font-size: 2em !important;
}

.playBtn {
font-size: 2em !important;
}

.pauseBtn {
font-size: 2em !important;
}

.prevBtn {
font-size: 2em !important;
}

.nextBtn {
font-size: 2em !important;
} 
 
 .openNav {
font-size: 2.7em !important;
}

 .sidenav .closebtn {
    font-size: 2.7em;
    
}

.names h1{
font-size: 1em !important;
} 
  
  }
  
@media (max-width: 480px) { 
.openNav {
font-size: 1.6em !important;
}

 .btnBg2 { 
top: 23px;
padding-bottom: 2px;
}

.sidenav .closebtn {
	top: 23px;
    font-size: 1.6em;
    padding-bottom: 2px;
}
  
  .headholder{
font-size: 1.2em !important;
}

.list-song {
font-size: 1em !important;
} 

}
 
 @media (max-width: 360px) { 

  .btnBg2 { 
top: 12px;

}

.sidenav .closebtn {
    top: 12px;

} 
  

}

 @media (max-width: 320px) { 
.btnBg2 { 
top: 9px;
}  

 .sidenav .closebtn {
    top: 9px;

} 


}

@media screen and (max-width: 480px) {
  #list { 
 padding-top: 10%;
  } 
  
  .list-song {
  line-height: 2;
  margin-bottom: 3%;
}
  } 

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}