.toggle-wrapper {
	flex: 1 1 calc(100% / 3);
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;

	@media (max-width: 960px) {
		flex: 1 1 calc(100% / 2);
	}
	@media (max-width: 700px) {
		flex: 1 1 100%;
	}
}

.toggle {
	position: relative;
	display: inline-block;

	input {
		height: 40px !important;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 40px;
	}
}

.toggle-item {
	width: 3.8em;
	background: transparent;
	height: 3em;
	display: inline-block;
	border-radius: 50px;
	margin: 10px 0px;
	position: relative;
	transition: all .3s ease;
	transform-origin: 20% center;
	cursor: pointer;

	&:before {
		content: '';
		display: block;
		transition: all .2s ease;
		width: 1em !important;
    	height: 1em !important;
		top: .35em;
		left: .25em;
    	border-radius: 2em;
    	border: 2px solid #88cf8f;
		transition: .3s ease;
	}
}

.transparent {
	label {
		background: transparent;
		border: 2px solid #212121;
		height: 1.65em;

		&:before {
			content: '';
			border: 3px solid #212121;
			width: 2em;
			height: 2em;
			top: .082em !important;
			left: .091em;
			background: #212121;
    		position: absolute;
		}
	}
}

#transparent:checked + label {
	&:before {
		transform: translateX(30px);
	}
}