/********** LETTERS MENU ****************/

.letmenu {
width:100%;
margin-top: 34px;
}


.letmenu.sticky { 
top: 76px;
position: fixed;
z-index: 2;
 }


.trow {
 display:flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-between;
   padding: 0;
    background: #FFF;
 }


.let{
  font-size: 14px;

padding: 5px 0 5px 0 ;
margin: 2px 2px 0 2px;

padding-top: 10px;
-webkit-box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.2); 
background: var(--l1);

max-width: 3.2%;
text-align:center;

display:block;
font-weight: bold;
border-radius: 5px;
flex-grow:1;
}

.let a, .let a:hover {color: var(--dblue);}
              
.letcur{ background: var(--l2); }

.letv0, .letv1 { 
  max-width: 6%;

flex-grow: 1;
 }


/**************************/





/***  RECENT ***/
.sl4 {  margin: 20px 0 15px 0; }
.sl4:hover { background-color: var(--llgreen); }

.sl1:nth-child(n+2) {  margin: 30px 0 0 0; }


.sl11, .sl21{ text-align:  left; }
.sl12, .sl22{ text-align: right; }

.sl11 a, .sl21 a {color: var(--bougen) ;} 
.sl12 a, .sl22 a {color: var(--ldgreen);}

.sl11, .sl12 {font-size: 12px; font-weight: bold; }
.sl21, .sl22 {font-size: 11px; }

.recent  {
display: block;
margin: 0 2% 28px 0;
padding: 10px;
border: solid 2px var(--dblue); 
border-radius: 7px;
width: 25%;
height: min-content;
    }




.recenttitle{
margin: 7px 10px 0 10px;
height: 30px;
color: var(--dblue);
font-size: 14px;
font-weight: bold;
}


.recentlist {
 width: 100%;
    margin: 0;
    text-align: center;
    position: relative;
}

.item {
  min-width: calc(100% - 20px);
  padding: 0;
  background-color: #FFF;
  font-size: 12px;
}


.item:nth-child(2n) { margin-bottom: 20px; }


.scroller::-webkit-scrollbar, .button, .buttons  {   display: none;  }
.recentlist .btn.prev {  left:  15px; display: none;}
.recentlist .btn.next {  right: 15px; display: none;}



/*** recent & pagination ***/

.ltriangle, .rtriangle { 
border-right: 4px solid;
border-bottom: 4px solid;
    border-bottom-color: currentcolor;
    border-bottom-style: solid;
    border-bottom-width: 4px;
height: 8px;
width: 8px;
color: #65b0bf;
}

.ltriangle{
transform: rotate(135deg);
margin: 9px 0 9px 11px; }

.rtriangle {
transform: rotate(-45deg);
margin: 9px 0 9px 7px;
}







/*** PAGINATION ***/
 
.pn0, .pn0 a { color: var(--dgreen); }
.pn1, .pn1 a { color: var(--pn1); }
.pn2, .pn2 a { color: var(--pn2); }
.pn3, .pn3 a { color: var(--pn3); }
.pn4, .pn4 a { color: var(--pn4); }


.pagination {
display: flex; 
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}


.pageslist { 
display: flex; 
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}


.selides {
text-align: center; 
color: var(--pn3);
font-size: 12px;
}

.npage {display: block;
flex-grow: 1.1;
min-width: 30px;
font-size: 12px;
}

.cur { font-weight: bold; }

.pagination .btn {
    z-index: 1;
/*    line-height: 30px;
    color: #000;        
    text-align: center;
    font-weight: bold;  */
    border-radius: 15px;
    background-color: var(--lgreen);
    border: 1px solid var(--pn3);
}

.pagination .btn:hover{
   background-color: #D4EEF3;
    cursor: pointer;
}
.pagination .btn.next {
    right: 15px;
    margin-left: 15px;
}
.pagination .btn.prev {
    left: 15px;
    margin-right: 15px;}



.pagination .btn, .pagination .nobtnl,  .pagination .nobtnr {
    position: relative;
    top: 0; 
    width: 30px;
    height: 30px;
}


.pagination .nobtnl { margin-right: 15px; }
.pagination .nobtnr {  margin-left: 15px; }


/*** person ***/
.column2 a {color: var(--blue); }
.column1, .column2 {width: 48%; }




/*** song ***/

.lsongrow1 {
display: flex;
flex-direction: column;
padding: 7px 0 0 0;
margin: 0;
}


.lsongrow1:hover {
background-color: var(--llgreen);
border-radius: 7px;
border: solid 1px var(--dblue);
}

.lsong2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
padding: 0;
}

.lsong2:hover  { background-color: var(--lgreen); }


.lsong1 {
width:48%;
text-align:left;
font-size : 13px; 
font-weight: bold;
}


.lsongrow2 {
display: flex;
flex-direction: column;
font-size : 12px; 
text-align: left;
}


.lsinger2 {
display: flex;
flex-direction: row;
text-align: left;
margin: 0;
padding:0;
}


