.small-box-wrapper{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.artic-box-small{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(90% / 2);
    height: 80px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 2px solid #eae8e8;
    margin: 0.5rem;
}
.artic-box-small:active, .artic-box-small:hover, .artic-box-small:focus{
  opacity: 0.9;
}
.svg-icons{ 
  background-color: transparent; 
  display: block;
  width: 28px !important; 
  height: 28px !important; 
  margin: 5px 1.2rem; 
  transition: .6s;}
  .svg-icons:hover, .svg-icons:focus, 
  .svg-icons:active{color: var(--main-color);}

.top_btn, #share-box{ 
  display: flex; 
  min-width: 100px;
  width: auto;
  user-select: none; 
  /* margin: 1rem auto 1rem 1rem;  */
  padding: 0rem 0.6rem; border-radius: 6px;  justify-content: center; 
  align-items: center;  
  cursor: pointer;  
  color: #535151;  
  background-color: #e4e4e2; 
  transition: .4s;}
#top_btn_hold{
  position: relative; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: auto; 
  /* background-color: rgb(69, 118, 118); */
  margin-bottom: 1rem;
  margin-top: 1rem;
}
#share-box:active, .top_btn:active, .top_btn:hover, .top_btn:focus, #share-box:hover, #share-box:focus{ background-color: var(--main-color); color: lavenderblush;}
#share, #b_and_dbtn{
  height: 34px; width: 26px; color: inherit;
}
.act_inner_btn{
  padding: 9px;
  font-size: 1.2rem;
  font-weight: bolder;
}
.artic-img{
    height: 100%;
    width: auto;
}
#ads_img_wrapp{
  display: flex; 
  opacity: 0.3; 
  position: absolute; 
  justify-content: center; 
  align-items: center;
  top: 0px; 
  left: 0px; 
  width: 100%; 
  height: 100%; 
  box-sizing: border-box; 
  overflow: hidden;
}
.my_list_a{
    text-decoration: none;
    color: inherit;
}
.art-img-box-small{
    display: flex;
    width: 60px;
    margin-left: 0.5rem;
    height: 60px;
    border-radius: 8px;
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    overflow: hidden;
    background-color: black;
}
.artic-box-title{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    margin: 0px;
    padding: 0.5rem;
    font-size: 1.1rem;
    font-weight: bolder;
    color: #252525;
    justify-content: center;
}
.small_artic_title{
    font-size: 0.9rem;
    color: #474649;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* buy and steram box.. */
#buy_banner{
  display: flex;
  width: 100%;
  height: 100%;
  left: 0px;
  justify-content: center;
  align-items: center;
  top: 0px;
  position: fixed;
  z-index: 1000;
}
#inner_buybox{
  display: flex;
  width: 95%;
  height: auto;
  /* background-color: black; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  position: relative;
}
.buy_icon{
  height: 20px;
  width: 20px;
  overflow: hidden;
  border-radius: 7px;
  position: relative;
  background-color: transparent;
  margin-right: 0.5rem;
}
.buy_wrapper{
font-size: 1rem; 
display: flex;
justify-content: center;
align-items: center;
font-weight: bolder; 
border-radius: 7px; 
padding: 0.5rem 1.5rem; 
margin: 0.5rem auto 0.5rem auto;
background-color: #ebeae8; 
color: #252525; 
text-decoration: none; 
transition: .5s; 
cursor: pointer;
}
.buy_wrapper:active, .buy_wrapper:hover, .buy_wrapper:focus{ 
  background-color: #d3d1d1;
}

/* social media accts.. */
#act_wrap{
     background-color: #fbfafa;
    position: relative;
    gap: 1rem;
    display: flex;
    padding: 0.3rem 1rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding: 1rem;
    border-radius: 0rem 1rem;} 
