.smiley-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    position:absolute;
}
/*
    .options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
*/
/* Taken from http://jsfiddle.net/La8wQ/313/*/

/*.cc-selector-2 input {
    position: absolute;
    z-index: 999;
}*/

.smileybad {
    background-image: url('../../../images/ratings/smileybad.png');
}

.smileyokay {
    background-image: url('../../../images/ratings/smileyokay.png');
}

.smileygood {
    background-image: url('../../../images/ratings/smileygood.png');
}

/*
    .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
    .mastercard {
    background-image: url(http://i.imgur.com/SJbRQF7.png);
}

*/

.smiley-selector input:active + .ratingcard-smiley {
    opacity: .9;
}

.smiley-selector input:checked + .ratingcard-smiley {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.ratingcard-smiley {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 75px;
    height:50px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.1) grayscale(0.8) opacity(.7);
    -moz-filter: brightness(1.1) grayscale(0.8) opacity(.7);
    filter: brightness(1.1) grayscale(0.8) opacity(.7);
}

.ratingcard-smiley:hover {
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
        -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
        filter: brightness(1.2) grayscale(.5) opacity(.9);
    }