/////////////////////
// switch controls
/////////////////////
.customize-control-switch {
	input[type="checkbox"] {
		display: none;
	}
	.switch {
		border: none;
		margin-bottom: 1.5rem;
		outline: 0;
		padding: 0;
		position: relative;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		label {
			background: rgba(0,0,0,.2);
			color: transparent;
			cursor: pointer;
			display: block;
			margin-bottom: 1rem;
			position: relative;
			text-indent: 100%;
			transition: left 0.15s ease-out;
			height: 2rem;
		    width: 4rem;
			&:after {
				background: #FFFFFF;
				content: "";
				display: block;
				height: 1.5rem;
				left: .25rem;
				position: absolute;
				top: .25rem;
				width: 1.5rem;
				-webkit-transition: left 0.15s ease-out;
				-moz-transition: left 0.15s ease-out;
				-o-transition: translate3d(0, 0, 0);
				transition: left 0.15s ease-out;
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				-o-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
		}
		input {
			left: 10px;
			opacity: 0;
			padding: 0;
			position: absolute;
			top: 9px;
			+ label {
				margin-left: 0;
				margin-right: 0;
			}
			&:checked {
				+ label {
					background: #3498DB;
					&:after {
						left: 2.25rem;
						background: #ffffff;
					}
				}
			}
		}
		&.round {
			border-radius: 1000px;
			label {
				border-radius: 2rem;
				&:after {
					border-radius: 2rem;
				}
			}
		}
	}
	.switch-on {
		position: absolute;
		left: -55px;
		top: 8px;
		color: white;
		font-weight: bold;
		font-size: 9px;
	}
	.switch-off {
		position: absolute;
		left: -25px;
		top: 8px;
		color: white;
		font-weight: bold;
		font-size: 9px;
	}
}