audio {
	display: none;
}

p{
	margin: 0px;
	padding: 0px;
	clear:both;
}
.drum_img{
	position: absolute;
}
ul{
	list-style-type: none;
	padding: 0;
	padding-left: 10px;
	font-size: 16px;
	letter-spacing: 2px;
}

#content{ 
    margin-right: auto;
    margin-left: auto;
    height: 340px;
    width:700px;
    background-color: #fff3aa;
    box-shadow: 0px 0px 4px 0px;
    border-radius: 20px;
}
#history{
    text-align: center;
    background-color: #fff3aa;
    float:left;
    width:130px;
    height: 300px;
    box-shadow: 0px 0px 4px 0px;
    border-radius: 20px;
    margin-top: 20px;
    padding-top: 5px;
    overflow:hidden;
    margin-left: 5px;
}

#drums{
	float:left;
	margin-top:70px;
}
#legend{ 
	text-align: left;  
	background-color: #fff3aa;
	float:right;
	width:130px;
        height: 300px;
	box-shadow: 0px 0px 4px 0px;
        border-radius: 20px;
        margin-top: 20px;
        padding-top: 5px;
        overflow:hidden;
        margin-right: 5px;

}
#cymbal{
	margin-left: 17px;
	margin-top:-2px;

}
#conga{
	margin-left:96px;
	margin-top:90px;
}
#bigtom{
	margin-left:160px;
	margin-top:42px;
}
#bigtomarm{
	margin-left:210px;
	margin-top: 72px;
}
#bass{
	margin-left:155px;
	margin-top:100px;
}
#smalltomarm{
	margin-left: 235px;
	margin-top: 71px;
}
#smalltom{
	margin-left:248px;
	margin-top:47px;
}
#snare{
	margin-left:282px;
	margin-top:82px;

}
#hihat{
	margin-left:325px;
	margin-top:48px;

}

#demo{
        text-align: center;
	clear: both;
	padding-top: 2%;
}
#button1{
	height: 42px;
	width: 102px;
	box-shadow: 0px 0px 4px 2px;
    border-radius: 10px;

  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
#button1:hover{
	height: 50px;
	width: 110px;
}


@keyframes bounce {
	0%{}
	25%{
		transform: rotate(-5deg) scale(1.15);
		animation-timing-function: ease-in;
	}
	50%{
		transform: rotate(5deg) scale(1.1);
		animation-timing-function: ease-in;
	}
	to{
		transform: rotate(0deg) scale(1);
		animation-timing-function: ease-out;
	}  
}

.playing {
	animation-name: bounce;
	animation-duration: 0.15s;
}
.active {
	color: #e60000;
}