test accordion

<nav class="accordion arrows">
  <input type="radio" name="accordion" id="cb1">
  <section class="box">
    <label class="box-title" for="cb1">box 1</label>
    <div class="box-content">Click on an item to open. Click on its header or the list header to close.</div>
  </section>
  <input type="radio" name="accordion" id="cb2">
  <section class="box">
    <label class="box-title" for="cb2">box 2</label>
    <div class="box-content">Add the class 'arrows' to nav.accordion to add dropdown arrows.</div>
  </section>
  <input type="radio" name="accordion" id="cb3">
  <section class="box">
    <label class="box-title" for="cb3">box 3</label>
    <div class="box-content">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque finibus tristique nisi, maximus ullamcorper ante finibus eget.</div>
  </section>
  <input type="radio" name="accordion" id="acc-close">
</nav>

.accordion {
  margin: auto;
  width: 400px;
 }

.accordion input {
  display: none;
}

.box {
  position: relative;
  background: white;
  height: 64px;
  transition: all .15s ease-in-out;
}

.box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }


.box-title {
  width: calc(100% - 40px);
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
  border: solid;
  border-width: 1px;
  border-color: grey;
  border-radius: 2px;
}

.box-content {
  width: calc(100% - 40px);
  padding: 30px 20px;
  font-size: 11pt;
  color: rgba(0,0,0,.54);
  display: none;
  border: solid;
  border-width: 1px;
  border-color: grey;
}

.box-close {
  position: absolute;
  height: 64px;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}



input:checked + .box {
  height: auto;
  margin: 10px 0;
    /*box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);*/
}

input:checked + .box .box-title {
  border-bottom: 1px solid rgba(0,0,0,.18);
  background-color:#f9f9f9;
}

input:checked + .box .box-content,
input:checked + .box .box-close {
  display: inline-block;
}

.arrows section .box-title {
  padding-left: 44px;
  width: calc(100% - 64px);
}

.arrows section .box-title:before {
  position: absolute;
  content: '';
   color: rgba(0,0,0,.54);
  position: absolute;
  left: 22px;
  top: 30px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-bottom: 2px solid #0c9;
  border-left: 2px solid #0c9;
  transform: rotate(-45deg);
  transition: transform 0.3s;
  -webkit-transform: rotate(-45deg);
  transition: -webkit-transform 0.3s;
  
}

input:checked + section.box .box-title:before {
  transform: rotate(135deg);

  }