body {
	display:block;
	background-color:#000;
	color:white;
	padding:0;
	margin:0 !important;
	font-family: proxima-nova, sans-serif;
}

img {
	max-width:100%;body {
	display:block;
	background-color:#000;
	color:white;
	padding:0;
	margin:0 !important;
	font-family: proxima-nova, sans-serif;
}

img {
	max-width:100%;
}


/* -- chart row classes -- */
.chart_row {
    width:100%;
    margin:0;
    padding:80px 0 0px 0;
    overflow:hidden;
	text-align:left;
}

/* -- text classes -- */
h1, .genre-title {
	font-size:72px;	
	font-weight:900;
	line-height:90%;
}

h1.awards, h2.awards {
	margin:5px 0;
}

h2 {
	font-size:38px;
	font-weight:900;
	line-height:90%;
}

h3 {
	font-size:23px;
	line-height:100%;
	font-weight:900;
}

h3.awards {
	font-size:48px;
	font-weight:600;
	margin:5px 0;
}

h3.caption_txt {
	margin-top:0;
	padding-left:40px;
}

h4 {
	font-size:24px;
	font-weight:400;
}

.top10_txt {
	font-size:48px;
	color:white;
}

p.awards {
	margin-bottom:4px;
	margin-top:4px;
}

/* -- main nav -- */
#main_nav {
	display:block;
	position:fixed;
	top:-1px;
	width:100%;
	height:60px;
	background-color:#000;
	z-index:100;
	overflow:hidden;
	
}

#nav_container {
	display:block;
	margin:0 auto;
	height:60px;
	width:99%;
	max-width:800px;
	text-align:center;
}

#nav_logo, .nav_link {
	margin-top:21px;
	float:left;
}

#nav_logo {
	margin-right:2%;
	width:156px;
	height:17px;
}

.nav_link {
	font-weight:500;
	font-size:14px;
	color:#fff;
	margin-left:5%;
}

.nav_txt {
	color:#fff;
	text-decoration:none;
}

#charts-link {
	color:#fff !important;
}

#link-icon {
	position:relative;
	top:-2px;
	left:5px;
	width:13px;
	height:13px;
}

/* -- TOP HEADER -- */
#top-header {
	display:block;
	position:relative;
	overflow:hidden;
	height:auto;
	padding:80px 0 0 0;
	
	background-position:50% 0px;
	background-size:100% 100%;
	background-repeat:no-repeat;
	color:white;
	
	text-align:left;
}

#top_header_txt {
	font-size:16px;
	line-height:200%;
	text-shadow: 2px 2px 4px #000000;
}

.header_txt {
	margin:0 auto 20px auto;
	width:90%;
	max-width:800px;
}

#header_img {
	display:block;
	width:100%;
	max-width:700px;
	margin:0 auto;
}

#header_mobile_img {
	display:none;
	width:90%;
	margin:0px auto 0px auto;
}


/* -- TOP TEN CLASSES -- */
.topten_container, .topsongs_container, .topgenres_container {
	position:relative;
	width:90%;
	max-width:800px;
    margin:0 auto 30px auto;
	
    /*padding:0;*/
	
    overflow:hidden;

	text-align:left;
}

.topten_marquee {
	display: block;
	position: relative;
    width:100%;
    height:325px;
    margin:13px auto 0;
    padding:0 0 40px 0;
    float:left;
	overflow:hidden;
	
	font-size:72px;
	font-weight:900;
	line-height:90%;
}

.top10_caret {
	margin-right:20px;
}

.marquee_img {	
	display: block;
	margin:0px 30px 0 0;
	float: left;
	width:315px;
	height:315px;
	border: 3px solid #FFC700;
	border-radius:158px;
}

.marquee_header {
	display:inline-block;
}

