.switch{
				width: 93px;
				border: solid 2px #699a8f;
				border-radius: 25px;
				margin-top:20px;
				input[type="radio"] {
					visibility: hidden;
					position: absolute;
					height: 100%;

					&#yes:checked {
						~ label[for="yes"] {
							color: white;
							background: #699a8f;
						}
					}

					&#no:checked {
						~ label[for="no"] {
							background: #699a8f;
							color: white;
						}
					}
				}


				label {
					cursor: pointer;
					text-transform: uppercase;
					width: 50px;
					font-size: 12px;
					font-weight: 600;
					margin: 0 -4px;
					padding: 5px 0;
					text-align: center;
					display: inline-block;
					-webkit-transition: all .4s;
					-moz-transition: all .4s;
					-ms-transition: all .4s;
					-o-transition: all .4s;
					transition: all .4s;
					border-radius: 25px;
				}
			}
.switch-field {
	display: flex;
	margin-bottom: 36px;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
/*	background-color: #e4e4e4; */
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 10px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #a5dc86;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}

/* This is just for CodePen. */

.form {
	max-width: 600px;
	font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
	font-weight: normal;
	line-height: 1.625;
	margin: 8px auto;
	padding: 16px;
}

h2 {
/*	font-size: 18px; */
	margin-bottom: 8px;
}