@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

* {
    box-sizing: border-box;
}

/*body {
    position: absolute;
    top: 35%;
    left: 35%;
    transform: translate(-35%, -35%);
    font-family: 'lato';
    color: #333;
}*/

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

    input[type="radio"].cp:checked + label span {
        transform: scale(2.0);
        border-radius: 50px;
    }

span.cp {
    border-radius: 50px;
}

label.cp {
    display: inline-block;
    width: 75px;
    height: 75px;
    margin-right: 10px;
    cursor: pointer;
    background: none;
}

label.cp:hover span {
    transform: scale(2.0);
}

label.cp span {
    display: block;
    width: 75%;
    height: 75%;
    transition: transform .2s ease-in-out;
}

    label.cp span.red {
        background: #DB2828;
    }

    label.cp span.yellow {
        background: #FBBD08;
    }

    label.cp span.green {
        background: #21BA45;
    }

    label.cp span.blue {
        background: #2185D0;
    }

    label.cp span.black {
        background: #000000;
    }

    label.cp span.purple {
        background: #a333C8;
    }