html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
canvas{
  height: 1px;
}
body{
  background: #333333;
  background: -webkit-linear-gradient(to right, #dd1818, #333333);
  background: linear-gradient(to right, #dd1818, #333333);
}
* { box-sizing:border-box; }

ul {
	height:18.875em;
  width: 54em;
  margin:5em auto; padding:3em 0 0 3em; position:relative;
}
li { margin:0; padding:0; list-style:none; position:relative; float:left; }
.titulo{
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 40px;
  text-align: center;
}

.subtitulo{
  font-family: 'Roboto', sans-serif;
  color: #f9acac;
  font-size: 30px;
  text-align: center;
}
.descripcion{
  font-family: 'Roboto', sans-serif;
  color:#ff5e5e;
  text-align: center;
  padding-bottom: 1em;
}


.white {
  height:16em; width:3.8em; z-index:1;
  border-left:1px solid #bbb;
  border-bottom:1px solid #bbb;
  border-radius:0 0 5px 5px;
  background: white;
}
.pollo {
  opacity:0;
  height: 10em;
  width: 10em;
}
.black {
  height:8em; width:1.7em; margin:0 0 0 -1em; z-index:2;
  border:1px solid #000;
  border-radius:0 0 5px 5px;
  background:black;
}

.black:active {
  background:grey;
}
.white:active {
  background:grey;
}
.active {
  background: grey;
}

#re,#mi,#sol,#la,#si,#rem,#mim,#solm,#lam,#sim { margin:0 0 0 -1em;  }