@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html, body {
    width: 100% !important;
    height: 100%;
    padding-bottom: 10rem;
    background-color: #000;
    overflow-x: hidden !important;
  	font-family: 'Open Sans', sans-serif;
}

h1 {
	color:#FFF !important;
}

.btn-primary {
	color:#FFF !important;
}

#listen-bar button {
	padding:0.5em !important;
	font-size:1.2em !important;
}

#discover {
	padding:2em !important;
}

#discover table td {
	font-size:1.4em !important;
}

#artist-search {
	z-index:1 !important;

}

table p {
	font-size:1.2em;
	font-weight:bolder;
}

a {
	font-size:0.9em !important;
	color:#FFF !important;
	text-decoration:none !important;
}

audio {
	opacity:0 !important;
	position:fixed !important;
	z-index:-5 !important;
}

#header {
	position:relative !important;
	z-index:99999999999999 !important;
}


#st-2 {
	z-index:99999999999999 !important;
}

#reward {
    background-color: #000 !important;
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 2em !important;
    top:0rem !important;
    left: 0rem !important;
    z-index: 9999999999999 !important;
}

#artist-search select {
		background-color:#424c53 !important;
	color:#FFF !important;
	border:none !important;
}

#artist-search select option {
	color:#FFF !important;
	text-align:center !important;
}



.alert-warning {
	background-color:maroon !important;
	font-size:1em !important;
}

#header .breadcrumb {
    font-size: 1em !important;
    background-color: #000;
    padding: 0em !important;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity: 0.9 !important;
}

#header .breadcrumb img {
	width:3rem !important;
	height:3rem !important;
}

.card img {
	height:20rem !important;
}

.pop-menu {
	height: 100% !important;
}

#go-artist {
	    font-size: 1em !important;
	    color:#000 !important;
}

#go-artist option {
	color:transparent !important;
}

select {
	color:#000 !important;
	text-align:center !important;
}


#external-content {
	background-color:#000 !important;
	position:fixed !important;
	left:0rem !important;
	top:0rem !important;
	width:100% !important;
	height:90% !important;
	z-index:999 !important;
	opacit:0.9 !important;
}

select {
	text-align: center !important;
}

.breadcrumb li strong {
	font-size: 1em;
}

#artist-search h1 {
	font-size: 1em;
}

#artist-search {
    position: fixed;
    bottom: 7rem;
    background-color: #000;
    height: 5rem;
    left: 0rem;
    z-index:0;
    color:#000 !important;
    z-index:0.9 !important;
}

#artist-search option {
	color:#000 !important;
}
.welcome-back {
	position: relative !important;
    top: -6rem !important;
    left: 3rem !important;
}

h2 {
	color: #FFF !important;
}

#artist-search table td {
	position:relative !important;
}

#artist-search table td span {
	position:absolute !important;
	bottom:-2rem !important;
	font-size:0.9em !important;
	text-align: center;
	color:#FFF;
	font-weight:bolder;
}

#player-bar table td {
	position:relative !important;
	top:0rem;
}

#play-bar table td span {
	position:absolute !important;
	bottom:-4rem !important;
}

.playlist th {
	color: #FFF !important;
	border: 1px solid #FFF;
}

.playlists iframe {
	height: 10rem;
}

.playlist td {
	color: #FFF !important;
	border: 1px solid #FFF;
}
select {
	padding: unset !important;
}

.prod h2 {
	color: #FFF !important;
}



.fixed-window p {
	color: #FFF !important;
}

.fixed-window h1 {
	color: #FFF !important;
}

.fixed-window {
	background-color: #333;
	height: 100% !important;
	z-index: 99999999 !important;
	background-size: 300% !important;
	background-repeat: no-repeat;
}

.fixed-window p a button {
	border: 5px solid #FFF;
	color: #FFF;
	width: 40%;
	padding: 0rem;
}

#chatroom-icon {
    position: fixed;
    right: 3rem !important;
    bottom: 23rem!important;
    width:10rem !important;
    z-index: 999999999999999!important;
    opacity: .9;
}
.logo {
	font-size: 0.8em !important;
}

.title-name {
	font-size: 0.8em !important;
}