#act_hd{ margin: 1rem auto 0.5rem 1rem; color: #474649; font-size: 1.2rem; text-align: left;} .ex_accts{ font-size: 1rem; font-weight: bolder; border-radius: 7px; padding: 0.5rem 1.5rem; background-color: #ebeae8; color: #252525; text-decoration: none; transition: .5s; }.ex_accts:active, .ex_accts:hover, .ex_accts:focus{ background-color: #d3d1d1;}
 /* pop msgs stylings */
 #pop-ico{
    height: 40px;
    width: 40px; 
    box-sizing: border-box;
    border-radius: 20px;
    margin-bottom: 0.5rem; 
    color: inherit;
    background-color: inherit;
    overflow: hidden;
  }
  #pop-box{
    display: block; 
    width: auto;
    max-width: 200px;
    padding: 1rem;
    border-radius: 1rem;
    color: inherit;
    font-weight: bolder;
    font-size: 1.1rem;
    background-color: white; 
    box-shadow: 10px 10px 100px rgb(156, 156, 156);
    box-sizing: border-box; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 2000;
    transition: .3s;
}
.anim-pop-box{
    transform: scale(0);
    opacity: 0;
    animation: box-pop 0.5s linear 0s 1;
    animation-fill-mode: forwards;
    transition: .3s;
  }
  @keyframes box-pop {
    0%{
      transform: scale(0);
      opacity: 0;
    }100%{
      opacity: 1;
      transform: scale(1);
    } 
  }
  #pop-b-cover{
    color: #d0cfcf;
    display: none;
    justify-content: center;
    align-items: center; 
    width: 100%;
    height: 100%;
    position: fixed; 
    box-sizing: border-box;
    left: 0px; 
    top: 0px; 
    z-index: 200;
  }
 /* page top styling.. */
#page-topSect{
min-height: 300px; 
height: auto;
justify-content: flex-start; 
align-items: center; 
display: flex;
}
#topImgWrapper{
  border-radius: 50%; 
  width: 250px;
  height: auto; 
  overflow: hidden;
  margin:auto 0rem auto 1rem; 
  box-sizing: border-box;
  z-index: 1;
}
.bg_img_hug{
 width: 100%;
 height: auto;
}
#page-top-right-wrap{
  display: flex;
  flex-direction: column; 
  box-sizing: border-box;
  width: calc(100% - 300px);
  margin-left: 1rem;
  padding-right: 1rem;
  z-index: 1;
}
#img_view_wrapper{
  position: absolute; overflow: hidden; display: none; width: 100%; height: 100%; top: 0px;left: 0px; z-index: 100; padding: 2rem; box-sizing: border-box; justify-content: center; align-items: center;
}
#page-header{
font-size: 3.5rem; 
box-sizing: border-box; 
/* background-color: aliceblue; */
font-weight: 800;
line-height: 1.4 !important; 
padding: 2rem 0rem;
}
.small-info span::before{
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #444444;
  bottom: 2.5px;
  left: 0px;
}
.small-info span{
  height: 15px;
  margin: auto 0.5rem;
  padding-left: 14px;
  /* background-color: aqua; */
  position: relative;
  display: block;
}
.small-info{
font-size: 0.8rem;
display: flex;
justify-content: flex-start;
align-items: center;
font-weight: bold;
color: #474649;
width: 100%;
text-align: left;
position: relative;
padding: 0.3rem 0rem;
}
/* track box stylings.. */
.track-wrapper{
display: inline-block;
width: 300px;
height: auto;
box-shadow:0px 0px 5px #a0a1a1;
box-sizing: border-box;
color: #474649;
text-decoration: none;
margin: 1rem;
}
.track-wrapper:active, .track-wrapper:hover, .track-wrapper:focus{
    opacity: 0.9;
}
.track-img-wrapper{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: auto;
width: 100%;
height: auto;
background-color: black;
box-sizing: border-box;
overflow: hidden;
}

.track-title{
/* display: block; */
position: relative;
width: 100%;
height: 60px;
font-size: 1.3rem;
text-align: left;
font-weight: bold;
padding: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
box-sizing: border-box;
max-width: 100%;
margin-top: 5px;
margin: 0px auto;
}

