.letras {
    display: flex;
    justify-content: stretch;
    border-radius: 5px;
    padding: 8px;
}
.letra {
    cursor: pointer;
    position: relative;
    color: #424242;
    flex: 1;
    text-align: center;
    padding: 5px;
    transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s, color 0.3s ease 0s;
    border-radius: 3px;
    border: 1px solid #FFF;
    margin: 0 1px;
}
.letra:hover,
.letra-ativa {
    background-color: #FFF;
    color: #F1863B;
    border-color: #F1863B;
}
.letra-sem-categoria {
    opacity: 0.3;
}

@media (max-width: 980px) {
	.letras {
		flex-wrap: wrap;
		padding: 5px;
	}
	.letra {
		min-width: 30px;
		margin: 3px;
	}
	.letra-todos {
		min-width: 60px;
	}

}