.awesome-list {
  counter-reset: my-awesome-list;
  margin:auto;
}

.awesome-list-item {
  /* Increment the "my-awesome-list" counter for every list item. */
  counter-increment: my-awesome-list;
  margin: 0.3em 0em;
  position: relative;
  width: 45%;
  display:inline-table;
}
.awesome-list-item::before {
  /* Display the counter and set the list style for the list. */
  content: counter(my-awesome-list,decimal-leading-zero);
  background: #FFF;
  border: 10px solid #2C3E50;
  border-radius: 50%;
  color: #FFF;
  display: inline-block;
  font-weight: bold;
  font-size: 1.8em;
  line-height: 2.6em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 2.6em;
  z-index: 2;
}

/* Everything else is just basic styling. */
.list-intro {
  background: #2C3E50;
  color: #FFF;
  box-sizing: border-box;
  display: inline-block;
  padding: 2em 4em 2em 2em;
  width: 100px;
  height: 100%;
  vertical-align: middle;
}

.list-intro > h1 {
  font-size: 1.4em;
}

.awesome-list-item > span {
  background: #8E44AD;
  border-radius: 4px;
  color: #FFF;
  display: inline-block;
  position: relative;
  line-height: 2em;
  margin: 0 0 0 -2em;
  padding: 1.2em 2em 1.2em 3em;
  vertical-align: middle;
}

.awesome-list-item > span::after {
  background: transparent;
  content: "";
  position: absolute;
  top: 24%;
  right: 2%;
  width: 50%;
  height: 50%;
  max-width: 300px;
  z-index: -1;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
}



.awesome-list-item:nth-child(1)::before {
  background: #FFA07A;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FFA07A;
}
.awesome-list-item:nth-child(1) > span {
  background: #FFA07A;
}
.awesome-list-item:nth-child(2)::before {
  background: #FF7F50;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FF7F50;
}
.awesome-list-item:nth-child(2) > span {
  background: #FF7F50;
}
.awesome-list-item:nth-child(3)::before {
  background: #FF6347;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FF6347;
}
.awesome-list-item:nth-child(3) > span {
  background: #FF6347;
}
.awesome-list-item:nth-child(4)::before {
  background: #FF4500;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FF4500;
}
.awesome-list-item:nth-child(4) > span {
  background: #FF4500;
}
.awesome-list-item:nth-child(5)::before {
  background: #FF8C00;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FF8C00;
}
.awesome-list-item:nth-child(5) > span {
  background: #FF8C00;
}
.awesome-list-item:nth-child(6)::before {
  background: #FFA500;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #FFA500;
}
.awesome-list-item:nth-child(6) > span {
  background: #FFA500;
}
.awesome-list-item:nth-child(7)::before {
  background: #DAA520;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #DAA520;
}
.awesome-list-item:nth-child(7) > span {
  background: #DAA520;
}
.awesome-list-item:nth-child(8)::before {
  background: #B8860B;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #B8860B;
}
.awesome-list-item:nth-child(8) > span {
  background: #B8860B;
}

.awesome-list-item:nth-child(9)::before {
  background: #99700a;
  border-color: #2C3E50;
  box-shadow: 0 0 0 3px #99700a;
}
.awesome-list-item:nth-child(9) > span {
  background: #99700a;
}
@media (min-width:32.5em) and (max-width: 49.938em) {
.awesome-list-item {
  counter-increment: my-awesome-list;
  margin: 0em 0em;
  position: relative;
  width: 40%;
  margin:auto;
  border:0.5em solid #fff;
  display:inline-table;
}
}
@media (max-width: 31em) {
.awesome-list-item {
  counter-increment: my-awesome-list;
  margin: 0em 0em;
  position: relative;
  width: 90%;
  margin:auto;
  border:0.5em solid #fff;
  display:inline-table;
}	
}