@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body{margin: 20px; padding: 10px; font-size:1.4vw; font-family: 'Ubuntu', sans-serif;}
.mindmap{ text-align: left;margin:1vw;}
.mindmap label:checked{	display: none; }
.mindmap label{
	display: inline-block; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none;  position: relative;
	margin:0; padding:.5em 2.1em .5em .5em;
	vertical-align: middle; 	
}
.mindmap label:after{
	content: "+"; display:block; position: absolute; z-index: 2;
	right: 0; top:0; bottom:0;
	margin: auto 0 auto auto; 
}
 .mindmap input{
	position: absolute; z-index: 1;
	top: 0; bottom: 0;
	width: 1.5em; height: 1.5em;
	margin: auto 0 auto -1.5em;
	opacity: 0;
	cursor: pointer;
}
.mindmap input+ul:before{
	content: "-"; display: block; position: absolute;
	left:auto; right: 100%; top:0; bottom: 0;
	margin: auto ;
}
.mindmap label:after,.mindmap input+ul:before{
	width:1em; height: 1em; line-height: 1em;
	border-radius: 50% 0 0 50%;
	padding: .1em;
	text-align: center;	vertical-align: middle;
	
}
.mindmap input:checked+ul{
	0display: none;	
	margin: -100% -12em -100% 12em;
	opacity: 0;
}
.mindmap,.mindmap ul{
	display: inline-block; position: relative;	
	padding: .5em;
	vertical-align: middle;
	list-style: none;	
	-webkit-transition:all .15s ease; -moz-transition:all .15s ease; -o-transition:all .15s ease; transition:all .15s ease;
}
.mindmap ul li{
	position: relative;
	float: left;
	clear: both;
	margin: .5em; padding:.5em;	
	border-radius: .5em;
}
.mindmap,.mindmap .topics{
	padding:0;	background: transparent;
	box-shadow: none;
	border: none;
}
/*decoration*/
.mindmap{}
.mindmap ul{
	background: hsla(0, 0%, 50%, .02);	
	border-left: solid hsla(10%,30%,20%,.1) 6px;
	border-radius: 1em;
	box-shadow: 0em 0 .2em hsla(0,0%,0%,.2),inset .1em 0 .2em hsla(0,0%,0%,.2);
}
.mindmap input+ul:before{	
    width: .5em; height: .5em; line-height: .45em; 
    font-size: 1.5em;
	color: hsla(0,0%,100%, 0);
	box-shadow:inset .15em 0 .15em hsla(0,0%,0%,.5);
	margin-right: 8px;
}
.mindmap label,.mindmap ul li {
	background: hsla(10%,40%,30%,1);	
	box-shadow: 0 0 .1em .1em hsla(0,0%,40%,.4),inset 0 0 0 .1em hsla(0,0%,0%,.2);
}
.mindmap label{
	border-radius: .5em 0 0 .5em;
	-webkit-transition:all .15s ease; -moz-transition:all .15s ease; -o-transition:all .15s ease; transition:all .15s ease;
}
.mindmap label:after{
	color:hsla(0,0%,50%,.1);
	text-shadow: 1px 1px 6px hsla(0,70%,40%,1), 0 0 0 hsla(0,0%,10%,.7), 1px 1px 6px hsla(0,70%,30%,1);
	box-shadow:inset 0em 0 .5em hsla(0,0%,0%,1);
}
.mindmap label:hover{background: hsla(0,70%,40%,1);}
.mindmap label:active{background: hsla(0,80%,35%,1);}
textarea {
  width: 98%; 
  height:1.3em;
  margin: .1em;
  padding: .3em;
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.button {margin: 2vw; background-color: white;  border: solid 2px; padding:.4em .6em; text-align:center; text-decoration: none;	cursor: pointer; font-size:95%; opacity: 1; }
.button:hover {background-color: #EAECEE;  
   opacity: .71; transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out;}