.alignV {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.topten_item {
	display:block;
	position:relative;
	margin:0 0 33px 0;
	padding:0;
	width:30%;;
	float:left;
	border-radius:10px;
	overflow:hidden;
}

.topten_img {
	border-radius:150px;
	overflow:hidden;
}

.topten_caption {
	position:relative;
	height:70px;
	margin:0;
	padding:0;
	text-align:left;
}

.topten_num {
	position:absolute;
	width:30px;
	top:0;
	left:0px;
	font-weight:400;
	text-align:right;
}

.col-center {
    margin-left:5%;
    margin-right:5%;
}


/* -- BREAKOUT ARTISTS -- */
#breakout_artists {
	
}

.breakout {
	display:block;
	position:relative;
	width:48%;
	margin:5px 1%;
	float:left;
	overflow:hidden;
}

.breakout-txt {
	display:block;
	position:absolute;
	width:66%;
	margin:0;
	padding-left:20px;
	bottom:20px;
	left:20px;
	border-left: 5px solid red;
}

.breakout-pink {
	border-color:#FE51A0;
}

.flame-emoji {
	display:block;
	position:absolute;
	width:50px;
	bottom:20px;
	right:20px;
}

.breakout-img {
	border-radius:16px;
}

/* -- AWARDS -- */
#juke-awards {
	padding-top:100px;
}

#awards-img {
	width:58%;
	float:right;
}

.awards-txt {
	width:40%;
	margin:0;
}

.bottom-border {
	padding-bottom:30px;
	margin-bottom:30px !important;
	border-bottom:1px solid #fff;
}


/* -- TOP SONGS CLASSES -- */
#top_songs {
	padding-top:100px;
}

.genre-title {
	margin-bottom:50px;
}

.top5-col {
	display:block;
	float:left;
	width:48%;
	margin:5px 1% 150px 1%;
	overflow:hidden;
	background:black;
}

.top5-marquee {
	padding-top:30px;
	border-radius:20px;
	background-size:cover;
}

.top5-marquee-img {
	display:block;
	width:200px;
	margin:35px auto 0px auto;
	border-radius:16px;
}

.top5-title {
	margin:0;
	padding-left:35px;
}


/*---------------------- */
.genre-caret {
	margin-right:10px;
}
.top5-num {
	display:inline-block;
	position:relative;
	top:0;
	left:0px;
	width:23%;
	margin:0;
	font-size:24px;
	line-height:100px;
	text-align:center;
	
	float:left;
}

.top5-div  {
	display:block;
	position:relative;
	width:100%;
	height:100px;
	margin:0;
	padding:0;
	color:white;	
}

.h-line {
	display:block;
	padding:0;
	margin:0 auto;
	width:85%;
	border-top: 1px solid #222;
}

.marquee-info {
	border-top:none;
	height:110px;
	line-height:110px;
}

.top5-album {
	display:block;
	position:relative;
	width:90%;
	max-width:80px;
	margin:10px auto 0 auto;
	border-radius:8px;
	
	float:left;
}

.top5-headline {
	display:table;
	position:relative;
	width:auto;
	max-width:43%;
	height:100px;
	padding-left:17px;
	
	float:left;
}

.marquee-headline {
	width:70%;
	max-width:75%;
	height:110px;
	float:left;
}

.top5-song {
	font-size:16px;
	font-weight:400;
}

.top5-artist {
	color:#999;
	font-size:16px;
	font-weight:400;
}

.top5-headline p {
	display: table-cell;
	vertical-align: middle;
	line-height:130%;
	padding-right:5px;
}

/* -- FUN FACT CLASSES -- */
.funfact {
	display:block;
	position:relative;
	width:99%;
	
	height:215px;
	height:auto;
	min-height:215px;
	
	margin-top:60px;
	padding:0;
	padding:25px 0;
	background:black;
	border-radius:16px;
	border:1px solid white;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	overflow:hidden;
}

.fact-info {
	width:46%;
	float:left;
	margin-left:20px;
	overflow:hidden;
}

