$accent_color: #ff5a00;
$font-size: 11px;

.like-box {
	
	* {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	.like{
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
	}
	
	min-width: 80px;

}
	
div.like-opening{
	background-color:#fff;
	width:50px;
	height:50px;
	border-radius:50%;
	margin:0 auto;
	border:5px solid $accent_color;
	position:relative;
}

div.like-opening div.like-circle{
	background-color: $accent_color;
	width:50px;
	height:50px;
	margin-left:-25px;
	margin-top:-25px;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transition-property: -webkit-transform, background-color;
	-webkit-transition-property: -webkit-transform, background-color;
	-webkit-transition-property: -webkit-transform, background-color;
	-webkit-transition-property: -webkit-transform, background-color;
	transition: transform, background-color;

	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;

	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	transition-timing-function: ease-out;

	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-o-transform: scale(0.3);
	-ms-transform: scale(0.3);
	transform: scale(0.3);
	transition-style: preserve-3d;
	backface-visibility: visible;
}

.like.like-complete a.like-object div.like-opening div.like-circle:before{
	content: "\f004"; 
}
	
.like.like-complete a.like-object div.like-opening div.like-circle{
	background-color: $accent_color;
	font-family: FontAwesome;
	line-height: 46px;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	padding-left: 4px;
	border: 4px solid white;
}
 	
.like .like-meta {
	display: block;
	width: 100%;
	text-align: center !important;
	text-decoration: none;
}

.like .like-meta .like-meta-alpha,
.like .like-meta .like-meta-beta {
	width:auto;
	text-transform:uppercase;
	font-family: sans-serif;
	margin-top:5px;
	color: #000;
	font-size: $font-size;
	display:block;
	margin-top:5px;
	margin-bottom: 10px;
	font-weight: bold;
}

.like .like-meta .like-meta-beta {
	display: none;
}

.like a.like-object{
	display: block;
	cursor: pointer;
}

.like.like-active a.like-object div.like-opening div.like-circle{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	background:rgba(0,0,0,0.7)
}

.like.like-complete a.like-object div.like-opening div.like-circle{
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	-ms-transition-property: none;
	transition-property: none;

	-webkit-animation: bounce 1s;
	-moz-animation: bounce 1s;
	-ms-animation: bounce 1s;
	-o-animation: bounce 1s;
	animation: bounce 1s;

	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;

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

@keyframes "bounce" {
 0% {
    -webkit-transform: scale(1.1);
   	-moz-transform: scale(1.1);
   	-o-transform: scale(1.1);
   	-ms-transform: scale(1.1);
   	transform: scale(1.1);
   	background-color: $accent_color;
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
 50% {
    -webkit-transform: scale(1.6);
   	-moz-transform: scale(1.6);
   	-o-transform: scale(1.6);
   	-ms-transform: scale(1.6);
   	transform: scale(1.6);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   	filter: alpha(opacity=70);
   	opacity: .7;
   	background-color: $accent_color;
 }
 60% {
    -webkit-transform: scale(0.6);
   	-moz-transform: scale(0.6);
   	-o-transform: scale(0.6);
   	-ms-transform: scale(0.6);
   	transform: scale(0.6);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
 80% {
    -webkit-transform: scale(0.95);
   	-moz-transform: scale(0.95);
   	-o-transform: scale(0.95);
   	-ms-transform: scale(0.95);
   	transform: scale(0.95);
 }
 100% {
    -webkit-transform: scale(0.85);
   	-moz-transform: scale(0.85);
   	-o-transform: scale(0.85);
   	-ms-transform: scale(0.85);
   	transform: scale(0.85);
 }

}

@-moz-keyframes bounce {
 0% {
   -moz-transform: scale(1.1);
   transform: scale(1.1);
   background-color: $accent_color;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 50% {
   -moz-transform: scale(1.6);
   transform: scale(1.6);
   filter: alpha(opacity=70);
   opacity: .7;
   background-color: $accent_color;
 }
 60% {
   -moz-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=100);
   opacity: 1;
 }
 80% {
   -moz-transform: scale(0.95);
   transform: scale(0.95);
 }
 100% {
   -moz-transform: scale(0.85);
   transform: scale(0.85);
 }

}

@-webkit-keyframes "bounce" {
 0% {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   background-color: $accent_color;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 50% {
   -webkit-transform: scale(1.6);
   transform: scale(1.6);
   filter: alpha(opacity=70);
   opacity: .7;
   background-color: $accent_color;
 }
 60% {
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=100);
   opacity: 1;
 }
 80% {
   -webkit-transform: scale(0.95);
   transform: scale(0.95);
 }
 100% {
   -webkit-transform: scale(0.85);
   transform: scale(0.85);
 }

}

@-ms-keyframes "bounce" {
 0% {
   -ms-transform: scale(1.1);
   transform: scale(1.1);
   background-color: $accent_color;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 50% {
   -ms-transform: scale(1.6);
   transform: scale(1.6);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   opacity: .7;
   background-color: $accent_color;
 }
 60% {
   -ms-transform: scale(0.6);
   transform: scale(0.6);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 80% {
   -ms-transform: scale(0.95);
   transform: scale(0.95);
 }
 100% {
   -ms-transform: scale(0.85);
   transform: scale(0.85);
 }

}

@-o-keyframes "bounce" {
 0% {
   -o-transform: scale(1.1);
   transform: scale(1.1);
   background-color: $accent_color;
   filter: alpha(opacity=100);
   opacity: 1;
 }
 50% {
   -o-transform: scale(1.6);
   transform: scale(1.6);
   filter: alpha(opacity=70);
   opacity: .7;
   background-color: $accent_color;
 }
 60% {
   -o-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=100);
   opacity: 1;
 }
 80% {
   -o-transform: scale(0.95);
   transform: scale(0.95);
 }
 100% {
   -o-transform: scale(0.85);
   transform: scale(0.85);
 }

}