.switch{position:relative;display:inline-block;width:34px;height:14px;opacity:.5;left:3px;top:3px;box-shadow:0 0 2px rgba(0,0,0,.12);border-radius:24px}.knob,.switch{background:#55aafa;transition:all .3s}.knob{content:"";position:absolute;width:20px;height:20px;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.24);left:20px}.checkbox:checked+.switch{background:#d1cece}.knobmod{left:0;background:#f1f1f1;box-shadow:0 2px 2px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.12)}.checkbox{display:none}