@charset "UTF-8";
/* Fuente:
    font-family:Open Sans,Lucida Grande,Helvetica Neue,Helvetica,Arial,Sans-serif;

*/
body {
  font-family: "Open Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}

header {
  background-color: #222120;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 50px;
}
header > img {
  display: block;
  margin-bottom: 5px;
}

/* Utiliza  la propiedad counter-increment: step-counter; para pintar el número de la canción
 */
.filters, .genere {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.genere > button {
  margin: 10px;
  font-size: 20px;
}

.filters > ul {
  margin: 0px;
  padding: 0px;
}

.bckimage {
  width: 70px;
  height: 70px;
  padding: 10px 10px;
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  color: white;
  border: none;
  box-sizing: content-box;
}

.bckimage_rock {
  background-image: url("https://lastfm.freetls.fastly.net/i/u/avatar300s/366962d5733a4aee8bee4a136c239d47.jpg");
  filter: sepia(90%);
}
.bckimage_hip-hop {
  background-image: url("https://lastfm.freetls.fastly.net/i/u/avatar300s/51810a59cb17449bb2d6b8b62d63ce78.jpg");
  filter: contrast(200%);
}
.bckimage_indie {
  background-image: url("https://lastfm.freetls.fastly.net/i/u/avatar300s/c825233e09af4641a5ce7b6ece883aae.jpg");
  filter: grayscale(50%);
}
.bckimage_jazz {
  background-image: url("https://lastfm.freetls.fastly.net/i/u/avatar300s/c0a9af93c8c843afb43cd6dc24b0bbf3.jpg");
  filter: hue-rotate(90deg);
}
.bckimage_reggae {
  background-image: url("https://lastfm.freetls.fastly.net/i/u/avatar300s/94428d295a60403e9327cbfb86e2fbf6.jpg");
  filter: sepia(90%);
}
.bckimage:hover {
  cursor: pointer;
}

.filter_list {
  list-style: none;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.filter_list > a {
  text-decoration: none;
}
.filter_list:hover {
  cursor: pointer;
}
.filter_list_actived {
  color: #B90000;
}
.filter_list_inactived {
  color: #222;
}

.menu-item-selected {
  margin-left: 30px;
}

.lista > li {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  padding: 10px;
}
.lista > li > a {
  margin: 0px 10px;
}
.lista > li > div {
  margin-left: auto;
  margin-right: 0;
}
.lista > li.odd {
  background-color: #f2f2f2;
}

/*# sourceMappingURL=style.css.map */