airdrum.css

@import url(http://fonts.googleapis.com/css?family=Lobster);

.animated {
	-webkit-animation-duration: .4s;
	-webkit-animation-fill-mode: both;
}
body {
	background-image: url('bg.jpg');
	background-size: 100%;
}
h1 {
	font-family: 'Lobster';
	font-size: 3rem;
	text-align:	center;
	color: white;
}

h3{
	font-family: 'Lobster';
	font-size: 1.5rem;
	text-align:	center;
	color: white;
}
#drum-controls {
	text-align: center;
}
div button{
	width:200px;
	height:200px;
	border-radius:100px;
	border:0px;
	background-color:#FF7400;
	box-shadow:2px 2px 10px 10px #888888;
	-webkit-box-shadow:2px 2px 10px 10px #888888;
	-moz-box-shadow:2px 2px 10px 10px #888888;
	color:#FFFFFF;
	font-size: 1.875em;
	font-family: 'Lobster'; 
}
button:active{
	background-color:#FFAA00;
	box-shadow:2px 2px 5px 5px #888888;
	-webkit-box-shadow:2px 2px 5px 5px #888888;
	-moz-box-shadow:2px 2px 5px 5px #888888;
	outline: none;
	border: none;
}


button:focus {
	outline: none;
	border: none;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -7px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  transform-origin: center bottom;
}