/*
* Adapted from: https://codepen.io/vcichecka/pen/JYJwpo
* by Violet Cichecka.
*/

.cd-accordion-menu a {
  color: #a0f6aa;
  text-decoration: none;
}

.cd-accordion-menu {
  width: 80%;
  max-width: 600px;
  background: #4d5158;
  margin: 2em auto;
  box-shadow: 0 4px 40px #0f0f0f;
}

.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
  height:0px;
  transition:all 0.5s ease-in-out
}

.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}

.cd-accordion-menu label,
.cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 8px 8px 8px 32px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1rem;
}

.no-touch .cd-accordion-menu label:hover,
.no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after,
.cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu label {
  cursor: pointer;
}

.cd-accordion-menu label::before,
.cd-accordion-menu label::after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjRweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgNjQgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4NCgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjgsMTIuNjAwMDAwNCAwLjMsNC45MDAwMDAxIDEuNywzLjQwMDAwMDEgOCw5LjY5OTk5OTggMTQuMzAwMDAwMiwzLjQwMDAwMDEgMTUuNjk5OTk5OCw0LjkwMDAwMDEgDQoJCQkiLz4NCjwvZz4NCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LCAwKSI+DQoJPHBhdGggZmlsbD0iIzZDNzA3OSIgZD0iTTE1LDNIOC4zOTk5OTk2TDUuNjk5OTk5OCwwLjNDNS41LDAuMSw1LjMwMDAwMDIsMCw1LDBIMUMwLjQsMCwwLDAuNCwwLDF2MTRjMCwwLjYwMDAwMDQsMC40LDEsMSwxaDE0DQoJCWMwLjYwMDAwMDQsMCwxLTAuMzk5OTk5NiwxLTFWNEMxNiwzLjQwMDAwMDEsMTUuNjAwMDAwNCwzLDE1LDN6Ii8+DQo8L2c+DQo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMiwgMCkiPg0KCTxwYXRoIGZpbGw9IiM2QzcwNzkiIGQ9Ik0xNS44MDAwMDAyLDcuNDAwMDAwMUMxNS42MDAwMDA0LDcuMTk5OTk5OCwxNS4zMDAwMDAyLDcsMTUsN0g0DQoJCUMzLjU5OTk5OTksNywzLjIsNy4xOTk5OTk4LDMuMDk5OTk5OSw3LjU5OTk5OTlsLTMsNy4wMDAwMDA1Qy0wLjEsMTUuMTk5OTk5OCwwLjEsMTYsMSwxNmgxMQ0KCQljMC4zOTk5OTk2LDAsMC44MDAwMDAyLTAuMTk5OTk5OCwwLjg5OTk5OTYtMC42MDAwMDA0bDMtN0MxNi4xMDAwMDA0LDguMTAwMDAwNCwxNiw3LjY5OTk5OTgsMTUuODAwMDAwMiw3LjQwMDAwMDF6Ii8+DQoJPHBhdGggZmlsbD0iIzZDNzA3OSIgZD0iTTEuMiw2LjgwMDAwMDJDMS43LDUuNjk5OTk5OCwyLjgsNSw0LDVoOVYzYzAtMC41OTk5OTk5LTAuMzk5OTk5Ni0xLTEtMUg2LjQwMDAwMDFMNC42OTk5OTk4LDAuMw0KCQlDNC41LDAuMSw0LjMwMDAwMDIsMCw0LDBIMUMwLjQsMCwwLDAuNCwwLDF2OC42OTk5OTk4TDEuMiw2LjgwMDAwMDJ6Ii8+DQo8L2c+DQo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OCwgMCkiPg0KCTxwYXRoIGZpbGw9IiM2QzcwNzkiIGQ9Ik0xNSwwSDFDMC40LDAsMCwwLjQsMCwxdjE0YzAsMC42MDAwMDA0LDAuNCwxLDEsMWgxNGMwLjYwMDAwMDQsMCwxLTAuMzk5OTk5NiwxLTFWMQ0KCQlDMTYsMC40LDE1LjYwMDAwMDQsMCwxNSwweiBNNiw0YzAuNTk5OTk5OSwwLDEsMC40MDAwMDAxLDEsMVM2LjU5OTk5OTksNiw2LDZTNSw1LjU5OTk5OTksNSw1UzUuNDAwMDAwMSw0LDYsNHogTTMsMTJsMi00bDIsMmwzLTQNCgkJbDMsNkgzeiIvPg0KPC9nPg0KPC9zdmc+DQo=);
  background-repeat: no-repeat;
}

.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}

.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}

.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
  transition: all 0.3s ease-in-out;
height:auto
}

.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}

.no-touch .cd-accordion-menu ul label:hover,
.no-touch .cd-accordion-menu ul a:hover {
  background: #3c3f45;
}

.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu li { margin-bottom: 1px;}


.cd-accordion-menu ul label::before {
  left: 36px;
}

.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}

.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}

.cd-accordion-menu ul ul label::before {
  left: 54px;
}

.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}

.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}

.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}

.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}

@media only screen and (min-width: 600px) {
  .cd-accordion-menu label,
  .cd-accordion-menu a {
    padding: 12px 12px 12px 82px;
    font-size: 1.4rem;
  }
  .cd-accordion-menu label::before {
    left: 24px;
  }
  .cd-accordion-menu label::after {
    left: 53px;
  }
  .cd-accordion-menu ul label,
  .cd-accordion-menu ul a {
    padding-left: 106px;
  }
  .cd-accordion-menu ul label::before {
    left: 48px;
  }
  .cd-accordion-menu ul label::after,
  .cd-accordion-menu ul a::after {
    left: 77px;
  }
  .cd-accordion-menu ul ul label,
  .cd-accordion-menu ul ul a {
    padding-left: 130px;
  }
  .cd-accordion-menu ul ul label::before {
    left: 72px;
  }
  .cd-accordion-menu ul ul label::after,
  .cd-accordion-menu ul ul a::after {
    left: 101px;
  }
  .cd-accordion-menu ul ul ul label,
  .cd-accordion-menu ul ul ul a {
    padding-left: 154px;
  }
  .cd-accordion-menu ul ul ul label::before {
    left: 96px;
  }
  .cd-accordion-menu ul ul ul label::after,
  .cd-accordion-menu ul ul ul a::after {
    left: 125px;
  }
}

.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}