.cont input{
	display: none;
}

.cont{
	position: absolute;
	top: 25px;
	right: -5px;
	transform: translate(-50%,-50%);
	display: block;
	width: 51px;
	height: 31px;
	border-radius: 16px;
	padding: 2px;
	cursor: pointer;
	overflow: hidden;
	transition: .2s;
} 

.switch::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #e9e9e9;
	z-index: -1;
	transition: inherit;
}

.switch{
	display: block;
	width: 27px;
	height: 27px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 3px 8px rgba(0,0,0,.3);
	transition: inherit;
}

.cont input:checked ~ .switch::before{
	background: #34c759;
}

.cont input:checked ~ .switch{
	margin-left: calc(100% - 27px);
}