#player-bar table {
	position:fixed;
	bottom:0rem;
}

#player-bar table td span {
	text-align:center;
}

#player-bar td img {
	margin-left:auto;
	margin-right:auto;
	width:auto;
}

.pop-menu {
	display: none;
}

p {
	color: #FFF !important;
	font-size:1.2em !important;
}


.col-md-1 {
	float:left;
}

.title-name a {
	font-size:1.8em !important;
}

#si {
	position: fixed !important;
	right: 0rem !important;
	top: 0rem !important;
}
.lazy td p {
	font-size:1.2em !important;
}
.lazy:hover {
	background-color: #CCC !important;
}

.ico {
	width:2rem !important;
}

.ads-ico {
	width: 3.5rem !important;
	height: 3.5rem !important;
}

.small-ico {
	width: 3rem !important;
	height: 3rem !important;
}

#promo {
	position: fixed !important;
	z-index: 99999999999999999 !important;
	top: 0rem;
	left: 0rem;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity:0.9;
}

#promo video {
	width:100% !important;
	height:90rem !important;
}



#promo p span {
	font-size: 2.4em;
	color: #FFF !important;
}

.fixed-window {
    position: fixed;
    top: 0rem;
    left: 0rem;
    background-color: #FFFF;
    width: 101%;
    height: 90%;
    z-index: 9999999999 !important;
    font-size: 1em;
    background-size: 100% !important;
    opacity: 0.9;
}

.fixed-window h1 {
	color: #000;
}

.fixed-window p {
	color: #000;
	font-size: 1.4em;
}


.fixed-window button {
	border: 5px solid #000;
	color: #000;
	font-size: 1em;
}

td {
	color: #000;
}

.download-cover{
	    position: relative;
    top: 8rem;
    font-size: 5.2em;
}

a {
	color: #FFF;
}

p {
	color: #FFF;
}

td a {
	 color: #FFF !important;
    text-decoration: none !important;
    font-size: 0.5em !important;
}
.container-fluid {
	padding-bottom: 6rem;
}

#membership {
    color: #000;
    position: fixed;
    top: 0rem;
    left: 0rem;
    width: 100%;
    height: 100%;
    z-index: 9999999999 !important;
    display: block !important;
}

#membership ul {
	color: #FFF;
	font-size: 1.8em;
	width: 90%;
	margin-left: auto;
	margih-right: auto;

}

.scroll {
	width: 100%;
	height: 100% !important;
	overflow-y: scroll;
	overflow-x: hidden;
}

#membership button {
	width: 100%;e
}

#membership .card {
	background-color: #4267b2;
}

#membership h1 {
	color: #FFF;
		width: 80%;
	margin-left: auto;
	margin-right: auto;
}
#membership p {
	color: #FFF;
	font-size: 2.2em !important;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

#community {
margin-left: 50%;
}

.col-md-2 {
	float:left;
}

.col-md-3 {
	float:left;
}

.col-md-4 {
	float:left;
}

.col-md-5 {
	float:left;
}

.col-md-6 {
	float:left;
}

.col-md-7 {
	float:left;
}

.col-md-8 {
	float:left;
}

.col-md-9 {
	float:left;
}

.col-md-10 {
	float:left;
}

.col-md-11 {
	float:left;
}

.col-md-12 {
	float:left;
}

.col-xs-1 {
	float:left;
}
.col-xs-2 {
	float:left;
}

.col-xs-3 {
	float:left;
}

.col-md-4 {
	float:left;
}

.col-xs-5 {
	float:left;
}

.col-xs-6 {
    float:left;
}

.col-xs-7 {
	float:left;
}

.col-xs-8 {
	float:left;
}

.col-xs-9 {
	float:left;
}

.col-xs-10 {
	float:left;
}

.col-xs-11 {
	float:left;
}

.col-xs-12 {
	float:left;
}

.title {
	font-size: 8.8em;
    font-weight: bolder;
    position: relative;
    bottom: -5rem !important;
}
#header .breadcrumb {
    font-size: 0.9em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 10rem;
    left: -4rem;
}
.active {
	background-color: #333;
}

#popular {
	padding-bottom: 10rem;
}

