div {
	width:100%;
	text-align:center
}

body {
	cursor: url('slap.ico'), auto;
	height:100%;
	margin:0;
	padding:0;
}

@-webkit-keyframes slap {
	0% { -webkit-transform: translate(3px, 2px) rotate(0deg); }
	10% { -webkit-transform: translate(-2px, -3px) rotate(-2deg); }
	20% { -webkit-transform: translate(-4px, 1px) rotate(2deg); }
	30% { -webkit-transform: translate(-1px, 3px) rotate(1deg); }
	40% { -webkit-transform: translate(2px, -2px) rotate(0deg); }
	50% { -webkit-transform: translate(-2px, 3px) rotate(-3deg); }
	60% { -webkit-transform: translate(-5px, 2px) rotate(2deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-2px, -3px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	100% { -webkit-transform: translate(2px, -5px) rotate(-2deg); }
}

@-ms-keyframes slap {
	0% { -ms-transform: translate(3px, 2px) rotate(0deg); }
	10% { -ms-transform: translate(-2px, -3px) rotate(-2deg); }
	20% { -ms-transform: translate(-4px, 1px) rotate(2deg); }
	30% { -ms-transform: translate(-1px, 3px) rotate(1deg); }
	40% { -ms-transform: translate(2px, -2px) rotate(0deg); }
	50% { -ms-transform: translate(-2px, 3px) rotate(-3deg); }
	60% { -ms-transform: translate(-5px, 2px) rotate(2deg); }
	70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -ms-transform: translate(-2px, -3px) rotate(1deg); }
	90% { -ms-transform: translate(2px, 1px) rotate(0deg); }
	100% { -ms-transform: translate(2px, -5px) rotate(-2deg); }
}

@-moz-keyframes slap {
	0% { -moz-transform: translate(3px, 2px) rotate(0deg); }
	10% { -moz-transform: translate(-2px, -3px) rotate(-2deg); }
	20% { -moz-transform: translate(-4px, 1px) rotate(2deg); }
	30% { -moz-transform: translate(-1px, 3px) rotate(1deg); }
	40% { -moz-transform: translate(2px, -2px) rotate(0deg); }
	50% { -moz-transform: translate(-2px, 3px) rotate(-3deg); }
	60% { -moz-transform: translate(-5px, 2px) rotate(2deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-2px, -3px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	100% { -moz-transform: translate(2px, -5px) rotate(-2deg); }
}

#bag:hover, #bag:focus {
	-webkit-animation-name: slap;
	-webkit-animation-duration: 0.5s;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;

	-ms-animation-name: slap;
	-ms-animation-duration: 0.5s;
	-ms-transform-origin: 50% 50%;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function: linear;

	-moz-animation-name: slap;
	-moz-animation-duration: 0.5s;
	-moz-transform-origin: 50% 50%;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
}

#bag {
	display: inline-block;
	padding-top: 100px;
}

#counter {
	position: fixed;
	bottom: 0;
	text-align: center;
}