.fact-img {
	display:block;
	position: absolute;	
	width:40%;
	max-width:180px;
	height:auto;
	border-radius:8px;
	margin:0;
	
	
	top: 50%;
	right:20px;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

h1.fact-headline, p.fact-txt {
	display:block;
	width:100%;
	padding-left:0px;
	
	padding-right:25px;
}

h1.fact-headline {
	font-size:34px;
	font-weight:800;
	margin:0px 0 10px 0
}

p.fact-txt {
	font-size:18px;
	margin:0;
	line-height:100%;
}


.border-red {
	border-color:#FD2B38;
}

.border-orange {
	border-color:#FF591E;
}

.border-yellow {
	border-color:#E2AB1D;
}

.border-purple {
	border-color:#E2AB1D;
}

/*---------------------- */
.rock-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(105,44,61,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(253, 43, 56, 0.50);
	backdrop-filter: blur(25.738916397094727px);
	  
}

.country-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(158,100,75,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 89, 30, 0.50);
	backdrop-filter: blur(25.738916397094727px);
	  
}

.rap-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(97,86,50,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(226, 171, 29, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.rb-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(86,75,146,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(165, 88, 255, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.pop-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(131,66,93,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(254, 81, 160, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.latin-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(36,188,127,1) 0%, rgba(0,0,0,1) 100%);
	*/
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(36, 188, 127, 0.50);
	backdrop-filter: blur(25.738916397094727px);
	
}

.electronic-new-bg {
	/*
	background: rgb(344,58,41);
	background: linear-gradient(180deg, rgba(36,188,127,1) 0%, rgba(0,0,0,1) 100%);
	*/
	
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(117, 142, 255, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

/*---------------------- */

/*
.bg-rock-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rock-new.png");
}

.bg-rock-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rock-catalog.png");
}

.bg-country-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-country-new.png");
}

.bg-country-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-country-catalog.png");
}

.bg-rap-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rap-new.png");
}

.bg-rap-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rap-catalog.png");
}

.bg-rb-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rb-new.png");
}

.bg-rb-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-rb-catalog.png");
}

.bg-pop-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-pop-new.png");
}

.bg-pop-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-pop-catalog.png");
}

.bg-latin-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-latin-new.png");
}

.bg-latin-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-latin-catalog.png");
}

.bg-electronic-new {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-electronic-new.png");
}

.bg-electronic-catalog {
	background-image: url("https://cdn.touchtunes.com/marketing/images/charts2024/bg-electronic-catalog.png");
}
*/


/* -- COLOR CLASSES -- */
.yellow-gradient {
	 color: #FFC700; 
	 background-image: linear-gradient(45deg, #FFC700 36%, #F89225 72%); 
	 background-clip: text; 
	 -webkit-background-clip: text; 
	 -webkit-text-fill-color: transparent; 
}

.pink-gradient {
 color: #FF5722; 
 background-image: linear-gradient(45deg, #FF5722 36%, #BD35FC 72%); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
}

.yellow {
	color:#E2AB1D;
}

.red {
	color:#FD2B38;
}

.orange {
	color:#FF591E;
}

.purple {
	color:#A558FF;
}

.pink {
	color:#FE51A0;
}

.green {
	color:#24BC7F;
}

.periwinkle {
	color:#758EFF;
}



.border-yellow {
	border-color:#E2AB1D;
}

.border-red {
	border-color:#FD2B38;
}

.border-orange {
	border-color:#FF591E;
}

.border-purple2 {
	border-color:#A558FF;
}

.border-pink {
	border-color:#FE51A0;
}

.border-green {
	border-color:#24BC7F;
}

.border-periwinkle {
	border-color:#758EFF;
}

.border-purple {
	border-color:#E2AB1D;
}


#top_songs {
	margin-bottom:0;
}



/* -- TOP GENRES -- */
#genre1 {
	display:none;
}

#genre-planets {
	display:block;
	width:90%;
	margin:80px auto;
}


/*-- FOOTER --*/
#footer {
	width:100%;
	height:100px;
	background-color:#000000;
	padding-top:30px;
}

#footer-content {
	position:relative;
	display:block;
	margin:0 auto;
	width:94%;
	max-width:1000px;
}

#legal-txt {
	color:#fff;
	margin:0;
	padding-top:20px;
	font-size:14px;
	font-weight:400;
	line-height:100%;
}

#social-bar {
	overflow:hidden;
	position:absolute;
	right:0;
	top:20px;
}

.social-icon {
	position:relative;
	display:block;
	width:44px;
	height:44px;
	overflow:hidden;
	float:left;
	margin:0 0 0 20px;
	border-radius:22px;
}

#facebook, #twitter, #instagram, #linkedin {
	display:block;
	position:absolute;
	top:0;
	max-width:none;
}

