/* Align items to the center -- just for presentation purposes. */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* 1. Hide the default checkbox. */
input[type=checkbox] {
	display: none;
}

/* 2. Create the slider base and knob. */
label {
	cursor: pointer;
	text-indent: -9999px;
	width: 100px;
	height: 50px;
	background-color: #DFF7FA;
	border-radius: 25px;
	position: relative;
	transition: all .4s ease-out;
}

	label:after {
		content: '';
		position: absolute;
		top: 5px;
		left: 5px;
		width: 40px;
		height: 40px;
		background-color: #A5CACE;
		border-radius: 50%;
		transition: all .4s ease-out;
	}

/* 3. Create the styling for the checked states. */
input:checked + label {
	background: #96E7EF;
}

	input:checked + label:after {
		transform: translate3d(50px, 0, 0);
		background-color: #1D6269;
	}