html,body{
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
        /* background-color:#FEFAEC; */
		/*background-color:#fff;*/
		height: 100%;
		margin: 0;
    }

	.top{
	   overflow:hidden;
	   top:0;
	   left:0;
	   height:3.25em;
	   line-height:3.25em;
	   /*border-bottom: solid 1px rgba(144, 144, 144, 0.3);*/
	}
	
	.menu_icons{
     font-size: 40px;
	 vertical-align: middle;
	}
	
	.hub_logo{
		float:left;
		height:3.25em;
		line-height: 3.25em;
		padding-left:20px;
	}
	
	.hub_tools{
		float:right;
		text-align: right;
		padding-right: 0.6em;
		/*text-transform: uppercase;*/
	}
	
	.player_icons{
		font-size:100px;
	}
	
	.search{
	}
	
	.hero{
		margin: 50px 0;
		text-align:center;
	}
	
	.hero_img{
		max-width:15%;
	}
	
	#adbg{
		background-image: url(styles.css);
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		z-index:-2;
	}
	
	#list_fav{
		width:60%;
		margin:0 auto;
	}
	
	#list_fav h2{
		color:#62A6BF;
	}
	
		
	.fav_del .menu_icons {
		font-size: 30px;
	}
	
	.fav_title h1{
		font-size: 1em;
	}
	
	.fav_title a{
		display:inline-block;
	}
	
	.fav_del a{
		display:inline-block;
	}
	
	.favors{
		overflow:hidden;
		line-height: 2.2em;
		border: 1px solid #62A6BF;
		border-radius: 5px;
		padding: 5px 0;
		margin: 5px 0;
	}
	
	.fav_title{
		float:left;
		width:50%
	}
	
	.fav_del{
		float:left;
		width:50%
	}

	
	
	.hub_search{
		margin:50px auto;
		width:60%
	}
	
	ul {
		padding: 0;
		margin: 0;
	}
	
	ul li {
		text-decoration: none;
		display: inline-block;
		padding: 0;
		/*display: inline;*/
	}
	
	.hub_tools a {
		/*padding: 0 1.25em;*/
		/*border-right: solid 1px rgba(144, 144, 144, 0.3);*/
		/*margin: 0 1.25em;*/
		margin: 0 0.6em;
		display: inline-block;
		line-height: normal;
	}
	
	a{
	 color:#6b6b6b;
	 /*color:#62A6BF;*/
	 text-decoration: none;
	}
	
	a:hover{
	  color:#62A6BF;
	  /*color:#C3BB9B;*/
	}
	
	.main{
	 margin:0 auto;
	 height:100%;
	}
	
	.logo{
		height: 2.50em;
		line-height: 3.25em;
		vertical-align: middle;
	}
	
	h1,br{
	  padding:0;
	  /*font-size: 3em;*/
	  font-size: 2.5em;
	  font-weight: 900;
	  margin: 0;
	}
	
	h2{
	  color:#fff;
	  /*color:#625772;*/
	  /*font-size: 2em;*/
	  /*font-size: inherit;*/
	  font-weight: 100;
	  margin:0;
	}
	
	h4 {
    font-size: 1em;
    font-weight: 900;
    color: #585858;
    margin: 0;
    }
	
	.m10{
	  margin: 10px 0;	
	}
	
	
	.country{
	  font-size: 0.6em;
	  margin-left: 5px;
	}
	
	input{
	  width:100%;
	  padding:5px 0;
	  margin:5px 0;
	  text-align:center;
	}
	
	.copy{
	  cursor: pointer;
	}
	
	.copy:hover {
	  color:#A9A9A9;
	
	}
	
	.low-container {
		background-color: rgba(0, 0, 0, 0.5);
		box-shadow: 0 0 12px 0 rgb(0 0 0 / 10%), 0 10px 30px 0 rgb(0 0 0 / 20%);
		position: absolute;
		top:35%;
		transition: transform .5s cubic-bezier(.77,0,.175,1);
		left:5em;
		border-radius:10px;
		/*height:22em;*/
		/*width:17em;*/
		width:19em;
		padding:10px;
		
	}
    
    .cover {
		z-index: 2147483647;
		width: 100%;
	}
    
    button {
    background: none;
    border: 0;
    color: #fff;
    outline: none;
    cursor: pointer;
    }
    
    .fa, .fas {
    font-size: 5em;
    }
    
    #audio-controls {
		padding: 2em 0;
		overflow: hidden;
		z-index: 2147483647;
		width: 100%;
		/* opacity: 0; */
		-webkit-transition: opacity .3s;
		-moz-transition: opacity .3s;
		-o-transition: opacity .3s;
		-ms-transition: opacity .3s;
		transition: opacity .3s;
    }
    
    cover {
		z-index: 2147483647;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
    }
    
    #producer {
		text-align: center;
		padding: 2em 0;
		/*overflow-wrap: anywhere;*/
    }
    
	#main_title{
		/*width:250px;*/
		/*height:45px;*/
		margin:0 auto;
		line-height:1em;
		padding:10px 0;
	}
	
	#message{
		font-size:inherit;
	}
	
    .feed {
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
    }
    
    #artist {
    padding: 10px;
    }
    
    .low-container h1 {
    color: #fff;
    }
    
    input{
    height: 3em;
    box-shadow: none;
    color: 000;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    border: solid 1px #c9c9c9;
    color: inherit;
    display: block;
    outline: 0;
    text-decoration: none;
    width: 100%;
    font-size: inherit;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 0.5em;
    /* margin-bottom: 0.5em; */
    }
    
    input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    transition: 0.1s;
    cursor: pointer;
    }
    
    input[type="submit"]{
      color: #fff;
      background-color: #114B5F;
    }
    
    label {
    height: 3em;
    line-height: 3em;
    display: block;
    font-size: inherit;
    font-weight: 100;
    color:#afafaf;
    text-transform: uppercase;
    }
    
    .inner{
      width: 50%;
      margin: 0 auto;
    
    }
    
	.stations{
		margin: 50px 0;
		text-align:center;
	}
	
	footer {
      padding: 6em 0;
      background-color: #f6f6f6;
      color: #555;
      text-transform: uppercase;
    }
    
    .inner {
      max-width: 90%;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
    }
	
	.copyfooter {
      text-align: center;
    }
	
	.space {
      margin: 2em 0;
    }
	
	footer > .inner .copyfooter li:first-child {
      border-left: 0;
      padding-left: 0;
      margin-left: 0;
    }
    
    footer > .inner .copyfooter li {
      display: inline-block;
      border-left: solid 1px rgba(88, 88, 88, 0.15);
      line-height: 1;
      padding: 0 0 0 1em;
      margin: 0 0 0 1em;
    }
    
    .copyright {
      font-size: 10pt;
    }
    
    .fillspace{
      min-height:10em;
    }
    
	#error{
	width:50%;
	margin:0 auto;		
	}
    
	#home_hero{
		width:300px;
		height:300px;
		margin:0 auto;
	}
    
	
    /* Media Screens 	*/
	
	
	@media screen and (max-width: 1023px) and (max-height: 720px) {
		
		.low-container {
			top:33%;
			left:3em;
			border-radius:10px;
			/*height:22em;*/
			width:7em;
			padding:10px;
		}
		
		#producer {
			padding:0.5em 0;
		}
		
		#main_title{
			padding:5px 0;
			font-size:1.3em;
		}
		
		#message{
			display: none !important;
		}
		
		#audio-controls {
			padding:0.5em 0;
		}
		
		.fa, .fas {
			font-size:3em;
		}
	
	}
	
	
	@media screen and (max-width: 600px){
		
		h1 {
			font-size: 1.6em;
		}
		
		h2 {
			font-size: 1.2em;
		}
		
		h4 {
			font-size: 1em;
		}
		
		input{
			height: 2em;
		}
		
		.hub_tools a {
		margin: 0 0.5em;
		}
		
		.fa, .fas {
			font-size: 4em;
		}
		
		#producer {
			padding: 10px;
		}
		
		#main_title{
			padding:0px;
		}
		
		#message{
			font-size:inherit;
			display: block !important;
		}
		
		.hub_search {
			width: 90%;
		}
		
		.search{
			width: 90%;
			margin:0 auto;
		}
		
		.stations {
			width: 90%;
			margin:0 auto;
		}
		
		.favors{
			line-height: 1.2em;
		}
		
		.fav_del .menu_icons {
			font-size: 20px;
		}
		
		.fav_title h1{
			font-size: 1em;
		}
		
		#list_fav {
			width: 90%;
		}
		
		.inner{
		  width: 100%;
		}
		
		#error{
		 width:90%;
			
		}
		
		#home_hero{
			width:150px;
			height:150px;
		}
		
		.controls-play{
			float: none;
			margin: 0 auto;
			width: 100%;
			text-align: center;;
		}
		
		.topapp{
			padding:10px;
		}
		
		#listeners{
			padding:10px;
			text-align:center;
		}
		
		#play-pause {
			padding-left: 0px;
		}
		
		.controls-mute{
			display:none;
		}
		
		.controls-volume{
			display:none;
		}
		
		
		.low-container {
			background-color: rgba(0, 0, 0, 0.0);
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding:0px;
			top:auto;
			height:auto;
			width:auto;
		}
		
		.cover {;
			background-color: rgba(0, 0, 0, 0.3);
		}

		
		#audio-controls {
			padding: 20px 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
		
		.row {
			padding: 20px;
			margin:15px 0;
		}
		
		.inner {
			max-width: 90%;
		}
		
		#bitrate{
			font-size: 16px;
		}
		
		#nowplay{
			font-size: 16px;
		}
		.top_space{
			padding: 0.5em 0;
		}
		
		.top_menu{
			display:none;
		}
		
		.nav-toggle {
			right: 10px;
		}
		
		.nav-toggle{;
		  display:block;
		}
	}
	
	
	@media screen and (max-width: 375px) {
	
	  footer > .inner .copyfooter li {
		  display: normal;
		  border-left: none;
		  line-height: normal;
		  padding: 0;
		  margin: 0;
		}
	}