/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */
/* TOGGLE STYLING */
.toggleMe {
	margin: 0 0 1.5rem;
	box-sizing: border-box;
	font-size: 0;
	/*display: flex;*/
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
}
.toggleMe input {
	width: 0;
	height: 0;
	position: absolute;
	left: -9999px;
}
.toggleMe input + label {
	margin: 0;
	padding: 0.75rem 2rem;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	border: solid 1px #DDD;
	background-color: #FFF;
	font-size: 1rem;
	line-height: 140%;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
	/* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
	/*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
	/* ----- */
}
.toggleMe input + label:first-of-type {
	border-radius: 6px 0 0 6px;
	border-right: none;
}
.toggleMe input + label:last-of-type {
	border-radius: 0 6px 6px 0;
	border-left: none;
}
.toggleMe input:hover + label {
	border-color: #213140;
}
.toggleMe input:checked + label {
	background-color: #4B9DEA;
	color: #FFF;
	box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
	border-color: #4B9DEA;
	z-index: 1;
}
.toggleMe input:focus + label {
	outline: dotted 1px #CCC;
	outline-offset: 0.45rem;
}
@media (max-width: 800px) {
	.toggleMe input + label {
		padding: 0.75rem 0.25rem;
		flex: 0 0 50%;
		/*display: flex;*/
		justify-content: center;
		align-items: center;
	}
}