.lsinger1 {
margin-left: 30px;
width:45%;
text-align:left;
padding:0;
}



.lsinger2:hover, .lsinger2:hover a  {
font-weight: bold;
text-decoration: none; 
color: var(--blue);
}



.lsinger2 a {
color: var(--blue);
}



.lsongdown {
font-size: 10px; 
color: var(--bougen);
text-align:right;
float: right;
}

.adown {
font-size: 10px; 
text-align: right;
float: right;
font-weight: normal;
}

.adown a
{
color: var(--bougen);
}





/***   album   ***/

.albtext
{
width: 100%;
margin: 10px 10px 0 30px;
padding: 0;
text-align:left;
font-size : 13px;
}


.album_albumtitle  {
display: inline-block;
width: calc(100% - 60px);
font-weight: bold;
font-size : 14px; 
text-align: left;
margin:0;
margin-bottom: 5px;
}

.album_albyear {
width: 50px;
display: inline-block;
font-weight: bold;
font-size: 14px;
text-align: right;
}


.albumrow  {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 10px 0 0 0;
margin: 0;
}



.cover img {
 width: 60px;
height: 60px;
	box-shadow: 3px 3px 3px rgba(25, 72, 77,.3);
	border-radius: 5px;
margin: 10px;
}



.cover img:hover {
 width: 65px;
height: 65px;

}

.cover { flex-basis: 85px; }


.albumrow:hover  {
background-color: #F7FFFF;
border-radius: 7px;
border: solid 1px var(--dblue);
}















/*** is rewritten ***/
.recent  { width: 25%; }
#content { width: calc(73% - 24px);  }       




@media (min-width: 1401px) {
.letmenu {
width:100%;
margin-top: 30px;
}


}



@media (min-width: 1101px) {
/*** is rewritten ***/
.recent  { width: 20%; }
#content { width: calc(46% - 24px); }       
}



@media (max-width: 800px) {

.letmenu {margin-top: 0; }

.let {padding-top: 6px;
margin: 2px 1px 0 1px;
max-width: unset;  }

.letmenu.sticky { top: 57px;}





.npage { min-width: 25px; }


}



@media (max-width: 650px) {

/*** RECENT ***/
.recent  { width: calc(100% - 24px);  margin: 0 0 28px 0;}
#content { width: 100%; }

.sl4 {  margin: 0; }
.sl1:nth-child(n+2) { margin: 7px 0 0 0 ; } 

.sl1, .sl2 { display: block ;  width: 100%; } 
.sl11, .sl21 { float:left; }


/* window */
.scroller {
  display: flex;
  overflow-x: scroll;
   scroll-snap-type: x mandatory; 
     -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
}

.scroller::-webkit-scrollbar {   display: none;  }

.item {display: block;}

.item {
  min-width: calc(100% - 20px);
  margin-bottom: 15px;
  padding: 0 10px;
   scroll-snap-align: center;
   background-color: white;
    font-size: 12px;
}

/* arrows */

.recentlist .btn {
  display: block;
  position: absolute;
  top: 95%;
  z-index: 1;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background-color: var(--lgreen);
    border: 1px solid var(--pn3);
/*
    line-height: 30px;
    text-align: center;*/
}

.recentlist .btn:hover {
    background-color: var(--pn4);
    cursor: pointer;
}


.recentlist .btn.prev, .recentlist .btn.next { display: block;}


/*** radiobuttons ***/ 
.buttons {
 display: flex;
 width: 96px; 
 margin: 15px auto 0 auto;  
}

.button {
display: block;
 width: 12px;
 height: 12px;
 margin: 0 5px 0 5px;
  border-radius: 12px;
  border: 1px solid  var(--pn3) ; 
  background: var(--llgreen);
}

.button.active{  background: var(--pn3); }




}






@media (max-width: 480px) {

.let {
/*min-width: 7.5%; 
max-width: 7.5%; */
width: calc((100% / 13) - 2px);
padding: 0;
}

.letv0 {width: calc( 300% / 13 - 2px );}
.letv1 {width: calc( 200% / 13 - 2px );}

.trow { flex-wrap: wrap; }


/*** RECENT ***/

.sl1, .sl2 {
display:flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
}

.sl11, .sl12, .sl21, .sl22    { min-width: 48%;  }

.pagen {min-width: 20px;}




}





































@media screen and (max-width: 360px) {


.lsinger1 {
margin-left: 0;
padding-left: 15px;
font-size: 12px; 
}

.album_albumtitle, .album_albyear { font-size: 12px;   }

.albtext { margin: 0 0 0 12px; }


.album_albumtitle{
width: calc(100% - 45px);
margin: 0;
}

.cover img, .cover img:hover
{
 width: 40px;
height: 40px;
}

.cover img, .nocover { 	margin: 0 0px 0px 5px; } 
.cover  { flex-basis: 50px; }

.album_albyear { width: 35px; }

}