html, body {
 height: 100%;
 margin:0;
 padding:0;
 font-family: "Open Sans"; 
 font-size: 14px; 
 font-style: normal; 
 font-variant: normal; 
 font-weight: 400; 
 line-height: 20px; 
 color: #fff;
 overflow-x: hidden; /* Hide horizontal scrollbar */
/* 
 -webkit-text-size-adjust: none;
 touch-action: manipulation;
*/
}
/* popup */
.ontop {
 z-index: 999;
 width: 100%;
 height: 100%;
 display: none;
 position: absolute;
/* filter: blur(6px);*/
 background: rgb(0, 0, 0); /* The Fallback */
 background: rgba(0, 0, 0, 0.8);
 /* To align popup window at the center of screen*/
 top: 0%;
 left: 0%;
}
#popup {
 width: 100%;
 height: auto;
 position: absolute;
 /* To align popup window at the center of screen*/
 top: 45%;
 left: 50%;
 margin-top: -15%;
 margin-left: -50%;
}
.closeshare {
 color: #D0D0D0;
 cursor: pointer;
 z-index: 3;
}
.closeshare:hover {
 color: red;
}
#loader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('../img/record.gif') 50% 50% no-repeat rgb(0,0,0);
 opacity: .9;
}
#content {
 position: relative;
 min-height: 100%;
 z-index: 2;
}
.overlay {
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 z-index: -1;
 background-color: rgba(0,0,0,100);
 opacity: 10;
}
#bgbody {
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0px;
 top: 0px;
 background-size: cover;
 background-position: top center !important;
 background-repeat: no-repeat !important;
 background-attachment: fixed;
 /* backdrop-filter: blur(8px);*/
 -moz-background-size: cover;
 -webkit-background-size: cover;
 -webkit-filter: blur(10px);
 filter: blur(10px);
 z-index: -2;
}
#header {
 width: 100%;
 background-color: transparent;
 padding-top: 10px;
 text-align: center;
 z-index: 2;
}
#mainbody {
 display: flex;
 justify-content: center;
 width: auto;
 min-height: auto;
 margin: auto;
 padding: 10px;
 text-align: center;
 z-index: 2;
}
#live {
 position: fixed;
 color: #696969;
 top: 10px;
 left: 10px;
 z-index: 2;
 cursor: pointer;
 /*text-shadow: 0px 0px 1px #696969;*/
}
#sharing {
 position: fixed;
 color: #FF8C00;
 top: 10px;
 right: 10px;
 z-index: 2;
 cursor: pointer;
 /*text-shadow: 0px 0px 1px #696969;*/
}
.cover {
 display: block;
 background: rgba(0, 0, 0, 0.8) url('../img/loading.gif') center no-repeat;
 width: 290px;
 height: 280px;
 border-radius: 15px;
 z-index: 2;
}
.cover:after {
 content: "";
 display: block;
 padding-bottom: 100%;
}
#soundbar {
 display: table;
 width: 400px;
 height: auto;
 margin: 0 auto;
 text-align: center;
 justify-content: center;
 /*background-color: rgb(0,0,0);
 opacity: .8;*/
 z-index: 2;
}
.controls {
 cursor: pointer;
 color: #FF8C00;
}
.controls:hover { 
 cursor: pointer;
}
#info {
 font-size: 16px; 
 color: white;
 /*text-shadow: 1px 0 0 #696969;*/
 z-index: 2;
}
.nextsong {
display:flex; align-items: center; justify-content: center; font-size:11px;color:#fff; z-index: 2;

}
#footer {
 width: 100%;
 height: 45px;
 position: absolute;
 padding-top: 5px;
 bottom: 0px;
 text-align: center;
 background-color: rgb(0,0,0);
 opacity: .5;
 color: gray;
 text-shadow: 1px 0 0 #000;
 z-index: 2;
}

.facebook:hover { 
 cursor: pointer;
 transform: scale(1.15);
 -webkit-transform: scale(1.15);
 -webkit-filter: blur(.5px); 
}
.twitter:hover { 
 cursor: pointer;
 transform: scale(1.15);
 -webkit-transform: scale(1.15);
 -webkit-filter: blur(.5px); 
}
.whatsapp:hover { 
 cursor: pointer;
 transform: scale(1.15);
 -webkit-transform: scale(1.15);
 -webkit-filter: blur(.5px); 
}
.left  { float: left;  margin-left: 13%; }
.right { float: right;  margin-right: 13%; }


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
}

/* 
 ##Device = Laptops, Desktops
 ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px s10
*/
@media (min-width: 320px) and (max-width: 480px) {
}