#facebook:hover, #twitter:hover, #instagram:hover, #linkedin:hover {
	top:-45px;
}

#facebook {
	left:0px;
}

#twitter {
	left:-45px;
}

#instagram {
	left:-90px;
}

#linkedin {
	left:-135px;
}



/* ----------------------------------------------------------

	ANIMATION STYLES

------------------------------------------------------------*/
.hideicon {
	display:none !important;
}


/* ----------------------------------------------------------

	MEDIA QUERIES

------------------------------------------------------------*/
		@media screen and (max-width: 850px) {
			
			/* -- nav -- */
			#nav_container {
				text-align:left;
			}

			#nav_logo, .nav_link {
				float:none;
				text-align:left;
			}
			
			.nav_link {
				margin:15px auto 15px 25px;
				font-size:16px;
			}
			
			#nav_logo {
				margin:21px auto 20px auto;
				margin:21px 0 20px 25px;
			}
			
			#mobile_show, #mobile_hide  {
			    display:block;
		        position:absolute;
				top:13px;
				right:20px;
		        width:30px;
		        height:60px;
				overflow:hidden;
				z-index:110;
		    }
			
			#mobile_hide {
				height:18px;
				top:20px;
			}
			
			.grey_bar {
			    display:block;
				position:relative;
				top:10px;
			    width:100%;
			    height:3px;
			    margin:0 0 5px 0;
			    border-radius:0px;
			    background-color:#fff;
			}
			
			.header_txt {
				margin:0 auto;
			}
			
			.showicon {
				display:block !important;
			}	
			
			
			
			/* -- footer -- */
			#footer {
				height:150px;
				padding-top:15px;
			}

			#social-bar {
				display:block;
				position:relative;
				margin:0 auto 30px auto;
				width:260px;
			}

			#footer-logo {
				display:block;
				margin:30px auto 20px;
			}

			#legal-txt {
				font-size:9px;
				text-align:center;
			}
	
			#footer-logo {
				display:block;
				margin:30px auto 20px;
			}

			#legal-txt {
				font-size:9px;
				text-align:center;
			}
			
			
			/* -- top ten -- */
			.topten_container, .topsongs_container, .topgenres_container {
				width:90%;
			}
			
			.topten_item {
				margin:0 2.5% 33px 2.5%;
				padding:0;
				width:45%;
				max-width:none;
				overflow:visible;
			}
			
			.topten_caption {
				height:40px;
			}
			
			.col-center {
				margin:0 2.5% 33px 2.5%;
			}
			
			.top10_caret {
				width:28px;
			}
			
			
			
		}
		
		
		
		@media screen and (max-width: 700px) {
			
			/* -- text -- */
			h1, .genre-title {
				font-size:50px;
			}
			
			h2 {
				font-size:36px;
			}
			
			h3 {
				font-size:18px;
			}
			
			#header_img {
				display:none;
			}
			
			/* -- header -- */
			#header_mobile_img  {
				display:block;
				width:80%;
				margin:20px auto 30px auto;
			}
			
			
			/* -- top ten -- */
			.marquee_img {	
				display: block;
				margin:0px auto 0px auto;
				float:none;
				width:80%;
				height:auto;
				border-radius:400px;
			}
			
			.topten_marquee {
				display: block;
				position: relative;
			    width:100%;
			    height:auto;
			    margin:0px auto 0;
			    padding:0 0 40px 1%;
			    float:none;
				overflow:hidden;
	
				font-size:40px;
				font-weight:900;
				line-height:90%;
			}
			
			.topten_marquee p {
				margin-top:0;
				margin-bottom:10px;
			}
			
			.top10_txt {
				font-size:28px;
			}
			
			/* -- awards -- */
			#awards-img, .breakout, .top5-col {
				float:none;
				width:100%;
			}
			
			.genre-caret {
				width:36px;
				margin-right:10px;
				font-size:45px;
			}
			
			.top5-marquee-img {
				display:block;
				width:66%;
				margin:35px auto 0px auto;
			}
			
			.top5-title {
				font-size:28px;
			}
			
			h2.top5-title {
				font-size:36px;
			}
			
			/* -- top5 -- */
			.top5-marquee {
				padding-top:50px;
			}
			
			
		}
}

