/* *********************************
	GENERAL
***********************************/
	body .scrolling-wrapper::-webkit-scrollbar {width: 8px; height: 6px; background:rgba(16,16,16,0); }
	body .scrolling-wrapper::-webkit-scrollbar-track {width: 8px; height: 6px; background-color:rgba(16,16,16,0); }
	body .scrolling-wrapper::-webkit-scrollbar-thumb {border-radius: 4px; background-color:rgba(35,35,35,0);}
	
	body .scrolling-wrapper:hover::-webkit-scrollbar {width: 8px; height: 6px; background:rgba(16,16,16,0);}
	body .scrolling-wrapper:hover::-webkit-scrollbar-track {width: 8px; height: 6px;  background-color:rgba(16,16,16,0);}
	body .scrolling-wrapper:hover::-webkit-scrollbar-thumb {border-radius: 4px;  background-color:rgba(var(--sc_background_30),1);}



/* *********************************
	PAGE HEAD
***********************************/  
    #sclk_pageHead.sclk_pageHead_homepage {
        background-image: url('/images/stock/cuts/97.jpg');
    }
    

/* *********************************
	Big Search Field in page head
***********************************/
    #sclkSearch_background {
        position: absolute;
        top:0; right:0; bottom:0; left:0;
        z-index: 2;
        background: rgba(0,0,0,0.6);
        display:none;
    }
    #search-description {
        position: absolute;
        bottom: 175px;
        white-space: nowrap;
        font-size: 25px; font-weight: normal;
        text-align: left; 
        color: rgba(255,255,255,0.8);
        opacity: 0;
    }
    /* search box */
    #search-container {
        width: 450px; box-sizing: border-box;
        padding: 8px;
        display: flex; align-items: center;
        background: rgba(255,255,255, 0.92);
        box-shadow: 0px 8px 15px rgba(0,0,0, 0.3);
        border-radius: 3px;
    }
    #search-container #homepage-searchbox {
        width: 92%;
        padding: 0; margin: 0; box-sizing: content-box;
        font-size: 18px;
        color: rgb(30,30,30);
        background: none; border: none;
        outline:none;
    }
    #search-container #search-icon {
        width: 8%;
        text-align: right;
        font-size: 28px; color: rgba(0,0,0,0.15);
        cursor: pointer;
    }
    
    /* media */
    @media (max-width:1200px) {
        #search-description { bottom: 160px; }
    }
    @media (max-width:900px) {
        #search-description { bottom: 145px; }
    }
    @media (max-width:600px) {
        #search-description { bottom: 140px; font-size: 18px; }
        #search-container {width: 320px; }
        #search-container #homepage-searchbox { font-size: 17.5px; }
        #search-container #search-icon { font-size: 20px; }
    }


/* *********************************
	Bigger Charts All
***********************************/
	#hp_chartsWrapper {
        width: 100%;
		padding-bottom: 50px;
    }
    #hp_chartsWrapper:after {
        content: "";
        display: table;
        clear: both;
    }
    #hp_chartsListed {
        max-width: 1500px; max-height: 600px;
        overflow: hidden;
        margin: 0 auto;
        display: flex; flex-wrap: wrap; justify-content: center;
        transition: 1.0s ease-in-out;
    }
    #hp_chartsBtn_more {
        width:200px; height: 16px;
        padding: 10px; margin: 20px auto;
        background: rgb(25,25,25); color: rgba(255,255,255,0.7);
        text-align: center; font-size: 13.5px;
        transition: 0.1s;
        cursor: pointer;
    }
    #hp_chartsBtn_more:hover { background: rgb(45,45,45); color: rgba(255,255,255,1); }
	
	/* each genre */
    a.hp_genreBox {
        text-decoration: none;
    }
    .hp_genreBox {
        width: 200px;
        margin: 25px;
        cursor: pointer;
    }
    .hp_genreBox .hp_genrePic {
        height: 200px;
		border-radius: 8px;
        background: center center no-repeat; background-size: cover;
        opacity: 0.9;
        transition: 0.1s;
    }
    .hp_genreBox .hp_genreName {
        padding: 10px 0 5px 0;
        color: rgba(255,255,255,0.90);
        font-size: 15.4px; font-weight: 500;
        transition: 0.1s;
    }
    .hp_genreBox .hp_genreNameSub {
        padding: 0;
        color: rgba(170,170,170,1.00);
        font-size: 13.5px;
        transition: 0.1s;
    }
    /* genre box hover */
    .hp_genreBox:hover .hp_genrePic { opacity: 1; }
    .hp_genreBox:hover .hp_genreName { color: rgba(255,255,255,1.00); }
    
    /* media */
	@media (max-width: 1400px) {
        #hp_chartsListed { max-height: 520px; }
        .hp_genreBox { width: 175px; margin: 18px; }
        .hp_genreBox .hp_genrePic { height: 175px; }
    }
    @media (max-width: 900px) {
        #hp_chartsListed { max-height: 660px; }
        .hp_genreBox { width: 150px; margin: 15px; }
        .hp_genreBox .hp_genrePic { height: 150px; }
        .hp_genreBox .hp_genreName { padding: 5px 0; font-size: 14.5px; }
    }
    @media (max-width: 600px) {
        #hp_chartsListed { max-height: 490px; }
        .hp_genreBox { width: 100px; margin: 10px; }
        .hp_genreBox .hp_genrePic { height: 100px; opacity: 1; }
        .hp_genreBox .hp_genreNameSub { font-size: 12.6px; }
    }
    @media (max-width:360px) {
        .hp_genreBox { width: 96px; margin: 10px; }
    }
	

