input {
	display:none;
}
.on, .off {
	position:absolute;
	margin: auto;
	text-align:center;
	right: 7px;
	-webkit-text-shadow:inset 1px 1px 1px black;
	width: 35px; height: 15px;
	border-radius: 1px;
}
.on {
	color:#bbb;
	padding-top: 3px;
	top: 2px;
	-webkit-transition:all 0.1s;
	font-family:sans-serif
}
.off {
	bottom:2px;
	-webkit-transition:all 0.1s;
	transform:scaleY(0.85);
	color:yellow;
}
.but{
	background-color:#272727;
	border-bottom-width:0px;
	box-shadow:
		inset 8px 6px 5px -7px rgba(0,0,0,1)
		,inset -8px 6px 5px -7px rgba(0,0,0,1)
		,inset 0 -3px 2px -2px rgba(200,200,200,.5)
		,0 3px 3px -2px rgba(0,0,0,1)
		,inset 0 -30px 60px -2px rgba(255,255,255,.2)
		,inset 0 20px 40px -2px rgba(0,0,0,.3);
	display:block;
	font-size:10px;
	height:42px;
	position:absolute;
	-webkit-transition:all 0.2s;
	width:50px;
	top: 0px; right: 0px;
	cursor: pointer;
}
.back {
	background-color: black;
	background-image:
		-webkit-linear-gradient(0deg, transparent 30%, transparent 70%)
		,-webkit-linear-gradient(0deg, rgba(150,150,150,0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);
	box-shadow:
		30px 30px 30px -20px rgba(0,0,0,.3)
		,-30px 30px 30px -20px rgba(0,0,0,.3)
		,0 30px 30px 0px rgba(0,0,0,.3)
		,inset 0 -1px 0 0 #333;
	box-sizing: border-box;
	width:50px; height:46px;
	-webkit-transition: all 0.2s;
	top: 5px; right: 5px;
	position: absolute;
}
.round {
	background: black;
	background:
		-webkit-linear-gradient(270deg, #444 ,  #222);
		-webkit-box-sizing:border-box;
	box-shadow:
		0px 0px 0px 8px rgba(0,0,0,.1)
		,0px 0px 3px 1px rgba(0,0,0,1)
		,inset 0 8px  3px -8px rgba(255,255,255,.4);
	height: 54px;
	margin: 0px auto;
	padding: 0px;
	width: 60px;
	top: 0px; right: 0px;
	position: absolute;
}

input:checked + .back .on, input:checked + .back .off {
	text-shadow:inset 1px 1px 1px black;
}
input:checked + .back .on {
	color: rgb(0,252,0);
	-webkit-transform:scaleY(0.85);
}
input:checked + .back .off {
	color:#bbb;
	background: rgba(255, 140, 0,0.6);
	-webkit-transform:scaleY(1);
}
input:checked + .back .but {
	background:#232323;
	background-image:-webkit-radial-gradient(50% 15%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));
	box-shadow:
		inset 8px -4px 5px -7px rgba(0,0,0,1)
		,inset -8px -4px 5px -7px rgba(0,0,0,1)
		, 0 -3px 8px -4px rgba(250,250,250,.4)
		,inset 0 3px 4px -2px rgba(10,10,10,1)
		,inset 20px 80px 80px -0px rgba(0,0,0,.2)
		,inset 20px -1px 40px -0px rgba(180,180,180,.2);
	margin-top:3px;
}
input:checked + .back {
	background-image:
		-webkit-linear-gradient(90deg, black 30%, transparent 70%)
		,-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);
	box-shadow:
		30px 30px 30px -20px rgba(0,0,0,.1)
		,-30px 30px 30px -20px rgba(0,0,0,.1)
		,0 30px 30px 0px rgba(0,0,0,.2)
		,inset 0 1px 2px 0 rgba(0,0,0,.6);
	padding:2px 4px;
}