#chat {
	position: fixed;
    top: 0rem;
    height: 72%;
    left: 0rem;
    width: 105%;
    z-index: 99999;
    background-color: #FFF !important;
    font-size: 1.2em;
}

#chat a {
	color: #000;
	font-weight: bolder;
}

#chat input[type="text"]{
	font-size: 0.8em;
	padding: 0rem;
}

#chat input[type="submit"] {
    background-color: #000 !important;
    border: 2px solid #FFF;
    color: #FFF;
    font-weight: bolder;
    width: 1;
   }

#box {
	height: 30rem;
	background-color: #FFF;
}

#box p {
	font-size: 1em !important;
}

	.st-margin {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

#optons {
    position: fixed;
    top: 5rem;
    width: 100%;
    z-index: 999;
    /* height: 10%; */
    left: 0rem;
    padding: 0.5em;
    font-size: 2.2em;
    background-color: #5b2c6f;
    border-left: 5px solid #FFF;
    display: none;
    opacity: 0.9;
}

#optons p {
	font-size: 0.8em;
}

.title-name {
	color: #FFF;
}

#listen-bar p {
	color: #FFF;
	font-size:1.2em !important;
}

#footer .col-md-12 p {
	font-size: 1.2em;
}

#footer p {
	color: #FFF;
}

#optons ul li {
	list-style: none;
}

#optons ul li a {
	color: #FFF;
}

#optons h2 {
	color: #FFF !important;
}

#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 0rem;
    z-index: 1;

}

.header-menu {
	position: fixed;
    top: 4rem;
    left: 0rem;
    width: 100%;
    height: 100%;
    background-color:#000 !important;
    z-index: 9999999 !important;
}

.header-menu p:hover {
	background-color:#333;
}

.header-menu p:active {
	background-color:#333;
}

.back {
	position: relative;
	z-index: 99;
	width: 5rem;
}

#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
    left: 0rem;
}
#footer h2 {
	color: #FFF;
}

#upload h2 {
	color: #FFF;
}


.ui-datepicker-calendar td a {
	color: #000 !important;
}



#bio h1 {
	width: 80%;
}
#bio p {
	text-align: justify;
	font-size: 1.8em;
	width: 80%;
	padding: 0.5em;
	margin-left: auto;
	margin-right: auto;
	color: #FFF !important;
}

.col-md-10 p {
	color: #FFF;
}




#contact h1 {
	width: 80%;
}
#contact p {
	text-align: justify;
	font-size: 1.8em !important;
	width: 80%;
	padding: 0.5em;
	margin-left: auto;
	margin-right: auto;
}

textarea {
	height: 20rem;
}

button {
	background-color: transparent;
	border: 2px solid #FFF;
	color: #FFF;
	font-weight: bolder;
	padding: 0.5em;
}


label {
	color: #FFF;
	font-size: 1em;
	font-weight: bolder;
}

input[type="email"] {
	padding: 0.5em !important;
	text-align: center;
	font-size: 1em;
	height: 5rem;
}

input[type="submit"] {
	background-color: transparent;
	border: 2px solid #FFF;
	color: #FFF;
	font-weight: bolder;
	width: 100%;
}

.title-name {
	font-size: 2.5em;
	font-weight: bolder;
	display: none;
}


.discover {
	background-color: transparent;
	border: 2px solid #FFF;
	color: #FFF;
	font-weight: bolder;
	padding: 0.5em;
	width: 50%;
}

.form-control {
	padding: 0.5em;
	text-align: center;
	font-size: 1em;
}

#upload {
	padding: 2em;
}

#upload form {
	border: solid 1px #CCC;
	padding: 1em;
}

p {
    font-size: 3.2em;
}

a {
	text-decoration: none !important;
}

a:hover {
		color: #FFF !important;
	}



h1 {
	color: #FFF;
}

h1 img {
	float: right;
	margin-right: 2rem;
}

td {
	color: #FFF;
	font-size: 0.9em !important;
}

.mini-track {
	width: 10rem;
	height: 10rem;
	padding: 0.5em;
	border-radius: 50%;
}

.play {
	width: 10rem;
}

.profile {
	border-radius: 50%;
	width: 5rem;
}