/* artist box stylings.. */
.artist-wrapper{
display: inline-block;
width: 250px;
height: auto;
background-color: transparent;
box-sizing: border-box;
margin: 0.5rem;
position: relative;
text-decoration: none;
}
.artist-wrapper:active, .artist-wrapper:hover, .artist-wrapper:focus{
    opacity: 0.8;
}
.artist-img-wrapper{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: auto;
width: 250px;
height: 250px;
border-radius: 125px;
background-color: black;
box-sizing: border-box;
overflow: hidden;
}

.artist-name{
display: block;
position: relative;
width: 100%;
height: auto;
font-size: 1.3rem;
text-align: center;
font-weight: bold;
/* background-color: rgb(120, 58, 58); */
box-sizing: border-box;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-top: 5px;
margin: 0px auto;
}

@media screen and (max-width:1026px){
#topImgWrapper{
width: 220px;
}
#page-header{
font-size: 2.5rem !important; 
font-weight: 800; 
line-height: 1.3;
}
}

@media screen and (max-width:950px){
#page-topSect{
height: auto; 
padding-top: 2rem;
/* background-color: green;  */
justify-content: center; 
align-items: flex-start; 
flex-direction: column;
}
#topImgWrapper{
width: 200px;
}
#page-top-right-wrap{
padding: 1rem;
width: 100%;
margin: auto;
position: relative;
left: auto;
box-sizing: border-box;
}
#page-header{
font-size: 1.5rem !important; 
font-weight: 700; 
line-height: 1.3;
}
/* artist box stylings.. */
.artist-wrapper{
width: calc(98% / 3);
margin:0.5rem 0rem;
}
.artist-img-wrapper{
width: 70%;
border-radius: 50%;
}
.artist-name{
font-size: 1.1rem;
}
/*Track styling..  */
.track-wrapper{
width: calc(98% / 2 - 20px);
margin: 5px;
}
}

@media screen and (max-width:600px){
#topImgWrapper{
width: 200px;
}
#page-top-right-wrap{
padding: 1rem;
width: 100%;
left: auto;
box-sizing: border-box;
}
#page-header{
font-size: 1.5rem !important; 
font-weight: 700; 
line-height: 1.3;
}
.artic-box-small{
width: 99%;
height: 80px;
margin: 1rem auto;
}
}

@media screen and (max-width:420px){
  .bg_img_hug{
    width: auto;
    height: 100%;
   }
/* page top styling.. */
#page-topSect{
height: auto; 
/* background-color: green;  */
justify-content: center; 
align-items: center; 
margin: auto;
flex-wrap: wrap;
max-width: 100% !important;
box-sizing: border-box;
padding-top: 2rem !important;
}
#topImgWrapper{
width: 55%; 
margin:auto; 
}
#page-top-right-wrap{
position: relative;
padding: 1rem;
width: 100%;
left: auto;
box-sizing: border-box;
}
#page-header{
font-size: 2.5rem !important; 
font-weight: 800; 
line-height: 1.1;
padding: 1rem 0rem !important;
box-sizing: border-box;
}
/* artist box stylings.. */
.artist-wrapper{
display: block;
width: 100%;
margin: 0.5rem auto;
position: relative;
}
.artist-img-wrapper{
width: 70%;
border-radius: 50%;
}

.artist-name{
font-size: 1.2rem;
text-overflow: ellipsis;
overflow: clip;
white-space: normal;
margin-top: 5px;
margin: 0px auto;
}
.txt{
padding: 0rem 1rem !important;
}
.track-title{
  height: auto !important;
  white-space: normal;
  display: block;
}
/* 
table{
 padding: 0rem 1rem !important;

} 
Track styling..  */
.track-wrapper{
display: block;
width: 90%;
height: auto;
box-sizing: border-box;
margin: 1rem;
}
#share, #b_and_dbtn{
  height: 24px; width: 20px;
}
.top_btn, #share-box{ 
  min-width: none;
  padding: 0rem 0.4rem; 
}
#top_btn_hold{
 flex-wrap: wrap; 
}
.act_inner_btn{
  padding: 5px;font-size: 1rem;font-weight: bolder;
}
}