@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */
 
 
/* TOGGLE STYLING */
 .toggle {
	 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;
}
 .toggle input {
	 width: 0;
	 height: 0;
	 position: absolute;
	 left: -9999px;
}
 .toggle input + label {
	 margin: 0;
	 padding: 0.55rem 1rem;
	 box-sizing: border-box;
	 position: relative;
	 display: inline-block;
	 border: solid 1px #4fbfa8;
	 background-color: #f0f0f0;
	 font-size: 0.8rem;
	 line-height: 140%;
	 font-weight: 400;
	 cursor: pointer;
     color: #4fbfa8;
	 text-align: center;
	 align-items: center;
	 justify-content: 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;
	*/
	/* ----- */
}
 .toggle input + label:first-of-type {
	 border-radius: 6px 0 0 6px;
	 border-right: none;
}
 .toggle input + label:last-of-type {
	 border-radius: 0 6px 6px 0;
	 border-left: none;
}
 .toggle input:hover + label {
	 border-color: #4fbfa8;
	 box-shadow: 0 0 10px rgba(102, 179, 251, .5);
	 background-color: #a1dace;
	 color: #fff;
	 
    
}
 .toggle input:checked + label {
	 background-color: #4fbfa8;
	 color: #fff;
	 box-shadow: 0 0 10px rgba(102, 179, 251, .5);
	 border-color: #4fbfa8;
	 z-index: 1;
	 
}

 .toggle input:focus + label {
	 outline: transparent;
	 outline-offset: 0.45rem;
}
 @media (max-width: 800px) {
	 .toggle input + label {
		 padding: 0.75rem 0.25rem;
		 flex: 0 0 50%;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
 .status {
	 margin: 0;
	 font-size: 1rem;
	 font-weight: 400;
}
 .status span {
	 font-weight: 600;
	 color: #4fbfa8;
}
 .status span:first-of-type {
	 display: inline;
}
 .status span:last-of-type {
	 display: none;
}
 @media (max-width: 800px) {
	 .status span:first-of-type {
		 display: none;
	}
	 .status span:last-of-type {
		 display: inline;
	}

	#menu {
		position: fixed;
		right: 0;
		top: 50%;
		width: 8em;
		margin-top: -2.5em;
		z-index: 1;
	  }
	  
}