﻿@media screen and (min-width: 1280px) {
		/*DESKTOP*/
		input[type="radio"] { position: absolute; opacity: 0; }

				/* Normal Track */
				input[type="radio"].ios-switch + span { display: block; vertical-align: middle; width: 40px; height: 20px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; background-color: #ddd; transition-duration: .4s; -webkit-transition-duration: .4s; -webkit-transition-property: background-color, box-shadow; transition-property: background-color, box-shadow; box-shadow: inset 0 0 0 0px rgba(0,0,0,0.2); margin: 3px; /*margin: 15px 1.2em 15px 2.5em;*/ }

				/* Checked Track (Blue) */
				input[type="radio"].ios-switch:checked + span { display: block; width: 40px; background-position: 0 0; background-color: #1980DD; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(25,128,221,1); }

				/* Tiny Track */
				input[type="radio"].tinyswitch.ios-switch + span { display: block; width: 34px; height: 18px; }

				/* Big Track */
				input[type="radio"].bigswitch.ios-switch + span { display: block; width: 50px; height: 25px; }

				/* Green Track */
				input[type="radio"].green.ios-switch:checked + span { display: block; background-color: #00e359; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(0,227,89,1); }

				/* Normal Knob */
				input[type="radio"].ios-switch + span > span { display: block; float: left; width: 18px; height: 18px; border-radius: inherit; background: #ffffff; -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: transform, background-color, box-shadow; transition-property: transform, background-color, box-shadow; -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1); transition-timing-function: cubic-bezier(.54,1.85,.5,1); -moz-transition-duration: 0.4s; -moz-transition-property: transform, background-color; transition-property: transform, background-color; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(0, 0, 0, 0.4); pointer-events: none; margin-top: 1px; margin-left: 1px; }

				/* Checked Knob (Blue Style) */
				input[type="radio"].ios-switch:checked + span > span { display: block; transform: translate3d(20px, 0, 0); -webkit-transform: translate3d(20px, 0, 0); -moz-transform: translate3d(20px, 0, 0); background-color: #ffffff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Tiny Knob */
				input[type="radio"].tinyswitch.ios-switch + span > span { display: block; width: 16px; height: 16px; margin-top: 1px; }

				/* Checked Tiny Knob (Blue Style) */
				input[type="radio"].tinyswitch.ios-switch:checked + span > span { display: block; transform: translate3d(16px, 0, 0); -webkit-transform: translate3d(16px, 0, 0); -moz-transform: translate3d(16px, 0, 0); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Big Knob */
				input[type="radio"].bigswitch.ios-switch + span > span { display: block; width: 23px; height: 23px; margin-top: 1px; }

				/* Checked Big Knob (Blue Style) */
				input[type="radio"].bigswitch.ios-switch:checked + span > span { transform: translate3d(25px, 0, 0); display: block; -webkit-transform: translate3d(25px, 0, 0); -moz-transform: translate3d(16px, 0, 0); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Green Knob */
				input[type="radio"].green.ios-switch:checked + span > span { display: block; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 162, 63,1); }
		/**/
}
/**/
@media screen and (max-width: 1280px){
		/*TABLET AND SMALL SCREEN*/
		input[type="radio"] { position: absolute; opacity: 0; }

				/* Normal Track */
				input[type="radio"].ios-switch + span { display: block; vertical-align: middle; width: 40px; height: 20px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; background-color: #fff; transition-duration: .4s; -webkit-transition-duration: .4s; -webkit-transition-property: background-color, box-shadow; transition-property: background-color, box-shadow; box-shadow: inset 0 0 0 0px rgba(0,0,0,0.2); margin: 3px; /*margin: 15px 1.2em 15px 2.5em;*/ }

				/* Checked Track (Blue) */
				input[type="radio"].ios-switch:checked + span { display: block; width: 40px; background-position: 0 0; background-color: #1980DD; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(25,128,221,1); }

				/* Tiny Track */
				input[type="radio"].tinyswitch.ios-switch + span { display: block; width: 34px; height: 18px; }

				/* Big Track */
				input[type="radio"].bigswitch.ios-switch + span { display: block; width: 50px; height: 25px; }

				/* Green Track */
				input[type="radio"].green.ios-switch:checked + span { display: block; background-color: #00e359; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(0,227,89,1); }

				/* Normal Knob */
				input[type="radio"].ios-switch + span > span { display: block; float: left; width: 18px; height: 18px; border-radius: inherit; background: #ffffff; -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: transform, background-color, box-shadow; transition-property: transform, background-color, box-shadow; -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1); transition-timing-function: cubic-bezier(.54,1.85,.5,1); -moz-transition-duration: 0.4s; -moz-transition-property: transform, background-color; transition-property: transform, background-color; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(0, 0, 0, 0.4); pointer-events: none; margin-top: 1px; margin-left: 1px; }

				/* Checked Knob (Blue Style) */
				input[type="radio"].ios-switch:checked + span > span { display: block; transform: translate3d(20px, 0, 0); -webkit-transform: translate3d(20px, 0, 0); -moz-transform: translate3d(20px, 0, 0); background-color: #ffffff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Tiny Knob */
				input[type="radio"].tinyswitch.ios-switch + span > span { display: block; width: 16px; height: 16px; margin-top: 1px; }

				/* Checked Tiny Knob (Blue Style) */
				input[type="radio"].tinyswitch.ios-switch:checked + span > span { display: block; transform: translate3d(16px, 0, 0); -webkit-transform: translate3d(16px, 0, 0); -moz-transform: translate3d(16px, 0, 0); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Big Knob */
				input[type="radio"].bigswitch.ios-switch + span > span { display: block; width: 23px; height: 23px; margin-top: 1px; }

				/* Checked Big Knob (Blue Style) */
				input[type="radio"].bigswitch.ios-switch:checked + span > span { transform: translate3d(25px, 0, 0); display: block; -webkit-transform: translate3d(25px, 0, 0); -moz-transform: translate3d(16px, 0, 0); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }

				/* Green Knob */
				input[type="radio"].green.ios-switch:checked + span > span { display: block; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 162, 63,1); }

		/**/
}
/**/
@media \0screen {
		/*DESKTOP IE8*/

		/**/
}
/**/
/*<label>Big<input type="radio" class="ios-switch green  bigswitch" checked /><span><span></span></span></label>
	<label><input type="radio" class="ios-switch bigswitch" checked /><span><span></span></span></label>

	<label>Normal<input type="radio" class="ios-switch green" /><span><span></span></span></label>
	<label><input type="radio" class="ios-switch" /><span><span></span></span></label>

	<label>Tiny<input type="radio" class="ios-switch green tinyswitch" checked /><span><span></span></span></label>
	<label><input type="radio" class="ios-switch tinyswitch" checked /><span><span></span></span></label>*/
