:root { 
  --main-color: #531680; 
  --main-color2: #175563; 
  --dark-color: #000;
  --fair-dark-color: #222121;
  --white-color: #fff;
  --fair-white-color: #eeecec;
  --dim-white-color: #afafaf;
} 
.cta-btn {
  padding: 12px 30px;
  background-color: var(--main-color);
  color: var(--white-color);
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bolder;
  cursor: pointer;
  transition: background 0.3s ease;}
.cta-btn:hover {background-color: var(--main-color2);}
#nav-wrapp{display: flex; justify-content: space-between; width: 100%; padding: 0px 1rem; align-items: center; box-sizing: border-box; margin: auto;}
body {background-color: var(--fair-white-color); margin-top: 60px; margin:0px; } .ads_box{position: relative; display: block; margin-right: auto; height: 200px; margin-left: auto; width: 96%; outline: none; text-decoration: none; border-radius: 5px; }.view_icon{position: absolute; bottom: 2px; right: 65px; border-radius: 10px; height: 20px;  width: auto; }#springmp3_icon{position: relative;  height: 200px;  width: auto;  border: none;  outline: none;  border-radius: 100px; }.singer_photo{position: absolute;  bottom: 50px;  right: 10px; border-radius: 20px; height: 40px; width: auto; }.singer{position: absolute; bottom: 25px; right: 3px; height: 25px; width: 60px; text-align: center; outline: none; cursor: pointer; background-color: transparent; display: block;
    color: rgb(66, 65, 65); text-transform: capitalize; font-size: 10px; z-index: 10; text-decoration: none; }.singer:active, .singer:hover, .singer:focus{text-decoration: underline; }.view{position: absolute; bottom: -8px; right: 30px; height: 25px; width: 30px; color: rgb(66, 65, 65); font-size: 10px; }#sc-scrs0 {position: relative; width: 90%; height: 250px; max-width: 400px; background-color: transparent; left: 0px; top: 0px; overflow: hidden; user-select: none; box-sizing: border-box; border: none; outline: none; display: block; margin-left: auto; margin-right: auto; }#sc-scrs {position: absolute; width: 300%;  height: 100%; background-color: var(--main-color); left: 0px; top: 0px; overflow: hidden; display: flex; transition: .65s; } .dv_scrolls{height: 100%; top: 0px; left: 0px; border: none; transform: scale(.9); transition: .65s; background-color: var(--color-white); transform: scale(.4); }#btn-lscrs, #btn-rscrs {position: absolute; width: 50px; height: 100%; background-color: transparent; border: none; outline: none; z-index: 4; }#btn-lscrs {left: 0px; }#btn-rscrs {right: 0px; }
