html, body{
	margin:0px;
	padding:0px;
	background:#de2121;
	height:100%;
}

*{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

#ripples{
	width:100%;
	height:100%;

	position:absolute;
	top:0px;
	left:0px;
}

#heart{
	-webkit-transition:0.1s;
	-moz-transition:0.1s;
	-ms-transition:0.1s;
	-o-transition:0.1s;
	transition:0.1s;

	width:258px;
	height:232px;

	cursor:pointer;
	
	position:absolute;

	top:-webkit-calc(50% + 26px - 116px);
	top:-moz-calc(50% + 26px - 116px);
	top:-ms-calc(50% + 26px - 116px);
	top:-o-calc(50% + 26px - 116px);
	top:calc(50% + 26px - 116px);

	left:-webkit-calc(50% - 129px);
	left:-moz-calc(50% - 129px);
	left:-ms-calc(50% - 129px);
	left:-o-calc(50% - 129px);
	left:calc(50% - 129px);

	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;

	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

#heart:active{
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	-o-transition:none;
	transition:none;

	-webkit-transform:scale(0.98);
	-moz-transform:scale(0.98);
	-ms-transform:scale(0.98);
	-o-transform:scale(0.98);
	transform:scale(0.98);
}

#heart .box{
	width:26px;
	height:26px;
	background:transparent;
	float:left;
	margin-top:3px;
	margin-right:3px;
	text-align: center;
	line-height: 26px;
	font-weight: bold;
	font-family: 'menlo', monospace;
	color: #de2121;
	font-size: 20px;

	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

@media screen and (max-width:600px){
	#heart{
		width:204px;
		height:184px;

		top:-webkit-calc(50% + 20px - 92px);
		top:-moz-calc(50% + 20px - 92px);
		top:-ms-calc(50% + 20px - 92px);
		top:-o-calc(50% + 20px - 92px);
		top:calc(50% + 20px - 92px);

		left:-webkit-calc(50% - 102px);
		left:-moz-calc(50% - 102px);
		left:-ms-calc(50% - 102px);
		left:-o-calc(50% - 102px);
		left:calc(50% - 102px);
	}

	#heart .box{
		width:20px;
		height:20px;
		line-height:20px;
		font-size:16px;
	}
}

#heart .box:nth-child(9n){
	margin-right:0px;
}

#heart .box.white{
	background:#FFF;
}

header{
	position:absolute;
	top:10px;
	left:0px;
	width:100%;
	text-align:center;

	color:#FFF;
	font-family: 'menlo', monospace;
	line-height:30px;

	font-size:16px;


	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

footer{
	position:absolute;
	bottom:10px;
	left:0px;
	width:100%;
	text-align:center;

	color:#FFF;
	font-family: 'menlo', monospace;
	line-height:30px;

	font-size:16px;


	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

footer img{
	height:30px;
	vertical-align:middle;
	margin-top:-10px;
	margin-right:5px;
}

footer a{
	color:#FFF;
}

@media screen and (max-width:600px){
	header{
		font-size:13px;
	}

	footer{
		font-size:13px;
	}

	footer img{
		margin-top:-7px;
		height:24px;
	}

	footer a{
		display:block;
	}
}