.hide { display: none }
/*body {
    width: 400px;
    margin: 1.5em auto;
    color: #333;
}
h1 {
    font-family: 'Pacifico',cursive;
    font-weight: 400;
    font-size: 2.5em;
    text-align: center;
}*/

/* =====
 * Basic styling
 * ===== */
.accordion {
  list-style: none;
  padding: 0;
}
.accordion li {
  margin-bottom: 10px;
list-style-image: url('../images/ArrowMenuRightGrey.gif');
}
.toggle {
width: 100%;
display: block;
/* height: 2.5em; */
/* line-height: 2.5em; */
/* background: #333; */
border-top: thin solid lightgray;
/* border-radius: 3px; */
padding-top: 10px;
/*color: #333;*/
cursor: pointer;
text-align: l;
transition: background .3s ease;
}
.toggle:hover { color: #c22026 }
.inner {
  text-align: left;
  padding: 0 1em;
  overflow: hidden;
  max-height: 0;
  
  transition: max-height .6s ease;
}
.inner *:first-child { margin-top: 1em }
.inner *:last-child { margin-bottom: 1em }
.inner img { display: block; margin: 0 auto }

/* =====
 * Functionality
 * ===== */
.accordion input[type="checkbox"]:checked + li > .inner {
  max-height: 1160px; /* CSS can't animate to height:auto; :( */ 
  /* set max-height to a higher value if you want large accordions */
  /* alternatively we could just do fixed-height, but dat's ugly yo */
}