.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:130px;height:100px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1) grayscale(1) opacity(.5);
    -moz-filter: brightness(1) grayscale(1) opacity(.5);
    filter: brightness(1) grayscale(1) opacity(.5);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1) grayscale(.5) opacity(.9);
    filter: brightness(1) grayscale(.5) opacity(.9);
}

input[type="radio"][id^="cb"] {
    display: none;
}

label.card {
    border: 1px solid #fff;
    padding: 10px;
    position: relative;
    margin: 10px;
    cursor: pointer;
    border-radius: 0;
}

label.card:before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 24px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label.card img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}



:checked + label.card:before {
    content: "✓";
    background-color: grey;
    transform: scale(1);
}

:checked + label.card img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
}