.clearfix {
	float:none;
	overflow: auto;
	clear: both;
}

/* -- chart row classes -- */
.chart_row {
    width:100%;
    margin:0;
    padding:80px 0 0px 0;
    overflow:hidden;
	text-align:left;
}

/* -- text classes -- */
h1, .genre-title {
	font-size:72px;	
	font-weight:900;
	line-height:90%;
}

h1.awards, h2.awards {
	margin:5px 0;
}

h2 {
	font-size:38px;
	font-weight:900;
	line-height:90%;
}

h3 {
	font-size:23px;
	line-height:100%;
	font-weight:900;
}

h3.awards {
	font-size:48px;
	font-weight:600;
	margin:5px 0;
}

h3.caption_txt {
	margin-top:0;
	padding-left:40px;
}

h4 {
	font-size:24px;
	font-weight:400;
}

.top10_txt {
	font-size:48px;
	color:white;
}

p.awards {
	margin-bottom:4px;
	margin-top:4px;
}

/* -- main nav -- */
#main_nav {
	display:block;
	position:fixed;
	top:-1px;
	width:100%;
	height:60px;
	background-color:#000;
	z-index:100;
	overflow:hidden;
	
}

#nav_container {
	display:block;
	margin:0 auto;
	height:60px;
	width:99%;
	max-width:800px;
	text-align:center;
}

#nav_logo, .nav_link {
	margin-top:21px;
	float:left;
}

#nav_logo {
	margin-right:2%;
	width:156px;
	height:17px;
}

.nav_link {
	font-weight:500;
	font-size:14px;
	color:#fff;
	margin-left:5%;
}

.nav_txt {
	color:#fff;
	text-decoration:none;
}

#charts-link {
	color:#fff !important;
}

#link-icon {
	position:relative;
	top:-2px;
	left:5px;
	width:13px;
	height:13px;
}

/* -- TOP HEADER -- */
#top-header {
	display:block;
	position:relative;
	overflow:hidden;
	height:auto;
	padding:80px 0 0 0;
	
	background-position:50% 0px;
	background-size:100% 100%;
	background-repeat:no-repeat;
	color:white;
	
	text-align:left;
}

#top_header_txt {
	font-size:16px;
	line-height:200%;
	text-shadow: 2px 2px 4px #000000;
}

.header_txt {
	margin:0 auto 20px auto;
	width:90%;
	max-width:800px;
}

#header_img {
	display:block;
	width:100%;
	max-width:700px;
	margin:0 auto;
}

#header_mobile_img {
	display:none;
	width:90%;
	margin:0px auto 0px auto;
}


/* -- TOP TEN CLASSES -- */
.topten_container, .topsongs_container, .topgenres_container {
	position:relative;
	width:90%;
	max-width:800px;
    margin:0 auto 30px auto;
	
    overflow:hidden;
	text-align:left;
}

.topten_marquee {
	display: block;
	position: relative;
    width:100%;
    height:325px;
    margin:13px auto 0;
    padding:0 0 40px 0;
    float:left;
	overflow:hidden;
	
	font-size:72px;
	font-weight:900;
	line-height:90%;
}

.top10_caret {
	margin-right:20px;
}

.marquee_img {	
	display: block;
	margin:0px 30px 0 0;
	float: left;
	width:315px;
	height:315px;
	border: 3px solid #FFC700;
	border-radius:158px;
}

.marquee_header {
	display:inline-block;
}

