.container {
 	width: 140px;
 	height: 140px
 }

 .container .origin {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	z-index: 111;
 	width: 2px;
 	height: 2px;
 	margin: -1px 0 0 -1px;
 	background-color: #f50;
 }

 .de {
 	user-select: none;
 	position: relative;
 	/* width: 230px;
            height: 230px;  */
 	width: 140px;
 	height: 140px;
 	border-radius: 100%;
 	box-shadow: 0 0 25px rgba(0, 0, 0, .1);
 	background-color: transparent;
 }

 .de .den,
 .de .dene,
 .de .denem,
 .de .deneme,
 .de .light,
 .de .dot {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 }

 .den {
 	position: relative;
 	/* width: 220px;
            height: 220px;
            margin: -110px 0 0 -110px; */
 	width: 140px;
 	height: 140px;
 	margin: -70px 0 0 -70px;
 	border-radius: 100%;
 	//box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 2px 20px rgba(255, 255, 255, 1);
 	box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6);

 	background: #888888;
 	background: -moz-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
 	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #888888), color-stop(100%, #333333));
 	background: -webkit-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
 	background: -o-radial-gradient(center, ellipse cover, #888888 0%, #333333 100%);
 }

 .dene {
 	z-index: 4;
 	/* width: 140px;
            height: 140px;
            margin: -70px 0 0 -70px; */
 	width: 70px;
 	height: 70px;
 	margin: -35px 0 0 -35px;
 	border-radius: 100%;
 	box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
 	background: #f2f6f5;
 	background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
 	background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
 	background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
 }

 .denem {
 	/* width: 120px;
            height: 120px;
            margin: -60px 0 0 -60px; */
 	width: 60px;
 	height: 60px;
 	margin: -30px 0 0 -30px;
 	border-radius: 100%;
 	background: #cbd5d6;
 	background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
 	background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
 	background: -o-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
 }

 .deneme {
 	/* width: 100px;
            height: 100px;
            margin: -50px 0 0 -50px; */
 	width: 70px;
 	height: 70px;
 	margin: -35px 0 0 -35px;
 	border-radius: 100%;
 	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .9);
 	background: #eef7f6;
 	background: -moz-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef7f6), color-stop(100%, #8d989a));
 	background: -webkit-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
 	background: -o-linear-gradient(top, #eef7f6 0%, #8d989a 100%);
 }

 .den .switch {
 	z-index: 3;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 }

 .den .switch label {
 	z-index: 2;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	width: 50%;
 	height: 70px;
 	margin-top: -35px;
 	transform-origin: 0% 50%;
 	-webkit-transform-origin: 0% 50%;
 	-o-transform-origin: 0% 50%;
 	cursor: pointer;
 }

 .den .switch label:after {
 	content: "";
 	position: absolute;
 	top: 6px;
 	left: 1px;
 	width: 100%;
 	height: 30px;
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 }

 .den .switch label:before {
 	content: "";
 	position: absolute;
 	bottom: 6px;
 	left: 1px;
 	width: 100%;
 	height: 30px;
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);
 }

 .den .switch label span {
 	z-index: 2;
 	position: absolute;
 	top: 0;
 	right: 0;
 	width: 40px;
 	height: 100%;
 	font-weight: bold;
 	font-size: 15px;
 	line-height: 70px;
 	text-align: center;
 	color: #eee;
 	text-shadow: 0 1px 0 #444;
 }

 .den .switch label:nth-child(1) {
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 }

 .den .switch label:nth-child(1) span {
 	right: 2px;
 	font-size: 13px;
 	transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
 	-o-transform: rotate(90deg);
 }

 .den .switch label:nth-child(2) {
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 }

 .den .switch label:nth-child(2) span {
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);
 }

 .den .switch label:nth-child(3) {
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);
 }

 .den .switch label:nth-child(3) span {
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 }

 .den .switch label:nth-child(4) {
 	transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
 	-o-transform: rotate(90deg);
 }

 .den .switch label:nth-child(4) span {
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 }

 .den .switch label:nth-child(5) {
 	transform: rotate(150deg);
 	-webkit-transform: rotate(150deg);
 	-o-transform: rotate(150deg);
 }

 .den .switch label:nth-child(5) span {
 	transform: rotate(-150deg);
 	-webkit-transform: rotate(-150deg);
 	-o-transform: rotate(-150deg);
 }

 .den .switch label:nth-child(6) {
 	transform: rotate(210deg);
 	-webkit-transform: rotate(210deg);
 	-o-transform: rotate(210deg);
 }

 .den .switch label:nth-child(6) span {
 	transform: rotate(-210deg);
 	-webkit-transform: rotate(-210deg);
 	-o-transform: rotate(-210deg);
 }

 .den .switch input {
 	position: absolute;
 	opacity: 0;
 	visibility: hidden;
 }

 /* SWITCH LIGHT */

 .den .light {
 	z-index: 1;
 	width: 50%;
 	height: 100px;
 	margin-top: -50px;
 	transform-origin: 0% 50%;
 	-webkit-transform-origin: 0% 50%;
 	-o-transform-origin: 0% 50%;
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 	-webkit-transition: all .5s;
 	transition: all .5s;
 	-o-transition: all .5s;
 }

 .den .light span {
 	opacity: .4;
 	position: absolute;
 	top: 0;
 	left: 15px;
 	width: 100px;
 	height: 100px;
 	background: radial-gradient(ellipse at center,
 			rgba(0, 255, 0, 0.8) 0%,
 			rgba(0, 255, 0, 0.2) 42%,
 			rgba(0, 255, 0, 0) 72%);
 	background: -o-radial-gradient(center, ellipse cover, rgba(184, 163, 204, 1) 0%, rgba(159, 197, 224, 0.42) 42%, rgba(111, 113, 179, 0) 72%, rgba(67, 34, 137, 0) 100%);

 }

 /* SWITCH LIGHT POSITION */

 .den #switch_off:checked~.light {
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 }

 .den #switch_off:checked~.light span {

 	background: radial-gradient(ellipse at center,
 			rgba(255, 97, 77, 0.8) 0%,
 			rgba(255, 94, 0, 0.2) 42%,
 			rgba(255, 72, 0, 0) 72%);
 }

 .den #switch_1:checked~.light {
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 }

 .den #switch_2:checked~.light {
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);
 }

 .den #switch_3:checked~.light {
 	transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
 	-o-transform: rotate(90deg);
 }

 .den #switch_4:checked~.light {
 	transform: rotate(150deg);
 	-webkit-transform: rotate(150deg);
 	-o-transform: rotate(150deg);
 }

 .den #switch_5:checked~.light {
 	transform: rotate(210deg);
 	-webkit-transform: rotate(210deg);
 	-o-transform: rotate(210deg);
 }

 /* SWITCH LIGHT */

 .den .dot {
 	z-index: 6;
 	width: 50%;
 	height: 12px;
 	margin-top: -6px;
 	transform-origin: 0% 50%;
 	-webkit-transform-origin: 0% 50%;
 	-o-transform-origin: 0% 50%;
 	transition: all .5s;
 	-moz-transition: all .5s;
 	-o-transition: all .5s;
 }

 .den .dot span {
 	position: absolute;
 	top: 0;
 	//left: 30px;
 	left: 15px;
 	width: 12px;
 	height: 12px;
 	border-radius: 100%;
 	background: #dae2e4;
 	background: -moz-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dae2e4), color-stop(100%, #ecf5f4));
 	background: -webkit-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);
 	background: -o-linear-gradient(top, #dae2e4 0%, #ecf5f4 100%);


 }

 /* SWITCH LIGHT POSITION */

 .den #switch_off:checked~.dot {
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 }

 .den #switch_off:checked~.dot span {
 	transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
 	-o-transform: rotate(90deg);
 	background: red;
 }

 .den #switch_1:checked~.dot {
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 }

 .den #switch_1:checked~.dot span {
 	opacity: .9;
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);
 	background: green;

 }

 .den #switch_2:checked~.dot {
 	transform: rotate(30deg);
 	-webkit-transform: rotate(30deg);
 	-o-transform: rotate(30deg);

 }

 .den #switch_2:checked~.dot span {
 	opacity: .5;
 	transform: rotate(-30deg);
 	-webkit-transform: rotate(-30deg);
 	-o-transform: rotate(-30deg);
 	background: green;

 }

 .den #switch_3:checked~.dot {
 	transform: rotate(90deg);
 	-webkit-transform: rotate(90deg);
 	-o-transform: rotate(90deg);

 }

 .den #switch_3:checked~.dot span {
 	opacity: .4;
 	transform: rotate(-90deg);
 	-webkit-transform: rotate(-90deg);
 	-o-transform: rotate(-90deg);
 	background: green;

 }

 .den #switch_4:checked~.dot {
 	transform: rotate(150deg);
 	-webkit-transform: rotate(150deg);
 	-o-transform: rotate(150deg);
 }

 .den #switch_4:checked~.dot span {
 	opacity: .5;
 	transform: rotate(-150deg);
 	-webkit-transform: rotate(-150deg);
 	-o-transform: rotate(-150deg);
 	background: green;

 }

 .den #switch_5:checked~.dot {
 	transform: rotate(210deg);
 	-webkit-transform: rotate(210deg);
 	-o-transform: rotate(210deg);
 }

 .den #switch_5:checked~.dot span {
 	opacity: .9;
 	transform: rotate(-210deg);
 	-webkit-transform: rotate(-210deg);
 	-o-transform: rotate(-210deg);
 	background: green;

 }

 /* LINE */

 .den hr.line {
 	z-index: 1;
 	position: absolute;
 	top: 50%;
 	width: 100%;
 	height: 0;
 	margin-top: -1px;
 	border-width: 1px 0;
 	border-style: solid;
 	border-top-color: #3c3d3f;
 	border-bottom-color: #666769;
 }

 .den hr.line:nth-child(1) {
 	transform: rotate(-60deg);
 	-webkit-transform: rotate(-60deg);
 	-o-transform: rotate(-60deg);
 }

 .den hr.line:nth-child(2) {
 	transform: rotate(60deg);
 	-webkit-transform: rotate(60deg);
 	-o-transform: rotate(60deg);
 }

 /* GLOBALS */


 *,
 *:after,
 *:before {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
 }

 .switchBtn {
 	margin: 10px;
 	position: relative;
 }

 .switchBtn label {
 	width: 100%;
 	height: 100%;
 	position: relative;
 	display: block;
 	color: black;
 }

 .switchBtn input {
 	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
 	opacity: 0;
 	z-index: 100;
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	cursor: pointer;
 }

 .switchBtn.lightManege {
 	/* width: 180px;
            height: 50px; */
 	width: 120px;
 	height: 30px;
 	display: flex;
 }

 .switchBtn.lightManege span {}

 .switchBtn.lightManege label {
 	//display: inline-block;
 	//margin-left: 40px;
 	width: 100%;
 	height: 100%;
 	background: #a5a39d;
 	border-radius: 40px;
 	box-shadow:
 		inset 0 3px 8px 1px rgba(0, 0, 0, 0.2),
 		0 1px 0 rgba(255, 255, 255, 0.5);
 }

 .switchBtn.lightManege label:after {
 	content: "";
 	position: absolute;
 	z-index: -1;
 	top: -8px;
 	right: -8px;
 	bottom: -8px;
 	left: -8px;
 	border-radius: inherit;
 	background: #ababab;
 	background: -moz-linear-gradient(#f2f2f2, #ababab);
 	background: -ms-linear-gradient(#f2f2f2, #ababab);
 	background: -o-linear-gradient(#f2f2f2, #ababab);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
 	background: -webkit-linear-gradient(#f2f2f2, #ababab);
 	background: linear-gradient(#f2f2f2, #ababab);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),
 		0 1px 1px rgba(0, 0, 0, 0.25);
 }

 .switchBtn.lightManege label:before {
 	content: "";
 	position: absolute;
 	z-index: -1;
 	top: -18px;
 	right: -18px;
 	bottom: -18px;
 	left: -18px;
 	border-radius: inherit;
 	background: #eee;
 	background: -moz-linear-gradient(#e5e7e6, #eee);
 	background: -ms-linear-gradient(#e5e7e6, #eee);
 	background: -o-linear-gradient(#e5e7e6, #eee);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
 	background: -webkit-linear-gradient(#e5e7e6, #eee);
 	background: linear-gradient(#e5e7e6, #eee);
 	box-shadow:
 		0 1px 0 rgba(255, 255, 255, 0.5);
 	-webkit-filter: blur(1px);
 	-moz-filter: blur(1px);
 	-ms-filter: blur(1px);
 	-o-filter: blur(1px);
 	filter: blur(1px);
 }

 .switchBtn.lightManege label i {
 	display: block;
 	height: 100%;
 	width: 60%;
 	border-radius: inherit;
 	background: silver;
 	position: absolute;
 	z-index: 2;
 	right: 40%;
 	top: 0;
 	background: #b2ac9e;
 	background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -o-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
 	background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
 	background: linear-gradient(#f7f2f6, #b2ac9e);
 	box-shadow:
 		inset 0 1px 0 white,
 		0 0 8px rgba(0, 0, 0, 0.3),
 		0 5px 5px rgba(0, 0, 0, 0.2);
 }

 .switchBtn.lightManege label i:after {
 	content: "";
 	position: absolute;
 	left: 15%;
 	top: 25%;
 	width: 70%;
 	height: 50%;
 	background: #d2cbc3;
 	background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -o-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
 	background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
 	background: linear-gradient(#cbc7bc, #d2cbc3);
 	border-radius: inherit;
 }

 .switchBtn.lightManege label i:before {
 	content: "off";
 	text-transform: uppercase;
 	font-style: normal;
 	font-weight: bold;
 	color: rgba(0, 0, 0, 0.4);
 	text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
 	font-family: Helvetica, Arial, sans-serif;
 	//font-size: 24px;
 	font-size: 16px;
 	position: absolute;
 	top: 50%;
 	//margin-top: -12px;
 	margin-top: -8px;
 	//right: -50%;
 	right: -55%;
 }

 .switchBtn.lightManege input:checked~label {
 	background: #9abb82;
 }

 .switchBtn.lightManege input:checked~label i {
 	right: -1%;
 }

 .switchBtn.lightManege input:checked~label i:before {
 	content: "on";
 	right: 115%;
 	color: #82a06a;
 	text-shadow:
 		0 1px 0 #afcb9b,
 		0 -1px 0 #6b8659;
 }

 /************spots**********/
 .switchBtn.spot {
 	/* width: 180px;
  height: 50px; */
 	width: 80px;
 	height: 30px;
 	display: flex;

 }

 .switchBtn.spot span {
 	display: block;
 	margin-right: 5px;
 	width: 30px;
 	height: 25px;
 	text-align: center;
 	//font-family: NumerHIC;
 	font-size: 1.5em;
 	line-height: 1em;
 }

 .switchBtn.spot span.red {
 	border-radius: 50%;
 	background-color: red;
 }

 .switchBtn.spot span.jaune {
 	border-radius: 50%;
 	background-color: yellow;
 }

 .switchBtn.spot span.bleu {
 	border-radius: 50%;
 	background-color: DodgerBlue;
 }

 .switchBtn.spot span.purple {
 	border-radius: 50%;
 	background-color: Fuchsia;
 }

 .switchBtn.spot label {
 	display: block;
 	width: 100%;
 	height: 100%;
 	background: #a5a39d;
 	border-radius: 40px;
 	box-shadow:
 		inset 0 3px 8px 1px rgba(0, 0, 0, 0.2),
 		0 1px 0 rgba(255, 255, 255, 0.5);
 }

 .switchBtn.spot label:after {
 	content: "";
 	position: absolute;
 	z-index: -1;
 	top: -8px;
 	right: -8px;
 	bottom: -8px;
 	left: -8px;
 	border-radius: inherit;
 	background: #ababab;
 	background: -moz-linear-gradient(#f2f2f2, #ababab);
 	background: -ms-linear-gradient(#f2f2f2, #ababab);
 	background: -o-linear-gradient(#f2f2f2, #ababab);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
 	background: -webkit-linear-gradient(#f2f2f2, #ababab);
 	background: linear-gradient(#f2f2f2, #ababab);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),
 		0 1px 1px rgba(0, 0, 0, 0.25);
 }

 .switchBtn.spot label:before {
 	content: "";
 	position: absolute;
 	z-index: -1;
 	top: -18px;
 	right: -18px;
 	bottom: -18px;
 	left: -18px;
 	border-radius: inherit;
 	background: #eee;
 	background: -moz-linear-gradient(#e5e7e6, #eee);
 	background: -ms-linear-gradient(#e5e7e6, #eee);
 	background: -o-linear-gradient(#e5e7e6, #eee);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
 	background: -webkit-linear-gradient(#e5e7e6, #eee);
 	background: linear-gradient(#e5e7e6, #eee);
 	box-shadow:
 		0 1px 0 rgba(255, 255, 255, 0.5);
 	-webkit-filter: blur(1px);
 	-moz-filter: blur(1px);
 	-ms-filter: blur(1px);
 	-o-filter: blur(1px);
 	filter: blur(1px);
 }

 .switchBtn.spot label i {
 	display: block;
 	height: 100%;
 	width: 60%;
 	border-radius: inherit;
 	background: silver;
 	position: absolute;
 	z-index: 2;
 	right: 40%;
 	top: 0;
 	background: #b2ac9e;
 	background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -o-linear-gradient(#f7f2f6, #b2ac9e);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
 	background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
 	background: linear-gradient(#f7f2f6, #b2ac9e);
 	box-shadow:
 		inset 0 1px 0 white,
 		0 0 8px rgba(0, 0, 0, 0.3),
 		0 5px 5px rgba(0, 0, 0, 0.2);
 }

 .switchBtn.spot label i:after {
 	content: "";
 	position: absolute;
 	left: 15%;
 	top: 25%;
 	width: 70%;
 	height: 50%;
 	background: #d2cbc3;
 	background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -o-linear-gradient(#cbc7bc, #d2cbc3);
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
 	background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
 	background: linear-gradient(#cbc7bc, #d2cbc3);
 	border-radius: inherit;
 }

 .switchBtn.spot label i:before {
 	content: "off";
 	text-transform: uppercase;
 	font-style: normal;
 	font-weight: bold;
 	color: rgba(0, 0, 0, 0.4);
 	text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
 	font-family: Helvetica, Arial, sans-serif;
 	//font-size: 24px;
 	font-size: 8px;
 	position: absolute;
 	top: 50%;
 	//margin-top: -12px;
 	margin-top: -4px;
 	//right: -50%;
 	right: -55%;
 }

 .switchBtn.spot input:checked~label {
 	background: #9abb82;
 }

 .switchBtn.spot input:checked~label i {
 	right: -1%;
 }

 .switchBtn.spot input:checked~label i:before {
 	content: "on";
 	right: 115%;
 	color: #82a06a;
 	text-shadow:
 		0 1px 0 #afcb9b,
 		0 -1px 0 #6b8659;
 }


 .button {
 	cursor: pointer;
 	display: inline-block;
 	margin: 0 auto;

 	border-radius: 10px;

 	box-shadow:
 		0px 3px rgba(128, 128, 128, 1),
 		/* gradient effects */
 		0px 4px rgba(118, 118, 118, 1),
 		0px 5px rgba(108, 108, 108, 1),
 		0px 6px rgba(98, 98, 98, 1),
 		0px 7px rgba(88, 88, 88, 1),
 		0px 4px rgba(78, 78, 78, 1),
 		/*0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
 		0px 7px 6px -1px rgba(128, 128, 128, 1);
 	/* shadow */

 	transition: -webkit-box-shadow .1s ease-in-out;
 }

 .button span {
 	background-color: #E8E8E8;
 	background-image:
 		/* gloss gradient */
 		gradient(linear,
 			left bottom,
 			left top,
 			color-stop(50%, rgba(255, 255, 255, 0)),
 			color-stop(50%, rgba(255, 255, 255, 0.3)),
 			color-stop(100%, rgba(255, 255, 255, 0.2)));
 	box-shadow:
 		0px -1px #fff,
 		/* top highlight */
 		0px 1px 1px #FFFFFF;
 	/* bottom edge */

 	background-size: 100%, 100%, 100%, 4px 4px;

 	border-radius: 10px;
 	transition: transform .1s ease-in-out;

 	display: inline-block;
 	padding: 4px 10px 0px 10px;
 	color: #3A474D;
 }

 .button span img {
 	max-width: 30px
 }

 .button:active {
 	box-shadow:
 		0px 3px rgba(128, 128, 128, 1),
 		0px 4px rgba(118, 118, 118, 1),
 		0px 5px rgba(108, 108, 108, 1),
 		0px 6px rgba(98, 98, 98, 1),
 		0px 7px rgba(88, 88, 88, 1),
 		0px 8px rgba(78, 78, 78, 1),
 		0px px 2px 0px rgba(128, 128, 128, .6);
 	/* shadow */
 }

 .button:active span {
 	transform: translate(0, 5px);
 	/* depth of button press */
 }