#nv_scrstp {position: absolute; width: 100%; left: 0px; top: 2px; height: 6px; background-color: transparent ; z-index: 4; display: flex; justify-content: center; align-items: center}.dv_nv_scrstp {height: 1.5px; margin: 0px 2px; background-color: #aaa; opacity: .5; transition: .5s; } .my_btn{ position: absolute; bottom: 10px; display: block; height: 40px; width: 200px; font-weight: bolder; border: none; font-size: 18px; box-sizing: border-box; padding-top: 10px; text-decoration: none; background-color: var(--main-color); color: var(--fair-white-color); text-transform: capitalize; left: 40px; border-radius: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .3s; } .my_btn:active, .my_btn:hover, .my_btn:focus{ box-shadow: 0px 1px 3px var(--dark-color); text-decoration: underline; color: #b2bdb2; } .my_heading{ font-size: 19px; color: #666677; }  #my_sect_body{  background-color: var(--fair-white-color); margin: 0px; position: absolute; width: 100%; padding:0px; height: auto; text-align: center; left: 0px; box-sizing: border-box; }  .sect_holder{ position: relative; top: 10px; display: flex; gap: 1rem; padding: 0px 1rem; align-items: flex-start; height: auto; width: 100%; background-color: inherit; max-width:1100px; margin:auto; padding-bottom: 1rem; } .big_sect{ position: relative; height: auto; background-color: var(--white-color); top: 0px; box-sizing: border-box; display: block; width:65%; } #side_sect{  position: sticky; background-color: transparent; box-sizing: border-box; top: 70px; width: 32%; padding-bottom: 1rem; border-radius: 3px;} #n-p-btn-box{ display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: center;  gap: 0.4rem;  margin: 1.2rem auto; } .next-prv-btn{ color: gray; font-size: 1.3rem; text-decoration: none; text-align: center;  background-color: inherit; min-width: 70px; transition: .5s; } .next-prv-btn:active, .next-prv-btn:focus, .next-prv-btn:hover{ color: var(--main-color); text-decoration: underline; }#sr-ico{ height: 26px; width: 26px; } .drop-d-boxs ul{ display: flex; flex-direction: column; padding:1rem 0.3rem 0.3rem 0.3rem; box-sizing: border-box; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0.6rem; margin-inline-end: 0.6rem; padding-inline-start: 0px;  } 
    .drop-d-boxs{ display: block; position: absolute;  overflow: hidden; height: 0px;  width: auto;  border-radius: 0px 0px 7px 7px; left: -100px;  padding: 20px auto 20px auto; background-color: var(--color-white); box-shadow: 0px 3px 3px #8d8c8c; transition: .3s; top: 68px; } .slide_icon{ height: 24px; box-sizing: border-box; width: 24px; } .show_li a{ display: flex; gap: 0.5rem; justify-content: center; align-items: center; text-decoration: none; color: inherit; } .show_li a:active, .show_li a:hover, .show_li a:focus{color: var(--main-color);} .show_li{ font-size: 1.1rem; position: relative; height: auto; width: 300px; color: #525050; box-sizing: border-box; padding: 10px; margin-top: 10px; cursor: pointer; text-transform: capitalize; } .show_li:active, .show_li:hover, .show_li:focus{color: var(--main-color);} .my_list{ position: relative; background-color: transparent; text-align: left; width: 90%; max-width: 500px; margin: 10px auto 10px 10px; height: auto; padding: 10px; box-sizing: border-box; border-radius: 5px; transition: .3s; } .my_list:hover, .my_list:focus, .my_list:active{ background-color: #ededed; } .my_list_a{text-decoration: none; color: #727171; transition: .3s; width: 100%; height: 100%; display: block; position: relative; font-weight: bolder; font-size: medium; } .my_list_a:hover, .my_list_a:focus, .my_list_a:active{ text-decoration: underline; color: #332e2e; } #s_alb_hold{position: relative; height: 265px; width: 45%; min-width: 320px; background-color: rgb(243, 243, 248); margin: 10px 10px 10px 10px; box-sizing: border-box; border-radius: 5px; text-align: left; display: inline-block; overflow: hidden; transition: .3s; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); }#s_alb_hold:hover, #s_alb_hold:active, #s_alb_hold:focus{opacity: 0.8; } #alb_pics_hol{ position: absolute; height: 220px; left: 0px; top: 0px; overflow: hidden; box-sizing: border-box; background-color: transparent; width: 100%; }#alb_icon{ height: auto; width: 100%;  position: absolute; top: 0px; left: 0px; }#ald_rel_date{position: absolute; bottom: 5px; background-color: transparent; left: 40px; right: 5px; height: 35px; box-sizing: border-box; padding: 7px; text-overflow: ellipsis; white-space: nowrap; }#t_hold{position: absolute; height: 35px; width: 35px; left: 5px; box-sizing: border-box; background-color: inherit; bottom: 5px; }#t_h{position: absolute; height: 24px; width: 24px; left: 2px; box-sizing: border-box; background-color: transparent; bottom: 5.5px; border-radius: 12px; border: 2px solid #383737; }#t_1{position: absolute; height: 8px; width: 2px; left: 8px; box-sizing: border-box; background-color: #383737; bottom: 8.2px; border-radius: 1px; } #t_2{position: absolute; height: 8px; width: 2px; left: 11px; box-sizing: border-box; background-color: #383737; bottom: 2px; transform: rotate(120deg); border-radius: 1px; } /* new update.. */ .co_box{  background-color: inherit; box-sizing: border-box; text-align: left; padding-top: 10px; overflow: hidden; }.co_header{  text-transform: capitalize; height: auto; width: 100%; margin-top: 0px; margin-bottom: 0rem; box-sizing: border-box; color: #e6dbdb; font-size: larger; }.g_links{ font-size: 1.1rem; color: #d4d3d3; text-decoration: none; transition: .3s; } .my_f_list li{ text-transform: capitalize; text-align: left; font-size: 1.2rem; margin-bottom: 8px; color: #d4d3d3; }
 /* end of update.. */ .g_links:hover, .g_links:active, .g_links:focus{color: #e4fafa; transform: scale(0.95); text-decoration: underline; } #alb_lst_hold{position: relative; width: 60%; height: auto; padding: 10px; box-sizing: border-box; }.alb_link{text-align:left; color:#343435; font-size: large; text-decoration: none; text-transform: capitalize; font-weight: bold; }.alb_link:hover, .alb_link:active, .alb_link:focus{text-decoration: underline; }.ald_list{position: relative; margin: 20px; text-align: left; left: 20px; text-decoration: none; }.my_headers{ position: relative; width: 100%; left: 0px; height: auto; box-sizing:border-box; font-size: xx-large; text-align:center; color:#535151; padding:20px 10px 0px 10px; display: block; }.my_box2{ position: relative; overflow: hidden; height: auto; width: 90%; min-height: 60px; margin-top: 20px; box-sizing: border-box; left: 10px; box-sizing: border-box; box-shadow: inset 1px 1px 11px #888c8f3b; } .share_btn{position:relative; padding:10px 25px 10px 25px; box-sizing:border-box; font-weight:bolder; background-color: var(--main-color); color:aliceblue; font-size:medium; width:fit-content; height:60px; border-radius:20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .btn2{ position: absolute; bottom: 10px;  display: block;  height: 40px;  width: 200px; font-weight: bolder;  border: none;  font-size: 18px;  box-sizing: border-box;  padding: 10px 20px 10px 20px;  text-decoration: none;  background-color: var(--main-color);  color: var(--fair-white-color);  text-transform: capitalize; right: 20px; border-radius: 20px; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  transition: .3s; }.btn2:hover, .btn2:active, .btn2:focus{ text-decoration: underline; background-color:  #176f83; } .singer_n{  font-size: 14px; color: #666; } #l_cover{ position: absolute; height: 40px; width: 40px; box-sizing: border-box; background-color: transparent; border-radius: 20px; left: 37px; overflow: hidden; top: 10px; }.l_s{ position: absolute; left: -45px; height: 60px; width: 65px; background-color: var(--white-color); top: 5px; transform: rotate(56deg); z-index: 3; }.r_s{ position: absolute; right: -45px; height: 60px; width: 65px; background-color: var(--white-color); bottom: 5px; transform: rotate(56deg); z-index: 3; } .my_b_head{ height: 44px; padding:14px; font-size:medium; position: absolute; left: 10%; top: 0px; width: 80%; text-transform: capitalize; box-sizing: border-box; background-color: transparent; margin-top: 0px; overflow: hidden; color: #f5f5f5; text-overflow: ellipsis; }.b_cov{ position: relative; width: 80%; margin-top: 10px; max-width: 400px; margin-left: auto; margin-right: auto; background-color: var(--main-color2); height: 44px; white-space: nowrap; padding: 10px; box-sizing: border-box; overflow: hidden; } .my_s_holder{ position: relative; height: 120px; width: 96%; min-width: 250px; background-color: transparent; margin: 10px 10px 10px 10px; box-sizing: border-box; border-radius: 5px; text-align: left; display: inline-block; transition: .3s; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); } .my_s_holder:hover, .my_s_holder:active, .my_s_holder:focus{opacity: 0.8;} .img_holder{ position: absolute; height: 120px; left: 5px; background-color:var(--dark-color); top: 5px; border-radius: 60px; overflow: hidden; box-sizing: border-box; background-color: transparent; width: 100px; } .my_s_title {  position: absolute; height: 60px; left: 120px; width: auto; top: 15px; box-sizing: border-box; right: 5px; color: #1d1c1c; background-color: transparent; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .my_s_icon { height: 100%; width: auto; position: absolute; min-width: 100px; top: 0px; left: 0px; background-color: var(--dark-color); }.singer_n{ font-size: 14px; color: #666; } /* Styling for ads */ .ad_body{position: relative; display: inline-block; background-color:rgba(245, 245, 245, 0.637); margin-top: 20px; height: 200px; width: 90%; max-width: 300px; min-width:200px; } .ad_image{ position: absolute; display: block; top: 0px; min-height: 180px; height: auto; width: 100%; }.ads_txt{position: absolute; display: block; bottom:0px; z-index: 2; width: 100%; height:auto; background-color:azure; color:#17171f; font-size:18px; font-weight:bolder; } 
 /* search styling */ 
 #search_field{ height:32px; max-width: 700px; min-width: 150px; width: 60%; position: fixed; box-sizing:border-box; display: block; top: 19px; background-color: #8dc6d3; color:#85719e; Padding-left: 8px; padding-right: 50px; font-size: 15px; z-index: 57; border-radius: 4px; right: 98px; outline: none; transform: scale(0); border: none; } 
 #submit{ height:28px; width: 60px; position: fixed; box-sizing:border-box; display:block; border: none; top: 30px; cursor: pointer; right:100px; background-color:var(--fair-white-color); color:var(--main-color); top: 21px; z-index: 60; border-radius: 5px; outline: none; transform: scale(0,0); }  
 #search_icon_holder{ height: 40px; width: 40px; box-sizing: border-box; display: flex; position: relative; justify-content: center; align-items: center; background-color: #eeeded; border-radius: 20px; transition: .3s; cursor: pointer; } #search_icon_holder:hover, #search_icon_holder:active, #search_icon_holder:focus{ background-color: #e4e1e1; }
 #search_icon1{ height:15px; width: 15px; position:absolute; box-sizing:border-box; display:block; background-color: transparent; left: 11px; border-radius: 7.5px; border: 3px solid #776f6f; top: 11px; }  #search_icon2{ height:3px; width: 9px; position:absolute; box-sizing:border-box; display:block; background-color: #776f6f; right: 11px; border-radius: 3px; bottom: 11px; transform: rotate(50deg); } #inner-sbar{display: flex; gap: 1rem; max-width: 100%; padding:1.5rem 1rem; box-sizing: border-box;flex-direction: column;} #side_bar_content{top: 70px; position: fixed; height: 100%; z-index: 100; left: 0px; width: 70%; color: #2c2929; max-width: 330px; display: block; box-sizing: border-box; background-color: var(--main-color); overflow: hidden; transform: scale(0.0, 1); transition: .3s;} .side_bar_article{display: flex; gap: 0.4rem; padding: 5px; align-items: center; background-color: inherit; color: #f0ebeb; font-weight: bolder; font-size: 1rem; transition: .3s; text-decoration: none;} .side_bar_article:hover, .side_bar_article:focus, .side_bar_article:active{color: #dbdfdf; transform: scale(0.9); } #side_bar {height: 40px; width: 40px; outline: none; border-radius: 20px; background-color: #eeeded; margin-right: 5px; box-sizing: border-box; transition: .3s; z-index: 200; cursor: pointer; } #side_bar:hover, #side_bar:focus, #side_bar:active{ background-color: #e6e3e3; } #icon1 { position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 10px auto 2px auto; border-radius: 2px; transition: .3s; } #icon2 { position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 4px auto 2px auto; border-radius: 2px; transition: .3s; }#icon3 {position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 4px auto 10px auto; border-radius: 2px; transition: .3s; }#cover{position: fixed; height: 100%; width: 100%; background-color: transparent; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 90; }#cover2{position: fixed; height: 100%; width: 100%; background-color: transparent; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 90; } #small_cover1{ position: fixed; height: 35px; width: 35px; background-color: transparent; right: 50px; display: none; top: 43px; z-index: 170; } #small_cover2{ position: fixed; height: 35px; width: 40px; background-color: transparent; right: 5px; display: none; top: 44px; z-index: 240; } 
 #base_header { position: fixed; width: 100%; height: 70px; z-index: 42; background-color: var(--white-color); margin-left: 0px; border-bottom: 1px solid #dddcdc; top: 0px; display: flex;} 
 #site_name {height: 40px; width: auto; font-weight: bolder; box-sizing: border-box;} 
 /* flash Msg style */
#flashMsgBoxWrapp{
    overflow: hidden;
    position: fixed;
    box-sizing: border-box;
    z-index: 2000;
    display: none;
    right: 10px;
    top: 70px;
    background-color: var(--white-color);
    height: max-content;
    transition: 0.6s;
    box-shadow: 0px 0px 5px #b8b8b8;}
  #flashMsgBox{
    font-weight: 500;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    min-width: 260px;
    max-width: 500px;
    box-sizing: border-box;
    font-size: 14px;
    background: var(--color-white);
    padding: 10px 10px 10px 12px;
    border-radius: 5px;
    border-left: 7px solid #999;}
  .flash-ss{ border-left: 7px solid #178036 !important;
  color: #178036 !important;
  box-shadow: 0px 1px 3px #178036 !important;}
  .flash-fl{ border-left: 7px solid #e41616 !important;
  box-shadow: 0px 1px 3px #e41616 !important;
  color: #e41616 !important; }
  .flash-wrn{ border-left: 7px solid #e98818 !important;
  color: #e98818 !important;
  box-shadow: 0px 1px 3px #e98818 !important;}
  .flash-inf{ border-left: 7px solid #175194 !important;
  box-shadow: 0px 1px 3px #175194 !important;
  color: #175194 !important; }
 .nav_ico{height: 20px; width: 20px; box-sizing: border-box; } .my_nav_links {text-transform: capitalize; position: relative; font-size: 18px; width: 95px; font-weight: lighter; display: flex; gap: 5px; justify-content: center; align-items: center; height: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 31; color: #3b3b3b; background-color: transparent; border: none; outline: none; box-sizing: border-box; transition: .09s; cursor: pointer; } .nav_a_tag { text-decoration: none; } .my_nav_links:hover, .my_nav_links:active, .my_nav_links:focus{  background-color: #eeeeed; color: var(--main-color); } 
 #my-navbar {background-color: inherit; white-space: nowrap; height: 70px; width: auto; display: flex; justify-content: center; align-items: center; box-sizing: border-box; z-index: inherit; align-self: flex-end;} 
 .sbar_group1{display: none; }  /* footer and contact info styling section... */#notif_box {position: fixed; height: auto; background-color: azure; color: #3f3e3e; z-index: 100; display: none; left: 0px; width: 100%; min-width: 200px; padding-bottom: 50px; bottom: 1px; box-sizing: border-box; padding-top: 7px; text-align: left; }  #ok{height: 34px; width: 120px; border-radius: 17px; padding: 7px; margin: auto; position:relative; bottom: 4px; cursor: pointer; font-weight: bold; font-size: 15px; color: #eaeeea; background-color: var(--main-color); box-sizing: border-box; border: none; outline: none; } #footer_holder {  position: relative; display: block; color: var(--fair-white-color); box-sizing: border-box; height: auto; width: 100%; background-color:var(--dark-color); margin: 0px auto; padding: 2rem 0px; z-index: 20; } #footer{ display: flex; position: relative; background-color: inherit; justify-content: space-evenly; flex-wrap: wrap; margin: 0px auto 2rem auto; align-items: flex-start; max-width: 1200px; } .line{ position: relative; display: block; width: 90%; margin: 1rem auto; height: 2px; background-color: gainsboro; } #my_side_adr{ position:fixed; display: block; background-color: gray; height: 600px; width: 19%; right: 8px; top: 80px; } #my_side_adl{ position:fixed; display: block; background-color: gray; height: 600px; width: 19%; left: 8px; top: 80px; } .songs_links {text-decoration: none; } .my_s_holder{ position: relative; height: 120px; width: 45%; min-width: 250px; background-color: transparent; margin: 10px 10px 10px 10px; box-sizing: border-box; border-radius: 5px; text-align: left; display: inline-block; transition: .3s; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); } .my_s_holder:active, .my_s_holder:hover, .my_s_holder:focus{opacity: 0.8;} .img_holder{ position: absolute; height: 100px; left: 5px; top: 10px; border-radius: 50px; overflow: hidden; box-sizing: border-box; background-color: transparent; width: 100px; } .my_s_title {  position: absolute; height: 60px; left: 120px; width: auto; top: 15px; box-sizing: border-box; right: 5px; color: #1d1c1c; background-color: transparent; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .my_s_icon { height: 100%; width: auto; position: absolute; min-width: 100px; top: 0px; left: 0px; } .singer_n{ font-size: 14px; color: #667; } #l_cover{ position: absolute; height: 40px; width: 40px; box-sizing: border-box; background-color: transparent; border-radius: 20px; left: 37px; overflow: hidden; top: 12px; } .singer_name{font-size: 12px; color: #667; } .song_timedate {height: auto; width: auto; position: absolute; right: 10px; float: right; bottom: 0px; border-radius: 40px; } #more_songs_btn {position: absolute; bottom: 5px; display: block; height: 40px; width: 180px; border: none; font-size: medium; box-sizing: border-box; padding-top: 10px; text-decoration: none; background-color: rgba(0, 0, 0, 0.156); color: var(--dark-color); text-transform: capitalize; right: 0px; border-radius: 20px; } #more_songs_btn:hover, #more_songs_btn:active, #more_songs_btn:focus{box-shadow: 0px 1px 3px var(--dark-color); color: rgb(27, 59, 27); } #not_found{transform:rotate(-45deg); animation: swing 1s linear 2s 4 alternate; }@keyframes swing{0%{transform:rotate(-45deg); }100%{transform:rotate(45deg); }} #direc_holder{ height: 20px; width: 100%; position: relative; box-sizing: border-box; text-align: left; } #direction{ font-size: 12px; font-style: oblique; color: var(--main-color2); font-weight: bold; } .my_ad_title{ position: relative; display: block; height: 20px; width: fit-content; background-color: transparent; font-size: small; color: #3d3d3d; padding: 5px; font-weight: bold; text-align: center; margin: 2px auto 3px auto; } .my_ad_box1{ height: auto; width: 90%; position: relative; display: block; margin: 2px auto 3px auto; background-color: transparent; } .news_links{ text-decoration: none; color: inherit; }  .news_links{ text-decoration: none; color: inherit; } .gist_holder{ position: relative; width: calc(98% / 2); padding: 0.5rem; border-radius: 7px; background-color: #dfdfdf; display: inline-block; min-height: 270px; box-sizing: border-box; height: auto; background-color: var(--white-color); margin: 10px 1px 10px auto; overflow: hidden; transition: .3s; } .gist_holder:active, .gist_holder:focus, .gist_holder:hover{  opacity: 0.8; } .gist_img_hold{ position: relative; background-color: var(--dark-color); top: 0px; left: 0px; width: 100%; border-radius: 0px; height: 160px; overflow: hidden; } .sp_categ_box{  position: relative; display: block; height: auto; font-weight: bolder; margin-top: 0px; text-align: left; left: 0px; box-sizing: border-box; padding:4px 0px; font-size:1.1rem; background-color: transparent; color: var(--main-color2); font-size: 15px; font-weight: bold; }.gist_icon{width: auto; height: 100%;min-width:100%; position: relative; display: block; margin: auto; transition: .4s; } .gist_title{ position: relative; margin-bottom: 0.2rem; width: auto; font-weight:bolder; height: auto; background-color: transparent; font-size: 1.15rem; color: #474747; overflow: hidden; margin-top: 2px; line-height: 1.5; left: 0px; box-sizing: border-box; padding: 5px; text-align: left; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }.gist_timedate{position: absolute; bottom: 0px; left: 0px; height: 18px; width: auto; white-space: nowrap; text-overflow: ellipsis; font-size: smaller; font-weight: bold; text-align: center; background-color: transparent; color: #666; }.singer_holder{ position: relative; display: inline-block; width: calc(96% / 4); min-height: 160px; height: auto; min-width: 150px; background-color: var(--white-color); margin: 10px 5px 10px auto; overflow: hidden; transition: .3s; } .singer_holder:active, .singer_holder:focus, .singer_holder:hover{  opacity: 0.8; } .singer_img_box{ position: relative; background-color: var(--dark-color); margin: auto; width: 150px; border-radius: 75px; height: 150px; overflow: hidden; } .singer-bx-icon{width: 110%; height: auto; position: relative; display: block; margin: auto; } .singer-txt{ position: relative; width: 100%; height: auto; background-color: inherit; color: #474747; font-size: 1.1rem; overflow: hidden; margin-top: 2px; font-weight: bolder; line-height: 1.3; left: 0px; text-align: center; box-sizing: border-box; padding: 5px auto 5px auto; } @media screen and (max-width:1050px) {.art_box_hold{ width: 40vw; height: auto; } .art_pics_hold{ display: block; position: relative; width: 40vw; height: 40vw; border-radius: 20vw; margin: auto; }.art_box_txt{ position: relative; display: block; height: 50px; width: 100%; margin-top: -5px; font-size: 19px; }  /* update.. */ .big_sect{  margin: auto; }}  @media screen and (max-width:1025px){ #hd-one{display: none;}}  
 @media screen and (max-width:850px) {.hide{display: none;} .sect_holder{ background-color:var(--white-color); flex-wrap: wrap; top:10px; padding:0px;}  #side_sect{ width: 100%; margin:auto; } #my-navbar {display: none; } #search_field{ right: 60px; } #submit{right:62px; } #side_bar{right: 20px; } #dest_ba_ad{display:none; } #mobi_bt_ad{display:block; } .album_hold{width: 90%; min-width:90%; max-width:400px; } .my_s_holder{ width: 100%; min-width: 100%; margin-right:0px; margin-left:0px; } .small_ad_box1{margin-left: auto; margin-right: auto; width: 100%; } .small_ad_box2{ display: none; }  .my_nav_links{display: none; }.sbar_group1{display: block; } .ad_box{position: relative;  margin-left: auto; margin-right: auto;  width: 86%; } .ex_ad_box{width: 96%; } .small_ad_boxs{position: relative;  width: 96%; } .big_sect{margin-left: auto;  margin-right: auto;  width: 100%; } #my_side_adl{position: relative;  margin:5px auto 5px auto; max-width:350px; height: 300px; width: 100%; right: auto; top: 0px; } #my_side_adr{position: relative;  margin:5px auto 5px auto; max-width:350px; height: 300px; width: 100%; right: auto; top: 0px; }  .ads_box{ height: 100px; }}  
@media screen and (max-width:550px) { #nav-wrapp{ padding: 0px 7px; 
}.gist_holder{ width: calc(90% / 2); }} @media screen and (max-width:450px){ #side_bar{right: 10px; } .co_box {width: 100%;} #footer {justify-content: flex-start; } .art_box_hold{ position: relative;display: block;  height: auto; width: 90vw;  box-sizing: border-box; margin: 5px auto 7px auto; } .my_vid_holder{position: relative; display: block; width: 96%; max-width: 350px; box-sizing: border-box; margin: 10px auto;} .art_pics_hold{ position: relative;  display: block; width: 80vw; height: 80vw;  border-radius: 40vw;  margin: auto; }.art_box_txt{ position: relative; display: block; height: 50px; width: 100%;  margin-top: -5px; font-size: 19px; } #more_songs_btn { height: 30px;border-radius:15px; width: 100px; font-size: smaller; padding-top: 7px; } .album_hold{width: 90%; } .co_box{ padding: 0.5rem 2rem; } .big_sect{margin-left: auto;  margin-right: auto; } .gist_holder{box-shadow: 0px 0px 5px #bbbbbb; width: 88%; min-height: 0px; } .gist_img_hold{height: 200px; }} @media screen and (max-width:250px) {.my_s_title { font-size: 13px; } .singer_n{font-size: 10px; }} .art_box_hold{ position: relative; display: inline-block; height: 210px; width: 160px; margin: 7px; border-radius: 10px 0px; box-sizing: border-box; background-color: transparent; transition: .04s; }.art_box_hold:hover, .art_box_hold:active, .art_pics_hold:focus{ opacity: 0.90; }.art_pics_hold{ position: absolute; display: block; height: 160px; width: 160px; border-radius: 80px; top: 0px; left: 0px; box-sizing: border-box; background-color: transparent; overflow: hidden; transition: .4s; } .art_box_txt{ position: absolute; display: block; height: 50px; margin: auto; color: #1b1b1b; font-size: medium; font-weight: bold; width: 160px; white-space: nowrap; text-overflow: ellipsis; bottom: 0px; padding-top: 2px; text-decoration: none; left: 0px; box-sizing: border-box; background-color: transparent; }.art_box_txt:active, .art_box_txt:focus, .art_box_txt:hover{text-decoration: underline; }.art_singer_cont{ color: #666; font-size: small; width: 160px; white-space: nowrap; text-overflow: ellipsis; background-color: transparent; }.my_art_photo{ width: 110%; height: auto;}