.power-switch{perspective:700px;background-color:#000;border-radius:5px;width:150px;height:195px;padding:20px;display:block;box-shadow:0 0 10px 2px #0003,0 0 1px 2px #000,inset 0 2px 2px -2px #fff,inset 0 0 2px 15px #47434c,inset 0 0 2px 22px #000}.power-switch input{display:none}.power-switch input:checked+.button{transform:translateZ(20px)rotateX(25deg);box-shadow:0 -10px 20px #ff1818}.power-switch input:checked+.button .light{animation:.2s .3s infinite flicker}.power-switch input:checked+.button .shine{opacity:1}.power-switch input:checked+.button .shadow{opacity:0}.power-switch .button{transform-origin:center center -20px;transform-style:preserve-3d;cursor:pointer;background:linear-gradient(#980000 0%,#6f0000 30% 70%,#980000 100%) no-repeat;height:100%;transition:all .3s cubic-bezier(1,0,1,1);display:block;position:relative;transform:translateZ(20px)rotateX(-25deg)}.power-switch .button:before{content:"";transform-origin:top;background-color:#b10000;background-image:linear-gradient(#fffc 10%,#ffffff4d 30%,#650000 75%,#320000),none;background-position:50%,0 0;background-repeat:no-repeat;background-size:97% 97%,auto;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100%;height:50px;position:absolute;top:0;transform:rotateX(-90deg)}.power-switch .button:after{content:"";transform-origin:top;background-image:linear-gradient(#650000,#320000);width:100%;height:50px;position:absolute;bottom:0;transform:translateY(50px)rotateX(-90deg);box-shadow:0 50px 8px #000,0 80px 20px #00000080}.power-switch .light{opacity:0;background-image:radial-gradient(#ffc97e,#ff1818 40%,#0000 70%);width:100%;height:100%;animation:1s light-off;position:absolute}.power-switch .dots{background-image:radial-gradient(#0000 30%,#650000b3 70%);background-size:10px 10px;width:100%;height:100%;position:absolute}.power-switch .characters{background-color:#0000;background-image:linear-gradient(#fff,#fff),radial-gradient(circle,#0000 50%,#fff 52% 70%,#0000 72%);background-position:50% 20%,50% 80%;background-repeat:no-repeat;background-size:5% 20%,33% 25%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100%;height:100%;position:absolute}.power-switch .shine{opacity:.3;background-color:#0000;background-image:linear-gradient(#fff,#0000 3%),linear-gradient(#ffffff80,#0000 50% 80%,#ffffff80);background-position:50%,50%;background-repeat:no-repeat;background-size:97% 97%,97% 97%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:100%;height:100%;transition:all .3s cubic-bezier(1,0,1,1);position:absolute}.power-switch .shadow{opacity:1;background:linear-gradient(#0000 70%,#000c) no-repeat;width:100%;height:100%;transition:all .3s cubic-bezier(1,0,1,1);position:absolute}@keyframes flicker{0%{opacity:1}80%{opacity:.8}to{opacity:1}}@keyframes light-off{0%{opacity:1}80%{opacity:0}}.power-switch.power-switch-sm{border-radius:4px;width:70px;height:90px;padding:10px;box-shadow:0 0 6px 1px #0003,0 0 1px 1px #000,inset 0 1px 1px -1px #fff,inset 0 0 1px 7px #47434c,inset 0 0 1px 10px #000}.power-switch.power-switch-sm .button:before{height:24px}.power-switch.power-switch-sm .button:after{height:24px;transform:translateY(24px)rotateX(-90deg);box-shadow:0 24px 4px #000,0 38px 10px #00000080}.power-switch.power-switch-sm .button{transform-origin:center center -12px}.power-switch.power-switch-sm input:checked+.button{transform:translateZ(12px)rotateX(25deg);box-shadow:0 -5px 10px #ff1818}.power-switch.power-switch-sm .button{transform:translateZ(12px)rotateX(-25deg)}.power-switch.power-switch-sm .dots{background-size:5px 5px}.power-switch.power-switch-sm .characters{background-color:#0000;background-image:linear-gradient(#fff,#fff),radial-gradient(circle,#0000 50%,#fff 52% 70%,#0000 72%);background-position:50% 20%,50% 78%;background-repeat:no-repeat;background-size:5% 18%,30% 22%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box}.power-switch.power-switch-md{border-radius:4px;width:100px;height:130px;padding:14px;box-shadow:0 0 8px 1px #0003,0 0 1px 1px #000,inset 0 1px 1px -1px #fff,inset 0 0 2px 10px #47434c,inset 0 0 2px 14px #000}.power-switch.power-switch-md .button:before{height:34px}.power-switch.power-switch-md .button:after{height:34px;transform:translateY(34px)rotateX(-90deg);box-shadow:0 34px 6px #000,0 54px 14px #00000080}.power-switch.power-switch-md .button{transform-origin:center center -16px}.power-switch.power-switch-md input:checked+.button{transform:translateZ(16px)rotateX(25deg);box-shadow:0 -8px 14px #ff1818}.power-switch.power-switch-md .button{transform:translateZ(16px)rotateX(-25deg)}.power-switch.power-switch-md .dots{background-size:7px 7px}.power-switch.power-switch-md .characters{background-color:#0000;background-image:linear-gradient(#fff,#fff),radial-gradient(circle,#0000 50%,#fff 52% 70%,#0000 72%);background-position:50% 20%,50% 78%;background-repeat:no-repeat;background-size:5% 18%,30% 22%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box}