.alignV {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.topten_item {
	display:block;
	position:relative;
	margin:0 0 33px 0;
	padding:0;
	width:30%;;
	float:left;
	border-radius:10px;
	overflow:hidden;
}

.topten_img {
	border-radius:150px;
	overflow:hidden;
}

.topten_caption {
	position:relative;
	height:70px;
	margin:0;
	padding:0;
	text-align:left;
}

.topten_num {
	position:absolute;
	width:30px;
	top:0;
	left:0px;
	font-weight:400;
	text-align:right;
}

.col-center {
    margin-left:5%;
    margin-right:5%;
}


/* -- BREAKOUT ARTISTS -- */
#breakout_artists {
	
}

.breakout {
	display:block;
	position:relative;
	width:48%;
	margin:5px 1%;
	float:left;
	overflow:hidden;
}

.breakout-txt {
	display:block;
	position:absolute;
	width:66%;
	margin:0;
	padding-left:20px;
	bottom:20px;
	left:20px;
	border-left: 5px solid red;
}

.breakout-pink {
	border-color:#FE51A0;
}

.flame-emoji {
	display:block;
	position:absolute;
	width:50px;
	bottom:20px;
	right:20px;
}

.breakout-img {
	border-radius:16px;
}

/* -- AWARDS -- */
#juke-awards {
	padding-top:100px;
}

#awards-img {
	width:58%;
	float:right;
}

.awards-txt {
	width:40%;
	margin:0;
}

.bottom-border {
	padding-bottom:30px;
	margin-bottom:30px !important;
	border-bottom:1px solid #fff;
}


/* -- TOP SONGS CLASSES -- */
#top_songs {
	padding-top:100px;
}

.genre-title {
	margin-bottom:50px;
}

.top5-col {
	display:block;
	float:left;
	width:48%;
	margin:5px 1% 150px 1%;
	overflow:hidden;
	background:black;
}

.top5-marquee {
	padding-top:30px;
	border-radius:20px;
	background-size:cover;
}

.top5-marquee-img {
	display:block;
	width:200px;
	margin:35px auto 0px auto;
	border-radius:16px;
}

.top5-title {
	margin:0;
	padding-left:35px;
}


/*---------------------- */
.genre-caret {
	margin-right:10px;
}

.top5-num {
	display:inline-block;
	position:relative;
	top:0;
	left:0px;
	width:23%;
	margin:0;
	font-size:24px;
	line-height:100px;
	text-align:center;
	
	float:left;
}

.top5-div  {
	display:block;
	position:relative;
	width:100%;
	height:100px;
	margin:0;
	padding:0;
	color:white;	
}

.h-line {
	display:block;
	padding:0;
	margin:0 auto;
	width:85%;
	border-top: 1px solid #222;
}

.marquee-info {
	border-top:none;
	height:110px;
	line-height:110px;
}

.top5-album {
	display:block;
	position:relative;
	width:90%;
	max-width:80px;
	margin:10px auto 0 auto;
	border-radius:8px;
	
	float:left;
}

.top5-headline {
	display:table;
	position:relative;
	width:auto;
	max-width:43%;
	height:100px;
	padding-left:17px;
	
	float:left;
}

.marquee-headline {
	width:70%;
	max-width:75%;
	height:110px;
	float:left;
}

.top5-song {
	font-size:16px;
	font-weight:400;
}

.top5-artist {
	color:#999;
	font-size:16px;
	font-weight:400;
}

.top5-headline p {
	display: table-cell;
	vertical-align: middle;
	line-height:130%;
	padding-right:5px;
}

/* -- FUN FACT CLASSES -- */
.funfact {
	display:block;
	position:relative;
	width:99%;
	
	height:215px;
	height:auto;
	min-height:215px;
	
	margin-top:60px;
	padding:0;
	padding:25px 0;
	background:black;
	border-radius:16px;
	border:1px solid white;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
	overflow:hidden;
}

.fact-info {
	width:46%;
	float:left;
	margin-left:20px;
	overflow:hidden;
}

