.ripple{position:relative;}
.ripple:after{content:"";display:block;position:absolute;width:13px;height:13px;top:3px;left:1px;z-index:999;pointer-events:none;background-image:radial-gradient(circle,#000 20%,transparent 10.01%);background-repeat:no-repeat;background-position:5% left;transform:scale(10,10);-ms-transform:scale(10.10);-webkit-transform:scale(10,10);opacity:0;transition:transform .5s, opacity 1s;-webkit-transition:transform .5s, opacity 1s;}
.ripple:active:after{transform:scale(0,0);-ms-transform:scale(0.0);-webkit-transform:scale(0,0);opacity:.5;transition:0s;-webkit-transition:0s;}
@media screen and (-webkit-min-device-pixel-ratio:0){.ripple{position:relative;}
 .ripple:after{content:"";display:block;position:absolute;width:13px;height:13px;top:5px;left:2px;z-index:999;pointer-events:none;background-image:radial-gradient(circle,#000 20%,transparent 10.01%);background-repeat:no-repeat;background-position:5% left;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s }
 .ripple:active:after{transform:scale(0,0);opacity:.5;transition:0s}
}



.control-group{display:inline-block;vertical-align:top;background:#fff;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,0.1);padding:30px;width:200px;height:210px;margin:10px;}
.control{display:block;position:relative;padding-left:30px;margin-bottom:15px;cursor:pointer;font-size:14px;font-weight:normal;}
.control input{position:absolute;z-index:-1;opacity:0;}
.control__indicator{position:absolute;top:2px;left:0;border-radius:2px;height:18px;width:18px;background:#ccc;}
.control--radio .control__indicator{border-radius:50%;}
.control:hover input ~ .control__indicator,.control input:focus ~ .control__indicator{background:#ccc;}
.control input:checked ~ .control__indicator{background:#dd322b;}
.control:hover input:not([disabled]):checked ~ .control__indicator,.control input:checked:focus ~ .control__indicator{background:#dd322b;}
.control input:disabled ~ .control__indicator{background:#e6e6e6;opacity:0.6;pointer-events:none;}
.control__indicator:after{content:'';position:absolute;display:none;}
.control input:checked ~ .control__indicator:after{display:block;}
.control--checkbox .control__indicator:after{left:7px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";}
.control--checkbox input:disabled ~ .control__indicator:after{border-color:#7b7b7b;}
.control--radio .control__indicator:after{left:6px;top:6px;height:6px;width:6px;border-radius:50%;background:#fff;}
.control--radio input:disabled ~ .control__indicator:after{background:#7b7b7b;}
.select{position:relative;display:inline-block;margin-bottom:15px;width:100%;}
.select select{display:inline-block;width:100%;cursor:pointer;padding:10px 15px;outline:0;border:0;border-radius:0;background:#e6e6e6;color:#7b7b7b;appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.select select::-ms-expand{display:none;}
.select select:hover,.select select:focus{color:#000;background:#ccc;}
.select select:disabled{opacity:0.5;pointer-events:none;}
.select__arrow{position:absolute;top:16px;right:15px;width:0;height:0;pointer-events:none;border-style:solid;border-width:8px 5px 0 5px;border-color:#7b7b7b transparent transparent transparent;}
.select select:hover ~ .select__arrow,.select select:focus ~ .select__arrow{border-top-color:#000;}
.select select:disabled ~ .select__arrow{border-top-color:#ccc;}