html {
width:100%;
height:100%;
font-family: Verdana;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
	font-family: Verdana;
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-size: 14.5px;
	user-select:none;
  outline: none;
	width:100%;
	height:100%;
}
.outer {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position:relative;
}
.inner {
	overflow: hidden;
	z-index: 250;
	ccursor:default;
	background-color: #000000;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	left: 50%;
	margin-left: -25px;
	border-radius: 25px;
}
.balloon {
	animation: balloon 1s ease-in-out 0s 1 normal;
	animation-fill-mode: both;
}
.reballoon {
	animation: reballoon 0.25s ease-in-out 0s 1 normal;
	animation-fill-mode: both;
}
.bounce {
	animation: bounce_a 3s ease-in-out 0s infinite normal;
	animation-fill-mode: both;
}
.inner .inner-text {
	display: none;
	height: 300px;
	width: 300px;
	border: 2px solid black;
}
.inner .inner-text .text-container {
	overflow: hidden;
	color: #ffffff;
	height: 300px;
	width: 300px;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
	display: table-cell;
}
.inner:hover .inner-text {
	cursor:default;
	display: block;
	opacity: 0;
	color: #ffffff;
	animation: text 1s ease-in 1s 1 normal;
	animation-fill-mode: forwards;
}
.inner .inner-text .text-container a {
	color: #ffffff;
}
@keyframes balloon {
0% {
	border-radius: 25px;
	width: 50px;
	height: 50px;
	top: 50%;
	margin-top: -25px;
	left: 50%;
	margin-left: -25px;
}
100% {
	border-radius: 150px;
	width: 300px;
	height: 300px;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -150px;
}
}
@keyframes reballoon {
0% {
	border-radius: 150px;
	width: 300px;
	height: 300px;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -150px;
}
100% {
	border-radius: 25px;
	width: 50px;
	height: 50px;
	top: 50%;
	margin-top: -25px;
	left: 50%;
	margin-left: -25px;
}
}
@keyframes text {
0% {
	opacity: 0;
}
100% {
	opacity: 1;
}
}
@keyframes bounce_a {
0% {
	transform: scale(1,1);
}
50% {
	transform: scale(0.85,0.85);
}
100% {
	transform: scale(1,1);
}
}
.drop {
	pointer-events: none;
	transform: rotate(15deg);
	z-index: 300;
	background: -webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,0.5) ), to(rgba(128,128,128,0.9))  );
	background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(128,128,128,0.9) 100%);
	background: gradient(top, rgba(255,255,255,0.5) 0%, rgba(128,128,128,0.9) 100%);
	width: 1px;
	height: 39px;
	position: absolute;
	bottom: 600px;
}

	.drop_1{
	-webkit-animation: fall 2s linear infinite;
	-moz-animation: fall 2s linear infinite;
	animation: fall 2s linear infinite;
	}

	.drop_2{
	-webkit-animation: fall 1.5s linear infinite;
	-moz-animation: fall 1.5s linear infinite;
	animation: fall 1.5s linear infinite;
	}

	.drop_3{
	-webkit-animation: fall 2.5s linear infinite;
	-moz-animation: fall 2.5s linear infinite;
	animation: fall 2.5s linear infinite;
	}

@-webkit-keyframes fall {
to {
	margin-top: 1200px;
	margin-left: -400px;
}
}
@-moz-keyframes fall {
to {
	margin-top: 1200px;
	margin-left: -400px;
}
}
@keyframes fall {
to {
	margin-top: 1200px;
	margin-left: -400px;
}
}