/* *********************************
	Content sections
***********************************/
    .hp_sectionsWrapper {
        width: 1500px;
		max-width: 98vw;
		margin: 0 auto;
    }
    .hp_sectionsWrapper:after {
        content: "";
        display: table;
        clear: both;
    }
    .hp_section {
        overflow: hidden;
        margin: 0 auto 30px auto; 
        padding: 10px 20px;
		border-radius: 10px;
    }
    
    @media (max-width:600px) {
       .hp_section { padding: 10px; margin: 0 auto 20px auto; }
    }
	
	/* VISUALS */
	.hp_section.hp_background_red_gradient {
		background: rgb(134,9,9); 
		background: linear-gradient(175deg, rgba(134,9,9,0.84) 0%, rgba(0,0,0,1) 100%);
	}
	.hp_section.hp_background_blue_gradient {
		background: rgb(10, 45, 60); 
		background: linear-gradient(175deg, rgb(25 125 155 / 84%) 0%, rgba(0,0,0,1) 100%);
	}
    
    /* ELEMENTS */
    .hp_section_header {
        padding: 0 0 20px 0;
        font-size: 25px;
        color: rgba(255,255,255,0.90);
        position: relative;
    }
    .hp_section_subheader {
        display: inline-block;
        padding-left: 10px;
        font-size: 14.5px;
        color: rgb(130,130,130);
    }
    .hp_section_headerLink {
        position: absolute;
        right: 0; top: 10px;
        display: flex; align-items: center;
    }
    .hp_section_headerLink span {
        font-size: 13.5px; letter-spacing: 0.6px;
        font-weight: 500;
        text-transform: uppercase; white-space: nowrap;
        opacity: 0.6;
    }
    .hp_section_headerLink span:hover {
        opacity: 1;
    }
    
    @media (max-width:600px) {
       .hp_section_subheader { display: block; padding-left: 0; }
    }


 /* *********************************
	Recent favorites on top of page 
***********************************/  
    #hp_recentFavs_box {
        width: 100%;
        height: 160px;
        margin-bottom: 20px;
        overflow: hidden;
        display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-column-gap: 40px; grid-row-gap: 20px;
    }
    .hp_recentFavs_item {
        width: 100%; height: 70px;
        background: rgb(var(--sc_background_40));
        color: rgb(var(--sc_primary_text));
        border-radius: 5px;
        overflow: hidden;
        transition: 0.2s;
        display: grid; grid-template-columns: 70px 1fr 60px;
        grid-column-gap: 20px;
    }
    
    .hp_recentFavs_item_picture {
        background: center center no-repeat; background-size: cover;
    }
    .hp_recentFavs_item_text {
        display: grid; 
        align-items: center;
    }
    .hp_recentFavs_item_title {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
    .hp_recentFavs_item_subheader {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        color: rgb(90,90,90);
    }
    .hp_recentFavs_item_play {
        display: flex; align-items: center; justify-content: center;
        font-size: 40px;
        opacity: 0;
        cursor: pointer;
        --fa-secondary-color: rgb(65 131 168); /* custom property font-awesome */
        --fa-secondary-opacity: 0.9; /* custom property font-awesome */
    }
    
    /* hover */
    .hp_recentFavs_item:hover {
        background: rgb(60,60,60);
    }
    .hp_recentFavs_item:hover .hp_recentFavs_item_subheader {
        color: rgb(170,170,170);
    }
    .hp_recentFavs_item:hover .hp_recentFavs_item_play {
        opacity: 0.6;
    }
    .hp_recentFavs_item:hover .hp_recentFavs_item_play:hover {
        opacity: 1;
    }
    
    /* media */
    @media (max-width:1300px) {
       #hp_recentFavs_box { grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; }
    }
    @media (max-width:1000px) {
       #hp_recentFavs_box { height: 260px; grid-template-columns: 1fr 1fr; }
    }
    @media (max-width:800px) {
       .hp_recentFavs_item_subheader { display: none;}
    }
    @media (max-width:600px) {
       #hp_recentFavs_box { height: 230px; grid-column-gap: 15px; }
       .hp_recentFavs_item { height: 60px; grid-template-columns: 60px 1fr; grid-column-gap: 7px; }
       .hp_recentFavs_item_text { padding-right: 5px; }
       .hp_recentFavs_item_play {display: none;}
    }


 /* *********************************
	Box with listed items (scrolling) 
***********************************/    
    .hp_scrolling_box {
        width: 100%; height: 270px;
        margin: 0 auto;
    }
	.hp_scrolling_box.higherBox {  /* scrolling box with more height */
        height: 290px;
    }
    .hp_scrolling_box_item {
        width: 180px;
        margin: 15px;
        overflow: hidden;
        text-align: center;
    }
    .hp_scrolling_box_item .hpPicture {
        height: 180px;
        background: center center no-repeat; background-size: cover;
		border-radius: 5px;
        opacity: 0.9;
        transition: 0.15s;
        cursor: pointer;
    }
    .hp_scrolling_box_item .hpName {
        padding: 8px 0;
        color: rgba(255,255,255,0.90);
        font-size: 16px;
        text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hp_scrolling_box_item .hpSubheader {
        font-size: 14.5px;
        text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        cursor: pointer;
        color: rgb(120,120,120);
        transition: 0.15s;
    }
    .hp_scrolling_box_item .hpSubheader_alt1 {  /* tags on songInfo_relatedSongs page */
        font-size: 13px;
        padding-top: 2px;
        opacity: 0.8;
        text-align: left;
    }
	
	/* featured spot */
	.hp_scrolling_box_item.hp_box_item_featured { width: 280px; }
	.hp_scrolling_box_item.hp_box_item_featured .hpPicture { border-radius: 15px; }
	
    
    /* hover*/
    .hp_scrolling_box_item:hover .hpPicture { opacity: 1; }
    .hp_scrolling_box_item:hover .hpName { color: rgba(245,245,245,1); }
    .hp_scrolling_box_item:hover .hpSubheader { color: rgba(245,245,245,1); }
    
    @media (max-width:1520px) {
        .hp_scrolling_box_item { width: 170px; }
        .hp_scrolling_box_item .hpPicture { height: 170px; }
    }

	@media (max-width:600px) {
        .hp_genresBox { padding: 5px 10px 20px 10px; }

        .hp_scrolling_box { width: 100%; height: 240px; }
        .hp_scrolling_box_item { width: 170px; max-width: 42vW; margin: 8px; }
			.hp_scrolling_box_item.hp_box_item_featured { width: 170px; max-width: 42vW; }
			.hp_scrolling_box_item.hp_box_item_featured .hpPicture { border-radius: 5px; }
        .hp_scrolling_box_item .hpPicture { height: 170px; max-height: 43vW; border-radius: 5px; opacity: 1; }
        .hp_scrolling_box_item .hpName { padding: 8px 0 5px 0; }
		/* made for you pages */
        .mfy_section .hp_scrolling_box_item { margin: 6px; }
			.mfy_section2 .hp_scrolling_box_item.hp_box_item_featured { width: 150px; max-width: 40vW;  }
        .mfy_section2 .hp_scrolling_box_item .hpPicture { height: 100px; opacity: 1; }
        .mfy_section2 .hp_scrolling_box_item .hpName { padding: 8px 0 5px 0; }
		.mfy_section2 .hp_scrolling_box_item_higher { height: 170px; }
    }

    
/* *********************************
	Homepage footer
***********************************/
    #homepageFooterWrapper {
        width: 100%;
    }
    #homepageFooter {
        max-width: 1500px; box-sizing: border-box; 
        margin: 0 auto; padding: 90px 0 80px 10px;
    }
	
	/* apps */
	#homepageFooter_apps {
		display: flex;
		flex-direction: row;
		gap: 40px;
		padding-bottom: 40px;
	}
	#homepageFooter_apps img { height: 54px; }
	@media (max-width:600px) {
		#homepageFooter_apps { flex-direction: column; gap: 30px; }
	}
	
	/* text */
    #homepageFooter span {
        padding-right:15px;
    }
    #homepageFooter2 span a {
        color:#ccc; text-decoration:none;
    }
    #homepageFooter2 span a:hover {
        color:#f2f2f2;
    }
    #homepageFooter div {
        padding-top:15px;
        color:#777; font-size:12.5px;
    }