/*HEARTBOX*/
.heartBox {
    position: absolute;
    z-index: 1;
    /*display:none;*/
}

.heartBox .heart{
/*animation-name: appear-disappear;*/
/*animation-duration: 4s;*/
/*animation-iteration-count: infinite;  */
/*transition: visibility 0s linear 0.33s, opacity 0.33s linear;*/
}
.heartBox .heart:hover{
	  transform:scale(1.2);
}

.heartBox .heart.clicked{
animation-name: scale-disappear ;
/*animation-duration: 1s;*/
/*animation-iteration-count: infinite;  */
/*display:none;*/
    transition: all .4s ease-in-out;
	  /*transform:translate(0%,550%);*/
	  transform:scale(3);
	  opacity:0;
}

@keyframes scale-disappear {
	/* We set opacity to zero at the start 
	of the animation. At 50% play time, 
	here after 2s, the HTML element will
	be fully opaque (appear). Then */
	0% { 
	  opacity:1;
	  transform:scale(1);
	} 
	50% { 
	  opacity:0.5;
	  transform:scale(1.2);
	}
	100% {
	  opacity:0; 
	  transform:scale(1.4);
	  display:none;
	}
}