.close {
    float: right;
    font-size: 4.2em;
    font-weight: bolder;
    color: #FFF;
    position: relative;
    z-index: 99999;
}

#player-bar {
    position: fixed !important;
    bottom: 0rem !important;
    left: 0rem !important;
    height: 8rem !important;
    width: 100% !important;
    z-index: 99999999 !important;
    background-position-y:50% !important;
  
}

#chatmessage {
	position: relative;
	z-index: 1;
}
#footer {
	clear: both;
    background-color: #4267b2;
    padding-bottom: 10rem;
}

#footer ul li a {
	font-size: 2em;
	color: #FFF;
	text-decoration: none;
}

#footer ul li {
	list-style: none;
}

#footer h2 {
	font-weight: bolder;
	font-size: 2.2em;
}

table td  a {
	text-decoration: none;
	color: #FFF;
}

table td  a:visited {
	text-decoration: none;
	color: #FFF;
}

#discover {
	display: none;
}

#page-loader {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0rem;
	left: 0rem;
	z-index: 99998;
	background-image: url(https://i.pinimg.com/originals/af/7d/e3/af7de3aec53daf8e300f9b20509b96cf.gif);
	background-position-x: 50%;
	background-position-y: 50%;
	background-repeat: no-repeat;
	background-color: #000;
}

.scroll-effect {
	top: 0rem;
	left: 0rem;
	width: 100%;
	z-index: 9999;
}

.title-name {
	font-size: 1em !important;
}

	#now-playing {
		border-bottom: 5px solid #FFF;
		width: 25%;
	}


	.now-playing-title {
		font-size: 2em;
		color: #000;
		font-weight: bolder;		
	}

	.artist-name {
		font-size: 2em;
		color: #FFF;
		text-shadow: 1px 1px #CCC;
		font-weight: bolder;
	}


.login_display {
		width:100%; 
		z-index:999;
		bottom:20.5rem; 
		overflow-x:scroll; 
		overflow-y:scroll;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
html, body {
	height:100%;
	width:100%;
}


.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    height:16rem;
    left: 0rem;
    bottom: 20rem;
    overflow: auto;
    width: 100%;
}

	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}


}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */

	
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */

html, body {
	height:100%;
	width:100%;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    height:16rem;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    bottom: 20rem;
    overflow: auto;
    width: 100%;
}

#player-bar table {
	position:relative;
	top:2rem;
}
	
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */	#header {
		background-size: 100%;
	}

	.blog {
		padding: 35rem !important;
	}

#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
     z-index: 9999999999 !important;

}

	#pop-menu .ico {
		width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 16rem;
    overflow: auto;
    width: 100%;
}

	
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
	#header {
		background-size: 100%;
	}

	.blog {
		padding: 35rem !important;
	}

#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
        z-index: 9999999999 !important;

}
	#pop-menu .ico {
		width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 14rem;
    overflow: auto;
    width: 100%;
}


}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
	#header {
		background-size: 100%;
	}

	#player-bar table {
	position:relative;
	top:2rem;
	}

	.blog {
		padding: 35rem !important;
	}

#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
       z-index: 9999999999 !important;

}

	#pop-menu .ico {
			width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 14rem;
    overflow: auto;
    width: 100%;
}
	
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	#header {
		background-size: 100%;
	}

	.blog {
		padding: 35rem !important;
	}

#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
        z-index: 9999999999 !important;

}

	#pop-menu .ico {
			width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 14rem;
    overflow: auto;
    width: 100%;
}


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 100% !important;
    overflow-x: hidden;
}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 14rem;
    overflow: auto;
    width: 100%;
}



}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */

.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}

.login_display {
    overflow-x: scroll;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    position: fixed;
    left: 0rem;
    height: 14rem;
    bottom: 14rem;
    overflow: auto;
    width: 100%;
}

	#chatroom-box {
    position: fixed;
    width: 31%;
    height:70rem;
    top: 6rem !important;
    right: 0rem;
    height: 45rem !important;
    overflow:auto;
    background-color: #000;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:999999999999 !important;
}

#header .breadcrumb {
    font-size: 0.9em !important;
    background-color: #000;
    padding: 2em;
    width: 100%;
    position: relative;
    top: 8rem;
    left: 0rem;
}

