.my-radio {
    display: none;
}

    /**
 * Make those labels sexy
 */
    .my-radio ~ label {
        font-size: 1.2rem;
        font-weight: bold;
        line-height: 1;
        cursor: pointer;
        display: block;
        padding: 0.5rem 1rem 0.5rem 2.3rem;
        position: relative;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        whitespace: no-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: fit-content;
        -webkit-transition: all .15s ease;
        transition: all .15s ease;
        /**
   * This is the radio fake dot basically
   */
    }

        .my-radio ~ label:first-of-type {
            border: 0;
        }

        .my-radio ~ label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.4rem;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            border: .2rem solid #ccc;
        }

    .my-radio:disabled + label {
        background: #efefef;
        color: rgba(0, 0, 0, 0.5);
        cursor: not-allowed;
    }

        .my-radio:disabled + label:hover {
            border-color: rgba(0, 0, 0, 0.1);
        }

        .my-radio:disabled + label:before {
            border-color: white;
            background: white;
        }

.button-label {
    display: inline-block;
    padding: 0.7em 0.6em;
    cursor: pointer;
    color: #292929;
    border-radius: 0.25em;
    background: #efefef;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .button-label > h1 {
        font-size: 0.7em;
        font-family: "Lato", sans-serif;
        margin: 0;
    }

    .button-label:hover {
        background: #d6d6d6;
        color: #101010;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
    }

    .button-label:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
    }

.image-radio .my-radio ~ label {
}
.image-radio .my-radio ~ label:before {
    top: 35%;
}
.image-radio .my-radio img {
}

@media (max-width: 40em) {
    .button-label {
        padding: 0em 1em 3px;
        margin: 0.25em;
    }
}