.bellows {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; }
  
  .bellows__header {
    position: relative;
    padding: 15px 20px;
    border: 1px solid #009944;
    border-width: 0 0 1px;
    background: #009944;
    color: white;
    -webkit-tap-highlight-color: transparent; }
    .bellows__header:active {
      background: #009944; }
    .bellows__header::before, .bellows__header::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 20px;
      z-index: 2;
      display: block;
      width: 16px;
      height: 4px;
      margin-top: -2px;
      background: white;
      pointer-events: none;
      -webkit-transition: -webkit-transform 0.25s ease-in-out;
              transition: transform 0.25s ease-in-out; }
    .bellows__header::before {
      content: '';
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg); }
    .bellows__item{margin-bottom: 10px;}       
    .bellows__header::after {
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg); }
    .bellows__item.bellows--is-open > .bellows__header::before, .bellows__item.bellows--is-opening > .bellows__header::before {
      -webkit-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
              transform: rotate(180deg); }
    .bellows__item.bellows--is-open > .bellows__header::after, .bellows__item.bellows--is-opening > .bellows__header::after {
      -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
              transform: rotate(360deg); }
    .bellows__item:last-child > .bellows__header {
      border-bottom: 0; }
    .bellows__header h1,
    .bellows__header h2,
    .bellows__header h3,
    .bellows__header h4 {
      margin: 0; }
  
  .bellows__content {
    padding: 20px;
    border: 1px solid #ecf0f1; }
    .bellows__content .bellows {
      margin-top: 20px; }