.starability-basic {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-basic>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-basic>input:checked~label, .starability-basic>input:focus~label, .starability-basic>input:hover~label {
	background-position: 0 -30px
}
.starability-basic>input:focus+label {
	outline: 1px dotted #999
}
.starability-basic>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-basic>label {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-slot {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-slot>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-slot>input:checked~label, .starability-slot>input:focus~label, .starability-slot>input:hover~label {
	background-position: 0 -30px
}
.starability-slot>input:focus+label {
	outline: 1px dotted #999
}
.starability-slot>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-slot>label {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-slot>input:checked~label, .starability-slot>input:focus~label, .starability-slot>input:hover~label {
	transition: background-position .7s
}
@keyframes a {
	0% {
		transform: scale(1)
	}
	99% {
		transform: scale(4);
		opacity: 0
	}
	to {
		transform: scale(1);
		opacity: 0
	}
}
.starability-grow {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-grow>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-grow>input:checked~label, .starability-grow>input:focus~label, .starability-grow>input:hover~label {
	background-position: 0 -30px
}
.starability-grow>input:focus+label {
	outline: 1px dotted #999
}
.starability-grow>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-grow>label {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-grow>label:before {
	display: none;
	position: absolute;
	content: ' ';
	width: 30px;
	height: 30px;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat;
	bottom: 0
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-grow>label:before {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-grow>input:checked+label:before {
	display: block;
	animation-duration: 1s;
	animation-name: a;
	animation-fill-mode: forwards
}
@keyframes b {
	0% {
		transform: scale(1) rotate(0)
	}
	99% {
		transform: scale(4) rotate(90deg);
		opacity: 0
	}
	to {
		transform: scale(1) rotate(0);
		opacity: 0
	}
}
.starability-growRotate {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-growRotate>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-growRotate>input:checked~label, .starability-growRotate>input:focus~label, .starability-growRotate>input:hover~label {
	background-position: 0 -30px
}
.starability-growRotate>input:focus+label {
	outline: 1px dotted #999
}
.starability-growRotate>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-growRotate>label {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-growRotate>label:before {
	display: none;
	position: absolute;
	content: ' ';
	width: 30px;
	height: 30px;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat;
	bottom: 0
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-growRotate>label:before {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-growRotate>input:checked+label:before {
	display: block;
	animation-duration: 1s;
	animation-name: b;
	animation-fill-mode: forwards
}
@keyframes c {
	0% {
		transform: translateY(30px)
	}
	80% {
		opacity: 100%
	}
	to {
		transform: none;
		opacity: 0
	}
}
.starability-fade {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-fade>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-fade>input:checked~label, .starability-fade>input:focus~label, .starability-fade>input:hover~label {
	background-position: 0 -30px
}
.starability-fade>input:focus+label {
	outline: 1px dotted #999
}
.starability-fade>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-fade>label {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-fade>label:before {
	display: none;
	position: absolute;
	content: ' ';
	width: 30px;
	height: 30px;
	background-image: url(../images/icons.png);
	background-repeat: no-repeat;
	background-position: 0 -30px;
	bottom: 30px
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-fade>label:before {
		background-image: url(../images/icons@2x.png);
		background-size: 30px auto
	}
}
.starability-fade>input:checked+label:before {
	display: block;
	animation-name: c;
	animation-duration: 1s;
	animation-fill-mode: forwards
}
@keyframes d {
	0% {
		transform: translateX(-15px)
	}
	60% {
		opacity: 1
	}
	70% {
		transform: none
	}
	80% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}
.starability-checkmark {
	display: block;
	position: relative;
	width: 150px;
	min-height: 60px;
	padding: 0;
	border: none
}
.starability-checkmark>input {
	position: absolute;
	margin-right: -100%;
	opacity: 0
}
.starability-checkmark>input:checked~label, .starability-checkmark>input:focus~label, .starability-checkmark>input:hover~label {
	background-position: 0 -30px
}
.starability-checkmark>input:focus+label {
	outline: 1px dotted #999
}
.starability-checkmark>label {
	position: relative;
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	color: transparent;
	cursor: pointer;
	background-image: url(../images/icons-checkmark.png);
	background-repeat: no-repeat
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-checkmark>label {
		background-image: url(../images/icons-checkmark@2x.png);
		background-size: 30px auto
	}
}
.starability-checkmark>label {
	position: static;
	z-index: 1
}
.starability-checkmark>label:before {
	display: none;
	position: absolute;
	content: ' ';
	width: 30px;
	height: 30px;
	background-image: url(../images/icons-checkmark.png);
	background-repeat: no-repeat;
	background-position: 0 -60px;
	right: -30px
}
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi), screen and (-webkit-min-device-pixel-ratio:2) {
	.starability-checkmark>label:before {
		background-image: url(../images/icons-checkmark@2x.png);
		background-size: 30px auto
	}
}
.starability-checkmark>input:checked+label:before {
	display: block;
	animation-name: d;
	animation-duration: .7s;
	animation-fill-mode: forwards
}