body{
  background:#000;
  font-size:20px;
  
  
}

.faq{
  max-width: 500px;
  width:100%;
  margin:25px auto;
}

.faq__check{
 position: absolute;
 left: -9999px;  
 opacity: 0;
}

.faq__title{
  position:relative;
  color:#fff;
  border:2px solid #02891f;
  padding:8px 10px;
  display:block;
  margin-bottom: 1%;
  cursor:pointer;
  transition:background 0.3s ease-out;
 -webkit-box-shadow: 0px 1px 6px -1px rgba(14,194,86,1);
 -moz-box-shadow: 0px 1px 6px -1px rgba(14,194,86,1);
  box-shadow: 0px 1px 6px -1px rgba(14,194,86,1);
}

.faq__title:after{
  content:"";
  position:absolute;
  top:50%;
  right:3%;
  transform:translateY(-50%);
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
}

.faq__text{
  color:#fff;
  border:2px solid #02891f;
  padding:8px 10px;
  margin-bottom: 1%;
  display:none;
}

.faq__title:hover{
  background: #2a6a38;
}

.faq__check:checked ~ .faq__title{
  background: #2a6a38;
}

.faq__check:checked ~ .faq__text{
  display:block;
}

.faq__check:checked ~ .faq__title:after{
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #000000 transparent;
}