.a-z-list{
	margin-bottom: 30px;
}
.a-z-list ul{
	list-style: none;
	margin: 0;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 0;
   gap: 2px;
}
.a-z-list ul li{
	margin: 0 1px 1px 0;
}
.a-z-list ul li {
	margin: 0;
	padding: 5px 8px;
	background: #FFFFFF;
	border: 1px solid #BFBFBF;
	color: #212529;
	font-size: 18px;
	display: block;
  	line-height: 1;
}
.a-z-list ul li:hover{
	background-color: #B8C755;
	color: #fff;
	border: 1px solid #B8C755;
}

.a-z-list-data{
	border: 1px solid #dddddd;
}
.a-z-list-data ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.a-z-list-data ul li{
	display: block;
}
.a-z-list-data ul li a{
	color: #212529;
	padding: 10px;
	display: block;
	border-bottom: 1px solid #dddddd;
}
.a-z-list-data ul li a:hover{
	text-decoration: underline;
}
.a-z-list-data ul li:nth-child(odd){
	background-color: #eeeeee;
}
.a-z-list-data ul li:last-child a{
	border-bottom: 0;
}

/*************/
#a-z {

 }
    ul#a-z li {
       flex-grow: 1;
       text-align: center;
       background: #dadbdc;
       color: #fff;
       text-transform: uppercase;
    }

    ul#a-z li.active {
        background: #9c9c9c;
        cursor: pointer;	
     }

     #posts-results li { /* By default, hide all posts */
        display: none; 
     }
     #posts-results li.show { /* When a show class is used, this displays posts */
        display: block; 
     }
     ul#a-z li.current { /* This class will be used to highlight the current A-Z list item */
        background: #de466c;
        background-color: var(--orange);
     }