@keyframes lookatme {
	0% { transform: translateY(0) rotate(0); }
	5% { transform: translateY(-12px) rotate(-8deg); }
	10% { transform: translateY(-12px) rotate(8deg); }
	15% { transform: translateY(-12px) rotate(-8deg); }
	20% { transform: translateY(-12px) rotate(8deg); }
	25% { transform: translateY(0) rotate(0); }
	}
#bonusgift {
	transition: all .3s;
	transition-delay: .7s;
	position: absolute;
	right: 0;
	bottom: -120px;
	left: 0;
	width: 100px;
	margin: 20px auto 0;
	outline: none;
	animation: lookatme 3s infinite;
	}
#bonusgift:focus {
	transition-delay: 0s;
	opacity: 0;
	}
#surprise {
	transition: all 1s;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #666a66;
	padding: 5px;
	z-index: -1;
	}
#footer {
	transition: all 1s;
	position: absolute;
	right: 0;
	bottom: -250px;
	left: 0;
	margin: 0 -10px; /* this is a hacky workaround. hi everyone. */
	}

@media (max-width: 574px) {
	#bonusgift {
		bottom: -90px;
		width: 75px;
		margin-top: 15px;
		}
	#surprise {
		opacity: 0;
		background-color: inherit; /* to appease IE. */
		background-color: initial;
		padding: 0;
		}
	#footer {
		bottom: -250px;
		}
	#bonusgift:focus ~ #surprise {
		opacity: 1;
		}
	}