#legendToggle { display: none; }

#legendButton {
	width: 100px;
	height: 100px;
	background: #9abfdc;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	vertical-align: center;
	right: -40px;
	border-radius: 50%;
	padding: 10px;
	transition: all 0.4s ease-in;
	opacity: 1;
}

#legendButton img {
	width: 65px;
	margin: 16px 0;
}

#legend  {
	width: 200px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: 70px;
	right: 20px;
	border-radius: 20px;
	padding: 10px 10px 0 10px;
	opacity: 0;
	transition: all 0.4s ease-in;
}


 #legendToggle:checked ~ #legend {
	opacity: 1;
}

#legendToggle:checked ~ #legendButton {
	width: 100px;
	height: 100px;
	background: #9abfdc;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: -100px;
	opacity: 0;

}


 #legendToggle:checked ~ #legendButton img {
	opacity: 0; display: none;}
	

	
#legendToggle:checked ~ #legend .legendItem{
	opacity: 1;
}

#legendToggle:checked ~ #legend .radialClose {
	opacity: 1;
 }


/* */

.legendItem{
	border-radius: 10px;
	background: rgba(255,255,255,0.5);
	padding: 10px;
	margin-bottom: 10px;
	opacity: 0;
	transition: all 0.4s ease-in;
}

.legendListItem {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	float: left;
	margin-right: 10px;

}

.legendItem input {
	width: 24px;
	height:24px;
	padding: 0px;
	border-radius: 50%;
	bottom: 25%;
	cursor: pointer;
}

#legendItem2 {
	width: 15px;
	height: 15px;
	background-color: #cd97dd;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
	border: 2px solid #8f53a1;

}
#legendItem3 {
	width: 15px;
	height: 15px;
	background-color: #c1838e;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
}
#legendItem4 {
	width: 15px;
	height: 15px;
	background-color: #e7b290;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
}
#legendItem5 {
	width: 15px;
	height: 15px;
	background-color: #8bc7b5;
	border-radius: 50%;
	float: left;
	margin-right: 10px;
}

.radialClose {
	width: 25px;
	padding: 5px;
	height: 25px;
	background: rgba(255,255,255,0.5);
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: -40px;
	opacity: 0;
	transition: all 0.4s ease-in;
	cursor: pointer;
 }