/* General */
    .Colored{ align-items: center;margin: 20px; display: flex; flex-wrap: wrap; vertical-align: middle;}
/* Input */
    .Colored input[type='radio']{cursor: pointer; outline: none; display: inline-block; -webkit-appearance: none; box-shadow: 0px 2px 2px rgba(0,0,0,0.2) inset;  height: 30px; border-radius: 5px; width: 30px; margin: 4px; padding: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
    .Colored input[type='radio']:checked{box-shadow: 0px 6px 5px rgba(0,0,0,0.2), inset 0px 0px 0px 5px rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.514);}
/* Animation */
    @-webkit-keyframes Colored {
        from,
        20%,
        40%,
        60%,
        80%,
        to  { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
        0%  { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
        20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
        40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
        60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
        80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); }
        to  { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
    }
  @keyframes Colored {
        from,
        20%,
        40%,
        60%,
        80%,
        to  { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
        0%  { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
        20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
        40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}
        60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
        80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}
        to  { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  }
/* Animation */
    .Colored input[type='radio']:checked { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; animation-duration: 1s;  -webkit-animation-name: Colored; animation-name: Colored;}