.fact-img {
	display:block;
	position: absolute;	
	width:40%;
	max-width:180px;
	height:auto;
	border-radius:8px;
	margin:0;
	
	
	top: 50%;
	right:20px;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

h1.fact-headline, p.fact-txt {
	display:block;
	width:100%;
	padding-left:0px;
	
	padding-right:25px;
}

h1.fact-headline {
	font-size:34px;
	font-weight:800;
	margin:0px 0 10px 0
}

p.fact-txt {
	font-size:18px;
	margin:0;
	line-height:100%;
}

.border-red {
	border-color:#FD2B38;
}

.border-orange {
	border-color:#FF591E;
}

.border-yellow {
	border-color:#E2AB1D;
}

.border-purple {
	border-color:#E2AB1D;
}

/*---------------------- */
.rock-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(253, 43, 56, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.country-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 89, 30, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.rap-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(226, 171, 29, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.rb-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(165, 88, 255, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.pop-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(254, 81, 160, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.latin-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(36, 188, 127, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

.electronic-new-bg {
	background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.20) 100%), rgba(117, 142, 255, 0.50);
	backdrop-filter: blur(25.738916397094727px);
}

/*---------------------- */

.bg-rock-new, .bg-rock-catalog {
	background: #000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(253, 43, 56, 1) 100%);
}

.bg-country-new, .bg-country-catalog {
	background: #000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 89, 30, 1) 100%);
}

.bg-rap-new, .bg-rap-catalog {
	background: #000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(226, 171, 29, 1) 100%);
}

.bg-rb-new, .bg-rb-catalog {
	background: #000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(165, 88, 255, 1) 100%);
}

.bg-pop-new, .bg-pop-catalog {
	background: #000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(254, 81, 160, 1) 100%);
}

.bg-latin-new, .bg-latin-catalog {
	background: #000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(36, 188, 127, 1) 100%);
}

.bg-electronic-new, .bg-electronic-catalog {
	background: #000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(117, 142, 255, 1) 100%);
}

/* -- COLOR CLASSES -- */
.yellow-gradient {
	 color: #FFC700; 
	 background-image: linear-gradient(45deg, #FFC700 36%, #F89225 72%); 
	 background-clip: text; 
	 -webkit-background-clip: text; 
	 -webkit-text-fill-color: transparent; 
}

.pink-gradient {
 color: #FF5722; 
 background-image: linear-gradient(45deg, #FF5722 36%, #BD35FC 72%); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
}

.yellow {
	color:#E2AB1D;
}

.red {
	color:#FD2B38;
}

.orange {
	color:#FF591E;
}

.purple {
	color:#A558FF;
}

.pink {
	color:#FE51A0;
}

.green {
	color:#24BC7F;
}

.periwinkle {
	color:#758EFF;
}



.border-yellow {
	border-color:#E2AB1D;
}

.border-red {
	border-color:#FD2B38;
}

.border-orange {
	border-color:#FF591E;
}

.border-purple2 {
	border-color:#A558FF;
}

.border-pink {
	border-color:#FE51A0;
}

.border-green {
	border-color:#24BC7F;
}

.border-periwinkle {
	border-color:#758EFF;
}



.border-purple {
	border-color:#E2AB1D;
}




/* -- TOP GENRES -- */
#top_genres {
	padding:0;
}

#genre_title {
	margin:0;
}

#genre-planets {
	display:block;
	width:90%;
	margin:80px auto;
}


/*-- FOOTER --*/
#footer {
	width:100%;
	height:100px;
	background-color:#000000;
	padding-top:30px;
}

#footer-content {
	position:relative;
	display:block;
	margin:0 auto;
	width:94%;
	max-width:1000px;
}

#legal-txt {
	color:#fff;
	margin:0;
	padding-top:20px;
	font-size:14px;
	font-weight:400;
	line-height:100%;
}

#social-bar {
	overflow:hidden;
	position:absolute;
	right:0;
	top:20px;
}

.social-icon {
	position:relative;
	display:block;
	width:44px;
	height:44px;
	overflow:hidden;
	float:left;
	margin:0 0 0 20px;
	border-radius:22px;
}

#facebook, #twitter, #instagram, #linkedin {
	display:block;
	position:absolute;
	top:0;
	max-width:none;
}

#facebook:hover, #twitter:hover, #instagram:hover, #linkedin:hover {
	top:-45px;
}

#facebook {
	left:0px;
}

