/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
 
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.5s ease;
 
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
 

}

.accordion label {
  display: block;
  width:100%;
  text-align:right;
  
  
}

/*
 Styling
*/


.accordion > input[type="checkbox"]:checked ~ .content {
  
  
  border-top: 0;
}

.accordion .handle {
  margin-top: -25px;
  font-size: 1.125em;
  line-height: -1.4em;
}

h2.accordion label {
  color: #333;
  cursor: pointer;
  font-weight: normal;
  padding: 15px;
  display:block;
 
 
}

.accordion label:hover,
.accordion label:focus {
  
}

.accordion .handle label:before {
  
  content: "+ ";
  display: inline-block;
  margin-right: 10px;
  font-size: 2em;
  line-height: .256em;
  vertical-align: middle;
}

.accordion > input[type="checkbox"]:checked ~ .handle label:before {
  content: "-";
}


/*
 Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}