.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: 50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-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: 50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-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: 50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-images/icons@2x.png);
        background-size: 30px auto
    }
}

.starability-grow>label:before {
    display: none;
    position: absolute;
    content: ' ';
    width: 50px;
    height: 50px;
    background-image: url(../starability-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(../starability-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: 70%;
    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:50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-images/icons@2x.png);
        background-size: 30px auto
    }
}

.starability-growRotate>label:before {
    display: none;
    position: absolute;
    content: ' ';
    width: 50px;
    height: 50px;
    background-image: url(../starability-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(../starability-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: 50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-images/icons@2x.png);
        background-size: 30px auto
    }
}

.starability-fade>label:before {
    display: none;
    position: absolute;
    content: ' ';
    width: 50px;
    height: 50px;
    background-image: url(../starability-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(../starability-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: 50px;
    height: 50px;
    color: transparent;
    cursor: pointer;
    background-image: url(../starability-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(../starability-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: 50px;
    height: 50px;
    background-image: url(../starability-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(../starability-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
}