#twitter {
	left:-45px;
}

#instagram {
	left:-90px;
}

#linkedin {
	left:-135px;
}

.nopadding {
	
}

/* ----------------------------------------------------------

	ANIMATION STYLES

------------------------------------------------------------*/
.hideicon {
	display:none !important;
}


/* ----------------------------------------------------------

	MEDIA QUERIES

------------------------------------------------------------*/
		@media screen and (max-width: 850px) {
			
			/* -- nav -- */
			#nav_container {
				text-align:left;
			}

			#nav_logo, .nav_link {
				float:none;
				text-align:left;
			}
			
			.nav_link {
				margin:15px auto 15px 25px;
				font-size:16px;
			}
			
			#nav_logo {
				margin:21px auto 20px auto;
				margin:21px 0 20px 25px;
			}
			
			#mobile_show, #mobile_hide  {
			    display:block;
		        position:absolute;
				top:13px;
				right:20px;
		        width:30px;
		        height:60px;
				overflow:hidden;
				z-index:110;
		    }
			
			#mobile_hide {
				height:18px;
				top:20px;
			}
			
			.grey_bar {
			    display:block;
				position:relative;
				top:10px;
			    width:100%;
			    height:3px;
			    margin:0 0 5px 0;
			    border-radius:0px;
			    background-color:#fff;
			}
			
			.header_txt {
				margin:0 auto;
			}
			
			.showicon {
				display:block !important;
			}	
			
			
			
			/* -- footer -- */
			#footer {
				height:150px;
				padding-top:15px;
			}

			#social-bar {
				display:block;
				position:relative;
				margin:0 auto 30px auto;
				width:260px;
			}

			#footer-logo {
				display:block;
				margin:30px auto 20px;
			}

			#legal-txt {
				font-size:9px;
				text-align:center;
			}
	
			#footer-logo {
				display:block;
				margin:30px auto 20px;
			}

			#legal-txt {
				font-size:9px;
				text-align:center;
			}
			
			
			/* -- top ten -- */
			.topten_container, .topsongs_container, .topgenres_container {
				width:90%;
			}
			
			.topten_item {
				margin:0 2.5% 33px 2.5%;
				padding:0;
				width:45%;
				max-width:none;
				overflow:visible;
			}
			
			.topten_caption {
				height:40px;
			}
			
			.col-center {
				margin:0 2.5% 33px 2.5%;
			}
			
			.top10_caret {
				width:28px;
			}
			
			
			
		}
		
		
		
		@media screen and (max-width: 700px) {
			
			/* -- text -- */
			h1, .genre-title {
				font-size:50px;
			}
			
			h2 {
				font-size:36px;
			}
			
			h3 {
				font-size:18px;
			}
			
			#header_img {
				display:none;
			}
			
			/* -- header -- */
			#header_mobile_img  {
				display:block;
				width:80%;
				margin:20px auto 30px auto;
			}
			
			
			/* -- top ten -- */
			.marquee_img {	
				display: block;
				margin:0px auto 0px auto;
				float:none;
				width:80%;
				height:auto;
				border-radius:400px;
			}
			
			.topten_marquee {
				display: block;
				position: relative;
			    width:100%;
			    height:auto;
			    margin:0px auto 0;
			    padding:0 0 40px 1%;
			    float:none;
				overflow:hidden;
	
				font-size:40px;
				font-weight:900;
				line-height:90%;
			}
			
			.topten_marquee p {
				margin-top:0;
				margin-bottom:10px;
			}
			
			.top10_txt {
				font-size:28px;
			}
			
			/* -- awards -- */
			#awards-img, .breakout, .top5-col {
				float:none;
				width:100%;
			}
			
			.genre-caret {
				width:36px;
				margin-right:10px;
				font-size:45px;
			}
			
			.top5-marquee-img {
				display:block;
				width:66%;
				margin:35px auto 0px auto;
			}
			
			.top5-title {
				font-size:28px;
			}
			
			h2.top5-title {
				font-size:36px;
			}
			
			/* -- top5 -- */
			.top5-marquee {
				padding-top:50px;
			}
			
			
		}