.blog {
		padding: 35rem !important;
	}

	#earnings {
	margin-top:10rem;
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
       z-index: 9999999999 !important;

}

	#pop-menu .ico {
	width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem!important;
    background-color: #000;
    z-index: 99999999999;
    left: 0;
    width: 100%;
    height: 100% !important;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}

.pop-menu p {
	font-size: 1.8em;
}

#player-bar {
    position: fixed !important;
    bottom: 0rem !important;
    left: 0rem !important;
    width: 100% !important;
   background-position-y:50% !important;
  
    z-index:0 !important;
}

#player-bar table {
	margin-top:1.5rem !important;
}

.fixed-window {
	background-size: 100% !important;
}


#artist-search {
	z-index:999999 !important;
}

}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
	#header {
		background-size: 100%;
	}

	.blog {
		padding: 35rem !important;
	}

	#chatroom-box {
		width:45%;
	}

#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem!important;
    left: 55rem!important;
    z-index: 9999999999 !important;
}
	#pop-menu .ico {
		width:2rem !important;
	}

.pop-menu {
    position: fixed;
    top: 6rem;
    background-color: #000;
    z-index: 9999999;
    left: 0;
    width: 100%;
    height: 72% !important;
    overflow-x: hidden;
}

.pop-menu {
	    opacity: 0.9;
}


}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}




}
@media only screen and (min-device-width : 320px) and (max-device-width : 479px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}

#player-bar table {
	position:relative;
	top:2rem;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}

}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}


}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}


}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}


}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}

}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}

}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */

}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
body {
	padding-bottom: 10rem;	
}


	.mic {
    positioN: fixed;
    right: 3rem;
    z-index: 99999;
    bottom: 30rem;
	}
	#loggedin {
	overflow-x: scroll !important;
    background-color: #333;
    white-space: nowrap;
    position: fixed;
    opacity: 0.9;
    z-index: 0;
    height: 25rem !important;
    left: 0rem;
    height: 10rem !important;
    bottom: 11rem !important;
    width: 100%;
    z-index:0 !important;
	}
#header {
    height: 90rem!important;
    background-size: 100%;
    background-position-y: 28%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    position: relative !important;
    top: 6rem;
    z-index: 1;
    background-size:155% !important;
}

	#chatroom-box {
    position: fixed;
    width: 100%;
    top: 9rem !important;
    height: 85% !important;
    left: 0rem;
    height: 100% !important;
    overflow:auto;
    background-color: #000;
    z-index: 1;
    z-index: 50 !important;
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em !important;
    opacity: 0.9 !important;
    z-index:10 !important;
}




#artist-search h1 {
	font-size: 1em;
}



#artist-search {
    position: fixed;
    bottom: 12rem;
    background-color: #000;
    height: 6.5rem;
    left: 0;
}

#si {
	position: fixed !important;
	right: 30% !important;
	top: 0rem !important;
}

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
      background-position-y:50% !important;
  
}
#pop-menu {
    width: 4rem;
    height: 4rem;
    position: fixed!important;
    top: 1rem !important;
    left: 56rem !important;
     z-index: 9999999999 !important;

}
.pop-menu {
    position: fixed;
    top: 0rem;
    background-color: #000;
    z-index: 9999999;
    font-size: 1em;
    left: 0;
    padding-top: 6rem;
    width: 100%;
    height: 100%!important;
    overflow-x: hidden;
}
#top {
	    background-color: #173679;
    position: fixed !important;
    top: 0rem !important;
    width: 100% !important;
}

.breadcrumb li {
	padding-left:0.1em !important;
}

#header .breadcrumb {
    font-size: 1.2em;
    background-color: #000;
    padding: 1em;
    width: 115%;
    position: relative;
    top: 6rem;
    left: -2rem;
    opacity:0.9 !important;
}

	
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
	
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
     background-position-y:50% !important;
  
}
	
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */

}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */

}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */

}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
	

}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */

#player-bar {
    position: fixed !important;
    bottom: -8rem !important;
    left: 0rem !important;
    height: 20rem !important;
    width: 100% !important;
  
}


}