.blotils_count_icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }

  .blotils_icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    font-size: xxx-large;
  }

  #blotils {
    text-align: center;
  }

  #blotils_count_div {
    padding-left: 5px
  }

  .blotils_button {
    border: none;
    outline: none;
    background: none;
  }

  .blotils_button,
  .blotils_button:focus,
  .blotils_button:active {
    border: 0px;
    background: none;
    outline: none;
    padding: 0;
  }

  .blotils_icon:hover {
    animation: Shake 0.5s linear infinite;
}

/*Using keyframes for shaking an image*/
@keyframes Shake {
    0% {
        transform: rotate(5deg);
    }

    25% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

.has-fi-fav {
	.favorite-selector {
		position: relative;
        margin: auto;
        height: 8em;
        width: 8em;
		.fi-fav {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			transform: scale(0);
			transition: 200ms all ease;
			&.fi-fav_filled {
				color: #ff0000;
			}
		}
		&.fi-fav_selected {
			.fi-fav {
				&.fi-fav_filled {
					opacity: 1;
					transform: scale(1);
				}
			}
		}
		&.fi-fav_got-selected .fi-fav.fi-fav_filled {
			animation: heartAppears 1650ms ease infinite;
		}
	}
	&.heart_red .favorite-selector .fi-fav.fi-fav_filled {
		color: #ff0000;
	}
}
.fi-icon_fill {
    stroke-width: 0;
    fill: currentColor;
}
.hi-fav_explosion {
	transform-origin: center;
	transform: scale(1.5) translateY(-5%);
}
.hi-fav_explosion .explosion {
	transform-origin: center;
    transform: scale(0);
	animation: explosion 1650ms ease infinite;
}
.heart_red .hi-fav_explosion .explosion {
	animation-name: explosion-heart_red;
}
.hi-fav_explosion .particle {
	transform-origin: center;
	opacity: 0;
	&.particle-1 {
		animation: particle-1-explosion 1650ms ease 150ms infinite;
	}
	&.particle-2 {
		animation: particle-2-explosion 1650ms ease 150ms infinite;
	}
}
@keyframes explosion {
	0% {
		color: #ff0000;
		stroke: rgba(167, 39, 39, 0);
		stroke-width: 2;
		transform: scale(0);
	}
	3% {
		color: #ff0000;
	}
	9% {
		stroke: rgba(167, 39, 39, 0);
	}
	13% {
		stroke-width: 2;
	}
	14% {
		color: #a72866;
		opacity: 1;
	}
	17% {
		stroke: #a72866;
		transform: scale(1);
	}
	19% {
		color: rgba(167, 39, 39, 0);
	}
	30%, 100% {
		color: rgba(167, 39, 39, 0);
		stroke-width: 0;
		opacity: 0;
		stroke: #ff0000;
	}
}
@keyframes explosion-heart_red {
	0% {
		color: #ff0000;
		color: rgba(255, 198, 106, 0);
		stroke-width: 2;
		transform: scale(0);
	}
	3% {
		color: #ff0000;
	}
	9% {
		color: rgba(255, 198, 106, 0);
	}
	13% {
		stroke-width: 2;
	}
	14% {
		color: #ff0000;
		opacity: 1;
	}
	17% {
		stroke: #ff0000;
		transform: scale(1);
	}
	19% {
		color: rgba(255, 198, 106, 0);
	}
	30%, 100% {
		color: rgba(255, 198, 106, 0);
		stroke-width: 0;
		opacity: 0;
		stroke: #ff0000;
	}
}
@keyframes particle-1-explosion {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	9% {
		opacity: 1;
	}
	45% {
		transform: scale(1.375);
	}
	60%, 100% {
		opacity: 0;
		transform: scale(0);
	}
}
@keyframes particle-2-explosion {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	6% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
        transform: scale(1.15);
	}
}
@keyframes heartAppears {
	0%, 25% {
		transform: scale(0);
		opacity: 0;
	}
	40% {
		transform: scale(1.15);
	}
	30%, 100% {
		transform: scale(1);
		opacity: 1;
	}
}