.switch .slide-button, .toggle span{display:none;}
@media only screen{.toggle{position:relative;padding:0;margin-left:100px;}
.toggle label{position:relative;z-index:3;display:block;width:100%;}
.toggle input{position:absolute;opacity:0;z-index:5;}
.toggle p{position:absolute;left:-100px;width:100%;margin:0;padding-right:100px;text-align:left;}
.toggle span{color:#ccc;position:absolute;top:0;left:0;z-index:5;display:block;width:50%;margin-left:100px;text-align:center;}
.toggle span:last-child{left:50%;}
.toggle .slide-button{position:absolute;right:0;top:0;z-index:4;display:block;width:50%;height:100%;padding:0;background:#76adfc;border-radius:.25rem;border:1px solid #3684b5;text-align:center;}
.switch-label{margin-bottom:.5rem;}
.switch{position:relative;padding:0;background-color:#aaa;border:1px solid rgba(0, 0, 0, 0.15);border-radius:.25rem;line-height:1.25;color:#7f7f7f;text-align:center;text-shadow:none;}
.switch input{position:absolute;opacity:0;}
.switch label{position:relative;z-index:2;float:left;width:50%;height:100%;margin:0;text-align:center;}
.switch .slide-button{position:absolute;top:0;left:0;padding:0;z-index:1;width:50%;height:100%;}
.switch input:last-of-type:checked ~ .slide-button{left:50%;}
.switch.switch-three label,
.switch.switch-three .slide-button{width:33.3%;}
.switch.switch-three input:checked:nth-of-type(2) ~ .slide-button{left:33.3%;}
.switch.switch-three input:checked:last-of-type ~ .slide-button{left:66.6%;}
.switch.switch-four label,
.switch.switch-four .slide-button{width:25%;}
.switch.switch-four input:checked:nth-of-type(2) ~ .slide-button{left:25%;}
.switch.switch-four input:checked:nth-of-type(3) ~ .slide-button{left:50%;}
.switch.switch-four input:checked:last-of-type ~ .slide-button{left:75%;}
.switch.switch-five label,
.switch.switch-five .slide-button{width:20%;}
.switch.switch-five input:checked:nth-of-type(2) ~ .slide-button{left:20%;}
.switch.switch-five input:checked:nth-of-type(3) ~ .slide-button{left:40%;}
.switch.switch-five input:checked:nth-of-type(4) ~ .slide-button{left:60%;}
.switch.switch-five input:checked:last-of-type ~ .slide-button{left:80%;}
.switch.switch-six label,
.switch.switch-six .slide-button{width:16.6%;}
.switch.switch-six input:checked:nth-of-type(2) ~ .slide-button{left:16.6%;}
.switch.switch-six input:checked:nth-of-type(3) ~ .slide-button{left:32.3%;}
.switch.switch-six input:checked:nth-of-type(4) ~ .slide-button{left:49.9%;}
.switch.switch-six input:checked:nth-of-type(5) ~ .slide-button{left:66.5%;}
.switch.switch-six input:checked:last-of-type ~ .slide-button{left:83.1%;}
.toggle, .switch{display:block;height:2.4rem;}
.switch *, .toggle *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
.switch .slide-button, .toggle .slide-button{display:block;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.toggle label, .toggle p, .switch label{color:#fff;line-height:36px;vertical-align:middle;}
.toggle input:checked ~ .slide-button{right:50%;}
.toggle input:focus ~ .slide-button,
.switch input:focus + label{outline:hidden;}
.switch, .toggle{-webkit-animation:bugfix infinite 1s;}
@-webkit-keyframes bugfix{from{position:relative;}
to{position:relative;}
}
}