.rateWrapper {
	/*
	display: flex;
	justify-content: center;
	align-items: center;
	*/
	}
.rateBox {
	/*	background: rgba(191,59,61,1.00);*/
	float: inherit;
	text-align: center;
}
.rateWrapper i {
	position: relative;
	font-size: 36px;
	cursor: pointer;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.7);
}
.rateWrapper span {
	position: relative;
	background-color: rgba(59,59,59,1.00);
	width: 20px;
	padding: 2px 5px;
	height: 20px;
	color: rgba(255,255,255,1.00);
	text-decoration: none;
	text-shadow: 0px 0px 2px rgba(18,18,18,1.00);
	border-radius: 10px;
	left: -15px;
	top: -20px;
	background-image: -webkit-repeating-linear-gradient(270deg,rgba(27,27,27,1.00) 0%,rgba(6,6,6,1.00) 50.77%,rgba(30,30,30,1.00) 100%,rgba(41,41,41,1.00) 100%);
	background-image: -moz-repeating-linear-gradient(270deg,rgba(27,27,27,1.00) 0%,rgba(6,6,6,1.00) 50.77%,rgba(30,30,30,1.00) 100%,rgba(41,41,41,1.00) 100%);
	background-image: -o-repeating-linear-gradient(270deg,rgba(27,27,27,1.00) 0%,rgba(6,6,6,1.00) 50.77%,rgba(30,30,30,1.00) 100%,rgba(41,41,41,1.00) 100%);
	background-image: repeating-linear-gradient(180deg,rgba(27,27,27,1.00) 0%,rgba(6,6,6,1.00) 50.77%,rgba(30,30,30,1.00) 100%,rgba(41,41,41,1.00) 100%);
	font-size: 16px;
	z-index: 5;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
.rateWrapper a {
	-webkit-transition-duration: 0.0s; /*Webkit: Animation duration*/
	-moz-transition-duration:    0.0s; /*Mozilla duration version*/
	-o-transition-duration:      0.0s; /*Opera duration version*/
	-ms-transition:              all 0.0s ease; /*MS Internet Explorer version */
	color: darkgray;
}

/* Like button styles */
.rateWrapper .fa-thumbs-up {
	-webkit-animation-name: tada;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	
	-webkit-transition-duration: 1s; /*Webkit: Animation duration*/
	-moz-transition-duration:    1s; /*Mozilla duration version*/
	-o-transition-duration:      1s; /*Opera duration version*/
	-ms-transition:              all 1s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-thumbs-o-up {
	-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
	-moz-transition-duration:    0.5s; /*Mozilla duration version*/
	-o-transition-duration:      0.5s; /*Opera duration version*/
	-ms-transition:              all 0.5s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-thumbs-up, .rateWrapper .fa-thumbs-o-up:hover {
	color: rgba(7,171,0,1.00);
}

/* Dislike button styles */
.rateWrapper .fa-thumbs-down {
	-webkit-animation-name: tada;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	
	-webkit-transition-duration: 1s; /*Webkit: Animation duration*/
	-moz-transition-duration:    1s; /*Mozilla duration version*/
	-o-transition-duration:      1s; /*Opera duration version*/
	-ms-transition:              all 1s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-thumbs-o-down {
	-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
	-moz-transition-duration:    0.5s; /*Mozilla duration version*/
	-o-transition-duration:      0.5s; /*Opera duration version*/
	-ms-transition:              all 0.5s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-thumbs-down, .rateWrapper .fa-thumbs-o-down:hover {
	color: rgba(53,98,158,1.00);
}
	
/* Favorite button styles */
.rateWrapper .fa-heart {
	-webkit-animation-name: heart;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-transition-duration: 1s; /*Webkit: Animation duration*/
	-moz-transition-duration: 1s; /*Mozilla duration version*/
	-o-transition-duration: 1s; /*Opera duration version*/
	-ms-transition: all 1s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-heart-o {
	-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
	-moz-transition-duration:    0.5s; /*Mozilla duration version*/
	-o-transition-duration:      0.5s; /*Opera duration version*/
	-ms-transition:              all 0.5s ease; /*MS Internet Explorer version */
}
.rateWrapper .fa-heart, .rateWrapper .fa-heart-o:hover {
	color: rgba(228,0,3,1.00);
}
@keyframes tada{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	10% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	20% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	30% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	40% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	50% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	60% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	70% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	80% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}

@-moz-keyframes tada{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	10% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	20% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	30% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	40% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	50% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	60% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	70% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	80% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}
@-webkit-keyframes tada {
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	10% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	20% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	30% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	40% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	50% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	60% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	70% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	80% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}
@-o-keyframes tada {
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	10% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	20% {transform:  rotate(-10deg) scaleX(0.50) scaleY(0.50) ;}
	30% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	40% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	50% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	60% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	70% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	80% {transform:  rotate(-10deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(10deg) scaleX(1.30) scaleY(1.30) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}


@keyframes heart{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	40% {transform:  rotate(0deg) scaleX(0.50) scaleY(0.50) ;}
	60% {transform:  rotate(0deg) scaleX(1.40) scaleY(1.40) ;}
	70% {transform:  rotate(0deg) scaleX(0.60) scaleY(0.60) ;}
	80% {transform:  rotate(0deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(0deg) scaleX(0.80) scaleY(0.80) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}

@-moz-keyframes heart{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	40% {transform:  rotate(0deg) scaleX(0.50) scaleY(0.50) ;}
	60% {transform:  rotate(0deg) scaleX(1.40) scaleY(1.40) ;}
	70% {transform:  rotate(0deg) scaleX(0.60) scaleY(0.60) ;}
	80% {transform:  rotate(0deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(0deg) scaleX(0.80) scaleY(0.80) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}

@-webkit-keyframes heart{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	40% {transform:  rotate(0deg) scaleX(0.50) scaleY(0.50) ;}
	60% {transform:  rotate(0deg) scaleX(1.40) scaleY(1.40) ;}
	70% {transform:  rotate(0deg) scaleX(0.60) scaleY(0.60) ;}
	80% {transform:  rotate(0deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(0deg) scaleX(0.80) scaleY(0.80) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}

@keyframes heart{
	0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
	40% {transform:  rotate(0deg) scaleX(0.50) scaleY(0.50) ;}
	60% {transform:  rotate(0deg) scaleX(1.40) scaleY(1.40) ;}
	70% {transform:  rotate(0deg) scaleX(0.60) scaleY(0.60) ;}
	80% {transform:  rotate(0deg) scaleX(1.30) scaleY(1.30) ;}
	90% {transform:  rotate(0deg) scaleX(0.80) scaleY(0.80) ;}
	100% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
}




